/* Theme Specific Classes */
/* === Buttons === */
.btn-primary {
  background-color: #00bfff;
  border-color: #00bfff;
  color: #fff;
  padding: 10px;
  margin: 15px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #009acd;
  border-color: #009acd;
  color: #fff;
  padding: 10px;
  margin: 15px;
}

.btn-secondary {
  background-color: #ff69b4;
  border-color: #ff69b4;
  color: #1a1a1a;
  padding: 10px;
  margin: 15px;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #ff69b4;
  border-color: #fcfcfc;
  color: #ffffff;
  padding: 10px;
  margin: 15px;
}

.btn-accent {
  background-color: #bfff00;
  border-color: #bfff00;
  color: #000;
  padding: 10px;
  margin: 15px;
}

.btn-accent:hover {
  background-color: #bfff00;
  color: #ff69b4;
}

/* === Links === */
a {
  color: #00bfff;
  text-decoration: underline;
}

a:hover,
a:focus {
  color: #ff69b4;
  text-decoration: none;
}

/* === Callouts / Highlights === */
.highlight {
  background-color: #57ebff;
  color: #1a1a1a;
  padding: 0.75rem;
  border-left: 5px solid #000000;
  border-radius: 0.25rem;
}

.highlight:hover {
  background-color: #bfff00;
}

.callout {
  max-height: 3rem !important;
}

.alert-accent {
  background-color: #ffeaea;
  color: #1a1a1a;
  border-left: 5px solid #FF003C;
  padding: 1rem;
  margin-top: 1rem;
}

.contact-teaser-container {
  padding: 40px;
}

/* === Utility Classes === */
.bg-dark {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

.bg-light {
  background-color: #f0f0f0 !important;
  color: #1a1a1a !important;
  margin: none;
}

.bg-brand-blue {
  background-color: #c4ecfa !important;
  color: #fff !important;
  margin: none;
}

.bg-brand-yellow {
  background-color: #f6f1c4 !important;
  color: #1a1a1a !important;
}

.bg-brand-pink {
  background-color: #fbe8f1 !important;
  background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 60%), radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  background-blend-mode: overlay;
  color: #1a1a1a !important;
}

.text-accent {
  color: #FF003C !important;
}

.text-green {
  color: #bfff00;
}

.border-accent {
  border-left: 3px solid #FF003C;
}

.outline-black {
  border: 2px black solid;
}

/* This creatas the gradient text in the hero */
.gradient-text {
  /* Use your brand colors for the gradient */
  background: -webkit-gradient(linear, left top, right top, from(#ff69b4), color-stop(#bfff00), color-stop(#ffeb3b), color-stop(#bfff00), to(#ff69b4));
  background: linear-gradient(to right, #ff69b4, #bfff00, #ffeb3b, #bfff00, #ff69b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: clamp(7rem, 6vw, 13rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Custom styling to blur nav bar into heading section */
.sca-nav {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, black), color-stop(55%, #0b0b0b), color-stop(65%, #121212), color-stop(95%, #1a1a1a));
  background: linear-gradient(180deg, black 30%, #0b0b0b 55%, #121212 65%, #1a1a1a 95%);
}

/* Custom footer top tagline container with plenty of vertical padding */
footer {
  width: 100%;
}

.footer-top {
  position: relative;
  padding-bottom: 6rem;
}

.sca-tagline-container {
  background: linear-gradient(135deg, #f7f7f7 0%, #f2f1f1 100%);
  padding-top: 4rem;
  /* 64px */
  padding-bottom: 10rem;
  /* 64px */
  position: relative;
  z-index: 1;
  /* Keep text above background but below logo */
}

.sca-tagline {
  padding: 5rem;
}

/* Logo styling */
.sca-logo-wrapper {
  z-index: 2;
  /* Make sure logo is above tagline */
  padding: 0 auto 0 auto;
  width: 100px;
  /* or however wide your logo should be */
  z-index: 2;
}

.sca-footer-logo {
  position: absolute;
  display: block;
  margin-top: -6rem;
  height: auto;
  width: 100px;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* subtle shadow for better contrast */
  border-radius: 90px;
  /* if you want rounded corners */
  border: 2px solid #333;
  -webkit-transition: border-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: border-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: border-color 0.3s ease, transform 0.3s ease;
  transition: border-color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-animation: fadeInScale 1.2s ease forwards;
          animation: fadeInScale 1.2s ease forwards;
}

.sca-footer-logo:hover {
  border-color: #bfff00;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@-webkit-keyframes fadeInScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* hover animation on headshot */
img.headshot {
  width: 100%;
  max-width: 300px;
  border-radius: 50%;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

img.headshot:hover {
  content: url("/assets/img/nia-kid.png");
}

/* image hover effects */
.hover-image:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}

.image-hover-zoom {
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  cursor: pointer;
}

.image-hover-zoom:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* Hero gradient */
.hero {
  background: linear-gradient(135deg, black 85%, limegreen 100%);
}

.sca-cover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, black), color-stop(75%, #2f2f2f), to(#f7f8f7));
  background: linear-gradient(180deg, black 45%, #2f2f2f 75%, #f7f8f7 100%);
}

/* additional styling for cards */
.sca-intro-card {
  border: solid 2px #bfff00;
}

.sca-intro-card:hover {
  background-color: #fbe8f1;
  border: solid 2px #ff69b4;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

.card:hover {
  border: solid 2px #ff69b4;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

/* Styles Carousel Cards */
.review-card {
  padding: 2rem;
  background-color: #f8f9fa;
  border: solid 2px #d4d5d5;
  border-radius: 0.75rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  height: 300px;
}
/*# sourceMappingURL=main.css.map */