/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0b0b0b;
    color:#fff;
}

/* ==========================
   HEADER
========================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgb(255, 255, 255);
    backdrop-filter:blur(10px);
    z-index:999;
}

.navbar{
    width:90%;
    max-width:1300px;
    height:85px;

    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    width:180px;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:35px;
}

.nav-links a{
    color:#000000;
    text-decoration:none;
    transition:.3s;
    font-size:16px;
}

.nav-links a:hover{
    color:#0099ff;
}

.quote-btn{

    text-decoration:none;
    background:#C8A96A;
    color:#000;

    padding:12px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.quote-btn:hover{

    transform:translateY(-3px);

}

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

.hero{
    width:100%;
    min-height:100vh;
    background:url("../images/hero/hero1.png") no-repeat center center;
    background-size:cover;
    display:flex;
    align-items:center;
    position:relative;
    padding:120px 8% 170px;
    overflow:hidden;
}

/* Hero Content */

.hero-content{
    max-width:650px;
    z-index:10;
}

.hero-subtitle{
    display:inline-block;
    color:#ea00ff;
    font-size:15px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.hero-content h1{
    font-family:'Playfair Display',serif;
    font-size:30px;
    line-height:1.15;
    color:#000000;
    margin-bottom:25px;
    margin-top: 22px;
    text-shadow:0 3px 10px rgba(0,0,0,.25);
}

.hero-content p{
    max-width:360px;
    color:#fff;
    font-size:19px;
    line-height:1.8;
    margin-bottom:40px;
    text-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* Button */

.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#C8A96A;
    color:#111;
    text-decoration:none;
    padding:16px 36px;
    border-radius:50px;
    font-weight:600;
    transition:.35s;
}

.hero-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(200,169,106,.35);
}

.hero-btn i{
    transition:.3s;
}

.hero-btn:hover i{
    transform:translateX(5px);
}

/*==============================
        FEATURE BAR
==============================*/

.hero-features{

    position:absolute;
    left:0;
    bottom:0;
    width:100%;

    background:rgba(20,20,20,.92);

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

    gap:25px;

    padding:25px 8%;

}

.feature-item{

    display:flex;
    align-items:center;
    gap:15px;

}

.feature-item i{

    width:58px;
    height:58px;

    background:#C8A96A;

    color:#111;

    border-radius:50%;

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

    font-size:22px;

}

.feature-item h4{

    color:#fff;
    font-size:19px;
    margin-bottom:5px;

}

.feature-item p{

    color:#ddd;
    font-size:14px;

}

/*==============================
        ANIMATION
==============================*/

.hero-content{
    animation:fadeUp .9s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}



/*==================================
        FEATURED CATEGORIES
==================================*/

.categories{
    width:100%;
    padding:100px 8%;
    background:#111;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#C8A96A;
    font-size:15px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.section-title h2{
    font-size:48px;
    font-family:'Playfair Display',serif;
    margin:15px 0;
    color:#fff;
}

.section-title p{
    max-width:700px;
    margin:auto;
    color:#bdbdbd;
    line-height:1.8;
    font-size:16px;
}

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

.category-grid{

    display:grid;

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

    gap:30px;

}

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

.category-card{

    background:#181818;

    border-radius:18px;

    overflow:hidden;

    transition:.4s;

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

    cursor:pointer;

    height:600px;

}

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

.category-image{

    overflow:hidden;

}

.category-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.6s;

}

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

.category-content{

    padding:25px;

    text-align:center;

}

.category-tag{

    display:inline-block;

    background:rgba(200,169,106,.12);

    color:#C8A96A;

    padding:7px 18px;

    border-radius:50px;

    font-size:13px;

    margin-bottom:15px;

}

.category-content h3{

    font-size:24px;

    color:#fff;

    margin-bottom:15px;

}

.category-content p{

    color:#bdbdbd;

    line-height:1.8;

    font-size:15px;

    margin-bottom:22px;

}

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

.card-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#C8A96A;

    font-weight:600;

    transition:.3s;

}

.card-btn i{

    transition:.3s;

}

.card-btn:hover{

    color:#fff;

}

.card-btn:hover i{

    transform:translateX(6px);

}

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

.category-card:hover{

    transform:translateY(-12px);

    border-color:#C8A96A;

    box-shadow:0 20px 45px rgba(200,169,106,.25);

}

.category-card:hover .category-image img{

    transform:scale(1.12);

}

/*==================================
        WHY CHOOSE EGOR
==================================*/

.why-egor{
    width:100%;
    padding:100px 8%;
    background:#ffffff;
}

/* Main Container */

.why-container{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    align-items:center;
    margin-bottom:70px;
}

/* Left Image */

.why-left{
    overflow:hidden;
    border-radius:20px;
}

.why-left img{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:20px;
    transition:.5s;
}

.why-left:hover img{
    transform:scale(1.05);
}

/* Right Content */

.section-tag{
    display:inline-block;
    color:#C8A96A;
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.why-right h2{
    font-family:'Playfair Display',serif;
    font-size:52px;
    color:#111;
    line-height:1.2;
    margin-bottom:25px;
}

.why-desc{
    color:#666;
    font-size:17px;
    line-height:1.9;
    margin-bottom:35px;
}

/* Points */

.why-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:40px;
}

