/* Reset default browser styles for list */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

@font-face {
  font-family: IvyModeLight;
  src: url("/assets/fonts/IvyMode-Light.woff2") format("woff2"), url("/assets/fonts/IvyMode-Light.woff") format("woff"), url("/assets/fonts/IvyMode-Light.ttf") format("truetype");
  font-display: swap; }
body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-size: initial;
  background-repeat: repeat;
  background-image: url("/assets/images/crossword-1.png"); }

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal; }

input, textarea {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal; }

.container {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 20px; }

.section {
  padding: 8vh 0; }

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

.aC {
  text-align: center; }

.aL {
  text-align: left; }

.aR {
  text-align: right; }

.w-30 {
  width: 30%; }

.w-50 {
  width: 50%; }

.w-75 {
  width: 75%; }

.ma {
  margin: 0 auto; }

.mr-2 {
  margin-right: 2em; }

.ml-2 {
  margin-left: 2em; }

.mt-1 {
  margin-top: 1em !important; }

.mt-2 {
  margin-top: 2em !important; }

.mb-2 {
  margin-bottom: 2em; }

.mb-1 {
  margin-bottom: 1em; }

h3 {
  font-family: IvyModeLight; }

h2 {
  font-family: IvyModeLight; }

h1 {
  font-family: IvyModeLight; }

b {
  font-weight: 700; }

.button {
  display: block;
  width: 75%;
  margin: 0 auto 1em;
  border: none;
  padding: .5em 1.5em;
  border-radius: 4px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.8em;
  box-shadow: 0px 12px 18px -10px rgba(0, 0, 0, 0.3);
  text-align: center; }
  .button.purple {
    background-color: #5e2b7e;
    color: white; }
  .button.pink {
    background-color: #D94B95;
    color: white; }
  .button.yellow {
    background-color: #F4BD18;
    color: white;
    text-shadow: 0 2px 5px rgba(102, 79, 10, 0.9); }
  .button.red {
    background-color: #D32929;
    color: white; }
  .button.white {
    background-color: white;
    color: #5e2b7e; }

.bg-purple {
  background-color: #5e2b7e; }

.bg-lt-pink {
  background-color: #d6c9de; }

@media (max-width: 768px) {
  .container {
    max-width: 100%; }

  .button {
    width: 100%; }

  .section {
    padding: 4vh 0; } }
.overlay-c {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  display: none;
  pointer-events: none; }
  .overlay-c.active {
    display: flex;
    pointer-events: all; }
  .overlay-c .overlay-content {
    background: white;
    border-radius: 16px;
    padding: 2em;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
    text-align: center; }
  .overlay-c .close {
    position: absolute;
    top: 1em;
    right: 1em;
    cursor: pointer;
    color: white;
    font-size: 2em;
    text-shadow: 0 0 10px black; }
  .overlay-c .overlay-header {
    font-size: 1.6em;
    margin-bottom: 1em; }
  .overlay-c form {
    margin-top: 1em; }
    .overlay-c form input {
      border: none;
      font-size: 1em;
      padding: .5em;
      width: 80%;
      margin: 0 auto 1em;
      border-radius: 4px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
      text-align: center;
      display: block; }
    .overlay-c form .button {
      font-size: 1.4em;
      width: 80%;
      white-space: normal;
      cursor: pointer; }
  .overlay-c .overlay-body p {
    font-size: 1.2em; }

@media (max-width: 768px) {
  .overlay-c .close {
    top: .2em;
    right: .2em; }
  .overlay-c .overlay-content {
    padding: 2em 1em;
    width: 96%; }
  .overlay-c .overlay-body p {
    font-size: 1.3em; }
    .overlay-c .overlay-body p:first-child {
      margin-bottom: 1em; }
  .overlay-c form input {
    font-size: 1.2em; }
  .overlay-c form .button {
    font-size: 1.8em; }
  .overlay-c form input, .overlay-c form .button {
    width: 100%; } }
header {
  background: white;
  padding: 6vh 0; }
  header .logo {
    width: 14vw; }
    header .logo img {
      width: 100%; }

@media (max-width: 768px) {
  header {
    padding: 3vh 0 2vh; }
    header .flex {
      flex-direction: column;
      align-items: flex-start; }
    header .logo {
      width: 70vw; } }
/* Navbar container */
/* Main menu */
.nav-menu {
  list-style: none;
  display: flex; }

/* Menu items */
.nav-item {
  position: relative;
  /* For positioning dropdown */ }
  .nav-item a {
    font-family: IvyModeLight;
    font-weight: 600;
    font-size: 14px;
    color: #5e2b7e;
    text-transform: uppercase;
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    transition: background 0.3s; }
    .nav-item a:hover {
      opacity: .8; }

/* Dropdown menu */
.dropdown-menu {
  display: none;
  /* Hidden by default */
  position: absolute;
  background-color: white;
  min-width: 160px;
  list-style: none;
  top: 100%;
  /* Position below the parent */
  left: 0;
  z-index: 1000;
  border-top: 2px solid #5e2b7e; }
  .dropdown-menu li a {
    padding: 12px 16px;
    text-decoration: none;
    display: block; }

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block; }

/* Hamburger icon styles */
.nav-icon {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  display: none;
  pointer-events: none;
  cursor: pointer;
  padding: 20px;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1100; }
  .nav-icon span,
  .nav-icon span::before,
  .nav-icon span::after {
    display: block;
    background-color: #333;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    position: relative;
    transition: all 0.3s ease-in-out; }
  .nav-icon span::before,
  .nav-icon span::after {
    content: '';
    position: absolute;
    left: 0; }
  .nav-icon span::before {
    top: -8px; }
  .nav-icon span::after {
    top: 8px; }
  .nav-icon.active span {
    background-color: transparent; }
    .nav-icon.active span::before {
      transform: rotate(45deg);
      top: 0; }
    .nav-icon.active span::after {
      transform: rotate(-45deg);
      top: 0; }

#mobile-nav {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 100vw;
  height: 100vh;
  background: white;
  padding: 1em;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  z-index: 100; }
  #mobile-nav.active {
    transform: translate3d(100vw, 0, 0); }

/* Responsive adjustments (optional) */
@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    margin-top: 5vh; }
    .nav-menu li a {
      border-bottom: 3px solid rgba(94, 43, 126, 0.3); }
    .nav-menu li:last-child a {
      border-bottom: none; }

  .nav-item a {
    padding: 12px;
    font-size: 1.6em; }

  .navbar {
    display: none; }

  .nav-icon {
    display: block;
    pointer-events: all; }

  .dropdown-menu {
    display: block;
    position: static;
    border-top: none; }
    .dropdown-menu li a {
      padding-left: 10vw; }
    .dropdown-menu li:last-child a {
      border-bottom: 3px solid rgba(94, 43, 126, 0.3); } }
