@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&family=Jaini&family=Jaldi:wght@400;700&display=swap');

:root {
    --color1          : #FFCF9D;
    --color2          : #DE8F5F;
    --color3          : #FFB26F;
    --color4          : #FFB38E;
    --color-text      : #292828;
    --color-bg        : #ddd;
    --color-link      : #000;
    --color-link-hover: #000;
    --page-padding    : 1rem;
    --angle           : -15deg;
    --trans-content   : -30vh;
    --color-text      : #fff;
    --color-bg        : #12100e;
    --color-link      : rgba(255, 255, 255, 0.6);
    --color-link-hover: #fff;
    --color-bg-1      : #2f251e;
    --color-bg-2      : #43392f;
    --color-bg-3      : var(--color-bg-1);
    --color-bg-4      : var(--color-bg-2);
    --color-bg-5      : var(--color-bg-1);
    --color-bg-6      : var(--color-bg-2);
    --x               : 0;
    --y               : 0;
    --offset          : 84px;
}

a,
a:hover {
    color          : inherit;
    text-decoration: none;
}

button:active,
button:focus,
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    outline: 0;
}

body {
    color           : #000;
    font-family     : "Jaldi", serif;
    overflow-x      : hidden;
    font-size       : 16px;
    background-color: #842448;
    background-image: linear-gradient(to bottom right, #c04848, #480048);
    margin: 0;
}

.container {
    max-width: 1700px;
}

ul {
    margin : 0;
    padding: 0;
}

li {
    list-style: none;
}

.py-6 {
    padding-top   : 80px;
    padding-bottom: 80px;
}

.px-6 {
    padding-left : 80px;
    padding-right: 80px;
}

.tuto_schedule_box {
    display    : flex;
    align-items: start;
    position   : relative;
}

.schedule-tabcondent {
    display: none;
}

.schedule-tab-btn {
    /* overflow-y: auto; */
    -webkit-overflow-scrolling: touch;
    padding                   : 30px;
    position                  : sticky;
    top                       : 15px;
    display                   : flex;
    flex-direction            : column;
    gap                       : 30px;
    /* padding-left              : 0; */
}

.schedule-tabContainer {
    padding       : 30px;
    border-left   : 1px solid rgba(255, 255, 255, 0.1);
    width         : calc(100% - 215px);
    padding-bottom: 0;
    height        : 100%;
    perspective   : 1px;
}

.schedule-tab-btn a {
    border-radius: 8px;
    border       : 0;
    background   : linear-gradient(to right, rgb(130 45 55), rgb(161 47 63));
    padding      : 0;
    display      : inline-block;
}

.schedule-tab-btn a .day {
    line-height  : 18px;
    display      : block;
    text-align   : center;
    border-radius: 8px 8px 0px 0px;
    background   : #ffffff1a;
    padding      : 8px 0;
    color        : white;
}

.schedule-tab-btn a .date_con {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 24px;
}

.schedule-tab-btn a .date_con .date {
    line-height: 44px;
    display    : inline-block;
    transition : all 0.4s;
    text-align : center;
    margin     : 0 28px 0 0;
    font-weight: bold;
    font-size  : 50px;
    color      : white;
}

.schedule-tab-btn a .date_con .year {
    line-height: 26px;
    display    : inline-block;
    text-align : center;
    font-size  : 23px;
    font-weight: 700;
    color      : white;
}

.schedule-tab-btn a.active {
    background: #d15454;
}

.schedule-tab-btn a.active .day {
    color        : #ffffff;
    /* background: #ffffff45; */
}

.main_topic {
    font-size    : 36px;
    font-weight  : 600;
    margin-bottom: 0;
    color        : #F5F5DC;
}

.total_time {
    font-size    : 22px;
    margin-bottom: 0;
}

.total_time i {
    font-size   : 17px;
    margin-right: 6px;
}

.sub_topic {
    margin     : 0;
    font-size  : 24px;
    font-weight: 600;
    line-height: 27px;
}

.sub_time {
    margin-bottom: 15px;
    font-size    : 18px;
}

.sub_time i {
    font-size   : 14px;
    margin-right: 6px;
}

.spe_box {
    margin-top   : 15px;
    margin-bottom: 0;
}

.spe_head {
    font-size: 16px;
    display  : inline-block;
    color    : #ffedcb;
}

.spe-name {
    display    : flex;
    align-items: center;
    font-size  : 22px;
    font-weight: 600;
    margin-top : 15px;
    cursor     : pointer;
}

.spe-name:hover {
    text-shadow: 2px 2px 18px #000000;
}

.spe-name img {
    width        : 40px;
    height       : 40px;
    margin-right : 12px;
    border-radius: 50px;
}

.schedule_card ul {
    margin-top        : 30px;
    display           : flex;
    gap               : 30px;
    flex-wrap         : wrap;
    /* justify-content: space-between; */
}

.schedule_card ul li {
    background   : #4f122a;
    padding      : 25px;
    border-radius: 15px;
    width        : 23%;
}

.hall-btn {
    justify-content: start;
    overflow       : auto;
}

.hall-btn a {
    min-width: fit-content;
}

.search-box {
    width        : 100%;
    margin-bottom: 30px;
    margin-top   : 30px;
}

.schedule_card {
    background   : linear-gradient(to top left, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.25));
    border-color : rgba(0, 0, 0, 0.125);
    color        : #fff;
    padding      : 40px;
    border-radius: 15px;
    margin-bottom: 30px;
    position     : relative;
}

