*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
	scroll-behavior: smooth;
	text-decoration: none;
}
html{
	/* Smooth Scrolling */
	/* scroll-behavior: smooth; */

	--primary-clr: #e1c31b;
	--light-grey-bg: #ebebec;
	--grey-bg: #e3e3e4;
	--heading-clr: #010101;
	--text-clr: #676767;
	--yellow-clr: #fbc980;
	--purple-clr: #d181da;
	--green-clr: #c5fdf2;
}
/*   === Reusable Code Starts ===   */
button.btn{
	padding: 12px 25px;
	background-color: var(--heading-clr);
	border: 1px solid var(--heading-clr);
	color: var(--light-grey-bg);
	border-radius: 25px;
	font-size: 14px;
	letter-spacing: 1px;
	transition: 0.4s;
	cursor: pointer;
}
button.btn:hover{
	background-color: transparent;
	color: var(--heading-clr);
}
/*   === Sections headers ===   */
header.section-header{
	max-width: 400px;
	margin-bottom: 35px;
}
header.section-header h3{
	position: relative;
	display: inline-block;
	color: var(--text-clr);
	font-size: calc(12px + 0.5vw);
	font-weight: 400;
	cursor: pointer;
}
header.section-header h3::before{
	position: relative;
	content: '';
	display: inline-block;
	width: 30px;
	height: 1px;
	background-color: var(--text-clr);
	margin-right: 10px;
	margin-bottom: 6px;
	transition: width 0.5s;
}
header.section-header h3:hover::before{
	width: 45px;
}
header.section-header h1{
	font-size: calc(18px + 1.5vw);
	font-weight: 500;
	margin-top: 7px;
}
/*   === Reusable Code Ends ===   */
body{
	width: 100%;
	min-height: 100vh;
}
.page-wrapper{
	position: relative;
	width: 100%;
	max-width: 1400px;
	min-height: 100vh;
	background-color: var(--light-grey-bg);
	background-image: url('./Images/asset\ 10.jpeg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0px auto;
}
/*   === Home Section Style Starts ===   */
section.home{
	position: relative;
	width: 100%;
	min-height: 100vh;
}
section.home .bg-gradient{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	z-index: 0;
}
.home .bg-gradient .color-1{
	width: 20%;
	height: 30%;
	position: absolute;
	right: 0;
	top: 30%;
	border-radius: 30%;
	background-color: var(--green-clr);
	filter: blur(135px);
}
.home .bg-gradient .color-2{
	width: 40%;
	height: 25%;
	position: absolute;
	right: 20%;
	top: 40%;
	border-radius: 10%;
	background-color: var(--yellow-clr);
	filter: blur(165px);
}
.home .bg-gradient .color-3{
	width: 30%;
	height: 27%;
	position: absolute;
	left: 5%;
	bottom: 25%;
	border-radius: 5%;
	background-color: var(--purple-clr);
	filter: blur(210px);
}
/* .home .navbar{
	position: absolute;
	top: 1rem;
	left: 0;
	width: 100%;
	height: 80px;
	padding: 0px 8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
} */


.home .navbar{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	padding: 0px 8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}
/* .home.active .navbar{
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--light-grey-bg);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
	animation: animateNavbar 0.5s linear;
	z-index: 110;
}
@keyframes animateNavbar{
	0%{
		transform: translateY(-100%);
	}
	100%{
		transform: translateY(0px);
	}
} */

.home .navbar .logo{
	position: relative;
	
}
.home .navbar .logo img{
	width: 100px;
}

.home .navbar .navbar-links{
	list-style: none;
	display: flex;
	gap: 1.5rem;
}


.navbar .navbar-links li a{
	text-decoration: none;
	color: var(--heading-clr);
	font-size: 1.3rem;
	transition: color 0.3s;
}
.navbar .navbar-links li a::after{
    content: '';
    width: 0%;
    height: 3px;
    background: #f76250;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.navbar .navbar-links li a:hover{

	color: goldenrod;
}
.navbar .navbar-links li a:hover:after{
	width: 100%;
}


.navbar .hamburger-btn{
	min-width: 29px;
	height: 29px;
	width: 29px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	/* background-color: lightgreen; */
	display: none;
}
.navbar .hamburger-btn span{
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--heading-clr);
	border-radius: 5px;
	transition: all 0.4s;
}
.navbar .hamburger-btn span::before,
.navbar .hamburger-btn span::after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	background-color: var(--heading-clr);
	transition: all 0.4s;
}
.navbar .hamburger-btn span::before{
	transform: translateY(-9px);
}
.navbar .hamburger-btn span::after{
	transform: translateY(9px);
}