.hero {
  padding: 10vh 0;
  background-image: linear-gradient(90deg, #5e2b7e 0%, #d94b95 50%, #f4bd18 100%); }
  .hero h1 {
    font-weight: bold;
    font-size: 3em;
    color: white;
    text-align: center;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 2px; }
  .hero h2 {
    font-weight: bold;
    font-size: 1.4em;
    color: white;
    text-align: center;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 2px; }
  .hero a.button {
    margin-bottom: 0;
    margin-top: 2em;
    transition: all 0.3s ease; }
    .hero a.button:hover {
      background-color: #F4BD18;
      transform: translateY(-6px);
      text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8);
      box-shadow: 0px 14px 20px -10px rgba(0, 0, 0, 0.4);
      text-decoration: none;
      cursor: pointer;
      color: white; }

@media (max-width: 768px) {
  .hero {
    padding: 6vh 0; }
    .hero h1 {
      font-size: 2.2em; } }
.story .flex, .stepfamilies .flex {
  gap: 2em;
  align-items: flex-start;
  margin-bottom: 2em; }
.story img, .stepfamilies img {
  width: 100%;
  margin-bottom: 1em; }
.story .mobile-image, .stepfamilies .mobile-image {
  display: none; }
.story .image, .stepfamilies .image {
  display: block;
  flex: 1; }
.story .text, .stepfamilies .text {
  flex: 1.5; }
  .story .text p, .stepfamilies .text p {
    font-size: 1.2em; }
.story h2, .stepfamilies h2 {
  text-align: center;
  color: #5e2b7e;
  margin-bottom: .6em;
  font-size: 2.4em; }
  .story h2.quote, .stepfamilies h2.quote {
    font-size: 1.8em; }
.story h3, .stepfamilies h3 {
  text-align: center;
  margin-bottom: 4px;
  font-size: 1.8em; }
.story #x-btn-missing-piece-download, .stepfamilies #x-btn-missing-piece-download {
  margin: 1em 0 0 0;
  width: 100%; }
