*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
       font-family: 'Rubik', 'Poppins';
}
header{ 
    font-size: 3.5rem;
    color: #024ba9;
    font-weight: 700;
    text-align: center;
}
.heading{
    font-size: 2rem;
    color: #024ba9;
    font-weight: 700;
    text-align: start;
}
.heading span{
    color: #690dac;
    text-shadow: 0 0 50px #690dac;
}
header span{
    color: #690dac;
    text-shadow: 0 0 50px #690dac;
}
.first-nav{
    padding-left: 8px;
    margin-left: 50px;
    height: 162.5px;
    width: 600px;
    box-shadow: 0 0 3px #013d86;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: grid;
    font-size: 1.5rem;
    color: #690dac;

}
.second-nav{
    padding-left: 8px;
    margin-left: 700px;
    height: 162.5px;
    width: 600px;
    box-shadow: 0 0 3px #013d86;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: grid;
    font-size: 1.5rem;
    color: #690dac;

}
.heading2{
    font-size: 2rem;
    color: #024ba9;
    font-weight: 700;
    text-align: end;
    margin-right: 100px;
}
.heading3{
    font-size: 2rem;
    color: #024ba9;
    font-weight: 700;
    text-align: start;
}
.third-nav{
    padding-left: 8px;
    margin-left: 50px;
    height: 162.5px;
    width: 600px;
    box-shadow: 0 0 3px #690dac;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: grid;
    font-size: 1.5rem;
    color: #690dac;

}

.fourth-nav{
    padding-left: 8px;
    margin-left: 700px;
    height: 162.5px;
    width: 600px;
    box-shadow: 0 0 3px #013d86;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: grid;
    font-size: 1.5rem;
    color: #690dac;

}
.heading4{
    font-size: 2rem;
    color: #024ba9;
    font-weight: 700;
    text-align: end;
    margin-right: 100px;
}

.fifth-nav{
    padding-left: 8px;
    margin-left: 50px;
    height: 162.5px;
    width: 600px;
    box-shadow: 0 0 3px #690dac;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: grid;
    font-size: 1.5rem;
    color: #690dac;

}
.heading5{
    font-size: 2rem;
    color: #024ba9;
    font-weight: 700;
    text-align: start;
}

.fas.fa-home{
    color: #690dac;
 font-size: 2rem;
    margin-left: 1250px;
    margin-top: 20px;
    text-shadow: 0 0 10px #024ba9;
}
/* Base styles remain as you have them */

/* Base styles stay mostly the same */

@media (max-width: 768px) {
  /* Make the content blocks narrower and shorter */
  .first-nav,
  .second-nav,
  .third-nav,
  .fourth-nav,
  .fifth-nav {
    width: 85vw;      /* smaller width */
    max-width: 350px; /* limit max width */
    height: auto;     /* auto height for flexibility */
    padding: 10px;
    font-size: 1rem;  /* smaller font */
    margin: 1rem auto; /* center with margin */
  }
  
  /* Smaller headings */
  .heading,
  .heading2,
  .heading3,
  .heading4,
  .heading5 {
    font-size: 1.5rem;
    text-align: center;
    margin: 0.5rem 0;
  }
  
  /* Smaller main header */
  header {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  /* Home icon smaller and repositioned */
  .fas.fa-home {
    font-size: 1.5rem;
    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 30px;
  }
}