/* =========================================================
   PHARMA TIPS ZONE
   GLOBAL RESPONSIVE SYSTEM

   Desktop styles stay in:
   theme.css
   common.css
   components.css
   page CSS files

   This file controls responsive behavior only.
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   <= 1199px
========================================================= */

@media (max-width: 1199px) {

    .container {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    .header-inner {
        gap: 20px;
    }

    .brand-logo {
        min-width: 155px;
    }

    .nav-menu li a {
        padding-left: 13px;
        padding-right: 13px;
    }

    .footer-grid {
        grid-template-columns:
            1.5fr
            1fr
            1fr
            1fr
            1.3fr;

        gap: 25px;
    }
}


/* =========================================================
   TABLET
   <= 991px
========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .container {
        width: 100%;
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .top-header {
        padding: 14px 0;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 15px;
    }

    .brand-logo {
        min-width: 0;
    }

    .header-search {
        order: 3;

        flex: 0 0 100%;

        width: 100%;
    }


    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .navigation-inner {
        min-height: 50px;
    }

    .nav-menu li a {
        padding-left: 10px;
        padding-right: 10px;

        font-size: 11px;
    }

    .login-area {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       PAGE BANNER
    ----------------------------------------------------- */

    .page-banner {
        min-height: 200px;
    }

    .page-banner-content h1 {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       SECTION HEADINGS
    ----------------------------------------------------- */

    .section-heading h2 {
        font-size: 22px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px;
    }
}


/* =========================================================
   MOBILE
   <= 767px
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    html {
        width: 100%;
    }

    body {
        width: 100%;
        min-width: 0;

        overflow-x: hidden;
    }

    img {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .container {
        width: 100%;

        padding-left: 15px;
        padding-right: 15px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .top-header {
        padding: 12px 0;
    }

    .header-inner {
        display: flex;

        align-items: center;

        flex-wrap: wrap;

        gap: 10px;
    }

    .brand-logo {
        font-size: 18px;

        max-width: 180px;
    }

    .logo-plus {
        font-size: 28px;
    }


    /* -----------------------------------------------------
       HEADER SEARCH
    ----------------------------------------------------- */

    .header-search {
        order: 3;

        width: 100%;

        flex: 0 0 100%;

        height: 42px;
    }

    .header-search input {
        font-size: 13px;

        padding-left: 14px;
        padding-right: 10px;
    }


    /* -----------------------------------------------------
       HEADER ACTIONS
    ----------------------------------------------------- */

    .header-actions {
        margin-left: auto;

        gap: 6px;
    }

    .header-actions .social-icon {
        display: none;
    }

    .contact-btn {
        margin-left: 0;

        padding: 9px 14px;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .main-navigation {
        width: 100%;
    }

    .navigation-inner {
        position: relative;

        min-height: 48px;
    }

    .menu-toggle {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 42px;
        height: 48px;

        padding: 0;

        border: 0;

        background: transparent;

        color: var(--white);
    }

    .nav-menu {
        display: none;

        position: absolute;

        top: 48px;
        left: 0;
        right: 0;

        z-index: 5000;

        width: 100%;

        flex-direction: column;

        padding: 5px 0;

        margin: 0;

        background: var(--dark);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .25);
    }

    .nav-menu.mobile-open {
        display: flex;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu li a {
        width: 100%;

        padding: 13px 18px;

        border-bottom: 1px solid rgba(255, 255, 255, .08);

        font-size: 11px;
    }

    .nav-menu li:last-child a {
        border-bottom: 0;
    }

    .nav-menu li a:hover,
    .nav-menu li.active a {
        background: rgba(255, 255, 255, .04);
    }


    /* -----------------------------------------------------
       LOGIN AREA
    ----------------------------------------------------- */

    .login-area {
        margin-left: auto;

        font-size: 10px;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       PAGE BANNER
    ----------------------------------------------------- */

    .page-banner {
        min-height: 175px;

        background-position: center;
    }

    .page-banner-content {
        padding: 20px 15px;
    }

    .page-banner-content h1 {
        margin-bottom: 7px;

        font-size: 28px;

        line-height: 1.2;
    }

    .breadcrumb {
        flex-wrap: wrap;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       COMMON SECTION
    ----------------------------------------------------- */

    .content-section {
        padding: 35px 0;
    }

    .section-heading {
        display: flex;

        align-items: flex-start;

        flex-wrap: wrap;

        gap: 10px;

        margin-bottom: 18px;
    }

    .section-heading h2 {
        font-size: 21px;
    }

    .section-heading a {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       COMMON GRID HELPERS
    ----------------------------------------------------- */

    .row {
        margin-left: -7px;
        margin-right: -7px;
    }

    .row > * {
        padding-left: 7px;
        padding-right: 7px;
    }


    /* -----------------------------------------------------
       TABLE
    ----------------------------------------------------- */

    .table-responsive {
        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 650px;
    }


    /* -----------------------------------------------------
       FORMS
    ----------------------------------------------------- */

    .form-row,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-group {
        width: 100%;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-column,
    .footer-newsletter {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 10px;
    }
}


/* =========================================================
   SMALL MOBILE
   <= 575px
========================================================= */

@media (max-width: 575px) {

    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .brand-logo {
        font-size: 16px;

        max-width: 160px;
    }

    .logo-plus {
        font-size: 25px;
    }

    .contact-btn {
        padding: 8px 11px;

        font-size: 9px;
    }

    .login-area {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       SEARCH
    ----------------------------------------------------- */

    .header-search {
        height: 40px;
    }

    .header-search input {
        font-size: 12px;
    }


    /* -----------------------------------------------------
       PAGE BANNER
    ----------------------------------------------------- */

    .page-banner {
        min-height: 150px;
    }

    .page-banner-content h1 {
        font-size: 24px;
    }


    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .content-section {
        padding: 30px 0;
    }

    .section-heading h2 {
        font-size: 19px;
    }


    /* -----------------------------------------------------
       BUTTON
    ----------------------------------------------------- */

    .btn {
        min-height: 40px;

        padding: 9px 16px;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       CARD
    ----------------------------------------------------- */

    .card-body {
        padding: 14px;
    }

    .calculator-card {
        padding: 15px;
    }


    /* -----------------------------------------------------
       MODAL
    ----------------------------------------------------- */

    .modal-overlay {
        padding: 10px;
    }

    .modal {
        max-height: calc(100vh - 20px);
    }

    .modal-header {
        padding: 14px 15px;
    }

    .modal-body {
        padding: 15px;
    }

    .modal-footer {
        padding: 12px 15px;

        flex-wrap: wrap;
    }


    /* -----------------------------------------------------
       TOAST
    ----------------------------------------------------- */

    .toast {
        left: 10px;
        right: 10px;
        bottom: 10px;

        min-width: 0;
        max-width: none;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
   <= 400px
========================================================= */

@media (max-width: 400px) {


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

    .brand-logo {
        font-size: 15px;
    }

    .logo-plus {
        font-size: 23px;
    }

    .contact-btn {
        padding: 7px 9px;

        font-size: 8px;
    }

    .login-area {
        font-size: 8px;
    }

    .page-banner-content h1 {
        font-size: 21px;
    }

    .section-heading h2 {
        font-size: 18px;
    }
}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

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

    .page-banner {
        min-height: 145px;
    }

    .page-banner-content {
        padding: 15px;
    }

    .page-banner-content h1 {
        font-size: 24px;
    }

    .nav-menu {
        max-height: calc(100vh - 48px);

        overflow-y: auto;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}