:root { 
    --dark-teal: #0A373B; 
    --header-teal:  #0A373B;
    --header-overlay: rgba(123, 107, 105, 0.49); 
 
    --pink: #EC9E96; 
    --cream: #FAF5EE; 
    --light-pink: #FFB9B3; 
 
    --text-muted: rgba(44, 44, 44, 0.67); 
    --text-dark: #2C2C2C; 
    --white: #FFFFFF; 
 
    --font-inter: 'Inter', sans-serif; 
    --font-imprima: 'Imprima', sans-serif; 
    --font-hurricane: 'Hurricane', cursive; 
    --font-almarai: 'Almarai', sans-serif; 
    --font-hand: 'Caveat', cursive; 
} 
 
 
/* ===================================================== 
   RESET 
===================================================== */ 
 
*, 
*::before, 
*::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
 
html { 
    scroll-behavior: smooth; 
} 
 
body { 
    width: 100%; 
    min-height: 100vh; 
    background: var(--dark-teal); 
    font-family: var(--font-inter); 
    color: var(--pink); 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
} 
 
a { 
    color: inherit; 
    text-decoration: none; 
} 
 
button { 
    font-family: inherit; 
    border: none; 
    background: none; 
    cursor: pointer; 
} 
 
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
} 
 
 
/* ===================================================== 
   PAGE 
===================================================== */ 
 
.page { 
    position: relative; 
    width: 100%; 
    max-width: 1440px; 
    margin: 0 auto; 
    background: var(--dark-teal); 
    overflow: hidden; 
} 
 
 
/* ===================================================== 
   HEADER 
===================================================== */ 
 
.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 110px; 
 
    background: 
        linear-gradient( 
            to bottom, 
            var(--header-teal) 0px, 
            var(--header-teal) 55px, 
            var(--header-overlay) 55px, 
            var(--header-overlay) 110px 
        ); 
 
    z-index: 100; 
} 
 
 
/* Logo */ 
 
.header-logo { 
    position: absolute; 
    left: 24px; 
    top: 15px; 
 
    width: 80px; 
    height: 80px; 
 
    z-index: 110; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    transition: transform .25s ease; 
} 
 
.header-logo:hover { 
    transform: scale(1.02); 
} 
 
.header-logo img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
} 
 
 
/* Navigation */ 
 
.navigation { 
    position: absolute; 
 
    left: 337px; 
    top: 42px; 
 
    display: flex; 
    align-items: center; 
 
    gap: 18px; 
 
    z-index: 110; 
 
    transform: translateY(25px); 
} 
 
.nav-link { 
    font-family: var(--font-inter); 
    font-weight: 400; 
    font-size: 18px; 
    line-height: 24px; 
 
    color: var(--pink); 
 
    display: inline-flex; 
    align-items: center; 
 
    gap: 6px; 
 
    white-space: nowrap; 
} 
 
.nav-link:hover, 
.nav-link.active { 
    color: var(--cream); 
} 
 
.nav-arrow { 
    font-size: 14px; 
 
    transform: translateY(-1px); 
 
    transition: transform .2s ease; 
} 
 
.nav-has-dropdown:hover .nav-arrow { 
    transform: translateY(1px); 
} 
 
.nav-dot { 
    width: 8px; 
    height: 8px; 
 
    border-radius: 50%; 
 
    background: var(--pink); 
 
    flex-shrink: 0; 
 
    display: inline-block; 
} 
 
 
/* Header Icons */ 
 
.header-icons { 
    position: absolute; 
 
    right: 40px; 
    top: 38px; 
 
    display: flex; 
    align-items: center; 
 
    gap: 20px; 
 
    z-index: 110; 
 
    transform: translateY(25px); 
} 
 
.header-icon-btn { 
    width: 32px; 
    height: 32px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    color: var(--pink); 
 
    font-size: 20px; 
 
    transition: 
        color .2s ease, 
        transform .2s ease; 
} 
 
.header-icon-btn:hover { 
    color: var(--cream); 
    transform: translateY(-2px); 
} 
 
 
/* ===================================================== 
   RINGS HERO 
===================================================== */ 
 
.rings-hero { 
    position: relative; 
 
    width: 100%; 
    min-height: 360px; 
 
    padding-top: 110px; 
 
    background: var(--dark-teal); 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    text-align: center; 
} 
 
 
/* Decorative circles */ 
 
.rings-hero::before { 
    content: ""; 
 
    position: absolute; 
 
    width: 300px; 
    height: 300px; 
 
    left: -170px; 
    top: 120px; 
 
    background: var(--pink); 
 
    opacity: .12; 
 
    border-radius: 50%; 
} 
 
