body{
    margin:0;
    background:#f5f5f5;
    font-family:Arial, Helvetica, sans-serif;
    color:#222;
}

.page{
    width:100%;
}

.container{
    width:100%;
    max-width:1120px;

    margin:0 auto;

    padding-left:20px;
    padding-right:20px;

    box-sizing:border-box;
}






/* =========================
   HEADER
========================= */

#header-template{
    position:sticky;
    top:0;
    z-index:1000;
}

.header{
    position:static;

    padding:20px 0;
}

.header__inner{
    height:82px;

    background:#fff;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 30px;

    box-sizing:border-box;

    box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

/* LOGO */

.logo img{
    height:48px;
    display:block;
}

/* NAV */

.nav{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav__item{
    position:relative;

    display:flex;
    align-items:center;

    height:40px;

    text-decoration:none;

    color:#222;

    font-size:15px;
    font-weight:600;

    cursor:pointer;
}

.nav a{
    text-decoration:none;
    color:#222;
}

.nav__item:hover,
.nav a:hover{
    color:#d50000;
}

/* DROPDOWN */

.nav__dropdown{
    position:relative;
}

.dropdown{
    display:none;

    position:absolute;

    top:100%;
    left:0;

    width:220px;

    background:#fff;

    border-radius:12px;

    padding:12px 0;

    box-shadow:0 10px 25px rgba(0,0,0,0.08);

    z-index:50;
}

.dropdown a{
    display:block;

    padding:10px 18px;
}

.dropdown a:hover{
    background:#f5f5f5;
}

.nav__dropdown:hover .dropdown{
    display:block;
}

/* RIGHT */

.header__right{
    display:flex;
    align-items:center;
    gap:18px;
}

/* PHONE */

.phone{
    text-decoration:none;

    color:#111;

    font-size:18px;
    font-weight:700;
}

/* MESSENGERS */

.messengers{
    display:flex;
    gap:8px;
}

.messengers img{
    width:28px;
    height:28px;

    display:block;
}

/* BUTTON */

.btn{
    height:46px;

    padding:0 24px;

    border:none;
    border-radius:10px;

    background:#e30613;
    color:#fff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;
}

.btn:hover{
    background:#c40010;
}


/* =========================
HERO
========================= */

.hero{
padding-top:30px;
padding-bottom:40px;

}

.hero-new{
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;
}

.hero-left{
width:770px;
}

.hero-right{
width:320px;
flex-shrink:0;
}

.hero-right img{
width:100%;
display:block;
border-radius:20px;
}

.hero-title{
font-size:52px;
font-weight:700;
line-height:1.05;
margin-bottom:12px;
}

.hero-subtitle{
font-size:16px;
line-height:1.8;
color:#555;
margin-bottom:18px;
}

/* CTA */

.hero-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;


background:#fff;
border-radius:18px;

padding:22px 24px;

box-shadow:0 3px 15px rgba(0,0,0,.08);


}

.glass-cta-icon{
width:90px;
height:90px;
flex-shrink:0;
}

.glass-cta-icon img{
width:100%;
height:100%;
object-fit:contain;
}

.hero-cta-text{
flex:1;
}

.hero-cta-title{
font-size:26px;
font-weight:700;
margin-bottom:8px;
}

.hero-cta-desc{
font-size:16px;
line-height:1.5;
color:#444;
}

.hero-cta-right{
width:180px;
text-align:center;
}

.hero-cta-btn{
    display:inline-block;

    background:#e30613;
    color:#fff;

    text-decoration:none;

    padding:14px 22px;

    border-radius:12px;

    font-size:18px;
    font-weight:700;

    white-space:nowrap;
}

.hero-note{
    margin-top:10px;
    font-size:13px;
    color:#666;
    line-height:1.4;
}

/* ???????????? */

.glass-advantages{
display:flex;
align-items:center;
justify-content:space-between;

margin:55px 0 65px;
padding:0 10px;


}
.tg-link{
    color:#229ED9;
}

.viber-link{
    color:#7360F2;
}

.mail-link{
    color:#e30613;
}

/* MOBILE */

@media(max-width:900px){

.hero-new{
    flex-direction:column;
    gap:30px;
}

.hero-left{
    width:100%;
}

.hero-right{
    width:100%;
    max-width:420px;
}

.hero-title{
    font-size:42px;
}

.hero-subtitle{
    font-size:17px;
}

.hero-cta{
    flex-direction:column;
    align-items:flex-start;
}

.hero-cta-right{
    width:100%;
    text-align:left;
}

.hero-cta-btn{
    width:100%;
    text-align:center;
    box-sizing:border-box;
}

}


/* =========================
   ????????????
========================= */




.adv-item{

    display:flex;
    align-items:center;

    gap:18px;
}

.adv-icon{

    width:70px;
    height:70px;

    border:2px dashed #ddd;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    color:#999;
}

.adv-title{

    font-size:22px;
    font-weight:700;

    margin-bottom:4px;
}

.adv-desc{

    font-size:16px;
    color:#555;
}

.adv-divider{

    width:1px;
    height:70px;

    background:#ddd;
}



/* =========================
   POPULAR
========================= */

.popular{
    padding-top:10px;
    padding-bottom:80px;
}

.popular-title{
    font-size:42px;
    font-weight:700;
    margin-bottom:36px;
}

.popular-grid{
    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:20px;
}


.popular-card{
    background:#fff;

    border-radius:18px;

    padding:18px 20px 18px;

    box-sizing:border-box;

    transition:0.25s;

    display:flex;
    flex-direction:column;

    justify-content:space-between;
}

.popular-card:hover{
    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.popular-name{
    font-size:24px;
    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

    min-height:44px;
}

.popular-image{
    width:100%;

    text-align:center;

    margin-bottom:12px;
}

.popular-image img{
    width:100%;
    max-width:340px;

    height:auto;

    display:block;

    margin:0 auto;
}

.popular-size{
    font-size:16px;

    color:#777;

    margin-bottom:16px;
}

.popular-desc{
    font-size:15px;

    line-height:1.4;

    min-height:110px;
}

.popular-price{
    margin-top:8px;

    font-size:20px;
}

.popular-price span{
    font-size:30px;
    font-weight:700;

    color:#e30613;
}

.popular-btn{
    width:100%;
    height:44px;

    margin-top:18px;

    border:none;
    border-radius:10px;

    background:#5f5f5f;
    color:#fff;

    font-size:17px;
    font-weight:700;

    cursor:pointer;

    transition:0.2s;
}

.popular-btn:hover{
    background:#444;
}
.popular-link{
    color:#e30613;
    font-size:20px;
    font-weight:700;
    margin-top:18px;
}

.popular-card a{
    text-decoration:none;
    color:inherit;
}

.service-btn{
    display:inline-block;

    margin-top:18px;

    padding:8px 16px;

    width:120px;

    background:#e30613;

    color:#fff !important;

    font-size:15px;

    font-weight:700;

    border-radius:8px;

    text-decoration:none;

    text-align:center;

    transition:0.3s;
}

.service-btn:hover{
    background:#c60011;

    transform:translateY(-2px);
}


/* MOBILE */

@media(max-width:1000px){

    .popular-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:700px){

    .popular-grid{
        grid-template-columns:1fr;
    }

    .popular-title{
        font-size:34px;
    }

    .popular-name{
        font-size:26px;
        min-height:auto;
    }

}

.seo-block{
    padding:70px 0 90px;
}

.seo-wrap{
    background:#fff;
    border-radius:14px;
    padding:50px 60px;
    box-sizing:border-box;
}

.seo-title{
    font-size:42px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:40px;
    color:#111;
}

.seo-image{
    margin-bottom:40px;
}

.seo-image img{
    width:100%;
    border-radius:12px;
    display:block;
}

.seo-text{
    font-size:18px;
    line-height:1.75;
    color:#333;
}

.seo-text p{
    margin:0 0 26px;
}

.seo-text h3{
    font-size:28px;
    margin:50px 0 24px;
    color:#111;
}

.seo-text ul{
    margin:0 0 26px 24px;
    padding:0;
}

.seo-text li{
    margin-bottom:12px;
}



.seo-subblock{
    margin-top:60px;
}

.seo-subtitle{
    font-size:42px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:30px;
    color:#111;
}

.seo-image{
    margin-top:35px;
}

.seo-image img{
    width:100%;
    border-radius:16px;
    display:block;
}

.seo-link-btn{
    display:inline-block;

    margin-top:30px;

    padding:14px 30px;

    background:#444;
	
    color:#fff;

    text-decoration:none;
    font-size:15px;
    font-weight:700;

    border-radius:10px;

    transition:0.2s;
}

.seo-link-btn:hover{
    background:#444;
}

.seo-image{
    display:block;
}

.seo-image-wide{
    margin-left:-60px;
    margin-right:-60px;
}

.seo-image-wide img{
    width:100%;
    border-radius:0;
    display:block;
}
.seo-caption{
    margin-top:6px;
    margin-bottom:18px;
    font-size:17px;
    line-height:1.5;
    color:#777;
    font-style:italic;
}


/* PHOTO GALLERY */

.gallery-block{
    padding-bottom:80px;
}


.gallery-subtitle{
    text-align:center;
    font-size:20px;
    line-height:1.6;
    color:#666;
    max-width:900px;
    margin:0 auto 50px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
}

.gallery-item{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    transition:0.3s;
}

.gallery-item:hover{
    transform:translateY(-4px);
}

.gallery-item img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
    transition:0.3s;
}

.gallery-item:hover img{
    opacity:0.95;
}

.gallery-caption{
    padding:16px 14px 20px;
    font-size:16px;
    line-height:1.5;
    color:#444;
}
.gallery-block{
    padding-top:0;
}

/* TABLET */

@media (max-width:1100px){

    .gallery-grid{
        grid-template-columns:repeat(2, 1fr);
    }

}

/* MOBILE */

@media (max-width:700px){

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item img{
        height:auto;
    }

    .gallery-subtitle{
        font-size:17px;
    }

}

/* =========================
   GALLERY LIGHTBOX
========================= */

.gallery-link{
    display:block;
}

.gallery-title{
    font-size:46px;
    font-weight:800;
    line-height:1.1;
    text-align:center;
    margin-bottom:20px;
}

.gallery-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:0.25s;
    padding:40px;
}

