/* ========================================================================================================= */
/* FONT */
/* ========================================================================================================= */
@font-face {
  font-family: 'RNS Camelia';
  src: url(./font/rns-camelia/RNSCamelia-Regular.otf);
    font-display: swap;
}
/* LIGHT */
@font-face {
  font-weight: 300;
  font-family: 'RNS Camelia';
  src: url(./font/rns-camelia/RNSCamelia-Light.otf);
    font-display: swap;
}
/* MEDIUM */
@font-face {
  font-weight: 500;
  font-family: 'RNS Camelia';
  src: url(./font/rns-camelia/RNSCamelia-Medium.otf);
    font-display: swap;
}
/* BOLD */
@font-face {
  font-weight: 700;
  font-family: 'RNS Camelia';
  src: url(./font/rns-camelia/RNSCamelia-Bold.otf);
    font-display: swap;
}
/* EXTRA BOLD */
@font-face {
  font-weight: 800;
  font-family: 'RNS Camelia';
  src: url(./font/rns-camelia/RNSCamelia-ExtraBold.otf);
    font-display: swap;
}
/* BLACK */
@font-face {
  font-weight: 900;
  font-family: 'RNS Camelia';
  src: url(./font/rns-camelia/RNSCamelia-Black.otf);
    font-display: swap;
}

/* ========================================================================================================= */
/* DEFAULT */
/* ========================================================================================================= */
body {
  font-family: 'RNS Camelia', sans-serif;
}

/* ========================================================================================================= */
/* HEADER */
/* ========================================================================================================= */
nav .sub-items {position: relative;}
nav .sub-items a {
  z-index: 9;
  position: relative;
}
nav .sub-items ul {
  top: 2rem;
  left: 0;
  right: 0;
  position: absolute;
  transition: all .3s;
  transform: translateY(-300%);
}
nav .sub-items:hover ul {
  transform: translateY(0);
}
nav .sub-items ul::before {
  content: '';
  top: -6rem;
  left: -1rem;
  z-index: -1;
  right: -1rem;
  bottom: -1rem;
  position: absolute;
  border-radius: 0 0 25px 25px;

  opacity: .2;
  background-color: #FFFFFF;
}
nav .sub-items ul::after {
  content: '';
  top: -6rem;
  left: -1rem;
  z-index: -1;
  right: -1rem;
  bottom: -1rem;
  position: absolute;
  border-radius: 0 0 25px 25px;

  backdrop-filter: blur(30px);
}

nav .languages {position: relative;}
nav .languages ul {
    top: 2rem;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: all .3s;
    transform: translateY(-100%);
}
nav .languages:hover ul {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================================================================= */
/* ANIMATE */
/* ========================================================================================================= */
.delay-05s {
  animation-delay: 0.5s;
}
.delay-15s {
  animation-delay: 1.5s;
}

/* ========================================================================================================= */
/* SLICK */
/* ========================================================================================================= */
.slick-dots {
  bottom: 0;
  padding: 2rem 0;
}
.slick-dotted {margin-bottom: 0 !important;}
.slick-dotted .slick-dots li {margin: 0 .2rem;}
.slick-dotted .slick-dots li.slick-active button::before {background-color: #FFF;}
.slick-dotted .slick-dots li button:before {
  opacity: 1;
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid #FFF;
}
.slick-arrows .arrow-next,
.slick-arrows .arrow-prev {
  width: 30px;
  height: 30px;
  outline: none;
  color: #4EBCF1;
  border-radius: 50%;
  transition: all .3s;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  border: 2px solid #4EBCF1;
  background-color: transparent;
}
.slick-arrows .arrow-next:hover,
.slick-arrows .arrow-prev:hover {
  color: white;
  background-color: #4EBCF1;
}

/* ========================================================================================================= */
/* HOME */
/* ========================================================================================================= */
/* BANNER */
#home #banner h2 b {font-weight: 900;}

.title-bold b {font-weight: 700;}
.title-extrabold b {font-weight: 800;}
.title-black b {font-weight: 900;}

/* ABOUT */
#home #about {position: relative;}
#home #about::before {
  content: '';
  top: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
  width: 40rem;
  height: 60rem;
  position: absolute;
  background-color: white;
}
#home #about::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 40rem;
  height: 60rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: right -20rem;
  background-image: url(../img/home/bg-1.svg);
}

