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

.title-start h2,
.title-center h2 {
    color: var(--color-a);
    font-size: 23px;
    display: inline-block;
    font-family: "font_bold";
    z-index: 1;
    position: relative;
    padding-bottom: 30px;
}

.title-start h2 object,
.title-center h2 object {
    position: absolute;
    top: -20px;
    z-index: -1;
    right: -16px;
    object-fit: cover;
}

.title-start h2::after,
.title-center h2::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 20px;
    background-position: center;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/ttile1.png);
}

.text-aboutus p {
    text-align: justify;
    color: var(--color-main);
    margin-top: 20px;
}

.img-aboutus-index {
    width: 70%;
    height: 70%;
    overflow: hidden;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../images/bg2.png);
    mask-image: url(../images/bg2.png);
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    justify-content: end;
    mask-size: contain;
    display: flex;
    position: relative;
    -webkit-mask-position: center;
    mask-position: center;
}

.main-img-aboutus-index {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: end;
}

.main-img-aboutus-index::after {
    content: "";
    width: 80%;
    left: -45px;
    height: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../images/a2.png);
    position: absolute;
    top: 10%;
    transform-origin: center;
    transform-box: fill-box;
    z-index: -1;
    animation: rotate2 15s linear infinite;
}

.main-img-aboutus-index::before {
    content: "";
    width: 25%;
    top: 25%;
    right: 0;
    position: absolute;
    left: 20%;
    margin: auto;

    z-index: -1;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../images/a3.png);
    height: 25%;
    animation: rotate1 15s linear infinite;
}

@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.services-index {
    position: relative;
    padding: 40px 0px;
    background-color: #f6f6f6;
}

.slider-services-index {
    margin-top: 40px;
    text-align: center;
}

.sub-slider-services {
    background-color: var(--color-white);
    padding: 20px;
    z-index: 1;
    position: relative;
}

.sub-slider-services::after {
    width: 0px;
    height: 0;
    content: "";
    position: absolute;
    top: 0;
    transition: all 0.5s linear;
    right: 0;
    background-color: #ebf3fc;
    z-index: -1;
}

.sub-slider-services::before {
    width: 0px;
    height: 0;
    content: "";
    position: absolute;
    z-index: -1;
    transition: all 0.3s linear;
    bottom: 0;
    left: 0;

    background-color: #ebf3fc;
}

.sub-slider-services:hover::after {
    width: 100%;
    height: 100%;
}

.sub-slider-services:hover::before {
    width: 100%;
    height: 100%;
}

.img-slider-services {
    width: 60%;
    margin: auto;
    height: 220px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.img-slider-services img {
    object-fit: contain;

    width: 90%;
    height: 90%;
}

.text-slider-services h2 {
    content: "";
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-a);
}

.text-slider-services p {
    margin: 15px 0;
}

.img-advantages-index {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 285px;
}

.img-advantages-index img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.img-advantages-index::after {
    content: "";
    width: 80%;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 80%;
    z-index: -1;
    left: 0;
    transition: all 0.6s linear;
    transform-box: fill-box;
    transform-origin: center;
    right: 0;
    margin: auto;
    background-image: url(../images/f1.png);
}

.img-advantages-index::before {
    content: "";
    background-image: url(../images/f2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 80%;
    position: absolute;
    left: 0;
    right: 0;
    transition: all 0.6s linear;
    transform-box: fill-box;
    transform-origin: center;
    z-index: -1;
    height: 80%;
    margin: auto;
    background-position: center;
}

.text-advantages-index {
    text-align: center;
}

.text-advantages-index h2 {
    font-size: 16px;
    font-family: "font_bold";
}

.text-advantages-index p {
    font-size: 17px;
    line-height: 25px;
    margin: 20px 0;
}

.main-advantages-index {
    margin-top: 20px;
}

.sub-advantages-index:hover .img-advantages-index::after {
    transform: rotate(80deg);
}

.sub-advantages-index:hover .img-advantages-index::before {
    transform: rotate(-100deg);
}

.sub-advantages-index {
    margin: 60px 0;
}

.courses-index {
    background-color: #fff6e3;
    padding: 60px 0;
    border-radius: 120px 0;
}

.links-tabs {
    text-align: center;
    margin: 60px 0 0;
}

.links-tabs ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.links-tabs ul li a {
    min-width: 180px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px 5px !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #263238;
}

.sub-slider-courses {
    background-color: var(--color-white);
    border-radius: 10px;
}

.text-sub-slider-courses {
    text-align: right;
    padding: 20px;
}

.text-sub-slider-courses h2 {
    font-size: 16px;
    font-family: "font_bold";
}

.main-courses-index {
    margin: 60px 0;
    padding: 40px 0 0 0;
}

.text-sub-slider-courses p {
    margin: 15px 0;
}

.text-sub-slider-courses span {
    background-color: var(--color-button);
    color: var(--color-white);
    display: inline-block;
    height: 45px;
    text-align: center;
    padding: 7px 20px;
    border-radius: 5px;
    transition: all 0.5s linear;
    min-width: 180px;
}

.img-sub-slider-courses {
    height: 195px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.img-sub-slider-courses img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 0.5s linear;
    border-radius: 10px;
}

.sub-slider-courses:hover .img-sub-slider-courses img {
    transform: scale(1.2);
}

.sub-slider-courses:hover .text-sub-slider-courses span {
    background-color: var(--color-a);
}

.owl-nav {
    position: absolute;
    top: -60px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.owl-nav button {
    width: 40px;
    height: 40px;
    background-color: var(--color-a) !important;
    background-repeat: no-repeat !important;
    background-image: url(../images/arrow.png) !important;
    background-size: 50% contain !important;
    background-position: center !important;
    border-radius: 5px !important;

    margin: 0 !important;
}

.owl-nav button:hover {
    background-color: var(--color-button) !important;
}

.owl-nav button span {
    color: transparent;
}

.owl-prev {
    transform: scale(-1);
}

.btn-courses-index {
    margin: 40px 0 0;
}

.ctm-btn2 {
    background-color: var(--color-a);
    color: var(--color-white);
    height: 50px;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    padding: 13px 20px;
    min-width: 180px;
    border: none;
    z-index: 1;
    transition: all 0.2s linear;
    overflow: hidden;
    position: relative;
}

.ctm-btncourse {
    background-color: #008b18 !important;
    color: var(--color-white);
    height: 50px;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    padding: 9px 20px;
    min-width: 180px;
    border: none;
    z-index: 1;
    transition: all 0.2s linear;
    overflow: hidden;
    position: relative;
}

button.ctm-btn2 {
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 0;
}

button.ctm-btncourse {
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 0;
}

.ctm-btn2:hover {
    background-color: var(--color-button);
    color: var(--color-white);
}

.ctm-btncourse:hover {
    background-color: #008b18;
    color: var(--color-white);
}

.img-sub-client-index {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.img-sub-client-index img {
    width: 100%;
    height: 100%;
    border: 5px solid var(--color-a);
    object-fit: cover;
    border-radius: 50%;
}

.slider-client-index {
    background-color: #f8f8f8;
    width: 70%;
    text-align: center;
    padding: 30px 60px;
    margin: 60px auto;
    position: relative;
    border-radius: 180px 0;
}

.slider-client-index::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/a5.png);
    left: 0;
}

.img-sub-client-index {
    margin: 30px auto;
}

.sub-client-index p {
    color: var(--color-main);
    font-size: 21px;
    width: 80%;
    margin: 20px auto;
    font-family: "font_bold";
}

.sub-client-index h2 {
    color: var(--color-a);
    font-size: 16px;
}

.sub-client-index h4 {
    color: var(--color-button);
    font-size: 20px;
    margin-top: 10px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-main) !important;
    width: 40px;
    transition: all 0.5s linear;
}

.owl-theme .owl-dots .owl-dot span {
    height: 5px !important;
    transition: all 0.5s linear;
}

.main-our-teachers-index {
    margin-top: 60px;
}

.sub-teachers-index {
    background-color: var(--color-white);
    border-radius: 70px 0 15px 15px;
    transition: all 0.5s linear;
    box-shadow: 0px 3px 11px -2px rgb(0 0 0 / 10%);
}

