/* =========================================================
   THE TUTOR 4 YOU - MAIN STYLESHEET
   ========================================================= */


/* =========================
   BRAND VARIABLES
   ========================= */

:root {

    --primary-blue: #12355B;
    --secondary-orange: #F28C28;
    --light-gray: #F5F7FA;
    --dark-text: #1F2937;
    --white: #FFFFFF;

    --shadow:
        0 10px 30px rgba(0,0,0,0.08);

    --transition:
        all 0.3s ease;

}


/* =========================
   GLOBAL STYLES
   ========================= */

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


html {
    scroll-behavior: smooth;
}


body {

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

    color: var(--dark-text);

    line-height: 1.7;

    background:
        var(--white);

}


h1,
h2,
h3 {

    font-weight: 700;

    color:
        var(--primary-blue);

}


h2 {

    font-size: 2.5rem;

    margin-bottom: 2rem;

}


section {

    padding:
        90px 0;

}


/* =========================
   NAVIGATION
   ========================= */


.navbar {

    background:
        rgba(255,255,255,0.95);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 2px 15px rgba(0,0,0,.05);

}


.navbar-brand {

    font-size:
        1.5rem;

    font-weight:
        700;

    color:
        var(--primary-blue);

}


.navbar-brand:hover {

    color:
        var(--secondary-orange);

}


.nav-link {

    color:
        var(--dark-text);

    font-weight:
        500;

    margin-left:
        15px;

}


.nav-link:hover {

    color:
        var(--secondary-orange);

}


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


.btn-primary {

    background:
        var(--secondary-orange);

    border:
        none;

    padding:
        12px 28px;

    font-weight:
        600;

    border-radius:
        30px;

    transition:
        var(--transition);

}


.btn-primary:hover {

    background:
        #d97615;

    transform:
        translateY(-3px);

}


.btn-outline-primary {

    color:
        var(--primary-blue);

    border:
        2px solid var(--primary-blue);

    border-radius:
        30px;

    padding:
        12px 28px;

}


.btn-outline-primary:hover {

    background:
        var(--primary-blue);

    color:
        var(--white);

}



/* =========================
   HERO SECTION
   ========================= */


.hero {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f7fa 100%
        );

    padding-top:
        100px;

}


.hero h1 {

    font-size:
        3.5rem;

    line-height:
        1.15;

    margin-bottom:
        25px;

}


.hero p {

    font-size:
        1.15rem;

    margin-bottom:
        35px;

    color:
        #4B5563;

}


.hero img {

    max-height:
        450px;

}



/* =========================
   MISSION SECTION
   ========================= */


#mission {

    background:
        var(--primary-blue);

    color:
        var(--white);

}


#mission h2 {

    color:
        var(--white);

}


#mission p {

    max-width:
        900px;

    margin:
        auto;

    font-size:
        1.4rem;

    line-height:
        1.8;

}



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


.service-card {

    background:
        var(--white);

    border-radius:
        20px;

    padding:
        35px;

    height:
        100%;

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);

}


.service-card:hover {

    transform:
        translateY(-10px);

}


.service-card i {

    font-size:
        2.5rem;

    color:
        var(--secondary-orange);

    margin-bottom:
        20px;

}



/* =========================
   WHY US
   ========================= */


#about {

    background:
        var(--light-gray);

}



/* =========================
   TUTOR SECTION
   ========================= */


#tutors {

    background:
        var(--primary-blue);

}


#tutors h2 {

    color:
        var(--white);

}



/* =========================
   CONTACT
   ========================= */


#contact {

    background:
        var(--light-gray);

}



/* =========================
   FOOTER
   ========================= */


footer {

    background:
        var(--primary-blue);

    color:
        var(--white);

    padding:
        30px 0;

}



/* =========================
   RESPONSIVE DESIGN
   ========================= */


@media(max-width:992px){


    .hero h1 {

        font-size:
            2.7rem;

    }


    .hero {

        text-align:
            center;

    }


}


@media(max-width:576px){


    h2 {

        font-size:
            2rem;

    }


    .hero h1 {

        font-size:
            2.2rem;

    }


}

/* =========================
   HERO STATS
========================= */

.hero-stats h3 {

    color:
    var(--secondary-orange);

    font-size:
    1.8rem;

}


.hero-stats p {

    font-size:
    .9rem;

    color:
    var(--dark-text);

}


.accordion-button {

    font-weight:
    600;

    color:
    var(--primary-blue);

}


.accordion-button:not(.collapsed) {

    background:
    var(--light-gray);

}

.navbar.scrolled {

    box-shadow:
    0 8px 25px rgba(0,0,0,.12);

}


.logo {

    height:
    80px;

    width:
    auto;

    transition:
    var(--transition);

}


.navbar-brand:hover .logo {

    transform:
    scale(1.05);

}

/* =========================
   SECTION BACKGROUNDS
========================= */


#testimonials {

    background:
    var(--light-gray);

}


#faq {

    background:
    var(--light-gray);

}


#services {

    background:
    white;

}


#about {

    background:
    white;

}


#contact {

    background:
    white;

}

section {

    scroll-margin-top:
    80px;

}

.hero {

    padding-top:
    150px;

}

.hero-image {

    width:100%;
    border-radius:30px;
    box-shadow:var(--shadow);

}

.coming-soon {

    border:
    2px dashed var(--secondary-orange);

    background:
    #fffaf3;

}


.coming-soon i {

    color:
    var(--secondary-orange);

}