@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-ivory: #F7F2E9;
    --color-beige: #EDE3D5;
    --color-brown: #7B5B48;
    --color-rose: #C99F96;
    --color-olive: #8B9275;
    --color-dark: #39332E;
    --color-white: #FFFDF9;

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "DM Sans", sans-serif;
}


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

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background-color: var(--color-ivory);

    color: var(--color-dark);

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

    font-size: 16px;
}


h1,
h2,
h3 {
    font-family: var(--font-heading);

    font-weight: 500;
}


a {
    text-decoration: none;
}


/* ==================================================
   NAVBAR
================================================== */

.navbar {
    padding: 25px 0;

    background-color: var(--color-ivory);
}


.navbar-brand {
    color: var(--color-dark);

    font-family: var(--font-heading);

    font-size: 2rem;

    font-weight: 600;

    letter-spacing: -0.5px;
}


.navbar-brand span,
.footer-logo span {
    color: var(--color-brown);
}


.nav-link {
    color: var(--color-dark);

    margin-left: 25px;

    font-size: 0.9rem;

    letter-spacing: 0.5px;
}


.nav-link:hover {
    color: var(--color-brown);
}


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

.hero {
    padding: 90px 0 120px;
}


.hero-eyebrow,
.eyebrow {
    color: var(--color-brown);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 0.72rem;

    font-weight: 600;

    margin-bottom: 18px;
}


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

    line-height: 0.85;

    margin-bottom: 35px;

    letter-spacing: -2px;
}


.hero h1 span {
    color: var(--color-brown);

    font-style: italic;
}


.hero-text {
    max-width: 500px;

    font-size: 1rem;

    line-height: 1.8;

    margin-bottom: 35px;
}


.hero-image {
    min-height: 600px;

    background-color: var(--color-beige);

    border-radius: 250px 250px 20px 20px;
}


/* ==================================================
   BUTTONS
================================================== */

.btn-primary {
    background-color: var(--color-brown);

    border-color: var(--color-brown);

    color: var(--color-white);

    padding: 13px 28px;

    border-radius: 50px;

    font-size: 0.85rem;

    letter-spacing: 0.3px;
}


.btn-primary:hover {
    background-color: var(--color-dark);

    border-color: var(--color-dark);

    color: var(--color-white);
}


.btn-outline-primary {
    color: var(--color-brown);

    border-color: var(--color-brown);

    padding: 12px 27px;

    border-radius: 50px;

    font-size: 0.85rem;
}


.btn-outline-primary:hover {
    background-color: var(--color-brown);

    border-color: var(--color-brown);

    color: var(--color-white);
}


/* ==================================================
   GENERAL SECTIONS
================================================== */

.categories,
.portfolio,
.about,
.shop,
.cafe {
    padding: 120px 0;
}


.section-heading {
    margin-bottom: 55px;
}


.section-heading h2,
.about h2,
.shop h2,
.cafe h2 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);

    line-height: 1;

    letter-spacing: -1px;
}


.section-intro {
    max-width: 550px;

    line-height: 1.8;

    margin-top: 20px;
}


/* ==================================================
   CATEGORIES
================================================== */

.category-card {
    padding: 45px 40px;

    background-color: var(--color-white);

    border-radius: 20px;

    height: 100%;

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


.category-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(57, 51, 46, 0.08);
}


.category-icon {
    color: var(--color-rose);

    font-family: var(--font-heading);

    font-size: 1.3rem;

    margin-bottom: 30px;
}


.category-card h3 {
    font-size: 2rem;

    margin-bottom: 15px;
}


.category-card p {
    line-height: 1.8;

    margin-bottom: 0;
}


/* ==================================================
   PORTFOLIO
================================================== */

.portfolio {
    background-color: var(--color-white);
}


.portfolio-item {
    overflow: hidden;

    border-radius: 15px;

    background-color: var(--color-beige);

    aspect-ratio: 1 / 1;
}


.portfolio-item img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.portfolio-item:hover img {
    transform: scale(1.04);
}


/* ==================================================
   ABOUT
================================================== */

.about-image {
    min-height: 550px;

    background-color: var(--color-beige);

    border-radius: 20px;
}


.about p {
    line-height: 1.8;
}


.about h2 {
    margin-bottom: 30px;
}


/* ==================================================
   SHOP
================================================== */

.shop {
    background-color: var(--color-olive);

    color: var(--color-white);
}


.shop .eyebrow {
    color: var(--color-white);
}


.shop h2 {
    margin-bottom: 25px;
}


.shop p {
    max-width: 600px;

    line-height: 1.8;
}


.shop .btn-primary {
    background-color: var(--color-white);

    border-color: var(--color-white);

    color: var(--color-dark);
}


.shop .btn-primary:hover {
    background-color: var(--color-dark);

    border-color: var(--color-dark);

    color: var(--color-white);
}


/* ==================================================
   CAFE
================================================== */

.cafe {
    background-color: var(--color-beige);
}


.cafe h2 {
    margin-bottom: 30px;
}


.cafe p {
    line-height: 1.8;
}


.cafe-note {
    color: var(--color-brown);

    margin-top: 35px;
}


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

.footer {
    padding: 45px 0;

    background-color: var(--color-dark);

    color: var(--color-white);
}


.footer-logo {
    font-family: var(--font-heading);

    font-size: 1.8rem;

    font-weight: 600;
}


.footer a {
    color: var(--color-white);

    font-size: 0.85rem;
}


.footer a:hover {
    color: var(--color-rose);
}


.footer-separator {
    margin: 0 10px;

    color: var(--color-rose);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 991px) {

    .navbar {
        padding: 18px 0;
    }


    .nav-link {
        margin-left: 0;

        padding: 10px 0;
    }


    .hero {
        padding: 60px 0 80px;
    }


    .hero-image {
        min-height: 450px;

        margin-top: 50px;
    }


    .categories,
    .portfolio,
    .about,
    .shop,
    .cafe {
        padding: 80px 0;
    }

}


@media (max-width: 575px) {

    .hero h1 {
        font-size: 4rem;
    }


    .hero-image {
        min-height: 350px;
    }


    .category-card {
        padding: 35px 30px;
    }


    .about-image {
        min-height: 350px;

        margin-bottom: 45px;
    }

}