.gallery-lightbox.active{
    opacity:1;
    visibility:visible;
}

.gallery-lightbox img{
    max-width:92vw;
    max-height:90vh;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
}

.gallery-close{
    position:absolute;
    top:25px;
    right:35px;
    font-size:46px;
    color:#fff;
    cursor:pointer;
    line-height:1;
    font-weight:300;
}

.gallery-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:70px;
    color:#fff;
    cursor:pointer;
    user-select:none;
    padding:20px;
    transition:0.2s;
}

.gallery-arrow:hover{
    opacity:0.7;
}

.gallery-prev{
    left:25px;
}

.gallery-next{
    right:25px;
}

@media(max-width:768px){



    .gallery-title{
        font-size:34px;
    }

   .gallery-lightbox{
        padding:15px;
    }

    .gallery-arrow{
        font-size:46px;
        padding:10px;
    }

    .gallery-close{
        top:15px;
        right:20px;
        font-size:38px;
    }

}


/* =========================
   FOOTER
========================= */

.footer{
    background:#d7d7d7;
	border-radius:18px 18px 0 0;

    margin-top:90px;

padding-top:28px;
padding-bottom:18px;

    color:#222;
}

.footer-line{
    width:100%;
    height:1px;

    background:#d60000;

    margin-bottom:34px;
}

