/* CSS Variables based on Brand Guidelines */
:root {
   /* Base Grid Unit */
    --base-grid-unit-mobile: 4pt;
    --base-grid-unit-tablet: 8pt;
    --base-grid-unit-desktop: 12pt;

    /* Container Padding */
    --container-padding-mobile: 16pt;
    --container-padding-desktop: 24pt;

    /* Card & Section Spacing */
    --card-section-spacing-mobile: 8pt;
    --card-section-spacing-desktop: 16pt;

    /* Button Spacing */
    --button-height: 48pt;
    --button-min-tappable-area: 44pt;
    --button-spacing: 8pt;
    --button-padding-horizontal: 16pt;
    --button-padding-vertical: 12pt;

    /* Typography - Mobile */
    --font-size-title-mobile: 24px;
    --font-size-subheading-mobile: 18px;
    --font-size-subtitle2-mobile: 20px;
    --font-size-subtitle4-mobile: 32px;
    --font-size-normal: 16px; /* Universal normal text size */
    --font-size-small-mobile: 8px;
    --font-size-cta-mobile: 14px;

    /* Typography - Desktop */
    --font-size-title-desktop: 36px;
    --font-size-subheading-desktop: 24px;
    --font-size-subtitle4-desktop: 58px;
    --font-size-subtitle2-desktop: 20px;
    --font-size-small-desktop: 10px;
    --font-size-cta-desktop: 14px;
   }

   .theme-0-dark  {
       /* Color Variables - Dark Mode (default) */
    --bg-color: #2F0A61;
    --bg-color-tba: #2a134b;
    --text-color: #F7EFFF;
    --card-bg: #38116b;
    --card-border: #F7EFFF;
    --button-bg: #6C3BAA; 
    --button-text-color: #F7EFFF; 
    --button-hover-color: #38116b;
    --button-border: #F7EFFF;
    --link-color: #F7EFFF;
    --link-hover-color: #F7EFFF;
    --card-border: #F7EFFF;
    --shadow-color: rgba(206, 184, 227, 0.1);
    --border-color: #F7EFFF; 
    --background-color-highlight: rgba(47, 10, 97, 0.5); /* 50% */
    --color-surface-raised: #6C3BAA; 
    --hl-bg-link: #38116b;
    
    --color-accent-1: #6C3BAA;   
    --color-accent-2: #A379D9;  
    --color-accent-3: #f0e2ff;
    --main-card-border: #F7EFFF;
    --main--card-border: #F7EFFF;
 

     --icon-colors-version-one: #EFFFEF;
    --icon-colors-version-two: #EFFFEF;

    --faq-icon-color: #A379D9; 
 
    --hl-color-sectionid:#6C3BAA;
   /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #175443;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #064A75;     /* Light blue */
  --text-highlight-arguments-blog-1: #574200;    /* Warm yellow */
  --text-highlight-dates-blog-1: #7f2f4e;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #940000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #424242;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #75003B;    /* Lively pink */
  --text-highlight-risk-blog-2: #703c00;         /* Strong red */
  --text-highlight-medical-blog-2: #1B3E55;      /* Soft blue */
  --text-highlight-health-blog-2: #0B4B0B;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #611D72;         /* Vivid purple */
  --text-highlight-myths-blog-2: #454545;        /* Lighter gray */
  --text-highlight-cases-blog-2: #574200;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #064A75;        /* Soft blue */
  --text-highlight-people-blog-3: #175443;       /* Light green */
  --text-highlight-bestpractices-blog-3: #703c00;/* Soft yellow */
  --text-highlight-innovation-blog-3: #574200;   /* Orange pop */
  --text-highlight-limitations-blog-3: #424242;  /* Light gray */
  --text-highlight-philosophy-blog-3: #5e265e;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #940000;      /* Strong red */
  --text-highlight-calm-blog-4: #1B3E55;         /* Calm blue */
  --text-highlight-artists-blog-4: #0B4B0B;      /* Soft green */
  --text-highlight-creativity-blog-4: #611D72;   /* Vivid purple */
  --text-highlight-joy-blog-4: #344646;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #574200; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #850042;    /* Warm pink */
    }

/* Color Variables - Light Mode */
.theme-0-light  {
    --bg-color: #F7EFFF;
    --bg-color-tba: #e0d5eb;
    --text-color: #2F0A61;
    --card-bg: #f2e5ff;
    --card-border: #2F0A61;
    --button-bg: #6C3BAA;
    --button-text-color: #F7EFFF; 
    --button-hover-color: #2F0A61;
    --button-border: #2F0A61;
    --link-color: #38116b;
    --link-hover-color: #5c00b3;
    --card-border: #6C3BAA;
    --shadow-color: rgba(13, 0, 25, 0.1);
    --border-color: #2F0A61;
    --background-color-highlight: rgba(247, 239, 255, 0.5); /* 50% */
    --color-surface-raised: #6C3BAA;
    --hl-bg-link: #6C3BAA;

    --main--card-border: #2F0A61;
    --main-card-border: #2F0A61;
    --map-p-bg: #2a134b; 
    --map-line: #856fa1;  

    --icon-colors-version-one: #2F0A61;
    --icon-colors-version-two: #EFFFEF;

    --hl-color-sectionid:#6C3BAA;

    --faq-icon-color: #F7EFFF;
      /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #90DFB2;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #85C2FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFE657;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #DDD3F3;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F8A5B4;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D4D4D4;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #FFA3D1;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #F3B9B9;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #AEC9E0;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #90DFB2;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D0A9F4;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D4D4D4;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFE657;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #85C2FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #90DFB2;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFE657;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #FFC37A;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D4D4D4;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D0A9F4;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F8ABBA;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #AEC9E0;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #90DFB2;      /* Green → communities */
  --text-highlight-creativity-blog-4: #D0A9F4;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFE657;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #FFC37A; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #b9f6f8;    /* Pink → sentimental */
}

.theme-1-dark {
    /* Color Variables - Dark Mode (default) */
    --bg-color: #021502;
    --bg-color-tba: #020F02;
    --text-color: #EFFFEF;
    --card-bg: #041f04;
    --card-border: #EFFFEF;
    --button-bg: #3BAA78; 
    --button-text-color: #000000; 
    --button-hover-color: #49ac7f;
    --button-border: #EFFFEF;
    --link-color: #77CFA8;
    --link-hover-color: #EFFFEF;
     --shadow-color: rgba(206, 184, 227, 0.1);
    --border-color: #EFFFEF; 
    --background-color-highlight: rgba(12, 36, 2, 0.6); /* 50% */
    --color-surface-raised: #021502; 
   
    --hl-bg-link: #EFFFEF;

    --main-card-border: #EFFFEF;
  --main--card-border: #EFFFEF ;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
  
    --icon-colors-version-one: #EFFFEF;
    --icon-colors-version-two: #EFFFEF;
    --map-p-bg: #021502; 

    --hl-color-sectionid:#3BAA78; 

    --faq-icon-color: #EFFFEF;
       /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #11503b;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #064A74;     /* Light blue */
  --text-highlight-arguments-blog-1: #574500;    /* Warm yellow */
  --text-highlight-dates-blog-1: #512f8d;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #850000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #3b0b5c;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #8F0047;    /* Lively pink */
  --text-highlight-risk-blog-2: #990000;         /* Strong red */
  --text-highlight-medical-blog-2: #064A74;      /* Soft blue */
  --text-highlight-health-blog-2: #11503b;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #512f8d;         /* Vivid purple */
  --text-highlight-myths-blog-2: #574500;        /* Lighter gray */
  --text-highlight-cases-blog-2: #64264FED;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #064A74;        /* Soft blue */
  --text-highlight-people-blog-3: #11503b;       /* Light green */
  --text-highlight-bestpractices-blog-3: #574500;/* Soft yellow */
  --text-highlight-innovation-blog-3: #086600;   /* Orange pop */
  --text-highlight-limitations-blog-3: #474747;  /* Light gray */
  --text-highlight-philosophy-blog-3: #5B345B;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #6B0000;      /* Strong red */
  --text-highlight-calm-blog-4: #064A74;         /* Calm blue */
  --text-highlight-artists-blog-4: #11503b;      /* Soft green */
  --text-highlight-creativity-blog-4: #512f8d;   /* Vivid purple */
  --text-highlight-joy-blog-4: #574500;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #474747; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #5B345B;    /* Warm pink */
   }

/* Color Variables - Light Mode */
.theme-1-light {

    --bg-color: #EFFFEF;
    --bg-color-tba: #d5ebe1;
    --text-color: #021502;
    --card-bg: #e1fdec;
    --card-border: #1b1f1b; 
   --button-bg: #3BAA78; 
    --button-text-color: #000000; 
    --button-hover-color: #34aa75;
    --button-border: #020F02;
    --link-color: #184933;
    --link-hover-color: #34aa75;
    --link-hover-color-active: #082407; 
    --button-text-hover-active: #06250e;
 
    --hl-bg-link: #EFFFEF;

    --shadow-color: rgba(4, 51, 12, 0.377);
    --border-color: #021502;
    --background-color-highlight: rgba(239, 255, 242, 0.6); /* 50% */
    --color-surface-raised: #EFFFEF;

    --main-card-border: #021502;
  --main--card-border: #021502;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
    
    --icon-colors-version-one: #0D2D33;
    --icon-colors-version-two: #EFFFEF;
    --map-p-bg: #021502; 

    --hl-color-sectionid:#3BAA78; 

    --faq-icon-color: #EFFFEF;

          /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #79D2A0;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #70B8FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFE96B;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #C2AEEA;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #DEDEDE;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #f892b9;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #FFA3D1;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #E99090;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #B3CEDF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #9FDFBB;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D7B7F6;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #DEDEDE;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFBF70;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #A3D1FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #9FDFBB;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFBF70;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #E99090;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #DEDEDE;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D7B7F6;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #E99090;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #A3D1FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #9FDFBB;      /* Green → communities */
  --text-highlight-creativity-blog-4: #D7B7F6;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFBF70;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #FFA3D1; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #DEDEDE;    /* Pink → sentimental */
}


.theme-2-dark {
    /* Color Variables - Dark Mode (default) */
 --bg-color: #150212;
  --bg-color-tba: #020F02;
  --text-color: #ffefef;
  --card-bg: #260015;
  --card-border: #ffefef;
  --button-bg: #c52929;
  --button-text-color: #ffefef;
  --button-hover-color: #8d0808;
  --button-border: #ffefef;
  --link-color: #F68489;
  --link-hover-color: #d80f0f;
  --shadow-color: rgba(219, 227, 184, 0.1);
  --border-color: #ffefef;
  --background-color-highlight: rgba(36, 2, 2, 0.6);
  --color-surface-raised: #021502;
  --main-card-border: #ffefef;
  --main--card-border: #ffefef;
  --link-hover-color-active: #ffefef;
  --button-text-hover-active: #ffefef;
  --icon-colors-version-one: #ffefef;
  --icon-colors-version-two: #ffefef;
  --map-p-bg: #150212; 

  --hl-color-sectionid:#c52929;

  --faq-icon-color: #ffefef;
     /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #154C3D;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #033553;     /* Light blue */
  --text-highlight-arguments-blog-1: #574500;    /* Warm yellow */
  --text-highlight-dates-blog-1: #442A6F;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #850000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #474747;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #850042;    /* Lively pink */
  --text-highlight-risk-blog-2: #643f14;         /* Strong red */
  --text-highlight-medical-blog-2: #1D3E54;      /* Soft blue */
  --text-highlight-health-blog-2: #0B410B;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #4F1759;         /* Vivid purple */
  --text-highlight-myths-blog-2: #333333;        /* Lighter gray */
  --text-highlight-cases-blog-2: #04205e;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #18384E;        /* Soft blue */
  --text-highlight-people-blog-3: #094909;       /* Light green */
  --text-highlight-bestpractices-blog-3: #4D3D00;/* Soft yellow */
  --text-highlight-innovation-blog-3: #333333;   /* Orange pop */
  --text-highlight-limitations-blog-3: #171149;  /* Light gray */
  --text-highlight-philosophy-blog-3: #850042;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #850042;      /* Strong red */
  --text-highlight-calm-blog-4: #18384E;         /* Calm blue */
  --text-highlight-artists-blog-4: #094909;      /* Soft green */
  --text-highlight-creativity-blog-4: #4F1759;   /* Vivid purple */
  --text-highlight-joy-blog-4: #4D3D00;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #333333; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #000980;    /* Warm pink */
   }

