@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Vazirmatn:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');
:root{
	/*====directions===*/
	--base-direction: rtl;
	--margin-left: 2.5em;
	--margin-right: 0;
	/*==== colors ===*/
	--first-color: #fff;
	--second-color: #45b87b;
	--hover-color: #45b87b;
	--text-color: #000;
	--banner-background: #eee;
	--footer: #044123;
	/*====fonts===*/
	--web-font: 'Vazirmatn', sans-serif;
	--title-font: 'Markazi Text', serif;
	--logo-weight: 800;
	--menu-weight: 600;
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--web-font);
	direction: var(--base-direction);
}
body{
	position: relative;
	max-width: 100%;
	overflow-x: hidden;
	background: #f5f5f5;
	touch-action: pan-x pan-y;
}
h1,h2,h3,h4,h5,h6{
	color: #3e3e3e;
}
i{
	font-size: 50px;
}
.cls-title{
	position: relative;
	display: inline-flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0.7em 1em;
    font-weight: 500;
    margin-bottom: 0.8em;
	transform: scale(0);
	opacity: 0;
	animation: zoom 1s ease-out forwards;
	animation-timeline: view(90% 10%);
}
.cls-title::after,
.cls-title::before{
	content: '';
    display: inline-block;
    width: 8em;
    height: 1px;
    position: absolute;
    bottom: 0.4em;
    background: var(--text-color);
}
.cls-title::before{
	width: 5em;
    bottom: 0.35em;
    height: 0.15em;
    background: var(--second-color);
    z-index: 1;
    border-radius: 1.5px;
}
.cls-text{
	display: block;
	width: 100%;
	padding: 2em 5em;
	color: #333;
}
.cls-text h1{
	font-size: 3em;
}
.cls-text h2{
	font-size: 2.6em;
}
.cls-text h3{
	font-size: 2.4em;
}
.cls-text h4{
	font-size: 2em;
}
.cls-text h5,
.cls-text h6{
	font-size: 1.7em;
}
.cls-text h1,
.cls-text h2,
.cls-text h3,
.cls-text h4,
.cls-text h5,
.cls-text h6{
	margin-top: 20px;
	color: #5c5c5c;
    font-weight: 100;
}
.cls-text p{
	text-indent: 30px;
	padding: 5px 0;
}
.cls-margin-top{
	margin-top: 5.5em;
}
.cls-section{
	transform: translateY(10vh);
	opacity: 0;
    animation: scaleUp forwards;
    animation-timeline: view(75% 35%);
}
.cls-section1{
	display: block;
    opacity: 0;
    width: 100%;
    padding: 2em 0;
    transform: translateY(10vh);
    border-top-right-radius: 25%;
    background: #ddd;
    animation: scaleUp forwards;
    animation-timeline: view(75% 35%);
}
.cls-section2{
	display: block;
	width: 100%;
	padding: 2em 0;
	border: 2px solid #ddd;
	border-radius:191% / 163% 0 0 0;
	background-color: #eee;
}
.cls-support{
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 0 5em;
    width: 100%;
    height: 80px;
    overflow: hidden;
}
.cls-support img{
	max-width: 20%;
    max-height: 100%;
	mix-blend-mode: multiply;
	transition: transform .5s ease;
	margin-right: 2%;
}
.cls-support img:hover{
	transform: scale(1.1);
}
.content{
	opacity: 0;
	transition: opacity 1s ease;
}
.loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: all 1s ease;
}
.loading.loaded{
	opacity: 0;display: none;
}
.loading.loaded .content{
	opacity: 1;
}
.loading img{
	width: 200px;
	animation: load 1.5s ease-in infinite;
}
@keyframes load {
	0% { transform: scale(1.1); }
	50% { transform: scale(.9); opacity: .3; }
	100% { transform: scale(1.1); }
}
/*===================================================== HEADER ========================================================*/
	.cls-nav{
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0  5em;
		background: transparent;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100vw;
		height: 6.5em;
	    overflow: hidden;
	    z-index: 20;
	    transition: top 1s, height .2s;
	}
	.cls-nav.scrolled{
		height: 5em;
	    background: rgb(255 255 255 / 90%);
	}
	.cls-nav .cls-logo{
		display: inline-flex;
	    color: var(--second-color);
	    font-weight: var(--logo-weight);
	    max-width: 9em;
	    height: 100%;
	    justify-content: center;
	    align-items: center;
	}
	.cls-nav .cls-logo img{
		display: inline-flex;
		padding: 5px 3px;
		max-height: 100%;
		max-width: 100%;
	}
	.cls-nav .cls-logo:hover{
		color: var(--hover-color);
	}
	.cls-toggle{
		z-index: 20;
	}
	.cls-nav .cls-soci{
		display: none;
	}
	.cls-nav .cls-menu{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100%;
	    max-width: 100vw;
    	max-height: 100vh;
	    overflow: hidden;
	}
	.cls-nav .cls-menu a::after{
		content: '';
		position: absolute;
		width: 100%;
		border: 1.5px solid var(--hover-color);
		left: 0;
		bottom: 30%;
		transition: .5s;
		opacity: 0;
		z-index: 1;
		animation-delay: 0.1s;
	}
	.cls-nav .cls-menu a.active{
		color: var(--hover-color);
	}
	.cls-nav .cls-menu a.active::after{
		animation: slide-top 1s linear forwards;
	}
	.cls-nav .cls-menu a:hover:after{
		animation: slide-top 0.4s linear forwards;
	}
	.cls-nav .cls-menu li{
		min-width: 100%;
		list-style: none;
		text-align: center;
		font-weight: var(--menu-weight);
		padding: 5px;
	}
	.cls-nav a{
		position: relative;
	    display: flex;
	    text-decoration: none;
	    color: var(--text-color);
		margin-right: var(--margin-right);
		margin-left: var(--margin-left);
	    height: 100%;
	    align-items: center;
	    opacity: 0;
	    animation: slide-top 1s linear forwards;
	    animation-delay: calc(0.2s * var(--i));
	    z-index: 5;
	}
	@keyframes slide-top{
		0%{
			transform: translateY(100px);
			opacity: 0;
		}
		100%{
			transform: translateY(0);
			opacity: 1;
		}	
	}
	.cls-nav a:hover{
		color: var(--hover-color);
	}
	.cls-accesibility{
		height: 60vh;
	    position: fixed;
	    right: -250px;
	    z-index: 100;
	    margin: 20vh 0;
	    display: flex;
		display: none;
	    flex-wrap: wrap;
	    align-content: center;
	    justify-content: center;
	    align-items: center;
	    transition: right .8s ease-out;
	}
	.cls-accesibility.active{
		right: 0;
	}
	.cls-accesibility-toggle{
		position: relative;
		font-size: 100%;
		background: #45b87b;
		color: #fff;
		width: 50px;
		border-radius: 50% 0 0 50%;
	}
	.cls-accesibility-toggle:hover{
		cursor: pointer;
	}
	.cls-accesibility ul{
		background: #45b87b;
	    display: inline-flex;
	    flex-direction: column;
	    justify-content: space-around;
	    align-items: center;
	    height: 100%;
	    border-radius: 4px 0 0 4px;
	}
	.cls-accesibility ul li{
		list-style: none;
	    width: 250px;
	    height: 100%;
	    display: inline-flex;
	    align-items: center;
	    padding: 0 8px;
	}
