:root{
    --color-base:#1B1E25;
    --color-opacity:rgba(0,0,0,0);
    --color-fill:#fff;
    --color-fill-alt:#F5F5F5;
    --color-accent:#F5D89F;
    --color-accent-dark:#e7c277;
    --color-base-text:#D0D0D0;
    --color-ghost:#6F7B8E;
    --color-grey:#5f646b;
    --color-opacity:#6f7b8e0e;
    --color-border:rgba(111, 123, 142, 0.2);
    --size:1rem;
    --radial:1rem;
    --radial-lg:var(--radial);
    --radial-btn:calc(var(--radial)*2);
    --font-title: "Playfair Display", serif;
    --border: 1px solid var(--color-ghost);
    --border-opacity: 1px solid var(--color-border);
    --swiper-theme-color:var(--color-accent-dark);
    --color-brand-dark:var(--color-accent-dark);

    --z-modal:1000;
    --z-backmodal:999;
}
p{margin:0; margin-bottom:1rem;}
body{margin:0; padding:0; font:normal 1rem/1.5 "Inter", sans-serif; color:var(--color-base); background:var(--color-fill);}
img{display:block; max-width: 100%;}
a{text-decoration: none; color:var(--color-base);}
.text-center{text-align: center;}
.text-right{text-align: right;}
.btn{border-radius: var(--radial-btn); text-align: center; border:none; background:transparent; cursor:pointer; font-size:1rem; font-weight: bold; padding:0; display:inline-flex; align-items: center; justify-content: center; transition: all .25s ease;}

.btn-primary, .btn-secondary{ overflow: hidden; position:relative; color:var(--color-base); padding:.75rem 1.5rem; z-index: 1;}
.btn-primary:before, .btn-primary:after, .btn-secondary:before, .btn-secondary:after{content:''; display: block; height:100%;  position:absolute; top:0; left:0; z-index: -1;} 
.btn-primary:before{transition:width .25s ease, transform .5s ease;  width:3rem; transform:translate(-100%, 0); border-radius: var(--radial-btn); background:var(--color-accent-dark)}
.btn-primary:after{width:100%; z-index: -2; background:var(--color-accent);}
.btn-primary:hover:before{width:100%;  transform:translate( 0);}

