@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

@font-face {
    font-family: 'Papaya';
    src: url('Fonts/SBB-PAPAYA.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

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

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
    border: 2px solid #111;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #F15A24);
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #333 #111;
}

:root {
    --p-on-black: #ACACAC;
    --black: #1A1A1A;
    --light-bg: #EFEFEF;
    --dark-desc: #4D4D4D;
    --primary: #F15A24;
    --loader-bg: #0A0A0A;
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noiseFilter'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3e%3c/svg%3e");
}

html {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    cursor: none;
    background-color: var(--black);
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grain);
    opacity: 0.05;
    pointer-events: none;
    z-index: 99999;
}

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

section {
    scroll-snap-align: start;
}

a {
    text-decoration: none;
    font-family: "Google Sans", sans-serif;
}

#hero {
    position: relative;
    overflow: hidden;
    background-color: var(--black);
    background-image: url(./Media/hero-bg.png);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1009%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(26%2c 26%2c 26%2c 1)'%3e%3c/rect%3e%3cpath d='M-101.26 521.16C44.61 515.64 162.95 280.16 430.65 280.36 698.36 280.56 802.46 626.57 962.57 643.31' stroke='rgba(234%2c 45%2c 46%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-284.77 260.48C-86.88 263.38 170.36 495.9 469.36 501.28 768.35 506.66 745.18 646.74 846.42 649.36' stroke='rgba(234%2c 45%2c 46%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-90.24 316.34C42.15 312.45 141.9 110.66 399.69 114.74 657.49 118.82 716.4 592.11 889.63 638.01' stroke='rgba(234%2c 45%2c 46%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-113.83 491.02C15 490.35 197.5 378.48 389.16 379.02 580.83 379.56 554.55 607.47 640.66 627.12' stroke='rgba(234%2c 45%2c 46%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-197.48 282.71C-87.14 282.93 20.4 352.71 238.28 352.71 456.16 352.71 449.15 280.95 674.05 282.71 898.95 284.47 979.18 562.61 1109.81 575.82' stroke='rgba(234%2c 45%2c 46%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1009'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1234%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(26%2c 26%2c 26%2c 1)'%3e%3c/rect%3e%3cpath d='M19.31 209.2L84.26 246.7L84.26 321.7L19.31 359.2L-45.64 321.7L-45.64 246.7zM19.31 434.2L84.26 471.7L84.26 546.7L19.31 584.2L-45.64 546.7L-45.64 471.7zM149.22 -15.8L214.17 21.7L214.17 96.7L149.22 134.2L84.26 96.7L84.26 21.7zM214.17 546.7L279.13 584.2L279.13 659.2L214.17 696.7L149.22 659.2L149.22 584.2zM279.13 -15.8L344.08 21.7L344.08 96.7L279.13 134.2L214.17 96.7L214.17 21.7zM344.08 321.7L409.03 359.2L409.03 434.2L344.08 471.7L279.13 434.2L279.13 359.2zM344.08 546.7L409.03 584.2L409.03 659.2L344.08 696.7L279.13 659.2L279.13 584.2zM409.03 209.2L473.99 246.7L473.99 321.7L409.03 359.2L344.08 321.7L344.08 246.7zM473.99 546.7L538.94 584.2L538.94 659.2L473.99 696.7L409.03 659.2L409.03 584.2zM538.94 -15.8L603.89 21.7L603.89 96.7L538.94 134.2L473.99 96.7L473.99 21.7zM538.94 434.2L603.89 471.7L603.89 546.7L538.94 584.2L473.99 546.7L473.99 471.7zM863.71 321.7L928.66 359.2L928.66 434.2L863.71 471.7L798.75 434.2L798.75 359.2zM993.62 96.7L1058.57 134.2L1058.57 209.2L993.62 246.7L928.66 209.2L928.66 134.2zM928.66 209.2L993.62 246.7L993.62 321.7L928.66 359.2L863.71 321.7L863.71 246.7zM1058.57 -15.8L1123.52 21.7L1123.52 96.7L1058.57 134.2L993.62 96.7L993.62 21.7zM1188.48 -15.8L1253.43 21.7L1253.43 96.7L1188.48 134.2L1123.52 96.7L1123.52 21.7zM1188.48 209.2L1253.43 246.7L1253.43 321.7L1188.48 359.2L1123.52 321.7L1123.52 246.7zM1253.43 546.7L1318.38 584.2L1318.38 659.2L1253.43 696.7L1188.48 659.2L1188.48 584.2zM1383.34 546.7L1448.29 584.2L1448.29 659.2L1383.34 696.7L1318.38 659.2L1318.38 584.2zM1513.25 96.7L1578.2 134.2L1578.2 209.2L1513.25 246.7L1448.29 209.2L1448.29 134.2zM1448.29 434.2L1513.25 471.7L1513.25 546.7L1448.29 584.2L1383.34 546.7L1383.34 471.7z' stroke='rgba(234%2c 45%2c 46%2c 0.33)' stroke-width='2'%3e%3c/path%3e%3cpath d='M11.81 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM76.76 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM76.76 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM11.81 359.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM-53.14 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM-53.14 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM11.81 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM76.76 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM76.76 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM11.81 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM-53.14 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM-53.14 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM141.72 -15.8 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM206.67 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM206.67 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM141.72 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM76.76 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM76.76 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM206.67 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM271.63 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM271.63 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM206.67 696.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM141.72 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM141.72 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM271.63 -15.8 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM271.63 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM401.53 359.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM401.53 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM271.63 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM271.63 359.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM401.53 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM401.53 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 696.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM401.53 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM336.58 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM531.44 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM531.44 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 696.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM531.44 -15.8 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM596.39 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM596.39 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM531.44 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM531.44 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM596.39 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM596.39 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM466.49 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM856.21 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM921.16 359.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM921.16 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM856.21 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM791.25 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM791.25 359.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM986.12 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1051.07 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1051.07 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM986.12 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM921.16 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM921.16 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM986.12 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM856.21 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1051.07 -15.8 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1116.02 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1116.02 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM986.12 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1180.98 -15.8 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1245.93 21.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1245.93 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1180.98 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1180.98 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1245.93 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1245.93 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1180.98 359.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1116.02 321.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1116.02 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1245.93 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1310.88 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1310.88 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1245.93 696.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1180.98 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1180.98 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1375.84 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1440.79 584.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1440.79 659.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1375.84 696.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1505.75 96.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1570.7 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1570.7 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1505.75 246.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1440.79 209.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1440.79 134.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1440.79 434.2 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1505.75 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1505.75 546.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0zM1375.84 471.7 a7.5 7.5 0 1 0 15 0 a7.5 7.5 0 1 0 -15 0z' fill='rgba(234%2c 45%2c 46%2c 0.33)'%3e%3c/path%3e%3cpath d='M11.29 106.19L54.59 131.19L54.59 181.19L11.29 206.19L-32.01 181.19L-32.01 131.19zM54.59 331.19L97.9 356.19L97.9 406.19L54.59 431.19L11.29 406.19L11.29 356.19zM97.9 -43.81L141.2 -18.81L141.2 31.19L97.9 56.19L54.59 31.19L54.59 -18.81zM97.9 106.19L141.2 131.19L141.2 181.19L97.9 206.19L54.59 181.19L54.59 131.19zM97.9 406.19L141.2 431.19L141.2 481.19L97.9 506.19L54.59 481.19L54.59 431.19zM227.8 181.19L271.11 206.19L271.11 256.19L227.8 281.19L184.5 256.19L184.5 206.19zM184.5 406.19L227.8 431.19L227.8 481.19L184.5 506.19L141.2 481.19L141.2 431.19zM271.11 256.19L314.41 281.19L314.41 331.19L271.11 356.19L227.8 331.19L227.8 281.19zM271.11 406.19L314.41 431.19L314.41 481.19L271.11 506.19L227.8 481.19L227.8 431.19zM401.01 331.19L444.32 356.19L444.32 406.19L401.01 431.19L357.71 406.19L357.71 356.19zM487.62 331.19L530.92 356.19L530.92 406.19L487.62 431.19L444.32 406.19L444.32 356.19zM530.92 256.19L574.22 281.19L574.22 331.19L530.92 356.19L487.62 331.19L487.62 281.19zM530.92 406.19L574.22 431.19L574.22 481.19L530.92 506.19L487.62 481.19L487.62 431.19zM963.95 106.19L1007.25 131.19L1007.25 181.19L963.95 206.19L920.64 181.19L920.64 131.19zM1007.25 181.19L1050.55 206.19L1050.55 256.19L1007.25 281.19L963.95 256.19L963.95 206.19zM1050.55 106.19L1093.85 131.19L1093.85 181.19L1050.55 206.19L1007.25 181.19L1007.25 131.19zM1180.46 181.19L1223.76 206.19L1223.76 256.19L1180.46 281.19L1137.15 256.19L1137.15 206.19zM1180.46 331.19L1223.76 356.19L1223.76 406.19L1180.46 431.19L1137.15 406.19L1137.15 356.19zM1180.46 481.19L1223.76 506.19L1223.76 556.19L1180.46 581.19L1137.15 556.19L1137.15 506.19zM1267.06 331.19L1310.37 356.19L1310.37 406.19L1267.06 431.19L1223.76 406.19L1223.76 356.19zM1396.97 106.19L1440.27 131.19L1440.27 181.19L1396.97 206.19L1353.67 181.19L1353.67 131.19zM1440.27 331.19L1483.58 356.19L1483.58 406.19L1440.27 431.19L1396.97 406.19L1396.97 356.19z' stroke='url(%26quot%3b%23SvgjsLinearGradient1235%26quot%3b)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1234'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='1440' y1='280' x2='0' y2='280' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1235'%3e%3cstop stop-color='rgba(26%2c 26%2c 26%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(234%2c 45%2c 46%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); */
    background-image: url(./Media/bg-ramp1.svg);
    background-image: url(./Media/Artboard\ 4.svg);
    /* background-size: 100%; */
    background-repeat: no-repeat;
    background-position: center;
    /* background-position-y: 100%; */
    /* background-position-x: -15%; */
    background-size: 150%;
    min-height: 100dvh;
    padding: 2rem;
}

#hex-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

#hero .info {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    position: absolute;
    z-index: 1;
}

h1 {
    font-family: "Papaya", sans-serif;
    font-weight: 100;
}

p {
    font-family: "Google Sans", sans-serif;
    color: var(--black);
}

#hero h1 {
    color: var(--light-bg);
    font-size: 6.5vw;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow: hidden;
}

#hero p {
    color: var(--p-on-black);
    font-size: 1.8vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    overflow: hidden;
    margin-top: 1rem;
}

#hero img {
    position: absolute;
    bottom: 7rem;
    right: 22rem;
    z-index: 1;
}

#intro-heading .line .word .char {
    transform: translateY(110%) rotate(5deg);
    opacity: 0;
    display: inline-block;
}

