body {
  font-family:'Prompt', sans-serif;
  font-size:14px;
  color:#000;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  background:#fff;
  padding:0px;
  min-height:300vh;
  overflow-x:hidden;
}
a{
  text-decoration: none !important;
  -moz-transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -o-transition: all linear .3s;
  transition: all linear .3s;
  outline: none !important;
}
a:hover{text-decoration:none;}
img{max-width:100%;}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.prelative{position:relative !important;}
.pabsolute{position:absolute !important;}
.justify-content-center{justify-content: center!important;}
.align-items-center{align-items:center !important;}
.d-flex{display: flex!important;}
.f-wrap{flex-wrap: wrap!important;}
.justify-content-between{justify-content: space-between!important;}
input[type="text"], input[type="password"], input[type="email"], textarea{
  font-size: 14px;
  font-weight: 500;
  color: #7e7e7e;
  border-width: 1px;
  border-style: solid;
  padding: 0 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border linear .3s;
  -webkit-transition: border linear .3s;
  -o-transition: border linear .3s;
  transition: border linear .3s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: #146eb4 !important;
  outline: none;
  color: #333;
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index:-1;
}
/*Header*/
a.navbar-brand{
  position: relative;
  z-index: 0;
  background: rgba(236, 236, 236, 0.5);
  border: 0px solid #ececec;
  border-radius: 12px;
  backdrop-filter: blur(5px);
  padding: 12px 24px;
  transition: all 0.5s ease 0s;
}
a.navbar-brand img{
  height:52px;
  padding:7px 15px;
}
a.navbar-brand:hover{background:#fff;}
ul.mynav{
  background-color: rgba(236, 236, 236, 0.5);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 4px;
}
ul.mynav > li > a {
  color:#000;
  padding: 10px 16px !important;
  margin: 0;
  border-radius:12px;
  font-size:16px;
  text-transform: capitalize;
  z-index: 1;
  position:relative;
  transition: all 0.5s ease 0s;
}
ul.mynav > li > a:hover, ul.mynav > li > a.active{
  color:#fff !important;
  background:rgba(0,0,0,0.5);
}
ul.mynav .nav-item:not(:first-child){margin-left:15px;}
ul.mynav > li > a > span:before {
  content: "";
  width: 5px;
  height: 5px;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  right: 8px;
  bottom: 13px;
  z-index: -1;
  display:none;
  transition: width 0.2s ease-out 0s;
}
ul.mynav > li:hover > a > span:before {
  width: 84%;
  height:2px;
}
ul.mynav > li > a.active > span:before{background:#fff;}
button.mybtn{
  font-size:16px;
  color:#000;
  position:relative;
  z-index:0;
  background: rgba(236, 236, 236, 0.5);
  border: 0px solid #ececec;
  border-radius: 12px;
  backdrop-filter: blur(5px);
  padding: 14px 24px;
  transition: all 0.5s ease 0s;
}
button.mybtn:hover{
  background:#fff;
}
button.mybtn i{
  font-weight:300;
}
.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.bg-video-wrap video {
  display:block;
  width: 100%;
  position: relative;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
  background-size: 3px 3px;
  z-index: 2;
}
.bg-video-wrap h1 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  width: 100%;
  font-size:4rem;
  letter-spacing:1px;
  line-height:1;
  font-weight:600;
}
.ourProjects{
  clear:both;
  color:#fff;
  background:#000;
}
.ourProjects h2{
  font-size:3rem;
  font-weight:500;
}
.ourProjects h3{
  position:relative;
  margin: 0;
  font-size: 3rem;
  line-height: 1;
  margin-right: 5px;
  font-weight:400;
}
.ourProjects span{
  /*white-space: nowrap;*/
  display:flex;
  margin-right: 30px;
  letter-spacing: 0.5px;
  font-size:14px;
  font-weight:300;
}
.ourProjects h4{
  font-weight:400;
}
#counter-box{
  /*display:flex;*/
  /*align-items:center;*/
}
.kr h3:after{
  content: 'K';
  position: absolute;
  left: 65px;
  bottom: 0px;
  font-size:2.5rem;
  font-weight:100;
}
.oe h3:after{
  content: 'K+';
  position: absolute;
  left: 65px;
  bottom: 0px;
  font-size:2.5rem;
  font-weight:100;
}
.cw h3:after{
  content: 'M+';
  position: absolute;
  left: 22px;
  bottom: 0px;
  font-size:2.5rem;
  font-weight:100;
}
.ci h3:after{
  content: 'K+';
  position: absolute;
  left: 95px;
  bottom: 0px;
  font-size:2.5rem;
  font-weight:100;
}
.testimoni{
  background:#000;
  color:#fff;
}
.testimoni h2{
  font-size: 3rem;
  font-weight: 500;
}
.testimoni .bx-wrapper .bx-viewport{
  background:transparent;
}
.testimoni img{
  width:60px;
  border-radius:50%;
  margin-bottom:10px;
  border:0px solid #fff;
}
.testimoni h4{
  font-size:16px;
  font-weight:400;
  letter-spacing:1px;
  position:relative;
  display:flex;
  align-items:center;
  column-gap:15px;
  margin-top:25px;
  color:rgba(255,255,255,0.5);
}
.testimoni h4 i{
  transform: rotate(45deg);
  font-weight: 100;
  display:none;
}
.testimoni p{
  font-weight:200;
  margin:0px;
}
.testimoni .slideinfo{
  border:0px solid rgba(255,255,255,0.2);
  border-radius:25px;
  background:#141414;
  padding:20px 30px;
  margin:0px 15px;
}
.testimoni .slide{
  display:flex;
}
.testimoni .bx-wrapper .bx-prev {
  background: url(../ttimg/prev1.png) no-repeat;
}
.testimoni .bx-wrapper .bx-next {
  background: url(../ttimg/next1.png) no-repeat;
}
.serv{
  background:#000;
  color:#fff;
}
.serv h2{
  font-size: 3rem;
  font-weight: 500;
}
.servboxin{
  padding:0px;
  /*background:url(../ttimg/lines.svg);*/
}
.servboxdet{
  padding:30px 30px;
  position:relative;
}
.servone::before,
.servtwo::before,
.servthree::before,
.servfour::before,
.servfive::before,
.servfive::after,
.servsix::before{
  opacity:0.5;
}
.servone::before{
  content:'';
  position:absolute;
  width:1px;
  right:0px;
  top:0;
  bottom:0;
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);
}
.servtwo::before{
  content:'';
  position:absolute;
  height:1px;
  right:0;
  left:0;
  bottom:0;
  background:#fff;
}
.servthree::before{
  content:'';
  position:absolute;
  width:1px;
  left:0px;
  top:0;
  bottom:0;
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);
}
.servfour::before{
  content:'';
  position:absolute;
  height:1px;
  left:0;
  right:0;
  top:-1px;
  background: linear-gradient(to right,  rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);
}
.servfive::before{
  content:'';
  position:absolute;
  width:1px;
  left:-1px;
  top:0;
  bottom:0;
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.servfive::after{
  content:'';
  position:absolute;
  width:1px;
  right:-1px;
  top:0;
  bottom:0;
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.servsix::before{
  content:'';
  position:absolute;
  height:1px;
  left:0;
  right:0;
  top:-1px;
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%);

}
.servboxdet img{
  width:40px;
}
.servboxdet h4{
  font-weight:400;
  margin:1rem 0px;
  font-size:22px;
}
.servboxdet p{
  font-weight:300;
  font-size:14px;
}
.servboxdet a{
  display:inline-block;
  font-weight:300;
  text-transform:capitalize;
  color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.6);
  padding:10px 15px;
  border-radius:12px;
  transition:all 0.3s;
}
.servboxdet a:hover{
  background:#141414;
  color:#fff;
}
.exper h2{
  font-size: 3rem;
  font-weight: 500;
}
.exper h4{
  font-size:16px;
  font-weight:300;
}
.exper span{
  opacity:0.5;
  display:block;
  margin-bottom:20px;
}
.ceof{
  background:#fff;
  color:#000;
  border-radius:30px;
  padding:40px;
}
.ceof h3{
  font-weight:600;
}
.profile{
  display:inline-flex;
  align-items:center;
}
.profile img{border-radius:50%;}
.dtp{
  color:#000;
  padding:10px 5px;
  letter-spacing:0.5px;
}
.dtp span{
  color: rgba(0,0,0,1);
  display: inline-block;
  position: relative;
  margin: 0px 0px 0px 5px;
  font-size: 12px;
  line-height: 25px;
  z-index: 1;
  opacity: 1;
  text-align: center;
  border: 1px dashed #000;
  transition: all 0.5s ease 0s;
  border-radius: 50%;
  height: 25px;
  width: 25px;
}
.dtp span:after{
  content:"";
  background: #000;
  padding: 20%;
  border-radius: 50%;
  position: absolute;
  transform: translate3d(-50%, -50%, 0) scale(0);
  top: 51%;
  left: 52%;
  z-index: -1;
  transition: all .3s cubic-bezier(1, 0.15, 0.34, 1.03);
}
.dtp:hover span:after{ transform: translate3d(-50%, -50%, 0) scale(3);}
.dtp:hover span{color: rgba(255,255,255,1);}
footer{
  background:#000;
  color:#fff;
}
footer h4{
  font-size:2rem;
  font-weight:400;
  line-height:1;
}
footer p{
  font-weight:300;
  letter-spacing:1px;
}
footer h5{
  font-size:1.2rem;
  font-weight:400;
}
.link{
  color: rgba(255,255,255,0.5);
  line-height: 23px;
  letter-spacing: 0.5px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding:0px 5px;
  z-index: 1;
  transition: all 0.4s ease 0.1s;
}   
.link:hover,
.link:focus{
  color: #fff;
  overflow: visible;
}
.link:before,
.link:after{
  content: '';
  background: linear-gradient(to right,#000,#b2b2b2);
  height: 100%;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: all 0.3s ease 0s;
}
.link:after{
  background: #b2b2b2;
  left: auto;
  right: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.link:hover:before{
  width: calc(100%);
  transform: scaleY(1.3);
  left: -5px;
}
.link:hover:after{
  width: 15px;
  transform: scaleY(1.3);
  right: -10px;
}
.link span i{
  border: 1px dashed #b2b2b2;
  border-radius: 50%;
  padding: 5px;
  height: 26px;
  width: 26px;
  transition: all 0.3s ease 0s;
}
.link:hover span i{
  border: 1px dashed #000;
  background:#000;
}
.mulink{
  color: #fff;
  letter-spacing:1px;
  display: inline-block;
  position: relative;
  margin-bottom:8px;
  transition: all 2s ease-out;
}
.mulink span{opacity:0.5;}
.mulink:hover span{opacity:1;}
.mulink:hover span{
  display: inline-block;
  animation: animate 1s infinite;
}
.mulink:hover span:nth-child(1){ animation-delay: 0.1s; }
.mulink:hover span:nth-child(2){ animation-delay: 0.2s; }
.mulink:hover span:nth-child(3){ animation-delay: 0.3s; }
.mulink:hover span:nth-child(4){ animation-delay: 0.4s; }
.mulink:hover span:nth-child(5){ animation-delay: 0.5s; }
.mulink:hover span:nth-child(6){ animation-delay: 0.6s; }
.mulink:hover span:nth-child(7){ animation-delay: 0.7s; }
.mulink:hover span:nth-child(8){ animation-delay: 0.8s; }
.mulink:hover span:nth-child(9){ animation-delay: 0.9s; }
.mulink:hover span:nth-child(10){ animation-delay: 1.0s; }
.mulink:hover span:nth-child(11){ animation-delay: 1.1s; }
@keyframes animate{
  0%{ transform: rotateX(0deg); }
  100%{ transform: rotateX(360deg); }
}
.fulink{
  color: #fff;
  line-height: 20px;
  letter-spacing: 1px;
  padding-left: 12px;
  display: inline-block;
  text-transform:capitalize;
  position: relative;
  z-index: 1;
  margin-bottom:8px;
  transition: all 0.5s ease 0s;
}
.fulink:focus,
.fulink:hover{
  color: #fff;
}
.fulink:after{
  content: '';
  background: rgba(255,255,255,0.5);
  height: 7px;
  width: 7px;
  opacity: 1;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  transition: all 0.4s ease 0s;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.fulink:hover:after{
  background: #b2b2b2;
  height: 25px;
  width: 25px;
  opacity: 1;
  left: calc(100% - 0px);
}
.fulink span{opacity:0.5;}
.fulink:hover span{opacity:1;}
.elink{
  color: rgba(255,255,255,0.5);
  letter-spacing:1px;
  display: inline-block;
  position: relative;
  z-index: 1;
  padding:0px 5px;
  transition: all 0.3s ease 0s;
}
.elink:focus,
.elink:hover{
  color: #fff;
}
.elink:before{
  content: attr(data-hover);
  color: #000;
  background: rgba(255,255,255,0.5);
  /*text-transform: uppercase;*/
  text-align: center;
  width: 100%;
  height: 2px;
  overflow: hidden;
  position: absolute;
  top: 95%;
  left: 0;
  transition: height 0.2s ease 0s, top 0.1s ease 0.2s;
}
.elink:hover:before{
  height: 100%;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  top: 0;
  background: rgba(255,255,255,1);
  transition: top 0.2s ease 0s, height 0.5s ease 0.3s, padding 0.5s ease 0.3s;
}
.newdeal a{
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  margin:15px 0px;
  transition: all 0.3s ease 0s;
}
.newdeal h2{
  font-size: 3rem;
  font-weight: 500;
  line-height:1;
  color:#fff;
}
.newdeal a h4{
  font-size:18px;
  font-weight:300;
  color:#fff;
  margin:0px;
  padding:12px 15px 3px 15px;
  transition: all 0.3s ease 0s;
}
.newdeal a h4 i{
  transform:rotate(45deg);
  font-weight:300;
  color:#000;
  transition: all 0.3s ease 0s;
}
.newdeal a p{
  color:#b4b4b4;
  margin:0px;
  padding:3px 15px 12px 15px;
  transition: all 0.3s ease 0s;
}
.newdeal a img{
  border-radius:0px 0px 20px 20px;
}
.newdeal a:hover h4 i{color:#fff;}
.newdeal a:hover{background:#221c1b;}
.newdeal a:hover p{padding:0px 15px 15px 15px;}
.newdeal a:hover h4{padding:15px 15px 0px 15px;}
.orsrv .bx-wrapper .bx-viewport{
  background:transparent;
}
.orsrv .bx-wrapper .bx-prev{
  background:url(../ttimg/prev1.png) no-repeat;
}
.orsrv .bx-wrapper .bx-next{
  background:url(../ttimg/next1.png) no-repeat;
}

.orsrvslider img{
  width:100%;
  display:inline-block !important;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  border-radius:12px;
  border:2px solid rgba(255,255,255,0.5);
}
.orsrvslider img:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}
.orsrvslider .line{
  width:35px;
  height:4px;
  background:rgba(0,0,0,0.3);
  margin:5px auto 15px;
}
.orsrvslider p{
  font-size:16px;
  line-height:1.2;
  color:#000;
  padding:0px 15px;
}
.mybodyhead h2{
  font-size: 3rem;
  font-weight: 500;
  color:#fff;
}
.mybody{
  background-color: var(--bg);
  width: 100%;
  height: 100vh;
  color: var(--text-primary);
  overflow: hidden;
}
@-webkit-keyframes carousel-animate {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(200%) scale(0.7);
  }
  3%, 14.2857142857% {
    visibility: visible;
    opacity: 0.8;
    transform: translateX(100%) scale(0.9);
  }
  17.2857142857%, 28.5714285714% {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  31.5714285714%, 42.8571428571% {
    visibility: visible;
    opacity: 0.8;
    transform: translateX(-100%) scale(0.9);
  }
  45.8571428571% {
    visibility: visible;
    opacity: 0;
    transform: translateX(-200%) scale(0.9);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-200%) scale(0.7);
  }
}
@keyframes carousel-animate {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(200%) scale(0.7);
  }
  3%, 14.2857142857% {
    visibility: visible;
    opacity: 0.8;
    transform: translateX(100%) scale(0.9);
  }
  17.2857142857%, 28.5714285714% {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  31.5714285714%, 42.8571428571% {
    visibility: visible;
    opacity: 0.8;
    transform: translateX(-100%) scale(0.9);
  }
  45.8571428571% {
    visibility: visible;
    opacity: 0;
    transform: translateX(-200%) scale(0.9);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-200%) scale(0.7);
  }
}
:root {
  --light: 0;
  --light: 0;
  --max-width-post: 420px;
  --primary: hsl(
    calc(64 + 220 * var(--light)),
    calc(77% - 7% * var(--light)),
    calc(100% - 100% * var(--light))
  );
  --bg: hsl(
    calc(284 - 220 * var(--light)),
    calc(70% + 7% * var(--light)),
    calc(0% + 100% * var(--light))
  );
  --text-primary: hsl(
    calc(60 * var(--light)),
    calc(19% * var(--light)),
    calc(97% - 89% * var(--light))
  );
  --font-size-sm: clamp(0.7rem, 0.91vw + 0.47rem, 1.2rem);
  --font-size-base: clamp(0.88rem, 1.14vw + 0.59rem, 1.5rem);
  --font-size-md: clamp(1.09rem, 1.42vw + 0.74rem, 1.88rem);
  --font-size-lg: clamp(1.37rem, 1.78vw + 0.92rem, 2.34rem);
  --font-size-xl: clamp(1.71rem, 2.22vw + 1.15rem, 2.93rem);
  --font-size-xxl: clamp(2.14rem, 2.77vw + 1.44rem, 3.66rem);
  --font-size-xxxl: clamp(2.67rem, 3.47vw + 1.8rem, 4.58rem);
}

@supports (height: 100dvh) {
  mybody {
    height: 100dvh;
  }
}

.mycontainer {
  --container-padding-horizontal:0px;
  position: relative;
  padding-inline: var(--container-padding-horizontal);
  display: grid;
  place-items: center;
  height: 100%;
}

.mycarousel {
  pointer-events: none;
  position: absolute;
  -webkit-padding-before: 67px;
          padding-block-start: 67px;
  -webkit-padding-after: max(24px, calc(29px + var(--font-size-md)));
          padding-block-end: max(24px, calc(29px + var(--font-size-md)));
  perspective: 100px;
  width: 100%;
}
@media (max-width: 568px) {
  .mycarousel {
    -webkit-padding-after: 52px;
            padding-block-end: 52px;
  }
}
.carousel__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  height: 61.2vh;
}
.mycarousel .item {
  position: absolute;
  max-width: 418px;
  height: 100%;
  margin-inline: var(--container-padding-horizontal);
  opacity: 0;
  will-change: transform, opacity;
  -webkit-animation: carousel-animate 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
          animation: carousel-animate 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@media (max-width: 568px) {
  .mycarousel .item {
    margin-inline: calc(var(--container-padding-horizontal) + 1px);
  }
}
.mycarousel .item:nth-child(1) {
  -webkit-animation-delay: calc(3.8571428571s * -1);
          animation-delay: calc(3.8571428571s * -1);
}
.mycarousel .item:nth-child(2) {
  -webkit-animation-delay: calc(3.8571428571s * 0);
          animation-delay: calc(3.8571428571s * 0);
}
.mycarousel .item:nth-child(3) {
  -webkit-animation-delay: calc(3.8571428571s * 1);
          animation-delay: calc(3.8571428571s * 1);
}
.mycarousel .item:nth-child(4) {
  -webkit-animation-delay: calc(3.8571428571s * 2);
          animation-delay: calc(3.8571428571s * 2);
}
.mycarousel .item:nth-child(5) {
  -webkit-animation-delay: calc(3.8571428571s * 3);
          animation-delay: calc(3.8571428571s * 3);
}
.mycarousel .item:nth-child(6) {
  -webkit-animation-delay: calc(3.8571428571s * 4);
          animation-delay: calc(3.8571428571s * 4);
}
.mycarousel .item:last-child {
  -webkit-animation-delay: calc(-3.8571428571s * 2);
          animation-delay: calc(-3.8571428571s * 2);
}
.mycarousel img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

.instagram {
  --pading-horizontal: 16px;
  --border: 1px solid var(--primary);
  max-width: var(--max-width-post);
  width: 100%;
  border: var(--border);
  border-radius: 20px;
}
.instagram__header {
  padding-block:7.5px;
  border-bottom: var(--border);
}
.instagram__header figure {
  padding-block: 0;
  padding-inline: var(--pading-horizontal);
  margin: 0;
  display: flex;
  align-items: center;
}
.instagram__header figure h4{
  margin:0px;
  font-weight:400;
}
.instagram__header figure img.figlogo{
  border-radius: 50%;
  padding:5px;
  -o-object-fit: cover;
  object-fit: cover;
  border: var(--border);
  -webkit-margin-end: 8px;
  margin-inline-end: 8px;
}
.instagram__media {
  display: flex;
  border-bottom: var(--border);
}
.instagram__media .img {
  max-width: 100%;
  height: 61.2vh;
}
.instagram__buttons {
  padding-block: 12px;
  padding-inline: var(--pading-horizontal);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.instagram__buttons .left {
  display: flex;
  align-items: center;
}
.instagram__buttons .left svg:nth-of-type(2) {
  margin-inline: 12px;
}
.instagram__icon {
  cursor: pointer;
  pointer-events:none;
  width: 1em;
  height: 1em;
  font-size: var(--font-size-md);
  min-width: 24px;
  min-height: 24px;
}
.instagram__icon:hover {
  opacity: 0.7;
}
.instagram__icon path {
  stroke: var(--primary);
  stroke-linejoin: round;
}
.instagram__icon--comment path {
  stroke-width: 2;
}
.instagram__icon--message {
  -webkit-margin-before: 3px;
          margin-block-start: 3px;
}
.instagram__icon--message path {
  stroke-width: 2;
}
.instagram__icon--saved path {
  stroke-width: 2;
}
.blackform:before{
  content:'';
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.blackform:after{
  content:'';
  position:absolute;
  bottom:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.blackform h2{
  font-size: 3rem;
  font-weight: 500;
  color:#fff;
  line-height:1;
}
.my-form input, .my-form select, .my-form textarea, .my-form button{
  width:100%;
  padding:15px 20px;
  margin-bottom:15px;
  font-weight:100;
  font-size: 16px;
  letter-spacing:1px;
  border:0px solid rgba(255,255,255,0.1);
  background:rgba(20,20,20,1);
  color:rgba(255,255,255,0.8);
  border-radius:15px;
  transition:background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
  transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25)
}
.my-form select{
  appearance: none;
  background:rgba(255,255,255,0.05) url(../ttimg/down.svg);
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 15px 15px;
}
.my-form select::-ms-expand {
  display: none;
}
.my-form textarea{
  resize: none;
  height: 100px;
  margin:0px;
}
.my-form ::placeholder {
  color: rgba(255,255,255,0.8);
  opacity: 1;
}
.my-form select:focus,
.my-form select option,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:enabled:hover,
.my-form button:focus,
.my-form input[type="checkbox"]:focus + label {
  background:rgba(20,20,20,1);
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
  transform: scale(1.02);
  outline:none;
  color:#fff;
  background:rgba(20,20,20,1);
}
select option[value="1"] {
  background:#1a1a1a;
}
select option[value="2"] {
  background:#1a1a1a;
}
select option[value="3"] {
  background:#1a1a1a;
}
select option[value="4"] {
  background:#1a1a1a;
}
.my-form button {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-weight:200;
  transition: filter 0.2s;
}
.my-form button > * {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}
.my-form button .back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-110%, -50%);
}
.my-form button:enabled:hover .back,
.my-form button:focus .back {
  transform: translate(-50%, -50%);
}
.my-form button:enabled:hover .front,
.my-form button:focus .front {
  transform: translateX(110%);
}
#return-to-top{
  position:fixed;
  text-align:center;
  bottom:0px;
  right:5px;
  width:50px;
  height:50px;
  line-height:50px;
  z-index:9;
  background: rgba(236, 236, 236, 0.5);
  border-radius: 50% 50% 0 0;
  backdrop-filter: blur(5px);
  padding:0px;
  transition: all 0.5s ease 0s;
}
#return-to-top i{
  color:#000;
  margin:0;
  position:relative;
  font-size:18px;
  top:14px;
  font-weight:400;
  transition: all 0.5s ease 0s;
}
#return-to-top:hover{background:#fff;}
#return-to-top:hover i{color:#000;top:0px;}
.callonphone, .whatsappme{
  position:fixed;
  color:#000;
  text-align:center;
  bottom:5px;
  left:5px;
  width:50px;
  height:50px;
  line-height:50px;
  z-index:9;
  background: rgba(236, 236, 236, 0.5);
  border-radius: 50%;
  backdrop-filter: blur(5px);
  padding:0px;
  transition: all 0.5s ease 0s;
}
.whatsappme{
  bottom:60px;
}
.whatsappme img{
  width:30px;
}
.callonphone i{
  font-size:18px;
  font-weight:900;
  top:3px;
  position:relative;
}
.callonphone:hover, .whatsappme:hover{background:#fff;}
@media only screen and (max-width: 480px){
  .hidden-xs, .servone::before{display:none !important;}
  nav button.navbar-toggler{
    background: rgba(236, 236, 236, 0.5);
    border: 0px solid #ececec;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    padding: 11px 12px;
    position:absolute;
    right:0.8rem;
    box-shadow:none !important;
    transition: all 0.5s ease 0s;
  }
  nav .navbar-collapse{
    position:relative;
    right:55px;
  }
  ul.mynav .nav-item:not(:first-child){margin:0px;}
  .bg-video-wrap video{width:250%;left:-80%;}
  .bg-video-wrap h1{top:40%;font-size:3rem;}
  .ourProjects h2,
  .mybodyhead h2,
  .newdeal h2,
  .testimoni h2,
  .serv h2,
  .exper h2,
  .blackform h2{
    font-size:2.3rem;
  }
  #counter-box{margin-bottom:30px;}
  .mybody{padding:0px 12px;}
  .servboxdet{
    padding:30px 0px;
  }
  .servtwo::before,
  .servthree::before,
  .servfour::before,
  .servfive::before,
  .servfive::after,
  .servsix::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    width:auto;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%);
  }
  .slide{margin:0 0.3%;}
  .ceof{margin-top:30px;padding:20px;}
  .ceof p, .exper span, .profile{margin:0px !important;}
  .my-form, footer h5{margin-top:30px;}
  .testimoni .slide{flex:none;margin:0;}
  .testimoni .slideinfo{margin:0px;}
}

* {
  cursor: none;
}
body:hover > #cursor {
  opacity: 1;
}
body:hover > #pointer {
  opacity: 1;
}
#cursor {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  position: fixed;
  left: 2px !important;
  top: 2px !important;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  border: 2px solid #fff;
  box-shadow: rgb(0 0 0 / 100%) 0px 0px 0px 2px;
  transition: opacity 200ms ease, background-color 200ms ease;
}
#pointer {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  position: fixed;
  left:0px;
  top: 0px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  background-color: #fff;
  box-shadow: rgb(0 0 0 / 100%) 0px 0px 0px 2px;
  transition: opacity 200ms ease;
}