/** HERO **/
.hero-section.container-fluid{
  background: #030d0a ;
}

.hero-section .hero-section-top.container{
  z-index: 2;
  position: relative;
  height: calc(100vh - 320px);
  margin-top: 100px;
}

.particle-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Multiple layers = more randomness */
  background:
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.4) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px);

  background-size:
    120px 120px,
    200px 200px,
    300px 300px,
    450px 450px;

  background-position:
    10% 20%,
    30% 70%,
    80% 40%,
    50% 90%;

  animation: drift 60s linear infinite;
}

@keyframes drift {
  0% {
    background-position:
      10% 20%,
      30% 70%,
      80% 40%,
      50% 90%;
  }
  100% {
    background-position:
      90% -120%,
      -50% -80%,
      140% -100%,
      -100% -140%;
  }
}

.bg-light-img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  opacity: 0.5;
}

.bg-pixel-left{
  position: absolute;
  bottom: 0;
  top:0;
  left: 0;
  z-index: 1;
}

.bg-pixel-right{
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 1;
}

.headline-div h6{
  border-color:#019fa9 !important ;
  color: #019fa9;
}

.buttons-div .btn.btn-outline-light{
  padding: 0.8em 2em;
  background: transparent;
  font-weight: 500 ;
  position: relative;
  overflow: hidden;
}

.hero-section .hero-section-top .buttons-div .btn.btn-outline-light:first-child{
  border-color:#019fa9 !important;
  background: #019fa9;
}

