/*======================================================================
    SCHOOL CMS
    File        : style.css
    Purpose     : Global Styles
    Author      : ChatGPT & Dauda
    Version     : 1.0

    NOTE:
    This file contains global styles only.
    Navbar, Hero, Footer and Responsive styles are
    separated into their own CSS files.
======================================================================*/


/*=========================================================
    BODY
=========================================================*/

body{

    font-family:var(--font-family);

    background:var(--light);

    color:var(--text);

    line-height:1.8;

    overflow-x:hidden;

}



/*=========================================================
    PAGE LOADER (Future Use)
=========================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:99999;

}



/*=========================================================
    COMMON SECTION
=========================================================*/

.section{

    padding:100px 0;

}



/*=========================================================
    CONTAINER
=========================================================*/

.container{

    position:relative;

}



/*=========================================================
    SECTION TITLE
=========================================================*/

.section-heading{

    margin-bottom:70px;

}



.section-heading h6{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    font-weight:700;

}



.section-heading h2{

    font-size:42px;

    font-weight:800;

    color:var(--dark);

    margin:15px 0;

}



.section-heading p{

    max-width:720px;

    margin:auto;

}



/*=========================================================
    BUTTONS
=========================================================*/

.btn-theme{

    background:var(--primary);

    color:#fff;

    padding:14px 35px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

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

}



.btn-theme:hover{

    background:#084298;

    color:#fff;

    transform:translateY(-4px);

}



.btn-warning-theme{

    background:var(--secondary);

    color:#000;

    padding:14px 35px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}



.btn-warning-theme:hover{

    transform:translateY(-4px);

    color:#000;

}



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

.card{

    border:none;

    border-radius:22px;

    overflow:hidden;

    transition:var(--transition);

}



.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}



/*=========================================================
    IMAGE HOVER
=========================================================*/

.image-box{

    overflow:hidden;

}



.image-box img{

    transition:.6s;

}



.image-box:hover img{

    transform:scale(1.08);

}



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

.icon-box{

    width:80px;

    height:80px;

    background:rgba(13,110,253,.10);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:25px;

}



.icon-box i{

    font-size:34px;

    color:var(--primary);

}



/*=========================================================
    COUNTERS
=========================================================*/

.counter-box{

    background:#fff;

    border-radius:20px;

    text-align:center;

    padding:40px 20px;

    transition:var(--transition);

}



.counter-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}



.counter-box h2{

    font-size:46px;

    color:var(--primary);

    font-weight:800;

}



.counter-box p{

    margin:0;

    font-weight:600;

}



/*=========================================================
    NEWS CARD
=========================================================*/

.news-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    transition:var(--transition);

}



.news-card:hover{

    box-shadow:var(--shadow);

}



.news-card img{

    height:250px;

    width:100%;

    object-fit:cover;

}



.news-content{

    padding:30px;

}



.news-content h4{

    font-weight:700;

    color:var(--dark);

}



.news-content a{

    color:var(--primary);

    font-weight:600;

}



/*=========================================================
    GALLERY
=========================================================*/

.gallery-item{

    overflow:hidden;

    border-radius:20px;

    position:relative;

}



.gallery-item img{

    transition:.5s;

}



.gallery-item:hover img{

    transform:scale(1.1);

}



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

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        #003b8e
    );

    color:#fff;

    border-radius:30px;

    padding:80px 50px;

}



.cta h2{

    font-size:46px;

    font-weight:800;

}



/*=========================================================
    UTILITIES
=========================================================*/

.shadow-box{

    box-shadow:var(--shadow);

}



.radius{

    border-radius:20px;

}



.bg-primary-soft{

    background:rgba(13,110,253,.08);

}



.text-primary-custom{

    color:var(--primary);

}



/*=========================================================
    SCROLL TO TOP BUTTON
=========================================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}



.scroll-top.active{

    opacity:1;

    visibility:visible;

}



.scroll-top:hover{

    background:#084298;

}



/*=========================================================
    SELECTION
=========================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}