@font-face {
    font-family: kalame_light;
    src: url('../fonts/KALAMEH-LIGHT.eot');
    src: url('../fonts/KALAMEH-LIGHT.woff') format("woff"),
    url('../fonts/KALAMEH-LIGHT.woff2') format("woff"),
    url('../fonts/KALAMEH-LIGHT.ttf') format("truetype");
}

@font-face {
    font-family: kalame_bold;
    src: url('../fonts/KALAMEH-BOLD.eot');
    src: url('../fonts/KALAMEH-BOLD.woff') format("woff"),
    url('../fonts/KALAMEH-BOLD.woff2') format("woff"),
    url('../fonts/KALAMEH-BOLD.ttf') format("truetype");
}

@font-face {
    font-family: kalame_black;
    src: url('../fonts/KALAMEH-BLACK.eot');
    src: url('../fonts/KALAMEH-BLACK.woff') format("woff"),
    url('../fonts/KALAMEH-BLACK.woff2') format("woff"),
    url('../fonts/KALAMEH-BLACK.ttf') format("truetype");
}

@font-face {
    font-family: Tufan;
    src: url('../fonts/Tufan.eot');
    src: url('../fonts/Tufan.woff') format("woff"),
    url('../fonts/Tufan.woff2') format("woff"),
    url('../fonts/Tufan.ttf') format("truetype");
}


@font-face {
    font-family: Bahman;
    src: url('../fonts/Bahman.eot');
    src: url('../fonts/Bahman.woff') format("woff"),
    url('../fonts/Bahman.woff2') format("woff"),
    url('../fonts/Bahman.ttf') format("truetype");
}

@font-face {
    font-family: Cholak;
    src: url('../fonts/cholak.eot');
    src: url('../fonts/cholak.woff') format("woff"),
    url('../fonts/cholak.woff2') format("woff"),
    url('../fonts/cholak.ttf') format("truetype");
}
@font-face {
    font-family: Balonku;

    src: url('../fonts/Balonku.woff') format("woff");
}
@font-face {
    font-family: Baltimore;

    src: url('../fonts/Baltimore.woff') format("woff");
}

@font-face {
    font-family: Samim-FD;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Samim-FD.eot');
    src: url('../fonts/Samim-FD.eot') format("embedded-opentype"),
    url('../fonts/Samim-FD.woff2') format("woff2"),
    url('../fonts/Samim-FD.woff') format("woff"),
    url('../fonts/Samim-FD.ttf') format("truetype");
}
.farsi-digit {
    font-family: Samim-FD;
}
:root {
    --primary-color: #2A2D36;
    --secondary-color: #D64c56;
    --additional-color: #EBEBEB;
    --additional-color2: #17395e;
    --extra-color: #1f5280;
    --extra-color2: #C4D92d;
    --mobile-title-main: 17px;
    --mobile-title-font: 14px;
    --mobile-text-font: 13px;
    --mobile-line-hight:23px;
}



html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

html.overlay {
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}

body {
    margin: auto;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    direction: rtl;
    font-family: 'kalame_light';
    overflow-x: hidden;
    max-width: 100%;
    color: var(--primary-color);
}

*{
    text-align: right;
}

p{
    text-align: justify;
    line-height: 33px;
}

body::-webkit-scrollbar {
    width: 8px;
    height: 5px;
}

body::-webkit-scrollbar-thumb {
    background: #1b1e21;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #a09ea4;
}

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

.swiper{
    width: 100%;
}



/*video*/

/* #video {*/
/*    width: 600px;*/
/*    height: 400px;*/
/*    border-radius: 20px;*/
/*}*/
.controls {
    position: absolute;
    bottom: -1px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    opacity: 0.8;
    transition: opacity 0.4s;
    background: #17395e;
    border-radius: 0 0 18px 18px;
    align-items: center;
    direction: ltr;
    padding: 0.4rem;
}
.container:hover .controls {
    opacity: 1;
}

.controls button {
    background: transparent;
    color: #fff;
    font-weight: bolder;
    text-shadow: 2px 1px 2px #000;
    border: none;
    cursor: pointer;
}

.controls button:focus-visible {
    outline: unset !important;
}

.controls button:focus {
    outline: unset !important;
}

.controls .timeline {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    /*border-right: 3px solid #ccc;*/
    /*border-left: 3px solid #ccc;*/
    height: 16px;

}

.controls .timeline .bar{
    background: rgb(1, 1, 65);
    height: 5px;
    flex: 1;
    border-radius: 8px;
}
.controls .timeline .bar .inner{
    background: #ccc;
    width: 0%;
    height: 100%;
}
.fa {
    font-size: 20px !important;
}
.fa-fast-forward{
    transform: rotate(180deg);
}
.fa-fast-backward{
    transform: rotate(180deg);
}



/*video*/





/*modal enter*/


.overlay-section{
    background-color: rgba(0, 0, 0, .42);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1010;
    backdrop-filter: blur(7px);
    background-color: hsla(0, 0%, 100%, .3) !important;
}

.overlay-section.show{
    display: block;
}


.modal-dialog{
    position: fixed;
    inset: 0;
    max-width: 555px;
    height: max-content;
    max-height: 100%;
    z-index: 1100;
    margin: auto;
    border-radius: 20px;
    background-color: #fff;
    width: 100%;
    /*box-shadow: 0px -1px 42px 0px #0000001A;*/
    /*padding: 25px 28px;*/
    display: none;
    z-index: 10000000000;
    z-index: 1072;
}
.toman_unit{
    font-size: 12px;
    margin-bottom: 2px;
}

.modal-dialog.show{
    z-index: 1072;
    display: block;
    position: fixed;
}

.zeynep-overlay.show{
    display: flex;
}


/*modal enter*/


/*header*/

.desc-search{
    display: block;
}

.mobile-search{
    display: none;
}


.navbar-toggler{
    display: none !important;
}

.my-header-profile{
    display: none !important;
}


.cart-btn{
    padding-right: 20px;
    border-right: 1px solid #939393;
}

header{
    /*transform: translateY(-132%);*/
    z-index: 300;
    position: fixed;
    width: 100%;
}

header{
    /*position: absolute;*/
    top: 0;
    /*width: 100%;*/
    /*z-index: 2;*/
}

.code_course_item{
    color: #14395e;
}

.header-items{
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-cart-head{
    display: none;
}

.mobile-logo-middle{
    display: none;
}

/*profile menu*/

.sit-profile{
    position: relative;
}
.profile-menu{
    position: absolute;
    background: #fff;
    /*padding: 20px;*/
    border-radius: 10px;
    width: 270px;
    left: -15px;
    top: 42px;
    box-shadow: 0 0 7px 0px #dddddd;
    display: none;
    z-index: 4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .3);
    padding: 0.4rem 0px;
}

.profile-menu.show{
    display: block !important;
}