/* Color Variables - Light Mode */
.theme-2-light {

    --bg-color: #ffefef;
    --bg-color-tba: #ffefef;
    --text-color: #150212;
    --card-bg: #ffe3e3;
    --card-border: #021502; 
   --button-bg: #c52929; 
    --button-text-color: #ffefef; 
    --button-hover-color: #8d0808;
    --button-border: #150212;
    --link-color: #6E1717;
    --link-hover-color: #d80f0f;
    --link-hover-color-active: #472828; 
    --button-text-hover-active: #532b2b;
 
    --shadow-color: rgba(51, 4, 4, 0.377);
    --border-color: #150202;
    --background-color-highlight: rgba(255, 239, 239, 0.6); /* 50% */
    --color-surface-raised: #ffefef;

    --main-card-border: #150212;
  --main--card-border:#150212;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
    
    --icon-colors-version-one: #330d0d;
    --icon-colors-version-two: #ffefef;
 --map-p-bg: #150212; 

 --hl-color-sectionid:#c52929;

--faq-icon-color: #ffefef;
       /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #A9E5C4;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #8AC4FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFED8A;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #CBBAED;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F9B8C4;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D4D4D4;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #fc91c6;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #a1fafd;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #8AC4FF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #A9E5C4;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #CBBAED;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D4D4D4;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFED8A;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #8AC4FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #a1fafd;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFED8A;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #F9B8C4;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D4D4D4;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #CBBAED;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F9B8C4;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #8AC4FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #a1fafd;      /* Green → communities */
  --text-highlight-creativity-blog-4: #CBBAED;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFED8A;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #ffbd6c; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #fc91c6;    /* Pink → sentimental */
}


.theme-3-dark {
       /* Color Variables - Dark Mode for Teckie*/
 --bg-color: #020a15;
  --bg-color-tba: #02060f;
  --text-color: #eff5ff;
  --card-bg: #01142a;
  --card-border: #eff2ff;
  --button-bg: #1F5898;
  --button-text-color: #FFFFFF;
  --button-hover-color: #1F5898;
  --button-border: #eff5ff;
  --link-color: #75b4fc;
  --link-hover-color: #9cc7ff;
  --shadow-color: rgba(185, 184, 227, 0.1);
  --border-color: #eff5ff;
  --background-color-highlight: rgba(2, 7, 36, 0.6);
  --color-surface-raised: #020315;
  --main-card-border: #eff5ff;
  --main--card-border: #eff5ff;
  --link-hover-color-active: #eff5ff;
  --button-text-hover-active: #eff5ff;
  --icon-colors-version-one: #eff5ff;
  --icon-colors-version-two: #eff5ff;
  --map-p-bg: #020a15; 

  --hl-color-sectionid:#1F5898;

  --faq-icon-color: #eff5ff;

     /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #154132;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #073B5A;     /* Light blue */
  --text-highlight-arguments-blog-1: #3D3100;    /* Warm yellow */
  --text-highlight-dates-blog-1: #40296B;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #8A0000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #333333;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #800040;    /* Lively pink */
  --text-highlight-risk-blog-2: #8A0000;         /* Strong red */
  --text-highlight-medical-blog-2: #073B5A;      /* Soft blue */
  --text-highlight-health-blog-2: #154132;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #40296B;         /* Vivid purple */
  --text-highlight-myths-blog-2: #333333;        /* Lighter gray */
  --text-highlight-cases-blog-2: #3D3100;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #073B5A;        /* Soft blue */
  --text-highlight-people-blog-3: #154132;       /* Light green */
  --text-highlight-bestpractices-blog-3: #8A0000;/* Soft yellow */
  --text-highlight-innovation-blog-3: #3D3100;   /* Orange pop */
  --text-highlight-limitations-blog-3: #333333;  /* Light gray */
  --text-highlight-philosophy-blog-3: #40296B;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #8A0000;      /* Strong red */
  --text-highlight-calm-blog-4: #073B5A;         /* Calm blue */
  --text-highlight-artists-blog-4: #154132;      /* Soft green */
  --text-highlight-creativity-blog-4: #40296B;   /* Vivid purple */
  --text-highlight-joy-blog-4: #3D3100;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #333333; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #8A0000;    /* Warm pink */
}
/* Color Variables - Light Mode for Teckie */
.theme-3-light {
    --bg-color: #eff5ff;
    --bg-color-tba: #eff5ff;
    --text-color: #020a15;
    --card-bg: #e7ecfd;
    --card-border: #020a15; 
   --button-bg: #1F5898; 
  --button-text-color: #FFFFFF;
  --button-hover-color: #75b4fc;
    --button-border: #020a15;
    --link-color: #093A72;
    --link-hover-color: #1876e0;
    --link-hover-color-active: #282d47; 
    --button-text-hover-active: #2c2b53;
 
    --shadow-color: rgba(4, 13, 51, 0.377);
    --border-color: #020a15;
    --background-color-highlight: rgba(239, 240, 255, 0.6); /* 50% */
    --color-surface-raised: #eff5ff;

    --main-card-border: #020a15;
  --main--card-border: #020a15;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
    
    --icon-colors-version-one: #0d1033;
    --icon-colors-version-two: #eff5ff;
    --map-p-bg: #020a15; 

    --hl-color-sectionid:#1F5898; 

    --faq-icon-color: #eff5ff;
          /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #79D2A0;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #94C9FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFE96B;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #D7CBF1;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F9C7D1;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D1D1D1;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #F9C7D1;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #e3b9f3;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #94C9FF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #79D2A0;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D7CBF1;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D1D1D1;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFE96B;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #94C9FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #79D2A0;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFE96B;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #FFBF70;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D1D1D1;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D7CBF1;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F9C7D1;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #94C9FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #79D2A0;      /* Green → communities */
  --text-highlight-creativity-blog-4: #e3b9f3;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFE96B;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #FFBF70; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #fd9fd6;    /* Pink → sentimental */
}

.theme-4-dark {
       /* Color Variables - Dark Mode for Teckie*/
 --bg-color: #0a0900;
  --bg-color-tba: #110f00;
  --text-color: #fcf3cf;
  --card-bg: #120b00;
  --card-border: #fcf3cf;
  --button-bg: #ffd000; /* main color */
  --button-text-color: #0a0900;
  --button-hover-color: #0a0900;
  --button-border: #fcf3cf;
  --link-color: #ffd000;
  --link-hover-color: #e4c22d;
  --shadow-color: rgba(185, 184, 227, 0.1);
  --border-color: #fcf3cf;
  --background-color-highlight: rgba(34, 36, 2, 0.6);
  --color-surface-raised: #020315;
  --main-card-border: #fcf3cf;
  --main--card-border: #fcf3cf;
  --link-hover-color-active: #fcf3cf;
  --button-text-hover-active: #fcf3cf;
  --icon-colors-version-one: #fcf3cf;
  --icon-colors-version-two: #fcf3cf;

  --hl-color-sectionid:#ffd000;

  --faq-icon-color: #fcf3cf;

     /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #143E2F;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #063A5B;     /* Light blue */
  --text-highlight-arguments-blog-1: #382D00;    /* Warm yellow */
  --text-highlight-dates-blog-1: #42286C;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #570000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #333333;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #660033;    /* Lively pink */
  --text-highlight-risk-blog-2: #570000;         /* Strong red */
  --text-highlight-medical-blog-2: #063A5B;      /* Soft blue */
  --text-highlight-health-blog-2: #143E2F;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #42286C;         /* Vivid purple */
  --text-highlight-myths-blog-2: #333333;        /* Lighter gray */
  --text-highlight-cases-blog-2: #382D00;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #063A5B;        /* Soft blue */
  --text-highlight-people-blog-3: #143E2F;       /* Light green */
  --text-highlight-bestpractices-blog-3: #333333;/* Soft yellow */
  --text-highlight-innovation-blog-3: #382D00;   /* Orange pop */
  --text-highlight-limitations-blog-3: #570000;  /* Light gray */
  --text-highlight-philosophy-blog-3: #660033;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #570000;      /* Strong red */
  --text-highlight-calm-blog-4: #063A5B;         /* Calm blue */
  --text-highlight-artists-blog-4: #143E2F;      /* Soft green */
  --text-highlight-creativity-blog-4: #42286C;   /* Vivid purple */
  --text-highlight-joy-blog-4: #333333;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #382D00; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #660033;    /* Warm pink */
 }
/* Color Variables - Light Mode for Teckie */
.theme-4-light {
    --bg-color: #fcf3cf;
    --bg-color-tba: #eff5ff;
    --text-color: #0a0900;
    --card-bg: #fff3c4;
    --card-border: #0a0900; 
   --button-bg: #ffd000; 
  --button-text-color: #0a0900;
  --button-hover-color: #0a0900;
    --button-border: #0a0900;
    --link-color: #312d03;
    --link-hover-color: #5a5301;
    --link-hover-color-active: #5a5301; 
    --button-text-hover-active: #312d03;
 
    --shadow-color: rgba(50, 51, 4, 0.377);
    --border-color: #0a0900;
    --background-color-highlight: rgba(255, 255, 239, 0.6); /* 50% */
    --color-surface-raised: #fcf3cf;

    --main-card-border: #0a0900;
  --main--card-border: #0a0900;
    --link-hover-color-active:  #0a0900;
    --button-text-hover-active: #0a0900;
    
    --icon-colors-version-one: #0d1033;
    --icon-colors-version-two: #fcf3cf;
    --map-p-bg: #0a0900; 
    
     --hl-color-sectionid:#ffd000;

    --faq-icon-color: #fcf3cf;

          /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #C4EED5;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #A8D4FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFDE24;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #D1C2EF;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F6ACBB;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D1D1D1;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #F6ACBB;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #ffd4a2;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #A8D4FF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #C4EED5;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D1C2EF;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D1D1D1;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFDE24;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #A8D4FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #C4EED5;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFDE24;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #F6ACBB;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D1D1D1;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D1C2EF;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F6ACBB;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #A8D4FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #C4EED5;      /* Green → communities */
  --text-highlight-creativity-blog-4: #D1C2EF;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFDE24;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #d1d8d8; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #ff69b4;    /* Pink → sentimental */
}


/* Base Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

sup a {
  background-color: var(--button-bg);
  color: var(--button-text-color);
  padding-left: 4px;
  padding-right: 4px;
}

/* Leaves space so the navbar can interact well while the action is executed */
section[id] {
  scroll-margin-top: 76px; /* This value is the offset */
}

body {
    font-family: 'karla';
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 2;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 400;
    overflow-wrap: break-word;
}     

ol {
  padding-left: 1.6rem;
}
/* Hero Section */
.hero-section {
    height: 100vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* This moves the content to the bottom */
    align-items: center;
    color: white;
    text-align: center;
    overflow: hidden;
    padding-bottom: 10vh; /* This adds some space from the bottom edge */
    box-sizing: border-box; /* This ensures padding doesn't add to the height */
}

/* Hero Carousel Styling */
.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind the content */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Cover the entire area without distortion */
}

/* Hero Content Styling */
.hero-content {
    position: relative; 
    z-index: 2; /* In front of the carousel */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 3rem;
    border-radius: 12px;
 }

.hero-content h4 {
    font-size: var(--font-size-subtitle4-mobile); 
    margin: 4px 20px;
    padding: 12;
    background-color: var(--background-color-highlight);
    border-radius: 24px;
    color: var(--text-color);

}
    
    

.hero-cta {
    font-size: 24px;
    padding: 16px 32px;
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--button-border);
    border-radius: 24px; /* Add this line */
    text-decoration: none;
 }

.hero-cta:hover {
    background-color: var(--button-hover-color); 
    color: var(--button-bg); 
}

.scroll-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 2);
}

.scroll-prompt p {
    margin: 0;
    font-size: 16px;
}

.scroll-down-arrow {
    font-size: 36px;
    animation: bounce 2s infinite;
    cursor: pointer;
    transition: transform 0.6s ease-in-out;
}