.img-teachers-index {
    height: 265px;
    overflow: hidden;
    width: 100%;
    transition: all 0.5s linear;
}

.img-teachers-index img {
    border-radius: 70px 0;
    height: 100%;
    object-fit: cover;
    overflow: hidden;

    transition: all 0.5s linear;
    width: 100%;
}

.sub-teachers-index:hover .img-teachers-index {
    border-radius: 0px 70px;
}

.sub-teachers-index:hover .img-teachers-index img {
    border-radius: 0px 70px;
    transform: scale(1.2);
}

.sub-teachers-index:hover {
    box-shadow: -3px 3px 11px -2px rgb(0 0 0 / 10%);
    background-color: #ebf3fc;
    border-radius: 0 70px 0 0;
}

.text-teachers-index {
    text-align: center;
    padding: 20px;
}

.text-teachers-index h2 {
    color: var(--color-a);
    font-size: 16px;
}

.text-teachers-index p {
    color: var(--color-button);
    font-size: 19px;
    margin-top: 10px;
}

.dawnload-app {
    background-image: url(../images/bg3.png);
    border-radius: 120px 0;
    padding: 60px 0 30px;
}

.text-dawnload-app h2 {
    font-size: 26px;
    font-family: "font_bold";
    color: var(--color-white);
    line-height: 55px;
}

.text-dawnload-app h2 span {
    color: var(--color-button);
    display: block;
}

.text-dawnload-app p {
    color: #f8f8f8;
    font-size: 16px;
    width: 50%;
    margin: 30px 0;
}

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

.links-download a {
    display: block;
    width: 40%;
}

.img-dawnload-app {
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-dawnload-app img {
    max-width: 70%;
}

.counter-box {
    position: relative;
    height: 200px;
    background-size: contain;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 20px auto;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    justify-content: center;
    background-image: url(../images/bg4.png);
}

.text-counter-number {
    width: 100%;
    font-family: "font_bold";
    font-size: 35px;
    color: var(--color-a);
    text-align: center;
}

.counter-box p {
    font-size: 16px;
    color: var(--color-main);
}

.text-counter-number {
    direction: ltr;
    display: flex;
    justify-content: center;
}

.loading {
    position: fixed;
    height: 100vh;
    top: 0;
    width: 100%;
    background-color: #000;
    z-index: 999990;
}

.modal-login .modal-content {
    border-radius: 30px;
    position: relative;
    padding: 40px;
    min-height: 600px;
}

.modal-login .modal-dialog {
    max-width: 80%;
}

.modal-login .modal-content::after {
    content: "";
    position: absolute;
    top: 0;
    width: 31%;
    height: 290px;
    background-image: url(../images/bg5.png);
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    left: 0;
}

.modal-login .modal-content::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 31%;
    height: 290px;
    background-image: url(../images/bg6.png);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    right: 0;
}




.modal-affiliate .modal-content {
    border-radius: 30px;
    position: relative;
    padding: 40px;
    min-height: 600px;
}

.modal-affiliate .modal-dialog {
    max-width: 95%;
    margin: 20px auto;
}



.modal-affiliate .modal-content::after {
    content: "";
    position: absolute;
    top: 0;
    width: 31%;
    height: 290px;
    background-image: url(../images/bg5.png);
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    left: 0;
}

.modal-affiliate .modal-content::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 31%;
    height: 290px;
    background-image: url(../images/bg6.png);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    right: 0;
}




.title-model {
    text-align: center;
    margin: 20px 0;
}
.title-model h2 {
    font-size: 22px;
    font-family: "font_bold";
}
.title-model p {
    margin-top: 20px;
    font-size: 22px;
    color: var(--color-main);
}

.sub-select-register input {
    width: 0;
    position: absolute;

    height: 0;
    opacity: 0;
}

.select-register {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    gap: 10px;
}

.sub-select-register {
    width: 30%;
}

.sub-select-register input:checked~label {
    background-color: #aef1ff49;
    border: 2px solid var(--color-a);
}

.sub-select-register label {
    padding: 40px 30px;
    display: flex;
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: center;
    height: 285px;
    align-items: center;
    border-radius: 10px;
    background-color: #fff6e3;
}

.sub-select-register label h2 {
    font-family: "font_bold";
    font-size: 19px;
    width: 100%;
    color: var(--color-a);
}

.sub-select-register label img {
    max-width: 140px;
    height: 140px;
    object-fit: contain;
    object-position: center;
}

.btn-select-register {
    text-align: center;
    margin: 30px 0 0;
}

.btn-select-affiliate {
    text-align: center;
    margin: 30px 0 0;
}

