

.hero-test {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/test-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}
.course-card{

display:flex;

flex-direction:column;

gap:20px;

padding:34px;

border-radius:22px;

background:#fff;

box-shadow:var(--shadow-sm);

transition:.35s;

text-decoration:none;

color:inherit;

height:100%;

}

.course-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.course-icon{

font-size:42px;

margin-bottom:10px;

}

.course-card h3{

text-align:center;

margin-bottom:10px;

}

.course-card ul{

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:10px;

color:var(--text-light);

}

.course-card span{

margin-top:auto;

font-weight:600;

color:var(--primary);

}

/* ==========================================
   IELTS vs TOEFL Comparison
========================================== */

.exam-table-wrapper{

    overflow-x:auto;
    margin-top:50px;

    border-radius:20px;

    box-shadow:var(--shadow-md);

}

.exam-table{

    width:100%;

    min-width:760px;

    border-collapse:collapse;

    background:#fff;

}

.exam-table thead{

    background:var(--primary);

    color:#fff;

}

.exam-table th{

    padding:22px;

    text-align:left;

    font-weight:600;

    font-size:1rem;
    background-color: rgb(50,0,100);

}

.exam-table td{

    padding:20px 22px;

    border-bottom:1px solid #ececec;

    line-height:1.7;

}

.exam-table tbody tr{

    transition:.25s;

}

.exam-table tbody tr:hover{

    background:#f8f9ff;

}

.exam-table td:first-child{

    font-weight:600;

    color:var(--primary);

    width:200px;

}

.comparison-note{

    margin-top:45px;

    padding:35px;

    background:#fff;

    border-left:5px solid var(--primary);

    border-radius:18px;

    text-align:center;

    box-shadow:var(--shadow-sm);

}

.comparison-note p{

    margin-bottom:22px;

    max-width:700px;

    margin-inline:auto;

}

/* Mobile */

@media (max-width:768px){

.exam-table-wrapper{

    margin-top:35px;

}

.comparison-note{

    padding:28px;

}

}

/*====================================
IELTS OVERVIEW CARD
====================================*/

.ielts-overview-card{

background:#fff;

border-radius:24px;

padding:2rem;

box-shadow:0 20px 60px rgba(0,0,0,.08);

overflow:hidden;

}

.overview-header{

font-size:1.25rem;

font-weight:700;

margin-bottom:1.5rem;

color:var(--primary);

}

.overview-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:1rem 0;

border-bottom:1px solid rgba(0,0,0,.08);

}

.overview-item:last-child{

border-bottom:none;

}

.overview-item span{

font-weight:500;

}

.overview-item strong{

color:var(--primary);

font-weight:700;

}

/*=============================
IELTS TYPES
=============================*/

.ielts-type-card{

text-align:center;

padding:3rem;

}

.type-icon{

font-size:3rem;

margin-bottom:1rem;

}

.ielts-type-card h3{

margin-bottom:1rem;

}

.feature-list{

margin:2rem 0;

padding:0;

list-style:none;

}

.feature-list li{

padding:.7rem 0;

border-bottom:1px solid rgba(0,0,0,.08);

}

.feature-list li:last-child{

border-bottom:none;

}

.coming-soon{

display:inline-block;

margin-top:1rem;

padding:.6rem 1rem;

border-radius:50px;

background:#f3f3f3;

font-weight:600;

font-size:.9rem;

}

.exam-journey{

display:grid;

grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;

align-items:center;

gap:1rem;

margin-top:4rem;

}

.exam-stage{

background:#fff;

border-radius:22px;

padding:2rem;

box-shadow:0 18px 45px rgba(0,0,0,.07);

transition:.35s;

text-align:center;

}

.exam-stage:hover{

transform:translateY(-10px);

}

.stage-icon{

font-size:2.8rem;

margin-bottom:1rem;

}

.stage-time{

display:inline-block;

padding:.5rem 1rem;

border-radius:40px;

background:var(--primary-light);

color:var(--primary);

font-weight:700;

margin-bottom:1.5rem;

}

.exam-stage ul{

list-style:none;

padding:0;

margin:0;

}

.exam-stage li{

padding:.5rem 0;

}

