/* ==========================================
   📋 TABLE OF CONTENTS
   ==========================================

   1. RESET & BASE STYLES
      - CSS Reset
      - Smooth scrolling
   
   2. TYPOGRAPHY & FONTS
      - Raleway font-face declarations
      - Montserrat font-face declarations
      - CSS variables
   
   3. BODY & BASE STYLES
      - Body styling
      - Background gradients
   
   4. NAVIGATION
      - Floating Navigation (desktop)
      - Hero Navigation Bar
      - Hero Burger Menu
      - Mobile Bottom Navigation
   
   5. HERO SECTION
      - Hero banner & background
      - Hero content & text
      - Hero titles (PinnaclePay specific)
      - Hero buttons
      - Hero phone mockup
   
   6. BUTTONS & CALL-TO-ACTION
      - Primary buttons
      - Secondary buttons
      - Button states & hover effects
   
   7. PROCESS/CHAPTER NAVIGATION
      - Chapter dots navigation
      - Progress indicators
   
   8. MAIN CONTENT SECTIONS
      - Content grid layout
      - Section headers & titles
   
   9. BOX COMPONENTS
      - Reusable content boxes
      - Box tags & headers
      - Box content styling
   
   10. RESEARCH SECTIONS
       - Interview sections
       - SWOT analysis
       - Affinity mapping
       - Card sorting
       - Findings lists
   
   11. PERSONAS
       - Persona cards
       - Persona images
       - Persona details
   
   12. TESTING SECTIONS
       - Testing content
       - Test results
   
   13. PROTOTYPE SHOWCASE
       - Prototype buttons
       - Mockup containers
       - Interactive elements
   
   14. LEARNING & REFLECTIONS
       - Learning section
       - TL;DR summaries
       - Achieved sections
   
   15. FOOTER
       - Footer navigation
       - Footer branding
       - Copyright
   
   16. SKILLS & TAGS
       - Skill tags
       - Skill containers
   
   17. FAQ SECTION
       - Accordion styling
       - FAQ questions
       - FAQ answers
   
   18. RESPONSIVE DESIGN
       - Tablet (968px and below)
       - Mobile (768px and below)
       - Extra small screens (430px and below)
   
   ========================================== */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ============================================
   RALEWAY FONTS - Self-hosted (GDPR Compliant)
   ============================================ */

