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


/* =====================================================
   GLOBAL
===================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: -500px;
}

#home,
#products,
#offers,
#contact {
    scroll-margin-top: 50px;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #161616;

    background: #f8f5ef;

    line-height: 1.6;
}


/* =====================================================
   NAVIGATION
===================================================== */

.navbar {
    position: sticky;

    top: 0;

    z-index: 1000;

    min-height: 72px;

    padding: 16px 7%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(17, 17, 17, 0.97);

    color: white;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.15);
}


.brand {
    font-size: 1.65rem;

    font-weight: 900;

    letter-spacing: -1px;
}


.brand span {
    color: #f5c542;
}


nav {
    display: flex;

    align-items: center;
}


nav a {
    color: white;

    text-decoration: none;

    margin-left: 28px;

    font-size: 0.9rem;

    font-weight: bold;

    position: relative;

    transition: 0.3s;
}


nav a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: #f5c542;

    transition: 0.3s;
}


nav a:hover {
    color: #f5c542;
}


nav a:hover::after {
    width: 100%;
}


/* =====================================================
   HERO
===================================================== */

.hero {
    min-height: 590px;

    padding:
        80px 7%;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 50px;

    align-items: center;

    background:
        linear-gradient(
            120deg,
            #f7e9c8,
            #f8f5ef
        );

    overflow: hidden;
}


.hero-content {
    animation:
        fadeUp 0.8s ease;
}


.label {
    display: inline-block;

    font-size: 0.72rem;

    letter-spacing: 2px;

    font-weight: 800;

    color: #7b5315;

    padding:
        7px 12px;

    border:
        1px solid #c9a65a;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.45);
}


.hero h1 {
    font-size:
        clamp(3.2rem, 7vw, 6.5rem);

    line-height: 0.9;

    margin:
        22px 0;

    letter-spacing: -4px;

    text-shadow:
        4px 4px 0 white;
}


.hero h1 span {
    display: block;

    color: #b7791f;
}


.hero-description {
    font-size: 1.08rem;

    max-width: 520px;

    color: #4a4a4a;

    margin-bottom: 22px;
}


.btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: #111;

    color: white;

    padding:
        14px 23px;

    text-decoration: none;

    border-radius: 30px;

    font-weight: bold;

    transition:
        transform 0.3s,
        background 0.3s;
}


.btn span {
    font-size: 1.2rem;

    transition: 0.3s;
}


.btn:hover {
    background: #b7791f;

    transform:
        translateY(-3px);
}


.btn:hover span {
    transform:
        translateX(5px);
}


/* =====================================================
   HERO VISUAL
===================================================== */

.hero-visual {
    position: relative;

    display: grid;

    place-items: center;

    min-height: 390px;
}


.fashion-circle {
    width: min(360px, 80vw);

    aspect-ratio: 1;

    border:
        12px solid #111;

    border-radius: 50%;

    display: grid;

    place-items: center;

    transform: rotate(-8deg);

    animation:
        float 4s ease-in-out infinite;

    background:
        radial-gradient(
            circle,
            #f5c542 0 25%,
            #e3b535 26% 45%,
            #f8e5ad 46% 100%
        );

    box-shadow:
        18px 18px 0 #111;
}


.circle-content {
    display: flex;

    flex-direction: column;

    align-items: center;

    transform: rotate(8deg);

    text-align: center;
}


.circle-content small {
    letter-spacing: 4px;

    font-size: 0.7rem;

    font-weight: bold;
}


.circle-content strong {
    font-size:
        clamp(2rem, 5vw, 4rem);

    line-height: 1;

    letter-spacing: 3px;

    margin: 10px 0;
}


.floating-tag {
    position: absolute;

    right: 2%;

    bottom: 15%;

    background: #111;

    color: white;

    padding:
        14px 18px;

    border-radius: 10px;

    font-weight: 900;

    font-size: 0.75rem;

    line-height: 1.2;

    letter-spacing: 1px;

    transform: rotate(8deg);

    box-shadow:
        6px 6px 0 #f5c542;
}


/* =====================================================
   SECTION
===================================================== */

.section {
    padding:
        85px 7%;

    scroll-margin-top: 80px;
}


.section-heading {
    text-align: center;

    max-width: 700px;

    margin:
        0 auto 45px;
}


.section-label,
.offer-label {
    color: #b7791f;

    font-size: 0.75rem;

    letter-spacing: 3px;

    font-weight: 900;

    margin-bottom: 6px;
}


.section h2 {
    font-size:
        clamp(2rem, 5vw, 3rem);

    margin-bottom: 8px;

    letter-spacing: -1px;
}


.section-intro {
    color: #626262;

    max-width: 650px;

    margin: auto;
}


/* =====================================================
   PRODUCTS
===================================================== */