#intro-desc .line .word .char {
    transform: translateY(110%);
    opacity: 0;
    display: inline-block;
}

#work {
    background-color: var(--light-bg);
    padding: 2rem;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    /* justify-content: center; */
    /* align-items: ; */
}

#work .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#work .header #work-paginator {
    display: flex;
    gap: 5px;
}

#work .work-container {
    margin-top: 4rem;
    display: flex;
    transition: .3s ease-in-out;
    flex: 1;
}

#work .work-container .work-piece {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    min-width: 100%;
    opacity: 0;
    transform: scaleX(0);
}

#work .work-container .work-piece.active {
    transform: scaleX(1);
    opacity: 1;
}

#work .work-container .work-piece .info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    height: 100%;
}

#work .work-container .work-piece .primary-btn {
    position: absolute;
    bottom: 0;
    left: 0;
}

#work .work-container .work-piece .info h1 {
    font-family: "Google sans", sans-serif;
}

#work .work-container .work-piece .info .work-heading {
    font-size: 21px;
}

#work .work-container .work-piece .info p {
    color: var(--dark-desc);
}

#work .work-container .work-piece .info .work-sec h1 {
    font-size: 16px;
}

#work .work-container .work-piece .visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

#work .work-container .work-piece .visual img {
    filter: grayscale(1) brightness(10);
    height: 100px;
}

