/* class.css - Dedicated CSS for the Course Detail (Single Product) Page */

.class-detail-page {
    font-family: inherit;
}

body.single-product .site-main {
    width: 100%;
    display: block;
    max-width: 100%;
    position: relative;
    z-index: 10;
    padding: 0;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a {
    font-size: 16px;
    color: #FFFDF8;
}

body.single-product .site-main>.woocommerce-breadcrumb {
    display: none;
}

.details-banner-block {
    display: block;
    width: 100%;
    max-width: 830px;
}

/* Hero Section */
.class-hero-section {
    background-size: cover;
    background-position: center;
    padding: 146px 0 64px;
    position: relative;
    color: #fff;
    width: 100%;
    margin-left: calc(50% - 50vw);
    max-width: 100vw;
}

.class-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(17, 23, 11, 0.6) 20%, rgba(17, 23, 11, 0.6) 21%, rgba(17, 23, 11, 0.9) 40%, rgba(17, 23, 11, 1) 100%);

}

.class-hero-section .container {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 20px;
}

.class-breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
}

.class-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.class-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff !important;
}

.class-short-description {
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    opacity: 0.8;
}

/* Main Layout */

.products-conatin-block {
    justify-content: space-between;
    padding: 48px 0 120px;
    display: flex;
    width: 100%;
}

.products-conatin-block .sticky-sidebar-box {
    margin-left: auto;
    max-width: 464px;
    transform: translateY(20px);
}

.class-left-column {
 
    display: flex;
    flex-direction: column;
    gap: 48px;

    width: 63%;
}

.class-right-column {
    width: 34%;
}

/* Sticky Inner Nav */
.class-inner-nav {
    position: sticky;
    top: 82px;
    z-index: 10;
    display: flex;
}

.class-inner-nav {
    display: block;
    width: 100%;
    background: #F1EDE4;
    border-radius: 12px;
}

.class-inner-nav ul {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
}

.class-inner-nav ul li a {
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 10px;
    min-height: 44px;
    font-size: 16px;
    color: #1F211B;

    white-space: nowrap;
}

.class-inner-nav ul li a.active,
.class-inner-nav ul li a:hover {
    color: #FFFDF8;
    background: #4F5F24;
}

/* Course Sections */
.class-section {
     
    scroll-margin-top: 200px;
}

.class-section h3 { 
    margin-bottom: 16px;
    color: #1F211B;
}

.class-section .content-body {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.005rem;
    color: #404039;
}

/* Details Box */
.class-details-list {
    display: flex;
    flex-direction: column;
    gap: 16px; 
    /* matching the screenshot background color */
    padding: 32px; 
    border: 1px solid #C2A34C;
    border-radius: 24px;
    /* matching the gold border */
}

.detail-item {
    display: grid;
    grid-template-columns: 24px 216px 1fr;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #404039;
}

.detail-item i {
    display: flex;
    align-items: center;
}

.detail-item i img {
    width: 24px;
}

.detail-item strong {
    color: #1F211B;
    font-weight: 600;
}

/* Bullet List Grid */
.bullet-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
}

.bullet-item i img {
    width: 20px;
    margin-top: 3px;
}

