/* RESPONSIVE DESIGN FOR SCREENS BELOW 600PX */
@media screen and (max-width:600px){

  /* NAVIGATION */
  nav{
    
    align-items:center;
    padding:15px 20px;
    gap:15px;
  }

  nav h2{
    font-size:24px;
    text-align:center;
  }

  nav ul{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  nav ul li{
    font-size:16px;
  }

  /* HERO SECTION */
  .hero{
    height:100vh;
    padding:20px;
  }

  .hero::before{
    background-size:cover;
    background-position:center;
  }

  
  .hero h1 {
    font-size: 1.3rem;
    display:none;
    text-shadow: 0 0 20px #0ff;
  }
  .hero h2{
    display: flex;
    font-size:24px;
  }

  .hero p{
    font-size:16px;
    padding:0 10px;
  }
  .rhs{
    margin: -10px 0 -40px 0;
  }
  .btn{
    width:60%;
    max-width:150px;
    font-size:16px;
  }
  .logos {
    height: 30px;
    padding: left 60px;
  }
  /* GENERAL SECTION SPACING */
  .section,
  .about{
    padding:60px 20px;
    text-align:center;
  }

  .section h2,
  .about h2{
    font-size:28px;
  }

  .about p{
    font-size:16px;
    line-height:1.7;
  }

  /* GRID CARDS */
  .grid{
    grid-template-columns:1fr;
  }

  .card img{
    height:220px;
  }

  .card-content{
    font-size:18px;
    padding:20px;
  }

  /* GALLERY */
  .gallery{
    grid-template-columns:1fr;
  }

  .gallery img{
    height:auto;
  }

  /* FOOTER */
  footer{
    padding:25px 15px;
    font-size:14px;
  }

  /* FIX OVERFLOW ISSUES */
  body{
    overflow-x:hidden;
  }

  img{
    max-width:100%;
  }
}

@media screen and (max-width:400px){
  .hero h1 {
    font-size: 1.3rem;
    display:none;
    text-shadow: 0 0 20px #0ff;
  }
  .hero h2{
    display: flex;
    font-size:14px;
  }
  .rhs h2{
    font-size: 17px;
  }
  
  body {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background: radial-gradient(circle at top, #0d0d0d, #0c2249bb);
    color: #e0e0e0;
  }
}