/*===================================================== HEADER end ========================================================*/
/*===================================================== Carousel ========================================================*/
	.cls-bg-box .cls-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		transition: 1s cubic-bezier(0.68,-0.55,0.256,1.55);
	}
	.cls-bg-box .cls-bg:nth-child(1){
		background: linear-gradient(360deg, #408e20, #9acd31);
	}
	.cls-bg-box .cls-bg:nth-child(2){
		background: linear-gradient(360deg, #550802, #f40401);
	}
	.cls-bg-box .cls-bg:nth-child(3){
		background: linear-gradient(360deg, #696901, #ffff03);
	}
	.cls-bg-box .cls-bg:nth-child(4){
		background: linear-gradient(360deg, #823043, #fac0cb);
	}
	.cls-bg-box .cls-bg:nth-child(2),
	.cls-bg-box .cls-bg:nth-child(3),
	.cls-bg-box .cls-bg:nth-child(4){
		clip-path: circle(0% at 50% 50%);
	}
	.cls-bg-box .cls-bg:nth-child(2).active,
	.cls-bg-box .cls-bg:nth-child(3).active,
	.cls-bg-box .cls-bg:nth-child(4).active{
		clip-path: circle(75% at 50% 50%);
	}
	.cls-carousel{
		height: 100vh;
		padding: 0 10%;
		overflow: hidden;
	}
	.cls-carousel .cls-box-info{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 650px;
		height: 250px;
		overflow: hidden;
	}
	.cls-box-info .cls-list-info{
		transition: 1s cubic-bezier(0.68,-0.55,0.256,1.55);
	}
	.cls-list-info .cls-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: var(--second-color);
		height: 250px;
	}
	.cls-info h2{
		line-height: 1;
	}
	.cls-info p{
		margin: 20px 0;
	}
	.cls-info .cls-btn{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 180px;
		height: 50px;
		background: transparent;
		border: 2px solid var(--second-color);
		border-radius: 40px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		color: var(--second-color);
		text-decoration: none;
		font-weight: 600;
	}
	.cls-carousel .cls-list-image{
		height: 100%;
		transition: 1s cubic-bezier(0.68,-0.55,0.256,1.55);
	}
	.cls-list-image .cls-item{
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.cls-item img{
		position: absolute;
		right: 0;
		pointer-events: none;
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
	}
	.cls-navigation{
		position: absolute; 
		bottom: 7%;
		left: 50%;
		transform: translateX(-50%);
	}
	.cls-navigation span{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		background: transparent;
		border: 2px solid var(--second-color);
		border-radius: 50%;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		margin: 0 10px;
		font-size: 55px;
		color: var(--second-color);
	}
/*===================================================== Carousel end ========================================================*/
/*===================================================== BANNERS ========================================================*/
	.cls-video{
		display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    min-height: 99vh;
	    max-height: 100%;
	    position: relative;
	    overflow: hidden;
	}
	.cls-video .cls-player{
		position: absolute;
	    min-height: 100%;
	    left: 50%;
	    transform: translate(-50%, 0%);
	}
	.cls-video .cls-content{
		display: inline-flex;
		flex-direction: column;
		width: 50%;
		z-index: 10;
		opacity: 0;
		transform: scale(.6);
		animation: content-show-up 3s ease-out forwards;
	}
	@keyframes content-show-up{
		from{
			opacity: 0;
			transform: scale(.6);
		} to{
			opacity: 1;
			transform: scale(1);
		}
	}
	.cls-video .cls-content h1,
	.cls-video .cls-content p{
		color: #fff;
		text-align: center;
	}
	.cls-video .cls-content h1{
    	line-height: 1;
	}
	.cls-video .cls-content p{
		padding: 1em 0;
	}
	.cls-video::after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		opacity: .2;
		background: linear-gradient(180deg, #fff, #333);
	}
	.cls-banner1,
	.cls-banner2,
	.cls-banner2-1{	
		padding:1em  5em;
		background: #f5f5f5;
		transform: scale(0);
		opacity: 0;
		animation: zoom 1s ease-out forwards;
		animation-timeline: view(90% 10%);
	}
	.cls-banner1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 100%;
		margin: 2.5em 0;
	}
	.cls-banner1 .cls-content{
		padding: 3em;
		max-width: 50%;
	}
	.cls-banner1 .cls-image{
		max-width: 50%;
	}
	.cls-banner1 .cls-content p{
		padding: 3em 0;
	}
	.cls-banner1 .cls-content .cls-btn{
		display: inline-flex;
    	justify-content: center;
	    align-items: center;
	    text-decoration: none;
	    border-radius: 8px;
	    min-width: 130px;
	    min-height: 45px;
	    background-color: var(--second-color);
	    color: var(--first-color);
	}
	.cls-banner1 .cls-image img,
	.cls-banner2 .cls-image img,
	.cls-banner2-1 .cls-image img{
		max-width: 100%;
		mix-blend-mode: multiply;
	}
	.cls-banner2,
	.cls-banner2-1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--banner-background);
		max-width: 100%;
	}
	.cls-banner2 .cls-content,
	.cls-banner2-1 .cls-content{
		max-width: 60%;
		transition: all 2s;
	}
	.cls-banner2 .cls-content p,
	.cls-banner2-1 .cls-content p,
	.cls-banner3 .cls-content p{
		padding: 3em 0;
	}
	.cls-banner2 .cls-image,
	.cls-banner2-1 .cls-image{
		max-width: 40%;
		padding: 3em;
	}
	.cls-banner2 .cls-image img,
	.cls-banner2-1 .cls-image img{
		display: inline-flex;
		transform: scale(0);
		opacity: 0;
		animation: zoom 1s ease-out forwards;
		animation-timeline: view(90% 10%);
	}
	@keyframes zoom{
		to{
			transform: scale(1);
			opacity: 1;
		}
	}
	.cls-banner2-1 .cls-image{
		max-width: 60%;
	}
	.cls-banner2-1 .cls-content{
		max-width: 40%;
	}
	.cls-btn{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		border-radius: 16px 16px 16px 0;
		width: 160px;
		height: 55px;
		background-color: var(--second-color);
		color: var(--first-color);
	}
	.cls-banner3{
		position: relative;
		width: 100%;
		margin-bottom: 25%;
	}
	.cls-banner3 .cls-image{
		width: 100%;
	}
	.cls-banner3 .cls-image img{
		display: inline-block;
		width: 100%;
		max-width: 100%;
	}
	.cls-banner3 .cls-jumbutron{
		position: absolute;
		top: 20%;
		width: 40%;
		max-height: 100%;
		background: rgb(255 255 255 / 0%);
		padding: 3em 4em;
		overflow: hidden;
		transform: translateX(-100vw);
		animation: banner3-slide 1s forwards;
	}
	@keyframes banner3-slide{
		to{
			background: rgb(255 255 255 / 80%);
			transform: translateX(0);
			left: 5%;
		}
	}
	.cls-banner3 .cls-jumbutron .cls-content{
		border-top: 1px solid var(--text-color);
		border-bottom: 1px solid var(--text-color);
		padding: 1em 0;
	}
	.cls-banner4{
		display: flex;
		justify-content: center;
		padding: 5em;
		background: var(--banner-background);
		border-radius: 0 0 0 125% / 163%;
	}
	.cls-banner4 .cls-content{
		position: relative;
		width: 38%;
		min-height: 35vh;
	}
	.cls-banner4 .cls-image{
		width: 60%;
		min-height: 35vh;
		text-align: center;
	}
	.cls-banner4 .cls-image img{
		max-width: 100%;
	}
	.cls-banner4 p{
		position: absolute;
		left: 15% ;
		padding: 25px 15px;
	}
	.cls-btn{
		transition: .2s ease-out;
		background: #044123!important;
	}
	.cls-btn:hover{
		background: #03b585!important;
		transform: scale(1.1);
		color: #fff;
	}
/*===================================================== BANNERS end ========================================================*/
/*===================================================== CARDS ========================================================*/
	.cls-cards{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 2em;
		padding: .2em 5em;
	}
	.cls-card1,
	.cls-card2,
	.cls-card3,
	.cls-card4{
		display: flex;
	    justify-content: space-around;
	    flex-direction: column;
	    align-items: center;
	    text-decoration: none;
	    width: 27%;
	    margin-right: 2%;
	    margin-bottom: 2%;
	    height: 35em;
	    border-radius: 27px 0 0 0;
	}
	.cls-card1{
		opacity: 0;
		transform: translateY(10vh);
		animation: scaleUp forwards;
		animation-timeline: view(75% 35%);
		background: #ccdcc8;
	}
	.cls-card1:hover .cls-content h3{
		text-decoration: underline;
	}
	.cls-card1 .cls-content,
	.cls-card3 .cls-content{
		padding: .7em 2em;
	}
	.cls-card1 .cls-content h3,
	.cls-card3 .cls-content h3{
		padding: .7em 0;
	}
	.cls-card1 .cls-content p,
	.cls-card3 .cls-content p{
		color: #333;
	}
	.cls-card1 .cls-image,
	.cls-card2 .cls-image,
	.cls-card3 .cls-image{
		max-width: 100%;
	}
	.cls-card1 .cls-image img,
	.cls-card2 .cls-image img,
	.cls-card3 .cls-image img{
		max-width: 100%;
		mix-blend-mode: darken;
	}
	.cls-card2{
		justify-content: space-between;
		min-height: 55vh;
		border-radius: 0;
		width: 31%;
		height: 350px;
		margin-bottom: 2%;
		background: #ccdcc8;
    	padding: 0;
    	opacity: 0;
    	transform: translateY(10vh);
		animation: scaleUp forwards;
		animation-timeline: view(75% 35%);
	}
	.cls-card2 .cls-content{
		position: absolute;
	    width: 100%;
	    bottom: 0;
	    left: 0;
	    height: 50%;
	    padding: 0.8em;
	    overflow: hidden;
	    background: #ccdcc8;
	    transition: 1s height;
	}
	.cls-card2 .cls-content p{
		color: var(--text-color);
		margin-top:25px ;
		display: none!important;
	}
	.cls-card2:hover .cls-content{
		height: 100%;
	}
	.cls-card2:hover .cls-content p{
		display: -webkit-box!important;
	}
	.cls-card2 .cls-content h3,
	.cls-card3 .cls-content h3{
	    font-weight: 900;
	    margin-bottom: 2%;
	    padding: 0.4em 0;
	}
	.cls-card2 .cls-content p,
	.cls-card3 .cls-content p{
		display: -webkit-box;
		overflow : hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.cls-card3{
		min-height: 65vh;
		height: auto;
		background: #eee;
		padding-top: 1.4em;
    	opacity: 0;
    	transform: translateY(10vh);
		transition: transform .2s ease, box-shadow .5s;
		animation: scaleUp forwards;
		animation-timeline: view(75% 35%);
	}
	.cls-cards .cls-btn{
		margin: 3% 0;
		height: 45px;
	}
	.cls-card4{
		justify-content: flex-end;
		position: relative;
		height: 25em;
		border-radius: 0;
		width: 18em;
		margin-bottom: 5%;
	}
	.cls-card3:hover{
		box-shadow: 1px 4px 10px #ccc;
		transform: scale(1.03);
	}
	.cls-card4:hover .cls-image{
		transform: scale(1.2);
	}
	.cls-card4 .cls-image{
		display: inline-flex;
		position: absolute;
		top: 0;
		width: 12em;
    	height: 12em;
		border-radius: 50%;
		border: .5em solid #f5f5f5;
		transition: transform 1s ease;
	}
	.cls-card4 .cls-image::before,
	.cls-card4 .cls-image::after{
		content: '';
		position: absolute;
		width: 20px;
		height: 20px;
		top: 50%;
		background: transparent;
		box-shadow: 0 -10px 0 0 #f5f5f5;
	}
	.cls-card4 .cls-image::before{
		left: -24px;
		right: 100%;
		border-top-right-radius: 100%;
	}
	.cls-card4 .cls-image::after{
		right: -24px;
		border-top-left-radius: 100%;
	}
	.cls-card4 .cls-image img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}
	.cls-card4 .cls-content{
		display: inline-flex;
        justify-content: flex-end;
	    align-items: center;
		padding: 2em ;
	    padding-top: 4em;
	    width: 100%;
	    height: calc(100% - 6em);
	    background: #fff;
	    flex-direction: column;
	    border-radius: 14px 14px 0 0;
	}
	.cls-card4 .cls-content h4{
		font-weight: 800;
		text-align: center;
	}
	.cls-card4 .cls-content h5{
		color: var(--second-color);
		padding: 1em;
		letter-spacing: 3px;
		font-weight: 600;
	}
	.cls-card4 .cls-content p{
		width: 100%;
		padding-top: .5em;
		font-style: italic;
	}
	@keyframes scaleUp{
		to{
			transform: translateY(0);
			opacity: 1;
		}
	}
/*===================================================== CARDS end ========================================================*/
/*===================================================== TABES ========================================================*/
	.cls-tabs{
		width: 100%;
		padding: 1em 5em;
		background-color: var(--banner-background);
	}
	.cls-tab1,
	.cls-tab2{
		width: 100%;
		transform: translateY(20vh);
		opacity: 0.4;
		animation: tab1-show-up 1s forwards;
		animation-timeline: view(85% 15%);
	}
	@keyframes tab1-show-up{
		to{
			transform: translateY(0);
			opacity: 1;
		}
	}
	.cls-tab1 .cls-items,
	.cls-tab2 .cls-items{
		min-width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #ddd;
		overflow-x: hidden;
	}
	.cls-tab1 .cls-items li,
	.cls-tab2 .cls-items li{
		display: inline-flex;
	    justify-content: center;
	    align-items: center;
	    text-align: center;
	    height: 100%;
	    min-width: 10em;
	    min-height: 5em;
	    text-decoration: none;
	    padding: 1em;
	    flex-direction: column-reverse;
	}
	.cls-tab2 .cls-items li{
		color: var(--second-color);
		font-weight: 400;
	}
	.cls-tab2 .cls-items li i{
		padding: .5em 0;
	}
	.cls-tab1 .cls-items li:hover,
	.cls-tab2 .cls-items li:hover{
		cursor: pointer;
	}
	.cls-tab1 .cls-items li.active,
	.cls-tab1 .cls-items li:hover{
		border-bottom: 5px solid var(--second-color);
		font-weight: 500;
	}
	.cls-tab2 .cls-items li.active,
	.cls-tab2 .cls-items li:hover{
		background: var(--second-color);
		color: #fff;
	}
	.cls-tab1 .cls-tab-content{
		display: none;
		padding-top: 5em;
		width: 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.cls-tab2 .cls-tab-content{
		display: none;
		overflow: hidden;
	}
	.cls-tab2 .cls-tab-content .cls-banner1{
		background: transparent;
	}
	.cls-tab2 .cls-tab-content .cls-banner1 .cls-image{
		animation: slide-left 1s forwards;
	}
	.cls-tab2 .cls-tab-content .cls-banner1 .cls-content{
		animation: slide-right 1s forwards;
	}
	.cls-tab1 .cls-tab-content.active,
	.cls-tab2 .cls-tab-content.active{
		display: flex;
	}
	.cls-tab1 .cls-tab-content span,
	.cls-tab2 .cls-tab-content span{
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		min-height: 3em;
		width: 30%;
		margin-bottom: 1em;
		margin-right: 2%;
		text-decoration: none;
		border-bottom: 1px solid #ddd;
		font-weight: 500;
	}
	.cls-tab1 .cls-tab-content span a,
	.cls-tab2 .cls-tab-content span a{
		display: inline-flex;
	    text-decoration: none;
	    width: 100%;
	    color: #333;
	    flex-wrap: nowrap;
	    justify-content: space-between;
	    align-items: center;	
	}
	.cls-tab1 .cls-tab-content span a i{
		font-size: 25px!important;
	}
	.cls-tab1 .cls-tab-content a:hover{
		color: var(--second-color);
	}
	.cls-tab3{
		width: 100%;
	    height: auto;
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    border: .5px solid #7e7e7e;
	    margin-bottom: 50px;
	}
	.cls-tab3 li{
		list-style: none;
	    display: inline-flex;
	    flex-direction: column;
	    align-items: flex-start;
	    justify-content: center;
	    height: auto;
	    width: 100%;
	    padding: 10px;
	    border-bottom: 1px solid #333;
	    transition: all 1s ease;
	    overflow: hidden;
	}
	.cls-tab3 li h6{
		padding: 10px 0;
	    width: 100%;
	    display: inline-flex;
	    flex-wrap: nowrap;
	    justify-content: space-between;
	    align-items: center;
	    text-align: justify;
	}
	.cls-tab3 li i{
	    transition: all .5s ease;
	}
	.cls-tab3 li:hover{
		cursor: pointer;
	}
	.cls-tab3 li:hover h6{
		color: #7e7e7e;
	}
	.cls-tab3 li p{
		height: 0;
		opacity: 0;
	    transition: all 1s ease;
	}
	.cls-tab3 li.active p{
		height: auto;
		opacity: 1;
		padding: 25px;
	}
	.cls-tab3 li.active i{
		transform: rotate(180deg);
	}
/*===================================================== TABES end ========================================================*/
/*===================================================== BREADCRUMBS ========================================================*/
	.cls-breadcrumbs{
		display: inline-flex;
		flex-wrap: wrap;
		max-width: 100%;
		padding: 1em 2em;
		margin-top: 8em;
	}
	.cls-breadcrumbs a{
		text-decoration: none;
		padding: 0 .5em;
		position: relative;
		color: #333;
	}
	.cls-breadcrumbs a::after{
		content: '';
		height: 50%;
		width: 1px;
		position: absolute;
		border-right: 2px solid #333;
		left: 0;
		top: 25%;
		transform: rotate(15deg);
	}
	.cls-breadcrumbs p{
		margin-right: 2em;
	}
/*===================================================== BREADCRUMBS end ========================================================*/
/*===================================================== FOOTER ========================================================*/
	.cls-footer{
		width: 100%;
	    background: var(--footer);
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	    flex-wrap: wrap;
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    height: 45px;
	    overflow: hidden;
	    transition: all 1s ease-out;
        z-index: 10;
	}
	.cls-footer-toggle{
		position: absolute;
		right: 5px;
		top: 5px;
		color: #fff;
		transition: transform .3s ease-in;
	}
	.cls-footer-toggle:hover{
		cursor: pointer;
	}
	.cls-footer-toggle.active{
		transform: rotate(135deg);
	}
	.cls-footer-toggle i{
		font-size: 35px;
	}
	.cls-footer .cls-logo,
	.cls-footer .cls-sitemap,
	.cls-footer .cls-soci{
		opacity: 0;
	}
	.cls-footer.active{
		padding: 5em;
		height: auto;
	}
	@keyframes show-up{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}	
	}
	.cls-footer.active .cls-logo,
	.cls-footer.active .cls-sitemap,
	.cls-footer.active .cls-soci{
		visibility: visible;
		animation: show-up 1s ease-out forwards;
		animation-delay: .5s;
	}
	.cls-footer .cls-logo{
		width: 15%;
		visibility: hidden;
	}
	.cls-footer .cls-logo img{
		width: 100%;
	}
	.cls-footer .cls-sitemap{
		width: 74%;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		visibility: hidden;
	}
	.cls-footer .cls-sitemap li{
		list-style: none;
		width: 20%;
	}
	.cls-footer .cls-sitemap li h4{
		font-weight: 500;
		color: var(--first-color);
		margin-bottom: 2em;
	}
	.cls-footer .cls-sitemap li a{
		display: block;
		text-decoration: none;
		margin-bottom: 1.2em;
		color: var(--hover-color);
	}
	.cls-footer .cls-sitemap li a:hover{
		text-decoration: underline;
	}
	.cls-footer .cls-soci{
		min-width: 40%;
		display: inline-flex;
		justify-content: space-between;
		margin: 2em 0;
		visibility: hidden;
	}
	.cls-footer .cls-soci li{
		list-style: none;
	}
	.cls-footer .cls-soci i{
		color: var(--hover-color);
	}
	.cls-footer p{
		width: 100%;
	    display: block;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    color: var(--first-color);
	    text-align: center;
	    font-size: 13px;
	    font-weight: 500;
	    padding: 1em;
	}
/*===================================================== FOOTER end ========================================================*/
/*===================================================== CONTACT US ========================================================*/
	.cls-contact{
		display: flex;
		width: 100%;
		padding:1em  5em;
	}
	.cls-contact .cls-social{
		display: flex;
	    max-width: 60%;
	    flex-wrap: wrap;
	    justify-content: center;
	    align-items: center;
	    align-content: center;
	}
	.cls-contact .cls-social li{
		list-style: none;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		min-width: 45%;
		padding: 1em 2em;
	}
	.cls-contact .cls-social li:nth-child(odd){
		border-left: 1px solid;
	}
	.cls-contact .cls-social li:last-child{
		border: none;
	}
	.cls-contact .cls-social li a{
		display: inline-flex;
	    text-decoration: none;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: nowrap;
	    width: 100%;
	    color: #333;
	}
	.cls-contact .cls-social li a i{
	}
	.cls-contact .cls-social li a:hover p{
		text-decoration: underline;
	}
	.cls-contact .cls-location {
	    width: 100%;
	    height: 50vh;
	    border-inline: none;
	    border: none;
	    box-shadow: 12px 17px 21px #ccc;
	}
	.cls-form{
		display: flex;
		width: 100%;
		padding:1em  5em;
		margin-bottom: 100px;
	}
	.cls-form form{
		display: flex;
	    width: 100%;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    align-items: center;	
	}
	.cls-form .cls-input{
		position: relative;
		width: 80%;
	    display: flex;
	    justify-content: flex-start;
	    align-items: flex-start;
	    flex-wrap: nowrap;
	}
	.cls-form .cls-input img{
		padding: .5em 2em;
	}
	.cls-form form input,
	.cls-form form textarea{
		width: 100%;
		margin-bottom: 1.2em;
		position: relative;
		padding: .8em;
		border: 2px solid;
		max-width: 100%;
	}
	.cls-form form input{
		height: 3em;
		border-radius: 37px / 50%;
	}
	.cls-input textarea{
		height: 6em;
		border-radius: 30px / 30px;
	}
	.cls-form form label{
		position: absolute;
		z-index: 1;
		padding: .2em 1em;
		right: 0;
		top: 0;
		letter-spacing: 1px;
		transition: transform .3s ease-out ,letter-spacing .2s ease-out;
		border: 2px solid transparent;
	}
	.cls-form form label i{
		font-size: 10px;
    	font-style: normal;
    	color: red;
    }
	.cls-input input:focus + label,
	.cls-input input:not(:placeholder-shown) + label,
	.cls-input textarea:focus + label,
	.cls-input textarea:not(:placeholder-shown) + label{
		transform: translateY(0em) translateX(10px);
	    color: #03b585;
	    font-size: 12px;
	}
	.cls-form input[type="submit"]{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		border-radius: 8px;
		width: 130px;
	    min-height: 45px;
		background-color: var(--second-color);
		color: var(--first-color);
		transition: transform .5s;
	}
	.cls-form input[type="submit"]:hover{
		cursor: pointer;
		background: #03b585;
		transform: scale(1.1);
	}
	.cls-message{
		width: 100%;
	    display: flex;
	    padding: 5em;
	    justify-content: center;
	}
	.cls-message p{
		width: 100%;
	    padding: 2em 1em;
	    border: 5px solid #a7a7a7;
	    border-radius: 75px/104%;
	    color: #1c2e24;
	}
/*===================================================== CONTACT US end ========================================================*/
/*===================================================== VIEW DEVICE ========================================================*/
	@media (max-width: 1800px){
		h1,h2{
			font-size: 60px;
		}
		h3,h4{
			font-size: 50px;
		}
		.cls-card3 .cls-content h3 {
			font-size: 25px;
		}
		h5,h6{
			font-size: 40px;
		}
		p,li{
			font-size: 30px;
		}
		a{
			font-size: 24px;
		}
		input, textarea{
			font-size: 30px;
		}
	}
	@media (max-width: 1650px){
		h1,h2{
			font-size: 55px;
		}
		h3,h4{
			font-size: 45px;
		}
		h5,h6{
			font-size: 35px;
		}
		p,li{
			font-size: 25px;
		}
		a{
			font-size: 22px;
		}
		input, textarea{
			font-size: 25px;
		}
	}
	@media (max-width: 1410px){
		h1,h2{
			font-size: 50px;
		}
		h3,h4{
			font-size: 40px;
		}
		.cls-card3 .cls-content h3 {
			font-size: 18px;
		}
		h5,h6{
			font-size: 30px;
		}
		p,li{
			font-size: 20px;
		}
		a{
			font-size: 17px;
		}
		input, textarea{
			font-size: 20px;
		}
	}
	@media (max-width: 1280px){
		h1,h2{
			font-size: 45px;
		}
		h3,h4{
			font-size: 35px;
		}
		.cls-card3 .cls-content h3 {
			font-size: 14px;
		}
		h5,h6{
			font-size: 25px;
		}
		p,li{
			font-size: 20px;
		}
		.cls-nav a{
			font-size: 12px;
		}
		a{
			font-size: 17px;
		}
		input, textarea{
			font-size: 15px;
		}
	}
	@media (max-width: 1100px){
		h1,h2{
			font-size: 40px;
		}
		h3,h4{
			font-size: 30px;
		}
		.cls-card3 .cls-content h3 {
			font-size: 13px;
		}
		h5,h6{
			font-size: 20px;
		}
		p,li{
			font-size: 15px;
		}
		.cls-nav a{
			font-size: 8px;
		}
		a{
			font-size: 12px;
		}
		input, textarea{
			font-size: 15px;
		}
		.cls-margin-top{
			margin-top: 4em;
		}
		.cls-text,
		.cls-banner1,
		.cls-banner2,
		.cls-banner2-1,
		.cls-banner4{
			padding:3em  1em;
		}
		.cls-banner1{
		    flex-direction: column;
		    flex-wrap: nowrap;
		}
		.cls-tab-content .cls-banner1 {
		    flex-direction: column-reverse;
		    flex-wrap: nowrap;
		}
		.cls-banner2,
		.cls-banner2-1{
		    flex-direction: column;
		    flex-wrap: nowrap;
		}
		.cls-banner1 .cls-content,
		.cls-banner1 .cls-image,
		.cls-banner2 .cls-content,
		.cls-banner2 .cls-image,
		.cls-banner2-1 .cls-content,
		.cls-banner2-1 .cls-image{
			max-width: 100%;
		}
		.cls-banner4 .cls-content {
		}
		.cls-banner4 p {
		    position: relative; 
		    padding: 15px 39px;
		}
		.cls-cards{
			padding: 3em 1em;
		}
		.cls-card1,
		.cls-card2,
		.cls-card3{
			width: 35%;
			margin-bottom: 2%;
		}
		.cls-tab1 .cls-tab-content span{
			width: 48%;
		}
		.cls-footer{
			flex-direction: column;
			align-items: center;
			min-height: auto;
		}
		.cls-footer .cls-logo {
		    width: 70%;
		    padding: 2em;
		}
		.cls-footer .cls-sitemap{
			width: 100%;
			display: inline-flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: flex-start;
		}
		.cls-footer .cls-sitemap h4{
			width: 100%;
			margin-bottom: .8em!important;
			font-size: 20px;
		}
		.cls-footer .cls-sitemap a{
			font-size: 14px;
			margin-bottom: 0!important;
			padding: 0 1em;
		}
		.cls-footer .cls-sitemap li {
    		display: inline-flex;
    		align-items: center;
    		flex-wrap: wrap;
    		width: 100%;
    		margin-bottom: 1.2em;
    	}
		.cls-footer .cls-soci {
		    width: 100%;
		    padding: 1em;
		}
    	.cls-contact {
		    display: flex;
		    width: 100%;
		    padding: 1em 2em;
		    flex-direction: column;
		    align-items: center;
		}
		.cls-contact .cls-social {
		    max-width: 100%;
		    margin-bottom: 3em;
		}
		.cls-form .cls-input img{
			padding: .5em;
		}
	}
	@media (max-width: 900px){
		i{
			font-size: 35px;
		}
		.cls-video .cls-content {
		    width: 80%;
		}
		.cls-support {
		    justify-content: flex-start;
		    overflow: scroll;
		    padding: 0 2em;
		}
		.cls-section2 {
		    border-radius: 146px / 133px 0 0 0;
		}
		.cls-title{
			font-size: 2.8em;
		}
		.cls-title::before {
		    bottom: 15px;
		}
		.cls-text{
			padding:2em  1em;
		}
		.cls-nav{
			padding: 0 20px;
		}
		.cls-nav.scrolled{
			height: 5.5em;
		    box-shadow: 1px 1px 11px 1px #ccc;
		    border-bottom: 1px solid transparent;
		}
		.cls-banner1{
			padding: 0;
		}
		.cls-banner2,
		.cls-banner2-1,
		.cls-banner4{
			padding:2em  0;
		}
		.cls-banner4 {
		    flex-direction: column;
		}
		.cls-banner4 .cls-content{
			padding: 0 0.8em;
		}
		.cls-banner4 .cls-content,
		.cls-banner4 .cls-image {
		    width: 100%;
		}
		.cls-nav .cls-menu{
			display: none;
		}
		.cls-nav .cls-menu.active{
			position: fixed;
		    display: flex;
		    width: 100%;
		    left: 0;
		    top: 0;
		    z-index: 15;
		    background-color: var(--first-color);
		    flex-direction: column;
		    align-items: flex-start;
		    padding: 4em 4em 0em 2em;
		}
		.cls-nav .cls-menu a{
			height: 5em;
    		font-size: 2em;
    		margin: 0;
    		width: 100%;
    		border-bottom: 1.5px solid;
		}
    	.cls-nav .cls-menu a::after{
    		display: none;	
    	}
		.cls-nav .cls-menu li {
		    text-align: right;
		    font-size: 31px;
    	}
    	.cls-nav .cls-soci{
			display: flex;
		    width: 100%;
		    flex-wrap: nowrap;
		    justify-content: space-evenly;
		}
		.cls-nav .cls-soci li{
			min-width: fit-content;
		}
		.cls-nav .cls-soci li a{
			border-bottom: none;
			height: 2em;
		}
		.cls-toggle{
			width: 40px;
			height: 40px;
			background: var(--second-color) url(../images/menu.png);
			background-size: 30px;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
			z-index: 20;
			border-radius: 4px;
		}
		.cls-toggle.active{
			background: var(--second-color) url(../images/close.png);
			background-size: 30px;
			background-repeat: no-repeat;
			background-position: center;
		}
		.cls-banner1 .cls-content,
		.cls-banner2 .cls-content,
		.cls-banner2-1 .cls-content{
			padding: .5em;
		}
		.cls-banner3{
			margin-bottom: 0;
		}
		.cls-banner3 .cls-jumbutron{
			position: relative;
		    left: 0;
		    top: -7px;
		    width: 100%;
		    height: 100%;
		}
		.cls-cards{
			padding: 2em 0em;
		}
		.cls-card1,
		.cls-card2,
		.cls-card3{
			width: 50%;
			height: 24em;
		}
		.cls-card1{
			min-height: 70vh;
		}
		.cls-tabs {
		    padding: 2em 3em;
		}
		.cls-tab1 .cls-items,
		.cls-tab2 .cls-items{
			overflow-x: scroll;
			justify-content: flex-start;
		}
		.cls-tab1 .cls-tab-content span{
			width: 100%;
		}
		.cls-message {
		    padding: 0.5em;
		}
	}
	@media (max-width: 600px){
		h1, h2, h3, h4{
			font-size: 2em;
		    line-height: 1;
		}
		p{
			font-size: .9em;
		}
		.cls-title{
			font-size: 2.8em;
		}
		.cls-support img {
    		max-width: 50%;
    	}
		.cls-card1,
		.cls-card2,
		.cls-card3{
			width: 90%;
			margin-bottom: 7%;
		}
		.cls-footer{
			padding: .7em!important;
		}
		.cls-contact .cls-social {
		    display: flex;
		    width: 100%;
		    margin-bottom: 3em;
		    flex-direction: column;
		    flex-wrap: nowrap;
		    align-items: center;
		}
		.cls-contact .cls-social li {
		    width: 100%;
		    border-right: none!important;
		    border-bottom: 1px solid #333;
		}
		.cls-contact .cls-social li a {
		    justify-content: space-evenly;
		}
		.cls-contact .cls-social li:nth-child(odd) {
		    /* border-right: 1px solid; */
		}
		.cls-form {
		    padding: 1em 1em;
		}
		.cls-form input{
			height: 2.7em!important;
		}
		.cls-form input,
		.cls-form textarea{
		    font-size: 1.2em!important;
		    margin-bottom: 2.1em!important;
		}
	}
/*===================================================== VIEW DEVICE end ========================================================*/