.story p.text, .stepfamilies p.text {
  font-size: 1.2em; }
.story .container > .flex > div, .stepfamilies .container > .flex > div {
  flex: 1; }

section.stepfamilies .flex {
  align-items: flex-start; }
section.stepfamilies h3 {
  font-size: 1.2em;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; }

@media (max-width: 768px) {
  .story .flex, .stepfamilies .flex {
    flex-direction: column; }
  .story .mobile-image, .stepfamilies .mobile-image {
    display: block; }
  .story .image, .stepfamilies .image {
    display: none; }
  .story h2, .story p, .stepfamilies h2, .stepfamilies p {
    text-align: center; }
  .story h2, .stepfamilies h2 {
    font-size: 2em;
    margin-top: 1em;
    margin-bottom: .5em; }
  .story .text p, .stepfamilies .text p {
    font-size: 1.4em; }
  .story #x-btn-missing-piece-download, .stepfamilies #x-btn-missing-piece-download {
    margin: 1em auto 0; } }
.mmc h2 {
  color: white;
  font-size: 2.6em;
  text-align: center;
  margin-bottom: 1em; }
.mmc h3 {
  color: #5e2b7e;
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 0.5em; }
.mmc .flex {
  gap: 2em;
  align-items: flex-start; }
  .mmc .flex > div {
    flex: 1; }
.mmc p {
  color: #5e2b7e;
  font-size: 1.3em;
  font-weight: 500; }
.mmc iframe {
  aspect-ratio: 16 / 9;
  width: 100%; }
.mmc .card {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0px 12px 18px -10px rgba(0, 0, 0, 0.3); }
  .mmc .card h2 {
    color: #5e2b7e; }
  .mmc .card .card-body {
    width: 80%;
    margin: 0 auto;
    text-align: left; }
  .mmc .card ul {
    margin: 1em auto 1.6em;
    font-size: 1.1em; }
  .mmc .card .button {
    width: 100%;
    transition: all 0.3s ease; }
    .mmc .card .button:hover {
      background-color: #F4BD18;
      transform: translateY(-6px);
      text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8);
      box-shadow: 0px 14px 20px -10px rgba(0, 0, 0, 0.4);
      text-decoration: none;
      cursor: pointer;
      color: white; }

.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 5px; }

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent; }

.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all; }

.youtube-player img:hover {
  filter: brightness(75%);
  -webkit-filter: brightness(75%); }

.youtube-player .play {
  height: 48px;
  width: 68px;
  left: 50%;
  top: 50%;
  margin-left: -34px;
  margin-top: -24px;
  position: absolute;
  background: url("https://i.ibb.co/j3jcJKv/yt.png") no-repeat;
  cursor: pointer; }

@media (max-width: 768px) {
  .mmc .flex {
    flex-direction: column; }
  .mmc h2, .mmc p {
    text-align: center; }
  .mmc p {
    font-size: 1.4em; }
  .mmc .w-75 {
    width: 100%; } }
.jim-nancy h2 {
  color: white;
  margin-bottom: .5em;
  font-size: 2.4em;
  text-align: center; }
.jim-nancy img {
  width: 100%;
  margin-bottom: 1em; }
.jim-nancy .flex {
  gap: 2em;
  align-items: flex-start;
  margin-bottom: 2em; }
.jim-nancy .container > .flex > div {
  flex: 1; }
.jim-nancy h3 {
  font-size: 1em;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
  color: white; }
.jim-nancy .button {
  width: 80%;
  transition: all 0.3s ease;
  margin-top: 1em; }
  .jim-nancy .button:hover {
    background-color: #F4BD18;
    transform: translateY(-3px);
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 14px 20px -10px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    cursor: pointer;
    color: white; }

.talk-without-fighting-c h2 {
  color: #5e2b7e;
  margin-bottom: .5em;
  font-size: 2.4em;
  text-align: center; }
.talk-without-fighting-c img {
  width: 100%; }
.talk-without-fighting-c p {
  font-size: 1.2em;
  text-align: center; }
