/*Mobile*/

@media (min-width:320px) and (max-width: 641px) {
  .phoneHide {
    display: none;  
  }

  .navbar {
    padding: 10px 15px !important;
  }

  .menu-links {
    display: none;
  }

  .menu-toggle {
    top: 10px !important;
    right: 20px !important;
  }

  .nav-logo {
    width: 200px !important;
  }

  .ph-1995 {
    font-size: 1.9em !important;
    margin-left: 70px !important;
  }

  .overlay-text {
    font-size: 3em;
    width: 100%;
    text-align: center !important;
    margin: 0 !important;
    word-spacing: 100vw;
  }

  #changing-text {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .review-widget {
    width: 70%;
    display: inline-block !important;
    padding-top: 0 !important;
  }

  .stars {
    font-size: 2em;
  }

  .review-count {
    font-size: 0.9em;
    margin-top: -10px;
  }

  .button-c {
    width: 100%;
    text-align: center;
  }

  .grw-home {
    position: relative;
    margin: 0 !important;
    width: 100%;
    text-align: center;
  }

  .button {
    font-size: 1.5em;
    width: 60px;
    margin: 0 !important;
    
  }

  .button.loaded {
    width: 190px;
    padding: 12px 26px !important;
  }

  .button:hover {
    width: 210px;
  }

  #horizontal-wrapper {
    display: none;
  }

  #horizontal-wrapper4 {
    display: none;
  }

  .discover-button {
    margin-bottom: 10px;
    margin-right: -19px;
  }

  .home-title {
    font-size: 3em;
    text-align: center;
    padding: 0 !important;
    margin-left: -20px;
  }

  .left-rraa {
    padding-right: 50px;
  }
  
  .right-rraa {
    padding-left: 50px;
    padding-right: 200px;
  }

  .right-rraa h4 {
    font-size: 1.9em;
  }

  .right-rraa p {
    font-size: 1em;
  }

  .left-rraa img {
    width: 250px;
  }

  .rral {
    font-size: 3.5em;
    padding-top: 150px;
    text-align: left !important;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
  }

  .modular-design {
    font-size: 3em;
    text-align: center !important;
  }

  .modular-design-p {
    font-size: 1.3em;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
  }
  /*
  .modular-design-p-mobile {
    font-size: 1.5em;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    color: rgb(70, 70, 70);
    position: absolute;
    bottom: 435px;
  }
  */
  .modular-img {
    width: 375px;
  }

  .modular-btn {
    top: -695px;
    right: -429px;
  }

  .qa {
    font-size: 3.5em;
  }

  .qa-p {
    font-size: 1.3em;
    margin: 0 !important;
    padding-right: 30px;
  }

  .logo-img {
    width: 200px;
  }

  .hc-p {
    font-size: 1.5em;
  }

  .hc-l-p {
    font-size: 1.2em;
  }

  .footer-link {
    font-size: 1.5em;
    line-height: 2em;
  }

  .footer-footer {
    font-size: 1.5em;
  }

  .dt-1995 {
    display: none;
  }

  .menu-links1 {
    right: -90vw;
    width: 90vw;
  }

  .information-cards-mobile {
    display: block !important;
    padding-top: 80px;
  }

  .card2-mobile h2 {
    font-size: 2em;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
  }

  .card2-mobile p {
    font-size: 1.5em;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
  }

  .footer-links {
    padding-left: 15px;
    padding-right: 15px;
  }

  .title-3 {
    font-size: 3em;
    padding-top: 0 !important;
  }

  .sbs {
    display: none;
  }

  .itm-title {
    font-size: 2em;
  }

  .ud {
    background-color: white !important;
    width: 100% !important;
  }

  #horizontal-wrapper2-mobile {
    display: block !important;
  }

  #horizontal-wrapper2-mobile.post-sticky .inner{
    top: 210vh !important;
  }

  #horizontal-wrapper2 {
    display: none !important;
  }

  .qa-container {
    top: 200px !important;
  }
}

@media (min-width:641px) and (max-width: 961px) {
  .phoneHide {
    display: none;  
  }
  
  .menu-links {
    display: none;
  }

  .overlay-text {
    font-size: 4.5em;
    width: 100%;
    text-align: center !important;
    margin: 0 !important;
  }

  .review-widget {
    max-width: 300px;
  }

  .stars {
    font-size: 1em;
  }

  .review-count {
    font-size: 0.7em;
  }

  .button {
    font-size: 1.5em;
    width: 60px;
    position: absolute;
    margin: 0 !important;
    left: 40%;
    transform: translateX(-40%);
  }

  .button.loaded {
    width: 190px;
    padding: 12px 26px !important;
  }

  .button:hover {
    width: 210px;
  }

  .grw-home {
    position: relative;
    margin: 0 !important;
    left: 36.5%;
    transform: translateX(-40%);
  }

  .card-content {
    padding: 30px;
    padding-top: 15px;
    padding-bottom: 0;
  }

  .card h2, .card2 h2 {
    font-size: 2em;
  }

  .card p, .card2 p {
    font-size: 1em;
  }

  .discover-button {
    margin-bottom: 10px;
    margin-right: -19px;
  }

  .home-title {
    font-size: 3.5em;
  }

  .left-rraa {
    padding-right: 50px;
  }
  
  .right-rraa {
    padding-left: 50px;
    padding-right: 200px;
  }

  .right-rraa h4 {
    font-size: 1.9em;
  }

  .right-rraa p {
    font-size: 1em;
  }

  .left-rraa img {
    width: 250px;
  }

  .rral {
    font-size: 4em;
  }

  .modular-design {
    font-size: 4em;
    /*margin-left: -500px;*/
  }

  .modular-design-p {
    font-size: 1.1em;
    /*margin-left: -85px;*/
  }

  .modular-img {
    width: 900px;
  }

  .modular-btn {
    top: -695px;
    right: -429px;
  }

  .qa {
    font-size: 4.5em;
  }

  .qa-p {
    font-size: 1.5em;
  }

  .logo-img {
    width: 200px;
  }

  .hc-p {
    font-size: 1.3em;
  }

  .hc-l-p {
    font-size: 1em;
  }

  .hc-c {
    height: 550px;
  }

  .footer-link {
    font-size: 1em;
  }

  .footer-footer {
    font-size: 1.2em;
  }

  .ph-1995 {
    display: none;
  }

  .menu-links1 {
    right: -50vw;
    width: 50vw;
  }
}