.rings-hero::after { 
    content: ""; 
 
    position: absolute; 
 
    width: 300px; 
    height: 300px; 
 
    right: -170px; 
    top: 120px; 
 
    background: var(--pink); 
 
    opacity: .12; 
 
    border-radius: 50%; 
} 
 
 
/* Hero Content */ 
 
.rings-title { 
    position: relative; 
 
    z-index: 2; 
} 
 
.rings-title span { 
    display: block; 
 
    font-family: var(--font-imprima); 
 
    font-size: 18px; 
 
    letter-spacing: 3px; 
 
    color: var(--pink); 
 
    margin-bottom: 5px; 
} 
 
.rings-title h1 { 
    font-family: var(--font-hurricane); 
 
    font-size: 100px; 
 
    line-height: 1; 
 
    font-weight: 400; 
 
    color: var(--cream); 
} 
 
.rings-title p { 
    margin-top: 15px; 
 
    max-width: 520px; 
 
    font-family: var(--font-imprima); 
 
    font-size: 18px; 
 
    line-height: 1.6; 
 
    color: var(--pink); 
} 
 
 
/* ===================================================== 
   PRODUCTS SECTION 
===================================================== */ 
 
.products-section { 
    position: relative; 
 
    width: 100%; 
 
    padding: 50px 70px 100px; 
 
    background: var(--dark-teal); 
} 
 
 
/* Section Heading */ 
 
.section-heading { 
    text-align: center; 
 
    margin-bottom: 50px; 
} 
 
.section-heading span { 
    font-family: var(--font-inter); 
 
    font-size: 14px; 
 
    letter-spacing: 3px; 
 
    color: var(--pink); 
} 
 
.section-heading h2 { 
    margin-top: 4px; 
 
    font-family: var(--font-hurricane); 
 
    font-size: 65px; 
 
    font-weight: 400; 
 
    line-height: 1; 
 
    color: var(--cream); 
} 
 
 
/* Product Grid */ 
 
.products-grid { 
    width: 100%; 
 
    max-width: 1250px; 
 
    margin: 0 auto; 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    gap: 55px 35px; 
} 
 
 
/* Product Card */ 
 
.product-card { 
    background: var(--cream); 
 
    border-radius: 35px; 
 
    overflow: hidden; 
 
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, .18); 
 
    transition: 
        transform .3s ease, 
        box-shadow .3s ease; 
} 
 
.product-card:hover { 
    transform: translateY(-8px); 
 
    box-shadow: 
        0 25px 45px rgba(0, 0, 0, .25); 
} 
 
 
/* Product Image */ 
 
.product-image { 
    position: relative; 
 
    width: 100%; 
 
    height: 380px; 
 
    overflow: hidden; 
 
    background: #114246; 
} 
 
.product-image img, 
.product-image video { 
    width: 100%; 
    height: 100%; 
 
    object-fit: cover; 
    display: block; 
 
    transition: transform .5s ease; 
} 
 
.product-card:hover .product-image img, 
.product-card:hover .product-image video { 
    transform: scale(1.05); 
} 
 
 
/* Wishlist */ 
 
.wishlist-btn { 
    position: absolute; 
 
    top: 18px; 
    right: 18px; 
 
    width: 42px; 
    height: 42px; 
 
    border-radius: 50%; 
 
    background: var(--cream); 
 
    color: var(--dark-teal); 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    font-size: 18px; 
 
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, .15); 
 
    transition: 
        color .2s ease, 
        transform .2s ease; 
} 
 
.wishlist-btn:hover { 
    color: var(--pink); 
 
    transform: scale(1.08); 
} 
 
.wishlist-btn.active { 
    color: var(--pink); 
} 
 
 
/* Product Info */ 
 
.product-info { 
    padding: 22px 24px 25px; 
} 
 
.product-info h3 { 
    font-family: var(--font-imprima); 
 
    font-size: 23px; 
 
    font-weight: 500; 
 
    color: var(--dark-teal); 
} 
 
.product-info p { 
    margin-top: 5px; 
 
    font-family: var(--font-inter); 
 
    font-size: 13px; 
 
    color: var(--text-muted); 
} 
 
 
/* Product Bottom */ 
 
.product-bottom { 
    margin-top: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    gap: 15px; 
} 
 
.price { 
    font-family: var(--font-inter); 
 
    font-size: 18px; 
 
    font-weight: 600; 
 
    color: var(--dark-teal); 
} 
 
 
/* Add Cart */ 
 
.add-cart { 
    padding: 10px 16px; 
 
    border-radius: 22px; 
 
    background: var(--dark-teal); 
 
    color: var(--pink); 
 
    font-family: var(--font-inter); 
 
    font-size: 12px; 
 
    font-weight: 600; 
 
    transition: .25s ease; 
} 
 