.register {
    height: 100%;
    min-height: 100vh;
    z-index: 1;
    padding-top: 120px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.register .main-container {
    margin: 0 auto;
}

.register::after {
    content: "";
    position: fixed;
    top: 0;
    width: 31%;
    height: 290px;
    z-index: -1;
    pointer-events: none;
    background-image: url(../images/bg5.png);
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    left: 0;
}

.register::before {
    content: "";
    position: fixed;
    bottom: 0;
    width: 31%;
    z-index: -1;
    pointer-events: none;
    height: 290px;
    background-image: url(../images/bg6.png);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    right: 0;
}

.logo-register {
    position: absolute;
    top: 30px;
    right: 5%;
}

.title-register {
    text-align: center;
    width: 100%;
}

.title-register h2 {
    font-size: 20px;
    font-family: "font_bold";
}

.form-register {
    width: 55%;
    margin: 60px auto 30px;
}

.input-form {
    width: 100%;
    margin: 15px 0;
}

.input-form .form-control {
    border-radius: 30px;
    border: 1px solid transparent;
    height: 55px !important;
    transition: all 0.3s linear;
    color: var(--color-a);

    -webkit-appearance: none;
    appearance: none;
    font-size: 15px;

    background-color: #eef2ff;
}

.input-form .form-control::placeholder {
    color: var(--color-a);
    font-size: 15px;
}

.input-form .form-control:focus {
    border: 1px solid var(--color-a);
    border-radius: 0px;

    transition: all 0.3s linear;
    background-color: var(--color-white);
}

.arrow-select {
    position: relative;
}

.arrow-select::after {
    content: "";
    width: 17px;
    height: 17px;
    background-image: url(../images/arrow2.png);
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    top: 20px;
    left: 31px;
}

.type-gender {
    display: flex;
    align-items: center;
    width: 95%;
    margin: auto;
    justify-content: space-between;
}

.type-gender h3 {
    font-size: 16px;
    color: var(--color-a);
    font-family: "font_bold";
}

.main-type-gender ul {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-type-gender ul li input,
.user-agreement input,
.choose-verify ul li input {
    width: 0;
    height: 0;
    position: absolute;
    z-index: 0;
    opacity: 0;
}

.main-type-gender ul li {
    display: flex;
    align-items: center;
}

.main-type-gender ul li label {
    padding-right: 35px;
    cursor: pointer;
    color: var(--color-a);
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    font-size: 23px;
}

.main-type-gender ul li label::after {
    content: "";
    position: absolute;
    right: 0;
    top: 60%;
    transform: translateY(-50%);
    background-color: #eef2ff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

.main-type-gender ul li input:checked~label::before {
    content: "";
    position: absolute;
    right: 5px;
    top: 60%;
    z-index: 1;
    transform: translateY(-50%);
    background-color: var(--color-a);
    border-radius: 50%;
    width: 15px;
    height: 15px;
}

.user-agreement {
    margin: 20px auto 30px;
    width: 95%;
}

.user-agreement label {
    font-size: 19px;
    cursor: pointer;
    user-select: none;
    padding-right: 30px;
    transition: all 0.3s linear;
    color: #758494;
    display: flex;
    position: relative;
}

.user-agreement label::after {
    content: "";
    width: 20px;
    border: 1px solid var(--color-a);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
}

.user-agreement label::before {
    content: "\f00c";
    font-weight: 400;
    font-family: "FontAwesome";
    width: 20px;
    height: 20px;
    display: flex;
    transition: all 0.3s linear;
    opacity: 0;
    align-items: center;
    justify-content: center;
    right: 0;
    color: var(--color-white);
    color: fff;
    font-size: 15px;
    right: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-a);
}

.user-agreement input:checked~label::before {
    opacity: 1;
}

.user-agreement input:checked~label {
    color: var(--color-a);
}

.btn-register {
    text-align: center;
    margin: 15px 0 0;
}

.btn-register h3 {
    color: var(--color-a);
    font-family: "font_bold";
    margin: 20px 0 0;
    font-size: 16px;
}

.btn-register h3 a {
    color: var(--color-button);
    font-size: 16px;
    font-family: "font_bold";
}

.forget-password-1 {
    text-align: center;
}

.forget-password-1 a {
    color: var(--color-button);
    font-size: 16px;
    display: block;
    margin: 20px 0;
}

.login,
.choose-verify {
    display: flex;
    align-items: center;
}

.login .btn-register {
    text-align: center;
    margin: 60px 0 0;
}

.choose-verify .title-register h2 {
    font-size: 20px;
}

.choose-verify ul {
    width: 100%;
}

.choose-verify ul li {
    display: block;
}

.choose-verify ul li label {
    display: flex;
    box-shadow: 0px 2px 4px #00000015;
    align-items: center;
    margin: 20px auto;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s linear;
    padding: 20px;
    width: 80%;
    border-radius: 10px;
    gap: 20px;
    background-color: #75bdfc18;
}

.text-form-register h3 {
    color: var(--color-a);
    font-size: 16px;
}

.text-form-register p {
    margin-top: 10px;
}

.choose-verify ul li input:checked~label {
    border: 2px solid var(--color-a);
    transition: all 0.3s linear;
}

.title-verfi-code {
    width: 100%;
    text-align: center;
    color: var(--color-a);
    font-size: 16px;
    margin-bottom: 50px;
}

.otp_input {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.otp_input input {
    border: none;
    width: 65px;
    background-color: #d9d9d973;
    height: 65px;
    border-radius: 5px;
    color: var(--color-a);
    font-size: 24px;
    text-align: center;
}

.verfi-code {
    display: flex;
    padding: 59px 0 0;
    align-items: center;
}

.resend-message {
    text-align: center;
    margin: 20px 0 40px;
}

.resend-message a {
    font-size: 20px;
    color: var(--color-button);
}

.register-teacher,
.forget-password {
    display: flex;
    align-items: center;
}

.forget-password {
    padding: 59px 0 0;
}

.forget-password .btn-register {
    margin-top: 50px;
}

.forget-password .title-verfi-code {
    text-align: right;
    margin-bottom: 30px;
}

/* start style aboutus ================
===================
======================  */

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

.title-aboutus p {
    margin: auto;
    color: var(--color-main);
    margin-top: 20px;
    font-size: 17px;
    width: 75%;
}

.vision {
    margin: 70px 0;
    padding: 50px 0;
    background-color: #fafafa;
}

.text-vision p {
    color: var(--color-main);
    margin-top: 20px;
    font-size: 20px;
    line-height: 35px;
    text-align: justify;
    font-weight: 100;
}

.img-vision {
    display: flex;
    justify-content: flex-end;
}

.img-vision img {
    max-width: 79%;
}

.messges {
    background-color: transparent;
}

.messges .img-vision {
    display: flex;
    justify-content: start;
}

.goals {
    padding: 60px 0 0;
    background-color: #f8f8f8;
}

/* end style aboutus  */

/* start style contactus  */

.sub-form-contactus p {
    font-size: 26px;
    color: var(--color-main);
    margin: 30px 0;
}

.input-contactus {
    margin: 15px 0;
}

.input-contactus .form-control {
    border: 1px solid #7d8b9b70;
    transition: all 0.3s linear;
    border-radius: 5px;
}

.input-contactus .form-control:focus {
    border: 1px solid var(--color-button);
}

.maps-contactus {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    height: 440px;
}

.maps-contactus img {
    width: 80%;
    object-fit: cover;
    height: 100%;
}

.maps-contactus::after {
    content: "";
    width: 90px;
    position: absolute;
    top: 40%;
    height: 90px;
    background-repeat: no-repeat;
    left: 0;
    right: 0;
    margin: auto;
    background-size: contain;
    animation: location 2s linear infinite;
    background-image: url(../images/location.png);
}

@keyframes location {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30%);
    }

    100% {
        transform: translateY(0%);
    }
}

.sub-info-contactus {
    display: flex;
    gap: 20px;
    align-items: center;
}

.img-info-contactus {
    width: 55px;
    height: 55px;
}

.img-info-contactus img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.text-info-contactus h2 {
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-a);
}

.text-info-contactus p {
    color: #758494;
    margin: 10px 0 0;
}

.sub-info-contactus:hover .img-info-contactus img {
    animation: swing 1s infinite both;
    -webkit-animation: swing 1s infinite both;
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/* end style contactus  */

/* start style index student */

.main-eidt-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-radius: 10px;
    background-color: #f9fafd;
}

.main-eidt-date p {
    font-size: 16px;
    color: #000;
}

.title-start {
    display: flex;
    align-items: baseline;
    gap: 25px;
}

.title-start a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #758494;
}

.title-start a i {
    line-height: 0;
    padding-top: 6px;
}

.sub-live-course {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.img-live-course {
    width: 100px;
    height: 100px;
}

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

.text-live-cours {
    width: 63%;
}

.text-live-cours h5 {
    font-size: 14px;
    margin: 0;
    position: relative;
    color: #758494;
    padding-right: 10px;
}

.text-live-cours h5::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    right: 0;
    top: 6px;
}

.text-live-cours p {
    font-size: 16px;
    color: #000;
    font-family: "font_bold";
    margin: 5px 0;
}

.text-live-cours h3 {
    font-size: 18px;
    margin-top: 10px;
    color: var(--color-a);
}

.free-live {
    color: var(--color-button);
    background-color: #fff5decc;
    padding: 0px 20px;
    display: inline-block;
    font-size: 16px;
    border-radius: 10px;
    height: 40px;
    margin: 10px 0 0;
}

.slider-courses {
    margin-top: 60px;
}

.slider-courses .owl-nav {
    top: -120px;
}

.img-course-student {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    height: 200px;
    position: relative;
}

.img-course-student img {
    width: 100%;
    transition: all 0.3s linear;

    object-fit: cover;
    height: 100%;
}

.save-course-student {
    width: 40px;
    height: 40px;
    background-color: var(--color-white);
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    left: 10px;
    z-index: 1;
}

.save-course-student img {
    width: auto;
    object-fit: contain;
    max-width: 30px;
}

.sub-course-student {
    padding: 10px 15px 20px 15px;
    border-radius: 20px;
    margin: 10px 2px;
    transition: all 0.3s linear;
    box-shadow: 0px 3px 2px #00000013;
}

.sub-course-student:hover {
    background-color: #ebf3fc;
}

.sub-course-student:hover .img-course-student>img {
    transform: scale(1.1);
}

.text-course-student {
    margin: 10px 0 0;
}

.text-course-student h2 {
    font-size: 16px;
}

.text-course-student p {
    width: 100%;
    display: flex;
    margin: 15px 0;
    color: var(--color-a);
    font-size: 15px;
    align-items: center;
    justify-content: space-between;
}

.text-course-student span {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #adadad;
    gap: 10px;
}

.text-course-student span i {
    color: var(--color-button);
    font-size: 16px;
}

.text-course-student .ctm-btn {
    height: 45px;
    padding: 7px 32px;
}

.modal-sm {
    max-width: 35%;
}

.title-fliter-student {
    text-align: center;
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
}

.title-fliter-student h2 {
    font-size: 25px;
    font-family: "font_bold";
}

.links-tabs-fliter ul,
.sub-content-filter ul {
    width: 90%;
    margin: auto;
}

.links-tabs-fliter ul li,
.sub-content-filter ul li {
    width: 100%;
    display: block;
    margin: 10px 0;
}

.links-tabs-fliter ul li a,
.sub-content-filter ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 25px;
    color: var(--color-a);
    background-color: #f2f3fa7a;
    transition: all 0.3s linear;
    height: 55px;
    border-radius: 30px !important;
}

.links-tabs-fliter ul li:hover a,
.sub-content-filter ul li:hover a {
    background-color: var(--color-button);
    color: var(--color-white);
}

.close {
    font-size: 35px;
}

.btnPrevious {
    border: none;
    background-color: transparent;
    color: #758494;
}