.products {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 24px;
}


.product {
    background: white;

    border:
        2px solid #111;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        7px 7px 0 #111;

    transition:
        transform 0.3s,
        box-shadow 0.3s;
}


.product:hover {
    transform:
        translateY(-9px);

    box-shadow:
        11px 11px 0 #111;
}


.product-image {
    height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: white;

    position: relative;

    overflow: hidden;
}


.product-image::before {
    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    border-radius: 50%;

    border:
        2px solid
        rgba(255, 255, 255, 0.3);

    transform:
        rotate(25deg);
}


.product-image span {
    font-size: 1.7rem;

    font-weight: 900;

    letter-spacing: 3px;

    z-index: 1;
}


.product-image small {
    margin-top: 5px;

    letter-spacing: 2px;

    z-index: 1;

    opacity: 0.8;
}


.tshirt {
    background:
        linear-gradient(
            135deg,
            #161616,
            #555
        );
}


.denim {
    background:
        linear-gradient(
            135deg,
            #1e3a5f,
            #4c78a8
        );
}


.hoodie {
    background:
        linear-gradient(
            135deg,
            #4b3a57,
            #9a7aaa
        );
}


.shoes {
    background:
        linear-gradient(
            135deg,
            #7b5315,
            #d49a31
        );
}


.product-content {
    padding: 20px;
}


.product-category {
    font-size: 0.68rem;

    letter-spacing: 1.5px;

    color: #9a6b20;

    font-weight: bold;

    margin-bottom: 5px;
}


.product h3 {
    font-size: 1.05rem;

    margin-bottom: 6px;
}


.product-content > p:not(.product-category) {
    color: #686868;

    font-size: 0.9rem;
}


.product-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 18px;
}


.product strong {
    font-size: 1.25rem;

    color: #b7791f;
}


.arrow {
    width: 35px;

    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #111;

    color: white;

    transition: 0.3s;
}


.product:hover .arrow {
    background: #f5c542;

    color: #111;

    transform:
        translateX(4px);
}


/* =====================================================
   OFFER
===================================================== */

.offer {
    margin:
        0 7% 80px;

    padding:
        45px 55px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    border:
        3px dashed #111;

    border-radius: 18px;

    background: #f5c542;

    position: relative;

    overflow: hidden;

    scroll-margin-top: 80px;

    animation:
        pulse 3s infinite;
}


.offer h2 {
    font-size:
        clamp(1.8rem, 4vw, 2.8rem);

    margin:
        5px 0;
}


.offer p {
    font-size: 1.05rem;
}


.offer strong {
    font-size: 1.3rem;
}


.offer-badge {
    width: 110px;

    height: 110px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #111;

    color: #f5c542;

    display: grid;

    place-items: center;

    align-content: center;

    font-size: 2.1rem;

    font-weight: 900;

    line-height: 0.8;

    transform: rotate(8deg);

    box-shadow:
        8px 8px 0 white;
}


.offer-badge small {
    font-size: 0.7rem;

    letter-spacing: 2px;
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    text-align: center;

    background: #111;

    color: white;

    padding:
        38px 20px;

    scroll-margin-top: 80px;
}


.footer-brand {
    font-size: 1.5rem;

    font-weight: 900;
}


.footer-brand span {
    color: #f5c542;
}


footer p {
    color: #c7c7c7;

    margin:
        5px 0 10px;
}


footer small {
    color: #777;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes float {

    0%,
    100% {
        transform:
            rotate(-8deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-8deg)
            translateY(-14px);
    }

}


@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

}


@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .products {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .hero {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .hero-description {
        margin-left: auto;

        margin-right: auto;
    }


    .hero-visual {
        min-height: 330px;
    }

}


@media (max-width: 650px) {

    .navbar {
        padding:
            14px 5%;
    }


    nav a {
        margin-left: 12px;

        font-size: 0.75rem;
    }


    .brand {
        font-size: 1.3rem;
    }


    .hero {
        padding:
            60px 5%;
    }


    .hero h1 {
        letter-spacing: -2px;
    }


    .section {
        padding:
            65px 5%;
    }


    .products {
        grid-template-columns: 1fr;
    }


    .offer {
        margin:
            0 5% 60px;

        padding:
            35px 25px;

        flex-direction: column;

        text-align: center;
    }


    .floating-tag {
        right: 0;
    }

}


@media (max-width: 450px) {

    nav {
        display: none;
    }


    .hero-visual {
        min-height: 270px;
    }


    .fashion-circle {
        width: 240px;

        border-width: 8px;

        box-shadow:
            12px 12px 0 #111;
    }


    .circle-content strong {
        font-size: 2rem;
    }


    .floating-tag {
        font-size: 0.65rem;

        padding:
            10px 12px;
    }

}