@font-face{
  src: local('Neue Haas Grotesk Display Pro'), 
  url('../fonts/NeueHaasDisplayThin.woff') format('woff');
  font-family: "Neue Haas Grotesk Display Pro";
  font-style: normal;
  font-weight: 300;
  font-display:swap;
}

@font-face{
  src: local('Neue Haas Grotesk Display Pro'), 
  url('../fonts/NeueHaasDisplayRoman.woff') format('woff');
  font-family: "Neue Haas Grotesk Display Pro";
  font-style: normal;
  font-weight: 500;
  font-display:swap;
}

@font-face{
  src: local('Neue Haas Grotesk Display Pro'), 
  url('../fonts/NeueHaasDisplayMediu.woff') format('woff');
  font-family: "Neue Haas Grotesk Display Pro";
  font-style: normal;
  font-weight: 600;
  font-display:swap;
}

@font-face{
  src: local('Neue Haas Grotesk Display Pro'), 
  url('../fonts/NeueHaasDisplayBold.woff') format('woff');
  font-family: "Neue Haas Grotesk Display Pro";
  font-style: normal;
  font-weight: 700;
  font-display:swap;
}


html{ 
overflow-x: hidden;
} 

body{ 
font-family: 'Neue Haas Grotesk Display Pro';
background: #000000;
} 

a {
text-decoration: none !important;
}

p{
color: #fff;
font-size: 15px;
font-weight: 500;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

.container-fluid{
padding-right: 2vw;
padding-left: 2vw;
}

.heading{
font-size: 54px;
color: #ffffff;
margin-bottom: 0px;
text-transform: uppercase;
font-weight: 600;
line-height: 1;
}

.center-heading{
text-align: center;
}

.header-gap{
margin-top: 170px;
}

.nopadd-right{
padding-right: 0;
}

.nopadd-left{
  padding-left: 0;
}


/*----------- button -------------*/

.wave-effect {
  --text: #fff;
  --font-size: 16px;
  --duration: .30s;
  /* --move-hover: -4px; */
  --font-shadow: var(--font-size);
  font-weight: 500;
  line-height: var(--font-size);
  display: block;
  outline: none;
  border: none;
  text-decoration: none;
  font-size: var(--font-size);
  background: var(--background);
  color: var(--text);
  transform: translateY(var(--y)) translateZ(0);
  transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}
.wave-effect div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 var(--text);
}
.wave-effect div span {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-style: normal;
  transition: transform var(--duration) ease;
  transform: translateY(var(--m)) translateZ(0);
}
.wave-effect div span:nth-child(1) {
  transition-delay: 0.02s;
}
.wave-effect div span:nth-child(2) {
  transition-delay: 0.04s;
}
.wave-effect div span:nth-child(3) {
  transition-delay: 0.06s;
}
.wave-effect div span:nth-child(4) {
  transition-delay: 0.08s;
}
.wave-effect div span:nth-child(5) {
  transition-delay: 0.10s;
}
.wave-effect div span:nth-child(6) {
  transition-delay: 0.12s;
}
.wave-effect div span:nth-child(7) {
  transition-delay: 0.14s;
}
.wave-effect div span:nth-child(8) {
  transition-delay: 0.16s;
}
.wave-effect div span:nth-child(9) {
  transition-delay: 0.18s;
}
.wave-effect div span:nth-child(10) {
  transition-delay: 0.20s;
}
.wave-effect div span:nth-child(11) {
  transition-delay: 0.22s;
}
.wave-effect div span:nth-child(12) {
  transition-delay: 0.24s;
}
.wave-effect div span:nth-child(13) {
  transition-delay: 0.26s;
}
.wave-effect div span:nth-child(14) {
  transition-delay: 0.28s;
}
.wave-effect div span:nth-child(15) {
  transition-delay: 0.30s;
}
.wave-effect div span:nth-child(16) {
  transition-delay: 0.32s;
}
.wave-effect div span:nth-child(17) {
  transition-delay: 0.34s;
}
.wave-effect div span:nth-child(18) {
  transition-delay: 0.36s;
}
.wave-effect div span:nth-child(19) {
  transition-delay: 0.38s;
}
.wave-effect div span:nth-child(20) {
  transition-delay: 0.40s;
}
.wave-effect div span:nth-child(21) {
  transition-delay: 0.42s;
}
.wave-effect div span:nth-child(22) {
  transition-delay: 0.44s;
}
.wave-effect div span:nth-child(23) {
  transition-delay: 0.46s;
}
.wave-effect div span:nth-child(24) {
  transition-delay: 0.48s;
}
.wave-effect div span:nth-child(25) {
  transition-delay: 0.50s;
}
.wave-effect:hover {
  --y: var(--move-hover);
  --shadow: var(--shadow-hover);
}
.wave-effect:hover span {
  --m: calc(var(--font-size) * -1);
}

/*----*/

.default-butn {
  border: 0;
  position: relative;
  border-radius: 40px;
  padding: 7px 15px;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  background: #ffffff;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  }
  
  .default-butn:hover {
  color: #000;
  }
  
  .default-butn .text,
  .default-butn .icon-container {
  position: relative;
  z-index: 2;
  }
  
  .default-butn .icon-container {
  --icon-size: 21px;
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: 15px;
  transition: transform 500ms ease;
  text-align: left;
  }
  
  .default-butn .icon-container .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform 500ms ease, opacity 250ms ease;
  }
  
  .default-butn .icon-container .icon--left {
  transform: translateX(-200%);
  opacity: 0;
  }
  
  .default-butn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #E16A44;
  z-index: 0;
  transition: 500ms ease;
  }
  
  .default-butn:hover::after {
  width: 42px;
  }
  
  .default-butn:hover .icon-container {
  transform: translateX(35%);
  color: #fff;
  }
  
  .default-butn:hover .icon-container .icon--left {
  transform: translateX(0);
  opacity: 1;
  }
  
  .default-butn:hover .icon-container .icon--right {
  transform: translateX(200%);
  opacity: 0;
  }

  /*----*/

  .black-default{
    color: #ffffff;
    background: #000000;
  }

  .black-default:hover{
    color: #ffffff;
  }

  /*----*/

.transparent-default{
  border: 1px solid #fff;
  color: #ffffff;
  background: none;
}

.transparent-default:hover{
  color: #ffffff;
}

/*----*/

.rectangle-butn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #424242;
  padding: 7px 12px;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 300;
  }
  
  .rectangle-butn:hover {
  color: #000;
  }
  
  .rectangle-butn .text,
  .rectangle-butn .icon-container {
  position: relative;
  z-index: 2;
  }
  
  .rectangle-butn .icon-container {
  --icon-size: 21px;
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: 25px;
  transition: transform 500ms ease;
  text-align: left;
  }
  
  .rectangle-butn .icon-container .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform 500ms ease, opacity 250ms ease;
  }
  
  .rectangle-butn .icon-container .icon--left {
  transform: translateX(-200%);
  opacity: 0;
  }
  
  .rectangle-butn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #E16A44;
  z-index: 0;
  transition: 500ms ease;
  }

  /* ---- */

.black-butn{
  border-radius: 40px;
  padding: 5px 6px 5px 15px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  background: #000;
  display: inline-flex;
  align-items: center;
  text-transform: capitalize;
}

.black-butn span {
  background: #E16A44;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-In;
  margin-left: 10px;
} 

.black-butn span img{
  width: 13px;
} 

.black-butn:hover {
  color: #ffffff;
}

.black-butn:hover span {
  transform: rotate(-45deg);
}

/* ---- */

.blackbutn-reverse.black-butn {
  color: #000;
  background: #ffffff;
  font-weight: 600;
}

.blackbutn-reverse.black-butn:hover {
  color: #000;
}

.blackbutn-reverse.black-butn span {
  background: #000000;
}

/* ---- */
  

/*---------*/