.links-tabs-fliter .nav-pills .nav-link.active,
.links-tabs-fliter .nav-pills .show>.nav-link {
    background-color: var(--color-a) !important;
}

.main-fliter-student {
    min-height: auto;
    transition: all 0.5s linear;
    padding-bottom: 20px;
}

.end-fliter-student {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid #eeeeee;
    text-align: center;
}

.end-fliter-student p {
    color: #758494;
    font-size: 17px;
    font-family: "font_bold";
}

.end-fliter-student p a {
    color: var(--color-main);
    font-size: 17px;
    font-family: "font_bold";
}

.progress-fliter {
    width: 90%;
    margin: 0 auto 20px;
    height: 12px;
    border-radius: 20px;
    background-color: #e9bd5727;
}

.progress-fliter span {
    width: 50%;
    height: 100%;
    border-radius: 20px;

    display: flex;
    transition: all 0.5s linear;
    background-color: var(--color-button);
}

.modal-content {
    border: none;
    border-radius: 25px;
    transition: all 0.5s linear;
}

.progress-fliter.active span {
    width: 100%;
}

.content-filter.active span {
    width: 100%;
}

.sub-content-filter ul {
    height: 395px;
    overflow: auto;
}

.sub-content-filter ul {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.sub-content-filter ul::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

.sub-content-filter ul::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 0;
    border: 0 solid var(--scrollbarBG);
}

.sub-content-filter ul::-webkit-scrollbar {
    width: 7px;
}

.fliter-student {
    overflow: hidden !important;
    height: 100vh;
}

.links-tabs-courses {
    width: 100%;
}

.links-tabs-courses ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #d9d9d9;
}

.links-tabs-courses ul li a {
    font-size: 16px;
    position: relative;
    transition: all 0.3s linear;
    padding: 0 !important;

    color: var(--color-main);
    font-family: "font_bold";
}

.links-tabs-courses ul li a::after {
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    bottom: -17px;
    width: 100%;
    transition: all 0.3s linear;
    opacity: 0;
    transform: translateX(100%);
    background-color: var(--color-a);
}

.links-tabs-courses ul li a.active {
    color: var(--color-a) !important;
    background-color: transparent !important;
}

.links-tabs-courses ul li a.active::after {
    opacity: 1;
    transform: translateX(0%);
}

.text-courses-details p {
    text-align: justify;
    color: #97a2a7;
}

.sub-content-courses {
    display: flex;
    overflow: hidden;
    position: relative;
    flex-wrap: wrap;
    padding: 0 20px 0px;
    align-items: center;
    box-shadow: 0px 5px 20px #0000001a;
    margin: 20px 0;
    border-radius: 10px;
}

.sub-content-courses::after {
    content: "";
    width: 8px;
    background-color: var(--color-a);
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    transition: all 0.5s linear;
}

.sub-content-courses>h2 {
    font-family: "font_bold";
    font-size: 21px;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    padding: 20px;

    justify-content: space-between;
}

.sub-content-courses>h2 i {
    font-size: 16px;
    cursor: pointer;
    transition: all 0.5s linear;
    color: #758494;
}

.sub-content-courses>h2.active i {
    transform: scaleY(-1);
}

.sub-content-courses ul {
    width: 100%;
    display: none;
    padding: 0 20px 20px;
}

.sub-content-courses ul li {
    width: 100%;
    display: block;
    margin: 0px 0 15px;
}

.sub-content-courses ul li a {
    color: #758494;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-content-courses ul li a {
    margin: 0;
}

.sub-content-courses ul li a span {
    align-items: center;
    font-size: 15px;
    gap: 10px;
    line-height: 23px;
    display: flex;
}
.sub-content-courses ul li h4 {
    margin: 0;
    gap: 5px;
    display: flex;
    align-items: center;
}

.sub-content-courses ul li a i {
    line-height: 0;
    padding-top: 5px;
}

.sub-content-courses a.active i {
    color: var(--color-button);
    font-weight: bold;
}

.title-info-teacher {
    display: flex;
    align-items: center;
    gap: 20px;
}

.img-info-teacher-courses {
    width: 80px;
    height: 80px;
}

.img-info-teacher-courses img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-title-teacher-courses h2 {
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-a);
}

.text-title-teacher-courses p {
    color: var(--color-button);
    font-size: 18px;
    margin: 5px 0 0;
}

.info-teacher-courses>p {
    margin-top: 20px;
}

.btns-info-teacher-courses {
    display: flex;
    gap: 10px;
    margin: 50px 0 0;
}

.btns-info-teacher-courses a {
    max-width: 260px;
    border-radius: 5px;
}

.btns-info-teacher-courses a i {
    display: inline-block;
    margin: 0px 5px;
    vertical-align: center;
}

.sub-courses-details {
    text-align: center;
    padding: 20px;
    margin-top: 9px;
    box-shadow: 0 4px 8px #00000021;
    border-radius: 10px;
}

.price-courses-details {
    font-size: 26px;
    font-family: "font_bold";
    color: var(--color-main);
    margin: 20px 0 40px;
}

.btns-add-cart {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btns-add-cart button {
    font-size: 19px;
}

.btns-add-cart button:last-of-type {
    background-color: var(--color-button);
}

.btns-add-cart button:last-of-type:hover {
    background-color: var(--color-a);
}

.sub-courses-details ul {
    margin: 30px 0;
}

.sub-courses-details ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0;
}

section.courses-details {
    margin: 20px 0;
}

.sub-courses-details ul li span {
    font-size: 14px;
    color: var(--color-main);
    font-family: "font_bold";
}

.sub-courses-details ul li h3 {
    color: #758494;
}

/* end  style index student =  = = =
===============*/

/* start style checkout ========
=============  */

.sub-text-checkout {
    background-color: #f9fafd;
    padding: 25px;
    border-radius: 10px;
    margin-top: 5px;
}

.sub-text-checkout h3 {
    font-size: 24px;
    font-family: "font_bold";
    color: var(--color-a);
}

.sub-text-checkout span {
    margin: 10px 0;
    font-size: 18px;
    display: block;
    font-family: "font_bold";
    color: var(--color-a);
}

.price-checkout {
    background-color: #f9fafd;
    padding: 25px;
    border-radius: 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-checkout h2 {
    font-family: "font_bold";
    color: var(--color-a);
    font-size: 16px;
}

.price-checkout span {
    font-family: "font_bold";
    color: var(--color-a);
    font-size: 16px;
}

.sub-payment-methods {
    margin: 30px 0;
}

.sub-payment-methods ul {
    display: flex;
    align-items: center;
    gap: 50px;
}

.sub-payment-methods ul li {
    display: flex;
    align-items: center;
    position: relative;
}

.sub-payment-methods ul li input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.sub-payment-methods ul li label {
    padding-right: 30px;
    font-size: 21px;
    color: var(--color-a);
    cursor: pointer;
    font-family: "font_bold";
    user-select: none;
    display: block;
    position: relative;
}

.sub-payment-methods ul li label::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--color-button);
}

.sub-payment-methods ul li input:checked~label::before {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: var(--color-button);
    border-radius: 50%;
    border: 1px solid var(--color-button);
}

.form-payment-methods {
    width: 50%;
}

.input-payment-methods input {
    background-color: #f9fafd;
    border-radius: 10px;
    height: 55px;
    margin: 5px 0;
    border-color: transparent;
}

.input-payment-methods input::placeholder {
    color: var(--color-a);
}

.sub-form-payment-methods {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sub-form-payment-methods .input-payment-methods {
    width: 50%;
}

.btn-payment-methods {
    margin: 40px 0;
}

/* end style checkout ========
=============  */

/* start style  chat  ===========
===============
 */

.users-chat {
    background-color: #f9fafd;
    padding: 20px 0;

    border-radius: 20px;
}

.search-chat input {
    border: transparent;
    padding-right: 40px;
    padding-left: 30px;
    font-size: 16px;
    border-bottom: 1px solid transparent;
}

.search-chat input::placeholder {
    font-size: 16px;
    font-family: "font_bold";
}

.search-chat input:focus {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #eeeeee;
}

.search-chat {
    width: 90%;
    margin: auto;
    position: relative;
}

.search-chat::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(../images/search.png);
    top: 50%;
    right: 0;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
}

