/* Al-Quran Online Business HTML-5 Template */
/***
====================================================================
Attachment Css Files
====================================================================
***/
@import url('global.css');
@import url('header.css');
@import url('footer.css');
@import url('animate.css');
@import url('preloader.css');
@import url('jquery-ui.css');
@import url('font-awesome.css');
@import url('custom-animate.css');
@import url('magnific-popup.css');
@import url('flaticon_afbd3404a2e1104832d0.css');
@import url('odometer-theme-default.css');
@import url('jquery.bootstrap-touchspin.css');
/***
====================================================================
Main Slider Section
====================================================================
***/
.slider-one{
position:relative;
}
.slider-one .main-slider-prev{
position: absolute;
top: 35%;
left: 15px;
width: 50px;
height: 50px;
cursor: pointer;
line-height: 50px;
text-align: center;
display: inline-block;
border-radius: 50px 50px;
color: var(--white-color);
font-size: var(--font-16);
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
background-color: var(--main-color);
}
.slider-one .main-slider-prev:hover{
color: var(--white-color);
border-color: var(--main-color);
background-color: var(--main-color);
}
.slider-one .main-slider-next:hover{
color: var(--white-color);
border-color: var(--main-color);
background-color: var(--main-color);
}
.slider-one .main-slider-next::after,
.slider-one .main-slider-prev::after{
display: none;
}
.slider-one .main-slider-next{
position: absolute;
right: 15px;
width: 50px;
height: 50px;
cursor: pointer;
line-height: 50px;
text-align: center;
display: inline-block;
border-radius: 50px 50px;
color: var(--white-color);
font-size: var(--font-16);
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
background-color: var(--main-color);
}
.slider-one .swiper-slide{
position:relative;
overflow:hidden;
background-size:cover;
padding: 65px 0px 142px;
}
.slider-one_image-layer{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:1;
opacity: 0;
background-size:cover;
background-position: center center;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
-webkit-transition: all 1000ms linear;
-moz-transition: all 1000ms linear;
-ms-transition: all 1000ms linear;
-o-transition: all 1000ms linear;
transition: all 1000ms linear;
}
.slider-one .swiper-slide-active .slider-one_image-layer{
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slider-one_content{
position:relative;
z-index: 1;
}
.slider-one_content-inner{
position:relative;
text-align: center;
}
.slider-one_title{
font-weight: 600;
font-size: 16px;
color: var(--white-color);
text-transform: uppercase;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-one .swiper-slide-active .slider-one_title{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-one_heading{
color: var(--white-color);
text-transform: capitalize;
margin-top:var(--margin-top-20);
margin-bottom:var(--margin-bottom-25);
font-size: var(--font-34);
line-height: 40px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-one .swiper-slide-active .slider-one_heading{
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-one_text{
position: relative;
max-width: 580px;
line-height: 30px;
font-weight: 500;
margin: 0 auto;
font-size: var(--font-20);
color: var(--white-color);
margin-top:var(--margin-top-10);
margin-bottom:var(--margin-bottom-35);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-one .swiper-slide-active .slider-one_text{
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-one .slider-one_button{
display:inline-block;
padding: 0px 7px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-one .swiper-slide-active .slider-one_button{
-webkit-transition-delay: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
/***
====================================================================
Featured One
====================================================================
***/
.featured-one{
position: relative;
margin-top: 20px;
z-index: 2;
}
.featured-one .auto-container{
position: relative;
max-width: 1390px;
}
.featured-one .inner-container{
position: relative;
border-radius: 5px;
padding: 38px 90px 9px;
background-position: center center;
background-repeat: repeat-x;
background-color: var(--color-eight);
}
.feature-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.feature-block_one-inner{
position: relative;
padding-left: 135px;
font-weight: 500;
line-height: 30px;
min-height: 110px;
font-size: var(--font-20);
color: var(--color-nine);
padding-top: var(--padding-top-25);
}
.feature-block_one-icon{
position: absolute;
left: 0px;
top: 0px;
width: 110px;
height: 110px;
text-align: center;
line-height: 106px;
border-radius: 150px;
color: var(--color-six);
font-size: var(--font-64);
background-color: var(--color-two);
border: 2px solid var(--black-color);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
font-family: "flaticon_afbd3404a2e1104832d0";
}
.feature-block_one-inner:hover .feature-block_one-icon{
transform: rotateY(180deg);
}
/***
====================================================================
Welcome One
====================================================================
***/
.welcome-one{
position: relative;
padding: 110px 0px 70px;
}
.welcome-one .sec-title_title{
gap: 20px;
}
.welcome-one .sec-title_title span{
position: relative;
top: -10px;
}
.welcome-one .sec-title_heading{
margin-top: var(--margin-zero);
}
.welcome-one_pattern{
position: absolute;
left: 55px;
top: -60px;
width: 240px;
height: 495px;
background-repeat: no-repeat;
}
.welcome-one_pattern-two{
position: absolute;
right: 55px;
top: -60px;
width: 240px;
height: 240px;
background-repeat: no-repeat;
}
.welcome-one_content-column{
position: relative;
margin-bottom: 30px;
}
.welcome-one_content-outer{
position: relative;
padding-right: var(--padding-right-40);
}
.welcome-one_content{
position: relative;
margin-bottom: var(--margin-bottom-40);
padding-left: var(--padding-left-200);
}
.welcome-one_content-outer p{
position: relative;
opacity: 0.80;
color:var(--color-ten);
line-height:28px;
font-size:var(--font-16);
}
.welcome-one_content-image{
position: absolute;
left: 0px;
top: 5px;
overflow: hidden;
border-radius: 5px;
display: inline-block;
}
.welcome-one_learn{
position: relative;
font-weight: 600;
line-height: 30px;
font-size: var(--font-20);
color: var(--main-color);
margin-top: var(--margin-top-30);
font-family: 'Inter', sans-serif;
padding-top: var(--padding-left-5);
padding-left: var(--padding-left-85);
}
.welcome-one_learn-icon{
position: absolute;
left: 0px;
top: 0px;
width: 72px;
height: 72px;
line-height: 72px;
border-radius: 100px;
font-size: var(--font-34);
color: var(--color-two);
text-align: center;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: var(--main-color);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.welcome-one_learn:hover .welcome-one_learn-icon{
color: var(--main-color);
background-color: var(--color-two);
transform: rotateY(180deg);
}
.welcome-one_image-column{
position: relative;
margin-bottom: 30px;
}
.welcome-one_image-outer{
position: relative;
padding-left: var(--padding-left-80);
}
.welcome-one_image{
position: relative;
margin-right: -220px;
}
.welcome-one_image::before{
position: absolute;
content: '';
left: -15px;
width: 15px;
top: 90px;
bottom: 0px;
background-color: var(--main-color);
}
.welcome-one_image::after{
position: absolute;
content: '';
left: -15px;
width: 15px;
top: 50px;
height: 40px;
background-color: var(--color-two);
}
.welcome-one_image img{
position: relative;
overflow: hidden;
width: 100%;
border-radius: 10px;
object-fit: cover;
height: 516px;
}
.welcome-one_ameen{
position: absolute;
right: -170px;
top: 40px;
z-index: 1;
-webkit-animation: icon-bounce 0.8s ease-out infinite;
animation: icon-bounce 0.8s ease-out infinite;
}
.welcome-one_years{
position: absolute;
left: 15px;
bottom: 0px;
gap: 20px;
z-index: 1;
font-size: 24px;
font-weight: 400;
color: var(--color-eleven);
padding: 18px 70px 18px 20px;
}
.welcome-one_years::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background: #50bc84;
background: linear-gradient(to right, #50bc84 0%, #F3B815 60%);
clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 0% 50%);
}
/***
====================================================================
Service One
====================================================================
***/
.service-one{
position: relative;
padding: 85px 0px 155px;
background-position: center center;
background-repeat: no-repeat;
background-color: var(--color-twelve);
}
.service-one .sec-title{
margin-bottom: var(--margin-bottom-60);
}
/* Style Two */
.service-one.style-two{
background-color: inherit;
}
.service-one.style-two::before{
position: absolute;
content: '';
left: 0px;
top: -96px;
right: 0px;
bottom: 0px;
z-index: -1;
background: #2F443A;
background: linear-gradient(to right, #2F443A 40%, #F2CD64 100%);
}
.service-one.style-two .sec-title_title{
color: var(--white-color);
}
/* Style Three */
.service-one.style-three{
background-color: inherit;
}
.service-one.style-three::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background-color: var(--color-thirtysix);
}
.service-one.style-three .sec-title_title{
color: var(--white-color);
}
/* Service Block One */
.service-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.service-block_one.style-two .service-block_one-icon{
background: #50bc84;
background: linear-gradient(to right, #50bc84 0%, #F3B815 100%);
}
.service-block_one-inner{
position: relative;
border-radius: 5px;
height: 100%;
/* overflow: hidden; */
background-color: var(--white-color);
}
.service-block_one-upper{
position: relative;
padding: 40px 40px;
}
.service-block_one-icon{
position: absolute;
right: 40px;
top: 35px;
width: 77px;
height: 77px;
line-height: 77px;
text-align: center;
border-radius: 150px;
color: var(--color-six);
font-size: var(--font-50);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: var(--color-seven);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.service-block_one-heading{
position: relative;
font-weight: 500;
}
.service-block_one-heading a{
position: relative;
color: var(--color-nine);
}
.service-block_one-heading a:hover{
color: var(--main-color);
}
.service-block_one-text{
position: relative;
opacity: 0.80;
line-height:28px;
font-size:var(--font-18);
color: #000;
margin-top: var(--margin-top-30);
}
.service-block_one-big_icon{
position: absolute;
left: 25px;
bottom: 20px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.service-block_one-inner:hover .service-block_one-icon{
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
animation: icon-bounce 0.8s ease-out;
-webkit-animation: icon-bounce 0.8s ease-out;
}
.service-block_one-inner:hover .service-block_one-big_icon{
animation: icon-bounce 0.8s ease-out;
-webkit-animation: icon-bounce 0.8s ease-out;
}
.service-block_one-lower{
position: relative;
padding: 14.5px 45px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: var(--color-fourteen);
}
.service-block_one-inner:hover .service-block_one-lower{
background-color: var(--color-seven);
}
.service-block_one-more{
position: relative;
font-weight: 600;
display: flex;
gap: 10px;
font-size: var(--font-14);
color: var(--black-color);
align-items: center;
}
.service-block_one-more i{
position: relative;
line-height: 1em;
font-size: var(--font-18);
}
.service-block_one-more:hover{
color: var(--black-color);
}
.service-block_one.style-three .service-block_one-big_icon{
left: auto;
top: 20px;
right: 20px;
}
.service-block_one.style-three .service-block_one-icon{
left: 40px;
top: -39px;
border: 1px solid var(--main-color);
}
.service-block_one.style-three .service-block_one-inner{
overflow: inherit;
}
.service-block_one.style-three .service-block_one-lower{
border-radius: 0px 0px 6px 6px;
}
.service-block_one.style-three .service-block_one-heading{
margin-top: var(--margin-top-25);
}
/***
====================================================================
Students One
====================================================================
***/
.students-one{
position: relative;
margin-top: -80px;
padding-bottom: var(--padding-bottom-30);
}
/* Style Two */
.students-one.style-two{
margin-top: -130px;
padding-bottom: 0px;
}
.students-one.style-two .students-one_text{
color: var(--color-thirtyseven);
}
.students-one.style-two .students-one_title{
color: var(--color-fifteen);
}
.students-one.style-two .students-one_counter-count{
color: var(--main-color);
}
.students-one.style-two .students-one_counter-text{
color: var(--color-fifteen);
}
.students-one.style-two .students-one_counter-icon{
background-color: var(--white-color);
}
.students-one.style-two .inner-container{
background-color: var(--color-seven);
}
/* Style Three */
.students-one.style-three{
margin-top: var(--margin-zero);
padding-bottom: var(--padding-zero);
}
.students-one_pattern{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-position: center center;
background-repeat: no-repeat;
}
.students-one .auto-container{
position: relative;
max-width: 1390px;
}
.students-one .inner-container{
position: relative;
border-radius: 5px;
padding: 55px 140px 0px 150px;
background-color: var(--main-color);
}
.students-one_title-column{
position: relative;
}
.students-one_title-outer{
position: relative;
padding-bottom: var(--padding-bottom-40);
}
.students-one_title-box{
position: relative;
}
.students-one_title{
color: var(--white-color);
text-transform: capitalize;
text-align: center;
}
.students-one_text{
position: relative;
font-size: 16px;
line-height: 26px;
color: var(--white-color);
text-align: center;
margin-top: var(--margin-top-10);
padding-right: var(--padding-right-20);
}
.students-one_counter{
position: relative;
margin-top: var(--margin-top-35);
}
.students-one_counter-inner{
position: relative;
min-height: 117px;
padding-left: var(--padding-left-150);
}
.students-one_counter-icon{
position: absolute;
left: 36%;
top: 1px;
width: 117px;
height: 117px;
line-height: 117px;
text-align: center;
border-radius: 150px;
color: var(--color-six);
font-size: var(--font-64);
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
background-color: var(--color-seven);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.students-one_counter-inner:hover .students-one_counter-icon{
color: var(--main-color);
background-color: var(--white-color);
transform: rotateY(360deg);
}
.students-one_counter-count{
position: relative;
line-height: 46px;
font-weight: 600;
font-size: var(--font-64);
text-align: center;
color: var(--white-color);
}
.students-one_counter-text{
text-align: center;
position: relative;
font-size: var(--font-24);
color: var(--white-color);
}
.students-one_content-column{
position: relative;
z-index: 1;
}
.students-one_content-outer{
position: relative;
padding: 55px 45px 0px;
border-radius: 46px 46px 0px 0px;
background-color: var(--white-color);
}
.students-one_content-outer::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: -90px;
border-radius: 46px 46px;
background-color: var(--white-color);
}
.students-one_content-outer::after{
position: absolute;
content: '';
left: -12px;
top: -12px;
right: -12px;
height: 430px;
z-index: -1;
background: url(../images/background/students-one_pattern.png) no-repeat;
background-size: cover;
}
/* Top Rated */
.top-rated{
position: relative;
margin-bottom: var(--margin-bottom-45);
}
.top-rated_inner{
position: relative;
min-height: 116px;
padding-left: var(--padding-left-150);
}
.top-rated-icon{
position: absolute;
left: 0px;
top: 3px;
width: 119px;
height: 116px;
border-radius: 10px;
text-align: center;
font-weight:700;
font-size:var(--font-56);
color: var(--color-fifteen);
padding-top: var(--padding-top-20);
background-color: var(--color-seven);
border: 1px solid var(--black-color);
}
.top-rated_stars{
position: relative;
display: block;
font-size: var(--font-20);
margin-bottom: var(--margin-bottom-20);
}
.top-rated_heading{
position: relative;
font-weight: 500;
color: var(--color-fifteen);
text-transform: capitalize;
}
.top-rated_text{
position: relative;
font-weight: 400;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-thirteen);
margin-top: var(--margin-top-5);
}
/* Passout */
.passout{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.passout_inner{
position: relative;
min-height: 116px;
padding-left: var(--padding-left-150);
}
.passout-number{
position: absolute;
left: 0px;
top: 3px;
width: 119px;
height: 116px;
border-radius: 10px;
text-align: center;
font-weight:600;
font-size:var(--font-46);
color: var(--white-color);
padding-top: var(--padding-top-45);
background-color: var(--main-color);
border: 1px solid var(--black-color);
}
.passout_heading{
position: relative;
font-weight: 500;
color: var(--color-fifteen);
text-transform: capitalize;
}
.passout_text{
position: relative;
font-weight: 400;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-thirteen);
margin-top: var(--margin-top-5);
}
/***
====================================================================
Courses One
====================================================================
***/
.courses-one{
position: relative;
padding: 96px 0px 160px;
background-position: center center;
background-repeat: no-repeat;
background-color: var(--color-sixteen);
}
.courses-one .auto-container{
position: relative;
max-width: 1600px;
}
.courses-one.style-two{
padding-bottom: 205px;
}
.course-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.course-block_one-inner{
position: relative;
border-radius: 5px;
overflow: hidden;
background-color: var(--white-color);
}
.course-block_one-image{
position: relative;
overflow: hidden;
background-color: var(--main-color);
}
.course-block_one-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.course-block_one-inner:hover .course-block_one-image img{
opacity: 0.70;
transform: scale(1.05,1.05);
}
.news-pagination{
position: relative;
text-align: center;
margin-top: 30px;
}
.news-pagination span{
position: relative;
width: 12px;
height: 12px;
opacity: 1;
margin: 0px 5px;
border-radius: 50px;
display: inline-block;
border:2px solid transparent;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
background-color: rgba(var(--main-color-rgb), 1);
}
.course-block_one-content{
position: relative;
padding: 30px 45px;
}
.course-block_one-icon{
position: absolute;
left: 45px;
top: -38px;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
border-radius: 50px;
display: inline-block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: var(--white-color);
}
.course-block_one-inner:hover .course-block_one-icon{
-webkit-animation: icon-bounce 0.8s ease-out infinite;
animation: icon-bounce 0.8s ease-out infinite;
}
.course-block_one-heading{
position: relative;
font-weight: 500;
margin-top: var(--margin-top-5);
}
.course-block_one-heading a{
position: relative;
color: var(--color-nine);
}
.course-block_one-heading a:hover{
color: var(--main-color);
}
.course-block_one-list{
position: relative;
padding: 10px 0px;
display: block;
margin-top: var(--margin-top-25);
border-top: 1px solid var(--color-seventeen);
border-bottom: 1px solid var(--color-seventeen);
}
.course-block_one-list li{
position: relative;
font-size: 16px;
line-height: 20px;
font-weight: 600;
text-align: center;
color: var(--color-nine);
}
.course-block_one-list li span{
position: relative;
display: block;
color: var(--main-color);
}
.course-block_one-text{
position: relative;
font-weight: 400;
opacity: 0.80;
line-height: 26px;
font-size: var(--font-14);
color: var(--color-thirteen);
margin-top: var(--margin-top-20);
}
.course-block_one-buttons{
position: relative;
margin-top: var(--margin-top-25);
}
.course-block_one-study{
position: relative;
font-weight: 600;
border-radius: 5px;
padding: 10px 24px;
font-size: var(--font-14);
color: var(--white-color);
text-transform: capitalize;
background-color: var(--main-color);
}
.course-block_one-study:hover{
color: var(--black-color);
background-color: var(--color-seven);
}
.course-block_one-price{
position: relative;
font-weight: 400;
border-radius: 5px;
padding: 10px 20px;
display: inline-block;
font-size: var(--font-14);
color: var(--color-nine);
text-transform: capitalize;
background-color: var(--color-eighteen);
}
.course-block_one-price span{
position: relative;
font-size: var(--font-16);
color: var(--color-nine);
}
/***
====================================================================
CTA One
====================================================================
***/
.cta-one{
position: relative;
}
.cta-one .auto-container{
position: relative;
max-width: 1390px;
margin-top: -90px;
}
.cta-one_bg{
position: absolute;
left:0px;
top: 0px;
right: 0px;
bottom: 0px;
background-position: center center;
}
.cta-one .inner-container{
position: relative;
padding: 52px 90px;
border-radius: 5px;
overflow: hidden;
background: #50bc84;
background: linear-gradient(to right, #50bc84 0%, #F3B815 100%);
}
.cta-one_heading{
font-weight: 500;
font-size: 36px;
line-height: 42px;
color: var(--white-color);
text-transform: capitalize;
}
/***
====================================================================
Institute One
====================================================================
***/
.institute-one{
position: relative;
padding: 30px 0px 10px;
}
.institute-one.style-two{
padding-top: var(--padding-top-20);
}
.institute-one .auto-container{
max-width: 1200px;
}
.institute-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.institute-block_one-inner{
position: relative;
border-radius: 46px;
text-align: center;
padding: 30px 25px 25px;
border: 1px solid var(--black-color);
background-color: var(--color-nineteen);
}
.institute-block_one-bismillah{
position: absolute;
left: 0px;
top: 30px;
right: 0px;
height: 70px;
z-index: 1;
opacity: 0;
background-position: center center;
background-repeat: no-repeat;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.institute-block_one-inner:hover .institute-block_one-bismillah{
opacity: 1;
}
.institute-block_one-inner::before{
position: absolute;
content: '';
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
opacity: 0;
border-radius: 46px;
background: #2b9155;
transform: scale(0.2,1);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background: linear-gradient(to bottom, #2b9155 0%, #a7ae34 100%);
}
.institute-block_one-inner:hover::before{
opacity: 1;
transform: scale(1,1);
}
.institute-block_one-icon{
position: relative;
width: 104px;
height: 104px;
margin: 0 auto;
z-index: 2;
text-align: center;
line-height: 102px;
border-radius: 150px;
color: var(--color-six);
font-size: var(--font-64);
background-color: var(--color-two);
border: 2px solid var(--black-color);
font-family: "flaticon_afbd3404a2e1104832d0";
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.institute-block_one-inner:hover .institute-block_one-icon{
transform: rotateY(180deg);
}
.institute-block_one-heading{
position: relative;
margin-top: var(--margin-top-25);
}
.institute-block_one-heading a{
position: relative;
color: var(--color-nine);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.institute-block_one-inner:hover .institute-block_one-heading a{
color: var(--white-color);
}
.institute-block_one-inner:hover .institute-block_one-text{
color: var(--white-color);
}
.institute-block_one-text{
position: relative;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-thirteen);
margin-top: var(--margin-top-15);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.institute-block_one.color-two .institute-block_one-inner{
background-color: var(--color-twenty);
}
.institute-block_one.color-three .institute-block_one-inner{
background-color: rgba(var(--black-color-rgb), 0.04);
}
.institute-block_one.color-four .institute-block_one-inner{
background-color: var(--color-twentytwo);
}
/***
====================================================================
Testimonial One
====================================================================
***/
.testimonial-one{
position: relative;
padding: 72px 0px 55px;
background-size: cover;
margin-top: 41px;
}
.testimonial-one_image-column{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.testimonial-one_image{
position: relative;
margin-left: -80px;
margin-right: -12px;
}
.testimonial-one_image img{
position: relative;
width: 100%;
display: block;
overflow: hidden;
border-radius: 5px;
}
.testimonial-one_carousel-column{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.testimonial-one_carousel-outer{
position: relative;
padding-left: var(--padding-left-60);
}
.testimonial-block_one{
position: relative;
}
.testimonial-block_one-inner{
position: relative;
}
.testimonial-block_one-rating{
position: relative;
border-radius: 5px;
padding: 10px 16px;
display: inline-block;
background-color: var(--white-color);
}
.testimonial-block_one-rating span{
position: relative;
margin: 0px 0px;
display: inline-block;
color: var(--color-seven);
}
.testimonial-block_one-heading{
position: relative;
font-weight: 500;
font-size: var(--font-30);
color: var(--black-color);
margin-top: var(--margin-top-40);
}
.testimonial-block_one-text{
position: relative;
font-weight: 500;
line-height: 33px;
font-size: var(--font-20);
color: var(--color-twentythree);
margin-top: var(--margin-top-35);
padding-right: var(--padding-right-20);
}
.testimonial-block_one-author{
position: relative;
min-height: 99px;
font-size: var(--font-22);
color: var(--black-color);
margin-top: var(--margin-top-35);
padding-top: var(--padding-top-25);
padding-left: var(--padding-left-115);
}
.testimonial-block_one-author .author-image{
position: absolute;
left: 0px;
top: 0px;
width: 99px;
height: 99px;
overflow: hidden;
border-radius: 50%;
}
.testimonial-block_one-author span{
position: relative;
display: block;
border-radius: 150px;
font-size: var(--font-16);
color: var(--color-twentyfour);
margin-top: var(--margin-top-5);
}
.testimonial-one_ameen{
position: absolute;
right: 180px;
top: -60px;
}
/* Pagination */
.testimonial-one .testimonial-one_pagination{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
z-index:10;
text-align: right;
}
.testimonial-one .swiper-pagination-bullet{
position: relative;
width: 12px;
height: 12px;
opacity: 1;
background: none;
border-radius: 50px;
margin-left:var(--margin-left-10);
border:1px solid var(--black-color);
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
.testimonial-one .swiper-pagination-bullet:hover,
.testimonial-one .swiper-pagination-bullet.swiper-pagination-bullet-active{
opacity: 1;
border-color:var(--main-color);
background-color: var(--main-color);
}
/***
====================================================================
Price One
====================================================================
***/
.price-one{
position: relative;
padding: 110px 0px 80px;
}
.price-one .auto-container{
max-width: 1200px;
}
.price-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.price-block_one-inner{
position: relative;
border-radius: 46px;
padding: 33px 20px 35px;
border: 1px solid var(--color-nine);
background-color: var(--color-nineteen);
}
.price-block_one-price{
position: relative;
width: 104px;
height: 104px;
line-height: 28px;
border-radius: 150px;
font-weight: 600;
margin: 0 auto;
text-align: center;
font-size: var(--font-40);
color: var(--color-nine);
padding-top: var(--padding-top-25);
background-color: var(--color-seven);
border: 1px solid var(--color-nine);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.price-block_one-price sub{
position: relative;
line-height: 1em;
top: -2px;
font-size: var(--font-20);
}
.price-block_one-price span{
position: relative;
display: block;
font-size: var(--font-16);
}
.price-block_one-inner:hover .price-block_one-price{
animation: icon-bounce 0.8s ease-out;
-webkit-animation: icon-bounce 0.8s ease-out;
}
.price-block_one-heading{
position: relative;
text-align: center;
color: var(--color-nine);
margin-top: var(--margin-top-25);
}
.price-block_one-students{
position: relative;
border-radius: 5px;
list-style: disc;
font-size: var(--font-14);
color: var(--color-nine);
padding: 10px 10px 10px 30px;
margin-top: var(--margin-top-25);
background-color: var(--color-twentyfive);
}
.price-block_one-students::before{
position: absolute;
content: '';
left: 18px;
top: 20px;
width: 4px;
height: 4px;
border-radius: 50px;
background-color: var(--color-nine);
}
.price-block_one-list{
position: relative;
margin-top: var(--margin-top-25);
margin-left: var(--margin-left-50);
}
.price-block_one-list li{
position: relative;
font-size: 14px;
list-style: disc;
font-weight: 400;
margin-top: 2px;
color: var(--color-thirteen);
}
.price-block_one-button{
position: relative;
text-align: center;
margin-top: var(--margin-top-25);
}
.price-block_one-button .theme-btn{
padding: 9px 20px;
font-size: var(--font-14);
text-transform: capitalize;
}
.price-block_one-button .theme-btn:hover .text-two{
color: var(--black-color);
}
.price-block_one-button .theme-btn::before{
background-color: var(--color-seven);
}
/***
====================================================================
Gallery One
====================================================================
***/
.gallery-one{
position: relative;
padding: 50px 0;
}
.gallery-one .outer-container{
position: relative;
max-width: 1600px;
margin: 0 auto;
padding: 0px 15px;
}
.gallery-block_one{
position: relative;
}
.gallery-block_one-inner{
position: relative;
}
.gallery-block_one-image{
position: relative;
border-radius: 5px;
overflow: hidden;
background-color: var(--main-color);
margin-bottom: 15px;
}
.gallery-block_one-image img{
position: relative;
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.gallery-block_one-image::before{
position: absolute;
content: '';
left: 8px;
top: 8px;
right: 8px;
bottom: 8px;
z-index: 1;
opacity: 0;
border-radius: 5px;
border: 1px solid var(--white-color);
transform: scale(1,0.2);
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
}
.gallery-block_one-inner:hover .gallery-block_one-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.gallery-block_one-arrow{
position: absolute;
left: 50%;
width: 60px;
bottom: -80px;
height: 60px;
z-index: 1;
opacity: 0;
line-height: 65px;
border-radius: 50px;
text-align: center;
font-size: var(--font-16);
color: var(--color-six);
transform: translateX(-50%);
background-color: var(--color-seven);
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
font-family: "flaticon_afbd3404a2e1104832d0";
}
.gallery-block_one-inner:hover .gallery-block_one-arrow{
opacity: 1;
bottom: 30px;
}
.gallery-block_one-inner:hover .gallery-block_one-image::before{
opacity: 1;
transform: scale(1,1);
}
/***
====================================================================
News One
====================================================================
***/
.news-one{
position: relative;
padding: 110px 0px 70px;
}
.news-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.news-block_one-inner{
position: relative;
border-radius: 10px;
overflow: hidden;
}
.news-block_one-image{
position: relative;
overflow: hidden;
background-color: var(--main-color);
}
.news-block_one-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.news-block_one-image:before{
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.news-block_one-inner:hover .news-block_one-image:before{
-webkit-animation: shine 1s;
animation: shine 1s;
}
.news-block_one-inner:hover .news-block_one-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.news-block_one-content{
position: relative;
overflow: hidden;
padding: 25px 25px 30px;
border-radius:0px 0px 10px 10px;
border: 1px solid var(--color-twentysix);
}
.news-block_one-meta{
position: relative;
}
.news-block_one-meta li{
position: relative;
font-weight: 400;
display: inline-block;
font-size: var(--font-15);
color: var(--color-thirteen);
margin-right: var(--margin-right-20);
padding-left: var(--padding-left-25);
}
.news-block_one-meta li .icon{
position: absolute;
left: 0px;
top: 3px;
line-height: 1em;
}
.news-block_one-meta li:last-child{
margin-right: var(--margin-zero);
}
.news-block_one-meta li:last-child{
color: var(--color-twentyseven);
}
.news-block_one-heading{
position: relative;
text-transform: capitalize;
margin-top: var(--margin-top-15);
}
.news-block_one-heading a{
position: relative;
color: var(--black-color);
}
.news-block_one-heading a:hover{
color: var(--main-color);
}
.news-block_one-text{
position: relative;
line-height: 28px;
font-weight: 400;
font-size: var(--font-16);
color: var(--color-twentyeight);
margin-top: var(--margin-top-15);
font-family: 'Inter', sans-serif;
}
.news-block_one-info{
position: relative;
padding: 8px 10px;
border-radius: 5px;
margin-top: var(--margin-top-20);
border: 1px solid var(--color-twentysix);
}
.news-block_one-author{
position: relative;
min-height: 45px;
font-weight: 500;
color: var(--black-color);
font-size: var(--font-15);
text-transform: capitalize;
padding-top: var(--padding-top-10);
padding-left: var(--padding-left-55);
}
.news-block_one-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 50px;
}
.news-block_one-more{
position: relative;
font-weight: 600;
padding: 11px 24px;
font-size: var(--font-14);
color: var(--white-color);
text-transform: capitalize;
border-radius: 0px 5px 5px 0px;
background-color: var(--main-color);
font-family:var(--font-family-Lexend);
}
.news-block_one-more:hover{
color: var(--color-nine);
background-color: var(--color-seven);
}
/***
====================================================================
CTA Two
====================================================================
***/
.cta-two{
position: relative;
z-index: 2;
}
.cta-two .auto-container{
position: relative;
max-width: 1390px;
}
.cta-two_bg{
position: absolute;
left:0px;
top: 0px;
right: 0px;
bottom: 0px;
background-position: center center;
}
.cta-two .inner-container{
position: relative;
border-radius: 5px;
overflow: hidden;
background: #50bc84;
padding: 27px 90px 23px;
background: linear-gradient(to right, #50bc84 0%, #F3B815 100%);
}
/* CTA Two Heading */
.cta-two_heading{
font-weight: 500;
font-size: 36px;
line-height: 42px;
color: var(--white-color);
text-transform: capitalize;
}
.cta-two_icon{
position: relative;
width: 138px;
height: 138px;
line-height: 138px;
text-align: center;
border-radius: 150px;
color: var(--color-six);
font-size: var(--font-90);
background-color: var(--color-seven);
border: 1px solid var(--color-six);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.cta-two.style-two .cta-two_icon{
border:none;
line-height:inherit;
}
.cta-two.style-two .cta-two_heading{
font-size:42px;
line-height:46px;
font-weight:normal;
color:var(--black-color);
font-family: "Abril Fatface", serif;
}
.cta-two.style-two .theme-btn{
padding:14px 40px;
border-radius:50px;
}
/* Style Three */
.cta-two.style-three .inner-container{
border:2px solid var(--black-color);
padding:27px 40px 23px;
background:#CFDDD9;
}
.cta-two.style-three .auto-container{
max-width:1200px;
}
.cta-two.style-three .cta-two_icon{
line-height:92px;
border:2px solid var(--white-color);
background-color:var(--black-color);
}
.cta-two.style-three .cta-two_heading{
font-size:42px;
font-weight:600;
color:var(--black-color);
}
.cta-two.style-three .theme-btn{
border-radius:50px;
}
/* Style Four */
.cta-two.style-four .inner-container{
margin-top: -106px;
background:none;
border-radius:250px;
padding:27px 40px 23px;
border:2px solid var(--black-color);
background-color:var(--white-color);
}
.cta-two.style-four .auto-container{
max-width:1200px;
}
.cta-two.style-four .cta-two_icon{
line-height:92px;
border:2px solid var(--white-color);
background-color:var(--black-color);
}
.cta-two.style-four .cta-two_heading{
font-size:42px;
font-weight:600;
color:var(--black-color);
}
.cta-two.style-four .theme-btn{
border-radius:50px;
}
/***
====================================================================
Main Slider Two
====================================================================
***/
.slider-two{
position:relative;
}
.slider-two .slider_two-prev_arrow{
position: absolute;
top: 50%;
z-index: 1;
left: 30px;
width: 50px;
height: 50px;
opacity: 0;
cursor: pointer;
line-height: 50px;
text-align: center;
display: inline-block;
border-radius: 50px 50px;
color: var(--white-color);
font-size: var(--font-16);
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
background-color: var(--main-color);
}
.slider-two .slider_two-prev_arrow:hover{
color: var(--white-color);
border-color: var(--main-color);
background-color: var(--main-color);
}
.slider-two .slider_two-next_arrow:hover{
color: var(--white-color);
border-color: var(--main-color);
background-color: var(--main-color);
}
.slider-two .slider_two-next_arrow::after,
.slider-two .slider_two-prev_arrow::after{
display: none;
}
.slider-two .slider_two-next_arrow{
position: absolute;
right: 30px;
top: 50%;
width: 50px;
height: 50px;
opacity: 0;
z-index: 1;
cursor: pointer;
line-height: 50px;
text-align: center;
display: inline-block;
border-radius: 50px 50px;
color: var(--white-color);
font-size: var(--font-16);
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
background-color: var(--main-color);
}
.slider-two .swiper-slide{
position:relative;
overflow:hidden;
background-size:cover;
padding:385px 0px 220px;
}
.slider-two_image-layer{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:1;
opacity: 0;
background-size:cover;
background-position: center center;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
-webkit-transition: all 1000ms linear;
-moz-transition: all 1000ms linear;
-ms-transition: all 1000ms linear;
-o-transition: all 1000ms linear;
transition: all 1000ms linear;
}
.slider-two .swiper-slide-active .slider-two_image-layer{
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slider-two_content{
position:relative;
z-index: 1;
}
.slider-two_content-inner{
position:relative;
}
.slider-two_title{
font-weight: 600;
font-size: 16px;
color: var(--white-color);
text-transform: uppercase;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-two .swiper-slide-active .slider-two_title{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-two_heading{
color: var(--white-color);
text-transform: capitalize;
margin-top:var(--margin-top-20);
margin-bottom:var(--margin-bottom-25);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-two .swiper-slide-active .slider-two_heading{
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-two_text{
position: relative;
max-width: 580px;
line-height: 30px;
font-weight: 500;
font-size: var(--font-20);
color: var(--white-color);
margin-top:var(--margin-top-10);
margin-bottom:var(--margin-bottom-35);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-two .swiper-slide-active .slider-two_text{
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-two .slider-two_button{
display:inline-block;
padding: 0px 7px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-two .swiper-slide-active .slider-two_button{
-webkit-transition-delay: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-two_pagination{
position: absolute;
top: 40%;
z-index: 999;
left: auto !important;
right: 160px !important;
width: 18px !important;
}
.slider-two_pagination .swiper-pagination-bullet{
position: relative;
opacity: 1;
display: block;
background: none;
font-weight: 700;
line-height: 1em;
text-align: center;
font-size: 0px;
color: var(--white-color);
padding-right: 110px;
margin: 30px 0px !important;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
.slider-two_pagination .swiper-pagination-bullet::before{
position: absolute;
content: '';
left: 44px;
top: 20px;
width: 60px;
height: 1px;
opacity: 0;
background-color: var(--white-color);
}
.slider-two_pagination .swiper-pagination-bullet::after{
position: absolute;
content: '';
right: 0px;
top: 14px;
width: 12px;
height: 12px;
border-radius: 50px;
display: inline-block;
outline: 1px solid #ffffff;
outline-offset: 1px;
}
.slider-two_pagination .swiper-pagination-bullet:hover,
.slider-two_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
opacity: 1;
font-size: var(--font-50);
}
.slider-two_pagination .swiper-pagination-bullet:hover::before,
.slider-two_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{
opacity: 1;
}
/***
====================================================================
Welcome Two
====================================================================
***/
.welcome-two{
position: relative;
padding: 63px 0px 34px;
}
.welcome-two .sec-title_title{
gap: 20px;
}
.welcome-two .sec-title_title span{
position: relative;
top: -10px;
}
.welcome-two .sec-title_heading{
margin-top: var(--margin-zero);
}
.welcome-two_pattern{
position: absolute;
left: -170px;
bottom: 0px;
width: 538px;
height: 538px;
background-repeat: no-repeat;
}
.welcome-two_pattern-two{
position: absolute;
right: 0px;
bottom: -100px;
width: 422px;
height: 469px;
background-repeat: no-repeat;
}
.welcome-two_content-column{
position: relative;
margin-bottom: 30px;
}
.welcome-two_content-outer{
position: relative;
margin-top: -20px;
padding-left: var(--padding-left-20);
}
.welcome-two_content{
position: relative;
margin-bottom: var(--margin-bottom-40);
padding-left: var(--padding-left-200);
}
.welcome-two_content-outer p{
position: relative;
line-height:28px;
font-size:var(--font-16);
color:#000;
margin-top: var(--margin-top-10);
}
.welcome-two_content-image{
position: absolute;
left: 0px;
top: 5px;
overflow: hidden;
border-radius: 5px;
display: inline-block;
}
.welcome-two_middle-content{
position: relative;
}
.welcome-two_icon{
position: absolute;
right: 0px;
top: 30px;
}
.welcome-two_learn{
position: relative;
font-weight: 600;
min-height: 72px;
line-height: 30px;
font-size: var(--font-20);
color: var(--main-color);
margin-bottom: var(--margin-bottom-30);
font-family: 'Inter', sans-serif;
padding-top: var(--padding-left-5);
padding-left: var(--padding-left-85);
}
.welcome-two_learn-icon{
position: absolute;
left: 0px;
top: 0px;
width: 72px;
height: 72px;
line-height: 72px;
border-radius: 100px;
font-size: var(--font-34);
color: var(--white-color);
text-align: center;
background: #50bc84;
background: linear-gradient(to left, #50bc84 0%, #F3B815 100%);
font-family: "flaticon_afbd3404a2e1104832d0";
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.welcome-two_learn:hover .welcome-two_learn-icon{
transform: rotateY(180deg);
}
.welcome-two_image-column{
position: relative;
margin-bottom: 30px;
}
.welcome-two_image-outer{
position: relative;
padding-right: var(--padding-right-80);
}
.welcome-two_image{
position: relative;
}
.welcome-two_image::before{
position: absolute;
content: '';
right: -45px;
width: 15px;
top: 70px;
height: 220px;
background-color: var(--main-color);
}
.welcome-two_image::after{
position: absolute;
content: '';
right: -45px;
width: 15px;
top: 0px;
height: 123px;
background-color: var(--color-two);
}
.welcome-two_image img{
position: relative;
width: 100%;
border-radius: 10px;
}
.welcome-two_image-two{
position: absolute;
right: 25px;
bottom: 0px;
border-radius: 10px;
border: 10px solid #ffffff;
}
.welcome-two_ameen{
position: absolute;
left: 100px;
top: 5px;
z-index: 1;
}
.welcome-two_years{
position: absolute;
left: 15px;
right: 0px;
bottom: -40px;
gap: 20px;
z-index: 1;
font-size: 24px;
font-weight: 400;
color: var(--color-eleven);
padding: 18px 70px 18px 20px;
}
.welcome-two_years::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background: #50bc84;
background: linear-gradient(to right, #50bc84 0%, #ffd050 60%);
clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 0% 50%);
}
.welcome-two_middle-lower{
position: relative;
margin-top: var(--margin-top-40);
}
.welcome-two_thumb{
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
border-radius: 5px;
display: inline-block;
}
.welcome-two_title{
position: relative;
font-weight: 600;
color: var(--color-nine);
padding-top: var(--padding-top-10);
font-family: 'Inter', sans-serif;
}
.welcome-two_title::before{
position: absolute;
content: '';
left: 0px;
top:0px;
width: 47px;
height: 7px;
background-color: var(--main-color);
}
.welcome-two_title::after{
position: absolute;
content: '';
left: 0px;
top:0px;
width: 27px;
height: 7px;
background-color: var(--color-two);
}
.welcome-two .sec-title{
margin-bottom: var(--margin-bottom-25);
}
.welcome-two_dots{
position: absolute;
left: -130px;
top: -50px;
width: 240px;
height: 240px;
}
.welcome-two_dots-two{
position: absolute;
left: 0px;
bottom: -50px;
width: 240px;
height: 240px;
}
/* Course Block Two */
.course-block_two{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.course-block_two-inner{
position: relative;
border-radius: 5px;
overflow: hidden;
background-color: var(--white-color);
}
.course-block_two-image{
position: relative;
background-color: var(--main-color);
}
.course-block_two-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.course-block_two-inner:hover .course-block_two-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.course-block_two-content{
position: relative;
padding: 40px 40px 30px;
}
.course-block_two-study{
position: absolute;
left: 45px;
top: -27px;
font-weight: 600;
padding: 12px 25px;
text-align: center;
border-radius: 5px;
display: inline-block;
font-size: var(--font-14);
color: var(--white-color);
background-color: var(--main-color);
}
.course-block_two-study:hover{
color: var(--black-color);
background-color: var(--color-seven);
}
.course-block_two-heading{
position: relative;
font-weight: 500;
text-transform: capitalize;
margin-top: var(--margin-top-5);
}
.course-block_two-heading a{
position: relative;
color: var(--color-nine);
}
.course-block_two-heading a:hover{
color: var(--main-color);
}
.course-block_two-list{
position: relative;
padding: 10px 0px;
display: block;
margin-top: var(--margin-top-20);
border-top: 1px solid var(--color-seventeen);
border-bottom: 1px solid var(--color-seventeen);
}
.course-block_two-list li{
position: relative;
font-size: 16px;
line-height: 20px;
font-weight: 600;
text-align: center;
color: var(--color-nine);
}
.course-block_two-list li span{
position: relative;
display: block;
color: var(--main-color);
}
.course-block_two-lower{
position: relative;
border-radius: 5px;
margin-top: var(--margin-top-25);
background-color: var(--color-eighteen);
}
.course-block_two-author{
position: relative;
min-height: 40px;
font-size: var(--font-13);
color: var(--main-color);
margin-top: var(--margin-top-10);
margin-left: var(--margin-left-10);
padding-left: var(--padding-left-50);
}
.course-block_two-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
}
.course-block_two-author strong{
position: relative;
display: block;
font-weight: 500;
font-size: var(--font-16);
color: var(--color-nine);
}
.course-block_two-price{
position: relative;
font-weight: 500;
border-radius: 5px;
padding: 8px 15px;
text-align: center;
display: inline-block;
font-size: var(--font-16);
color: var(--color-nine);
text-transform: capitalize;
background-color: var(--color-seven);
}
.course-block_two-price span{
position: relative;
display: block;
font-size: var(--font-13);
color: var(--main-color);
}
.course-block_two-icon{
position: absolute;
right: 25px;
top: 28px;
}
.gallery-two{
position: relative;
}
.gallery-two.style-two{
position: relative;
padding-bottom: var(--padding-bottom-100);
}
.gallery-block_two{
position: relative;
}
.gallery-block_two-inner{
position: relative;
}
.gallery-block_two-image{
position: relative;
border-radius: 0px;
overflow: hidden;
}
.gallery-block_two-image img{
position: relative;
width: 100%;
display: block;
}
.gallery-block_two-arrow{
position: absolute;
left: 50%;
top: 50%;
width: 92px;
height: 92px;
z-index: 1;
opacity: 0;
line-height: 92px;
border-radius: 50px;
text-align: center;
font-size: var(--font-30);
color: var(--white-color);
transform: translateX(-50%) translateY(-50%) scale(1,0.1);
background-color: var(--color-seven);
outline: 1px solid var(--white-color);
outline-offset: 100px;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
font-family: "flaticon_afbd3404a2e1104832d0";
}
.gallery-block_two-arrow::before{
color: var(--color-six);
}
.gallery-block_two-arrow:hover::before{
color: var(--white-color);
}
.gallery-block_two-arrow:hover{
color: var(--white-color);
background-color: var(--main-color);
}
.gallery-block_two-inner:hover .gallery-block_two-arrow{
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1,1);
}
/***
====================================================================
Testimonial Two
====================================================================
***/
.testimonial-two{
position: relative;
padding: 110px 0px 110px;
background-position: center top;
background-repeat: repeat-x;
}
.testimonial-block_two{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.testimonial-block_two-inner{
position: relative;
padding: 50px 50px;
}
.testimonial-block_two-inner::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: #FBEFD0;
background: linear-gradient(to right, #FBEFD0 0%, #D8EFE4 100%);
}
.testimonial-block_two-rating{
position: relative;
border-radius: 5px;
padding: 10px 16px;
display: inline-block;
background-color: var(--white-color);
}
.testimonial-block_two-rating span{
position: relative;
margin: 0px 0px;
display: inline-block;
color: var(--color-seven);
}
.testimonial-block_two-heading{
position: relative;
font-weight: 500;
font-size: var(--font-30);
color: var(--black-color);
margin-top: var(--margin-top-40);
}
.testimonial-block_two-text{
position: relative;
font-weight: 400;
opacity: 0.80;
line-height: 38px;
font-size: var(--font-24);
color: var(--color-twentythree);
margin-top: var(--margin-top-35);
padding-right: var(--padding-right-20);
}
.testimonial-block_two-author{
position: relative;
min-height: 99px;
font-weight: 500;
font-size: var(--font-22);
color: var(--black-color);
margin-top: var(--margin-top-40);
padding-top: var(--padding-top-25);
padding-left: var(--padding-left-115);
}
.testimonial-block_two-author .author-image{
position: absolute;
left: 0px;
top: 0px;
width: 99px;
height: 99px;
overflow: hidden;
border-radius: 50%;
}
.testimonial-block_two-author span{
position: relative;
display: block;
font-weight: 400;
border-radius: 150px;
font-size: var(--font-16);
color: var(--color-twentyfour);
margin-top: var(--margin-top-5);
}
.testimonial-block_two_ameen{
position: absolute;
right: 20px;
bottom: 0px;
-webkit-animation: icon-bounce 0.8s ease-out infinite;
animation: icon-bounce 0.8s ease-out infinite;
}
.testimonial-block_two-icon{
position: absolute;
right: 25px;
top: 30px;
}
.testimonial-two_pagination{
position: relative;
text-align: center;
margin-top: 30px;
}
.testimonial-two_pagination .swiper-pagination-bullet{
position: relative;
width: 12px;
height: 12px;
opacity: 1;
margin: 0px 5px;
border-radius: 50px;
display: inline-block;
background-color: var(--white-color);
border: 1px solid var(--black-color);
}
.testimonial-two_pagination .swiper-pagination-bullet-active,
.testimonial-two_pagination .swiper-pagination-bullet:hover{
border-color: var(--main-color);
background-color: var(--main-color);
}
/***
====================================================================
Scholar One
====================================================================
***/
.scholar-one{
position: relative;
padding: 90px 0px 60px;
}
.scholar-one_button .theme-btn{
padding: 14px 40px;
}
.scholar-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.scholar-block_one-inner{
position: relative;
}
.scholar-block_one-image{
position: relative;
overflow: hidden;
border-radius: 53px;
background-color: var(--main-color);
}
.scholar-block_one-image img{
position: relative;
width: 100%;
display: block;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
}
.scholar-block_one-inner:hover .scholar-block_one-image img{
opacity: 0.70;
transform: scale(1.04,1.04);
}
.scholar-block_one-content{
position: relative;
text-align: center;
height: 187px;
width: 284px;
margin: 0 auto;
margin-top: -120px;
padding-top: var(--padding-top-35);
background: url(../images/background/scholar-one_bg.png);
}
.scholar-block_one-heading{
position: relative;
}
.scholar-block_one-heading a{
position: relative;
color: var(--black-color);
}
.scholar-block_one-heading a:hover{
color: var(--main-color);
}
.scholar-block_one-designation{
position: relative;
opacity: 0.70;
font-weight: 500;
font-size: var(--font-14);
color: var(--main-color);
margin-top: var(--margin-top-5);
}
.scholar-block_one-socials{
position: relative;
margin-top: var(--margin-top-20);
}
.scholar-block_one-socials a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
display: inline-block;
color: var(--white-color);
background-color: var(--color-thirty);
}
.scholar-block_one-socials a:hover{
background-color: var(--main-color);
}
/***
====================================================================
News Two
====================================================================
***/
.news-two{
position: relative;
padding: 110px 0px 70px;
}
.news-two .auto-container{
position: relative;
max-width: 1600px;
}
.news-block_two{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.news-block_two-inner{
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: var(--color-thirtyfour);
}
.news-block_two-image{
position: relative;
overflow: hidden;
background-color: var(--color-two);
}
.news-block_two-image:before{
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.news-block_two-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.news-block_two-inner:hover .news-block_two-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.news-block_two-inner:hover .news-block_two-image:before{
-webkit-animation: shine 1s;
animation: shine 1s;
}
.news-block_two-content{
position: relative;
overflow: hidden;
padding: 25px 25px 30px;
border-radius:0px 0px 10px 10px;
}
.news-block_two-meta{
position: relative;
}
.news-block_two-meta li{
position: relative;
font-weight: 400;
display: inline-block;
font-size: var(--font-15);
color: var(--color-twentyseven);
margin-right: var(--margin-right-20);
padding-left: var(--padding-left-25);
}
.news-block_two-meta li:first-child{
padding: 6px 18px;
font-size: 15px;
border-radius: 5px;
display: inline-block;
color: var(--color-nine);
background-color: var(--color-seven);
}
.news-block_two-meta li .icon{
position: absolute;
left: 0px;
top: 3px;
line-height: 1em;
}
.news-block_two-meta li:last-child{
margin-right: var(--margin-zero);
}
.news-block_two-meta li:last-child{
color: var(--color-twentyseven);
}
.news-block_two-heading{
position: relative;
text-transform: capitalize;
margin-top: var(--margin-top-20);
}
.news-block_two-heading a{
position: relative;
color: var(--black-color);
}
.news-block_two-heading a:hover{
color: var(--main-color);
}
.news-block_two-info{
position: relative;
padding: 8px 10px;
border-radius: 5px;
margin-top: var(--margin-top-25);
background-color: var(--white-color);
}
.news-block_two-author{
position: relative;
min-height: 45px;
font-weight: 500;
color: var(--black-color);
font-size: var(--font-15);
text-transform: capitalize;
padding-top: var(--padding-top-10);
padding-left: var(--padding-left-55);
}
.news-block_two-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 50px;
}
.news-block_two-more{
position: relative;
font-weight: 600;
padding: 11px 24px;
font-size: var(--font-14);
color: var(--white-color);
text-transform: capitalize;
border-radius: 0px 5px 5px 0px;
background-color: var(--black-color);
font-family:var(--font-family-Lexend);
}
.news-block_two-more:hover{
color: var(--white-color);
background-color: var(--main-color);
}
/***
====================================================================
Main Slider Three
====================================================================
***/
.slider-three{
position:relative;
background-repeat: repeat-x;
}
.slider-three .swiper-slide{
position:relative;
overflow:hidden;
padding:85px 0px 90px;
}
.slider-three_content{
position:relative;
z-index: 1;
}
.slider-three_content-inner{
position:relative;
padding-top: var(--padding-top-60);
}
.slider-three_title{
position: relative;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-three .swiper-slide-active .slider-three_title{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-three_heading{
color: var(--color-nine);
text-transform: capitalize;
margin-top:var(--margin-top-20);
margin-bottom:var(--margin-bottom-25);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-three .swiper-slide-active .slider-three_heading{
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-three_text{
position: relative;
max-width: 580px;
line-height: 30px;
font-weight: 500;
font-size: var(--font-20);
color: var(--color-thirtyfive);
margin-top:var(--margin-top-10);
margin-bottom:var(--margin-bottom-35);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-three .swiper-slide-active .slider-three_text{
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-three .slider-three_button{
display:inline-block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-three .slider-three_button .theme-btn{
padding: 19px 50px;
}
.slider-three .swiper-slide-active .slider-three_button{
-webkit-transition-delay: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-three_elements{
position: absolute;
left: 80px;
top: 180px;
width: 917px;
height: 517px;
background-repeat: no-repeat;
}
.slider-three_images-column{
position: relative;
}
.slider-three_images-outer{
position: relative;
margin-right: -285px;
}
.slider-three_iqra{
position: absolute;
left: 0px;
top: 220px;
width: 128px;
height: 128px;
z-index: 1;
border-radius: 150px;
text-align: center;
line-height: 128px;
background-color: var(--white-color);
}
.slider-three_images-column .image{
opacity: 0;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-three .swiper-slide-active .slider-three_images-column .image{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
opacity: 1;
}
.slider-three_images-column .column:first-child{
text-align: right;
}
.slider-three_images-column .column:first-child .image{
position: relative;
overflow: hidden;
border-radius: 49px;
display: inline-block;
margin-top: var(--margin-top-40);
border: 1px solid var(--white-color);
margin-bottom: var(--margin-bottom-30);
}
.slider-three_images-column .column:first-child .image:last-child{
border-width: 3px;
margin-left: -50px;
border-radius: 85px;
margin-top: var(--margin-zero);
}
.slider-three_images-column .column:last-child .image{
position: relative;
overflow: hidden;
border-radius: 49px;
display: inline-block;
border: 2px solid var(--white-color);
}
.slider-three_color-layer{
position: absolute;
left: 50%;
top: 50%;
width: 428px;
height: 658px;
border-radius: 140px;
transform: translateX(-50%) translateY(-53.5%);
background: #a7f0a5;
background: linear-gradient(to left, #a7f0a5 0%, #fdd052 100%);
}
.slider-three_circle{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 141px;
height: 141px;
margin-top: -120px;
margin-left: -70px;
}
/***
====================================================================
Welcome Three
====================================================================
***/
.welcome-three{
position: relative;
padding: 120px 0px 0px;
}
.welcome-three_content p{
opacity: 0.80;
padding-right: 20px;
font-size: var(--font-14);
color: var(--color-thirteen);
}
.welcome-three_pattern{
position: absolute;
left: -180px;
top: 130px;
width: 538px;
height: 538px;
background-repeat: no-repeat;
}
.welcome-three_pattern-two{
position: absolute;
right: 0px;
bottom: -60px;
width: 422px;
height: 469px;
background-repeat: no-repeat;
}
.welcome-three_image-column{
position: relative;
}
.welcome-three_image-outer{
position: relative;
text-align: right;
padding-right: 40px;
}
.welcome-three_content-outer{
padding-left: 20px;
}
.welcome-three_color-box{
position: absolute;
left: 70px;
top: -10px;
width: 65px;
height: 71px;
z-index: 1;
border-radius: 10px;
background-color: var(--color-two);
}
.welcome-three_color-box::before{
position: absolute;
content: '';
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
border-radius: 10px;
border: 10px solid var(--white-color);
}
.welcome-three_image-outer::before{
position: absolute;
content: '';
right: 25px;
bottom: -10px;
width: 166px;
height: 320px;
border-radius: 10px;
background-color: var(--main-color);
}
.welcome-three_image{
position: relative;
display: inline-block;
}
.welcome-three_image img{
position: relative;
overflow: hidden;
border-radius: 72px;
border: 1px solid var(--white-color);
}
.welcome-three_image::before{
position: absolute;
content: '';
left: -80px;
width: 15px;
top: 70px;
height: 220px;
background-color: var(--main-color);
}
.welcome-three_image::after{
position: absolute;
content: '';
left: -80px;
width: 15px;
top: 0px;
height: 77px;
background-color: var(--color-two);
}
.welcome-three_image-two{
position: absolute;
left: -75px;
bottom: -15px;
overflow: hidden;
border-radius: 72px;
border: 1px solid var(--white-color);
}
.welcome-three_dots{
position: absolute;
left: -40px;
top: -60px;
width: 242px;
height: 242px;
background-repeat: no-repeat;
}
.welcome-three_years{
position: relative;
gap: 20px;
z-index: 1;
font-size: 24px;
font-weight: 400;
color: var(--color-eleven);
padding: 18px 70px 18px 20px;
}
.welcome-three_years::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background: #50bc84;
background: linear-gradient(to right, #50bc84 0%, #F3B815 60%);
clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 0% 50%);
}
.welcome-three .sec-title{
margin-bottom: var(--margin-bottom-25);
}
.welcome-three_button{
margin-top: 12px;
}
.welcome-three_button .theme-btn{
padding: 14px 35px;
}
.welcome-three_text{
position: relative;
line-height: 28px;
opacity: 0.80;
color: var(--color-ten);
font-size: var(--font-16);
margin-top: var(--margin-top-25);
margin-bottom: var(--margin-bottom-30);
}
.welcome-three_title{
position: relative;
font-weight: 600;
font-size: var(--font-20);
color: var(--color-nine);
padding-top: var(--padding-top-15);
font-family: 'Inter', sans-serif;
margin-bottom: var(--margin-bottom-10);
}
.welcome-three_title::before{
position: absolute;
content: '';
left: 0px;
top:0px;
width: 47px;
height: 7px;
background-color: var(--main-color);
}
.welcome-three_title::after{
position: absolute;
content: '';
left: 0px;
top:0px;
width: 27px;
height: 7px;
background-color: var(--color-two);
}
.welcome-two_content-outer p{
position: relative;
line-height:28px;
font-size:var(--font-16);
color:#000;
margin-top: var(--margin-top-10);
}
/***
====================================================================
Page Title
====================================================================
***/
.page-title{
position:relative;
text-align: center;
background-size:cover;
padding: 91px 0px 97px;
}
/* .page-title::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
opacity: 0.60;
background-color: var(--color-five);
} */
.page-title h2{
color:var(--white-color);
text-transform:capitalize;
}
.page-title .bread-crumb{
position: relative;
display: inline-block;
margin-top:var(--margin-top-15);
}
.page-title .bread-crumb li{
position: relative;
font-weight: 400;
display:inline-block;
font-size: var(--font-16);
text-transform:capitalize;
margin-right: var(--margin-right-20);
color: rgba(var(--white-color-rgb), 1);
}
.page-title .bread-crumb li:before{
position: absolute;
right: -15px;
top:2px;
content: "-";
line-height: 1em;
color:var(--white-color);
}
.page-title .bread-crumb li:last-child{
padding-right: 0;
margin-right: 0;
}
.page-title .bread-crumb li:last-child:before{
display: none;
}
.page-title .bread-crumb li a{
color: rgba(var(--white-color-rgb), 1);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.page-title .bread-crumb li a:hover{
color: var(--main-color);
}
/***
====================================================================
Services Two
====================================================================
***/
.service-two{
position: relative;
padding: 100px 0px 100px;
}
/* Service Block One */
.service-block_two{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.service-block_two-inner{
position: relative;
border-radius: 5px;
overflow: hidden;
}
.service-block_two-inner::before{
position: absolute;
content: '';
left: 0px;
top: 38px;
right: 0px;
bottom: 0px;
background-color: var(--color-thirtyeight);
}
.service-block_two-upper{
position: relative;
padding: 0px 40px 40px;
}
.service-block_two-icon{
position: relative;
width: 77px;
height: 77px;
line-height: 77px;
text-align: center;
border-radius: 150px;
color: var(--color-six);
font-size: var(--font-50);
background-color: var(--color-seven);
border: 1px solid var(--main-color);
font-family: "flaticon_afbd3404a2e1104832d0";
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.service-block_two-heading{
position: relative;
font-weight: 500;
margin-top: var(--margin-top-25);
}
.service-block_two-heading a{
position: relative;
color: var(--color-nine);
}
.service-block_two-heading a:hover{
color: var(--main-color);
}
.service-block_two-text{
position: relative;
opacity: 0.80;
line-height:28px;
font-size:var(--font-18);
color: var(--color-thirtynine);
margin-top: var(--margin-top-20);
}
.service-block_two-big_icon{
position: absolute;
right: 20px;
top: 60px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.service-block_two-lower{
position: relative;
padding: 14.5px 45px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: var(--color-fourteen);
}
.service-block_two-inner:hover .service-block_two-lower{
background-color: var(--color-seven);
}
.service-block_two-inner:hover .service-block_two-icon{
transform: rotateY(180deg);
}
.service-block_two-inner:hover .service-block_two-big_icon{
animation: icon-bounce 0.8s ease-out;
-webkit-animation: icon-bounce 0.8s ease-out;
}
.service-block_two-more{
position: relative;
font-weight: 600;
display: flex;
gap: 10px;
font-size: var(--font-14);
color: var(--black-color);
align-items: center;
}
.service-block_two-more i{
position: relative;
line-height: 1em;
font-size: var(--font-18);
}
.service-block_two-more:hover{
color: var(--black-color);
}
/***
====================================================================
Styled Pagination
====================================================================
***/
.service-two .styled-pagination{
margin-top: var(--margin-top-20);
}
.styled-pagination{
position:relative;
}
.styled-pagination li{
position:relative;
margin:0px 0px 10px;
display:inline-block;
}
.styled-pagination li a{
position:relative;
display:inline-block;
line-height:48px;
height:50px;
width:50px;
min-width:50px;
font-weight:600;
text-align:center;
border-radius: 5px;
text-transform:capitalize;
transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-moz-transition:all 500ms ease;
font-size:var(--font-16);
color:var(--black-color);
background-color: var(--color-fourty);
}
.styled-pagination li.prev a,
.styled-pagination li.next a{
width: auto;
margin: 0px 18px;
padding: 0px 22px;
}
.styled-pagination li a:hover,
.styled-pagination li a.active{
background-color:var(--color-two);
}
/***
====================================================================
Service Detail
====================================================================
***/
.service-detail{
position: relative;
padding-top: var(--padding-top-110);
padding-bottom: var(--padding-bottom-100);
}
.service-detail .content{
position: relative;
text-align: center;
padding: 100px 0px 150px;
margin-bottom: var(--margin-bottom-40);
background-position: center center;
background-repeat: no-repeat;
}
.service-detail_icon{
position: relative;
width: 113px;
height: 113px;
margin: 0 auto;
line-height: 113px;
border-radius: 150px;
font-size: var(--font-60);
color: var(--color-three);
background-color: var(--color-two);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.service-detail_heading{
position: relative;
font-weight: 500;
line-height: 46px;
font-size: var(--font-40);
color: var(--white-color);
margin-top: var(--margin-top-35);
}
.service-detail_text{
position: relative;
line-height: 28px;
opacity: 0.80;
font-weight: 400;
font-size: var(--font-16);
color: var(--white-color);
margin-top: var(--margin-top-20);
}
.service-detail_subtitle{
font-weight: 500;
color: var(--white-color);
margin-top: var(--margin-top-40);
}
.service-detail_text{
position: relative;
opacity: 0.80;
font-weight: 400;
max-width: 620px;
margin: 0 auto;
font-size: var(--font-16);
color: var(--white-color);
margin-top: var(--margin-top-20);
}
.service-detail_content-column{
position: relative;
}
.service-detail_content-outer{
position: relative;
}
.service-detail_lower-title{
position: relative;
color: var(--color-three);
text-transform: capitalize;
margin-top: var(--margin-top-35);
margin-bottom: var(--margin-bottom-15);
}
.service-detail_content-column p{
position: relative;
line-height: 28px;
opacity: 0.80;
font-size: var(--font-16);
color: var(--color-fourtyone);
margin-bottom: var(--margin-bottom-15);
}
.service-detail_list{
position: relative;
margin-top: var(--margin-top-40);
}
.service-detail_list li{
position: relative;
line-height: 28px;
opacity: 0.80;
font-size: var(--font-16);
color: var(--color-fourtyone);
padding-left: var(--padding-left-45);
margin-bottom: var(--margin-bottom-15);
}
.service-detail_list li::before{
position: absolute;
content: "\f11a";
left: 0px;
top: 5px;
width: 29px;
height: 29px;
text-align: center;
line-height: 29px;
border-radius: 5px;
color: var(--white-color);
background-color: var(--color-three);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.service-detail_image{
position: relative;
}
.service-detail_image img{
position: relative;
max-width: inherit;
}
/***
====================================================================
Courses Two
====================================================================
***/
.courses-two{
position: relative;
padding: 100px 0px 70px;
background-position: center center;
background-repeat: no-repeat;
background-color: var(--color-sixteen);
}
/***
====================================================================
Sidebar Page Container
====================================================================
***/
.sidebar-page-container{
position:relative;
padding:100px 0px 70px;
}
.sidebar-page-container .content-side,
.sidebar-page-container .sidebar-side{
margin-bottom:var(--margin-bottom-30);
}
.sidebar-page-container .sidebar-inner{
position:relative;
}
.course-detail{
position: relative;
}
.course-detail_inner{
position: relative;
}
.course-detail_image{
position: relative;
border-radius: 5px;
overflow: hidden;
}
.course-detail_image img{
position: relative;
width: 100%;
display: block;
}
.course-detail_content{
position: relative;
padding-top: var(--padding-top-30);
}
.course-detail_heading{
position: relative;
color: var(--color-three);
margin-bottom: var(--margin-bottom-30);
}
.course-detail_info{
position: relative;
margin-bottom: var(--margin-bottom-30);
padding-bottom: var(--padding-bottom-20);
border-bottom: 2px solid var(--color-seventeen);
}
.course-detail_author{
position: relative;
font-weight: 500;
color: var(--color-nine);
font-size: var(--font-16);
padding-left: var(--padding-left-50);
}
.course-detail_author-image{
position: absolute;
left: 0px;
top: 0px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
}
.course-detail_author span{
position: relative;
display: block;
color: var(--main-color);
font-size: var(--font-13);
}
.course-detail_list{
position: relative;
}
.course-detail_list li{
position: relative;
font-size: 16px;
padding: 0px 30px;
line-height: 20px;
font-weight: 600;
text-align: center;
display: inline-block;
color: var(--color-nine);
border-right: 1px solid var(--color-seventeen);
}
.course-detail_list li span{
position: relative;
display: block;
color: var(--main-color);
}
.course-detail_list li:last-child{
border: none;
}
.course-detail_price{
position: relative;
font-weight: 600;
text-align: center;
font-size: var(--font-36);
color: var(--color-seven);
}
.course-detail_price span{
position: relative;
display: block;
font-weight: 500;
font-size: var(--font-13);
color: var(--main-color);
margin-top: var(--margin-top-10);
}
.course-detail_subtitle{
position: relative;
color: var(--color-three);
margin-bottom: var(--margin-bottom-15);
}
.course-detail p{
opacity: 0.80;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-fourtyone);
margin-bottom: var(--margin-bottom-15);
}
/***
====================================================================
Product Tabs Style
====================================================================
***/
.course-detail-tabs{
position:relative;
margin-top:var(--margin-top-30);
}
.course-detail-tabs .tab-btns{
position:relative;
padding: 8px 8px;
border-radius: 5px;
background-color: var(--color-fourtytwo);
}
.course-detail-tabs .tab-btns .tab-btn{
position:relative;
display:inline-block;
background:var(--white-color);
color:var(--color-three);
text-transform:capitalize;
font-size:var(--font-20);
line-height:24px;
cursor:pointer;
font-weight:500;
padding:13px 21px;
border-radius: 5px;
transition:all 500ms ease;
}
.course-detail-tabs .tab-btns .tab-btn:hover,
.course-detail-tabs .tab-btns .tab-btn.active-btn{
background-color: var(--color-seven);
}
.course-detail-tabs .tabs-content{
position:relative;
padding:30px 0px 0px;
}
.course-detail-tabs .tabs-content .tab{
position:relative;
display:none;
}
.course-detail-tabs .tabs-content .tab.active-tab{
display:block;
}
.course-detail .accordion-box{
margin-top: var(--margin-top-25);
margin-bottom: var(--margin-bottom-35);
}
/***
====================================================================
Accordion Style
====================================================================
***/
.accordion-box{
position:relative;
z-index:1;
}
.accordion-box .block{
position: relative;
border-radius: 5px;
margin-bottom:var(--margin-bottom-20);
background-color: var(--color-fourtytwo);
}
.accordion-box .block:last-child{
margin-bottom:var(--margin-zero);
}
.accordion-box .block .acc-btn{
position:relative;
cursor:pointer;
line-height:30px;
font-weight:500;
padding: 18px 45px 18px 25px;
font-size:var(--font-20);
text-transform: capitalize;
transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
}
.accordion-box .block .preview{
position: absolute;
right: 80px;
top: 17px;
font-weight: 600;
padding: 1px 21px;
border-radius: 0px;
display: inline-block;
color: var(--color-three);
font-size: var(--font-14);
text-transform: capitalize;
background-color: var(--white-color);
}
.accordion-box .block .icon-outer{
position:absolute;
right:20px;
top:17px;
width: 34px;
height: 34px;
line-height: 34px;
border-radius: 50px;
text-align: center;
overflow: hidden;
font-weight: 600;
font-size:var(--font-18);
color:var(--color-three);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: var(--white-color);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.accordion-box .block .icon-outer .icon{
position: absolute;
right:0px;
width: 34px;
height: 34px;
}
.accordion-box .block .icon-outer .icon-plus{
opacity:1;
}
.accordion-box .block .icon-outer .icon-minus{
opacity:0;
font-weight:400;
color:var(--white-color);
background-color: var(--main-color);
}
.accordion-box .block .acc-btn.active .icon-outer .icon-minus{
opacity:1;
}
.accordion-box .block .acc-btn.active .icon-outer .icon-plus{
opacity:0;
}
.accordion-box .block .acc-btn.active .icon-outer{
}
.accordion-box .block .acc-content{
position:relative;
display:none;
}
.accordion-box .block .acc-content .content-text{
}
.accordion-box .block .acc-content.current{
display:block;
}
.accordion-box .block .content{
position:relative;
padding:0px 30px 30px 28px;
}
.accordion-box .block .content .text{
opacity:0.80;
font-size:var(--font-16);
color: var(--color-fourtyone);
}
.accordion-box .questions{
position: absolute;
right: 200px;
opacity: 0.60;
font-size: 18px;
color: var(--main-color);
text-transform: capitalize;
}
/* Sidebar Title */
.sidebar-widget{
position:relative;
margin-bottom:var(--margin-bottom-30);
}
.sidebar-widget.style-two{
background-color: var(--color-fifty);
border: 1px solid var(--color-fiftyone);
}
.sidebar-widget.style-two .sidebar-title{
padding: 20px 25px;
margin-bottom: var(--margin-zero);
border-bottom: 1px solid var(--color-fiftyone);
}
.sidebar-widget.style-two .content{
position: relative;
padding: 30px 28px 32px;
}
/* Sidebar Title */
.sidebar-title{
position:relative;
margin-bottom:var(--margin-bottom-20);
}
.sidebar-title h4{
color: var(--black-color);
}
.course-widget .widget-content{
position: relative;
padding: 35px 25px;
border-radius: 5px;
background-color: var(--color-fourtytwo);
}
.course-list{
position: relative;
}
.course-list li{
position: relative;
padding: 16px 20px;
font-size: var(--font-20);
color: var(--color-fourtythree);
background-color: var(--white-color);
margin-bottom: var(--margin-bottom-10);
}
.course-list li span{
position: absolute;
right: 15px;
color: var(--main-color);
}
.course-appy_btn{
position: relative;
padding: 16px 15px;
display: block;
text-align: center;
color: var(--main-color);
font-size: var(--font-20);
background-color: var(--color-seven);
}
.course-appy_btn:hover{
color: var(--white-color);
background-color: var(--main-color);
}
/* Helpline Widget */
.helpline-widget .widget-content{
position: relative;
text-align: center;
padding: 0px 40px 50px;
}
.helpline-widget .widget-content::before{
position: absolute;
content: '';
left: 0px;
top: 70px;
right: 0px;
bottom: 0px;
border-radius: 5px;
background: #abe0c3;
background: linear-gradient(to bottom, #abe0c3 0%, #F3B815 100%);
}
.helpline-widget .image{
position: relative;
width: 141px;
height: 141px;
margin: 0 auto;
border-radius: 50%;
}
.helpline-title{
position: relative;
font-weight: 400;
color: var(--black-color);
margin-top: var(--margin-top-25);
}
.helpline-widget_phone{
position: relative;
width: 85px;
height: 85px;
line-height: 85px;
border-radius: 50px;
text-align: center;
margin: 0 auto;
font-size: var(--font-40);
color: var(--black-color);
margin-top: var(--margin-top-25);
background-color: var(--color-fourtyfour);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.helpline-widget_number{
position: relative;
font-weight: 500;
color: var(--black-color);
font-size: var(--font-24);
margin-top: var(--margin-top-20);
}
.helpline-widget_number span{
position: relative;
display: block;
color: var(--main-color);
margin-top: var(--margin-top-10);
}
/***
====================================================================
Scholar Detail
====================================================================
***/
.scholar-detail{
position: relative;
padding-top: var(--padding-top-110);
}
.scholar-detail .auto-container{
position: relative;
max-width: 1180px;
}
.scholar-detail_image-column{
position: relative;
}
.scholar-detail_image-outer{
position: relative;
padding-right: var(--padding-right-30);
}
.scholar-detail_image{
position: relative;
overflow: hidden;
border-radius: 30px;
}
.scholar-detail_image img{
position: relative;
width: 100%;
display: block;
}
.scholar-detail_content-column{
position: relative;
}
.scholar-detail_content-outer{
position: relative;
padding-left: var(--padding-left-30);
}
.scholar-detail_title{
position: relative;
line-height: 38px;
font-size: var(--font-36);
color: var(--black-color);
}
.scholar-detail_title span{
position: relative;
display: block;
opacity: 0.70;
font-size: var(--font-16);
color: var(--main-color);
}
.scholar-detail p{
position: relative;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-fourtythree);
margin-top: var(--margin-top-15);
}
.scholar-detail_list{
position: relative;
margin-top: var(--margin-top-30);
}
.scholar-detail_list li{
position: relative;
font-size: var(--font-16);
color: var(--main-color);
margin-bottom: var(--margin-bottom-10);
padding-left: var(--padding-left-25);
}
.scholar-detail_list li::before{
position: absolute;
content: "\f11c";
left: 0px;
font-family: "flaticon_afbd3404a2e1104832d0";
}
/* Skills Section */
.skills{
position: relative;
margin-top: var(--margin-top-40);
margin-bottom: var(--margin-bottom-50);
}
.skills .skill-item{
position:relative;
}
.skills .skill-item:last-child{
margin-bottom:var(--margin-zero);
}
.skills .skill-item .skill-bar{
position:relative;
width:100%;
height:16px;
padding: 0px 6px;
border-radius: 50px;
background-color:var(--main-color);
}
.skills .skill-item .skill-bar .bar-inner{
position:relative;
width:100%;
}
.skills.style-two .skill-item .skill-bar .bar-inner{
background-color:#eeeeee;
}
.skills .skill-item .skill-bar .bar-inner .bar{
position:absolute;
left:0px;
top:5px;
width:0px;
border-radius: 50px;
border-bottom:6px solid var(--color-two);
-webkit-transition:all 2000ms ease;
-ms-transition:all 2000ms ease;
-o-transition:all 2000ms ease;
-moz-transition:all 2000ms ease;
transition:all 2000ms ease;
}
.skills .skill-item .skill-header{
position:relative;
margin-bottom: var(--margin-bottom-15);
}
.skills .skill-item .skill-header .skill-title{
font-weight:600;
font-size:var(--font-18);
text-transform:capitalize;
color:var(--black-color);
}
.skills .count-box{
position:absolute;
right:0px;
top:-38px;
z-index: 1;
text-align: center;
padding-left: 5px;
padding-top: 1px;
font-size:var(--font-12);
color:var(--black-color);
}
.skills .count-box::before{
position:absolute;
content: '';
left: 0px;
top: 0px;
width: 33px;
height: 27px;
z-index: -1;
background-color: var(--color-two);
clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.scholar-detail_play{
position: relative;
}
.scholar-detail_play i{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
padding-left: 2px;
font-size: var(--font-12);
color: var(--main-color);
background-color: var(--color-two);
}
.scholar-detail_play span{
position: relative;
font-weight: 500;
margin-left: var(--margin-left-10);
color: var(--black-color);
font-size: var(--font-16);
}
.scholar-detail_socials{
position: relative;
margin-left: var(--margin-left-40);
}
.scholar-detail_socials a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
padding-left: 2px;
display: inline-block;
font-size: var(--font-14);
color: var(--white-color);
background-color: var(--color-thirty);
}
.scholar-detail_socials a:hover{
color: var(--white-color);
background-color: var(--main-color);
}
/***
====================================================================
Class One
====================================================================
***/
.class-one{
position: relative;
z-index: 1;
padding: 110px 0px 85px;
}
.class-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.class-block_one-inner{
position: relative;
background-color: var(--color-fourtyfive);
}
.class-block_one-image{
position: relative;
border-radius: 5px;
overflow: hidden;
background-color: var(--color-two);
}
.class-block_one-image img{
position: relative;
width: 100%;
display: block;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
}
.class-block_one-inner:hover .class-block_one-image img{
opacity: 0.70;
transform: scale(1.04,1.04);
}
.class-block_one-content{
position: relative;
padding: 0px 30px 30px;
}
.class-block_one-list{
position: relative;
margin-top: -20px;
}
.class-block_one-list li{
position: relative;
display: inline-block;
}
.class-block_one-list li i{
position: relative;
margin-right: var(--margin-right-5);
}
.class-block_one-list li a{
position: relative;
padding: 9px 20px;
font-weight: 600;
font-size: 14px;
border-radius: 5px;
display: inline-block;
text-transform: capitalize;
color: var(--black-color);
background-color: var(--color-seven);
}
.class-block_one-list li:first-child a{
color: var(--white-color);
background-color: var(--main-color);
}
.class-block_one-heading{
position: relative;
font-weight: 500;
display: block;
font-size: var(--font-24);
margin-top: var(--margin-top-20);
margin-bottom: var(--margin-bottom-10);
}
.class-block_one-heading a{
position: relative;
color: var(--color-nine);
}
.class-block_one-record{
position: relative;
font-size: var(--font-13);
color: var(--color-nine);
}
.class-block_one-record span{
position: relative;
color: var(--main-color);
}
.class-block_one-date{
position: relative;
padding: 4px 10px;
border-radius: 0px;
color: var(--black-color);
font-size: var(--font-16);
background-color: var(--color-fourtysix);
}
.class-block_one-icon{
position: absolute;
right: 20px;
top: 40px;
width: 80px;
height: 85px;
background-repeat: no-repeat;
}
.class-block_one-overlay{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
text-align:center;
overflow:hidden;
display:flex;
align-items: center;
justify-content: center;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease,-webkit-transform 0.4s ease;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
}
.class-block_one .class-block_one-inner:hover .class-block_one-overlay{
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.class-block_oneplay{
position: relative;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
color: var(--white-color);
display: inline-block;
border-radius: 150px;
font-size: var(--font-20);
background-color: rgba(var(--main-color-rgb), 0.60);
}
.class-block_oneplay:hover{
color: var(--white-color);
background-color: rgba(var(--main-color-rgb), 1);
}
.class-one .styled-pagination{
position: relative;
margin-top: var(--margin-top-25);
}
/***
====================================================================
Prayer Time
====================================================================
***/
.prayer-time{
position: relative;
padding: 100px 0px 100px;
}
.prayer-time.style-two .prayer-time_timing{
margin-top:0px;
background-image: linear-gradient(to right, #fee8aa, #e9ebb3, #d8ecc0, #ccebcc, #c7e9d7);
}
.prayer-time.style-two .time-countdown .counter-column::before,
.prayer-time.style-two .time-countdown .counter-column .count,
.prayer-time.style-two .time-countdown_subtitle,
.prayer-time.style-two .prayer-time_timing .title{
color: var(--black-color);
}
.prayer-time.style-two .prayer-time_timing .title:before,
.prayer-time.style-two .prayer-time_timing .title:after{
background-color:#aed943;
}
.prayer-time.style-two .makkah-timezone{
color:#5C7B10;
}
.prayer-time_title{
position: relative;
text-align: center;
font-weight: 500;
color: var(--color-three);
margin-bottom: var(--margin-bottom-50);
}
.prayer-time_content{
position: relative;
font-weight: 500;
line-height: 30px;
text-align: center;
font-size: var(--font-20);
padding: 50px 175px 140px;
color: var(--main-color);
background-color: var(--color-fourtyseven);
}
.prayer-time_timing{
position: relative;
padding: 40px 30px;
border-radius: 5px;
margin-top: -90px;
margin-left: var(--margin-left-100);
margin-right: var(--margin-right-100);
margin-bottom: var(--margin-bottom-45);
background: #f7d781;
background: linear-gradient(to left, #50bc84 0%, #f7d781 100%);
}
.prayer-time_time{
position: relative;
display: inline-block;
text-align: center;
}
.prayer-time_time .title{
position: relative;
font-weight: 500;
display: inline-block;
font-size: var(--font-36);
color: var(--white-color);
margin-bottom: var(--margin-bottom-25);
}
.prayer-time_time .title::before{
position: absolute;
content: '';
left: -45px;
top: 10px;
width: 36px;
height: 7px;
background-color: var(--color-two);
}
.prayer-time_time .title::after{
position: absolute;
content: '';
right: -45px;
top: 10px;
width: 36px;
height: 7px;
background-color: var(--color-two);
}
.time-countdown{
position:relative;
}
.time-countdown .counter-column{
position:relative;
display: inline-block;
line-height: 1em;
color:var(--white-color);
text-transform:uppercase;
font-size:var(--font-20);
font-weight:600;
text-align: center;
margin:0px 12px 20px;
}
.time-countdown .counter-column .count{
position:relative;
display:block;
font-size:var(--font-30);
line-height:30px;
padding:0px 0px 0px;
color:var(--white-color);
font-weight:600;
}
.time-countdown .counter-column::before{
position:absolute;
content: ':';
right: -18px;
top: 4px;
color:var(--white-color);
font-size:var(--font-26);
}
.time-countdown .counter-column:last-child::before{
display: none;
}
.time-countdown_subtitle{
position: relative;
color:var(--white-color);
font-size:var(--font-24);
text-transform: capitalize;
}
.prayer-time_list{
position: relative;
text-align: center;
}
.prayer-daytime{
position: relative;
width: 170px;
height: 137px;
font-weight: 500;
padding: 30px 25px;
text-align: center;
border-radius: 5px;
display: inline-block;
font-size: var(--font-18);
margin: 0px 12px 25px;
color: var(--color-fourtyeight);
background-color: #F1FFE3;
}
.prayer-daytime span{
position: relative;
display: block;
font-weight: 500;
font-size: var(--font-24);
color: var(--black-color);
margin-top: var(--margin-top-15);
padding-top: var(--padding-top-15);
border-top: 2px solid var(--color-fourtynine);
}
.prayer-daytime:nth-child(2){
background-color: #fefaec;
}
.prayer-daytime:nth-child(3){
background-color: #ecfaf4;
}
.prayer-daytime:nth-child(4){
background-color: #f0eee9;
}
.prayer-daytime:nth-child(5){
background-color: #fff5f5;
}
.prayer-daytime:nth-child(6){
background-color: #fbf2e5;
}
.makkah-timezone{
position: relative;
text-align: center;
font-size: var(--font-18);
color: var(--main-color);
margin-top: var(--margin-top-20);
}
/***
====================================================================
Blog One
====================================================================
***/
.blog-one{
position: relative;
padding: 100px 0px 70px;
}
.news-block_three{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.news-block_three-inner{
position: relative;
border-radius: 10px;
overflow: hidden;
}
.news-block_three-image{
position: relative;
overflow: hidden;
background-color: var(--main-color);
}
.news-block_three-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.news-block_three-inner:hover .news-block_three-image img{
opacity: 0.70;
transform: scale(1.02,1.02) rotate(1deg);
}
.news-block_three-content{
position: relative;
overflow: hidden;
padding: 30px 30px 30px;
border-radius:0px 0px 10px 10px;
border: 1px solid var(--color-twentysix);
}
.news-block_three-meta{
position: relative;
}
.news-block_three-meta li{
position: relative;
font-weight: 400;
opacity: 0.80;
display: inline-block;
font-size: var(--font-15);
color: var(--color-thirteen);
margin-right: var(--margin-right-20);
padding-left: var(--padding-left-25);
}
.news-block_three-meta li .icon{
position: absolute;
left: 0px;
top: 3px;
line-height: 1em;
}
.news-block_three-meta li:last-child{
margin-right: var(--margin-zero);
}
.news-block_three-meta li:last-child{
color: var(--color-twentyseven);
}
.news-block_three-heading{
position: relative;
line-height: 46px;
text-transform: capitalize;
font-size: var(--font-36);
margin-top: var(--margin-top-15);
}
.news-block_three-heading a{
position: relative;
color: var(--black-color);
}
.news-block_three-heading a:hover{
color: var(--main-color);
}
.news-block_three-text{
position: relative;
line-height: 28px;
font-weight: 400;
font-size: var(--font-16);
color: var(--color-twentyeight);
margin-top: var(--margin-top-15);
font-family: 'Inter', sans-serif;
}
.news-block_three-more{
position: relative;
font-weight: 600;
padding: 10px 24px;
font-size: var(--font-14);
color: var(--black-color);
text-transform: capitalize;
border-radius: 0px 5px 5px 0px;
margin-top: var(--margin-top-20);
background-color: var(--color-seven);
font-family:var(--font-family-Lexend);
}
.news-block_three-more:hover{
color: var(--white-color);
background-color: var(--main-color);
}
/* Search Widget */
.sidebar .search-box .form-group{
position:relative;
margin:var(--margin-zero);
}
.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"]{
position:relative;
line-height:28px;
font-size:var(--font-14);
padding:10px 50px 10px 25px;
background:none;
display:block;
width:100%;
height:56px;
border-radius:0px;
color:var(--color-three);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
border:1px solid rgba(var(--black-color-rgb), 0.10);
}
.sidebar .search-box .form-group input::placeholder,
.sidebar .search-box .form-group textarea::placeholder{
color:var(--color-three);
opacity:0.58;
}
.sidebar .search-box .form-group button{
position:absolute;
right:0px;
top:0px;
height:56px;
width:56px;
display:block;
cursor:pointer;
line-height:56px;
font-weight:normal;
border-radius:0px;
font-size:var(--font-16);
color:var(--color-three);
background:none;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.sidebar .search-box .form-group button:hover{
background-color:var(--main-color);
color:var(--white-color);
}
.category-list{
position: relative;
}
.category-list li{
position: relative;
margin-bottom: 12px;
}
.category-list li a{
position: relative;
display: block;
font-size: var(--font-18);
text-transform: capitalize;
color: var(--color-fiftytwo);
}
.category-list li span{
position: absolute;
right: 0px;
}
.category-list li a:hover{
color: var(--main-color);
text-decoration: underline;
}
.category-list li:last-child{
margin-bottom: var(--margin-zero);
}
/* Post Widget */
.post-widget .widget-content{
position:relative;
}
.post-widget .post{
position: relative;
min-height: 110px;
padding-left: var(--padding-left-100);
margin-bottom: var(--margin-bottom-20);
border-bottom: 1px solid var(--color-fiftyone);
}
.post-widget .post:last-child{
margin-bottom: var(--margin-zero);
padding-bottom: var(--padding-zero);
}
.post-widget .post .thumb{
position: absolute;
left: 0;
top: 0;
height: 84px;
width: 84px;
overflow: hidden;
}
.post-widget .post .thumb a{
display: block;
}
.post-widget .post .thumb img{
display: block;
width: 100%;
height: auto;
}
.post-widget .post h6{
line-height:24px;
font-weight:500;
text-transform: capitalize;
margin-top: var(--margin-top-5);
}
.post-widget .post h6 a{
color:var(--color-thirtythree);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.post-widget .post h6 a:hover{
color:var(--main-color);
}
.post-widget .post .post-date{
position: relative;
display: block;
font-weight:400;
padding: 2px 10px;
display: inline-block;
font-size: var(--font-14);
text-transform:capitalize;
color:var(--color-fiftythree);
border: 1px solid var(--color-fiftyone);
}
.popular-tags a{
position: relative;
padding: 7px 16px;
border-radius: 3px;
display: inline-block;
font-size: var(--font-14);
color: var(--color-fiftyfour);
text-transform: capitalize;
margin-right: var(--margin-right-5);
margin-bottom: var(--margin-bottom-10);
background-color: rgba(var(--color-two-rgb), 0.15);
}
.popular-tags a:hover{
background-color: rgba(var(--color-two-rgb), 1);
}
/* Blog Detail */
.blog-detail{
position: relative;
}
.blog-detail_outer{
position: relative;
border-radius: 5px;
overflow: hidden;
background-color: var(--color-fifty);
}
.blog-detail_image{
position: relative;
}
.blog-detail_image img{
position: relative;
width: 100%;
display: block;
}
.blog-detail_content{
position: relative;
padding: 30px 35px 35px;
}
.blog-detail_author{
position: relative;
gap: 10px;
color: var(--black-color);
font-size: var(--font-15);
}
/* Meta */
.blog-detail_meta{
position: relative;
margin-left: var(--margin-left-15);
}
.blog-detail_meta li{
position: relative;
font-weight: 400;
opacity: 0.80;
display: inline-block;
font-size: var(--font-15);
color: var(--color-thirteen);
margin-right: var(--margin-right-20);
padding-left: var(--padding-left-25);
}
.blog-detail_meta li .icon{
position: absolute;
left: 0px;
top: 3px;
line-height: 1em;
}
.blog-detail_meta li:last-child{
margin-right: var(--margin-zero);
}
.blog-detail_heading{
position: relative;
line-height: 44px;
font-size: var(--font-36);
color: var(--black-color);
text-transform: capitalize;
margin-top: var(--margin-top-15);
margin-bottom: var(--margin-bottom-20);
}
.blog-detail p{
position: relative;
line-height: 28px;
font-weight: 400;
opacity: 0.80;
font-size: var(--font-16);
color: var(--color-fiftytwo);
margin-bottom: var(--margin-bottom-15);
}
.blog-detail_subtitle{
position: relative;
line-height: 34px;
text-transform: capitalize;
font-size: var(--font-24);
color: var(--black-color);
margin-bottom: var(--margin-bottom-15);
}
.blog-detail blockquote{
position: relative;
padding: 30px 30px;
line-height: 30px;
color: var(--main-color);
font-size: var(--font-20);
background-color: var(--white-color);
margin-bottom: var(--margin-bottom-35);
border:1px solid rgba(var(--black-color-rgb), 0.10);
}
.blog-detail_list{
position: relative;
margin-top: var(--margin-top-40);
margin-bottom: var(--margin-bottom-25);
}
.blog-detail_list li{
position: relative;
line-height: 28px;
font-size: var(--font-16);
color: var(--black-color);
padding-left: var(--padding-left-45);
margin-bottom: var(--margin-bottom-15);
}
.blog-detail_list li::before{
position: absolute;
content: "\f11a";
left: 0px;
top: 5px;
width: 29px;
height: 29px;
text-align: center;
line-height: 29px;
border-radius: 5px;
color: var(--white-color);
background-color: var(--color-three);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.blog-detail_list li:last-child{
margin-bottom: var(--margin-zero);
}
/* Post Share Options */
.post-share-options{
position:relative;
margin-top:var(--margin-top-30);
padding-bottom: var(--padding-bottom-30);
border-bottom:2px solid rgba(var(--black-color-rgb), 0.05);
}
.post-share-options .tags span{
position:relative;
font-weight:600;
font-size:var(--font-18);
color:var(--black-color);
margin-right:var(--margin-right-20);
}
.post-share-options .tags a{
position: relative;
padding: 7px 16px;
border-radius: 3px;
display: inline-block;
font-size: var(--font-14);
text-transform: capitalize;
color: var(--color-fiftyfour);
margin-right: var(--margin-right-5);
margin-bottom: var(--margin-bottom-10);
background-color: rgba(var(--color-two-rgb), 0.15);
}
.post-share-options .tags a:last-child{
margin-right: 0px;
}
.post-share-options .tags a:hover{
color:var(--black-color);
background-color: rgba(var(--color-two-rgb), 1);
}
.post-share-options .social-box{
position:relative;
}
.post-share-options .social-box span{
position:relative;
font-weight:600;
font-size:var(--font-18);
color:var(--black-color);
margin-right:var(--margin-right-10);
}
.post-share-options .social-box a:last-child{
margin-right:var(--margin-zero);
}
.post-share-options .social-box a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
padding-left: 2px;
display: inline-block;
font-size: var(--font-14);
color: var(--white-color);
background-color: var(--color-thirty);
}
.post-share-options .social-box a:hover{
color: var(--white-color);
background-color: var(--main-color);
}
/***
====================================================================
Comments Area
====================================================================
***/
.sidebar-page-container.style-two{
padding-bottom: var(--padding-bottom-40);
}
.sidebar-page-container .comments-area{
position:relative;
padding-top:var(--padding-top-30);
}
.sidebar-page-container .group-title{
position:relative;
margin-bottom:var(--margin-bottom-30);
}
.sidebar-page-container .group-title h4{
color:var(--color-fifteen);
}
.sidebar-page-container .group-title .text{
position:relative;
font-size:var(--font-16);
color:var(--color-twentyone);
margin-top:var(--margin-top-5);
}
.sidebar-page-container .comments-area .comment-box{
position:relative;
margin-bottom:var(--margin-bottom-40);
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.sidebar-page-container .comments-area .comment-box:last-child{
margin-bottom:var(--margin-zero);
}
.sidebar-page-container .comments-area .comment{
position:relative;
min-height:120px;
font-size:var(--font-14);
padding:0px 0px 0px 105px;
}
.sidebar-page-container .comments-area .reply-comment{
}
.sidebar-page-container .comments-area .comment-box .author-thumb{
position:absolute;
left:0px;
top:0px;
width:90px;
height:90px;
overflow:hidden;
border-radius:50%;
margin-bottom:var(--margin-bottom-20);
}
.sidebar-page-container .comments-area .comment-box .author-thumb img{
width:100%;
display:block;
}
.sidebar-page-container .comments-area .comment-info{
margin-bottom:var(--margin-bottom-10);
}
.sidebar-page-container .comments-area .comment-box strong{
position:relative;
font-weight:500;
display:block;
font-size:var(--font-20);
color:var(--black-color);
}
.sidebar-page-container .comments-area .comment-box .text{
line-height:28px;
opacity: 0.80;
font-size:var(--font-16);
color:var(--color-fiftytwo);
}
.sidebar-page-container .comments-area .comment-info .comment-time{
position:relative;
font-weight:400;
display:block;
font-size:var(--font-14);
color:var(--color-fiftyfive);
margin-top:var(--margin-top-5);
text-transform: capitalize;
}
.sidebar-page-container .comments-area .comment-box .reply-btn{
position:absolute;
right:0px;
top:0px;
border-radius: 2px;
font-weight:400;
padding: 5px 13px;
font-size:var(--font-14);
text-transform:capitalize;
color: var(--white-color);
display: inline-block;
background-color: var(--main-color);
}
.sidebar-page-container .comments-area .comment-box .reply-btn:hover{
color:var(--white-color);
background-color: var(--color-three);
}
/***
====================================================================
Comment Form
====================================================================
***/
.comment-form-outer{
position:relative;
margin-top: var(--margin-top-35);
}
.comment-form .form-group{
margin-bottom:var(--margin-bottom-20);
}
.comment-form .form-group:last-child{
margin-bottom:0px;
}
.comment-form .form-group input[type="text"],
.comment-form .form-group input[type="password"],
.comment-form .form-group input[type="tel"],
.comment-form .form-group input[type="email"],
.comment-form .form-group select{
position:relative;
display:block;
width:100%;
line-height:28px;
padding:10px 25px;
height:50px;
border-radius:5px;
font-size:var(--font-15);
color:var(--black-color);
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
background-color:var(--white-color);
border:1px solid rgba(var(--black-color-rgb), 1);
}
.comment-form .form-group textarea::-webkit-input-placeholder,
.comment-form .form-group input::-webkit-input-placeholder{
color:var(--color-three);
}
.comment-form .form-group input[type="text"]:focus,
.comment-form .form-group input[type="password"]:focus,
.comment-form .form-group input[type="tel"]:focus,
.comment-form .form-group input[type="email"]:focus,
.comment-form .form-group select:focus,
.comment-form .form-group textarea:focus{
border-color:var(--black-color);
}
.comment-form .form-group textarea{
position:relative;
display:block;
width:100%;
line-height:24px;
padding:15px 25px 25px;
font-size:var(--font-15);
color:var(--color-three);
height:170px;
resize:none;
border-radius:5px;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
background-color:var(--white-color);
border:1px solid rgba(var(--black-color-rgb), 1);
}
.comment-form .theme-btn{
position: relative;
}
/***
====================================================================
Events One
====================================================================
***/
.events-one{
position: relative;
padding: 100px 0px 100px;
}
.event-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.event-block_one-inner{
position: relative;
overflow: hidden;
border-radius: 10px;
background-color: var(--color-thirtyfour);
}
.event-block_one-image{
position: relative;
}
.event-block_one-image img{
position: relative;
width: 100%;
display: block;
}
.event-block_one-content{
position: relative;
padding: 0px 25px 25px;
}
.event-block_one-time{
position: relative;
border-radius: 3px;
padding: 2px 12px;
top: -13px;
display: inline-block;
font-size: var(--font-15);
color: var(--white-color);
background-color: var(--main-color);
}
.event-block_one-location{
position: relative;
font-size: var(--font-15);
color: var(--color-fiftytwo);
margin-top: var(--margin-top-10);
}
.event-block_one-heading{
position: relative;
text-transform: capitalize;
margin-top: var(--margin-top-10);
}
.event-block_one-heading a{
position: relative;
color: var(--black-color);
}
.event-block_one-heading a:hover{
color: var(--main-color);
}
.event-block_one-price{
position: relative;
font-weight: 500;
border-radius: 5px;
font-size: var(--font-15);
color: var(--black-color);
padding: 8px 8px 8px 15px;
margin-top: var(--margin-top-20);
background-color: var(--white-color);
}
.event-block_one-price span{
position: relative;
padding: 12px 22px;
color: var(--white-color);
font-size: var(--font-16);
border-radius: 0px 5px 5px 0px;
background-color: var(--black-color);
}
/***
====================================================================
Event Detail
====================================================================
***/
.event-detail{
position: relative;
padding: 100px 0px 70px;
}
.event-detail .auto-container{
max-width: 1200px;
}
.event-detail_image{
position: relative;
}
.event-detail_image img{
position: relative;
width: 100%;
display: block;
}
.event-detail_time{
position: relative;
border-radius: 3px;
padding: 2px 12px;
top: -13px;
display: inline-block;
font-size: var(--font-15);
color: var(--white-color);
background-color: var(--main-color);
}
.event-detail_location{
position: relative;
font-size: var(--font-15);
color: var(--color-fiftytwo);
margin-top: var(--margin-top-10);
}
.event-detail_heading{
position: relative;
line-height: 46px;
font-size: var(--font-36);
margin-top: var(--margin-top-10);
margin-bottom: var(--margin-bottom-25);
}
.event-detail_heading a{
position: relative;
color: var(--black-color);
}
.event-detail_price{
position: relative;
font-weight: 500;
min-height: 57px;
border-radius: 5px;
font-size: var(--font-15);
color: var(--black-color);
padding: 8px 8px 8px 15px;
background-color: var(--color-fiftysix);
}
.event-detail_price span{
position: relative;
padding: 12px 22px;
color: var(--white-color);
font-size: var(--font-16);
border-radius: 0px 5px 5px 0px;
margin-left: var(--margin-left-45);
background-color: var(--black-color);
}
.ticket-btn{
position: relative;
font-weight: 500;
border-radius: 5px;
padding: 18px 100px;
font-size: var(--font-15);
margin-left: var(--margin-left-30);
border: 2px solid var(--main-color);
}
.ticket-btn:hover{
color: var(--white-color);
background-color: var(--main-color);
}
.event-detail_subtitle{
position: relative;
color: var(--black-color);
text-transform: capitalize;
margin-top: var(--margin-top-30);
margin-bottom: var(--margin-bottom-20);
}
.event-detail p{
position: relative;
font-size: var(--font-16);
color: var(--color-fiftytwo);
margin-bottom: var(--margin-bottom-20);
}
.event-detail_list{
position: relative;
margin-top: var(--margin-top-30);
margin-bottom: var(--margin-bottom-25);
}
.event-detail_list li{
position: relative;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-fiftytwo);
padding-left: var(--padding-left-45);
margin-bottom: var(--margin-bottom-15);
}
.event-detail_list li::before{
position: absolute;
content: "\f11a";
left: 0px;
top: 5px;
width: 29px;
height: 29px;
text-align: center;
line-height: 29px;
border-radius: 5px;
color: var(--white-color);
background-color: var(--main-color);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.event-detail_list li:last-child{
margin-bottom: var(--margin-zero);
}
.event-detail_accordian{
position: relative;
padding: 30px 25px;
border-radius: 5px;
margin-bottom: var(--margin-bottom-50);
background-color: var(--color-thirtyfour);
}
/***
====================================================================
Accordion Style
====================================================================
***/
.accordion-box_two{
position:relative;
z-index:1;
}
.accordion-box_two .block{
position: relative;
border-radius: 5px;
background-color: var(--white-color);
margin-bottom:var(--margin-bottom-10);
}
.accordion-box_two .block:last-child{
margin-bottom:var(--margin-zero);
}
.accordion-box_two .block .acc-btn{
position:relative;
cursor:pointer;
line-height:30px;
font-weight:500;
padding: 15px 22px;
color: var(--black-color);
font-size:var(--font-16);
transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
}
.accordion-box_two .block .icon-outer{
position:absolute;
right:20px;
top:22px;
font-size:var(--font-16);
color:var(--black-color);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
font-family: 'Font Awesome 5 Pro';
}
.accordion-box_two .block .icon-outer .icon{
position: absolute;
right:0px;
color:var(--black-color);
}
.accordion-box_two .block .icon-outer .icon-plus{
opacity:1;
}
.accordion-box_two .block .icon-outer .icon-minus{
opacity:0;
}
.accordion-box_two .block .acc-btn.active .icon-outer .icon-minus{
opacity:1;
}
.accordion-box_two .block .acc-btn.active .icon-outer .icon-plus{
opacity:0;
}
.accordion-box_two .block .acc-btn.active .icon-outer{
}
.accordion-box_two .block .acc-content{
position:relative;
display:none;
}
.accordion-box_two .block .acc-content .content-text{
}
.accordion-box_two .block .acc-content.current{
display:block;
}
.accordion-box_two .block .content{
position:relative;
padding:15px 20px 20px 22px;
border-top: 1px solid rgba(var(--black-color-rgb), 0.04);
}
.accordion-box_two .block .content .text{
line-height: 28px;
font-size:var(--font-16);
color:var(--color-fiftytwo);
}
.accordion-box_two.style-two .block{
background-color: var(--color-fourtytwo);
}
.accordion-box_two.style-two .block .acc-btn{
font-size: var(--font-20);
text-transform: capitalize;
padding: 22px 45px 22px 25px;
}
.accordion-box_two.style-two .block .icon-outer .icon{
width: 34px;
height: 34px;
text-align: center;
border-radius: 50px;
transition:all 500ms ease;
-moz-transition:all 500 ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: rgba(var(--color-seven-rgb), 0.20);
}
.accordion-box_two.style-two .block .content{
border: none;
padding-top: var(--padding-zero);
padding-bottom: var(--padding-bottom-25);
}
.accordion-box_two.style-two .block .content .text{
opacity: 0.80;
color: var(--color-fourtyone);
}
.accordion-box_two.style-two .block .acc-btn.active .icon-outer .icon{
transform: rotate(-180deg);
background-color: rgba(var(--color-seven-rgb), 1);
}
/***
====================================================================
Event Detail Speakers
====================================================================
***/
.event-detail_speakers{
position: relative;
}
.speaker-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.speaker-block_one-inner{
position: relative;
overflow: hidden;
border-radius: 5px 5px 0px 0px;
background-color: var(--color-fiftyseven);
}
.speaker-block_one-image{
position: relative;
}
.speaker-block_one-image img{
position: relative;
width: 100%;
display: block;
}
.speaker-block_one-content{
position: relative;
text-align: center;
padding-bottom: var(--padding-bottom-20);
}
.speaker-block_one-socials{
position: relative;
margin-top: -17px;
}
.speaker-block_one-socials a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
display: inline-block;
font-size: var(--font-14);
color: var(--white-color);
background-color: var(--color-thirty);
}
.speaker-block_one-socials a:hover{
color: var(--color-three);
background-color: var(--color-two);
}
.speaker-block_one-heading{
position: relative;
font-weight: 500;
margin-top: var(--margin-top-15);
}
.speaker-block_one-heading a{
position: relative;
color: var(--black-color);
}
.speaker-block_one-title{
position: relative;
font-weight: 500;
color: var(--main-color);
font-size: var(--font-14);
}
/* Organiser Widget */
.organiser-widget{
position: relative;
padding: 30px 40px;
border-radius: 10px;
margin-top: var(--margin-top-40);
background-color: var(--color-thirtyfour);
}
.organiser-title{
position: relative;
font-weight: 500;
color: var(--black-color);
text-transform: capitalize;
margin-bottom: var(--margin-bottom-20);
padding-bottom: var(--padding-bottom-10);
border-bottom: 1px solid rgba(var(--black-color-rgb), 0.10);
}
.organiser-info_list{
position: relative;
}
.organiser-info_list li{
position: relative;
font-weight: 500;
font-size: var(--font-14);
color: rgba(var(--black-color-rgb), 0.50);
margin-bottom: var(--margin-bottom-10);
}
.organiser-info_list li span{
position: relative;
right: 0px;
width: 100px;
display: inline-block;
color: rgba(var(--black-color-rgb), 1);
}
.organiser-info_list li:last-child{
margin-bottom: 0px;
}
.organiser-widget .image{
position: relative;
border-radius: 10px;
overflow: hidden;
margin-top: var(--margin-top-25);
}
.organiser-widget .image img{
position: relative;
width: 100%;
display: block;
}
/***
====================================================================
Contact Info
====================================================================
***/
.contact-info{
position: relative;
padding: 100px 0px 0px;
}
.contact-info .auto-container{
position: relative;
max-width: 1200px;
}
.contact-info .inner-container{
position: relative;
border-radius: 5px;
padding: 55px 30px 25px;
margin-bottom: var(--margin-bottom-45);
background-color: var(--color-fiftyeight);
}
.contact-info_column{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.contact-info_outer{
position: relative;
text-align: center;
}
.contact-info_outer::before{
position: absolute;
content: '';
right: -15px;
top: 0px;
width: 1px;
bottom: 0px;
border-right: 1px solid rgba(var(--black-color-rgb), 0.10);
}
.contact-info_icon{
position: relative;
width: 84px;
height: 84px;
line-height: 84px;
border-radius: 150px;
font-size: var(--font-30);
color: var(--color-fiftynine);
background-color: var(--white-color);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.contact-info_outer:hover .contact-info_icon{
color: var(--white-color);
background-color: var(--main-color);
transform: rotateY(180deg);
}
.contact-info_heading{
color: var(--color-nine);
text-transform: capitalize;
margin-top: var(--margin-top-20);
}
.contact-info_text{
position: relative;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-fiftytwo);
margin-top: var(--margin-top-20);
}
.contact-info_text span{
position: relative;
display: block;
color: var(--main-color);
font-size: var(--font-20);
}
.contact-info_column:last-child .contact-info_outer::before{
display: none;
}
.contact-form_box{
position: relative;
padding-bottom: var(--padding-bottom-25);
}
.contact-form_box h4{
position: relative;
text-transform: capitalize;
color: var(--black-color);
margin-bottom: var(--margin-bottom-20);
}
.contact-form_box .auto-container{
position: relative;
max-width: 1200px;
}
/***
====================================================================
Comment Form
====================================================================
***/
.contact-form .form-group{
margin-bottom:var(--margin-bottom-20);
}
.contact-form .form-group:last-child{
margin-bottom:0px;
}
.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="password"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group select{
position:relative;
display:block;
width:100%;
line-height:28px;
padding:10px 25px;
height:50px;
border-radius:3px;
font-size:var(--font-14);
color:var(--black-color);
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
background-color:var(--white-color);
border:1px solid rgba(var(--black-color-rgb), 1);
}
.contact-form .form-group textarea::-webkit-input-placeholder,
.contact-form .form-group input::-webkit-input-placeholder{
color:var(--color-fiftyfive);
}
.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="password"]:focus,
.contact-form .form-group input[type="tel"]:focus,
.contact-form .form-group input[type="email"]:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus{
border-color:var(--black-color);
}
.contact-form .form-group textarea{
position:relative;
display:block;
width:100%;
line-height:24px;
padding:15px 25px 25px;
font-size:var(--font-14);
color:var(--color-three);
height:170px;
resize:none;
border-radius:0px;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
background-color:var(--white-color);
border:1px solid rgba(var(--black-color-rgb), 1);
}
.contact-form .theme-btn{
position: relative;
}
.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error{
border-color:#ff0000 !important;
}
.contact-form label.error{
display:block;
line-height:24px;
padding:5px 0px 0px;
margin:0px;
text-transform:uppercase;
font-size:12px;
color:#ff0000;
font-weight:500;
}
/* Map One */
.map-one{
position: relative;
margin-bottom: -10px;
}
.map-one iframe{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 570px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/***
====================================================================
Faq One
====================================================================
***/
.faq-one{
position: relative;
padding: 90px 0px 70px;
}
.faq-one .auto-container{
position: relative;
max-width: 1200px;
}
.faq-one h3{
position: relative;
line-height: 46px;
text-align: center;
font-size: var(--font-36);
color: var(--black-color);
text-transform: capitalize;
margin-bottom: var(--margin-bottom-50);
}
.faq-one h4{
position: relative;
line-height: 34px;
font-size: var(--font-24);
color: var(--black-color);
text-transform: capitalize;
margin-bottom: var(--margin-bottom-15);
}
.faq-one_accordian-column{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.faq-one_accordian-column .accordian-outer{
position: relative;
padding: 35px 30px;
border-radius: 5px;
background-color: var(--color-thirtyfour);
}
.faq-one_helpline-column{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
/***
====================================================================
Error One
====================================================================
***/
.error-one{
position: relative;
text-align: center;
padding: 130px 0px 120px;
background-position: center center;
background-repeat: no-repeat;
}
.error-one_icon{
position: absolute;
left: 20%;
top: 25%;
width: 69px;
height: 68px;
background-repeat: no-repeat;
}
.error-one h1{
position: relative;
font-weight: 700;
font-size: 180px;
line-height: 1em;
text-transform: uppercase;
color: var(--color-fifteen);
}
.error-one h1 span{
position: relative;
display: inline-block;
}
.error-one h1 span::before{
position: absolute;
content: '';
left: 5px;
top: -20px;
width: 113px;
height: 84px;
background: url(../images/icons/quran.png);
background-repeat: no-repeat;
-webkit-animation: icon-bounce 0.8s ease-out infinite;
animation: icon-bounce 0.8s ease-out infinite;
}
.error-one h3{
position: relative;
font-weight: 600;
font-size: 36px;
line-height: 46px;
text-transform: capitalize;
color: var(--black-color);
}
.error-one_text{
position: relative;
line-height: 28px;
font-size: var(--font-16);
color: var(--color-fiftytwo);
margin-top: var(--margin-top-15);
}
.error-one_button{
position: relative;
margin-top: var(--margin-top-40);
}
.error-one_button .theme-btn{
font-size: var(--font-16);
padding: 19px 52px;
}
.register-one_column{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.register-one_column .register-one_column-outer{
position: relative;
padding: 60px 50px;
border-radius: 5px;
background: #FBF6E8;
background: linear-gradient(to bottom right, #FBF6E8 0%, #eef5f1 100%);
}
/***
====================================================================
Register One
====================================================================
***/
.register-one{
position: relative;
padding: 90px 0px 60px;
}
.register-one .auto-container{
position: relative;
max-width: 1200px;
}
.register-one h3{
position: relative;
text-align: center;
font-weight: 500;
line-height: 46px;
font-size: var(--font-36);
color: var(--black-color);
text-transform: capitalize;
margin-bottom: var(--margin-bottom-50);
}
.register-one h4{
position: relative;
font-weight: 500;
line-height: 46px;
font-size: var(--font-36);
color: var(--black-color);
margin-bottom: var(--margin-bottom-20);
}
/* Style Form */
.styled-form{
position:relative;
}
.styled-form .submit-text{
font-weight:400;
font-size:var(--font-15);
color:var(--main-color-two);
margin-top:var(--margin-top-10);
}
.styled-form .form-group{
position:relative;
margin-bottom:var(--margin-bottom-25);
}
.styled-form .form-group:last-child{
margin-bottom: var(--margin-zero);
}
.styled-form .form-group .check-box{
position: relative;
}
.styled-form .forgot-psw{
position: relative;
font-weight: 500;
font-size: var(--font-14);
color: var(--black-color);
margin-left: var(--margin-left-25);
}
.styled-form .form-group .check-box label{
position: relative;
display: block;
width: 100%;
line-height: 22px;
padding: 0px 10px 0px;
padding-left: 25px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
margin-bottom: 0;
color: var(--black-color);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.styled-form .form-group .check-box input[type="checkbox"] {
display: none;
}
.styled-form .form-group .check-box input[type="checkbox"]:checked + label:before{
border: 5px solid var(--main-color);
background: var(--white-color);
}
.styled-form .form-group .check-box input[type="checkbox"]:checked + label:after {
max-width: 20px;
opacity: 1;
}
.styled-form .form-group .check-box label:before{
position: absolute;
left: 0;
top: 2px;
height:16px;
width: 16px;
background-color: var(--white-color);
content: "";
border-radius: 0px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
border:1px solid rgba(var(--black-color-rgb), 0.15);
}
.styled-form input[type="text"],
.styled-form input[type="email"],
.styled-form input[type="password"],
.styled-form input[type="tel"],
.styled-form input[type="number"],
.styled-form input[type="url"],
.styled-form select,
.styled-form textarea{
position:relative;
display:block;
width:100%;
line-height:30px;
padding:8px 25px;
height:50px;
font-weight:400;
border-radius:5px;
font-size:var(--font-14);
color:var(--color-sixty);
transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
background-color:var(--white-color);
border:1px solid rgba(var(--black-color-rgb), 0.10);
}
.checkout-section .styled-form input[type="text"],
.checkout-section .styled-form input[type="email"],
.checkout-section .styled-form input[type="password"],
.checkout-section .styled-form select{
line-height:26px;
height:44px;
}
.styled-form select option{
text-indent:20px;
}
.styled-form .form-group button{
font-weight:500;
padding:15px 40px;
letter-spacing:1px;
}
.styled-form textarea{
resize:none;
height:110px;
}
.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus{
border-color:var(--main-color);
}
/* Course Author Box */
.course-author_box{
position: relative;
}
.course-author_box-inner{
position: relative;
min-height: 127px;
padding-left: 150px;
padding-top: var(--padding-top-5);
}
.course-author_box-image{
position: absolute;
left: 0px;
top: 0px;
width: 127px;
height: 127px;
overflow: hidden;
border-radius: 150px;
border: 2px solid var(--color-seven);
}
.course-author_box-heading{
position: relative;
font-weight: 700;
line-height: 26px;
color: var(--color-nine);
}
.course-author_box-heading span{
position: relative;
display: block;
font-weight: 400;
color: var(--main-color);
font-size: var(--font-13);
}
.course-author_box-text{
position: relative;
line-height: 28px;
opacity: 0.80;
font-size: var(--font-16);
color: var(--color-fourtyone);
margin-top: var(--margin-top-10);
}
/* Course Rreview Box */
.course-review_box{
position: relative;
}
.course-review_box h5{
position: relative;
font-weight: 500;
color: var(--color-nine);
text-transform: capitalize;
margin-bottom: var(--margin-bottom-20);
}
/* Course Author */
.course-author{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.course-author:last-child .course-author_inner{
border: none;
min-height: 127px;
}
.course-author_inner{
position: relative;
min-height: 160px;
padding-left: 150px;
padding-top: var(--padding-top-5);
border-bottom: 2px solid rgba(var(--black-color-rgb), 0.04);
}
.course-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 127px;
height: 127px;
overflow: hidden;
border-radius: 150px;
border: 2px solid var(--color-seven);
}
.course-author_heading{
position: relative;
font-weight: 700;
line-height: 26px;
color: var(--color-nine);
}
.course-author_text{
position: relative;
line-height: 28px;
opacity: 0.80;
font-size: var(--font-16);
color: var(--color-fourtyone);
margin-top: var(--margin-top-10);
}
/***
====================================================================
Course Comment Form
====================================================================
***/
.course-comment_form{
position:relative;
margin-top: var(--margin-top-50);
}
.course-comment_form .form-group{
margin-bottom:var(--margin-bottom-30);
}
.course-comment_form .form-group:last-child{
margin-bottom:25px;
}
.course-comment_form .form-group input[type="text"],
.course-comment_form .form-group input[type="password"],
.course-comment_form .form-group input[type="tel"],
.course-comment_form .form-group input[type="email"],
.course-comment_form .form-group select{
position:relative;
display:block;
width:100%;
line-height:28px;
padding:10px 25px;
height:66px;
border-radius:5px;
font-size:var(--font-14);
color:var(--black-color);
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
background-color:var(--color-fourtytwo);
}
.course-comment_form .form-group textarea::-webkit-input-placeholder,
.course-comment_form .form-group input::-webkit-input-placeholder{
color:var(--color-fourtythree);
}
.course-comment_form .form-group input[type="text"]:focus,
.course-comment_form .form-group input[type="password"]:focus,
.course-comment_form .form-group input[type="tel"]:focus,
.course-comment_form .form-group input[type="email"]:focus,
.course-comment_form .form-group select:focus,
.course-comment_form .form-group textarea:focus{
border-color:var(--black-color);
}
.course-comment_form .form-group textarea{
position:relative;
display:block;
width:100%;
line-height:24px;
padding:15px 25px 25px;
font-size:var(--font-14);
color:var(--black-color);
height:220px;
resize:none;
border-radius:5px;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
background-color:var(--color-fourtytwo);
}
.course-comment_form .theme-btn{
position: relative;
}
/* Index 04 */
/***
====================================================================
Main Slider Four
====================================================================
***/
.slider-four{
position:relative;
}
.slider-four_bg{
position:absolute;
left:0px;
top:-125px;
right:0px;
bottom:0px;
background-size:cover;
}
.slider-four_mosque{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-position:left bottom;
background-repeat:no-repeat;
}
.slider-four_border{
position:absolute;
left:60px;
top:80px;
right:60px;
bottom:60px;
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
}
.slider-four_vector{
position:absolute;
left:0%;
top:-1%;
width:52px;
height:303px;
z-index:1;
background-repeat:no-repeat;
}
.slider-four_vector.style-two{
left:-8%;
}
.slider-four_vector-two{
position:absolute;
right:2%;
bottom:18%;
width:52px;
height:303px;
z-index:1;
display:none;
background-repeat:no-repeat;
}
.slider-four_shape{
position:absolute;
left:22%;
top:6%;
width:125px;
height:123px;
}
.slider-four_quran{
position:absolute;
right:5%;
top:18%;
width:101px;
height:101px;
}
.slider-four_arrow{
position:absolute;
left:35%;
bottom:-20px;
width:104px;
height:86px;
}
.slider-four .swiper-slide{
position:relative;
overflow:hidden;
padding:150px 0px 0px;
}
.slider-four_content{
position:relative;
z-index: 1;
}
.slider-four_content-inner{
position:relative;
padding-top: 70px;
}
.slider-four_circle{
position:absolute;
left: 22%;
top: 30%;
z-index:1;
width:141px;
height:141px;
background-repeat:no-repeat;
}
.slider-four_circle.style-two{
left: 8%;
top: 20%;
}
.slider-four_title{
position: relative;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-four .swiper-slide-active .slider-four_title{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-four_heading{
line-height:90px;
color: var(--white-color);
text-transform: capitalize;
margin-top:var(--margin-top-35);
margin-bottom:var(--margin-bottom-25);
font-weight:normal;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
font-family: "Abril Fatface", serif;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-four .swiper-slide-active .slider-four_heading{
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-four_text{
position: relative;
max-width: 750px;
line-height: 30px;
font-weight: 500;
font-size: var(--font-20);
color: var(--white-color);
margin-top:var(--margin-top-20);
margin-bottom:var(--margin-bottom-45);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-four .swiper-slide-active .slider-four_text{
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-four .slider-four_button{
display:inline-block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-four .slider-four_button .theme-btn{
padding: 19px 50px;
border-radius:50px;
}
.slider-four .swiper-slide-active .slider-four_button{
-webkit-transition-delay: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-four_images-column{
position: relative;
}
.slider-four_images-outer{
position: relative;
}
.slider-four_images-column .image{
position:relative;
left:-30px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-four_images-column .image img{
max-width:inherit;
clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-four .swiper-slide-active .slider-four_images-column .image img{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slider-four .swiper-slide-active .slider-four_images-column .image{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
/***
====================================================================
About One
====================================================================
***/
.about-one{
position:relative;
padding:130px 0px 90px;
}
.about-one_lamp{
position:absolute;
right:60px;
top:0px;
z-index:1;
width:203px;
height:485px;
}
.about-one_makkah{
position:absolute;
right:0px;
bottom:50px;
width:364px;
height:405px;
}
.about-one_image-column{
position:relative;
margin-bottom:30px;
}
.about-one_image-outer{
position:relative;
padding-right:70px;
}
.about-one_image-outer:before{
position:absolute;
content:'';
left:-180px;
bottom:0px;
right:70px;
height:320px;
border-radius:10px;
background-color:var(--main-color);
}
.about-one_pattern{
position:absolute;
left:-130px;
top:-60px;
width:256px;
height:256px;
background-repeat:no-repeat;
}
.about-one_image{
position:relative;
margin-left:-100px;
border-radius:280px;
display:inline-block;
border:3px solid var(--white-color);
}
.about-one_vector{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-repeat:no-repeat;
background-position:center center;
}
.about-one_color-one{
position:absolute;
right:120px;
top:35px;
width:17px;
height:177px;
background-color:var(--main-color);
}
.about-one_color-two{
position:absolute;
right:95px;
top:190px;
width:15px;
height:77px;
background-color:var(--color-two);
}
.about-one h5{
font-weight:normal;
color:var(--color-nine);
font-family: 'Abril Fatface';
}
.about-one .sec-title{
margin-bottom:30px;
}
.about-one .content p{
position:relative;
font-size:14px;
line-height:26px;
margin-top:10px;
padding-right:20px;
color:var(--color-thirteen);
}
.about-one .about-one_button .theme-btn{
border-radius:50px;
margin-top:10px;
}
.about-one_content-column{
position:relative;
margin-bottom:30px;
}
/***
====================================================================
Services Three
====================================================================
***/
.service-three{
position: relative;
padding: 100px 0px 100px;
}
.service-three_bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-size:cover;
}
/* Service Block Three */
.service-block_three{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.service-block_three-inner{
position: relative;
border-radius: 150px 150px 150px 0px;
overflow: hidden;
background-color:var(--white-color);
}
.service-block_three-image{
position: relative;
overflow:hidden;
background-color:var(--main-color);
}
.service-block_three-image img{
position: relative;
width:100%;
display:block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.service-block_three-inner:hover .service-block_three-image img{
opacity:0.40;
transform:scale(1.05,1.05) rotate(2deg);
}
.service-block_three-content{
position: relative;
padding:25px 35px;
background-position:left bottom;
background-repeat:no-repeat;
}
.service-block_three-heading{
position:relative;
font-weight:normal;
font-family: "Abril Fatface", serif;
}
.service-block_three-heading a{
position:relative;
color:var(--color-nine);
}
.service-block_three-icon{
position:relative;
border-radius:150px;
box-shadow:0px 0px 20px rgba(0,0,0,0.10);
background-color:var(--white-color);
}
.service-block_three .button-box{
position:relative;
margin-top:15px;
}
.service-block_three .button-box a{
position:relative;
font-size:14px;
font-weight:600;
padding:12px 20px;
border-radius:50px;
display:inline-block;
color:var(--color-nine);
border:2px solid var(--main-color);
}
.service-block_three .button-box a:hover{
color:var(--white-color);
background-color:var(--main-color);
}
/***
====================================================================
Learning One
====================================================================
***/
.learning-one{
position:relative;
padding:110px 0px 80px;
}
.learning-one .sec-title_heading{
margin-top:0px;
}
.learning-one .column{
position:relative;
margin-bottom:30px;
}
.learning-one_bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-size:cover;
}
.learning-one .sec-title{
margin-bottom:30px;
}
.learning-one_button{
position:relative;
}
.learning-one_button .theme-btn{
position:relative;
font-size:14px;
padding:14px 42px;
border-radius:50px;
}
.sec-title_heading{
font-size:35px;
line-height:46px;
}
.learning-one_students{
position:relative;
padding-left:145px;
margin-top:50px;
min-height:117px;
}
.learning-one_students .students-icon{
position:absolute;
left:0px;
top:0px;
width:117px;
height:117px;
line-height:117px;
border-radius:150px;
text-align:center;
font-size:60px;
color:var(--color-fifteen);
background-color:var(--white-color);
font-family: "flaticon_afbd3404a2e1104832d0";
}
.learning-one_counter-count{
position:relative;
font-size:64px;
line-height:1em;
color:var(--main-color);
font-family: "Abril Fatface", serif;
}
.learning-one_counter-text{
position:relative;
font-size:24px;
font-weight:500;
color:var(--color-fifteen);
}
.learning-one_image{
position:relative;
border-radius:45px;
display:block;
overflow:hidden;
margin-left:20px;
border:10px solid var(--white-color);
}
.learning-one_image img{
position:relative;
width:100%;
display:block;
}
/***
====================================================================
Courses Three
====================================================================
***/
.courses-three{
position:relative;
padding:110px 0px 300px;
}
.courses-three .auto-container{
position:relative;
max-width:1560px;
}
.courses-three_bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-size:cover;
}
/* Course Block Three */
.course-block_three{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.course-block_three-inner{
position: relative;
overflow: hidden;
border-radius: 150px 150px 30px 30px;
background-color: var(--white-color);
}
.course-block_three-image{
position: relative;
overflow:hidden;
background-color: var(--main-color);
}
.course-block_three-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.course-block_three-inner:hover .course-block_three-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.course-block_three-content{
position: relative;
padding: 0px 24px 30px;
border-top:10px solid #f7f2ec;
}
.course-block_three-study{
position: absolute;
left: 45px;
top: -27px;
font-weight: 600;
padding: 12px 25px;
text-align: center;
border-radius: 5px;
display: inline-block;
font-size: var(--font-14);
color: var(--white-color);
background-color: var(--main-color);
}
.course-block_three-study:hover{
color: var(--black-color);
background-color: var(--color-seven);
}
.course-block_three-heading{
position: relative;
font-weight: normal;
text-transform: capitalize;
margin-top: var(--margin-top-25);
font-family: 'Abril Fatface';
}
.course-block_three-heading a{
position: relative;
color: var(--color-nine);
}
.course-block_three-heading a:hover{
color: var(--main-color);
}
.course-block_three-list{
position: relative;
padding: 10px 0px;
display: block;
margin-top: var(--margin-top-25);
border-top: 1px solid var(--color-seventeen);
border-bottom: 1px solid var(--color-seventeen);
}
.course-block_three-list li{
position: relative;
font-size: 16px;
line-height: 20px;
font-weight: 600;
text-align: center;
color: var(--color-nine);
}
.course-block_three-list li span{
position: relative;
display: block;
color: var(--main-color);
}
.course-block_three-lower{
position: relative;
border-radius: 50px;
margin-top:-34px;
background-color: var(--color-eighteen);
}
.course-block_three-author{
position: relative;
min-height: 40px;
font-size: var(--font-13);
color: var(--main-color);
margin-top: var(--margin-top-10);
margin-left: var(--margin-left-10);
padding-left: var(--padding-left-50);
}
.course-block_three-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
border:1px solid var(--black-color);
}
.course-block_three-author strong{
position: relative;
display: block;
font-weight: 500;
font-size: var(--font-16);
color: var(--color-nine);
}
.course-block_three-price{
position: relative;
font-weight: 500;
font-size: 13px;
text-align: center;
padding: 8px 15px;
border-radius: 50px;
display: inline-block;
color: var(--white-color);
text-transform: capitalize;
background-color: var(--main-color);
}
.course-block_three-price span{
position: relative;
display: block;
font-weight:500;
font-size: var(--font-16);
color: var(--white-color);
}
.course-block_three .button-box{
position:relative;
margin-top:30px;
}
.course-block_three .button-box .theme-btn:hover{
color:var(--white-color);
background-color:var(--main-color);
}
.course-block_three .button-box .theme-btn{
position:relative;
display:block;
font-size:14px;
font-weight:600;
padding:14px 15px;
border-radius:50px;
text-align:center;
color:var(--black-color);
text-transform:capitalize;
background-color:var(--color-seven);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
/***
====================================================================
CTA Three
====================================================================
***/
.cta-three{
position:relative;
z-index:10;
}
.cta-three .inner-container{
position:relative;
text-align:center;
margin-top:-170px;
padding:0px 30px 60px;
background-color:#379452;
}
.cta-three .dott{
position:relative;
width:57px;
height:57px;
top:-27px;
margin:0 auto;
border-radius:50px;
border:2px solid var(--black-color);
background-color:var(--white-color);
}
.cta-three .dott:before{
position:absolute;
content:'';
left:50%;
top:50%;
width:10px;
height:10px;
border-radius:50px;
transform:translateX(-50%) translateY(-50%);
background-color:var(--main-color);
}
.cta-three h3{
position:relative;
margin-top:20px;
font-weight:normal;
margin-bottom:35px;
color:var(--white-color);
font-family: "Abril Fatface", serif;
}
.cta-three_button .theme-btn{
border-radius:50px;
border:1px solid var(--black-color);
}
.cta-three_button .theme-btn:before{
background-color:var(--black-color);
}
.cta-three_mosque{
position:absolute;
left:0px;
bottom:0px;
width:272px;
height:138px;
opacity:0.30;
background-repeat:no-repeat;
}
.cta-three_mosque-two{
position:absolute;
right:0px;
bottom:0px;
width:272px;
height:138px;
opacity:0.30;
background-repeat:no-repeat;
}
/***
====================================================================
Testimonial Three
====================================================================
***/
.testimonial-three{
position: relative;
padding: 140px 0px 140px;
}
.testimonial-three_pagination{
position: relative;
text-align: center;
margin-top: 30px;
}
.testimonial-three_pagination .swiper-pagination-bullet{
position: relative;
width: 12px;
height: 12px;
opacity: 1;
margin: 0px 10px;
border-radius: 50px;
display: inline-block;
background-color: var(--white-color);
border: 1px solid var(--black-color);
}
.testimonial-three_pagination .swiper-pagination-bullet-active,
.testimonial-three_pagination .swiper-pagination-bullet:hover{
border-color: var(--main-color);
background-color: var(--main-color);
}
.testimonial-three .auto-container{
max-width:1860px;
}
.testimonial-three_bg{
position:absolute;
left:0px;
top:-200px;
right:0px;
bottom:0px;
background-position: center top;
background-repeat: no-repeat;
}
.testimonial-block_three{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.testimonial-block_three-inner{
position: relative;
padding: 50px 40px;
}
.testimonial-block_three-inner::before{
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
border-radius:40px;
background: #F5F3E3;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.testimonial-block_three-inner:hover::before{
background-color:#D6EADC;
}
.testimonial-block_three-rating{
position: relative;
z-index:1;
border-radius: 5px;
display: inline-block;
padding: 18px 20px 15px;
background-color: var(--white-color);
}
.testimonial-block_three-rating span{
position: relative;
margin: 0px 0px;
font-size:22px;
display: inline-block;
color: var(--color-seven);
}
.testimonial-block_three-heading{
position: relative;
font-weight: 500;
font-size: var(--font-30);
color: var(--black-color);
margin-top: var(--margin-top-40);
}
.testimonial-block_three-text{
position: relative;
font-weight: 400;
opacity: 0.80;
line-height: 38px;
font-size: var(--font-24);
color: var(--color-twentythree);
margin-top: var(--margin-top-35);
padding-right: var(--padding-right-20);
}
.testimonial-block_three-author{
position: relative;
min-height: 99px;
font-weight: 500;
font-size: var(--font-20);
color: var(--black-color);
padding-top: var(--padding-top-25);
padding-left: var(--padding-left-115);
}
.testimonial-block_three-author .author-image{
position: absolute;
left: 0px;
top: 0px;
width: 99px;
height: 99px;
overflow: hidden;
border-radius: 50%;
}
.testimonial-block_three-author span{
position: relative;
display: block;
opacity:0.70;
font-weight: 400;
border-radius: 150px;
font-size: var(--font-16);
color: var(--color-twentyfour);
margin-top: var(--margin-top-5);
}
.testimonial-block_three-icon{
position:absolute;
right:0px;
bottom:0px;
}
.testimonial-block_three-inner:hover .testimonial-block_three-icon{
filter: grayscale(100%);
}
/***
====================================================================
Team One
====================================================================
***/
.team-one{
position: relative;
padding: 100px 0px 70px;
}
.team-one_bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-position: center top;
background-repeat: no-repeat;
}
.team-one_button .theme-btn{
border-radius:50px;
}
.team-block_one{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.team-block_one-inner{
position: relative;
}
.team-block_one-image{
position: relative;
overflow: hidden;
}
.team-block_one-image img{
position: relative;
width: 100%;
display: block;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
border-radius:200px 200px 200px 0px;
}
.team-block_one-inner:hover .team-block_one-image img{
}
.team-block_one-content{
position: absolute;
left:0px;
bottom:0px;
right:0px;
text-align: center;
margin-top: 0px;
padding: 25px 15px;
border-radius:92px 92px 92px 0px;
background: url(../images/background/scholar-two_bg.jpg);
background-size:cover;
}
.team-block_one-heading{
position: relative;
font-weight:500;
}
.team-block_one-heading a{
position: relative;
color: var(--white-color);
}
.team-block_one-heading a:hover{
color: var(--black-color);
}
.team-block_one-designation{
position: relative;
opacity: 0.70;
font-weight: 600;
font-size: var(--font-14);
color: var(--white-color);
margin-top: var(--margin-top-5);
}
.team-block_one-socials{
position: relative;
margin-top: var(--margin-top-20);
}
.team-block_one-socials a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
display: inline-block;
color: var(--white-color);
background-color: var(--color-thirty);
}
.team-block_one-socials a:hover{
background-color: var(--main-color);
}
/***
====================================================================
News Three
====================================================================
***/
.news-three{
position:relative;
padding:120px 0px 120px;
}
.news-three_bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:160px;
background-position:center center;
background-repeat:no-repeat;
}
.news-three .auto-container {
position: relative;
max-width: 1600px;
}
.news-block_four{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.news-block_four-inner{
position: relative;
border-radius: 100px 100px 10px 10px;
overflow: hidden;
background-color: #F2EFE6;
}
.news-block_four-image{
position: relative;
overflow: hidden;
background-color: var(--color-two);
}
.news-block_four-image:before{
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.news-block_four-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.news-block_four-inner:hover .news-block_four-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.news-block_four-inner:hover .news-block_four-image:before{
-webkit-animation: shine 1s;
animation: shine 1s;
}
.news-block_four-content{
position: relative;
overflow: hidden;
padding: 30px 25px 30px;
border-radius:0px 0px 10px 10px;
}
.news-block_four-meta{
position: relative;
}
.news-block_four-meta li{
position: relative;
font-weight: 400;
display: inline-block;
font-size: var(--font-15);
color: var(--color-twentyseven);
margin-right: var(--margin-right-20);
padding-left: var(--padding-left-25);
}
.news-block_four-meta li:first-child{
padding: 6px 18px;
font-size: 15px;
border-radius: 50px;
display: inline-block;
color: var(--white-color);
background-color: var(--main-color);
}
.news-block_four-meta li .icon{
position: absolute;
left: 0px;
top: 3px;
line-height: 1em;
}
.news-block_four-meta li:last-child{
margin-right: var(--margin-zero);
}
.news-block_four-meta li:last-child{
color: var(--color-twentyseven);
}
.news-block_four-heading{
position: relative;
font-weight:normal;
text-transform: capitalize;
margin-top: var(--margin-top-20);
font-family: "Abril Fatface", serif;
}
.news-block_four-heading a{
position: relative;
color: var(--black-color);
}
.news-block_four-heading a:hover{
color: var(--main-color);
}
.news-block_four-info{
position: relative;
padding: 8px 10px;
border-radius: 5px;
margin-top: var(--margin-top-25);
background-color: var(--white-color);
}
.news-block_four-author{
position: relative;
min-height: 45px;
font-weight: 500;
color: var(--black-color);
font-size: var(--font-15);
text-transform: capitalize;
padding-top: var(--padding-top-10);
padding-left: var(--padding-left-55);
}
.news-block_four-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 50px;
}
.news-block_four-more{
position: relative;
font-weight: 600;
padding: 11px 24px;
font-size: var(--font-14);
color: var(--white-color);
text-transform: capitalize;
border-radius: 0px 5px 5px 0px;
background-color: var(--black-color);
font-family:var(--font-family-Lexend);
}
.news-block_four-more:hover{
color: var(--white-color);
background-color: var(--main-color);
}
/* Dark Layout */
.dark-layout{
background-color:#0E110F;
}
.dark-layout .main-header,
.dark-layout .main-header.fixed-header .header-upper{
background-color:#141F1A;
}
.dark-layout .course-block_one-heading a,
.dark-layout .service-block_one-heading a,
.dark-layout .feature-block_one-inner,
.dark-layout .main-header .main-menu .navigation > li > a{
color:#ffffff;
}
.dark-layout .service-block_one-text{
color:#919996;
}
.dark-layout .feature-block_one-icon{
background-color:#FFD050;
}
.dark-layout .featured-one .inner-container{
background-color:#080908;
border:1px solid var(--white-color);
}
.dark-layout .welcome-one_content-outer p{
color:#727674;
}
.dark-layout .welcome-one_image{
border-radius:10px;
border:10px solid var(--white-color);
}
.dark-layout .welcome-one_years{
bottom:9px;
}
.dark-layout .service-block_one-inner{
background-color:#0E110F;
}
.dark-layout .students-one .inner-container{
background-color:var(--black-color);
}
.dark-layout .students-one:before{
position:absolute;
content:'';
left:0px;
top:80px;
right:0px;
bottom:0px;
background-color:#242F22;
}
.dark-layout .courses-one{
background-color:#0E110F;
}
.dark-layout .course-block_one-inner{
background-color:#12211A;
}
.dark-layout .course-block_one-list li{
color:var(--white-color);
}
.dark-layout .course-block_one-text{
color:#919996;
}
.dark-layout .institute-one:before{
position:absolute;
content:'';
left:0px;
top:-90px;
right:0px;
bottom:0px;
background-color:#16221A;
}
.dark-layout .cta-one{
z-index:10;
}
.dark-layout .institute-block_one.color-four .institute-block_one-inner,
.dark-layout .institute-block_one.color-three .institute-block_one-inner,
.dark-layout .institute-block_one.color-two .institute-block_one-inner,
.dark-layout .institute-block_one-inner{
background-color:var(--black-color);
}
.dark-layout .institute-block_one-icon{
background-color:#FFD050;
}
.dark-layout .testimonial-one .swiper-pagination-bullet{
border-color:#ffffff;
}
.dark-layout .news-block_one-author,
.dark-layout .news-block_one-heading a,
.dark-layout .price-block_one-heading,
.dark-layout .testimonial-block_one-author,
.dark-layout .testimonial-block_one-heading,
.dark-layout .institute-block_one-heading a{
color:var(--white-color);
}
.dark-layout .institute-block_one-text{
color:#727170;
}
.dark-layout .testimonial-block_one-text{
color:#D2D2D2;
}
.dark-layout .price-block_one-inner{
background-color:#0F0E0B;
}
.dark-layout .news-one,
.dark-layout .gallery-one,
.dark-layout .price-one{
background-color:#131B16;
}
.dark-layout .cta-two:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
height:105px;
background-color: #131B16;
}
.dark-layout .mobile-menu .menu-box{
background-color: #131B16;
}
.dark-layout .main-header .mobile-menu .navigation li.dropdown .dropdown-btn,
.dark-layout .main-header .mobile-menu .navigation li > a,
.dark-layout .mobile-menu .close-btn{
color: #ffffff;
}
.dark-layout .main-header .mobile-menu .navigation li > ul > li:first-child,
.dark-layout .main-header .mobile-menu .navigation,
.dark-layout .main-header .mobile-menu .navigation li{
border-color:rgba(255,255,255,0.20);
}
/* Index 05 */
/***
====================================================================
Main Slider Five
====================================================================
***/
.slider-five{
position:relative;
}
.slider-five_bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-size:cover;
}
.slider-five .swiper-slide{
position:relative;
overflow:hidden;
padding:30px 0px 0px;
}
.slider-five_content{
position:relative;
z-index: 1;
}
.slider-five_content-inner{
position:relative;
padding-top: 150px;
}
.slider-five_title{
position: relative;
color:#000000;
font-size:20px;
padding:8px 35px 8px 20px;
display:inline-block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
background:url(../images/main-slider/title-bg.png) no-repeat;
}
.slider-five .swiper-slide-active .slider-five_title{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-five_heading{
font-size:90px;
line-height:95px;
margin-right:-20px;
color: var(--black-color);
text-transform: capitalize;
margin-top:var(--margin-top-20);
margin-bottom:var(--margin-bottom-25);
font-weight:700;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
font-family: "Abril Fatface", serif;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
font-family: 'Lexend', sans-serif;
}
.slider-five .swiper-slide-active .slider-five_heading{
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-five_text{
position: relative;
max-width: 750px;
line-height: 30px;
font-weight: 400;
font-size: var(--font-20);
color: #585956;
margin-top:var(--margin-top-20);
margin-bottom:var(--margin-bottom-45);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-five .swiper-slide-active .slider-five_text{
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-five .slider-five_button{
display:inline-block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-five .slider-five_button img{
position:relative;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
.slider-five .swiper-slide-active .slider-five_button{
-webkit-transition-delay: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-five .slider-five_button:hover img{
filter: brightness(300%);
}
.slider-five_images-column{
position: relative;
}
.slider-five_images-outer{
position: relative;
}
.slider-five_vector{
position:absolute;
left:0px;
top:0px;
width:764px;
bottom:0px;
background-position:left top;
background-repeat:no-repeat;
}
.slider-five_images-column .image{
position:relative;
left:30px;
padding-top:25px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-five_images-column .image img{
max-width:inherit;
clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-five .swiper-slide-active .slider-five_images-column .image img{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slider-five .swiper-slide-active .slider-five_images-column .image{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.slider-five_circle{
position:absolute;
left:3%;
top:49%;
width:199px;
height:199px;
background-repeat:no-repeat;
}
.slider-five_vector-1{
position:absolute;
left:-340px;
top:140px;
width:303px;
height:52px;
background-repeat:no-repeat;
}
.slider-five_vector-2{
position:absolute;
right:60px;
bottom:-50px;
width:52px;
height:303px;
background-repeat:no-repeat;
}
.slider-five_vector-3{
position:absolute;
right:-300px;
top:120px;
width:52px;
height:303px;
background-repeat:no-repeat;
}
.slider-five_vector-4{
position:absolute;
left:-100px;
bottom:-50px;
width:93px;
height:101px;
background-repeat:no-repeat;
}
.slider-five_muhammad{
position:absolute;
right:50px;
top:15%;
width:96px;
height:96px;
background-repeat:no-repeat;
}
/***
====================================================================
About Two
====================================================================
***/
.about-two{
position:relative;
padding:140px 0px 110px;
}
.about-two_pattern{
position:absolute;
left:0px;
top:-60px;
width:374px;
bottom:0px;
background-position:left top;
background-repeat:no-repeat;
}
.about-two_shadow{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-position:left top;
background-repeat:no-repeat;
}
.about-two_vector{
position:absolute;
right:0px;
top:0px;
width:345px;
height:817px;
background-repeat:no-repeat;
}
.about-two_image-column{
position:relative;
margin-bottom:30px;
}
.about-two_image-outer{
position:relative;
margin-left:-70px;
display:inline-block;
}
.about-two:hover .about-two_image-outer:before{
transform:rotate(-10deg);
}
.about-two_image-outer:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
bottom:0px;
background-color:#c5e96b;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.about-two .color-box{
position:absolute;
right:50px;
bottom:0px;
width:394px;
height:230px;
z-index:-1;
background-color:#A2B2AD;
}
.about-two_image{
position:relative;
z-index:1;
display:inline-block;
}
.about-two_image:before{
position:absolute;
content:'';
left:12px;
top:12px;
right:12px;
bottom:12px;
border:1px solid var(--white-color);
}
.feature-block_two{
position:relative;
margin-bottom:25px;
}
.feature-block_two-inner{
position:relative;
padding-left:90px;
color:#3C5C4E;
font-size:14px;
line-height:24px;
}
.feature-block_two-icon{
position:absolute;
left:0px;
top:0px;
width:68px;
height:68px;
border-radius:80px;
background-color:var(--black-color);
}
.feature-block_two-inner strong{
position:relative;
display:block;
font-size:20px;
margin-bottom:10px;
color:var(--black-color);
}
.about-two_content-column{
position:relative;
margin-bottom:30px;
}
.about-two_content-outer{
position:relative;
padding-left:30px;
}
.about-two_text{
position:relative;
font-size:16px;
opacity:0.80;
line-height:28px;
margin-bottom:25px;
color:var(--black-color);
}
.about-two_learning{
position:relative;
font-size:18px;
line-height:28px;
font-weight:700;
color:var(--black-color);
}
.about-two_button{
position:relative;
margin-top:35px;
}
/***
====================================================================
Experiance One
====================================================================
***/
.experiance-one{
position:relative;
padding:110px 0px 80px;
background-color:#CFDDD9;
}
.experiance-one .auto-container{
max-width:1720px;
}
.experiance-one.style-two{
background:none;
padding:120px 0px 200px;
}
.experiance-one.style-two:before{
position: absolute;
content:'';
left: 50px;
top: 0px;
right: 50px;
bottom: 0px;
overflow: hidden;
border-radius: 50px 50px;
background-color:#cfddd9;
}
/* Experiance Block One */
.experiance-block_one{
position:relative;
margin-bottom:30px;
}
.experiance-block_one-inner{
position:relative;
border-radius:46px;
padding:45px 45px 45px;
background-color:#C5E96B;
border:1px solid var(--black-color);
}
.experiance-block_one-years{
position:relative;
font-weight:600;
font-size:40px;
color:#000000;
line-height:50px;
}
.experiance-block_one-years span{
position:relative;
display:block;
font-size:64px;
margin-bottom:20px;
}
.experiance-block_one-image{
position:relative;
margin-top:30px;
overflow:hidden;
border-radius:46px;
}
.experiance-block_one-image img{
position:relative;
width:100%;
display:block;
}
/* Experiance Block Two */
.experiance-block_two{
position:relative;
margin-bottom:30px;
}
.experiance-block_two-inner{
position:relative;
border-radius:46px;
padding:50px 45px 50px;
background-color:var(--white-color);
border:1px solid var(--black-color);
}
.experiance-block_two-title{
position:relative;
font-weight:500;
}
.experiance-block_two-title a{
position:relative;
color:#010212;
}
.experiance-block_two-title a:hover{
color:#c5e96b;
}
.experiance-block_two-text{
position:relative;
color:#3C5C4E;
font-size:16px;
line-height:26px;
margin-top:25px;
margin-bottom:30px;
}
.experiance-block_two-classes{
position:relative;
color:#010212;
display:block;
font-weight:600;
font-size:14px;
padding:15px 10px;
text-align:center;
border-radius:5px;
margin-bottom:35px;
background-color:#c5e96b;
}
.experiance-block_two-classes:hover{
color:#ffffff;
background-color:#010212;
}
.experiance-block_two-studeents{
position:relative;
min-height:117px;
padding-left:145px;
}
.experiance-block_two-icon{
position:absolute;
left:0px;
top:0px;
width:117px;
height:117px;
line-height:117px;
border-radius:150px;
text-align:center;
background-color:#000000;
}
.experiance-block_two-studeents span{
position:relative;
font-size:64px;
font-weight:500;
color:var(--black-color);
}
.experiance-block_two-studeents strong{
position:relative;
font-size:24px;
font-weight:500;
display:block;
color:var(--black-color);
}
.experiance-block_two-check{
position:relative;
font-weight:700;
font-size:16px;
margin-top:35px;
color:var(--black-color);
}
/* Experiance Block Three */
.experiance-block_three{
position:relative;
margin-bottom:30px;
}
.experiance-block_three-inner{
position:relative;
border-radius:46px;
padding:50px 40px 50px;
background-color:var(--white-color);
border:1px solid var(--black-color);
}
.experiance-block_three-content{
position:relative;
padding-top:15px;
min-height:211px;
padding-left:240px;
margin-bottom:35px;
}
.experiance-block_three-image{
position:absolute;
left:0px;
top:0px;
width:211px;
height:211px;
overflow:hidden;
border-radius:150px;
}
.experiance-block_three-title{
position:relative;
font-weight:500;
margin-bottom:15px;
}
.experiance-block_three-title a{
position:relative;
color:#010212;
}
.experiance-block_three-text{
position:relative;
color:#3C5C4E;
font-size:16px;
line-height:28px;
}
.experiance-block_three-text.alternate{
margin-top:20px;
}
.experiance-block_three-students{
position:relative;
font-weight:500;
font-size:64px;
color:#000000;
line-height:56px;
}
.experiance-block_three-students span{
position:relative;
display:block;
font-size:24px;
}
.experiance-block_three-btn{
position:relative;
color:#000000;
font-size:16px;
font-weight:600;
padding:18px 40px;
border-radius:5px;
display:inline-block;
background-color:#c5e96b;
}
.experiance-block_three-btn:hover{
color:#ffffff;
background-color:#000000;
}
/***
====================================================================
Offer One
====================================================================
***/
.offer-one{
position: relative;
padding: 140px 0px 120px;
background-color:#F9F8F2;
}
.offer-one .sec-title-two{
margin-bottom:50px;
}
.offer-block_one{
position:relative;
margin-bottom:30px;
}
.offer-block_one-inner{
position:relative;
overflow:hidden;
text-align:center;
border-radius:153px 153px;
background-color:#ffffff;
}
.offer-block_one-image{
position:relative;
background-color:#A2B2AD;
}
.offer-block_one-image img{
position:relative;
width:100%;
display:block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.offer-block_one-inner:hover .offer-block_one-image img{
opacity:0.70;
}
.offer-block_one-icon{
position:absolute;
left:50%;
bottom:-25px;
width:77px;
height:77px;
z-index:1;
margin:0 auto;
padding:18px 18px;
border-radius:50px;
background-color:#ffffff;
transform:translateX(-50%);
box-shadow:0px 0px 15px rgba(0,0,0,0.10);
}
.offer-block_one-content{
position:relative;
padding:25px 20px 55px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.offer-block_one-inner:hover .offer-block_one-content{
background-color:#c5e96b;
}
.offer-block_one-title{
position:relative;
font-weight:600;
margin-top:15px;
z-index:1;
}
.offer-block_one-title a{
position:relative;
color:#0F0E0B;
}
.offer-block_one-btn{
position:relative;
margin-top:30px;
z-index:1;
}
.offer-block_one-classes{
position:relative;
font-size:14px;
color:#000000;
font-weight:600;
padding:12px 33px 12px;
border-radius:5px;
display:inline-block;
text-transform:capitalize;
background-color:#C5E96B;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
border:1px solid transparent;
}
.offer-block_one-inner:hover .offer-block_one-classes{
color:#000000;
border-color:#000000;
background-color:#ffffff;
}
.offer-block_one-vector{
position:absolute;
left:0px;
top:0px;
bottom:40px;
right:0px;
background-position:center bottom;
background-repeat:no-repeat;
}
/***
====================================================================
Courses Four
====================================================================
***/
.courses-four{
position:relative;
padding:120px 0px 140px;
background-color:#E5EAE8;
}
.courses-four.style-two{
background:none;
}
.courses-four.style-two:before{
position:absolute;
content:'';
left:50px;
top:0px;
right:50px;
bottom:0px;
border-radius:30px 30px 0px 0px;
background-color:#E5EAE8;
}
.courses-four .auto-container{
position:relative;
max-width:1610px;
}
.courses-four .sec-title-two{
margin-bottom:60px;
}
.courses-four .sec-title-two_title span{
padding:5px 25px 5px 15px;
}
.offer-block_two{
position:relative;
margin-bottom:30px;
}
.offer-block_two-inner{
position:relative;
text-align:center;
}
.offer-block_two-image{
position:relative;
overflow:hidden;
}
.offer-block_two-image:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
height:171px;
z-index:1;
background: url(../images/background/gumbad.png) no-repeat;
background-size: cover;
background-position: center center;
}
.offer-block_two-image img{
position:relative;
width:100%;
display:block;
object-fit: cover;
overflow:hidden;
}
.offer-block_two-inner:hover .offer-block_two-image::after{
-webkit-animation: shine 1s;
animation: shine 1s;
}
.offer-block_two-image:after{
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
z-index:10;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.offer-block_two-image .content{
position:absolute;
left:0px;
right:0px;
bottom:0px;
}
.offer-block_two-number{
position:relative;
width:46px;
height:46px;
font-size:18px;
line-height:46px;
font-weight:500;
text-align:center;
border-radius:50px;
display:inline-block;
color: var(--black-color);
background-color: var(--white-color);
font-family: 'Lexend', sans-serif;
}
.offer-block_two-fee{
position: relative;
font-weight: 500;
font-size: 13px;
text-align: center;
display: block;
color: var(--black-color);
text-transform: capitalize;
}
.offer-block_two-fee > div{
position: relative;
padding: 8px 25px;
border-radius: 50px;
display:inline-block;
background-color: #C5E96B;
}
.offer-block_two-fee span{
position: relative;
display: block;
font-size: var(--font-16);
color: var(--black-color);
}
.offer-block_two-author{
position: relative;
min-height: 40px;
border-radius:50px;
padding:11px 15px 9px;
display:inline-block;
font-size: var(--font-13);
color: var(--black-color);
background-color:#D1E0DC;
}
.offer-block_two-author_inner{
position:relative;
padding-left:50px;
text-align:left;
}
.offer-block_two-author_image{
position: absolute;
left: 0px;
top: 2px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
border:2px solid #ffffff;
}
.offer-block_two-author strong{
position: relative;
display: block;
font-weight: 500;
font-size: var(--font-16);
color: var(--black-color);
}
.offer-block_two-content{
position:relative;
padding:0px 20px 34px;
background-color:#ffffff;
border-radius:0px 0px 30px 30px;
}
.offer-block_two-list{
position: relative;
padding: 10px 30px;
display: block;
background-color:#EEF6F4;
}
.offer-block_two-list li{
position: relative;
font-size: 14px;
line-height: 20px;
font-weight: 600;
text-align: center;
color: var(--black-color);
text-transform:capitalize;
}
.offer-block_two-list:before{
position:absolute;
content:'';
left:33.333%;
width:1px;
top:10px;
bottom:10px;
border-right:1px solid rgba(0,0,0,0.06);
}
.offer-block_two-list:after{
position:absolute;
content:'';
right:30%;
width:1px;
top:10px;
bottom:10px;
border-right:1px solid rgba(0,0,0,0.06);
}
.offer-block_two-list li span{
position: relative;
display: block;
}
.offer-block_two-title{
position:relative;
padding:25px 0px;
font-weight:700;
}
.offer-block_two-title a{
position:relative;
color:#0F0E0B;
}
.offer-block_two-btn{
position:relative;
}
.offer-block_two-more{
position:relative;
font-size:14px;
color:#000000;
display:block;
font-weight:600;
margin:0px 20px;
padding:15px 10px;
border-radius:5px;
text-transform:capitalize;
background-color:#C5E96B;
}
.offer-block_two-more:hover{
color:#ffffff;
background-color:#000000;
}
.offer-block_two.style-two .offer-block_two-inner:hover .offer-block_two-list{
border-color:#EEF6F4;
}
.offer-block_two.style-two .offer-block_two-list{
border-radius:8px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
border:1px solid var(--black-color);
}
.offer-block_two.style-two .offer-block_two-more{
border-radius:50px;
padding:14px 30px;
display:inline-block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
border:1px solid var(--black-color);
}
.offer-block_two.style-two .offer-block_two-inner:hover .offer-block_two-more{
display:block;
border-color:#c5e96b;
}
.offer-block_two.style-two .offer-block_two-image .content:before{
position:absolute;
content:'';
left:0px;
bottom:0px;
right:0px;
height:95px;
background-color:var(--white-color);
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.offer-block_two.style-two .offer-block_two-inner:hover .offer-block_two-number{
opacity:0;
}
.offer-block_two.style-two .offer-block_two-inner:hover .content:before{
height:0px;
}
/***
====================================================================
CTA Four
====================================================================
***/
.cta-four{
position:relative;
text-align:center;
padding:80px 0px 75px;
background-color:#C5E96B;
}
.cta-four_title{
position:relative;
color:#000000;
font-weight:600;
margin-bottom:35px;
text-transform:capitalize;
}
.cta-four_pattern{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-position:center bottom;
background-repeat:repeat-x;
}
/***
====================================================================
Events Two
====================================================================
***/
.events-two{
position: relative;
padding: 140px 0px 110px;
background-color:#F9F8F2;
}
.events-two .sec-title-two{
margin-bottom:90px;
}
.events-two .sec-title-two_title span{
padding:6px 25px 4px 15px;
}
.event-block_two{
position:relative;
margin-bottom:30px;
}
.event-block_two-inner{
position:relative;
}
.event-block_two-image{
position:relative;
overflow:hidden;
overflow:hidden;
border-radius:153px 153px 0px 0px;
}
.event-block_two-image img{
position:relative;
width:100%;
display:block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.event-block_two-inner:hover .event-block_two-image img{
transform:scale(1.05,1.05);
}
.event-block_two-inner:hover .event-block_two-image::after{
-webkit-animation: shine 1s;
animation: shine 1s;
}
.event-block_two-image:after{
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
z-index:10;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.event-block_two-date{
position:absolute;
left:50%;
z-index:1;
top:-17px;
font-size:15px;
color:#C5E96B;
padding:6px 15px;
border-radius:5px;
display:inline-block;
transform:translateX(-50%);
background-color:var(--black-color);
}
.event-block_two-content{
position:relative;
text-align:center;
padding:40px 45px 0px;
}
.event-block_two-content:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
bottom:30px;
border-radius:0px 0px 153px 153px;
background-color:var(--white-color);
}
.event-block_two-title{
position:relative;
z-index:1;
}
.event-block_two-title a{
position:relative;
color:#0F0E0B;
}
.event-block_two-meta{
position:relative;
margin-top:15px;
}
.event-block_two-meta li{
position:relative;
margin:0px 5px;
color:#0F0E0B;
font-size:14px;
display:inline-block;
}
.event-block_two-meta li .icon{
position:relative;
top:-1px;
margin-right:5px;
}
.event-block_two-btn{
position:relative;
display:block;
z-index:1;
margin-top:30px;
}
.event-block_two-arrow{
position:relative;
width:77px;
height:77px;
line-height:75px;
border-radius:150px;
display:inline-block;
border:2px solid var(--black-color);
}
.event-block_two-inner:hover .event-block_two-arrow{
background-color:#C5E96B;
}
.event-block_two-pattern{
position:absolute;
left:0px;
right:0px;
bottom:50px;
height:126px;
background-position:center center;
background-repeat:no-repeat;
}
/***
====================================================================
Scholar Two
====================================================================
***/
.scholar-two{
position: relative;
padding: 140px 0px 110px;
}
.scholar-two .sec-title-two_title span{
padding:3px 25px 4px 15px;
}
.scholar-two .sec-title-two{
margin-bottom:60px;
}
.scholar-two:before{
position: absolute;
content:'';
left:0px;
top:0px;
right:0px;
bottom:0px;
opacity:0.90;
background-color:#CED2D0;
}
.scholar-block_two{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.scholar-block_two-inner{
position: relative;
}
.scholar-block_two-image{
position: relative;
overflow: hidden;
}
.scholar-block_two-image:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
height:170px;
z-index:1;
background: url(../images/background/scholar-pattern.png) no-repeat;
background-size: cover;
background-position: center top;
}
.scholar-block_two-image img{
position: relative;
width: 100%;
display: block;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
}
.scholar-block_two-inner:hover .scholar-block_two-image img{
}
.scholar-block_two-content{
position: relative;
text-align: center;
padding: 25px 15px;
border-radius:0px 0px 100px 100px;
background-color:#CFDDD9;
}
.scholar-block_two-heading{
position: relative;
font-weight:500;
}
.scholar-block_two-heading a{
position: relative;
color: #000000;
}
.scholar-block_two-heading a:hover{
color: var(--black-color);
}
.scholar-block_two-designation{
position: relative;
color: #3e4241;
font-weight: 600;
font-size: var(--font-14);
margin-top: var(--margin-top-5);
}
.scholar-block_two-socials{
position: relative;
margin-top: var(--margin-top-20);
}
.scholar-block_two-socials a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
display: inline-block;
color: var(--white-color);
background-color: #123030;
}
.scholar-block_two-socials a:hover{
color:#1c8e5a;
background-color: var(--white-color);
}
/***
====================================================================
News Four
====================================================================
***/
.news-four{
position:relative;
padding:140px 0px 110px;
}
.news-four .sec-title-two{
margin-bottom:60px;
}
.news-four .auto-container{
max-width:1600px;
}
.news-four.style-two{
padding:130px 0px 90px;
}
.news-four.style-two .auto-container{
max-width:1200px;
}
.news-block_five{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.news-block_five-inner{
position: relative;
}
.news-block_five-inner:before{
position: absolute;
content:'';
left:0px;
top:150px;
right:0px;
bottom:0px;
border-radius:0px 0px 15px 15px;
background-color: #F4F6EE;
}
.news-block_five-image{
position: relative;
overflow: hidden;
background-color: var(--color-two);
}
.news-block_five-image:after{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
height:162px;
z-index:1;
background: url(../images/background/news-block_five-pattern.png) no-repeat;
background-size: cover;
background-position: center top;
}
.news-block_five-image:before{
position: absolute;
top: 0;
left: -85%;
z-index: 99;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.news-block_five-image img{
position: relative;
width: 100%;
display: block;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.news-block_five-inner:hover .news-block_five-image img{
opacity: 0.70;
transform: scale(1.05,1.05) rotate(2deg);
}
.news-block_five-inner:hover .news-block_five-image:before{
-webkit-animation: shine 1s;
animation: shine 1s;
}
.news-block_five-content{
position: relative;
padding: 30px 25px 35px;
border-radius:0px 0px 10px 10px;
}
.news-block_five-content:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
bottom:-30px;
background-color: #F4F6EE;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.news-block_five-meta{
position: relative;
}
.news-block_five-meta li{
position: relative;
font-weight: 400;
display: inline-block;
font-size: var(--font-15);
color: var(--black-color);
margin-right: var(--margin-right-20);
padding-left: var(--padding-left-25);
}
.news-block_five-meta li:first-child{
padding: 6px 18px;
font-size: 15px;
border-radius: 50px;
display: inline-block;
color: var(--black-color);
background-color: #C5E96B;
border:1px solid var(--black-color);
}
.news-block_five-meta li .icon{
position: absolute;
left: 0px;
top: 0px;
line-height: 1em;
}
.news-block_five-meta li:last-child{
color: var(--black-color);
margin-right: var(--margin-zero);
}
.news-block_five-heading{
position: relative;
text-transform: capitalize;
margin-top: var(--margin-top-20);
}
.news-block_five-heading a{
position: relative;
color: var(--black-color);
}
.news-block_five-heading a:hover{
color: var(--main-color);
}
.news-block_five-info{
position: relative;
margin-top: var(--margin-top-25);
}
.news-block_five-author{
position: relative;
min-height: 45px;
font-weight: 400;
color: #656565;
font-size: 14px;
text-transform: capitalize;
padding-left: var(--padding-left-55);
}
.news-block_five-author strong{
color:#000000;
display:block;
font-weight:500;
}
.news-block_five-author_image{
position: absolute;
left: 0px;
top: 0px;
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 50px;
}
.news-block_five-more{
position: relative;
font-weight: 600;
padding: 10px 23px;
border-radius: 5px 5px;
font-size: var(--font-14);
color: var(--black-color);
text-transform: capitalize;
border:1px solid var(--black-color);
background-color:var(--white-color);
font-family:var(--font-family-Lexend);
}
.news-block_five-more:hover{
color: var(--black-color);
background-color: #C5E96B;
}
/* Index 06 */
/***
====================================================================
Main Slider Six
====================================================================
***/
.slider-six{
position:relative;
}
.slider-six_shadow{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:65px;
z-index:1;
background-position:left top;
background-repeat:no-repeat;
}
.slider-six_shadow-two{
position:absolute;
left:360px;
top:0px;
right:0px;
bottom:65px;
z-index:1;
background-position:left top;
background-repeat:no-repeat;
}
.slider-six_shadow-three{
position:absolute;
left:0px;
top:0px;
right:50px;
bottom:65px;
z-index:1;
background-position:right top;
background-repeat:no-repeat;
}
.slider-six_bg{
position:absolute;
left:50px;
top:0px;
right:50px;
bottom:30px;
overflow:hidden;
border-radius:50px;
background-size:cover;
}
.slider-six .swiper-slide{
position:relative;
overflow:hidden;
padding:155px 0px 60px;
}
.slider-six_content{
position:relative;
z-index: 1;
}
.slider-six_content-inner{
position:relative;
}
.slider-six_heading{
font-size:90px;
line-height:95px;
margin-right:-20px;
color: var(--black-color);
text-transform: capitalize;
/* margin-top:var(--margin-top-20); */
margin-bottom:var(--margin-bottom-45);
font-weight:700;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
font-family: "Abril Fatface", serif;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
font-family: 'Lexend', sans-serif;
}
.slider-six .swiper-slide-active .slider-six_heading{
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-six_text{
position: relative;
max-width: 600px;
line-height: 30px;
font-weight: 400;
color: #585956;
padding-left:180px;
font-size: var(--font-20);
margin-bottom:var(--margin-bottom-45);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-six_text span{
position: absolute;
left:0px;
top:0px;
z-index:1;
}
.slider-six .swiper-slide-active .slider-six_text{
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-six .slider-six_button{
display:inline-block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.slider-six .slider-six_button img{
position:relative;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
.slider-six .swiper-slide-active .slider-six_button{
-webkit-transition-delay: 1300ms;
-moz-transition-delay: 1300ms;
-ms-transition-delay: 1300ms;
-o-transition-delay: 1300ms;
transition-delay: 1300ms;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slider-six .slider-six_button:hover img{
filter: brightness(300%);
}
.slider-six_images-column{
position: relative;
}
.slider-six_images-outer{
position: relative;
margin-top:-30px;
}
.slider-six_images-column .image{
position:relative;
left:30px;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-six_images-column .image img{
max-width:inherit;
clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
}
.slider-six .swiper-slide-active .slider-six_images-column .image img{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slider-six .swiper-slide-active .slider-six_images-column .image{
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.slider-six_vector-1{
position:absolute;
left:5%;
top:170px;
width:106px;
height:106px;
background-repeat:no-repeat;
}
.slider-six_vector-2{
position:absolute;
left:55%;
top:10%;
width:96px;
height:96px;
background-repeat:no-repeat;
}
.slider-six_mosque{
position:absolute;
left:50px;
bottom:30px;
right:50px;
height:783px;
opacity:0.10;
overflow:hidden;
background-repeat:repeat-x;
border-radius:0px 0px 45px 45px;
animation: slideRightToLeft 20s linear infinite;
background-position: right; /* Start from the right */
}
@keyframes slideRightToLeft {
0% {
background-position: right;
}
100% {
background-position: left;
}
}
.slider-six_courses{
position:absolute;
right:-300px;
top:20px;
border-radius:100px;
padding:18px 28px 18px 18px;
background-color:var(--white-color);
-webkit-animation: icon-bounce 0.8s ease-out infinite;
animation: icon-bounce 0.8s ease-out infinite;
}
.slider-six_courses-inner{
position:relative;
font-size:28px;
min-height:80px;
padding-top:15px;
padding-left:95px;
font-weight:500;
color:var(--black-color);
}
.slider-six_courses-inner span{
position:absolute;
left:0px;
top:0px;
width:80px;
height:80px;
line-height:80px;
text-align:center;
border-radius:80px;
display:inline-block;
background-color:#c5e96b;
}
.slider-six_courses-inner i{
position:relative;
display:block;
color:#999999;
font-size:22px;
margin-top:15px;
font-weight:400;
}
.slider-six_audio-player{
position:relative;
}
.slider-six_audio-player .auto-container{
position:relative;
max-width:1700px;
}
.slider-six_audio-player .title-outer{
position:relative;
}
.slider-six_audio-player .title-outer .title{
position:relative;
font-size:20px;
font-weight:600;
padding:20px 135px;
display:inline-block;
color:var(--black-color);
font-family: 'Inter', sans-serif;
border-radius:25px 25px 0px 0px;
background-color:var(--white-color);
}
.slider-six_audio-player .audio-player {
gap:25px;
width: 100%;
padding: 15px 40px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
background-color:var(--black-color);
}
.slider-six_audio-player .player-controls {
display: flex;
justify-content: center;
align-items: center;
}
.slider-six_audio-player .play-title_name{
position:relative;
font-size:16px;
width: 250px;
color:var(--white-color);
text-transform:uppercase;
}
.slider-six_audio-player .player-controls button {
width:37px;
height:37px;
border: none;
margin: 0 2px;
cursor: pointer;
font-size: 15px;
background: none;
border-radius:50px;
transition: color 0.6s;
color:var(--white-color);
background-color:rgba(255,255,255,0.10);
}
.slider-six_audio-player .player-controls button:hover {
color:var(--white-color);
background-color:var(--color-two);
}
.slider-six_audio-player .progress-container {
width: 48%;
height: 16px;
overflow:hidden;
background: #101010;
border-radius: 50px;
cursor: pointer;
}
.slider-six_audio-player .progress-bar {
height: 100%;
background-color:var(--white-color);
border-radius: 4px;
width: 0%;
}
.slider-six_audio-player .time-display {
display: flex;
font-size: 20px;
font-weight:600;
color:var(--white-color);
justify-content: space-between;
}
.slider-six_audio-player .volume-control {
display: flex;
font-size: 22px;
align-items: center;
color:var(--white-color);
}
.slider-six_audio-player .volume-control input {
flex-grow: 1;
margin-left: 10px;
}
.slider-six_audio-player .speed-control {
display: flex;
font-size:16px;
align-items: center;
color:var(--white-color);
}
.slider-six_audio-player .speed-control select {
margin-left: 10px;
padding: 5px;
border-radius: 4px;
border: 1px solid #ddd;
}
/***
====================================================================
About Three
====================================================================
***/
.about-three{
position:relative;
padding:140px 0px 150px;
}
.about-three_lamp{
position:absolute;
right:0px;
top:0px;
width:345px;
bottom:0px;
height:1032px;
background-position:left top;
background-repeat:no-repeat;
}
.about-three_dots{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-position:center center;
background-repeat:no-repeat;
}
.about-three_image-column{
position:relative;
z-index:1;
margin-bottom:30px;
}
.about-three_image-outer{
position:relative;
display:block;
}
.about-three_image{
position:relative;
z-index:1;
margin-left:-80px;
padding-top:175px;
display:inline-block;
}
.about-three_circle{
position:absolute;
content:'';
left:-250px;
top:0px;
right:0px;
bottom:0px;
z-index:-1;
width:762px;
height:762px;
background-repeat:no-repeat;
}
.feature-block_three{
position:relative;
margin-left:-18px;
margin-bottom:25px;
}
.feature-block_three-inner{
position:relative;
color:#3C5C4E;
font-size:14px;
text-align:center;
}
.feature-block_three-icon{
position:relative;
display:block;
margin-bottom:15px;
}
.feature-block_three-inner strong{
position:relative;
display:block;
font-size:20px;
line-height:28px;
margin-bottom:10px;
color:var(--black-color);
}
.about-three_text{
position:relative;
font-size:16px;
line-height:28px;
margin-bottom:30px;
color:var(--black-color);
}
.about-three_content-column{
position:relative;
margin-bottom:30px;
}
.about-three_content-outer{
position:relative;
}
.about-three_list{
position:relative;
}
.about-three_list li{
position:relative;
margin-bottom:15px;
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: var(--black-color);
}
.about-three_list li i{
position:relative;
margin-right:12px;
}
.about-three_list li:last-child{
margin-bottom:0px;
}
.about-three_button{
position:relative;
margin-top:35px;
}
.about-three_button .theme-btn{
border-radius:50px;
}
/***
====================================================================
Learning Two
====================================================================
***/
.learning-two{
position:relative;
padding:0px 0px 0px;
}
.learning-two_content-column{
position:relative;
margin-bottom:30px;
}
.learning-two_content-outer{
position:relative;
padding-top:80px;
}
.learning-two_image-column{
position:relative;
margin-bottom:30px;
}
.learning-two_image-outer{
position:relative;
}
.learning-two_button .theme-btn{
border-radius:50px;
}
/***
====================================================================
Services Four
====================================================================
***/
.service-four{
position: relative;
padding: 200px 0px 170px;
}
.service-four_bg{
position:absolute;
left:50px;
top:0px;
right:50px;
bottom:0px;
border-radius:40px;
background-color:#f6f5ee;
}
.service-four_pattern{
position:absolute;
left:50px;
top:0px;
right:50px;
height:97px;
overflow:hidden;
border-radius:40px 40px 0px 0px;
background-repeat: repeat-x;
background-size: auto 100%; /* optional, adjust if needed */
animation: scrollBg 20s linear infinite;
}
@keyframes scrollBg {
0% {
background-position: 0 0;
}
100% {
background-position: -1000px 0; /* adjust this value based on your pattern width */
}
}
.service-four_pattern-two{
position:absolute;
left:50px;
bottom:0px;
right:50px;
height:97px;
overflow:hidden;
border-radius:0px 0px 40px 40px;
background-repeat: repeat-x;
background-size: auto 100%; /* optional */
animation: scrollBgLTR 20s linear infinite;
}
@keyframes scrollBgLTR {
0% {
background-position: -1000px 0;
}
100% {
background-position: 0 0;
}
}
.service-four .auto-container{
max-width:1500px;
}
/* Service Block Four */
.service-block_four{
position: relative;
padding:0px 25px;
margin-bottom: var(--margin-bottom-30);
}
.service-block_four-inner{
position: relative;
padding:25px 25px 0px;
background-position:left bottom;
background-repeat:no-repeat;
}
.service-block_four-image{
position: relative;
background-color:var(--main-color);
border-radius: 150px 150px 0px 0px;
}
.service-block_four-image img{
position: relative;
width:100%;
display:block;
transition:all 900ms ease;
-moz-transition:all 900ms ease;
-webkit-transition:all 900ms ease;
-ms-transition:all 900ms ease;
-o-transition:all 900ms ease;
border-radius: 150px 150px 0px 0px;
}
.service-block_four-inner:hover .service-block_four-image img{
opacity:0.70;
}
.service-block_four-icon{
position:absolute;
left:50%;
bottom:-25px;
width:77px;
height:77px;
z-index:1;
margin:0 auto;
padding:18px 18px;
border-radius:50px;
background-color:#ffffff;
transform:translateX(-50%);
box-shadow:0px 0px 15px rgba(0,0,0,0.10);
}
.service-block_four-content{
position: relative;
text-align:center;
padding:40px 35px 60px;
}
.service-block_four-heading{
position:relative;
}
.service-block_four-heading a{
position:relative;
color:var(--black-color);
}
.service-block_four-heading a:hover{
}
.service-block_four-button{
position:relative;
margin-top:20px;
}
.service-block_four-button a{
position:relative;
font-size:14px;
font-weight:600;
padding:12px 32px;
border-radius:50px;
display:inline-block;
color:var(--color-nine);
text-transform:capitalize;
background-color:#c5e96b;
border:2px solid var(--black-color);
}
.service-block_four-button a:hover{
background-color:var(--white-color);
}
.service-block_four-vector{
position:absolute;
left:-30px;
top:0px;
right:-30px;
bottom:0px;
background-size:cover;
background-repeat:no-repeat;
}
.service-block_four-hover{
position:absolute;
left:-30px;
top:0px;
right:-30px;
bottom:0px;
opacity:0;
background-size:cover;
background-repeat:no-repeat;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.service-block_four-inner:hover .service-block_four-hover{
opacity:1;
}
/***
====================================================================
CTA Five
====================================================================
***/
.cta-five{
position:relative;
text-align:center;
margin-bottom:125px;
padding:80px 0px 75px;
}
.cta-five_title{
position:relative;
color:#000000;
font-size:48px;
font-weight:600;
margin-bottom:35px;
text-transform:capitalize;
}
.cta-five_pattern{
position:absolute;
left:50px;
top:-30px;
right:50px;
bottom:0px;
overflow:hidden;
border-radius:50px 50px;
background-size:cover;
}
.cta-five .theme-btn{
border-radius:50px;
}
/***
====================================================================
Team Two
====================================================================
***/
.team-two{
position: relative;
padding: 110px 0px 90px;
}
.team-two .blocks-container{
position:relative;
max-width:1600px;
margin:0 auto;
padding: 0px 15px;
}
.team-two_bg{
position:absolute;
left:50px;
top:0px;
right:50px;
bottom:0px;
overflow:hidden;
border-radius:50px 50px;
background-size:cover;
background-position: center top;
background-repeat: no-repeat;
}
.team-two_bg:before{
position:absolute;
content:'';
left:0px;
top:0px;
right:0px;
bottom:0px;
opacity:0.90;
background-color:#E0EEEA;
}
.team-two_button .theme-btn{
border-radius:50px;
padding:16px 34px;
}
.team-block_two{
position: relative;
margin-bottom: var(--margin-bottom-30);
}
.team-block_two-inner{
position: relative;
}
.team-block_two-image{
position: relative;
overflow: hidden;
}
.team-block_two-image img{
position: relative;
width: 100%;
z-index:10;
display: block;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
-webkit-transition:all 600ms ease;
-ms-transition:all 600ms ease;
-o-transition:all 600ms ease;
}
.team-block_two-inner:hover .team-block_two-image img{
}
.team-block_two-content{
position: relative;
text-align: center;
margin-top: -3px;
padding: 25px 15px 50px;
background: url(../images/background/team-two_bg.png);
background-size:cover;
}
.team-block_two-heading{
position: relative;
font-weight:500;
z-index:1;
}
.team-block_two-heading a{
position: relative;
color: var(--black-color);
}
.team-block_two-heading a:hover{
color: var(--main-color);
}
.team-block_two-designation{
position: relative;
z-index:1;
font-weight: 600;
font-size: var(--font-14);
color: #4C5550;
margin-top: var(--margin-top-5);
}
.team-block_two-socials{
position: relative;
margin-top: var(--margin-top-20);
}
.team-block_two-socials a{
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50px;
display: inline-block;
color: var(--white-color);
background-color: var(--color-thirty);
}
.team-block_two-socials a:hover{
background-color: #c5e96b;
}
/* Total Experiance Box */
.total-experiance_box{
position:relative;
z-index:1;
margin-bottom:30px;
}
.total-experiance_box strong{
position:relative;
display:block;
font-size:96px;
font-weight:600;
margin-bottom:45px;
}
.total-experiance_box-inner{
position:relative;
font-size:36px;
line-height:46px;
font-weight:600;
text-align:center;
padding:180px 15px;
color: var(--black-color);
}
.total-experiance_box-bg{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:-1;
background-size:cover;
}
.home-six_dark .slider-six_audio-player .audio-player{
background-color:#C5E96B;
}
.home-six_dark .slider-six_audio-player .speed-control,
.home-six_dark .slider-six_audio-player .time-display,
.home-six_dark .slider-six_audio-player .play-title_name{
color: var(--black-color);
}
.home-six_dark .slider-six_audio-player .progress-container{
background-color:#8aae2f;
}
.home-six_dark .slider-six_audio-player .player-controls button{
background-color: var(--black-color);
}
.home-six_dark .about-three:before{
position:absolute;
content:'';
left:50px;
top:-40px;
right:50px;
bottom:0px;
border-radius:40px 40px 0px 0px ;
background-color: #141914;
}
.home-six_dark .learning-two:before{
position:absolute;
content:'';
left:50px;
top:0px;
right:50px;
bottom:0px;
border-radius:0px 0px 40px 40px;
background-color: #141914;
}
.home-six_dark ,
.home-six_dark ,
.home-six_dark ,
.home-six_dark ,
.home-six_dark .main-footer.style-four .footer-title,
.home-six_dark .prayer-time_title,
.home-six_dark .about-three_list li,
.home-six_dark .sec-title-two_heading{
color: var(--white-color);
}
.home-six_dark .feature-block_three-inner strong{
color: var(--white-color);
}
.home-six_dark .main-footer.style-four .footer-text,
.home-six_dark .main-footer.style-four .footer_list li,
.home-six_dark .main-footer.style-four .footer-list li a,
.home-six_dark .sec-title_text,
.home-six_dark .about-three_text{
color:#788782;
}
.home-six_dark .service-four_pattern-two,
.home-six_dark .service-four_pattern,
.home-six_dark .about-three_dots{
opacity:0.20;
}
.home-six_dark .slider-six_audio-player{
z-index:1;
}
.home-six_dark .service-four_bg{
background-color:#1B372B;
}
.home-six_dark .sec-title.style-three .sec-title-two_title{
color: var(--white-color);
background-color:#4b584b;
}
.home-six_dark .prayer-time.style-two{
padding:120px 0px 120px;
}
.home-six_dark .prayer-time.style-two:before{
position:absolute;
content:'';
left:50px;
top:0px;
right:50px;
bottom:0px;
border-radius:40px 40px;
background-color: #0c1712;
}
.home-six_dark .courses-four.style-two:before{
background-color:#11110f;
}
.home-six_dark .cta-five{
margin-bottom:0px;
}
.home-six_dark .team-two_bg:before{
background-color: #0c1712;
}
.home-six_dark .news-four.style-two:before{
position:absolute;
content:'';
left:50px;
top:0px;
right:50px;
bottom:0px;
border-radius:40px 40px;
background-color: #0C100E;
}
.home-six_dark .news-block_five-image:after{
background:url(../images/background/news-block_five-pattern-dark.png) no-repeat;
}
.home-six_dark .offer-block_two-image:before{
background:url(../images/background/gumbad-1.png) no-repeat;
}
.home-six_dark .experiance-one.style-two:before{
background-color:#0e1f19;
}
.home-six_dark .footer_bg-layer{
background-color:#141512;
}
.home-six_dark .main-footer.style-four .footer_list li:last-child{
color:#C5E96B;
font-size:20px;
font-weight:400;
}
.home-six_dark .newsletter-box{
background-color: var(--black-color);
}
.home-six_dark .main-header .mobile-menu .navigation li.dropdown .dropdown-btn{
color: var(--black-color);
}
.video-box {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.pdf-box {
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pdf-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.pdf-info {
padding: 15px;
text-align: center;
}
.pdf-info h5 {
font-weight: 600;
margin-bottom: 10px;
color: rgb(29,142,90);
}
.btn-download {
display: inline-block;
padding: 8px 16px;
border-radius: 25px;
background: #f3b815;
color: #fff;
font-weight: 500;
text-decoration: none;
transition: 0.3s;
}
.btn-download:hover {
background: rgb(29,142,90);
color: #fff;
}
.welcome-one_content-image img{
width: 100%;
height: 225px;
object-fit: contain;
}
/* ******mission and vision****** */
/* Section Styling */
.vision-mission {
padding: 80px 20px;
background: linear-gradient(to bottom, #f9fafc, #f0f4f8);
font-family: "Segoe UI", sans-serif;
}
/* Container */
.vision-mission .container {
max-width: 1200px;
margin: auto;
}
/* Heading */
.vision-mission .heading {
text-align: center;
margin-bottom: 50px;
}
.vision-mission .heading h2 {
font-size: 2.5rem;
font-weight: 700;
background: rgb(29, 142, 90);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vision-mission .heading p {
margin-top: 10px;
color: #000;
font-size: 1.1rem;
}
/* Cards Layout */
.vision-mission .cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
/* Card */
.vision-mission .card {
background: #fff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-top: 5px solid transparent;
}
.vision-mission .card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* Card Header */
.vision-mission .card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.vision-mission .card-header .icon {
background: #e0f2fe;
color: rgb(29, 142, 90);
font-size: 1.5rem;
padding: 14px;
border-radius: 12px;
margin-right: 15px;
}
.vision-mission .card-header h3 {
font-size: 1.6rem;
font-weight: 600;
color: #000;
}
/* Vision Card */
.vision-mission .card.vision {
border-top-color: rgb(29, 142, 90); /* Green */
}
.vision-mission .card.vision .icon {
background: #d1fae5;
color: #047857;
}
/* Mission Card */
.vision-mission .card.mission {
border-top-color: rgb(29, 142, 90); /* Green */
}
.vision-mission .card.mission .icon {
background: #cffafe;
color: rgb(29, 142, 90);
}
/* Text */
.vision-mission .card p,
.vision-mission .card ul {
color: #000;
line-height: 1.7;
font-size: 1rem;
}
.vision-mission .card ul {
padding-left: 20px;
}
.vision-mission .card ul li {
margin-bottom: 10px;
}
/* ******mission and vision****** */
.hero-section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* Unmute Button */
.unmute-btn {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 3;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 10px 18px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 16px;
}
/* Tablet */
@media (max-width: 992px) {
.hero-section {
height: 67vh;
}
.hero-video {
object-fit: contain;
}
}
/* Mobile */
@media (max-width: 768px) {
.hero-section {
height: 47vh;
}
}
/* Very Small Phones */
@media (max-width: 480px) {
.hero-section {
height: 32vh;
}
}
.typewriter-container {
width: 100%;
font-size: 35px;
font-weight: 600;
direction: rtl;
text-align: center;
font-family: "Amiri", serif; /* Arabic-friendly font */
}
.typewriter-container #typeText{
color: #fff;
font-size: 35px;
}
.cursor {
border-right: 3px solid #000;
animation: blink 0.7s infinite;
}
@keyframes blink {
50% { border-color: transparent; }
}
/* Slower for mobile + tablet */
@media (max-width: 768px) {
.typewriter-container #typeText{
color: #fff;
font-size: 22px;
}
}
.info-table {
max-width: 550px;
margin: 30px auto;
padding: 20px;
}
.info-table .row {
display: flex;
justify-content: space-between;
background: #f1f8e9;
padding: 12px 14px;
border-radius: 10px;
margin-bottom: 12px; /* GAP BETWEEN ROWS */
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.info-table .label {
font-weight: 600;
color: #1b5e20;
font-size: 20px;
}
.info-table .value {
font-size: 20px;
font-weight: bolder;
color: #000;
}
/* Mobile Responsive */
@media (max-width: 480px) {
.info-table .row {
flex-direction: column;
text-align: left;
gap: 4px;
}
}
.donte-now-btn {
position: relative;
padding: 14px 32px;
border-radius: 10px;
background: linear-gradient(135deg, #1b5e20, #4caf50);
color: #fff;
overflow: hidden;
animation: pulse 1.8s infinite;
}
.donte-now-btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: skewX(-25deg);
animation: shine 2.5s infinite;
}
@keyframes shine {
0% { left: -100%; }
70% { left: 120%; }
100% { left: 120%; }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(27, 94, 32, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(27, 94, 32, 0); }
100% { box-shadow: 0 0 0 0 rgba(27, 94, 32, 0); }
}