@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
	--st-primarycolor:#01A0E2;
	--st-darkblack:#1C1C27;
	--st-paracolor:#6E7676;
	--st-footcolor:#1E2E50;
	--st-black:#000000;
	--st-white:#ffffff;
	--st-lightgrey:#f7f7f7;
	--st-border1:#E7E1DD;
	--fs8:8px;
	--fs10:10px;
	--fs12:12px;
	--fs14:14px;
	--fs16:16px;
	--fs18:18px;
	--fs20:20px;
	--fs22:22px;
	--fs24:24px;
	--fs26:26px;
	--fs28:28px;
	--fs30:30px;
	--fs32:32px;
	--fs34:34px;
	--fs36:36px;
	--fs38:38px;
	--fs40:40px;
	--fs42:42px;
	--fs44:44px;
	--fs46:46px;
	--fs48:48px;
	--fs50:50px;
	--fw300:300;
	--fw400:400;
	--fw500:500;
	--fw600:600;
	--fw700:700;
	--fw800:800;
	--fw900:900;
	--radius8:8px;
	--radius10:10px;
	--radius12:12px;
	--radius14:14px;
	--radius16:16px;
	--radius20:20px;
	--interfamily:"Inter", sans-serif;
	--barlowfamily:"Barlow", sans-serif;
}


*{margin:0px; padding:0px; box-sizing:border-box; font-family:var(--interfamily);}
p{font-size:var(--fs16); font-family:var(--interfamily); color:var(--st-paracolor); line-height:var(--fs28); margin-bottom:var(--fs14);}

ul{margin:0px; padding:0px;}
ul li{list-style:none;}

h1, h2, h3, h4, h5, h6{font-family:var(--interfamily);}

button{font-family:var(--barlowfamily);}

.padd60{padding:60px 0px;}
.padd80{padding:80px 0px;}
.padd100{padding:100px 0px;}
.padd120{padding:120px 0px;}
.padd140{padding:140px 0px;}

.wrapper{width:100%; height:auto; overflow:hidden;}


/* Buttons */

.btn-primary{background:var(--st-primarycolor); color:var(--st-white); text-transform:uppercase; font-size:var(--fs16); line-height:var(--fs50);}
.btn-primary{padding:0px var(--fs24); border:0px; border-radius:0px; font-weight:var(--fw500); letter-spacing:0.3px; transition:500ms;}
.btn-primary{border-radius:calc(var(--fs8) - 6px);}


/* Heading */

.heading{width:100%; height:auto;}
.heading label{font-family:var(--interfamily); font-size:var(--fs14); letter-spacing:1.5px; font-weight:var(--fw500);}
.heading label{line-height:normal; color:var(--st-primarycolor); text-transform:uppercase; position:relative; margin-bottom:var(--fs12);}
.heading label{display:flex; align-items:center; justify-content:flex-start;}
.heading label img:first-child{margin-right:var(--fs10);}
.heading label img:last-child{margin-left:var(--fs10);}
.heading h2{color:var(--st-darkblack); font-weight:bold; line-height:normal; font-size:var(--fs42); }


/* Header */

.top_head{background-color:var(--st-footcolor);}
.cnt_info{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:var(--fs40);}
.cnt_info li{color:rgba(255, 255, 255, 0.7); font-size:var(--fs14); display:flex; align-items:center; gap:var(--fs8);}