.search-chat span {
    position: absolute;
    display: block;
    left: 0px;
    color: var(--color-p);
    top: 50%;
    transform: translateY(-50%);
}

.main-users-chat {
    margin: 20px 0;
}

.main-users-chat ul li {
    display: block;
    z-index: 1;
    overflow: hidden;
    position: relative;
}

.main-users-chat ul li.active {
    background-color: #e4e4e4;
}

.main-users-chat ul li::after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #e4e4e452;
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(0);
    border-radius: 50%;
    transition: all 0.4s linear;
}

.main-users-chat ul li:hover::after {
    transform: scale(2);
}

.main-users-chat ul li:nth-of-type(1) a {
    border-top: none;
}

.main-users-chat ul li a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    position: relative;
    flex-wrap: wrap;
    border-top: 1px solid #eeeeee;
}

.img-users-chat {
    width: 55px;
    height: 55px;
    position: relative;
}

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

.online {
    background-color: #27ae60;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    border: 2px solid var(--color-white);
    right: 3px;
}

.text-users-chat {
    padding-left: 40px;
    width: 78%;
    /* position: relative; */
}

.text-users-chat h2 {
    font-size: 18px;
    font-family: "font_bold";
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-users-chat p {
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.time-message {
    top: 14px;
    position: absolute;
    left: 0;
    text-align: center;
}

.time-message h4 {
    font-size: 19px;
    color: var(--color-p);
    margin-bottom: 0;
}

.number-messsage {
    background-color: #27ae60;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
}

.main-users-chat {
    overflow: auto;
    margin: 20px 0 0;
    height: 630px;
}

.main-users-chat ul li a {
    width: 90%;
    margin: auto;
}

.header-chat .top-par {
    transform: translateY(0) !important;
    position: initial !important;
    opacity: 1 !important;
}

.main-users-chat {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.main-users-chat::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

.main-users-chat::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 0;
    border: 0 solid var(--scrollbarBG);
}

.main-users-chat::-webkit-scrollbar {
    width: 7px;
}

.details-chat {
    background-color: #f9fafd;
    border-radius: 20px;
    margin-top: 5px;
    box-shadow: 0 -1px 3px #00000017;
    height: 735px;
    overflow: hidden;
}

.title-chat {
    background-color: var(--color-white);
}

.title-chat {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.text-title-chat h2 {
    font-size: 16px;
    font-family: "font_bold";
}

.text-title-chat span {
    color: #27ae60;
    font-size: 16px;
}

.header {
    position: relative;
    z-index: 9;
}

.msg-send,
.msg-receive {
    margin: 20px 0;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    margin: 15px 0;
    /* transform: rotate(180deg); */
    width: 100%;
    direction: rtl;
    justify-content: start;
    gap: 10px;
}

.chat-wrapper {
    padding: 20px;
    width: 100%;
    height: 77%;
    margin: 0 auto;
    overflow-y: auto;
    /* transform: rotate(180deg); */
}

.msg-receive {
    direction: ltr;
}

.img-msg {
    width: 45px;
    height: 45px;

    border-radius: 50%;
}

.img-msg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-receive p {
    border-radius: 20px 20px 20px 0px;
    padding: 10px 20px;
    max-width: 60%;
    display: inline-block;
    background-color: #fff6e356;
}

.msg-send p {
    border-radius: 20px 0 20px 20px;
    padding: 10px 20px;
    max-width: 60%;
    display: inline-block;
    background-color: var(--color-white);
}

.chat-wrapper {
    padding: 20px;
    width: 100%;
    height: 72%;
    margin: 0 auto;
    direction: ltr;
    overflow-y: auto;
    /* transform: rotate(180deg); */
}

.chat-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.chat-wrapper::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

.chat-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 0;
    cursor: pointer;

    border: 0 solid var(--scrollbarBG);
}

.chat-wrapper::-webkit-scrollbar {
    width: 9px;
}

.msg-date span {
    width: 40%;
    height: 1px;
    background-color: #eeeeee;
}

.msg-date {
    /* transform: rotate(180deg); */
    display: flex;
    text-align: center;
    gap: 20px;
    margin: 30px 0;
    align-items: center;
    justify-content: center;
}

.msg-date h3 {
    color: var(--color-p);
    font-size: 17px;
}

.form-chat {
    padding-top: 20px;
    padding: 20px;
    border-top: 1px solid #eeeeee;
}

.form-chat>form {
    display: flex;

    margin: auto;
    align-items: start;
    justify-content: space-between;
}

.sub-form-chat {
    width: 80%;
}

.sub-form-chat input {
    width: 100%;
}

.btns-form-chat {
    width: 20%;
    justify-content: flex-end;
}

.sub-form-chat textarea {
    min-height: 40px !important;
    max-height: 80px !important;
    font-size: 19px;
    color: var(--color-a);
    font-family: "font_bold";
    border: none;
    width: 100%;

    background-color: transparent;
}

.btns-form-chat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-form-chat input::placeholder {
    font-size: 20px;
    color: var(--color-a);
    font-family: "font_bold";
}

.upload-form-chat input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.upload-form-chat label {
    cursor: pointer;
    margin-bottom: 0 !important;
}

.btns-form-chat button {
    background-color: var(--color-a);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: navajowhite;
}

/* end style chat  =  ====
==================== */

/* start style index teacher  == =
================================ */

.about-teacher {
    background-color: #f9fafd;
    padding: 25px 60px;
    border-radius: 20px;
}

.title-about-teacher {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-about-teacher h2 {
    font-size: 16px;
    color: var(--color-a);
    font-family: "font_bold";
}

.sub-about-teacher {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 20px;
}

.img-about-teacher {
    width: 70px;
    height: 70px;
}

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

.text-about-teacher h2 {
    font-size: 16px;
    color: var(--color-a);
}

.text-about-teacher span {
    color: var(--color-p);
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
}

.counter-index-teacher {
    background-color: #f9fafd;
    padding: 45px 60px;
    border-radius: 20px;
}

.sub-counter-index-teacher {
    text-align: center;
}

.img-counter-index-teacher {
    text-align: center;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    height: 58px;
}

.img-counter-index-teacher img {
    object-fit: contain;
    width: auto;
    height: 100%;
}

.sub-counter-index-teacher h3 {
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-p);
    margin: 10px 0;
}

.sub-counter-index-teacher p {
    font-size: 18px;
    font-family: "font_bold";
    color: var(--color-a);
}

.counter-index-teacher {
    margin: 50px 0;
}

.btns-index-teacher {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.btns-index-teacher a {
    height: 60px;
    padding-top: 18px;
}

.btns-index-teacher a:nth-of-type(1) {
    background-color: #8995b8;
}

.btns-index-teacher a:nth-of-type(2) {
    background-color: var(--color-button);
}

.btns-index-teacher a:nth-of-type(3) {
    background-color: var(--color-a);
}

.btns-index-teacher a:nth-of-type(4) {
    background-color: var(--color-main);
}

.btns-index-teacher a:hover {
    background-color: var(--color-button);
}

.btns-index-teacher a:nth-of-type(2):hover {
    background-color: var(--color-a);
}

.main-title-chat {
    display: flex;
    padding-left: 20px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
}

.mune-chat {
    font-size: 26px;
    cursor: pointer;
    display: none;
}

.setting-up,
.live-teacher {
    padding: 20px 30px;
    text-align: center;
}

.title-setting-up,
.title-live-teacher {
    margin: 10px 0 30px;
}

.title-setting-up h2,
.title-live-teacher h2 {
    font-size: 24px;
    font-family: "font_bold";
}

.form-setting-up input,
.form-live-teacher input {
    background-color: #f2f3fa6e !important;
    border-color: transparent;
    border-radius: 30px;
}

.form-setting-up select,
.form-live-teacher select,
.form-setting-up textarea {
    background-color: #f2f3fa6e !important;
}

.input-setting-up input::placeholder {
    color: var(--color-a);
}

.form-setting-up .input-form textarea {
    height: 123px !important;
}

.share-group {
    padding: 20px 30px;
}

.title-share-group {
    display: flex;
    align-items: center;
    margin: 10px 0px 40px;
    justify-content: space-between;
}

.title-share-group h2 {
    font-size: 24px;
    font-family: "font_bold";
}

.sub-share-group ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0px;
    flex-wrap: wrap;
    gap: 20px;
}

.sub-share-group ul li {
    display: flex;
    width: 55px;
}

.clipboard {
    width: 100%;
    position: relative;
    margin: 40px 0;
}

.clipboard input {
    width: 100%;
    height: 55px;
    user-select: none;
    padding: 10px 20px 10px 60px;
    color: var(--color-a);
    background-color: #f2f3fa75;
    border-radius: 30px;
    border: 1px dashed var(--color-a);
}

.clipboard button:hover {
    transform: scale(1.2);
    color: var(--color-a);
    cursor: pointer;
}

.clipboard button {
    color: var(--color-p);
    background-color: transparent;
    background-repeat: no-repeat;
    font-size: 20px;
    border: none;
    position: absolute;
    transition: all 0.3s linear;
    left: 16px;
    top: 12px;
}

.copied {
    background-color: #75849421;
    padding: 9px;
    transition: all 0.5s linear;
    border-radius: 20px 20px 20px 0;
    height: 86%;
    width: 104px;
    margin: auto;
    opacity: 0;
    font-family: "font_bold";
    font-size: 18px;
    left: 0;
    z-index: 1;
    color: #00408b;
    top: -51px;
    text-align: center;
    display: inline-block;
    position: absolute;
}

.btn-share-group {
    text-align: center;
}

.title-share-group p {
    font-size: 18px;
    cursor: pointer;
    color: var(--color-p);
}

/* end style index teacher ======
================= */

/* start style groups  ==== */

.sub-group-page {
    background-color: #f9fafd;
    padding: 30px 40px 20px;
    margin: 20px 0;
    border-radius: 20px;
}

.sub-group-page h2 {
    color: var(--color-a);
    font-family: "font_bold";
    font-size: 16px;
}

.sub-group-page p {
    margin: 20px 0;
}

.sub-group-page h3 {
    font-size: 19px;
    color: var(--color-a);
}

.sub-group-page h3 i {
    color: var(--color-button);
}

.btn-group-page {
    text-align: left;
}

.form-eidt-group-page {
    width: 40%;
    text-align: center;
    margin: 60px auto;
}

.form-eidt-group-page .input-form textarea,
.form-profile .input-form textarea {
    height: 123px !important;
    margin-bottom: 30px;
}

/* end style groups  ====
===================
*/

/* style profile page  ===============
=======================*/

.profile form {
    display: flex;
    margin: auto;
    width: 50%;
    justify-content: center;
    flex-wrap: wrap;
}

.img-profile {
    text-align: center;
    width: 100%;
}

.img-profile img {
    width: 170px;
    object-fit: cover;
    height: 170px;
    object-position: center;
    border-radius: 50%;
}

.chenge-img input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.chenge-img label {
    font-size: 20px;
    color: var(--color-p);
    margin: 10px 0;
    display: flex;
    cursor: pointer;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.chenge-img label i {
    font-size: 25px;
    color: var(--color-a);
    display: block;
}

.form-profile {
    width: 100%;
    text-align: center;
}

/* end style profile page ==========
=====================*/

/* start style store =========
=================== */

.categories-store {
    margin: 90px 0px 0px;
}

.categories-store ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.categories-store ul li {
    width: 200px;
}

.categories-store ul li a {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px !important;
    text-align: center;
    gap: 20px;
    border: 3px solid transparent;

    color: var(--color-a);
    background-color: #fffcf5;
}

.img-categories-store {
    width: 70px;
    text-align: center;
    margin: auto;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-categories-store img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

.sub-categories-store h2 {
    margin: 20px 0 0;
    font-size: 16px;
    font-family: "font_bold";
}
.categories-store .nav-pills .nav-link.active,
.categories-store .nav-pills .show>.nav-link {
    border: 3px solid var(--color-button);
    background-color: #fffcf5 !important;
    color: var(--color-a) !important;
}

.products-details {
    margin: 20px 0;
}

.text-product-details {
    padding: 20px 0;
    border-radius: 20px;
    box-shadow: 0px 0px 4px #0000002d;
}

.text-product-details>h2,
.text-product-details>p {
    width: 95%;
    margin: auto;
}

.text-product-details>h2 {
    font-size: 23px;
    font-family: "font_bold";
}

.text-product-details>p {
    margin-top: 10px;
    font-size: 19px;
}

.price-prodect {
    margin-top: 40px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #eeeeee;
}

.price-prodect h3 {
    font-size: 16px;
    font-family: "font_bold";
    display: block;
    width: 100%;
}

.old-price {
    font-size: 18px;
    text-decoration: line-through;
    color: #ff1511;
    font-family: "font_bold";
}

.sale {
    background-color: #fff5de6b;
    color: var(--color-button);
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: "font_bold";
}

.addto-cart {
    margin-top: 40px;
    text-align: center;
}

.addto-cart a {
    width: 95%;
    margin: auto;
}

.img-products-details {
    width: 100%;
    position: relative;
    min-height: 370px;
}

.img-products-details img {
    width: 100%;
    border-radius: 30px;
    object-fit: cover;
    height: 100%;
}

/* start style cart = ===
====================
=========== */

.product-cart-page {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.img-product-cart {
    width: 30%;
    height: 160px;
}

.img-product-cart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.text-product-cart {
    width: 70%;
}

.text-product-cart h2 {
    font-size: 16px;
    font-family: "font_bold";
}

.text-product-cart p {
    margin: 15px 0;
    color: var(--color-a);
    font-size: 20px;
}

.text-product-cart span {
    color: var(--color-p);
}

.text-product-cart span i {
    color: var(--color-button);
}

.price-cart {
    margin-top: 20px;
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eeeeee;
}

.product-cart-page {
    padding: 0px 20px;
}

.price-cart h3 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "font_bold";
}

.price-cart span {
    color: #ff1511;
    display: block;
    font-size: 18px;
    font-family: "font_bold";
}

.sub-cart-page {
    margin: 20px 0;
    background-color: #fff;
    padding: 30px 0;
    position: relative;
    box-shadow: 0px 0px 6px #00000013;
}

.delete-cart {
    position: absolute;
    font-size: 26px;
    color: #ff1511;
    cursor: pointer;
    z-index: 1;
    top: 10px;
    left: 10px;
}

.payment-cart {
    margin: 20px 0;
    background-color: #fff;
    padding: 30px 0;
    position: relative;
    box-shadow: 0px 0px 6px #00000013;
}

.details-cart {
    padding: 0 20px 0px;
}

.details-cart h3 {
    font-size: 16px;
    font-family: "font_bold";
}

.details-cart ul {
    margin: 20px 0;
}

.details-cart ul li {
    display: flex;
    align-items: center;
    margin: 15px 0;
    color: var(--color-p);
    font-size: 18px;
    justify-content: space-between;
}

.form-coupon {
    padding: 20px;
}

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

.form-coupon input {
    width: 70%;
    height: 50px;
    background-color: #f9fafd;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid #006ce769;
}

.form-coupon input::placeholder {
    font-size: 17px;
    color: var(--color-a);
    font-family: "font_bold";
}

.form-coupon button {
    font-size: 15px;
    min-width: 30% !important;
}

.total-price-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.total-price-cart {
    font-family: "font_bold";
    font-size: 19px;
    margin: 20px 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.sub-payment-cart {
    padding: 0 20px;
}

.sub-payment-cart h3 {
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-main);
}

.sub-payment-cart .sub-payment-methods ul {
    flex-wrap: wrap !important;
    gap: 20px;
}

.sub-payment-cart .sub-payment-methods li {
    width: 40%;
}

.sub-payment-cart .btn-payment-methods {
    margin: 40px 0 0;
    text-align: center;
}

.courses-page .links-tabs ul li a {
    border: 1px solid var(--color-main);
}

.progress-ber {
    background-color: #d9d9d9;
    width: 100%;
    height: 7px;
    border-radius: 20px;
}

.courses-page .tab-pane.active .progress-ber span {
    transform: scaleX(1);
}

.progress-ber span {
    background-color: var(--color-button);
    height: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 0.3s linear;
    border-radius: 20px;
    display: block;
}

.number-progress {
    display: flex;
    align-items: center;
}

.number-progress {
    display: flex;
    gap: 5px;
    color: var(--color-p);
}

.number-progress h4 {
    margin: 0;
}

.main-courses-page {
    margin: 60px 0px;
}

.error {
    color: red;
}

.logo-footer,
.logo-modal,
.logo-register {
    max-width: 270px;
}

.sub-live {
    background-color: #f9fafd;
    border-radius: 10px;
    margin: 30px 0;
    padding: 40px;
}

/* .otp_input input {
    transform: scaleX(-1);
} */
.save-course-student.active img {
    filter: brightness(0) invert(1);
}

.save-course-student.active {
    background: var(--color-button);
}

.cong-main {
    position: fixed;
    top: 0;
    height: 100vh;
    background-color: var(--color-white);
    width: 100%;
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.lottie4 {
    width: 50%;
    margin: auto;
}

.cong-main::after {
    content: "";
    position: fixed;
    top: 0;
    width: 31%;
    height: 290px;
    z-index: -1;
    pointer-events: none;
    background-image: url(../images/bg5.png);
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    left: 0;
}

.cong-main::before {
    content: "";
    position: fixed;
    bottom: 0;
    width: 31%;
    z-index: -1;
    pointer-events: none;
    height: 290px;
    background-image: url(../images/bg6.png);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    right: 0;
}

.title-sub-live {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-sub-live>h2 {
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-a);
}

.title-sub-live>span {
    color: var(--color-p);
    position: relative;
    padding-right: 15px;
}

.title-sub-live>span::after {
    content: "";
    width: 8px;
    position: absolute;
    right: 0;
    height: 8px;
    border-radius: 50%;
    background-color: #ff1511;
    top: 60%;
    transform: translateY(-50%);
}

.sub-live p {
    width: 80%;
    margin: 20px 0;
    font-size: 20px;
}

.date-sub-live ul {
    margin: 30px 0;
}

.date-sub-live ul li {
    display: flex;
    margin: 10px 0;
    color: var(--color-a);
    font-size: 17px;
    gap: 10px;
}

.disabled {
    pointer-events: none;
}

.disabled a {
    background: darkgray;
}

.watermark {
    opacity: 0 !important;
    pointer-events: none !important;
}

.span.select2.select2-container.select2-container--default.select2-container--above {
    width: 100% !important;
}

.select2-container {
    width: 100% !important;
    border-radius: 30px !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 30px !important;

    background: #f9fafd !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: transparent !important;
    outline: 0;
    border-radius: 30px !important;

    background: #f9fafd;
}

.select2-container--default .select2-selection--multiple {
    background-color: #f9fafd;
    border-radius: 30px !important;

    border-color: transparent !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin: 0 !important;
    background: #f9fafd !important;
    min-height: 50px !important;
    height: auto !important;
    border-radius: 30px !important;
}

.select2-search__field::placeholder {
    text-align: right;
    color: var(--color-a);
    padding: 12px !important;
}




















/*start eidt news ==============
====================
*/

.text-slider-services p {
    height: 60px;
    overflow: hidden;
}

.sub-slider-services {
    height: 100%;
    min-height: 375px;
}

.img-info-teacher-courses img {
    border-radius: 50%;
}

ul#append-search {
    background: #fff;
    padding: 0 1px;
    top: calc(100% + 10px);
    box-shadow: 0px 2px 3px #00000000;
}

ul#append-search li {
    border-bottom: 1px solid #eeeeee;
    padding: 20px;
    display: block;
    text-align: right;

}


.img-msg img {
    border-radius: 50%;
}


.page_not_found {
    text-align: center;
    width: 100%;
}

.page_not_found img {
    max-width: 50%;
    margin: 20px auto;
}

.page_not_found img,
.no-live-image img,
.no-course-image img {
    max-width: 370px;
    margin: 20px auto;
}

.no-live-image img {
    max-width: 250px;
}

.page_not_found p,
.no-live-image p,
.no-course-image p {
    font-size: 26px;
}

.text-sub-slider-courses p {
    height: 60px;
    overflow: hidden;
}

section.courses-page {
    text-align: center;
}

.logo-register {
    right: 0;
    display: flex;
    left: 0;
    margin: auto;
    align-items: center;
    width: 91%;
    max-width: 100%;
    justify-content: space-between;
}

.logo-register img {
    max-width: 252px;
}

.go-to-home a {
    color: var(--color-a);
    font-size: 16px;
}

.no-live-image,
.no-course-image {
    text-align: center;
}

a.live-not-active {
    filter: grayscale(100%);
    pointer-events: none;
}

.sub-notification-page ul li {
    display: flex;
    gap: 20px;
    align-items: center;
}

.sub-notification-page ul li {
    display: block;
    background-color: #ebf3fc;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
}

.sub-notification-page ul li img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.social-media .provider {
    padding: 10px;
}

h2#swal2-title {
    font-size: 19px;
}

button.swal2-confirm.swal2-styled {
    background-color: var(--color-button);
}


.content-courses-details ul {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}


.content-courses-details ul li {
    display: block;
    width: 43%;
}

.content-courses-details ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
}


.content-courses-details ul li a {
    display: flex;
    align-items: center;
    gap: 20px;
}

.content-courses-details ul li a img {
    width: 50px;
}

.content-courses-details ul li {
    display: block;
    width: 43%;
    margin: 20px 0;
}

button#unsubscribe-course-btn {
    margin-top: 45px;
}




