/*
Theme Name: Traininginstitute
Theme URI:https://traininginstitute.kamleshyadav.com/academic/
Author: kamleshyadav
Author URI: https://themeforest.net/user/kamleshyadav
Description: Training Institute WordPress Theme is a Responsive WordPress Theme which can be used for any Training Institute & Institute  Related Business, Once Easily setup a Training Institute Business Based Website With Just one Click Theme is Based on Unyson Framework which gives you an inbuilt Page Builder so all the content can be easily managed Theme is multipage as well as single page where single page version are having two version.
Version: 2.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: traininginstitute
Tags:right-sidebar

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

traininginstitute is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/********************************************************
    body start
********************************************************/

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
:root {
    --el-primary-color: #EB7F1C;
    --el-white-color: #ffffff;
    --el-font-color: #80929D;
    --el-heading-color: #002B46;
    --el-border-radius: 10px;
    --el-transition: all 0.3s;
    --el-box-shadow: 10px 10px 50px 0px #597F9524;
}

html {
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
/*----------------------------------------------------------------------------------------------Comman ----------------------------------------------------------------------------------------------*/

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-family: "Lexend", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--el-font-color);
    position: relative;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
    border-radius: 10px;
}

*::-webkit-scrollbar {
    width: 4px;
    background-color: #f5f5f5;
}

*::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: var(--el-primary-color);
    min-height: 150px;
}

a,
a:hover,
a:focus,
button,
button:hover,
button:focus {
    text-decoration: none;
    -webkit-transition: var(--el-transition);
    -moz-transition: var(--el-transition);
    -ms-transition: var(--el-transition);
    -o-transition: var(--el-transition);
    transition: var(--el-transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-transition: var(--el-transition);
    -moz-transition: var(--el-transition);
    -ms-transition: var(--el-transition);
    -o-transition: var(--el-transition);
    transition: var(--el-transition);
    margin: 0;
    padding: 0;
    word-break: break-word;
    text-transform: capitalize;
    line-height: 1.25;
}

h3 {
    font-size: 40px;
    font-weight: 500;
}

h4 {
    font-size: 20px;
    font-weight: 600;
}

h5 {
    font-size: 16px;
    font-weight: 600;
}

h6 {
    font-size: 16px;
    font-weight: 500;
}

input,
textarea,
select,
button,
label,
svg,
svg path,
svg rect,
svg polygon,
img,
a,
:after,
:before,
:hover,
:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

::placeholder {
    color: #80929D;
    opacity: 1;
}

::-ms-input-placeholder {
    color: #80929D;
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

p {
    margin: 0px;
    word-break: break-word;
    line-height: 1.935;
}
/*----------------------------------------------------------------------------------------------Comman ----------------------------------------------------------------------------------------------*/

/********************************************************
    Common Style
********************************************************/

body.menu-open {
    overflow: hidden;
}

.el_main_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.container-fluid {
    max-width: 1920px;
}

.row>* {
    padding-right: calc(var(--bs-gutter-x)* .625);
    padding-left: calc(var(--bs-gutter-x)* .625);
}

.row {
    row-gap: 30px;
}

.vld_body_overlay {
    position: fixed;
    background: rgb(0 0 0 / 40%);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
    cursor: zoom-in;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

.menu-open .vld_body_overlay {
    opacity: 1;
    visibility: visible;
}

.el_section_wrapper {
    padding: 100px 0;
}

.el_section_heading {
    text-align: center;
    max-width: 815px;
    margin: 0 auto 10px;
}

.el_section_heading h6 {
    color: var(--el-primary-color);
}

.el_section_heading h3 {
    color: var(--el-heading-color);
    margin: 15px 0 10px;
}

.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 40px;
    background-color: var(--el-white-color);
    border-radius: 5px;
    transition: var(--el-transition);
    box-shadow: var(--el-box-shadow);
    z-index: auto;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 12px;
    color: var(--el-font-color);
    font-weight: 600;
    transition: var(--el-transition);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--el-primary-color);
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: var(--el-white-color);
}

.swiper-pagination {
    position: relative;
    top: unset !important;
    bottom: unset !important;
}

.swiper-pagination-bullet {
    background-color: #DBDBDB;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    width: 24px;
    background-color: var(--el-primary-color);
    border-radius: 15px;
}

/********************************************************
    Go to Top Style
********************************************************/

.el_top_icon a {
    display: flex;
    background-color: var(--el-primary-color);
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: var(--el-transition) opacity 0;
    visibility: hidden;
    z-index: 1000;
    cursor: pointer;
    animation: border-transform 4s linear infinite alternate forwards;
}

@keyframes border-transform {
    0% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
        transform: translateY(0px);
    }
    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
    100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
        transform: translateY(-20px);
    }
}

.el_top_icon a:active {
    background-color: var(--el-black-color);
}

.el_top_icon a.show {
    opacity: 1;
    visibility: visible;
}

/********************************************************
    Loader Style
********************************************************/

.loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
}

.loader img {
    width: 100px;
}

/********************************************************
    Button Style
********************************************************/

.el_btn {
    min-height: 60px;
    border-radius: var(--el-border-radius);
    min-width: 170px;
    width: fit-content;
    color: var(--el-white-color);
    padding: 5px 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--el-primary-color);
    border: 1px solid transparent;
    transition: var(--el-transition);
    gap: 20px;
}

.el_btn:hover {
    background-color: transparent;
    color: var(--el-primary-color);
    border: 1px solid var(--el-primary-color);
}

.el_btn:hover svg {
    animation: el_lr 2s infinite alternate;
    fill: var(--el-primary-color);
}

