/* Start Global Rules */
/*Developed By Aziz Berhouma*/
* {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Cairo", sans-serif;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

.container {
  padding: 0px 15px;
  margin: 0px auto;
}

	/* Small */
	@media (min-width: 768px) {
	  .container {
	    width: 750px;
	  }
	}
	/* Medium */
	@media (min-width: 992px) {
	  .container {
	    width: 970px;
	  }
	}
	/* Large */
	@media (min-width: 1200px) {
	  .container {
	    width: 1170px;
	  }
	}

.section-title {
	padding: 10px 20px;
	color: #000;
	border: 2px #000 solid;
	text-align: center;
	width: fit-content;
	text-transform: uppercase;
	margin: 0px auto;
	position: relative;
	z-index: 1;
	transition: ease 1s all;
}

.section-title:hover {
	color: white;
}

.section-title::after {
	content: "";
	height: 15px;
	width: 15px;
	background-color: var(--main-color);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: -40px;
	transform: translateY(-50%);
	animation: 1s ease;
	z-index: -1;
}

.section-title:hover::after {
	animation-name: titleAfter;
	animation-fill-mode: forwards;
}

.section-title::before {
	content: "";
	height: 15px;
	width: 15px;
	background-color: var(--main-color);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: -40px;
	transform: translateY(-50%);
	animation: 1s ease;
	z-index: -1;
}

.section-title:hover::before {
	animation-name: titleBefore;
	animation-fill-mode: forwards;
}

@keyframes titleAfter {
	0% {
		right: -40px;
	}
	50% {
		right: 0px;
	}
	100% {
		right: 0px;
		height: 100%;
		width: 60%;
		border-radius: 0%;
	}
}

@keyframes titleBefore {
	0% {
		left: -40px;
	}
	50% {
		left: 0px;
	}
	100% {
		left: 0px;
		height: 100%;
		width: 60%;
		border-radius: 0%;
	}
}

:root {
		--main-color: #2196f3;
    --main-color-alt: #1787e0;
    --main-padding: 100px;
    --section-background: #ececec;
}

/*End Global Rules*/

/*Start Header*/

header {
	background-color: white;
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
}

header .logo {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--main-color);
}

header .links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

header .links > li {
	display: flex;
	align-items: center;
	justify-content: center;
}

header .links > li:last-child:hover > .menu {
	display: flex !important;
}

header .links > li > a {
	font-weight: 400;
	color: #000;
	font-size: 1.1rem;
	transition: 0.7s ease all;
	position: relative;
	padding: 30px 25px;
}

header .links > li > a:hover {
	color: var(--main-color);
	background-color: #eee;
}

header .links > li > a::after {
	content: "";
	width: 0%;
	height: 4px;
	position: absolute;
	top: 0px;
	left: 0px;
	transition: width 0.4s ease;
	background-color: var(--main-color);
}

header .links > li > a:hover::after {
	width: 100%;
}

@media (max-width: 768px) {
	header .logo {
		width: 100%;
		text-align: center;
		padding: 25px 25px 10px 25px;
	}

	header .links {
		margin: 0px auto;
	}

	header .links > li > a {
		font-size: 0.9rem;
		padding: 15px 15px;
	}
}

header div.menu {
	background-color: white;
	border-bottom: var(--main-color) 4px solid;
	padding: 30px;
	display: flex;
	justify-content: center;
	column-gap: 20px;
	align-items: flex-start;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	transform: translateY(100%);
	z-index: 3;
	display: none;
}

header div.menu .menu-img {
	max-width: 450px;
}

header div.menu .menu-img img {
	width: 100%;
	height: auto;
}

@media (max-width: 992px) {
	header div.menu .menu-img {
		display: none;	
  }	
}

header div.menu ul {
	flex: 1;
}

header div.menu ul li {
	padding: 15px 0px;
	border-bottom: 1px #ddd solid;
	width: 100%;
	transition: 0.7s all ease;
}

header div.menu ul li:hover {
	background-color: #eee;
}

header div.menu ul li:last-child {
	border-bottom: none;
}