.break {
    text-align     : center;
    font-size      : 19px;
    line-height    : 24px;
    margin-bottom  : 30px;
    overflow       : hidden;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.break span {
    position: relative;
    color   : white;
}

.break span::after,
.break span::before {
    content   : '';
    position  : absolute;
    width     : 20000px;
    background: #ffffff99;
    top       : 50%;
    transform : translate(0, -50%);
    height    : 2px;
}

.break span::after {
    left: calc(100% + 25px);
}

.break span::before {
    right: calc(100% + 25px);
}

.hall-btn {
    margin-bottom  : 30px;
    display        : flex;
    align-items    : center;
    justify-content: end;
    gap            : 6px;
}

.hall-btn a {
    background   : #0000004f !important;
    color        : white;
    font-size    : 17px;
    border-radius: 50px;
    padding      : 13px 30px;
    padding      : 11px 25px;
}

.hall-select {
    background   : #0000004f !important;
    color        : white;
    font-size    : 17px;
    border-radius: 50px;
    padding      : 11px 25px;
    border       : 0;
}

.hall-btn a.active,
.hall-btn a:hover {
    background: #00000078 !important;
}

.schedule_card_wrap {
    display: none;
}

.schedule_card_wrap.active {
    display: block;
}

.search-box {
    width        : 30%;
    background   : #7d282e;
    border-radius: 50px;
    display      : flex;
    align-items  : center;
    margin-bottom: -40px;
}

.search-box input {
    background: transparent;
    border    : 0;
    width     : calc(100% - 53px);
    height    : 53px;
}

.search-box a {
    width          : 53px;
    height         : 53px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : white !important;
    font-size      : 18px;
}

header {
    width     : 100%;
    background: #00000047;
}

.header_inner {
    display: flex;
}

.logo {
    width     : 190px;
    background: white;
    padding   : 20px;
}

.or_wrap {
    border-left : 1px solid white;
    padding-left: 15px;
    margin-left : 15px;
}

.or_wrap p {
    font-size    : 17px;
    color        : white;
    margin-bottom: 3px;
}

.or_wrap img {
    width: 108px;
}

.header_wrap {
    padding-top    : 15px;
    padding-bottom : 15px;
    display        : flex;
    align-items    : center;
    gap            : 25px;
    flex-direction : row-reverse;
    justify-content: space-between;
}

.con_inner {}


.con_inner h2 {
    font-size    : 48px;
    color        : white;
    font-weight  : 600;
    margin-bottom: 0;
}

.con_inner h4 {
    color        : #ffb8b8;
    margin-bottom: 0;
}

.con_inner h5 {
    margin   : 0;
    color    : white;
    font-size: 24px;
}

.spe_flex {
    display  : flex;
    gap      : 30px;
    flex-wrap: wrap;
}

.spe_flex .spe-name {
    min-width: fit-content;
}

.topic_detail {
    margin-bottom: 7px;
    font-size    : 20px;
    line-height  : 25px;
    font-weight  : 600;
}

.pop_up_wrap {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-image: linear-gradient(to bottom right, #c04848d1, #480048c9);
    backdrop-filter : blur(10px);
    display         : none;
    z-index         : 1;
}

.pop_up_inner {
    width          : 100%;
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.pop_up_box {
    width   : 700px;
    position: relative;
}

.pop_cls {
    position       : absolute;
    right          : -12px;
    top            : -12px;
    color          : white !important;
    font-size      : 12px;
    background     : #cc4c6f;
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 30px;
    height         : 30px;
    border-radius  : 50px;
}

.pop_head {
    padding                : 25px;
    border-top-left-radius : 15px;
    border-top-right-radius: 15px;
    display                : flex;
    align-items            : center;
    justify-content        : space-between;
    background             : rgb(88 26 43);
}

.pop_head h4 {
    margin     : 0;
    display    : flex;
    align-items: center;
    gap        : 9px;
    color      : white;
    font-weight: 600;
}

.pop_head h4 img {
    width        : 40px;
    height       : 40px;
    border-radius: 50px;
}

.pop_head .date_tab {
    display    : flex;
    align-items: center;
    gap        : 5px;
}

.pop_head .date_tab a {
    color           : white;
    font-size       : 18px;
    background-image: linear-gradient(to bottom, rgba(192, 72, 72, 0.8), rgba(192, 72, 72, 0.4));
    border-radius   : 50px;
    padding         : 4px 15px;
}

.pop_head .date_tab a.active,
.pop_head .date_tab a:hover {
    background-color: rgba(192, 72, 72, 0.5);
}

.pop_body {
    background-image          : linear-gradient(to bottom right, #c04848, #480048);
    padding                   : 25px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius : 15px;
}

.pop_body ul {
    display: none;
}

.pop_body ul.active {
    display: block;
}

.pop_body ul li {
    margin-bottom : 25px;
    padding-bottom: 25px;
    border-bottom : 1px solid #ffffff69;
}

.pop_body ul li:last-child {
    padding: 0;
    margin : 0;
    border : 0;
}

.pop_body ul li h3 {
    color         : white;
    text-transform: uppercase;
    font-weight   : 600;
    color         : #ffd6db;
}

.pop_body ul li h4 {
    color: white;
}

.pop_body ul li h5 {
    margin   : 0;
    font-size: 16px;
    color    : #ffffbf;
}

.pop_body ul li h5 i {
    font-size   : 12px;
    margin-right: 5px;
}

.schedule-tab-btn a.fac_btn {
    padding   : 18px;
    color     : white;
    font-size : larger;
    box-shadow: 5px 3px 13px #0a0808a1;
}

@media only screen and (min-width: 300px) and (max-width: 999px) {
    .schedule-tab-btn {
        padding       : 15px 0;
        position      : unset;
        flex-direction: row;
        gap           : 15px;
        width         : 100%;
        padding-top   : 0;
        flex-wrap     : wrap;
    }

    .schedule-tabContainer {
        padding    : 15px 0;
        border-left: 0;
        border-top : 1px solid rgba(77, 75, 75, 0.1);
        width      : 100%;
        height     : auto;
        perspective: 1px;
    }

    .tuto_schedule_box {
        display       : flex;
        align-items   : start;
        position      : relative;
        flex-direction: column;
        padding: 0 8px;
    }

    .header_wrap {
        flex-direction: column;
    }

    .schedule-tab-btn a .date_con .date {
        line-height: 34px;
        font-size  : 43px;
        margin     : 0 0px 0 0;
    }

    .schedule-tab-btn a .date_con .year {
        line-height: 18px;
        font-size  : 19px;
    }

    .schedule_card {
        padding      : 15px;
        margin-bottom: 15px;
    }

    .main_topic {
        font-size  : 28px;
        margin-top : 0;
        line-height: 28px;
    }

    .total_time {
        font-size : 17px;
        margin-top: 2px;
    }

    .total_time i {
        font-size   : 12px;
        margin-right: 5px;
    }

    .schedule_card ul {
        margin-top: 20px;
        gap       : 15px;
    }

    .schedule_card ul li {
        padding: 15px;
        width  : 100%;
    }

    .sub_topic {
        font-size  : 20px;
        line-height: 25px;
    }

    .sub_time {
        margin-bottom: 8px;
        font-size    : 16px;
        margin-top   : 8px;
    }

    .spe_box {
        margin-top: 8px;
    }

    .spe-name {
        font-size : 18px;
        margin-top: 5px;
    }

    .search-box {
        width        : 100%;
        margin-bottom: 10px;
        margin-top   : 0;
    }

    .hall-btn {
        margin-bottom: 15px;
    }

    .schedule-tab-btn a {
        width: 30%;
    }

    .schedule-tab-btn a.fac_btn {
        padding   : 10px;
        width     : 100%;
        text-align: center;
    }

    .schedule-tab-btn a .date_con {
        padding: 7px;
    }
    .or_wrap p {
        font-size: 15px;
        margin-bottom: 3px;
        margin-top: 0;
    }
    .or_wrap img {
        width: 61px;
    }
    .logo {
        width: 116px;
        padding: 8px;
        object-fit: contain;
    }
    .con_inner h2 {
        font-size: 40px;
        line-height: 39px;
    }
    .con_inner h4 {
        font-size: 16px;
        line-height: 22px;
    }
    .con_inner h5 {
        font-size: 20px;
        line-height: 25px;
    }
    header{
        margin:0px;
    }
    .con_inner {
        text-align: center;
    }
}
@media only screen and (min-width: 768px) and (max-width: 999px){
    .header_wrap {
        flex-direction: row-reverse;
    }
    .con_inner {
        text-align: left;
    }
    .schedule-tab-btn {
        position: sticky;
        flex-direction: column;
        width: 106px;
        padding-right: 15px;
        padding-bottom: 0;
    }
    .schedule-tab-btn a {
        width: 100%;
    }
    .tuto_schedule_box {
        flex-direction: row;
    }
    .schedule-tabContainer {
        padding: 0 15px;
        border-left: 1px solid rgba(77, 75, 75, 0.1);
        border-top: 0;
        width: calc(100% - 106px);
        height: 100%;
        padding-right: 0;
    }
    .search-box {
        width: 50%;
        margin-bottom: -40px;
    }
    .schedule_card ul li {
        width: 43%;
    }
}