@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {

  --primary-color: #38A0D6;

  --secondary-color: #272727;

  --title-color: #111;

  --text-color: #666666;

  --primary-font: 'Poppins';

  --bg-color: #f5f5f5;

}



/* ===================================

    Scrollbar

====================================== */



::-webkit-scrollbar {

  width: 8px;

}



::-webkit-scrollbar-track {

  width: 12px;

  border-left: 0 solid white;

  border-right: 0 solid white;

}



::-webkit-scrollbar-thumb {

  background: linear-gradient(30deg, var(--primary-color) 20%, var(--primary-color) 80%);

  width: 0;

  height: 25%;

  transition: .5s ease;

  cursor: pointer;

}





/* ===================================

    General

====================================== */




html,
body {

  font-family: var(--primary-font), sans-serif;

  overflow-x: hidden;

  color: var(--text-color);

}



a {

  text-decoration: none;

}



p {

  font-size: 1rem;

  font-weight: 400;

  color: var(--text-color);

  line-height: 1.5;

}

.txtjustify {

  text-align: justify;

  text-justify: inter-word;

}



.overlay {

  position: relative;

  height: 100vh;

  overflow: hidden;

}

.overlay::after {

  content: '';

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  right: 0;

  z-index: 99;

  background-color: rgba(0, 0, 0, 0.7);

}



/*Headings*/



/* .heading {

  font-size: 60px;

  color: var(--title-color);

  font-weight: 700;

  margin-bottom: 50px;

  text-transform: uppercase;

  font-family: var(--primary-font), sans-serif;

}

.subheading{

  color: var(--text-color);

  font-size: 20px; 

  margin-bottom: 30px;

  font-weight: 500;

}

.sec-heading {

  font-size: 40px;

  color: var(--title-color);

  font-weight: 600;

  margin-bottom: 20px;

  font-family: var(--primary-font), sans-serif;

}

.secondary-text{

  color: var(--secondary-color);

  font-weight: 700;

} */





/*Social Icons*/



.social-icons ul {

  margin-bottom: 0px;

  padding: 0;

}



.social-icons ul li {

  font-size: 15px;

  display: inline-block;

  margin-right: 5px;

  margin-left: 5px;

}



.social-icons ul li a {

  overflow: hidden;

  border-radius: 50%;

  display: block;

  color: #fff;

  height: 40px;

  line-height: 40px;

  width: 40px;

  border: 1px solid transparent;

  text-align: center;

  background-color: var(--primary-color);

}



/*Social icons hover*/

.facebook-hovr:hover {

  color: #4267B2;

  transition: all 0.5s ease;

  background-color: #fff;

}



.twitter-hovr:hover {

  color: #1DA1F2;

  transition: all 0.5s ease;

  background-color: #fff;

}



.google-plus-hovr:hover {

  color: #fff;

  transition: all 0.5s ease;

  background-color: #fff;

}



.linked-in-hovr:hover {

  color: #2867B2;

  transition: all 0.5s ease;

  background-color: #fff;

}



.instagram-hovr:hover {

  color: #db4a39;

  transition: all 0.5s ease;

  background-color: #fff;

}



.gmail-hovr:hover {

  color: #D44638;

  transition: all 0.5s ease;

  background-color: #fff;

}



/*Social icons background hover*/



.facebook-hover:hover {

  color: #fff;

  transition: all 0.5s ease;

  background-color: #4267B2;

}



.twitter-hover:hover {

  color: #fff;

  transition: all 0.5s ease;

  background-color: #1DA1F2;

}



.google-plus-hover:hover {

  color: #fff;

  transition: all 0.5s ease;

  background-color: #db4a39;

}



.linked-in-hover:hover {

  color: #fff;

  transition: all 0.5s ease;

  background-color: #2867B2;

}



