/* ============================================================
   demo.css  — Review section + About/CEO responsive overrides
   ============================================================ */

/* ========== Review Section ========== */
.review-outter {
  background-image: url('../img/logist22.jpg');
  background-color: #52524B;
  background-size: cover;
  background-position: center;
  opacity: 0.88;
  height: 100vh;
  position: relative;
}

.demo-review {
  max-width: 1140px;
  align-content: flex-start;
  align-items: flex-start;
}

.demo-reviw-head {
  text-align: center;
  margin: 0 0 50px 0;
  font-family: "Georgia", Sans-serif;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1.2em;
  color: #0094D9;
}

.demo-review-up {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.demo-review-upin {
  margin-inline: auto;
  position: relative;
  background-color: #000000;
  padding: 60px;
  border-radius: 4px;
}

.demo-review-para {
  color: #888888;
  font-family: "Georgia", Sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.8em;
}

.demo-review-title {
  line-height: 1;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.demo-review-name {
  color: #888888;
  font-family: "Raleway", Sans-serif;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5em;
  letter-spacing: 2.6px;
}

.demo-review-cmp {
  color: #0094D9;
  font-family: "Montserrat", Sans-serif;
  font-size: 0.8em;
  font-style: normal;
  line-height: 1.5em;
}

.demo-review-dn {
  margin-top: 21px;
  padding: 0;
}

.demo-review-dnin {
  display: flex;
  margin-inline: auto;
  position: relative;
}

.demo-review-dnmain {
  margin-inline: auto;
  position: relative;
  background-color: #000000;
  padding: 60px;
  border-radius: 4px;
  margin: 0 20px 0 0;
}

/* Review responsive */
@media (min-width: 992px) and (max-width: 1199px) {
  .demo-review-para p {
    font-size: 15px;
    line-height: 24px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .demo-review-upin,
  .demo-review-dnmain {
    width: 100%;
    float: none;
    margin-bottom: 25px;
  }

  .demo-review-para p { font-size: 15px; line-height: 24px; }
  .demo-review-title  { text-align: center; }
}

@media (max-width: 767px) {
  .review-outter { padding: 20px 10px; }

  .demo-reviw-head {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .demo-review-up {
    display: block;
    text-align: center;
    padding: 0 20px;
  }

  .demo-review-upin {
    width: 100%;
    float: none;
    margin-bottom: 20px;
    padding: 30px;
  }

  .demo-review-dn { display: none; }

  .demo-review-para p {
    font-size: 14px;
    line-height: 22px;
    text-align: justify;
  }

  .demo-review-title {
    text-align: center;
    margin-top: 10px;
  }

  .demo-review-name h4 {
    font-size: 16px;
    font-weight: 700 !important;
  }

  .demo-review-cmp h6 {
    font-size: 13px;
    color: #0094D9;
  }
}

@media (max-width: 480px) {
  .demo-review-upin { padding: 20px; }
}

/* ========== About Page — Hero Section Mobile ========== */
@media (max-width: 768px) {
  .demo-about-in  { max-height: none; overflow: visible; }

  .demo-about-out {
    height: auto !important;
    flex-direction: column;
    display: flex;
  }

  .demo-about-out .col-md-6 {
    width: 100% !important;
    float: none;
  }

  .demo-about-img { height: 280px; }

  .demo-about-para {
    padding: 20px;
    min-height: auto;
  }

  .demo-about-para-start { padding: 0 10px; }
}

/* ========== About Page — CEO Section Mobile ========== */
@media (max-width: 768px) {
  .demo-ceo-in  { max-height: none; overflow: visible; }

  .demo-ceo-out {
    height: auto !important;
    flex-direction: column;
    display: flex;
  }

  .demo-ceo-out .col-md-6 {
    width: 100% !important;
    float: none;
  }

  .demo-img-out { margin: 0; padding: 20px; }
}

/* ========== Services — Two-column rows on mobile ========== */
@media (max-width: 768px) {
  .our-story-section .col-md-12,
  .rdx-vj .col-md-12,
  .Tracking-service-section .col-md-12 {
    display: flex;
    flex-direction: column;
  }

  .our-story-section .col-md-6,
  .rdx-vj .col-md-6,
  .Tracking-service-section .col-md-6 {
    width: 100% !important;
    float: none !important;
  }

  .route-right {
    height: auto !important;
    padding: 30px 20px !important;
  }

  .route-img,
  .route-img-out { height: 320px !important; }
}

@media (max-width: 480px) {
  .route-img,
  .route-img-out { height: 240px !important; }
}


/* ========== Career — Two columns on mobile ========== */
@media (max-width: 768px) {
  .sec-prty-career .col-md-12 {
    display: flex;
    flex-direction: column;
  }

  .sec-prty-career .col-md-6 {
    width: 100% !important;
    float: none !important;
  }

  .bhgt { margin-top: 20px; }
}

/* ========== Client logo grid on mobile ========== */
@media (max-width: 768px) {
  .img-div {
    width: 50% !important;
    float: left;
  }
}

@media (max-width: 480px) {
  .img-div {
    width: 100% !important;
    float: none !important;
  }
}

/* ========== Index — About two-column on mobile ========== */
@media (max-width: 768px) {
  .about-outter-hs .col-md-12 {
    display: flex;
    flex-direction: column;
  }

  .about-outter-hs .col-md-6 {
    width: 100% !important;
    float: none !important;
  }

  /* Keep a fixed height so the text box stays scrollable */
  .about-para-hs {
    height: 220px;
  }

  .about-in-img-hs {
    min-height: auto;
    width: 100%;
  }
}

/* ========== Navbar mobile ========== */
@media (max-width: 767px) {
  .nav-outter-hs {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
  }

  .nav-mid-hs {
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
  }

  .nav-mid-hs li {
    width: 100%;
    padding: 4px 0;
  }

  .nav-right-hs {
    width: 100%;
    justify-content: flex-start;
    padding: 4px 0 10px;
  }

  .vivgh {
    position: relative;
    width: 55px;
    height: 46px;
    display: block;
  }

  /* Bootstrap 3 icon-bar (hamburger lines) colour */
  .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #333;
  }

  .navbar-inverse .navbar-toggle {
    border-color: #333;
  }
}