:root {
            --primary-color: #14b698; 
            --secondary-color: #a7ea60; 
            --third-color: #01002e; 
            --fourt-color: #ffffff;  
            --fifth-color: #d1d5db; 
            --sixth-color: #14b698;
            --seventh-color : transparent;
            --lite-primary-color: #dcfffd;
        }


        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
@font-face {
    font-family: 'Ranade-Light';
    src: url('fonts/Ranade-Light.otf') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
     }
       body {
            font-family: 'Ranade-Light',apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: var(--seventh-color);
            overflow-x: hidden;
            
        }

            .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            z-index: 2;
        }


/*  Nav Menu Starts */        


    /* Nav Menu */

    @font-face {
    font-family: 'Barlow-BlackItalic';
    src: url('fonts/Barlow-Medium.ttf') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
     }
          /* Header styles */
          .nav-header {
            font-family: Barlow-BlackItalic , apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            position: fixed;
            top: 0;
            z-index: 50;
            width: 100%;
            background-color: var(--seventh-color);
            backdrop-filter: blur(12px);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .nav-wrapper {
            display: flex;
            height: 3.5rem;
            align-items: center;
            justify-content: space-between;
        }

        /* Logo styles */
        .nav-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            color: var(--sixth-color);
            font-weight: bold;
        }

        /* Navigation menu styles */
        .nav-menu {
            display: none;
        }

        @media (min-width: 1024px) {
            .nav-menu {
                display: flex;
                align-items: center;
                gap: 2rem;
                margin: 0 auto;
            }
        }

        .nav-item {
            position: relative;
            list-style: none;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.5rem 1rem;
            color: var(--sixth-color);
            text-decoration: none;
            font-size: 0.875rem;
            border-radius: 0.375rem;
            transition: background-color 0.2s;
        }

        .nav-link:hover {
            background-color: var(--fifth-color);
        }

        /* Dropdown styles */
        .dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 400px;
            padding: 1rem;
            background: #e6f7f6;
            border: 1px solid var(--third-color);
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .nav-item:hover .dropdown {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .dropdown-item {
            display: block;
            padding: 0.75rem;
            text-decoration: none;
            color: var(--sixth-color);
            border-radius: 0.375rem;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: var(--fourt-color);
        }

        /* Badge styles */
        .nav-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.125rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--sixth-color);
            background-color: #fbbf24;
            border-radius: 9999px;
            margin-left: 0.5rem;
        }

        /* Button styles */
        .nav-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.375rem;
            transition: all 0.2s;
            cursor: pointer;
            text-decoration: none;
        }


        .nav-button-primary {
            color: var(--primary-color);
            background-color: transparent;
            border: 1px solid var(--primary-color);
        }

        .nav-button-primary:hover {
            background-color: #1b8291;
            color: #01002e;
        }

        /* Mobile menu styles */
        .mobile-menu-button {
            color: #01002e;
            display: block;
            padding: 0.5rem;
            background: none;
            border: none;
            cursor: pointer;
        }

        @media (min-width: 1024px) {
            .mobile-menu-button {
                display: none;
            }
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            left: -100%;
            width: 100%;
            max-width: 300px;
            height: 100vh;
            background: white;
            padding: 2rem 1rem;
            transition: left 0.3s ease-in-out;
            z-index: 100;
        }

        .mobile-menu.active {
            left: 0;
        }

        .mobile-menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
        }

        .mobile-menu-overlay.active {
            display: block;
        }

        .mobile-menu-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            cursor: pointer;
        }

        .mobile-nav-link {
            display: block;
            padding: 0.75rem 0;
            color: #000;
            text-decoration: none;
            font-size: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

/*  Nav Menu Ends */


/* Hero Secton Starts */



        .hero-container {
            min-height: 85vh;
            display: flex;
            align-items: center;
            padding: 2rem;
            max-width: 1500px;
            margin: 0 auto;  
        }

        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            width: 100%;
        }

        .hero-left {
            animation: slideInLeft 0.8s ease-out;
        }

        @font-face {
            font-family: 'mooxy';
            src: url('fonts/mooxy.ttf') format('truetype');
            font-weight: 400;
            font-style: italic;
            font-display: swap;
        }

        .hero-title {
            font-family: mooxy, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            font-size: clamp(2rem, 4.5vw, 4rem);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
        }

        .hero-description {
            font-size: clamp(1rem, 2vw, 1.1rem);
            color: var(--third-color);
            margin-bottom: 2.5rem;
            line-height: 1.6;
            max-width: 95%;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .btn {
            padding: 0.875rem 1.75rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            font-size: clamp(0.85rem, 1.5vw, 0.95rem);
            cursor: pointer;
            border: 2px solid transparent;
            white-space: nowrap;
        }

        .btn-primary {
            background-color: var(--fourt-color);
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            color: var(--third-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .btn-secondary {
            background-color: var(--seventh-color);
            color: var(--sixth-color);
            border-color: var(--third-color);
        }

        .btn-secondary:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .arrow-icon {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }

        .btn:hover .arrow-icon {
            transform: translateX(3px);
        }

        .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .tag {
            padding: 0.5rem 1rem;
            background-color: var(--lite-primary-color);
            border: 1px solid var(--fifth-color);
            border-radius: 25px;
            font-size: clamp(0.75rem, 1.2vw, 0.85rem);
            font-weight: 500;
            color: var(--third-color);
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }

        .tag:hover {
            background-color: var(--primary-color);
            color: var(--third-color);
            border-color: var(--sixth-color);
            transform: translateY(-1px);
        }

        .hero-right {
            position: relative;
            animation: slideInRight 0.8s ease-out;
        }

        .hero-image-container {
            position: relative;
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main-hero-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.3s ease;
            animation: fadeInScale 1s ease-out 0.3s both;
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .support-card {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--seventh-color);
            padding: 1.5rem;
            border-radius: 12px;
            border: 1px solid var(--fifth-color);
            min-width: 280px;
            animation: slideInUp 1s ease-out 0.8s both;
            z-index: 10;
        }

        .support-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--sixth-color);
            font-size: clamp(0.9rem, 1.5vw, 1rem);
        }

        .support-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: clamp(0.8rem, 1.2vw, 0.9rem);
            color: #666;
        }

        .checkmark {
            width: 16px;
            height: 16px;
            background-image: url('assets/icons/security-icon.png');
            background-size: contain;
            background-repeat: no-repeat;
            flex-shrink: 0;
        }

        /* Decorative elements */
        .hero-right::before {
            content: '';
            position: absolute;
            top: -20px;
            right: -20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 4s ease-in-out infinite;
            z-index: 1;
        }

        .hero-right::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 3s ease-in-out infinite reverse;
            z-index: 1;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        /* Enhanced Responsive Design */

        /* Large Desktop (1200px+) */
        @media (min-width: 1200px) {
            .hero-container {
                padding: 3rem;
            }
            
            .hero-content {
                gap: 5rem;
            }
            
            .hero-image-container {
                height: 600px;
            }
            
            .support-card {
                min-width: 320px;
                padding: 2rem;
            }
        }

        /* Desktop (992px - 1199px) */
        @media (max-width: 1199px) and (min-width: 992px) {
            .hero-container {
                padding: 2.5rem;
            }
            
            .hero-content {
                gap: 3.5rem;
            }
            
            .hero-image-container {
                height: 550px;
            }
        }

        /* Tablet Landscape (768px - 991px) */
        @media (max-width: 991px) and (min-width: 768px) {
            .hero-content {
                gap: 2.5rem;
            }
            
            .hero-title {
                font-size: 3rem;
            }
            
            .hero-image-container {
                height: 450px;
            }
            
            .support-card {
                min-width: 260px;
                padding: 1.25rem;
                left: 50%;
            }
        }

        /* Tablet Portrait and Mobile (below 767px) */
        @media (max-width: 767px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
                grid-template-areas: 
                    "hero-left"
                    "hero-right";
            }

            .hero-left {
                grid-area: hero-left;
            }

            .hero-right {
                grid-area: hero-right;
                position: relative;
            }

            .hero-container {
                padding: 1.5rem;
                min-height: auto;
                padding-top: 3rem;
                padding-bottom: 3rem;
            }

            .hero-title {
                font-size: 2.5rem;
                margin-bottom: 1rem;
            }

            .hero-description {
                max-width: 100%;
                margin-bottom: 2rem;
            }

            .hero-buttons {
                justify-content: center;
                margin-bottom: 2rem;
            }

            .category-tags {
                justify-content: center;
                margin-bottom: 2rem;
            }

            .hero-image-container {
                height: 400px;
                margin-top: 1rem;
                position: relative;
            }

            .support-card {
                position: absolute;
                bottom: -20px;
                right: 10px;
                left: auto;
                transform: translateX(0);
                margin-top: 0;
                max-width: 280px;
                padding: 1rem;
                min-width: 220px;
            }

            .hero-right::before,
            .hero-right::after {
                display: none;
            }
        }

        /* Mobile Large (480px - 575px) */
        @media (max-width: 575px) and (min-width: 480px) {
            .hero-content {
                gap: 2rem;
            }

            .hero-container {
                padding: 1rem;
                padding-top: 2rem;
                padding-bottom: 2rem;
            }

            .hero-title {
                font-size: 2rem;
                margin-bottom: 1rem;
            }

            .hero-description {
                font-size: 0.95rem;
                margin-bottom: 1.5rem;
            }

            .hero-buttons {
                flex-direction: column;
                align-items: center;
                gap: 0.75rem;
                margin-bottom: 1.5rem;
            }

            .btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
                padding: 0.75rem 1.5rem;
            }

            .category-tags {
                gap: 0.5rem;
                margin-bottom: 1.5rem;
            }

            .tag {
                padding: 0.4rem 0.8rem;
                font-size: 0.75rem;
            }

            .hero-image-container {
                height: 350px;
                border-radius: 15px;
            }

            .support-card {
                bottom: -15px;
                right: 10px;
                padding: 0.75rem;
                min-width: 200px;
                max-width: 260px;
            }
        }

        /* Mobile Small (320px - 479px) */
        @media (max-width: 479px) {
            .hero-container {
                padding: 0.75rem;
                padding-top: 1.5rem;
                padding-bottom: 1.5rem;
            }

            .hero-content {
                gap: 1.5rem;
            }

            .hero-title {
                font-size: 1.75rem;
                line-height: 1.2;
            }

            .hero-description {
                font-size: 0.9rem;
                margin-bottom: 1.25rem;
            }

            .hero-buttons {
                gap: 0.5rem;
                margin-bottom: 1.25rem;
            }

            .btn {
                padding: 0.65rem 1.25rem;
                font-size: 0.85rem;
                max-width: 250px;
            }

            .category-tags {
                gap: 0.4rem;
                margin-bottom: 1.25rem;
            }

            .tag {
                padding: 0.35rem 0.7rem;
                font-size: 0.7rem;
            }

            .hero-image-container {
                height: 300px;
                border-radius: 12px;
            }

            .support-card {
                bottom: -15px;
                right: 5px;
                padding: 0.75rem;
                min-width: 180px;
                max-width: 240px;
            }

            .support-title {
                font-size: 0.85rem;
                margin-bottom: 0.75rem;
            }

            .support-item {
                font-size: 0.75rem;
                margin-bottom: 0.4rem;
            }
        }

        /* Extra Small Mobile (below 320px) */
        @media (max-width: 319px) {
            .hero-container {
                padding: 0.5rem;
            }

            .hero-title {
                font-size: 1.5rem;
            }

            .hero-description {
                font-size: 0.85rem;
            }

            .btn {
                font-size: 0.8rem;
                padding: 0.6rem 1rem;
            }

            .tag {
                font-size: 0.65rem;
                padding: 0.3rem 0.6rem;
            }

            .hero-image-container {
                height: 250px;
                border-radius: 10px;
            }

            .support-card {
                bottom: -10px;
                right: 5px;
                padding: 0.5rem;
                min-width: 160px;
                max-width: 200px;
            }
        }

        /* Landscape Orientation on Mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero-container {
                min-height: auto;
                padding: 1rem;
            }

            .hero-image-container {
                height: 250px;
            }

            .support-card {
                bottom: -15px;
                right: 10px;
                padding: 0.75rem;
                min-width: 200px;
                max-width: 260px;
            }
        }

        /* Accessibility and Motion Preferences */
        @media (prefers-reduced-motion: reduce) {
            .hero-left,
            .hero-right,
            .support-card,
            .main-hero-image,
            .hero-right::before,
            .hero-right::after {
                animation: none;
            }

            .btn,
            .tag,
            .main-hero-image {
                transition: none;
            }

            .hero-image-container:hover .main-hero-image {
                transform: none;
            }
        }

        /* High DPI / Retina Displays */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .main-hero-image,
            .checkmark {
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
            }
        }

        /* Print Styles */
        @media print {
            .hero-container {
                min-height: auto;
                padding: 1rem;
            }

            .hero-right::before,
            .hero-right::after {
                display: none;
            }

            .btn {
                border: 2px solid var(--sixth-color);
                color: var(--sixth-color) !important;
                background: transparent !important;
            }

            .hero-image-container {
                box-shadow: none;
                border: 1px solid var(--fifth-color);
            }

            .support-card {
                position: static;
                transform: none;
            }
        }
