@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@200;300;400;500;600;700;800&display=swap');



@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css');



body,html{

	font-family: 'Sofia Sans', sans-serif;

	font-size:16px;

	overflow-x:hidden;

}


:root{

	--color1:196;

	--satur1:67%;

	--light1:45%;

	--light-hover: calc(var(--light1)/1.15);

	--maincolor:hsl(var(--color1) ,var(--satur1), var(--light1));

	--maindarker:hsl(var(--color1) ,var(--satur1), var(--light-hover));



	

	--color2:0;

	--satur2:100%;

	--light2:50%;

	--light2-hover: calc(var(--light2)/1.15);

	--subcolor:hsl(var(--color2) ,var(--satur2), var(--light2));

	--subdarker:hsl(var(--color2) ,var(--satur2), var(--light2-hover));

	--trim:#666;

}



*{

	box-sizing:border-box;

}


u{
    color:#FFFFFF;
    left:60px;

}

.cw{

	width:100%;

	max-width:1200px;

	margin:0px auto;

}



.btn1{

	--trim: var(--maindarker);

	background:var(--maincolor);

}



.btn1:hover{

	background:var(--maindarker);

}



.btn2{

	--trim: var(--subdarker);

	background:var(--subcolor);

}



.btn2:hover{

	background:var(--subdarker);

}



.btn-wt{

	color: #fff;

}



/*topinfo*/



.top-info{

	background:var(--maincolor);

	padding:1em;

	color:#fff;

	font-weight:500;

}



.ti-flex{

	display:flex;

	gap:1em;

	justify-content: space-between;

	align-items: center;

}



.ti-social{

	display:flex;

	gap:1em;

	font-size:1.2em;

}



.ti-social a{

	color:inherit !important;

}



/*navigation*/



.top-nav{

	padding:2em calc(10vw + 1em);

	display:flex;

	justify-content: space-between;

	align-items:center;

	font-size:1.2em;

}



.nav-logo{

	font-weight:800;

	font-size:2em;

}



.nav-list{

	display:flex;

	gap:1.25em;

}



.nav-list a{

	text-decoration: none;

	color:#000;

	font-weight:500;

}



.nav-list a:hover{

	color:var(--maincolor);

}



/*herobanner*/



.hero-banner{

	aspect-ratio:21/9;

	background:#e8e8e8;

	position:relative;

	isolation:isolate;

	font-size:2vw;

}



.hero-banner:before{

	content:'';

	position:absolute;

	inset:0;

	z-index:-1;

    /* ff 3.6+ */

    background:-moz-linear-gradient(90deg, rgba(38, 151, 192, 0.6) 0%, rgba(38, 151, 192, 0.25) 100%); 



    /* safari 5.1+,chrome 10+ */

    background:-webkit-linear-gradient(90deg, rgba(38, 151, 192, 0.6) 0%, rgba(38, 151, 192, 0.25) 100%);



    /* opera 11.10+ */

    background:-o-linear-gradient(90deg, rgba(38, 151, 192, 0.6) 0%, rgba(38, 151, 192, 0.25) 100%);



    /* ie 6-9 */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2697C0', endColorstr='#2697C0', GradientType=0 );



    /* ie 10+ */

    background:-ms-linear-gradient(90deg, rgba(38, 151, 192, 0.6) 0%, rgba(38, 151, 192, 0.25) 100%);



    /* global 94%+ browsers support */

    background:linear-gradient(90deg, rgba(38, 151, 192, 0.6) 0%, rgba(38, 151, 192, 0.25) 100%);

}



.banner-img{

	position: absolute;

	inset:0;

	display:block;

	width:100%;

	height:100%;

	object-fit: cover;

	z-index:-2;

}



.banner-content{

	position: relative;

	top:50%;

	transform:translateY(-70%);

	z-index: 1;

	color:#fff;

	padding-inline:15vw;

}



.banner-h{

	font-size:1.75em;

	font-weight:600;

	line-height:1.2em;

	margin-bottom:.5em;

}



.banner-sh{

	font-size:.6em;

	font-weight:300;

	line-height:1.5em;

}



.banner-overlap{

	position: relative;

	transform:translateY(-50%);

	padding-inline:2em;

	margin-bottom:-4em;

}



.icon-panels{

	display:grid;

	grid-template-columns: repeat(4,minmax(0,1fr));

	gap:1.5em;

	font-weight:600;

	font-size:1.3em;

	text-align:center;

}



.icon-panels > div{

	background:#fff;

	aspect-ratio:1/1;

	border-radius:.5em;

	box-shadow:0 0 1em rgba(0,0,0,.05);

	display:flex;

	flex-direction: column;

	justify-content: center;

	line-height:1.25em;

}



