* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* header */
 body {
            font-family: 'Inter', sans-serif;
        }

        /* Custom styles for the white header */
        .white-header {
            background-color: #ffffff; /* Solid white background */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* Custom styles for the nav links */
        .nav-link {
            transition: color 0.3s ease-in-out;
            color: #1a202c; /* Initially dark color */
        }

       /* Gradient for buttons and active cards */
        .gradient-btn {
            background: linear-gradient(to right, #ff026a, #ab18a2, #3d35ed);
            border: none;
            cursor: pointer;
        }

        /* Active card styling */
        .option-card.active-card {
            border: 2px solid #61A354;
            transform: scale(1.05);
            transition: all 0.3s ease-in-out;
        }
        
        /* Mobile-first styling for options list */
        .options-scroll {
            -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
            scrollbar-width: none;  /* Firefox */
            -ms-overflow-style: none;   /* IE and Edge */
        }
        .options-scroll::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }

/* banner */

.arrow-btn {
            background-color: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(8px);
            transition: background-color 0.3s;
        }
        .arrow-btn:hover {
            background-color: rgba(0, 0, 0, 0.4);
        }
        /* Style for the background images */
        .banner-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0; /* All slides are initially hidden */
        }

 /* about us */

 .about-us-section{
    max-width: auto;
    padding: 20px 80px;
 }

       /* Custom styles for progress bars and dashed circle */
        .dashed-border {
            border: 2px dashed #9ca3af; /* A light gray for the dashed line */
            animation: rotate 20s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .progress-track {
            background-color: #e5e7eb; /* A light gray for the track */
            height: 8px;
            border-radius: 9999px; /* rounded-full */
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            width: 0%; /* Initial width for animation */
            border-radius: 9999px; /* rounded-full */
            background: #003366;
        }
        .count-up-number {
            font-variant-numeric: tabular-nums; /* Ensures numbers don't jump around as they change */
        }
/* our facilities */

 /* Custom styles for the arrow buttons */
        .arrow-btn {
            background-color: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

        .arrow-btn:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        /* Custom styles for the 'View All' button */
        .view-all-btn {
            /* border: 2px solid #ff026a; */
            color: #c31292;
            transition: all 0.3s ease;
        }

        .view-all-btn:hover {
         background: linear-gradient(to right, #ff026a, #ab18a2, #3d35ed);
            color: white;
        }

        /* Responsive styling for the main container */
        @media (min-width: 1024px) {
            .facilities-container {
                height: 500px;
            }
        }

        /* product */

         /* Gradient for buttons */
        .gradient-btn {
            /* background: linear-gradient(90deg, #61A354 0%, #B7F164 100%); */
            border: none;
            cursor: pointer;
        }

         /* Services Section Layout */
        .services-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 3rem; /* gap-12 */
        }
        @media (min-width: 768px) {
            .services-container {
                flex-direction: row;
            }
        }

        /* Services Section Layout */
         /* Services Section Custom Styles */
        .services-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: center;
        }
        @media (min-width: 1024px) {
            .services-container {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* carousal */

         .carousel-container {
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-slide {
            flex: 0 0 33.3333%; /* Show 3 cards at a time on desktop */
            min-width: 0; /* Prevents flex-item from growing */
            padding: 0 1rem;
        }
        /* Product Card Styling */
        .product-card {
            background-color: #ffffff;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
            overflow: hidden;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transform: scale(1);
            padding: 1.5rem; /* p-6 */
            text-align: center;
            border: 1px solid #e5e7eb; /* border-gray-200 */
        }
        .product-card:hover {
            transform: scale(1.05) translateY(-8px); /* hover:scale-105 hover:-translate-y-2 */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
        }
        .product-card img {
            width: 100%;
            height: 15rem; /* h-40 */
            object-fit: cover;
            border-radius: 0.5rem; /* rounded-xl */
            margin-bottom: 1rem; /* mb-4 */
        }
        .product-card h4 {
            font-size: 1.125rem; /* text-lg */
            font-weight: 700;
            color: #1f2937; /* text-gray-800 */
        }
        .product-card p {
            margin-top: 0.5rem; /* mt-2 */
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* text-gray-600 */
        }
        /* Mobile layout: show 1 card at a time */
        @media (max-width: 768px) {
            .carousel-slide {
                flex: 0 0 100%;
            }
        }
        /* Tablet layout: show 2 cards at a time */
        @media (min-width: 769px) and (max-width: 1024px) {
            .carousel-slide {
                flex: 0 0 50%;
            }
        }

        /* we offer */

        /* What We Offer Section Styles */
        .offer-section {
            padding-top: 4rem;
            padding-bottom: 4rem;
            background-color: #f3f4f6;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .container-main {
            max-width: 1280px; /* Equivalent to container mx-auto */
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .offer-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: center;
        }
        @media (min-width: 1024px) {
            .offer-container {
                grid-template-columns: 1fr 1fr;
            }
        }

        .offer-text-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .offer-heading {
            font-size: 2.25rem;
            line-height: 2.5rem;
            font-weight: 700;
            font-family: 'Montserrat', sans-serif;
            color: #1f2937;
            line-height: 1.25;
        }
        @media (min-width: 768px) {
            .offer-heading {
                font-size: 3rem;
                line-height: 1;
            }
        }

        .offer-paragraph {
            font-size: 1.125rem;
            line-height: 1.75rem;
            color: #4b5563;
        }

        .offer-button {
            padding: 0.75rem 1.5rem;
            border-radius: 9999px;
            color: white;
            font-weight: 600;
            align-self: flex-start;
            transition: background-color 0.3s ease-in-out;
            background: linear-gradient(to right, #ff026a, #ab18a2, #3d35ed);
        }

        /* Accordion Styles */
        .accordion-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .accordion-item {
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            background-color: white;
            transition: all 0.5s ease-out;
            overflow: hidden;
        }

        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 1.5rem;
            background-color: white;
            border-radius: 0.5rem;
        }

        .accordion-title {
            font-size: 1.125rem;
            font-weight: 700;
            font-family: 'Montserrat', sans-serif;
            color: #1f2937;
        }

        .accordion-arrow {
            width: 1.5rem;
            height: 1.5rem;
            color: #6b7280;
            transition: transform 0.3s ease-in-out;
        }

        .accordion-item.active .accordion-arrow {
            transform: rotate(180deg);
        }

        .accordion-content {
            transition: max-height 0.5s ease-out, padding 0.5s ease-out;
            max-height: 0;
            overflow: hidden;
            padding: 0 1.5rem;
        }

        .accordion-item.active .accordion-content {
            max-height: 500px;
            padding: 1.5rem;
        }
        
        .accordion-text {
            color: #4b5563;
        }

        /* features section */

        .new-section-wrapper {
            padding: 4rem 1.5rem;
            background-color: #e5e7eb;
            min-height: 100vh;
            display: flex;
            align-items: center;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        }

        .new-section-wrapper.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .new-section-container {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            text-align: center;
        }

        .new-section-heading {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .new-section-subheading {
            font-size: 1.125rem;
            color: #4b5563;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2rem;
        }

        @media (min-width: 640px) {
            .card-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .card-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .new-section-card {
            background-color: white;
            padding: 2.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            position: relative;
        }

        .new-section-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }

        .new-section-card::before {
            content: '';
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #000000bf;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
        }

        .new-section-card:hover::before {
            opacity: 0.2;
            animation: card-pulse 1.5s infinite ease-in-out;
        }

        @keyframes card-pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        .new-section-card i{
                font-size: 53px;
    margin-bottom: 18px;
    color: #003366;
        }


        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .card-text {
            color: #6b7280;
            font-size: 0.875rem;
        }

        /* ===== Video Section ===== */
        .video-section-wrapper {
               background-color: var(--secondary-color);
    color: white;
    text-align: center;
    width: 100%;
    height: auto;
    position: relative;
    right: 0;
    left: 0;
    top: 0;
    padding: 71px;
        }

        .video-section-wrapper h2 {
            font-size: 2.5rem;
            font-family: 'Montserrat', sans-serif;
            margin-bottom: 1rem;
        }

        .video-section-wrapper p {
            font-size: 1.125rem;
            max-width: 800px;
            margin: 0 auto 2rem;
            color: #d1d5db;
        }

        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* ===== Reviews Section ===== */
        .reviews-section-wrapper {
            background-color: var(--light-bg);
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        @media (min-width: 1024px) {
            .reviews-section-wrapper {
                flex-direction: row;
                gap: 4rem;
            }
        }
        
        .reviews-text-content {
            flex: 1;
            text-align: left;
        }
        
        .reviews-text-content h2 {
            font-size: 2.5rem;
            font-family: 'Montserrat', sans-serif;
            margin-bottom: 1rem;
        }

        .reviews-text-content p {
            font-size: 1.125rem;
            color: var(--text-color);
        }

        .reviews-list-container {
            flex: 1;
            height: 500px; /* Fixed height for scrolling effect */
            overflow: hidden;
            position: relative;
        }
        
        .reviews-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            animation: reviews-scroll 20s linear infinite; /* Adjust time as needed */
        }

        @keyframes reviews-scroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-100%); }
        }

        .review-bubble {
            background-color: white;
            padding: 1.5rem;
            border-radius: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            opacity: 0.9;
        }

        .review-bubble:nth-child(even) {
            margin-left: 20%;
            border-bottom-left-radius: 0.5rem;
        }

        .review-bubble:nth-child(odd) {
            margin-right: 20%;
            border-bottom-right-radius: 0.5rem;
        }

        /* ===== Brands Section ===== */
        .brands-section-wrapper {
            background-color: white;
            text-align: center;
        }
        
        .brands-section-wrapper h2 {
            font-size: 2.5rem;
            font-family: 'Montserrat', sans-serif;
        }

        .logo-scroller-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            padding: 38px;
        }

        .logo-scroller {
            display: flex;
            align-items: center;
            animation: scroll-logos 10s linear infinite;
        }

        @keyframes scroll-logos {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }

        .logo-scroller img {
            height: 87px;
            margin: 0 2rem;
            flex-shrink: 0;
            filter: grayscale(100%);
            transition: filter 0.3s ease;
        }

        .logo-scroller img:hover {
            filter: grayscale(0%);
        }

        /* ===== Footer Section ===== */
        .footer-wrapper {
               background: #003366;
    color: #d1d5db;
    text-align: center;
    padding: 30px;
    height: auto;
        }

        .footer-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        @media (min-width: 768px) {
            .footer-content {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
        }

         /* @media (min-width: 768px) {
            .footer-wrapper {
                height: 800px;
            }
        } */
        .footer-column {
            flex: 1;
        }

        .footer-column h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a, .social-icons a {
            color: #d1d5db;
            transition: color 0.3s ease;
        }

        .footer-links a:hover, .social-icons a:hover {
            color: white;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            justify-content: center;
        }
        
        @media (min-width: 768px) {
            .social-icons {
                justify-content: flex-start;
            }
        }
        
        .social-icon-svg {
            width: 24px;
            height: 24px;
            fill: #d1d5db;
        }
        .social-icon-svg:hover {
            fill: white;
        }