.default-arrow {
  transition: all 0.2s ease-In;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #F1F0E6;
  background: rgb(128 128 128 / 15%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.default-arrow:hover {
color: #fff;
background: rgb(128 128 128 / 50%);
}


/*---------*/

.arrow-left, 
.arrow-right{
transition: all 0.2s ease-In;
color: #FFA800;
width: 38px;
height: 38px;
border-radius: 5px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translatey(-50%);
}

.arrow-left{left: 0;}
.arrow-right{right: 0;}

.arrow-left:hover,
.arrow-right:hover {
color: #fff;
background: linear-gradient(to right, #FF6B00 0%, #FFA800 90%);
}

/*---------*/

.banner-shadow{
  position: relative;
}

.banner-shadow:before {
  background: linear-gradient(360deg, transparent 0%, #000000 90%);
  height: 20%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  top: 0px;
  width: 100%;
  z-index: 0;
}

.banner-shadow:after {
  background: linear-gradient(180deg, transparent 0%, #000000 90%);
  height: 20%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  bottom: 0px;
  width: 100%;
  z-index: 0;
}


/*--------------- header ---------------*/

.header-area{
padding: 15px 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
border-bottom: 1px solid rgba(255, 255, 255, 0%);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

.logo{
text-align: center;
}

.logo a{
display: inline-block;
}

.logo a img {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 100px;
}

.stick{
padding: 10px 0px;
background: #000000;
border-color: #424242;
}

.stick .logo a img {
width: 80px;
}

/*----*/

.main-menu {
list-style: none;
margin: 12px 0px 0px;
padding: 0;
}

.main-menu li {
margin-right: 30px;
display: inline-block;
position: unset;
}

.main-menu li:last-child {
margin-right: 0px;
}

.main-menu li a {
color: #fff;
font-size: 16px;
font-weight: 500;
}

.main-menu .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10%) !important;
  transition: all 0.4s ease-out;
  padding: 20px;
  left: 0;
  right: 0;
  top: 57px !important;
  width: 1110px;
  margin: 0 15px;
  border-radius: 12px;
}

.main-menu .dropdown-menu a{
  color: #000;
  display: table;
  margin-bottom: 5px;
  line-height: 1.1;
  position: relative;
  font-size: 15px;
}

.main-menu .dropdown-menu a:before {
  content: "";
  width: 100%;
  height: 1.4px;
  position: absolute;
  left: 0;
  bottom: -2px;
  transition: 0.5s transform ease;
  transform: scale3d(0, 1, 1);
  transform-origin: 50% 50%;
  background: #000000;
}

.main-menu .dropdown-menu a:hover:before {
  transform: scaleX(1);
}

.main-menu .dropdown-menu a:last-child{
  margin-bottom: 0px;
}

.main-menu .dropdown{
  display: inline-flex;
  align-items: center;
}

.main-menu .dropdown svg{
  color: #fff;
  font-size: 12px;
  margin-left: 3px;
}

.main-menu .dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%) !important;
}


.menuright{
text-align: right;
}

.menuright.main-menu li {
margin-right: 0px;
margin-left: 30px;
line-height: 1;
}

.menuright.main-menu li:first-child {
margin-left: 0px;
}

/*---- mobile menu--*/

.hamburger-menu { 
  display: none;
}

.overflow {
  overflow: hidden !important;
}

.nonoverflow {
  overflow-x: unset !important;
  overflow-y: hidden !important;
}

.menu.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

.menu {
  transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
  background: #000;
  padding: 110px 15px 20px;
}

.menu::-webkit-scrollbar {
  width: 4px;
  background: #131313;
}

.menu::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
}

.menu::-webkit-scrollbar-thumb {
  background-color: rgb(255 255 255 / 80%);
  outline: none;
  border-radius: 50px;
}

.bigmenu-main-link li {
  margin-bottom: 20px;
  opacity: 0;
  line-height: 1.3;
  transform: translateX(30px);
  transition: all 500ms cubic-bezier(0, 0, 0.58, 1);
}

.bigmenu-main-link li:last-child {
  margin-bottom: 0px;
}

.menu.open .bigmenu-main-link li {
  opacity: 1;
  transform: translateX(0px);
}

.menu.open .bigmenu-main-link li:nth-child(1) {
  transition-delay: 0.3s;
}
.menu.open .bigmenu-main-link li:nth-child(2) {
  transition-delay: 0.6s;
}
.menu.open .bigmenu-main-link li:nth-child(3) {
  transition-delay: 0.9s;
}
.menu.open .bigmenu-main-link li:nth-child(4) {
  transition-delay: 1.2s;
}
.menu.open .bigmenu-main-link li:nth-child(5) {
  transition-delay: 1.5s;
}
.menu.open .bigmenu-main-link li:nth-child(6) {
  transition-delay: 1.8s;
}
.menu.open .bigmenu-main-link li:nth-child(7) {
  transition-delay: 2.1s;
}
.menu.open .bigmenu-main-link li:nth-child(8) {
  transition-delay: 2.4s;
}
.menu.open .bigmenu-main-link li:nth-child(9) {
  transition-delay: 2.7s;
}
.menu.open .bigmenu-main-link li:nth-child(10) {
  transition-delay: 3s;
}

.bigmenu-main-link li a{
color: #fff;
font-size: 17px;
font-weight: 500;
}


.showinner{

}


.mobile-submenu {
  background: #000;
  height: 100%;
  padding: 110px 15px 20px;
  position: fixed;
  right: 0;
  top: 0;
  transition: all .5s ease;
  width: 100%;
  z-index: 1;
  transform: translateX(-100%);
}

.mobile-submenu.showinner {
  opacity: 1;
  transform: translateX(0);
}

.mobile-submenu ul li {
  margin-bottom: 6px;
}

.mobile-submenu ul li a{
color: #fff;
font-size: 16px;
font-weight: 500;
transition: all 0.2s ease-In;
}

.mobile-submenu ul li a:hover{
color: #808080;
}

.opensub-menu{
  display: flex;
  align-items: center;
}

.opensub-menu svg{
color: #fff;
font-size: 14px;
margin-left: 4px;
}

.closesub-menu{
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 15px;
}

.closesub-menu svg{
  font-size: 13px;
  margin-right: 4px;
}

/*---*/

.menulist-title{
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  border-bottom: 2px solid #717171;
  text-align: center;
  line-height: 1;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

.menulist-item {
  display: flex;
  align-items: center;
  margin-top: 22px;
}

.menulist-item img{
  border-radius: 8px;
  margin-right: 10px;
  width: 65px;
}

.menulist-item div p{
  color: #717171;
  margin: 0;
  line-height: 1.2;
  font-size: 14px;
}

/*---*/

 
/*-------*/

.btn1 {
  position: relative;
  top: 0;
  right: 0px;
  float: right;
  cursor: pointer;
  border-radius: 50%;
  display: block;
  height: 42px;
  width: 42px;
}

.btn1:before {
  content: "";
  position: absolute;
  background: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.3s;
  box-shadow: 0 0 30px 0 #ffffff99;
}

.open-close.btn1:before {
  transform: scale(1);
  transition: transform 0.2s 0.2s;
}

.btn1 .icon-left {
  transition-duration: 0.4s;
  position: absolute;
  height: 2.5px;
  width: 12px;
  top: 50%;
  background-color: #fff;
  left: -12px;
  right: 0;
  margin: 0 auto;
}

/* .btn1:hover .icon-left {
  width: 12px;
} */

.btn1 .icon-left:before {
  transition-duration: 0.4s;
  position: absolute;
  width: 12px;
  height: 2.5px;
  background-color: #fff;
  content: "";
  top: -8px;
}

.btn1 .icon-left:after {
  transition-duration: 0.4s;
  position: absolute;
  width: 12px;
  height: 2.5px;
  background-color: #fff;
  content: "";
  top: 8px;
}

.btn1 .icon-right {
  transition-duration: 0.4s;
  position: absolute;
  height: 2.5px;
  width: 12px;
  top: 50%;
  background-color: #fff;
  left: 0;
  right: -12px;
  margin: 0 auto;
}

.btn1 .icon-right:before {
  transition-duration: 0.4s;
  position: absolute;
  width: 12px;
  height: 2.5px;
  background-color: #fff;
  content: "";
  top: -8px;
}

.btn1 .icon-right:after {
  transition-duration: 0.4s;
  position: absolute;
  width: 12px;
  height: 2.5px;
  background-color: #fff;
  content: "";
  top: 8px;
}

.open-close.btn1 .icon-left,
.open-close.btn1 .icon-left:before,
.open-close.btn1 .icon-left:after,
.open-close.btn1 .icon-right,
.open-close.btn1 .icon-right:before,
.open-close.btn1 .icon-right:after {
  background-color: #000;
}

/* .open-close.btn1:hover .icon-left:after,
.open-close.btn1:hover .icon-left:before,
.open-close.btn1:hover .icon-right:after,
.open-close.btn1:hover .icon-right:before {
  background-color: #000;
}

.btn1:hover .icon-left,
.btn1:hover .icon-right,
.btn1:hover .icon-left:after,
.btn1:hover .icon-left:before,
.btn1:hover .icon-right:after,
.btn1:hover .icon-right:before {
  background-color: #ae0000;
} */

.btn1.open-close .icon-left {
  transition-duration: 0.4s;
  background: transparent;
}

.btn1.open-close .icon-left:before {
  transform: rotateZ(45deg) scaleX(1.4) translate(4px, 1px);
}

.btn1.open-close .icon-left:after {
  transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -2px);
}

.btn1.open-close .icon-right {
  transition-duration: 0.4s;
  background: transparent;
}

.btn1.open-close .icon-right:before {
  transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 1px);
}