.add-cart:hover { 
    background: var(--header-teal); 
 
    color: var(--cream); 
 
    transform: translateY(-2px); 
} 
 
 
/* ===================================================== 
   LOWER SECTION 
===================================================== */ 
 
.lower-section { 
    position: relative; 
 
    width: 100%; 
 
    padding: 60px 50px 100px; 
 
    z-index: 10; 
} 
 
.lower-card { 
    max-width: 1300px; 
 
    margin: 0 auto; 
 
    background: var(--cream); 
 
    border-radius: 101px; 
 
    padding: 60px 80px; 
 
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, .15); 
} 
 
 
/* Brand */ 
 
.lower-brand-title { 
    font-family: var(--font-almarai); 
 
    font-size: 26px; 
 
    font-weight: 700; 
 
    color: var(--pink); 
 
    letter-spacing: 1.5px; 
 
    margin-bottom: 40px; 
} 
 
 
/* Columns */ 
 
.lower-columns { 
    display: grid; 
 
    grid-template-columns: 
        2fr 
        1fr 
        1fr 
        1fr 
        2fr; 
 
    gap: 40px; 
 
    align-items: start; 
} 
 
 
/* Column Heading */ 
 
.lower-col h4 { 
    font-family: var(--font-inter); 
 
    font-size: 15px; 
 
    font-weight: 600; 
 
    color: var(--text-dark); 
 
    letter-spacing: 1.2px; 
 
    margin-bottom: 18px; 
 
    text-transform: uppercase; 
} 
 
 
/* About */ 
 
.col-about p { 
    font-size: 14px; 
 
    line-height: 1.7; 
 
    color: var(--text-dark); 
 
    margin-bottom: 12px; 
 
    opacity: .9; 
} 
 
 
/* Links */ 
 
.col-links ul { 
    list-style: none; 
 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 10px; 
} 
 
.col-links a { 
    font-size: 14px; 
 
    color: var(--text-dark); 
 
    opacity: .85; 
 
    display: inline-block; 
 
    transition: 
        opacity .2s ease, 
        color .2s ease, 
        padding-left .2s ease; 
} 
 
.col-links a:hover { 
    opacity: 1; 
 
    color: var(--pink); 
 
    padding-left: 4px; 
} 
 
 
/* Newsletter */ 
 
.col-newsletter p { 
    font-size: 14px; 
 
    line-height: 1.6; 
 
    color: var(--text-dark); 
 
    margin-bottom: 16px; 
 
    opacity: .9; 
} 
 
.newsletter-form { 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 12px; 
 
    max-width: 260px; 
} 
 
.newsletter-input { 
    width: 100%; 
 
    padding: 10px 14px; 
 
    border: 1px solid #CCCCCC; 
 
    background: #FFFFFF; 
 
    font-family: var(--font-inter); 
 
    font-size: 14px; 
 
    color: var(--text-dark); 
 
    outline: none; 
 
    border-radius: 2px; 
} 
 
.newsletter-input:focus { 
    border-color: var(--dark-teal); 
} 
 
.btn-subscribe { 
    width: 100%; 
 
    padding: 11px 18px; 
 
    background: var(--dark-teal); 
 
    color: #FFFFFF; 
 
    font-family: var(--font-inter); 
 
    font-size: 13px; 
 
    font-weight: 600; 
 
    letter-spacing: 1.5px; 
 
    border-radius: 2px; 
 
    text-transform: uppercase; 
 
    transition: 
        background-color .25s ease, 
        transform .2s ease; 
} 
 
.btn-subscribe:hover { 
    background: #145055; 
 
    transform: translateY(-1px); 
} 
 
.newsletter-msg { 
    margin-top: 10px; 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    color: #145055; 
} 
 
 
/* ===================================================== 
   FOOTER 
===================================================== */ 
 
.footer { 
    position: relative; 
 
    width: 100%; 
 
    height: 100px; 
 
    padding: 0 77px 40px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    font-family: var(--font-almarai); 
 
    font-size: 24px; 
 
    line-height: 1; 
 
    color: var(--pink); 
 
    z-index: 10; 
} 
 
.footer-copy { 
    display: flex; 
 
    align-items: center; 
} 
 
.footer-credit { 
    display: flex; 
 
    align-items: center; 
 
    gap: 6px; 
} 
 
.footer-credit strong { 
    font-weight: 700; 
 
    color: var(--cream); 
} 
 
 
/* ===================================================== 
   RESPONSIVE 
===================================================== */ 
 
/* 1399px */ 
 
@media (max-width: 1399px) { 
 
    .header-icons { 
        right: 30px; 
        gap: 16px; 
    } 
 
    .navigation { 
        left: 280px; 
        gap: 16px; 
    } 
 
    .nav-link { 
        font-size: 20px; 
    } 
 
    .products-grid { 
        max-width: 1100px; 
    } 
 
    .lower-columns { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px; 
    } 
 
    .col-newsletter { 
        grid-column: 1 / -1; 
    } 
} 
 
 
/* 1199px */ 
 
