body {
    color: #0C132D !important;
}

/* We set background image dynamically. It is received from the Model. */
/*The header-image class is used in the header tag that encompasses this layout. Check _Layout.cshtml */
.header-image {
    background-image: conic-gradient(from 184deg at 58.65% 53.66%, rgba(255, 245, 202, 0.50) 44.18593615293503deg, rgba(251, 239, 202, 0.50) 89.49537456035614deg, rgba(125, 183, 247, 0.50) 109.84687685966492deg, rgba(242, 233, 194, 0.50) 151.53160214424133deg, rgba(254, 174, 165, 0.50) 227.83552408218384deg, rgba(254, 169, 162, 0.50) 311.44864797592163deg);
}

.hero-background {
    backdrop-filter: blur(150px);
}

.intro-layout {
    padding-top: calc(2.375rem + 13.5vw);
    padding-bottom: calc(1.75rem + 6vw);
    /*gap: calc(1.5rem + 3vw);*/
}

.bg-blue-gradient {
    background: linear-gradient(145deg, rgba(191, 214, 250, 0.00) -37.55%, #BFD6FA 75.18%);
}

.bg-yellow-gradient {
    background: var(--gradient-yelloow, linear-gradient(107deg, #FFF9ED -8.01%, #FFEDC9 76.27%));
}

.bg-green-heavy-gradient {
    background: linear-gradient(169deg, #B9EBC0 7.15%, #B9EBC0 139.94%);
}

.bg-green-light-gradient {
    background: linear-gradient(145deg, rgba(232, 248, 234, 0.00) -37.55%, #B9EBC0 75.18%);
}

@media (min-width: 1200px) {
    .intro-layout {
        padding-top: 12.5rem;
    }
}

@media (min-width: 1200px) {
    .intro-layout {
        padding-bottom: 6.25rem;
    }
}

@media (min-width: 1200px) {
    .intro-layout {
        gap: 3.75rem;
    }
}