/* ==========================================================
  
  Sub category design 
========================================================== */

.ring-page {
    margin: 0;
    padding: 0;
    background: #fffaf0;
}


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

.ring-collection {
    position: relative;
    overflow: hidden;

    min-height: 700px;

    padding: 50px 25px 70px;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(195, 139, 25, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(195, 139, 25, 0.08),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #f9f1df 52%,
            #fffaf0 100%
        );
}


/* ==========================================================
   HEADING
========================================================== */

.ring-heading {
    position: relative;
    z-index: 2;

    max-width: 720px;

    margin: 0 auto 30px;

    text-align: center;
}


.ring-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: #b67a00;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 4px;
    text-transform: uppercase;
}


.ring-heading h1 {
    margin: 0;

    color: #761717;

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

    font-size: clamp(36px, 4vw, 40px);

    font-weight: 400;
    line-height: 1.15;
}


/* ==========================================================
   GOLD DIVIDER
========================================================== */

.ring-divider {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    margin: 17px auto 11px;
}


.ring-divider span {
    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #c38a18
        );
}


.ring-divider span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            #c38a18
        );
}


.ring-divider i {
    color: #c38a18;

    font-size: 9px;
    font-style: normal;

    transform: rotate(45deg);
}


/* ==========================================================
   HEADING TEXT
========================================================== */

.ring-tagline {
    margin: 0;

    color: #b47a08;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.ring-description {
    max-width: 580px;

    margin: 15px auto 0;

    color: #756a5d;

    font-size: 14px;
    line-height: 1.8;
}


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

.ring-category-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 32px;

    width: min(100%, 1050px);

    margin: 0 auto;
}


/* ==========================================================
   CARD
========================================================== */

.ring-category-card {
    min-width: 0;
}


.ring-card-link {
    display: block;

    color: inherit;

    text-decoration: none;
}


.ring-image-wrapper {
    position: relative;

    height: 510px;

    overflow: hidden;

    background: #ead5b4;

    border: 1px solid rgba(184, 126, 10, 0.25);

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(79, 51, 16, 0.13);

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


/* GOLD INNER BORDER */

.ring-image-wrapper::before {
    content: "";

    position: absolute;

    inset: 11px;

    z-index: 3;

    border:
        1px solid rgba(255, 232, 176, 0.55);

    border-radius: 17px;

    pointer-events: none;
}


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

.ring-image-wrapper img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


/* ==========================================================
   IMAGE SHADE
========================================================== */

.ring-image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(39, 19, 5, 0.91) 0%,
            rgba(52, 28, 7, 0.55) 24%,
            rgba(52, 28, 7, 0.08) 52%,
            transparent 72%
        );

    transition: background 0.4s ease;
}


/* ==========================================================
   NUMBER
========================================================== */

.ring-number {
    position: absolute;

    top: 30px;
    right: 30px;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: #fff7e5;

    background:
        rgba(69, 37, 7, 0.34);

    border:
        1px solid rgba(255, 231, 174, 0.60);

    border-radius: 50%;

    backdrop-filter: blur(8px);

    font-family: Georgia, serif;

    font-size: 13px;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.ring-card-content {
    position: absolute;

    left: 38px;
    right: 38px;
    bottom: 36px;

    z-index: 4;

    color: #fff;
}


.ring-card-small {
    display: block;

    margin-bottom: 8px;

    color: #f1ce7a;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;
}


.ring-card-content h2 {
    margin: 0 0 8px;

    color: #fff;

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

    font-size: 34px;
    font-weight: 500;
}


.ring-card-content p {
    max-width: 300px;

    margin: 0 0 18px;

    color:
        rgba(255, 255, 255, 0.83);

    font-size: 12px;
    line-height: 1.6;
}


/* ==========================================================
   EXPLORE BUTTON
========================================================== */

.ring-explore-btn {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 5px;

    color: #f6d78f;

    border-bottom:
        1px solid rgba(246, 215, 143, 0.65);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.ring-arrow {
    display: inline-block;

    font-size: 18px;

    transition: transform 0.3s ease;
}


/* ==========================================================
   DESKTOP HOVER EFFECTS
========================================================== */

@media (hover: hover) {

    .ring-card-link:hover .ring-image-wrapper {
        transform: translateY(-8px);

        box-shadow:
            0 28px 60px rgba(74, 44, 10, 0.21);
    }


    .ring-card-link:hover img {
        transform: scale(1.055);
    }


    .ring-card-link:hover .ring-arrow {
        transform: translateX(7px);
    }

}


/* ==========================================================
   BOTTOM MESSAGE
========================================================== */

.ring-bottom-message {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    margin: 45px auto 0;
}


.ring-bottom-message span {
    width: 80px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(177, 119, 5, 0.60)
        );
}


.ring-bottom-message span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(177, 119, 5, 0.60)
        );
}


