@import url(https://fonts.googleapis.com/css?family=Jost:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

#myVideo,
.bg,
.hidden,
.login_menu_btn {
    display: none
}

.OurTeamSlideImg,
.btn-2:hover:after,
.offcanvas,
header,
img {
    width: 100%
}

.faq-question,
.main-btn {
    cursor: pointer;
    outline: 0
}

.add-cart button,
.f_list a {
    text-decoration: none
}

*,
.faq-answer p,
h5.price {
    margin: 0
}

.F_course_content .Playlist,
.UpperHeading {
    text-wrap: balance;
    font-size: 18px
}

.VdoBox h2,
.VdoBox p,
.home-content h1,
.home-content h5,
h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: capitalize
}

*,
.chat,
.tag-list {
    list-style: none
}

* {
    padding: 0;
    box-sizing: border-box;
    font-family: Jost, sans-serif
}

:root {
    --primaryClr: #b6ff52;
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%)
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1
}

body {
    background-color: #fff !important;
    font-family: poppins
}

.OurTeamSlideImg-new {
    max-width: 100% !important
}

.card-body-inner {
    padding: 5px 14px
}

.card-body-inner h5 {
    font-size: 24px;
    font-weight: 700
}

.pricing-right-content {
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.pricing-details-heading-wrapper p {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 19px;
    line-height: 14px
}

.pricing-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.pricing-detail-content,
.pricing-detail-wrapper {
    display: flex;
    align-items: center
}

.pricing-detail-content {
    gap: 10px;
    font-size: 16px;
    color: #555
}

.check-wrapper svg {
    width: 24px;
    height: 24px;
    background-color: #ebf4ff;
    border-radius: 50%;
    padding: 4px
}

.bold-200 {
    font-weight: 500;
    color: #4a4a4a
}

.bold-200:hover {
    color: #007bff;
    cursor: pointer
}

.SignupForm .hr,
[data-toggle=tooltip] {
    position: relative
}

[data-toggle=tooltip]::after {
    content: attr(title);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s
}

[data-toggle=tooltip]:hover::after {
    opacity: 1;
    visibility: visible
}

.ACardContent,
.TeamSliderBox,
.TeamSliderBox h4+p,
.VdoBox,
header {
    position: relative
}

.Layout-y,
.home_banner {
    z-index: 10;
    position: relative
}

.Layout-y {
    padding-block: 50px;
    padding: 70px
}

header {
    top: 0;
    z-index: 99999;
    opacity: 1;
    padding: 0 44px;
    background-color: #111410 !important;
    border: 1px solid #3b3d3a
}

.header_left,
.studentCount {
    gap: 50px
}

.header_inner {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center
}

nav ul li a img {
    max-width: 40px
}

.ServicesIcon img,
header .header_logo a img {
    max-width: 50px
}

header img[alt=site_logo] {
    max-width: 200px
}

.combo_cta .logo {
    margin-right: 30px
}

.modal-dialog-new {
    max-width: none !important
}

.C_header h2 {
    font-size: 50px;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 30px;
    color: #fff
}

.VdoBox p,
.f_list ul li {
    margin-bottom: 5px
}

.home_banner {
    line-height: 1.1;
    background-size: 45%
}

.BannerContent div:first-child {
    font-size: 110px;
    letter-spacing: 4px;
    font-weight: 700;
    align-self: flex-start
}

.BannerContent span:last-child {
    font-size: 35px;
    align-self: flex-end;
    margin-right: 35px
}

.BannerContent div:nth-child(2) {
    font-size: 110px;
    letter-spacing: 4px;
    font-weight: 700
}

.TeamSliderBox {
    border-radius: 12px;
    height: 404px;
    width: 100%;
    border: 2px solid #e8028d;
    background-color: #fff;
}

.CardImg,
.CardImg img {
    height: 240px;
    width: 100%
}

#vdoModal .modal-dialog,
.ApplyInner {
    max-width: 650px
}

.TeamSliderBox h4 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    width: 90%;
    line-height: 30px;
}
.TeamSliderBox span {
    color: #e8028d;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    padding: 5px 15px;
    background-color: #fff;
    border-radius: 30px;
    margin-bottom: 10px;
    display: inline-block;
}
.student_slide:hover .TeamSliderBox h4 {
    color: #fff;
}
.team-para {
    z-index: 0 !important;
    padding: 25px;
    position: absolute !important;
    bottom: 0;
}

.TeamSliderBox h4+p {
    font-size: 16px;
    color: #fff;
    max-width: 226px;
    z-index: 1
}

#TeamSliderBox1 {
    border-radius: 8px;
    background: linear-gradient(180deg, #406709 0, #9fe145 100%)
}

.NextBtn img {
    max-width: 55px;
    cursor: pointer;
    object-fit: contain
}

#student1 {
    background: linear-gradient(180deg, #ff640d 0, #ff8f51 100%)
}

#student2 {
    background: linear-gradient(180deg, #58c6ff 0, #d1efff 100%)
}

#student3 {
    background: linear-gradient(180deg, #7b7b7b 0, #cacaca 100%)
}

.ACardContent {
    text-align: center;
    color: #fff;
    z-index: 9;
    margin: 0 !important;
    padding: 25px 0;
    background-color: #0000002b
}

.ACardContent h4 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px
}

.ACardContent p {
    font-size: 16px;
    font-weight: 400
}

.CardImg {
    margin: auto
}

.CardImg img {
    object-fit: contain;
    border-radius: 10px
}

.ApplyBox {
    border-radius: 32px;
    color: #fff;
    text-align: center;
    padding: 32px
}

.ApplyInner {
    margin: 0 auto
}

.ApplyBox h3 {
    font-size: 40px
}

