@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
  }

  .gif {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    z-index: 999999;
    display: none;
    }

    .gif-img{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .gif-img img{
      /* width: 100px; */
      height: 40px;
    }
    .gif-img img:first-child{
      width: 80px;
      height: 80px;
    }

h2 a,h2,h3{
  font-family: 'Libre Baskerville' !important;
}
.h3 {
  font-family: 'Libre Baskerville',serif;
  font-style: normal;
  font-weight: 400;
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: -1px;
}

p{

  font-family: "Roboto" !important;
}

li a{
  font-family: "Libre Baskerville" !important;

}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInUp {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100);
  }
}
  /* animation: 1s ease-out 0s 1 slideInLeft; */


::selection {
  color: white;
  background: #333;
}


.btn-theme{
  padding: 0.7rem 1.4rem;
  color: white;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  border: 2px solid white;
}
.btn-theme2{
  padding: 0.7rem 1.6rem;
  color: white;
  background-color: #007478;
  border: none;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  border: 1px solid #007478;
  margin-top: 1rem;
  text-align: center;
  letter-spacing: 1px ;
  margin-top: 2rem;
}
.btn-theme1{
  padding: 0.9rem 1.4rem;
  color: white;
  background-color: #333;
  border: none;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  /* border: 1px solid #333; */
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  letter-spacing: 1px ;
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  /* background: #d1d1d1; */
  background-color:#333;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #007478;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  /* background: ; */
}

a{
  text-decoration: none !important;
}

p{
  /* font-family: "Gotham A","Gotham B"; */
  font-style: normal;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 25px !important;
  -webkit-font-smoothing: antialiased;
  /* color: #333; */
}
h2{
  /* font-family: 'Libre Baskerville',serif; */
  font-weight: 400;
  font-size: 65px;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #031e32; 
}


.w-33{
  width: 32%;
  margin: 1rem 0;
}

.w-34{
  width: 33%;
}
.w-30{
  margin: 1rem 0;
}
.w-50{
  width: 50%;
}
.w-66{
  width: 66.4%;

}
.w-25{
  width: 25%;
  margin: 1rem 0;
}
.w-24{
  width: 25%;
}


.item-center{
    align-items: center;
  }
  .text-center{
      text-align: center;
  }
  
  .container1{
      width: 90% !important;
      margin: 0 auto;
  }
  .flex{
    display: flex;
  }
  .flex-box{
    display: flex;
    flex-wrap: wrap; 
  }
  
  .flex-col{
    display: flex;
    flex-direction: column;
  }
  
  .justify-between{
    justify-content: space-between;
  }
  
  .justify-around{
    justify-content: space-around;
  }
  .justify-center{
    justify-content: center;
  }
  
  .justify-evenly{
    justify-content: space-evenly;
  }

 
  .justify-end{
    justify-content: flex-end;
  }

  /* end */

  

  /* Nav */


  
.nav-bar{
  

    align-items: center;
    height: 9rem;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    z-index: 99999;
    padding: 0;
    transition: all 0.3s ease-in-out;
}
.nav-bar.sticky{
    height: auto;
    background-color: white;
    /* position: relative; */
    transition: all 0.3s ease-in-out;

}

.nav-bar.sticky::after{
    content: '';
    position: absolute;
    background-color: #B08949;
    bottom: 0;
    height: 1px;
    width: 100%;
}

.open.nav-bar.sticky{
    padding: 0rem 0;

}


.open .logo{
    width: 20%;
}

.nav-bar .logo img{
    width: 100px;
  height:100px;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  background-color: #007478;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 11;
  /* display: none; */
}

.nav-bar .logo {
  position: relative;
  display: none;

  
}

.open.nav-bar .logo {
  display: block;
}

.open.nav-bar{
  position: fixed;
}




.nav-bar.open{
    height: 100vh;
    background-color: #333;
}

.nav-bar.open .container1{
    display: flex;
    align-items: flex-start;
    height: 100%;
    padding-top:2rem;
    justify-content: space-between;
    align-items: center;

}

.open .top-inf{
    width: 100%;
}

.nav{
    display: none;
    position: relative;
}
.nav ul{
  padding-left: 2rem;
}

.nav-bar .address{
    color: #fff;
    font-size: 30px;
    width: 40%;
    display: none;
}
.nav-bar .address h2{
    color: #007478;
    
}

.open .address{
    display: block;
    padding-left: 2rem;
    display: none;

}

