/* Mobile Optimizations */

/* Font Optimizations */
@font-face {
    font-display: swap;
}

/* Form Optimizations */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-size: 16px !important; /* Prevents iOS zoom */
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Improve form labels visibility */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Better touch targets for form elements */
button,
input[type="submit"] {
    padding: 12px 24px;
    border-radius: 8px;
    width: 100%;
    margin-top: 10px;
}

/* Table Responsiveness */
@media (max-width: 767.98px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    td, th {
        min-width: 120px;
    }
}


/* Global Mobile Layout */
/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

.img-fluid {
    width: 100%;
    height: auto;
}

/* Improve touch targets for better accessibility */
a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 767.98px) {
    /* Reset column offsets */
    .portfolio-item.offset-md-1 {
        margin-left: 0 !important;
    }

    /* Make columns full width */
    .portfolio-item.col-sm-6,
    .portfolio-item.col-6,
    .portfolio-item.col-md-3,
    .portfolio-item.col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Left align text */
    .portfolio-item .cnthd,
    .portfolio-item ul {
        text-align: left !important;
        padding-left: 15px !important;
    }

    /* Improve list spacing */
    .portfolio-item ul {
        margin-bottom: 25px !important;
    }

    .portfolio-item ul li {
        margin-bottom: 8px !important;
    }

    /* Keep headers centered */
    h2, h3 {
        text-align: center !important;
    }
}


/* Page Title Section */
@media (max-width: 767.98px) {
    .page-title {
        padding: 120px 0 !important; /* Reduce padding on mobile */
    }
    
    .page-title h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .page-title span {
        font-size: 14px !important;
    }
}

/* Team Member Sections */
@media (max-width: 767.98px) {
    .col-padding {
        padding: 30px !important;
    }

    /* Adjust team member image heights */
    [class*='min-vh-'] {
        min-height: 300px !important;
    }

    /* Fix image aspect ratio */
    [style*='background:url'] {
        background-position: center !important;
        background-size: cover !important;
    }

    /* Improve text readability */
    .heading-block h2,
    .heading-block h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    .heading-block .before-heading {
        font-size: 13px !important;
    }

    /* Better spacing for mobile */
    .mb-6 {
        margin-bottom: 3rem !important;
    }

    /* Improve container spacing */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Footer Optimizations */
    #footer .footer-widgets-wrap {
        padding: 40px 0 !important;
    }

    #footer .widget {
        margin-bottom: 20px !important;
    }

    #footer .subscribe-widget h5 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }

    #footer .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    #footer .input-group input.form-control {
        height: 44px !important;
        font-size: 14px !important;
    }

    #footer .input-group .btn {
        height: 44px !important;
        padding: 0 15px !important;
        font-size: 14px !important;
    }

    #footer .social-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    #copyrights {
        padding: 30px 0 !important;
    }

    #copyrights .col-md-6 {
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #copyrights .copyright-links {
        margin-top: 5px !important;
    }

    #copyrights .d-flex {
        justify-content: center !important;
    }
}


/* Improved touch targets for mobile */
@media (max-width: 767.98px) {
    .primary-menu-trigger button {
        padding: 15px;
        min-width: 44px;
        min-height: 44px;
    }

    .header-misc-icon a {
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Improve mobile menu items */
    .menu-container .menu-item > .menu-link {
        padding: 12px 15px;
        font-size: 16px;
    }

    .sub-menu-container .menu-item > .menu-link {
        padding: 10px 15px 10px 25px;
    }

    /* Improve form elements for touch */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px;
        padding: 10px 15px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Improve buttons for touch */
    .button {
        padding: 12px 24px;
        min-height: 44px;
        font-size: 16px;
    }

    /* Improve spacing for mobile */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Improve image responsiveness */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better table handling on mobile */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Improve modal dialogs on mobile */
    .modal-dialog {
        margin: 10px;
        padding: 15px;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
    .menu-container .menu-item > .menu-link {
        padding: 10px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Improved visibility for dark mode */
@media (prefers-color-scheme: dark) {
    .header-misc-icon a,
    .primary-menu-trigger button {
        background-color: rgba(255, 255, 255, 0.1);
    }
}