/* 
 Theme Name:   medicare-child
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     medicare-clinic
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/
:root {
    --color-primary1: #66b1ff !important;
    --color-primary2: #59c16a !important;
}


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

.right-sidebar h2 {
    position: relative;
    display: table;
    margin: 3rem auto 1.5rem;
    padding: 0.6rem 1.4rem;
    color: #fff;
    text-align: center;
    font-weight: 700;
    background: linear-gradient(135deg,
            var(--color-primary1),
            var(--color-primary2));
    border-radius: 0.5rem 0.5rem 1.5rem 0.5rem;
    box-shadow:
        5px 5px 0 color-mix(in srgb, var(--color-primary2) 25%, transparent);
}

.right-sidebar h2::after {
    content: "";
    position: absolute;
    right: 0.7rem;
    bottom: -0.45rem;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--color-primary2);
    border: 3px solid #fff;
    border-radius: 50%;
}

.right-sidebar img {
    box-shadow: 5px 5px 3px 1px #66b1ff, -5px -5px 3px 1px #59c16a;
    border-radius: 25px;
}

.right-sidebar h3 {
    position: relative;
    margin: 1.5rem 0 0.85rem;
    padding: 0.45rem 0.75rem 0.45rem 1rem;
    color: color-mix(in srgb, var(--color-primary1) 65%, #243447);
    font-weight: 600;
    line-height: 1.35;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--color-primary1) 10%, transparent),
            transparent 75%);
    border-left: 3px solid var(--color-primary2);
    border-radius: 0 0.4rem 0.4rem 0;
}

.right-sidebar h4 {
    font-style: italic;
    color: var(--color-primary2);

}

.main-navigation ul .current_page_item a,
.main-navigation ul .current_page_item a {
    color: #000 !important;
}

#footer,
.site-info {
    background: #000 !important;
}

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

@media (max-width: 1000px) {

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

    .headerbox {
        position: relative;
    }
}

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