/* Fix über-uns.html layout and text for mobile */
@media (max-width: 767px) {
  /* Masthead section: stack content, remove split, center text */
  .section-masthead__inner.section-fullheight__inner.section-fullheight__inner_mobile.container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 8px !important;
    min-height: 220px !important;
    background: none !important;
    box-shadow: none !important;
  }
  .section-masthead__heading {
    text-align: center !important;
    font-size: 24px !important;
    margin: 16px 0 8px 0 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .section-masthead__background {
    display: none !important;
  }
  /* Blog/content section: remove left margin, fix text */
  .section-blog .container.bg-white-1.py-medium.section-offset__content {
    padding: 8px 4px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .section-blog .row.justify-content-center {
    margin: 0 !important;
    width: 100% !important;
  }
  .section-blog .col-lg-8 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .section-blog h4 {
    font-size: 18px !important;
    margin: 12px 0 6px 0 !important;
    text-align: center !important;
    color: #ff9148 !important;
  }
  .section-blog p {
    font-size: 14px !important;
    margin: 8px 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
    word-break: break-word !important;
  }
  .section-blog strong {
    font-size: 15px !important;
  }
  .gallery, .row.gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 0 !important;
    width: 100% !important;
  }
  .gallery img, .row.gallery img {
    max-width: 90vw !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}
/* Fix slider stacking and swipe area on mobile */
@media (max-width: 767px) {
  .section-slider-projects-fullscreen .row.h-100.align-items-center.mx-0.flex-lg-nowrap {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }
  .slider-projects-fullscreen__col-content,
  .slider-projects-fullscreen__col-images {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: unset !important;
    height: auto !important;
    position: static !important;
  }
  .slider-projects-fullscreen__content,
  .slider-projects-fullscreen__images {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 220px !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .slider-projects-fullscreen__images .swiper-wrapper {
    width: 100% !important;
    min-height: 180px !important;
    height: auto !important;
    margin: 0 !important;
  }
  .slider-projects-fullscreen__images .swiper-slide {
    width: 100% !important;
    min-height: 180px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
  }
  .slider-projects-fullscreen__images img {
    max-width: 90vw !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* Make the whole slider area swipeable */
  .slider-projects-fullscreen__fluid-container {
    touch-action: pan-y pan-x !important;
  }
}
/*
  ================================================
  AGP Trading - MOBILE-FIRST RESPONSIVE DESIGN
  ================================================
  This file fixes ALL mobile display issues:
  1. Text overlapping & formatting
  2. Form layout & spacing
  3. Navigation & menus
  4. Slider sizing
  5. General layout width issues
  ================================================
*/

/* ================================================
   CRITICAL MOBILE RESETS (ALL DEVICES)
   ================================================ */

@media (max-width: 767px) {
  /* Root fixes */
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px;
    line-height: 1.6;
  }

  /* Container resets */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Column resets */
  [class*="col-"],
  .col-12,
  .col-11,
  .col-10,
  .col-9,
  .col-8,
  .col-7,
  .col-6,
  .col-5,
  .col-4,
  .col-3,
  .col-2,
  .col-1 {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove inline width styles */
  [style*="width"],
  [style*="max-width"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Image fixes */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Global box model */
  * {
    box-sizing: border-box !important;
  }
}

/* ================================================
   MOBILE TYPOGRAPHY (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  /* Headings */
  h1, .h1, .xl {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin: 12px 0 !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  h2, .h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 10px 0 !important;
    word-break: break-word !important;
  }

  h3, .h3 {
    font-size: 18px !important;
    margin: 8px 0 !important;
  }

  h4, .h4 {
    font-size: 16px !important;
    margin: 6px 0 !important;
  }

  h5, h6, .h5, .h6 {
    font-size: 14px !important;
  }

  p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 8px 0 !important;
    word-break: break-word !important;
  }

  a {
    word-break: break-word !important;
  }

  /* Section-specific typography */
  .section-masthead__heading {
    font-size: 28px !important;
    margin: 12px 0 !important;
  }

  .section-content__subline {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .slider__heading {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .section-content__content {
    padding: 0 !important;
  }
}

/* ================================================
   MOBILE SPACING (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  .section {
    padding: 24px 0 !important;
    margin: 0 !important;
  }

  .section-masthead {
    padding: 20px 0 !important;
  }

  /* Padding utilities */
  .p-small, .ps-small, .pe-small, .pt-small, .pb-small {
    padding: 12px !important;
  }

  .p-medium, .ps-medium, .pe-medium, .pt-medium, .pb-medium {
    padding: 16px !important;
  }

  .p-large, .ps-large, .pe-large, .pt-large, .pb-large {
    padding: 20px !important;
  }

  .pt-xlarge, .pb-xlarge {
    padding: 20px !important;
  }

  .pt-xsmall, .pb-xsmall {
    padding: 4px !important;
  }

  /* Margin utilities */
  .m-small, .ms-small, .me-small, .mt-small, .mb-small {
    margin: 12px !important;
  }

  .m-medium, .ms-medium, .me-medium, .mt-medium, .mb-medium {
    margin: 16px !important;
  }

  .m-large, .ms-large, .me-large, .mt-large, .mb-large {
    margin: 20px !important;
  }

  .my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .me-auto {
    margin-right: auto !important;
  }

  .ms-auto {
    margin-left: auto !important;
  }

  .mt-auto {
    margin-top: auto !important;
  }
}

/* ================================================
   MOBILE FORMS (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  .form {
    width: 100% !important;
    padding: 12px !important;
  }

  .form__row {
    margin-bottom: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .form__col {
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .input-float {
    width: 100% !important;
    position: relative;
  }

  .input-float__input {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 8px !important;
    min-height: 40px !important;
    border: 1px solid #ccc !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }

  textarea.input-float__input {
    min-height: 100px !important;
    resize: vertical !important;
    padding: 8px !important;
  }

  .input-float__label {
    font-size: 11px !important;
    padding: 2px 4px !important;
    display: block !important;
  }

  .button {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    border: none !important;
  }

  .button__label {
    display: block !important;
  }

  /* Privacy checkbox */
  input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
  }

  label {
    display: flex !important;
    align-items: flex-start !important;
    font-size: 12px !important;
  }

  /* Form error messages */
  .form__error {
    font-size: 11px !important;
    color: #d32f2f !important;
  }
}

/* ================================================
   MOBILE NAVIGATION (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  .header {
    padding: 8px 0 !important;
  }

  .header__container {
    padding: 8px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .logo {
    max-width: 80px !important;
  }

  .logo__wrapper-img {
    max-width: 100% !important;
    height: auto !important;
  }

  .header__burger {
    width: 28px !important;
    height: 20px !important;
    cursor: pointer !important;
  }

  .header__label {
    font-size: 11px !important;
  }

  .menu-overlay__item-wrapper {
    padding: 8px 12px !important;
  }

  .menu-overlay__heading {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .menu-overlay__subheading {
    font-size: 11px !important;
  }
}

/* ================================================
   MOBILE SLIDER (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  .swiper {
    width: 100% !important;
  }

  .swiper-slide {
    padding: 0 !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .swiper-wrapper {
    padding: 0 !important;
  }

  .slider__image {
    max-width: 80% !important;
    height: auto !important;
    margin-bottom: 12px !important;
  }

  /* Scale transform images */
  img[style*="scale"] {
    transform: scale(0.8) !important;
    max-width: 100% !important;
  }

  .slider__arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .slider__description {
    padding: 0 12px !important;
    text-align: center !important;
  }

  .slider-projects-fullscreen__description {
    font-size: 13px !important;
    margin: 8px 0 !important;
  }
}

