.course{
    background-image: url("/img/online-programming-courses-section-bg.svg");
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
}
.featured-course{
    align-items: center;

}
.featured-course,.courses-a1-a2{
    display: flex;
    
    padding-block: 150px;
    text-align: initial;
    gap: 0px 0px;
    height: 100%;
    margin: 0 auto;
    max-width: min(100%, 1340px);
    padding-inline: 0;
}
.featured-course-right,.featured-course-left{
    width: 50%;
}
.featured-course-right{
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 25px;
    padding-left: 50px;
}
.featured-course-right .widget-container ul li span{ 
    padding-right: 8px;
}
.featured-course-right  .widget-container ul li .icon-list-text{
    font-weight: 500; 
    text-transform: uppercase;
    letter-spacing: 3px;
}
.featured-course-right  .widget-container ul li span i {
    color: var(--lightHelper);
    transition: color 0.3s;
}
.featured-course-right  h2 {
    font-size: 35px;
    font-weight: 700;
}
.el-group{
    display: flex;
    width: 100%;
    gap: 0px 20px;
}
.featured-course-right  .widget-container ul li .icon-list-icon2 i {
    color: var(--primaryColor);
    transition: color 0.3s;
}
.featured-course .featured-course-right .button-wrapper{
    width: 50%;
    background-color: var(--primaryColor);
    text-align: center;
    padding-block: 5px;
    border-radius: var(--radius1);
}
.featured-course .featured-course-right .button-wrapper a{
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
}
.featured-course .featured-course-left{
    display: flex;
    justify-content: center;
    align-items: center;
}
.featured-course .featured-course-left img{
    width: 100%;
    border-radius: var(--radius1);
}
/* ==============================courses-a1-a2============================ */
.courses-a1-a2{
   justify-content: space-evenly;
   gap: 50px 30px;
   color: var(--middleColor);
}
.coursa{
    width: 40%;
    background-color: var(--white);
    border-radius: var(--radius0);
    color: var(--middleColor);
}
.coursa img{
    width: 100%;
    height: 400px;
    border-radius: var(--radius0);
}
.coursa .course-data{
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px 0px;
    max-width: 600px;              /* عرض مناسب */
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;

}
.coursa .course-data .course-details span {
   font-size: 17px;
   font-weight: 500;
  }
.coursa .course-data .course-details span .toggleBtn {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
  }

  .coursa .course-data .course-details span .toggleBtn:hover {
   text-decoration: none;
  }

  .hidden {
    display: none;
  }
.coursa .course-data h5{
    font-weight: 700;
    font-size: 22px;
    
}
.coursa .course-data .date-time{
    display: flex;
    justify-content: space-between;
    
}
.coursa .course-data .date-time .widget-container ul li span i {
    color: var(--lightHelper);
    transition: color 0.3s;
    margin-left: 8px;
   
}

/* ============================== Media Queries ============================= */
@media (max-width: 1024px) {
    .featured-course {
        flex-direction: column-reverse;
        padding: 20px;
    }
    .featured-course-right, .featured-course-left {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }
    .featured-course-right .button-wrapper {
        width: 70%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .courses-a1-a2{
        flex-wrap: wrap;
        padding: 20px;
        gap: 30px 0;
    }
    .courses-a1-a2 .coursa {
        width: 100%;
    }
    /* .coursa img {
        height:300px;
    } */
    .featured-course-right h2 {
        font-size: 28px;
    }
    .featured-course-right p {
        font-size: 16px;
    }
}