*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:80rem}}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:0.75rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.inline-block{display:inline-block}.flex{display:flex}.h-10{height:2.5rem}.h-5{height:1.25rem}.h-auto{height:auto}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-5{width:1.25rem}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[\#1A102C\]{--tw-border-opacity:1;border-color:rgb(26 16 44 / var(--tw-border-opacity, 1))}.border-\[\#E0DBE7\]{--tw-border-opacity:1;border-color:rgb(224 219 231 / var(--tw-border-opacity, 1))}.bg-\[\#1A102C\]{--tw-bg-opacity:1;background-color:rgb(26 16 44 / var(--tw-bg-opacity, 1))}.bg-\[\#F4F2F9\]{--tw-bg-opacity:1;background-color:rgb(244 242 249 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.text-\[\#1A102C\]{--tw-text-opacity:1;color:rgb(26 16 44 / var(--tw-text-opacity, 1))}.text-\[\#413A4D\]{--tw-text-opacity:1;color:rgb(65 58 77 / var(--tw-text-opacity, 1))}.text-\[\#5D566A\]{--tw-text-opacity:1;color:rgb(93 86 106 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-\[\#1A102C\]:hover{--tw-bg-opacity:1;background-color:rgb(26 16 44 / var(--tw-bg-opacity, 1))}.hover\:bg-\[\#413A4D\]:hover{--tw-bg-opacity:1;background-color:rgb(65 58 77 / var(--tw-bg-opacity, 1))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\:shadow-\[\#413A4D\]\/50:hover{--tw-shadow-color:rgb(65 58 77 / 0.5);--tw-shadow:var(--tw-shadow-colored)}@media (min-width: 640px){.sm\:flex-row{flex-direction:row}}@media (min-width: 768px){.md\:mb-12{margin-bottom:3rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-8{margin-bottom:2rem}.md\:h-12{height:3rem}.md\:h-6{height:1.5rem}.md\:w-12{width:3rem}.md\:w-6{width:1.5rem}.md\:gap-3{gap:0.75rem}.md\:gap-4{gap:1rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:0.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg\:mt-0{margin-top:0px}.lg\:w-auto{width:auto}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:gap-6{gap:1.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}}
@media (min-width: 640px) {
    .sm\:gap-12 {
        gap: 3rem;
    }
}
.download-badge img{height: 57px;}
.border-32{border-radius:32px;}
@media (max-width: 1024px) {
    .sm\:hidden {
        display: none !important;
    }
    .download-badge{text-align:center;}
    .download-badge img{margin:0 auto;}

}
@media (min-width: 1024px) {
    .text-7xl{
        font-size: 4rem;
        line-height: 1.25;    
    }
    .text-6xl {
        font-size: 3.50rem;
        line-height: 1.25;
    }
    .text-4xl {
        font-size: 2.50rem;
        line-height: 1.25;
    }
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    } 

    .lg\:hidden {
        display: none !important;
    }


}

#mega-nav-description{min-height:91px;}
/* WISE Theme Custom CSS - Consolidated from all components */
/* This file contains ALL custom styles from component HTML files */
/* Loads after Tailwind CSS to ensure proper override hierarchy */

/* Import Tailwind base styles */
/* @import url('tailwind.css'); - Using CDN Tailwind instead */

/* WISE Design System Colors */
:root {
    /* Oyster Color Scale */
    --oyster-100: #FBF9FF;
    --oyster-200: #F4F2F9;
    --oyster-300: #E0DBE7;
    --oyster-400: #B7B2C4;
    --oyster-500: #827C90;
    --oyster-600: #5D566A;
    --oyster-700: #413A4D;
    --oyster-800: #2C2439;
    --oyster-900: #1A102C;
    
    /* Lapis Color Scale */
    --lapis-100: #DAE3FF;
    --lapis-200: #ADC4FF;
    --lapis-300: #7BA0FF;
    --lapis-400: #456EFF;
    --lapis-500: #0324FF;
    --lapis-600: #021BAE;
    --lapis-700: #001479;
    --lapis-800: #010E55;
    --lapis-900: #000937;
    
    /* Mint Color Scale */
    --mint-100: #E2FFFD;
    --mint-200: #BBFFF9;
    --mint-300: #76FFF4;
    --mint-400: #25F7E5;
    --mint-500: #01D6C4;
    --mint-600: #00B1A5;
    --mint-700: #008277;
    --mint-800: #005C53;
    --mint-900: #003E39;
    
    /* Orange Color Scale */
    --orange-100: #FFF7ED;
    --orange-200: #FFEDD5;
    --orange-300: #FED7AA;
    --orange-400: #FDBA74;
    --orange-500: #FB923C;
    --orange-600: #F97316;
    --orange-700: #EA580C;
    --orange-800: #C2410C;
    --orange-900: #9A3412;
}

/* ============================================ */
/* COMPLETE COLOR UTILITY SYSTEM */
/* ============================================ */

/* OYSTER COLOR UTILITIES */
/* Background Colors */
.bg-oyster-100 { background-color: var(--oyster-100) !important; }
.bg-oyster-200 { background-color: var(--oyster-200) !important; }
.bg-oyster-300 { background-color: var(--oyster-300) !important; }
.bg-oyster-400 { background-color: var(--oyster-400) !important; }
.bg-oyster-500 { background-color: var(--oyster-500) !important; }
.bg-oyster-600 { background-color: var(--oyster-600) !important; }
.bg-oyster-700 { background-color: var(--oyster-700) !important; }
.bg-oyster-800 { background-color: var(--oyster-800) !important; }
.bg-oyster-900 { background-color: var(--oyster-900) !important; }

/* Text Colors */
.text-oyster-100 { color: var(--oyster-100) !important; }
.text-oyster-200 { color: var(--oyster-200) !important; }
.text-oyster-300 { color: var(--oyster-300) !important; }
.text-oyster-400 { color: var(--oyster-400) !important; }
.text-oyster-500 { color: var(--oyster-500) !important; }
.text-oyster-600 { color: var(--oyster-600) !important; }
.text-oyster-700 { color: var(--oyster-700) !important; }
.text-oyster-800 { color: var(--oyster-800) !important; }
.text-oyster-900 { color: var(--oyster-900) !important; }

/* Border Colors */
.border-oyster-100 { border-color: var(--oyster-100) !important; }
.border-oyster-200 { border-color: var(--oyster-200) !important; }
.border-oyster-300 { border-color: var(--oyster-300) !important; }
.border-oyster-400 { border-color: var(--oyster-400) !important; }
.border-oyster-500 { border-color: var(--oyster-500) !important; }
.border-oyster-600 { border-color: var(--oyster-600) !important; }
.border-oyster-700 { border-color: var(--oyster-700) !important; }
.border-oyster-800 { border-color: var(--oyster-800) !important; }
.border-oyster-900 { border-color: var(--oyster-900) !important; }

/* LAPIS COLOR UTILITIES */
/* Background Colors */
.bg-lapis-100 { background-color: var(--lapis-100) !important; }
.bg-lapis-200 { background-color: var(--lapis-200) !important; }
.bg-lapis-300 { background-color: var(--lapis-300) !important; }
.bg-lapis-400 { background-color: var(--lapis-400) !important; }
.bg-lapis-500 { background-color: var(--lapis-500) !important; }
.bg-lapis-600 { background-color: var(--lapis-600) !important; }
.bg-lapis-700 { background-color: var(--lapis-700) !important; }
.bg-lapis-800 { background-color: var(--lapis-800) !important; }
.bg-lapis-900 { background-color: var(--lapis-900) !important; }

/* Text Colors */
.text-lapis-100 { color: var(--lapis-100) !important; }
.text-lapis-200 { color: var(--lapis-200) !important; }
.text-lapis-300 { color: var(--lapis-300) !important; }
.text-lapis-400 { color: var(--lapis-400) !important; }
.text-lapis-500 { color: var(--lapis-500) !important; }
.text-lapis-600 { color: var(--lapis-600) !important; }
.text-lapis-700 { color: var(--lapis-700) !important; }
.text-lapis-800 { color: var(--lapis-800) !important; }
.text-lapis-900 { color: var(--lapis-900) !important; }

/* Border Colors */
.border-lapis-100 { border-color: var(--lapis-100) !important; }
.border-lapis-200 { border-color: var(--lapis-200) !important; }
.border-lapis-300 { border-color: var(--lapis-300) !important; }
.border-lapis-400 { border-color: var(--lapis-400) !important; }
.border-lapis-500 { border-color: var(--lapis-500) !important; }
.border-lapis-600 { border-color: var(--lapis-600) !important; }
.border-lapis-700 { border-color: var(--lapis-700) !important; }
.border-lapis-800 { border-color: var(--lapis-800) !important; }
.border-lapis-900 { border-color: var(--lapis-900) !important; }

/* MINT COLOR UTILITIES */
/* Background Colors */
.bg-mint-100 { background-color: var(--mint-100) !important; }
.bg-mint-200 { background-color: var(--mint-200) !important; }
.bg-mint-300 { background-color: var(--mint-300) !important; }
.bg-mint-400 { background-color: var(--mint-400) !important; }
.bg-mint-500 { background-color: var(--mint-500) !important; }
.bg-mint-600 { background-color: var(--mint-600) !important; }
.bg-mint-700 { background-color: var(--mint-700) !important; }
.bg-mint-800 { background-color: var(--mint-800) !important; }
.bg-mint-900 { background-color: var(--mint-900) !important; }

/* Text Colors */
.text-mint-100 { color: var(--mint-100) !important; }
.text-mint-200 { color: var(--mint-200) !important; }
.text-mint-300 { color: var(--mint-300) !important; }
.text-mint-400 { color: var(--mint-400) !important; }
.text-mint-500 { color: var(--mint-500) !important; }
.text-mint-600 { color: var(--mint-600) !important; }
.text-mint-700 { color: var(--mint-700) !important; }
.text-mint-800 { color: var(--mint-800) !important; }
.text-mint-900 { color: var(--mint-900) !important; }

/* Border Colors */
.border-mint-100 { border-color: var(--mint-100) !important; }
.border-mint-200 { border-color: var(--mint-200) !important; }
.border-mint-300 { border-color: var(--mint-300) !important; }
.border-mint-400 { border-color: var(--mint-400) !important; }
.border-mint-500 { border-color: var(--mint-500) !important; }
.border-mint-600 { border-color: var(--mint-600) !important; }
.border-mint-700 { border-color: var(--mint-700) !important; }
.border-mint-800 { border-color: var(--mint-800) !important; }
.border-mint-900 { border-color: var(--mint-900) !important; }

