/* =====================================================
   RESPONSIVE.CSS
   CLEAN FINAL VERSION
   hamid_j6_v1
   GENERAL RESPONSIVE ONLY
   ===================================================== */


/* =====================================================
   LARGE TABLET
   ===================================================== */

@media (max-width: 1199.98px) {

    .hamid-container,
    .container {
        max-width: 100%;
    }

    .hamid-section {
        overflow: hidden;
    }

}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991.98px) {

    /* ===============================
       GLOBAL
       =============================== */

    body {
        overflow-x: hidden;
        font-size: 15px;
    }

    .container,
    .container-fluid,
    .hamid-container,
    .hamid-container-fluid {
        padding-inline: 14px;
    }

    .row,
    .hamid-row {
        --bs-gutter-x: 18px;
        --bs-gutter-y: 18px;
    }

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

    /* ===============================
       HEADER
       =============================== */

    .hamid-header-tools-row,
    .header-tools-row {
        min-height: auto;
        row-gap: 16px;
    }

    .header-logo-col,
    .header-slot-3-col,
    .header-slot-4-col,
    .header-slot-5-col {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .logo-position,
    .slot-3-position,
    .slot-4-position,
    .slot-5-position {
        width: 100%;
    }

    /* ===============================
       TOP MENU BAR
       =============================== */

    .hamid-top-menu-slots-row {
        flex-wrap: nowrap !important;
        align-items: center;
    }

    .menu-top-1-position,
    .hamid-pos-menu-top-1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .slot-1-position,
    .slot-2-position,
    .hamid-pos-slot-1,
    .hamid-pos-slot-2 {
        flex: 0 0 auto;

        width: auto;
        min-width: 110px;
        max-width: 170px;

        justify-content: center;
        text-align: center;
    }

    /* ===============================
       MODULES
       =============================== */

    .module,
    .moduletable,
    .hamid-component,
    .component-position {
        border-radius: 12px;
    }

    .hamid-position,
    .module-position {
        gap: 18px;
    }

    /* ===============================
       CONTENT
       =============================== */

    .hamid-component {
        padding: 18px;
    }

    .hamid-component h1,
    .hamid-component .page-header h1 {
        font-size: 28px;
    }

    .hamid-component table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* ===============================
       SIDEBAR
       =============================== */

    .sidebar-right-position,
    .sidebar-left-position,
    .hamid-pos-sidebar-right,
    .hamid-pos-sidebar-left {
        margin-top: 24px;
    }

}


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

@media (max-width: 767.98px) {

    /* ===============================
       GLOBAL
       =============================== */

    body {
        font-size: 14px;
    }

    .container,
    .container-fluid,
    .hamid-container,
    .hamid-container-fluid {
        padding-inline: 12px;
    }

    .row,
    .hamid-row {
        --bs-gutter-x: 14px;
        --bs-gutter-y: 14px;
    }

    /* ===============================
       HEADER
       =============================== */

    .hamid-header-tools-row,
    .header-tools-row {
        row-gap: 14px;
    }

    .header-logo-col,
    .header-slot-3-col,
    .header-slot-4-col,
    .header-slot-5-col {
        justify-content: center;
        text-align: center;
    }

    /* ===============================
       TOP BAR
       =============================== */

    .hamid-top-menu-slots-row {
        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
    }

    .hamid-top-menu-slots-row::-webkit-scrollbar {
        display: none;
    }

    .slot-1-position,
    .slot-2-position,
    .hamid-pos-slot-1,
    .hamid-pos-slot-2 {
        min-width: 100px;
        max-width: 150px;
    }

    /* ===============================
       MODULES
       =============================== */

    .module,
    .moduletable,
    .hamid-component,
    .component-position {
        padding: 14px;
        border-radius: 10px;
    }

    .hamid-position,
    .module-position {
        gap: 16px;
    }

    /* ===============================
       CONTENT
       =============================== */

    .hamid-component {
        padding: 16px;
    }

    .hamid-component h1,
    .hamid-component .page-header h1 {
        font-size: 24px;
    }

    .hamid-component p,
    .hamid-component li {
        line-height: 1.9;
    }

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 575.98px) {

    .container,
    .container-fluid,
    .hamid-container,
    .hamid-container-fluid {
        padding-inline: 10px;
    }

    .module,
    .moduletable,
    .hamid-component,
    .component-position {
        padding: 12px;
        border-radius: 8px;
    }

    .hamid-component {
        padding: 14px;
    }

    .slot-1-position,
    .slot-2-position,
    .hamid-pos-slot-1,
    .hamid-pos-slot-2 {
        min-width: 90px;
        max-width: 140px;
    }

}

/* =====================================================
   FORCE HIDE SLOT-1 FLAGS ON MOBILE
   ===================================================== */

@media (max-width: 991.98px) {

    .hamid-section-top-menu-slots .slot-1-position,
    .hamid-section-top-menu-slots .hamid-pos-slot-1,
    .top-menu-slots-wrapper .slot-1-position,
    .top-menu-slots-wrapper .hamid-pos-slot-1 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

}