.mynav-bg,
.myfooter,
header {
  background-color: #00558b;
  background: linear-gradient(-45deg, #b75e46, #a44668, #4c8da2, #499985);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

/* About Nav and Fooer Style */
.aboutnav-bg,
.aboutfooter {
  background-color: #00558b;
  background: linear-gradient(-45deg, #b75e46, #a44668, #4c8da2, #499985);
  background-size: 120% 120%;
  animation: gradient 15s ease infinite;
}

/* End of Nav and Footer Style */
h1.mycolor {
  text-decoration-color: #00558b;
}

a i.iconsize {
  font-size: 48px;
}

.text-justify {
  text-align: justify !important;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* HOVER EFFECT */
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}


.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 50%;
  left: 10%;
  top: 25%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  padding-bottom: 20px;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2 {
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a,
.hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* END OF HOVER EFFECT */

/* Contact Us Section */

.hline-4 {
  background-image: -webkit-gradient(linear, left top, right top, from(#744fff), color-stop(51%, #21d397), to(#744fff));
  background-image: -webkit-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%);
  background-image: -o-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%);
  background-image: linear-gradient(to right, #744fff 0%, #21d397 51%, #744fff 100%);
  height: 3px;
  position: relative;
  background-size: 200% auto;
  z-index: 2;
  display: block;
  width: 50px;
  display: block;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

/*---- Contact Section ----*/
#cards_wrap {
  text-align: center;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

#cards_wrap .container {
  padding-top: 90px;
  padding-bottom: 100px;
}

#cards_wrap .icon-box i {
  font-size: 70px;
  margin-bottom: 40px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.cardc {
  border-radius: 5px;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.25);
}

.cardc .inner-box i:before {
  border-radius: 50%;
  padding: 30px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.cardc:hover .inner-box i:before {
  background: -webkit-linear-gradient(50deg, #2096ff, #05ffa3) !important;
  background: -o-linear-gradient(50deg, #2096ff, #05ffa3) !important;
  background: linear-gradient(40deg, #2096ff, #05ffa3) !important;
  color: #FFFFFF;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.cardc {
  background: #FFFFFF;
  padding: 50px 25px 30px 25px;
  border-radius: 5px;
  margin-top: 50px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.cardc:hover {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin-top: 50px;
  cursor: pointer;
}

.cardc p {
  margin-bottom: 10px;
  padding-bottom: 0px;
}

.cardc #direction {
  margin-bottom: 18px;
  padding-bottom: 0px;
}

/* Products Page*/
.bg {
  background-image: url('bg01.png');
  width: 100%;
}

/* End of Products Page design */
/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
  .phone p{
    text-align: start;
  }
}

/* // Small devices (landscape phones, less than 768px) */
/* @media (max-width: 767.98px) { ... } */

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
  .phone p{
    text-align: start;
  }
}

/* // Large devices (desktops, less than 1200px) */
/* @media (max-width: 1199.98px) { ... } */

/* // X-Large devices (large desktops, less than 1400px) */
/* @media (max-width: 1399.98px) { ... } */