#work .work-container .work-piece .info .work-stack .stack {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#work .work-container .work-piece .info .work-stack img {
    /* width:  48px; */
    height: 48px;
}

#work .work-container .work-piece .visual {
    background-color: var(--black);
}

#work #learnMore {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.4);
}

#work #learnMore.active {
    display: flex;
}

#work #learnMore #container {
    background-color: #0d0d0d;
    color: white;
    width: 85%;
    max-width: 1100px;
    height: 85vh;
    overflow-y: auto;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

/* Modal specific scrollbar */
#work #learnMore #container::-webkit-scrollbar {
    width: 6px;
}

#work #learnMore #container::-webkit-scrollbar-thumb {
    background: var(--primary, #F15A24);
    border: none;
}

#work #learnMore #container #close-btn {
    position: absolute;
    right: 2rem;
    top: 2rem;
}

#work #learnMore #container #close-btn:hover {
    fill: red;
}

#work #learnMore #container .modal-header h1 {
    font-family: "Papaya", sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    color: var(--primary, #F15A24);
    font-weight: 100;
    letter-spacing: 2px;
}

#work #learnMore #container h1:not(.modal-header h1) {
    font-weight: 450;
    font-family: "Google sans", sans-serif;
    font-size: 18px;
    color: #fff;
}

#work #learnMore #container p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
}

#work #learnMore #container .info ul {
    margin-left: 2rem;
    margin-top: 1rem;
}