.hero-section .hero-section-top .buttons-div .btn:first-child.btn-outline-light:hover{color: #fff}

.buttons-div .btn.btn-outline-light span{
  position: relative;
  z-index: 2;
}

.buttons-div .btn.btn-outline-light:after{
  content: "";
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
  transition: all 1s ease;
  height: 0;
}

.hero-section .hero-section-top .buttons-div .btn:first-child.btn-outline-light:after{
  content: "";
  background: #030d0a;
}

.buttons-div .btn.btn-outline-light:hover:after{
  height: 100%;
  transition: all 0.5s ease;
}

.ups-content{
  position: relative;
  z-index: 2;
}

.flip-card {
  background-color: transparent;
  perspective: 1000px;
  height: 180px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  cursor: pointer;
}

.flip-card-back {
  background: #000;
  border:1px solid #019fa9;
  border-radius:1.5em; 
  color: #fff;
  transform: rotateY(180deg);
}

.flip-card-front span img{
  width: 70px;
}

@media only screen and (max-width: 1199px) {
  .hero-section .hero-section-top.container .row .col-md-12 .headline-div .col-md-7{
    flex: 0 0 auto;
    width: 75%;
  }
}

@media only screen and (max-width: 1024px) {
  .hero-section .hero-section-top.container{height: auto}
}

@media only screen and (max-width: 991px) {

  .ups-content .flip-card{height: 230px}

  .ups-content .flip-card .flip-card-front{text-align: center;}

  .ups-content .flip-card-front span img {width: 50px;}
}

@media only screen and (max-width: 767px) {
  .ups-content .row .col-sm-4{
    flex: 0 0 auto;
    width: 50%;
  }
  
  .ups-content .row .col-sm-4:nth-child(3){
    flex: 0 0 auto;
    width: 100%;
  }

  .ups-content .flip-card{height: 180px}
}

@media only screen and (max-width: 545px) {
  .ups-content .row .col-sm-4{
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 3px;
  }

  .ups-content .flip-card{
    height: 130px;
  }

  .ups-content .flip-card-front .flex-column{
    flex-direction: row !important;
  }

  .ups-content .flip-card .flip-card-front{
    border: 1px solid #019fa9;
    border-radius: 1.5em;
  }
}

@media only screen and (max-width: 455px) {
  .hero-section .hero-section-top .headline-div .fs-5{ font-size:1.1em !important;}

  .hero-section .hero-section-top .headline-div h6{font-size: 0.8em}

  .hero-section .hero-section-top .buttons-div{flex-direction: column;}

  .ups-content .flip-card:hover .flip-card-inner {transform:none;}

  .ups-content .flip-card {height: 80px}

  .ups-content .flip-card .flip-card-front {
    border: 0;
    text-align: left;
  }

  .ups-content .flip-card .flip-card-front span{
    border: 1px solid #019fa9;
    padding: 10px;
    border-radius: 1em;
  }

  .ups-content .flip-card .flip-card-front h6{max-width: 60%;}

  .hero-section .bg-light-img.img-fluid{
    height: 100vh;
    object-fit: cover;
    object-position: top center;
  }

}

/** HOME ABOUT **/
.about-content.container-fluid{
  background: #030D0A;
  background: linear-gradient(45deg, rgba(3, 13, 10, 1) 0%, rgba(2, 85, 89, 1) 50%, rgba(1, 159, 169, 1) 100%);
}
.content-img{
  height: 500px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease, transform 0.4s ease;
}

.content-img::before{
  content: '';
  width: 69%;
  height: 82%;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translateX(20px) translateY(-10px);
  transform: translateX(20px) translateY(-10px);
  background-image: url(/static/img/DBM/dot-pattern1.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.2;
  transition: all 0.4s ease, transform 0.4s ease;
}

.content-img:after{
  content: '';
  width: 200px;
  height: 200px;
  border-bottom-left-radius:1.5rem;
  border-left:2px solid #019fa9;
  border-bottom:2px solid #019fa9;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translateX(-20px) translateY(20px);
  transform: translateX(-20px) translateY(20px);
  transition: all 0.4s ease, transform 0.4s ease;
}

.about-animation:hover .content-img{
  padding-left: 2em !important;
  padding-bottom: 2em !important;
  transition: all 0.4s ease, transform 0.4s ease;
}

.about-animation:hover .content-img:after{
  width: 90%;
  height: 90%;
  -webkit-transform: translateX(-21px) translateY(20px);
  transform: translateX(-21px) translateY(20px);
  transition: all 0.4s ease, transform 0.4s ease;
}

.about-animation:hover .content-img img{
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.content-img img{
  object-fit: cover;
  object-position: center;
  height: 100%;
  position: relative;
  transition: all 0.4s ease, transform 0.4s ease;
}
.content-img .badge-placeholder{
  bottom: 60px;
  left: 3px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.content-img .badge{
  width: fit-content;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.about-animation:hover .content-img .badge {
  opacity: 1;
  transform: translateY(0);
}

.about-animation:hover .content-img .badge:nth-child(1) { transition-delay: 0s; }
.about-animation:hover .content-img .badge:nth-child(2) { transition-delay: 0.15s; }
.about-animation:hover .content-img .badge:nth-child(3) { transition-delay: 0.25s; }

@media only screen and (max-width: 991px) {
  .about-content.container-fluid{
    overflow-x: hidden;
  }

  .content-img{
    padding: 0 !important;
    height: 450px;
    display: flex;
    flex-direction: column;
  }

  .content-img .badge-placeholder{
    position: initial !important;
    order: 1;
  }

  .content-img .badge{opacity: 1;}

  .content-img .badge-placeholder .badge h6{
    width: 100%;
    text-wrap:auto;
    text-align: left;
  }

  .content-img::before{
    -webkit-transform: translateX(64px) translateY(-50px);
    transform: translateX(64px) translateY(-50px);
  }

  .content-img:after{
    -webkit-transform: translateX(-22px) translateY(30px);
    transform: translateX(-22px) translateY(30px);
  }
}

@media only screen and (max-width: 768px) {
  .about-content.container-fluid .col-md-6{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    flex: 0 0 auto;
    width: 100%;
  }

  .about-content.container-fluid .col-md-6:nth-child(2){
    margin-bottom: 3rem !important;
    margin-top: 3rem !important;
  }

  .content-img{height: auto;}

  .content-img .badge-placeholder{margin-top: 2rem;}

  .content-img:after{
   display: none;
  }
}

@media only screen and (max-width: 545px) {
  .about-content.container-fluid .row{margin: 0;}

  .content-img:after{display: none;}

  .content-img::before{
    width: 49%;
    height: 30%;
    -webkit-transform: translateX(-55px) translateY(-70px);
    transform: translateX(-55px) translateY(-70px);
  }

  .content-img .badge {width: 100%;}

  .about-content.container-fluid .col-md-6:nth-child(2){margin-bottom: 1rem !important;}
}

/** HOME SERVICES **/
.services-section-top.container-fluid{
  background: #019AA4;
  background: linear-gradient(90deg,rgba(1, 154, 164, 1) 0%, rgba(1, 154, 164, 1) 40%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%);
}

.services-section-top .col-left{
  margin: 2em auto;
}

.services-section-top .col-left .headline-div{background: #019AA4;}

.services-section-top .col-left .headline-div h6 {
    border-color: #030d0a !important;
    color: #030d0a;
}

.services-section-top .col-left::before{
  content: '';
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 30%;
  background-image: url(/static/img/DBM/dot-pattern1.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.2;
  animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.services-section-top .col-left:after{
  content: '';
  width: 80px;
  height: 80px;
  border-bottom-left-radius:1.5rem;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.3;
  -webkit-transform: translateX(-30px) translateY(30px);
  transform: translateX(-30px) translateY(30px);
  transition: all 0.4s ease, transform 0.4s ease;
}

.service-animation.services-section-top:hover .col-left:after{
  width: 100%;
  height: 124%;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .card{
  border: 0;
  border-radius: 1.5em;
  padding: 1.5em;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.4s ease, transform 0.4s ease;
  min-height: 268px;
}

.services-section-boxes .card .card-subtitle,
.services-section-boxes .card .card-body-btn {display: none;}

.services-section-boxes .card .card-title{
  font-size: 1.1em;
  font-weight: 500;
}

.services-section-boxes .col{
  min-width: 25%;
  margin-bottom: 1em;
  z-index: 1;
}

.services-section-boxes .card .card-body-image{
  width: 50px;
  height: 50px;
  border-radius: 1em;
  padding: 0.8em;
  margin-bottom: 1.5em;
}

.services-section-boxes .col:nth-child(1) .card .card-body-image{
  background: #dbeafe;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(2) .card .card-body-image{
  background: #f3e8ff;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(3) .card .card-body-image{
  background: #dbfce7;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(4) .card .card-body-image{
  background: #ffedd4;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(5) .card .card-body-image{
  background: #fce7f3;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(6) .card .card-body-image{
  background: #fef9c2;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(7) .card .card-body-image{
  background: #cefafe;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .col:nth-child(8) .card .card-body-image{
  background: #ffe2e2;
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .card .card-body-image .card-image{
    width: 100%;
    height: 25px;
    overflow: hidden;
    display: block;
}

.services-section-boxes .card .card-body-image img{
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.services-section-boxes .col:nth-child(1) .card:hover .card-body-image{
  background: #4164ae;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(2) .card:hover .card-body-image{
  background: #9810fa;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(3) .card:hover .card-body-image{
  background: #00a63e;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(4) .card:hover .card-body-image{
  background: #f54900;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(5) .card:hover .card-body-image{
  background: #e60076;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(6) .card:hover .card-body-image{
  background: #ce8729;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(7) .card:hover .card-body-image{
  background: #0092b8;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.services-section-boxes .col:nth-child(8) .card:hover .card-body-image{
  background: #e51e25;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}


.services-section-boxes .col .card:hover .card-body-image .card-image img{
  transition: transform 0.4s ease;
  transform: translateY(-25px);
}

.services-section-boxes .col .card:hover{
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease, transform 0.4s ease;
}

.services-section-boxes .serv-pat{
  content: "";
  width: 50%;
  height: 200px;
  position: absolute;
  top: 40%;
  right:0;
  background-image: url(/static/img/DBM/dot-pattern.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.1;
  animation: floatUpDown 4s ease-in-out infinite;
}

@media only screen and (max-width: 1366px) {
  .services-section-top.container-fluid {
    background: linear-gradient(90deg, rgba(1, 154, 164, 1) 0%, rgba(1, 154, 164, 1) 35%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 100%);
  }
}

@media only screen and (max-width: 1199px) {
  .services-section-boxes .col{min-width: 26%;}
}

@media only screen and (max-width: 1024px) {
  .services-section-top.container-fluid {
      background: #fff;
  }

  .services-section-top.container-fluid .row .col-left.col-md-5{
    flex: 0 0 auto;
    width: 100%;
  }

  .services-section-top.container-fluid .row .col-right.col-md-7{
    flex: 0 0 auto;
    width: 100%;
    padding-left: 1rem !important;
  }

  .services-section-top .col-left{margin-top: 0;}

  .services-section-top .col-left .headline-div{
    padding: 2em !important;
  }

  .services-section-top .col-left:after{display: none;}
}

@media only screen and (max-width: 768px) {
  .services-section-boxes .col {
      min-width: 50%;
  }
}

@media only screen and (max-width: 545px) {
  .services-section-top.container-fluid .row,
  .services-section-boxes.container-fluid .row {
      margin: 0 ;
  }

  .services-section-boxes .col {min-width: 100%;}

  .services-section-boxes .card{min-height:  auto;}
}

/** HOME HOW TO **/
.how-to-section.container-fluid{
  background: #F8F9FA;
  background: linear-gradient(90deg,rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 1) 65%, rgba(12, 158, 167, 1) 65%, rgba(1, 154, 164, 1) 100%);
}

.how-to-section .col-left{
  margin: 2em auto;
}

.how-to-section .col-left .headline-div{background: #019aa4;}

.how-to-section .col-left .headline-div h6 {
    border-color: #030d0a !important;
    color: #030d0a;
}

.how-to-section .col-left::before{
  content: '';
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 30%;
  background-image: url(/static/img/DBM/dot-pattern1.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.2;
  animation: floatUpDown 4s ease-in-out infinite;
}

.how-to-section .col-left:after{
  content: '';
  width: 80px;
  height: 80px;
  border-bottom-right-radius:1.5rem;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.3;
  -webkit-transform: translateX(30px) translateY(30px);
  transform: translateX(30px) translateY(30px);
  transition: all 0.4s ease, transform 0.4s ease;
}

.animation-how-to.how-to-section:hover .col-left:after{
  width: 100%;
  height: 124%;
  transition: all 0.4s ease, transform 0.4s ease;
}

.how-to-section .col-right .row{
  justify-content: center;
}

.how-to-section .col-right .row .card{
  border: 0;
  border-radius: 1.5em;
  background:#fff;
  padding: 1.5em;
  position: relative;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.4s ease, transform 0.4s ease;
}

.how-to-section .col-right .row .card:hover{
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease, transform 0.4s ease;
}

.how-to-section .col-right .row .card .card-body-btn{display: none;}

.how-to-section .col-right .row .card .card-subtitle{
  width: 30px;
  height: 30px;
  border-radius: 0.375em;
  background: #030d0a;
  color: #fff;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom:-15px;
  right:0;
  left: 0;
  margin: 0 auto;
}

.how-to-section .col-right .row .card .card-title{
  font-size: 1.1em;
  font-weight: 500;
}

.how-to-section .card .card-body-image{
  width: 50px;
  height: 50px;
  border-radius: 1em;
  padding: 0.8em;
  margin-bottom: 1.5em;
  background: #019aa4;
}

.how-to-section .card .card-body-image .card-image{
  width: 100%;
  height: 25px;
  overflow: hidden;
  display: block;
}

.how-to-section .card .card-body-image img{
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.how-to-section .col:nth-child(1) .card .card-body-image{
  background: #cefafe;
  transition: all 0.4s ease, transform 0.4s ease;
}

.how-to-section .col:nth-child(2) .card .card-body-image{
  background: #fef9c2;
  transition: all 0.4s ease, transform 0.4s ease;
}

.how-to-section .col:nth-child(3) .card .card-body-image{
  background: #dbfce7;
  transition: all 0.4s ease, transform 0.4s ease;
}

.how-to-section  .col:nth-child(1) .card:hover .card-body-image{
  background: #0092b8;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.how-to-section  .col:nth-child(2) .card:hover .card-body-image{
  background: #ce8729;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.how-to-section  .col:nth-child(3) .card:hover .card-body-image{
  background: #00a63e;
  transition: all 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.how-to-section  .col .card:hover .card-body-image .card-image img{
  transition: transform 0.4s ease;
  transform: translateY(-25px);
}

@media only screen and (max-width: 1366px) {
  .how-to-section.container-fluid {
    background: linear-gradient(90deg, rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 1) 70%, rgba(12, 158, 167, 1) 70%, rgba(1, 154, 164, 1) 100%);
  }
}

@media only screen and (max-width: 1199px) {
  .how-to-section.container-fluid {
    background: #F8F9FA;
  }

  .how-to-section.container-fluid .container .row .col-md-8{
    flex: 0 0 auto;
    width: 100%;
    order:1;
    padding-right: 1rem !important;
  }

  .how-to-section.container-fluid .container .row .col-md-4{
    flex: 0 0 auto;
    width:100%;
    order: 0;
  }

  .how-to-section .col-left .headline-div{padding: 2em !important;}

  .how-to-section .col-left{margin-top: 0;}

  .how-to-section .col-left::before{
    left: initial;
    right: 110px;
  }

  .how-to-section .col-left:after{display: none;}
}

@media only screen and (max-width: 736px) {
  .how-to-section .col-right .col {
    width: 100%;
    min-width: 100%;
  }

  .how-to-section .col-right .col:nth-child(2){
    margin: 1.5em auto;
  }
}

/** HOME FAQ **/
.faq-section.container-fluid{
  background: #019AA4;
  background: linear-gradient(-20deg,rgba(1, 154, 164, 1) 0%, rgba(3, 42, 41, 1) 100%);
}

.faq-section.container-fluid .container{
  z-index: 5;
}

.faq-section.container-fluid .container::before{
  content:"";
  width: 200px;
  height: 200px;
  position: absolute;
  top: 30%;
  left:10%;
  background-image: url(/static/img/DBM/dot-pattern1.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.1;
  animation: floatUpDown 4s ease-in-out infinite;
} 

.faq-section.container-fluid .accordion-item{
  background: transparent;
  border-color: #0199a496;
}

.faq-section.container-fluid .accordion-item:first-child{border-top: 0;}

.faq-section.container-fluid .accordion-item:last-child{border-bottom: 0;}

.faq-section.container-fluid .accordion-button::after{
  content: '↓';
  background-image: none;
  color: #fff;
}

.faq-section.container-fluid .accordion-button:not(.collapsed){
  color:#fff;
  background-color: transparent;
  box-shadow:none
}

.faq-section.container-fluid .accordion-body{color: #fff;}

.faq-section.container-fluid .accordion-button{
  color:#019AA4;
  background-color: transparent;
  box-shadow:none;
  font-weight: 600;
  transition: all 0.4s ease, transform 0.4s ease;
}

.faq-section.container-fluid .accordion-button:hover{
  color: #fff;
  transition: all 0.4s ease, transform 0.4s ease;
}

@media only screen and (max-width: 736px) {
  .faq-section.container-fluid .col-md-8{
    padding-left: 0.9rem !important;
    margin-top: 1.5em;
  }
}

@media only screen and (max-width: 545px) {
  .faq-section.container-fluid .row {margin: 0 ;}
}

/** CUSTOM PLATFORM **/
.custom-platform .row{
  align-items: center;
}

.custom-platform .content-div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

.custom-platform .content-img{
  padding-right: initial !important;
  padding-left: 1.5rem !important;
  height: 620px;
}
.custom-platform .content-img::before{
  content: '';
  background-image: url(/static/img/DBM/dot-pattern.png);
  left: 0;
  right: inherit;
  -webkit-transform: translateX(-10px) translateY(-10px);
  transform: translateX(-10px) translateY(-10px);
}

.custom-platform .content-img:after{
  border-bottom-left-radius:0;
  border-bottom-right-radius: 1.5rem;
  border-left:0;
  border-right:2px solid #030d0a41;
  border-bottom:2px solid #030d0a41;
  right: 0;
  left: initial;
  -webkit-transform: translateX(22px) translateY(20px);
  transform: translateX(22px) translateY(20px);
}

.custom-platform .buttons-div .btn.btn-outline-light {
  background: transparent;
  font-weight: 500;
  color: #030d0a; 
  border-color: #030d0a !important;
}

.custom-platform .buttons-div .btn.btn-outline-light:hover{
  color: #fff;
  border-color: #019aa4 !important;
}

.custom-platform .buttons-div .btn.btn-outline-light:after {
    content: "";
    background: #019aa4;
}

.animation-custom-platform:hover .content-img .badge {
    opacity: 1;
    transform: translateY(0);
}

.animation-custom-platform:hover .content-img img {
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.animation-custom-platform:hover .content-img:after{
  width: 90%;
  height: 90%;
  border-color: #019aa4;
}

.animation-custom-platform:hover  .content-img {
  padding-left: 2.5em !important;
  transition: all 0.4s ease, transform 0.4s ease;
}

.animation-custom-platform:hover .content-img .badge:nth-child(1) {transition-delay: 0s;}
.animation-custom-platform:hover .content-img .badge:nth-child(2) {transition-delay: 0.08s;}
.animation-custom-platform:hover .content-img .badge:nth-child(3) {transition-delay: 0.16s;}
.animation-custom-platform:hover .content-img .badge:nth-child(4) {transition-delay: 0.25s;}
.animation-custom-platform:hover .content-img .badge:nth-child(5) {transition-delay: 0.35s;}
.animation-custom-platform:hover .content-img .badge:nth-child(6) {transition-delay: 0.46s;}
.animation-custom-platform:hover .content-img .badge:nth-child(7) {transition-delay: 0.58s;}
.animation-custom-platform:hover .content-img .badge:nth-child(8) {transition-delay: 0.71s;}
.animation-custom-platform:hover .content-img .badge:nth-child(9) {transition-delay: 0.85s;}
.animation-custom-platform:hover .content-img .badge:nth-child(10) {transition-delay: 1s;}

@media only screen and (max-width: 991px) {
  .custom-platform.container-fluid .row .col-md-6:nth-child(1){
    flex: 0 0 auto;
    width: 100%;
    padding-right: 1rem !important;
    order: 1;
  }

  .custom-platform.container-fluid .row .col-md-6:nth-child(2){
    flex: 0 0 auto;
    width: 100%;
    padding-left: 1rem !important;
    order: 0;
  }

  .badge-placeholder.position-absolute{
    position: initial !important;
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: start;
  }

  .custom-platform .content-img{
    height: auto;
    padding: initial !important;
  }

  .custom-platform .content-img:after{display: none;}

  .custom-platform .content-img::before {
    -webkit-transform: translateX(-35px) translateY(-51px);
    transform: translateX(-35px) translateY(51px);
    width: 300px;
    height: 80%;
  }
}

@media only screen and (max-width: 545px) {
  .custom-platform.container-fluid .row {margin: 0 ;}

  .custom-platform.container-fluid .row .col-md-6:nth-child(2){margin-top: 0 !important;}
}