@font-face {
  font-family: 'mont-black';
  src: url('font/mont-Bold.ttf') format('truetype') ;



 
}
/* url('fonts/mont-Bold.ttf') format('truetype') font-weight-bold,

 

   
url('fonts/mont-SemiBold.ttf') format('truetype') */

@font-face {
  font-family: 'mont';
  src: url("font/mont-Regular.ttf") format("truetype");
  font-weight: normal;
 
}

@font-face {
  font-family: "mont-Heavy";
  src: url("font/mont-Heavy.ttf") format("truetype");
  
 
}
:root {
  font-size: 16px
}

.mlr-15{
  margin-left: 15rem!important;
  margin-right: 15rem!important;
}

@media (max-width: 500px) {
  :root {
    font-size: 14px
  }
}

.hidden-vis{
  visibility:hidden;
}

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

::-moz-selection {
  background: #2680EB;
  color: white;
}

::selection {
  background: #2680EB;
  color: white;
}

body {
  /* overflow: hidden; */
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  overflow-x: hidden !Important;
  overflow-y: scroll;
}

:-webkit-any-link {
  color: #ffffff;
}

:-moz-any-link {
  color: #ffffff;
}

:any-link {
  color: #ffffff;
}

.df {
  display: -webkit-box;
  display: flex
}

.aic {
  -webkit-box-align: center;
  align-items: center
}
.dif{
  display: inline-flex;
}

.jcc {
  -webkit-box-pack: center;
  justify-content: center
}

.jcse {
  justify-content: space-evenly;
  -webkit-box-pack: space-evenly;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  color: white;
  z-index: 111;
}

.loader2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(255, 255, 255);
  color: white;
  z-index: 110;
}




.panel {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5em;
  position: relative;
  box-sizing: border-box;

}


#bm,
#bm2,
#bm3 {
  width: 260px;
  height: 400px;
  transform: scaleX(-1);
}



.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}


@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}


.pining-div-main {
  position: absolute;
  will-change: transform;
}

.silde-section {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}

.line {
  width: 100%;
  max-width: 800px;
  height: 8px;
  margin: 0 0 10px 0;
  position: relative;
  display: inline-block;
  background-color: rgb(0, 245, 233);
}

.orange,
.blue,
.grey {
  background-color: #F8F9FD;
  /* background-image: radial-gradient(circle at 26% 20%, rgba(228, 228, 228, 0.06) 0%, rgba(228, 228, 228, 0.06) 13%, transparent 13%, transparent 100%), radial-gradient(circle at 11% 21%, rgba(198, 198, 198, 0.06) 0%, rgba(198, 198, 198, 0.06) 19%, transparent 19%, transparent 100%), radial-gradient(circle at 22% 13%, rgba(14, 14, 14, 0.06) 0%, rgba(14, 14, 14, 0.06) 69%, transparent 69%, transparent 100%), radial-gradient(circle at 13% 35%, rgba(148, 148, 148, 0.06) 0%, rgba(148, 148, 148, 0.06) 44%, transparent 44%, transparent 100%), radial-gradient(circle at 27% 34%, rgba(232, 232, 232, 0.06) 0%, rgba(232, 232, 232, 0.06) 21%, transparent 21%, transparent 100%), radial-gradient(circle at 19% 14%, rgba(39, 39, 39, 0.06) 0%, rgba(39, 39, 39, 0.06) 49%, transparent 49%, transparent 100%), radial-gradient(circle at 38% 18%, rgba(157, 157, 157, 0.06) 0%, rgba(157, 157, 157, 0.06) 24%, transparent 24%, transparent 100%), radial-gradient(circle at 8% 6%, rgba(60, 60, 60, 0.06) 0%, rgba(60, 60, 60, 0.06) 12%, transparent 12%, transparent 100%), -webkit-gradient(linear, left top, right top, from(#149ae7), to(#149ae7));
  background-image: radial-gradient(circle at 26% 20%, rgba(228, 228, 228, 0.06) 0%, rgba(228, 228, 228, 0.06) 13%, transparent 13%, transparent 100%), radial-gradient(circle at 11% 21%, rgba(198, 198, 198, 0.06) 0%, rgba(198, 198, 198, 0.06) 19%, transparent 19%, transparent 100%), radial-gradient(circle at 22% 13%, rgba(14, 14, 14, 0.06) 0%, rgba(14, 14, 14, 0.06) 69%, transparent 69%, transparent 100%), radial-gradient(circle at 13% 35%, rgba(148, 148, 148, 0.06) 0%, rgba(148, 148, 148, 0.06) 44%, transparent 44%, transparent 100%), radial-gradient(circle at 27% 34%, rgba(232, 232, 232, 0.06) 0%, rgba(232, 232, 232, 0.06) 21%, transparent 21%, transparent 100%), radial-gradient(circle at 19% 14%, rgba(39, 39, 39, 0.06) 0%, rgba(39, 39, 39, 0.06) 49%, transparent 49%, transparent 100%), radial-gradient(circle at 38% 18%, rgba(157, 157, 157, 0.06) 0%, rgba(157, 157, 157, 0.06) 24%, transparent 24%, transparent 100%), radial-gradient(circle at 8% 6%, rgba(60, 60, 60, 0.06) 0%, rgba(60, 60, 60, 0.06) 12%, transparent 12%, transparent 100%), linear-gradient(90deg, #149ae7, #149ae7); */
}




