@font-face {
	font-family: academyMainFont;
	src: url("./../../m3lmfonts/NeueFrutigerWorld-XtraBlk.ttf") format('truetype');
}
@font-face {
	font-family: academySubFont;
	src: url("./../../m3lmfonts/NATS-Regular.ttf") format('truetype');
}

@font-face {
	font-family: academyMainFontRtl;
	src: url("./../../m3lmfonts/URW DIN Arabic Black.ttf") format('truetype');
}
@font-face {
	font-family: academySubFontRtl;
	src: url("./../../m3lmfonts/URW DIN Arabic Medium.ttf") format('truetype');
}
html{
	direction:ltr;
}

:root{
	--academyMainFont: academyMainFont;
	--academySubFont: academySubFont;
	
	--academyMainFontRtl: academyMainFontRtl;
	--academySubFontRtl: academySubFontRtl;
}

body{
	background: #03172b !important;
	line-height: 1.5;
	overflow-y: scroll;
    overflow-x: hidden;
	margin: 0;
	display: unset;
}

body[dir=rtl] .heroPic {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

body[dir=rtl] .instructorPic {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

body[dir=rtl] .M3LMAcademyLandingMainCont {
	font-family: var(--academyMainFontRtl) !important;
}
body[dir=rtl] .TestoText, body[dir=rtl] .userTestoCountry, body[dir=rtl] .StatisticsItemName, body[dir=rtl] .courseLearnMore, body[dir=rtl] .courseDesc, body[dir=rtl] .middleButton, body[dir=rtl] .viewAllCourses, body[dir=rtl] .getStartedButton, body[dir=rtl] .heroSmallTextCont {
font-family: var(--academySubFontRtl) !important;
}
body[dir=rtl] .becomeInstructorText, body[dir=rtl] .heroBigText{
    line-height: 1.2;
}

body[dir=rtl] .heroPic{
	animation: pulseImageRTL 4s linear infinite alternate !important;
}
body[dir=rtl] .instructorPic{
	animation: pulseImageRTL 4s linear infinite alternate !important;
}

p{
	margin: 0;
}


.M3lmHeader {
	padding: 20px;
    padding-left: 3%;
    padding-right: 7%;
	gap: 20px;
}

.M3lmLogo {
    padding: 10px;
}

@keyframes pulseImageRTL {
	0% {
		transform: translateY(0) scaleX(-1);
	}
	10% {
		transform: translateY(5px) scaleX(-1.001);
	}
	20% {
		transform: translateY(10px) scaleX(-1.002);
	}
	30% {
		transform: translateY(15px) scaleX(-1.003);
	}
	40% {
		transform: translateY(20px) scaleX(-1.004);
	}
	50% {
		transform: translateY(15px) scaleX(-1.005);
	}
	60% {
		transform: translateY(10px) scaleX(-1.006);
	}
	70% {
		transform: translateY(5px) scaleX(-1.007);
	}
	80% {
		transform: translateY(-5px) scaleX(-1.008);
	}
	90% {
		transform: translateY(-10px) scaleX(-1.009);
		
	}
	100% {
		transform: translateY(-20px) scaleX(-1.01);
	}
}

@keyframes pulse {
	0% {
		transform: translateY(0) scale(1);
	}
	10% {
		transform: translateY(5px) scale(1.001);
	}
	20% {
		transform: translateY(10px) scale(1.002);
	}
	30% {
		transform: translateY(15px) scale(1.003);
	}
	40% {
		transform: translateY(20px) scale(1.004);
	}
	50% {
		transform: translateY(15px) scale(1.005);
	}
	60% {
		transform: translateY(10px) scale(1.006);
	}
	70% {
		transform: translateY(5px) scale(1.007);
	}
	80% {
		transform: translateY(-5px) scale(1.008);
	}
	90% {
		transform: translateY(-10px) scale(1.009);
		
	}
	100% {
		transform: translateY(-20px) scale(1.01);
	}
}

.landingSecondColor{
	color: var(--main-brand-color);
}

.sectionTopicAcademy{
	font-size: 5em;
    text-align: center;
}

.M3LMAcademyLandingMainCont{
	display: flex;
    flex-direction: column;
       padding-top: 60px;
	gap: 120px;
	align-items: center;
	font-family: var(--academyMainFont);
    color: #ffffff;
}

.heroCont{
	display: flex;
    row-gap: 20px;
    column-gap: 150px;
    align-items: flex-start;
    justify-content: space-between;
}

.heroTextSectionCont{
	display: flex;
    flex-direction: column;
	gap: 20px;
}

.heroBigText{
	font-size: 116px;
    line-height: 1.1;
	max-width: 490px;
}

.heroSmallTextCont{
	display: flex;
    column-gap: 50px;
    row-gap: 20px;
	font-family: var(--academySubFont);
}

.heroSmallText{
	font-size: 1.2em;
}

.heroGetStartedCont{
	display: flex;
    flex-direction: column;
    align-items: center;
	gap: 20px;
}

.getStartedButton{
	background: hsl(210deg 35.6% 27.98%);
    color: #ffffff;
    padding: 10px;
    width: 200px;
    text-align: center;
    border-radius: 30px;
    cursor: pointer;
	transition: 0.4s ease;
	font-family: var(--academySubFont);
	font-size: 1.3em;
}

.viewAllCourses{
	cursor: pointer;
	transition: 0.4s ease;
	font-family: var(--academySubFont);
	font-size: 1.3em;
}

.getStartedButton:hover{
	background: var(--main-brand-color);
	color: #222b2d;
}

.viewAllCourses:hover{
	color: #222b2d;
}

.heroPic{
	max-width: 35%;
	animation: pulse 4s linear infinite alternate;
}

.middleCont{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.middleText{
	font-size: 2.5em;
    text-align: center;
    padding-right: 5%;
    padding-left: 5%;
}

.middleButton{
	background: var(--main-brand-color);
    padding: 10px;
    width: 180px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
	transition: 0.4s ease;
	font-family: var(--academySubFont);
	font-size: 1.3em;
}
.middleButton:hover{
	background: #222b2d;
	color: var(--main-brand-color);
}

.middleLineAcademy{
	width: 40%;
    height: 1px;
    background: #b7cbcf;
    border-radius: 10px;
    opacity: 0.5;
}

.popularCoursesCont{
	display: flex;
    flex-direction: column;
    align-items: center;
	gap: 35px;
}

.coursesCont{
	display: flex;
    gap: 70px;
    flex-wrap: wrap;
}

.courseItemCont{
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 250px;
    text-align: center;
    gap: 25px;
    box-shadow: -1px 1px 25px -8px rgba(0, 0, 0, 0.22);
    padding: 40px;
    border-radius: 20px;
	box-sizing: unset !important;
}

.courseName{
	font-size: 1.5em;
}

.courseDesc{
	font-family: var(--academySubFont);
	font-size: 1.2em;
}

.courseLearnMore{
	transition: 0.4s ease;
	cursor: pointer;
	font-family: var(--academySubFont);
	font-size: 1.3em;
}
.courseLearnMore:hover{
	color: #222b2d;
}

.StatisticsCont{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}

.StatisticsItemsCont{
	display: flex;
    gap: 70px;
    flex-wrap: wrap;
	justify-content: center;
}

.StatisticsItem{
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 150px;
    text-align: center;
    box-shadow: -1px 1px 25px -8px rgba(0, 0, 0, 0.22);
    padding: 30px;
    border-radius: 20px;
	box-sizing: unset !important;
}

.StatisticsItemIcon{
	font-size: 3em;
}

.StatisticsItemName{
	font-family: var(--academySubFont);
	font-size: 1.3em;
}

.StatisticsItemNumber{
	font-size: 3em;
}




.testimonialCont{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}
.TestimonialsCont{
	display: flex;
    gap: 50px;
    align-items: center;
	flex-direction: column;
}
.testoPackCont{
	display: flex;
    gap: 50px;
    align-items: center;
	    justify-content: center;
}
.testoItem{
	display: flex;
    width: 30%;
    text-align: center;
    box-shadow: -1px 1px 25px -8px rgba(0, 0, 0, 0.22);
    padding: 30px;
    border-radius: 20px;
    box-sizing: unset !important;
    flex-direction: column;
    align-items: center;
	animation: pulse 10s linear infinite alternate;
}
.userTestoCont{
	display: flex;
    flex-direction: column;
    align-items: center;
	gap: 8px;
}
.userTestoImage{
	width: 96px;
    border-radius: 50%;
    background: var(--main-brand-color);
    padding: 3px;
}
.userTestoNameAndCountryCont{
	display: flex;
    flex-direction: column;
    align-items: center;
}
.userTestoCountry{
	font-family: var(--academySubFont);
    font-size: 1.3em;
}
.TestoText{
	font-family: var(--academySubFont);
    font-size: 1.2em;
}

.M3lmDotLinkCont{
	text-align:center;
	display: flex;
	justify-content: center;
	gap: 16px;
	position: relative;
	z-index: 5;
}

.M3lmDotLinkItem{
    width: 16px;
    height: 16px;
    background: #b5b5b5;
    border-radius: 50%;
	cursor: pointer;
}
.M3lmDotLinkItemActive{
	background: var(--main-brand-color);
}


.becomeInstructorCont{
	display: flex;
    row-gap: 20px;
    column-gap: 150px;
    justify-content: space-between;
	align-items: center;
}

.becomeInstructorTextSectionCont{
	height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.becomeInstructorText{
	font-size: 100px;
    width: 100px;
    line-height: 1.1;
}

.becomeInstructorSmallTextCont{
	font-size: 1.3em;
}

.becomeInstructorSmallText{
	transition: 0.4s ease;
	cursor: pointer;
}
.becomeInstructorSmallText:hover{
	color: var(--main-brand-color);
}

.instructorPic{
	max-width: 45%;
	animation: pulse 4s linear infinite alternate;
}



.custom-shape-divider-bottom-1725073164 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1725073164 svg {
    position: relative;
    display: block;
    width: calc(110% + 1.3px);
    height: 73px;
}

.custom-shape-divider-bottom-1725073164 .shape-fill {
    fill: #C6DCE5;
}

.shapeContAcademyFooter{
	position: relative;
    width: 100%;
    height: auto;
}

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

.academyBackgroundBall{
	width: 1000px;
    height: 1000px;
    background: #0088ff0d;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    filter: blur(1px);
	animation: oscillate 6s ease-in-out infinite; /* Apply both animations */
}

.academyBackgroundBall1{
    top: -10%;
    left: 60%;
}

.academyBackgroundBall2{
    top: 90%;
    left: -20%;
}

.academyBackgroundBall3{
	top: 200%;
    left: 70%;
}

.m3lmAcademyNameBackground{
	color: #0088ff0d;
    font-size: 12em;
    line-height: 0.9;
    position: absolute;
    z-index: -1;
    filter: blur(1px);
    display: flex;
    flex-direction: column;
	align-items: center;
}

.m3lmAcademyNameBackground1{
	top: -27%;
    left: -5%;
}
.m3lmAcademyNameBackground2{
	top: -27%;
    left: 88%;
}
.m3lmAcademyNameBackground3{
	top: 120%;
    left: 88%;
}
.m3lmAcademyNameBackground4{
	top: 220%;
    left: -17%;
}
.m3lmAcademyNameBackground5{
	top: 300%;
    left: 88%;
}

@media (max-width: 1200px) {
	.m3lmAcademyNameBackground, .academyBackgroundBall{
		display:none;
	}
	.heroCont {
	    flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}
	.heroBigText {
		font-size: 80px;
		max-width: unset;
	}
	.heroSmallTextCont {
	    flex-direction: column;
	}
	.heroPic {
		max-width: 80%;
	}
	.middleLineAcademy {
		width: 70%;
	}
	.courseItemCont {
		max-width: 100%;
	}
	.StatisticsItem {
	    max-width: 100%;
	}
	.becomeInstructorCont {
		flex-wrap: wrap;
		justify-content: center;
	}
	.instructorPic {
		max-width: 80%;
	}
	.becomeInstructorText {
		width: unset;
		text-align: center;
	}
	.becomeInstructorText {
		font-size: 50px;
	}
	.sectionTopicAcademy {
		font-size: 2.5em;
	}
	.becomeInstructorTextSectionCont {
		align-items: center;
	}
	.heroSmallText {
		text-align: center;
	}
	.testoItem {
    width: 100%;
	}
	.testoPackCont {
    flex-wrap: wrap;
	}
	.controlPanelImageCont {
    flex-direction: column;
    align-items: center;
}
.controlPanelImage {
           width: 100% !important;
}	
.controlPanelText {
    text-align: center;
	font-size: 1em;
}
}