/* ========

Template Name: Educater - Online Courses & Education HTML Template

===========*/


/* =========
--- CSS INDEX ---
1.Fonts CSS
2.Common CSS
3.loaders CSS
4.Header CSS
5.Banner CSS
6.Course Category CSS
7.About Us CSS
8.Partner Logo CSS
9.Online Courses CSS
10.Event CSS
11.Pricing CSS
12.Cor Feature CSS
13.Instructor CSS
14.Testimonial CSS
15.Blog CSS
16.Cta CSS
17.Footer CSS
18.Scroll To Top CSS
19.Bubbles Animation CSS
20.About Us Page CSS
21.Courses Page CSS
22.Course Detail Page CSS
23.Instructor Page CSS
24.Instructor Detail Page CSS
25.FAQ Page CSS
26.Pricing Page CSS
27.Blog-List Page CSS
28.Blog Detail Page CSS
29.Contact Us Page CSS
30.Responsive CSS
============*/



/*==Scrollbar==*/

::-webkit-scrollbar {
    width: 5px;
}

::-moz-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
    background-color: #bfbfbf;
}

::-moz-scrollbar-track {
  background-color: #bfbfbf;
}

::-webkit-scrollbar-thumb {
    background: #ff5219;
    border-radius: 10px;
}

::-moz-scrollbar-thumb {
  background: #ff5219;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0060ff;
}

::-moz-scrollbar-thumb:hover {
  background: #0060ff;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

input,
input:focus,
input:hover,
button,
button:hover,
button:focus {
    outline: none;
}

section {
    overflow: hidden;
}

img {
    width: auto;
    max-width: 100%;
}

p {
    font-size: 15px;
    line-height: 24px;
    color: #777777;
    font-weight: normal;
    margin-bottom: 12px;
}

.h1-title{
    font-family: 'Jost', sans-serif;
    font-size: 80px;
    color: #050d36;
    font-weight: 900;
    line-height: 90px;
}

.h2-title{
    font-family: 'Jost', sans-serif;
    font-size: 65px;
    color: #050d36;
    line-height: 80px;
    font-weight: 800;
    padding-bottom: 25px;
    padding-top: 12px;
}

.h3-title {
    font-family: 'Jost', sans-serif;
    font-size: 25px;
    color: #050d36;
    line-height: 35px;
    font-weight: 700;
}

.h2-subtitle {
    position: relative;
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    color: #0060ff;
    line-height: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
    display: inline-block;
}


.sec-btn {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff !important;
    height: 60px;
    background-color: #ff5219;
    display: inline-block;
    padding: 18px 45px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
    position: relative;
    z-index: 1;
}

.sec-btn:hover {
    box-shadow: 0px 10px 24px 0px rgb(5,13,54,0.2)
}

.sec-btn::before {
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 8px;
    background-color: #050d36;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    z-index: -1;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.sec-btn:hover::before {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    right: 0px;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}


/*==========Scroll To Top CSS Start==========*/
.scroll-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #ff5219;
    border-radius: 100%;
    font-size: 25px;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    transition: 0.3s;
    overflow: hidden;
    z-index: 50;
    display: none;
}

.scroll-top:hover {
    box-shadow: 1px 1px 60px rgb(0 0 0 / 15%);
    transition: 0.3s;
    color: #ffffff;
}

.scroll-top:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0060ff;
    transition: 0.3s;
    z-index: 0;
}

.scroll-top:hover:before {
    top: 0;
}

.scroll-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 10px;
    z-index: 1;
}

.scroll-top:hover i {
    animation: swipe 0.6s linear infinite alternate;
}

@keyframes swipe {
    from {
        margin-top: -3px;
    }
    to {
        margin-top: 3px;
    }
}
/*==========Scroll To Top CSS End==========*/

/*==========Cta CSS End==========*/

/*==========Footer CSS Start==========*/
.main-footer {
    background-color: #050d36;
    padding-top: 235px;
}

.footer-logo-content {
    text-align: left;
}

.footer-logo-content p {
    color: #d1d9fe;
    margin-top: 24px;
    margin-bottom: 34px;
}

.footer-logo-content ul {
    list-style: none;
    text-decoration: none;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
}

.footer-logo-content ul li {
    margin-left: 20px;
}

