body { 
  background: rgb(245, 248, 254);
  background: linear-gradient(180deg, rgba(245, 248, 254, 1) 0%, rgba(245, 248, 254, 1) 12%, rgba(255, 255, 255, 1) 100%);  
  background: #f0f4f7;
  background: #fff;
  background-attachment: fixed; 
  font-family: Inter, sans-serif;
  font-size: 15px;
}

.bg-dark p{
  opacity: .55;  
}
.btn {
  border-width: 2px !important;
  font-weight: 600 !important;
}
.carousel {  
  border-radius: 16px;  
  box-shadow: 0 0 4px rgb(23 55 92 / 10%), 0 0 40px rgb(23 55 92 / 5%); 
}
.carousel img {  
  border-radius: 16px;  
}
 .carousel-inner { 
  overflow: visible;
}
.card {
 border: 0;
 box-shadow: 0 0 4px rgb(23 55 92 / 10%), 0 0 40px rgb(23 55 92 / 5%); 
 border-radius: 16px;
}
.rounded-3 { 
 border-radius: 10px !important;
}

@keyframes animation-vertical {
  0% {
      transform: translateY(0)
  }

  50% {
      transform: translateY(20px)
  }

  to {
      transform: translateY(0)
  }
}
 
@keyframes animation-vertical-reverse {
  0% {
      transform: translateY(20px)
  }

  50% {
      transform: translateY(0)
  }

  to {
      transform: translateY(20px)
  }
}
.h1, h1 {
  font-size: 2.5em;
}
h2, .h2 {
  font-size: 1.5rem;
}
h3, .h3 {
  font-size: 1.25rem;
}
h4, .h4 ,h5, .h5 ,h6, .h6 {
  font-size: 1.125rem;
}
.lead {
  font-size: 1.125rem;
  font-weight: 300;
}
.h1,.h2,.h3,.h4,.h5,.h6, h1, h2, h3, h4, h5, h6 {
  color: rgba(22,22,22,1); 
}
.bg-dark .h1,.bg-dark .h2,.bg-dark .h3,.bg-dark .h4,.bg-dark .h5,.bg-dark .h6, .bg-dark h1,.bg-dark  h2,.bg-dark  h3,.bg-dark  h4,.bg-dark  h5, .bg-dark h6 {
  color: rgba(255,255,255,1); 
}
.infobox {
  position: absolute;
  z-index: 100; 
  padding: 0;
  border-radius: 12px;    
  background: rgba(247,37,133,0.6);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: white;
  width: 50px;  
  height: 50px;  
  box-shadow: 0 0 4px rgb(23 55 92 / 23%), 0 0 40px rgb(23 55 92 / 12%);         
  text-align: center;
 } 
 .infobox a {
  font-size: 1.25em;
  line-height: 50px;
  margin-bottom: 0em;
  font-weight: bold;
  color: white;
  text-decoration: none;
  display: block;
 }
 .infobox img {
  max-width: 100% !important;
 }
 .infobox-1 {
  top: 20px;
  left: -20px;
  -webkit-animation: animation-vertical 12s ease-in-out infinite;
  background: rgba(247,37,133,0.8);
 }
 .infobox-2 {
  top: 100px;
  left: -20px;
  -webkit-animation: animation-vertical-reverse 11s ease-in-out infinite;
  background: rgba(181,22,158,0.8);
 }
 .infobox-3 {
  top: -20px; 
  left:  190px;
  -webkit-animation: animation-vertical-reverse 11s ease-in-out infinite;
  background: rgba(114,8,183,0.8);
 }
 .infobox-4 {
  top:  10px;
  right: -20px;
  -webkit-animation: animation-vertical 10s ease-in-out infinite;
  background: rgba(67,97,238,0.8);
 }
 .infobox-5 { 
  bottom: 0px;
  right: 170px;
  -webkit-animation: animation-vertical 12s ease-in-out infinite;
  background: rgba(72,149,239,0.8);
 }
 .infobox-6 {
  bottom: 10px;
  right: 110px;
  -webkit-animation: animation-vertical-reverse 13s ease-in-out infinite;
  background: rgba(76,201,240,0.8);
 }
 .infobox-7 {   
  bottom:  0px;
  right: 50px;
  -webkit-animation: animation-vertical 13s ease-in-out infinite;
  background: rgba(66,66,66,0.8);
 } 
 .infobox-8 {   
  top:  120px;
  right:  100px;
  -webkit-animation: animation-vertical 13s ease-in-out infinite;
  background: rgba(22,22,22,0.8);
 }
.features-container {
  padding-top: 320px !important;
  margin-top: -248px !important;
}
@media screen and (max-width: 992px) {
  .features-container {
    padding-top: 190px !important;
    margin-top: -140px !important;
  }
}
 .feature { 
  height: 36px;
  width: 36px;
  font-size: 1em;
  border-radius: 10px;    
  background: rgba(247,37,133,1);
  color: white;
  margin-bottom: 1em;
  font-weight: bold;
}
.highlight-alert {  
}
.features-container img{ 
  max-width: 100% !important;
  margin-bottom: 1em;
  border-radius: 16px;  
  box-shadow: 0 0 4px rgb(23 55 92 / 8%), 0 0 40px rgb(23 55 92 / 4%);  
}

