.color-red {
    background-color: #FD3F28;
}

.color-orange {
    background-color: #ec6411;
}

.color-yellow {
    background-color: #FEBD17;
}

.color-green {
    background-color: #34a049;
}

.color-blue {
    background-color: #00a7d7;
}

.color-violet {
    background-color: #9f2c42;
}

.color-blue-violet {
    background-color: #315378;
}

.color-rowad {
    background-color: #0E4B61;
}

.color-light-grey {
    background-color: #fafafa;
}

/* Utility Classes */
.gap {
    padding: 0px 0;
}

.no-top {
    padding-top: 0;
}

/* Workshops Styles */
.workshops .wPanel .wBox h3 {
    font-size: 15px !important;
    line-height: 18px;
    margin-bottom: 3px;
    margin-top: 10px;

}

.workshops .wPanel .wBox h3,
.workshops .wPanel .wBox p {
    padding: 0 15px;
    font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.workshops {
    padding: 0px !important;
}







.workshops .wPanel {
    display: flex;
    align-items: stretch;
    /* Ensure all items have equal height */
    justify-content: center;
    border-bottom: 0px solid var(--border-color);
    margin-bottom: 0px;
    background-color: #fff;
    width: 100%;
    column-gap: 20px;
    position: sticky;
    top: var(--sticky-offset);
    z-index: 9;
    transition: all var(--transition-duration) ease;
}

@media (max-width: 1500px) {
    .workshops .wPanel {
        flex-direction: column;
        width: 100%;
    }

    .workshops .wBoxWrapper {

        margin-bottom: 30px;
    }
}


.workshops .wBoxWrapper {
    flex: 1 1 calc(25% - 20px);
    /* 25% width minus the gap */
    box-sizing: border-box;
    cursor: pointer;

}


.workshops .wBox {
    padding-bottom: 15px;
    border: 0px solid #ccc;
    /* Optional: to visualize the box */

}




/* Expanded state - apply the external shadow */
.workshops .wBoxWrapper.expanded {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* External shadow */
    background-color: #dddddd;
}


.workshops .wSlot {
    width: 100%;
}



/* Style for each expandable .wBox */
.wBox {
    position: relative;
    /* Needed to position the sign relative to the box */
    padding-right: 30px;
    /* Space for the sign */
    border: 1px solid #ccc;
    /* Optional: Border to visualize each box */
}

/* Position the plus sign relative to each .wBox */
.wBox::after {
    content: '+';
    /* Plus sign by default */
    font-size: 20px;
    font-weight: 900;
    color: #404255;
    position: absolute;
    right: 10px;
    /* Adjust the positioning as per your layout */
    top: 1px;
    transition: transform 0.5s ease, content 0.5s ease, color 0.5s ease;
}

/* Change the plus sign to 'x' when expanded */
.wBox.expanded::after {
    content: '-';
    transform: rotate(0deg);
    /* Optional: Apply rotation */
    color: #43b649;
}

/* Hide the plus sign for specific items by using the no-sign class */
.wBox.no-sign::after {
    content: none;
}

.wBoxWrapper.no-shadow {
    box-shadow: none !important;
}







.workshops .wBox.fade {
    opacity: .5;
}

.workshops .wPanel .wBox header {
    padding: 0;
    color: #fff;
    position: relative;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 5px 15px;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.15);
}

.workshops .wPanel .wBox header.color-red {
    background-color: #f04d39;
}

.workshops .wPanel .wBox header.color-yellow {
    background-color: #FEBD17;
}

.workshops .wPanel .wBox header.color-green {
    background-color: #43b649;
}

.workshops .wPanel .wBox header.color-blue {
    background-color: #6157fb;
}

.workshops .wPanel .wBox header.color-violet {
    background-color: #773cb2;
}

.workshops .wPanel .wBox header.color-rowad {
    background-color: #0E4B61;
}

