/*********************************
5. Home
*********************************/

.home
{
	width: 100%;
	height: 145vh;
	padding-bottom: 30px;
	margin-bottom: 40px;
	box-sizing: border-box;
}

/*********************************
5.1 Hero Slider
*********************************/

.hero_slider_container
{
	width: 100%;
	height: 100%;
	direction: ltr;
}

main{
    position: relative;
    height: 145vh;
    width: 100vw;
    overflow: hidden;
	padding-bottom: 30px;
	margin-bottom: 40px;
	box-sizing: border-box;
}

.bg-img{
    position: absolute;
    z-index: 1;
    width: 100%;
}
.home-main{
    position: absolute;
    z-index: 2;
    width: 380px;
	top: 5%;
	float: left;
	left: 15%;
}
@keyframes slideFromBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.home-main.animated {
    animation: slideFromBottom 1s ease forwards;
}

.home2{
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 20%;
    border-radius: 25px;
    border: 1px solid #fff;
    width: 27%;
    bottom: 0px;
}
.text{
    position: absolute;
    z-index: 9;
    height: 255px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    pointer-events: auto;
    width: 45% !important;
    background-color: #ffffff;
    float: left;
    top: 38%;
    left: 13%;
    border-radius: 25px;
    border: 2px solid black;
    box-shadow: 1px 1px 10px 5px #00000078;
}
.three-boxes{
    position: absolute;
    float: right;
    width: 15%;
    top: 33.6%;
    right: 25%;
    z-index: 9;
    padding-left: 10px;
}

.three-boxes .col-lg-12{
	padding: 0;
}
@keyframes slideFromBottom2 {
    from {
        transform: translateY(200%);
    }
    to {
        transform: translateY(0) translateY(-50%);
    }
}
.text h2{
    font-weight: 100;
    font-size: 6.5rem;
    line-height: .88;
}
.text h1{
    font-weight: 800;
    font-size: 8rem;
    line-height: .88;
    font-family: 'DoranR';
}
.home-text{
    position: absolute;
    direction: rtl;
    bottom: 0px;
    width: 600px;
    color: #000000;
    left: 17%;
    text-align: justify;
    font-size: 20px;
    line-height: 45px;
}

/* 3D Parallax End */
/* 3D Parallax End */
/* 3D Parallax End */

.hero_slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensures the image doesn't overflow the slide */
}

.hero_slide_background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.hero_slide_background img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Similar behavior to background-size: cover */
    object-position: center center; /* Similar behavior to background-position: center center */
}

.hero_slide_background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero_slide_container
{
	width: 100%;
	height: 100vh;
}
.hero_slide_content
{
	width: 100vw;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
	margin-top: -100px;
}
.hero_slide_content h1
{
	position: relative;
	font-size: 58px;
	color: #000000;
	direction: rtl;
	top: 50%;
	transform: translateY(-50%);
}
.animated
{
	-webkit-animation-duration : 1s !important;
	animation-duration : 1s !important;
	-webkit-animation-delay : 500ms;
	animation-delay : 500ms;
}
.animate-out
{
	-webkit-animation-delay : 0ms;
	animation-delay : 0ms;
}

/*********************************
5.2 Hero Slider Navigation
*********************************/

.hero_slider_nav
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(calc(-50% + 30px));
	width: 58px;
	height: 58px;
	z-index: 9;
	cursor: pointer;
}
.hero_slider_nav svg{
	position: relative;
	width: 100%;
	font-size: 5rem;
	color: #ffffff;
}
.hero_slider_nav:hover svg
{
	color: #ffcc00;
}
.hero_slider_nav:hover span
{
	color: #FFFFFF;
}
.hero_slider_nav span
{
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	color: #121212;
	line-height: 1;
}
.hero_slider_left
{
	left: 4.32%;
}
.hero_slider_right
{
	right: 4.32%;
}

/*********************************
6. Hero Boxes
*********************************/

