:root {

    /* BORDER RADIUS */
    --borderRadius: 25px;
    --borderRadius-md: 10px;
    --borderRadius-rounded: 9999px;

    /* SIZES */
    --buttonsHeight: 45px;

    /* FONT-FAMILIES */
    --fontFamily-primary: "DM Sans", sans-serif;
    --fontFamily-secondary: "Cal Sans", sans-serif;

    /* FONT-SIZES */
    --fontSize-xsm: 11px;
    --fontSize-sm: 16px;
    --fontSize-md: 18px;
    --fontSize-lg: 80px;

    /* FONT STYLES */
    --fontUnderlineThickness: 1.5px;

    /* SPACING */
    --spacing-xsm: 10px;
    --spacing-sm: 30px;
    --spacing-md: 50px;
    --spacing-lg: 150px;

    /* SECTION PADDING */
    --sectionPadding-y-md: 80px;
    --sectionPadding-y-lg: 100px;
}


.reveal {
  --progress: 0;

  opacity: calc(var(--progress));
  transform: translateY(calc((1 - var(--progress)) * 100px)) scale(calc(0.9 + (0.1 * var(--progress))));

  transition: opacity 0.1s linear, transform 0.1s linear;

  will-change: transform, opacity;
}


/* NOISE OVERLAY */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.09;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 900 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* GRID LAYER */
.grid-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    margin-top: -35px;

    background-image:
    linear-gradient(to right, rgba(0,0,0,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.015) 1px, transparent 1px);

    background-size: 100px 100px, 100px 100px;
}

