/* ==================================================
   PRIME REMONT
   LUXURY EDITION
================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#0B0B0B;

    color:#FFFFFF;

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

    overflow-x:hidden;

    line-height:1.7;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/* ==========================
   VARIABLES
========================== */

:root{

    --gold:#D4AF37;
    --gold-light:#E6C45A;

    --black:#0B0B0B;
    --black-soft:#111111;
    --black-card:#151515;

    --white:#FFFFFF;

    --text:#ECECEC;
    --gray:#A8A8A8;

    --border:#252525;

    --radius:16px;

    --shadow:
    0 20px 60px rgba(0,0,0,.35);

}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#080808;
}

::-webkit-scrollbar-thumb{
    background:var(--gold);
}

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

.container{

    width:100%;

    max-width:1320px;

    margin:0 auto;

    padding-left:25px;
    padding-right:25px;
}

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

section{
    padding:120px 0;
}

/* ==========================
   TYPOGRAPHY
========================== */

.section-title{

    font-size:58px;

    line-height:1.1;

    font-weight:700;

    margin-bottom:25px;
}

.section-title span{
    color:var(--gold);
}

.section-text{

    max-width:800px;

    color:var(--gray);

    font-size:18px;
}

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

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:62px;

    padding:0 38px;

    background:var(--gold);

    color:#000;

    border-radius:10px;

    font-weight:700;

    transition:.35s;

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

.btn-gold:hover{

    transform:translateY(-4px);

    box-shadow:
    0 10px 30px rgba(212,175,55,.35);
}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:62px;

    padding:0 38px;

    border:1px solid var(--gold);

    color:var(--gold);

    border-radius:10px;

    transition:.35s;
}

.btn-outline:hover{

    background:var(--gold);

    color:#000;
}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    backdrop-filter:blur(18px);

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

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

    transition:.3s;
}

.header-inner{

    height:95px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.logo img{

    height:56px;

    width:auto;
}

/* ==========================
   MENU
========================== */

.menu{

    display:flex;

    gap:38px;
}

.menu a{

    font-size:14px;

    font-weight:500;

    transition:.3s;

    position:relative;
}

.menu a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--gold);

    transition:.3s;
}

.menu a:hover{

    color:var(--gold);
}

.menu a:hover::after{

    width:100%;
}

.menu a.active{

    color:var(--gold);
}

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

.header-btn{

    border:1px solid var(--gold);

    color:var(--gold);

    padding:14px 26px;

    border-radius:10px;

    transition:.3s;
}

.header-btn:hover{

    background:var(--gold);

    color:#000;
}

/* ==========================
   BURGER
========================== */

.burger{

    display:none;

    width:32px;

    cursor:pointer;
}

.burger span{

    display:block;

    height:2px;

    background:#fff;

    margin:7px 0;
}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    url('../img/hero-bg.webp')
    center center/cover no-repeat;
}

.hero::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.80),
    rgba(0,0,0,.80)
    );
}

.hero-overlay{
    display:none;
}

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;
}

.hero-subtitle{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:15px;

    margin-bottom:20px;
}

.hero h1{

    font-size:84px;

    line-height:1.02;

    margin-bottom:25px;

    font-weight:800;
}

.hero h1 span{
    color:var(--gold);
}

.hero p{

    font-size:24px;

    color:#D4D4D4;

    max-width:700px;

    margin-bottom:45px;
}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:50px;
}

.hero-benefits{

    display:flex;

    flex-wrap:wrap;

    gap:30px;
}

.hero-benefits div{

    color:#D0D0D0;

    font-size:15px;
}

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

.stats{

    background:#101010;

    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
}

.stats-grid{

    display:grid;

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

    gap:40px;
}

.stat{

    padding:55px 20px;

    text-align:center;
}

.stat h3{

    color:var(--gold);

    font-size:64px;

    font-weight:800;

    line-height:1;

    margin-bottom:12px;
}

.stat p{

    color:var(--gray);

    font-size:16px;
}

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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.about-content{

    max-width:650px;
}

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

.about-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    transition:.6s;
}

.about-image:hover img{

    transform:scale(1.04);
}

.about-image::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.15)
    );
}

/* ==================================================
   ADVANTAGES
================================================== */

.advantages{

    margin-top:50px;

    display:grid;

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

    gap:20px;
}

.advantage{

    background:var(--black-card);

    border:1px solid var(--border);

    border-radius:14px;

    padding:28px;

    transition:.3s;
}

.advantage:hover{

    border-color:var(--gold);

    transform:translateY(-6px);
}

.advantage h4{

    color:var(--gold);

    font-size:18px;

    margin-bottom:10px;
}

.advantage p{

    color:var(--gray);

    font-size:15px;
}

/* ==================================================
   PACKAGE SECTIONS
================================================== */