.ApplyBox p {
    margin-top: 20px;
    font-size: 16px
}

.a_input {
    display: flex;
    gap: 5px;
    margin-top: 2rem
}

.a_input input[type=text] {
    flex-grow: 1;
    padding: 16px 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .71);
    color: #fff
}

.a_input input[type=submit] {
    border-radius: 8px;
    background: var(--primaryClr);
    padding: 6px 28px;
    font-size: 20px;
    letter-spacing: 2px
}

.synchrocityMap {
    max-width: 900px;
    margin: auto
}

.synchrocityMap img {
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px
}

.VdoContainer::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: rgb(0 0 0 / 50%)
}

.VdoBox {
    z-index: 2
}

.VdoBox h2 {
    font-size: 52px
}

.VdoBox p {
    font-size: 34px;
    letter-spacing: 1px
}

.VdoIcon {
    background: 0 0;
    border: none
}

.Chatbot img,
.VdoIcon img,
.header-logo {
    max-width: 60px
}

.Chatbot {
    position: fixed;
    bottom: 40px;
    right: 35px;
    z-index: 999
}

.Brand_logo img {
    width: 100px !important;
    height: 100px;
    border-radius: 42px
}

.L_heading h2 {
    font-size: 55px;
    color: var(--primaryClr);
    letter-spacing: 2px
}

.L_content button,
.L_content button:hover {
    background: #000;
    color: #fff;
}

.D_title span,
.L_heading p,
.RotateText h3 {
    font-size: 30px
}

.L_content button {
    border-radius: 10px;
    font-weight: 600;
    font-size: 18px;
    padding: 10px 30px
}

.feedbackSliderBox {
    padding: 30px 40px;
    border-radius: 24px;
    background-color: #efefef;
    box-shadow: rgb(182 255 82 / 9%) 0 1px 3px 0, rgb(182 255 82 / 40%) 0 0 0 1px;
    backdrop-filter: blur(2px);
    margin-bottom: 1px
}

.F_content {
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    line-height: 28px
}

.f_slider_img {
    height: 83px;
    width: 88px
}

.f_slider_img img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover
}

.F_right_heading h5 {
    font-size: 28px;
    color: #e8028d
}

.CoursesHeading,
.D_title h4,
.G_btn,
.RotateText h3,
.ServicesHeader h4,
.ServicesHeader span,
.SignupBox h4,
.UpcomingBox1 h2,
.f_list a {
    letter-spacing: 1px
}

.F_right_heading span {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px
}

.feedbackContainer h3 {
    font-size: 45px
}

.verifyOtp_,
.wishlist-btns a {
    text-wrap: nowrap
}

.FeedbackSlider :where(.swiper-button-next, .swiper-button-prev) {
    top: 25px !important;
    border: 1px solid #e8028d;
    background: #fff;
    width: 40px !important;
    height: 40px !important
}

section :where(.swiper-button-next, .swiper-button-prev) {
    border-radius: 6px;
    border: 1px solid #e8028d;
    background: #fff;
    top: 25px;
    width: 40px !important;
    height: 40px
}

section .swiper-button-next::after,
section .swiper-button-prev::after {
    font-size: 17px !important;
    font-weight: 600;
    color: #e8028d
}

.EvenetSection {
    padding-top: 4rem;
    position: relative;
    z-index: 2
}

.UpcommingEventslider {
    padding-bottom: 65px
}

.UpcommingEventslider .swiper-button-next {
    top: unset !important;
    left: 53% !important;
    bottom: 0;
    width: 35px;
    height: 38px
}

.UpcommingEventslider .swiper-button-prev {
    top: unset !important;
    left: 45% !important;
    bottom: 0;
    width: 35px;
    height: 38px
}

.FeedbackSlider .swiper-button-prev {
    right: 60px !important;
    left: unset !important;
    border: 1px solid #e8028d;
    background: #fff;
    width: 40px !important;
    height: 40px !important
}

.serviceCard {
    border: 1px solid rgba(255, 255, 255, .3);
    background: linear-gradient(180deg, rgba(250, 250, 250, .08) 0, rgba(250, 250, 250, .08) 100%);
    border-radius: 16px 16px 50px 50px
}

.s_img {
    height: 250px
}

.header_btn button:hover::before,
.s_img img {
    height: 100%
}

.serviceContent {
    padding: 22px
}

.ServicesHeader h4 {
    font-size: 18px
}

.featuredCard {
    border-radius: 24px;
    border: 1px solid #fff;
    background: linear-gradient(6deg, #1567e5 .43%, rgba(6, 75, 181, 0) 99.36%), rgba(0, 0, 0, .3);
    padding: 50px 24px;
    width: 340px;
    text-align: center
}

.C_inner_box,
.MidBoxInner {
    background: rgba(72, 72, 72, .42)
}

#featuredCard1 {
    background: linear-gradient(6deg, rgba(148, 255, 0, .6) .13%, rgba(148, 255, 0, 0) 99.93%), rgba(0, 0, 0, .3)
}

.featuredCardImg img {
    max-width: 75px
}

.FeaturedContent h4 {
    margin-top: 1rem;
    font-size: 28px;
    letter-spacing: 1.1px
}

.FeaturedContent p {
    line-height: 1.7;
    text-align: center
}

.header_btn {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center
}

.btn_anchor {
    color: #fff;
    padding: 10px 15px;
    border: 1px solid #fff;
    border-radius: 8px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 2px
}

.btn_anchor:hover {
    background-color: #fff;
    color: #111
}

.starImg img {
    max-width: 80px
}

.first_Course_img>.F-Img {
    max-width: 345px;
    border-radius: 20px
}

.SecondImg {
    width: 295px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-32%, -11%);
    transition: .5s ease-in-out
}

