/* CSS Reset & Base Styles */
:root {
    --indigo-600: #4f46e5;
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --orange-100: #ffedd5;
    --orange-600: #f97316;
    --blue-100: #dbeafe;
    --blue-600: #2563eb;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --purple-100: #ede9fe;
    --purple-600: #7c3aed;
    --green-100: #d1fae5;
    --green-600: #059669;
    --red-100: #fee2e2;
    --red-600: #dc2626;
    --pink-100: #fce7f3;
    --pink-500: #ec4899;
    --pink-600: #db2777;

    /* === Added Brand Palette === */
    --primary-blue: #5D5FEF;            /* Primary Blue */
    --forest-green: #228B22;            /* Forest Green (Secondary) */
    --forest-green-rich: #2E8B57;       /* Optional richer variant */
    --light-sage: #E0F2E9;              /* Soft background */
    --charcoal-gray: #333333;           /* Text */
    --warm-white: #F8F8F8;              /* Background */
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--gray-800);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Header & Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    z-index: 70;
    border-bottom: 1px solid var(--gray-200);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.logo {
    display: flex;
    align-items: center;

}

nav ul {
    display: flex;
    align-items: left;
    gap: 2rem;
}

nav a {
    color: var(--gray-600);
    transition: color 0.3s;
}
nav a:hover {
    color: var(--indigo-600);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-actions .login-btn {
     font-weight: 500;
}

.nav-actions .demo-btn {
    background-color:#1a4185;
    color: var(--white);
   padding: 0.5rem 1.2rem;
    border-radius: 0.5rem;
    font-weight: 200;
    font-size: 14px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    transition: all 0.3s;
}
.nav-actions .demo-btn:hover {
    background-color:  var(--orange-600);
    transform: scale(1.05);
}

/* Mega Menu */
.mega-menu-container {
    position: relative;
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 1rem;
    width: 100vw;
    max-width: 48rem;
    background-color: var(--white);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translate(-50%, -10px);
    opacity: 0;
    visibility: hidden;
}

.mega-menu-container.active .mega-menu {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: center;
}
.mega-menu-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.mega-menu-products-grid a {
    display: block;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.mega-menu-products-grid a:hover {
    text-decoration: underline;

}
.mega-menu-products-grid p:first-of-type {
    font-weight: 600;
}
.mega-menu-products-grid p.text-sm {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: -10px;
}

.mega-menu-image img {
    width: 100%;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    object-fit: cover;
    aspect-ratio: 4/3;
}
.mega-menu-image h4 {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.mega-menu-image p {
    font-size: 0.875rem;
    color: var(--gray-500);
}


/* Hero Section */
.hero-gradient {
    padding-top: 10rem;
    padding-bottom: 1rem;
    text-align: center;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f8f7ff; /* Fallback color */
}

.hero-content h1, .hero-content h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
}
.hero-content h2 {
    color: #1a4185;
    margin-top: 0.5rem;
}
.hero-content p {
    max-width: 42rem;
    margin: 1.5rem auto 0;
    font-size: 1.125rem;
    color: var(--gray-600);
}
.hero-content .hero-btn {
    margin-top: 1rem;
    background-color: var(--orange-600);
    color: var(--white);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
}
.hero-content .hero-btn:hover {
    background-color: #4338ca;
    transform: scale(1.05);
}
.hero-btn svg {
    margin-left: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
}

/* Floating UI Elements */

.floating-ui-container {
    margin-top: 4rem;
    position: relative;
    height: 24rem;
    background-image: url('/assets/images/freepik__background__80085.png');
    background-position: center center;
    background-size: 100%;  /* Adjust the size of the background image here (you can try other values like 40%, 30%, etc.) */
    background-repeat: no-repeat;
}

.floating-card {
    position: absolute;
    background-color: var(--white);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    padding: 0.5rem;
    border: 1px solid var(--gray-100);
}
.main-card {
    top: -10%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 30rem;
}
.left-card {
   
    left: 15%;
    width: 15rem;
}
.right-card {
    top: 50%;
    right: 50%;
    width: 18rem;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.floating { animation: float 6s ease-in-out infinite; }
.floating-delay-1 { animation-delay: 1s; }
.floating-delay-2 { animation-delay: 2s; }

/* Trusted By Section */
.trusted-section {
    padding: 4rem 0;
    text-align: center;
    background-color: #ffffff;
}
.trusted-section h3 {
    color: var(--gray-500);
    font-weight: 500;
}

.trusted-section {
    /* Spacing for the section */
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
    
    /* The Separators */
    border-bottom: 1px solid #e5e7eb; /* A light, subtle gray line */
}

.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* Space between the logos */
}

.logos {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}
.logos p { font-weight: 700; }
.logo-netflix { font-size: 1.5rem; color: #e50914; }
.logo-hsbc { font-size: 1.5rem; color: #db0011; }
.logo-unilever { font-size: 1.5rem; color: #005dab; }
.logo-tata { font-size: 1.5rem; color: #004b8d; }
.logo-flipkart { font-size: 1.5rem; color: #fcc300; }
.logo-disney { font-size: 1.5rem; color: #1e3a8a; }

/* Products Section */
/* Products Section */
.products-section {
    padding: 5rem 0;
    background-color: rgb(255, 255, 255);
}
.products-header {
    text-align: center;
}
.products-header .tag {
    display: inline-block;
    background-color: var(--orange-100);
    color: var(--orange-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}
.products-header h2 {
    margin-top: 1rem;
    font-size: 3rem;
    font-weight: 800;
    color: var(--gray-900);
}
.products-grid {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}
.product-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    transition: box-shadow 0.3s;
}
.product-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

/* --- NEW --- */
/* This is the new rule that aligns the icon and title */
.product-card-header {
    display: flex;
    align-items: center;
    gap: 1rem; /* Creates space between icon and title */
}

.product-card .icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Added flex-shrink to prevent the icon from shrinking if the title is long */
    flex-shrink: 0; 
}
.product-card h3 {
    /* --- MODIFIED --- */
    /* Margin is no longer needed as flex handles alignment */
    margin-top: 0; 
    font-size: 1.25rem;
    font-weight: 700;
}
.product-card p {
    margin-top: 1rem; /* Adjusted margin slightly for better spacing */
    color: var(--gray-500);
}
.icon-wrapper svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Responsive columns for product cards */
@media (min-width: 640px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- Sticky Scroll Container --- */
.scroll-wrapper::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 10rem);
    height: 0.5rem;
    background: linear-gradient(to right, #ffffff, #ffffff);
    border-radius: 9999px;
}


.sticky-slide {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 6rem; /* Increased outer padding */
}

.slide-card {
    width: 100%;
    height: 100%;
    border-radius: 1.5rem; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 5rem; /* Increased inner padding */
}

/* Generic Feature Section Styles */
.feature-section {
    padding: 140px;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
}
.feature-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    gap: 4rem;
    width: 100%;
    padding-bottom: 40px;
    padding-top: 40px;
}
.feature-text .tag {
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    display: inline-block;
    color: var(--white);
    border: none;
}
.feature-text h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-top: 1rem;
    line-height: 1.2;
}
.feature-text p {
    font-size: 1rem;
    color: var(--gray-600);
    margin-top: 1rem;
    max-width: 32rem;
}
.feature-text .next-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 400;
    margin-top: 0.5rem;
    display: inline-block;
    transition: all 0.3s;
    color: var(--white);
    border: none;
}
 .feature-text .next-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Communication Section (Slide 1) */
.communication-section .slide-card {
    background-color: #f0f4ff;
}
.communication-text .tag {
    background-color:#1a4185;
}
.communication-text .next-btn {
    background-color: #1a4185;
}
.communication-visuals {
    position: relative;
    min-height: 28rem;
}
.comm-card {
    position: absolute;
    background: var(--white);
    border-radius: 0.75rem;
    padding: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);;
}
#comm-card-1 {
    width: 15rem;
    top: rem;
    left: -40px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#comm-card-1 img {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
}
#comm-card-2 {
    width: 15rem;
    top: 10rem;
    right: 0;
    z-index: 3;
}
#comm-card-3 {
    width: 16rem;
    bottom: 2rem;
    left: 3rem;
    z-index: 1;
}