header div.menu ul li > a {
	color: var(--main-color);
	font-weight: 700;
}

header div.menu ul li > a i {
	margin-right: 10px;
}

@media (max-width: 768px) {
	header div.menu {
		padding: 30px 0px;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
  }	

  header .menu .menu-links li {
  	padding-left: 20px;
  }

  header .menu .menu-1 li:last-child {
  	border-bottom: 1px #ddd solid !important;
  }
}

/*End Header*/

/*Start Landing Page*/

.landing {
	background-color: #fff;
	position: relative;
	overflow: hidden;
	z-index: 1;
	height: calc(100vh - 80px);
	display: flex;
}

@media (max-width: 768px) {
	.landing {
		height: calc(100vh - 110px);
	}
}

.landing::after {
	content: "";
	position: absolute;
	background-color: var(--section-background);
	width: 100%;
	height: 100%;
	top: -15%;
	left: 0px;
	transform: skewY(-4deg);
	z-index: -1;
}

.landing .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.landing .container img {
	max-width: 550px;
	height: auto;
	animation: shake 2s infinite alternate;
}

@keyframes shake {
	0% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(-30px);
	}
}

@media (max-width: 992px) {
	.landing .container img {
		display: none;
	}
}

.landing .container .text {
	padding: 40px;
}

.landing .container .text h1 {
	font-size: 2rem;
	font-weight: 700;
}

.landing .container .text p {
	color: #666;
	line-height: 2;
	font-size: 1.5rem;
}

@media (max-width: 992px) {
	.landing .container .text {
		text-align: center;
	}

	.landing .container .text h1 {
		font-size: 1.5rem;
	}

	.landing .container .text p {
		font-size: 1.2rem;
	}
}

.landing .container > a {
	position: absolute;
	color: var(--main-color);
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	animation: 1s arrowShake infinite linear;
}

@keyframes arrowShake {
	0% {
		bottom: 10%;
	}
	25% {
		bottom: 5%;
	}
	50% {
		bottom: 10%;
	}
	100% {
		bottom: 5%;
	}
}

/*End Landing Page*/

/*Start Articles Section*/

section.articles {
	width: 100%;
	background-color: white;
	padding: var(--main-padding) 0px;
}

section.articles .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	grid-gap: 40px;
	margin-top: 100px;
}

section.articles .container .article {
	background-color: white;
	box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
	border-radius: 6px;
	overflow: hidden;
	transition: 0.4s all ease;
}

section.articles .container .article:hover {
	transform: translateY(-15px);
	box-shadow: 0 2px 15px rgb(0 0 0 / 20%);
}

section.articles .container .article img {
	width: 100%;
	height: auto;
}

section.articles .container .article .text {
	padding: 20px;
	line-height: 1.5;
}

section.articles .container .article .text h2 {
	font-size: 1.2rem;
	margin-bottom: 10px;
}

section.articles .container .article .text p {
	color: #666;
}

section.articles .container .article .read-more {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--main-color);
	position: relative;
}

section.articles .container .article .read-more::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #ddd;
	position: absolute;
	top: 0px;
	left: 0px;
}

section.articles .container .article .read-more a {
	color: var(--main-color);
	font-weight: 700;
}

section.articles .container .article .read-more i {
	animation: 0.5s linear alternate infinite;
}

section.articles .container .article:hover .read-more i {
	animation-name: ArticleArrow;
}

@keyframes ArticleArrow {
	0% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(-10px);
	}
	100% {
		transform: translateX(0px);
	}
}

/*End Articles Section*/

/*Start Gallery Section*/

section.gallery {
	padding: var(--main-padding) 0px;
	background-color: var(--section-background);
}

section.gallery .container {
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	grid-gap: 40px;
}

section.gallery .container .box {
	border: 15px solid white;
	overflow: hidden;
	position: relative;
}

section.gallery .container .box::after {
	content: "";
	position: absolute;
	width: 0%;
	height: 0%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	opacity: 0.1;
	animation: 0.2s linear;
}