.icon-panels .bi{

	display:block;

	font-size:2.5em;

	margin-bottom:.5em;

	color:var(--maincolor);

}



/*section about*/



.section-about{

	padding:2em 2em 4em;

}



.section-about .p{

	margin-bottom:1em;

}



.section-sh{

	color:var(--maincolor);

	font-weight:700;

	text-transform: capitalize;

	margin-bottom:.75em;

	font-size:1.1em;

}



.section-h{

	font-size:2.25em;

	font-weight:700;

	margin-bottom:.5em;

	line-height:1.25em;

}



.p{

	line-height:1.5em;

}



.grid-2col{

	display:grid;

	gap:4em;

	grid-template-columns: repeat(2,minmax(0,1fr));

}



.about-img{

	display:block;

	position: relative;

	aspect-ratio:1/1;

	isolation:isolate;

}



.about-img img{

	position:absolute;

	border-radius: .5em;

	box-shadow:0 0 1em rgba(0,0,0,.05);

	object-fit: cover;



}



.a-img1{

	aspect-ratio:7/8;

	width:70%;

	top:0;

	left:0;

	z-index:1;

}



.a-img2{

	bottom:0;

	right:0;

	width:48%;

	aspect-ratio:1/1;

	z-index:2;

}



.about-icon-h{

	display:grid;

	grid-template-columns: 3em minmax(0,1fr);

	gap:1em;

	margin-bottom: 1em;

}



.about-icon-h .section-h{

	font-size:1.5em;

	text-transform: capitalize;

}



.about-icon-h .bi{

	font-size:3em;

	color:var(--maincolor);

}



/*section services*/



.section-services{

	padding:4em 2em;

	background-size:cover;

	background-position: center;

	position: relative;

	isolation:isolate;

	text-align:center;

	color:#fff;

}



.section-services:before{

	content:'';

	position:absolute;

	inset:0;

	background:#000;

	opacity:.875;

	z-index:-1;

}



.section-services .section-sh{

	color:#fff;

}



.services-grid{

	display:grid;

	gap:1.5em;

	grid-template-columns: repeat(3,minmax(0,1fr));

	padding:1em 0;

}



.services-grid > div{

	border:1px solid var(--maincolor);

	padding:1.5em;

	aspect-ratio:4/4;

	border-radius:.35em;

	display:flex;

	flex-direction:column;

	justify-content: center;

	transition:.3s background, .3s border-color;

}



.services-grid .section-h{

	font-size:1.5em;

	text-transform: capitalize;

}





.services-grid .bi{

	font-size:3.75em;

	display:block;

	margin-bottom:.25em;

}



.services-grid > div:hover{

	background:#fff;

	color:#000;

	border-color:#fff;

}



.services-grid > div:hover .bi{

	color:var(--maincolor);

}



/*testimonials*/



.section-testi{

	padding:4em 2em;

	background:#e9e9e9;

}



.testi-grid{

	display:grid;

	grid-template-columns: minmax(0,1fr) minmax(0,2fr);

	gap:2em;

	align-items: center;

}



.testi-list{

	display:grid;

	grid-template-columns: repeat(2,minmax(0,1fr));

	gap:2em;

	text-align:center;

}



.testi-list div.testi-item .p{

	background:#fff;

	box-shadow:0 0 1em rgba(0,0,0,.05);

	border-radius:.5em;

	padding:0 1.25em;

	font-size:1.2em;

	display:flex;

	align-items: center;

	justify-content: center;

	aspect-ratio:5/3;

	position:relative;

}



.testi-list div.testi-item .p:before{

	--width:2em;

	content:'';

	position:absolute;

	bottom:0;

	left:50%;

	transform: translate(-50%,50%);

	width: 0;

	height: 0;

	border-style: solid;

	border-width: var(--width) var(--width) 0 var(--width);

	border-color: #fff transparent transparent transparent;

}



.testi-dp{

	aspect-ratio:1/1;

	display:block;

	margin:2em auto 1em;

	max-width:4.25em;

	width:100%;

	background-color:#fff;

	border-radius:100%;

	background-position: center;

	background-size:cover;

	box-shadow:0 0 1em rgba(0,0,0,.05);

	position: relative;

	overflow:hidden;

	isolation:isolate;

}



.testi-dp > img{

	position: absolute;

	width:100%;

	height:100%;

	top:0;

	left:0;

}



.testi-name{

	font-weight:600;

	font-size:1.4em;

	margin-bottom:.25em;

}



.testi-title{

	font-weight:300;

	color:var(--maincolor);

}



/*section stats */



.section-stats{

	background:var(--maincolor);

	color:#fff;

	padding:4em 2em;

	font-size:1.2em;

}



