:root {
  --primary-color: #ec831c;
  --dark-color:#00162e;
  --dark-color1: #26394d;
  --dark-color2: #4c5c6c;
  --dark-color3: #7f8a96;
}
html{background:#faf9f7;}
*, *::before, *::after {box-sizing: border-box;}
body{font-family: "Verdana", Geneva, Tahoma, sans-serif;margin: 0}
button{height: 42px;font-size: 18px;border-radius: 8px;padding: 0 16px;cursor: pointer}
button:hover{background: var(--dark-color);color:#fff;border-color: var(--dark-color);cursor: pointer}
a{text-decoration: none;color:var(--dark-color1);cursor: pointer}
a:hover{color:var(--primary-color);}
ul{list-style-type: none;}
h1{font-size:32px;}
h2{font-size:24px;margin: 10px 0 20px}
input, select{height: 42px;padding: 0 20px;line-height: 40px;border-radius: 8px;border: 1px solid #ccc;
    font-size: 16px;color:var(--dark-color1);cursor: pointer
}
input:hover, select:hover{border: 1px solid var(--primary-color);outline: none}
input:focus, select:focus{border: 1px solid var(--primary-color);outline: 1px solid var(--primary-color)}
.container{max-width: 1200px;color:var(--dark-color);margin: 0 auto}
div#page{min-height: calc(100vh - 160px);margin:40px auto;}
.primary_button{background: var(--primary-color);color:#fff;border:1px solid var(--primary-color);}
.inv_button{background: #fff;color:var(--dark-color);border:1px solid var(--primary-color);}

header{display: flex;align-items: center;justify-content: space-between;background:#fff;
    padding: 12px 24px;border-radius: 12px;margin-bottom: 20px;
}
.logo{font-size: 24px;font-weight: 600;color:var(--dark-color);white-space: nowrap}
#menu{display: flex;gap:4px;flex-direction: row;margin-left: auto;flex-wrap: wrap;justify-content: center}
#menu li{font-size: 16px;margin: 0 8px}
#menu a{padding: 0 12px;height: 36px;line-height: 36px;display: flex;align-items: center;color: var(--dark-color1);}
#menu a.active,#menu a:hover{color: var(--primary-color);}
header button{margin-left: 20px}

/*TEMPLATE*/
.template{display: flex;align-items: center;justify-content: space-between;padding: 0;cursor: default;
    margin-bottom: 20px;
}
.template .text{width: 40%;display: flex;flex-direction: column;gap:16px;color: var(--dark-color1);font-size: 18px;
    padding: 24px}
.template h1{font-size:32px;margin: 0;color: var(--dark-color);font-weight: 500}
.template .text span{font-size: 16px;}
.template .bg{width: calc(60% - 20px);position: relative}
.template .bg img{width: 100%;height: 100%;object-fit: cover;aspect-ratio: 3 / 2;border-radius: 12px;}
.actions{display: flex;align-items: center;gap:12px;width: 100%}
.actions button{width: calc(50% - 6px)}

/*BLOCKS*/
.blocks{display: flex;flex-wrap: wrap;gap:20px;background: #fff;border-radius: 12px;padding: 20px;margin: 0 0 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0,.1);
}
.blocks h2{width: 100%;text-align: center;font-weight: 500;text-transform: uppercase;}
.blocks .block{display: flex;flex-direction: column;cursor: default}

.blocks .block img{width: 100%;height: auto;aspect-ratio:1.5/1;object-fit: contain;}
.blocks .block img.icon{width: 44px;height: 44px;object-fit: contain;}
.blocks .block .title{text-align: center;font-size: 20px;margin: 0;min-height: 40px;line-height: 20px;display: flex;align-items: center;}
.blocks .block .text{color: var(--dark-color2);display: flex;gap:8px;flex-direction: column;font-size: 16px;line-height: 18px;}
.blocks .block .text div{display: flex;}
.blocks .block .text div:before{content:'';display: inline-block;margin-right: 8px;width: 6px;height: 6px;min-width: 6px;
    background: var(--dark-color2);border-radius: 50%;top:6px;position: relative;
}
.blocks .block .text .item{display: flex;align-items: center;gap:8px}
.blocks .block .text .item:before{display: none;}
.blocks .block .text .item img{width: 40px;height: 40px}
.blocks .block .description{display: none;}
.description{height: 100%;overflow-y: auto;}
.description div{margin: 4px 0;}
.description div:last-child{margin: 12px 0;}
.description div span{color: var(--dark-color);font-weight: 600}

#modal{display: block;position: fixed;top:0;left: 0;bottom: 0;right: 0;margin: auto;font-size: 15px;
    width: 500px;max-width: 90vw;height: 600px;max-height: 90vh;background: #fff;border-radius: 16px;
    padding: 24px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0,.2);z-index: 10;overflow: hidden;color: var(--dark-color1);
    line-height: 20px;
}
#modal .title{border-bottom: 1px solid var(--primary-color);color: var(--dark-color);font-size: 20px;margin: 0 0 12px;
    min-height: 40px;line-height: 20px;display: flex;align-items: center;justify-content: center;
}
#modal h3{font-size: 18px;font-weight: 500;color: var(--primary-color);margin-bottom: 8px}
#modal ul{padding-left: 0;margin: 8px 0 8px}
#modal ul li{line-height: 22px;padding-left: 10px}
#modal ul li:before{content:'';display: inline-block;margin-right: 8px;width: 6px;height: 6px;min-width: 6px;
    background: var(--dark-color2);border-radius: 50%;top:-3px;position: relative;}