.instagram-hover:hover {

  color: #fff !important;

  transition: all .5s ease;

  background: linear-gradient(to bottom, #aa2fb5 0%, #f1762c 93%) !important;

}



.gmail-hover:hover {

  color: #fff;

  transition: all 0.5s ease;

  background-color: #D44638;

}





/*Button*/

.btn {

  z-index: 2;

  letter-spacing: .5px;

  border-radius: 0;

  font-weight: 500;

  overflow: hidden;

  position: absolute;

  line-height: inherit;

  display: inline-block;

  color: #fff;

  border: 2px solid transparent;

  text-transform: uppercase;

  transition: all .5s ease !important;

}



.btn.button {

  font-size: 14px;

  font-weight: 500;

  color: #fff;

  padding: 9px 30px;

  line-height: 1.8em;

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

  /* font-family: 'Roboto', sans-serif; */

  border-radius: 2px;

}



.btn.secondary-btn {

  background: var(--primary-color);

  border-color: var(--primary-color);

}



/*Button hover*/



.btn.secondary-btn:hover {

  background-color: var(--secondary-color);

  border-color: var(--secondary-color);

  color: #fff;

}



/* video play button */

.video-play-button {

  position: absolute;

  z-index: 10;

  top: 50%;

  left: 50%;

  transform: translateX(-50%) translateY(-50%);

  box-sizing: content-box;

  display: block;

  width: 32px;

  height: 44px;

  /* background: #eb2055; */

  border-radius: 50%;

  padding: 18px 20px 18px 28px;

}



.video-play-button:before {

  content: "";

  position: absolute;

  z-index: 0;

  left: 50%;

  top: 50%;

  transform: translateX(-50%) translateY(-50%);

  display: block;

  width: 55px;

  height: 55px;

  background: var(--secondary-color);

  border-radius: 50%;

  animation: pulse-border 1100ms ease-out infinite;

}



.video-play-button:after {

  content: "";

  position: absolute;

  z-index: 1;

  left: 50%;

  top: 50%;

  transform: translateX(-50%) translateY(-50%);

  display: block;

  width: 60px;

  height: 60px;

  background: var(--secondary-color);

  border-radius: 50%;

  transition: all 200ms;

}



.video-play-button span {

  display: block;

  position: relative;

  z-index: 3;

  width: 0;

  height: 0;

  border-left: 19px solid #fff;

  border-top: 12px solid transparent;

  border-bottom: 12px solid transparent;

  top: 10px;

  left: 5px;

}



@keyframes pulse-border {

  0% {

    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

    opacity: 1;

  }



  100% {

    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

    opacity: 0;

  }

}







/* ===================================

    Navbar

====================================== */



.nav-container {

  margin-top: 10px;

}



/* nav top default */

.navbar.navbar-top-default {

  position: relative;

  top: 0;

  z-index: 99;

  /* overflow: hidden; */

  /* height: 140px; */

  width: 100%;

  -webkit-transition: all .1s ease;

  -moz-transition: all .1s ease;

  -ms-transition: all .1s ease;

  -o-transition: all .1s ease;

  transition: all .1s ease;

  background-color: transparent;

  background-color: var(--primary-color);

  border-radius: 3px;

  padding: 0;

}





.header-appear .navbar-top-default {

  /* height: 90px; */

  position: fixed;

  z-index: 999;

  background: var(--primary-color);

  -webkit-animation-name: animationFade;

  -o-animation-name: animationFade;

  animation-name: animationFade;

  -webkit-animation-duration: 1s;

  -o-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  -o-animation-fill-mode: both;

  animation-fill-mode: both;

  -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35);

  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35);

}



/* .header-appear .navbar-top-default .sidemenu_btn{

  top: 30px;

} */



@keyframes animationFade {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    -o-transform: none;

    transform: none;

  }

}



.navbar .navbar-nav .nav-link {

  font-size: 1rem;

  color: #fff;

  font-weight: 400;

  padding: 6px 6px;

  margin-left: 10px;

  margin-right: 10px;

  transition: .5s ease;

  transition: all .6s ease;

  border: 2px solid transparent;

  display: block;

  /* text-transform: uppercase; */

  font-family: var(--primary-font), sans-serif;



  transition: all .6s ease;

}



/* .navbar .navbar-nav {

  margin-left: auto;

} */



.navbar .navbar-nav .nav-link.active {

  color: #fff;

  transition: all .6s ease;

}



.navbar .navbar-nav .nav-link:hover {

  color: #fff;

  transition: all .6s ease;

}



.navbar .navbar-nav .nav-link:last-child {

  margin-right: 0;

}



.navbar .navbar-nav .nav-link::before {

  content: '';

  display: block;

  margin: auto;

  height: 3px;

  width: 0px;

  background: transparent;

  transition: width .5s ease, background-color .5s ease;

  position: relative;

  bottom: -30px;

}



.navbar .navbar-nav .nav-link:hover::before {

  width: 100%;

  background: #fff;

}



.navbar .navbar-nav .nav-link.active::before {

  width: 100%;

  background: #fff;

}





/* dropdown */

/* @media screen and (min-width: 992px) {

  .dropdown:hover .dropdown-menu {

    display: block;

    margin-top: 0;

    transition: all .6s ease;

  }



  .dropdown .dropdown-menu {

    display: none;

  }



  .dropdown:hover .dropdown-toggle::after {

    border-top: 0;

    border-bottom: 0.3em solid;

  }

}



@media screen and (max-width: 991px) {

  .dropdown-toggle.show::after {

    border-top: 0;

    border-bottom: 0.3em solid;

  }

} */





/*side menu button*/



