/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2023 Abed Kahlout 
 */

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
	/**
   * COLORS
   */

	/* backgroud colors */
	--bg-white: hsl(0, 0%, 100%);
	--bg-graid-blue: -webkit-linear-gradient(top left, #15ac8bac, #2f2e96ac);
	--bg-graid-blue-white: -webkit-linear-gradient(top left, #15ac8bac, #ecececac);
	--bg-gray: #f7f9fb;
	--bg-green: #15ac8b;

	/* text color */
	--text-white: hsl(0, 0%, 100%);
	--text-green: #15ac8b;
	--text-gray: #c4c4c4;
	--text-blue: #2f2e96;

	/* border color */
	--border-gainsboro: 1px solid #15ac8b;

	/**
   * TYPOGRAPHY
   */

	/* font family */
	--ff-poppins: "Poppins", sans-serif;

	/* font size */
	--fontSize-1: 4.2rem;
	--fontSize-2: 3.6rem;
	--fontSize-3: 2.5rem;
	--fontSize-4: 2.4rem;
	--fontSize-5: 2rem;
	--fontSize-6: 1.6rem;
	--fontSize-7: 1.5rem;
	--fontSize-8: 1.2rem;
	--fontSize-8: 1rem;
	--fontSize-mobile: 12px;

	/* font weight */
	--weight-bold: 700;
	--weight-semiBold: 600;
	--weight-medium: 500;

	/**
   * SPACING
   */

	--spacing: 70px;

	/**
   * BOX SHADOW
   */

	--shadow-1: rgba(149, 157, 165, 0.2) 0px 8px 24px;

	/**
   * RADIUS
   */

	--radius: 25px;

	/**
   * TRANSITION
   */

	--transition-1: 0.8s all ease;
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "cairo";
}

li {
	list-style: none;
}

a,
img,
span,
input,
button {
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}
button {
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
}
html {
	font-family: var(--ff-poppins);
	font-size: var(--fontSize-8);
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	background-color: var(--bg-ocean-blue);
	line-height: 1.5;
	position: relative;
	overflow-x: hidden;
}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

/*-----------------------------------*\
  #PRELOADER
\*-----------------------------------*/
.preloader {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: var(--bg-graid-blue-white);
}

.preloader span {
	font-size: 24px;
	box-shadow: var(--shadow-1);
	background-color: var(--bg-graid-blue-white);
	font-weight: bold;
}

.loader {
	width: 100%;
	height: 4.8px;
	display: inline-block;
	position: relative;
	background: rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.loader::after {
	content: "";
	box-sizing: border-box;
	width: 0;
	height: 4.8px;
	background: var(--bg-graid-blue-white);
	position: absolute;
	top: 0;
	left: 0;
	animation: animFw 10s linear infinite;
}

@keyframes animFw {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/
#header {
	font-size: var(--fontSize-8);
	position: absolute;
	z-index: 9;
	top: 0;
	width: 100%;
	color: var(--text-white);
}
.logo {
	border-radius: 0 0 60px 60px;
}

/*-----------------------------------*\
  #HERO
\*-----------------------------------*/
.navbar {
	position: absolute !important;
	top: 90px;
	z-index: 9;
	right: 190px;
}
.nav-link {
	
	color: var(--text-white) !important;
}
/* mobile navbar */
.navbar-mobile {
	display: none;
}
/* .scrolled{
  background-color: white;
  color: black !important;
} */
/* Swiper Carousel */
.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;

}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
	color: #000 !important;
	background-color: var(--bg-white);
	border-radius: 10%;
	font-size: var(--fontSize-8) !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: var(--fontSize-8) !important;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
	left: 120px !important;
}
.swiper-button-prev {
	right: 120px !important;
}

.bg-section-hero {
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.bg-section-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background: var(--bg-graid-blue);
	width: 100%;
	height: 100%;
}

.carouse-text {
	color: var(--text-white);
	position: absolute;
	z-index: 9;
	top: 43%;
	right: 20%;
	width: 60%;
	font-size: 30px;
}

/*-----------------------------------*\
  #WE ARE
\*-----------------------------------*/

.we-are {
	text-align: center;
	margin: var(--spacing) 0;
}
.title h2 {
	color: var(--text-green);
	font-weight: var(--weight-bold);
}
.title p {
	color: var(--text-gray);
	font-weight: var(--weight-medium);
	font-size: var(--fontSize-8);
}