.footer-logo-content ul li:first-child {
    margin-left: 0;
}

.footer-logo-content ul li a i {
    width: 45px;
    height: 45px;
    background-color: rgb(255,255,255,0.1);
    border-radius: 4px;
    line-height: 18px;
    font-size: 18px;
    padding-top: 4px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-logo-content ul li a i:hover {
    background-color: rgb(255,82,25,1);
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-our-link {
    text-align: left;
    padding: 0 100px;
}

.footer-our-link .h3-title {
    color: #ffffff;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.footer-our-link ul {
    list-style: none;
    text-decoration: none;
    margin-bottom: 0;
    padding-left: 0;
}

.footer-our-link ul li {
    margin-bottom: 10px;
}

.footer-our-link ul li:last-child {
    margin-bottom: 0;
}

.footer-our-link ul li a {
    font-family: 'Roboto', sans-serif;
    line-height: 15px;
    color: #d1d8fe;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-our-link ul li a:hover {
    padding-left: 10px;
    color: #ff5219;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-other-link {
    text-align: left;
    padding: 0 85px;
}

.footer-other-link .h3-title {
    color: #ffffff;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.footer-other-link ul {
    list-style: none;
    text-decoration: none;
    margin-bottom: 0;
    padding-left: 0;
}

.footer-other-link ul li {
    margin-bottom: 10px;
}

.footer-other-link ul li:last-child {
    margin-bottom: 0;
}

.footer-other-link ul li a {
    font-family: 'Roboto', sans-serif;
    line-height: 15px;
    color: #d1d8fe;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-other-link ul li a:hover {
    padding-left: 10px;
    color: #ff5219;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-subscribe .h3-title {
    color: #ffffff;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.footer-subscribe-form {
    position: relative;
}

.footer-subscribe-form .sec-btn {
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 8px 8px 0;
    padding: 0;
    font-size: 20px;
    width: 60px;
    height: 60px;
}

.footer-subscribe-form .sec-btn:hover {
    background-color: #0060ff;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.footer-subscribe-form .sec-btn::before {
    position: relative;
}

.footer-copyright-bg {
    background-color: #020828;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 120px;
}

.copyright-text {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 15px;
    color: #d1d8fe;
}

.copyright-text a {
    color: #ff5219;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.copyright-text a:hover {
    color: #0060ff;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}
/*==========Footer CSS End==========*/

/*==========Contact Us Page CSS Start==========*/
.main-contact-page-in {
    padding-top: 120px;
    padding-bottom: 120px;
}

.contact-detail-box {
    background-color: #0060ff;
    border-radius: 8px;
    padding: 60px 50px;
    box-shadow: 0px 30px 60px 0px rgb(0,96,255,0.4);
}

.contact-detail-box .h3-title {
    color: #ffffff;
    font-size: 36px;
    line-height: 46px;
}

.contact-detail-box p {
    color: #ffffff;
}

.contact-detail-box ul {
    list-style: none;
    text-decoration: none;
    margin-bottom: 0;
    padding-left: 0;
    margin-top: 50px;
}

.contact-detail-box ul li {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.contact-detail-box ul li:last-child {
    margin-bottom: 0;
}

.contact-detail-content p {
    color: #ffffff;
    text-transform: uppercase;
}

.contact-text {
    color: #ffffff;
    font-size: 22px;
    line-height: 32px;
    font-weight: 500;
}

.contact-detail-content {
    width: calc(100% - 50px);
}

.contact-detail-icon {
    margin-right: 20px;
}

.get-touch-box {
    padding-left: 20px;
}

.get-touch-form .form-input {
    border: solid 1px #777777;
}

.get-touch-form .sec-btn {
    margin-top: 10px;
    border: none;
}

.get-touch-form textarea {
    height: 160px;
}

.main-contact-map-in {
    width: 100%;
    height: 500px;
    margin-bottom: -135px;
}

.main-contact-map-in iframe {
    width: 100%;
    height: 100%;
}
/*==========Contact Us Page CSS End==========*/

/*==========Scroll To Top CSS Start==========*/
.scroll-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #ff5219;
    border-radius: 100%;
    font-size: 25px;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    transition: 0.3s;
    overflow: hidden;
    z-index: 50;
    display: none;
}

.scroll-top:hover {
    box-shadow: 1px 1px 60px rgb(0 0 0 / 15%);
    transition: 0.3s;
    color: #ffffff;
}

.scroll-top:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0060ff;
    transition: 0.3s;
    z-index: 0;
}

.scroll-top:hover:before {
    top: 0;
}

.scroll-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 10px;
    z-index: 1;
}

.scroll-top:hover i {
    animation: swipe 0.6s linear infinite alternate;
}

@keyframes swipe {
    from {
        margin-top: -3px;
    }
    to {
        margin-top: 3px;
    }
}
/*==========Scroll To Top CSS End==========*/

/*==========Bubbles Animation CSS Start==========*/
.bubbles_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
}

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left: 0
    }
    to {
        margin-left: 25px
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left: 0
    }
    to {
        margin-left: 25px
    }
}