.sidemenu_btn {

  width: 36px;

  padding: 6px;

  /* right: 40px;

  top: 55px; */

  z-index: 999;

  margin-left: 16px;

  cursor: pointer;

  position: relative;

  display: inline-block;

}



.sidemenu_btn span {

  height: 2px;

  width: 100%;

  background: #fff;

  display: block;

  margin: auto;

  transition: .5s ease;

}



.sidemenu_btn span:first-child,

.sidemenu_btn span:last-child {

  width: 70%;

  background-color: #fff;

}



.sidemenu_btn span:nth-child(2) {

  background-color: #fff;

}







.sidemenu_btn:hover span:first-child,

.sidemenu_btn:hover span:last-child {

  width: 100%;

  background-color: #fff;

}



.sidemenu_btn:hover span:nth-child(2) {

  background-color: #fff;

}



.sidemenu_btn span:nth-child(2) {

  margin: 4px 0;

}





/* ===================================

    Side Menu

====================================== */

.side-bar {

  background: #fff;

  backdrop-filter: blur(15px);

  width: 300px;

  /* height: 100vh; */

  height: 100%;

  position: fixed;

  padding: 1rem;

  top: 0;

  right: -300px;

  overflow-y: auto;

  transition: 0.6s ease;

  transition-property: right;

  z-index: 999;

  box-shadow: 0 0px 10px 5px rgba(0, 0, 0, 0.25);

}

.side-bar::-webkit-scrollbar {

  width: 0px;

}

.side-bar.active {

  right: 0;

}

.side-bar .menu {

  width: 100%;

  margin-top: 30px;

  margin-bottom: 30px;

}



.side-bar .menu .item {

  position: relative;

  cursor: pointer;

}



.side-bar .menu .item a {

  color: var(--title-color);

  font-size: 16px;

  font-weight: 500;

  text-decoration: none;

  display: block;

  padding: 5px 30px;

  line-height: 40px;

}



.side-bar .menu .item a:hover {

  background: var(--primary-color);

  transition: 0.3s ease;

}



.side-bar .menu .item i {

  margin-right: 15px;

}



.side-bar .menu .item a .dropdown {

  position: absolute;

  right: 0;

  top: 0;

  margin: 17px;

  transition: 0.3s ease;

}



.side-bar .menu .item .sub-menu {

  background: var(--bg-color);

  display: none;

}



.side-bar .menu .item .sub-menu a {

  padding-left: 50px;

}





/* .side-menu {

  top: 0;

  right: 0;

  width: 30%;

  height: 100%;

  z-index: 9999;

  background: #fff;

  transform: translate3d(100%, 0, 0);

  transition: transform .5s ease;

  position: fixed;

  overflow: hidden;

  -webkit-box-shadow: 0 10px 10px 3px rgba(0, 0, 0, 0.25);

  box-shadow: 0 10px 10px 3px rgba(0, 0, 0, 0.25);

}



.side-menu.left {

  left: 0;

  right: auto;

  transform: translate3d(-100%, 0, 0);

}



.side-menu.before-side {

  width: 280px;

}



.side-menu.side-menu-active,

.side-menu.before-side {

  transform: translate3d(0, 0, 0);

}



.pul-menu .side-menu.side-menu-active {

  visibility: visible;

  opacity: 1;

}



.side-menu .navbar-brand {

  margin: 0 0 2.5rem 0;

}



.side-menu .social-icons ul li {

  margin-left: 0;

  margin-right: 0;

} */



/*Side overlay*/



#close_side_menu {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: none;

  z-index: 1031;

  opacity: 0.7;

  background-color: #011321;

  position: fixed;

  transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);

}



/*side menu image*/

.sidemenu-image {

  position: absolute;

  top: 28px;

}



/*side menu close btn*/



.side-bar .btn-close {

  height: 33px;

  width: 33px;

  top: 30px;

  right: 25px;

  font-size: 25px;

  cursor: pointer;

  text-align: center;

  position: absolute;

  display: inline-block;

}



.side-bar.before-side .btn-close {

  display: none;

}



.side-bar .btn-close::before,

.side-bar .btn-close::after {

  /* top: 5px;

  left: 16px;

  height: 24px;

  width: 2px;

  content: ' ';

  background: var(--primary-color);

  position: absolute; */

}



.side-bar .btn-close:before {

  transform: rotate(45deg);

}



.side-bar .btn-close:after {

  transform: rotate(-45deg);

}



.side-bar .btn-close:hover {

  animation: .8s rotate;

}



.side-bar .btn-close:hover {

  -webkit-animation: .8s rotate;

  animation: .8s rotate;

}