/*Desktop*/

@media (min-width:961px) and (max-width: 1025px) {
  .phoneShow {
    display: none;
  }

  #horizontal-wrapper-mobile {
    display: none;
  }

  .menu-links {
    display: none;
  }

  .overlay-text {
    font-size: 4.5em;
  }

  .review-widget {
    max-width: 300px;
  }

  .stars {
    font-size: 1em;
  }

  .review-count {
    font-size: 0.7em;
  }

  .button {
    font-size: 1.5em;
    width: 60px;
  }

  .button.loaded {
    width: 190px;
    padding: 12px 26px !important;
  }

  .button:hover {
    width: 210px;
  }

  .card-content {
    padding: 30px;
    padding-top: 15px;
    padding-bottom: 0;
  }

  .card h2, .card2 h2 {
    font-size: 2em;
  }

  .card p, .card2 p {
    font-size: 1em;
  }

  .discover-button {
    margin-bottom: 10px;
    margin-right: -19px;
  }

  .home-title {
    font-size: 3.5em;
  }

  .left-rraa {
    padding-right: 50px;
  }
  
  .right-rraa {
    padding-left: 50px;
    padding-right: 200px;
  }

  .right-rraa h4 {
    font-size: 1.9em;
  }

  .right-rraa p {
    font-size: 1em;
  }

  .left-rraa img {
    width: 250px;
  }

  .rral {
    font-size: 4em;
  }

  .modular-design {
    font-size: 4em;
    /*margin-left: -500px;*/
  }

  .modular-design-p {
    font-size: 1.1em;
    /*margin-left: -85px;*/
  }

  .modular-img {
    width: 900px;
  }

  .modular-btn {
    top: -695px;
    right: -429px;
  }

  .qa {
    font-size: 4.5em;
  }

  .qa-p {
    font-size: 1.5em;
  }

  .logo-img {
    width: 200px;
  }

  .hc-p {
    font-size: 1.3em;
  }

  .hc-l-p {
    font-size: 1em;
  }

  .hc-c {
    height: 550px;
  }

  .footer-link {
    font-size: 1em;
  }

  .footer-footer {
    font-size: 1.2em;
  }

  .ph-1995 {
    display: none;
  }

  .menu-links1 {
    right: -33.33vw;
    width: 33.33vw;
  }

  .select {
    height: 230px;
  }

  .itm-title {
    font-size: 1.5em;
  }
  
  .title-3 {
    font-size: 2.5em;
  }

  .sbs {
    display: none;
  }

  .swingset-list {
    font-size: 1em;
  }

  .swingset-list li {
    padding-left: 20px;
    text-indent: -20px;
  }

  .swingset-title {
    font-size: 1.5em;
  }

  .swingset-order {
    font-size: 1.3em;
  }

  .attachments-4 {
    display: block !important;
  }

  .contact-icon {
    font-size: 3.5em !important;
  }

  .contact-title {
    font-size: 1.3em;
  }

  .contact-sub-title {
    font-size: 0.8em;
  }

  .about-title {
    font-size: 1.2em;
  }

  .about-p {
    font-size: 0.7em;
  }
}

@media (min-width:1025px) and (max-width: 1281px) {
  .phoneShow {
    display: none;
  }

  #horizontal-wrapper-mobile {
    display: none;
  }

  .menu-links {
    display: none;
  }

  .overlay-text {
    font-size: 5em;
  }

  .review-widget {
    max-width: 300px;
  }

  .stars {
    font-size: 1.2em;
  }

  .review-count {
    font-size: 0.8em;
  }

  .button {
    font-size: 1.7em;
    width: 65px;
  }

  .button.loaded {
    width: 200px;
    padding: 13px 28px !important;
  }

  .button:hover {
    width: 225px;
  }

  .card-content {
    padding: 30px;
    padding-top: 15px;
    padding-bottom: 0;
  }

  .card h2, .card2 h2 {
    font-size: 2.1em;
  }

  .card p, .card2 p {
    font-size: 1.1em;
  }

  .discover-button {
    margin-bottom: 10px;
    margin-right: -19px;
  }

  .home-title {
    font-size: 4em;
  }

  .left-rraa {
    padding-right: 50px;
  }
  
  .right-rraa {
    padding-left: 50px;
    padding-right: 200px;
  }

  .right-rraa h4 {
    font-size: 2.3em;
  }

  .right-rraa p {
    font-size: 1.3em;
  }

  .left-rraa img {
    width: 250px;
  }

  .rral {
    font-size: 4.5em;
  }

  .modular-design {
    font-size: 4em;
    /*margin-left: -550px;*/
  }

  .modular-design-p {
    font-size: 1.1em;
    /*margin-left: -135px;*/
  }

  .modular-img {
    width: 950px;
  }

  .modular-btn {
    top: -695px;
    right: -455px;
  }

  .qa {
    font-size: 4.5em;
  }

  .qa-p {
    font-size: 1.5em;
  }

  .logo-img {
    width: 200px;
  }

  .hc-p {
    font-size: 1.3em;
  }

  .hc-l-p {
    font-size: 1.2em;
  }

  .hc-c {
    height: 600px;
  }

  .footer-link {
    font-size: 1.2em;
  }

  .footer-footer {
    font-size: 1.3em;
  }

  .ph-1995 {
    display: none;
  }

  .menu-links1 {
    right: -33.33vw;
    width: 33.33vw;
  }

  .select {
    height: 250px;
  }

  .itm-title {
    font-size: 1.7em;
  }

  .title-3 {
    font-size: 2.5em;
  }

  .sbs {
    display: none;
  }

  .swingset-list {
    font-size: 1em;
  }

  .swingset-list li {
    padding-left: 20px;
    text-indent: -20px;
  }

  .swingset-title {
    font-size: 1.5em;
  }

  .swingset-order {
    font-size: 1.3em;
  }

  .attachments-4 {
    display: block !important;
  }

  .contact-icon {
    font-size: 4em !important;
  }

  .contact-title {
    font-size: 1.5em;
  }

  .contact-sub-title {
    font-size: 0.9em;
  }

  .about-title {
    font-size: 1.3em;
  }

  .about-p {
    font-size: 0.7em;
  }
}

