@charset "utf-8";
/* ========================================
   RESPONSIVE STYLESHEET - ORGANIZED BY BREAKPOINT
   All responsive CSS from style.css, style-page-builder.css, and original responsive styles
   Organized from largest to smallest screen sizes
   ======================================== */

/* ========================================
   SPECIAL MEDIA QUERIES (Non-screen size based)
   ======================================== */

/* Touch device fix for background-attachment */
@media (hover: none) {
    .main-background {
        background-attachment: scroll;
    }
}

/* ========================================
   DESKTOP BREAKPOINTS (1025px and above)
   ======================================== */

/* Desktop visibility controls */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ========================================
   LARGE DESKTOP BREAKPOINTS (1024px - 1260px)
   ======================================== */

/* Large desktop responsive adjustments - 1260px */
@media only screen and (max-width: 1260px) {
    .padding-1 { padding: 1.5em; }
    .padding-2 { padding: 1.8em; }
    .padding-3 { padding: 2.1em; }
    .padding-4 { padding: 2.4em; }
    .padding-5 { padding: 2.7em; }
    .padding-6 { padding: 3em; }
    .padding-7 { padding: 3.3em; }
    .padding-8 { padding: 3.6em; }
    .padding-9 { padding: 3.9em; }
    .padding-10 { padding: 4.2em; }
    
    .title-1 { font-size: 1.1em; }
    .title-2 { font-size: 1.3em; }
    .title-3 { font-size: 1.5em; }
    .title-4 { font-size: 1.7em; }
    .title-5 { font-size: 1.9em; }
    .title-6 { font-size: 2.1em; }
    .title-7 { font-size: 2.3em; }
    .title-8 { font-size: 2.5em; }
    .title-9 { font-size: 2.7em; }
    .title-10 { font-size: 2.9em; }
}

/* Desktop responsive adjustments - 1180px */
@media only screen and (max-width: 1180px) {
    .padding-1 { padding: 1.3em; }
    .padding-2 { padding: 1.5em; }
    .padding-3 { padding: 1.7em; }
    .padding-4 { padding: 1.9em; }
    .padding-5 { padding: 2.1em; }
    .padding-6 { padding: 2.3em; }
    .padding-7 { padding: 2.5em; }
    .padding-8 { padding: 2.7em; }
    .padding-9 { padding: 2.9em; }
    .padding-10 { padding: 3.1em; }
    
    .title-1 { font-size: 1.05em; }
    .title-2 { font-size: 1.2em; }
    .title-3 { font-size: 1.35em; }
    .title-4 { font-size: 1.5em; }
    .title-5 { font-size: 1.65em; }
    .title-6 { font-size: 1.8em; }
    .title-7 { font-size: 1.95em; }
    .title-8 { font-size: 2.1em; }
    .title-9 { font-size: 2.25em; }
    .title-10 { font-size: 2.4em; }
}

/* Desktop responsive adjustments - 1100px */
@media only screen and (max-width: 1100px) {
    .content-block { padding: 2em 1em; }
    
    .padding-1 { padding: 1.1em; }
    .padding-2 { padding: 1.2em; }
    .padding-3 { padding: 1.3em; }
    .padding-4 { padding: 1.4em; }
    .padding-5 { padding: 1.5em; }
    .padding-6 { padding: 1.6em; }
    .padding-7 { padding: 1.7em; }
    .padding-8 { padding: 1.8em; }
    .padding-9 { padding: 1.9em; }
    .padding-10 { padding: 2em; }
    
    .title-1 { font-size: 1em; }
    .title-2 { font-size: 1.1em; }
    .title-3 { font-size: 1.2em; }
    .title-4 { font-size: 1.3em; }
    .title-5 { font-size: 1.4em; }
    .title-6 { font-size: 1.5em; }
    .title-7 { font-size: 1.6em; }
    .title-8 { font-size: 1.7em; }
    .title-9 { font-size: 1.8em; }
    .title-10 { font-size: 1.9em; }
}

