body {
    overflow: hidden;
}

p#coming-soon-msg {
    margin: 24px 0;
    color:  #fff;
    font-weight: 600;
    font-size: 14px;
}

h1 {
    font-weight: bold;
}

.hero-1 .front-content h1 {
    border-radius: 8px;
}

#overlay {
	background: rgb(85 4 4 / 90%);
}

#hero #cycle span {
    display: block;
    text-transform: uppercase;
    font-weight: 500;
    color: #f2bd2d;
    margin-bottom: 8px;
} 

#coming-soon-msg span {
	display: inline-block;
    background-color: black;
    padding: 12px 20px;
    color: white;
    letter-spacing: 1.5px;
}

.hero-1 h1 {
    background-color: #7B0707;
    padding: 10px 20px;
    border: 5px solid #F2BD2C;
}


.hero-1 h2 {
    font-weight: 600;
    line-height: 1.4;
    font-size: 28px;
}


@media (min-width: 540px) {
	.hero-1 h1 {
		width: fit-content;
		
	}

	.hero-1 h2 {
		/*padding-left: 48px;
		padding-right: 48px;*/
		padding: 24px 48px;
	}
}

@media (min-width: 768px) {
	.hero-1 h1 {
	    padding: 10px 32px;
	    font-size: 54px !important;
	}

	.hero-1 h2 {
		font-size: 32px;
	}
}

@media (min-width: 1280px) {
	.hero-1 h2 {
		width: 100%; 
        max-width: 1000px; 
        margin-left: auto; 
        margin-right: auto;
	}
}


#about h1 {
    line-height: 1.4;
    margin-bottom: 36px;
    font-weight: 700;
}

#about p {
    font-size: 16px;
    max-width: none !important;
    color: #fff;
    font-weight: 500;
}

@media (min-width: 768px) {
	#about p {
		font-size: 18px;
	}
}

.up-button i {
    background-color: #F2BD2C;
}

.grcs_bullet_nav .nav_dots.active:before {
    background: #F2BD2C;
}


.pdf-link span {margin-bottom: 0 !important;}

.hero .front-content .cycle-wrapper {overflow:visible !important;}






/* CSS */
:root{
  /* Tweak these to match your brand */
  --cta-bg-1: #ffba00;   /* deep red (Tiger Lily vibe) */
  --cta-bg-2: #ec8a4e;   /* slate */
  --cta-text: #000000;
  --cta-border: rgb(123 8 7);
  --cta-ring: #93c5fd;   /* focus ring (accessible) */
}

.cta{
  position: relative;
  display: inline-flex;                /* keeps it button-like but allows wrapping */
  align-items: center;
  justify-content: center;
  padding: 16px 42px;
  min-height: 3rem;                    /* stays tall enough on one line */
  border-radius: 999px;                /* pill */
  border: 9px solid var(--cta-border);
  color: var(--cta-text);
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  white-space: normal;                 /* allow 2-line wrap */
  overflow-wrap: anywhere;             /* avoid overflow on long words */
  max-width: 100%;                     /* responsive in tight spaces */
  background: linear-gradient(90deg, var(--cta-bg-2), var(--cta-bg-1), var(--cta-bg-2));
  background-size: 200% 100%;          /* enables the slide effect */
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background-position .3s ease, transform .2s ease, box-shadow .2s ease;
  font-size: 19px;
  text-transform: uppercase;
  border-style: double;
}

.cta:hover{
  background-position: 100% 0;         /* subtle slide */
  transform: translateY(-1px);         /* gentle lift */
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
    color: var(--cta-text) !important;
}

.cta:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
    color: var(--cta-text) !important;
}

.cta:focus-visible{
  outline: 3px solid var(--cta-ring);
  outline-offset: 2px;
  /* keep the lift off to reduce motion during keyboard nav */
  transform: none;
}


@keyframes subtle-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-4px); }
  60%      { transform: translateY(0); }
  80%      { transform: translateY(-2px); }
}

.cta {
  /* keep your existing styles */
  animation: subtle-bounce 3s ease-in-out infinite;
  animation-delay: 2.2s;   /* waits a little before starting */
}

.cta:hover, 
.cta:focus-visible {
  /* pause bounce when user interacts */
  animation-play-state: paused;
}


@media (prefers-reduced-motion: reduce){
  .cta{ transition: none; }
  .cta:hover{ background-position: 0 0; transform: none; }
}

#hero #cycle span {
    font-size: 18px;
}

@media (max-width: 768px) {
  .cta{
    margin-top: 12px;
    padding: 12px 32px;
    width: fit-content;
    line-height: 1.4;
  }
}


@media (max-width: 500px) {
    .hero-1 h2 {
        font-size: 22px;
    }

    .cta {
        font-size: 16px;
    }
}