/* Galano Grotesque Font Faces */
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/GalanoGrotesqueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/GalanoGrotesqueRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/GalanoGrotesqueMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/GalanoGrotesqueSemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/GalanoGrotesqueBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/GalanoGrotesqueExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Iosevka Font Faces */
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-400-normal.woff2') format('woff2'),
         url('../fonts/iosevka/iosevka-latin-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-400-italic.woff2') format('woff2'),
         url('../fonts/iosevka/iosevka-latin-400-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-500-normal.woff2') format('woff2'),
         url('../fonts/iosevka/iosevka-latin-500-normal.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-600-normal.woff2') format('woff2'),
         url('../fonts/iosevka/iosevka-latin-600-normal.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-700-normal.woff2') format('woff2'),
         url('../fonts/iosevka/iosevka-latin-700-normal.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-800-normal.woff2') format('woff2'),
         url('../fonts/iosevka/iosevka-latin-800-normal.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Instrument Serif Font Faces */
@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/Instrument-Serif/InstrumentSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

/* Font Family Classes */
.font-primary {
    font-family: 'Galano Grotesque', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-secondary {
    font-family: 'Iosevka', 'Space Mono', 'Courier New', monospace;
}

.font-third {
    font-family: 'Instrument Serif', Georgia, serif;
}

/* Base Styles */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Galano Grotesque', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
    background: #13001A;
}

::-webkit-scrollbar-thumb {
    background: #009688;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ABEBF0;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

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

/* Utility Classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

/* Custom Padding for Impact Cards */
.p-4_16_24 {
    padding: 16px 16px 24px;
}
.hidden-important{
    display: none !important;
}
/* Tab Button Styles */

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #ABEBF0, #C2A5CF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.purple-noise-bg {
    position: relative;
    background-color: #5E376E; /* solid purple base */
    overflow: hidden; /* ensures overlay doesn't spill */
  }
  
  /* Noise image overlay with opacity control */
  .purple-noise-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/noise-texture.jpg');
    background-position: center;
    background-repeat: repeat;
    mix-blend-mode: overlay; /* optional: keep your overlay blend */
    opacity: 0.25; /* <--- control image opacity here */
    pointer-events: none;
    background-size: 801px;
  }
/* Custom Backdrop Blur */
.backdrop-blur-custom {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Mobile Menu Styles */
#mobile-menu {
    transition: all 0.3s ease;
}

#mobile-menu.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* Social Icon Styling */
.footer-social-icons a {
    display: inline-flex    ;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background-color: #C2A5CF;
        border-radius: 4px;
        color: #000000;
        text-decoration: none;
        transition: all 0.3s     ease;
        padding: 6px;
}

.footer-social-icons a:hover {
    background-color: #B895C5;
    transform: translateY(-2px);
}

.footer-social-icons a i {
    font-size: 16px;
    color: #000000;
}

/* Loading State */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Intersection Observer Animation Classes */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Image Hover Effects */
.image-zoom {
    transition: transform 0.6s ease;
}

.image-zoom:hover {
    transform: scale(1.05);
}

/* Button Ripple Effect */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* Glassmorphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient Backgrounds */
.gradient-bg-1 {
    background: linear-gradient(-26deg, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 1) 87%),
                linear-gradient(45deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 1) 93%);
}

.gradient-bg-2 {
    background: linear-gradient(-24deg, rgba(0, 0, 0, 0) 58%, rgba(94, 55, 110, 1) 98%),
                linear-gradient(162deg, rgba(255, 255, 255, 0) 56%, rgba(171, 235, 240, 1) 100%);
}

/* Text Selection */
::selection {
    background: #009688;
    color: #FEF9F4;
}

::-moz-selection {
    background: #009688;
    color: #FEF9F4;
}

/* Focus Styles */
*:focus-visible {
    outline: 2px solid #ABEBF0;
    outline-offset: 2px;
}

/* Responsive Typography */
@media (max-width: 1024px) {
    .text-display-1 {
        font-size: 60px;
    }
    
    .text-h1 {
        font-size: 48px;
    }
    
    .text-h2 {
        font-size: 36px;
    }
    
    [class*="text-[129"] {
        font-size: 80px !important;
    }
    
    [class*="text-[119"] {
        font-size: 70px !important;
    }
}

@media (max-width: 768px) {
    .text-display-1 {
        font-size: 40px;
    }
    
    .text-h1 {
        font-size: 32px;
    }
    
    .text-h2 {
        font-size: 28px;
    }
    
    .text-h3 {
        font-size: 24px;
    }
    
    [class*="text-[129"] {
        font-size: 50px !important;
    }
    
    [class*="text-[119"] {
        font-size: 45px !important;
    }
    
    [class*="text-[56"] {
        font-size: 36px !important;
    }
}