@-webkit-keyframes rotate {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



@keyframes rotates {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}





/*side menu inner-wrapper*/

/* 

.side-menu .inner-wrapper {

  height: 100%;

  padding: 2rem 2rem;

  position: relative;

  overflow-y: auto;

  display: flex;

  align-items: center;

  text-align: left;

  flex-wrap: wrap;

}



.pul-menu.pushwrap .side-menu .inner-wrapper {

  padding: 3.5rem 2.5rem;

}



.side-menu .side-nav {

  margin-bottom: 0px;

  margin-top: 65px;

  display: block;

}



.side-nav .navbar-nav .nav-item {

  opacity: 0;

  display: block;

  margin: 10px 0;

  padding: 0 !important;

  transition: all 0.8s ease 500ms;

  transform: translateY(30px);

}



.side-nav .navbar-nav .nav-item:first-child {

  transition-delay: .1s;

}



.side-nav .navbar-nav .nav-item:nth-child(2) {

  transition-delay: .2s;

}



.side-nav .navbar-nav .nav-item:nth-child(3) {

  transition-delay: .3s;

}



.side-nav .navbar-nav .nav-item:nth-child(4) {

  transition-delay: .4s;

}



.side-nav .navbar-nav .nav-item:nth-child(5) {

  transition-delay: .5s;

}



.side-nav .navbar-nav .nav-item:nth-child(6) {

  transition-delay: .6s;

}



.side-nav .navbar-nav .nav-item:nth-child(7) {

  transition-delay: .7s;

}



.side-nav .navbar-nav .nav-item:nth-child(8) {

  transition-delay: .8s;

}



.side-nav .navbar-nav .nav-item:nth-child(9) {

  transition-delay: .9s;

}



.side-menu.side-menu-active .side-nav .navbar-nav .nav-item {

  transform: translateY(0);

  opacity: 1;

}



.side-nav .navbar-nav .nav-link {

  display: inline-table;

  color: var(--text-color);

  padding: 2px 0 3px 0 !important;

  font-size: 20px;

  font-weight: 600;

  line-height: normal;

  position: relative;

  border-radius: 0;

  text-decoration: none;

  text-transform: uppercase;

  font-family: var(--primary-font);

}



.side-nav .navbar-nav .nav-link::before {

  content: "";

  left: 0;

  width: 0;

  bottom: 0;

  height: 2px;

  background: var(--primary-color);

  overflow: hidden;

  position: absolute;

  display: inline-block;

  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);

}



.side-nav .navbar-nav .nav-link:hover::before,

.side-nav .navbar-nav .nav-link:focus::before,

.side-nav .navbar-nav .nav-link.active::before {

  width: 100%;

}



.side-nav .navbar-nav .nav-link.active {

  background: transparent;

} */





/*side menu footer */



.side-menu-footer .navbar-nav {

  transform: translateY(0);

}



.side-menu-footer p {

  color: var(--text-color);

  font-size: 14px;

}









/* Header style */

header {

  padding-top: 10px;

}



.logo-row {

  align-items: center;

}

.logo-size {

  max-width: 120px;

}



.top-media {

  list-style: none;

  display: flex;

  align-items: center;

  margin: 0;

  padding: 0;

  justify-content: flex-end;

}



.top-media li {

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin: 0 5px;

}



.top-media li i {

  font-size: 30px;

  color: var(--primary-color);

  margin-right: 15px;

}



.top-media li .ph-mail-container {

  /* width: 60%; */

  font-weight: 600;

  font-size: .9rem;

  color: var(--title-color);

}



.top-media li .ph-mail-container a {

  width: 100%;

  display: block;

  font-size: .8rem;

  font-weight: normal;

  color: var(--text-color);

}

.fixed-head-logo {

  height: 50px;

}

.skew-area {

  width: 260px;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  /* background-color: var(--secondary-color); */

}



.skew-area:after {

  content: " ";

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: -1;

  background: var(--secondary-color);

  transform-origin: bottom left;

  -ms-transform: skew(-30deg, 0deg);

  -webkit-transform: skew(-30deg, 0deg);

  transform: skew(-30deg, 0deg);

}



.skew-area .social-icons ul {

  padding-left: 2.5rem;

}



#navbarSupportedContent,

.skew-area {

  padding: .5rem 0;

}



/* Banner section */

.banner-area {

  margin-top: -35px;

  position: relative;

}



.banner-carousel img {

  max-height: 600px;

  object-fit: cover;

}



.banner-content {

  width: 43%;

  padding: 20px;

  position: absolute;

  bottom: 25px;

  z-index: 2;

  background-color: rgba(255, 255, 255, .8);

  border-radius: 5px 5px 0 0;

  -webkit-backdrop-filter: blur(10px);

  backdrop-filter: blur(10px);

}



.banner-content h2 {

  font-size: 38px;

  font-weight: 600;

  color: var(--title-color);

  text-transform: capitalize;

}



.banner-content p {

  color: var(--text-color);

}





/* Owl nav style */

.owl-carousel .owl-nav {

  position: absolute;

  top: 50%;

  width: 100%;

  display: flex;

  justify-content: space-between;

}



.owl-carousel .owl-prev,

.owl-carousel .owl-next {

  width: 30px;

  height: 30px;

  font-size: 1.5rem !important;

  line-height: 1 !important;

  color: #fff !important;

  background-color: var(--secondary-color) !important;

}



.owl-carousel .owl-dot {

  width: 8px;

  height: 8px;

  margin: 0 3px;

  border-radius: 50%;

  background: var(--primary-color) !important;

  text-align: center;

}



.owl-carousel .owl-dot.active {

  background: var(--secondary-color) !important;

}



/* Section style */

section {

  padding-top: 80px;

  padding-bottom: 80px;

}



.sec-title {

  font-size: 35px;

  font-weight: 600;

  color: var(--title-color);

}



.sub-title {

  background-color: var(--primary-color);

  color: #fff;

  padding: 6px 30px;

  font-size: 20px;

  font-weight: 400;

  border-radius: 50px;

  text-align: center;

  display: table;

  position: relative;

}



.sub-title::after {

  content: '\f043';

  font-family: "Font Awesome 6 Free";

  position: absolute;

  right: 0;

  top: -2px;

  font-size: 14px;

  font-weight: 900;

  color: var(--primary-color);

  background-color: #fff;

  width: 23px;

  height: 23px;

  border-radius: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-animation: title-icon-animation 2s infinite backwards;

  animation: title-icon-animation 2s infinite backwards;

  -webkit-transition: all .3s;

  transition: all .3s
}



@-webkit-keyframes title-icon-animation {



  0%,

  100%,

  20%,

  50%,

  80% {

    -webkit-transform: translateX(0);

    transform: translateX(0)
  }



  40% {

    -webkit-transform: translateY(4px);

    transform: translateY(4px)
  }



  60% {

    -webkit-transform: translateY(1px);

    transform: translateY(1px)
  }

}



@keyframes title-icon-animation {



  0%,

  100%,

  20%,

  50%,

  80% {

    -webkit-transform: translateX(0);

    transform: translateX(0)
  }



  40% {

    -webkit-transform: translateY(4px);

    transform: translateY(4px)
  }



  60% {

    -webkit-transform: translateY(1px);

    transform: translateY(1px)
  }

}



.txt-center {

  margin: auto;

  text-align: center;

}



/* service slider */

.serve-area {

  padding-top: 30px;

}



.services-carousel {

  margin-top: 30px;

}



.residential-villa-communities {

  fill: var(--primary-color);

  stroke: var(--primary-color);

  stroke-width: 4;

  stroke-miterlimit: 10;

  transition: all 0.5s ease;

}



.commercial-buildings-office {

  fill: #38A0D6;

  transition: all 0.5s ease;

}



.industrial-facilities {

  fill: #38A0D6;

  transition: all 0.5s ease;

}



.hospitality {

  fill: #38A0D6;

  transition: all 0.5s ease;

}



.infrastructure-utilities {

  fill: #38A0D6;

  transition: all 0.5s ease;

}



.services-carousel .icon-box span {

  margin: auto;

  width: 150px;

  height: 150px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--bg-color);

  transition: all 0.5s ease;

}