@keyframes sideWays {
    0% {
        margin-left: 0
    }
    to {
        margin-left: 25px
    }
}

.x1 {
    -webkit-animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 6%;
    top: 45%;
    background: #ff5219;
}

.x2 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 5%;
    top: 80%;
    background: #0060ff;
}

.x3 {
    -webkit-animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    top: 40%;
    background: #ff5219;
}

.x4 {
    -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 20%;
    top: 0;
    background: #0060ff;
}

.x5 {
    -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 30%;
    top: 50%;
    background: #ff5219;
}

.x6 {
    -webkit-animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 50%;
    top: 0;
    background: #0060ff;
}

.x7 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 65%;
    top: 70%;
    background: #ff5219;
}

.x8 {
    -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 80%;
    top: 10%;
    background: #0060ff;
}

.x9 {
    -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 90%;
    top: 50%;
    background: #ff5219;
}

.x10 {
    -webkit-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 80%;
    top: 80%;
    background: #0060ff;
}

.bubble {
    position: absolute;
    border-radius: 2px;
    box-shadow: none;
    width: 5px;
    height: 5px;
}
/*==========Bubbles Animation CSS End==========*/

/*==========Responsive CSS Start==========*/
@media screen and (max-width: 1399px) {

.h1-title {
  font-size: 70px;
  line-height: 80px;
}

.h2-title {
  font-size: 55px;
  line-height: 70px;
}

.shape-1 {
  width: 90px;
  top: 210px;
  left: 30px;
}

.shape-2 {
  width: 55px;
  top: 670px;
  left: 35px;
}

.shape-3 {
  width: 263px;
}

.shape-4 {
  top: 650px;
  right: 116px;
  width: 30px;
}

.main-banner {
  padding-top: 200px;
}

.banner-content .h1-title {
  margin-bottom: 38px;
}

.about-img-box {
  width: 660px;
  float: right;
  left: 30px;
}

.cta-title .h2-title {
  font-size: 45px;
  line-height: 55px;
}

.footer-our-link {
  padding: 0 70px;
}

.footer-other-link {
  padding: 0 65px;
}

.get-course-price .h3-title {
   font-size: 22px;
}

.course-detail-rating-tag-box {
    margin-top: 30px;
}

.course-detail-date {
    margin-left: 88px;
}

.course-detail-rating-box {
    margin-left: 30px;
}

.instructor-detail-info-follow {
    margin-left: 30px;
}

}