/* Verification Section (Slide 2) */
.verification-section .slide-card {
     background-color: #fbf2d5;
}
.verification-text .tag {
    background-color: var(--orange-600);
}
.verification-text .next-btn {
    background-color: var(--orange-600);
}
.verification-text h2 .light-text {
    color: var(--pink-500);
}
.verification-visuals {
    position: relative;
    min-height: 34rem;
}
.verification-visuals > div {
     position: absolute;
     box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
     animation: float 6s ease-in-out infinite;
}

.phone-mockup {
    width: 16rem;
    height: 32rem;
    background-color: var(--white);
    border: 8px solid #f3f4f6;
    padding: 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation-delay: 0.5s;
}
.phone-mockup-notch {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 8rem;
    height: 1.5rem;
    background-color: #f3f4f6;
    border-radius: 1rem;
}
.auth-card {
    width: 15rem;
    height: auto;
    background-color: var(--white);
    padding: 1rem;
    top: 20%;
    right: -20%;
    transform: rotate(5deg);
    z-index: 3;
}
.auth-card .back-btn {
    font-size: 0.875rem;
    color: var(--gray-500);
}
.auth-card h {
    margin-top: 1rem;
    font-weight: 700;
}
.auth-card p {
    font-size: 0.875rem;
    color: var(--orange-600);
    margin-top: 0.5rem;
}
.auth-code-inputs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.auth-code-inputs div {
    width: 2.25rem;
    height: 2.5rem;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
}
.auth-card .continue-btn {
    width: 100%;
    background-color: var(--orange-600);
    color: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.message-card {
    width: 14rem;
    padding: 1rem;
    background: #2d3748;
    color: var(--white);
    top: 55%;
    left: -10%;
    transform: rotate(-5deg);
    z-index: 1;
    animation-delay: 1s;
}
.message-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--gray-400);
}
.message-card p {
    font-size: 0.875rem;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Connections Section (Slide 3) */
.connections-section {
    z-index: 3;
}
.connections-section .slide-card {
    background-color: #f0fdf4;
}
.connections-text .tag {
    background-color: #075E54;
}
.connections-text .next-btn {
    background-color: #075E54;
}

.connections-visuals {
    position: relative;
    min-height: 28rem;
}
.connections-visuals .main-image-card {
    position: absolute;
    width: 90%;
    height: 20rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
}
.connections-visuals .floating-image {
    position: absolute;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    object-fit: cover;
}
#img-1 {
    width: 10rem;
    height: 8rem;
    top: 0;
    left: 10%;
}
#img-2 {
    width: 7rem;
    height: 7rem;
    top: 5rem;
    right: -10%;
}
#img-3 {
    width: 9rem;
    height: 11rem;
    bottom: -2rem;
    left: -10%;
}


/* Enhance Customer Experience Section */
.enhance-experience-section {
    padding: 6rem 0;
    background-color: var(--white);
    overflow: hidden;
}
.enhance-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    align-items: center;
}
.enhance-text-card {
    background-color: #09017d;
    color: var(--white);
    padding: 4rem;
    border-radius: 1.5rem;
    position: relative;
    z-index: 1;
}
.enhance-text-card h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
}
.enhance-text-card p {
    margin-top: 1.5rem;
    max-width: 25rem;
}
.enhance-visuals {
    position: relative;
    margin-left: -4rem;
    margin-top: 2rem;
    z-index: 2;
}
.visual-card-main {
    border-radius: 1.5rem;
    position: relative;
    transform: rotate(1deg);
}
 .visual-card-main img {
    width: 100%;
    border-radius: 0.75rem;

display: block;
}
.floating-message {
    position: absolute;
    background: white;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
    animation: float 8s ease-in-out infinite;
}
#msg-1 {
    top: -8rem;
    left: -20rem;
    animation-delay: 0s;
}
#msg-2 {
    top: 10rem;
    right: -2rem;
    animation-delay: 1.5s;
}
 #msg-3 {
    bottom: 8rem;
    left: -4rem;
    animation-delay: 2.5s;
}
 #msg-4 {
    bottom: 10rem;
    right: -3rem;
    animation-delay: 0.8s;
}

/* Stats & Testimonials Section */
.stats-testimonials-section {
    padding: 6rem 0;
    background-color: var(--white);
}
.stats-header {
    text-align: center;
    margin-bottom: 4rem;
}
.stats-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gray-900);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    gap: 2rem;
    text-align: center;
}
.stat-item h3 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--indigo-600);
}
.stat-item p {
    color: var(--gray-500);
    margin-top: 0.5rem;
}
.testimonials-grid {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;
    align-items: center;
}
.testimonial-card {
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    border: 1px solid var(--gray-200);
    transition: opacity 0.3s ease-in-out;
}
.testimonial-card .quote-icon {
    font-size: 3rem;
    color: var(--indigo-600);
    line-height: 1;
}
.testimonial-card blockquote {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-style: italic;
    color: var(--gray-600);
}
.testimonial-author {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
}
.testimonial-author img {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    margin-right: 1rem;
}
.testimonial-author .name {
    font-weight: 600;
}
.testimonial-author .title {
    color: var(--gray-500);
    font-size: 0.875rem;
}
.testimonial-content .tag {
     color: var(--indigo-600);
     font-weight: 600;
 
}
.testimonial-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
}
.testimonial-content p {
    color: var(--gray-600);
    margin-top: -0.5rem;
}
.testimonial-content .next-testimonial {
    font-weight: 600;
    color: var(--indigo-600);
    display: inline-block;
    cursor: pointer;
}