.SecondImg:hover {
    transform: translateY(.1px)
}

.C_inner_box h4::after,
.CoursesHeading::after,
.SignupForm .hr p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.SecondImg img,
.product-card img {
    border-radius: 20px
}

.F_course_content h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(to right, #007bff, #a133ff, #f3c, #f36, #950059ad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.F_course_content .Playlist,
.SignupForm label,
.awardsCard .header_btn .btn:hover,
.cart-subtotal th,
.cart-totals td,
.cart-totals th,
.main-btn:hover,
.price_content ul,
.social_links ul li i,
.team-para p,
.voucher-btn,
td {
    color: #111;
}

.studentCount p {
    font-size: 35px;
    font-weight: 700
}

.F_course_content {
    padding-left: 28px
}

.studentCount span {
    font-size: 18px;
    font-size: inherit;
    text-align: center
}

.CoursesHeading {
    position: relative;
    font-size: 48px;
    font-weight: 500;
    padding-bottom: 60px
}

.CoursesHeading::after {
    content: "";
    width: 11%;
    height: 4px;
    border-radius: 5px;
    background-color: var(--primaryClr)
}

.Courses_grid {
    display: grid;
    grid-template-columns: 0.6fr 2fr 0.6fr;
    gap: 18px
}

.C_inner_box {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 25px 5px;
    border-radius: 24px;
    border: 1px solid #fff
}

.C_inner_box h4 {
    font-size: 36px;
    color: var(--primaryClr);
    position: relative;
    padding-bottom: 50px
}

.RotateText {
    transform: rotate(90deg)
}

.C_inner_box h4::after {
    content: "";
    width: 100%;
    height: 1px;
    border-radius: 5px;
    background-color: #484848
}

.RotateText p {
    color: #a5a5a5;
    font-size: 14px
}

.MidBoxInner {
    padding: 25px 15px;
    border-radius: 24px;
    border: 1px solid #fff
}

.MidBoxInner p {
    color: rgb(125 125 125);
    font-size: 11px
}

.courses-main-img,
.d_rumImg {
    height: 300px
}

.d_rumImg img {
    height: 100%;
    object-fit: cover;
    cursor: pointer
}

.G_btn img,
.signImg {
    object-fit: contain
}

.D_title h4,
.SignupBox h4 {
    font-size: 28px
}

.f_list a,
.f_list h4 {
    font-size: 20px;
    color: #111;
}
.products-section {
    display: none;
}
.V_chagne img {
    max-width: 30px
}

footer {
    background-color: transparent;
    border-top: 1px solid #d6d6d6;
}

.footer_innerContainer {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .3)
}

.F_innerImg {
    display: flex;
    justify-content: space-between
}

.F_innerImg img {
    max-width: 50px;
    cursor: pointer
}

.f_list h4 {
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: left
}

.f_list ul {
    padding-left: 0;
    text-align: left
}

#msform .action-button,
.UpcomingBox1 h2,
.animated-text p,
.cart-item__quantity input,
.faq-container h1,
.float,
.grid-content-common,
.main-btn,
.new-owl-carousel .owl-dots,
.new-owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot,
.price_content a {
    text-align: center
}

.f_list ul li a {
    font-size: 16px;
    line-height: 20px
}

.SignupContainer,
.home-content,
.team-para {
    position: relative;
    z-index: 99
}

.SignupBox {
    padding: 34px 12px
}

.G_btn,
.SignupForm input {
    padding: .7rem;
    background: 0 0;
    border-radius: 8px;
    border: 1px solid #e8028d;
    color: #fff
}

.PasswordBox img {
    max-width: 25px;
    top: 13px;
    right: 16px;
    cursor: pointer;
    filter: invert(1);
}

.termsCheck {
    display: flex;
    gap: 10px
}

.accH a,
.termsCheck a {
    text-decoration: none;
    color: #e8028d
}

.termsCheck p {
    font-size: 18px;
    margin-bottom: 0
}

.termsCheck input[type=checkbox] {
    width: 20px
}
.SignupForm input{
    color: #000 !important;
}

.SignupForm input[type=submit] {
    margin-top: 17px;
    background-color: #e8028d;
    font-size: 18px;
    letter-spacing: 2px;
    width: 100%;
    color: #000;
    font-weight: 700;
    line-height: 20px
}

.SignupForm .hr hr {
    width: 280px;
    margin: auto;
    height: 3px;
    border-radius: 9px
}

.SignupForm .hr p {
    font-size: 14px;
    background-color: #fff;
}

.G_btn {
    margin-top: 22px;
    color: #000;
    background-color: transparent;
    width: 100%
}

.G_btn img {
    max-width: 25px;
    margin-right: 10px
}

.UpcomingBox1Img img {
    width: 100%;
    border-radius: 30px;
    max-width: 500px;
    height: 400px
}

.UpcomingEvents {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

.DateActive,
.star-box i.active {
    color: #ffc83d
}

.UpcomingBox1 h2 {
    font-size: 40px;
    font-weight: 800
}

.EventsDate {
    padding-bottom: 3rem;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px
}

.EventsDate .date {
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-family: ClashDisplayMed
}

.EventsDate .date h3 {
    font-size: 20px;
    text-wrap: nowrap
}

.EventsDate a {
    border: 3px solid #e8028d;
    border-radius: 16px;
    padding-left: 12px;
    color: #000!important;
}
.event_price_section {
    color: #000 !important;
}
.event_price_section h6 span {
    color: #000 !important;
}
.EventsDate h3 {
    font-size: 25px;
    font-weight: 700
}

.Date p {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1.3
}

#vdoModal .modal-content {
    background: #242424;
    border: 2px solid #03a84e;
    border-radius: 14px;
    height: 400px
}

