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

 /* == Add your own styles below this line ==
--------------------------------------------*/
:root {
    --primary: #FF6B6B;
    --secondaty: #7C3AED;
    --third: #22D3EE;
}

.main-navigation a {
    text-decoration: none !important;
}

@media (max-width:1199px) {
    .main-navigation a {
        padding: 10px;
    }
}

body.custom-background,
#theme-sidebar section {
    background: #000 !important;
    color: #fff;
}

#theme-sidebar section {
    color: #fff !important;
}

#theme-sidebar a {
    color: var(--primary) !important;
}

#theme-sidebar section {
    box-shadow: 0 0 20px #cfcfcf;
}

#theme-sidebar section {
    border-top: 5px solid var(--secondaty);
    border-bottom: 5px solid var(--third);
}

.header-img,
.single-page-img,
.external-div .box-image-page img,
.external-div {
    background-image: url("/wp-content/themes/ai-child/img/hero-bg.jpg") !important;
}

.box-text h1 {
    color: #fff;
    text-transform: capitalize;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
}

.box-text {
    top: 50%;
    left: 20%;
    right: 20%;
}

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

    .header-img,
    .single-page-img,
    .external-div .box-image-page img,
    .external-div,
    .featured-image {
        height: 300px !important;
    }
}


.right-sidebar h2 {
    text-align: center;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 4rem;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
            rgba(124, 58, 237, 0.15),
            rgba(34, 211, 238, 0.15));
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 12px;
    box-shadow:
        0 0 15px rgba(255, 107, 107, 0.5),
        0 0 30px rgba(124, 58, 237, 0.4);
}

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

.home-btn {
    border-radius: 20px;
    padding: 10px 15px;
    background: var(--primary);
    color: #fff;
}