section.gallery .container .box:hover::after {
	animation-name: WhiteLayer;
}

section.gallery .container .box:hover img {
	transform: scale(1.2) rotate(5deg);
}

@keyframes WhiteLayer {
	0% {
		width: 0%;
		height: 0%;
	}
	100% {
		width: 100%;
		height: 100%;
	}
}

section.gallery .container .box img {
	width: 100%;
	height: 100%;
	transition: 0.4s ease all;
}

/*End Gallery Section*/

/*Start Features Section*/

section.features {
	padding: var(--main-padding) 0px;
	background-color: white;
}

section.features .container {
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 40px;
}

section.features .container .feat {
	background-color: white;
	border: 1px #ddd solid;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	overflow: hidden
}

section.features .container .feat:hover > .feat-img {
	transform: rotate3d(0, 1, 0, 180deg) skewY(-15deg) translateY(-50px);
}

section.features .container .feat:hover > button::after {

}

section.features .container .feat .feat-img {
	overflow: hidden;
	transform: skewY(-15deg) translateY(-50px);
	transition: 0.4s all ease;
}

section.features .container .feat .feat-img::after {
	content: "";
	width: 100%;
	height: 100%;
	opacity: 0.5;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: skewY(180deg);
}

section.features .container .feat:hover > button {
	color: white;
}

section.features .container .feat:hover > button::after {
	width: 100%;
}

section.features .container .feat:nth-child(1) .feat-img::after {
	background-color: #f44036;
}

section.features .container .feat:nth-child(2) .feat-img::after {
	background-color: #009688;
}

section.features .container .feat:nth-child(3) .feat-img::after {
	background-color: #03a9f4;
}

section.features .container .feat .feat-img img {
	width: 100%;
	height: 100%;
	mix-blend-mode: normal;
}

section.features .container .feat .text {
	padding: 20px 30px;
	line-height: 2;
}

section.features .container .feat .text h2 {
	width: fit-content;
	margin: 0px auto 25px;
	font-size: 2.5rem;
	position: relative;
}

section.features .container .feat .text h2::after {
	content: "";
	width: 70%;
	height: 4px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
}

section.features .feat:nth-child(1) .text h2::after {
	background-color: #f44036;
}

section.features .feat:nth-child(2) .text h2::after {
	background-color: #009688;
}

section.features .feat:nth-child(3) .text h2::after {
	background-color: #03a9f4;
}

section.features .container .feat .text p {
	font-size: 1.2rem;
	color: #666;
}

section.features .container .feat button {
	border: 3px solid;
	padding: 10px 30px;
	background-color: white;
	border-radius: 5px;
	font-size: 1.2rem;
	margin: 20px auto;
	font-weight: 700;
	transition: 0.4s all ease;
	position: relative;
	z-index: 1;
}

section.features .feat:nth-child(1) button {
	color: #f44036;
	border-color: #f44036;
}

section.features .feat:nth-child(2) button {
	color: #009688;
	border-color: #009688;
}

section.features .feat:nth-child(3) button {
	color: #03a9f4;
	border-color: #03a9f4;
}

section.features .container .feat button::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 0%;
	left: 0px;
	top: 0px;
	z-index: -1;
	transition: 0.4s ease all;
}

section.features .container .feat:nth-child(1) button::after {
	background-color: #f44036; 
}

section.features .container .feat:nth-child(2) button::after {
	background-color: #009688; 
}

section.features .container .feat:nth-child(3) button::after {
	background-color: #03a9f4; 
}

/*End Features Section*/

/*Start Testimoials Section*/

section.testimonials {
	padding: var(--main-padding) 0px;
	background-color: var(--section-background);
}

section.testimonials .container {
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-gap: 40px;
}

section.testimonials .container .review {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	row-gap: 15px;
	position: relative;
}

section.testimonials .container .review img {
	position: absolute;
	border-radius: 50%;
	top: 0px;
	right: 0px;
	transform: translate(10%, -50%);
	max-width: 100px;
	height: auto;
	border: var(--section-background) 10px solid;
}

