:root {



    /* Enterprise Dark Theme */



    --color-bg: #0b0c10;



    /* Deep Charcoal */



    --color-surface: #1f2833;



    /* Lighter Charcoal */



    --color-primary: #66fcf1;



    /* Electric Blue */



    --color-secondary: #45a29e;



    /* Muted Cyan */



    --color-text-main: #c5c6c7;



    /* Light Gray */



    --color-text-heading: #ffffff;



    /* White */



    --color-accent: #66fcf1;







    /* Spacing */



    --spacing-xs: 0.5rem;



    --spacing-sm: 1rem;



    --spacing-md: 2rem;



    --spacing-lg: 4rem;



    --spacing-xl: 8rem;







    /* Typography - Fluid */



    --font-size-sm: clamp(0.8rem, 1vw + 0.5rem, 1rem);



    --font-size-base: clamp(1rem, 1.2vw + 0.5rem, 1.2rem);



    --font-size-md: clamp(1.2rem, 1.5vw + 0.8rem, 1.5rem);



    --font-size-lg: clamp(1.5rem, 2vw + 1rem, 2.5rem);



    --font-size-xl: clamp(2.5rem, 5vw + 1rem, 5rem);



    --font-main: 'Nunito', sans-serif;







    /* Borders & Glassmorphism */



    --radius-sm: 4px;



    --radius-md: 8px;



    --radius-lg: 16px;



    --glass-bg: rgba(31, 40, 51, 0.7);



    --glass-border: rgba(102, 252, 241, 0.1);



    --shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.5);



    --shadow-glow: 0 0 20px rgba(102, 252, 241, 0.15);



}



@media (max-width: 768px) {

    :root {

        --spacing-md: 1.5rem;

        --spacing-lg: 2.5rem;

        --spacing-xl: 4rem;

    }

}







*,



*::before,



*::after {



    box-sizing: border-box;



    margin: 0;



    padding: 0;



}







body {



    background-color: var(--color-bg);



    color: var(--color-text-main);



    font-family: var(--font-main);



    font-size: var(--font-size-base);



    line-height: 1.6;



    overflow-x: hidden;



}







h1,



h2,



h3,



h4,



h5,



h6 {



    color: var(--color-text-heading);



    line-height: 1.2;



    margin-bottom: var(--spacing-sm);



    font-weight: 700;



}







h1 {



    font-size: var(--font-size-xl);



}







h2 {



    font-size: var(--font-size-lg);



}







h3 {



    font-size: var(--font-size-md);



}







a {



    color: var(--color-primary);



    text-decoration: none;



    transition: color 0.3s ease;



}







a:hover {



    color: var(--color-secondary);



}



:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 4px;

}



.skip-link {

    position: absolute;

    top: -40px;

    left: 0;

    background: var(--color-primary);

    color: var(--color-bg);

    padding: 8px;

    z-index: 2000;

    transition: top 0.3s;

}



.skip-link:focus {

    top: 0;

}







img {



    max-width: 100%;



    display: block;



}







/* Utilities */



.container {



    width: 90%;



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 var(--spacing-sm);



}







.btn {



    display: inline-block;



    padding: var(--spacing-sm) var(--spacing-md);



    background-color: transparent;



    border: 2px solid var(--color-primary);



    color: var(--color-primary);



    font-weight: 600;



    text-transform: uppercase;



    letter-spacing: 1px;



    transition: all 0.3s ease;



    cursor: pointer;



    border-radius: var(--radius-sm);



    font-size: 0.9rem;



}







.btn:hover {



    background-color: var(--color-primary);



    color: var(--color-bg);



    box-shadow: 0 0 15px var(--color-primary);



}







.btn-primary {



    background-color: var(--color-primary);



    color: var(--color-bg);



}







.btn-primary:hover {



    background-color: transparent;



    color: var(--color-primary);



}







input,



textarea {



    width: 100%;



    padding: var(--spacing-sm);



    background-color: var(--color-surface);



    border: 1px solid var(--glass-border);



    color: var(--color-text-main);



    border-radius: var(--radius-sm);



    font-family: inherit;



    margin-bottom: var(--spacing-sm);



}







input:focus,



textarea:focus {



    outline: none;



    border-color: var(--color-primary);



    box-shadow: 0 0 8px rgba(102, 252, 241, 0.3);



}







/* Header */



header {



    position: sticky;



    top: 0;



    z-index: 1000;



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    background-color: rgba(11, 12, 16, 0.85);



    /* Darker glass for better contrast */



    border-bottom: 1px solid var(--glass-border);



    padding: var(--spacing-sm) 0;



}