.point{
    display:flex;
    align-items:center;
    gap:12px;
    color:#222;
    font-weight:500;
}

.point i{
    color:#C8A96A;
    font-size:20px;
}

/* Button */

.why-btn{
    display:inline-block;
    background:#C8A96A;
    color:#111;
    padding:15px 40px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.why-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(200,169,106,.35);
}

/* Bottom Section */

.why-bottom{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;
    align-items:center;
}

/* Bottom Left */

.bottom-left{
    background:#f8f8f8;
    border-radius:20px;
    padding:50px;
    text-align:center;
}

.bottom-left img{
    width:170px;
    margin-bottom:25px;
}

.bottom-left h3{
    color:#999;
    font-size:20px;
    letter-spacing:2px;
    margin-bottom:12px;
}

.bottom-left h2{
    font-family:'Playfair Display',serif;
    font-size:44px;
    color:#111;
    margin-bottom:20px;
}

.bottom-left p{
    color:#666;
    line-height:1.9;
    font-size:16px;
}

/* Bottom Right */

.bottom-right{
    overflow:hidden;
    border-radius:20px;
}

.bottom-right img{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:20px;
    transition:.5s;
}

.bottom-right:hover img{
    transform:scale(1.05);
}

/*==================================
            FOOTER
==================================*/

.footer{
    background:#0b0b0b;
    color:#fff;
    padding:80px 8% 0;
    border-top:1px solid rgba(255,255,255,.08);
}

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

.footer-container{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.5fr;
    gap:50px;
    padding-bottom:60px;
}

/*==========================
        FOOTER BOX
==========================*/

.footer-box{
    width:100%;
}

/*==========================
        LOGO
==========================*/

.footer-logo{
    width:170px;
    background:#fff;
    padding:10px;
    border-radius:10px;
    margin-bottom:20px;
}

.footer-box p{
    color:#bdbdbd;
    line-height:1.9;
    font-size:15px;
    margin-bottom:25px;
}

/*==========================
        HEADINGS
==========================*/

.footer-box h3{
    color:#fff;
    font-size:24px;
    margin-bottom:25px;
    position:relative;
    font-family:'Playfair Display',serif;
}

.footer-box h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:55px;

    height:3px;

    background:#C8A96A;

}

/*==========================
        LINKS
==========================*/

.footer-box ul{
    list-style:none;
}

.footer-box ul li{
    margin-bottom:15px;
}

.footer-box ul li a{

    text-decoration:none;

    color:#bdbdbd;

    transition:.35s;

}

.footer-box ul li a:hover{

    color:#C8A96A;

    padding-left:8px;

}

/*==========================
        CONTACT
==========================*/

.contact-info li{

    display:flex;

    gap:12px;

    color:#bdbdbd;

    margin-bottom:18px;

    line-height:1.7;

}

.contact-info i{

    color:#C8A96A;

    min-width:18px;

    margin-top:4px;

}

/*==========================
      SOCIAL ICONS
==========================*/

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#181818;

    color:#fff;

    border-radius:50%;

    text-decoration:none;

    transition:.35s;

}

.social-icons a:hover{

    background:#C8A96A;

    color:#111;

    transform:translateY(-5px);

}

/*==========================
        GOOGLE MAP
==========================*/

.footer-map{
    margin-top:25px;
    width:100%;
    overflow:hidden;
    border-radius:15px;
    border:2px solid rgba(200,169,106,.25);
    transition:.35s;
}

.footer-map:hover{
    border-color:#C8A96A;
}

.footer-map iframe{
    width:100%;
    height:180px;
    border:0;
    display:block;
}

/*==========================
     GET DIRECTIONS BUTTON
==========================*/

.map-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-top:18px;

    padding:14px 28px;

    background:#C8A96A;

    color:#111;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.map-btn:hover{

    background:#fff;

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(200,169,106,.30);

}

.map-btn i{

    font-size:16px;

}

/*==========================
      FOOTER BOTTOM
==========================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:#bdbdbd;

    font-size:15px;

}

.footer-bottom strong{

    color:#C8A96A;

}

/*==========================
        GOOGLE MAP
==========================*/

.footer-map{
    margin-top:25px;
    width:100%;
    overflow:hidden;
    border-radius:15px;
    border:2px solid rgba(200,169,106,.25);
    transition:.35s;
}

.footer-map:hover{
    border-color:#C8A96A;
}

.footer-map iframe{
    width:100%;
    height:180px;
    border:0;
    display:block;
}

/*==========================
     GET DIRECTIONS BUTTON
==========================*/

.map-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-top:18px;

    padding:14px 28px;

    background:#C8A96A;

    color:#111;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.map-btn:hover{

    background:#fff;

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(200,169,106,.30);

}

.map-btn i{

    font-size:16px;

}

/*==========================
      FOOTER BOTTOM
==========================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:#bdbdbd;

    font-size:15px;

}

.footer-bottom strong{

    color:#C8A96A;

}

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

.floating-buttons{
    position:fixed;
    right:25px;
    bottom:25px;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:9999;
}

/* Common Button */

.float-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#fff;
    font-size:26px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:.35s ease;
    animation:floatPulse 2s infinite;
}

