/*

 * Single Webinar Detail Page Styles

 * WellFemme Theme

 */



 :root {

    --color-primary: #56C2C2;

    --color-secondary: #FABAAB;

    --color-tertiary: #1B7895;

    --color-text: #3B3B3B;

    --color-text-light: #6C6C6C;

    --color-bg-light: #F8F9FA;

}



/* ==========================================================================

   Breadcrumb

   ========================================================================== */



.webinar-breadcrumb {

    background: #F5F5F5;

    padding: 15px 0;

    font-size: 14px;

    color: var(--color-text-light);

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

   

    width: 100%;

    min-height: 45px;

}



.webinar-breadcrumb .container {

    text-align: center;

}



.webinar-breadcrumb a {

    color: var(--color-text-light);

    text-decoration: none;

    transition: color 0.3s ease;

    display: inline !important;

    visibility: visible !important;

}



.webinar-breadcrumb a:hover {

    color: var(--color-primary);

}



.webinar-breadcrumb span {

    display: inline !important;

    visibility: visible !important;

    color: var(--color-text-light);

}



/* ==========================================================================

   Main Content Container

   ========================================================================== */



.webinar-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 60px 15px;

}



/* ==========================================================================

   Meta Information

   ========================================================================== */



.webinar-meta {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

    font-size: 14px;

    color: var(--color-primary);

    flex-wrap: wrap;

}



.webinar-meta a {

    color: var(--color-primary);

    text-decoration: none;

    transition: color 0.3s ease;

}



.webinar-meta a:hover {

    color: var(--color-tertiary);

}



.webinar-meta span {

    color: var(--color-text-light);

}



/* ==========================================================================

   Title

   ========================================================================== */



.webinar-title {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 36px;

    line-height: 48px;

    color: var(--color-tertiary);

    margin-bottom: 30px;

}



/* ==========================================================================

   Video/Image Section

   ========================================================================== */



.webinar-video {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #E5E5E5;

    border-radius: 8px;

    overflow: hidden;

    margin-bottom: 30px;

}



.webinar-video img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.video-play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

  

   

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    z-index: 2;

}



.video-play-btn:hover {

    

    transform: translate(-50%, -50%) scale(1.1);

}







.video-play-btn img {

    width: 92px !important;

    /* width: 32px; */

    height: 92px !important;

    object-fit: contain;

}



/* Video Modal */

.video-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.9);

    z-index: 9999;

    align-items: center;

    justify-content: center;

}



.video-modal.active {

    display: flex;

}



.video-modal-content {

    width: 90%;

    max-width: 1200px;

    position: relative;

}



.video-modal-close {

    position: absolute;

    top: -40px;

    right: 0;

    color: white;

    font-size: 32px;

    cursor: pointer;

}



.video-modal iframe {

    width: 100%;

    aspect-ratio: 16 / 9;

}



/* ==========================================================================

   Registration Box

   ========================================================================== */



.registration-box {

    background: var(--color-primary);

    padding: 30px;

    border-radius: 8px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

}



.registration-box h3 {

    color: white;

    font-size: 22px;

    font-weight: 700;

    margin: 0;

}



.register-btn {

    background: var(--color-tertiary);

    color: white;

    border: none;

    padding: 12px 40px;

    font-size: 16px;

    font-weight: 700;

    border-radius: 5px;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

}



.register-btn:hover {

    background: #145f77;

    color: white;

}



/* ==========================================================================

   Content Section

   ========================================================================== */



.webinar-content {

    margin-bottom: 50px;

}



.webinar-content h2 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 28px;

    color: var(--color-tertiary);

    margin-bottom: 20px;

}



.webinar-content p {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 16px;

    line-height: 28px;

    color: var(--color-text-light);

    margin-bottom: 20px;

}



.webinar-content h3 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 20px;

    color: var(--color-tertiary);

    margin-bottom: 15px;

    margin-top: 30px;

}



.webinar-content ul {

    list-style: none;

    padding: 0;

    margin-bottom: 20px;

}



.webinar-content ul li {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 16px;

    line-height: 32px;

    color: var(--color-text-light);

    padding-left: 35px;

    position: relative;

    margin-bottom: 8px;

}