.we-are-desc {
	position: relative;
}
.we-are-desc::after {
	position: absolute;
	content: "";
	top: -60px;
	right: 0;
	width: 100%;
	height: 400px;
	z-index: -10;
	background: url(https://www.wusuladafi.com/front/images/why-after.svg)
		no-repeat center;
}
.we-num {
	background-color: var(--bg-gray);
	display: inline-block;
	padding: 10px 15px;
	border-radius: 50%;
	font-weight: var(--weight-bold);
	margin: 30px 0;
}
.we-img {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 30px;
	transition: var(--transition-1);
}
.we-img::after {
	content: "";
	right: 36%;
	position: absolute;
	width: 100px;
	height: 100px;
	z-index: -1;
	background-color: var(--bg-gray);
	border-radius: 5px;
	rotate: 45deg;
	top: -25px;
	transition: var(--transition-1);
}
.we-h2 {
	margin-top: 60px;
	margin-bottom: 20px;
	font-size: var(--fontSize-7);
	font-weight: var(--weight-medium);
}
.we-p {
	color: var(--text-gray);
	text-align: right;
	width: 100%;
	word-spacing: 0.6rem;
}
.we-are-desc-train {
	transition: var(--transition-1);
}
.we-are-desc-train:hover {
	color: var(--bg-green);
}
.we-are-desc-train:hover .we-img::after {
	rotate: 0deg;
	border: 0.4px solid var(--bg-green);
}
/*-----------------------------------*\
  #Trainning
\*-----------------------------------*/
#trainning {
	background-color: var(--bg-gray);
	padding: 70px;
	min-height: 110vh;
	margin: 20px 0;
	position: relative;
}
.details{
	text-align: center;
	background-color: var(--bg-green);
	color: white;
	cursor: pointer;
	padding: 5px;
	border-radius: 5px;
	margin-top: 10px;
	transition: var(--transition-1);
}
.details:hover{
	
	background-color: var(--bg-gray);
	box-shadow: var(--shadow-1);
	color: #000;
	border: var(--border-gainsboro);

}
.training-card {
	width: 100%;
	height: auto;
	padding: 15px;
	border-radius: 10px;
	transition: var(--transition-1);
}
.img-trainning {
	position: relative;
}
.training-price {
	position: absolute;
	top: 45%;
	right: 35%;
	padding: 7px;
	border-radius: 5px;
	background-color: white;
	z-index: +1;
}
.img-trainning img {
	border-radius: 10px 10px 0 0;
	filter: brightness(0.6);
}
.trinning-body {
	padding: 15px;
	border-radius: 0 0 10px 10px;
	background-color: var(--bg-white);
	transition: var(--transition-1);
}

.training-card:hover .trinning-body {
	box-shadow: var(--shadow-1);
}
.btn-all {
	color: var(--text-green);
}

/*-----------------------------------*\
  #BEST TEACHERS
\*-----------------------------------*/
.card-teachers {
	background-color: var(--bg-gray);
	padding: 20px;
	height: 220px;
	width: 250px;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
	border-radius: 25px;
}
.card-teachers img {
	border-radius: 50%;
}
.card-teachers:hover {
	border: var(--border-gainsboro);
}

/*-----------------------------------*\
  #TimeLine
\*-----------------------------------*/

.zigzag-timeline__item {
	/* Used to position the milestone */
	position: relative;

	/* Border */
	border-bottom: 1px solid #9ca3af;

	/* Take full width */
	width: 100%;
}
.green-box {
	background-color: #0a775f;
	position: absolute;
	width: 35px;
	height: 35px;
	top: 0;
	left: -6%;
	rotate: 45deg;
	border: 4px solid var(--bg-green);
}

.green-box2 {
	background-color: #0a775f;
	position: absolute;
	width: 35px;
	height: 35px;
	bottom: -16px;
	left: -6%;
	rotate: 45deg;
	border: 4px solid var(--bg-green);
}
.zigzag-timeline__milestone {
	/* Absolute position */
	position: absolute;
	top: 50%;

	/* Circle it */
	border-radius: 50%;
	height: 1rem;
	width: 1rem;

	/* Misc */
	background: #acafb4;
}

/* Styles for even items */
.zigzag-timeline__item:nth-child(2n) {
	border-right: 1px solid #acafb4;
	height: 120px;
}
.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
	right: 0;
	height: 120px;
	transform: translate(-50%, -50%);
}

/* Styles for odd items */
.zigzag-timeline__item:nth-child(2n + 1) {
	border-left: 1px solid #acafb4;
	height: 120px;
}
.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
	left: 0;
	height: 120px;

	transform: translate(50%, -50%);
}

.green-box-right {
	background-color: var(--bg-green);
	position: absolute;
	width: 30px;
	height: 30px;
	top: 40px;
	right: -15px;
	rotate: 45deg;
	text-align: center;
	border: 4px solid #5cc5ae;
}
.green-box-left {
	background-color: var(--bg-green);
	position: absolute;
	width: 30px;
	height: 30px;
	top: 40px;
	left: -15px;
	rotate: 45deg;
	text-align: center;
	border: 4px solid #5cc5ae;
}
.green-number {
	rotate: -45deg;
	color: white;
}
.time-line-desc {
	margin: 120px 0;
	line-height: 1.5rem;
}
.time-line-desc2 {
	margin: 240px 0;
	line-height: 1.5rem;
	margin-right: 10px;
}

