/*========================================================*
    CHS INTERNATIONAL
    PREMIUM WHOLE SPICES PRODUCT DETAIL CSS
*========================================================*/


/*========================================================*
    WHOLE SPICES HERO
*========================================================*/

.whole-detail-hero{

    position:relative;

    width:100%;

    min-height:78vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


/*========================================================*
    WHOLE SPICES HERO BACKGROUND IMAGES
*========================================================*/

/*
Use the correct class together with
.whole-detail-hero in your HTML.
*/

.cumin-hero{

    background:
        url("../images/cumin-seeds.jpg")
        center/cover
        no-repeat;

}

.fennel-hero{

    background:
        url("../images/fennel-seeds.jpg")
        center/cover
        no-repeat;

}

.cardamom-hero{

    background:
        url("../images/cardamom.jpg")
        center/cover
        no-repeat;

}

.turmeric-fingers-hero{

    background:
        url("../images/turmeric-fingers.jpg")
        center/cover
        no-repeat;

}

.red-chilli-hero{

    background:
        url("../images/Red-Chilli-Whole.jpg")
        center/cover
        no-repeat;

}


/*
If your HTML uses these more specific names,
these are also supported.
*/

.cumin-seeds-hero{

    background:
        url("../images/cumin.jpg")
        center/cover
        no-repeat;

}

.fennel-seeds-hero{

    background:
        url("../images/fennel.jpg")
        center/cover
        no-repeat;

}

.coriander-hero{

    background:
        url("../images/coriander.jpg")
        center/cover
        no-repeat;

}

.turmeric-fingers-hero{

    background:
        url("../images/turmeric.jpg")
        center/cover
        no-repeat;

}

.red-chilli-whole-hero{

    background:
        url("../images/chilli.jpg")
        center/cover
        no-repeat;

}


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

.whole-detail-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            120deg,
            rgba(11,31,26,.78),
            rgba(11,43,38,.40),
            rgba(11,31,26,.72)
        );

    pointer-events:none;

}


/*========================================================*
    HERO GOLD CINEMATIC LIGHT
*========================================================*/

.whole-detail-hero::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.15),
            rgba(212,175,55,.06) 35%,
            transparent 70%
        );

    z-index:1;

    pointer-events:none;

    animation:
        wholeHeroGlow
        8s
        ease-in-out
        infinite
        alternate;

}


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

.whole-detail-hero-content{

    position:relative;

    z-index:2;

    width:90%;

    max-width:900px;

    color:#FFFFFF;

    animation:
        wholeHeroContent
        1.1s
        cubic-bezier(.2,.7,.2,1)
        both;

}


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

.whole-detail-hero-content span{

    display:inline-block;

    padding:10px 24px;

    background:
        rgba(212,175,55,.22);

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius:50px;

    color:#FFE27A;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

    text-transform:uppercase;

    backdrop-filter:blur(5px);

    animation:
        wholeBadgeReveal
        .8s
        .15s
        ease
        both;

    box-shadow:
        0 0 0
        rgba(212,175,55,0);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.whole-detail-hero-content span:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 30px
        rgba(212,175,55,.20);

}


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

.whole-detail-hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:76px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

    color:#FFFFFF;

    letter-spacing:.5px;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,.55);

    animation:
        wholeTitleReveal
        1s
        .25s
        cubic-bezier(.2,.7,.2,1)
        both;

}


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

.whole-detail-hero-content p{

    font-family:'Montserrat',sans-serif;

    font-size:21px;

    font-weight:400;

    line-height:1.8;

    max-width:760px;

    margin:auto;

    color:#FFFFFF;

    text-shadow:
        0 3px 12px
        rgba(0,0,0,.45);

    animation:
        wholeDescriptionReveal
        .9s
        .45s
        ease
        both;

}


/*========================================================*
    BUTTONS
*========================================================*/

.whole-detail-btns{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    animation:
        wholeButtonsReveal
        .9s
        .6s
        ease
        both;

}


.quote-btn,
.spec-btn{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:15px 38px;

    border-radius:50px;

    text-decoration:none;

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

    font-size:16px;

    font-weight:600;

    letter-spacing:.4px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

}