/* Hero Secton StartEnds */


/* Logo Cloud Section Starts */


        .partners-section {
            max-width: 1900px;
            margin: 0 auto;
            text-align: center;
            padding: 50px 20px;
            overflow: hidden;
        }

        .partners-label {
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .partners-title {
            color: var(--third-color);
            font-size: 36px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 60px;
        }

        .partners-grid {
            display: flex;
            flex-wrap: nowrap;
            gap: 40px;
            align-items: center;
            justify-content: flex-start;
            animation: scroll 10s linear infinite;
            width: max-content;
        }

        .partners-grid:hover {
            animation-play-state: paused;
        }

        .partners-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            min-width: 200px;
            flex-shrink: 0;
        }

        .partners-logo img {
            max-height: 70px;
            max-width: 250px;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: all 0.3s ease;
        }

        .partners-logo:hover img {
            transform: scale(1.05);
        }

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

        /* Duplicate logos for seamless loop */
        .partners-grid > .partners-logo:nth-child(n+9) {
            display: none;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .partners-title {
                font-size: 32px;
            }
            
            .partners-grid {
                gap: 30px;
            }
        }

        @media (max-width: 768px) {
            .partners-section {
                padding: 40px 15px;
            }
            
            .partners-title {
                font-size: 28px;
                margin-bottom: 40px;
            }
            
            .partners-logo {
                height: 50px;
                min-width: 140px;
            }
            
            .partners-logo img {
                max-height: 35px;
                max-width: 140px;
            }
        }

        @media (max-width: 480px) {
            .partners-section {
                padding: 30px 10px;
            }
            
            .partners-title {
                font-size: 24px;
                margin-bottom: 30px;
            }
            
            .partners-logo {
                height: 45px;
                min-width: 120px;
            }
            
            .partners-logo img {
                max-height: 30px;
                max-width: 120px;
            }
            
            .partners-grid {
                gap: 20px;
            }
        }

        @media (max-width: 320px) {
            .partners-title {
                font-size: 22px;
            }
            
            .partners-grid {
                gap: 15px;
            }
        }


/* Logo Cloud Section Ends */



