/* ============================
   Base Hero Styles
   ============================ */
.hero {
    --bgColor: var(--color-bg-elevated);
    overflow: hidden;
}

.hero--fullscreen {
    background: var(--color-bg-elevated);
}

.hero__wrapper {
    background: rgba(37, 99, 235, 0.03);
    border-radius: 1.5rem;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .hero__wrapper {
        display: grid;
        grid-template-columns: 0.75fr 1fr;
    }
}

/* ============================
   Image Styles
   ============================ */
.hero__img {
    object-fit: cover;
    object-position: top left;
    width: 100%;
    border-radius: 0.28rem;
    box-shadow: var(--shadow-image);
}

.hero__img__wrapper {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 2rem;
}

.hero__img__wrapper--large {
    width: 100%; /* Changed from 140% to 100% for better scaling */
}

/* ============================
   Content Section
   ============================ */
.hero__content {
    text-align: left;
    padding-block: 4rem;
    padding-inline: 0.5rem;
}

@media (min-width: 768px) {
    .hero__content {
        padding-inline: 2rem;
    }
}

.hero__heading-text {
    color: #61749D;
    letter-spacing: -0.48px;
    line-height: 24px;
}

.hero__heading--highlight {
    color: var(--color-accent);
}

.hero__cta {
    margin-top: 2.375rem;
    width: fit-content;
}

.hero__body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    max-width: 33.8rem;
    margin-top: 2.375rem;
}

/* ============================
   Bullet Points
   ============================ */
.hero__bulletpoints li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #2563EB;
    line-height: 1.1rem;
    padding: 3px;
    list-style: none;
}


.hero__bulletpoints li img.icon-img {
    width: 20px;
    height: auto;
}

/* ============================
   Link Hover Effects
   ============================ */
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
a:hover {
    color: #0056b3;
    font-weight: 500;
}

/* ============================
   Fade Effect
   ============================ */
.fade-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fade-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 120%);
}

/* ============================
   Responsive Styles
   ============================ */
@media (min-width: 1024px) {
    .hero__wrapper {
        grid-template-columns: 0.75fr 1fr;
    }
}