/* .objhere canvas {
  width: 1280px!important;
  height: 680px!important;  
  transform: scale(0.9);
  position: relative;
  top: 25%;
  left: 25%;
  z-index: 100;

} */

.h1-text {
  position: relative;
  overflow: hidden;
  font-size: 4.5rem !important;
  margin: 0 !important;
  height: 80px;
  font-family: 'mont-black';
  width: 770px;
  padding-left: 30px;
}

.hideouttext {
  position: absolute;
  z-index: 6;
}

.text-area1,
.text-area2,
.text-area3 {
  position: absolute;
  /* background: #f8f9fd; */
}

.color-blue{
  color: #2680EB;
}

.secon-h1 {
  height: 90px;
  font-size: 2.0rem;
  position: relative;
  font-weight: 700;
  font-family: 'mont-black';
}

.subtext-80 {
  width: 80%;
  position: relative;
  font-weight: 400;
  font-family: mont;
  overflow: hidden;
}

.subtext-80 span{
  color: #333;
}

.number-span {
  font-family: sans-serif;
  font-size: 18;
  padding-right: 20px;
  margin-right: 25px;
}



.number-span:nth-child(n)::after {
  width: 40px;
  border-radius: 5px;
  height: 4px;
  content: "";
  background: #a3c4ec;
  position: absolute;
  transform: translate(-8px, 23px);
  /* bottom: 0;
  left: 2px; */
}

.number-span.active-l::after {
  width: 40px;
  border-radius: 5px;
  height: 4px;
  margin-right: 5px;
  content: "";
  background: #2680EB;
  position: absolute;
  transform: translate(-8px, 23px);
  /* bottom: 0;
  left: 2px; */
}

/* .bg-box::before {
  width: 31%;
  height: 51px;
  border-radius: 35px;
  content: "";
  z-index: -1;
  background: #ffffff;
  position: absolute;
  transform: translate(-158px, 4px);
  -webkit-animation: slide-right 3.5s ease-in-out infinite alternate-reverse;
  animation: slide-right 3.5s ease-in-out infinite alternate-reverse;
} */




/* @-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}

@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  50% {
    -webkit-transform: translateX(-0px);
    transform: translateX(-0px);
  }

  100% {
    -webkit-transform: translateX(360px);
    transform: translateX(360px);
  }
} */





.custom-nav {
  position: absolute !important;
  padding: 2% 7% 0px 7%!important;
  z-index: 12 !important;
  width: 100% !important;
}

.nav-main {
  color: #fff;
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-area {
  padding-left: 90px;
}



.menu-list ul {
  display: inline-flex;
  list-style-type: none;
}

.blue-box::after {
  width: 50px;
  height: 40px;
  content: "";
  border-radius: 8px;
  background: #2680EB;
  z-index: -1;
  position: absolute;
  transform: translate(-18px, 34px);
  -webkit-animation: slide-in-left 4.5s ease-in-out infinite alternate-reverse both;
  animation: slide-in-left 4.5s ease-in-out infinite alternate-reverse both;

}

.blue-box-second::before {
  width: 50px;
  height: 40px;
  content: "";
  border-radius: 8px;
  background: #2680EB;
  z-index: -1;
  position: absolute;
  transform: translate(-19px, 31px);
  -webkit-animation: slide-in-left 2.5s ease-in-out infinite alternate-reverse both;
  animation: slide-in-left 2.5s ease-in-out infinite alternate-reverse both;
}


@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translate(-98px, 34px);
    transform: translate(-98px, 34px);
    opacity: 0;

  }

  10% {
    -webkit-transform: translate(18px, 34px);
    transform: translate(-18px, 34px);
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  99.01% {
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translate(98px, 34px);
    transform: translate(98px, 34px);
    opacity: 0;
  }

  5% {
    -webkit-transform: translate(-18px, 34px);
    transform: translate(-18px, 34px);
    opacity: 1;
  }

  20% {
    -webkit-transform: translate(-98px, 34px);
    transform: translate(-98px, 34px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translate(-18px, 34px);
    transform: translate(-18px, 34px);
    opacity: 1;
  }


  100% {
    -webkit-transform: translate(-18px, 34px);
    transform: translate(-18px, 34px);
    opacity: 1;
  }
}




.custom-menu {
  position: fixed;
  background: #161616;
  top: 0;
  transform: translateX(100%);
  right: 0;
  bottom: 0;
  width: 100%;
  /* opacity: 0; */
  z-index: 12;
  transition: 0.5s ease-in-out;
  -webkit-transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.35s;
}

.custom-menu.menuOuvert {
  /* opacity: 1; */
  transform: translateX(0);
  -webkit-transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 650ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.35s;
}

.vis-hid {
  animation: 2s fadeIn;
  animation-fill-mode: forwards;

  visibility: hidden;

}


.hamburger {
  display: block;
  /* float: right;
  pointer-events: all;
  position: relative;
  top: 35px; */
  /* z-index: 13; */
}


.hamburger button {
  display: block;
  background-color: transparent;
  border: none;
  width: 40px;
  height: 49px;
  font-size: 0;
  outline: none !important;
  /* padding: 24px 20px 24px 40px;
  margin-right: -40px;
  margin-top: -20px; */
}

.hamburger button span {
  width: 30px;
  height: 2px;
  background-color: #000;
  display: block;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  position: relative;
  /* top: -5px;
  left: -5px; */
}

.hamburger button span~span {
  margin-top: 10px;
}

.hamburger button span:nth-child(2) {
  width: 25px;
}

.hamburger button:hover span:nth-child(2) {
  width: 0;
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px);
}