.hero_boxes
{
	width: 100%;
	height: 0px;
	z-index: 90;
	padding-top: 0px;
}
.hero_boxes_inner
{
	position: absolute;
	top: -93vh;
	left: 0;
	width: 100%;
}
.hero_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 80px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 10px;
	border: 1px solid #fff;
	margin: 10px !important;
	margin-left: 0 !important;
	box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.377);
}
.hero_box:first-of-type{
	margin-top: 0 !important;
}
.hero_box:hover
{
	background: #ffffff;
	border: 1px solid #000000;
}
.hero_box img {
    width: 62px;
    height: auto;
    margin-top: -6px;
}
.svg path
{
	fill: #ffcc00;
}
.hero_box svg {
    width: 52px;
    height: auto;
	margin: 20px;
	margin-left: 10px;
	fill: #E3001B;
	color: #E3001B;
}
.hero_box:hover svg path,
.hero_box:hover .hero_box_title,
.hero_box:hover .hero_box_link
{
	fill: #121212;
	color: #121212;
}
.hero_box_content {
    flex: 1; /* This allows it to take up the remaining space */
    padding-left: 0px;
    padding-top: 11px;
    margin-top: -6px;
	text-align: center;
}
.hero_box_title
{
	font-size: 18px;
	color: #FFFFFF;
	margin-bottom: 7px;
}
.hero_box_link
{
	font-size: 12px;
	text-transform: uppercase;
	color: #FFFFFF;
	padding-left: 3px;
}
.hero_box_link:hover
{
	color: #000000;
}

/*********************************
7. Page Section
*********************************/

.section_title h1
{
	display: block;
	color: #000000;
	padding-top: 24px;
}
.section_title h1::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px; /* Adjust the position to align with the text */
    left: 48%;
    transform: translateX(-50%);
	width: 91px;
    height: 35px;
    bottom: 0;
    z-index: 2;
    -webkit-transform: translate(-45px) rotate(-10deg);
    -ms-transform: translate(-45px) rotate(-10deg);
    transform: translate(-45px) rotate(-10deg);
    background-color: #E3001B;
    -webkit-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/line.svg);
    mask-image: url(../images/line.svg);
}


/*********************************
8. Buttons
*********************************/

