/*.light-color{*/
/*    --main-color: white;*/
/*    --second-color: #eee;*/
/*    --pink: #d028fa;*/
/*    --lightblue: #00d0fc;*/
/*    --color-item-third: #79d9c7;*/
/*    --color-item-fourth: #eec387;*/
/*    --color-button-footer: #333333;*/
/*    --bg-color2:#fafafa;*/
/*    --facebook-color: #84cdf0;*/
/*    --twiter-color: #00aced;*/
/*    --background: transparent;*/
/*    --main-text-color: #797979;*/
/*    --main-title-color: #333333;*/
/*    --main-p-color: #666;*/
/*    --main-des-color: #848484;*/
/*    --main-border-color: #bcccf9;*/
/*    --input-color:#f3f3f3;*/
/*    --color-item-first:#ffa0a0;*/
/*    --color-item-second:#84cdf0;*/
/*    --blue-color:#2174ff;*/
/*    --main-paragragh-color-text:#939393;*/
/*}*/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../font/OpenSans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../font/poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../font/poppins/Poppins-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'poppins';
    font-style: normal;
    font-weight: 800;
    src: url('../font/poppins/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'GreatVibes';
    font-style: normal;
    font-weight: 600;
    src: url('../font/GreatVibes/GreatVibes-Regular.otf') format('truetype');
}

* {
    padding: 0px;
    margin: 0;
    text-decoration: none;
    /*background: #f5f9f9;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* adds animation for all transitions */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    background: var(--main-color);
    overflow-x: hidden;
    min-height: 100vh;
}

.contant, .contant-cours, .contant-blog {
    flex: 1;
    width: 100%;
}


/* //////////////////////headbar///////////////////////////////// */
@media (max-width: 1366px) {
    nav {
        padding: 0 10px !important;
    }
}

.fa-bars {
    font-size: 20px;
}

.secmenubar {
    display: none;
    flex-direction: column;
    position: absolute;
    z-index:100;
    background: white;
    box-shadow: 1px 50px 70px 0.1px rgba(0, 0, 0, 0.06);
    top: 45px;
    width: 300px;
    border-radius: 5px;
    left: 0px;
    padding: 20px;
    font-weight: 500;
    font-size: 13px;
    border: transparent;
    padding-bottom: 0px;
    transform-origin: top center;


}

.secmenubargrowupanimation {
    animation: growup 300ms ease-in-out forwards;

}

.secmenubargrowdownanimation {
    animation: growDown 300ms ease-in-out forwards;
}

.Sec:hover .secmenubar {
    display: flex !important;
    height: max-content;
    width: 261px;

}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1)
    }
    100% {
        transform: scaleY(1)
    }
}

@keyframes growup {
    100% {
        display: none;
        transform: scaleY(0)
    }
    20% {

        transform: scaleY(1)
    }
    0% {
        display: flex;
        transform: scaleY(1)
    }
}


.Sec .secmenubar li a {
    opacity: 1;
    text-align: left;
    font-size: 15px !important;
    height: max-content;
    width: 100% !important;
    padding: 14px 20px;
    padding-left: 0px;
    visibility: hidden;
    font-weight: 300;
    cursor: pointer;
    font-family: "Open Sans";
    color: var(--main-title-color);
}

.Sec:hover .secmenubar li a {
    opacity: 1;
    visibility: visible;
    height: max-content;

    border-bottom: 1px solid #e6e5e5;

}

.Sec .secmenubar li {
    width: max-content;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: left;
    width: 100%;
}

.Sec:hover .secmenubar a:hover {
    color: var(--color-item-third);
}
.Sec:hover .secmenubar a{
    overflow: hidden;
    display: -webkit-box;
    /*-webkit-line-clamp: 1; !* number of lines to show *!*/
    /*line-clamp: 1;*/
    -webkit-box-orient: vertical;
}
.images .content{
    height: 42px;
}
.secmenubar .posterImage{
    margin-bottom: 62px;
}
.Coursesbar {
    flex-wrap: nowrap;
    flex-direction: row !important;
    width: fit-content !important;
    align-items: stretch;
    justify-content: space-between;
    min-width: 800px !important;
    left: unset;
    padding: 35px 30px 25px !important;
    display: none;

}

.Coursesbarmenu {
    max-width: 33%;
    width: fit-content;
}

.Coursesbar .mantion-course .image-mantion-course img {
    /*object-fit: contain;*/
    border-style: none;
    vertical-align: middle;
    max-width: 100%;
    box-sizing: inherit;
    position: relative;
    width: 100%;
    height: 230px;
    margin: auto;
    transition: 0.5s;

}

.Coursesbar .mantion-course .image-mantion-course img:hover {
    transform: scale(1.1);
}

.Coursesbar .mantion-course .image-mantion-course {

    /* margin: 0 10px; */
    position: relative;
    overflow: hidden;
    width: 92%;
}

.Coursesbar .images .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: Poppins;
    width: 92%;
}

.Coursesbar .images .content h3 {
    align-items: center;
    font-weight: 500;
    color: #ff6900;
    font-size: 15px;
}


.Coursesbar .mantion-course {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin: 0 30px;

}

.titleCoursesbarmenu {
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Poppins';
    padding-bottom: 10px;
}

.Coursesbarmenu a {
    border: none !important;
    padding: 8px 0 !important;
}

.box2 ul.page-numbers {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}
.alert_contact_success, .alert_contact_error {
    height: max-content;
    width: fit-content;
    min-width: 300px;
    position: fixed;
    top: 20px;
    justify-content: space-between;
    display: flex;
    padding: 20px;
    border-radius: 15px;
    right: 20px;
    color: #fff;
    z-index: 1000;
    font-size: 13px;
    align-items: center;
}

.alert_contact_success i, .alert_contact_success i {
    cursor: pointer;
}

.alert_contact_error {
    background-color: #F25050;
}

.alert_contact_success {
    background-color: #8ED457;
}

.box2 ul.page-numbers li {
    width: 40px;
    height: 40px;
    border: 1px solid #e6e6e6;
    font-family: Poppins;
    color: var(--main-title-color);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box2 ul.page-numbers li:hover {
    background-color: var(--color-item-first);
}

.quick-demos-button .material-symbols-outlined {
    color: var(--color-item-third);
}

.berger_menu .m-menu__checkbox {
    display: none;
}

.berger_menu label.m-menu__toggle {
    cursor: pointer;
}

.berger_menu .m-menu .sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
}

.berger_menu .m-menu .sub .fa-bars {
    font-size: 16px;
    padding-right: 10px;
    color: var(--main-des-color);
}

.berger_menu .m-menu {
    top: 0;
    width: min(350px, 80%);

    height: 105vh;
    position: fixed;
    left: -100vw;
    -moz-transition: 0.35s;
    -o-transition: 0.35s;
    -webkit-transition: 0.35s;
    transition: 0.35s;
    z-index: 5;
    overflow: auto;
    background-color: #fff;
}

.berger_menu .m-menu .ul-menu {
    height: calc(100vh - 330px)
}

.berger_menu .m-menu a:hover {
    color: var(--color-item-third);
}

.berger_menu .m-menu .search-menu .serachbox-menu {
    width: 70%;
    border-radius: 0px !important;
    border: transparent;
    padding: 0 15px;
    font-size: 14px;
    font-family: "Open Sans";
}

.berger_menu .m-menu .search-menu {
    align-items: center;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    justify-content: space-between;
    height: 50px;
}

.berger_menu .m-menu .search-menu button {
    border: transparent;

    background-color: transparent;
}

.berger_menu .m-menu .search-menu button .fa-magnifying-glass {
    font-size: 16px;
    color: var(--main-text-color);
}

.berger_menu .m-menu .search-menu .buy {
    background: var(--color-item-third);
    padding: 15px;
    height: 100%;
}

.berger_menu .m-menu .search-menu .buy span {
    color: var(--main-color);
}

.berger_menu .m-menu__overlay {
    background-color: rgba(103, 103, 103, 0.5);
    position: absolute;
    top: 0;
    width: 100%;
    height: 105vh;
    position: fixed;
    bottom: 0;
    z-index: 2;
    display: none;
}

.berger_menu .m-menu__header {
    padding: 0 16px;
    height: 75px;
    display: flex;
    justify-content: end;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;

}

.berger_menu .m-menu__header span {
    font-size: 18px;
    font-weight: 300;
    width: fit-content;
    font-family: 'Open Sans';
    padding-right: 7px;
}

.berger_menu .m-menu__header .fa-xmark {
    font-size: 20px;
    padding-top: 5px;
}


.berger_menu .m-menu ul {
    height: 100%;
    overflow-y: auto;
}

.berger_menu .m-menu ul li a,
.berger_menu .m-menu ul li label {
    display: block;
    text-align: left;
    padding: 0 15px;
    line-height: 47px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    font-size: 18px;
    font-family: "Open Sans";

    position: relative;
    font-weight: lighter;

}

.berger_menu .m-menu ul li {
    border-bottom: 1px solid #e8e8e8;
}

.berger_menu .m-menu ul li a {
    padding: 14px 20px !important;
}

.berger_menu .m-menu .sunset li a {
    font-size: 16px !important;
}

.sunset {
    height: fit-content !important;

}

.dno {
    display: none;
}

.berger_menu .m-menu ul li label.a-label__chevron::after {
    content: "";
    position: absolute;
    display: inline-block;
    height: 10px;
    width: 10px;
    border-color: #333;
    border-style: 1px solid;
    border-width: 1px 1px 0 0;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -5px;
    right: 16px;
}

.berger_menu .m-menu ul li .-invisible {
    border-bottom: 0;
}

.berger_menu .m-menu .m-menu label.m-menu__toggle {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    border-bottom: 0;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.berger_menu .m-menu .sunset li {
    padding-left: 15px;
}

.berger_menu .m-menu .footer-menu {
    width: 100%;
    border: none;
    padding: 50px 30px 20px;
}

.berger_menu .m-menu .footer-menu span {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    font-size: 14px;
    font-family: "Open Sans";
    color: var(--main-des-color);
    font-weight: lighter;
}

.berger_menu .m-menu .footer-menu span a {
    color: var(--main-des-color) !important;
    padding: 0 5px;
}

.berger_menu .m-menu .footer-menu-logo {
    padding: 0 30px 30px;
}

.berger_menu .m-menu .footer-menu-logo i {
    padding: 10px;
    margin-right: 10px;
}

.berger_menu .m-menu .fa-brands {
    border: 1px solid rgb(200, 200, 200);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.berger_menu .m-menu .fa-facebook-f {
    color: var(--facebook-color);
}

.berger_menu .m-menu .fa-facebook-f:hover {
    background: var(--facebook-color);
    color: var(--main-color);
}

.berger_menu .m-menu .fa-twitter {
    color: var(--twiter-color);
}

.berger_menu .m-menu .fa-twitter:hover {
    background: var(--twiter-color);
    color: var(--main-color);
}

.berger_menu {
    display: none;
}

.berger_menu .m-menu__checkbox:checked ~ .m-menu__overlay {
    display: block;
}

.berger_menu .m-menu__checkbox:checked ~ .m-menu {
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

nav * {
    font-family: 'Open Sans';
    font-width: 300;
}

nav {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    height: 82px;
    padding: 10px 170px;

}

.header {
    position: sticky;
    top: 0px;
    transition: all 0.4s;
    z-index: 220;
}

.header .logo {
    /*height: 100%;*/
    padding: 5px 0;
}

.header .logo img {
    width: 157px;
}

.header .menubar {
    display: flex;
    justify-content: center;

}

.header .Sec {
    display: flex;
    justify-content: space-around;
    padding-right: 20px;
    position: relative;
    font-size: 15px;
    align-items: center;

}

.header .Sec > i {
    padding: 2px 0px 0px 10px;
    font-size: 10px;
}

/*.header .Demos a{*/
/*    padding: 20px 0 !important;*/
/*    color: #60d3c6;*/
/*    line-height: 15px;*/
/*}*/
/*.header .Courses a,.header .Contact a{*/
/*    padding: 20px 0 20px 23px !important;*/
/*    line-height: 15px;*/

/*}*/
.header .Sec .angle {
    padding: 20px 2px 20px 23px;
    line-height: 15px;
    font-weight: 600;
}

.header .fa-user {
    font-size: 15px;
    padding-right: 10px;
}


/*.Sec:hover .secmenubar a {*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*    height: max-content;*/
/*    margin-top: 10px;*/
/*    padding-bottom: 10px;*/
/*    border-bottom: 1px solid #e6e5e5;*/

/*}*/

.header .login-part {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    box-sizing: border-box;
    margin-right: 10px;
}

.header .login-part span {
    padding-right: 10%;
    font-size: large;
}


.header .login-buy-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gradient-button {
    font-size: 14px;
    font-weight: 600;
    padding: 0 17px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    width: max-content;
    height: 45px;
    cursor: pointer;
    display: inline-block;
    border-radius: 25px;
    background-color: white;
    position: relative;
}


a {
    color: #000;
}

/* ////////////////////////// searchbar///////////////////////////// */
.searchpart {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(../images/header-search-bk.webp);
    background-position: bottom;
    margin-bottom: 185px;
    background-repeat: no-repeat;

}

.searchpart .paragraph {
    font-family: 'poppins';
}

.searchpart .paragraph .p1 {
    padding-top: 150px;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 300;
}

.searchpart .paragraph .p1, .searchpart .paragraph .p2 {

    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.searchpart .paragraph .p2 {
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 50px;
}

.searchpart .body_search_box {
    width: min(95%, 1330px);
}

#headerpictur {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(1108px, 95%);
    outline: transparent;
    border: transparent;
    margin: 65px auto 0;

}

.searchpart form {
    position: relative;
    width: 77%;
    margin: auto;
}

.searchpart .searachbox {
    width: 100%;
    padding: 0 40px;
    border-radius: 30px;
    border: solid 1px rgba(255, 255, 255, .6);
    background-color: var(--main-color);
    font-size: 14px;
    line-height: 1.73;
    text-align: left;
    color: var(--main-title-color);
    height: 64px;
    box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, .05);
    font-family: sans-serif;
}

.searchpart .searachbox:focus-visible {
    outline: none;
}


.searchpart .border-bottun:hover #btn-search-part {

    background: var(--main-color);
    color: #030303fa;
}


/* ///////////////////////cardlist//////////////////////// */

.cardboxlist {
    display: flex;
    width: min(95%, 1330px);;
    margin: auto;
    flex-direction: row;
    margin-bottom: 185px;
    justify-content: space-between;
}

.cardboxlist .cardbox {
    display: flex;
    justify-content: center;
    width: 100%;

}

.cardboxlist .circle {
    font-size: 50px;

    border-radius: 50%;
    width: 90px;
    height: 90px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardboxlist .cardbox:nth-child(even) .circle {
    background-color: #ffa0a0;
}

.cardboxlist .cardbox:nth-child(odd) .circle {
    background-color: var(--facebook-color);
}

.cardboxlist .circle span {
    font-size: 50px;
}

.cardboxlist .cardbox .par {
    width: 65%;
    margin: 0 0 0 30px;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}


.cardboxlist .cardbox .par a {
    font-family: 'poppins';
    font-weight: 600;
    font-size: 18px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1em;
    color: var(--main-title-color);
}

.cardboxlist .cardbox .par p {
    display: flex;
    justify-content: center;
    font-weight: 400;
    color: var(--main-text-color);
}


.footer-container {
    width: min(95%, 1330px);
    display: flex;
    padding: 107px 0 40px;
    justify-content: space-between;
    margin: auto;
}

.footer-container .cardpost {
    background-color: var(--main-color);
    padding: 30px 25px;
    border-radius: 10px;
    box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, .05);
    width: 100%;
    margin: auto;
}

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

.footer-container .cardpost .info > div {
    display: flex;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.97;
    text-align: left;
    color: #848484;
    align-items: center;
    margin-bottom: 5px;
    font-family: "Open Sans";
}

.footer-container .cardpost .info > div i {
    font-size: 17.5px;
    text-align: left;
    margin-right: 15px;
    min-width: 25px;
}

.footer-container .center-part {
    display: flex;
    color: var(--main-color);
    padding-top: 40px;

}

.footer-container .Useful-Links {
    padding-right: 70px;
    padding-left: 30px;
}

.footer-container .links {
    display: flex;
    flex-direction: column;

}

.footer .right-part {
    width: 30%;
    padding-top: 40px;
    /*padding-right: 47px;*/
}
.footer .right-part .socialNetwork{
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}
.footer .right-part .socialNetwork i{
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.footer .right-part .socialNetwork i:hover{
    transform: scale(1.2);
}
.footer-container .links a {
    color: var(--main-color);
    font-size: 15px;
    padding-bottom: 15px;
    font-family: "Open Sans";

}

.footer-container .title_center_part {
    font-size: 20px;
    margin-bottom: 26px;
    font-weight: 700;
    font-family: Poppins;
}

.footer .linebar_container {
    line-height: 38px;
    display: flex;
    justify-content: space-between;
    width: min(95%, 1330px);
    margin: auto;
    padding: 15px 0;
    color: var(--main-color);
    border-top: 1px solid rgba(255, 255, 255, .3);
    font-size: 14px;
    font-family: "Open Sans";
}

.footer .linebar_container a {
    color: var(--main-color);
    font-weight: 700;
    font-size: 14px;
}

.footer .right-part .download-app button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    line-height: 52px;
    box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, .05);
    background-color: var(--color-button-footer);
    line-height: 52px;
    text-align: center;
    padding: 0 28px;
    border-radius: 5px;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: var(--main-color);
    border: none;
    font-size: 15px;
    font-family: "Open Sans";
}