.nav::before{

    content: '';
    position: absolute;
    background-color: #007478;
    height: 100%;
    width: 4px;


}
.nav ul:first-child{
    display: flex;
/* flex-direction: column; */
justify-content: space-between;
}

.nav li{
list-style: none;
margin: 3rem 0;
padding-left: 1rem;
}
.nav a:hover .txt{
opacity: 0.2;
}


.nav .txt{
position: absolute;
top: 0%;
z-index: -9999;
left: 50%;
right: 50%;
transform: translateX(-50%);
color: #007478;
opacity: 0.3;
font-size: 7rem;
letter-spacing: 10px;
text-align: center;
width: 100%;
opacity: 0;
transition: all 0.3s ease-in-out;

}



.drop{
    position: relative;
}

.s-drop{
    position: absolute;
/* display: none; */
display: flex;
flex-direction:column;
top: 70%;
left:35%;

width: 20rem;
display: none;
}
.serv{
    display: flex;
    flex-direction: column;
}

.serv:hover .s-drop
{
display: none;
}

.serv:hover .txt
{
opacity: 0.2;
}


.nav a{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    overflow: hidden;
    transition: all .3s ease;
    letter-spacing: 1px;
  font-family: "Libre Baskerville" !important;

}

.s-drop a{
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0 20px;
    overflow: hidden;
    color: #333;
    
}
.s-drop li{
    margin: 0.2rem 0;
font-size: 1rem;
margin-left: 0rem;
}

.nav a:hover{
    color: #777;
    opacity: 1;

}
.open .nav{
    display: block;
    width: 100%;
}



.nav-bar .right{
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    letter-spacing: 2px;
    font-weight: 100;
}

.open .right{
width: 200px;
justify-content: flex-end;
align-self: flex-start;

}
.nav-bar a{
    text-decoration: none;
  font-family: 'Libre Baskerville' !important;

}


.burger{
    /* border: 2px solid #007478; */
    position: absolute;
    top: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 2rem;
    transition: 0.1s ease-in-out;
}

/* 
.open .burger:hover .line{
  width: 27px;
  background-color: #fff;


} */
.open .burger .line{
  width: 25px;
  height: 2px;
  margin: 2px 0;
  background-color: #fff;
  transition: all 0.1s ease-in-out;
}

/* 
.burger:hover .line{
    width: 27px;
    background-color: #fff;


} */
.burger .line{
    width: 25px;
    height: 2px;
    margin: 2px 0;
    background-color: #fff;
    transition: all 0.1s ease-in-out;
}



  /* Nav End */


.hero-slider{
      background-color: white;
  }


  .main-heading{
    padding: 3rem 0 !important;
    display: flex;
    justify-content: space-around;
    animation: 1s ease-out 0s 1 slideInLeft;

  }

  .main-heading .sp{
    text-align: right;
    width: 20%;
    
  }
  .main-heading .sp p{
    color: #777;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    padding-top: 1rem !important;
  }

  .main-heading .txt{
    width: 70%;
    color: #333;

  }



  .main-heading .txt h2{
    font-weight: 400;
    font-size: 65px;
    line-height: 1.1;
    letter-spacing: -2px;
    color: #031e32;
    margin-bottom:2.5rem ;
  }

  .main-heading .txt p{
    width: 90%;
    margin: 1rem 0;
  }

  .main-heading .txt h2 a{
    position: relative;
  }

  .main-heading .txt h2 a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1rem;
    width: 10%;
    height: 3px;
    background-color: #007478;

  }

  .main-heading .txt ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .main-heading .txt ul li{
    list-style: none;
    width: 48% !important;
    margin-top: 1rem;
    /* margin-bottom: 1.5rem; */
    padding-bottom: 1rem;
    border-bottom: 1px solid #77777723;
    font-size: 0.9rem;
  }


  .heading{
    text-align: center;
    padding: 2rem 0;
    color: #333;
    z-index: 99;
    align-items: center;
    cursor: pointer;
    
  }
  
  .heading img{
    width: 5rem;
  }
  
  .heading h2{
    font-size: 2.5rem;
    font-weight: 600;
    position: relative;
    opacity: 0.6;
    letter-spacing: 1;
    animation: 1s ease-out 0s 1 slideInLeft;
    
  }

  .heading h2::after{
    content: '';
    position: absolute;
    bottom: -1rem;
    background-color: #007478;
    height: 2px;
    width: 20%;
  left: 50%;  
  right: 50%;
  transform: translate(-50%,-50%);
  border-radius: 5px;
}

