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

html {
    overflow-x: clip;
}

.container-fluid, .content {
    padding: 0 !important;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
    color: #6a737a;
}

.main {
    color: #2d4c21;
}

.btn-green {
    background-color: #778f3d !important;
    color: #fff !important;
}

/*label {
    font-size: 16px;
}*/

/* ===== Header ===== */
header {
    background: #0b1620;
    /*padding: 16px 32px;*/
    height: 120px;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    max-width: 100%;
    height: 60px;
    margin: 16px 25px;
}

/* ===== Hero Section ===== */
.hero-wrapper {
    min-height: 145px;
    background-image: url("/img/Agroland-registration-hero-background.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Green glass panel */
.hero-glass {
    min-height: 145px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* glass effect */
    background: rgba(20, 120, 150, 0.50);
    backdrop-filter: /*blur(12px)*/ saturate(130%);
    -webkit-backdrop-filter: /*blur(12px)*/ saturate(130%);
    /*border-top: 1px solid rgba(255, 255, 255, 0.25);*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

    .hero-glass h1 {
        color: #ffffff;
        font-size: 48px;
        font-weight: 300;
        letter-spacing: 2px;
    }


/* ===== Responsive ===== */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 16px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-wrapper {
        background-attachment: scroll;
    }

    .hero-glass h1 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .hero-glass h1 {
        font-size: 28px;
    }
}

/* ===== Backdrop Filter Fallback ===== */
@supports not (backdrop-filter: blur(1px)) {
    .hero-glass {
        background: rgba(40, 120, 80, 0.65);
    }
}