.scroll-down-arrow:hover {
    transform: scale(1.1);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
/* Navigation Bar */
.navbar {
    background-color: var(--bg-color);
    padding: calc(2 * var(--base-grid-unit-mobile)) var(--container-padding-mobile);
    text-align: center; 
    border-bottom: 1px solid var(--card-border);
     position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.1s;
}

.navbar ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.navbar li { margin: 0 var(--button-spacing); }
.navbar a {
    color: var(--text-color); text-decoration: none; font-size: var(--font-size-normal);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal); display: block;
    border-radius: 24px; transition: background-color 0.3s ease, color 0.3s ease;
    height: calc(var(--button-height) - (2 * var(--button-padding-vertical)));
    display: flex; align-items: center; justify-content: center; 
}
.navbar a:hover, .navbar a.active { background-color: var(--button-bg); color:var(--button-text-color);     border: 1px solid var(--main--card-border) }
.light-mode .navbar a:hover, .light-mode .navbar a.active { background-color: transparent; border: 1px solid var(--card-border); color: var(--button-text-hover-active); }

/* Hamburger Menu for Mobile */
.hamburger-icon { cursor: pointer; padding: calc(2 * var(--base-grid-unit-mobile)); display: none; }
.hamburger-icon span { display: block; width: 30px; height: 3px; background-color: var(--text-color); margin: 6px 0; transition: all 0.3s ease, background-color 0.3s; }

.side-menu {
    position: fixed; top: 0; left: -100%; width: 50%; max-width: 400px; min-width: 200px; height: 100%;
    background-color: var(--bg-color); padding-top: 60px; transition: left 0.3s ease, background-color 0.3s;
    z-index: 7050; box-shadow: 2px 0 5px var(--shadow-color); display: flex; flex-direction: column; align-items: flex-start; border-right: solid 1px;
    background-color: var(--card-bg);
}
.side-menu.active { left: 0;  }
.side-menu ul { list-style: none; padding: 0; margin: 0; width: 100%; }
.side-menu li { width: 100%; margin-bottom: var(--button-spacing); }
.side-menu a { width: 100%; box-sizing: border-box; justify-content: flex-start; padding-left: var(--container-padding-mobile); }
.side-menu .theme-toggle-container { margin-top: auto; margin-bottom: 20px; padding-left: var(--container-padding-mobile); }


/* Theme Toggle */
.theme-toggle-container { margin-left: auto; align-self: center; }
.theme-toggle { cursor: pointer; width: 44px; height: 22px; background-color: #eff2ff; border-radius: 22px; position: relative; transition: background-color 0.3s; }
.theme-toggle:before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background-color: #2584f0 ; border-radius: 50%; transition: transform 0.3s; }
.light-mode .theme-toggle { background-color: #020a15; }
.light-mode .theme-toggle:before { transform: translateX(22px); background-color:#eff2ff; }

/* Main Content Container */
.main-content {
    max-width: 1512px;  
    margin: 80pt auto;  
    padding: 0 var(--container-padding-desktop);
    box-sizing: border-box;
} 



/* Typography */
h1 { font-size: var(--font-size-title-mobile); margin-bottom: calc(2 * var(--base-grid-unit-mobile)) ; font-weight: 700; }
h2 { font-size: var(--font-size-subheading-mobile); margin-top: 24pt; margin-bottom: 16pt; font-weight:400; }
h3 { font-size: var(--font-size-subtitle2-mobile);   margin-top: 0; font-weight:700; }
p, ul, li { font-size: var(--font-size-normal); margin-bottom: var(--base-grid-unit-mobile); font-weight:400;} 
ul { padding-left: calc(4 * var(--base-grid-unit-mobile)); list-style-type: disc; }
li { margin-bottom: calc(2 * var(--base-grid-unit-mobile)); }
.small-text { font-size: var(--font-size-small-mobile); color: var(--text-color); }
.section-subtitle { font-size: 18px; max-width: 600px; margin: 0 auto 40pt auto; }

/* General Hyperlink Styling */
a { color: var(--link-color); text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; text-decoration: underline; }
a:hover { color: var(--link-hover-color); text-decoration: underline; font-weight: bold;}

/* CTA Button & Animation */
.cta-button {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--button-bg); color: var(--button-text-color);
    border: 1px solid var(--button-border); padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border-radius: 24px; text-decoration: none; font-size: var(--font-size-cta-mobile);
    margin-top: 12px; height: var(--button-height);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s ease-out;
}
.cta-button.dissolve { opacity: 0.5; }
.cta-button:hover { background-color: var(--button-hover-color);
  color: var(--button-text-color); }
.cta-buttons-container { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-button.secondary { background-color: var(--text-color); color: var(--bg-color); border-color: var(--text-color); }
.cta-button.secondary:hover { background-color: transparent; color: var(--text-color); border-color: var(--text-color); }


/* Utility Classes */
.text-center { text-align: center; }
section { margin-bottom: 44pt; }

 
/* Container */
.container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 24px;
    padding-left: 24px;
}

/* Images inside cards instead of icons */
.image2 {
    width: 100%;
    height: 50%;
    display: block;
    border-radius: 8px;
    align-items: center;
}

.image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    align-items: center;
}

.imagechart {
    width: 50%;
    min-width: 270px;
    height: auto;
     border-radius: 8px;
    align-items: center;
    margin: 8pt auto;        /* centers the line horizontally */
  display: block;   
}

.recomimagechart {
    width: 50%;
    min-width: 270px;
    height: auto;
     border-radius: 50%;
    align-items: center;
    margin: 8pt auto;        /* centers the line horizontally */
  display: block;   
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
} 

.blogimagechart {
    width: 40%;
    min-width: 260px;
    height: auto;
    max-height: 256px;
     border-radius: 25%;
    align-items: center;
    margin: 8pt auto;        /* centers the line horizontally */
  display: block;   
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  padding: 4px;
} 

/* Features Section */
.card {
    padding: 0px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 350px));
    gap: 16px;
 
}

.card-content {
    background-color: var(--card-bg);
    border-radius: 16px;  
    padding: 2rem;
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    display: flex;             /* 1. Turns the container into a flexbox */
    flex-direction: column;    /* 2. Stacks items vertically */
    align-items: left;

    position: relative; /* This is essential for the pseudo-elements */
    overflow: hidden;
    border: 1px solid var(--main--card-border);
    gap: 0.75rem;
}

.card-content h1,
.card-content h2,
.card-content h3,
.card-content h4,
.card-content h5,
.card-content h6,
.card-content p,
.card-content small {
  margin: 0;
  padding: 0;
}

.card-content:hover {
    transform: translatex(4px);
    
 }
 
.card-icon {
    padding-bottom: 20px;
    width: 64px;
    height: 64px;

    /* This sets the COLOR for all icons from your theme variables */
    background-color: var(--color-icons);

    /* General mask settings */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    transition: background-color 0.3s ease;
}

.card-icon svg {
    width: 32px; /* Large Icon Size */
    height: 32px;
}

.card-title {
    font-size: 24px;
    margin-bottom: 0px;
}

.card-description {
    font-size: 16px;
    max-width: 100%; /* Override default p max-width */
    margin: 0px;
    padding:0px;
}

 .card h3 { padding-top: 1rem; }
 
.card a {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 2px;
}

 
/*

Certificates Cards

*/

.C-card-content {
    background-color: var(--card-bg);
    border-radius: 16px;  
    padding: 2rem;
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    display: flex;             /* 1. Turns the container into a flexbox */
    flex-direction: column;    /* 2. Stacks items vertically */
    align-items: left;

    position: relative; /* This is essential for the pseudo-elements */
    overflow: hidden;
    border: 1px solid var(--main--card-border);
    gap: 0.75rem;
}

.C-card-content h1,
.C-card-content h2,
.C-card-content h3,
.C-card-content h4,

.C-card-content h6,
.C-card-content p,
.C-card-content small {
  margin: 0;
  padding: 0;
}

.C-card-content h5 
{
  font-size: 1rem;
}
.C-card-content:hover {
    transform: translatex(4px);
    
 }
  
.C-card a {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 2px;
}


.vw50 {
  max-width: 50vw;
  max-height: 50vw;
  background-color: var(--button-bg);
  height: 100%;
  width: 100%;
  border-radius: 16px;
}
.padded-text-half {
  padding-top: 50vw; /* Applies 20px padding to all four sides */
 
}


/* Padding for text */
.padded-text {
  padding-top: 1rem; /* Applies 20px padding to all four sides */
  margin: 0px;
}

.padded-textbt {
  padding-bottom: 30px; /* Applies 20px padding to all four sides */
  margin: 0px;
}

/* Padding button text */
.padded-tebtn {
  padding-left: 1rem; /* Applies 20px padding to all four sides */
  padding-right: 1rem;
  margin: 0px;
}

/*2 x 2 Grid */
.tbt-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  justify-items: center;
  gap: 1rem;
  margin: 1rem auto;
  width: 100%;
  max-width: 1600px; /* Prevent cards from stretching too far */
}

/* Responsive grid for larger screens */
@media (min-width: 640px) {
  .tbt-card-grid {
    max-width: 90%;
    min-width: 240px;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .tbt-card-grid {
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
}

/*3 card Grid */
.ct-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  justify-items: center;
  gap: 1rem;
  margin: 40px auto;
  width: 100%;
  max-width: 1600px; /* Prevent cards from stretching too far */
}

/* Responsive grid for larger screens */
@media (min-width: 640px) {
  .ct-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .ct-card-grid {
    gap: 1rem; 
  }
} 


/* Main product card */
.main-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  justify-items: center;
  gap: 24px;
  margin: 40px auto;
  width: 100%;
  max-width: 1600px; /* Prevent cards from stretching too far */
}

/* Responsive grid for larger screens */
@media (min-width: 640px) {
  .main-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .main-card-grid {
    gap: 40px;
  }
}

/* Card container */
.m-card-content {

   background-color: var(--card-bg);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* fix invalid value “left” */
}

.m-card-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px var(--shadow-color);
}

/* Card icon */
.m-card-icon {
  padding-bottom: 20px;
  width: 64px;
  height: 64px;
  background-color: var(--color-icons);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  transition: background-color 0.3s ease;
}

/* Typography inside cards */
.m-card-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem); /* Scales smoothly */
  font-weight: 600;
  margin-bottom: 8px;
}

.m-card-description {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--text-color);
  max-width: 100%;
}
 

 

/* To be added product - product card */
.card {
    padding: 0px;
}

.tba-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.tba-card-content {
    background-color: var(--bg-color-tba);
    border-radius: 16px;  
    padding: 16px;  
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    display: flex;             /* 1. Turns the container into a flexbox */
    flex-direction: column;    /* 2. Stacks items vertically */
    align-items: center;
}
 
.tba-card-icon {
    padding-bottom: 20px;
    width: 64px;
    height: 64px;

    background-color: var(--color-icons);

    /* General mask settings */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    transition: background-color 0.3s ease;
}

.tba-ard-icon svg {
    width: 32px; /* Large Icon Size */
    height: 32px;
}

.tba-card-title {
    font-size: 24px;
    margin-bottom: 0px;
}

.tba-card-description {
    font-size: 16px;
    max-width: 100%; /* Override default p max-width */
}


/* line break*/
hr.styled-line {
    border: 0; 
    width: 100%;
    height: 0; 
    border-top: 1px solid var(--card-border); 
    margin: 20pt 0; 
}

/* line break in table*/
hr.styled-line-in {
    border: 0; 
    height: 0; 
    border-top: 1px solid var(--card-border); 
    margin: 8pt 0;
    width: 50%;
    align-items: center;  
}

/* line break in table*/
hr.styled-line-mid {
    border: 0; 
    height: 0; 
    border-top: 1px solid var(--card-border); 
    margin: 8pt auto;
    width: 50%;
    display: block; 

}

/* Founder & Members cards */
.fcard {
    padding: 0px;
}

.fcard-grid {
      max-width: 1760px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(425px, 1fr));
}

.fcard-content {
    background-color: transparent;
    border-radius: 16px;  
    padding: 2rem;
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    display: flex;             /* 1. Turns the container into a flexbox */
    flex-direction: column;    /* 2. Stacks items vertically */
    align-items: left;

    position: relative; /* This is essential for the pseudo-elements */
    overflow: hidden;
    gap: 0.75rem;
}

.fcard-content:hover {
    transform: translatex(1px);
    background-color: var(--card-background-color);
    
 }
 