@media screen and (max-width: 1199px) {

.h1-title {
  font-size: 60px;
  line-height: 70px;
}

.h2-subtitle {
  font-size: 20px;
  line-height: 20px;
}

.h2-title {
  font-size: 50px;
  line-height: 65px;
}

.h3-title {
  font-size: 22px;
  line-height: 30px;
}

.main-navigation ul li {
  font-size: 15px;
  margin-left: 0;
  padding-left: 22px;
}

.header-btn {
  margin-left: 26px;
}

.banner-content p {
  color: #777777;
  font-size: 15px;
  line-height: 24px;
}

.aliment-2 {
  right: 60px;
}

.banner-img-box {
  max-width: unset;
  width: 570px;
}

.event-date p {
  font-size: 30px;
  line-height: 30px;
}

.event-date p {
  margin-bottom: 2px;
}

.blog-date-comment .blog-box-line {
  margin-left: 6px;
  margin-right: 6px;
}

.cta-title .h2-title {
  font-size: 37px;
  line-height: 47px;
}

.cta-bg {
  padding: 40px 50px;
}

.footer-our-link {
  padding: 0 60px;
}

.footer-other-link {
  padding: 0 45px;
}

.main-banner-in {
    padding-top: 232px;
    padding-bottom: 124px;
}

.main-banner-in .shape-2 {
    position: absolute;
    top: 320px;
    left: 245px;
}

.main-banner-in .shape-3 {
    top: 188px;
}

.main-banner-in .shape-4 {
    width: 50px;
    top: 340px;
    right: 336px;
}

.academic-img-box {
    padding: 15px;
}

.event-detail-location-time {
    margin-top: 30px;
}

.event-detail-time {
    margin-left: 80px;
}

.instructor-detail-box .h3-title {
    font-size: 32px;
    line-height: 44px;
}

.instructor-detail-info-name .h2-title {
    font-size: 37px;
    line-height: 47px;
}

.instructor-detail-info-courses .h2-title {
    font-size: 37px;
    line-height: 47px;
}

.accordion-button.faq-btn {
    line-height: 26px;
    font-size: 16px;
}

.accordion.part-1 {
    padding-right: 10px;
}

.accordion.part-2 {
    padding-left: 10px;
}

.submit-ticket-form-content {
    padding-left: 10px;
}

.blog-detail-tag ul li:first-child {
   margin-bottom: 15px;
}

.blog-detail-related-blog-box .blog-box {
    margin-bottom: 30px;
}

.blog-detail-comment-box {
    margin-top: 90px;
}

.contact-detail-box {
    padding: 50px 40px;
}

}

