/* Responsive Styles */

/* Extra Large Devices (large desktops) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* Large Devices (desktops) */
@media (max-width: 1199.98px) {
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.25rem;
  }
  
  .hero-text h1 {
    font-size: 3rem;
  }
}

/* Medium Devices (tablets) */
@media (max-width: 991.98px) {
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .section-padding {
    padding: 80px 0;
  }
  
  .hero-text {
    text-align: center;
    padding-bottom: 2rem;
  }
  
  .hero-text h1 {
    font-size: 2.5rem;
  }

  .hero-buttons {
    justify-content: center;
  }
  
  .roadmap-content {
    width: 70%;
  }
  
  .roadmap-item:nth-child(odd) .roadmap-content {
    margin-right: 30%;
  }
  
  .roadmap-item:nth-child(even) .roadmap-content {
    margin-left: 30%;
  }
}

/* Small Devices (landscape phones) */
@media (max-width: 767.98px) {
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  .section-padding {
    padding: 60px 0;
  }
  
  .hero-text h1 {
    font-size: 2.25rem;
  }
  
  .hero-buttons .btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .hero-buttons .btn:last-child {
    margin-bottom: 0;
  }

  .roadmap-line {
    left: 30px;
  }
  
  .roadmap-dot {
    left: 30px;
  }
  
  .roadmap-date {
    left: 30px;
    transform: none;
    width: auto;
  }
  
  .roadmap-content {
    width: calc(100% - 60px);
    margin-left: 60px !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  
  .roadmap-item:nth-child(odd) .roadmap-content li,
  .roadmap-item:nth-child(even) .roadmap-content li {
    padding-left: 30px !important;
    padding-right: 0 !important;
  }
  
  .roadmap-item:nth-child(odd) .check-icon, 
  .roadmap-item:nth-child(odd) .progress-icon, 
  .roadmap-item:nth-child(odd) .pending-icon {
    left: 0 !important;
    right: auto !important;
  }
  
  .social-links {
    flex-direction: column;
  }
  
  .social-link {
    width: 100%;
    justify-content: center;
  }
  
  .back-to-top {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
}

/* Extra Small Devices (portrait phones) */
@media (max-width: 575.98px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .section-padding {
    padding: 50px 0;
  }
  
  .hero-text h1 {
    font-size: 2rem;
  }
  
  .token-value {
    font-size: 1.75rem;
  }
  
  .table {
    font-size: 0.85rem;
  }
  
  .info-card, 
  .distribution-text, 
  .distribution-chart-container, 
  .vesting-container, 
  .feature-card, 
  .roadmap-content, 
  .community-card {
    padding: 1.5rem;
  }
  
  .social-link {
    padding: 0.6rem 1rem;
  }
  
  .footer {
    padding-top: 40px;
  }
  
  .footer-bottom {
    text-align: center;
  }
  
  .footer-bottom .text-md-end {
    text-align: center !important;
    margin-top: 1rem;
  }
}

/* Fix for Navigation on Mobile */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: rgba(23, 23, 23, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
  }
  
  .nav-link {
    padding: 0.75rem !important;
    border-radius: 4px;
  }
  
  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
  
  .nav-link::after {
    display: none;
  }
}