/* Desktop First Approach */
.hamburger-menu {
  display: none;
}
/* Extra Large Devices (up to 1440px) */
@media screen and (max-width: 1440px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding: 1.75rem 1.5rem;
  }

  .hamburger-menu {
    display: none;
  }

  .tablet {
    transform: scale(0.9);
  }

  .feature-grid {
    gap: 0.5rem;
  }

  .feature-box img {
    width: 100% !important;
    height: auto;
  }
}

/* Large Devices (up to 1200px) */
@media screen and (max-width: 1200px) {
  .info-boxes .tablet-container img {
    width: 100%;
  }

  .tablet {
    transform: scale(0.8);
  }

  .hero-section {
    padding: 0 1rem;
  }

  .dashboard-section {
    margin-top: 6rem;
  }

  .landing-info {
    margin: 6rem 1.5rem;
    width: calc(100% - 3rem);
  }
}

/* Large Tablets (up to 1366px) */
@media screen and (max-width: 1366px) {
  .tablet {
    transform: scale(0.85);
  }
  
  .info-boxes .tablet-container {
    transform: translateX(25%);
  }
}

/* Medium Tablets (up to 1180px) */
@media screen and (max-width: 1180px) {
  .tablet {
    transform: scale(0.75);
  }
  
  .info-boxes .tablet-container {
    transform: translateX(20%);
  }

  .hero-section .slider-title {
    font-size: 2.25rem;
  }
}

/* Small Tablets (up to 1024px) */
@media screen and (max-width: 1024px) {
  .tablet {
    transform: scale(0.7);
  }
  
  .info-boxes .tablet-container {
    transform: translateX(15%);
  }
}

/* Medium Devices (up to 768px) */
@media screen and (max-width: 768px) {
  .hamburger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #4D798F;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
    z-index: 100;
  }

  .hamburger-menu:hover {
    color: #00F598;
  }

  .hamburger-menu {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .hamburger-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    .header-left .categories {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(0, 25, 37, 0.98);
      flex-direction: column;
      padding: 5rem 2rem;
      z-index: 99;
      transition: all 0.3s ease;
    }

    .header-left .categories a {
      opacity: 1;
      pointer-events: auto;
    }

    .header-left .categories.active {
      display: flex;
    }

    .header-left .categories a {
      font-size: 1.5rem;
      padding: 1rem 0;
      text-align: center;
    }
  }

  .header-left .categories.active {
    display: flex;
  }

  .header-left .categories a {
    padding: 0.75rem 0;
  }

  .hero-section .slider-title {
    font-size: 2rem;
    max-width: 90%;
  }

  .hero-section .slider-subtitle {
    max-width: 80%;
    font-size: 1rem;
  }

  .info-boxes {
    flex-direction: column;
    padding: 1rem;
    margin-top: 6rem;
  }

  .info-boxes .why-need {
    width: 100%;
    margin-bottom: 2rem;
  }

  .info-boxes .tablet-container {
    width: 100%;
    transform: translateX(0) !important;
  }

  .faq-section {
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
  }

  .faq-section .texts {
    width: 100%;
    text-align: center;
  }

  .faq-section .faq-box {
    width: 100%;
  }

  .footer-content {
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 1rem;
  }

  .footer .evo-des {
    width: 100%;
  }

  .tablet .article .tab-content .dashboard-tab {
    flex-direction: column;
  }

  .tablet .article .tab-content .dashboard-tab .dashboard-left,
  .tablet .article .tab-content .dashboard-tab .dashboard-right {
    width: 100%;
  }
}

/* Tablets (up to 768px) */
@media screen and (max-width: 768px) {
  .header-right {
    gap: 0.5rem;
  }

  .header-right .currency-select,
  .header-right .basket-icon,
  .header-right .cfx-icon {
    display: none;
  }

  .hero-buttons {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }

  .hero-buttons .explores,
  .hero-buttons .discords {
    width: 100%;
  }

  .hero-buttons .explore-text,
  .hero-buttons .discord-text {
    width: 100%;
  }

  .features-boxes .sub-title {
    margin-left: 0;
    width: 100%;
    padding: 0 1rem;
  }

  .tablet {
    transform: scale(0.6);
  }

  .features-boxes {
    margin-top: 8rem;
  }

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

  .dl-top .chart-div,
  .dl-top .states-div {
    width: 100% !important;
  }

  .tablet .header {
    flex-direction: column;
    height: auto !important;
  }

  .tablet .header .left,
  .tablet .header .right {
    width: 100% !important;
    padding: 1rem;
  }
}

/* Mobile Devices (up to 576px) */
@media screen and (max-width: 576px) {
    html, body {
      touch-action: manipulation; /* May help on some browsers to reduce pinch gestures */
      -ms-touch-action: manipulation;
      overscroll-behavior: contain; /* Helps control scroll/zoom behavior in some contexts */
    }
  .hero-section .slider-title {
    font-size: 1.5rem;
  }

  .welcome .main-title {
    font-size: 3rem;
  }

  .welcome .sub-words {
    font-size: 2rem;
  }

  .footer .contacts {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .footer .contanct-item {
    width: 48%;
  }

  .tablet {
    /* transform: scale(0.5); */
    display: none;
  }

  .info-boxes .why-need .title {
    font-size: 1.5rem;
  }

  .info-boxes .why-need .sub-title {
    font-size: 1.5rem;
  }

  .info-boxes .why-need .description {
    font-size: 1rem;
  }

  .info-boxes .why-need .feature {
    gap: 1rem;
  }

  .landing-info .info-texts .title {
    font-size: 1.75rem;
  }

  .landing-info .info-items {
    gap: 1rem;
  }

  .info-items .info-item {
    width: 100%;
  }

  .features-boxes .title {
    font-size: 2rem;
    padding: 0 1rem;
  }
}

/* Small Mobile Devices (up to 400px) */
@media screen and (max-width: 400px) {
    html, body {
      touch-action: manipulation; /* May help on some browsers to reduce pinch gestures */
      -ms-touch-action: manipulation;
      overscroll-behavior: contain; /* Helps control scroll/zoom behavior in some contexts */
    }
  .hero-section .slider-title {
    font-size: 1.25rem;
  }

  .welcome .main-title {
    font-size: 2.5rem;
  }

  .tablet {
    transform: scale(0.4);
  }

  .footer-content {
    flex-direction: column;
  }

  .footer-content>div {
    width: 100%;
    text-align: center;
  }
}

/* Fix for tablet scale origin */
.dashboard-container {
  transform-origin: top center;
  overflow: visible !important;
}

/* Animation Fixes for Mobile */
@media screen and (max-width: 768px) {
  @keyframes tabletmove {
    0% {
      opacity: 0;
      transform: translateX(0);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}