.feature-2 {
  background: rgba(181,22,158,1);
}
.feature-3 {
  background: rgba(114,8,183,1);
}
.feature-4 {
  background: rgba(67,97,238,1);
}
.feature-5 {
  background: rgba(72,149,239,1);
}
.feature-6 {
  background: rgba(76,201,240,1);
}
.feature-7 {
  background: rgba(66,66,66,1);
}
.feature-8 { 
  background: rgba(247,37,133,1);
}  

.compatible { 
  padding: 0.75em 1.125em;
  border-radius: 12px;  
  background: #fff;
  color: #222;
  box-shadow: 0 0 4px rgb(23 55 92 / 8%), 0 0 40px rgb(23 55 92 / 4%);  
  width: auto;
  margin: 0em auto 3em;
  z-index: 200;
}
.bg-dark.compatible {     
  background: #111111 !important;
  color: #999 !important; 
}
.compatible img { 
  margin: 0 0.5em;
  height: 24px;
}

.owl-carousel .owl-item img {
  display: block;
  width: auto !important; 
  max-width: 100% !important; 
}

#mobileCarousel {
  max-width: 300px; 
  border: 12px solid #161616;
  border-radius: 30px;
  overflow: hidden;
  background:  #161616;
  margin-bottom: 2em;
  /*transform: scale(1.05) translateX(-30px) translateY(0) perspective(1000px) rotateY(-20deg) rotateX(5deg) rotate(2deg);*/
}
@media screen and (min-width:767px) {

  #mobileCarousel { 
    z-index: 300; 
    position: absolute;
    top: 50%;
    margin-top: -281px; 
    right: 100px; 
    margin-bottom: 0;
  }
}
#tabletCarousel {
  max-width: 844px;
  border: 12px solid #161616;
  background:  #161616;
} 
#tabletCarousel img {  
  border-radius: 12px;  
}

.square-round {
  width: 60px;
  height: 60px;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  position: absolute;
} 
.bg-light .square-round {
  width: 60px;
  height: 60px;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  position: absolute;
} 
.square-round::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  background: white;
  top:0;
  left:0; 
} 
.square-round.srtl {
  left: 0;
  bottom: -60px;
}
.square-round.srtr {
  right: 0;
  bottom: -60px;
}
.square-round.srbr {
  right: 0;
  top: -60px;
}
.square-round.srbl {
  left: 0;
  top: -60px;
} 
.square-round.srtl::before { 
  border-radius: 50% 0 0 0;
}
.square-round.srtr::before { 
  border-radius: 0 50% 0 0;
}
.square-round.srbr::before { 
  border-radius: 0 0 50% 0 ;
}
.square-round.srbl::before { 
  border-radius: 0 0 0 50%;
}

.item {
  transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out;
}
 
.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-radius: 12px;
}
.text-brand {
  color: #FA2379;
}
.btn-brand { 
  background-color: #FA2379;
  border-color: #FA2379;
  color: white;
}
.btn-brand:hover { 
  background-color: #FA2379;
  border-color: #FA2379;
  color: white;
}
.btn-outline-brand {  
  border-color: #FA2379;
  color: #FA2379;
}
.btn-outline-brand:hover {  
  background-color: #FA2379;
  color: white;
}
.owl-theme .owl-nav [class*=owl-] {
  color: #FA2379 !important;
  font-size: 44px !important;  
  line-height: 40px !important;
  padding: 0 !important;
  background: #fa23794f !important; 
  position: absolute;
  top: 50px;
  width: 50px;
  border-radius: 12px !important;
  height: 50px;
  text-align: center;
}
.owl-carousel .owl-nav button.owl-next { 
  right: -90px;
}
.owl-carousel .owl-nav button.owl-prev { 
  left: -90px;
}
.owl-theme .owl-nav .disabled {
  opacity: .25;
  cursor: default;
  filter: saturate(15%);
}
.header-round { 
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 0 0 24px 24px;
}

 .owl-carousel.owl-theme .owl-dots .owl-dot span {
  display: none;
}

.owl-carousel.owl-theme .owl-dots .owl-dot.active {
  background: rgba(247,37,133,1) !important;
  width: 32px;
  border-radius: 10px;
}

.owl-carousel.owl-theme .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  opacity: 1;
  margin: 20px 5px;
  background: rgba(114,8,183,1);
  transition: all .2s;
}
.owl-carousel .owl-dots .owl-dot.active {
  opacity: .7;
}
.owl-carousel .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: .15;
  border-radius: 50%;
  margin: 0 6px;
}
.navbar-light .navbar-toggler { 
  border: 0;
}

.text-primary.bg-primary {
  background: rgb(68 97 238 / 15%) !important;
}
.text-secondary.bg-secondary {
  background: rgb(110 119 127 / 15%) !important;
}

.modal-content { 
  border-radius: 1rem; 
}
.layout-link  { 
  padding: 1rem;
  background-color:  white;
  transition: all 0.25s ease-in-out;
  border-radius: 1em;  
  text-decoration: none; 
  color: #161616;
  font-weight: 500;
  font-size: 1rem;
}
.layout-link img { 
  border-radius: 0.6em;  
  margin-bottom: 10px;
}
.layout-link:hover  { 
  color: primary; 
  box-shadow: 0 0 24px rgb(23 55 92 / 10%), 0 0 60px rgb(23 55 92 / 5%);
}