#work #learnMore #container .info img {
    width: 100%;
    margin: 0 auto;
}

.primary-btn {
    /* background-color: var(--black); */
    color: var(--light-bg);
    /* padding: 10px 25px; */
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-repeat: no-repeat;
    background-image: url(./Media/btn-2.svg);
    /* transition: .2s ease-in-out; */
}

.primary-btn:hover {
    background-image: url(./Media/btn3.svg);
}

.secondary-btn {
    color: var(--light-bg);
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-repeat: no-repeat;
    background-image: url(./Media/btn-s.svg);
    backdrop-filter: brightness(1);
}

.secondary-btn:hover {
    background-image: url(./Media/btn-sh.svg);
}

#about {
    min-height: 100dvh;
    background-color: var(--light-bg);
    background-image: url(Media/about-bg.png);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='540' preserveAspectRatio='none' viewBox='0 0 1920 540'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1053%26quot%3b)' fill='none'%3e%3crect width='1920' height='540' x='0' y='0' fill='rgba(239%2c 239%2c 239%2c 1)'%3e%3c/rect%3e%3cpath d='M280.92 588.68C506.41 584.39 692.32 293.79 1132.2 290.15 1572.09 286.51 1767.57 144.88 1983.49 144.35' stroke='rgba(0%2c 0%2c 0%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1092.43 576.37C1248.68 570.67 1375.82 321.76 1663.57 321.49 1951.32 321.22 2089.14 434.34 2234.71 434.89' stroke='rgba(0%2c 0%2c 0%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M658.34 554.4C850.37 543.53 995.81 194.79 1338.3 194.49 1680.78 194.19 1841.46 386.99 2018.25 388.89' stroke='rgba(0%2c 0%2c 0%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M282.63 644.23C427.32 641.57 554.42 454.93 829.59 454.74 1104.77 454.55 1103.07 522.24 1376.56 522.24 1650.04 522.24 1785.74 454.87 1923.52 454.74' stroke='rgba(0%2c 0%2c 0%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1059.43 540.23C1249.13 506.38 1343.42 35.06 1640.43 33.7 1937.43 32.34 2062.48 287.11 2221.42 292.9' stroke='rgba(0%2c 0%2c 0%2c 0.66)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1053'%3e%3crect width='1920' height='540' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1130%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(239%2c 239%2c 239%2c 1)'%3e%3c/rect%3e%3cpath d='M -440.8873592968339%2c181 C -296.89%2c239.6 -8.89%2c479.4 279.1126407031661%2c474 C 567.11%2c468.6 711.11%2c191.8 999.1126407031661%2c154 C 1287.11%2c116.2 1630.94%2c260.4 1719.112640703166%2c285 C 1807.29%2c309.6 1495.82%2c278.6 1440%2c277' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -875.5773326447663%2c331 C -731.58%2c280.6 -443.58%2c51.8 -155.57733264476633%2c79 C 132.42%2c106.2 276.42%2c434 564.4226673552337%2c467 C 852.42%2c500 1109.31%2c257.8 1284.4226673552337%2c244 C 1459.54%2c230.2 1408.88%2c367.2 1440%2c398' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -142.3879984576496%2c162 C 1.61%2c215 289.61%2c415.2 577.6120015423504%2c427 C 865.61%2c438.8 1009.61%2c203.8 1297.6120015423503%2c221 C 1585.61%2c238.2 1989.13%2c547.8 2017.6120015423503%2c513 C 2046.09%2c478.2 1555.52%2c140.2 1440%2c47' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1243.270080421335%2c427 C -1099.27%2c355.6 -811.27%2c92.6 -523.2700804213351%2c70 C -235.27%2c47.4 -91.27%2c296 196.72991957866486%2c314 C 484.73%2c332 668.08%2c119.8 916.7299195786649%2c160 C 1165.38%2c200.2 1335.35%2c444 1440%2c515' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1130'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1134%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(239%2c 239%2c 239%2c 1)'%3e%3c/rect%3e%3cpath d='M -1313.1262956987757%2c464 C -1169.13%2c413.2 -881.13%2c212.6 -593.1262956987756%2c210 C -305.13%2c207.4 -161.13%2c442.8 126.8737043012244%2c451 C 414.87%2c459.2 584.25%2c245.4 846.8737043012244%2c251 C 1109.5%2c256.6 1321.37%2c433.4 1440%2c479' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -927.1563823615168%2c366 C -783.16%2c300.8 -495.16%2c22.4 -207.15638236151673%2c40 C 80.84%2c57.6 224.84%2c416.8 512.8436176384832%2c454 C 800.84%2c491.2 1047.41%2c233.6 1232.8436176384832%2c226 C 1418.27%2c218.4 1398.57%2c378 1440%2c416' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -554.6993510899676%2c332 C -410.7%2c321.4 -122.7%2c261 165.30064891003238%2c279 C 453.3%2c297 597.3%2c453.8 885.3006489100324%2c422 C 1173.3%2c390.2 1494.36%2c124.4 1605.3006489100324%2c120 C 1716.24%2c115.6 1473.06%2c344 1440%2c400' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -631.5599787469333%2c334 C -487.56%2c316 -199.56%2c228.4 88.44002125306667%2c244 C 376.44%2c259.6 520.44%2c449.6 808.4400212530667%2c412 C 1096.44%2c374.4 1402.13%2c61.6 1528.4400212530668%2c56 C 1654.75%2c50.4 1457.69%2c318.4 1440%2c384' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -452.5320546512873%2c108 C -308.53%2c177.2 -20.53%2c466.2 267.4679453487127%2c454 C 555.47%2c441.8 699.47%2c76.4 987.4679453487126%2c47 C 1275.47%2c17.6 1616.96%2c297.6 1707.4679453487126%2c307 C 1797.97%2c316.4 1493.49%2c136.6 1440%2c94' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -110.6505603136685%2c177 C 33.35%2c198.8 321.35%2c286 609.3494396863315%2c286 C 897.35%2c286 1041.35%2c142.2 1329.3494396863316%2c177 C 1617.35%2c211.8 2027.22%2c485.2 2049.3494396863316%2c460 C 2071.48%2c434.8 1561.87%2c132.8 1440%2c51' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -197.06258541662328%2c186 C -53.06%2c220.4 234.94%2c380.8 522.9374145833767%2c358 C 810.94%2c335.2 954.94%2c78 1242.9374145833767%2c72 C 1530.94%2c66 1923.52%2c324.2 1962.9374145833767%2c328 C 2002.35%2c331.8 1544.59%2c138.4 1440%2c91' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -252.42439826305775%2c426 C -108.42%2c381.4 179.58%2c228.8 467.57560173694225%2c203 C 755.58%2c177.2 899.58%2c315.2 1187.5756017369422%2c297 C 1475.58%2c278.8 1857.09%2c85.2 1907.5756017369422%2c112 C 1958.06%2c138.8 1533.52%2c367.2 1440%2c431' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1416.5421258702813%2c471 C -1272.54%2c428.2 -984.54%2c286.6 -696.5421258702812%2c257 C -408.54%2c227.4 -264.54%2c351.2 23.45787412971879%2c323 C 311.46%2c294.8 460.15%2c120.8 743.4578741297188%2c116 C 1026.77%2c111.2 1300.69%2c262.4 1440%2c299' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -906.5534608982452%2c501 C -762.55%2c446.6 -474.55%2c272.6 -186.55346089824525%2c229 C 101.45%2c185.4 245.45%2c311.2 533.4465391017548%2c283 C 821.45%2c254.8 1072.14%2c86.6 1253.4465391017548%2c88 C 1434.76%2c89.4 1402.69%2c249.6 1440%2c290' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1134'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='450' preserveAspectRatio='none' viewBox='0 0 1440 450'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1159%26quot%3b)' fill='none'%3e%3crect width='1440' height='450' x='0' y='0' fill='rgba(239%2c 239%2c 239%2c 1)'%3e%3c/rect%3e%3cpath d='M -783.137992540717%2c184 C -639.14%2c209.4 -351.14%2c341.2 -63.13799254071701%2c311 C 224.86%2c280.8 368.86%2c30.8 656.862007459283%2c33 C 944.86%2c35.2 1220.23%2c308.8 1376.862007459283%2c322 C 1533.49%2c335.2 1427.37%2c143.6 1440%2c99' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -783.0780841945515%2c170 C -639.08%2c189.8 -351.08%2c290 -63.07808419455146%2c269 C 224.92%2c248 368.92%2c48.6 656.9219158054485%2c65 C 944.92%2c81.4 1220.31%2c335.4 1376.9219158054486%2c351 C 1533.54%2c366.6 1427.38%2c184.6 1440%2c143' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1120.9863426550555%2c45 C -976.99%2c94.4 -688.99%2c297.2 -400.98634265505564%2c292 C -112.99%2c286.8 31.01%2c-8 319.01365734494436%2c19 C 607.01%2c46 814.82%2c425.8 1039.0136573449445%2c427 C 1263.21%2c428.2 1359.8%2c105.4 1440%2c25' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -688.4325525187996%2c361 C -544.43%2c299.8 -256.43%2c42.8 31.56744748120034%2c55 C 319.57%2c67.2 463.57%2c431.2 751.5674474812004%2c422 C 1039.57%2c412.8 1333.88%2c14.2 1471.5674474812004%2c9 C 1609.25%2c3.8 1446.31%2c318.6 1440%2c396' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -282.1975322536934%2c194 C -138.2%2c237.4 149.8%2c419.2 437.8024677463066%2c411 C 725.8%2c402.8 869.8%2c184.6 1157.8024677463065%2c153 C 1445.8%2c121.4 1821.36%2c256 1877.8024677463065%2c253 C 1934.24%2c250 1527.56%2c161 1440%2c138' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1164.7426359637975%2c98 C -1020.74%2c142.2 -732.74%2c324 -444.7426359637974%2c319 C -156.74%2c314 -12.74%2c90.8 275.2573640362026%2c73 C 563.26%2c55.2 762.31%2c211.4 995.2573640362026%2c230 C 1228.21%2c248.6 1351.05%2c178.8 1440%2c166' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1341.0788417565307%2c362 C -1197.08%2c293.2 -909.08%2c44.8 -621.0788417565307%2c18 C -333.08%2c-8.8 -189.08%2c193.4 98.92115824346934%2c228 C 386.92%2c262.6 550.71%2c162 818.9211582434693%2c191 C 1087.14%2c220 1315.78%2c336.6 1440%2c373' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1151.9976985881015%2c306 C -1008%2c271.8 -720%2c110.4 -431.9976985881015%2c135 C -144%2c159.6 0%2c445.6 288.0023014118985%2c429 C 576%2c412.4 777.6%2c80 1008.0023014118985%2c52 C 1238.4%2c24 1353.6%2c241.6 1440%2c289' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -58.85131374559546%2c84 C 85.15%2c144.6 373.15%2c386.4 661.1486862544045%2c387 C 949.15%2c387.6 1093.15%2c92.6 1381.1486862544045%2c87 C 1669.15%2c81.4 2089.38%2c349.6 2101.1486862544043%2c359 C 2112.92%2c368.4 1572.23%2c179 1440%2c134' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -958.263395082441%2c25 C -814.26%2c84.2 -526.26%2c314.6 -238.263395082441%2c321 C 49.74%2c327.4 193.74%2c56 481.736604917559%2c57 C 769.74%2c58 1010.08%2c294 1201.736604917559%2c326 C 1393.39%2c358 1392.35%2c238.8 1440%2c217' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1159'%3e%3crect width='1440' height='450' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='450' preserveAspectRatio='none' viewBox='0 0 1440 450'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1208%26quot%3b)' fill='none'%3e%3crect width='1440' height='450' x='0' y='0' fill='rgba(239%2c 239%2c 239%2c 1)'%3e%3c/rect%3e%3cpath d='M -62.87399826610522%2c94 C 81.13%2c123.6 369.13%2c224.2 657.1260017338948%2c242 C 945.13%2c259.8 1089.13%2c164.2 1377.1260017338948%2c183 C 1665.13%2c201.8 2084.55%2c348.4 2097.1260017338946%2c336 C 2109.7%2c323.6 1571.43%2c164 1440%2c121' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -278.38417859642965%2c139 C -134.38%2c188.2 153.62%2c385.6 441.61582140357035%2c385 C 729.62%2c384.4 873.62%2c132.8 1161.6158214035704%2c136 C 1449.62%2c139.2 1825.94%2c397 1881.6158214035704%2c401 C 1937.29%2c405 1528.32%2c205 1440%2c156' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -1213.1107538449644%2c194 C -1069.11%2c219 -781.11%2c317.4 -493.1107538449644%2c319 C -205.11%2c320.6 -61.11%2c212.4 226.8892461550356%2c202 C 514.89%2c191.6 704.27%2c267.6 946.8892461550356%2c267 C 1189.51%2c266.4 1341.38%2c212.6 1440%2c199' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -283.9969545002724%2c306 C -140%2c280 148%2c174 436.0030454997276%2c176 C 724%2c178 868%2c314.8 1156.0030454997277%2c316 C 1444%2c317.2 1819.2%2c199.6 1876.0030454997277%2c182 C 1932.8%2c164.4 1527.2%2c218.8 1440%2c228' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -755.4605958777302%2c356 C -611.46%2c295.4 -323.46%2c47 -35.46059587773013%2c53 C 252.54%2c59 396.54%2c355 684.5394041222698%2c386 C 972.54%2c417 1253.45%2c218.2 1404.5394041222698%2c208 C 1555.63%2c197.8 1432.91%2c309.6 1440%2c335' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -5.005341044097463%2c68 C 138.99%2c112.4 426.99%2c289.2 714.9946589559025%2c290 C 1002.99%2c290.8 1146.99%2c62.2 1434.9946589559027%2c72 C 1722.99%2c81.8 2153.99%2c328.2 2154.9946589559027%2c339 C 2156%2c349.8 1583%2c168.6 1440%2c126' stroke='rgba(26%2c 26%2c 26%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1208'%3e%3crect width='1440' height='450' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
    background-image: url(./Media/Artboard\ 4.svg);
    /* background-size: contain; */
    background-size: 125%;
    background-position: center;
    /* background-repeat: no-repeat; */
    /* background-position-x: 160%; */
    /* background-position-y: 700%; */
    /* background-position-y: 100%; */
    /* background-position-x: 100%; */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8rem;
}

#about .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#about .info h1 {
    font-size: 3vw;
    font-weight: 600;
    font-family: "Google sans", sans-serif;
}

#about .info p {
    color: var(--p-on-black);
}