.footer .right-part .download-app img {
    margin-right: 10px;
}

.footer .right-part .download-app {
    margin-bottom: 35px;
}

#app-store {
    margin-right: 18px;
}

.footer .email-part .explain span {
    font-size: 20px;
    font-weight: 800;
    text-align: left;
    color: #fff;
    display: block;
    margin-bottom: 26px;
    text-transform: uppercase;
    font-family: Poppins;
}

.footer .email-part .explain p {
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    color: #fff;
    margin-bottom: 19px;
    font-family: "Open Sans";
}

.footer form {
    position: relative;
}

.footer .searachbox {
    width: 100%;
    height: 53px;
    padding: 0 30px;
    border-radius: 26px;
    border: solid 1px rgba(255, 255, 255, .6);
    background-color: transparent;
    font-size: 14px;
    line-height: 2.29;
    text-align: left;
    color: var(--input-color);
}

.footer .searachbox::-webkit-input-placeholder {
    color: var(--input-color);

}

.footer form .search-button {
    position: absolute;
    bottom: 4px;
    right: 4px;
    height: 45px;
    border-radius: 22px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    line-height: 45px;
    padding: 0 25px;
    border: none;
    cursor: pointer;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.footer form .search-button:hover {
    background: linear-gradient(to right, var(--lightblue), var(--pink));
    color: var(--main-color);
}

/*welcom*/
.welcom_img {
    margin: 0 52px;
    width: 41%;
}

.welcompart {
    width: min(95%, 1330px);
    display: flex;
    justify-content: center;
    margin: auto;
}

.welcompart .explain {
    margin-top: 60px;
    width: 45%;
    display: flex;
    flex-direction: column;
}

.welcompart .pictur {
    width: 100%;
    margin-bottom: 35px;
}

.welcompart .welcompartbutton {
    margin-top: 10%;
    padding: 2%;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 50px;
    margin-right: 50%;
}

.welcompart .paragragh h1 {
    font-weight: 600;
    color: var(--main-title-color);
    font-family: poppins;
}

.welcompart .paragragh .h1 {
    font-size: 25px;
    margin-bottom: 10px;
    line-height: 28.8px;
}

.welcompart .paragragh .h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 36px;
}

.welcompart .paragragh p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 35px;
    font-family: "Open Sans";
    font-weight: 400;
    color: var(--main-p-color);
}


.welcompart .border-bottun:hover .view-button {

    background: var(--main-color);
    color: #030303fa;
}

/*category*/
.categoriespart .cardcat {
    width: 100%;
    display: flex;
}

.categoriespart {
    background: url(../images/bk-category.webp);
    width: 100vw;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: 100vw;
    overflow: hidden;
    margin-bottom: 110px;

}

.categoriespart .all-categories {
    padding: 35px 15px 120px;
    width: min(95%, 1330px);
    margin: auto;
    position: relative;

}

.swiper-button-prev {

    background: transparent;
}

.swiper-button-next {
    background: transparent;
}

.categoriespart .cardcat p {
    display: block;
    outline: transparent;
    background: transparent;
    font-size: 15px;
    font-family: "Open Sans";
    color: var(--main-color);
    line-height: 15px;
    font-weight: 400;
    text-align: left;
}

.categoriespart .cardcat h2 {
    outline: transparent;
    background: transparent;
    margin-bottom: 0.5rem;
    text-align: left;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--main-color);
    font-family: "Open Sans";
}

.categoriespart .cd {
    position: relative;
    border-radius: 15px;
    padding: 35px 30px;
    height: 235px;
    display: block;
    cursor: pointer;

}


.categoriespart .cardcat .cdpic {
    position: absolute;
    outline: transparent;
    background: transparent;
    width: auto;
    max-width: 120px;
    right: 20px;
    bottom: 10px;
    z-index: 3;
    transition: .5s;
}

.categoriespart .cardcat .cdpic:hover {
    transform: scale(1.2);
}

.categoriespart .cardcat .cdbck {
    position: absolute;
    outline: transparent;
    background: transparent;
    right: 0%;
    top: 40%;
    width: 85%;
    height: 60%;
}

.betop {
    margin-top: 50px;
}

.categoriespart .paragragh {
    margin-bottom: 30px;
}

.categoriespart .paragragh h1 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    color: var(--main-title-color);
    margin-bottom: 30px;
    font-family: poppins;
}

.categoriespart .paragragh p {
    font-size: 15px;
    font-family: "Open Sans";
    font-weight: 400;
    color: var(--main-des-color);
    width: 45%;
    line-height: 25px;
    margin-bottom: 55px;
}

.red {
    display: block;
    background: var(--color-item-first);
}

.blue {
    display: block;
    background: var(--color-item-second);
}

.green {
    display: block;
    background: var(--color-item-third);
}

.gold {
    display: block;
    background: var(--color-item-fourth);
}

.back-swiper {
    width: 100%;
    background: url(cardcategory/bk-category.webp);
}

.all-categories .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='next-arrow'%3e%3cpath d='M22.707,12.707a1,1,0,0,0,0-1.414l-5-5a1,1,0,0,0-1.414,1.414L19.586,11H2a1,1,0,0,0,0,2H19.586l-3.293,3.293a1,1,0,0,0,1.414,1.414Z'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    right: -75px !important;
    top: 60%;
    opacity: 0.4;
}

.all-categories .swiper-button-next:after {
    content: none !important;
}

.all-categories .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='next-arrow'%3e%3cpath d='M22.707,12.707a1,1,0,0,0,0-1.414l-5-5a1,1,0,0,0-1.414,1.414L19.586,11H2a1,1,0,0,0,0,2H19.586l-3.293,3.293a1,1,0,0,0,1.414,1.414Z'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    left: -75px !important;
    top: 60%;
    opacity: 0.4;
    transform: rotate(180deg);
}

.all-categories .swiper-button-prev:after {
    content: none !important;
}

.all-categories .swiper-button-next.swiper-button-disabled, .all-categories .swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
}

/* //////////////////skill-plan////////////////////////// */
.skillpart {
    background-image: url(../images/bk-skill.webp);
    /*background-size: 100vw;*/
    background-position-y: bottom;
    background-position-x: left;
    background-repeat: no-repeat;
}

.skill-plan {
    display: flex;

    row-gap: 100px;
    justify-content: space-between;

    width: min(95%, 1330px);
    margin: auto;

}

.skill-plan .texts {
    display: flex;
    flex-direction: column;
    width: 50%;
    background-size: 1000px;

}

.skill-plan .texts h2 {
    margin-bottom: 10px;
    font-size: 24px;
    font-family: "poppins";
    font-weight: 300;
    line-height: 28.8px;
    color: var(--main-title-color);
}

.skill-plan .texts h1 {
    margin-bottom: 20px;
    font-size: 36px;
    font-family: "poppins";
    font-weight: 300;
    line-height: 43.2px;
    color: var(--main-title-color);
}

.skill-plan .texts p {
    margin: auto 0 35px;
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    font-family: "Open Sans";
    color: var(--main-p-color);
    width: 95%;
}

.skill-plan .texts img {
    width: 100%;
    max-width: 628px;
    margin-top: 25px;
    margin-bottom: 105px;
}

.skillpoint .students {
    right: 50%;
    top: 50%;
    transform: translate(-75%, -50%);
}

.skillpoint .courses {
    left: 50%;
    top: 50%;
    transform: translate(75%, -50%);
}

.skillpoint .teachers {
    bottom: 80%;
}

.skillpoint .products {
    top: 75%;
}

.skill-plan .skillpoint {
    width: 50%;
    max-width: 403px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 70px;
    height: 403px;
    border: 1px dashed #e2e1e1;
    border-radius: 50%;
    position: relative;
    margin-right: 10%;
    margin-left: 10%;
}

.skill-plan .skillpoint .clr {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    align-self: center;
    outline: transparent;
    border: transparent;
    box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, .05);
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 5;
}

.skillpoint p {
    display: flex;
    margin-bottom: 0px !important;

}

.skillpoint h3 {
    font-family: "poppins";
    font-size: 15px;
    font-weight: 300;
}

.skill-plan .skillpoint .star {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 30px 30px !important;
    font-size: x-large;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 80px !important;
    height: 80px !important;
}

.skill-plan .center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 500px;
}

.skill-plan .skillpoint .clr span {
    background: transparent;
    outline: transparent;
    border: transparent;
    font-size: 30px;
    font-width: 700;
    font-family: "Open Sans";
}

.redcolor {
    display: block;
    color: var(--color-item-first);
    background: transparent;
    font-weight: bolder;
}

.bluecolor {
    display: block;
    color: var(--color-item-second);
    background: transparent;
    font-weight: bolder;
}

.greencolor {
    display: block;
    color: var(--color-item-third);
    background: transparent;
    font-weight: bolder;
}

.goldcolor {
    display: block;
    color: var(--color-item-fourth);
    background: transparent;
    font-weight: bolder;
}

/* //////////////////allbox///////////////////////// */

.allbox-coursescards {

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(95%, 1100px);
    padding: 65px 0 65px;
    margin: auto;

}

.allbox-coursescards .btn {
    color: var(--main-title-color);
    background: var(--main-color);
    height: 48px;
    display: flex;
    align-items: center;
    width: 213px;
    border-radius: 22px;
    border: none;
    justify-content: center;
    font-size: 14px;
    font-family: "Open Sans";
    font-weight: 600;
    transition: .25s ease-in-out;
}

/* //////////////////////topcourses///////////////////// */

.topcourses {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 100%;
}

.topcourses .coursescard {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    align-self: center;
    row-gap: 38px;
    column-gap: 38px;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: first baseline;
    box-sizing: border-box;
    justify-content: center;
    justify-self: center;
    border-radius: 10px;
    border: transparent;
    box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, .06);
    background: var(--main-color);
    position: relative;
    width: 30%;
}


.topcourses .coursescard .card:hover .explain {
    color: #eee !important;
}

.topcourses .coursescard .card:hover .fa-star {
    color: #eee !important;
}

.topcourses .coursescard .card:hover #tittle {
    color: #eee;
}

.topcourses .texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;


}

.topcourses .texts p {
    text-align: center;
    font-size: 15px;
    font-family: "Open Sans";
    font-weight: 400;
    width: 50%;
    margin: auto;
    line-height: 25px;
    margin-bottom: 55px;
    color: var(--main-p-color);
}

.topcourses .texts h1 {
    margin-bottom: 20px;
    font-family: "poppins";
    font-size: 36px;
    font-weight: 300;
    color: var(--main-title-color);
}


.topcourses .parent-btn {
    /*height: 400px;*/
    display: flex;
    align-items: start;
    /*width: 30%;*/
    /*width: 100%;*/
    justify-content: center;
}

.card .letterdown {
    display: flex;
    outline: transparent;
    background: transparent;
    align-items: center;
    justify-content: space-between;
}

.card .explain {
    display: flex;
    outline: transparent;
    background: transparent;
    justify-content: center;
    align-items: center;
    color: var(--main-des-color);
    font-family: "Open Sans";
    font-size: 14px;
    font-width: 300;
}

.card .explain i {
    font-size: 12px;
    padding-right: 5px;
    padding-top: 2px;
}

.card .letterdown h5 {

    outline: transparent;
    background: transparent;
    display: flex;
}

.card a {
    margin: 10px;
}

.card .letterhead {
    right: -20px;
    top: 13px;
    padding: 9px 18px;
    border-radius: 7px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;

    position: absolute;
    z-index: 2;
}

.card .letterhead a {
    color: white;
    font-weight: bolder;
    font-family: "Open Sans";
    font-size: 15px;
}

.card .extera-part {
    position: absolute;
    right: -19px;
    top: 51px;
    border-left: 12px solid transparent;
    border-right: 19px solid transparent;
    border-top: 12px solid #348AC7;
}

.card img {
    margin: 0px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 0;
    height: 243px;
    object-fit: cover;
}

.card #tittle {
    background: transparent;
    font-weight: bolder;
    color: var(--main-title-color);
    font-size: 16px;
    font-family: 'Open Sans';
    text-align: left;
    margin: 0;
    padding-bottom: 20px;
    display: block;
}

.card .text-box {
    padding: 30px 20px;
}


.card .price {
    padding-inline: 20px;
    outline: transparent;
    border: transparent;
    color: var(--color-item-second);
    border-radius: 5px;
    background-color: #f5f5f5;
    padding: 5px 15px;
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    font-family: "Open Sans";
}
.card .oldPrice{
    padding-bottom: 5px;
    font-size: 14px;
    text-decoration: line-through;
    text-align: center;
}
span {
    background: transparent;
}

/* /////////////////////////////////.create-account/////////////////// */
.create-account {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 50px 0;
    background: linear-gradient(#fff, var(--bg-color2));

    justify-content: center;
    align-items: center;
}


.create-account .picture img {
    position: absolute;
    outline: transparent;
    background: transparent;
    bottom: 36px;
    right: 0px;
    z-index: 3;
    width: min(1143px, 80%);


}

.create-account .mainpart {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: transparent;
    top: 20%;
    left: 10%;
}

.create-account .mainpart h1 {
    color: var(--main-color);
    background: transparent;
    margin-bottom: 20px;
    font-weight: 300;
    font-size: 30px;
    font-family: poppins;
}

.create-account .mainpart button {
    color: var(--main-color);
    background: transparent;
    margin-top: 35px;
    font-family: "Open Sans";
}

.create-account .mainpart h4 {
    color: var(--main-color);
    background: transparent;
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    font-family: "Open Sans";
}

.create-account .mainpart .btn{
    background: var(--main-color);
    color: rgba(0, 0, 0, .7);
    font-size: 14px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    padding: 0 45px;
    border: transparent;
    outline: transparent;
    border-radius: 30px;
}

.create-account .mainpart .btn:hover {
    color: var(--second-color);
    background: var(--color-item-third);
}
.create-account .mainpart video{
    margin: 20px auto;
}
.brands {
    width: 100vw;
    margin: auto;
    padding: 50px 0 76px;
    background-color: var(--bg-color2);
}

.swiper2 {
    width: 100%;
}

.back-swiper2 {
    width: min(95%, 1330px);
    margin: auto;
}

.brands .swiper-slide {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: .5s;
    height: 44px;
    display: flex;
    align-items: center;
    background-color: transparent;
}

.brands .swiper-slide:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

.swiper-scrollbar {
    display: none !important;
}

/* ////////////////sliderfeedback//////////////// */
.feedbackslider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;

}

