/* =================================

    Template Name: Eduplus
    Author: 
    Authoe URI: 
    Version: 1.0
    Tags:
    Description: School and College Website Template

================================= */

/*-------------------------------------
    [ Table of contents ]

    01. Google Fonts
    02. Reset CSS
    03. CSS Variables
    04. Common CSS

/*-------------------------------------

/* ------------------------------------
    01. Google Fonts {font-family: 'Nunito', sans-serif; font-family: 'Nunito Sans', sans-serif;}
------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;1,6..12,300;1,6..12,400&family=Nunito:wght@400;500;600;700;800&display=swap');


/* ------------------------------------
    02. Reset CSS
------------------------------------ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------------
    03. CSS Variables
------------------------------------ */

:root {
    /* Colors */
    --primary: #345AB1;
    --secondary: #312783;
    --acent: #345AB1;
    --dark: #000000;
    --light: #FFFFFF;
    --text: #333333;
    --white: #FFFFFF;
    --box-bg: #F7F7F7;

    /* Font-family */
    --font-primary: 'Nunito', sans-serif;
    --font-secondary: 'Nunito Sans', sans-serif;

    /* Font-size */
    --text-small: 14px;
    --text-small-line-height: 1.2rem;
    --text-small-weight: 400;
    --base-text: 16px;
    --base-line-height: 1.3rem;
    --base-weight: 400;
    --text-large: 18px;
    --text-large-line-height: 1.5rem;
    --text-large-weight: 400;

    /* Heading */
    --site-heading: 32px;
    --site-heading-line-height: 3.2rem;
    --site-heading-weight: 700;
    --component-heading: 21px;
    --component-heading-line-height: 1.5rem;
    --component-heading-weight: 600;
    --component-heading-2: 25px;
    --component-heading-2-line-height: 2rem;

    /* Spacing */
    --component-gap: 20px;

    /* Padding */
    --btn-padding: 12px 24px;
    --component-inner-space: 20px;

    /* Border & Line */
    --box-border: 1px solid #345AB1;
    --horizontal-line: 1px solid #ECF0F1;

    /* Shadow */
    --drow-shadow: none;

    /* Rounder, Radious, Circle */
    --btn-radius: 20px;
    --box-radius: 8px;

    /* Transition */
    --transition: all 0.3s ease-in-out;
    --lazy-transition: all 0.5s ease-in-out;


}


/* ------------------------------------
    4.0. Common Css / Class
------------------------------------ */

html,
body {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--base-text);
    font-weight: var(--base-weight);
    line-height: var(--base-line-height);
    color: var(--text);
    background-color: var(--light);
}

p {
    font-size: var(--base-text);
    font-weight: var(--base-weight);
    line-height: var(--base-line-height);
}

a {
    text-decoration: none;
    color: var(--text);
}

