/* =========================================================
   ZEEVAA JEWELLERY
   PREMIUM LUXURY JEWELLERY WEBSITE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --black: #080808;

    --dark: #111111;

    --dark-two: #181818;

    --gold: #c6a15b;

    --gold-light: #e5c985;

    --gold-dark: #98743a;

    --cream: #f7f3eb;

    --white: #ffffff;

    --off-white: #fffdf9;

    --text: #292929;

    --muted: #777777;

    --border:
        rgba(198,161,91,0.25);

    --max-width: 1200px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    background:
        var(--off-white);

    color:
        var(--text);

    line-height:
        1.7;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


.container {

    width:
        min(90%, var(--max-width));

    margin:
        auto;

}


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

.header {

    position:
        absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    border-bottom:
        1px solid
        rgba(255,255,255,0.12);

}


.nav-wrapper {

    min-height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.brand-logo {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

}


.brand-name {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.brand-name span {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:
        var(--gold-light);

    font-size:
        27px;

}


.brand-name small {

    margin-top:
        6px;

    color:
        #d5d5d5;

    font-size:
        8px;

    letter-spacing:
        3px;

}


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

.nav {

    display:
        flex;

    align-items:
        center;

    gap:
        38px;

}


.nav a {

    color:
        #ffffff;

    font-size:
        13px;

    letter-spacing:
        1px;

    position:
        relative;

    transition:
        0.3s;

}


.nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        1px;

    background:
        var(--gold-light);

    transition:
        0.3s;

}


.nav a:hover {

    color:
        var(--gold-light);

}


.nav a:hover::after {

    width:
        100%;

}


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

.nav-toggle {

    display:
        none;

}


.nav-toggle-label {

    display:
        none;

    width:
        32px;

    cursor:
        pointer;

}


.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {

    display:
        block;

    height:
        2px;

    width:
        100%;

    background:
        white;

    position:
        relative;

}


.nav-toggle-label span::before,
.nav-toggle-label span::after {

    content:
        "";

    position:
        absolute;

}


.nav-toggle-label span::before {

    top:
        -8px;

}


.nav-toggle-label span::after {

    top:
        8px;

}



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

.hero {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    color:
        white;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,0.90),
            rgba(0,0,0,0.66),
            rgba(0,0,0,0.30)
        ),

        url("assets/hero_img.jpg")
        center / cover no-repeat;

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 75% 50%,
            rgba(198,161,91,0.20),
            transparent 38%
        );

}


.hero-content {

    position:
        relative;

    padding-top:
        100px;

}


.hero-label {

    display:
        inline-block;

    color:
        var(--gold-light);

    font-size:
        11px;

    letter-spacing:
        3px;

    margin-bottom:
        25px;

}


.hero h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px, 7vw, 88px);

    font-weight:
        normal;

    line-height:
        1.04;

    max-width:
        900px;

}


.hero h1 span {

    color:
        var(--gold-light);

    font-style:
        italic;

}


.hero-description {

    max-width:
        680px;

    margin-top:
        28px;

    color:
        #e2e2e2;

    font-size:
        17px;

}


.hero-buttons {

    display:
        flex;

    gap:
        15px;

    margin-top:
        35px;

}


.btn {

    min-width:
        175px;

    padding:
        14px 28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

    font-size:
        12px;

    transition:
        0.3s;

}


.btn-gold {

    background:
        var(--gold);

    color:
        #111;

}


.btn-gold:hover {

    background:
        var(--gold-light);

    transform:
        translateY(-3px);

}


.btn-outline {

    border:
        1px solid var(--gold);

    color:
        white;

}


.btn-outline:hover {

    background:
        var(--gold);

    color:
        #111;

}


.hero-details {

    display:
        flex;

    gap:
        45px;

    margin-top:
        65px;

}


.hero-details div {

    border-left:
        1px solid var(--gold);

    padding-left:
        18px;

}


.hero-details strong {

    display:
        block;

    font-family:
        Georgia,
        serif;

}


.hero-details span {

    color:
        #aaa;

    font-size:
        11px;

}



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

.section {

    padding:
        110px 0;

}


.section-heading {

    max-width:
        750px;

    margin:
        0 auto 60px;

    text-align:
        center;

}


.section-label {

    display:
        inline-block;

    color:
        var(--gold-dark);

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        3px;

    margin-bottom:
        15px;

}


.section-heading h2 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height:
        1.12;

    font-weight:
        normal;

}


.section-heading h2 span {

    color:
        var(--gold-dark);

    font-style:
        italic;

}


.section-heading p {

    margin-top:
        18px;

    color:
        var(--muted);

}



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

.about-section {

    background:
        var(--off-white);

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        1fr 0.9fr;

    gap:
        80px;

    align-items:
        center;

}


.about-content h2 {

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height:
        1.1;

    font-weight:
        normal;

    margin-bottom:
        25px;

}


.about-content h2 span {

    color:
        var(--gold-dark);

    font-style:
        italic;

}


.about-highlight {

    font-family:
        Georgia,
        serif;

    color:
        var(--gold-dark);

    font-size:
        24px;

    margin-bottom:
        15px;

}


.about-content p:not(.about-highlight) {

    color:
        #666;

    margin-bottom:
        17px;

}


.signature {

    border-top:
        1px solid #ddd;

    padding-top:
        20px;

    margin-top:
        30px;

}


.signature strong {

    display:
        block;

    font-family:
        Georgia,
        serif;

    font-size:
        24px;

}


.signature span {

    color:
        var(--gold-dark);

    font-size:
        10px;

    letter-spacing:
        2px;

}


.about-image {

    position:
        relative;

}


.about-image img {

    width:
        100%;

    height:
        600px;

    object-fit:
        cover;

}


.about-badge {

    position:
        absolute;

    left:
        -25px;

    bottom:
        25px;

    background:
        var(--black);

    color:
        white;

    padding:
        20px 25px;

    min-width:
        200px;

    border-left:
        3px solid var(--gold);

}


.about-badge strong {

    display:
        block;

    font-family:
        Georgia,
        serif;

    color:
        var(--gold-light);

    font-size:
        23px;

}


.about-badge span {

    color:
        #aaa;

    font-size:
        10px;

    letter-spacing:
        2px;

}



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

.collection-intro {

    background:
        var(--cream);

}


.collection-categories {

    display:
        grid;

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

    gap:
        20px;

}


.category-card {

    background:
        white;

    padding:
        40px 28px;

    text-align:
        center;

    border-bottom:
        2px solid transparent;

    transition:
        0.35s;

}


.category-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--gold);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.08);

}


.category-icon {

    width:
        58px;

    height:
        58px;

    border:
        1px solid var(--border);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 20px;

    color:
        var(--gold-dark);

    font-size:
        20px;

}


.category-card h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        21px;

    margin-bottom:
        12px;

}


.category-card p {

    color:
        var(--muted);

    font-size:
        14px;

}



/* =========================================================
   PRODUCT SECTIONS
========================================================= */