/* Text Slide Section Starts */

            .slider-container {
            background-color: var(--primary-color);
            color: var(--fourt-color);
            padding: 20px 0;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            width: 100%;
        }

        .slider-track {
            display: inline-flex;
            animation: slide 25s linear infinite;
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 1px;
            width: max-content;
            align-items: center;
        }

        .slider-item {
            display: inline-flex;
            align-items: center;
            padding: 0 30px; /* Reduced padding since we're adding inline separators */
            flex-shrink: 0;
        }

        .separator {
            margin: 0 30px; /* Space around the separator */
            display: inline-flex;
            align-items: center;
        }


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

        /* Responsive Design */
        @media (max-width: 768px) {
            .slider-track {
                font-size: 20px;
            }
            
            .slider-item {
                padding: 0 25px;
            }
            
            .separator {
                margin: 0 25px;
            }
            
            .separator svg {
                width: 18px;
                height: 18px;
            }
        }

        @media (max-width: 480px) {
            .slider-container {
                padding: 15px 0;
            }
            
            .slider-track {
                font-size: 18px;
            }
            
            .slider-item {
                padding: 0 20px;
            }
            
            .separator {
                margin: 0 20px;
            }
            
            .separator svg {
                width: 16px;
                height: 16px;
            }
        }

        @media (max-width: 320px) {
            .slider-track {
                font-size: 16px;
            }
            
            .slider-item {
                padding: 0 15px;
            }
            
            .separator {
                margin: 0 15px;
            }
            
            .separator svg {
                width: 14px;
                height: 14px;
            }
        }

        /* Pause animation on hover */
        .slider-container:hover .slider-track {
            animation-play-state: paused;
        }

        /* Additional styling for better visual appeal */
        .slider-container::before,
        .slider-container::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50px;
            z-index: 1;
            pointer-events: none;
        }

        .slider-container::before {
            left: 0;
            background: linear-gradient(to right, #1b8291, transparent);
        }

        .slider-container::after {
            right: 0;
            background: linear-gradient(to left, #1b8291, transparent);
        }

/* Text Slide Section Ends */


/* Services Section Starts */



        .services-section {
            background: linear-gradient(135deg, #FFF 0%, #caf2f8 100%); 
            padding: 80px 20px;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .services-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(112, 184, 180, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .services-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 60px;
            animation: fadeInUp 0.8s ease-out;
        }

        .services-label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-color);
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
        }



        .services-title {
            color: var(--primary-color);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1.2;
            max-width: 600px;
        }

        .view-all-btn {
            background: var(--primary-color);
            border: 1px solid #01002e;
            color: var(--fourt-color);
            padding: 12px 24px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .view-all-btn:hover {
            color: var(--third-color);
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .view-all-btn::after {
            content: '→';
            transition: transform 0.3s ease;
        }

        .view-all-btn:hover::after {
            transform: translateX(4px);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 24px;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .service-card {
            background: var(--primary-color);
            border: 1px solid var(--primary-color);
            border-radius: 20px;
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            cursor: pointer;
            animation: slideInUp 0.6s ease-out;
        }

        .service-card:nth-child(1) { animation-delay: 0.1s; }
        .service-card:nth-child(2) { animation-delay: 0.2s; }
        .service-card:nth-child(3) { animation-delay: 0.3s; }
        .service-card:nth-child(4) { animation-delay: 0.4s; }
        .service-card:nth-child(5) { animation-delay: 0.5s; }
        .service-card:nth-child(6) { animation-delay: 0.6s; }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px var(--lite-primary-color);
            border-color: var(--third-color);
        }

        .service-card.featured {
            background: linear-gradient(135deg, #fff 0%, #1b8291 100%);
            color: var(--third-color);
        }



        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(112, 184, 180, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .service-card:hover::before {
            opacity: 1;
        }

        .card-image {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
            border-radius: 12px;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }

        .card-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .service-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--fourt-color);
            position: relative;
            z-index: 2;
        }

        .service-card.featured .service-title {
            color: var(--third-color);
        }

        .service-description {
            color: var(--fifth-color);
            margin-bottom: 24px;
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }

        .service-card.featured .service-description {
            color: var(--third-color);
        }

        .learn-more {
            color: var(--third-color);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .service-card.featured .learn-more {
            color: var(--third-color);
        }

        .learn-more::after {
            content: '→';
            transition: transform 0.3s ease;
        }

        .learn-more:hover {
            gap: 12px;
        }

        .learn-more:hover::after {
            transform: translateX(4px);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .services-section {
                padding: 60px 16px;
            }

            .services-header {
                flex-direction: column;
                gap: 24px;
                text-align: center;
            }

            .services-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .service-card {
                padding: 24px;
            }

            .card-image {
                height: 160px;
            }
        }

        @media (max-width: 480px) {
            .service-card {
                padding: 20px;
            }

            .services-title {
                font-size: 2rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        /* Loading animation for images */
        .card-image {
            background-color: rgba(255, 255, 255, 0.1);
            background-image: 
                linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent),
                url('/placeholder.svg?height=200&width=400');
        }

        .service-card.featured .card-image {
            box-shadow: 0 10px 20px rgba(1, 0, 46, 0.2);
        }

/* Services Section Ends */


/* Web Services Section Starts */



        .web-container {
            width: 100%;
            max-width: 1600px;
            padding: 1.5rem;
            margin: 0 auto;
        }

        .web-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: start;
        }

        .left-section {
            position: sticky;
            top: 2rem;
            align-self: flex-start;
        }

        .web-hero-content {
            margin-bottom: 1.5rem;
        }

        .web-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            background: #f1f5f9;
            color: #1b8291;
            border-radius: 9999px;
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 1rem;
        }

        .web-badge svg {
            width: 0.6rem;
            height: 0.6rem;
            margin-right: 0.25rem;
        }

        .web-hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #01002e;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .gradient-text {
            background: linear-gradient(135deg, #1b8291 0%, #caf2f8 100%, #01002e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .web-hero-description {
            font-size: 1rem;
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .cta-card {
            background: linear-gradient(135deg, #1b8291 0%, #caf2f8 100%);
            color: white;
            width: 100%;
            max-width: 600px;
            padding: 1.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .cta-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #1b8291 0%, #caf2f8 100%);
            pointer-events: none;
        }

        .cta-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, #1b8291 0%, transparent 50%);
            animation: rotate 20s linear infinite;
            pointer-events: none;
        }

        .bg-shapes {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .bg-shape {
            position: absolute;
            border-radius: 50%;
            background: #01002e;
            animation: float 6s ease-in-out infinite;
        }

        .bg-shape:nth-child(1) {
            width: 60px;
            height: 60px;
            top: 20%;
            right: 10%;
            animation-delay: 0s;
        }

        .bg-shape:nth-child(2) {
            width: 40px;
            height: 40px;
            top: 60%;
            right: 20%;
            animation-delay: 2s;
        }

        .bg-shape:nth-child(3) {
            width: 30px;
            height: 30px;
            top: 80%;
            right: 5%;
            animation-delay: 4s;
        }

        .bg-dots {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80px;
            height: 80px;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 8px 8px;
            opacity: 0.3;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        .cta-content {
            position: relative;
            z-index: 1;
        }

        .cta-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .cta-icon {
            padding: 0.5rem;
            border-radius: 0.5rem;
            backdrop-filter: blur(4px);
        }

        .cta-title {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .cta-description {
            color: #fff;
            margin-bottom: 1rem;
            line-height: 1.6;
            font-size: 0.9rem;
        }

        .web-button-group {
            display: flex;
            justify-content: flex-start;
            margin-top: 1rem;
        }

        .web-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 500;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }

        .web-btn-primary {
            background: linear-gradient(135deg, #1b8291 0%, #01002e 100%);
            color: #fff;
            transform: translateY(0);
        }

        .web-btn-primary:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #fff 0%, #dcfffd 100%);
            color: #01002e;
        }

        .web-btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }

        .web-btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .web-btn-primary:hover::before {
            left: 100%;
        }

        .web-btn svg {
            width: 1.2rem;
            height: 1.2rem;
        }

        .web-btn svg:first-child {
            margin-right: 0.375rem;
        }

        .web-btn svg:last-child {
            margin-left: 0.375rem;
        }

        .right-section {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            position: relative;
        }

        .web-card {
            border-radius: 0.2rem;
            width: 100%;
            max-width: 800px;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .card-light {
            background: white;
            border: 1px solid #e2e8f0;
            box-shadow: 0 5px 1px #1b8291;
        }

        .card-light::after {
            content: '';
            position: absolute;
            bottom: -50px;
            right: 0;
            width: 100px;
            height: 100px;
            background-image: url('assets/home/card-image.gif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom right;

            
        }

        .card-dark {
            background: linear-gradient(135deg, #1b8291 10%, #70b8b4 100%);
            color: white;
            box-shadow: 0 5px 8px #1b8291;
        }

        .card-dark::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background-image: url('https://thexcitegroup.com/wp-content/uploads/2021/12/Untitled-design-7.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom right;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .card-icon {
            padding: 0.75rem;
            border-radius: 0.75rem;
        }

        .card-dark .card-icon {
            backdrop-filter: blur(4px);
        }

        .card-arrow {
            padding: 0.5rem;
            border-radius: 9999px;
        }

        .card-light .card-arrow {
            border: 1px solid #1b8291;
        }

        .card-dark .card-arrow {
            background: #fff;
            backdrop-filter: blur(4px);
        }

        .web-card-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .card-light .web-card-title {
            color: #111827;
        }

        .web-card-description {
            line-height: 1.7;
            margin-bottom: 2rem;
            font-size: 1rem;
        }

        .card-light .web-card-description {
            color: #6b7280;
        }

        .card-dark .web-card-description {
            font-weight: 700;
            color: #ffffffe6;
        }

        .services-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem 2rem;
        }

        .service-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .service-check {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
        }

        .card-light .service-check {
            color: #2563eb;
        }

        .card-dark .service-check {
            color: white;
        }

        .service-text {
            font-size: 0.875rem;
        }

        .card-light .service-text {
            color: #374151;
        }

        .card-dark .service-text {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .web-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .left-section {
                position: static;
            }

            .web-hero-title {
                font-size: 2rem;
            }

            .cta-card {
                max-width: 100%;
            }

            .web-card {
                max-width: 100%;
            }

            .right-section {
                position: relative;
            }

            .card-light::after,
            .card-dark::after {
                width: 80px;
                height: 80px;
            }
        }

        @media (max-width: 768px) {
            .web-container {
                padding: 1rem;
            }

            .web-hero-title {
                font-size: 1.75rem;
            }

            .web-hero-description {
                font-size: 0.9rem;
            }

            .web-badge {
                font-size: 0.85rem;
            }

            .web-badge svg {
                width: 0.55rem;
                height: 0.55rem;
            }

            .cta-card {
                padding: 1.25rem;
            }

            .cta-icon {
                width: 60px;
                height: 60px;
            }

            .cta-title {
                font-size: 1rem;
            }

            .cta-description {
                font-size: 0.85rem;
            }

            .web-btn {
                padding: 0.6rem 1.2rem;
                font-size: 0.85rem;
            }

            .web-btn svg {
                width: 1.1rem;
                height: 1.1rem;
            }

            .web-card {
                padding: 1.5rem;
            }

            .web-card-title {
                font-size: 1.25rem;
            }

            .web-card-description {
                font-size: 0.9rem;
            }

            .card-light::after {
                bottom: -28px;
            }

            .services-grid {
                grid-template-columns: 1fr 1fr;
            }

            .service-check {
                width: 1.1rem;
                height: 1.1rem;
            }

            .service-text {
                font-size: 0.85rem;
            }

            .bg-shape:nth-child(1) {
                width: 50px;
                height: 50px;
            }

            .bg-shape:nth-child(2) {
                width: 35px;
                height: 35px;
            }

            .bg-shape:nth-child(3) {
                width: 25px;
                height: 25px;
            }

            .bg-dots {
                width: 70px;
                height: 70px;
                background-size: 7px 7px;
            }

            .card-light::after,
            .card-dark::after {
                width: 70px;
                height: 70px;
            }
        }

        @media (max-width: 480px) {
            .web-container {
                padding: 0.75rem;
            }

            .web-hero-title {
                font-size: 1.5rem;
            }

            .web-hero-description {
                font-size: 0.85rem;
            }

            .web-badge {
                font-size: 0.8rem;
            }

            .web-badge svg {
                width: 0.5rem;
                height: 0.5rem;
            }

            .cta-card {
                padding: 1rem;
            }

            .cta-icon {
                width: 50px;
                height: 50px;
            }

            .cta-title {
                font-size: 0.9rem;
            }

            .cta-description {
                font-size: 0.8rem;
            }

            .web-btn {
                padding: 0.5rem 1rem;
                font-size: 0.8rem;
            }

            .web-btn svg {
                width: 1rem;
                height: 1rem;
            }

            .web-card {
                padding: 1rem;
            }

            .web-card-title {
                font-size: 1.1rem;
            }

            .web-card-description {
                font-size: 0.85rem;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .service-check {
                width: 1rem;
                height: 1rem;
            }

            .service-text {
                font-size: 0.8rem;
            }

            .bg-shape:nth-child(1) {
                width: 40px;
                height: 40px;
            }

            .bg-shape:nth-child(2) {
                width: 30px;
                height: 30px;
            }

            .bg-shape:nth-child(3) {
                width: 20px;
                height: 20px;
            }

            .bg-dots {
                width: 60px;
                height: 60px;
                background-size: 6px 6px;
            }

            .card-light::after,
            .card-dark::after {
                width: 60px;
                height: 60px;
            }
        }



/* Web Services Section Ens */



/* Step Section Starts */


        .process-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 20px;
        }

        .section-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            gap: 30px;
        }

        .section-tag {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            width: 100%;
        }

        .tag-text {
            font-size: 16px;
            font-weight: 600;
            color: var(--third-color);
        }

        .header-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            gap: 20px;
        }

        .step-main-title {
            font-size: 48px;
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1.2;
            max-width: 45%;
        }

        .main-description {
            font-size: 16px;
            color: var(--third-color);
            line-height: 1.6;
            max-width: 45%;
            text-align: left;
            padding-left: 20px;
        }

        .steps-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 60px;
        }

        .step-card {
            background: var(--fourt-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
        }

        .step-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
        }

        .step-corner-number {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 72px;
            font-weight: 700;
            color: var(--lite-primary-color);
            line-height: 1;
            z-index: 1;
            left: 80%;
            user-select: none;
            pointer-events: none;
        }

        .step-content {
            padding: 32px 24px 24px;
            position: relative;
            z-index: 2;
        }

        .step-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--third-color);
            margin-bottom: 16px;
        }

        .step-description {
            font-size: 14px;
            color: var(--sixth-color);
            line-height: 1.6;
        }

        .step-footer {
            background-color: var(--primary-color);
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .step-label {
            color: var(--fourt-color);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .step-number {
            color: var(--third-color);
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .process-section {
                padding: 60px 16px;
            }

            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .header-content {
                flex-direction: column;
                align-items: flex-start;
            }

            .step-main-title {
                font-size: 36px;
                max-width: 100%;
            }

            .main-description {
                font-size: 14px;
                max-width: 100%;
                padding-left: 0;
                text-align: left;
            }

            .steps-container {
                grid-template-columns: 1fr;
                gap: 24px;
                margin-top: 40px;
            }

            .step-corner-number {
                font-size: 60px;
                top: 16px;
                left: 88%;
            }

            .step-content {
                padding: 24px 20px 20px;
            }

            .step-footer {
                padding: 14px 20px;
            }

            .step-number {
                font-size: 28px;
            }
        }

        @media (max-width: 480px) {
            .step-main-title {
                font-size: 28px;
            }

            .main-description {
                font-size: 14px;
            }

            .step-title {
                font-size: 18px;
            }

            .step-description {
                font-size: 13px;
            }

            .step-corner-number {
                font-size: 48px;
                top: 12px;
                left: 86%;
            }

            .step-number {
                font-size: 24px;
            }
        }

        /* Large screens - ensure 3 columns */
        @media (min-width: 1024px) {
            .steps-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Ensure corner numbers don't interfere with content on very small cards */
        @media (max-width: 360px) {
            .step-corner-number {
                font-size: 40px;
                opacity: 0.8;
            }
        }


/* Step Section Ends */

.divider {
  border: none;
  height: 2px;
  background-color: var(--fifth-color);
  margin: 40px 0;
}
/* Why Choose Us Section Starts */

        .why-us-section {
            background: linear-gradient(135deg, #70b8b4 0%, #1b8291 100%);
            padding: 30px 20px;
            min-height: 30vh;
            position: relative;
            overflow: hidden;
        }

        .why-us-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .why-us-container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .why-us-header {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: var(--fourt-color);
      color: var(--primary-color);
      border: 1px solid var(--third-color);
      padding: clamp(4px, 1.5vw, 6px) clamp(10px, 3vw, 16px);
      border-radius: 20px;
      font-size: clamp(14px, 3.5vw, 18px);
      font-weight: 600;
      margin-bottom: clamp(16px, 4vw, 24px);
        }

        .why-us-content-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start;
        }

        .why-us-left-content {
            padding-right: 20px;
        }

        .why-us-main-heading {
            font-size: 48px;
            font-weight: 700;
            color: white;
            line-height: 1.2;
            margin-bottom: 24px;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .why-us-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            margin-bottom: 48px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .features-container {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 29px;
            position: relative;
            transform-style: preserve-3d;
            transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 8px 32px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(255, 255, 255, 0.05) 50%,
                rgba(255, 255, 255, 0) 100%);
            border-radius: 20px;
            pointer-events: none;
            z-index: 1;
        }

        .feature-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, 
                transparent 30%, 
                rgba(255, 255, 255, 0.1) 50%, 
                transparent 70%);
            transform: rotate(-45deg) translateX(-100%);
            transition: transform 0.6s ease;
            pointer-events: none;
            z-index: 2;
        }

        .feature-card:hover::after {
            transform: rotate(-45deg) translateX(100%);
        }

        .feature-card:hover {
            transform: perspective(1000px) rotateX(-8deg) rotateY(5deg) translateY(-15px);
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.25),
                0 10px 20px rgba(255, 107, 53, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .feature-card:nth-child(even):hover {
            transform: perspective(1000px) rotateX(-8deg) rotateY(-5deg) translateY(-15px);
        }

        .feature-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            position: relative;
            z-index: 3;
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: #ffffff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .feature-title {
            font-size: 22px;
            font-weight: 600;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 3;
        }

        .feature-description {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 3;
        }

        /* Floating animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .feature-card:nth-child(1) {
            animation: float 6s ease-in-out infinite;
        }

        .feature-card:nth-child(2) {
            animation: float 6s ease-in-out infinite 3s;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .why-us-content-wrapper {
                gap: 40px;
            }
            
            .why-us-main-heading {
                font-size: 40px;
            }
        }

        @media (max-width: 768px) {
            .why-us-section {
                padding: 60px 20px;
            }
            
            .why-us-content-wrapper {
                grid-template-columns: 1fr;
                gap: 48px;
            }
            
            .why-us-left-content {
                padding-right: 0;
            }
            
            .why-us-main-heading {
                font-size: 32px;
            }
            .feature-card {
                padding: 24px;
            }

            .feature-card:hover {
                transform: perspective(1000px) rotateX(-5deg) rotateY(3deg) translateY(-8px);
            }
            
            .feature-card:nth-child(even):hover {
                transform: perspective(1000px) rotateX(-5deg) rotateY(-3deg) translateY(-8px);
            }
        }

        @media (max-width: 480px) {
            .why-us-section {
                padding: 40px 16px;
            }
            
            .why-us-main-heading {
                font-size: 28px;
            }
            
            .why-us-description {
                font-size: 16px;
            }
            .features-container {
                gap: 24px;
            }
            
            .feature-card {
                padding: 20px;
            }
            
            .feature-title {
                font-size: 18px;
            }
            
            .feature-description {
                font-size: 14px;
            }

            .feature-card:hover {
                transform: perspective(1000px) rotateX(-3deg) rotateY(2deg) translateY(-5px);
            }
            
            .feature-card:nth-child(even):hover {
                transform: perspective(1000px) rotateX(-3deg) rotateY(-2deg) translateY(-5px);
            }

            .feature-icon {
                width: 40px;
                height: 40px;
                font-size: 18px;
            }
        }

/* Why Choose Us Section Ends */

/* About Sction Starts */


    .about-container {
      max-width: 1500px;
      margin: 0 auto;
      padding: clamp(40px, 8vw, 80px) clamp(20px, 4vw, 60px);
    }

    /* Header Section */
    .header-section {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .logo-dots {
      display: flex;
      gap: 3px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .dot:nth-child(1) { background: #4CAF50; }
    .dot:nth-child(2) { background: #8BC34A; }
    .dot:nth-child(3) { background: #FFC107; }

    .header-text {
      font-size: clamp(14px, 3.5vw, 16px);
      font-weight: 500;
      color: #01002e;
      margin-left: 8px;
    }

    /* Main Title */
    .main-heading {
      font-size: clamp(28px, 6vw, 48px);
      font-weight: 700;
      color: #1b8291;
      text-align: left;
      line-height: 1.2;
      margin-bottom: clamp(30px, 6vw, 60px);
    }

    /* Content Grid */
    .content-grid {
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 5vw, 40px);
      margin-bottom: clamp(40px, 8vw, 80px);
    }

    /* Left Column - Modified Images Layout */
    .images-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Top row: Image and Since Badge side by side */
    .top-row {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      align-items: center;
    }

    .team-photo {
      width: 100%;
      max-width: 400px;
      height: auto;
      aspect-ratio: 2 / 1;
      object-fit: cover;
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    .team-photo:hover {
      transform: scale(1.02);
    }

    /* Since Badge - Side by side with rotation animation */
    .since-circle {
      width: 100%;
      max-width: 150px;
      height: auto;
      aspect-ratio: 1 / 1;
      background: #1b8291;
      border: 6px solid #70b8b4;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      justify-self: center;
      animation: rotateCircle 10s linear infinite;
    }

    .since-circle .since {
      font-size: clamp(1.2rem, 3vw, 2rem);
      letter-spacing: 1px;
    }

    .since-circle .year {
      font-size: clamp(12px, 2vw, 18px);
      font-weight: 700;
    }

    /* Bottom image - Full width */
    .bottom-image {
      width: 100%;
      max-width: 600px;
      height: auto;
      aspect-ratio: 12 / 5;
      object-fit: cover;
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    .bottom-image:hover {
      transform: scale(1.02);
    }

    /* Right Column - Content */
    .content-column {
      padding-top: 20px;
    }

    .about-description {
      font-size: clamp(14px, 3.5vw, 16px);
      color: #666;
      line-height: 1.8;
      margin-bottom: 40px;
    }

    /* Skills Section */
    .skills-section {
      margin-bottom: 40px;
    }

    .skill {
      margin-bottom: 25px;
      opacity: 0;
      transform: translateY(20px);
      animation: slideInUp 0.6s ease-out forwards;
    }

    .skill:nth-child(2) {
      animation-delay: 0.2s;
    }

    .skill:nth-child(3) {
      animation-delay: 0.4s;
    }

    .skill-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .skill-name {
      font-size: clamp(12px, 3.5vw, 14px);
      font-weight: 600;
      color: #333;
    }

    .skill-percent {
      font-size: clamp(12px, 3.5vw, 14px);
      font-weight: 600;
      color: #1b8291;
    }

    .skill-bar {
      width: 100%;
      height: 8px;
      background: #e8e8e8;
      border-radius: 4px;
      position: relative;
      overflow: visible;
    }

    .skill-fill {
      height: 100%;
      background: linear-gradient(90deg, #1b8291, #d5fffd);
      border-radius: 4px;
      position: relative;
      width: 0%;
      transition: width 2s ease-out;
    }

    .skill-fill::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      background: #1b8291;
      border: 2px solid white;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* Button */
    .about-cta-button {
      padding: clamp(10px, 2.5vw, 14px) clamp(20px, 5vw, 30px);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #1b8291;
      color: #fff;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      font-size: clamp(12px, 3.5vw, 14px);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .about-cta-button:hover {
      color: #01002e;
      background: transparent;
      transform: translateY(-2px);
      border: 1px solid #01002e;
      box-shadow: 0 8px 25px #70b8b4;
    }

    .arrow {
      width: clamp(20px, 5vw, 30px);
      height: clamp(20px, 5vw, 30px);
      transition: transform 0.3s ease;
    }

    .about-cta-button:hover .arrow {
      transform: translateX(4px);
      color: #1b8291;
    }

    /* Statistics Grid */
    .stats-container {
      background-color: rgb(227, 251, 255);
      border-radius: 30px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: clamp(20px, 5vw, 80px);
      padding: clamp(20px, 5vw, 60px) clamp(10px, 3vw, 20px);
      border: 2px solid #4CAF50;
      border-top: 2px solid #ff0000;
      animation: borderPulse 3s ease-in-out infinite, statsFadeIn 1s ease-out forwards;
      opacity: 0;
      transform: scale(0.95);
    }

    .stat {
      text-align: center;
    }

    .stat-icon {
      display: flex;
      justify-content: center;
      gap: 3px;
      margin-bottom: 20px;
    }

    .stat-number {
      font-size: clamp(20px, 4vw, 36px);
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 10px;
      display: block;
    }

    .stat-label {
      font-size: clamp(12px, 2vw, 14px);
      color: #666;
      font-weight: 500;
    }

    /* Responsive Design */
    @media (min-width: 768px) {
      .content-grid {
        flex-direction: row;
        align-items: start;
      }

      .images-column {
        flex: 1;
      }

      .content-column {
        flex: 1;
        padding-top: 20px;
      }

      .header-section .about-cta-button {
        display: none;
      }

      .content-column .about-cta-button {
        display: inline-flex;
      }
    }

    @media (max-width: 768px) {
      .about-container {
        padding: clamp(20px, 5vw, 40px) clamp(10px, 3vw, 20px);
      }

      .header-section {
        flex-direction: row;
        align-items: center;
        gap: 10px;
      }

      .header-text {
        margin-right: 10px;
      }

      .header-section .about-cta-button {
        margin-left: auto;
        display: inline-flex;
      }

      .content-column .about-cta-button {
        display: none;
      }

      .main-heading {
        font-size: clamp(24px, 5vw, 32px);
        margin-bottom: 40px;
      }

      .top-row {
        grid-template-columns: 2fr 1fr;
        gap: 15px;
      }

      .team-photo {
        max-width: 100%;
      }

      .since-circle {
        max-width: 100px;
      }

      .since-circle .since {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
      }

      .since-circle .year {
        font-size: clamp(10px, 1.8vw, 14px);
      }

      .bottom-image {
        max-width: 100%;
      }

      .skills-section {
        padding: 20px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .skill-bar {
        height: 10px;
      }

      .skill-fill::after {
        width: 18px;
        height: 18px;
      }

      .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(15px, 4vw, 40px);
        padding: clamp(15px, 4vw, 40px) clamp(8px, 2vw, 15px);
      }
    }

    @media (max-width: 480px) {
      .top-row {
        grid-template-columns: 2fr 1fr;
        gap: 10px;
      }

      .team-photo {
        max-width: 100%;
      }

      .since-circle {
        max-width: 80px;
      }

      .since-circle .since {
        font-size: clamp(0.8rem, 2vw, 1.2rem);
      }

      .since-circle .year {
        font-size: clamp(8px, 1.5vw, 12px);
      }

      .skills-section {
        padding: 15px;
      }

      .skill-bar {
        height: 12px;
      }

      .skill-fill::after {
        width: 20px;
        height: 20px;
      }

      .stats-container {
        grid-template-columns: 1fr;
        gap: clamp(10px, 3vw, 30px);
        padding: clamp(10px, 3vw, 30px) clamp(5px, 1.5vw, 10px);
      }
    }

    /* Animation Classes */
    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s ease-out forwards;
    }

    .slide-left {
      opacity: 0;
      transform: translateX(-50px);
      animation: slideInLeft 1s ease-out forwards;
    }

    .slide-right {
      opacity: 0;
      transform: translateX(50px);
      animation: slideInRight 1s ease-out forwards;
    }

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

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

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

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

    @keyframes rotateCircle {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes statsFadeIn {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes borderPulse {
      0% {
        border-color: #4CAF50;
        border-top-color: #ff0000;
      }
      50% {
        border-color: #1b8291;
        border-top-color: #70b8b4;
      }
      100% {
        border-color: #4CAF50;
        border-top-color: #ff0000;
      }
    }

/* About Sction Ends */

/* Appointment Booking Section Starts */


  .book-container {
      max-width: 1500px;
      margin: 0 auto;
      padding: clamp(1rem, 4vw, 2rem);
      min-height: 50vh;
      display: flex;
      align-items: center;
    }

    .book-content-wrapper {
      display: flex;
      flex-direction: column;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
      width: 100%;
    }

    /* Left Section */
    .book-info-section {
      padding-right: clamp(0, 2vw, 2rem);
      width: 100%;
    }

    /* Avatar Group */
    .avatar-group {
      display: flex;
      margin-bottom: clamp(1rem, 3vw, 1.5rem);
      gap: 0.1rem;
      justify-content: left;
    }

    .avatar {
      width: clamp(40px, 10vw, 48px);
      height: clamp(40px, 10vw, 48px);
      border-radius: 50%;
      border: 3px solid white;
      overflow: hidden;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin-right: -0.5rem;
    }

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

    /* Main Heading */
    .book-heading {
      font-size: clamp(1.75rem, 5vw, 2.5rem);
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: clamp(0.75rem, 2vw, 1rem);
      color: #111827;
      letter-spacing: -0.025em;
      text-align: center;
    }

    .highlight {
      background: linear-gradient(135deg, #1b8291, #01002e, #1b8291, #1b8291, #01002e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .time-counter {
      color: #111827;
      font-weight: 900;
    }

    /* book-description */
    .book-description {
      color: #6b7280;
      font-size: clamp(0.9rem, 2.5vw, 1rem);
      margin-bottom: clamp(1.5rem, 4vw, 2rem);
      font-weight: 400;
      line-height: 1.6;
      text-align: center;
    }

    /* Stats */
    .book-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: clamp(0.75rem, 2vw, 1rem);
      margin-bottom: clamp(1.5rem, 4vw, 2rem);
    }

    .book-stat-item {
      background: #dcfffd;
      padding: clamp(0.75rem, 2vw, 1rem);
      border-radius: 0.75rem;
      text-align: center;
      border: 1px solid #01002e;
    }

    .stat-number {
      display: block;
      font-size: clamp(1rem, 3vw, 1.25rem);
      font-weight: 800;
      color: #111827;
      margin-bottom: 0.25rem;
    }

    .stat-label {
      display: block;
      font-size: clamp(0.65rem, 2vw, 0.75rem);
      color: #363636;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* CTA Section */
    .cta-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .book-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #1b8291;
      color: white;
      font-weight: 600;
      padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 3vw, 1.75rem);
      transition: all 0.3s ease;
      border-radius: 50px;
      text-decoration: none;
      font-size: clamp(0.8rem, 2vw, 0.95rem);
      border: 1px solid #01002e;
      cursor: pointer;
      box-shadow: 0 4px 15px #1b8291;
    }

    .book-cta-button:hover {
      background: transparent;
      color: #1b8291;
      border: 1px solid #01002e;
      transform: translateY(-1px);
    }

    .cta-note {
      font-size: clamp(0.65rem, 2vw, 0.75rem);
      color: #9ca3af;
      margin: 0;
      font-weight: 500;
    }

    /* Right Section - Boarding Pass */
    .boarding-pass-container {
      display: flex;
      justify-content: center;
      position: relative;
      perspective: 1000px;
    }

    .boarding-pass {
      width: clamp(260px, 80vw, 390px);
      height: clamp(320px, 100vw, 500px);
      background: linear-gradient(135deg, #1b8291, #70b8b4);
      color: white;
      border-radius: 1.5rem;
      padding: clamp(1rem, 2vw, 1.25rem);
      transform: rotate(3deg);
      box-shadow: 0 6px 18px #70b8b4;
      position: relative;
      transition: all 0.5s ease;
    }

    .boarding-pass:hover {
      transform: rotate(0deg) scale(1.02) translateY(-5px);
    }

    /* Boarding Pass Header */
    .boarding-pass-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: clamp(1rem, 2vw, 1.5rem);
    }

    .boarding-pass-logo {
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      font-weight: 700;
      color: white;
    }

    .boarding-pass-title {
      text-align: right;
    }

    .boarding-pass-title p {
      font-size: clamp(0.5rem, 1.5vw, 0.625rem);
      opacity: 0.8;
      margin-bottom: 0.125rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: 1.2;
    }

    /* Flight Route */
    .flight-route {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: clamp(1rem, 2vw, 1.25rem);
    }

    .flight-location {
      flex: 1;
    }

    .flight-location .label {
      font-size: clamp(0.5rem, 1.5vw, 0.625rem);
      opacity: 0.8;
      margin-bottom: 0.125rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .flight-location .code {
      color: #01002e;
      font-size: clamp(0.875rem, 2.5vw, 1rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.025em;
    }

    .flight-location.destination {
      text-align: right;
    }

    .calender-container {
      position: relative;
      margin: 0 clamp(0.5rem, 2vw, 0.75rem);
      flex: 0 0 auto;
    }

    .airplane-icon {
      width: clamp(1.25rem, 3vw, 1.5rem);
      height: clamp(1.25rem, 3vw, 1.5rem);
      transform: rotate(45deg);
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }

    /* Flight Details */
    .flight-details {
      display: flex;
      justify-content: space-between;
      margin-bottom: clamp(0.75rem, 2vw, 1rem);
      gap: clamp(0.5rem, 2vw, 0.75rem);
    }

    .flight-info {
      flex: 1;
    }

    .flight-info .label {
      font-size: clamp(0.5rem, 1.5vw, 0.625rem);
      opacity: 0.8;
      margin-bottom: 0.125rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .flight-info .value {
      font-size: clamp(0.75rem, 2vw, 0.875rem);
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .flight-info.text-right {
      text-align: right;
    }

    .flight-time {
      text-align: right;
      margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .flight-time .label {
      font-size: clamp(0.5rem, 1.5vw, 0.625rem);
      opacity: 0.8;
      margin-bottom: 0.125rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .flight-time .value {
      font-size: clamp(0.75rem, 2vw, 0.875rem);
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    /* QR Code */
    .qr-code-container {
      display: flex;
      justify-content: center;
      margin-bottom: clamp(0.5rem, 2vw, 1rem);
    }

    .qr-code-wrapper {
      padding: 0.5rem;
      border-radius: 0.75rem;
      transition: all 0.3s ease;
    }

    .qr-code-wrapper:hover {
      transform: scale(1.05) rotate(2deg);
    }

    .qr-code-image {
      width: clamp(6rem, 20vw, 9rem);
      height: clamp(6rem, 20vw, 9rem);
      object-fit: contain;
      border-radius: 4px;
      background-size: contain;
      background-repeat: no-repeat;
      border: 1.2px solid #01002e;
      box-shadow: 0 6px 15px #fff;
    }

    /* Grab Spot */
    .grab-spot {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
    }

    .grab-spot-content {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .grab-spot-content p {
      font-family: 'Comic Sans MS', cursive;
      font-size: clamp(0.75rem, 2vw, 0.875rem);
      margin-right: 0.375rem;
      font-weight: 600;
      color: #01002e;
    }

    .grab-spot-content svg {
      transform: rotate(45deg);
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }

    /* Boarding Pass Footer */
    .boarding-pass-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      left: 1rem;
    }

    .indicator-icons {
      display: flex;
      align-items: center;
      gap: 0.375rem;
    }

    .indicator-circle {
      width: clamp(0.875rem, 2vw, 1.125rem);
      height: clamp(0.875rem, 2vw, 1.125rem);
      border: 1px solid #01002e;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
    }

    .indicator-dot-small {
      width: 0.375rem;
      height: 0.375rem;
      background: #fff;
      border-radius: 50%;
    }

    .wifi-indicator {
      display: flex;
      align-items: flex-end;
      gap: 1px;
      height: 12px;
      opacity: 0.7;
    }

    .wifi-bar {
      width: 2px;
      background: #01002e;
      border-radius: 1px;
    }

    .wifi-bar:nth-child(1) { height: 3px; }
    .wifi-bar:nth-child(2) { height: 6px; }
    .wifi-bar:nth-child(3) { height: 9px; }
    .wifi-bar:nth-child(4) { height: 12px; }

    /* Responsive Design */
    @media (min-width: 768px) {
      .book-content-wrapper {
        flex-direction: row;
        text-align: left;
      }

      .book-info-section {
        flex: 1;
      }

      .boarding-pass-container {
        flex: 1;
      }

      .book-heading {
        text-align: left;
      }

      .book-description {
        text-align: left;
      }

      .cta-container {
        align-items: flex-start;
      }
    }

    @media (max-width: 768px) {
      .book-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
      }

      .book-stat-item {
        padding: 0.75rem;
      }

      .qr-code-image {
        width: clamp(8rem, 30vw, 12rem);
        height: clamp(8rem, 30vw, 12rem);
      }

      .qr-code-container {
        margin-bottom: clamp(8rem, 25vw, 10rem);
      }

      .avatar {
        margin-right: -0.4rem;
      }
    }

    @media (max-width: 480px) {
      .book-stats {
        grid-template-columns: 1fr;
      }

      .avatar-group {
        gap: 0.05rem;
      }

      .avatar {
        width: clamp(32px, 8vw, 40px);
        height: clamp(32px, 8vw, 40px);
        margin-right: -0.3rem;
      }

      .qr-code-image {
        width: clamp(7rem, 35vw, 10rem);
        height: clamp(7rem, 35vw, 10rem);
      }

      .qr-code-container {
        margin-bottom: clamp(6rem, 20vw, 8rem);
      }
    }

    /* Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .book-info-section {
      animation: fadeInUp 0.8s ease-out;
    }

    .boarding-pass {
      animation: fadeInRight 0.8s ease-out 0.2s both;
    }

/* Appointment Booking Section Ends */

/* Faq Section Section Starts */


    .faqq-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    @media (min-width: 1024px) {
      .faq-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* Typography */
    .faqq-container h1 {
      font-size: 2.5rem;
      font-weight: 700;
      color: #1a202c;
      margin-bottom: 0.5rem;
    }

    .faqq-container p {
      color: #4a5568;
      margin-bottom: 2rem;
    }

    /* Buttons */
    .button-group {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
      margin-bottom: 2rem;
    }

    .faq-btn {
      padding: 0.5rem 1.5rem;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: none;
    }

    .btn-outline {
        background: #1b8291;
      border: 1px solid #01002e;
      color: #ffffff;
      border-radius: 9999px;
    }

    .btn-outline:hover {
        background: transparent;
      border: 1px solid #1b8291;
      color: #1b8291;
    }

    /* Image section */
    .faq-image-container {
      position: relative;
      margin-top: 2rem;
      border-radius: 1rem;
      overflow: hidden;
    }

    .faq-image-container img {
      width: 100%;
      height: 320px;
      object-fit: cover;
    }


    /* FAQ section */
    .faq-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .faq-item {
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      overflow: hidden;
      transition: all 0.3s ease-in-out;
      position: relative;
      background-color: #fff;
    }

    /* Animated background for active FAQ */
    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    .faq-item.active {
      background: linear-gradient(135deg, #1b8291, #01002e, #1b8291, #1b8291, #01002e);
      background-size: 300% 300%;
      animation: gradientBG 3s ease infinite;
    }

    .faq-question {
      width: 100%;
      padding: 1rem 1.5rem;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }

    .question-content {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .question-number {
      color: #01002e;
      font-size: 1.25rem;
      font-weight: 500;
      opacity: 0.7;
      transition: color 0.3s ease;
    }

    .question-text {
      color: #01002e;
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .faq-arrow-icon {
      color: #01002e;
      transition: transform 0.3s ease, stroke 0.3s ease;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: all 0.5s ease-in-out;
      opacity: 0;
      position: relative;
      z-index: 2;
    }

    .faq-answer-content {
      padding: 0 1.5rem 1rem 1.5rem;
    }

    /* Active states */
    .faq-item.active .question-number,
    .faq-item.active .question-text {
      color: #fff;
    }

    .faq-item.active .faq-answer {
      max-height: 200px;
      opacity: 1;
    }

    .faq-item.active .faq-answer-content p {
      color: white;
    }

    .faq-item.active .faq-arrow-icon {
      transform: rotate(90deg);
      stroke: #fff;
    }


/* Faq Section Section Ends */

/* Testimonial Section Starts */
        .testimonials-section {
            padding: 80px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .testimonials-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 60px;
            gap: 30px;
        }

        .testimonials-content {
            flex: 1;
        }

        .testimonials-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }

        .testimonials-subtitle {
            font-size: 1.1rem;
            color: #6b7280;
            max-width: 500px;
            line-height: 1.6;
        }
             .clients-highlight {
            background: linear-gradient(135deg, #1b8291, #70b8b4);
            color: white;
            font-size: 28px;
            padding: 1px 7px;
            border-radius: 10px;
            display: inline-block;
            margin-left: 8px;
        }

        .add-review-btn {
            background: #1b8291;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            border: 1px solid #01002e;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .add-review-btn:hover {
            background: #dcfffd;
            color: #01002e;
            border: 1px solid #1b8291;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
            align-items: start;
        }

        .testimonial-card {
            background: white;
            padding: 32px;
            border-radius: 16px;
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #1b8291, #70b8b4);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border-color: #d1d5db;
        }

        .testimonial-card:hover::before {
            opacity: 1;
        }

        .testimonial-text {
            font-size: 1.05rem;
            color: #374151;
            line-height: 1.7;
            margin-bottom: 28px;
            font-style: italic;
            position: relative;
        }

        .testimonial-text::before {
            content: '"';
            font-size: 4rem;
            color: #c8fcf9;
            position: absolute;
            top: -20px;
            left: -10px;
            font-family: Georgia, serif;
            line-height: 1;
        }

        .testimonial-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;
            border-top: 1px solid #f3f4f6;
        }

        .company-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .company-logo {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
        }

        .company-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 4px;
        }

        .author-details {
            display: flex;
            flex-direction: column;
        }

        .author-name {
            font-weight: 600;
            color: #1f2937;
            font-size: 0.95rem;
            margin-bottom: 2px;
        }

        .author-title {
            color: #6b7280;
            font-size: 0.85rem;
        }

        .rating {
            display: flex;
            gap: 2px;
        }

        .star {
            color: #fbbf24;
            font-size: 1.1rem;
        }

        /* Mobile Grid Layout */
        @media (max-width: 768px) {
            .testimonials-section {
                padding: 60px 15px;
            }

            .testimonials-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

            .testimonials-title {
                font-size: 2rem;
            }

            .testimonials-subtitle {
                font-size: 1rem;
            }

            .add-review-btn {
                align-self: flex-start;
            }

            /* Keep grid on mobile with 2 columns */
            .testimonials-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .testimonial-card {
                padding: 20px;
            }

            .testimonial-text {
                font-size: 0.95rem;
                margin-bottom: 20px;
            }

            .testimonial-text::before {
                font-size: 3rem;
                top: -15px;
                left: -8px;
            }

            .testimonial-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .company-logo {
                width: 40px;
                height: 40px;
            }

            .rating {
                align-self: flex-start;
            }

            .star {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .testimonials-section {
                padding: 40px 10px;
            }

            .testimonials-title {
                font-size: 1.75rem;
            }
            .clients-highlight {
                padding: 4px 12px;
                font-size: 28px;
            }

            /* Single column on very small screens */
            .testimonials-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .testimonial-card {
                padding: 18px;
            }

            .company-logo {
                width: 36px;
                height: 36px;
            }

            .author-name {
                font-size: 0.9rem;
            }

            .author-title {
                font-size: 0.8rem;
            }
        }

        /* Masonry-like effect for larger screens */
        @media (min-width: 769px) {
            .testimonials-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .testimonial-card:nth-child(2) {
                margin-top: 30px;
            }

            .testimonial-card:nth-child(5) {
                margin-top: 30px;
            }
        }

        /* Masonry-like effect for larger screens */
        @media (min-width: 769px) {
            .testimonials-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .testimonial-card:nth-child(2) {
                margin-top: 30px;
            }

            .testimonial-card:nth-child(5) {
                margin-top: 30px;
            }
        }


/* Testimonial Section Ends */

/* Blog Section Starts */

    /* Blog section styles */
    .blog-section {
      background-color: #fff;
      color: white;
      padding: 4rem 1rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    /* Header styles */
    .header-indicator {
      display: flex;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    
    .dots {
      display: flex;
      align-items: center;
    }
    
    .dots {
      width: 21px;
      height: 21px;
      border-radius: 50%;
    }
    
    
    .header-text {
        color: #01002e;
      margin-left: 8px;
      font-size: 0.875rem;
      font-weight: 500;
    }
    
    /* Title and view all */
    .section-header {
        color: #1b8291;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }
    
    .section-title {
      font-size: 2rem;
      font-weight: 700;
    }
    
    .blog-view-all-btn {
      display: flex;
      align-items: center;
      background-color: #1b8291;
      color: #fff;
      border: 1px solid #01002e;
      padding: 0.5rem 1.25rem;
      border-radius: 50px;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    
    .blog-view-all-btn:hover {
        color: #1b8291;
        border: 1px solid #1b8291;
      background-color: transparent;
    }
    
    .blog-view-all-btn svg {
      margin-left: 0.5rem;
    }
    
    /* Blog cards grid */
    .blog-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    /* Blog card */
    .blog-card {
      background-color: #1b8291;
      border-radius: 0.5rem;
      overflow: hidden;
    }
    
    .blog-card-image {
      height: 12rem;
      position: relative;
      overflow: hidden;
    }
    
    .blog-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .card-content {
      padding: 1.5rem;
    }
    
    .card-tag {
      display: inline-block;
      background-color: #fff;
      color: #1b8291;
      font-size: 0.75rem;
      font-weight: 500;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      margin-bottom: 1rem;
    }
    
    .card-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
    }
    
    .card-excerpt {
      color: #d1d1d1;
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }
    
    .read-more {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
    }
    
    .read-more:hover {
      text-decoration: underline;
    }
    
    .read-more svg {
      margin-left: 0.25rem;
    }
    
    .mobile-view-all {
      margin-top: 2rem;
      display: flex;
      justify-content: center;
    }
    
    /* Hide desktop view all on mobile */
    .desktop-view-all {
      display: none;
    }
    
    /* Responsive styles */
    @media (min-width: 768px) {
      .blog-section {
        padding: 4rem 2rem;
      }
      
      .section-title {
        font-size: 2rem;
        text-align: left;
      }
      
      .blog-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .mobile-view-all {
        display: none;
      }
      
      .desktop-view-all {
        display: flex;
      }
    }
    
    @media (min-width: 1024px) {
      .blog-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      
      .section-title {
        font-size: 2rem;
        text-align: left;
      }
    }


/* Blog Section Ends */



/* industries Section Starts */

.industries-section {
  width: 100%;
  padding: 60px 0;
  background-color: #ffffff;
}

.industries-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
}

.industries-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
  gap: 40px;
}

.header-left {
  flex: 1;
  max-width: 600px;
}

.section-label-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1b8291;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.industries-section-dot {
  width: 8px;
  height: 8px;
  background-color: #1b8291;
  border-radius: 50%;
}

.section-title {
  font-size: 48px;
  font-weight: 700;
  color: #1b8291;
  margin-bottom: 16px;
  line-height: 1.2;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.2s forwards;
}

.section-subtitle {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.4s forwards;
}

.industries-view-all-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 24px;
  background: white;
  border: 2px solid #1b8291;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #01002e;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.6s forwards;
  white-space: nowrap;
  text-decoration: none;
}

.industries-view-all-btn:hover {
  border-color: #1b8291;
  color: #1b8291;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
}

.industries-view-all-btn i {
  transition: transform 0.3s ease;
}

.industries-view-all-btn:hover i {
  transform: translateX(4px);
}

.mobile-view-all {
  display: none;
}

.desktop-view-all {
  display: flex;
}

.industries-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 20px;
  margin: 0 -40px;
  padding-left: 40px;
  padding-right: 40px;
  /* Hide scrollbar on desktop */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.industries-scroll-container::-webkit-scrollbar {
  display: none; /* WebKit */
}

.industries-grid {
  display: flex;
  gap: 24px;
  padding-bottom: 10px;
}

.industry-card {
  min-width: 280px;
  width: 280px;
  height: 280px;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.industry-card:hover {
  transform: translateY(-8px);
}

.industries-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.industries-card-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

.industries-card-logo i {
  font-size: 8px;
}

.industries-card-content {
    color: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-main {
  text-align: left;
}

.industry-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.industry-description {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 20px;
}



/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-aos] {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .industries-section {
    padding: 40px 0;
  }

  .industries-container {
    padding: 0 16px;
  }

  .industries-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
  }

  .section-label-container {
    width: 100%;
  }

  .section-title {
    font-size: 32px;
  }

  .desktop-view-all {
    display: none;
  }

  .mobile-view-all {
    display: flex;
  }

  .industries-scroll-container {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    /* Show scrollbar on mobile */
    scrollbar-width: thin;
    -ms-overflow-style: auto;
  }

  .industries-scroll-container::-webkit-scrollbar {
    display: block;
    height: 4px;
  }

  .industries-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
  }

  .industries-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
  }

  .industry-card {
    min-width: 240px;
    width: 240px;
    height: 240px;
    padding: 20px;
  }

  .industry-name {
    font-size: 18px;
  }

  .industry-description {
    font-size: 13px;
  }
}

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

  .section-subtitle {
    font-size: 14px;
  }

  .industry-card {
    min-width: 220px;
    width: 220px;
    height: 220px;
    padding: 18px;
  }

  .industry-name {
    font-size: 16px;
  }

  .industry-description {
    font-size: 12px;
  }

  .card-link {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  .industry-card {
    min-width: 320px;
    width: 320px;
    height: 320px;
    padding: 28px;
  }

  .industry-name {
    font-size: 22px;
  }

  .industry-description {
    font-size: 15px;
  }
}

/* Smooth scroll behavior */
.industries-scroll-container {
  scroll-behavior: smooth;
}

/* Card entrance animations */
.industry-card:nth-child(1) {
  animation-delay: 0.1s;
}
.industry-card:nth-child(2) {
  animation-delay: 0.2s;
}
.industry-card:nth-child(3) {
  animation-delay: 0.3s;
}
.industry-card:nth-child(4) {
  animation-delay: 0.4s;
}
.industry-card:nth-child(5) {
  animation-delay: 0.5s;
}
.industry-card:nth-child(6) {
  animation-delay: 0.6s;
}
.industry-card:nth-child(7) {
  animation-delay: 0.7s;
}
.industry-card:nth-child(8) {
  animation-delay: 0.8s;
}

/* Hover effects */
.industry-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.industry-card:hover::before {
  opacity: 1;
}

/* industries Section Ends */


/* Proposal Form Starts*/


        @font-face {
        font-family: 'Absans-Regular';
        src: url('fonts/Absans-Regular.woff2') format('woff2'),
             url('fonts/Absans-Regular.otf') format('opentype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
        }


        /* Main Section */
        .proposal-section {
            font-family: Absans-Regular, apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #f3fffe 0%, #dcfffd 50%, #1b8291 100%);
            padding: 48px 16px;
        }

        .proposal-container {
            max-width: 1480px;
            margin: 0 auto;
        }

        .proposal-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
            align-items: start;
        }

        @media (min-width: 1024px) {
            .proposal-grid {
                grid-template-columns: 1fr 1fr;
                gap: 64px;
            }
        }

        .left-content {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .proposal-header {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .contact-sales {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .title-section {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .proposal-main-title {
            font-size: 48px;
            font-weight: bold;
            color: #111827;
            font-style: italic;
        }

        @media (min-width: 640px) {
            .proposal-main-title {
                font-size: 60px;
            }
        }

        @media (min-width: 1024px) {
            .proposal-main-title {
                font-size: 72px;
            }
        }

        .proposal-description {
            font-size: 18px;
            color: #374151;
            max-width: 384px;
        }

        .partners {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .partner-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 24px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .partner-row::-webkit-scrollbar {
            display: none;
        }

        .partner-logo {
            flex: 0 0 auto;
        }

        .partner-logo img {
            width: 100px;
            height: 100px;
            object-fit: contain;
        }

        .stats-section {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .stats-title {
            font-size: 20px;
            font-weight: 600;
            color: #111827;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

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

        .stat-card {
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 30px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 8px;
        }

        .stat-text {
            font-size: 14px;
            color: #6b7280;
        }

        .form-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            padding: 24px;
        }

        @media (min-width: 640px) {
            .form-container {
                padding: 32px;
            }
        }

        .form-title {
            font-size: 20px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 24px;
        }

        .form {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        @media (min-width: 640px) {
            .form-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.2s;
            outline: none;
        }

        .form-input:focus {
            border-color: transparent;
            box-shadow: 0 0 0 2px #1b8291;
        }

        .form-input.error {
            border-color: #ef4444;
        }

        .form-textarea {
            resize: none;
            min-height: 100px;
        }

        .error-message {
            color: #ef4444;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .country-dropdown {
            position: relative;
        }

        .country-button {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background: white;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.2s;
            outline: none;
        }

        .country-button:focus {
            border-color: transparent;
            box-shadow: 0 0 0 2px #1b8291;
        }

        .country-display {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .country-flag {
            font-size: 18px;
        }

        .chevron {
            width: 20px;
            height: 20px;
            color: #9ca3af;
            transition: transform 0.2s;
        }

        .chevron.rotate {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            z-index: 50;
            width: 100%;
            margin-top: 4px;
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            max-height: 240px;
            overflow: hidden;
            display: none;
        }

        .dropdown-menu.show {
            display: block;
        }

        .search-container {
            padding: 12px;
            border-bottom: 1px solid #e5e7eb;
        }

        .search-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: #9ca3af;
        }

        .search-input {
            width: 100%;
            padding: 8px 16px 8px 40px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            outline: none;
        }

        .search-input:focus {
            border-color: #1b8291;
            box-shadow: 0 0 0 1px #1b8291;
        }

        .clear-search {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            padding: 4px;
            display: none;
        }

        .clear-search.show {
            display: block;
        }

        .clear-search:hover {
            color: #6b7280;
        }

        .country-list {
            max-height: 192px;
            overflow-y: auto;
        }

        .country-list::-webkit-scrollbar {
            width: 6px;
        }

        .country-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        .country-list::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        .country-list::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        .country-option {
            width: 100%;
            padding: 12px 16px;
            text-align: left;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .country-option:hover {
            background: #f9fafb;
        }

        .country-name {
            flex: 1;
        }

        .country-code {
            font-size: 14px;
            color: #6b7280;
        }

        .no-results {
            padding: 12px 16px;
            color: #6b7280;
            text-align: center;
        }

        .phone-container {
            display: flex;
        }

        .phone-prefix {
            display: flex;
            align-items: center;
            padding: 12px;
            border: 1px solid #d1d5db;
            border-right: none;
            border-radius: 8px 0 0 8px;
            background: #f9fafb;
            min-width: 80px;
        }

        .phone-prefix-flag {
            font-size: 18px;
            margin-right: 4px;
        }

        .phone-prefix-code {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
        }

        .phone-input {
            flex: 1;
            border-radius: 0 8px 8px 0;
            border-left: none;
        }

        .select-wrapper {
            position: relative;
        }

        .form-select {
            width: 100%;
            padding: 12px 40px 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background: white;
            font-size: 16px;
            color: #6b7280;
            outline: none;
            appearance: none;
            cursor: pointer;
        }

        .form-select:focus {
            border-color: transparent;
            box-shadow: 0 0 0 2px #1b8291;
        }

        .select-arrow {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            color: #01002e;
            pointer-events: none;
        }

        .submit-button {
            background: linear-gradient(135deg, #1b8291 0%, #01002e 100%);
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 1.5rem;
            border-radius: 50px;
            font-weight: 500;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .submit-button:hover {
            opacity: 0.9;
        }

        .submit-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .legal-text {
            font-size: 12px;
            color: #6b7280;
            text-align: center;
        }

        .legal-link {
            color: inherit;
            text-decoration: underline;
        }

        .legal-link:hover {
            color: #374151;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            padding: 32px;
            max-width: 400px;
            width: 100%;
            position: relative;
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }

        .modal-overlay.show .modal-content {
            transform: scale(1);
        }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            color: #1b8291;
            cursor: pointer;
            padding: 4px;
            transition: color 0.2s;
        }

        .modal-close:hover {
            color: #6b7280;
        }

        .modal-header {
            text-align: center;
            margin-bottom: 32px;
        }

        .modal-icon {
            width: 64px;
            height: 64px;
            background: #dbeafe;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }

        .modal-icon svg {
            width: 50px;
            height: 50px;
            color: #2563eb;
        }

        .modal-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 8px;
        }

        .modal-subtitle {
            color: #6b7280;
            margin-bottom: 4px;
        }

        .modal-email {
            font-weight: 500;
            color: #111827;
            word-break: break-all;
        }

        .otp-container {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 24px;
        }

        .otp-input {
            width: 48px;
            height: 48px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            border: 2px solid #d1d5db;
            border-radius: 8px;
            outline: none;
            transition: border-color 0.2s;
        }

        .otp-input:focus {
            border-color: #1b8291;
        }

        .otp-actions {
            text-align: center;
            margin-top: 24px;
        }

        .otp-resend {
            color: #1b8291;
            background-color: transparent;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
        }

        .otp-resend:hover {
            text-decoration: underline;
        }

        .otp-resend:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .success-icon {
            width: 80px;
            height: 80px;
            background: #dcfce7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            position: relative;
        }

        .success-icon-inner {
            width: 64px;
            height: 64px;
            background: #22c55e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }

        .success-icon svg {
            width: 32px;
            height: 32px;
            color: white;
        }

        .confetti {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: bounce 2s infinite;
        }

        .confetti-1 {
            background: #fbbf24;
            top: -8px;
            left: -8px;
        }

        .confetti-2 {
            background: #3b82f6;
            top: -4px;
            right: -12px;
            animation-delay: 0.1s;
        }

        .confetti-3 {
            background: #ef4444;
            bottom: -8px;
            left: -12px;
            animation-delay: 0.2s;
        }

        .confetti-4 {
            background: #22c55e;
            bottom: -4px;
            right: -8px;
            animation-delay: 0.3s;
        }

        .success-details {
            background: linear-gradient(135deg, #dcfce7 0%, #dbeafe 100%);
            padding: 16px;
            border-radius: 8px;
            margin: 24px 0;
        }

        .success-details-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #166534;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .success-details-list {
            font-size: 14px;
            color: #6b7280;
            list-style: none;
            padding: 0;
        }

        .success-details-list li {
            margin-bottom: 4px;
        }

        .success-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .success-button-primary {
            background: linear-gradient(135deg, #1b8291 0%, #01002e 100%);
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .success-button-primary:hover {
            opacity: 0.9;
        }

        .success-button-secondary {
            border: 2px solid #1b8291;
            color: #1b8291;
            background: white;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .success-button-secondary:hover {
            background: #1b8291;
            color: white;
        }

        .success-footer {
            font-size: 12px;
            color: #9ca3af;
            text-align: center;
            margin-top: 24px;
        }

        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid white;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 640px) {
            .proposal-section {
                padding: 24px 16px;
            }
            
            .main-title {
                font-size: 36px;
            }
            
            .form-container {
                padding: 20px;
            }

            .partner-row {
                flex-wrap: wrap;
            }

            .modal-content {
                padding: 24px;
            }

            .otp-input {
                width: 40px;
                height: 40px;
                font-size: 18px;
            }
        }


/*Proposal Form Ends*/

/* Footer Section Starts */
    @font-face {
    font-family: 'digitype-studio-mainlux-light';
    src: url('fonts/digitype-studio-mainlux-light.otf') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
     }

        .footer {
            font-family: digitype-studio-mainlux-light , apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-image: url(assets/images/footer-background.png);
            background-size: cover;
            background-position: center;
            border-top: 1px solid #000000;
            padding: 3rem 1rem 2rem;
        }

        .footer-container {
            max-width: 1350px;
            margin: 0 auto;
        }

        .footer-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .footer-left {
            display: flex;
            flex-direction: column;
            margin-right: 100px;
        }

        .logo img {
            width: 250px;
            height: 50px;
            margin-bottom: 1rem;
        }

        .tagline {
            color: #6b7280;
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
            max-width: 280px;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .social-link {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: background-color 0.2s;
        }

        .social-link img {
            width: 24px;
            height: 24px;
        }

        .social-link:hover {
            background-color: #e5e7eb;
        }

        .partner-logos {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .partner-logo img {
            width: 100%;
            height: auto;
            max-height: 50px;
            object-fit: contain;
        }

        .footer-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1.5rem;
        }

        .link-column h3 {
            font-size: 1rem;
            font-weight: 600;
            color: #1b8291;
            margin-bottom: 1rem;
        }

        .link-column ul {
            list-style: none;
        }

        .link-column li {
            margin-bottom: 0.75rem;
        }

        .link-column a {
            color: #01002e;
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.2s;
            display: flex;
            align-items: center;
        }

        .link-column a:hover {
            color: #1b8291;
        }

        .new-badge {
            background-color: #1b8291;
            color: #fff;
            font-size: 0.75rem;
            padding: 0.125rem 0.375rem;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-weight: 500;
        }

        .arrow-icon {
            margin-left: 0.25rem;
            font-size: 0.75rem;
        }

        .footer-bottom {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding-top: 2rem;
            border-top: 1px solid #e5e7eb;
            font-size: 0.875rem;
            color: #1b8291;
            gap: 1rem;
        }

        .footer-bottom-left {
            color: #01002e;
            font-size: 1rem;
            justify-self: start;
        }

        .footer-bottom-center {
            justify-self: center;
        }

        .footer-bottom-center img {
            height: 32px;
            width: auto;
        }

        .footer-bottom-right {
            font-size: 0.875rem;
            justify-self: end;
        }

        .footer-bottom-links {
            display: flex;
            gap: 2rem;
        }

        .footer-bottom-links a {
            color: #1b8291;
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-bottom-links a:hover {
            color: #01002e;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .footer {
                padding: 2rem 1rem 1.5rem;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .footer-links {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 1.5rem;
            }

            .partner-logos {
                margin-top: 2rem;
                order: 2;
            }

            .footer-bottom {
                grid-template-columns: 1fr;
                gap: 1rem;
                text-align: center;
            }

            .footer-bottom-left,
            .footer-bottom-center,
            .footer-bottom-right {
                justify-self: center;
            }

            .footer-bottom-links {
                gap: 1rem;
            }

            .tagline {
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .footer-links {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 1rem;
            }

            .social-links {
                justify-content: center;
            }

            .footer-bottom-links {
                flex-direction: row;
                gap: 1rem;
            }
        }

/* Footer Section Ends */