section.testimonials .container .review h2 {
	font-size: 1.2rem;
}

section.testimonials .container .review span {
	color: #666;
}

section.testimonials .container .review .stars .filled {
	color: #ffc107;
}

section.testimonials .container .review p {
	color: #666;
	line-height: 1.5;
}

/*End Testimoials Section*/

/*Start Team Members Section*/

section.team-members {
	background-color: white;
	padding: var(--main-padding) 0px;
}

section.team-members .container {
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-gap: 80px;
}

section.team-members .container .member {
	background-color: var(--section-background);
	padding: 20px;
	border-radius: 10px;
	min-height: 450px;
	position: relative;
	transition: 0.7s all ease;
}

section.team-members .container .member:hover {
	filter: grayscale(100%);
}

section.team-members .container .member .social-icons {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 20px;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

section.team-members .container .member .social-icons a {
	color: #666;
}

section.team-members .container .member .info {
	position: absolute;
	left: 20px;
	bottom: 20px;
	line-height: 1.5;
}

section.team-members .container .member .info h2 {
	color: var(--main-color);
}

section.team-members .container .member > img {
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translate(-10%, -60%);
	height: 60%;
	width: auto;
	border-radius: 10px;
	margin-left: 20px;
	transition: 0.7s ease all;
}

section.team-members .container .member:hover > img {
	filter: grayscale(100%);
} 

/*End Team Members Section*/

/*Start Services Section*/

section.services {
	background-color: var(--section-background);
	padding: var(--main-padding) 0px;
}

section.services .container {
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-gap: 40px;
}

section.services .container .serv {
	background-color: white;
	box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 12%);
	padding: 30px;
	text-align: center;
	position: relative;
	transition: 0.4s ease all;
	min-height: 220px;
}

section.services .container .serv:hover {
	transform: translateY(-10px);
}

section.services .container .serv::after {
	content: "";
	background-color: var(--main-color);
	position: absolute;
	width: 0%;
	height: 4px;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.4s ease all;
}

section.services .container .serv:hover::after {
	width: 100%;
}

section.services .container .serv > i {
	color: #ddd;
}

section.services .container .serv > h2 {
	color: var(--main-color);
	margin: 20px auto 30px;
}

section.services .container .serv > .details {
	position: absolute;
	width: 100%;
	background-color: #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	bottom: 0px;
	left: 0px;
}

section.services .container .serv > .details .num {
	padding: 10px 30px;
	font-size: 1.5rem;
	color: white;
	background-color: var(--main-color);
	font-weight: 700;
	position: relative;
}

section.services .container .serv > .details .num::after {
	content: "";
	position: absolute;
	width: 60%;
	height: 100%;
	background-color: #ddd;
	transform: skewX(-20deg) translateX(80%);
	right: 0px;
	top: 0px;

}

section.services .container .serv > .details a {
	padding: 10px 20px;
	color: var(--main-color);
}

/*End Services Section*/

/*Start Our Skills Section*/

section.our-skills {
	background-color: white;
	padding: var(--main-padding) 0px;
}

