/*
Theme Name: click5 Interactive Theme
Theme URI: https://www.click5.com/
Author: click5 Interactive
Author URI: https://www.click5.com/
Description: click5 Interactive WordPress Theme
Version: 3.0.16
*/

:root {
    --container-sm: 600px;
    --container-md: 900px;
    --container: 1000px;
    --container-lg: 1190px;
    --container-xl: 1250px;
    --container-xxl: 2000px;
    --grid-row: calc(1000px / 10);
    --grid-margin: minmax(5%, 1fr);
    --gap-sm: 10px;
    --gap-md: 10px;
    --gap-lg: 10px;
    --gap: 10px;
    --gap-xl: 50px;
    --font-body: "basis_grotesque_arabic_proMd", sans-serif;
    --font-head: "scale-variable", sans-serif;
    --color-primary: #DCF6CD;
    --color-secondary: #DBEAF5;
    --color1: #F7F7F7;
    --color2: #F1F1F1;
    --color3: #D4EAF3;
    --color4: #E9F4F8;
    --color5: #A1A7A9;
    --color6: #DCF6CD;
    --color7: #4E5A5F;
    --color8: #576266;
    --color-body: #333333;
    --color-head: #445054;
    --color-light: #ffffff;
    --color-dark: #000000;
    --color-border: #E3E3E3;
    --box-shadow: 0 4px 16px 6px rgba(224, 224, 224, 0.40);
    --box-shadow-hover: 0 10px 35px rgba(0, 0, 0, 0.15);
    --transition: 0.3s linear;
    --border-radius: 4px;
    --border-radius1: 14px;
    --border-radius2: 20px;
    --border-radius3: 30px;
    --border-radius4: 26px;
    --head-weight-light: 300;
    --head-weight: 400;
    --head-weight-medium: 500;
    --body-weight: 400;
    --body-weight-medium: 500;
    --body-weight-strong: 700;
    --ps-fs: 16px;
    --ps-fs1: 14px;
    --ps-lh: 1.4;

    --h1-fs: clamp(28px, calc((40 / 1440) * 100vw), 40px);
    --h2-fs: clamp(24px, calc((32 / 1440) * 100vw), 32px);
    --h3-fs: clamp(24px, calc((28 / 1440) * 100vw), 28px);
    --h4-fs: clamp(24px, calc((28 / 1440) * 100vw), 28px);
    --h5-fs: clamp(18px, calc((24 / 1440) * 100vw), 24px);
    --h6-fs: clamp(16px, calc((20 / 1440) * 100vw), 20px);
    /* minus: calc(-1 * clamp(200px, calc(400 / 1600 * 100vw), 400px)); */
}

/* CONTACT SEC 1 */
.contact-sec1 {
    padding-bottom: 0;
}
.contact-sec1__box {
    height: 100%;
    padding: clamp(32px, calc((65 / 1440) * 100vw), 65px) clamp(30px, calc((61 / 1440) * 100vw), 61px) clamp(25px, calc((50 / 1440) * 100vw), 50px);
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
}
.contact-sec1__sub-icon {
    min-width: clamp(70px, calc((83 / 1440) * 100vw), 83px);
}
.contact-sec1__sub-icon img {
    height: clamp(45px, calc((56 / 1440) * 100vw), 56px);
}
.contact-sec1__sub-get {
    line-height: var(--ps-fs);
}

/* CONTACT SEC 2 */
.contact-sec2__form {
    padding: 50px 5%;
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    box-shadow: var(--box-shadow);
}

/* CONTACT MAP */
.contact-map iframe {
    height: 400px;
    margin-bottom: -9px;
    filter: grayscale(100%);
}