.services-carousel svg {

  position: relative;

  max-width: 80px;

}



.services-carousel h3 {

  font-size: 18px;

  /* font-weight: 600; */

  margin-top: 15px;

  color: var(--title-color);

  text-align: center;

  text-transform: capitalize;

}



.services-carousel .item:hover span {

  background-color: var(--primary-color);

  transition: all 0.5s ease;

}



.services-carousel .item:hover .residential-villa-communities,

.services-carousel .item:hover .commercial-buildings-office,

.services-carousel .item:hover .industrial-facilities,

.services-carousel .item:hover .hospitality,

.services-carousel .item:hover .infrastructure-utilities {

  fill: #fff;

  stroke: #fff;

  transition: all 0.5s ease;

}



/* about section */

.about-section {

  position: relative;

}



.abt-img-area {

  position: relative;

}



.abt-img-style {

  border: 5px solid #fff;

  border-radius: 0 100px 0 100px;

  -webkit-box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

  margin-right: 25px;

}



.yr-experience {

  background-color: rgba(56, 160, 214, .8);

  border-radius: 50px 0 50px;

  color: #fff;

  text-align: center;

  max-width: 150px;

  position: absolute;

  right: -25px;

  bottom: -25px;

  padding: 10px;

}



.yr {

  font-size: 40px;

  font-weight: 700;

}



.yr-experience p {

  font-size: 16px;

  color: #fff;

}