nav {



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.logo {



    display: flex;



    align-items: center;



}







.logo img {



    height: 74px;



    /* Increased for visibility */



    width: auto;



    object-fit: contain;



}







.nav-links {



    display: flex;



    gap: var(--spacing-md);



    list-style: none;



    margin-left: auto;



}







.btn-signin {

    margin-left: var(--spacing-md);

    padding: 0.5rem 1.2rem;

    font-size: 0.85rem;

    border-radius: var(--radius-md);

    white-space: nowrap;

}



@media (max-width: 768px) {

    .nav-right {

        gap: var(--spacing-sm);

    }



    .btn-signin {

        padding: 0.4rem 0.8rem;

        font-size: 0.75rem;

    }

}







.nav-links a {



    color: var(--color-text-main);



    font-weight: 500;



}







.nav-links a:hover,



.nav-links a.active {



    color: var(--color-primary);



}







.hamburger {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

    background: none;

    border: none;

    padding: 0;

    outline: none;

    appearance: none;

    -webkit-appearance: none;

}







.hamburger span {



    width: 25px;



    height: 3px;



    background-color: var(--color-primary);



    transition: all 0.3s ease;



    transform-origin: left;



}







/* Mobile Menu */



@media (max-width: 768px) {



    .nav-links {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background-color: var(--color-bg);

        flex-direction: column;

        padding: var(--spacing-md);

        text-align: center;

        border-bottom: 1px solid var(--glass-border);

        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

        /* Hidden */

        transition: clip-path 0.4s ease-in-out;

        z-index: 1001;

        /* Ensure menu is above other content */

    }



    .nav-links.active {

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    }



    .hamburger {

        display: flex;

        position: relative;

        /* Ensure z-index works */

        z-index: 1002;

        /* Ensure hamburger is above menu and other elements */

    }







    .hamburger.open span:first-child {



        transform: rotate(45deg);



    }







    .hamburger.open span:nth-child(2) {



        opacity: 0;



    }







    .hamburger.open span:last-child {



        transform: rotate(-45deg);



    }



}







/* Hero Section */



.hero {



    min-height: 80vh;



    display: flex;



    align-items: center;



    /* Electric Blue Gradient */



    background: linear-gradient(135deg, var(--color-bg) 20%, rgba(102, 252, 241, 0.15) 100%);



    position: relative;



    overflow: hidden;



    padding: var(--spacing-lg) 0;



}







/* Hero Headline Alignment - Removed */







.hero h1 {



    font-size: 3.5rem;



    /* Restored to larger size */



    margin-bottom: var(--spacing-md);



    background: linear-gradient(to right, #fff, var(--color-primary));



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    line-height: 1.2;



}







@media (max-width: 768px) {



    .hero h1 {



        font-size: 2.5rem;



    }



}







/* Sliding Text Animation */



.sliding-text-container {



    height: 40px;



    overflow: hidden;



    margin-bottom: var(--spacing-md);



    position: relative;



    /* width removed to allow full width */



}







.sliding-text-wrapper {



    animation: slide-up 10s infinite;



}







.slide-item {



    height: 40px;



    display: flex;



    align-items: center;



    font-size: 2rem;



    /* Increased size */



    font-weight: 600;



    color: var(--color-primary);

}



@media (max-width: 768px) {



    .sliding-text-container,

    .slide-item {

        height: 30px;

        /* Reduced height for mobile */

    }



    .slide-item {

        font-size: 1.2rem;

        /* Scaled down font size */

    }



    /* Override animation for mobile with new height */

    @keyframes slide-up-mobile {



        0%,

        20% {

            transform: translateY(0);

        }



        25%,

        45% {

            transform: translateY(-30px);

        }



        50%,

        70% {

            transform: translateY(-60px);

        }



        75%,

        95% {

            transform: translateY(-90px);

        }



        100% {

            transform: translateY(-120px);

        }

    }



    .sliding-text-wrapper {

        animation: slide-up-mobile 10s infinite;

    }

}







@keyframes slide-up {







    0%,



    20% {



        transform: translateY(0);



    }







    25%,



    45% {



        transform: translateY(-40px);



    }







    50%,



    70% {



        transform: translateY(-80px);



    }







    75%,



    95% {



        transform: translateY(-120px);



    }







    100% {



        transform: translateY(-160px);



    }



}







.hero-container {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: var(--spacing-lg);



}







.hero-content {



    flex: 1;



    max-width: 650px;



}







/* Old h1 style removed/merged into .hero-headline .hero h1 above */







.hero p {



    font-size: var(--font-size-md);



    margin-bottom: var(--spacing-lg);



    color: var(--color-text-main);



}







.hero-image {



    flex: 1;



    display: flex;



    justify-content: center;



    align-items: center;



    animation: float 6s ease-in-out infinite;



}







.hero-image img {



    max-width: 100%;



    height: auto;



    filter: drop-shadow(0 10px 20px rgba(102, 252, 241, 0.2));



}







@keyframes float {



    0% {



        transform: translateY(0px);



    }







    50% {



        transform: translateY(-20px);



    }







    100% {



        transform: translateY(0px);



    }



}







@media (max-width: 900px) {



    .hero-container {



        flex-direction: column-reverse;



        text-align: center;



    }







    .hero-content {



        max-width: 100%;



    }



}







/* How it Works */



.how-it-works {



    padding: var(--spacing-xl) 0;



}







.how-it-works h2 {



    text-align: center;



    margin-bottom: var(--spacing-lg);



}







.steps {



    display: flex;



    justify-content: space-between;



    gap: var(--spacing-md);



    flex-wrap: wrap;



}







.step {



    flex: 1;



    min-width: 250px;



    background-color: var(--color-surface);



    padding: var(--spacing-md);



    border-radius: var(--radius-md);



    border: 1px solid var(--glass-border);



    opacity: 0;



    transform: translateY(30px);



    transition: opacity 0.6s ease, transform 0.6s ease;



    text-align: center;



}







.step.visible {



    opacity: 1;



    transform: translateY(0);



}







.step-number {



    font-size: 3rem;



    font-weight: 700;



    color: rgba(102, 252, 241, 0.1);



    margin-bottom: var(--spacing-sm);



}







/* Services Section - Container Queries */



/* Services Section */



.services {



    padding: var(--spacing-xl) 0;



    background-color: #121418;



    container-type: inline-size;



    container-name: services;



}







.services h2 {



    text-align: center;



    margin-bottom: var(--spacing-md);



    font-size: 2.5rem;



    color: var(--color-primary);



}







.services p {



    text-align: justify;



    max-width: 800px;



    margin: 0 auto var(--spacing-lg) auto;



    color: var(--color-text-main);



    line-height: 1.8;



    font-size: 1.1rem;



}







.services-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));



    gap: var(--spacing-md);



    justify-content: center;



}







