MAINHACK

Viewing / Editing File: style.css

body{width: 100%; background:#fff ; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; }
a{text-decoration: none !important; border: none; outline: none; outline: none; font-family: 'Open Sans', sans-serif; transition: all 600ms ease-in-out;}
h1, h2, h3, h4, h5, h6, p{ padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; }
ul{ padding: 0; margin: 0; }
li{ list-style: none; border: none; outline: none; font-family: 'Open Sans', sans-serif; }
*{padding: 0;margin: 0;}
/*.container{ width: 1370px; }*/

/*Header*/
.header-top-block{ width: 100%; position: relative; background: #fff; display: block; padding: 10px 0; margin: 0; }
.header-top-block .logo{ width: 16%; padding: 0; margin: 0 auto; display: block; }
.header-top-block .logo img{ width: 100%; }

.goog-te-gadget-icon { display:none;}
.goog-te-gadget-simple { background-color: #037aa2 !important; border:0 !important; font-size: 10pt; font-weight:800; display: inline-block; padding:10px 10px !important; cursor: pointer; zoom: 1; }
.goog-te-gadget-simple  span { color:#fff !important; font-weight: 400; font-size: 16px; line-height: 18px;  }

.header-bottom-block{ width: 100%; position: relative; background: #037aa2; display: block; padding: 0; margin: 0; }
.header-bottom-block .menu{ width: 100%; text-align: center; padding: 10px 0; margin: 0 auto; display: block ruby; }
.header-bottom-block .menu ul.sf-menu{  padding: 0; }
/*.header-bottom-block .menu ul.sf-menu a { font-family: 'Open Sans', sans-serif; position: relative; display: block; text-align: center; background: none; border-radius: 30px; transition: .5s; color: #037aa2; border: none; padding: 0 10px; margin: 0; font-size: 17px; line-height: 20px; font-weight: bold; }*/

/*Banner Start*/
.banner{ width: 100%; position: relative; display: block; overflow: hidden; background: #00202f; padding: 0; margin: 0;  }
.banner img{ width: 100%; }

/*Banner Text Dec*/
/*.banner .banner-text{ width: 100%; position: absolute; content: ""; bottom: 130px; padding: 20px 0; margin: 0; }
.banner .banner-text .text-dec{ width: 90%; padding: 0 0 0 15px; margin: 0; border-left: 5px solid #feca36; }
.banner .banner-text .text-dec h2{  font-size: 60px; line-height: 70px; color: #feca36; padding: 0; margin: 0; font-weight: bold; text-transform: uppercase;  }
.banner .banner-text .text-dec h2 span{ color: #fff; }
.banner .banner-text .text-dec p{ font-size: 20px; line-height: 26px; color: #fff; padding: 15px 0 0 0; margin: 0;  letter-spacing: 2px; text-align: justify; }

.banner .banner-text .text-dec a{ position: relative; display: inline-block; padding: 16px 22px; margin: 30px 30px 0 0; color: #fff; text-transform: uppercase; transition: 0.5s; overflow: hidden;  font-weight: bold; width: 18%; text-align: center; letter-spacing: 1px; border: 1px solid #feca36; }
.banner .banner-text .text-dec a.active{ background: #feca36; color: #000; }
.banner .banner-text .text-dec a:hover{ background: #3e7c01; color: #fff; box-shadow: 0 0 5px #3e7c01, 0 0 15px #3e7c01, 0 0 30px #3e7c01, 0 0 50px #3e7c01;  letter-spacing: 4px; }
.banner .banner-text .text-dec a.active:hover{ background: #feca36; color: #fff; box-shadow: 0 0 5px #feca36, 0 0 15px #feca36, 0 0 30px #feca36, 0 0 50px #feca36;  letter-spacing: 2px; }*/

/*Inner Banner Start*/
.inner-banner{ width: 100%; position: relative; display: block; background: #f3f5fa; padding: 0; margin: 0; }
.inner-banner img{ width: 100%; }
.inner-banner h2{ position: absolute; content: ""; top: 100px; font-size: 60px; line-height: 70px; color: #fff; border-left: 5px solid #34bedb; padding: 0 0 0 22px; font-weight: bold; text-transform: uppercase; }
.inner-banner h2 span{ color: #34bedb; }

/*About Start*/
.about{ width: 100%; position: relative; display: block; background: #fff; padding: 50px 0; margin: 0; z-index: 9; }
.about h2{ font-size: 40px; line-height: 44px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; }
.about h2 span{ color: #34bedb; }
.about p{ font-size: 16px; line-height: 26px; color: #404040; padding: 15px 0; margin: 0; text-align: justify; }

.about a.about-btn { position: relative; padding: 10px 30px;  border: none; color: #fff; background-color: #34bedb; transition: all 0.2s ease; display: inline-block; font-size: 16px; line-height: 18px; }
.about a.about-btn:active { transform: scale(0.96); }
.about a.about-btn:before,
.about a.about-btn:after { position: absolute; content: ""; width: 150%; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1000; background-repeat: no-repeat; }
.about a.about-btn:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #34bedb 20%, transparent 30%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.about a.about-btn:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.about .about-image{ width: 100%; height: 370px; padding: 15px; margin: 0; border: 1px solid #34bedb; }
.about .about-image img{ width: 100%; height: 100%; }

/*Inner About Start*/
.inner-about-block{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0 0; margin: 0; }
.inner-about-block h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center; }
.inner-about-block .inner-about-box{ width: 100%; padding: 15px; margin: 0 0 30px; display: inline-block; border: 1px solid #34bedb; }
.inner-about-block .inner-about-box .inner-content-dec{ width: 100%; padding: 0; margin: 0; }
.inner-about-block .inner-about-box .inner-content-dec h3{ font-size: 24px; line-height: 30px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; text-align: center; }
.inner-about-block .inner-about-box .inner-content-dec p{ font-size: 16px; line-height: 26px; color: #000; padding: 10px 0; margin: 0; text-align: justify; }
.inner-about-block .inner-about-box .inner-content-dec img{ width: 100%; height: 150px; }
.inner-about-block .inner-about-box .inner-content-image{ width: 100%; padding: 10px; margin: 0; }
.inner-about-block .inner-about-box .inner-content-image img{ width: 100%; }

/*down-about*/
.down-about{ width: 100%; position: relative; display: block; background: #fff; padding:0 0 15px 0; margin: 0; }
.down-about h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; text-align: center; }
.down-about p{ font-size: 16px; line-height: 26px; color: #000; padding: 10px 0 30px; margin: 0; text-align: center; }
.down-about .down-about-box{ width: 100%; padding: 15px; margin: 0 0 30px; border: 1px solid #34bedb; height: 510px; }
.down-about .down-about-box .down-content-image{ width: 100%; padding: 0; margin: 0; }
.down-about .down-about-box .down-content-image img{ width: 100%; height: 250px; }
.down-about .down-about-box .down-content-dec{ width: 100%; padding: 0; margin: 0; }
.down-about .down-about-box .down-content-dec h3{ font-size: 24px; line-height: 30px; color: #037aa2; padding: 10px 0; margin: 0; font-weight: bold; text-align: center; }
.down-about .down-about-box .down-content-dec p{ font-size: 16px; line-height: 26px; color: #000; padding: 0; margin: 0; text-align: justify; }

/*Mission Vision & Value*/
.mission-block{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.mission-block .mission-block-box{ display: inline-block; width: 100%; padding: 15px 0; margin: 0 0 30px; border: 1px solid #34bedb; }
.mission-block .mission-block-box .mission-left-content{ width: 100%; padding: 0; margin: 0; }
.mission-block .mission-block-box .mission-left-content img{ width: 100%;  }
.mission-block .mission-block-box .mission-right-content{ width: 100%; padding: 0; margin: 0; }
.mission-block .mission-block-box .mission-right-content h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0 0 10px; margin: 0; font-weight: bold; }
.mission-block .mission-block-box .mission-right-content p{ font-size: 16px; line-height: 24px; color: #000; padding: 0; margin: 0; text-align: justify; }
.mission-block .mission-block-box .mission-right-content h3{ font-size: 24px; line-height: 30px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; }
.mission-block .mission-block-box .mission-right-content ul{ padding: 0; margin: 0; }
.mission-block .mission-block-box .mission-right-content ul li{ font-size: 16px; line-height: 24px; color: #000; padding: 5px 0; margin: 0; text-align: justify; }
.mission-block .mission-block-box .mission-right-content ul li img{ width: 4%; }
.mission-block .mission-block-box .mission-right-content ul li b{ font-size: 18px; color: #34bedb; padding: 0 5px; }

.mission-block .mission-block-box h3{ font-size: 24px; line-height: 30px; color: #037aa2; padding: 10px 0 0; margin: 0; font-weight: bold; }
.mission-block .mission-block-box ul{ padding: 0; margin: 0; }
.mission-block .mission-block-box ul li{ font-size: 16px; line-height: 24px; color: #000; padding: 5px 0; margin: 0; text-align: justify; }
.mission-block .mission-block-box ul li img{ width: 2%; }
.mission-block .mission-block-box ul li b{ font-size: 18px; color: #34bedb; padding: 0 5px; }

/*Team Start*/
.team-start{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0 0; margin: 0; }
.team-start .inner-team-box{ width: 100%; padding: 15px; margin: 0; display: inline-block; border: 1px solid #34bedb; }
.team-start .inner-team-box .team-content-dec{ width: 100%; padding: 0; margin: 0; }
.team-start .inner-team-box .team-content-dec h3{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; text-align: center; }
.team-start .inner-team-box .team-content-dec p{ font-size: 18px; line-height: 30px; color: #000; padding: 10px 0 0; margin: 0; text-align: center; }
.team-start .inner-team-box .team-content-dec img{ width: 100%; height: 250px; }

/*leadership-team*/
.leadership-team{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.leadership-team h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center; }
.leadership-team .inner-leadership-box{ width: 100%; padding: 15px; margin: 0; display: inline-block; border: 1px solid #34bedb; text-align: center; }
.leadership-team .inner-leadership-box .leadership-content-image{ width: 30%; padding: 0; margin: 0 auto; overflow: hidden; border-radius: 100px; }
.leadership-team .inner-leadership-box .leadership-content-image img{ width: 100%; }
.leadership-team .inner-leadership-box .leadership-content-dec{ width: 100%; padding: 0; margin: 0; }
.leadership-team .inner-leadership-box .leadership-content-dec h4{ font-size: 20px; line-height: 30px; color: #3e3e3e; padding: 10px 0; margin: 0; font-weight: bold; text-align: center; }
.leadership-team .inner-leadership-box .leadership-content-dec h5{ font-size: 16px; line-height: 26px; color: #34bedb; padding: 0; margin: 0; min-height: 80px; }
.leadership-team .inner-leadership-box .leadership-content-dec h3{ font-size: 24px; line-height: 30px; color: #037aa2; padding: 10px 0; margin: 0; font-weight: bold; text-align: center; }
.leadership-team .inner-leadership-box .leadership-content-dec p{ font-size: 16px; line-height: 26px; color: #000; padding: 0; margin: 0; }
.leadership-team p{ display: inline-block; font-size: 18px; line-height: 30px; color: #000; padding: 15px 0 0; margin: 0; text-align: center; }

/*Privacy Policy*/
.privacy{  width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.privacy p{ font-size: 16px; line-height: 24px; color: #000; padding: 10px 0; margin: 0; text-align: justify; }

/*Service Start*/

.service-1st{ width: 100%; position: relative; display: block; background: linear-gradient(to right, #037aa2, #34bedb); padding: 30px 0; margin: 0; }
.service-1st h2{ font-size: 40px; line-height: 44px; color: #fff; padding: 0; margin: 0; font-weight: bold; text-align: center; }
.service-1st h2 span{ color: #34bedb; }
.service-1st h3{ font-size: 22px; line-height: 26px; color: #fff; padding: 10px 0 30px; margin: 0; font-weight: bold; text-align: center; }
.service-1st #service-slider .item{ margin: 0 15px; }
.service-1st #service-slider-2 .item{ margin: 0 15px; }
.service-1st .service-box-content{ width: 100%; padding: 15px; margin: 0; border: 1px solid #fff;  }
.service-1st .service-box-content img{ width: 100%; }
.service-1st .service-box-content h4{ font-size: 18px; line-height: 20px; color: #037aa2; padding: 10px 0; margin: 0; font-weight: bold; text-align: center; background: #fff; min-height: 60px; }

/*ads Start*/
.ads{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; }
.ads .item{ width: 100%; }
.ads .item img{ width: 100%; }

/*Why Choose HOME TEAM?*/
.why-block{ width: 100%; position: relative; display: block; background: #fff; padding: 30px 0; margin: 0; z-index: 9; text-align: center; }
.why-block h2{ font-size: 40px; line-height: 44px; color: #037aa2; padding: 0 0 15px; margin: 0; font-weight: bold; }
.why-block h2 span{ color: #34bedb; }
.why-block .why-block-box{ width: 20%; float: left; padding: 0; margin: 0; }
.why-block .why-block-box img{ width: 35%; filter: drop-shadow(0 0 5px #037aa2); }
.why-block .why-block-box h4{ font-size: 16px; line-height: 20px; color: #037aa2; padding: 0; margin: 10px 0 30px; font-weight: bold; }

.why-block a.why-btn { position: relative; padding: 10px 30px;  border: none; color: #fff; background-color: #34bedb; transition: all 0.2s ease; display: inline-block; font-size: 16px; line-height: 18px; margin: 0;  width: 14%; }
.why-block a.why-btn:active { transform: scale(0.96); }
.why-block a.why-btn:before,
.why-block a.why-btn:after { position: absolute; content: ""; width: 150%; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1000; background-repeat: no-repeat; }
.why-block a.why-btn:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #34bedb 20%, transparent 30%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.why-block a.why-btn:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

/*Inner Why Start*/
.inner-why-block{ width: 100%; position: relative; display: block; color: #fff; padding: 50px 0; margin: 0; }
.inner-why-block .inner-why-content-box{ width: 100%; padding: 0; margin: 0; }
.inner-why-block .inner-why-content-box h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; }
.inner-why-block .inner-why-content-box ul{ padding: 0; margin: 0; }
.inner-why-block .inner-why-content-box ul li{ font-size: 16px; line-height: 22px; color: #000; text-align: justify; padding: 10px 0; margin: 0; }
.inner-why-block .inner-why-content-box ul li img{ width: 4%; }
.inner-why-block .inner-why-content-box ul li b{ font-size: 18px; padding: 0 5px; color: #037aa2; }

.inner-why-block ul{ padding: 0; margin: 0; }
.inner-why-block ul li{ font-size: 16px; line-height: 22px; color: #000; text-align: justify; padding: 10px 0; margin: 0; }
.inner-why-block ul li img{ width: 2%; }
.inner-why-block ul li b{ font-size: 18px; padding: 0 5px; color: #037aa2; }

.inner-why-block .inner-why-img-box{ width: 100%; padding: 15px; margin: 0; border: 1px solid #34bedb; }
.inner-why-block .inner-why-img-box img{ width: 100%; }
/*FAQ Start*/
.faq{ position: relative; width: 100%; display: block; background: #fff; padding: 50px 0; margin: 0; }
.faq h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center; }

.faq .card {
  width: 100%;
  margin: 0;
  border-radius: 2px;
  background: white;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
  
.faq .card article {
  position: relative;
  font-family: 'Roboto', sans-serif;
  transition: all .3s;
  background: #E8EAF6;
  border-top: 1px solid #fff;
  
  &.selected {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(2, 2, 2, 0.4);
    z-index: 2;
  } 
}
  
.faq .card article h3 {
  position: relative;
  background: #037aa2;
  padding: 20px 75px 20px 30px;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  overflow: hidden;
  transition: background .3s;
  
  &:hover,
  .selected & {
    cursor: pointer;
    background: #34bedb;
  }

&:before,
  &:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -1px;
    margin-right: 30px;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: transform .3s;
  }

&:before {
    transform: rotate(0deg);
    animation: close-line-one-in .8s forwards;
    
    .selected & {
      animation: close-line-one-out .8s forwards;
    }
  }
  
  &:after {
    transform: rotate(90deg);
    animation: close-line-two-in .8s forwards;
    
    .selected & {
      animation: close-line-two-out .8s forwards;  
    }
  }

}

.faq .card article .content {  
  opacity: 0;
  transform: translateY(20px);
  transition: all ease-out .4s .1s;
  
  .selected & {
    transform: translateY(0);
    opacity: 1;
  }
  
  .collapsed & {
    display: none;
  }
}

.faq .card article .content p {
  padding: 25px 30px 40px;
  background: #E8EAF6;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

@keyframes close-line-one-out {
    0%, 50% {
      transform: translateX(0);
    }
    75% { 
      transform: translateX(50px);
    }
    76% { 
      transform: translateX(50px) translateY(50px);
    }
    100% { 
      transform: rotate(45deg);
    }
}

@keyframes close-line-one-in {
    0%, 20% {
      transform: rotate(45deg);
    }
    60% { 
      transform: translateX(50px) translateY(50px) rotate(45deg);
    }
    61% { 
      transform: translateX(50px);
    }
    100% { 
      transform: rotate(0deg);
    }
}

@keyframes close-line-two-out {
    0%, 50% { 
      transform: rotate(90deg);
    }
    75% { 
      transform: translateY(-50px) rotate(90deg);
    }
    76% {
      transform: translateY(-50px) translateX(50px) rotate(90deg);
    }
    100% { 
      transform: rotate(135deg);
    }
}

@keyframes close-line-two-in {
    0% { 
      transform: rotate(135deg);
    }
    50% { 
      transform: translateY(-50px) translateX(50px) rotate(135deg);
    }
    51% { 
      transform: translateY(-50px) rotate(90deg);
    }
    100% { 
      transform: rotate(90deg);
    }
}

/*Glossary of Terms*/
.glossary{ width: 100%; display: block; position: relative; background: #fff; padding: 30px 0; margin: 0; }
.glossary  h2{ font-size: 38px; line-height: 44px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; text-align: center; }
.glossary p{ font-size: 16px; line-height: 24px; color: #000; padding: 10px 0 30px; margin: 0; text-align: center; }
.glossary ul{ padding: 0; margin: 0; }
.glossary ul li{ font-size: 16px; line-height: 24px; color: #000; padding: 10px 0; margin: 0; text-align: justify; }
.glossary ul li img{ width: 2%; }
.glossary ul li b{ font-size: 18px; color: #037aa2; padding: 0 5px; }

/*photo-gallery-block*/
.photo-gallery-block{ width: 100%; display: block; position: relative; background: #fff; padding: 30px 0; margin: 0; }
.photo-gallery-block h2{ font-size: 40px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center;}
.photo-gallery-block h2 span{ color: #34bedb; }
.photo-gallery-block #photo-slider .item{ margin: 0 15px; }
.photo-gallery-block img{ width: 100%; }

.photo-gallery-block .gallery-box{ position: relative; width: 100%; padding: 10px; margin: 0; float: left; border: 1px solid #34bedb; height: 245px; overflow: hidden; -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.photo-gallery-block .gallery-box img.pho-gall { width: 100%; height: 220px; }
.photo-gallery-block .gallery-box .view-caption { position: absolute; top:-140%; width: 100%; text-align: center; padding: 100px 0; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; background: rgba(0, 0, 0, 0.82); }
.photo-gallery-block .gallery-box:hover .view-caption { top: 0%; height:100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.photo-gallery-block .gallery-box .view-caption p {  transition:all 600ms ease-in-out;border: 1px solid #d00034; width: 50%; font-size: 14px; font-weight: 100; letter-spacing: 0; line-height: 18px; text-decoration: none; text-shadow: none; background: #000000; padding: 9px 15px; color: #fff !important; margin: 25px auto 0; text-transform: uppercase; }

/*Inner-photo Gallery*/
.inner-photo-gallery-block{ width: 100%; display: block; position: relative; background: #fff; padding: 30px 0; margin: 0; }
.inner-photo-gallery-block h2{ font-size: 40px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center;}
.inner-photo-gallery-block h2 span{ color: #34bedb; }
.inner-photo-gallery-block #photo-slider .item{ margin: 0 15px; }
.inner-photo-gallery-block img{ width: 100%; }

.inner-photo-gallery-block .gallery-box{ position: relative; width: 100%; padding: 10px; margin: 0 0 30px; float: left; border: 1px solid #34bedb; height: 245px; overflow: hidden; -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.inner-photo-gallery-block .gallery-box img.pho-gall { width: 100%; height: 220px; }
.inner-photo-gallery-block .gallery-box .view-caption { position: absolute; top:-140%; width: 100%; text-align: center; padding: 100px 0; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; background: rgba(0, 0, 0, 0.82); }
.inner-photo-gallery-block .gallery-box:hover .view-caption { top: 0%; height:100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.inner-photo-gallery-block .gallery-box .view-caption p {  transition:all 600ms ease-in-out;border: 1px solid #d00034; width: 50%; font-size: 14px; font-weight: 100; letter-spacing: 0; line-height: 18px; text-decoration: none; text-shadow: none; background: #000000; padding: 9px 15px; color: #fff !important; margin: 25px auto 0; text-transform: uppercase; }

/*Quote*/
.quote{ width: 100%; display: block; position: relative; background: url(../images/quote-banner.png) no-repeat; background-size: cover; padding: 60px 0; margin: 0; text-align: center; }
.quote p{ font-family: "EB Garamond", serif; font-size: 30px; line-height: 40px; color: #037aa2; font-weight: bold; padding: 0; margin: 0; }
/*Quote*/
.quote{ width: 100%; display: block; position: relative; background: url(../images/quote-banner.png) no-repeat; background-size: cover; padding: 60px 0; margin: 0; text-align: center; }
.quote p{ font-family: "EB Garamond", serif; font-size: 30px; line-height: 40px; color: #232323; font-weight: bold; padding: 0; margin: 0; }

/*Video Gallery*/
.video-gallery{ width: 100%; display: block; position: relative; background: #fff; padding: 30px 0; margin: 0; }
.video-gallery h2{ font-size: 40px; line-height: 44px; color: #037aa2; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center;}
.video-gallery h2 span{ color: #34bedb; }
.video-gallery #video-slider .item{ margin: 0 15px; }
.video-gallery .video-gallery-block{ width: 100%; padding: 0; margin: 0; }
.video-gallery .video-gallery-block iframe{ width: 100%; border: 1px solid #34bedb; padding: 10px; }

/*Inner-video-gallery*/
.inner-video-gallery{ width: 100%; display: block; position: relative; background: #fff; padding: 30px 0; margin: 0; }
.inner-video-gallery .video-gallery-block{ width: 100%; padding: 0; margin: 0 0 30px; }
.inner-video-gallery .video-gallery-block iframe{ width: 100%; border: 1px solid #34bedb; padding: 10px; }

/*Testimonial Start*/
.testimonial{ width: 100%; display: block; position: relative; background: url(../images/testimonial-banner.png) no-repeat; background-size: cover; padding: 30px 0; margin: 0; }
.testimonial h2{ font-size: 40px; line-height: 44px; color: #fff; padding: 0 0 30px; margin: 0; font-weight: bold; text-align: center;}
.testimonial h2 span{ color: #000; }
.testimonial #testimonial-slider .item{ margin: 0 15px; }
.testimonial .testimonial-box-content{ width: 100%; border: 1px solid #fff; padding: 10px; margin: 0; text-align: center; background: #037aa20f; }
.testimonial .testimonial-box-content .testimonial-img-block{  width: 100%;  }
.testimonial .testimonial-box-content .testimonial-img-block img{ width: 100%; }
.testimonial .testimonial-box-content .testimonial-dec-block{ width: 100%; }
.testimonial .testimonial-box-content .testimonial-dec-block h4{ font-size: 20px; line-height: 30px; color: #037aa2; padding: 10px 0; margin: 0; font-weight: bold; text-align: center; }
.testimonial .testimonial-box-content .testimonial-dec-block p{ font-size: 16px; line-height: 26px; color: #000; padding: 0; margin: 0; text-align: center; }
.testimonial .testimonial-box-content .testimonial-dec-block img.rating{ position: absolute; content: ""; bottom: 110px; right: 50px; width: 9%; }
.testimonial .testi-btn{ width: 100%; padding: 0; margin: 0; }
.testimonial .testi-btn a.why-btn { position: relative; padding: 10px 0;  border: none; color: #fff; background-color: #34bedb; transition: all 0.2s ease; display: block; font-size: 16px; line-height: 18px; margin:30px auto 0;  width: 14%; text-align: center; }
.testimonial .testi-btn a.why-btn:active { transform: scale(0.96); }
.testimonial .testi-btn a.why-btn:before,
.testimonial .testi-btn a.why-btn:after { position: absolute; content: ""; width: 150%; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1000; background-repeat: no-repeat; }
.testimonial .testi-btn a.why-btn:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #34bedb 20%, transparent 30%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.testimonial .testi-btn a.why-btn:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

/*Contact Us*/
.contact{ width: 100%; display: block; position: relative; background: #fff; padding: 60px 0; margin: 0; }
.contact h3{ font-size: 36px; line-height: 40px; color: #000; padding: 0 0 50px; margin: 0; font-weight: bold; text-align: center; text-transform: capitalize; }
.contact .contact-form{ width: 70%; padding: 0; margin: 0 auto; background: #fff; border: 2px solid #34bedb; display: block; position: relative;  }
.contact .contact-form h4{  font-size: 24px; line-height: 30px; color: #fff; background: #34bedb; text-align: center; padding: 10px 0; margin: 0; font-weight: bold; text-transform: capitalize;  }
.contact .contact-form form{ width: 70%; padding: 0; margin: 0; display: inline-block; }
.contact .contact-form form .fill-box{ width: 47%; float: left; padding: 20px 0 0; margin: 0 8px; }
.contact .contact-form form .fill-box label{ width: 100%; display: inline-block;  font-size: 14px; line-height: 16px; color: #000; padding: 0 0 10px; margin: 0; }
.contact .contact-form form .fill-box input{ width: 100%; display: inline-block;  font-size: 14px; line-height: 16px; color: #000; border: 1px solid #ccc; outline: none; padding: 10px; margin: 0;  }
.contact .contact-form form .message{ width: 96%; padding: 20px 0 0; margin: 0 10px; }
.contact .contact-form form .message textarea{ width: 100% !important; display: inline-block; height: 130px;  font-size: 14px; line-height: 16px; color: #000; padding: 10px; margin: 0; border: 1px solid #ccc; outline: none; }
.contact .contact-form form .fill-box input[type="submit"]{  position: relative; padding: 10px 0;  border: none; color: #fff; background-color: #037aa2; transition: all 0.2s ease; display: inline-block; font-size: 16px; line-height: 18px; margin: 0 0 15px; transition: all 400ms ease-in-out; width: 60%; }
.contact .contact-form form .fill-box input[type="submit"]:hover { letter-spacing: 1.2px; transition: all 400ms ease-in-out; }

.contact .map{ width: 28%; display: inline-block; height: 305px; margin: 0; border: 1px solid #ccc; position: absolute; content: ""; top: 158px; right: 176px; background: #fff; padding: 15px; }
.contact .map iframe{ width: 100%; height: 100%;  padding: 0; margin: 0; }
.contact .contact-address{ width: 100%; padding: 20px 0; margin: 0; }
.contact .contact-address p{  font-size: 16px; line-height: 26px; color: #656565; padding: 0; margin: 0; text-align: center; }
.contact .contact-address p i{ font-size: 18px; line-height: 20px; color: #34bedb; padding: 0 10px 0 0; margin: 0; }
.contact .contact-now{ width: 100%; padding: 0; margin: 0; }
.contact .contact-now ul{ padding: 0; margin: 0; }
.contact .contact-now ul li{ padding: 0; margin: 0; text-align: center; }
.contact .contact-now ul li a{ display: inline-block; color: #656565; font-size: 15px; line-height: 18px; padding: 0; margin: 0 0 10px; transition: all 500ms ease-in-out; font-weight: bold; }
.contact .contact-now ul li a:hover{ color: #34bedb; transition: all 500ms ease-in-out; }
.contact .contact-now ul li a i{ color: #34bedb; padding: 0 10px 0 0; transition: all 500ms ease-in-out; }
.contact .contact-now ul li a i:hover{ color: #34bedb; transition: all 500ms ease-in-out; }

/*Inner Service*/
.inner-service{ width: 100%; position: relative; display: block; background: #fff; padding: 50px 0; margin: 0; z-index: 9; }
.inner-service h4{ font-size: 40px; line-height: 44px; color: #037aa2; padding: 0; margin: 0; font-weight: bold; text-align: center; }
.inner-service h2 span{ color: #34bedb; }
.inner-service p{ font-size: 16px; line-height: 26px; color: #404040; padding: 10px 0 30px; margin: 0; text-align: center; }
.inner-service .service-block-box{ width: 100%; position: 0; margin: 0 0 30px; display: inline-block; }
.inner-service .service-block-box .service-content-image{ width: 100%; padding: 15px; margin: 0; border: 1px solid #34bedb; }
.inner-service .service-block-box .service-content-image img{ width: 100%; }

.inner-service .service-block-box .service-content-box{ width: 100%; padding: 0; margin: 0; }
.inner-service .service-block-box .service-content-box h3{ font-size: 30px; line-height: 34px; color: #037aa2; padding: 0; margin: 0; }
.inner-service .service-block-box .service-content-box p{ font-size: 16px; line-height: 26px; color: #404040; padding: 10px 0; margin: 0; text-align: justify; }
.inner-service .service-block-box .service-content-box ul{ padding: 0 0 20px; margin: 0; }
.inner-service .service-block-box .service-content-box ul li{ font-size: 16px; line-height: 26px; color: #404040; padding: 5px 0; text-align: justify; }
.inner-service .service-block-box .service-content-box ul li b{ font-size: 14px; line-height: 20px; }

.inner-service .service-block-box .service-content-box a.service-btn { position: relative; padding: 10px 30px;  border: none; color: #fff; background-color: #34bedb; transition: all 0.2s ease; display: inline-block; font-size: 16px; line-height: 18px; }
.inner-service .service-block-box .service-content-box a.service-btn:active { transform: scale(0.96); }
.inner-service .service-block-box .service-content-box a.service-btn:before,
.inner-service .service-block-box .service-content-box a.service-btn:after { position: absolute; content: ""; width: 150%; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1000; background-repeat: no-repeat; }
.inner-service .service-block-box .service-content-box a.service-btn:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #34bedb 20%, transparent 30%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.inner-service .service-block-box .service-content-box a.service-btn:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #34bedb 15%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%),
    radial-gradient(circle, #34bedb 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

/*normal custom css */

/*.pageloadPupup{}
.pageloadPupup .modal-dialog { width: 1000px; margin:20px auto; background: #fc5249; overflow: hidden; border-radius: 15px;}
.pageloadPupup .modal-content{background: #fff; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 16px;}
.pageloadPupup .modal-header{background: #fff;
padding: 15px 0 10px;}
.pageloadPupup .modal-header img{width: 10%; margin: 0 auto; display: block;}
.modal-header .close { margin-top: -15px; margin-right: 15px; }
.close {float: right;font-size: 30px;font-weight: bold;line-height: 1;color: #00000080;text-shadow: 0 1px 0 #fff;filter: alpha(opacity=20);opacity: 1;}
.pageloadPupup .modal-body .service-modal-block{ width: 100%; padding: 0; margin: 0; }
.pageloadPupup .modal-body .service-modal-block .service-content-image{ width: 100%; padding: 0; margin: 0; }
.pageloadPupup .modal-body .service-modal-block .service-content-image img{ width: 100%; }
.pageloadPupup .modal-body .service-modal-block .service-modal-content{ width: 100%; padding: 0; margin: 0; }
.pageloadPupup .modal-body .service-modal-block .service-modal-content h3{ font-size: 30px; line-height: 34px; color: #037aa2; padding: 0; margin: 0; }
.pageloadPupup .modal-body .service-modal-block .service-modal-content p{ font-size: 16px; line-height: 26px; color: #404040; padding: 10px 0; margin: 0; text-align: justify; }

.pageloadPupup .modal-body .service-modal-block .service-modal-content ul{ padding: 0; margin: 0; }
.pageloadPupup .modal-body .service-modal-block .service-modal-content ul li{font-size: 16px; line-height: 26px; color: #404040; padding: 5px 0; text-align: justify; }
.pageloadPupup .modal-body .service-modal-block .service-modal-content ul li b{  font-size: 14px; line-height: 20px; }
.pageloadPupup .modal-footer button{ font-family: 'Raleway', sans-serif; display: inline-block; outline: 0; font-size: 14px; line-height: 18px; padding: 10px 0; width: 20%; text-transform: uppercase; margin: 0; color: #fff; border-radius: 30px; font-weight: bold; box-shadow: 0px 0 5px #00000082; transition: all 500ms ease-in-out; background: #055d8a; }
.pageloadPupup .modal-footer button:hover{ background: #d70647; transition: all 500ms ease-in-out; }*/

/*normal ccustom css */

.pageloadPupup{}
.pageloadPupup .modal-dialog { width: 1000px; margin:30px auto; background: #fc5249; overflow: hidden; border-radius: 15px;}
.pageloadPupup .modal-content{background: #fff; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 16px; background: #fff;}
.pageloadPupup .modal-header{background: #fff;
padding: 15px 0 10px;}
.pageloadPupup .modal-header img{width: 16%; margin: 0 auto; display: block;}
.modal-header .close { margin-top: -15px; margin-right: 15px; }
.close {float: right;font-size: 30px;font-weight: bold;line-height: 1;color: #00000080;text-shadow: 0 1px 0 #fff;filter: alpha(opacity=20);opacity: 1;}
.pageloadPupup .modal-body{ width: 100%; display: inline-block; padding: 20px 0; margin: 0; }
.pageloadPupup .modal-body .modal-images{ width: 100%; padding: 10px 10px 0; margin: 0; border: 1px solid #ccc; }
.pageloadPupup .modal-body .modal-images ul{ padding: 0; margin: 0; }
.pageloadPupup .modal-body .modal-images ul li{ padding: 0; margin: 0 0 10px; }
.pageloadPupup .modal-body .modal-images ul li img{ width: 100%; }
.pageloadPupup .modal-body .modal-enquary{ width: 100%; padding: 0; margin: 0 auto; display: block; /*background: #00000094;*/ border: 1px solid #ccc; /*box-shadow: 0 0 10px #353535;*/ overflow: hidden; }
.pageloadPupup .modal-body .modal-enquary h3{ font-family: 'Raleway', sans-serif; font-size: 24px; line-height: 30px; color: #fff; background: #037aa2; text-align: center; padding: 10px 0; margin: 0; font-weight: bold; text-transform: capitalize; border-bottom: 3px solid #34bedb; }
.pageloadPupup .modal-body .modal-enquary form{ width: 100%; padding: 0; margin: 0; display: inline-block; }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form{ width: 46%; float: left; padding: 0; margin: 8px; }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form label{ width: 100%; font-size: 16px; line-height: 18px; color: #000; padding: 0 0 10px; margin: 0;  }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form input{ width: 100%; font-size: 16px; line-height: 18px; color: #000; padding: 8px 10px; margin: 0; outline: none; background: none; border: 1px solid #ccc;  }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form select{ width: 100%; font-size: 16px; line-height: 18px; color: #000; padding: 8px 10px; margin: 0; border: 1px solid #ccc; /*border-radius: 6px;*/ outline: none; }
.pageloadPupup .modal-body .modal-enquary form .requirements{ width: 100%; padding: 0; margin: 10px; }
.pageloadPupup .modal-body .modal-enquary form .requirements label{ width: 100%; font-size: 16px; line-height: 18px; color: #000; padding: 0 0 10px; margin: 0;  }
.pageloadPupup .modal-body .modal-enquary form .requirements textarea{ width: 96%; height: 100px; font-size: 16px; line-height: 18px; color: #000; padding: 10px; margin: 0; border: 1px solid #ccc; /*border-radius: 6px*/; outline: none; background: none; }

.pageloadPupup .modal-body .modal-enquary form .checkbox{ width: 100%; }
.pageloadPupup .modal-body .modal-enquary form .checkbox input{ width: 5%; float: left; position: absolute; content: ""; top: 2px; }
.pageloadPupup .modal-body .modal-enquary form .checkbox a{ font-size: 16px; line-height: 18px; color: #000; padding: 0 0 0 30px; margin: 0; }
.pageloadPupup .modal-body .modal-enquary form .enquary-btn{ width: 100%; padding: 0; margin: 0 0 30px; }
.pageloadPupup .modal-body .modal-enquary form .enquary-btn input[type="submit"]{ width: 30%; font-size: 16px; line-height: 18px; color: #fff; text-transform: uppercase; padding: 10px 0; margin: 0 auto; transition: all 300ms ease-in-out; display: block; background: #037aa2; border-radius: 0;}
.pageloadPupup .modal-body .modal-enquary form .enquary-btn input[type="submit"]:hover{ letter-spacing: 2px; transition: all 300ms ease-in-out; }

/*Footer Start*/
.footer{ width: 100%; position: relative; display: block; background: url(../images/footer-banner.png) no-repeat; background-size: cover; padding: 30px 0; margin: 0; }
.footer .footer-about{ width: 100%; padding: 0; margin: 0; }
.footer .footer-about .footer-logo{ width: 100%; padding: 80px 0 0; margin: 0; }
.footer .footer-about .footer-logo img{ width: 100%; }
.footer .footer-about h4{ font-size: 24px; line-height: 28px; color: #fff; padding: 0 0 20px; margin: 0; }
.footer .footer-about form{ width: 100%; padding: 0; margin: 0 0 30px; }
.footer .footer-about form .search-email{ width: 100%; padding: 0; margin: 0; }
.footer .footer-about form .search-email input{ width: 70%; float: left; font-size: 18px; line-height: 20px; color: #fff; padding: 10px; margin: 0; background: none; border: 1px solid #048C98; outline: none; }
.footer .footer-about form .search-email button{ width: 30%; font-size: 18px; line-height: 22px; color: #fff; padding: 10px 0; margin: 0; background: #048C98; outline: none; border: none; transition: all 400ms ease-in-out; }
.footer .footer-about form .search-email button:hover{ background: #017882; transition: all 400ms ease-in-out; }
.footer .footer-about ul.footer-social{ padding: 0; margin: 0; }

.footer .footer-about ul.footer-social li{ display: inline-block; padding: 0; margin: 0 10px 0 0; }
.footer .footer-about ul.footer-social li a{ font-size: 20px; background: #ec3136; display: inline-block; width: 40px; height: 40px; color: #fff; padding: 10px 0; transition: all 400ms ease-in-out; text-align: center; border: 1px solid #fff; }
.footer .footer-about ul.footer-social li a:hover{   transition: all 400ms ease-in-out; }
.footer .footer-about ul.footer-social li a i{ color: #fff; padding: 0; }

.footer .footer-about ul{ padding: 0; margin: 0; }
.footer .footer-about ul li{ padding: 0; margin: 0; }
.footer .footer-about ul li i{ color: #fff; padding: 0 10px 0 0; }
.footer .footer-about ul li a{ font-size: 16px; line-height: 18px; display: inline-block; color: #fff; padding: 6px 0; transition: all 400ms ease-in-out; text-align: center; transition: all 400ms ease-in-out; }
.footer .footer-about ul li a:hover{ color: #ec3136; transition: all 400ms ease-in-out; }
.footer .footer-about p{ font-size: 16px; line-height: 21px; display: inline-block; color: #fff; padding: 0 0 30px; margin: 0; }
.footer .footer-about p i{ color: #fff; padding: 0 10px 0 0; }
.footer .footer-about p span{ font-size: 18px; color: #a99974; background: linear-gradient(to right, #ac9c8f 0%, #9b9b9b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; padding: 0 10px 0 0; font-weight: 500; }
.footer .footer-about ul li span{ font-size: 18px; background: linear-gradient(to right, #ac9c8f 0%, #9b9b9b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 padding: 0 10px 0 0; font-weight: 500; }
.footer h4{ font-size: 24px; line-height: 28px; color: #fff; padding: 0 0 20px; margin: 0; }
.footer .map{ width: 100%; height: 200px; padding: 5px; border: 1px solid #ec3136; margin: 0; }
.footer .map iframe{ width: 100%; height: 100%; }
/*Copyright Start*/
.copyright{ width: 100%; position: relative; background: #00071a; padding: 10px 0; margin: 0; border-top: 1px solid #ec3136; text-align: center; }
.copyright p{ font-size: 16px; line-height: 18px; display: inline-block; color: #fff; padding: 0; margin: 0; }
.copyright p span{ padding: 0 0 0 10px; }
.copyright p a{ color: #ec3136; transition: all 400ms ease-in-out; }
.copyright p a:hover{ color: #f00; transition: all 400ms ease-in-out; }

/*--------------------------------Responsive------------R--------------------*/

@media(max-width: 1680px) {}

@media(max-width: 1600px) {}

@media(max-width: 1440px) {}

@media(max-width: 1280px){}

@media(max-width: 1080px){}

@media(max-width: 900px){
    /*chek 800*/
}

@media(max-width: 799px){
    /*chek 768*/
.header-bottom-block .menu { padding: 0px 0;}
.header-top-block .logo { width: 25%; padding: 0; margin: 0; display: block; }
.goog-te-gadget-simple { background-color: #037aa2 !important; border: 0 !important; font-weight: 800; padding: 10px 10px !important; cursor: pointer; zoom: 1; width: 100%; }
.goog-te-gadget-simple span { color: #fff !important; font-weight: 400; font-size: 15px; line-height: 18px; width: 68% !important; display: inline-block; border: none; }
.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed { color: #000; width: 100%; display: block; }
.goog-te-gadget-simple { background-color: #037aa2 !important; border: 0 !important; font-weight: 800; padding: 10px 20px !important; cursor: pointer; zoom: 1; width: 100%; }
#google_translate_element { width: 60%; margin: 5px 0 0 0; }
#menu-icon{ top: -50px; left: 300px; }    
.sf-menu{top: 0px; right: -350px;} 
.sf-menu ul.boxUl { width: auto; }
.sf-menu > li > a { font-size: 14px !important; line-height: 20px; background: none; text-align: center; padding: 5px 0 !important; letter-spacing: 0; border-bottom: 1px solid #cccccc4f; border-radius: 0; }
.sf-menu li ul li a { font-size: 13px !important; color: #eaeaea; line-height: 10px; text-align: center; letter-spacing: 0; padding: 10px 0 !important; margin: 0; background: #082468 !important; border-bottom: 1px solid #cccccc4f; }
.about h2 { font-size: 28px; line-height: 30px;}
.about p { font-size: 13px; line-height: 23px;} 
.about a.about-btn { border-radius: 20px; padding: 9px 25px;}
.service-1st .service-box-content h4 { font-size: 14px; line-height: 20px; color: #037aa2; padding: 10px 0;} 
.photo-gallery-block h2 { font-size: 28px; line-height: 30px;} 
.video-gallery h2 { font-size: 28px; line-height: 30px;}   
.testimonial h2{ font-size: 28px; line-height: 30px;}  
.why-block h2{ font-size: 28px; line-height: 30px;}   
.photo-gallery-block .gallery-box{height: 150px;}
.photo-gallery-block .gallery-box img.pho-gall { width: 100%; height: 130px; }
.why-block a.why-btn{font-size: 15px; line-height: 18px; margin: 0; width: 25%; border-radius: 25px; padding: 10px 30px;}
.photo-gallery-block .gallery-box .view-caption { position: absolute; top: -250%; width: 100%; text-align: center; padding: 30px 0;}
.quote p { font-family: "EB Garamond", serif; font-size: 25px; line-height: 35px; color: #fff;}
.video-gallery .video-gallery-block iframe {width: 100% !important; border: 1px solid #34bedb; padding: 5px; height: auto !important; }
.footer .footer-about h4 { font-size: 20px; line-height: 25px; color: #fff; padding: 0 0 5px; margin: 0 0 10px; border-bottom: 1px dotted #fff; }
.footer h4{font-size: 20px; line-height: 25px; color: #fff; padding: 0 0 5px; margin: 0 0 10px; border-bottom: 1px dotted #fff;}
.footer .footer-about ul li a { font-size: 14px; line-height: 20px; display: inline-block; color: #fff; padding: 0 0 5px;}
.footer .footer-about p { font-size: 14px; line-height: 20px; display: inline-block; color: #fff; padding: 0 0 5px;}  
.footer .footer-about ul li a { font-size: 14px; line-height: 20px; display: inline-block; color: #fff; padding: 0 0 5px;}   
.footer .footer-about ul li i { color: #fff; padding: 0 5px 0 0; font-size: 12px; } 
 
.inner-banner h2 { top: 50px; font-size: 30px; line-height: 30px; border-left: 5px solid #12d6ff; padding: 0 0 0 20px; } 
.inner-about-block h2 { font-size: 30px; line-height: 35px; color: #0aa5c6; padding: 0 0 20px; }
.down-about h2 { font-size: 18px;}
.inner-about-block .inner-about-box .inner-content-dec h3 { font-size: 18px;}
.down-about p { font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.inner-about-block .inner-about-box .inner-content-dec p { font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.down-about .down-about-box .down-content-image img { width: 100%; height: 150px; }
.down-about .down-about-box .down-content-dec h3 { font-size: 18px; line-height: 25px; color: #037aa2; padding: 5px 0;}
.down-about .down-about-box .down-content-dec p { font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.mission-block .mission-block-box .mission-right-content h2{ font-size: 18px; line-height: 25px; color: #037aa2; padding: 5px 0;}
.mission-block .mission-block-box .mission-right-content p { font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.mission-block .mission-block-box .mission-right-content h3 { font-size: 15px; line-height: 10px; color: #f00;}
.mission-block .mission-block-box .mission-right-content ul li { font-size: 14px; line-height: 23px; color: #000; padding: 3px 0; margin: 0;}
.mission-block .mission-block-box ul li { font-size: 14px; line-height: 23px; color: #000; padding: 3px 0; margin: 0;}
.mission-block .mission-block-box .mission-right-content ul li b { font-size: 13px; color: #34bedb; padding: 0 5px; }
.mission-block .mission-block-box ul li b { font-size: 13px; color: #34bedb; padding: 0 5px; }
.mission-block .mission-block-box h3 { font-size: 15px; line-height: 10px; color: #f00;}
.team-start .inner-team-box .team-content-dec h3{ font-size: 25px; line-height: 32px; color: #0aa5c6; padding: 0 0 10px; }
.team-start .inner-team-box .team-content-dec p { font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.leadership-team h2 { font-size: 18px;}
.leadership-team p { font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.leadership-team .inner-leadership-box .leadership-content-dec h4 { font-size: 15px; line-height: 20px; color: #3e3e3e; padding: 5px 0;}
.leadership-team .inner-leadership-box .leadership-content-dec h5 { font-size: 12px; line-height: 16px; color: #0db7db;}
.leadership-team .inner-leadership-box .leadership-content-dec p { font-size: 13px; line-height: 22px; color: #000; padding: 0; margin: 0; text-align: justify; }
.inner-service h4 { font-size: 25px; line-height: 35px; color: #0aa5c6; padding: 0 0 10px;}
.inner-service { padding: 25px 0;}
.inner-service p{font-size: 14px; line-height: 25px; color: #000; padding: 0 0 10px;}
.inner-service .service-block-box .service-content-box h3 { font-size: 18px; line-height: 20px; color: #0395c6;}
.service-content-box p { font-size: 14px; line-height: 25px; color: #404040; padding: 0 0 5px; margin: 0; text-align: justify; }
.inner-service .service-block-box .service-content-box ul li { font-size: 14px; line-height: 25px; color: #404040; padding: 0 0 5px; margin: 0; text-align: justify; }  
.inner-service .service-block-box .service-content-box ul li { font-size: 14px; line-height: 25px; color: #404040; padding: 0 0 5px; margin: 0; text-align: justify; }  
.pageloadPupup .modal-dialog { width: 90%;}    
.pageloadPupup .modal-body .modal-enquary h3 { font-family: 'Raleway', sans-serif; font-size: 18px; line-height: 20px; color: #fff; background: #037aa2; text-align: center; padding: 8px 0;} 
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form { width: 46%; float: left; padding: 0; margin: 6px; }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form label { width: 100%; font-size: 12px; line-height: 15px; color: #07769b; padding: 10px 0 5px; margin: 0; }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form input { width: 100%; font-size: 12px; line-height: 14px; color: #000; padding: 5px 5px; margin: 0; outline: none; background: none; border: 1px solid #cccccc85; letter-spacing: -1px; height: 35px; }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form select { width: 100%; font-size: 12px; line-height: 14px; color: #000; padding: 5px 5px; margin: 0; outline: none; background: none; border: 1px solid #cccccc85; letter-spacing: -1px; height: 35px; }
.pageloadPupup .modal-body .modal-enquary form .requirements { width: 46%; float: left; padding: 0; margin: 6px; }
.pageloadPupup .modal-body .modal-enquary form .requirements label { width: 100%; font-size: 12px; line-height: 15px; color: #07769b; padding: 10px 0 5px; margin: 0; }
.pageloadPupup .modal-body .modal-enquary form .requirements textarea{ width: 100%; font-size: 12px; line-height: 14px; color: #000; padding: 5px 5px; margin: 0; outline: none; background: none; border: 1px solid #cccccc85; letter-spacing: -1px; height: 35px; }
.pageloadPupup .modal-body .modal-enquary form .checkbox { width: 100% !important; }
.pageloadPupup .modal-body .modal-enquary form .checkbox input{ width: 10% !important; height: auto; }
.pageloadPupup .modal-body .modal-enquary form .checkbox a { font-size: 12px; line-height: 18px; color: #f00;}
.pageloadPupup .modal-body .modal-enquary form .enquary-btn input[type="submit"] { width: 100%; font-size: 15px;}

.inner-why-block .inner-why-content-box h2 { font-size: 22px; line-height: 25px; color: #037aa2; padding: 0 0 10px; margin: 0; font-weight: bold; } 
.inner-why-block .inner-why-content-box ul li { font-size: 13px; line-height: 20px; color: #000; text-align: justify; padding: 0 0 10px;}  
.inner-why-block .inner-why-content-box ul li b { font-size: 12px; padding: 0 5px; color: #037aa2; }
.inner-why-block ul li { font-size: 13px; line-height: 20px; color: #000; text-align: justify; padding: 0 0 10px;}  
.inner-why-block ul li b { font-size: 12px; padding: 0 5px; color: #037aa2; }
.why-block .why-block-box h4 { font-size: 13px; line-height: 20px;}
  
.inner-photo-gallery-block .gallery-box img.pho-gall { width: 100%; height: 110px; }
.inner-photo-gallery-block .gallery-box{  height: 135px;}
.inner-photo-gallery-block .gallery-box .view-caption { position: absolute; top: -250%; width: 100%; text-align: center; padding: 30px 0;}
.inner-photo-gallery-block .gallery-box .view-caption p { transition: all 600ms ease-in-out; border: 1px solid #d00034; width: 90%; font-size: 12px;}
  
.faq { position: relative; width: 100%; display: block; background: #fff; padding: 20px 0;}
.faq h2 { font-size: 25px; line-height: 35px; color: #037aa2; padding: 0 0 20px;}
.faq .card article h3 { position: relative; background: #037aa2; padding: 10px 75px 15px 20px; font-size: 15px; line-height: 25px;}
.faq .card article .content p { padding: 2px 30px; background: #F4F5F9; font-size: 14px; line-height: 25px; color: #000000bf; }
.contact { width: 100%; display: block; position: relative; background: #fff; padding: 30px 0;}
.contact .contact-form { width: 95%;} 
.contact .contact-form form .fill-box { width: 46%; float: left; padding: 20px 0 0; margin: 0 8px; }
.contact .contact-form form { width: 100%; padding: 0; margin: 0; display: inline-block; }
.contact .map { width: 100%; display: inline-block; height: 305px; margin: 0; border: 1px solid #ccc; position: relative; top: 10px; right: 0; background: #fff; padding: 15px; }

}

@media(max-width: 670px){
    /*chek 570*/
#menu-icon { top: -50px; left: 220px; }
#google_translate_element { width: 75%; margin: 5px 0 0 0; }
.sf-menu { top: 0px; right: -250px; }
.header-top-block .logo { width: 40%;}
.inner-banner h2 { top: 30px; font-size: 25px; line-height: 25px; border-left: 5px solid #12d6ff; padding: 0 0 0 25px; }
.sf-menu > li > a { font-size: 11px !important; line-height: 20px;} 
.sf-menu li ul li a { font-size: 11px !important; color: #eaeaea;}
.sf-menu li.active a { color: #ffff04; background: linear-gradient(to bottom, #2000ff, #022068); border-radius: 0; font-weight: bold; font-size: 10px !important; }

.about a.about-btn { border-radius: 20px; padding: 9px 25px; margin: 0 0 15px; }
.service-1st h3 { font-size: 20px; line-height: 25px; color: #fff; padding: 0px 0 30px;}
.testimonial .testi-btn a.why-btn{display: none;}
.footer .footer-about { width: 100%; padding: 0; margin: 0; height: 250px; }
.footer .footer-about .footer-logo img { width: 80%; margin: 0 auto; display: block; }

.inner-about-block { width: 100%; position: relative; display: block; background: #fff; padding: 20px 0 0;}
.inner-about-block .inner-about-box .inner-content-dec h3 { font-size: 15px; }
.down-about .down-about-box .down-content-image img { width: 100%; height: auto; }
.down-about .down-about-box { width: 100%; padding: 15px; margin: 0 0 30px; border: 1px solid #34bedb; height: auto; }
.team-start .inner-team-box .team-content-dec h3 { font-size: 20px; line-height: 30px;}
.leadership-team p { font-size: 14px; line-height: 25px; color: #000; padding: 10px 20px 10px; }
.inner-service h4 { font-size: 20px; line-height: 30px; color: #0aa5c6; padding: 0 0 10px; }
.inner-service .service-block-box .service-content-box p { font-size: 14px; line-height: 27px; color: #404040; padding: 10px 0; margin: 0; text-align: justify; } 
.inner-service .service-block-box .service-content-box a.service-btn{margin: 0 0 20px;}
.pageloadPupup .modal-body .modal-images { width: 100%; padding: 5px; margin: 0 0 10px; border: 1px solid #ccc; display: inline-block; }  
.pageloadPupup .modal-body .modal-images ul li { padding: 0; margin: 5px; width: 22.8%; float: left; } 
.inner-photo-gallery-block .gallery-box { height: auto; }
.inner-photo-gallery-block .gallery-box img.pho-gall { width: 100%; height: auto; }
.inner-photo-gallery-block .gallery-box .view-caption { position: absolute; top: -250%; width: 96%; text-align: center; padding: 100px 0; }
#google_translate_element { width: 100%; margin: 5px 0 0 0; }
.why-block { overflow: hidden; }
.testimonial { overflow: hidden; }

}

@media(max-width: 568px){
    /*chek 500*/
#menu-icon { top: -50px; left: 190px; }
.about {padding: 20px 0;}   
.about h2 { font-size: 25px; line-height: 30px; }
.about p { font-size: 15px; line-height: 30px; } 
.service-1st h3 { font-size: 25px; line-height: 35px;}
.photo-gallery-block .gallery-box { height: 250px; }
.photo-gallery-block .gallery-box img.pho-gall { width: 100%; height: auto; }
.quote { width: 100%; display: block; position: relative; background: url(../images/quote-banner.png) no-repeat right bottom; background-size: auto; background-size: cover; padding: 60px 0; margin: 0; text-align: center; }
.why-block a.why-btn { font-size: 15px; line-height: 18px; margin: 0; width: 35%;}
.inner-about-block h2 { font-size: 25px; line-height: 35px;}
.pageloadPupup .modal-body .modal-images ul li { padding: 0; margin: 5px; width: 22.5%; float: left; } 
.inner-why-block { width: 100%; position: relative; display: block; color: #fff; padding: 20px 0;}    
.inner-why-block .inner-why-content-box h2 { font-size: 20px; line-height: 25px;}
.faq h2 { font-size: 21px; line-height: 30px; color: #037aa2; padding: 0 0 20px; }
.contact .contact-form form .message { width: 96% !important;} 
  
}

@media(max-width: 499px){
        /*chek 450*/
.header-top-block .logo { width: 60%; }
.goog-te-gadget-simple { background-color: #021a56 !important; border: 5px !important; font-weight: 800; padding: 8px 25px 10px 5px !important; cursor: pointer; zoom: 1; width: 100%; background: linear-gradient(to bottom, #f00, #7d0000); background-color: rgba(0, 0, 0, 0); }
.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span{border: none !important;}
#menu-icon { top: -46px; left: 155px; }
.goog-te-gadget-simple span { color: #fff !important; font-size: 13px; line-height: 15px; width: 69% !important; display: inline-block; border: none; font-weight: bold; }
.sf-menu { top: 0px; right: -200px; }
.about h2 span { color: #f00; }
.about a.about-btn { border-radius: 20px; padding: 9px 25px; margin: 0 0 15px; background: linear-gradient(to bottom, #00d3ff, #0a66b7); border-bottom: 4px solid #171636; }

.service-1st h3 { font-size: 20px; line-height: 30px; } 
.why-block .why-block-box { width: 50%; float: left; padding: 0; margin: 0; }
.why-block .why-block-box img { width: 30%; filter: drop-shadow(0 0 5px #037aa2); margin: 10px 0 0; }
.why-block a.why-btn { font-size: 15px; line-height: 18px; margin: 0; width: 100%;background: linear-gradient(to bottom, #00d3ff, #0a66b7); border-bottom: 4px solid #171636; }
.contact .contact-form form .fill-box { width: 46%; float: left; padding: 20px 0 0; margin: 0 5px; }
.contact .contact-form form .fill-box input[type="submit"]{width: 80%;}
.pageloadPupup .modal-body .modal-images ul li { padding: 0; margin: 5px; width: 22%; float: left; }
.ads { width: 100%; position: relative; display: block; padding: 0; margin: 0; background: linear-gradient(to right, #037aa2, #34bedb); }

}

@media(max-width: 440px){
        /*chek 420*/
#menu-icon { top: -44px; left: 140px; }     
.sf-menu { top: 0px; right: 0; width: 220px; left: -30px; }      
.testimonial h2 { font-size: 22px; line-height: 10px; }      
.why-block h2 { font-size: 22px; line-height: 10px; } 
.photo-gallery-block h2 { font-size: 22px; line-height: 10px; }
.pageloadPupup .modal-body .modal-images ul li { padding: 0; margin: 4px; width: 22%; float: left; }
.about .about-image img { width: 100%; height: auto; }
.about .about-image { width: 100%; height: auto;} 
  
}

@media(max-width: 414px){
        /*chek 400*/
.contact .contact-form h4 { font-size: 20px; line-height: 30px;}
.inner-banner h2 { top: 20px; font-size: 20px; line-height: 25px;}
        
}

@media(max-width: 399px){
        /*chek 380*/
#menu-icon { top: -44px; left: 125px; }
.contact .contact-form form .fill-box input { width: 100%; display: inline-block; font-size: 10px; line-height: 12px; color: #000; border: 1px solid #ccc; outline: none; padding: 5px; margin: 0; }
.contact .contact-form form .fill-box input[type="submit"] { width: 100%; }

}

@media(max-width: 375px){
        /*chek 360*/
.goog-te-gadget-simple span { color: #fff !important; font-size: 11px;}
.about p { font-size: 13px; line-height: 26px; }
.pageloadPupup .modal-body .modal-images ul li { padding: 0; margin: 2px; width: 22%; float: left; }
.pageloadPupup .modal-body .modal-enquary form .modal-enquary-form { width: 46%; float: left; padding: 0; margin: 5px; }
.pageloadPupup .modal-body .modal-enquary form .requirements{    width: 46%; float: left; padding: 0; margin: 5px;}
.inner-service h4 { font-size: 15px; line-height: 20px;}
.inner-banner h2 { top: 15px; font-size: 16px; line-height: 20px; } 
.footer .footer-about ul li a { font-size: 12px; line-height: 15px;}
.footer h4 { font-size: 15px; line-height: 15px;}
.footer .footer-about h4 { font-size: 15px; line-height: 15px;} 
.footer .footer-about { width: 100%; padding: 0; margin: 0; height: 210px; }
  
}

@media(max-width: 350px) {
        /*chek 320*/
.header-top-block .logo { width: 80%; }
.goog-te-gadget-simple span { color: #fff !important; font-size: 9px;}
#menu-icon { top: -44px; left: 100px; }
.sf-menu { top: 0px; right: 0; width: 220px; left: -65px; }
.pageloadPupup .modal-body .modal-enquary form .requirements label { width: 100%; font-size: 11px;}

}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: style.css

Server Info

System Features

User Info