/* innner services */

  .inner-services{
    padding: 2rem 0;
  }




  /* Hero */

  .main-hero{
    overflow: hidden;
    position: relative;
}
.main-hero::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:  #1f1f1fee;
  z-index: 10;
}

.main-hero img:first-child{
height: 100vh;
width: 100%;
object-fit: cover;
}

.main-hero video{
    height: 100vh !important;
    object-fit: cover !important;
    transform: scale(1.15) !important;
    filter: grayscale(100%);
}

.main-hero .text{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    color:white;
    line-height: 1.5;
    width: 600px;
    z-index: 11;

}

.main-hero .text h2{
  font-size: 4.5rem;
  margin-bottom: 2.5rem;
  font-weight: 300;
  line-height: 1;
  animation: 1s ease-out 0s 1 slideInDown;  

}
.main-hero .text p{
  animation: 1s ease-out 0s 1 slideInUp;

}
.main-hero .text h2 a{
  color: white;
  position: relative;
}

.main-hero .text h2 a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -1rem;
  background-color: #007478;
  width: 7%;
  height: 3px;
}
.main-hero .container1 .box1{ 
  display: none !important;
}
.main-hero .container1 .box{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  background-color: #007478;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 11;
  
}

.main-hero .container1 .box img{
  /* width: auto !important; */
  height:75px;
  object-fit: contain;
  animation: 1s ease-out 0s 1 slideInLeft;
  /* animation-iteration-count: 1; */
}



/* sticky nav */

.sticky-nav li{
  list-style: none;
  background-color: #333;
  width: 100%;
  padding: 1rem;
  text-align: center;
  border-right: 1px solid rgba(233, 233, 233, 0.281);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  
}
.sticky-nav li.act{
  background-color: #007478;

}

.sticky-nav li:hover{
  background-color: #007478;
  border-right: 1px solid #333;

}

.sticky-nav li:last-child{
  border-right: none;

}

.sticky-nav a{
  color: white;
  text-decoration: none;
}


/* Portfolio */

.portfolio{
  padding: 4rem 0;
}


.portfolio .box{
  /* display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px; */
  padding-top: 3rem;
}


.portfolio .box .block{
  margin-bottom: 0.25rem;
  /* padding: 6rem 4rem; */
  /* background-image: url('images/planning.jpg'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  color: #c0c0c0;
  cursor: pointer;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2rem;
  padding-bottom: 1rem;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease-in-out
}

/* portfolio Images */

.portfolio .box .block:nth-child(1){
  background-image: url('images/event.jpg');
}
.portfolio .box .block:nth-child(2){
  background-image: url('images/business.jpg');
}
.portfolio .box .block:nth-child(3){
  background-image: url('images/app.jpg');
}
.portfolio .box .block:nth-child(4){
  background-image: url('images/media.jpg');
}
.portfolio .box .block:nth-child(5){
  background-image: url('images/brand.jpg');
}



.portfolio .box .block::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba( 0, 0, 0, 0.3 );
  /* border-radius: 20px; */
  
}
.portfolio .box .block:hover::after{
  
  backdrop-filter: blur( 2px );
  -webkit-backdrop-filter: blur( 2px );

}

/* .portfolio .box .block:first-child{
  grid-column-start: 1;
grid-column-end: 3;

} */
/* 
.portfolio .box .block:nth-child(5){
  grid-column-start: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  height: 610px;
} */

/* .portfolio.sub .box .block:nth-child(5){
  grid-column-start: 3;
  grid-row-start: 2;
  grid-row-end: 2;
  height: unset;
} */
.portfolio .box .block:first-child .text{
  /* margin-bottom: -10%; */

}


.portfolio .box .block .text{
  position: relative;
  z-index: 2;
  padding-bottom: 2rem;
 
}

.portfolio .box .block .text p{
  margin-bottom: -90%;
  transition: all 0.4s ease-in-out;
}

.portfolio .box .block:hover .text p{
  margin-bottom: 0%;
  transition: all 0.4s ease-in-out;

}

.portfolio .box .block .text h2{

  color: white;
  margin-bottom: 2rem;
  font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: unset;
}

/* Featured Work  */

.feature-work{
  background-color: #007478;
  /* background-color: #333; */
  color: white;
  padding: 3.5rem 0;
  margin: 3rem 0;

}

.feature-work .icon{
  display: flex;
  align-items: center;
}