.sub-live {
    background-color: #f9fafd;
    border-radius: 10px;
    padding: 40px;
}

.title-sub-live {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-sub-live>h2 {
    font-size: 16px;
    font-family: "font_bold";
    color: var(--color-a);
}

.title-sub-live>span {
    color: var(--color-p);
    position: relative;
    padding-right: 15px;
}

.title-sub-live>span::after {
    content: "";
    width: 8px;
    position: absolute;
    right: 0;
    height: 8px;
    border-radius: 50%;
    background-color: #ff1511;
    top: 60%;
    transform: translateY(-50%);
}

.sub-live p {
    width: 80%;
    margin: 20px 0;
    font-size: 20px;
}

.date-sub-live ul {
    margin: 30px 0;
}

.date-sub-live ul li {
    display: flex;
    margin: 10px 0;
    color: var(--color-a);
    font-size: 17px;
    gap: 10px;
}

/* start news page  */

.main-add-items-form {
    width: 70%;
    margin: auto;
}

.tabs-add-items-form ul {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.tabs-add-items-form li.nav-item {
    width: 33%;
}

.tabs-add-items-form li.nav-item a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    background-color: #f9fafd;
    border-radius: 20px;
    height: 220px;
}

.tabs-add-items-form li.nav-item a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: center;
    justify-content: center;
    background-color: #f9fafd;
    height: 220px;
}

