:root{
    --text-color: #F19C1A;
    --white-color: #fff;
    --black-color: #333;
    --text-light-color: #4d4d4d;
    --about-bg-color: #f2e9f6;
    --footer-bg-color: #7B1FA2;
}


/* rem and em do Not depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/*================================================
  BELOW 1200px (Smaller desktops)
==================================================*/
@media (max-width:75em){
    html{
        font-size: 56.25%;
    }
    .header{
       padding: 2rem 7%;
    }
}

/*================================================
  BELOW 992px (Smaller desktops)
==================================================*/
@media (max-width: 62em){
    .hero,
    .our-band,
    .our-client{
        padding-left:  7%;
        padding-right:  7%;
    }
    
    .faq{
        padding: 8rem;
    }
    
    .footer .grid{
        justify-content: space-around;
        gap: 3.2rem;
    }
   
}

/*================================================
  BELOW 768px (tab/tablet)
==================================================*/
@media(max-width:48em){
    html{
        font-size: 50%;
    }
    .hero-img{
        display: none;
    }
    .hero .grid-cols-2{
        grid-template-columns: 1fr;
    }
    .hero-content-box{
        text-align: center;
    }
    .band-logo{
        grid-template-columns: 1fr;
    }
    .about .grid-col-2{
        grid-template-columns: 1fr;
    }

    /* mobile navigation */
   .btn-mobile-nav{
    display: block;
    z-index: 9999;
   }
   .icon-mobile-nav{
    color: var(--white-color);
  }
  .navbar{
    background-color: var(--footer-bg-color);
    position: absolute;
    top: 89%;
    left: 0;
    width: 100%;
    padding: 3.2rem;
    transform: translateX(100%);
  
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    transition: all 0.2s linear;
    z-index: 99999;
  
    
  /* Hide Navigation */ 
    opacity: 0;
  
    pointer-events: none;
    visibility: hidden;
  }
  .nav-open .navbar{
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    z-index: 999;
  }
  .nav-open .icon-mobile-nav[name="close-outline"]{
    display: block;
  }
  .nav-open .icon-mobile-nav[name="menu-outline"]{
    display: none;
  }
  .nav-open .main-nav-link:link,
  .nav-open .main-nav-link:visited{
    font-size: 2.4rem;
    color: var(--white-color);
    padding: 1.5rem;
  }
  
  /* mobile navigation end */
    
}

/*================================================
  BELOW 448px (Mobile phone)
==================================================*/
@media (max-width: 31em){
    html{
        font-size: 43.75%;
    }
 
    .faq_content_box.active .panel{
        max-height: 18rem;
    } 

    .footer .grid-footer{
        display: grid;
        grid-template-columns: 1fr;
    }
    .footer .logo-col,
    .footer .address-col{
        padding-left: 6.4rem;
    }
    .footer .social-link{
        margin-left: 2rem;
        justify-content: start;
    }

}