/* FAQ Section */
.faq-section {
    padding: 6rem 0;
}
.faq-header {
    text-align: center;
    margin-bottom: 4rem;
}
.faq-header h2 {
    font-size: 3rem;
    font-weight: 800;
}
.faq-header p {
    margin-top: 1rem;
    color: var(--gray-600);
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.faq-accordion {
    max-width: 48rem;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--gray-200);
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.faq-question:hover {
    color: var(--indigo-600);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.faq-answer p {
    padding-bottom: 1.5rem;
    color: var(--gray-600);
}
.faq-icon {
    transition: transform 0.3s;
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}


/* Footer */
footer {
    background-color: #001141;
    color: #ffffff; /* Changed from var(--white) to ensure it's white */
    padding: 3rem 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.footer-grid h4 {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.footer-grid ul li {
    margin-top: 0.5rem;
}
.footer-grid a {
    color: #ffffff; /* This was already white */
    transition: color 0.3s;
}
.footer-grid a:hover {
    color: #ffffff; /* Changed from var(--white), hover is also white */
}
.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #595959;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom p {
    color: #ffffff; /* This was already white */
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.social-links a { color: #9ca3af; transition: color 0.3s; }
.social-links a:hover { color: var(--white); }
.social-links svg { width: 1.5rem; height: 1.5rem; }

/* Responsive Styles */
@media (min-width: 640px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid {
         grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .footer-bottom {
        flex-direction: row;
    }
    .social-links {
        margin-top: 0;
    }
    .products-grid {
        grid-template-columns: repeat(2, 2fr);
    }
    .stats-grid {
         grid-template-columns: repeat(4, 1fr);
    }
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    nav {
        display: flex;
        padding-top: 15px;
    }
    .nav-actions {
        display: flex;
    }
    #mobile-menu-button {
        display: none;
    }
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .industries-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .feature-content {
         grid-template-columns: repeat(2, 1fr);
    }
    .feature-text h2 {
        font-size: 3rem;
    }
    .enhance-content {
        grid-template-columns: 40% 60%;
    }
}

@media (max-width: 1023px) {
     nav, .nav-actions {
        display: none;
     }
     #mobile-menu-button {
        display: block;
     }
     .scroll-wrapper::before {
        width: calc(100% - 2rem);
     }
     .sticky-slide {
        padding: 1rem;
     }
     .enhance-visuals {
        margin-left: 0;
     }
}

@media (max-width: 767px) {
    .hero-content h1, .hero-content h2 {
        font-size: 3rem;
    }

    .feature-text h2 {
        font-size: 2rem;
    }
    .communication-visuals, .verification-visuals, .connections-visuals {
        display: none;
    }
    .feature-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .enhance-content {
        grid-template-columns: 1fr;
    }
    .enhance-text-card {
        padding: 2rem;
    }
    .enhance-text-card h2 {
        font-size: 2.25rem;
    }
    .enhance-visuals {
        margin-top: 2rem;
    }
    .visual-card-main {
        transform: rotate(0);
    }
    .sticky-slide {
        padding: 1rem 0.5rem;
    }
    .slide-card {
        padding: 2rem 1.5rem;
    }
}

.hidden { display: none !important; }


/*contact page*
/* Custom Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2ff; /* A light fallback background */
}

.main-gradient {
    background-image: radial-gradient(circle at 50% 0, rgba(200, 180, 255, 0.5), rgba(255, 255, 255, 0) 50%), 
                      radial-gradient(circle at top left, #d9cfff, #f0f2ff 70%);
}

.btn-gradient {
    background: linear-gradient(to right, #6D28D9, #4F46E5);
}

#mega-menu {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}


/* --- Contact Page Specific Styles --- */
.contact-main {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #f3e8ff, #e0e7ff);
}

.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}
.contact-header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    margin-top: 4rem;
}
.contact-header p {
    font-size: 1.125rem;
    color: #4b5563; /* var(--gray-600) */
    max-width: 42rem;
    margin: 0 auto;
}

.contact-card {
    max-width: 80rem;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

.contact-form-wrapper {
    padding: 2.5rem;
}

.contact-form-wrapper form {
    display: flex;
    flex-direction: column;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #e5e7eb; /* var(--gray-200) */
    border-radius: 0.5rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: all 0.3s;
    box-sizing: border-box;
}
.contact-form-wrapper input::placeholder,
.contact-form-wrapper textarea::placeholder {
    color: #6b7280; /* var(--gray-500) */
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    outline: none;
    border-color: #4f46e5; /* var(--indigo-600) */
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    color: #ffffff; /* var(--white) */
    font-weight: 600;
    font-size: 1rem;
    background: var(--orange-600);
    cursor: pointer;
    transition: opacity 0.3s;
}
.submit-btn:hover {
    opacity: 0.9;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.contact-info-wrapper {
    padding: 2.5rem;
    background-color: rgba(239, 246, 255, 0.5);
}
.contact-info-wrapper h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}
.contact-info-wrapper > p {
    color: #4b5563; /* var(--gray-600) */
    margin: 0 0 2rem 0;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
}

.icon-wrapper {
    flex-shrink: 0;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #ffffff; /* var(--white) */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: #4f46e5; /* var(--indigo-600) */
}
.icon-wrapper svg {
    width: 1.5rem;
    height: 1.5rem;
}

.info-text {
    margin-left: 1rem;
}
.info-text h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}
.info-text p, .info-text a {
    margin: 0;
    color: #4b5563; /* var(--gray-600) */
    text-decoration: none;
}
.info-text a {
    color: #4f46e5; /* var(--indigo-600) */
}
.info-text a:hover {
    text-decoration: underline;
}

/* Responsive adjustment for the form */
@media (max-width: 768px) {
    .contact-card {
        grid-template-columns: 1fr;
    }
}

/* Add these variables to the top of your CSS file if you don't have them */
:root {
    --primary-blue: #020633;
    --warm-white: #f8f8ff; /* Ghost White */
    --charcoal-gray: #333;
    --gray-600: #555;
    /* Add other color variables your site uses */
}

body {
    font-family: 'Inter', sans-serif;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* === Industries Section (Blue + White Refresh) === */
.industries-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary-blue), #01154b);
    color: var(--warm-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.industries-section::before,
.industries-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
}

.industries-section::before {
    width: 320px;
    height: 320px;
    background: rgba(255, 255, 255, 0.25);
    top: -100px;
    left: -120px;
}

.industries-section::after {
    width: 420px;
    height: 420px;
    background: rgba(1, 2, 66, 0.45); /* var(--primary-blue) glow */
    bottom: -160px;
    right: -160px;
}

.industries-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--warm-white);
}

.industries-header p {
    margin-top: 1rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
}

/* Grid layout for industry cards */
.industries-grid {
    margin-top: 4rem;
    display: grid;
    /* Mobile default: 2 column */
    grid-template-columns: repeat(2, 2fr);
    gap: 1rem; /* Increased gap slightly */
    position: relative;
    z-index: 1;
}

/* Card styling */
.industry-card {
    background-color: var(--warm-white);
    border: 1px solid rgba(93, 95, 239, 0.15);
    padding: 1rem;
    border-radius: 1rem;
    text-align: left;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.25);
    
}