section.our-skills .container {
	margin-top: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

@media (max-width: 992px) {
	section.our-skills .container > .our-skills-img {
		display: none;
	}
}

section.our-skills .container .skills {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	row-gap: 20px;
	flex-grow: 1;
}

section.our-skills .container .skills span {
	font-weight: 700;
	font-size: 1.2rem;
	text-align: left;
}

section.our-skills .container .skills .level {
	background-color: #ddd;
	width: 100%;
	height: 40px;
	position: relative;
	margin-bottom: 10px;
}

section.our-skills .container .skills .level::after {
	content: "";
	background-color: var(--main-color);
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

section.our-skills .container .skills .level:nth-child(2)::after {
	width: 80%;
}

section.our-skills .container .skills .level:nth-child(4)::after {
	width: 85%;
}

section.our-skills .container .skills .level:nth-child(6)::after {
	width: 70%;
}

section.our-skills .container .skills .level:nth-child(8)::after {
	width: 80%;
}

section.our-skills .container .skills .level::before {
	content: "";
	background-color: white;
	border: 1px #ddd solid;
	padding: 5px;
	color: var(--main-color);
	position: absolute;
	font-weight: 700;
	font-size: 0.8rem;
	right: 0px;
	top: 0px;
	transform: translateY(-150%);
	border-radius: 3px;
}

section.our-skills .container .skills .level:nth-child(2)::before {
	content: "80%";
}

section.our-skills .container .skills .level:nth-child(4)::before {
	content: "85%";
}

section.our-skills .container .skills .level:nth-child(6)::before {
	content: "70%";
}

section.our-skills .container .skills .level:nth-child(8)::before {
	content: "80%";
}

/*End Our Skills Section*/

/*Start How It Works Section*/

section.how-it-works {
	background-color: var(--section-background);
	padding: var(--main-padding) 0px;
}

section.how-it-works .container {
	margin-top: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 40px;
	row-gap: 40px;
	column-gap: 40px;
}

section.how-it-works .container .steps {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	row-gap: 25px;
	flex: 1;
}

@media (max-width: 992px) {
	section.how-it-works .container .steps {
		width: 100%;
	}

	section.how-it-works .container > img {
		margin: 0px auto;
		max-width: 100%;
	}
}

section.how-it-works .container .steps .box {
	padding: 20px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 25px;
	background-color: #f6f5f5;
	border: 2px white solid;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}

section.how-it-works .container .steps .box::after {
	content: "";
	background-color: #ededed;
	width: 0%;
	height: 0%;
	transition: 0.2s ease all;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

section.how-it-works .container .steps .box:hover::after {
	width: 100%;
	height: 100%;
}

section.how-it-works .container .steps .box img {
	height: 70px;
	width: auto;
}

@media (max-width: 768px) {
	section.how-it-works .container .steps .box {
		flex-wrap: wrap;
	}

	section.how-it-works .container .steps .box .text {
		width: 100%;
		text-align: center;
	}

	section.how-it-works .container .steps .box img {
		margin: 0px auto;
	}
}

section.how-it-works .container .steps .box .text h2 {
	line-height: 2;
}

section.how-it-works .container .steps .box .text p {
	line-height: 2;
	color: #666;
	font-size: 1.2rem;
}

/*End How It Works Section*/

/*Start Latest Events Section*/

section.latest-events {
	background-color: white;
	padding: var(--main-padding) 0px;
	position: relative;
	z-index: 1;
}

section.latest-events::after {
	content: url("../images/dots-64f1b048acd27.webp");
	position: absolute;
	top: 200px;
	right: 0px;
	z-index: -1;
}

section.latest-events::before {
	content: url("../images/dots-64f1b048acd27.webp");
	position: absolute;
	bottom: 20%;
	left: 0px;
	z-index: -1;
}

section.latest-events .container {
	margin-top: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

section.latest-events .container > img {
	max-width: 450px
}

@media (max-width: 992px) {
	section.latest-events .container > img {
		display: none;
	}
}

section.latest-events .container .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex-grow: 1;
	row-gap: 25px;
	max-width: 100%;
}

section.latest-events .container .content .timer {
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
}

section.latest-events .container .content .timer > div {
	background-color: white;
	border: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	row-gap: 25px;
	transition: 0.4s ease all;
	border-radius: 10px;
}

section.latest-events .container .content .timer > div:hover {
	border: 1px solid var(--main-color);
}

section.latest-events .container .content .timer > div span:nth-child(1) {
	color: var(--main-color);
	font-size: 2rem;
	font-weight: 700;
	padding: 20px 20px 0px 20px;
}

section.latest-events .container .content .timer > div span:nth-child(2) {
	width: 100%;
	padding: 10px 10px;
	color: #666;
	font-size: 0.9rem;
	text-align: center;
	position: relative;
}

section.latest-events .container .content .timer > div span:nth-child(2)::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #ddd;
	position: absolute;
	top: 0px;
	left: 0px;
	transition: 0.4s all ease;
}

section.latest-events .container .content .text {
	line-height: 2;
	text-align: center;
}

section.latest-events .container .content .text h2 {
	font-size: 2rem;
}

section.latest-events .container .content .text p {
	font-size: 1.2rem;
	color: #666;
	font-weight: 400;
}

section.latest-events > form {
	padding: 20px;
	margin: 100px auto 0px;
	background-color: var(--section-background);
	border-radius: 40px;
	width: 600px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

section.latest-events > form input {
	padding: 20px;
	background-color: white;
	color: #666;
	border-radius: 25px;
	border: none;
	margin-right: 20px;
	flex-grow: 1;
}

section.latest-events > form input:focus {
	outline: none;
}

section.latest-events > form input::placeholder {
	transition: 0.4s ease all;
}

section.latest-events > form input:focus::placeholder {
	color: white;
}

section.latest-events > form button {
	padding: 20px;
	background-color: var(--main-color);
	color: white;
	border: none;
	border-radius: 25px;
	font-weight: 700;
	transition: 0.4s ease all;
}

section.latest-events > form button:hover {
	background-color: #1787e0;
}

@media (max-width: 768px) {
	section.latest-events > form {
		width: 90%;
		border-radius: 0px;
	}

	section.latest-events > form input,
	section.latest-events > form button {
		width: 100%;
		border-radius: 0px;
	}

	section.latest-events > form input {
		margin: 0px 0px 25px 0px;
	}
}

/*End Latest Events Section*/

/*Start Pricing Plans Section*/

section.pricing-plans {
	background-color: var(--section-background);
	padding: var(--main-padding) 0px;
	position: relative;
}

section.pricing-plans::after {
	content: url("../images/dots-64f1b048acd27.webp");
	position: absolute;
	right: 0px;
	top: 100px;
}

section.pricing-plans::before {
	content: url("../images/dots-64f1b048acd27.webp");
	position: absolute;
	left: 0px;
	bottom: 100px;
}

section.pricing-plans .container {
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-gap: 40px;
}

section.pricing-plans .container .plan {
	background-color: white;
	box-shadow: 0 12px 20px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 12%);
	position: relative;
	z-index: 1;
}

section.pricing-plans .container .plan::after {
	content: "";
	background-color: #ddd;
	opacity: 0.3;
	transition: 0.4s ease all;
	position: absolute;
	width: 0%;
	height: 50%;
	right: 0px;
	bottom: 0px;
	z-index: -1;
}

section.pricing-plans .container .plan::before {
	content: "";
	background-color: #ddd;
	opacity: 0.3;
	transition: 0.4s ease all;
	position: absolute;
	width: 0%;
	height: 50%;
	left: 0px;
	top: 0px;
	z-index: -1;
}

section.pricing-plans .container .plan:hover::after,
section.pricing-plans .container .plan:hover::before {
	width: 100%;
}

section.pricing-plans .container .popular > span {
	color: white;
	background-color: var(--main-color);
	font-weight: 700;
	padding: 10px 20px;
	position: absolute;
	top: 48px;
	right: -20px;
	transform: rotate(90deg);
}

@media (min-width: 992px) {
	section.pricing-plans .container .popular {
		transform: translateY(-20px);
	}
}

section.pricing-plans .container .plan .plan-type {
	padding: 20px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 25px;
}

section.pricing-plans .container .plan .plan-type h2 {
	font-weight: 700;
}

section.pricing-plans .container .plan .plan-type img {
	max-width: 80px;
	height: auto;
}

section.pricing-plans .container .plan .plan-type .price {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

section.pricing-plans .container .plan .plan-type .price span:nth-child(1) {
	font-size: 3rem;
	color: var(--main-color);
	font-weight: 700;
	margin-bottom: 5px;
}

section.pricing-plans .container .plan .plan-type .price span:nth-child(2) {
	color: #666;
}

section.pricing-plans .container .plan .benefits li {
	padding: 20px;
	position: relative;
}

section.pricing-plans .container .plan .benefits li::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #eee;
	position: absolute;
	top: 0px;
	left: 0px;
}

section.pricing-plans .container .plan .benefits li i {
	margin-right: 10px;
}

section.pricing-plans .container .plan .button {
	width: 100%;
	text-align: center;
	padding: 25px 0px 40px 0px;
}

section.pricing-plans .container .plan button {
	background-color: white;
	border: var(--main-color) 2px solid;
	color: var(--main-color);
	padding: 10px 20px;
	transition: 0.4s ease all;
}

section.pricing-plans .container .plan button:hover {
	color: white;
	background-color: var(--main-color);
}

/*End Pricing Plans Section*/

/*Start Top Videos Section*/

section.top-videos {
	background-color: white;
	padding: var(--main-padding) 0px;
}

section.top-videos .container {
	margin-top: 100px;
}

section.top-videos .container .video-player {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	border: 1px solid #ddd;
}

@media (max-width: 992px) {
	section.top-videos .container .video-player {
		flex-wrap: wrap;
	}

	section.top-videos .container .video-player .top-videos {
		width: 100%;
	}

	section.top-videos .container .video-player .video {
		row-gap: 20px;
	}
}

section.top-videos .container .video-player .top-videos .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background-color: #eee;
	font-weight: 700;
}

section.top-videos .container .video-player .top-videos ul {
	background-color: white;
	min-width: 270px;
} 

section.top-videos .container .video-player .top-videos ul li {
	padding: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	row-gap: 10px;
	position: relative;
	cursor: pointer;
	transition: 0.4s ease all;
	width: 100%;
}

section.top-videos .container .video-player .top-videos ul li:hover {
	background-color: #fafafa;
}

section.top-videos .container .video-player .top-videos ul li::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #ddd;
	top: 0px;
	left: 0px;
}