/* Custom Grid for Footer */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

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

/* Parallax Effect */
.parallax {
    will-change: transform;
}

/* Performance Optimizations */
img {
    content-visibility: auto;
}

/* Lazy loading images - optimize rendering */
img[loading="lazy"] {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
}

/* Critical images - eager load */
img[loading="eager"],
img[fetchpriority="high"] {
    content-visibility: visible;
}

section {
    contain: layout style paint;
    display: flex;
}

/* Optimize sections for better performance */
section:not(#hero):not(#about-hero):not(#sales-hero):not(#why-hero):not(#hp-hero):not(#career-hero):not(#contact-hero):not(#team-hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 25%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


/* Print Styles */
@media print {
    nav, footer {
        display: none;
    }
    
    section {
        page-break-inside: avoid;
    }
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    /* Already dark by default */
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}




/* ====== RESPONSIVE LAYOUT (custom) ====== */
@media (max-width: 1024px) {
    /* Show mobile menu for screens between 768px and 1024px */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 10000;
        position: relative;
        border-radius: 4px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-btn:hover { 
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
    
    .mobile-menu-btn i { 
        font-size: 20px; 
        color: #FEF9F4; 
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    }
    
    .mobile-menu-btn:hover i { 
        color: #ABEBF0; 
    }
    
    .mobile-menu-btn.active i {
        transform: rotate(90deg);
    }
    
    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: none;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        display: block;
    }
    
    .mobile-menu-content {
        position: absolute;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: #13001A;
        border-right: 1px solid #009688;
        transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    .mobile-menu-overlay.active .mobile-menu-content {
        left: 0;
    }
    
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid rgba(0, 150, 136, 0.2);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-overlay.active .mobile-menu-header {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
    }
    
    .mobile-menu-logo {
        width: 120px;
        height: auto;
    }
    
    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-close:hover { 
        background-color: rgba(255, 255, 255, 0.1); 
    }
    
    .mobile-menu-close svg { 
        width: 24px;
        height: 24px;
        transition: all 0.3s ease; 
    }
    
    .mobile-menu-close svg path { 
        stroke: #FEF9F4; 
        transition: all 0.3s ease; 
    }
    
    .mobile-menu-close:hover svg path { 
        stroke: #ABEBF0; 
    }
    
    .mobile-menu-nav {
        padding: 24px;
    }
    
    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    /* Staggered animation for menu items */
    .mobile-menu-list li {
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-overlay.active .mobile-menu-list li {
        opacity: 1;
        transform: translateX(0);
    }
    
    .mobile-menu-overlay.active .mobile-menu-list li:nth-child(1) { transition-delay: 0.1s; }
    .mobile-menu-overlay.active .mobile-menu-list li:nth-child(2) { transition-delay: 0.15s; }
    .mobile-menu-overlay.active .mobile-menu-list li:nth-child(3) { transition-delay: 0.2s; }
    .mobile-menu-overlay.active .mobile-menu-list li:nth-child(4) { transition-delay: 0.25s; }
    .mobile-menu-overlay.active .mobile-menu-list li:nth-child(5) { transition-delay: 0.3s; }
    .mobile-menu-overlay.active .mobile-menu-list li:nth-child(6) { transition-delay: 0.35s; }
    
    /* Staggered animation for mobile Contact Us button */
    .mobile-menu-cta {
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-overlay.active .mobile-menu-cta {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.4s;
    }
    
    .mobile-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #FEF9F4;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        padding: 12px 0;
        border-bottom: 0;
        transition: color 0.3s ease;
    }
    
    .mobile-menu-link:hover { 
        color: #ABEBF0; 
    }
    
    .mobile-menu-dropdown { 
        display: flex; 
        flex-direction: column; 
    }
    
    .mobile-menu-dropdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .mobile-menu-chevron {
        width: 16px;
        height: 16px;
        opacity: 0.7;
        transition: transform 0.3s ease;
    }
    
    .mobile-menu-chevron.rotated { 
        transform: rotate(180deg); 
    }
    
    .mobile-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: rgba(0, 150, 136, 0.1);
        border-radius: 8px;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(-10px);
    }
    
    .mobile-submenu.active { 
        max-height: 200px;
        opacity: 1;
        transform: translateY(0);
    }
    
    .mobile-submenu-link {
        display: block;
        color: #FEF9F4;
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: color 0.3s ease;
    }
    
    .mobile-submenu-link:hover { 
        color: #ABEBF0; 
        background-color: rgba(0, 150, 136, 0.2); 
    }
    
    .mobile-submenu-link:last-child { 
        border-bottom: none; 
    }
    
    .mobile-menu-cta {
        width: 100%;
        margin-top: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 24px;
        background-color: #009688;
        border: 2px solid #009688;
        border-radius: 30px;
        font-size: 14px;
        font-family: 'Iosevka', 'Space Mono', 'Courier New', monospace;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #FEF9F4;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-cta:hover { 
        background-color: #13001A; 
        border-color: #009688; 
    }
    
    .mobile-menu-cta .eq-icon { 
        width: 10px; 
        height: 14px; 
    }
    
    body.menu-open { 
        overflow: hidden !important; 
    }
    
    /* ====== TABLET SPECIFIC STYLES (768px - 1024px) ====== */
    
    /* Global containers */
    #hero-content-container,
    #what-you-cant-hear,
    #speech-to-truth,
    #video,
    #voice-to-intelligence,
    #signal-applications,
    #pragyaavi-sales,
    #impact,
    #intelligence,
    #security,
    #cta {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Hero Section */
    #hero { 
        /* Add tablet-specific hero styles here */
    }
    
    #hero-content-container {
        /* Add tablet-specific hero container styles here */
    }
    
    #hero-content {
        /* Add tablet-specific hero content styles here */
    }
    
    #hero-title {
        /* Add tablet-specific hero title styles here */
    }
    
    #hero-description {
        /* Add tablet-specific hero description styles here */
    }
    
    #hero-cta-button {
        /* Add tablet-specific hero button styles here */
    }

    /* What You Can't Hear Section */
    #what-you-cant-hear {
        /* Add tablet-specific styles here */
    }
    
    #what-cant-hear-description {
        /* Add tablet-specific description styles here */
    }

    /* Speech to Truth Section */
    #speech-to-truth {
        /* Add tablet-specific styles here */
    }
    
    #speech-truth-content { 
        flex-direction: column !important; 
        gap: 16px !important; 
    }
    
    #speech-truth-right-column { 
        padding-left: 0 !important; 
    }
    
    #speech-truth-images-container { 
        flex-direction: column; 
    }
    
    #normal-view-card,
    #prathi-view-card { 
        width: 100% !important; 
        height: auto !important; 
    }

    /* Video Section */
    #video {
        /* Add tablet-specific video styles here */
    }

    /* Voice to Intelligence Section */
    #voice-to-intelligence {
        /* Add tablet-specific styles here */
    }
    
    #voice-intelligence-header { 
        flex-direction: column !important; 
    }
    
    #voice-intelligence-title-block,
    #voice-intelligence-description-block { 
        width: 100% !important; 
    }
    
    #voice-intelligence-tabs-container {
        /* Add tablet-specific tabs container styles here */
    }
    
    #voice-intelligence-tabs {
        /* Add tablet-specific tabs styles here */
    }
    
    #voice-intelligence-tab-content {
        /* Add tablet-specific tab content styles here */
    }

    /* Signal Applications Section */
    #signal-applications {
        /* Add tablet-specific styles here */
    }
    
    #signal-applications-card {
        width: 100% !important;
        max-width: none !important;
    }
    
    #signal-applications-container {
        /* Add tablet-specific container styles here */
    }
    
    #signal-applications-card {
        width: 100% !important;
        max-width: none !important;
    }
    
    #signal-applications-text {
        /* Add tablet-specific text styles here */
    }
    
    #signal-applications-bg-image {
        /* Add tablet-specific image styles here */
    }

    /* Pragyaavi Sales Section */
    #pragyaavi-sales {
        /* Add tablet-specific styles here */
    }
    
    #pragyaavi-main-content {
        /* Add tablet-specific main content styles here */
    }
    
    #pragyaavi-main-title {
        /* Add tablet-specific title styles here */
    }
    
    #pragyaavi-description {
        /* Add tablet-specific description styles here */
    }
    
    #pragyaavi-sales-tab,
    #pragyaavi-collections-tab {
        /* Add tablet-specific tab styles here */
    }
    
    #pragyaavi-cta-button {
        /* Add tablet-specific CTA button styles here */
    }

    /* Impact Section */
    #impact {
        /* Add tablet-specific styles here */
    }

    /* Intelligence Section */
    #intelligence {
        /* Add tablet-specific styles here */
    }
    
    #intelligence-feature-cards { 
        flex-wrap: wrap; 
    }
    
    #intelligence-feature-cards > div { 
        width: 100% !important; 
        height: auto !important; 
    }

    /* Security Section */
    #security {
        /* Add tablet-specific styles here */
    }

    /* CTA Section */
    #cta {
        /* Add tablet-specific styles here */
    }
    
    #cta-content {
        /* Add tablet-specific content styles here */
    }
    
    #cta-title {
        /* Add tablet-specific title styles here */
    }
    
    #cta-visual {
        /* Add tablet-specific visual styles here */
    }
    
    #cta-button {
        /* Add tablet-specific button styles here */
    }

    /* Typography - Tablet specific */
    .text-display-1 {
        /* Add tablet-specific display-1 styles here */
    }
    
    .text-h1 {
        /* Add tablet-specific h1 styles here */
    }
    
    .text-h2 {
        /* Add tablet-specific h2 styles here */
    }
    
    .text-h3 {
        /* Add tablet-specific h3 styles here */
    }
    
    .text-p1 {
        /* Add tablet-specific p1 styles here */
    }
    
    .text-p2 {
        /* Add tablet-specific p2 styles here */
    }

    /* Tab Buttons - Tablet specific */
    .tab-button {
        /* Add tablet-specific tab button styles here */
    }
    
    .tab-button.active {
        /* Add tablet-specific active tab styles here */
    }

    /* Footer - Tablet specific */
    .footer-desktop {
        /* Add tablet-specific desktop footer styles here */
    }
    
    .footer-mobile {
        /* Add tablet-specific mobile footer styles here */
    }
}


