@media (min-width: 768px) and (max-width: 1024px) {
  .serviceItems ul {
    padding-top: 70px;
    padding-bottom: 10px;
    flex-direction: column;
  }
}
@media  (min-width: 320px) and (max-width: 470px){
  .headerLogo{
    width: 40px;
    height: 40px;
  }
  .headerLogo-compartment{
    gap: 1px;
  }
  .headerLogo-compartment h3 {
    font-size: 10px;
    padding: 0;
  }
  header nav ul{
    padding: 0;
  }
  header nav ul li {
    margin-left: 1.5vw;
    padding: 0;
    font-size: 11px;
  }
  header nav ul li:last-of-type {
    margin-right: 2px;
  }
 
  .topSection-image{
    height: 200px;
  }
  .topSection-bubble{
    position: absolute;
    margin-top: 60px;
    margin-left: 100px;
  }
  .topSection-bubble h1{
    font-size: 20px;
    font-weight: 700;
    width:120px;
  }
  .serviceSection {
    height: 100%;
  }
  .serviceSection-bubble{
    margin-left: 60px;
  }
  .serviceSection p {
    padding: 6px 0 0;
  }
  .serviceSection h1 {
    font-size: 20px;
  }
  .serviceItems {
    margin-top: calc((100%/6) + 10px );
  }
  .serviceItems ul{
    flex-direction: column;
  }
  .serviceItems ul li{
    padding-right: 0;
  }
  .serviceItems p{
    margin-top: 5vw;
  }
  .serviceItems h2{
    font-size: 12px;
  }
  .serviceItems-text{
    font-size: 10px;
    width: 60vw !important;
    background-color: #bcd0ff2b !important;
    border-radius: 5px;
    padding: 5px 10px;
  }
  .aboutUs-section{
    padding: 50px 0 50px;
  }
  .aboutUs-bubble{
    margin-left: 60px;
    font-size: 10px;
  }
  .aboutUs-bubble h1{
    font-size: 20px;
  }
  .aboutUs-bubble p{
    width: 60vw;
    background-color: #bcd0ff70 !important;
    padding: 5px 10px;
    border-radius: 5px;
  }
  .contactUs-section{
    padding: 50px 0 50px;
  }
  .contactUs-content{
    margin-left: 0px;
  }
  .contactUs-content h1{
    font-size: 20px;
    margin-left: 60px;
  }
  footer p{
    font-size: 12px;
    padding-bottom: 20px;
  }
}