.footer-main{
    display:flex;

    justify-content:space-between;

    gap:60px;

    align-items:flex-start;
}

/* LEFT */

.footer-left{
    max-width:520px;
}

.footer-title{
    font-size:22px;
    font-weight:600;

    line-height:1.2;

    margin-bottom:22px;

    color:#111;
}


.footer-phones{
    font-size:18px;
    font-weight:700;
    line-height:1.5;
    display:flex;
    flex-direction:column;

    align-items:flex-end;

    gap:6px;

    margin-bottom:22px;
}

.footer-phone{
    display:inline-block;

    text-decoration:none;

    color:#111;

    font-size:24px;
    font-weight:700;

    transition:0.2s;
}

.footer-phone:hover{
    color:#d60000;
}

.footer-info{
    font-size:16px;

    line-height:1.6;

    color:#4d4d4d;
}

/* RIGHT */

.footer-right{
    min-width:240px;
}

.footer-menu-title{
    font-size:18px;
    font-weight:700;

    margin-bottom:16px;

    color:#111;
}

.footer-links{
    display:flex;
    flex-direction:column;

    gap:12px;
}

.footer-links a{
    text-decoration:none;

    color:#444;

    font-size:16px;
    font-weight:600;

    transition:0.2s;
}

.footer-links a:hover{
    color:#d60000;
}

/* BOTTOM */

.footer-bottom{
    margin-top:30px;

    padding-top:18px;

    border-top:1px solid rgba(0,0,0,0.14);

    display:flex;

    justify-content:space-between;

    gap:30px;
}

.footer-copy{
    font-size:14px;

    color:#555;
}

.footer-seo{
    max-width:520px;

    text-align:right;

    font-size:14px;
    line-height:1.6;

    color:#666;
}

.footer-bottom-right{
    max-width:420px;
}

/* COUNTER */

.footer-counter{
    margin-top:18px;

    text-align:center;

    opacity:0.72;
}

/* TABLET */

