/*
Theme Name: Balot School
Theme URI: https://example.com/
Author: Devix
Author URI: https://devix.com/
Description: قالب وردپرس تبدیل‌شده از فایل HTML بلوط اسکول با ایمپورت مستقیم CSS و JS داخل header.php و footer.php.
Version: 1.0.0
Text Domain: balotschool
*/

@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 400;
    src: url('fonts/woff/YekanBakhFaNum-Regular.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-Regular.woff2') format('woff2')
}
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 600;
    src: url('fonts/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2')
}
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 700;
    src: url('fonts/woff/YekanBakhFaNum-Bold.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-Bold.woff2') format('woff2')
}
@font-face {
    font-family: devix;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/woff/YekanBakhFaNum-ExtraBlack.woff') format('woff'),url('fonts/woff2/YekanBakhFaNum-ExtraBlack.woff2') format('woff2')
}
@font-face {
    font-family: devix-2;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/woff2/Mahoor-ExtraBold.woff2') format('woff2')
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
:root {
    --clr-1: #1B84FA;
    --clr-2: #a6ccf7;
}
::selection {
    color: #24252b;
    background: #b7bbc4
}
html {
    font-size: clamp(12px, 2vw, 16px);
}
body {
    margin: 0!important;
    background-color: #F0F2FF
}
a {
    text-decoration: none!important
}
ul,li{
    list-style: none;
}
a,b,button,div,h1,h2,h3,h4,h5,h6,i,input,label,p,section,select,strong,textarea,time,ul {
    font-family: devix,serif!important;
    margin: 0
}
#devix span {
    font-family: devix,serif;
}
.clear{clear:both}.img-responsive{display:block;max-width:100%;height:auto}.pp{padding:0!important}.pl{padding-left:0!important}.pr{padding-right:0!important}.container,.container-fluid{width:100%;padding-left:var(--bs-gutter-x,0.75rem);padding-right:var(--bs-gutter-x,0.75rem);margin-left:auto;margin-right:auto}@media (min-width: 576px){.container{max-width: 97%;}}@media (min-width: 768px){.container{max-width: 97%;}}@media (min-width: 992px){.container{max-width: 97%;}}@media (min-width: 1200px){.container{max-width: 97%;}}@media (min-width: 1400px){.container{max-width: 97%;}}@media (min-width: 1700px){.container{max-width:1676px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-left:calc(var(--bs-gutter-x) / -2);margin-right:calc(var(--bs-gutter-x) / -2)}.row-cols-auto > *{flex:0 0 auto;width:auto}.row-cols-1 > *{flex:0 0 auto;width:100%}.row-cols-2 > *{flex:0 0 auto;width:50%}.row-cols-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-4 > *{flex:0 0 auto;width:25%}.row-cols-5 > *{flex:0 0 auto;width:20%}.row-cols-6 > *{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}@media(max-width:575px){.hidden-xs{display:none}}@media (min-width: 576px){.hidden-sm{display:none}.col-sm{flex:1 0 0}.row-cols-sm-auto > *{flex:0 0 auto;width:auto}.row-cols-sm-1 > *{flex:0 0 auto;width:100%}.row-cols-sm-2 > *{flex:0 0 auto;width:50%}.row-cols-sm-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4 > *{flex:0 0 auto;width:25%}.row-cols-sm-5 > *{flex:0 0 auto;width:20%}.row-cols-sm-6 > *{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333333%}.col-sm-2{flex:0 0 auto;width:16.6666666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-5{flex:0 0 auto;width:41.6666666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333333%}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333333%}.col-sm-11{flex:0 0 auto;width:91.6666666667%}.col-sm-12{flex:0 0 auto;width:100%}}@media (max-width: 991px){.hidden-md{display:none}.col-md{flex:1 0 0}.row-cols-md-auto > *{flex:0 0 auto;width:auto}.row-cols-md-1 > *{flex:0 0 auto;width:100%}.row-cols-md-2 > *{flex:0 0 auto;width:50%}.row-cols-md-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4 > *{flex:0 0 auto;width:25%}.row-cols-md-5 > *{flex:0 0 auto;width:20%}.row-cols-md-6 > *{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333333%}.col-md-2{flex:0 0 auto;width:16.6666666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex:0 0 auto;width:41.6666666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333333%}.col-md-8{flex:0 0 auto;width:66.6666666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333333%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width: 992px){.hidden-lg{display:none}.col-lg{flex:1 0 0}.row-cols-lg-auto > *{flex:0 0 auto;width:auto}.row-cols-lg-1 > *{flex:0 0 auto;width:100%}.row-cols-lg-2 > *{flex:0 0 auto;width:50%}.row-cols-lg-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4 > *{flex:0 0 auto;width:25%}.row-cols-lg-5 > *{flex:0 0 auto;width:20%}.row-cols-lg-6 > *{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333333%}.col-lg-2{flex:0 0 auto;width:16.6666666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333333%}.col-lg-5{flex:0 0 auto;width:41.6666666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333333%}.col-lg-8{flex:0 0 auto;width:66.6666666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333333%}.col-lg-11{flex:0 0 auto;width:91.6666666667%}.col-lg-12{flex:0 0 auto;width:100%}}@media (min-width: 1200px){.hidden-xl{display:none}.col-xl{flex:1 0 0}.row-cols-xl-auto > *{flex:0 0 auto;width:auto}.row-cols-xl-1 > *{flex:0 0 auto;width:100%}.row-cols-xl-2 > *{flex:0 0 auto;width:50%}.row-cols-xl-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4 > *{flex:0 0 auto;width:25%}.row-cols-xl-5 > *{flex:0 0 auto;width:20%}.row-cols-xl-6 > *{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333333%}.col-xl-2{flex:0 0 auto;width:16.6666666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333333%}.col-xl-5{flex:0 0 auto;width:41.6666666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333333%}.col-xl-8{flex:0 0 auto;width:66.6666666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333333%}.col-xl-11{flex:0 0 auto;width:91.6666666667%}.col-xl-12{flex:0 0 auto;width:100%}}@media (min-width: 1400px){.hidden-xxl{display:none}.col-xxl{flex:1 0 0}.row-cols-xxl-auto > *{flex:0 0 auto;width:auto}.row-cols-xxl-1 > *{flex:0 0 auto;width:100%}.row-cols-xxl-2 > *{flex:0 0 auto;width:50%}.row-cols-xxl-3 > *{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4 > *{flex:0 0 auto;width:25%}.row-cols-xxl-5 > *{flex:0 0 auto;width:20%}.row-cols-xxl-6 > *{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.3333333333%}.col-xxl-2{flex:0 0 auto;width:16.6666666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.3333333333%}.col-xxl-5{flex:0 0 auto;width:41.6666666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.3333333333%}.col-xxl-8{flex:0 0 auto;width:66.6666666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.3333333333%}.col-xxl-11{flex:0 0 auto;width:91.6666666667%}.col-xxl-12{flex:0 0 auto;width:100%}}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}@media (min-width: 576px){.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}}@media (min-width: 768px){.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}}@media (min-width: 992px){.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}}@media (min-width: 1200px){.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}}@media (min-width: 1400px){.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}}.p-full{padding:0 12px}figure{margin:0;line-height: 0;}
.container {
    max-width: 1280px;
}
/*******************************/
/************ header ***********/
/*******************************/
.primary-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 70px;
    z-index: 9999;
    position: relative;
}
.header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
}
.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-box img {
    display: block;
    max-width: 100%;
    height: auto;
}
.nav-bar ul {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: #24252b;
    font-weight: 600;
    font-size: 1rem;
}
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    height: 52px;
    padding: 0 16px;
    border-radius: 1rem;
    background-color: var(--clr-1);
    transition: 0.3s;
}
.login-btn:hover {
    box-shadow: 0 4px  0 0 var(--clr-2);
}
.nav-bar a:hover {
    color: var(--clr-1);
}
.search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    padding: 0 32px 0 16px;
    transition: 0.3s;
}
.search-box:focus-within {
    box-shadow: 0 0 0 4px var(--clr-2);
}
.search-box span {
    width: 3px;
    border-radius: 50em;
    height: 24px;
    background-color: var(--clr-2);
    margin: 0 0 0 16px;
    transform: 0.3s;
}
.search-box:focus-within span {
    background-color: var(--clr-1);
}
.search-box input,
.search-box button {
    background-color: transparent;
    border: none;
    outline: none;
}
.search-box input {
    font-size: 1rem;
    font-weight: 600;
    color: #24252b;
    width: 100%;
    height: 52px;
}
.search-box input::placeholder {
    color: rgba(0, 0, 0, 0.8);
}
.search-box button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.search-box svg {
    width: 24px;
    height: 24px;
}
/* hero section */
.bg-hero {
    position: relative;
    isolation: isolate;
    padding: 50px 0;
    overflow: hidden;
}
.bg-hero::before {
    position: absolute;
    content: '';
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-1);
    opacity: 0.2;
    z-index: -1;
}
.hero-section,
.hero-section_first {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section_first  img {
    max-width: 100%;
    height: auto;
    display: block;
}
.hero-section_first h1 {
    font-family: devix-2 !important;
    color: var(--clr-1);
    font-size: 2rem;
}
.hero-section_first p {
    font-size: 1rem;
    max-width: 420px;
    text-wrap: balance;
    color: #24252b;
    font-weight: 600;
    margin: 1rem 0 1.5rem 0;
}
.cta-btn {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--clr-1);
    border-radius: 1rem;
    position: relative;
    height: 3rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    overflow: hidden;
    isolation: isolate;
}
.cta-btn::before {
    position: absolute;
    content: '';
    inset: 12px;
    background-color: var(--clr-2);
    opacity: 0;
    z-index: -2;
    border-radius: 1rem;
}
.cta-btn::after {
    position: absolute;
    content: '';
    inset: 12px;
    background-color: var(--clr-1);
    opacity: 0;
    z-index: -1;
    border-radius: 1rem;
}
.cta-btn:hover::before {
    transition: 0.3s;
    opacity: 0.6;
    inset: -2px;
}
.cta-btn:hover::after {
    transition: 0.8s 0.2s;
    opacity: 1;
    inset: -2px;
}