.sit-btn.profile-btn .sit-link:before{
    display: none;
}
.notify_icon_alert{
    position: absolute;
    left: 0;
    top: -7px;
}
.notify_icon_alert svg{
    animation: pulse-animation 2s infinite;
    border-radius: 50%;
}
.sit-btn.profile-btn{
    overflow: unset !important;
}

.sit-btn.profile-btn .sit-link{
    overflow: unset !important;
}

.sit-btn.profile-btn .sit-link .btn-icon{
    display: none !important;
}

.profile-btn{
    width: 154px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.header_menu_items{
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0.9rem;
    color: #45546c;
}

.profile-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding-bottom: 10px;*/
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 1rem;
    padding: 1rem;
}

.profile-id{
    color: #45546c;
    text-decoration: none;
}
.profile-id:hover{
    text-decoration: none;
}
.profile-info{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.profile-image{
    width: 34px;
    height: 33px;
    border-radius: 50%;
}
.course-remove{
    padding: 0 1rem;
}

.course-remove:hover svg {
    fill: #960c0c;
}


.profile-image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: opacity(0.5);
}

.myprofile-menu{
    display: flex;
    flex-direction: column;
    /*padding-right: 18px;*/
    /*padding-top: 10px;*/
}

.each-profile-item {
    /*padding-block: 10px;*/
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: unset !important;
    padding-right: 1rem;
}
.each-profile-item:hover{
    background: #eeeeee;
}
.each-profile-item svg{
    width: 19px;
    height: 19px;
}
.course-price del{
    color: #62809f;
    padding-left: 4px;
}
.each-profile-item span{
    font-size: 14px;
    color: #7e7e7e;
    color: rgba(119, 132, 157, .90);
}

.each-profile-item svg path{
    /*fill: #c9c9c9;*/
    /*fill: rgba(119, 132, 157, .90);*/
}


.each-profile-item:hover span{
    color: var(--primary-color);
}

.each-profile-item:hover svg path{
    /*stroke: var(--primary-color);*/
}



.exist_icon:hover span{
    color: var(--secondary-color) !important;
}

.exist_icon:hover svg path{
    fill: var(--secondary-color) !important;
}



/*profile menu*/


.error_form{
    background: #f52232;
    color: #fff;
    padding: 0.9rem;
    border-radius: 8px;
}

.login_modal{
    cursor: pointer;
}
.success_form{
    background: #36c022;
    color: #fff;
    padding: 0.9rem;
    border-radius: 8px;
}




/*notification*/

.notification{
    position: relative;
    z-index: 16;
}


.notif-menu{
    position: absolute;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 360px;
    left: -40px;
    top: 27px;
    box-shadow: 0 0 7px 0px #dddddd;
    display: none;
    z-index: 4;
}

.notif-menu.show{
    display: block !important;
}

.all-notifs{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    height: fit-content;
    overflow: hidden;
    max-height: 306px;
}


.all-notifs::-webkit-scrollbar{
    width: 3px;
}
.all-notifs::-webkit-scrollbar-track{
    background: #d0d0d0;
}
.all-notifs::-webkit-scrollbar-thumb{
    background: #3d3d3d;
}

.each-notif{
    padding: 16px;
    background: #f0f7f9;
    border-radius: 13px;
}
.each-notif .date{
    font-size: 11px;
    font-weight: 100;
}
.alert_svg_header{
    animation: pulse-animation 2s infinite;
    border-radius: 50%;
}
.each-notif span{
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: start;
    gap: 5px;
}
.each-notif-date{
    display: flex;
    justify-content: space-between;
}
.each-notif-date a{
    color: #494949 !important;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}



.each-notif p{
    margin-bottom: 0;
    font-size: 14px;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #2a2a2a;
}


.show-all-notif{
    border: 1px solid #7bb52e;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    display: block;
    text-align: center;
    color: #7bb52e !important;
    font-weight: 600;
    text-decoration: unset !important;
    transition: .5s;
}

.show-all-notif:hover{
    background: #7bb52e !important;
    color: #fff !important;
    transition: .5s;
}


.empty-img{
    width: 100%;
    height: 100px;
}

.empty-notif{
    margin-bottom: 20px;
    margin-block: 40px 60px;
}

.empty-notif span{
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    width: 100%;
    display: block;
    margin-top: 20px;
}


.empty-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(4px 4px 4px #ccc);
}

.each-notif svg circle{
    fill: var(--secondary-color);
}




@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(114, 68, 71, 0.3);
    }
    100% {
        box-shadow: 0 0 0 5px rgba(114, 68, 71, 0.28);
    }
}


/*notification*/




/*cart menu*/

.cart-btn{
    position: relative;
}

.cart-icon{
    position: relative;
}

.cart-icon .cart-count{
    position: absolute;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #111111;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    top: 6px;
    right: 1px;
}

.cart-menu{
    position: absolute;
    width: 350px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    left: -22px;
    z-index: 10;
    top: 30px;
    box-shadow: 0 0 7px 0px #dddddd;
    display: none;
    flex-direction: column;
}

.empty-cart-image{
    width: 100%;
    height: 100px;
}

.empty-cart-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(4px 4px 4px #ccc);
}
.cart-empty span{
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    width: 100%;
    display: block;
    margin-top: 20px;
}
.cart-empty{
    margin-bottom: 20px;
    margin-block: 40px 60px;
}



.cart-menu.show{
    display: block !important;
}

.all-cart-items{
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow: auto;
    background: #fdfdfd;
    /*padding: 10px;*/
    border-radius: 13px;
}

/*.all-cart-items{*/
/*    scrollbar-color: gray #000;*/
/*    scrollbar-width: thin;*/
/*}*/

.all-cart-items::-webkit-scrollbar{
    width: 3px;
}
.all-cart-items::-webkit-scrollbar-track{
    background: #d0d0d0;
}
.all-cart-items::-webkit-scrollbar-thumb{
    background: #3d3d3d;
}


.each-cart-course{
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: unset !important;
    /*padding: 10px;*/
    /* border-bottom: 1px solid #e1e1e1; */
    height: 116px;
    background: #fff;
    border-radius: 10px;
    /* padding: 11px; */
    /* box-shadow: 0 0 9px 0px #a1a1a1; */
    margin-bottom: 6px;
    /*box-shadow: 0 5px 25px rgba(119, 132, 157, .1);*/
    /*-webkit-box-shadow: rgba(119, 132, 157, .1) -1px 0px 12px 0px;*/
    justify-content: center;
}

.each-cart-course:last-child{
    border-bottom: unset;
}

.course-price{
    font-size: 16px;
    color: #14395e;
    font-weight: 600;
}

.cart-menu .course-price{
    display: flex;
    flex-direction: column;
    gap: 0px;
}


.cart-menu-bottom{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 0.7rem;
}