/* Raleway Regular (400) */
@font-face {
    font-family: 'Raleway';
    src: url('/files/Fonts/Raleway/raleway-v37-latin/raleway-v37-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Raleway Medium (500) */
@font-face {
    font-family: 'Raleway';
    src: url('/files/Fonts/Raleway/raleway-v37-latin/raleway-v37-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Raleway SemiBold (600) */
@font-face {
    font-family: 'Raleway';
    src: url('/files/Fonts/Raleway/raleway-v37-latin/raleway-v37-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Raleway Bold (700) */
@font-face {
    font-family: 'Raleway';
    src: url('/files/Fonts/Raleway/raleway-v37-latin/raleway-v37-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================
   MONTSERRAT FONTS - Self-hosted (GDPR Compliant)
   ============================================ */

/* Montserrat Regular (400) */
@font-face {
    font-family: 'Montserrat';
    src: url('/files/Fonts/Montserrat/montserrat-v31-latin/montserrat-v31-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Montserrat Medium (500) */
@font-face {
    font-family: 'Montserrat';
    src: url('/files/Fonts/Montserrat/montserrat-v31-latin/montserrat-v31-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Montserrat SemiBold (600) */
@font-face {
    font-family: 'Montserrat';
    src: url('/files/Fonts/Montserrat/montserrat-v31-latin/montserrat-v31-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Montserrat Bold (700) */
@font-face {
    font-family: 'Montserrat';
    src: url('/files/Fonts/Montserrat/montserrat-v31-latin/montserrat-v31-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



:root {
  --font-sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji";
}

/* ==========================================
   BODY & BASE STYLES
   ========================================== */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #ffffff;
    background: linear-gradient(100deg,#fdfdfd 0% ,#f6f6f6 5%, #fdfdfd 10%, #f6f6f6 15%,#fdfdfd 20% ,#f6f6f6 25%, #fdfdfd 30%, #f6f6f6 35%, #fdfdfd 40%, #f6f6f6 45%, #ffffff 50%, #f6f6f6 55%, #ffffff 60%, #f6f6f6 65%, #fdfdfd 70%,#f6f6f6 75%, #fdfdfd 85%,#f6f6f6 90%, #fdfdfd 95%, #f6f6f6 100%,#fdfdfd 105%);
    
    overflow-x: hidden;
}

/* ==========================================
   FLOATING NAVIGATION
   ========================================== */

/* Floating Navigation Menu */
.floating-nav {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.floating-nav.visible {
    opacity: 1;
    visibility: visible;
    
}

.floating-nav .nav-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 5rem;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.floating-nav .logo {
    display: flex;
    align-items: center;
    
    font-weight: 600;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
}

.mobile-nav .mobile-logo,
.floating-nav .logo-icon {
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    border: none;
    outline: none;
    background: transparent;
}

.logo-icon img,
.mobile-logo img{
    padding: .1rem;
    max-width: 1.6rem;
    opacity: .8;
    background: transparent;
    border: none;
    outline: none;
    display: block;
}

.floating-nav .burger-menu {
        display: flex;
        visibility: visible;
        padding: 0.2rem;
    }

    .floating-nav .burger-menu span{
        display: flex;
        visibility: visible;
    }

.footer-logo img{
    max-width: 1.7rem;
    opacity: 1;
    background: transparent;
    border: none;
    outline: none;
    display: block;
}


/* ==========================================
   MOBILE BOTTOM NAVIGATION
   ========================================== */

.mobile-nav{
    display: none;
    font-family: 'montserrat' , sans-serif;
}

.burger-menu.open span:nth-child(1) {
        transform: rotate(45deg) translate(6.5px, 3px);
    }

    .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.open span:nth-child(3) {
        transform: rotate(-45deg) translate(6.5px, -4px);
    }

    /* mobile-nav Burger menu transformation */
    
    .floating-nav .burger-menu{
        transition: all 0.3s ease;
    }

    
    .floating-nav .burger-menu.open span:nth-child(1) {
        transform: rotate(45deg) translate(3.1px, 3px);
    }

    
    .floating-nav .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }

    
    .floating-nav .burger-menu.open span:nth-child(3){
        transform: rotate(-45deg) translate(4px, -4px);
    }



.floating-nav .burger-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.floating-nav .burger-menu span {
    width: 16px;
    height: 2px;
    background: #333;
    border-radius: 1px;
    transition: 0.2s;
}







.floating-nav .burger-menu:hover span {
    background: #00868a;
}


/* === Compact mobile-style floating nav on ALL screens === */
.floating-nav {
  top: auto;
  bottom: 1rem;
  right: 1rem;
  left: auto;
}

.floating-nav .nav-container {
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  width: auto;
}




/* ==========================================
   HERO SECTION - MAIN BANNER
   ========================================== */

/* Hero Section */
.hero-section {
    min-height: 95vh;
    position: relative;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(2rem, 6vw, 6rem);
    background-image: url('/img/pinnacle_pay/newDesign/background3.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 600px;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 70%);
    clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
}

/* --- Hero Top Navigation Bar --- */
/* Hero Navigation */
.navbar {
    display: flex;
    justify-content: center;
    padding: 1rem 0 2rem 0 ;
    position: relative;
    z-index: 100;
    font-family: 'montserrat', sans-serif;
}

.nav-container-hero {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.navbar .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
}

.navbar .logo-icon {
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #77e2ff;
    font-size: 13px;
    border: none;
}

.navbar .logo-icon img{
    max-width: 1.8rem;
    opacity: 1;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}


.nav-links a {
    font-size: 15px;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    
}

.nav-links a:hover {
    color: #ffffffb7;
    padding-bottom: 10px;
    
}


.nav-links li{
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-links li:hover{
    transform:translateY(-2px);
    
}


.nav-black a:hover{
    color: #018bad;
    opacity: 1;
   
    
}


/* --- Hero Burger Menu --- */
/* Hero burger menu */
.navbar .burger-menu {
    display: none;
    cursor: pointer;
    padding: 0.25rem;
}

.navbar .burger-menu span {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    margin: 2.5px 0;
    transition: 0.2s;
    border-radius: 1px;
}

.nav-black{
    border-radius: 7.7rem;
    border: 1.5px solid #fcfcfc;
    background: rgba(255, 255, 255, 0.30);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    display: flex;
    padding: 0;
    align-items: center;
    width: fit-content;
    align-self: center;
    margin: 1rem 0 2rem 0;
}


.nav-black a,
.nav-black span{
    color: #131313;
}

.no-pad-bottom{
    padding-bottom: 0;
}


/* ==========================================
   LANGUAGE SWITCHER STYLES
   ========================================== */

/* --- Desktop Navbar Language Switcher --- */



.nav-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.01rem;
    
    font-family: 'montserrat', sans-serif;
}

/* For white navbar (on black background) */

.lang-btn {
    background: none;
    border: none;
    color: #ffffff7a;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease;
    font-family: inherit;
    border-bottom: 3px solid transparent;
    font-size: 13px;
}

.nav-links li.nav-lang-switcher{
    transform: translateY(0px);
}

.lang-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    
}

.lang-btn.active {
    font-weight: 500;
    
    color: #ffffff;
}

.lang-btn.active:hover {
    transform: translateY(-0px);
    
}

.lang-separator {
    color: #ffffff7a;
    font-size: 0.7rem;
    font-family: sans-serif;
    user-select: none;
}

/* For black navbar (on white background) */


.nav-black .lang-btn {
    color: #959595;
}

.nav-black .lang-btn.active {
    color: #000000;
}

.nav-black .lang-separator {
    color: #959595;
    
}

.nav-black .lang-btn:hover {
    color: #018bad;
}

.nav-black .lang-btn.active:hover {
    transform: translateY(-0px);
    color: #000000;
}


/* --- Floating Nav Language Switcher --- */
.floating-lang-switcher {
    display: none;
}

.lang-btn-floating {
    background: none;
    border: none;
    color: #333;
    font-size: 0.2rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    min-width: auto;
    min-height: 32px;
    transition: all 0.2s ease;
    font-family: inherit;
    opacity: 0.6;
    border-radius: 4px;
}

.lang-btn-floating:hover {
    opacity: 1;
    background: rgba(0, 201, 219, 0.1);
}

.lang-btn-floating.active {
    font-weight: 600;
    opacity: 1;
    color: #00c9db;
    background: rgba(0, 201, 219, 0.1);
}

.lang-separator-floating {
    display: none;
}

/* --- Mobile Menu Language Switcher --- */
.mobile-lang-switcher {
    padding: 1rem 1.5rem 0.75rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-lang-label {
    display: none;
}

.mobile-lang-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-btn-mobile {
    background: none;
    border: none;
    color: #959595;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lang-btn-mobile:hover {
    color: #018bad;
    transform: translateY(-2px);
}

.lang-btn-mobile.active {
    color: #000000;
    font-weight: 600;
}

.lang-btn-mobile.active:hover {
    transform: translateY(0px);
    color: #000000;
}

.mobile-lang-separator {
    color: #959595;
    font-size: 0.85rem;
    user-select: none;
}

/* --- Hero Content & Text --- */
/* Hero content */
.hero-content {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    gap: 4rem;
}

.hero-phone img{
    width: 28vw;
}

.hero-text {
    flex: 1;
    max-width: 600px;
}

.armand-hero-text{
    max-width: 650px;
}

.armand-hero{
    background: linear-gradient(262deg, rgba(216, 216, 216, 0.21) 4.12%, rgba(221, 221, 221, 0.00) 50.48%), radial-gradient(131.76% 93.16% at 23.85% 53.67%, #3782FF 0.18%, #346DD6 14.6%, #2F56A5 30.96%, #23438E 50.91%, #152C7C 74.85%, #000860 100%);
    
}

.armand-hero-content{
  padding-top: 3rem;
}


.stat-row{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-title {
    font-size: 4rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -2px;
    line-height: 1.1;
}

.armand-content-box{
    justify-content: space-between;
}

.shadow-back{
    background: radial-gradient(51.63% 41.71% at 48.01% 45.91%, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.00) 100%), #FFF;
}

.website-icon{
    width: 21px;
    height: auto;
}

h1.pinnacle-hero-title{
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: #FFF;
    font-family: Raleway;
    font-size: clamp(2.5rem, 10vw, 72px);
    font-style: normal;
    font-weight: 600;
    line-height: 115%;
    color: transparent;
}

.hero-subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    margin-bottom: 2rem;
    letter-spacing: -1px;
}

.check12

h2.pinnacle-hero-sub-title{
    font-size: clamp(1.5rem, 6vw, 28px);
    color: #FFF;
    font-family: "Montserrat" , sans-serif ;
    font-style: normal;
    font-weight: 500;
    line-height: 115%; 
    letter-spacing: -0.4px;
}

.case-meta-item {
    margin-bottom: 1.5rem;
    font-style: italic;
}

.case-meta-header,
.section-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.row{
    flex-direction: row;
}

.case-meta-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-meta-label {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.case-meta-text {
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.case-meta-icon img{
    width: 18px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 103.725%; 
}

.hero-buttons img{
    width: 18px;
}

/* ==========================================
   BUTTONS & CALL-TO-ACTION
   ========================================== */

.btn-primary {
    background: white;
    color: #000000;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    width: 65%;
    justify-content: center;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: transparent;
    color: white;
    padding: 1rem 2rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 40px;
    border: 1.5px solid #F6F6F6;
    width: 65%;
    justify-content: center;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.home-btn-primary {
    color: #181818;
    color: #ffffff;
    
    background: linear-gradient(178deg, #77e2ff -15.0%,  #424242 35.31%, #212121 50.31%, #424242 65.31%, #72e0ff 120.15%);
    

      background: linear-gradient(70deg,#63dafa  -10%, #266171 10%, #273b3d 20.79%,#2c3839 25%, #1f2929 55%,#2c3839 70%,#273b3d 80%,#266171  90%,#96e8ff  115%);

      background: linear-gradient(70deg, #000000 0%, #1f2929 20.79%,#2c3839 25%, #266171 55%,#2c3839 70%,#273b3d 80%,#000000  100%);
      
            



    padding: 1rem 1.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    width: 50%;
    justify-content: center;
}


.home-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.home-btn-secondary {
    background: white;
    color: #000000;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    width: 50%;
    justify-content: center;
}

.home-btn-secondary:hover {
    background: rgb(255, 255, 255);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.home-hero-buttons-container img{
    width: 21px;
    height: auto;
}

/* --- Hero Phone Mockup --- */
.hero-phone {
    position: relative;
    z-index: 10;
}

.phone-mockup {
    width: clamp(260px, 28vw, 420px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

/* ==========================================
   PROCESS/CHAPTER NAVIGATION
   ========================================== */

/* Process Navigation */
.process-nav {
    padding: 3rem 0 2rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.process-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    gap: 1rem;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.process-step:hover {
    color: rgba(255, 255, 255, 0.9);
}

.process-step.active {
    color: white;
}

.step-circle {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    background: transparent;
    transition: all 0.2s ease;
}

.process-step:hover .step-circle {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.process-step.active .step-circle {
    background: white;
    border-color: white;
}

.process-step.active .step-circle::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #066380;
    border-radius: 50%;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 1rem;
    align-self: flex-start;
    margin-top: 20px;
}

/* ==========================================
   MAIN CONTENT SECTIONS
   ========================================== */

/* Main Content Section */
.content-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.schedule-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    
}

.schedule-box > div {
  /* Items will stretch by default, but you can also add: */
  align-self: stretch; /* Ensures each item stretches */
  text-align: left; /* Content inside starts from the left */
}

.minimal-padding{
    padding: 0 2rem; /* Horizontal padding */
}

.content-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.content-section .section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.content-section .section-subtitle {
    font-size: 1.2rem;
    color: #666;
    font-weight: 400;
}

/* --- Content Grid Layout --- */
/* Content Grid - Max 2 columns for proper 2x2 layout */
.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Reusable Content Box Component --- */
/* Reusable Content Box Component */
.content-box {
    background: white;
    border-radius: 30px;
    padding: 2rem;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    position: relative;
}

.content-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}


/* ==========================================
   BOX COMPONENTS & TAGS
   ========================================== */

.box-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 1.5rem;
    position: relative;
}

.box-tag::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 30px;
    height: 2px;
    background: #00c9db;
}

.box-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.box-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
    aspect-ratio: 1 / 1;
}

.box-icon img{
    width: 24px;
}

.box-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
}

.box-content {
    color: #666;
    line-height: 1.7;
}

.box-content ul {
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.box-content li {
    margin-bottom: 0.5rem;
}

.box-description {
    color: #666;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Logo at bottom */
.section-logo {
    text-align: center;
    margin-top: 4rem;
}

.section-logo .logo-icon {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #00c9db;
    font-size: 16px;
}

.scope-section img{
    width: 24px;
}

/* ==========================================
   RESPONSIVE DESIGN - TABLET & MOBILE
   ========================================== */
@media (max-width: 1500px) {
    .home-btn-primary,
    .home-btn-secondary{
        width: 80%;
    }

    .home-hero-buttons-container{
       width: 60%; 
}

@media (max-width: 1200px) {
    .stat-number {
    font-size: 1.4rem;
    }
}
}

/* --- Tablet (968px and below) --- */
@media (max-width: 968px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem 0;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .phone-mockup {
        width: 250px;
    }

    /* Language switcher responsive adjustments */
    .nav-lang-switcher {
        margin-left: 0.5rem;
        padding-left: 0.5rem;
    }

    .lang-btn {
        font-size: 0.9rem;
        padding: 0.2rem 0.4rem;
    }

    .floating-lang-switcher {
        padding: 0 8px;
        margin: 0 8px;
        gap: 0.3rem;
    }

    .lang-btn-floating {
        font-size: 0.8rem;
        padding: 0.3rem 0.4rem;
        min-width: 28px;
        min-height: 28px;
    }

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

/* --- Mobile (768px and below) --- */
@media (max-width: 768px) {
    .nav-container-hero {
        padding: 1rem 1.5rem;
        gap: 2rem;
    }

    .nav-links {
        display: none;
    }
    
    /* Hide desktop language switcher on mobile */
    .nav-lang-switcher {
        display: none;
    }

    /* Adjust floating nav language switcher for mobile */
    .floating-lang-switcher {
        padding: 0 6px;
        margin: 0 6px;
    }

    .lang-btn-floating {
        font-size: 0.75rem;
        min-width: 24px;
        min-height: 24px;
        padding: 0.25rem 0.3rem;
    }

    .lang-separator-floating {
        font-size: 0.7rem;
    }

    /* Mobile menu language switcher */
    .mobile-lang-switcher {
        padding: 0rem 0rem;
    }

    .mobile-lang-buttons {
        gap: 0.5rem;
    }

    .lang-btn-mobile {
        font-size: 0.8rem;
        padding: 5px 8px;
        min-height: 44px;
    }

    .navbar .burger-menu {
        display: flex;
        flex-direction: column;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-section {
        padding: 0 1rem;
    }

    .process-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .step-connector {
        display: none;
    }

    .process-step {
        font-size: 0.8rem;
        margin: 0.5rem;
    }

    .content-section .section-title {
        font-size: 2rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .floating-nav {
        top: 1rem;
        right: 1rem;
    }

    .floating-nav .nav-container {
        padding: 0.5rem 1rem;
    }

    .content-section {
        padding: 2rem 1rem;
    }

    .content-box {
        padding: 1.5rem;
    }

    
    /* PinnaclePay specific mobile adjustments */
    h1.pinnacle-hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        -webkit-text-stroke-width: 1px;
    }
    
    h2.pinnacle-hero-sub-title {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }
}

    


/* --- Extra Small Screens (430px and below - Pixel 8a) --- */
/* Extra small screens (like Pixel 8a) */
@media (max-width: 430px) {
    h1.pinnacle-hero-title {
        font-size: clamp(1.75rem, 9vw, 2.5rem);
        word-wrap: break-word;
        -webkit-text-stroke-width: 0.8px;
    }
    
    h2.pinnacle-hero-sub-title {
        font-size: clamp(1.1rem, 5vw, 1.75rem);
    }
    
    .hero-section {
        padding: 0 0.75rem;
    }
}

/* ==========================================
   SECTION SEPARATORS & MARKERS
   ========================================== */

/* Section Separator */
.section-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.separator-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e5e5 20%, #e5e5e5 80%, transparent);
    max-width: 400px;
}

.separator-logo {
    margin: 0 2rem;
}

.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.logo-icon img{
    opacity: .25;
}

/* Problem Solution Section */
.problem-solution-section {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    font-weight: 400;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}




/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1rem;
}

.stat-item {
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 1.8rem;
    line-height: 110%;
    font-weight: 700;
    color: #333;
    display: flex;
    margin-bottom: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    line-height: 100%;
    text-align: center;
}

/* Bullet Points */
.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.feature-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* Solution box specific styling */
.solution-box {
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
    border: 1px solid #e0e7ff;
}

.solution-box .stats-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive Design */
@media (max-width: 968px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-title {
        font-size: 2rem;
    }

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

@media (max-width: 768px) {
    .process-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .step-connector {
        display: none;
    }

    .process-step {
        font-size: 0.8rem;
        margin: 0.5rem;
    }

    .problem-solution-section {
        padding: 1rem;
    }

    .content-box {
        padding: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .separator-line {
        max-width: 150px;
    }
}

/* SWOT Analysis Component CSS */


/* ==========================================
   SWOT ANALYSIS SECTION
   ========================================== */

.swot-container {
    max-width: 1000px;
    margin: 0 auto;
}

.swot-main-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 3rem;
}

/* SWOT Grid Layout */
.swot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* SWOT Icon Styling */
.swot-icon {
    font-size: 1.5rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

/* SWOT Lists */
.swot-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.swot-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.swot-list li::before {
    content: '●';
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* Color-coded bullets for each SWOT category */
.strengths-box .swot-list li::before { 
    color: #10b981; /* Green */
}

.weaknesses-box .swot-list li::before { 
    color: #f59e0b; /* Orange/Yellow */
}

.opportunities-box .swot-list li::before { 
    color: #3b82f6; /* Blue */
}

.threats-box .swot-list li::before { 
    color: #ef4444; /* Red */
}

/* Responsive Design for SWOT */
@media (max-width: 768px) {
    .swot-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .swot-main-title {
        font-size: 1.5rem;
    }
}

/* User Research Affinity Map Component CSS - FIXED VERSION */

/* Affinity Grid Layout - Desktop: 2 columns */

/* ==========================================
   AFFINITY MAPPING / STICKY NOTES
   ========================================== */

.affinity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Individual Category Container */
.affinity-category {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Special handling for the Needs category to span full width on larger screens when it's the 5th item */
.needs-category {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
}

/* Category Header */
.category-header {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;    
    gap: 1.5rem;

}

.category-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    margin: 0;
    display: inline-block;
    background-color: #fcfcfc;
}

/* Sticky Notes Container */
.sticky-notes-container {
    padding: 1.5rem;
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    align-content: flex-start;
    border-radius: 12px;
}

/* Placeholder for sticky notes */
.sticky-note-placeholder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hundered {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.hundered:hover {
    transform: scale(1.04);
}

/* Sticky Note Image Styling (for when you add real images) */
.sticky-note-image {
    max-width: 120px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

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

/* Category-specific styling for different colored sticky notes containers */
.behaviors-notes {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.pain-points-notes {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.external-influence-notes {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.desired-outcomes-notes {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

.needs-notes {
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.05);
}

/* Research Caption */
.research-caption {
    text-align: center;
    margin-top: 3rem;
    color: #666;
    font-style: italic;
}

/* FIXED Responsive Design for Affinity Grid */
@media (max-width: 968px) {
    .affinity-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .needs-category {
        grid-column: 1;
        max-width: 100%;
    }
    
    .sticky-notes-container {
        min-height: 150px;
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .affinity-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .category-title {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    
    .sticky-notes-container {
        padding: 1rem;
        min-height: 120px;
    }
    
    /* Make images stretch to max width on mobile */
    .sticky-note-placeholder {
        width: 100%;
    }
    
    .hundered {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* Utility class for when you add multiple sticky note images */
.sticky-notes-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: flex-start;
}

/* User Interview Overview Section CSS */

/* Interview Overview Section Container */

/* ==========================================
   INTERVIEW & RESEARCH SECTIONS
   ========================================== */

.interview-overview-section {
    padding-top: 2rem;
}

.interview-content {
    max-width: 800px;
    margin: 0 auto;
}

.overview-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

.overview-description {
    margin-bottom: 2rem;
}

.overview-description p {
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
}

/* Interview Details List */
.interview-details {
    margin-bottom: 2.5rem;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.detail-item::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
    margin-right: 0.25rem;
}
.no-dot::before{
    content: none;
    font-size: 0;
    margin-top: 0;
    flex-shrink: 0;
    margin-right: 0;
}

.label-dot::before{
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
    margin-right: 0.4rem;
}

.detail-label {
    font-weight: 600;
    color: #333;
    min-width: 120px;
    flex-shrink: 0;
}

.detail-content {
    flex: 1;
}

/* Special styling for the memorable quote */
.memorable-quote .detail-content {
    font-style: italic;
    color: #555;
    position: relative;
    padding-left: 1rem;
    border-left: 3px solid #00c9db;
    background: rgba(99, 102, 241, 0.05);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
}

/* Affinity Map Section */
.affinity-section {
    padding-top: 2rem;
}

.affinity-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.affinity-description {
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .interview-content {
        max-width: 100%;
    }
    
    .detail-item {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .detail-item::before {
        margin-top: 0;
    }
    
    .detail-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .overview-title {
        font-size: 1.5rem;
    }
    
    .affinity-title {
        font-size: 1.3rem;
    }
    
    .memorable-quote .detail-content {
        padding: 0.5rem 0.75rem;
        margin-left: 0;
        border-left-width: 2px;
    }
}

/* Personas Section CSS */

/* Personas Cards Grid */

/* ==========================================
   PERSONA CARDS
   ========================================== */

.personas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.persona-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.persona-image-container {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 3/4;
}

/* Placeholder for persona images (remove when adding real images) */
.persona-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.persona-image-placeholder {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.persona-image-placeholder img{
    box-shadow: 0 45px 112px 0 rgba(0, 0, 0, 0.04), 0 22.781px 48.825px 0 rgba(0, 0, 0, 0.03), 0 9px 18.2px 0 rgba(0, 0, 0, 0.03), 0 1.969px 6.475px 0 rgba(0, 0, 0, 0.01);
}

.persona-image-placeholder:hover {
    transform: translateY(-4px);
}

/* Personas Text Content */
.personas-content {
    max-width: 900px;
    margin: 4rem auto 0;
}

.breakdown-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

.breakdown-description {
    margin-bottom: 3rem;
}

.breakdown-description p {
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
}

/* Individual Persona Breakdown */
.persona-breakdown {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.persona-breakdown:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.persona-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Persona Details */
.persona-details .detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: #666;
    line-height: 1.6;
}

.persona-details .detail-item::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.persona-details .no-dot::before{
    content: none;
    font-size: 0;
    margin-top: 0;
    flex-shrink: 0;
    margin-right: 0;
}

.persona-details .detail-label {
    font-weight: 600;
    color: #333;
    min-width: 140px;
    flex-shrink: 0;
}

.persona-details .detail-content {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .personas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .persona-card:last-child {
        grid-column: 1 / -1;
        max-width: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .personas-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 2rem 0;
    }
    
    .persona-card:last-child {
        grid-column: 1;
        max-width: 100%;
    }
    
    .persona-image-container {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .personas-content {
        max-width: 100%;
        margin-top: 2rem;
    }
    
    .persona-details .detail-item {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .persona-details .detail-item::before {
        margin-top: 0;
    }
    
    .persona-details .detail-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .breakdown-title {
        font-size: 1.5rem;
    }
    
    .persona-name {
        font-size: 1.3rem;
    }
}

/* Card Sorting Information Architecture Section CSS */

/* Information Architecture Diagram */
.ia-diagram-container {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Placeholder for IA diagram (remove when adding real image) */
.ia-image-placeholder {
    width: 100%;
    max-width: 800px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Actual IA diagram image styling (for when you add real image) */
.ia-diagram-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ia-diagram-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.ia-image-placeholder img{
    max-width: 100%;
    max-height: 100%;
}

/* Card Sorting Text Content */

/* ==========================================
   CARD SORTING SECTION
   ========================================== */

.card-sorting-content {
    max-width: 800px;
    margin: 4rem auto 0;
}

.card-sorting-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

.card-sorting-description {
    margin-bottom: 3rem;
}

.card-sorting-description p {
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.card-sorting-description p:last-child {
    margin-bottom: 0;
}

/* Why It Matters Section */
.why-matters-section {
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

.why-matters-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Matters Details */
.matters-details .detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: #666;
    line-height: 1.6;
}

.matters-details .detail-content::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.matters-details .detail-label {
    font-weight: 600;
    color: #333;
    min-width: 140px;
    flex-shrink: 0;
}

.matters-details .detail-content {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 968px) {
    .ia-diagram-container {
        margin: 2rem 0;
    }
    
    .ia-image-placeholder {
        min-height: 300px;
        padding: 1.5rem;
    }
    
    .card-sorting-content {
        max-width: 100%;
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .ia-image-placeholder {
        min-height: 250px;
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .matters-details .detail-item {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .matters-details .detail-item::before {
        margin-top: 0;
    }
    
    .matters-details .detail-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .card-sorting-title {
        font-size: 1.5rem;
    }
    
    .why-matters-title {
        font-size: 1.3rem;
    }
}

/* UX Audit Section CSS */

/* App Screenshots Container */
.app-screenshots-container {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    
}

.screenshots-row {
    display: flex;
    justify-content:center;
    align-items: center;
    justify-items: stretch;
    gap: 1rem;
    flex-wrap: nowrap;
    width: 65%;
}

.screenshot-item {
    flex: 0 0 auto;
    background: transparent;
}

.screenshots-row img {
    width: auto;
    height: auto;
     object-fit: cover;
    min-width: 0;
    border-radius: 20px;
    transition: transform 0.3s ease;
    display: block;
}

.smaller{
    padding: 0 3rem;
}

/* UX Audit Content Box */
.ux-audit-content {
    margin-top: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.audit-section {
    margin: 2rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.audit-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.audit-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.audit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.audit-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.audit-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .screenshot-item {
        width: 140px;
        height: 280px;
    }
    
    .screenshots-row {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .app-screenshots-container {
        margin: 2rem 0;
    }
    
    /* Show only first row on mobile, hide second row */
    .screenshots-row:nth-child(2) {
        display: none;
    }
    
    .screenshot-item {
        width: 120px;
        height: 240px;
    }
    
    .screenshots-row {
        gap: 0.5rem;
        justify-content: space-around;
    }
    
    .ux-audit-content {
        margin-top: 2rem;
    }
    
    .audit-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .screenshot-item {
        width: 100px;
        height: 200px;
    }
    
    .screenshots-row {
        gap: 0.25rem;
    }
    
    .screenshot-placeholder {
        font-size: 0.7rem;
        padding: 0.5rem;
    }
}

/* User Flows Section CSS */

/* User Flows Container */
.user-flows-container {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background: transparent ;
}

/* Individual Flow Diagram */
.flow-diagram {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.flow-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    text-align: left;
    align-self: center;
}

.flow-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Placeholder for flow diagrams (remove when adding real images) */
.flow-image-container {
    width: 100%;
    max-width: 900px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Actual flow diagram image styling (for when you add real images) */
.flow-diagram img {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flow-diagram img:hover {
    transform: translateY(-2px);
}

/* User Flows Content Box */
.user-flows-content {
    margin-top: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.benefits-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.benefits-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.benefits-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .user-flows-container {
        margin: 2rem 0;
        gap: 2rem;
    }
    
    .flow-image-placeholder {
        min-height: 250px;
        padding: 1.5rem;
    }
    
    .user-flows-content {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .user-flows-container {
        gap: 1.5rem;
    }
    
    .flow-title {
        font-size: 1.1rem;
    }
    
    .flow-image-placeholder {
        min-height: 200px;
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .benefits-title {
        font-size: 1.1rem;
    }
}

/* Style Guide Section CSS */

.style-guide-section {
    align-items: center;
}

/* Style Guide Image Container */
.style-guide-image-container {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Placeholder for style guide image (remove when adding real image) */
.style-guide-image-container {
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Actual style guide image styling (for when you add real image) */
.style-guide-image-container img {
    width: 80%;
    height: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    align-self: center;
    background-color: #ffffff00;
    
    
}

.style-guide-image-container img:hover {
    transform: translateY(-4px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    
    

}

.no-effects img:hover{
    /* transform: translateY(0px); */
    background: radial-gradient(51.63% 41.71% at 48.01% 45.91%, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.00) 100%), #FFF;
}

.shadow img {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.shadow img:hover{
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0px -2px 25px rgba(0, 0, 0, 0.3);

}


/* Style Guide Content Box */
.style-guide-content {
    margin-top: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.summary-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.summary-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.summary-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .style-guide-image-container {
        margin: 2rem 0;
    }
    
    .style-guide-image-placeholder {
        min-height: 300px;
        padding: 1.5rem;
    }
    
    .style-guide-content {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .style-guide-image-placeholder {
        min-height: 250px;
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .summary-title {
        font-size: 1.1rem;
    }
}

/* Usability Testing Section CSS */

/* Results Table Container */
.results-table-container {
    margin: 3rem auto;
    overflow-x: auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
    table-layout: fixed;
}

.results-table thead {
    background: linear-gradient(135deg, #02494f 0%, #00c9db 100%);
    color: white;
}

.results-table th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    height: 60px;
    vertical-align: middle;
}

.results-table td {
    padding: 1.25rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    height: 80px;
}

.result-row:last-child td {
    border-bottom: none;
}

.result-row:hover {
    background: rgba(99, 102, 241, 0.02);
}

/* Table Column Widths - Tighter spacing */
.task-col { width: 22%; }
.success-col { width: 14%; }
.time-col { width: 14%; }
.seq-col { width: 14%; }
.quote-col { width: 36%; }

/* Table Column Styles */
.task-name {
    font-weight: 600;
    color: #333;
}

.success-rate {
    font-weight: 700;
    text-align: center;
    color: #16a34a;
    font-size: 1.1rem;
}

.avg-time {
    font-family: 'Courier New', monospace;
    color: #666;
    text-align: center;
}

.seq-score {
    color: #f59e0b;
    text-align: center;
    font-weight: 600;
}

.user-quote {
    font-style: italic;
    color: #555;
    line-height: 1.4;
}

.table-caption {
    text-align: center;
    padding: 1rem;
    color: #666;
    font-style: italic;
    background: #f8f9fa;
    border-top: 1px solid #f0f0f0;
}

/* Mobile Cards (Hidden on desktop) */
.results-cards {
    display: none;
    gap: 1rem;
    margin: 3rem 0;
}

.result-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

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

.card-task {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.card-success {
    font-weight: 700;
    color: #16a34a;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.9rem;
}

.card-metrics {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-label {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
}

.metric-value {
    font-weight: 600;
    color: #333;
}

.metric-golden{
    color: #f59e0b;
}

.card-quote {
    font-style: italic;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #00c9db;
}

.cards-caption {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-top: 1rem;
}

/* Testing Content Box */

/* ==========================================
   TESTING SECTIONS
   ========================================== */

.testing-content {
    margin-top: 4rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* --- Findings Lists --- */
.findings-section,
.improvements-section,
.impact-section {
    margin: 2rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.impact-section {
    border-bottom: none;
    margin-bottom: 0;
}

.findings-title,
.improvements-title,
.impact-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.findings-list,
.improvements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.findings-list li,
.improvements-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.findings-list li::before,
.improvements-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

.impact-section p {
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .results-table-container {
        margin: 2rem 0;
    }
    
    .testing-content {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    /* Hide table on mobile, show cards */
    .results-table-container {
        display: none;
    }
    
    .results-cards {
        display: flex;
        flex-direction: column;
    }
    
    .findings-title,
    .improvements-title,
    .impact-title {
        font-size: 1.1rem;
    }
}

/* Prototype Evolution Section CSS */

/* Evolution Container */
.evolution-container {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.evolution-row {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

/* Evolution Group */
.evolution-group {
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.evolution-screens {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.screen-placeholder {
    width: 120px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 20px;
    color: #999;
    font-style: italic;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.5rem;
    flex-shrink: 0;
}

/* Actual screen image styling (for when you add real images) */
.evolution-group img  {
    width: 120px;
    height: 240px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.evolution-group img:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.evolution-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin: 0;
}

/* Prototype Content Box */

/* ==========================================
   PROTOTYPE SHOWCASE
   ========================================== */

.prototype-content {
    margin-top: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* --- Achieved Section --- */
.achieved-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.achieved-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.achieved-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.achieved-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.6;
}

.achieved-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .evolution-container {
        margin: 2rem 0;
        gap: 2rem;
    }
    
    .evolution-row {
        gap: 1.5rem;
    }
    
    .screen-placeholder {
        width: 100px;
        height: 200px;
        font-size: 0.6rem;
    }
    
    .prototype-content {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    /* Mobile: Single column with all evolution groups stacked */
    .evolution-container {
        gap: 2rem;
    }
    
    .evolution-row {
        flex-direction: column;
        gap: 2rem;
    }
    
    .evolution-group {
        max-width: 100%;
    }
    
    .evolution-screens {
        gap: 0.75rem;
        justify-content: center;
    }
    
    .screen-placeholder {
        width: 90px;
        height: 180px;
        font-size: 0.6rem;
        padding: 0.25rem;
    }
    
    .evolution-title {
        font-size: 1rem;
    }
    
    .achieved-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .evolution-screens {
        gap: 0.5rem;
    }
    
    .screen-placeholder {
        width: 80px;
        height: 160px;
        font-size: 0.5rem;
    }
}

/* Try It Yourself Section CSS */

/* Try It Section Container */
.try-it-section {
    border-radius: 24px;
    margin: 4rem auto;
    max-width: 1000px;
}

/* Call to Action Container */
.cta-container {
    display: flex;
    justify-content: center;
    margin: 2rem 0 3rem;
}

.prototype-button {
    background: #333;
    background: linear-gradient(70deg,#00C9FF  -10%, #266171 10%, #273b3d 20.79%, #000 55%,#273b3d 70%,#266171  115%);
    
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.prototype-button:hover {
    
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.button-icon {
    font-size: 1rem;
}

/* Phone Mockup Container */

/* --- Mockup Container --- */
.mockup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
    padding-top: 2rem;
}

.try-it-section{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Placeholder for mockup (remove when adding real image) */

/* Actual mockup image styling (for when you add real image) */
.mockup-container img {
    max-width: 850px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

.mockup-container img:hover {
    transform: translateY(-5px);
}

/* Responsive Design */
@media (max-width: 968px) {
    .try-it-section {
        margin: 2rem auto;
    }
    
    .mockup-container {
        width: 650px;
        height: auto;
        padding: 1.5rem;
    }

    .mockup-container img {
        max-width: 100%
    
    }
    
    .prototype-button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .try-it-section {
        margin: 2rem 1rem;
        padding: 2rem 1rem;
    }
    
    .mockup-container {
        width: 450px;
        height: auto;
        padding: 1.5rem;
    }

    .mockup-container img {
        max-width: 100%
    
    }
    
    .prototype-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        gap: 0.5rem;
    }
    
    .cta-container {
        margin: 1.5rem 0 2rem;
    }
}

/* Learning Section CSS */


/* ==========================================
   LEARNING & REFLECTIONS SECTION
   ========================================== */

.learning-section {
    padding-bottom: 6rem;
}

/* Learning Content Box */
.learning-content {
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.learning-content .box-content p {
    color: #666;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.learning-content .box-content p:last-of-type {
    margin-bottom: 2rem;
}

/* TL;DR Section */

/* --- TL;DR Summary Section --- */
.tldr-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #f0f0f0;
}

.tldr-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

.tldr-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tldr-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: #666;
    line-height: 1.7;
    font-size: 1.05rem;
}

.tldr-list li::before {
    content: '●';
    color: #00c9db;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .learning-section {
        padding-bottom: 4rem;
    }
    
    .learning-content {
        margin-top: 2rem;
    }
    
    .learning-content .box-content p {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .tldr-list li {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .learning-section {
        padding-bottom: 3rem;
    }
    
    .tldr-title {
        font-size: 1.2rem;
    }
    
    .learning-content .box-content p {
        margin-bottom: 1.25rem;
    }
}


@media (max-width: 458px) {
   .mockup-container {
        width: 280px;
        height: auto;
        padding: 1.5rem;
    }

    .mockup-container img {
        max-width: 100%
    
    }
}


/* Footer and Navigation Section CSS */

/* Case Study Footer Container */

/* ==========================================
   FOOTER SECTION
   ========================================== */

.case-study-footer {
    margin-top: 1rem;
}

/* Case Study Navigation */
.case-nav-section {
    /* background: #f8f9fa; */
    padding: 0 0 3rem 0;
    /* border-top: 1px solid #e9ecef; */
}

.case-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.case-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    max-width: 300px;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}



.case-nav-item:not(.disabled):hover {
    background: #d9f2ff65;
    transform: translateY(-2px);
    border-bottom-color: #229fc2;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.082); */
}

.case-nav-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.case-nav-item.previous {
    flex-direction: row;
}

.case-nav-item.next {
    /* flex-direction: row-reverse; */
    text-align: right;
}

.nav-arrow {
    color: #666;
    color: #002833;
    transition: color 0.2s ease;
}

.case-nav-item:not(.disabled):hover .nav-arrow {
    color: #002f45;
}

.nav-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-label {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
}

.nav-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

/* Main Footer */
.main-footer {
    
    background: linear-gradient(70deg,#00C9FF  -20%, #266171 0%, #273b3d 8.79%, #000 75%,#273b3d 92%,#266171  115%);
    color: white;
    padding: 3rem 0 1rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Footer Brand */
.footer-brand {
    display: flex;
    align-items: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo .logo-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 16px;
}

.brand-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

/* Footer Navigation */
.footer-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.footer-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.5rem 0;
}

.footer-link:hover {
    color: white;
    transform: translateY(-1px);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
    padding: 1.5rem 2rem 0;
    text-align: center;
}

.copyright {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .case-nav-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .case-nav-item {
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }
    
    .case-nav-item.next {
        flex-direction: row;
        text-align: left;
    }
    
    .footer-container {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .case-nav-section {
        padding: 1.5rem 0;
    }
    
    .main-footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-nav {
        gap: 1rem;
    }
    
    .footer-link {
        font-size: 0.9rem;
    }
    
    .brand-name {
        font-size: 1.1rem;
    }
    
    .footer-bottom {
        padding: 1rem 1rem 0;
    }
}

/* Chapter Navigation - Unified CSS */


/* ==========================================
   CHAPTER NAVIGATION DOTS
   ========================================== */

.chapter-navigation {
    position: sticky;
    top: 0;
    background: white;
    padding: 2rem 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #f0f0f0;
}

.chapter-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    gap: 1rem;
}

.chapter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #575757;
    font-size: 0.9rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chapter-item:hover {
    color: #515151;
}

.chapter-item:hover .chapter-dot{
    border: 2px solid #515151;
}

.chapter-item.active {
    color: #095372;
}

.chapter-item.completed {
    color: #095372;
}

.chapter-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    background: white;
    transition: all 0.2s ease;
    position: relative;
}



.chapter-dot.completed::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.chapter-dot.current {
    border-color: #095372;
    background: white;
    transform: scale(1.2);
}

.chapter-dot.current::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #095372;
    border-radius: 50%;
}

.chapter-label {
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.chapter-item.active .chapter-label {
    font-weight: 600;
}

.chapter-connector {
    flex: 1;
    height: 2px;
    background: #ddd;
    max-width: 80px;
    transition: all 0.2s ease;
}

.chapter-connector.completed {
    background: #095372;
    color: #095372;
}

/* Fix the active state styling */
.chapter-item.active .chapter-dot {
    border-color: #095372;
    background: white;
    transform: scale(1.2);
}

.chapter-item.active .chapter-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #095372;
    border-radius: 50%;
    display: block;
}

/* Make sure completed dots have checkmarks */
.chapter-dot.completed {
    background: #095372;
    border-color: #095372;
}

.chapter-dot.completed::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 968px) {
    .chapter-navigation {
        padding: 1.5rem 0;
    }
    
    .chapter-progress {
        gap: 0.75rem;
        padding: 0 1rem;
    }
    
    .chapter-item {
        font-size: 0.8rem;
    }
    
    .chapter-dot {
        width: 18px;
        height: 18px;
    }
    
    .chapter-connector {
        max-width: 60px;
    }
}

@media (max-width: 768px) {
    .chapter-progress {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .chapter-connector {
        display: none;
    }
    
    .chapter-item {
        margin: 0.25rem;
    }
    
    .chapter-label {
        font-size: 0.75rem;
    }
    
    .chapter-dot {
        width: 16px;
        height: 16px;
        margin-bottom: 0.25rem;
    }
}


/* ==========================================
   CHAPTER NAVIGATION DOTS
   ========================================== */

.chapter-navigation {
    z-index: 50;
}

.chapter-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.chapter-link:hover {
    color: #6366f1;
}

.chapter-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.section-marker {
    display: flex;
    align-items: center;
    margin: 4rem 0 2rem;
    opacity: 0.3;
    padding: 0 2rem;
}

.marker-line {
    flex: 1;
    height: 1px;
    background: #ddd;
}

.marker-label {
    padding: 0 2rem;
    font-size: 0.9rem;
    color: #999;
    font-weight: 500;
}





@media (max-width: 768px) {

    .floating-nav {
        display: none;
    }
    
    /* Create mobile floating navigation */
    .mobile-nav {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1rem;
        transition: all 0.2s ease;
        
        
    }

  
    
    /* Mobile nav toggle button */
    .mobile-nav-toggle {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 50px;
        padding: .5rem .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .mobile-logo {
        width: 24px;
        height: 24px;
        background: #6366f1;
        color: white;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
    }
    
    /* Mobile chapter dots */
    .mobile-chapter-nav {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        display: none;
        flex-direction: column;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: .5rem .2rem;
        min-width: 8rem;
    }
    
    .mobile-chapter-nav.open {
        display: flex;
    }
    
    .mobile-chapter-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        padding: 0.75rem 1.5rem;
        color: #232323;
        font-size: 0.8rem;
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        color: #242424;
        text-decoration: none;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
    }

    .mobile-chapter-item:hover{
        background: #ecf9ff65;
        border-left-color: #229fc2;
        color: #002833;
        padding-left: 20px;
    }
    
    .mobile-chapter-dot {
        width: 12px;
        height: 12px;
        border: 2px solid #ddd;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    /* .mobile-chapter-item.active .mobile-chapter-dot {
        background: #6366f1;
        border-color: #6366f1;
    }
    
    .mobile-chapter-item.completed .mobile-chapter-dot {
        background: #6366f1;
        border-color: #6366f1;
    } */

    /* Burger menu transformation */
    .burger-menu {
        transition: all 0.3s ease;
        width: 20px;
    }

    .burger-menu.open span:nth-child(1) {
        transform: rotate(45deg) translate(6.5px, 3px);
    }

    .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.open span:nth-child(3) {
        transform: rotate(-45deg) translate(6.5px, -4px);
    }

    /* mobile-nav Burger menu transformation */
    .mobile-nav .burger-menu,
    .floating-nav .burger-menu{
        transition: all 0.3s ease;
    }

    .mobile-nav .burger-menu.open span:nth-child(1),
    .floating-nav .burger-menu.open span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 3px);
    }

    .mobile-nav .burger-menu.open span:nth-child(2),
    .floating-nav .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav .burger-menu.open span:nth-child(3),
    .floating-nav .burger-menu.open span:nth-child(3){
        transform: rotate(-45deg) translate(4px, -4px);
    }
}

.mobile-nav .burger-menu,
.floating-nav .burger-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-nav .burger-menu span,
.floating-nav .burger-menu span {
    width: 16px;
    height: 2px;
    background: #333;
    border-radius: 1px;
    transition: 0.2s;
}

.dark img{
    opacity: 1;
}

.hide{
    display: none;
}

.hundered{
    max-width: 100%;
    max-height: 100%;
}



/* === Affinity Map: mobile readability fix (scoped) === */
.affinity-grid img.hundered {
  width: 100%;
  height: auto;
  display: block;
}

.affinity-grid .sticky-note-placeholder {
  height: auto;
  background: none;
  border: none;
}



/* Burger Menu Animation - Matching navbar style */


/* Main Dropdown Menu (Floating Nav) - Positioned above the burger button */
.dropdown-menu {
    position: fixed;
    bottom: 4.5rem;
    right: 2rem;
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 1rem 0 .4rem 0;
    min-width: 200px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 500;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.2s ease;
}

.dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    background: rgba(255, 255, 255, 0.863);
}

.menu-content {
    display: flex;
    flex-direction: column;
    font-family: 'montserrat' , sans-serif;
}

.mobile-chapter-nav a{
    padding-left: .75rem;
    
}

/* .mobile-chapter-nav a:first-child{
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}


.mobile-chapter-nav a:last-child{
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
} */

.menu-item {
    padding: 0.75rem 1.5rem;
    color: #0c0c0c;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.menu-item:hover {
    background: #f0fdff;
    border-left-color: #00c9db;
    color: #002f45;
    padding-left: 30px;
    
}

/* Menu Language Switcher */
.menu-lang-switcher {
    padding: .75rem 1rem .75rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.lang-btn-menu {
    background: none;
    border: none;
    color: #959595;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lang-btn-menu:hover {
    color: #018bad;
    transform: translateY(-2px);
}

.lang-btn-menu.active {
    color: #0c0c0c;
    font-weight: 500;
}

.lang-btn-menu.active:hover {
    transform: translateY(0px);
    color: #000000;
}

.menu-lang-separator {
    color: #959595;
    font-size: 0.85rem;
    user-select: none;
}


/* Hero Dropdown Menu */
.hero-dropdown-menu {
    position: fixed;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 255, 255);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 1rem 0;
    min-width: 250px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px) scale(0.95);
    transition: all 0.2s ease;
}

.hero-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.hero-menu-content {
    display: flex;
    flex-direction: column;
}

.hero-menu-item {
    padding: 0.75rem 1.5rem;
    color: #3b3b3b;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    text-align: center;
}

.hero-menu-item:hover {
    background: #ecf9ff65;
    border-left-color: #229fc2;
    color: #002833;
    padding-left: 30px;
}


/* .home-hero-section{
    border-bottom: 2px solid  #efefef; 
} */

/* Show burger menus responsively */
@media (max-width: 768px) {
    /* Show hero burger menu on mobile */
    .navbar .burger-menu {
        display: flex;
    }
    
    /* Hide regular nav links on mobile */
    .nav-links {
        display: none;
    }
    
    /* Adjust dropdown position for mobile - above the floating nav */
    .dropdown-menu {
        bottom: 4rem;
        right: 1rem;
        min-width: 180px;
    }
    
    .hero-dropdown-menu {
        top: 7rem;
        min-width: 200px;
    }
    
    /* Remove dots from mobile chapter navigation */
    .mobile-chapter-dot {
        display: none;
    }
    
    /* Adjust mobile chapter items without dots */
    .mobile-chapter-item {
        padding-left: 0;
        justify-content: flex-start;
    }
}

@media (min-width: 769px) {
    /* Show floating nav burger menu on desktop */
    .floating-nav .burger-menu {
        display: flex;
    }
    
    /* Position dropdown above the floating nav on desktop */
    .dropdown-menu {
        bottom: 4.5rem;
        right: 2rem;
    }
}

/* Ensure burger spans inherit color */
.floating-nav .burger-menu span {
    background: #333;
}

.navbar .burger-menu span {
    background: white;
}

.navbar .black-burger span{
    background: rgb(49, 49, 49);
    
}

/* Add overlay for mobile when menu is open */
@media (max-width: 768px) {
    .dropdown-menu.open::before,
    .hero-dropdown-menu.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(255, 255, 255);
        z-index: -1;
        border-radius: 12px;
    }
}


 /* Home Hero Section */
        .home-hero-section {
            position: relative;
            
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Home Hero Video Background */
        .home-hero-video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .home-hero-video-background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Home Hero Navbar Placeholder */
        .home-hero-navbar-placeholder {
            /* Your navbar code goes here */
            padding: 1rem 2rem;
            padding-bottom: 0;
        }

        /* Home Hero Content */
        .home-hero-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            padding-bottom: 0;
            margin-bottom: 0;
            position: relative;
            padding-top: 0;
        }

        /* Home Hero Title Container */
        .home-hero-title-container {
            text-align: center;
            margin-bottom: 1rem;
            margin-top: 4rem;
            position: relative;
        }

        .home-hero-greeting {
            position: absolute;
            top: -0.5em;
            left: 0;
            font-size: clamp(.9rem, 2vw, 1.3rem);
            font-weight: 400;
            color: #333;
            color: linear-gradient(181deg, #757575 14.79%, #3F3F3F 35.31%, #1B1B1B 100.15%);
        }

        .home-hero-main-title {
            font-size: clamp(3rem, 5vw, 6rem);
            font-family: "Montserrat" , sans-serif;
            font-style: normal;
            font-weight: 700;
            border: 0;
            border-color: #ffffff00;
            line-height: 120%; 
            text-transform: uppercase;
            background: linear-gradient(181deg, #757575 14.79%, #3F3F3F 35.31%, #1B1B1B 100.15%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             text-shadow: none;
             outline: none;
            border: none;
             transform: translateZ(0);
  backface-visibility: hidden;
        }

        .home-hero-subtitle {
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            color: #4a4a4a;
            font-weight: 400;
            margin-top: 0rem;
        }

        /* Home Hero Buttons Placeholder */
        .home-hero-buttons-container {
            display: flex;
            gap: 1rem;
            margin-top: 0rem;
            font-family: Montserrat;
            font-size: 15px;
            font-style: normal;
            font-weight: 600;
            line-height: 103.725%; 
            width: 42%;
            background: transparent;
        }

        

        /* Home Hero Stats and Image Container */
        .home-hero-stats-image-container {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 2rem;
            width: 100%;
            max-width: 1400px;
            padding: 0rem 2rem 0 2rem;
            overflow: visible;
            justify-items: center;
            align-content:center
        }

        /* Home Hero Stats Columns */
        .home-hero-stats-left,
        .home-hero-stats-right {
            display: flex;
            align-items: flex-start;
            gap: 3rem;
        }

    
        .home-hero-stat-item {
            text-align: center;
            height: 160px;
        }

        .home-hero-stat-item h5{
            font-size: clamp(32px, 4vw, 36px);
            font-weight: 700;
            color: #979797;
            margin-bottom: 0.1rem;
            background: linear-gradient(175deg, #757575 19.53%, #000000 87.96%);
            
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        

        .home-hero-stat-item p{
            color: #1D1D1D;
            text-align: center;
            font-family: Montserrat;
            font-size: clamp(11px, 1vw, 17px);
            font-style: normal;
            font-weight: 500;
            line-height: 140%; 
            align-self: stretch;
        }

        .home-hero-stat-description {
            font-size: clamp(0.9rem, 1.5vw, 1.1rem);
            color: #4a4a4a;
            
            line-height: 1.4;
        }

        /* Home Hero Center Image Placeholder */
        .home-hero-center-image {
            width: clamp(300px, 40vw, 500px);
            height: clamp(400px, 50vh, 600px);
            /* Your image will be inserted here */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 1rem;
        }

        .home-hero-center-image img {
             width: 100%;
            height: auto;
            object-fit: contain;
            /* object-position: top center; */
            transform: translateY(-15px);
        }
           

        /* Home Hero Responsive Design */
        @media (max-width: 1214px) {
           
            .home-hero-buttons-container {
                width: 60%;
                
            }
        }

        @media (max-width: 1024px) {
            .home-hero-stats-image-container {
                grid-template-columns: 1fr;
                gap: 21px;
                align-items: center;
                justify-content: center;
            }

            .home-hero-stats-image-container > *:nth-child(1) { grid-row: 1; }
             .home-hero-stats-image-container > *:nth-child(2) { grid-row: 3; }
            .home-hero-stats-image-container > *:nth-child(3) {     grid-row: 2; }

            .home-hero-content{
                gap:21px;
            }

            .home-hero-stat-item {
                width: 100%;
                height: 60px;
                align-items: center;
                display: flex;
                flex-direction: column;
            }

            .home-hero-stats-left,
            .home-hero-stats-right {
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                gap: 21px;
            }

            .home-hero-stats-right {
                align-items: center;
            }

            .home-hero-center-image {
                order: -1;
                margin: 0 auto;
                width: 70vw;
            }

            .home-hero-main-title{
                padding-top: .5rem;
            }
            

            .home-hero-buttons-container {
                width: 60%;
                
            }
        }

        /* Home Hero Responsive Design */
        @media (max-width: 864px) {
            .home-hero-stats-image-container {
                grid-template-columns: 1fr;
                gap: 21px;
                
            }

            .black-burger span{
        color: #000000;
    }


            .home-hero-stats-image-container > *:nth-child(1) { grid-row: 1; }
             .home-hero-stats-image-container > *:nth-child(2) { grid-row: 3; }
            .home-hero-stats-image-container > *:nth-child(3) {     grid-row: 2; }

            .home-hero-stats-left,
            .home-hero-stats-right {
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                width: 100%;
            }

            .home-hero-stats-right {
                align-items: center;
            }

            .home-hero-center-image {
                order: -1;
                margin: 0 auto;
            }

            .home-hero-buttons-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 80%;
            }

            .home-hero-stat-item {
                width: 100%;
                align-items: center;
                display: flex;
                flex-direction: column;
            }
            
            .home-hero-center-image{
                width: 80vw;
            }
            
        }

        @media (max-width: 640px) {
            .home-hero-content {
                padding: 1rem;
                align-items: center;
            }

            .home-hero-stats-left,
            .home-hero-stats-right {
                flex-direction: column;
                gap: 2rem;
                align-items: center;
            }

            .home-hero-stat-item {
                width: 100%;
                align-items: center;
                display: flex;
                flex-direction: column;
            }

            .home-hero-buttons-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                
            }

            .home-hero-greeting {
                font-size: 1.2rem;
                top: -0.6em;
            }

            .home-hero-center-image{
                width: 90vw;
            }

            .home-hero-stats-image-container > *:nth-child(1) { grid-row: 1; }
             .home-hero-stats-image-container > *:nth-child(2) { grid-row: 3; }
            .home-hero-stats-image-container > *:nth-child(3) {     grid-row: 2; }

            .home-hero-main-title{
                padding-top: 1rem;
            }
            
        }

        @media (max-width: 570px){
            .home-hero-greeting{
                top: -0.5em;
                left: 50%;
                transform: translateX(-50%);
            }
            
    
        }

        .contact-section-frame{
            /* background: #f6feff;  */
            padding-bottom: 4rem;
        }

        /* .content-section-frame-projects{
            border-bottom: 2px solid  #7e7e7e; 
        } */

        .all-projects{
            display: flex;
            flex-direction: column;
            
        }

        .case-study-box{
            display: flex;
            flex-direction: row;
            height: 100%;
            justify-content: center;
            align-items: center;
            height: clamp(550px, 650px, 750px);
            margin-bottom: 76px;
        }

        .case-study-box-left{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            
            width: 50%;
            align-items: flex-start;
            flex-shrink: 0;
            align-self: stretch;
        }

        .case-study-box-left-upper{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .little-margin{
            margin-bottom: 20px;
        }

        .case-study-box img{
            width: 90%;
            height: auto;
        }

        .read-more-btn{
            display: flex;
            
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            border-radius: 23px;
            width: 65%;
            padding: .7rem 1.2rem;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.40);
            transition: all 0.2s ease;
            font-weight: 600;
            background: linear-gradient(135deg, #865aff16 0%, #a550ff0f 100%);
            background: linear-gradient(180deg, #fcffff 1.36%, #ecfbff 41.68%, #e4fcff 70.79%, #eefbff 110%);
            background: radial-gradient(600% 90% at 200% 50%,  0%, #266171 67.45%, #00C9FF 95.19%);
            background: linear-gradient(70deg,#00C9FF  -10%, #266171 10%, #273b3d 60.79%, #000 75%,#273b3d 85%,#266171  95%);
            
            background: linear-gradient(70deg, #000000 0%, #1f2929 20.79%,#2c3839 25%, #266171 55%,#2c3839 70%,#1f2929 80%,#000000  100%);

            
        }

        

        .read-more-btn:hover{
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        a.read-more-btn {
            color: #FFF;
            
            text-decoration: none;
        }

        a.read-more-btn :hover{
            color: #FFF;
            text-decoration: none;
        }


        a.read-more-btn :active{
            color: #FFF;
            text-decoration: none;

        }

        /* Case Study Cards Mobile Fix */
@media (max-width: 840px){
    .read-more-btn{
            
            align-self: center;
            
            
        }
}


        .case-study-box-right{
            display: flex;
            justify-content: flex-end;
            padding-right: 10px;
            
        }

        .case-study-tags{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 12px;
        }

        .case-study-tag{
            display: inline-flex;
            padding: 1.8px 12px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 40px;
            background: #f3f3f3;
            color: #5d5d5d;
            font-size: 13px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.40);
            white-space: nowrap;
            flex-shrink: 0;
        }




        /* Contact Section Styling */
.content-box a.home-btn-primary {
    margin-top: 1.5rem;
    text-decoration: none;
    display: inline-flex;
    width: auto;
    padding: 1rem 2rem;
}

.content-box a.home-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Adjust box content for better spacing in contact cards */
.content-section#contact .box-content p {
    margin-bottom: 0;
    min-height: 3rem;
}

/* Make sure icons look good */
.content-section#contact .box-icon img {
    width: 24px;
    height: 24px;
}


.margin-top{
    margin-top: 30px;
}

.home-bold{
    background: linear-gradient(180deg, #c4f7ff 1.36%, #71e0ff 41.68%, #5ee3f1 70.79%, #63c8e7 118.75%);
    background: linear-gradient(180deg, #c4f7ff 1.36%, #8bd0e3 41.68%, #71ccd7 70.79%, #63acc2 118.75%);
    background: linear-gradient(177deg, #50CAEB 14.79%, #424242 35.31%,#1c1c1c 42.31%, #313131 50.31%, #50CAEB 100.15%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    isolation: isolate;
    
}


.inactive-btn {
    
    background: #e8e8e8;
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
    
}

a.inactive-btn  {
    
    color: #888;
    cursor: not-allowed;
}

a.inactive-btn:hover {
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Case Study Cards Mobile Fix */
@media (max-width: 840px) {
    .case-study-box {
        flex-direction: column;
        height: auto;
        align-items: center;
        padding: 2rem 1.5rem;
    }
    
    .case-study-box-left {
        width: 100%;
        align-items: flex-start; /* Keep header/text left-aligned */
        gap: 15px;
    }
    
    .case-study-box-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 0;
        margin-top: 2rem;
    }
    
    /* Center stats, button, and image on mobile */
    .stats-grid,
    .read-more-button {
        align-self: center;
    }

   .schedule-box.read-more-button{
        align-self: flex-start;

    }
    
    .read-more-button {
        width: 100%; /* Make button a bit wider on mobile */
    }
    
    .case-study-box-right img {
        width: 80%;
        max-width: 400px;
    }
    
    /* Fix tag wrapping */
    .case-study-tags {
        flex-wrap: wrap;
        gap: 10px; /* Reduce gap between tags */
    }
    
    .case-study-tag {
        white-space: nowrap; /* Prevent text wrapping inside tags */
        padding: 1.8px 10px; /* Slightly reduce padding */
        font-size: 12px; /* Slightly smaller text */
    }

    .case-study-box {
        flex-direction: column;
        height: auto;
        align-items: center;
        padding: 2rem 1.5rem;  /* Current - good! */
    }
    
    .case-study-box-left {
        width: 100%;
        gap: 1.5rem;  /* ADD: space between title/tags and stats */
    }
    
    .case-study-box-left-upper {
        margin-bottom: 1.5rem;  /* ADD: space before stats */
    }
    
    .stats-grid {
        margin-bottom: 1.5rem;  /* ADD: space before button */
    }
    
    .case-study-box-right {
        margin-top: 2rem;  /* Current - good! Separates image from content */
    }
}


/* ==========================================
   ABOUT ME SECTION - SKILLS
   ========================================== */

/* About Section Container */

/* .about-me-section-frame{
    background-color: #ffffff;
    background:  #ffffff;
} */


.about-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    
}

/* About Subsections */
.about-subsection {
    margin-top: 3rem;
}

.about-subsection-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2rem;
    text-align: left;
}

/* Skills Container */

/* ==========================================
   SKILLS TAGS
   ========================================== */

.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Skill Tags - Using Case Study Tag Style */
.skill-tag {
    display: flex;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    background: #ffffff;
    color: #525252;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.40);
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: default;
}

.skill-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Special styling for "+ More" tag */
.skill-tag.more-tag {
    background: linear-gradient(70deg, #00C9FF -10%, #266171 10%, #273b3d 60.79%, #000 75%, #273b3d 85%, #266171 95%);
    font-weight: 600;
    cursor: pointer;
}

.skill-tag.more-tag:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Tablet */
@media (max-width: 968px) {
    .about-section {
        padding: 3rem 1.5rem;
    }

    .about-subsection-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .skills-container {
        gap: 10px;
    }

    .skill-tag {
        padding: 7px 18px;
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .about-section {
        padding: 2rem 1rem;
    }

    .about-subsection {
        margin-top: 2rem;
    }

    .about-subsection-title {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .skills-container {
        justify-content: center;
        gap: 8px;
    }

    .skill-tag {
        padding: 6px 16px;
        font-size: 13px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .about-section {
        padding: 2rem 0.75rem;
    }

    .about-subsection-title {
        font-size: 1.3rem;
    }

    .skill-tag {
        padding: 5px 14px;
        font-size: 12px;
    }
}

/* ==========================================
   FAQ SECTION - ACCORDION STYLE
   ========================================== */


/* ==========================================
   FAQ SECTION - ACCORDION STYLE
   ========================================== */

.faq-section {
    padding: 4rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.faq-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-section .section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.faq-section .section-subtitle {
    font-size: 1.2rem;
    color: #666;
    font-weight: 400;
}

/* FAQ Container */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* FAQ Item */
.faq-item {
    background: white;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-item.active {
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* FAQ Question Button */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background: rgba(0, 201, 219, 0.03);
}

.faq-item.active .faq-question {
    background: rgba(0, 201, 219, 0.05);
}

.question-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    padding-right: 1rem;
}

/* FAQ Icon */
.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #666;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-item.active .faq-icon {
    background: #00c9db;
    color: white;
    transform: rotate(45deg);
}

.faq-icon svg {
    transition: transform 0.3s ease;
}

/* FAQ Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust based on your content */
}

.answer-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: #666;
    line-height: 1.7;
}

.answer-content p {
    margin: 0;
}

.answer-content strong {
    color: #333;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 968px) {
    .faq-section {
        padding: 3rem 1.5rem;
    }

    .faq-section .section-title {
        font-size: 2rem;
    }

    .faq-section .section-subtitle {
        font-size: 1.1rem;
    }

    .question-text {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .faq-section {
        padding: 2rem 1rem;
    }

    .faq-section .section-title {
        font-size: 1.8rem;
    }

    .faq-question {
        padding: 1.25rem 1rem;
    }

    .question-text {
        font-size: 0.95rem;
    }

    .answer-content {
        padding: 0 1rem 1.25rem 1rem;
        font-size: 0.95rem;
    }

    .faq-icon {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding: 2rem 0.75rem;
    }

    .faq-section .section-title {
        font-size: 1.5rem;
    }

    .faq-question {
        padding: 1rem 0.75rem;
    }

    .question-text {
        font-size: 0.9rem;
    }

    .answer-content {
        padding: 0 0.75rem 1rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* ===================================
   OUTER FRAME WRAPPERS
   Full-width section containers
   =================================== */

.content-section-frame-projects,
.contact-section-frame,
.about-me-section-frame,
.faq-section-frame {
    padding: 6rem 0; /* Vertical spacing between sections */
    width: 100%;
}

/* Mobile: Reduce vertical spacing */
@media (max-width: 768px) {
    .content-section-frame-projects,
    .contact-section-frame,
    .about-me-section-frame,
    .faq-section-frame {
        padding: 4rem 0;
    }
}
/* Fix for contact button text overflow */
.contact-btn-fix {
    min-width: fit-content;
    
   
    white-space: nowrap;
}

/* Responsive adjustments for contact buttons */
@media (max-width: 768px) {
    .contact-btn-fix {
        
        padding: 0.875rem 1.25rem ;
        min-width: fit-content;
    }
}

@media (max-width: 480px) {
    .contact-btn-fix {
        font-size: 13px;
        padding: 0.75rem 1rem ;
        width: 100% ;
        max-width: 280px;
    }
}

/* Fix excessive spacing around hero image on mobile */
@media (max-width: 640px) {
    .home-hero-center-image {
        height: auto ;
        min-height: unset ;
        max-height: 60vh;
        width: 85vw ;
    }
    
    .home-hero-center-image img {
        max-height: 60vh;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .home-hero-center-image {
        width: 90vw ;
        max-height: 55vh;
    }
    
    .home-hero-center-image img {
        max-height: 55vh;
    }
}

/* Add proper spacing between stats and image on mobile */
@media (max-width: 1024px) {
    .home-hero-stats-image-container {
        gap: 2.5rem;
    }
}

@media (max-width: 864px) {
    .home-hero-stats-image-container {
        gap: 3rem;
    }
    
    .home-hero-stats-left,
    .home-hero-stats-right {
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .home-hero-stats-image-container {
        gap: 3.5rem;
    }
}

.dropdown-menu .lang-btn-menu,
.lang-btn-mobile{
    border-bottom: 3px solid transparent;
    margin-top: 2px;
}

.dropdown-menu .lang-btn-menu:hover,
.lang-btn-mobile:hover {
    color: #ffffff;
    transform: translateY(-2px);
    background: #f0fdff;
    border-bottom-color: #00c9db;
    color: #000000;
    
}
.dropdown-menu .lang-btn-menu.active:hover,
.lang-btn-mobile.active:hover{
    transform: translateY(0px);
    border-bottom: 0px solid transparent;
    background: transparent;
}

/* ==========================================
   LANGUAGE VISIBILITY SYSTEM
   ========================================== */

/* Default: Block-level display (for most elements) */
body .lang-en {
    display: block;
}

body .lang-fr {
    display: none;
}

/* When French is active: Hide English, Show French */
html.lang-fr body .lang-en {
    display: none;
}

html.lang-fr body .lang-fr {
    display: block;
}

/* For inline elements (spans inside links, table cells, etc.) */
body .lang-en.inline,
body span.lang-en {
    display: inline;
}

body .lang-fr.inline,
body span.lang-fr {
    display: none;
}

html.lang-fr body .lang-en.inline,
html.lang-fr body span.lang-en {
    display: none;
}

html.lang-fr body .lang-fr.inline,
html.lang-fr body span.lang-fr {
    display: inline;
}

body .lang-en.inline {
    display: inline;
}

body .lang-fr.inline {
    display: none;
}

html.lang-fr body .lang-en.inline {
    display: none;
}

html.lang-fr body .lang-fr.inline {
    display: inline;
}


.contact-btn-fix{
    padding: .7rem 1.2rem;
}