/* Landing
******************************************************************************* */
/* (C) */
.section-py {
  padding-block: 6.25rem;
  padding-inline: 0;
}
@media (max-width: 1199.98px) {
  .section-py {
    padding-block: 5rem;
    padding-inline: 0;
  }
}
@media (max-width: 767.98px) {
  .section-py {
    padding-block: 3rem;
    padding-inline: 0;
  }
}

/* Hero */
#hero-animation {
  position: relative;
  overflow: hidden;
}

.landing-hero {
  border-radius: 0 0 3.5rem 3.5rem;
  background: var(--bs-hero-bg);
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.landing-hero::after {
  position: absolute;
  z-index: -1;
  background-color: var(--bs-paper-bg);
  block-size: 100%;
  content: "";
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-hero .hero-title {
  animation: shine 2s ease-in-out infinite alternate, fadeInUp 1s ease-out;
  background: white;
  background-clip: text;
  background-size: 200% auto;
  color: var(--bs-heading-color);
  font-size: calc(1.3875rem + 1.65vw);
  line-height: 1.3;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  margin: 0;
  max-width: 1200px;
}

@media (min-width: 1200px) {
  .landing-hero .hero-title {
    font-size: 3.5rem;
  }
}

/* Bouton Hero */
.btn-hero {
  margin-top: 30px;
  padding: 10px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 1s ease-out 0.3s backwards;
}

.btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(220, 38, 38, 0.6);
}

.btn-danger.btn-hero {
  background-color: #dc2626;
  border-color: #dc2626;
}

.btn-danger.btn-hero:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

.btn-hero .ti {
  transition: transform 0.3s ease;
}

.btn-hero:hover .ti {
  transform: translateX(5px);
}

    /* Bulles flottantes */
    .floating-bubbles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 2;
    }

    .bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 2px solid rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(5px);
        animation: float-up 15s infinite ease-in-out;
        opacity: 0;
    }

    /* Positions et tailles des bulles */
.bubble:nth-child(1) {
    width: 40px;
    height: 40px;
    left: 8%;
    animation-delay: 0s;
    animation-duration: 14s;
}
.bubble:nth-child(2) {
    width: 30px;
    height: 30px;
    left: 18%;
    animation-delay: 3s;
    animation-duration: 11s;
}
.bubble:nth-child(3) {
    width: 50px;
    height: 50px;
    left: 30%;
    animation-delay: 1s;
    animation-duration: 16s;
}
.bubble:nth-child(4) {
    width: 35px;
    height: 35px;
    left: 45%;
    animation-delay: 5s;
    animation-duration: 12s;
}
.bubble:nth-child(5) {
    width: 45px;
    height: 45px;
    left: 55%;
    animation-delay: 2s;
    animation-duration: 15s;
}
.bubble:nth-child(6) {
    width: 32px;
    height: 32px;
    left: 65%;
    animation-delay: 4s;
    animation-duration: 10s;
}
.bubble:nth-child(7) {
    width: 48px;
    height: 48px;
    left: 75%;
    animation-delay: 6s;
    animation-duration: 13s;
}
.bubble:nth-child(8) {
    width: 38px;
    height: 38px;
    left: 85%;
    animation-delay: 1.5s;
    animation-duration: 11s;
}
.bubble:nth-child(9) {
    width: 42px;
    height: 42px;
    left: 12%;
    animation-delay: 7s;
    animation-duration: 17s;
}
.bubble:nth-child(10) {
    width: 36px;
    height: 36px;
    left: 92%;
    animation-delay: 3.5s;
    animation-duration: 14s;
}

    /* Animation flottement */
    @keyframes float-up {
        0% {
            bottom: -150px;
            transform: translateX(0) rotate(0deg) scale(0);
            opacity: 0;
        }
        5% {
            opacity: 0.6;
            transform: scale(1);
        }
        50% {
            transform: translateX(30px) rotate(180deg) scale(1.1);
        }
        95% {
            opacity: 0.6;
        }
        100% {
            bottom: 100vh;
            transform: translateX(-30px) rotate(360deg) scale(0.8);
            opacity: 0;
        }
    }

    /* Effet shine */
    .bubble.shine {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
        animation: float-up 15s infinite ease-in-out, shine-effect 3s infinite ease-in-out;
    }

    @keyframes shine-effect {
        0%, 100% {
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.15);
        }
        50% {
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
            border-color: rgba(255, 255, 255, 0.4);
        }
    }

    /* Effet pulse */
    .bubble.pulse {
        animation: float-up 15s infinite ease-in-out, pulse-effect 4s infinite ease-in-out;
    }

    @keyframes pulse-effect {
        0%, 100% {
            transform: scale(1);
            opacity: 0.6;
        }
        50% {
            transform: scale(1.3);
            opacity: 0.8;
        }
    }

    /* Animation fade in */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Responsive */
