body:lang(ar) {
    direction: rtl;
}
/* handle custom btn by add class adham-btn in light mode for show more btns (teachers and courses) */
[data-theme="light"] .adham-btn{
    padding: 0px;

}
[data-theme="light"] .adham-btn>span{
    background-color:var(--bg-heavy) !important; ;
    transition: all 0.3s ease;
}
[data-theme="light"] .adham-btn:hover>span{
    background-color:var(--second-color) !important; 
    color: var(--custom-btn-color) !important;
}
.search-box {
    position: relative;
       width: -webkit-fill-available;
    /* Adjust as needed */
}
.search-input {
    width: 100%;
    padding: 10px 20px 10px 40px;
    border-radius: 13px;
    border: 1px solid #ffffff17;
    background-color: transparent;


    font-size: 16px;
    color: var(--second-color);
    outline: none;
}
[data-theme="dark"] .search-input{
  box-shadow: 0 4px 10px rgba(0, 147, 249, 0.15);
}
[data-theme="light"] .search-input{
    box-shadow: 0px 0px 3.3px 0px rgb(0 147 249 / 42%);
}
.search-input::placeholder {
    font-size: 18px;
    background: var(--third-color-heavy);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
    font-size: 18px;
    pointer-events: none;
}
/* .HERO */
.hero {
    background-image: url("../../images/hero.webp");
    background-size: cover;
    background-repeat: no-repeat;
min-height: calc(100vh - 300px);
}
[data-theme="light"] .hero {
  background-image: none;

}

.hero .text{
    width: min-content;
}

.platform-title {
  font-size: 72px;
  font-weight: bold;
 text-shadow: var(--text-shadow);
  text-align: center;
}
[data-theme="lihgt"] .hero .text p{
color: #22222280 !important;
}
@media (max-width:456px) {
    .platform-title {
  font-size: 40px;
text-wrap: wrap !important;
}
/* .hero{
    min-height: 100vh;
} */
.hero .text{
    width: max-content;
}
.hero .text p{
    font-size: 18px;
}}
.platform-title .highlight {
  color: #0093F9; /* bright blue color for "أُفُقْ" */
  -webkit-text-fill-color: initial;
}
#course_list{
        max-height: 200px;
    overflow-y: scroll;
}
#course_list a{
 padding: 6px 8px;
}
/* discover-courses */
.course{

}
.filter .custom-btn span{
    width: 148px;

}
.active {
    display: inline-block;
     width: 152px;

}


/* join */
.join>div{
border-color: var(--second-color) !important;
}
.join h4{
    font-size: 65px;
    color: white !important;
}
.join p{
color: #f0f0f0 !important;
}
.join .join-image-box{

}
[data-theme='light'] .join .colored-btn{
    border:  1px solid #dbdbdb !important;
}

.join .join-image-box img{
        transform: scale(1.2);
    transform-origin: bottom;
}
@media (max-width:767px) {
    .join .join-image-box img{

 display: none;
}
}