/* ORANGE COLOR UTILITIES */
/* Background Colors */
.bg-orange-100 { background-color: var(--orange-100) !important; }
.bg-orange-200 { background-color: var(--orange-200) !important; }
.bg-orange-300 { background-color: var(--orange-300) !important; }
.bg-orange-400 { background-color: var(--orange-400) !important; }
.bg-orange-500 { background-color: var(--orange-500) !important; }
.bg-orange-600 { background-color: var(--orange-600) !important; }
.bg-orange-700 { background-color: var(--orange-700) !important; }
.bg-orange-800 { background-color: var(--orange-800) !important; }
.bg-orange-900 { background-color: var(--orange-900) !important; }

/* Text Colors */
.text-orange-100 { color: var(--orange-100) !important; }
.text-orange-200 { color: var(--orange-200) !important; }
.text-orange-300 { color: var(--orange-300) !important; }
.text-orange-400 { color: var(--orange-400) !important; }
.text-orange-500 { color: var(--orange-500) !important; }
.text-orange-600 { color: var(--orange-600) !important; }
.text-orange-700 { color: var(--orange-700) !important; }
.text-orange-800 { color: var(--orange-800) !important; }
.text-orange-900 { color: var(--orange-900) !important; }

/* Border Colors */
.border-orange-100 { border-color: var(--orange-100) !important; }
.border-orange-200 { border-color: var(--orange-200) !important; }
.border-orange-300 { border-color: var(--orange-300) !important; }
.border-orange-400 { border-color: var(--orange-400) !important; }
.border-orange-500 { border-color: var(--orange-500) !important; }
.border-orange-600 { border-color: var(--orange-600) !important; }
.border-orange-700 { border-color: var(--orange-700) !important; }
.border-orange-800 { border-color: var(--orange-800) !important; }
.border-orange-900 { border-color: var(--orange-900) !important; }