.webinar-content ul li:before {

    content: '';

    position: absolute;

    left: 0;

    top: 6px;

    width: 20px;

    height: 20px;

    background-image: url('../images/icons/check-icon.svg');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

}



/* ==========================================================================

   Speaker Section

   ========================================================================== */



.speaker-section {

    margin-bottom: 50px;

}



.speaker-section h2 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 28px;

    color: var(--color-tertiary);

    margin-bottom: 30px;

}



.speaker-card {

    display: flex;

    gap: 30px;

    margin-bottom: 40px;

}



.speaker-image {

    width: 290px;

    height: 336px;

    flex-shrink: 0;

    border-radius: 8px;

    overflow: hidden;

    background: #E5E5E5;

}



.speaker-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.speaker-info {

    margin-top: 42px !important;

}



.speaker-info h3 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 22px;

    color: var(--color-tertiary);

    margin-bottom: 15px;

}



.speaker-info p {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 15px;

    line-height: 26px;

    color: var(--color-text-light);

    margin: 0;

}



/* ==========================================================================

   Resource List

   ========================================================================== */



.resource-section {

    margin-bottom: 50px;

}



.resource-section h2 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 28px;

    color: var(--color-tertiary);

    margin-bottom: 20px;

}



.resource-section p {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 16px;

    color: var(--color-text-light);

    margin-bottom: 15px;

}



.resource-section ul.resource-list {

    list-style: none;

    padding-left: 0;

    margin-bottom: 20px;

}



.resource-section ul.resource-list li {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 15px;

    line-height: 28px;

    color: var(--color-text-light);

    margin-bottom: 10px;

    padding-left: 20px;

    position: relative;

}



.resource-section ul.resource-list li:before {

    content: '•';

    position: absolute;

    left: 0;

    color: var(--color-primary);

    font-weight: 700;

    font-size: 18px;

}



.resource-section ul.resource-list li a {

    color: var(--color-primary);

    text-decoration: none;

    transition: color 0.3s ease;

}



.resource-section ul.resource-list li a:hover {

    color: var(--color-tertiary);

    text-decoration: underline;

}



/* ==========================================================================

   Recipe/Highlighted Section

   ========================================================================== */



.recipe-section {

    background: var(--color-bg-light);

    padding: 30px;

    border-radius: 8px;

    margin-bottom: 50px;

}



.recipe-section h2 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 24px;

    color: var(--color-tertiary);

    margin-bottom: 20px;

}



.recipe-section h3 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 18px;

    color: var(--color-tertiary);

    margin-top: 25px;

    margin-bottom: 15px;

}



.recipe-section ul {

    list-style: disc;

    padding-left: 25px;

    margin-bottom: 20px;

}



.recipe-section ul li {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 15px;

    line-height: 26px;

    color: var(--color-text-light);

}



.recipe-section p {

    font-family: 'Nunito Sans', sans-serif;

    font-size: 15px;

    line-height: 26px;

    color: var(--color-text-light);

    margin-bottom: 15px;

}



/* ==========================================================================

   Tags Section

   ========================================================================== */



.tags-section {

    margin-bottom: 30px;

}



.tags-section h4 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 18px;

    color: var(--color-tertiary);

    margin-bottom: 15px;

}



.tag-item {

    display: inline-block;

    padding: 8px 20px;

    margin: 5px 5px 5px 0;

    background: white;

    border: 1px solid var(--color-primary);

    color: var(--color-primary);

    border-radius: 3px;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.3s ease;

}



.tag-item:hover {

    background: var(--color-primary);

    color: white;

}



/* ==========================================================================

   Share Section

   ========================================================================== */



.share-section {

    margin-bottom: 50px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}



.share-section h4 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 18px;

    color: var(--color-tertiary);

    margin: 0;

}



.share-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    background: var(--color-primary);

    color: white;

    border-radius: 50%;

    text-decoration: none;

    transition: all 0.3s ease;

    font-size: 18px;

}



.share-btn:hover {

    background: var(--color-tertiary);

    color: white;

    transform: translateY(-3px);

}



/* ==========================================================================

   Navigation Posts

   ========================================================================== */



.post-navigation {

    background: var(--color-bg-light);

    padding: 30px 0;

    margin: 50px 0;

}