.industry-card:hover {
    transform: translateY(-8px);
    border-color: rgba(93, 95, 239, 0.35);
    box-shadow: 0 18px 28px -10px rgba(30, 58, 138, 0.35);
}

.industry-card svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.industry-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--charcoal-gray);
}

.industry-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* === Responsive Grid Adjustments === */

/* Small tablets and up: 2 columns */
@media (min-width: 640px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium tablets and up: 3 columns */
@media (min-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large desktops and up: 5 columns */
@media (min-width: 1280px) {
    .industries-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* --- Hero Section Styling --- */
.hero-section {
    background-color: #f7f8ff; /* A light, slightly blue-tinted gray */
    padding: 6rem 0;
    overflow: hidden; /* Prevents horizontal scroll from any overflowing elements */
    padding-top: 10rem;
}

.info-section {
    padding: 4rem 0; /* Vertical padding for these sections */
}

/* Specific background color for the image wraps in these sections */


/* For the career image, a different background if preferred */
.info-section:first-of-type .image-wrapper {
    background-color: #eaf8f0; /* Light green background for the careers image */
}


.section-tag {
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a4eee; /* Matching the highlight text color */
    margin-bottom: 0.5rem;
}

.info-section h2 {
    font-size: 2.5rem; /* Adjust heading size for these sections */
    line-height: 1.2;
}

.info-section p.text-secondary {
    color: #6c757d; /* Consistent paragraph color */
    font-size: 1rem;
    line-height: 1.6;
}

/* --- NEW: Specific Button for "Become a Sincher" --- */
.btn-warning {
    background-color: #fca311; /* A bright, eye-catching orange */
    border-color: #fca311;
    color: #fff; /* White text for contrast */
    padding: 0.5rem 0.5rem;
    font-weight: 400;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-warning:hover {
    background-color: #e0900e; /* Slightly darker orange on hover */
    border-color: #e0900e;
    transform: translateY(-2px);
}

/* --- Responsive Adjustments (Existing & New) --- */

/* For tablets and smaller devices (below 992px) */
@media (max-width: 991.98px) {
    .hero-section {
        padding: rem 0; /* Reduce padding on smaller screens */
    }

    .hero-section .text-content {
        text-align: center; /* Center-align all text content when stacked */
    }

    /* Center text for info sections when stacked */
    .info-section .col-lg-6:not(.image-wrapper-col) {
        text-align: center;
    }

    .info-section h2 {
        font-size: 2rem; /* Adjust heading size for info sections on mobile */
    }
}

/* For mobile devices (below 768px) */
@media (max-width: 767.98px) {
    .hero-section .text-content h1 {
        font-size: 2.5rem; /* Make the headline a bit smaller on mobile */
    }

    .info-section {
        padding: 3rem 0;
    }

    .info-section .image-wrapper {
        min-height: 200px; /* Smaller min-height for image wrappers on tiny screens */
    }
}

/* --- Previous CSS styles remain the same --- */
/* ... body, .hero-section, .info-section, etc. ... */


/* --- NEW: CTA Section Styling --- */
.cta-section {
    background-color: #fff; /* Or whatever your page background color is */
}

.cta-box {
    background-color: #211A2C; /* The dark background color from the image */
    color: #ffffff;
    border-radius: 2rem; /* Creates the nice rounded corners */
    padding: 5rem 2rem;
    position: relative; /* This is essential for positioning the decorative shapes */
    overflow: hidden; /* This clips the shapes that go outside the rounded corners */
    z-index: 1; /* Ensures the box context is correct for child elements */
}

.cta-heading {
    color:var(--orange-600); 
    line-height: 1.2;
}
.cta-content {
    position: relative; /* Puts the text content above the decorative shapes */
    z-index: 2;
}

.btn-cta-primary {
    background-color: #f97316; /* A vibrant orange */
    color: #fff;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-cta-primary:hover {
    background-color: #ea580c; /* A slightly darker orange on hover */
    color: #fff;
}

.cta-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cta-link:hover {
    color: #f5c5e8; /* Change to the pink color on hover */
}

/* --- NEW: Decorative Shapes Styling --- */
.deco-shape {
    position: absolute;
    z-index: 1; /* Places them behind the text content */
}

/* Pink rounded rectangle on the left */
.shape-1 {
    top: 40%;
    left: -3rem;
    width: 9rem;
    height: 3rem;
    background-color: #f5c5e8;
    opacity: 0.3;
    border-radius: 1.5rem;
    transform: translateY(-50%) rotate(-15deg);
}

/* White circle top-left */
.shape-2 {
    top: 3rem;
    left: 4rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #ffffff;
    border-radius: 50%;
}

/* Image container top-right */
.shape-3 {
    top: -1rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
}

.shape-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.25rem;
}

/* Pink circle bottom-right */
.shape-4 {
    bottom: -4rem;
    right: -3rem;
    width: 10rem;
    height: 10rem;
    background-color: #f5c5e8;
    opacity: 0.15;
    border-radius: 50%;
}

/* --- CTA Responsive Adjustments --- */
@media (max-width: 767.98px) {
    .cta-box {
        padding: 4rem 1.5rem;
    }

    .cta-heading {
        font-size: 2rem;
    }

    /* Hide some decorative elements on mobile to declutter */
    .shape-1, .shape-2 {
        display: none;
    }
    
    .shape-3 {
        width: 5rem;
        height: 5rem;
        top: -1rem;
        right: 1rem;
    }
}

/* ================================================= */
/* --- NEW LIGHT FOOTER FOR INTERNAL PAGES --- */
/* ================================================= */

/* Targets the footer only when it has the 'footer-light' class */
footer.footer-light {
    background-color: #f8f9fa; /* A clean, light gray background */
    color: #6c757d; /* A softer dark gray for better readability */
    position: relative;
}

/* Overrides for text and links to look good on a light background */
.footer-light h4 {
    color: #212529; /* A strong, dark color for headings */
}

.footer-light ul a,
.footer-light .footer-address,
.footer-light .footer-contact-link {
    color: #6c757d; /* Standard text color */
}

.footer-light ul a:hover,
.footer-light .footer-contact-link:hover {
    color: #031022; /* A standard blue for hover effect */
}

/* Update the color of the separator line and social icons */
.footer-light .footer-bottom {
    border-top: 1px solid #dee2e6; /* A light gray border */
}

.footer-light .social-links a {
    color: #6c757d;
}

.footer-light .social-links a:hover {
    color: #0d6efd;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    footer.footer-light {
        padding-top: 100px;
    }
    footer.footer-light::before {
        height: 100px;
    }
}

/* Targets the footer only when it has the 'footer-light' class */
footer.footer-light {
    background-color: #f8f9fa; /* A clean, light gray background */
    color: #6c757d; /* A softer dark gray for better readability */
    position: relative;
}

/* This points to the NEW SVG to create the wave effect */
footer.footer-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url('footer-waves-light-bg.svg'); /* Using the new SVG */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    transform: translateY(1px); /* Prevents tiny gaps */
}

/* Overrides for text and links to look good on a light background */
.footer-light h4 {
    color: #212529; /* A strong, dark color for headings */
}

.footer-light p {
    color: #212529; /* A strong, dark color for headings */
}

.footer-light ul a,
.footer-light .footer-address,
.footer-light .footer-contact-link {
    color: #6c757d; /* Standard text color */
}

.footer-light ul a:hover,
.footer-light .footer-contact-link:hover {
    color: #0d6efd; /* A standard blue for hover effect */
}

/* Update the color of the separator line and social icons */
.footer-light .footer-bottom {
    border-top: 1px solid #dee2e6; /* A light gray border */
}

.footer-light .social-links a {
    color: #6c757d;
}

.footer-light .social-links a:hover {
    color: #0d6efd;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    footer.footer-light {
        padding-top: 100px;
    }
    footer.footer-light::before {
        height: 100px;
    }
}

