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

.cm-product-details{
    margin-top: 100px;

    background:#0b0b0c;

    color:#fff;

    position:relative;

    overflow:hidden;

}

.cm-product-details::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    top:-250px;

    background:radial-gradient(circle,
    rgba(198,161,91,.10),
    transparent 70%);

    pointer-events:none;

}



/*=========================================
    GALLERY
=========================================*/

.cm-gallery{

    position:sticky;

    top:120px;

}



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

.cm-main-image{

    position:relative;

    overflow:hidden;

    border-radius:2px;

    background:#111;

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

}

.cm-main-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    display:block;

    transition:1s ease;

}

.cm-main-image:hover img{

    transform:scale(1.05);

}



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

.cm-gallery-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    backdrop-filter:blur(10px);

    cursor:pointer;

    transition:.35s;

    z-index:10;

}

.cm-gallery-btn:hover{

    background:#C6A15B;

    color:#111;

}

.cm-gallery-btn.prev{

    left:25px;

}

.cm-gallery-btn.next{

    right:25px;

}



/*=========================================
    FULL SCREEN
=========================================*/

.cm-fullscreen{

    position:absolute;

    right:25px;

    bottom:25px;

    border:none;

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

    color:#fff;

    padding:12px 22px;

    border-radius:2px;

    font-size:14px;

    cursor:pointer;

    backdrop-filter:blur(10px);

    transition:.35s;

}

.cm-fullscreen:hover{

    background:#C6A15B;

    color:#111;

}



/*=========================================
    THUMBNAILS
=========================================*/

.cm-thumbnails{

    display:grid;

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

    gap:14px;

    margin-top:22px;

}

.cm-thumb{

    cursor:pointer;

    transition:.35s;

}

.cm-thumb img{

    width:100%;

    height:90px;

    object-fit:cover;

    border-radius:2px;

    border:2px solid transparent;

}

.cm-thumb span{

    display:block;

    margin-top:8px;

    font-size:12px;

    text-align:center;

    color:#999;

}

.cm-thumb.active img{

    border-color:#C6A15B;

}

.cm-thumb:hover img{

    border-color:#C6A15B;

    transform:scale(.95);

}



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

.cm-product-info{

    position:sticky;

    top:120px;

}



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

.cm-back{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#9f9f9f;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    transition:.35s;

    margin-bottom:25px;

}

.cm-back:hover{

    color:#C6A15B;

}



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

.cm-product-category{

    display:inline-block;

    color:#C6A15B;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:18px;

}



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

.cm-product-info h1{

    font-family:'Marcellus',serif;

    font-size:68px;

    font-weight:400;

    color:#fff;

    line-height:1.05;

    margin-bottom:28px;

}



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

.cm-product-info p{

    color:#bdbdbd;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}



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

.cm-action-links{

    display:flex;

    gap:35px;

    margin-bottom:35px;

}

.cm-action-links a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.cm-action-links a i{

    color:#C6A15B;

    font-size:18px;

}

.cm-action-links a:hover{

    color:#C6A15B;

}



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

.cm-spec-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}



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

.cm-spec-card{

    background:#141414;

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

    border-radius:2px;

    padding:26px;

    transition:.35s;

}

.cm-spec-card:hover{

    transform:translateY(-6px);

    border-color:rgba(198,161,91,.4);

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.cm-spec-card i{

    width:52px;

    height:52px;

    border-radius:50%;

    background:rgba(198,161,91,.12);

    color:#C6A15B;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    margin-bottom:18px;

}

.cm-spec-card span{

    display:block;

    color:#8d8d8d;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:8px;

}

.cm-spec-card h6{

    margin:0;

    color:#fff;

    font-size:20px;

    font-weight:500;

}



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

.cm-product-buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-bottom:18px;

}



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

.cm-gold-btn{

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:14px;

    background:#C6A15B;

    color:#111;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.cm-gold-btn:hover{

    transform:translateY(-3px);

    background:#d7b06b;

}



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

.cm-dark-btn{

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:14px;

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.cm-dark-btn:hover{

    background:#1d1d1d;

    border-color:#C6A15B;

}



/*=========================================
    WHATSAPP
=========================================*/

.cm-whatsapp-btn{

    width:100%;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:14px;

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.cm-whatsapp-btn i{

    color:#25D366;

    font-size:22px;

}

.cm-whatsapp-btn:hover{

    background:#1d1d1d;

    border-color:#25D366;

}



/*=========================================
    ABOUT PRODUCT
=========================================*/

.cm-about-product{

    margin-top:100px;

    padding-top:80px;

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

}

.cm-about-product h2{

    font-family:'Marcellus',serif;

    font-size:52px;

    color:#fff;

    margin-bottom:25px;

}

.cm-about-product p{

    color:#bcbcbc;

    line-height:2;

    font-size:17px;

}



/*=========================================
    APPLICATIONS
=========================================*/

.cm-applications{

    margin-top:80px;

}

.cm-applications h2{

    font-family:'Marcellus',serif;

    font-size:48px;

    margin-bottom:35px;

    color:#fff;

}

.cm-app-grid{

    display:grid;

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

    gap:22px;

}

.cm-app-card{

    background:#141414;

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

    border-radius:2px;

    padding:35px 20px;

    text-align:center;

    transition:.4s;

}

.cm-app-card:hover{

    transform:translateY(-8px);

    border-color:#C6A15B;

}

.cm-app-card i{

    font-size:34px;

    color:#C6A15B;

    margin-bottom:18px;

}

.cm-app-card h5{

    color:#fff;

    margin:0;

    font-size:17px;

}



/*=========================================
    RELATED
=========================================*/

.cm-related{

    margin-top:110px;

}

.cm-related-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.cm-related-header h2{

    font-family:'Marcellus',serif;

    font-size:52px;

    color:#fff;

}

.cm-related-header a{

    color:#C6A15B;

    text-decoration:none;

    letter-spacing:2px;

    text-transform:uppercase;

}



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

.cm-related-card{

    position:relative;

    overflow:hidden;

    border-radius:2px;

    height:480px;

    display:block;

}

.cm-related-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.cm-related-card:hover img{

    transform:scale(1.1);

}

.cm-related-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:35px;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.92),

        transparent

    );

}

.cm-related-overlay h3{

    color:#fff;

    font-family:'Marcellus',serif;

    font-size:34px;

    margin-bottom:8px;

}

.cm-related-overlay span{

    color:#C6A15B;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

}



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

.cm-related-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid transparent;

    transition:.4s;

}

.cm-related-card:hover::after{

    border-color:rgba(198,161,91,.45);

}



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

@media(max-width:991px){

    .cm-main-image img{

        height:520px;

    }

    .cm-product-info{

        position:relative;

        top:0;

        margin-top:50px;

    }

    .cm-product-info h1{

        font-size:48px;

    }

    .cm-app-grid{

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

    }

}



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

@media(max-width:767px){

    .cm-main-image img{

        height:380px;

    }

    .cm-thumbnails{

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

    }

    .cm-spec-grid{

        grid-template-columns:1fr;

    }

    .cm-product-buttons{

        grid-template-columns:1fr;

    }

    .cm-app-grid{

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

    }

    .cm-related-card{

        height:320px;

    }

    .cm-about-product h2,

    .cm-applications h2,

    .cm-related-header h2{

        font-size:34px;

    }

}



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

@media(max-width:575px){

    .cm-main-image img{

        height:300px;

    }

    .cm-product-info h1{

        font-size:38px;

    }

    .cm-app-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

}