.nav-post {

    display: flex;

    align-items: center;

    text-decoration: none;

    color: var(--color-tertiary);

    font-weight: 700;

    transition: all 0.3s ease;

}



.nav-post:hover {

    color: var(--color-primary);

}



.nav-icon {
    width: 62px;
    height: 62px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 15px;
    flex-shrink: 0;
    transition: background 0.3s ease;
    /* font-size: 14px; */
}



.nav-post:hover .nav-icon {

    background: var(--color-tertiary);

}



.nav-post.next .nav-icon {

    margin-right: 0;

    margin-left: 15px;

}



/* ==========================================================================

   Related Webinars

   ========================================================================== */



.related-webinars {

    margin-top: 80px;

}



.related-webinars h2 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 32px;

    color: var(--color-tertiary);

    text-align: center;

    margin-bottom: 50px;

}



.webinar-card {background: white;border-radius: 8px;overflow: hidden;box-shadow: none;transition: all 0.3s ease;height: 100%;}





.webinar-card-image {width: 100%;aspect-ratio: 16 / 10;background: #E5E5E5;overflow: hidden;height: 380px;border-radius: 8px;}



.webinar-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}







.webinar-card-body {padding: 25px 0px;}



.webinar-card-meta {

    font-size: 13px;

    color: var(--color-primary);

    margin-bottom: 10px;

}



.webinar-card-meta span {

    color: var(--color-text-light);

    margin-left: 5px;

}



.webinar-card-title {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 20px;

    line-height: 28px;

    color: var(--color-tertiary);

    margin-bottom: 15px;

}



.webinar-card-author {

    font-size: 14px;

    color: var(--color-text-light);

    margin-bottom: 20px;

}



.watch-replay-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--color-tertiary);

    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;

}



.watch-replay-btn:hover {

    color: var(--color-primary);

}