.back-swiper3 {
    width: min(95%, 1100px);
    margin: auto;
    position: relative;
}

.swiper3 {
    width: 50%;
}

.feedbackslider .swiper-pagination-bullet {
    width: 90px !important;
    height: 90px !important;
    background-color: transparent !important;
    /*background-image: url(https://coursebuilder.thimpress.com/demo-kit/wp-content/uploads/sites/25/2017/09/testimonial-01-3-85x85.png) !important;*/
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin: 0 12px !important;

}

/*.feedbackslider .swiper-pagination-bullet[aria-label="Go to slide 2"] {*/
/*    background-image: url("https://coursebuilder.thimpress.com/demo-kit/wp-content/uploads/sites/25/2017/09/testimonial-03-3-85x85.png") !important;*/

/*}*/

/*.feedbackslider .swiper-pagination-bullet[aria-label="Go to slide 3"] {*/
/*    background-image: url("https://coursebuilder.thimpress.com/demo-kit/wp-content/uploads/sites/25/2017/09/testimonial-02-3-85x85.png") !important;*/

/*}*/

.feedbackslider .swiper-pagination-bullet {
}

.feedbackslider .swiper-pagination-bullet-active {
}

.back-swiper3 .swiper-pagination, .developer .swiper-pagination {
    top: 10px !important;
    position: absolute !important;
    z-index: 1;
}

.feedbackslider .swiper-wrapper {
    font-display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    background: transparent;
    padding-top: 15%;
}

.feedbackslider .swiper-wrapper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    flex-direction: column;
    background: transparent;
    margin-bottom: 100px;
}

.explain-profile-text {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.feedbackslider .tittle {
    margin-top: 20px;
    font-size: 36px;
    margin-bottom: 50px;
    font-family: 'Poppins';
    font-weight: 600;
    color: #333333;
}

.back-swiper3 .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='next-arrow'%3e%3cpath d='M22.707,12.707a1,1,0,0,0,0-1.414l-5-5a1,1,0,0,0-1.414,1.414L19.586,11H2a1,1,0,0,0,0,2H19.586l-3.293,3.293a1,1,0,0,0,1.414,1.414Z'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    opacity: 0.5;
}

.back-swiper3 .swiper-button-next:after {
    content: none !important;
}

.back-swiper3 .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='next-arrow'%3e%3cpath d='M22.707,12.707a1,1,0,0,0,0-1.414l-5-5a1,1,0,0,0-1.414,1.414L19.586,11H2a1,1,0,0,0,0,2H19.586l-3.293,3.293a1,1,0,0,0,1.414,1.414Z'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    transform: rotate(180deg);
    opacity: 0.5;
}

.back-swiper3 .swiper-button-prev:after {
    content: none !important;
}

.back-swiper3 .swiper-slide {
    padding-top: 50px;
    font-family: "Open Sans";
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: var(--main-des-color);
}

/* ///////////////////latestcard/////////////////// */
.latestcard {
    display: flex;
    justify-content: center;
    width: min(95%, 1330px);
    align-items: center;
    position: relative;
    flex-direction: row;
    margin: 100px auto;

}

.latestcard .cards {
    justify-content: center;
    align-items: center;
    align-self: center;
    display: flex;
    row-gap: 10px;
    column-gap: 30px;
    flex-wrap: wrap;
    width: 75%;
}

.latestcard .texts {
    padding: 30px 20px;
}

.latestcard .explains {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 25%;

}

.latestcard .explains h1 {
    margin-bottom: 20px;
    font-size: 36px;
    font-family: Poppins;
    font-weight: 600;
    color: var(--main-title-color);
}

.latestcard .explains p {
    margin: auto auto 35px;
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    font-family: "Open Sans";
    color: var(--main-p-color);
}

.latestcard .explains h5 {
    font-size: large;
    margin-bottom: 10px;
    font-weight: 50;
}


.latestcard .card:hover {
    margin-bottom: -65px;
}

.latestcard .card #tittle {
    transition: 0.25s;
}

.latestcard .card #tittle:hover {
    color: var(--color-item-third) !important
}

.latestcard .card {
    height: 10%;
    width: 30.5%;
    background-color: var(--main-color);
    box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, .05);
    transition: 0.25s;
}

.latestcard .card .smss span {
    color: var(--color-item-first);
    font-size: 15px;
    display: flex;
    justify-content: space-around;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    background: transparent;
    outline: transparent;
}

.latestcard .card .smss {
    display: flex;
    justify-content: space-around;
    justify-content: center;
    align-items: center;
    background: transparent;
    outline: transparent;
    color: var(--main-des-color);
}

.latestcard .card .smss h3 {
    background: transparent;
    outline: transparent;
}

.latestcard .card .material-symbols-outlined {
    color: var(--color-item-second);
    font-size: 15px;
    display: flex;
    justify-content: space-around;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    background: transparent;
    outline: transparent;

}

.latestcard .card h3 {

    font-weight: 100;
}

.latestcard .card h5 {
    font-weight: 100;
    font-size: 15px;
    font-family: "Open Sans";
}


.latestcard .card #tittle:hover {
    color: var(--color-item-second);
}


.latestcard .border-bottun:hover .more-button {

    background: var(--main-color);
    color: #030303fa;
}


.quick-direction .fa-angle-down {
    transform: rotate(180deg);
    color: var(--main-color);

}

.quick-direction span {
    color: var(--main-color);
}

.quick-butttons {
    z-index: 10;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 40%;
    right: 10px;
}

.quick-butttons .cl:hover span {
    color: var(--main-color);
}

.quick-butttons .quick-demos-button:hover {
    background: var(--color-item-third);
    color: var(--main-color);
}

.quick-butttons .quick-buy-now-button:hover {
    color: var(--main-color);
    background: var(--color-item-first);
}

.quick-butttons .quick-support-button:hover {
    color: var(--main-color);
    background: var(--color-item-second);
}


.quick-butttons button {
    display: flex;
    flex-direction: column;
    background: var(--main-color);
    border-radius: 5px;
    border: transparent;
    box-shadow: 2px 1px 30px .01px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 3px;
    cursor: pointer !important;
    align-items: center;
}

.quick-support-button .material-symbols-outlined {
    color: var(--color-item-second);
}

.quick-buy-now-button .material-symbols-outlined {
    color: var(--color-item-fourth);
}

/*courses*/
/*.back-image{*/
/*    background-image: url("../images/page_title_1.jpg");*/
/*    background-attachment: fixed;*/
/*    height: 435px;*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/

/*}*/
.data-page {
    width: min(90%, 1140px);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 435px;
    position: relative;
}

.data-page .title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 435px;*/
}

.data-page .title-box .title {
    font-family: Poppins;
    font-size: 75px;
    padding-right: 50px;
    color: var(--main-color);
    position: relative;
}

.data-page .title-box .title:after {
    content: "";
    right: 0;
    width: 1px;
    border-right: 1px solid #fff;
    position: absolute;
    top: -10px;
    bottom: -10px;
    filter: alpha(opacity=15);
    -ms-filter: "alpha(opacity=15)";
    -webkit-opacity: .15;
    -khtml-opacity: .15;
    -moz-opacity: .15;
    -ms-opacity: .15;
    -o-opacity: .15;
    opacity: .15;
}

.data-page .title-box .description {
    padding-left: 50px;
    font-size: 16px;
    font-weight: 100;
    line-height: 32px;
    letter-spacing: .3px;
    color: var(--second-color);
    font-family: "Open Sans";
    width: 40%;
}

.data-page .all-courses-btn {
    min-width: 260px;
    width: max-content;
    max-width: 90%;
    line-height: 20px;
    height: 42px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    font-family: "Open Sans";
    font-size: 15px;
    background-color: var(--color-item-third);
    position: absolute;
    bottom: -21px;
    padding: 0 15px;
}

/*popular box*/
.popular-box {
    width: 100%;
    height: 100%;
}

.popular-box .blue-box {
    background-color: var(--blue-color);
    padding: 105px 20px 0;
    height: 584px;
    box-sizing: content-box;
}

.popular-box .blue-box .text-box {
    padding-bottom: 50px;
    background-color: transparent;
}

.popular-box .blue-box .title {
    font-family: Poppins;
    font-size: 44px;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 20px;
    color: var(--main-color);
    display: block;
    text-align: center;
}

.popular-box .blue-box .description {
    font-size: 15px;
    font-family: "Open Sans";
    font-width: 400;
    color: var(--main-color);
    text-align: center;
    width: min(90%, 800px);
    margin: 0 auto 20px;
    line-height: 25px;

}

.popular-box .blue-box .swiper {
    width: min(1546px, 95%);
    padding-bottom: 40px;
}

.popular-box .blue-box .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popular-box .blue-box .img-box {
    height: 403px;
    width: 100%;
    overflow: hidden;
    position: relative;

}

.popular-box .blue-box .img-box img {
    width: 100%;
    transition: .5s ease-in-out;
    height: 100%;
    object-fit: cover;
}

.popular-box .blue-box .img-box .text-img {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    align-items: center;
    z-index: 20;
}

.popular-box .blue-box .img-box .star-box {
    display: flex;
    padding-right: 15px;

}

.popular-box .blue-box .img-box .star-box i {
    padding: 0 3px;
    font-size: 12px;
}

.popular-box .blue-box .img-box .price {
    background-color: var(--main-color);
    color: var(--color-item-third);
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
    font-family: "Poppins";
    font-weight: 600;
    gap: 5px;
}
.popular-box .blue-box .img-box .price .old-price{
    font-size: 14px;
    text-decoration: line-through;
    text-align: center;
}
.popular-box .blue-box .card-cours {
    width: 100%;
}

.popular-box .blue-box .card-cours .text {
    padding: 20px 30px;
}

.card-cours .text p {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    color: var(--main-title-color);
    text-align: left;
    transition: .3s;
    margin-bottom: 15px;
}

.card-cours .text span {
    font-size: 16px;
    font-family: "Open Sans";
    color: var(--main-paragragh-color-text);
    text-align: left;
    display: block;
    font-weight: 300;
}

.contant .card-cours .text span {
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 400;
    color: var(--main-text-color);
    text-align: left;
    transition: .3s;
    display: block;
    padding: 0 28px 25px;
    line-height: 24px;
}

.contant .card-cours:hover .text {
    box-shadow: 12.9px 15.3px 18px 0 rgba(0, 0, 0, .08);
}

.card-cours .text p:hover {
    color: var(--color-item-third);
}

.card-cours .img-box:hover img {
    transform: scale(1.2);
}

.gray-box {
    height: 200px;
    width: 100%;
    background: #f6f6f7;
    content: "";

    z-index: 1;
    display: block;

}

/*all courses*/
.box2 {
    width: min(95%, 1140px);
    margin: auto;
    display: flex;
}

.all-courses {
    width: min(75%, 855px);
    padding: 0 15px;
    box-sizing: border-box;
}

.all-courses .header-box {
    display: flex;
    justify-content: space-between;
    padding: 130px 0 60px;
}

.all-courses .header-box .right-box, .all-courses .header-box .left-box {
    display: flex;
    align-items: center;
    width: 50%;
}

.all-courses .header-box .right-box {
    justify-content: end;
}

.all-courses .header-box .right-box p, .all-courses .header-box .left-box p {
    padding: 7px;
    background-color: #eee;
    margin-right: 10px;
    border-radius: 2px;
}

.all-courses .header-box .left-box span {
    font-family: "Open Sans";
    font-size: 16px;
    color: var(--main-des-color);
    font-weight: 300;
    padding-left: 10px;
}

.all-courses .header-box .left-box i {
    color: var(--main-des-color);
}

.all-courses .header-box .right-box .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--second-color);
    padding: 5px;
    width: 75%;

}

.all-courses .header-box .right-box .search-box i {
    color: var(--main-p-color);
}

.all-courses .header-box .right-box .input-search {
    border: none;
}

.all-courses .header-box .right-box .input-search::-webkit-input-placeholder {
    font-style: italic;
    color: var(--main-des-color);
    font-width: 600;
    font-size: 16px;
}

.all-courses .header-box .right-box .input-search:focus-visible {
    outline: none;
}