.ring-bottom-message p {
    margin: 0;

    color: #967126;

    font-family: Georgia, serif;

    font-size: 12px;

    letter-spacing: 1px;
}


/* ==========================================================
   DECORATIVE BACKGROUND GLOW
========================================================== */

.ring-glow {
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        rgba(193, 137, 20, 0.08);

    filter: blur(85px);

    pointer-events: none;
}


.ring-glow-left {
    top: 40px;
    left: -180px;
}


.ring-glow-right {
    right: -180px;
    bottom: 20px;
}


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

@media (max-width: 900px) {

    .ring-collection {
        padding:
            60px 20px 65px;
    }


    .ring-category-grid {
        gap: 22px;
    }


    .ring-image-wrapper {
        height: 440px;
    }


    .ring-card-content {
        left: 28px;
        right: 28px;
        bottom: 28px;
    }


    .ring-card-content h2 {
        font-size: 29px;
    }

}


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

@media (max-width: 650px) {

    .ring-collection {
        padding:
            48px 14px 55px;
    }


    .ring-heading {
        margin-bottom: 32px;
    }


    .ring-heading h1 {
        font-size: 34px;
    }


    .ring-eyebrow {
        font-size: 8px;

        letter-spacing: 2.5px;
    }


    .ring-tagline {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .ring-description {
        font-size: 12px;

        line-height: 1.7;
    }


    /* One card per row */

    .ring-category-grid {
        grid-template-columns: 1fr;

        gap: 22px;

        max-width: 480px;
    }


    .ring-image-wrapper {
        height: 440px;

        border-radius: 19px;
    }


    .ring-image-wrapper::before {
        inset: 8px;

        border-radius: 14px;
    }


    .ring-number {
        top: 23px;
        right: 23px;

        width: 40px;
        height: 40px;

        font-size: 11px;
    }


    .ring-card-content {
        left: 27px;
        right: 27px;
        bottom: 28px;
    }


    .ring-card-content h2 {
        font-size: 30px;
    }


    .ring-card-content p {
        font-size: 11px;
    }


    .ring-bottom-message {
        gap: 10px;

        margin-top: 32px;
    }


    .ring-bottom-message span {
        width: 35px;
    }


    .ring-bottom-message p {
        font-size: 9px;

        text-align: center;
    }

}


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

@media (max-width: 380px) {

    .ring-heading h1 {
        font-size: 30px;
    }


    .ring-image-wrapper {
        height: 390px;
    }


    .ring-card-content h2 {
        font-size: 27px;
    }

}



/* ==========================================================
   PREMIUM GOLD CHAIN CATEGORY
========================================================== */

.chain-page {
    margin: 0;
    padding: 0;
    background: #fffaf0;
}


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

.chain-collection {
    position: relative;
    overflow: hidden;

    padding: 50px 25px 70px;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(195, 139, 25, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(195, 139, 25, 0.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #f8efdd 50%,
            #fffaf0 100%
        );
}


/* ==========================================================
   HEADING
========================================================== */

.chain-heading {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 auto 40px;

    text-align: center;
}


.chain-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: #b67a00;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.chain-heading h1 {
    margin: 0;

    color: #761717;

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

    font-size: clamp(34px, 4vw, 40px);

    font-weight: 400;

    line-height: 1.2;
}


/* ==========================================================
   GOLD DIVIDER
========================================================== */

.chain-divider {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    margin: 17px auto 11px;
}


.chain-divider span {
    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #c38a18
        );
}


