/* ====================navbar responsive===================== */

@media (max-width: 768px) {

  

  /* 🔥 TOP BAR SIMPLE */
  .top-bar {
    font-size: 12px;
    padding: 5px 10px;
    display: none;
    
  }

 
  /* 🔥 NAVBAR */
  .navbar {
    top: -1px;
    padding: 20px 15px;
    /* background: #70a5d4;  */
    backdrop-filter: none;
    height: 70px;
  }

  /* 🔥 HIDE MENU */
  .menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #70a5d4;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    display: none;
  }

  .menu.active {
    display: flex;
  }

  /* 🔥 NAV LEFT */
  .navbar-left {
    width: 100%;
    justify-content: space-between;
  }

  /* 🔥 LOGO CENTER */
  .logo {
    top: 10%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .logo img {
    height: 50px;
  }

  /* 🔥 MENU ICON */
  .menu-toggle {
    font-size: 22px;
    cursor: pointer;
    
  }


  .fa-heart{
    display: none;
  }

  .rightt{
    display: flex;
    gap: 10px;
    font-size: 20px;
  }

  .d-none{
    display: flex !important;
  }

  /* 🔥 RIGHT ICONS */
  .nav-right {
    gap: 15px;
  }

  .nav-right span {
    display: none; /* hide text */
  }

  /* 🔥 IMAGE FULL */
  .phone{
    position: absolute;
    top: 10%;
    
  }
  .navbar-image img {
   margin-top: 50px;
    height: 100vh;
    object-fit: cover;
    border-radius: none;
  }

}

.fa-heart{
    display: none !important;
}


/* ======================detail section responsive====================== */

@media (max-width: 768px) {

  .detail-section {
    padding: 40px 15px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* TEXT SIZE */
  .detail-left h2 {
    font-size: 24px;
  }

  .detail-right h1 {
    font-size: 26px;
    text-align: center;
  }

  .detail-right p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* STATS STACK */
  .detail-stats {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 50px;
  }

  .detail-stat-value {
    font-size: 18px;
  }

  /* BUTTONS */
  .detail-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .btn {
    padding: 10px 25    px;
    font-size: 14px;
  }

  .icon-btn {
    font-size: 16px;
    padding: 10px;
  }

}


/* ======================================= */

/* =====================car scrolling fesponsive===================== */

@media (max-width: 768px){
    .stop{
        margin-bottom: 50px;
        padding: 0 0 10px 0;
    }

    /* LINE */
.line {
  position: absolute;
  top: 10%;
  width: 100%;
  height: 2px;
  background: #aaa;
}

/* CAR */
.car {
  position: absolute;
  top: 8%;
  left: 8%;
  transform: translateY(-50%);
  transition: 0.2s;
}

.car img {
  width: 80px;
}





}



@media (max-width: 768px) {

  .location {
    font-size: 10px;
    padding: 6px 20px;
    border-radius: 15px;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    max-width: 120px;
    text-align: center;
  }

  #loc1  { top: 70% !important; left: 35% !important; }
  #loc11 { top: 45% !important; left: 50% !important; }

  #loc2  { top: 62% !important; left: 55% !important; }
  #loc22 { top: 58% !important; left: 28% !important; }

  #loc3  { top: 52% !important; left: 58% !important; }
  #loc33 { top: 42% !important; left: 25% !important; }

  #loc4  { top: 68% !important; left: 60% !important; }
  #loc5  { top: 38% !important; left: 65% !important; }

}
/* =========================================================== */

/* =======================last card image section====================== */
/* ================= MOBILE ================= */
@media (max-width: 768px) {

  .scroll-section {
    padding: 20px 10px;
  }

  /* HEADER BUTTON */
  .scroll-header {
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .scroll-header button {
    padding: 6px 10px;
    font-size: 14px;
  }

  /* SCROLL CONTAINER */
  .scroll-container {
  
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  /* CARD */
  .card {
    min-width: 85%; /* 🔥 main control */
    
  }

  /* IMAGE */
  .img-box {
    height: 300px;
  }

  .img-box img {
    height: 100%;
    object-fit: cover;
  }

  /* TEXT */
  .text-content {
    bottom: 60px;
    left: 10px;
  }

  .text-content h3 {
    font-size: 16px;
  }

  .text-content p {
    font-size: 12px;
  }

  /* BADGE */
  .badge {
    font-size: 10px;
    padding: 4px 8px;
  }

  /* BUTTON */
  .explore {
    padding: 8px 18px;
    font-size: 12px;
  }

  /* HIDE SCROLLBAR */
  .scroll-container::-webkit-scrollbar {
    display: none;
  }

}

/* ========================================================== */
/* ====================title section responsive================= */
@media (max-width: 768px) {

        .expertise-left h4{
            text-align: center;
        }
  .stats {
    display: flex;
    flex-direction: row; /* 🔥 left to right */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .stats div {
    flex: 1; /* 🔥 equal width */
    text-align: center;
  }

  .stats h3 {
    font-size: 16px;
  }

  .stats p {
    font-size: 11px;
  }

  .xbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 🔥 important */
  }

}

/* ======================================================== */
/* ========================footer section=============================== */
@media (max-width: 768px){
    .logoo-social{
        width: 100% !important;
    }

    .social i{
        font-size: 20px;
    }

    .input-box{
        padding: 5px 10px;
    }
    .zbtn{
        padding: 10px 40px !important;
    }

    .newsletter p{
        text-align: center;
    }
    .newsletter #z{
        text-align: center !important;
    }

    .footer-links{
        margin: 0 auto !important;
    }
}