body {
     margin: 0;
     padding: 0;
     font-family: "Raleway", Arial, sans-serif;
 }

 /* ================= TOPBAR START ================= */
 .topbar {
     background: linear-gradient(90deg, #001f3f, #003366, #004080);
     color: #fff;
     padding: 8px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     transition: all 0.4s ease-in-out;
 }

 /* Left + Right */
 .topbar-left,
 .topbar-right {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 /* Icon spacing for text */
 .topbar-left i {
     margin-right: 5px;
 }

 /* 3D Social Icon Base */
 .topbar-right .icon {
     position: relative;
     width: 30px;
     height: 30px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     font-size: 18px;
     color: #fff;
     text-decoration: none;
     border-radius: 10px;
     background: linear-gradient(145deg, #004080, #002244);
     box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.2),
         inset -2px -2px 6px rgba(0, 0, 0, 0.4),
         4px 4px 8px rgba(0, 0, 0, 0.5),
         -4px -4px 8px rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
 }

 /* Center icons perfectly */
 .topbar-right .icon i {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
 }

 /* Hover animation */
 .topbar-right .icon:hover {
     transform: translateY(-4px) scale(1.05);
     box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.3),
         inset -2px -2px 8px rgba(0, 0, 0, 0.4),
         0 8px 15px rgba(0, 0, 0, 0.5),
         0 0 10px rgba(0, 255, 255, 0.3);
 }

 /* Facebook */
 .topbar-right .facebook {
     background: linear-gradient(145deg, #1877f2, #0b4da1);
 }

 /* Instagram */
 .topbar-right .instagram {
     background: linear-gradient(145deg, #f58529, #dd2a7b, #8134af);
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .topbar {
         flex-direction: row;
         justify-content: space-between;
         padding: 3px 15px;
         font-size: 13px;
     }

     .topbar-left {
         flex: 1;
         justify-content: flex-start;
         gap: 5px;
     }

     .topbar-left .email {
         display: none;
         /* hide email on small screens */
     }

     .topbar-right {
         flex: 1;
         justify-content: flex-end;
         gap: 10px;
     }
 }

 /* ================= TOPBAR END ================= */

 @media (max-width: 991px) {
     .navbar-collapse {
         background-color: #fff !important;
         padding: 15px 0;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     }

     .navbar-nav .nav-link {
         color: #002244 !important;
     }

     .navbar-nav .nav-link:hover {
         color: #e60000 !important;
         background-color: transparent;
     }
 }

 /* navbar start */
 .navbar {
     background-color: #fff;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
     position: sticky;
     top: 0;
     z-index: 999;
     padding: 12px 0;
     height: 75px;
 }


 .navbar-brand img {
     height: 80px;
     transition: all 0.3s ease;
 }

 .navbar-nav .nav-link {
     color: #002244;
     font-weight: 500;
     padding: 10px 14px;
     font-size: 19px;
     text-transform: capitalize;
     position: relative;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
     color: #e60000;
 }

 /* Dropdown icon style */
 .nav-link i.fa-angle-down {
     font-size: 13px;
     transition: transform 0.3s ease;
 }

 .nav-item.dropdown:hover .nav-link i.fa-angle-down {
     transform: rotate(180deg);
     color: #e60000;
 }

 /* Dropdown menu styling */
 .dropdown-menu {
     border: none;
     border-radius: 0;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     padding: 10px 0;
     transition: all 0.3s ease;
 }

 .dropdown-item {
     color: #002244;
     font-weight: 500;
     padding: 12px 25px;
     position: relative;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .dropdown-item:hover {
     color: #fff;
     background-color: #e60000;
     transform: translateX(5px);
 }

 .dropdown-item i {
     color: #e60000;
 }

 @media (max-width: 991px) {
     .navbar-brand img {
         height: 65px;
     }
 }

 .navbar-toggler {
     border: none;
     font-size: 22px;
     color: #002244;
 }

 /* navbar end */

 /* crousel start */
 /* Carousel height */
 .carousel-item img {
     height: 80vh;
     object-fit: cover;
     object-position: center;
 }

 /* Mobile view height adjust */
 @media (max-width: 767px) {
     .carousel-item img {
         height: 16vh;
         /* Mobile height */
     }
 }

 /* crousel end */

 /* fixed button start */

 /* fixed button start */
 .fixed-buttons {
     position: fixed;
     bottom: 20px;
     left: 20px;
     /* Desktop & mobile left */
     display: flex;
     flex-direction: column;
     gap: 15px;
     z-index: 9999;
 }

 /* Button base */
 .fixed-buttons a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     color: #fff;
     font-size: 24px;
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
     transition: all 0.3s ease, transform 0.3s ease;
     position: relative;
     overflow: hidden;
     text-decoration: none;
     /* Add this line to remove underline */
 }

 /* Pulse animation for attention */
 .fixed-buttons a::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     top: 0;
     left: 0;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
     opacity: 0;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.9);
         opacity: 0.5;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.2;
     }

     100% {
         transform: scale(0.9);
         opacity: 0.5;
     }
 }

 /* Call Button - Blue Gradient */
 .call-btn {
     background: linear-gradient(135deg, #1e90ff, #0073e6);
 }

 .call-btn:hover {
     transform: scale(1.2) rotate(-5deg);
     background: linear-gradient(135deg, #0073e6, #1e90ff);
     box-shadow: 0 0 25px rgba(30, 144, 255, 0.6);
 }

 /* WhatsApp Button */
 .whatsapp-btn {
     background: linear-gradient(135deg, #00c853, #64dd17);
 }

 .whatsapp-btn:hover {
     transform: scale(1.2) rotate(-5deg);
     background: linear-gradient(135deg, #64dd17, #00c853);
     box-shadow: 0 0 25px rgba(0, 200, 83, 0.6);
 }

 /* Mobile adjustments */
 @media (max-width: 768px) {
     .fixed-buttons {
         bottom: 15px;
         left: 15px;
         gap: 12px;
     }

     .fixed-buttons a {
         width: 50px;
         height: 50px;
         font-size: 22px;
     }
 }

 /* fixed button end */
 /* fixed button end */

 /* heading start */
 .hero-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 0 20px;
     /* height: 70vh; */
 }

 /* Fade-up animation */
 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-section h1 {
     font-family: "Playfair Display", serif;
     font-size: 3rem;
     font-weight: 700;
     background: linear-gradient(90deg, #0d1b38, #3a7bd5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
     margin: 0;
     animation: fadeUp 1s ease-out forwards;
     /* h1 animation */
 }

 .hero-section h2.hero-subtitle {
     font-family: "Raleway", sans-serif;
     font-size: 1.5rem;
     font-weight: 500;
     background: linear-gradient(90deg, #1a3a70, #4a90e2);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
     letter-spacing: 0.5px;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
     margin-top: 20px;
     max-width: 700px;
     text-align: center;
     opacity: 0;
     /* start hidden */
     animation: fadeUp 1s ease-out 0.5s forwards;
     /* delayed fade-up for subtitle */
 }

 /* Responsive font sizes */
 @media (max-width: 768px) {
     .hero-section h1 {
         font-size: 2.2rem;
     }

     .hero-section h2.hero-subtitle {
         font-size: 1.2rem;
     }
 }

 @media (max-width: 480px) {
     .hero-section h1 {
         font-size: 1.8rem;
     }

     .hero-section h2.hero-subtitle {
         font-size: 1rem;
     }
 }

 /* heading end */

 /* about index start */
 .welcome-section {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 40px 6%;
     background: #f8fdfb;
     gap: 40px;
     overflow: hidden;
 }

 .welcome-image,
 .welcome-content {
     flex: 1 1 45%;
 }

 .welcome-image {
     text-align: center;
     animation: fadeInLeft 1.5s ease;
 }

 .welcome-image img {
     width: 100%;
     max-width: 500px;
     height: auto;
     border-radius: 20px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     transition: transform 0.6s ease;
 }

 .welcome-image img:hover {
     transform: scale(1.05);
 }

 .welcome-content {
     animation: fadeInRight 1.5s ease;
 }

 /* Heading */
 .welcome-content h2 {
     font-family: "Playfair Display", serif;
     font-size: 39px;
     background: linear-gradient(90deg, #0d1b38, #3a7bd5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 20px;
     line-height: 1.3;
 }

 .welcome-content h2 span {
     background: linear-gradient(90deg, #3a7bd5, #7fbfff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* Paragraph styling */
 .welcome-content p {
     font-size: 16px;
     color: #0d1b38;
     line-height: 1.8;
     margin-bottom: 25px;
 }

 .welcome-content p strong {
     display: block;
     font-weight: 600;
     color: #0d1b38;
     margin: 12px 0 8px;
     font-size: 17px;
 }

 /* Button Wrapper Centered */
 .btn-wrapper {
     text-align: center;
     /* Center the button */
     margin-top: 25px;
 }

 .welcome-btn {
     display: inline-block;
     background: linear-gradient(135deg, #23435c, #f01b21);
     color: #fff;
     padding: 12px 30px;
     font-weight: 600;
     border-radius: 30px;
     text-decoration: none;
     transition: all 0.4s ease;
     box-shadow: 0 5px 15px rgba(13, 27, 56, 0.4);
 }

 .welcome-btn:hover {
     transform: scale(1.1);
     background: linear-gradient(135deg, #f01b21, #23435c);
 }

 /* Responsive Styles */
 @media (max-width: 991px) {
     .welcome-section {
         flex-direction: column;
         padding: 30px 5%;
         text-align: center;
     }

     .welcome-image,
     .welcome-content {
         flex: 1 1 100%;
         animation: none;
     }

     .welcome-content h2 {
         font-size: 32px;
         margin-top: 15px;
     }

     .welcome-content p {
         font-size: 15px;
         text-align: justify;
     }

     .welcome-btn {
         padding: 10px 24px;
         font-size: 15px;
     }

     .welcome-image img {
         max-width: 350px;
     }
 }

 @media (max-width: 575px) {
     .welcome-content h2 {
         font-size: 26px;
     }

     .welcome-content p {
         font-size: 14.5px;
     }
 }

 /* Animations */
 @keyframes fadeInLeft {
     0% {
         opacity: 0;
         transform: translateX(-50px);
     }

     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes fadeInRight {
     0% {
         opacity: 0;
         transform: translateX(50px);
     }

     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* about index end */

 /* stats start */
 /* =======================
         Stats Section (For Lift Website)
      ========================== */
 .stats-section {
     background: linear-gradient(135deg, #0b2239, #007bff);
     padding: 70px 15px;
     text-align: center;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 /* Subtle overlay pattern */
 .stats-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: url("https://www.transparenttextures.com/patterns/connected.png");
     opacity: 0.08;
 }

 .stats-section h2 {
     font-size: 40px;
     font-weight: 700;
     margin-bottom: 50px;
     background: linear-gradient(90deg, #8ac6ff, #ffffff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     position: relative;
     z-index: 2;
 }

 .stats-row {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     position: relative;
     z-index: 2;
 }

 .stat-card {
     background: rgba(255, 255, 255, 0.08);
     padding: 35px 25px;
     border-radius: 20px;
     color: #fff;
     text-align: center;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     position: relative;
     overflow: hidden;
     flex: 1 1 230px;
     max-width: 240px;
     backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 .stat-card i {
     font-size: 42px;
     background: linear-gradient(135deg, #007bff, #00c6ff);
     color: #fff;
     padding: 20px;
     border-radius: 50%;
     margin-bottom: 18px;
     display: inline-block;
     transition: all 0.4s ease;
     box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
 }

 .stat-card h3 {
     font-size: 34px;
     font-weight: 700;
     margin: 12px 0;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .stat-card p {
     font-size: 15px;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 0.8px;
     color: #ffffff;
 }

 /* Hover Animation */
 .stat-card:hover {
     transform: translateY(-12px) scale(1.05);
     box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
     border-color: rgba(255, 255, 255, 0.25);
 }

 .stat-card:hover i {
     transform: scale(1.2) rotate(10deg);
     background: linear-gradient(135deg, #00a2ff, #66d9ff);
     box-shadow: 0 0 20px rgba(102, 217, 255, 0.6);
 }

 .stat-card:hover h3 {
     color: #00c6ff;
 }

 /* Responsive Design */
 @media (max-width: 992px) {
     .stats-section h2 {
         font-size: 34px;
         margin-bottom: 40px;
     }

     .stat-card {
         flex: 1 1 200px;
         padding: 30px 20px;
     }

     .stat-card h3 {
         font-size: 30px;
     }

     .stat-card i {
         font-size: 36px;
         padding: 18px;
     }
 }

 @media (max-width: 768px) {
     .stat-card {
         flex: 1 1 45%;
         max-width: none;
     }
 }

 @media (max-width: 480px) {
     .stat-card {
         flex: 1 1 100%;
     }

     .stats-section h2 {
         font-size: 28px;
     }
 }

 /* stats end */

 /* our product index start */
    /* Section */
      .lift-products-section {
        text-align: center;
        padding: 70px 20px;
      }

      .lift-products-section h2 {
        font-family: "Playfair Display", serif;
        font-size: 39px;
        background: linear-gradient(90deg, #0d1b38, #3a7bd5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 50px;
        line-height: 1.3;
      }

      /* Product Grid */
      .lift-products-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 30px;
        max-width: 1200px;
        margin: auto;
      }

      /* Product Card */
      .lift-product-card {
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.4s ease;
      }

      .lift-product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
      }

      .lift-product-image img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        transition: all 0.4s ease;
      }

      .lift-product-card:hover .lift-product-image img {
        transform: scale(1.05);
      }

      .lift-product-content {
        padding: 20px 15px 25px;
      }

      .lift-product-content h3 {
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(90deg, #ff0000, #146abf);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 18px;
      }

      /* Buttons Group */
      .lift-btn-group {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: nowrap;
      }

      .lift-btn {
        flex: 1;
        border-radius: 25px;
        padding: 10px 0;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        transition: all 0.4s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
        min-width: 120px;
      }

      /* Gradient Buttons */
      .view-btn {
        background: linear-gradient(135deg, #23435c, #f01b21);
      }

      .enquiry-btn {
        background: linear-gradient(135deg, #23435c, #f01b21);
      }

      /* Glow Hover Animation */
      .lift-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.4s ease;
      }

      .lift-btn:hover::after {
        left: 100%;
      }

      .lift-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      }

      /* ✅ Keep same layout on mobile */
      @media (max-width: 600px) {
        .lift-btn-group {
          flex-direction: row;
          justify-content: center;
          gap: 10px;
        }

        .lift-btn {
          font-size: 12px;
          padding: 9px 0;
        }
      }
 /* our product index end */


 /* service index start */
 .hexa-services-section {
     background: #ffffff;
     /* padding: 60px 15px; */
     text-align: center;
     color: #0a1d37;
 }

 /* Gradient Heading for Lift Services */
 .heading-lift {
     font-family: "Playfair Display", serif;
     font-size: 39px;
     background: linear-gradient(90deg, #0d1b38, #3a7bd5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 50px;
     line-height: 1.3;
 }

 .heading-lift span {
     background: linear-gradient(90deg, #3a7bd5, #7fbfff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .services-row {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 25px;
 }

 .service-card {
     background: #f9f9f9;
     border-radius: 16px;
     width: 320px;
     padding: 25px 20px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     text-align: center;
     position: relative;
 }

 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .service-card .icon-top {
     font-size: 50px;
     color: #ff4c4c;
     margin-bottom: 15px;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .service-card:hover .icon-top {
     transform: scale(1.2);
     color: #3a7bd5;
 }

 .service-card h3 {
     font-size: 20px;
     margin-bottom: 15px;
     background: linear-gradient(90deg, #ff0000, #ff4c4c);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .service-card p {
     font-size: 15px;
     line-height: 1.6;
     color: #0a1d37;
     /* text-align: justify; */
 }

 /* Responsive Design */
 @media (max-width: 992px) {
     .service-card {
         width: 45%;
     }
 }

 @media (max-width: 768px) {
     .service-card {
         width: 90%;
     }
 }

 @media (max-width: 480px) {
     .hexa-services-section h2 {
         font-size: 28px;
     }

     .service-card {
         width: 100%;
     }
 }

 /* service index end */

 /* why choose us start */
 /* ===== Why Choose Us Section ===== */
 .section-why-choose {
     background: #f0f4ff;
     padding: 40px 15px;
     text-align: center;
     font-family: 'Raleway', sans-serif;
     color: #0a1d37;
 }

 .heading-why {
     font-family: "Playfair Display", serif;
     font-size: 39px;
     background: linear-gradient(90deg, #0d1b38, #3a7bd5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 50px;
     /* thoda spacing products ke liye */
     line-height: 1.3;
 }

 .heading-why span {
     background: linear-gradient(90deg, #3a7bd5, #7fbfff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .row-choose {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
 }

 /* Card Styles */
 .card-choose {
     background: #ffffff;
     border-radius: 20px;
     width: 300px;
     padding: 40px 25px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
     transition: transform 0.5s ease, box-shadow 0.5s ease;
     text-align: center;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
 }

 .card-choose:hover {
     transform: translateY(-15px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
 }

 /* Icon Styles */
 .icon-choose {
     width: 80px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #3a7bd5, #00c6ff);
     border-radius: 50%;
     margin: 0 auto 25px auto;
     font-size: 36px;
     color: #fff;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
     transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
 }

 .card-choose:hover .icon-choose {
     transform: scale(1.2) rotate(10deg);
     background: linear-gradient(135deg, #ff4c4c, #ff1a1a);
     /* Red gradient */
     box-shadow: 0 10px 25px rgba(255, 0, 0, 0.4);
     /* Red shadow */
 }

 /* Card Heading & Text */
 .title-choose {
     font-size: 24px;
     margin-bottom: 18px;
     font-weight: 600;
     color: #0a1d37;
 }

 .text-choose {
     font-size: 15px;
     line-height: 1.6;
     color: #000000;
     /* text-align: justify; */
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .card-choose {
         width: 45%;
     }
 }

 @media (max-width: 768px) {
     .card-choose {
         width: 70%;
         padding: 35px 20px;
     }
 }

 @media (max-width: 480px) {
     .heading-why {
         font-size: 28px;
     }

     .card-choose {
         width: 100%;
         padding: 30px 15px;
     }

     .icon-choose {
         width: 70px;
         height: 70px;
         font-size: 32px;
     }
 }

 /* why choose us end */

 /* contact index start */
 /* ===== Contact Section ===== */
 .contact-section {
     background: #f5f8ff;
     color: #182333;
     /* padding: 60px 15px; */
     font-family: "Raleway", sans-serif;
 }

 /* ===== Heading Style ===== */
 .contact-heading {
     font-family: "Playfair Display", serif;
     font-size: 42px;
     background: linear-gradient(90deg, #0d1b38, #3a7bd5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 60px;
     line-height: 1.3;
     text-align: center;
     display: inline-block;
     position: relative;
 }

 .contact-heading span {
     background: linear-gradient(90deg, #3a7bd5, #7fbfff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .contact-section .container.text-center {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* ===== Contact Wrapper ===== */
 .contact-wrapper {
     max-width: 1200px;
     /* margin: auto; */
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     align-items: stretch;
     justify-content: space-between;
 }

 /* ===== Left Image ===== */
 .contact-img {
     flex: 1;
     min-width: 350px;
     display: flex;
     align-items: stretch;
     justify-content: center;
 }

 .contact-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 20px;
     box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
     transition: transform 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
 }

 .contact-img:hover img {
     transform: scale(1.05) rotate(-1deg);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
     filter: brightness(1.05);
 }

 /* ===== Right Form ===== */
 .contact-formbox {
     flex: 1;
     min-width: 350px;
     background: #ffffff;
     padding: 45px 35px;
     border-radius: 25px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .contact-formbox:hover {
     transform: translateY(-7px);
     box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
 }

 .contact-formbox input,
 .contact-formbox textarea {
     width: 100%;
     padding: 15px 20px;
     margin-bottom: 18px;
     border: 1px solid #ccc;
     border-radius: 15px;
     font-size: 16px;
     transition: 0.4s ease;
     background: #f9faff;
 }

 .contact-formbox input:focus,
 .contact-formbox textarea:focus {
     border-color: #3a7bd5;
     box-shadow: 0 0 12px rgba(58, 123, 213, 0.3);
     outline: none;
 }

 /* ===== Button ===== */
 .contact-formbox button {
     width: 100%;
     padding: 16px;
     background: linear-gradient(45deg, #3a7bd5, #7fbfff);
     color: #fff;
     border: none;
     border-radius: 15px;
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.4s ease;
 }

 .contact-formbox button:hover {
     transform: scale(1.05);
     background: linear-gradient(45deg, #7fbfff, #3a7bd5);
     box-shadow: 0 8px 25px rgba(58, 123, 213, 0.3);
 }

 /* ===== Responsive Design ===== */

 /* Tablets (1024px and below) */
 @media (max-width: 1024px) {
     .contact-heading {
         font-size: 36px;
         margin-bottom: 40px;
     }

     .contact-wrapper {
         flex-direction: column;
         align-items: center;
     }

     .contact-img,
     .contact-formbox {
         width: 90%;
         height: auto;
     }

     .contact-img img,
     .contact-formbox {
         height: 450px;
     }
 }

 /* Mobiles (768px and below) */
 @media (max-width: 768px) {
     .contact-heading {
         font-size: 32px;
     }

     .contact-img,
     .contact-formbox {
         width: 100%;
     }

     .contact-img img,
     .contact-formbox {
         height: 400px;
     }

     .contact-formbox input,
     .contact-formbox textarea {
         font-size: 15px;
         padding: 13px 15px;
     }

     .contact-formbox button {
         font-size: 17px;
         padding: 14px;
     }
 }

 /* Small Mobiles (480px and below) */
 @media (max-width: 480px) {
     .contact-heading {
         font-size: 28px;
         margin-bottom: 30px;
     }

     .contact-img img,
     .contact-formbox {
         height: 380px;
     }

     .contact-formbox {
         padding: 25px 20px;
     }

     .contact-img img {
         border-radius: 12px;
     }

     .contact-formbox input,
     .contact-formbox textarea {
         border-radius: 10px;
         padding: 12px 12px;
     }

     .contact-formbox button {
         border-radius: 10px;
     }
 }

 /* contact index end */

 /* footer start */
 /* ===== Footer ===== */
 .ol-footer {
     background: linear-gradient(135deg, #001f3f, #1e90ff);
     color: #fff;
     padding: 60px 20px 20px 20px;
     position: relative;
     overflow: hidden;
     font-family: "Poppins", sans-serif;
 }

 .ol-footer::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("assets/images/footer-bg.jpg") center/cover no-repeat;
     opacity: 0.05;
     pointer-events: none;
 }

 .ol-footer-logo {
     font-size: 32px;
     font-weight: 700;
     color: #ff3b3b;
     margin-bottom: 15px;
     letter-spacing: 1px;
     font-family: "Playfair Display", serif;
 }

 .ol-footer-about {
     font-size: 15px;
     color: #ffffff;
     line-height: 1.8;
 }

 .ol-footer-heading {
     font-family: "Playfair Display", serif;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 15px;
     color: #fff;
     position: relative;
 }

 .ol-footer-heading::after {
     content: "";
     width: 45px;
     height: 2px;
     background: #ff3b3b;
     display: block;
     margin-top: 6px;
 }

 .ol-footer-links {
     list-style: none;
     padding: 0;
 }

 .ol-footer-links li {
     margin-bottom: 12px;
 }

 .ol-footer-links a {
     color: #ffffff;
     text-decoration: none;
     font-size: 15px;
     transition: all 0.3s ease;
 }

 .ol-footer-links a:hover {
     color: #ff3b3b;
     padding-left: 5px;
 }

 .ol-footer-contact p {
     color: #ffffff;
     font-size: 14px;
     margin-bottom: 10px;
     line-height: 1.6;
 }

 .ol-footer-contact i {
     margin-right: 10px;
     color: #ff3b3b;
 }

 .ol-footer-socials {
     margin-top: 25px;
     display: flex;
     gap: 15px;
 }

 .ol-footer-socials a {
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.1);
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
     font-size: 18px;
     border-radius: 50%;
     transition: all 0.4s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
 }

 .ol-footer-socials a:hover {
     background: #ff3b3b;
     color: #fff;
     transform: translateY(-5px);
     box-shadow: 0 0 15px rgba(255, 59, 59, 0.6);
 }

 .ol-footer-bottom {
     text-align: center;
     padding-top: 20px;
     margin-top: 40px;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     color: #ffffff;
     font-size: 14px;
 }

 .ol-footer-bottom a {
     color: #ffffff;
 }

 @media (max-width: 768px) {
     .ol-footer-heading {
         margin-top: 15px;
         margin-bottom: 10px;
     }

     .ol-footer-about {
         font-size: 14px;
         line-height: 1.6;
     }

     .ol-footer-links li {
         margin-bottom: 8px;
     }

     .ol-footer-socials {
         margin-top: 15px;
         gap: 10px;
     }

     .ol-footer-bottom {
         margin-top: 20px;
         padding-top: 15px;
     }

     .row.g-4 {
         row-gap: 15px;
     }
 }

 /* footer end */

 /* contact page start */

 /* 🌿 Main Contact Section */
 .contact-wrapper {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
     gap: 40px;
     max-width: 1200px;
     margin: 60px auto;
     padding: 0 20px;
 }

 /* Left: Map */
 .map-section {
     flex: 1 1 500px;
     height: 450px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .map-section iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 /* Right: Form */
 .form-section {
     flex: 1 1 500px;
     background: #fff;
     padding: 35px;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .form-section h2 {
     font-size: 24px;
     color: #003162;
     margin-bottom: 20px;
     text-align: center;
 }

 .form-section input,
 .form-section textarea {
     width: 100%;
     padding: 12px 14px;
     margin-bottom: 15px;
     border: 1px solid #ddd;
     border-radius: 6px;
     font-size: 15px;
     transition: all 0.3s;
 }

 .form-section input:focus,
 .form-section textarea:focus {
     border-color: #003162;
     outline: none;
 }

 .form-section textarea {
     resize: none;
     height: 130px;
 }

 .form-section button {
     background: #003162;
     color: #fff;
     border: none;
     padding: 12px 35px;
     border-radius: 6px;
     font-size: 15px;
     cursor: pointer;
     transition: 0.3s;
 }

 .form-section button:hover {
     background: #001f45;
 }

 /* 🌿 Address Section */
 .office-section {
     margin-top: 60px;
     padding: 30px 20px;
     /* Added padding */
     text-align: center;
 }

 .office-section h2 {
     color: #003162;
     font-size: 26px;
     margin-bottom: 35px;
 }

 .office-wrapper {
     display: flex;
     justify-content: center;
     align-items: stretch;
     gap: 40px;
     max-width: 1000px;
     margin: auto;
 }

 .office-card {
     flex: 1 1 45%;
     background: #fff;
     padding: 25px;
     border-radius: 10px;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
     transition: 0.3s;
     text-align: left;
 }

 .office-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
 }

 .office-card h3 {
     color: #003162;
     font-size: 20px;
     margin-bottom: 20px;
 }

 .office-info {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 10px;
 }

 .office-info i {
     color: #003162;
     font-size: 18px;
 }

 .office-info p,
 .office-info a {
     color: #333;
     font-size: 15px;
     text-decoration: none;
 }

 .office-info a:hover {
     color: #003162;
 }

 /* 🌿 Responsive */
 @media (max-width: 900px) {
     .contact-wrapper {
         flex-direction: column;
     }

     .map-section,
     .form-section {
         width: 100%;
     }

     .office-wrapper {
         flex-direction: column;
         gap: 25px;
     }

     .office-card {
         flex: 1 1 100%;
     }
 }

 /* contact page end */

 /* breadcrumb banner start */

 .breadcrumb-banner {
     background:
         url("images/bg.jpg") center/cover no-repeat;
     padding: 100px 20px;
     text-align: center;
     color: #fff;
     position: relative;
 }

 .breadcrumb-content h1 {
     font-size: 38px;
     font-weight: 600;
     margin-bottom: 10px;
     letter-spacing: 1px;
 }

 .breadcrumb-content p {
     font-size: 16px;
 }

 .breadcrumb-content a {
     color: #fff;
     text-decoration: none;
     font-weight: 500;
     transition: 0.3s;
 }

 .breadcrumb-content a:hover {
     color: #ffd700;
 }

 .breadcrumb-content i {
     margin: 0 8px;
     color: #ffd700;
 }

 /* 🌿 Responsive Design for Mobile */
 @media (max-width: 768px) {
     .breadcrumb-banner {
         padding: 60px 15px;
     }

     .breadcrumb-content h1 {
         font-size: 28px;
     }

     .breadcrumb-content p {
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .breadcrumb-banner {
         padding: 50px 10px;
     }

     .breadcrumb-content h1 {
         font-size: 24px;
     }

     .breadcrumb-content p {
         font-size: 13px;
     }
 }

 /* breadcrumb banner end */

 /* about start */
 /* ===== About Section ===== */
 /* ===== Overview Section ===== */
 .overview-wrap {
     padding: 100px 20px 80px;
     background-color: #f9f9f9;
 }

 .overview-box {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 50px;
     max-width: 1200px;
     margin: 0 auto;
     flex-wrap: wrap;
 }

 .overview-photo {
     flex: 1 1 40%;
     display: flex;
     justify-content: center;
 }

 .overview-photo img {
     width: 80%;
     max-width: 380px;
     height: auto;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     transition: transform 0.4s ease;
 }

 .overview-photo img:hover {
     transform: scale(1.03);
 }

 .overview-text {
     flex: 1 1 50%;
     text-align: left;
 }

 .overview-text h2 {
     color: #003162;
     font-size: 34px;
     margin-bottom: 20px;
     font-weight: 600;
 }

 .overview-text p {
     font-size: 18px;
     line-height: 1.9;
     color: #333;
     margin-bottom: 18px;
 }

 /* ===== Feature Cards Section ===== */
 .feature-wrap {
     background-color: #f9f9f9;
     padding: 80px 20px;
 }

 .feature-grid {
     display: flex;
     justify-content: center;
     gap: 30px;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto;
 }

 .feature-item {
     background: #fff;
     flex: 1 1 30%;
     min-width: 320px;
     border-radius: 12px;
     padding: 30px 25px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.4s ease;
 }

 .feature-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 25px rgba(0, 49, 98, 0.2);
 }

 .feature-item h3 {
     color: #003162;
     font-size: 24px;
     margin-bottom: 18px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .feature-item i {
     color: #0078d4;
     font-size: 22px;
 }

 .feature-item p {
     color: #444;
     font-size: 17px;
     line-height: 1.8;
     text-align: justify;
 }

 /* ===== Responsive Design ===== */
 @media (max-width: 900px) {
     .overview-box {
         flex-direction: column;
         text-align: center;
     }

     .overview-photo img {
         width: 70%;
         max-width: 320px;
     }

     .overview-text {
         text-align: center;
     }

     .overview-text h2 {
         font-size: 28px;
     }

     .overview-text p {
         font-size: 17px;
     }

     .feature-grid {
         flex-direction: column;
         align-items: center;
     }

     .feature-item {
         width: 90%;
     }

     .feature-item h3 {
         font-size: 22px;
     }

     .feature-item p {
         font-size: 16px;
     }
 }

 /* about end */

 /* mission vision start */
 /* ---------- Base Layout ---------- */
 .mission-vision .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 60px 20px;
 }

 .mv-row {
     display: flex;
     gap: 40px;
     align-items: center;
     margin-bottom: 60px;
     flex-wrap: wrap;
 }

 .mv-image {
     flex: 1 1 35%;
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     animation: fadeInUp 1.2s ease forwards;
     opacity: 0;
     text-align: center;
 }

 .mv-image img {
     width: 85%;
     height: auto;
     border-radius: 10px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
     transition: transform 0.5s ease;
 }

 .mv-image:hover img {
     transform: scale(1.05);
 }

 .mv-content {
     flex: 1 1 55%;
     animation: fadeInRight 1.2s ease forwards;
     opacity: 0;
 }

 .mv-content h3 {
     font-size: 2.1rem;
     margin-bottom: 18px;
     color: #23435c;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .mv-content h3 i {
     color: #bc0157;
 }

 .mv-content p {
     line-height: 1.9;
     color: #333;
     margin-bottom: 18px;
     font-size: 1.15rem;
 }

 .mv-content ul {
     margin: 0;
     padding-left: 25px;
 }

 .mv-content ul li {
     margin: 10px 0;
     color: #444;
     font-size: 1.1rem;
     position: relative;
 }

 .mv-content .small {
     font-style: italic;
     color: #555;
     margin-top: 10px;
     font-size: 1.05rem;
 }

 /* ---------- Animations ---------- */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* ---------- Responsive Design ---------- */
 @media (max-width: 992px) {
     .mv-content h3 {
         font-size: 1.9rem;
     }

     .mv-content p {
         font-size: 1.1rem;
     }

     .mv-content ul li {
         font-size: 1.05rem;
     }

     .mission-vision .container {
         padding: 40px 15px;
     }
 }

 /* ✅ Always show content first, image second on mobile */
 @media (max-width: 768px) {
     .mv-row {
         flex-direction: column;
         text-align: center;
     }

     .mv-row .mv-content {
         order: 1;
     }

     .mv-row .mv-image {
         order: 2;
     }

     .mv-content,
     .mv-image {
         flex: unset;
         width: 100%;
         animation: fadeInUp 1s ease forwards;
         opacity: 0;
     }

     .mv-content ul {
         text-align: left;
         display: inline-block;
     }

     .mv-content h3 {
         justify-content: center;
     }

     .mv-image img {
         width: 70%;
     }
 }

 @media (max-width: 480px) {
     .mv-content h3 {
         font-size: 1.7rem;
     }

     .mv-content p,
     .mv-content ul li {
         font-size: 1.05rem;
     }

     .mv-image img {
         width: 85%;
     }
 }

 /* mission vision end */

 /* services start */

 /* ---------- Services Wrapper ---------- */
 /* ---------- Services Section ---------- */
 .ocean-services {
     padding: 100px 20px 80px;
     max-width: 1250px;
     margin: 0 auto;
 }

 .ocean-title {
     text-align: center;
     margin-bottom: 60px;
 }

 .ocean-title h2 {
     color: #23435c;
     font-size: 2.2rem;
     margin-bottom: 10px;
 }

 .ocean-title p {
     color: #555;
     font-size: 1.1rem;
 }

 /* ---------- Service Cards ---------- */
 .ocean-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 35px;
 }

 .ocean-card {
     background: #fff;
     border-radius: 15px;
     padding: 45px 30px;
     text-align: center;
     transition: all 0.5s ease;
     position: relative;
     overflow: hidden;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
     animation: fadeIn 1.2s ease forwards;
     opacity: 0;
 }

 .ocean-card::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 15px;
     background: linear-gradient(135deg, #bc0157, #23435c);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: 0;
 }

 .ocean-card:hover::before {
     opacity: 0.15;
 }

 .ocean-card i {
     font-size: 45px;
     color: #bc0157;
     margin-bottom: 20px;
     transition: all 0.4s ease;
     position: relative;
     z-index: 1;
 }

 .ocean-card:hover i {
     transform: scale(1.25);
     color: #23435c;
     text-shadow: 0 0 10px rgba(188, 1, 87, 0.6);
 }

 .ocean-card h3 {
     color: #23435c;
     font-size: 1.5rem;
     margin-bottom: 15px;
     position: relative;
     z-index: 1;
 }

 .ocean-card p {
     color: #555;
     font-size: 1.05rem;
     line-height: 1.8;
     position: relative;
     z-index: 1;
 }

 .ocean-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 }

 /* ---------- Animations ---------- */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ---------- Responsive Design ---------- */
 @media (max-width: 992px) {
     .ocean-title h2 {
         font-size: 1.9rem;
     }
 }

 @media (max-width: 768px) {
     .ocean-services {
         padding: 70px 20px;
     }

     .ocean-card {
         padding: 35px 20px;
     }
 }

 @media (max-width: 480px) {
     .ocean-card h3 {
         font-size: 1.3rem;
     }
 }

 /* services end */

 /* our project start */
 .projects-section {
     background-color: #f9f9f9;
     padding: 60px 0;
 }

 .projects-heading h2 {
     font-size: 32px;
     font-weight: 700;
     color: #182333;
 }

 .projects-heading h2 span {
     color: #0077b6;
 }

 .project-box {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     transition: transform 0.4s ease;
     cursor: pointer;
 }

 .project-box img {
     width: 100%;
     height: 300px;
     object-fit: cover;
     border-radius: 10px;
     transition: transform 0.5s ease;
 }

 .project-box:hover img {
     transform: scale(1.1);
 }

 .project-info {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(24, 35, 51, 0.7);
     color: #fff;
     text-align: center;
     padding: 12px;
     border-radius: 0 0 10px 10px;
 }

 .project-info h5 {
     margin: 0;
     font-size: 18px;
     font-weight: 600;
 }

 /* ===== Modal Styling ===== */
 .popup-content {
     background: rgba(255, 255, 255, 0.85);
     border: none;
     border-radius: 12px;
     padding: 20px 0;
     position: relative;
     /* ✅ Add this line */
 }


 .popup-body img {
     width: 45%;
     /* ✅ Smaller modal image */
     height: auto;
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
 }

 .popup-title {
     color: #000000;
     text-align: center;
     margin-top: 12px;
     font-weight: 600;
     font-size: 16px;
 }

 /* Close Button */
 .close-popup-btn {
     position: absolute;
     top: 12px;
     right: 20px;
     background: rgba(255, 255, 255, 0.9);
     border: none;
     color: #182333;
     font-size: 22px;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     line-height: 30px;
     text-align: center;
     cursor: pointer;
     /* ✅ ensures pointer hand */
     z-index: 10;
     transition: all 0.3s ease;
 }

 .close-popup-btn:hover {
     background: #0077b6;
     color: #fff;
     transform: rotate(90deg);
     /* 💫 optional smooth effect */
 }


 /* ✅ Responsive */
 @media (max-width: 768px) {
     .project-box img {
         height: 220px;
     }

     .popup-body img {
         width: 85%;
         /* smaller on mobile */
     }

     .projects-heading h2 {
         font-size: 26px;
     }
 }

 /* our project end */

 /* auto door lift start */
 /* Overview Section */
 .overview-wrap {
     padding: 80px 20px;
     background: #fff;
     overflow: hidden;
 }

 .overview-box {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     gap: 40px;
     align-items: center;
     flex-wrap: wrap;
 }

 .overview-photo {
     flex: 1 1 45%;
     text-align: center;
     animation: slideInLeft 1.2s ease forwards;
     opacity: 0;
 }

 .overview-photo img {
     width: 100%;
     max-width: 520px;
     height: auto;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
 }

 .overview-text {
     flex: 1 1 50%;
     opacity: 0;
     animation: fadeInRight 1.2s ease forwards;
     animation-delay: 0.4s;
 }

 .overview-text h2 {
     color: #23435c;
     font-size: 1.9rem;
     margin-bottom: 14px;
     font-family: "Playfair Display", serif;
 }

 .overview-text p {
     color: #333;
     line-height: 1.7;
     margin-bottom: 12px;
 }

 /* Features grid */
 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 18px;
     margin-top: 30px;
 }

 .feature-card {
     background: #fff;
     border-radius: 10px;
     padding: 18px;
     box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
     text-align: left;
     opacity: 0;
     transform: translateY(20px);
     animation: popUp 1s ease forwards;
 }

 .feature-card:nth-child(1) {
     animation-delay: 0.4s;
 }

 .feature-card:nth-child(2) {
     animation-delay: 0.6s;
 }

 .feature-card:nth-child(3) {
     animation-delay: 0.8s;
 }

 .feature-card:nth-child(4) {
     animation-delay: 1s;
 }

 .feature-card i {
     color: #f01b21;
     font-size: 24px;
     margin-right: 12px;
 }

 .feature-card h5 {
     margin: 0 0 8px;
     font-size: 1rem;
     color: #23435c;
 }

 .feature-card p {
     margin: 0;
     color: #6b7280;
     font-size: 0.95rem;
 }

 /* CTA Buttons */
 .cta-row {
     margin-top: 40px;
     display: flex;
     justify-content: center;
     gap: 15px;
     flex-wrap: wrap;
     text-align: center;
     opacity: 0;
     animation: fadeInUp 1s ease forwards;
     animation-delay: 1.4s;
 }

 .cta-row .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 28px;
     border-radius: 50px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     font-size: 1rem;
     min-width: 180px;
     border-color: #003162;
 }

 .btn-enquiry {
     background: linear-gradient(135deg, #f7f9fa, #ff0b11);
     color: #fff;
     border: none;
 }

 .btn-enquiry:hover {
     background: linear-gradient(135deg, #ff0b11, #f7f9fa );
     transform: translateY(-3px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .btn-call {
     border: 2px solid #23435c;
     color: #23435c;
     background: transparent;
 }

 .btn-call:hover {
     background: #23435c;
     color: #fff;
     transform: translateY(-3px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 /* Responsive */
 @media (max-width: 992px) {
     .overview-box {
         gap: 24px;
     }

     .overview-photo,
     .overview-text {
         flex-basis: 100%;
     }

     .overview-photo {
         order: -1;
     }
 }

 @media (max-width: 768px) {
     .cta-row {
         justify-content: center;
         gap: 10px;
         flex-wrap: nowrap;
     }

     .cta-row .btn {
         flex: 1;
         min-width: auto;
     }
 }

 @media (max-width: 480px) {
     .cta-row .btn {
         font-size: 0.9rem;
         padding: 10px 16px;
     }

     .overview-text h2 {
         font-size: 1.6rem;
     }
 }

 /* ✨ Animations */
 @keyframes slideInLeft {
     0% {
         transform: translateX(-50px);
         opacity: 0;
     }

     100% {
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes fadeInRight {
     0% {
         transform: translateX(50px);
         opacity: 0;
     }

     100% {
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes fadeInUp {
     0% {
         transform: translateY(20px);
         opacity: 0;
     }

     100% {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes popUp {
     0% {
         opacity: 0;
         transform: scale(0.9) translateY(20px);
     }

     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 /* auto door lift end */