:root {
  --color-primary: hsla(217, 100%, 50%, 1);
  --color-light-blue: hsla(199, 89%, 48%, 1);
  --color-lighter-blue: hsla(189, 94%, 43%, 1);
  --color-light-03: hsla(210, 2%, 23%, 1);
  --color-pink: hsla(330, 81%, 60%, 1);
  --color-red: hsla(0, 84%, 60%, 1);
  --color-purple: hsla(258, 90%, 66%, 1);
  --color-green: hsla(160, 84%, 39%, 1);
  --color-orange: hsla(38, 92%, 50%, 1);
  --color-gray-lightest: hsla(218, 5%, 71%, 1);
  --color-gray-light: hsla(228, 2%, 45%, 1);
  --color-grey-dark: hsla(240, 10%, 6%, 1);
  --color-grey-darker: hsla(240, 6%, 10%, 1);
}

@theme {
  --banner-height: 600px;
}

/* Banner Slide Animations */
.castr-banner-slides {
  position: relative;
  overflow: hidden;
}

.castr-banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px) scale(0.95);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.castr-banner-slide--active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 3;
}

.castr-banner-slide--exiting {
  opacity: .125;
  transform: translateX(-30px) scale(0.95);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* Stagger animation for slide content */
.castr-banner-slide--active .castr-banner-slide-content {
  animation: slideContentIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

.castr-banner-slide--active .castr-banner-slide-image {
  animation: slideImageIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

.castr-banner-slide--active .castr-banner-slide-text {
  animation: slideTextIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.castr-banner-slide--active .castr-banner-slide-text h2 {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}

.castr-banner-slide--active .castr-banner-slide-text .flex {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* Tab transition animation */
.castr-banner-tab {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}

.castr-banner-tab:hover {
  transform: scale(1.05);
}

.castr-banner-tab--active {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Keyframe Animations for Banner Slides */
@keyframes slideContentIn {
  from {
    opacity: .75;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideImageIn {
  from {
    opacity: 0;
    transform: translateX(-230px) scale(1.05);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideTextIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar-collapse.collapse {
  visibility: visible;
}

.bg-main-color {
  background-color: var(--color-primary);
}

.text-main-color {
  color: var(--color-primary);
}

.text-gray-light {
  color: var(--color-gray-light);
}

.text-light-blue {
  color: var(--color-light-blue);
}

.text-light-03 {
  color: var(--color-light-03);
}

.bg-gray-lightest {
  background-color: var(--color-gray-lightest);
}

.bg-light-blue {
  background-color: var(--color-light-blue);
}

.bg-gray-dark {
  background-color: var(--color-grey-dark);
}

.bg-grey-darker {
  background-color: var(--color-grey-darker);
}

.bg-gray-light {
  background-color: var(--color-gray-light);
}

.text-gray-lightest {
  color: var(--color-gray-lightest);
}

.faq-dark-2025 a {
  color: var(--color-primary);
}

.castr-banner-slides,
.castr-banner-slides:hover {
  cursor: url('../images/cursor-custom.svg') 0 0, pointer;
}

.castr-banner-tabs button:nth-of-type(1):hover,
.castr-banner-tabs button:nth-of-type(1).castr-banner-tab--active {
  background-color: var(--color-light-blue);
}

.castr-banner-tabs button:nth-of-type(4):hover,
.castr-banner-tabs button:nth-of-type(4).castr-banner-tab--active {
  background-color: var(--color-pink);
}

.castr-banner-tabs button:nth-of-type(7):hover,
.castr-banner-tabs button:nth-of-type(7).castr-banner-tab--active {
  background-color: var(--color-purple);
}

.castr-banner-tabs button:nth-of-type(5):hover,
.castr-banner-tabs button:nth-of-type(5).castr-banner-tab--active {
  background-color: var(--color-green);
}

.castr-banner-tabs button:nth-of-type(6):hover,
.castr-banner-tabs button:nth-of-type(6).castr-banner-tab--active {
  background-color: var(--color-orange);
}

.castr-banner-tabs button:nth-of-type(3):hover,
.castr-banner-tabs button:nth-of-type(3).castr-banner-tab--active {
  background-color: var(--color-lighter-blue);
}

.castr-banner-tabs button:nth-of-type(2):hover,
.castr-banner-tabs button:nth-of-type(2).castr-banner-tab--active {
  background-color: var(--color-red);
}

.castr-banner-slides .castr-banner-slide:nth-of-type(1) .castr-banner-slide-content {
  background: linear-gradient(96deg, #009DFF 27.22%, rgba(0, 38, 255, 0.00) 91.43%), linear-gradient(180deg, #0059FF -8.07%, rgba(0, 0, 0, 0.00) 96.81%), #0E0E11;
}

.castr-banner-slides .castr-banner-slide:nth-of-type(4) .castr-banner-slide-content {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.40) -22.5%, rgba(236, 72, 153, 0.00) 68.25%), radial-gradient(165.09% 128.97% at 5.24% 6.5%, #EC4899 19.76%, rgba(236, 72, 153, 0.00) 100%), #0E0E11;
}

.castr-banner-slides .castr-banner-slide:nth-of-type(7) .castr-banner-slide-content {
  background: radial-gradient(92.67% 48.39% at 100% 88.83%, rgba(139, 92, 246, 0.40) 0%, rgba(139, 92, 246, 0.00) 100%), radial-gradient(124.72% 92.24% at 3.99% 6.67%, #8B5CF6 0%, rgba(139, 92, 246, 0.00) 100%), #0E0E11;
}

.castr-banner-slides .castr-banner-slide:nth-of-type(5) .castr-banner-slide-content {
  background: radial-gradient(100.57% 115.86% at 100% 0%, rgba(16, 185, 129, 0.50) 0%, rgba(16, 185, 129, 0.00) 63.55%), radial-gradient(132.38% 130.48% at 0% 0%, #10B981 0%, rgba(16, 185, 129, 0.00) 100%), #0E0E11;
}

.castr-banner-slides .castr-banner-slide:nth-of-type(6) .castr-banner-slide-content {
  background: radial-gradient(84.24% 114.43% at -19.68% 150.5%, #F59E0B 0%, rgba(245, 158, 11, 0.00) 100%), radial-gradient(86.45% 75.24% at 94.35% 5.17%, rgba(245, 158, 11, 0.70) 0%, rgba(245, 158, 11, 0.00) 100%), #0E0E11;
}

.castr-banner-slides .castr-banner-slide:nth-of-type(3) .castr-banner-slide-content {
  background: radial-gradient(112.52% 93.53% at 119.76% 136.83%, #06B6D4 0%, rgba(6, 182, 212, 0.00) 100%), radial-gradient(170.52% 102.15% at 0% 3.33%, #06B6D4 0%, rgba(6, 182, 212, 0.00) 100%), #0E0E11;
}

.castr-banner-slides .castr-banner-slide:nth-of-type(2) .castr-banner-slide-content {
  background: radial-gradient(121.85% 67.22% at 111.49% 113.92%, #EF4444 0%, rgba(239, 68, 68, 0.00) 100%), radial-gradient(144.67% 157.64% at -13.55% -25.08%, #EF4444 0%, rgba(239, 68, 68, 0.00) 100%), #0E0E11;
}

@keyframes slides {
  from {
    transform: translateX(0);
  }

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

.logo-slides-container {
  animation: 35s slides infinite linear;
}

.logo-slides-container {
  height: 44px;
}

.logo-slides .logo-slides-container img {
  height: 44px;
}

.logo-slides .logo-slides-container>div {
  display: inline-block;
  width: 200px;
}

.logo-slides:hover .logo-slides-container {
  animation-play-state: paused;
}

.logo-slides::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30vw;
  max-width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 10;
}

.logo-slides::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30vw;
  max-width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  z-index: 10;
}

.why-section.stack-cards .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.stack-cards {
  --stack-cards-gap: 48px;
  margin: 0 1rem;
  gap: 0;
}

.stack-cards__item {
  position: sticky !important;
  transform-origin: center top;
  top: 6rem;
  height: 600px;
}

.stack-cards__title {
  position: sticky !important;
  transform-origin: center top;
  top: 8rem;
  height: 400px;
}

.stack-cards__item_1:before {
  content: 'Why  Castr?';
  position: absolute;
  top: -4rem;
  left: 0;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 10;
}

.stack-cards__item>.elementor-container {
  border-radius: 24px;
  border: 1px solid #2E2E38;
  background: var(--color-grey-dark);
  padding: 16px;
  height: 100%;
  align-items: center;
}

.stack-cards .stack-cards__item img {
  display: block;
  margin: 0 auto;
  height: 212px;
  width: auto;
}

.testimonials-container {
  max-width: 1400px;
  max-height: 1200px;
}

.max-w-1\/3 {
  max-width: 33.33333333333333%;
}

.testimonial-item u {
  text-underline-offset: -4px;
  text-decoration-thickness: 8px;
  text-decoration-color: var(--color-primary);
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

.home .header .navbar .navbar-nav .nav-item .nav-link {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}

.home .header .navbar .navbar-nav .nav-item .nav-link img {
  position: static;
  opacity: 1;
}

.home .header {
  padding: .875rem 2rem;
}

.castr-banner-slide-content {
  max-height: 100%;
  overflow: hidden;
}

.castr-banner-slide-image {
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.castr-banner-slide-image img {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

@media (min-width: 1024px) {
  .castr-banner-slide {
    height: 420px;
    max-height: 420px;
  }

  .castr-banner-slide-content {
    height: 100%;
    max-height: 100%;
  }
  
  .castr-banner-slide-image {
    max-height: 100%;
  }
}

@media (min-width: 1240px) {
  .home .elementor-section.elementor-section-boxed>.elementor-container {
    max-width: 1400px;
  }

  .testimonial-item {
    max-width: 33.33333333333333%;
    min-width: 0;
  }

  .stack-cards {
    --stack-cards-gap: 96px;
    margin: 0em;
  }

  .stack-cards__item {
    height: 400px;
    top: 12rem;
  }

  .stack-cards__item>.elementor-container {
    padding: 36px 72px;
  }

  .stack-cards .stack-cards__item img {
    height: 270px;
    margin: 0 0 -.75rem auto;
  }

  .stack-cards__item_1:before {
    top: -7rem;
    font-size: 3rem;
  }

  .castr-banner-slide-image img {
    max-height: 100%;
  }
}

@media (min-width: 1536px) {
  .castr-banner-slide {
    height: 420px;
    max-height: 420px;
  }
}

@media (min-width: 1920px) {}

@media (min-width: 2500px) {}

.footer .btn--footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.two-links-container {
  z-index: 50000;
}

@media  only screen and (min-width: 1024px) and (min-height: 800px) {
  .castr-banner-slide {
    height: 100%;
    max-height: 100%;
  }
  
  .castr-banner-slide-content {
    max-height: 100%;
  }
  
  .castr-banner-slide-image {
    max-height: 100%;
  }

  .castr-main-banner {
    height: calc(100dvh - 110px);
  }

  .castr-main-banner-wrapper {
    height: calc(100% - 150px);
  }
}