:root{
    --dark-color:#19283f;
    --bg-card: #00d77f12 !important;
    --cafe-color:#cacc9a;
    --cafe-dark-color: #a2a474;
    --red-color:#ff3150;
    --yellow-color:#ffc400;
    --section-color:#eff7fa;
    --bs-primary-rgb: 218, 51, 51;
}
.bg-card{background: #cacc9a26}
.green{color: var(--primary);}
.dark-color{color: var(--dark-color) !important;}
.cafe{color: var(--primary) !important;}
.cafe-dark{color: var(--cafe-dark-color)}
.bg-dark-color{background: var(--dark-color);}
.bg-cafe{background: var(--primary);}
.bg-cafe-dark{background: var(--cafe-dark-color);}
.cafe-overlay{background-color: #cacc9bd1;}
.border-dash {border-style: dashed !important;}
.cafe-border{border: 2px solid var(--primary);}
button.bg-cafe:hover{background: var(--primary);}
.btn-outline-cafe{border-color: var(--primary);}
.main-btn{
    border: 1px solid var(--cafe-dark-color);
    background-color: var(--cafe-dark-color) !important;
}

/* ==================== header ================ */

.headerHero{min-height: 85vh;padding: 50px 0;background-color:var(--dark-color);margin-bottom: -90px;}
.headerHero img{margin: -100px 0 40px 0;}
.headerHero .copy .btn{z-index: 2;position: relative;}

.text-label,.text-hero-bold,.text-hero-regular{margin: 0px 0 24px;}
.text-label{color: #bcbcbc;font-size: 16px;font-weight: 400;line-height: 31px;}
.text-hero-bold{font-size: 45px;font-weight: 600;line-height: 65px;}
.text-hero-regular{color: #798892;font-size: 16px;font-weight: 400;line-height: 31px;}
.headerHero .custom-shape-divider-bottom-1691001236 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.headerHero .custom-shape-divider-bottom-1691001236 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 270px;
}
.headerHero .custom-shape-divider-bottom-1691001236 .shape-fill {
    fill: #FFFFFF;
}

/* =============== stats ================ */

.stats-item i{font-size: 45px;}

/* ============== rating ================== */

.feature-slider .feature-footer .feature-price-box {
    box-shadow: 0 3px 6px 0 rgb(202 204 154 / 20%);
    background-color: var(--primary);
}
/* ================= cards ============== */
.product-card,.webinar-card{box-shadow: 0 0 0 0;border-radius: 18px;overflow: hidden;}

.product-card .image-box .hover-card-action .btn-add-product-to-cart {
    box-shadow: 0 10px 15px 0 rgb(202 204 154 / 35%);
}

/* ============== spread ================= */
.trend_categories{
    background-color: var(--dark-color);
    margin-top: 200px;
    text-align: center;
    padding-bottom: 40px;
}
.trend_categories .swiper-container{overflow: inherit;}
.trend_categories .h1{
    color: #fff;
    font-weight: 600;
    padding: 35px 0 20px;
    font-size: 35px;
}
.trend_categories .trending-card{margin-top: -90px;}
.trend_categories .box h2{color:var(--dark-color);font-weight: 600;padding: 25px 0 4px;}

/* ================== .divider ============== */
.divider{
    background-position: 50% 50% !important;
    background-size: cover !important;
    margin-top: 100px;
}
.divider h2{font-size: 35px;}
.divider p{font-size: 20px;font-weight: bold;}
.divider .overlay-content {z-index: 20;padding: 60px 0;}
.divider .text-lg-start{text-align: right;}
.divider .btn-outline-light {color: #f8f9fa;border-color: #f8f9fa;}
.divider .primary-overlay::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    opacity: 0.85;
    background: #4db782;
}
.divider a{display: block;transform: scale(1);transition: all 1s ease-in-out;}
.divider a:hover{transform: scale(1.1);}

/* ================ question ============= */
.question{margin: 120px 0;}
.question .data{flex-direction: column;}
.question .logo{width: 120px;}
.question .img{margin: 0 0 0 20px;width: 100%;height: 100%;}
.question .img img{transform: scaleY(1.2);border: 10px solid var(--dark-color);width: 100%;height: 100%;}

/* =========== reviews =========== */
.testimonials-swiper .testimonials-card{
    background: url(/store/1/row-bgimage-3.png) no-repeat;
    background-position: top center;
    background-size: 70%;
    padding: 20px;
}
.testimonials-swiper .swiper-slide{margin-bottom: 20px;}
.testimonials-swiper .testimonials-user-avatar::after {
    content: '\f10e';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    background: var(--primary);
    position: absolute;
    bottom: -2px;
    left: -3px;
    font-size: 0.8rem;
}
.testimonials-item img{
    max-width: 80px;
    border-radius: 50%;
    margin-left: 20px;
    vertical-align: middle;
}
.testimonials-item .name{font-size: 20px;color: var(--dark-color);line-height: 1.2;}

/* ============ blogs ============= */
.blog-grid-card .blog-grid-detail .created-at {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.19;
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--primary);
    position: relative;
    bottom: 0;
    right: 0;
}

/* ============ footer =============== */
.footer{background-color: #1e2950}
.footer h5{
    text-align: right; border: 0px; font-size: 1.47059rem; font-weight: 400; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; outline: 0px; padding: 0px; vertical-align: baseline; clear: both; line-height: 1.6; font-family: Lato, sans-serif;
}
.footer .join{background: var(--primary);}
.footer .join form .form-group{flex-direction: column;}
.footer .join form .form-group button{background: var(--dark-color);}
.footer .connect svg{background: var(--primary);border-radius:50%;color:var(--dark-color) !important}


/* ============= collection ============= */
:is(#parallax1, #parallax2, #parallax3, #parallax4, #parallax5, #parallax6) div{background: #eaeafe;}
/* a.text-primary:hover, a.text-primary:focus {
    color: #fff !important;
} */

a.text-primary:hover, a.text-primary:focus {
    color: var(--primary-hover) !important;
}
/* =========== filter ============== */
.border-primary {
    border-color: var(--primary) !important;
    border: 2px solid;
}

/* ================ courses ============== */
.site-top-banner .overlay{
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(2,2,2,0.7);
}
.site-top-banner .logo img{max-width: 150px;}

/* ============ desc-course page ============= */
#single_course_header {
    box-shadow: 0 5px 40px rgb(0 0 0 / 12%);
    border-radius: 5px;
    padding: 0;
    height: 550px;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#single_course_header .standard_wrapper{background: rgba(2,2,2,0.7);height: 100%;}
#single_course_header .single_course_title{height: 100%;}

#single_course_header .stars-card svg.active {color: #ffc600;fill: #ffc600;}
#single_course_header .tab-content p{line-height: 2;}
#single_course_header .reviews-rate {
    vertical-align: top;
    text-align: center;
}
#single_course_header .reviews-rate .review-number {
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
}
#single_course_header .progress{
    border-radius: 5px;
    background: #f2f3f5 !important;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 160px);
}
#single_course_header .progress .progress-bar {
    border-radius: 5px;
    background: var(--primary) !important;
    height: 20px;
}