.all-courses .courses {
    display: flex;
    gap: 40px 26px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.all-courses .card-cours .text p {
    font-size: 16px;
    font-weight: 400;
    padding: 25px 28px 12px;
    margin: 0;
}

.all-courses .courses .card-cours {
    width: 31%;
}

.all-courses .img-box {
    height: 283px;
    width: 100%;
    overflow: hidden;
    position: relative;

}

.img-box .overyimg {
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: 0.3s;
    opacity: 0;
}

.img-box .overyimg .add-cart {
    width: 140px;
    height: 45px;
    border-radius: 22px;
    color: var(--main-color);
    background-color: transparent;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-family: "Open Sans";
    font-weight: 400;
    border: 2px solid var(--main-color);
    display: flex;
    opacity: 0;
    transition: 0.3s;
    transition-delay: 0.2s;
    cursor: pointer;
}

.img-box .overyimg .add-cart-category {
    width: 140px;
    height: 45px;
    border-radius: 22px;
    color: var(--main-color);
    background-color: transparent;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-family: "Open Sans";
    font-weight: 400;
    border: 2px solid var(--main-color);
    display: flex;
    opacity: 0;
    transition: 0.3s;
    transition-delay: 0.2s;
    cursor: pointer;
}

.img-box .overyimg .add-cart:hover {
    background-color: var(--color-item-third);
    border: 2px solid var(--color-item-third);
}

.img-box .overyimg .add-cart-category:hover {
    background-color: var(--color-item-third);
    border: 2px solid var(--color-item-third);
}

.img-box:hover .overyimg {

    opacity: 1;
}

.img-box:hover .add-cart {
    opacity: 1;
}

.img-box:hover .add-cart-category {
    opacity: 1;
}

.all-courses .img-box img {
    width: 100%;
    transition: .5s ease-in-out;
    height: 100%;
    object-fit: cover;
}

/*.courses .card-cours .text-img .price .main-price {*/

/*    color: var(--main-des-color);*/
/*    font-size: 14px;*/
/*    font-family: "Open Sans";*/
/*    font-weight: 300;*/
/*    text-decoration: line-through;*/
/*    padding-left: 8px;;*/

/*}*/

.all-courses .img-box .text-img {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    align-items: center;
    z-index: 20;
}

.all-courses .img-box .star-box {
    display: flex;
    padding-right: 7px;

}

.all-courses .img-box .star-box i {
    padding: 0 3px;
    font-size: 8px;
}

.all-courses .img-box .price {
    background-color: var(--main-color);
    color: var(--color-item-third);
    padding: 9px 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    font-family: Poppins;
    font-weight: 600;
}

.all-courses .img-box .old-price {
    text-decoration: line-through;

}

.all-courses .card-cours {
    width: 100%;
}

.box2 .asid-box {
    width: min(285px, 25%);
    padding: 130px 15px 0;
    box-sizing: border-box;
}

.box2 .asid-box > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.box2 .asid-box .title-box {
    font-size: 18px;
    font-family: Poppins;
    font-weight: 600;
    position: relative;
    margin-bottom: 20px;
}

.box2 .asid-box .title-box::after {
    content: "";
    border-bottom: solid 2px #000;
    position: absolute;
    top: 31px;
    left: 0;
    width: 35px;
}

.box2 .asid-box > div a {
    font-size: 16px;
    font-family: "Open Sans";
    font-weight: 300;
    height: 37px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.box2 .asid-box > div a:hover {
    color: var(--color-item-third);
}

.box2 .asid-box .last-cours {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-bottom: 25px;
}

.box2 .asid-box .last-cours .box-img {
    width: 109px;
    height: 109px;


}

.box2 .asid-box .last-cours .box-img img {
    width: 109px;
    height: 109px;
    object-fit: cover;
}

.box2 .asid-box .last-cours .title {
    font-size: 16px;
    font-family: Poppins;
    font-weight: 400;
    line-height: 22px;
}

.box2 .asid-box .last-cours .price {
    font-size: 16px;
    font-family: "Open Sans";
    font-weight: 400;
    color: var(--color-item-third);
    margin-top: 8px;
    display: block;
}

.box2 .asid-box .last-cours .date {
    font-size: 14px;
    font-family: "Open Sans";
    font-width: 300;
    color: var(--main-des-color);
}

/*box3*/

.box3 .overbox {
    width: 100%;
    height: 500px;
    /*background-color: rgba(33,33,33,0.5);*/
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
}

.box3 .contant {
    position: relative;
    z-index: 10;
    width: min(90%, 1140px);
    margin:50px auto 20px;
    height: 100%;
    display: flex;
    align-items: end;

}

.box3 .contant .text-box {
    height: 70%;
    margin-left: 80px;
}

.box3 .contant .title {
    font-size: 16px;
    font-family: Poppins;
    font-weight: 600;
    color: var(--main-color);

}

.box3 .contant .description {
    font-family: "Open Sans";
    font-size: 36px;
    font-weight: 500;
    padding: 25px 0;
    color: var(--main-title-color);
}

.box3 .contant .start-btn {
    width: 185px;
    height: 40px;
    color: var(--main-color);
    background-color: var(--color-item-third);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

/*cours*/
.contant-cours {
    text-align: center;
}

.data-page-cours {
    display: flex;
    align-items: center;
    padding-top: 100px;
    flex-direction: column;
    height: 100%;

}

.data-page-cours .title {
    font-family: poppins;
    font-size: 42px;
    padding-right: 50px;
    color: var(--main-color);
    position: relative;
    text-align: center;
}

.font_family_GreatVibes {
    font-family: GreatVibes !important;
}

.data-page-cours .description {
    font-size: 18px;
    font-weight: 100;
    line-height: 32px;
    letter-spacing: .3px;
    color: var(--second-color);
    font-family: "Open Sans";
    width: min(900px, 90%);
    text-align: center;
    padding-top: 20px;
}

.img-cours {
    width: 100%;
    height: 500px;
    border-radius: 5px;
    object-fit: cover;
    /*margin: auto;*/
    /*margin-top: -162px;*/
    /*margin-right: 8%;*/
}

.all-texts-box {
    width: min(1140px, 95%);
    margin: -160px 19.5% auto auto;
    padding-left: 50px;
}

.all-texts-box .img-box {
    position: relative;

}

.info-cours {
    width: 317px;
    margin: auto;
    position: absolute;
    top: 75px;
    right: 130px;
}

.contant-cours .box-parent {
    position: relative;
}
.info-cours .header-cours.oldPrice{
    font-size: 16px !important;
    height: auto !important;
    padding: 20px 0 0px !important;
    text-decoration: line-through !important;
}
.info-cours .header-cours {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    background-color: var(--color-item-third);
    font-size: 35px;
    font-weight: 600;
    font-family: Poppins;
}

.info-cours .body-box {
    padding: 30px;
    border: 1px solid #e6e6e6;
    box-shadow: 12.9px 15.3px 18px 0 rgba(0, 0, 0, .08);
    background-color: var(--main-color);
}

.info-cours .body-box .btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    background-color: var(--color-item-third);
    font-size: 16px;
    height: 45px;
    width: 100%;
    font-family: "Open Sans";
    margin: 0px 0 20px;
    border-radius: 22px;
    cursor: pointer;
}

.includes-box {
    padding: 30px 0;
    border-top: 1px solid #e6e6e6;

}

.includes-box .title {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: left;
    color: var(--main-title-color);
    display: block;

}

.include-items {
    text-align: left;
    color: var(--main-title-color);
}

.include-items li {
    list-style: none;
    font-size: 16px;
    font-family: "Open Sans";
    padding: 5px 0;
    color: var(--main-des-color);
    font-weight: 300;
}

.include-items li i {
    margin-right: 7px;

}

.includes-box .link {
    font-family: "Open Sans";
    font-size: 15px;
    color: var(--color-item-third);
    padding: 20px 0;
    font-weight: 300;
    display: block;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
}

.messenger {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.messenger li {
    list-style: none;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    opacity: 0.5;
    font-size: 21px;
    cursor: pointer;
}

.messenger li:hover {
    background-color: var(--color-item-third);
    color: var(--main-color);
}

.messenger li:hover a {
    color: var(--main-color);
}

.footer-img {
    margin: auto;
    display: flex;
    position: absolute;
    bottom: 4px;
}

.footer-img .data-box {
    padding: 10px 30px;
    background-color: var(--color-item-third);
    color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Open Sans";
    width: fit-content;
    flex-direction: column;

}

.footer-img .data-box span {
    font-size: 35px;
}

.footer-img .play-box {
    padding: 10px 25px;
    background-color: var(--main-title-color);
    color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Open Sans";
    width: fit-content;
    flex-direction: column;

}

.footer-img .play-box .icon-box {
    border-radius: 30px;
    border: 2px solid var(--main-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;

}

.footer-img .play-box:hover .icon-box {
    border-color: var(--color-item-third);
}

.footer-img .play-box .icon-box:hover {
    /*transform: scale(0.8);*/
    animation: play 0.5s;
}

@keyframes play {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

.info-video {
    width: min(846px, 90%);
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 40px;

}

.info-video .teacher {
    display: flex;

}

.info-video .teacher img {
    width: 60px;
    border-radius: 50%;
    height: 60px;

}

.info-video .review .text {
    border-right: none !important;
}

.info-video .text {
    display: flex;
    flex-direction: column;
    padding: 0px 30px 0 20px;
    text-align: left;
    border-right: 1px solid #e6e6e6;
    margin-top: 15px;
}

.info-video .text .title {
    font-size: 16px;
    font-family: "Open Sans";
    color: var(--main-des-color);
    padding-bottom: 5px;
}

.info-video .text .name {
    font-size: 16px;
    font-family: "Open Sans";
    color: var(--main-title-color);
}

.info-video .star-box i {
    color: #ffbf25 !important;
    font-size: 12px;
}

.all-texts-box .description-box {
    width: min(846px, 90%);
}

.all-texts-box .description-box span {
    font-size: 20px;
    font-family: Poppins;
    margin-bottom: 8px;
    color: var(--main-title-color);
    font-weight: 600;
    display: block;
    text-align: left;
}

.all-texts-box .description-box p {
    font-size: 18px;
    font-family: "Open Sans";
    margin-bottom: 8px;
    color: var(--main-des-color);
    font-weight: 300;
    text-align: left;
    line-height: 31px;
}

.all-texts-box .description-box li {
    list-style: none;
    font-size: 18px;
    font-family: "Open Sans";
    color: var(--main-des-color);
    font-weight: 300;
    text-align: left;
    line-height: 31px;
}

.all-texts-box .description-box li:before {
    content: "*";
    margin-right: 5px;
    color: var(--color-item-third);
}

.acordian-pareent {
    margin: 50px 0;
    width: min(846px, 90%);
}

.acordian-pareent .header-box {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border: 1px solid #e6e6e6;
    border-radius: 5px 5px 0 0;
}

.acordian-pareent .header-box span {
    font-family: Poppins;
    font-size: 25px;
    font-weight: 400;
}

.acordian-pareent .search-box {
    border: 1px solid #e6e6e6;
    border-radius: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 250px;
}

.acordian-pareent .search-box input {
    border: none;
    width: 90%;
    border-radius: 22px;
}

.acordian-pareent .search-box input:focus-visible {
    border: none;
    outline: none;
}

.acordian-pareent .search-box input::-webkit-input-placeholder {
    font-style: italic;
    font-size: 16px;
    color: var(--main-des-color);
}

.acordian-pareent .search-box i {
    color: var(--main-des-color);
}

.acordian-pareent .section-box {

    border-top: none !important;
    border: 1px solid #e6e6e6;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.acordian-pareent .section-box:last-child {
    border-radius: 0px 0px 5px 5px;
}

.acordian-pareent .section-box .title-box {
    display: flex;
    align-items: center;
    padding: 25px 20px 25px;
    cursor: pointer;

}

.acordian-pareent .section-box .title-box .title {
    font-family: Poppins;
    font-size: 18px;
    color: var(--main-title-color);
    font-weight: 600;
    padding-bottom: 10px;
}

.acordian-pareent .section-box .title-box .description {
    font-family: Poppins;
    font-size: 16px;
    color: var(--main-title-color);
    font-weight: 300;
}

.acordian-pareent .section-box .title-box i {
    color: var(--color-item-third);
    padding-right: 20px;
}

.acordian-pareent .section-box .title-box p {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.section-box .list-video {
    padding: 0px 20px 0;
    transition: 0.3s;
}

.section-box .list-video .item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    padding: 20px 0;
    cursor: pointer;
    flex-wrap: wrap;
    align-items: start;
    gap: 20px;
}

.section-box .list-video .item:last-child {
    border: none;
}

.section-box .list-video .item .left-box {
    display: flex;
    align-items: center;

}
.section-box .list-video .item .right-box{
    display: flex;
    gap:5px;
    align-items: center;
}
.section-box .list-video .item .description_video{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.section-box .list-video .item .left-box i {
    color: var(--color-item-third);
    padding-right: 10px;
    font-size: 18px;
}

.section-box .list-video .item .left-box span {
    color: var(--main-title-color);
    font-weight: 400;
    font-family: Poppins;
    font-size: 16.5px;
}

.section-box .list-video .item:hover .left-box span {
    color: var(--color-item-third);
}

.section-box .list-video .item .right-box .btn {
    color: var(--main-color);
    padding: 3px 10px;
    background-color: var(--lightblue);
    border-radius: 3px;
    margin: 0 5px;
    font-size: 14px;
    font-family: Poppins;
}

.section-box .list-video .item .right-box p {
    font-family: "Open Sans";
    font-size: 14px;
    color: var(--main-des-color);
    margin: 0 10px;
    font-weight: 300;
}
.section-box .list-video .item .right-box i{
    font-size: 20px;
}
.section-box .list-video .item .right-box span {
    width: 30px;
    height: 30px;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-box .list-video .item .right-box span i {
    color: var(--main-p-color);

}

.section-box .list-video .item .right-box .disabeld {
    opacity: 0.5;
}

.all-texts-box .instructor-box {
    width: min(846px, 90%);
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 0 30px;
    margin-bottom: 30px;
}

.instructor-box .main-title {
    border-bottom: 1px solid #e6e6e6;
    padding: 20px 0;
    font-weight: 400;
    font-size: 24px;
    font-family: Poppins;
    text-align: left;
}

.instructor-box .body-instructor {
    display: flex;
    padding: 30px 0 70px;

}

.instructor-box .body-instructor img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.instructor-box .body-instructor .right-box {
    padding-left: 20px;
    text-align: left;
}

.instructor-box .body-instructor .right-box .title {
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 400;
    display: block;
    padding-bottom: 10px;
}

.instructor-box .body-instructor .right-box .job {
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 300;
    display: block;
    padding-bottom: 50px;
}

.instructor-box .body-instructor .right-box p {
    font-size: 16px;
    font-family: "Open Sans";
    position: relative;
    color: var(--main-des-color);
    font-weight: 300;
    padding-bottom: 30px;
}

.instructor-box .body-instructor .right-box p:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 35px;
    height: 1px;
    background-color: #202121;
    text-align: left;
}

.instructor-box .body-instructor .right-box ul {
    padding-left: 30px;
}

.instructor-box .body-instructor .right-box ul li {
    font-size: 16px;
    font-family: "Open Sans";
    color: var(--main-des-color);
    font-weight: 300;

}

.all-texts-box .rating-box {
    width: min(846px, 90%);
    padding: 40px 30px;
    border: 1px solid #e6e6e6;

    margin-bottom: 50px;
}
.all-texts-box .rating-box .top_box{
    display: flex;
    width: 100%;
}
.all-texts-box .rating-box .writeReview{
    display: inline-block;
    padding: 0 35px;
    min-height: 44px;
    cursor: pointer;
    border: none;
    bottom: 140px;
    color: var(--main-color);
    font-size: 16px;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-transition: .3s ease-in-out;
    -khtml-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

    background-color: var(--twiter-color);
}
.all-texts-box .rating-box .writeReview:hover{
    opacity: 0.8;
}
.all-texts-box .rating-box .left-box {
    width: 200px;
    height: 180px;
    border: 3px solid var(--color-item-third);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 30px;
}

.all-texts-box .rating-box .left-box .rate {
    font-family: "Open Sans";
    font-size: 75px;
    font-weight: bold;
    color: var(--color-item-third);
}

.all-texts-box .rating-box .left-box .star-box {
    padding-bottom: 5px;
}

.all-texts-box .rating-box .left-box .star-box i {
    color: #ffb606;
    font-size: 14px;
}

.all-texts-box .rating-box .left-box .count-rate {
    font-family: "Open Sans";
    font-size: 16px;
    color: var(--main-p-color);
}

.rating-box .right-box {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rating-box .right-box .statistics {
    display: flex;
    width: 100%;
    align-items: center;
}
.rating-box .buttons_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}
.rating-box .buttons_box .showComments{
    font-size: 26px;
    outline: 0;
    cursor: pointer;
    height: 44px;
    width: 44px;
    line-height: 44px;
    border: none;
    color: var(--main-color);
    background-color: var(--twiter-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}
.rating-box .right-box .statistics .count-star {
    font-size: 18px;
    font-family: "Open Sans";
    color: var(--main-title-color);
    font-weight: 400;
    padding-right: 10px;
}
.rating-box .parentReviews{
    margin-top: 30px;
    font-family: "poppins";
}
.rating-box .parentReviews .title{
    font-size: 25px;
    text-align: left;
    font-weight: 300;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--second-color);
}
.rating-box .parentReviews .boxReviews{
    display: flex;
    gap: 25px;
    /*margin-top: 30px;*/
    padding: 20px;
}
.rating-box .parentReviews .boxReviews:not(:last-child){
    border-bottom: 1px solid var(--second-color);
}
.rating-box .parentReviews .boxReviews img{
    object-fit: contain;
    width: 85px;
}
.rating-box .parentReviews .boxReviews .review{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: start;
}
.rating-box .right-box .statistics .chart {
    width: 75%;
    height: 10px;
    border-radius: 22px;
    background-color: #e6e6e6;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.rating-box .right-box .statistics .chart .gold-box {
    background-color: #ffb606;
    height: 8px;
    border-radius: 22px;
}

.rating-box .right-box .statistics .percent {
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 300;
    color: var(--color-item-third);
}

.related-courses {
    width: min(846px, 90%);
    position: relative;

}

.related-courses .header-box {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    font-family: Poppins;
    font-size: 30px;
    text-align: left;
    font-weight: 400;
    position: relative;
}

.related-courses .swiper {
    padding: 40px 0;
}

.related-courses .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

}

.related-courses .img-box {

    width: 100%;
    overflow: hidden;
    height: 150px;
    position: relative;

}

.related-courses .img-box img {
    width: 100%;
    transition: .5s ease-in-out;
    height: 100%;
    object-fit: cover;
}

.related-courses .img-box .text-img {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    align-items: center;
}

.related-courses .img-box .star-box {
    display: flex;
    padding-right: 15px;

}

.related-courses .img-box .star-box i {
    padding: 0 3px;
    font-size: 12px;
}

.related-courses .img-box .price {
    background-color: var(--main-color);
    color: var(--color-item-third);
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: Poppins;
    font-weight: 600;
}

.related-courses .card-cours {
    width: 100%;
}

.related-courses .card-cours .text {
    padding: 20px 30px;
}

.contant-cours .card-cours .text span {
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 400;
    color: var(--main-text-color);
    text-align: left;
    transition: .3s;
    display: block;
    line-height: 24px;
}

.related-courses .swiper-button-next:after, .related-courses .swiper-button-prev:after {
    font-size: 14px;
    color: var(--main-des-color);
}

.related-courses .swiper-button-prev {
    right: 60px !important;
    left: unset !important;
}

.related-courses .swiper-button-next, .related-courses .swiper-button-prev {
    width: 35px;
    height: 35px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
}

.related-courses .card-cours .text-img .price .main-price {
    color: var(--main-des-color);
    font-size: 14px;
    font-family: "Open Sans";
    font-weight: 300;
    text-decoration: line-through;
    padding-left: 8px;;
}

.footer-fixed {
    position: sticky;
    bottom: -60px;
    width: 100%;
    background-color: var(--main-color);
    padding: 8px 20px;
    z-index: 100;
    transition: 0.5s;
    box-shadow: 0 3px 6px 2px rgba(42, 42, 42, .4);
}

.footer-fixed .content-box {
    width: min(95%, 1140px);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-fixed .content-box ul {
    display: flex;
    list-style: none;
}

.footer-fixed .content-box ul li {
    padding: 0 20px;
    font-family: "Open Sans";
    font-size: 15px;
    color: var(--main-p-color);
}

.footer-fixed .content-box .right-box {
    display: flex;
    align-items: center;
}

.footer-fixed .content-box .right-box span {
    font-family: "Open Sans";
    font-size: 26px;
    font-weight: 800;
    color: #2b902e;
    padding-right: 20px;
}
.footer-fixed .content-box .right-box .oldPrice{
    font-size: 18px !important;
    height: auto !important;
    color: var(--main-p-color);
    text-decoration: line-through !important;
}
.footer-fixed .content-box .right-box .start-btn a {
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    height: 45px;
    padding: 0 35px;
    border-radius: 22px;
    background-color: var(--color-item-third);
    display: flex;
    align-items: center;
    color: var(--main-color);
    cursor: pointer;
}

.footer-fixed .content-box .right-box .start-btn {
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    height: 45px;
    padding: 0 35px;
    border-radius: 22px;
    background-color: var(--color-item-third);
    display: flex;
    align-items: center;
    color: var(--main-color);
    cursor: pointer;
}

.close {

    opacity: 0;
    display: none;
}

/*about page*/
.wrapper-boxes {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 70px 0 0;
}

.wrapper-boxes .box .image img {
    display: flex;
    max-width: 100%;
    border-style: none;
    vertical-align: middle;
    height: auto;
}


.wrapper-boxes .box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.wrapper-boxes .box:nth-child(even) {
    flex-direction: row-reverse;
}

.wrapper-boxes .box:nth-child(even) .image .number {
    left: 30px;
    right: unset;
}

.wrapper-boxes .box .image {
    position: relative;
    padding-right: 0;
    padding-left: 0;
    width: 50%;
    display: flex;
}

.wrapper-boxes .box .image .number {
    position: absolute;
    font-size: 120px;
    top: 30px;
    right: 30px;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Open Sans";
    transition: .25s ease-in;

}

.wrapper-boxes .box:hover .image .number {
    color: white;
    transform: translateY(5px);
}

.wrapper-boxes .box .content img {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-filter: blur(10px) grayscale(1) opacity(.1);
    filter: blur(10px) grayscale(1) opacity(.15);
}

.wrapper-boxes .leftp-rightc .content {
    justify-content: start;

}

.wrapper-boxes .box .content {
    display: flex;
    width: 50%;
    min-height: 1px;
    padding-right: 0;
    padding-left: 0;
    position: relative;

}


.wrapper-boxes .box .content .text-content {
    right: 0;
    padding-left: 45px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    width: 95%;
    height: auto;
    margin-top: 30px;
    max-width: 600px;

}


.wrapper-boxes .box .content .text-content h3 {
    font-size: 42px;
    font-weight: 500;
    letter-spacing: .8px;
    margin-bottom: 0;
    font-family: Poppins;
    color: var(--font_title-color);
}

.wrapper-boxes .box .content .text-content p {
    color: var(--font_paragragh-color);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: .3px;
    font-family: "Open Sans"
}

.wrapper-boxes .box .content-main-text {
    position: relative;
    margin-top: 20px;
}

.wrapper-boxes .box .content-main-text:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 50px;
    height: 1px;
    background-color: #202121;
    text-align: left;
}

.main-wrapper-boxes .main-title-boxes {
}

.main-wrapper-boxes .main-title-boxes #tittle-box {
    font-size: 44px;
    font-weight: 400;
    line-height: 46px;
    margin-bottom: 20px;
    margin-top: 40px;
    font-family: Poppins;
}

.main-title-boxes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    margin-bottom: 50px;
}

.main-wrapper-boxes .main-title-boxes #paragragh-box {
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    margin-bottom: 5px;
    color: #7e7e7e;
    width: 100%;
    letter-spacing: 0px;
    text-transform: none;
    font-family: "Open Sans";
}

.main-wrapper-boxes .list-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px;
}

.main-wrapper-boxes .list-boxes .wrapper-box .card-box .text-card p {
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    color: var(--main-des-color);
    font-family: "Open Sans";
    margin: 0px;
    padding-top: 10px;
}

.main-wrapper-boxes .list-boxes .wrapper-box .card-box i {
    font-size: 50px;
    line-height: 62px;
    text-align: center;
    color: var(--color-item-third);
}

.main-wrapper-boxes .list-boxes .wrapper-box .card-box .text-card {
    padding: 0 30px;
    width: calc(100% - 89px);
}

.main-wrapper-boxes .list-boxes .wrapper-box .card-box:hover h3 {
    color: var(--color-item-third);
}

.main-wrapper-boxes .list-boxes .wrapper-box .card-box h3 {
    margin-top: 0px;
    font-size: 18px;
    font-family: Poppins;
    font-weight: 400;
}

.main-wrapper-boxes .list-boxes .wrapper-box .card-box {

    display: flex;
    justify-content: center;

}

.main-wrapper-boxes .list-boxes .card-box .icon {
    width: 89px;
    height: 89px;
    line-height: 89px;
    border-radius: 50%;
    font-size: 62px;
    min-width: 89px;
    float: left;
    text-align: center;
    position: relative;
}

.main-wrapper-boxes .list-boxes {
    width: min(1170px, 95%);
    display: flex;
    transition: opacity .5s ease;
    overflow: hidden;
    position: relative;
    margin: auto;
    padding-bottom: 100px;

}

/* /////////////////// */

.main-wrapper-boxes .list-boxes .wrapper-box {
    width: 32%;
}

.overDeveloper {
    height: 900px;
    position: absolute;
    background-color: rgba(10, 10, 10, 0.55);
    z-index: 5;
    width: 100%;
    top: 0;
}

.about-contant .swiper {
    position: relative;
    z-index: 10;
    width: min(1140px, 95%);
    padding: 200px 0 100px;
}

.about-contant .call-box {
    width: min(710px, 70%);
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    margin: auto;
    padding: 0 40px;
}

.about-contant .parent-btn {
    display: flex;
    justify-content: center;
    width: min(710px, 70%);
    margin: auto;
    padding-right: 40px;
}

.about-contant .call-box a {
    width: 86px;
    height: 86px;
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--main-color);
}

