/* ==========================================
   BASE STYLES
   ========================================== */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ==========================================
   MOBILE OVERFLOW FIX (ONLY FOR MOBILE/TABLET)
   ========================================== */
@media (max-width: 991px) {
  /* Force no horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* App and Main containers */
  .app,
  .main,
  main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* All sections */
  section,
  .section-about,
  .section-categories,
  .section-concept,
  .section-parallax,
  .section-catalog,
  .section-stages {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Container */
  .container,
  .container-fluid {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Swiper fix */
  .swiper,
  .swiper-container,
  .swiper-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Hero and Slide - sadece overflow-x, height'a dokunma */
  .hero {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .slide-list {
    width: 100% !important;
  }

  .slide-list li:first-child {
    display: block !important;
  }

  .slide-material video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Parallax */
  .parallax,
  .parallax-photo,
  .parallax-body {
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Inner page */
  .inner-page__wrapper,
  .inner-page__content,
  .inner-page__row,
  .inner-page__article,
  .inner-page__sidebar {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Row negative margin fix */
  .row,
  ul.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Column padding fix */
  [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* UI Gutter classes - these cause the overflow! */
  .ui-gutter,
  .ui-gutter-15,
  .ui-gutter-25,
  .ui-gutter-30,
  .ui-gutter-40,
  .ui-gutter-large,
  .row.ui-gutter-large,
  .row.ui-gutter {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Categories section */
  .categories,
  .categories .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .categories-card.ui-large {
    max-width: 100% !important;
  }

  /* About section */
  .about,
  .about .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .about-right,
  .about-photo {
    max-width: 100% !important;
  }

  /* Concept section */
  .concept,
  .concept .row,
  .concept-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  /* Catalog section */
  .catalog,
  .catalog .swiper {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Stages section */
  .stages,
  .stages > ul,
  .stages .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Page content */
  .page-content__gallery,
  .page-content__gallery-list,
  .page-content__description {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Contact section */
  .contact,
  .contact .row,
  .contact-item .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Footer */
  .footer,
  .footer .row,
  .footer-middle .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Navigation */
  .navigation,
  .header {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ==========================================
   EXTRA SMALL DEVICES (max-width: 576px)
   ========================================== */
@media (max-width: 576px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .section-header .title {
    word-wrap: break-word;
  }

  .parallax-body .section-header {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .parallax-body .section-header .text {
    padding-left: 10px;
    padding-right: 10px;
  }
}