.chain-divider span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            #c38a18
        );
}


.chain-divider i {
    color: #c38a18;

    font-size: 9px;
    font-style: normal;

    transform: rotate(45deg);
}


/* ==========================================================
   HEADING TEXT
========================================================== */

.chain-tagline {
    margin: 0;

    color: #b47a08;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.chain-description {
    max-width: 600px;

    margin: 15px auto 0;

    color: #756a5d;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   THREE CARD GRID
========================================================== */

.chain-category-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 25px;

    width: min(100%, 1180px);

    margin: 0 auto;
}


.chain-category-card {
    min-width: 0;
}


.chain-card-link {
    display: block;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================
   IMAGE CARD
========================================================== */

.chain-image-wrapper {
    position: relative;

    height: 500px;

    overflow: hidden;

    background: #ead5b4;

    border:
        1px solid rgba(184, 126, 10, 0.25);

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(79, 51, 16, 0.13);

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


/* Inner luxury gold border */

.chain-image-wrapper::before {
    content: "";

    position: absolute;

    inset: 10px;

    z-index: 3;

    border:
        1px solid rgba(255, 232, 176, 0.55);

    border-radius: 17px;

    pointer-events: none;
}


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

.chain-image-wrapper img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


/* ==========================================================
   DARK LUXURY GRADIENT
========================================================== */

.chain-image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(38, 18, 4, 0.93) 0%,
            rgba(47, 24, 5, 0.58) 27%,
            rgba(47, 24, 5, 0.10) 55%,
            transparent 75%
        );

    pointer-events: none;
}


/* ==========================================================
   CARD NUMBER
========================================================== */

.chain-number {
    position: absolute;

    top: 28px;
    right: 28px;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: #fff7e5;

    background:
        rgba(69, 37, 7, 0.34);

    border:
        1px solid rgba(255, 231, 174, 0.60);

    border-radius: 50%;

    backdrop-filter: blur(8px);

    font-family: Georgia, serif;

    font-size: 12px;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.chain-card-content {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 31px;

    z-index: 4;

    color: white;
}


.chain-card-small {
    display: block;

    margin-bottom: 8px;

    color: #f1ce7a;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 2.5px;
}


.chain-card-content h2 {
    margin: 0 0 8px;

    color: #ffffff;

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

    font-size: 29px;
    font-weight: 500;

    line-height: 1.15;
}


.chain-card-content p {
    max-width: 280px;

    margin: 0 0 17px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 11px;

    line-height: 1.6;
}


/* ==========================================================
   EXPLORE LINK
========================================================== */

.chain-explore-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 5px;

    color: #f6d78f;

    border-bottom:
        1px solid rgba(246, 215, 143, 0.65);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.chain-arrow {
    display: inline-block;

    font-size: 18px;

    transition:
        transform 0.3s ease;
}


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) {

    .chain-card-link:hover .chain-image-wrapper {
        transform: translateY(-9px);

        box-shadow:
            0 28px 60px rgba(74, 44, 10, 0.22);
    }


    .chain-card-link:hover img {
        transform: scale(1.06);
    }


    .chain-card-link:hover .chain-arrow {
        transform: translateX(7px);
    }

}


/* ==========================================================
   BOTTOM MESSAGE
========================================================== */

.chain-bottom-message {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    margin: 45px auto 0;
}


.chain-bottom-message span {
    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(177, 119, 5, 0.65)
        );
}


.chain-bottom-message span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(177, 119, 5, 0.65)
        );
}