.abt-service-list-box {

  padding: 20px;

  margin-top: 20px;

  height: 100%;

  border-left: 5px solid var(--primary-color);

  border-radius: 10px;

  background-color: #fff;

  -webkit-box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

}



.abt-service-list-box ul {

  list-style: inside;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.abt-service-list-box li {

  width: 50%;

  text-transform: capitalize;

  font-size: 14px;

  position: relative;

  display: flex;

  align-items: flex-start;

  padding-left: 20px;

}



.abt-service-list-box li::before {

  content: '\f043';

  font-family: "Font Awesome 6 Free";

  position: absolute;

  font-weight: 900;

  font-size: 12px;

  left: 0;

  top: 2px;

  color: var(--primary-color);

}



/* products section */

.product-sec,

.vision-sec {

  background-color: var(--bg-color);

}



.products-carousel {

  margin-top: 30px;

}



.products-carousel .item {

  background-color: #fff;

  border-radius: 10px 10px 0 0;

}



.products-carousel img {

  width: 100%;

  height: 200px;

  padding: 10px;

  object-fit: contain;

}



.pro-img-name {

  background-color: var(--primary-color);

  color: #fff;

  text-align: center;

  padding: 10px 5px;

  line-height: 1.2;

  border-radius: 0 0 10px 10px;

  height: 52px;

  text-overflow: ellipsis;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}





/* Service section */

.service-list-box {

  padding: 20px;

  margin-top: 70px;

  height: calc(100% - 70px);

  position: relative;

  border: 1px solid var(--bg-color);

  border-radius: 10px;

  background-color: #fff;

  -webkit-box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

  transition: all 0.5s ease;

}



.service-list-box h3 {

  font-size: 20px;

  margin-top: 60px;

  color: var(--title-color);

  text-transform: capitalize;

}



.service-list-box-img {

  position: absolute;

  top: -30px;

  width: 85px;

  height: 85px;

  border-radius: 50%;

  /* border: 3px dashed var(--primary-color); */

  background-color: var(--primary-color);

  /* -webkit-box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25);

  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.25); */

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.5s ease;

}



.service-list-box-img::before {

  content: " ";

  position: absolute;

  border: 2px dashed var(--primary-color);

  width: 100px;

  height: 100px;

  border-radius: 50%;

  left: -7px;

  -webkit-animation: dot-cercle-Effect 5s linear forwards infinite;

  animation: dot-cercle-Effect 5s linear forwards infinite;

  -webkit-transition: all .3s;

  transition: all .3s
}



@-webkit-keyframes dot-cercle-Effect {

  0% {

    -webkit-transform: rotate(0);

    transform: rotate(0)
  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg)
  }

}



@keyframes dot-cercle-Effect {

  0% {

    -webkit-transform: rotate(0);

    transform: rotate(0)
  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg)
  }

}



.service-list-box-img svg {

  width: 50px;

}



.service-list-box:hover .service-list-box-img {

  /* border-color: #fff; */

  background-color: var(--bg-color);

  transition: all 0.5s ease;

}



.water-pump,

.mep-product-trading,

.AMC-s,

.technical-services {

  fill: #fff;

  transition: all 0.5s ease;

}



.installation_commissioning {

  fill: #fff;

  stroke: #fff;

  stroke-width: 2;

  stroke-miterlimit: 10;

  transition: all 0.5s ease;

}



.service-list-box:hover .water-pump,

.service-list-box:hover .mep-product-trading,

.service-list-box:hover .AMC-s,

.service-list-box:hover .technical-services {

  fill: var(--primary-color);

  transition: all 0.5s ease;

}



.service-list-box:hover .installation_commissioning {

  fill: var(--primary-color);

  stroke: var(--primary-color);

  transition: all 0.5s ease;

}





/* vision section */

.vision-sec h3 {

  font-size: 24px;

  font-weight: 600;

  margin-top: 15px;

  color: var(--title-color);

  text-transform: capitalize;

}



.vision-sec b {

  color: var(--title-color);

  font-weight: 500;

}



.vision-sec li {

  margin-bottom: 10px;

  line-height: 1.2;

}



/* Team section */

.team-container {

  display: flex;

  align-items: self-start;

  margin-top: 20px;

  background-color: #fff;

  border-radius: 10px;

  -webkit-box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);

  box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);

}



.team-img {

  width: 400px;

  max-height: 450px;

  object-fit: contain;

  padding: 20px;

}



.team-data {

  width: calc(100% - 400px);

  padding: 20px;

}



.team-contact {

  /* width: 50%; */

  display: flex;

  align-items: flex-start;

  margin-bottom: 15px;

}



.team-name-box h3 {

  font-size: 20px;

  color: var(--title-color);

  text-transform: capitalize;

  margin: 0;

}



.team-name-box h5 {

  font-size: 14px;

  color: var(--title-color);

  margin: 0;

}