.service-card {



    background-color: var(--color-surface);



    padding: var(--spacing-md);



    border-radius: var(--radius-md);



    border: 1px solid var(--glass-border);



    transition: transform 0.3s ease, box-shadow 0.3s ease;



    display: flex;



    flex-direction: column;



    justify-content: center;



    position: relative;



    /* Context for icon positioning */



}







.service-card h3 {



    margin-bottom: var(--spacing-sm);



    /* Ensure space below heading */



    padding-right: 48px;



    /* Room for icon */



}







.service-card p {



    text-align: center;



    margin-bottom: 0;



}







.service-card-icon {



    position: absolute;



    top: 24px;



    /* Align visually with heading */



    right: 24px;



    width: 32px;



    height: 32px;



    color: var(--color-secondary);



    opacity: 0.8;



    transition: all 0.3s ease;



}







@container services (max-width: 600px) {



    .services-grid {



        gap: var(--spacing-sm);



    }







    .service-card {



        padding: var(--spacing-sm);



    }







    .service-card-icon {



        top: 16px;



        right: 16px;



        width: 24px;



        height: 24px;



    }



}







.service-card:hover {



    transform: translateY(-5px);



    box-shadow: var(--shadow-soft);



    border-color: var(--color-primary);



}







.service-card:hover .service-card-icon {



    color: var(--color-primary);



    transform: scale(1.1) rotate(5deg);



}







.service-card:hover {



    transform: translateY(-5px);



    box-shadow: var(--shadow-glow);



    border-color: var(--color-primary);



}







/* Dashboard UI */



.page-header {



    padding: var(--spacing-lg) 0;



    text-align: center;



    background: linear-gradient(to bottom, var(--glass-bg), transparent);



}







.dashboard-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));



    gap: var(--spacing-md);



    padding-bottom: var(--spacing-xl);

}



.dash .blog-grid {

    display: grid;

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

    /* Force single row for 3 items */

    gap: var(--spacing-md);

    margin-top: var(--spacing-lg);

}



.dashboard-table-container {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    margin-bottom: var(--spacing-lg);

    background: var(--color-surface);

    border-radius: var(--radius-md);

    border: 1px solid var(--glass-border);

}







.dash-card {



    background-color: var(--color-surface);



    padding: var(--spacing-md);



    border-radius: var(--radius-md);



    border: 1px solid var(--glass-border);



}







.status-item {



    display: flex;



    justify-content: space-between;



    padding: var(--spacing-sm) 0;



    border-bottom: 1px solid rgba(255, 255, 255, 0.05);



}







.status {



    font-size: 0.8rem;



    padding: 2px 8px;



    border-radius: 12px;



    font-weight: 600;



}







.status.complete {



    background-color: rgba(102, 252, 241, 0.2);



    color: var(--color-primary);



}







.status.in-progress {



    background-color: rgba(255, 206, 86, 0.2);



    color: #ffce56;



}







.status.pending {



    background-color: rgba(255, 99, 132, 0.2);



    color: #ff6384;



}







.country-list {



    display: flex;



    flex-wrap: wrap;



    gap: var(--spacing-xs);



}







.country-tag {



    background-color: var(--color-bg);



    padding: 5px 10px;



    border-radius: 20px;



    font-size: 0.9rem;



    border: 1px solid var(--glass-border);



}







.progress-wrapper {



    margin-bottom: var(--spacing-md);



}







.progress-label {



    display: flex;



    justify-content: space-between;



    font-size: 0.9rem;



    margin-bottom: 5px;



}







.progress-bar {



    width: 100%;



    height: 8px;



    background-color: var(--color-bg);



    border-radius: 4px;



    overflow: hidden;



}







.progress-fill {



    height: 100%;



    background-color: var(--color-primary);



    border-radius: 4px;



    transition: width 1s ease-in-out;



}







.lead-text {



    font-size: 0.8rem;



    color: var(--color-text-main);



    margin-top: 5px;



    text-align: right;



    font-style: italic;



}







/* Contact Form */



.contact-section {



    padding: var(--spacing-lg) 0;



    display: flex;



    justify-content: center;



}







.contact-wrapper {

    display: flex;

    justify-content: center;

    gap: var(--spacing-xl);

    max-width: 1200px;

    margin: 0 auto;

    flex-wrap: wrap;

}



