body {
  --html: #E6F7F8;
  background-color: var(--html);

  /*HN.css*/

    --hn0: #7fb5b7;
    --hn1: #B5E0E2;
    --hn2: #84CACC;
    --hn3: #105458;
    --hn4: #136065;
    --hn5: #39a4aa;
    --hn6: #70c6cb;
    --hn7: #0E484B;
    --hn8: #CDEBEC;
    --hn9: #F7B885;
    --hn10: #CDEBEC;
    --hn11: #F4FAFA;
    --hn12: #24989ecc;
    --hn13: #EAF4F5;
    --hn14: #175c60;
    --hn15: #24989e;
    --hn16: #24989ecc;
    --hn17: #0B2628;
    --hn18: #12383B;
    --hn19: #24979E;
    --hn20: #0E484B;
    --hn21: #519eaf;
    --hn22: #a5c2c2;
    --hn23: #2E5C60; 
    --hn24: #c2f1f1;
    
  /* MAIN */

    --mn0: #9DD5D8;
    --mn1: #CDEBEC;
    --mn2: #c2f1f1;
    --mn00: rgba(255,255,255,0.02);
    --mn3: rgba(207, 245, 244, 0.8);
    --mn4: rgba(255,255,255,0.55);
    --mn5: rgba(255,255,255,0.45);
    --mn6: rgba(0,0,0,0.15);
    --mn7: rgba(255,255,255,0.3);
    --mn000: rgba(0,0,0,0.22);
    --mn0000: #24979E;
    --mn8: #24979E;
    --mn9: #5FB8BC;
    --mn10: #1B7F87;
    --mn11: #24979E;
    --mn12: #1B7F87;
    --mn13: #24979E;
    --mn14: #136065;
    --mn00000: rgba(0,0,0,0.8);
    --mn15: #EAF6F6;
    --mn16: #CDEBEC;
    --mn17: #0E484B;
    --mn18: rgba(0,0,0,0.12);
    --mn19: rgba(255,255,255,0.4);
    --mn20: rgba(0,0,0,0.2);
    --mn21: #C97C3F;

  /* div */

    --div0: #9DD5D8;
    --div1:#CDEBEC;
    --div2:rgba(0,0,0,0.02);
    --div3: #F2FBFB;
    --div4: #5FB8BC;
    --div5: #9DD5D8;
    --div6: #24979E;
    --div7: #5FB8BC;
    
    --div00: rgba(51, 116, 169, 0.315);
    --div000: rgba(255,255,255,0.02);
    
    --div8: rgba(255,255,255,0.85);
    --div9: rgba(255,255,255,0.65);
    --div10: rgba(255,255,255,0.5);
    --div11: rgba(0,0,0,0.12);
    --div12: rgba(255,255,255,0.3);

    --div13: #24979E;
    --div14: #5FB8BC;
    --div15: #1B7F87;
    --div16: #24979E;
    --div17: #136065;
    --div18: #24979E;
    --div19: #1B7F87;

    --div20: rgba(255,255,255,0.9);
    --div21: rgba(255,255,255,0.7);
    --div22: rgba(255,255,255,0.5);
    --div23: rgba(0,0,0,0.12);
    --div24: rgba(255,255,255,0.3);
    --div25: rgba(0,0,0,0.2);
    --div26: #24979E;

    --div0000: rgba(0,0,0,0.15);

    --div27: #12383B;
    --div28: #1B7F87;
    --div29: #24979E;
    --div30: white;
    --div31: rgba(0,0,0,0.18);
    --div32: rgba(1, 20, 47, 0.8);
    --div33: rgba(0,0,0,0.06);
    --div34:#083133;


  /*  Footer  */

    --foo0: #FFFFFF;
    --foo1: #f0e6d0;
    --foo2: #12383B;
    --foo3: #CFE8EA;
    --foo4: #0B2628;
    --foo5: rgba(20, 90, 95, 0.08);
    --foo6: rgba(15, 70, 75, 0.14);
    --foo7: #e2fefe;
    --foo8: #1B7F87;
    --foo9: #CFE8EA;
    --foo10: rgba(20, 90, 95, 0.06);
    --foo11: #1B7F87;
    --foo12: #F4FEFE;
    --foo13: rgba(15, 70, 75, 0.14);
    --foo14: rgba(27, 127, 135, 0.35);
    --foo15: #2E5C60;
    --foo16: #e2fefe;
    --foo17: #E3F3F4;
    --foo18: #1B7F87;
    --foo19: #F4FEFE;
    --foo20: #1B7F87;
    --foo21: rgba(20, 90, 95, 0.1);
    --foo22: rgba(27, 127, 135, 0.35);
    --foo23: #0B2628;
    --foo24: #1B7F87;
    --foo25: #e2fefe;
    --foo26: #CFE8EA;
    --foo27: rgba(20, 90, 95, 0.06);
    --foo28: rgba(20, 90, 95, 0.1);
    --foo29: #2E5C60;
    --foo30: #E3F3F4;
    --foo31: #0B2628;
    --foo32: #6F9A9D;
    --foo33: #E3F3F4;

  /*  WA  */


  --wa0: #4FB9A6;
  --wa1: #F4FEFE;
  --wa2: rgba(15, 70, 75, 0.14);

  --wa3:  rgba(10, 50, 55, 0.16);
  --wa4: #39A493;

  --wa5: rgba(27, 127, 135, 0.35);
  --wa6: rgba(15, 70, 75, 0.14);


  --color-primary-50:  #EAF6F6;
  --color-primary-100: #CDEBEC;
  --color-primary-150: #B5E0E2;
  --color-primary-200: #9DD5D8;
  --color-primary-250: #84CACC;
  --color-primary-300: #5FB8BC;
  --color-primary-350: #3FA7AD;
  --color-primary-400: #24979E;
  --color-primary-450: #4f595a;
  --color-primary-500: #1B7F87;
  --color-primary-550: #176F76;
  --color-primary-600: #136065;
  --color-primary-650: #105458;
  --color-primary-700: #0E484B;
  --color-primary-750: #0B3C3F;
  --color-primary-800: #083133;
  --color-primary-850: #062728;
  --color-primary-900: #031B1C;

  --color-rose-100: #E6F7F4;
  --color-rose-200: #CDEFE8;
  --color-rose-300: #AEE3D8;
  --color-rose-400: #8FD7C8;
  --color-rose-500: #70CBB8;
  --color-rose-600: #4FB9A6;
  --color-rose-700: #39A493;
  --color-rose-800: #2A8577;
  --color-rose-900: #1C5F56;

  --color-wine-100: #E8F0F2;
  --color-wine-200: #CFDFE3;
  --color-wine-300: #AFC4CB;
  --color-wine-400: #7F9EA7;
  --color-wine-500: #52737D;
  --color-wine-600: #3E5C64;
  --color-wine-700: #2F474D;
  --color-wine-800: #203236;
  --color-wine-900: #111B1E;

  --color-primary: #1B7F87;
  --color-primary-light: #3FA7AD;
  --color-primary-dark: #0E484B;

  --color-accent-p: #24989ecc;

  --color-accent: #24979E;
  --color-accent-light: #5FB8BC;
  --color-accent-dark: #105458;

  --color-warm-accent: #F4A261;
  --color-warm-accent-light: #F7B885;
  --color-warm-accent-dark: #C97C3F;
  --color-warm-highlight: #E9C46A;
  --color-warm-highlight-light: #F1D48F;
  --color-warm-highlight-dark: #C9A53E;
  --color-warm-hover: #F6AD72;

  --color-bg: #F2FBFB;
  --color-bg-alt: #E6F7F8;
  --color-bg-soft: #F7FEFE;
  --color-bg-strong: #DDF3F4;

  --color-surface: #FFFFFF;
  --color-surface-soft: #F4FAFA;
  --color-surface-alt: #EAF4F5;

  --color-text: #12383B;
  --color-text-strong: #0B2628;
  --color-text-light: #2E5C60;
  --color-text-muted: #4F7D80;
  --color-text-subtle: #6F9A9D;
  --color-text-on-primary: #F4FEFE;
  --color-text-on-soft: #184447;

  --color-border: #CFE8EA;
  --color-border-strong: #A9D4D7;
  --color-border-soft: #E3F3F4;
  --color-border-subtle: #F1FAFB;

  --shadow-xs: 0 1px 2px rgba(20, 90, 95, 0.06);
  --shadow-sm: 0 2px 4px rgba(20, 90, 95, 0.08);
  --shadow-md: 0 4px 10px rgba(20, 90, 95, 0.1);
  --shadow-lg: 0 8px 20px rgba(15, 70, 75, 0.14);
  --shadow-xl: 0 12px 32px rgba(10, 50, 55, 0.16);

  --color-hover: #1F8890;
  --color-active: #136065;
  --color-focus-ring: rgba(27, 127, 135, 0.35);
}

