/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/


@media (max-width: 768px) {
  .new-content.sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 30px;
    right: 0;
    width: 100%;
    z-index: 9999;
    padding: 0px;
    text-align: center;
    background-color: #ffffff;
    color: white;
    border: none;
    display: flex;
    justify-content: center;
    border-top: 1px solid #dbdbdb;
  }
  .bb-button-wrap2 {
    margin-bottom: 0;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    text-align: center;
}

.bb-single-course-sidebar a.btn-advance {
    font-size: 17px !important;
}

.bb-single-course-sidebar .btn-join {
   font-size: 17px !important;
}
.btn-advance-continue {
    margin-bottom: 10px !important;
    margin-top: 5px;
}
  
}

@media only screen and (max-width: 600px) {
 .entry-title {
	/*display: none!important;*/
}

}

.user-wrap {
    display: none !important;
}

.desk_my_course {
    display: none;
}

.mobile_my_course {
    display: none;
}

.new-content  {
    background-color: white;
    margin-left: -30px;
    margin-right: -30px;
    padding: 0px 25px;
}

.bb-course-status-wrap {
    display: none;
}

.bb-button-wrap {
    display: none;
}

.bb-button-wrap2 {
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
}

.ld-course-status-enrolled {
    display:none !important;
}

/* styles.css */
/** {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    box-sizing: border-box;*/
/*    font-family: 'Arial', sans-serif;*/
/*}*/

.banner {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 800px;
    width: 100%;
    margin: 0 auto 20px auto; /* Adds spacing below the banner */
    padding: 20px;
}

.banner-image img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.banner-content {
    flex: 1;
    padding: 0 20px;
}

.discount {
    display: flex;
    align-items: center;
    color: #28a745;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.discount-icon {
    display: inline-block;
    background-color: #28a745;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-right: 8px;
    font-size: 12px;
}

.course-title {
    font-size: 18px;
    color: #1a2a44;
    margin-bottom: 5px;
    font-weight: bold;
}

.course-type {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 10px;
}

.price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-price {
    font-size: 18px;
    font-weight: bold;
    color: #1a2a44;
}

.original-price {
    font-size: 16px;
    color: #6c757d;
    text-decoration: line-through;
}

.start-btn {
    background-color: #f5a623;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.start-btn:hover {
    background-color: #e69500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner {
        flex-direction: column;
        text-align: center;
    }

    .banner-image img {
        width: 100%;
        height: auto;
        max-width: 200px;
        margin-bottom: 20px;
    }

    .banner-content {
        padding: 0;
    }

    .start-btn {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .course-title {
        font-size: 18px;
    }

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

    .original-price {
        font-size: 14px;
    }

    .start-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}