/* =========================================================
                    RAY STUDIO WEBSITE COLORS
========================================================= */

:root {

    --ray-primary-background: #eee0cd;

    --ray-body-background: #fffdf9;

    --ray-section-background: #f8f2ea;

    --ray-heading-color: #4b3328;

    --ray-body-color: #6e5a50;

    --ray-hover-color: #a8743a;

    --ray-white-color: #ffffff;

    --ray-border-color: rgba(75, 51, 40, 0.14);

    --ray-card-shadow: 0 15px 40px rgba(75, 51, 40, 0.10);

}


/* =========================================================
                    GENERAL WEBSITE SETTINGS
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    color: var(--ray-body-color);

    background-color: var(--ray-body-background);

    font-family: "Poppins", sans-serif;

}


img {

    max-width: 100%;

}


button,
input,
a {

    font-family: "Poppins", sans-serif;

}


/* =========================================================
                    GENERAL SECTION SETTINGS
========================================================= */

.homepage-section {

    max-width: 1500px;

    margin: 0 auto;

    padding: 95px 5%;

}


/* =========================================================
                    GENERAL SECTION HEADING
========================================================= */

.section-heading {

    max-width: 720px;

    margin: 0 auto 52px;

    text-align: center;

}


.section-small-heading {

    margin-bottom: 10px;

    color: var(--ray-hover-color);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

}


.section-heading h2,
.promotional-content h2,
.newsletter-content h2 {

    color: var(--ray-heading-color);

    font-family: "Cormorant Garamond", serif;

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

    font-weight: 700;

    line-height: 1.1;

}


.section-description {

    margin-top: 14px;

    color: var(--ray-body-color);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
                    HERO SLIDER SECTION
========================================================= */

.hero-section {

    position: relative;

    width: 100%;

    min-height: px;

    margin: 0;

    border-radius: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-color: #2f211a;

}


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

.hero-slider {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}


.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;

}


.hero-slide.active {

    opacity: 1;

    visibility: visible;

}


.hero-slide img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
                    HERO DARK OVERLAY
========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;


    z-index: 1;

    background:
        linear-gradient(
            rgba(50, 32, 24, 0.32),
            rgba(50, 32, 24, 0.52)
        );

}


/* =========================================================
                    HERO TEXT CONTENT
========================================================= */

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 70px 30px;

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

    text-align: center;

}


.hero-small-heading {

    margin-bottom: 18px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

}


.hero-content h1 {

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

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(58px, 9vw, 100px);

    font-weight: 700;

    line-height: 0.95;

}


.hero-description {

    max-width: 620px;

    margin: 25px auto 0;

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
                    HERO BUTTONS CONTAINER
========================================================= */

.hero-buttons {

    margin-top: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

}


/* =========================================================
                    PRIMARY WEBSITE BUTTON
========================================================= */

.primary-button {

    min-width: 155px;

    padding: 14px 28px;

    border: 1px solid var(--ray-heading-color);

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    background-color: var(--ray-heading-color);

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.primary-button:hover {

    background-color: var(--ray-hover-color);

    border-color: var(--ray-hover-color);

    transform: translateY(-3px);

}


/* =========================================================
                    SECONDARY HERO BUTTON
========================================================= */

.secondary-button {

    min-width: 175px;

    padding: 14px 28px;

    border: 1px solid rgba(255, 255, 255, 0.85);

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    background-color: rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(8px);

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;

}


.secondary-button:hover {

    color: var(--ray-heading-color);

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

    transform: translateY(-3px);

}




/* =========================================================
                    HERO SLIDER CONTROLS
========================================================= */

.hero-slider-button {

    position: absolute;

    top: 50%;

    z-index: 3;

    width: 48px;

    height: 48px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.50);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

    background-color: rgba(40, 25, 18, 0.24);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    font-size: 14px;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.hero-slider-button:hover {

    background-color: rgba(75, 51, 40, 0.78);

    border-color: rgba(255, 255, 255, 0.85);

}


.hero-slider-previous {

    left: 30px;

}


.hero-slider-next {

    right: 30px;

}


/* =========================================================
                    HERO SLIDER DOTS
========================================================= */

.hero-slider-dots {

    position: absolute;

    left: 50%;

    bottom: 24px;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    transform: translateX(-50%);

}


.hero-dot {

    width: 9px;

    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.55);

    cursor: pointer;

    transition:
        width 0.3s ease,
        background-color 0.3s ease;

}


.hero-dot.active {

    width: 28px;

    border-radius: 20px;

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

}


/* =========================================================
                    CATEGORY CARDS GRID
========================================================= */

.category-grid {

    display: grid;

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

    gap: 24px;

}


/* =========================================================
                    INDIVIDUAL CATEGORY CARD
========================================================= */

.category-card {

    position: relative;

    min-height: 510px;

    border-radius: 30px;

    overflow: hidden;

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

    text-decoration: none;

    box-shadow: var(--ray-card-shadow);

}


.category-card img {

    width: 100%;

    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    transition: transform 0.6s ease;

}


.category-card:hover img {

    transform: scale(1.06);

}


/* =========================================================
                    CATEGORY CARD OVERLAY
========================================================= */

.category-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 30%,
            rgba(42, 27, 20, 0.72)
        );

}