.ApplyNow {
    position: relative;
    z-index: 10
}

@media (max-width:768px) {
    .syn-music {
        margin: 80px 0
    }

    .UpcommingEventslider .swiper-button-next {
        left: 53% !important
    }

    .UpcommingEventslider .swiper-button-prev {
        left: 40% !important
    }

    .UpcomingBox1Img img {
        height: 350px
    }

    .EventsDate .date h3 {
        font-size: 44px
    }

    .EventsDate {
        column-gap: 16px
    }

    .Date p {
        font-size: 16px
    }

    .TeamSliderBox {
        height: 405px
    }

    .C_header h2 {
        font-size: 34px
    }

    .Layout-y {
        padding-block: 30px;
        padding: 45px 0 !important
    }

    .footer_innerContainer {
        grid-template-columns: 1fr repeat(2, 1fr)
    }

    .L_heading h2 {
        font-size: 36px;
        color: var(--primaryClr);
        letter-spacing: 1px
    }

    .L_heading p {
        font-size: 22px
    }

    .starImg img {
        max-width: 60px
    }
}

.horizontal::after,
.horizontal::before {
    content: "";
    height: 1px;
    position: absolute;
    left: 50%
}

header.scrolled {
    position: fixed;
    width: 100%;
    background: #001721
}

.dropdown_div.ActiveDrop,
.dropdown_div.active {
    display: block !important
}

.header_btn button {
    margin-left: 12px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    transition: color .4s;
    height: 48px;
    cursor: pointer;
    position: relative;
    padding: 0 22px;
    white-space: nowrap;
    border: none;
    color: #111;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 19px;
    background: #fff
}

.header_btn button::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
    height: 0;
    transition: height .4s;
    z-index: -1
}

.header_btn button:hover {
    color: #3b3b3b
}

@-webkit-keyframes blinker {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate
}

.horizontal,
.vertical {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0
}

.horizontal::before {
    border-bottom: 1px solid #fff;
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 0
}

.horizontal::after {
    border-top: 1px solid #fff;
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    bottom: 0
}

.vertical::after,
.vertical::before {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    width: 8px;
    top: 50%;
    height: 100%;
    position: absolute;
    content: ""
}

.vertical::before {
    border-left: 1px solid #fff;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.vertical::after {
    border-right: 1px solid #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.combo_cta .menu_link i {
    font-size: 35px;
    color: #fff
}

.combo_cta .menu_link i:hover {
    color: #e8028d !important
}

.swiper-wrapper {
    height: unset !important
}

.instument_img {
    height: 250px;
    border: 1px solid var(--primaryClr);
    border-radius: 12px;
    overflow: hidden;
    margin-right: 8px
}

.feedbackSliderBox {
    height: 300px;
    overflow: hidden;
    border: 1px solid
}


.social-media-icons {
    display: flex;
    justify-content: end;
    align-items: center
}

.social-media-icons i {
    padding: 10px;
    color: #ff00fa;
    margin: 10px
}

@media screen and (min-width:568px) {
    .social-media-icons .contact-info-icon:last-child {
        margin-right: 30px
    }
}

.card-effect {
    height: 280px
}

.Home-banner-slider .swiper-wrapper,
.card-effect .swiper-wrapper {
    height: 100% !important
}

.card-effect .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: 700;
    color: #fff
}

.home_banner {
    height: 100vh
}

@media (max-width:576px) {
    .F_course_content {
        padding-left: 0
    }

    .EvenetSection {
        padding-top: 2rem
    }

    .EventsDate h3 {
        font-size: 16px
    }

    .EventsDate {
        padding-block: 1.5rem
    }

    .home_banner {
        height: 65vh;
        line-height: 1.1
    }

    .BannerContent div:first-child,
    .BannerContent div:nth-child(2) {
        font-size: 70px;
        letter-spacing: 4px;
        font-weight: 700;
        align-self: flex-start
    }

    .BannerContent span:last-child {
        font-size: 25px;
        align-self: flex-end;
        margin-right: 35px
    }

    .a_input {
        flex-direction: column;
        gap: 14px
    }

    .a_input input[type=text] {
        padding: 10px 32px
    }

    footer {
        padding: 50px 20px 20px !important
    }

    .footer_innerContainer {
        grid-template-columns: 1fr;
        gap: 12px;
        justify-items: center;
        text-align: center
    }

    .F_innerImg {
        justify-content: space-evenly
    }

    .f_list {
        margin: 13px 0
    }

    .F_copy p {
        max-width: 100%
    }

    .f_list ul li {
        margin-bottom: 6px
    }

    .L_content {
        gap: 18px;
        flex-direction: column
    }

    .FeedbackSlider .swiper-slide {
        width: 100% !important
    }

    .feedbackContainer h3 {
        font-size: 35px
    }

    .starImg img {
        max-width: 40px
    }

    .musicBtn i {
        margin-top: 0 !important
    }

    .regular-teacher .musicBtn {
        position: absolute;
        top: 40%;
        left: 5%
    }

    .regular-student .OurTeamSlideImg img {
        height: 400px;
        object-fit: cover;
        border-radius: 10px;
        object-position: top
    }

    .OurTeamSlideImg-new {
        max-width: 100% !important
    }

    .faq-container {
        margin: 50px auto 0 !important
    }
}

.musicBtn i {
    color: #fff;
    font-size: 34px
}

.home-content h5 {
    font-size: 48px;
    font-weight: 700;
    font-family: sans-serif;
    color: #fff;
    text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 30px #ffbf00, 0 0 40px #00bfff, 0 0 50px #f0f, 0 0 60px #ff0080;
    animation: 1.5s infinite alternate multiGlow
}

.home-content h1,
.home-content p {
    text-shadow: 4px 4px 3px rgba(169, 169, 169, .6)
}