/* Background scroll fix and layout adjustments - 1090px */
@media only screen and (max-width: 1090px) {
    .main-background {
        background-attachment: scroll;
    }
    .content-block {
        padding: 2em 1em;
    }
    .news-photo {
        width: 100%;
        float: none;
        display: block;
        margin: 0 auto;
        max-width: 250px;
        max-height: 200px;
        overflow: hidden;
    }
    .news-photo img {
        margin: 0 auto;
    }
    .all-news {
        margin: 1em 1%;
    }
    .news-content {
        width: 100%;
    }
}

/* Footer layout adjustments - 1030px */
@media only screen and (max-width: 1030px) {
    #footer-left, #footer-middle, #footer-middle-right, #footer-right {
        width: 50%;
    }
    #footer-middle-right {
        clear: both;
    }
}

/* ========================================
   TABLET BREAKPOINTS (768px - 1024px)
   ======================================== */

/* Tablet visibility controls */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Icon blocks and grid layouts - 1024px */
@media (max-width: 1024px) {
    .icon-grid-5 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-block-5 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet adjustments - 980px */
@media only screen and (max-width: 980px) {
    .padding-1 { padding: 0.9em; }
    .padding-2 { padding: 1em; }
    .padding-3 { padding: 1.1em; }
    .padding-4 { padding: 1.2em; }
    .padding-5 { padding: 1.3em; }
    .padding-6 { padding: 1.4em; }
    .padding-7 { padding: 1.5em; }
    .padding-8 { padding: 1.6em; }
    .padding-9 { padding: 1.7em; }
    .padding-10 { padding: 1.8em; }
    
    .title-1 { font-size: 0.95em; }
    .title-2 { font-size: 1em; }
    .title-3 { font-size: 1.05em; }
    .title-4 { font-size: 1.1em; }
    .title-5 { font-size: 1.15em; }
    .title-6 { font-size: 1.2em; }
    .title-7 { font-size: 1.25em; }
    .title-8 { font-size: 1.3em; }
    .title-9 { font-size: 1.35em; }
    .title-10 { font-size: 1.4em; }
    
    .title-block {
        margin-bottom: 0;
    }
}

/* iHover adjustments and five-up layout - 900px */
@media only screen and (max-width: 900px) {
    .pb-ihover33 {
        padding-left: 0;
        padding-right: 0;
    }
    .ih-item.circle.effect1 .img {
        left: 0;
    }
    .five-up {
        width: 25%;
    }
    #footer {
        border-top: solid 1em #f2f2f2;
    }
}

/* Mega menu adjustments - 870px */
@media only screen and (max-width: 870px) {
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 10px !important;
    }
}

/* Major tablet layout changes - 820px */
@media only screen and (max-width: 820px) {
    .double-blocks-30-70, 
    .double-blocks-40-60, 
    .double-blocks-50-50, 
    .double-blocks-60-40, 
    .double-blocks-70-30 {
        flex-direction: column;
    }
    .double-blocks-30-70 > div, 
    .double-blocks-40-60 > div, 
    .double-blocks-50-50 > div, 
    .double-blocks-60-40 > div, 
    .double-blocks-70-30 > div {
        width: 100% !important;
        max-width: none !important;
    }
    .desktop-view {
        display: none !important;
    }
    .mobile-view {
        display: block !important;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff;
    }
    
    .padding-1 { padding: 1%; }
    .pb-ihover33 { width: 50%; }
    .triple-link-image { margin-top: 15px; }
    .no-back {
        background: none !important;
        background-color: #f3f2f2 !important;
    }
    .hide-on-mobile, .hide-with-header {
        display: none;
    }
    .triple-link-image img {
        -webkit-filter: grayscale(50%);
        filter: grayscale(50%);
    }
    .row-narrow {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
}

/* ========================================
   MOBILE BREAKPOINTS (767px and below)
   ======================================== */

/* Mobile visibility controls */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Header responsive - 768px */
@media (max-width: 768px) {
    .header-content-wrapper {
        padding: 1em 0.5em;
        font-size: 0.9em;
    }
    
    /* Sub-heading responsive styling */
    h2.sub-heading-block, h3.sub-heading-block, h4.sub-heading-block, 
    h5.sub-heading-block, h6.sub-heading-block, p.sub-heading-block, 
    div.sub-heading-block {
        font-size: 1em;
        margin: 0.3em auto 0;
        padding: 0 0.5em;
    }
    
    /* Welcome content responsive */
    .welcome-content-1 {
        padding: 1.5em !important;
    }
    .welcome-photo img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }
    
    /* Double blocks margins */
    .double-blocks {
        margin: 1em 0;
    }
    
    /* Button container responsive */
    .button-container {
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }
    .button-container .cta-button {
        width: 100%;
        max-width: 300px;
        margin: 0;
    }
    
    /* Icon blocks responsive */
    .icon-grid-3, .icon-grid-4, .icon-grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em;
    }
    
    /* MachineGun text responsive */
    .machinegun-text-container {
        padding: 2em 1em;
        font-size: 1.2em;
    }
    
    /* Pro slider responsive */
    .pro-slider-container {
        height: 300px;
    }
    .pro-slider .slider-content {
        padding: 1em;
        font-size: 0.9em;
    }
    
    /* Grid blocks responsive */
    .grid-block-3, .grid-block-4, .grid-block-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mega menu and layout adjustments - 730px */