#about .stack {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

#about .stack .skill-img-box {
    width: 48px;
    height: 48px;
    position: relative;
}

#about .stack .skill-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#popup {
    background-color: white;
    background-image: url(./Media/menu.svg);
    position: fixed;
    width: 150px;
    /* height: 150px; */
    background-size: cover;
    background-position: start;
    padding: 1rem 1.25rem;
    border-radius: 2px;
    display: none;
    gap: 5px;
}

#popup::after {
    content: "";
    background-image: url(./Media/menu.svg);
    min-width: 150px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    bottom: 0;
    background-position-y: 100%;
    border-radius: 2px;
}

#popup.active {
    display: flex;
    flex-direction: column;
}

#popup .pop-item {
    display: flex;
    gap: 10px;
}

#popup .pop-item.wimgs {
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

#popup .pop-item img {
    height: 20px;
}

#popup .pop-item p {
    text-transform: uppercase;
    font-size: 12px;
}

#contact {
    min-height: 100dvh;
}


.bg-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.shape-1 {
    width: 40vw;
    height: 40vw;
    background: var(--primary);
    top: -10%;
    left: -10%;
}

.shape-2 {
    width: 35vw;
    height: 35vw;
    background: #2a2a2a;
    bottom: -5%;
    right: -5%;
}

