@tailwind base;
@tailwind components;
@tailwind utilities;
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";

@layer base {
  .font-montserrat {
    font-family: 'Montserrat', sans-serif;
  }
}
.bg-shared-bg-blue{
  background: linear-gradient(247.64deg, #0D6783 0%, #163F50 100%);
}

.custom-select {
  height: 57px;
  padding: 16px 40px 16px 20px;
  border-radius: 8px;
  background: var(--Blue, rgba(242, 252, 255, 1));
  appearance: none; /* Remove the default arrow for consistent styling */
  -webkit-appearance: none; /* For WebKit browsers (Safari, Chrome) */
  padding-right: 50px; /* Add space for the dropdown arrow */
  font-family: 'Red Hat Display', sans-serif; /* Ensure proper font-family */
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-decoration-skip-ink: none;

  border: 1px solid; /* Add solid border to support gradient */
  border-image-source: linear-gradient(205.68deg, rgba(201, 225, 255, 0.2) 19.49%, rgba(13, 103, 131, 0.2) 60.63%, rgba(22, 63, 80, 0.2) 90.92%);
  border-image-slice: 1; /* Ensure the gradient applies across the border evenly */

  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"%3E%3Cpath fill="%23000000" d="M0 0L5 5L10 0Z"/%3E%3C/svg%3E'); /* Custom downward arrow */
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) center; /* Position arrow with spacing */
  background-size: 10px; /* Size of the arrow */
}
.custom-select::placeholder {
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-decoration-skip-ink: none;
}