/* SDG Color Classes */
.workshops .wPanel .wBox header.color-sdg-3 {
    background-color: var(--sdg-3, #4C9F38) !important;
}

.workshops .wPanel .wBox header.color-sdg-5 {
    background-color: var(--sdg-5, #FF3A21) !important;
}

.workshops .wPanel .wBox header.color-sdg-6 {
    background-color: var(--sdg-6, #26BDE2) !important;
}

.workshops .wPanel .wBox header.color-sdg-7 {
    background-color: var(--sdg-7, #FCC30B) !important;
    color: #163642;
}

.workshops .wPanel .wBox header.color-sdg-8 {
    background-color: var(--sdg-8, #A21942) !important;
}

.workshops .wPanel .wBox header.color-sdg-9 {
    background-color: var(--sdg-9, #FD6925) !important;
}

.workshops .wPanel .wBox header.color-sdg-11 {
    background-color: var(--sdg-11, #FD9D24) !important;
}

.workshops .wPanel .wBox header.color-sdg-14 {
    background-color: var(--sdg-14, #0A97D9) !important;
}

.workshops .wSlot:nth-child(odd)>.wBoxWrapper {
    background-color: #e2e2e2;
}

/* Workshop Description */
.wDesc {
    background-color: #fafafa;
    padding: 10px 0;
    display: none;
    margin-top: 15px;
}

/* Speaker Modal Styles */
.modal-speaker-wrapper {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    display: none;
    overflow-y: scroll;
    background-color: #ffffff66;
    transition: all .3s ease-in-out;
    opacity: 0;
    /* background: radial-gradient(farthest-side at bottom left, #fd3d286e, transparent 1000px), radial-gradient(farthest-corner at bottom right, #febd17a3, transparent 1000px), radial-gradient(farthest-side at top right, #43b649d9, transparent 1000px), radial-gradient(farthest-corner at top left, #773cb2b5, transparent 1000px), radial-gradient(circle at center, #2f7caf27, transparent 1000px); */
    /* background-color: #00aaff80; */
    backdrop-filter: saturate(200%) blur(15px);
}

.modal-speaker-wrapper.reveal {
    opacity: 1;
}

.modal-speaker-wrapper.reveal .modal-body {
    right: 0;
}

.modal-speaker-wrapper.show {
    display: block;
}

.modal-speaker-wrapper .modal-close {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    z-index: 10000;
    color: #fff;
}

.modal-speaker-wrapper .modal-body {
    padding: 0;
    width: 90%;
    max-width: 500px;
    height: 100vh;
    background: #3f3f3f;
    overflow: scroll;
    position: absolute;
    transition: all .3s ease-in-out;
    top: 0;
    right: -100%;
    background-size: cover;
    background-position: top center;
}

.modal-speaker-wrapper .modal-body .modal-container {
    padding: 30px;
    position: relative;
}

.modal-speaker-wrapper .modal-body .modalHeader {
    padding-top: 40px;
}

.modal-speaker-wrapper .modal-body .modalHeader .speaker-img {
    display: block;
    width: 100%;
    max-width: 130px;
    margin: 0 auto 30px;
    border-radius: 50%;
}

.modal-speaker-wrapper .modal-body .modalHeader p {
    margin-bottom: 40px;
    color: #fff;
}

.modal-speaker-wrapper .modal-body .modalHeader .designation,
.modal-speaker-wrapper .modal-body .modalHeader .entity,
.modal-speaker-wrapper .modal-body .modalHeader h5 {
    margin-bottom: 0;
    text-align: center;
}

.modal-speaker-wrapper .modal-body .modalHeader h5 {
    color: #fff;
    margin-bottom: 10px;
}

.modal-speaker-wrapper .modal-body .modalHeader .designation {

    color: #fff;
    line-height: 18px;
}

.modal-speaker-wrapper .modal-body .modal-desc .modal-container {
    padding-top: 0;
}

.modal-speaker-wrapper .modal-body .modal-desc p {
    color: #fff;
    line-height: 20px;
    margin-bottom: 20px;
}

/* Grid Layout for Accordion Items */
.wPanel .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.wBoxWrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* box-shadow: inset 0 0.4rem 0.6rem rgba(0, 0, 0, 0.15);*/
}




/* Responsive Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: 25% 75%;
    background-color: #6c7a89;
    color: white;
    padding: 20px;
    gap: 20px;
    height: 600px;
}

.grid-left,
.grid-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-left {
    background-color: #4e5d6c;
}

.grid-left img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ccc;
}

.grid-right {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.grid-right h2 {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #e0e0e0;
}

.grid-right p {
    font-size: 16px;
    line-height: 1.5;
    color: #c0c0c0;
}

/* Media Queries */
@media (max-width: 767px) {
    .modal-speaker-wrapper .modal-body {
        max-width: 100%;
        height: auto;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .wPanel {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .wBoxWrapper {
        flex: 1 1 100%;
    }
}




/* Time Grid */
.time-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 10px 0PX;
    align-items: center;
    border-bottom: 0px solid #000;
    margin-bottom: 1px;
}

.left-column {
    display: flex;
    justify-content: center;
    margin-left: 20px;
    align-items: center;
    background-color: #fafafa;
    /* Light background for visibility */
    height: 100%;
    /* Ensures full height relative to the right column's content */
}

.left-column h3 {
    font-size: 15px !important;
    font-weight: 900;
    margin: 0;
    text-align: center;
}

.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    /* Light background for visibility */
    height: 100%;
    /* Ensures full height relative to the right column's content */
}

.right-column h3 {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    text-align: left;
}


/* Media Query for Mobile Devices */
@media (max-width: 767px) {
    .time-grid {
        grid-template-columns: 1fr;
    }

    .left-column {
        justify-content: flex-start;
        padding-left: 10px;
        height: auto;
        /* Resets height for smaller screens */
    }

}



/* time grid in the parallel sessions or workshops parallel session the diference is that the right colum has right margin and it will display the time to  the left similar to the usual time grid*/


/* Time Grid */
.time-grid-parallel {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding: 10px 0px;
    align-items: center;
    border-bottom: 0px solid #000;
    margin-bottom: 1px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .time-grid-parallel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 8px 0px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .time-grid-parallel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        padding: 5px 0px;
        text-align: center;
    }

    .left-column {
        margin-left: 0px;
    }

    .right-column {
        margin-right: 0px;
    }
}

.time-grid-parallel .right-column {
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: #fff;
    /* Light background for visibility */
    height: 100%;
    /* Ensures full height relative to the right column's content */
    margin-right: 20px;
}


/*end of time grid parallel*/



#events-bio {
    max-width: 1200px;
    margin: 15px auto;
    padding: 15px 30px;
    overflow: hidden;
    position: relative;
    background: #bababa00;
    border-radius: 0pxpx;
    /* box-shadow: 13px 32px 36px 36px hsla(0, 0%, 70%, 0.10); */

}

#events-bio p {

    color: #fff !important;
}



/* parallel-grid Grid Container */
.parallel-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    margin: 20px;

    overflow: hidden;

}

.parallel-grid h4 {
    color: #fff !important;
    margin-top: 10px;

}

/* Left Column */
.parallel-grid-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;


}

.parallel-grid-left h4 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}

/* Right Column */
.parallel-grid-right {
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
}

.parallel-grid-right h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.parallel-grid-right p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Responsive Design */
@media (max-width: 992px) {
    .parallel-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .parallel-grid-left,
    .parallel-grid-right {
        padding: 20px;
        text-align: center;
    }

    .parallel-grid-left h1 {
        font-size: 2rem;
    }

    .parallel-grid-right h2 {
        font-size: 1.5rem;
    }

    .parallel-grid-right p {
        font-size: 0.9rem;
    }
}


/* workshop-grid Grid Container */
.workshop-grid {
    display: grid;
    grid-template-columns: 20% 1fr;
    min-height: auto;
    padding: 20px;
    overflow: hidden;
    border-bottom: 20px solid #ffffff;

}

.workshop-grid h4 {
    color: #252525 !important;
    margin-top: 10px;

}

/* Left Column */
.workshop-grid-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;


}