@keyframes el_lr {
    0% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(-10px)
    }
    50% {
        transform: translateX(0)
    }
    75% {
        transform: translateX(-10px)
    }
    100% {
        transform: translateX(30%)
    }
}

/********************************************************
    Header Section Style
********************************************************/

.el_header_wrapper {
    position: relative;
    transition: var(--el-transition);
    background-color: #f5f5f5;
    box-shadow: 0px 4px 51px 0px #5782A91A;
    z-index: 11;
    width: 100%;
    padding: 20px 0;
}

.el_header_wrapper.fixed {
    position: fixed;
    animation: .5s ease-in-out 0s normal none 1 running fadeInDown;
    top: 0;
    left: 0;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

.el_navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.el_nav_item {
    display: flex;
    align-items: center;
    gap: 50px;
}

.el_nav_item ul {
    display: flex;
    gap: 50px;
}

.el_nav_item ul li a {
    color: var(--el-heading-color);
    padding: 40px 0;
    position: relative;
    font-weight: 500;
}

.el_nav_item ul li a:hover,
.el_nav_item ul li a.active {
    color: var(--el-primary-color);
}

.el_nav_item ul li a::before,
.el_nav_item ul li a::after {
    position: absolute;
    content: "";
    bottom: 0;
    height: 4px;
    border-radius: 50px;
    background-color: var(--el-primary-color);
    box-shadow: 0px 4px 50px 0px #99C1FD1A;
    transition: var(--el-transition);
    opacity: 0;
    visibility: hidden;
}

.el_nav_item ul li a::before {
    left: 0;
    width: 0;
}

.el_nav_item ul li a::after {
    width: 8px;
    left: 32px;
}

.el_nav_item ul li a:hover::before,
.el_nav_item ul li a.active::before,
.el_nav_item ul li a:hover::after,
.el_nav_item ul li a.active::after {
    opacity: 1;
    visibility: visible;
}

.el_nav_item ul li a:hover::before,
.el_nav_item ul li a.active::before {
    width: 30px;
}

.el_nav_btn {
    display: flex;
    gap: 5px;
    align-items: center;
}

.el_nav_btn>ul {
    display: flex;
    align-items: center;
    gap: 55px;
}

.el_search_res {
    display: none;
    width: 50px;
    height: 50px;
    background: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.el_header_serch {
    position: relative;
}

.el_header_serch input {
    position: relative;
    width: 100%;
    background-color: var(--el-white-color);
    min-height: 60px;
    padding: 0 55px 0 30px;
    border-radius: 30px;
    max-width: 200px;
    color: var(--el-font-color);
}

.el_header_serch a {
    position: absolute;
    right: 23px;
    top: 19px;
}

.el_toggle_btn,
.el_res_logo {
    display: none;
}

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 50px;
}

.line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: var(--el-heading-color);
    stroke-width: 4.5;
    stroke-linecap: round;
}

.ham7 .top {
    stroke-dasharray: 40 172;
}

.ham7 .middle {
    stroke-dasharray: 40 111;
}

.ham7 .bottom {
    stroke-dasharray: 40 172;
}

.menu-open .ham7 .top {
    stroke-dashoffset: -132px;
}

.menu-open .ham7 .middle {
    stroke-dashoffset: -71px;
}

.menu-open .ham7 .bottom {
    stroke-dashoffset: -132px;
}

/********************************************************
    Banner Section Style
********************************************************/

.el_banner_wrapper {
    position: relative;
    background-color: #F3F3F3;
    padding-top: 40px;
    overflow: hidden;
}

.el_banner_wrapper::before {
    content: " ";
    background-image: url(../images/banner_shap.png);
    width: 100%;
    height: 100%;
    animation: 10s circlular linear infinite;
    position: absolute;
    top: 60px;
    background-repeat: no-repeat;
    background-size: auto;
    left: 60px;
}

@keyframes circlular {
    from {
        -webkit-transform: rotate(0deg) translate(-12px) rotate(0deg);
        -moz-transform: rotate(0deg) translate(-12px) rotate(0deg);
        -ms-transform: rotate(0deg) translate(-12px) rotate(0deg);
        -o-transform: rotate(0deg) translate(-12px) rotate(0deg);
        transform: rotate(0deg) translate(-12px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-12px) rotate(-360deg);
        -moz-transform: rotate(360deg) translate(-12px) rotate(-360deg);
        -ms-transform: rotate(360deg) translate(-12px) rotate(-360deg);
        -o-transform: rotate(360deg) translate(-12px) rotate(-360deg);
        transform: rotate(360deg) translate(-12px) rotate(-360deg);
    }
}

.el_banner_content,
.el_banner_img,
.el_banner_main_img {
    position: relative;
}

.el_banner_main_img {
    z-index: 1;
}

.el_banner_content {
    padding-top: 115px;
}

.el_banner_text h1 {
    font-size: 60px;
    font-weight: 600;
    color: var(--el-heading-color);
}

.el_banner_text h2 {
    font-size: 60px;
    font-weight: 600;
    color: var(--el-primary-color);
    position: relative;
    transform: rotate(-7deg);
    min-width: 220px;
    min-height: 85px;
    border: 1px solid var(--el-primary-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 25px 0 45px 10px;
}

.el_banner_text h2 span {
    position: relative;
}

.el_banner_text h2::before,
.el_banner_text h2 span::before,
.el_banner_text h2::after,
.el_banner_text h2 span::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--el-primary-color);
    border-radius: 50%;
}

.el_banner_text h2::before {
    top: -6px;
    left: -6px;
    animation: 5s leftright linear infinite alternate both;
}

.el_banner_text h2 span::before {
    bottom: -10px;
    left: -22px;
    animation: 5s leftright linear infinite alternate-reverse both;
}