@media (min-width:1281px) and (max-width: 1600px) {
  .phoneShow {
    display: none;
  }

  #horizontal-wrapper-mobile {
    display: none;
  }

  .nav-links a {
    font-size: 1.4em;
  }

  .menu-toggle {
    display: none;
  }

  .overlay-text {
    font-size: 5.5em;
  }

  .review-widget {
    max-width: 400px;
  }

  .stars {
    font-size: 1.3em;
  }

  .review-count {
    font-size: 0.9em;
  }

  .button {
    font-size: 1.8em;
    width: 65px;
  }

  .button.loaded {
    width: 210px;
    padding: 14px 30px !important;
  }

  .button:hover {
    width: 240px;
  }

  .card-content {
    padding: 30px;
  }

  .card h2, .card2 h2 {
    font-size: 2.3em;
  }

  .card p, .card2 p {
    font-size: 1.2em;
  }

  .discover-button {
    margin-bottom: -10px;
    margin-right: -10px;
  }

  .home-title {
    font-size: 4.5em;
  }

  .left-rraa {
    padding-right: 50px;
  }
  
  .right-rraa {
    padding-left: 50px;
    padding-right: 250px;
  }

  .right-rraa h4 {
    font-size: 2.5em;
  }

  .right-rraa p {
    font-size: 1.4em;
  }

  .left-rraa img {
    width: 300px;
  }

  .rral {
    font-size: 5.3em;
  }

  .modular-design {
    font-size: 4.7em;
    /*margin-left: -635px;*/
  }

  .modular-design-p {
    font-size: 1.3em;
    /*margin-left: -140px;*/
  }

  .modular-img {
    width: 1100px;
  }

  .modular-btn {
    top: -695px;
    right: -529px;
  }

  .qa {
    font-size: 4.5em;
  }

  .qa-p {
    font-size: 1.7em;
  }

  .logo-img {
    width: 250px;
  }

  .hc-p {
    font-size: 1.5em;
  }

  .hc-l-p {
    font-size: 1.3em;
  }

  .hc-c {
    height: 630px;
  }

  .footer-link {
    font-size: 1.3em;
  }

  .footer-footer {
    font-size: 1.5em;
  }

  .ph-1995 {
    display: none;
  }

  .menu-links1 {
    right: -33.33vw;
    width: 33.33vw;
  }

  .select {
    height: 300px;
  }

  .itm-title {
    font-size: 1.9em;
  }

  .title-3 {
    font-size: 3em;
  }

  .sbs {
    display: none;
  }

  .swingset-list {
    font-size: 1.3em;
  }

  .swingset-list li {
    padding-left: 28px;
    text-indent: -28px;
  }

  .swingset-title {
    font-size: 1.7em;
  }

  .swingset-order {
    font-size: 1.5em;
  }

  /*.card2 img {
    height: 400px !important;
  }*/

  .attachments-4 {
    display: block !important;
  }

  .contact-icon {
    font-size: 4.5em !important;
  }

  .contact-title {
    font-size: 1.7em;
  }

  .contact-sub-title {
    font-size: 1.3em;
  }

  .about-title {
    font-size: 1.5em;
  }

  .about-p {
    font-size: 0.9em;
  }
}