.fcard-icon {
    border-radius: 50%;
    padding-bottom: 20px;
    width: 64px;
    height: 64px;

    /* This sets the COLOR for all icons from your theme variables */
    background-color: var(--color-icons);

    /* General mask settings */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    transition: background-color 0.3s ease;
}

.fcard-icon svg {
    border-radius: 50%;
    width: 32px; /* Large Icon Size */
    height: 32px;
}


.fcard-content h1,
.fcard-content h2,
.fcrd-content h4,
.fcard-content h5,
.fcard-content h6,
.fcard-content p {
  margin: 0; /* remove default margins */
  padding: 0; /* remove extra padding */
}


.fcard-content h3 {
  text-align: center;
  margin: 0;
  padding: 0;
}
 
.fcard a {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 2px;
}

/* This pseudo-element creates the primary gradient border. */
.fcard-content::before {
    content: "";
    position: absolute;
    inset: 0; 
    border-radius: inherit;
    z-index: -1;
    
    /* Using a conic gradient with your brand colors. */
    background: conic-gradient(from var(--angle), var(--button-bg), var(--text-color), var(--card-bg), var(--button-bg));
    
    /* The padding creates the visible "border" effect. */
    padding: 3px; 
    
    /* The animation rule */
    animation: animate 2s linear infinite;
    
    /* This makes the gradient visible around the card's content */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* This pseudo-element creates the blurred, glowing effect behind the border. */
.fcard-content::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -2;
    background: inherit;
    filter: blur(20px);
}


@property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@keyframes animate {
    to { 
        --angle: 360deg;
    }
}


/* --- Fix for Long Link Wrapping --- */
#Resources li,
#works-cited li {
  /* Allows long words (like URLs) to be broken and wrap to the next line */
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* A more aggressive option that can break words at any character */
  word-break: break-all;
}


/* Table */  
        .table-container {
             max-width: auto;
            overflow-x: auto;
            background-color: transparent;
            border-radius: 24px;
             border: 1px solid var(--border-color); 
            margin: 0 auto;
            font-size: 1rem;
            text-align: center; 
            
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            background-color: var(--card-bg);
        }
        
        caption {
            font-size: 1.25rem;
            font-weight: 500;
            padding: 1rem;
            caption-side: top;
            text-align: left;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
            background-color: var(--card-bg);
        }

        th, td {
            padding: 1rem 1rem;
            border-bottom: 1px solid var(--border-color);
            vertical-align: top;
            border-right: 1px solid var(--border-color);
        }

        th {
            background-color: var(--header-bg-color);
            font-weight: 500;
        }
        
        thead th {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        tbody tr:hover {
            background-color: var(--hover-bg-color);
        }

        tbody th[scope="row"] {
            font-weight: 500;
            background-color: transparent;
        }
        
        sup {
            font-size: 0.7em;
            vertical-align: super;
            margin-left: 2px;
            line-height: 1;
            opacity: 0.7;
        }

        .risk-cell {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 500;
        }

        .risk-very-high { color: var(--risk-very-high-color); }
        .risk-high { color: var(--risk-high-color); }
        .risk-low { color: var(--risk-low-color); }
 

        /* Table 2 */  
        .mtable-container {
            width: 100%;
            max-width: auto;
            overflow-x: auto;
            background-color: transparent;
            border-radius: 24px;
             border: 1px solid var(--border-color); 
            margin: 0 auto;
            font-size: 1rem;
            text-align: center;
            
       
        }

        mtable {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }
        
        caption {
            font-size: 1.25rem;
            font-weight: 500;
            padding: 1rem;
            caption-side: top;
            text-align: left;
            color: var(--text-color);
        }

        th, td {
            padding: 1rem 1rem;
            border-bottom: 1px solid var(--border-color);
            vertical-align: top;
            border-right: 1px solid var(--border-color);
        }

        th {
            background-color: var(--header-bg-color);
            font-weight: 500;
        }
        
        thead th {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        tbody tr:hover {
            background-color: var(--hover-bg-color);
        }

        tbody th[scope="row"] {
            font-weight: 500;
            background-color: transparent;
        }
        
        sup {
            font-size: 0.7em;
            vertical-align: super;
            margin-left: 2px;
            line-height: 1;
            opacity: 0.7;
        }

        .risk-cell {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 500;
        }


/* Collections Sections Styles */
.collection-card {
    background-color: var(--card-bg);
    border: 0px solid var(--card-border);
    border-radius: 12px;
    padding: 12px 12px; /* Outer padding for stroke */
    box-shadow: 0px 4px 4px var(--shadow-color);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, border-color 0.3s;
}

.collection-card-inner {
    padding: 4px; /* Inner padding */
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    gap: 12px; /* Gap between inner elements */
    height: 100%; /* Make inner content fill the card */
}

.collection-card-image {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Match service card image radius */
    margin-bottom: var(--text-image-distance);
}

.collection-card h3 {
    font-family: 'Karla';
    font-size: 24px;
    margin: 0;
}

.collection-card p {
    font-size: 16px;
    margin: 0;
    flex-grow: 1; /* Allow description to take up space */
}

.collection-card .price {
    font-size: 20px;
    font-weight: bold;
    margin-top: auto; /* Push price and button to bottom */
}

.collection-card .cta-button {
    font-size: 20px; /* Slightly smaller for product cards */
    width: fit-content;
}


/* Trigger Button Styling */
        .toc-trigger {
            position: fixed;
            top: 50%;
            left: 0px;
            transform: translateY(-50%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-left: none;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-right: 8px;
            padding-left: 4px;
            cursor: pointer;
            z-index: 1070;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .toc-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

        /* TOC Overlay Panel */
        .toc-overlay {
            /* Positioning & Sizing */
            position: fixed;
            top: 50%;
            left: 0;
            transform: translate(-100%, -50%); /* Start off-screen and vertically centered */
            width: 100%; /* Let max-width control the size */
            max-width: 240px; /* Mobile-first width */
            max-height: 572px;
            z-index: 7001;
            
            /* Appearance */
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 24px; /* Match site's border-radius */
            box-shadow: 0px 4px 4px var(--shadow-color);

            /* Layout & Transition */
            display: flex;
            flex-direction: column;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
        }

        .toc-overlay.active {
            transform: translate(28px, -50%); /* Slide in with a small offset from the edge */
        }
 
        /* Header inside the TOC panel */
        .toc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        .toc-header h3 {
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-mobile);
            margin: 0;
            color: var(--text-color);
        }

        .toc-close-btn {
            cursor: pointer;
            color: var(--text-color);
            padding: 4px; /* Increase tappable area */
        }

        /* List of contents */
        .toc-list {
            list-style: none;
            padding: 0 16px;
            margin: 12px 0;
            overflow-y: auto; /* Allow scrolling */
            flex-grow: 1;
        }

        .toc-list li a {
            display: block;
            color: var(--text-color);
            text-decoration: none;
            font-size: var(--font-size-normal);
            padding: 0px 0;
            border-bottom: 0px solid var(--border-color);
            transition: color 0.3s ease, padding-left 0.3s ease;
        }
        
        .toc-list li:last-child a {
            border-bottom: none;
        }

        .toc-list li a:hover {
            color: var(--link-hover-color);
            padding-left: 8px;
        }
        
        /* Backdrop for when the menu is open */
        .toc-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 7000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .toc-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .toc-overlay {
                max-width: 512px; /* Desktop width */
            }

            .toc-overlay.active {
                 transform: translate(24px, -50%); /* Slightly larger offset for desktop */
            }

            .toc-header {
                padding: 24px;
            }

            .toc-list {
                padding: 0 24px;
                margin: 24px 0;
            }
        }

/* Icon setup */
.icon-info {
  display: inline-block;
  width: 24px;
  height: 24px;

  background-color: currentColor; /* Icon adopts the text color */
  mask: url('info.svg') no-repeat center / contain;
  -webkit-mask: url('info.svg') no-repeat center / contain;

  flex-shrink: 0;
}

.icon-hearingaid {
  display: inline-block;
  width: 12px;
  height: 12px;

  background-color: currentColor; /* Icon adopts the text color */
  mask: url('hearing-aid-outline-icon.svg') no-repeat center / contain;
  -webkit-mask: url('hearing-aid-outline-icon.svg') no-repeat center / contain;

  flex-shrink: 0;
}
 

        /* Footer Trigger Button */
        .footer-trigger {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-bottom: none;
            padding: 8px 16px;
            cursor: pointer;
            z-index: 1010; /* Sits above content */
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--font-size-small-mobile);
        }

        .footer-trigger:hover {
            background-color: var(--button-hover-color);
            color: var(--button-text-color);
        }

        /* Footer Overlay Panel */
        .footer-overlay {
            position: fixed;
            bottom: -100%; /* Start off-screen */
            left: 0;
            width: 100%;
            z-index: 1040; /* Below TOC overlay, above content */
            
            max-height: 75vh; /* This caps the height to 85% of the screen's height */
    display: flex; /* This enables flexbox for better inner layout */
    flex-direction: column; /* This stacks the inner content vertically */
    
            background-color: var(--bg-color);
            border-top: 1px solid var(--card-border);
            box-shadow: 0 -4px 15px var(--shadow-color);
            
            transition: bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .footer-overlay.active {
            bottom: 0; /* Slide up */
        }
        
        .footer-content-wrapper {
            max-width: 1512px; /* Match your main content width */
            margin: auto;
            padding: var(--container-padding-desktop);
            overflow-y: auto; /* This adds a vertical scrollbar ONLY if needed */
        }

        /* Close button inside the footer */
        .footer-close-btn {
            position: absolute;
            top: 16px;
            right: 85px;
            cursor: pointer;
            color: var(--button-text-color);
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-close-btn i {
            font-size: 24px;
            text-decoration: none;
            text-decoration-style: none;
        }

        /* 3-Column Grid Layout */
        .footer-grid {
            display: grid;
            grid-template-columns: 1fr; /* 1 column on mobile */
            gap: calc(2 * var(--card-section-spacing-desktop));
        }

        .footer-column h3 {
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-desktop);
            margin-bottom: var(--card-section-spacing-mobile);
            color: var(--text-color);
        }

        .footer-column p, .footer-column li {
            font-size: var(--font-size-normal);
            color: var(--text-color);
            opacity: 0.8;
            margin-bottom: var(--card-section-spacing-mobile);
        }

        .footer-column a {
            color: var(--text-color);
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .footer-column a:hover {
            opacity: 1;
            color: var(--link-hover-color);
        }

        /* Copyright section at the bottom */
        .footer-copyright {
            margin-top: var(--container-padding-desktop);
            padding-top: var(--card-section-spacing-desktop);
            border-top: 1px solid var(--border-color);
            text-align: center;
            font-size: var(--font-size-small-mobile);
            opacity: 0.7;
            margin: 16px;
        }
        
        /* Backdrop for when the footer is open */
        .footer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1035; /* Below footer, above content */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .footer-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Media query for desktop layout */
        @media (min-width: 768px) {
            .footer-grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
            }
        }

        
/* Service Card Styles */
.service-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    margin-bottom: var(--card-section-spacing-desktop);
    overflow: hidden;
    box-shadow: 0px 0px 0px var(--shadow-color);
    transition: background-color 0.3s, border-color 0.3s;
    padding: 16px 8px;
}

.service-card-inner {
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.service-card-image-container {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.service-card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.service-card-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-grow: 1;
}

.service-card h3 {
    font-family: 'Karla';
    font-size: 24px;
    margin: 0;
}

.service-card p {
    font-size: 16px;
    margin: 0;
}

.service-card .cta-button {
    font-size: 24px;
    width: fit-content;
}

/* Product Grid Layout */
.product-grid { 
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column for small screens */
    gap: var(--card-section-spacing-desktop);
}

/* Product Card Styles */
.product-card {
    background-color: transparent;
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 32px 16px; /* Outer padding for stroke */
    box-shadow: 0px 0px 0px var(--shadow-color);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, border-color 0.3s;
    align: center;
    align-items: center;
}

.product-card-inner {
    padding: 8px; /* Inner padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 12px; /* Gap between inner elements */
    height: 100%; /* Make inner content fill the card */
}

.product-card-image {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Match service card image radius */
    margin-bottom: var(--text-image-distance);
}

.product-card h3 {
    font-family: 'Karla';
    font-size: 24px;
    margin: 0;
}

.product-card p {
    font-size: 16px;
    margin: 0;
    flex-grow: 1; /* Allow description to take up space */
}

.product-card .price {
    font-size: 20px;
    font-weight: bold;
    margin-top: auto; /* Push price and button to bottom */
}

.product-card .cta-button {
    font-size: 20px; /* Slightly smaller for product cards */
    width: fit-content;
}


/* Value Cards Grid Layout */
.valuecards-grid {
width: auto;
    overflow-x: auto; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--card-section-spacing-desktop);
    align: center;
    align-items: center;
     
}

/* Value Card Styles */
.valuecards-card {
    background-color: transparent;
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 32px 16px; /* Outer padding for stroke */
    box-shadow: 0px 0px 0px var(--shadow-color);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, border-color 0.3s;
    align: center;
    align-items: center;
}

.valuecards-card-inner {
width: 100%;
    overflow-x: auto; 
    padding: 8px; /* Inner padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    button-align: center;
    gap: 12px; /* Gap between inner elements */
    height: 100%; /* Make inner content fill the card */
}

.valuecards-card-image {
    width: 60%;
    height: 60%;
    border-radius: 20px;  
    margin-bottom: var(--text-image-distance);
}

.valuecards-card h3 {
    font-family: 'Karla';
    font-size: 24px;
    margin: 0;
}

.valuecards-card p {
    font-size: 16px;
    margin: 0;
    flex-grow: 1; /* Allow description to take up space */
}

.valuecards-card .price {
    font-size: 20px;
    font-weight: bold;
    margin-top: auto; /* Push price and button to bottom */
}

.valuecards-card .cta-button {
    font-size: 20px;  
        width: 100%;  
}


/* Big button */
.big-button-container {
    width: 100%;  
    display: flex;
    justify-content: center;  
    padding: 0px 0;  
}

.cta-full-width {
    /* --- Inherit from the base button --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: 1px solid var(--button-border);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border-radius: 24px;
    text-decoration: none;
    margin-top: 0px;
    height: var(--button-height);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    
    /* --- New rules for this specific button --- */
    width: 100%;  
    max-width: 700px;  
    font-size: 20px;
}

 
.cta-full-width:hover {
  background-color: var(--button-hover-color);
  color: var(--button-text-color);
}


/* Carousel Styles */
.carousel {
    position: relative; width: 100%; max-width: 1512px; margin: 40pt auto;
    overflow: hidden; border-radius: 24px; border: 1px solid var(--card-border);
}
.carousel-track-container { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; cursor: grab; }
.carousel-slide { min-width: 100%; position: relative; }
.carousel-slide img { width: 100%; display: block; height: auto; }
.carousel-button {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5);
    border: none; color: white; font-size: 2rem; padding: 0.5rem; cursor: pointer; z-index: 1;
    border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.carousel-button--left { left: 10px; }
.carousel-button--right { right: 10px; }
.carousel-nav { display: flex; justify-content: center; padding: 1rem 0; position: absolute; bottom: 10px; width: 100%; }
.carousel-indicator { border: none; border-radius: 50%; width: 12px; height: 12px; background: rgba(255,255,255,0.5); margin: 0 5px; cursor: pointer; }
.carousel-indicator.current-slide { background: white; }

/* Page Navigation Section */
.page-navigation {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: calc(4 * var(--base-grid-unit-desktop)); padding-top: var(--card-section-spacing-desktop);
    border-top: 1px solid var(--card-border);
}

/* Footer */
footer {
    text-align: center; padding: var(--container-padding-mobile); font-size: var(--font-size-small-mobile);
    color: var(--text-color); background-color: var(--bg-color); margin-top: calc(4 * var(--base-grid-unit-mobile));
    box-shadow: 0 -2px 5px var(--shadow-color); transition: background-color 0.3s, color 0.3s;
}

/* Media Queries for Responsive Design */
@media (max-width: 968px) {
    .navbar ul { display: none; }
    .hamburger-icon { display: block; }
}

@media (min-width: 768px) {
    h1 { font-size: var(--font-size-title-desktop); }
    h2 { font-size: var(--font-size-subheading-desktop); }
    h3 { font-size: var(--font-size-subtitle2-desktop); }
        .hero-content h4 { 
        font-size: var(--font-size-subtitle4-desktop); 
    .cta-button { font-size: var(--font-size-cta-desktop); }
    .service-card .cta-button { font-size: 24px; }

    .service-card-inner {
        flex-direction: row;
        align-items: center;
    }
    .service-card-text { flex-basis: 50%; order: 1; text-align: left; align-items: flex-start; }
    .service-card-image-container { flex-basis: 50%; order: 2; }
    .service-card.image-left .service-card-text { order: 2; align-items: flex-end; text-align: right;}
    .service-card.image-left .service-card-image-container { order: 1; }

    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .roadmap-graph { grid-template-columns: repeat(3, 1fr); }
    .target-grid { grid-template-columns: repeat(2, 1fr); }
    .collections-grid { grid-template-columns: repeat(2, 1fr); }
        .valuecards-card .cta-button {
        width: fit-content;
    }
}

@media (min-width: 1512px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .valuecards-grid { grid-template-columns: repeat(2, 1fr); }
    .target-grid { grid-template-columns: repeat(4, 1fr); }
}
}

/* Hero section */
.blog-hero {
  position: relative;
  height: 90vh; /* 70% viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden; /* keeps img inside */
}

.blog-hero .hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill space without distorting */
  object-position: center; /* keep image centered */
  z-index: -1;
  background-color: var(--card-bg);
}