.about-contant .call-box div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.about-contant .call-box a i {
    color: var(--main-color);
    font-size: 30px;

}

.about-contant .call-box span {
    font-size: 16px;
    font-family: "Open Sans";
    color: var(--main-color);
    padding: 20px 0 0;
    display: flex;
}

.about-contant .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.about-contant .swiper-slide .title {
    font-size: 42px;
    font-family: Poppins;
    color: var(--main-color);
    padding-bottom: 30px;
}

.about-contant .swiper-slide .description {
    font-size: 18px;
    font-family: "Open Sans";
    color: var(--main-color);
    font-weight: 300;
    line-height: 26px;
    width: 80%;
    margin: auto;
}

.about-contant .talk-btn {
    width: 143px;
    border-radius: 22px;
    background-color: var(--color-item-third);
    color: var(--main-color);
    position: relative;
    z-index: 10;
    margin: 50px auto 0;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: "Open Sans";
    cursor: pointer;

}

.about-contant .talk-btn:hover {
    background-color: rgba(96, 211, 198, 0.8);
}

.about-contant .swiper-pagination {
    margin-top: 100px;
    height: fit-content;
}

.about-contant .swiper-wrapper {
    padding-top: 100px;
}

.about-contant .swiper-button-next, .about-contant .swiper-button-prev {
    color: var(--main-color);
    opacity: 0.7;
}

.about-contant .swiper-pagination .swiper-pagination-bullet {
    width: 120px;
    height: 120px;
    display: none;
    position: relative;
    z-index: 10;
    border: 2px solid var(--main-color);
    transition: 0.8s;
    margin: -24px !important;
}

.about-contant .swiper-pagination .swiper-pagination-bullet-active {
    display: inline-block !important;
    z-index: 11;
    margin: -24px !important;
    transform: scale(1.15);
}

.about-contant .data-page .all-courses-btn {
    background-color: var(--main-color);
    color: var(--main-p-color);
    font-weight: 300;
    font-size: 16px;
}

.about-contant .data-page .all-courses-btn .about-span {
    color: var(--color-item-third);
    padding-left: 5px;

}

/* contact */
.contant-contact .blue-box {
    background-color: var(--blue-color);
    padding: 105px 20px;

    box-sizing: content-box;
}

.contant-contact .blue-box .icons-box {
    display: flex;
    justify-content: space-around;
    width: min(90%, 1140px);
    margin: auto;
    gap: 0 50px;
}

.contant-contact .blue-box .icons-box div {
    display: flex;
    align-items: center;
    height: 100%;
    flex-direction: column;
    flex: 1;
    transition: 0.3s;
    cursor: pointer;
}

.contant-contact .blue-box .icons-box .circle {
    width: 200px;
    height: 200px;
    border: 2px solid var(--main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    font-size: 60px;
    transition: 0.1s;
    margin-bottom: 30px;
}

.contant-contact .blue-box .icons-box .title {
    font-family: Poppins;
    color: var(--main-color);
    font-size: 18px;
    font-weight: 600;
    width: 250px;
    text-align: center;
}

.contant-contact .blue-box .icons-box .description {
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 300;
    color: var(--main-color);
    text-align: center;
    line-height: 26px;
    overflow-wrap: break-word;
    margin: 20px 0 0;
    width: 250px;
    text-align: center;
}

.contant-contact .blue-box .icons-box div:hover .circle {
    border-width: 5px;
}

.contant-contact .swiper-parent-contact {
    display: flex;
    width: min(90%, 1140px);
    margin: auto;
    align-items: center;
    gap: 0 50px;
    margin-top: 100px;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6
}

.contant-contact .swiper-parent-contact .img-box {
    display: flex;
}

.contant-contact .swiper-parent-contact .swiper-slide {
    font-family: 'Poppins';
    font-size: 22px;
    font-style: italic;
    line-height: 1.8;
    letter-spacing: -0.5px;
    text-align: left;
    /* margin-bottom: 24px; */
    padding-bottom: 40px;
}

.contant-contact .swiper-parent-contact .back-swiper-contact {
    width: 40%;
    position: relative;
}

.contant-contact .swiper-parent-contact .back-swiper-contact:before {
    /*content: "‘‘";*/
    font-family: Arial;
    font-size: 160px;
    text-align: left;
    position: absolute;
    top: 58px;
    left: -80px;
    letter-spacing: -13px;
    color: var(--color-item-third);
    z-index: 100;
}

.contant-contact .swiper-parent-contact .img-box {
    width: 50%;
}

.contant-contact .swiper-parent-contact .img-box img {
    width: 100%;
}

.contant-contact .swiper-pagination {
    text-align: left;
}

.contant-contact .swiper-pagination span {
    background-color: var(--color-item-third);
}

.contant-contact .message-box {
    padding: 80px 0;
    width: min(90%, 1140px);
    margin: auto;
}

.contant-contact .message-box .title {
    font-size: 44px;
    font-family: Poppins;
    font-weight: 400;
    text-align: center;
    display: block;
    color: var(--main-title-color);
}

.contant-contact .message-box .description {
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--main-des-color);
    padding: 10px 0;
    letter-spacing: normal;
    line-height: 25px;
    position: relative;
}

.contant-contact .message-box .description:after {
    content: "";

    width: 80px;
    border-top: 1px solid var(--main-p-color);
    position: absolute;
    right: 50%;
    transform: translate(50%, 0px);
    bottom: -10px;
}

.contant-contact .inpus-box {
    display: flex;
    gap: 0 40px;
    margin-top: 50px;
}

.contant-contact .inpus-box input {
    height: 45px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 0 20px;
    flex: 1;
    cursor: auto;
}

.contant-contact .inpus-box input:hover {
    border-color: var(--color-item-third);
}

.contant-contact .inpus-box input:focus-visible {
    border-color: var(--color-item-third);
    outline: none;
}

.contant-contact .message-box textarea {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #e6e6e6;
    padding: 20px;
    resize: vertical;
}

.contant-contact .message-box textarea:hover, .contant-contact .message-box textarea:focus-visible {
    border-color: var(--color-item-third);
    outline: none;
}

.contant-contact .inpus-box input::-webkit-input-placeholder, .contant-contact .message-box textarea::-webkit-input-placeholder {
    font-family: sans-serif;
    font-style: italic;
    font-size: 16px;
}

.contant-contact .message-box .btn-send {
    padding: 5px;
    width: 320px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-item-third);
    color: var(--main-color);
    font-size: 16px;
    font-family: sans-serif;
    margin: 30px auto;
    border-radius: 30px;
}

/*blogs*/
.box-blog {
    margin-bottom: 70px;
    border-bottom: 1px solid #e6e6e6;
}

.blogs-box {
    width: min(95%, 1140px);
    margin: auto;
    display: flex;
    margin-top: 100px;
    position: relative;
}

.blogs-box .left-box {
    width: min(75%, 855px);
    padding: 0 15px;
    box-sizing: border-box;
}