.hamburger button:hover span:nth-child(1) {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}

.hamburger button:hover span:nth-child(3) {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}

.hamburger button span {
  background-color: #fff;
}


.hamburger button.active span {
  margin-top: 0;
}

.hamburger button.active span:nth-child(1) {
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  -o-transform: rotate(50deg);
  transform: rotate(50deg);
}

.hamburger button.active span:nth-child(3) {
  -webkit-transform: rotate(-50deg) translate(3px, -2px);
  -moz-transform: rotate(-50deg) translate(3px, -2px);
  -ms-transform: rotate(-50deg) translate(3px, -2px);
  -o-transform: rotate(-50deg) translate(3px, -2px);
  transform: rotate(-50deg) translate(3px, -2px);
}

.hamburger button.active span:nth-child(2) {
  width: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.big-text {
  font-size: 142px;
  font-family: mont-Heavy;
  color: #2d2d2d;
  font-weight: bolder;
  line-height: 1;
}

.small-title {
  font-size: 14px;
  position: absolute;
  letter-spacing: 1;
  top: -60px;

}

.small-title-ai {
  font-size: 14px;
  position: absolute;
  top: -40px;
  letter-spacing: 1;
  font-family: mont-Heavy;
  color: #2d2d2d;
  font-weight: 900;
  padding-left: 122px;

}

.small-title-ai::before {
  width: 100px;
  height: 1px;
  content: "";
  background: #2d2d2d;
  z-index: -1;
  position: absolute;
  transform: translate(-117px, 8px);
}

.small-title-platform{
  font-size: 14px;
  position: relative;
  letter-spacing: 1;
  font-family: mont-Heavy;
  color: #2d2d2d;
  font-weight: 900;
  padding-left: 125px;
  transform: rotate(90deg);
  left: 50px;
  transform-origin: left bottom;
}


.small-title-platform::before{
  width: 100px;
  height: 1px;
  content: "";
  background: #2d2d2d;
  z-index: -1;
  position: absolute;
  transform: translate(-117px, 8px);
}


.small-title-contact{
  font-size: 14px;
  position: absolute;
  letter-spacing: 1;
  font-family: mont;
  color: #2d2d2d;
  font-weight: 900;
  transform: rotate(90deg);
  right: 60px;
  transform-origin: right top;
}


.small-title-contact::before{
  width: 100px;
  height: 1px;
  content: "";
  background: #2d2d2d;
  z-index: -1;
  position: absolute;
  transform: translate(-117px, 8px);
}
.service-subtext{
  font-size: 18;
  font-weight: 400;
  font-family: mont;
  color: #2d2d2d;
}
.small-title-service{
  font-size: 14px;
  /* position: absolute; */
  /* top: -40px; */
  letter-spacing: 1;
  font-family: mont-Heavy;
  color: #2d2d2d;
  font-weight: 900;
  padding-left: 122px;
}

.small-title-service::before{
  width: 100px;
  height: 1px;
  content: "";
  background: #2d2d2d;
  z-index: -1;
  position: absolute;
  transform: translate(-117px, 8px);
}

.section-header-1{
  font-size:48px ;
  font-family: mont-black;
  color: #2680EB;
  font-weight: 700;
}


.service-card{
  width: 304px;
  height: 257px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 16px #1985BC26;
  border-radius: 18px;
  text-align: center;
    font-size: 18px;
    /* display: flex; */
    justify-content: center;
    align-items: flex-end;

}

.contact-card{
  width: 231px;
height: 195px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 2px 2px 16px #1985BC26;
border-radius: 18px;
text-align: left;
font-family: mont;
font-size: 16px;
padding: 26px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.contact-card::before{
  content: "";
  position: absolute;
  /* transform: translate(2% , -40%); */
  top: -55px;
  
  height: 175px;
  width: 175px;
  border-radius: 100px;
  z-index: -1;
  border: 2.5px dashed #CCCCCC;
  
}

.contact-card:hover::before{
  content: "";
  position: absolute;
  /* transform: translate(2% , -40%); */
  top: -55px;
  
  height: 175px;
  width: 175px;
  border-radius: 100px;
  z-index: -1;
  border: 2.5px dashed #CCCCCC;
  -webkit-animation: rotate-center 8s linear infinite both;
  animation: rotate-center 8s linear infinite both;
}

.contact-bold{
  font-size: 21px;
  font-weight: bolder;
  font-family: 'mont-black';
}

.service-card::before{
  content: "";
  position: absolute;
  /* transform: translate(-10% , -30%); */
  top: -55px;
  left: 70px;
  height: 240px;
  width: 240px;
  border-radius: 130px;
  z-index: -1;
  border: 2.5px dashed #CCCCCC;
 
}

.service-card::after{
  content: "";
  position: absolute;
  transform: translate(-10% , 100%);
  /* top: -55px; */
  height: 40px;
  left: 0;
  top: 0;
  width: 90px;
  border-radius: 30px;
  z-index: -1;
  background: #EFF7FA;
}
.service-card:hover::before{
  content: "";
  position: absolute;
  /* transform: translate(-10% , -30%); */
  top: -55px;
  left: 70px;
  height: 240px;
  width: 240px;
  border-radius: 130px;
  z-index: -1;
  border: 2.5px dashed #CCCCCC;
  -webkit-animation: rotate-center 8s linear infinite both;
  animation: rotate-center 8s linear infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


.big-title-service::before{
  content: "SERVICES";
  position: absolute;
  transform: translate(-7% , -50%);
  font-size: 255px;
  font-weight: 900;
  font-family: "mont-Heavy";
  color: #F8F9FD;
  z-index: -1;
}
.big-title-platform::before{
  content: "PLATFORMS";
  position: absolute;
  transform: translate(10% , -65%);
  font-size: 285px;
  font-weight: 900;
  font-family: "mont-Heavy";
  color: #F8F9FD;
  z-index: -1;
}

.big-title-contact::before{
  content: "REACH US";
  position: absolute;
  transform:translate(-5% , -50%);
  font-size: 255px;
  font-weight: 900;
  font-family: "mont-Heavy";
  color: #F8F9FD;
  z-index: -1;
}

.ourplatforms{
  width: 100%;
height: 258px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 2px 2px 16px #1985BC26;
opacity: 1;
display: inline-block;
margin: 10% 0;
}

.plt-item{
  /* width: 225px; */
  text-align: center;
  padding: 50px 10px;
  cursor: pointer;
}
.plt-item p{
  font-size: 15px;
  color: #2d2d2d;
  font-weight: 500;
  font-family: 'mont-black';
  padding-top: 15px;

}


.big-title-portf::before{
  content: "PORTFOLIO";
  position: absolute;
  transform: translate(-50% , -140%);
  font-size: 285px;
  font-weight: 900;
  font-family: "mont-Heavy";
  color: #fff;
  z-index: 0;
}

.pos-relav{
  position: relative;
}

.pos-absu{
  position: absolute;
}

.small-title::before {
  width: 100px;
  height: 1px;
  content: "";
  background: #2d2d2d;
  z-index: -1;
  position: absolute;
  transform: translate(-116px, 4px);
}

.sub-text-des {
  font-size: 20px;
  font-weight: 200;
  font-family: Poppins;
  line-height: 1.4;
}

.know-more-btn {
  width: 200px !important;
  padding: 13px !important;
  border-radius: 29px !important;
  font-size: 14px !important;

}

.bg-text::before {
  content: "ABOUT US";
  position: absolute;
  transform: translate(-105px, -256px);
  font-size: 256px;
  font-weight: 900;
  font-family: "mont-Heavy";
  color: #F8F9FD;
  z-index: -1;
}

.bg-text-cont-t::before{
  content: "AI TOOLS";
  position: absolute;
  transform: translate(10% , -110%);
  font-size: 278px;
  font-weight: bolder;
  font-family: "mont-Heavy";
  color: #EFF2FF;
  z-index: -1;
}



.menu-container,
.service-sub-con a,
.about-sub-cont a {
  width: 88%;
  font-family: mont;
  font-size: 20px;
  font-weight: 400;
  text-transform: capitalize;
  padding-left: 7%;
  padding-top: 80px;

}

.menu-container ul {
  list-style: none;
  line-height: 2.5;
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  
}

.menu-big-text {
  font-size: 48px;
  font-family: "mont-Heavy";
  color: #fff;
  font-weight: 700;

  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

}

.menu-big-text span::before{
  width: 16px;
  height: 5px;
  content: "";
  border-radius: 6px;
  background: #2680EB;
  z-index: -1;
  position: absolute;
  transform: translate(-36px, 55px);
}


.bg-text-menu::before {
  content: "Menu";
  position: absolute;
  /* transform: translate(-105px, -256px); */
  font-size: 439px;
  font-weight: 900;
  font-family: "mont-Heavy";
  color: #222222;
  text-transform: uppercase;
  z-index: -1;
}




.addis-link ul, .social-div ul{
  display: inline-flex;
       list-style: none;
}

.addis-link a, .social-div a{
  color: #333;
}


.social-div a:nth-child(1){
 
    font-size: 24px;
    padding: 10px 18px;
   }

.social-div a{
   font-size: 24px;
  padding: 10px 15px;
 }

.social-div a:nth-child(1):hover{
  background: #2196f3;
  color: #fff!important;
  padding: 10px 18px;
  border-radius: 45px;
}
.social-div a:nth-child(2):hover{
  background: #007bbd;
  color: #fff!important;
  padding: 10px 15px;
  border-radius: 45px;
}
.social-div a:nth-child(3):hover{
  background: #03a9f4;
  color: #fff!important;
  padding: 10px 15px;
  border-radius: 45px;
}
.social-div a:nth-child(4):hover{
  background: #e96004;
  color: #fff!important;
  padding: 10px 15px;
  border-radius: 45px;
}

 a:hover {
  text-decoration: none!important;
  cursor: pointer;
  color: #1e89ca!important;
}

.platfrom-main{
  color: #707070;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1;
  
}

.content-plat{
  width: 381px;
  background: #ffffff00 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 16px #1985BC26;
  border-radius: 28px;
  z-index: 1;
  left: 0;
  top: -70px;
 opacity: 0;
  padding: 50px;
  /* font-family: 'mont'!important; */
  visibility: hidden;
  position: absolute;
  transition: visibility 0s, opacity 0.3s linear;

}

.content-plat p{
   font-family: 'mont';
}

.content-plat::after{
  width: 380px;
  content: "";
  left: -26px;
  top: 20px;
  z-index: -3;
  height: 400px;
  background: #fff 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 16px #1985BC26;
  border-radius: 28px;
  opacity: 1;
  position: absolute;
}

.hover-class:hover .content-plat, .hover-class.plat-active .content-plat{
  width: 332px;
  opacity: 1;
   visibility: visible;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  /* transition: opacity 0.5s ease-in-out 0s; */
 }


 .content-plat img,
.content-plat p,
.content-plat button{
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.65s;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

.hover-class:hover .content-plat img,.hover-class.plat-active .content-plat img,
.hover-class:hover .content-plat p, .hover-class.plat-active .content-plat p,
.hover-class:hover .content-plat button, .hover-class.plat-active .content-plat button{
  opacity: 1;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.platfrom-main ul{
  display: inline-flex;
}

.platfrom-main li{
  margin: 10px;

}

.platfrom-main::before{
  content: "";
  position: absolute;
  transform: translate(-50px, -276px);
  height: 250px;
  width: 1px;
  background-color: #525252;
}


.padding-cust-200{
  padding: 10% 0 2% 0;
}


/* -----------------portpolio------ */
/* 
*,
*::after,
*::before {
	box-sizing: border-box;
} */

body {
	/* Grid gap */
	--gap: 10px;
	/* Color scheme */
	--body-text: #333;
	--body-bg: #ccd8e4;
	--link-text: #1c8af0;
	--link-text-hover: #333;
	--grid-name-text:  #00a1ff;;
	--grid-title-text: #1c8af0;
	--grid-nav-text: #fff;
	--grid-nav-bg: #464646;
	--grid-nav-text-hover: #fff;
	--grid-nav-bg-hover: #1f1f1f;
	--grid-text: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	min-height: 600px;
	color: #333;
	color: var(--body-text);
	background: #ccd8e4;
	background: var(--body-bg);
}

/* a {
	text-decoration: none;
	color: #ef3b3b;
	color: var(--link-text);
	outline: none;
} */

a:hover,
a:focus {
	color: #333;
	color: var(--link-text-hover);
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ccd8e4;
	background: var(--body-bg);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 10000;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	pointer-events: none;
	background: #333;
	background: var(--body-text);
	transform-origin: 0% 50%;
	animation: loaderAnim 1.5s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	0% {
		transform: scale3d(0,1,1);
		transform-origin: 0% 50%;
	}
	50% {
		transform: scale3d(1,1,1);
		transform-origin: 0% 50%;
	}
	51% {
		transform: scale3d(1,1,1);
		transform-origin: 100% 50%;
	}
	100% {
		transform: scale3d(0,1,1);
		transform-origin: 100% 50%;
	}
}

/* Frame */
.frame {
	top: 0;
	left: 0;
	position: fixed;
	display: grid;
	width: 100%;
	height: 100vh;
	z-index: 100;
	pointer-events: none;
	padding: 2em;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto 4em;
	grid-template-areas: 	"header header"
							"... ..."
							"... demos";
}

.no-js .frame {
	position: relative;
	display: block;
	height: auto;
}



.message {
	background: #333;
	background: var(--body-text);
	color: #1f88f1;
	color: var(--body-bg);
	text-align: center;
	padding: 1em;
	display: none;
}

/* Header */
.codrops-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	z-index: 100;
	grid-area: header;
	align-self: start;
}

.codrops-header__title {
	font-size: 1em;
	margin: 0;
	font-weight: 400;
}

.no-js .codrops-header {
	flex-direction: column;
}

.no-js .codrops-header__title {
	padding: 1em 0;
}


/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0.5em 0 0;
	text-align: center;
	white-space: nowrap;
}

.codrops-icon {
	display: inline-block;
	margin: 0 0.25em;
	padding: 0 0.25em;
}

/* Demos */
.demos {
	grid-area: demos;
	align-self: end;
	justify-self: end;
	display: block;
	text-align: center;
}

.demo {
	margin: 0 0 0 1em;
}

.demo--current {
	color: #333;
	color: var(--link-text-hover);
}

/* Grid */
.grid {
	display: grid;
	width: calc(100% - 6em);
	height: calc(100vh - 6em);
	grid-auto-rows: calc((calc(100vh - 6em) / 30) - var(--gap));
	grid-auto-columns: calc((calc(100% - 6em) / 30) - var(--gap));
	justify-content: center;
	align-content: center;
	grid-gap: var(--gap);
	pointer-events: none;
}

.no-js .grid {
	margin: 0 0 15vh;
}

.js .grid {
	position: absolute;
	top: 7em;
	left: 3em;
	opacity: 0;
}

.js .grid--current {
	opacity: 1;
	pointer-events: auto;
}

.grid__item {
	position: relative;
	padding: 1em;
	background-repeat: no-repeat;
	background-position: 50% 50%;
  background-size: cover;
  
	transition: transform 0.2s ease-out;
}

.grid__item--name,
.grid__item--title,
.grid__item--text {
	pointer-events: none;
	padding: 0;
	margin: 0;
}

.grid__item--name,
.grid__item--title {
	text-transform: uppercase;
	line-height: 0.8;
  font-family: 'mont-black';
  mix-blend-mode: multiply;
  font-weight: 700;
}

.grid__item--name {
	font-size: 7vw;
	color: #098bf5;
	color: var(--grid-name-text);
}

.grid__item--title {
	font-size: 3.5vh;
	text-transform: uppercase;	
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	text-align: right;
	display: flex;
	justify-content: flex-end;
	color: #098bf5;
	color: var(--grid-title-text);
}

.grid__item--text {
	font-size: 0.85em;
	line-height: 1.2;
	display: flex;
	color: inherit;
	color: var(--grid-text);
}

.grid__item--nav {
	background: #464646;
	background: var(--grid-nav-bg);
	color: #333;
	color: var(--grid-nav-text);
	display: flex;
	align-items: center;
	cursor: pointer;
}

.grid__item--nav:hover {
	background: #1f1f1f;
	background: var(--grid-nav-bg-hover);
	color: #fff;
	color: var(--grid-nav-text-hover);
}

.grid__item--nav-next .icon--nav-arrow {
	margin: 0 0 0 auto;
}

.grid__item--nav-prev .icon--nav-arrow {
	transform: rotate(180deg);
	margin: 0;
}

.no-js .grid__item--nav {
	display: none;
}

.grid__item--animateOut {
	animation: animateOut 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animateOut {
	to {
		opacity: 0;
	}
}

.grid__item--animateIn {
	animation: animateIn 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animateIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Layout 1 */
.grid--layout-1 .grid__item:first-child { grid-area: 11 / 1 / 17 / 5; background-image: url(../img/2.jpg); }
.grid--layout-1 .grid__item:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(../img/4.jpg); }
.grid--layout-1 .grid__item:nth-child(3) { grid-area: 8 / 5 / 22 / 15; background-image: url(../img/6.jpg); }
.grid--layout-1 .grid__item:nth-child(4) { grid-area: 22 / 10 / 29 / 15; background-image: url(../img/8.jpg); }
.grid--layout-1 .grid__item:nth-child(5) { grid-area: 1 / 11 / 8 / 15; background-image: url(../img/10.jpg); }
.grid--layout-1 .grid__item:nth-child(6) { grid-area: 17 / 15 / 24 / 20; background-image: url(../img/12.jpg); }
.grid--layout-1 .grid__item:nth-child(7) { grid-area: 9 / 15 / 17 / 23; background-image: url(../img/14.jpg); }
.grid--layout-1 .grid__item:nth-child(8) { grid-area: 2 / 18 / 9 / 23; background-image: url(../img/16.jpg); }
.grid--layout-1 .grid__item:nth-child(9) { grid-area: 17 / 20 / 22 / 26; background-image: url(../img/18.jpg); }
.grid--layout-1 .grid__item:nth-child(10) { grid-area: 22 / 20 / 28 / 23; background-image: url(../img/20.jpg); }
.grid--layout-1 .grid__item:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/22.jpg); }
.grid--layout-1 .grid__item:nth-child(12) { grid-area: 11 / 23 / 17	/ 30; background-image: url(../img/3.jpg); }
.grid--layout-1 .grid__item:nth-child(13) { grid-area: 17 / 26 / 22 / 28; background-image: url(../img/5.jpg); }
.grid--layout-1 .grid__item--name { grid-area: 3 / 12 / 30 / 25; }
.grid--layout-1 .grid__item--title { grid-area: 1 / 27 / 11 / 29; }
.grid--layout-1 .grid__item--text { grid-area: 22 / 23 / 30 / 26; }
.grid--layout-1 .grid__item--nav-prev { grid-area: 3 / 6 / 8 / 11; }
.grid--layout-1 .grid__item--nav-next { grid-area: 24 / 15 / 29 / 20; }

/* Layout 2 */
.grid--layout-2 .grid__item:first-child { grid-area: 17 / 1 / 24 / 5; background-image: url(../img/7.jpg); }
.grid--layout-2 .grid__item:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(../img/9.jpg); }
.grid--layout-2 .grid__item:nth-child(3) { grid-area: 14 / 5 / 22 / 10; background-image: url(../img/11.jpg); }
.grid--layout-2 .grid__item:nth-child(4) { grid-area: 17 / 10 / 26 / 15; background-image: url(../img/13.jpg); }
.grid--layout-2 .grid__item:nth-child(5) { grid-area: 1 / 10 / 17 / 15; background-image: url(../img/15.jpg); }
.grid--layout-2 .grid__item:nth-child(6) { grid-area: 11 / 15 / 24 / 20; background-image: url(../img/17.jpg); }
.grid--layout-2 .grid__item:nth-child(7) { grid-area: 5 / 15 / 11 / 18; background-image: url(../img/19.jpg); }
.grid--layout-2 .grid__item:nth-child(8) { grid-area: 1 / 18 / 11 / 23; background-image: url(../img/21.jpg); }
.grid--layout-2 .grid__item:nth-child(9) { grid-area: 20 / 20 / 27 / 24; background-image: url(../img/23.jpg); }
.grid--layout-2 .grid__item:nth-child(10) { grid-area: 24 / 15 / 29 / 20; background-image: url(../img/2.jpg); }
.grid--layout-2 .grid__item:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/4.jpg); }
.grid--layout-2 .grid__item:nth-child(12) { grid-area: 11 / 20 / 20	/ 30; background-image: url(../img/6.jpg); }
.grid--layout-2 .grid__item:nth-child(13) { grid-area: 25 / 24 / 29 / 28; background-image: url(../img/8.jpg); }
.grid--layout-2 .grid__item--name { grid-area: 16 / 9 / 30 / 16; }
.grid--layout-2 .grid__item--title { grid-area: 1 / 27 / 11 / 29; }
.grid--layout-2 .grid__item--text { grid-area: 1 / 5 / 9 / 10; align-items: flex-end; text-align: right;}
.grid--layout-2 .grid__item--nav-prev { grid-area: 9 / 5 / 14 / 10; }
.grid--layout-2 .grid__item--nav-next { grid-area: 20 / 24 / 25 / 30; }