/* Overlay content */
.hero-overlay {
  color: var(--text-color);
  background: var(--background-color-highlight);
  padding-top: 1rem; 
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 12px;
  max-width: 70%;
  max-height: 80%; /* prevents it from overflowing */
  overflow-y: auto; /* allows scrolling if content too tall */
}

/* Make overlay text scrollable on small screens */
.hero-overlay::-webkit-scrollbar {
  width: 6px;
}
.hero-overlay::-webkit-scrollbar-thumb {
  background: var(--button-bg);
  border-radius: 4px;
}

/* Titles */
.hero-title {
  padding-top: 2%;
  font-size: var(--font-size-title-desktop);
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: var(--font-size-subheading-desktop);
  margin-bottom: 1.5rem;
}

/* Chevron button */
.scroll-down {
  display: inline-block;
  font-size: 2rem;
  background-color: var(--button-bg);
  color: var(--button-text-color);
  text-decoration: none;
  animation: bounce 2s infinite;
  padding: 8px 20px;
  padding-bottom: 0px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

/* Blog content */
.blog-content {
  padding: 4rem 2rem;
  background: var(--bg-color);
  color: var(--text-color);
}

/* 📱 Mobile tweaks */
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--font-size-title-mobile);
    padding-top: 20%;
  }

  .hero-subtitle {
    font-size: var(--font-size-subheading-mobile);
  }

  .hero-overlay {
    max-width: 95%;
    max-height: 80%; /* more breathing room */
    padding: 1.5rem;
  }
}


/* --- FAQ Page Styles --- */
.faq-layout {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--card-section-spacing-desktop));
    margin-top: calc(6 * var(--spacing-unit));
}

.faq-nav-container {
    flex-shrink: 0;
}

.faq-nav {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: var(--spacing-unit);
    padding-bottom: 12px;
}

.faq-nav-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid var(--main-card-border);
    border-radius: 8px;
}

.faq-nav-link:hover {
    background-color: var(--button-hover-color);
    color: var(--button-text-hover-active);
}

.faq-nav-link.active {
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: 1px solid var(--main-card-border);
}

.faq-content {
    flex-grow: 1;
}

.faq-category {
    display: none;
 }

.faq-category.active {
    display: block;
}

.faq-item {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--main-card-border); /* Add a border for visual separation */
    border-radius: 8px; /* Add border-radius for modern look */
}

.faq-question {
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
     align-items: center;
    text-align: left;
    background: var(--card-bg);
    cursor: pointer;
    padding: 16px; /* Add padding to the button itself */
    border-bottom: 1px solid var(--card-border);
    border: none;
    color: var(--text-color); /* Use the text color variable */
}

/* Updated rule to target the SVG's path for color */
.faq-question svg path {
    color: var(--bg-color);
    transition: fill 0.3s ease;
    background-color: var(--bg-color);
 }

.faq-question svg {
    width: 24px;
    height: 24px;
        color: var(--faq-icon-color);
        border-radius: 24px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    border-top: 1px solid var(--card-border);
}

.faq-answer p {
    margin: 16px;
    padding-top: 8px; /* Add padding to the paragraph */
    color: var(--text-color);
 }
.faq-answer a {
    display: inline;
    word-break: break-word; /* prevents long URLs from stretching */
    padding: 0;
    margin: 0;
    color: var(--link-color);
}
 
.faq-item.open .faq-answer {
max-height: 1000px;    text-decoration: none;
}

/* Updated rule for icon rotation */
.faq-item.open svg {
    transform: rotate(180deg);
}

/* Responsive Layout for FAQ Page */
@media (min-width: 768px) {
    .faq-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }
    .faq-nav-container {
        width: 240px;
    }
    .faq-nav {
        flex-direction: column;
        position: sticky;
        top: 104px;
    }
}

/* highlight for answers links */
.hl-links {
  background-color: var(--card-bg);
  padding: 4px;
  margin: 4px;
 }

.accordion {
  max-width: 600px;
  margin: 2rem auto;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #e0e0e0;
}

.accordion-header {
  width: 100%;
  background: var(--bg-color);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.accordion-header:hover {
  background: #f9f9f9;
}
 
.accordion-content {
  display: none;
  padding: 1rem 2rem;
  background: #fafafa;
  font-size: 0.95rem;
  line-height: 1.5;
}

.accordion-item.active .accordion-content {
  display: block;
}

.accordion-item.active .icon {
  transform: rotate(180deg); /* rotates caret-down into caret-up */
}

/* Themes changer */
.theme {
  position: fixed; 
  
  display: none; /* hidden by default */
   z-index: 66666;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  }


 /* Themes changer */
.theme-selector {
  position: fixed;
  top: 20%;
  right: 0px;
  z-index: 2500;
    
}

.theme-trigger {
  background: var(--button-bg);
  color: var(--button-text-color);
   padding: 8px;

  border-radius: 12px;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
   
   cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow-color);
  border: 1px solid var(--button-border);
   font-size: 0.7rem;
    
}

 .theme-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }
        
.overlay-theme { 
  position: relative;
   background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  margin: 1.5rem;
  max-width: 90%;
  max-height: 80%; 
  max-width: 320px;
  min-width: 200px;
  box-shadow: 0 8px 20px rgba(0,0,0,1);
  transform: rotate(-50%);
  bottom: 8rem;

  text-align: left;
}

.overlay-theme.hidden {
  display: none;
}

.overlay-theme p {
  font-size: 12px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer; 
  }

.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  font-size: 1rem;
  text-align: left;
}