/*========================================================*
    BUTTON SHINE
*========================================================*/

.quote-btn::before,
.spec-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:65%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:
        skewX(-25deg);

    transition:
        left .8s ease;

    z-index:-1;

}


.quote-btn:hover::before,
.spec-btn:hover::before{

    left:150%;

}


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

.quote-btn{

    background:#D4AF37;

    color:#12372A;

    box-shadow:
        0 8px 25px
        rgba(212,175,55,.20);

}


.quote-btn:hover{

    background:#FFFFFF;

    color:#12372A;

    transform:
        translateY(-6px);

    box-shadow:
        0 15px 35px
        rgba(212,175,55,.28);

}


/*========================================================*
    SPEC BUTTON
*========================================================*/

.spec-btn{

    border:
        2px solid
        #FFFFFF;

    color:#FFFFFF;

    background:
        rgba(255,255,255,.03);

}


.spec-btn:hover{

    background:#FFFFFF;

    color:#12372A;

    transform:
        translateY(-6px);

    box-shadow:
        0 12px 30px
        rgba(255,255,255,.15);

}


/*========================================================*
    BUTTON ICON
*========================================================*/

.quote-btn i,
.spec-btn i{

    transition:
        transform .35s ease;

}


.quote-btn:hover i,
.spec-btn:hover i{

    transform:
        translateX(5px);

}


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

@media(max-width:768px){

    .whole-detail-hero{

        min-height:65vh;

    }


    .whole-detail-hero-content span{

        font-size:13px;

        padding:8px 18px;

    }


    .whole-detail-hero-content h1{

        font-size:44px;

    }


    .whole-detail-hero-content p{

        font-size:17px;

        line-height:1.7;

    }


    .whole-detail-btns{

        gap:15px;

        margin-top:30px;

    }


    .quote-btn,
    .spec-btn{

        width:100%;

        max-width:260px;

        padding:14px 25px;

        font-size:15px;

    }

}


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

.whole-detail-overview{

    position:relative;

    overflow:hidden;

    padding:25px 0 80px;

    background:var(--bg-dark);

}


/*========================================================*
    OVERVIEW GOLD ATMOSPHERE
*========================================================*/

.whole-detail-overview::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    right:-180px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.08),
            transparent 70%
        );

    pointer-events:none;

    animation:
        softGlow
        7s
        ease-in-out
        infinite
        alternate;

}


/*========================================================*
    OVERVIEW CONTAINER
*========================================================*/

.whole-detail-overview .container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:45% 55%;

    gap:60px;

    align-items:start;

}


/*========================================================*
    LEFT COLUMN
*========================================================*/

.whole-detail-left{

    display:flex;

    flex-direction:column;

}


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

.whole-detail-image{

    position:relative;

    margin-bottom:40px;

    perspective:1000px;

    animation:
        productImageReveal
        1s
        cubic-bezier(.22,1,.36,1)
        both;

}


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

.whole-detail-image img{

    position:relative;

    width:100%;

    max-width:100%;

    height:430px;

    object-fit:cover;

    display:block;

    border-radius:25px;

    border:
        4px solid
        #FFFFFF;

    outline:
        2px solid
        #D4AF37;

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

    transform:
        scale(.96);

    will-change:transform;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        box-shadow .7s ease,
        filter .5s ease;

}


/*========================================================*
    IMAGE GOLD GLOW
*========================================================*/

.whole-detail-image::after{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:28px;

    pointer-events:none;

    box-shadow:
        0 0 0
        rgba(212,175,55,0);

    transition:
        box-shadow .5s ease,
        opacity .5s ease;

    opacity:0;

}


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

.whole-detail-image::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    border-radius:25px;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:
        skewX(-25deg);

    pointer-events:none;

    z-index:3;

    transition:
        left 1s ease;

}


.whole-detail-image:hover::before{

    left:150%;

}


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

.whole-detail-image:hover::after{

    opacity:1;

    box-shadow:
        0 0 25px
        rgba(212,175,55,.22),
        0 0 55px
        rgba(212,175,55,.10);

}


