@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,700;1,500&display=swap');
body
{
    scroll-behavior: smooth;
}
.bg
{
    background-color: #ff8c00;
}
.phone
{
    color: #0f044c;
    font-size: 30px;
}
a
{
    text-decoration: none;
    font-weight: bolder;
    color: #0f044c;
}
h2
{
  color: #0f044c;
}
a:hover
{
    color: #ff8c00;
}
.navbar .nav-item .nav-link 
{
    color:#EEEEEE;
    font-weight: bold;
    font-size: 15px;
}
.navbar .nav-item .nav-link:hover
{
    color:#0f044c;
   
}
header
{
    background-image: url(../image/water-heater-kingwood.png);
    background-size:  cover;
}
.plum
{
    background-image: url(../image/home-plumbing.png);
    background-size:  cover;
}
.drain
{
    background-image: url(../image/slow-drain.png);
    background-size:  cover;
}
.leak
{
    background-image: url(../image/leaking.png);
    background-size:  cover;
}
.toilet
{
    background-image: url(../image/replace-toilet.png);
    background-size:  cover;
}
.sewer
{
    background-image: url(../image/sewer.png);
    background-size:  cover;
}
.disposal
{
    background-image: url(../image/Disposal.png);
    background-size:  cover;
}
.tank
{
    background-image: url(../image/Tankless-Water.png);
    background-size:  cover;
}
 h1
{
    color: #EEEEEE;
    font-weight: bolder;
}
header p
{
    color: #EEEEEE;
    
}
.bgimg
{
  background-color: #0f044c;
}
.btn
{
    background-color: #EEEEEE;
    color: #0f044c;
}
.btn:hover
{
    background-color: #ff8c00;
}
footer h4
{
  color: #EEEEEE;
  font-weight: bolder;
}
footer ul 
{
  list-style: none;
  margin: 0;
  padding: 0;
}
footer i
{
  color: #EEEEEE;
}
footer  li
{
  color: #EEEEEE;
}
footer  a
{
  color: #EEEEEE;
}
footer i:hover
{
  color: #ff8c00;
}
/* services-section */
.services-section
 {position: relative;width: 100%;padding: 0px 50px;top: -60px;display: flex;flex-flow: row wrap;
    justify-content: center;align-items: center;background: transparent;overflow: hidden; z-index: 2;}
.services-section div
 {padding: 15px 15px;display: flex;flex-flow: column wrap;justify-content: center;align-items: center;background: #0f044c;
    box-shadow: 0px 0px 0.5px #000;transition:all 1s ease;-ms-transition:all 1s ease;}
.services-section div img 
{width: 150px;height: 150px;transition:all 0.5s ease;-ms-transition:all 0.5s ease;}
.services-section div:hover
{
    background-color: #ff8c00;
    color: #0f044c;
}
.services-section div p 
{font-size: 16px;font-weight: normal;text-align:center;color: #fff;} 
/* services animation*/
#test1,#test2,#test3,#test4,#test5,#test6 {opacity:0;}
.pop  {transition:all 0.1s ease;-ms-transition: all 0.1s ease;animation: pop 1s cubic-bezier(.2, 0, .1, 0) forwards;}
.pop2 {transition:all 0.1s ease;-ms-transition: all 0.1s ease;animation: pop 1.1s cubic-bezier(.2, 0, .1, 0) forwards;}
.pop3 {transition:all 0.1s ease;-ms-transition: all 0.1s ease;animation: pop 1.2s cubic-bezier(.2, 0, .1, 0) forwards;}
.pop4 {transition:all 0.1s ease;-ms-transition: all 0.1s ease;animation: pop 1.3s cubic-bezier(.2, 0, .1, 0) forwards;}
.pop5 {transition:all 0.1s ease;-ms-transition: all 0.1s ease;animation: pop 1.4s cubic-bezier(.2, 0, .1, 0) forwards;}
.pop6 {transition:all 0.1s ease;-ms-transition: all 0.1s ease;animation: pop 1.5s cubic-bezier(.2, 0, .1, 0) forwards;}
@keyframes pop {
    0%{position: relative;top: 300px;opacity: .5;}
    100% {position: unset;top: 0;opacity: 1;}
}   
/* gallari */
.snip1584 {
  font-family: 'Raleway', sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  font-size: 16px;
  text-align: left;
}
.snip1584 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1584:before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 100%;
  content: '';

  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.snip1584 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}
.snip1584 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.snip1584 h3,
.snip1584 h5 {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}
.snip1584 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  text-transform: uppercase;
  font-weight: 400;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  margin-bottom: 5px;
}
.snip1584 h5 {
  font-weight: normal;
  background-color: #ff8c00;
  padding: 5px 10px;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1584 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1584:hover:before,
.snip1584.hover:before {
  top: 10px;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1584:hover h3,
.snip1584.hover h3,
.snip1584:hover h5,
.snip1584.hover h5 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.snip1584:hover h3,
.snip1584.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.snip1584:hover h5,
.snip1584.hover h5 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}