.time-line-desc2 h3 {
	font-size: var(--fontSize-8);
	font-weight: 700;
	color: #6d6d6d;
}
.time-line-desc2 p {
	font-size: 13px;
	color: #6d6d6d;
}
.time-line-desc h3 {
	font-size: var(--fontSize-8);
	font-weight: 700;
	color: #6d6d6d;
}
.time-line-desc p {
	font-size: 13px;
	color: #6d6d6d;
}

/*-----------------------------------*\
  #PARTNERS
\*-----------------------------------*/
.cont-partner {
	width: 240px;
	height: 200px;
	border: 1px solid var(--bg-green);
	margin-top: 40px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-1);
}

/*-----------------------------------*\
  #Numbers
\*-----------------------------------*/
.numbers-container {
	background: var(--bg-graid-blue);
	display: flex;
	justify-content: space-evenly;
	min-height: 60vh;
	align-items: center;
	flex-wrap: wrap;
	margin: 80px 0;
}
.numbers {
	width: 250px;
	height: 250px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: white;
	font-weight: 700;
	object-fit: scale-down;
}
.numbers img {
	width: 100px;
	margin: 15px 0;
	background: white;

	height: 100px;
	border-radius: 50%;
	object-fit: scale-down;
}

/*-----------------------------------*\
  #Guarantee
\*-----------------------------------*/

.box-guar {
	border-radius: 25px;
	height: 150px;
	width: 150px;
	border: 1px solid #15ac8b;
	overflow: hidden;
}
.box-guar:hover {
	box-shadow: var(--shadow-1);
	border: 2px dashed #15ac8b;
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
footer {
	background-color: var(--bg-gray);
	min-height: 53vh;
	margin-top: 70px;
	padding: 70px 0;
}
footer h5 {
	color: var(--bg-green);
	margin: 0px 28px;
}
.linkfooter {
	margin: 15px 0;
	text-align: right;
	transition: var(--transition-1);
}
.linkfooter:hover {
	color: var(--bg-green);
}

/*-----------------------------------*\
  # NEW PAGE 
  * WE ARE PAGE
\*-----------------------------------*/
/*-----------------------------------*\
  #NEW PAGE - WE ARE PAGE
\*-----------------------------------*/
.title-we{
  color: #2f2e96;
  font-size: var(--fontSize-6);
  border-right: 4px solid var(--bg-green);
  font-weight: var(--weight-bold);
  padding-right: 15px;
  margin-top: 50px;
  margin-bottom: 20px;
}
.subtitle-we{
  color: rgb(169, 169, 169);
  font-size: var(--fontSize-8);
}
.left-side-container{
  margin-top: 130px;
}
.left-side{
  border-radius: 5px;
  box-shadow: var(--shadow-1);
}




/*-----------------------------------*\
  # NEW PAGE 
  * Training
\*-----------------------------------*/
/*-----------------------------------*\
  #NEW PAGE - Training
\*-----------------------------------*/
.filters{
	background-color: var(--bg-gray);
	padding: 10px;
	border-radius: 5px;
}
.titlefilter{
	border-right:4px solid var(--bg-green) ;
	padding-right: 10px;
	font-weight: bold;
}













/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

@media screen and (max-width: 950px) {
	/* 
  #HEADER
 */

	#header {
		font-size: var(--fontSize-mobile);
	}

	/* 
Hero
*/
	.carouse-text {
		font-size: 10px !important;
	}
	.logo {
		height: 50px;
		width: 50px;
	}
	/* 
  navbar
  */
	.navbar {
		display: none !important;
	}
	.swiper-button-prev,
	.swiper-rtl .swiper-button-next {
		left: 10px !important;
	}
	.swiper-button-prev {
		right: 10px !important;
	}
	.navbar-mobile {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		top: 38px;
		z-index: +99;
		right: 40px;
		gap: 4px;
		font-size: 10px;
	}
	.link-m {
		color: var(--text-white);
		text-decoration: none;
		margin: 0 5px;
	}
	/* 
* Training
*/
	#trainning {
		padding: 20px;
		background-color: var(--bg-gray);
	}
	.training-card {
		margin: 20px 0;
		width: 100%;
	}
	.best-teacher {
		margin-top: 100px;
	}
	.card-teachers {
		width: 100%;
		margin: 10px 0;
	}
	/* 
* TIMELINE
*/
	.zigzag-timeline__item {
		display: none;
	}
	.time-line-desc {
		margin: 40px;
	}
	.time-line-desc2 {
		margin: 40px;
	}
	/* 
*FOOTER
*/
	footer h5 {
		margin: 20px;
	}
}