/* General Footer Styles */
.footer-light {
    background-color: #f8f9fa; /* A light grey background */
    color: #6c757d;           /* Muted text color */
    padding: 4rem 0;          /* Generous padding */
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1140px; /* Standard container width */
    margin: 0 auto;
    padding: 0 1rem;
}

/* 4-Column Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns on desktop */
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Footer Typography & Links */
.footer-grid h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #9a9a9a; /* Darker color for headings */
    margin-bottom: 1rem;
}

.footer-grid ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

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

.footer-grid a {
    text-decoration: none;
    color: #ffffff;
    transition: color 0.2s ease-in-out;
}

.footer-grid a:hover {
    color: #007bff; /* A primary color on hover */
}

/* Address & Contact Styling */
.footer-address {
    font-style: normal;
    margin-bottom: 0.5rem;
}

.footer-contact-link {
    text-decoration: none;
    color: #ffffff;
    display: block;
}

.footer-contact-link:hover {
    color: #007bff;
}

/* =================================== */
/* Mega Menu Button Style              */
/* =================================== */

.mega-menu-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--orange-600);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
    border: 1px solid transparent;
}

.mega-menu-btn:hover {
    background-color: #1a4185 ;
    color: #ffffff;
}
:root {
            /* Colors from the design */
            --color-yellow-demo: #f9c02d;
            --color-text-dark: #111827; /* Dark text for headline */
            --color-text-body: #374151; /* Softer text for paragraph */
            --color-text-eyebrow: #4b5563;
            --bg-page: #f8f9fa; /* Light gray background for the whole page */

            /* Placeholder background colors */
            --bg-light-green: #e0f5eb;
            --bg-light-blue: #d9eefc;
            --bg-light-yellow: #fef8d8;
        }

        /* Applying a base font and background to the page */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-page);
            color: var(--color-text-body);
        }

        /* Container class to keep content centered */
        /* This might be in your style.css, but adding it here for safety */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        /* The new section */
        .pioneering-section {
            padding: 5rem 0; /* Vertical spacing */
            overflow: hidden; /* For AOS animations */
            padding-top: 10rem;
        }

        /* Main 2-column grid */
        .pioneering-grid {
            display: grid;
            grid-template-columns: 1fr; /* Default to 1 column on mobile */
            gap: 3rem;
            align-items: center;
        }

        /* Left column (text) styling */
        .pioneering-text {
            display: flex;
            flex-direction: column;
            gap: 1rem; /* Space between text elements */
        }

        .eyebrow {
            font-size: 0.875rem; /* 14px */
            font-weight: 600;
            color: var(--color-text-eyebrow);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin: 0;
        }

        .pioneering-text h1 {
            font-size: 3rem; /* 48px */
            font-weight: 800;
            color: var(--color-text-dark);
            line-height: 1.2;
            margin: 0;
        }

        .pioneering-text p {
            font-size: 1.125rem; /* 18px */
            line-height: 1.6;
            margin: 0.5rem 0;
        }

        /* The yellow "Request a demo" button */
        .btn-demo-yellow {
            display: inline-block;
            background-color: var(--orange-600);
            color: #ffffff;
            padding: 0.75rem 0.75rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.2s ease;
            align-self: flex-start; /* Don't stretch full width */
        }

        .btn-demo-yellow:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            background-color: #1a4185;
        }

        /* Right column (image grid) styling */
        .pioneering-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 2x2 grid */
            gap: 1.5rem; /* Space between images */
        }

        .team-card-img {
            width: 100%;
            height: auto;
            border-radius: 12px; /* Rounded corners for the images */
            object-fit: cover;
            aspect-ratio: 1 / 1; /* Make them square */
        }


        /* ================================== */
        /* =         RESPONSIVE CSS         = */
        /* ================================== */
        
        /* On tablets and desktops (medium screens and up) */
        @media (min-width: 768px) {
            .pioneering-grid {
                /* Switch to 2 columns */
                grid-template-columns: 1.1fr 1fr; /* Left column slightly larger */
            }

            .pioneering-text h1 {
                font-size: 3.75rem; /* 60px - make it bigger on desktop */
            }
        }
        
        /* On mobile, center the text */
        @media (max-width: 767px) {
            .pioneering-text {
                text-align: center;
                align-items: center;
            }
            
            .btn-demo-yellow {
                align-self: center;
            }
        }

        /* NOTE: This CSS assumes you have a :root block with 
  color variables defined, like the ones from the 
  previous code. I've included the necessary ones
  here for reference.
*/
:root {
  --color-text-dark: #111827;
  --color-text-body: #374151;
  --color-text-eyebrow: #4b5563;
  --bg-testimonial: #fef7e4; /* New color from image */
  --bg-page: #f8f9fa; /* Page background color */
}