.contact-form-container {

    flex: 1;

    min-width: 300px;

    background-color: var(--color-surface);

    padding: var(--spacing-lg);

    border-radius: var(--radius-md);

    border: 1px solid var(--glass-border);

    box-shadow: var(--shadow-soft);

}



.contact-info-container {

    flex: 1;

    min-width: 300px;

    background: rgba(11, 12, 16, 0.6);

    padding: var(--spacing-lg);

    border-radius: var(--radius-md);

    border: 1px solid rgba(102, 252, 241, 0.15);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.contact-info-container h3 {

    color: var(--color-primary);

    font-size: 1.8rem;

    margin-bottom: var(--spacing-lg);

    border-bottom: 2px solid rgba(102, 252, 241, 0.2);

    padding-bottom: var(--spacing-sm);

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-lg);

}



.contact-item {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    padding: var(--spacing-md);

    background: rgba(255, 255, 255, 0.03);

    border-radius: var(--radius-sm);

    transition: transform 0.3s ease, background 0.3s ease;

    border: 1px solid transparent;

}



.contact-item:hover {

    transform: translateX(10px);

    background: rgba(102, 252, 241, 0.05);

    border-color: rgba(102, 252, 241, 0.1);

}



.icon-box {

    width: 50px;

    height: 50px;

    background: rgba(102, 252, 241, 0.1);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.2rem;

    color: var(--color-primary);

    box-shadow: 0 0 10px rgba(102, 252, 241, 0.2);

}



.info-text h4 {

    color: var(--color-text-light);

    font-size: 0.9rem;

    margin-bottom: 2px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.info-text p {

    color: var(--color-text-main);

    font-size: 1.1rem;

    font-weight: 600;

}



@media (max-width: 768px) {

    .contact-wrapper {

        flex-direction: column-reverse;

        /* Form on top, info below (or vice versa if preferred, usually info first on mobile is good, but let's stick to standard flow or reverse if form is priority) */

        /* Let's keep standard column */

        flex-direction: column;

        gap: var(--spacing-lg);

        padding: 0 var(--spacing-sm);

    }



    .contact-form-container,

    .contact-info-container {

        width: 100%;

        min-width: auto;

        /* Remove min-width constraint */

        padding: var(--spacing-md);

    }



    .contact-info-container h3 {

        font-size: 1.5rem;

        text-align: center;

    }

}







.form-group {



    margin-bottom: var(--spacing-md);



}







.form-group label {



    display: block;



    margin-bottom: var(--spacing-xs);



    font-weight: 600;



}







/* Footer */



/* Map Section */

.map-section {

    padding-bottom: var(--spacing-xl);

}



.map-container {

    width: 100%;

    border-radius: var(--radius-lg);

    overflow: hidden;

    border: 1px solid var(--glass-border);

    box-shadow: var(--shadow-glow);

    background: rgba(11, 12, 16, 0.6);

    padding: var(--spacing-sm);

}



.map-container iframe {

    display: block;

    border-radius: var(--radius-md);

    filter: grayscale(20%) contrast(1.2) invert(90%) hue-rotate(180deg);

    /* Dark mode map styling */

}



/* Main Footer */

.main-footer {

    background-color: var(--color-bg);

    padding: var(--spacing-xl) 0 var(--spacing-md);

    border-top: 1px solid var(--glass-border);

    margin-top: auto;

    font-size: 0.95rem;

    color: var(--color-text-main);

}



.footer-grid {

    display: grid;

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

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-xl);

}



@media (max-width: 1024px) {

    .footer-grid {

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

        gap: var(--spacing-md);

    }

}



@media (max-width: 600px) {

    .footer-grid {

        grid-template-columns: 1fr;

    }

}



.footer-col h3 {

    color: var(--color-primary);

    font-size: 1.2rem;

    margin-bottom: var(--spacing-md);

    position: relative;

    padding-bottom: var(--spacing-xs);

    display: inline-block;

}



.footer-col h3::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 30px;

    height: 2px;

    background-color: var(--color-secondary);

}



.footer-logo {

    max-width: 150px;

    margin-bottom: var(--spacing-md);

}



.brand-col p {

    line-height: 1.6;

    color: var(--color-text-main);

    font-weight: 400;

}



.links-col ul {

    list-style: none;

    padding: 0;

}



.links-col ul li {

    margin-bottom: var(--spacing-xs);

}



.links-col ul li a {

    color: var(--color-text-main);

    text-decoration: none;

    transition: all 0.3s ease;

    font-weight: 400;

}



.links-col ul li a:hover {

    color: var(--color-primary);

    padding-left: 5px;

}



.contact-col p {

    margin-bottom: var(--spacing-sm);

    display: flex;

    align-items: center;

    gap: 10px;

}



.contact-col i {

    color: var(--color-primary);

    width: 20px;

}



.social-icons {

    display: flex;

    gap: var(--spacing-md);

}



.social-icons a {

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.05);

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    color: var(--color-primary);

    text-decoration: none;

    transition: all 0.3s ease;

    border: 1px solid var(--glass-border);

}



.social-icons a:hover {

    background: var(--color-primary);

    color: var(--color-bg);

    transform: translateY(-3px);

    box-shadow: 0 0 15px rgba(102, 252, 241, 0.4);

}