.shape-3 {
    width: 25vw;
    height: 25vw;
    background: var(--primary);
    top: 40%;
    right: 15%;
}

.cursor {
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cursor-follower {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.3s ease, background-color 0.3s ease;
}

.cursor-follower.hover {
    transform: scale(2);
    background-color: rgba(241, 90, 36, 0.1);
    border-color: rgba(241, 90, 36, 1);
}

.cursor-follower.focus {
    transform: scale(1.5);
    background-color: white;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--loader-bg);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#preloader .loader-content {
    text-align: center;
}

#loader-logo {
    color: white;
    font-size: 4rem;
    margin-bottom: 2rem;
    font-family: "Papaya", sans-serif;
    letter-spacing: 5px;
}

.loader-bar {
    width: 200px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.loader-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    transform: translateX(-100%);
}

.black {
    background-color: var(--black) !important;
}

#contact {
    background-color: var(--black);
    background-image: url(./Media/Artboard\ 4.svg);
    background-size: 165%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 5rem 18rem;
}

#contact h1 {
    color: white;
}

#contact form {
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#contact form div {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

#contact form #actions {
    display: flex;
    justify-content: end;
    align-items: center;
}

#contact form :where(input, textarea) {
    padding: 10px 15px;
    width: 100%;
    background-color: var(--black);
    border: 2px solid var(--light-bg);
    resize: none;
    outline: 0;
    font-family: "Google sans", sans-serif;
    color: white;
    font-size: 18px;
}