#home #about .metrics,
#benefits #metrics .metrics {position: relative;}

#home #about .metrics::before,
#benefits #metrics .metrics::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -2rem;
  right: -2rem;
  bottom: -2rem;
  border-radius: 0 0 50px 50px;
  border: 3px solid #4EBCF1;
  border-top: none;
}

/* CLIENTS */
#home #clients {position: relative;}
#home #clients::before {
  content: '';
  top: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
  width: 60rem;
  height: 60rem;
  position: absolute;
  background-color: white;
}
#home #clients::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 60rem;
  height: 60rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: right 0rem;
  background-image: url(../img/home/bg-2.svg);
}
#home #clients .slick-list {padding-right: 10rem;}
#home #clients .slick .item {transition: all .4s;}
#home #clients .slick .item:not(.slick-current) {
  transform: scale(0.9);
  transform-origin: top;
}
#home #clients .slick-arrows {
  position: absolute;
  left: 45%;
  bottom: 0;
}

/* PARNTERS */
/*#home #partners .slick::before,*/
/*#home #partners .slick::after,*/
/*#about #partners .slick::before,*/
/*#about #partners .slick::after {*/
/*  content: '';*/
/*  top: 0;*/
/*  bottom: 0;*/
/*  width: 45%;*/
/*  z-index: 1;*/
/*  position: absolute;*/
/*  border-radius: 76px;*/
/*  background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFFC9 36%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;*/
/*}*/
/*#home #partners .slick::before,*/
/*#about #partners .slick::before {left: -3rem;}*/
/*#home #partners .slick::after,*/
/*#about #partners .slick::after {*/
/*  right: -3rem;*/
/*  transform: rotate(180deg);*/
/*}*/

/* COMMUNITY */
#home #community {position: relative;}
#home #community::before {
  content: '';
  top: -20rem;
  left: 0;
  z-index: -1;
  opacity: .6;
  width: 30rem;
  height: 70rem;
  position: absolute;
  background-color: white;
}
#home #community::after {
  content: '';
  top: -20rem;
  left: 0;
  z-index: -2;
  width: 30rem;
  height: 70rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: left 0rem;
  background-image: url(../img/home/bg-3.svg);
}

/* POSTS */
#home #posts {position: relative;}
#home #posts::before {
  content: '';
  top: 3rem;
  right: 0;
  z-index: -1;
  opacity: .6;
  width: 35rem;
  height: 50rem;
  position: absolute;
  background-color: white;
}
#home #posts::after {
  content: '';
  top: 3rem;
  right: 0;
  z-index: -2;
  width: 35rem;
  height: 50rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: right 0rem;
  background-image: url(../img/home/bg-4.svg);
}

/* CONTACT */
#contact .card {
  padding: 2rem 4rem;
  border-radius: 50px;
  background: transparent linear-gradient(90deg, #04B4B4 0%, #4EBCF1 100%) 0% 0% no-repeat padding-box;
}

/* ========================================================================================================= */
/* ABOUT */
/* ========================================================================================================= */
/* BANNER */
/*#about #banner {*/
/*  background-size: 30% 85%;*/
/*  background-position: top left;*/
/*  background-repeat: no-repeat;*/
/*  background-image: url(../img/about/banner.png);*/
/*}*/

/* ========================================================================================================= */
/* SOLUCTION */
/* ========================================================================================================= */
/* BANNER */
#soluction #banner {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center -6rem;
  background-image: url(../img/soluction/bg.png);
}

/* ITEMS */
#soluction #items .card {
  padding: 2rem;
  display: block;
  transition: all .2s;
  border-radius: 2.5rem;
  background-color: #F8F8F8;
}
#soluction #items .card h4 {color: #4EBCF1;}
#soluction #items .card p {color: #7A7A7A;}
#soluction #items .card:hover img {
  filter: brightness(0) invert(1);
}
#soluction #items .card:hover {
  background-color: #4EBCF1;
}
#soluction #items .card:hover h4,
#soluction #items .card:hover p {
  color: white;
}