.img-add-items {
    height: 65px;
    width: 90px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.img-add-items img {
    object-fit: contain;
}

.sub-add-items h2 {
    margin-top: 15px;
    color: var(--color-a);
    font-size: 16px;
    font-family: "font_bold";
}

.tabs-add-items-form .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #f9fafd;
    border: 1px solid var(--color-button);
    color: var(--color-a);
}

.add-items-form .input-form {
    width: 100%;
    margin: 5px 0;
}

.upload-form {
    position: relative;
}

.upload-form i {
    position: absolute;
    top: 20px;
    left: 40px;
}

.upload-form input {
    width: 0;
    height: 0;
    position: absolute;
}

.upload-form label {
    display: flex;
    align-items: center;
}

.upload-form i {
    position: absolute;
    top: 14px;
    left: 30px;
}

.btn-form-add-video {
    text-align: center;
    margin-top: 20px;
}

.add-items-form .input-form textarea.form-control {
    width: 100%;
    height: 150px !important;
    border-radius: 20px;
}

.img-add-items-list {
    height: 91px;
    width: 85%;
}

.img-add-items-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.table td,
.table th {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

.table td {
    color: #000;
    font-size: 19px;
}

.links-tables {
    display: flex;
    gap: 10px;
}

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

.links-tables a {
    border: none;
    width: 50%;
    font-size: 17px;
    padding-top: 5px;
    height: 37px;
    text-align: center;
    color: #fff;
    padding-bottom: 7px;
    border-radius: 31px;
}

.eidt-table {
    background-color: #4aa753;
}

.delete-table {
    background-color: #e74845;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    background: #f9fafd;
    color: #212529;
    border-radius: 10px;
}

.table td,
.table th {
    border-top: none;
}

.btn-add-items-list {
    text-align: end;
    margin-bottom: 20px;
}

.table tr th:nth-of-type(1) {
    padding-right: 20px;
}

.table tr th:nth-of-type(1) {
    padding-right: 38px;
}

.table-page {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 992px) {
    .table-page table {
        width: 200%;
    }

    .add-items-flie .table-page table {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .table-page table {
        width: 320%;
    }

    .table td {
        color: #000;
        font-size: 16px;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
        font-size: 14px;
    }

    .add-items-flie .table-page table {
        width: 100%;
    }

    .img-file-table {
        width: 64px;
    }
}


.ripple__rounds {
    border: 0 solid transparent;
    border-radius: 50%;
    position: relative;
}

.ripple__rounds:before,
.ripple__rounds:after {
    content: '';
    border: 0.5em solid rgb(255, 255, 255);
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: ripple__rounds 1s linear infinite;
    opacity: 0;
}

.ripple__rounds:before {
    animation-delay: .5s;
}

.ripple__rounds:after {
    animation-delay: 0;
}

@keyframes ripple__rounds {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

[class*=ripple__rounds] {
    display: inline-block;
    width: 8em;
    height: 8em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
}

.loading-form {
    background-color: #00000082;
    height: 100Vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    flex-wrap: wrap;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999999999999999;
    align-content: center;
}


.loading-form p {
    font-size: 32px;
    font-family: "font_bold";
    color: var(--color-white);
    width: 100%;
    text-align: center;
}


.check-is_free input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.check-is_free label {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 16px;
    justify-content: center;
}

.check-is_free label span {
    display: inline-block;
    padding-right: 30px;
    position: relative;
}

.check-is_free label span::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-p);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.check-is_free input:checked~label span::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--color-a);
    background-image: url(../images/check.png);
    background-size: 57%;
    background-position: center;
    position: absolute;
    background-repeat: no-repeat;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.check-is_free input:checked~label span::after {
    border: none;
}

span#count-message {
    position: absolute;
    top: 50%;
    width: 25px;
    color: var(--color-white);
    height: 25px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    left: 0;
    background: var(--color-button);
}

