*{
  margin:0;
  padding:0;
  font-family:  Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  background: none;

  /* unvisited link */
  a:link {
    color: #f5f1f3;
  }

  /* visited link */
  a:visited {
    color: #06EEFA;
  }

  /* mouse over link */
  a:hover {
    color: #98f2ba;
  }

  /* selected link */
  a:active {
    color: #06EEFA;
  }
}

a .center_donation {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


body{
  margin:0;
  font-size:17px;
  color:#282828;
  line-height:1.6;
  /* text-align: center; */
}

/* Nabar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(211, 211, 211, 0.5); /* Light gray with 50% transparency */
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  z-index: 1000;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.nav-links li {
  padding: 8px 10px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #FF3A96; /* Pink color on hover */
}

.menu-toggle {
  display: none;
}

.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

#rotatingWords {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.rotating-font {
  font-weight: 400; /* normal weight, not bold */
  font-size: 50px; /* adjust to match your style */
  display: inline-block;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Shimmering border effect */
@keyframes shimmer-border {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.button_shimmer_border {
    position: relative;
    background: linear-gradient(
        90deg,
        #FF3A96 0%,
        #06EEFA 25%,
        #FF3A96 50%,
        #06EEFA 75%,
        #FF3A96 100%
    );
    background-size: 200% 100%;
    animation: shimmer-border 3s linear infinite;
    border: none !important;
    padding: 3px; /* This creates the border thickness */
}

.button_shimmer_border span {
    display: block;
    background: #222525; /* Same as your button background */
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 18px;
}

.button_shimmer_border:hover span {
    background: #FF3A96; /* Your button hover color */
}

/* Responsive Styles */
@media (max-width: 768px) {
     .nav-links {
      flex-direction: column;
      position: absolute;
      top: 60px;
      left: -100%;
      width: 100%;
      background-color: rgba(211, 211, 211, 0.9); /* Light gray with more opacity */
      transition: left 0.3s ease;
  }

  .nav-links li {
      text-align: center;
      padding: 10px 0;
  }

  .menu-toggle:checked + .menu-icon + .nav-links {
      left: 0;
  }

  .menu-toggle {
      display: none;
  }

  .menu-icon {
      display: block;
  }
}

/* Motto */

#motto {
  margin-bottom: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  top: 50px;
}
  
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
  
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
  
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }
  
  .topnav-right {
    float: right;
  }

  #showcase{
    background-image:url("images/park73.jpeg");
    background-size:1920px 1280px;
    background-position:center;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 20px;
  }

  .intheparkfont {
    font-weight: bold;
  }

  input#mc-embedded-subscribe.button {
    margin-top: -10px;
    background-color: #FF3A96;
    border: none;
    border-radius: 5px;
    color: white;
    /* padding: 10px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 2px;
    cursor: pointer;
    /* width: 50%; */
  }

  #button_onlineDating, #button_noOnlinedating {
    margin-top: -10px;
    background-color: #06EEFA;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 2px;
    cursor: pointer;
    /* width: 50%; */
  }

  .mc_embed_signup_scroll .email, .mc_embed_signup_scroll .clear {
    padding: 20px;
  }

  #showcase h1, #showcase {
    font-size:50px;
    line-height:1.2;
    color: #282828;
    font-family: Arial, sans-serif;
  }

  #showcase p{
    font-size:18px;
  }

  #mc_embed_signup {
    font-size:18px;
    width:30%;
  }

  #showcase .email {
    font-size:15px;
    text-decoration:none;
    color:#FF3A96;
    border:#FF3A96 1px solid;
    padding:10px 20px;
    border-radius:10px;
    margin-top:20px;
    width: 70vh;
    text-align: center;
  }

  #mc_embed_signup input.email{
    font-size:15px;
    text-decoration:none;
    color:#FF3A96;
    border:#FF3A96 1px solid;
    padding:10px 20px;
    border-radius:10px;
    margin-top:20px;
    width: 70vh;
    text-align: center;
  }

  input#mce-EMAIL.email {
    font-size:15px;
    text-decoration:none;
    color:#FF3A96;
    border:#FF3A96 1px solid;
    padding:10px 20px;
    border-radius:10px;
    margin-top:20px;
    width: 70vh;
    text-align: center;
  }

  #showcase .name {
    font-size:15px;
    text-decoration:none;
    color:#FF3A96;
    border:#FF3A96 1px solid;
    padding:10px 20px;
    border-radius:10px;
    margin-top:20px;
    width: auto;
  }

  #showcase textarea.text {
    font-size:15px;
    text-decoration:none;
    color:#FF3A96;
    border:#FF3A96 1px solid;
    padding:10px 20px;
    border-radius:15px;
    margin-top:20px;
    width: 100vh;
  }

  #showcase .button_1{
    font-size:18px;
    text-decoration:none;
    background:#222525;
    color:#fff;
    border:#FF3A96 3px solid;
    padding:10px 20px;
    border-radius:10px;
    margin-top:20px;
    text-transform: uppercase;
  }

  #showcase .button_1:hover{
    background:#FF3A96;
    color:#fff;
  }

  #section-a{
    padding:20px;
    background:#FF3A96;
    color:#fff;
    text-align:center;
  }

  #section-a h1{
    font-size: 2em;
  }

  #section-b{
    padding:20px;
    background:#f4f4f4;
    text-align:center;
  }

  #section-b2{
    padding:20px;
    text-align:center;
    color: #FF3A96;

  }

  #section-b2 p{
    margin-top: 20px;
  }

 #section-b3{
    padding:20px;
    background:rgb(245, 237, 241);
    text-align:center;
  }

  #section-b3 h2 {
    font-size:25px;
    font-weight: bold;
    line-height:1.2;
    color: #282828;
    font-family: Georgia, Arial, sans-serif;
  }

  p.center {
    margin-top: 20px;
    text-align: center;
    font-size: 1.7em;
    text-decoration: underline;
    text-decoration-color:#06EEFA;
  }

  #mc-embedded-subscribe-form {
    padding: 20px;
  }

  .col{
    float: left;
    width: 33.3%;
    /* padding: 8px;  */
    box-sizing: border-box; /* includes all the padding inside the width!! without this, only some prices boxes are aligned*/
  }

  .organized_boxes div{
    padding:20px;
  }

  .organized_boxes .box-1, .columns .box-3{
    background:rgb(255, 255, 255);
    color:rgb(0, 0, 0);
  }

  .organized_boxes .box-2{
    background:#ffffff;
  }

  /*font awesome icons */
  .box-2 .fa-hand-spock-o, .box-1 .fa-globeow, .box-3 .fa-bar-chart{
    text-align: center;
    color: #06EEFA;
    font-size: 4em;
    display: block;
    width: 100%;
  }

  .fa {
    text-align: center;
    color: #06EEFA;
    font-size: 4em;
    display: block;
    width: 100%;
  }

  /* Destination Styles */

  .hr_bar {
    border: 10px solid green;
    width: 100%;
  }

  hr {
    width: 100%;
  }

  .general_titles {
    font-weight: bold;
    font-size: 28px;
    color: #FF3A96;
    text-align: center;
    margin-top: 20px;
  }

  .general_sub_titles {
    color: #FF3A96;
    text-align: center;
  }

  .general_sub_titles2 {
    color: #FF3A96;
    text-align: center;
    font-size: 18px;
  }

  /* Bottom Links */
  .bottomLinks 
  {
    text-decoration: none;
  }

  .bottom-link-line 
  {
    color: rgb(223, 152, 185);
  }

  @media(max-width: 747px){

    #showcase img {
      padding-top: 80px;
    }

    .forms {
      padding: 10px 10px 50px 10px;
    }

    #showcase .email {
      width: 100%;

    }

    #showcase .name {
      width: 100%;
    }

    #showcase textarea.text {
      width: 100%;

    }

    header#showcase{
      padding-bottom:50px;
      padding-top: 20px;
    }

    p.center, div.box-1.col, div.box-2.col, div.box-3.col{
      width: 100%;
    }

  }

  @media(max-width: 490px){

    #showcase img {
      padding-top: 130px;
    }


    #showcase .email {
      width: 30%;

    }

    #showcase .name {
      width: 30%;
    }

    #showcase textarea.text {
      width: 70%;

    }

    #showcase #span #reality{
      animation-name: reality;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: 1;

      -webkit-animation-name: reality;
      -webkit-animation-duration: 5s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: 1;

      -moz-animation-name: reality;
      -moz-animation-duration: 5s;
      -moz-animation-timing-function: linear;
      -moz-animation-iteration-count: 1;

    }


    @keyframes reality {
      0% { opacity: 0.0; }
      50% { opacity: 0.5; }
      100% { opacity: 1.0; }
    }

    @-moz-keyframes reality {
      0% { opacity: 0.0; }
      50% { opacity: 0.5; }
      100% { opacity: 1.0; }
  }

    @-webkit-keyframes reality {
      0% { opacity: 0.0; }
      50% { opacity: 0.5; }
      100% { opacity: 1.0; }
    }

    header#showcase{
      padding-bottom:200px;
      padding-top: 30px;
    }

/* === Retreat Application Modal === */
  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
  }

  .modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 720px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    animation: slideUp 0.4s ease-out;
  }

  .modal-content h2 {
    color: #FF3A96;
    font-family: 'Karma', serif;
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
  }

  .modal-content iframe {
    border: 2px solid #FF3A96;
    border-radius: 8px;
  }

  .modal-content a {
    color: #06EEFA;
    text-decoration: none;
    font-weight: bold;
  }

  .modal-content a:hover {
    color: #FF3A96;
  }

  .close {
    color: #FF3A96;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
  }

  .close:hover {
    color: #06EEFA;
  }

  /* Animation */
  @keyframes slideUp {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  
  
  
  
  }