.swatch-0 { background: var(--brand-color, #6C3BAA); }
.swatch-1 { background: #3BAA78; }
.swatch-2 { background: #c52929; }
.swatch-3  { background: #2972c5;; } 
.swatch-4  { background: #fbff00;; } 


 

/* ================================
   Highlight Utility Classes
   These classes apply semantic text highlights 
   using the blog-specific tokens.
   ================================ */

/* -------------------------------
   Blog 1 — Science, Ethics, Morality, Philosophy
   ------------------------------- */

/* Green → philosophers, scientists, human anchors */
.hl-people-blog-1 {
  background-color: var(--text-highlight-people-blog-1);
 }

/* Blue → abstract concepts, grounding */
.hl-concepts-blog-1 {
  background-color: var(--text-highlight-concepts-blog-1);
 }

/* Yellow → key principles, arguments */
.hl-arguments-blog-1 {
  background-color: var(--text-highlight-arguments-blog-1);
 }

/* Purple → dates, historical context */
.hl-dates-blog-1 {
  background-color: var(--text-highlight-dates-blog-1);
}

/* Red → ethical dilemmas, moral conflicts */
.hl-dilemmas-blog-1 {
  background-color: var(--text-highlight-dilemmas-blog-1);
 }

/* Gray → uncertainty, paradoxes */
.hl-uncertainty-blog-1 {
  background-color: var(--text-highlight-uncertainty-blog-1);
 }


/* -------------------------------
   Blog 2 — Sexual Themes, Health, Paraphilias, Cases
   ------------------------------- */

/* Pink → intimacy, affection */
.hl-affection-blog-2 {
  background-color: var(--text-highlight-affection-blog-2);
}

/* Red → taboo, warnings, risks */
.hl-risk-blog-2 {
  background-color: var(--text-highlight-risk-blog-2);
 }

/* Blue → medical/legal references */
.hl-medical-blog-2 {
  background-color: var(--text-highlight-medical-blog-2);
 }

/* Green → positive health practices */
.hl-health-blog-2 {
  background-color: var(--text-highlight-health-blog-2);
 }

/* Purple → BDSM, psychological framing */
.hl-bdsm-blog-2 {
  background-color: var(--text-highlight-bdsm-blog-2);
 }

/* Gray → myths, stigma, misinformation */
.hl-myths-blog-2 {
  background-color: var(--text-highlight-myths-blog-2);
 }

/* Orange → true cases, news */
.hl-cases-blog-2 {
  background-color: var(--text-highlight-cases-blog-2);
 }


/* -------------------------------
   Blog 3 — Tech, UX, Developer Perspective
   ------------------------------- */

/* Blue → frameworks, tools */
.hl-tools-blog-3 {
  background-color: var(--text-highlight-tools-blog-3);
 }

/* Green → developers, community */
.hl-people-blog-3 {
  background-color: var(--text-highlight-people-blog-3);
}

/* Yellow → best practices, key tips */
.hl-bestpractices-blog-3 {
  background-color: var(--text-highlight-bestpractices-blog-3);
 }

/* Orange → breakthroughs, innovation */
.hl-innovation-blog-3 {
  background-color: var(--text-highlight-innovation-blog-3);
 }

/* Gray → bugs, limitations */
.hl-limitations-blog-3 {
  background-color: var(--text-highlight-limitations-blog-3);
 }

/* Purple → design philosophy */
.hl-philosophy-blog-3 {
  background-color: var(--text-highlight-philosophy-blog-3);
 }


/* -------------------------------
   Blog 4 — Music, Art, Hobbies
   ------------------------------- */

/* Red → passion, performance */
.hl-passion-blog-4 {
  background-color: var(--text-highlight-passion-blog-4);
 }

/* Blue → calm, reflective */
.hl-calm-blog-4 {
  background-color: var(--text-highlight-calm-blog-4);
 }

/* Green → artists, community */
.hl-artists-blog-4 {
  background-color: var(--text-highlight-artists-blog-4);
}

/* Purple → creativity, imagination */
.hl-creativity-blog-4 {
  background-color: var(--text-highlight-creativity-blog-4);
 }

/* Yellow → joy, vibrancy */
.hl-joy-blog-4 {
  background-color: var(--text-highlight-joy-blog-4);
 }

/* Orange → achievements, milestones */
.hl-achievements-blog-4 {
  background-color: var(--text-highlight-achievements-blog-4);
 }

/* Pink → nostalgia, warmth */
.hl-nostalgia-blog-4 {
  background-color: var(--text-highlight-nostalgia-blog-4);
 }

/* -------------------------------
   Highlight Triggers
   ------------------------------- */

.highlight-trigger {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-radius: 24px;
            padding: 8px;
            cursor: pointer;
            z-index: 1070;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
            font-size: 0.7rem;
   
}

        .highlight-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

#highlight-overlay {
  position: fixed;
  top: 50%;
  right: 31px;
  width: 50%;
  max-width: 75%;
  max-height: 70vh;
  overflow: auto;
  transform: translateY(-45%);  
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 20px var(--shadow-color);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;

  box-shadow: 0px 4px 4px var(--shadow-color);
}

.hidden {
  display: none !important;
}


.highlight-legend {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.9rem;
}

#highlight-overlay h1 {
  font-size: 1.5rem;   /* ~19px */
  margin: 0.2rem 0;
}

#highlight-overlay h2 {
  font-size: 1rem;     /* ~16px */
  margin: 0.2rem 0;
  
}

#highlight-overlay h3 {
  font-size: 0.9rem;   /* ~14px */
  margin: 0.2rem 0;
}

#highlight-overlay p {
  font-size: 0.85rem;  /* ~13px */
  margin: 0.2rem 0;
}


.legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  vertical-align: middle;
}

/* When highlights are OFF */
.no-hl .hl-people-blog-1,
.no-hl .hl-concepts-blog-1,
.no-hl .hl-arguments-blog-1,
.no-hl .hl-dates-blog-1,
.no-hl .hl-dilemmas-blog-1,
.no-hl .hl-uncertainty-blog-1,
/* Blog 2 */
.no-hl .hl-affection-blog-2,
.no-hl .hl-risk-blog-2,
.no-hl .hl-medical-blog-2,
.no-hl .hl-health-blog-2,
.no-hl .hl-bdsm-blog-2,
.no-hl .hl-myths-blog-2,
.no-hl .hl-cases-blog-2,
/* Blog 3 */
.no-hl .hl-tools-blog-3,
.no-hl .hl-people-blog-3,
.no-hl .hl-bestpractices-blog-3,
.no-hl .hl-innovation-blog-3,
.no-hl .hl-limitations-blog-3,
.no-hl .hl-philosophy-blog-3,
/* Blog 4 */
.no-hl .hl-passion-blog-4,
.no-hl .hl-calm-blog-4,
.no-hl .hl-artists-blog-4,
.no-hl .hl-creativity-blog-4,
.no-hl .hl-joy-blog-4,
.no-hl .hl-achievements-blog-4,
.no-hl .hl-nostalgia-blog-4 {
  background-color: transparent !important;  /* remove marker effect */
  color: inherit !important;                /* reset to normal text color */
}




 
.yt-wrapper {
  display: flex;                 /* centers child horizontally */
  justify-content: center;       
  margin: 1rem auto;             /* space around + center in parent */
  padding: 1rem;                 /* inside spacing */
  border: 1px solid var(--main--card-border);
  border-radius: 24px;
  max-width: 950px;              /* keep wrapper from stretching too wide */
  box-sizing: border-box;        /* include padding in width calc */
  background: var(--card-bg);              /* optional: shows padding area */
}

.yt-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
   background: #000;
}

.yt-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 

* {
  padding: 0px;
  margin: 0px;
}

 

.imagecontainer {
  height: 100vh;
  width: 100%;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  color: var(--text-color);
  font-size: 4rem;
  font-weight: 600;
}

.title-large {
  height: 130px;
  margin-left: -5px;
  opacity: 0.1;
}

.img-container {
  display: inline-block;
  overflow: hidden;
  margin-left: -2.8px;
  margin-right: -2.8px;
  width: 170px;
  vertical-align: top;
  border-radius: 0px 0px 80px 80px;
  animation-name: flow;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-delay: -2s;
  transition-timing-function: cubic-bezier(0,.57,1,.46);
  box-shadow: 2px 2px 16px 2px rgba(0,0,0,0.5);
}

.second-animation {
  animation-delay: -1.5s;
}

.third-animation {
  animation-delay: -1s; 
}

.fourth-animation {
  animation-delay: -0.5s; 
}

.fifth-animation {
  animation-delay: 0s; 
}

.sixth-animation {
  animation-delay: 0.5s; 
}
  
.seventh-animation {
  animation-delay: 1s;
}

.img {
  object-fit: cover;
  width: 170px;
  height: 100vh;
  margin-top: -60px;
}

.nba {
  margin-top: -20px;
}

@keyframes flow {
  0% {height: 20%; border-radius: 0px 0px 30px 30px;}
  50% {height: 90%; border-radius: 0px 0px 100px 100px;}
  100% {height: 20%; border-radius: 0px 0px 30px 30px;}
}

@media only screen and (max-width: 1200px) {
  #img-7 {
    display: none;
  }
}

@media only screen and (max-width: 1028px) {
  #img-1 {
    display: none;
  }
}

@media only screen and (max-width: 860px) {
  #img-6 {
    display: none;
  }
}

/* -------------------------------------- */
/* 1. Main Song Container (Desktop Grid / Mobile Flex) */
/* -------------------------------------- */

.song-comparison-wrapper {
  max-width: 1512px;
  margin: 0 auto;
  padding: var(--card-section-spacing-mobile) var(--container-padding-mobile);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--card-section-spacing-mobile);
  overflow-x: hidden;
}

/* Desktop Layout (Grid) */
@media (min-width: 1024px) {
  .song-comparison-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--card-section-spacing-desktop);
    padding: var(--container-padding-desktop);
  }
}

/* -------------------------------------- */
/* 2. Top Headers (Desktop-Only) */
/* -------------------------------------- */

.song-header-row {
  display: none;
  font-size: var(--font-size-subheading-mobile);
  font-weight: bold;
  color: var(--text-color-light);
  padding-bottom: var(--base-grid-unit-mobile);
  border-bottom: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
  .song-header-row {
    display: block;
    text-align: center;
    grid-column: 1 / 2;
    padding-bottom: var(--base-grid-unit-desktop);
  }
  .song-header-row.translated {
    grid-column: 2 / 3;
  }
}

/* -------------------------------------- */
/* 3. Mobile Viewport & Sliding Panels */
/* -------------------------------------- */

/* Clipping / viewport for sliding track */
.song-viewport {
  flex-grow: 1;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Mobile: the sliding track that contains both panels */
.song-panels {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 200%; /* 2 × viewport width */
  transition: transform 0.4s ease-in-out;
}

/* Keep the transform rules for JS toggles (mobile) */
.song-panels.original-active { transform: translateX(0); }
.song-panels.translated-active { transform: translateX(-50%); }

/* Desktop: make panels behave as part of the wrapper grid
   -> using display: contents lets the .song-text-panel elements
   participate in .song-comparison-wrapper's grid (so grid-column rules work) */
@media (min-width: 1024px) {
  .song-viewport { display: contents; overflow: visible; }
  .song-panels { display: contents; width: auto; transform: none; }
  /* Ensure any active transform is disabled on desktop */
  .song-panels.original-active,
  .song-panels.translated-active { transform: none; }
}

/* -------------------------------------- */
/* 3.1 The Individual Panels (shared rules) */
/* -------------------------------------- */

.song-text-panel {
  flex-shrink: 0;
  /* Mobile: each panel is 50% of the 200% track (= 100% viewport) */
  flex-basis: 50%;
  overflow: hidden; /* hide overflow; inner .song-text-content will scroll */
  box-sizing: border-box;
  background: var(--card-bg);
  border-radius: 8px;
  padding: var(--container-padding-mobile);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
}

/* Desktop placement — panels go into the wrapper grid columns */
@media (min-width: 1024px) {
  .song-text-panel {
    /* let the wrapper grid control overall placement/size */
    flex: none;
    height: auto;
    padding: var(--container-padding-desktop);
    grid-row: 2 / 3;
    overflow: hidden; /* inner area will scroll */
  }

  .song-text-panel.original { grid-column: 1 / 2; }
  .song-text-panel.translated { grid-column: 2 / 3; }
}

/* -------------------------------------- */
/* 3.2 Scrollable content area inside each panel (both mobile + desktop) */
/* -------------------------------------- */

.song-text-content {
  /* This fills the panel and becomes the scrollable area */
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll for iOS */
  flex: 1 1 auto; /* fill available vertical space inside the panel */
  line-height: 1.6;
  font-size: var(--font-size-normal);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding-right: var(--base-grid-unit-mobile);
  text-align: center;
}

/* Give panels a visible, constrained height so the inner area can scroll.
   Mobile: keep them shorter; Desktop: allow more vertical space but still capped. */
@media (max-width: 1023px) {
  .song-text-panel {
    height: 65vh; /* panel box size on mobile (adjust 60–75vh to taste) */
  }
  .song-text-content { height: 100%; }
}

@media (min-width: 1024px) {
  .song-text-panel {
    max-height: 75vh; /* desktop cap so the page header/footer remain visible */
  }
  .song-text-content { height: 100%; }
}

/* Optional: subtle scrollbar styling (only basic; uses no new vars) */
.song-text-content::-webkit-scrollbar { width: 8px; height: 8px; }
.song-text-content::-webkit-scrollbar-thumb { border-radius: 6px; opacity: .6; }

/* -------------------------------------- */
/* 4. Mobile Switcher Controls */
/* -------------------------------------- */

.song-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--base-grid-unit-mobile) 0;
  background-color: var(--background-color);
  z-index: 10;
}