.img-blog {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.img-blog img {
    width: 100%;
    transition: 0.5s;
}

.blogs-box .img-blog img:hover {
    transform: scale(1.1);
}

.img-blog .entry-date {
    position: absolute;
    bottom: 0;
    padding: 10px 30px;
    color: var(--color-item-third);
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
}

.img-blog .entry-day {
    font-family: "Open Sans";
    font-size: 35px;
}

.img-blog .entry-mounth {
    font-family: "Open Sans";
    font-size: 18px;
}

.blogs-box .content {
    padding-left: 30px;
    margin-bottom: 50px;
}

.blogs-box .content h1 {
    font-size: 32px;
    font-family: Poppins;
    padding-top: 40px;
    font-weight: 500;
    color: var(--main-title-color);

}

.blogs-box .content .tages a {
    font-weight: 300;
    font-family: "Open Sans";
    font-size: 16px;
    color: var(--main-paragragh-color-text);
    padding-top: 10px;
    display: inline-block;
}

.blogs-box .content .description {

    font-family: "Open Sans";
    font-size: 16px;
    color: var(--main-paragragh-color-text);
    padding-top: 20px;
    font-weight: 300;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.box-blog .content button:hover {
    background: var(--color-item-third);
    color: white;
}

.box-blog .content button {
    padding: 10px 30px;
    border-radius: 30px;
    border: 1px solid var(--color-item-third);
    color: var(--color-item-third);
    background: white;
    font-size: 14px;
    letter-spacing: .3px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.blogs-box .asid-box {
    width: min(285px, 25%);
    padding: 0px 15px 0;
    box-sizing: border-box;
    height: fit-content;
    position: sticky;
    bottom: 50px;
    align-self: flex-end;
}

.blogs-box .asid-box > .div {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.blogs-box .asid-box .title-box {
    font-size: 18px;
    font-family: Poppins;
    font-weight: 600;
    position: relative;
    margin-bottom: 20px;
}

.blogs-box .asid-box .title-box::after {
    content: "";
    border-bottom: solid 2px #000;
    position: absolute;
    top: 31px;
    left: 0;
    width: 35px;
}

.blogs-box .asid-box > .div a {
    font-size: 16px;
    font-family: "Open Sans";
    font-weight: 300;
    height: 37px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.blogs-box .asid-box > .div a:hover {
    color: var(--color-item-third);
}

.blogs-box .asid-box .last-cours {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-bottom: 25px;
}

.blogs-box .asid-box .last-cours .box-img {
    width: 109px;
    height: 109px;

}

.blogs-box .asid-box .last-cours .box-img img {
    width: 109px;
    height: 109px;
    object-fit: cover;
}

.blogs-box .asid-box .last-cours .title {
    font-size: 16px;
    font-family: Poppins;
    font-weight: 400;
    line-height: 22px;
}

.blogs-box .asid-box .last-cours .price {
    font-size: 16px;
    font-family: "Open Sans";
    font-weight: 400;
    color: var(--color-item-third);
    margin-top: 8px;
    display: block;
}

.blogs-box .asid-box .last-cours .date {
    font-size: 14px;
    font-family: "Open Sans";
    font-width: 300;
    color: var(--main-des-color);
}

.blogs-box .asid-box .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--second-color);
    padding: 5px;
    margin-bottom: 65px;
}

.blogs-box .asid-box .input-search {
    border: none;
    width: 100%;
}

.blogs-box .asid-box .input-search::-webkit-input-placeholder {
    font-size: 16px;
    font-style: italic;
    color: var(--main-paragragh-color-text);
}

.blogs-box .asid-box .input-search:focus-visible {
    outline: none;
}

.blogs-box .asid-box .search-box i {
    color: var(--main-p-color);
}

.blogs-box .asid-box .swiper-slide {
    font-family: times new roman;
    font-size: 20px;
    font-style: italic;
    line-height: 1.46;
    letter-spacing: .5px;
    text-align: left;
    margin-bottom: 24px;
    padding-bottom: 40px;
    background-color: var(--second-color);
    padding: 30px 20px 100px;
    color: var(--main-title-color);
}

.blogs-box .asid-box .back-swiper-blog {

    position: relative;
}

.blogs-box .asid-box .back-swiper-blog:before {
    content: "‘‘";
    font-family: Arial;
    font-size: 120px;
    text-align: left;
    position: absolute;
    top: -40px;
    height: 50px;
    left: 20px;
    letter-spacing: -8px;
    color: var(--color-item-third);
    z-index: 100;
}

.blogs-box .asid-box .swiper-pagination {
    bottom: 50px;
}

.blogs-box .asid-box .swiper-pagination span {
    background-color: var(--color-item-third);
}

.contant-blogs .box3 .question {
    font-family: TimesNewRomanPS-MT;
    font-size: 36px;
    color: var(--main-color);
    font-style: italic;
    text-wrap: nowrap;
    font-weight: 600;
    padding-bottom: 20px;
}

.contant-blogs .box3 .answer {
    font-family: "Open Sans";
    font-size: 20px;
    color: var(--main-color);
    font-weight: 300;
    padding-bottom: 60px;
}

.contant-blogs .box3 .start-btn {
    border-radius: 22px;
}

/*blog*/
.contant-blog .blog-box {
    width: min(1024px, 100%);
    margin: 100px auto 0;
}

.blog-box .title {
    font-size: 42px;
    font-weight: 500;
    letter-spacing: .8px;
    text-align: center;
    line-height: normal;
    margin-bottom: 5px;
    font-family: Poppins;
    text-align: center;
    display: block;
}

.blog-box .links {
    font-size: 16px;
    line-height: 22px;
    color: #878787;
    letter-spacing: .3px;
    margin-bottom: 50px;
    text-align: center;
    font-family: "Open Sans";
    font-weight: 300;
}

.blog-box .links a {
    color: var(--main-paragragh-color-text);
}

.des-img-box {
    display: flex;
    justify-content: space-between;
}

.des-img-box .p-box {
    width: min(85%, 855px);
    padding: 20px 20px 0 0;
}

.des-img-box .share-box {
    width: min(15%, 169px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    top: 100px;
    align-self: start;
    margin: 20px 0;
}

.des-img-box .p-box .part {
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: 300;
    color: var(--main-paragragh-color-text);
    padding-bottom: 50px;

}

.des-img-box blockquote {
    position: relative;
    padding-bottom: 50px;
}

.des-img-box blockquote p {
    font-family: times new roman;
    font-size: 24px;
    color: var(--main-title-color);
    font-style: italic;
    line-height: 30px;
}

.des-img-box blockquote:before {
    content: "‘‘";
    font-family: Arial;
    font-size: 120px;
    position: absolute;
    letter-spacing: -10px;
    font-style: normal;
    left: -50px;
    top: -25px;
    color: var(--color-item-third);
}

.des-img-box .p-box .title {
    font-family: Poppins;
    font-size: 30px;
    font-weight: 300;
    color: var(--main-title-color);
    text-align: left;
}

.des-img-box .img-gilr-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.des-img-box .girl-img {
    width: 75%;
    margin: auto;
}

.blog-box .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.blog-box .tooltip .tooltiptext {
    visibility: hidden;
    width: fit-content;
    background-color: var(--main-color);
    color: var(--main-title-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    left: 50px;
    /* Position the tooltip */
    position: absolute;
    z-index: 100;
    font-size: 12px;
    border: 1px solid var(--main-paragragh-color-text);
}

.blog-box .tooltip:hover .tooltiptext {
    visibility: visible;
}

.blog-box .share-box p {
    width: 50px;
    height: 50px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    margin: 10px 0;
    color: var(--main-paragragh-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.blog-box .share-box p:hover {
    opacity: 1;
    background-color: var(--color-item-third);
    color: var(--main-color);
}

.blog-box .share-box span {
    font-size: 16px;
    font-family: "Open Sans";
    font-weight: 300;
    color: var(--main-paragragh-color-text);
}

.blog-box .tags-box {
    display: flex;
    gap: 0 20px;
    margin-bottom: 20px;
}

.blog-box .tags-box .tag:not(.tags-label) {
    font-style: italic;
}

.blog-box .tags-box .tag {
    border: 1px solid #e6e6e6;
    border-radius: 22px;
    padding: 10px 30px;
    cursor: pointer;
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: 300;
    transition: 0.3s;

}

.blog-box .tags-box .tag:not(.tags-label):hover {
    background-color: var(--color-item-third);
    color: var(--main-color);
}

.blog-box .next-prev {
    width: 100%;
    display: flex;
    margin: 100px 0 30px;
}

.blog-box .next-prev > div {
    border: 1px solid #e6e6e6;
    padding: 20px;
}

.blog-box .next-prev .prev-box {
    text-align: right;
    width: 50%;
    padding: 30px 20px;
}

.blog-box .next-prev .next-box {
    text-align: left;
    width: 50%;
    padding: 30px 20px;
}

.blog-box .next-prev > div > span {
    color: var(--main-paragragh-color-text);
    font-family: "Open Sans";
    font-size: 16px;
    padding-bottom: 10px;
    font-weight: 300;
}

.blog-box .next-prev > div .center-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-box .next-prev .next-box .center-box {
    flex-direction: row-reverse;
}

.blog-box .next-prev > div .center-box span {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 20px;
    color: var(--main-paragragh-color-text);
    transition: 0.3s;
    cursor: pointer;
}

.blog-box .next-prev > div .center-box p {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 400;
    transition: 0.3s;
    cursor: pointer;
}

.blog-box .next-prev > div .center-box p:hover {
    color: var(--color-item-third);
}

.blog-box .next-prev > div .center-box span:hover {
    background-color: var(--color-item-third);
    color: var(--main-color);
}

.blog-box .img-box .entry-date {

    padding: 0px 25px;
    color: var(--color-item-third);
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
}

.blog-box .img-box .entry-day {
    font-family: "Open Sans";
    font-size: 20px;
}

.blog-box .img-box .entry-mounth {
    font-family: "Open Sans";
    font-size: 14px;
}

/*login*/
.login-container {
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-form {
    background: var(--main-color);
    border-radius: 15px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    width: min(620px, 90%);
    display: flex;
    direction: ltr;
}

.login-info {
    padding: 30px;
    width: 70%;
}

.login-logo {
    background: var(--blue-color);
    width: 30%;
    border-radius: 15px 0px 0px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: var(--main-color);
}

.login-container .input_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--input-color);
    padding: 10px 15px;
    width: auto;
    border-radius: 5px;
    margin: 10px 0 20px;
}

.login-form h1 {
    font-weight: 600;
    font-size: 22px;
    color: var(--color1);
    margin-bottom: 30px;
    font-family: Poppins;
}

.login-logo img {
    max-width: 100px;
}

.login-form input {
    background: transparent;
    display: block;
    width: 80%;
    max-width: 100%;
    border-radius: 5px;

    border: none;
}

.login-form input:focus-visible {
    outline: none;
}

.login-form input[type=number],
.login-form input[type=password] {
    direction: ltr;
}

.login-form .header-login {
    display: flex;
    justify-content: space-between;
}

a.back-btn {
    background: #4053ba21;
    color: var(--main-paragragh-color-text);
    display: block;
    padding: 5px 20px;
    border-radius: 5px;
    transition: 0.3s all;
    font-size: 14px;
    font-family: "Open Sans";
    height: fit-content;
}

.forget-password {
    font-family: "Open Sans";
    color: var(--main-paragragh-color-text);
    font-size: 13px;
}

a.back-btn:hover {
    background: var(--color-item-third);
    color: var(--main-color);
}

.login-form button {
    background: var(--color-item-fourth);
    color: var(--main-color);
    display: block;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 18px;
    font-size: 14px;
    margin-top: 50px;
    transition: 0.3s all;
    border: none;
}

.login-form button:hover {
    background: var(--color-item-third);

}

.icon-input {
    position: relative;
    font-family: "Open Sans";
}

.icon-input label {
    font-size: 14px;
}

.icon-input i {
    font-size: 18px;
    color: var(--main-paragragh-color-text);
}

.icon-input input {
    padding-left: 30px !important;
}

.login-form:before {
    content: " ";
    background: var(--main-paragragh-color-text);
    width: calc(50% - 124px);
    height: 100vh;
    left: 0;
    top: 0;
    position: fixed;
    z-index: -1;
    opacity: 0.1;
}

/* IconPicker */
.icp-header {
    position: relative;
    padding: 30px;
}

.icp-header strong {
    display: inline-block;
    position: inherit;
    z-index: 2;
    font-size: 20px;
    font-weight: bold;
    color: var(--color3);
}

button.icp-close {
    position: absolute;
    left: 30px;
    top: 30px;
    font-size: 18px;
    color: var(--color3);
}

button.icp-close:focus {
    box-shadow: none;
}

form.icp-search {
    position: absolute;
    max-width: 100%;
    left: 80px;
    top: 22px;
    width: calc(100% - 355px);
}

form.icp-search input {
    background: var(--background1);
    display: block;
    width: 100%;
    padding: 14px 50px 14px 15px;
    border-radius: 5px;
    color: var(--color1);
}

form.icp-search input::placeholder {
    color: var(--color4);
}

form.icp-search:before {
    content: "\e90a";
    position: absolute;
    font-family: 'PanelIcons';
    color: var(--color4);
    font-size: 22px;
    right: 18px;
    top: 10px;
}

.icons-categories {
    display: block;
    background: var(--background1);
    width: 250px;
    position: absolute;
    right: 0;
    top: 0;
    min-height: 500px;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 0 0 8px 0;
}

.modal-body {
    padding: 0;
}

.icons-categories button {
    display: block;
    width: 100%;
    text-align: right;
    position: relative;
    border-radius: 0 !important;
    padding: 14px 60px 14px 15px;
    color: var(--color1);
    font-size: 16px;
}

.icons-categories button i {
    position: absolute;
    font-size: 20px;
    color: var(--color3);
    right: 24px;
}

.icons-categories button.active {
    background: var(--background2) !important;
    color: var(--color1) !important;
}

.icons-categories button:hover {
    background: #ffffff5c;
    color: inherit !important;
}

.iconpicker .modal-body {
    height: 500px;
    max-height: 100%;
    padding-right: 275px;
}

.icp-header:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background: var(--background1);
    border-radius: 0 8px 0 0;
    z-index: 1;
}

.icons-categories button span {
    position: absolute;
    left: 35px;
    background: var(--primary-op);
    color: var(--primary);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 5px;
    transition: 0.3s all;
    opacity: 0;
}

.icons-categories button.active span {
    left: 15px;
    opacity: 1;
}

.icons-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 15px;
    padding-left: 30px;
    margin-top: 10px;
    overflow-y: auto;
    height: 490px;
}

i.icp-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 70px;
    border: 3px solid var(--hover2);
    border-radius: 10px;
    font-size: 28px;
    cursor: pointer;
    transition: 0.3s all;
}

i.icp-item:hover {
    border-color: var(--color4);
}

.alert {

    padding: 20px;
    background-color: var(--color-item-first);
    color: white;
    width: min(50%, 400px);
    position: fixed;
    top: 20px;
    right: -100vw;
    z-index: 1000;
    font-family: 'poppins';
    z-index: 1000;
    font-size: 16px;
    transition: 0.2s;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
.video-show{
    width: 100%;
}
@media screen and (min-width: 2200px) {
    .categoriespart {
        background-position-y: unset;
    }

    .create-account .mainpart {
        left: 30%;
    }
}

@media screen and (max-width: 1440px) {
    .searchpart {
        background-size: unset;
    }

    .categoriespart {
        background-size: unset;
    }

    .all-categories .swiper-button-next {
        right: -45px !important;
    }

    .all-categories .swiper-button-prev {
        left: -45px !important;
    }

    .skillpart {
        background-size: unset;
    }

    .create-account .mainpart {
        left: 7%;
    }
}

@media screen and (max-width: 1024px) {
    /*headerr*/
    .header .menubar {
        display: none;
    }

    .header .logo {
        margin-right: 120px;
    }

    .berger_menu {
        display: block;
    }

    /*footer*/
    .footer-container .left-part {
        background-position: unset;
        padding-top: 15px;
    }

    .footer-container .Useful-Links {
        padding-right: 18px;
        padding-left: 30px;
    }

    .footer-container, .footer .linebar_container {
        max-width: 95%;
    }


    /*    swiper*/
    .categoriespart .swiper-button-next, .categoriespart .swiper-button-prev {
        display: none !important;
    }

    .skill-plan .skillpoint {
        margin: 70px 20px 0;
    }

    .skillpart {
        background-size: 100vw;
    }

    /*  all  courses page*/
    .all-courses .courses .card-cours {
        width: 47%;
    }

    .all-courses .img-box {
        height: 380px;
    }

    .box2 {
        position: relative;
    }

    .box2 .asid-box {
        position: sticky;
        top: 30px;
    }

    /*    cours pagee*/
    .all-texts-box {
        margin: -160px auto auto;
        padding-left: 0;
    }

    .info-cours {
        display: none;
    }

    .all-texts-box .description-box {
        width: 100%;
        padding: 0 20px;
    }

    .acordian-pareent {
        width: 100%;
    }

    .all-texts-box .instructor-box {
        width: 100%;
    }

    .all-texts-box .instructor-box {
        width: 100%;
    }

    .all-texts-box .rating-box {
        width: 100%;
    }

    .related-courses {
        width: 100%;
    }

    /*    about page*/
    .main-wrapper-boxes .main-title-boxes #tittle-box {
        font-size: 35px;
    }

    .main-wrapper-boxes .list-boxes {
        gap: 40px 15px;
    }

    .wrapper-boxes .box .content .text-content h3 {
        font-size: 35px;
    }

    .about-contant .swiper-slide .title {
        font-size: 35px;
    }

    .about-contant .swiper-button-next, .about-contant .swiper-button-prev {
        display: none;
    }

    /*    blogs*/
    .contant-blogs .box3 .question {
        text-wrap: wrap;
    }

    /*    blog*/
    .contant-blog .blog-box {
        padding: 0 30px;
    }

    .des-img-box {
        flex-direction: column;
    }

    .des-img-box .share-box {
        flex-direction: row;
        width: max-content;
        gap: 0 20px;
        position: static;
    }

    .des-img-box .p-box {
        width: 100%;
    }

    .des-img-box blockquote p {
        width: 85%;
        margin: auto;

    }

    .des-img-box blockquote:before {
        left: 0;
    }

    .des-img-box .p-box {
        padding: 20px;
    }

    .des-img-box .p-box .part {
        font-size: 20px;
    }

    .des-img-box blockquote {
        font-size: 25px;
    }

    .widget_shopping_cart_content {
        left: auto !important;
        right: 20px !important;
    }

    #basket-btn {
        margin-right: 20px;
    }

    .header .login-part {
        font-size: 20px;
        margin-right: 30px;
    }

    .wrapper-items-number {
        right: 10px;
    }

}

@media screen and (max-width: 768px) {
    .footer-container {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-container .center-part {
        width: fit-content;
    }

    .footer .right-part {
        width: 53%;
    }

    .skill-plan {
        flex-direction: column;
        row-gap: 0;
    }

    .skill-plan .texts {
        width: 100%;
    }

    .skill-plan .skillpoint {
        margin: 30px auto 0;
    }

    .topcourses .coursescard {
        gap: 30px;
    }

    .allbox-coursescards {
        padding: 100px 0 65px;
    }

    .topcourses .texts p {
        width: 60%;
    }

    .swiper3 {
        width: 75%
    }

    .latestcard .cards {
        column-gap: 20px;
    }

    .categoriespart .cd {
        padding: 30px 15px;
    }

    /*    all courses page*/
    .box2 {
        flex-direction: column;
    }

    .all-courses {
        width: 100%;
    }

    .box2 .asid-box {
        width: 100%;
    }

    .wordpres-box {
        width: 50% !important;
    }

    .box3 .contant img {
        display: none;
    }

    .data-page .title-box .title {
        font-size: 60px;
    }

    .popular-box .blue-box .title {
        font-size: 30px;
    }

    .popular-box .blue-box {
        padding: 90px 20px 0;
    }

    /*    cours box*/
    .all-texts-box {
        margin: 30px auto auto;
    }

    .data-page-cours .description {
        display: none;
    }

    .data-page-cours {
        padding: 0;
        justify-content: center;
    }

    .data-page-cours .title {
        font-size: 40px;
    }

    .info-video {
        width: 100%;
    }

    /*    about*/
    .wrapper-boxes .box {
        flex-direction: column;
    }

    .wrapper-boxes .box:nth-child(even) {
        flex-direction: column;
    }

    .wrapper-boxes .box .image, .wrapper-boxes .box .content {
        width: 100%;
    }

    .wrapper-boxes .box .content-main-text {
        margin-bottom: 30px;
    }

    .wrapper-boxes .box .content .text-content {
        margin-top: 20px;
    }

    .wrapper-boxes .box .image .number {
        font-size: 65px;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box {
        flex-direction: column;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box .text-card {
        width: 100%;
    }

    .main-wrapper-boxes .list-boxes {
        gap: 40px 10px;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box .text-card {
        padding: 0 10px 0 0;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box h3 {
        font-size: 16px;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box .text-card p {
        font-weight: 300;
        font-size: 14px;
    }

    /*   contact */
    .contant-contact .blue-box .icons-box {
        gap: 0;
    }

    .contant-contact .blue-box .icons-box .circle {
        width: 170px;
        height: 170px;
    }

    .contant-contact .blue-box .icons-box .description {
        width: 200px;
    }

    .contant-contact .swiper-parent .swiper-slide {
        font-size: 20px;
    }

    .contant-contact .message-box .title {
        font-size: 24px;
    }

    /*    blogs*/
    .blogs-box {
        flex-direction: column;
    }

    .blogs-box .asid-box {
        width: 100%;
    }

    .blogs-box .left-box {
        width: 100%;
    }

    .blogs-box .asid-box .back-swiper-blog {
        width: 45%;
    }

    .box3 .contant .text-box {
        margin-left: 0;
        height: 50%;
    }

    .contant-blogs .box3 .question {
        font-size: 30px;
    }

    .contant-blogs .box3 .answer {
        font-size: 16px;
    }

    /*    blog*/
    .related-courses .card-cours .text {
        padding: 10px;
    }

    .card-cours .text p {
        font-size: 16px;
    }

    .card-cours .text span {
        font-size: 14px;
    }

    .des-img-box .p-box .part {
        font-size: 15px;
    }

    .des-img-box .girl-img {
        width: 90%;
    }

    .blog-box .img-box .entry-date {
        display: none !important;
    }

    .widget_shopping_cart_content {
        left: auto !important;
        right: 10px !important;
    }

    #basket-btn {
        margin-right: 10px;
    }

    .header .login-part {
        font-size: 20px;
        margin-right: 30px;
    }

    .wrapper-items-number {
        right: 10px;
    }

    form.cart-form {
        margin: 50px 20px;
    }


}

@media screen and (max-width: 650px) {
    .wrapper-items-number {
        right: 10px;
    }

    .widget_shopping_cart_content {
        right: auto !important;
        left: 10px !important;
    }

    #basket-btn {
        margin-right: 10px;
    }

    .header .logo img {
        width: 100px;
    }

    .header .login-part {
        font-size: 20px;
        margin-right: 10px;
    }

    .header .logo {
        margin: 0;
    }

    .footer-container .left-part {
        margin-left: 0;
        padding: 0 25px;
    }

    .footer-container .center-part {
        width: 100%;
        flex-direction: column;
        text-align: center;
    }

    .footer .right-part {
        width: 100%;
        text-align: center;
    }

    #app-store {
        margin-right: auto;
    }

    .footer-container .Useful-Links {
        padding: 0 0 50px;
    }

    .footer .linebar_container {
        flex-direction: column;
        text-align: center;
    }

    .footer .linebar_container .privacy a {
        padding: 0 10px;
    }

    nav {
        padding: 0 10px !important;
    }

    .cardboxlist {
        flex-direction: column;
    }

    .welcompart {
        flex-direction: column;
    }

    .searchpart form {
        width: 95%;
    }

    .searchpart form .search-button, .searchpart form .border-bottun {
        width: 120px;
    }

    .cardboxlist .cardbox {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
    }

    .cardboxlist .cardbox .par {
        text-align: center;
    }

    .cardboxlist .cardbox .par a {
        justify-content: center;
        padding: 10px 0;
    }

    .cardboxlist .cardbox .par {
        margin: 0;
        width: 80%;
    }

    .welcom_img {
        width: 100%;
        margin: 0;
    }

    .welcompart {
        margin-bottom: 80px;
    }

    .welcompart .explain {
        width: 100%;
    }

    .welcompart .explain {
        margin-top: 0;
    }

    .categoriespart .paragragh p {
        width: 100%;
    }

    .skillpoint .students {
        right: 30%;
    }

    .skillpoint .courses {
        left: 30%;
    }

    .latestcard {
        flex-direction: column;
    }

    .skill-plan .skillpoint .clr {
        width: 120px;
        height: 120px;
    }

    .skill-plan .skillpoint {
        height: 230px;
    }

    .skillpart {
        background-size: unset;
    }

    .topcourses .texts p {
        width: 100%;
    }

    .card {
        width: 90%;
        margin: auto;
    }

    .create-account .picture img {
        width: 100%;

    }

    .create-account .mainpart {
        left: 0;
        padding-left: 20px;
        text-align: center;
        width: 95%;
        margin: auto;
    }

    .create-account .mainpart h4, .create-account .mainpart h1 {
        text-align: left;
    }

    .swiper3 {
        width: 95%;
    }

    .back-swiper3 .swiper-button-next, .back-swiper3 .swiper-button-prev {
        display: none !important;
    }

    .latestcard .explains {
        width: 100%;
        align-items: center;
    }

    .latestcard .explains p, .latestcard .explains h1 {
        align-items: flex-start;
        width: 100%;
    }

    .latestcard .cards {
        margin-top: 50px;
        row-gap: 30px;
    }

    .latestcard .cards {
        width: 100%;
    }

    .latestcard .card {
        width: 90%;
    }

    .cardboxlist {
        margin-bottom: 50px;
    }

    /*    courses box*/
    .data-page .title-box {
        flex-direction: column;
    }

    .data-page .title-box .title {
        font-size: 55px;
        padding-right: 0;
    }

    .data-page .title-box .title:after {
        display: none;
    }

    .data-page .title-box .description {
        width: 80%;
        text-align: center;
        padding-left: 0;
    }

    .popular-box .blue-box .title {
        font-size: 26px;
    }

    .popular-box .blue-box {
        padding: 65px 20px 0
    }

    .gray-box {
        height: 265px;
    }

    .all-courses .header-box {
        flex-direction: column;
    }

    .all-courses .header-box .left-box span {
        display: none;
    }

    .all-courses .header-box .right-box {
        justify-content: start;
        margin-top: 30px;
        width: 100%;
    }

    .all-courses .header-box .right-box .search-box {
        width: 100%;
    }

    .wordpres-box {
        width: 80% !important;
    }

    .box3 .contant .text-box {
        margin-left: 0;
    }

    .popular-box .blue-box .swiper {
        width: 100%;
    }

    /*    cours page*/
    .info-video {
        flex-wrap: wrap;
    }

    .footer-fixed .content-box {
        justify-content: center;
    }

    .footer-fixed .content-box ul {
        display: none;
    }

    .footer-fixed .content-box ul {
        flex-wrap: wrap;
    }

    .data-page-cours .title {
        font-size: 30px;
    }

    .footer-img .data-box span {
        font-size: 20px;
    }

    .footer-img .data-box {
        font-size: 12px;
        padding: 3px 16px;
    }

    .footer-img .play-box {
        padding: 5px 8px;
    }

    .footer-img .play-box .icon-box {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .info-video .teacher img {
        display: none;
    }

    .info-video > div {
        width: 50%;
        margin: 10px 0;
    }

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

    .info-video .text .title {
        font-size: 13px;
    }

    .info-video .text .name {
        font-size: 14px;
    }

    .info-video > div:nth-child(odd) .text {
        border-right: 1px solid #e6e6e6;
    }

    .info-video > div:nth-child(even) .text {
        border-right: unset;
    }

    .acordian-pareent .header-box {
        flex-direction: column;
        text-align: left;
    }

    .acordian-pareent .header-box span {
        font-size: 25px;
        margin-bottom: 10px;
        display: block;
    }

    .acordian-pareent .search-box {
        height: 40px;
        width: 100%;
    }

    .section-box .list-video .item:not(.lock) {
        flex-direction: column;
    }

    .section-box .list-video .item:not(.lock) .right-box {
        justify-content: end;
        margin-top: 10px;
    }

    .instructor-box .main-title {
        text-align: center;
    }

    .instructor-box .body-instructor {
        flex-direction: column;
    }

    .instructor-box .body-instructor .right-box .title, .instructor-box .body-instructor .right-box .job {
        text-align: center;
    }

    .instructor-box .body-instructor .right-box p:before {
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .all-texts-box .rating-box .top_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .rating-box .parentReviews .boxReviews{
        flex-direction: column;
    }
    .rating-box .right-box {
        width: 100%;
    }

    .rating-box .right-box .statistics .chart {
        width: 65%;
    }

    .rating-box .right-box .statistics {
        margin-top: 10px;
    }

    /*    about*/
    .main-wrapper-boxes .main-title-boxes #tittle-box {
        font-size: 25px;
    }

    .main-wrapper-boxes .main-title-boxes #paragragh-box {
        width: 90%;
        margin: auto;
    }

    .main-wrapper-boxes .list-boxes {
        flex-direction: column;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box {
        width: 100%;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box {
        align-items: center;
    }

    .main-wrapper-boxes .list-boxes .wrapper-box .card-box .text-card {
        text-align: center;
    }

    .about-contant .swiper-slide .description {
        width: 100%;
        font-size: 16px;
    }

    .about-contant .swiper-slide .title {
        font-size: 29px;
    }

    .about-contant .call-box {
        flex-direction: column;
    }

    .overDeveloper {
        height: -webkit-fill-available;
    }

    .developer {
        height: auto;
    }

    .about-contant .parent-btn {
        padding-bottom: 50px;
        padding-right: unset;
    }

    .about-contant .call-box div {
        margin-bottom: 20px;
    }

    .all-courses .courses .card-cours {
        width: 100%;
    }

    /*    contact*/
    .contant-contact .inpus-box {
        flex-direction: column;
        gap: 20px 0;
    }

    .contant-contact .inpus-box input {
        flex: auto;
    }

    .contant-contact .swiper-parent {
        flex-direction: column;
    }

    .contant-contact .blue-box .icons-box {
        flex-direction: column;
    }

    .contant-contact .swiper-parent .img-box {
        width: 100%;
        margin-bottom: 30px;
    }

    .contant-contact .swiper-parent .back-swiper-contact {
        width: 100%;
    }

    .contant-contact .blue-box .icons-box .circle {
        width: 120px;
        height: 120px;
        font-size: 30px;
        margin-top: 50px;
        margin-bottom: 10px;
    }

    .contant-contact .blue-box {
        padding: 50px 0;
    }

    /*    blogs*/
    .blogs-box .asid-box .back-swiper-blog {
        width: 80%;
    }

    .box3 .contant .text-box {
        height: 70%;
    }

    .des-img-box .share-box {
        gap: 0 5px;
    }

    .contant-blog .blog-box {
        padding: 0 15px;
    }

    .blog-box .next-prev > div .center-box p {
        display: none;
    }

    .blog-box .next-prev > div > span {
        display: none;
    }

    .des-img-box .p-box .part {
        font-size: 15px;
    }

    .des-img-box .p-box {
        padding: 0;
    }

    .img-blog .entry-date {
        display: none;
    }

    .des-img-box blockquote p {
        width: 75%;
    }

    .des-img-box .girl-img {
        width: 100%;
    }

    .contant-blog .header-box .swiper-buttons {
        position: relative;
        margin-top: 40px;
    }

    .contant-blog .header-box {
        display: flex;
        flex-direction: column;
        border-bottom: none;
        padding: 0;
    }

    .contant-blog .header-box p {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 10px;
    }

    .related-courses .card-cours .text {
        padding: 0;
    }

    .card-cours .text p {
        font-size: 14px;
    }

    /*    login*/
    .login-form {
        flex-direction: column;
        margin: 25px 0;
        border-radius: 22px;
    }

    .login-logo {
        width: 100%;
        height: 170px;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .login-info {
        width: auto;
    }

    .login-form button {
        font-size: 14px;
    }

    form.cart-form {
        margin: 50px 20px !important;
    }

    .input-text {
        margin: 0px 10px 10px 0px;
    }
}

@media screen and (max-width: 375px) {
    .feedbackslider .swiper-pagination-bullet {
        width: 70px !important;
        height: 70px !important;
    }

    .back-swiper {
        width: 99%;
    }

    .searchpart .searachbox {
        padding: 0 20px;
    }

    /*    all courses page*/
    .wordpres-box {
        width: 100% !important;
    }

    /*    login*/
    .login-form .header-login {
        flex-direction: column-reverse;
    }

    a.back-btn {
        width: fit-content;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 320px) {
    .footer-container .left-part {
        padding: 0;
    }

    .skillpoint .students {
        right: 20%;
    }

    .skillpoint .courses {
        left: 20%;
    }

    .skill-plan .skillpoint .clr {
        width: 100px;
        height: 100px;
    }

    .skill-plan {
        display: none;
    }

    .card {
        width: 80%;
    }
}

.widget_shopping_cart_content {

    text-transform: none;
    background: #fff;
    position: absolute;
    left: auto;
    right: 30px;
    top: 100%;
    min-width: 350px;
    z-index: 9999;
    padding-bottom: 0 !important;
    overflow: hidden;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);
    transition: 0.3s all;
}

#shopping_box {
    display: none;
}

.cart_item img {
    margin: 15px;
    width: 65px;
    height: 65px;
    object-fit: cover;
    float: left;
    box-shadow: none;
}

.row_box_cart {
    display: flex;
    flex-direction: row;
}

.title_product_item {

    color: var(--main-title-color);
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    padding: 10px;
}

ul.product_list_widget {
    list-style: none;
    padding: 10px 0px 0px 10px;
    display: flex;
    flex-direction: column;
}

.quantity {

    display: block;
    margin-top: 5px;
    color: var(--main-title-color);
}

.quantity .Price-amount {
    color: var(--color-item-fourth);
    font-size: 15px;
    font-weight: 600;
}

.total_cart_item {
    border-bottom: 1px solid #e7e7e7;
    border-top: 1px solid #e7e7e7;
    font-size: 15px;
    padding: 15px 0;
    text-align: center;
    margin: 20px;
    color: var(--color-item-fourth);
    font-weight: 700;
}

.total_cart_item strong {
    text-transform: uppercase;
    font-weight: 700;
    min-width: 40px;
    display: inline-block;
}

.cart_buttons {
    text-align: center;
    padding: 5px;
}

.wc-forward {
    padding: 0 30px !important;
    line-height: 46px;
    margin: 0px 5px 20px 5px;
    border-radius: 25px;
    background: var(--main-title-color);
    color: #fff;
    display: inline-block;
}

.wc-forward:hover {
    background-color: var(--color-item-fourth) !important;
}

.button_checkout {
    background-color: var(--color-item-fourth) !important;
}

#basket-btn {
    cursor: pointer;
    padding-top: 6px;
}

.wrapper-items-number {
    position: absolute;
    top: 22px;
    font-size: 14px;
    font-weight: 600;
}

.form-group.captcha-input {
    text-align: center;
    margin: 30px 0px;
}

#captcha {
    border-radius: 5px;
    border: 1px solid #ced4da;
    padding: 15px 10px;
    margin: 10px 0px;
}

#captcha:hover {
    border: 1px solid var(--color-item-fourth);
}

#captcha:focus-visible {
    border: 1px solid var(--color-item-fourth);
}

.form-group.captcha-input-register {
    text-align: left;
    margin: 30px 0px;
}

#captcha-register {
    border-radius: 5px;
    border: 1px solid #ced4da;
    padding: 15px 10px;
    margin: 10px 0px;
    width: 50%;
}

#captcha-register:hover {
    border: 1px solid var(--color-item-fourth);
}

#captcha-register:focus-visible {
    border: 1px solid var(--color-item-fourth);
}