/* FAQ */
#faq-wrapper, #hero-accordion {
    position: relative;
}
#faq-wrapper .accordion-item, #hero-accordion .accordion-item {
    position: relative;
}
#faq-wrapper .accordion-item::after, #hero-accordion .accordion-item::after {
    content: "";
    position: absolute;
    /* bottom: 0; */
    right: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #4450544D;
}
#faq-wrapper .accordion-header h3, #hero-accordion .accordion-header h3 {
    position: relative;
    padding: 20px 30px 20px 0;
    margin: 0;
    font-size: var(--h6-fs);
    cursor: pointer;
    transition: var(--transition);
}
#faq-wrapper .accordion-header h3::before, #hero-accordion .accordion-header h3::before {
    content: "\2b";
    position: absolute;
    top: 50%;
    right: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    color: var(--color-head);
    transform: translateY(-50%);
}
#faq-wrapper .accordion-header h3[aria-expanded="true"]::before, #hero-accordion .accordion-header h3[aria-expanded="true"]::before {
    content: "\f068";
}
/* #faq-wrapper .accordion-body .entry-content {
    padding: 0 0 20px 0;
} */
#faq-wrapper .accordion-body p:last-of-type, #hero-accordion .accordion-body p:last-of-type {
    margin-bottom: 0;
}





/* SLIDER */
/* .slider-wrap,
.slider-row,
.slick-list,
.slick-track {
  height: 100%;
} */

.slider-wrap {
    overflow: hidden;
}
.slick-slide > * {
  flex: 1;
}
.slick-track {
    display: flex;
    gap: 25px;
}
.slick-track::before {
    display: none;
}
.slick-slide {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    padding: clamp(15px, calc((30 / 1440) * 100vw), 30px);
    background-color: var(--color-light);
    border-radius: var(--border-radius2);
}
.slider-progress {
    display: flex;
    max-width: var(--container-lg);
    margin-top: 30px;
    padding: 0;
}
.slider-progress__segment {
    flex: 1;
    height: 4px;
    background: var(--color-light);
    cursor: pointer;
    transition: .2s;
}
.slider-progress__segment:hover,
.slider-progress__segment.slider-active {
    background: var(--color-head);
}
.slider-progress__segment:hover {
    opacity: 0.5;
}



/* REVIEW */
.reviews__h span {
    font-weight: 200;
}
.review-single {
    height: inherit !important;
}
.page-template-reviews .review-single:not(:last-of-type) {
    padding-bottom: 40px;
}

.review__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-top: clamp(17px, calc((35 / 1440) * 100vw), 35px);
}
.review__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 20px;
    background-image: url('data:image/svg+xml,<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.58964 20H0V11.2775L8.67729 0L10.4303 1.32158L5.17131 11.2775H8.58964V20ZM20.1594 20H11.5697V11.2775L20.247 0L22 1.32158L16.741 11.2775H20.1594V20Z" fill="%23445054"/></svg>');
}
.review__opinion {
    font-size: clamp(16px, calc((20 / 1440) * 100vw), 20px);
    margin-bottom: 30px;
}
.page-template-reviews .review__opinion {
    margin-bottom: 15px;
}
.review__customer {
    margin-bottom: 0;
    font-weight: var(--head-weight);
}
.review__info {
    font-size: 12px;
    margin-bottom: 0;
}
.review__img {
    width: clamp(35px, calc((45 / 1440) * 100vw), 45px);
}
.review__img img {
    width: clamp(25px, calc((35 / 1440) * 100vw), 35px);
    height: auto;
}
/* REVIEW SINGLE */
.review-single .review:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: clamp(17px, calc((35 / 1440) * 100vw), 35px);
}

/* REVIEW SLIDER */
.review-slider__col {
    grid-column: 2/-1;
}
.review-slider .review {
    height: inherit;
    padding: 0 clamp(10px, calc((15 / 1440) * 100vw), 15px);
}

/* REVIEWS */
.reviews {
    background-color: var(--color-secondary);
}

/* HERO */

.hero .hero__h {
    padding: 0;
    margin: 0;
}
.hero .hero__p {
    color: #333;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.16px;
    padding: 10px 0 40px 0;
    margin: 0;
}



/* HERO SUB */

#hero-sub .row-reverse {
    flex-direction: row-reverse;
}

#hero-sub .content {
    padding-top: 10px;
}
#hero-sub #faq-wrapper {
    padding-top: 25px;
}
#hero-sub .content .button {
    margin-top: 40px;
}

#hero-sub .details span {
    display: block;
    font-size: 16px;
    font-weight: 400;
     font-family: var(--font-head);
    padding-top: 15px;
}
#hero-sub .details > * {
    margin-bottom: 0;
}

