/*======================================================================
    SCHOOL CMS
    File: variables.css

    Purpose:
    Global design variables used throughout the website.
    Editing these values changes the appearance of the entire site.
======================================================================*/


/*====================================================
    GOOGLE FONT
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*====================================================
    ROOT VARIABLES
======================================================*/

:root{

    /*--------------------------------------------------
        Theme Colors
    ---------------------------------------------------*/

    --primary:#0B5ED7;
    --secondary:#FFC107;

    --dark:#1F2937;

    --light:#F8F9FA;

    --white:#FFFFFF;

    --text:#6B7280;

    --success:#198754;

    --danger:#DC3545;



    /*--------------------------------------------------
        Typography
    ---------------------------------------------------*/

    --font-family:'Poppins',sans-serif;



    /*--------------------------------------------------
        Border Radius
    ---------------------------------------------------*/

    --radius-sm:8px;

    --radius:16px;

    --radius-lg:30px;



    /*--------------------------------------------------
        Shadows
    ---------------------------------------------------*/

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);

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

    --shadow-lg:0 25px 60px rgba(0,0,0,.15);



    /*--------------------------------------------------
        Animation
    ---------------------------------------------------*/

    --transition:.35s ease-in-out;

}


/*====================================================
    RESET
======================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--light);

    color:var(--text);

    overflow-x:hidden;

}



/*====================================================
    LINKS
======================================================*/

a{

    text-decoration:none;

    transition:var(--transition);

}



/*====================================================
    IMAGES
======================================================*/

img{

    max-width:100%;

    display:block;

}



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

.btn{

    transition:var(--transition);

    border-radius:50px;

    font-weight:600;

}



.btn:hover{

    transform:translateY(-3px);

}



/*====================================================
    SECTION SPACING
======================================================*/

.section{

    padding:90px 0;

}



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

.section-title{

    font-size:2.5rem;

    font-weight:700;

    color:var(--dark);

    margin-bottom:15px;

}



.section-subtitle{

    color:var(--text);

    max-width:700px;

    margin:auto;

    margin-bottom:60px;

}



/*====================================================
    CARDS
======================================================*/

.card{

    border:none;

    border-radius:20px;

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

    transition:var(--transition);

}



.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}



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

.text-primary-custom{

    color:var(--primary);

}


.bg-primary-custom{

    background:var(--primary);

}


.bg-light-custom{

    background:var(--light);

}


.rounded-custom{

    border-radius:20px;

}


.shadow-custom{

    box-shadow:var(--shadow);

}