@media (max-width: 1199px) { 
 
    .navigation { 
        left: 240px; 
        gap: 14px; 
    } 
 
    .nav-link { 
        font-size: 18px; 
    } 
 
    .products-grid { 
        grid-template-columns: repeat(2, 1fr); 
        max-width: 800px; 
    } 
 
    .lower-card { 
        padding: 50px 50px; 
    } 
} 
 
 
/* 991px */ 
 
@media (max-width: 991px) { 
 
    .header { 
        height: 200px; 
        background: var(--header-teal); 
        position: fixed; 
    } 
 
    .header-logo { 
        width: 160px; 
        height: 160px; 
        top: 10px; 
    } 
 
    .navigation { 
        left: 180px; 
        top: 130px; 
        gap: 12px; 
    } 
 
    .nav-link { 
        font-size: 16px; 
    } 
 
    .nav-dot { 
        width: 8px; 
        height: 8px; 
    } 
 
    .header-icons { 
        top: 125px; 
        right: 20px; 
    } 
 
    .rings-hero { 
        padding-top: 220px; 
        min-height: 480px; 
    } 
 
    .rings-title h1 { 
        font-size: 85px; 
    } 
 
    .products-section { 
        padding: 50px 30px 80px; 
    } 
 
    .products-grid { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
        max-width: 800px; 
        gap: 30px; 
    } 
 
    .product-image { 
        height: 330px; 
    } 
 
    .lower-card { 
        border-radius: 60px; 
        padding: 40px; 
    } 
 
    .lower-columns { 
        grid-template-columns: repeat(2, 1fr); 
    } 
 
    .footer { 
        padding: 0 30px 30px; 
        font-size: 18px; 
    } 
} 
 
 
/* 767px */ 
 
@media (max-width: 767px) { 
 
    .header { 
        height: 120px; 
        position: relative; 
        background: var(--header-teal); 
    } 
 
    .header-logo { 
        width: 90px; 
        height: 90px; 
        top: 15px; 
        left: 10px; 
    } 
 
    .navigation { 
        left: 110px; 
        top: 70px; 
        gap: 8px; 
        overflow-x: auto; 
        max-width: calc(100% - 120px); 
        padding-bottom: 6px; 
        transform: none; 
    } 
 
    .nav-link { 
        font-size: 13px; 
    } 
 
    .nav-dot { 
        width: 5px; 
        height: 5px; 
    } 
 
    .header-icons { 
        top: 20px; 
        right: 15px; 
        gap: 12px; 
        transform: none; 
    } 
 
    .header-icon-btn { 
        width: 28px; 
        height: 28px; 
        font-size: 16px; 
    } 
 
    .rings-hero { 
        min-height: 350px; 
        padding: 60px 20px; 
    } 
 
    .rings-title h1 { 
        font-size: 70px; 
    } 
 
    .rings-title p { 
        font-size: 16px; 
    } 
 
    .products-section { 
        padding: 40px 15px 60px; 
    } 
 
    .section-heading { 
        margin-bottom: 35px; 
    } 
 
    .section-heading h2 { 
        font-size: 55px; 
    } 
 
    .products-grid { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
        max-width: 100%; 
        gap: 18px 12px; 
    } 
 
    .product-card { 
        border-radius: 22px; 
    } 
 
    .product-image { 
        height: 190px; 
    } 
 
    .wishlist-btn { 
        top: 10px; 
        right: 10px; 
        width: 34px; 
        height: 34px; 
        font-size: 14px; 
    } 
 
    .product-info { 
        padding: 15px 12px 17px; 
    } 
 
    .product-info h3 { 
        font-size: 17px; 
    } 
 
    .product-info p { 
        font-size: 11px; 
        line-height: 1.4; 
    } 
 
    .product-bottom { 
        margin-top: 13px; 
        gap: 5px; 
        align-items: center; 
    } 
 
    .price { 
        font-size: 14px; 
    } 
 
    .add-cart { 
        padding: 7px 9px; 
        font-size: 9px; 
    } 
 
    .lower-section { 
        padding: 20px 15px 60px; 
    } 
 
    .lower-card { 
        border-radius: 40px; 
        padding: 30px 20px; 
    } 
 
    .lower-columns { 
        grid-template-columns: 1fr; 
        gap: 25px; 
    } 
 
    .footer { 
        flex-direction: column; 
        gap: 12px; 
        text-align: center; 
        height: auto; 
        padding: 0 15px 30px; 
        font-size: 16px; 
    } 
}