/* 
 Theme Name:   ai-child
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     ai-automation
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/
:root {
    --body-bg-color: #000000;
    --body-bg-gradient1: #000000;
    --body-bg-gradient2: #e2e8f0;
    --body-text-color: #ffffff;
    --heading-color: #ffffff;
    --hero-gradient1: #6d10cd;
    --hero-gradient2: #4d98ea;
    --footer-bg-color: #0d0d0d;
    --footer-bg-gradient1: #0d0d0d;
    --footer-bg-gradient2: #1f2937;
    --link-color: #6d10cd;
    --box-color: #4d98ea;
    --box-text-color: #1a1a1a;
    --header-bg-color: #ffffff;
    --font-family: system-ui;
    --nav-link-color: #000000;
    --footer-text-color: #ffffff;
    --header-text-color: #ffffffff;
}

main,
.error404 {
    background: var(--body-bg-color) !important;
    color: var(--body-text-color) !important;
}


.header-img,
.single-page-img,
.external-div .box-image-page img,
.external-div {
    background-image: url("/images/hero-bg.webp") !important;
}

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


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

.main-section-style-h3-list .box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 2rem;
    border: 1px solid transparent;
    border-radius: 22px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.94),
            rgba(226, 232, 240, 0.88)) padding-box,
        linear-gradient(135deg,
            var(--hero-gradient1),
            var(--hero-gradient2),
            rgba(255, 255, 255, 0.5)) border-box;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(77, 152, 234, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);

    transform: perspective(900px) translateZ(0);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease;
}

.main-section-style-h3-list .box::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    right: -70px;
    width: 230px;
    height: 230px;
    border-radius: 46% 54% 63% 37% / 42% 45% 55% 58%;

    background:
        radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 0.8) 0 4%,
            transparent 5%),
        linear-gradient(135deg,
            var(--hero-gradient1),
            var(--hero-gradient2));

    opacity: 0.24;
    filter: blur(2px);
    transform: rotate(18deg);
    transition:
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.4s ease;
}

.main-section-style-h3-list .box::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24px;
    bottom: 22px;
    width: 90px;
    height: 90px;

    background:
        linear-gradient(90deg,
            rgba(109, 16, 205, 0.12) 1px,
            transparent 1px),
        linear-gradient(rgba(77, 152, 234, 0.12) 1px,
            transparent 1px);

    background-size: 14px 14px;
    border-radius: 14px;
    opacity: 0.8;
    transform: rotate(-8deg);
    mask-image: linear-gradient(135deg, transparent, #000);
    transition:
        transform 0.5s ease,
        opacity 0.4s ease;
}

.main-section-style-h3-list .box:hover {
    transform:
        perspective(900px) translateY(-8px) rotateX(1deg) rotateY(-1deg);

    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.4),
        0 14px 35px rgba(109, 16, 205, 0.2),
        0 8px 24px rgba(77, 152, 234, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.main-section-style-h3-list .box:hover::before {
    opacity: 0.34;
    transform: rotate(32deg) scale(1.12);
}

.main-section-style-h3-list .box:hover::after {
    opacity: 1;
    transform: rotate(0deg) translate(-4px, -4px);
}

.main-section-style-h3-list .box h3 {
    margin-bottom: 0.65rem;
}

.main-section-style-h3-list .box,
.main-section-style-h3-list .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-list .box a {
    text-decoration: underline !important;
}

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



.main-section-style-contrast {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 15%,
            color-mix(in srgb, var(--hero-gradient1) 85%, transparent) 0%,
            transparent 42%),
        radial-gradient(circle at 92% 85%,
            color-mix(in srgb, var(--hero-gradient2) 85%, transparent) 0%,
            transparent 45%),
        linear-gradient(135deg,
            var(--hero-gradient1) 0%,
            var(--box-color) 48%,
            var(--hero-gradient2) 100%);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    background-size: 140% 140%;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        background-position 0.6s ease;
}

.main-section-style-contrast::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -45%;
    right: -12%;
    width: 420px;
    aspect-ratio: 1;
    border-radius: 42% 58% 63% 37% / 46% 38% 62% 54%;

    background:
        conic-gradient(from 30deg,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent 35%,
            rgba(255, 255, 255, 0.12),
            transparent 72%);

    filter: blur(2px);
    transform: rotate(15deg);
    transition:
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.4s ease;
}

.main-section-style-contrast::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -80px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border-radius: 50%;

    background: color-mix(in srgb,
            var(--hero-gradient1) 70%,
            var(--hero-gradient2));

    opacity: 0.45;
    filter: blur(50px);
    transition:
        transform 0.7s ease,
        opacity 0.4s ease;
}

.main-section-style-contrast:hover {
    transform: translateY(-6px);
    background-position: 100% 50%;
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.48),
        0 12px 35px color-mix(in srgb,
            var(--hero-gradient1) 28%,
            transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.main-section-style-contrast:hover::before {
    transform: rotate(35deg) scale(1.12);
}

.main-section-style-contrast:hover::after {
    opacity: 0.65;
    transform: translate(35px, -20px) scale(1.15);
}

.main-section-style-contrast,
.main-section-style-contrast :is(h2, h3, h4, h5, h6, p, li, span, strong, em, td, th, a) {
    color: var(--body-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-bordered {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 2rem;
    border: 2px solid transparent;
    border-radius: 18px;

    background:
        linear-gradient(color-mix(in srgb, var(--body-bg-color) 94%, #ffffff),
            color-mix(in srgb, var(--body-bg-color) 94%, #ffffff)) padding-box,
        linear-gradient(135deg,
            var(--hero-gradient1) 0%,
            var(--hero-gradient2) 34%,
            rgba(255, 255, 255, 0.18) 34%,
            rgba(255, 255, 255, 0.18) 72%,
            var(--hero-gradient1) 72%,
            var(--hero-gradient2) 100%) border-box;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.main-section-style-bordered::before {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: -1;
    border-radius: 11px;
    pointer-events: none;

    background:
        linear-gradient(var(--hero-gradient1), var(--hero-gradient1)) top left / 55px 2px no-repeat,
        linear-gradient(var(--hero-gradient1), var(--hero-gradient1)) top left / 2px 55px no-repeat,
        linear-gradient(var(--hero-gradient2), var(--hero-gradient2)) bottom right / 55px 2px no-repeat,
        linear-gradient(var(--hero-gradient2), var(--hero-gradient2)) bottom right / 2px 55px no-repeat;

    opacity: 0.9;
    transition:
        inset 0.35s ease,
        opacity 0.35s ease;
}

.main-section-style-bordered::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: -90px;
    right: -90px;
    width: 210px;
    height: 210px;
    border-radius: 50%;

    background: radial-gradient(circle,
            color-mix(in srgb, var(--hero-gradient2) 28%, transparent),
            transparent 70%);

    filter: blur(8px);
    transition:
        transform 0.5s ease,
        opacity 0.35s ease;
}

.main-section-style-bordered:hover {
    transform: translateY(-4px);
    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.38),
        0 0 30px color-mix(in srgb,
            var(--hero-gradient1) 18%,
            transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.main-section-style-bordered:hover::before {
    inset: 6px;
    opacity: 1;
}

.main-section-style-bordered:hover::after {
    transform: translate(-25px, 25px) scale(1.2);
}


.site-info {
    background: var(--footer-bg-color) !important;
    color: var(--footer-text-color) !important;
    padding: 2.5rem 0 1.75rem;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--header-bg-color);
}

footer a {
    color: var(--link-color);
    text-decoration: none;
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

footer a:hover {
    color: var(--footer-text-color);
    opacity: 0.85;
}

.footer-divider {
    margin: 2rem 0 0;
    border-color: color-mix(in srgb, var(--link-color) 30%, transparent);
    opacity: 1;
}

footer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 100%;
    background: var(--link-color);
}

@media (min-width: 768px) {
    #footer .site-info p {
        text-align: right !important;
    }
}

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

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

.box-text {
    position: relative;
    bottom: 0;
    top: -50%;
    right: 0;
    left: 0;
    z-index: 99;
    text-align: center;
}

.box-text h1 {
    color: #fff;
    text-transform: capitalize;
    font-size: 40px;
    font-weight: 700;
}

@media screen and (max-width: 1000px) {
    .box-text {
        top: -60%;
        right: 0;
        left: 0;
    }
}

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;
}