/* =========================================================
   EUROBOT ALGERIA 2027
   Modern responsive stylesheet
========================================================= */


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

:root {

    --green: #15803d;
    --green-dark: #0f5f2d;
    --green-light: #eaf7ef;

    --red: #dc2626;
    --red-dark: #b91c1c;

    --orange: #ea580c;

    --dark: #111827;
    --dark-soft: #1f2937;

    --text: #374151;
    --text-light: #6b7280;

    --white: #ffffff;
    --background: #f6f8f7;

    --border: #e5e7eb;

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

    --shadow-hover:
        0 18px 40px rgba(0, 0, 0, 0.12);

    --radius: 16px;

    --container: 1180px;

}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.7;

}


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


a {
    color: inherit;
    text-decoration: none;
}


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

.site-header {

    background: var(--white);

    border-bottom: 1px solid var(--border);

}


.header-inner {

    max-width: var(--container);

    min-height: 125px;

    margin: auto;

    padding:
        20px
        24px;

    display: flex;

    align-items: center;

    gap: 25px;

}


.logo-link {

    flex-shrink: 0;

}


.logo {

    width: 120px;

    height: auto;

    border-radius: 8px;

}


.brand {

    flex: 1;

}


.brand-small {

    display: block;

    margin-bottom: 2px;

    color: var(--green);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.brand h1 {

    margin: 0;

    color: var(--dark);

    font-size: clamp(25px, 4vw, 38px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

}


.brand h1 strong {

    color: var(--green);

}


.brand p {

    margin: 5px 0 0;

    color: var(--text-light);

    font-size: 14px;

}


.header-date {

    padding: 15px 20px;

    background: var(--green-light);

    border-radius: 12px;

    text-align: center;

    flex-shrink: 0;

}


.date-label {

    display: block;

    color: var(--green-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.header-date strong {

    display: block;

    color: var(--green);

    font-size: 18px;

}


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

.main-nav {

    position: sticky;

    top: 0;

    z-index: 100;

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

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(10px);

}


.nav-inner {

    max-width: var(--container);

    margin: auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.nav-inner a {

    position: relative;

    padding: 15px 17px;

    color: var(--dark-soft);

    font-size: 14px;

    font-weight: 600;

    transition:
        color .2s ease,
        background .2s ease;

}


.nav-inner a::after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 5px;

    height: 2px;

    background: var(--green);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform .2s ease;

}


.nav-inner a:hover,
.nav-inner a.active {

    color: var(--green);

}


.nav-inner a:hover::after,
.nav-inner a.active::after {

    transform: scaleX(1);

}


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

.section-container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: auto;

}


.section {

    padding: 80px 0;

}


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

.hero {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 35px auto 0;

}


.hero-image {

    position: relative;

    min-height: 500px;

    overflow: hidden;

    border-radius: 24px;

    background: var(--dark);

    box-shadow: var(--shadow);

}


.hero-image > img {

    width: 100%;

    height: 500px;

    object-fit: cover;

}


.hero-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .48) 45%,
            rgba(0, 0, 0, .08) 100%
        );

}


.hero-overlay {

    position: absolute;

    z-index: 2;

    top: 50%;

    left: 7%;

    width: min(600px, 85%);

    transform: translateY(-50%);

    color: white;

}


.hero-tag {

    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 13px;

    border-radius: 50px;

    background: var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.hero h2 {

    margin: 0;

    font-size: clamp(38px, 6vw, 68px);

    line-height: 1.02;

    letter-spacing: -2px;

}


.hero h2 span {

    color: #86efac;

}


.hero p {

    max-width: 540px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, .9);

    font-size: 18px;

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {

    margin-bottom: 45px;

}


.section-heading.centered {

    text-align: center;

}


.eyebrow {

    display: inline-block;

    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.section-heading h2 {

    margin: 7px 0 12px;

    color: var(--dark);

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.15;

    letter-spacing: -1px;

}


.heading-line {

    width: 50px;

    height: 4px;

    border-radius: 10px;

    background: var(--green);

}


.centered .heading-line {

    margin: auto;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(280px, .8fr);

    gap: 60px;

    align-items: start;

}


.intro-text {

    font-size: 16px;

}


.intro-text p {

    margin-top: 0;

    margin-bottom: 20px;

}


.intro-text .lead {

    color: var(--dark);

    font-size: 21px;

    line-height: 1.6;

    font-weight: 600;

}


.info-card {

    padding: 35px;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.info-icon {

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 20px;

    background: var(--green-light);

    border-radius: 14px;

    font-size: 27px;

}


.info-card h3 {

    margin: 0 0 12px;

    color: var(--dark);

    font-size: 22px;

    line-height: 1.3;

}


.info-card p {

    margin: 0;

    color: var(--text-light);

}


/* =========================================================
   DATES
========================================================= */

.dates-section {

    padding: 80px 0;

    background: #eef7f1;

}


.dates-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.date-card {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 25px;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.date-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-hover);

}


.date-card.featured {

    border: 2px solid var(--green);

}


.date-number {

    color: #d1d5db;

    font-size: 36px;

    font-weight: 800;

}


.date-title {

    display: block;

    margin-bottom: 5px;

    color: var(--text-light);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.date-card strong {

    display: block;

    color: var(--dark);

    font-size: 18px;

}


.date-card small {

    display: block;

    margin-top: 3px;

    color: var(--text-light);

}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.document-card {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 35px;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}


.document-icon {

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: #eff6ff;

    border-radius: 15px;

    font-size: 30px;

}


.document-content {

    flex: 1;

}


.document-content .eyebrow {

    font-size: 10px;

}


.document-content h2 {

    margin: 5px 0;

    color: var(--dark);

    font-size: 25px;

}


.document-content p {

    margin: 0;

    color: var(--text-light);

}


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

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    min-height: 48px;

    padding: 12px 22px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.button span {

    font-size: 20px;

    line-height: 1;

}


.button:hover {

    transform: translateY(-2px);

}


.button-dark {

    color: white;

    background: var(--dark);

}


.button-dark:hover {

    background: var(--green);

    box-shadow: 0 8px 20px rgba(21, 128, 61, .25);

}


/* =========================================================
   REGISTRATION
========================================================= */

.registration-section {

    padding: 80px 0;

    background: var(--dark);

}


.registration-card {

    display: grid;

    grid-template-columns:
        1fr
        280px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #14532d,
            #166534
        );

    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .25);

}


.registration-main {

    padding: 55px;

    color: white;

}


.eyebrow.light {

    color: #86efac;

}


.registration-main h2 {

    margin: 8px 0 15px;

    font-size: clamp(32px, 5vw, 48px);

    line-height: 1.1;

}


.registration-main p {

    max-width: 650px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, .85);

    font-size: 17px;

}