.button
{
	cursor: pointer;
}
.button:hover
{
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.button a
{
	font-size: 14px;
	line-height: 48px;
	text-transform: uppercase;
}
.button_1
{
	width: 202px;
	height: 48px;
}

/*********************************
9. Popular
*********************************/

.card
{
	display: block;
	background: #f8f9fb;
	border: none;
	border-radius: 5px;
	transition: all .3s ease;
}
.card:hover{
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.616);
	scale: 1.03;
}
.card-img-top
{
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.card-body
{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.card-title
{
	margin-top: 15px;
}
.card-title a
{
	font-size: 22px;
	color: #000000;
	line-height: 1.2;
}
.card-title a:hover
{
	color: #000000;
}
.card-text
{
	font-size: 14px;
	color: #000000;
	margin-top: -12px;
}
.course_author_image
{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
}
.course_author_name span
{
	color: #000000;
}
.course_price span
{
	color: #FFFFFF;
	font-size: 18px;
	margin-top: 7px;
}

/*********************************
10. Register
*********************************/

.register
{
	width: 100%;
}
.register_section
{
	width: 100%;
	background: #ffcc00;
	padding-top: 156px;
	padding-bottom: 161px;
}
.register_content
{
	width: 522px;
}
.register_title
{
	color: #FFFFFF;
	margin-bottom: 16px;
	line-height: 1.63;
}
.register_title:last-child
{
	margin-bottom: 0px;
}
.register_title	span
{
	color: #000000;
}
.register_text
{
	color: #FFFFFF;
	margin-top: 32px;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: 0px;
}
.register_button
{
	background: #000000;
	margin-top: 65px;
}
.register_button a
{
	color: #FFFFFF;
}

/*********************************
11. Search
*********************************/

.search_section
{
	width: 100%;
	height: 100%;
	background: #ececec;
}
.search_content
{
	width: 522px;
}
.search_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.23;
}
.search_title
{
	color: #000000;
}

/*********************************
11.1 Search Form
*********************************/

.search_form
{
	margin-top: 57px;
}
.input_field
{
	width: 100%;
	height: 42px;
	background: #FFFFFF;
	box-sizing: border-box;
	border: solid 2px #FFFFFF;
	padding-right: 25px;
	margin-bottom: 24px;
}
input:last-of-type
{
	margin-bottom: 0px;
}
.input_field:focus
{
	outline: none !important;
	border: solid 2px #ffcc00;
}

.text_field{
	box-sizing: border-box;
    width: 100%;
    height: 189px;
    background: #FFFFFF;
    border: solid 2px #FFFFFF;
    padding-right: 25px;
    margin-bottom: 24px;
    padding-top: 10px;
}
.search_submit_button
{
	width: 100%;
	height: 48px;
	background: #ffcc00;
	color: #FFFFFF;
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 28px;
	border: none;
	cursor: pointer;
}
.search_submit_button:hover
{
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.search_submit_button:focus
{
	outline: solid 2px #FFFFFF;
}

/*********************************
12. Services
*********************************/

.services
{
	padding-bottom: 30px;
}
.services_row
{
	margin-top: 20px;
	direction: rtl;
	font-family: 'DoranT';
}
.service_item
{
	margin-bottom: 41px;
}
.service_item h3
{
	font-family: 'DoranT';
	font-size: 22px;
	color: #000000;
	margin-bottom: 13px;
}
.service_item p
{
	font-family: 'DoranT';
	font-size: 12px;
	color: #000000;
	max-width: 100%;
	margin-bottom: 0px;
	line-height: 20px;
	text-align: justify;
}
.icon_container
{
	position: relative;
	right: 50%;
	transform: translateX(50%);
	height: 70px;
	width: 70px;
	margin-bottom: 30px;
	border-radius: 50%;
	right: 50%;
	overflow: hidden;
	border: 1px solid #57575793;
}
.icon_container img
{
	height: 100%;
	position: relative;
}

/*********************************
13. Testimonials
*********************************/

.testimonials
{
	width: 100%;
	position: relative;
}
.testimonials_background_container
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.testimonials_background
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	opacity: 0.27;
}
.testimonials .section_title h1
{
	color: #000000;
}
.testimonials_slider_container
{
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 30px;
}
.testimonials_item
{
	width: 100%;
	padding-bottom: 30px;
}
.quote
{
	font-size: 36px;
	color: #ffcc00;
}
.testimonials_text
{
	color: #FFFFFF;
	margin-bottom: 0px;
	direction: rtl;
	font-family: 'DoranT';
}
.testimonial_user
{
	margin-top: 43px;
}
.testimonial_image
{
	width: 98px;
	height: 98px;
	border-radius: 50%;
	overflow: hidden;
}
.testimonial_image img
{
	width: 100%;
	height: auto;
}
.testimonial_name
{
	font-size: 16px;
	text-transform: uppercase;
	color: #f6af03;
	margin-top: 21px;
}
.testimonial_title
{
	font-size: 14px;
	color: #FFFFFF;
	margin-top: 6px;
}
.testimonials_slider .owl-dots
{
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: center;
	align-items: center;
}
.testimonials_slider .owl-dot span
{
	width: 8px !important;
	height: 8px !important;
	border: solid 2px #FFFFFF;
	background: transparent !important;
}
.testimonials_slider .owl-dot.active span
{
	width: 16px !important;
	height: 16px !important;
	border: none;
	background: #ffcc00 !important;
}

.swiper-container {
    padding-top: 20px;
    padding-bottom: 20px;
	overflow: hidden;
	padding: 0 29px;
}
.swiper-button-next, .swiper-button-prev {
    color: #000 !important;
}
.swiper-pagination-bullet {
    background: #000 !important;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: -5px !important;
}

.st-box{
	background-color: #F5F5F5;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	border-radius: 5px;
	padding: 10px 15px;
	direction: rtl;
}


/* Contact Form */

.contact_title{
	background-color: #E3001B;
	height: 35px;
	width: 51%;
	float: left;
	text-align: center;
	font-size: 24px;
	color: #ffffff;
	border-radius: 5px;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 20px;
}
.contact_title h1{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
}

.main_contact{
	text-align: right;
	margin-top: 130px;
}

.contact_form_container form input,
.contact_form_container form textarea{
	border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #C5C5C5;
    border-radius: 0px 0px 0px 0px;
	width: 100%;
}

.contact_form_container form textarea{
	height: 150px;
	margin-top: 10px;
}
.contact_form_container form button{
	position: relative;
	width: 100%;
	background-color: #E3001B;
	border-radius: 5px;
	border: none;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	height: 35px;
	color: #ffffff;
	left: 50%;
	transform: translateX(-50%);
	font-size: 24px;
}
/*********************************
14. Events
*********************************/

.event_items
{
	margin-top: 68px;
}
.event_item
{
	margin-bottom: 56px;
}
.event_item:last-child
{
	margin-bottom: 0px;
}
.event_date
{
	width: 131px;
	height: 131px;
	border: solid 2px #ffcc00;
	margin-bottom: 18px;
}
.event_day
{
	font-size: 48px;
	color: #ffcc00;
	margin-bottom: 1px;
	line-height: 1;
}
.event_month
{
	font-size: 16px;
	color: #ffcc00;
}
.event_name a
{
	font-size: 26px;
	color: #000000;
}
.event_name a:hover
{
	color: #ffcc00;
}
.event_location
{
	font-size: 14px;
	color: #000000;
	margin-top: 20px;
}
.event_content p
{
	color: #000000;
	margin-top: 21px;
	margin-bottom: 13px;
}

.event_image img
{
	height: 300px;
	position: relative;
	left: 50%;
    transform: translateX(-50%);
}

/* Slider */

.page_section.linear {
    position: relative; /* Required for positioning pseudo-element */
	margin-top: 40px;
}

.page_section.linear::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	opacity: .09;
    background-image: url(../images/pattern.jpg);
    background-color: rgba(0, 0, 0, 0.5); /* Use rgba to set opacity */
    z-index: -1; /* Ensure the overlay is positioned behind the content */
}

  .carousel {
	position: relative;
	margin: 40px auto 200px auto;
	display: block;
	max-width: 1020px;
	direction: ltr;
  }
  .carousel__container {
	margin: 0 auto 25px;
	display: block;
	perspective: 980px;
	position: relative;
	max-width: 780px;
	height: 420px;
  }
  .carousel__container img {
	display: inline-block;
	width: 50%;
	aspect-ratio: 1 / 1.5;
    object-fit: cover;
	position: absolute;
	backface-visibility: hidden;
	border-radius: 10px;
	box-shadow: -1px 2px 17px 3px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
	transition: 0.4s all;
	cursor: pointer;
	margin: 0 25%;
    filter: blur(calc(0.1333333333333333 * 1rem));
    transition: all 0.3s ease-out;
  }
  .carousel__container img.carousel__container--active {
	z-index: 4;
	opacity: 1;
	transform: none !important;
	filter: none;
  }
  .carousel__container img:hover:not(.carousel__container--active) {
	opacity: 0.9;
  }
  .carousel__arrow {
	top: 70%;
	position: absolute;
	width: 70px;
	height: 70px;
	text-decoration: none;
	transition: 0.4s all;
	z-index: 4;
	transform: translateY(-50%);
  }
  .carousel__arrow--right {
	right: 0;
  }
  .carousel__arrow svg{
	position: relative;
	width: 100%;
	font-size: 4.5rem;
	color: #ffcc00;
	height: auto;
  }
  .carousel__dot-nav {
	text-align: center;
  }
  .carousel__dot-nav li {
	margin: 0 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 3px solid #fff;
	border-radius: 100%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition: 0.4s all;
  }
  .carousel__dot-nav li:hover {
	background-color: #fff;
  }
  .carousel__dot-nav--active {
	background-color: #fff;
  }


  /* Popup */
  /* Popup */
  /* Popup */
  /* Popup */
  /* Popup */

  