@media (min-width: 1024px) {
  .song-switcher { display: none; }
}

/* Button styles */
.song-switch-button {
  display: flex;
  align-items: center;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  min-height: var(--button-min-tappable-area);
  border-radius: 6px;
  background-color: var(--button-bg);
  color: var(--button-text-color);
  cursor: pointer;
  font-size: var(--font-size-cta-mobile);
  font-weight: 600;
  transition: background-color 0.3s;
  border: 1px solid var(--button-border);
}

.song-current-view {
  font-size: var(--font-size-subheading-mobile);
  font-weight: 700;
  color: var(--accent-color);
}

.arrow-left { margin-right: var(--base-grid-unit-mobile); }
.arrow-right { margin-left: var(--base-grid-unit-mobile); }



/* Custom Typography Classes based on variables */
        .text-size-title {
            font-size: var(--font-size-title-mobile);
        }
        .text-size-h2 {
            font-size: var(--font-size-subtitle4-mobile);
        }
        .text-size-h3 {
             font-size: var(--font-size-subheading-mobile);
        }
        .text-size-normal {
            font-size: var(--font-size-normal);
        }
        @media (min-width: 768px) {
            .text-size-title {
                font-size: var(--font-size-title-desktop);
            }
             .text-size-h2 {
                font-size: var(--font-size-subtitle4-desktop);
            }
            .text-size-h3 {
                font-size: var(--font-size-subheading-desktop);
            }
        }
        
        /* Custom Layout/Spacing Classes (Replacing Tailwind's px-6 and similar) */
        .custom-container-padding {
            padding-left: calc(var(--container-padding-mobile) * 1px);
            padding-right: calc(var(--container-padding-mobile) * 1px);
        }
        @media (min-width: 1024px) { 
            .custom-container-padding {
                padding-left: calc(var(--container-padding-desktop) * 1px);
                padding-right: calc(var(--container-padding-desktop) * 1px);
            }
        }
        .section-margin {
            margin-bottom: calc(var(--base-grid-unit-desktop) * 8px); /* 12pt * 8 grid units for large margin */
        }
        
        /* Custom Button Styles (to ensure 48pt height and padding) */
        .custom-btn {
            height: var(--button-height);
            min-height: var(--button-min-tappable-area);
            padding-left: var(--button-padding-horizontal);
            padding-right: var(--button-padding-horizontal);
            padding-top: var(--button-padding-vertical);
            padding-bottom: var(--button-padding-vertical);
            font-size: var(--font-size-cta-mobile);
            border-radius: 8px; /* Arbitrary, rounded corners look good */
        }

        /* Semantic Utility Classes using new theme colors */
        .bg-theme-main { background-color: var(--bg-color); }
        .bg-theme-card { background-color: var(--card-bg); }
        .text-theme-main { color: var(--text-color); }
        .text-theme-accent1 { color: var(--color-accent-1); }
        .text-theme-accent2 { color: var(--color-accent-2); }
        .btn-theme-primary {
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            transition: background-color 0.3s;
        }
        .btn-theme-primary:hover {
            background-color: var(--button-hover-color);
        }
        .btn-theme-secondary {
            background-color: var(--color-accent-2); 
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            transition: background-color 0.3s;
        }
        .btn-theme-secondary:hover {
             background-color: var(--color-accent-1);
        }
        .border-theme-card { border-color: var(--card-border); }
        .ring-theme-accent2 { ring-color: var(--color-accent-2); }
        .vertical-line { background-color: var(--color-accent-1); }
        .footer-bg { background-color: var(--bg-color-tba); } 
        
        /* General Layout Styles */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 450px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 400px;
            }
        }
        
        /* Accordion style adjustment for new theme */
        .accordion-header:hover {
            background-color: var(--bg-color-tba);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;}



/* Timeline wrapper */
.timeline-custom {
  position: relative;
  max-width: 1200px;
  margin: 0px;
  padding: 0px;
  overflow: auto; /* ensure parent contains floated items */
}

/* The vertical line (desktop only) */
.timeline-custom::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--border-color);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* Item wrapper */
.timeline-item {
  position: relative;
  width: 100%;
  padding: calc(var(--base-grid-unit-desktop) * 3) 
           calc(var(--base-grid-unit-desktop) * 4);
  background-color: inherit;
  box-sizing: border-box;
  z-index: 1; /* keep above line */
}

/* Circles */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--bg-color);
  border: 4px solid var(--main--card-border); 
  top: 15px;
  border-radius: 50%;
  z-index: 2;
}

/* Left aligned */
.timeline-left {
  float: left;
  clear: both;
}
.timeline-left::after {
  right: -13px;
}

/* Right aligned */
.timeline-right {
  float: right;
  clear: both;
}
.timeline-right::after {
  left: -13px;
}

/* Arrows for left */
.timeline-left::before {
  content: " ";
  position: absolute;
  top: 22px;
  right: 30px;
  border: medium solid var(--main--card-border);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--border-color);
  z-index: 2;
}

/* Arrows for right */
.timeline-right::before {
  content: " ";
  position: absolute;
  top: 22px;
  left: 30px;
  border: medium solid var(--main--card-border);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--main--card-border) transparent transparent;
  z-index: 2;
}

/* Timeline content block */
.timeline-content {
  padding: var(--card-section-spacing-desktop) 
           calc(var(--card-section-spacing-desktop) * 2);
  background-color: var(--card-bg);
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--main--card-border);
  font-size: var(--font-size-normal);
}

/* Responsive - collapse to single column on small screens */
@media screen and (max-width: 600px) {
  .timeline-custom::after {
    display: none; /* hide vertical line */
  }

  .timeline-item {
    width: 100%;
     float: none;
    padding: var(--base-grid-unit-mobile) var(--container-padding-mobile);
  }

  /* hide arrows and circles */
  .timeline-item::before,
  .timeline-item::after {
    display: none;
  }

  .timeline-content {
    padding: var(--card-section-spacing-mobile);
  }
}
/* Timeline wrapper */
.timeline-custom {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--container-padding-mobile);
  overflow: auto; /* ensure parent contains floated items */
}

/* The vertical line (desktop only) */
.timeline-custom::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--border-color);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* Item wrapper */
.timeline-item {
  position: relative;
  width: 52%;
  padding: calc(var(--base-grid-unit-desktop) * 3) 
           calc(var(--base-grid-unit-desktop) * 4);
  background-color: inherit;
  box-sizing: border-box;
  z-index: 1; /* keep above line */
}

/* Circles */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--bg-color);
  border: 4px solid var(--border-color);
  top: 15px;
  border-radius: 50%;
  z-index: 2;
}

/* Left aligned */
.timeline-left {
  float: left;
  clear: both;
}
.timeline-left::after {
  right: -13px;
}

/* Right aligned */
.timeline-right {
  float: right;
  clear: both;
}
.timeline-right::after {
  left: -13px;
}

/* Arrows for left */
.timeline-left::before {
  content: " ";
  position: absolute;
  top: 22px;
  right: 30px;
  border: medium solid var(--main--card-border);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--border-color);
  z-index: 2;
}

/* Arrows for right */
.timeline-right::before {
  content: " ";
  position: absolute;
  top: 22px;
  left: 30px;
  border: medium solid var(--border-color);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--border-color) transparent transparent;
  z-index: 2;
}

/* Timeline content block */
.timeline-content {
  padding: var(--card-section-spacing-desktop) 
           calc(var(--card-section-spacing-desktop) * 2);
  background-color: var(--bg-color);
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--main--card-border);
  font-size: var(--font-size-normal);
}

/* Responsive - collapse to single column on small screens */
@media screen and (max-width: 600px) {
  .timeline-custom::after {
    display: none; /* hide vertical line */
  }

  .timeline-item {
    width: 100%;
    float: none;
    padding: var(--base-grid-unit-mobile) var(--container-padding-mobile);
  }

  /* hide arrows and circles */
  .timeline-item::before,
  .timeline-item::after {
    display: none;
  }

  .timeline-content {
    padding: var(--card-section-spacing-mobile);
  }
}

/* === Text Alignment Utility Classes === */
/* Centered Headings */
.text-center-h1 { text-align: center; font-size: var(--font-size-title-desktop); font-weight: bold; }
.text-center-h2 { text-align: center; font-size: var(--font-size-subheading-desktop); font-weight: bold; }
.text-center-h3 { text-align: center; font-size: 1.5rem; font-weight: bold; }
.text-center-h4 { text-align: center; font-size: 1.25rem; font-weight: bold; }
.text-center-h5 { text-align: center; font-size: 1.125rem; font-weight: bold; }
.text-center-h6 { text-align: center; font-size: 1rem; font-weight: bold; }
 
.text-center-h4-center { text-align: center; font-size: 1.25rem; font-weight: bold; padding-top: 50px;}


/* Paragraphs */
.text-left-p { text-align: center; font-size: var(--font-size-normal); line-height: 1.6; }

/* Lists */
.text-left-ol,
.text-left-ul { text-align: left; margin: 1em 0 1em 2em; line-height: 1.6; }

.text-left-li { text-align: left; margin-bottom: 0.5em; }

/* Small text centered */
.small-center {
  display: block; /* ensures it can be aligned */ text-align: center; margin-bottom: 0.5em; font-size: smaller;       /* keep the semantic "small" look */}


  /* === Overlay Base | Table AI transparency === */
.overlay {
  position: fixed; 
  
  display: none; /* hidden by default */
   z-index: 66666;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  }

/* Overlay inner box */
.overlay-content {
  position: relative;
  margin: 2rem;
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 12px;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border: solid 1px var(--border-color);
}

/* Close button */
.close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 2rem;
  border: none;
  background: transparent;
 
  color: var(--text-color, #333);
}

/* Overlay trigger button */
.overlay-btn {
  position: fixed;
  top: 36%;
  right: 0rem;
  transform: translateY(-50%);
  background: var(--button-bg);
  color: var(--text-color);
  border: 1px solid var(--card-border);
  border-radius: 12px;
   border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;

  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
    padding-top: 8px;
  
}

.overlay-btn .btn-icon {
     width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem; 
 }

/* === Table inside overlay === */
.overlay-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh; /* keeps it scrollable if large */
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.overlay-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: var(--bg-color);
  color: var(--text-color);
}

.overlay-table caption {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color,);
}

.overlay-table th,
.overlay-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #ccc);
  border-right: 1px solid var(--border-color, #ccc);
}

.overlay-table th {
  background-color: var(--bg-color);
  font-weight: 600;
}
 

.form-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.google-form {
  width: 100%;
  height: 700px; /* adjust as needed */
  border: none;
}

/* Responsiveness */
@media (max-width: 768px) {
  .google-form {
    height: 900px;
  }
}

/* Example for theme-adaptable border/background */
.theme-light .form-wrapper {
  background: var(--bg-color);
  border: 1px solid var(--main--card-border);
} 

/* ------------------------------
---------ICONS---------------------
--------------------------------*/
.regular-icon {
  width: 24px;
  height: 24px;
}


.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
 
 .icon-close {
  display: inline-block;
  width: 24px;
  height: 24px;

  background-color: var(--text-color); /* Icon adopts the text color */
  mask: url('x-circle.svg') no-repeat center / contain;
  -webkit-mask: url('x-circle.svg') no-repeat center / contain;

  flex-shrink: 0;
}

.icon-button {
  display: inline-block;
  width: 20px;
  height: 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/*Interactive Images */
.main-content-images {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* allow page height to expand, but keep flex layout */
}

/* Parent of title / nav / feed - acts as a column flex container */
.image-gallery-container {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to shrink inside a flex parent */
  box-sizing: border-box;
  overflow-x: hidden;
 }

/* Title + nav */
.gallery-title {
  font-size: var(--font-size-title-mobile);
  margin-bottom: var(--card-section-spacing-mobile);
  color: var(--text-color);
}

/* Category nav */
.category-nav-wrapper {
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--card-section-spacing-mobile);
}
.category-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--button-spacing);
  white-space: nowrap;
}
.category-button {
  background: transparent;
  border: 1px solid var(--main--border-color);
  color: var(--text-color);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  font-size: var(--font-size-cta-mobile);
  min-height: var(--button-min-tappable-area);
}
.category-button:hover { background-color: var(--button-hover-color); }
.category-button.active {
  background-color: var(--button-bg);
  border-color: var(--main--card-border);
  color: var(--button-text-color);
}

