@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/*
font-family: "Manrope", sans-serif;
*/

:root{
    --primary: #3A97FF;
    --secondary: #020D42;
    --white: #FFFFFF;
    --black: #000000;
    --theme: #33343C;
}

body{ padding:0; margin:0; font-size:16px; color:var(--theme); font-family: "Manrope", sans-serif;}
a, button{outline:none !important; text-decoration:none; box-shadow:none; transition:all .4s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%; height:auto;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important;}
input, select, textarea, button{ outline:none !important; box-shadow:none;}
input, textarea, select{ /*-moz-appearance: none; -webkit-appearance: none;*/ box-shadow:none !important;}

.container{ width:90%; max-width:1410px; margin:0 auto; padding:0;}

.btns{ margin: 0; padding: 14px 25px; display: inline-block; border-radius: 10px; font-size: 18px; color: var(--white); font-weight: 700; text-transform: uppercase; background-image: linear-gradient(to right, #0377F4, #409BFF); background-size: 200% 100%; position: relative;}
.btns:hover{ background-position: 100% 0; color: var(--white);}
.btns.ic::before{ content: ""; width: 22px; height: 22px; background: url(../images/btn_arrow.svg) center center no-repeat; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition:all .4s ease-in-out;}
.btns.ic{ padding: 14px 48px 14px 25px;}
.btns.ic:hover::before{ transform: translateY(-50%) rotate(45deg);}

.global_title{ margin: 0 0 40px; padding: 0 0 16px; font-size: 55px; font-weight: 600; color: var(--secondary); position: relative;}
.global_title::before{ content: ""; width: 90px; height: 2px; background: #0275F2; position: absolute; left: 0; bottom: 0;}
.global_title.center{ text-align: center;}
.global_title.center::before{ right: 0; margin: auto;}
.global_title.white{ color: var(--white);}
.global_title.white::before{ background: var(--white);}

/*===================
 		HEADER 
 ===================*/
header{ width:100%; padding:20px 0; margin:0; position:absolute; top: 0; left: 0; z-index:999; border-bottom: 1px solid rgba(255,255,255,0.2); transition:all .4s ease-in-out;}
header .navbar{ margin:0; padding:0;}
header .navbar-brand{ margin:0; padding:0;}
header .navbar-light .navbar-nav .nav-item{ margin:0 0 0 50px;}
header .navbar-light .navbar-nav .nav-link{ margin:0; padding:0; font-weight: 600; font-size: 18px; color: var(--white);}
header .navbar-light .navbar-nav .nav-link:focus, header .navbar-light .navbar-nav .nav-link:hover{ color: var(--primary);}
header .navbar-light .navbar-nav .nav-link.active, header .navbar-light .navbar-nav .show > .nav-link{ color: var(--primary);}


/* HEADER STICKY */
header.sticky{ padding:10px 0; position:fixed; background: var(--secondary); z-index:999 !important; animation:slide-down 0.4s;}

@keyframes slide-down{
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}


/*===================
 		FOOTER 
===================*/
.footer_sec{ padding:88px 0 45px; margin:0; background: var(--secondary);}
.footer_sec figure{ margin: 0; padding: 0;}
.footer_sec h3{ margin: 50px 0 40px; padding: 0; font-size: 30px; color:var(--white); font-weight: 700;}
.subs_info{ margin: 0; padding: 0; display: flex; background: var(--white); border-radius: 11px;}
.subs_info .form-control{ width: 100%; margin: 0; padding: 0 18px; height: 50px; font-size: 17px; color: #474C66; border-radius: 10px; border: none; box-shadow: none;}
.subs_info button{ margin: 0; padding: 0; width: 50px; min-width: 50px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background: var(--primary); border: none;}
.subs_info button:hover{ background: var(--black);}
.footer_sec h4{ margin: 0 0 18px; padding: 0; font-size: 18px; font-weight: 700; color: var(--white);}
.foot_link{ margin: 0; padding: 0;}
.foot_link li{ margin: 0 0 12px; padding: 0; font-size: 17px; font-weight: normal;}
.foot_link li a{  color: #B5BBD9; display: block; position: relative;}
.foot_link li a:before{ content: ""; width: 0; height: 2px; background: var(--white); position: absolute; left: 0; top: 0; bottom: 0; margin: auto; transition:all .4s ease-in-out;}
.foot_link li a:hover{  color: var(--white); padding-left: 15px;}
.foot_link li a:hover:before{ width: 10px;}
.foot_add{ margin: 0; padding: 0; }
.foot_add li{ margin: 0 0 34px; padding: 0 0 0 32px; font-size: 17px; font-weight: normal; position: relative; min-height: 26px; color: #B5BBD9;}
.foot_add i{ position: absolute; display: flex; top: 0; left: 0; transition:all .2s ease-in-out;}
.foot_add a{ color: #60ABFF;}
.foot_add a:hover{ color: var(--white);}
.foot_add a:hover i{ filter: brightness(0) invert(1);}
.map_info{ margin: 0; padding: 0; width: 100%; display: flex;}
.map_info iframe{ width: 100%; line-height: 0; border-radius: 10px;}
.copyright{ margin: 70px 0 0 0; padding: 34px 0 0 0; border-top: 1px solid rgba(255,255,255,0.15);}
.copyright p{ margin: 0; padding: 0; font-size: 17px; color: #B5BBD9;}
.copyright p strong{ color: var(--white);}
.copyright p span{ display: inline-block; margin: 0 10px; color: #3A4167;}
.copyright p a{ color: #B5BBD9;}
.copyright p a:hover{ color: var(--white);}
.foot_social{ margin: 0; padding: 0; display: flex; gap: 10px;}
.foot_social li{ margin: 0; padding: 0;}
.foot_social li a{ width: 45px; height: 45px; min-width: 45px; border-radius: 10px; display: flex; background: rgba(255,255,255,0.15); justify-content: center; align-items: center;}
.foot_social li a:hover{ background: var(--primary);}

/*=================================
 		SECTION START HERE 
=================================*/
section{ padding:0; margin:0;}

.hero_sec{ margin: 0; padding: 0; background: var(--black); position: relative; overflow: hidden;}
.hero_sec .bg{ width: 100%; object-fit: cover;}
.hero_sec .jquery-background-video-wrapper{ height:auto; min-height: 950px; position: relative; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0.5;}
.hero_sec .jquery-background-video{ position: absolute; min-width: 100%; min-height: 100%; width: 100%; height: 100%; top: 50%; left: 50%; -o-object-fit: cover; object-fit: cover; transform: translate(-50%, -50%);}
.hero_sec .cap_info{ width: 100%; margin: 0; padding: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.hero_sec .cap_info .inner{ margin: 0; padding: 40px 0 0 0; max-width: 750px;}
.hero_sec .cap_info h1{ margin: 0 0 20px 0; padding: 0; font-size: 70px; color: var(--white); font-weight: 600;}
.hero_sec .cap_info p{ margin: 0 0 40px 0; padding: 0; font-size: 20px; color: var(--white); font-weight: 500; line-height: 30px;}

/* About */
.about_sec{ margin: 0; padding: 180px 0 0 0; position: relative;}
.about_sec figure{ margin: 0 0 -90px 0; padding: 0;}
.about_sec figure img{ border-radius: 10px;}
.about_sec .detail{ padding-top: 50px;}
.about_sec strong{ margin: 0 0 20px 0; padding: 0; display: block; font-size: 23px; color: var(--secondary); line-height: 34px; font-weight: 600;}
.about_sec p{ margin: 0 0 20px 0; padding: 0; font-size: 19px; color: var(--theme); line-height: 34px;}

/* Counter */
.counter_sec{ margin: 0; padding: 190px 0 120px 0; background: #0275F2 url(../images/counter_bg.png) center center no-repeat; background-size: cover;}
.counter_block{ margin: 0 0 30px 0; padding: 0 0 30px 0; position: relative;}
.counter_block::before{ content: ""; width: 2px; height: 100%; background: #3591F5; position: absolute; top: 0; left: 15px;}
.counter_block strong{ margin: 0; padding: 0 0 0 55px; display: block; font-size: 110px; color: var(--white); line-height: 120px;}
.counter_block small{ margin: 0; padding: 0; font-size: 19px; color: var(--white); display: flex; align-items: center; gap: 30px;}
.counter_block small i{ margin: 0; padding: 0; width: 31px; min-width: 31px; max-width: 31px; height: 31px; background: #59A9FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;}

/* Service */
.service_sec{ margin: 0; padding: 120px 0 100px 0;}
.service_block{ height: calc(100% - 30px); margin: 0 0 30px 0; padding: 50px 30px 20px 30px; position: relative; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.10); background: var(--white); box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.07); transition:all .4s ease-in-out;}
.service_block .main{ width: 0; height: 0; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: 10px; mix-blend-mode: overlay; opacity: 0.3; transition:all .4s ease-in-out;}
.service_block .detail{ position: relative; z-index: 1;}
.service_block i{ margin: 0 0 55px 0; padding: 0; width: 79px; height: 79px; background: rgba(58,151,255,0.1); border-radius: 10px; display: flex; justify-content: center; align-items: center; transition:all .4s ease-in-out;}
.service_block h3{ margin: 0 0 15px 0; padding: 0; font-size: 27px; color: var(--secondary); font-weight: 700; transition:all .4s ease-in-out;}
.service_block p{ margin: 0 0 10px 0; padding: 0; font-size: 19px; color: var(--theme); line-height: 30px; transition:all .4s ease-in-out;}
.service_block:hover{ background: var(--primary);}
.service_block:hover .main{ width: 100%; height: 100%;}
.service_block:hover i{ background: var(--white);}
.service_block:hover h3, .service_block:hover p{ color: var(--white);}
.service_block:hover .more_link{ filter: brightness(0) invert(1);}

/* Serve */
.serve_sec{ margin: 0; padding: 0;}
.serve_sec .global_title{ margin-bottom: 50px;}
.serve_sec .inner{ margin: 0; padding: 0 0 0 20px;}
.serve_block{ margin: 0; padding: 0; height: 100%; position: relative; border-radius: 10px; transition:all .4s ease-in-out;}
.serve_block::before { content: ""; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20.45%, #000 98.02%); border-radius: 10px;}
.serve_block .main{ width: 100%; height: 100%; min-height: 520px; max-height: 520px; object-fit: cover; border-radius: 10px; transition:all .4s ease-in-out;}
.serve_block .cap_info{ margin: 0; padding: 25px 35px 5px 25px; position: absolute; bottom: 0; left: 0; transition:all .4s ease-in-out;}
.serve_block h3{ margin: 0 0 20px 0; padding: 0; font-size: 25px; color: var(--white); font-weight: 700;}
.serve_block p{ margin: 0; padding: 0; font-size: 18px; color: var(--white); line-height: 23px; height: 0; overflow: hidden; visibility: hidden; transition:all .4s ease-in-out;}
.serve_block .more_arrow{ position: absolute; bottom: 26px; right: 15px;}
.serve_block .more_arrow img{ width: 22px; filter: brightness(0) invert(1);}
.serve_block:hover .cap_info{ padding-bottom: 25px;}
.serve_block:hover p{ height: 70px; visibility: visible;}

.serve_sec .owl-carousel .owl-nav{ position: absolute; top: -110px; right: 10%;}
.serve_sec .owl-carousel .owl-nav button.owl-next, .serve_sec .owl-carousel .owl-nav button.owl-prev{ width:40px; height:40px; font-size:0 !important; background:url(../images/slider_arrow.svg) center center no-repeat; display:inline-block; position:relative; opacity:1; margin:0; z-index:99; border:none; border-radius:0px; transition:all .4s ease-in-out; filter: brightness(0); opacity: 0.2; background-size: 100% 100%;}
.serve_sec .owl-carousel .owl-nav button.owl-prev{ right: 10px; transform: scale(-1);}
.serve_sec .owl-carousel .owl-nav button.owl-next:hover, .serve_sec .owl-carousel .owl-nav button.owl-prev:hover{ filter: inherit; opacity: 1;}

.serve_sec .owl-carousel .owl-item .item{ height: 100%;}
.serve_sec .owl-carousel .owl-item{ transition: flex 0.4s ease; flex: 1;}
.serve_sec .owl-carousel .owl-stage{ display: flex;}
.serve_sec .owl-carousel .owl-stage-outer{ margin-left: -70px;}

/* Forge */
.forge_sec{ padding: 100px 0; background: #0275f2 url(../images/forge_bg.png) no-repeat center center; background-size: cover;}
.forge_sec p{ margin: 0; color: var(--white); width: 100%; max-width: 710px; font-size: 18px; line-height: 30px;}
.btn_contact{ margin: 15px; padding: 20px; width: 100%; max-width: 306px; height: 306px; font-size: 22px; font-weight: 700; color: var(--primary); text-transform: uppercase; gap: 10px; background: var(--white); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative;}
.btn_contact img{ transition:all .4s ease-in-out;}
.btn_contact:after{ content: ""; position: absolute; left: -15px; top: -15px; right: -15px; bottom: -15px; border: 1px dashed var(--white); border-radius: 50%;}
.btn_contact:hover{ color: var(--secondary);}
.btn_contact:hover img{ transform: rotate(45deg);}
.btn_contact:hover:after{ animation: rotate 50s linear infinite;}

@keyframes rotate{
    to{ transform: rotate(360deg);}
    from{ transform: rotate(0);}
}

.customer_sec{ padding: 120px 0;}
.customer_sec .inner{ margin: 0; padding: 0;}
.customer_sec .owl-carousel{ display: flex; flex-direction: column;}
.customer_sec .owl-carousel .owl-stage-outer{ display: flex;}
.customer_sec .owl-carousel .owl-stage{ display: flex;}
.customer_sec .owl-carousel .owl-item{ display: flex;}
.customer_sec .owl-carousel .item{ display: flex;} 
.customer_block{ margin: 0; padding: 40px 50px; border-radius: 10px; background: var(--white) url(../images/quote.svg) no-repeat right -10px bottom -30px; border: 30px solid #EBF5FF;}
.customer_block .rates{ display: flex; gap: 4px; margin-bottom: 22px;}
.customer_sec .owl-carousel .owl-item img{ width: auto; display: inline-block;}
.customer_block p{ margin: 0 0 28px; padding: 0; font-size: 18px; font-weight: 500; color: #474C66;}
.customer_block .author{ margin: 0; padding: 0; font-size: 17px; color: #737991; display: flex; gap: 13px; align-items: center;}
.customer_block figure{ margin: 0; width: 60px; min-width: 60px; height: 60px; border-radius: 50%;}
.customer_block figure img{ width: 100% !important; height: 100%; border-radius: 50%; object-fit: cover;}
.customer_block strong{ display: block; font-size: 19px; color: #0275F2; line-height: normal;}
.customer_sec .owl-carousel .owl-nav button{ width:auto; height:auto; font-size:0; display:block; border-radius:0; position:absolute; top:50%; transform: translateY(-50%); background:none !important; z-index:555; transition:all .4s ease-in-out; filter: brightness(0) invert(0); opacity: 0.3;}
.customer_sec .owl-carousel .owl-nav button.owl-prev{ left:-120px;}
.customer_sec .owl-carousel .owl-nav button.owl-prev:after{ content: ""; width:30px; height:24px; background: url(../images/slider_arrow.svg) no-repeat center center; background-size: auto auto; display: block; transform: rotate(-180deg);}
.customer_sec .owl-carousel .owl-nav button.owl-next{ right:-120px;}
.customer_sec .owl-carousel .owl-nav button.owl-next:after{ content: ""; width:30px; height:24px; background: url(../images/slider_arrow.svg) no-repeat center center; background-size: auto auto; display: block;}
.customer_sec .owl-carousel .owl-nav button:hover{  opacity: 1; filter: none;}
.customer_sec .owl-carousel .owl-dots{ width:100%; margin:15px 0 0; padding:0; text-align:center; position:relative; left:0; bottom:0; z-index:9;}
.customer_sec .owl-carousel .owl-dot{ margin:0 3px; display:inline-block;}
.customer_sec .owl-carousel .owl-dot span{ width:10px; height:10px; display:block; border-radius:50%; background:#bfbfbf;}
.customer_sec .owl-carousel .owl-dot.active span{ background:var(--primary);}