.feature-work .icon p{
  font-size: 1rem;
  font-weight: 800 !important;
  margin-left: 2rem;
  letter-spacing: 1px;
}



/* main Services */

.main-services{
  padding: 2rem 0;
  background-color: #F6F6F6;
}

.main-services .box{
  padding: 2rem 0;
}


.main-services .block{
  margin: 1rem 0;
  padding: 0 0.2rem;
}

.main-services .block:last-child{
  align-self: center;
}

.main-services .block .image{
  width: 100%;
}

.main-services .block .image img{
  width: 100%;
  height: 220px;
  object-fit: cover;

}

.main-services .block h3{
  font-size: 25px;
  color: #333;
  font-weight: 300;
  margin-top: 1rem;
}

.main-services .block p{
  margin: 1rem 0 !important;
} 

.main-services .block li{
  margin: 0.5rem 0;
  list-style: none !important;
  width: 49.8%;
  background-color: #cccccc2f;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.7rem 0.5rem;
}

.main-services .block li:nth-child(even){
  text-align: right;
}



/* Clients */

.clients{
  background-color: #F6F6F6 ;
  padding: 4rem 0;
}

.clients .block img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: grayscale(800%);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.clients .block img:hover{
  filter: grayscale(0%);

}


/* Contact */

.contact{
  padding: 4rem 0;
  padding-bottom: 3rem;
  background-color: white;
}


/* Country */

.country .block{
  padding: 0rem 1rem;
  width: 25% !important;
  /* border: 1px solid rgba(255, 255, 255, 0.226); */
  color: white;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.country .block:nth-child(even){
  /* background-color: #f7444e; */
  background-color: #333;
}
/* .country .block:nth-child(3){
  background-color: #333;
} */
.country .block:nth-child(odd){
  background-color: #007478;
}
/* .country .block:nth-child(4){
  background-color: #007478;
} */

.country .block img{
  width: 60px;
  height: 80px;
  object-fit: contain;
}

.country .block h2{
  font-size: 1.3rem;
  margin: 1rem 0;
  color: white;
  letter-spacing: 1px;
}
.country .block p{
  margin: 0.5rem 0;
  font-size: 0.9rem !important;
}

  /* Projects */



  .latest-projects .heading{
    color: #333;
    text-align: center;
  }

  .latest-projects{
    padding-bottom: 1rem ;
    padding: 4rem 0;
    background-color: white;
  } 

  

  .box .project img{
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;

  }
  .box .project{
    height: 300px;
    overflow: hidden;
    width: 50%;
    margin-bottom: 0rem;
    cursor: pointer;
    position: relative;
    /* filter: grayscale(100%); */
    transition: all 0.3s ease-in-out;
  }
  
  /* .box .project:hover{
    
    filter: grayscale(0%);
  } */

  .box .project::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.7); */
  background-color:  #1f1f1f7c;

    top: 0;
    left: 0;
  }

  

  .box .project .hov-txt h2{
    /* opacity: 0; */
    transition: all 0.3s ;    
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 1px;
    color: white;

  }

  
  .box .project .hov-txt p{
    /* opacity: 0; */
    transition: all 0.3s ;
    margin: 0rem 0;
    font-size: 0.9rem;
  }

  .box .project .hov-txt p img{
   width: 15px;
   margin-right: 0.5rem;

  }
  .box .project .hov-txt{

    position: absolute;
    bottom: 8%;
    left: 5%;
    /* background-color: rgba(20, 20, 20, 0.664); */
    transition: all 0.3s ;
    color: white ;
    z-index: 999;
  }

  
/* 
  .box .project:hover img{
    transform: scale(1.1);
  }
  

  .box .project:hover h2{
    opacity: 1;
  }
  .box .project:hover p{
    opacity: 1;
  } */

  .logo-slider{
    padding: 1rem;
  margin-bottom: 2rem;

    /* background-image: url('./images/business.jpg'); */
  }

  .logo-slider .clients{
    padding-top:1rem;
  }

  .logo-slider .clients div{
    width: 20%;
  }

  .logo-slider .clients div img{
    /* background-color: #333; */
    /* width:100px; */
    height: 40px;
    width: auto;
    filter: grayscale(100%);
    transition: all 0.1s ease-in-out;
  }
  
  .logo-slider .clients div img:hover{
    filter: grayscale(0%);

  }

.logo-slider .heading h1{
color: #333 ;

}
  
.logo-slider .flex-box div{
  margin: 1rem 1.1rem;
  
}


  /*    */

  /* bx-wrapper Styling */