@media only screen and (max-width: 730px) {
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 6px !important;
    }
    #outerImageContainer {
        overflow: hidden !important;
        box-sizing: border-box;
        width: 100% !important;
    }
    .padding-1 { padding: 2%; }
    .width33 { width: 50%; }
    .break-div .content-block {
        display: inline;
    }
    .counter-break-div::before {
        content: "";
        display: block;
        clear: both;
        margin-top: .3em;
    }
    .row-narrow {
        max-width: 600px;
    }
    .five-up {
        width: 25%;
    }
}

/* Logo and footer adjustments - 700px */
@media only screen and (max-width: 700px) {
    .main-logo img {
        margin-left: 0;
    }
    .suppliers-block {
        width: 100%;
    }
    .supplier-desc {
        height: auto;
    }
    #footer-left, #footer-middle, #footer-right {
        width: 100%;
        max-width: 450px;
        text-align: center;
        float: none;
        margin: 1em auto;
    }
   
    h3.title-block, .title-block {
        box-sizing: border-box;
    }
    .five-up {
        width: 50%;
    }
    .six-up {
        width: 33.3%;
        padding: 1.5%;
    }
}

/* Mobile adjustments - 675px */
@media only screen and (max-width: 675px) {
    .padding-1 { padding: 0.8em; }
    .padding-2 { padding: 0.9em; }
    .padding-3 { padding: 1em; }
    .padding-4 { padding: 1.1em; }
    .padding-5 { padding: 1.2em; }
    .padding-6 { padding: 1.3em; }
    .padding-7 { padding: 1.4em; }
    .padding-8 { padding: 1.5em; }
    .padding-9 { padding: 1.6em; }
    .padding-10 { padding: 1.7em; }
    
    .cta-button {
        padding: 0.8em 1.5em;
    }
}

/* Width33 full width - 650px */
@media only screen and (max-width: 650px) {
    .hide-650-pixles {
        display: none !important;
    }
    .width33 {
        width: 100%;
        max-width: 400px;
        float: none;
        margin: 1em auto;
    }
}

/* Major mobile optimizations - 585px */
@media only screen and (max-width: 585px) {
    .title-1 { font-size: 0.9em; }
    .title-2 { font-size: 0.95em; }
    .title-3 { font-size: 1em; }
    .title-4 { font-size: 1.05em; }
    .title-5 { font-size: 1.1em; }
    .title-6 { font-size: 1.15em; }
    .title-7 { font-size: 1.2em; }
    .title-8 { font-size: 1.25em; }
    .title-9 { font-size: 1.3em; }
    .title-10 { font-size: 1.35em; }
    
    .content-block {
        padding: 1.5em 1em;
    }
    .three-up, .four-up, .five-up, .six-up {
        width: 100%;
        margin: 0.5em 0;
    }
}

/* Mobile layout fixes - 580px */
@media only screen and (max-width: 580px) {
    #wrapper {
        margin-top: 0;
    }
    .double-block-mobile {
        background-position: center !important;
        background-size: auto !important;
    }
    .pb-ihover33 {
        width: 100%;
    }
    .ih-item.circle {
        margin: 0 auto;
    }
    #page-header {
        height: auto !important;
    }
    .six-up {
        width: 50%;
    }
    .icons-per-row-3 {
	grid-template-columns: repeat(1, 1fr);
}
    .form-row {
    display:block;
  }
  #enquiry-form {
    padding: 0;
  }
  .icons-per-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile adjustments - 480px */
