@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {

    /* Colors */
    --bg-main: #ffffff;
    --accent-blue: #01458C;
    --accent-red: #D6191D;

    /* Typography */
    --font-base: 16px;

    --text-sm: 0.95rem;
    --text-md: 1rem;
    --text-lg: 1.2rem;

    --heading-xl: clamp(3rem, 6vw, 5.5rem);
    --heading-lg: 3rem;
    --heading-md: 2rem;

    /* Radius */
    --radius-lg: 24px;
}

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

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

    background-image:
        radial-gradient(at 0% 0%, rgba(1, 69, 140, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(214, 25, 29, 0.02) 0px, transparent 50%);

    color: #0f172a;

    margin: 0;
    overflow-x: hidden;

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

    line-height: 1.6;

    letter-spacing: -0.02em;

    font-weight: 400;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
}

.text-content-small {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
}

.heading-accent {
    font-style: italic;
    font-family: 'Playfair Display', serif;
    /* Consider importing this from Google Fonts */
    color: var(--accent-blue);
    font-weight: 400;
    margin-bottom: 0.5em;
    /* Adds breathing room */
}

.card-ultra-rounded {
    border-radius: 4rem;
    padding: 3rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
}

.card-ultra-rounded:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Glassmorphism utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass:hover {
    border-color: rgba(1, 69, 140, 0.2);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Gradients */
.hero-glow {
    background: radial-gradient(circle at 50% -20%, rgba(1, 69, 140, 0.08) 0%, #ffffff 80%);
}

.text-gradient {
    background: linear-gradient(135deg, #01458C 0%, #D6191D 50%, #01458C 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 5s linear infinite;
    text-shadow: 0 10px 20px rgba(1, 69, 140, 0.1);
}

.text-gradient-red {
    background: linear-gradient(to right, #D6191D, #ff4d4d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
    background: linear-gradient(to right, #01458C, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism for Product Cards */
.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 69, 140, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    backdrop-filter: blur(4px);
}

.image-wrapper:hover .overlay {
    opacity: 1;
}

.overlay span {
    color: white;
    font-weight: bold;
    border: 2px solid white;
    padding: 8px 20px;
    border-radius: 50px;
}

/* Service Card Glow */
.services .card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-blue) !important;
    box-shadow: 0 10px 40px rgba(1, 69, 140, 0.2) !important;
}

.page-title {
    position: relative;
    background-size: cover;
    padding: 80px 0;
}

.page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 10, 0.7);
}

.page-title .container {
    position: relative;
    z-index: 2;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes gradient-shift {
    to {
        background-position: 200% center;
    }
}

/* Nav link active state */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-red);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--accent-red) !important;
}

/* More Design Elements */
.design-shape {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    filter: blur(1px);
    z-index: -1;
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    50% {
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
    }

    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

.glow-card {
    position: relative;
}

.glow-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-red), var(--accent-blue));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(8px);
}

.glow-card:hover::before {
    opacity: 0.5;
}

/* Global Tailwind Color Overrides to Brand Theme */
.bg-blue-600,
.bg-blue-500 {
    background-color: var(--accent-blue) !important;
}

.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover {
    background-color: #013a75 !important;
}

.text-blue-600,
.text-blue-500,
.text-blue-400 {
    color: var(--accent-blue) !important;
}

.border-blue-600,
.border-blue-500 {
    border-color: var(--accent-blue) !important;
}

.shadow-blue-600\/20 {
    --tw-shadow-color: rgba(1, 69, 140, 0.1) !important;
}

.bg-emerald-600,
.bg-emerald-500 {
    background-color: var(--accent-red) !important;
}

.hover\:bg-emerald-500:hover,
.hover\:bg-emerald-600:hover {
    background-color: #b51518 !important;
}

.text-emerald-600,
.text-emerald-500,
.text-emerald-400 {
    color: var(--accent-red) !important;
}

.border-emerald-600,
.border-emerald-500 {
    border-color: var(--accent-red) !important;
}

.shadow-emerald-600\/20 {
    --tw-shadow-color: rgba(214, 25, 29, 0.1) !important;
}

/* Pulse animations colors */
.bg-blue-600\/40 {
    background-color: rgba(1, 69, 140, 0.4) !important;
}

.bg-emerald-500\/30 {
    background-color: rgba(214, 25, 29, 0.3) !important;
}

.bg-purple-600\/20 {
    background-color: rgba(1, 69, 140, 0.2) !important;
}

/* Use blue for purple glows too for consistency */

.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05), transparent);
    width: 100%;
}

.glass-accent {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.letter {
    will-change: opacity;
}

#scroll-reveal-text {
    perspective: 1000px;
}

@media (max-width: 768px) {
    :root {
        --type-scale-xl: 2.8rem;
        /* Smaller hero text for mobile */
    }

    body {
        font-size: 1.5rem;
        /* Slightly smaller base for mobile */
    }
}

h1 {
    font-size: var(--heading-xl);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.05em;
}

h2 {
    font-size: var(--heading-lg);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--heading-md);
    font-weight: 600;
    line-height: 1.2;
}

/* @media (min-width: 1024px) {
    #why-choose-section .sticky-content {
        zoom: 0.75;
    }
} */


