@font-face {
    font-family: 'Roboto';
    src: 
    url('fonts/Roboto-Light.woff') format('woof2'),
    url('fonts/Roboto-Light.woff') format('woof'),
    url('fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: 
    url('fonts/Roboto-Regular.woff') format('woof2'),
    url('fonts/Roboto-Regular.woff') format('woof'),
    url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: 
    url('fonts/Roboto-Bold.woff') format('woof2'),
    url('fonts/Roboto-Bold.woff') format('woof'),
    url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Основа */
*, ::after, ::before{box-sizing: border-box!important;}
html,body{margin: 0;padding: 0;font-size: 20px; scroll-behavior: smooth!important;font-family: 'Roboto';font-weight: 500!important;color: var(--color5)!important;background-color: white;line-height: 1.2;}
.container{width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;}
a{color: var(--color5);text-decoration: none;outline: none;transition: var(--transition);}
img, svg{vertical-align: middle;}
label {display: inline-block;margin-bottom: .5rem;}
button, input, optgroup, select, textarea {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;-webkit-appearance: none;background-color: white;}
button:active, button:focus {outline: none;}
button::-moz-focus-inner {border: 0;}
p {margin-top: 0;}
h1, h2, h3, h4, h5, h6 {margin-top: 0;font-weight: 500;line-height: 1.2;font-family: 'Roboto'}
h1{font-weight: 600;line-height: 1;}
h2{font-size:30px;margin-bottom: 15px;text-transform: uppercase;font-weight: 600;}
h3{font-size: 23px;margin-bottom: 15px;}
.flex{display: flex;align-items: center;}
.grid{display: grid;align-items: center;}
.img-fluid {max-width: 100%;height: auto;}
table {width: 100%;margin: 20px 0!important;border-collapse: collapse;overflow: hidden;}
table tr:nth-child(odd){background-color: #dfdfdf;}
table td, table th{text-align: left; padding: .75rem;vertical-align: top;border-top: 1px solid #dee2e6;}
.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}
.p404{text-align: center;padding: 50px 0px;}
.block h2{margin-bottom: 40px;}
.ppage{min-height: 500px;padding-top: 20px;padding-bottom: 20px;}
.ppage h1{margin-bottom: 40px;font-size: 45px;}
.lmodal .modal-dialog{display: flex;align-items: center;}
/* Bootstrap */
.fade{transition: opacity .35s linear;}
.fade:not(.show){opacity: 0;}
/* Кнопки */
.btn-fill,.btn-out{border-radius: 5px; cursor: pointer; white-space: nowrap;border: 2px solid; color: var(--color5); display: inline-block;text-align: center;padding:8px 15px;margin: 0;transition: none;}
.btn-fill{background-color: var(--color1);border-color: var(--color1);color: white;background: linear-gradient(to right, #DE3C00, #EE550A, #FF7133);-webkit-box-shadow: 0px 0px 20px 1px rgba(253, 110, 48, 0.2);-moz-box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);}
.btn-out{background: transparent;border-color: var(--color1);}
.btn-fill:hover{color: white;background-color: var(--color2);border-color: var(--color2);}
.btn-fill:hover{background: transparent;border-color: var(--color1);color: var(--color1);box-shadow: none;}
.btn-out:hover{background: linear-gradient(to right, #DE3C00, #EE550A, #FF7133);-webkit-box-shadow: 0px 0px 20px 1px rgba(253, 110, 48, 0.2);-moz-box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);color: white;}

/* Media */
@media(max-width:321px){
    .modal .modal-dialog {width: 100%;padding: 60px 10px 10px 10px!important;}
    .modal .modal-dialog .button{width: 100%;padding: 20px!important;}
    h1{font-size: 35px!important;}
    
}

@media (min-width: 320px) and (max-width:767px){
    .col-m-2{grid-template-columns: repeat(2, 1fr);}
    .col-m-3{grid-template-columns: repeat(3, 1fr);}
}

@media (min-width: 768px){
    .container {max-width: 720px;}
    .col-pl-2{grid-template-columns: repeat(2, 1fr);}
    .col-pl-3{grid-template-columns: repeat(3, 1fr);}
    .col-pl-4{grid-template-columns: repeat(4, 1fr);}
    .col-pl-30-70{grid-template-columns: 30% auto;}
    .col-pl-70-30{grid-template-columns: 70% auto;}
    .col-pl-40-60{grid-template-columns: 40% auto;}
    .col-pl-60-40{grid-template-columns: 60% auto;}
}

@media (max-width: 1024px) {
    .modal .modal-dialog{width: 100%;padding: 60px 20px 20px 20px;}
    .lmodal{background-color: white!important;}
    .block{padding: 40px 0px;}
    .block h2{text-align: center;}
    .button{display: block!important;width: 100%;}
    h1{font-size: 30px;}
    h2{font-size: 25px!important;}
    .grid{gap: 20px;}
    .flex{flex-direction: column; gap: 20px;}
    #opit .grid>div{flex-direction: column;text-align: center;}
    #predlagaem .card{padding: 20px!important;}
    #work .owl-stage-outer{width: 100%!important;}
    #work .owl-nav{top: unset!important;bottom: -60px!important;}
    #mobile .grid{align-items: center;text-align: center;}
    #mobile .logo{font-size: 30px;font-weight:600; color: var(--color3);}
    #banner{height: auto!important;padding-top: 300px!important;}
    #banner .box{margin-bottom: 75px!important;}
    #mobile{position: absolute;top: 0;width: 100%;background-color: transparent;z-index: 999;border-radius: 0 0 10px 10px;}
    #mobile .container{display: flex;align-items: center;justify-content: center;padding-top: 15px;padding-bottom: 15px;}
    #mobile .container .phone{display: block;}
    #mobile .img-fluid{max-width: 160px;width: 100%;}
    header,#header_menu .menu{display: none!important;}
    #header_menu{background-color: var(--color1);}
    #forma h3{font-size: 25px!important;}
    #ms{margin-bottom: 10px;}
    .button{white-space: pre-wrap!important;}
    footer{text-align: center;}
    footer .grid{justify-items: center;}
    footer .flex{justify-content: center;}
}

@media (min-width: 1025px) {
    #mobile,#header_menu .mobile{display: none!important;}
    h1{font-size:50px;line-height: 1;margin-bottom: 20px;}
    .modal .modal-dialog{max-width: 500px;padding: 40px;position: absolute;right: 0;height: 100%;margin: 0;}
    .block{padding: 50px 0;}
    .block h2{font-size: 35px;text-align: center;}
    #header_menu{background-color: #bebebe;}
    .container{max-width: 960px;}
    .grid{gap: 30px;}
    .col-pc-2{grid-template-columns: repeat(2, 1fr);}
    .col-pc-3{grid-template-columns: repeat(3, 1fr);}
    .col-pc-4{grid-template-columns: repeat(4, 1fr);}
    .col-pc-5{grid-template-columns: repeat(5, 1fr);}
    .col-pc-6{grid-template-columns: repeat(6, 1fr);}
    .col-pc-30-70{grid-template-columns: 30% auto;}
    .col-pc-70-30{grid-template-columns: 70% auto;}
    .col-pc-40-60{grid-template-columns: 40% auto;}
    .col-pc-60-40{grid-template-columns: 60% auto;}
    .flex{flex-direction: row; gap: 30px;}
    footer .grid{grid-template-columns: 30% auto auto auto;align-items: flex-start;}

}

@media (min-width: 1200px) {
    .container{max-width: 1200px;}
} 

:root{
    --color1: #fd6e30;
    --color2: #cc5624;
    --color3: #182b4b;
    --color4: #ffeee7;
    --color5: #070d17;
    --transition:all 0.3s ease-in-out;
}

/* Табы */
.nav {display: flex;padding: 0;margin: 0;list-style: none;outline: none;}
.nav-link:focus, .nav-link:hover, .nav-link.active{text-decoration: none;background-color: var(--color1);color: white;}
.nav-link {display: block;padding: 5px;background-color: var(--color4);color: var(--color5);}
.tab-content>.tab-pane {display: none;}
.tab-content>.active {display: block;}
.fade {transition: opacity .15s linear;}
.fade:not(.show) {opacity: 0;}

/* Вопросы */
#accordion .card{transition: var(--transition);-webkit-transition: var(--transition);padding: 0 15px; background-color: #e9ebed;}
#accordion .card:hover{transition: var(--transition);background-color: var(--color3);}
#accordion .card:hover *{transition: var(--transition);color: white!important;}
#accordion .card a{display: block;width: 100%;font-size: 20px;font-weight: 600; line-height: 1;padding: 15px 0;padding-right: 40px;position: relative;}
#accordion .card a::after{content: '+'; position: absolute;right: 20px;top: 0;bottom: 0;margin: auto;height: fit-content;transition: var(--transition);scale: 2;}
#accordion .card a[aria-expanded="true"]::after{rotate: 180deg;transition: var(--transition);}
#accordion .card:hover a[aria-expanded="false"]::after{rotate: 15deg;transition: var(--transition);}
#accordion .card a[aria-expanded="true"]::after{rotate: 45deg!important;transition: var(--transition);}
#accordion .card div :last-child{padding-bottom: 15px;margin: 0;}

/* Гармошка */
.collapse:not(.show) {display: none;}
.collapsing {position: relative;height: 0;overflow: hidden;transition: height 1.25s ease-in-out;}

/* Модальное */
.modal {position: fixed;top: 0;left: 0;z-index: 1050;display: none;width: 100%;height: 100%;overflow: hidden;outline: 0;background-color: #00000060;}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll} /*Нужно что бы не прыгало */
.modal-open {overflow: hidden;}
.modal-open .modal {overflow-x: hidden;overflow-y: auto;}
.modal .modal-dialog{background-color: white;}
.modal .close{cursor: pointer;position: absolute;top: 20px;right: 20px;}
.modal .grid{gap: 20px;}
.modal .title{font-size: 45px;line-height: 55px;font-weight: bold;}
.modal .text{color: #545560;font-size: 20px;line-height: 35px;}

/* Анимация */
a:hover, #footer a:hover{color: var(--color2);}

.owl-controls{display: flex;gap: 30px;}
.owl-nav{display: flex;gap: 30px;width: fit-content;}
.owl-dots{display: flex;gap: 15px;width: fit-content;}
.owl-nav button{width: 40px;height: 40px;background-color: var(--color1)!important;display: flex;align-items: center;justify-content: center;border-radius: 0;transition: var(--transition);}
.owl-nav button:hover{background-color: var(--color2)!important;transition: var(--transition);}
.owl-dots .owl-dot{width: 20px;height: 20px;border-radius: 100%; background-color: var(--color4)!important;transition: var(--transition);}
.owl-dots .owl-dot:hover{background-color: var(--color1)!important;transition: var(--transition);}
.owl-dots .owl-dot.active{background-color: var(--color1)!important;}

.full{background-color: #fff;}
.full a{color: black;}
.full .container{position: relative;}
.full .close{border: none;}
.full .modal-dialog{max-width: 100%;position: relative;}
.full .modal-content{width: 100%;border: none;}
.full .title{font-size: 30px;font-weight: 500;padding-bottom: 15px;}
.full .st{font-size: 18px;padding-bottom: 10px;}
.full .list{list-style: none;padding-left: 0px;display: inline-block;width: 100%;padding-top: 15px;font-size: 18px;}
.full .list li{padding-bottom: 5px;}
.full .select2-selection, .full .select2-selection__arrow{height: 40px!important;}
.full .select2-selection__rendered{line-height: 40px!important;}
.full .menu{display: inline-block;width: 100%;list-style: none;font-size: 25px;padding: 0px;padding-top: 0px;}
.full .menu li{padding-bottom: 15px;}
.full .cont>a{display: block;padding: 5px 0px;}
.full .cont .phone{font-size: 22px;font-weight: bold;color: black;}
.full .cont .mail{color: #E61870;}

/* Блоки */
header{padding: 20px 0;position: absolute;top: 0;left: 0;right: 0;margin: auto;z-index: 100;}
header .grid{grid-template-columns: 20% auto auto auto auto;}
header .logo{font-size: 30px;font-weight:600; color: var(--color3);}
header .phone{white-space: nowrap; float: right; display: block;background-image: url(/images/phone-contact.svg);background-repeat: no-repeat;background-position: left;background-position-y: center;background-size: 18px;padding-left: 25px;font-size: 20px;font-weight: 600;}
header .mail{float: right;}

#banner{text-align: center;height: 90vh;display: flex;align-items: center;position: relative;z-index: 0;}
#banner .container{z-index: 2;}
#banner .box{padding: 30px;background-color: var(--color3);color: white;max-width: 600px; margin: auto;margin-top: 5%;border-radius: 5px;}
#banner .arrow{position: absolute;left: 0;right: 0;bottom: 15px;margin: auto;}
#banner .arrow_down{display: inline-block;padding: 5px;border-radius: 100%;border: 1px solid var(--color5);animation: MoveUpAndDown 2s ease-in-out infinite; transition: var(--transition);}
#banner .arrow_down:hover{border-color: var(--color1);background-color: var(--color1); animation-play-state: paused;transition: var(--transition);-webkit-box-shadow: 0px 0px 20px 1px rgba(253, 110, 48, 0.2);-moz-box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);}
#banner .arrow_down img{transition: var(--transition);}
#banner .arrow_down:hover img{filter: brightness(0) saturate(100%) invert(90%) sepia(64%) saturate(0%) hue-rotate(94deg) brightness(105%) contrast(100%);transition: var(--transition);}
#banner .arrow_down img{width: 24px;}
@keyframes MoveUpAndDown {
    0%,100%{transform: translateY(0px);}
    50%{transform: translateY(-15px);}}
.forma input{width:100%;padding:10px;border:2px solid var(--color3);margin-bottom:15px;outline:none!important;}
#header_menu{height: 50px;overflow: hidden;transition: var(--transition);}
#header_menu.show{height: 320px!important;}
#header_menu .container,#header_menu a,#header_menu .menu{height: 100%;}
#header_menu .menu{display: flex;justify-content: space-between;align-items: center;position: relative;}
#header_menu .menu a{border-right: 1px solid #9a9a9a;display: flex;align-items: center;justify-content: center;flex-grow: 1;font-weight: 300;transition: none;}
#header_menu .menu a:last-child{border-right: none;}
#header_menu .menu a:hover{background: linear-gradient(to right, #DE3C00, #EE550A, #FF7133);color: white;-webkit-box-shadow: 0px 0px 20px 1px rgba(253, 110, 48, 0.2);-moz-box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);box-shadow: 0px 0px 20px 10px rgba(253, 110, 48, 0.2);transition: none;}
#header_menu .mobile .cont{display: flex;justify-content: center;gap: 10px;height: 50px;align-items: center;color: white;}
#header_menu .mobile-menu{display: flex;flex-direction: column;align-items: center;width: 100vw;margin-left: -15px;}
#header_menu .mobile-menu a{width: 100%;text-align: center;padding: 10px;color: white;background-color: #bebebe;border-bottom: 1px solid var(--color1);}

#opit{background-color: #fafafa;}
#opit .grid{justify-items: center;align-items: flex-start;}
#opit .grid>div{display: flex;align-items: center;gap: 20px;}
#opit span{font-size: 65px;color: var(--color1);}

#why{position: relative;z-index: 0;}
#why::after{position: absolute;inset: 0;margin: auto;width: 100%;height: 100%;background-color: white;opacity: 0.8;content: '';z-index: 1;}
#why .container{position: relative;z-index: 2;}
#why .grid{justify-items: center;gap: 60px;}
#why img{width: 64px;margin-bottom: 20px;}
#why .card{display: flex;flex-direction: column;align-items: center;text-align: center; transition: var(--transition);}
#why .card:hover img{filter: brightness(0) saturate(100%) invert(49%) sepia(49%) saturate(1531%) hue-rotate(340deg) brightness(100%) contrast(99%);}
#why .btn-fill{margin:auto;margin-top: 40px;display: flex;width: fit-content;}

#predlagaem .grid{align-items: flex-start;}
#predlagaem h2{margin-bottom: 10px;}
#predlagaem h3{text-align: center;margin-bottom: 40px;}
#predlagaem .card{height: 100%; text-align: center; padding: 30px;background-color: #e9ebed; transition: var(--transition);border-radius: 5px;}
#predlagaem .card:hover{scale:1.03; transition: var(--transition);-webkit-box-shadow: 0px 0px 20px 1px #e9ebed35;-moz-box-shadow: 0px 0px 20px 10px #e9ebed35;box-shadow: 0px 0px 20px 10px #e9ebed35;}
#predlagaem .content{position: relative;height: 100%;padding-bottom: 45px;}
#predlagaem .card h3{font-weight: 600;margin-top: 20px;}
#predlagaem img{width: 128px;}
#predlagaem p{background-image: url(/images/galochka.svg);background-repeat: no-repeat;background-position: left;background-position-y: top;background-size: 35px;text-align: left;padding-left: 40px;}
#predlagaem a{width: 100%;position: absolute;bottom: 0;left: 0;right: 0;margin: auto;}

#forma{position: relative;z-index: 0;}
#forma::after{position: absolute;inset: 0;margin: auto;width: 100%;height: 100%;background-color: black;opacity: 0.5;content: '';z-index: 1;}
#forma .container{position: relative;z-index: 2;}
#forma{padding-bottom: 0;}
#forma .box{border-radius: 5px; padding: 40px;max-width: 500px;background-color: var(--color3);color: white;margin: auto;text-align: center;font-weight: 300;}
#forma h3{font-weight: 600;font-size: 30px;}
#forma h2{color: white;}
#forma span{font-size:12px;margin-bottom:15px;display:block;}

#team .flex{flex-wrap: wrap;justify-content: space-evenly;flex-direction: row;}
#team .card{display: flex;flex-direction: column;text-align: center;max-width: 290px; transition: var(--transition);border-radius: 5px; overflow: hidden;}
#team .card:hover{scale: 1.05;transition: var(--transition);}
#team .work{padding: 5px;background-color: var(--color3);color: white;font-weight: 600;position: absolute;left: 0;right: 0;margin: auto;width: fit-content;bottom: -16px;}
#team .img{position: relative;}
#team h3{font-weight: 600;margin-top: 30px;margin-bottom: 0;}
#team a{display: flex;width: fit-content;margin: auto;margin-top: 40px;}

#faq_block_15 #accordion{border-radius: 5px;overflow: hidden;}
#faq_block_15{position: relative;z-index: 0;}
#faq_block_15::after{position: absolute;inset: 0;margin: auto;width: 100%;height: 100%;background-color: white;opacity: 0.8;content: '';z-index: 1;}
#faq_block_15 .container{position: relative;z-index: 2;}
#faq_block_15 .btn-fill{width: fit-content;margin: auto;display: flex;margin-top: 40px;}
#faq_block_15 .card a:hover{color: white;}

#work{position: relative;z-index: 0;overflow: hidden;}
#work::after{position: absolute;inset: 0;margin: auto;width: 100%;height: 100%;background-color: var(--color3);opacity: 0.8;content: '';z-index: 1;}
#work .container{position: relative;z-index: 2;padding-bottom: 50px;}
#work .box{background-color: white;padding: 40px;border-radius: 5px;}
#work h2{color: white;}
#work .owl-nav button{background-color: transparent!important; scale: 3;}
#work .owl-stage-outer{width: 80%;margin: auto;}
#work .owl-nav{position: absolute;top: 0;bottom: 0;margin: auto;width:100%;justify-content: space-between;align-items: center;}
#work .owl-dots{position: absolute;bottom: -50px;left: 0;right: 0;margin: auto;}

#contacts{position: relative;}
#contacts iframe{position: absolute;inset: 0;margin: auto;z-index: 0;}
#contacts .container{position: relative;z-index: 1;}
#contacts .box{padding: 30px;background-color: white;width: fit-content;border-radius: 5px;}
#contacts .flex{flex-direction: column;align-items: flex-start;margin-bottom: 15px;gap:0;}
#contacts .flex:nth-child(2){background-image: url(/images/phone-contact.svg);background-repeat: no-repeat;background-position: left;background-position-y: top;background-size: 35px;padding-left: 40px;}
#contacts .flex:nth-child(3){background-image: url(/images/map.svg);background-repeat: no-repeat;background-position: left;background-position-y: top;background-size: 35px;padding-left: 40px;}
#contacts .flex:nth-child(4){background-image: url(/images/mail.svg);background-repeat: no-repeat;background-position: left;background-position-y: top;background-size: 35px;padding-left: 40px;}
#contacts h2{display: inline-block;}
#contacts .btn-fill{width: 100%;margin-top: 20px;}

footer{padding-top: 25px;padding-bottom: 50px;}
footer .logo{font-size: 30px;font-weight:600; color: var(--color3);}
footer .info div{color: gray;font-size:14px;}
footer .info a{text-decoration: underline;font-size:14px;display: block;}
footer .phone{white-space: nowrap; display: block;background-image: url(/images/phone-contact.svg);background-repeat: no-repeat;background-position: left;background-position-y: center;background-size: 18px;padding-left: 25px;font-size: 20px;font-weight: 600;}
footer .mail{text-align: right;}
footer .soc{margin-top: 15px;}

.flex.soc{flex-direction: row;gap: 15px;}
.flex.soc img{width: 36px;}