/*======================================
        PAGE BANNER
======================================*/

.page-banner {

    position: relative;

    height: 80vh;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.page-banner-bg {

    position: absolute;

    inset: 0;

}

.page-banner-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

}

.page-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg,
            rgba(30, 58, 138, .88),
            rgba(37, 99, 235, .72));

}

.page-banner-content {

    position: relative;

    z-index: 5;

    color: #fff;

}

.page-subtitle {

    display: inline-block;

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

    backdrop-filter: blur(12px);

    padding: 12px 28px;

    border-radius: 50px;

    margin-bottom: 25px;

    letter-spacing: 1px;

}

.page-banner h1 {

    color: #fff;

    font-size: 58px;

    font-weight: 800;

    margin-bottom: 20px;

}

.page-banner h1 span {

    color: #93C5FD;

}

.page-banner p {

    max-width: 700px;

    margin: auto;

    color: rgba(255, 255, 255, .90);

    line-height: 1.9;

}

.breadcrumb {

    margin-top: 35px;

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

    display: inline-flex;

    padding: 12px 25px;

    border-radius: 50px;

    backdrop-filter: blur(15px);

}

.breadcrumb-item a {

    color: #fff;

}

.breadcrumb-item.active {

    color: #BFDBFE;

}

.breadcrumb-item+.breadcrumb-item::before {

    color: #fff;

}

/*======================================
        ABOUT INTRO
======================================*/

.about-intro {

    padding: 110px 0;

    background: #fff;

}

.about-intro-image {

    position: relative;

}

.about-intro-image img {

    width: 100%;

    border-radius: 30px;

    box-shadow: var(--shadow-lg);

}

.intro-floating-card {

    position: absolute;

    right: -20px;

    bottom: 30px;

    background: #fff;

    padding: 25px 30px;

    border-radius: 20px;

    box-shadow: var(--shadow);

    text-align: center;

}

.intro-floating-card h2 {

    color: var(--primary);

    font-size: 42px;

    margin-bottom: 8px;

}

.intro-floating-card span {

    color: var(--text);

    font-size: 15px;

}

.about-intro-content h2 {

    font-size: 48px;

    line-height: 1.2;

    margin: 20px 0;

}

.about-intro-content h2 span {

    color: var(--primary);

}

.about-intro-content p {

    line-height: 1.9;

    margin-bottom: 18px;

}

.intro-feature {

    display: flex;

    gap: 18px;

    align-items: flex-start;

}

.intro-feature i {

    width: 60px;

    height: 60px;

    background: var(--primary-light);

    color: var(--primary);

    border-radius: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 26px;

}

.intro-feature h5 {

    margin-bottom: 6px;

}

.intro-feature p {

    margin: 0;

    font-size: 15px;

}

/*===============================
    VISION & MISSION
================================*/

.vision-mission {

    padding: 110px 0;

    background: #EFF6FF;

}

.vm-card {

    background: #fff;

    border-radius: 25px;

    padding: 50px;

    height: 100%;

    transition: .4s;

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border);

}

.vm-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.vm-icon {

    width: 90px;

    height: 90px;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color: #fff;

    font-size: 36px;

    margin-bottom: 25px;

}

.vm-card h3 {

    margin-bottom: 18px;

}

.vm-card p {

    line-height: 1.9;

}

/*==================================
        TIMELINE
==================================*/

.timeline-section {

    padding: 110px 0;

    background: #fff;

}

.timeline {

    position: relative;

    max-width: 1100px;

    margin: auto;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    background: linear-gradient(var(--primary),

            var(--secondary));

}

.timeline-item {

    width: 50%;

    position: relative;

    padding: 30px 50px;

}

.timeline-item.left {

    left: 0;

    text-align: right;

}

.timeline-item.right {

    left: 50%;

}

.timeline-year {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg,

            var(--primary),

            var(--secondary));

    color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: 700;

    font-size: 20px;

    position: absolute;

    top: 20px;

    z-index: 2;

}

.timeline-item.left .timeline-year {

    right: -40px;

}

.timeline-item.right .timeline-year {

    left: -40px;

}

.timeline-content {

    background: #fff;

    border-radius: 20px;

    padding: 30px;

    box-shadow: var(--shadow);

}

.timeline-content h4 {

    margin-bottom: 15px;

}