@keyframes multiGlow {
    0% {
        text-shadow: 0 0 10px #ff0080, 0 0 20px #ffbf00, 0 0 30px #00bfff, 0 0 40px #f0f, 0 0 50px #ff0080
    }

    100% {
        text-shadow: 0 0 20px #f0f, 0 0 30px #ffbf00, 0 0 40px #00bfff, 0 0 50px #ff0080, 0 0 60px #f0f
    }
}

.home-content h1 {
    color: #e0dede;
    font-size: 85px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2
}

.home-content p {
    color: #fff;
    line-height: 1.6;
    letter-spacing: .3px;
    margin-bottom: 0;
    font-size: 24px;
    background-color: #aaaaaa6b;
    padding: 2px 15px
}

.main-btn {
    position: relative;
    background: 0 0;
    color: #fff;
    border: 2px solid #e8028d;
    margin-right: 0;
    min-width: 150px;
    border-radius: 4px;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.1px;
    padding: 15px 20px;
    overflow: hidden
}

.overlay {
    background-color: rgb(0 0 0 / 64%) !important;
    z-index: 10
}

#find_your_course_form .fal.fa-phone {
    transform: rotate(105deg)
}

.modal-close-btn {
    opacity: 1 !important
}

.modal-close-btn i {
    font-size: 22px;
    color: red
}

.offcanvas-body {
    border-top: unset !important
}

.price-box a,
.product-card {
    border: 1px solid #a8b3cf5c
}

.faq-section,
.step-by-step-inner-section {
    margin: 100px 0
}

.faq-wrapper details {
    cursor: pointer;
    padding: 20px 60px;
    font-size: 20px;
    color: #fff;
    background-color: #232c55
}

.faq-wrapper details:nth-of-type(2n) {
    background-color: #3fabe1
}

.faq-wrapper details summary {
    position: relative;
    font-weight: 600
}

.faq-wrapper details summary:after {
    content: "+";
    font-size: 30px;
    font-weight: 500;
    position: absolute;
    right: 0;
    top: -10px
}

.faq-wrapper details[open] summary:after {
    content: "-"
}

.faq-wrapper details p {
    margin: 20px 0
}

.step-by-step-inner-section p {
    font-size: 20px;
    margin-bottom: 20px
}

.step-by-step-inner-section p:last-child {
    margin-bottom: unset
}

.chat {
    margin: 0;
    padding: 0
}

.chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #b3a9a9
}

.chat li .chat-body p {
    margin: 0;
    color: #777
}

.panel-body {
    overflow-y: scroll;
    height: 350px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #f5f5f5
}

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

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555
}

.price-box a,
.price_content a,
.product-card {
    background-color: #1c1f26
}

.product-card {
    padding: 16px 10px;
    border-radius: 18px;
    transition: .5s ease-in-out
}

.product-card-content h3 {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px
}

.rating-box i {
    font-size: 14px;
    color: #a8b3cf5c
}

.rating-box span {
    font-size: 14px;
    margin-left: 8px
}

.rating-box i.active {
    color: #e2ad64 !important
}

.price-box {
    border-top: 1px solid #a8b3cf5c
}

.price-box a {
    color: #fff;
    padding: 5px 15px;
    font-size: 14px;
    border-radius: 5px
}

.product-card:hover {
    border: 1px solid #a8b3cfc9
}

.price_content a {
    border: 1px solid #e8028d;
    color: #e8028d;
    padding: 11px 26px;
    font-size: 17px;
    border-radius: 10px;
    display: block;
    transition: .8s ease-in-out
}

.price_content:hover a.mt-3 {
    background: #e8028d;
    color: #fff;
    font-weight: 700
}

.social-icons-container {
    z-index: 999
}

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

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

.quantity-output {
    height: 45px !important
}

.qty-minus,
.qty-plus {
    cursor: pointer;
    height: 40px;
    width: 40px;
    display: flex
}

.shop-btn {
    position: relative;
    z-index: 1
}

.shop-btn a {
    background-color: #b6ff52;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 3px;
    color: #000 !important
}

.table-cart-container table {
    background-color: #111410b0 !important;
    border: 1px solid #3b3d3a !important;
    padding: 26px 31px 31px;
    margin: 0 0 40px;
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0
}

.cart-row td {
    border-top: 1px solid hsla(0, 0%, 7%, .11);
    padding: 24px 0 24px 16px;
    vertical-align: top
}

.cart-row td:last-child {
    padding-right: 16px;
    font-weight: 600
}

.cart-items__header th {
    padding: 8px 16px 8px 0;
    white-space: nowrap
}

.cart-items__header-image {
    width: 20%
}

.cart-items__header-product {
    width: 50%
}

.cart-items__header-total {
    width: 30%
}

.cart-item__wrap a {
    font-size: 16px;
    color: #fff;
    font-weight: 600
}

.cart-item__prices span {
    font-size: 14px;
    margin-bottom: 5px
}

.components-quantity {
    border-radius: 4px;
    display: flex;
    margin: 0 0 .25em;
    position: relative;
    width: 107px
}

.cart-item__quantity input {
    -moz-appearance: textfield;
    appearance: textfield;
    background: 0 0;
    border: 0;
    box-shadow: none;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    line-height: 1;
    width: 50px;
    vertical-align: middle
}

.total-price h5,
.total-title {
    font-weight: 700
}

.cart-item__quantity .quantity {
    font-size: .875rem;
    line-height: 1;
    height: 24px;
    border: 2px solid #dadfe3;
    border-radius: 0;
    min-width: 24px;
    font-weight: 600
}

.total-count-container {
    position: sticky;
    top: 0
}

.item__remove-link {
    background: #b6ff52;
    border: 1px solid #b6ff52;
    color: #080808;
    padding: 2px 8px
}