/* =========================================================
                    CATEGORY CARD TEXT
========================================================= */

.category-content {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 30px;

    z-index: 2;

}


.category-content p {

    margin-bottom: 4px;

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.category-content h3 {

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

    font-family: "Cormorant Garamond", serif;

    font-size: 38px;

    font-weight: 700;

}


.category-content span {

    margin-top: 12px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size: 12px;

}


/* =========================================================
                    PRODUCTS SECTION BACKGROUND
========================================================= */

.products-section {

    max-width: none;

    padding-left: 7%;

    padding-right: 7%;

    background-color: var(--ray-section-background);

}


/* =========================================================
                    PRODUCT CARDS GRID
========================================================= */

.product-grid {

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

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

    gap: 28px 22px;

}


/* =========================================================
                    INDIVIDUAL PRODUCT CARD
========================================================= */

.product-card {

    padding: 12px;

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

    border-radius: 26px;

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

    box-shadow: 0 8px 28px rgba(75, 51, 40, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.product-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--ray-card-shadow);

}


/* =========================================================
                    PRODUCT IMAGE CONTAINER
========================================================= */

.product-image-container {

    position: relative;

    aspect-ratio: 3 / 4;

    border-radius: 21px;

    overflow: hidden;

    background-color: var(--ray-section-background);

}


.product-image-container > a {

    width: 100%;

    height: 100%;

    display: block;

}


.product-image-container img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;

}


.product-card:hover .product-image-container img {

    transform: scale(1.045);

}


/* =========================================================
                    PRODUCT DISCOUNT BADGE
========================================================= */

.discount-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    z-index: 3;

    padding: 7px 12px;

    border-radius: 50px;

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

    background-color: var(--ray-heading-color);

    font-size: 10px;

    font-weight: 600;

}


/* =========================================================
                    PRODUCT WISHLIST BUTTON
========================================================= */

.wishlist-button {

    position: absolute;

    top: 13px;

    right: 13px;

    z-index: 3;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--ray-heading-color);

    background-color: rgba(255, 255, 255, 0.92);

    font-size: 16px;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;

}


.wishlist-button:hover {

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

    background-color: var(--ray-heading-color);

    transform: scale(1.08);

}


/* =========================================================
                    PRODUCT INFORMATION
========================================================= */

.product-information {

    padding: 18px 8px 8px;

}


.product-category {

    color: var(--ray-hover-color);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.4px;

}


.product-information h3 {

    margin-top: 7px;

    font-family: "Cormorant Garamond", serif;

    font-size: 23px;

    font-weight: 700;

    line-height: 1.2;

}


.product-information h3 a {

    color: var(--ray-heading-color);

    text-decoration: none;

}


/* =========================================================
                    PRODUCT PRICE
========================================================= */

.product-price {

    margin-top: 11px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}


.old-price {

    color: #a3938c;

    font-size: 12px;

    text-decoration: line-through;

}


.current-price {

    color: var(--ray-heading-color);

    font-size: 14px;

    font-weight: 600;

}


/* =========================================================
                    PRODUCT VIEW BUTTON
========================================================= */

.product-button {

    width: 100%;

    margin-top: 17px;

    padding: 12px 18px;

    border: 1px solid var(--ray-heading-color);

    border-radius: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    background-color: var(--ray-heading-color);

    font-size: 12px;

    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;

}


.product-button:hover {

    color: var(--ray-heading-color);

    background-color: transparent;

    transform: translateY(-2px);

}


/* =========================================================
                    VIEW ALL PRODUCTS BUTTON
========================================================= */

.section-button-container {

    width: 100%;

    margin-top: 48px;

    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    justify-content: center;

}


.outline-button {

    padding: 14px 30px;

    border: 1px solid var(--ray-heading-color);

    border-radius: 50px;

    display: inline-flex;

    color: var(--ray-heading-color);

    background-color: transparent;

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;

}


.outline-button:hover {

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

    background-color: var(--ray-heading-color);

    transform: translateY(-3px);

}


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

