/* SpectraCare Responsive Design Enhancements */
/* Additional responsive improvements for better mobile experience */

/* Enhanced Mobile Navigation */
@media screen and (max-width: 991px) {
    /* Improved mobile navigation */
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin-top: 10px;
    }
    
    .navbar-nav .nav-link {
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 16px;
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Improved mobile header layout */
    .header-con .header-tel,
    .header-con .header-contact {
        display: none;
    }
    
    .navbar-brand img {
        max-height: 45px;
        width: auto;
    }
}

/* Enhanced Mobile Banner Section */
@media screen and (max-width: 768px) {
    .banner-con {
        padding-top: 20px;
      /*  padding-bottom: 40px;*/
    }
    
    .banner-con .banner-content-con {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .banner-con .banner-content-con h1 {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 15px;
    }
    
    .banner-con .banner-content-con p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 25px;
    }
    
    .banner-con .secondary-button,
    .banner-con .elementary-button {
        display: block;
        margin-bottom: 15px;
    }
    
    .banner-con .elementary-button a {
        margin-left: 0;
    }
     
    /* Mobile banner image adjustments */
    .banner-con .banner-img-con::after {
        width: 300px;
        height: 300px;
        top: 20px;
    }
    
  /*  .banner-con .award-win-con {
        position: relative;
        top: auto;
        left: auto;
        margin: 20px auto;
        width: fit-content;
    }
    
    .banner-con .opening-hrz-con {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 20px auto;
        width: fit-content;
    }*/
}