.footer-bottom {

    text-align: center;

    padding-top: var(--spacing-md);

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    font-size: 0.9rem;

    color: #666;

    opacity: 1;

}







/* WhatsApp Float */

.whatsapp-float {

    position: fixed;

    bottom: 25px;

    right: 25px;

    background-color: #25d366;

    color: white;

    padding: 12px 24px;

    border-radius: 50px;

    text-align: center;

    font-size: 16px;

    font-weight: bold;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    z-index: 2000;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    transition: all 0.3s ease;

    border: 2px solid rgba(255, 255, 255, 0.2);

    text-decoration: none;

    width: auto;

    height: auto;

}



.whatsapp-float i {

    font-size: 24px;

}



.whatsapp-float span {

    font-family: 'Nunito', sans-serif;

    letter-spacing: 0.5px;

}



.whatsapp-float:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);

    background-color: #20b85c;

    color: white;

}







/* Utility Classes */



.img-fluid {



    max-width: 100%;



    height: auto;



}







/* Icon Carousel Ribbon */



.icon-carousel {



    background-color: rgba(31, 40, 51, 0.95);



    border-top: 1px solid var(--glass-border);



    border-bottom: 1px solid var(--glass-border);



    padding: 10px 0;



    overflow-x: auto;



    /* Enable horizontal scrolling */



    scroll-snap-type: x mandatory;



    /* Snap behavior */



    scrollbar-width: none;



    /* Hide scrollbar for Firefox */



    -ms-overflow-style: none;



    /* Hide scrollbar for IE/Edge */



    position: relative;



    z-index: 50;



    margin-bottom: var(--spacing-lg);



}







.icon-carousel::-webkit-scrollbar {



    display: none;



    /* Hide scrollbar for Chrome/Safari */



}







/* World Wide Consultant Section */



.consultant-section {



    padding: var(--spacing-xl) 0;



    background-color: var(--color-bg);



}







.consultant-section .btn {



    margin-top: var(--spacing-md);



}







.split-layout {



    display: flex;



    align-items: center;



    gap: var(--spacing-lg);



}







.split-content-left {



    flex: 0 0 60%;



}







.split-content-right {



    flex: 0 0 40%;



    display: flex;



    justify-content: center;



    align-items: center;



    position: relative;



    /* Context for absolute positioning */



}







.split-content-right img {



    border-radius: var(--radius-md);



    box-shadow: var(--shadow-glow);



    border: 1px solid var(--glass-border);



    max-width: 100%;



}







/* Floating Info Box */



.floating-info-box {



    position: absolute;



    bottom: -20px;



    left: -20px;



    background: rgba(11, 12, 16, 0.95);



    border: 1px solid var(--color-primary);



    padding: var(--spacing-sm) var(--spacing-md);



    border-radius: var(--radius-md);



    box-shadow: var(--shadow-glow);



    max-width: 280px;



    z-index: 10;



    backdrop-filter: blur(10px);



    display: flex;



    align-items: center;



    gap: var(--spacing-sm);



}







.floating-info-box p {



    color: var(--color-primary);



    font-weight: 700;



    font-size: 0.9rem;



    margin: 0;



    line-height: 1.4;



}







.floating-info-box::before {



    content: '★';



    /* Simple icon */



    color: var(--color-secondary);



    font-size: 1.2rem;



}







@media (max-width: 900px) {

    .floating-info-box {

        position: absolute;

        bottom: -30px;

        /* Slightly overlap bottom edge */

        left: 50%;

        transform: translateX(-50%);

        width: 90%;

        max-width: 350px;

        margin-top: 0;

        text-align: center;

        justify-content: center;

        padding: var(--spacing-sm);

        font-size: 0.85rem;

    }



    .split-content-right {

        margin-bottom: 40px;

        /* Space for the floating box */

    }

}







@media (max-width: 900px) {



    .split-layout {



        flex-direction: column;



    }







    .split-content-left,



    .split-content-right {



        flex: 0 0 100%;



    }



}











/* Shuffling / Floating Animation */



.carousel-track {



    display: flex;



    justify-content: flex-start;



    gap: var(--spacing-md);



    flex-wrap: nowrap;



    /* No wrapping for horizontal scroll */



    width: max-content;



    padding: 0 var(--spacing-md);



    animation: scroll 40s linear infinite;



    /* Add sliding animation */



}







.carousel-track:hover {



    animation-play-state: paused;



    /* Pause on hover */



}







@keyframes float {



    0% {



        transform: translateY(0px);



    }







    50% {



        transform: translateY(-10px);



    }







    100% {



        transform: translateY(0px);



    }



}







.carousel-icon {



    width: 160px;



    height: 100px;



    display: flex;



    justify-content: center;



    align-items: center;



    flex-shrink: 0;



    overflow: visible;



    position: relative;



    cursor: pointer;



    scroll-snap-align: center;



    /* Per swipe alignment */



}







/* Tooltip/Title always visible */



.carousel-icon::after {



    content: attr(data-title);



    position: absolute;



    bottom: 10px;



    left: 50%;



    transform: translateX(-50%);



    background-color: var(--color-primary);



    color: var(--color-bg);



    padding: 2px 8px;



    border-radius: var(--radius-sm);



    font-size: 0.75rem;



    font-weight: 700;



    white-space: nowrap;



    opacity: 1 !important;



    pointer-events: none;



    transition: all 0.3s ease;



    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);



    z-index: 100;



}