/* Testimonial Section Styles */
.testimonial-section {
    padding: 4rem 0; /* Space above and below */
    /* Assumes your page has a light gray background */
    /* background-color: var(--bg-page); */
}

.testimonial-card {
    background-color: var(--bg-testimonial);
    border-radius: 20px;
    padding: 3rem;
    max-width: 900px; /* Constrain width */
    margin: 0 auto; /* Center the card */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.testimonial-logo {
    /* Height is set to match example, but you can adjust */
    height: 32px; 
    width: auto;
    margin-bottom: 2rem;
}

.testimonial-card blockquote {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    color: var(--color-text-body);
    margin: 0 0 2rem 0; /* Reset margin and add space below */
    font-style: italic;
}

.author-attribution {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between pic and text */
}

.author-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Make it circular */
    object-fit: cover;
}

.author-info p {
    margin: 0;
    line-height: 1.4;
}

.author-info .name {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 1rem;
}

.author-info .title {
    font-size: 0.875rem;
    color: var(--color-text-eyebrow);
}

/* Responsive */
@media (max-width: 767px) {
    .testimonial-card {
        padding: 2rem;
    }

    .testimonial-card blockquote {
        font-size: 1.125rem;
    }
}

/* NOTE: This CSS assumes you have a :root block with 
   color variables defined, like the ones from the 
   previous code.
*/

/* Values Section */
.values-section {
    padding: 5rem 0;
    background-color: #fff; /* The image has a white background */
}

.values-section h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 3.5rem; /* Space between title and grid */
}

.values-grid {
    display: grid;
    /* Creates 4 equal columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 2.5rem; /* Space between the items */
}

.value-icon {
    height: 32px;
    width: 32px;
    margin-bottom: 1.5rem;
    /* Ensures icons are black like the design */
    filter: invert(0); 
}

.value-item h3 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 0.75rem 0;
}

.value-item p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    color: var(--color-text-body);
    margin: 0;
}


/* Responsive */

/* On tablets */
@media (max-width: 992px) {
    .values-grid {
        /* Switch to 2 columns */
        grid-template-columns: repeat(2, 2fr);
    }
}

/* On mobile */
@media (max-width: 576px) {
    .values-grid {
        /* Stack to 2 column */
        grid-template-columns: 2fr;
    }
}
/* NOTE: This CSS assumes you have a :root block with 
   color variables and the .btn-demo-yellow class 
   from previous examples.
*/

:root {
  /* This is a new color from the design */
  --bg-light-blue: #eaf6ff; 
}


/* Careers Section */
.careers-section {
    background-color: var(--bg-light-blue);
    padding: 5rem 0;
    overflow: hidden; /* For AOS animations */
}

.careers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.careers-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 12px;
}

.careers-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns text left */
    gap: 1rem;
}

/* This .eyebrow class might already be defined */
.eyebrow {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: var(--color-text-eyebrow);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}

.careers-text h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.careers-text p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;
    color: var(--color-text-body);
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .careers-grid {
        grid-template-columns: 1fr;
    }
    
    .careers-image {
        text-align: center; /* Center the image on mobile */
    }

    .careers-text {
        align-items: center; /* Center text on mobile */
        text-align: center;
    }
}

/* "In numbers" Section */
.numbers-section {
    padding: 5rem 0;
    background-color: #fff; /* White background */
}

.numbers-section h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 3.5rem; /* Space between title and grid */
}

.numbers-grid {
    display: grid;
    /* 4 columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 2.5rem 2rem; /* row-gap column-gap */
}

.stat-item h3 {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 0.5rem 0;
}

.stat-item p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    color: var(--color-text-body);
    margin: 0;
}


/* Responsive */

/* On tablets */
@media (max-width: 992px) {
    .numbers-grid {
        /* Switch to 2 columns */
        grid-template-columns: repeat(2, 2fr);
    }
}

/* On mobile */
@media (max-width: 576px) {
    .numbers-grid {
        /* Keep 2 columns, but add more row gap */
        gap: 3rem 1rem;
    }

    .stat-item h3 {
        font-size: 2rem; /* Slightly smaller on mobile */
    }
}

/* NOTE: This CSS assumes you have a :root block with 
  color variables defined.
*/
:root {
  --color-text-eyebrow: #4b5563;
  --bg-page: #f8f9fa; /* This light gray matches the image */
}


/* Logo Cloud Section */
.logo-cloud-section {
    padding: 4rem 0;
    background-color: var(--bg-page); /* Light gray background */
}

.logo-cloud-text {
    text-align: center;
    font-size: 1rem; /* 16px */
    color: var(--color-text-eyebrow); /* Softer text color */
    margin-bottom: 2.5rem;
    max-width: 600px; /* Constrains the text width */
    margin-left: auto;
    margin-right: auto;
}

.logo-grid {
    display: flex;
    flex-wrap: wrap; /* Allows logos to wrap on small screens */
    justify-content: center;
    align-items: center;
    gap: 2.5rem 3rem; /* row-gap column-gap */
}

.logo-item {
    /* Set a uniform height for all logos */
    max-height: 35px; 
    width: auto; /* Maintain aspect ratio */
    
    /* This is the most important part: */
    filter: grayscale(100%);
    opacity: 0.7;
    
    transition: all 0.3s ease;
}

