/* FIRST MEDIA QUERY FOR THE HOME SECTION */
@media (width < 410px){
  #home{
    width: 100%;
    height: 100vh;
  }
  .navbar{
    color: white;
    height: 10vh;
    width: 100%;
    background: transparent;
    
  }
  #navbarNavDropdown{
    background: linear-gradient(315deg, #69140e 0%, #d58936 74%);
  }

    .content h1{
        font-size: 35px;
    }

    .content h2{
        margin-top: 10px;
        font-size: 13px;
      }
      .content a{
        font-size: 15px;
        padding: 8px 35px;
        border-radius: 12px;
        background: transparent;
        margin-top: 15px;
        outline: 1px solid white;
        outline-offset: -3px;
      }

      .content a:hover{
        padding: 15px 25px;
        border-radius: 12px;
       }
      .content h3{
        letter-spacing: 1px;
        font-size: 17px;
        text-shadow: orange 5px 5px 5px;
        margin-top: 15px;
      }

}

/*SECOND MEDIA QUERY FOR THE HOME SECTION  */
@media (width < 768px) {
    #home{
      width: 100%;
      height: 100vh;
    }
    .navbar{
      color: white;
      height: 10vh;
      width: 100%;
      background: transparent;
      
    }
   
    .content h1{
        font-size: 45px;

    }

    .content h2{
        margin-top: 13px;
        font-size: 20px;
      }
      .content a{
        font-size: 20px;
        padding: 15px 35px;
        border-radius: 13px;
        margin-top: 18px;
        outline: 1px solid white;
        outline-offset: -5px;
      }
      .content a:hover{
        padding: 20px 30px;
        border-radius: 30px;
       }
      .content h3{
        letter-spacing: 2px;
        font-size: 21px;
        text-shadow: orange 5px 5px 5px;
        margin-top: 20px;
      }
     
}

/*FIRST MEDIA QUERY FOR THE SERVICE SECTION  */
@media (width < 768px) { 
    #services{
        height: 170vh;
        width: 100%;
    }

    .sub{
        width:100%;
        height: 150vh;
        color: white;
        
    }
    #services h1{
        font-size: 25px;
    }

    .serv-desc{
        font-size: 10px;
    }
    .accordion-flush{
        width: 80%;
        margin-left: 10%;
    }

    .accordion-body{
       font-size: 10px;        
    }

    .accordion-button.collapsed{
        font-size: 14px;
        font-weight: bold;
    }    

} 

/*SECOND MEDIA QUERY FOR THE SERVICE SECTION  */
@media (width < 768px) {
    #services{
        height: 170vh;
        width: 100%;
    }

    .sub{
        width:100%;
        height: 150vh;
        color: white;
        margin-bottom: 10px;
        
    }
    #services h1{
        font-size: 30px;
    }

    .serv-desc{
        font-size: 12px;
    }   
    .accordion-flush{
        width: 80%;
        margin-left: 10%;
    }

    .accordion-body{
       font-size: 12px;        
    }

    .accordion-button.collapsed{
        font-size: 17px;
        font-weight: bold;
    }
}


/*FIRST MEDIA QUERY FOR THE ABOUT SECTION  */
@media (width < 768px){

    #about{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }
    .jolly-pic{
      width: 90%;
    }
    #about img{
        width: 120px;
        height:150px;
        margin-left: 10px;
        border-radius: 50%;
      }
      .jolly-name{
        width: 90%;
      }
      #about h1{
        font-family: 'Splash', cursive;
        letter-spacing: 2px;
        font-size: 25px;
        text-align: center;
        text-shadow: orange 5px 5px 5px;
      }

      #about h1 span{
        font-family: 'Splash', cursive;
        letter-spacing: 1px;
        font-size: 20px;
      }
      .jolly-text{
        width: 100%;
      }
      #about P{
        font-size: 12px;
        text-shadow: orange 5px 5px 5px; 
      }

}

/*SECOND MEDIA QUERY FOR THE ABOUT SECTION  */
@media (width < 768px){

    #about{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }
    .jolly-pic{
      width: 100%;
    }
    
    #about img{
        width: 150px;
        height:200px;
        margin-left: 20px;
        border-radius: 50%;
      }

      .jolly-name{
        width: 100%;
      }

      #about h1{
        display: flex;
        flex-direction: column;
        font-family: 'Splash', cursive;
        letter-spacing: 2px;
        font-size: 30px;
        text-align: center;
        justify-content: center;
        text-shadow: orange 5px 5px 5px;
      }

      #about h1 span{
        font-family: 'Splash', cursive;
        letter-spacing: 1px;
        font-size: 22px;
      }
      .jolly-text{
        width: 90%;
      }

      #about p{
        font-size: 12px;
        text-shadow: orange 5px 5px 5px; 
      }

}


/*FIRST MEDIA QUERY FOR THE CONTACT-US SECTION  */
@media (width < 768px){
  #contact-us h1{
    font-size: 25px;
  }
  
  .contact-desc{
    width: 80%;
    font-size: 12px;
  }

  #contact-form {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 70vh;
  }

}


/*SECOND MEDIA QUERY FOR THE CONTACT-US SECTION  */
@media (width < 768px) {

  .jolly-social{
    display: flex;
    width: 100%;
    justify-content: space-evenly;  
    cursor: pointer;
  }
  #contact-us h1{
    font-size: 30px;
  }
  
  .contact-desc{
    width: 80%;
    font-size: 14px;
  }

  #contact-form {
    width: 80%;
    height: 75vh;
  }

}

#client-container{
  height: 90vh;
  width: 100% ;
}
.heady{
  display: flex;
  width: 100%;
}

.heady-title{
  font-size:23px;
}

.heady-desc{
  font-size: 13px;
}

.carousel-inner img{
  width: 70px !important;
  height: 70px !important;
  border-radius: 7px !important;
}

.carousel-inner{
  width: 100% !important;
  height: 100% !important;
}
.carousel-inner #client-list h3{
  font-size: 22px !important;
}
.carousel-inner #client-list p{
  font-size: 13px !important;
}


/* MEDIA QUERY FOR THE FOOTER BEGINS HERE  */
@media (width  < 900px){
  footer{
      display:flex;
      flex-direction: column;
      background-color: #454545;  
      width: 100%;
      height: 40vh;
      color: white;
      justify-content: space-evenly;
      place-items: center;
      font-size:14px;
      
      }
  .lists{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20px;

  }
  }