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

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: url("../images/hero.png");
    background-size: cover;
    background-position: center;

    color: #fff;
}


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

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 18, 25, 0.88) 0%,
            rgba(5, 18, 25, 0.68) 45%,
            rgba(5, 18, 25, 0.25) 100%
        );

    z-index: 1;
}


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

.hero-container {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 130px;
    padding-bottom: 100px;
}


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

.hero-content {
    max-width: 750px;
}


/* ==========================
   EYEBROW
========================== */

.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: #FFC107;

    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.eyebrow-line {
    width: 45px;
    height: 2px;

    background: #FFC107;
}


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

.hero-title {
    margin-bottom: 25px;

    font-size: clamp(1rem, 5vw, 5.5rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;
}

.hero-title span {
    display: block;

    background: linear-gradient(
        90deg,
        #FFC107,
        #ffffff
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* ==========================
   DESCRIPTION
========================== */

.hero-description {
    max-width: 650px;

    margin-bottom: 35px;

    font-size: 1.15rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.82);
}


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

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 16px 30px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: all 0.35s ease;
}


/* Primary Button */

.primary-btn {
    background: linear-gradient(
        135deg,
        #0D6EFD,
        #198754
    );

    color: #fff;

    box-shadow:
        0 15px 35px rgba(13, 110, 253, 0.28);
}

.primary-btn:hover {
    transform: translateY(-4px);

    color: #fff;

    box-shadow:
        0 20px 40px rgba(13, 110, 253, 0.4);
}


/* Secondary Button */

.secondary-btn {
    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.55);

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

    backdrop-filter: blur(10px);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.18);

    color: #fff;

    transform: translateY(-4px);
}


/* ==========================
   IMPACT CARD
========================== */

.hero-impact-card {
    position: absolute;

    right: 0;
    bottom: 100px;

    width: min(360px, 100%);

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.05)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid transparent;

    border-radius: 20px;

    background-clip: padding-box;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.2);
}


/* Gradient border effect */

.hero-impact-card::before {
    content: "";

    position: absolute;

    inset: -1px;

    z-index: -1;

    border-radius: inherit;

    background: linear-gradient(
        135deg,
        rgba(255, 193, 7, 0.8),
        rgba(13, 110, 253, 0.5),
        rgba(25, 135, 84, 0.5)
    );
}


/* Impact Icon */

.impact-icon {
    min-width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background: rgba(255, 193, 7, 0.16);

    color: #FFC107;

    font-size: 1.4rem;
}

.impact-content span {
    display: block;

    margin-bottom: 5px;

    color: #FFC107;

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.impact-content strong {
    font-size: 1rem;

    line-height: 1.5;

    color: #fff;
}


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

.scroll-indicator {
    position: absolute;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

    font-size: 0.8rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    animation: scrollBounce 2s infinite;
}

.scroll-indicator i {
    color: #FFC107;

    font-size: 1rem;
}


@keyframes scrollBounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(8px);
    }

}