.btn{
      padding:12px 22px;
      border:none;
      border-radius:12px;
      background:#0f6956;
      color:#fff;
      font-weight:600;
      cursor:pointer;
      font-size:14px;
    }

    /* HERO */

    .hero{
      margin-top:42px;
      background:#0f6d59;
      border-radius:28px;
      min-height:420px;
      padding:60px 48px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:relative;
      overflow:hidden;
    }

    .hero::before{
      content:"";
      position:absolute;
      width:430px;
      height:430px;
      border:38px solid rgba(255,255,255,0.05);
      border-radius:50%;
      right:-130px;
      top:-60px;
    }

    .hero::after{
      content:"";
      position:absolute;
      width:250px;
      height:250px;
      border:28px solid rgba(255,255,255,0.04);
      border-radius:50%;
      right:120px;
      bottom:-90px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(255,255,255,0.12);
      color:#fff;
      padding:10px 18px;
      border-radius:30px;
      font-size:13px;
      font-weight:600;
      letter-spacing:1px;
      margin-bottom:28px;
    }

    .hero h1{
      font-size:72px;
      line-height:1.05;
      color:#fff;
      font-weight:800;
      max-width:600px;
    }

    .hero h1 span{
      color:#f2c641;
    }

    .hero p{
      margin-top:24px;
      color:#d5ece5;
      font-size:18px;
      line-height:1.8;
      max-width:560px;
    }

    .hero-stats{
      display:flex;
      gap:18px;
      margin-top:42px;
    }

    .stat-box{
      width:24%;
      background:rgba(255,255,255,0.1);
      border:1px solid rgba(255,255,255,0.2);
      border-radius:16px;
      padding:16px;
      color:#fff;
    }

    .stat-box h3{
      font-size: 20px;
    margin-bottom: 0px;
    color: #fff;
    font-weight: 300;
    }

    .stat-box p{
      margin:0;
      font-size:14px;
      color:#cde3dc;
      line-height:1.4;
    }

    /* RIGHT CARD */

    .quest-card{
      width:100%;
      background:rgba(255,255,255,0.1);
      border-radius:15px;
      padding:34px;
      position:relative;
      z-index:5;
    }

    .quest-card small{
      color:#000;
      letter-spacing:1px;
      font-weight:600;
    }

    .quest-card h2{
      margin-top:5px;
      font-size:26px;
      color:#000;
      line-height:1.4;
    }

    .primary-btn{
      width: 100%;
    height: 60px;
    border: none;
    border-radius: 14px;
    background: #5b0a71;
    color: #fff;
    font-size: 18px;
    margin-top: 28px;
    cursor: pointer;
    }
    .primary-btn:hover {
        background: #fff;
        color: #5c0b76;
    }
    .outline-btn{
      width:100%;
      height:60px;
      border-radius:14px;
      border:2px solid #5c0b76;
      background:#fff;
      color:#5c0b76;
      font-size:18px;
      margin-top:16px;
      cursor:pointer;
    }
    .outline-btn:hover {
        background: #5c0b76;
        color: #fff;
    }

.banner_content{margin-top: 20px;}
.stats-strip{
    background:#661b97;
    padding:30px 0;
}

.stats-strip-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.strip-item{
    text-align:center;
    border-right:1px solid rgba(255,255,255,.15);
}

.strip-item:last-child{
    border-right:none;
}

.strip-item h2{
    color: #fff;
    font-size: 42px;
    margin-bottom: 6px;
}

.strip-item span{
    color:#fff;
}

@media(max-width:992px){

    .hero-wrapper{
        grid-template-columns:1fr;
    }

    .hero-title{
        font-size:52px;
    }

    .stats-strip-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }
}
.framework-section{
    padding:15px 0 15px;
}

.framework-card{
    background:#ffffff;

    border:1px solid #ddd5ea;
    border-radius:24px;

    padding:25px 30px;
}

.framework-title{
    font-size:30px;
    font-weight:800;
    color:#5f249f;

    margin-bottom:8px;
}

.framework-subtitle{
    color:#9588af;
    font-size:18px;
    font-style:italic;

    margin-bottom:15px;
}

.framework-description{
    color:#4f4768;
    line-height:20px;
    font-size: 14px;
    margin-bottom:10px;
}

.framework-highlight{
    padding:15px 20px;
    font-size: 14px;
    background:#f3eef9;

    border-left:5px solid #6a1b9a;
    border-radius:0 12px 12px 0;

    color:#5a4d75;
    line-height:1.8;

    margin-bottom:20px;
}

.pillar-heading{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:24px;
}

.pillar-heading span{
    color:#5f249f;
    font-size:22px;
    font-weight:700;
    white-space:nowrap;
}

.pillar-heading::after{
    content:'';
    flex:1;
    height:1px;
    background:#d8cee8;
}