/* Layout 3 */
.grid--layout-3 .grid__item:first-child { grid-area: 6 / 1 / 14 / 5; background-image: url(../img/1.jpg); }
.grid--layout-3 .grid__item:nth-child(2) { grid-area: 3 / 5 / 14 / 10; background-image: url(../img/2.jpg); }
.grid--layout-3 .grid__item:nth-child(3) { grid-area: 14 / 1 / 21 / 5; background-image: url(../img/3.jpg); }
.grid--layout-3 .grid__item:nth-child(4) { grid-area: 19 / 10 / 28 / 20; background-image: url(../img/4.jpg); }
.grid--layout-3 .grid__item:nth-child(5) { grid-area: 1 / 10 / 11 / 18; background-image: url(../img/5.jpg); }
.grid--layout-3 .grid__item:nth-child(6) { grid-area: 11 / 10 / 19 / 15; background-image: url(../img/6.jpg); }
.grid--layout-3 .grid__item:nth-child(7) { grid-area: 11 / 15 / 19 / 20; background-image: url(../img/7.jpg); }
.grid--layout-3 .grid__item:nth-child(8) { grid-area: 1 / 18 / 6 / 23; background-image: url(../img/8.jpg); }
.grid--layout-3 .grid__item:nth-child(9) { grid-area: 20 / 20 / 27 / 24; background-image: url(../img/9.jpg); }
.grid--layout-3 .grid__item:nth-child(10) { grid-area: 20 / 28 / 25 / 30; background-image: url(../img/10.jpg); }
.grid--layout-3 .grid__item:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/11.jpg); }
.grid--layout-3 .grid__item:nth-child(12) { grid-area: 11 / 20 / 20	/ 30; background-image: url(../img/12.jpg); }
.grid--layout-3 .grid__item:nth-child(13) { grid-area: 20 / 24 / 26 / 28; background-image: url(../img/13.jpg); }
.grid--layout-3 .grid__item--name { grid-area: 15 / 16 / 30 / 23; }
.grid--layout-3 .grid__item--title { grid-area: 1 / 27 / 11 / 29; }
.grid--layout-3 .grid__item--text { grid-area: 19 / 5 / 30 / 10; text-align: right;}
.grid--layout-3 .grid__item--nav-prev { grid-area: 14 / 5 / 19 / 10; }
.grid--layout-3 .grid__item--nav-next { grid-area: 6 / 18 / 11 / 23; }

