@font-face {
    font-family: "Roboto Slab";
    src: url("/wp-content/themes/FacialCare/assets/fonts/Roboto_Slab/RobotoSlab.ttf")
        format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.testimonial-section {
    background: url("../FacialCare/assets/images/Homepage/Testimonial-BG.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonial-section .swiper {
    height: 577px;
}

.testimonial-name {
    color: #262626;
    text-align: center;
    font-family: "Poppins";
    font-size: 14px;
    font-style: italic;
    font-weight: 700;
    line-height: 18.12px;
    /* 129.429% */
}

.footer li a {
    color: #433833;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.footer h4 {
    color: #433833;

    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 150% */
}

.card-span {
    color: #f8faea;
    text-align: center;
    font-family: "Playfair Display";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    /* 109.375% */
}

.contact-section {
    background: url(../FacialCare/assets/images/Homepage/contact-bg.webp)
        no-repeat bottom;
    background-size: cover;
}

.hide-hoverable {
    top: 10px;
    border-top: 70px solid transparent;
}

.sub-child-links a,
.sub-items {
    color: #f8faea;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.link-titles {
    color: #f8faea;
    text-align: start;
    font-family: Poppins;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 85.714% */
}

.mega .panel {
    display: none;
}

.translate-right {
    --tw-translate-x: 25%;
}

.mega[data-active="essentials"] .panel[data-key="essentials"],
.mega[data-active="acne"] .panel[data-key="acne"],
.mega[data-active="tightening"] .panel[data-key="tightening"],
.mega[data-active="hairremoval"] .panel[data-key="hairremoval"],
.mega[data-active="lightening"] .panel[data-key="lightening"],
.mega[data-active="regenerating"] .panel[data-key="regenerating"],
.mega[data-active="sculpting"] .panel[data-key="sculpting"] {
    display: block;

    /* SHOW ANIMATION */
    animation: panelIn 0.22s ease-out both;
}

/* keyframes for the show */
@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* highlight the active tab (and still highlight on pure hover) */
.mega[data-active] ul li[data-key] {
    border-radius: 0.5rem;
}

.mega[data-active="essentials"] ul li[data-key="essentials"],
.mega[data-active="acne"] ul li[data-key="acne"],
.mega[data-active="tightening"] ul li[data-key="tightening"],
.mega[data-active="hairremoval"] ul li[data-key="hairremoval"],
.mega[data-active="lightening"] ul li[data-key="lightening"],
.mega[data-active="regenerating"] ul li[data-key="regenerating"],
.mega[data-active="sculpting"] ul li[data-key="sculpting"],
.mega ul li:hover {
    background: #5f6736;
    color: #fff;
}

li.treatments-link > .sub-menu {
    /* styles */
}

input[type="date"]:required:invalid::-webkit-datetime-edit,
input[type="time"]:required:invalid::-webkit-datetime-edit {
    color: rgba(255, 255, 255, 0.5);
    /* your placeholder color */
}

.ui-datepicker {
    margin-top: 20px;
    width: auto !important;
}

.wpcf7 select option {
    width: auto;
    color: #111827;
    /* force dark text so it’s readable on white popup */
}

.wpcf7-form-control-wrap,
.wpcf7-form-control {
    display: block !important;
    /* Make the container and input full-width blocks */
    width: 100% !important;
    /* Force them to fill their parent */
    min-width: 0 !important;
    /* THIS IS THE KEY: Allow the input to shrink */
    box-sizing: border-box !important;
    /* Include padding/border in the width */
}

section.first-banner {
    background-position: center top !important;
}

@media (max-width: 1024px) {
    section {
        padding: 70px 20px !important;
    }

    section.first-banner {
        background-image: url("https://facialcarecentre.innovnational.com/wp-content/uploads/2025/09/TABLET-PORTRAIT-WEB.png") !important;
    }
}

@media (max-width: 768px) {
    section {
        padding: 50px 20px !important;
    }
}

@media (max-width: 767px) {
    .customize-support .contact-section {
        /* background: url('../FacialCare/assets/images/Homepage/contact-bg.webp') no-repeat; */
        background-size: cover !important;
    }
}

@media (max-width: 630px) {
    section.first-banner {
        background-image: url("https://facialcarecentre.innovnational.com/wp-content/uploads/2025/09/MOBILE-WEB.png") !important;
    }
}

/* Footer Override */
.screen-reader-response {
    display: none;
}

span.wpcf7-not-valid-tip {
    display: none;
}

.wpcf7-response-output {
    @media (min-width: 1024px) {
        position: absolute;
    }
}

/* Footer Override - end */

/* Contact Section Override */
section.contact-section {
    @media (min-width: 768px) {
        max-height: 620px;
    }

    @media (max-width: 1024px) {
        max-height: 642px;
    }

    @media (max-width: 1023px) {
        max-height: 845px;
    }

    @media (max-width: 768px) {
        max-height: 825px;
    }

    @media (max-width: 767px) {
        max-height: 100%;
    }

    .wrapper {
        @media (min-width: 768px) {
            position: relative;
            top: -100px;
        }
    }

    input {
        &:focus {
            border: none;
            border-bottom: 2px solid #fff;
            outline: none;
        }
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #f8faea;
    caret-color: #f8faea;

    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* Contact Section Override - end */

/* Homepage Override */

section.home-our-treatments {
    .top-grid {
        @media (max-width: 767px) {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    .bottom-grid {
        @media (max-width: 767px) {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
}

/* Homepage Override - end */

/* Blogs Override */
.blogs-column {
    @media (max-width: 767px) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

ul.wp-block-list,
ol.wp-block-list {
    padding-inline-start: 0;
}

/* Blogs Override - end */

/* BGC Location Override */
section.location-gallery {
    &.bgc {
        .grid {
            div {
                &:nth-of-type(2) {
                    @media (min-width: 768px) {
                        grid-column: span 5 / span 5 !important;
                    }
                }
            }
        }
    }
}
/* BGC Location Override - end */