/* Enhanced Mobile Services Section */
@media screen and (max-width: 768px) {
    .services-departments-con .services-box {
        margin-bottom: 20px;
        padding: 25px 20px;
    }
    
    .services-departments-con .services-box figure {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }
    
    .services-departments-con .services-box h5 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .services-departments-con .services-box p {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Enhanced Mobile Statistics Section */
@media screen and (max-width: 768px) {
    .statistics-con .statistics-box {
        margin-bottom: 20px;
        padding: 25px 20px;
    }
    
    .statistics-con .statistics-box figure {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    
    .statistics-con .statistics-box span {
        font-size: 24px;
        line-height: 24px;
    }
    
    .statistics-con .statistics-box span.span-text {
        font-size: 14px;
        line-height: 18px;
    }
}

/* Enhanced Mobile Contact Form */
@media screen and (max-width: 768px) {
    .contact-info-con .send-msg-con {
        padding: 25px 20px;
        margin-top: 30px;
    }
    
    .contact-info-con .send-msg-con h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .contact-info-con .send-msg-con .form-group {
        margin-bottom: 20px;
    }
    
    .contact-info-con .send-msg-con input,
    .contact-info-con .send-msg-con select,
    .contact-info-con .send-msg-con textarea {
        font-size: 16px;
        padding: 15px;
        border-radius: 8px;
    }
    
    .contact-info-con .send-msg-con textarea {
        min-height: 120px;
    }
    
    .contact-info-con .send-msg-con .send_now {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    /* Mobile contact info adjustments */
    .contact-info-con .our-info-con {
        margin-bottom: 30px;
    }
    
    .contact-info-con .our-info-con ul li {
        padding: 15px 10px;
        margin-bottom: 15px;
    }
    
    .contact-info-con .our-info-con ul li figure {
        min-width: 50px;
    }
    
    .contact-info-con .our-info-con ul li .sub-info-inner {
        padding-left: 15px;
    }
    
    .contact-info-con .our-info-con ul li h5 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .contact-info-con .our-info-con ul li p,
    .contact-info-con .our-info-con ul li a {
        font-size: 14px;
        line-height: 18px;
    }
}

/* Enhanced Mobile About Page */
@media screen and (max-width: 768px) {
    .about-info-care-con .about_wrapper {
        margin-bottom: 30px;
    }
    
    .about-info-care-con .about_wrapper .about-image1 img,
    .about-info-care-con .about_wrapper .about-image2 img,
    .about-info-care-con .about_wrapper .about-image3 img {
        width: 100%;
        max-width: 250px;
    }
    
    .about-info-care-con .about_wrapper .box {
        position: relative;
        bottom: auto;
        left: auto;
        margin: 20px auto;
        width: 120px;
        height: 120px;
    }
    
    .about-info-care-con .about_content h2 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 15px;
    }
    
    .about-info-care-con .about_content .text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 15px;
    }
    
    .about-info-care-con .about_content ul li {
        font-size: 14px;
        margin-bottom: 8px;
        padding-left: 20px;
    }
}

/* Enhanced Mobile Footer */
@media screen and (max-width: 768px) {
    .footer-con .upper_portion {
        padding: 20px;
        margin-top: -40px;
    }
    
    .footer-con .upper_portion h3 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 15px;
    }
    
    .footer-con .upper_portion input {
        width: 100%;
        margin-bottom: 15px;
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .footer-con .upper_portion button {
        width: 100%;
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .footer-con .middle_portion {
        padding: 40px 20px 30px;
    }
    
    .footer-con .middle_portion .col-lg-3,
    .footer-con .middle_portion .col-md-4,
    .footer-con .middle_portion .col-sm-4 {
        margin-bottom: 25px;
    }
    
    .footer-con .middle_portion h5 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .footer-con .middle_portion .links,
    .footer-con .middle_portion .timing,
    .footer-con .middle_portion .contact {
        padding-left: 0;
    }
    
    .footer-con .middle_portion .text {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Touch-friendly improvements */
@media screen and (max-width: 768px) {
    /* Larger touch targets */
    .primary-button a,
    .secondary-button a,
    .elementary-button a {
        min-height: 48px;
        padding: 1px 20px;
        font-size: 14px;
    }
    
    /* Improved form touch targets */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Better spacing for touch */
    .navbar-nav .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    /* Improved carousel navigation for touch */
    .owl-carousel .owl-nav button {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .owl-carousel .owl-dots .owl-dot {
        margin: 0 8px;
    }
    
    .owl-carousel .owl-dots .owl-dot span {
        width: 14px;
        height: 14px;
    }
}

/* Improved readability on small screens */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
        line-height: 22px;
    }
    
    h1 {
        font-size: 24px;
        line-height: 30px;
    }
    
    h2 {
        font-size: 24px;
        line-height: 30px;
    }
    
    h3 {
        font-size: 18px;
        line-height: 24px;
    }
    
    h4 {
        font-size: 16px;
        line-height: 22px;
    }
    
    h5 {
        font-size: 15px;
        line-height: 20px;
    }
    
    /* Improved padding for very small screens */
    .padding-top {
        padding-top: 40px;
    }
    
    .padding-bottom {
        padding-bottom: 40px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Enhanced Contact Form Mobile Interactions */
@media screen and (max-width: 768px) {
    /* Improve form field focus states */
    #contactpage input:focus,
    #contactpage select:focus,
    #contactpage textarea:focus {
        border-color: #313df7 !important;
        box-shadow: 0 0 0 3px rgba(49, 61, 247, 0.1) !important;
        outline: none;
    }
    
    /* Better error message display on mobile */
    .error-message {
        font-size: 13px !important;
        margin-top: 8px !important;
        padding: 5px 10px;
        background-color: rgba(220, 53, 69, 0.1);
        border-radius: 4px;
        border-left: 3px solid #dc3545;
    }
    
    /* Improved form status messages */
    .form-status {
        margin-top: 20px !important;
        padding: 15px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
    /* Better select dropdown styling */
    #contactpage select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
        background-position: right 12px center !important;
        background-repeat: no-repeat !important;
        background-size: 16px 12px !important;
        padding-right: 40px !important;
    }
    
    /* Improve mobile form layout */
    #contactpage .row .col-12 {
        margin-bottom: 0;
    }
    
    #contactpage .form-group {
        margin-bottom: 20px;
    }
    
    /* Better button styling for mobile */
    #contactpage .send_now {
        font-size: 16px !important;
        padding: 16px 24px !important;
        border-radius: 8px !important;
        min-height: 52px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        transition: all 0.3s ease !important;
    }
    
    #contactpage .send_now:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(49, 61, 247, 0.3) !important;
    }
    
    #contactpage .send_now:active {
        transform: translateY(0) !important;
    }
}

/* Landscape orientation improvements for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .banner-con {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .banner-con .banner-content-con h1 {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 10px;
    }
    
    .banner-con .banner-content-con p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }
    
    .padding-top {
        padding-top: 30px;
    }
    
    .padding-bottom {
        padding-bottom: 30px;
    }
    
    /* Reduce form spacing in landscape */
    #contactpage .form-group {
        margin-bottom: 15px;
    }
    
    .contact-info-con .send-msg-con {
        padding: 20px 15px;
    }
}

/* High DPI display improvements */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    /* Sharper text rendering on high DPI mobile screens */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Better image rendering */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility improvements for mobile */
@media screen and (max-width: 768px) {
    /* Better focus indicators */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #313df7 !important;
        outline-offset: 2px !important;
    }
    
    /* Improved contrast for better readability */
    .text-color,
    .text {
        color: #4a5568 !important;
    }
    
    /* Better link styling */
    a {
        text-decoration-skip-ink: auto;
    }
    
    /* Improved button contrast */
    .primary-button a,
    .secondary-button a,
    .elementary-button a {
        font-weight: 600 !important;
    }
}