.main-container {
    position: relative;
}

section.first-section {
    padding-top: calc(var(--leftMargin) + 60px + 64px);
    background-color: rgb(243, 247, 255);
}

.creator-card {
    max-width: 312px;
    width: 100%;
    height: 56px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.creator-card img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

section.second-section {
    background-color: rgb(255, 255, 255);
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: 380px;
}

section.simulation-card {
    width: 100%;
    position: absolute;
    max-width: 476px;
    height: fit-content;
    max-height: 930px;
    border-radius: 20px;
    /* border-width: 1px; */
    border: 1px solid rgba(231, 231, 231, 1);
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 32px;
    padding-left: 8px;
    background-color: rgb(255, 255, 255);
    top: calc(var(--leftMargin1) / 2 + 148px);
    right: calc(var(--rightMargin1) - 15px);
    box-shadow: 2px 2px 24px 0px rgba(0, 0, 0, 0.05);
    

}

section.simulation-card .main-img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    aspect-ratio: 567/319;
    height: 319px;
}

section.simulation-card .toggle-img {
    width: 44px;
    height: 44px;
    border-radius: 3.16px;
    border: 1px solid rgba(255, 255, 255, 0.69)
}

.days-selection .durationcard {
    max-width: 120px;
    width: 100%;
    height: 69px;
    border-radius: 8px;
    border: 1px solid rgba(231, 231, 231, 1);
    color: rgba(170, 174, 182, 1);
    font-size: var(--h5);
    font-weight: 500;
}

.days-selection .durationcard.active {
    border: 1px solid rgba(138, 214, 138, 1);
    background-color: rgba(242, 247, 236, 1);
    color: rgba(0, 128, 0, 1);
}

.addtocartbtn,
.redeemBtn {
    max-width: 200px;
    width: 100%;
    height: 56px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    padding-top: 16px;
    padding-right: 34px;
    padding-bottom: 16px;
    padding-left: 34px;
    background: linear-gradient(88.31deg, #175FEF 0.28%, #17439A 98.72%);
    color: #fff !important;
}

.enquiryBtn {
    max-width: 120px;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(59,146,255)!important;
    background: linear-gradient(88.75deg, #265ECF -42.54%, #193F8A 99.04%);
    color: #fff !important;
    display: grid;
    place-items: center;
}

.addtocartbtn:hover,
.redeemBtn:hover,
.enquiryBtn:hover {
    background: linear-gradient(88.31deg, #457dee 0.28%, #315499 98.72%);
}

.buynowBtn {
    width: 200px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid rgba(222, 224, 227, 1);
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
}

.buynowBtn:hover {
    border: 1px solid rgba(222, 224, 227, 1);
    background-color: #e2e1e1;
}

.coupon-input {
    max-width: 282px;
    width: 100%;
    height: 56px;
    border-radius: 8px;
    border: 1px solid rgba(231, 231, 231, 1);
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    font-size: var(--h5);
    font-weight: 400;
}

.mw-640 {
    width: clamp(320px, 45vw, 700px);
}

section.third-section {
    background-color: #fff;
    padding-bottom: 80px;
}

#accordionContainer .accordion-item {
    border-radius: 16px;
    background-color: rgb(240, 245, 255);
    padding: 32px;
}

#accordionContainer .accordion-item .accordion-button {
    box-shadow: none !important;
    border-radius: 16px;
    background-color: rgb(240, 245, 255);
    color: var(--dark);
    padding: 0;
}

#accordionContainer .accordion-item .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

section.fourth-section,
section.fifth-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

section.fifth-section {
    background-color: #fff;
}

.stories-card {
    background-color: rgb(227, 236, 252);
    max-width: 416px;
    min-width: 300px;
}

.simulationsContainer {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 56px;
    overflow-y: auto;
}

.simulationsContainer .simulationCard {
    width: 100%;
    max-width: 410px;
    height: fit-content;
    min-width: 270px;
    border-radius: 16px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 24px;
    padding-left: 8px;
    border: 1px solid rgba(231, 231, 231, 1);
}

.simulationsContainer .simulationCard img.simulation-img {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 122.2%);
    width: 100%;
    aspect-ratio: 469/264;
    border-radius: 16px;
}

.simulationsContainer .simulationCard .chip-card {
    width: fit-content;
    height: 26px;
    border-radius: 8px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;

}

.simulationsContainer .simulationCard .chip-card.self-paced {
    background-color: rgba(255, 248, 243, 1);
    color: rgba(184, 99, 38, 1);
}

.simulationsContainer .simulationCard .chip-card.instructor {
    color: rgba(99, 101, 239, 1);
    background-color: rgba(243, 243, 255, 1);
}

section.sixth-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

