/* Crescent Opticals - Mobile Responsive */

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        max-width: 100%;
    }

    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto;
    }
}

@media (max-width: 767px) {
    .vc_row.grid_section .section_inner,
    .vc_row.grid_section .section_inner_margin {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    .vc_row.grid_section .vc_col-sm-12,
    .vc_row.grid_section .vc_col-md-10,
    .vc_row.grid_section .vc_col-lg-8 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .vc_row.grid_section h1 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    .logo_wrapper img.normal,
    .logo_wrapper img.light {
        max-width: 130px !important;
        height: auto !important;
        margin-left: 25px !important;
    }
}

@media (max-width: 767px) {
    .logo_wrapper .q_logo {
        left: -35px !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .logo_wrapper .q_logo img.mobile,
    .logo_wrapper .q_logo img.normal {
        left: -35px !important;
    }
}

@media (max-width: 767px) {
    .wpb_text_column h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .wpb_text_column p {
        font-size: 50px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    div[style*="max-width:500px"] h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 10px !important;
        padding: 0 !important;
        text-align: center !important;
        word-break: break-word !important;
    }
}
@media (max-width: 767px) {
    .appointment-intro {
        font-size: 15px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 767px) {
    .wpb_text_column p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        padding: 0 5px !important;
        margin: 0 auto !important;
    }
}
@media only screen and (max-width: 767px) {
    .wpb_text_column p {
        font-size: 15px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 2px !important;
    }
}
@media only screen and (max-width: 767px) {
    .footer_top .four_columns .column1,
    .footer_top .four_columns .column2 {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
@media only screen and (max-width: 767px) {
    .footer_top .four_columns .column1,
    .footer_top .four_columns .column2,
    .footer_top .four_columns .column1 .column_inner,
    .footer_top .four_columns .column2 .column_inner {
        display: contents !important;
    }

    .footer_top .four_columns .column1 ul,
    .footer_top .four_columns .column2 ul {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}
@media only screen and (max-width: 767px) {
    .footer_top .four_columns .column1 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer_top .four_columns .column2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
@media only screen and (max-width: 767px) {
    .footer_top .column2.footer_col2 {
        position: relative !important;
        top: -40px !important;
    }
}
@media only screen and (max-width: 767px) {
    .footer_top .four_columns .column1.footer_col1,
    .footer_top .four_columns .column2.footer_col2 {
        float: left !important;
        width: 100% !important;
        clear: none !important;
        display: block !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
@media only screen and (max-width: 1000px) {
    .footer_top,
    footer .footer_top {
        padding: 30px 0 20px !important;
    }
}
@media only screen and (max-width: 767px) {
    .mobile-hours-second {
    transform: translateY(-28px) !important;
}

.mobile-hours-second .footer-fonts p {
    font-size: 16px !important;
    white-space: nowrap !important;
}
}
@media only screen and (max-width: 767px) {
    .wpb_text_column p strong {
        font-size: 18px !important;
    }
}
@media only screen and (max-width: 767px) {
    /* #google-embed - contain within viewport, no overflow hack */
    #google-embed {
        width: 100% !important;
        margin-left: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}
@media only screen and (max-width: 767px) {
    .wpb_text_column p strong {
        font-size: 17px !important;
        color: #000000 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}
@media only screen and (max-width: 767px) {
    img[src*="Crescent-cover"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        margin-bottom: 0 !important;
        object-fit: cover !important;
    }
}
@media only screen and (max-width: 767px) {
    .q_elements_holder_custom_609649 .wpb_text_column h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .q_elements_holder_custom_609649 .wpb_text_column p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    padding: 0 15px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    transform: none !important;
    white-space: normal !important;
    }
}
@media only screen and (max-width: 767px) {
    .q_elements_item_content.q_elements_holder_custom_609649 {
        padding: 0 10% !important;
    }
}
@media only screen and (max-width: 767px) {
    .q_elements_holder_custom_609649 .wpb_text_column p {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        text-align: center !important;
    }
}
@media only screen and (max-width: 767px) {
    .q_elements_holder_custom_609649 {
        vertical-align: top !important;
    }
}
@media only screen and (max-width: 767px) {
    .q_elements_holder_custom_609649 {
        transform: none !important;
        overflow: visible !important;
    }
}
@media only screen and (max-width: 767px) {
    .q_elements_holder_custom_609649 .wpb_text_column p {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* =============================================================
   CONTACT PAGE — Responsive (contact/index.html only)
   Desktop (1025px+) is untouched. Only tablet and mobile below.
   ============================================================= */

/* ----------------------------------------------------------
   TABLET  768px – 1024px
   ---------------------------------------------------------- */
@media only screen and (min-width: 600px) and (max-width: 1024px),
       only screen and (min-width: 1025px) and (pointer: coarse) {

    /* Contain grid sections */
    .vc_row.grid_section .section_inner,
    .vc_row.grid_section .section_inner_margin {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Google Maps iframe — keep aspect height, fill width */
    .wpb_map_wraper {
        width: 100% !important;
        overflow: hidden !important;
    }
    .wpb_map_wraper iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: 350px !important;
        box-sizing: border-box !important;
    }

    /* Appointment form container */
    div[style*="max-width:500px"] {
        width: 90% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* #google-embed section — scale store image, reset transforms */
    #google-embed img[src*="Crescent-cover"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 350px !important;
        object-fit: cover !important;
        display: block !important;
        transform: none !important;
    }
    .q_elements_item_content.q_elements_holder_custom_609649 {
        padding: 30px 8% !important;
    }
    .q_elements_holder_custom_609649 {
        transform: none !important;
    }

    /* ========================================================
       Crescent Opticals Home Page Typography Corrections (Tablet Only)
       ======================================================== */

    /* 1. “See the world in style” - Visibly bold, preserve black and maroon colors */
    body.home #slider-title,
    body.home [id="slider-title"],
    body.home .ls-l#slider-title,
    body.home .ls-slide h1 {
        font-weight: 700 !important;
    }

    /* 2. “With an overwhelming wealth of experience...” - Pure black (#000000), visibly bold, exactly 2 lines */
    body.home .crescent-sec2-heading,
    body.home .full_section_inner > .vc_col-sm-6 h2 {
        color: #000000 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    body.home .crescent-sec2-heading span,
    body.home .full_section_inner > .vc_col-sm-6 h2 span {
        color: #000000 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        display: inline-block !important;
        line-height: 1.4 !important;
    }
    body.home .crescent-sec2-heading span:first-child,
    body.home .full_section_inner > .vc_col-sm-6 h2 span:first-child {
        font-size: 22px !important;
    }
    body.home .crescent-sec2-heading span:last-child,
    body.home .full_section_inner > .vc_col-sm-6 h2 span:last-child {
        font-size: 18px !important;
    }

    /* 3. “Some Of Our Eye Wear Brands” - Visibly bold, preserve black and maroon colors */
    body.home .crescent-sec4-heading {
        font-weight: 700 !important;
        font-size: 30px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    body.home .crescent-sec4-heading span {
        font-weight: 700 !important;
    }
}

/* ----------------------------------------------------------
   MOBILE  ≤767px
   ---------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    /* === Top spacer reduction === */
    .vc_empty_space[style*="height: 120px"] {
        height: 70px !important;
    }

    /* === vc_col-sm-2 sidebar gutters — collapse on mobile === */
    .vc_row.grid_section .vc_col-sm-2 {
        display: none !important;
    }

    /* === vc_col-sm-8 content column — full width === */
    .vc_row.grid_section .vc_col-sm-8 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* === Google Maps iframe — override hardcoded width="600" === */
    .wpb_map_wraper {
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .wpb_map_wraper iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* === Appointment form container === */
    div[style*="max-width:500px"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    #appointment-form input,
    #appointment-form button {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* === #google-embed: stack image + text vertically === */
    #google-embed {
        width: 100% !important;
        margin-left: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #google-embed .q_elements_holder {
        display: block !important;
        width: 100% !important;
    }
    #google-embed .q_elements_item {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    #google-embed img[src*="Crescent-cover"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        object-fit: cover !important;
        display: block !important;
        transform: none !important;
        margin: 0 auto !important;
    }
    .q_elements_item_content.q_elements_holder_custom_609649 {
        padding: 25px 15px !important;
    }
    .q_elements_holder_custom_609649 {
        transform: none !important;
    }

    /* === Prevent any element escaping viewport === */
    .wpb_wrapper,
    .wpb_content_element,
    .wpb_text_column {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* Contact page — Business Hours: keep Monday–Saturday line on one line on tablet/mobile */
@media only screen and (max-width: 1024px) {
    p.contact-hours-line,
    p.contact-hours-line strong {
        white-space: nowrap !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}


/* Contact page � Business Hours: darker/bolder text on tablet only for readability */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    p.contact-hours-line,
    p.contact-hours-line strong,
    .wpb_text_column p strong {
        color: #000000 !important;
        font-weight: 900 !important;
        -webkit-text-stroke: 1px currentColor !important;
        text-shadow: 0 0 0.8px #000000 !important;
        opacity: 1 !important;
    }
}