/* WhatsApp */

.float-btn.whatsapp{
    background:#25D366;
}

/* Call */

.float-btn.call{
    background:#C8A96A;
    color:#111;
}

/* Hover */

.float-btn:hover{
    transform:translateY(-6px) scale(1.08);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

/* Pulse Animation */

@keyframes floatPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/*==================================
        ABOUT HERO SECTION
==================================*/

.about-hero{

    position:relative;

    width:100%;

    height:550px;

    background:url("../images/about/about1.png") center center/cover no-repeat;

    display:flex;

    align-items:center;

    overflow:hidden;

}

/* Dark Overlay */

.about-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.45);

}

/* Container */

.about-container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1300px;

    margin:auto;

}

/* Left Content */

.about-text{

    max-width:620px;

    animation:aboutFadeUp 1s ease;

}

/* Subtitle */

.about-subtitle{

    display:inline-block;

    color:#C8A96A;

    font-size:15px;

    font-weight:600;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:22px;

}

/* Heading */

.about-text h1{

    font-family:'Playfair Display',serif;

    font-size:38px;

    line-height:1.1;

    color:#fff;

    margin-bottom:25px;

}

/* Paragraph */

.about-text p{

    font-size:18px;

    color:#f3f3f3;

    line-height:1.8;

    max-width:560px;

}

/* Animation */

@keyframes aboutFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================
        ABOUT COMPANY
==================================*/

.about-company{

    width:100%;

    padding:100px 8%;

    background:#111;

}

.about-company-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

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

.about-company-image{

    overflow:hidden;

    border-radius:20px;

}

.about-company-image img{

    width:100%;

    display:block;

    border-radius:20px;

    transition:.5s;

}

.about-company-image:hover img{

    transform:scale(1.05);

}

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

.section-subtitle{

    display:inline-block;

    color:#C8A96A;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.about-company-content h2{

    font-family:'Playfair Display',serif;

    font-size:48px;

    line-height:1.2;

    color:#fff;

    margin-bottom:22px;

}

.about-company-content p{

    color:#cfcfcf;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}

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

.about-features{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.about-feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:17px;

}

.about-feature i{

    color:#C8A96A;

    font-size:18px;

}

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

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#C8A96A;

    color:#111;

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.about-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(200,169,106,.35);

}

.about-btn i{

    transition:.35s;

}

.about-btn:hover i{

    transform:translateX(6px);

}


/*==================================
          OUR JOURNEY
==================================*/

.journey{

    width:100%;

    padding:100px 8%;

    background:#0f0f0f;

}

.journey-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:70px;

    align-items:center;

}

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

.journey-content h2{

    font-family:'Playfair Display',serif;

    font-size:48px;

    color:#fff;

    line-height:1.2;

    margin:20px 0;

}

.journey-content p{

    font-size:17px;

    color:#cfcfcf;

    line-height:1.9;

    max-width:600px;

}

/*==========================
        RIGHT STATS
==========================*/

.journey-stats{

    display:grid;

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

    gap:25px;

}

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

.journey-card{

    background:#181818;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

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

    transition:.35s;

}

.journey-card h3{

    font-size:42px;

    color:#C8A96A;

    margin-bottom:10px;

    font-weight:700;

}

.journey-card p{

    color:#d5d5d5;

    font-size:16px;

    line-height:1.6;

}

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

.journey-card:hover{

    transform:translateY(-10px);

    border-color:#C8A96A;

    box-shadow:0 18px 40px rgba(200,169,106,.20);

}

/*==================================
        CUSTOMER REVIEWS
==================================*/

.reviews{

    width:100%;

    padding:100px 8%;

    background:#0f0f0fef;

}

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

.reviews-title{

    text-align:center;

    margin-bottom:60px;

}

.reviews-title span{

    color:#C8A96A;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.reviews-title h2{

    font-family:'Playfair Display',serif;

    font-size:48px;

    color:#ffffff;

    margin:18px 0;

}

.reviews-title p{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:1.8;

    font-size:16px;

}

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

.reviews-grid{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

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

.review-card{

    background:#fff;

    padding:35px 30px;

    border-radius:20px;

    text-align:center;

    border:1px solid #e8e8e8;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.review-card:hover{

    transform:translateY(-10px);

    border-color:#C8A96A;

    box-shadow:0 20px 45px rgb(200, 169, 106);

}

/*==========================
      AVATAR
==========================*/

.review-avatar{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#C8A96A;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

/*==========================
        STARS
==========================*/

.stars{

    color:#C8A96A;

    font-size:22px;

    letter-spacing:2px;

    margin-bottom:18px;

}

/*==========================
      REVIEW TEXT
==========================*/

.review-card p{

    color:#666;

    font-size:16px;

    line-height:1.8;

    margin-bottom:25px;

    font-style:italic;

}

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

.review-card h4{

    color:#111;

    font-size:20px;

    margin-bottom:5px;

}

.review-card span{

    color:#888;

    font-size:15px;

}

/*==================================
        PRODUCTS HERO SECTION
==================================*/

.products-hero{

    position:relative;

    width:100%;

    height:550px;

    background:url("../images/products/products-hero.png") center center/cover no-repeat;

    display:flex;

    align-items:center;

    overflow:hidden;

}

/* Overlay */

.products-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.45);

}