.message-register {
    margin-bottom: 20px;
}

.billing-fields {
    width: 100%;
}

.billing-fields_wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.alert_shopping_cart {
    text-align: center;
    margin: 30px;
    color: #8e1945;
    font-size: 13px;
}

div.model img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 5px;

}

.box-model-text {
    top: -65px;
    position: relative;
    box-shadow: 0px 0px 22px -6px black;
    background: #fff;
    margin: 30px;
    border-radius: 5px;
    text-align: center;
    padding: 15px;

}

h2.title-model {
    font-size: 22px;
    font-weight: 500;
    color: #333354;
    margin-bottom: 10px;
    font-family: 'Poppins';
}

* {
    box-sizing: border-box;
}

.responsive-model-page {
    padding: 0 15px;
    float: left;
    width: 24.99999%;
}

.desc-model-page {
    line-height: 1.8;
    font-family: 'Poppins';
}

@media only screen and (max-width: 1024px) {
    .responsive-model-page {
        width: 49.99999%;
    }
}

@media only screen and (max-width: 500px) {
    .responsive-model-page {
        width: 100%;
        padding: 10px;
    }
}

.model-page {
    margin-top: 100px;
}

.model-page h1 {
    text-align: center;
    margin-bottom: 70px;
    font-weight: 300;
    font-size: 36px;
    color: var(--main-title-color);
}

