/* CSS Document */

ul{margin-bottom: 0px; padding-left: 0px; list-style-type: none;}

.grades-sec-01{padding-top: 150px; background-image: url("grades.webp"); background-repeat: no-repeat; background-size: cover; position: relative;}
.grades-sec-01::before{content:""; position: absolute; inset:0;   /* background: linear-gradient(135deg, #00277f54 0%, #003ebf6e 100%);*/ background: linear-gradient(45deg, black, transparent); /*background: linear-gradient(135deg, #45516a4a 0%, #6c757d4d 100%);*/
 }
.grades-sec-01 .main-row .columns{padding-inline:0px; /* border:1px solid #fff;*/}
.grades-sec-01 .main-row .columns:nth-child(1){margin-inline:auto; text-align: center; margin-bottom:2rem; position: relative;}

.grades-sec-01 .main-row .columns:nth-child(2) h2{text-align: center; /*font-size: clamp(3.5rem, 7vw, 150px);*/ font-size: var(--rfs-82);}


.grades-sec-01 .main-row .columns:nth-child(2) table thead tr th{/*background-color: #00277f;*/   background: linear-gradient(135deg, #00277f4a 0%, #0000004d 100%); font-family: "Rajdhani", sans-serif; font-size: var(--rfs-18); width: 25%;}


.grades-sec-01 .main-row .columns:nth-child(2) table th{text-align: center; padding:1rem 1.5rem;}
.grades-sec-01 .main-row .columns:nth-child(2) table th,
.grades-sec-01 .main-row .columns:nth-child(2) table td{color:#fff; padding:1rem 1.5rem; font-family: "Barlow", sans-serif;}
.grades-sec-01 .main-row .columns:nth-child(2) table td{}
.grades-sec-01 .main-row .columns:nth-child(2) table td.stack-col {display: flex; flex-direction: column; align-items: center;  gap:0.5rem;}


.grades-tabs-wrap{
/*    border:1px solid rgba(255,255,255,.15);*/
	width: 85%;
    margin-inline: auto;
    overflow:hidden;
}

.grades-tabs-wrap .main-row{gap:0; justify-content: center;}

.grades-tabs{
/*    height:100%;*/
/*    background:#07152e;*/
}

/*
.grades-tabs .nav-link{
	 background:#07152e;
    border-radius:0;
    color:#fff;
    text-align:left;
	font-family: "Rajdhani", sans-serif;
   padding: 1rem 1.2rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:clamp(1rem,1.2vw,1.25rem);
    font-weight:500;
    transition:.3s;
}
*/

.grades-tabs .nav-link:hover{
    background:rgba(255,255,255,.05);
}

.grades-tabs .nav-link.active{
    background:#00277f;
    color:#fff;
}

.tab-content{ /*  height:100%;*/}

.tab-pane{ padding:0;}

.tab-pane table{
    margin-bottom:0;
	border-color: #dee2e61a;
}

.tab-pane table th{
    background:#00277f;
    color:#fff;
    padding:1rem 1.5rem;
}

.tab-pane table td{
    color:#fff;
    padding:1rem 1.5rem;
}

.tab-pane tbody td{
	text-align: center;
}

.stack-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.25rem;
}

/* ========================================
   PREMIUM GRADES TABS
======================================== */

.grades-tabs-wrap{
    width:85%;
    margin-inline:auto;
}

.grades-tabs{
    gap:12px;
}



.grades-tabs .nav-link{
    position:relative;
	    text-align:left;
	font-family: "Rajdhani", sans-serif;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:6px;
    color:rgba(255,255,255,.75);
    padding:0.9rem 1.5rem;
    font-size:1.15rem;
	font-size:clamp(1rem,1.2vw,1.25rem);
    font-weight:600;
    overflow:hidden;
    transition:all .35s ease;
    backdrop-filter:blur(10px);
}

.grades-tabs .nav-link:hover{
    color:#fff;
    transform:translateX(8px);
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.15);
}

.grades-tabs .nav-link::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:#4f7dff;
    transform:scaleY(0);
    transform-origin:center;
    transition:.35s ease;
}

.grades-tabs .nav-link.active{
/*
    background:linear-gradient(
        135deg,
        #00277f 0%,
        #003ebf 100%
    );
*/
	    background: linear-gradient(135deg, #00277f4a 0%, #003ebfc7 100%);
    color:#fff;
    border-color:rgba(255,255,255,.15);
    box-shadow:
        0 10px 30px rgba(0,39,127,.35);
}

.grades-tabs .nav-link.active::before{
    transform:scaleY(1);
}


/* ========================================
   CONTENT PANEL
======================================== */

.grades-content{
    position:relative;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );
    border:1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    overflow:hidden;
    backdrop-filter:blur(16px);
    box-shadow:
        0 20px 60px rgba(0,0,0,.25);
}

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

.grades-content table{
    margin-bottom:0;
    border-color:rgba(255,255,255,.08);
}

.grades-content table thead th{
    background:linear-gradient(
        135deg,
        #00277f,
        #0048df
    );
    border:none;
    padding:1.25rem;
    font-family:"Rajdhani",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.grades-content table td{
    border-color:rgba(255,255,255,.08);
    padding:1rem 1.25rem;
    transition:.3s ease;
}

.grades-content tbody tr{
    transition:.35s ease;
}

.grades-content tbody tr:hover{
    background:rgba(255,255,255,.04);
}

.grades-content tbody tr:hover td{
    color:#fff;
}

.stack-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.35rem;
}

/* ========================================
   TAB ANIMATION
======================================== */

.tab-pane{
    opacity:0;
    transform:translateY(20px);
}

.tab-pane.show.active{
    animation:premiumFade .55s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes premiumFade{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:1440px){
      .grades-sec-01 .card-header:first-child { font-size: clamp(1.35rem, 3vw, 42px); line-height: 1.2;}
}
@media(max-width:1366px){}
@media(max-width:1280px){}

@media(max-width:1024px){

}
@media(max-width:991px){
	
	.grades-sec-01 .main-row .columns:nth-child(2) .container-fluid{padding-bottom: 0px;  padding-top: 20px;}
	.grades-sec-01 .card-header:first-child{font-size: 30px;}
	
	
	    .grades-tabs{
        flex-direction:row !important;
        overflow-x:auto;
        white-space:nowrap;
    }

    .grades-tabs .nav-link{
        min-width:max-content;
        border-right:1px solid rgba(255,255,255,.08);
        border-bottom:none;
		flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 768px) {
 
}


@media(max-width:576px){
	.grades-sec-01 .main-row .columns:nth-child(2) .container-fluid{padding-inline:0px;}
	.grades-sec-01 .card-header:first-child{line-height: 1.5;}
}

@media(max-width:480px){
	.grades-sec-01 .main-row .columns:nth-child(1) h1{font-size: 1.5rem; line-height: 1.4;}
	.grades-sec-01 .main-row .columns:nth-child(2) h2{font-size: clamp(2rem, 4.5vw, 64px);}
	.rfs-p { padding-inline: 1.5rem; }
    .grades-sec-01 .card-header:first-child { font-size: 24px; }
		.grades-sec-01 .main-row .columns:nth-child(1) p br{display: none;}
	.grades-tabs .nav-link {padding:1.1rem;}
	.grades-tabs-wrap { width: 100%;}
	.grades-tabs {margin-bottom: 1rem;}

}

@media(max-width:360px){
	.grades-sec-01 { padding-top: 120px;}
}

@media(max-width:320px){

}