.bx-wrapper {
  box-shadow: none !important;
  border: none !important;
  background: #fff !important;
  margin: auto !important;
  
}

.bx-wrapper .bx-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  background: rgba(80, 80, 80, 0.5) !important;
  width: 100% !important;
  
}

.bx-wrapper .bx-caption span {
  color: #fff !important;
  /* font-family: Arial !important; */
  display: block !important;
  font-size: 8px !important;
  padding: 10px !important;
  
  text-align: center;
}

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
  
}

.bx-wrapper .bx-prev {
  left: 10px;
  background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
  right: 10px;
  background: url(images/controls.png) no-repeat -43px -32px;
}
/* End bx-wrapper Styling */

.logosImgs {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  
}

.logosImgs img {
  max-height: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: .65;
  transition: all .5s;
}

.logosImgs img:hover {
	opacity: 1;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}


/* Approach */

.approach{
  padding: 4rem 0;
}


.approach header{
  padding-top: 4rem;
}

.approach header .heading {
color: #333;
    
}


.approach .owl-carousel{
  position: relative;
  height: auto;
  filter: grayscale(100%);
  transition: all 0.3s ease-in-out;
  
}

.approach .owl-carousel:hover{
  filter: unset;

}


.approach .owl-carousel::before{
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 29%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.137);
  z-index: 9;
}


.approach .owl-carousel::after{
  content: '';
  position: absolute;
  right: 28.7%;
  top: 0;
  width: 2px;
  height: 100%;
  /* background-color: rgba(255, 255, 255, 0.151); */
  background-color: rgba(255, 255, 255, 0.315);

}

.approach header .item {
height: 100vh;
position: relative;
}
.approach header .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.approach header .item .cover {
padding: 75px 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.233);
display: flex;
align-items: center;
}
.approach header .item .cover .header-content {
position: relative;
padding: 56px;
width: 70%;
overflow: hidden;
/* margin-bottom: 20%; */
}
.approach header .item .cover .header-content .line {
content: "";
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
border: 9px solid #fff;
-webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
.approach header .item .cover .header-content h2 {
font-weight: 300;
font-size: 35px;
color: #fff;
}
.approach header .item .cover .header-content h1 {
font-size: 2.2rem;
font-weight: 600 !important;
margin: 5px 0 20px;
word-spacing: 3px;
color: #fff;
}
.approach header .item .cover .header-content h4 {
font-size: 1rem;
font-weight: 300;
line-height: 36px;
color: #fff;
}
.approach header .owl-item.active h1 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInDown;
animation-delay: 0.3s;
}
.approach header .owl-item.active h2 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInDown;
animation-delay: 0.3s;
}
.approach header .owl-item.active h4 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInUp;
animation-delay: 0.3s;
}
.approach header .owl-item.active .line {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInLeft;
animation-delay: 0.3s;
}
.approach header .owl-nav .owl-prev {
position: absolute;

top: 3rem;
right: 10rem;

-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: rgba(0, 0, 0, 0.5) !important;
width: 30px;
cursor: pointer;
height: 30px;
position: absolute;
z-index: 1000;
border-radius: 0;

display: none!important;


}
.approach header .owl-nav .owl-prev span {
font-size: 1.6875rem;
color: #fff;
}
.approach header .owl-nav .owl-prev:focus {
outline: 0;
}
.approach header .owl-nav .owl-prev:hover {
background: #000 !important;
}
.approach header .owl-nav .owl-next {
position: absolute;
bottom: 3rem;
right: 10rem;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: rgba(0, 0, 0, 0.5) !important;
width: 30px;
cursor: pointer;
height: 30px;
position: absolute;
z-index: 1000;
border-radius: 0;

display: none!important;

}
.approach header .owl-nav .owl-next span {
font-size: 1.6875rem;
color: #fff;
}
.approach header .owl-nav .owl-next:focus {
outline: 0;
}
.approach header .owl-nav .owl-next:hover {
background: #000 !important;
}

.approach button:focus {
outline: none;

}


.approach .owl-theme .owl-dots{
  position: absolute;
  top: 50%;
  bottom: 50%;
  transform: translateY(-50%);
  justify-content: center;
  right: 0%;
  display: flex;
  flex-direction: column;
  width: 30.02%;
z-index: 99;
}

.approach .owl-theme .owl-dots .owl-dot{
  position: relative;
  margin: 1rem 0;
  
}
.approach .owl-theme .owl-dots .owl-dot:focus{
border: none;
}