.product-section {

    padding:
        105px 0;

    background:
        var(--off-white);

}


.soft-section {

    background:
        var(--cream);

}


.dark-section {

    background:
        var(--dark);

    color:
        white;

}


.dark-heading h2 {

    color:
        white;

}


.dark-heading p {

    color:
        #999;

}


.dark-heading .section-label {

    color:
        var(--gold-light);

}


.product-grid {

    display:
        grid;

    gap:
        20px;

}


.six-grid {

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

}


.three-grid {

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

}


.product-card {

    position:
        relative;

    overflow:
        hidden;

    background:
        #111;

}


.product-card img {

    width:
        100%;

    height:
        430px;

    object-fit:
        cover;

    transition:
        0.7s;

}


.product-card:hover img {

    transform:
        scale(1.06);

}


.product-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            transparent 50%,
            rgba(0,0,0,0.88)
        );

    pointer-events:
        none;

}


.product-info {

    position:
        absolute;

    left:
        25px;

    bottom:
        23px;

    z-index:
        2;

}


.product-info span,
.light-product-info span {

    color:
        var(--gold-light);

    font-size:
        9px;

    letter-spacing:
        2px;

}


.product-info h3,
.light-product-info h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        23px;

    font-weight:
        normal;

    margin-top:
        5px;

}


.light-card {

    background:
        white;

}


.light-card::after {

    display:
        none;

}


.light-product-info {

    padding:
        20px 22px 25px;

}


.light-product-info h3 {

    color:
        #222;

}


.light-product-info span {

    color:
        var(--gold-dark);

}



/* =========================================================
   QUOTE
========================================================= */

.quote-section {

    padding:
        105px 0;

    background:
        var(--black);

    color:
        white;

    text-align:
        center;

}


.quote-symbol {

    font-family:
        Georgia,
        serif;

    font-size:
        85px;

    color:
        var(--gold);

    line-height:
        0.5;

}


.quote-section p {

    max-width:
        850px;

    margin:
        25px auto;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(28px, 4vw, 48px);

    font-style:
        italic;

    line-height:
        1.2;

}


.quote-line {

    width:
        70px;

    height:
        1px;

    background:
        var(--gold);

    margin:
        25px auto;

}


.quote-section small {

    color:
        var(--gold-light);

    letter-spacing:
        3px;

}


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

.contact-section {

    background:
        var(--cream);

}


.contact-grid {

    display:
        grid;

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

    gap:
        15px;

}


.contact-card {

    background:
        white;

    padding:
        35px 22px;

    text-align:
        center;

    border-top:
        2px solid var(--gold);

}


.contact-icon {

    width:
        55px;

    height:
        55px;

    border-radius:
        50%;

    background:
        #f5efe2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 18px;

    color:
        var(--gold-dark);

    font-size:
        19px;

}


.contact-icon.whatsapp {

    color:
        #25d366;

}


.contact-icon.instagram {

    color:
        #c13584;

}


.contact-icon.facebook {

    color:
        #1877f2;

}


.contact-card h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    margin-bottom:
        12px;

}