/*  */
.demo-slider-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
    /* direction: ltr; */
}
.demo-slider {
    width: 100%;
    height: 320px;
    overflow: visible;
}
.demo-slider-container .swiper-slide {
    border-radius: 24px;
    overflow: hidden;
}
.slide-card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}
.slide-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arrow-wrapper {
    position: relative;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
}
.arrow-wrapper > * {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
}
.bg-hero .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-direction: row-reverse; */
    gap: 12px;
}
.bg-hero .swiper-pagination-bullet {
    background-color: #9d9d9d !important;
    opacity: 0.5 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50em !important;
    transition: 0.3s;
}
.bg-hero .swiper-pagination-bullet-active {
    width: 32px !important;
    background-color: var(--clr-1) !important;
}
.bg-hero .swiper-button-next,
.bg-hero .swiper-button-prev {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background-color: #fff !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
}
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important;
}
.arrow-wrapper svg {
    width: 16px !important;
    height: 16px !important;
}
.category-bg {
    position: relative;
    isolation: isolate;
}
.category-bg::before {
    position: absolute;
    content: '';
    inset: 0 0 50% 0;
    background-color: var(--clr-1);
    opacity: 0.2;
    z-index: -1;
}
.second-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    position: relative;
    isolation: isolate;
}
.second-section::before {
    position: absolute;
    content: '';
    inset: 2rem -8px;
    border-radius: 8px;
    background-color: #0a284b;
    z-index: -1;
}
.white-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 1rem;
}
.box-text {
    color: #24252b;
    font-size: 1rem;
    font-weight: 600;
}
.course-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.course-wrapper h2 {
    width: 100%;
    font-size: 1.5rem;
    color: #24252b;
    text-align: center;
    margin: 6rem 0 1rem 0;
    font-family: devix-2 !important;
}
.course-wrapper a {
    width: calc(25% - (3rem / 4));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 0.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.course-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.8rem;
}
.course-wrapper section {
    width: calc(100% - 44px);
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0 0 0;
}
.course-wrapper span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    margin-left: 1rem;
    color: #24252b;
    font-weight: 600;
}
.course-wrapper svg {
    width: 20px;
    height: 20px;
}
.course-wrapper h3 {
    width: 100%;
    color: #24252b;
    margin-top: 1rem;
    font-size: 1.2rem;
}
.course-wrapper a div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-1);
    width: 44px;
    height: 44px;
    color: #fff;
    border-radius: 0.8rem;
}
/*  */
.services-wrapper h2 {
    width: 100%;
    font-size: 1.5rem;
    color: #24252b;
    text-align: center;
    margin: 6rem 0 1rem 0;
    font-family: devix-2 !important;
}
.services-wrapper section {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}
.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.item-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #24252b;
}
.item-info p {
    font-size: 1rem;
    line-height: 2;
    text-align: justify;
    font-weight: 600;
    color: #24252b;
}
.item-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    flex: 1;
}
.item-wrapper div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 1rem;
    color: #24252b;
    gap: 1rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.item-wrapper p {
    font-size: 0.8rem;
}
.item-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}
/*  */
.banner-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
}
.banner-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}
/*  */
.teacher-wrapper {
    margin-bottom: 2rem;
}
.teacher-wrapper .swiper-pagination {
    bottom: 0 !important;
}
.teacher-wrapper h2 {
    width: 100%;
    font-size: 1.5rem;
    color: #24252b;
    text-align: center;
    margin: 6rem 0 2rem 0;
    font-family: devix-2 !important;
}
.teacher-wrapper .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 26px !important;
}
.teacher-wrapper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 2px;
}
.teacher-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 0 1px #ddd;
    padding: 0.5rem;
    border-radius: 1rem;
}
.teacher-box img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.8rem;
}
.teacher-box h3 {
    color: #24252b;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 0;
}
.teacher-txt {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    width: 100%;
}
.teacher-txt span {
    color: #24252b;
    font-weight: 600;
    font-size: 0.9rem;
}
/*  */
.comment-bg {
    overflow: hidden;
}
.title-wrapper {
    padding: 5rem 0 2rem 0;
}
.title-wrapper h2 {
    font-size: 1.5rem;
    color: #24252b;
    text-align: center;
    font-family: devix-2 !important;
}
.comment-wrapper .swiper-container {
    padding-bottom: 24px;
    clip-path: inset(0 0 0 -50vw);
    position: relative;
}
.comment-wrapper .swiper-pagination {
    bottom: 0 !important;
}
.teacher-wrapper .swiper-pagination-bullet ,
.comment-wrapper .swiper-pagination-bullet {
    background-color: #292929 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50em !important;
    transition: 0.3s;
}
.teacher-wrapper .swiper-pagination-bullet-active ,
.comment-wrapper .swiper-pagination-bullet-active {
    width: 32px !important;
    background-color: var(--clr-1) !important;  
    border-radius: 50em !important;
}
.comment-item {
    border-radius: 1rem;
    background-color: #fff;
    padding: 1rem;
    border: 1px solid #ddd;
}
.comment-item > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-item span img {
    width: auto;
    height: 16px;
    display: block;
    clip-path: inset(0 calc(100% - (100% / 5 * var(--star))) 0 0);
}
.comment-item svg {
    width: 2rem;
    height: 2rem;
    color: var(--clr-1);
}
.comment-item p {
    font-size: 1rem;
    color: #24252b;
    font-weight: 600;
}
.comment-item section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}
.comment-item section img {
    width: 5rem;
    max-width: 65px;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top center;
    border-radius: 50em;
    box-shadow: 0 0 0 1px #ddd;
}
.comment-item div {
    width: calc(100% - 5.5rem);
    display: flex;
    flex-direction: column;
}
.comment-item strong {
    font-size: 1rem;
}
.comment-item section span {
    font-size: 0.8rem;
    color: #5a5a5a;
}
/* footer */
.primary-footer {
    background-color: #0a284b;
    padding: 2rem 0;
    margin-top: 2rem;
}
.title-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.title-footer img {
    width: auto;
    height: 50px;
    display: block;
}
.title-footer strong {
    font-size: 1.2rem;
    font-family: devix-2 !important;
    color: var(--clr-2);
}
.footer-desc {
    font-size: 0.9rem;
    color: #eff3f7;
    font-weight: 600;
    line-height: 2;
    margin-top: 2rem;
    text-align: justify;
}
.footer-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}
.footer-list > * {
    flex: 1;
}
.footer-list h3 {
    font-size: 1.3rem;
    font-family: devix-2 !important;
    color: #eff3f7;
    margin-bottom: 1rem;
}
.footer-list li a {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 1rem;
    color: #ddd;
}
.footer-list section div {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-list section img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 8px;
}
.social-media {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.social-media svg {
    color: #b7bbc4;
}
/********************************
************* mobile ************
********************************/
@media (max-width: 1400px) {

}

@media (max-width: 1200px) {

}

@media (min-width: 992px) {
    .search-box {
        width: 450px;
        margin-right: auto;
    }
    .search-toggle,
    .menu-toggle {
        display: none;
    }
}
@media (max-width: 991px) {
    .search-toggle,
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        transition: 0.3s;
    }
    .open-menu .search-toggle {
        opacity: 0.5;
        pointer-events: none;
        scale: 0.9;
    }
    .search-toggle svg {
        width: 24px;
        height: 24px;
    }
    .open-menu .menu-toggle svg:first-child,
    .menu-toggle svg:last-child {
        display: none;
    }
    .open-menu .menu-toggle svg:last-child {
        display: block;
    }
    .nav-bar {
        position: fixed;
        inset: 71px 0 0 0;
        background-color: #ffffff;
        display: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        z-index: 9999;
    }
    .open-menu .nav-bar {
        display: block;
    }
    .nav-bar ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 24px ;
    }
    .search-box {
        position: fixed;
        top: 88px;
        right: 50%;
        transform: translateX(50%);
        width: calc(100% - 42px);
        opacity: 0;
        pointer-events: none;
        z-index: 9998;
        transition: 0.3s;
    }
    .open-search .search-box {
        opacity: 1;
        top: 82px;
        pointer-events: all;
        backdrop-filter: blur(50px);
        background-color: #fff;
        outline: 1px solid rgba(0, 0, 0, 0.08);
    }
    .open-menu.open-search .search-box {
        opacity: 0 !important;
        pointer-events: none !important ;
    }
    .logo-box {
        margin: 0 auto;
    }
    .hero-section {
        flex-direction: column;
    }
    .second-section {
        grid-template-columns: 1fr 1fr;
    }
    .course-wrapper a {
        width: calc(50% - 1rem);
    }
    .services-wrapper section {
        flex-direction: column-reverse;
    }
    .item-info h3 {
        text-align: center;
    }
    .item-info p {
        text-align-last: center;
    }
}

@media (max-width: 767px) {
    
}

@media (max-width: 576px) {
    .hero-section_first div,
    .hero-section_first {
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .hero-section_first div {
        margin-bottom: 42px;
    }
    .swiper-slide {
        height: auto !important;
    } 
    .footer-list {
        flex-direction: column;
    }
    .footer-list > * {
        width: 100%;
    }

}

@media (max-width: 456px) {
    
}