section.sixth-section .card-section {
    background: linear-gradient(90deg, #1B2C4D 0%, #2B4374 100%);
    width: 100%;
    height: fit-content;
    border-radius: 24px;
    padding: clamp(12px, 3vw, 48px);
    display: flex;
    justify-content: space-between;
    gap: 24px;

}

section.sixth-section .card-section .card-img {
    border: 4px solid rgba(255, 255, 255, 1);
    border-radius: 16px;
    border-width: 4px;
    width: 100%;
}

.ornageBtn {
    background: linear-gradient(88.39deg, #F07C40 0.27%, #F05505 207.81%);
    border: 1.69px solid rgb(54, 88, 154);
    width: 136px;
    height: 56px;
    border-radius: 8px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    color: #fff;
    margin-top: 32px;
}

.submit-issue {
    background: linear-gradient(88.81deg, #1964FA -2.96%, #0337A0 104.11%);
    box-shadow: -8px -8px 16px 0px #0000003D inset;
    box-shadow: 8px 8px 16px 0px #FFFFFF3D inset;
    border: 2px solid rgb(94, 205, 250);
    width: 100%;
    border-radius: 12px;
    padding-top: 16px;
    padding-right: 34px;
    padding-bottom: 16px;
    padding-left: 34px;
    color: #fff !important;
}

#reportModal input.form-control {
    height: 40px;
    background-image: none;
}

#reportModal textarea.form-control {
    background-image: none;
}

.mx-260 {
    max-width: 260px;
}

/* .carousel-container{
    scroll-behavior: smooth;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}
.carousel-container::scroll-button(right){
    content: "→"; 
    border: none;
    background-color: #1964FA;
    width: 25px;
    height: 25px;
    border-radius: 50%  ;
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-container::scroll-button(left){
    content: "<-";
} */


@media screen and (min-width:2000px) {
    .mw-640 {
        width: 60vw;
    }

    section.second-section {
        min-height: 450px;
    }

    .mx-260 {
        max-width: unset;
        line-height: 150%;
    }
}

@media screen and (max-width:1150px) {
    section.simulation-card {
        position: relative;
        top: 44px;
        right: unset;
        max-width: 100%;
        max-height: fit-content;
    }

    .fourth-section .stories-card {
        max-width: unset;
    }

    .mw-640 {
        width: 100%;
    }

    section.simulation-card .main-img {
        width: 100%;
        height: fit-content;
    }
}

/* instructor led detail  */
.viewEventBtn {
    width: 220px;
    height: 40px;
    border-radius: 4px;
    border: none !important;
    padding: 1.6px;
    background: linear-gradient(91.78deg, #175FEF 1.51%, #17439A 147.6%);
    color: rgba(5, 83, 240, 1);
    display: flex;
}

.viewEventBtn span {
    margin-top: 0.3px;
    background-color: #fff;
    width: 100%;
    height: 99%;
    border-radius: 4px;
    display: grid;
    place-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(153, 187, 255, 1);
}

.CInstrucotrs-section {
    padding-top: 40px;
    padding-bottom: 80px;
}

.instructorsContainer {
    margin-top: 20px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
}

.instructorsContainer .instructor-card {
    min-width: 308px;
    max-width: 320px;
    min-height: 132px;
    opacity: 1;
    gap: 16px;
    border-radius: 15px;
    border: 1px solid rgba(211, 212, 214, 1);
    padding: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.instructorsContainer .instructor-card .img-container img.crown {
    position: absolute;
    left: 26px;
    top: -31px;
}

.instructorsContainer .instructor-card .img-container img.instruct-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1.69px solid rgba(242, 178, 0, 1);
}

input.form-control {
    height: 45px;
    border: 1px solid #CBD9F6;
    font-size: var(--p);
    font-weight: 400;
}

textarea.form-control {
    border: 1px solid #CBD9F6;
    height: 120px;
    resize: none;
}

.noDataSection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background: #fff;
    color: #000;
    border: 1px solid rgb(225, 224, 226);
    border-radius: 8px;
    padding: 40px;
    width: 300px;
}

.noDataSection img {
    width: 150px;
    height: 150px;
    object-fit: scale-down;
}

.two-line-text {
    display: -webkit-box;
    /* creates a flexible box for the clamping */
    -webkit-box-orient: vertical;
    /* vertical orientation required for line-clamp */
    -webkit-line-clamp: 2;
    /* number of lines to show */
    overflow: hidden;
    /* hide the rest */
    text-overflow: ellipsis;
    /* nice to include (works for single-line, harmless here) */

    /* optional layout tuning (set these so "2 lines" is reliable) */
    line-height: 1.4;
    /* adjust to match your design */
    max-height: calc(1.4em * 2);
    /* ensures block height equals 2 lines */
}

.single-line-text {
    display: -webkit-box;
    /* creates a flexible box for the clamping */
    -webkit-box-orient: vertical;
    /* vertical orientation required for line-clamp */
    -webkit-line-clamp: 1;
    /* number of lines to show */
    overflow: hidden;
    /* hide the rest */
    text-overflow: ellipsis;
    /* nice to include (works for single-line, harmless here) */

    /* optional layout tuning (set these so "2 lines" is reliable) */
    line-height: 1.4;
    /* adjust to match your design */
    max-height: calc(1.4em * 1);
    /* ensures block height equals 2 lines */
}

button .spinner-border {
    display: none;
}

button.loading .spinner-border {
    display: block;
    pointer-events: none;
}

.bookBTn {
    background: linear-gradient(88.81deg, #1964FA -2.96%, #0337A0 104.11%);
    border: 2px solid #FFFFFF;
    box-shadow: -8px -8px 16px 0px #0000003D inset;
    box-shadow: 8px 8px 16px 0px #FFFFFF3D inset;
    border-radius: 12px;
    width: 100%;
    height: 62px;
    color: #fff !important;
}

.training-card {
    min-width: 210px;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    /* Needed for the pseudo-element */
    transition: box-shadow 0.3s ease, border-bottom 0.3s ease;
}


.custom-tooltip .tooltip-inner {
    background-color: #291C3C;
    font-size: 12px;
    font-weight: 500;
}

.custom-tooltip .tooltip-arrow::before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)* .5) 0;
    border-top-color: #291C3C;
}

.training-card .card-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.training-card .card-content {
    padding: 12px 12px 8px 12px;
    transition: all 0.3s ease-in-out;
}

.contactBtn {
    background: linear-gradient(88.31deg, #1964FA 0.28%, #0445C8 98.72%);
    border: 0.84px solid #FFFFFF;
    font-size: var(--h5);
    font-weight: 500;
    padding: 2px 12px;
    border-radius: 4px;
    border: none;
    height: 28px;
    color: #fff !important;
    width: 100px;
}