body.dark {
  --html: #0A1D1F;
  background-color: var(--html);

  /*HN.css*/

    --hn0: #17464a;
    --hn1: #0B1E20;
    --hn2: #0F2A2C;
    --hn3: #84CACC;
    --hn4: #5FB8BC;
    --hn5: #176F76;
    --hn6: #083133;
    --hn7: #70CBB8;
    --hn8: #0E484B;
    --hn9: #8C6F1F;
    --hn10: #062728;
    --hn11: #11282B;
    --hn12: #105458cc;
    --hn13: #163236;
    --hn14: #7F9EA7;
    --hn15: #105458;
    --hn16: #105458cc;
    --hn17: #9DD5D8;
    --hn18: #F4FEFE;
    --hn19: #176F76;
    --hn20: #9DD5D8;
    --hn21: #0B1E20;
    --hn22: #11282B;
    --hn23: #9DD5D8;
    --hn24: #11282B;

  /* MAIN */

    --mn0: rgba(255,255,255,0.06);
    --mn1: rgba(255,255,255,0.04);
    --mn2: #061415;
    --mn3: rgba(255,255,255,0.07);
    --mn4: rgba(255,255,255,0.03);
    --mn5: rgba(255,255,255,0.08);
    --mn6: rgba(0,0,0,0.65);
    --mn7: rgba(255,255,255,0.05);
    --mn8: #176F76;
    --mn9: #105458;
    --mn10: #24979E;
    --mn11: #176F76;
    --mn12: #24979E;
    --mn13: #176F76;
    --mn14: #5FB8BC;
    --mn15: rgba(255,255,255,0.08);
    --mn16: rgba(255,255,255,0.05);
    --mn17: #1f8c92;
    --mn18: rgba(0,0,0,0.6);
    --mn19: rgba(255,255,255,0.05);
    --mn20: rgba(0,0,0,0.2);
    --mn21: #E9C46A;

      
    /* div */
    
    --div0: rgba(255,255,255,0.06);
    --div1: rgba(255,255,255,0.04);
    --div2: rgba(0,0,0,0.4);
    --div3: #061415;
    --div4: #105458;
    --div5: #0B3C3F;
    --div6: #176F76;
    --div7: #105458;
    
    --div00: rgba(255,255,255,0.02);
    --div000: rgba(255,255,255,0.02);
    
    --div8: rgba(255,255,255,0.06);
    --div9: rgba(255,255,255,0.03);
    --div10: rgba(255,255,255,0.08);
    --div11: rgba(0,0,0,0.65);
    --div12: rgba(255,255,255,0.05);
    --div13: #176F76;
    --div14: #105458;
    --div15: #24979E;
    --div16: #176F76;
    --div17: #24979E;
    --div18: #176F76;
    --div19: #5FB8BC;
    --div20: rgba(255,255,255,0.07);
    --div21: rgba(255,255,255,0.03);
    --div22: rgba(255,255,255,0.08);
    --div23: rgba(0,0,0,0.65);
    --div24: rgba(255,255,255,0.05);
    --div25: rgba(0,0,0,0.22);
    --div26: #176F76;
    --div27: rgba(255,255,255,0.92);
    --div28:#24979E;
    --div29:#176F76;
    --div30:white;
    --div31:rgba(0,0,0,0.18);
    --div32:rgba(255,255,255,0.7);
    --div33:rgba(255,255,255,0.08);
    --div34:rgba(255,255,255,0.85);

    /*  Footer  */
  
    --foo0: #0B1E20;
    --foo1: #11282B;
    --foo2: #CDEBEC;
    --foo3: #174447;
    --foo4: #F4FEFE;
    --foo5:  rgba(0, 0, 0, 0.4);
    --foo6:  rgba(0, 0, 0, 0.5);
    --foo7: #0F2A2C;
    --foo8: #24979E;
    --foo9: #174447;
    --foo10: rgba(0, 0, 0, 0.35);
    --foo11: #24979E;
    --foo12: #F4FEFE;
    --foo13: rgba(0, 0, 0, 0.5);
    --foo14: rgba(36, 151, 158, 0.55);
    --foo15: #9DD5D8;
    --foo16: #0F2A2C;
    --foo17: #0F2E30;
    --foo18: #24979E;
    --foo19: #F4FEFE;
    --foo20: #24979E;
    --foo21: rgba(0, 0, 0, 0.45);
    --foo22: rgba(36, 151, 158, 0.55);
    --foo23: #F4FEFE;
    --foo24: #24979E;
    --foo25: #11282B;
    --foo26: #174447;
    --foo27: rgba(0, 0, 0, 0.35);
    --foo28: rgba(0, 0, 0, 0.45);
    --foo29: #9DD5D8;
    --foo30: #0F2E30;
    --foo31: #F4FEFE;
    --foo32: #4F7D80;
    --foo33: #0F2E30;

  /* WA */
  
  --wa0: #5FB8BC;
  --wa1: #F4FEFE;
  --wa2: rgba(0, 0, 0, 0.5);

  --wa3: rgba(0, 0, 0, 0.55);
  --wa4: #8FD7C8;

  --wa5:  rgba(36, 151, 158, 0.55);
  --wa6: rgba(0, 0, 0, 0.5);

  --color-primary-50:  #031B1C;
  --color-primary-100: #062728;
  --color-primary-150: #083133;
  --color-primary-200: #0B3C3F;
  --color-primary-250: #0E484B;
  --color-primary-300: #105458;
  --color-primary-350: #136065;
  --color-primary-400: #176F76;
  --color-primary-450: #1B7F87;
  --color-primary-500: #24979E;
  --color-primary-550: #3FA7AD;
  --color-primary-600: #5FB8BC;
  --color-primary-650: #84CACC;
  --color-primary-700: #9DD5D8;
  --color-primary-750: #B5E0E2;
  --color-primary-800: #CDEBEC;
  --color-primary-850: #EAF6F6;
  --color-primary-900: #F7FEFE;

  --color-rose-100: #0F2E30;
  --color-rose-200: #174447;
  --color-rose-300: #1F5C60;
  --color-rose-400: #2A7579;
  --color-rose-500: #399396;
  --color-rose-600: #5FB8BC;
  --color-rose-700: #8FD7C8;
  --color-rose-800: #CDEFE8;
  --color-rose-900: #E6F7F4;

  --color-wine-100: #0C1618;
  --color-wine-200: #162729;
  --color-wine-300: #203236;
  --color-wine-400: #2F474D;
  --color-wine-500: #3E5C64;
  --color-wine-600: #52737D;
  --color-wine-700: #7F9EA7;
  --color-wine-800: #AFC4CB;
  --color-wine-900: #CFDFE3;

  --color-primary: #24979E;
  --color-primary-light: #5FB8BC;
  --color-primary-dark: #0E484B;

  --color-accent-p: #105458cc;

  --color-accent: #3FA7AD;
  --color-accent-light: #84CACC;
  --color-accent-dark: #105458;

  --color-warm-accent: #C97C3F;
  --color-warm-accent-light: #F4A261;
  --color-warm-accent-dark: #8A5426;
  --color-warm-highlight: #C9A53E;
  --color-warm-highlight-light: #E9C46A;
  --color-warm-highlight-dark: #8C6F1F;
  --color-warm-hover: #F6AD72;

  --color-bg: #061415;
  --color-bg-alt: #0A1D1F;
  --color-bg-soft: #0F2A2C;
  --color-bg-strong: #15383A;

  --color-surface: #0B1E20;
  --color-surface-soft: #11282B;
  --color-surface-alt: #163236;

  --color-text: #CDEBEC;
  --color-text-strong: #F4FEFE;
  --color-text-light: #9DD5D8;
  --color-text-muted: #6FA3A6;
  --color-text-subtle: #4F7D80;
  --color-text-on-primary: #F4FEFE;
  --color-text-on-soft: #CDEBEC;

  --color-border: #174447;
  --color-border-strong: #1F5C60;
  --color-border-soft: #0F2E30;
  --color-border-subtle: #0A1D1F;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.55);

  --color-hover: #3FA7AD;
  --color-active: #136065;
  --color-focus-ring: rgba(36, 151, 158, 0.55);
}


[id] {
    scroll-margin-top: 5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}