.sum-price{
    font-weight: 600;
    font-size: 18px;
    width: 100%;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.cart-menu-bottom a{
    background: var(--extra-color2);
    border-radius: 10px;
    padding: 13px 1px;
    color: var(--text-color) !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    width: 56%;
    text-align: center;
}
.sum_cart_title{
    font-size: 11px;
    font-weight: 100;
}


.each-course-detail{
    display: flex;
    align-items: center;
    gap: 10px;
}


.cart-image{
    width: 75px;
    height: 75px;
}


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

.cart-course-content{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.off_price_sec{
    font-size: 13px !important;
    font-weight: 100 !important;
    color: #E91E63 !important;
    line-height: 1px;
}
.off_price_sec span{
    font-size: 11px;
}

.cart-course-content span{
    font-size: 13px;
    font-weight: 600;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: flex;
    align-items: center;
    gap: 1px;
}

.off_price_sec span{
    font-size: 11px;
    color: #E91E63 !important;
    font-weight: 100;
}

.each-course-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.each-course-box .course-price{
    color: #444;
}

.no-off-price{
    display: flex;
}

.total-price-box {
    font-size: 16px !important;
}



/*cart menu*/










header.scroll .sec-nav {
    opacity: 0;
    /*transform: translateY(-100%);*/
    position: relative;
    z-index: -10;
}

header.scroll{
    height: 122px;
}

header.scroll .sec-nav {
    /*opacity: 0;*/
    display: none;
    /*transform: translateY(-100%);*/
    /*position: relative;*/
    /*z-index: -10;*/
    background: var(--additional-color);
}

header.scroll .first-nav {
    background: var(--additional-color);
}

.sec-nav{
    /*opacity: 1;*/
    background: unset;
}

.first-nav{
    /*background: var(--additional-color);*/
    position: relative;
    z-index: 8;
}


.first-nav .sit-btn .sit-link::before {
    width: 85px;
}

header.scroll .first-nav .row{
    border-bottom: unset;
    margin-right: 0;
    padding-right: 0;
}

header.scroll .navbar-brand{
    transform: scale(.8);
    transition: .5s;
    position: relative;
    right: unset;
    top: unset;
}

/*header.loaded{*/
/*    transform: translateY(0%);*/
/*    transition: .7s;*/
/*    height: 120px;*/
/*}*/

.banner-content{
    transform: translateX(140%);
    transition: .6s;
}

.banner-content.loaded{
    transform: translateX(0%);
    padding-right: 33%;
    transition: .6s;
}
.banner_swiper .container{
    overflow: hidden;
}

.banner_swiper .container-fluid{
    padding: 0;
}

.banner_swiper .container-fluid {
    padding: 0;
    max-width: 2000px;
}




.header-search{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    position: relative;
    width: 850px;
}

.header-search button{
    background: unset;
    border: unset;
    position: absolute;
    right: 10px;
    /*top: -7px;*/
}

.header-search button:focus-visible{
    outline: unset !important;
}

.header-search button:focus{
    outline: unset !important;
}

.header-search svg{
    width: 22px;
    height: 22px;
}

.header-search input{
    background: transparent;
    border: 1px solid darkgray;
    padding: 13px;
    padding-right: 55px;
    width: 100%;
    border-radius: 3px;
}

.header-search input:focus{
    outline: unset !important;
    border: 1px solid #245b91;
}


.first-nav{
    /*background: var(--primary-color);*/
    padding-block: 10px 0;
}

.login{
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.navbar-toggler {
    padding: 0;
}

.navbar-brand{
    top: 12px;
    width: 150px;
    height: 93px;
    position: absolute;
    right: 0;
    transform: scale(1);
    transition: .5s;
}

.navbar-brand img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.first-nav .container{
    position: relative;
}

.first-nav .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 62px;
    border-bottom: 1px solid #a9a9a9;
    padding-bottom: 19px;
    margin-right: 103px;
}

.social-header{
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-collapse {
    padding-right: 170px;
    position: relative;
}

.navbar-nav{
    padding-right: 0;
}

.social-header a svg{
    width: 20px;
    height: 20px;

}

.navbar-brand {
    margin-right: 0;
}

.sec-nav .container{
    padding: 0;
}

.nav-item .nav-link{
    color: var(--primary-color) !important;
    font-weight: 600;
    font-size: 17px;
    overflow: hidden;
}

.nav-item{
    position: relative;
    /*overflow: hidden;*/
}

.nav-item.active::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--extra-color2);
    position: absolute;
    top: 0;
    right: 0em;
    -webkit-transition: width .55scubic-bezier(0,.81,.59,.99) 0s;
    -moz-transition: width .55s cubic-bezier(0, .81, .59, .99) 0s;
    transition: width .55scubic-bezier(0,.81,.59,.99) 0s;
    z-index: 1;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.nav-item .nav-link::before{
    content: '';
    display: block;
    width: 100%;
    width: 0px;
    height: 3px;
    background: var(--extra-color2);
    position: absolute;
    bottom: 0;
    right: 0;
    right: -100%;
    transition: .5s;
}

.nav-item:hover .nav-link::before{
    width: 100%;
    right: 0;
    transition: .5s;
}

.nav-item.active:hover .nav-link::before {
    width: 0;
    right: 0;
}

.menu-nav{
    position: absolute;
    background: #ffffff;
    padding: 7px 15px;
    width: fit-content;
    white-space: nowrap;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 180px;
    box-shadow: 0 0 9px 0px #d7d7d7;
    display: none;
    z-index: 2;
}

.menu-nav.show{
    display: flex;
}

.menu-nav li{
    padding: 11px 6px;
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
    text-align: center;
    text-align: right;
}

.menu-nav li:hover a {
    color: var(--secondary-color) !important;
    font-weight: 600;
}

.menu-nav li a{
    color: var(--primary-color) !important;
    text-decoration: unset;
    font-weight: 600;
}

.menu-nav li:last-child{
    border-bottom: unset;
}

.sec-nav .nav-link{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    position: relative;
    z-index: 2;
}

.sec-nav{
    padding-block: 10px;
    background: var(--additional-color);
}

.first-nav{
    background: var(--additional-color);
}

/*header*/



/*addressbar*/


.addressbar{
    padding-top: 190px;
}

.addressbar a, .addressbar span{
    padding: 3px 10px;
}

.addressbar a{
    color: gray !important;
    text-decoration: unset !important;
}

.addressbar span{
    color: var(--text-color);
    font-weight: 600;
}


/*addressbar*/


/*zeynep*/

.zeynep.opened {
    padding: 15px 13px;
    overflow: hidden;
}

.menu_cube1{
    position: inherit;
    width: 200px;
    height: 200px;
    border-radius: 33px;
    background: var(--login-color);
    box-shadow: 0 0 20px 0px #1b1e21;
    right: -149px;
    top: -65px;
    transform: rotate(45deg);
    z-index: -1;
}

.menu_cube2{
    position: inherit;
    width: 250px;
    height: 250px;
    border-radius: 33px;
    background: var(--login-color);
    box-shadow: 0 0 20px 0px #1b1e21;
    left: -110px;
    bottom: -65px;
    transform: rotate(45deg);
    z-index: -1;
}

.menu_cube3{
    position: absolute;
    width: 105px;
    height: 133px;
    border-radius: 33px;
    background: transparent;
    border: 5px solid #C4D92DFF;
    box-shadow: 0 0 20px 0px #1b1e21;
    right: -40px;
    bottom: -11px;
    transform: rotate(45deg);
}

.submenu.opened .menu_cube4{
    position: inherit;
    width: 150px;
    height: 150px;
    border-radius: 33px;
    background: var(--login-color);
    box-shadow: 0 0 20px 0px #1b1e21;
    right: -70px;
    bottom:  40px;
    transform: rotate(45deg);
    z-index: -2;
}



/*zeynep*/


/*title*/

.sit-title{
    margin-bottom: 40px;
}

.sit-title h3{
    font-family: 'kalame_bold';
    font-size: 33px;
    line-height: 47px;
}

/*title*/



/*swiper*/

.swiper-nav-box{
    display: flex;
    justify-content: left;
    gap: 13px;
    position: absolute;
    top: 8%;
    left: 0;
}

.sit-btn-next.swiper-button-next, .sit-btn-prev.swiper-button-prev {
    position: unset !important;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--secondary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
}

.sit-btn-next.swiper-button-next:after, .sit-btn-prev.swiper-button-prev:after {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}



.best-trainers .swiper-nav-box{
    top: 27%;
}


/*swiper*/



/*btn*/

.sit-btn {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.sit-btn:focus-visible, .sit-btn:focus{
    outline: unset !important;
}

.sit-btn .sit-link{
    padding: .8em 1.7em .8em 0.1em;
    color: #2a2d36;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: unset;
    font-weight: 600;
    font-size: 15px;
    border-radius: 2px;
    background: #8b451300;
    z-index: 7;
    position: relative;
    border: unset;
    cursor: pointer;
}

button:focus, button:focus-visible{
    outline: unset !important;
}

.sit-btn .sit-link:before {
    content: '';
    display: block;
    width: 35%;
    height: 100%;
    background: #1d1e21;
    position: absolute;
    top: 0;
    right: -1em;
    -webkit-transition: width .55s cubic-bezier(0,.81,.59,.99) 0s;
    -moz-transition: width .55s cubic-bezier(0, .81, .59, .99) 0s;
    transition: width .55s cubic-bezier(0,.81,.59,.99) 0s;
    z-index: 1;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.sit-btn .sit-link:hover:before {
    width: -webkit-calc(100% + .2em) !important;
    width: -moz-calc(100% + .2em) !important;
    width: calc(100% + .2em) !important;
}
.sit-btn.active .sit-link:before {
    width: -webkit-calc(100% + .2em) !important;
    width: -moz-calc(100% + .2em) !important;
    width: calc(100% + .2em) !important;
}

.sit-btn .sit-link:before {
    width: 80px;
}

.sit-btn .sit-link span{
    z-index: 2;
}

.sit-btn .sit-link:before {
    background-color: var(--extra-color2);
}

.btn-icon{
    font-size: 0.65em;
    transform: rotate(0deg);
    transition: transform 500ms ease-in-out;
    z-index: 2;
}

.sit-btn .sit-link:hover .btn-icon {
    transform: rotate(-45deg);
}

.sit-btn2 .sit-link:before {
    background-color: #d4d4d4;
}

/*btn*/




/*courses swiper*/

.courses_section{
    padding-block: 80px;
}

.each-course{
    background: #fff;
    box-shadow: 0 0 10px 1px #dadada;
    border-radius: 15px;
    padding: 30px 0;
    padding-inline: 35px;
    display: flex;
    flex-direction: column;
}

.courses_swiper .swiper-slide {
    padding-block: 14px;
    padding: 6px;
}

.course-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    /*padding-inline: 35px;*/
}

.course-cat{
    background: #fcdace;
    padding: 5px 25px;
    border-radius: 25px;
    align-self: flex-end;
}

.course-cat span{
    color: var(--secondary-color);
}

.course-name{
    height: 54px;
    color: var(--text-color) !important;
    text-decoration: unset !important;
}

.course-name h4{
    font-family: 'kalame_bold';
    font-weight: 500;
    font-size: 19px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 52px;
}

.course-img{
    width: 350px;
    height: 350px;
    margin-bottom: 20px;
    display: block;
    overflow: hidden;
    border-radius: 13px;
    align-self: center;
}


.course-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: .5s;
}
.loader__element {
    border-radius: 100%;
    border: 2px solid #fff;
    /* margin: calc(2px*2); */
    font-size: 1px;
    margin-right: 2px;
    /* margin-top: -4px; */
    padding-top: 0px;
    background: aqua;
    padding-right: 1px;
}

.loader__element:nth-child(1) {
    animation: preloader .6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
    animation: preloader .6s ease-in-out alternate .2s infinite;
}

.loader__element:nth-child(3) {
    animation: preloader .6s ease-in-out alternate .4s infinite;
}

@keyframes preloader {
    100% { transform: scale(2); }
}
.each-course:hover h4{
    color: var(--additional-color2);
}

.course-time{
    font-family: Samim-FD;
}
.course-info{
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-direction: row;
    justify-content: space-between;


}

.course-info{
    font-size: 14px;
    color: #000;
    padding-bottom: 0.4rem;
}

.course-info svg{
    stroke: #000;
    stroke-width: 3px;
}

.course-trainer{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding-bottom: 10px;
}

.course-te-name {
    display: flex;
    flex-direction: column;
}

.te-name{
    font-weight: 600;
    font-size: 16px;
}

.te-info{
    color: var(--secondary-color);
    font-size: 16px;
}

.course-te-img{
    width: 45px;
    height: 45px;
}

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

.course-detail-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}



.off-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-direction: row-reverse;
}

