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

:root{
	--black:#070501;
	--theme-dark : #000206;
	--black2:#1A1A1A;
	--primary-color : #05a68b;
	--secound-color : #1e2f61;
    --title-color : #161515;
	--gradient : linear-gradient(180deg, var(--yellow) 0%, #FDD503 100%);
	--boxstyle : #ffffff0d;

--clamp12: clamp(10px, 0.625vw, 12px);
--clamp12: clamp(11px, 0.700vw, 11px);
--clamp14: clamp(12px, 0.72916vw, 14px);
--clamp15: clamp(13px, 0.78125vw, 15px);
--clamp16: clamp(14px, 0.8333vw, 16px);
--calmp17: clamp(14px, 0.88541vw, 17px);
--clamp18: clamp(14px, 0.9375vw, 18px);
--clamp20: clamp(16px, 1.0416vw, 20px);
--clamp22: clamp(16px, 1.145vw, 22px);
--clamp24: clamp(17px, 1.25vw, 24px);
--clamp25: clamp(18px, 1.3541vw, 26px);
--clamp26: clamp(20px, 1.3541vw, 26px);
--clamp28: clamp(16px, 1.4583vw, 28px);
--clamp30: clamp(20px, 1.5625vw, 30px);
--clamp32: clamp(20px, 1.666vw, 32px);
--clamp34: clamp(20px, 1.770vw, 34px);
--clamp35: clamp(22px, 1.822vw, 35px);
--clamp36: clamp(25px, 1.875vw, 36px);
--clamp38: clamp(25px, 1.979vw, 38px);
--clamp40: clamp(26px, 2.083vw, 40px);
--clamp42: clamp(26px, 2.1875vw, 42px);
--clamp44: clamp(26px, 2.2916vw, 44px);
--clamp45: clamp(26px, 2.3vw, 45px);
--clamp48: clamp(26px, 2.5vw, 48px);
--clamp50: clamp(28px, 2.864583vw, 50px);
--clamp55: clamp(28px, 2.864583vw, 55px);
--clamp58: clamp(28px, 3.02083vw, 58px);
--clamp60: clamp(30px, 3.125vw, 60px);
--clamp64: clamp(30px, 3.333vw, 64px);
--clamp75: clamp(35px, 3.90625vw, 75px);
--clamp78: clamp(30px, 4.0625vw, 78px);
--clamp80: clamp(30px, 4.1666vw, 80px);
--clamp82: clamp(30, 4.27083vw, 82px);
--clamp84: clamp(25px, 4.375vw, 84px);
--clamp42: clamp(24px, 2.1875vw, 42px);
--clamp100: clamp(30px, 5.2083vw, 100px);
--clamp120: clamp(40px, 6.25vw, 120px);
}


body{
    overflow-x: hidden !important;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
.mobilethings{
	display: none;
}
/* boxstyle */
.boxstyle {
    /* background-color: var(--boxstyle); */
	padding: 10px 20px;
	border-radius: 6px;
	margin: 10px 0;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
	position: relative;
	height: 130px;
	z-index: 2;
}
.boximg{
	position: absolute;
	right: 20px;
	top: 20px;
}
.boximg img{
	height: 120px;
	transition: ease-in-out 0.3s;
}
.boxstyle h3{
	font-size: var(--clamp22);
	color: var(--black);
	font-weight: 600;
	text-transform: capitalize;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.boxstyle:hover > .boximg img{
	transition: ease-in-out 0.3s;
	transform: scale(1.2,1.2);
}

 .topmenu{
    background-color: var(--boxstyle);
	padding: 10px 20px;
	border-radius: 6px;
	margin: 0px 0;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
	position: relative;
	height: 80px;
   --tw-shadow: 0 4px 20px 10px #ffffff08,0 0 0 1px #ffffff1a;
    --tw-shadow-colored: 0 4px 20px 10px var(--tw-shadow-color),0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
 }

.logo img{
	height: 55px;
}
.menusection ul{
	float: right;
}
.menusection ul li{
	float: left;
	line-height: 55px;
	list-style: none;
	margin-left: 40px;
}
.menusection ul li a{
	color: var(--black);
	font-size: var(--clamp18);
	text-decoration: none;
	font-weight: 600;
	text-transform: capitalize;
}
.splbtn{
	padding: 12px 15px;
	border-radius: 10px;
	border: solid 1px var(--primary-color);
}
.menusection a.splbtn{
	color:white;
	font-weight: 600;
	font-weight: 700;
	letter-spacing: 1px;
	background-color: var(--primary-color);
}


/* Service */
.services{
	padding: 50px 0;
}
.servicebox{
	--tw-shadow: 0 4px 20px 10px #ffffff08,0 0 0 1px #ffffff1a;
    --tw-shadow-colored: 0 4px 20px 10px var(--tw-shadow-color),0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
	padding: 35px 20px;
	border-radius: 10px;
}
.serviceimg{
	text-align: center;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.serviceimg img{
	position: relative;
	height: 200px;
	width: 100%;
	object-fit:contain;
}
.servicecontent h3{
	color: var(--black);
	font-size: var(--clamp35);
	text-align: center;
}
.servicecontent p{
	color: var(--black);
	font-size: var(--clamp16);
	text-align: center;
	letter-spacing: 0.5px;
	opacity: 0.58;
}

/* Service */

/* bannersection */
.bannersection{
	text-align: center;
	padding: 60px 0;
	background-image: url("https://img.freepik.com/free-photo/dynamic-data-visualization-3d_23-2151904310.jpg?semt=ais_hybrid&w=740&q=80");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.bannersection h2{
	font-size: var(--clamp40);
	text-transform: capitalize;
	color: black;
	letter-spacing: 1.5px;
}
/* bannersection */
/* Footer */
.footer{
	padding: 50px 0;
	background-color:#0d1116;
	margin-top: 50px;
}
.footersec1 img{
	height: 60px;
}
.footer p{
	font-size: var(--clamp16);
	color: #fff;
	letter-spacing: 0.5px;
	opacity: 0.5;
	font-weight: 300;
	margin-top: 25px;
}
.footer h5{
	font-size: var(--clamp18);
	color: #fff;
	letter-spacing: 1px;
	opacity: 0.9;
	font-weight: 600;
	margin-top: 25px;
}
.footer li{
	list-style: none;
	line-height: 30px;
}
.footer li a{
	color: #fff;
	text-decoration: none;
	opacity: 0.8;
}
/* Footer */

/* HeroSlider */
.heroslider{
	background-color: #e5e7eb;
	height: 600px;
}
/* HeroSlider */
.heroslider{
    height: 600px;
}
.heroslider img{
    height: 600px;
    width: 100%;
}
.theslider{
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.heroslider button {
    border-radius: 50px;
    height: 50px;
    width: 50px;
    border: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 9;
}
.heroslider i{
    color: white;
}
.heroslider .slick-next{
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}
.heroslider .slick-prev{
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (min-width: 320px) and (max-width: 575px) {
	.heroslider{
        height: 250px;
    }
    .heroslider img{
        height: 250px;
    }
    .theslider{
        height: 250px;
    }
    .heroslider .slick-next{
        right: 10px;
    }
    .heroslider .slick-prev{
        left: 10px;
    }
    .heroslider button {
        height: 30px;
        width: 30px;
    }
    .home-content h2 {
        font-size: 35px !important;
    }
}
@media screen and (min-width: 576px) and (max-width: 768px) {
    .heroslider{
        height: 350px;
    }
    .heroslider img{
        height: 350px;
    }
    .theslider{
        height: 350px;
    }
    .heroslider .slick-next{
        right: 15px;
    }
    .heroslider .slick-prev{
        left: 15px;
    }
    .heroslider button {
        height: 40px;
        width: 40px;
    }
}
@media screen and (min-width: 769px) and (max-width: 991px) {
	.heroslider{
        height: 400px;
    }
    .heroslider img{
        height: 400px;
    }
    .theslider{
        height: 400px;
    }
    .heroslider .slick-next{
        right: 20px;
    }
    .heroslider .slick-prev{
        left: 20px;
    }
    .heroslider button {
        height: 40px;
        width: 40px;
    }
}
/* HeroSlider */
/* HeroSlidide */
/* hero-section */
.homesection{
	padding: 50px 0;
	height: auto;
}
.home-content h2{
	font-size: var(--clamp50);
	font-weight: 600;
	color: black;
}
.home-content h5{
	font-size: var(--clamp18);
	font-weight: 300;
	color: black;
	letter-spacing: 1px;
	margin-top: 25px;
}
.home-content h3{
	font-size: var(--clamp22);
	font-weight: 500;
	color:#F4A419;
	letter-spacing: 1px;
	margin-top: 0px;
}
.home-img{
	text-align: center;
}
.home-img img{
	position: relative;
	z-index: 5;
}
.home-img:before{
	content: "";
	position: absolute;
	bottom: -15px;
	left: 14%;
	border-radius: 50px;
	height: 60%;
	background-color: #F4A419;
	width: 70%;
	z-index: 1;
}
.specbox{
	height: 60px;
	width: 60px;
	--tw-shadow: 0 4px 20px 10px #ffffff08,0 0 0 1px #ffffff1a;
    --tw-shadow-colored: 0 4px 20px 10px var(--tw-shadow-color),0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
	padding: 20px 20px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	margin-top: 10px;
}
.specbox h5{
	padding-top:20px ;
}
.speccont h5{
	font-size: var(--clamp22);
	font-weight: 600 !important;
}
.speccont p{
	font-size: var(--clamp16);
	font-weight: 300;
	color: black;
	opacity: 0.5;
}
/* hero-section */
/* themebtn */
.themebtn a{
	background-color: var(--primary-color);
	font-weight: 700;
	letter-spacing: 1px;
	border: solid 1px var(--primary-color);
	padding: 12px 20px;
	border-radius: 10px;
	text-decoration: none;
	color: white;
}
/* themebtn */
/* offersection */
.offersection{
	padding: 10px 0;
	text-align: center;
	background-color: var(--primary-color);
}
/* offersection */

/* Trusted */
.trustedby{
	padding: 30px 0;
	background-color: #edf2f1;
}
.brandsinner{
	--tw-shadow: 0 4px 20px 10px #ffffff08,0 0 0 1px #ffffff1a;
    --tw-shadow-colored: 0 4px 20px 10px var(--tw-shadow-color),0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
	padding: 30px 15px;
	text-align: center;
	border-radius: 10px;
}
.brandsinner h3{
	font-size: var(--clamp28);
	color: var(--black1);
	margin: 15px 0;
	margin-bottom: 35px;
}
.brandnames{
	text-align: center;
}
/* Trusted */
.serblockimg{
	border-radius: 40px;
}
.serblockimg img {
    border-radius: 40px;
    padding: 16px !important;
}
/* myservices */
.myserblock{
	height: auto;
	/* background-color: #eee; */
	margin-bottom: 20px;
}
.myservices{
	background-color: white;
	padding:20px 0;
	height: auto;
}
.serblockcont{
	padding: 15px 25px;
}
.serblockcont h3{
	font-size: var(--clamp24);
	font-weight: 700;
}
.serblockcont h5{
	font-size: var(--clamp18);
	font-weight: 400;
}
.serblockcont a{
	font-weight: 700;
}
/* myservices */
/* become */
.become{
	text-align: center;
	padding: 100px 0;
	background-color: #edf2f1;
}
.become h2{
	color: black;
	font-size: var(--clamp60);
	font-weight: 700;
}
.become p{
	color: black;
	font-weight: 400;
	margin-bottom: 40px;
	font-size: var(--clamp22);
	margin-top: 25px;
}

/* become */
/* whyus */
.whyus{
	background-color: #f7f8fa !important;
	padding: 50px 0;
}
.whyus h3{
	font-size: var(--clamp26);
	font-weight: 700;
	margin: 15px 0;
	text-align: center;
}
.whyblock{
	text-align: center;
	border: solid 1px var(--primary-color);
	padding: 25px 15px;
	border-radius: 10px;
}
.whyblock img{
	margin: 20px 0;
}
.whyblock h5{
	font-size: var(--clamp18);
	font-weight: 500;
}
/* whyus */
.titles{
	text-align: center;
	margin: 25px 0;
	margin-top: 50px;
}
.titles h2{
	font-size: var(--clamp42);
}
.titles p{
	font-size: var(--clamp18);
}
.titles h2 b{
	color: var(--primary-color);
}
/* howitworks */
.howitworks{
	background-color: #004d3d;
	padding: 50px 0;
}
.howblock{
	border: solid 1px #04997b;
	overflow: hidden;
	padding: 25px 20px;
	border-radius: 10px;
	height: 230px;
}
.howitworks .titles h2{
	color: white;
}
.howblock h1{
	position: absolute;
	right: -25px;
	bottom: -55px;
	font-size: 200px;
	font-weight: 900;
	color: #155c4e;
	opacity: 0.8;
	z-index: 0;
}
.howblock h3{
	font-size: var(--clamp26);
	color: white;
	margin-top: 15px;
}
.howblock h5{
	font-size: var(--clamp18);
	color: white;
	margin-top: 10px;
	position: relative;
	z-index: 9;
}
/* howitworks */
/* getstarted */
.startedform{
	background-color: #f2f3f5;
	padding: 50px 20px;
	border-radius: 15px;
	margin: 30px 0;
}
.startedform h3{
	text-align: center;
	font-size: var(--clamp40);
	font-weight: 700;
	text-transform: capitalize;
}
.startedform p{
	text-align: center;
	font-size: var(--clamp20);
	font-weight: 500;
}
/* getstarted */
.themebtns button{
	background-color: var(--primary-color);
	padding: 10px 20px;
	margin: 15px 0;
	border-radius: 10px;
	color: white;
	border: none;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.startedform input[type="text"]{
	height: 45px;
	margin-bottom: 15px;
	box-shadow: none;
}
.startedform select,.startedform select:focus{
	height: 45px;
	margin-bottom: 15px;
	box-shadow: none;
}
.network{
	padding: 50px 0;
}
.networkblock{
	background-color: #f2f3f5;
	padding: 15px 10px;
	text-align: center;
	height: 150px;
	padding-top: 35px;
}
.networkblock h2{
	font-size: var(--clamp32);
	font-weight: 700;
}
.networkblock h4{
	font-size: var(--clamp20);
	font-weight: 500;
}