#modal .close{width: 40px;height: 40px;top:0;right: 0;position: absolute;cursor: pointer;
    background: url('../../images/icons/close-x.svg') center no-repeat;background-size: 24px;
}

#overlay{position: fixed;top:0;left: 0;bottom: 0;right: 0;width: 100vw;height: 100vh;background: rgba(255,255,255,0.4);
    z-index: 1;backdrop-filter: blur(10px);}

.blocks.block1 .block{width: 100%}
.blocks.block2 .block{width: calc(50% - 10px)}
.blocks.block3 .block{width: calc(33.33% - 14px)}
.blocks.block4 .block{width: calc(25% - 15px)}
.blocks .block.full{width: 100%}

.blocks.why_us .block{border:1px solid rgba(0, 0, 0, 0.1);border-radius: 12px;cursor: pointer}
.blocks.why_us .block .title{text-align: center;justify-content: center}
.blocks.why_us .block .open{display: flex;flex-direction: column;justify-content: center}
.blocks.why_us .block img{width: 180px;height: 120px;object-fit: contain;margin: 0 auto}
.blocks.why_us .block.resp img{width: 140px;}
.blocks.why_us .block:hover{border-color: var(--primary-color);}

.blocks.basic .block, .blocks.additional .block{flex-direction: row;flex-wrap: wrap;gap:8px}
.blocks.basic .block .title, .blocks.additional .block .title{max-width: calc(100% - 58px);text-align: left;}
.blocks.additional .block .text{padding-left: 38px}

.blocks.no_bg{background: none;box-shadow: none}

.blocks.steps .block{gap:0;justify-content: flex-start;align-items: center;position: relative}
.blocks.steps .block .title{margin-bottom: 8px}
.blocks.steps .block:not(:last-child):after{content:'';position: absolute;width: 30px;height: 30px;
    top:55px;right: -18px;background: url('../../images/icons/arrow.svg') no-repeat;background-size: contain;//opacity: 0.4;
}
.blocks.steps .block img{width: 70%;height: auto;object-fit: cover;aspect-ratio: 4 / 3;margin: 0 auto}

.blocks.tariff{justify-content: center;padding: 0;}
.blocks.tariff .block{position: relative;background: #fff;padding: 24px;border-radius: 12px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0,.1);overflow: hidden}
.blocks.tariff .block .content{max-width: 50%;display: flex;flex-direction: column;gap:12px;z-index: 1;height: 100%;
    justify-content: space-between;background: linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0.3) 100%);
}
.blocks.tariff .block .title{min-height: unset}
.blocks.tariff .block .text{color: var(--dark-color1);}
.blocks.tariff .block button{width: 100%}
.blocks.tariff .block:after{content: '';width: 70%;height: 100%;position:absolute;top:0;right: -7%;background-size: contain;
    background-repeat: no-repeat;background-position: center;z-index: 0;
}
.block.standard:after{background-image: url('../../images/standard.png')}
.block.express:after{background-image: url('../../images/express.png')}
.block.business:after{background-image: url('../../images/business.png')}
.blocks.tariff .block.full{max-width: 700px}
div.price{color: var(--dark-color2);font-size: 14px}
span.price{font-size: 24px;color: var(--primary-color);}