.whole-detail-image:hover img{

    transform:
        scale(1.035)
        rotateX(1deg)
        rotateY(-1deg);

    box-shadow:
        0 28px 60px
        rgba(0,0,0,.28),
        0 0 25px
        rgba(212,175,55,.12);

    filter:
        brightness(1.04)
        saturate(1.05);

}


/*========================================================*
    PRODUCT DETAILS
*========================================================*/

.whole-detail-description{

    margin-top:0;

    animation:
        descriptionReveal
        .9s
        cubic-bezier(.22,1,.36,1)
        .15s
        both;

}


.whole-detail-description h2{

    position:relative;

    color:var(--gold);

    font-size:38px;

    font-weight:700;

    margin-bottom:18px;

    transition:
        color .35s ease,
        transform .35s ease;

}


.whole-detail-description h2:hover{

    transform:
        translateX(5px);

}


.whole-detail-description h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin-top:10px;

    border-radius:10px;

    background:var(--gold);

    transform-origin:left;

    animation:
        descriptionLine
        1s
        .8s
        ease
        both;

}


.whole-detail-description p{

    color:var(--text-light);

    font-size:17px;

    line-height:1.8;

    margin-bottom:30px;

}


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

.whole-detail-spec{

    display:flex;

    flex-direction:column;

    height:100%;

    animation:
        specSectionReveal
        1s
        cubic-bezier(.22,1,.36,1)
        .25s
        both;

}


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

.whole-detail-spec .section-heading{

    text-align:left;

    margin-bottom:25px;

}


.whole-detail-spec .section-heading small{

    display:block;

    color:var(--gold);

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;

    animation:
        specSmallReveal
        .7s
        ease
        .4s
        both;

}


.whole-detail-spec .section-heading h2{

    color:var(--gold);

    font-size:36px;

    font-weight:700;

    margin-bottom:12px;

    animation:
        specHeadingReveal
        .8s
        ease
        .5s
        both;

}


.whole-detail-spec .section-heading p{

    color:var(--text-light);

    font-size:15px;

    line-height:1.6;

    animation:
        specParagraphReveal
        .8s
        ease
        .6s
        both;

}


/*========================================================*
    SPEC LIST
*========================================================*/

.spec-list{

    list-style:none;

    padding:0;

    margin:0;

    flex:1;

    overflow-y:auto;

    max-height:760px;

    padding-right:8px;

    scrollbar-width:thin;

    scrollbar-color:
        var(--gold)
        rgba(255,255,255,.08);

}


/*========================================================*
    SPEC LIST ITEM
*========================================================*/

.spec-list li{

    position:relative;

    overflow:hidden;

    padding:18px 0;

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

    transition:
        .3s;

    animation:
        specRowReveal
        .65s
        cubic-bezier(.22,1,.36,1)
        both;

}


.spec-list li:last-child{

    border-bottom:none;

}


/*========================================================*
    SPEC STAGGER
*========================================================*/

.spec-list li:nth-child(1){
    animation-delay:.15s;
}

.spec-list li:nth-child(2){
    animation-delay:.22s;
}

.spec-list li:nth-child(3){
    animation-delay:.29s;
}

.spec-list li:nth-child(4){
    animation-delay:.36s;
}

.spec-list li:nth-child(5){
    animation-delay:.43s;
}

.spec-list li:nth-child(6){
    animation-delay:.50s;
}

.spec-list li:nth-child(7){
    animation-delay:.57s;
}

.spec-list li:nth-child(8){
    animation-delay:.64s;
}

.spec-list li:nth-child(9){
    animation-delay:.71s;
}

.spec-list li:nth-child(10){
    animation-delay:.78s;
}

.spec-list li:nth-child(11){
    animation-delay:.85s;
}

.spec-list li:nth-child(12){
    animation-delay:.92s;
}


/*========================================================*
    SPEC GOLD SWEEP
*========================================================*/

.spec-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--gold),
            transparent
        );

    transform:
        scaleY(0);

    transform-origin:center;

    transition:
        transform .4s ease;

}


.spec-list li:hover::before{

    transform:
        scaleY(1);

}


/*========================================================*
    TITLE + ICON
*========================================================*/

.spec-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:8px;

}