/* Container */

.products-container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1300px;

    margin:auto;

}

/* Left Content */

.products-text{

    max-width:650px;

    animation:productsFadeUp 1s ease;

}

/* Subtitle */

.products-subtitle{

    display:inline-block;

    color:#C8A96A;

    font-size:15px;

    font-weight:600;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:20px;

}

/* Heading */

.products-text h1{

    font-family:'Playfair Display',serif;

    font-size:68px;

    line-height:1.1;

    color:#fff;

    margin-bottom:25px;

}

/* Paragraph */

.products-text p{

    font-size:18px;

    line-height:1.8;

    color:#f5f5f5;

    max-width:560px;

}

/* Animation */

@keyframes productsFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================
      PRODUCT CATEGORY TITLE
==================================*/

.product-category-title{

    width:100%;

    padding:90px 8% 60px;

    background:#fff;

}

.category-heading{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.category-heading span{

    display:inline-block;

    color:#C8A96A;

    font-size:25px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.category-heading h2{

    font-family:'Playfair Display',serif;

    font-size:48px;

    color:#111;

    margin-bottom:20px;

}

.category-heading p{

    color:#666;

    font-size:17px;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}

/*==================================
      CATEGORY SECTION
==================================*/

.product-category-section{

    background:#111;

    padding:20px 8% 90px;

}

.product-category-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

/*==========================*/

.product-category-card{

    position:relative;

    height:330px;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

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

    transition:.4s;

}

/*==========================*/

.product-category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

/*==========================*/

.product-category-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:35px 30px;

    background:linear-gradient(to top,
    rgba(0,0,0,.95),
    rgba(0,0,0,.55),
    transparent);

}

/*==========================*/

.product-category-overlay h3{

    color:#fff;

    font-size:34px;

    font-family:'Playfair Display',serif;

    margin-bottom:15px;

}

/*==========================*/

.product-category-overlay a{

    color:#C8A96A;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

.product-category-overlay i{

    margin-left:8px;

    transition:.3s;

}

/*==========================*/

.product-category-card:hover{

    transform:translateY(-10px);

    border-color:#C8A96A;

    box-shadow:0 18px 45px rgba(200,169,106,.30);

}

.product-category-card:hover img{

    transform:scale(1.08);

}

.product-category-card:hover i{

    transform:translateX(6px);

}

/*==================================
        BATH HERO SECTION
==================================*/

.bath-hero{

    position:relative;

    width:100%;

    min-height:520px;

    background:url("../images/bath-faucets/image1.png") no-repeat;

    background-size:cover;

    background-position:right center;

    display:flex;

    align-items:center;

    overflow:hidden;

}

/*==========================*/

.bath-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.80) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.15) 100%
    );

}

/*==========================*/

.bath-hero-content{

    position:relative;

    z-index:2;

    max-width:620px;

    margin-left:8%;

    padding-right:20px;

    text-align:left;

}

/*==========================*/

.hero-subtitle{

    display:inline-block;

    color:#C8A96A;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:18px;

}

/*==========================*/

.bath-hero-content h1{

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:64px;

    line-height:1.1;

    margin-bottom:22px;

}

/*==========================*/

.bath-hero-content p{

    color:#ddd;

    font-size:18px;

    line-height:1.8;

    max-width:550px;

}

/*==================================
        BATH FAUCETS PRODUCTS
==================================*/

.products-section{

    width:100%;

    padding:70px 8%;

    background:#111;

}

.products-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

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

.product-card{

    background:#181818;

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

    border-radius:18px;

    overflow:hidden;

    transition:.4s;

}

.product-card:hover{

    transform:translateY(-10px);

    border-color:#C8A96A;

    box-shadow:0 20px 45px rgba(200,169,106,.25);

}

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

.product-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.08);

}

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

.product-content{

    padding:22px;

    text-align:center;

}

.product-content h3{

    font-family:'Playfair Display',serif;

    font-size:24px;

    color:#fff;

    margin-bottom:18px;

    min-height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    line-height:1.4;

}

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

.product-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#C8A96A;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.product-btn i{

    transition:.3s;

}

.product-btn:hover{

    color:#fff;

}

.product-btn:hover i{

    transform:translateX(6px);

}

/*==================================
      BATH ACCESSORIES HERO
==================================*/

.accessories-hero{

    position:relative;

    width:100%;

    height:500px;

    background:url("../images/bath-accessories/accessories-hero.png") center center/cover no-repeat;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.accessories-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.15) 100%
    );

}

.accessories-content{

    position:relative;

    z-index:2;

    max-width:620px;

    margin-left:8%;

}

.accessories-content .hero-subtitle{

    display:inline-block;

    color:#c8a96a;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.accessories-content h1{

    font-family:'Playfair Display',serif;

    color:#fff;

    font-size:62px;

    line-height:1.1;

    margin-bottom:20px;

}

.accessories-content p{

    color:#ededed;

    font-size:18px;

    line-height:1.8;

}

/*==================================
    BATH ACCESSORIES SECTION
==================================*/