@media only screen and (max-width: 480px) {
    .content-block {
        padding: 1.2em 0.8em;
    }
    .padding-1, .padding-2, .padding-3, .padding-4, .padding-5,
    .padding-6, .padding-7, .padding-8, .padding-9, .padding-10 {
        padding: 1em !important;
    }
    
    /* Icon blocks mobile - single column */
    .icon-grid-3, .icon-grid-4, .icon-grid-5 {
        grid-template-columns: 1fr;
        gap: 2em;
    }
    
    /* MachineGun text mobile optimization */
    .machinegun-text-container {
        padding: 1.5em 0.8em;
        font-size: 1em;
    }
    
    /* Grid blocks mobile - single column */
    .grid-block-3, .grid-block-4, .grid-block-5 {
        grid-template-columns: 1fr;
    }
    
    blockquote {
        padding: 1em;
    }
    .title-block {
        width: auto;
    }
    .width33 {
        width: 100%;
    }
    .break-div .width33 {
        width: 100%;
        max-width: 320px;
        padding: 15px 7%;
        box-sizing: border-box;
    }
    .break-div .content-block {
        display: block;
    }
    .padding-1 {
        padding: 1%;
    }
    .content-block {
        padding: 2em 1em;
    }
    .double-blocks-50 .double-content-block {
        padding: 1em !important;
    }
    .member-card-content {
        padding: 0 !important;
    }
}

/* Extra small mobile - 420px */
@media only screen and (max-width: 420px) {
    .block50-back {
        width: 100%;
        margin: 1em 0;
    }
    .all-news {
        padding: 1em 1%;
    }
    .profile-section {
        padding: 0 !important;
    }
    .register-form-wrapper {
        padding: .5em !important;
    }
    .members-archive {
        padding: 0 !important;
    }
    #footer-left, #footer-middle {
        width: 100%;
        text-align: center;
    }
    .footer-widget ul {
        margin: 0;
    }
    span.wpcf7-list-item {
        display: block !important;
    }
    .five-up, .six-up {
        width: 100%;
    }
    .slider-nav3 {
        display: none;
    }
    ul, ol {
        margin: 1em 0 1em 1em;
    }
}

/* ========================================
   FLEXIBLE GRID RESPONSIVE DESIGN
   ======================================== */

/* Large screens - maintain default layout */
@media (min-width: 1200px) {
    .grid-container {
        width: 85%;
        max-width: 1200px;
        padding: 0 2rem;
    }
    
    .grid-item {
        padding: 2rem;
    }
    
    .grid-item-title {
        font-size: 1.5rem;
    }
}

/* Medium desktops */
@media (max-width: 1199px) and (min-width: 992px) {
    .grid-container {
        width: 90%;
        padding: 0 1.5rem;
    }
    
    .grid-item {
        padding: 1.5rem;
    }
    
    .grid-item-title {
        font-size: 1.4rem;
    }
}

/* Small desktops and large tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .grid-container {
        width: 95%;
        padding: 0 1rem;
    }
    
    .grid-item {
        padding: 1.25rem;
    }
    
    .grid-item-title {
        font-size: 1.3rem;
    }
    
    /* Adjust grid layouts for tablet */
    .grid-container[data-columns="5"] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
    
    .grid-container[data-columns="4"] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
    
    .grid-container[data-columns="3"] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
}

