/* Modal */

.vision-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
}

.vision-modal .modal-header{
    background:linear-gradient(135deg,#0d6efd,#4f8cff);
    padding:20px 30px;
}

.vision-modal h3{
    color:#fff;
    margin:0;
    font-weight:700;
}

.vision-modal .btn-close{
    filter:invert(1);
}

/* Cards */

.vm-card{
    background:#fff;
    border-radius:22px;
    padding:30px;
    height:100%;
    text-align:center;
    border:1px solid #edf2ff;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.35s;
}

.vm-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(13,110,253,.15);
}

/* Icon */

.vm-icon{
    width:85px;
    height:85px;
    border-radius:50%;
    margin:auto auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.vision-bg{
    background:linear-gradient(135deg,#0d6efd,#63a4ff);
}

.mission-bg{
    background:linear-gradient(135deg,#198754,#4fd18b);
}

.vm-card h4{
    font-weight:700;
    margin-bottom:15px;
    color:#222;
}

.vm-card p{
    color:#666;
    line-height:1.8;
    text-align:justify;
}

/* Mission List */

.vm-list{
    list-style:none;
    padding:0;
    margin:0;
    text-align:left;
}

.vm-list li{
    margin-bottom:12px;
    padding:12px 15px;
    border-radius:12px;
    background:#f8fbff;
    transition:.3s;
    position:relative;
    padding-left:45px;
}

.vm-list li::before{
    content:"✓";
    position:absolute;
    left:18px;
    color:#198754;
    font-weight:bold;
    font-size:18px;
}

.vm-list li:hover{
    background:#eef5ff;
    transform:translateX(5px);
}
/*professional-staff*/
/*==============================
        PREMIUM STAFF MODAL
==============================*/

.staff-modal{
    border:none;
    border-radius:30px;
    overflow:hidden;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(20px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        0 10px 30px rgba(13,110,253,.08);
}

/* Header */

.staff-modal .modal-header{
    background:linear-gradient(135deg,#0d6efd,#4f8cff);
    padding:22px 30px;
    border:none;
}

.staff-modal h3{
    color:#fff;
    font-weight:700;
    letter-spacing:.5px;
}

.staff-modal .btn-close{
    filter:brightness(0) invert(1);
}

/*==============================
        PREMIUM CARD
==============================*/

.staff-box{

    position:relative;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:24px;

    text-align:center;

    border:1px solid rgba(255,255,255,.6);

    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

}

/* Animated border */

.staff-box::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(13,110,253,.7),
        rgba(255,255,255,.2),
        rgba(13,110,253,.7)
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

.staff-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px rgba(13,110,253,.20);

}

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

.staff-circle{

    width:82px;
    height:82px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#fff;

    margin-bottom:16px;

    box-shadow:
    0 0 30px rgba(13,110,253,.35);

}

.staff-box h2{

    font-size:23px;

    font-weight:700;

    margin-bottom:18px;

    color:#222;

}

/*==============================
        SCROLL BOX
==============================*/

.staff-scroll{

    position:relative;

    height:270px;

    overflow:hidden;

    border-radius:20px;

    background:rgba(245,249,255,.8);

    backdrop-filter:blur(12px);

}

/* Fade */

.staff-scroll::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:45px;

    z-index:10;

    background:linear-gradient(#f8fbff,transparent);

}

.staff-scroll::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:45px;

    z-index:10;

    background:linear-gradient(transparent,#f8fbff);

}

/*==============================
      INFINITE SCROLL
==============================*/

.scroll-content{

    animation:scrollUp 20s linear infinite;

}

.staff-scroll:hover .scroll-content{

    animation-play-state:paused;

}

@keyframes scrollUp{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-50%);

    }

}

/*==============================
        STAFF CARD
==============================*/

.staff-item{

    margin:10px 12px;

    padding:14px 18px;

    border-radius:18px;

    background:#fff;

    border-left:4px solid #0d6efd;

    box-shadow:
    0 8px 20px rgba(0,0,0,.05);

    transition:.35s;

}

.staff-item:hover{

    transform:translateX(6px) scale(1.02);

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

    box-shadow:
    0 15px 30px rgba(13,110,253,.15);

}

.staff-item h5{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#222;

}

.staff-item span{

    display:block;

    margin-top:4px;

    font-size:13px;

    color:#777;

}

/* Mobile */

@media(max-width:991px){

.staff-scroll{

    height:240px;

}

.staff-box{

    margin-bottom:20px;

}

}
/*----*/

/*==========================================================
        NAAC A++ / UNIVERSITY STYLE VISITOR MODAL
==========================================================*/

.visitor-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;
    background:#f5f7fb;
    box-shadow:
    0 25px 70px rgba(0,0,0,.15);
}


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

.visitor-modal .modal-header{

    background:linear-gradient(135deg,#0d47a1,#1565c0);

    padding:22px 35px;

    border:none;

}

.visitor-modal h3{

    color:#fff;

    font-size:30px;

    font-weight:700;

    letter-spacing:.4px;

}

.visitor-modal .btn-close{

    filter:brightness(0) invert(1);

}



/*==========================================================
        VISITOR ROW
==========================================================*/

.visitor-row{

    position:relative;

    display:flex;

    gap:35px;

    align-items:center;

    background:#fff;

    border-radius:22px;

    padding:30px;

    margin-bottom:30px;

    border:1px solid #e6ecf3;

    transition:.35s;

    box-shadow:
    0 8px 30px rgba(15,23,42,.06);

}


.visitor-row:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(13,110,253,.10);

}



/*==========================================================
        DATE
==========================================================*/

.visitor-date{

    position:absolute;

    top:22px;

    right:25px;

    background:#eef4ff;

    color:#0d47a1;

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

}


.visitor-date i{

    margin-right:6px;

}



/*==========================================================
        PHOTO
==========================================================*/


.visitor-photo{

    flex:0 0 230px;

}


.visitor-photo img{

    width:230px;

    height:230px;

    object-fit:cover;

    border-radius:18px;

    border:6px solid #fff;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

    transition:.4s;

}


.visitor-row:hover img{

    transform:scale(1.04);

}



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


.visitor-content{

    flex:1;

}



.visitor-content h2{

    font-size:30px;

    font-weight:700;

    color:#1b3555;

    margin-bottom:6px;

}



.visitor-content h5{

    color:#1565c0;

    font-size:20px;

    font-weight:600;

    margin-bottom:10px;

}



.organization{

    font-size:17px;

    color:#666;

    margin-bottom:18px;

}




/*==========================================================
        GUEST BADGE
==========================================================*/


.guest-badge{

    display:inline-block;

    margin-bottom:18px;

    background:linear-gradient(135deg,#d4af37,#f4c542);

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

}



.guest-badge i{

    margin-right:6px;

}



.guest-badge.silver{

    background:linear-gradient(135deg,#b8bec8,#d8dde5);

}



.guest-badge.bronze{

    background:linear-gradient(135deg,#b87333,#d18b47);

}




/*==========================================================
        EVENT BOX
==========================================================*/


.event-box{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:11px 20px;

    background:#eef5ff;

    border-radius:12px;

    color:#0d47a1;

    font-weight:600;

    margin-bottom:15px;

}



.event-box i{

    font-size:18px;

}



/*==========================================================
        PREMIUM MINIMAL QUOTE BOX
==========================================================*/


blockquote{

    position:relative;

    margin-top:12px;

    width:75%;

    padding:12px 20px;

    background:linear-gradient(135deg,#f8fbff,#ffffff);

    border-left:4px solid #f4b400;

    border-radius:10px;

    color:#555;

    font-size:14px;

    line-height:1.6;

    font-style:italic;

    box-shadow:
    0 5px 18px rgba(0,0,0,.06);

}



blockquote::before{

    content:"“";

    position:absolute;

    left:10px;

    top:-20px;

    font-size:45px;

    color:#f4b400;

    font-weight:700;

}



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


@media(max-width:991px){


.visitor-row{

    flex-direction:column;

    text-align:center;

}



.visitor-photo{

    flex:unset;

}



.visitor-photo img{

    width:180px;

    height:180px;

}



.visitor-date{

    position:static;

    margin-bottom:18px;

    display:inline-block;

}



.event-box{

    justify-content:center;

}



blockquote{

    width:100%;

    text-align:left;

    font-size:13px;

    padding:12px 15px;

}



}
/*Achievement*/
.achievement-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
}

.achievement-modal .modal-header{
    background:linear-gradient(135deg,#0d6efd,#3b82f6);
    color:#fff;
    padding:20px 30px;
}

.achievement-modal .btn-close{
    filter:invert(1);
}

.achievement-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.achievement-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(13,110,253,.18);
}

.image-box{
    position:relative;
    overflow:hidden;
}

.image-box img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.4s;
}

.achievement-card:hover img{
    transform:scale(1.08);
}

.award-badge{
    position:absolute;
    top:15px;
    right:15px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#f4b400,#ff9800);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 8px 20px rgba(255,193,7,.35);
}

.achievement-info{
    padding:20px;
    text-align:center;
}

.achievement-info h5{
    font-weight:700;
    margin-bottom:6px;
}

.achievement-info h6{
    color:#0d6efd;
    font-weight:600;
}

.achievement-info p{
    color:#666;
    margin:10px 0;
}

.year{
    display:inline-block;
    background:#0d6efd;
    color:#fff;
    padding:6px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}
/*Facilities*/
/* Modal */

.facility-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
}

.facility-modal .modal-header{
    background:linear-gradient(135deg,#0d6efd,#3b82f6);
    padding:20px 30px;
}

.facility-modal h3{
    color:#fff;
    margin:0;
    font-weight:700;
}

.facility-modal .btn-close{
    filter:invert(1);
}

/* Facility Card */

.facility-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.facility-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(13,110,253,.18);

}

.facility-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    transition:.4s;

}

.facility-card:hover img{

    transform:scale(1.08);

}

.facility-caption{

    padding:18px;

    text-align:center;

}

.facility-caption h5{

    font-weight:700;

    margin-bottom:10px;

    color:#222;

}

.facility-caption p{

    color:#666;

    font-size:14px;

    margin:0;

    line-height:1.6;

}

/* Mobile */

@media(max-width:991px){

.facility-card img{

    height:160px;

}

}
/**/