.off-box .off{
    background: var(--secondary-color);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 17px;
    font-family: Samim-FD;
}
#exampleModal input{

    padding: 1.3rem;
    border-radius: 14px;
}
#exampleModal .modal-body {

    padding-bottom: 0;

}
.phone__show{
    font-weight: 600;
    font-size: 14px;
}
.modal-footer{
    border-top:unset !important;
}
.modal-footer button{
    width: 100% !important;
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    font-size: 16px;
    padding: 0.8rem;
    border-radius: 15px;
    color: #fff;
}
.modal-dialog {
    max-width: 375px ;
}

.modal-content {
    padding: 1.2rem 1.5rem;
    border-radius: 17px;
}
.modal-header{
    justify-content: center !important;
    border-bottom: unset !important;
    flex-direction: column;
}
.modal-header div{
    display: flex;
    width: 100%;
}
.modal-header div img{
    width: 150px;
    margin-bottom: 0.5rem;
}
.modal__register_logo{
    justify-content: center !important;

}
.before-off{
    font-size: 16px;
    /*font-weight: 600;*/
    color: #ababab;
    text-decoration: line-through;
    font-family: Samim-FD;
}

.final-price{
    display: flex;
    align-items: end;
    justify-content: flex-end;
    font-weight: 600;
    font-size: 20px;
    gap: 4px;
    font-family: Samim-FD;
}

