/*=========================================================
        GREENFIELD PRIVATE SCHOOL
        PREMIUM MODERN WEBSITE
==========================================================*/

/*==============================
        GOOGLE FONTS
==============================*/

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

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:#1f2d3d;
    background:#ffffff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

:root{

    --primary:#0C6B45;
    --secondary:#D4A017;
    --dark:#1F2D3D;
    --light:#FFFFFF;
    --gray:#F5F7FA;
    --text:#5B6472;

    --radius:22px;

    --shadow:
    0 20px 60px rgba(0,0,0,.10);

    --transition:.35s ease;

}

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

.container{

    width:min(90%,1200px);
    margin:auto;

}

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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:15px 34px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn:hover{

    transform:translateY(-4px);

    background:#095838;

}

.btn-outline{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:15px 34px;

    border:2px solid #fff;

    border-radius:50px;

    color:#fff;

    transition:var(--transition);

}

.btn-outline:hover{

    background:#fff;
    color:var(--primary);

}

/*==============================
            HEADER
==============================*/

.header{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:100;

    padding:25px 0;

}

.header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.logo{

    display:flex;
    align-items:center;
    gap:15px;

    color:#fff;

}

.logo i{

    font-size:2rem;
    color:var(--secondary);

}

.logo h2{

    font-size:1.6rem;
    font-family:'Playfair Display',serif;

}

.logo span{

    font-size:.85rem;
    letter-spacing:2px;

}

.navbar ul{

    display:flex;
    gap:35px;

}

.navbar a{

    color:#fff;

    font-weight:500;

    position:relative;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--secondary);

    transition:.3s;

}

.navbar a:hover::after,

.navbar .active::after{

    width:100%;

}

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

.hero{

    min-height:100vh;

    background:
    linear-gradient(rgba(8,35,24,.72),
    rgba(8,35,24,.78)),
    url("../images/hero.jpg") center/cover no-repeat;

    display:flex;

    align-items:center;

    position:relative;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:center;

}

.hero-text{

    color:#fff;

}

.tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    margin-bottom:25px;

    letter-spacing:1px;

}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:4.6rem;

    line-height:1.1;

    margin-bottom:25px;

}

.hero p{

    font-size:1.1rem;

    line-height:1.9;

    max-width:620px;

    margin-bottom:40px;

    color:#F1F5F8;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

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

.hero-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:var(--radius);

    padding:40px;

    color:#fff;

    box-shadow:var(--shadow);

}

.badge{

    display:inline-block;

    background:var(--secondary);

    color:#222;

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

    margin-bottom:20px;

}

.hero-card h3{

    font-size:2rem;

    margin-bottom:15px;

}

.hero-card p{

    margin-bottom:20px;

}

.hero-card li{

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.hero-card li i{

    color:#7CFC8A;

    margin-right:10px;

}

.hero-card .btn{

    margin-top:30px;

    width:100%;

}

/*==============================
    SCROLL INDICATOR
==============================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:26px;

    height:48px;

    border:2px solid #fff;

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:6px;

    height:6px;

    background:#fff;

    border-radius:50%;

    transform:translateX(-50%);

    animation:scroll 2s infinite;

}

@keyframes scroll{

    0%{

        opacity:0;
        top:8px;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;
        top:28px;

    }

}
/*====================================
        STICKY NAVIGATION
=====================================*/

.header.sticky{

    position:fixed;

    background:rgba(12,107,69,.96);

    backdrop-filter:blur(18px);

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

    animation:slideDown .35s ease;

}

@keyframes slideDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

/*====================================
        FADE ANIMATION
=====================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}