*/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    background: #fffaf0;

    color: #2d211b;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

}



/* =====================================================
   HEADER
===================================================== */

.header {

    height: 115px;

    background: #fffaf1;

    display: flex;

    align-items: center;

    padding: 0 4%;

    border-bottom:
        1px solid #ead8b8;

    position: relative;

    z-index: 100;

}



/* LOGO */

.logo-box {

    width: 290px;

    display: flex;

    align-items: center;

}


.logo {

    width: 245px;

    max-height: 110px;

    object-fit: contain;

}



/* NAV */

.navigation {

    display: flex;

    align-items: center;

    gap: 50px;

    margin-left: auto;

    margin-right: 60px;

}


.navigation a {

    color: #30241f;

    text-decoration: none;

    font-size: 21px;

    font-weight: 500;

    position: relative;

    transition: 0.3s;

}


.navigation a:hover,
.navigation a.active {

    color: #971a34;

}


.navigation a.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -9px;

    height: 2px;

    background: #971a34;

}



/* HEADER RIGHT */

.header-right {

    display: flex;

    align-items: center;

    gap: 25px;

}



/* CONTACT */

.founder-contact {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #941a33;

    border-right:
        1px solid #dfcaa5;

    padding-right: 25px;

}


.founder-contact i {

    font-size: 25px;

}


.founder-contact strong {

    display: block;

    font-size: 18px;

}


.founder-contact small {

    display: block;

    font-size: 14px;

    white-space: nowrap;

}



/* ICONS */

.header-icons {

    display: flex;

    align-items: center;

    gap: 23px;

    font-size: 22px;

}


.header-icons i {

    cursor: pointer;

    transition: 0.3s;

}


.header-icons i:hover {

    color: #971a34;

}



.bag {

    position: relative;

}


.bag span {

    position: absolute;

    top: -11px;

    right: -11px;

    width: 19px;

    height: 19px;

    border-radius: 50%;

    background: #971a34;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}



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

.hero {

   min-height: 90vh;
    background: #f8eedf;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    overflow: hidden;

}
.hero-logo {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo img {
    width: 100%;
    max-width: 1250px;
    height: auto;
    display: block;
    object-fit: contain;
}


/* TOP HERO */

.hero-top {

    text-align: center;

    position: relative;

    z-index: 5;

    padding-top: 35px;

    padding-bottom: 25px;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(214,166,87,0.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(214,166,87,0.13),
            transparent 30%
        ),

        #fffaf0;

}



/* WELCOME */

.welcome {

    letter-spacing: 7px;

    color: #a06b1c;

    font-size: 17px;

    font-weight: 600;

}



/* MAIN TITLE */

.hero-top h1 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #941a33;

    font-size: 58px;

    line-height: 1;

    margin: 5px 0 7px;

}



/* GOLD DIVIDER */

.gold-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 4px 0;

}


.gold-divider span {

    width: 75px;

    height: 1px;

    background: #b68738;

}


.gold-divider b {

    color: #b68738;

    font-size: 18px;

}



/* SUBTITLE */

.hero-top h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 500;

    margin-top: 5px;

}



/* DESCRIPTION */

.hero-text {

    font-size: 18px;

    margin: 5px auto 15px;

}



/* SHOP BUTTON */

.shop-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    background: #9a1733;

    color: white;

    text-decoration: none;

    padding: 11px 38px;

    border-radius: 28px;

    font-size: 18px;

    transition: 0.3s;

}


.shop-button:hover {

    background: #701025;

    transform: translateY(-2px);

}



/* =====================================================
   DECORATIONS
===================================================== */

.hero-decoration {

    position: absolute;

    color: #b98228;

    font-size: 95px;

    opacity: 0.55;

    z-index: 2;

}


.left-decoration {

    left: -15px;

    top: 30px;

}


.right-decoration {

    right: -15px;

    top: 30px;

    transform: scaleX(-1);

}



/* =====================================================
   FIVE CATEGORY CARDS
===================================================== */

.category-grid {

    display: grid;

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

    width: 100%;

    background: #f8edda;

}



/* CATEGORY CARD */

.category-card {

    position: relative;

    min-width: 0;

    border-right:
        2px solid #fffaf0;

    background: #fffaf0;

}



/* IMAGE */

.model-image {

    width: 100%;

    height: 500px;

    overflow: hidden;

    background: #e8d6b8;

}


.model-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center top;

    transition: transform 0.5s;

}


.category-card:hover
.model-image img {

    transform: scale(1.04);

}



/* CATEGORY INFO */

.category-info {

    text-align: center;

    min-height: 155px;

    padding: 13px 15px 18px;

    background: #fffaf0;

    position: relative;

}



/* GOLD TOP BORDER */

.category-info::before {

    content: "";

    position: absolute;

    top: 0;

    left: 12%;

    right: 12%;

    height: 1px;

    background: #d3a85c;

}



/* CATEGORY NAME */

.category-info h3 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #92182f;

    font-size: 23px;

    margin-bottom: 3px;

}



/* CATEGORY DESCRIPTION */