.carousel-icon:hover::after {



    transform: translateX(-50%) scale(1.05);



    background-color: #fff;



    box-shadow: 0 0 10px var(--color-primary);



}







.carousel-icon svg {



    width: 62px;



    height: 62px;



    color: rgba(102, 252, 241, 0.4);



    transform: translateY(-12px);

    transition: all 0.3s ease;

}



@media (max-width: 768px) {

    .carousel-icon {

        width: 100px;

        /* Reduced from 160px */

        height: 80px;

    }



    .carousel-icon svg {

        width: 40px;

        /* Reduced from 62px */

        height: 40px;

    }



    .carousel-icon::after {

        font-size: 0.6rem;

        bottom: 5px;

    }

}



.carousel-icon:hover svg {

    color: var(--color-primary);



    transform: translateY(-18px) scale(1.1);



    filter: drop-shadow(0 0 5px var(--color-primary));



}











@keyframes scroll {



    0% {



        transform: translateX(0);



    }







    100% {



        transform: translateX(-50%);



    }



}







/* Hero Section Styles below... */



.chat-header {



    background-color: var(--color-bg);



    padding: var(--spacing-sm);



    display: flex;



    justify-content: space-between;



    align-items: center;



    border-bottom: 1px solid var(--glass-border);



    font-weight: 600;



}







.chat-header span:last-child {



    cursor: pointer;



    font-size: 1.2rem;



}







.chat-body {



    flex: 1;



    padding: var(--spacing-sm);



    overflow-y: auto;



    display: flex;



    flex-direction: column;



    gap: 10px;



}







.chat-msg {



    padding: 8px 12px;



    border-radius: 12px;



    max-width: 80%;



    font-size: 0.9rem;



}







.chat-msg.bot {



    background-color: var(--color-bg);



    color: var(--color-text-main);



    align-self: flex-start;



    border: 1px solid var(--glass-border);



}







.chat-input {



    padding: var(--spacing-sm);



    background-color: var(--color-bg);



}







.chat-input input {



    margin-bottom: 0;



}







/* Chat Typing Indicator */



.typing-indicator {



    display: inline-flex;



    gap: 4px;



    padding: 8px 12px;



    background-color: var(--color-bg);



    border: 1px solid var(--glass-border);



    border-radius: 12px;



    width: fit-content;



    align-self: flex-start;



}







.typing-indicator span {



    width: 6px;



    height: 6px;



    background-color: var(--color-primary);



    border-radius: 50%;



    animation: bounce 1.4s infinite ease-in-out both;



}







.typing-indicator span:nth-child(1) {



    animation-delay: -0.32s;



}







.typing-indicator span:nth-child(2) {



    animation-delay: -0.16s;



}







@keyframes bounce {







    0%,



    80%,



    100% {



        transform: scale(0);



    }







    40% {



        transform: scale(1);



    }



}







/* About Page Specifics */



.about-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: var(--spacing-md);



    align-items: center;



    margin-bottom: var(--spacing-lg);



}







.about-image .img-placeholder {



    width: 100%;



    height: 300px;



    background-color: var(--color-surface);



    border: 1px solid var(--glass-border);



    display: flex;



    justify-content: center;



    align-items: center;



    color: var(--color-text-main);



    font-weight: 600;



}







@media (max-width: 768px) {



    .about-grid {



        grid-template-columns: 1fr;



    }



}







.mission-values-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: var(--spacing-md);



    margin-top: var(--spacing-lg);



}







.mission-item {



    background-color: var(--color-surface);



    padding: var(--spacing-md);



    border-radius: var(--radius-md);



    border: 1px solid var(--glass-border);



    box-shadow: var(--shadow-soft);



    position: relative;



    overflow: hidden;



}







.mission-icon {



    position: absolute;



    top: var(--spacing-sm);



    right: var(--spacing-sm);



    color: var(--color-primary);



    opacity: 0.15;



    transition: all 0.3s ease;



}







.mission-icon svg {



    width: 64px;



    height: 64px;



}







.mission-item:hover .mission-icon {



    opacity: 0.5;



    transform: scale(1.1) rotate(-5deg);



}







.mission-item h3 {



    color: var(--color-primary);



    margin-bottom: var(--spacing-sm);



    font-size: 1.5rem;



    position: relative;



    z-index: 2;



}







.mission-item p {



    position: relative;



    z-index: 2;



}







@media (max-width: 768px) {



    .mission-values-grid {



        grid-template-columns: 1fr;



    }



}







/* Service Overview Section */



.service-overview {



    padding: var(--spacing-lg) 0;



    max-width: 800px;



    margin: 0 auto;



}







.service-overview h2 {



    color: var(--color-primary);



    margin-bottom: var(--spacing-xs);



    font-size: var(--font-size-lg);



}







.service-overview h3 {



    color: var(--color-text-heading);



    font-size: var(--font-size-md);



    margin-bottom: var(--spacing-md);



    border-bottom: 1px solid var(--glass-border);



    padding-bottom: var(--spacing-xs);



    display: inline-block;



}