strong.ql-size-huge {
    color: black;
    font-size: 22px;
    font-weight: 700;
}

.alert-cart {
    padding: 50px 100px;
    margin: 100px 0px;
    background: #9f3862;
    color: #fff;
    border-radius: 5px;
    font-family: 'Open Sans';
    font-size: 15px;
}

button.billing-details-btn {
    width: 100% !important;
    padding: 10px 40px;
    background: #a03a63;
    border: none;
    border-radius: 5px;
    color: #fff;
    margin: 10px;
    font-size: 15px;
}

.logo-register {
    display: flex;
    justify-content: center;
    margin: 5px 0 20px 0;
}

.logo-register img {
    width: 150px;
}



.coupon_code_cart {
    display: flex;
    justify-content: center;
    padding: 30px 0px;
    border-bottom: 2px dotted #cdcdcd;
}

.captcha-error {
    background: #a03a63;
    width: 40%;
    color: #fff;
    padding: 20px;
    line-height: 1.8;
    border-radius: 5px;
}

.captcha-success {
    background: green;
    width: 40%;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    font-size: 15px;
}

.gift-course {
    display: flex;
    justify-content: center;
    background: #8e1948;
    align-items: center;
    /* border-radius: 50%; */
    height: 40px;
    width: 50px;
    font-size: 19px;
    color: #fff;
    position: absolute;
    top: 0;
}

.description_video {
    font-size: 16px;
    text-align: justify;
    /*padding: 5px 20px 5px 20px;*/
    line-height: 1.5;
    font-weight: 300;
    color: var(--main-des-color);
}

.description_video img {
    height: 400px !important;
    width: 800px !important;
    margin-bottom: 20px;
}



/*popup style*/
.popupRate{
    background-color: var(--main-color);;
    padding: 40px;
    position: fixed;
    width: 80%;
    max-width: 600px;
    display: inline-block;
    text-align: left;
    top: 50%;;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    z-index: 1000;
    border: 1px solid var(--second-color);;
}
.popupRate .header_popUp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.popupRate .header_popUp .title{
    font-size: 20px;
    font-weight: bold;
}
.popupRate .header_popUp #close{
    cursor: pointer;
}
.popupRate .bodyPopup .label{
    font-size: 16px;
    color: var(--main-text-color);
    display: block;
    width: 100%;
    padding: 10px 0;
}
.popupRate .bodyPopup .title_box input{
    height: 50px;
    padding: 10px;
    border:1px solid var(--second-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 20px;
}
.popupRate .bodyPopup .title_box input:focus-visible{
    outline: none;
}
.popupRate .bodyPopup .content_box textarea{
    resize: vertical;
    min-height: 90px;
    padding: 10px;
    border:1px solid var(--second-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 20px;
}
.popupRate .bodyPopup .content_box textarea:focus-visible{
    outline: none;
}
.popupRate .bodyPopup .btns_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}
.popupRate .bodyPopup .btns_box button{
    border: none;
    display: inline-block;
    padding: 0 35px;
    min-height: 44px;
    cursor: pointer;
    border: none;
    color: var(--main-color);
    font-size: 16px;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    transition: .3s ease-in-out;

}
.popupRate .bodyPopup .btns_box .add{
    background-color: var(--twiter-color);
}
.popupRate .bodyPopup .btns_box .cancel{
    background-color: var(--main-text-color);
}
.backPopup{
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: rgba(133, 131, 131, 0.47);
    z-index:2000;
    font-family: "poppins";
}
.dontShow{
    display: none !important;
}


@media screen and (max-width: 1300px) {
    .logo-register {
        margin: 30px 0px;
    }
}

@media screen and (max-width: 1024px) {
    .logo-register img {
        width: 200px;
    }

    .login-container {
        height: auto;
    }

    .logo-register {
        margin: 80px 0;
    }
}

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

    .logo-register img {
        width: 150px;
    }

    .logo-register {
        margin: 50px 0;
    }
}

@media screen and (max-width: 540px) {
    .login-container {
        height: auto;
    }

    .logo-register {
        margin: 30px 0px 0px 0px;
    }
    .popupRate{
        padding:30px 20px;
    }
    .popupRate .bodyPopup .btns_box button{
        padding: 0 15px;
        font-size: 14px;
    }
}
.body_event {
    width: min(100%, 1140px);
    margin: auto;
    display: flex;
    padding: 120px 0px;
}
.event-content {
    width: 75% !important;
    padding-right: 30px;
}
.event-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
}
.event-text {
    color: #848484;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    text-align: justify;
    width: calc(100% - 100px);
    float: left;
}

.countdown {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border: 1px solid;
    padding: 20px;
    background:var(--color-item-third);
    color: #fff;
    border-radius: 5px;
}

.countdown-tab {
    width: 100%;
    border: 1px solid #c791a7;
    text-align: center;
    background:var(--color-item-third);
    padding: 5px;
}

.countdown .number {
    font-size: 25px;
}
.event-description {
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}
.event-share {
    width: 100px;
    float: left;
    padding: 0 23px;
    position: relative;
}
.event-text p {
    margin-top: 20px;
}
.link-event-share li{
    display: block;
    float: none;
    margin-bottom: 20px;
}
.link-share{
    width: 43px;
    height: 43px;
    color: #bfbfbf;
    display: block;
    text-align: center;
    line-height: 43px;
    border: 1px solid #e7e7e7;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 18px;
}
.link-share:hover{
    background-color:var(--blue-color);
    color: #fff;
}
ul.link-event-share {
    margin-top: 15px;
}
.title-event-share{
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #707070;
}
.event-body-ticket {
    width: 25%;
    position: relative;
}
.event-ticket{
    padding: 30px 30px 0;
    border: 1px solid #e7e7e7;
    border-top: 0;
}
.title-ticket{
    font-family: Arial, sans-serif;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    line-height: 72px;
    padding: 0;
    text-align: center;
    position: relative;
    background-color:var(--blue-color);
}
.info-event-ticket{
    margin: 0;
}
.info-event-ticket li {
    text-transform: none;
    line-height: 52px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;
    overflow: hidden;
}
.info-event-ticket .info-value {
    font-family: Arial, sans-serif;
    display: inline-block;
    font-weight: 600;
    float: right;
    color: #424542;
    font-size: 17px;
}
.info-event-ticket .info-label {
    font-family: Arial, sans-serif;
    display: inline-block;
    color: #717171;
    font-size: 17px;
    font-weight: 500;
}
.info-event-ticket .event-cost .info-value{
    color:var(--blue-color);
    font-size: 18px;

}
.info-event-ticket .info-value input{
    width: 50px;
    line-height: 30px;
    border: 1px solid #e7e7e7;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}
.info-event-ticket .info-value input:focus{
    outline: none;
    box-shadow: none;
    text-decoration: none;
}
.event_payment{
    margin: 10px 0;
    list-style: none;
    padding:0px 10px;
    border-radius: 3px;
    background-color: #eee;
    text-align: center;
    float: right;
}
.event_payment input{
    border-radius: 50%;
    line-height: 10px;
    font-size: 14px;
    border: 1px solid #b4b9be;
    background: #fff;
    color: #555;
    clear: none;
    cursor: pointer;
    display: inline-block;
    height: 16px;
}
.btn-event .event-btn{
    font-family: Arial, sans-serif;
    background: #8e1948;
    padding: 13px 23px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.3px;
    margin: 20px 0;
    transition: 0.3s;
}
.btn-event .event-btn:hover{
    background:var(--color-item-third);

}
.btn-event {
    text-align: center;
    margin: 30px 0px;
}
.btn-event p{
    font-family: Arial, sans-serif;
    color: #8a6d3b;
    background: #fcf8e3;
    line-height: 20px;
    padding: 10px;
    font-size: 13px;
    margin-top: 30px;
    position: sticky;
}
.map-event img {
    width: 100%;
    height: 400px;
    position: relative;
    margin-top: 20px;
    object-fit: cover;
}


.widget-event {
    position: sticky;
    top: 120px;
}
.widget-share {
    position: sticky;
    top: 120px;
}
.resultPayment .success,.resultPayment .error{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 50px 0;
    gap: 25px;
}
.resultPayment .iconBox {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.resultPayment .success .iconBox {
    background-color: #43d29d;
}
.resultPayment .error .iconBox {
    background-color: #ee3d3d;
}
.resultPayment .iconBox i{
    font-size: 50px;
}
.resultPayment .title{
    font-size: 35px;
    font-weight: 800;
    font-family: 'Open Sans';
}
.resultPayment .success .title{
    color:#43d29d;
}
.resultPayment .error .title{
    color:#ee3d3d;
}
.resultPayment .short_text{
    font-size: 25px;
    font-weight: 700;
    font-family: 'Open Sans';
    color: var(--main-title-color);

}
.resultPayment .homeBtn{
    padding: 0 40px;
    height: 45px;
    color: var(--main-color);
    font-size: 20px;
    font-weight: 600;
    font-family: 'Open Sans';
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}
.resultPayment .success .homeBtn{
    background-color: #43d29d;
}
.resultPayment .error .homeBtn{
    background-color: #ee3d3d;
}
@media (max-width: 1024px) {
    .body_event {
        padding: 100px 30px;
    }
    .footer-fixed{
        position: fixed;
        bottom: 0;
        z-index: 1000;
        height: 100px;
        align-items: center;
        display: flex;
    }
}
@media (max-width: 820px) {
    .event-content {
        width: 70% !important;
        padding-right: 15px;
    }
    .event-body-ticket {
        width: 30%;
    }
    .map-event img {
        height: 300px;
    }
}
@media (max-width: 540px) {
    .body_event {
        flex-direction: column;
        padding: 50px 10px;
    }
    .event-content {
        width: 100% !important;
        padding-right: 0px;
    }
    .event-body-ticket {
        width: 100%;
    }
    .countdown{
        padding: 10px;
        font-size: 10px;
    }
    .countdown-tab{
        padding: 5px;
    }
    .event-text{
        font-size: 15px;
        text-align:left;
    }
    .event-description {
        margin: 20px 0px;
    }
    .map-event img {
        height: 200px;
    }

}