/*========================================
=            Transition mixin            =
=========================================*/
/*=====  End of Transition mixin  ======*/
/*=============================================
=            Force 3D Acceleration            =
=============================================*/
/*=====  End of Force 3D Acceleration  ======*/
/*======================================
=            Truncate Lines            =
=======================================*/
/*=====  End of Truncate Lines  ======*/
/*=============================================
=            Truncate Single Line            =
=============================================*/
/*=====  End of Truncate Single Line  ======*/
/*========================================
=            Fluid Typography            =
========================================*/
/*=====  End of Fluid Typography  ======*/
/*==================================
=            Font-Style            =
===================================*/
/*=====  End of Font-Style  ======*/
/*=============================================
=            Aspect Ratio Box            =
=============================================*/
/*=====  End of Aspect Ratio Box  ======*/
/*======================================
=            SCROLLABLE BOX            =
=======================================*/
/*=====  End of SCROLLABLE BOX  ======*/
/*======================================
=            GAP FOR FLEXBOX           =
=======================================*/
/*=====  End of GAP FOR FLEXBOX  ======*/
/*======================================
=               LABELS                 =
=======================================*/
/*======================================
=               BOX                    =
=======================================*/
.ctaRoot {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 1.25rem 0rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
.ctaRoot.withCodeExample {
  flex-direction: row;
}
@media (max-width: 640px) {
  .ctaRoot {
    flex-direction: column !important;
  }
}

.ctaContainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 5rem 0 5rem 4rem;
  text-align: left;
  row-gap: 4rem;
}
@media (max-width: 640px) {
  .ctaContainer {
    padding: 5rem 2.5rem;
  }
}
.ctaContainer p {
  font-family: var(--ff-inter);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.0175rem;
  margin: 0 auto;
}
.ctaContainer h1 {
  font-family: var(--ff-inter);
  font-size: 3rem;
  font-weight: 600;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 2rem;
}
.ctaContainer h1 strong {
  color: var(--orange-gradient);
}
@media (max-width: 640px) {
  .ctaContainer h1 {
    font-size: 2.5rem;
  }
}
.ctaContainer h2 {
  font-family: var(--ff-inter);
  font-size: 3rem;
  font-weight: 600;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 2rem;
}
.ctaContainer h2 strong {
  color: var(--orange-gradient);
}
@media (max-width: 640px) {
  .ctaContainer h2 {
    font-size: 2.5rem;
  }
}
.ctaContainer h3 {
  font-family: var(--ff-inter);
  font-size: 3rem;
  font-weight: 600;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 2rem;
}
.ctaContainer h3 strong {
  color: var(--orange-gradient);
}
@media (max-width: 640px) {
  .ctaContainer h3 {
    font-size: 2.5rem;
  }
}
.ctaContainer h4 {
  font-family: var(--ff-inter);
  font-size: 3rem;
  font-weight: 600;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 2rem;
}
.ctaContainer h4 strong {
  color: var(--orange-gradient);
}
@media (max-width: 640px) {
  .ctaContainer h4 {
    font-size: 2.5rem;
  }
}
.ctaContainer h5 {
  font-family: var(--ff-inter);
  font-size: 3rem;
  font-weight: 600;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 2rem;
}
.ctaContainer h5 strong {
  color: var(--orange-gradient);
}
@media (max-width: 640px) {
  .ctaContainer h5 {
    font-size: 2.5rem;
  }
}
.ctaContainer h6 {
  font-family: var(--ff-inter);
  font-size: 3rem;
  font-weight: 600;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 2rem;
}
.ctaContainer h6 strong {
  color: var(--orange-gradient);
}
@media (max-width: 640px) {
  .ctaContainer h6 {
    font-size: 2.5rem;
  }
}

.demoContainer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1;
}

.defaultTheme {
  background-color: var(--white);
  border: 0.125rem solid #e8e8e8;
  box-shadow:
    0px 3px 2px 0px rgba(20, 20, 21, 0.02),
    0px 0px 1px 0px rgba(114, 114, 115, 0.15),
    0px 7px 6px 0px rgba(20, 20, 21, 0.04),
    0px 12px 10px 0px rgba(20, 20, 21, 0.03),
    0px 22px 18px 0px rgba(20, 20, 21, 0.03),
    0px 42px 33px 0px rgba(20, 20, 21, 0.02),
    0px 100px 80px 0px rgba(20, 20, 21, 0.02);
}

.brightTheme {
  border: 0.125rem solid #fdc8b5;
  background-color: var(--orange-gradient);
  color: var(--white);
}
.brightTheme .codeExample {
  background-image: url('./CodeExample3.png');
}
.brightTheme .buttonSignUp {
  background-color: var(--white) !important;
  color: #e5541f !important;
}
.brightTheme .buttonContactSales {
  border: 0.125rem solid hsl(0, 0%, 100%) !important;
  color: var(--white) !important;
}
.brightTheme strong {
  color: var(--white) !important;
}

.darkTheme {
  border: 0.125rem solid var(--light-grey);
  background-color: var(--dark-black);
  color: var(--white);
}
.darkTheme .codeExample {
  background-image: url('./CodeExample2.png');
}

.buttonsContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}
@media (max-width: 640px) {
  .buttonsContainer {
    gap: 1rem;
  }
}

.buttonSignUp,
.buttonContactSales {
  font-family: var(--ff-inter);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 150%;
  display: block;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0.875rem 1.875rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition-duration: var(--t-normal);
  transition-property: background-color, border, opacity;
  transition-timing-function: ease;
}

.buttonSignUp {
  color: var(--white) !important;
  background-color: var(--orange-gradient);
}

.buttonContactSales {
  color: var(--orange-gradient);
  background-color: transparent;
  border: 0.125rem solid hsl(16, 100%, 57%);
}

.codeExample {
  background-image: url('./CodeExample1.png');
  background-size: cover;
  background-position: bottom right;
  width: 100%;
  padding-bottom: 59.25%;
}
@media (max-width: 640px) {
  .codeExample {
    margin-top: -4rem;
  }
}