.chain-bottom-message p {
    margin: 0;

    color: #967126;

    font-family: Georgia, serif;

    font-size: 12px;

    letter-spacing: 1px;

    text-align: center;
}


/* ==========================================================
   DECORATION
========================================================== */

.chain-glow {
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        rgba(193, 137, 20, 0.08);

    filter: blur(85px);

    pointer-events: none;
}


.chain-glow-left {
    top: 30px;
    left: -170px;
}


.chain-glow-right {
    right: -170px;
    bottom: 20px;
}


/* ==========================================================
   MEDIUM DESKTOP / TABLET
========================================================== */

@media (max-width: 1050px) {

    .chain-category-grid {
        max-width: 800px;

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


    /* Third card centered */

    .chain-category-card:nth-child(3) {
        grid-column: 1 / -1;

        width: calc(50% - 12px);

        justify-self: center;
    }

}


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

@media (max-width: 768px) {

    .chain-collection {
        padding:
            58px 18px 60px;
    }


    .chain-heading {
        margin-bottom: 35px;
    }


    .chain-image-wrapper {
        height: 450px;
    }


    .chain-card-content h2 {
        font-size: 27px;
    }

}


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

@media (max-width: 650px) {

    .chain-collection {
        padding:
            48px 14px 52px;
    }


    .chain-heading h1 {
        font-size: 33px;
    }


    .chain-eyebrow {
        font-size: 8px;

        letter-spacing: 2.5px;
    }


    .chain-tagline {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .chain-description {
        font-size: 12px;

        line-height: 1.7;
    }


    /* One card per row */

    .chain-category-grid {
        grid-template-columns: 1fr;

        gap: 22px;

        max-width: 470px;
    }


    .chain-category-card:nth-child(3) {
        grid-column: auto;

        width: 100%;
    }


    .chain-image-wrapper {
        height: 440px;

        border-radius: 19px;
    }


    .chain-image-wrapper::before {
        inset: 8px;

        border-radius: 13px;
    }


    .chain-number {
        top: 22px;
        right: 22px;

        width: 40px;
        height: 40px;
    }


    .chain-card-content {
        left: 26px;
        right: 26px;
        bottom: 27px;
    }


    .chain-card-content h2 {
        font-size: 29px;
    }


    .chain-bottom-message {
        gap: 10px;

        margin-top: 32px;
    }


    .chain-bottom-message span {
        width: 28px;
    }


    .chain-bottom-message p {
        max-width: 250px;

        font-size: 9px;

        line-height: 1.5;
    }

}


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

@media (max-width: 380px) {

    .chain-heading h1 {
        font-size: 29px;
    }


    .chain-image-wrapper {
        height: 400px;
    }


    .chain-card-content h2 {
        font-size: 26px;
    }

}



/* ==================================================
   DIAMOND COLLECTION
================================================== */

.diamond-page {
    background: #fffdf8;
    padding: 0;
}

.diamond-collection {
    max-width: 1250px;
    margin: auto;
    padding: 60px 30px 80px;
}


/* ==================================================
   HEADING
================================================== */

.diamond-heading {
    text-align: center;
    margin-bottom: 45px;
}

.diamond-label {
    display: block;
    color: #b77a08;
    font-size: 12px;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.diamond-heading h1 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 500;

    color: #8b0000;
}

.diamond-tagline {
    margin: 10px 0 0;

    color: #a56f0a;

    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* Decorative divider */

.diamond-divider {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 12px;

    margin: 16px auto 10px;
}

.diamond-divider span:not(.diamond-icon) {
    width: 65px;
    height: 1px;

    background: #d6ad55;
}

.diamond-icon {
    color: #c58a17;
    font-size: 21px;
}


/* ==================================================
   GRID
================================================== */

.diamond-grid {
    display: grid;

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

    gap: 22px;
}


/* ==================================================
   CARD
================================================== */

.diamond-card {
    display: block;

    background: #ffffff;

    border: 1px solid #eadcc0;
    border-radius: 6px;

    overflow: hidden;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(75, 45, 10, 0.07);

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


/* Card Hover */

.diamond-card:hover {
    transform: translateY(-6px);

    border-color: #c7922e;

    box-shadow:
        0 15px 35px rgba(75, 45, 10, 0.13);
}


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

.diamond-image {
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f8f2e8;
}

.diamond-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.diamond-card:hover .diamond-image img {
    transform: scale(1.04);
}


/* ==================================================
   CONTENT
================================================== */

.diamond-content {
    text-align: center;

    padding: 22px 15px 24px;
}

.diamond-content h2 {
    margin: 0 0 5px;

    color: #741313;

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

    font-size: 20px;
    font-weight: 500;

    line-height: 1.3;
}

.diamond-content p {
    margin: 0 0 17px;

    color: #9a6b14;

    font-size: 14px;
    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ==================================================
   EXPLORE BUTTON
================================================== */

.explore-link {
    display: inline-block;

    padding: 9px 18px;

    border: 1px solid #c28a20;
    border-radius: 30px;

    color: #9a6709;

    font-size: 13px;
    font-weight: 500;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.diamond-card:hover .explore-link {
    background: #b97d0c;
    color: #ffffff;
}


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

@media (max-width: 1000px) {

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

        gap: 25px;
    }

}


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

@media (max-width: 600px) {

    .diamond-collection {
        padding: 40px 16px 55px;
    }

    .diamond-heading {
        margin-bottom: 30px;
    }

    .diamond-label {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .diamond-heading h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .diamond-tagline {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .diamond-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .diamond-content {
        padding: 18px 12px 20px;
    }

    .diamond-content h2 {
        font-size: 21px;
    }

}


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

@media (max-width: 380px) {

    .diamond-heading h1 {
        font-size: 26px;
    }

}



/* ==========================================================
   K.J. KIRAN JEWELLERS
   PREMIUM SILVER COLLECTION
========================================================== */

.silver-page {
    margin: 0;
    padding: 0;
    background: #faf9f6;
}


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

.silver-collection {
    position: relative;
    overflow: hidden;

    padding: 55px 30px 80px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(190, 174, 135, 0.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(170, 175, 184, 0.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f3e9 48%,
            #f9f9f8 100%
        );
}


/* ==========================================================
   HEADING
========================================================== */

.silver-heading {
    position: relative;
    z-index: 2;

    max-width: 750px;

    margin: 0 auto 40px;

    text-align: center;
}


.silver-eyebrow {
    display: block;

    margin-bottom: 11px;

    color: #b47a08;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.silver-heading h1 {
    margin: 0;

    color: #711616;

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

    font-size: clamp(34px, 4vw, 40px);

    font-weight: 400;

    line-height: 1.15;
}


.silver-heading h1 span {
    color: #4e5055;
}


/* ==========================================================
   DIVIDER
========================================================== */

.silver-divider {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 17px auto 11px;
}


.silver-divider span {
    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #b98a32
        );
}


.silver-divider span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            #b98a32
        );
}


.silver-divider i {
    color: #b98a32;

    font-size: 12px;

    font-style: normal;
}


.silver-tagline {
    margin: 0;

    color: #a87517;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.silver-intro {
    max-width: 580px;

    margin: 15px auto 0;

    color: #716e68;

    font-size: 13px;

    line-height: 1.8;
}


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

.silver-category-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 25px;

    width: min(100%, 1180px);

    margin: 0 auto;
}


/* ==========================================================
   CARD
========================================================== */

.silver-card {
    min-width: 0;
}


.silver-card a {
    display: block;

    color: inherit;

    text-decoration: none;
}


.silver-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 20px;

    background: #eeeeec;

    border:
        1px solid rgba(158, 147, 119, 0.35);

    box-shadow:
        0 12px 32px rgba(62, 58, 50, 0.11);

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


/* INNER JEWELLERY BORDER */

.silver-image::before {
    content: "";

    position: absolute;

    inset: 9px;

    z-index: 4;

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

    border-radius: 14px;

    pointer-events: none;
}


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

.silver-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(.2, .7, .2, 1);
}


/* ==========================================================
   GRADIENT OVERLAY
========================================================== */

.silver-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(26, 26, 28, 0.88) 0%,
            rgba(35, 35, 37, 0.52) 28%,
            rgba(30, 30, 30, 0.05) 60%,
            transparent 78%
        );

    pointer-events: none;
}


/* ==========================================================
   NUMBER BADGE
========================================================== */

.silver-card-number {
    position: absolute;

    top: 24px;
    right: 24px;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(38, 38, 38, 0.22);

    backdrop-filter: blur(8px);

    font-family: Georgia, serif;

    font-size: 11px;

    letter-spacing: 1px;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.silver-overlay {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 27px;

    z-index: 5;
}


.silver-label {
    display: block;

    margin-bottom: 7px;

    color: #e7c978;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.silver-overlay h2 {
    margin: 0 0 13px;

    color: #ffffff;

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

    font-size: 25px;

    font-weight: 500;

    line-height: 1.2;
}


/* ==========================================================
   EXPLORE LINK
========================================================== */

.silver-explore {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 4px;

    color: rgba(255, 255, 255, 0.88);

    border-bottom:
        1px solid rgba(230, 202, 130, 0.65);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.silver-explore b {
    color: #e5c573;

    font-size: 17px;

    font-weight: 400;

    transition:
        transform 0.3s ease;
}


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) {

    .silver-card a:hover .silver-image {
        transform: translateY(-7px);

        box-shadow:
            0 22px 45px rgba(53, 49, 43, 0.18);
    }


    .silver-card a:hover img {
        transform: scale(1.06);
    }


    .silver-card a:hover .silver-explore b {
        transform: translateX(6px);
    }

}


/* ==========================================================
   BOTTOM MESSAGE
========================================================== */

.silver-bottom {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 48px auto 0;
}


.silver-bottom span {
    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #b69249
        );
}


.silver-bottom span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            #b69249
        );
}