a:hover {
    text-decoration: none;
    color: var(--acent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: var(--dark);
    font-weight: var(--site-heading-weight);
}

.site-heading {
    font-family: var(--font-primary);
    font-size: var(--site-heading);
    font-weight: var(--site-heading-weight);
    line-height: var(--site-heading-line-height);
}

.site-subheading {
    font-family: var(--font-secondary);
    font-size: var(--large-text);
    font-weight: var(--base-weight);
    line-height: var(--base-line-height);
    color: var(--text);
}

/* ---------------------------
    Font Style
------------------------------ */

.text-large {
    font-size: var(--text-large);
    font-weight: var(--text-large-weight);
    line-height: var(--text-large-line-height);
}

.text-small {
    font-size: var(--text-small);
    font-weight: var(--text-small-weight);
    line-height: var(--text-small-line-height);
}


.fill-btn {
    font-size: var(--base-text);
    padding: var(--btn-padding);
    color: var(--white);
    outline: none;
    cursor: pointer;
    border: 1px solid var(--acent);
    background-color: var(--acent);
    border-radius: var(--btn-radius);
    transition: var(--transition);
}

.fill-btn:hover {
    background-color: var(--white);
    color: var(--acent);
}

.outline-btn {
    font-family: var(--font-primary);
    font-size: var(--base-text);
    font-weight: 600;
    color: var(--acent);
    background-color: var(--light);
    border: 1px solid var(--acent);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    transition: var(--transition);
}

.outline-btn:hover {
    background-color: var(--acent);
    color: var(--light);
    border: 1px solid var(--acent);
}


/* Component */

.component-box {
    background-color: var(--white);
    border: var(--box-border);
    border-radius: var(--box-radius);
    box-shadow: var(--drow-shadow);
}

.component-head {
    padding: var(--component-inner-space);
    background-color: var(--box-bg);
    border-top-left-radius: var(--box-radius);
    border-top-right-radius: var(--box-radius);
}

.component-heading {
    font-family: var(--font-primary);
    font-size: var(--component-heading);
    line-height: var(--component-heading-line-height);
    font-weight: var(--component-heading-weight);
}

.component-heading-2 {
    font-family: var(--font-primary);
    font-size: var(--component-heading-2);
    line-height: var(--component-heading-2-line-height);
    font-weight: var(--component-heading-weight);
}

.component-body {
    padding: var(--component-inner-space);
}

.component-btn {
    font-family: var(--font-secondary);
    font-size: var(--base-text);
    color: var(--acent);
    text-align: left;
    padding-top: var(--component-inner-space);
    display: block;
}

.component-btn:hover {
    color: var(--primary);
}

.component-gap {
    margin-top: var(--component-gap);
}

/* only for horizental line */
.component-box hr {
    display: none;
}

.component-list li {
    padding: 10px 0;
    border-bottom: var(--horizontal-line);
}

.component-list li a:hover {
    color: var(--acent);
}

.component-list li a i {
    color: var(--acent);
    font-size: var(--base-text);
}

.component-list li:first-child {
    padding-top: 0;
}

/* ---------------------------
    This style for box-component 
------------------------------ */

.box-component {
    background-color: var(--white);
    border: var(--box-border);
    border-radius: var(--box-radius);
    box-shadow: var(--drow-shadow);
}

.box-component .box-head {
    padding: var(--component-inner-space);
    background-color: var(--box-bg);
    border-top-left-radius: var(--box-radius);
    border-top-right-radius: var(--box-radius);
}

.box-component .box-head .box-heading {
    font-family: var(--font-primary);
    font-size: var(--component-heading);
    line-height: var(--component-heading-line-height);
    font-weight: var(--component-heading-weight);
    text-align: left;
    color: var(--text);
}

.box-component .box-body {
    padding: var(--component-inner-space);
}

.box-component .box-body .box-img {
    padding-bottom: 10px;
}

.box-component .box-body .box-img img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.box-component .box-body .name {
    font-size: var(--text-large);
    font-weight: 700;
    line-height: var(--text-large-line-height);
    color: var(--dark);
}

.box-component .box-body .title {
    font-size: var(--text-small);
    font-weight: var(--text-small-weight);
    line-height: var(--text-small-line-height);
    color: var(--text);
}

.box-component .box-list li {
    padding: 6px 0;
    border-bottom: var(--horizontal-line);
}

.box-component .box-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.box-component .box-list li a {
    font-size: var(--text-small);
}

.box-component .box-list li a i {
    color: var(--acent);
}



/* =======================================
    Responsive CSS
========================================= */


/* -----------------------
    For Small Devices
------------------------ */
@media (max-width: 639.99px) {
    :root {

        --text-small: 12px;
        --text-small-line-height: 1rem;
        --base-text: 14px;
        --base-line-height: 1.2rem;
        --text-large: 16px;
        --text-large-line-height: 1.3rem;

        /* Heading */
        --site-heading: 20px;
        --site-heading-line-height: 1.6rem;

        --component-heading: 18px;
        --component-heading-line-height: 1.5rem;
        --component-heading-weight: 700;

        /* Spacing */
        --component-gap: 20px;

        /* Padding */
        --btn-padding: 8px 16px;
        --component-inner-space: 15px;
    }
}

/* -----------------------
    For Medium Devices
------------------------ */
@media screen and (min-width: 640px) and (max-width: 767.99px) {
    :root {

        --text-small: 12px;
        --text-small-line-height: 1rem;
        --base-text: 14px;
        --base-line-height: 1.2rem;
        --text-large: 16px;
        --text-large-line-height: 1.3rem;

        /* Heading */
        --site-heading: 25px;
        --site-heading-line-height: 1.8rem;

        --component-heading: 20px;
        --component-heading-line-height: 1.5rem;
        --component-heading-weight: 700;

        /* Spacing */
        --component-gap: 20px;

        /* Padding */
        --btn-padding: 8px 16px;
        --component-inner-space: 15px;
    }
}

/* -----------------------
    For Large Devices
------------------------ */
@media (min-width: 1024px) {}