/* Mobile First Responsive Design */

/* Base styles for mobile (applies to all devices) */
.hero-title {
  font-size: var(--fs-2xl);
}

.hero-subtitle {
  font-size: var(--fs-lg);
}

.hero-desc {
  font-size: var(--fs-base);
}

.section {
  padding: var(--spacing-lg) 0;
}

.hero-shape-1,
.hero-shape-2 {
  display: none;
}

/* Base item styles for mobile */
.services-item img {
  height: 150px;
}

.team-member img {
  width: 150px;
  height: 150px;
}

.contact-form {
  padding: var(--spacing-lg);
}

.gallery-item img {
  height: 200px;
}

/* Hero section mobile */
.hero-section {
  min-height: 70vh;
  text-align: center;
}

.hero-content {
  padding: var(--spacing-lg);
}

/* FAQ mobile */
.faq-question {
  font-size: var(--fs-small);
  padding: var(--spacing-sm);
}

.faq-answer {
  padding: var(--spacing-sm);
  font-size: var(--fs-small);
}

/* Footer mobile */
.footer {
  text-align: center;
}

.footer .row > div {
  margin-bottom: var(--spacing-lg);
}

/* Form mobile */
.form-control {
  font-size: 16px; /* Prevents zoom on iOS */
}

/* Swiper mobile */
.swiper-wrapper {
  transform: none !important;
}

.swiper-slide {
  transform: none !important;
}

.swiper-pagination,
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

/* Navigation mobile */
.navbar-collapse {
  background: var(--primary-navy);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: 5px;
}

.navbar-nav .nav-link {
  padding: var(--spacing-sm) 0 !important;
  border-bottom: 1px solid var(--navy-light);
}

.navbar-nav .nav-link:last-child {
  border-bottom: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .hero-title {
    font-size: var(--fs-3xl);
  }
  
  .hero-shape-1,
  .hero-shape-2 {
    display: block;
  }
  
  .services-item img {
    height: 180px;
  }
  
  .team-member img {
    width: 180px;
    height: 180px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .hero-title {
    font-size: var(--fs-3xl);
  }
  
  .hero-subtitle {
    font-size: var(--fs-xl);
  }
  
  .hero-desc {
    font-size: var(--fs-lg);
  }
  
  .section {
    padding: var(--spacing-xl) 0;
  }
  
  .services-item img {
    height: 200px;
  }
  
  .team-member img {
    width: 200px;
    height: 200px;
  }
  
  .contact-form {
    padding: var(--spacing-xl);
  }
  
  .gallery-item img {
    height: 250px;
  }
  
  .hero-section {
    min-height: 100vh;
    text-align: left;
  }
  
  .hero-content {
    padding: 0;
  }
  
  .faq-question {
    font-size: var(--fs-base);
    padding: var(--spacing-md);
  }
  
  .faq-answer {
    padding: var(--spacing-md);
    font-size: var(--fs-base);
  }
  
  .footer {
    text-align: left;
  }
  
  .footer .row > div {
    margin-bottom: 0;
  }
  
  /* Swiper enabled for tablet and up */
  .swiper-wrapper {
    transform: translate3d(0,0,0) !important;
  }
  
  .swiper-slide {
    transform: translate3d(0,0,0) !important;
  }
  
  .swiper-pagination,
  .swiper-button-next,
  .swiper-button-prev {
    display: block !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .hero-title {
    font-size: var(--fs-4xl);
  }
  
  .section {
    padding: var(--spacing-2xl) 0;
  }
  
  /* Navigation desktop */
  .navbar-collapse {
    background: transparent;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
  }
  
  .navbar-nav .nav-link {
    padding: var(--spacing-xs) var(--spacing-md) !important;
    border-bottom: none;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Additional styles for extra large screens if needed */
}

/* Bootstrap Grid Enhancement - работает совместно с Bootstrap классами */
/* Обеспечиваем правильные отступы между элементами в Bootstrap сетке */
.row > [class*="col-"] {
  padding-bottom: var(--spacing-lg);
}

/* Убираем нижний отступ у последней строки */
.row:last-child > [class*="col-"] {
  padding-bottom: 0;
}

/* Специальные стили для секций с фоном */
.bg-light .row > [class*="col-"] {
  padding-bottom: var(--spacing-lg);
}

/* Стили для item элементов, чтобы они занимали полную высоту колонки Bootstrap */
.services-item,
.priceplan-item,
.process-item,
.timeline-item,
.blog-item,
.career-item,
.info-item,
.case-study-item,
.feature-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Выравнивание контента внутри карточек */
.services-item > *:last-child,
.priceplan-item > *:last-child,
.blog-item-content > *:last-child {
  margin-bottom: 0;
  margin-top: auto;
}