.promotional-section {

    position: relative;

    max-width: 1400px;

    margin: 100px auto;

    padding: 20px;

    border-radius: 34px;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 55px;

    overflow: hidden;

    isolation: isolate;

    background-color: var(--ray-primary-background);

    box-shadow: var(--ray-card-shadow);

}


/* =========================================================
                    PROMOTIONAL IMAGE
========================================================= */

.promotional-image {

    position: relative;

    z-index: 2;

    min-height: 560px;

    border-radius: 27px;

    overflow: hidden;

}


.promotional-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
                    PROMOTIONAL TEXT CONTENT
========================================================= */

.promotional-content {

    position: relative;

    z-index: 2;

    padding: 50px 55px 50px 10px;

}


.promotional-content p:not(.section-small-heading) {

    margin: 22px 0 30px;

    color: var(--ray-body-color);

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
                    PROMOTIONAL URDU CALLIGRAPHY
========================================================= */

.promotional-urdu-calligraphy {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}

.urdu-calligraphy-word {

    position: absolute;

    color: rgba(75, 51, 40, 0.11);

    font-family: "Noto Nastaliq Urdu", serif;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    user-select: none;

}

.urdu-word-1 {

    top: 30px;

    right: 70px;

    font-size: 68px;

    transform: rotate(-10deg);

}

.urdu-word-2 {

    top: 120px;

    right: 15px;

    font-size: 98px;

    transform: rotate(-6deg);

}

.urdu-word-3 {

    bottom: 95px;

    right: 50px;

    font-size: 74px;

    transform: rotate(-8deg);

}

.urdu-word-4 {

    bottom: 22px;

    right: 165px;

    font-size: 58px;

    transform: rotate(-12deg);

}


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

.benefits-section {

    padding-top: 80px;

    padding-bottom: 100px;

}


/* =========================================================
                    BENEFIT CARDS GRID
========================================================= */

.benefits-grid {

    display: grid;

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

    gap: 22px;

}


/* =========================================================
                    INDIVIDUAL BENEFIT CARD
========================================================= */

.benefit-card {

    padding: 38px 28px;

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

    border-radius: 25px;

    text-align: center;

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

    box-shadow: 0 8px 26px rgba(75, 51, 40, 0.05);

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

}


.benefit-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--ray-card-shadow);

}


/* =========================================================
                    BENEFIT ICON
========================================================= */

.benefit-icon {

    width: 68px;

    height: 68px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--ray-heading-color);

    background-color: var(--ray-primary-background);

    font-size: 24px;

}


.benefit-card h3 {

    color: var(--ray-heading-color);

    font-family: "Cormorant Garamond", serif;

    font-size: 24px;

    font-weight: 700;

}


.benefit-card p {

    margin-top: 12px;

    color: var(--ray-body-color);

    font-size: 12px;

    line-height: 1.8;

}


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

.newsletter-section {

    margin: 0 2.5% 95px;

    padding: 85px 25px;

    border-radius: 34px;

    color: var(--ray-heading-color);

    background-color: var(--ray-primary-background);

    text-align: center;

}


.newsletter-content {

    max-width: 690px;

    margin: 0 auto;

}


