* {
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
	text-decoration: none;
}


body{
	background-color: #F3F6F9;
	color: #353839;
	font-family: 'Rubik', sans-serif;
}

/* navigation */
img#logo{
	margin-left: 2.5em;
}

nav.navbar{
	padding-top: 3.5em;
}

span#brand-name{
	color:#0c89ba;
	font-weight: 500;
	font-size: 1em;
}

.nav-item a{
	border: transparent solid 4px;
}

.nav-item a:hover {
	color:#06ADEF;
	border-bottom: #06ADEF solid 3px;
	transition: border-bottom 0.5s;
	
} 

.nav-item a.activated{
	color:#06ADEF;
	border-bottom: #06ADEF solid 3px;
}

button.navbarr-toggler{
	display: none;
}

.primary-nav{
	display: flex;
}

ul.navbar-nav {
	margin-right: 2em;
}

div#responsive-brand-name{
	display: block;
}


.top_contact{
	display: flex;
	justify-content: center;
	padding: 0.8em 0;
	background-color: #fff;
	position: fixed;
	width: 100%;
	z-index: 999;
}

.top_contact i, .bi-geo-alt-fill{
	padding: 0.5em;
	color: #06ADEF;
	font-size: 1.2em;
}

.top_contact i:hover{
	color: #0c89ba;
	outline: #000;
}

.carousel_text{
	color: #fff;
	margin-bottom: 12%;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 10px #575757;
}

div.services_container{
	width: 80%;
}

div.privacy-container{
	margin-bottom: 7em;
	width: 70%;
	line-height: 2;
}

div.privacy-container p{
	margin: 3em 0;
}

.services_list_section{
	margin-bottom: 2em;
}
.service_list_btn{
	background-color: #FFF;
	border-radius: 1em;
	padding: 1em 1.5em;
	width: 100%;
	border:none;
	margin-top: 2em;
	box-shadow: 2px 1px 5px #d7d7d7;
}

div.item_wrapper{
	border-radius: 4em;
	-ms-border-radius: 4em;
	-moz-border-radius: 4em;
	-webkit-border-radius: 4em;
	-o-border-radius: 4em;
	padding: 2%;
	height: inherit;
	background-color: #FFF;
	justify-content: center;
	width: 30%;
	margin: 5% 1.5%;
}

div.item_wrapper .service_btn{
	width: 100%;
	border-radius: 1.2em;
	-ms-border-radius: 1.2em;
	-moz-border-radius: 1.2em;
	-webkit-border-radius: 1.2em;
	-o-border-radius: 1.2em;
	padding: 0.8em 4em;
	outline: none; 
	background-color: #F3F6F9;
	border: none;
	color: #06ADEF;
	font-weight: 500;
	margin-bottom: 1em;
}

.service_description{
	text-align: left;
	padding: 1em;
}

.service_img{
	border-radius: 3em;
	-ms-border-radius: 3em;
	-moz-border-radius: 3em;
	-webkit-border-radius: 3em;
	-o-border-radius: 3em;
	height: 12em;
	object-fit: cover;
	margin-bottom: 2em;
}

/* pricing section css */
.pricing-table .col-md-6{
	background-color: #0c89ba;
	margin-bottom: 0.8em;
	padding: 1em;
	color:#FFF;
}

.pricing-table_below .col-md-6{
    background-color: #fff;
	margin-bottom: 0.8em;
}



.section_title{
	text-align: center;
	margin: 4em 0 2em 0;
	color: #353839;
}

.locate_us{
	margin: 0 0 2em 0;
}
.contact_us_container{
 margin-top: 7%;
 padding:0.5% 0 4% 0;
}

div .contact_us{
	width: 50%;
	margin: 4% auto;
}

div .contact_us input, div .contact_us textarea{
	margin: 0.6em 0;
	padding: 0.5em;
}

div .contact_us textarea{
	margin: 1.2em 0;
}

#required_label{
	color:#f08989;
	font-size: 0.8em;
}


/* button styles */

.action_btn, .call_action{
	border-radius: 3em;
	-ms-border-radius: 3em;
	-moz-border-radius: 3em;
	-webkit-border-radius: 3em;
	-o-border-radius: 3em;
	padding: 1em 5em;
	margin: auto 0;
	border: 0;
	background-color: #06ADEF;
	color: #fff;
	height: 3.4em;

}

.call_action{
	border: 1px solid #06ADEF;
	margin: 0;
	background-color: inherit;
	color: #353839;
	padding: 0.3em 2em;
	font-weight: bold;
	height: 3.4em;
} 