.pillar-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.pillar-card{
    background:#f7f4fb;

    border:1px solid #d9d0e8;
    border-radius:18px;

    padding:28px 18px;

    text-align:center;

    transition:.3s ease;
}

.pillar-card:hover{
    transform:translateY(-4px);
}

.pillar-icon{
    font-size:42px;
    margin-bottom:18px;
}

.pillar-card h4{
    color:#221c3b;

    font-size:18px;
    font-weight:700;

    margin-bottom:10px;
}

.pillar-card p{
    color:#8f84a7;
    font-size:14px;
    line-height:1.6;
}

@media(max-width:1200px){

    .pillar-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

    .framework-card{
        padding:25px;
    }

    .framework-title{
        font-size:34px;
    }

    .framework-description{
        font-size:16px;
    }

    .pillar-grid{
        grid-template-columns:1fr;
    }
}
.rankings-section{
    padding:0 0 60px;
}

.rankings-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
}

.community-card,
.filter-card,
.top-ranked-card{
    background:#fff;
    border:1px solid #ddd5ea;
    border-radius:24px;
}

.community-header{
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.section-label{
    display:block;
    color:#6a1b9a;
    font-size:12px;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:0px;
}

.community-header h2{
    font-size:30px;
    color:#1f1733;
}

.live-badge{
    background:#efe6fa;
    color:#6a1b9a;
    padding:10px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
}

.ranking-table{
    width:100%;
    border-collapse:collapse;
}

.ranking-table th{
    background:#f6f2fb;
    color:#8f84a7;
    font-size:13px;
    text-align:left;
    padding:18px;
}

.ranking-table td{
    padding:10px 18px;
    border-top:1px solid #ece5f6;
}

.school-info{
    display:flex;
    gap:14px;
    padding-top: 20px !important;
    align-items:center;
}
.school-info a{text-decoration: none; color: #6a1b9a}
.school-logo{
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
}

.dps{background:#f3ead7;color:#cc8c18;}
.ga{background:#efe4ff;color:#6a1b9a;}
.ryn{background:#e3f7ee;color:#157c5d;}
.dav{background:#e5f0ff;color:#2265d0;}
.kv{background:#fff0de;color:#e36b00;}

.school-info h4{
    color:#5a2198;
    margin-bottom:5px;
}

.school-info small{
    color:#8e84a8;
}

.top-rated,
.new-tag{
    font-size:11px;
    padding:3px 8px;
    border-radius:30px;
    margin-left:8px;
}

.top-rated{
    background:#ffe9a7;
}

.new-tag{
    background:#dff6df;
}

.review-meter{
    width:80px;
    height:6px;
    background:#e8dff5;
    border-radius:50px;
    display:inline-block;
    margin-right:8px;
}

.review-meter div{
    height:100%;
    background:#7a2db8;
    border-radius:50px;
}

.green div{background:#157c5d;}
.blue div{background:#2265d0;}
.orange div{background:#e36b00;}

.view-btn{
    border:none;
    background:#f3eef9;
    color:#6a1b9a;
    padding:10px 16px;
    border-radius:12px;
    font-weight:600;
    cursor: pointer;
}

.share-review-banner{
    margin:20px;
    background:url(../img/register-top-bg.png) bottom center no-repeat;
    color:#fff;
    border-radius:20px;
    padding:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.share-btn{
    background:#fff;
    color:#6a1b9a;
    border:none;
    padding:14px 22px;
    border-radius:14px;
    font-weight:700;
    width: 200px;
}

.filter-card{
    padding:22px;
}

.sidebar-title{
    font-size:24px;
    font-weight:700;
    color:#fff;
    background:#51127d;
    margin:-22px -22px 20px;
    padding:20px;
    border-radius:24px 24px 0 0;
}

.filter-card label{
    display:block;
    margin:18px 0 10px;
    color:#8d84a7;
    font-size:13px;
    font-weight:700;
}

.filter-tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.filter-tags button{
    padding:10px 16px;
    border-radius:50px;
    border:1px solid #ddd;
    background:#f5f2fb;
}

.filter-tags .active{
    background:#6a1b9a;
    color:#fff;
}

.filter-card select{
    width:100%;
    height:52px;
    border:1px solid #ddd;
    border-radius:12px;
    padding:0 12px;
}

.apply-filter-btn{
    width:100%;
    height:56px;
    margin-top:20px;
    border:none;
    background:#6a1b9a;
    color:#fff;
    border-radius:14px;
    font-weight:700;
}

.top-ranked-card{
    overflow:hidden;
}

.top-ranked-header{
    background:#51127d;
    color:#fff;
    padding:20px;
    font-weight:700;
}

.top-school-item{
    padding:10px 20px;
    display:grid;
    grid-template-columns:25px 1fr auto;
    gap:12px;
    border-top:1px solid #ece5f6;
}

.top-school-item b{
    color:#6a1b9a;
}

@media(max-width:992px){

    .rankings-layout{
        grid-template-columns:1fr;
    }

    .share-review-banner{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }
}
.methodology-card{
    margin-top:22px;

    background:#51127d;
    color:#fff;

    border-radius:24px;
    overflow:hidden;
}

.methodology-header{
    padding:20px 22px;

    font-size:16px;
    font-weight:700;
}

.methodology-list{
    padding:0 22px 20px;
}

.methodology-item{
    display:flex;
    gap:14px;

    padding:16px 0;

    border-bottom:1px solid rgba(255,255,255,.12);
}

.methodology-item:last-child{
    border-bottom:none;
}

.methodology-icon{
    font-size:26px;
    width:28px;
    flex-shrink:0;
}

.methodology-item h4{
    color:#fff;
    font-size:14px;
    font-weight:700;
    margin-bottom:4px;
}

.methodology-item p{
    color:#d8c6eb;
    font-size:13px;
    margin-bottom: 0px;
    line-height:1.5;
}

.header_area{position: relative; border: none;}
.card{
    background:#fff;
    border-radius:14px;
    padding:0px 25px;
    margin-bottom:25px;
    border:none;
}
.stars{color:#f5b301;}
.review{border-bottom:1px solid #eee;padding:15px 0;}
.review:last-child{border-bottom:none;}
.rank-list li{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #eee;
}
.rank{color:#5f2c82;font-weight:700;}

.comment-input{
    width:100%;
    padding:8px;
    margin-top:8px;
    border-radius:8px;
    border:1px solid #ddd;
}
.eva-list{float: left; width: 100%; margin: 0px; padding: 0px; height: auto; display: block;}
.eva-list li{float: left; width: 19%; list-style: none; padding: 20px 25px; font-size: 16px; text-align: center; background: #f2f2f2; margin-right: 1%; border-radius:15px;}
.eva-list li:hover{box-shadow: 0px 0px 10px #ddd;}
.eva-img{width: auto; height: auto; max-width: 100%; display: block; border-radius: 100%; margin: 0 auto 20px;}
@media screen and (max-width: 767px){
.eva-list{float: left; width: 100%; margin: 0px; padding: 0px; height: auto; display: block;}
.eva-list li{float: left; width: 100%; list-style: none; padding: 20px 25px; font-size: 16px; text-align: center; background: #f2f2f2; margin-right: 0%; border-radius:15px; margin-bottom: 10px;}
.eva-list li:hover{box-shadow: 0px 0px 10px #ddd;}
.eva-img{width: auto; height: auto; max-width: 100%; display: block; border-radius: 100%; margin: 0 auto 20px;}
}
@media screen and (min-width: 1301px) and (max-width: 1440px){
    .stat-box {
        width: 24%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 8px 8px;
        color: #fff;
    }
}
@media screen and (min-width: 1201px) and (max-width: 1300px){
    .stat-box {
        width: 24%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 8px 8px;
        color: #fff;
    }
    h1{font-size: 30px !important;}
    p{font-size: 14px; line-height: 20px;}
    h2{font-size: 24px !important;}
    .share-btn{border-radius: 10px !important; padding: 10px 22px !important;width: 250px}
    .pillar-card p {
        color: #8f84a7;
        font-size: 14px;
        line-height: 20px;
    }
    .top-school-item {
        padding: 10px 20px;
        display: grid;
        grid-template-columns: 25px 1fr auto;
        gap: 12px;
        border-top: 1px solid #ece5f6;
        font-size: 13px;
        line-height: 18px;
    }
    .community-header h2{
        color: #5f249f;
        font-weight: 700;
        white-space: nowrap;
    }
    .ranking-table th{padding: 10px 18px;}
    .view-btn {
        border: none;
        background: #f3eef9;
        color: #6a1b9a;
        padding: 5px 16px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
    }
    .methodology-header {
        padding: 20px 22px;
        font-size: 16px;
        font-weight: 700;
    }
}


@media screen and (min-width: 1000px) and (max-width: 1025px){
    .offset-2{margin-left:0px; max-width: 50% !important;flex:0 0 50% !important}
    .share-btn{border-radius: 10px !important; padding: 10px 22px !important;width: 250px}
    .share-review-banner{align-items: flex-start;flex-flow: column;}
}
@media screen and (min-width: 768px) and (max-width: 999px){
    .search-box{max-width: 100% !important; width: 100% !important;}
}
@media screen and (min-width: 100px) and (max-width: 767px){
    .hero-stats{flex-wrap: wrap;}
    .stat-box{width: 46%;}
    .community-header{display: block;}
}