.btn1.open-close .icon-right:after {
  transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -2px);
}

/*----*/

.banner-section {
height: 100vh;
position: relative;
}

.banner-section:before {
background: linear-gradient(360deg, transparent 0%, #000000 90%);
height: 20%;
left: 0;
right: 0;
position: absolute;
content: '';
top: 0px;
width: 100%;
z-index: 1;
}

.banner-section:after {
background: linear-gradient(180deg, transparent 0%, #000000 90%);
height: 35%;
left: 0;
right: 0;
position: absolute;
content: '';
bottom: 0px;
width: 100%;
z-index: 0;
}

.homebanner-slider{
margin: 0;
}

.banner-section .banner-thumb {
width: 100%;
height: 100vh;
object-fit: cover;
}

.banner-section .container-fluid{
position: absolute;
bottom: 20px;
left: 0;
right: 0;
z-index: 1;
}


/*--*/
.banner-section .slider-dots {
  display: flex;
  justify-content: end;
  align-items: center;
}

.banner-section .slider-dots li{
  margin-left: 8px;
}

.banner-section .slider-dots li:nth-child(1) button {
  background-image: url(../img/banner1.webp);
}

.banner-section .slider-dots li:nth-child(2) button {
  background-image: url(../img/banner2.webp);
}

.banner-section .slider-dots li:nth-child(3) button {
  background-image: url(../img/banner3.webp);
}

.banner-section .slider-dots button {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  display: block;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  outline: 1px solid #fff;
  outline-offset: -1px;
}

.banner-section .progress-svg{
  width: 100%;
  height: 100%;
}

.banner-section .circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.04);
  stroke-width: 2;
  stroke-linecap: butt;
}

.banner-section .circle-line {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1px;
  stroke-linecap: square;
}

.banner-section .circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: #fff;
  stroke-width: 1.3;
  stroke-linecap: square;
  animation: progress 9s;
  stroke-dasharray: 360px;
  stroke-dashoffset: 360;
}