.silver-bottom p {
    margin: 0;

    color: #806d43;

    font-family: Georgia, serif;

    font-size: 12px;

    letter-spacing: 1px;
}


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

.silver-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.silver-glow-one {
    top: 100px;
    left: -200px;

    background:
        rgba(202, 183, 139, 0.13);
}


.silver-glow-two {
    right: -200px;
    bottom: 80px;

    background:
        rgba(180, 184, 192, 0.15);
}


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

@media (max-width: 1000px) {

    .silver-collection {
        padding:
            60px 22px 70px;
    }


    .silver-category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }


    .silver-image {
        height: 400px;
    }

}


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

@media (max-width: 620px) {

    .silver-collection {
        padding:
            48px 14px 55px;
    }


    .silver-heading {
        margin-bottom: 32px;
    }


    .silver-heading h1 {
        font-size: 33px;
    }


    .silver-eyebrow {
        font-size: 8px;

        letter-spacing: 2.5px;
    }


    .silver-tagline {
        font-size: 8px;

        letter-spacing: 2px;
    }


    .silver-intro {
        font-size: 12px;

        line-height: 1.7;
    }


    /* 1 CARD PER ROW */

    .silver-category-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        max-width: 460px;
    }


    .silver-image {
        height: 410px;

        border-radius: 18px;
    }


    .silver-overlay {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }


    .silver-overlay h2 {
        font-size: 25px;
    }


    .silver-card-number {
        top: 21px;
        right: 21px;

        width: 38px;
        height: 38px;
    }


    .silver-bottom {
        gap: 9px;

        margin-top: 35px;
    }


    .silver-bottom span {
        width: 30px;
    }


    .silver-bottom p {
        font-size: 9px;

        text-align: center;
    }

}


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

@media (max-width: 380px) {

    .silver-heading h1 {
        font-size: 29px;
    }


    .silver-image {
        height: 370px;
    }


    .silver-overlay h2 {
        font-size: 22px;
    }

}