/* ==========================================================
   E2 Snacks Website
   Frontend Stylesheet
   Version: 3.1
========================================================== */

/* ==========================================================
   Root Variables
========================================================== */

:root{
    --primary:#16428B;
    --primary-dark:#12366F;
    --secondary:#F4B400;

    --success:#2E7D32;
    --danger:#D32F2F;

    --white:#FFFFFF;
    --light:#F8F9FA;
    --border:#E5E7EB;
    --text:#444444;

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

    --radius:18px;
}

/* ==========================================================
   Reset
========================================================== */

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

html{
    height:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.7;
}

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

a{
    color:inherit;
    text-decoration:none;
    transition:color .3s ease, background-color .3s ease;
}

button,
.btn{
    cursor:pointer;
}

.container{
    width:min(1200px,92%);
    margin:0 auto;
}

/* ==========================================================
   Navbar
========================================================== */

.navbar{
    background:var(--white);
    padding:18px 0;
    box-shadow:0 3px 18px rgba(0,0,0,.06);
}

.navbar-brand{
    color:var(--primary);
    font-size:2rem;
    font-weight:800;
}

.nav-link{
    color:#555;
    font-weight:600;
    transition:color .3s ease;
}

.nav-link:hover{
    color:var(--primary);
}

/* ==========================================================
   Hero
========================================================== */

.hero-section{
    background:
        linear-gradient(
            rgba(22,66,139,.92),
            rgba(22,66,139,.92)
        ),
        url("../images/hero_bg.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:var(--white);
    text-align:center;

    padding:140px 0;
}

.hero-section h1{
    font-size:4rem;
    font-weight:800;
}

.hero-section p{
    max-width:850px;
    margin:25px auto;
    font-size:1.35rem;
}

/* ==========================================================
   Buttons
========================================================== */

.btn{
    padding:14px 28px;
    border-radius:10px;
    font-weight:600;
    transition:all .3s ease;
}

.btn-primary{
    background:var(--primary);
    border:none;
    color:var(--white);
}

.btn-primary:hover{
    background:var(--primary-dark);
}

/* ==========================================================
   Sections
========================================================== */

section{
    padding:90px 0;
}

section h2{
    margin-bottom:40px;
    color:#222;
    font-weight:800;
}

/* ==========================================================
   Cards
========================================================== */

.card{
    overflow:hidden;
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:transform .35s ease;
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.card-body{
    padding:1.5rem;
}

/* ==========================================================
   Features
========================================================== */

.features i{
    font-size:54px;
    color:var(--primary);
}

/* ==========================================================
   Footer
========================================================== */

footer{
    padding:70px 0 25px;
    background:#0F172A;
    color:var(--white);
}

footer a{
    color:#ddd;
}

footer a:hover{
    color:var(--white);
}

/* ==========================================================
   Forms
========================================================== */

.form-control,
.form-select{
    padding:12px;
    border-radius:10px;
}

/* ==========================================================
   Utilities
========================================================== */

.shadow-soft{
    box-shadow:var(--shadow);
}

.rounded-xl{
    border-radius:20px;
}

.bg-primary{
    background:var(--primary)!important;
}

.text-primary{
    color:var(--primary)!important;
}

/* ==========================================================
   Accessibility
========================================================== */

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    white-space:nowrap;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    border:0;
}

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

@media (max-width:992px){

    .hero-section{
        padding:100px 0;
    }

    .hero-section h1{
        font-size:3rem;
    }

}

@media (max-width:768px){

    .hero-section{
        padding:70px 0;
    }

    .hero-section h1{
        font-size:2.2rem;
    }

    .hero-section p{
        font-size:1rem;
    }

    .card img{
        height:220px;
    }

}