.action_btn:hover, .msg_btn:hover{
	border: 1px solid #06ADEF;
	background-color: #fff;
	color: #06ADEF;
	transition: background-color 0.2s ease-in;
}

.msg_btn{
	border-radius: 3em;
	-ms-border-radius: 3em;
	-moz-border-radius: 3em;
	-webkit-border-radius: 3em;
	-o-border-radius: 3em;
	padding: 0.7em 5em;
	border: 0;
	background-color: #06ADEF;
	color: #fff;
	height: 3.4em;
}

.whatsapp_btn{
	padding: 0.7em 2em;
	background-color: #25D366;
}

.whatsapp_btn:hover{
	border: 1px solid #25D366;
	background-color: #fff;
	color: #25D366;
	transition: background-color 0.2s ease-in;
}

#submit_btn{
	padding:0.7em 3em;
}



/* wavy divider styles */

.custom-shape-divider {
    position: absolute;
    /* top: 0; */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider svg {
    position: relative;
    display: block;
    width: calc(117% + 1.3px);
    height: 51px;
	border: none;
}

.custom-shape-divider .shape-fill {
    fill: #F3F6F9;
}

/* testimonial styles */
.testimonial_title{
	padding-top: -1em;
	margin-bottom: 1em;
}

p#text_below_test {
	font-size: 0.5em;
	font-weight: lighter;
	
}

div#thumbnail{
	width: 200px;
	height: 200px;
	position: relative;
	flex-shrink: 0;
}

div#thumbnail::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% + 2em);
	height: calc(100% + 1em);
	background-color: #0c89ba;
	border-radius: 50%;
	z-index: -1;
	box-shadow: rgb(0, 0, 2 / 35%) 0px 20px 30px -10px;
	transition: border-radius .5s .3s;
}


div .swiper-slide-active #thumbnail::before{
	border-radius: 33% 67% 50% / 50% 14% 86% 50%;
}

div#thumbnail img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: scale(1.3) ;
	transition: .5s;
}

div .swiper-slide-active #thumbnail img{
	transform: scale(1);
}

div#wrapper{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2em;
	padding:4em 4em 0;
}

div.aside{
	position: relative;
	padding: 5em 2em;
	display: flex;
	flex-direction: column;
	align-self: flex-end;
}

div.aside > p {
	position: relative;
	line-height: normal;
	margin-bottom: 2em;
	opacity: 0;
	transform: translateX(10%);
	transition: transform 1s, opacity 1s;
}

div .swiper-slide-active .aside > p{
	transform: translateX(0);
	opacity: 1;
}

div.aside > p::before,
div.aside > p::after{
	font-family: serif;
	font-size: 80px;
	font-weight: 800;
	line-height: 1;
	position: absolute;
	color: #adafb0;
	height: 40px;
	z-index: -1;
}

.testimonial-quote{
	font-size: 2em;
	color: #0c89ba;
}

/*div.aside > p::before{*/
/*	content: open-quote;*/
/*	top: -40px;*/
/*	left: 10px;*/
/*}*/

/*div.aside > p::after{*/
/*	content: close-quote;*/
/*	right: 20px;*/
/*}*/

div.aside .name{
	position: relative;
	width: fit-content;
	line-height: 1;
	opacity: 0;
	transform: translateX(30px);
	transition: transform 1s .2s, opacity 1s .3s;
}

div .swiper-slide-active .aside .name{
	opacity: 1;
	transform: translateX(0);
}

div.aside .name h4{
	color:#0c89ba;
	font-weight: 800;
}

div.aside .name p{
	font-size: 12px;
	text-align: right;
}

div :is(.swiper-button-next, .swiper-button-prev){
	background-color: #adafb0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	padding: 0.5em;
	padding-left: 0.8em;
	transition: background-color .3s;
	box-shadow: #adafb0 0px 20px 30px -10px;

}

div :is(.swiper-button-next, .swiper-button-prev):hover{
	background-color: #0c89ba;
}

div :is(.swiper-button-next, .swiper-button-prev)::after{
	font-size: 1.2em;
	font-weight: 800;
	color: #F3F6F9;

}

div .swiper-pagination span{
	background-color: #adafb0;
	transition: width .3s;
	opacity: 1;
}

div .swiper-pagination .swiper-pagination-bullet-active{
	width: 26px;
	border-radius: 4px;
	background-color: #0c89ba;
}

.to-top{
	color: #0c89ba;
	font-size: 2em;
	bottom: 1.5rem;
	right: 2rem;
	position: fixed;
	opacity: 0;
	pointer-events: none;
	transition: all .4s;
	z-index: 8888;
}

.to-top.active{
	pointer-events: auto;
	opacity: 1;
}
/* footer styles */