.el_banner_text h2::after {
    top: -6px;
    right: -6px;
    animation: 3s topbtm linear infinite alternate both;
}

.el_banner_text h2 span::after {
    top: -10px;
    left: -22px;
    animation: 3s topbtm linear infinite alternate-reverse both;
}

@keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(220px);
    }
}

@keyframes topbtm {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(83px);
    }
}

.el_banner_text p {
    min-width: 710px;
}

.el_banner_btn {
    margin-top: 70px;
}

.el_banner_btn .el_btn {
    min-width: 210px;
    gap: 25px;
    box-shadow: 15px 20px 60px 0px #EB7F1C33;
}

.el_banner_img .shape-1,
.el_banner_img .shape-2,
.el_banner_img .shape-3,
.el_banner_img .shape-4 {
    position: absolute;
    animation: 10s circlular linear infinite;
}

.el_banner_img .shape-1 {
    top: 130px;
    left: -45px;
}

.el_banner_img .shape-2 {
    top: 105px;
    right: 35px;
}

.el_banner_img .shape-3 {
    bottom: 20px;
    left: -120px;
}

.el_banner_img .shape-4 {
    bottom: 130px;
    right: -120px;
}

/********************************************************
    Partners Section Style
********************************************************/

.el_partner_wrapper {
    padding: 90px 0;
    background-image: url(../images/partner_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.el_partner_heading h3 {
    color: var(--el-white-color);
}

.el_partner_img {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    max-width: 712px;
    margin-left: auto;
}

.el_partner_logo {
    text-align: center;
}

.el_partner_logo img {
    cursor: pointer;
}

.el_partner_logo img:hover {
    filter: brightness(20);
}

/********************************************************
    About Us Section Style
********************************************************/

.el_about_wrapper {
    padding: 100px 0 155px;
    overflow: hidden;
}

.el_about_img {
    position: relative;
}

.el_about_main_img {
    max-width: 530px;
}

.el_about_img .about-img1,
.el_about_img .about-img2 {
    position: absolute;
    box-shadow: 10px 10px 50px 0px #597F9524;
    border-radius: var(--el-border-radius);
    animation: 10s circlular linear infinite;
}

.el_about_img .about-img1 {
    top: 60px;
    left: -105px;
}

.el_about_img .about-img2 {
    bottom: -55px;
    right: 0;
}

.el_about_heading {
    margin-bottom: 5px;
}

.el_about_heading h6 {
    color: var(--el-primary-color);
}

.el_about_heading h3 {
    color: var(--el-heading-color);
    margin: 15px 0 20px;
}

.el_about_box {
    background-color: #F3F3F3;
    border-radius: var(--el-border-radius);
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 25px;
    min-height: 99px;
}

.el_about_text h5 {
    color: var(--el-heading-color);
    font-weight: 700;
}

.el_about_btn {
    margin-top: 15px;
}

/********************************************************
    Popular Courses Section Style
********************************************************/

.el_course_wrapper {
    background-color: #F3F3F3;
    overflow: hidden;
    background-image: url(../images/course_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.el_course_filter {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.el_course_filter a {
    min-height: 60px;
    border-radius: var(--el-border-radius);
    min-width: 170px;
    width: fit-content;
    color: var(--el-font-color);
    padding: 5px 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--el-white-color);
    transition: var(--el-transition);
    gap: 20px;
}

.el_course_filter a.active {
    color: var(--el-white-color);
    background-color: var(--el-primary-color);
}

.el_course_slider {
    position: relative;
}

.el_course_box {
    background-color: var(--el-white-color);
    border-radius: var(--el-border-radius);
    padding: 10px;
}

.el_course_img {
    border-radius: var(--el-border-radius);
    overflow: hidden;
    max-height: 190px;
}

.el_course_img img {
    min-height: 190px;
    width: 100%;
    object-fit: cover;
}

.el_course_info {
    padding: 25px 10px 10px;
}

.el_course_text h4 {
    color: var(--el-heading-color);
    margin-bottom: 10px;
}

.el_course_text p {
    line-height: 1.6;
}

.el_course_statics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin: 5px 0 20px;
}

.el_course_rating,
.el_course_review {
    display: flex;
    align-items: center;
    gap: 10px;
}

.el_course_rating p {
    color: var(--el-heading-color);
}

.el_course_slider .swiper-button-prev {
    left: -80px;
}

.el_course_slider .swiper-button-next {
    right: -80px;
}

/********************************************************
    Our Services Section Style
********************************************************/

.el_service_heading,
.el_testimonial_heading,
.el_newsletter_heading {
    margin-bottom: 5px;
}

.el_service_heading h6,
.el_testimonial_heading h6 {
    color: var(--el-primary-color);
}

.el_service_heading h3,
.el_testimonial_heading h3 {
    color: var(--el-heading-color);
    margin: 15px 0 20px;
}

.el_service_btn {
    margin-top: 30px;
}

.el_service_content {
    position: relative;
    background-image: url(../images/service_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 20px 17px;
}

.el_service_content::before,
.el_service_content::after {
    content: " ";
    position: absolute;
}

.el_service_content::before {
    background-image: url(../images/service-shap1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 129px;
    height: 130px;
    left: 0;
    top: 0;
}

.el_service_content::after {
    background-image: url(../images/service-shap2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 208px;
    height: 210px;
    right: 0;
    bottom: 0;
}

.el_service_box {
    position: relative;
    text-align: center;
    background-color: var(--el-white-color);
    box-shadow: 10px 10px 50px 0px #597F952E;
    border-radius: var(--el-border-radius);
    padding: 15px 25px 20px;
    z-index: 1;
}

.el_service_box.service-2 {
    margin-top: 30px;
}

.el_service_box.service-3 {
    margin-top: -30px;
}

.el_service_text h5 {
    color: var(--el-heading-color);
    margin-bottom: 5px;
    line-height: 1.5;
}

/********************************************************
    Tutors Section Style
********************************************************/
/*
.el_tutors_wrapper,
.el_joinus_wrapper,
.el_pricing_wrapper,
.el_newsletter_wrapper {
    background-color: #F3F3F3;
    overflow: hidden;
    background-image: url(../images/tutors_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
*/

.el_tutor_bg {
    position: relative;
    padding-bottom: 40px;
}

.el_tutor_bg::before {
    content: "";
    position: absolute;
    background-image: url(../images/tutor_box_bg.png);
    width: 100%;
    height: 100%;
    max-width: 324px;
    max-height: 305px;
    bottom: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: var(--el-transition);
}

.el_tutor_bg:hover::before {
    opacity: 1;
    bottom: -10px;
}

.el_tutor_box {
    position: relative;
    background-color: var(--el-white-color);
    border-radius: var(--el-border-radius);
    overflow: hidden;
}

.el_tutor_img {
    position: relative;
    z-index: 1;
    max-height: 280px;
    overflow: hidden;
}

.el_tutor_img img {
    min-height: 280px;
    width: 100%;
    object-fit: cover;
}

.el_tutor_info {
    padding: 15px 20px 20px;
    position: relative;
    z-index: 1;
}

.el_tutor_text h4 {
    color: var(--el-heading-color);
    margin-bottom: 10px;
}

.el_tutor_text p {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.el_tutor_statics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    height: 0px;
    overflow: hidden;
    margin-top: 0;
    transition: height .3s, margin-top .3s;
}

.el_tutor_bg:hover .el_tutor_statics {
    display: flex;
    margin-top: 25px;
    height: auto;
}

.el_tutor_rating,
.el_tutor_social {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--el-transition);
    transition-delay: 0.06s;
    transform: translateY(-60px);
    opacity: 0;
    visibility: hidden;
}

.el_tutor_bg:hover .el_tutor_rating,
.el_tutor_bg:hover .el_tutor_social {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.el_tutor_rating p {
    color: var(--el-heading-color);
}

/********************************************************
    Enroll Section Style
********************************************************/

.el_enroll_wrapper {
    padding-top: 135px;
    overflow: hidden;
}

.el_enroll_form {
    background-image: url(../images/enroll_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 530px;
    background-position: top center;
    padding: 30px 30px 0;
    border-radius: 20px;
    max-width: 530px;
    position: relative;
}

.el_enroll_form .enroll-img1,
.el_enroll_form .enroll-img2 {
    position: absolute;
    box-shadow: 10px 10px 50px 0px #597F9524;
    border-radius: var(--el-border-radius);
    animation: 10s circlular linear infinite;
}

.el_enroll_form .enroll-img1 {
    top: -35px;
    right: -40px;
}

.el_enroll_form .enroll-img2 {
    bottom: 155px;
    left: -45px;
}

/*.el_enroll_form form {*/
/*    background-color: var(--el-white-color);*/
/*    padding: 40px;*/
/*    border-radius: var(--el-border-radius);*/
/*    box-shadow: 10px 10px 60px 0px #597F9526;*/
/*}*/

.el_form_heading {
    margin-bottom: 15px;
}

.el_form_heading h3 {
    font-size: 30px;
    color: var(--el-heading-color);
    margin-bottom: 5px;
}

.el_input_flex {
    display: flex;
    align-items: center;
    gap: 0 20px;
}

.el_form_input {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.el_form_input select,
.el_form_input input {
    position: relative;
    width: 100%;
    background-color: #F3F3F3F2;
    min-height: 60px;
    padding: 0 20px;
    border-radius: var(--el-border-radius);
    color: var(--el-font-color);
    appearance: none;
}

.el_form_input select,
.el_form_input input[type="date"] {
    cursor: pointer;
}

.el_form_input span {
    position: relative;
}

.el_form_input span::before {
    content: "";
    position: absolute;
    background-image: url(../images/dropdown.svg);
    width: 10px;
    height: 5px;
    background-repeat: no-repeat;
    top: 10px;
    right: 15px;
    background-size: contain;
    z-index: 1;
}

.el_form_input input[type="date"] {
    min-width: 222px;
}

.el_form_input input[type="date"]::before {
    content: attr(placeholder);
    pointer-events: none;
    position: absolute;
    left: 20px;
    background: #F3F3F3F2;
}

.el_form_input input[type="date"]:focus::before {
    display: none;
}

.el_form_input input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
}

.el_form_btn .el_btn {
    width: 100%;
}

.el_enroll_heading {
    padding-top: 35px;
}

.el_enroll_heading h6 {
    color: var(--el-primary-color);
}

.el_enroll_heading h3 {
    color: var(--el-heading-color);
    margin: 15px 0 20px;
}

.el_enroll_btn {
    margin-top: 30px;
}

/********************************************************
    Enroll Section Style
********************************************************/

.el_joinus_bg {
    position: relative;
    cursor: pointer;
}

.el_joinus_bg::before {
    content: "";
    position: absolute;
    background-image: url(../images/tutor_box_bg.png);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    bottom: 0;
    opacity: 0;
}

.el_joinus_bg:hover::before {
    opacity: 1;
    bottom: -50px;
    transition: var(--el-transition);
    transition-delay: .1s;
}

.el_joinus_box {
    position: relative;
    text-align: center;
    background-color: transparent;
    border-radius: 20px;
    padding: 45px 40px 30px;
    transition: var(--el-transition);
}

.el_joinus_bg:hover .el_joinus_box {
    background-color: var(--el-white-color);
}

.el_joinus_text {
    margin-top: 25px;
}

.el_joinus_text h4 {
    color: var(--el-heading-color);
    margin-bottom: 10px;
}

.el_joinus_text p {
    line-height: 1.6;
}

.el_joinus_bg .arrow1,
.el_joinus_bg .arrow2 {
    position: absolute;
    z-index: 1;
    animation: 3s ud linear alternate infinite;
}

.el_joinus_bg .arrow1 {
    top: 35px;
    left: -40px;
}

.el_joinus_bg .arrow2 {
    bottom: 20px;
    right: -50px;
}

@keyframes ud {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

/********************************************************
    Testimonials Section Style
********************************************************/

.el_testi_content,
.el_testimonial_slider .swiper-slide {
    position: relative;
}

.el_testi_content::before,
.el_testi_content::after {
    content: " ";
    position: absolute;
}

.el_testi_content::before {
    background-image: url(../images/service-shap1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 129px;
    height: 130px;
    left: -17px;
    top: -20px;
}

.el_testi_content::after {
    background-image: url(../images/service-shap2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 208px;
    height: 210px;
    right: -17px;
    bottom: -20px;
}

.el_testimonial_slider .swiper-slide {
    padding: 20px 17px;
}

.el_testimonial_slider .swiper-slide::before {
    content: "";
    position: absolute;
    background-image: url(../images/tutor_box_bg.png);
    width: 100%;
    height: 100%;
    bottom: -50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
}

.el_testi_box {
    position: relative;
    background-color: var(--el-white-color);
    padding: 50px 45px;
    border-radius: var(--el-border-radius);
    border: 1px solid rgb(89 127 149 / 10%);
    z-index: 1;
}

.el_testi_icon {
    margin-bottom: 30px;
}

.el_testi_text {
    position: relative;
    padding-bottom: 40px;
}

.el_testi_text::before {
    position: absolute;
    content: "";
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: #EB7F1C4D;
    bottom: 0;
}

.el_testi_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    gap: 15px;
}

.el_testi_client {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.el_testi_client::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 5px;
    background-image: url(../images/testi_bg.png);
    background-size: contain;
    width: 85px;
    height: 70px;
    background-repeat: no-repeat;
}

.el_client_img,
.el_client_text {
    position: relative;
}

.el_client_img img {
    width: 60px;
    height: 60px;
    border-radius: var(--el-border-radius);
    object-fit: cover;
}

.el_client_text h5 {
    color: var(--el-heading-color);
    margin-bottom: 10px;
}

.el_client_text p {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.el_testi_nav {
    position: relative;
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.el_testi_nav .swiper-button-next,
.el_testi_nav .swiper-button-prev {
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    bottom: unset;
    margin: unset;
    background-color: #F3F3F3;
}

.el_testi_nav .swiper-button-next:hover,
.el_testi_nav .swiper-button-prev:hover {
    background-color: var(--el-primary-color);
}

/********************************************************
    Pricing Plans Section Style
********************************************************/

.el_pricing_box {
    position: relative;
    background-color: var(--el-white-color);
    padding: 30px 40px 40px;
    border-radius: 15px;
    transition: var(--el-transition);
}

.el_pricing_bg:hover .el_pricing_box {
    transform: translateY(-10px);
}

.el_plan_title {
    position: relative;
    background-color: var(--el-primary-color);
    max-width: fit-content;
    padding: 4px 12px 5px 45px;
    margin-left: -50px;
    border-radius: 0 10px 10px 0;
}

.el_plan_title::after {
    content: "";
    position: absolute;
    border-left: 10px solid transparent;
    border-bottom: 7px solid #AB5506;
    left: 0;
    top: -7px;
}

.el_plan_title h4 {
    color: var(--el-white-color);
    line-height: 1;
}

.el_plan_price {
    margin-top: 30px;
    position: relative;
    padding-bottom: 25px;
}

.el_plan_price h3 {
    color: var(--el-heading-color);
    font-weight: 600;
}

.el_plan_price h3 span {
    font-size: 20px;
}

.el_plan_price::before {
    position: absolute;
    content: "";
    width: 100%;
    max-width: 180px;
    height: 4px;
    background: #EB7F1C4D;
    bottom: 0;
}

.el_plan_list {
    margin-top: 25px;
}

.el_plan_list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.el_plan_list li:last-child {
    margin-bottom: 0;
}

.el_plan_btn {
    margin-top: 35px;
}

.el_pricing_bg {
    position: relative;
    cursor: pointer;
}

.el_pricing_bg::before {
    content: "";
    position: absolute;
    background-image: url(../images/tutor_box_bg.png);
    width: 100%;
    height: 100%;
    max-width: 324px;
    max-height: 305px;
    bottom: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: var(--el-transition);
}

.el_pricing_bg:hover::before {
    opacity: 0.5;
    bottom: -60px;
}

.el_pricing_box .premium {
    position: absolute;
    right: 20px;
    top: 20px;
}

/********************************************************
    Our Blogs Section Style
********************************************************/

.el_blogs_wrapper {
    padding-bottom: 60px;
}

.el_blog_slider {
    position: relative;
}

.el_blog_bg {
    position: relative;
    padding-bottom: 40px;
    cursor: pointer;
}

.el_blog_bg::before {
    content: "";
    position: absolute;
    background-image: url(../images/tutor_box_bg.png);
    width: 100%;
    height: 100%;
    max-width: 324px;
    max-height: 305px;
    bottom: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.el_blog_bg:hover::before {
    opacity: 1;
    bottom: -10px;
    transition: var(--el-transition);
    transition-delay: .1s;
}

.el_blog_box {
    position: relative;
    background-color: transparent;
    border-radius: 15px;
    padding: 10px;
    box-shadow: none;
    transition: var(--el-transition);
}

.el_blog_bg:hover .el_blog_box {
    background-color: var(--el-white-color);
    box-shadow: 10px 10px 50px 0px #597F952E;
}

.el_blog_img {
    position: relative;
    border-radius: var(--el-border-radius);
    overflow: hidden;
    max-height: 250px;
}

.el_blog_img img {
    min-height: 250px;
    width: 100%;
    object-fit: cover;
}

.el_blog_img h5 {
    position: absolute;
    padding: 8px 10px;
    left: 10px;
    bottom: 10px;
    background-color: var(--el-white-color);
    color: var(--el-heading-color);
    border-radius: var(--el-border-radius);
}

.el_blog_info {
    padding: 15px 10px 10px;
}

.el_blog_statics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.el_blog_review {
    display: flex;
    align-items: center;
    gap: 10px;
}

.el_blog_review p {
    line-height: 1;
}

.el_blog_text h5 {
    color: var(--el-heading-color);
    margin-bottom: 10px;
}

.el_blog_text p {
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.el_blog_btn {
    margin-top: 20px;
}

.el_blog_slider .swiper-button-prev {
    left: -80px;
}

.el_blog_slider .swiper-button-next {
    right: -80px;
}

.el_blog_slider .swiper-button-next,
.el_blog_slider .swiper-button-prev {
    background-color: #F3F3F3;
}

.el_blog_slider .swiper-button-next:hover,
.el_blog_slider .swiper-button-prev:hover {
    background-color: var(--el-primary-color);
}

/********************************************************
    Newsletter Section Style
********************************************************/

.el_newsletter_heading h3 {
    color: var(--el-heading-color);
    margin-bottom: 20px;
}

.el_newsletter_input {
    position: relative;
}

.el_newsletter_input::before {
    content: "";
    position: absolute;
    background-image: url(../images/tutor_box_bg.png);
    width: 100%;
    height: 100%;
    bottom: -30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
    opacity: .5;
}

.el_newsletter_input input {
    position: relative;
    width: 100%;
    background-color: #fff;
    min-height: 80px;
    padding: 0 200px 0 30px;
    border-radius: 15px;
    color: var(--el-font-color);
    appearance: none;
}

.el_newsletter_input input::placeholder {
    color: #BDCBD3;
    opacity: 1;
}

.el_newsletter_input input::-ms-input-placeholder {
    color: #BDCBD3;
}

.el_newsletter_btn {
    position: absolute;
    right: 10px;
    top: 10px;
}

/********************************************************
    Footer Section Style
********************************************************/

.el_footer_section {
    background-image: url(../images/partner_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.el_footer_text {
    max-width: 350px;
    margin-top: 20px;
}

.el_footer_social {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.el_footer_social li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #14324F;
    border-radius: 50%;
}

.el_footer_social li a:hover {
    background-color: var(--el-primary-color);
}

.el_footer_social li a svg {
    transition: var(--el-transition);
}

.el_footer_social li a:hover svg {
    transform: rotateY(360deg);
}

.el_footer_heading h5 {
    color: var(--el-white-color);
}

.el_footer_link {
    margin-top: 30px;
}

.el_footer_link li {
    margin-bottom: 25px;
}

.el_footer_link li:last-child {
    margin-bottom: 0;
}

.el_footer_text p,
.el_footer_link li a {
    color: #718A99;
}

.el_footer_link li a:hover {
    color: var(--el-primary-color);
    margin-left: 5px;
}

/********************************************************
    Copyright Section Style
********************************************************/

.el_copyright_text {
    text-align: center;
    border-top: 1px solid #142F49;
    padding: 30px 0;
}

.el_copyright_text p {
    color: var(--el-white-color);
}



/*============================ Min - Width Query ============================*/

@media (min-width: 1500px) {
    .el_container {
        max-width: 1650px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

/*============================ Max - Width Query ============================*/

@media (max-width: 1875px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 58px;
    }
    h3 {
        font-size: 38px;
    }
    .el_banner_text h2 span::after {
        left: -26px;
    }
    .el_banner_img .shape-1 {
        left: -30px;
    }
    .el_banner_img .shape-2 {
        right: 15px;
    }
    .el_banner_img .shape-3 {
        left: -70px;
    }
    .el_banner_img .shape-4 {
        right: -70px;
    }
    .el_about_img .about-img1 {
        left: -90px;
    }
}

@media (max-width: 1700px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 55px;
    }
    h3 {
        font-size: 36px;
    }
    .el_banner_text h2 span::before {
        bottom: -12px;
        left: -32px;
    }
    .el_banner_text h2 span::after {
        left: -30px;
    }
    .el_banner_content {
        padding: 0 0 40px;
    }
    .el_banner_wrapper .row {
        align-items: center;
    }
    .el_banner_text p {
        min-width: 100%;
    }
    .el_banner_btn {
        margin-top: 60px;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-2 {
        top: 80px;
    }
    .el_banner_img .shape-3 {
        left: -30px;
    }
    .el_banner_img .shape-4 {
        right: -50px;
    }
    .el_about_img .about-img1 {
        left: -80px;
    }
}

@media (max-width: 1499.98px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 52px;
    }
    h3 {
        font-size: 34px;
    }
    .el_banner_text h2 span::before {
        bottom: -14px;
        left: -36px;
    }
    .el_banner_text h2 span::after {
        top: -14px;
        left: -36px;
    }
    .el_banner_btn {
        margin-top: 50px;
    }
    .el_banner_img .shape-4 {
        bottom: -10px;
    }
    .el_about_img .about-img1 {
        left: -50px;
    }
}

@media (max-width: 1399.98px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 48px;
    }
    h3 {
        font-size: 32px;
    }
    .el_section_wrapper {
        padding: 90px 0;
    }
    .el_course_wrapper {
        padding-bottom: 135px;
    }
    .el_blogs_wrapper {
        padding-bottom: 120px;
    }
    .el_banner_text h2 span::before {
        bottom: -16px;
        left: -42px;
    }
    .el_banner_text h2 span::after {
        top: -16px;
        left: -42px;
    }
    .el_nav_item,
    .el_nav_item ul {
        gap: 40px;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-2 {
        top: 20px;
    }
    .el_banner_img .shape-1 {
        left: -30px;
    }
    .el_banner_img .shape-3 {
        bottom: 0;
    }
    .el_about_img .about-img1 {
        left: -20px;
    }
    .el_about_box {
        gap: 15px 20px;
        padding: 20px;
    }
    .el_about_heading {
        margin-bottom: auto;
    }
    .el_course_img {
        max-height: 210px;
    }
    .el_course_img img {
        min-height: 210px;
    }
    .el_course_slider .swiper-button-prev,
    .el_course_slider .swiper-button-next {
        top: unset;
        bottom: -45px;
    }
    .el_blog_slider .swiper-button-prev,
    .el_blog_slider .swiper-button-next {
        top: unset;
        bottom: -30px;
    }
    .el_course_slider .swiper-button-prev,
    .el_blog_slider .swiper-button-prev {
        left: calc(50% - 25px);
        transform: translateX(-50%);
    }
    .el_course_slider .swiper-button-next,
    .el_blog_slider .swiper-button-next {
        right: calc(50% - 25px);
        transform: translateX(50%);
    }
    .swiper-pagination {
        margin-top: 22px;
    }
    .el_enroll_form .enroll-img1 {
        right: -15px;
    }
    .el_enroll_form .enroll-img2 {
        left: -30px;
        max-width: 80px;
    }
    .el_form_input input[type="date"] {
        min-width: unset;
    }
    .el_enroll_heading {
        padding-top: 25px;
    }
}

@media (max-width: 1199.98px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 45px;
    }
    h3 {
        font-size: 30px;
    }
    h4,
    .el_plan_price h3 span {
        font-size: 19px;
    }
    .el_form_heading h3 {
        font-size: 29px;
    }
    .el_section_wrapper,
    .el_partner_wrapper {
        padding: 80px 0;
    }
    .el_course_wrapper {
        padding-bottom: 150px;
    }
    .el_blogs_wrapper {
        padding-bottom: 110px;
    }
    .el_banner_wrapper .row {
        align-items: flex-end;
    }
    .el_banner_text h2 {
        margin: 15px 0 20px;
    }
    .el_banner_text h2 span::before {
        bottom: -18px;
        left: -45px;
    }
    .el_banner_text h2 span::after {
        top: -18px;
        left: -45px;
    }
    .el_banner_btn {
        margin-top: 40px;
    }
    .el_toggle_btn,
    .el_res_logo {
        display: block;
    }
    .el_nav_item ul {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        background-color: var(--el-white-color);
        width: 280px;
        padding: 30px 20px;
        margin: 0;
        z-index: 111;
        transition: all 0.5s;
        flex-direction: column;
        gap: 20px;
    }
    .menu-open .el_nav_item ul {
        left: 0;
    }
    .el_res_logo {
        margin-bottom: 20px;
    }
    .el_nav_item ul li a {
        padding: 0 0 10px;
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-2 {
        top: -10px;
    }
    .el_banner_img .shape-2 {
        right: -30px;
    }
    .el_about_img .about-img1 {
        left: -15px;
        max-width: 200px;
    }
    .el_about_box {
        flex-wrap: wrap;
        padding: 20px 10px;
        gap: 15px 6px;
    }
    .el_course_filter {
        gap: 20px;
    }
    .el_course_filter a {
        min-width: 155px;
    }
    .el_course_slider .swiper-button-prev,
    .el_course_slider .swiper-button-next {
        bottom: -70px;
    }
    .el_enroll_form .enroll-img1 {
        max-width: 230px;
        right: -10px;
        top: -25px;
    }
    .el_enroll_form .enroll-img2 {
        left: -15px;
    }
    .el_enroll_heading {
        padding-top: 15px;
    }
    .el_joinus_box,
    .el_pricing_box {
        padding: 25px 25px 20px;
    }
    .el_plan_title {
        margin-left: -35px;
    }
    .el_footer_text {
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 42px;
    }
    h3,
    .el_form_heading h3 {
        font-size: 28px;
    }
    h4,
    .el_plan_price h3 span {
        font-size: 18px;
    }
    .el_section_wrapper,
    .el_partner_wrapper {
        padding: 70px 0;
    }
    .el_course_wrapper {
        padding-bottom: 140px;
    }
    .el_blogs_wrapper {
        padding-bottom: 100px;
    }
    .el_banner_wrapper .row {
        flex-direction: column-reverse;
    }
    .el_banner_text h2 {
        min-width: 180px;
        min-height: 70px;
        margin: 15px 0 35px;
    }
    .el_banner_main_img {
        max-width: 700px;
        margin: auto;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-2,
    .el_banner_img .shape-3,
    .el_banner_img .shape-4 {
        max-width: 205px;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-3 {
        left: 0;
    }
    .el_banner_img .shape-2 {
        right: 0;
    }
    .el_banner_img .shape-4 {
        right: -30px;
    }
    .el_banner_text {
        text-align: center;
        margin: auto;
        max-width: 700px;
    }
    .el_banner_text h2 span::before {
        bottom: -14px;
        left: -30px;
    }
    .el_banner_text h2 span::after {
        top: -14px;
        left: -30px;
    }
    @keyframes leftright {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(180px);
        }
    }
    @keyframes topbtm {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(70px);
        }
    }
    .el_banner_btn a {
        margin: auto;
    }
    .el_partner_heading {
        text-align: center;
    }
    .el_partner_img {
        max-width: 100%;
        margin: auto;
        justify-content: center;
        gap: 30px 50px;
        flex-wrap: wrap;
    }
    .el_about_img .about-img2 {
        bottom: 30px;
        right: 50px;
    }
    .el_about_box {
        gap: 30px;
        padding: 20px;
    }
    .el_enroll_heading {
        padding-top: 0;
    }
    .el_enroll_form {
        max-width: 100%;
    }
    .el_enroll_form .enroll-img1 {
        max-width: 200px;
        right: -10px;
        top: -10px;
    }
    .el_enroll_form .enroll-img2 {
        max-width: 70px;
    }
    .el_joinus_bg .arrow1,
    .el_joinus_bg .arrow2 {
        display: none;
    }
    .el_testi_box {
        padding: 40px 35px;
    }
}

@media (max-width: 767.98px) {
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 38px;
    }
    h3,
    .el_form_heading h3 {
        font-size: 26px;
    }
    h4,
    .el_plan_price h3 span {
        font-size: 17px;
    }
    .el_section_wrapper,
    .el_partner_wrapper {
        padding: 60px 0;
    }
    .el_course_wrapper {
        padding-bottom: 130px;
    }
    .el_blogs_wrapper {
        padding-bottom: 90px;
    }
    .el_search_res {
        display: flex;
    }
    .el_header_form {
        position: fixed;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        left: 0%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        cursor: url(../images/close_search.png), auto;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
    }
    .el_header_serch {
        transform: translateY(200px);
        transition: all 2s;
    }
    .el_header_form.show,
    .el_header_form.show .el_header_serch {
        transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }
    .el_banner_text h2 {
        margin: 15px 0 25px;
    }
    .el_banner_text h2 span::before {
        bottom: -15px;
        left: -37px;
    }
    .el_banner_text h2 span::after {
        top: -15px;
        left: -37px;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-2,
    .el_banner_img .shape-3,
    .el_banner_img .shape-4 {
        max-width: 160px;
    }
    .el_about_img .about-img1,
    .el_about_img .about-img2 {
        max-width: 160px;
    }
    .el_about_img .about-img2 {
        right: -15px;
    }
    .el_about_box {
        padding: 20px 15px;
        gap: 15px 20px;
    }
    .el_course_slider .swiper-button-prev,
    .el_course_slider .swiper-button-next {
        bottom: -70px;
    }
    .el_service_box {
        padding: 15px 15px 20px;
    }
}

@media (max-width: 575.98px) {
    body,
    h5,
    h6 {
        font-size: 14px;
    }
    h4,
    .el_plan_price h3 span {
        font-size: 16px;
    }
    .el_banner_text h1,
    .el_banner_text h2 {
        font-size: 35px;
    }
    h3,
    .el_form_heading h3 {
        font-size: 24px;
    }
    .el_section_wrapper,
    .el_partner_wrapper {
        padding: 50px 0;
    }
    .el_course_wrapper {
        padding-bottom: 120px;
    }
    .el_blogs_wrapper {
        padding-bottom: 80px;
    }
    .el_btn,
    .el_banner_btn .el_btn,
    .el_course_filter a {
        min-width: 130px;
        gap: 15px;
        min-height: 50px;
    }
    .el_top_icon a {
        width: 45px;
        height: 45px;
    }
    .el_banner_text h2 span::before {
        bottom: -17px;
        left: -41px;
    }
    .el_banner_text h2 span::after {
        top: -17px;
        left: -41px;
    }
    .el_banner_img .shape-1,
    .el_banner_img .shape-2,
    .el_banner_img .shape-3,
    .el_banner_img .shape-4,
    .el_about_img .about-img1,
    .el_about_img .about-img2,
    .el_enroll_form .enroll-img1,
    .el_enroll_form .enroll-img2 {
        display: none;
    }
    .el_banner_btn {
        margin-top: 20px;
    }
    .el_partner_logo img {
        max-width: 85%;
    }
    .el_about_box {
        padding: 20px 25px;
        gap: 15px 20px;
    }
    .el_course_filter {
        gap: 15px;
    }
    .el_service_box.service-2,
    .el_service_box.service-3 {
        margin: auto;
    }
    .el_enroll_form {
        padding: 15px 15px 0;
    }
    .el_enroll_form form {
        padding: 25px 20px;
    }
    .el_input_flex {
        flex-wrap: wrap;
    }
    .el_form_input select,
    .el_form_input input {
        min-height: 50px;
    }
    .el_testi_box {
        padding: 30px 20px;
    }
    .el_testi_icon {
        margin-bottom: 20px;
    }
    .el_testi_text {
        padding-bottom: 25px;
    }
    .el_testi_bottom {
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .el_testi_client {
        flex-wrap: wrap;
        gap: 10px;
    }
    .el_testi_client::before {
        left: -15px;
    }
    .el_testimonial_slider .swiper-slide {
        padding: 10px 7px;
    }
    .el_testi_content::before {
        left: -7px;
        top: -10px;
    }
    .el_testi_content::after {
        right: -7px;
        bottom: -10px;
    }
    .el_newsletter_input input {
        min-height: 70px;
        padding: 0 150px 0 15px;
    }
}

@media (max-width: 399.98px) {}