#comfort,
#optima,
#prime{

    position:relative;
}

#comfort{

    background:
    linear-gradient(
        rgba(255,255,255,.01),
        transparent
    );
}

#optima{

    background:
    linear-gradient(
        rgba(255,255,255,.015),
        transparent
    );
}

#prime{

    background:
    linear-gradient(
        rgba(212,175,55,.03),
        transparent
    );
}

/* ==================================================
   CARDS
================================================== */

.cards{

    margin-top:60px;

    display:grid;

    grid-template-columns:1fr;

    max-width:900px;
}

.card{

    background:var(--black-card);

    border:1px solid var(--border);

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

    box-shadow:var(--shadow);
}

.card:hover{

    border-color:var(--gold);

    transform:translateY(-8px);
}

.card img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:.6s;
}

.card:hover img{

    transform:scale(1.03);
}

.card-body{

    padding:40px;
}

.card-title{

    font-size:42px;

    font-weight:700;

    color:var(--gold);

    margin-bottom:15px;
}

.card-body p{

    color:var(--gray);

    font-size:17px;

    margin-bottom:30px;
}

/* ==================================================
   PACKAGE LIST
================================================== */

.package-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:35px;
}

.package-list li{

    color:#D8D8D8;

    padding-bottom:14px;

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

.price{

    color:var(--gold);

    font-size:44px;

    font-weight:800;
}

/* ==================================================
   PROCESS
================================================== */

.process{

    background:#101010;

    position:relative;
}

.process::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(212,175,55,.015),
        transparent
    );

    pointer-events:none;
}

.process-grid{

    margin-top:60px;

    display:grid;

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

    gap:25px;

    position:relative;

    z-index:2;
}

.process-item{

    background:var(--black-card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;
}

.process-item:hover{

    transform:translateY(-8px);

    border-color:var(--gold);
}

.process-number{

    font-size:54px;

    font-weight:800;

    color:var(--gold);

    margin-bottom:15px;

    line-height:1;
}

.process-item h4{

    font-size:20px;

    margin-bottom:12px;
}

.process-item p{

    color:var(--gray);

    font-size:15px;
}

/* ==================================================
   BEFORE / AFTER
================================================== */

.before-after{

    position:relative;
}

.before-after-wrapper{

    margin-top:60px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;
}

.before-after-image{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);
}

.before-after-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:.7s;
}

.before-after-image:hover img{

    transform:scale(1.05);
}

.before-after-image::before{

    content:'';

    position:absolute;

    left:20px;
    top:20px;

    z-index:2;

    padding:8px 18px;

    border-radius:50px;

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

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

    color:#fff;

    font-size:13px;

    letter-spacing:1px;
}

.before-after-image:first-child::before{

    content:'ДО';
}

.before-after-image:last-child::before{

    content:'ПОСЛЕ';
}

/* ==================================================
   WORKS
================================================== */

.works{

    position:relative;
}

.works-grid{

    margin-top:60px;

    display:grid;

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

    gap:20px;
}

.work-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    background:#111;
}

.work-item img{

    width:100%;

    height:380px;

    object-fit:cover;

    transition:.7s;
}

.work-item:hover img{

    transform:scale(1.08);
}

.work-item::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.45)
    );

    z-index:1;
}

.work-item::after{

    content:'+';

    position:absolute;

    left:50%;
    top:50%;

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

    width:70px;
    height:70px;

    border-radius:50%;

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

    color:#000;

    font-size:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.35s;

    z-index:2;
}

.work-item:hover::after{

    opacity:1;
}

/* ==================================================
   WORKS HIGHLIGHT
================================================== */

.works-grid .work-item:nth-child(1){

    grid-column:span 2;
}

.works-grid .work-item:nth-child(1) img{

    height:500px;
}

.works-grid .work-item:nth-child(4){

    grid-column:span 2;
}

.works-grid .work-item:nth-child(4) img{

    height:500px;
}

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

.reviews{

    margin-top:60px;

    display:grid;

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

    gap:30px;
}

.review{

    background:var(--black-card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:35px;

    transition:.35s;

    position:relative;

    overflow:hidden;
}

.review::before{

    content:'';

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

    background:var(--gold);

    transform:scaleX(0);

    transition:.35s;
}

.review:hover{

    transform:translateY(-8px);

    border-color:var(--gold);
}

.review:hover::before{

    transform:scaleX(1);
}

.review-stars{

    color:var(--gold);

    font-size:22px;

    margin-bottom:20px;
}

.review p{

    color:#D2D2D2;

    line-height:1.9;

    margin-bottom:25px;
}

.review-name{

    color:var(--gold);

    font-weight:600;

    font-size:17px;
}

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

.cta{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    rgba(0,0,0,.82),
    rgba(0,0,0,.82)
    ),
    url('../img/hero-bg.webp')
    center center/cover no-repeat;
}