.approach .owl-theme .owl-dots .owl-dot span{
  /* position: absolute; */
  width: 20px;
  height: 20px;
  /* left: 0; */
  
}

.approach .owl-theme .owl-dots .owl-dot::after{
  content: '';
  position: absolute;
  width: 100%;
  top: 1px;
  right: 0;
  font-weight: 100;
color: white ;
font-size: 1.2rem;
font-weight: 600;

}

.approach .owl-theme .owl-dots .owl-dot:nth-child(1)::after{
  content: 'Initiation';
}

.approach .owl-theme .owl-dots .owl-dot:nth-child(2)::after{
  content: 'Planning';

}

.approach .owl-theme .owl-dots .owl-dot:nth-child(3)::after{
  content: 'Execution';

}
.approach .owl-theme .owl-dots .owl-dot:nth-child(4)::after{
  content: 'Monitoring';

}
.approach .owl-theme .owl-dots .owl-dot:nth-child(5)::after{
  content: 'Closing & Review ';

}






/* Contact Form */

.contact-form{
  padding-bottom: 5rem;
  background-image: url('/images/contact.jpg');
  background-position: center;
  background-size:cover ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}


.contact-form::before{
  
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.63);
  width: 100%;
  height: 100%;

}

.contact-form .container{

  position: relative;
  z-index: 10;
}


.contact-form .heading{

  color: white;

}


.contact-form .form{
  width: 55%;
}

.contact-form .form h2{
color: white;
  margin: 2rem 0;
  text-align: center;
}


.contact-form .form input{
  width: 100%;
  padding: 0.8rem 1rem;
  margin: 0.5rem 0rem;
  border: 1px ;
  border-radius: 2px;

}
.contact-form .form textarea{
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px ;
  margin: 0.5rem 0;

  border-radius: 2px;
}

.contact-form .info{
  width: 40%;
}



/*  */

.call{
  padding: 1rem 0;
  /* background-color: #007478; */
  background: rgb(212,17,50);
  /* background: linear-gradient(90deg, rgba(212,17,50,0.9023984593837535) 39%, rgba(212,17,50,0.21052170868347342) 97%); */
  /* background: linear-gradient(90deg, rgba(212,17,50,0.9023984593837535) 43%, rgba(212,17,50,0.7903536414565826) 50%, rgba(212,17,50,0.8995973389355743) 57%); */
display: none;
}
.call a{
  color: white;
}

.call p{
  margin-bottom: 0 !important;
  padding:0  2rem;
  color: white;
}


/*  */


.footer .container1{
  padding: 2rem 0;
}

.footer .container1 .block:first-child{
  margin-bottom: 2rem;
}

.footer .container1 .head{
  margin-bottom: 2rem;
  
}

.footer .container1 .head a{ 
  font-weight: 700;
  font-size: 1.1rem;
}

.footer .container1 a{ 
  color: white;
  transition: all 0.2s ease-in-out;
  font-weight: 300;
}

.footer .container1 h3 a{ 
 position: relative;
 
 
}
.footer .container1 h3 a::after{ 
  content: '';
  position: absolute;
  left: 0;
  bottom: -1rem;
  width: 20px;
  background-color: #007478;
  height: 2px;
}

.footer .container1 a:hover{ 
  color: unset;
}