/* Demo themes */





.demo-3 div.grid__item:not(.grid__item--nav)::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #ffffff;
	mix-blend-mode: exclusion;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.demo-3 .grid:not(.grid--animating) div.grid__item:not(.grid__item--nav):hover::after {
	opacity: 1;
}

@media screen and (max-width: 60em) {

	main .grid {
		height: auto;
		top: auto !important;
		width: 100%;
		left: auto !important;
		padding: 0 2em;
		grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
		grid-auto-rows: auto !important;
		grid-auto-columns: auto !important;
		grid-gap: 1vw;
		margin: 0 0 5em;
	}

	.grid__item {
		min-height: 50px;
		grid-area: auto !important;
	}

	.grid__item br {
		content: '';
		display: none;
	}

	.grid__item--name,
	.grid__item--title,
	.grid__item--text {
		grid-column: 1 / -1 !important;
		justify-content: flex-start;
		min-height: 0;
		padding: 1vh 0;
		text-align: left !important;
	}	

	.grid__item--name {
		grid-row: 1 / -1 !important;
	}

	.grid .grid__item--title {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}
}







.revealer {
	position: absolute;
	width: calc(100% + 4px);
	height: calc(100% + 4px); /* Firefox and Safari gap hack */
	background: #fff;
	top: -2px;
	left: -2px;
	opacity: 0;
	pointer-events: none;
}

/* Direction control */
.revealer--right {
	transform-origin: 100% 50%;
}

.revealer--left {
	transform-origin: 0% 50%;
}

.revealer--top {
	transform-origin: 50% 0%;
}

.revealer--bottom {
	transform-origin: 50% 100%;
}

.revealer--showX,
.revealer--hideX,
.revealer--showY,
.revealer--hideY,
.revealer--visible {
	opacity: 1;
}

/* Hide from left/right */
.revealer--hideX {
	animation: hideX 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes hideX {
	from {
		transform: scale3d(0,1,1);
	}
	to {
		transform: scale3d(1,1,1);
	}
}

/* Show from left/right */
.revealer--showX {
	animation: showX 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes showX {
	to {
		opacity: 1;
		transform: scale3d(0,1,1);
	}
}

/* Hide from top/bottom */
.revealer--hideY {
	animation: hideY 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes hideY {
	from {
		transform: scale3d(1,0,1);
	}
	to {
		transform: scale3d(1,1,1);
	}
}

/* Show from top/bottom */
.revealer--showY {
	animation: showY 0.8s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes showY {
	to {
		opacity: 1;
		transform: scale3d(1,0,1);
	}
}