/* 
 Theme Name:   expert-child
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     expert-finance-manager
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/

:root {
    --body-bg-color: #f8fafc;
    --body-bg-gradient1: #f8fafc;
    --body-bg-gradient2: #e2e8f0;
    --body-text-color: #1f2937;
    --heading-color: #0f172a;
    --hero-gradient1: #089bb2;
    --hero-gradient2: #1e3a8a;
    --footer-bg-color: #0f172a;
    --footer-bg-gradient1: #0f172a;
    --footer-bg-gradient2: #1f2937;
    --link-color: #089bb2;
    --link-text-color: #ffffff;
    --footer-link-color: #089bb2;
    --box-color: #089bb2;
    --box-text-color: #ffffff;
    --header-bg-color: #0f172a;
    --font-family: system-ui;
    --nav-link-color: #f1f5f9;
    --footer-text-color: #e2e8f0;
    --header-text-color: #ffffff;
}

@media screen and (min-width: 1920px) {
    .container {
        max-width: 1320px !important;
    }
}

@media screen and (min-width: 1700px) and (max-width: 1900px) {
    .container {
        max-width: 1320px !important;
    }
}

.breadcrumb-section h1,
h1 {
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2rem) !important;
}

h3 {
    font-size: clamp(1.4rem, 3vw, 1.7rem) !important;
}

.blog-area {
    padding: 0 !important;
    margin: 0 !important;
}

section {
    padding: 40px 0;
    scroll-margin-top: 70px;
}

h2,
h3 {
    color: var(--heading-color) !important;
    margin-bottom: 15px;
}

body p {
    margin-bottom: 0.5rem !important;
}

section {
    margin: 20px 0;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.main-section-style-accent-top {
    padding: 1.5rem;
    border-top: 4px solid var(--link-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--body-bg-color) 94%, var(--body-text-color));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}


.main-section-style-gradient {
    padding: 2rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hero-gradient1), var(--hero-gradient2));
    color: var(--header-text-color);
}

.main-section-style-gradient h2,
.main-section-style-gradient h3,
.main-section-style-gradient p,
.main-section-style-gradient li,
.main-section-style-gradient a {
    color: var(--header-text-color) !important;
}

.main-section-style-gradient a {
    text-decoration: underline !important;
}


.h3-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.h3-cards .box {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--body-text-color) 14%, transparent);
    border-top: 4px solid var(--link-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--body-bg-color) 94%, var(--body-text-color));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.h3-cards .box h3 {
    margin-top: 0;
}


.main-section-style-bordered {
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--body-text-color) 24%, transparent);
    border-left: 5px solid var(--link-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--body-bg-color) 94%, #ffffff);
}


.main-section-style-contrast {
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--box-color);
}

.main-section-style-contrast,
.main-section-style-contrast :is(h2, h3, h4, h5, h6, p, li, span, strong, em, td, th, a) {
    color: var(--box-text-color, #ffffff) !important;
}

.main-section-style-contrast a {
    text-decoration: underline !important;
}

.main-section-style-contrast a:hover {
    color: var(--box-text-color, #ffffff) !important;
    opacity: 0.8;
}



.main-section-style-h3-grid .main-section-h3-grid {
    margin-top: 1rem;
}

.main-section-style-h3-grid .box {
    height: 100%;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--box-text-color, #ffffff) 18%, transparent);
    background: var(--box-color);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.main-section-style-h3-grid .box,
.main-section-style-h3-grid .box :is(h2, h3, h4, h5, h6, p, li, span, strong, em, td, th, a) {
    color: var(--box-text-color, #ffffff) !important;
}

.main-section-style-h3-grid .box a {
    text-decoration: underline !important;
}

.main-section-style-h3-grid .box a:hover {
    color: var(--box-text-color, #ffffff) !important;
    opacity: 0.8;
}



.main-section-style-callout {
    padding: 1.25rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--link-color) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--link-color) 8%, var(--body-bg-color));
}

.main-header-top {
    background: #000;
}

.slider-area {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 !important;
    background-color: var(--hero-gradient2);
    background-image:
        radial-gradient(ellipse at 12% 18%,
            rgba(130, 240, 255, 0.32),
            transparent 42%),
        radial-gradient(ellipse at 88% 78%,
            rgba(190, 100, 255, 0.35),
            transparent 48%),
        radial-gradient(ellipse at 55% 110%,
            rgba(255, 130, 160, 0.22),
            transparent 50%),
        conic-gradient(from 215deg at 68% 42%,
            transparent 0deg,
            rgba(255, 255, 255, 0.12) 55deg,
            transparent 95deg,
            rgba(80, 160, 255, 0.18) 180deg,
            transparent 245deg,
            rgba(210, 160, 255, 0.14) 310deg,
            transparent 360deg),
        linear-gradient(125deg,
            var(--hero-gradient1) 0%,
            var(--hero-gradient2) 58%,
            var(--hero-gradient1) 100%);
}

/* Sculpted light ribbons */
.slider-area::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -55%;
    pointer-events: none;
    transform: rotate(-18deg) scaleY(0.75);
    background:
        repeating-radial-gradient(ellipse at 28% 58%,
            transparent 0 68px,
            rgba(180, 235, 255, 0.12) 69px,
            rgba(255, 255, 255, 0.25) 70px,
            transparent 72px 112px);
    mask-image: linear-gradient(115deg,
            transparent 15%,
            #000 38%,
            #000 62%,
            transparent 85%);
}

.slider-area::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(118deg,
            transparent 28%,
            rgba(160, 235, 255, 0.04) 38%,
            rgba(220, 245, 255, 0.20) 38.2%,
            transparent 38.5%),
        linear-gradient(118deg,
            transparent 58%,
            rgba(220, 170, 255, 0.12) 58.2%,
            transparent 70%),
        radial-gradient(circle,
            rgba(255, 255, 255, 0.14) 0.7px,
            transparent 1px);
    background-size: auto, auto, 7px 7px;
    mask-image: radial-gradient(ellipse at 75% 45%,
            #000,
            transparent 78%);
}

.about-banner-text {
    position: relative !important;
    transform: translateY(0) !important;
}

.breadcrumb-section:before {
    background: rgb(0 0 0 / 30%) !important;
}

section ul li {
    list-style-position: inside;
}

section ul li::marker {
    content: '▶ ';
}

.navbar-menubar .main-navigation .menu>li>a,
.navbar-menubar .page_item a {
    color: var(--body-bg-color) !important;
}

.navbar-menubar .page_item_has_children ul li a,
.main-navigation .menu .menu-item-has-children ul li a {
    color: var(--color-primary1) !important;
}


@media (max-width: 1000px) {
    .toggle-nav i {
        font-size: 30px;
        color: #fff !important;
    }
}

.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: .5em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}