.journey-arrow{

font-size:2rem;

font-weight:700;

color:var(--primary);

}

@media(max-width:992px){

.exam-journey{

grid-template-columns:1fr;

}

.journey-arrow{

transform:rotate(90deg);

margin:auto;

}

}

/*=====================================
IELTS BAND GUIDE
=====================================*/

.band-scale{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:1.5rem;

margin-top:4rem;

}

.band-card{

position:relative;

background:#fff;

padding:2rem;

border-radius:24px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.08);

transition:.35s;

overflow:hidden;

}

.band-card:hover{

transform:translateY(-10px);

}

.band-number{

width:70px;

height:70px;

margin:auto auto 1rem;

border-radius:50%;
color: rgb(50,0,100);

display:flex;

justify-content:center;

align-items:center;

font-size:2rem;

font-weight:700;

}

.band-card.highlight{

border:2px solid var(--color-primary);

}

.recommended{

position:absolute;

top:0;

left:0;

right:0;

padding:.6rem;

background:rgb(50,0,100);

color:#fff;

font-size:.85rem;

font-weight:600;

}

.band-card.highlight .band-number{

margin-top:2rem;

}
.black-highlight {
    color:black;
}
@media(max-width:992px){

.band-scale{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.band-scale{

grid-template-columns:1fr;

}

}
.band-note{

margin-top:3rem;

padding:2rem;

background:#fff;

border-left:5px solid var(--primary);

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.comparison-box{

padding:2.5rem;

border-radius:24px;

background:#fff;

box-shadow:0 15px 40px rgba(0,0,0,.08);

height:100%;

}

.comparison-box h3{

margin-bottom:2rem;

text-align:center;

}

.comparison-box ul{

list-style:none;

padding:0;

margin:0;

}

.comparison-box li{

padding:1rem 0;

border-bottom:1px solid rgba(0,0,0,.08);

}

.comparison-box li:last-child{

border-bottom:none;

}

.comparison-new{

border-top:5px solid var(--primary);

}

.comparison-old{

opacity:.82;

}


.featured{

background:linear-gradient(135deg,var(--primary),#7d5dfc);

color:white;

}

.featured h3,

.featured p{

color:white;

}

.featured::before{

display:none;

}

@media(max-width:1200px){

.included-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.included-grid{

grid-template-columns:1fr;

}

}

.ielts-table-wrapper{

overflow-x:auto;

margin-top:3rem;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.ielts-table{

width:100%;

border-collapse:collapse;

background:white;

min-width:700px;

}

.ielts-table th{

background:var(--color-primary);

color:white;

padding:1.2rem;

font-weight:600;

text-align:center;

}

.ielts-table td{

padding:1rem;

border-bottom:1px solid #eee;

text-align:center;

}

.ielts-table tr:hover{

background:#faf9ff;

}

.table-note{

margin-top:2rem;

padding:1.5rem;

background:#f7f7fb;

border-left:4px solid var(--color-primary);

border-radius:15px;

}

.journey-flow{

max-width:850px;

margin:auto;

}

.journey-step{

background:white;

padding:2rem;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:center;

}

.journey-step h3{

margin:1rem 0;

}

.journey-arrow{

font-size:2rem;

text-align:center;

margin:1rem 0;

color:var(--primary);

}

.journey-number{

width:65px;

height:65px;

border-radius:50%;

margin:auto;

background:var(--color-primary);

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

font-size:1.5rem;

color:white;

}

.highlight{

background:linear-gradient(135deg,var(--color-primary),#8168ff);

color:white;

}

.highlight h3,

.highlight p{

color:white;

}

.highlight .journey-number{

background:white;

color:var(--color-primary);

}

.testimonial-card{

background:white;

padding:2.5rem;

border-radius:24px;

box-shadow:0 18px 45px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.score-badge{

display:inline-block;

padding:.5rem 1rem;

background:var(--color-primary);

color:white;

border-radius:999px;

font-weight:600;

margin-bottom:1.5rem;

}

.testimonial-card p{

font-style:italic;

margin-bottom:2rem;

}

.testimonial-card h4{

color:var(--color-primary);

}