.sub-total-container {
    border: 1px solid #ecf0f4;
    padding: 26px 31px 31px;
    background-color: #fbfbfc
}

.total-value-box {
    border-top: 1px solid hsla(0, 0%, 7%, .11);
    padding: 16px 0
}

.free-coupon {
    display: grid;
    grid-template-columns: 1fr 0.3fr;
    gap: 5px
}

.checkout-submit {
    background-color: #b6ff52;
    color: #000 !important;
    font-weight: 600
}

form.free-coupon button {
    height: 45px;
    border: none;
    background: #b6ff52;
    color: #0f0f0f;
    font-weight: 600
}

form.free-coupon input {
    height: 100%;
    width: 100%;
    background: #eaeaea;
    border: 1px solid #020202;
    padding-inline: 10px
}

.shop-heading,
.total-price h5 {
    font-size: 22px
}

.total-price span {
    font-size: 20px;
    font-weight: 600;
    color: #000
}

.controls .item i {
    font-size: 24px;
    background: #f1f1f1;
    padding: 9px;
    border-radius: 40px;
    color: #710446;
    cursor: pointer;
    transition: .5s ease-in-out
}

.controls .item i:hover {
    background: #cd00d2a3;
    color: #fff
}

.badge-picto.ttip-hv {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    background-color: #eef;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: none !important;
}

.badge-picto.ttip-hv::after {
    content: "";
    display: block;
    height: 30px;
    width: 30px;
    background: url(https://c.superprof.com/style/images/pictos/ambassador-sparkle.svg) center/100% no-repeat
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: end;
    margin-top: 0;
    margin-right: 1rem;
    position: absolute;
    top: 25%;
    right: 0;
    transform: translateY(-90%)
}

.wishlist-img {
    align-content: center
}

.wishlist-product-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    display: block
}

.wishlist-btns a {
    font-size: 14px !important;
    padding: 6px 14px
}

.comments-text {
    flex: 1;
    color: #fff
}

.price_content-list::-webkit-scrollbar {
    width: 2px;
    border-radius: 4px
}

.price_content-list::-webkit-scrollbar-track {
    background: rgba(236, 236, 236, .726)
}

.price_content-list::-webkit-scrollbar-thumb {
    background-color: var(--primaryClr);
    border-radius: 5px
}

.contact_address {
    background: rgb(255 255 255 / 16%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
    padding: 14px 8px;
    border-radius: 14px
}

.cart-quantity {
    position: absolute;
    top: 2px;
    right: -10px;
    background-color: #333e48;
    color: #fff;
    padding: 5px;
    border-radius: 50%;
    font-size: 12px;
    height: 25px;
    width: 25px;
    display: grid;
    place-items: center
}

.courses-content button i,
.grid-item-index {
    color: #b6ff52;
    font-size: 30px
}

.courses-content,
.grid-content-common {
    padding: 29px 27px 27px;
    background: rgb(255 255 255 / 16%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
    border-radius: 40px
}

.title__text {
    position: relative;
    display: flex;
    justify-content: center
}

.title__text::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 180px;
    height: 5px;
    border-radius: 5px;
    background-color: #981c84
}

.courses_grids {
    display: grid;
    grid-template-columns: 0.3fr 1fr 0.3fr;
    gap: 20px
}

.grid-content-common {
    height: 100%
}

.grid-item-index {
    font-weight: 600
}

.grid-item-header {
    writing-mode: vertical-rl;
    width: 100%;
    gap: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.grid-item-header h3 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 30px
}

.grid-item-header span {
    color: #a5a5a5;
    font-size: 22px;
    letter-spacing: 2px
}

.courses-content p {
    color: #cbcbcbc7
}

.courses-content button {
    background-color: transparent;
    border: none;
    cursor: pointer
}

.courses-content h3 {
    color: #fff;
    font-weight: 700;
    font-size: 32px
}

.courses-main-img img {
    height: 100%;
    object-fit: contain
}

.common-index {
    position: relative;
    width: max-content;
    margin: auto;
    padding-bottom: 22px
}

.common-index::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 5px;
    background-color: #484848
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.scroller[data-animated=true] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
}

.scroller[data-animated=true] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite
}

.scroller[data-direction=right] {
    --_animation-direction: reverse
}

.scroller[data-direction=left] {
    --_animation-direction: forwards
}

.scroller[data-speed=fast] {
    --_animation-duration: 20s
}

.scroller[data-speed=slow] {
    --_animation-duration: 60s
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - .5rem))
    }
}

.tag-list {
    margin: 0;
    padding-inline: 0
}

.tag-list li {
    padding: 1rem;
    background: var(--clr-primary-400);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem -.25rem var(--clr-primary-900)
}

@media (max-width:768px) {
    .courses_grids {
        grid-template-columns: 1fr
    }

    .grid-item-header {
        writing-mode: unset
    }

    .FeedbackSlider {
        padding-top: 2rem
    }

    .FeedbackSlider :where(.swiper-button-next, .swiper-button-prev) {
        top: 370px !important
    }
}

.modal-ifream {
    height: 600px
}

.gallery-container img {
    border-radius: 8px;
    margin: 10px 0;
    height: 139px !important
}

.VdoContainer {
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    height: 350px
}

