/* ======================================================
   LANDING PAGE
   AI-Powered Grievance Lodging & Tracking System
====================================================== */

/* ==========================
   NAVBAR
========================== */

.navbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    position:sticky;

    top:0;

    z-index:1000;

}

.nav-left,
.nav-right{

    display:flex;

    align-items:center;

    gap:30px;

}

.nav-left a{

    text-decoration:none;

    color:#111827;

    font-size:16px;

    font-weight:500;

    transition:.3s;

}

.nav-left a:hover{

    color:#2563eb;

}

.logo{

    font-size:20px;

    font-weight:700;

    color:#111827;

    text-align:center;

}

.outline-btn{

    text-decoration:none;

    color:#111827;

    border:2px solid #111827;

    padding:12px 28px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.outline-btn:hover{

    background:#111827;

    color:white;

}

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

.hero{

    position:relative;

    width:calc(100% - 40px);

    min-height:88vh;

    margin:20px;

    border-radius:24px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../assets/backgrounds/hero.jpeg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

/* ==========================
   DARK OVERLAY
========================== */

.overlay{

    position:absolute;

    inset:0;

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

}

/* ==========================
   TAG
========================== */

.tag{

    position:relative;

    z-index:2;

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

    backdrop-filter:blur(12px);

    color:white;

    padding:10px 24px;

    border-radius:30px;

    margin-bottom:35px;

    font-size:15px;

    font-weight:500;

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

}

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

.hero h1{

    position:relative;

    z-index:2;

    color:white;

    font-size:5rem;

    line-height:1.08;

    font-weight:800;

    max-width:900px;

    margin-bottom:45px;

    letter-spacing:-2px;

}

/* ==========================
   BUTTON
========================== */

.hero-btn{

    position:relative;

    z-index:2;

    text-decoration:none;

    background:#23395d;

    color:white;

    padding:18px 50px;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    transition:.3s;

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

}

.hero-btn:hover{

    background:#2563eb;

    transform:translateY(-4px);

}

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

@media(max-width:1200px){

.hero h1{

font-size:4rem;

}

}

@media(max-width:900px){

.navbar{

flex-direction:column;

height:auto;

padding:20px;

gap:20px;

}

.nav-left{

flex-wrap:wrap;

justify-content:center;

}

.logo{

text-align:center;

}

.hero h1{

font-size:3rem;

}

.hero{

min-height:75vh;

}

}

@media(max-width:600px){

.hero{

margin:10px;

width:calc(100% - 20px);

padding:30px;

}

.hero h1{

font-size:2.2rem;

letter-spacing:-1px;

}

.tag{

font-size:13px;

padding:8px 18px;

}

.hero-btn{

width:100%;

max-width:280px;

padding:16px;

}

}