/* ================================================
   MOBILE FOOTER (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  .footer {
    padding: 16px 0 !important;
  }

  .footer__inner {
    padding: 0 12px !important;
  }

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

  .widgettitle {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .textwidget {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .textwidget a {
    font-size: 12px !important;
  }

  .textwidget p {
    margin: 4px 0 !important;
  }
}

/* ================================================
   MODIFIER CLASSES (320px - 767px)
   ================================================ */

@media (max-width: 767px) {
  .text-center {
    text-align: center !important;
  }

  .text-left {
    text-align: left !important;
  }

  .text-right {
    text-align: right !important;
  }

  .d-flex {
    display: flex !important;
  }

  .d-block {
    display: block !important;
  }

  .d-inline-block {
    display: inline-block !important;
  }

  .flex-column {
    flex-direction: column !important;
  }

  .flex-wrap {
    flex-wrap: wrap !important;
  }

  .justify-content-center {
    justify-content: center !important;
  }

  .justify-content-between {
    justify-content: space-between !important;
  }

  .align-items-center {
    align-items: center !important;
  }

  .position-relative {
    position: relative !important;
  }

  .position-absolute {
    position: absolute !important;
  }

  .w-100 {
    width: 100% !important;
  }

  .h-auto {
    height: auto !important;
  }

  .gap-3 {
    gap: 12px !important;
  }
}

/* ================================================
   TABLET PORTRAIT (768px - 991px)
   ================================================ */

@media (min-width: 768px) and (max-width: 991px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .section {
    padding: 36px 0 !important;
  }

  h1, .h1, .xl {
    font-size: 36px !important;
  }

  h2, .h2 {
    font-size: 26px !important;
  }

  .section-masthead__heading {
    font-size: 40px !important;
  }

  .slider__heading {
    font-size: 28px !important;
  }

  .button {
    padding: 12px 24px !important;
  }

  .form {
    padding: 16px !important;
  }
}

/* ================================================
   DESKTOP (992px and up) - NO CHANGES
   ================================================ */

@media (min-width: 992px) {
  /* Desktop styles from main.css take precedence */
}