/* Custom Responsive Overrides */

/* Mobile & Tablet Portrait (max-width: 767px) */
@media (max-width: 767px) {
    /* Header & Menu */
    .menu_button {
        display: block;
        cursor: pointer;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .menu_button > a {
        float: left;
        max-width: 70%;
    }
    .menu_button > a img {
        max-width: 100%;
        height: auto;
    }
    .menu_button .r_button {
        float: right;
        max-width: 45px; /* prevent giant hamburger icon */
        margin-top: 10px;
    }
    .main_menu {
        display: none; /* Hidden by default, toggled via JS */
        width: 100%;
        margin-top: 10px;
        clear: both;
    }
    .main_menu > li {
        display: block;
        margin-left: 0;
        margin-bottom: 5px;
    }
    .main_menu > li > a {
        padding: 10px 15px;
        display: block;
        width: auto;
        text-align: left;
    }
    .main_menu > li > a > .hex_elem_rounded {
        display: none; /* Hide hex icons on mobile to save space */
    }
    .main_menu ul, .main_menu ul ul {
        position: static; /* Un-float dropdowns */
        display: block;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding-left: 15px;
    }
    
    .header .logo {
        float: left;
        max-width: 60%; /* Ensure logo fits */
    }
    .header .logo img {
        max-width: 100%;
        height: auto;
    }

    /* Sliders and Images */
    .bannercontainer, .bannercontainer * {
        max-width: 100%;
    }
    img {
        max-width: 100%;
        height: auto;
    }

    /* Forms and Inputs */
    input[type="text"], input[type="email"], textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* Custom containers */
    .colorbox_container img {
        max-height: auto;
        width: 100%;
    }
    .fix-download {
        bottom: 10px;
        right: 10px;
    }
    
    /* Footer */
    .footer .widget {
        margin-bottom: 30px;
    }
    
    .pricing_table, .service {
        margin-bottom: 20px;
    }
}

/* Tablet Landscape to Small Desktop (min-width: 768px and max-width: 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .main_menu > li > a {
        padding: 15px 5px; /* Reduce padding to fit menu items */
        font-size: 13px;
    }
    .header .logo {
        max-width: 200px;
    }
}