.home .banner{
	position: relative;
	width: 100%;
	min-height: calc(100vh - 80px);
	/* top: 80px; */
	padding: 0px 10%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	z-index: 1;
}
.home .banner .banner-text{
	flex-basis: 100%;
}
.banner .banner-text h3{
	position: relative;
	display: inline-block;
	color: var(--text-clr);
	font-size: calc(16px + 0.5vw);
	font-weight: 400;
	cursor: pointer;
}
.banner .banner-text h3::before{
	position: relative;
	content: '';
	display: inline-block;
	width: 30px;
	height: 1px;
	background-color: var(--text-clr);
	margin-right: 10px;
	margin-bottom: 6px;
	transition: width 0.5s;
}
.banner .banner-text h3:hover::before{
	width: 45px;
}
.banner .banner-text h1{
	font-size: calc(36px + 1.5vw);
	font-weight: 500;
	color: var(--heading-clr);
	margin: 10px 0px 15px;
}
.banner .banner-text p{
	font-size: 15px;
	color: var(--text-clr);
	line-height: 1.4;
	max-width: 600;
}
.banner .banner-text .buttons-wrapper{
	margin-top: 25px;
}
.banner-text .buttons-wrapper .learn-more-btn{
	margin-left: 8px;
	background-color: transparent;
	color: var(--heading-clr);
}
.banner-text .buttons-wrapper .learn-more-btn:hover{
	background-color: var(--heading-clr);
	color: var(--light-grey-bg);
}




section.services{
	width: 100%;
	padding: 80px 8% 40px;
}
.services .services-contents,#hidden-container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;

}
.services-contents .service-box{
	flex-basis: calc(calc(100% / 3) - 2%);
	padding: 25px 20px;
	cursor: pointer;
	transition: all 0.3s;
	background: #fff3f3;
	box-shadow: 5px 5px 10px rgb(249, 165, 165);
	backdrop-filter: blur(4px);
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
}
.services-contents .service-box:hover{
	transform: scale(1.02);
}
.service-box .service-box-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.service-box-top .service-icon{
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: var(--primary-clr);
	outline: 1px solid var(--primary-clr);
	outline-offset: 8px;
}
.service-box-top .service-icon i{
	font-size: 20px;
	color: var(--heading-clr);
}
.service-box-top h3{
	font-size: 14px;
	font-weight: 400;
	color: var(--text-clr);
	text-transform: uppercase;
}
.service-box .service-desc{
	margin-top: 25px;
}
.service-box .service-desc h2{
	margin-bottom: 10px;
	color: var(--heading-clr);
	font-size: calc(18px + 0.2vw);
}
.service-box .service-desc p{
	font-size: 15px;
	line-height: 1.4;
	color: var(--text-clr);
}
.service-box:nth-child(1) .service-icon{
	background-color: #eddfde;
	outline-color: #eddfde;
}
.service-box:nth-child(1) .service-icon i{
	color: #f76250;
}
.service-box:nth-child(2) .service-icon{
	background-color: #d7e8de;
	outline-color: #d7e8de;
}
.service-box:nth-child(2) .service-icon i{
	color: #2f9355;
}
.service-box:nth-child(3) .service-icon{
	background-color: #e0dfed;
	outline-color: #e0dfed;
}
.service-box:nth-child(3) .service-icon i{
	color: #5a49f3;
}

#readmore-btn,#lessmore-btn{
	margin-top: 2rem;
}

.hide-btn{
	display: none;
}
.show-btn{
	display: block;
}
/*   === Services Section Ends ===   */