.accessories-section{

    width:100%;

    padding:100px 8%;

    background:#111111;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:#c8a96a;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.section-title h2{

    color:#ffffff;

    font-size:52px;

    font-family:'Playfair Display',serif;

    margin:18px 0;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:#bdbdbd;

    font-size:17px;

    line-height:1.8;

}


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

.accessories-grid{

    display:grid;

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

    gap:35px;

}


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

.accessory-card{

    background:#1b1b1b;

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

    border-radius:18px;

    overflow:hidden;

    transition:.4s;

}

.accessory-card:hover{

    transform:translateY(-10px);

    border-color:#c8a96a;

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

}


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

.accessory-card img{

    width:100%;

    height:280px;

    display:block;

    object-fit:cover;

    transition:.5s;

}

.accessory-card:hover img{

    transform:scale(1.06);

}


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

.accessory-content{

    padding:28px;

    text-align:center;

}

.accessory-content h3{

    color:#ffffff;

    font-size:27px;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;

    line-height:1.4;

}

.accessory-content a{

    color:#c8a96a;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.accessory-content a i{

    margin-left:8px;

    transition:.3s;

}

.accessory-content a:hover{

    color:#ffffff;

}

.accessory-content a:hover i{

    transform:translateX(8px);

}

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

.ptmt-hero{

    position:relative;

    width:100%;

    height:500px;

    background:url("../images/ptmt/ptmt-hero.png") center center/cover no-repeat;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.ptmt-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    90deg,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.15) 100%
    );

}

.ptmt-content{

    position:relative;

    z-index:2;

    max-width:650px;

    margin-left:8%;

}

.ptmt-content .hero-subtitle{

    display:inline-block;

    color:#c8a96a;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.ptmt-content h1{

    color:#ffffff;

    font-size:60px;

    font-family:'Playfair Display',serif;

    line-height:1.2;

    margin-bottom:20px;

}

.ptmt-content p{

    color:#eeeeee;

    font-size:18px;

    line-height:1.8;

}

/*==================================
        P.T.M.T. SECTION
==================================*/

.ptmt-section{

    width:100%;

    padding:100px 8%;

    background:#111111;

}


/*==================================
        SECTION TITLE
==================================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:#c8a96a;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.section-title h2{

    color:#ffffff;

    font-size:52px;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;

}

.section-title p{

    max-width:720px;

    margin:auto;

    color:#bdbdbd;

    font-size:17px;

    line-height:1.8;

}


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

.ptmt-grid{

    display:grid;

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

    gap:35px;

}


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

.ptmt-card{

    background:#1b1b1b;

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

    border-radius:18px;

    overflow:hidden;

    transition:.45s ease;

}

.ptmt-card:hover{

    transform:translateY(-10px);

    border-color:#c8a96a;

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

}


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

.ptmt-card img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.ptmt-card:hover img{

    transform:scale(1.08);

}


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

.ptmt-content{

    padding:28px;

    text-align:center;

}

.ptmt-content h3{

    color:#ffffff;

    font-size:28px;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;

}

.ptmt-content a{

    color:#c8a96a;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.ptmt-content a i{

    margin-left:8px;

    transition:.3s;

}

.ptmt-content a:hover{

    color:#ffffff;

}

.ptmt-content a:hover i{

    transform:translateX(8px);

}

/*==================================
    SHOWERS HERO SECTION
==================================*/

.showers-hero{

    position:relative;

    width:100%;

    height:600px;

    background:url("../images/showers/showers-hero.png") center center/cover no-repeat;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.showers-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
5    90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.15) 100%
    );

}

.showers-content{

    position:relative;

    z-index:2;

    max-width:650px;

    margin-left:8%;

}

.showers-content .hero-subtitle{

    display:inline-block;

    color:#c8a96a;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.showers-content h1{

    color:#ffffff;

    font-size:60px;

    font-family:'Playfair Display',serif;

    line-height:1.2;

    margin-bottom:20px;

}

.showers-content p{

    color:#eeeeee;

    font-size:18px;

    line-height:1.8;

}

/*==================================
      SHOWERS COLLECTION
==================================*/

.showers-section{

    width:100%;

    padding:100px 8%;

    background:#111111;

}

/*==================================
        SECTION TITLE
==================================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:#c8a96a;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.section-title h2{

    color:#ffffff;

    font-size:52px;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;

}

.section-title p{

    max-width:750px;

    margin:auto;

    color:#bdbdbd;

    font-size:17px;

    line-height:1.8;

}


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

.showers-grid{

    display:grid;

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

    gap:35px;

}


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

.showers-card{

    background:#1b1b1b;

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

    border-radius:18px;

    overflow:hidden;

    transition:.45s ease;

}

.showers-card:hover{

    transform:translateY(-10px);

    border-color:#c8a96a;

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

}


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

.showers-card img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.showers-card:hover img{

    transform:scale(1.08);

}


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

.showers-content{

    padding:28px;

    text-align:center;

}

.showers-content h3{

    color:#ffffff;

    font-size:28px;

    font-family:'Playfair Display',serif;

    margin-bottom:18px;

    min-height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1.4;

}

.showers-content a{

    color:#c8a96a;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.showers-content a i{

    margin-left:8px;

    transition:.3s;

}

.showers-content a:hover{

    color:#ffffff;

}

.showers-content a:hover i{

    transform:translateX(8px);

}

/* =========================================
        CATALOGUE PAGE
========================================= */