.col-course{
    margin-bottom: 30px;
}

.dark-sec .each-course {
    background: #0D2439;
    box-shadow: 0 0 10px 1px #0D2439;
}

.dark-sec .course-name h4 {
    color: #fff;
}

.dark-sec .course-info{
    color: #fff;
}

.dark-sec .course-info svg{
    filter: invert(1);
}

.dark-sec .te-name {
    color: #ffff;
}

.dark-sec .te-info {
    color: #07A698;
}

.dark-sec .final-price {
    color: #fff;
}

.dark-sec .before-off {
    color: #bfbfbf;
}

.dark-sec .btn-icon svg path{
    fill: #fff;
}

.dark-sec .sit-btn .sit-link:before {
    background-color: var(--secondary-color);
}

/*.dark-sec .course-cat{*/
/*    background: #fc541a4f !important;*/
/*}*/

.dark-sec .course-cat {
    background: #334A36 !important;
}

.dark-sec .course-cat span{
    color: var(--extra-color2);
}





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

    .each-course:hover .course-img img{
        transform: scale(1.1);
        transition: .5s;
    }

}

/*courses swiper*/








/*banner*/

.banner{
    position: relative;
    overflow: hidden;
}

.banner.loaded::after{
    animation: rotation 100s infinite linear;
}

.banner::before{
    position: absolute;
    content: "";
    background: var(--additional-color);
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 0% 100%);
    z-index: -1;
}


.banner::after{
    position: absolute;
    content: "";
    background: #6697BB;
    width: 300px;
    height: 300px;
    border-radius: 25px;
    transform: rotate(30deg);
    right: -190px;
    top: 20%;
    /*opacity: .7;*/
    /*animation: rotation 100s infinite linear;*/
}


@keyframes rotation {
    from {
        transform: rotate(30deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.banner .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.col-banner-content{
    display: flex;
    flex-direction: column-reverse;
    padding-top: 165px;
}

.col-banner-img{
    padding-top: 127px;
}

.sit-small {
    background-color: var(--secondary-color);
    padding: 0 55px;
    color: #fff;
    width: fit-content;
    clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%);
    font-weight: 600;
    margin-bottom: 20px;
    border-radius: 2px;
}

.banner .sit-small{
    margin-bottom: 40px;
}

.banner-title{
    margin-bottom: 40px;
}

.banner-title h2{
    font-family: 'kalame_bold';
    font-size: 30px;
    margin-bottom:1rem ;
    line-height: 52px;
}

.banner-text{
    margin-bottom: 60px;
}

.banner-text p{
    font-family: "kalame_bold";
    font-size: 17px;
}

.banner-btns{
    display: flex;
    align-self: center;
    justify-content: space-between;
    width: 80%;
}

.banner-content{
    padding-bottom: 130px;
}

.banner-image{
    width: 100%;
    height: 800px;
    transform: translateY(-150%);
    transition: .6s;
    /*position: relative;*/
    /*background-image: url(../images/banner_img.png);*/
    background-size: contain;
    background-repeat: no-repeat;
}

.col-banner-img{
    position: relative;
}

/*.col-banner-img:before{*/
/*    position: absolute;*/
/*    content: '';*/
/*    width: 400px;*/
/*    height: 400px;*/
/*    background: silver;*/
/*    border-radius: 25px;*/
/*    left: 2%;*/
/*    transform: rotate(45deg);*/
/*}*/


.banner-image.loaded{
    transform: translateY(0%);
    transition: .6s;
}

.banner-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 10px 5px #bbb);
}


/*banner*/



/*accordion*/


.faqs{
    padding-block: 90px 80px;
}

.faqs .whole-accordion {
    padding-top: 0px;
    width: 100%;
}

.faqs-row{
    justify-content: center;
}

.asked-questions{
    margin-top: 112px;
    margin-bottom: 45px;
}

.whole-accordion{
    display: flex;
    flex-direction: column;
}

.asked-title{
    position: relative;
    z-index: 2;
}

.asked-title img{
    position: absolute;
    z-index: -1;
    bottom: 24%;
    right: -37%;
}

.asked-title h2{
    font-family: LaleZar;
    font-size: 40px;
}
.asked-title span{
    position: absolute;
    bottom: -26%;
    left: -78px;
    color: #B3B3B3;
    text-align: right;
    font-size: 36px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 45px;
    font-family: LaleZar;
}


.asked-questions .row{
    justify-content: space-evenly;
}

.accordion-item-body-content span {
    font-size: 45px;
    font-family: 'Balonku';
    /*font-family: 'Baltimore';*/
    color: var(--extra-color2);
    width: 60px;

}


.accordion {
    width: 100%;
    max-width: 1185px;
    margin: 2rem auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.whole-accordion{
    position: relative;
    padding-top: 40px;
}

.accordion-item-body-content p {
    margin: 5px 19px;
    font-size: 15px;
}

.accordion-item {
    text-align: justify;
    font-style: normal;
    background: #fff;
    z-index: 2;
    border: unset;
    border-radius: 0;
    border-bottom: 1px solid #bbbbbb;
}

.accordion-item-header {
    padding: 0.3rem 0rem 0.3rem 4rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: var(--primary-color);
    text-align: justify;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
}


.accordion-item-header svg{
    margin-left: 8px;
    margin-right: 20px;
}

.accordion-item-header::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_169_54)"><path d="M10 1.63C14.62 1.63 18.37 5.38 18.37 10H20C20 4.48 15.52 0 10 0V1.63ZM1.63 10C1.63 5.38 5.38 1.63 10 1.63V0C4.48 0 0 4.48 0 10H1.63ZM10 18.37C5.38 18.37 1.63 14.62 1.63 10H0C0 15.52 4.48 20 10 20V18.37ZM18.37 10C18.37 14.62 14.62 18.37 10 18.37V20C15.52 20 20 15.52 20 10H18.37ZM10.61 12.13L7.17 8.3L5.96 9.39L9.4 13.22L10.61 12.13ZM12.84 8.3L9.4 12.13L10.61 13.22L14.05 9.39L12.84 8.3ZM7.17 8.3C6.87 7.96 6.35 7.94 6.02 8.24C5.68 8.54 5.66 9.06 5.96 9.39L7.17 8.3ZM10.01 12.67L9.4 13.22C9.55 13.39 9.78 13.49 10.01 13.49C10.24 13.49 10.46 13.39 10.62 13.22L10.01 12.67ZM14.06 9.39C14.36 9.05 14.33 8.54 14 8.24C13.66 7.94 13.15 7.97 12.85 8.3L14.06 9.39Z" fill="gray"/></g><defs><clipPath id="clip0_169_54"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
    font-size: 1.8rem;
    position: absolute;
    left: 1.7rem;
    font-weight: 500;
    color: var(--primary-color);
}

.question-span{
    padding-right: 1.2rem;
    font-weight: 600;
}