.login-popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1099;
	background-color:rgba(0,0,0,0.6);
	visibility: hidden;
	opacity: 0;
	transition: all 1s ease;
}
.login-popup.show{
	visibility:visible;
	opacity: 1;
}
.login-popup .box{
	background-color:#ffffff;
	width: 750px;
	position: absolute;
	left: 50%;
	top:50%;
	transform:translate(-50%,-50%);
	display: flex;
	flex-wrap: wrap;
	opacity: 0;
	margin-left: 50px;
	transition: all 1s ease;

}
.login-popup.show .box{
	opacity: 1;
	margin-left: 0;
	border-radius: 10px;
}
.login-popup .box .img-area{
	flex:0 0 50%;
	max-width: 50%;
	position: relative;
	overflow: hidden;
	padding:30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.login-popup .box .img-area h1{
	font-size: 30px;
}
.login-popup .box .img-area h1 img{
	width: 150px;
}
.login-popup .box .img-area .img{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	animation: zoomInOut 7s linear infinite;
	z-index: -1;

}
@keyframes zoomInOut{
	0%,100%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.1);
	}
}
.login-popup .box .form{
	flex:0 0 50%;
	max-width: 50%;
	padding:40px 30px;
}

.login-popup .box .form h1{
	color:#000000;
	font-size: 30px;
	margin:0 0 30px;
}
.login-popup .box .form .form-control{
	height: 45px;
	margin-bottom: 30px;
	width: 100%;
	border:none;
	border-bottom:1px solid #cccccc;
	font-size: 15px;
	color:#000000;
}
.login-popup .box .form .form-control:focus{
	outline: none;
}
.login-popup .box .form label{
	font-size: 15px;
	color:#555555;
}
.login-popup .box .form .btn{
	width: 100%;
	background-color: #E3001B;
	margin-top:30px;
	height: 45px;
	border:none;
	border-radius: 25px;
	font-size: 15px;
	text-transform: uppercase;
	color:#ffffff;
	cursor: pointer;
}
.login-popup .box .form .btn.telegram{
	width: 100%;
	background-color: #2392ec;
	margin-top:10px;
}
.login-popup .box .form .btn:focus{
	outline: none;
}