.spec-title i{

    color:var(--gold);

    font-size:18px;

    width:22px;

    text-align:center;

    flex-shrink:0;

    opacity:1;

    transition:
        transform .35s ease,
        text-shadow .35s ease;

}


.spec-title span{

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    line-height:1.2;

}


.spec-list li:hover .spec-title i{

    transform:
        scale(1.18)
        rotate(-4deg);

    text-shadow:
        0 0 8px
        rgba(212,175,55,.45);

}


.spec-list li:hover span{

    color:#E8C75A;

}


/*========================================================*
    SPEC VALUE
*========================================================*/

.spec-list strong{

    display:block;

    margin-left:34px;

    color:var(--white);

    font-size:17px;

    font-weight:500;

    line-height:1.6;

    word-break:break-word;

    transition:
        transform .35s ease,
        color .35s ease;

}


.spec-list li:hover{

    padding-left:8px;

}


.spec-list li:hover strong{

    color:#FFFFFF;

    transform:
        translateX(4px);

}


/*========================================================*
    SCROLLBAR
*========================================================*/

.spec-list::-webkit-scrollbar{

    width:7px;

}


.spec-list::-webkit-scrollbar-track{

    background:
        rgba(255,255,255,.06);

    border-radius:20px;

}


.spec-list::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            var(--gold),
            var(--gold-light)
        );

    border-radius:20px;

    transition:
        background .3s ease;

}


.spec-list:hover::-webkit-scrollbar-thumb{

    background:#E4C96A;

}


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

.spec-inquiry-btn{

    margin-top:30px;

    animation:
        inquiryReveal
        .8s
        .7s
        ease
        both;

}


.spec-inquiry-btn a{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 32px;

    background:var(--gold);

    color:var(--bg-dark);

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    box-shadow:
        0 8px 22px
        rgba(212,175,55,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}


.spec-inquiry-btn a::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:
        skewX(-25deg);

    transition:
        left .8s ease;

    z-index:-1;

}


.spec-inquiry-btn a:hover::before{

    left:145%;

}


.spec-inquiry-btn a:hover{

    background:#FFFFFF;

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(212,175,55,.25);

}


/*========================================================*
    INQUIRY BUTTON ICON
*========================================================*/

.spec-inquiry-btn a i{

    transition:
        transform .35s ease;

}


.spec-inquiry-btn a:hover i{

    transform:
        translateX(5px);

}


/*========================================================*
    RESPONSIVE OVERVIEW
*========================================================*/

@media(max-width:991px){

    .whole-detail-overview{

        padding:80px 0;

    }


    .whole-detail-overview .container{

        width:92%;

        grid-template-columns:1fr;

        gap:45px;

    }


    .whole-detail-left{

        order:1;

    }


    .whole-detail-spec{

        order:2;

    }


    .whole-detail-image{

        margin-bottom:30px;

    }


    .whole-detail-description{

        margin-top:0;

    }

}


@media(max-width:768px){

    .whole-detail-overview{

        padding:60px 0;

    }


    .whole-detail-overview .container{

        width:95%;

        grid-template-columns:1fr;

        gap:35px;

    }


    .whole-detail-image{

        margin-bottom:25px;

    }


    .whole-detail-image img{

        width:100%;

        max-width:100%;

        height:300px;

    }


    .whole-detail-description h2{

        font-size:30px;

    }


    .whole-detail-description p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:25px;

    }


    .whole-detail-spec{

        padding:22px;

        border-radius:18px;

    }


    .whole-detail-spec .section-heading h2{

        font-size:28px;

    }


    .whole-detail-spec .section-heading p{

        font-size:14px;

    }


    .spec-list li{

        padding:14px;

    }


    .spec-list strong{

        text-align:left;

    }


    .spec-inquiry-btn a{

        width:100%;

        justify-content:center;

    }

}


@media(max-width:576px){

    .whole-detail-overview{

        padding:50px 0;

    }


    .whole-detail-image img{

        height:240px;

    }


    .whole-detail-description h2{

        font-size:26px;

    }


    .whole-detail-description p{

        font-size:14px;

    }


    .whole-detail-spec{

        padding:18px;

    }

}


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