.stats-grid{

	display:grid;

	grid-template-columns: repeat(4,minmax(0,1fr));

	gap:1.25em;

}



.stats-grid > div{

	display:flex;

	width:100%;

	gap:1em;

	align-items: center;

}



.stats-grid .bi{

	font-size:2.5em;

}



.stats-val{

	font-weight:700;

	font-size:2em;

	margin-bottom:.25em;

}



.stats-grid .p{

	letter-spacing: -.025em;

}



/*footer*/



.footer{

	padding:6em 2em;

	background:#111;

	color:#fff;

}



.footer-grid{

	display:grid;

	grid-template-columns: repeat(3,minmax(0,1fr));

	gap:2em;

}



.footer-social{

	display:flex;

	gap:.5em;

}



.footer-social > a{

	display:flex;

	align-items: center;

	justify-content: center;

	aspect-ratio:1/1;

	width:2.5em;

	color:#fff !important;

	background:rgba(0,0,0,.5);

	transition:.3s background;

	border-radius:.25em;

}



.footer-social > a:hover{

	background:var(--maincolor);

}



.footer-h{

	font-size:1.5em;

	font-weight:700;

	margin-bottom:1em;

}



.footer .p{

	display:flex;

	gap:1em;

	margin-bottom:1em;

	align-items: center;

}



.footer .p .bi{

	font-size:1.5em;

}



/*copyright*/



.copyr{

	background:var(--maincolor);

	color:#fff;

	text-align:center;

	padding:2em 2em;

}



/*logostrip*/



.logostrip{

	padding:4em 2em;

	background:#fff;

	color:#e9e9e9;

}



.logo-grid{

	display:grid;

	grid-template-columns: repeat(6,minmax(0,1fr));

	gap:2vw;

	font-size:6vw;

	text-align:center;

}



.nav-mobile{

	display:none;

}



@media(max-width: 1200px){

	body{

		font-size: 14px;

	}



	.top-nav{

		padding-inline:5vw;

	}

}



@media(max-width:1023px){

	body{

		font-size:12px;

	}



	.hero-banner{

		font-size:2.5vw;

	}



	.section-stats{

		font-size:1.1em;

	}



	.stats-val,

	.stats-grid .bi{

		font-size:2.75em;

	}

}



@media(max-width:767px){



	body{

		padding-top:40px;

	}



	.nav-mobile{

		display:flex;

		justify-content: space-between;

		align-items: center;

		padding-inline:2em;

		position: fixed;

		top:0;

		left:0;

		width:100%;

		height:40px;

		background:#fff;

		z-index:51;

		border-bottom:1px solid #eee;

	}



	.nav-toggle{

		font-size:2em;

		color:#aaa;

	}



	.top-nav{

		position: fixed;

		width:240px;

		height:100vh;

		background:#fff;

		top:0;

		right:0;

		z-index:50;

		display:block;

		padding:2em;

		transform:translateX(100%);

		transition:.3s transform;

		border-left:1px solid #eee;

		padding-top:50px;

	}



	.top-nav.active{

		transform:translateX(0%);

	}



	.top-nav .nav-logo{

		display:none;

	}



	.nav-list{

		display:block;

	}



	.nav-list a{

		display:block;

		padding:1em 0;

	}



	.hero-banner{

		font-size:3.5vw;

	}



	.services-grid,

	.grid-2col{

		grid-template-columns: minmax(0,1fr);

	}



	.stats-grid,

	.footer-grid{

		grid-template-columns: repeat(2,minmax(0,1fr));

	}



	.footer-grid > div:first-child{

		grid-column: span 2;

		text-align:center;

	}



	.footer-social{

		justify-content: center;

	}



	.testi-grid,

	.stats-grid > div{

		display:block;

		text-align:center;

		margin-bottom:2em;

	}



	.testi-list div.testi-item .p,

	.services-grid > div{

		aspect-ratio:initial;

		padding:2em;

	}



	.about-img{

		aspect-ratio:2/1;

	}



	.about-img > img{

		width:49% !important;

		aspect-ratio:1/1;

		top:0 !important;

		bottom:initial !important;

	}



	.banner-overlap{

		transform: translateY(0%);

		margin:2em auto 1em;

	}



	.icon-panels{

		font-size:2.25vw;

	}
	.footer .p{

	flex-direction: column;
    align-items: center;


}



@media(max-width:480px){

	.hero-banner{

		aspect-ratio:3/2;

		font-size:4vw;

	}



	.logo-grid{

		grid-template-columns: repeat(3,minmax(0,1fr));

		gap:1em 2vw;

		font-size:12.5vw;

	}



	.banner-content{

		padding-inline:5vw;

	}

}