.user-profile {
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

.video_slider_title_label {
    position: absolute;
    left: 0;
    z-index: 9;
    background-color: #fff;
    top: 0;
    border-radius: 0 5px 5px 0
}

.video_slider_title_label h4 {
    color: #111;
    font-size: 20px;
    font-weight: 500;
    padding: 2px 30px;
    border-left: 5px solid #e8028d
}

.gallery-container {
    column-count: 4
}

@media screen and (max-width:767px) {
    .VdoBox p {
        font-size: 16px
    }

    .card-effect-section {
        overflow: hidden
    }

    .home-content h1 {
        font-size: 30px;
        text-align: center;
        margin-bottom: 8px
    }

    .home-content p {
        font-size: 18px;
        text-align: center
    }

    .main-btn {
        min-width: 135px;
        font-size: 14px;
        padding: 10px 15px
    }

    .gallery-container {
        column-count: 2
    }
}

@media screen and (max-width:567px) {
    .social-media-icons {
        justify-content: center;
        align-items: center;
        gap: 12px;
        z-index: 999;
        transform: translateY(-50%)
    }

    .table-cart-container table {
        padding: 4px 8px 30px
    }

    .sub-total-container {
        padding: 10px 8px 31px
    }

    .cart-row td:last-child {
        padding-right: 0
    }

    .controls {
        top: 40%;
        transform: translateY(-90%)
    }

    .F_course_content h2 {
        font-size: 32px
    }

    .studentCount p {
        font-size: 28px
    }

    @media screen and (max-width:567px) {
        .table-cart-container table {
            padding: 4px 8px 30px
        }

        .sub-total-container {
            padding: 10px 8px 31px
        }

        .cart-row td:last-child {
            padding-right: 0
        }

        .controls {
            top: 45%;
            transform: translateY(-90%)
        }

        .F_course_content h2 {
            font-size: 32px
        }

        .studentCount p {
            font-size: 28px
        }

        .contact-info-icon {
            height: 35px;
            width: 35px
        }

        .social-media-icons i {
            font-size: 22px
        }

        .social-media-icons {
            gap: 15px
        }
    }

    .price_content {
        height: unset
    }

    .gallery-container {
        column-count: 2
    }
}

.Marquee-content {
    display: flex;
    animation: 17s linear infinite marquee;
    gap: 20px
}

.animated-text p {
    font-size: 3rem;
    padding: .5rem;
    font-weight: 700;
    letter-spacing: .1rem;
    overflow: hidden
}

.animated-text p span.typed-text {
    font-weight: 400;
    color: #dd7732
}

.animated-text p span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: .1rem;
    width: 3px;
    animation: 1s infinite blink
}

.animated-text p span.cursor.typing {
    animation: none
}

@keyframes blink {

    0%,
    100%,
    49% {
        background-color: #ccc
    }

    50%,
    99% {
        background-color: transparent
    }
}

.loader-number {
    color: #1f6dff
}

@media screen and (max-width:500px) {
    .title__text::after {
        width: 140px
    }

    .FeedbackSlider .swiper-button-next,
    .FeedbackSlider .swiper-button-prev {
        position: static;
        right: 0 !important;
        left: 0 !important
    }

    .FeedbackSlider-arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 40px;
        display: none;
    }

    .float {
        width: 15px !important;
        height: 17px !important
    }
}

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 100px;
    right: 50px;
    color: #47c357;
    border-radius: 50px;
    font-size: 30px;
    z-index: 100
}

.my-float {
    margin-top: 16px
}

.gril_img img {
    width: 500px
}

#msform .action-button {
    width: 140px !important;
    text-wrap: nowrap !important
}

.sub-total-container.aos-init.aos-animate {
    background-color: #111410b0 !important;
    border: 1px solid #3b3d3a !important
}

.add-cart:hover .btn,
.add-cart:hover .btn i,
.bt_bb_headline_subheadline a {
    color: #fff !important
}

.musicBtn {
    position: absolute;
    top: 45%;
    left: 5%
}

.newsLetter_box {
    display: flex;
    align-items: center;
    position: relative;
    padding: 50px 30px;
    background: linear-gradient(142deg, #b2fc4282 31%, #00000073 100%);
    border-radius: 30px;
    gap: 30px;
    border: 1px solid #b5ff52;
    background-color: #fff
}

.newsLetter_box h6 {
    color: #1b1c1d !important
}

.newsLetter_box .newsLetter_img {
    position: absolute;
    top: -75px;
    max-width: 250px;
    right: 0;
    width: 100%
}

.newsLetter_box h5 {
    max-width: 50%;
    font-size: 22px;
    font-weight: 600;
    line-height: 34px
}

.newsLetter_btn {
    font-size: 20px;
    font-weight: 500;
    color: #e0e0e0;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #e2e2e2
}

.card-effect-new .sldier_btn {
    bottom: -55px;
    position: absolute;
    left: 50%
}

.StudentSlider-new .sldier_btn,
.pricing-cards-slider .sldier_btn,
.video-slider .sldier_btn {
    position: absolute;
    right: 0;
    bottom: -37px
}

.pricing-cards-slider .swiper-button-prev,
.video-slider .swiper-button-prev {
    left: -107px !important;
    bottom: 0 !important
}

.sldier_btn {
    position: absolute;
    right: 6%;
    bottom: -37px
}

.StudentSlider-new>.sldier_btn .swiper-button-prev {
    left: -110px;
    right: auto
}

@media (max-width:425px) {
    .badge-picto.ttip-hv {
        right: 0;
        bottom: 0
    }

    .pricing-cards-slider .sldier_btn {
        position: absolute;
        right: 50% !important;
        transform: translate(61px, 4px);
        bottom: -37px
    }

    .card-effect.card-effect-new .sldier_btn {
        left: 44% !important
    }

    .Home-banner-slider .swiper-button-next,
    .Home-banner-slider .swiper-button-prev {
        display: none
    }

    .home-content h5 {
        font-size: 22px
    }

    section :where(.swiper-button-next, .swiper-button-prev) {
        width: 35px !important;
        height: 35px !important
    }

    .syn-music {
        margin: 40px 0
    }

    .faq-container {
        margin: -16px auto
    }

    .video-slider .sldier_btn {
        position: absolute !important;
        right: 50% !important;
        transform: translate(61px, 4px);
        bottom: -37px !important
    }

    .sldier_btn {
        position: absolute;
        right: 38% !important;
        bottom: -37px !important
    }
}

.sub-btn {
    background: linear-gradient(132deg, #b6ff52 31%, #b4fd49 100%) !important;
    color: #111 !important
}

.banner-video-section {
    z-index: 9;
    position: relative
}

.owl-item>div {
    cursor: pointer;
    margin: 6% 8%;
    transition: margin .4s
}

.owl-item.center>div {
    cursor: auto;
    margin: 0;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
    background: 0 0
}

.owl-item:not(.center)>div:hover {
    opacity: .75
}

.new-owl-carousel .owl-dot {
    background-color: #acf24d !important
}

.new-owl-carousel .owl-nav {
    justify-content: space-between;
    display: none
}

.new-owl-carousel .owl-nav .owl-next span,
.new-owl-carousel .owl-nav .owl-prev span {
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .75);
    background: linear-gradient(135deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .1) 100%);
    height: 35px !important;
    width: 35px !important;
    padding: 20px 10px !important;
    font-size: 17px !important;
    font-weight: 600;
    color: #b6ff52
}

