/*==================================================
HOMEPAGE
The Kipsoen National Polytechnic
==================================================*/




/*==================================================
1. WELCOME SECTION
==================================================*/

.welcome-section{
    position:relative;
}

.welcome-image{
    position:relative;
}

.welcome-image img{
    width:100%;
    border-radius:var(--radius-lg);
    transition:var(--transition);
}

.welcome-image:hover img{
    transform:scale(1.02);
}

.welcome-content{
    padding-left:20px;
}

.welcome-content p{
    margin-bottom:22px;
    text-align:justify;
}


/*==================================================
2. MISSION & VISION
==================================================*/

.mission-box{
    height:100%;
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    margin-bottom:20px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.mission-box:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.mission-box h5{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:var(--primary-color);
}

.mission-box i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary-color);
    color:#fff;
    font-size:18px;
}

.mission-box p{
    margin:0;
}


/*==================================================
3. INSTITUTION HIGHLIGHTS
==================================================*/

.institution-highlights{
    margin-top:30px;
}

.highlight-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

.highlight-item i{
    color:var(--success-color);
    font-size:22px;
    margin-top:2px;
}

.highlight-item span{
    color:var(--dark);
    font-weight:500;
    line-height:1.6;
}


/*==================================================
4. WELCOME BUTTON
==================================================*/

.welcome-content .btn{
    min-width:180px;
}


/*==================================================
5. IMAGE DECORATION
==================================================*/

.welcome-image::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-20px;
    bottom:-20px;
    border-radius:var(--radius-lg);
    background:var(--secondary-color);
    opacity:.18;
    z-index:-1;
}

.welcome-image::after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    left:-20px;
    top:-20px;
    border-radius:50%;
    background:var(--primary-color);
    opacity:.10;
    z-index:-1;
}


/*==================================================
6. SECTION SPACING
==================================================*/

.welcome-section .section-title{
    margin-bottom:25px;
}

.welcome-section .section-subtitle{
    margin-bottom:15px;
}


/*==================================================
7. STATISTICS SECTION
==================================================*/

.statistics-section{
    background:var(--primary-color);
    color:#fff;
}

.statistics-section .section-title,
.statistics-section .section-description{
    color:#fff;
}

.statistics-section .section-subtitle{
    color:var(--secondary-color);
}

.stat-card{
    position:relative;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius-lg);
    padding:45px 25px;
    text-align:center;
    transition:var(--transition);
    height:100%;
}

.stat-card:hover{
    transform:translateY(-10px);
    background:#fff;
}

.stat-card:hover h2,
.stat-card:hover h5,
.stat-card:hover .stat-symbol{
    color:var(--primary-color);
}

.stat-card:hover .stat-icon{
    background:var(--primary-color);
    color:#fff;
}

.stat-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:var(--secondary-color);
    font-size:38px;
    transition:var(--transition);
}

.stat-card h2{
    display:inline-block;
    color:#fff;
    font-size:56px;
    margin-bottom:10px;
    font-weight:800;
}

.stat-symbol{
    font-size:36px;
    font-weight:700;
    color:var(--secondary-color);
}

.stat-card h5{
    margin-top:20px;
    margin-bottom:0;
    color:#fff;
}


/*==================================================
8. DEPARTMENTS SECTION
==================================================*/

.departments-section{
    position:relative;
}

.department-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:40px 30px;
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    height:100%;
    border:1px solid var(--border);
}

.department-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.department-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary-color);
    color:#fff;
    font-size:38px;
    transition:var(--transition);
}

.department-card:hover .department-icon{
    background:var(--secondary-color);
    color:#000;
}

.department-card h4{
    margin-bottom:18px;
    color:var(--primary-color);
}

.department-card p{
    margin-bottom:25px;
}

.department-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--primary-color);
}

.department-link:hover{
    color:var(--secondary-color);
}

.department-link i{
    transition:var(--transition);
}

.department-link:hover i{
    transform:translateX(5px);
}



/*==================================================
9. WHY CHOOSE US
==================================================*/

.why-us-section{
    background:#fff;
}

.feature-card{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:35px 30px;
    text-align:center;
    height:100%;
    transition:var(--transition);
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
    border-color:var(--primary-color);
    background:#fff;
}

.feature-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(var(--primary-rgb),0.08);
    color:var(--primary-color);
    font-size:34px;
    transition:var(--transition);
}

.feature-card:hover .feature-icon{
    background:var(--primary-color);
    color:#fff;
}

.feature-card h4{
    margin-bottom:18px;
    color:var(--primary-color);
    font-size:1.25rem;
}

.feature-card p{
    margin-bottom:0;
    color:var(--text-color);
    line-height:1.7;
}




/*==================================================
10. RESPONSIVE
==================================================*/

/* Large Devices */

@media (max-width:1200px){

    .welcome-content{
        padding-left:0;
    }

}

/* Medium Devices */

@media (max-width:992px){

    .welcome-image{
        margin-bottom:40px;
    }

    .welcome-image::before,
    .welcome-image::after{
        display:none;
    }

}

/* Tablets */

@media (max-width:768px){

    /* Welcome */

    .mission-box{
        padding:24px;
    }

    .highlight-item{
        margin-bottom:15px;
    }

    /* Statistics */

    .stat-card{
        padding:35px 20px;
    }

    .stat-card h2{
        font-size:44px;
    }

    .stat-symbol{
        font-size:30px;
    }

    /* Departments */

    .department-card{
        padding:30px 25px;
    }

    .department-icon{
        width:75px;
        height:75px;
        font-size:32px;
    }

    /* Why Choose Us */

    .feature-card{
        padding:30px 25px;
    }

    .feature-icon{
        width:70px;
        height:70px;
        font-size:30px;
    }

}

/* Mobile */

@media (max-width:576px){

    /* Welcome */

    .welcome-content{
        text-align:center;
    }

    .welcome-content p{
        text-align:left;
    }

    .mission-box h5{
        justify-content:center;
    }

    .highlight-item{
        align-items:center;
    }

    /* Statistics */

    .stat-card{
        padding:30px 20px;
    }

    .stat-card h2{
        font-size:38px;
    }

    .stat-icon{
        width:70px;
        height:70px;
        font-size:30px;
    }

    /* Departments */

    .department-card{
        padding:25px 20px;
    }

    .department-icon{
        width:70px;
        height:70px;
        font-size:30px;
    }

    /* Why Choose Us */

    .feature-card{
        padding:25px 20px;
    }

    .feature-icon{
        width:65px;
        height:65px;
        font-size:28px;
    }

}