/* BERRY COLOR UTILITIES (Additional color) */
/* Background Colors */
.bg-berry-100 { background-color: #F3E8F3 !important; }
.bg-berry-200 { background-color: #E6D1E6 !important; }
.bg-berry-300 { background-color: #D9BBD9 !important; }
.bg-berry-400 { background-color: #CC9FCC !important; }
.bg-berry-500 { background-color: #91148F !important; }
.bg-berry-600 { background-color: #7A0F78 !important; }
.bg-berry-700 { background-color: #630A61 !important; }
.bg-berry-800 { background-color: #4C054A !important; }
.bg-berry-900 { background-color: #350033 !important; }

/* Text Colors */
.text-berry-100 { color: #F3E8F3 !important; }
.text-berry-200 { color: #E6D1E6 !important; }
.text-berry-300 { color: #D9BBD9 !important; }
.text-berry-400 { color: #CC9FCC !important; }
.text-berry-500 { color: #91148F !important; }
.text-berry-600 { color: #7A0F78 !important; }
.text-berry-700 { color: #630A61 !important; }
.text-berry-800 { color: #4C054A !important; }
.text-berry-900 { color: #350033 !important; }

/* Border Colors */
.border-berry-100 { border-color: #F3E8F3 !important; }
.border-berry-200 { border-color: #E6D1E6 !important; }
.border-berry-300 { border-color: #D9BBD9 !important; }
.border-berry-400 { border-color: #CC9FCC !important; }
.border-berry-500 { border-color: #91148F !important; }
.border-berry-600 { border-color: #7A0F78 !important; }
.border-berry-700 { border-color: #630A61 !important; }
.border-berry-800 { border-color: #4C054A !important; }
.border-berry-900 { border-color: #350033 !important; }

/* ============================================ */
/* HOVER STATES FOR ALL COLOR UTILITIES */
/* ============================================ */

/* OYSTER HOVER STATES */
.hover\:bg-oyster-100:hover { background-color: var(--oyster-100) !important; }
.hover\:bg-oyster-200:hover { background-color: var(--oyster-200) !important; }
.hover\:bg-oyster-300:hover { background-color: var(--oyster-300) !important; }
.hover\:bg-oyster-400:hover { background-color: var(--oyster-400) !important; }
.hover\:bg-oyster-500:hover { background-color: var(--oyster-500) !important; }
.hover\:bg-oyster-600:hover { background-color: var(--oyster-600) !important; }
.hover\:bg-oyster-700:hover { background-color: var(--oyster-700) !important; }
.hover\:bg-oyster-800:hover { background-color: var(--oyster-800) !important; }
.hover\:bg-oyster-900:hover { background-color: var(--oyster-900) !important; }

.hover\:text-oyster-100:hover { color: var(--oyster-100) !important; }
.hover\:text-oyster-200:hover { color: var(--oyster-200) !important; }
.hover\:text-oyster-300:hover { color: var(--oyster-300) !important; }
.hover\:text-oyster-400:hover { color: var(--oyster-400) !important; }
.hover\:text-oyster-500:hover { color: var(--oyster-500) !important; }
.hover\:text-oyster-600:hover { color: var(--oyster-600) !important; }
.hover\:text-oyster-700:hover { color: var(--oyster-700) !important; }
.hover\:text-oyster-800:hover { color: var(--oyster-800) !important; }
.hover\:text-oyster-900:hover { color: var(--oyster-900) !important; }

.hover\:border-oyster-100:hover { border-color: var(--oyster-100) !important; }
.hover\:border-oyster-200:hover { border-color: var(--oyster-200) !important; }
.hover\:border-oyster-300:hover { border-color: var(--oyster-300) !important; }
.hover\:border-oyster-400:hover { border-color: var(--oyster-400) !important; }
.hover\:border-oyster-500:hover { border-color: var(--oyster-500) !important; }
.hover\:border-oyster-600:hover { border-color: var(--oyster-600) !important; }
.hover\:border-oyster-700:hover { border-color: var(--oyster-700) !important; }
.hover\:border-oyster-800:hover { border-color: var(--oyster-800) !important; }
.hover\:border-oyster-900:hover { border-color: var(--oyster-900) !important; }

/* LAPIS HOVER STATES */
.hover\:bg-lapis-100:hover { background-color: var(--lapis-100) !important; }
.hover\:bg-lapis-200:hover { background-color: var(--lapis-200) !important; }
.hover\:bg-lapis-300:hover { background-color: var(--lapis-300) !important; }
.hover\:bg-lapis-400:hover { background-color: var(--lapis-400) !important; }
.hover\:bg-lapis-500:hover { background-color: var(--lapis-500) !important; }
.hover\:bg-lapis-600:hover { background-color: var(--lapis-600) !important; }
.hover\:bg-lapis-700:hover { background-color: var(--lapis-700) !important; }
.hover\:bg-lapis-800:hover { background-color: var(--lapis-800) !important; }
.hover\:bg-lapis-900:hover { background-color: var(--lapis-900) !important; }

.hover\:text-lapis-100:hover { color: var(--lapis-100) !important; }
.hover\:text-lapis-200:hover { color: var(--lapis-200) !important; }
.hover\:text-lapis-300:hover { color: var(--lapis-300) !important; }
.hover\:text-lapis-400:hover { color: var(--lapis-400) !important; }
.hover\:text-lapis-500:hover { color: var(--lapis-500) !important; }
.hover\:text-lapis-600:hover { color: var(--lapis-600) !important; }
.hover\:text-lapis-700:hover { color: var(--lapis-700) !important; }
.hover\:text-lapis-800:hover { color: var(--lapis-800) !important; }
.hover\:text-lapis-900:hover { color: var(--lapis-900) !important; }

.hover\:border-lapis-100:hover { border-color: var(--lapis-100) !important; }
.hover\:border-lapis-200:hover { border-color: var(--lapis-200) !important; }
.hover\:border-lapis-300:hover { border-color: var(--lapis-300) !important; }
.hover\:border-lapis-400:hover { border-color: var(--lapis-400) !important; }
.hover\:border-lapis-500:hover { border-color: var(--lapis-500) !important; }
.hover\:border-lapis-600:hover { border-color: var(--lapis-600) !important; }
.hover\:border-lapis-700:hover { border-color: var(--lapis-700) !important; }
.hover\:border-lapis-800:hover { border-color: var(--lapis-800) !important; }
.hover\:border-lapis-900:hover { border-color: var(--lapis-900) !important; }

/* MINT HOVER STATES */
.hover\:bg-mint-100:hover { background-color: var(--mint-100) !important; }
.hover\:bg-mint-200:hover { background-color: var(--mint-200) !important; }
.hover\:bg-mint-300:hover { background-color: var(--mint-300) !important; }
.hover\:bg-mint-400:hover { background-color: var(--mint-400) !important; }
.hover\:bg-mint-500:hover { background-color: var(--mint-500) !important; }
.hover\:bg-mint-600:hover { background-color: var(--mint-600) !important; }
.hover\:bg-mint-700:hover { background-color: var(--mint-700) !important; }
.hover\:bg-mint-800:hover { background-color: var(--mint-800) !important; }
.hover\:bg-mint-900:hover { background-color: var(--mint-900) !important; }

.hover\:text-mint-100:hover { color: var(--mint-100) !important; }
.hover\:text-mint-200:hover { color: var(--mint-200) !important; }
.hover\:text-mint-300:hover { color: var(--mint-300) !important; }
.hover\:text-mint-400:hover { color: var(--mint-400) !important; }
.hover\:text-mint-500:hover { color: var(--mint-500) !important; }
.hover\:text-mint-600:hover { color: var(--mint-600) !important; }
.hover\:text-mint-700:hover { color: var(--mint-700) !important; }
.hover\:text-mint-800:hover { color: var(--mint-800) !important; }
.hover\:text-mint-900:hover { color: var(--mint-900) !important; }

.hover\:border-mint-100:hover { border-color: var(--mint-100) !important; }
.hover\:border-mint-200:hover { border-color: var(--mint-200) !important; }
.hover\:border-mint-300:hover { border-color: var(--mint-300) !important; }
.hover\:border-mint-400:hover { border-color: var(--mint-400) !important; }
.hover\:border-mint-500:hover { border-color: var(--mint-500) !important; }
.hover\:border-mint-600:hover { border-color: var(--mint-600) !important; }
.hover\:border-mint-700:hover { border-color: var(--mint-700) !important; }
.hover\:border-mint-800:hover { border-color: var(--mint-800) !important; }
.hover\:border-mint-900:hover { border-color: var(--mint-900) !important; }

/* ORANGE HOVER STATES */
.hover\:bg-orange-100:hover { background-color: var(--orange-100) !important; }
.hover\:bg-orange-200:hover { background-color: var(--orange-200) !important; }
.hover\:bg-orange-300:hover { background-color: var(--orange-300) !important; }
.hover\:bg-orange-400:hover { background-color: var(--orange-400) !important; }
.hover\:bg-orange-500:hover { background-color: var(--orange-500) !important; }
.hover\:bg-orange-600:hover { background-color: var(--orange-600) !important; }
.hover\:bg-orange-700:hover { background-color: var(--orange-700) !important; }
.hover\:bg-orange-800:hover { background-color: var(--orange-800) !important; }
.hover\:bg-orange-900:hover { background-color: var(--orange-900) !important; }

.hover\:text-orange-100:hover { color: var(--orange-100) !important; }
.hover\:text-orange-200:hover { color: var(--orange-200) !important; }
.hover\:text-orange-300:hover { color: var(--orange-300) !important; }
.hover\:text-orange-400:hover { color: var(--orange-400) !important; }
.hover\:text-orange-500:hover { color: var(--orange-500) !important; }
.hover\:text-orange-600:hover { color: var(--orange-600) !important; }
.hover\:text-orange-700:hover { color: var(--orange-700) !important; }
.hover\:text-orange-800:hover { color: var(--orange-800) !important; }
.hover\:text-orange-900:hover { color: var(--orange-900) !important; }

.hover\:border-orange-100:hover { border-color: var(--orange-100) !important; }
.hover\:border-orange-200:hover { border-color: var(--orange-200) !important; }
.hover\:border-orange-300:hover { border-color: var(--orange-300) !important; }
.hover\:border-orange-400:hover { border-color: var(--orange-400) !important; }
.hover\:border-orange-500:hover { border-color: var(--orange-500) !important; }
.hover\:border-orange-600:hover { border-color: var(--orange-600) !important; }
.hover\:border-orange-700:hover { border-color: var(--orange-700) !important; }
.hover\:border-orange-800:hover { border-color: var(--orange-800) !important; }
.hover\:border-orange-900:hover { border-color: var(--orange-900) !important; }

/* BERRY HOVER STATES */
.hover\:bg-berry-100:hover { background-color: #F3E8F3 !important; }
.hover\:bg-berry-200:hover { background-color: #E6D1E6 !important; }
.hover\:bg-berry-300:hover { background-color: #D9BBD9 !important; }
.hover\:bg-berry-400:hover { background-color: #CC9FCC !important; }
.hover\:bg-berry-500:hover { background-color: #91148F !important; }
.hover\:bg-berry-600:hover { background-color: #7A0F78 !important; }
.hover\:bg-berry-700:hover { background-color: #630A61 !important; }
.hover\:bg-berry-800:hover { background-color: #4C054A !important; }
.hover\:bg-berry-900:hover { background-color: #350033 !important; }

.hover\:text-berry-100:hover { color: #F3E8F3 !important; }
.hover\:text-berry-200:hover { color: #E6D1E6 !important; }
.hover\:text-berry-300:hover { color: #D9BBD9 !important; }
.hover\:text-berry-400:hover { color: #CC9FCC !important; }
.hover\:text-berry-500:hover { color: #91148F !important; }
.hover\:text-berry-600:hover { color: #7A0F78 !important; }
.hover\:text-berry-700:hover { color: #630A61 !important; }
.hover\:text-berry-800:hover { color: #4C054A !important; }
.hover\:text-berry-900:hover { color: #350033 !important; }

.hover\:border-berry-100:hover { border-color: #F3E8F3 !important; }
.hover\:border-berry-200:hover { border-color: #E6D1E6 !important; }
.hover\:border-berry-300:hover { border-color: #D9BBD9 !important; }
.hover\:border-berry-400:hover { border-color: #CC9FCC !important; }
.hover\:border-berry-500:hover { border-color: #91148F !important; }
.hover\:border-berry-600:hover { border-color: #7A0F78 !important; }
.hover\:border-berry-700:hover { border-color: #630A61 !important; }
.hover\:border-berry-800:hover { border-color: #4C054A !important; }
.hover\:border-berry-900:hover { border-color: #350033 !important; }

.hover\:font-bold:hover{font-weight:bold;}
.hover\:underline:hover{text-decoration: underline;}
.group:hover .group-hover\:hidden {
    display: none;
}
.group:hover .group-hover\:rotate-180{
    rotate:180deg;
}
.hero-section {
    background: transparent;
}
@media (min-width: 1536px) {
    .container {
        max-width: 1314px;
    }
}
/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--lapis-500);
    color: white;
}

.btn-primary:hover {
    background-color: var(--lapis-600);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* ============================================ */
/* FOCUS STATES FOR ALL COLOR UTILITIES */
/* ============================================ */

/* OYSTER FOCUS STATES */
.focus\:bg-oyster-100:focus { background-color: var(--oyster-100) !important; }
.focus\:bg-oyster-200:focus { background-color: var(--oyster-200) !important; }
.focus\:bg-oyster-300:focus { background-color: var(--oyster-300) !important; }
.focus\:bg-oyster-400:focus { background-color: var(--oyster-400) !important; }
.focus\:bg-oyster-500:focus { background-color: var(--oyster-500) !important; }
.focus\:bg-oyster-600:focus { background-color: var(--oyster-600) !important; }
.focus\:bg-oyster-700:focus { background-color: var(--oyster-700) !important; }
.focus\:bg-oyster-800:focus { background-color: var(--oyster-800) !important; }
.focus\:bg-oyster-900:focus { background-color: var(--oyster-900) !important; }

.focus\:text-oyster-100:focus { color: var(--oyster-100) !important; }
.focus\:text-oyster-200:focus { color: var(--oyster-200) !important; }
.focus\:text-oyster-300:focus { color: var(--oyster-300) !important; }
.focus\:text-oyster-400:focus { color: var(--oyster-400) !important; }
.focus\:text-oyster-500:focus { color: var(--oyster-500) !important; }
.focus\:text-oyster-600:focus { color: var(--oyster-600) !important; }
.focus\:text-oyster-700:focus { color: var(--oyster-700) !important; }
.focus\:text-oyster-800:focus { color: var(--oyster-800) !important; }
.focus\:text-oyster-900:focus { color: var(--oyster-900) !important; }

.focus\:border-oyster-100:focus { border-color: var(--oyster-100) !important; }
.focus\:border-oyster-200:focus { border-color: var(--oyster-200) !important; }
.focus\:border-oyster-300:focus { border-color: var(--oyster-300) !important; }
.focus\:border-oyster-400:focus { border-color: var(--oyster-400) !important; }
.focus\:border-oyster-500:focus { border-color: var(--oyster-500) !important; }
.focus\:border-oyster-600:focus { border-color: var(--oyster-600) !important; }
.focus\:border-oyster-700:focus { border-color: var(--oyster-700) !important; }
.focus\:border-oyster-800:focus { border-color: var(--oyster-800) !important; }
.focus\:border-oyster-900:focus { border-color: var(--oyster-900) !important; }

/* LAPIS FOCUS STATES */
.focus\:bg-lapis-100:focus { background-color: var(--lapis-100) !important; }
.focus\:bg-lapis-200:focus { background-color: var(--lapis-200) !important; }
.focus\:bg-lapis-300:focus { background-color: var(--lapis-300) !important; }
.focus\:bg-lapis-400:focus { background-color: var(--lapis-400) !important; }
.focus\:bg-lapis-500:focus { background-color: var(--lapis-500) !important; }
.focus\:bg-lapis-600:focus { background-color: var(--lapis-600) !important; }
.focus\:bg-lapis-700:focus { background-color: var(--lapis-700) !important; }
.focus\:bg-lapis-800:focus { background-color: var(--lapis-800) !important; }
.focus\:bg-lapis-900:focus { background-color: var(--lapis-900) !important; }

.focus\:text-lapis-100:focus { color: var(--lapis-100) !important; }
.focus\:text-lapis-200:focus { color: var(--lapis-200) !important; }
.focus\:text-lapis-300:focus { color: var(--lapis-300) !important; }
.focus\:text-lapis-400:focus { color: var(--lapis-400) !important; }
.focus\:text-lapis-500:focus { color: var(--lapis-500) !important; }
.focus\:text-lapis-600:focus { color: var(--lapis-600) !important; }
.focus\:text-lapis-700:focus { color: var(--lapis-700) !important; }
.focus\:text-lapis-800:focus { color: var(--lapis-800) !important; }
.focus\:text-lapis-900:focus { color: var(--lapis-900) !important; }

.focus\:border-lapis-100:focus { border-color: var(--lapis-100) !important; }
.focus\:border-lapis-200:focus { border-color: var(--lapis-200) !important; }
.focus\:border-lapis-300:focus { border-color: var(--lapis-300) !important; }
.focus\:border-lapis-400:focus { border-color: var(--lapis-400) !important; }
.focus\:border-lapis-500:focus { border-color: var(--lapis-500) !important; }
.focus\:border-lapis-600:focus { border-color: var(--lapis-600) !important; }
.focus\:border-lapis-700:focus { border-color: var(--lapis-700) !important; }
.focus\:border-lapis-800:focus { border-color: var(--lapis-800) !important; }
.focus\:border-lapis-900:focus { border-color: var(--lapis-900) !important; }

/* MINT FOCUS STATES */
.focus\:bg-mint-100:focus { background-color: var(--mint-100) !important; }
.focus\:bg-mint-200:focus { background-color: var(--mint-200) !important; }
.focus\:bg-mint-300:focus { background-color: var(--mint-300) !important; }
.focus\:bg-mint-400:focus { background-color: var(--mint-400) !important; }
.focus\:bg-mint-500:focus { background-color: var(--mint-500) !important; }
.focus\:bg-mint-600:focus { background-color: var(--mint-600) !important; }
.focus\:bg-mint-700:focus { background-color: var(--mint-700) !important; }
.focus\:bg-mint-800:focus { background-color: var(--mint-800) !important; }
.focus\:bg-mint-900:focus { background-color: var(--mint-900) !important; }

.focus\:text-mint-100:focus { color: var(--mint-100) !important; }
.focus\:text-mint-200:focus { color: var(--mint-200) !important; }
.focus\:text-mint-300:focus { color: var(--mint-300) !important; }
.focus\:text-mint-400:focus { color: var(--mint-400) !important; }
.focus\:text-mint-500:focus { color: var(--mint-500) !important; }
.focus\:text-mint-600:focus { color: var(--mint-600) !important; }
.focus\:text-mint-700:focus { color: var(--mint-700) !important; }
.focus\:text-mint-800:focus { color: var(--mint-800) !important; }
.focus\:text-mint-900:focus { color: var(--mint-900) !important; }

.focus\:border-mint-100:focus { border-color: var(--mint-100) !important; }
.focus\:border-mint-200:focus { border-color: var(--mint-200) !important; }
.focus\:border-mint-300:focus { border-color: var(--mint-300) !important; }
.focus\:border-mint-400:focus { border-color: var(--mint-400) !important; }
.focus\:border-mint-500:focus { border-color: var(--mint-500) !important; }
.focus\:border-mint-600:focus { border-color: var(--mint-600) !important; }
.focus\:border-mint-700:focus { border-color: var(--mint-700) !important; }
.focus\:border-mint-800:focus { border-color: var(--mint-800) !important; }
.focus\:border-mint-900:focus { border-color: var(--mint-900) !important; }

/* ORANGE FOCUS STATES */
.focus\:bg-orange-100:focus { background-color: var(--orange-100) !important; }
.focus\:bg-orange-200:focus { background-color: var(--orange-200) !important; }
.focus\:bg-orange-300:focus { background-color: var(--orange-300) !important; }
.focus\:bg-orange-400:focus { background-color: var(--orange-400) !important; }
.focus\:bg-orange-500:focus { background-color: var(--orange-500) !important; }
.focus\:bg-orange-600:focus { background-color: var(--orange-600) !important; }
.focus\:bg-orange-700:focus { background-color: var(--orange-700) !important; }
.focus\:bg-orange-800:focus { background-color: var(--orange-800) !important; }
.focus\:bg-orange-900:focus { background-color: var(--orange-900) !important; }

.focus\:text-orange-100:focus { color: var(--orange-100) !important; }
.focus\:text-orange-200:focus { color: var(--orange-200) !important; }
.focus\:text-orange-300:focus { color: var(--orange-300) !important; }
.focus\:text-orange-400:focus { color: var(--orange-400) !important; }
.focus\:text-orange-500:focus { color: var(--orange-500) !important; }
.focus\:text-orange-600:focus { color: var(--orange-600) !important; }
.focus\:text-orange-700:focus { color: var(--orange-700) !important; }
.focus\:text-orange-800:focus { color: var(--orange-800) !important; }
.focus\:text-orange-900:focus { color: var(--orange-900) !important; }

.focus\:border-orange-100:focus { border-color: var(--orange-100) !important; }
.focus\:border-orange-200:focus { border-color: var(--orange-200) !important; }
.focus\:border-orange-300:focus { border-color: var(--orange-300) !important; }
.focus\:border-orange-400:focus { border-color: var(--orange-400) !important; }
.focus\:border-orange-500:focus { border-color: var(--orange-500) !important; }
.focus\:border-orange-600:focus { border-color: var(--orange-600) !important; }
.focus\:border-orange-700:focus { border-color: var(--orange-700) !important; }
.focus\:border-orange-800:focus { border-color: var(--orange-800) !important; }
.focus\:border-orange-900:focus { border-color: var(--orange-900) !important; }

/* BERRY FOCUS STATES */
.focus\:bg-berry-100:focus { background-color: #F3E8F3 !important; }
.focus\:bg-berry-200:focus { background-color: #E6D1E6 !important; }
.focus\:bg-berry-300:focus { background-color: #D9BBD9 !important; }
.focus\:bg-berry-400:focus { background-color: #CC9FCC !important; }
.focus\:bg-berry-500:focus { background-color: #91148F !important; }
.focus\:bg-berry-600:focus { background-color: #7A0F78 !important; }
.focus\:bg-berry-700:focus { background-color: #630A61 !important; }
.focus\:bg-berry-800:focus { background-color: #4C054A !important; }
.focus\:bg-berry-900:focus { background-color: #350033 !important; }

.focus\:text-berry-100:focus { color: #F3E8F3 !important; }
.focus\:text-berry-200:focus { color: #E6D1E6 !important; }
.focus\:text-berry-300:focus { color: #D9BBD9 !important; }
.focus\:text-berry-400:focus { color: #CC9FCC !important; }
.focus\:text-berry-500:focus { color: #91148F !important; }
.focus\:text-berry-600:focus { color: #7A0F78 !important; }
.focus\:text-berry-700:focus { color: #630A61 !important; }
.focus\:text-berry-800:focus { color: #4C054A !important; }
.focus\:text-berry-900:focus { color: #350033 !important; }

.focus\:border-berry-100:focus { border-color: #F3E8F3 !important; }
.focus\:border-berry-200:focus { border-color: #E6D1E6 !important; }
.focus\:border-berry-300:focus { border-color: #D9BBD9 !important; }
.focus\:border-berry-400:focus { border-color: #CC9FCC !important; }
.focus\:border-berry-500:focus { border-color: #91148F !important; }
.focus\:border-berry-600:focus { border-color: #7A0F78 !important; }
.focus\:border-berry-700:focus { border-color: #630A61 !important; }
.focus\:border-berry-800:focus { border-color: #4C054A !important; }
.focus\:border-berry-900:focus { border-color: #350033 !important; }

/* Clover background positioning */
.clover-bg {
    position: absolute;
    top: 0;
    left: 5%;
    z-index: 1;
    pointer-events: none;
}

.phone-container {
    position: relative;
    z-index: 10;
}

/* Typography */
.text-body-l-bold {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 700;
}

/* Simple headline class */
.headline {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1A102C;
}

/* WISE Design System Typography Classes */
.text-title-2xl-bold { 
    font-size: 2rem !important; 
    line-height: 1.1 !important; 
    font-weight: 500 !important; 
}
.text-body-l-regular{
        font-size: 18px;
}
.text-title-xl-bold { 
    font-size: 3rem !important; 
    line-height: 1.1 !important; 
    font-weight: 700 !important; 
}

.text-title-l-bold { 
    font-size: 1.5rem !important; 
    line-height: 1.2 !important; 
    font-weight: 500 !important; 
}

.text-title-m-semibold { 
    font-size: 2rem !important; 
    line-height: 1.2 !important; 
    font-weight: 600 !important; 
}

.text-title-s-semibold { 
    font-size: 1.5rem !important; 
    line-height: 1.3 !important; 
    font-weight: 600 !important; 
}

.text-title-xs-semibold { 
    font-size: 1.25rem !important; 
    line-height: 1.3 !important; 
    font-weight: 600 !important; 
}

/* Ensure proper font loading */
body {
    font-family: 'Figtree', sans-serif;
    margin: 0;
    padding: 0;
}

/* ============================================ */
/* CODE CARDS COMPONENT STYLES */
/* ============================================ */
.code-card {
    background: white;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    padding: 32px 24px;
    max-width: 320px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.code-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.code-card-image {
    margin: 0 auto 32px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.code-card-image img {
    transition: transform 0.3s ease;
}


.code-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    text-align: center;
    margin-bottom: 16px;
    line-height: 120%;
    letter-spacing: 0.25px;
}

.code-card-description {
    font-size: 16px;
    color: #4b5563;
    text-align: center;
    line-height: 130%;
    margin: 0;
    letter-spacing: 0.25px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 270px);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
    justify-items: center;
}
@media (max-width: 640px) {
    .code-card img, .feature-card img {
         width: 100%;
         height:auto;
    }
}
/* Color Background Classes for Code Cards */
.code-card-image-bg-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.code-card-image-bg-green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.code-card-image-bg-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.code-card-image-bg-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.code-card-image-bg-orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.code-card-image-bg-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.code-card-image-bg-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.code-card-image-bg-yellow {
    background: linear-gradient(135deg, #eab308, #ca8a04);
}

.code-card-image-bg-indigo {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.code-card-image-bg-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

/* ============================================ */
/* DOWNLOAD BLOCK COMPONENT STYLES */
/* ============================================ */
.blue-accent {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: linear-gradient(135deg, var(--lapis-500) 0%, var(--lapis-400) 100%);
    border-radius: 50% 20% 50% 20%;
    z-index: 1;
    pointer-events: none;
}

.custom-border-radius {
    border-radius: 100px 0px 100px 0px;
}

.custom-border-radius-mobile {
    border-radius: 60px 0px 60px 0px;
}

/* ============================================ */
/* CIRCULAR GAUGE COMPONENT STYLES */
/* ============================================ */
.circular-gauge {
    position: relative;
    width: 300px;
    height: 300px;
}

.gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.gauge-background {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 14px solid #E0DBE7; /* oyster-300 */
    position: absolute;
    top: 0;
    left: 0;
}

.gauge-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 14px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

/* Rounded endpoint at the END of the blue progress arc */
.gauge-progress::after {
    content: '';
    position: absolute;
    top: -7px; /* Half of border width (14px/2) */
    right: -7px; /* Half of border width (14px/2) */
    width: 14px;
    height: 14px;
    background: #0324FF;
    border-radius: 50%;
    transform: rotate(45deg); /* Position at the end of the arc */
}

.gauge-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.gauge-percentage {
    font-size: 5rem; /* 80px - even larger */
    font-weight: 800; /* Extra bold weight */
    color: #000000; /* Pure black */
    line-height: 1;
    margin: 0;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

.gauge-label {
    font-size: 1rem; /* 16px - standard body text */
    color: #5D566A; /* oyster-600 */
    font-weight: 600; /* semibold */
    margin-top: 0.5rem;
    line-height: 1.2;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

.gauge-description {
    font-size: 1rem; /* 16px - standard body text */
    color: #827C90; /* oyster-500 */
    margin-top: 0.25rem;
    line-height: 1.3;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

/* Text outside circle */
.gauge-text-outside {
    text-align: center;
    margin-top: 1rem;
}

.gauge-text-outside .gauge-label {
    font-size: 0.875rem;
    color: #5D566A;
    font-weight: 600;
    margin-top: 0.5rem;
}

.gauge-text-outside .gauge-description {
    font-size: 0.75rem;
    color: #827C90;
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Animation keyframes */
@keyframes gaugeFill {
    from {
        transform: rotate(-90deg); /* Start from 12 o'clock */
    }
    to {
        transform: rotate(calc(var(--gauge-rotation, 0deg) - 90deg));
    }
}

.gauge-progress.animate {
    border-top: 14px solid #0324FF; /* lapis-500 */
    border-right: 14px solid #0324FF; /* lapis-500 */
    animation: gaugeFill 2s ease-in-out forwards;
}

/* Counter animation */
@keyframes counterUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gauge-percentage.animate-counter {
    animation: counterUp 0.5s ease-out forwards;
}

/* ============================================ */
/* HERO SECTIONS COMPONENT STYLES */
/* ============================================ */

/* Z-index stacking for layered images */
.hero-1-enlarge {
    z-index: 1;
}

.hero-1-slide-top {
    z-index: 2;
}

.hero-1-slide-left {
    z-index: 3;
}

.hero-1-slide-right {
    z-index: 4;
}

/* Scroll Animation Styles */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.fade-in.animate {
    opacity: 1;
    transform: translateY(0);
}

.slide-up {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s ease-out;
}

.slide-up.animate {
    opacity: 1;
    transform: translateY(0);
    animation: bounceIn 0.4s ease-out 0.2s both;
}

.slide-down {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.8s ease-out;
}

.slide-down.animate {
    opacity: 1;
    transform: translateY(0);
}

@keyframes bounceIn {
    0% {
        transform: translateY(0) scale(0.9);
        opacity: 0;
    }
    50% {
        transform: translateY(-8px) scale(1.02);
        opacity: 0.9;
    }
    80% {
        transform: translateY(3px) scale(0.98);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Hero 2-7 Animation Styles */
.hero-box {
    opacity: 0;
    transition: all 0.8s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-box.animate {
    opacity: 1;
}

.hero-image {
    opacity: 0;
    transform: translateY(30px) scale(0.3);
    transition: all 0.8s ease-out;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
}

.hero-image.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: bounceIn 0.6s ease-out 0.3s both;
}

/* Ensure all hero images are centered regardless of size classes */
.hero-box .hero-image {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 auto;
}

/* Force center all hero images in sections 2-7 */
.wisecodes-hero-section .hero-image,
.watch-hero-section .hero-image,
.thrive-hero-section .hero-image,
.popular-hero-section .hero-image,
.eating-hero-section .hero-image,
.clean-hero-section .hero-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 60% !important;
    max-height: 60% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 0 !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Fade in snap animation for hero images */
.wisecodes-hero-section .hero-image.animate,
.watch-hero-section .hero-image.animate,
.thrive-hero-section .hero-image.animate,
.popular-hero-section .hero-image.animate,
.eating-hero-section .hero-image.animate,
.clean-hero-section .hero-image.animate {
    opacity: 1 !important;
    animation: fadeInSnap 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes fadeInSnap {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    60% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Fix layered images positioning for "How WISEcode Works" section */
.how-works-hero-section .slide-down,
.how-works-hero-section .slide-up,
.how-works-hero-section .fade-in {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    z-index: 1;
}

.how-works-hero-section .slide-up {
    z-index: 2;
    opacity: 1 !important;
}

.how-works-hero-section .fade-in {
    z-index: 3;
    opacity: 1 !important;
}

/* Ensure images are visible even before animation */
.how-works-hero-section img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Responsive Hero Styles - Let inline styles handle positioning */

/* Hero 1 specific animations */
.hero-1-slide-right {
    opacity: 0;
    transform: translateX(-150px);
    transition: all 1s ease-out;
}

.hero-1-slide-right.animate {
    opacity: 1;
    transform: translateX(0) !important;
    animation: bounceIn 0.8s ease-out 0.3s both;
}

.hero-1-slide-top {
    opacity: 0;
    transform: translateY(-150px);
    transition: all 1s ease-out;
}

.hero-1-slide-top.animate {
    opacity: 1;
    transform: translateY(0);
}

.hero-1-enlarge {
    opacity: 0;
    transform: scale(0.1);
    transition: all 1s ease-out;
}

.hero-1-enlarge.animate {
    opacity: 1;
    transform: scale(1);
}

.hero-1-slide-left {
    opacity: 0;
    transform: translateX(150px);
    transition: all 1s ease-out;
}

.hero-1-slide-left.animate {
    opacity: 1;
    transform: translateX(0);
    animation: fadeInBounce 0.8s ease-out 0.3s both;
}

@keyframes fadeInBounce {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translateX(0) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* QR Code pop out animation */
.qr-pop-out {
    opacity: 0;
    transform: translateX(100px) translateY(-100px) scale(0.1);
    transition: all 0.8s ease-out;
}

.qr-pop-out.animate {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    animation: popOutGrow 0.6s ease-out 0.3s both;
}

@keyframes popOutGrow {
    0% {
        opacity: 0;
        transform: translateX(50px) translateY(-50px) scale(0.1);
    }
    50% {
        opacity: 1;
        transform: translateX(-10px) translateY(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}


/* ============================================ */
/* SECOND SECTIONS COMPONENT STYLES */
/* ============================================ */
.rounded-custom {
    border-radius: 150px 0 150px 0;
}

/* Feature card hover rules moved to consolidated section above */

/* ============================================ */
/* TESTIMONIALS COMPONENT STYLES */
/* ============================================ */
.testimonial-card {
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--oyster-900);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.testimonial-card-body {
    font-size: 0.8rem;
    color: var(--oyster-600);
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.testimonial-card-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--oyster-700);
}

.star-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.star {
    width: 16px;
    height: 16px;
    color: var(--lapis-500);
    fill: currentColor;
}

/* Auto-scrolling testimonials */
.testimonials-scroll-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

.testimonials-column {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.testimonials-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.track-1 {
    animation-name: scrollDown;
}

.track-2 {
    animation-name: scrollUp;
}

.track-3 {
    animation-name: scrollDown;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

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

/* ============================================ */
/* THIRD SECTIONS COMPONENT STYLES */
/* ============================================ */
/* Animation for device sliding in from left with ease-in snap */
.phone-container img {
    animation: slideInWithSnap 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

/* Animation for clover simple scale in */
.clover-bg img {
    animation: scaleInSimple 1s ease-out 0.1s both;
}

@keyframes slideInWithSnap {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    60% {
        transform: translateX(10%);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes scaleInSimple {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================ */
/* FEATURE SECTIONS COMPONENT STYLES */
/* ============================================ */
/* Feature card base styling - consolidated */
.feature-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.6s ease-out;
    cursor: default;
}

.feature-card.animate {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.feature-card-image {
    width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0;
}

.feature-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Special styling for database image - crop bottom, show top */
.feature-card-image.database img {
    object-fit: cover;
    object-position: top;
}

/* Special styling for personalization image - crop left side, show right */
.feature-card-image.personalization img {
    object-position: 100% center;
    width: 100%;
    height: 100%;
}

.feature-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--oyster-900);
    margin-bottom: 0px;
    line-height: 1.3;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.feature-card-description {
    font-size: 1rem;
    color: var(--oyster-600);
    line-height: 1.6;
    flex-grow: 1;
    
    padding-top: 1rem;
}

/* Feature card animation rules consolidated above */

/* Container styling */
.why-choose-container {
    border-radius: 1rem;
}

.outer-container {
    border-radius: 1.5rem;
}

.inner-container {
    border-radius: 150px 0 150px 0;
}
.inner-container-reverse {
    border-radius: 0 150px 0 150px;
}

/* Feature icon styling */
.feature-icon {
    width: 48px;
    height: 48px;
    color: var(--oyster-700);
    stroke-width: 1.5;
}

/* Step card styling */
.step-card {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
    position: relative;
}

.step-card.animate {
    opacity: 1;
    transform: translateY(0);
}

.step-icon {
    transition: none;
}

.step-card:hover .step-icon {
    transform: none;
}

/* ============================================ */
/* COPY BLOCKS COMPONENT STYLES */
/* ============================================ */
/* Gauge arrow animation */
.wp-image-2366,.gauge-arrow-excellent {
    animation: gaugeSweepRight 2.2s ease-in forwards;
    transform-origin: 50% 90%;
}

.wp-image-2382,.gauge-arrow-poor {
    animation: gaugeSweepLeft 2.2s ease-in forwards 0.3s;
    transform-origin: 50% 90%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Hover effects for gauge cards */
.gauge-card:hover .wp-image-2366,.gauge-card:hover .gauge-arrow-excellent {
    transform: translate(-50%, -50%) rotate(-90deg);
    animation: gaugeSweepRight 2.2s ease-in forwards;
}

.gauge-card:hover .wp-image-2382,.gauge-card:hover .gauge-arrow-poor {
    transform: translate(-50%, -50%) rotate(90deg);
    animation: gaugeSweepLeft 2.2s ease-in forwards 0.3s;
}

@keyframes gaugeSweepRight {
    0% {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@keyframes gaugeSweepLeft {
    0% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
}

/* ============================================ */
/* PARALLAX COMPONENT STYLES */
/* ============================================ */

/* Parallax Container */
.parallax-container {
    position: relative;
    overflow: hidden;
    background: #1A102C;
    min-height: 100vh;
}

/* Blank sections for spacing */
.blank-section {
    height: 100vh;
    background: #1A102C;
}

/* Parallax Sections */
.parallax-section {
    position: relative;
    /*min-height: 100vh;*/
    display: flex;
    align-items: center;
    padding: 80px 0;
    background: #1A102C;
}

/* Content Wrapper */
.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Text Content */
.text-content {
    z-index: 10;
    position: relative;
}

.stat-number {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 16px;
    font-family: 'Figtree', sans-serif;
    text-shadow: none;
}

.stat-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.3;
    font-family: 'Figtree', sans-serif;
}

.stat-description {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 500px;
    font-family: 'Figtree', sans-serif;
}

/* Visual Content */
.visual-content {
    position: relative;
    height: 500px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    justify-content: center;
}

/* Parallax Layers */
.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-layer img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
}

/* Layer positioning and parallax effects */
.layer-a,
.layer-b,
.layer-c {
    transform: translateZ(0);
}

/* Specific positioning for section 2 layer-b */
.section-2 .layer-b {
    transform: translateZ(0) translate(-108px, 82px);
}

/* Specific positioning for section 3 layer-b */
.section-3 .layer-b {
    transform: translateZ(0) translate(16px, 2px);
}

/* Section-specific styling */
.section-1 {
    background: #1A102C;
}

.section-2 {
    background: #1A102C;
}

.section-3 {
    background: #1A102C;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .visual-content {
        height: 400px;
    }
    
    /* Add extra padding for section 2 visual content on mobile */
    .section-2 .visual-content {
        margin-bottom: 60px;
    }
    
    .stat-number {
        font-size: 3rem;
    }
    
    .stat-title {
        font-size: 1.25rem;
    }
    
    .stat-description {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .parallax-section {
        padding: 60px 0;
    }
    
    .content-wrapper {
        padding: 0 16px;
        gap: 30px;
    }
    
    .visual-content {
        height: 300px;
    }
    
    /* Increase margin for section 2 on smaller screens */
    .section-2 .visual-content {
        margin-bottom: 80px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-title {
        font-size: 1.125rem;
    }
    
    .stat-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .parallax-section {
        padding: 40px 0;
    }
    
    .visual-content {
        height: 250px;
    }
    
    /* Maximum margin for section 2 on smallest screens */
    .section-2 .visual-content {
        margin-bottom: 100px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-title {
        font-size: 1rem;
    }
    
    .stat-description {
        font-size: 0.875rem;
    }
}

/* ============================================ */
/* RESPONSIVE DESIGN */
/* ============================================ */
@media (max-width: 768px) {
    .circular-gauge {
        width: 200px;
        height: 200px;
        margin: 3rem auto 2rem auto;
    }
    
    .gauge-percentage {
        font-size: 2.5rem;
    }
    
    .gauge-label {
        font-size: 0.875rem;
    }
    
    .gauge-description {
        font-size: 0.75rem;
    }
    
    .gauge-text-outside {
        margin-top: 1.5rem;
    }
    
    .gauge-text-outside .gauge-label {
        font-size: 0.875rem;
    }
    
    .gauge-text-outside .gauge-description {
        font-size: 0.75rem;
    }
    
    .testimonials-scroll-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .column-3 {
        display: none;
    }
    
    .content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .stat-number {
        font-size: 3rem;
    }

    .visual-content {
        height: 50vh;
    }
}

@media (max-width: 640px) {
    .testimonials-scroll-container {
        grid-template-columns: 1fr;
    }
    
    .column-2,
    .column-3 {
        display: none;
    }
    
    .testimonial-card {
        padding: 1.5rem;
    }
    
    .testimonial-card-title {
        font-size: 1.125rem;
    }
    
    .testimonial-card-body {
        font-size: 0.875rem;
    }
    
    .testimonial-card-author {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .circular-gauge {
        width: 180px;
        height: 180px;
        margin: 4rem auto 3rem auto;
    }
    
    .gauge-percentage {
        font-size: 2rem;
    }
    
    .gauge-label {
        font-size: 0.75rem;
    }
    
    .gauge-description {
        font-size: 0.625rem;
    }
    
    .gauge-text-outside {
        margin-top: 1.5rem;
        padding: 0 1rem;
    }
    
    .gauge-text-outside .gauge-label {
        font-size: 0.75rem;
    }
    
    .gauge-text-outside .gauge-description {
        font-size: 0.625rem;
    }
    
    /* Ensure proper spacing between gauges on mobile */
    .flex.flex-col > .circular-gauge:not(:last-child) {
        margin-bottom: 3rem;
    }
    
    /* Add extra top margin to first gauge on mobile */
    .flex.flex-col > .circular-gauge:first-child {
        margin-top: 3rem;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .circular-gauge {
        width: 160px;
        height: 160px;
        margin: 4.5rem auto 3rem auto;
    }
    
    .gauge-percentage {
        font-size: 1.75rem;
    }
    
    .gauge-text-outside {
        margin-top: 2rem;
        padding: 0 0.5rem;
    }
}

/* ============================================ */
/* ADDITIONAL COMPONENT STYLES FROM HTML FILES */
/* ============================================ */

/* Code Cards Search Component Styles */
.code-cards-search .code-card {
    background: white;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    padding: 32px 24px;
    max-width: 320px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.code-cards-search .code-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.code-cards-search .code-card-image {
    margin: 0 auto 32px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.code-cards-search .code-card-image img {
    transition: transform 0.3s ease;
}

.code-cards-search .code-card:hover .code-card-image img {
    transform: scale(1.05);
}

.code-cards-search .code-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A102C;
    text-align: center;
    margin-bottom: 16px;
    line-height: 120%;
    letter-spacing: 0.25px;
}

.code-cards-search .code-card-description {
    font-size: 16px;
    color: #5D566A;
    text-align: center;
    line-height: 130%;
    margin: 0;
    letter-spacing: 0.25px;
}

.code-cards-search .card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive Grid for Code Cards Search */
@media (max-width: 1200px) {
    .code-cards-search .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .code-cards-search .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .code-cards-search .card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    
    .code-cards-search .code-card {
        padding: 24px 20px;
        max-width: 100%;
    }
    
    .code-cards-search .code-card-title {
        font-size: 18px;
    }
    
    .code-cards-search .code-card-description {
        font-size: 14px;
    }
    
    .code-cards-search .code-card-image img {
        max-width: 150px;
        max-height: 150px;
    }
}

@media (max-width: 480px) {
    .code-cards-search .code-card {
        padding: 20px 16px;
    }
    
    .code-cards-search .code-card-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .code-cards-search .code-card-description {
        font-size: 13px;
    }
    
    .code-cards-search .code-card-image img {
        max-width: 120px;
        max-height: 120px;
    }
}

/* Copy Blocks Component Styles */
.copy-blocks .wp-image-2366 {
    animation: gaugeSweepRight 2.2s ease-in forwards;
    transform-origin: 50% 90%;
}

.copy-blocks .wp-image-2382 {
    animation: gaugeSweepLeft 2.2s ease-in forwards 0.3s;
    transform-origin: 50% 90%;
    transform: translate(-1px, -5px) rotate(90deg);
}

.copy-blocks .gauge-card:hover .wp-image-2366 {
    animation: gaugeSweepRight 2.2s ease-in forwards;
}

.copy-blocks .gauge-card:hover .wp-image-2382 {
    animation: gaugeSweepLeft 2.2s ease-in forwards 0.3s;
}

@keyframes gaugeSweepRight {
    0% {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@keyframes gaugeSweepLeft {
    0% {
        transform: translate(-1px, -5px) rotate(90deg);
    }
    100% {
        transform: translate(-1px, -5px) rotate(-90deg);
    }
}

/* Download Block Component Styles */
.download-block .blue-accent {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: linear-gradient(135deg, var(--lapis-500) 0%, var(--lapis-400) 100%);
    border-radius: 50% 20% 50% 20%;
    z-index: 1;
    pointer-events: none;
}

.download-block .phone-container {
    position: relative;
    z-index: 10;
}

.download-block .custom-border-radius {
    border-radius: 100px 0px 100px 0px;
}

.download-block .custom-border-radius-mobile {
    border-radius: 60px 0px 60px 0px;
}

/* Third Sections Component Styles */
.third-sections .clover-bg {
    position: absolute;
    top: 0;
    left: 5%;
    z-index: 1;
    pointer-events: none;
}

.third-sections .phone-container {
    position: relative;
    z-index: 10;
}

.third-sections .phone-container img {
    animation: slideInWithSnap 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.third-sections .clover-bg img {
    animation: scaleInSimple 1s ease-out 0.1s both;
}

@keyframes slideInWithSnap {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    60% {
        transform: translateX(10%);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes scaleInSimple {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Second Sections Component Styles */
.second-sections .rounded-custom {
    border-radius: 150px 0 150px 0;
}

.second-sections .feature-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.second-sections .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ============================================ */
/* FEATURE SECTIONS COMPONENT STYLES - FROM HTML */
/* ============================================ */

/* Step image layering */
.step-image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 250px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .step-image-container {
        height: 300px;
    }
}

.step-bg-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    z-index: 1;
    opacity: 0;
    transition: transform 0.3s ease;
}

.step-bg-svg.animate {
    animation: bounceIn 0.8s ease-out forwards;
}        
@media (min-width: 640px) {
    .step-bg-svg {
        width: 270px;
        height: 270px;
    }
}

.step-card:hover .step-bg-svg {
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.step-card-1 .step-bg-svg {
    animation-delay: 0.2s;
}

.step-card-2 .step-bg-svg {
    animation-delay: 0.4s;
}

.step-card-3 .step-bg-svg {
    animation-delay: 0.6s;
}

.step-card-4 .step-bg-svg {
    animation-delay: 0.8s;
}

/* Thinner stroke for Choose Your Path icons */
.choose-path-section i[data-lucide] {
    stroke-width: 1.5;
}

.step-fg-png {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.22);
    width: 120px;
    height: auto;
    z-index: 2;
}

@media (min-width: 640px) {
    .step-fg-png {
        width: 150px;
    }
}

.step-card-1 .step-fg-png {
    left: 63%;
    top: calc(50% + 30px);
}

.step-card-2 .step-fg-png {
    left: calc(50% + 50px);
    top: calc(50% + 0px);
}

.step-card-3 .step-fg-png {
    left: calc(50% - 40px);
    top: calc(50% + 30px);
}

.step-card-4 .step-fg-png {
    left: calc(50% - 40px);
    top: calc(50% + 0px);
}

/* Fade in animation for mission-about section */
.mission-about-section .inner-container {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.mission-about-section .inner-container.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================ */
/* DOWNLOAD BLOCK LIGHT COMPONENT STYLES */
/* ============================================ */
/* Blue accent shape */
.blue-accent {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: linear-gradient(135deg, var(--lapis-500) 0%, var(--lapis-400) 100%);
    border-radius: 50% 20% 50% 20%;
    z-index: 1;
    pointer-events: none;
}

.phone-container {
    position: relative;
    z-index: 10;
}

/* Custom border radius for inner container */
.custom-border-radius {
    border-radius: 150px 0px 150px 0px;
}

.custom-border-radius-mobile {
    border-radius: 60px 0px 60px 0px;
}

/* ============================================ */
/* COPY BLOCKS COMPONENT STYLES */
/* ============================================ */
/* Gauge arrow positioning and animation */
.wp-image-2366 {
    animation: gaugeSweepRight 2.2s ease-in forwards;
    transform-origin: 50% 90%;
}

.wp-image-2382 {
    animation: gaugeSweepLeft 2.2s ease-in forwards 0.3s;
    transform-origin: 50% 90%;
    transform: translate(-1px, -5px) rotate(90deg);
}

/* Hover effects for gauge cards */
.gauge-card:hover .wp-image-2366 {
    animation: gaugeSweepRight 2.2s ease-in forwards;
}

.gauge-card:hover .wp-image-2382 {
    animation: gaugeSweepLeft 2.2s ease-in forwards 0.3s;
}

@keyframes gaugeSweepRight {
    0% {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@keyframes gaugeSweepLeft {
    0% {
        transform: translate(-1px, -5px) rotate(90deg);
    }
    100% {
        transform: translate(-1px, -5px) rotate(-90deg);
    }
}

/* ============================================ */
/* GAUGE PREVIEW COMPONENT STYLES - FROM HTML */
/* ============================================ */
.circular-gauge {
    position: relative;
    width: 300px;
    height: 300px;
}

.gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.gauge-background {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 14px solid #E0DBE7; /* oyster-300 */
    position: absolute;
    top: 0;
    left: 0;
}

.gauge-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 14px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

/* Rounded endpoint at the END of the blue progress arc */
.gauge-progress::after {
    content: '';
    position: absolute;
    top: -7px; /* Half of border width (14px/2) */
    right: -7px; /* Half of border width (14px/2) */
    width: 14px;
    height: 14px;
    background: #0324FF;
    border-radius: 50%;
    transform: rotate(45deg); /* Position at the end of the arc */
}

.gauge-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.gauge-percentage {
    font-size: 5rem; /* 80px - even larger */
    font-weight: 800; /* Extra bold weight */
    color: #000000; /* Pure black */
    line-height: 1;
    margin: 0;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

.gauge-label {
    font-size: 1rem; /* 16px - standard body text */
    color: #5D566A; /* oyster-600 */
    font-weight: 600; /* semibold */
    margin-top: 0.5rem;
    line-height: 1.2;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

.gauge-description {
    font-size: 1rem; /* 16px - standard body text */
    color: #827C90; /* oyster-500 */
    margin-top: 0.25rem;
    line-height: 1.3;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}

/* Text outside circle */
.gauge-text-outside {
    text-align: center;
    margin-top: 1rem;
}

.gauge-text-outside .gauge-label {
    font-size: 0.875rem;
    color: #5D566A;
    font-weight: 600;
    margin-top: 0.5rem;
}

.gauge-text-outside .gauge-description {
    font-size: 0.75rem;
    color: #827C90;
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Animation keyframes */
@keyframes gaugeFill {
    from {
        transform: rotate(-90deg); /* Start from 12 o'clock */
    }
    to {
        transform: rotate(calc(var(--gauge-rotation, 0deg) - 90deg));
    }
}

.gauge-progress.animate {
    border-top: 14px solid #0324FF; /* lapis-500 */
    border-right: 14px solid #0324FF; /* lapis-500 */
    animation: gaugeFill 2s ease-in-out forwards;
}

/* Counter animation */
@keyframes counterUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gauge-percentage.animate-counter {
    animation: counterUp 0.5s ease-out forwards;
}

/* ============================================ */
/* SECOND SECTIONS COMPONENT STYLES - FROM HTML */
/* ============================================ */
.rounded-custom {
    border-radius: 150px 0 150px 0;
}

.feature-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}


/* ============================================ */
/* PARALLAX RESPONSIVE STYLES - FROM HTML */
/* ============================================ */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        min-height: 100vh;
        padding: 2rem 1rem;
    }

    .text-content {
        flex: none;
        padding-right: 0;
        padding-top: 3rem;
        padding-bottom: 1rem;
        order: 1;
    }

    .visual-content {
        flex: none;
        height: 50vh;
        width:100%;
        order: 2;
        transform: scale(0.8);
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .stat-number {
        font-size: 3rem;
    }

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

    .stat-description {
        font-size: 1.1rem;
        max-width: 100%;
    }

    .parallax-section {
        height: auto;
        min-height: 100vh;
    }
}

/* Additional responsive styles for smaller screens */
@media (max-width: 480px) {
    .content-wrapper {
        padding: 1rem 0.5rem;
    }

    .text-content {
        padding-top: 2rem;
        padding-bottom: 0.5rem;
    }

    .visual-content {
        height: 40vh;
        transform: scale(0.7);
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-title {
        font-size: 1.25rem;
    }

    .stat-description {
        font-size: 1rem;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .content-wrapper {
        padding: 0.5rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-title {
        font-size: 1.125rem;
    }

    .stat-description {
        font-size: 0.9rem;
    }

    .visual-content {
        transform: scale(0.6);
    }
}


/* ============================================ */
/* TESTIMONIALS SECTION COMPONENT STYLES */
/* ============================================ */
/* Testimonial card styling */
.testimonial-card {
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .testimonial-card {
        padding: 1.5rem;
    }
}

.testimonial-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--oyster-900);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .testimonial-card-title {
        font-size: 1.125rem;
    }
}

.testimonial-card-body {
    font-size: 0.8rem;
    color: var(--oyster-600);
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .testimonial-card-body {
        font-size: 0.875rem;
    }
}

.testimonial-card-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--oyster-700);
}

@media (min-width: 640px) {
    .testimonial-card-author {
        font-size: 0.875rem;
    }
}

.star-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.star {
    width: 16px;
    height: 16px;
    color: var(--lapis-500);
    fill: currentColor;
}

/* Auto-scrolling testimonials */
.testimonials-scroll-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

.testimonials-column {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.testimonials-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.track-1 {
    animation-name: scrollDown;
}

.track-2 {
    animation-name: scrollUp;
}

.track-3 {
    animation-name: scrollDown;
}
@media (max-width: 1024px) {
    .testimonials-track {
        flex-direction: row;
    }

    .track-1 {
        animation-name: scrollRight;
    }
    .track-2 {
        animation-name: scrollRight;
    }

    .track-3 {
        animation-name: scrollRight;
    }
}
@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes scrollRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

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

/* Responsive adjustments */
@media (max-width: 1024px) {
    .testimonials-scroll-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .column-3 {
        display: none;
    }
}

@media (max-width: 640px) {
    .testimonials-scroll-container {
        grid-template-columns: 1fr;
    }
    
    .column-2,
    .column-3 {
        display: none;
    }
}

/* ============================================ */
/* THIRD SECTIONS COMPONENT STYLES */
/* ============================================ */
/* Animation for device sliding in from left with ease-in snap */
.phone-container img {
    animation: slideInWithSnap 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

/* Animation for clover simple scale in */
.clover-bg img {
    animation: scaleInSimple 1s ease-out 0.1s both;
}

@keyframes slideInWithSnap {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    60% {
        transform: translateX(10%);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes scaleInSimple {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================ */
/* CODE CARDS SEARCH COMPONENT STYLES */
/* ============================================ */

/* Code Cards Search specific styles */
.code-cards-search {
    font-family: 'Figtree', sans-serif;
}

/* Code card filter animations */
.code-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.code-card.filtered-out {
    opacity: 0.3;
    transform: scale(0.95);
    filter: grayscale(0.8);
    pointer-events: none;
}

.code-card.filtered-in {
    opacity: 1;
    transform: scale(1);
    filter: grayscale(0);
    animation: cardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Grid animation for reordering */
.card-grid {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-grid.reordering {
    animation: gridShuffle 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gridShuffle {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

/* Filter button animations */
.filter-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

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

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

.filter-btn.active {
    animation: buttonPulse 0.3s ease-out;
}

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

.code-cards-search .code-card {
    background: white;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    padding: 32px 24px;
    max-width: 320px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.code-cards-search .code-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.code-cards-search .code-card-image {
    margin: 0 auto 32px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.code-cards-search .code-card-image img {
    transition: transform 0.3s ease;
}

.code-cards-search .code-card:hover .code-card-image img {
    transform: scale(1.05);
}

.code-cards-search .code-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A102C;
    text-align: center;
    margin-bottom: 16px;
    line-height: 120%;
    letter-spacing: 0.25px;
}

.code-cards-search .code-card-description {
    font-size: 16px;
    color: #5D566A;
    text-align: center;
    line-height: 130%;
    margin: 0;
    letter-spacing: 0.25px;
}

.code-cards-search .card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive Grid for Code Cards Search */
@media (max-width: 1200px) {
    .code-cards-search .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .code-cards-search .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .code-cards-search .card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    
    .code-cards-search .code-card {
        padding: 24px 20px;
        max-width: 100%;
    }
    
    .code-cards-search .code-card-title {
        font-size: 18px;
    }
    
    .code-cards-search .code-card-description {
        font-size: 14px;
    }
    
    .code-cards-search .code-card-image img {
        max-width: 150px;
        max-height: 150px;
    }
}

@media (max-width: 480px) {
    .code-cards-search .code-card {
        padding: 20px 16px;
    }
    
    .code-cards-search .code-card-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .code-cards-search .code-card-description {
        font-size: 13px;
    }
    
    .code-cards-search .code-card-image img {
        max-width: 120px;
        max-height: 120px;
    }
}

/* ============================================ */
/* CSS OVERRIDE SECTION - Ensures custom styles take precedence */
/* ============================================ */

/* Override any conflicting styles from other CSS files */
.wise-theme .code-card,
.wise-theme .feature-card,
.wise-theme .testimonial-card {
    /* Ensure our custom styles override any duplicates */
}

/* Force override for critical component styles */
body .code-card {
    background: bg-oyster-100 !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    padding: 32px 24px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

body .code-card:hover {
    box-shadow: none !important;
    transform: none !important;
}

body .feature-card {
    border-radius: 1rem !important;
    padding: 0rem !important;
    box-shadow: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0;
    background: transparent;
}

body .testimonial-card {
    background: white !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure WISE Design System colors override any Tailwind defaults */
body .bg-oyster-200 { background-color: #F4F2F9 !important; }
body .bg-oyster-200 { background-color: #F4F2F9 !important; }
body .bg-oyster-700 { background-color: #413A4D !important; }
body .bg-oyster-900 { background-color: #1A102C !important; }
body .bg-lapis-500 { background-color: #0324FF !important; }
body .bg-lapis-600 { background-color: #021BAE !important; }
body .bg-mint-500 { background-color: #01D6C4 !important; }
body .bg-orange-500 { background-color: #FB923C !important; }
body .bg-berry-500 { background-color: #91148F !important; }

body .text-oyster-500 { color: #827C90 !important; }
body .text-oyster-600 { color: #5D566A !important; }
body .text-oyster-700 { color: #413A4D !important; }
body .text-oyster-900 { color: #1A102C !important; }
body .text-lapis-500 { color: #0324FF !important; }
body .text-lapis-600 { color: #021BAE !important; }
body .text-mint-500 { color: #01D6C4 !important; }

/* ============================================ */
/* CODE CARDS W HOME COMPONENT STYLES */
/* ============================================ */

/* Ensure consistent styling for all code cards in the home component */
.code-cards-search .code-card,
.category-section .code-card {
    border-radius: 24px !important;
    border: 1px solid #e5e7eb !important;
    padding: 32px 24px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    min-height: 577px !important;
}

.code-cards-search .code-card:hover,
.category-section .code-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

.code-cards-search .code-card-image,
.category-section .code-card-image {
    margin: 0 auto 32px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.code-cards-search .code-card-image img,
.category-section .code-card-image img {
    transition: transform 0.3s ease !important;
}

.code-cards-search .code-card:hover .code-card-image img,
.category-section .code-card:hover .code-card-image img {
    transform: scale(1.05) !important;
}

.code-cards-search .code-card-title,
.category-section .code-card-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1A102C !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    line-height: 120% !important;
    letter-spacing: 0.25px !important;
}

.code-cards-search .code-card-description,
.category-section .code-card-description {
    font-size: 16px !important;
    color: #5D566A !important;
    text-align: center !important;
    line-height: 130% !important;
    margin: 0 !important;
    letter-spacing: 0.25px !important;
}

.filter-btn.active {
    @apply bg-[#1A102C] text-white shadow-lg;
}

@media (max-width: 640px) {
    .code-cards-search .code-card,
    .category-section .code-card {
        padding: 24px 20px !important;
        max-width: 100% !important;
    }
    
    .code-cards-search .code-card-title,
    .category-section .code-card-title {
        font-size: 22px !important;
    }
    
    .code-cards-search .code-card-description,
    .category-section .code-card-description {
        font-size: 18px !important;
    }
    
    .code-cards-search .code-card-image img,
    .category-section .code-card-image img {
        max-width: 1000px !important;
        max-height: 1000px !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .code-cards-search .code-card,
    .category-section .code-card {
        padding: 20px 16px !important;
    }
    
    .code-cards-search .code-card-title,
    .category-section .code-card-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .code-cards-search .code-card-description,
    .category-section .code-card-description {
        font-size: 13px !important;
    }
    
    .code-cards-search .code-card-image img,
    .category-section .code-card-image img {
        max-width: 120px !important;
        max-height: 120px !important;
    }
}

/* Bounce in from top animation */
.bounce-in-top {
    opacity: 0;
    transform: translateY(-100px);
    animation: bounceInFromTop 0.8s ease-out forwards;
}

@keyframes bounceInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    50% {
        opacity: 1;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up animation with centering */
.slide-up-centered {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(100px);
    top: 50%;
    left: 50%;
    animation: slideUpCentered 0.6s ease-out 0.3s both;
}

@keyframes slideUpCentered {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}

/* ============================================ */
/* FAQ ACCORDION STYLES */
/* ============================================ */
.faq-answer {
    display: none;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.faq-answer.open {
    display: block;
    opacity: 1;
    animation:none;
}

.faq-question {
    transition: all 0.2s ease;
}

.faq-question:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.faq-item {
    transition: all 0.2s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.max-h-\[800px\] {
    max-height: 800px;
}
@media (min-width: 1024px) {
    .lg\:max-h-\[750px\] {
        max-height: 750px;
    }

    .lg\:min-h-\[750px\] {
        min-height: 750px;
    }
    .lg\:h-\[750px\]{
        height: 750px;
    }
    
}
#mobile-menu .mobile-nav-dropdown:not(.hidden){max-height: 38rem;}
.bg-graytext{background-color: var(--oyster-900) !important; }
@media (min-width: 1024px) {
    body.page-id-1144,body.page-id-1149,body.page-id-1147 {
    background-image: url(../../../../../_images/wisescore-owl-bg-1.png);
            background-size: 3000px auto;
            background-position-y: -1400px;
            background-repeat: no-repeat;
            background-position-x: center;
    }
    body.page-id-1144 #page,body.page-id-1147 #page,body.page-id-1149 #page {
            background-image: url(../../../../../_images/wisescore-owl-bg-2.png);
            background-size: 2500px auto;
            background-position-x: -left;
            background-position-y: 4000px;
            background-repeat: no-repeat;
    }
    .lg\:p-24 {
    padding: 6rem;
    }
}
.bg-nq{
            background-image: url(../../../../../_images/NQ-BG2.png);
            background-repeat: repeat;
            background-size: contain;
    }

.bg-iq{
            background-image: url(../../../../../_images/IQ-BG2.png);
            background-repeat: repeat;
            background-size: contain;
    }

.bg-tq{
            background-image: url(../../../../../_images/thrive-BG2.png);
            background-repeat: repeat;
            background-size: 100%;
    }

    body .flex .code-card {
    margin: 0 !important;
    max-width: 260px !important;
}



.progress-value {
  animation: load 3s normal forwards;
  width: 0;
}
@keyframes load {
  0% { width: 0; }
  100% { width: 50%; }
}

li::marker{color:var(--oyster-900) !important;}
.text-left2 {
    margin-top: 0 !important;
}

#app-paid-video{
background-image: url(../../../../../_images/app-paid-key.png);
    background-position: -38px center;
    background-size: 60%;
    background-repeat: no-repeat;
}

#app-paid-video #video-container{
    width: 400px;
    margin-left: 160px;
    border-radius: 20px;
    overflow: hidden;
}
@media (max-width: 1024px) {
    #app-paid-video #video-container{
    width: 100%;
    margin-left: 0px;
    border-radius: 20px;
    overflow: hidden;
}
    .sm\:text-center{text-align: center !important;}
    .sm\:m-auto{margin:0 auto;}
    .sm\:text-5xl {
        font-size: 3rem;
    }
    .sm\:button{display:block;text-align: center;}
    .sm\:gap-0 {gap: 0;}
    .sm\:p-0 {padding: 0;}
    .sm\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .sm\:mt-0{margin-top:0 !important}
    .sm\:mb-0{margin-bottom:0 !important}
    .sm\:px-0{padding-left: 0;padding-right: 0;}
    .sm\:py-0{padding-top: 0;padding-bottom: 0;}
    
    .sm\:px-12{padding-left: 3rem;padding-right: 3rem;}
    .sm\:px-4{padding-left: 1rem;padding-right: 1rem;}
    .sm\:py-8{padding-top: 2rem;padding-bottom: 2rem;}
    .sm\:mt-10{    margin-top: 1.5rem;}
    .sm\:pt-20{    padding-top: 3rem;}
    .w-full {
        width: 100% !important;
    }
    .h-auto {
        height: auto !important;
    }
    .sm\:text-left{text-align: left;}
    .sm\:items-start{align-items: flex-start;}
    .sm\:order-1 {order: 1 !important;}
    .sm\:order-2 {order: 2 !important;}
    .parallax-section .content-wrapper {
        gap: 0px;
    }
    .parallax-section .text-content {
        padding-bottom: 0;
    }
    .parallax-section .visual-content {
        transform: scale(1);
        margin-top: -60px;
        margin-bottom: 0;
    }
    .parallax-section .visual-content img{
       margin-top: 0;
        margin-bottom: 0;
    }


.bg-nq,.bg-iq,.bg-tq{
            background-repeat: repeat;
            background-size: contain;
    }
    .code-cards-search .code-card, .category-section .code-card{min-height: auto !important;}
    .smgaugeexcellent{    transform: translate(0px, -28px) !important; }

}
.filter-btn:hover{color:#fff;background-color: rgb(26 16 44 / var(--tw-bg-opacity, 1));}
.filter-btn:hover span{color:#fff;border-radius: 9999px;background-color: hsla(0, 0%, 100%, .2);}

.step-number-circle{
    color: var(--oyster-200) !important;
    margin: 10px auto 25px;
    font-size: 60px;
    font-weight: bold;
    line-height: 75px;
    border: 3px solid var(--oyster-200);
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 75px;
    height: 75px;
}
h1.hphh1{line-height: 125%; letter-spacing: 0;}
.icon-wrapper{
    width: 72px !important;
    height: 72px !important;
    background: #0324FF;
    padding: 12px;
}
.step-card img{max-width: 80%;
    margin: 0 auto;}
.width400{width:400px;}
.smgaugerow{position:relative;align-items: center;justify-content: center;height: 160px;}
.smgaugetext{width: 400px;padding: 15px 15px 15px 85px;margin-left: 85px !important;    background-color: #1A102C !important;    border-radius: 1rem;}
.smgaugeround{background: #fff;border-radius: 50%;padding: 5rem;display: block;z-index:10;position: absolute;left: 0;top: 0;}
.smgaugeexcellent{transform: translate(6px, 10px);}
.smgaugeexcellentarrow{transform: translate(-62px, -65px);}
.smgaugeexcellenttext{margin-left: -135px;padding-left: 100px;min-width: 420px;}
.smgaugepoor{transform: translate(6px, 10px);}
.smgaugepoorarrow{transform: translate(-70px, -100px);}
.smgaugepoortext{margin-left: -115px;padding-left: 100px;min-width: 420px;}

.hiw4b{}
.hiw4b-img{height:auto;margin-bottom: 0;}
.wp-block-leadin-hubspot-form-block{max-width:600px;margin:0 auto;}
.faqblock{margin:0 auto !important;}
.faqquestion{margin: 0;padding: 0;}
.faqicon{margin:0;}
.faqicon .icon-wrapper{
    background: transparent !important;
    padding: 0 !important;
}
.faq-answer.open{margin:0;padding-left:0;padding-right:0;}
.feature-card-image { background-color: var(--oyster-100) !important; border-radius: 32px;}
.mcp-gauges{max-width:700px;margin:0 auto;}

.mcp-gauges3{max-width:1000px;margin:0 auto;}
.circular-gauge2{margin-block-start: 0 !important;}
.gauge-svg2 {
    transform: rotate(-45deg);
}
.gauge-content2{margin-block-start: 0 !important;}