.team-contact a {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  background-color: var(--primary-color);

  margin-left: 15px;

  margin-right: 15px;

}





/* Testimonials section */

.reviews-section .reviews-carousel .testimonial-image {

  width: 80px;

  height: 80px;

  display: block;

  margin: auto;

}



.reviews-section .reviews-carousel .testimonials .quote i {

  color: var(--primary-color);

  font-style: italic;

  font-size: 30px;

}



.reviews-section .reviews-carousel .testimonials .text {

  text-align: center;

  margin-top: 34px;



}



.reviews-section .reviews-carousel .testimonials .subheading {

  font-size: 24px;

  margin-top: 25px;

}



/* ===================================

    Client-Section

====================================== */

.client-section {

  padding-top: 0;

}



.client-section .owl-carousel {

  text-align: center;

}



.client-section .owl-carousel .owl-item img {

  width: 80%;

  margin-left: auto;

  margin-right: auto;

}



/* .clients-owl button.owl-dot.active{

    background-color: var(--secondary-color);

} */







/* ===================================

    Contact-Section

====================================== */

.contact-section {

  background-image: url(../images/contact-bg.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  color: #fff;

  padding-bottom: 20px;

}



.contact-section .sec-title {

  color: #fff;

  font-size: 30px;

}



.contact-section .contact-form {

  margin-top: 20px;

}



.contact-section .form-group {

  margin-bottom: 25px;

}



.contact-section .form-control {

  padding: .7rem 1rem;

  background-color: transparent;

  box-shadow: none;

  color: #fff;

}



.contact-section .form-control:focus {

  color: #fff;

  border-color: #ced4da;

  box-shadow: none;

}



.contact-section ::placeholder {

  color: #fff;

  opacity: 1;

  /* Firefox */

}



.contact-section ::-ms-input-placeholder {

  /* Edge 12-18 */

  color: #fff;

}



.contact-section .form-sec .btn.button {

  width: auto;

  background-color: var(--primary-color);

}



.contact-section .form-sec .button-center {

  width: 100%;

  margin: 15px 20px 0 20px;

}



/*Address sec*/

.contact-section .address-sec {

  padding-left: 40px;

}



/* .contact-section .address-sec .text{

  color: var(--text-color);

  opacity: 0.9;

  font-weight: 400;

} */

.contact-section .address-sec .text {

  color: var(--text-color);

  line-height: 25px;

  font-size: 17px;

}



.contact-section .address-sec .media {

  margin-top: 20px;

  display: flex;

}



.contact-section .address-sec .media i {

  font-size: 18px;

  color: #fff;

}



.contact-section .address-sec .media-body {

  margin-left: 20px;

}



.contact-section .address-sec .media-body .text {

  margin-top: 0;

  margin-bottom: 0;

  color: #fff;

  font-size: 16px;

}



.contact-section .address-sec .media-body span {

  margin-left: 20px;

}



.contact-section .address-sec .media .media-body ul {

  margin: 0;

  padding: 0;

}



.contact-section .address-sec .media .media-body li {

  list-style: none;



  display: inline-block;

}



.contact-section .contact-social-area {

  margin-top: 30px;

}





.footer {

  text-align: center;

  padding-top: 30px;

  margin-top: 40px;

  border-top: 1px dashed #fff;

}



.footer p {

  color: #fff;

}



/* product page  */

.product-list {

  background-color: #fff;

  border-radius: 10px;

  -webkit-box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);

  box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);

}

.product-list img {

  width: 100%;

  height: 200px;

  padding: 10px;

  object-fit: contain;

}

.page-banner-area {

  margin-top: -35px;

  height: 250px;

  background-image: url(../images/page-banner.jpeg);

  background-repeat: no-repeat;

  background-size: cover;

  display: flex;

  align-items: center;

  position: relative;

}

.page-banner-area::before {

  content: ' ';

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);

  /* background-color: rgb(56 160 214 / 70%); */

}

.page-banner-area .sec-title {

  color: #fff;

  position: relative;

  display: flex;

  align-items: center;

  height: 100%;

}







/* media start */

@media (max-width:1199.98px) {



  body,

  p,

  .contact-section .address-sec .media-body .text,

  .contact-section .form-control,

  .btn.button {

    font-size: 12px;

  }



  .banner-content h2 {

    font-size: 20px;

  }



  .banner-carousel img {

    max-height: 100%;

  }



  .banner-content {

    width: 70%;

  }



  .footer p {

    margin-bottom: 0;

  }



  .contact-section .address-sec .media i {

    font-size: 12px;

    padding-top: 7px;

  }



  .contact-section .address-sec .media-body {

    margin-left: 10px;

  }



  .side-nav .navbar-nav .nav-link {

    font-size: 16px;

  }



  .client-section .owl-carousel .owl-item img {

    width: auto;

  }

}