.image-sides{
  max-width: 200px;
  max-height: 700px;
}
main{
  background:  rgba(250, 254, 255, 1);
}
.instagram-icon{
  width: 32px;
  height: 32px;
}
.facebook-icon{
  width: 28px;
  height: 28px;
}
.twitter-icon{
  width: 27px;
  height: 27px;
}
.black-link{
  padding: 16px 56px; /* Padding for the button */
  border-radius: 15px; /* Rounded corners */
  background: rgba(32, 31, 31, 1); /* Background color */
  font-family: Montserrat, sans-serif; /* Font family */
  font-size: 18px; /* Font size */
  font-weight: 700; /* Bold font */
  line-height: 22.86px; /* Line height */
  letter-spacing: -0.011em; /* Letter spacing */
  text-align: center; /* Center text within the button */
  text-decoration: none; /* Remove underline */
  color: rgba(255, 255, 255, 1); /* Text color */
  white-space: nowrap; /* Prevent text wrapping */
}
.transparent-link{
  padding: 16px 56px; /* Padding for the button */
  border-radius: 15px; /* Rounded corners */
  background: transparent; /* Background color */
  border: 1px solid rgba(32, 31, 31, 1);
  color: rgba(32, 31, 31, 1);
  font-family: Montserrat, sans-serif; /* Font family */
  font-size: 18px; /* Font size */
  font-weight: 700; /* Bold font */
  line-height: 22.86px; /* Line height */
  letter-spacing: -0.011em; /* Letter spacing */
  text-align: center; /* Center text within the button */
  text-decoration: none; /* Remove underline */
  white-space: nowrap; /* Prevent text wrapping */
}
.transparent-link-smaller{
  padding: 10px 30px;
  border-radius: 15px;
  background: transparent;
  border: 1px solid rgba(32, 31, 31, 1);
  color: rgba(32, 31, 31, 1);
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 22.86px;
  letter-spacing: -0.011em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.gradient-text {
  background: linear-gradient(247.64deg, #0D6783 0%, #163F50 100%);
  -webkit-background-clip: text; /* Clips the background to the text */
  -webkit-text-fill-color: transparent; /* Makes the text itself transparent to show the gradient */
}
.testimonial-user{
  bottom: 120px;
}
.p-text-16{
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(0, 0, 0, 1);
}
.p-text-16-bold{
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(0, 0, 0, 1);
}
.p-text-center-16{
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(0, 0, 0, 1);
}
.p-text-center-bold-16{
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(0, 0, 0, 1);
}
.small-text{
  font-size: 12px;
}
.medium-text{
  font-size: 16px;
}
.p-text-18{
  font-family: 'Red Hat Display', sans-serif; /* Use the custom font */
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(0, 0, 0, 1);
}
.p-text-18-bold{
  font-family: 'Red Hat Display', sans-serif; /* Use the custom font */
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(0, 0, 0, 1);
}
.flex-im{
  display: flex!important;
}
.close-proj-modal{
  height: 400px;
  border-radius: 20px;
}
.modify-time-modal{
  height: 650px;
  width: 580px;
  border-radius: 20px;
}
.bg-opacity-50 {
  backdrop-filter: blur(5px);
}

.shadow-lg {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.hello-block {
  width: 100%;
  height: 168px;
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  border-bottom: 1px solid transparent; /* Ensure the border is visible */
  border-image: linear-gradient(
    205.68deg,
    rgba(201, 225, 255, 0.2) 19.49%,
    rgba(13, 103, 131, 0.2) 60.63%,
    rgba(22, 63, 80, 0.2) 90.92%
  ) 1;
}
.close-proj-blue-block{
  background-color: rgba(242, 252, 255, 1);
  border-radius: 20px;
  height: 139.34px;
  width: 80%;
  padding: 30px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.choose-prof-block {
  position: relative;
  width: 800px;
  height: 100px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  padding-left: 35px;
  padding-right: 35px;
  z-index: 1;
  overflow: hidden; /* Ensures the gradient border is clipped to the rounded corners */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

.choose-prof-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 1px; /* Thickness of the border */
  background: linear-gradient(
    205.68deg,
    rgba(201, 225, 255, 0.2) 19.49%,
    rgba(13, 103, 131, 0.2) 60.63%,
    rgba(22, 63, 80, 0.2) 90.92%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.choose-prof-block-child{
  width: 181px;
  padding: 15px;
  border-radius: 10px;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

.spaces-on-sides{
  margin-left: 81px!important;
  margin-right: 81px!important;
}
.big-spaces-on-sides{
  margin-left: 200px!important;
  margin-right: 200px!important;
}

.link-projects{
  border-bottom: 1px solid black;
  text-decoration: none;
  a{
    padding-bottom: 5px;
  }
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.active-link-projects{
  border-bottom: 2px solid black;
  text-decoration: none;
  a{
    padding-bottom: 5px;
  }
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.choose-prof-block-child-highlight{
  background: linear-gradient(247.64deg, #0D6783 0%, #163F50 100%);
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 700;
  line-height: 22.86px;
  letter-spacing: -0.011em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(255, 255, 255, 1)!important;
}

.project-invitation {
  font-size: 16px;
}

.project-invitation p {
  margin-bottom: 10px; /* Space below the paragraph */
}

.project-invitation ul {
  list-style-type: disc; /* Bullets for the list */
  padding-left: 20px; /* Indentation for the list */
}

.project-invitation li {
  margin-bottom: 5px; /* Space between list items */
}
.mw-none{
  max-width: none;
}
.d-none{
  display: none;
}
.mt-0{
  margin-top: 0!important;
}
.pb-240i{
  padding-bottom: 240px !important;
}
.mt-15{
  margin-top: 15px!important;
}
.mt-25{
  margin-top: 25px!important;
}
.mt-35{
  margin-top: 35px!important;
}
.mt-45{
  margin-top: 45px!important;
}
.mt-55{
  margin-top: 55px!important;
}
.mt-65{
  margin-top: 65px!important;
}
.ml-15{
  margin-left: 15px;
}
.ml-45{
  margin-left: 45px;
}
.mb-45{
  margin-bottom: 45px!important;
}
.mb-15{
  margin-bottom: 15px;
}
.w-300{
  width: 300px;
}
.w-434{
  width: 434px;
}
.w-1006{
  width: 1006px;
}
.w-1063{
  width: 1063px;
}
.mb-150{
  margin-bottom: 150px!important;
}
.pb-146px{
  padding-bottom: 146px;
}

.py-80px{
  padding-top: 80px;
}
.w-100i{
  width: 100%!important;
}
.w-120i{
  width: 120px !important;
}
.text-left-important{
  text-align: left !important;
}
.mr-2 {
  margin-right: .5rem
}
.mr-4 {
  margin-right: 1rem
}
.mr-6 {
  margin-right: 1.5rem
}
.mr-8 {
  margin-right: 2rem
}
.mb-8{
  margin-bottom: 2rem;
}
.pt-40 {
  padding-top: 40px;
}
.pb-40{
  padding-bottom: 40px;
}
.br-10{
  border-radius: 10px;
}
.br-20{
  border-radius: 20px;
}
.ml-50{
  margin-left: 50px;
}
.mb-minus-125{
  margin-bottom: -125px;
}
.h-45{
  height: 45px !important;
}
.h-170i{
  height: 170px !important;
}
.pl-20{
  padding-left: 20px;
}
.pr-20{
  padding-right: 20px;
}
.font-size-32i{
  font-size: 32px !important;
}
.bg-transparent{
  background: transparent !important;;
}
.placeholder-text-12::placeholder {
  font-size: 12px!important;
}
.placeholder-color-black::placeholder{
  color: black!important;
}
.placeholder-color-grey::placeholder{
  color: rgba(32, 31, 31, 0.5)!important;
}
.background-color-transparent{
  background-color: transparent!important;
}
.texte-centre-rouge {
  @apply text-center text-red-500 text-[50px];
}
.text-decoration-underline{
  text-decoration: underline!important;
}
.hr-divider-gray{
  height: 1px;
  color: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  border: 1px;
}

section {
  padding: 56px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 70px;
  font-style: normal;
  font-weight: 900;
  line-height: 81px; /* 115.714% */
  letter-spacing: -1px;
  text-transform: uppercase;
}

h2 {
  color: #000;
  font-size: 40px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 56px;
  word-wrap: break-word;
  text-align: center;
}
.w-90{
  width: 90%;
}
.w-80{
  width: 80%;
}
.w-70{
  width: 70%;
}
.w-60{
  width: 60%;
}
.w-50i{
  width: 50% !important;
}
.w-40i{
  width: 40% !important;
}
.cta {
  cursor: pointer;
  width: auto;
  height: 100%;
  padding-left: 56px;
  padding-right: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #201f1f;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: inline-flex;
  color: white;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 22.86px;
  word-wrap: break-word;
}
.cta-transparent {
  cursor: pointer;
  width: auto;
  height: 100%;
  padding-left: 56px;
  padding-right: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: inline-flex;
  color: black;
  border: 1px solid black;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 22.86px;
  word-wrap: break-word;
}
/* HEADER */
.record-transparent{
  width: 386px;
  cursor: pointer;
  height: 54px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: inline-flex;
  color: black;
  border: 1px solid black;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 22.86px;
  word-wrap: break-word;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* HERO */

#hero {
  background-image: url('<%= asset_path("gemotion-hero-bg.svg") %>');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 1037px;
  padding-bottom: calc(18px + 183px);
}

.hero-p {
  display: inline-flex;
  padding: var(--is_16px, 16px);
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--Black, #201f1f);
  font-family: "Red Hat Display", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 166.667% */
  border-radius: 20px;
  background: var(--White, #fff);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

/* ABOUT */

.custom-div {
  display: flex;
  width: 1062px;
  padding: var(--is_40px, 40px);
  align-items: center;
  gap: 61px;
  border-radius: 20px;
  border: 1px solid var(--linear-2-transparent-20, #c9e1ff);
  background: var(--White, #fff);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

.step {
  padding: 20px 0;
}

/* DEDICATION */

#dedication {
  background-image: url('<%= asset_path("gemotion-dedication-bg.svg") %>');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 1037px;
  padding-bottom: 164px;
}

/* PRICING */

/* TESTIMONIALS */

#testimonials {
  border-radius: 50px;
  background: var(
    --Light-blue-linear,
    linear-gradient(180deg, #f1fbff 38.29%, rgba(241, 251, 255, 0) 100%)
  );
}

.testimonial-content {
  @apply text-black font-red-hat-display text-base font-normal leading-[25px];
}

.testimonial-name {
  @apply font-montserrat font-semibold leading-6 absolute bottom-[120px] right-0;
}

#testimonials .swiper-slide {
  padding-top: 120px;
}

#testimonials .swiper {
  position: relative;
}

#testimonials .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: max-content;
  padding-bottom: 80px;
}

/* VIDEOS */

/* .video-h1 {
  @apply text-center font-montserrat text-[40px] font-bold leading-[56px] tracking-[-1px] uppercase bg-clip-text text-transparent bg-linear-dark-blue;
} */

.h1-video {
  @apply text-center font-montserrat text-[40px] font-bold leading-[56px] tracking-[-1px] uppercase bg-clip-text text-transparent bg-linear-dark-blue;
}

.video-h1 {
  text-align: center;

  /* H2 */
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px; /* 140% */
  letter-spacing: -1px;
  text-transform: uppercase;
  padding: 56px 0 86px;

  background: linear-gradient(248deg, #0d6783 0%, #163f50 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 1062px;
  margin: auto;
}

/* .video-desc {
  @apply flex w-[1062px] p-[49px] px-[197px] justify-center items-center gap-[10px]
    rounded-[10px] border border-[color-C9E1FF] bg-[color-FFF]
    shadow-video-desc text-[color-201F1F] text-center
    font-redhat text-base font-normal leading-[25px];
} */

.video-h4 {
  color: #201f1f;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 120% */
  max-width: 702px;
  margin: auto;
}

.video-desc {
  display: flex;
  width: 1062px;
  padding: 49px 197px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #c9e1ff);
  background: var(--White, #fff);

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);

  color: var(--Black, #201f1f);
  text-align: center;

  /* Body 16 */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 156.25% */

  margin: 0 auto 72px;
}

.video-h3 {
  @apply text-black text-center font-montserrat text-4xl font-bold leading-[37px];
}

.video-textarea {
  @apply flex w-[677px] h-[99px] p-[15px] px-[27px] items-start gap-[10px];
}
.h-1482{
  height: 1482px;
}
.w-1360{
  width: 1360px;
}
.music-frame {
  display: flex;
  width: 1060px;
  padding: 30px 30px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}
.frame-close-proj{
  display: flex;
  width: 920px;
  padding: 15px 19px;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}

.creator-frame{
  display: flex;
  width: 1063px;
  padding: 30px 30px;
  flex-direction: column;

  align-items: start;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}
.profile-frame {
  display: flex;
  width: 732px;
  padding: 50px 50px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}
.edit-video-frame{
  display: flex;
  width: 1060px;
  padding: 60px 60px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}
.dedicace-de-fin-frame{
  width: 1060px;
  padding: 30px 78px;
  gap: 30px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}
.content-frame{
  display: flex;
  width: 1360px;
  padding: 30px 30px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}
.frame {
  display: flex;
  width: 1006px;
  padding: 40px 116px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}
.frame-small-border {
  display: flex;
  width: 1006px;
  padding: 40px 40px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;

  /* Style */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  margin: auto;
}

.frame-no-border {
  display: flex;
  width: 1164px;
  /* padding: 40px 116px; */
  flex-direction: column;
  align-items: center;
  gap: 48px;
  border-radius: 20px;
  background: #fff;
  margin: auto;
}

.video-chapters,
.video-musics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-column-gap: 21px;
  grid-row-gap: 24px;
  width: 100%;
}

.video-chapters .video-chapter:first-of-type {
  grid-area: 1 / 1 / 2 / 3;
}

.video-chapter-thumb {
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.video-chapters div:not(:first-of-type) .video-chapter-thumb {
  height: 194px;
  width: 100%;
}

.video-chapters div:first-of-type .video-chapter-thumb {
  height: 199px;
  width: 100%;
}

.video-chapter-thumb-wrapper {
  display: block;
  position: relative;
}

.video-chapter-thumb-wrapper span {
  display: block;
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #fff;

  /* Body 16 Bold */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 156.25% */
}
.video-chapter-thumb-wrapper-text{
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #fff;

  /* Body 16 Bold */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 156.25% */
}
.video-popup-input-block{
  margin-top: -35px;
  margin-bottom: -28px;
  input{
    border: none;
  }
}
.video-chapter-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 0px;
}

.video-chapter input[type="checkbox"] {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--Black, rgba(32, 31, 31, 1));
}

.video-chapter-thumb-wrapper-simpletext {
  display: block;
  position: relative;
}

.video-form {
  margin: auto;
  width: 100%;
  max-width: 1062px;
}

.video-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 48px auto 0;
  max-width: 1062px;
}

.video-music .music-name {
}

.video-music .music-audio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16.5px;
}

.dedications {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 32px;
}

.dedication {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 0px;
}

.dedication video {
  width: 100% !important;
  height: 199px !important;
  object-fit: cover;
  object-position: center;
}

.dedication-thumb-wrapper {
  display: block;
  position: relative;
}

.dedication-name {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  z-index: 999;
  color: rgba(255, 255, 255, 1);
}

.dedication-desc {
  margin-top: 16px;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 156.25% */
}

.video-alert {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 50px;
  margin-bottom: 55px;
}
.edit-video-alert{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 24px;
}

.video-email {
}

.share-email {
  border-radius: 8px;
  border: 1px solid rgba(32, 31, 31, 0.5);
  background: #fff;

  color: #201f1f;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 156.25% */

  display: flex;
  width: 677px;
  height: 60px;
  padding: 15px 27px;
  align-items: flex-start;
  gap: 10px;
}

.share-wrapper {
  display: block;
  position: relative;
}

.share-submit {
  position: absolute;
  right: 8px;
  top: 6px;
  display: flex;
  width: 144px;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 999;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid #201f1f;
  background: #201f1f;

  color: #fff;

  /* Buttons Lowcase */
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 127%; /* 22.86px */
  letter-spacing: -0.198px;
}

.share-clipboard {
  display: flex;
  width: 677px;
  height: 60px;
  padding: 15px 27px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid rgba(32, 31, 31, 0.5);
  background: #fff;
  position: relative;
}

.share-clipboard-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}
.share-icon-facebook{
  width: 136px;
  height: 136px;
  margin-left: 40px;
}
.share-icon-whats{
  width: 120px;
  height: 120px;
}
.share-clipboard-btn {
  position: absolute;
  right: 8px;
  top: 6px;
  display: flex;
  width: 144px;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 999;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid #201f1f;
  background: #201f1f;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.198px;
}
.cta-button{
  cursor: pointer;
  width: 312px;
  height: 45px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #201f1f;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  color: white;
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  line-height: 22.86px;
  word-wrap: break-word;
}

.video-memories {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}
.video-musics {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

.projects-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 30px;
}

.content-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 30px;
}

.chapters-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.project-block {
  position: relative;
  overflow: hidden;
  width: 299px;
  height: 230px;
  border-radius: 12.82px;
  background-color: #fff; /* Ensure the background is visible */
}

.project-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12.82px; /* Match parent border-radius */
  padding: 1px; /* Thickness of the gradient border */
  background: linear-gradient(
    205.68deg,
    rgba(201, 225, 255, 0.2) 19.49%,
    rgba(13, 103, 131, 0.2) 60.63%,
    rgba(22, 63, 80, 0.2) 90.92%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: 4; /* Place the border above other content */
}
.project-block-bottom-white{
  position: absolute;
  height: 92px;
  background-color: rgba(255, 255, 255, 1);
  bottom: 0;
  width: 100%;
  z-index: 2;
  padding: 10px 20px;
}
.content-block{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 700px;
  border-radius: 12.82px;
  border: 0.85px solid rgba(0, 0, 0, 1);
}
.preview-prof-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 145px;
  object-fit: cover;
  z-index: 1;
}
.edit-prof-video-icon{
  position: absolute;
  top: 15px;
  right: 15px;
  width: 17px;
  height: 17px;
  z-index: 6; /* Ensure the icon is on top */
  display: block; /* Make sure the icon is visible */
}
.edit-video-icon{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  z-index: 6; /* Ensure the icon is on top */
  display: block; /* Make sure the icon is visible */
}
.prev-image{
  object-fit: cover;
  height: 100%;
}
.ellipse-prof-video-icon{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 27px;
  height: 27px;
  z-index: 4; /* Ensure the icon is on top */
  display: block; /* Make sure the icon is visible */
}
.edit-destinataire-video-icon{
  position: absolute;
  top: 40px;
  right: 40px;
  width: 24px;
  height: 24px;
  z-index: 2; /* Ensure the icon is on top */
  display: block; /* Make sure the icon is visible */
}
.project-main-block{
  height: 240px;
}
.edit-proj-modal{
  height: 720px;
  border-radius: 20px;
}
.edit-chap-modal{
  height: 1300px;
  width: 720px;
  border-radius: 20px;
}
.popup-chap-modal{
  width: 730px !important;
  height: 900px !important;
  border-radius: 20px;
}
.popup-destinataire-modal{
  height: 783px;
  border-radius: 20px;
}
.popup-theme-modal{
  height: 200px;
  border-radius: 20px;
}
.popup-payment-modal{
  height: 295px;
  border-radius: 20px;
  overflow: hidden;
}
.popup-close-project-modal{
  height: 600px;
  border-radius: 20px;
}
.disabled-input{
  max-width: 535px;
}

.video-memory {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 550px;
  margin: 50px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;
}
.video-memory-edit-video {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 550px;
  margin: 50px;
  border-radius: 20px;
  border: 1px solid #c9e1ff;
  background: #fff;
  padding-bottom: 253px;
}
.video-memory-thumb-wrapper {
  display: block;
  position: relative;
  margin-bottom: 16px;
}

.video-memory-thumb-wrapper img {
  width: 511px;
  height: 189px;
  object-fit: cover;
  object-position: center;
  border-radius: 18.201px;
  border: 1.213px solid #000;
}

.video-memory-thumb-wrapper span {
  color: #fff;
  font-size: 19.415px;
  font-style: normal;
  font-weight: 600;
  line-height: 36.402px; /* 187.5% */
  letter-spacing: -0.524px;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 999;
}

.video-music {
  position: relative;
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;

  gap: 12px;
  border-radius: 20px;
  background: #fff;
  z-index: 1; /* Ensure the content stays above the pseudo-elements */
  overflow: hidden; /* To avoid content leaking outside */
}

.video-music::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px; /* Same border-radius as the main block */
  background: linear-gradient(205.68deg, #C9E1FF 19.49%, #0D6783 60.63%, #163F50 90.92%);
  z-index: -2; /* Place the pseudo-element farthest behind */
  box-sizing: border-box; /* Match dimensions of the parent block */
}

.video-music::after {
  content: "";
  position: absolute;
  top: 2px; /* Matches border thickness */
  left: 2px;
  width: calc(100% - 4px); /* Adjust width for border thickness */
  height: calc(100% - 4px); /* Adjust height for border thickness */
  border-radius: 18px; /* Inner radius: subtract border thickness */
  background: #fff; /* Matches block background */
  z-index: -1; /* Above the gradient but behind content */
}








.video-music-thumb-wrapper {
  display: block;
  position: relative;
  margin-bottom: 16px;
  width: 100%;
}

.video-music-thumb-wrapper img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  border-radius: 18.201px;
  border: 1.213px solid #000;
}

.video-music-thumb-wrapper .video-music-thumb-wrapper-text {
  color: #fff;
  font-size: 19.415px;
  font-style: normal;
  font-weight: 600;
  line-height: 36.402px; /* 187.5% */
  letter-spacing: -0.524px;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 999;
}

.video-memory-alert {
  color: #000;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 156.25% */
}

.video-memory-file {
  padding: 16px;
  color: #fff;
  border-radius: 15px;
  background: #201f1f;
  text-align: center;

  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 127%; /* 22.86px */
  letter-spacing: -0.198px;
  cursor: pointer;
  margin: 16px 0;
}

.video-memory-upload {
  padding: 16px;
  color: #fff;
  border-radius: 15px;
  background: #201f1f;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 127%; /* 22.86px */
  letter-spacing: -0.198px;
  cursor: pointer;
  margin: 16px 0;
}

.dedication-content-medias,
.dedication-content-theme,
.dedication-content-form {
  width: 100%;
}

.dedication-content-medias span,
.dedication-content-theme span {
  color: #201f1f;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 166.667% */
  display: flex;
  justify-content: flex-start;
}

.chapter-popup-block {
  position: relative;
  width: 480px;
  height: 760px;
  border-radius: 20px; /* The radius for the block */
  padding: 20px;
  background: #fff; /* The inner background color */
  z-index: 1; /* Ensure the content stays above the pseudo-elements */
  overflow: hidden; /* To avoid content leaking outside */
}

.chapter-popup-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px; /* Same border-radius as the main block */
  background: linear-gradient(205.68deg, #C9E1FF 19.49%, #0D6783 60.63%, #163F50 90.92%);
  z-index: -2; /* Place the pseudo-element farthest behind */
  box-sizing: border-box; /* Match dimensions of the parent block */
}

.chapter-popup-block::after {
  content: "";
  position: absolute;
  top: 2px; /* Matches border thickness */
  left: 2px;
  width: calc(100% - 4px); /* Adjust width for border thickness */
  height: calc(100% - 4px); /* Adjust height for border thickness */
  border-radius: 18px; /* Inner radius: subtract border thickness */
  background: #fff; /* Matches block background */
  z-index: -1; /* Above the gradient but behind content */
}

.color-picker {
  display: flex;
  gap: 10px;
}

.color-picker input[type="radio"] {
  display: none;
}

.color-circle {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}

/* .color-circle.black { background-color: black; }
.color-circle.grey { background-color: grey; } */
.color-circle.white { background-color: white; border: 0.5px solid black; }
.color-circle.red { background-color: red; border: 0.5px solid black; }
.color-circle.orange { background-color: orange; border: 0.5px solid black; }
.color-circle.yellow { background-color: yellow; border: 0.5px solid black; }
.color-circle.green { background-color: green; border: 0.5px solid black; }
.color-circle.lightblue { background-color: lightblue; border: 0.5px solid black; }
.color-circle.dodgerblue { background-color: dodgerblue; border: 0.5px solid black; }
.color-circle.violet { background-color: violet; border: 0.5px solid black; }


.color-picker input[type="radio"]:checked + .color-circle {
  border: 1px solid #333;
}

.prev-your-text{
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  height: 45px;
  border: 1px dotted black;
  /* background-color: rgba(217, 217, 217, 1); */
}

.chapter-popup-select{
  border-radius: 10px;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.film-yourself-block{
  width: 80%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  min-height: 128px;
  border-radius: 10px;
}
.video-recording-block{
  position: relative;
  height: 438px;
  border: 1px solid rgba(0, 0, 0, 1);
  background-color: rgba(242, 252, 255, 1);
  border-radius: 15px;
  width: 902px;
}
.video-recording-block-img{
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}
.w-370i{
  width: 370px!important;
}
.top-image {
  position: absolute;
  top: -40px;
  width: 80px;
  height: 80px;
  left: 50%;
  transform: translateX(-50%);
}
.dedicace_de_fin_form_block{
  width: 80%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 20px;
  padding: 20px;
}
.upload-video-block{
  width: 202px;
  height: 222px;
  border-radius: 10px;
  border: 1px dotted rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
  margin-top: 50px;
  padding-left: 25px;
  padding-right: 25px;
}
.more-destinataire-block{
  width: 1006px;
  height: 115px;
  border-radius: 10px;
  border: 1px dotted rgba(32, 31, 31, 0.5);
  background-color: rgba(255, 255, 255, 1);
  margin-top: 50px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 60px;
}
.upload-music-block{
  width: 100%;
  height: 115px;
  border-radius: 10px;
  border: 1px dotted rgba(32, 31, 31, 0.5);
  background-color: rgba(255, 255, 255, 1);
  margin-top: 10px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 10px;
}
.upload-attachment-block{
  width: 100%;
  height: 150px;
  border-radius: 10px;
  border: 1px dotted rgba(32, 31, 31, 0.5);
  background-color: rgba(255, 255, 255, 1);
  padding-left: 25px;
  padding-right: 25px;
}
.upload-attachment-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}
.upload-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}
.add-more-circle {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid rgba(32, 31, 31, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

.upload-circle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.plus-sign {
  font-size: 1.5rem;
  color: #666;
}

.plus-sign-previews{
  font-size: 1.5rem;
  color: #666;
  border-radius: 50%;
  border: 1px solid #201f1f;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
  width: 27px;
  height: 27px;
  text-align: center;
}
.frame-grey{
  display: flex;
  width: 1006px;
  padding: 40px 116px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  border-radius: 20px;
  background: rgba(247, 247, 247, 1);
  margin: auto;
}
.date-field{
  border-radius: 16px;
  border: 1px dotted black;
}
.grey-block{
  width: 80%;
  background-color: rgba(247, 247, 247, 1);
  border-radius: 10px;
  margin-top: 20px;
}
.edit_video_form_block{
  width: 80%;
  /* background-color: rgba(247, 247, 247, 1); */
  /* border-radius: 20px; */
  padding: 20px;
}
.delete-chap-icon{
  position: absolute;
  top: 10px;
  right: 35px;
  width: 24px;
  height: 24px;
  z-index: 6; /* Ensure the icon is on top */
  display: block; /* Make sure the icon is visible */
}
.video-container{
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
  video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.image-container{
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.edit-video-container{
  position: relative;
  width: 110px;
  height: 110px;
  overflow: hidden;
  border-radius: 10px;
  video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.edit-image-container{
  position: relative;
  width: 110px;
  height: 110px;
  overflow: hidden;
  border-radius: 10px;
  .preview-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.purge-chap-icon{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 2 !important;
  display: block !important;
}
.payment-container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2/3 and 1/3 */
  gap: 1rem; /* Adjust spacing between blocks */
}

.payment-block {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(32, 31, 31, 0.5);
  border-radius: 8px;
}

.payment-block-1 {
  border: 1px solid rgba(32, 31, 31, 0.5);
  height: 250px;
}
.payment-block-bottom{
  border: 1px solid rgba(32, 31, 31, 0.5);
  height: 108px;
}

.payment-block-2 {
  border: 1px solid rgba(32, 31, 31, 0.5);
  height: 590px;
}
.total-price{
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.payment-modal{
  height: 292px;
}
.payment-conf-block{
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  border-radius: 10px;
  height: 292px;
}
#card-element{
  padding: 10px;
  border: 0.5px solid black;
  border-radius: 7px;
}
.with-play-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* Space between icon and text */
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.with-play-icon::before {
  content: "▶"; /* Triangle icon */
  font-size: 16px; /* Match text size */
  color: white;
}

.with-stop-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* Space between icon and text */
  padding: 0.5rem 1rem;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.with-stop-icon::before {
  content: "";
  display: inline-block;
  width: 10px; /* Square size */
  height: 10px;
  background-color: white; /* Matches button text color */
  border-radius: 2px; /* Optional: Slight rounding for aesthetics */
}
.vector-block{
  width: 84px;
  height: 84px;
  background: rgba(217, 217, 217, 1);
}
.div-input{
  border: 1px solid black;
  padding: 4px 30px;
  background-color: white;
}
.div-rect{
  border: 1px solid black;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 2px;
}
.record-instruction{
  padding-left: 40px;
  padding-right: 40px;
  height: 210px;
  text-align: center;
}
.collaborator-dedicace-thumb{
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  height: 100%;
  position: relative;
  z-index: 5;
}
.collab-video-container{
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 10px;
  video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.upload-btn {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
}

.gallery {
  display: flex;
  gap: 30px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.edit-video-gallery {
  display: flex;
  gap: 0;
  margin-top: 10px;
  flex-wrap: wrap;
}

.preview-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}
.preview-photo-intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.steps-container {
  position: relative;
}

.step {
  position: relative;
  margin: 20px 0; /* Adjust spacing as needed */
}

.step:nth-child(even):not(:last-child)::after {
  content: image-url(/assets/gemotion-next-step-left-a4c7f090952b826da0a37343fe6a3ed7c730973881f2d02fbceeb4f266938399.svg);
  position: absolute;
  left: -120px; /* Adjust positioning as needed */
  top: 100%;
  transform: translateY(-50%);
}

.step:nth-child(odd):not(:last-child)::after {
  content: image-url(/assets/gemotion-next-step-right-53333d035c888b862549eee7edabbc85fc3968d41b76f9b698f2177b2c86b34d.svg);
  position: absolute;
  right: -120px; /* Adjust positioning as needed */
  top: 100%;
  transform: translateY(-50%);
}

/* Specific rule to hide the arrow on the last element if it's even */
.step:nth-child(even):last-child::after {
  content: none;
}
#about_hero {
  background-image: image-url(/assets/gemotion-about-hero-bg-71cc56903c36c9faa208434d508211faa2e3a8b070feb0d7123c32cc25c91bc0.png);
  background-position: center 80%;
  background-repeat: no-repeat;
  background-size: cover;
}
.about-block{
  padding-bottom: 450px !important;
}
#watch{
  margin-top:-400px!important;
}
.index-1{
  z-index:1;
}
.play-button-icon-home{
  width: 151.01px;
  height: 95.58px;
  top: -44px;
  right: -62px;
}
.video-bottom-icon{
  bottom: 80px;
  width: 85%;
}
.video-bottom-bar-icon {
  bottom: 40px;
  width: 90%;
}
.custom-audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 50px;
  background: rgba(201, 225, 255, 0.5); /* Light gradient background */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
  width: 100%; /* Full width */
  max-width: 600px; /* Optional: Limit maximum width */
}

.play-button {
  position: relative;
  width: 47px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent; /* Transparent button */
  cursor: pointer;
  z-index: 1; /* Ensure content is above the pseudo-elements */
  display: flex;
  align-items: center;
  justify-content: center; /* Center the play icon */
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.play-button::before {
  content: "";
  position: absolute;
  top: -1px; /* Adjust for the border width (0.5px border on all sides) */
  left: -1px;
  width: calc(100% + 2px); /* Extend for the gradient border */
  height: calc(100% + 2px); /* Extend for the gradient border */
  border-radius: 50%;
  background: linear-gradient(247.64deg, #0D6783 0%, #163F50 100%);
  z-index: -1; /* Place behind the button */
}

.play-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgb(221 235 253); /* Light gradient background */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
  z-index: -1; /* Below the gradient border */
}

.play-button-icon {
  width: 50%; /* Adjust the size of the play icon */
  height: 50%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22%3E%3Cpath d%3D%22M8 5v14l11-7z%22 fill%3D%22%230D6783%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.stop-button-icon {
  width: 50%; /* Adjust the size of the play icon */
  height: 50%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22%3E%3Cpath d%3D%22M6 4h4v16H6zM14 4h4v16h-4z%22 fill%3D%22%230D6783%22/%3E%3C/svg%3E'); /* Pause icon */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.waveform {
  flex-grow: 1;
  height: 40px;
  background: #e0f3ff; /* Waveform container background */
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.waveform canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.inviter-des-amis{
  width: 214px;
  height: 39px;
  padding: 8px 16px;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid var(--Black-Transparent, rgba(32, 31, 31, 0.5));
  background: var(--White, rgba(255, 255, 255, 1));
}
.padding-sides-120{
  padding-left: 120px;
  padding-right: 120px;
}
/* line 1, app/assets/stylesheets/devise_styles.scss */
.devise-header {
  font-family: Montserrat, sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: 81px;
  letter-spacing: -1px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  text-transform: uppercase;
}

/* line 12, app/assets/stylesheets/devise_styles.scss */
.tt-uppercase {
  text-transform: uppercase;
}

/* line 15, app/assets/stylesheets/devise_styles.scss */
.devise-bg {
  background-image: url(/assets/devise_bg2-fd74002a018fef5b98acf189ca2b3d8b67dfa60c9c0afbb7442cd28e638249f2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 21, app/assets/stylesheets/devise_styles.scss */
.sign-in-block {
  position: relative;
  /* Needed for the pseudo-element */
  padding: 65px 50px;
  /* Top-bottom and left-right shorthand */
  background: var(--White, white);
  /* Background for the main block */
  border-radius: 20px;
  /* Rounded corners for the block */
  z-index: 1;
  /* Ensure content stays above the pseudo-element */
  overflow: hidden;
  /* Clip pseudo-element within border-radius */
}

/* line 29, app/assets/stylesheets/devise_styles.scss */
.devise-bg-main-block {
  padding-left: 60px;
  padding-right: 60px;
  padding-bottom: 150px;
}

/* line 34, app/assets/stylesheets/devise_styles.scss */
.sign-in-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  /* Same border-radius as the main block */
  background: linear-gradient(205.68deg, rgba(201, 225, 255, 0.2) 19.49%, rgba(13, 103, 131, 0.2) 60.63%, rgba(22, 63, 80, 0.2) 90.92%);
  z-index: -1;
  /* Place the pseudo-element behind the block content */
  border: 1px solid transparent;
  /* Ensure border fits into the radius */
  box-sizing: border-box;
  /* Match dimensions of the parent block */
}

/* line 47, app/assets/stylesheets/devise_styles.scss */
.sign-in-block::after {
  content: "";
  position: absolute;
  top: 2px;
  /* Matches border thickness */
  left: 2px;
  width: calc(100% - 4px);
  /* Adjust width for border thickness */
  height: calc(100% - 4px);
  /* Adjust height for border thickness */
  border-radius: 18px;
  /* Inner radius: subtract border thickness */
  background: white;
  /* Matches block background */
  z-index: 0;
  /* Above the gradient but behind content */
}

/* line 59, app/assets/stylesheets/devise_styles.scss */
.sign-in-block > * {
  position: relative;
  /* Ensure content stays above pseudo-elements */
  z-index: 1;
}
/* line 1, app/assets/stylesheets/home.scss */
.home {
  background: var(--Light-Blue-BG, #fafeff);
}

/* line 4, app/assets/stylesheets/home.scss */
.hero-block {
  position: relative;
  /* Ensures the link is positioned relative to this container */
  width: 100%;
  /* Full width */
  height: auto;
  /* Adjusts based on content or image size */
  padding-bottom: 200px;
  background-image: url(/assets/BG-779df7441dca6474b0fd5fbb58894faa2b625a98954d123e5fb406ccb5b5866b.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* line 15, app/assets/stylesheets/home.scss */
.hero-block img {
  display: block;
  /* Removes extra space below the image */
  position: static;
  /* Image remains in the document flow */
  width: 100%;
  /* Ensure it scales responsively */
  height: auto;
  /* Maintain aspect ratio */
}

/* line 22, app/assets/stylesheets/home.scss */
.about-top-block {
  position: relative;
  /* Ensures the link is positioned relative to this container */
  width: 100%;
  /* Full width */
  height: 500px;
  /* Adjusts based on content or image size */
  padding-bottom: 200px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* line 33, app/assets/stylesheets/home.scss */
.about-top-block .main-bg {
  display: block;
  position: static;
  width: 100%;
  height: auto;
}

/* line 39, app/assets/stylesheets/home.scss */
.about-top-block .right-bg {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 431px;
  height: 400px;
}

/* line 47, app/assets/stylesheets/home.scss */
.left-arrow {
  position: absolute !important;
  left: -250px !important;
  top: 85px !important;
  width: 200px !important;
  height: 245px !important;
  transform: rotate(-23.96deg) !important;
}

/* line 55, app/assets/stylesheets/home.scss */
.right-arrow {
  position: absolute !important;
  right: -250px !important;
  top: 85px !important;
  width: 200px !important;
  height: 245px !important;
  transform: rotate(15.96deg) !important;
}

/* line 64, app/assets/stylesheets/home.scss */
.hero-block a {
  position: absolute;
  /* Position relative to .hero-block */
  bottom: 215px;
  /* Distance from the bottom of the container */
  left: 50%;
  /* Center horizontally */
  transform: translateX(-50%);
  /* Correct alignment to the horizontal center */
}

/* line 71, app/assets/stylesheets/home.scss */
.read-more {
  width: 218px;
  height: 55px;
}

/* line 76, app/assets/stylesheets/home.scss */
.how-li {
  position: relative;
  /* Needed for positioning the pseudo-element */
  display: flex;
  width: 383px;
  height: 124px;
  padding: 38px 36.984px;
  justify-content: center;
  align-items: center;
  color: #000;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  border-radius: 15px;
  /* Block radius */
  background: #fff;
  /* Block background */
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  overflow: hidden;
  /* Ensures the pseudo-element doesn't bleed out */
}

/* line 96, app/assets/stylesheets/home.scss */
.how-li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 2px);
  /* Extend slightly to prevent gaps */
  height: calc(100% + 2px);
  /* Extend slightly to prevent gaps */
  border-radius: 15px;
  /* Matches the block radius */
  background: linear-gradient(205.68deg, #C9E1FF 19.49%, #0D6783 60.63%, #163F50 90.92%);
  z-index: 0;
  /* Place it behind the content */
}

/* line 108, app/assets/stylesheets/home.scss */
.how-li > * {
  position: relative;
  z-index: 1;
  /* Ensure content is above the pseudo-element */
}

/* line 113, app/assets/stylesheets/home.scss */
.how-li::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  /* Adjust for border thickness */
  height: calc(100% - 2px);
  /* Adjust for border thickness */
  border-radius: 14px;
  /* Inner border radius (subtract border thickness) */
  background: #fff;
  /* Matches block background to create the "cut-out" */
  z-index: 0;
  /* Behind the content, above the gradient */
}

/* line 125, app/assets/stylesheets/home.scss */
.pricing-card {
  position: relative;
  /* Needed for pseudo-elements positioning */
  width: 100%;
  height: 100%;
  padding: 48px;
  background: white;
  border-radius: 20px;
  /* Match inner block radius */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 1;
  /* Ensure content stays above the background */
  overflow: hidden;
  /* Clip content to respect border-radius */
}

/* line 140, app/assets/stylesheets/home.scss */
.pricing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  /* Same radius as the block */
  background: linear-gradient(205.68deg, #C9E1FF 19.49%, #0D6783 60.63%, #163F50 90.92%);
  z-index: -1;
  /* Place behind the content */
}

/* line 152, app/assets/stylesheets/home.scss */
.pricing-card::after {
  content: "";
  position: absolute;
  top: 2px;
  /* Matches border thickness */
  left: 2px;
  width: calc(100% - 4px);
  /* Adjust width for border thickness */
  height: calc(100% - 4px);
  /* Adjust height for border thickness */
  border-radius: 18px;
  /* Inner radius: subtract border thickness */
  background: white;
  /* Matches block background */
  z-index: 0;
  /* Above the gradient but behind content */
}

/* line 164, app/assets/stylesheets/home.scss */
.pricing-card > * {
  position: relative;
  /* Ensure content stays above pseudo-elements */
  z-index: 1;
}

/* line 170, app/assets/stylesheets/home.scss */
.pricing-card img {
  margin-bottom: 16px;
  width: 134px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* line 178, app/assets/stylesheets/home.scss */
.pricing-card .text-xl {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* line 184, app/assets/stylesheets/home.scss */
.pricing-card .price {
  color: black;
  font-size: 32px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  line-height: 37px;
  word-wrap: break-word;
  margin-bottom: 24px;
}

/* line 194, app/assets/stylesheets/home.scss */
.pricing-card .duration .label {
  color: #000;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 120% */
  margin-bottom: 12px;
}

/* line 205, app/assets/stylesheets/home.scss */
.pricing-card .duration .value {
  color: var(--Black, #000);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  /* 166.667% */
}

/* line 213, app/assets/stylesheets/home.scss */
.icon-container {
  width: 29.36px;
  height: 32.8px;
  margin-top: 5.35px;
  margin-left: 9.32px;
}

/* line 219, app/assets/stylesheets/home.scss */
.show-more-features {
  width: 403px;
  height: 55px;
}

/* line 224, app/assets/stylesheets/home.scss */
.create-video-link {
  width: 259px;
  height: 55px;
}

/* line 228, app/assets/stylesheets/home.scss */
.bottom-left-image {
  width: 116px;
  height: 116px;
  left: -94px;
  bottom: 12px;
}

/* line 234, app/assets/stylesheets/home.scss */
.top-right-image {
  width: 101px;
  height: 81.18px;
  right: -50px;
  top: 40px;
}

/* line 240, app/assets/stylesheets/home.scss */
.emoji-icon {
  width: 58.74px;
  height: 58.74px;
  margin-top: 246px;
  left: -65px;
  position: relative;
}
/* line 1, app/assets/stylesheets/video_process.scss */
.image-sides {
  width: 15%;
  /* Allocate 15% to the images */
  object-fit: cover;
  /* Ensure the images fill the allocated space properly */
}

/* line 6, app/assets/stylesheets/video_process.scss */
.content {
  width: 70%;
  /* Allocate 70% to the content block */
  padding-bottom: 150px;
}

/* line 11, app/assets/stylesheets/video_process.scss */
.left-image {
  margin-right: 2.5%;
  /* Optional: Space between the left image and content */
}

/* line 15, app/assets/stylesheets/video_process.scss */
.right-image {
  margin-left: 2.5%;
  /* Optional: Space between the content and right image */
}

/* line 18, app/assets/stylesheets/video_process.scss */
.info_destinataire .information {
  display: flex;
  width: 1060px;
  padding: 49px 197px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

/* line 31, app/assets/stylesheets/video_process.scss */
.info_destinataire .information p {
  color: #000;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
}

/* line 40, app/assets/stylesheets/video_process.scss */
.info_destinataire .destinataire {
  width: 1006px;
  height: 380px;
  padding: 54px 124px 45px;
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

/* line 51, app/assets/stylesheets/video_process.scss */
.info_destinataire .bigger-destinataire {
  width: 1006px;
  padding: 54px 124px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

/* line 64, app/assets/stylesheets/video_process.scss */
.flex-block-container {
  width: 1006px;
  padding: 54px 124px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

/* line 78, app/assets/stylesheets/video_process.scss */
.info_destinataire .information::before {
  position: absolute;
  content: "";
  background-image: url(/assets/icons/emoj-23d5260b5c9ae3a16c23e4a4a5439f024f66e8baed86eea2275cbd932803f301.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 137px;
  height: 137px;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
}

/* line 93, app/assets/stylesheets/video_process.scss */
.text-with-image-block {
  width: 1062px;
  min-height: 128px;
  /* Ensure content pushes beyond this */
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  position: relative;
  box-sizing: border-box;
  /* Ensures padding/borders are included in dimensions */
}

/* line 103, app/assets/stylesheets/video_process.scss */
.text-with-image-block-payment {
  width: 1062px;
  height: 250px;
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  position: relative;
  box-sizing: border-box;
  /* Ensures padding/borders are included in dimensions */
}

/* line 113, app/assets/stylesheets/video_process.scss */
.text-with-image-block-close-project {
  width: 1062px;
  height: 550px;
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  position: relative;
  box-sizing: border-box;
  /* Ensures padding/borders are included in dimensions */
}

/* line 123, app/assets/stylesheets/video_process.scss */
.text-with-image-block-adjusted {
  width: 1062px;
  min-height: 128px;
  /* Ensure content pushes beyond this */
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  position: relative;
  box-sizing: border-box;
  /* Ensures padding/borders are included in dimensions */
  padding-left: 80px;
  padding-right: 80px;
  text-align: center;
}

/* line 137, app/assets/stylesheets/video_process.scss */
.image-from-image-text-block {
  position: absolute;
  top: -55px;
  width: 110px;
  height: 110px;
  left: 50%;
  transform: translateX(-50%);
}

/* line 146, app/assets/stylesheets/video_process.scss */
.video_occasion .occasion {
  width: 1006px;
  height: 380px;
  padding: 54px 124px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
}

/* line 161, app/assets/stylesheets/video_process.scss */
.video_occasion .occasion select {
  display: flex;
  padding: var(--is_16px, 16px) var(--is_40px, 40px);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--Blue, #F2FCFF);
  color: rgba(32, 31, 31, 0.5);
}

/* line 174, app/assets/stylesheets/video_process.scss */
.video_occasion .occasion select option {
  color: var(--text-gray, #6B7280);
  /* Set gray text color */
  background: var(--Blue, #F2FCFF);
  /* Ensure options have the same background */
}

/* line 180, app/assets/stylesheets/video_process.scss */
.text-with-image-block-occasion {
  width: 1062px;
  height: 198px;
  /* Ensure content pushes beyond this */
  border-radius: 10px;
  border: 1px solid var(--linear-2-transparent-20, #C9E1FF);
  background: var(--White, #FFF);
  box-shadow: 4px 4px 20px 5px rgba(13, 103, 131, 0.1);
  position: relative;
  box-sizing: border-box;
  /* Ensures padding/borders are included in dimensions */
  padding: 49px 135px;
  text-align: center;
}

/* line 193, app/assets/stylesheets/video_process.scss */
.image-from-image-text-block-occasion {
  position: absolute;
  top: -55px;
  width: 110px;
  height: 110px;
  left: 50%;
  transform: translateX(-50%);
}

/* line 202, app/assets/stylesheets/video_process.scss */
.custom-calendar-container {
  position: relative;
  /* Make this container the reference point for pseudo-elements */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  /* Content background */
  max-width: 350px;
  z-index: 1;
  /* Ensure the container's content appears above the pseudo-elements */
}

/* line 214, app/assets/stylesheets/video_process.scss */
.custom-calendar-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  /* Same radius as the container */
  background: linear-gradient(205.68deg, #C9E1FF 19.49%, #0D6783 60.63%, #163F50 90.92%);
  z-index: -2;
  /* Place behind the container content */
}

/* line 226, app/assets/stylesheets/video_process.scss */
.custom-calendar-container::after {
  content: "";
  position: absolute;
  top: 2px;
  /* Adjust for the inner "border" */
  left: 2px;
  width: calc(100% - 4px);
  /* Subtract inner spacing for the border effect */
  height: calc(100% - 4px);
  /* Subtract inner spacing for the border effect */
  border-radius: 6px;
  /* Inner radius slightly smaller */
  background: white;
  /* Matches the container's background */
  z-index: -1;
  /* Between the gradient and content */
}

/* line 238, app/assets/stylesheets/video_process.scss */
.custom-calendar {
  width: 100%;
}

/* line 242, app/assets/stylesheets/video_process.scss */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* line 249, app/assets/stylesheets/video_process.scss */
.calendar-header button {
  background: transparent;
  color: #201f1f;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

/* line 260, app/assets/stylesheets/video_process.scss */
.calendar-header span {
  font-weight: bold;
}

/* line 264, app/assets/stylesheets/video_process.scss */
.calendar-days,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

/* line 271, app/assets/stylesheets/video_process.scss */
.day-name {
  text-align: center;
  font-weight: bold;
  color: #201f1f;
}

/* line 277, app/assets/stylesheets/video_process.scss */
.calendar-day {
  font-family: Red Hat Display;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* line 290, app/assets/stylesheets/video_process.scss */
.calendar-day.selected {
  background: linear-gradient(247.64deg, #0D6783 0%, #163F50 100%);
  color: white;
}

/* line 295, app/assets/stylesheets/video_process.scss */
.calendar-day.other-month {
  color: #bbb;
}

/* line 299, app/assets/stylesheets/video_process.scss */
.calendar-day:hover {
  background: linear-gradient(205.68deg, #C9E1FF 19.49%, #0D6783 60.63%, #163F50 90.92%);
  color: white;
}

/* line 303, app/assets/stylesheets/video_process.scss */
.preview-big-image-block {
  width: 756px;
  height: 423px;
  border-radius: 20px;
}

/* line 309, app/assets/stylesheets/video_process.scss */
.add-more-preview-circle {
  width: 108px;
  height: 108px;
  cursor: pointer;
}

/* line 318, app/assets/stylesheets/video_process.scss */
.preview-small-image-block {
  width: 108px;
  height: 108px;
  border: 1px dotted black;
  border-radius: 5px;
}

/* line 324, app/assets/stylesheets/video_process.scss */
.w-108 {
  width: 108px;
}

/* line 327, app/assets/stylesheets/video_process.scss */
.big-preview-image {
  width: 756px;
  /* Fit within the block */
  height: 100%;
  /* Fit within the block */
  display: block;
  border-radius: 20px;
  object-fit: cover;
}

/* line 334, app/assets/stylesheets/video_process.scss */
.delete-preview-icon-btn {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 90px;
  margin-top: -95px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Regular-c5f80b4d5d3b7ac845db58744bd04adc31335ff24e8815abc7bcc49ed5dad999.ttf) format('truetype');
  font-weight: 400; /* Normal */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Italic-9dae523e1b6a67afd887b19cf4a6796d3b7e9b423acc66f7b5b060c9145011a4.ttf) format('truetype');
  font-weight: 400; /* Normal */
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Bold-7fe5a13c5ec3c12dd69437346bd2e0266658e431107055954ec55f0ce2752666.ttf) format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-BoldItalic-4141169ceb83d543125e564b84416c4311186b3f4835339350df9f2ea2d2cfb0.ttf) format('truetype');
  font-weight: 700; /* Bold */
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light-7c9543d0df00580e9a26b95bfe45904ed34da2292ae5e5bb6068a7946c8ed32c.ttf) format('truetype');
  font-weight: 300; /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-LightItalic-8308331739c09659f20575341058d6e87d1cb074e6231f3c0c40a40b60410f21.ttf) format('truetype');
  font-weight: 300; /* Light */
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Medium-d327e3e6012cb6b4c5743271ac19192fcf6d2e6f8027cf4ba51a9e7114c1a436.ttf) format('truetype');
  font-weight: 500; /* Medium */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-MediumItalic-01765b6878e3a6359c6e31c8e3a8116cc1612fa5d203ba1b3087614f6ffe5287.ttf) format('truetype');
  font-weight: 500; /* Medium */
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-SemiBold-4c1345f6b7e86efbbb5235247c0a4f4055bc63559cfd2149053a215c61eaed56.ttf) format('truetype');
  font-weight: 600; /* SemiBold */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-SemiBoldItalic-33d14daa5cb9c4a38c63b2fc7d93f0c5fe721f77b211c180ec30bcffe295feb0.ttf) format('truetype');
  font-weight: 600; /* SemiBold */
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-ExtraBold-f091380fc4aa14a7b274e185f74666cc2a80febfa88003f1b50a44828fd9de83.ttf) format('truetype');
  font-weight: 800; /* ExtraBold */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-ExtraBoldItalic-72fcb9e43270e64dc6c2aebe6df3f2eba025fdf4c1f5b18ba9886f1c6db66f3a.ttf) format('truetype');
  font-weight: 800; /* ExtraBold */
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Black-2b481c04ba2787703149b359f0c05f18686599bf59d76884f3f889abbb5da46b.ttf) format('truetype');
  font-weight: 900; /* Black */
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-BlackItalic-4b61a8531204a9935462eda02b0268a48963c631bb03ae60dbbbc9f66eb3f36a.ttf) format('truetype');
  font-weight: 900; /* Black */
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-Black-e42171ebc30810bcf23e87d2167c9ef84b3216a7d668a3070635e922f165e361.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-BlackItalic-529b2d645a67f28382d16ea20bd78ca737e3b9695526632895e90d8260fe5270.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-Bold-1ab8e8bf0a15e1d45996991ad6440d742a318c8ce34f605c24a18343820d8072.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-BoldItalic-d68d02f1f43e4d558288ea6a96e9a461391c0a477e7833ba6aa0d554fbd6cbaf.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-ExtraBold-261aff2faec24dc3782230c5ffda18261e69040aa693376092da1f858478bfa5.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-ExtraBoldItalic-43d7ae905d3aca5651043a7c78ee66c38b07f2c574cbc29f3ba7cf416ea2da6f.ttf) format('truetype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-Italic-f597ba5813129966bd87946bfd1b3425123bb0ce9c876b7e37ce7b48da80bdd9.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-Light-16475cfedf83a29fa586cd64ad9aeb0f74b80693ca03b69c2e5cb57157b50a51.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-LightItalic-37d87b91fcd836938a6d9cbf3bd6e5cd3af20322b69cebcc11a8b94cac3a43ed.ttf) format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-Medium-a5e56a309e9e5ba407409c50e41d5cbd7c17db60818109b34339a9d4163fae32.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-MediumItalic-69ee5054baf8b905f6630f12cf63ab6df2e7f85675d9cdacb780794a64a7a03c.ttf) format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-Regular-d1b4fa860fa0e633ac163042c4742cd0e340c8ce871b86c8ab041e3de070349f.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-SemiBold-278b9809d7f474a7263d3e06601e0abe86b38a5db0cbc2ff6e0a15d9d24046a5.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url(/assets/RedHatDisplay/RedHatDisplay-SemiBoldItalic-64fe312b909fbf2c54c4e5e7bdd5e765047eab39020deeb2b7e0ed7a2ad53566.ttf) format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* Arial Font Family */
@font-face {
  font-family: 'Arial';
  src: url(/assets/fonts/Arial-Normal-62f023672e5b8fff9611db4a60e9512e2b26dd39665d7194aa35e25fec946873.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Arial';
  src: url(/assets/fonts/Arial-ltalic-d0b37f6c5e4f8198c9bc9211aeb2f5050a39fc74cc34f019c0f6fb3e2e3ce730.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Arial';
  src: url(/assets/fonts/Arial-Bold-0e0e81c4b380539c8f9babbfe4559fce9a1ecd23e09190d70633054fa0ac7ca5.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Arial';
  src: url('/assets/fonts/Arial-Bold Italic-29ec8265a77268ec699fc1a7f6297517e2f8132360168653bcb30fac6845aec0.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/* Courier New Font Family */
@font-face {
  font-family: 'Courier New';
  src: url('/assets/fonts/Courier New-Normal-0cc67739fa05bd166050bdd9033e76b43960fc4050b1df1b9e67a73d1904c61e.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Courier New';
  src: url('/assets/fonts/Courier New-Italic-d88ef05862acf8f466e481b8b4560a882cee3c1d909e38e8c97f6a916847e077.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Courier New';
  src: url('/assets/fonts/Courier New-Bold-f7b84ecd0b39be74862fe9f23fb3fc3127123f9d98e831e738bafd5c844e1aac.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Courier New';
  src: url('/assets/fonts/Courier New-Bold Italic-e76f016e2f7addebba2aa33a59ddcb8f332f5a3d08a8149303d82f6261bb6562.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/* Helvetica Font Family */
@font-face {
  font-family: 'Helvetica';
  src: url(/assets/fonts/Helvetica-Normal-2a19cfcfaefe61921dee1d29e026db87dfc32b07bcfd0137d45acd428406d9be.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url(/assets/fonts/Helvetica-Italic-544cb71499ab01022627d2cb2700558ae63f4715cf67c4af62de2f1a942fcb40.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Helvetica';
  src: url(/assets/fonts/Helvetica-Bold-619a0245ad22e12909bcab7a40001c1e03022749dcae40d929cfa46fc42f2a7a.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('/assets/fonts/Helvetica-Bold Italic-3be11cb5cc8cec03f8754c5e152a4a4dd67e385ec0fad84a3305c86e4e23e931.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/* Poppins Font Family */
@font-face {
  font-family: 'Poppins';
  src: url(/assets/fonts/Poppins-Normal-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url(/assets/fonts/Poppins-Italic-8b57f14205fc142012df910e67a3d62fc3e8f08f1c9c790f7b58fd8bf923fe68.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Poppins';
  src: url(/assets/fonts/Poppins-Bold-542ca15de37ab3bcf41f3ee5fdb9a8a4ba3346a27998196101a9a01a0f4ce0d8.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Bold Italic-13444103c4e6eda4c7737bd057ccd069a752fc6ac80398cdaabee980d0cc7f26.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/* Times New Roman Font Family */
@font-face {
  font-family: 'Times New Roman';
  src: url('/assets/fonts/Times New Roman-Normal-463aad5cfdbbdee9bfc8130832f2287912670609511cd9c117808fd8aa646940.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('/assets/fonts/Times New Roman-Italic-1bbba43dd80726d305ab3542c6f7a09ba13779010a16933cf344cba8493678f7.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('/assets/fonts/Times New Roman-Bold-0c6e5ee0539de1a2085b3c11aeac79fe13a66babed8acb350a873244d9ca88d7.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('/assets/fonts/Times New Roman-Bold Italic-b77ce79a9caa9a2f54473753203ca354647a25fbf1e9c3eb654aac8b4b1ae40b.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/* Verdana Font Family */
@font-face {
  font-family: 'Verdana';
  src: url(/assets/fonts/Verdana-Normal-60fb42700a3586e2607d92940afa994127d1e26a42c948e4b98d6e4db0922f60.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Verdana';
  src: url(/assets/fonts/Verdana-Italic-18f1dd154f79a880b8653176d7befbaac5558c93ed5759d2907a149302d50702.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Verdana';
  src: url(/assets/fonts/Verdana-Bold-91cb87dea162d3e75e5e10e9633d680701d0adb32c337ce3bdf595232121b7f1.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Verdana';
  src: url('/assets/fonts/Verdana-Bold Italic-da919c9ec8e79031a31b58e9e525013c7abbc9a01cfec8b94ef64800e1f1f2be.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}