#hero-sub .open {
    padding: 15px 10px;
    margin-top: 35px;
    border-top: 1px solid #4E5A5F4D;
    border-bottom: 1px solid #4E5A5F4D;
}
#hero-sub .open .h5s {
    font-weight: 300;
}

#hero-sub .photo {
    padding-left: 35px;
}
#hero-sub .row-reverse .photo {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: 35px;
}
#hero-sub .photo > div {
    display: block;
    width: 100%;
    height: 500px;
    background-color: #d3d3d3;
    background-size: cover;
    background-position: center;
    border: 6px solid #FFF;
    border-radius: 30px;
}
#hero-sub .button3 {
    margin-left: 15px;
}
.check-boxes .box {
    height: 100%;
    padding: 40px 50px;
    background-color: #F7F7F7;
    border-radius: 30px;
}
.check-boxes .checklist > ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}
.check-boxes .checklist > ul > li {
    position: relative;
    padding: 0;
    margin-top: 12px;
}
.check-boxes .checklist > ul > li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 18px;
    position: relative;
    top: 1px;
    padding-right: 12px;
}
.check-boxes .checklist > ul > li > ul {
    padding-top: 8px;
    padding-left: 60px;
}
.check-boxes .bottom-content {
    margin-top: 75px;
}
.check-boxes .bottom-content > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.check-boxes .bottom-content h3 {
    margin-bottom: 0;
    font-weight: 300;
}
.check-boxes .bottom-content a {
    margin: 0 25px;
}

.checklist ul ul {
    list-style: disc;
}
.insurances .dentistry-single {
    height: inherit !important;
    padding: 0;
}
.insurances .dentistry-single .image img {
    max-height: 55px;
    object-fit: contain;
    filter: grayscale(1);
}
.insurances .slick-arrow,
.insurances .slider-progress {
    display: none !important;
}

.bg-blue {
    background-color: #DBEAF5 !important;
}

.first-visit .photo > div {
    display: block;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    border: 6px solid #FFF;
    border-radius: 30px;
}
.first-visit .button {
    color: #FFF;
    background-color: var(--color-head);
}
/* .questions .head p a {
    text-decoration: underline;
} */
.questions .accordion-item:first-child {
    margin-top: -20px;
}

.services-wrapper .service {
    margin-bottom: 0;
}
.services-wrapper .service:not(:first-of-type) {
    padding-top: 40px;
}
.services-wrapper .service:nth-child(even) .box {
    flex-direction: row-reverse;
}
.services-wrapper .box {
    display: flex;
    padding: 6px;
    background-color: #FFF;
    border-radius: 30px;
}
.services-wrapper .content {
    width: calc(100% - 440px);
    padding: 40px 60px 40px 50px;
}
.services-wrapper .content .title {
    padding-top: 25px;
}
.services-wrapper .content .buttons {
    padding-top: 20px;
}
.services-wrapper .content .button {
    color: #FFF;
    background-color: var(--color-head);
}
.services-wrapper .content .button:hover {
    opacity: 0.8;
}
.services-wrapper .content .link {
    margin-left: 25px;
}
.services-wrapper .content img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}
.services-wrapper .content .link::before, .questions .link::before, .logo-slider .link::before, .insurances .head .link::before {
    transform: scaleX(1);
}
.services-wrapper .content .link:hover::before, .questions .link:hover::before, .logo-slider .link:hover::before, .insurances .head .link:hover::before {
    transform: scaleX(0);
}
.services-wrapper .photo > div {
    width: 440px;
    height: 500px;
    background-color: #D3D3D3;
    background-size: cover;
    background-position: center;
    border-radius: 26px;
}




.two-photos .photo > div {
    width: 100%;
    height: 260px;
    background-color: #d3d3d3;
    background-size: cover;
    background-position: center;
    border: 6px solid #FFF;
    border-radius: 30px;;
    background-position: top center;
}

.people-single {
    display: block !important;
    height: inherit !important;
    background-color: transparent;
    border-radius: unset;
    padding: 0;
}
.people-single .photo {
    display: block;
    width: 100%;
    height: 380px;
    background-color: #d3d3d3;
    background-size: cover;
    background-position: center;
    border: 6px solid #FFF;
    border-radius: 30px;
}
.people-single .content {
    padding-top: 30px;
}