.watch-replay-icon {

    width: 30px;

    height: 30px;

    background: var(--color-primary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    transition: background 0.3s ease;

}



.watch-replay-btn:hover .watch-replay-icon {

    background: var(--color-tertiary);

}



/* ==========================================================================

   Sidebar

   ========================================================================== */



.sidebar-widget {

    background: white;

    padding: 25px;

    border-radius: 8px;

    margin-bottom: 30px;

}



.sidebar-widget.tags-widget {

    background: white;

}



.sidebar-widget h3 {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 20px;

    color: var(--color-tertiary);

    margin-bottom: 20px;

}



.sidebar-tag {

    display: block;

    padding: 12px 20px;

    margin: 0 0 8px 0;

    background: #E8F7F7;

    border: none;

    color: var(--color-primary);

    border-radius: 0;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.3s ease;

    position: relative;

    padding-right: 40px;

}



.sidebar-tag:after {

    content: '›';

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: var(--color-primary);

    transition: all 0.3s ease;

}



.sidebar-tag:hover {

    background: var(--color-primary);

    color: white;

}



.sidebar-tag:hover:after {

    color: white;

    right: 12px;

}



.sidebar-webinar-item {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

    text-decoration: none;

}



.sidebar-webinar-item:last-child {

    margin-bottom: 0;

}



.sidebar-webinar-item:hover .sidebar-webinar-title {

    color: var(--color-primary);

}



.sidebar-webinar-image {

    width: 80px;

    height: 80px;

    flex-shrink: 0;

    border-radius: 8px;

    overflow: hidden;

    background: #E5E5E5;

}



.sidebar-webinar-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.sidebar-webinar-title {

    font-family: 'Proxima Nova', sans-serif;

    font-weight: 700;

    font-size: 15px;

    line-height: 22px;

    color: var(--color-tertiary);

    margin-bottom: 5px;

    transition: all 0.3s ease;

}



.sidebar-webinar-author {

    font-size: 13px;

    color: var(--color-text-light);

}



/* ==========================================================================

   Tablet Responsive (768px - 991px)

   ========================================================================== */



@media (max-width: 991px) {

    .webinar-container {

        padding: 40px 15px;

    }



    .webinar-title {

        font-size: 28px;

        line-height: 38px;

    }



    .speaker-card {

        flex-direction: column;

    }



    .speaker-image {

        width: 150px;

        height: 150px;

    }



    .registration-box {

        flex-direction: column;

        text-align: center;

        gap: 20px;

        padding: 25px;

    }



    .related-webinars h2 {

        font-size: 28px;

    }

}



/* ==========================================================================

   Mobile Responsive (< 768px)

   ========================================================================== */



@media (max-width: 767px) {

    .webinar-container {

        padding: 30px 15px;

    }



    .container {

        padding-left: 1px !important;

        padding-right: 1px !important;

    }



    .webinar-breadcrumb {

        font-size: 12px;

        padding: 12px 0;

        text-align: left;

    }



    .webinar-breadcrumb .container {

        text-align: center;

        padding-left: 15px !important;

        padding-right: 15px !important;

    }



    .webinar-meta {

        display: none;

    }



    .webinar-title {

        font-size: 24px;

        line-height: 32px;

        margin-bottom: 25px;

        text-align: left;

    }



    .webinar-content h2 {

        font-size: 22px;

        line-height: 30px;

        text-align: left;

    }



    .webinar-content h3 {

        font-size: 18px;

        text-align: left;

    }



    .webinar-content p,

    .webinar-content ul li {

        font-size: 15px;

        line-height: 26px;

        text-align: left;

    }



    



    .video-play-btn img {

        width: 24px;

        height: 24px;

    }



    .registration-box {

        padding: 20px;

    }



    .registration-box h3 {

        font-size: 18px;

        text-align: center;

    }



    .register-btn {

        padding: 10px 30px;

        font-size: 15px;

    }



    .speaker-section h2,

    .resource-section h2 {

        font-size: 24px;

        text-align: left;

    }



    .speaker-image {

        width: 120px;

        height: 120px;

    }



    .speaker-info h3 {

        font-size: 20px;

        text-align: left;

    }



    .speaker-info p {

        font-size: 14px;

        line-height: 24px;

        text-align: left;

    }



    .recipe-section {

        padding: 20px;

    }



    .recipe-section h2 {

        font-size: 20px;

        text-align: left;

    }



    .recipe-section p {

        text-align: left;

    }



    .tag-item {

        font-size: 13px;

        padding: 6px 16px;

    }



    .share-section {

        flex-direction: row !important;

        align-items: center !important;

        gap: 10px;

        flex-wrap: wrap;

    }



    .share-section h4 {

        width: 100%;

        margin-bottom: 5px;

    }



    .share-btn {

        width: 40px;

        height: 40px;

        margin: 0;

    }



    .nav-post {

        font-size: 14px;

    }



    .nav-icon {

        width: 40px;

        height: 40px;

        margin-right: 10px;

    }



    .nav-post.next .nav-icon {

        margin-left: 10px;

    }



    .related-webinars {

        margin-top: 50px;

    }



    .related-webinars h2 {

        font-size: 24px;

        margin-bottom: 30px;

    }



    .webinar-card-body {

        padding: 20px;

    }



    .webinar-card-title {

        font-size: 18px;

        line-height: 26px;

    }



    .sidebar-widget {

        padding: 2px;

        margin-bottom: 20px;

    }



    .sidebar-tag {

        font-size: 12px;

        padding: 10px 18px;

    }



    .row.g-4 {

        padding: 20px !important;

    }



    .post-navigation {

        padding: 20px !important;

    }

}



/* ==========================================================================

   Small Mobile (< 576px)

   ========================================================================== */



@media (max-width: 575px) {

    .webinar-breadcrumb {

        font-size: 12px;

    }



    .webinar-title {

        font-size: 22px;

        line-height: 30px;

    }



    .webinar-content h2 {

        font-size: 20px;

    }



    .registration-box h3 {

        font-size: 16px;

    }

}



/* ==========================================================================

   Desktop Styles

   ========================================================================== */



.webinar-breadcrumb {

    margin-top: 70px;

}



/* ==========================================================================

   Print Styles

   ========================================================================== */



@media print {

    .video-play-btn,

    .registration-box,

    .share-section,

    .post-navigation,

    .related-webinars,

    .sidebar-widget {

        display: none;

    }



    .webinar-container {

        padding: 20px 0;

    }

}