/* ==============================
REGISTRATION SECTION
============================== */

.registration-section{
    padding:40px 0;
    background:#f8f8fb;
}


/* TITLE */

.registration-title{
    text-align:center;
    margin-bottom:50px;
}

.registration-title span{
    color:#f8770e;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.registration-title h2{
    font-size:45px;
    color:#22356c;
    font-weight:800;
    margin:15px 0;
}

.registration-title p{
    max-width:700px;
    margin:auto;
    color:#666;
    font-size:17px;
}



/* TABLE WRAPPER */

.registration-table-box{
    max-width:1100px;
    margin:auto;
}



/* ROW */

.registration-row{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    align-items:center;

    min-height:85px;

    margin-bottom:12px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 8px 25px rgba(0,0,0,.06);

    transition:.4s;

}


.registration-row:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 35px rgba(31,86,168,.15);

}



/* =====================
TABLE HEADER
===================== */


.table-header{

    background:#22356c;

    color:white;

    border-radius:22px;

}


.table-header div{

    padding:22px;

    text-align:center;

    font-size:17px;

    font-weight:700;

}

.table-header div,
.table-header .category,
.table-header .top{

    color:#ffffff !important;

}


.table-header small{

    color:#ffffff !important;
    opacity:.9;

}


/* IMPORTANT FIX */

.table-header .category{

    color:white;

    justify-content:center;

}


.table-header small{

    display:block;

    font-size:12px;

    font-weight:400;

    opacity:.9;

}



/* =====================
CATEGORY
===================== */


.category{

    display:flex;

    align-items:center;

    gap:18px;

    padding:15px 25px;

}

.top{
    color: #fff;
}


.category p{

    margin:0;

    color:#22356c;

    font-size:17px;

    font-weight:700;

    line-height:1.3;

}


.category small{

    display:block;

    color:#666;

    font-size:13px;

    margin-top:4px;

}



/* =====================
ICON
===================== */


.fee-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:50%;


    border:2px solid #22356c;


    display:flex;

    justify-content:center;

    align-items:center;


    color:#22356c;

    font-size:22px;


    background:white;

}



.fee-icon.orange{

    background:#f8770e;

    border-color:#f8770e;

    color:white;

}



/* PRICE */


.registration-row > div:not(.category){

    text-align:center;

    font-size:18px;

    font-weight:700;

    color:#22356c;

    border-left:2px solid #f8770e;

}



/* Alternate */

.registration-row:nth-child(even){

    background:
    linear-gradient(
        90deg,
        #ffffff,
        #fff8f2
    );

}



/* =====================
SCROLL ANIMATION
===================== */


.registration-row{

    opacity:0;

    transform:translateY(40px);

    animation:tableShow .7s forwards;

}


.registration-row:nth-child(1){animation-delay:.1s}
.registration-row:nth-child(2){animation-delay:.2s}
.registration-row:nth-child(3){animation-delay:.3s}
.registration-row:nth-child(4){animation-delay:.4s}
.registration-row:nth-child(5){animation-delay:.5s}
.registration-row:nth-child(6){animation-delay:.6s}
.registration-row:nth-child(7){animation-delay:.7s}
.registration-row:nth-child(8){animation-delay:.8s}



@keyframes tableShow{

to{

opacity:1;

transform:translateY(0);

}

}



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


@media(max-width:991px){


.registration-title h2{

font-size:35px;

}


.registration-row{

grid-template-columns:1.7fr 1fr 1fr 1fr;

}


.category{

padding:12px;

}


.category p{

font-size:15px;

}


}



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


@media(max-width:700px){


.registration-section{

padding:60px 15px;

}



.registration-title h2{

font-size:30px;

}



.table-header{

display:none;

}



.registration-row{

display:block;

padding:22px;

}



.registration-row > div:not(.category){

border:none;

text-align:left;

padding:10px 0;

margin-left:70px;

font-size:17px;

}


.registration-row > div:not(.category)::before{

content:"Fee : ";

color:#f8770e;

font-weight:700;

}



.category{

padding:0;

}



.fee-icon{

width:55px;

height:55px;

font-size:23px;

}


}