/* ==========================================================================
   STRICT OVERRIDES FOR NAV HEADER TYPOGRAPHY (TARGETING UTILITY CLASSES)
   ========================================================================== */

/* 1. Force Main Top Level Links (Overriding inline .text-sm) */
#main-nav .nav-link,
#main-nav div.hidden.md\:flex.text-sm a {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    /* Bumps top level links cleanly up to 15px */
    font-weight: 700 !important;
    /* Sharp bold display */
    letter-spacing: 0.12em !important;
    /* Elegant spacing over the tracking-widest block */
    text-transform: uppercase !important;
}

/* 2. Force Contact Us Button Text Size (Overriding inline .text-xs) */
#main-nav a[href="contact.html"].text-xs,
#main-nav div.hidden.sm\:block a.bg-blue-600 {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    /* Matches top menu layout scaling perfectly at 15px */
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. Dropdown Service/Product Item Titles (As confirmed working beautifully in your second image) */
#main-nav .group\/item span.text-xs,
#main-nav .group\/item span.font-semibold,
#main-nav .group\/item span.whitespace-nowrap {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    /* Sharp, clear 15px titles */
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* 4. Dropdown Service/Product Item Subtitles */
#main-nav .group\/item span.text-\[10px\] {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.6875rem !important;
    /* Clear 11px subtitle tags */
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    margin-top: 0.25rem !important;
    display: inline-block !important;
}

/* 5. Subtitle Hover Colors */
#main-nav .group\/item:hover span.text-\[10px\] {
    color: #334155 !important;
}

/* ==========================================================================
   INSTANT CSS ACCENT HOOKS (ELIMINATES JAVASCRIPT HYDRATION FLASH)
   ========================================================================== */

/* Active State Styles */
html[data-page="about.html"] #main-nav a[href="about.html"],
html[data-page="case_study.html"] #main-nav a[href="case_study.html"],
html[data-page="products.html"] #main-nav a[href="products.html"],
html[data-page="services.html"] #main-nav a[href="services.html"] {
    color: var(--accent-red) !important;
}

html[data-page="about.html"] #main-nav a[href="about.html"]::after,
html[data-page="case_study.html"] #main-nav a[href="case_study.html"]::after,
html[data-page="products.html"] #main-nav a[href="products.html"]::after,
html[data-page="services.html"] #main-nav a[href="services.html"]::after {
    width: 100% !important;
}

/* Service Page Subpage Accent Flags */
html[data-page="website_dev.html"] #main-nav a[href="services.html"],
html[data-page="sms_services.html"] #main-nav a[href="services.html"],
html[data-page="custom_sw.html"] #main-nav a[href="services.html"],
html[data-page="whatsapp_api.html"] #main-nav a[href="services.html"],
html[data-page="support.html"] #main-nav a[href="services.html"],
html[data-page="digital_marketing.html"] #main-nav a[href="services.html"] {
    color: var(--accent-red) !important;
}

/* Product Page Subpage Accent Flags */
html[data-page="sahakarimis.html"] #main-nav a[href="products.html"],
html[data-page="rioeasy.html"] #main-nav a[href="products.html"],
html[data-page="mulla.html"] #main-nav a[href="products.html"],
html[data-page="vyapari.html"] #main-nav a[href="products.html"],
html[data-page="easylender.html"] #main-nav a[href="products.html"] {
    color: var(--accent-red) !important;
}

#main-nav {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Subpage Dropdown Active Highlighting */
html[data-page="website_dev.html"] #main-nav a[href="website_dev.html"],
html[data-page="sms_services.html"] #main-nav a[href="sms_services.html"],
html[data-page="custom_sw.html"] #main-nav a[href="custom_sw.html"],
html[data-page="whatsapp_api.html"] #main-nav a[href="whatsapp_api.html"],
html[data-page="support.html"] #main-nav a[href="support.html"],
html[data-page="digital_marketing.html"] #main-nav a[href="digital_marketing.html"],
html[data-page="sahakarimis.html"] #main-nav a[href="sahakarimis.html"],
html[data-page="rioeasy.html"] #main-nav a[href="rioeasy.html"],
html[data-page="mulla.html"] #main-nav a[href="mulla.html"],
html[data-page="vyapari.html"] #main-nav a[href="vyapari.html"],
html[data-page="easylender.html"] #main-nav a[href="easylender.html"] {
    background-color: #dbeafe !important;
}

html[data-page="website_dev.html"] #main-nav a[href="website_dev.html"] span,
html[data-page="sms_services.html"] #main-nav a[href="sms_services.html"] span,
html[data-page="custom_sw.html"] #main-nav a[href="custom_sw.html"] span,
html[data-page="whatsapp_api.html"] #main-nav a[href="whatsapp_api.html"] span,
html[data-page="support.html"] #main-nav a[href="support.html"] span,
html[data-page="digital_marketing.html"] #main-nav a[href="digital_marketing.html"] span,
html[data-page="sahakarimis.html"] #main-nav a[href="sahakarimis.html"] span,
html[data-page="rioeasy.html"] #main-nav a[href="rioeasy.html"] span,
html[data-page="mulla.html"] #main-nav a[href="mulla.html"] span,
html[data-page="vyapari.html"] #main-nav a[href="vyapari.html"] span,
html[data-page="easylender.html"] #main-nav a[href="easylender.html"] span {
    color: #0f172a !important;
}