.contact-card p {

    color:
        var(--muted);

    font-size:
        13px;

    min-height:
        95px;

}


.contact-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        bold;

    transition:
        0.3s;

}


.contact-button:hover {

    color:
        #111;

}


.coming-soon {

    color:
        #999;

    font-size:
        11px;

    letter-spacing:
        1px;

}



/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding:
        110px 0;

    background:

        linear-gradient(
            rgba(0,0,0,0.87),
            rgba(0,0,0,0.87)
        ),

        url("assets/necklace-2.jpg")
        center / cover no-repeat;

    text-align:
        center;

    color:
        white;

}


.final-cta > .container > span {

    color:
        var(--gold-light);

    font-size:
        10px;

    letter-spacing:
        2px;

}


.final-cta h2 {

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px, 5vw, 64px);

    font-weight:
        normal;

    line-height:
        1.12;

    margin:
        20px 0 35px;

}



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

.footer {

    background:
        #070707;

    color:
        white;

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap:
        60px;

    padding:
        70px 0;

}


.footer-brand img {

    width:
        65px;

    height:
        65px;

    object-fit:
        contain;

    margin-bottom:
        15px;

}


.footer-brand h3 {

    font-family:
        Georgia,
        serif;

    color:
        var(--gold-light);

    font-size:
        25px;

    font-weight:
        normal;

}


.footer-brand p {

    color:
        #888;

    font-size:
        12px;

    letter-spacing:
        1px;

}


.footer-brand .footer-special {

    color:
        var(--gold-dark);

    margin-top:
        8px;

}
.company-ownership {
    font-size: 13px;
    line-height: 1.6;
    color: #999;
    margin-top: 15px;
    text-decoration: underline;
}


.footer h4 {

    font-family:
        Georgia,
        serif;

    color:
        var(--gold-light);

    font-size:
        18px;

    margin-bottom:
        20px;

}


.footer-links a {

    display:
        block;

    color:
        #aaa;

    font-size:
        14px;

    margin-bottom:
        8px;

    transition:
        0.3s;

}


.footer-links a:hover {

    color:
        var(--gold-light);

}


.footer-contact p {

    color:
        #aaa;

    font-size:
        14px;

    margin-bottom:
        8px;

}


.footer-contact a {

    display:
        inline-flex;

    gap:
        8px;

    align-items:
        center;

    margin-top:
        8px;

    color:
        var(--gold-light);

}


.footer-bottom {

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    text-align:
        center;

    padding:
        20px;

    color:
        #666;

    font-size:
        11px;

}



/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    width:
        58px;

    height:
        58px;

    border-radius:
        50%;

    background:
        #25d366;

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        28px;

    z-index:
        999;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.25);

    transition:
        0.3s;

}


.floating-whatsapp:hover {

    transform:
        scale(1.1);

}



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

@media (max-width: 1050px) {


    .collection-categories {

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

    }


    .contact-grid {

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

    }


    .about-grid {

        gap:
            45px;

    }


}



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

@media (max-width: 800px) {


    .nav-toggle-label {

        display:
            block;

    }


    .nav {

        display:
            none;

        position:
            absolute;

        top:
            92px;

        left:
            0;

        width:
            100%;

        padding:
            25px;

        background:
            rgba(8,8,8,0.98);

        flex-direction:
            column;

        gap:
            20px;

        border-top:
            1px solid var(--border);

    }


    .nav-toggle:checked ~ .nav {

        display:
            flex;

    }


    .about-grid {

        grid-template-columns:
            1fr;

    }


    .about-image {

        margin-top:
            20px;

    }


    .about-image img {

        height:
            500px;

    }


    .about-badge {

        left:
            15px;

    }


    .six-grid {

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

    }


    .three-grid {

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

    }


    .contact-grid {

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

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }

}



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

@media (max-width: 550px) {


    .container {

        width:
            90%;

    }


    .brand-name span {

        font-size:
            22px;

    }


    .brand-name small {

        font-size:
            7px;

    }


    .hero {

        min-height:
            820px;

    }


    .hero-content {

        padding-top:
            120px;

    }


    .hero h1 {

        font-size:
            44px;

    }


    .hero-description {

        font-size:
            14px;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .hero-details {

        display:
            none;

    }


    .section {

        padding:
            75px 0;

    }


    .section-heading {

        margin-bottom:
            40px;

    }


    .section-heading h2 {

        font-size:
            39px;

    }


    .collection-categories {

        grid-template-columns:
            1fr;

    }


    .six-grid,
    .three-grid {

        grid-template-columns:
            1fr;

    }


    .product-card img {

        height:
            430px;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

    }


    .gallery-grid img {

        height:
            380px;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .contact-card p {

        min-height:
            auto;

        margin-bottom:
            15px;

    }


    .final-cta {

        padding:
            80px 0;

    }


    .final-cta h2 {

        font-size:
            40px;

    }


    .floating-whatsapp {

        width:
            52px;

        height:
            52px;

        right:
            15px;

        bottom:
            15px;

        font-size:
            25px;

    }

}