@media screen and (max-width: 991px) {

.site-header,
.site-header.sticky-header {
    background: rgb(255,255,255,0.8);
    height: 70px;
    padding: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    -ms-backdrop-filter: blur(20px);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.header-bottom {
    background-color: transparent;
    box-shadow: none;
}

.site-branding a img {
    width: auto;
}

.sticky-header .header-bottom {
    padding: 23px 0px;
    animation: none;
    transition: 0.3s;
}

.site-header .container {
    max-width: 100%;
    padding: 0 30px;
}

.toggle-button {
    display: block;
}

.site-branding {
    position: fixed;
    top: 0;
    left: 30px;
    width: 200px;
    height: 70px;
    display: flex;
    align-items: center;
}

.site-branding a {
    width: 90%;
}

.main-navigation ul {
    position: fixed;
    top: 0;
    right: -400px;
    width: 320px;
    height: 100vh;
    max-height: 100vh;
    overflow: auto;
    background: #050d36;
    text-align: center;
    padding: 100px 0 30px;
    box-shadow: -30px 0 30px rgba(0,0,0,0.1);
    transition: 0.5s;
    opacity: 0;
    z-index: 100;
}

.main-navigation ul::before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  opacity: 0.5;
  background: radial-gradient(ellipse at center, rgba(0,96,255,0.6) 0%, rgba(0,96,255,0.6) 0%, rgba(0,96,255, 0) 68%, rgba(0,96,255, 0) 100%);
  -webkit-background: radial-gradient(ellipse at center, rgba(0,96,255,0.6) 0%, rgba(0,96,255,0.6) 0%, rgba(0,96,255, 0) 68%, rgba(0,96,255, 0) 100%);
  top: -430px;
  right: -310px;
  z-index: -1;
}

.main-navigation ul li ul::before {
  content: "";
  position: relative;
}

.main-navigation ul::after {
  content: "";
  position: absolute;
  width: 655px;
  height: 655px;
  opacity: 0.4;
  background: radial-gradient(ellipse at center, rgba(255,82,25,0.6) 0%, rgba(255,82,25,0.6) 0%, rgba(255,82,25, 0) 68%, rgba(255,82,25, 0) 100%);
  -webkit-background: radial-gradient(ellipse at center, rgba(255,82,25,0.6) 0%, rgba(255,82,25,0.6) 0%, rgba(255,82,25, 0) 68%, rgba(255,82,25, 0) 100%);
  bottom: -110px;
  left: -330px;
  z-index: -1;
}

.main-navigation ul li ul::after {
  content: "";
  position: relative;
}

.main-navigation.toggle-menu ul {
    right: 0;
    opacity: 1;
    z-index: 100;
}

.main-navigation>ul::-webkit-scrollbar-thumb {
    width: 0;
    background: transparent;
}

.main-navigation>ul::-webkit-scrollbar {
    width: 0;
}

.main-navigation>ul::-webkit-scrollbar-track {
    width: 0;
    background: transparent;
}

.main-navigation ul li {
    display: block;
    margin: -50px 0 10px 0;
    padding: 10px 40px 20px 40px;
    opacity: 0;
    transition: 0.5s;
}

.main-navigation ul li:first-child {
    padding: 10px 40px 20px 40px;
}

.main-navigation.toggle-menu ul li {
    text-align: left;
    border-bottom: solid 1px rgb(225, 225, 225,0.2);
    margin-top: 0;   
    opacity: 1;
    transition: 0.5s;
    transition-delay: 0.4s;
}

.main-navigation ul li:last-child {
    border-bottom: none;
}

.main-navigation ul li:last-child a {
    display: inline-block;
    margin: 0 auto;
}

.site-header.sticky-header .main-navigation ul li a, .site-header.sticky-header .search-icon a, .site-header.sticky-header .main-navigation ul li.sub-items>a:before {
    color: #ffffff;
}
.main-navigation ul li a {
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
}

.main-navigation ul li.sub-items>a:before {
    color: #ffffff;   
}

.main-navigation ul li.sub-items.active>a:before {
    color: #ff5219;   
}

.main-navigation ul li ul.sub-menu,
.main-navigation ul li:hover ul.sub-menu {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: block;
    animation: none;
    padding: 0;
    margin-top: 10px;
    transition: 0s;
    display: none;
}

.main-navigation ul li ul.sub-menu li {
    text-align: left;
    border: none;
    padding: 0 16px;
    margin-bottom: 10px;
}

.main-navigation ul li ul.sub-menu li:first-child {
    padding-left: 16px;
}

.main-navigation ul li ul.sub-menu li:last-child {
    margin-bottom: 0;
}

.main-navigation ul li ul.sub-menu li a {
    color: #ffffff;
    padding: 0;
    font-size: 15px;
    line-height: 24px;
}

.main-navigation ul li.sub-items:hover>a:before, 
.main-navigation ul li a:hover:before {
    transform: translate(0,-50%) rotate(0deg);
    color: #ff5219;
}

.main-navigation ul li.sub-items.active-sub-menu>a:before {
    transform: translate(0,-50%) rotate(-180deg);
    color: #ff5219;
}

.header-top {
    display: none;
}

.Social-midea {
    display: none;
}

.header-contact {
    display: none;
}

.header-btn {
    display: none;
}

.toggle-button {
    display: block;
}

.main-banner {
  padding-top: 147px;
}

.banner-content {
  text-align: center;
}

.banner-btn {
 justify-content: center;
}

.banner-content p {
  color: #777777;
  font-size: 15px;
  line-height: 24px;
  padding: 0 100px;
}

.banner-img-box {
  max-width: none;
  width: auto;
  margin-top: 60px;
}

.main-course-category {
  padding-top: 76px;
  padding-bottom: 50px;
}

.about-img-box {
  width: auto;
  float: none;
  left: 0;
}

.about-us-content {
  padding-left: 0;
  margin-top: 50px;
}

.main-about-us {
  padding-top: 80px;
  padding-bottom: 145px;
}

.main-online-courses {
  padding-top: 27px;
  padding-bottom: 200px;
}

.courses-slider .slick-list {
  overflow: visible;
}

.courses-slider .slick-slide{
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.courses-slider .slick-slide.slick-active {
  opacity: 1;
  pointer-events: unset;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.course-box {
  margin-bottom: 0;
  margin-left: 15px;
  margin-right: 15px;
}

.online-courses-title-btn {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translate(-50%);
  float: right;
}

.main-event {
  padding-top: 80px;
  padding-bottom: 80px;
}

.event-content-box {
  padding-left: 0;
  margin-top: 50px;
}

.pricing-slider .slick-list {
  overflow: visible;
}

.pricing-slider .slick-slide{
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.pricing-slider .slick-slide.slick-active {
  opacity: 1;
  pointer-events: unset;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.pricing-box {
  margin-left: 15px;
  margin-right: 15px;
}

.main-pricing {
  padding-top: 76px;
  padding-bottom: 100px;
}

.core-features-content {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-right: 0;
}

.core-features-img {
  position: relative;
  width: 100%;
  height: 500px;
}

.main-instructor {
  padding-top: 76px;
  padding-bottom: 100px;
}

.main-testimonial {
  padding-top: 76px;
  padding-bottom: 100px;
}

.testimonial-title {
  padding-right: 0;
  margin-bottom: 50px;
}

.main-blog {
  padding-top: 76px;
  padding-bottom: 80px;
}

.blog-slider .slick-list {
  overflow: visible;
}

.blog-slider .slick-slide{
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.blog-slider .slick-slide.slick-active {
  opacity: 1;
  pointer-events: unset;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.blog-box {
  margin-left: 15px;
  margin-right: 15px;
}

.blog-date-comment .blog-box-line {
  margin-left: auto;
  margin-right: auto;
}

.cta-title {
  text-align: center;
}

.cta-btn {
  margin-top: 30px;
  text-align: center;
}

.main-footer {
  padding-top: 195px;
}

.footer-our-link {
  padding: 0;
  margin-bottom: 50px;
}

.footer-other-link {
  padding: 0;
}

.footer-copyright-bg {
  margin-top: 70px;
}

.main-banner-in {
    padding-top: 192px;
}

.main-banner-in .shape-1 {
    width: 100px;
    top: 140px;
}

.main-banner-in .shape-2 {
    top: 260px;
    left: 155px;
}

.main-banner-in .shape-3 {
    top: 117px;
}

.main-banner-in .shape-4 {
    top: 260px;
    right: 226px;
}

.main-about-us-in {
    padding-top: 80px;
    padding-bottom: 20px;
}

.main-academics-programs {
    padding-top: 153px;
    padding-bottom: 100px;
}

.academic-slider .slick-list {
    overflow: visible;
}
  
.academic-slider .slick-slide{
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.academic-slider .slick-slide.slick-active {
    opacity: 1;
    pointer-events: unset;
    transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

.academic-box{
    margin-left: 15px;
    margin-right: 15px;
}

.academic-content p {
    padding: 0 15px;
}

.main-event-in {
    padding-top: 80px;
    padding-bottom: 80px;
}

.main-courses-in {
    padding-top: 80px;
    padding-bottom: 50px;
}

.main-courses-list-box {
    padding-left: 0;
    margin-top: 80px;
}

.main-courses-list-box .course-box {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}

.main-course-detail-in {
    padding-top: 68px;
    padding-bottom: 50px;
}

.course-detail-box {
    padding-right: 0;
}

.main-event-detail-in {
    padding-top: 54px;
    padding-bottom: 50px;
}

.event-detail-box {
    padding-right: 0;
}

.event-detail-sidebar {
    margin-top: 60px;
}

.course-detail-sidebar {
    margin-top: 80px;
}

.event-detail-location-time {
    margin-top: 0;
}

.event-detail-time {
    margin-left: 40px;
}

.main-instructor-detail-in {
    padding-top: 80px;
    padding-bottom: 76px;
}

.instructor-detail-box {
    width: auto;
    padding: 48px 50px;
    margin-top: -86px;
}

.main-instructor-page-in {
    padding-bottom: 20px;
}

.instructor-detail-info-img-box {
    width: 370px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.course-detail-rating-box {
    margin-left: 40px;
}

.instructor-detail-info-follow {
    margin-left: 40px;
}

.instructor-detail-info-courses .course-box {
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
}

.main-instructor-detail-page-in {
    padding-top: 80px;
    padding-bottom: 20px;
}

.instructor-detail-info-box {
    padding-left: 0;
}

.accordion.part-1 {
    padding-right: 0;
}

.accordion.part-2 {
    padding-left: 0;
}

.main-faq-in {
    padding-top: 77px;
    padding-bottom: 60px;
}

.main-submit-ticket-in {
    padding-top: 80px;
    padding-bottom: 50px;
}

.submit-ticket-form-content {
    padding-left: 0;
    margin-top: 50px;
}

.main-pricing-in {
    padding-top: 80px;
    padding-bottom: 50px;
}

.main-pricing-in .pricing-box {
    width: 370px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
}

.main-blog-list-box {
    padding-right: 0;
}

.main-blog-list-in {
    padding-top: 80px;
    padding-bottom: 50px;
}

.blog-list-sidebar {
    margin-top: 80px;
}

.blog-detail-related-blog-box .blog-box {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.main-blog-detail-in {
    padding-top: 80px;
    padding-bottom: 50px;
}

.blog-detail-related-blog-box {
    margin-top: 62px;
}

.blog-detail-comment-box {
    margin-top: 77px;
}

.blog-detail-leave-reply-box {
    margin-top: 26px;
}

.blog-detail-info-box {
    padding-right: 0;
}

.main-contact-page-in {
    padding-top: 80px;
    padding-bottom: 80px;
}

.contact-detail-box {
    margin-bottom: 80px;
}

.main-contact-map-in {
    margin-bottom: -180px;
}

.get-touch-box {
    padding-left: 0;
}

.main-blog-list-in .courses-pagination {
    padding-right: 0;
}

}

@media screen and (max-width: 767px) {

.h1-title {
  font-size: 48px;
  line-height: 58px;
}

.h2-title {
  font-size: 45px;
  line-height: 60px;
}

.h2-subtitle {
  font-size: 18px;
  line-height: 18px;
}

.banner-content p {
  padding: 0;
}

.footer-logo-content {
  margin-bottom: 50px;
}

.footer-other-link {
  margin-bottom: 50px;
}
.event-detail-location-time {
    margin-top: 30px;
}

.event-detail-time {
    margin-left: 80px;
}

.instructor-detail-box .h3-title {
    font-size: 30px;
    line-height: 32px;
}

.instructor-detail-box p {
    font-size: 16px;
    line-height: 26px;
}

.instructor-detail-box {
    width: auto;
    padding: 28px 30px;
    margin-top: 30px;
}

.instructor-detail-img-box {
    padding-right: 0;
}

.instructor-detail-info-user-box {
    display: block;
}

.instructor-detail-info-follow {
    margin-left: 0;
    margin-top: 30px;
}

.blog-detail-related-blog-box .blog-box {
    margin-bottom: 30px;
}

.blog-detail-comment-box {
    margin-top: 47px;
}

}

@media screen and (max-width: 575px) {

.container {
  padding: 0 30px;
}

.h1-title {
  font-size: 50px;
  line-height: 60px;
}

.main-banner-in .shape-2 {
    top: 260px;
    left: 75px;
}

.main-banner-in .shape-4 {
    top: 260px;
    right: 96px;
}

.course-detail-date {
    margin-left: 48px;
}

.course-detail-tag-box {
    margin-left: 25px;
}

.main-instructor-page-in .instructor-box {
    width: 370px;
    margin-left: auto;
    margin-right: auto;
}

.instructor-detail-box {
    width: 100%;
}

.instructor-detail-box .h3-title {
    font-size: 25px;
    line-height: 28px;
}

.client-comment-box {
    display: block;
    align-items: center;
}

.client-comment-img {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    width: 120px;
    height: 120px;
}

.client-comment-content {
    width: auto;
    text-align: center;
}

}

@media screen and (max-width: 546px) {

.instructor-detail-info-name-rating {
    display: block;

}

.course-detail-rating-box {
    margin-left: 0;
    margin-top: 30px;
}

.instructor-detail-info-name-rating .course-detail-rating-box {
    margin-left: 0;
}

}

@media screen and (max-width: 530px) {

.blog-big-user-line {
    margin-right: 10px;
    margin-left: 10px;
}

}

@media screen and (max-width: 516px) {
.courses-list-style-box {
    display: block;  
}

.courses-list-dropdown-box .form-select {
    margin-top: 15px;
}

}

@media screen and (max-width: 496px) {

.banner-btn {
  display: block;
}

.shape-1 {
  width: 70px;
  top: 110px;
  left: 30px;
}

.shape-3 {
  width: 113px;
}

.aliment-1 {
  padding: 10px;
  top: 187px;
}

.aliment-2 {
  padding: 10px;
  top: 275px;
}

.aliment-3 {
  padding: 10px;
  top: 367px;
}

.sec-btn.btn-2 {
  background-color: #050d36;
  margin-left: 0;
  margin-top: 30px;
}

.about-img-box .aliment-1 {
  top: 130px;
}

.about-img-box .aliment-3 {
  top: 250px;
}

.event-box {
  text-align: center;
  display: block;
}

.event-text-line {
  width: 100%;
  height: 1px;
  margin-left: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

.event-time-place {
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-content-text .h3-title {
  margin-top: 5px;
}

.testimonial-quote {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.cta-title .h2-title {
  font-size: 30px;
  line-height: 40px;
}

.cta-bg {
    padding: 30px 10px;
}

.course-detail-rating-tag-box {
    display: block;
}

.course-detail-tag-box {
    margin-left: 0;
    margin-top: 30px;
}

.course-detail-date {
    margin-left: 40px;
}

.related-event-text span:last-child {
    margin-left: 10px;
}

.instructor-detail-box .h3-title {
    font-size: 22px;
    line-height: 24px;
}

.instructor-detail-box p {
    font-size: 15px;
    line-height: 24px;
}

.main-instructor-page-in .instructor-box {
    width: auto;
}

.blog-big-user-line {
    display: none;
}

.blog-big-user {
    margin-right: 10px;
}

.blog-big-content {
    padding: 20px;
}

.contact-detail-box .h3-title {
    color: #ffffff;
    font-size: 32px;
    line-height: 42px;
}

.contact-text {
    font-size: 18px;
    line-height: 28px;
}

.pagination-arrow {
    margin: 0 10px;
}

}

@media screen and (max-width: 471px) {

.blog-detail-tag ul li {
    margin-bottom: 15px;
}

.blog-detail-tag ul li:last-child {
    margin-bottom: 0;
}

}

@media screen and (max-width: 458px) {

.blog-big-user-box {
    display: block;
    align-items: center;
}

.blog-big-user {
    margin-right: 0;
    margin-bottom: 10px;
}

.main-pricing-in .pricing-box {
    width: auto;
}

}

@media screen and (max-width: 410px) {

.get-course-price .h3-title {
    font-size: 20px;
}

.instructor-detail-info-img-box {
    width: 100%;
}

}

@media screen and (max-width: 375px) { 

.container {
  padding: 0 15px;
}

.h1-title {
  font-size: 38px;
  line-height: 48px;
}

.h2-subtitle {
  font-size: 16px;
  line-height: 26px;
}

.h2-title {
  font-size: 35px;
  line-height: 50px;
}

.aliment-1 {
  padding: 10px;
  top: 197px;
}

.aliment-2 {
  display: none;
}

.aliment-3 {
  display: none;
}

.aliment-4 {
  width: 50px;
  height: 50px;
  top: 83px;
  right: 30px;
}

.event-video-play-box {
  padding: 27px 32px;
}

.online-courses-title-btn {
  left: 32%;
  transform: translate(-22%);
}

.main-banner-in .shape-2 {
    width: 50px;
    top: 260px;
    left: 65px;
}

.main-banner-in .shape-4 {
    width: 40px;
    top: 260px;
    right: 46px;
}

.event-detail-time {
    margin-left: 60px;
}

.event-detail-date {
    margin-left: 30px;
}

.instructor-detail-info-name .h2-title {
    font-size: 30px;
    line-height: 40px;
}

.instructor-detail-info-courses .h2-title {
    font-size: 30px;
    line-height: 40px;
}

.banner-breadcrum {
    display: block;
    padding: 15px 10px;
}

.contact-text {
    font-size: 16px;
    line-height: 25px;
}

.contact-detail-box {
    padding: 45px 35px;
}

}

@media screen and (max-width: 356px) {

.course-detail-instructor-date-box {
    display: block;
}

.course-detail-date {
    margin-left: 0;
    margin-top: 30px;
}

.get-course-price .h3-title {
    font-size: 16px;
}

.get-the-course {
    padding: 20px;
}

.recent-course-box {
    padding: 20px;
}

.event-detail-price-box {
    padding: 20px;
}

.event-detail-price-box .sec-btn {
    padding: 18px 38px;
}

.event-detail-related-event-box {
    padding: 20px;
}

.blog-list-sidebar-categories-box {
    padding: 20px;
}

.blog-list-sidebar-recent-post {
    padding: 20px;
}

.blog-list-sidebar-tag-box {
    padding: 20px;
}

.pagination-arrow {
    margin: 0 5px;
}
    
}
/*==========Responsive CSS End==========*/