@media(max-width:900px){

    .footer-main{
        flex-direction:column;
        gap:40px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:14px;
    }

    .footer-seo{
        text-align:left;
    }

}

/* MOBILE */

@media(max-width:700px){

    .footer{
        padding-top:26px;
    }

    .footer-title{
        font-size:24px;
    }

    .footer-phone{
        font-size:21px;
    }

    .footer-links{
        flex-direction:column;
        gap:10px;
    }

}






/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .container{
        padding-left:14px;
        padding-right:14px;
    }

    /* HEADER */


    .header{
        padding:10px 0;
    }

    .header__inner{
        height:auto;
        padding:14px 16px;
        gap:14px;
        flex-wrap:wrap;
    }

    .logo img{
        height:42px;
    }

    .nav{
        gap:18px;
        flex-wrap:wrap;
    }

    .nav__item{
        font-size:14px;
        height:auto;
    }

    .header__right{
        width:100%;
        justify-content:space-between;
    }

.phone{
    font-size:16px;
    white-space:nowrap !important;
    flex-shrink:0;
}

    .btn{
        height:42px;
        padding:0 18px;
        font-size:14px;
    }

        /* HERO */

        .hero{
            padding-top:70px;
        }

        .hero-title{
        font-size:62px;
        line-height:0.95;
    }

    .hero-subtitle{
        font-size:18px;
        margin-bottom:24px;
    }

    .hero-main{
        flex-direction:column;
        gap:28px;
    }

    .hero-image{
        width:100%;
    }

    .hero-strip{
        padding:18px;
    }

    .hero-strip-title{

        font-size:24px;
    }

    .hero-price{
        font-size:54px;
    }

    .hero-time{
        font-size:24px;
        margin-bottom:30px;
    }

    .hero-btn{
        width:100%;
        height:58px;
        font-size:24px;
    }

    .hero-phone{
        font-size:32px;
    }

    .hero-icons img{
        width:56px;
        height:56px;
    }

    /* STOCK */

    .stock-old-grid{
        grid-template-columns:1fr;
    }

    .stock-old-top{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .stock-old-title{
        font-size:26px;
    }

    .stock-old-card{
        padding:16px;
    }

    .stock-old-name{
        font-size:22px;
    }

    .stock-old-price{
        font-size:24px;
    }

    /* POPULAR */

    .popular-grid{
        grid-template-columns:1fr;
    }

    .popular-content{
        flex-direction:column;
        gap:20px;
    }

    .popular-image{
        width:100%;
        text-align:center;
    }

    .popular-image img{
        max-width:320px;
        margin:0 auto;
    }

    .popular-info{
        min-height:auto;
    }

    .popular-name{
        font-size:22px;
    }

    .popular-desc{
        font-size:16px;
    }

    .popular-btn{
        width:100%;
    }

    /* SEO */

    .seo-wrap{
        padding:28px 22px;
    }

    .seo-title,
    .seo-subtitle,
    .gallery-title{
        font-size:34px;
    }

    .seo-text{
        font-size:17px;
        line-height:1.7;
    }

    /* FOOTER */

    .footer{
        margin-top:60px;
    }

    .footer-main{
        flex-direction:column;
        gap:34px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:14px;
    }

    .footer-seo{
        text-align:left;
    }

}

/* =========================
   POPUP
========================= */

.popup{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.55);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:99999;

    padding:20px;

    box-sizing:border-box;
}

.popup__content{
    width:100%;
    max-width:420px;

    background:#fff;

    border-radius:18px;

    padding:26px;

    position:relative;

    box-sizing:border-box;
}

.popup__close{
    position:absolute;

    top:14px;
    right:16px;

    font-size:24px;

    cursor:pointer;

    color:#444;
}

.popup h3{
    margin:0 0 22px;

    font-size:32px;
    font-weight:700;
}

.popup form{
    display:flex;
    flex-direction:column;

    gap:14px;
}

.popup input,
.popup textarea{
    width:100%;

    border:1px solid #d8d8d8;

    border-radius:10px;

    padding:14px;

    font-size:16px;

    box-sizing:border-box;

    font-family:inherit;
}

.popup textarea{
    min-height:120px;

    resize:vertical;
}

.popup button{
    height:54px;

    border:none;
    border-radius:12px;

    background:#e30613;
    color:#fff;

    font-size:18px;
    font-weight:700;

    cursor:pointer;
}

.popup button:hover{
    background:#c40010;
}

@media(max-width:768px){

    .popup__content{
        padding:22px 18px;
    }

    .popup h3{
        font-size:26px;
    }

}