@media (min-width:1600px) {
  .phoneShow {
    display: none;
  }

  #horizontal-wrapper-mobile {
    display: none;
  }
  
  .nav-links a {
    font-size: 1.5em;
  }

  .menu-toggle {
    display: none;
  }

  .overlay-text {
    font-size: 6em;
  }

  .review-widget {
    max-width: 500px;
  }

  .stars {
    font-size: 1.5em;
  }

  .review-count {
    font-size: 1em;
  }

  .button {
    font-size: 2em;
    width: 70px;
  }

  .button.loaded {
    width: 236.48px;
    padding: 15px 32px !important;
  }

  .button:hover {
    width: 250px;
  }

  .card-content {
    padding: 30px;
  }

  /*.card h2, .card2 h2 {
    font-size: 2.5em;
  }

  .card p, .card2 p {
    font-size: 1.3em;
  }*/

  .discover-button {
    margin-bottom: -10px;
    margin-right: -10px;
  }

  .home-title {
    font-size: 5em;
  }

  .left-rraa {
    padding-right: 50px;
  }
  
  .right-rraa {
    padding-left: 50px;
    padding-right: 450px;
  }

  .right-rraa h4 {
    font-size: 3em;
  }

  .right-rraa p {
    font-size: 1.5em;
  }

  .left-rraa img {
    width: 350px;
  }

  .rral {
    font-size: 5.5em;
  }

  .modular-design {
    font-size: 5em;
    /*margin-left: -665px;*/
  }

  .modular-design-p {
    font-size: 1.5em;
    /*margin-left: -50px;*/
  }

  .modular-img {
    width: 1155px;
  }

  .modular-btn {
    top: -695px;
    right: -555px;
  }

  .qa {
    font-size: 5em;
  }

  .qa-p {
    font-size: 2em;
  }

  .logo-img {
    width: 300px;
  }

  .hc-p {
    font-size: 1.9em;
  }

  .hc-l-p {
    font-size: 1.5em;
  }

  .hc-c {
    height: 700px;
  }

  .footer-link {
    font-size: 1.5em;
  }

  .footer-footer {
    font-size: 1.7em;
  }

  .ph-1995 {
    display: none;
  }

  .menu-links1 {
    right: -33.33vw;
    width: 33.33vw;
  }

  .select {
    height: 370px;
  }

  .itm-title {
    font-size: 2em;
  }

  .title-3 {
    font-size: 3em;
  }

  .ud {
    display: none;
  }

  .swingset-list {
    font-size: 1.7em;
  }

  .swingset-list li {
    padding-left: 36px;
    text-indent: -36px;
  }

  .swingset-title {
    font-size: 2em;
  }

  .swingset-order {
    font-size: 1.7em;
  }

  /*.card2 img {
    height: 400px !important;
  }*/

  .attachments-7 {
    display: block !important;
  }

  .contact-icon {
    font-size: 5em !important;
  }

  .contact-title {
    font-size: 2em;
  }

  .contact-sub-title {
    font-size: 1.5em;
  }
}



@media (min-height: 1100px) and (min-width: 961px) {
  .modular-img {
    top: -900px !important;
  }
}

@media (min-height: 1050px) and (max-height: 1100px) and (min-width: 961px) {
  .modular-img {
    top: -875px !important;
  }
}

@media (min-height: 1000px) and (max-height: 1050px) and (min-width: 961px) {
  .modular-img {
    top: -800px !important;
  }
}

@media (min-height: 900px) and (max-height: 1000px) and (min-width: 961px) {
  .card {
    width: 70vh !important;
  }

  .modular-img {
    width: 110vh !important;
    top: -750px !important;
  }

  .view-button {
    display: none !important;
  }

  /*#horizontal-wrapper2.post-sticky .inner{
    top: 220vh !important;
  }*/

  .card2 {
    width: 70vh !important;
  }

  .card h2, .card2 h2 {
    font-size: 2.5em;
  }

  .card p, .card2 p {
    font-size: 1.3em;
  }

  /*.discover-button {
    display: none !important;
  }*/
}

@media (min-height: 800px) and (max-height: 900px) and (min-width: 961px) {
  .card {
    width: 60vh !important;
  }

  .modular-img {
    width: 110vh !important;
    top: -700px !important;
  }

  .view-button {
    display: none !important;
  }

  #horizontal-wrapper2.post-sticky .inner{
    top: 50vh !important;
  }

  .card2 {
    width: 70vh !important;
  }

  .card h2, .card2 h2 {
    font-size: 2.5em;
  }

  .card p, .card2 p {
    font-size: 1.3em;
  }
}

@media (min-height: 700px) and (max-height: 800px) and (min-width: 961px) {
  .card {
    width: 50vh !important;
  }

  .modular-img {
    width: 110vh !important;
    top: -650px !important;
  }

  .view-button {
    display: none !important;
  }

  #horizontal-wrapper2.post-sticky .inner{
    top: 20vh !important;
  }

  .card2 {
    width: 70vh !important;
  }

  .card2 img {
    height: 250px !important;
  }

  .card h2, .card2 h2 {
    font-size: 2em;
  }

  .card p, .card2 p {
    font-size: 1em;
  }
}

@media (min-height: 600px) and (max-height: 700px) and (min-width: 961px) {
  #horizontal-wrapper2.post-sticky .inner{
    top: 20vh !important;
  }
}

@media (min-height: 500px) and (max-height: 600px) and (min-width: 961px) {
  #horizontal-wrapper2.post-sticky .inner{
    top: -20vh !important;
  }
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
  }

  .hero {
  position: relative;
  height: 100vh;
  color: white;
  overflow: hidden;
  /*animation: none;*/
  border-radius: 0;
  transition: border-radius 1s ease;
}