@keyframes progress {
  from {
    stroke-dashoffset: 360;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*----*/
 
 




.banner-head span{
color: #fff;
}

.banhead{
font-size: 4.7vw;
color: #fff;
line-height: 1;
margin: 0;
}

.banner-project{
display: flex;
justify-content: end;
}

.banner-project a{
display: inline-block;
border: 1px solid #fff;
border-radius: 12px;
padding: 3px;
position: relative;
overflow: hidden;
margin-left: 8px;
width: 19%;
}

.banner-project a:nth-child(1){
margin-left: 0px;
}

.banner-project a div{
position: relative;
overflow: hidden;
border-radius: 12px;
}

.banner-project a div:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgb(0 0 0 / 30%);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
opacity: 0;
}

.banner-project a:hover div:before {
opacity: 1;
}

.banner-project svg{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 101%;
height: 101%;
z-index: -1;
}

.banner-project span{
background: #000;
border-radius: 5px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
transition: all 0.3s ease-in-out;
}

.banner-project span img{
width: 7px;
}

.banner-project a:hover span{
background: #E16A44;
}

/*----*/

@keyframes drawSquare1 {
  0% { stroke-dashoffset: 4200; }
  40% { stroke-dashoffset: 0; } 
  70% { stroke-dashoffset: 0; } 
  100% { stroke-dashoffset: 4200; } 
}

@keyframes drawSquare2 {
  0%, 30% { stroke-dashoffset: 4200; }  /* delay */
  50% { stroke-dashoffset: 0; }        
  70% { stroke-dashoffset: 0; }      
  100% { stroke-dashoffset: 4200; } 
}

@keyframes drawSquare3 {
  0%, 45% { stroke-dashoffset: 4200; }   
  70% { stroke-dashoffset: 0; }           
  100% { stroke-dashoffset: 4200; } 
}

.animated-square path {
  stroke: #fff;
  stroke-width: 100;
  fill: none;
}

.animated-square.square-speed1 path {
  stroke-dasharray: 4200;
  stroke-dashoffset: 4200;
  animation: drawSquare1 8s ease-in-out infinite;
}

.animated-square.square-speed2 path {
  stroke-dasharray: 4200;
  stroke-dashoffset: 4200;
  animation: drawSquare2 8s ease-in-out infinite;
}

.animated-square.square-speed3 path {
  stroke-dasharray: 4200;
  stroke-dashoffset: 4200;
  animation: drawSquare3 8s ease-in-out infinite;
}


.homeabout{
margin-top: 120px;
}

.homeabout-award{
display: flex;
align-items: start;
justify-content: end;
}

.homeabout-award img{
margin-left: 20px;
}

.abouttext-head{
color: #fff;
font-weight: 600;
font-size: 34px;
line-height: 1;
margin-bottom: 10px;
}

.homeabout-text p{
font-size: 22px;
line-height: 1.3;
}

.homeabout-text p strong{
font-weight: 600;
}

/*----*/

.splitting .char {
  opacity: 0;
  transform: translateY(1.5em);
}

.animate-text.visible .char {
  animation: slide-inn 1s cubic-bezier(0.5, 0, 0.5, 1) both;
  animation-delay: calc(8ms * var(--char-index));
}

@keyframes slide-inn {
  from {
    transform: translateY(1.5em);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*----*/














/*–––––––––––*/

.quote-section {
position: relative;
overflow: hidden;
}

.quote-mover {
display: flex;
}

.quote-slides figure {
margin: 0;
position: relative;
width: 100vw;
height: 100vh;
}

.quote-text{
mix-blend-mode: difference;
color: #fff;
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
text-align: center;
margin: 0;
font-size: 36px;
font-weight: 600;
width: 690px;
}

.quote-text em{
font-weight: 300;
}

.quote-text p{
  font-size: 14px;
  font-weight: 400;
  margin: 30px auto 20px;
  width: 55%;
}

.blackw-logo{
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 140px;
  mix-blend-mode: difference;
}

.hidethis{
  display: none;
}

.quote-backcolor{
background-color: #f5f5f5;
}


.slide-black{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
text-align: center;
width: 640px;
}

.slide-black h3{
color: #fff;
margin: 0;
font-size: 36px;
font-weight: 600;
}

.slide-black em{
font-weight: 300;
}

.slide-black p{
  font-size: 14px;
  font-weight: 400;
  margin: 30px auto 0px;
  width: 55%;
}

.slide-black img{
  margin: 0px auto;
  width: 470px;
}


.service-area{
margin: 120px 0px;
overflow: hidden;
}

.service-slider{
  margin: 30px 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.service-slidebox {
  width: 23.4%;
}

.service-slidebox a{
  background: #1A1A1A;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.service-slidebox p{
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 4px;
  margin: 0;
}

.service-slidebox span{
color: #7E7E7E;
font-size: 12px;
}

.service-slidebox div{
padding: 20px 22px;
text-align: center;
min-height: 97px;
}

.service-slidebox picture {
  overflow: hidden;
  display: block;
}

.service-slidebox picture img{
width: 100%;
transition: transform 0.3s ease-in-out 0s;
}

.service-slidebox:hover picture img {
  transform: scale(1.09);
}

.servslide-left{
left: 120px;
}

.servslide-right{
  right: 120px;
}


.owner-message{
  background: #fff;
  padding: 120px 0px;
}

.owner-box{
display: flex;
align-items: center;
}

.owner-box div{
margin-left: 50px;
text-align: center;
}

.owner-box p{
color: #000;
line-height: 1.9;
margin-bottom: 10px;
}

.owner-box p img{  
width: 28px;
margin-top: -16px;
}

.owner-box p img:last-child{  
margin-top: 8px;
transform: rotateY(180deg) rotateX(180deg);
}

.owner-box label{
margin: 0;
font-weight: 500;
font-size: 22px;
line-height: 1;
}

.owner-box .img-responsive{
width: 130px;
}


.story-counter{
background: #F9F9F9;
padding-bottom: 120px;
}

.story-counttext .counttext-head {
font-size: 62px;
text-transform: uppercase;
font-weight: 300;
line-height: 1;
color: #000;
overflow: hidden;
}

.story-countimage{
border-radius: 100px;
overflow: hidden;
margin-top: 40px;
}

.story-countimage img{
transition: transform 0.8s ease-in-out 0s;
transform: scale(1.6);
}

.story-countimage.add-zoom img{
transform: scale(1);
}


.storycount-box p{
  color: #000;
  margin: 30px 0px 50px;
}

.counter-number{
  display: flex;
  justify-content: space-evenly;
}

.num {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  line-height: 1;
  font-weight: 500;
  margin: 0px 0 4px;
  color: #000000;
}

.item-number{
    margin: 0px 5px;
    width: 33%;
}

.item-number h4 {
  margin: 0px;
  font-size: 45px;
  line-height: 1;
}

.item-number span {
  font-size: 45px;
  display: block;
  text-transform: lowercase;
}

.item-number p {
  margin: 0px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
}


.feature-head h4{
  color: #F1F0E6;
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}

.feature-head p{
  text-align: center;
  color: #F1F0E6;
  width: 60%;
  margin: 20px auto 10px;
}

.home-feature{
  background: url(../img/feature-back.webp) no-repeat;
  background-size: cover;
  background-position: center;
  padding: 120px 0px;
}

.feature-box{
  border: 1px solid #F1F0E6;
  background: rgb(128 128 128 / 15%);
  backdrop-filter: blur(6px);
  padding: 20px;
  border-radius: 15px;
  margin-top: 30px;
}

.feature-box img{
  width: 45px;
}

.feature-box label{
  display: block;
  color: #F1F0E6;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  margin: 20px 0px 5px;
}

.feature-box p{
  color: #F1F0E6;
  margin: 0;
}


.home-process{
  background: #fff;
  padding: 120px 0px;
}

.homeprocess-head{
  font-size: 52px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 1.1;
  color: #000;
  overflow: hidden;
  text-align: center;
  margin-bottom: 40px;
}

.processtab-content .tab-pane {
  -webkit-animation: fadeIn 2s ease;
  animation: fadeIn 2s ease;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  transition: all 4s cubic-bezier(0, 0, 0.58, 1);
}

.processtab-text p{
  color: #000;
  margin: 18px 0px;
}

.processtab-link ul {
  flex-direction: column;
  padding-right: 50px;
}

.processtab-link ul li a{ 
display: flex;
align-items: center;
background-color: transparent !important;
border-bottom: 1px solid #C6C5C4;
padding: 16px 0px;
border-radius: 0 !important;
}

.processtab-link ul li:nth-child(1) a{ 
  padding-top: 0px;
}

.processtab-link ul li a img{ 
width: 120px;
border-radius: 10px;
}

.processtab-link ul li a p{ 
  color: #000;
  margin: 0;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 12px;
  }

  .processtab-content {
    position: sticky;
    top: 110px;
  }

  
.micelegacy-video {
  position: relative;
}

.micelegacy-video .img-responsive {
  border-radius: 15px;
  object-fit: cover;
  width: 100%;
  height: 300px;
}

.micelegacy-video .img-responsive, 
.groupvideo-frame{
  height: 300px;
}

.process-videobox{
  display: none;
}

.micelegacy-videobox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.micevideo-play {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
/*  display: flex;*/
  display: none;
  align-items: center;
  justify-content: center;
  height: 19px;
  border-radius: 50%;
  padding: 18px 20px 18px 25px;
  cursor: pointer;
}

.micevideo-play:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: #DBD9DA;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}

.micevideo-play:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: #DBD9DA;
  border-radius: 50%;
  transition: all 200ms;
  border: 2px solid #fff;
}

.micevideo-play span {
  display: block;
  position: relative;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 13px solid #E16A44;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.groupvideo-frame {
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

@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.8);
    opacity: 0;
  }
}


.reimagine-area{
  padding: 130px 0px;
  position: relative;
  overflow: hidden;
}

.reimagine-area:before {
  position: absolute;
  content: '';
  background: radial-gradient(55.00000000000001% 50% at 50% 50%, #9c9c9c 0%, rgba(0, 0, 0, 0) 100%);
  width: 600px;
  height: 600px;
  top: -300px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.reimagine-head h4{
  color: #EBEAEA;
  font-size: 120px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  margin: 0;
}

.reimagine-head h4:last-child{
  position: relative;
  z-index: 1;
}

.moving-area {
  position: absolute;
  top: 30px;
  right: 0;
  left: 0;
  justify-content: center;
  display: flex;
  width: 400px;
  margin: 0 auto;
}

.reimagine-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin-top: 50px;
}

.reimagine-para{
  width: 21%;
}
 
.reimagine-para:first-child p{
margin-top: 10px;
margin-bottom: 0rem;
}

.reimagine-para:last-child{
text-align: right;
}
 

.testi-area{
  background: url(../img/testi-back.webp) no-repeat;
  background-size: cover;
  background-position: center;
  padding: 120px 0px;
  overflow: hidden;
}

.testimonial-slider{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.testimonial-box{
background: rgb(255 255 255 / 90%);
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
width: 48.7%;
}

.testimonial-box p{
  color: #333333;
  margin: 6px 0px 0px;
  min-height: 90px;
}

.testibox-person{
display: flex;
align-items: start;
margin-top: 30px;
}

.testibox-person div{
  margin-left: 20px;
}

.testibox-person div label{
color: #333333;
display: block;
margin: 0;
line-height: 1;
}

.testibox-person div span{
color: #808080;
font-size: 15px;
}

.testibox-person div ul{
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1;
}

.testibox-person div ul li{
  display: inline;
}

.testibox-person div ul li .fa-star{
color: #F9BC07;
font-size: 12px;
}

.star-less{
  color: #DADCE0;
}

.testibox-person div ul li small{
  color: #808080;
  font-size: 14px;
  margin-left: 5px;
} 
  

.partner-logo{
background: #EEEEEE;
padding: 120px 0px;
}

.partner-logo .slick-track{
  display: flex !important;
  align-items: center;
}

.partnerlogo-box {
  margin: 0px 30px;
}

.partnerlogo-box img{
  margin: 0 auto;
}


.homevideo-area{
  background: url(../img/video-back.webp) no-repeat;
  background-size: cover;
  background-position: center;
  padding: 200px 0px;
  text-align: center;
}

.video-btn{
  display: inline-block;
}

.video-btn label {
  backdrop-filter: blur(5px);
  background-color: rgba(245, 245, 245, .21);
  width: 70px;
  height: 50px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  font-size: 20px;
  overflow: hidden;
  cursor: pointer;
}

.video-btn label:before {
  content: "";
  position: absolute;
  background: #FF0000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transform: scale(0);
  transform-origin: center;
  z-index: -1;
  border-radius: 10px;
  transition: all .4s ease-in-out;
}

.video-btn:hover label:before {
  transform: scale(1);
}

.video-btn p{
margin: 0;
font-size: 28px;
line-height: 1;
text-transform: uppercase;
font-weight: 600;
overflow: hidden;
}

/*---*/

.menuvideo-popup {
  padding: 0px !important;
}

.menuvideo-popup .modal-dialog {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 auto;
  max-width: 800px;
  transform: translate(0, 0) !important;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.menuvideo-popup .modal-body {
  padding: 0;
}

.menuvideo-popup .modal-content {
  border: 0;
}

.menuvideo-popup button.close {
  position: absolute;
  right: 0;
  top: -30px;
  z-index: 1;
  color: #fff;
  font-weight: 100;
  opacity: 0.5;
  font-size: 30px;
}

.menuvideo-popup button.close:hover {
  opacity: 1;
}

.menuvideo-popup button.close:hover {
  opacity: 1;
}


.blog-area{
margin: 120px 0px;
}

.blog-slider{
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.blogpost-box{
  width: 23.2%;
}

.blogpost-box a{
  background: #1A1A1A;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.blogpost-box p,
.blogpost-box h3{
  font-size: 18px;
  color: #F5F5F5;
  line-height: 1.3;
  margin: 3px 0px 15px;
  min-height: 46px;
}

.blogpost-box label{
color: #7E7E7E;
font-size: 14px;
cursor: pointer;
margin: 0;
line-height: 1;
}

/* .blogpost-box span{
border: 1px solid #424242;
padding: 7px 12px;
display: inline-flex;
align-items: center;
justify-content: space-between;
color: #fff;
text-transform: uppercase;
font-size: 12px;
font-weight: 300;
width: 120px;
}

.blogpost-box span img{
transition: all 0.2s ease-In;
} */

.blogpost-box .blogbox-inner{
padding: 16px;
}

.blogpost-box picture {
  overflow: hidden;
  display: block;
}

.blogpost-box picture img{
width: 100%;
transition: transform 0.3s ease-in-out 0s;
}

.blogpost-box:hover picture img {
  transform: scale(1.07);
}

.blogpost-box:hover .rectangle-butn {
  color: #fff;
}

.blogpost-box:hover .rectangle-butn::after {
width: 35px;
}

.blogpost-box .rectangle-butn .icon-container img{
  display: inline-block;
}

.blogpost-box:hover .rectangle-butn .icon-container {
transform: translateX(35%);
color: #fff;
}

.blogpost-box:hover .rectangle-butn .icon-container .icon--left {
transform: translateX(0);
opacity: 1;
filter: brightness(0) invert(1);
}

.blogpost-box:hover .rectangle-butn .icon-container .icon--right {
transform: translateX(200%);
opacity: 0;
}

/*---*/

.project-area{
overflow: hidden;
}

.more-project{
  background: #F9F9F9;
  text-align: center;
  padding: 60px 0px;
}

.pinWrapper {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 11;
}
.scrollmagic-pin-spacer {
  position: absolute !important;
  clip: rect(auto, auto, auto, auto);
}
.project-card {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgb(21 22 28 / 50%);
}

/*#section2, 
#section2 .project-image {
  background-image: url(../img/home-project-1.webp);
}
#section3, 
#section3 .project-image {
  background-image: url(../img/home-project-2.webp);
}
#section4, 
#section4 .project-image {
  background-image: url(../img/home-project-3.webp);
}*/
.project-image {
  background-size: cover;
  background-position: center center;
  transition: width 1s, height 1s;
  -webkit-transition: width 1s, height 1s;
  box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
  -webkit-box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
  transform-origin: center;
  -webkit-transform-origin: center;
  z-index: 1;
  overflow: hidden;
  border: 4px solid #F5F5F5;
  width: 280px;
  height: 280px;
  left: auto;
  right: 20vw;
  position: absolute;
  border-radius: 12px;
  top: -46%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
}

.project-text {
  top: -80%;
  left: 0;
  position: absolute;
  width: 43%;
  padding-left: 2vw;
}
  
.project-text h4{
  font-size: 62px;
  color: #ffffff;
  margin-bottom: 0px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  mix-blend-mode: difference;
}

.project-otherimage{
  padding-right: 2vw;
  top: -80%;
  right: 0;
  position: absolute;
}

.project-otherimage div{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  border: 2px solid #858482;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.project-butn{
  position: absolute;
  top: -12%;
  right: 0;
  padding-right: 2vw;
}

#section2 .project-butn .default-butn{
  background: #152755;
}

#section3 .project-butn .default-butn{
  background: #F76A03;
}

#section4 .project-butn .default-butn{
  background: #AF7FCE;
}

.project-butn .default-butn{
  border-radius: 5px;
  padding: 12px;
}

.project-butn .default-butn .icon-container {
  margin-left: 0;
}

.project-butn .default-butn .icon-container img{
  width: 20px;
}

.project-butn .default-butn::after {
  display: none;
}

.project-butn .default-butn:hover .icon-container .icon--right {
  transform: translateX(0);
}
   
/*----*/

.footer-first{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-vission{
  text-align: center;
  width: 30%;
  overflow: hidden;
}

.footer-vission label{
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 12px;
}

.footer-vission p{
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}


.footer-copyright{
  display: flex;
  align-self: flex-end;
  justify-content: end;
  width: 30%;
}

.footer-copyright p{
  color: #F5F5F5;
  margin: 0;
  line-height: 1;
  font-size: 13px;
}


.footer-download{
  width: 30%;
}

.footer-download a{
  display: inline-flex;
  align-items: center;
}

.footer-download span{
width: 50px;
height: 50px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border: 2px solid #404040;
background: #212121;
position: relative;
z-index: 0;
}

.footer-download span:before{
  content: '';
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all .3s ease-in-out;
  transform: scale(0);
  transform-origin: center;
  z-index: -1;
  background: #fff;
}

.footer-download span img{
  width: 20px;
}

.footer-download a:hover span:before{
  transform: scale(1);
}

.footer-download a:hover span img{
  filter: brightness(0) contrast(100%);
}

.footer-download p{
  font-size: 14px;
  margin: 0;
  margin-left: 8px;
}

.footer-download p small{
color: #9E9E9E;
display: block;
}


.footer-logo{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 17vw;
  margin: 50px 0px 40px;
  line-height: 14vw;
  text-align: center;
}

.footer-third{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #424242;
  padding: 15px 0px;
  margin-top: 60px;
}

.footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social li {
  display: inline-block;
}

.footer-social li a {
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  font-size: 14px;
  border: 1px solid #424242;
  position: relative;
}

.footer-social li a:before {
  content: '';
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all .3s ease-in-out;
  transform: scale(0);
  transform-origin: center;
  z-index: -1;
}

.footer-social li:nth-child(1) a:before {
  background: #d62976;
}

.footer-social li:nth-child(2) a:before {
  background: #3b579d;
}

.footer-social li:nth-child(3) a:before {
  background: #006699;
}

.footer-social li a:hover:before {
  transform: scale(1);
}


.footer-otherlink {
  list-style: none;
  margin: 0px;
  padding: 0;
  }
  
  .footer-otherlink li {
  margin-right: 8px;
  display: inline-block;
  }
  
  .footer-otherlink li:last-child {
  margin-right: 0px;
  }
  
  .footer-otherlink li a {
    color: #9E9E9E;
    font-size: 14px;
    font-weight: 500;
  }

.footer-link {
  list-style: none;
  margin: 0px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}
  
.footer-link li {
  margin: 0px 18px;
  display: inline-block;
}

.footer-link li a {
  color: #9E9E9E;
  font-size: 15px;
  font-weight: 500;
}

/* ---------- */

.error-page{
  position: relative;
  height: 100vh;
  background: url(../img/404.webp) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.error-inner {
  text-align: center;
}

.error-inner .heading {
  font-size: 13vw;
  margin-bottom: 20px;
  line-height: 10vw;
}

.error-inner .default-butn{
  margin: 0px 4px;
}

/* ---------- */

.blogpage{
  margin-bottom: 100px;
}

.blog-subtitle{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  margin: 5px 0px 50px;
  width: 60%;
}

.blogpage-left{
  position: sticky;
  top: 100px;
}

.blogpage-left .blogpost-box, 
.blogpage-right .blogpost-box{
  width: 100%;
}

.blogpage-left .blogpost-box p,
.blogpage-right .blogpost-box p,
.blogpage-left .blogpost-box h3,
.blogpage-right .blogpost-box h3{
  min-height: auto;
}

.blogpage-left .blogpost-box {
margin: 0px; 
}

.blogpage-left .blogpost-box picture img {
  height: 380px;
  object-fit: cover;
}

.blogpage-right .blogpost-box{
margin-top: 40px;
}

.blogpage-filter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blogpage-filter li a{
color: #808080;
font-size: 15px;
font-weight: 600;
text-transform: capitalize;
transition: all 0.2s ease-In;
}

.blogpage-filter li a:hover{
  color: #fff;
}

.blogpage-filter li a.active{
  color: #fff;
}

.blogpage-filter li a svg{
vertical-align: middle;
}

.blogpage-filter .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15%) !important;
  transition: all 0.4s ease-out;
  padding: 10px 12px;
  right: 0;
  left: auto !important;
  top: 22px !important;
}

.blogpage-filter .dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%) !important;
}

.blogpage-filter .dropdown-menu a {
  color: #808080;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.blogpage-filter .dropdown-menu a:hover {
  color: #000000;
}

.blogpage-filter .dropdown-menu a:last-child {
  margin-bottom: 0px;
}

/* ---------- */

.contactpage{
margin-bottom: 100px;
}

.contact-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.contact-head h2{
font-size: 54px;
line-height: 1.1;
color: #ffffff;
overflow: hidden;
margin-bottom: 0px;
width: 80%;
}

.contact-head h1{
  color: #fff;
  font-weight: 300;
  letter-spacing: 3px;
  font-size: 15px;
  display: block;
  margin-bottom: 3px;
  line-height: 1;
}

.contact-detail{
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-detail li{
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.contact-detail li img{
  width: 18px;
  margin-right: 15px;
}

.contact-detail li a{
  color: #ffffff;
  font-size: 15px;
  transition: all 0.2s ease-In;
}

.contact-detail li a:hover{
  color: #9E9E9E;
}

.contact-form{
  background: #fff;
  padding: 30px;
  border-radius: 10px;
}

.contact-form h3{
  font-size: 34px;
  line-height: 1.1;
  color: #000000;
  margin-bottom: 22px;
}

.contact-form form .form-control{
  box-shadow: none;
  height: 44px;
  border: 1px solid #888888;
  font-size: 14px;
  color: #888888;
  margin-bottom: 18px;
  border-radius: 0;
  outline: none;
}

.contact-form form textarea {
  height: 90px !important;
}

/* ---------- */

.abouthead{
  height: 100vh;
}

.abouthead .container{
position: absolute;
bottom: 50px;
left: 0;
right: 0;
bottom: 0;
top: 0;
}

.about-banner{    
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.abouthead-detail{
position: relative;
height: 100vh;
}

.abouthead-detail .banner-heading{
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  color: #fff;
  margin: 0;
  font-size: 62px;
}

.abouthead-link{
  position: absolute;
  bottom: 20px;
  right: 0;
  z-index: 1;
}

.abouthead-link li{
width: 150px;
position: relative;
display: inline-block;
margin-left: 15px;
}

.abouthead-link li:before {
  content: '';
  background: #fff;
  height: 1px;
  left: 0;
  position: absolute;
  top: auto;
  width: 100%;
  bottom: 0;
  right: auto;
  -webkit-transition: width 0.3s, left 0.3s, right 0.3s;
  -moz-transition: width 0.3s,left 0.3s,right 0.3s;
  -ms-transition: width 0.3s,left 0.3s,right 0.3s;
  -o-transition: width 0.3s,left 0.3s,right 0.3s;
  transition: width 0.3s, left 0.3s, right 0.3s;
}

.abouthead-link li:hover:before{
  width: 0%;
  right: 0;
  left: auto;
}

.abouthead-link li a{
color: #fff;
padding-bottom: 12px;
}

.abouthead-link li a:hover{
  color: #fff;
}

.abouthead-link li span img {
height: auto;
right: 0;
position: absolute;
top: 3px;
width: 10px;
display: block;
transition: transform 0.3s 0s ease-in-out, opacity 0.3s 0s ease-in-out;
}

.abouthead-link li span img:nth-child(1) {
  -webkit-transform: translate(-100%,-100%) scale(.7);
  -moz-transform: translate(-100%,-100%) scale(.7);
  -o-transform: translate(-100%,-100%) scale(.7);
  -ms-transform: translate(-100%,-100%) scale(.7);
  transform: translate(-100%,-100%) scale(.7);
  opacity: 0
}

.abouthead-link li span img:nth-child(2) {
  transition-delay: 0.15s
}

.abouthead-link li:hover span img:nth-child(1) {
  -webkit-transform: translate(0%, 0%);
  -moz-transform: translate(0%,0%);
  -o-transform: translate(0%,0%);
  -ms-transform: translate(0%,0%);
  transform: translate(0%, 0%);
  transition-delay: 0.15s;
  opacity: 1;
}

.abouthead-link li:hover span img:nth-child(2) {
  -webkit-transform: translate(100%, 100%) scale(.7);
  -moz-transform: translate(100%,100%) scale(.7);
  -o-transform: translate(100%,100%) scale(.7);
  -ms-transform: translate(100%,100%) scale(.7);
  transform: translate(100%, 100%) scale(.7);
  transition-delay: 0s;
  opacity: 0;
}


.aboutpage-story{
  margin: 120px 0px;
}

.aboutpage-story .animate-text{
  color: #fff;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  margin: 0;
  width: 50%;
}

.aboutpage-story .animate-text strong{
  font-weight: 600;
}  

.aboutpage-story label{
color: #fff;
font-weight: 300;
font-size: 22px;
display: block;
text-transform: uppercase;
line-height: 1;
margin-bottom: 12px;
}

.aboutpage-story p{
font-size: 24px;
line-height: 1.3;
margin: 0;
}

.aboutpage-story p span{
font-weight: 600;
}

.aboutquote-head{
  color: #fff;
  text-align: center;
  margin: 0 auto;
  font-size: 36px;
  font-weight: 600;
  width: 94%;
}

.aboutquote-head em {
  font-weight: 300;
}


.testislide-text{
  background: #151515;
  padding: 20px;
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testislide-content{
padding-right: 12px;
}

.testislide-content h4{
  color: #fff;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: 20px;
}

.testislide-content p{
  font-style: italic;
  margin: 0;
  width: 80%;
}

.testimo-arrow li{
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #2A2A2A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease-In;
  margin-right: 12px;
}

.testimo-arrow li:hover{
  background: #424242;
}

.testislide-image{
  position: relative;
}

.testislide-head{
  font-size: 38px;
  color: #ffffff;
  margin-bottom: 0px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  width: 70%;
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: right;
}

.slider__counter{
  color: #fff;
  font-size: 25px;
  line-height: 1;
  position: absolute;
  bottom: 20px;
  right: 20px;
}


.aboutpage-logo{
  margin: 120px 0px;
}

.aboutpage-logo .slick-track {
  display: flex !important;
  align-items: center;
}

.small-heading{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 50px;
  line-height: 1;
  border: 1px solid #404040;
  padding: 10px 15px;
  border-radius: 30px;
}


.about-team{
  margin-top: 120px;
}

.aboutteam-area{
  display: flex;
  align-items: start;
  justify-content: space-between;
  height: 100%;
}

.team-thumb{
  width: 65%;
}

.team-thumb ul li{
  width: 50%;
}

.teambox{
position: relative;
padding-left: 15px;
padding-bottom: 15px;
display: block;
}

.teambox:before {
  background: linear-gradient(360deg, transparent 0%, #000000 100%);
  height: 18%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  top: 0px;
  width: 100%;
  z-index: 0;
}

.teambox:after {
  background: linear-gradient(180deg, transparent 0%, #000000 100%);
  height: 18%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  bottom: 15px;
  width: 100%;
  z-index: 0;
}

.teambox div{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 10px 15px 25px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.4s ease-in-out 0s;
}

.teambox:hover div{
  transform: scale(0.96, 0.96);
}

.teambox div label{
color: #fff;
margin: 0;
cursor: pointer;
font-weight: 300;
line-height: 1;
}

.teambox div small{
  color: #fff;
  font-weight: 300;
  line-height: 1;
  margin-left: 10px;
}

.teambox span{
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 10px;
}

.teambox p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 100%;
  margin: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  padding: 0px 15px 0px 30px;
  z-index: 2;
}

.teambox:hover p{
  opacity: 1;
  transform: translate(-50%, -50%);
}

.teambox pre{
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(3px);
  margin: 0;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.teambox:hover pre{
opacity: 1;
}


.teamtab-content{
  width: 35%;
  background: #161616;
  padding: 15px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.teamdetail span{
  color: #fff;
  font-weight: 300;
  font-size: 36px;
  display: block;
  text-transform: uppercase;
  line-height: 1;
  font-style: italic;
  margin-top: 12px;
}

.teamdetail label{
color: #fff;
font-weight: 600;
font-size: 36px;
line-height: 1;
margin: 3px 0px 15px;
text-transform: uppercase;
}


.teantab-data .tab-pane {
  -webkit-animation: fadeIn 2s ease;
  animation: fadeIn 2s ease;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  transition: all 4s cubic-bezier(0, 0, 0.58, 1);
}

.full-teamdata {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  background: #161616;
  opacity: 1;
  height: 100%;
  width: 100%;
  -webkit-animation: fadeIn 2s ease;
  animation: fadeIn 2s ease;
  transition: all .8s cubic-bezier(0, 0, 0.58, 1);
}

.full-teamdata img{
 height: 279px;
  width: 100%;
  object-fit: cover;
}

#newID{
  opacity: 0;
}


.teamtab-content .rectangle-butn {
  max-width: max-content;
}

.teamtab-content .rectangle-butn:hover {
  color: #fff;
}

.teamtab-content .rectangle-butn:hover::after {
width: 35px;
}

.blogpost-box .rectangle-butn:hover .icon-container img{
  display: inline-block;
}

.teamtab-content .rectangle-butn:hover .icon-container {
transform: translateX(35%);
color: #fff;
}

.teamtab-content .rectangle-butn:hover .icon-container .icon--left {
transform: translateX(0);
opacity: 1;
filter: brightness(0) invert(1);
}

.teamtab-content .rectangle-butn:hover .icon-container .icon--right {
transform: translateX(200%);
opacity: 0;
}

/* ---------- */

.blogdeatil-page{
  background: #fff;
  margin-top: 115px;
  padding-top: 50px;
}

.blog-deatil-head span {
  color: #000000;
  display: block;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 5px;
  line-height: 1;
}

.blog-deatil-head h1 {
  color: #000000;
  font-weight: 600;
  font-size: 54px;
  line-height: 1.1;
  margin-bottom: 12px;  
}

.blog-deatil-head p {
  color: #000;
}

.blog-deatil-head p:last-child {
  margin-bottom: 0;
}

.blog-deatil-social {
  float: right;
}

.blog-deatil-social span {
  color: #000000;
  font-size: 15px;
  text-transform: capitalize;
  display: block;
  margin-bottom: 10px;
}

.blog-deatil-social ul {
  margin: 0;
  display: inline-block;
}

.blog-deatil-social ul li {
  display: inline-block;
  margin-right: 6px;
}

.blog-deatil-social ul li a {
  border: 1px solid #444444;
  color: #000000;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.3s ease-In;
  position: relative;
  z-index: 1;
}

.blog-deatil-social ul li a:before {
  content: '';
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transition: all .3s ease-in-out;
  transform: scale(0);
  transform-origin: center;
  z-index: -1;
  background: #000;
}

.blog-deatil-social ul li a:hover:before {
  transform: scale(1);
}

.blog-deatil-social ul li a:hover {
  color: #fff;
}

.blog-deatil-image {
  margin-top: 25px;
  overflow: hidden;
}

.blog-deatil-image img{
  border-radius: 12px;
}

.blog-detail-content{
  background: #fff;
  padding: 30px 0px 40px;
}

.blog-detail-content p{
  color: #000;
}

.blog-detail-content strong{
    font-weight: 600;
}

.blog-detail-content h2{
color: #000000;
font-weight: 600;
font-size: 36px;
line-height: 1;
margin-bottom: 15px;
}

.blog-detail-content h3,
.blog-detail-content h4,
.blog-detail-content h5{
color: #000000;
font-weight: 600;
font-size: 24px;
line-height: 1;
margin: 30px 0px 15px;
}

.blog-detail-content ul{
  margin-bottom: 1rem;
  list-style: disc;
  padding-left: 15px;
}

.blog-detail-content ul li{
color: #000;
font-size: 15px;
font-weight: 500;
margin-bottom: 3px;
}

.blog-detail-content ul li strong{  
  font-weight: 600;
}


.blogdetail-other{
margin: 50px 0px 90px;
}

.otherblog-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.otherblog-head h4{
  font-size: 54px;
  line-height: 1.1;
  color: #ffffff;
  overflow: hidden;
  margin-bottom: 0px;
  width: 50%;
  font-weight: 600;
}

.blogdetail-slide .blogpost-box {
  width: 32%;
}

/* ---------- */

.gallerypage{
  height: 100vh;
}

.gallerypage .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.gallery-head{
  position: relative;
  height: 100vh;
  z-index: 1;
}

.gallery-head h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
margin: 0;
font-size: 90px;
text-transform: uppercase;
line-height: .8;
}


.logoScrolldown  {
  position: relative;
  width: 130px;
  z-index: 1;
  overflow: hidden;
}

.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
}

.logoScrolldown .circle div {
  animation: rotation 60s linear infinite;
}

@keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg)
  }
  to {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

.black-overlay{
  background: rgb(0 0 0 / 35%);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  top: 0px;
  width: 100%;
  z-index: 0;
}


.gallery-quote{
  margin: 120px 0px;
}

.gallery-quote h2{
  font-size: 28px;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}


.gallery-single{
  overflow: hidden;
}

.gallery-singlehead h3{
  display: block;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 12px;
}

.gallery-singlehead p{
  margin-bottom: 0px;
}


.gallery-images{
  margin-bottom: 90px;
  overflow: hidden;
}

.gallery-box{
  margin-top: 30px;
}

.gallery-box a{
  position: relative;
}

.gallery-box a::before{
  background: rgb(0 0 0 / 40%);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  top: 0px;
  width: 100%;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

.gallery-box img{
width: 100%;
height: 520px;
object-fit: cover;
filter: blur(10px);
transform: scale(.9);
transition: filter 1s ease-in-out, transform 1s cubic-bezier(.83,0,.17,1);
transition-delay: .5s;
}

.gallery-box svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 32px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  opacity: 0;
}

.gallery-box:hover a:before, .gallery-box:hover svg{
  opacity: 1;
}

.gallery-effect img{
  filter: blur(0px);
  transform: scale(1);
}

.contact-divider{
  text-align: center;
  margin: 60px 0px;
}

.contact-divider p, 
.contact-divider h2{
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 30px;
  color: #fff;
}

.galleryhead-btn{
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/*---*/
.leftarrow-butn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  padding: 7px 12px;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 300;
  border-radius: 30px;
  }
  
  .leftarrow-butn:hover {
  color: #fff;
  }
  
  .leftarrow-butn .text,
  .leftarrow-butn .icon-container {
  position: relative;
  z-index: 1;
  line-height: 1;
  }
  
  .leftarrow-butn .icon-container {
  --icon-size: 21px;
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: 15px;
  transition: transform 500ms ease;
  text-align: right;
  }
  
  .leftarrow-butn .icon-container .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform 500ms ease, opacity 250ms ease;
  filter: brightness(0) invert(1);
  display: flex;
  align-items: center;
  justify-content: end;
  }
  
  .leftarrow-butn .icon-container .icon--left {
  transform: translateX(200%);
  opacity: 0;
  }
  
  .leftarrow-butn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #E16A44;
  z-index: 0;
  transition: 500ms ease;
  }

.leftarrow-butn:hover::after {
width: 35px;
}

.leftarrow-butn:hover .icon-container img{
  display: inline-block;
}

.leftarrow-butn:hover .icon-container {
transform: translateX(-35%);
color: #fff;
}

.leftarrow-butn:hover .icon-container .icon--left {
transform: translateX(0);
opacity: 1;
}

.leftarrow-butn:hover .icon-container .icon--right {
transform: translateX(-200%);
opacity: 0;
filter: brightness(0) invert(1);
}
/*---*/

/* ---------- */

.project-banner.banner-shadow:before {
  z-index: 1;
}

.project-banner .container{
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: calc(100% - 6.25vw * 3);
  top: 9.6vw;
}

.project-bigslider{
height: 100vh;
}

.project-bigslider::before{
background: rgb(0 0 0 / 60%);
height: 100%;
left: 0;
right: 0;
position: absolute;
content: '';
top: 0px;
width: 100%;
z-index: 1;
}

.project-bigslider .slick-track .img-responsive{
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.project-imagebox img{
  height: 430px;
  width: 100%;
  object-fit: cover;
}


.project-numcount{
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
  height: 100%;
  text-align: right;
}

.project-numcount h2{
color: #fff;
font-size: 17px;
line-height: 1.4;
width: 70%; 
}

.project-numcount ul{
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.project-numcount ul li{
  margin-left: 20px;
  cursor: pointer;
}

.project-numcount ul li img{
  width: 46px;
}

.project_counter{
  color: #fff;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 12px;
  font-weight: 300;
}


.project-name{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.project-name h1{
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
}

.project-textbox{
  padding-right: 12px;
}

.project-textbox p{
  font-size: 36px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 2px;
  width: 90%;
}

.project-textbox span{
  color: #fff;
  font-size: 15px;
}

.project-bigleft,
.project-bigright{
position: absolute;
width: 50%;
height: 100%;
top: 0;
z-index: 3;
}

.project-bigright{
  right: 0;
}

.cursorcircle{
  position: absolute;
	width: 80px; 
	height: 80px; 
  border-radius: 50%;  
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / .1);
  backdrop-filter: blur(1.25vw);
}

.cursorcircle img{
width: 40px;
transition: transform 0.4s ease;
}


.project-box{
  overflow: hidden;
  margin-top: 30px;
}

.project-box a{
  position: relative;
  display: block;
}

.project-box a::before {
  background: rgb(0 0 0 / 40%);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  top: 0px;
  width: 100%;
  z-index: 1;
}

.project-box img {
  width: 100%;
  transition: transform 0.3s ease-in-out 0s;
}

.project-box:hover img {
  transform: scale(1.07);
}

.project-box div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 15px;
  z-index: 1;
}

.project-box div h4{
font-size: 30px;
line-height: 1.1;
text-transform: capitalize;
color: #fff;
position: relative;
display: inline-block;
margin-bottom: 12px;
padding-bottom: 10px;
}

.project-box div h4:before {
content: "";
width: 100%;
height: 1.4px;
position: absolute;
left: 0;
bottom: 0;
transition: 0.5s transform ease;
transform: scale3d(0, 1, 1);
transform-origin: 50% 50%;
background: #fff;
}

.project-box:hover div h4:before {
  transform: scaleX(1);
}

.project-box div p{
  font-size: 15px;
  margin-bottom: 0px;
  line-height: 1;
}

.project-bigbox img{
  height: 484px;
  object-fit: cover;
}

.scroll-down{
  color: #fff;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 40px;
  max-width: max-content;
  z-index: 5;
  font-size: 15px;
  text-align: center;
}


.scroll-down span{
    animation: scrollbounce 1.8s ease infinite;
    display: block;
}


@keyframes scrollbounce {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0);
    }
  }

.scroll-down:hover{
  color: #fff;
}


.project-list{
  margin-top: 120px;
}

.project-filter ul{
  text-align: center;
}

.project-filter ul li{
  display: inline-block;
  margin-right: 20px;
}

.project-filter ul li:last-child{
  margin-right: 0px;
}

.project-filter ul li a{
color: #fff;
font-size: 15px;
padding: 6px 15px;
position: relative;
}

.project-filter ul li a:before{
  content: '';
  position: absolute;
  border: 1px solid #808080;
  opacity: 0;
  transition: .3s ease-in-out;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  top: 0;
  left: 0;
}

.project-filter ul li a:hover:before{
  opacity: 1;
}

.project-filter ul li a.active:before{
  opacity: 1;
}

.project-filter ul li a em{
color: #808080;
}

.project-filter h3{
margin: 60px auto 30px;
width: 60%;
text-align: center;
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}

/* ---------- */

.projectdetail-page{
  height: 100vh;
}

.projectdetail-page .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
}