.talk-without-fighting-c .divider-text {
  font-size: 1.8em;
  color: #555;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1em; }
.talk-without-fighting-c video {
  width: 60%;
  margin: 0 auto;
  display: block; }

.talk-without-fighting-c h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6em;
  text-align: center;
  font-weight: 600;
  margin-bottom: 0.5em; }
.talk-without-fighting-c .flex {
  gap: 1em; }
  .talk-without-fighting-c .flex > div {
    flex: 1; }
    .talk-without-fighting-c .flex > div .button {
      width: 100%;
      transition: all 0.3s ease; }
      .talk-without-fighting-c .flex > div .button:hover {
        background-color: #F4BD18;
        transform: translateY(-6px);
        text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8);
        box-shadow: 0px 14px 20px -10px rgba(0, 0, 0, 0.4);
        text-decoration: none;
        cursor: pointer;
        color: white; }
.talk-without-fighting-c details {
  margin-bottom: .6em; }
  .talk-without-fighting-c details summary {
    font-size: 1.6em; }
  .talk-without-fighting-c details p {
    text-align: left;
    margin-left: 1.2em;
    margin-bottom: 1em;
    margin-top: 0.5em; }

@media (max-width: 768px) {
  .jim-nancy .flex, .talk-without-fighting-c .flex {
    flex-direction: column; }
  .jim-nancy p, .talk-without-fighting-c p {
    font-size: 1.4em; }
  .jim-nancy .divider-text, .talk-without-fighting-c .divider-text {
    font-size: 1.5em; }
  .jim-nancy video, .talk-without-fighting-c video {
    width: 100%; } }
.carousel h2 {
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 2em;
  font-size: 1.8em; }
.carousel a {
  display: block;
  width: 80%;
  margin: 0 auto; }
  .carousel a img {
    width: 100%; }

.testimonials h2 {
  color: #5e2b7e;
  margin-bottom: 2em;
  font-size: 1.8em;
  text-align: center; }
.testimonials p {
  font-size: 1.2em;
  width: 80%;
  margin: 0 auto;
  text-align: center; }

footer {
  padding: 8vh 0; }
  footer h3 {
    color: white;
    text-align: center;
    margin-bottom: 1em; }
  footer > .flex {
    align-items: flex-start;
    column-gap: 1em; }
    footer > .flex > div {
      flex: 1; }
  footer .social-c {
    width: 80%;
    margin: 0 auto;
    padding: .2em .5em;
    background: white;
    border-radius: 4px; }
  footer .social {
    display: block;
    font-size: 1.8em; }
    footer .social.linkedin {
      color: #007bb6; }
    footer .social.twitter {
      color: black; }
    footer .social.facebook {
      color: #3b5998; }
    footer .social.instagram {
      color: #ea2c59; }
    footer .social.tiktok {
      color: #ea2c59; }
    footer .social.pinterest {
      color: #cb2027; }
    footer .social.youtube {
      color: #a82400; }
  footer .footer-links a {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    display: block;
    text-align: center;
    margin-bottom: 1em;
    font-weight: 100; }
  footer .newsletter-signup-c input {
    display: block;
    border-radius: 2px;
    border: none;
    padding: .5em 1em;
    width: 80%;
    margin: 0 auto; }
  footer #x-btn-newsletter-signup {
    display: block;
    width: 80%;
    margin: .5em auto 0;
    border: none;
    padding: .5em 1.5em;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2em;
    box-shadow: 0px 12px 18px -10px rgba(0, 0, 0, 0.3);
    text-align: center;
    background-color: #FFFFFF;
    color: #5e2b7e; }

@media (max-width: 768px) {
  footer > .flex {
    flex-direction: column;
    align-items: center;
    row-gap: 3em; }
    footer > .flex > div {
      width: 100%; }
  footer .social-c {
    width: 90%; }
    footer .social-c .social {
      font-size: 2.6em; }
  footer .newsletter-signup-c input, footer .newsletter-signup-c #x-btn-newsletter-signup {
    width: 100%; }
  footer .newsletter-signup-c input {
    font-size: 1.2em; }
  footer h3 {
    font-size: 2em; }
  footer .footer-links a {
    font-size: 1.2em; } }

/*# sourceMappingURL=main.css.map */