.hero.scrolled {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.hero.scrolled::before {
  transition: background 1s ease;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area */
  transition: opacity 1s ease, transform 1s ease;
  opacity: 0;
  z-index: -1;
}

@keyframes fadeInZoom {
  0% {
      opacity: 0;
      transform: scale(1.05);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}

.fade-in {
  animation: fadeInZoom 1s ease forwards;
}

.fade-out {
  z-index: 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Dark overlay */
  z-index: 1;
}

@keyframes zoomOut {
  0% {
      transform: scale(1.05); /* Start slightly zoomed in */
  }
  100% {
      transform: scale(1); /* End at original scale */
  }
}

  .navbar {
z-index: 13;
display: flex;
justify-content: space-between;
align-items: flex-start; /* Align items to the top */
position: absolute;
top: 0;
width: 100%;
padding: 20px 40px;
/*background: rgba(0, 0, 0, 0.5);*/ /* Semi-transparent background */
transition: background-color 0.3s ease, transform 0.1s ease;
}

.navbar.hidden {
transform: translateY(-100%); /* Move navbar out of view */
}

/* Background color when scrolled down */
.navbar.scrolled {
  color: black;
  position: fixed;
  background-color: rgb(230, 230, 230);
}

.navbar.scrolled .nav-links a {
  color: rgb(70, 70, 70); /*rgb(88, 88, 88);*/ /* Change link color to white */
}

.navbar.scrolled .nav-text table tr td p {
  text-shadow: none !important;
}

.navbar1 {
z-index: 10;
position: absolute;
}

.navbar .logo {
font-size: 3em;
font-weight: bold;
margin-top: -15px;
}

.navbar .nav-links {
list-style: none;
display: flex;
gap: 50px;
}

.nav-links a {
color: white;
text-decoration: none;
/*font-size: 1.5em;*/
position: relative;
display: inline-block;
font-weight: 700;
}

/* Adding the animated underline */
.nav-links a::after {
content: '';
position: absolute;
left: 0;
bottom: 0; /* Adjust spacing below the text */
width: 0;
height: 3px; /* Adjust underline thickness */
background-color: white;
transition: width 0.3s ease; /* Smooth animation */
}

.nav-links a:hover::after {
width: 100%;
}

.navbar.scrolled .nav-links a::after {
background-color: rgb(70, 70, 70); /*black;*/
}

.footer-links a {
display: block; /* Ensures links stack as block-level elements */
text-decoration: none; /* Remove default underline styling */
}

.footer-links a:hover {
cursor: pointer; /* Changes the cursor to a pointer on hover */
}

.footer-links a p {
color: white;
position: relative;
display: inline-block; /* Keeps the text container as wide as the text */
margin: 0; /* Remove extra margins */
}

.footer-links a p::after {
content: '';
position: absolute;
left: 0;
bottom: -2px; /* Adjust spacing below the text */
width: 0;
height: 3px; /* Adjust underline thickness */
background-color: white;
transition: width 0.3s ease; /* Smooth animation */
}

.footer-links a p:hover::after {
width: 100%; /* Expands underline to text width */
}


  .content {
    padding: 40px;
    text-align: justify;
    background-color: #f4f4f4;
  }

  .luckiest-guy-regular {
      font-family: "Luckiest Guy", serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: 5px;
  }

.overlay-text {
  z-index: 2;
  color: white;
  text-align: center;
  font-weight: 700;
  text-align: left;
  margin-left: 50px;
}

  #changing-text {
display: inline-block;
animation: bounceIn 1s ease;
}

@keyframes bounceIn {
0% {
  opacity: 0;
  transform: translateY(20px);
}
50% {
  opacity: 1;
  transform: translateY(-10px);
}
75% {
    opacity: 1;
  transform: translateY(5px);
}
100% {
    opacity: 1;
  transform: translateY(0);
}
}

.button {
  border: none;
  background-color: white;
  padding: 15px 0; /* Start with a small width (circle) */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: black;
  margin: 4px 2px;
  cursor: pointer;
  margin-left: 50px;
  border-radius: 50%; /* Start as a circle */
  font-weight: 700;
  position: relative;
  /*width: 70px;*/ /* Small initial width */
  overflow: hidden; /* Keep text hidden initially */
  transition: width 0.3s ease, padding 0.6s ease, border-radius 0.6s ease; /* Animate width, padding, and border-radius */
  white-space: nowrap;
}

.button span {
  opacity: 0; /* Initially hide the text */
  transition: opacity 0.3s ease 0.6s; /* Wait for the expansion to finish before showing text */
}

/* When the button is in its expanded state */
.button.loaded {
  /*width: 236.48px;*/ /* Expanded width */
  /*padding: 15px 32px;*/ /* Adjust padding to fit content */
  border-radius: 50px; /* Maintain rounded corners */
}

.button.loaded span {
  opacity: 1; /* Reveal text after the expansion is complete */
}



.button:hover {
  font-style: italic;
  cursor: pointer;
  /*padding: 15px 37px;*/
  /*width: 250px;*/
  /*background-color: rgb(241, 241, 241);*/
  background-color: rgb(250, 250, 250);
}

.text-button {
  border: none;
  background-color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1em;
  color: black;
  cursor: pointer;
  margin-left: 50px;
  border-radius: 50px;
  font-weight: 700;
  border: 2px solid black;
  margin-top: 30px;
  width: fit-content;
}

.material-icons {
  margin-left: 5px;
  font-size: 1.2em;
  font-weight: 700;
  margin-right: 0; /* Ensure the arrow has no margin on the right */
}

.discover-text {
  margin-right: auto; /* Push Discover text to the left */
}

#horizontal-wrapper{
  padding-left: 50px;
  padding-top: 300px;
  margin-bottom: 150px;
  overflow:hidden;
  height:300vh;
  position:relative;
  align-items: center;
}

#horizontal-wrapper .inner {
  display: flex;
  width:200vw;
  transition: transform 0.5s ease-out;
}

#horizontal-wrapper.sticky .inner{
  padding-top: 115px;
  position:fixed;
  top:0;
  bottom:auto;
}

#home-title.sticky {
  position:fixed;
  top:0;
  bottom:auto;
  transition: opacity 1s ease, transform 2s ease;
  opacity: 0;
  transform: translateX(-1500px);
}

#horizontal-wrapper.post-sticky .inner{
  padding-top: 115px;
  position:absolute;
  top:auto;
  bottom:0;
}

#horizontal-wrapper .inner div{
  float:left;
  width:25%;
}

#horizontal-wrapper2{
  padding-top: 50px;
  overflow:hidden;
  height:500vh;
  position:relative;
  align-items: center;
  display: flex;
    justify-content: center;
    /*background-color: rgb(240, 240, 240);*/
}