.prodetail-banner {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.prodetail-head{
text-align: center;
}

.prodetail-head div {
  overflow: hidden;
}

.prodetail-head .heading {
  font-size: 82px;
  visibility: visible;
}

.prodetail-head span {
  color: #fff;
  font-weight: 300;
  letter-spacing: 3px;
  font-size: 15px;
  display: block;
  margin-bottom: 3px;
  line-height: 1;
  text-transform: uppercase;
  visibility: visible;
}

.prodetail-head p {
  font-size: 14px;
  margin: 5px auto 0px;
  width: 60%;
}


.prodetail-high{
margin-top: 120px;
}

.project-highlight{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.project-highlight h2{
  color: #fff;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 30px;
}

.project-highlight p{
width: 80%;
}

.project-highlight ul{
  line-height: 1;
  margin-bottom: 12px;
}

.project-highlight ul li{
color: #fff;
font-size: 14px;
font-weight: 600;
margin-top: 15px;
}

.project-highlight ul li span{
  color: #9E9E9E;
  font-weight: 500;
}


.projecthigh-image{
  background: #151515;
  padding: 15px;
  padding-right: 0px;
}

.projecthigh-image h3{
font-size: 18px;
line-height: 1;
font-weight: 600;
color: #fff;
margin-bottom: 15px;
margin-right: 20px;
text-align: right;
}

.project__counter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-right: 8px;
}

.procounter{
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.project__counter .testimo-arrow li {
  height: 40px;
  width: 40px;
}


.project-slider .slick-track .img-responsive{
  padding-left: 8px;
}


.prodetail-liner{
  margin: 120px 0px;
  text-align: center;
}

.prodetail-liner h4{
  color: #fff;
  font-weight: 600;
  font-size: 31px;
  line-height: 1;
  margin-bottom: 20px;
}

.prodetail-liner p{
  margin: 0px auto 10px;
  width: 90%;
}


.prodetail-images{
position: relative;
padding-top: 60px;
}

.prodetail-backblur{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}

.prodetail-backblur::before {
  background: linear-gradient(#000000 0%, rgb(0 0 0 / 29%) 19%, #000000 85%);
  position: absolute;
  content: "";
  top: -5px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 103%;
  width: 100%;
}

.prodetail-backblur img{
  filter: blur(4px);
  width: 100%;
}


.prodetail-images h4{
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.prodetail-imgbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
}

.prodetail-imgbox img{
  margin-top: 12px;
  object-fit: cover;
  height: 480px;
  width: 100%;
}

.mid-probox{
  width: 64.5% !important;
}

.small-probox{
  width: 34.5% !important;
}

.gap-prodetail{
  margin-top: 40px;
}


.other-project{
margin-bottom: 80px;
}

.otherpro-head{
  text-align: center;
  margin: 0;
}


.otherpro-slider {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.project-otherbox{
overflow: hidden;
width: 48.5%;
margin-top: 30px;
}

.project-otherbox a{
  position: relative;
  display: block;
}

.project-otherbox a::before {
  background: rgb(0 0 0 / 40%);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  content: '';
  top: 0px;
  width: 100%;
  z-index: 1;
}

.project-otherbox .img-responsive {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out 0s;
}

.project-otherbox:hover .img-responsive {
  transform: scale(1.07);
}

.otherpro-inner{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.otherpro-inner p{   
color: #fff;
text-align: right;
}

.otherpro-inner p small{  
color: #9E9E9E;
font-weight: 500;
font-size: 15px;
}

.otherpro-inner span{   
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.otherpro-inner label{   
font-size: 23px;
line-height: 1;
font-weight: 600;
color: #fff;
margin-bottom: 0px;
text-transform: uppercase;
cursor: pointer;
width: 80%;
}

/*--*/
.otherpro-butn{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgb(255 255 255 / 60%);
  background: #212121;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.otherpro-butn:hover {
  color: #000;
  }
  
  .otherpro-butn .text,
  .otherpro-butn .icon-container {
  position: relative;
  z-index: 2;
  }
  
  .otherpro-butn .icon-container {
  --icon-size: 21px;
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform 500ms ease;
  text-align: center;
  }
  
  .otherpro-butn .icon-container .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform 500ms ease, opacity 250ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: brightness(0) invert(1);
  }
  
  .otherpro-butn .icon-container .icon--left {
  transform: translateX(-200%);
  opacity: 0;
  }
  
  .otherpro-butn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #E16A44;
  z-index: 0;
  transition: 500ms ease;
  }


  .project-otherbox:hover .otherpro-butn::after {
  width: 100%;
  }
  
  .project-otherbox .otherpro-butn .icon-container img{
    display: inline-block;
  }
  
  .project-otherbox:hover .otherpro-butn .icon-container {
  transform: translateX(35%);
  color: #fff;
  }
  
  .project-otherbox:hover .otherpro-butn .icon-container .icon--left {
  transform: translateX(-37%);
  opacity: 1;
  }
  
  .project-otherbox:hover .otherpro-butn .icon-container .icon--right {
  transform: translateX(200%);
  opacity: 0;
  }
/*--*/

/* ---------- */

.servicepage h1{
  font-size: 52px;
  line-height: 1;
  color: #fff;
  margin: 0;
}

.servicepage span{
background: #262626;
color: #fff;
display: inline-block;
padding: 10px 22px;
border-radius: 30px;
line-height: 1;
font-size: 14px;
margin: 30px 0px 20px;
}

.servicepage .img-responsive{
  border-radius: 12px;
  width: 100%;
}

.service-tagline{
  text-align: center;
  margin-top: 60px;
}

.service-tagline h2{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 30px;
}

.service-tagline p{
 color: #CCCCCC;
}

.service-tagline p:last-child{
 margin: 0;
}


.service-feature{
  margin-top: 60px;
}

.service-featurebox{
  background: #151515;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-featurebox .serv-heading {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 30px;
  overflow: hidden;
}

.service-featurebox p{
  color: #CCCCCC;
}

.service-featurebox ul{
  list-style: disc;
  padding-left: 15px;
}

.service-featurebox ul li{
  color: #CCCCCC;
  font-size: 15px;
  margin-bottom: 12px;
}

.service-featurebox ul li:last-child{
  margin-bottom: 0px;
}

.service-featurebox ul li span{
  font-weight: 600;
}

.serlist-num{
  list-style: decimal !important;
}

.next-service{
  margin-bottom: 60px;
}

.nextservice-box{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  padding: 70px 20px 20px;
  position: relative;
  overflow: hidden; 
  z-index: 1;
}

.nextservice-box::before{
  position: absolute;
  content: '';
  background: rgb(0 0 0 / 40%);
  height: 100%;
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

.nextservice-box p{
font-size: 17px;
font-weight: 300;
line-height: 1;
margin-bottom: 8px;
}

.nextservice-box a{
  color: #fff;
  font-size: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  }

.nextservice-box a:before {
  content: "";
  width: 100%;
  height: 1.4px;
  position: absolute;
  left: 0;
  bottom: -2px;
  transition: 0.5s transform ease;
  transform: scale3d(0, 1, 1);
  transform-origin: 50% 50%;
  background: #fff;
}

.nextservice-box a:hover:before {
  transform: scaleX(1);
}

.nextservice-box a svg{
  font-size: 17px;
  margin-left: 5px;
}

/*----*/

.thankyou-page{
  background: url(../img/thankyou.webp) no-repeat;
  background-size: cover;
  background-position: center;
}

.thankyou-page .error-inner {
  width: 630px;
  padding: 0px 15px;
}

.thankyou-page .error-inner .heading {
  font-size: 80px;
  margin-bottom: 10px;
  line-height: 1;
  text-transform: capitalize;
}


/*-------*/


.servicelist .service-slider{
  margin: 0px !important;
}

.servicelist .heading {
  margin-bottom: 25px;
}

.servicelist .service-slidebox {
    margin-top: 25px;
}

.servpage-contact{
    margin: 100px 0px;
}

.service-testim{
margin-bottom: 90px;
}