.timeline-content p {

    margin: 0;

    line-height: 1.9;

}

/*==================================
        CORE VALUES
==================================*/

.core-values {

    padding: 110px 0;

    background: #EFF6FF;

}

.value-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px;

    text-align: center;

    transition: .35s;

    height: 100%;

    box-shadow: var(--shadow-sm);

}

.value-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.value-card i {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,

            var(--primary),

            var(--secondary));

    color: #fff;

    font-size: 38px;

    margin-bottom: 25px;

}

.value-card h4 {

    margin-bottom: 15px;

}

.value-card p {

    line-height: 1.9;

}

/*======================================
        INFRASTRUCTURE
======================================*/

.infrastructure-section {

    padding: 110px 0;

    background: #fff;

}

.infra-image {

    position: relative;

}

.infra-image img {

    width: 100%;

    border-radius: 30px;

    box-shadow: var(--shadow-lg);

}

.infra-badge {

    position: absolute;

    bottom: 25px;

    right: -20px;

    background: linear-gradient(135deg,
            var(--primary),
            var(--primary-dark));

    color: #fff;

    padding: 25px 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: var(--shadow);

}

.infra-badge h3 {

    color: #fff;

    font-size: 40px;

    margin-bottom: 5px;

}

.infra-card {

    background: #F8FAFC;

    border-radius: 20px;

    padding: 30px;

    height: 100%;

    transition: .35s;

    border: 1px solid var(--border);

}

.infra-card:hover {

    background: #fff;

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.infra-card i {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color: #fff;

    font-size: 30px;

    margin-bottom: 20px;

}

.infra-card h5 {

    margin-bottom: 12px;

}

.infra-card p {

    margin: 0;

    line-height: 1.8;

}

/*======================================
        MANAGEMENT
======================================*/

.management-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.management-card {

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    transition: .35s;

    box-shadow: var(--shadow-sm);

    height: 100%;

}

.management-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.management-image {

    position: relative;

    overflow: hidden;

}

.management-image img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    transition: .5s;

}

.management-card:hover .management-image img {

    transform: scale(1.08);

}

.management-social {

    position: absolute;

    left: 50%;

    bottom: 20px;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    opacity: 0;

    transition: .35s;

}

.management-card:hover .management-social {

    opacity: 1;

}

.management-social a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .3s;

}

.management-social a:hover {

    background: var(--primary);

    color: #fff;

}

.management-content {

    padding: 30px;

    text-align: center;

}

.management-content h4 {

    margin-bottom: 8px;

}

.management-content span {

    color: var(--primary);

    font-weight: 600;

    display: block;

    margin-bottom: 15px;

}

.management-content p {

    line-height: 1.8;

    margin: 0;

}

/*==============================
        FACULTY
==============================*/

.faculty-section {

    padding: 110px 0;

    background: #fff;

}

.faculty-card {

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: .35s;

}

.faculty-card:hover {

    transform: translateY(-10px);

}

.faculty-card img {

    height: 320px;

    width: 100%;

    object-fit: cover;

}

.faculty-content {

    padding: 25px;

    text-align: center;

}

.faculty-content span {

    color: var(--primary);

    display: block;

    margin: 10px 0;

}



/*==============================
        AWARDS
==============================*/

.awards-section {

    padding: 110px 0;

    background: #EFF6FF;

}

.award-card {

    background: #fff;

    padding: 45px;

    text-align: center;

    border-radius: 25px;

    transition: .35s;

    box-shadow: var(--shadow);

}

.award-card:hover {

    transform: translateY(-10px);

}

.award-card i {

    font-size: 55px;

    color: var(--primary);

    margin-bottom: 20px;

}



/*==============================
        ABOUT CTA
==============================*/

.about-cta {

    padding: 100px 0;

    background: #fff;

}

.cta-box {

    background: linear-gradient(135deg,

            var(--primary),

            var(--primary-dark));

    padding: 80px;

    border-radius: 30px;

    color: #fff;

}

.cta-box h2 {

    color: #fff;

    font-size: 50px;

    margin: 20px 0;

}

.cta-box span {

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

    padding: 12px 25px;

    border-radius: 50px;

}

.cta-box p {

    color: rgba(255, 255, 255, .9);

    margin-bottom: 35px;

}