.btn-secondary{color:var(--color-fill-alt);}
.btn-secondary:before{width:3rem;  transition:width .25s ease, transform .5s ease;  transform:translate(-100%, 0); border-radius: var(--radial-btn); background:#555}
.btn-secondary:after{width:100%; z-index: -2; background:var(--color-base); }
.btn-secondary:hover:before{width:100%; transform:translate( 0);}


.btn-circle{background:var(--color-accent); color:var(--color-base); width:10rem; height:10rem; padding:2rem; text-align: center; border-radius: 50%; }
.card{padding:var(--size); border:var(--border-opacity); border-radius: var(--radial);}
.svg-icon{display:block; color:inherit; width:1.25rem; height:1.25rem; fill:currentColor;}

.title {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight:700;
  font-style: normal;
  line-height: 1;
}

.swiper{padding-bottom:2rem; 
    --swiper-theme-color:var(--color-accent-dark);}
.swiper-pagination{bottom:0 !important;;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active){opacity: .1;}
.swiper-button-prev{margin-left:-3rem; margin-top:-2rem;}
.swiper-button-next{margin-right:-3rem; margin-top:-2rem;}

.section-card{background:var(--color-base); color:var(--color-fill); border-radius: var(--radial); max-width: 100rem; margin:auto 1rem; }

.app-intro, .app-footer{position: relative; text-align: center; background-image: url(../images/intro_bg.jpg); background-repeat: no-repeat; background-position:60% 100%; margin-bottom:3rem;}
.app-intro__title, .app-footer__title{text-transform: uppercase; font-size:7.5vw; font-weight:500;}
.app-intro__title mark, .app-footer__title mark{background:transparent; font-weight:700; font-size:1.72em; color:var(--color-accent);}
.app-intro__suptitle{margin-top:3rem; font-weight: bold;}
.app-intro__suptitle mark{background:transparent; color:var(--color-accent);}
.app-intro__image{margin-top:-2.5rem; margin-left:2rem; max-width: 16rem; height:auto;}
.app-intro__text{margin-top:2rem; max-width: 30rem;;}
.app-intro__btn{position:absolute; bottom:0; left:0; right:0; margin:auto; margin-bottom:-5rem;}
.app-footer{background-position:50% 10%; margin-top:7rem; background-size:150vw; margin-bottom:0; border-radius: var(--radial) var(--radial) 0 0;}
.app-footer__title{margin-bottom:15rem;}
.app-intro{min-height: 40rem;}

.app-header{padding:1rem 0 .5rem; position:relative; z-index: 5;}
.app-logo{display:flex; align-items: center; min-width:8rem; height:3rem;}
.app-logo svg{width:100%; height:100%;}
.header-contacts{text-align: right;}
.app-header__callback svg{margin:-.5rem 0; margin-left:-.5rem; margin-right:.5rem; width:1.5rem; height:1.5rem;}
.header-contacts__label{margin:0; color:var(--color-ghost); font-size:.75rem;}
.header-contacts__phone{font-weight: bold; font-size:1.2rem; line-height: 1.2;}
.app-header_nav{display:flex; align-items: center; justify-content: space-between;}
.menu-main{padding:0; list-style: none; display:flex;}
.menu-main li{padding:0 1rem;}
.menu-main a{font-weight: bold; display:block; font-size:1.25rem; position:relative;}
.menu-main a:after{content:''; display:block; width:100%; height:4px; position:absolute; bottom:0; left:0; background:var(--color-accent); opacity: 0; transform:translateY(-10px); transition: opacity .25s ease, transform .25s ease;}
.menu-main a:hover:after{opacity: 1; transform:translateY(0);}

.breadcrumb{padding:0; list-style: none;  display: flex; flex-wrap: nowrap; max-width: 100%; overflow:hidden; overflow-x:auto;}
.breadcrumb li{padding-right:.75rem; white-space: nowrap;}
.breadcrumb li:after{content:'/'; position:relative; top:2px; left:.35rem; opacity: .2;}
.breadcrumb a,
.breadcrumb li>span{font-size:.8rem; color:var(--color-base); white-space: nowrap;}
.breadcrumb li:last-child{ max-width: 20vw; overflow: hidden; text-overflow: ellipsis;opacity: .5;}
.breadcrumb a:hover{color:var(--color-brand-dark);}
.breadcrumb li:last-child:after{display: none;}

.app-widget{padding:3rem 0;}
.app-widget__header{text-transform: uppercase; text-align: center; margin:2rem 0; overflow: hidden;}
.app-widget__suptitle{font-weight: bold; position:relative; display:inline-block; opacity: .5; padding: 0 2rem;}
.app-widget__suptitle:before, .app-widget__suptitle:after{content:''; display:block; width:5rem; height:1px; background:linear-gradient(to left, currentColor 0%, var(--color-opacity) 100%); position:absolute; top:0; bottom:0; margin:auto; }
.app-widget__suptitle:before{right:100%; left:auto;}
.app-widget__suptitle:after{left:100%; right:auto; transform: scale(-1, 1);}
.app-widget__title{font-size:2rem; line-height: 1;}

.service-item{margin-bottom:var(--size); position:relative; overflow: hidden;}
.service-item__title{margin:0; min-height:4rem;}
.service-item__btn{padding:0; display:flex; margin-left:auto; width:3rem; height:3rem; align-items: center; font-size:0; justify-content: center; font-weight:100; border:1px solid currentColor; position:relative;}
/* .service-item__btn::before, .service-item__btn::after{content:''; display:block; width:1.2rem; height:1px; background:currentColor; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
.service-item__btn::after{transform: rotate(90deg);} */
.service-item__btn:hover{color:var(--color-fill); background:var(--color-base);}
.service-item__image{width:6rem; height:6rem; position: absolute;  bottom: 1rem; left: 1rem;}
.service-item__footer{margin-top:4rem;}

.text-box{padding:3rem 1rem;}
.text-box__inner{font-size:2rem; line-height:1.2; max-width: 30rem; margin:auto;}
.text-box__image{width:30rem; margin:auto; margin-top:2rem; margin-bottom:-5rem; height:auto;}

.numbers__number{font-family:var(--font-title); font-weight: 900; font-size:4rem; line-height: 1; margin:1rem 0; display:block;}
.numbers__text{display:block; max-width: 10rem;}

.feature-widget{background:var(--color-fill-alt);}
.feature-list{padding:0; list-style: none; margin-top:0; margin-bottom:0;}
.feature-item{margin-top:2rem; margin-bottom:2rem;}
.feature-item__title{line-height: 1.3; margin:.5rem 0;}
.feature-item__icon{width:2rem; height:2rem; margin-bottom:1.5rem;}

.steps-widget{position:relative; top:0; left:0;}
.steps-widget::before{content:''; display:block; width:100%; height:50%; background:var(--color-fill-alt); position:absolute; top:0; left:0; z-index: -1;}
.steps-widget__inner{background:var(--color-base); color:var(--color-base-text);}

.steps-list{counter-reset: step;}
.steps-item{counter-increment: step; position:relative; margin-bottom:3rem;}
.steps-item::before{content:counter(step); display:flex; align-items: center; justify-content: center; padding-bottom:1rem; margin-bottom:2rem; width:4rem; height:4rem; border-radius: 100%; border:1px solid #f5f5f52c; font-family: var(--font-title); font-size:3rem; line-height: 1; text-align: center;}


.steps-list{padding:0; list-style: none; }
.steps-item__title{line-height: 1.3;}

.faq-list{max-width: 50rem; margin:auto;}
.faq-item{border-bottom:var(--border-opacity); padding-top:1rem; padding-bottom:1rem; padding-right:4rem; position:relative;}
.faq-item:first-child{border-top:var(--border-opacity);}
.faq-item__title{margin:1rem 0; cursor:pointer;}
.faq-item__title:hover{ opacity: .7;}
.faq-item__close{position:absolute; top:2.25rem; right:1rem; width:1.2rem; height:1.2rem; transition: transform .25s ease;}
.faq-item__close:before, .faq-item__close:after{content:''; display:block; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; width:100%; height:1px; background:currentColor;}
.faq-item__close:after{transform: rotate(90deg); transition: transform .25s ease;}
.faq-item.active .faq-item__close:after{transform: rotate(0deg);}
.faq-item.active .faq-item__close{transform: rotate(180deg);}

.app-footer__btn{top:-5rem; position:absolute; left:0; right:0; margin:auto;}

.footer-contacts, .footer-contacts ul{padding:0; list-style: none;}
.footer-contacts__item{margin-bottom:2rem;}
.footer-contacts__link, .mess-list a{ color:var(--color-fill);  line-height: 1; font-family: var(--font-title); font-size:1.25rem; text-transform: uppercase;}
.footer-contacts__link:hover{color:var(--color-accent);}
.mess-list a{display:inline-flex; align-items: center; margin-bottom:.5rem;}
.footer-contacts__label{color:var(--color-grey); font-size:1rem; line-height: 1; margin-bottom:.5rem; text-transform: uppercase; display:block;}
.footer-phone{font-size:2rem; font-weight: bold}

.mess-list .svg-icon{margin-right:.5rem; width:2rem; height:2rem;}

.callphone{text-align: center; margin-top:5rem;}
.callphone__text{font-size:1.5rem; line-height:1.2; font-weight: bold; max-width: 40rem; margin:auto; margin-bottom:1rem;}
.btn-phone{font-size:1.5rem; line-height:1; padding:1rem 2rem; border:3px solid currentColor;}
.btn-phone:hover{background:var(--color-accent); border-color:var(--color-accent)}

.footer-bottom{margin-top:1rem; padding-top:1rem; padding-bottom:1rem; border-top:var(--border-opacity);}
.footer-bottom p{margin-bottom:.5rem;}
.footer-bottom a { color: rgba(255,255,255,.3);}
.footer-bottom a:hover { color: rgba(255,255,255,1);}

.review-widget .widget__body{position:relative;}
.review-item__header{display:flex; justify-content: space-between; align-items: center; margin-bottom:1rem;}
.review-item__author{font-weight: bold;}
.review-item__date{color:var(--color-ghost);}
.review-item__content{margin-bottom:1rem;}

.app-dialog{border:none; position:fixed; top:0; left:0; right:0; bottom:0; padding:2rem; border-radius: var(--radial-lg);}
.app-dialog__close{ cursor:pointer; position:absolute; top:1rem; right:1rem; width:1.2rem; height:1.2rem; transform: rotate(45deg); border:none; background:transparent; font-size:0;}
.app-dialog__close::before, .app-dialog__close::after{content:''; display:block; position:absolute; width:100%; height:1px; background:currentColor; top:0; bottom:0; left:0; right:0; margin:auto;}
.app-dialog__close::after{transform: rotate(90deg);}
.app-dialog__title{font-family: var(--font-title); font-size:1.75rem; line-height:1; text-align: center;}
.app-dialog__inner{max-width: 25rem;}
.app-dialog__text{text-align: center; font-weight: bold; margin-top:-1rem; margin-bottom:2rem;}

.app-dialog .form{ display:block; max-width: 20rem; margin:auto;}
.app-dialog .form-submit{display:block; width:100%; padding:1rem 2rem; margin:1.5rem auto 1rem;}
.app-dialog::backdrop { background-color: rgba(0,0,0,.7);}

.main-content{max-width: 50rem; margin:2rem auto;}
.main-content h1{font-size:2.5rem; line-height:1;}
.main-content h2{margin-top:3rem;}
.main-content ul{margin-bottom:1rem;}
.main-content p,
.main-content li{margin-bottom:1rem;}

.modal {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index: var(--z-modal); background:rgba(0,0,0,.6);}
.modal.show{display:block;}
.modal-backdrop{width:100%; height:100%; left:0; top:0; position:fixed; background:var(--fill); z-index:var(--z-backmodal); opacity:.8}

.modal-dialog{display:flex; height:100%; align-items: center; justify-content: center; margin:1rem;}
.modal-content{padding:var(--size); background: var(--color-fill); position:relative; box-shadow: 0 2rem 4rem var(--color-shadow); opacity: 0; transform: scale(.5); transition:transform .5s ease, opacity .5s ease; border-radius:var(--radial);}
.modal-header{margin-bottom:1rem; margin-top:1rem;}
.modal-title, .icms-forms__wrap h3{font-weight: bold; margin:0; text-align: center; margin-top:1.5rem; margin-bottom:1rem; text-wrap: balance ; font-size:1.75rem; line-height:1.2; font-family: 'Playfair Display', serif;}
.modal.show .modal-content{transform: scale(1); opacity: 1;}
.modal-body__form{max-width: 32rem; margin:auto;}
.modal-brand .modal-content{background:var(--color-accent); }
.modal-brand .btn-close{color:var(--color-fill); }
.modal-brand .btn-close::after{background:var(--color-base);}
.modal-brand .btn-close::before{opacity: .25;}


.modal__close{display:block; position:absolute; padding:1rem; top:0; right:0; background:var(--color-light); color:var(--color-ghost); border-radius: 50%; z-index: 20;}
.modal__close .svg-icon{width:1.25rem; height:1.25rem;}
.modal__close:hover{ color:var(--color-base);}
.modal-compact .modal-content{max-width: 30rem;}

.modal-form .modal-content{width:100%; max-width:40rem; border-radius: var(--radial-card);}
.modal-form .modal-header{text-align: center;}
.modal-form form{display:block; max-width: 25rem; margin:0 auto;}

.modal .icms-forms__wrap h3{font-size:2rem;}
.modal .icms-forms__wrap{margin:0 1rem;}

.success-text{text-align: center; max-width: 30rem; margin:auto;}
.success-text h2{font-size:2rem; line-height:1.2; margin-bottom:1rem;}
.form-success .btn-close{width:100%; max-width: 12rem; margin:auto; margin-top:1rem; display: block;}

.debug-panel{background:var(--color-base); color:var(--color-fill); text-align: center;}

.app-footer__bottom {color:rgba(255, 255, 255, .3);}
.app-footer__bottom a {text-decoration: underline;}

.pagebar{margin-top:1rem; margin-bottom:1rem;}
.pagebar__link{width:2.5rem; height:2.5rem; border-radius: 50%;; display:inline-flex; align-items: center; justify-content: center; margin:0 .5rem; border:1px solid transparent; transition:border-color .25s ease, color .25s ease;}
.pagebar__link--current{background:var(--color-accent); cursor:default;}
.pagebar__link.disabled{opacity: .35; cursor:default;}
.pagebar__link:not(.disabled, .pagebar__link--current):hover{color:var(--color-accent); border-color:1px solid var(--color-accent);}

.blog-card__photo{overflow:hidden; border-radius: var(--radial);}
.blog-card__photo img{border-radius: var(--radial); transition:transform .25s ease;}
.blog-card__title{font-weight: bold; margin-top:1rem;}
.blog-card{margin-bottom:2rem;}
.blog-card:hover .blog-card__photo img{transform: scale(1.1);}
.blog-card__title a{transition:background .25s ease;}
.blog-card__title a:hover{background:var(--color-accent);}

.table-wrapper{max-width:100%; overflow-x: auto; overflow-y:hidden;}

.read-block{--read-size:1rem; --read-margin-sm:1rem; --read-margin-md:2rem; margin-bottom:5rem;}
.read-block p, .read-block h2, .read-block h3, .read-block h4, .read-block h5, .read-block h6, .read-block ul, .read-block ol, .read-block h1{max-width: 40rem; margin:auto; margin-bottom:var(--size);}
.read-block table{width:100%; border-collapse: collapse;}
.read-block table td, .read-block table th{padding:.75rem; border-bottom:1px solid var(--color-border); text-align: left;}
.read-block .f_photo{margin-bottom:var(--read-margin-md)}
.blog-title{font-size:2rem; line-height:1.1;}
.read-block img{border-radius: var(--radial);}

.read-block h2{font-size:1.5rem; line-height: 1.2; margin-top:2rem; margin-bottom:var(--read-margin-sm);}
.read-block h3{font-size:1.25rem; line-height: 1.3; margin-top:1.5rem; margin-bottom:var(--read-margin-sm);}
.read-block ul, .read-block ol, .read-block p{font-size:var(--read-size);}
.read-block ul li, .read-block ol li{margin-bottom:.75rem;}
.read-block ul{padding:0; list-style: none;}
.read-block ul li{ padding-left:1.5rem; position:relative;}
.read-block ul li:before{content:''; display:block; position:absolute; top:.5rem; left:.25rem; width:.5rem; height:.5rem; border-radius: 10px; background:var(--color-accent-dark);}
.read-block ol{padding:0; padding-left:1.5rem; } 
.read-block ol li::marker{font-weight: bold; color:var(--color-accent-dark); }

.page-header{margin-bottom:0;}

.blog-panel{display:flex; align-items: center; flex-wrap: wrap; gap:1rem; margin-bottom:2rem; margin-top:-1rem;}
.cat-label{border-radius: 4rem; border:1px solid var(--color-border); padding:.25rem 1.25rem; text-wrap: nowrap; margin-right:.5rem;}
.cat-label:hover{background:var(--color-accent);}

@media screen and (max-width:47em){
    .app-footer__title{margin-top:6rem;}

    .app-widget__suptitle{font-size:.75rem;}
    .feature-widget .widget__body, 
    .steps-widget .widget__body{max-width: 18rem; margin:auto;}
    
    .numbers-list{margin-top:4rem;}
    .numbers-list div:last-child{margin-left:25%;}

    .review-item.swiper-slide-next{opacity: .5;}
    .review-list{margin:0 -1rem; padding-left:1rem; padding-right:1rem;}

    .swiper-button-prev, .swiper-button-next{display: none;}
    
}

@media screen and (min-width:47em){
    :root{
        --radial-lg:2rem;
        --size:2rem;
    }
    .app-header{padding:1rem 0;}
    .app-intro{text-align:left; background-position:85% 100%; margin-top:0; padding-top:2rem;}
    .app-intro__title{margin:0;}
    .app-intro__image{margin-top:-1.5rem; max-width: none; }
    .app-intro__suptitle{margin-top:3rem;}
    .app-intro__text{margin-bottom:4rem;}
    .header-contacts__phone{font-size:1.5rem; }
    .app-header__callback{margin-top:0;}
    .app-widget__header{margin-top:2rem; margin-bottom:2rem;}
    .app-widget__title{font-size:3rem;}

    .app-footer{padding-top:5rem; background-size:auto auto; background-position: 12% 10%; text-align: left;}
    .app-footer__title{margin-top:0;}
    .footer-contacts__label{margin-bottom:1rem;}

    .form-widget {margin:auto}
    .footer-bottom__right{text-align: right;}

    .feature-item__title{max-width: 15rem;}
    .feature-item__text{max-width: 20rem;}
    .container{padding-left:4rem; padding-right:4rem;}

    .page-title{font-size:2rem; line-height: 1.1;}

    .modal .icms-forms__wrap{margin:0 4rem;}
    .modal .icms-forms__wrap h3{margin-bottom:3rem; font-size:3rem;}

    .app-intro{min-height:0;}

}

@media screen and (min-width: 63em) {
    .app-intro{padding-top:0;}
    .app-intro__title, .app-footer__title{font-size:3rem;}
    .app-intro__title{margin:2rem 0;}
    .app-intro{background-size:auto 100%;}
    .feature-item:nth-child(4){margin-left:10%}
    .feature-item:nth-child(5){margin-left:10%}

    .app-widget__suptitle:before, .app-widget__suptitle:after{height:2px;}

    .numbers-list div{padding-left:6rem;}

    .steps-widget__inner{padding:3rem ;}
    .steps-item:not(:last-child)::after{content:''; display:block; position:absolute; top:2rem; left:50%; width:25%; border-bottom:1px solid #f5f5f52c; }
    
    .text-box{ display:flex; max-width:60rem; margin:auto;}
    .text-box__image{margin-top:0;}

    .page-title{font-size:2.5rem;}

    .blog-title{ font-size:3rem;}
}

@media screen and (min-width:100em){
    html{font-size:18px;}

    .blog-title{font-size:3.5rem;}
    .read-block h2{font-size:2rem; margin-top:3rem}
    .read-block h3{font-size:1.5rem;  margin-top:2rem}

   .widget{padding:5rem 0;}
   .section-card{margin-left:auto;margin-right:auto;}
    .app-intro__image{width:15vw;}
   .form-widget{padding-top:3rem; margin-bottom:5rem;}
   .app-dialog{padding:2rem 4rem 2rem;}
   .app-dialog__title{font-size:2.5rem; }
   .text-box__inner{font-size:2.5rem; line-height: 1.3;}
}