.catalogue-page {
    width: 100%;
    overflow: hidden;
}


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

.catalogue-hero {

    position: relative;

    width: 100%;
    min-height: 450px;

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

    text-align: center;

    background:
        linear-gradient(
            rgba(0, 0, 0, .62),
            rgba(0, 0, 0, .62)
        ),
        url("../images/catalogue/catalogue-hero.png")
        center / cover no-repeat;

}


.catalogue-hero-overlay {

    position: absolute;

    inset: 0;

}


.catalogue-hero-content {

    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 850px;

}


.catalogue-hero-content span {

    display: block;

    margin-bottom: 18px;

    color: #c8a96a;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 5px;

}


.catalogue-hero-content h1 {

    margin: 0 0 20px;

    color: #fff;

    font-family: 'Playfair Display', serif;

    font-size: 62px;

    font-weight: 500;

    line-height: 1.15;

}


.catalogue-hero-content p {

    max-width: 680px;

    margin: auto;

    color: #eeeeee;

    font-size: 17px;

    line-height: 1.8;

}


/* =====================================================
   CATALOGUE PREVIEW
===================================================== */

.catalogue-preview {
    width: 100%;
    padding: 90px 20px 110px;
    background: #ffffff;
    text-align: center;
}


/* ---------- HEADING ---------- */

.catalogue-heading {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 55px;
}

.catalogue-heading span {
    display: block;
    margin-bottom: 14px;

    color: #c8a96a;

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

    letter-spacing: 4px;
}

.catalogue-heading h2 {
    margin: 0 0 18px;

    color: #111111;

    font-family: "Playfair Display", serif;

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

    line-height: 1.2;
}

.catalogue-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: #666666;

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


/* =====================================================
   CATALOGUE COVER
===================================================== */

.catalogue-cover {
    width: min(650px, 92%);

    margin: 0 auto;
}

.catalogue-cover img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.16);

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

.catalogue-cover img:hover {
    transform: translateY(-6px);

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.20);
}


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

.catalogue-download-btn {
    min-width: 250px;
    height: 60px;

    margin-top: 40px;
    padding: 0 30px;

    display: inline-flex;

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

    gap: 14px;

    border: 1px solid #111111;

    background: #111111;

    color: #ffffff;

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

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

    cursor: pointer;

    transition: all 0.35s ease;
}

.catalogue-download-btn i {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}

.catalogue-download-btn:hover {
    background: #c8a96a;

    border-color: #c8a96a;

    transform: translateY(-3px);
}

.catalogue-download-btn:hover i {
    transform: translateY(3px);
}


/* =====================================================
   POPUP
===================================================== */

.catalogue-popup {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* POPUP ACTIVE */

.catalogue-popup.active {
    visibility: visible;

    opacity: 1;
}


/* =====================================================
   POPUP OVERLAY
===================================================== */

.catalogue-popup-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);
}


/* =====================================================
   POPUP BOX
===================================================== */

.catalogue-popup-box {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    transform: translateY(30px);

    transition:
        transform 0.4s ease;
}


/* POPUP ACTIVE ANIMATION */

.catalogue-popup.active .catalogue-popup-box {
    transform: translateY(0);
}


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