.whole-detail-list{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

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

    gap:12px;

}


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

.whole-detail-list li{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 16px;

    min-height:52px;

    background:#FFFFFF;

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

    border-radius:10px;

    color:#12372A;

    font-size:15px;

    font-weight:600;

    line-height:1.2;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    animation:
        featureReveal
        .7s
        cubic-bezier(.22,1,.36,1)
        both;

}


/*========================================================*
    FEATURE STAGGER
*========================================================*/

.whole-detail-list li:nth-child(1){
    animation-delay:.10s;
}

.whole-detail-list li:nth-child(2){
    animation-delay:.18s;
}

.whole-detail-list li:nth-child(3){
    animation-delay:.26s;
}

.whole-detail-list li:nth-child(4){
    animation-delay:.34s;
}

.whole-detail-list li:nth-child(5){
    animation-delay:.42s;
}

.whole-detail-list li:nth-child(6){
    animation-delay:.50s;
}


/*========================================================*
    FEATURE SHINE
*========================================================*/

.whole-detail-list li::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;

}


.whole-detail-list li:hover::after{

    left:140%;

}


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

.whole-detail-list li:hover{

    transform:
        translateX(5px);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.12);

}


.whole-detail-list li i{

    color:var(--gold);

    font-size:16px;

    min-width:18px;

    flex-shrink:0;

    transition:
        transform .35s ease,
        text-shadow .35s ease;

}


.whole-detail-list li:hover i{

    transform:
        scale(1.18);

    text-shadow:
        0 0 8px
        rgba(212,175,55,.4);

}


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

@media(max-width:768px){

    .whole-detail-list{

        grid-template-columns:1fr;

        gap:10px;

    }


    .whole-detail-list li{

        min-height:48px;

        padding:10px 14px;

        font-size:14px;

    }

}


/*========================================================*
    PACKAGING
*========================================================*/

.packaging-list{

    margin-top:12px;

    padding-left:22px;

}


.packaging-list li{

    color:var(--white);

    opacity:1;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:500;

    line-height:1.8;

    transition:
        transform .3s ease,
        color .3s ease;

}


.packaging-list li::marker{

    color:var(--gold);

}


.packaging-list li:hover{

    transform:
        translateX(5px);

    color:#E8C75A;

}


/*========================================================*
    PRODUCT NAME
*========================================================*/

.product-name{

    position:relative;

    overflow:hidden;

    background:var(--bg-dark);

    padding:20px 0 15px;

    text-align:center;

}


/*========================================================*
    PRODUCT NAME GLOW
*========================================================*/

.product-name::before{

    content:"";

    position:absolute;

    width:400px;

    height:200px;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(212,175,55,.08),
            transparent 70%
        );

    pointer-events:none;

    animation:
        productNameGlow
        6s
        ease-in-out
        infinite
        alternate;

}


.product-name .container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1200px;

    margin:auto;

}


.product-name h1{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    font-weight:700;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:2px;

    line-height:1.1;

    display:inline-block;

    position:relative;

    padding-bottom:12px;

    animation:
        productNameReveal
        1s
        cubic-bezier(.22,1,.36,1)
        both;

}


.product-name h1::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:
        translateX(-50%)
        scaleX(0);

    transform-origin:center;

    width:80px;

    height:3px;

    background:var(--gold);

    border-radius:10px;

    animation:
        productUnderlineReveal
        .8s
        ease
        .55s
        forwards;

}


/*========================================================*
    BACK BUTTON
    FIXED AT TOP-LEFT OF HERO
*========================================================*/

.back-arrow{

    position:absolute;

    left:5%;

    top:28px;

    transform:none;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:transparent;

    color:var(--gold);

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:600;

    letter-spacing:.5px;

    overflow:hidden;

    isolation:isolate;

    transition:
        transform .35s ease,
        color .35s ease;

    z-index:100;

    animation:
        backButtonReveal
        .8s
        .2s
        ease
        both;

}


.back-arrow::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.45) 50%,
            transparent 80%
        );

    transform:
        translateX(-120%);

    transition:
        transform .7s ease;

    z-index:-1;

}


.back-arrow:hover::before{

    transform:
        translateX(120%);

}