.footer .container1 li{ 
  list-style: none;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.footer .container1 .subscribe{
  margin-top: 1rem;
}

.footer .container1 .subscribe input{
  padding: 0.6rem 1rem;
}
.footer .container1 .subscribe button{
  padding: 0.65rem 1rem;
  background-color: #007478;
  color: white;
  border: 1px solid #007478;
}

.footer .copy{
  /* background-color: #007478; */
  /* text-align: center; */
  padding: 0.7rem 0;
  width: 100%;
  margin-top: 1.2rem;
  display: flex;
  justify-content: space-between;

}
.footer .copy span{
  color: #007478;
}
.footer .copy p{

  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.footer .social{
  background-color: #007478;
  
  justify-content: flex-end;
  display: flex;
}

.footer .social .icon{
  background-color: #333;
  padding: 0.5rem 0;
  width: 300px;
  display: flex;
  border-right: 3px solid #007478 !important;
  justify-content: space-around;
  overflow: hidden;
}
.footer .social .icon a{
  color: white;
  position: relative;

}
.footer .social .icon a::after{
  content: '';
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 2px;
  background-color: #007478;
}

.footer .social .icon i{
  cursor: pointer;
  display: block;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.2rem;
  padding: 0.3rem 0;
  
}

.footer .social .icon i:last-child{

  border-right: 0px;
}


/* Footer  */



.footer{
 background-color: #1f1f1f;
  color: white;

}
.footer ul{
  margin-bottom: unset !important;
}

.footer .container{
  position: relative;

}

.footer .container::after{

content: '';
position: absolute;
top: 0;
background-color: #007478;
width: 100%;
height: 1px;
}

.footer .footer-content{
  padding: 2rem 0;
}

.footer .footer-content h2{
  color: white;
  font-size: 1.8rem;
  padding-bottom: 0.5rem;
  position: relative;
  
}

.footer .footer-content h2::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #007478;
  height: 1px;
  width: 50%;
}

.footer .footer-content div{
  width: 25%;
  
}

.footer .footer-content div:first-child{
width: 48%;
}

.footer .footer-content div li{
  list-style: none;
  margin-top: 1rem;
  font-size: 1rem;
  display: flex;
}

.footer .footer-content div li a{
text-decoration: none;
color: white;
margin-left: 0.6rem;
}

.footer .text{
  padding: 1rem 0;
}

.footer .contact img{
 width: 12rem;
 margin-bottom: 1rem;
}

.footer .contact .links{

  display: flex;
  flex-direction: column;
  

}

.footer .contact .links p{
  display: flex;
  align-items: center;
  
 
}
.footer .contact .links a{
  color: white;
}

.footer .contact .links img{
  width: 20px;
  margin-right: 0.5rem;
  margin-bottom: 0;
}

.footer .contact h2{
  margin: 1rem 0;
}

.footer li a:hover{
  color: #007478 !important;
  opacity: 1 !important;
}

.footer a:hover{
color: #007478;
opacity: 1 !important;

}

.footer .contact .social{
  width: 200px;
}

.footer .contact .social svg{
  margin-top: 0.5 rem;
  margin-right: 0.5rem;
}

.footer .contact .links{
  width: 100%;
}
.footer .contact .links h4{
  margin: 0 0.5rem;
  font-style: oblique;
}
.footer .contact p{
  margin: 1rem 0;
  line-height: 1.5;
}

.footer  a{
  text-decoration: none;
  color: #333;
}
.footer  a:hover{
  opacity: 0.8;
}
.footer  li{
  transition: all 0.2s ease-in-out;
cursor: pointer;
}


.footer .bot-txt p{
  position: relative;
  margin-bottom: 0 !important;
}

.footer .bot-txt p span{
  color: #007478;
  font-size: 1.5rem;
}


.footer .bot-txt p a{
  color: #007478;
}

.footer .bot-txt p::after{
  content: '';
  position: absolute;
  top: -15px;
  left: 0%;
  width: 100%;
  height: 1px;
  background-color: #007478;

}


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

  .nav-bar.open .container1{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
  }
  .nav-bar.open .top-inf ul{
    flex-direction: column !important;
  }
  .nav-bar.open .top-inf ul li{
    margin: 1.5rem 0;
    font-size: 1rem !important;
  }


  .open.nav-bar .logo{
    position: relative;
    width: 100px;
    height: 100px;
    left: 0;
    padding: 2rem 0;
  }
  .nav .txt{
    font-size: 3rem;   
    position: absolute;
    top: 50%;
    z-index: -9999;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #007478;
    opacity: 0.3;
    letter-spacing: 10px;
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }
  .nav-bar.open .logo img{
    
  object-fit: contain;
  position: absolute;
  left: 0 !important;
  top: 0% !important;
  transform: translateY(0%) !important;
  width: 100%;
  height: 75px;
  background-color: #007478;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 11;
  /* display: none; */
  padding: 1rem;
}

  .md-50{
    width: 50% !important;
  }

  .md-full{
    width: 100% !important;
  }

.country .block{
  width: 100% !important;
}

  .approach header .item .cover .header-content {
    position: relative;
    padding:0 20px;
    width: 70%;
    overflow: hidden;
    margin-bottom: 20%;
    
}


header .item .cover .header-content {

  display: flex;
  flex-direction: column;
  justify-content: center;
}

header .item .cover .header-content h1 {
  
  font-size: 1.7rem;

}

header .item .cover .header-content h4 {
  font-size: 0.9rem;
}

  .approach .owl-theme .owl-dots{

    width: 30.7%;
  }

  .approach .owl-theme .owl-dots .owl-dot::after{
    font-size: 1rem;
}


  .box .project .hov-txt h2{
   
    font-size: 20px;

  }

  .footer .contact .links{
    align-items: center;
  }

  .footer .footer-content div li {
    justify-content: center;
    
  }

 

.footer .footer-content h2{

  text-align: center;  
}
  
.footer .footer-content h2::after{
  left: 50%;
  transform: translateX(-50%);  
  width: 30%;
}
  
  .footer .footer-content div:first-child{
    width: 100%;
    text-align: center;
  }
  .footer .footer-content div{
  width: 80%;
  margin: 1rem auto;
  
  }

}


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

  

  .main-heading{
    padding: 3rem 0 !important;
    display: flex;
    flex-direction: column;
   

  }

  .main-heading .sp{
    width: 100% !important;
    text-align: left;
  }
  .main-heading .txt{
    width: 100% !important;
  }
  .main-heading h2 a{
    font-size: 3.5rem !important;
  }

  .main-hero .text{

    color:white;
    line-height: 1.5;
    width: 90%;
    margin: 0 auto;
    z-index: 11;

}