section.top-videos .container .video-player .top-videos ul li a {
	color: #000;
	transition: 0.4s ease all;
}

section.top-videos .container .video-player .top-videos ul li:hover > a {
	color: var(--main-color);
}

section.top-videos .container .video-player .video {
	padding: 10px;
	flex-grow: 1;
	background-color: #ddd;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

section.top-videos .container .video-player .video > img {
	max-width: 100%;
	height: auto;
}

section.top-videos .container .video-player .video .video-title {
	background-color: white;
	padding: 15px 20px;
	color: #000;
	width: 100%;
}

/*End Top Videos Section*/

/*Start Stats Section*/

section.stats {
	padding: var(--main-padding) 0px;
	background: url("../images/stats-64f1af67d1939.webp");
	position: relative;
	z-index: 1;
}

section.stats::after {
	content: "";
	background-color: #fff;
	opacity: 0.95;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
}

section.stats .container {
	margin-top: 70px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 40px;
}

section.stats h1 {
	text-align: center;
	font-size: 2.5rem;
	width: 100%;
}

section.stats .container .box {
	background-color: white;
	padding: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 15px;
	position: relative;
}

section.stats .container .box::after {
	content: "";
	height: 0%;
	width: 3px;
	background-color: var(--main-color);
	transition: 0.4s all ease;
	position: absolute;
	top: 0px;
	right: 0px;
}

section.stats .container .box::before {
	content: "";
	height: 0%;
	width: 3px;
	background-color: var(--main-color);
	transition: 0.4s all ease;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

section.stats .container .box:hover::after {
	height: 100%;
}

section.stats .container .box:hover::before {
	height: 100%;
}

section.stats .container .box span:nth-child(2) {
	font-size: 2.5rem;
	font-weight: 700;
}

section.stats .container .box span:nth-child(3) {
	color: var(--main-color);
	font-style: italic;
	font-weight: 700;
	font-size: 1.3rem;
}

/*End Stats Section*/

/*Start A Discount Section*/

section.discount {
	background-color: white;
	display: grid;
	grid-template-columns: repeat(2, 50%);
}

@media (max-width: 992px) {
	section.discount {
		grid-template: repeat(2, auto) / 100%;
	}
}

section.discount .content {
	text-align: center;
	padding: 70px 13%;
	background: url("../images/discount-background1-64f1b04d4ac60.webp") no-repeat top center;
	background-size: cover;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 20px;
}

section.discount .content h1 {
	color: white;
	font-size: 2.5rem;
}

section.discount .content p {
	font-size: 1.2rem;
	color: white;
	line-height: 1.7;
	font-weight: 300;
}

section.discount .content::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--main-color);
	opacity: 0.95;
	top: 0px;
	left: 0px;
	z-index: -1;
}