/* ========================================================================================================= */
/* SOLUCTION DETAIL */
/* ========================================================================================================= */
/* BANNER */
/*#soluction-detail #banner {*/
/*  background-size: 30% 85%;*/
/*  background-position: top left;*/
/*  background-repeat: no-repeat;*/
/*  background-image: url(../img/about/banner.png);*/
/*}*/

/* PROCESS */
#soluction-detail #process .slick-list {padding-right: 10rem;}
#soluction-detail #process .slick-list::after {
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  z-index: 1;
  position: absolute;
  transform: rotate(180deg);
  border-radius: 0 76px 76px 0;
  background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFFC9 36%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
}
#soluction-detail #process .slick .item {transition: all .4s;}
#soluction-detail #process .slick .item:not(.slick-current) {
  transform: scaleY(.87);
  transform-origin: top;
}
#soluction-detail #process .slick-arrows {
  position: absolute;
  left: 30%;
  bottom: 0;
}

/* ========================================================================================================= */
/* PROJECTS */
/* ========================================================================================================= */
#projects #items {position: relative;}
#projects #items::before {
  content: '';
  top: -20rem;
  left: 0;
  z-index: -1;
  opacity: .6;
  width: 30rem;
  height: 70rem;
  position: absolute;
  background-color: white;
}
#projects #items::after {
  content: '';
  top: -20rem;
  left: 0;
  z-index: -2;
  width: 30rem;
  height: 70rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: left 0rem;
  background-image: url(../img/home/bg-3.svg);
}

/* POSTS */
#projects #form {position: relative;}
#projects #form::before {
  content: '';
  top: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
  width: 35rem;
  height: 50rem;
  position: absolute;
  background-color: white;
}
#projects #form::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 35rem;
  height: 50rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: right 0rem;
  background-image: url(../img/home/bg-4.svg);
}

/* ========================================================================================================= */
/* PARTNER DETAIL */
/* ========================================================================================================= */
/* INFO */
#partner-detail #info {position: relative;}
#partner-detail #info::before {
  content: '';
  top: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
  width: 60%;
  height: 75rem;
  position: absolute;
  background-color: white;
}
#partner-detail #info::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 60%;
  height: 70rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: left -20rem;
  background-image: url(../img/home/bg-1.svg);
}

/* METRICS */
#partner-detail #metrics {position: relative;}
#partner-detail #metrics::before {
  content: '';
  top: 10rem;
  left: 0;
  z-index: -1;
  opacity: .6;
  width: 65%;
  height: 135rem;
  position: absolute;
  background-color: white;
}
#partner-detail #metrics::after {
  content: '';
  top: 10rem;
  left: 0;
  z-index: -2;
  width: 65%;
  height: 135rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: left 0rem;
  background-image: url(../img/home/bg-3.svg);
}

/* ========================================================================================================= */
/* BLOG */
/* ========================================================================================================= */
/* FEATURED */
#blog #featured {position: relative;}
#blog #featured::before {
  content: '';
  top: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
  width: 60%;
  height: 75rem;
  position: absolute;
  background-color: white;
}
#blog #featured::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 60%;
  height: 70rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: left -30rem;
  background-image: url(../img/home/bg-1.svg);
}

/* ========================================================================================================= */
/* CONTACT */
/* ========================================================================================================= */
/* CONTACT */
#contact #contact {position: relative;}
#contact #contact::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 100%;
  height: 12rem;
  filter: blur(50px);
  position: absolute;
  background-size: 100%;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center -10rem;
  background-image: url(../img/home/bg-2.svg);
}

/* ========================================================================================================= */
/* CASE */
/* ========================================================================================================= */
/* FEATURED */
#case #featured {position: relative;}
#case #featured::after {
  content: '';
  top: 0;
  right: 0;
  z-index: -2;
  width: 100%;
  height: 150rem;
  filter: blur(50px);
  position: absolute;
  background-size: 140%;
  background-repeat: no-repeat;
  background-position: -20rem -20rem;
  background-image: url(../img/home/bg-2.svg);
}