.catalogue-popup-close {
    position: absolute;

    top: 15px;
    right: 18px;

    z-index: 5;

    width: 40px;
    height: 40px;

    display: flex;

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

    border: none;

    background: transparent;

    color: #111111;

    font-size: 32px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

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

.catalogue-popup-close:hover {
    color: #c8a96a;

    transform: rotate(90deg);
}


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

.catalogue-popup-content {
    padding: 55px 50px 50px;
}


/* SMALL TITLE */

.catalogue-popup-content > span {
    display: block;

    margin-bottom: 12px;

    color: #c8a96a;

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

    letter-spacing: 4px;
}


/* MAIN TITLE */

.catalogue-popup-content h2 {
    margin: 0 0 14px;

    color: #111111;

    font-family: "Playfair Display", serif;

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

    line-height: 1.2;
}


/* DESCRIPTION */

.catalogue-popup-content > p {
    margin: 0 0 35px;

    color: #666666;

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   FORM FIELD
===================================================== */

.catalogue-field {
    margin-bottom: 25px;
}

.catalogue-field label {
    display: block;

    margin-bottom: 9px;

    color: #222222;

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

.catalogue-field input {
    width: 100%;
    height: 50px;

    padding: 0 14px;

    border: 1px solid #d5d5d5;

    outline: none;

    background: #ffffff;

    color: #111111;

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

    font-size: 15px;

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

.catalogue-field input::placeholder {
    color: #999999;
}

.catalogue-field input:focus {
    border-color: #c8a96a;

    box-shadow:
        0 0 0 2px rgba(200, 169, 106, 0.10);
}


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

.catalogue-submit {
    width: 100%;
    height: 55px;

    margin-top: 8px;

    display: flex;

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

    gap: 12px;

    border: none;

    background: #111111;

    color: #ffffff;

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

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

    cursor: pointer;

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.catalogue-submit:hover {
    background: #c8a96a;

    transform: translateY(-2px);
}

.catalogue-submit i {
    font-size: 14px;
}

/* =========================================================
   QUBIX PRIME PRODUCTS
========================================================= */

.qubix-products {
    width: 100%;
    padding: 80px 6%;
    background: #ffffff;
}


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

.qubix-products-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.qubix-products-heading span {
    display: inline-block;
    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;

    color: #b9975b;
    text-transform: uppercase;
}

.qubix-products-heading h1 {
    margin: 0 0 18px;

    font-family: "Playfair Display", serif;
    font-size: 48px;
    font-weight: 700;

    color: #17243d;
    line-height: 1.15;
}

.qubix-products-heading p {
    max-width: 720px;
    margin: 0 auto;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;
    color: #666;
}


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

.qubix-product-grid {
    width: 100%;

    display: grid;

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

    gap: 28px;

    max-width: 1400px;
    margin: 0 auto;
}


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

.qubix-product-card {
    position: relative;

    background: #ffffff;

    border: 1px solid #e8e8e8;

    border-radius: 4px;

    overflow: hidden;

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


/* Hover */

.qubix-product-card:hover {
    transform: translateY(-8px);

    border-color: #d2b477;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.10);
}


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

.qubix-product-image {
    width: 100%;
    height: 260px;

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

    padding: 25px;

    background: #fafafa;

    overflow: hidden;
}

.qubix-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transition: transform 0.4s ease;
}


/* Image Hover */

.qubix-product-card:hover
.qubix-product-image img {
    transform: scale(1.06);
}


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

.qubix-product-info {
    padding: 20px 20px 22px;

    text-align: center;

    background: #ffffff;
}

.qubix-product-info h3 {
    margin: 0 0 8px;

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

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

    color: #222;

    line-height: 1.4;
}


/* Product Code */

.qubix-product-info .product-code {
    display: block;

    margin: 0 0 7px;

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

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

    color: #888;

    letter-spacing: 0.5px;
}


/* Product Price */

.qubix-product-info .product-price {
    display: block;

    margin: 0;

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

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

    color: #b9975b;
}


/* =========================================================
   PRODUCT CARD TOP LINE
========================================================= */

.qubix-product-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #b9975b;

    transition: width 0.35s ease;

    z-index: 2;
}

.qubix-product-card:hover::before {
    width: 100%;
}

/* =====================================================
   BATH ACCESSORIES
   CASPER BLACK PVD FINISH
   Common CSS for all Bath Accessories pages
===================================================== */


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

.bath-accessories-products {
    width: 100%;
    padding: 80px 6%;
    background: #ffffff;
    box-sizing: border-box;
}


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

.bath-accessories-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 55px;
}

.bath-accessories-heading span {
    display: inline-block;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: #777;
}

.bath-accessories-heading h1 {
    margin: 0;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 1px;
    color: #111;
}

.bath-accessories-heading p {
    margin: 18px auto 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.7;
    color: #666;
}


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

.bath-accessories-product-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}


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

.bath-accessories-product-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

    display: flex;
    flex-direction: column;
}


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

.bath-accessories-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}


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

.bath-accessories-product-image {
    width: 100%;
    height: 330px;
    overflow: hidden;
    background: #f7f7f7;

    display: flex;
    align-items: center;
    justify-content: center;
}

.bath-accessories-product-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


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

.bath-accessories-product-card:hover
.bath-accessories-product-image img {
    transform: scale(1.04);
}


/* ================= PRODUCT INFO ================= */

.bath-accessories-product-info {
    position: relative;

    padding: 22px 24px 25px;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name name"
        "code price";

    row-gap: 9px;

    background: #ffffff;
}


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

.bath-accessories-product-info h3 {
    grid-area: name;

    margin: 0;

    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;

    color: #171717;
}


/* ================= PRODUCT CODE ================= */

.bath-accessories-product-code {
    grid-area: code;

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

    color: #555;

    letter-spacing: 0.4px;
}


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

.bath-accessories-product-price {
    grid-area: price;

    font-size: 17px;
    font-weight: 700;

    color: #111;

    white-space: nowrap;
}

/* =====================================================
   COMBO SHOWERS - FINAL CSS
   No Overlap Version
   Same Bath Accessories Base Classes
===================================================== */


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

.bath-accessories-products {
    width: 100%;
    box-sizing: border-box;
}


/* =====================================================
   EACH SHOWER GROUP
===================================================== */

.combo-shower-group {
    width: 100%;
    display: block;
    clear: both;

    margin: 70px 0 90px;
    padding: 0;

    position: relative;
    box-sizing: border-box;
}


/* =====================================================
   SMALL GROUP HEADING
===================================================== */

.combo-shower-group h2 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 35px !important;
    padding: 0 !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    text-align: center;

    font-size: 28px !important;
    line-height: 1.3 !important;

    font-weight: 600 !important;

    color: #111 !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 5;

    box-sizing: border-box;
}


/* =====================================================
   TWO CARD GRID
===================================================== */

.combo-shower-group .bath-accessories-product-grid {
    width: 100% !important;

    display: grid !important;

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

    gap: 40px !important;

    align-items: start !important;

    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}


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

.combo-shower-group .bath-accessories-product-card {
    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box;
}


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