footer.container-fluid{
	padding-top: 5%;
	background-color: #FFF;
	font-size: 0.9em;
}

div.footer_row{
	padding-bottom: 5%;
	margin: 0 auto;
}

div.copyright_section{
	border-top: 1px solid #F1F1F1;
	padding: 0.7em 0;
	/* margin: 4% 0; */
}

div.footer_div{
	border-right: 1px solid #F1F1F1;
}

div.col-sm-4:last-child{
	border-right: none;
}
div.col-sm-4 ul{
	margin: 0 !important;
}

div.col-sm-4 ul li {
	list-style-type: none;
	padding: 0.5em;
}

div.col-sm-4 ul li a {
	text-decoration: none;
	color: #000;
}

div.copyright_section ul li{
	width: 100%;
	list-style-type: none;
	/* float: left; */
	display: inline-block;
	border-right: 1px solid darkgrey;
	/* padding:0 2em; */
}

div.copyright_section ul li a{
	text-decoration: none;
	color: #000;
}

div.col-sm-4 ul li a:hover, div.copyright_section ul li a:hover {
	color:#06ADEF;
}

div.copyright_section ul li:last-child{
	border-right: none;
}

div.copyright_section ul li:first-child a{
	border-bottom: none;
}

.location_section{
	margin: 4% auto;
	text-align: center;
	padding: 4% 0;
}


.address_on_map{
	width: 60%;
	height: 20em;
}
/* media querries */

@media screen and (max-width:992px) {

    a.navbar-brand{
	width: 100%;
	margin: 0 auto;
	text-align: center;
    }
	img#logo{
		padding: 0;
		margin:0;
	}

	.carousel_text{
		font-size: 1.2em;
	}

	.carousel-control-prev-icon, .carousel-control-next-icon{
		height: 20px;
	}

	.action_btn{
		padding: 0.5em 1em;
		height: inherit;
	}

	div.item_wrapper{
		width: 90%;
		margin: 5% 5%;
		padding: 8%;
	}	

	div .contact_us{
		width: 80%;
	}

	.msg_btn{
		margin: 1em 0;
		width: 100%;
		height: inherit;
	}

	div .contact_us input, div .contact_us textarea{
		padding: 0.3em 0.6em;
	}

	#submit_btn{
		padding: 0.7em 0.6em;
		height: inherit;
	}

	li.nav-item a{
		padding-top: 0.5em;
		transition: 400ms ease-out;
	}
	.primary-nav{
		flex-direction: column;
		position: fixed;
		width:100%;
		inset: 0 0 0 30%;
		padding: 5rem 10rem 0;
		font-size: 1.4em;
		z-index: 1000 !important;
		background: #eff0f0!important;
		/*backdrop-filter: blur(1.5rem);*/
		transform: translateX(100%); 
		transition: 350ms ease-out;
	} 

	.primary-nav[data-visible="true"]{
		transform: translateX(0%);
	}

	button.navbarr-toggler{
		display: block;
		position: absolute;
		z-index: 9999 !important; 
		background: transparent;
		background-image: url("../assets/img/ham-icon.svg");
		background-repeat: no-repeat;
		border: none;
		width: 2rem;
		aspect-ratio: 1;
		top: 1rem;
		right: 1.5rem;
		position:fixed;
		outline: none;
	}

	.navbarr-toggler[aria-expanded="true"]{
		background-image: url("../assets/img/close-icon.svg");
		background-repeat: no-repeat;
	}

	div#wrapper{
		flex-direction: column;
		padding-top: 4em;
		width: 100%;
		gap: 0;
	}



}


@media screen and (max-width:750px){
	
	.carousel-item img {
		height: 280px;
		object-fit: cover;
	}
}

@media screen and (max-width:550px){
    
	
	div#thumbnail{
	width: 150px;
	height: 150px;
    }

	
	.carousel_text{
		font-size: 1em;
		padding-top: 50%;
	}

	div.services_container{
		width: 90%;
	}

	div.services_list_section{
		width: 80%;
		margin: 0 auto;
	}

	div.pricing-section{
		width: 80%;
	}
	
	div#wrapper{
	    padding-left:0;
	}
	
	div.aside{
		padding: 2em 2em;
		padding-left: 3em;
		padding-top: 2.5em;
	}
	
	div.social-media-footer, div.copyright_section{
		margin-left: -1em;
	}

	div.get-quote-footer{
		padding: 2em 0;
	}

	div.footer_div{
		border: none;
	}

	.location_section{
		padding: 6% 0;
	}
	.address_on_map{
		width: 80%;
	}

	.primary-nav{
		padding-left: 5%;
		width:100%;
	}
}