.accordion-item-header.active::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_169_57)"><path d="M10 18.37C5.38 18.37 1.63 14.62 1.63 10H0C0 15.52 4.48 20 10 20V18.37ZM18.37 10C18.37 14.62 14.62 18.37 10 18.37V20C15.52 20 20 15.52 20 10H18.37ZM10 1.63C14.62 1.63 18.37 5.38 18.37 10H20C20 4.48 15.52 0 10 0V1.63ZM1.63 10C1.63 5.38 5.38 1.63 10 1.63V0C4.48 0 0 4.48 0 10H1.63ZM9.39 7.87L12.83 11.7L14.04 10.61L10.6 6.78L9.39 7.87ZM7.16 11.7L10.6 7.87L9.39 6.78L5.95 10.61L7.16 11.7ZM12.83 11.7C13.13 12.04 13.65 12.06 13.98 11.76C14.32 11.46 14.34 10.94 14.04 10.61L12.83 11.7ZM9.99 7.33L10.6 6.78C10.45 6.61 10.22 6.51 9.99 6.51C9.76 6.51 9.54 6.61 9.38 6.78L9.99 7.33ZM5.94 10.61C5.64 10.95 5.67 11.46 6 11.76C6.34 12.06 6.85 12.03 7.15 11.7L5.94 10.61Z" fill="gray"/></g><defs><clipPath id="clip0_169_57"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
}

.accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-item-body-content {
    padding: 0;
    border-top: unset;
    border-image: unset;
    display: flex;
    flex-direction: row;
    color: #000;
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.accordion-item-body-content p{
    margin: 5px 19px;
    font-size: 15px;
}

/*accordion*/



/*footer*/

.footer{
    padding-top: 20px;
}

.footer .container{
    padding-bottom: 90px;
}

.footer .container-fluid{
    padding-left: 0;
    background: var(--primary-color);
}

.footer .container-fluid .footer-right{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 7px;
    font-size: 13px;
}

.footer .container-fluid .footer-right span{
    color: #cdcdcd;
    text-align: center;
}

.footer .container-fluid .footer-right a{
    color: var(--secondary-color);
    font-weight: 600;
}

.footer-logo{
    display: block;
    width: 120px;
    height: 120px;
}

.col-footer{
    padding-left: 70px;
}

.footer-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-contact{
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-p p{
    font-size: 14px;
    padding-bottom: 10px;
    text-align: justify;
}

.footer-contact a{
    color: var(--primary-color) !important;
    display: flex;
    gap: 10px;
    font-weight: 600;
    text-decoration: unset;
    font-size: 14px;
    align-items: center;
}

.footer-contact a span{
    width: 70%;
}

.image_icon{
    width: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-contact a:hover{
    color: var(--secondary-color) !important;
}

/*.footer-contact a:hover svg path{*/
/*    stroke: var(--secondary-color) !important;*/
/*}*/


.footer .row{
    align-items: center;
    justify-content: center;
}

.footer-title{
    background-color: var(--secondary-color);
    padding: 0 30px;
    color: #fff;
    width: fit-content;
    clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%);
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 13px;
}

.col-footer-links{
    padding-top: 120px;
    height: 100%;
    min-height: 336px;
}

footer ul li {
    list-style: none;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
    font-size: 13px;
}


footer .footer-links ul li a{
    color: var(--primary-color) !important;
    font-weight: 600;
    text-decoration: unset;
}

footer ul li:hover a{
    color: var(--secondary-color) !important;
    transition: .4s;
}

.footer-social{
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;

}

.footer-social a{
    text-decoration: unset;
}

.footer-social a svg{
    width: 22px;
    height: 22px;
}

.col-footer-social{
    height: 100%;
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    justify-content: flex-end;
}

.footer-links ul{
    padding-right: 0;
    display: flex;
    flex-direction: column;
    animation: initial;
    align-items: center;
    text-align: center;
}

.footer-links{
    display: flex;
    flex-direction: column;
    align-items: center;
}




/*footer*/





/*fix menu bottom*/


.each-item-bottom.active .header-icon{
    background: #036faf26;
}


.mobile-navbar-icons {
    display: none;
    position: fixed;
    bottom: 0;
    justify-content: center;
    z-index: 100;
    padding: unset;

}

.mobile-navbar-icons .row{
    width: 100%;
}

.menu-bottom-mobile{
    background: #ffffff;
    padding: 7px 12px;
    /* border-radius: 30px 30px 0px 0px; */
    width: 100%;
    box-shadow: 0px -1px 8px #dbdbdb;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 17px 17px 0 0;
}

.each-item-bottom{
    width: fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: unset !important;
}

.each-item-bottom span{
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 600;
    z-index: 1;
}

.each-item-bottom .header-cart-link, .each-item-bottom .header-profile-link{
    order: -1;
}

.header-icon {
    /*width: 28px;*/
    /*height: 35px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: .5px solid #FC0DA9; */
    border-radius: 50%;
    /* padding: 8px; */
    position: relative;
    /*padding-top: 10px;*/
    width: 30px;
    height: 30px;
}
.header-icon svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}

.cart-icon-count{
    position: absolute;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #49526f;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    top: 2px;
    right: -1px;
}

.notif-icon-count{
    position: absolute;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--extra-color2);
    border-radius: 50%;
    color: var(--additional-color2);
    font-size: 14px;
    top: 2px;
    right: -8px;
}


.header-icons-box {
    justify-content: flex-start !important;
    flex-direction: row-reverse;
}
.header-profile-icon span{
    display: block;
}

.header-profile-icon svg.svg-enter{
    display: none;
}

/*.header-profile-icon{*/
/*    height: unset;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    border-radius: 29px;*/
/*    width: 80px;*/
/*    justify-content: space-between;*/
/*    gap: 4px;*/
/*    font-size: 12px;*/
/*    width: fit-content;*/
/*    height: 41px;*/
/*    color: var(--primary-color) !important;*/
/*    font-weight: 600;*/
/*}*/


/*fix menu bottom*/






/*responsive*/
/*responsive*/
/*responsive*/

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

    .banner::after {
        width: 250px;
        height: 232px;
    }

}