.login-popup .box .form .close{
	position: absolute;
	left: 10px;
	top:0px;
	font-size: 30px;
	cursor: pointer;
}

/*responsive*/
@media(max-width: 767px){
	.login-popup .box{
		width: calc(80% - 30px);
		height: 70vh;
	}
	.login-popup .box .img-area{
		flex: 0 0 100%;
        max-width: 100%;
		height: 60%;
		border-bottom-right-radius: 0;
		border-top-left-radius: 10px;
	}
	.login-popup .box .form{
		flex: 0 0 100%;
        max-width: 100%;
		height: 40%;
		padding: 20px 15px;
	}
	.login-popup .box .form div{
	}
	.login-popup .box .form .form-control{
		height: 30px;
		margin-bottom: 10px;
	}
	.login-popup .box .form .form-control:last-of-type{
		margin-bottom: 0px;
	}
	.login-popup .box .form textarea.form-control{
		margin-bottom: 0px;
	}
	div.form-group:last-of-type{
		margin-bottom: 0px;
	}
	.login-popup .box .form .btn{
		margin-top: 5px;
		height: 25px;
		border:none;
		border-radius: 15px;
		font-size: 12px;
		text-transform: uppercase;
		color:#ffffff;
		cursor: pointer;
	}
	.login-popup .box .form h1{
		margin: 0 0 15px;
		font-size: 20px;
	}
	.login-popup .box .form .close{
		right: 10px;
		left: unset;
	}
}


/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */