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

.hcg-hero-section {

    padding-top: 8px;
    padding-bottom: 40px;

    background:
        #ffffff;
}

.hcg-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(360px, .9fr);

    gap: 72px;

    align-items: start;
}


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

.hcg-hero-content {

    max-width:
        720px;

    padding-top:
        0px;
}

.hcg-hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        12px 22px;

    border:
        1px solid
        #e5e7eb;

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        #4b5563;

    font-size:
        13px;

    font-weight:
        500;

    margin-bottom:
        28px;
}

.hcg-hero-title {

    font-size:
        56px;

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        -0.03em;

    color:
        #0f172a;

    margin:
        0 0 24px;
}

.hcg-hero-description {

    font-size:
        19px;

    line-height:
        1.9;

    color:
        #475569;

    margin:
        0 0 36px;
}

.hcg-hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;
}


/* ==========================================================
   BUSINESS PANEL
========================================================== */

.hcg-hero-business-card {

    position:
        relative;

    background:
        linear-gradient(
            180deg,
            #0f172a 0%,
            #111827 100%
        );

    border-radius:
        26px;

    padding:
        42px;

    box-shadow:
        0 25px 60px
        rgba(15,23,42,.18);

    overflow:
        hidden;
}

.hcg-hero-business-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            #f97316,
            #fb923c
        );
}


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

.hcg-business-header {

    margin-bottom:
        18px;
}

.hcg-business-header span {

    display:
        inline-block;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        #fb923c;

    margin-bottom:
        12px;
}

.hcg-business-header h2 {

    font-size:
        38px;

    line-height:
        1.18;

    font-weight:
        700;

    color:
        #ffffff;

    margin:
        0;
}


/* ==========================================================
   BUSINESS ITEMS
========================================================== */

.hcg-business-item {

    padding:
        28px 0;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.hcg-business-item:first-of-type {

    border-top:
        none;
}

.hcg-business-item h3 {

    font-size:
        22px;

    line-height:
        1.35;

    font-weight:
        600;

    color:
        #ffffff;

    margin:
        0 0 12px;
}

.hcg-business-item p {

    font-size:
        16px;

    line-height:
        1.9;

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

    margin:
        0;
}


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

@media (max-width: 1199px) {

    .hcg-hero-grid {

        gap:
            48px;
    }

    .hcg-hero-title {

        font-size:
            48px;
    }
}

@media (max-width: 991px) {

    .hcg-hero-section {

        padding-top:
            32px;

        padding-bottom:
            48px;
    }

    .hcg-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            36px;
    }

    .hcg-hero-business-card {

        padding:
            32px;
    }

    .hcg-hero-title {

        font-size:
            42px;
    }
}

@media (max-width: 767px) {

    .hcg-hero-title {

        font-size:
            34px;

        line-height:
            1.15;
    }

    .hcg-hero-description {

        font-size:
            17px;
    }

    .hcg-business-header h2 {

        font-size:
            28px;
    }

    .hcg-business-item h3 {

        font-size:
            20px;
    }

    .hcg-hero-buttons {

        flex-direction:
            column;
    }

    .hcg-btn-primary,
    .hcg-btn-secondary {

        width:
            100%;
    }
}