@media (max-width: 992px) {
  .landing-hero .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .landing-hero .hero-title {
    font-size: 1.8rem;
  }
  .btn-hero {
    padding: 12px 30px;
    font-size: 1rem;
    margin-top: 20px;
  }
  .bubble:nth-child(n+7) {
    display: none;
  }
}

@media (max-width: 480px) {
  .landing-hero .hero-title {
    font-size: 1.4rem;
  }
  .btn-hero {
    padding: 10px 25px;
    font-size: 0.9rem;
  }
}

/* Useful features */
.landing-features .features-icon-wrapper .features-icon-box .features-icon-description {
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 19.25rem;
}

/* Real customers reviews */
.landing-reviews {
  border-top-left-radius: 3.75rem;
  border-top-right-radius: 3.75rem;
}
.landing-reviews .swiper-reviews-carousel .swiper-button-prev,
.landing-reviews .swiper-reviews-carousel .swiper-button-next {
  display: none;
}
.landing-reviews .swiper-reviews-carousel .swiper-slide {
  padding: 0.8125rem;
  block-size: auto;
}
.landing-reviews .swiper-reviews-carousel .client-logo {
  block-size: 1.375rem;
  object-fit: contain;
}
.landing-reviews .swiper-logo-carousel {
  padding-block-end: 6.25rem;
}
.landing-reviews .swiper-logo-carousel .swiper {
  max-inline-size: 45rem;
}
.landing-reviews .swiper-logo-carousel .swiper .swiper-slide {
  display: flex;
  justify-content: center;
}
.landing-reviews .swiper-logo-carousel .swiper .client-logo {
  max-block-size: 2.5rem;
  max-inline-size: 95%;
  object-fit: contain;
}

/* our great team */
.landing-team .card,
.landing-team .card .team-image-box {
  border-start-end-radius: 1.25rem;
  border-start-start-radius: 5.625rem;
}
.landing-team .card .card-body {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.landing-team .team-image-box {
  block-size: 11.5625rem;
}
.landing-team .team-image-box .card-img-position {
  block-size: 15rem;
  max-inline-size: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}
:dir(rtl) .landing-team .team-image-box .card-img-position {
  transform: translateX(50%) !important;
}
@media (max-width: 991.98px) {
  .landing-team .team-image-box .card-img-position {
    block-size: 13rem;
  }
}
@media (max-width: 575.98px) {
  .landing-team .team-image-box {
    block-size: 11rem;
  }
}

/* Pricing plans */
.landing-pricing {
  border-radius: 3.75rem;
}
.landing-pricing .pricing-plans-item {
  inset-block-end: -0.5rem;
  inset-inline-end: -56%;
}
@media (max-width: 767.98px) {
  .landing-pricing .pricing-plans-item {
    inset-block-end: 1rem;
    inset-inline-end: 0;
  }
}
.landing-pricing .pricing-list .badge.badge-center {
  block-size: 1rem;
  inline-size: 1rem;
}
.landing-pricing .price-yearly-toggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
.landing-pricing .card .card-header,
.landing-pricing .card .card-body {
  padding: 2rem;
}
.landing-pricing .card .card-header {
  padding-block-start: 3rem;
}
.landing-pricing .card .card-body {
  padding-block-start: 0;
}

/* FAQs */
.landing-faq {
  border-top-left-radius: 3.75rem;
  border-top-right-radius: 3.75rem;
}
.landing-faq .faq-image {
  inline-size: 80%;
  max-inline-size: 20rem;
}

.landing-cta .cta-title {
  font-size: 2.125rem;
}
@media (max-width: 767.98px) {
  .landing-cta .cta-title {
    font-size: 1.8rem;
  }
}

/* Contact US */
.landing-contact .text-heading {
  overflow-wrap: anywhere;
}
.landing-contact .contact-img-box {
  border-radius: 3.75rem var(--bs-border-radius) var(--bs-border-radius);
}
:dir(rtl) .landing-contact .contact-img-box {
  border-radius: var(--bs-border-radius) 3.75rem var(--bs-border-radius) var(--bs-border-radius);
}
.landing-contact .contact-img-box .contact-img {
  border-radius: 3.75rem var(--bs-border-radius) var(--bs-border-radius);
}
.landing-contact .contact-img-box .contact-border-img {
  inset-block-start: -2.5rem;
  inset-inline-start: -2.8125rem;
}

/* Dark style */
[data-bs-theme=dark] .landing-hero {
  --bs-hero-bg: #1e2130;
}