.people-slider {
    max-width: 1250px;
    margin: 0 auto;
}
.people-slider .slider-progress {
    max-width: 1250px;
}
.people-single .photo {
    height: 280px;
    background-position: 50% 25%;
}


.grey-boxes .item .box {
    height: 100%;
    padding: 40px 30px;
    background-color: #F1F1F1;
    border-radius: 20px;
}

.careers-open .item .box {
    padding: 40px 100px;
    background-color: #FFF;
    border-radius: 30px;
}
.careers-open .item .open {
    padding: 15px 0;
    border-bottom: 1px solid #33333366;
}
.careers-open .item .open:last-of-type {
    border-bottom-color: transparent;
}
.careers-open .item .open p.dept, 
.careers-open .item .open p.location {
    font-size: 14px;
    margin-bottom: 0;
}
.careers-open .item .open p.dept {
    padding-right: 30px;
}

.join-banner {
    margin-top: 20px;
}
.join-banner .row {
    background-color: #DBEAF5;
    border-radius: 30px;
}

.team .item .photo {
    width: 100%;
    height: 380px;
    margin-bottom: 20px;
    background-color: #E5E4E9;
    /* background-size: 120% auto;
    background-position: top -45px center; */
    background-size: cover;
    background-position: top center;
    border-radius: 30px;
}
.team .item .photo.photo-2 {
    display: none;
}
.team .item:hover .photo:not(.photo-2) {
    display: none;
}
.team .item:hover .photo.photo-2 {
    display: block;
}
.team .button {
    cursor: pointer;
}

.insurances .item {
    width: 20%;
    /* padding-top: 15px; */
}
.insurances .box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 125px;
    padding: 0 15px;
    padding: 20px;
    background-color: rgba(225, 225, 225, 0.5);
    border-radius: 20px;
}
.insurances .box img {
    min-height: 25px;
    max-height: 55px;
    width: 90%;
    margin: 0 auto;
    object-fit: contain;
    opacity: 0.5;
}


.insurances .item p {
    font-size: 14px;
    padding-top: 8px;
    margin-bottom: 0;
}

.credit:nth-child(even) .row {
    flex-direction: row-reverse;
}
.credit .photo > div {
    display: block;
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: top center;
    border: 6px solid #F1F1F1;
    border-radius: 20px;
}
.credit .content {
    padding-left: 35px;
}
.credit .content ul {
    columns: 2;
}
.credit .content .check-boxes .checklist > ul > li {
    margin-top: 0;
    margin-bottom: 12px;
}

.contact .form {
    padding: 50px 100px;
    background-color: #FFF;
    border-radius: 30px;
}

.location-box .row {
    margin-top: 30px;
    background-color: #FFF;
    border-radius: 30px;
    border: 6px solid #FFF;
}
.location-box .list {
    width: 55%;
    padding: 45px;
}
.location-box .list > h3 {
    display: block;
    font-weight: 300;
    padding: 0 15px 15px 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #4E5A5F4D;
}
.location-box .list .item a.loc-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 35px 6px 15px;
    border-radius: 30px;
    width: 100%;
}
.location-box .list .item a.link {
    display: inline-block;
    text-align: left;
    margin-left: 15px;
    font-weight: bold;
    margin-bottom: 10px;
	color: var(--color-light);
    background-color: var(--color-head);
    border: 1px solid transparent;
    border-radius: var(--border-radius3);
    padding: 2px 8px 2px 8px;
}
.location-box .list .item a.loc-item:hover {
    background-color: #F1F1F1;
    color: var(--color-dark);
}
.location-box .list .item a.loc-item::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    right: 15px;
}
.location-box .list .item p {
    margin-bottom: 0;
}
.location-box .list .item address {
    position: relative;
    top: 1px;
    font-size: 14px;
    margin-bottom: 0;
}
.location-box .map {
    width: 45%;
    height: 440px;
    background-color: #eee;
    border-radius: 30px;
}
.location-box .map > div {
    height: 100%;
    border-radius: 30px;
}

.back-location a {
    font-weight: 500;
}
.back-location a:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.back-location a i {
    font-size: 14px;
    padding-right: 6px;
}