/* =========================================================
   SVIT - AUTONOMOUS SCHEME & SYLLABUS
   COMPLETE CSS

   Main Theme:
   Orange - #F28C28
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.autonomous-scheme-section {
    width: 100%;
    padding: 35px 0 70px;
    background: #ffffff;
    font-family: "Poppins", "Inter", Arial, sans-serif;
}


.autonomous-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================================
   PAGE TITLE
========================================================= */

.autonomous-page-title {
    margin-bottom: 22px;
}


.autonomous-page-title h1 {
    margin: 0;
    color: #202020;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.5px;
}


/* =========================================================
   TOP DOCUMENT CARDS
========================================================= */

.autonomous-document-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 27px;

    margin-bottom: 32px;
}


.autonomous-document-card {
    position: relative;

    min-height: 96px;

    display: flex;

    align-items: center;

    padding:
        18px
        60px
        18px
        30px;

    background: #ffffff;

    border:
        1px solid #e4e4e4;

    border-left:
        5px solid #F28C28;

    border-radius:
        15px;

    color: #17202a;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(30, 50, 70, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.autonomous-document-card:hover {
    color: #17202a;

    transform:
        translateY(-3px);

    box-shadow:
        0 13px 32px rgba(30, 50, 70, 0.12);
}


.autonomous-document-card span {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
}


.autonomous-document-card i {
    position: absolute;

    right: 25px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #3f4f5d;

    font-size: 18px;

    transition:
        color 0.2s ease;
}


.autonomous-document-card:hover i {
    color: #F28C28;
}


/* =========================================================
   BATCH TABS
========================================================= */

.batch-tabs-wrapper {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 45px;
}


.batch-tabs {
    display: flex;

    align-items: stretch;

    justify-content: center;

    white-space: nowrap;
}


/* =========================================================
   BATCH TAB BUTTON
========================================================= */

.batch-tab {
    height: 40px;

    min-width: 108px;

    padding:
        0 17px;

    border:
        1px solid #bfcbd5;

    background:
        #ffffff;

    color:
        #66819a;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        all 0.25s ease;
}


.batch-tab + .batch-tab {
    border-left: none;
}


.batch-tab:first-child {
    border-radius:
        22px 0 0 22px;
}


.batch-tab:last-child {
    border-radius:
        0 22px 22px 0;
}


.batch-tab:hover {
    background:
        #fff7ef;

    color:
        #F28C28;
}


.batch-tab.active {
    background:
        #F28C28;

    border-color:
        #F28C28;

    color:
        #ffffff;
}


/* =========================================================
   BATCH CONTENT
========================================================= */

.batch-content {
    display: none;
}


.batch-content.active {
    display: block;

    animation:
        batchFade 0.3s ease;
}


@keyframes batchFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   BATCH HEADING
========================================================= */

.batch-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 32px;

    padding-left: 14px;
}


.batch-title span {
    display: block;

    width: 14px;
    height: 3px;

    background:
        #F28C28;
}


.batch-title h2 {
    margin: 0;

    color: #303030;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 5px;
}


/* =========================================================
   ACADEMIC CARDS
========================================================= */

.academic-cards-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 16px;

    align-items: stretch;
}


/* =========================================================
   INDIVIDUAL ACADEMIC CARD
========================================================= */

.academic-card {
    position: relative;

    min-height: 96px;

    display: flex;

    align-items: center;

    padding:
        18px
        50px
        18px
        30px;

    background:
        #ffffff;

    border:
        1px solid #e4e4e4;

    border-left:
        5px solid #F28C28;

    border-radius:
        15px;

    text-decoration:
        none;

    box-shadow:
        0 8px 25px rgba(30, 50, 70, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.academic-card:hover {
    transform:
        translateY(-3px);

    border-left-color:
        #F28C28;

    box-shadow:
        0 13px 32px rgba(30, 50, 70, 0.13);
}


/* =========================================================
   ACADEMIC CARD CONTENT
========================================================= */

.academic-card-content {
    width: 100%;
}


.academic-card-content h3 {
    margin: 0;

    color:
        #17202a;

    font-size:
        14px;

    line-height:
        1.45;

    font-weight:
        600;

    text-align:
        left;
}


/* =========================================================
   EXTERNAL LINK ICON
========================================================= */

.academic-card-icon {
    position: absolute;

    right: 19px;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;
}


.academic-card-icon i {
    color:
        #3f4f5d;

    font-size:
        17px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.academic-card:hover .academic-card-icon i {
    color:
        #F28C28;

    transform:
        scale(1.08);
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (max-width: 1200px) {

    .autonomous-container {
        max-width: 1050px;
    }

    .academic-cards-row {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .autonomous-document-grid {
        grid-template-columns:
            1fr;
    }


    .academic-cards-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .batch-tabs-wrapper {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        padding-bottom:
            5px;
    }


    .batch-tabs {
        flex-shrink:
            0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .autonomous-scheme-section {
        padding:
            25px
            0
            50px;
    }


    .autonomous-container {
        padding:
            0 15px;
    }


    .autonomous-page-title h1 {
        font-size:
            23px;
    }


    .autonomous-document-card {
        min-height:
            88px;

        padding:
            16px
            50px
            16px
            25px;
    }


    .autonomous-document-card span {
        font-size:
            14px;
    }


    /* =====================================================
       BATCH TABS
    ====================================================== */

    .batch-tabs-wrapper {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .batch-tabs-wrapper::-webkit-scrollbar {
        display:
            none;
    }


    .batch-tabs {
        flex-shrink:
            0;
    }


    .batch-tab {
        min-width:
            105px;

        height:
            40px;

        padding:
            0 14px;
    }


    /* =====================================================
       BATCH TITLE
    ====================================================== */

    .batch-title {
        margin-bottom:
            28px;

        padding-left:
            5px;
    }


    .batch-title h2 {
        font-size:
            11px;

        letter-spacing:
            4px;
    }


    /* =====================================================
       ACADEMIC CARDS
       Horizontal scrolling on mobile
    ====================================================== */

    .academic-cards-row {

        display:
            flex;

        flex-wrap:
            nowrap;

        gap:
            14px;

        overflow-x:
            auto;

        padding:
            5px
            5px
            18px;

        scrollbar-width:
            thin;

    }


    .academic-cards-row::-webkit-scrollbar {
        height:
            5px;
    }


    .academic-cards-row::-webkit-scrollbar-track {
        background:
            #eeeeee;

        border-radius:
            10px;
    }


    .academic-cards-row::-webkit-scrollbar-thumb {
        background:
            #F28C28;

        border-radius:
            10px;
    }


    .academic-card {

        flex:
            0 0 280px;

        min-width:
            280px;

        min-height:
            92px;

    }


    .academic-card-content h3 {
        font-size:
            14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .autonomous-page-title h1 {
        font-size:
            21px;
    }


    .academic-card {

        flex:
            0 0 260px;

        min-width:
            260px;

    }