#horizontal-wrapper2 .inner, #horizontal-wrapper2-mobile .inner {
  width: 100%;
  transition: transform 0.5s ease-out;
  /*background-color: rgb(143, 195, 255);*/
  /*background-color: rgb(240, 240, 240);*/
  height: 150vh;
}

#horizontal-wrapper2 .inner img, #horizontal-wrapper2-mobile .inner img {
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}

#horizontal-wrapper2.pre-sticky .inner{
  /*padding-top: 25px;*/
  position:absolute;
  top:0;
  bottom:auto;
  padding-top: 175px;
}

#horizontal-wrapper2.sticky .inner, #horizontal-wrapper2-mobile.sticky .inner{
  /*padding-top: 25px;*/
  position:fixed;
  top:0;
  bottom:auto;
}

#horizontal-wrapper2.sticky .inner .modular-design, #horizontal-wrapper2-mobile.sticky .inner .modular-design{
  padding-top: 0;
}

#horizontal-wrapper2.post-sticky, #horizontal-wrapper2.post-sticky .inner{
  position: relative;
  /*top: 500px;*/
  top: 60vh;
}

#horizontal-wrapper3{
  height:250vh;
}

#horizontal-wrapper3 .inner {
  width: 100%;
  transition: transform 0.5s ease-out;
}

#horizontal-wrapper3 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99.3%;
  background: rgba(0, 0, 0, 0);
  transition: background 1s ease;
  z-index: 7;
}

/*#horizontal-wrapper3.sticky .overlay {
  z-index: 7;
  background: rgba(0, 0, 0, 0.5);
}*/

#horizontal-wrapper3.sticky .inner{
  position:fixed;
  top: -150px;
}

#horizontal-wrapper3.sticky .inner .modular-design{
  padding-top: 0;
}

#horizontal-wrapper3.post-sticky .inner{
  position: relative;
  /*top: 1300px;*/
  top: 135vh;
}

#horizontal-wrapper4{
  padding-left: 50px;
  padding-top: 300px;
  margin-bottom: 150px;
  overflow:hidden;
  height:300vh;
  position:relative;
  align-items: center;
}

#horizontal-wrapper4 .inner {
  display: flex;
  width:200vw;
  transition: transform 0.5s ease-out;
}

#horizontal-wrapper4.sticky .inner{
  padding-top: 115px;
  position:fixed;
  top:0;
  bottom:auto;
}

#horizontal-wrapper4.post-sticky .inner{
  padding-top: 115px;
  padding-bottom: 150px;
  position:absolute;
  top:auto;
  bottom:0;
}

#horizontal-wrapper4 .inner div{
  float:left;
  width:25%;
}

.card, .card2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*flex: 0 0 25%;*/
  margin: 30px;
  margin-bottom: 100px;
  scroll-snap-align: center;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
  background-color: rgb(255, 255, 255);
}

.card2-mobile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 30px;
  scroll-snap-align: center;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
  background-color: rgb(255, 255, 255);
}

.card img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  width: 100%;
  /*height: 430px;*/
  object-fit: cover;
}

.card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100% !important;
  text-align: center;
  color: white;
}

.card h2, .card2 h2, .card2-mobile h2 {
  color: rgb(58, 58, 58);
  /*font-size: 2.5em;*/
  font-weight: 200;
}

.card p, .card2 p, .card2-mobile p {
  flex-grow: 1;
  margin-top: 10px;
  color: rgb(58, 58, 58);
  line-height: 1.8;
}

.button-container {
  display: flex;
  justify-content: flex-end; /* Aligns button to the right */
  margin-top: auto; /* Pushes the button to the bottom */
  text-align: right;
  width: 100% !important;
}

.card2 img, .card2-mobile img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  height: 300px;
  object-fit: contain;
  margin-top: 30px;
}

.card2 img {
  padding: 30px;
}

.animation {
animation-timeline: view();
animation-name: appear;
animation-fill-mode: both;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
0% {
  opacity: 0;
  transform: translateX(1000px);
}

100% {
  opacity: 1;
  transform: translateX(0px);
}
}

@keyframes appear-less {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
  }

.border-radius-animation {
  animation-timeline: view();
  animation-name: border-radius-round;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}
  
@keyframes border-radius-round {
  0% {
    border-radius: 0px;
  }
  
  100% {
    border-radius: 15px;
  }
}

.modular-design {
  /*margin-left: -665px;*/
  /*font-size: 5em;*/
  /*padding-top: 150px;
  transform: translateX(1000px);
  transition: opacity 0.5s ease, transform 0.5s ease;*/
  /*color: rgb(0, 67, 168);*/
  /*color: rgb(95, 95, 95);*/
  color: rgb(70, 70, 70);
  /*color: rgb(65, 65, 65);*/
  text-align: left;
  opacity: 0;
}

.animate {
  opacity: 1;
  animation: appear 1s ease forwards;
}

.animate-less {
  opacity: 1;
  /*animation: appear-less 1s ease forwards;*/
  animation: appear-less 0.5s ease forwards;
}

.bounce-text {
  opacity: 0;
}

.bounce {
  animation: bouncy 0.5s ease forwards;
}

@keyframes appearUp {
0% {
  opacity: 0;
  transform: translateY(30px);
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

@keyframes bouncy {
  0% {
          opacity: 0;
          transform: translateY(10px);
      }
      50% {
          opacity: 1;
          transform: translateY(-5px);
      }
      75% {
          opacity: 1;
          transform: translateY(2.5px);
      }
      100% {
          opacity: 1;
          transform: translateY(0);
      }
}

#scroll-images {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

#scroll-images img {
  position: absolute;
  margin: 0 auto;
  top: -100px;
  left: 50%;
  transform: translate(-50%, 0%);
  transition: opacity 1s ease;
}

#scroll-images table {
  position: absolute;
  margin: 0 auto;
  top: -115px;
  right: 400px;
  transition: opacity 1s ease;
}

