@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root{--system-font:"Manrope", sans-serif;--primary:#FF5E14;--accent:#A4B743;--shadow:rgba(0,0,0,0.2) 0 0 10px;--black:#000;--white:#fff;--big-shadow:#C9D4D9 0 0 90px;--grey:#A1A1A1;--silver:#F5F5F5;}

iframe {vertical-align: middle;}
body,html{overflow-x:hidden;font-family:var(--system-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height: 100%;}
.small-shadow {box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);}
.primary-text {color: var(--primary);}
.white-text, .light-text {color: var(--white);}
.primary {background-color: var(--primary);}
.accent {background-color: var(--accent);}
.white {background-color: var(--white);}
.black {background-color: var(--black);}
.black-text {color: var(--black);}
.silver {background-color: var(--silver);}
.mh100p {min-height: 100%;}
.mask {background-color: var(--black); opacity: 0.6;position: absolute;top:0;left:0;width: 100%; height: 100%;}
body{font-family:var(--system-font);font-size:16px;font-weight:500;-webkit-animation:fadeinout .3s ease-in 1 forwards;animation:fadeinout .3s ease-in 1 forwards;}
@-webkit-keyframes fadeinout{0%{opacity:0}
100%{opacity:1}
;}
@keyframes fadeinout{0%{opacity:0}
100%{opacity:1}
;}
.flex-col{float:none !important;flex-direction:row;}
.flex-row{display:flex;}
.flex1 {flex: 1;}
.v-center{top:50%;position:relative;transform:translateY(-50%);}
.vcenter-items {align-items: center;}
.lngbar{position:absolute;top:15px;right:60px;z-index:30;-o-transition:all .2s linear;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;transition:all .2s linear;}
.lngbar .lng{width:30px;height:30px;text-align:center;line-height:30px;color:var(--white);font-weight:600;background-color:var(--accent); font-size: 0.9em;}
.lngbar ul{list-style:none;position:absolute;top:30px;left:0;background-color:var(--silver);width:30px;text-align:center;opacity:0;height:0px;overflow:hidden;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul.open{opacity:100;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;height:auto;}
.lngbar ul li{color:#000;cursor:pointer;height:30px;line-height:30px;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul li:hover{color:var(--black);background-color:var(--primary);-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul li:hover a{color:var(--white);}
.lngbar ul li a{text-decoration:none;color:#000;font-size:0.8em;font-weight:400;}
.lngbar .select{border-color:var(--primary) transparent;border-style:solid solid none;border-width:5px 5px medium;height:5px;right:-12px;position:absolute;top:12px;width:0;text-decoration:none;color:var(--black);}
.editable {display: contents;}
.cmspage .wraper {margin: auto;}
.cmspage p {margin-bottom: 10px;}
.cmspage ul, .cmspage ol {margin-bottom: 10px; padding-left: 20px; line-height: 1.5;}
.cmspage h2 {margin-bottom: 30px;}
.cmspage h3 {margin-bottom: 15px; font-size: 1.4em; font-weight: 700;}
.cmspage table {border: solid 1px var(--silver); border-collapse: collapse; width: 100%; margin-bottom: 20px;}
.cmspage table  td {padding: 10px; border: solid 1px var(--silver);}

input[type="radio"] {accent-color: var(--primary); }
input, select {
    border: 1px solid var(--primary)
}



.tripple-slider .slick-track, .double-slider .slick-track, .home-advantages-slider .slick-track {display: flex;gap: 20px;}

.fill-primary {fill: var(--primary);}
a:hover .accent-bottom-line:after{content: '';position: absolute;display: block;border-bottom:  4px solid var(--accent);margin: auto; width: 100px;margin-top: 15px}
.bg-bottom-left {background-position: bottom left;}
.bg-center-right {background-position: center right;}
.bg-bottom-right {background-position: bottom right;}
.bg-top-left {background-position: center left;}
.bg-right-center {background-position: right center;}


header .header-nav ul {display: flex;align-items: center;justify-content: space-between ;font-size: 15px;width: 100%;gap:20px; font-family: "Sofia-sans", sans-serif;}
header .header-nav >nav > ul > li:hover{font-weight: bold;position: relative}
header .header-nav > nav > ul > li > a:hover:after{  content: ''; position: absolute;left: 50%;transform: translateX(-50%);display: block;width: 40px;border-bottom: 3px solid var(--accent);margin-top: 5px;}
header .header-nav ul li ul {display: none;font-size: 14px}
header .header-nav ul li:hover div {display: flex;padding-right: 100%;padding-top: 20px; width: fit-content;}
header .header-nav ul li:hover div ul {position: absolute;display: flex;padding:20px;width: fit-content; flex-direction: column; align-items: center;width: max-content;gap: 10px;font-weight: 600;border-radius: 10px;background-color: var(--white)}
header .header-nav ul ul li:hover {color: var(--primary)}
#header-categories ul {display: flex; justify-content: space-between;font-size: 18px;text-transform: uppercase;}
#header-categories ul li {padding-block: 20px;}
#header-categories ul li:hover {padding-bottom: 15px;border-bottom: 5px solid white;}

/* .mobile-menu {display: none;} */
footer ul {display: flex;flex-direction: column; gap:5px}


.bottom-arrows .slick-track .slick-slide, .testimonial-slider .slick-track .slick-slide {margin-inline: 5px;}
.bottom-arrows .custom-prev::after {content: url('/public/images/icons/arrow-marked-left.svg'); display: block; width: 50px; height: 50px;cursor:pointer;z-index: 21; position: relative;}
.bottom-arrows .custom-next::after{content: url('/public/images/icons/arrow-marked-right.svg');display: block; width: 50px; height: 50px;cursor:pointer;z-index: 21; position: relative;}
.bottom-arrows .custom-prev:hover::after {content: url('/public/images/icons/arrow-left.svg');}
.bottom-arrows .custom-next:hover::after{content: url('/public/images/icons/arrow-right.svg');}
.bottom-arrows .custom-next{position: absolute;bottom: -95px;right: calc(50% - 55px)}
.bottom-arrows .custom-prev{position: absolute;bottom: -95px;left: calc(50% - 55px)}

.right-arrows .slick-track .slick-slide, .testimonial-slider .slick-track .slick-slide {margin-inline: 5px;}
.right-arrows .custom-prev::after {content: url('/public/images/icons/arrow-marked-left.svg'); display: block; width: 50px; height: 50px;cursor:pointer;z-index: 21; position: relative;}
.right-arrows .custom-next::after{content: url('/public/images/icons/arrow-marked-right.svg');display: block; width: 50px; height: 50px;cursor:pointer;z-index: 21; position: relative;}
.right-arrows .custom-prev:hover::after {content: url('/public/images/icons/arrow-left.svg');}
.right-arrows .custom-next:hover::after{content: url('/public/images/icons/arrow-right.svg');}
.right-arrows .custom-next{position: absolute;right: 15px;top: calc(50% - 55px)}
.right-arrows .custom-prev{position: absolute;right: 15px;bottom: calc(50% - 55px)}


.home-baners img{width: 100%; height: 100%; object-fit: cover;object-position: center}
.home-baners .slick-list {height: 100%}
.home-baners .slick-track {height: 100%}
.home-baners ul.slick-dots {position: absolute;display: flex;align-items: center; right: 50%; bottom:40px;gap: 5px;transform: translateY(-50%);}
.home-baners ul.slick-dots  button{padding-block: 5px;padding-inline:5px;border-radius: 100%;border: 2px solid var(--white);color: transparent;font-size: 0;}
.home-baners ul.slick-dots li.slick-active  button {color: transparent; background: var(--primary); border-color: var(--primary)}

.slick-list {height: 100%}
.slick-track {height: 100%}
ul.slick-dots {position: absolute;display: flex;align-items: center; right: 5%; bottom: 5%;gap: 5px;transform: translateY(-50%);}
ul.slick-dots  button{padding-block: 5px;padding-inline:5px;border-radius: 100%;border: 2px solid var(--white);color: transparent;font-size: 0;}
ul.slick-dots li.slick-active  button {color: transparent; background: var(--primary); border-color: var(--primary)}

.projects-cards article {position: relative;}
.projects-cards article img {width: 100%;}
.projects-cards article .title {position: absolute; bottom: 50px; left: 20px; color: white; text-transform: uppercase; font-size: 22px;}
.projects-cards article .descr {position: absolute; bottom: 30px; left: 20px; color: white;}
.projects-cards article .date, .projects-cards article .read-more, .projects-cards article .apply {display: none;}


@media (max-width:1360px){
.menu-call { width: 30px; position: relative; z-index: 101; cursor: pointer; padding-top: 10px; padding-bottom: 10px; }
.menu-call span { width: 100%; height: 3px; background-color: var(--primary); top: 0; right: 0; display: block; -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call span:before { content: ''; height: 3px; width: 100%; margin-bottom: 5px; display: block; background-color: var(--black); position: absolute; top: 0; -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call span:after { content: ''; height: 3px; width: 100%; margin-top: 5px; display: block; background-color: var(--black); position: absolute; bottom: 0; -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call.open span { -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; width: 0 }
.menu-call.open span:before,
    .menu-call.open span:after { content: ''; height: 2px; width: 100%; display: block; position: absolute; top: 8px; -webkit-transform: rotate(45deg); -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call.open span:before { transform: rotate(45deg); }
.menu-call.open span:after { transform: rotate(-45deg); margin-top: 0px; }
.menu-call span:before,
    .menu-call span:after,
    .menu-call.open span:before,
    .menu-call.open span:after { background-color: var(--primary); }
.mobile-menu { display: hidden; position: fixed; width: 100%; height: 100%; background-color: var(--silver); z-index: 99; transform: perspective(50em) rotateX(-90deg); transform-origin: 50% 0; -o-transition: all .8s ease; -moz-transition: all .8s ease; -webkit-transition: all .8s ease; transition: all .8s ease }
.mobile-menu .logo { max-width: 70%; float: left; margin-top: -8px; }
.mobile-menu {top: 90px;left: 0;right: 0;overflow: hidden;max-height: 0;opacity: 0;transform: translateY(-20px);transition: all 0.5s ease;border-radius: 0 0 10px 10px;}
.mobile-menu.open {max-height: 100%;opacity: 1;transform: translateY(0);}
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
.mobile-menu ul li>ul { padding-inline: 20px; padding-bottom: 20px; display: none; background-color: var(--white); }.mobile-menu>nav ul li a { text-align: start; }
.mobile-menu ul a { padding-left: 40px; z-index: 99;max-width: 85%;width: fit-content;; font-size: 1em; line-height: 30px; position: relative; display: block; background: var(--white); -webkit-background-clip: text; font-weight: 500; text-decoration: none; text-align: center; padding-block: 10px }
.mobile-menu ul li {position: relative;}
.mobile-menu ul li:has(ul)::after { content: url('/public/images/arrow-down-svgrepo-com.svg'); font-size: 0.7em; position: absolute; right: 15px; top: 20px; width: 24px; transform: translateY(-50%); height: 24px; }
.mobile-menu ul ul li a::after { position: absolute; height: 2px; width: 0%; margin: auto; content: ''; display: block; background-color: var(--darkYellow); left: 1%; right: 1%; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; }
.mobile-menu ul ul li a:hover::after,
.mobile-menu ul ul li a:active::after { width: 50%; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; }
.mobile-menu ul ul a { font-size: 1em; opacity: 100%; }
.mobile-menu ul ul a:hover { font-weight: bold; }

    .wraper {min-width: auto;}
}

@media (max-width:1024px){
    .responsive-row {display: flex ;flex-direction: column; gap: 20px;}
    .row.responsive-row > [class^="col-"] {width: 100%; margin-left: 0;}
    .tripple-slider .slick-track, .double-slider .slick-track, .home-advantages-slider .slick-track {gap: 0;}
}

@media (max-width:480px){
    .right-arrows .slick-track .slick-slide, .testimonial-slider .slick-track .slick-slide {margin-inline: 0;}
}