.blocks.prices{gap:24px}
.blocks.prices .block{width: calc(50% - 12px)}
.block.calc{justify-content: space-between}
.block.calc .text{display: flex;flex-direction: row;flex-wrap: wrap;gap:12px}
.block.calc .text input, .block.calc .text select{width: calc(50% - 6px);}
.block.calc .text label{width: 100%}
.block.calc .text span{width: 100%;display: flex;height: 30px;align-items: center}

.blocks.check .block{padding: 24px;border-radius: 12px;background: #fff;gap:16px}
.blocks.check .block.bg{background: var(--primary-color);color: #fff;}
.blocks.check .block h2{text-align: left;font-size: 30px}
.blocks.check .block .text{color:#fff;margin-bottom: 20px}
.blocks.check .block .text{color:#fff;margin-bottom: 20px}
.blocks.check .block.bg .text div:before{display: none}
.blocks.check .block button{width: fit-content}
.block.bg .primary_button{color:var(--dark-color);background: #fff;}
.block.bg .primary_button:hover{background:var(--dark-color);color: #fff;}

.blocks.contacts{gap: 20px}
.blocks.contacts h2{font-size: 30px}
.blocks.contacts .block{font-size: 18px;display: flex;flex-direction: column;background: #fff;padding: 12px;
    border-radius: 12px;border:1px solid #f7cda4;box-shadow: 0 4px 4px 0 rgba(0, 0, 0,.1);gap:16px}
.blocks.contacts .title{font-size: 24px;text-align: center;justify-content: center}
.contacts .address, .contacts .phone{display: flex;align-items: center}
.contacts .address:before, .contacts .phone:before{content:'';display: flex;width: 32px;height: 32px;margin-right: 8px;
   min-width: 32px;border-radius: 50%;background-repeat: no-repeat;background-size: 24px;background-position: center;
}
.contacts .address:before{background-image: url('../../images/icons/location.svg')}
.contacts .phone:before{background-image: url('../../images/icons/phone.svg');background-size: 28px}
.links{display: flex;gap:12px;margin: 12px 0;justify-content: center}
.links a{display: flex;width: 42px;height: 42px;background: var(--primary-color);border-radius: 50%;
    justify-content: center;align-items: center;
}
.links a:hover{background: var(--dark-color)}
.links a:before{content:'';display: flex;width: 28px;height: 28px;background-repeat: no-repeat;
    background-size: 100%;background-position: center;
}
.links a.whatsapp:before{background-image: url('../../images/icons/whatsapp.svg');background-size: 80%}
.links a.telegram:before{background-image: url('../../images/icons/telegram.svg')}
.links a.insta:before{background-image: url('../../images/icons/insta.svg');}
.worktime .work, .worktime .off{display: flex;align-items: center}
.worktime span{width: 80px}
.worktime .work:before, .worktime .off:before{content:'';display: flex;width: 32px;height: 32px;margin-right: 8px;
    min-width: 32px;border-radius: 50%;background-repeat: no-repeat;background-size: 24px;background-position: center;}
.worktime .work:before{background-image: url('../../images/icons/work.svg')}
.worktime .off:before{background-image: url('../../images/icons/off.svg')}

.form_page{width: 100%;min-height: 70vh;display:flex;justify-content: center;align-items: center}
form{display: flex;flex-direction: column;gap:24px;justify-content: center;align-items: center;margin: 24px 0;
    background: #fff;padding: 24px;border-radius: 12px;box-shadow: 0 4px 4px 0 rgba(0, 0, 0,.1);
    color: var(--dark-color2);
}
form input, form select, form button{width: 100%}
form button{margin: 12px 0}
form a{color: var(--dark-color1)}
form label{width: 100%;display: flex;align-items: center;margin-bottom: 8px}
form .actions{width: 100%;display: flex;justify-content: space-between}
form .title{width: 100%;display: flex;justify-content: center;font-size: 24px;margin-bottom: 16px}
.form_page form{width: 500px;max-width: 100%}
.form_page .item{width: 100%;position: relative}
.form_page.login form{width: 400px}
/*.form_page.register .item label{gap: 8px}*/
.register .item label:before{content:'';display: flex;width: 24px;height: 24px;margin-right: 4px;
    min-width: 32px;background-repeat: no-repeat;background-size: 24px;background-position: center;}
.register .item.name label:before{background-image: url('../../images/icons/user.svg');}
.register .item.phone label:before{background-image: url('../../images/icons/phone.svg');}
.register .item.phone span{width:62px;height: 40px;background: #f0f0f0;display: flex;justify-content: center;
    align-items: center;padding: 0 6px;border-radius: 8px 0 0 8px;position: absolute;bottom: 1px;left: 1px;
}
.register .item.phone input{padding-left: 70px}
.register .item.cargo label:before{background-image: url('../../images/icons/location.svg');}
.register .item.password label:before{background-image: url('../../images/icons/password.svg');}
.register .item.email label:before{background-image: url('../../images/icons/email.svg');}
.register .alert-danger{color: red}
/*FOOTER*/
footer{background: var(--dark-color);padding: 24px;color:#fff}
footer .container{display:flex;justify-content: space-between;align-items: center}
footer .logo{color:#fff}
footer .phone{display: flex;align-items: center}
footer .phone a.phone{color:#fff;height: 32px;padding:0 4px;line-height: 32px;margin-right: 8px}
footer .phone a.whatsapp, footer .phone a.telegram{width: 36px;height: 36px;background-size: contain;
    background-repeat: no-repeat;background-position: center;
}
footer .phone a.whatsapp{background-image: url('../../images/icons/whatsapp.svg');background-size: 20px}
footer .phone a.telegram{background-image: url('../../images/icons/telegram.svg');background-size: 24px}

@media screen and (max-width:1300px){
	.container{max-width: 90%}
}
@media screen and (max-width:767px){
    body{margin: 0}
	.container{max-width: calc(100vw - 24px);}
    div#page{margin: 0 auto}
    header{flex-wrap: wrap;padding: 12px;width: 100vw;margin-left: -12px;border-radius: 0}
    #logo{order:1}
    header button{order:2}
    #menu{order:3;display: flex;width:100%;padding: 0;margin: 12px 0 0}
    #menu li{font-size: 16px;margin: 0}
    #menu a{padding: 0 4px;height: 36px;line-height: 36px;display: flex;align-items: center;font-size: 16px}

    /*TEMPLATE*/
    .template{flex-direction: column-reverse;padding: 0}
    .template .text{width: 100%;padding: 12px}
    .template h1{font-size:24px;}
    .template .text span{font-size: 16px;}
    .template .bg{width: 100%;margin-bottom: 0}

    /*BLOCKS*/
    .blocks{gap:24px;padding: 12px;margin-bottom: 24px}
    .blocks h2{margin-bottom: 12px;font-size: 20px}
    .blocks .block{justify-content: center;gap:4px}
    .blocks .block, .blocks.block2 .block, .blocks.block3 .block, .blocks.block4 .block, .blocks.block5 .block{width: 100%}
    .blocks.why_us{gap:12px}
    .blocks.why_us .block{width: calc(50% - 6px)}
    .blocks .block .title{font-size: 18px;min-height: 40px;line-height: 20px;}
    .blocks .block .text{font-size: 14px}
    .blocks .block img.icon{width: 36px;height: 36px;object-fit: contain;}
    .blocks.additional .block .text{padding-left: 0}

    .blocks.steps .block .title{height: auto;min-height: auto;margin: 10px 0}
    .blocks.steps .block img{width: 150px}
    .blocks.steps .block:not(:last-child):after{position: absolute;
        top:auto;right: 0;left:0;bottom:-26px;transform: rotate(90deg);margin: 0 auto;
    }
    .blocks.tariff .block{padding: 16px}
    .blocks.tariff .block .content{width: 210px;max-width: 70%}
    div.price{font-size: 14px}

    .blocks.block2.check.no_bg{padding: 0}

    .blocks.contacts{padding: 0}
    .blocks.contacts h2{margin-bottom: 0;font-size: 24px}
    .blocks.contacts .block .title{font-size: 20px}
    .blocks.contacts .block{font-size: 16px}

    #modal{padding: 16px;font-size: 14px;line-height: 18px}
    #modal h3{margin: 10px 0 4px;}

    form{gap:16px;margin: 12px 0;padding: 12px}

    footer .container{flex-direction: column;gap:16px}
}