/* ==================================================
   responsive.css
   Responsive styles for IMPACT 2025
================================================== */

/* Large laptops */
@media (max-width:1200px){
  .container{width:94%;}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:40px;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
}

/* Tablets */
@media (max-width:991px){

  .top-bar{
    height:auto;
    padding:10px 15px;
  }

  .top-bar,
  .top-bar .container,
  .top-left,
  .top-right{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    text-align:center;
  }

  .header-card,
  .header-flex{
    display:flex;
    flex-direction:column;
    gap:18px;
    height:auto;
    padding:20px;
  }

  .main-nav,
  .menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
  }

  .logo-text img,
  .logo-area img{
    width:180px;
    height:auto;
  }

  .hero-title{font-size:42px;}
  .hero-buttons{flex-direction:column;}
  .team-grid,
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

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

  .timeline::before,
  .timeline-progress{
    left:25px !important;
    transform:none;
  }

  .timeline-item{
    width:100% !important;
    left:0 !important;
    padding-left:70px !important;
    padding-right:10px !important;
    text-align:left !important;
  }

  .timeline-item::after{
    left:16px !important;
  }
}

/* Mobile */
@media (max-width:767px){

  .header-card{
    border-radius:0;
    padding:15px;
  }

  .logo-text img,
  .logo-area img{
    width:150px;
  }

  .main-nav,
  .menu{
    flex-direction:column;
    gap:10px;
  }

  .main-nav a,
  .menu a{
    font-size:14px;
  }

  .register-btn{
    width:100%;
    text-align:center;
  }

  .hero-title,
  .main-about-title{
    font-size:32px;
  }

  .hero-content p,
  .content-paragraph{
    font-size:14px;
    line-height:1.8;
  }

  .about-section{
    margin:35px 15px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-col{
    align-items:center;
  }

  .form-row{
    flex-direction:column;
  }

  .form-row input{
    width:100%;
  }

  .footer-logo{
    margin:auto auto 20px;
    width:180px;
  }

  .footer-social{
    justify-content:center;
  }
}

/* Small phones */
@media (max-width:480px){

  .top-bar{
    padding:10px;
  }

  .top-left a,
  .contact-info a{
    font-size:12px;
  }

  .hero-title,
  .main-about-title{
    font-size:28px;
  }

  .section-heading h2{
    font-size:30px;
  }

  .register-btn{
    padding:10px 18px;
    font-size:14px;
  }

  .count-box{
    min-width:70px;
    padding:15px 10px;
  }

  .count-box h1{
    font-size:28px;
  }
}