.main-hero .text h2{
  font-size: 3rem;


}
.main-hero .text p{
  font-size: 0.9rem;

}



.main-hero .container1 .box1{
  display: block !important;
  position: unset !important;
  left: 0;
  top: 0;
  /* background-color: transparent !important; */
  width: 100px;
  height: 100px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}


.main-hero .container1 .box2{
  display: none;
  
}

.main-hero .container1 .box img{
  /*width: 100px;*/
  
  height:60px;
  object-fit: contain;
  animation: 1s ease-out 0s 1 slideInLeft;
  /* animation-iteration-count: 1; */
}

.sticky-nav ul{
  flex-wrap: wrap !important;
}

.sticky-nav li{
  width: 25% !important;
}
.sticky-nav li:last-child{
  display: none !important;
}

.sticky-nav li a{
  font-size: 0.8rem !important;
}


  .sm-full{
    width: 100% !important;
  }
    .logosImgs img {
      max-width: 125px;
      max-height: 88px;
      margin: 5px 8px;
  }

  .box .project .hov-txt h2{
   
    font-size: 18px;

  }

  .box .project .hov-txt p{
   
    font-size: 13px;

  }

  .heading1 h2{
    font-size: 25px;
  }

  
}


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







  .approach header .item .cover .header-content{
    width: 90%;
    padding: 0 ;
  }

  header .item .cover .header-content h1 {
  
    font-size: 25px !important;
    margin-top: 1rem;
  
  }
  
  header .item .cover .header-content h4 {
    font-size: 0.8rem;
  }


    .approach .owl-theme .owl-dots{

      width: unset;
    }

    .owl-theme .owl-dots .owl-dot{
      margin: 0 !important;
      padding: 0.2rem 0.3rem !important;
    }

    .owl-theme .owl-dots .owl-dot span {
      
      background-color: rgba(255, 255, 255, 0.089) !important;
  }

  .owl-theme .owl-dots .owl-dot.active span {
    
    background-color: #007478 !important;
}


    .approach .owl-carousel::before {
      display: none;
    }

    .approach .owl-carousel::after {
      display: none;
    }

  .approach .owl-theme .owl-dots .owl-dot::after{
    display: none;
  }

  .box .project{
    
    width: 100%;
  
  }

  .box .project .hov-txt h2{
   
    font-size: 24px;

  }

  .box .project .hov-txt p{
   
    font-size: 16px;

  }


}

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


  .box .project .hov-txt h2{
   
    font-size: 17px;

  }

  .box .project .hov-txt p{
   
    font-size: 12px;

  }


  .logosImgs img {
      max-width: 85px;
      max-height: 60px;
      margin: 3px 5px;
  }
}

@media screen and (max-width: 500px) {
    .footer .footer-content div{
      width: 97%;
      margin: 1rem 0;
      text-align: center;
      
    }
    .footer .footer-content h2{
      font-size: 2rem;
    }

    header .item .cover .header-content{
      text-align: center;
    }
    header .item .cover .header-content h1 {
  
      font-size: 24px !important;
      margin-top: 1rem;
    
    }
    
    header .item .cover .header-content h4 {
      font-size: 0.7rem;
    }

}



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

  .box .project .hov-txt h2{
   
    font-size: 15px;

  }

  .box .project .hov-txt p{
   
    font-size: 12px;

  }

}