@media (max-width:991.98px) {

  .navbar.navbar-top-default {

    background-color: #fff;
    /* background-color: var(--secondary-color); */
  }

  .header-appear .navbar-top-default {
    padding-top: 20px;
  }

  .sidemenu_btn span,
  .sidemenu_btn span:first-child,
  .sidemenu_btn span:last-child,
  .sidemenu_btn span:nth-child(2) {

    background: var(--primary-color);

    background-color: var(--primary-color);

  }

  .skew-area {

    width: 100%;

    padding-left: 10px;

    padding-right: 10px;

    justify-content: center;

    background-color: #fff;

    /* background-color: var(--secondary-color); */

  }

  .skew-area .social-icons ul {

    padding-left: 1rem;

  }

  .social-icons ul li {

    margin-right: 3px;

    margin-left: 3px;

  }

  .social-icons ul li a {

    height: 28px;

    line-height: 28px;

    width: 28px;

    font-size: 0.8rem;

  }

  section {

    padding-top: 30px;

    padding-bottom: 30px;

  }

  .banner-content{
    padding-bottom: 0;
  }
.about-section{
  padding-top: 0;
}

  .sub-title {

    font-size: 14px;
padding: 3px 20px;
  }



  .sec-title {

    font-size: 20px;

    margin-bottom: 10px;

  }



  .contact-section .sec-title {

    font-size: 18px;

  }



  .sub-title::after {

    font-size: 10px;

    width: 16px;

    height: 16px;

  }



  .services-carousel h3 {

    font-size: 14px;

  }



  .services-carousel .icon-box span {

    width: 100px;

    height: 100px;

  }



  .services-carousel svg {

    max-width: 50px;

  }


.service-list-box{
  height: auto;
  margin-top: 50px;
}
  .service-list-box h3 {

    font-size: 18px;

  }



  .vision-sec h3 {

    font-size: 20px;

  }



  .team-container {

    display: block;

  }



  .team-img {

    width: 50%;

  }



  .team-data {

    width: 100%;

  }



  .team-name-box h3 {

    font-size: 18px;

  }



  .team-name-box h5 {

    font-size: 12px;

  }



  .side-menu {

    width: 50%;

  }



  .contact-section .address-sec {

    padding-left: 15px;

  }



  .footer {

    margin-top: 15px;

    padding-top: 15px;

  }

  .page-banner-area {

    height: 130px;

  }

  #team .sub-title,
  #team .sec-title,

  .reviews-section .sub-title,
  .reviews-section .sec-title {

    margin: auto;

    text-align: center;

  }

  .yr-experience {
    position: relative;
    right: 0;
    bottom: 0;
    max-width: 100%;
  }
}



@media (max-width:575.98px) {

  .logo-row,
  .top-media {

    display: none;

  }



  .side-menu {

    width: 90%;

  }



  .banner-content {

    width: 100%;

    position: relative;

  }



  .banner-content h2 {

    font-size: 16px;

  }



  .team-img {

    width: 100%;

    max-height: 350px;

  }



  .abt-service-list-box li {
margin-top: 0;
    width: 100%;

  }



  .service-list-box {

    margin-top: 40px;

    height: auto;

  }



  .client-section {

    margin-top: 30px;

    border-top: 1px dashed var(--text-color);

    padding-top: 50px;

  }

}



.whatsapp-icon {
  position: fixed;

  z-index: 3;

  right: 15px;

  bottom: 50px;

  font-size: 30px;

  font-weight: 900;

  color: #fff;

  background-color: rgb(77, 194, 71);

  padding: 5px;

  width: 50px;

  height: 50px;

  border-radius: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-animation: bounce_icon 2s ease infinite;

  animation: bounce_icon 2s ease infinite;

  -webkit-transition: all .3s;

  transition: all .3s;
  
}

@keyframes bounce_icon {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }

}





/* .whatsapp-icon::after{

  content: ' ';

  position: absolute;

  right: 0;

  top: -2px;

  font-size: 14px;

  font-weight: 900;

  color: var(--primary-color);

  background-color: #fff;

  width: 23px;

  height: 23px;

  border-radius: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-animation:title-icon-animation 2s infinite backwards;animation:title-icon-animation 2s infinite backwards;-webkit-transition:all .3s;transition:all .3s}@-webkit-keyframes title-icon-animation{0%,100%,20%,50%,80%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateY(4px);transform:translateY(4px)}60%{-webkit-transform:translateY(1px);transform:translateY(1px)}}@keyframes title-icon-animation{0%,100%,20%,50%,80%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateY(4px);transform:translateY(4px)}60%{-webkit-transform:translateY(1px);transform:translateY(1px)}

 } */