@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap');

:root{
    --primary-color: #FFF;
    --secondary-color: #000;
    --tertiary-color: #a7e3d7;
    --quaternary-color: #0f1213;
    --font-family: 'Baskervville', serif;
}


body{
    font-family: var(--font-family);
}

.animate-on-scroll{
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-fade-up.animated{
    animation: fadeUp 0.9s ease forwards;
}

.animate-fade-down.animated{
    opacity: 1;
    transform: translateY(0);
    animation: fadeDown 0.9s ease forwards;
}

.animate-fade-left.animated,
.animate-fade-right.animated{
    animation: fadeSide 0.9s ease forwards;
}

.animate-zoom-in.animated{
    animation: zoomIn 1s ease forwards;
}

.animate-fade-in.animated{
    animation: fadeIn 0.9s ease forwards;
}

.delay-100{
    animation-delay: 0.12s;
}

.delay-200{
    animation-delay: 0.22s;
}

.delay-300{
    animation-delay: 0.32s;
}

.delay-400{
    animation-delay: 0.42s;
}

.delay-500{
    animation-delay: 0.52s;
}

@keyframes fadeUp {
    0%{ opacity: 0; transform: translateY(25px); }
    100%{ opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
    0%{ opacity: 0; transform: translateY(-25px); }
    100%{ opacity: 1; transform: translateY(0); }
}

@keyframes fadeSide {
    0%{ opacity: 0; transform: translateX(-30px); }
    100%{ opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    0%{ opacity: 0; transform: scale(0.96); }
    100%{ opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    0%{ opacity: 0; }
    100%{ opacity: 1; }
}

.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background-color: rgba(14, 117, 114, 0.95);
    color: white;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(1rem);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 50;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-2px);
    background-color: rgba(14, 117, 114, 1);
}

/* slider */
/* Slider */
.slider-track{
    display:flex;
    width:max-content;
    animation:marquee 10s linear infinite;
    gap:30px;
}

.slider-track:hover{
    animation-play-state:paused;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.logo-item{
    min-width:190px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-item img{
    max-width:140px;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:brightness(0) invert(1);
    opacity:.9;
    transition:.3s;
}

.logo-item:hover img{
    opacity:1;
    transform:scale(1.05);
}

/* ---------- Tablet ---------- */
@media (max-width:991px){

    .slider-track{
        gap:20px;
        animation-duration:8s;
    }

    .logo-item{
        min-width:150px;
    }

    .logo-item img{
        max-width:110px;
    }

}

/* ---------- Mobile ---------- */
@media (max-width:767px){

    .slider-track{
        gap:16px;
        animation-duration:7s;
    }

    .logo-item{
        min-width:120px;
    }

    .logo-item img{
        max-width:90px;
    }

}