@media screen and (max-width: 1500px){
    .banner::before {
        clip-path: polygon(0 0, 100% 0, 100% 83%, 0% 100%);
    }

    .first-nav .row {
        padding-left: 23px;
    }
}

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

    .col-banner-img:before {
        width: 340px;
        height: 340px;
        top: 25%;
        left: 11%;
    }


    .profile-btn {
        width: 77px;
    }


    .sit-btn .sit-link {
        padding: 0.7em 0.7em 0.7em 1.2em;
        font-size: 15px;
    }

    .before-off {
        font-size: 16px;
    }

    .final-price {
        font-size: 16px;
    }

    .off-box .off {
        font-size: 13px;
        padding: 2.1px 7.9px;
    }


    .banner::before {
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
    }


    .banner::after {
        width: 220px;
        height: 212px;
        top: 13%;
    }

    .header-search {
        width: 766px;
    }

    .sit-title h3 {
        font-size: 35px;
    }

    .sit-title {
        margin-bottom: 23px;
    }

    .banner-image:before {
        left: -21%;
    }

    .banner-image {
        height: 617px;
    }

    .col-banner-img {
        padding-top: 148px;
    }

    .banner-image:before {
        width: 350px;
        height: 350px;
    }
}

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

    header.scroll {
        height: 115px;
    }

    .course-img {
        width: 300px;
        height: 300px;
    }

    .col-banner-img:before {
        width: 280px;
        height: 280px;
        top: 25%;
        left: 11%;
    }

    .banner-image {
        height: 616px;
    }

    .banner-image:before {
        width: 300px;
        height: 300px;
    }

    .banner-title h2{
        font-size: 38px;
    }

    .sit-title h3 {
        font-size: 29px;
    }

    .header-search {
        width: 492px;
    }

    .navbar-brand {
        top: 16px;
        width: 139px;
        height: 85px;
    }

}

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

    .course-img {
        width: 250px;
        height: 250px;
    }

    .desc-search{
        display: none;
    }

    .mobile-search{
        display: block;
    }


    .notif-menu.show {
        display: none !important;
    }

    .my-header-profile{
        display: none !important;
    }

    /*.notification {*/
    /*    display: block !important;*/
    /*}*/

    .navbar-toggler {
        display: flex !important;
    }

    .navbar-toggler-icon svg{
        width: 40px;
        height: 40px;
    }



    .right-navbar{
        display: flex;
        align-items: center;
        gap: 20px;
        width: 100%;
        justify-content: space-between;
    }

    .mobile-search{
        width: 100%;
    }

    .col-banner-img:before {
        width: 250px;
        height: 250px;
        left: 3%;
        top: 10%;
    }

    .banner-content.loaded {
        padding-right: 17%;
    }

    header.scroll .navbar-brand {
        transform: scale(1);
    }

    .course-content {
        gap: 10px;
        padding-inline: 22px;
    }

    .course-detail-box {
        min-height: 77px;
    }

    .sit-btn .sit-link {
        gap: 6px;
    }
    .off-box {
        gap: 3px;
    }

    .before-off {
        font-size: 15px;
    }
    .final-price {
        font-size: 15px;
    }

    .course-img {
        padding-inline: 0;
    }

    header.scroll{
        position: absolute;
    }

    header{
        position: absolute;
    }

    header .sit-btn{
        display: none;
    }

    /*.sec-nav{*/
    /*    display: none;*/
    /*}*/

    .first-nav {
        padding-block: 0px 0;
    }

    .first-nav .row {
        padding-right: 15px;
        margin-right: 0;
        border-bottom: 0;
        padding-bottom: 3px;
    }

    .header-search {
        width: 100% !important;
    }

    .navbar-brand {
        top: unset;
        right: unset;
        position: relative;
        width: 109px;
        height: 78px;
    }

    .cart-btn{
        display: none;
    }

    .mobile-navbar-icons {
        display: flex;
    }

    .banner::before {
        clip-path: polygon(0 0, 100% 0, 100% 91%, 0% 100%);
    }

    .header-search {
        width: 310px;
    }

    .first-nav .row {
        padding-right: 0;
        padding-left: 0;
    }


    .col-banner-img {
        padding-top: 0;
    }

    .banner-content {
        padding-bottom: 40px;
    }

    .col-banner-content {
        padding-top: 145px;
    }

    .banner-image {
        width: 100%;
        height: 461px;
    }

    .banner-title h2 {
        font-size: 34px;
        line-height: 54px;
        word-spacing: 3px;
    }

    .banner-title {
        margin-bottom: 14px;
    }

    .banner .sit-small {
        margin-bottom: 25px;
    }

    .banner-text {
        margin-bottom: 39px;
    }


    .sec-nav .container {
        flex-direction: row-reverse;
    }

    .sec-nav {
        padding-block: 0 10px;
    }

    .banner {
        padding-top: 20px;
    }

    .sit-title h3 {
        font-family: 'kalame_bold';
        font-size: 31px;
    }

    .sit-title {
        margin-bottom: 25px;
    }

    .col-footer-links{
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: flex-start;
    }

    .col-footer-social {
        align-items: center;
        align-self: center;
        justify-content: center;
        padding-top: 25px;

    }

    .col-footer-links {
        padding-top: 83px;
    }

    .footer .container {
        padding-bottom: 60px;
    }

    .footer {
        padding-bottom: 80px;
    }

    .notification {
        display: none;
    }


}

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

    .course-img {
        width: 350px;
        height: 350px;
    }

    .course-detail-box {
        min-height: 65px;
    }

    .banner-title h2 {
        font-size: 30px;
        line-height: 44px;
    }


    .sit-btn .sit-link:before {
        width: 100%;
    }

    .sit-title h3 {
        font-size: 26px;
    }

    .sit-btn {
        min-width: fit-content;
    }

    .sit-btn .sit-link span {
        z-index: 2;
        width: max-content;
    }



    .banner-image {
        width: 100%;
        height: 377px;
    }

    /*.banner-title h2 {*/
    /*    font-size: 40px;*/
    /*    word-spacing: 4px;*/
    /*}*/



}

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

    .course-img {
        width: 250px;
        height: 250px;
    }

    .banner-image.loaded {
        transform: translateY(-15%);
    }

    .addressbar span {
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-hight);
    }

    .addressbar a{
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-hight);
    }

    .col-course {
        margin-bottom: 23px;
    }

    .footer-p p {
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-hight);
    }

    .footer-contact a{
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-hight);
    }

    .question-span {
        font-size: var(--mobile-title-font);
        line-height: var(--mobile-line-hight);
    }

    .accordion-item-body-content p {
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-hight);
    }

    .course-info {
        font-size: var(--mobile-text-font);
    }

    .course-info {
        font-size: 11px;
    }

    .sit-btn .sit-link span {
        font-size: var(--mobile-title-font);
    }

    .sit-btn .sit-link {
        gap: 4px;
    }

    .course-price-box{
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .each-course {
        padding: 20px 0;
        padding-inline: 20px;
    }

    .sit-title {
        margin-bottom: 0;
    }

    body p{
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-hight);
    }


    .course-name h4 {
        font-size: var(--mobile-title-font);
        line-height: var(--mobile-line-hight);
    }

    /*.course-img {*/
    /*    width: 100%;*/
    /*    height: 141px;*/
    /*    margin-bottom: 10px;*/
    /*}*/


    .addressbar {
        padding-top: 166px;
    }

    /*.course-detail-box {*/
    /*    min-height: 96.8px;*/
    /*}*/


    .col-footer {
        padding-left: 12px;
    }

    .col-banner-img:before {
        width: 214px;
        height: 214px;
        left: -1%;
        top: 10%;
    }

    .col-banner-img {
        padding-inline: 0;
        height: 300px;
    }

    .banner-content.loaded {
        padding-right: 2%;
    }

    .footer {
        padding-bottom: 69px;
    }

    .header-search svg {
        width: 18px;
        height: 20px;
    }


    .col-footer-links {
        min-height: 239px;
        padding-top: 37px;
    }

    .footer-title {
        font-size: var(--mobile-text-font);
    }

    footer ul li:hover a {
        font-size: var(--mobile-text-font);
    }

    footer ul li {
        margin-bottom: 13px;
    }

    .footer .container {
        padding-bottom: 30px;
    }

    .col-footer-social {
        padding-top: 0;
    }

    .footer .container-fluid .footer-right{
        font-size: 11px;
    }



    .banner.loaded::after {
        display: none;
    }


    .header-search input::placeholder {
        font-size: 14px;
    }


    .navbar-brand {
        width: 88px;
        height: 72px;
    }

    .header-search {
        width: 100% !important;
    }

    .header-search input {
        padding: 8px;
        padding-right: 46px;
    }

    .first-nav .row {
        padding-inline: 0px;
    }

    .each-item-bottom span{
        font-size: 11px;
    }

    .header-icon {
        width: 33px;
        height: 33px;
    }

    .banner::before {
        clip-path: polygon(0 0, 100% 0, 100% 89%, -107% 100%);
    }

    .banner-title h2 {
        font-size: 40px;
        word-spacing: 3px;
    }

    .banner-image {
        width: 100%;
        height: 311px;
    }

    .banner .sit-small {
        margin-bottom: 21px;
    }

    .banner-title h2 {
        font-size: 20px;
        line-height: 29px;
    }


    .banner-btns {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }


    .sit-btn .sit-link {
        font-size: 15px;
    }

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

    .col-banner-content {
        padding-top: 123px;
    }


    .sit-btn {
        min-width: max-content;
    }

    .sit-btn .sit-link {
        padding: 0.6em 0em 0.6em 1em;
    }

    .first-nav {
        padding-inline: 14px;
    }

    .courses_section {
        padding-block: 0px;
    }

    .footer-logo {
        width: 88px;
        height: 88px;
    }

    .sit-small {
        font-size: 14px;
        padding: 0 31px !important;
    }


    .sit-title h3 {
        font-size: var(--mobile-title-main);
        line-height: var(--mobile-line-hight);
    }

    .sit-btn-next.swiper-button-next, .sit-btn-prev.swiper-button-prev {
        width: 35px;
        height: 35px;
    }

    .swiper-nav-box {
        gap: 7px;
    }

    .row {
        margin: 0;
    }

    .swiper-nav-box {
        left: 11px;
    }

    .best-trainers .swiper-nav-box {
        top: 21%;
    }


}

