: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);
}
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;
}
.form-widget{max-width: 60rem; position:relative; margin:auto 1rem; border-radius:var(--radial-lg); background:var(--color-accent); padding-top:.5rem;}
.form-widget::before, .form-widget::after{content:''; display:block; position:absolute;}
.form-widget::before{background:url(../img/form-before.webp) no-repeat 180% 50%;  top:-3rem; right:-1rem; width:10rem; height:10rem;}
.form-widget::after{background:url(../img/form-after.webp) no-repeat -150% 50%;  bottom:-5rem; left:-1rem; width:15rem; height:15rem;}
.form-inline{display:flex; flex-wrap: wrap; max-width: 30rem; margin:auto;}
.form-agreement{display:block; width:100%; padding:1rem 0; font-size:.75rem;}
.form-agreement a{text-decoration: underline; color:var(--color-grey);}
.form-agreement a:hover{color:var(--color-base);}
.form-control{border:none; width:100%; border-bottom:1px solid currentColor; padding:1rem 0; background:transparent; font-size:1rem; font-family: inherit;}
.form-control:focus{outline:none; box-shadow:  0 4px 0 0 rgba(0,0,0,.3);}

.form-control[name="phone"]{font-size:1.5rem; padding:1rem 0;}

.form-inline .form-control{ width:50%; flex:1 0 auto; margin-bottom:1rem;}
.form-inline .form-submit{flex:0 0 auto; width:100%;  margin-bottom:1rem;}

.swiper{padding-bottom:2rem;}
.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(../img/bg.jpg); background-repeat: no-repeat; background-position:60% 100%; margin-top:-2rem; 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;}
.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:5rem; background-size:150vw; margin-bottom:0; border-radius: var(--radial) var(--radial) 0 0;}
.app-footer__title{margin-bottom:15rem;}

.app-header{padding:1rem 0 .5rem; position:relative; z-index: 5;}
.app-logo{display:flex; align-items: center; min-width:8rem;}
.header-contacts{text-align: right;}
.app-header__callback{margin-top:1rem;}
.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;}

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

.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;}

.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-base); 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;}


@media screen and (max-width:47em){
    .form-submit{padding:1rem 2rem;}
    .form-widget .widget__header{margin-top:0; margin-bottom:0;}
    .form-widget .form-inline{padding:0 2rem;}
    .app-footer__title{margin-top:6rem;}

    .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;}
    .widget__header{margin-top:2rem; margin-bottom:2rem;}
    .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;}

}

@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%}

    .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; }
    
    .form-inline .form-control{ width:50%; flex:1 0 auto; margin-right:2rem; }
    .form-inline .form-submit{flex:0 0 auto; width:40%;}

    .form-widget::before{top:-2rem; right:-3rem; width:12rem; height:12rem; background-position: 50% 50%;}
    .form-widget::after{bottom:-2rem; left:-6rem; width:15rem; height:15rem; background-position: 50% 50%;}
    
    .text-box{ display:flex; max-width:60rem; margin:auto;}
    .text-box__image{margin-top:0;}
}

@media screen and (min-width:100em){
    html{font-size:18px;}
   .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;}
}