.content-block p {



    margin-bottom: var(--spacing-sm);



    color: var(--color-text-main);



    text-align: justify;



    line-height: 1.8;



}







.consultant-overview-section {



    margin-top: var(--spacing-lg);



    padding: var(--spacing-md);



    background-color: var(--color-surface);



    border-radius: var(--radius-md);



    border: 1px solid var(--glass-border);



    box-shadow: var(--shadow-soft);



}







.consultant-overview-section h2 {



    color: var(--color-primary);



    margin-bottom: var(--spacing-md);



    font-size: 2rem;



    text-align: center;



}







.consultant-overview-section p {



    text-align: justify;



    line-height: 1.8;



    color: var(--color-text-main);



}







/* Countries We Serve Slider */



.countries-section {



    padding: var(--spacing-xl) 0;



    background-color: var(--color-bg);



}







.countries-section .section-heading {



    text-align: center;



    color: var(--color-primary);



    margin-bottom: var(--spacing-lg);



    font-size: 2.5rem;



}







.countries-slider {



    width: 100%;



    overflow: hidden;



    padding: 30px 0;



    background: rgba(31, 40, 51, 0.4);



    border-top: 1px solid var(--glass-border);



    border-bottom: 1px solid var(--glass-border);



    position: relative;



}







.countries-track {



    display: flex;



    gap: 60px;



    width: max-content;



    animation: countryScroll 40s linear infinite;



}







@keyframes countryScroll {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}







.country-item {



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 12px;



    min-width: 120px;



}





/* Services Page Tabs */

.service-tabs-section {

    padding: var(--spacing-xl) 0;

    background: var(--color-bg);

}



.tabs-nav {

    display: flex;

    justify-content: center;

    gap: 5px;

    /* Reduced gap */

    flex-wrap: nowrap;

    /* Force single line */

    margin-bottom: 40px;

    margin-top: -140px;

    border-bottom: 2px solid rgba(102, 252, 241, 0.1);

    position: relative;

    overflow-x: auto;

    /* Allow scrolling on very small screens if needed */

    -webkit-overflow-scrolling: touch;

    padding-bottom: 5px;

}



.tab-btn {

    padding: 10px 15px;

    /* Compact padding */

    color: var(--color-text-light);

    font-size: 0.8rem;

    /* Smaller font size */

    font-weight: 700;

    cursor: pointer;

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    border-bottom: 3px solid transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    flex-shrink: 0;

    position: relative;

    background: rgba(255, 255, 255, 0.03);

    border-radius: var(--radius-sm) var(--radius-sm) 0 0;

    margin: 0 5px;

    /* Increased gap between tabs */

    letter-spacing: 0.5px;

    text-transform: uppercase;

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: none;

}



.page-header {

    background: linear-gradient(135deg, rgba(31, 40, 51, 0.95), rgba(11, 12, 16, 0.95)), url('hero-bg.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    height: 40vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    margin-bottom: var(--spacing-lg);

    /* Restored margin */

}



.tab-btn:hover {

    color: var(--color-primary);

    background: rgba(102, 252, 241, 0.1);

    transform: translateY(-2px);

    box-shadow: 0 -5px 15px rgba(102, 252, 241, 0.1);

}



.tab-btn.active {

    color: var(--color-bg);

    /* Dark text on active */

    background: var(--color-primary);

    /* Solid primary color */

    border-bottom: 3px solid var(--color-primary);

    box-shadow: 0 0 20px rgba(102, 252, 241, 0.4);

    transform: translateY(-2px);

}



/* Clean content container */

.tabs-content {

    background: rgba(11, 12, 16, 0.6);

    /* Darker, more contrast */

    padding: var(--spacing-xl);

    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);

    /* Sharp top-left corner to match tab */

    border: 1px solid rgba(102, 252, 241, 0.15);

    min-height: 250px;

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    position: relative;

    max-width: 1000px;

    margin: 0 auto;

}



.tabs-content::before,

.tabs-content::after {

    display: none;

}



.tab-pane {

    display: none;

    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.tab-pane.active {

    display: block;

}



.tab-pane h3 {

    color: var(--color-primary);

    margin-bottom: var(--spacing-md);

    font-size: 2rem;

    display: inline-block;

    position: relative;

    padding-bottom: var(--spacing-xs);

}



.tab-pane h3::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 60px;

    height: 3px;

    background-color: var(--color-secondary);

    border-radius: 2px;

}



.tab-pane p {

    color: #c5c6c7;

    line-height: 1.9;

    text-align: justify;

    font-size: 1.15rem;

    max-width: 900px;

}



/* Why Us Section */

.why-us-section {

    padding: var(--spacing-md) 0;

    /* Reduced from xl */

    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(31, 40, 51, 0.8) 100%);

    text-align: center;

    position: relative;

    z-index: 1;

}



.why-us-content {

    background: rgba(11, 12, 16, 0.6);

    padding: var(--spacing-lg);

    /* Reduced from xl */

    border-radius: var(--radius-lg);

    border: 1px solid rgba(102, 252, 241, 0.15);

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    max-width: 1000px;

    /* Increased width slightly to reduce height */

    margin: 0 auto;

    position: relative;

    overflow: hidden;

}



.why-us-content::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);

}