/*   === About Section Starts ===   */
section.about{
	position: relative;
	width: 100%;
	padding: 80px 8% 70px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 50px 8%;
	background-color: var(--light-grey-bg);
}
.about .about-img{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.about .about-img > img{
	display: inline-block;
	widows: 345px;
	height: 445px;
	border-radius: 50% 50% 50% 50% / 35% 35% 35% 35%;
	object-fit: cover;
	outline: 1px solid var(--text-clr);
	outline-offset: 17px;
	margin: 17px;
}
.about-img .shapes{
	width: 345px;
	height: 445px;
	position: absolute;
	border-radius: 50% 50% 50% 50% / 35% 35% 35% 35%;
	margin: 17px;
}
.about-img .shapes img{
	position: absolute;
	top: -17px;
	right: 0px;
}
.about .about-text{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.about .about-text .section-header{
	margin-bottom: 15px;
}
.about .about-text p{
	font-size: 15px;
	color: var(--heading-clr);
	line-height: 1.4;
	margin-bottom: 10px;
}
.about .about-text ul.about-list{
	list-style: none;
}
.about-text ul.about-list li{
	position: relative;
	padding-left: 25px;
	margin: 10px 0px;
	font-size: 15px;
	color: var(--text-clr);
}
.about-text ul.about-list li::before{
	content: attr(check);
	font-size: 17px;
	font-weight: bold;
	position: absolute;
	left: 0px;
	top: -2px;
	color: var(--heading-clr);
}
.about-text .about-btn{
	margin-top: 25px;
}
/*   === About Section Ends ===   */


/*   === Testimonials Section Starts ===   */
.testimonials-section{
	width: 100%;
	padding: 0px 8%;
	margin-bottom: 2rem;
}
.testimonials-section .section-header{
	max-width: 700px;
	text-align: center;
	margin: 30px auto 40px;
}
.section-header h1{
	position: relative;
	font-size: 36px;
	color: var(--primary-clr);
}
.testimonials-container{
	position: relative;
}
.testimonials-container .testimonial-card{
	padding: 20px;

}
.testimonial-card .test-card-body{
	background-color: var(--card-clr);
	box-shadow: 2px 2px 20px rgba(0,0,0,0.12);
	padding: 30px;
	height: 280px;
	/* border: 2px solid red; */
}
.test-card-body .quote{
	display: flex;
	align-items: center;
}
.test-card-body .quote i{
	font-size: 45px;
	color: var(--heading-clr);
	margin-right: 20px;
}
.test-card-body .quote h2{
	color: var(--heading-clr);
}
.test-card-body p{
	margin: 10px 0px 15px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-clr);
}
.test-card-body .ratings{
	margin-top: 20px;
}
.test-card-body .ratings i{
	font-size: 17px;
	color: var(--primary-clr);
	cursor: pointer;
}
.testimonial-card .profile{
	display: flex;
	align-items: center;
	margin-top: 25px;
}
.profile .profile-image{
	width: 55px;
	height: 55px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 15px;
}
.profile .profile-image img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.profile .profile-desc{
	display: flex;
	flex-direction: column;
}
.profile-desc span:nth-child(1){
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-clr);
}
.profile-desc span:nth-child(2){
	font-size: 15px;
	font-weight: 500;
	color: var(--text-clr);
}
.owl-nav{
	position: absolute;
	right: 20px;
	bottom: -10px;
}
.owl-nav button{
	border-radius: 50% !important;
}
.owl-nav .owl-prev i,
.owl-nav .owl-next i{
	padding: 10px !important;
	border-radius: 50%;
	font-size: 18px !important;
	background-color: var(--card-clr) !important;
	color: var(--primary-clr);
	cursor: pointer;
	transition: 0.4s;
}
.owl-nav .owl-prev i:hover,
.owl-nav .owl-next i:hover{
	background-color: var(--primary-clr) !important;
	color: #e9e9e9;
}
.owl-dots{
	margin-top: 15px;
}
.owl-dots .owl-dot span{
	background-color: #434753 !important;
	padding: 6px !important;
}
.owl-dot.active span{
	background-color: var(--primary-clr) !important;
}
/*   === Testimonials Section Ends ===   */
/* ====== contact setion start */
.container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding: 2rem;
	background-color: #fafafa;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
  }
  
  .form {
	width: 100%;
	max-width: 820px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-form {
	background-color: #1abc9c;
	position: relative;
  }
  
  .circle {
	border-radius: 50%;
	background: linear-gradient(135deg, transparent 20%, #149279);
	position: absolute;
  }
  
  .circle.one {
	width: 130px;
	height: 130px;
	top: 130px;
	right: -40px;
  }
  
  .circle.two {
	width: 80px;
	height: 80px;
	top: 10px;
	right: 30px;
  }
  
  .contact-form:before {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	background-color: #1abc9c;
	transform: rotate(45deg);
	top: 50px;
	left: -13px;
  }
  
  form {
	padding: 2.3rem 2.2rem;
	z-index: 10;
	overflow: hidden;
	position: relative;
  }
  
  .title {
	color: #fff;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 0.7rem;
  }
  
  .input-container {
	position: relative;
	margin: 1rem 0;
  }
  
  .input {
	width: 100%;
	outline: none;
	border: 2px solid #fafafa;
	background: none;
	padding: 0.6rem 1.2rem;
	color: #fff;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	border-radius: 25px;
	transition: 0.3s;
  }
  
  textarea.input {
	padding: 0.8rem 1.2rem;
	min-height: 150px;
	border-radius: 22px;
	resize: none;
	overflow-y: auto;
  }
  
  .input-container label {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	padding: 0 0.4rem;
	color: #fafafa;
	font-size: 0.9rem;
	font-weight: 400;
	pointer-events: none;
	z-index: 1000;
	transition: 0.5s;
  }
  
  .input-container.textarea label {
	top: 1rem;
	transform: translateY(0);
  }
  
  .btn {
	padding: 0.6rem 1.3rem;
	background-color: #fff;
	border: 2px solid #fafafa;
	font-size: 0.95rem;
	color: #1abc9c;
	line-height: 1;
	border-radius: 25px;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	margin: 0;
  }
  
  .btn:hover {
	background-color: transparent;
	color: #fff;
  }
  
  .input-container span {
	position: absolute;
	top: 0;
	left: 25px;
	transform: translateY(-50%);
	font-size: 0.8rem;
	padding: 0 0.4rem;
	color: transparent;
	pointer-events: none;
	z-index: 500;
  }
  
  .input-container span:before,
  .input-container span:after {
	content: "";
	position: absolute;
	width: 10%;
	opacity: 0;
	transition: 0.3s;
	height: 5px;
	background-color: #1abc9c;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .input-container span:before {
	left: 50%;
  }
  
  .input-container span:after {
	right: 50%;
  }
  
  .input-container.focus label {
	top: 0;
	transform: translateY(-50%);
	left: 25px;
	font-size: 0.8rem;
  }
  
  .input-container.focus span:before,
  .input-container.focus span:after {
	width: 50%;
	opacity: 1;
  }
  
  .contact-info {
	padding: 2.3rem 2.2rem;
	position: relative;
  }
  
  .contact-info .title {
	color: #1abc9c;
  }
  
  .text {
	color: #333;
	margin: 1.5rem 0 2rem 0;
  }
  
  .information {
	display: flex;
	color: #555;
	margin: 0.7rem 0;
	align-items: center;
	font-size: 0.95rem;
  }
  
  .icon {
	width: 28px;
	margin-right: 0.7rem;
  }
  
  .social-media {
	padding: 2rem 0 0 0;
  }
  
  .social-media p {
	color: #333;
  }
  
  .social-icons {
	display: flex;
	margin-top: 0.5rem;
  }
  
  .social-icons a {
	width: 35px;
	height: 35px;
	border-radius: 5px;
	background: linear-gradient(45deg, #1abc9c, #149279);
	color: #fff;
	text-align: center;
	line-height: 35px;
	margin-right: 0.5rem;
	transition: 0.3s;
  }
  
  .social-icons a:hover {
	transform: scale(1.05);
  }
  
  .contact-info:before {
	content: "";
	position: absolute;
	width: 110px;
	height: 100px;
	border: 22px solid #1abc9c;
	border-radius: 50%;
	bottom: -77px;
	right: 50px;
	opacity: 0.3;
  }
  
  .big-circle {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: linear-gradient(to bottom, #1cd4af, #159b80);
	bottom: 50%;
	right: 50%;
	transform: translate(-40%, 38%);
  }
  
  .big-circle:after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	background-color: #fafafa;
	border-radius: 50%;
	top: calc(50% - 180px);
	left: calc(50% - 180px);
  }
  
  .square {
	position: absolute;
	height: 400px;
	top: 50%;
	left: 50%;
	transform: translate(181%, 11%);
	opacity: 0.2;
  }
  
  @media (max-width: 850px) {
	.form {
	  grid-template-columns: 1fr;
	}
  
	.contact-info:before {
	  bottom: initial;
	  top: -75px;
	  right: 65px;
	  transform: scale(0.95);
	}
  
	.contact-form:before {
	  top: -13px;
	  left: initial;
	  right: 70px;
	}
  
	.square {
	  transform: translate(140%, 43%);
	  height: 350px;
	}
  
	.big-circle {
	  bottom: 75%;
	  transform: scale(0.9) translate(-40%, 30%);
	  right: 50%;
	}
  
	.text {
	  margin: 1rem 0 1.5rem 0;
	}
  
	.social-media {
	  padding: 1.5rem 0 0 0;
	}
	.page-wrapper{
		background-image: none;
	}
  }
  
  @media (max-width: 480px) {
	.container {
	  padding: 1.5rem;
	}
  
	.contact-info:before {
	  display: none;
	}
  
	.square,
	.big-circle {
	  display: none;
	}
  
	form,
	.contact-info {
	  padding: 1.7rem 1.6rem;
	}
  
	.text,
	.information,
	.social-media p {
	  font-size: 0.8rem;
	}
  
	.title {
	  font-size: 1.15rem;
	}
  
	.social-icons a {
	  width: 30px;
	  height: 30px;
	  line-height: 30px;
	}
  
	.icon {
	  width: 23px;
	}
  
	.input {
	  padding: 0.45rem 1.2rem;
	}
  
	.btn {
	  padding: 0.45rem 1.2rem;
	}
  }
  
/*   === Footer Section Starts ===   */
section.footer{
	position: relative;
	width: 100%;
	padding: 70px 8% 50px;
	background-color: var(--primary-clr);
	display: grid;
	grid-template-columns: 3fr 3fr 3fr;
	grid-gap: 2rem;
}
.footer .footer-col{
	position: relative;
	z-index: 2;
}
.footer .footer-col .col-header{
	position: relative;
	margin-bottom: 20px;
}
.footer-col .col-header h2{
	font-size: calc(16px + 0.6vw);
	color: var(--heading-clr);
	font-weight: 500;
}
.footer-col-1 .col-header img{
	width: calc(60px + 0.8vw);
}
.footer-col-1 .col-desc p{
	font-size: 15px;
	color: var(--heading-clr);
	line-height: 1.3;
}
.footer-col-1 .col-desc p:nth-child(2){
	margin-top: 5px;
}
.footer-col-1 .col-desc .footer-social-media{
	margin-top: 30px;
}
.col-desc .footer-social-media a{
	color: var(--heading-clr);
	text-decoration: none;
	font-size: calc(12px + 0.4vw);
	margin-right: 15px;
	transition: color 0.3s;
}
.col-desc .footer-social-media a:hover{
	color: var(--light-grey-bg);
}
.footer-col-2 .col-desc{
	display: flex;
	flex-direction: column;
}
.footer-col-2 .col-desc .contact-row{
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
}
.footer-col-2 .col-desc .contact-row span{
	color: var(--heading-clr);
	font-size: 16px;
}
.footer-col-2 .col-desc .contact-row span:nth-child(1){
	color: var(--heading-clr);
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 2px;
}
.footer-col-3 .col-desc{
	display: flex;
	flex-direction: column;
}
.footer-col-3 .col-desc a{
	position: relative;
	text-decoration: none;
	color: var(--heading-clr);
	margin-bottom: 15px;
	align-self: flex-start;
	transition: all 0.3s;
	left: 15px;
}
.footer-col-3 .col-desc a::before{
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	background-color: var(--heading-clr);
	border-radius: 50%;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
}
.footer-col-3 .col-desc a:hover{
	letter-spacing: 2px;
}


/*   === Footer Section Ends ===   */

/*   === Copyrights Section Starts ===   */
section.copyrights{
	padding: 20px 8%;
	background-color: var(--primary-clr);
}
.copyrights .line{
	width: 100%;
	height: 1px;
	background-color: var(--text-clr);
}
.copyrights p{
	padding: 25px 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 15px;
	overflow-x: hidden;

}
.copyrights p span{
	color: var(--heading-clr);
}
/*   === Copyrights Section Ends ===   */



/*   === Media Query Starts ===   */
@media(max-width: 1068px){
	/* Home */
	.banner .banner-img > img,
	.banner .banner-img .shapes{
		width: 320px;
	}
	
}

@media(max-width: 968px){
	/* Home Section */
	
	.home .banner{
		flex-direction: column;
		align-items: flex-start;
		top: 150px;
		gap: 70px 0px;
	}
	.home .banner .banner-text,
	.home .banner .banner-img{
		flex-basis: 100%;
	}
	/* Ratings */
	.home .ratings{
		margin-top: 110px;
	}
	/* Services section */
	.services-contents .service-box{
		flex-basis: calc(100% / 2 - 2%);
	}
	.services-contents .service-box:not(:last-child){
		margin-bottom: 20px;
	}
	/* Footer Section */
	section.footer{
		grid-template-columns: 1fr 1fr;
	}
}

@media(max-width: 868px){
	/* Home Section */
	.navbar .hamburger-btn{
		display: flex;
		z-index: 101;
	}
	.navbar .hamburger-btn.active span,
	.navbar .hamburger-btn.active span::before,
	.navbar .hamburger-btn.active span::after{
		width: 100%;
	}
	.navbar .hamburger-btn.active span::before{
		transform: rotate(45deg) translateY(0px);
	}
	.navbar .hamburger-btn.active span::after{
		transform: rotate(-45deg) translateY(0px);
	}
	.navbar .hamburger-btn.active span{
		background-color: transparent;
	}
	.home .navbar .navbar-links{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		/*right: 0;*/
		right: -100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: var(--grey-bg);
		transition: right 0.3s;
		z-index: 100;
	}
	.home .navbar .navbar-links.active{
		right: 0px;
	}
	.navbar .navbar-links li{
		margin-right: 0px;
		margin-top: 20px;
	}
	.navbar .navbar-links li:first-child{
		margin-top: 150px;
	}
	.navbar .navbar-links li a{
		font-size: 22px;
	}
	.navbar .signin-btn{
		display: none;
	}

	/* About Section */
	section.about{
		grid-template-columns: 1fr;
	}
	.about .about-img{
		justify-content: flex-start;
	}
}

@media(max-width: 768px){
	/* Ratings */
	.home .ratings{
		flex-direction: column-reverse;
		gap: 30px 0px;
	}
	/* Facts */
	.facts .fact-contents .fact-box{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30px 0px;
	}
	/* Enroll Section */
	.enroll .enroll-contents{
		grid-template-columns: 1fr;
		grid-gap: 30px 0px;
		padding: 50px 30px;
	}
	/* Testimonials Section */
	.testimonials .section-header{
		width: 100%;
		margin-bottom: 70px;
	}
	.testimonial-card .test-card-body{
		background-color: var(--card-clr);
		box-shadow: 2px 2px 20px rgba(0,0,0,0.12);
		padding: 20px;
		height: 300px;
		/* border: 2px solid red; */
	}
}

@media(max-width: 668px){
	/* Partners Section */
	.partners h3{
		margin-right: 150px;
	}
	/* Footer Section */
	section.footer{
		grid-template-columns: 1fr;
		grid-gap: 40px 0px;
	}
	/* Copyrights Section */
	.copyrights p{
		flex-direction: column;
		align-items: center;
	}
}

@media(max-width: 568px){
	/* Services section */
	.services-contents .service-box{
		flex-basis: 100%;
	}
}

@media(max-width: 468px){
	/* Home Section */
	.home .banner .banner-img{
		width: 100%;
		justify-content: center;
	}
	.banner .banner-img > img{
		width: calc(100% - 34px);
		height: auto;
	}
	.banner .banner-img .shapes{
		width: 100%;
		height: calc(100% - 34px);
	}
	/* Partners Section */
	.partners h3{
		margin-right: 0px;
		margin-bottom: 80px;
	}
	/* About Section */
	.about .about-img{
		position: relative;
	}
	.about .about-img > img{
		width: calc(100% - 34px);
		height: auto;
	}
	.about .about-img .shapes{
		width: calc(100% - 34px);
		height: calc(100% - 34px);
	}
}



/* preloader */
#preloader {
	background: #3257B2 url('./Images/preloader/preloader.gif') no-repeat center center;
	height: 100vh;
	width: 100%;
	position: fixed;
	z-index: 9999;
	background-size: 50%;
}