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

body {
    font-family: 'Manrope', sans-serif;
    background: #f5f5f5;
    color: #1a1a1a;
}

/* =========================
   CONTAINER
========================= */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================
   HEADER
========================= */
header {
    backdrop-filter: blur(10px);
    transition: all .3s ease;
}

    header a {
        transition: all .25s ease;
    }

        header a:hover {
            opacity: 0.7;
        }

/* =========================
   HERO
========================= */
.hero-title {
    animation: fadeUp 1s ease forwards;
}

.hero-subtitle {
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.hero-btn {
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

/* =========================
   IMAGE HOVER
========================= */
.img-hover {
    overflow: hidden;
}

    .img-hover img {
        transition: transform .6s ease;
    }

    .img-hover:hover img {
        transform: scale(1.08);
    }

/* =========================
   BUTTONS
========================= */
.btn-main {
    background: #1f3d36;
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    transition: all .3s ease;
}

    .btn-main:hover {
        background: #2c5a4f;
        transform: translateY(-2px);
    }

/* =========================
   SECTIONS ANIMATION
========================= */
[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: all .8s cubic-bezier(.2,.6,.2,1);
}

.animate {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   FADE ANIMATIONS
========================= */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   GRID FIXES
========================= */
section {
    position: relative;
}

/* =========================
   SCROLL SMOOTH
========================= */
html {
    scroll-behavior: smooth;
}

/* FIXES UNDER TEMPLATE */

body {
    background: #f5f3ee;
}

.hero-title span {
    color: #c96e4a;
}

button, a {
    transition: all .3s ease;
}

#relatedSlider {
    will-change: transform;
    user-select: none;
    pointer-events: auto;
}