@media screen and (max-width: 500px){
    .course-img {
        width: 200px;
        height: 200px;
    }
}

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

    .course-detail-box {
        min-height: 100px;
    }


    .each-item-bottom {
        width: 51.2px;
    }

    .navbar-toggler-icon svg {
        width: 33px;
        height: 33px;
    }

    .header-items {
        gap: 6px;
    }

    .header-search svg {
        width: 17px;
        height: 18px;
    }

    /*.sit-btn {*/
    /*    min-width: 160px;*/
    /*}*/

    .banner-title {
        margin-bottom: 6px !important;
    }

    .question-span {
        padding-right: 0.4rem;
        font-weight: 600;
        font-size: 14px;
    }

    .accordion-item-header::after {
        left: 0.7rem;
    }

    .accordion-item-header {
        padding: 0.3rem 0rem 0.3rem 2.5rem;
    }

    .accordion-item-body-content p {
        font-size: 13px;
        line-height: 23px;
    }

    .header-icon {
        width: 25px;
        height: 25px;
    }

    .navbar-brand {
        width: 79px;
        height: 75px;
    }

    .first-nav .container {
        padding: 0;
    }

    .banner-title h2 {
        font-size: 15px;
        word-spacing: 3px;
    }

    .banner-text p {
        font-family: "kalame_bold";
        font-size: 15px;
    }

    .banner-text {
        margin-bottom: 23px;
    }
    .banner .sit-small {
        margin-bottom: 16px;
    }

    .banner-image {
        width: 100%;
        height: 353px;
    }

    .banner-title {
        margin-bottom: 7px;
    }

    .banner .sit-small {
        margin-bottom: 15px;
        padding: 0 35px;
        font-size: 14px;
    }

    .banner::before {
        clip-path: polygon(0 0, 100% 0, 100% 90%, -64% 100%);
    }


    .col-course {
        padding: 0;
    }

    /*.course-detail-box{*/
    /*    flex-direction: column;*/
    /*    align-items: flex-end;*/
    /*}*/


    /*.course-detail-box .sit-btn{*/
    /*    align-self: flex-start;*/
    /*}*/



    .footer-title {
        margin-bottom: 20px;
        font-size: 12px;
    }


    .col-footer {
        padding-left: 0px;
        padding-right: 0;
    }

    .col-footer-links {
        padding-top: 46px;
    }

    .course-content {
        padding-inline: 10px;
    }
    .course-img {
        /*padding-inline: 23px;*/
    }

    .sit-btn .sit-link {
        padding: 0.6em 0em 0.6em 1em;
        gap: 8px;
        text-decoration: unset;
        font-size: 14px;
    }

    .before-off {
        font-size: 15px;
    }

    .off-box .off {
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 17px;
    }

    .final-price {
        font-size: 16px;
        gap: 6px;
    }

    .te-name {
        font-size: 14px;
    }

    .te-info {
        font-size: 15px;
    }

    .each-course {
        padding: 20px 20px;
    }

    .course-cat {
        padding: 4px 19px;
        font-size: 14px;
    }

    .footer .container-fluid .footer-right span {
        text-align: center;
    }

    .footer .container-fluid .footer-right {
        font-size: 12px;
    }

    .footer .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .course-name h4 {
        font-size: var(--mobile-title-font);
    }

    .course-img {
        width: 190px;
        height: 190px;
    }


}

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

    .course-content {
        padding-inline: 0;
    }


    .modal-dialog {
        max-width: 100%;
    }

    .modal-header div img {
        width: 114px;
    }

    .banner-title h2 {
        font-size: 16px;
        word-spacing: 3px;
        line-height: 41px;
    }

    .course-img {
        /*padding-inline: 23px;*/
        margin-bottom: 12px;
        /*height: 159px;*/
    }
    .course-name h4 {
        font-size: var(--mobile-title-font);
    }

    .course-content {
        gap: 6px;
    }
    /*.course-detail-box {*/
    /*    gap: 10px;*/
    /*}*/


    .sit-title {
        margin-bottom: 10px;
    }


}

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


    .col-banner-img:before {
        width: 190px;
        height: 190px;
        left: -2%;
        top: 10%;
    }

    .header-search {
        width: 100% !important;
    }

    .each-item-bottom span{
        font-size: 11px;
    }

    .header-icon {
        width: 30px;
        height: 30px;
    }

    .col-footer-links {
        padding-inline: 0;
    }

    .sit-btn .sit-link {
        font-size: 14px;
    }
}

/*responsive*/
/*responsive*/
/*responsive*/