@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-Black.eot');
  src: local('Aloevera Display Black'), local('AloeveraDisplay-Black'),
      url('../fonts/AloeveraDisplay-Black.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-Black.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-Black.woff') format('woff'),
      url('../fonts/AloeveraDisplay-Black.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-Black.svg#AloeveraDisplay-Black') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-Light.eot');
  src: local('Aloevera Display Light'), local('AloeveraDisplay-Light'),
      url('../fonts/AloeveraDisplay-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-Light.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-Light.woff') format('woff'),
      url('../fonts/AloeveraDisplay-Light.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-Light.svg#AloeveraDisplay-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-ExtraBold.eot');
  src: local('Aloevera Display ExtraBold'), local('AloeveraDisplay-ExtraBold'),
      url('../fonts/AloeveraDisplay-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-ExtraBold.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-ExtraBold.woff') format('woff'),
      url('../fonts/AloeveraDisplay-ExtraBold.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-ExtraBold.svg#AloeveraDisplay-ExtraBold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-Regular.eot');
  src: local('Aloevera Display Regular'), local('AloeveraDisplay-Regular'),
      url('../fonts/AloeveraDisplay-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-Regular.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-Regular.woff') format('woff'),
      url('../fonts/AloeveraDisplay-Regular.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-Regular.svg#AloeveraDisplay-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-SemiBold.eot');
  src: local('Aloevera Display SemiBold'), local('AloeveraDisplay-SemiBold'),
      url('../fonts/AloeveraDisplay-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-SemiBold.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-SemiBold.woff') format('woff'),
      url('../fonts/AloeveraDisplay-SemiBold.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-SemiBold.svg#AloeveraDisplay-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-Bold.eot');
  src: local('Aloevera Display Bold'), local('AloeveraDisplay-Bold'),
      url('../fonts/AloeveraDisplay-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-Bold.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-Bold.woff') format('woff'),
      url('../fonts/AloeveraDisplay-Bold.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-Bold.svg#AloeveraDisplay-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-Medium.eot');
  src: local('Aloevera Display Medium'), local('AloeveraDisplay-Medium'),
      url('../fonts/AloeveraDisplay-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-Medium.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-Medium.woff') format('woff'),
      url('../fonts/AloeveraDisplay-Medium.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-Medium.svg#AloeveraDisplay-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-ExtraLight.eot');
  src: local('Aloevera Display ExtraLight'), local('AloeveraDisplay-ExtraLight'),
      url('../fonts/AloeveraDisplay-ExtraLight.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-ExtraLight.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-ExtraLight.woff') format('woff'),
      url('../fonts/AloeveraDisplay-ExtraLight.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-ExtraLight.svg#AloeveraDisplay-ExtraLight') format('svg');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloevera Display';
  src: url('../fonts/AloeveraDisplay-Thin.eot');
  src: local('Aloevera Display Thin'), local('AloeveraDisplay-Thin'),
      url('../fonts/AloeveraDisplay-Thin.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AloeveraDisplay-Thin.woff2') format('woff2'),
      url('../fonts/AloeveraDisplay-Thin.woff') format('woff'),
      url('../fonts/AloeveraDisplay-Thin.ttf') format('truetype'),
      url('../fonts/AloeveraDisplay-Thin.svg#AloeveraDisplay-Thin') format('svg');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}


* {margin:0; padding: 0;font-family: 'Aloevera Display', sans-serif;}
body {font-family: 'Aloevera Display', sans-serif;}
p {font-size:18px; line-height: 140%;}
:root {
--white: #ffffff;
--black: #0f0e0f;
--font-aloevera: 'Aloevera Display', sans-serif;
}
/*Common CSS*/

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgb(138, 137, 137)!important;
  opacity: 0.8;
  width:9px !important;;
  border-radius:9px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.section {padding: 80px 0; height: auto; overflow: hidden;}
.color-white {color:var(--white);}
.color-black {color:var(--black);}

.bgcolor-white {background-color:var(--white);}
.fSize1 {font-size:78px; line-height: 100%;}
.fSize2 {font-size:65px; line-height: 100%;}
.fSize3 {font-size:48px; line-height: 100%;}
.fSize4 {font-size:36px; line-height: 100%;}
.fSize4 {font-size:24px; line-height: 100%;}
.fSize5 {font-size:18px; line-height: 100%;}
/*Common CSS end*/

#main-con {background-color: var(--black);}
#home {width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family:var(--font-aloevera);}
#home .video-con {width: 100%; height: 100%; max-height:700px; overflow: hidden;  display: flex; align-items: center; justify-content: center; text-align: center; position: fixed; z-index: -1;}
#home h2 {width:65%; height:20%; justify-content: center; align-items: center; font-size:6vh; text-align: center; text-transform: uppercase; position: relative; color:var(--white);}
#home h2 span { font-style: italic; font-weight:200;}
#about {width: 100%; min-height:100vh; padding:80px 0; text-align: center; position: relative;}
#about .portfolio-img{filter: blur(15px)}
#about .swiper-button-next, .swiper-button-prev {color:var(--white); opacity: 0.5;}
#about .swiper-button-next:hover, .swiper-button-prev:hover {opacity:1;}
 #about .swiper-button-next, .swiper-button-prev {position: relative;top:-20px; width: calc(var(--swiper-navigation-size) / 44* 27);
  height: var(--swiper-navigation-size); margin-top: calc(0px -(var(--swiper-navigation-size) / 2));}
#about .swiper-button-prev, .swiper-rtl .swiper-button-next {left:-50px; top:-30px; right: auto;}
#about .swiper-button-next, .swiper-rtl .swiper-button-prev {right:0%; top:15px; left: auto;} 
#about .swiper-button-next:after, .swiper-button-prev:after {font-size: 20px;}
#about .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {font-size: 20px;}
#portfolio {width: 100%; min-height:100vh; text-align: center; position: relative; padding-bottom:100px;}
#portfolio .portfolio-top {width: 100%; height:350px;  display: flex;  align-items: center; justify-content: center; background-image: url(../images/bg1.png); background-repeat: no-repeat; background-position: top center; background-size: cover;  background-color:var(--black); border-bottom-left-radius:250%; border-bottom-right-radius:250%; }
#portfolio .portfolio-text {border-top:1px solid var(--white); border-bottom:1px solid var(--white); padding:50px 0;}
#portfolio .portfolio-card img {height: 350px; object-fit: fill; filter: blur(8px); overflow: hidden; }
#portfolio .portfolio-card .title {font-size:17px; font-weight:600; color: var(--white); margin:20px 0 5px 0; }
#portfolio .portfolio-card .city {font-size:17px; color: var(--white); }
#client {width: 100%; min-height:100vh; overflow: hidden; text-align: center; display: flex; justify-content: center; align-items: center; text-align: center; padding-bottom: 100px; }
#client .client-logo {width:220px; height: 135px; border:1px solid #ccc; margin: 20px 0; display: flex; align-items: center; text-align:center; padding:15px;}
#client .view-btn {background-color:#999999; padding: 10px 80px; border-radius:15px; color:var(--white); text-decoration: none; font-size:24px; margin-top:50px; display: inline-block;}



/*Portfolio Page*/
#PortfolioPage-con {width: 100%; height:75vh; overflow: hidden; font-family:var(--font-aloevera); position: relative;}
#PortfolioPage-con .header-title {position: relative; z-index: 9999; }