section.discount .content > img {
	max-width: 350px;
	height: auto;
}

section.discount .request {
	text-align: center;
	padding: 70px 13%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 20px;
}

section.discount .request h1 {
	font-size: 2.5rem;
}

section.discount .request > form {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: center;
	row-gap: 20px;
	width: 60%;
	min-width: 300px;
}

section.discount .request > form > input {
	padding: 20px;
	border: none;
	border-bottom: 1px #ddd solid;
	background-color: #f6f5f5;
}

section.discount .request > form > input:focus,
section.discount .request > form > textarea:focus {
	outline: none;
}

section.discount .request > form > textarea {
	height: 250px;
	padding: 20px;
	border: none;
	border-bottom: 1px #ddd solid;
	background-color: #f6f5f5;
	resize: none;
}

section.discount .request > form > input[type="submit"] {
	background-color: var(--main-color);
	border: none;
	color: white;
	font-weight: 700;
	transition: 0.4s ease all;
	cursor: pointer;
}

section.discount .request > form > input[type="submit"]:hover {
	background-color: #1787e0;
}

/*End A Discount Section*/

/*Start Footer*/

footer {
	width: 100%;
	background-color: #000;
	color: #f5f5f5;
}

footer .main .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 40px;
}

footer .main {
	padding: var(--main-padding) 0px;
}