#single_course_header .reviews-stars select{
    padding: 0px 10px;
    margin: 17px 0 0;
    box-shadow: 2px 2px 2px #ddd;
    background: #f2f3f5 !important;
}

#single_course_header #nav-tabContent .home-video-container {width: 20%;border-radius: 10px;}
#single_course_header #nav-tabContent .home-video-container:hover {background: var(--primary);}
#single_course_header #nav-tabContent .home-video-container .home-video-play-button {
    width: 0;
    height: 0;
    box-shadow: 0;
    background-color: transparent;
    border-radius: 0%;
    cursor: pointer;
    z-index: 0;
}

/* =================== profile =============== */
.profile-page .profile-user-img {
    border: 3px solid var(--secondary);
    margin: 0 auto;
    padding: 3px;
    width: 100px;
}
.profile-page .user-circle-badge.unavailable,
.profile-page .user-circle-badge.has-verified{
    position: absolute;
    background: #1f3b64;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    bottom: 0;
    right: 2px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #ffffff;
    background-color: var(--primary);
}

/* ============  */
.success-transparent-alert {
    border: solid 1px var(--primary);
    background-color: rgb(212 199 67 / 5%);
}
.success-transparent-alert * {color: var(--primary);}
.success-transparent-alert__icon {background-color: rgb(211 212 67 / 30%);}

.special-offer-card .offer-percent-box {
    box-shadow: none !important;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #ffffff !important;
    background-color: var(--primary-btn-shadow-hover);
    border-color: var(--primary);
}

input[type=radio]:hover + label{background-color: var(--primary-hover) !important;}

/* ========== course card interaction ==========  */
.webinar-card:hover,.blog-grid-card:hover,.product-card:hover{background-color: var(--secondary);color: #fff;}
.blog-grid-card:hover :is(.blog-grid-detail h3,.blog-grid-desc,.blog-grid-footer),
.webinar-card:hover :is(.webinar-title, span a,span),
.product-card:hover :is(span a,h3){color: #fff;}
.webinar-card:hover svg{color: var(--primary);}