.socialmedia{justify-content:flex-end;}
.socialmedia li{border-right:1px solid #283D68;}
.socialmedia li:first-child{border-left:1px solid #283D68;}
.socialmedia li:hover{background:#283D68;}
.socialmedia li a{width:var(--fs40); height:var(--fs40); display:flex; align-items:center; justify-content:center; color:var(--white); }
.socialmedia li a svg path{fill:rgba(255, 255, 255, 0.8);}
.socialmedia li:hover a svg path{fill:var(--st-white);}

.bottom_head {background:var(--st-white); padding:var(--fs12) 0px; border-bottom:1px solid #e9e9e9; box-shadow:0px 1px 10px rgba(0, 0, 0, 0.05);}
.bottom_head .container{display:flex; align-items:center; justify-content:space-between;}

.navigation > ul{display:flex; align-items:center; gap:calc(var(--fs36) - 1px);}
.navigation > ul > li{position:relative;}
.navigation > ul > li > a{text-decoration:none; font-family:var(--interfamily); font-weight:var(--fw500); color:var(--st-darkblack);}
.navigation > ul > li > a:hover{color:var(--st-primarycolor); }
.navigation > ul > li > a.active{color:var(--st-primarycolor);}

.sub-menu {position:absolute; z-index:9; width:200px; padding-top:var(--fs28); display:none;}
.sub-menu li a {white-space:nowrap; text-decoration:none; padding:var(--fs14) var(--fs14); display:block; background:var(--st-white);}
.sub-menu li a {color:var(--st-darkblack); border-bottom:1px solid #ededed;}
.sub-menu li a:hover{	color:var(--st-primarycolor);	background:var(--st-lightgrey);}

.navigation > ul > li:hover .sub-menu{display:block;}
.brand-logo img {    height: 45px;}



/* Fixed Menu */

.stricky-header {position:fixed; z-index:991; top:0; left:0; transform:translateY(-120%); transition:transform 500ms ease;}
.stricky-header.stricky-fixed {-webkit-backface-visibility:visible !important; backface-visibility:visible !important; }
.stricky-header.stricky-fixed {-webkit-animation-name:flipInX; animation-name:flipInX; -webkit-animation-duration:1s; animation-duration:1s;}
.stricky-header.stricky-fixed {animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}



@keyframes flipInX {
 0% {
 -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
 -webkit-animation-timing-function:ease-in;
 animation-timing-function:ease-in;
 opacity:0;
 }

 40% {
 -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
 -webkit-animation-timing-function:ease-in;
 animation-timing-function:ease-in;
 }

 60% {
 -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
 transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
 opacity:1;
 }

 80% {
 -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);
 transform:perspective(400px) rotate3d(1, 0, 0, -5deg);
 }

 100% {
 -webkit-transform:perspective(400px);
 transform:perspective(400px);
 }
}

.flipInX {
 -webkit-backface-visibility:visible !important;
 backface-visibility:visible !important;
 -webkit-animation-name:flipInX;
 animation-name:flipInX;
}





/* Mobile Menu */

.toggle-menu {border:2px solid var(--st-primarycolor); color:var(--st-primarycolor); line-height:var(--fs50); width:var(--fs50); display:flex; }
.toggle-menu {align-items:center; justify-content:center; height:var(--fs50); margin-left:var(--fs10); font-size:var(--fs24); cursor:pointer;}
.toggle-menu:hover{	background:var(--st-primarycolor);	color:var(--st-white);}

.overlay {position:fixed; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); z-index:99; left:-100%; top:0;}
.overlay{-webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out;}
.mobile-menu {position:fixed; left:-100%; top:0; background:var(--st-white); z-index:999; height:100%; width:80%;}
.mobile-menu{-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.mobile-menu > a {padding:var(--fs16) var(--fs16) var(--fs32) var(--fs16); display:block;}
.mobile-menu ul.mblemenu{display:flex; flex-wrap:wrap; flex-direction:column;}
.mobile-menu ul.mblemenu li{width:100%; position:relative;}
.mobile-menu ul.mblemenu li a{text-decoration:none; display:block; padding:var(--fs14) var(--fs20); border-bottom:1px solid var(--st-border1);}
.mobile-menu ul.mblemenu li a{color:var(--st-darkblack); font-weight:var(--fw500);}

.msocialmedia {padding:var(--fs16); margin-top:var(--fs24); display:flex; align-items:center; justify-content:center; gap:var(--fs10);}
.msocialmedia li a{width:var(--fs40); height:var(--fs40); display:flex; align-items:center; justify-content:center; border:1px solid #ededed;}
.msocialmedia li a{text-decoration:none; font-size:var(--fs18); color:var(--st-darkblack);}

.mobile-menu .sub-menu-dropdown span {position:absolute; width:var(--fs28); height:var(--fs28); display:flex; align-items:center; justify-content:center; }
.mobile-menu .sub-menu-dropdown span {top:var(--fs10); right:var(--fs16); border:1px solid var(--st-darkblack); color:var(--st-darkblack);}
.mobile-menu .sub-menu-dropdown .sub-menu{position:static; padding-top:0px; width:100%;}
.mobile-menu .sub-menu-dropdown .sub-menu li a{background:var(--st-lightgrey); color:rgba(0, 0, 0, 0.7); font-size:var(--fs14);}
.mobile-menu .sub-menu-dropdown .sub-menu li a{padding-left:var(--fs40);}
.mobile-menu > a > img{height:var(--fs36);}
.close {    position: absolute;    top: 16px;    right: var(--fs12);    font-size: var(--fs22);    color: var(--st-primarycolor);}

.mobile-menu.show{left:0px; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; }
.mobile-menu.show{-o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; }
.overlay.show{left:0px; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out; }
.overlay.show{transition:all 0.2s ease-in-out; }


/* Hero Section */

.banner{position:relative; height:calc(100vh - 120px);}
.banner img{width:100%; height:100%; display:block;}
.hero-text {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:flex-start;}
.hero-text .container > div{width:45%; margin-top:-7%;} 
.hero-text h1{font-size:calc(var(--fs16) * 4); line-height:calc(var(--fs20) * 4); font-weight:bold; color:var(--st-darkblack);}
.hero-text h1 span{color:var(--st-primarycolor);}


/* Products */

.products{	background-image:url(../img/productbg.png);	background-repeat:no-repeat;	background-position:center;	background-size:cover;}
.products{height:auto; position:relative; background-attachment:fixed;}
.products .container{position:relative; z-index:2;}

.products:after{position:absolute; left:0px; width:100%; height:100%; top:0; content:""; background:rgba(0, 0, 0, 0.6);}
.products:before{position:absolute; left:0px; width:626px; height:597px; top:0; content:""; background-image:url(../img/angle.png);}
.products:before{background-position:left top; background-size:contain; z-index:2; background-repeat:no-repeat;}

.product-slider .item{background:var(--st-white); height:230px; padding:var(--fs40) var(--fs20); display:flex; align-items:flex-start; justify-content:center;}
.product-slider .item img{height:calc(var(--fs50) + 25px);}
.product-slider .item h4{font-size:var(--fs24); color:var(--st-darkblack); font-weight:var(--fw600); line-height:normal; font-family:var(--interfamily); }
.product-slider .item h4{margin-top:var(--fs30); text-align:center;}

.product-slider .owl-dots{margin-top:var(--fs50);}
.product-slider .owl-dots{width:100%; text-align:center; display: flex;    align-items: center;    justify-content: center;    gap: 5px;}
.product-slider .owl-dots button.owl-dot{width:var(--fs20); height:var(--fs20); border-radius: var(--fs20); background:rgba(255, 255, 255, 0.5);}
.product-slider .owl-dots button.owl-dot:hover{background:var(--st-white);}
.product-slider .owl-dots button.owl-dot.active{background:var(--st-white);}

.product-slider .owl-nav {    display: flex;    align-items: center;    justify-content: center;    margin-top: var(--fs30);    gap: 10px;}
.product-slider .owl-nav button{background:#fff !important; width: var(--fs40); height:var(--fs40);  border-radius:var(--fs40); color: var(--st-primarycolor);}
.product-slider .owl-nav button{display: inline-block;}


/* About Us */

.about{position:relative; overflow:hidden;}
.about-four__feature{margin-bottom:var(--fs10);}
.about-four__feature__content {display:flex; align-items:center; justify-content:flex-start; gap:10px; position: relative;}
.about-four__feature__content:before{content: ""; background-image: url(../img/check.svg);    background-repeat: no-repeat;    background-size: 24px; }
.about-four__feature__content:before{    background-position: center; width: 24px;    height: 24px;}
.about-four__feature__title{font-family:var(--interfamily); color:var(--st-darkblack); font-size:var(--fs16); font-weight:var(--fw500); margin:0px;}
.about-four__image {display:inline-block; position:relative;}
.about-four__image img {position:relative; max-width:100%; z-index:11;}
.about-four__image::before {content:''; position:absolute; top:20px; left:0; right:0; bottom:20px; background-color:var(--st-primarycolor); }
.about-four__image::before {transform:skew(-3deg); z-index:10;}
.about-four__image__bg {width:10000px; height:calc(100% + 527px); background-color:#F2EDE9; position:absolute; top:-120px; left:325px;}
.about-four__image__shape {width:194px; height:189px; background-image:url(../img/dotsquare.png); background-repeat:no-repeat; }
.about-four__image__shape {background-position:top center; position:absolute; top:-60px; right:-113px;}
.about-four__image__floated {text-transform:uppercase; color:#ffffff; font-size:76px; font-weight:900; letter-spacing:0em; position:absolute; }
.about-four__image__floated {left:calc(100% - 130px); top:calc(50% - 4px); transform:rotate(90deg); transform-origin:top center; display:block;}


/* Offerings */

.alloffers {border:1px solid #ededed; width:100%; overflow:hidden; display:flex; flex-wrap:wrap;}	
.alloffers .item{width:33.33%; height:auto; padding:var(--fs40); transition:all 0.3s ease-in-out;}
.alloffers .item:hover{box-shadow:8px 8px 30px 0 rgba(0,0,0,.12); transition:all 0.3s ease-in-out;}
.alloffers .item img{height:calc(var(--fs30) * 2); width:auto; margin-bottom:var(--fs30);}
.alloffers .item h4{color:var(--st-darkblack); font-size:var(--fs24); font-weight:var(--fw600); line-height:normal; margin-bottom:var(--fs12);}
.alloffers .item h4{font-family:var(--interfamily); letter-spacing:0.5px;}
.alloffers .item p{margin:0px;}

.borderBottom{border-bottom:1px solid #dcdcdc;}
.borderRight{border-right:1px solid #dcdcdc;}


/* Services */

.services{background:var(--st-lightgrey); position:relative;}
.services:after{position:absolute; right:0; top:0; content:""; width:529px; height:450px; background:url(../img/dotcircle.png) no-repeat;}
.services .container{position:relative; z-index:1;}


/* Get In Touch */

.getintouch{background:rgb(7,27,102); background:linear-gradient(90deg, rgba(7,27,102,1) 0%, rgba(27,81,188,1) 69%); position:relative;}
.getintouch:after{position:absolute; background-image:url(../img/connectangle.svg); background-size:cover; background-position:center bottom;}
.getintouch:after{background-repeat:no-repeat; height:calc(var(--fs30) * 10); width:100%; content:""; left:0; bottom:0; z-index:1}
.getintouch .container{position:relative; z-index:2;}

.connect{background:var(--st-white); padding:var(--fs40); box-shadow:0px 15px 45px rgba(0, 0, 0, 0.2);}
.connect .form-group label{color:var(--st-paracolor); font-size:var(--fs14); font-family:var(--interfamily); display:block; margin-bottom:3px;}
.connect .form-group input{background:var(--st-lightgrey); padding:0px var(--fs12); border:0px; width:100%; line-height:var(--fs50);}
.connect .form-group input:focus{outline:none; border:0px;}
.connect .form-group textarea{background:var(--st-lightgrey); padding:var(--fs12); border:0px; width:100%; font-size:var(--fs14);}
.connect .form-group textarea{height:calc(var(--fs20) * 4);}
.connect .form-group textarea:focus{outline:none; border:0px;}


/* Our Process */

.process{position:relative; padding-bottom:calc(var(--fs20) * 10);}

.ourprocess{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:calc(var(--fs20) * 5); position:relative; z-index:9}
.ourprocess:before{position:absolute; left:0; right:0; margin:0 auto; content:""; background-image:url(../img/line.png); z-index:-1}
.ourprocess:before{background-size:contain; background-repeat:no-repeat; background-position:center; width:854px; height:194px; top:0;}
.ourprocess .item{width:calc(var(--fs20) * 10); position:relative;}
.ourprocess .item:nth-child(2){top:100px; }
.ourprocess .item:nth-child(3){top:50px; }
.ourprocess .item .icon{width:150px; height:150px; border-radius:100%; border:1px solid var(--st-border1); display:flex; align-items:center;}
.ourprocess .item .icon{justify-content:center; position:relative; margin:0px auto var(--fs28); box-shadow:0px 0px 55px rgba(0, 0, 0, 0.1);}
.ourprocess .item .icon{background:var(--st-white);}
.ourprocess .item .icon img{height:calc(var(--fs20) * 3);}
.ourprocess .item .icon span{position:absolute; width:var(--fs40); height:var(--fs40); border-radius:100%; top:0px; left:0px; display:block;}
.ourprocess .item .icon span{display:flex; align-items:center; justify-content:center; background:var(--st-primarycolor); color:var(--st-white);}
.ourprocess .item .icon span{font-size:var(--fs18); font-family:var(--barlowfamily); font-weight:600; line-height:normal;}
.ourprocess .item:nth-child(2) .icon span{right:0; bottom:0; left:auto; top:auto;}
.ourprocess .item:nth-child(4) .icon span{right:0; bottom:0; left:auto; top:auto;}
.ourprocess .item h4{font-size:var(--fs24); font-weight:var(--fw600); margin-bottom:var(--fs10);}


/* Footer */

.footer{background:var(--st-footcolor); position:relative;}
.footer:before{position:absolute; bottom:calc(var(--fs20) * 3); left:0; width:100%; content:""; border-top:1px solid #2A3D64}

.f-links {display:flex; align-items:center; justify-content:center; gap:var(--fs30);}
.f-links li a{color:rgba(255, 255, 255, 0.8); text-decoration:none; font-size:var(--fs1); font-weight:var(--fw300);}
.f-links li a{letter-spacing:0.3px; font-family:var(--interfamily);}
.f-links li a:hover{color:var(--st-white);}

.f-address .item{border:1px solid #2A3D64; padding:var(--fs16) var(--fs20); display:flex; align-items:center; justify-content:flex-start; gap:var(--fs28);}
.f-address .item{height:calc(var(--fs10) * 10);}
.f-address .item:hover{background:#213154;}
.f-address .item .icon img{height:var(--fs50);}
.f-address .item span{color:rgba(255, 255, 255, 0.8); font-family:var(--interfamily); letter-spacing:0.3px; line-height:var(--fs34); font-weight:400;}
.f-address .item span a{text-decoration:none; color:rgba(255, 255, 255, 0.8);}

.copyright{height:calc(var(--fs20) * 3); display:flex; align-items:center; justify-content:center; color:rgba(255, 255, 255, 0.7); font-size:var(--fs16);}
.copyright{font-weight:var(--fw300); text-align:center;}

.f_logo img{height:55px;}


/* Page Title */

.page-title{height:320px; width:100%; background-image:url(../img/title-bg.png); background-repeat:no-repeat; background-size:cover;}
.page-title{background-position:center; display:flex; align-items:center; justify-content:flex-start;}
.page-title h2{font-size:calc(var(--fs46) - 1px); font-weight:700; color:var(--st-white); margin-bottom: 0px;}


/* Offerings */

.offerings {width:100%; height:auto; margin:var(--fs30) 0px; display:flex; flex-wrap:wrap; align-items:flex-start; }
.offerings{justify-content:space-between; gap:var(--fs20);}
.offerings > li{width:calc(25% - 20px); font-size:var(--fs18); color:var(--st-darkblack); font-weight:var(--fw500); min-height:70px; border-radius:5px;}
.offerings > li{display:flex; align-items:center; justify-content:flex-start; border:1px solid var(--st-border1); }
.offerings > li{line-height:var(--fs24); padding:var(--fs10) var(--fs14); position:relative;}
.offerings > li:before {background-image:url(../img/check.svg); background-repeat:no-repeat; background-size:24px; background-position:center;}
.offerings > li:before{content:""; width:var(--fs24); height:var(--fs24); margin-right:var(--fs16);}
.offerings > li:hover{background:var(--st-primarycolor); border-color:var(--st-primarycolor); color:var(--st-white);}
.offerings > li:hover:before{background-image:url(../img/checkWhite.svg);}
.offerings + blockquote{padding:var(--fs16) var(--fs20); border-left:5px solid var(--st-primarycolor); background:var(--st-lightgrey);}
.offerings + blockquote{font-weight:var(--fw500);}


/* Servicing */

.servicing{background:var(--st-lightgrey);}
.servicing p{color:var(--st-darkblack);}

.calculatorImg {border-radius:30px; box-shadow:0px 0px 45px rgba(0, 0, 0, 0.1); text-align: center;}

.lineup{position:relative; display:flex; flex-direction:column; gap:var(--fs20);}
.lineup:before {position:absolute; left:5px; border-left:2px dashed var(--st-primarycolor); content:""; height:84%; top:var(--fs10);}
.lineup .item{position:relative; padding-left:var(--fs40);}
.lineup .item h4 {margin-bottom:calc(var(--fs8) - 4px); font-size:var(--fs20); color:var(--st-darkblack); font-weight:var(--fw500);}
.lineup .item p{line-height:var(--fs24);}
.lineup .item:before{position:absolute; left:0px; top:7px; width:var(--fs12); height:var(--fs12); background:var(--st-primarycolor);}
.lineup .item:before{border-radius:var(--fs20); content:"";}



/* Experienced */

.exptext h4{font-size: var(--fs32); font-weight: var(--fw700); line-height: normal; color: var(--st-darkblack); margin-bottom: var(--fs10);}
.exptext p{font-size: var(--fs18); margin-bottom: 0px;}