@import './navbar.css';
@import './footer.css';

.main-content {
    margin-top: calc(150*var(--rpx));
    margin-bottom: calc(77*var(--rpx));
    width: calc(1300*var(--rpx));
    border-radius: calc(44*var(--rpx));
    background: #F1FCFC;
    padding: calc(100*var(--rpx));
    margin-inline: calc(60*var(--rpx));
}

.report-name {
    color: #633A82;
    text-align: right;
    font-family: Alexandria, serif;
    font-size: calc(36*var(--rpx));
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: calc(48*var(--rpx));
}

.report-desc {
    color: #1C1C1C;
    text-align: right;
    font-family: Alexandria, serif;
    font-size: calc(16*var(--rpx));
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-bottom: calc(30*var(--rpx));
}

.btnz-div {
    display: flex;
    justify-content: center;
    margin-bottom: calc(77*var(--rpx));
}

.hor-spacer {
    margin-inline: calc(100*var(--rpx));
}

.wide-btn {
    display: flex;
    width: calc(253*var(--rpx));
    height: calc(36*var(--rpx));
    min-width: calc(64*var(--rpx));
    padding: calc(6*var(--rpx)) calc(16*var(--rpx)) calc(6*var(--rpx)) calc(12*var(--rpx));
    justify-content: center;
    align-items: center;
    gap: calc(8*var(--rpx));
    text-decoration: none;
}

.pay-fees-txt {
    color: #633A82;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(36*var(--rpx));
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: calc(50*var(--rpx));
    margin-right: calc(100*var(--rpx));
}

.training-rooms-txt {
    color: #1C1C1C;
    text-align: right;
    font-family: Alexandria, serif;
    font-size: calc(16*var(--rpx));
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    width: calc(690*var(--rpx));
    min-height: calc(150*var(--rpx));
    margin-right: calc(100*var(--rpx));
    margin-bottom: calc(40*var(--rpx));
}

.btnz-div-2 {
    display: flex;
    justify-content: end;
    margin-bottom: calc(77*var(--rpx));
    padding-left: calc(100*var(--rpx));
}

.course-intro {
    display: flex;
    justify-content: space-between;
    padding-inline: calc(50*var(--rpx));
}

.course-poster {
    width: calc(562*var(--rpx));
    height: calc(362*var(--rpx));
    flex-shrink: 0;
    border-radius: calc(36*var(--rpx));
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden; /* Ensures image clips to rounded corners */
}

.poster-img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* Ensures image fills container (crops if needed) */
    /* Alternatively, use `object-fit: contain` to fit whole image without cropping */
    display: block; /* Removes extra space under the image */
}

.course-name {
    color: #D95722;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(36*var(--rpx));
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: calc(40*var(--rpx));
}

.course-description {
    color: #1C1C1C;
    text-align: right;
    font-family: Alexandria, serif;
    font-size: calc(16*var(--rpx));
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    width: calc(400*var(--rpx));
}

.all-videos {
    margin-top: calc(100*var(--rpx));
}

.video-card {
    width: calc(1210*var(--rpx));
    min-height: calc(172*var(--rpx));
    flex-shrink: 0;
    border-radius: calc(20*var(--rpx));
    background: #FFF;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
    margin-bottom: calc(40*var(--rpx));
}

.video-title {
    color: #D95722;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(16*var(--rpx));
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.video-description {
    color: #1C1C1C;
    text-align: right;
    font-family: Alexandria, serif;
    font-size: calc(12*var(--rpx));
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    width: calc(611*var(--rpx));
    height: calc(60*var(--rpx));
}

.video-iframe {
    border-radius: calc(15*var(--rpx));
    background: #000;
    object-fit: contain;
    overflow: hidden;
}

.expiry-date-text {
    color: #D95722;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(36*var(--rpx));
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-block: calc(200*var(--rpx));
}