.category-info p {

    font-size: 16px;

    line-height: 1.2;

    min-height: 39px;

    color: #5d5047;

}



/* EXPLORE */

.explore-btn {

    margin-top: 9px;

    background: transparent;

    border: 1px solid #b98132;

    color: #8f1730;

    border-radius: 20px;

    padding: 6px 23px;

    font-family: inherit;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s;

}


.explore-btn:hover {

    background: #941a33;

    color: white;

    border-color: #941a33;

}



/* =====================================================
   FEATURES
===================================================== */

.features {

    display: grid;

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

    background: #fffaf0;

    padding: 38px 6%;

    border-top:
        1px solid #e6d3ae;

}



.feature {

    text-align: center;

    border-right:
        1px solid #e1cfad;

    padding: 0 25px;

}


.feature:last-child {

    border-right: none;

}



/* ICON */

.feature-icon {

    width: 55px;

    height: 55px;

    margin: 0 auto 8px;

    border-radius: 50%;

    background: #faecd2;

    color: #795018;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}



.feature h3 {

    font-size: 18px;

    font-weight: 600;

}


.feature p {

    color: #8a7b6b;

    font-size: 15px;

    margin-top: 2px;

}



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

.about {

    text-align: center;

    background: #f8efdf;

    padding: 85px 15%;

}


.section-label {

    color: #a36d1b;

    letter-spacing: 5px;

    font-size: 16px;

    font-weight: 600;

}


.about h2 {

    color: #92182f;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 45px;

    margin: 8px 0;

}


.about-line {

    color: #b78332;

    font-size: 20px;

    margin-bottom: 15px;

}


.about-text {

    max-width: 800px;

    margin: auto;

    font-size: 20px;

    line-height: 1.7;

    color: #5b4d42;

}


.founder-name {

    display: flex;

    flex-direction: column;

    margin-top: 25px;

    color: #92182f;

}


.founder-name strong {

    font-size: 22px;

}


.founder-name span {

    color: #887566;

    font-size: 16px;

}



/* =====================================================
   CONTACT
===================================================== */

.contact {

    text-align: center;

    background: #fffaf0;

    padding: 80px 20px;

}


.contact h2 {

    color: #92182f;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 40px;

    margin: 8px 0 10px;

}


.contact p {

    font-size: 19px;

    color: #65574b;

    margin-bottom: 20px;

}


.contact-button {

    display: inline-block;

    background: #92182f;

    color: white;

    text-decoration: none;

    padding: 11px 35px;

    border-radius: 25px;

    font-size: 18px;

}



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

footer {

    background: #4e1722;

    color: #fff7e9;

    text-align: center;

    padding: 40px 20px;

}


footer h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 31px;

}


footer p {

    font-size: 17px;

    margin-top: 5px;

}


footer .copyright {

    opacity: 0.65;

    margin-top: 18px;

    font-size: 14px;

}



/* =====================================================
   TABLET
===================================================== */

@media(max-width:1200px) {

    .header {

        padding: 0 2%;

    }


    .logo-box {

        width: 210px;

    }


    .logo {

        width: 190px;

    }


    .navigation {

        gap: 25px;

        margin-right: 25px;

    }


    .founder-contact {

        display: none;

    }


    .hero-top h1 {

        font-size: 50px;

    }


    .model-image {

        height: 420px;

    }

}



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

@media(max-width:800px) {


    .header {

        height: auto;

        min-height: 95px;

        flex-wrap: wrap;

        justify-content: center;

        padding: 8px;

    }


    .logo-box {

        width: 100%;

        justify-content: center;

    }


    .logo {

        width: 190px;

    }


    .navigation {

        margin: 5px 0;

        gap: 18px;

    }


    .navigation a {

        font-size: 16px;

    }


    .header-right {

        display: none;

    }



    .hero-top {

        padding: 25px 15px;

    }


    .hero-top h1 {

        font-size: 42px;

    }


    .hero-top h2 {

        font-size: 22px;

    }


    .hero-text {

        font-size: 16px;

    }


    .hero-decoration {

        display: none;

    }



    .category-grid {

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

    }


    .model-image {

        height: 400px;

    }


    .category-info h3 {

        font-size: 20px;

    }


    .category-info p {

        font-size: 15px;

    }


    .features {

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

        gap: 25px;

    }


    .feature {

        border-right: none;

    }


    .about {

        padding: 65px 8%;

    }

}



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

@media(max-width:500px) {


    .navigation {

        gap: 12px;

    }


    .navigation a {

        font-size: 14px;

    }


    .hero-top h1 {

        font-size: 36px;

    }


    .hero-top h2 {

        font-size: 19px;

    }


    .category-grid {

        grid-template-columns: 1fr;

    }


    .model-image {

        height: 480px;

    }


    .features {

        grid-template-columns: 1fr;

    }


    .feature {

        border-bottom:
            1px solid #ead8b8;

        padding-bottom: 20px;

    }


    .feature:last-child {

        border-bottom: none;

    }

}
@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 30px 10px 50px;
    }

    .hero-logo img {
        width: 100%;
        max-width: 650px;
    }
}