#contact form :where(input, textarea):focus {
    border: 2px solid var(--primary);
    outline-color: var(--primary);
}

#contact form :where(input, textarea):focus {
    color: var(--primary);
}

#main-footer {
    scroll-snap-align: end;
}

/* ── FOOTER ── */
#main-footer {
    padding: 8rem 10% 4rem;
    background: var(--light-bg);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
}

.footer-brand .footer-logo {
    font-family: 'Papaya', sans-serif;
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.footer-tagline {
    font-size: 1.1rem;
    color: var(--dark-desc);
    line-height: 1.6;
    max-width: 300px;
}

.footer-links h4,
.footer-social h4 {
    color: var(--black);
    font-family: "Google Sans", sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    margin-bottom: 2rem;
    font-weight: 600;
    text-transform: uppercase;
}

.links-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.links-grid a {
    color: var(--dark-desc);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    width: fit-content;
}

.links-grid a:hover {
    color: var(--primary);
    transform: translateX(10px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--dark-desc);
    font-size: 0.9rem;
}

.back-to-top {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.back-to-top:hover {
    opacity: 0.7;
}

@media screen and (max-width: 768px) {

    /* ── Hide desktop-only chrome ── */
    .cursor,
    .cursor-follower,
    .bg-elements {
        display: none;
    }

    html {
        cursor: auto;
        scroll-snap-type: none;
        /* snap is jarring on mobile with soft keyboards */
    }

    section {
        scroll-snap-align: unset;
    }

    /* ── HERO ── */
    #hero {
        background-image: url(./Media/mobile-hero.svg);
        background-size: cover;
        background-position: center;
        padding: 0;
    }

    #hero .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #hero img {
        right: 50%;
        bottom: 3rem;
        transform: translateX(50%) !important;
    }

    #hero h1 {
        font-size: 11vw;
        text-wrap: nowrap;
    }

    #hero h1 .line {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #hero p {
        font-size: 3.5vw;
        text-align: center;
    }

    /* ── WORK ── */
    #work {
        padding: 1.5rem 1rem;
        overflow: hidden;
    }

    #work .header h1 {
        font-size: 8vw;
    }

    #work .header {
        gap: 1rem;
    }

    #work .work-container {
        margin-top: 2rem;
    }

    /* Stack the two-column grid into a single column */
    #work .work-container .work-piece {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-bottom: 5rem;
        /* space for the absolute-positioned btn */
    }

    /* Reorder: visual (logo) first on mobile */
    #work .work-container .work-piece .visual {
        order: -1;
        min-height: 160px;
        border-radius: 4px;
    }

    #work .work-container .work-piece .visual img {
        height: 70px;
    }

    #work .work-container .work-piece .info .work-heading {
        font-size: 5vw;
    }

    /* Hide "HOW IT WORKS" on cards — it's visible in the Learn More modal */
    #work .work-container .work-piece .info .work-sec:not(.work-stack) {
        display: none;
    }

    /* Learn More modal — full screen on mobile */
    #work #learnMore {
        margin: 0;
        align-items: flex-end;
    }

    #work #learnMore #container {
        width: 100%;
        height: 90dvh;
        border-radius: 16px 16px 0 0;
        padding: 2rem 1.25rem;
    }

    /* ── ABOUT ── */
    #about {
        background-image: url(./Media/mobile-hero.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        gap: 4rem;
        padding: 3rem 1.5rem;
        min-height: 100dvh;
    }

    #about .info h1 {
        font-size: 8vw;
        text-align: center;
    }

    #about .info p {
        font-size: 3.5vw;
        text-align: center;
    }

    /* Wrap icons to two rows instead of one long row */
    #about .stack {
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        max-width: 100%;
    }

    #about .stack .skill-img-box {
        width: 24px;
        height: 24px;
    }

    /* ── CONTACT ── */
    #contact {
        background-image: url(./Media/mobile-hero.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 3rem 1.25rem;
    }

    #contact h1 {
        font-size: 9vw;
        margin-bottom: 1.5rem;
    }

    /* Name and Email side-by-side → stacked */
    #contact form div {
        grid-template-columns: 1fr;
    }

    #contact form :where(input, textarea) {
        font-size: 16px;
        /* prevents iOS zoom on focus */
    }

    #contact form #actions {
        justify-content: center;
    }

    /* ── FOOTER ── */
    #main-footer {
        padding: 4rem 1.5rem 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .footer-tagline {
        max-width: 100%;
    }

    .links-grid a {
        font-size: 1rem;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        gap: 1.5rem;
        align-items: flex-start;
        text-align: left;
    }

    .back-to-top {
        font-size: 0.8rem;
    }
}
/* -- TOASTER NOTIFICATIONS -- */
#toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    font-family: \"Google Sans\", sans-serif;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.toast.success {
    border-left: 4px solid var(--primary);
}

.toast.error {
    border-left: 4px solid #ff4444;
}

@media screen and (max-width: 768px) {
    #toast-container {
        bottom: 20px;
        right: 20px;
        left: 20px;
    }
    .toast {
        min-width: unset;
    }
}

/* -- SEND BUTTON STYLING -- */
.secondary-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: "Google Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding: 10px 0;
    width: fit-content;
}

.secondary-btn:hover {
    opacity: 0.7;
    transform: translateX(5px);
}

.secondary-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}