body, html {
    font-family: var(--fontFamily-primary);
    color: var(--primaryColor-dark);

    /* Enable smooth scrolling */
    scroll-behavior: smooth;

    /* Adjust text size for better readability on different devices */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* NAVIGATION MENU */
.navbar-container {
    padding: 10px 0;
    border-bottom: 1px solid var(--borderColor);
    
    background-color: var(--blurredBackgroundColor);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

}
.navbar-link {
    font-family: var(--fontFamily-primary);
    font-weight: 300;
    color: var(--secondaryTextColor-light);
    text-underline-offset: 3px;
    text-decoration-thickness: var(--fontUnderlineThickness);
}
.navbar-link:hover {
    color: var(--primaryColor-light);
    cursor: pointer;
}
.navbar-link.selected {
    font-family: var(--fontFamily-primary);
    font-weight: 400;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: context-menu;
    border-radius: var(--borderRadius-rounded);
    padding: 0 13px;
    margin: 0 -13px;
    height: 30px;
    background-color: var(--secondaryColor-blue);
    color: var(--primaryColor-light)
}

/* MOBILE MENU POPUP */
.mobilePopupMenu-container {
    background-color: var(--primaryColor-dark);
}
.navbarPanel-container {
    padding-right: 5px;
}
.nav-item-mobile {
    font-family: var(--fontFamily-primary);
    font-size: var(--fontSize-sm);
    font-weight: 400;
    text-underline-offset: 3px;
    text-decoration-thickness: var(--fontUnderlineThickness);
    color: var(--secondaryTextColor-light);
    background-color: transparent;
    padding: 0 20px;
    height: var(--buttonsHeight);
    display: flex;
    align-items: center;
    border-radius: var(--borderRadius-rounded);
}
.nav-item-mobile.selected {
    color: var(--primaryColor-light);
    background-color: var(--secondaryColor-blue);
    cursor: context-menu;
}
.nav-item-mobile:hover {
    background-color: var(--fillColor-dark);
    cursor: pointer;
}


/* SECTION CONTAINER */
.section-container {
    border-bottom: 1px solid var(--borderColor);
    scroll-margin-top: var(--buttonsHeight);
}

/* CONTENT TITLES & BODIES */
.section-body {
    font-family: var(--fontFamily-primary);
    font-weight: 300;
    font-style: normal;
    font-size: var(--fontSize-md);
    color: var(--primaryColor-dark);
    break-inside: avoid;
    line-height: 140%;
    padding: 0;
}
.section-body b {
    font-weight: 600;
}
.section-body-link {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    display: inline-flex;
    gap: 4px;
    color: var(--secondaryColor-blue);
}
/* SECTION BODY LINK - ICON */
.section-body-link svg {
    transition: transform 0.2s ease;
    width: 17px;
    color: var(--secondaryColor-blue);
}
.section-body-link:hover {
    text-decoration: underline;
    cursor: pointer;
}
.section-title {
    font-family: var(--fontFamily-secondary);
    font-size: 60px;
    font-weight: 500;
    color: var(--primaryColor-dark);
    line-height: 1;
    letter-spacing: -1px;
    max-width: 900px;
}
/* MOBILE SCREEN */
@media (max-width: 768px) {
    .section-title {
        font-size: 45px;
    }
    .paddingMobileContent {
        padding: 0 15px;
    }
}

.sectionNumbered-title {
    background-color: var(--fillColor-light);
    border-radius: var(--borderRadius-rounded);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: var(--buttonsHeight);
}


/* TABINATION SECTION */
.tabBar-btn {
    font-size: var(--fontSize-sm);
    border-radius: var(--borderRadius-rounded);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    line-height: -2px;
    word-wrap: break-word;
    height: var(--buttonsHeight)
}
.tabBar-btn.selected {
    background-color: var(--primaryColor-dark);
    color: var(--primaryColor-light);
    cursor: context-menu;
    padding: 0 20px;
}
.tabBar-btn.selected:hover {
    background-color: var(--primaryColor-dark);
    color: var(--primaryColor-light);
    cursor: context-menu;
}
.tabBar-btn:hover {
    color: var(--primaryColor-dark);
    background-color: #00000015;
    cursor: pointer;
}
.tab-page { 
    display: none; 
}
.tab-page.active { 
    display: flex; 
}
.page-image {
    height: 250px;
}


/* MATERIAL CONTAINER */
.material-body {
    background-color: var(--fillColor-dark);
    border-radius: 20px;
    border: 1px solid var(--fillColor-dark-borderColor);
    padding: 15px 25px;
    margin: 8px;
    color: var(--secondaryTextColor-light);
    height: 100%;
    font-size: var(--fontSize-sm);
}


/* SWIPE-CONTAINER & SWIPE-CARD */
.swipe-container {
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%
}
.swipe-container::-webkit-scrollbar {
    display: none;
}

.swipe-card {
    scroll-snap-align: center;
    flex-shrink: 0;
}
/* SCROLLVIEW - SCROLL BUTTON */
.scroll-btn {
    background-color: var(--primaryColor-dark);
    color: var(--primaryColor-light);
    border: 1px solid transparent;
    border-radius: var(--borderRadius-rounded);
    padding: 10px;
}
.scroll-btn:hover:not(:disabled) {

}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--secondaryTextColor-light) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--primaryColor-dark) inset !important;
    box-shadow: 0 0 0px 1000px var(--primaryColor-dark) inset !important;
    caret-color: var(--secondaryColor-yellow);
}

/* Reset snap for Desktop so the grid works normally */
@media (min-width: 768px) {
    .swipe-container {
        scroll-snap-type: none;
        overflow-x: visible;
    }
}


/* FOOTER SECTIONS */
.footerContent-container {
    font-size: var(--fontSize-sm);
    font-family: var(--fontFamily-primary);
    font-weight: 300;
}
.footerList-container {
    color: var(--primaryColor-light);
}
/* NORMAL LINK */
.footer-link {
    color: var(--secondaryTextColor-light);
    text-decoration-thickness: var(--fontUnderlineThickness);
    width: min-content;
    text-wrap: nowrap;
}
.footer-link.selected {
    color: var(--primaryColor-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: context-menu;
}
.footer-link:hover {
    color: var(--primaryColor-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}