.new-owl-carousel .owl-dots .owl-nav {
    display: none !important
}

.new-owl-carousel .owl-dots .owl-dot {
    border-radius: 50% !important;
    padding: 5px !important;
    margin-right: 5px;
    text-align: center
}

.content-banner {
    position: absolute;
    top: 15%;
    left: 5%;
    z-index: 999
}

.content-banner span {
    font-family: "Times New Roman", Times, serif
}

.content-banner h1 {
    font-size: 150px;
    font-weight: 800
}

.video-sec::before {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    color: #f1f1f1;
    width: 100%
}

.typewriter h1 {
    color: #fff;
    font-family: monospace;
    overflow: hidden;
    letter-spacing: 20px;
    white-space: nowrap;
    margin: 0 auto;
    animation: 3.5s steps(30, end) typing, .5s step-end infinite blink-caret
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: orange
    }
}

@media(max-width:768px) {
    .content-banner h1 {
        font-size: 25px !important;
        letter-spacing: 10px
    }

    .work-img {
        border-bottom-left-radius: unset !important
    }

    .content-banner h2 {
        font-size: 10px
    }
}

@media(max-width:1076px) {
    .content-banner h1 {
        font-size: 70px
    }
}

.faq-container {
    margin: 50px auto;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    border: 2px solid #000
}

.about_teacher,
.certificate_card {
    box-shadow: rgba(0, 0, 0, .24) 0 3px 8px
}

.faq-container h1 {
    margin-bottom: 20px;
    color: #f2f4f7
}

.faq-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px 0
}

.faq-question {
    background: 0 0;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    padding: 10px 0;
    transition: color .3s
}

.faq-answer {
    display: none;
    padding: 10px 0;
    color: #000;
}

.add-cart {
    border: 1px solid #b0f74f;
    color: #fff;
    padding: 6px 0;
    border-radius: 6px;
    background-image: linear-gradient(45deg, #adff00 50%, #cf0 80%);
    font-weight: 600
}

.add-cart button {
    color: #000;
    font-weight: 600
}

.product-card-content .add-cart .btn i {
    color: #000
}

.product-row {
    justify-content: center !important
}

.add-cart:hover,
.add-cart:hover .btn,
.add-cart:hover .btn i {
    background-color: transparent;
    transition-duration: .5s;
    transition-timing-function: linear
}

.price-box a,
.price-box a::after {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.price-box a {
    display: inline-block;
    position: relative !important
}

.price-box a::after,
.price-box a::before {
    background: #fff;
    content: '';
    position: absolute;
    z-index: -1
}

.btn-2::after {
    height: 100%;
    left: 0;
    top: 0;
    width: 0
}

.main-btn:hover {
    background-color: #e8028d;
    color: #131313
}

.OurTeamBox .title__text,
.vdo-section .container .title__text {
    justify-content: start
}

.music_list_slide .title__text {
    justify-content: center
}

.mobile-menu.mobile-cart {
    padding: 20px;
    background-color: #e8028d;
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 0;
    right: 0;
    border-top: 1px solid #f79c23;
    display: none
}

.mobile-menu.mobile-cart ul {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mobile-menu.mobile-cart ul li a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center
}

.mobile-menu.mobile-cart ul li a i {
    color: #fff;
    font-size: 24px
}

.mobile-menu.mobile-cart ul li a span {
    color: #fff;
    font-size: 16px
}

.about_teacher {
    background-color: #fff;
    max-width: 70%;
    margin: 30px auto;
    border-radius: 10px;
    padding: 20px
}

.about_teacher .contect-info-siderbar p span {
    color: #000 !important;
    font-size: 16px;
    line-height: 24px;
    max-width: 90%;
    display: block;
    margin: 20px auto
}

.burgur_menu i {
    color: #fff;
    font-size: 22px;
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 5px
}

.price_content span {
    color: #3b3b3b;
    display: block;
    margin-bottom: 10px
}

.certificate_card {
    width: 47%;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px
}

.blog_detail_bg_section {
    background-color: #fff;
    border-radius: 20px;
    margin: auto;
    width: 90%
}

.comment-form .checkbox-grp label {
    font-weight: 400;
    font-size: 14px;
    color: #111;
    user-select: none;
    line-height: 22px
}

.blog-details-content {
    background-color: #fff !important;
    border: 1px solid #d6d6d6;
    color: #fff;
    padding: 10px
}

.blog-details-content ul li {
    color: #5e5e5e
}