.class-what-you-will-learn ul { padding: 24px; border: #C2A34C solid 1px; border-radius: 16px;   flex-wrap: wrap; display: flex ;align-items: flex-start; width: 100%; gap: 10px;}
.class-what-you-will-learn ul li{ padding: 0 0 0 32px; background: url(../images/check-new.svg) no-repeat left top; width: calc(50% - 5px);color: #404039; font-size: 16px;}
.bullet-point-block{ display: block; width: 100%;}
.class-whats-included ul{ padding: 0; border: #C2A34C solid 0px; border-radius: 0px;  display: flex; flex-wrap: wrap; width: 100%;}
.class-whats-included ul li{ padding: 0 0 0 32px; background: url(../images/check-new.svg) no-repeat left top; width: calc(50% - 5px);color: #404039; font-size: 16px;}
 
.class-attendance ul{ padding: 0; border: #C2A34C solid 0px; border-radius: 0px;  display: flex; flex-direction: column; width: 100%;}
.class-attendance ul li{ padding: 0 0 0 32px; background: url(../images/check-new.svg) no-repeat left top; width: 100%;color: #404039; font-size: 16px;}

/* Schedule List */
.schedule-title-row{ gap: 12px; flex-wrap: wrap; padding: 0 0 16px; display: flex; align-items: center; }
.schedule-title-row h3{ margin: 0 !important;  }
.schedule-title-row .subtitle{ font-size: 16px; padding: 6px 0 0 0; color: #C2A34C;}


.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.schedule-item {
    display: flex;
    align-items: center;
    background: #F1EDE4;
    padding: 24px;
    border-radius: 24px;
    gap: 32px;
}

.schedule-day-label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 120px;
}

.day-circle {
    background: #33401E;
    color: #FFFDF8;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
        font-family: var(--e-global-typography-4c10674-font-family), Sans-serif;
}

.schedule-day-label strong {
    font-weight: 600;
    color: #1F211B;
    font-size: 16px;
}

.day-text,
.time-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #404039;
}
.day-text i,
.time-text i {
display: flex;
align-items: center;
}

.day-text i img,
.time-text i img {
    width:24px;
}


.class-training-format h6{ padding: 0 0 16px; display: flex; align-items: center; font-size: 20px;}
.class-training-format h6 img{ margin: 0 5px; }
.class-training-format ul{ padding: 0 0 0 18px; display: block;  list-style: disc;  }
.class-training-format ul li{ font-size: 16px; color: #404039; list-style: disc; list-style-position: outside; display: list-item; }
/* Instructor */
.instructor-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.instructor-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.instructor-info strong {
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1;
    color: #1F211B;
}

.view-profile-link {
    color: #1F211B;
    text-decoration: underline;
    text-underline-offset:7px ;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.view-profile-link i{ display: flex; align-items: center;}
.view-profile-link i img {
    width: 24px;
    margin-left: 2px;
}


.class-policies a {
    color: #1F211B;
    text-decoration: underline;
    text-underline-offset:7px ;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin: 12px 0 0 0;
}
.class-policies a i{ display: flex; align-items: center;}
.class-policies a i img {
    width: 24px;
    margin-left: 2px;
}

/* Payment Options */
.payment-logos {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.payment-logos img {
    height: 30px;
}

/* FAQ Accordion */
.faq-accordion{ padding: 64px 0 0 0; }
.faq-accordion .faq-item{  height: auto !important; transition: all 0.3s ease-in-out; padding: 20px 24px;  border: #D9D3C7 solid 1px; border-radius: 24px;  display: block; width: 100%;}
.faq-item  + .faq-item{ margin: 16px 0 0 0; } 
.faq-item .faq-question h6{ color: #1F211B; text-transform: none;  }
.faq-item .faq-answer p{ font-size: 16px;line-height: 1.6;letter-spacing: 0.005rem;color: #404039;}
.faq-item .faq-answer ul { padding: 0 0 0 18px; display: block;  list-style: disc;  }
.faq-item .faq-answer ul li{ font-size: 16px; color: #404039; list-style: disc; list-style-position: outside; display: list-item; }
/* FAQ Accordion Styles */
.faq-answer {
    display: none;
    margin-top: 10px;
}

.faq-question {
    cursor: pointer;
    position: relative;
    padding-right:30px;
}

.faq-question::after {
    content: ' ';
    position: absolute;
    right: 0;
    top: 50%; 
    width: 24px;
    height: 24px;
    margin: -12px 0 0 0;
    font-weight: bold;
    background: url(../images/Add-1.svg) no-repeat center center;
    transition: all 0.3s ease-in-out;
}

.faq-question.active::after {
    background: url(../images/Add.svg) no-repeat center center;
    transform: rotate(180deg);
}

.have-question-btn{ padding: 32px 0 0 0; display: flex; align-items: center; justify-content: center;}
.have-question-btn a{ font-weight: 600; text-transform: uppercase; gap: 12px; border: #C2A34C solid 1px; background: none; width: auto; padding: 0 24px; display: flex ;align-items: center ;justify-content: center; height: 52px;   letter-spacing: 0.0125em; position: relative; border-radius: 12px; font-size: 16px; text-transform: uppercase; color: #1F211B; } 
.have-question-btn a i{ position: relative; right: auto; font-weight: 600; display: flex; top: 0; background: url(../images/arrow.svg) no-repeat center center ;  height: 20px;  width: 24px;   }
.have-question-btn a:hover{ background-color: #4F5F24;color: #FFFEFC; }

.faq-section{ padding: 120px 0; display: block; width: 100%; background: #F1EDE4; }
.cta-section--main{ justify-content: space-between; display: flex;width: 100%;  background: #F1EDE4;}
.cta-block-main .call-box{ gap: 24px; display: flex; align-items: center;  }
.cta-block-main .call-box i{ display: flex; align-items: center; width: 120px;}
.cta-block-main .call-box i img{ width: 100%; height: auto;}
.cta-block-main .call-box .box-in h3{ color: #FFFDF8;}
.cta-block-main .call-box .box-in p{ color: rgba(255, 255, 255, 0.6);}
.cta-block-main .call-box .box-in p a{ font-weight: 600; color: #FFFDF8;}
.cta-block-main{ padding: 32px 64px; display: flex; margin: 0 0 -136px; align-items: center; justify-content: space-between; background: #33401E; border-radius: 32px; }


.cta-block-main .cta-btn {display: flex ;align-items: center; justify-content: center;}
.cta-block-main .cta-btn  a{ padding: 0 24px; gap: 12px; font-weight: 600; text-transform: uppercase; width: 100%; display: flex ;align-items: center ;justify-content: center; height: 52px; background: #4F5F24 ; letter-spacing: 0.0125em; position: relative; border-radius: 12px; font-size: 16px; text-transform: uppercase; color: #FFFDF8; } 
.cta-block-main .cta-btn  a i{ position: relative; right: auto; font-weight: 600; top: 0; background: url(../images/arrow.svg) no-repeat center center ; height: 100%; width: 24px;   }
.cta-block-main .cta-btn  a:hover{ background-color: #FFFFFF;color: #C2A34C; }
 /* ==================================================
   Right Sidebar styling
   ================================================== */
.class-right-column {
    position: relative;
    margin-top: -400px;
    z-index: 10;
}

.sticky-sidebar-box {
    position: sticky;
    top: 90px;
    box-shadow: rgba(77, 58, 26, 0.15) 0 6px 12px;
    display: block;
    width: 100%;
    background: #FFFDF8;
    max-width: 464px;
    padding: 0px;
    margin-left: auto;
    border-radius: 24px;
    overflow: hidden;
}

.sidebar-top-banner {
    color: #FFFDF8;
    display: flex;
    background: #A8872A;
    min-height: 38px;
    padding: 5px 20px;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
    justify-content: center;
}

.sidebar-top-banner i {
    display: flex;
    align-items: center;
}

.sidebar-top-banner img {
    width: 16px;
    filter: brightness(0) invert(1);
}

.sidebar-top-banner.error-banner {
    background: #ffebe8;
    color: #b81c23;
    border-bottom: 1px solid #b81c23;
}

.sidebar-content-inner {
    padding: 24px 32px;
    display: block;
    width: 100%;
}

.sidebar-price {
    padding: 12px 0 0 0;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    color: #1F211B;
}

.sidebar-price .price-suffix {
    padding: 0 5px 0 0;
    font-size: 14px;
    color: #716D63;

}

.sidebar-details {
    margin: 16px 0;
    display: block;
    padding: 20px;
    width: 100%;
    border: #E8E2D6 solid 1px;
    border-radius: 16px;
}

.sidebar-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #404039;
    font-size: 16px;
    line-height: 1.4;
}

.sidebar-detail-item+.sidebar-detail-item {
    margin-top: 12px;
}

.sidebar-detail-item i {
    min-width: 24px;
    display: flex;
    align-items: center;
    width: 24px;
}

.sidebar-detail-item i img {
    width: 24px;
}

.custom-add-to-cart-form {
    margin-bottom: 20px;
}

.custom-register-btn {
    background: #546b30 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.custom-register-btn:hover {
    background: #445826 !important;
}

.custom-register-btn i {
    display: flex;
    align-items: center;
}

.custom-register-btn img {
    width: 18px;
    filter: brightness(0) invert(1);
}

.woocommerce div.product form.cart {
    margin: 0 !important;
}

.secure-checkout {
    font-size: 16px;
    color: #404039;
    line-height: 1.3;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 0 0;
}

.secure-checkout i {
    display: flex;
    align-items: center;
}

.secure-checkout img {
    width: 16px;
}

.woocommerce-error {
    background: #ffebe8;
    border: 1px solid #ff4f4f;
    color: #cc0000;
    padding: 15px;
    border-radius: 6px;
    font-weight: 600;
}
@media (min-width: 1280px) and (max-width: 1430px) {
    .sidebar-top-banner{ font-size:13px;;}
}

@media (max-width:1440px) {
    .sticky-sidebar-box {
        max-width: 380px;
        border-radius: 16px;
    }

    .sidebar-top-banner {
        font-size: 13px;
        padding: 5px 15px;
    }

    .sidebar-content-inner {
        padding: 16px;
    }

    .sidebar-details {
        padding: 12px;
        border-radius: 10px;
    }

   

    .sidebar-price .price-suffix {
        font-size: 13px;
    }

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

    .sidebar-detail-item i img {
        width: 18px;
    }

    .sidebar-detail-item i {
        min-width: 18px;
        width: 18px;
    }

    .sidebar-detail-item   {
        font-size: 14px;
    }

    .custom-register-btn {
        font-size: 14px;
        padding-right: 30px;
    }

    .secure-checkout {
        font-size: 14px;
    }

    .sidebar-detail-item + .sidebar-detail-item{
        margin-top: 8px;
    }


    .products-conatin-block{ padding: 48px 0 80px; }
    .details-banner-block{ max-width: 730px; }
    .class-inner-nav ul li a{ min-height: 40px; line-height: 1; font-size: 14px; padding: 10px;}   
}
@media (max-width:1280px) {
    .faq-section{ padding: 80px 0; }
    .cta-block-main{ margin-bottom: -66px; border-radius: 24px; padding: 24px 48px; }
    .cta-block-main .call-box i{ width: 80px;}
    .faq-accordion{ padding: 48px 0 0 0; }

    .day-text i img, .time-text i img{ width: 20px;}
    .day-text, .time-text{ font-size: 14px;}

    .cta-block-main .cta-btn a span{ display: flex; flex-wrap: nowrap;}

    .cta-block-main .left-data { max-width: 690px; }

}

@media (max-width:1200px) {
.details-banner-block{ max-width: 100%; padding-bottom: 50px; }    
.class-inner-nav ul li a{ min-height: 40px; line-height: 1; font-size: 14px; padding: 10px;}

.class-details-list{ padding: 24px; }
.detail-item{ font-size: 14px;}
.detail-item i img{ width: 20px;}

.products-conatin-block { gap: 30px; flex-direction: column-reverse;}
.class-left-column{ width: 100%;}
.class-right-column{ width: 100%;  margin: -120px 0 0 0; }
.class-left-column{ width: 100%;}
.products-conatin-block .sticky-sidebar-box{ margin: 0; }

.class-inner-nav ul{ overflow: auto; flex-wrap: nowrap;  
    /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Old Edge / IE */
}
.class-inner-nav ul::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.cta-block-main .call-box i{ min-width: 80px; }
.cta-block-main .left-data{ max-width: 520px; }
.faq-section{ padding: 48px 0; }
.faq-accordion{ padding: 32px 0 0 0; }

.products-conatin-block .sticky-sidebar-box { transform: none; }
}

@media (max-width:1024px) {
    .cta-block-main{ border-radius: 20px; padding: 20px 32px;}  
        .cta-block-main .left-data { max-width: 440px; }

        .faq-accordion .faq-item{ border-radius: 16px; padding: 16px; }

        .faq-item .faq-question h6{ line-height: 1.2; }
}
@media (max-width:767px) {
.class-details-list{ padding: 16px; gap: 10px; border-radius: 10px;  }
.detail-item{ gap: 0; display: flex; align-items: flex-start; flex-wrap: wrap;}
.detail-item span {  width: 100%;}
.detail-item strong{ padding: 0 0 0 10px; width: 50%;}
.class-what-you-will-learn ul{ padding: 16px; border-radius: 10px;}
.class-whats-included ul li,
.class-what-you-will-learn ul li{ width: 100%;}

.schedule-item{ flex-direction: column; padding: 16px ; border-radius: 10px; gap: 12px; align-items: flex-start;}

.cta-block-main { margin-bottom: -125px; padding: 24px 16px; align-items: flex-start; flex-direction: column;}
.cta-block-main .left-data{ max-width: 100%;}
.cta-block-main .call-box {flex-direction: column; align-items: flex-start; gap: 16px;}
.cta-block-main .call-box .box-in p{ padding: 10px 0 0 0; font-size: 14px;}
.cta-block-main .cta-btn{ align-items: flex-start; padding: 20px 0 0 0;}
}