.workshop-grid-left h1 {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}

/* Right Column */
.workshop-grid-right {
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
}

.workshop-grid-right h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.workshop-grid-right p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Responsive Design */
@media (max-width: 992px) {
    .workshop-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .workshop-grid-left,
    .workshop-grid-right {
        padding: 20px;
        text-align: center;
    }

    .workshop-grid-left h1 {
        font-size: 2rem;
    }

    .workshop-grid-right h2 {
        font-size: 1.5rem;
    }

    .workshop-grid-right p {
        font-size: 0.9rem;
    }
}







.seventy {
    display: grid;
    grid-template-columns: 70% 1fr;
    gap: 0px;
    padding: 0px;
    align-items: stretch;
    /* Ensure both columns are equal in height */

}

.seventy-left {

    display: grid;
    grid-template-rows: repeat(auto-fit, 1fr);
    /* Distribute items evenly in rows */
    padding-left: 0px;
    gap: 0px;
    /* Add space between rows if needed */
    height: 100%;
    /* Take up the full height of the grid container */
    margin-right: 10px;

}

.seventy-right {
    display: grid;
    grid-template-rows: repeat(auto-fit, 1fr);
    /* Distribute items evenly in rows */
    padding-left: 10px;
    gap: 20px;
    /* Add space between rows if needed */
    height: 100%;
    /* Take up the full height of the grid container */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .seventy {
        grid-template-columns: 1fr;
        /* Stack columns on top of each other */
    }

    .seventy-right {
        grid-template-rows: auto;
        /* Revert to auto layout on smaller screens */
    }
}





.rotated-section {
    transform: rotate(-90deg);
    /* Rotate the section 90 degrees */

    display: inline-block;
    /* Ensure it's treated as an inline element */
}


/* Time Grid */
.time-grid-rotated {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    border-bottom: 0px solid #000;
    margin-bottom: 1px;
    align-items: stretch;
    /* Ensure both columns are equal in height */
}

.time-grid-rotated-right {
    display: grid;
    grid-template-rows: repeat(auto-fit, 1fr);
    /* Distribute items evenly in rows */
    padding-left: 0px;
    gap: 20px;
    /* Add space between rows if needed */
    height: 100%;
    /* Take up the full height of the grid container */
}

.time-grid-rotated-left {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    height: 100%;
    /* Take up the full height of the grid container */
}

.time-grid-rotated-left h3 {
    transform: rotate(-90deg) !important;
    /* Rotate the text by -90 degrees */

    display: inline-block;
    /* Ensures the element can be transformed */
    margin: 0;
    /* Remove any default margin */
    text-align: center;
    /* Center align the text after rotation */
    white-space: nowrap;
    /* Prevents text wrapping */
}

.time-grid-rotated-left h3 {
    font-size: 15px !important;
    font-weight: 900;
    margin: 0;
    text-align: center;
}