.newsletter-content > p:not(.section-small-heading) {

    margin-top: 15px;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
                    NEWSLETTER FORM
========================================================= */

.homepage-newsletter-form {

    max-width: 570px;

    margin: 30px auto 0;

    padding: 6px;

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

    border-radius: 50px;

    display: flex;

    background-color: rgba(255, 255, 255, 0.48);

}


.homepage-newsletter-form input {

    flex: 1;

    min-width: 0;

    padding: 0 20px;

    border: none;

    outline: none;

    color: var(--ray-heading-color);

    background-color: transparent;

    font-size: 12px;

}


.homepage-newsletter-form button {

    padding: 13px 28px;

    border: none;

    border-radius: 50px;

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

    background-color: var(--ray-heading-color);

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;

}


.homepage-newsletter-form button:hover {

    background-color: var(--ray-hover-color);

    transform: translateX(-2px);

}


/* =========================================================
                    ACCESSIBILITY HIDDEN TEXT
========================================================= */

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* =========================================================
                    LARGE TABLET RESPONSIVE DESIGN
========================================================= */

@media screen and (max-width: 1100px) {

    .hero-section {

        min-height: 580px;

    }


    .category-grid {

        gap: 18px;

    }


    .category-card {

        min-height: 440px;

    }


    .product-grid {

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

    }


    .promotional-section {

        margin-left: 3%;

        margin-right: 3%;

        gap: 30px;

    }


    .promotional-content {

        padding: 40px 30px 40px 5px;

    }


    .benefits-grid {

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

    }

}


/* =========================================================
                    TABLET RESPONSIVE DESIGN
========================================================= */

@media screen and (max-width: 800px) {

    .homepage-section {

        padding: 70px 22px;

    }


    .hero-section {

        min-height: 530px;

        margin: 0;

        border-radius: 0;

    }


    .hero-slider-previous {

        left: 15px;

    }


    .hero-slider-next {

        right: 15px;

    }


    .category-grid {

        grid-template-columns: 1fr;

    }


    .category-card {

        min-height: 470px;

    }


    .promotional-section {

        margin-top: 70px;

        margin-bottom: 70px;

        padding: 14px;

        border-radius: 28px;

        grid-template-columns: 1fr;

    }


    .promotional-image {

        min-height: 470px;

        border-radius: 22px;

    }


    .promotional-content {

        padding: 30px 20px 40px;

        text-align: center;

    }


    .promotional-urdu-calligraphy {

        position: static;

        grid-column: 1 / -1;

        min-height: 130px;

        margin-top: -10px;

    }


    .urdu-word-1 {

        top: 8px;

        right: 90px;

        font-size: 52px;

    }


    .urdu-word-2 {

        top: 40px;

        right: 8px;

        font-size: 74px;

    }


    .urdu-word-3 {

        bottom: 22px;

        right: 65px;

        font-size: 56px;

    }


    .urdu-word-4 {

        bottom: -2px;

        right: 185px;

        font-size: 42px;

    }


    .newsletter-section {

        margin: 0 15px 70px;

        border-radius: 27px;

    }

}


/* =========================================================
                    MOBILE RESPONSIVE DESIGN
========================================================= */

@media screen and (max-width: 550px) {

    .hero-section {

        min-height: 500px;

    }


    .hero-slider-button {

        width: 40px;

        height: 40px;

        font-size: 12px;

    }


    .hero-slider-previous {

        left: 10px;

    }


    .hero-slider-next {

        right: 10px;

    }


    .hero-slider-dots {

        bottom: 18px;

    }


    .hero-content {

        padding: 50px 20px;

    }


    .hero-content h1 {

        font-size: 55px;

    }


    .hero-description {

        font-size: 13px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .primary-button,
    .secondary-button {

        width: 100%;

        max-width: 230px;

    }


    .section-heading {

        margin-bottom: 36px;

    }


    .section-heading h2,
    .promotional-content h2,
    .newsletter-content h2 {

        font-size: 37px;

    }


    .category-card {

        min-height: 420px;

        border-radius: 24px;

    }


    .category-content {

        left: 22px;

        right: 22px;

        bottom: 24px;

    }


    .product-grid {

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

        gap: 18px 10px;

    }


    .product-card {

        padding: 7px;

        border-radius: 20px;

    }


    .product-image-container {

        border-radius: 16px;

    }


    .product-information {

        padding: 13px 4px 5px;

    }


    .product-information h3 {

        font-size: 17px;

    }


    .product-category {

        font-size: 8px;

        letter-spacing: 0.7px;

    }


    .old-price,
    .current-price {

        font-size: 10px;

    }


    .product-button {

        padding: 10px 8px;

        font-size: 10px;

    }


    .discount-badge {

        top: 8px;

        left: 8px;

        padding: 5px 8px;

        font-size: 8px;

    }


    .wishlist-button {

        top: 7px;

        right: 7px;

        width: 32px;

        height: 32px;

        font-size: 13px;

    }


    .benefits-grid {

        grid-template-columns: 1fr;

    }


    .promotional-urdu-calligraphy {

        min-height: 110px;

        margin-top: -6px;

    }


    .urdu-word-1 {

        top: 8px;

        right: 45px;

        font-size: 34px;

    }


    .urdu-word-2 {

        top: 35px;

        right: 5px;

        font-size: 48px;

    }


    .urdu-word-3 {

        bottom: 18px;

        right: 35px;

        font-size: 36px;

    }


    .urdu-word-4 {

        bottom: 0;

        right: 115px;

        font-size: 28px;

    }


    .homepage-newsletter-form {

        padding: 5px;

        border-radius: 20px;

        flex-direction: column;

        gap: 8px;

        background-color: transparent;

        border: none;

    }


    .homepage-newsletter-form input {

        width: 100%;

        min-height: 49px;

        padding: 0 17px;

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

        border-radius: 50px;

        background-color: rgba(255, 255, 255, 0.48);

    }


    .homepage-newsletter-form button {

        width: 100%;

        min-height: 49px;

    }

}