.button-light {

    color: var(--green-dark);

    background: white;

}


.button-light:hover {

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .2);

}


.deadline {

    padding: 40px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

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

}


.deadline > span {

    color: #bbf7d0;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.deadline strong {

    margin-top: 5px;

    font-size: 76px;

    line-height: 1;

}


.deadline b {

    font-size: 15px;

    letter-spacing: 2px;

}


.deadline p {

    margin: 20px 0 0;

    color: rgba(255, 255, 255, .75);

    font-size: 12px;

    line-height: 1.5;

}


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

.contact-section {

    background: white;

}


.contact-card {

    max-width: 700px;

    margin: auto;

    padding: 35px;

    display: flex;

    align-items: center;

    gap: 25px;

    border: 1px solid var(--border);

    border-radius: var(--radius);

}


.contact-icon {

    width: 60px;

    height: 60px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    color: var(--green);

    background: var(--green-light);

    border-radius: 14px;

    font-size: 28px;

}


.contact-card h3 {

    margin: 0;

    color: var(--dark);

    font-size: 21px;

}


.contact-card p {

    margin: 4px 0;

    color: var(--text-light);

}


.email {

    color: var(--green);

    font-weight: 700;

}


.email:hover {

    text-decoration: underline;

}


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

.site-footer {

    color: rgba(255, 255, 255, .7);

    background: #0b1220;

}


.footer-inner {

    max-width: var(--container);

    min-height: 130px;

    margin: auto;

    padding: 30px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.footer-brand img {

    width: 65px;

    height: auto;

    border-radius: 5px;

}


.footer-brand strong,
.footer-brand span {

    display: block;

}


.footer-brand strong {

    color: white;

}


.footer-brand span {

    font-size: 12px;

}


.footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

}


.footer-links a {

    font-size: 12px;

}


.footer-links a:hover {

    color: white;

}


.copyright {

    color: #6b7280;

    font-size: 11px;

}


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

@media (max-width: 900px) {

    .header-inner {

        flex-wrap: wrap;

    }


    .header-date {

        display: none;

    }


    .nav-inner {

        justify-content: flex-start;

        overflow-x: auto;

        white-space: nowrap;

    }


    .intro-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .dates-grid {

        grid-template-columns: 1fr;

    }


    .registration-card {

        grid-template-columns: 1fr;

    }


    .deadline {

        padding: 30px;

    }


    .footer-inner {

        flex-direction: column;

        align-items: flex-start;

    }

}


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

@media (max-width: 600px) {

    body {

        font-size: 15px;

    }


    .header-inner {

        min-height: auto;

        padding: 15px;

        gap: 15px;

    }


    .logo {

        width: 75px;

    }


    .brand-small {

        font-size: 8px;

        letter-spacing: 1px;

    }


    .brand h1 {

        font-size: 23px;

        letter-spacing: -.5px;

    }


    .brand p {

        font-size: 12px;

    }


    .nav-inner {

        padding: 0 10px;

    }


    .nav-inner a {

        padding: 12px 11px;

        font-size: 12px;

    }


    .nav-inner a::after {

        left: 8px;

        right: 8px;

    }


    .hero {

        width: calc(100% - 20px);

        margin-top: 15px;

    }


    .hero-image {

        min-height: 430px;

        border-radius: 16px;

    }


    .hero-image > img {

        height: 430px;

    }


    .hero-overlay {

        left: 25px;

        width: calc(100% - 50px);

    }


    .hero h2 {

        font-size: 39px;

    }


    .hero p {

        font-size: 15px;

    }


    .section {

        padding: 55px 0;

    }


    .section-container {

        width: calc(100% - 30px);

    }


    .section-heading {

        margin-bottom: 30px;

    }


    .intro-text .lead {

        font-size: 18px;

    }


    .info-card {

        padding: 25px;

    }


    .dates-section {

        padding: 55px 0;

    }


    .date-card {

        padding: 20px;

    }


    .date-number {

        font-size: 28px;

    }


    .document-card {

        flex-direction: column;

        align-items: flex-start;

        padding: 25px;

    }


    .document-content h2 {

        font-size: 22px;

    }


    .document-card .button {

        width: 100%;

    }


    .registration-section {

        padding: 55px 0;

    }


    .registration-main {

        padding: 35px 25px;

    }


    .registration-main h2 {

        font-size: 34px;

    }


    .registration-main p {

        font-size: 15px;

    }


    .registration-main .button {

        width: 100%;

    }


    .deadline strong {

        font-size: 65px;

    }


    .contact-card {

        padding: 25px;

        align-items: flex-start;

    }


    .footer-links {

        gap: 12px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible {

    outline: 3px solid #86efac;

    outline-offset: 3px;

}


@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    * {

        transition: none !important;

    }

}