.back-arrow i{

    font-size:20px;

    transition:
        transform .35s ease;

}


.back-arrow:hover{

    color:#FFFFFF;

    transform:
        translateX(-5px);

}


.back-arrow:hover i{

    transform:
        translateX(-5px);

}


/*========================================================*
    PRODUCT NAME MOBILE
*========================================================*/

@media(max-width:768px){

    .product-name{

        padding:18px 0 12px;

    }


    .product-name h1{

        font-size:36px;

    }


    .product-name h1::after{

        width:60px;

    }


    .back-arrow{

        left:4%;

        top:18px;

        font-size:15px;

        padding:8px 12px;

    }


    .back-arrow span{

        display:none;

    }


    .back-arrow i{

        font-size:22px;

    }

}


/*========================================================*
    KEYFRAME ANIMATIONS
*========================================================*/

@keyframes wholeHeroGlow{

    0%{

        opacity:.35;

        transform:
            translate(-50%,-50%)
            scale(.85);

    }

    100%{

        opacity:.85;

        transform:
            translate(-50%,-50%)
            scale(1.15);

    }

}


@keyframes wholeHeroContent{

    from{

        opacity:0;

        transform:
            translateY(35px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes wholeBadgeReveal{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.9);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes wholeTitleReveal{

    from{

        opacity:0;

        transform:
            translateY(35px)
            scale(.96);

        letter-spacing:7px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:.5px;

    }

}


@keyframes wholeDescriptionReveal{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes wholeButtonsReveal{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes productNameReveal{

    from{

        opacity:0;

        transform:
            translateY(30px);

        filter:
            blur(6px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


@keyframes productUnderlineReveal{

    from{

        transform:
            translateX(-50%)
            scaleX(0);

    }

    to{

        transform:
            translateX(-50%)
            scaleX(1);

    }

}


@keyframes productNameGlow{

    from{

        opacity:.4;

        transform:
            translate(-50%,-50%)
            scale(.8);

    }

    to{

        opacity:.9;

        transform:
            translate(-50%,-50%)
            scale(1.15);

    }

}


@keyframes productImageReveal{

    from{

        opacity:0;

        transform:
            translateX(-35px)
            scale(.96);

        filter:
            blur(5px);

    }

    to{

        opacity:1;

        transform:
            translateX(0)
            scale(1);

        filter:
            blur(0);

    }

}


@keyframes descriptionReveal{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes descriptionLine{

    from{

        width:0;

    }

    to{

        width:55px;

    }

}


@keyframes specSectionReveal{

    from{

        opacity:0;

        transform:
            translateX(35px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes specSmallReveal{

    from{

        opacity:0;

        letter-spacing:8px;

    }

    to{

        opacity:1;

        letter-spacing:2px;

    }

}


@keyframes specHeadingReveal{

    from{

        opacity:0;

        transform:
            translateY(15px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes specParagraphReveal{

    from{

        opacity:0;

        transform:
            translateY(12px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes specRowReveal{

    from{

        opacity:0;

        transform:
            translateX(20px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes featureReveal{

    from{

        opacity:0;

        transform:
            translateY(18px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes inquiryReveal{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/*========================================================*
    BACK BUTTON ANIMATION
*========================================================*/

@keyframes backButtonReveal{

    from{

        opacity:0;

        transform:
            translateX(-25px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes softGlow{

    from{

        opacity:.45;

        transform:
            scale(.9);

    }

    to{

        opacity:.9;

        transform:
            scale(1.1);

    }

}


/*========================================================*
    MOBILE ANIMATION ADJUSTMENTS
*========================================================*/

@media(max-width:768px){

    .whole-detail-hero::after{

        width:400px;

        height:400px;

    }


    .whole-detail-image:hover img{

        transform:
            scale(1.02);

    }


    .whole-detail-list li:hover{

        transform:
            translateX(3px);

    }


    .spec-list li:hover{

        padding-left:5px;

    }


    .quote-btn:hover,
    .spec-btn:hover,
    .spec-inquiry-btn a:hover{

        transform:
            translateY(-3px);

    }

}


/*========================================================*
    REDUCED MOTION
*========================================================*/

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}