/* -------------------------
   IMAGE FEED (mobile default)
   - Container scrolls vertically (TikTok-like)
   - Use flex column stack, enable overflow-y:auto
   ------------------------- */
.image-feed-wrapper {
  flex: 1 1 auto;
  min-height: 0;               /* critical for child overflow to work in flex layout */
  overflow-y: auto;
  overflow-x: hidden;         /* force vertical scroll only */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  gap: var(--card-section-spacing-mobile);
  padding-bottom: 40px;
  box-sizing: border-box;
 }

/* Individual card sizing and visual treatment */
.image-card {
  width: 100%;
   background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px var(--shadow-color);
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out;
  scroll-snap-align: start;
   box-sizing: border-box;
 }

/* Image fills the card area, cropped nicely */
.image-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* important: keeps same visual framing */
 }

/* Like button + count */
.like-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.2s;
  z-index: 5;
}
.like-button .heart { color: #fff; transition: color 0.2s; }
.like-button.liked .heart { color: #ff4d4f; transform: scale(1.08); }

.like-count {
  font-size: var(--font-size-small-mobile);
  color: var(--text-color);
  position: absolute;
  right: 60px;
  bottom: 24px;
  background: rgba(0,0,0,0.5);
  border-radius: 5px;
  padding: 2px 6px;
  z-index: 5;
}

/* -------------------------
   Desktop / Tablet: GRID layout
   - Switch display to grid explicitly (fixes previous bug)
   - Use grid columns and let the whole page scroll normally (overflow visible)
   ------------------------- */
@media (min-width: 768px) {
  .gallery-title { font-size: var(--font-size-title-desktop); margin-bottom: var(--card-section-spacing-desktop); }
  .category-nav-wrapper { margin-bottom: var(--card-section-spacing-desktop); }
  .category-button { font-size: var(--font-size-cta-desktop); }

  /* Desktop grid: make each card keep aspect and fit grid cell */
  .image-feed-wrapper {
    display: grid;                    /* ensure grid is used explicitly */
    grid-auto-flow: row;              /* place items row by row (not column flow) */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-section-spacing-desktop);
    overflow-y: visible;              /* page scroll handles vertical scroll on desktop */
    overflow-x: hidden;
    min-height: auto;
  }

  .image-card {  
  min-width: 0;} /* preserve consistent boxes on larger screens */
  
}

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

.box {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 2rem;
  border-radius: 24px;
}

.boxtransparent {
  background-color: var(--shadow-color);
  border: 1px solid var(--card-border);
  padding: 2rem;
  border-radius: 24px;
}


/* Container */
.profile-container {
  position: relative;
  animation: profile-slide-in 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

/* Main card */
.profile-card {
  max-width: 500px;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--card-bg);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border)
}

.profile-card:after {
  content: "";
  display: block;
  width: 190px;
  height: 300px;
  background: var(--button-bg);
  position: absolute;
  animation: profile-rotate-bg 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}

/* Badges */
.profile-badges {
  padding: 5px 20px;
  border-radius: 6px;
  background-color: var(--card-bg);
  max-width: 480px;
  width: 90%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  animation: profile-badges-in 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
   border: 1px solid var(--card-border);
   padding-top: 20px;
}
.profile-badges span {
  font-size: 1.6em;
  margin: 0 6px;
  opacity: 0.7;
  }

.profile-badges svg {
  fill: var(--card-border);
}

/* First info section */
.profile-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  position: relative;
}

.profile-main img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.profile-info {
  padding: 0 20px;
}

.profile-info h1 {
  font-size: 1.6rem;
  line-height: 1.2;
}

.profile-info h3 {
  font-size: 1.1rem;
  color: var(--text-color-hl-card);
  font-style: italic;
  margin-top: 0.3rem;
}

.profile-info p.bio {
   color: var(--text-color);
    background-color: var(--card-bg);
  }

 
/* Accessibility: scale for smaller screens */
@media (max-width: 600px) {
  .profile-main {
    flex-direction: column;
    text-align: center;
  }

  .profile-main img {
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
  }

  .profile-info {
    padding: 0;
  }

  .profile-info h1 {
    font-size: 1.3rem;
    background-color: var(--card-bg);
  }

  .profile-info h3 {
    font-size: 1rem;
    background-color: var(--card-bg);
  }

  .profile-info p.bio {
    font-size: 0.9rem;
    background-color: var(--card-bg);
  }

  .profile-badges {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
}

/* Animations */
@keyframes profile-slide-in {
  0% {
    opacity: 0;
    bottom: -500px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}

@keyframes profile-badges-in {
  0% {
    bottom: 10px;
  }
  100% {
    bottom: -42px;
  }
}

@keyframes profile-rotate-bg {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    top: -24px;
    left: -253px;
  }
  100% {
    transform: rotate(-30deg);
    top: -24px;
    left: -78px;
  }
}

.iframe-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}


 .image01 { 
    width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  align-items: center;
  align-content: center;
}

 .image-max { 
    width: 75%;
  height: auto;
  display: block;
  border-radius: 8px;
  align-items: center;
  align-content: center;
  align-self: center;

}
 .image-content { 
    width: 100%;
    max-width: 300px;
  height: auto;
  display: block;
  border-radius: 8px;
  align-items: center;
  align-content: center;
}

.image-border {
    padding: 4px;
    border-radius: 24px;
    border: 1px solid var(--main--card-border);
}

.corsues-grid {
      max-width: 1760px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.corsues-grid2 {
      max-width: 1760px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.text-middle {
     padding-left: 5%;
    padding-right: 5%;
}


 
/* Accessibility Options */
        .AP-trigger {
            position: fixed;
            bottom: 0;
            right: 0px;
            transform: translateY(0%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-right: none;
            padding-top: 4px; 
            padding-right: 4px;
            padding-left: 8px;
            cursor: pointer;
            z-index: 1070;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .AP-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

        /* Nt Overlay Panel */
        .AP-overlay {
            /* Positioning & Sizing */
            position: fixed;
            top: 85%;
            right: 15%;
            transform: translate(240%, 50%); /* Start off-screen and vertically centered */
            width: 100%; /* Let max-width control the size */
            max-width: 220px; /* Mobile-first width */
            max-height: 500px;
            z-index: 1060;
            
            /* Appearance */
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 24px; /* Match site's border-radius */
            box-shadow: 0px 4px 4px var(--shadow-color);

            /* Layout & Transition */
            display: flex;
            flex-direction: column;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
        }

        .AP-overlay.active {
            transform: translate(28px, -50%); /* Slide in with a small offset from the edge */
        }
        
        /* Header inside the Nt panel */
        .AP-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        .AP-header h3 {
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-mobile);
            margin: 0;
            color: var(--text-color);
        }

        .AP-close-btn {
            cursor: pointer;
            color: var(--text-color);
            padding: 4px; /* Increase tappable area */
        }

        /* List of contents */
        .AP-list {
            list-style: none;
            padding: 0 16px;
            margin: 12px 0;
            overflow-y: auto; /* Allow scrolling */
            flex-grow: 1;
        }

        .AP-list li a {
            display: block;
            color: var(--text-color);
            text-decoration: none;
            font-size: var(--font-size-normal);
            padding: 0px 0;
            border-bottom: 0px solid var(--border-color);
            transition: color 0.3s ease, padding-left 0.3s ease;
        }
        
        .AP-list li:last-child a {
            border-bottom: none;
        }

        .AP-list li a:hover {
            color: var(--link-hover-color);
            padding-left: 8px;
        }
        
        /* Backdrop for when the menu is open */
        .AP-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 1055;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .AP-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
 

        .AP-text {
            font-size: 0.55rem;
        }

.AP-card-grid {
      max-width: auto;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

        .AP-card-content {
   background-color: var(--card-bg);
  border-radius: 24px;
  padding: 3px;
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* fix invalid value “left” */
}

/* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .AP-overlay {
                max-width: 512px; /* Desktop width */
            }

            .AP-overlay.active {
                 transform: translate(24px, -50%); /* Slightly larger offset for desktop */
            }

            .AP-header {
                padding: 24px;
            }

            .AP-list {
                padding: 0 24px;
                margin: 24px 0;
            }
        }


.icon-hearingaid {
  display: inline-block;
  width: 16px;
  height: 16px;

  background-color: currentColor; /* Icon adopts the text color */
  mask: url('hearing-aid-outline-icon.svg') no-repeat center / contain;
  -webkit-mask: url('hearing-aid-outline-icon.svg') no-repeat center / contain;

  flex-shrink: 0;
}
 
/* ==============
Navigation Tips 
================ */
        .Nt-trigger {
            position: fixed;
            top: 1.5rem;
            right: 1rem;
            transform: translateY(0%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border); 
            padding-top: 8px;
            padding-bottom: 8px;
            padding-right: 8px;
            padding-left: 8px;
            cursor: pointer;
            z-index: 1070;
            border-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .Nt-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

        /* Nt Overlay Panel */
        .Nt-overlay {
            /* Positioning & Sizing */
            position: fixed;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
            width: 100%; /* Let max-width control the size */
            max-width: 300px; /* Mobile-first width */
            max-height: 500px;
            z-index: 7030;
            
            /* Appearance */
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 24px; /* Match site's border-radius */
            box-shadow: 0px 4px 4px var(--shadow-color);

            /* Layout & Transition */
            display: flex;
            flex-direction: column;
            
            opacity: 0;               /* make it invisible */
  visibility: hidden;       /* prevent interaction when hidden */
  pointer-events: none;

            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */

            overflow-y: auto;
max-height: 90vh; /* prevents it from going beyond the visible screen height */

        }

        .Nt-overlay.active {
           opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
        }
        
        /* Header inside the Nt panel */
        .Nt-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        .Nt-header h3 {  
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-mobile);
            margin: 8px;
            color: var(--text-color);        
        }

        .Nt-close-btn {
            cursor: pointer;
            color: var(--text-color);
            padding: 4px; /* Increase tappable area */
        }

        /* List of contents */
        .Nt-list {
            list-style: none;
            padding: 0 8px;
            margin: 8px 0;
            overflow-y: auto; /* Allow scrolling */
            flex-grow: 1;
        }

        .Nt-list li a {
            display: block;
            color: var(--text-color);
            text-decoration: none;
            font-size: var(--font-size-normal);
            padding: 0px 0;
            border-bottom: 0px solid var(--border-color);
            transition: color 0.3s ease, padding-left 0.3s ease;
            margin: 0px;
        }
        
        .Nt-list li:last-child a {
            border-bottom: none;
        }

        .Nt-list li a:hover {
            color: var(--link-hover-color);
            padding-left: 8px;
        }
        
        /* Backdrop for when the menu is open */
        .Nt-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 7030;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .Nt-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
 

        .Nt-text {
            font-size: 0.7rem;
            padding: 0;
            margin: 0;
        }

.Nt-card-grid {
      max-width: auto;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

        .Nt-card-content {
   background-color: var(--card-bg);
  border-radius: 24px;
  padding: 3px;
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* fix invalid value “left” */
}

        /* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .Nt-overlay {
                max-width: 512px; /* Desktop width */
            }

            .Nt-overlay.active {
                 transform: translate(-50%, -50%); /* Slightly larger offset for desktop */
            }

            .Nt-header {
                padding: 24px;
            }

            .Nt-list {
                padding: 0 24px;
                margin: 24px 0;
            }
        }

 

/* Higlighting for ID */
        @keyframes highlight {
  0% { background-color: var(--hl-color-sectionid); } /* light yellow highlight */
  100% { background-color: transparent; }
}

.highlighted {
  animation: highlight 2s ease-out;
} 

/* Optional: style for the range input thumb for better UI */
#font-scaler::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--button-bg);
  border-radius: 50%;
  cursor: pointer;
}

#font-scaler::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--button-bg);
  border-radius: 50%;
  cursor: pointer;
}

.note-grid {
      max-width: 600px;
  margin: 0 auto;
  display: grid;
   padding: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ===================================
Text clampable - Important in cards! 
====================================== */
         .clampable {
  display: -webkit-box;
  -webkit-line-clamp: 2;    
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
}

 @media (hover: hover) {
  .clampable:hover {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }
}

 .clampable.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}