/* Tablets portrait */
@media (max-width: 767px) and (min-width: 576px) {
    .grid-container {
        width: 100%;
        padding: 0 0.75rem;
    }
    
    .grid-block-section {
        padding: 1.5rem 0;
    }
    
    .grid-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .grid-item-title {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .grid-item-content {
        font-size: 0.95rem;
    }
    
    /* Force 2-column layout on tablets */
    .grid-container[data-columns="5"] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
    
    .grid-container[data-columns="4"] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
    
    .grid-container[data-columns="3"] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
    
    /* Disable hover effects on touch devices */
    .grid-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Mobile phones */
@media (max-width: 575px) {
    .grid-container {
        width: 100%;
        padding: 0 0.5rem;
    }
    
    .grid-block-section {
        padding: 1rem 0;
    }
    
    .grid-item {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
    }
    
    .grid-item-title {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
    
    .grid-item-content {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .grid-item-content p {
        margin-bottom: 0.75rem;
    }
    
    /* Force single column layout on mobile */
    .grid-container[data-columns] .grid-item:nth-child(n) {
        grid-column: span 1;
    }
    
    /* Remove all hover effects on mobile */
    .grid-item:hover {
        transform: none;
        box-shadow: none;
    }
    
    .grid-item:hover .grid-item-overlay {
        opacity: 1;
    }
    
    /* Optimize images for mobile */
    .grid-item-image {
        margin-bottom: 0.5rem;
    }
    
    .grid-item-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    .grid-container {
        padding: 0 0.25rem;
    }
    
    .grid-item {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .grid-item-title {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .grid-item-content {
        font-size: 0.85rem;
    }
}

/* Grid layout system responsiveness */
@media (max-width: 991px) {
    /* Convert 4-column to 2-column */
    .grid-container[data-columns="4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Adjust spanning for 2-column layout */
    .grid-container[data-columns="4"] .grid-item[data-width-span="3"],
    .grid-container[data-columns="4"] .grid-item[data-width-span="2"] {
        grid-column: span 2;
    }
    
    .grid-container[data-columns="4"] .grid-item[data-width-span="1"] {
        grid-column: span 1;
    }
}

@media (max-width: 767px) and (min-width: 561px) {
    /* Convert 3+ columns to 2-column */
    .grid-container[data-columns="4"],
    .grid-container[data-columns="3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Override inline styles for tablets */
    .grid-container[data-columns="3"][style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Adjust spanning for 2-column layout */
    .grid-container .grid-item[data-width-span="3"],
    .grid-container .grid-item[data-width-span="2"] {
        grid-column: span 2;
    }
    
    .grid-container .grid-item[data-width-span="1"] {
        grid-column: span 1;
    }
    
    /* Override inline grid-column spanning for tablets */
    .grid-item[style*="grid-column: span 3"] {
        grid-column: span 2 !important;
    }
    
    /* Keep height spanning intact */
    .grid-container .grid-item[data-height-span="2"] {
        grid-row: span 2;
    }
}

@media (max-width: 560px) {
    /* Force all layouts to single column on mobile */
    .grid-container[data-columns="4"],
    .grid-container[data-columns="3"],
    .grid-container[data-columns="2"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Override inline styles for mobile */
    .grid-container[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Reset all spanning to single column */
    .grid-container .grid-item[data-width-span] {
        grid-column: span 1 !important;
    }
    
    /* Override inline grid-column styles */
    .grid-item[style*="grid-column"] {
        grid-column: span 1 !important;
    }
    
    /* Reset height spanning on mobile for better flow */
    .grid-container .grid-item[data-height-span] {
        grid-row: span 1 !important;
    }
    
    /* Override inline grid-row styles */
    .grid-item[style*="grid-row"] {
        grid-row: span 1 !important;
    }
}

/* Grid gap adjustments based on settings */
@media (max-width: 991px) {
    .grid-container[data-gap="small"] {
        gap: 8px;
    }
    
    .grid-container[data-gap="normal"] {
        gap: 15px;
    }
    
    .grid-container[data-gap="large"] {
        gap: 20px;
    }
    
    /* Fallback for containers without data-gap */
    .grid-container:not([data-gap]) {
        gap: 15px;
    }
}

@media (max-width: 767px) and (min-width: 561px) {
    .grid-container[data-gap="small"] {
        gap: 6px;
    }
    
    .grid-container[data-gap="normal"] {
        gap: 12px;
    }
    
    .grid-container[data-gap="large"] {
        gap: 15px;
    }
    
    /* Fallback for containers without data-gap */
    .grid-container:not([data-gap]) {
        gap: 12px;
    }
}

@media (max-width: 560px) {
    .grid-container[data-gap="small"] {
        gap: 4px;
    }
    
    .grid-container[data-gap="normal"] {
        gap: 8px;
    }
    
    .grid-container[data-gap="large"] {
        gap: 10px;
    }
    
    /* Fallback for containers without data-gap */
    .grid-container:not([data-gap]) {
        gap: 8px;
    }
}