.discover-button {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
transition-duration: 0.3s;
background-color: rgb(58, 58, 58);
margin-top: 30px;
}

.icon {
width: 100%;
transition-duration: 0.3s;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
font-size: 1.3em;
font-weight: 700;
color: white;
}

.label {
position: absolute;
left: 0%;
width: 0%;
opacity: 0;
color: rgb(58, 58, 58);
font-size: 1.2em;
font-weight: 600;
transition-duration: 0.3s;
margin-left: 5px;
}

.discover-button:hover {
background-color: white;
width: 125px;
border-radius: 40px;
transition-duration: 0.3s;
transition-property: background-color, width, border-radius;
border: 2.5px solid rgb(58, 58, 58);
}

.discover-button:hover .icon {
width: 30%;
transition-duration: 0.3s;
padding-right: 20px;
}

.discover-button:hover .icon {
  transform: translateX(90px);
  color: rgb(58, 58, 58);
}

.discover-button:hover .label {
opacity: 1;
width: 70%;
transition-duration: 0.3s;
padding-left: 10px;
}

.discover-button:active {
  transform: translate(1px, 1px);
  border: 2.5px solid rgb(75, 75, 75);
}

.discover-button:active .label {
  color: rgb(75, 75, 75);
  /*color: rgb(221, 221, 221);*/
}

.discover-button:active .icon {
  color: rgb(75, 75, 75);
}

.racing-sans-one-regular {
font-family: "Racing Sans One", serif;
font-weight: 400;
font-style: normal;
}

.anton-regular {
font-family: "Anton", serif;
font-weight: 400;
font-style: normal;
}

.view-button {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: absolute;
right: 0;
overflow: hidden;
transition-duration: 0.3s;
/*background-color: rgb(0, 67, 168);*/
background-color: rgb(70, 70, 70);
margin-top: 30px;
margin-bottom: -10px;
margin-right: -10px;
}

.view-button .label {
white-space: nowrap;
}

.view-button .icon {
transition: none;
}

.view-button:hover {
width: 200px;
border-radius: 100px;
}

.view-button:hover .icon {
width: 30%;
padding-right: 20px;
transform: translateX(154px);
}

.view-button:hover .label {
opacity: 1;
width: 70%;
padding-left: 10px;
color: white;
}

.view-button:active {
  transform: translate(1px, 1px);
}

.lot-image {
animation-timeline: view(block 100% 0%);

animation-name: lot-image-animation;
animation-fill-mode: both;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes lot-image-animation {
  0% {
  opacity: 1;
  clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
}

100% {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}

#building-text-container {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#building-text-container.visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-elements {
  opacity: 0;
}

.italianno-regular {
font-family: "Italianno", serif;
font-weight: 400;
font-style: normal;
}

.norican-regular {
font-family: "Norican", serif;
font-weight: 400;
font-style: normal;
}

.oswald {
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.select {
transition: transform 0.3s ease-in-out;
display: block;
width: 100%;
}

.swingset-block {
text-decoration: none;
}

.swingset-block:hover .select {
transform: scale(1.02);
}

.swingset-block h1 {
transition: transform 0.3s ease-in-out;
}

.swingset-block:hover h1 {
color: #ffff0d;
font-style: italic;
transform: scale(1.02);
}

.img-link {
display: block;
overflow: hidden;
}

footer {
  background-color: rgb(30, 127, 255);
  padding-bottom: 30px;
}

.footer-container {
  display: flex;
  justify-content: center;
  padding: 30px 10px;
  background-color: rgb(30, 127, 255);
}

.footer-link {
  color: white;
  /*font-size: 1.5em;*/
  font-weight: 700;
}

.review-widget {
  font-family: Arial, sans-serif;
  padding: 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.stars {
  /*color: gold;*/
  color: #e47700;
  margin-top: -5px;
}
.review-count {
  /*color: #555;*/
  /*color: #004ae4;*/
  color: #1675ea;
}

.menu-toggle {
  position: fixed;
  top: 15px;
  right: 35px;
  cursor: pointer;
  z-index: 1100;
}

.bar {
  width: 40px;
  height: 4px;
  background-color: white;
  margin: 10px 0;
  transition: transform 0.3s ease;
  border-radius: 5px;
}

.navbar.scrolled .menu-toggle .bar {
  background-color: rgb(0, 0, 0);
}

.menu-links1 {
  display: none;
}

.menu-links1 a {
  display: block;
  color: rgb(255, 255, 255);
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 1.5em;
  font-weight: 700;
  text-align: left;
}

.show-links .bar:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}

.show-links .bar:nth-child(2) {
  opacity: 0;
}

.show-links .bar:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);
}

.menu-links1 {
  position: fixed;
  top: 0;
  /*right: -33.33vw;*/ /* Initially off-screen */
  /*width: 33.33vw;*/ /* One-third of the screen */
  height: 100vh; /* Full height */
  /*background-color: rgb(154, 197, 255);*/
  /*background-color: rgb(138, 189, 255);*/
  background-color: rgb(121, 179, 255);
  display: flex;
  justify-content: center;
  align-items: start;
  transition: right 0.3s ease-in-out;
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
  padding-top: 150px;
}

.menu-links1.show-links {
  right: 0; /* Slide into view */
}

.menu-links1 a {
  position: relative;
  display: block;
}

.menu-links1 a p {
  color: white;
  position: relative;
  display: inline-block; /* Keeps the text container as wide as the text */
  margin: 0; /* Remove extra margins */
  }

