/* -------------------------------------- BASE -------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --bluecolor: #5E94DE;
    --lightbluecolor: #00BCD4;
    --whitecolor: #e9ecef;
    --linecolor: #e9ecef57;
    --darkcolor: #26292e;
    --gradientcolor: radial-gradient(circle, rgba(27,39,53,1) 0%, rgba(9,10,15,1) 100%);
    --gradientopasitycolor: radial-gradient(circle, rgba(27, 39, 53, .8) 0%, rgba(9, 10, 15, .8) 100%);
    --bs-font-sans-serif: "Exo 2", sans-serif;
    cursor: none !important;
}
::-webkit-scrollbar{width: 6px;}
::-webkit-scrollbar-track{background-color: var(--bluecolor);}
::-webkit-scrollbar-thumb{background-color: var(--bluecolor);}
::-webkit-scrollbar-track-piece{background-color: var(--darkcolor);}
body{background: var(--gradientcolor);min-height: 100vh;user-select: none}
img{pointer-events: none;}
.blue{color: var(--bluecolor)}
.bg-blue{background-color: var(--bluecolor); color: var(--whitecolor);}
a{color: var(--bluecolor); text-decoration: none; transition: all ease-in-out 0.3s}
a:hover{color: var(--whitecolor)}
.hidden-desktop{display: none}
.hidden-mobile{display: block}
@media (max-width: 768px){
    .hidden-desktop{display: block}
    .hidden-mobile{display: none}
}
/* ---------------------------------------- /BASE -----------------------------------*/
/* ---------------------------------------- CURSOR ----------------------------------*/
*{cursor: none !important;}
.cursor, .cursor2, .cursor3, .cursor4{position: fixed;border-radius: 50%;transform: translateX(-50%) translateY(-50%);pointer-events: none;left: -100px;top: 50%;mix-blend-mode: difference;-webkit-transition: all 0ms linear;transition: all 0ms linear;}
.cursor{background-color: var(--whitecolor);height: 0;width: 0;z-index: 1101;}
.cursor2, .cursor3{height: 32px;width: 32px;z-index: 1101;}
.cursor4{background-color: var(--whitecolor);height: 8px;width: 8px;z-index: 1101;}
.cursor2.hover, .cursor3.hover{transform:scale(2) translateX(-25%) translateY(-25%);border:none;}
.cursor2{border: 2px solid #5e94de;box-shadow: 0 0 22px #5e94de60;}
.cursor2.hover{background: #5e94de30;box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);}
.cursor4.hover{height: 6px;width: 6px;opacity: .2;}
@media (max-width: 992px){.cursor, .cursor2, .cursor3, .cursor4{display: none !important;}}
/* ---------------------------------------- /CURSOR ----------------------------------*/
/* ---------------------------------------- PRELOADER --------------------------------*/
.preloader{position: fixed;width: 100vw;height: 100%;margin: 0;background: #26292e;display: flex;justify-content: center;align-items: center;align-content: center;z-index:999;}
.preloader div{width: 8vmax;height: 8vmax;border-right: 4px solid #5e94de;border-radius: 100%;animation: spinRight 800ms linear infinite;}
.preloader div:before, .preloader div:after{content: '';width: 6vmax;height: 6vmax;display: block;position: absolute;top: calc(50% - 3vmax);left: calc(50% - 3vmax);border-left: 3px solid #5e94de;border-radius: 100%;animation: spinLeft 800ms linear infinite;}
.preloader div:after{width: 4vmax;height: 4vmax;top: calc(50% - 2vmax);left: calc(50% - 2vmax);border: 0;border-right: 2px solid #5e94de;animation: none;}
@-webkit-keyframes spinLeft{
	from{transform: rotate(0deg);}
	to{transform: rotate(720deg);}
}
@keyframes spinLeft{
	from{transform: rotate(0deg);}
	to{transform: rotate(720deg);}
}
@-webkit-keyframes spinRight{
	from{transform: rotate(360deg);}
	to{transform: rotate(0deg);}
}
@keyframes spinRight{
	from{transform: rotate(360deg);}
	to{transform: rotate(0deg);}
}
.loaded_hiding .preloader{transition: 0.3s opacity;opacity: 0;}
.loaded .preloader{display: none;}
/* -------------------------------------- /PRELOADER --------------------------------*/
/* ---------------------------------------- HEADER ----------------------------------*/
.dropdown-menu{background: var(--gradientcolor)}
.dropdown-item{color: var(--bluecolor)}
.dropdown-item.active{color: var(--darkcolor);font-weight: 700; background-color: var(--whitecolor)}
.dropdown-menu{--bs-dropdown-border-radius: 10px}
.logo{padding: 10px 0;}
.nav-link{color: var(--bluecolor);transition: all ease-in-out 0.3s}
.nav-link:hover{color:var(--whitecolor)}
.nav-link.active{color:var(--whitecolor);font-weight: 700}
.navbar-toggler{border: 1px solid var(--whitecolor);}
#offcanvasNavbar .offcanvas-header, #offcanvasNavbar .offcanvas-body{background: var(--gradientcolor);}
#offcanvasNavbar .offcanvas-title{margin-right:20%;color: var(--whitecolor);}
.navbar-nav .btn-group .nav-link{border: none;background: none;padding-right: .25rem;padding-left: .25rem}
.navbar-nav .btn-group .dropdown-toggle-split::after{margin-left: .3rem}
ol.breadcrumb-relistic{margin:20px;}
ol.breadcrumb-relistic li a, ol.breadcrumb-relistic li.active span{color:var(--whitecolor);display:block;background:var(--bluecolor);text-decoration:none;position:relative;height:30px;line-height:30px;padding:0 10px 0 5px;text-align:center;margin-right:23px;font-size:14px;transition:all .3s;}
ol.breadcrumb-relistic li a:before, ol.breadcrumb-relistic li a:after, ol.breadcrumb-relistic li.active span:before, ol.breadcrumb-relistic li.active span:after{content:"";position:absolute;top:0;border:0 solid var(--bluecolor);border-width:15px 10px;width:0;height:0;transition:all .3s;}
ol.breadcrumb-relistic li a:before, ol.breadcrumb-relistic li.active span:before{left:-20px;border-left-color:transparent;}
ol.breadcrumb-relistic li a:after, ol.breadcrumb-relistic li.active span:after{left:100%;border-color:transparent;border-left-color:var(--bluecolor);}
ol.breadcrumb-relistic li:first-child a, ol.breadcrumb-relistic li:first-child.active span{padding-left:15px;border-radius:4px 0 0 4px;}
ol.breadcrumb-relistic li:first-child a:before, ol.breadcrumb-relistic li:first-child.active span:before{border:none;}
ol.breadcrumb-relistic li:last-child a, ol.breadcrumb-relistic li:last-child.active span{padding-right:15px;border-radius:0 4px 4px 0;margin-right:0;}
ol.breadcrumb-relistic li:last-child a:after, ol.breadcrumb-relistic li:last-child.active span:after{border:none;}
ol.breadcrumb-relistic li a:hover{background-color:var(--whitecolor);color:var(--darkcolor);}
ol.breadcrumb-relistic li a:hover:before{border-color:var(--whitecolor);border-left-color:transparent;}
ol.breadcrumb-relistic li a:hover:after{border-left-color:var(--whitecolor);}
@media (min-width: 992px){#offcanvasNavbar .offcanvas-header, #offcanvasNavbar .offcanvas-body{background: transparent;}}
@media (max-width: 576px){.breadcrumb-item.active, .breadcrumb-item{margin: 10px 0;}}
/* ---------------------------------------- /HEADER ----------------------------------*/
/* ---------------------------------------- FEEDBACK ----------------------------------*/
.btn-close{position: absolute;right: 15px}
.modal-title{text-align: left; color: var(--whitecolor)}
.brif-button{width: auto;padding: 10px 20px;position: relative;display: block;text-decoration: none;overflow: hidden;border-radius: 10px;}
.brif-button:hover .wave{top: -120px;}
.brif-button span{position: relative;z-index: 1;color: var(--whitecolor);font-size: 16px;letter-spacing: 2px;}
.brif-button .wave{width: 200px;height: 200px;background: var(--gradientcolor);box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);position: absolute;left: 0;top: -80px;transition: 0.3s;}
.brif-button .wave::before, .brif-button .wave::after{width: 200%;height: 200%;content: "";position: absolute;top: 0;left: 50%;transform: translate(-50%, -75%);}
.brif-button .wave::before {border-radius: 45%;background: var(--bluecolor);animation: wave 5s linear infinite;}
.brif-button .wave::after {border-radius: 40%;background: var(--gradientcolor);animation: wave 10s linear infinite;}
@keyframes wave{
    0%{transform: translate(-50%, -75%) rotate(0deg);}
    100%{transform: translate(-50%, -75%) rotate(360deg);}
}
.modal-content{background: var(--gradientcolor)}
.feedback-position{position: relative;}
.all-labels{z-index: 1;width: fit-content;position: absolute;top: -17px;right: 10%;font-size: 0.75em;color: var(--lightbluecolor);border-radius: 5px 5px 0 0;padding: 0 10px;background: var(--darkcolor)}
.form-control{padding: 10px;background-color: var(--darkcolor); color: var(--whitecolor);border: 1px solid var(--lightbluecolor)}
.form-control:focus{background-color: var(--darkcolor); color: var(--whitecolor);border: 1px solid var(--lightbluecolor)}
.form-select, #id_deadline{cursor: initial !important;}
.btn-outline-light{color: var(--whitecolor);border-color: var(--lightbluecolor)}
.service-type-btn{position: relative;padding-right: 34px;background-repeat: no-repeat;background-position: right 0.75rem center;background-size: calc(.75em + .375rem) calc(.75em + .375rem);}
.was-validated .btn-check:required:invalid + .service-type-btn{border-color:#dc3545 !important;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");}
.was-validated .btn-check:required:valid + .service-type-btn{border-color:#198754 !important;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");}
.contact-form-errors{text-align: center}
.contact-btn-submit{margin-top: 10px;margin-bottom: 10px;width: 100%; font-weight: 700;text-align: center;border-radius: 10px;padding: 20px;background: var(--lightbluecolor);color: var(--darkcolor);}
.small{font-size: 12px;color: var(--linecolor);text-align: center}
.small a{font-size: 12px;text-decoration: underline;color: var(--linecolor)}
@media (max-width: 576px){.breadcrumb-item.active{margin: 10px;}}
/* ---------------------------------------- /FEEDBACK ----------------------------------*/
/* ------------------------------------------ CONTENT ----------------------------------*/
.section{background: var(--gradientopasitycolor);border:1px solid var(--linecolor);border-radius: 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 22px rgba(0, 0, 0, 0.1);}
.section-icon{}
.h1-parent{position: relative}
.h1-img{position: absolute;top: -75px;left: 50%;transform: translateX(-50%);max-width: 90%}
.h1-desc{height: fit-content;}
h1{color: var(--whitecolor);text-transform: uppercase;letter-spacing: 2px; text-align: right}
.h1-desc h2{display: flex;align-items: center; justify-content: flex-end;color: var(--bluecolor);text-transform: uppercase;letter-spacing: 2px;font-size: .9em;}
.h1-desc h2:before{content: "";border: solid var(--bluecolor);margin-right: 10px;border-width: 3px 3px 0 0;transform: rotate(45deg);display: inline-block;width: 10px;height: 10px;}
hr{width: 100% !important;border: none;height: 1px !important;margin: 10px auto;background-image: linear-gradient(90deg, transparent, var(--bluecolor));background-color: transparent;opacity: .3;}
p{color: var(--whitecolor);text-align: justify;letter-spacing: 1px;}
h2{color: var(--whitecolor);text-transform: uppercase; text-align: right}
h3{color: var(--bluecolor);text-transform: uppercase; text-align: right;font-size: 1.2em}
.card{position: relative;border-radius: 15px;background: var(--gradientopasitycolor);border: 1px solid var(--linecolor);justify-content: space-between;}
.card::after{content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background: linear-gradient(90deg, transparent 0%, transparent 10%, var(--bluecolor) 50%, transparent 90%, transparent 100%);}
.card::before{content: "";position: absolute;left: 0;right: 0;bottom: -20px;height: 40px;background: radial-gradient(var(--bluecolor) 0%, transparent 30%);filter: blur(4px);}
.img-iso{width: 80%;margin-left: 10%;}
@media (max-width: 992px){.h1-img{display: none}}
/* ----------------------------------------- /CONTENT ----------------------------------*/
/* ------------------------------------------ FOOTER -----------------------------------*/
.menu-bottom p{text-transform: uppercase}
.menu-bottom ul{list-style: circle}
.menu-bottom ul li a.active{color: var(--whitecolor)}
.telegram{height: 130px;display: flex;justify-content: space-evenly;}
.telegram div{display: flex;flex-direction: column;justify-content: space-around;}
.tg-link{display: inline-flex;align-items: center;gap: 10px;padding: 10px 20px;border-radius: 10px;color: var(--lightbluecolor);background: rgba(0,136,204,.08);border: 1px solid var(--lightbluecolor);transition: all ease-in-out 0.3s;}
.tg-link__icon{flex: 0 0 auto;fill: currentColor;}
.tg-link:hover, .tg-link:focus-visible{transform: translateY(-1px);background: rgba(0,136,204,.14);border-color: rgba(0,136,204,.45);box-shadow: 0 10px 24px rgba(0,0,0,.12);outline: none;}
.tg-link:active{transform: translateY(0);box-shadow: none;}
@media (min-width: 576px){.menu-bottom{margin-left: 30px}}
/* ----------------------------------------- /FOOTER ----------------------------------*/