/* =========================================
   MOBILE HEADER FIX
========================================= */

@media (max-width: 991px) {

  body {

    padding-top: 100px;
  }

  .header {

    margin-top: 38px;

  }

  .header.scrolled {

    margin-top: 0;

  }

}

/* =========================================
   MOBILE HEADER FIX
========================================= */

@media (max-width: 991px) {

  body {

    padding-top: 92px;
  }


  .topbar{

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1001;

    padding: 8px 0;

    transition: transform 0.4s ease;

  }

    /* HIDE TOPBAR */

  .topbar.hide{

    transform: translateY(-100%);

  }


  .header{

    position: fixed;

    top: 36px;
    left: 0;

    width: 100%;

    margin-top: 0;

    background: rgba(10,25,45,0.96);

    backdrop-filter: blur(14px);

    transition: top 0.4s ease;

    z-index: 1000;

  }

  .header.scrolled{

    top: 0;

  }

.nav-container{

    min-height: 64px;

    padding: 0 18px;

  }

}

/* =========================================
   MOBILE LOGO
========================================= */

@media (max-width: 991px) {

  .logo img {

   
  height: 42px;

  width: auto;

  max-width: 180px;

  object-fit: contain;

  }

}

@media (max-width: 575px) {

  .logo img {

 
  height: 36px;

  max-width: 150px;

  }

}



@media (max-width: 767px) {

  .topbar {

    padding: 10px 0;

  }

  .topbar-container {

    flex-direction: row;

    justify-content: space-between;

  }

  .topbar-left {

    gap: 15px;

  }

.topbar span {

  font-size: 10px;

  white-space: nowrap;

}

  .topbar-right {

    display: none;

  }

}






/* =========================================
   HERO RESPONSIVE
========================================= */

@media (max-width: 991px) {

  .hero {

    min-height: auto;

    padding: 140px 0 80px;

  }

  .hero-container {

    grid-template-columns: 1fr;

    gap: 50px;

  }

  .hero-content {

    order: 2;

    text-align: center;

    margin: auto;

  }

  .hero-image {

    order: 1;

  }

  .hero-image img {

    max-width: 100%;

  }

  .hero-content p {

    margin: auto auto 35px;

  }

  .hero-buttons {

    justify-content: center;

    flex-wrap: wrap;

  }

  .trust-boxes {

    justify-content: center;

  }

}

@media (max-width: 575px) {

  .hero {

    padding: 120px 0 70px;

  }

  .hero-content h1 {

    font-size: 40px;

    line-height: 1.12;

  }

  .hero-content p {

    font-size: 15px;

  }

  .hero-buttons {

    flex-direction: column;

  }

  .hero-buttons a {

    width: 100%;

  }

  .trust-item {

    width: 100%;

  }

}



/*about intro*/



@media (max-width: 991px){

  .about-page-grid{

    grid-template-columns:1fr;

    gap:50px;

  }

  .about-page-image{

    height:500px;

    max-width:700px;

    margin:auto;

  }

  .about-page-content{

    max-width:100%;

  }

  .about-page-content h2{

    font-size:42px;

  }

}


@media (max-width: 767px){

  .about-page-image{

    height:380px;

  }

  .about-page-content h2{

    font-size:34px;

    line-height:1.2;

  }

  .about-highlights{

    grid-template-columns:1fr;

  }

  .highlight-item{

    padding:16px 18px;

  }

  .about-stats-row{

    flex-wrap:wrap;

    gap:25px;

  }

  .about-stat{

    width:calc(50% - 15px);

  }

}


@media (max-width: 480px){

  .about-page-image{

    height:300px;

  }

  .about-page-content h2{

    font-size:30px;

  }

  .about-stat{

    width:100%;

  }

  .about-stats-row{

    flex-direction:column;

    gap:18px;

  }

  .about-stat{

    text-align:center;

  }

}



@media(max-width:991px){

  .vision-grid{

    grid-template-columns:1fr;

  }

  .why-grid{

    grid-template-columns:repeat(2,1fr);

  }

}

@media(max-width:767px){

  .why-grid{

    grid-template-columns:1fr;

  }

  .vision-card{

    padding:35px;

  }

}

@media (max-width: 991px) {

  .about-page-grid {

    grid-template-columns: 1fr;

  }

  .about-page-image {

    height: 520px;

  }

  .inner-hero h1 {

    font-size: 52px;

  }

}

@media (max-width: 767px) {

  .inner-hero {

    padding: 170px 0 90px;

  }

  .inner-hero h1 {

    font-size: 40px;

  }

  .about-page-content h2 {

    font-size: 38px;

  }

}


@media(max-width:480px){

  .about-highlights{

    display:flex;

    flex-direction:column;

    gap:12px;

  }

  .highlight-item{

    width:100%;

    padding:14px;

    box-sizing:border-box;

  }

}