.logo-item:hover {
    /* On hover, remove the filter and make fully visible */
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* NOTE: This CSS assumes you have a :root block with 
   color variables defined, like the ones from previous code.
*/
:root {
  --color-text-dark: #111827;
  --color-text-body: #374151;
  --color-text-eyebrow: #4b5563;
  --bg-page-light-yellow: #fef7e4; /* Background for the whole section */
  --bg-form-card: #ffffff; /* White background for the form card */
  --border-input: #d1d5db; /* Light gray border for inputs */
  --focus-ring: #a3b8ff; /* Blue focus ring */
  --btn-submit-bg:var(--orange-600) /* Yellow submit button */
  --btn-submit-text: #111827;
  --link-color: #4f46e5; /* Blue for links */
}


/* Contact Form Section */
.contact-form-section {
    background-color: var(--bg-page-light-yellow);
    padding: 5rem 0;
}

.form-card {
    background-color: var(--bg-form-card);
    border-radius: 20px;
    padding: 3rem;
    max-width: 700px; /* Constrain width of the form card */
    margin: 0 auto; /* Center the card */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.form-header {
    margin-bottom: 2.5rem;
}

.form-header h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 0.5rem 0;
}

.form-header p {
    font-size: 1.125rem; /* 18px */
    color: var(--color-text-body);
    margin: 0;
}

/* Form layout */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Space between form groups */
}

.form-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap; /* Allows fields to wrap on smaller screens */
}

.form-group {
    flex: 1; /* Allows form groups to take equal space */
    min-width: 150px; /* Prevents fields from becoming too narrow */
    position: relative; /* For label positioning if needed */
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

.contact-form input::placeholder,
.contact-form select option[disabled] {
    color: var(--color-text-eyebrow); /* Placeholder text color */
    opacity: 1; /* Firefox default is lower */
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); /* Soft blue shadow */
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
}

/* Checkbox styles */
.checkbox-group {
    display: flex;
    align-items: flex-start; /* Align checkbox and text at the top */
    margin-bottom: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    width: 18px;
    height: 18px;
    margin-top: 3px; /* Align with text baseline */
    border: 1px solid var(--border-input);
    border-radius: 4px;
    appearance: none; /* Hide default checkbox */
    -webkit-appearance: none;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked {
    background-color: var(--link-color); /* Blue when checked */
    border-color: var(--link-color);
}

.checkbox-group input[type="checkbox"]:checked::before {
    content: '✔'; /* Checkmark character */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: white;
}

.checkbox-group label {
    font-size: 0.9375rem; /* 15px */
    color: var(--color-text-body);
    line-height: 1.5;
    cursor: pointer;
}

/* Submit button */
.submit-btn {
    display: inline-block;
    background-color: var(--orange-600);
    color: var(--btn-submit-text);
    padding: 0.8rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start; /* Aligns left */
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Legal text below form */
.form-legal-text {
    font-size: 0.8125rem; /* 13px */
    color: var(--color-text-eyebrow);
    line-height: 1.5;
}

.form-legal-text a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
}

.form-legal-text a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
    .form-card {
        padding: 2rem;
    }

    .form-header h2 {
        font-size: 1.875rem; /* 30px */
    }

    .form-header p {
        font-size: 1rem;
    }

    .form-row {
        flex-direction: column; /* Stack fields vertically on mobile */
        gap: 1.25rem;
    }

    .form-group {
        min-width: unset; /* Remove min-width constraint */
    }

    .submit-btn {
        width: 100%; /* Full width button on mobile */
        align-self: stretch;
    }
}


/* --- Form Container --- */
.form-container {
    width: 100%;
    max-width: 900px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.form-container h2 {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 30px;
    color: #1a202c;
}

/* --- Form Grid Layout --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 24px;
}

/* --- Form Group (Label + Input) --- */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    margin-bottom: 8px;
    color: #4a5568;
}

/* Red asterisk for required fields */
.form-group label.required::after {
    content: ' *';
    color: #e53e3e;
}

/* --- Inputs and Selects --- */
.form-group input,
.form-group select {
    width: 100%;
    padding: 14px;
    font-size: 0.8rem; /* 16px */
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    background-color: #f7fafc;
    box-sizing: border-box; /* Important for padding */
    -webkit-appearance: none; /* Removes default iOS styling */
    -moz-appearance: none;
    appearance: none;
}

/* Style for select dropdown arrow */
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em 1.25em;
    color: #718096; /* Placeholder text color */
}

.form-group select:focus,
.form-group input:focus {
     color: #2d3748; /* Text color on focus */
     border-color: #4299e1;
     outline: none;
     box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
}

.form-group input::placeholder {
    color: #a0aec0;
}

/* Required for the first option to act as a placeholder */
.form-group select option[value=""] {
    color: #a0aec0;
}
.form-group select option {
    color: #2d3748;
}


/* --- Checkbox --- */
.checkbox-group {
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 12px;
    accent-color: #4A4AFF; /* Modern way to color checkbox */
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.875rem;
    color: #4a5568;
}

/* --- Submit Button --- */
.button-group {
    margin-top: 10px;
}

.submit-btn {
    background-color: var(--orange-600);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 16px 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.submit-btn:hover {
    background-color: #1a4185 ;
}

.submit-btn:active {
    transform: scale(0.98);
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .form-container {
        padding: 24px;
    }

    .form-container h2 {
        font-size: 2rem;
    }

    .form-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 20px;
    }
}

html {
  scroll-behavior: smooth;
}

.privacy-content {
  padding-top: 10rem; 
}

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

#main-header .mega-menu {
    display: none;
    position: absolute;
}

#main-header .nav-actions .demo-btn {
    background-color: orange;
}

.privacy-content {
            /* Assuming .container provides max-width and centering */
            padding-top: 10rem;
            padding-bottom: 4rem;
        }
        .privacy-content h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .privacy-content h2 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
        }
        .privacy-content p, .privacy-content li {
            font-size: 1rem;
            line-height: 1.6;
            color: #374151; /* A generic dark gray */
            margin-bottom: 1rem;
        }
        .privacy-content ul {
            list-style-type: disc;
            margin-left: 1.5rem;
        }
        .privacy-content a {
            color: #4f46e5; /* Pulled from your mega menu placeholder */
            text-decoration: none;
        }
        .privacy-content a:hover {
            text-decoration: underline;
        }

/* Style the SVGs from your HTML */
.footer-light .social-links svg {
  width: 20px; /* Was 24px */
  height: 20px; /* Was 24px */
}

.my-custom-button {
  background-color: var(--orange-600);
  color: var(--white);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
}

/* Added hover state */
.my-custom-button:hover {
  background-color: #1a4185;
}

/* --- Fix for Invisible Checkboxes --- */
.checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: -1rem;
}

.checkbox-group input[type="checkbox"] {
  /* Forces the native checkbox to appear */
  display: inline-block !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin-right: 10px; /* Adds spacing between the box and the label */
  
  /* Reset any other hiding styles */
  position: static;
  overflow: visible;
  clip: auto;
  clip-path: none;
  appearance: checkbox; /* Ensure it renders as a checkbox */
}

/* --- Style for Validation Errors --- */
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: #dc3545; /* A standard red color */
}

