.container, .main-wrap .container {
    max-width: 1700px;
}

.contentsection h2 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
}

/* Why Us
-----------------------------------------------*/
.why_us_section {
    padding: 50px 0;
    position: relative;
    background: url("../images/section-bg01-d.webp") no-repeat center center;
    background-size: cover;
    margin: 50px 0;
}
.why_us_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.why_us_content {
    padding: clamp(20px, 5vw, 80px);
    max-width: 1000px;
    background-color: #fff;
    border-radius: 0 20px 20px 0;
    transition: border-radius 0.2s ease-in-out;
}
.why_us_content h2 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
}

@media (max-width: 1500px) {
    .why_us_section {
        background: url("../images/section-bg01-l.webp") no-repeat center center;
        background-size: cover;
    }
}
@media (max-width: 1000px) {
    .why_us_content {
        border-radius: 0;
    }
    .why_us_section {
        background: url("../images/section-bg01-t.webp") no-repeat center center;
        background-size: cover;
    }
}
@media (max-width: 600px) {
    .why_us_section {
        background: url("../images/section-bg01-m.webp") no-repeat center center;
        background-size: cover;
    }
}

/* Showcase
-----------------------------------------------*/
.showcase-section {
    padding: 45px 0;
    text-align: center;
    position: relative;
}
.showcase-section .container {
    max-width: 1700px;
}
.showcase-slider {
    padding: 25px 30px 45px;
}
.show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #83a7ba;
    border-radius: 20px;
    max-height: 300px;
    max-width: 340px;
    width: 100%;
    margin: 15px auto;
    aspect-ratio: 5 / 4;
    padding: 10px;
}
.show-img img {
    transition: all 0.2s ease-in-out;
    transform: scale(1, 1);
}
.show:hover .show-img img {
    transform: scale(1.02, 1.02);
}
.show a {
    text-decoration: none;
    margin: 10px;
    display: block;
}
.show a:hover, .show a:focus {
    color: #000;
    text-decoration: none;
}
.show a:hover h4 {
    text-decoration: underline;
}
.show p {
    padding: 0 20px;
}
svg.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% - 30px);
    cursor: pointer;
    aspect-ratio: 5 / 8;
    max-width: 50px;
    width: clamp(20px, 5vw, 50px);
    height: auto;
}
svg.slick-arrow path {
    fill: #83A7BA;
}
svg.slick-arrow.next-arrow {
    right: unset;
    left: calc(100% - 30px);
}
.oral-surgery {
    max-width: 205px;
    width: 100%;
    max-height: 189px;
    height: 100%;
}
.extractions {
    max-width: 187px;
    width: 100%;
    max-height: 157px;
    height: 100%;
}
.digital-dentistry {
    max-width: 173px;
    width: 100%;
    max-height: 161px;
    height: 100%;
}
.veneers {
    max-width: 190px;
    width: 100%;
    max-height: 178px;
    height: 100%;
}
.root-canals {
    max-width: 138px;
    width: 100%;
    max-height: 196px;
    height: 100%;
}
.implants {
    max-width: 165px;
    width: 100%;
    max-height: 171px;
    height: 100%;
}

@media only screen and (max-width: 979px) {
    svg.slick-arrow {
        right: calc(100% - 40px);
    }
    svg.slick-arrow.next-arrow {
        right: unset;
        left: calc(100% - 40px);
    }
}

@media all and (max-width: 600px) {
    svg.slick-arrow {
        top: 45%;
        max-width: 35px;
        right: calc(100% - 24px);
    }
    svg.slick-arrow.next-arrow {
        left: calc(100% - 24px);
    }

    .oral-surgery {
        max-width: 205px;
        width: 100%;
        max-height: 189px;
        height: 100%;
    }
    .extractions {
        max-width: 187px;
        width: 100%;
        max-height: 157px;
        height: 100%;
    }
    .digital-dentistry {
        max-width: 173px;
        width: 100%;
        max-height: 161px;
        height: 100%;
    }
    .veneers {
        max-width: 190px;
        width: 100%;
        max-height: 178px;
        height: 100%;
    }
    .root-canals {
        max-width: 138px;
        width: 100%;
        max-height: 196px;
        height: 100%;
    }
    .implants {
        max-width: 165px;
        width: 100%;
        max-height: 171px;
    }
}

/* FAQ
-----------------------------------------------*/
.faq_section {
    padding: 50px 0;
    background-color: #83a7ba;
    background-image: url(/wp-content/themes/charlie-child/css/../images/family-bg.webp);
    position: relative;
}
.faq_section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.faq_opener {
    max-width: 700px;
    z-index: 1;
}
.faq_opener h2 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
}
.faq_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 1;
}
.faq_card {
    padding: 30px 40px;
    background-color: #bfced6;
    border-radius: 20px;
    max-width: 1000px;
    width: 100%;
}
.faq_card h3 {
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.2;
    margin-bottom: 10px;
}
.faq_card p {
    margin: 0;
}

@media (min-width: 1501px) {
    .faq_section .container {
        flex-direction: row;
    }
    .faq_section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        height: 120px;
    }
    .faq_section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        height: 120px;
    }
}

/* CTA
-----------------------------------------------*/
.cta_section {
    padding: 50px 0;
    position: relative;
    background: url("../images/section-bg02-d.webp") no-repeat center center;
    background-size: cover;
    margin: 80px 0;
}
.cta_wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.cta_content {
    padding: clamp(20px, 5vw, 100px);
    max-width: 1000px;
    background-color: #fff;
    border-radius: 20px 0 0 20px;
    transition: border-radius 0.2s ease-in-out;
}
.cta_content h2 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
}

@media (max-width: 1500px) {
    .cta_section {
        background: url("../images/section-bg02-l.webp") no-repeat center center;
        background-size: cover;
    }
}
@media (max-width: 1000px) {
    .cta_content {
        border-radius: 0;
    }
    .cta_section {
        background: url("../images/section-bg02-t.webp") no-repeat center center;
        background-size: cover;
    }
}
@media (max-width: 600px) {
    .cta_section {
        background: url("../images/section-bg02-m.webp") no-repeat center center;
        background-size: cover;
    }
}