/* =================== Flex properties ===============*/
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex_start {
  display: flex;
  justify-content: start;
  align-items: center;
}

.flex_end {
  display: flex;
  justify-content: end;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex_between_start {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.flex_align_end {
  display: flex;
  justify-content: center;
  align-items: end;
}

.max_width {
  width: 1400px;
  margin: auto;
}

.banner {
  background: linear-gradient(to right, #5826b4, #2d16a7);
}

.grad_btn {
  background: linear-gradient(to right, #9336deb8 4%, #3017ac 50%);
}

/* ================== Background Images section ================== */
.Hero_bg,
.RI_bg,
.customBg,
.caseStudy,
.LSMbg,
.CWAbg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Hero_bg {
  background-image: url("../images/HeroBg.png");
}

.RI_bg {
  background-image: url("../images/RIbg.png");
}

.customBg {
  background-image: url("../images/customBg.png");
}

.caseStudy {
  background-image: url("../images/caseStudyBg.png");
}

.LSMbg {
  background-image: url("../images/LMGbg.png");
}

.CWAbg {
  background-image: url("../images/CWAbg.png");
}

.clipRule {
  background: linear-gradient(90deg, #5826b4 0%, #2d16a7 100%);
}

.dropdown-trigger {
  transition: all 0.1s ease-in-out;
}

.slick-track {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
}

.top_line_color {
  background: linear-gradient(90deg, #cfa8ff 0%, #7a5fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.linearGradient {
  background: linear-gradient(90deg, #5826b4 0%, #2d16a7 100%);
}

.cardLinearGradient {
  background: linear-gradient(133deg, #4e23b1 0%, #874ad5 100%);
}

.dropdown-trigger {
  transition: all 0.1s ease-in-out;
}

.slick-track {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
}

.top_line_color {
  background: linear-gradient(90deg, #cfa8ff 0%, #7a5fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.comment_wrap .slick-track {
  gap: 28px;
}

/* ================= Footer Section ============ */
.footer_grad_txt {
  background: linear-gradient(90deg, #894bd6 0%, #3118a9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===================== MEDIA QUERIES ============*/
@media screen and (max-width: 1480px) {
  .max_width {
    width: 92% !important;
    margin: auto;
  }
}

@media screen and (max-width: 1130px) {
  .solution_dropdown {
    transform: translateX(-43%);
  }
}

@media screen and (max-width: 860px) {
  .solution_dropdown {
    transform: translateX(-34%);
  }
}

@media screen and (max-width: 767px) {
  .comment_wrap .slick-track {
    gap: 8px;
  }
}

/* Font Families */
.font-instrumentSans {
  font-family: InstrumentSans, sans;
}

.font-spaceGrotesk {
  font-family: SpaceGrotesk, sans-serif;
}

/* Max Widths */
.max-w-section {
  max-width: 1507px;
}

/* Font Sizes */
.text-titleSm {
  font-size: 58px;
}

.text-titleMd {
  font-size: 78px;
}

.text-titleLg {
  font-size: 98px;
}

.text-subtitleXs {
  font-size: 24px;
}

.text-subtitleSm {
  font-size: 26px;
}

.text-subtitleMd {
  font-size: 38px;
}

.text-paragraph {
  font-size: 12px;
}

.text-paragraphXs {
  font-size: 14px;
}

.text-paragraphSm {
  font-size: 16px;
}

.text-paragraphMd {
  font-size: 18px;
}

.text-paragraphLg {
  font-size: 20px;
}

.text-paragraphXl {
  font-size: 22px;
}

.text-paragraph2xl {
  font-size: 26px;
}

.text-paragraph3xl {
  font-size: 28px;
}

.text-paragraph4xl {
  font-size: 32px;
}

/* Colors */
.bg-bodyColor {
  background-color: #5b5b5c;
}

.bg-white {
  background-color: #ffffff;
}

.bg-colors {
  background-color: #fafafacc;
}

.bg-backgroundOne {
  background-color: #f9fafb;
}

.bg-backgroundTwo {
  background-color: #fafafa;
}

.bg-backgroundThree {
  background-color: #f7f7f7;
}

.text-textColor {
  color: #000205;
}

.bg-black {
  background-color: #212121;
}

.border-borderColor {
  border-color: #d0cfcf;
}

.bg-backgroundFour {
  background-color: #fbfbfb;
}

.bg-backgroundFive {
  background-color: #000814;
}

.bg-paragraphText {
  background-color: #fafafacc;
}

.bg-blue {
  background-color: #361aaa;
}

.text-darkText {
  color: #212121;
}

.text-lightGray {
  color: #5b5b5c;
}

.text-newBlack {
  color: #000205;
}

/* Linear Gradients (These are a bit tricky and might need adjustments) */
.bg-linearGradient {
  /* These will likely NOT work as expected.  Linear gradients are background *images*, not background *colors*. */
  background-image: linear-gradient(89.57deg, #5826b4 1.18%, #2d16a7 98.87%);
}

.bg-linearGradientTwo {
  background-image: linear-gradient(90deg, #894bd6 0%, #3118a9 100%);
}

.bg-linearGradientThree {
  background-image: linear-gradient(
    82.45deg,
    rgba(147, 54, 222, 0.8) 1.19%,
    #3017ac 55.1%
  );
}

/* Paragraph Text */
.text-paragraphText {
  background: #fafafacc;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important;
  /* IE and Edge */
  scrollbar-width: none !important;
  /* Firefox */
}

.paused {
  animation-play-state: paused;
}

/* Components */
.grad_btn {
  color: white;
  border-radius: 8px;
  font-size: 14px;
}

.hero_btn {
  background-color: #250f80;
  border: 2px solid #250f80;
  width: 200px;
  border-radius: 6px;
  height: 50px;
  color: white;
  font-size: 16px;
  transition: all 0.15s ease-in-out;
}

.hero_btn:hover {
  background-color: #250f808c;
}

.home_btn {
  background-color: #361aaa;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  transition: all 0.15s ease-in-out;
}

.home_btn:hover {
  background-color: #260f80e6;
}

.transparent_btn {
  background-color: transparent;
  width: 200px;
  border: 2px solid white;
  border-radius: 6px;
  height: 50px;
  color: white;
  font-size: 16px;
  transition: all 0.15s ease-in-out;
}

.transparent_btn:hover {
  background-color: white;
  color: #361aaa;
}

.footer_input {
  background-color: transparent;
  border: 1px solid #4d525f;
  color: white;
  font-weight: 300;
  font-size: 14px;
  border-radius: 8px;
  width: 100%;
  padding: 0 16px;
  height: 60px;
  outline: none;
}

.footer_input:focus {
  border-color: #361aaa;
  box-shadow: 0 0 0 2px #361aaa;
}

.gray_input {
  background-color: transparent;
  border: 0.5px solid #a6a6a6;
  color: white;
  font-weight: 300;
  font-size: 14px;
  border-radius: 8px;
  width: 100%;
  padding: 0 16px;
  height: 48px;
  outline: none;
}

.gray_input:focus {
  border-color: #361aaa;
  box-shadow: 0 0 0 2px #361aaa;
}

.gray_textarea,
.footer_textarea {
  background-color: transparent;
  border-radius: 8px;
  color: white;
  font-weight: 300;
  font-size: 14px;
  width: 100%;
  padding: 16px;
  min-height: 144px;
  /* 36 * 4 */
  height: 144px;
  outline: none;
}

.gray_textarea {
  border: 0.5px solid #a6a6a6;
}

.footer_textarea {
  border: 1px solid #4d525f;
}

.gray_textarea:focus,
.footer_textarea:focus {
  border-color: #361aaa;
  box-shadow: 0 0 0 2px #361aaa;
}

.outline-btn {
  cursor: pointer;
  padding: 6px 35px;
  margin-top: 12px;
  font-weight: 500;
  color: white;
  border: 1px solid rgb(208 207 207 / var(--tw-border-opacity, 1));
  border-radius: 5px;
}

@media (min-width: 768px) {
  .outline-btn {
    padding: 13px 40px;
    font-size: var(--paragraph);
  }
}

@media (min-width: 1024px) {
  .outline-btn {
    padding: 13px 58px;
    font-size: var(--paragraphXs);
    margin-top: 25px;
  }
}

.webinar-tag,
.web-blog-tag {
  position: absolute;
  padding: 8px 25px;
  top: 0;
  right: 0;
  background-color: white;
  font-weight: 600;
}

.webinar-tag {
  border-radius: 8px 8px 8px 0;
}

.web-blog-tag {
  border-radius: 8px 5px 8px 0;
}

@media (min-width: 768px) {
  .webinar-tag,
  .web-blog-tag {
    padding: 11px 37px;
  }
}

.slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slides {
  display: flex;
  animation: scroll 15s linear infinite;
}

.slide {
  flex-shrink: 0;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}