/* Adding the animated underline */
.menu-links1 a p::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* Adjust spacing below the text */
  width: 0;
  height: 3px; /* Adjust underline thickness */
  background-color: white;
  transition: width 0.3s ease; /* Smooth animation */
}

.menu-links1 a p.selected {
  color: #ffff0d;
  }

/* Adding the animated underline */
.menu-links1 a p.selected::after {
  background-color: #ffff0d;
}

.menu-links1 a p:hover::after {
  width: 100%;
}

.home-title {
  /*font-size: 5em;*/
  padding-left: 30px;
}

.left-rraa {
  text-align: right;
}

.right-rraa {
  text-align: left;
  padding-bottom: 30px;
}

.rral {
  text-align: center;
  /*margin-top: -1000px;*/
  margin-top: -700px;
}

.modular-design-p {
  padding-bottom: 30px;
  color: rgb(70, 70, 70);
  text-align: left;
}

.modular-btn {
  position: absolute;
  transform: translate(50%, -50%);
}

.qa-p {
  margin-left: 5px;
  margin-right: 60%;
}

.hc-p {
  padding-top: 30px;
}

.hc-l-p {
  font-weight: 700;
}

.footer-footer {
  color: white;
  font-weight: 700;
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /*transition: opacity 0.5s ease;*/
  z-index: 9999;
}
.hidden {
  opacity: 0;
  pointer-events: none;
}
.spinner {
  width: 75px;
  height: 75px;
  border: 10px solid rgba(0, 0, 0, 0.1);
  border-top: 10px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  font-size: 1.5em;
  color: #333;
  margin-top: 15px;
}

.grw-home {
  margin-left: 50px;
  padding-top: 30px;
  padding-bottom: 15px;
  font-size: 1.5em;
}

.nav-logo {
  width: 250px;
}

.card-mobile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*flex: 0 0 25%;*/
  margin: 10px;
  margin-bottom: 100px;
  scroll-snap-align: center;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
  background-color: rgb(255, 255, 255);
}

.card-mobile img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  width: 100%;
  object-fit: cover;
}

.card-content-mobile {
  width: 89% !important;
  padding: 20px;
  text-align: center;
}

.card-mobile h3 {
  font-size: 2em;
  font-weight: 200;
  color: black;
  padding-top: 15px;
}

.card-mobile p {
  font-size: 1.3em;
  line-height: 1.8;
  color: black;
  padding-left: 30px;
  padding-right: 30px;
}

#horizontal-wrapper-mobile {
  margin-left: 20px;
  padding-top: 300px;
  margin-bottom: 150px;
  overflow:hidden;
  height:300vh;
  position:relative;
  align-items: center;
}

#horizontal-wrapper-mobile .inner {
  width:400vw;
  display: flex;
  transition: transform 0.5s ease-out;
}

#horizontal-wrapper-mobile.sticky .inner{
  padding-top: 150px;
  position:fixed;
  top:0;
  bottom:auto;
}

#horizontal-wrapper-mobile.post-sticky .inner{
  padding-top: 150px;
  position:absolute;
  top:auto;
  bottom:0;
}

#horizontal-wrapper-mobile .inner div{
  float:left;
  /*width: 350px !important;*/
  width: 100vw !important;
}

#home-title-mobile.sticky {
  position:fixed;
  top:0;
  bottom:auto;
  transition: opacity 1s ease, transform 2s ease;
  opacity: 0;
  transform: translateX(-1500px);
}

.discover-button-mobile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 155px;
  height: 50px;
  border: 2.5px solid white;
  border-radius: 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  background-color: rgb(58, 58, 58);
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}
  
.icon-mobile {
  width: 30%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  font-size: 1.3em;
  font-weight: 700;
  color: white;
  padding-right: 20px;
  transform: translateX(110px);
}
  
.label-mobile {
  position: absolute;
  left: 0%;
  width: 70%;
  color: white;
  font-size: 1.5em;
  font-weight: 600;
  transition-duration: 0.3s;
  margin-left: 5px;
  padding-left: 10px;
}

.information-cards-mobile {
  display: none;
}

.mobile-swingset-list {
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  list-style: disc inside;
  text-align: left;
  display: inline-block;
  margin: 0;
  padding: 30px;
}

.mobile-swingset-list li {
  padding-left: 32px;
  text-indent: -32px;
}

.swingset-list {
  font-family: sans-serif;
  list-style: disc inside;
  text-align: left;
  display: inline-block;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  vertical-align: top;
}

.attachments-7 {
  display: none;
}

.attachments-4 {
  display: none;
}

#horizontal-wrapper2-mobile {
  display: none;
  padding-top: 50px;
  overflow:hidden;
  height:500vh;
  position:relative;
  align-items: center;
}

.swingset-list-container {
  padding-top: 10px;
  padding-bottom: 17px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  vertical-align: top;
}

.contact-icon {
  display: block;
  margin-bottom: 10px;
}

.contact-title {
  font-weight: 700;
}

.contact-sub-title {
  color: rgb(70, 70, 70);
}

.qa-container {
  position: absolute;
  top: 300px;
  left: 50px;
  z-index: 8;
  color: white;
}

.bounce-text2 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}

.floatBounce {
  animation: floatBounce 1s ease-out forwards;
}

@keyframes floatBounce {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  30% {
    opacity: 1;
    transform: translateY(-10px);
  }
  60% {
    opacity: 1;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.left {
  transform: translateX(-15px);
  opacity: 0;
}

.fade-left {
  animation: fadeLeft 1s ease-out forwards;
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.right {
  transform: translateX(15px);
  opacity: 0;
}

.fade-right {
  animation: fadeRight 1s ease-out forwards;
}

@keyframes fadeRight {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}