.why-us-content h2 {

    color: var(--color-primary);

    font-size: 2.5rem;

    margin-bottom: var(--spacing-md);

    text-shadow: 0 0 20px rgba(102, 252, 241, 0.3);

}



.why-us-content p {

    color: var(--color-text-main);

    font-size: 1.2rem;

    line-height: 1.8;

    max-width: 800px;

    margin: 0 auto;

}



@keyframes slideUpFade {

    from {

        opacity: 0;

        transform: translateY(20px);

        filter: blur(5px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

        filter: blur(0);

    }

}



@media (max-width: 768px) {

    .tabs-nav {

        flex-direction: row;

        /* Keep horizontal */

        justify-content: flex-start;

        /* Align start for scrolling */

        overflow-x: auto;

        /* Enable scroll */

        padding-bottom: 10px;

        /* Space for scrollbar */

        margin-bottom: 20px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;

        /* Snap for better feel */

        margin-top: -80px;

        /* Adjust overlap */

    }



    .tab-btn {

        flex: 0 0 auto;

        /* Don't shrink */

        border-radius: var(--radius-sm);

        margin-right: 10px;

        margin-left: 0;

        font-size: 0.8rem;

        padding: 8px 16px;

        background: rgba(255, 255, 255, 0.05);

        border: 1px solid rgba(255, 255, 255, 0.1);

        scroll-snap-align: start;

        border-bottom: none;

        /* Reset */

    }



    .tab-btn.active {

        background: var(--color-primary);

        color: var(--color-bg);

        border: 1px solid var(--color-primary);

        transform: none;

        /* Simplify active state */

        border-bottom: none;

    }

}



/* Compliance Methods Section */

/* Compliance Methods Section */

.compliance-methods-section {

    margin: var(--spacing-xl) 0;

    text-align: center;

}



.compliance-images-grid {

    display: flex;

    justify-content: center;

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-xl);

    flex-wrap: wrap;

}



.compliance-img-col {

    flex: 1;

    /* Distribute space evenly */

    min-width: 250px;

    /* Ensure images don't get too small */

    max-width: 350px;

    /* prevent huge images on large screens */

    height: 350px;

    /* Fixed height for uniformity */



    background: var(--glass-bg);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius-lg);

    overflow: hidden;

    position: relative;



    /* Decent Design: Shadow & Glow */

    box-shadow: var(--shadow-soft);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.compliance-img-col:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 15px 30px rgba(102, 252, 241, 0.2);

    border-color: var(--color-primary);

    z-index: 10;

}



.compliance-img-col::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(11, 12, 16, 0.8) 0%, transparent 50%);

    opacity: 0.6;

    transition: opacity 0.3s ease;

}



.compliance-img-col:hover::after {

    opacity: 0.3;

}



.compliance-img-col img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.compliance-img-col:hover img {

    transform: scale(1.1);

}



/* Text Styling below images */

.compliance-text {

    max-width: 800px;

    margin: 0 auto;

    padding: var(--spacing-lg);

    background: linear-gradient(145deg, rgba(31, 40, 51, 0.4), rgba(11, 12, 16, 0.6));

    border-radius: var(--radius-lg);

    border: 1px solid var(--glass-border);

    backdrop-filter: blur(10px);

    box-shadow: var(--shadow-soft);

    position: relative;

    overflow: hidden;

}



.compliance-text::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--color-primary);

}



.compliance-text p {

    font-size: var(--font-size-md);

    color: var(--color-text-heading);

    line-height: 1.8;

    margin: 0;

    position: relative;

    z-index: 1;

}



@media (max-width: 768px) {

    .compliance-images-grid {

        gap: var(--spacing-sm);

    }



    .compliance-img-col {

        min-width: 100%;

        height: 250px;

    }



    .compliance-text {

        padding: var(--spacing-md);

    }

}



.g-recaptcha {

    margin-bottom: var(--spacing-sm);

}



@media (max-width: 400px) {

    .g-recaptcha {

        transform: scale(0.77);

        -webkit-transform: scale(0.77);

        transform-origin: 0 0;

        -webkit-transform-origin: 0 0;

    }

}



/* WhatsApp Float Icon */

.whatsapp-float {

    position: fixed;

    width: 60px;

    height: 60px;

    bottom: 40px;

    right: 40px;

    background-color: #25d366;

    color: #FFF;

    border-radius: 50px;

    text-align: center;

    font-size: 30px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: all 0.3s ease;

}



.whatsapp-float span {

    display: none;

    /* Hide text, icon only */

}



.whatsapp-float:hover {

    background-color: #128C7E;

    transform: scale(1.1);

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);

}



@media (max-width: 768px) {

    .whatsapp-float {

        width: 45px;

        /* Decrease size for mobile */

        height: 45px;

        bottom: 20px;

        /* Reposition */

        right: 20px;

        font-size: 24px;

    }

}

/* Blog Section on Home Page */
.latest-blogs {
    padding: var(--spacing-lg) 0;
    position: relative;
}

.latest-blogs h2 {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Force single row for 3 items */
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.blog-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--glass-border);
}

.blog-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-date {
    font-size: 0.8rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-xs);
}

.blog-title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-heading);
    line-height: 1.4;
}

.blog-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-md);
}

.read-more {
    margin-top: auto;
    color: var(--color-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-more:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}