.status_approved {
    background: #4aa753;
    border: none;
    width: 70%;
    font-size: 17px;
    padding-top: 5px;
    height: 37px;
    text-align: center;
    color: #fff;
    padding-bottom: 7px;
    border-radius: 31px;
}

.status_pendding {
    background: #09919b;
    border: none;
    width: 70%;
    font-size: 17px;
    padding-top: 5px;
    height: 37px;
    text-align: center;
    color: #fff;
    padding-bottom: 7px;
    border-radius: 31px;
}



/* start style search header new  ===
=== === === === === ===  === === */
.search-top {
    position: relative;
}

li.search-top a {
    color: var(--color-a);
    font-size: 16px;
}

.main-search-top {
    position: absolute;
    width: 300px;
    background-color: #fff;
    padding: 12px;
    border-radius: 7px;
    box-shadow: 0 0 3px #00000042;
    top: 100%;
    left: 0;
}

.input-search-top input {
    border-radius: 5px;
    padding-left: 40px;
}

.input-search-top button {
    position: absolute;
    top: 16px;
    left: 15px;
    color: var(--color-a);
    border: none;
    background: transparent;
    font-size: 25px;
}

.main-search-top {
    display: none;
}

.search-results ul li a {
    font-size: 19px;
    padding: 12px;
    width: 100%;
    display: block;
    border-bottom: 1px solid #0000001f;
}


.search-results {
    display: none;
}

.btn-whatsapp-pulse {
    background: #25D366;
    color: white;
    position: fixed;
    bottom: 0px;
    left: 30px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    width: 64px;
    height: 64px;
    align-items: center;
    /* width: 0; */
    /* height: 0; */
    /* padding: 35px; */
    text-decoration: none;
    border-radius: 50%;
    border: 1px solid #fff;
    /* animation-name: pulse; */
    z-index: 999;
    /* animation-duration: 1.5s; */
    /* animation-timing-function: ease-out; */
    /* animation-iteration-count: infinite; */
}

/* @keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #25D366;
    }

    80% {
        box-shadow: 0 0 0 14px #25D366;
    }
} */

.btn-whatsapp-pulse-border {
    bottom: 60px;
    left: 20px;
    animation-play-state: paused;
}

.btn-whatsapp-pulse-border:hover {
    color: #fff;
}

/* .btn-whatsapp-pulse-border::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    padding: 25px;
    border: 5px solid #25D366;
    opacity: 0.75;
    animation-name: pulse-border;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulse-border {
    0% {
        padding: 25px;
        opacity: 0.75;
    }

    75% {
        padding: 50px;
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
} */

.btn-whatsapp-pulse-border {
    bottom: 100px;
    right: 17px;
    animation-play-state: paused;
}


.logo-business {
    width: 99%;
    margin: 30px auto 0;
}



/* ====================================== tabby ================================== */

button.button-tabby p {
    pointer-events: none;
}

button.button-tabby img {
    max-width: 112px;
    width: auto;
    height: auto;
    object-fit: contain;
}

button.button-tabby {
    display: flex;
    background: transparent;
    border: 1px solid #ccc;
    align-items: center;
    padding: 13px;
    border-radius: 11px;
    font-size: 15px !important;
    text-align: right;
}

.sub-bank {
    display: flex;
    align-items: baseline;
    width: 100%;
    justify-content: space-between;
}


.tabs-checkout ul li {
    width: 49%;
    height: 60px;
}


.tabs-checkout ul {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.tabs-checkout ul li a {
    height: 100%;
    display: flex;
    border: 1px solid var(--color-p);
    align-items: center;
    color: var(--color-main);
    justify-content: center;
}

.img-checkout {
    text-align: left;
    width: 35%;
    height: 40PX;
}


.sub-pank-courses a {
    min-width: 50%;
    text-align: center;
}
.sub-pank-courses {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sub-pank-courses div {
    width: 33%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.sub-pank-courses img {
    width: 64px !important;
    height: 30px;
    object-fit: contain;
    object-position: left;
}
.img-checkout img{
    object-fit: contain;
    width: 100%;
    object-position: left;
    height: 100%;
}

.styles__tabby-card--de772.styles__tabby-card--rtl--b41c9 {
    margin: 40px auto;
}

.tabs-checkout  .nav-pills .nav-link.active {
    background-color: transparent;
    color: var(--color-main);
    border: 1px solid var(--color-button);

}

.donne-success img {
    object-fit: contain;
    width: 280px;
    height: 280px;
}


.donne-success {
    text-align: center;
    padding-bottom: 100px;
}

.donne-success p {
    margin: 20px;
    font-size: 26px;
    color: var(--color-main);
}




.sub-courses-lectures img {
    max-height: 150px;
    max-width: 80%;
}
.sub-courses-lectures h2 {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-a);
    font-size: 20px ;
}

.not-found-notification {
    width: 100%;
}
.sub-not-found-notification h2 {
    font-size: 19px;
}
.text-sub-slider-courses span {
    background-color: var(--color-button);
    color: var(--color-white);
    display: inline-block;
    height: 45px;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    padding: 11px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 5px;
    transition: all 0.5s linear;
    min-width: 180px;
}
.sub-courses-lectures a {
    text-align: center;
    display: flex;
    height: 239px;
    gap: 10px;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
    margin: 10px 0;
    box-shadow: 0 1px 3px #0000003b;
}

.sub-courses-lectures img {
    max-height: 132px;
    object-fit: contain;
    max-width: 89%;
    width: auto !important;
}

.send-request {
    width: 100%;
    text-align: center;
    margin: 15px 0 0;
}

.img-profile ~ p {
    width: 100%;
    text-align: center;
}

.fliter-index {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}


.fliter-index .input-form {
    width: 19%;
    min-width: 190px;
}


.fliter-index .input-form select {
    border-radius: 0 !important;
}


.search-public ul#append-search {
    position: absolute;
    width: 100%;
}

.search-public.search {
    margin: 20px 0;
}


.search-public input {
    color: var(--color-main) !important;
}