/*=========== MOBILE RESPONSIVE CSS ===========*/

/* Mobile Navigation */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--white_a700);
  margin: 5px 0;
  transition: 0.3s;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Menu Styles */
@media only screen and (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }

  .header {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .header__top {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
  }

  .header__navigation {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--gray_900);
    flex-direction: column !important;
    padding: 80px 20px 20px !important;
    transition: left 0.3s ease-in-out;
    z-index: 999;
    overflow-y: auto;
  }

  .header__navigation.active {
    left: 0;
  }

  .header__menu {
    flex-direction: column !important;
    gap: 20px !important;
    width: 100%;
  }

  .header__menu a {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .header__button--signin {
    width: 100%;
    margin-top: 20px;
  }

  /* Hero Section Mobile */
  .group-485 {
    height: auto !important;
    min-height: 500px;
    padding: 40px 20px !important;
  }

  .home__title {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin: 20px 0 !important;
    padding: 0 20px;
    font-size: 28px !important;
    line-height: 1.3 !important;
    text-align: center;
  }

  .home__rectangle {
    display: none;
  }

  .home__title-1 {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin: 10px 0 !important;
    padding: 0 20px;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: center;
  }

  .home__clock-1,
  .home__image--maximize,
  .home__ellipse,
  .home__ellipse-1,
  .home__ellipse-2,
  .home__ellipse-3,
  .column,
  .group-1 {
    display: none !important;
  }

  .group-539 {
    position: relative !important;
    margin-top: 20px;
  }

  .home__image-3 {
    width: 100% !important;
    height: auto !important;
  }

  .group-538 {
    margin-top: 0 !important;
  }

  /* Features Section */
  .section__row {
    width: 100% !important;
    flex-direction: column;
    align-items: center !important;
    gap: 15px;
  }

  .section__content {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .section__feature,
  .section__feature--secondary {
    padding: 10px !important;
    flex-direction: column;
    text-align: center;
    width: 100% !important;
  }

  .section__icon--television,
  .section__icon--television-indigo {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto;
  }

  .section__assessments {
    padding: 10px !important;
    flex-direction: column;
    text-align: center;
  }

  .section__icons--assessments {
    width: 60px !important;
    margin: 0 auto;
  }

  .section__community {
    width: 100% !important;
  }

  .section__feature--community {
    flex-direction: column;
    text-align: center;
    justify-content: center !important;
  }

  /* Modules Section */
  .content-section__column--subjects,
  .content,
  .content-1 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .subject__container {
    flex-direction: column;
    text-align: center;
  }

  /* Cards - Make accordion items more touch-friendly */
  .card {
    margin-bottom: 10px;
  }

  .card-header button {
    padding: 15px !important;
    font-size: 16px !important;
    width: 100%;
    text-align: left;
  }

  .card-body {
    padding: 15px !important;
    margin-left: 0 !important;
  }

  .card-body ul {
    padding-left: 20px;
  }

  .card-body li {
    padding: 10px 0;
    font-size: 15px;
  }

  /* Image Container */
  .image-template {
    padding: 20px !important;
  }

  .image-container {
    width: 100% !important;
  }

  .image-container img {
    width: 100% !important;
  }

  /* Content Sections */
  .content-section__intro__text-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .content-section__intro__description {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left;
  }

  .content-section__projects {
    margin-left: 20px !important;
    margin-right: 20px !important;
    flex-direction: column !important;
  }

  .content-section__projects__image,
  .content-section__labs__image,
  .section__features-image,
  .section__benefits-image {
    width: 100% !important;
    height: auto !important;
    margin: 20px 0 !important;
  }

  .content-section__labs__info {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Review Section Mobile */
  .review-section {
    width: 95% !important;
    padding: 1.5rem 1rem !important;
    margin: 1rem auto !important;
  }

  .review-section__title {
    font-size: 1.5rem !important;
  }

  .review-section__average {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .review-section__average-value {
    font-size: 1.25rem !important;
  }

  .review-section__stars {
    font-size: 1.25rem !important;
  }

  .review-section__rating-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  .review-section__name-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  .review-section__name-row input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .review-section__comment-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  .review-section__comment-row textarea {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .review-section__review-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 5px;
  }

  .review-section__review-date {
    margin-left: 0 !important;
  }

  .review-section__pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .review-section__page-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }

  /* FAQ Section */
  .faq-section {
    padding: 0 20px !important;
  }

  .faq-section__answer {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  .group-2 {
    padding: 15px !important;
  }

  /* Footer Mobile */
  .footer__top {
    margin-left: 20px !important;
    margin-right: 20px !important;
    flex-direction: column !important;
  }

  .footer__logo-column,
  .footer__links-column,
  .footer__contact-column {
    width: 100% !important;
    padding: 0 !important;
  }

  .footer__bottom {
    margin-left: 20px !important;
    margin-right: 20px !important;
    flex-direction: column !important;
    text-align: center;
  }

  .footer__copyright {
    align-self: center !important;
    padding: 10px 0 !important;
  }

  .footer__socials {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 0 !important;
  }

  /* Image Overlays */
  .content-section__image-stack {
    padding: 20px !important;
    height: auto !important;
  }

  .content-section__image--first,
  .content-section__image--second {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    margin: 10px 0 !important;
  }

  /* Decorative Elements - Hide on Mobile */
  .home__clock,
  .home__image--cut,
  .home__image,
  .home__image-1,
  .home__image-2,
  .home__thumbs-up,
  .content-section__intro__clock,
  .content-section__labs__logo {
    display: none !important;
  }

  /* Text Widths */
  .text-block__description,
  .content-section__projects__details,
  .content-section__projects__exams-details,
  .content-section__labs__details,
  .content-section__labs__tools-details,
  .section__features-description,
  .section__features-description-1,
  .section__benefits-description,
  .section__benefits-description-1 {
    width: 100% !important;
  }

  /* Section Text Columns */
  .section__text-block,
  .content-section__projects__info,
  .content-section__labs__text-group,
  .section__features-column,
  .section__benefits-column,
  .content-section__text-column {
    width: 100% !important;
  }

  /* Buttons - Better Touch Targets */
  .ui.button {
    min-height: 48px;
    padding: 12px 20px !important;
  }

  /* Better Spacing */
  .group-449,
  .group-457,
  .group-453,
  .group-447 {
    margin-top: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .group-6 {
    padding: 20px !important;
  }

  .section-1,
  .content-section {
    gap: 30px !important;
  }
}

/* Tablet Adjustments (768px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .header {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }

  .header__navigation {
    width: 45% !important;
  }

  .header__menu {
    flex-wrap: wrap;
    gap: 15px !important;
  }

  .home__title {
    width: 50% !important;
    font-size: 40px !important;
  }

  .home__title-1 {
    width: 40% !important;
  }

  .review-section {
    width: 90% !important;
  }

  .content-section__column--subjects,
  .content,
  .content-1 {
    width: 100% !important;
  }
}

/* Landscape Mobile Adjustments */
@media only screen and (max-width: 768px) and (orientation: landscape) {
  .group-485 {
    min-height: 400px !important;
  }

  .home__title {
    font-size: 24px !important;
  }
}

/* Small Mobile (320px - 480px) */
@media only screen and (max-width: 480px) {
  .home__title {
    font-size: 24px !important;
    padding: 0 10px !important;
  }

  .home__title-1 {
    font-size: 14px !important;
  }

  .review-section__title {
    font-size: 1.25rem !important;
  }

  .ui.heading.size-heading2xl {
    font-size: 24px !important;
  }

  .ui.heading.size-headingxl {
    font-size: 20px !important;
  }

  .ui.text.size-textmd {
    font-size: 14px !important;
  }
}

/* Touch Device Improvements */
@media (hover: none) and (pointer: coarse) {
  /* Better touch targets */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger tap areas for accordions */
  .card-header button {
    padding: 18px !important;
  }

  /* Remove hover effects */
  .ui.button:hover,
  .dl-card:hover {
    transform: none;
  }
}