@media (min-width: 1200px) and (max-width: 1440px) {
    #header-section {
        background-color: var(--primary-color);
    }
  .hero-section{
    height: 120vh;
  }
  .home-about {
    bottom: 3%;
  }
  .countown p:first-child {
    font-weight: 900;
    font-size: 32px;
  }
}
@media (min-width: 1700px) {
  .gear-image {
    display: block;
  }
}

@media (max-width: 1400px) {
  .navbar-nav{
      scrollbar-width: thin;
      overflow:auto;
      height:400px;
  }
}

/* MDDUIM DESKTOP SCREEN */
@media (min-width: 768px) and (max-width: 1024px) {
  /* HERO STYLES */
  #header-section {
    background-color: var(--primary-color);
  }
  .hero-content h1 {
    font-size: clamp(2.5rem, 7vw, 6rem);
  }
  /* .hero-content {
    padding: 10px;
    text-align: center;
    width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  } */

  .countown p:first-child {
    font-size: 32px;
  }

  .date-venue {
    font-size: 14px;
  }
  .hero-content{
    text-align: center;
  }

  .home-about-text{
    font: 16px;
    text-align: start;
  }

  .button-secondary,
  .button-secondary {
    padding: 0.5rem 1.5rem;
  }
  /* .hero-content {
    padding: 10px;
    text-align: center;
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
  } */
  .line {
    top: 50%;
    display: block;
  }



  .timmer-container{
    margin-top: 15px;
  }


  .home-about {
    bottom: 6%;
  }

  /* HERO STYLES END */

  /* IMPACT STYLES */
  .impact-container {
    left: 0;
    position: relative;
    transform: unset;
  }
  /* IMPACT STYLES END */

  /* ------ Info Section ----- */
  .info-section {
    height: 1000px;
  }
}
/* ONLY TABLET SCREEN */
@media (width: 768px) {
  /* IMPACT STYLES */
  .custom-border-top {
    border-top: 2px solid #080808;
  }
  .info-section {
    height: 1000px;
  }
  .council-item img {
    filter: grayscale(0%);
    }
    
    .council-item::after {
        transform: scaleX(1);
    }
    .council-item .social-icon{
        transform: translateX(0);
    }
}

/* MOBILE SCREEN */
@media (max-width: 550px) {
  /* HERO STYLES */
  #header-section {
    background-color: var(--primary-color);
  }

  .hero-content-wrapper {
    width: 100%;
  }

  .countown p:first-child {
    font-size: 32px;
  }

  
  .countown p:last-child {
    font-size: 12px;
  }

  .timmer-container{
    margin-top: 10px;
  }


  .date-venue {
    font-size: 14px;
  }

  .button-secondary,
  .button-secondary {
    padding: 0.5rem 1.5rem;
  }
  .hero-content {
    padding: 10px;
    text-align: center;
    /* width: 100%; */
    /* top: 30%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
  }
  .line {
    top: 50%;
    display: block;
  }

  .home-about-text {
    font-size: 15px;
    margin-bottom: 0.2rem;
  }

  .home-about {
    margin-top: 20px;
    /* bottom: 2%; */
  }
  
  .council-item img {
    filter: grayscale(0%);
    }
    
    .council-item::after {
        transform: scaleX(1);
    }
    .council-item .social-icon{
        transform: translateX(0);
    }


  /* HERO STYLES END */

  .section-subtitle span {
    line-height: 2.5rem;
  }

  /* IMPACT STYLES */
  .impact-container {
    left: 0;
    position: relative;
    transform: unset;
  }

  .custom-border-top {
    border-top: 2px solid #080808;
  }

  /* IMPACT STYLES END */

  /* ABOUT STYLES */
  .about-image-wrapper {
    width: 300px;
    height: 300px;
  }
  .bg-image {
    left: 0%;
  }

  /* TRACKS STYLE */
  .info-section {
    height: 1000px;
  }
  .focused-tracks img {
    width: 250px;
    height: 250px;
  }

  /* Info Section */

  .circle-div {
    top: 25%;
  }
  .circle-div:nth-child(4) {
    top: 50%;
    left: 100px;
  }

  .circle-div:nth-child(2) {
    top: 50%;
    left: 80%;
  }

  .circle-div:nth-child(3) {
    top: 75%;
    left: 50%;
  }

  .bg-circle {
    width: 220px;
    height: 220px;
  }

  .circle-div {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 380px) {
  .circle-div:nth-child(4) {
    top: 50%;
    left: 60px;
  }

  .line {
    display: none;
  }
}