.cta::before{

    content:'';

    position:absolute;

    width:800px;
    height:800px;

    right:-400px;
    top:-400px;

    border-radius:50%;

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

.cta-box{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;
}

.cta-box h2{

    font-size:72px;

    line-height:1.1;

    margin-bottom:25px;
}

.cta-box p{

    color:#D5D5D5;

    font-size:22px;

    margin-bottom:40px;
}

/* ==================================================
   CONTACTS
================================================== */

.contacts-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    margin-top:60px;
}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;
}

.contact-item{

    background:var(--black-card);

    border:1px solid var(--border);

    border-radius:16px;

    padding:30px;
}

.contact-item h4{

    color:var(--gold);

    margin-bottom:12px;

    font-size:18px;
}

.contact-item p{

    color:#D6D6D6;
}

.socials{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.socials a{

    width:50px;
    height:50px;

    border:1px solid var(--gold);

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;
}

.socials a:hover{

    background:var(--gold);

    color:#000;
}

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

.form{

    background:var(--black-card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:40px;
}

.form input,
.form textarea{

    width:100%;

    background:#0F0F0F;

    border:1px solid #222;

    border-radius:10px;

    color:#FFF;

    padding:18px 20px;

    margin-bottom:18px;

    font-family:inherit;

    transition:.3s;
}

.form input:focus,
.form textarea:focus{

    outline:none;

    border-color:var(--gold);
}

.form textarea{

    min-height:180px;

    resize:vertical;
}

.form button{

    width:100%;

    height:62px;

    border:none;

    border-radius:10px;

    background:var(--gold);

    color:#000;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.form button:hover{

    background:var(--gold-light);

    transform:translateY(-2px);
}

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

.footer{

    background:#080808;

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

    padding:40px 0;
}

.footer-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.footer-copy{

    color:#8C8C8C;

    font-size:14px;
}

/* ==================================================
   BACK TO TOP
================================================== */

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:#000;

    font-size:24px;

    cursor:pointer;

    z-index:1000;

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

    transition:.3s;
}

.back-to-top:hover{

    transform:translateY(-5px);
}

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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-up.visible{

    opacity:1;

    transform:none;
}

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

.card img,
.work-item img,
.about-image img,
.before-after-image img{

    filter:
    contrast(1.03)
    saturate(1.05);
}

/* ==================================================
   SELECTION
================================================== */

::selection{

    background:var(--gold);

    color:#000;
}

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

.mobile-menu{

    position:fixed;

    top:95px;
    left:0;

    width:100%;

    background:#0b0b0b;

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

    display:flex;

    flex-direction:column;

    transform:translateY(-120%);

    transition:.35s;

    z-index:9998;
}

.mobile-menu.open{

    transform:translateY(0);
}

.mobile-menu a{

    padding:20px 25px;

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

    font-size:15px;
}

.mobile-menu a:hover{

    color:var(--gold);
}

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

@media (max-width:1200px){

    .hero h1{
        font-size:68px;
    }

    .section-title{
        font-size:50px;
    }

    .process-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .cta-box h2{
        font-size:58px;
    }

}

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

@media (max-width:992px){

    section{
        padding:100px 0;
    }

    .menu{
        display:none;
    }

    .header-btn{
        display:none;
    }

    .burger{
        display:block;
    }

    .hero h1{
        font-size:58px;
    }

    .hero p{
        font-size:20px;
    }

    .hero-buttons{
        flex-wrap:wrap;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-image{

        order:-1;
    }

    .about-image img{

        height:500px;
    }

    .advantages{

        grid-template-columns:1fr 1fr;
    }

    .process-grid{

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

    .before-after-wrapper{

        grid-template-columns:1fr;
    }

    .before-after-image img{

        height:500px;
    }

    .works-grid{

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

    .works-grid .work-item:nth-child(1),
    .works-grid .work-item:nth-child(4){

        grid-column:auto;
    }

    .works-grid .work-item:nth-child(1) img,
    .works-grid .work-item:nth-child(4) img{

        height:380px;
    }

    .reviews{

        grid-template-columns:1fr;
    }

    .contacts-grid{

        grid-template-columns:1fr;
    }

    .footer-inner{

        flex-direction:column;

        gap:15px;

        text-align:center;
    }

}

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

@media (max-width:768px){

    section{
        padding:80px 0;
    }

    .container{

        padding-left:20px;
        padding-right:20px;
    }

    .header-inner{

        height:80px;
    }

    .logo img{

        height:44px;
    }

    .hero{

        min-height:90vh;
    }

    .hero-content{

        text-align:center;
    }

    .hero-subtitle{

        font-size:13px;

        letter-spacing:2px;
    }

    .hero h1{

        font-size:42px;

        line-height:1.1;
    }

    .hero p{

        font-size:18px;

        margin-bottom:35px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .btn-gold,
    .btn-outline{

        width:100%;
    }

    .hero-benefits{

        justify-content:center;

        gap:15px;
    }

    .section-title{

        font-size:38px;
    }

    .section-text{

        font-size:16px;
    }

    .stats-grid{

        grid-template-columns:1fr;
    }

    .stat{

        padding:35px 15px;
    }

    .stat h3{

        font-size:48px;
    }

    .advantages{

        grid-template-columns:1fr;
    }

    .card img{

        height:260px;
    }

    .card-body{

        padding:25px;
    }

    .card-title{

        font-size:30px;
    }

    .price{

        font-size:34px;
    }

    .process-grid{

        grid-template-columns:1fr;
    }

    .process-item{

        padding:25px;
    }

    .before-after-image img{

        height:300px;
    }

    .works-grid{

        grid-template-columns:1fr;
    }

    .work-item img{

        height:280px;
    }

    .cta-box h2{

        font-size:38px;
    }

    .cta-box p{

        font-size:18px;
    }

    .form{

        padding:25px;
    }

    .contact-item{

        padding:25px;
    }

}

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

@media (max-width:480px){

    .hero h1{

        font-size:34px;
    }

    .section-title{

        font-size:32px;
    }

    .card-title{

        font-size:26px;
    }

    .price{

        font-size:30px;
    }

    .cta-box h2{

        font-size:32px;
    }

}

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

.mobile-order-btn{

    display:none;
}

@media (max-width:768px){

    .mobile-order-btn{

        display:flex;

        position:fixed;

        left:0;
        right:0;
        bottom:0;

        height:65px;

        background:var(--gold);

        color:#000;

        font-weight:700;

        align-items:center;

        justify-content:center;

        z-index:99999;

        box-shadow:
        0 -5px 20px rgba(0,0,0,.25);
    }

    body{

        padding-bottom:65px;
    }

    .back-to-top{

        bottom:80px;
    }

}
.capsule-calculator{
    margin-top:24px;
    padding:20px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

.calc-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    font-size:14px;
    color:#bdbdbd;
}

.area-value{
    color:#fff;
    font-weight:600;
}

.area-slider{
    width:100%;
    height:6px;
    appearance:none;
    background:rgba(255,255,255,.15);
    border-radius:999px;
    outline:none;
}

.area-slider::-webkit-slider-thumb{
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#d4af37;
    cursor:pointer;
    box-shadow:0 0 15px rgba(212,175,55,.4);
}

.calc-result{
    margin-top:18px;
    text-align:center;
    font-size:28px;
    font-weight:700;
    color:#fff;
    letter-spacing:.5px;
}

.calc-result span{
    color:#d4af37;
}

/* ===========================
   BEFORE / AFTER PREMIUM
=========================== */

.before-after {

    position: relative;
    overflow: hidden;

    border-radius: 24px;

    cursor: ew-resize;

    user-select: none;

    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.before-after.visible {
    opacity: 1;
    transform: translateY(0);
}

.before-after__img {

    width: 100%;
    display: block;

    transition: transform 1.2s ease;
}

.before-after:hover .before-after__img {
    transform: scale(1.03);
}

.before-after__after {

    position: absolute;
    inset: 0;

    width: 50%;

    overflow: hidden;
}

.before-after__after img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.before-after__divider {

    position: absolute;

    top: 0;
    left: 50%;

    width: 2px;
    height: 100%;

    transform: translateX(-50%);

    z-index: 5;

    background:
    linear-gradient(
        to bottom,
        #f5e7b8,
        #d6b86c
    );
}

.before-after__handle {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 72px;
    height: 72px;

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

    border-radius: 50%;

    background:
    linear-gradient(
        135deg,
        #f5e7b8,
        #d6b86c
    );

    color: #111;

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

    box-shadow:
        0 0 0 1px rgba(255,255,255,.4),
        0 10px 40px rgba(0,0,0,.15);

    transition: .3s ease;
}

.before-after:hover .before-after__handle {

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

    box-shadow:
        0 0 30px rgba(245,231,184,.7),
        0 10px 50px rgba(0,0,0,.25);
}

.before-after__handle svg {

    width: 28px;
    height: 28px;
}

.before-after__label {

    position: absolute;

    top: 24px;

    padding: 10px 18px;

    border-radius: 50px;

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

    backdrop-filter: blur(20px);

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

    color: #fff;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-size: 12px;

    z-index: 10;
}

.before-after__label.before {
    left: 24px;
}

.before-after__label.after {
    right: 24px;
}

@media(max-width:768px){

    .before-after {
        border-radius: 16px;
    }

    .before-after__handle {

        width: 56px;
        height: 56px;
    }

    .before-after__label {

        top: 15px;

        padding: 8px 14px;

        font-size: 11px;
    }
}