.checkbox-group label.is-invalid {
  color: #dc3545; /* Make the label text red if required but not checked */
}
.rotate-180 {
    transform: rotate(180deg);
}

/* Adds a smooth transition effect to the dropdown arrow 
  when the 'rotate-180' class is added or removed.
*/
#products-dropdown-icon {
    transition: transform 0.2s ease-in-out;
}

.value-icon {
    font-size: 30px;  /* Increase icon size */
    color: #111827;   /* Icon color */
    margin-bottom: 20px; /* Space between icon and text */
}
.name {
  margin-bottom: 0.20rem; /* Adds a tiny 4px space */
}

.title {
  margin-top: 0; /* Still removes the top margin */
}


/* Style for form field with errors */
.form-group {
    position: relative;
}

/* Show error message when input is invalid */
input:invalid + .error-message,
select:invalid + .error-message,
textarea:invalid + .error-message {
    display: block;
}

/* This class must be added to the input/select/textarea when it's invalid.
   JavaScript is required to add/remove this class.
*/
.invalid-input {
    border-color: #d9534f; /* Red border */
    box-shadow: 0 0 5px rgba(217, 83, 79, 0.5);
}

/* This is the error bubble container. 
   It must be placed inside a parent element with 'position: relative;'.
   (e.g., your '.form-group' div)
*/
.custom-error-message {
    /* Hidden by default */
    display: none; 
    
    /* Positioning */
    position: absolute;
    top: 45px; /* Adjust as needed to place it below your input */
    left: 0;
    z-index: 10;
    
    /* Bubble appearance */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* Content styling */
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    
    /* Aligns the icon and text */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* This creates the little triangle arrow pointing up */
.custom-error-message::before {
    content: '';
    position: absolute;
    
    /* Sits on top of the bubble's border */
    top: -6px; 
    left: 20px; /* Adjust to align with your input's text */
    
    /* The triangle trick */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ccc; /* Matches the bubble's border */
}

/* The little orange icon box */
.custom-error-message .error-icon {
    display: inline-block;
    background-color: #f0ad4e; /* Orange color from your image */
    color: white;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.2;
}

/* This class is added by JavaScript to show the bubble.
   The 'display: flex' matches the 'display: flex' above.
*/
.custom-error-message.show {
    display: flex; 
}

.omtel-flash{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 500;
  border-left: 4px solid transparent;
}
.omtel-flash.success{
  background:#e8f7ef;
  color:#185c37;
  border-left-color:#22c55e;
}
.omtel-flash.error{
  background:#fde8e8;
  color:#7a1d1d;
  border-left-color:#ef4444;
}
/* show or hide by breakpoint */
.desktop-only { display: block !important; }
.mobile-only  { display: none !important; }

@media (max-width: 991.98px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
}

/* optional */
.hidden { display: none !important; }


/* Media Query for Mobile Devices */
@media (max-width: 767px) {
    body {
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    /* Logo */
    .logo img {
        width: 100px; /* Adjust logo size for mobile */
    }

    /* Navigation Menu */
    nav ul {
        display: none; /* Hide navigation menu on mobile */
    }

    #mobile-menu {
        display: block; /* Show mobile menu */
    }

    .nav-actions {
        display: none; /* Hide login and demo buttons on mobile */
    }

    /* Mobile Menu Button */
    #mobile-menu-button {
        display: block; /* Show mobile menu button */
        background: none;
        border:#001141;
        cursor: pointer;
    }

    /* Mega Menu */
    .mega-menu {
        display: none; /* Hide mega menu on mobile */
    }

    /* Mobile Navigation */
    #mobile-menu a {
       
        text-align: left;
        display: block;
        font-size: 18px;
    }

    #mobile-menu a:hover {
        background-color: #f0f0f0;
    }
}
/* Media Query for Mobile Footer */
@media (max-width: 767px) {
    footer {
        padding: 20px;
        font-size: 14px;
    }

    .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 2fr); /* 2 equal columns */
    gap: 30px; /* space between columns */
    background-color: #00154f; /* adjust to your footer background */
    padding: 40px 20px;
    color: #fff;
}

    .footer-grid div {
        margin-bottom: 20px; /* Space out footer sections */
    }

    .footer-bottom {
        text-align: left;
    }

    .social-links {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .social-links a {
        font-size: 18px;
        margin: 0;
    }
}/* Adjust sections for mobile */
@media (max-width: 767px) {
    .hero-gradient {
        padding: -10px 10px;
        text-align: center;
    }

    .hero-content h1, .hero-content h2 {
        font-size: 40px;
    }

    .floating-ui-container {
        background-size: cover;
        height: 300px; /* Adjust height for mobile */
    }

    /* Products Section */
    .products-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Stack products vertically */
        gap: 20px;
    }

    .product-card {
        padding: 20px;
        text-align: left;
    }

    .industry-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Adjust for mobile */
        gap: 15px;
    }

    .industry-card {
        text-align: center;
        padding: 10px;
    }
}
@media (max-width: 767px) {
    h1, h2, h3 {
        font-size: 1.25rem; /* Scale down headers */
    }

    p {
        font-size: 0.875rem; /* Adjust paragraph text */
    }
}
/* Prevent Horizontal Scrolling */
@media (max-width: 767px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    * {
        box-sizing: border-box;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* Buttons on Mobile */
@media (max-width: 767px) {
    .hero-btn, .next-btn, .my-custom-button {     
        text-align: center;
        padding: 12px;
    }
}

/* Base Styles for Cards */
.slide-card {
    position: relative;
    margin: 20px;
    background-color: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.slide-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.slide-card .content {
    padding: 20px;
    text-align: center;
}

/* Mobile Styles for Slide Cards */
@media (max-width: 767px) {
    .slide-card {
        margin: 10px;
        padding: 10px;
    }

    .slide-card img {
        height: 200px; /* Adjust image size for mobile */
        object-fit: contain; /* Adjust image fitting on mobile */
    }

    .slide-card .content {
        padding: 10px;
        font-size: 14px; /* Smaller text for mobile */
    }

    /* If you are using multiple cards per row */
    .products-grid {
        display: grid;
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 15px;
    }
}

/* Hide the Products dropdown by default */
#products-dropdown {
    display: none;
}

/* Show the dropdown when the "Products" link is clicked */
#products-link.active + #products-dropdown {
    display: block;
}


/* Default (desktop/tablet) — keep your existing grid */
.mega-menu-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Mobile only (below 768px) — make it vertical */
@media (max-width: 768px) {
    .mega-menu-products-grid {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-left: 1rem; /* small indent for mobile view */
    }
}