.combo-shower-group .bath-accessories-product-image {
    width: 100% !important;

    height: 360px !important;

    display: flex !important;

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

    position: relative !important;

    margin: 0 0 20px !important;
    padding: 15px !important;

    overflow: hidden !important;

    box-sizing: border-box;
}


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

.combo-shower-group .bath-accessories-product-image img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    position: static !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;
}


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

.combo-shower-group .bath-accessories-product-info {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 15px 20px !important;

    overflow: visible !important;

    box-sizing: border-box;
}


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

.combo-shower-group .bath-accessories-product-info h3 {
    width: 100% !important;

    display: block !important;

    position: static !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.35 !important;

    font-weight: 600 !important;

    color: #111 !important;

    white-space: normal !important;

    overflow: visible !important;

    box-sizing: border-box;
}


/* =====================================================
   CODE
===================================================== */

.combo-shower-group .bath-accessories-product-info
.bath-accessories-product-code {
    width: 100% !important;

    display: block !important;

    position: static !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 26px !important;

    font-weight: 400 !important;

    color: #333 !important;

    white-space: normal !important;

    overflow: visible !important;

    height: auto !important;

    box-sizing: border-box;
}


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

.combo-shower-group .bath-accessories-product-info
.bath-accessories-product-price {
    width: 100% !important;

    display: block !important;

    position: static !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 26px !important;

    font-weight: 500 !important;

    color: #111 !important;

    white-space: nowrap !important;

    overflow: visible !important;

    height: auto !important;

    box-sizing: border-box;
}


/* =====================================================
   MULTIPLE CODE + PRICE
   Each item gets its own vertical space
===================================================== */

.combo-shower-group
.bath-accessories-product-info
.bath-accessories-product-code
+ .bath-accessories-product-price {
    margin-bottom: 8px !important;
}


/* =====================================================
   REMOVE FLOAT / ABSOLUTE POSITIONING
===================================================== */

.combo-shower-group
.bath-accessories-product-info
.bath-accessories-product-code,
.combo-shower-group
.bath-accessories-product-info
.bath-accessories-product-price,
.combo-shower-group
.bath-accessories-product-info
h3 {
    float: none !important;

    transform: none !important;

    translate: none !important;
}

/* =====================================================
   RAIN SHOWERS SS
   SEPARATE PAGE CSS
===================================================== */


/* =====================================================
   PAGE SECTION
===================================================== */

.rain-showers-ss-page {
    width: 100%;
    min-height: 100vh;

    background: #ffffff;

    box-sizing: border-box;
}


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

.rain-showers-ss-section {
    width: 100%;

    padding: 80px 6%;

    background: #ffffff;

    box-sizing: border-box;
}


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

.rain-showers-ss-heading {
    width: 100%;
    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;
}


/* ================= EGOR COLLECTION ================= */

.rain-showers-ss-heading span {
    display: inline-block;

    margin-bottom: 12px;

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

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #777;

    line-height: 1.4;
}


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

.rain-showers-ss-heading h1 {
    margin: 0;

    font-size: 42px;
    line-height: 1.15;

    font-weight: 700;
    letter-spacing: 1px;

    color: #111;
}


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

.rain-showers-ss-heading p {
    max-width: 700px;

    margin: 18px auto 0;

    font-size: 16px;
    line-height: 1.7;

    color: #666;
}


/* =====================================================
   PRODUCT GRID
   DESKTOP = 4 CARDS PER ROW
===================================================== */

.rain-showers-ss-product-grid {
    width: 100%;

    display: grid;

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

    gap: 28px;

    align-items: stretch;

    box-sizing: border-box;
}


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

.rain-showers-ss-product-card {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e8e8e8;
    border-radius: 4px;

    box-sizing: border-box;

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


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

.rain-showers-ss-product-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}


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

.rain-showers-ss-product-image {
    width: 100%;
    height: 300px;

    overflow: hidden;

    background: #f7f7f7;

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

    flex-shrink: 0;

    box-sizing: border-box;
}


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

.rain-showers-ss-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


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

.rain-showers-ss-product-card:hover
.rain-showers-ss-product-image img {
    transform: scale(1.06);
}


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

.rain-showers-ss-product-info {
    width: 100%;
    min-width: 0;

    padding: 22px 22px 24px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    background: #ffffff;

    box-sizing: border-box;
}


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

.rain-showers-ss-product-info h3 {
    width: 100%;

    margin: 0;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 600;

    color: #171717;

    overflow-wrap: anywhere;
}


/* =====================================================
   PRODUCT DETAIL ROW
   CODE LEFT + PRICE RIGHT
===================================================== */

.rain-showers-ss-product-details {
    width: 100%;
    min-width: 0;

    display: grid;

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

    column-gap: 12px;

    align-items: start;

    box-sizing: border-box;
}


/* =====================================================
   PRODUCT CODE
===================================================== */

.rain-showers-ss-product-code {
    min-width: 0;

    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    font-weight: 500;

    letter-spacing: 0.3px;

    color: #555;

    white-space: normal;

    overflow-wrap: anywhere;
}


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

.rain-showers-ss-product-price {
    min-width: 72px;

    margin: 0;

    font-size: 15px;
    line-height: 1.6;

    font-weight: 700;

    color: #111;

    text-align: right;

    white-space: nowrap;
}