@media (max-width: 768px) {
    /* Navbar Mobile */
    nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    
    /* Hero */
    #hero { height: calc(var(--vh, 1vh) * 100); }
    #hero-content-container { padding-left: 16px !important; padding-right: 16px !important; }
    #hero-content { gap: 20px !important; max-width: 100% !important; }
    #hero-title { font-size: 50px !important; line-height: 1.1 !important; }
    #hero-description { font-size: 18px !important; line-height: 1.5 !important; }

    /* What you can't hear */
    #what-you-cant-hear { padding-top: 40px !important; padding-bottom: 40px !important; }
    #what-cant-hear-description { font-size: 34px !important; line-height: 1.2 !important; }
    
    /* Typography adjustments */
    .text-display-1 { font-size: 32px !important; line-height: 1.1 !important; }
    .text-h1 { font-size: 37px !important; line-height: 1.2 !important; }
    .text-h2 { font-size: 31px !important; line-height: 0.6 !important; padding-top: 10px;}
    .text-h3 { font-size: 20px !important; line-height: 1.2 !important; }
    .text-p1 { font-size: 18px !important;
        line-height: 1.4 !important;
        margin-top: 10px; }
    .text-p2 { font-size: 19px !important; line-height: 1.3 !important; }
    #voice-intelligence-title.text-h2 { 
        font-size: 34px !important;
        line-height: 1.2 !important;
        padding-top: 0;
    }
    #intelligence-title.text-h2 { 
        font-size: 34px !important;
        line-height: 1.2 !important;
        padding-top: 0;
    }

    #security-title.text-h2 { 
        font-size: 34px !important;
        line-height: 1.2 !important;
        padding-top: 0;
    }

    /* Speech to truth */
    #speech-to-truth { padding-left: 16px !important; padding-right: 16px !important; margin-top: 0 !important; }
    #speech-truth-caption-1 { font-size: 30px !important; padding: 8px !important; }

    /* Video section */
    #video { height: 220px !important; }

    /* Voice to intelligence */
    #voice-intelligence { padding-left: 16px !important; padding-right: 16px !important; }
    #voice-intelligence-tabs-container { flex-direction: column; }
    #voice-intelligence-tabs { width: 100% !important; flex-direction: column !important; gap: 8px; }
    #voice-intelligence-tab-content { padding-top: 0px; }
    #voice-to-intelligence{
        padding-bottom: 26px !important;
        border-bottom: 1px solid #3d2d42;
    }
    #signal-applications{
        padding-top: 23px;
        padding-bottom: 0;
    }

    /* Signal applications */
    #signal-applications-container { flex-direction: column; gap: 16px; }
    #signal-applications-card { 
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important; 
        flex-direction: column !important;
    }
    #signal-applications-text { 
        order: 1 !important; 
        margin-bottom: 0 !important;
        padding: 20px;
        padding-bottom: 0;
    }
    #signal-applications-bg-image { 
        order: 2 !important;
        position: static !important; 
        width: 100% !important; 
        height: auto !important; 
        opacity: 0.2; 
    }

    /* Pragyaavi section */
    #pragyaavi-container { flex-direction: column; gap: 16px; }
    #pragyaavi-tabs { gap: 8px !important;         display: inline-block; }
    #pragyaavi-main-content { padding: 0px !important; justify-content: flex-start !important; }
    #pragyaavi-text-content { max-width: 100% !important; }
    #pragyaavi-title-container { width: 100% !important; height: auto !important; }
    #pragyaavi-main-title { font-size: 32px !important; line-height: 1.2 !important; }

    #pragyaavi-sales{
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 38px;
    }
    #pragyaavi-sales-tab, #pragyaavi-collections-tab{
        display: inline-block;
        margin: 5px;
        margin-left: 0px;
    }
    #pragyaavi-sales-tab h3, #pragyaavi-collections-tab h3{
        font-size: 18px !important;
        line-height: 1.2 !important;
        
    }


    /* Pragyaavi card: remove background and set text color */
    #pragyaavi-main-content {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
    }
    #pragyaavi-main-title,
    #pragyaavi-description {
        color: #ABEBF0 !important;
    }

    /* Impact */
    #impact { padding-top: 0px !important;  }
    #impact-header { flex-direction: column; align-items: flex-start !important; gap: 16px !important; }
    .slider-btns-group { align-self: stretch; justify-content: space-between; width: 100%; }

    /* Intelligence */
    #intelligence{
        padding-top: 34px;
    }
    #intelligence-header { flex-direction: column; }
    #home-feature-card-1,
    #home-feature-card-2,
    #home-feature-card-3 { width: 100% !important; height: auto !important; }

    /* Security */
    #security { 
        height: auto !important;
        border-bottom: 1px solid #3f3045;
        padding-bottom: 30px;
        margin-bottom: 15px;
     }
    #security-container { flex-direction: column; }
    #security-image-container { width: 100%; height: auto; }
    #security-image { height: 210px !important; }

    /* CTA */
    #cta { 
        padding-left: 23px !important;
        padding-right: 16px !important;
        padding-top: 0;
        padding-bottom: 30px;
     }
    #cta-title { font-size: 44px !important; line-height: 1.2 !important; }
    #cta-content { flex-direction: row !important; align-items: center !important; gap: 16px !important; }
    #cta-visual { order: 2; opacity: 1 !important; flex: 1; }

    
    /* Footer Mobile Styles */
    footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 20px !important;
    }
    
    /* Main footer - stack columns vertically */
    footer .flex.justify-between.items-center {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: flex-start !important;
    }
    
    /* Motto section */
    footer .flex-1:first-child {
        width: 100% !important;
        text-align: left !important;
    }

    .footer-mobile-links .text-p2{
        padding-right: 50px !important;
    }
    
    /* Navigation links - wrap and center */
    footer .flex-2 {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    footer .flex.items-center.gap-\[60px\] {
        flex-wrap: wrap !important;
        gap: 16px !important;
        justify-content: flex-start !important;
    }
    
    /* Social icons - full width */
    footer .flex-1:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    /* Social Icon Styling */
    .footer-social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #C2A5CF;
        border-radius: 8px;
        color: #000000;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .footer-social-icons a:hover {
        background-color: #B895C5;
        transform: translateY(-2px);
    }
    
    .footer-social-icons a i {
        font-size: 16px;
        color: #000000;
    }
    
    /* Decorative graphic - adjust spacing */
    footer .py-85 {
        padding-top: 24px !important;
        
    }
    
    /* Bottom footer - stack vertically */
    footer .h-16.flex.justify-between {
        flex-direction: column !important;
        height: auto !important;
        gap: 16px !important;
        align-items: flex-start !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    
    /* Bottom footer links - wrap */
    footer .flex.justify-end.items-center.gap-10 {
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile footer legal links - stack vertically */
    .footer-mobile .flex.justify-end.items-center.gap-10 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    /* Mobile footer navigation links - 3 rows × 2 columns grid */
    .footer-mobile .flex.items-center.gap-\[60px\] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: 12px !important;
        justify-items: flex-start !important;
    }
    .footer-mobile-logo{
        border-top: 1px solid #2f4546;
        border-bottom: 1px solid #2f4546;
        padding-bottom: 23px !important;
        padding-top: 23px !important;
    }
    .mobile-menu-cta{
        padding: 0 !important;
    }
    .mobile-menu-cta .primary-cta-btn{
        display: flex !important;
    }
}