footer .main .container .owner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

@media (max-width: 992px) {
	footer .main .container .owner {
		align-items: center;
		text-align: center;
	}
}

footer .main .container .owner h1 {
	font-size: 2.5rem;
}

footer .main .container .owner ul {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	column-gap: 15px;
	margin-bottom: 20px;
}

footer .main .container .owner ul li {
	width: 40px;
	height: 40px;
	background-color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s ease all;
}

footer .main .container .owner ul li:nth-child(1):hover {
	background-color: blue;
}

footer .main .container .owner ul li:nth-child(2):hover {
	background-color: cyan;
}

footer .main .container .owner ul li:nth-child(3):hover {
	background-color: red;
}

footer .main .container .owner ul li a {
	color: #eee;
	font-size: 1.2rem;
}

footer .main .container .owner p {
	color: #f5f5f5;
	line-height: 1.5;
	font-weight: 400;
}

footer .main .container .links li {
	padding: 15px 0px;
	position: relative;
	border-bottom: 1px #666 solid;
}

footer .main .container .links li:last-child {
	border-bottom: none;
}

footer .main .container .links li a {
	color: #ddd;
	transition: 0.4s all ease;
}

footer .main .container .links li a::before {
	font-family: "Font Awesome 5 Free";
    content: "\F101";
    font-weight: 900;
    margin-right: 10px;
    color: var(--main-color);
}

footer .main .container .links li:hover > a {
	margin-left: 15px;
	color: #f5f5f5;
}

footer .main .container .info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	row-gap: 15px;
}

footer .main .container .info > div {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 15px;
}

@media (max-width: 992px) {
	footer .main .container .info {
		align-items: center;
	}

	footer .main .container .info > div {
		flex-direction: column;
		align-items: center;
		text-align: center;
		row-gap: 10px;
	}
}

footer .main .container .info > div i {
	color: var(--main-color);
	font-size: 1.5rem;
}

footer .main .container .info > div p {
	line-height: 2;
	color: #ddd;
}

footer .main .container .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	grid-gap: 10px;
	height: fit-content;
}

footer .main .container .gallery img {
	max-width: 100%;
	height: auto;
	border: 3px #f5f5f5 solid;
}

footer .copyright {
	text-align: center;
	padding: 20px 0px;
	border-top: #666 solid 1px;
}


/*End Footer*/