/* ==========================================================
   PRODUCTS PAGE
========================================================== */

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

.products-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#0D0C0B;

    padding-top:140px;

}

.products-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.05);

    transition:transform 8s ease;

}

.products-hero:hover .hero-image{

    transform:scale(1.1);

}

.products-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,8,8,.84) 0%,
        rgba(8,8,8,.68) 40%,
        rgba(8,8,8,.35) 100%
    );

}

.products-hero .hero-content{

    position:relative;

    z-index:5;

    width:640px;

    margin-left:8%;

    margin-top:90px;

    color:#F5F1EA;

}

.products-hero h1{

    font-family:var(--heading-font);

    font-size:5.2rem;

    line-height:.95;

    margin:22px 0 30px;

    color:#F5F1EA;

}

.products-hero p{

    color:rgba(245,241,234,.82);

    line-height:2;

    max-width:560px;

    font-size:1.08rem;

}

/* ==========================================================
   INTRO
========================================================== */

.products-intro{

    background:#0D0C0B;

    padding:140px 8%;

}

.intro-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.intro-content h2{

    color:#F5F1EA;

    font-size:4rem;

    margin:25px 0;

    font-family:var(--heading-font);

}

.intro-content p{

    color:rgba(245,241,234,.76);

    line-height:2;

    max-width:760px;

    margin:auto;

}
/* ==========================================================
   PRODUCT SECTION
========================================================== */

.product-section{

    background:#0D0C0B;

    padding:140px 8%;

}

.section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 90px;

}

.section-heading h2{

    font-family:var(--heading-font);

    font-size:4rem;

    color:#F5F1EA;

    margin:20px 0 25px;

    line-height:1.1;

}

.section-heading p{

    max-width:700px;

    margin:auto;

    color:rgba(245,241,234,.72);

    line-height:2;

    font-size:1.05rem;

}

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

.products-grid{

    display:grid;

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

    gap:35px;

}

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

.product-card{

    display:block;

    overflow:hidden;

    text-decoration:none;

    background:#111111;

    border:1px solid rgba(199,155,99,.18);

    border-radius:14px;

    transition:.35s ease;

}

.product-card:hover{

    transform:translateY(-10px);

    border-color:#C79B63;

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

}

.product-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

.product-card:hover img{

    transform:scale(1.06);

}

.card-content{

    padding:30px;

}

.card-content h3{

    color:#F5F1EA;

    font-family:var(--heading-font);

    font-size:2rem;

    margin-bottom:12px;

}

.card-content p{

    color:rgba(245,241,234,.70);

    line-height:1.8;

    margin-bottom:22px;

    font-size:.96rem;

}

.card-content span{

    color:#C79B63;

    letter-spacing:2px;

    font-size:.85rem;

    text-transform:uppercase;

    transition:.35s ease;

}

.product-card:hover span{

    letter-spacing:3px;

}

/* ==========================================================
   SADDLES
========================================================== */

.saddles-section{

    padding-top:60px;

}

.large-card img{

    height:420px;

}
/* ==========================================================
   MANUFACTURING BANNER
========================================================== */

.manufacturing-banner{

    position:relative;

    height:75vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0D0C0B;

}

.manufacturing-banner img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 8s ease;

}

.manufacturing-banner:hover img{

    transform:scale(1.08);

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,8,8,.72);

}

.banner-content{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#F5F1EA;

    padding:0 20px;

}

.banner-content h2{

    font-family:var(--heading-font);

    font-size:4.6rem;

    line-height:1.05;

    margin:25px 0;

}

.banner-content p{

    max-width:720px;

    margin:auto;

    color:rgba(245,241,234,.76);

    line-height:2;

    font-size:1.05rem;

}

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

.products-cta{

    background:#0D0C0B;

    padding:150px 8% 180px;

}

.products-cta .cta-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.products-cta h2{

    font-family:var(--heading-font);

    font-size:4rem;

    color:#F5F1EA;

    line-height:1.1;

    margin:20px 0 30px;

}

.products-cta p{

    max-width:760px;

    margin:0 auto 45px;

    color:rgba(245,241,234,.72);

    line-height:2;

    font-size:1.05rem;

}
/* ==========================================================
   PREMIUM MICRO ANIMATIONS
========================================================== */

.product-card,
.large-card,
.banner-content,
.intro-content,
.section-heading,
.products-cta .cta-content{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.product-card{

    position:relative;

}

.product-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#C79B63;

    transition:.45s ease;

}

.product-card:hover::after{

    width:100%;

}

.card-content h3{

    transition:.35s ease;

}

.product-card:hover h3{

    color:#C79B63;

}

.banner-content h2,
.products-cta h2,
.section-heading h2,
.intro-content h2{

    text-wrap:balance;

}

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

@media(max-width:1200px){

.products-grid{

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

gap:30px;

}

.hero-content{

width:85%;

}

}

@media(max-width:900px){

.products-hero h1{

font-size:4rem;

}

.intro-content h2,
.section-heading h2,
.banner-content h2,
.products-cta h2{

font-size:3rem;

}

.manufacturing-banner{

height:60vh;

}

}

@media(max-width:768px){

.products-hero{

min-height:90vh;

}

.products-hero .hero-content{

margin:0 auto;

width:90%;

text-align:center;

}

.products-hero h1{

font-size:3rem;

}

.products-grid{

grid-template-columns:1fr;

}

.product-card img{

height:300px;

}

.large-card img{

height:360px;

}

.products-intro,
.product-section,
.products-cta{

padding:90px 6%;

}

.banner-content h2,
.products-cta h2,
.section-heading h2,
.intro-content h2{

font-size:2.5rem;

}

.banner-content p,
.products-cta p,
.intro-content p,
.section-heading p{

font-size:1rem;

}

}
/* ==========================================================
   UTILITIES
========================================================== */

.container{

    width:min(1320px,92%);

    margin:0 auto;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

section{

    position:relative;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111111;

}

::-webkit-scrollbar-thumb{

    background:#C79B63;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#d9b37b;

}

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

.product-card{

    backface-visibility:hidden;

    will-change:transform;

}

.product-card img{

    filter:brightness(.95);

}

.product-card:hover img{

    filter:brightness(1);

}

.manufacturing-banner img{

    filter:brightness(.75);

}

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

.gold-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border:1px solid #C79B63;

    border-radius:999px;

    color:#F5F1EA;

    transition:.35s ease;

    font-weight:500;

    letter-spacing:1px;

}

.gold-btn:hover{

    background:#C79B63;

    color:#111111;

}

/* ==========================================================
   SPACING
========================================================== */

.products-intro{

    padding-top:140px;

    padding-bottom:140px;

}

.product-section{

    padding-bottom:140px;

}

.product-section:last-of-type{

    padding-bottom:100px;

}

/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media(min-width:1600px){

.products-hero h1{

font-size:6rem;

}

.section-heading h2{

font-size:4.8rem;

}

.banner-content h2{

font-size:5rem;

}

.products-cta h2{

font-size:4.8rem;

}

}

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

@media(max-width:480px){

.products-hero h1{

font-size:2.4rem;

}

.products-hero p{

font-size:.95rem;

line-height:1.8;

}

.section-heading h2{

font-size:2rem;

}

.banner-content h2{

font-size:2rem;

}

.products-cta h2{

font-size:2rem;

}

.card-content{

padding:22px;

}

.card-content h3{

font-size:1.6rem;

}

.gold-btn{

width:100%;

}

}

/* ==========================================================
   END OF PRODUCTS PAGE
========================================================== */