header{
  font-family: 'Futura';
  position: fixed;
  width: 100%;
  z-index: 2;
  background: var(--bs-body-bg);
}

p{
  line-height: 2;
}

.btn-next:hover{
/*
  background-color: var(--theme-color);
  color: #fff;
  -webkit-box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
*/
  background-color: transparent;
  color: var(--orange-deep)!important;
  box-shadow: none;
  transform: none;
  padding: 5px;
}

.body-content{
  padding-top: 78px;
}

.logo{
  width: 248px;
}

.bg-lgrey{
  background-color: var(--bg-lgrey);
}

.banner-section{
  position: relative;
  border-radius: 80px;
  clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 100% 81%, 100% 0%);
  overflow: hidden;
}

.banner-section .left-content{
  padding: 6rem 0 6rem 6rem ;
}

.text-shadow{
  text-shadow: var(--text-shadow);
}

.header-text-shadow{
  text-shadow: var(--header-text-shadow);
}

.banner-section .right-content::after{
  content: "";
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 101px, #f7f7f7 21px);
  width: 100px;
  height: 100px;
  position: absolute;
  right: 12px;
  bottom: 80px;
  background: #f7f7f7;
}

.linear-rounded-green-bg {
  width: 760px;
  height: 760px;
  background: linear-gradient(60deg, #4AD7B1 0%, #A7E7FF 47%, #58B8FF 100%) 0% 0% no-repeat padding-box;
  border-radius: 50%;
  position: absolute;
  top: -69%;
  right: -25%;
  z-index: -1;
}

.linear-rounded-pink-bg {
  width: 600px;
  height: 600px;
  background: linear-gradient(131deg, #FDEBAC 0%, #FCA5F5 100%) 0% 0% no-repeat padding-box;
  border-radius: 50%;
  position: absolute;
  top: -43%;
  right: -18%;
  z-index: -1;
}

.diamond-pic{
  position: absolute;
  width: 630px;
  max-width: 100vw;
  right: 0;
  bottom: 2%;
}

.work-tgt-bg{
  background-image: url(../assets/img/img-contact.jpeg);
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}

.file-container{
  background-image: url(../assets/img/img-solution-box.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 280px;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.file-container:hover{
  -webkit-transform: translateY(-1.5rem) scale(1.03);
  transform: translateY(-1.5rem) scale(1.03);
}

.solutions .file-container{
  height: 350px;
  margin-bottom: 220px;
}

.solutions .file-container.last{
  margin-bottom: 350px;
}

.solutions .file-container figure{
  max-width: 50%;
  margin-left: 22%;
  height: 100%;
}

.solutions .file-container p{
  max-width: 68%;
  margin-left: 16%;
}

.contact-icon{
  height: 20px;
  width: 20px;
}

.empty{
  width: 75%;
  height: 0;
  padding-top: 80%;
}

.floating { 
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

ol{
  list-style-type:none;
}

.circle{
  width: 80px;
  height: 80px;
  background-color: #E3B2B2;
  margin-bottom: 2rem;
}

@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 10px); }
  100%   { transform: translate(0, -0px); }   
}


@media screen and (max-width: 991px) {
  .banner-section .left-content{
    padding: 3rem;
  }

  .banner-section{
    height: 500px;
    clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 100% 90%, 100% 0%);
  }

  .banner-section .right-content::after{
    content: unset;
  }

  .diamond-pic{
    width: unset;
    right: 50%;
    bottom: 2%;
    transform: translate(50%, 0%);
  }

  .nav-item{
    border-top: 1px solid;
  }

  .solutions .file-container p {
    max-width: 85%;
    margin-left: 7%;
  }
}

@media screen and (max-width: 768px) {
  .logo{
    width: 180px;
  }

  .body-content{
    padding-top: 95px;
  }

  .linear-rounded-green-bg {
    width: 500px;
  }

  .linear-rounded-pink-bg {
    width: 380px;
    height: 560px;
  }

  .diamond-pic{
    width: unset;
  }

  .file-container{
    height: 260px;
  }

  .solutions .file-container p {
    max-width: 55%;
    margin-left: 22%;
  }
}

@media screen and (max-width: 500px) {
  .banner-section{
    height: 700px;
  }

  .diamond-pic{
    width: 90vw;
  }

  .solutions .file-container p {
    max-width: 75%;
    margin-left: 13%;
  }
}

@media screen and (max-width: 400px) {
  .solutions .file-container p {
    max-width: 80%;
    margin-left: 11%;
    line-height: 1.7;
  }

  .solutions .file-container figure{
    max-width: 60%;
    margin-left: 15%;
  }
}