/* ========================================
   CSS VARIABLES & ROOT STYLES
======================================== */
:root {
    /* Typography Variables */
    --fs-36: 36px;
    --fs-25: 25px;
    --fs-18: 18px;
    --fs-15: 15px;
    --lh-26: 26px;
    /* Color Variables */
    --c-000000: #000000;
    --c-5c85dd: #5c85dd;
    --c-333333: #333333;
    --c-ffffff: #ffffff;
    --c-666666: #666666;
    --c-efefef: #efefef;
    --c-b1b1b1: #b1b1b1;

    /* Font Weights */
    --fw-bold: 700;
    --fw-regular: 400;
    --fw-black: 900;

    /* Spacing */
    --spacing-section: 40px;
    --spacing-mobile: 30px;
    --spacing-small: 20px;
    --spacing-xs: 10px;
    --spacing-xxs: 5px;

    /* Border Radius */
    --radius-default: 10px;
    --radius-small: 5px;
}


body {
    font-family: "Lato";
    -webkit-font-smoothing: antialiased;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul:not(.accordian, :first-of-type) {
    margin-top: 30px;
}

ul:not(.accordian, .condition_grid ul) li {
    margin-bottom: 10px;
}

img:not(.floating_callback_con img) {
    display: block;
    width: 100%;
}

section:not(.main_bnr_sec, .sticky_footer) {
    padding: var(--spacing-section) 0;
}

a {
    text-decoration: none;
}


body[class] h3,
body[class] h5 {
    font-size: var(--fs-18);
    color: var(--c-333333);
    text-transform: capitalize;
    font-weight: var(--fw-regular);
    position: relative;
}

/* slick dots  */

.main_page_wrap .slick-dots li,
.main_page_wrap ul.slick-dots li.slick-active {
    background: none;
    border: none;
    border-radius: unset;

    & button {
        margin: 0;
        position: static;
        padding: 0;
        height: 9px;
        width: 9px;
        background: var(--c-ffffff);
        border-radius: 50%;
    }
}

.main_page_wrap ul.slick-dots li.slick-active button {
    background: var(--c-5c85dd);
}

/* slick dots end */

/* slick buttons  */

.main_page_wrap .slick-prev::before,
.main_page_wrap .slick-next::before {
    content: none;
}

body[class] div.main_page_wrap button.slick-next {
    background: url(https://www.shroffeyecentre.com/wp-content/themes/shroff/images/right-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain !important;
    width: 37px;
    height: 21px;
    display: inline-block;
    left: unset;
    right: 5%;
    top: unset;
    bottom: -90px;
}

section .slick-prev:not(.testimonials-slider .slick-prev):hover,
section .slick-prev:not(.testimonials-slider .slick-prev):focus {
    background: url(https://www.shroffeyecentre.com/wp-content/themes/shroff/images/left-arrow.svg);
    background-repeat: no-repeat;
    width: 37px;
    height: 21px;

}

section .slick-next:not(.testimonials-slider .slick-next),
section .slick-next:not(.testimonials-slider .slick-next):focus {
    background: url(https://www.shroffeyecentre.com/wp-content/themes/shroff/images/right-arrow.svg);
    background-repeat: no-repeat;
    height: 21px;
    width: 37px;
}


body[class] div.main_page_wrap button.slick-prev {
    background: url(https://www.shroffeyecentre.com/wp-content/themes/shroff/images/left-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain !important;
    width: 37px;
    height: 21px;
    display: inline-block;
    left: unset;
    right: 12%;
    top: unset;
    bottom: -90px;
}
.accordian li .accord_txt {
    padding: 0px 10px;
}

.patient_rev_sec .item_content .item_txt .item_title h3 {
    font-size: var(--fs-19);
    text-transform: capitalize;
    color: var(--c-333333);
    font-weight: 900;
}

/* slick buttons end */
.accordian li h2{
    position: relative;
}

.accordian li h3:after, .accordian li h2:after  {
    content: "+";
    font-size: 25px;
    line-height: 25px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.accordian li:has([style="display: block;"]) h3:after, .accordian li:has([style="display: block;"]) h2:after {  
    content: "-";
}

.accordian li h2 {
    padding: 14px 35px 14px 0;
}

.accord_txt {
    padding-bottom: var(--spacing-small);
}

/* body[class] .accordian li:last-child {
    border-bottom: none;
} */

.section_heading:not(.what_is_wrap .section_heading, .facilities_txt .section_heading) {
    margin-bottom: var(--spacing-section);
}

.section_heading h2,
.section_heading h1 {
    text-transform: uppercase;
    font-size: var(--fs-25);
    color: var(--c-333333);
    font-weight: var(--fw-black);
}

.what_is_wrap .section_heading h1 {
    color: var(--c-ffffff);
    text-align: center;
    margin-bottom: 30px;
    text-transform: capitalize;
    font-weight: 900;
    font-size: var(--fs-30);
}

.section_heading p {
    margin-top: var(--spacing-xxs);
}

body[class] .main_page_wrap p:not(header p, footer p, .reviews_content p, .cookie_section p, .custom_slider_container p, .section_heading p) {
    font-size: var(--fs-15);
    color: var(--c-333333);
    font-weight: var(--fw-regular);
    line-height: var(--lh-26);
}

.faq_sec .faqs_wrap .section_heading h2 {
    text-transform: capitalize;
}

p:not(header p, footer p, .reviews_content p, :last-child, .footerdesclaimer p, .footerdesclaimer1 p) {
    margin-bottom: var(--spacing-xs);
}

.difference_wrap .section_heading h2,
.testimonial_wrap .section_heading h2,
.media_wrap .section_heading h2,
.store_accord .section_heading h2,
.patient_rev_wrap .section_heading h2 {
    text-transform: uppercase;
}

.what_is_sec {
    background: #5c85dd;
}

.what_is_sec .container,
.facilities_txt .section_heading {
    max-width: 900px;
    margin: 0 auto;
}

body[class] .main_page_wrap section[class].what_is_sec *,
body[class] .main_page_wrap .facilities_bnr_bng div[class].facilities_txt * {
    color: var(--c-ffffff);
    text-align: center;
}

.common_condition_wrap .section_heading h2 {
    text-align: center;
    color: var(--c-5c85dd);
}

.condition_grid ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.condition_grid ul li a {
    display: flex;
    column-gap: 10px;
    align-items: center;
    background: var(--c-333333);
    padding: var(--spacing-small);
    position: relative;
}

.common_condition_sec .condition_grid ul li a:after {
    content: "";
    background: url(https://www.shroffeyecentre.com/wp-content/themes/shroff/images/down-arrow-store.svg);
    background-size: contain;
    height: 15px;
    width: 15px;
    position: absolute;
    right: 20px;
    transform: translateY(-50%) rotate(-90deg);
    top: 50%;
    filter: invert(1);
}

.common_condition_sec .condition_grid ul li .condition_name p {
    color: var(--c-ffffff);
    font-weight: 900;
    font-size: var(--fs-18);
    text-transform: capitalize;
    position: relative;
}

.common_condition_sec .condition_grid img {
    max-width: 40px;
    filter: invert(1) brightness(10);
}


.retina_care_grid {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.retina_care_grid:nth-child(odd) .retina_care_img {
    order: 2;
}

.retina_care_txt li:not(.accordian > li) {
    list-style: disc !important;
}


.retina_care_txt ul:not(.retina_care_txt .accordian) {
    margin-top: 30px;
    list-style: disc;
    padding-left: 20px;
}


body[class] .main_page_wrap section[class].facilities_sec * {
    color: var(--c-ffffff);
}

.facilities_bnr_bng {
    position: relative;
}

.facilities_txt {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: rgb(0 0 0 / 20%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1px;
    border-bottom: 1px solid var(--c-ffffff);
}

.buttons_wrap button {
    width: 100%;
    display: block;
    line-height: 52px;
    padding: 30px 10px;
    border: none;
    font-size: var(--fs-18);
}

.buttons_wrap button.active {
    background: var(--c-333333);
}

.facilities_tab_changer ul.accordian {
    background: var(--c-333333);
    padding: 2rem 5%;
}

.patient_rev_sec {
    background: var(--c-efefef);
}

.patient_grid_item img {
    border-radius: var(--radius-small);
}

.patient_grid:not(.slick-slider) {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    column-gap: 20px;
}

.patient_grid_item:not(.slick-slide) {
    min-width: calc(100% / 3.5);
}

body[class] .main_page_wrap .patient_rev_sec .patient_grid_item p {
    color: var(--c-666666);
}

.patient_grid_item.slick-slide {
    margin-right: 20px;
}

.faq_sec .accordian>li {
    border-top: 1px solid var(--c-000000);
}

section.faq_sec .accordian>li:last-child {
    border-bottom: 1px solid var(--c-000000);
}

section[class].testimonial_sec .testimonial_item .item_title p{
    color: var(--c-ffffff);
}

@media screen and (min-width: 767px) {
    .difference_sec div.difference_icons_grid .icons_item .txt_with_icon .icon_content p{
        text-transform: inherit !important;
    }

    .retina_care_txt li,
    .facilities_tab_changer .accordian li {
        pointer-events: none;
    }

    .retina_care_txt .accordianContent {
        display: block !important;
    }

    .retina_care_con {
        padding-inline: 10%;
    }

    .retina_care_txt li h2 {
        margin-bottom: 20px;
        font-weight: 900;
        font-size: var(--fs-30);
    }

    div.retina_care_txt h5:after, div.retina_care_txt h2:after {
        content: none;
    }

    .facilities_tab_changer ul.accordian li :where(.accordianContent, h5) {
        display: none;
    }


    .facilities_tab_changer ul.accordian li:first-child .accordianContent {
        display: block;
    }

    .patient_rev_sec .container {
        max-width: 95%;
        margin: 0 0 0 auto;
    }

}

@media screen and (max-width: 767px) {

    section[class]:not(.main_bnr_sec, .sticky_footer) {
        padding: var(--spacing-mobile) 0;
    }

    .section_heading:not(.what_is_wrap .section_heading, .facilities_txt .section_heading) {
        margin-bottom: var(--spacing-small);
    }

body[class] section.what_is_sec{
    padding: 15px;
}

    section[class].facilities_sec {
        padding: 0;
    }

    .main_bnr_sec{
        max-height: auto !important;
        min-height: auto !important;
    }

    .condition_grid ul,
    .retina_care_grid {
        grid-template-columns: auto;
        gap: 1px;
    }

    .condition_img,
    .retina_care_img,
    .desktop_tab_changer {
        display: none;
    }

    .retina_care_grid {
        border-bottom: 1px solid var(--c-ffffff);
    }

    section[class].retina_care_sec {
        background: var(--c-5c85dd);
        padding: 0;
    }

    body[class] .main_page_wrap section[class].retina_care_sec * {
        color: var(--c-ffffff);
    }

    .retina_care_sec .accordian li h2, .facilities_sec .accordian li h2 {
        padding-right: 0;
        font-size: var(--fs-18);
        text-transform: capitalize;
    }

    .retina_care_con {
        padding: 0 15px;
    }

    .facilities_tab_changer ul.accordian {
        padding: 0;
    }

   .facilities_inner img {
    aspect-ratio: unset !important;
}

    .facilities_tab_changer ul.accordian>li {
        width: 100vw;
        margin: 0 calc(-50vw + 50%);
        padding-inline: 15px;
    }

    .facilities_tab_changer ul.accordian>li:not(:last-child) {
        border-bottom: 1px solid var(--c-ffffff);
    }

    .facilities_txt .section_heading {
        padding: 0 15px;
    }

    .facilities_txt .section_heading p {
        margin-top: var(--spacing-small);
    }

    .facilities_txt .section_heading * {
        text-align: left !important;
    }

    .common_condition_sec .condition_grid ul li .condition_name p {
        font-weight: var(--fw-regular);
    }

    section.achievements_sec .cta_btn {
        display: none;
    }

    section.achievements_sec .achievements_grid {
        margin-bottom: 0;
    }

    .retina_care_grid .accord_txt p {
        margin-bottom: 10px;
    }
    .facilities_sec .accord_txt p:last-child {
        padding-bottom: 10px;
    }
}
.faq_accord ul.accordian li h3 {
    color: rgb(0, 0, 0);
    font-size: var(--fs-21);
    line-height: 52px;
    font-weight: 400;
    padding: 0;
}
.faq_accord ul.accordian li .accord_txt {
    padding-bottom: 25px;
}
.retina_care_grid .accordian li:last-child {
    border-bottom: none;
}