/* Font Family: Satoshi */
@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./media/font/Satoshi-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

body {
    font-family: 'Satoshi', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Brand Colors */
.black {
    color: #2D2D2D;
}

.white {
    color: #FFFFFF;
}

.grey {
    color: #676767;
}

.primary {
    color: #9D1B42;
}

.stroke {
    color: #E9E9E9;
}

/* Clamp Font Sizes */
/* Viewport Range: 400px - 1700px */

.typo-16 {
    font-size: clamp(12px, 10.77px + 0.308vw, 16px);
}

.typo-18 {
    font-size: clamp(14px, 12.77px + 0.308vw, 18px);
}

.typo-20 {
    font-size: clamp(16px, 14.77px + 0.308vw, 20px);
}

.typo-22 {
    font-size: clamp(18px, 16.77px + 0.308vw, 22px);
}

.typo-24 {
    font-size: clamp(20px, 18.77px + 0.308vw, 24px);
}

.typo-26 {
    font-size: clamp(22px, 20.77px + 0.308vw, 26px);
}

.typo-28 {
    font-size: clamp(24px, 22.77px + 0.308vw, 28px);
}

.typo-34 {
    font-size: clamp(26px, 23.54px + 0.615vw, 34px);
}

.typo-38 {
    font-size: clamp(28px, 24.92px + 0.769vw, 38px);
}

.typo-54 {
    font-size: clamp(36px, 30.46px + 1.385vw, 54px);
}

.typo-56 {
    font-size: clamp(30px, 22px + 2vw, 56px);
}

.typo-62 {
    font-size: clamp(38px, 30.62px + 1.846vw, 62px);
}


.typo-74 {
    font-size: clamp(42px, 32.15px + 2.46vw, 74px);
}

/* Button */
.btn {
    /* Text Size: Typo 18 */
    font-size: clamp(14px, 12.77px + 0.308vw, 18px);
    font-weight: 700;
    /* Bold */

    /* Padding */
    /* Top/Bottom: 10px -> 16px */
    /* Left/Right: 24px -> 32px */
    padding: clamp(10px, 8.15px + 0.462vw, 16px) clamp(24px, 21.54px + 0.615vw, 32px);

    border-radius: 9999px;
    /* Full Round */

    /* Reset helper */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}



.animate-marquee-partners {
    animation: marquee-partners 120s linear infinite;
}

@keyframes marquee-partners {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee-gallery {
    animation: marquee-gallery 120s linear infinite;
}

@keyframes marquee-gallery {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee-gallery-reverse {
    animation: marquee-gallery-reverse 120s linear infinite;
}

@keyframes marquee-gallery-reverse {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Animations */
.animate-on-scroll {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.fade-in {
    opacity: 0 !important;
    transition: opacity 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1 !important;
}

/* Base Delay classes */
[data-delay="100"] {
    transition-delay: 0.1s;
}

[data-delay="200"] {
    transition-delay: 0.2s;
}

[data-delay="300"] {
    transition-delay: 0.3s;
}

[data-delay="400"] {
    transition-delay: 0.4s;
}

/* Global Hover Effects */
.btn {
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
    transform: scale(1.02);
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.slide-in-left {
    opacity: 0 !important;
    transform: translateX(-50px) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.slide-in-left.is-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}