.nav-item a{
      font-family: "Montserrat", sans-serif;
      color: black;
      font-size: 20px;
      font-weight: 500;
      transition: color 0.3s ease;
  }
  
  .background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/public/background.jpg');  
    background-size: cover; 
    background-position: center 80%; 
    background-repeat: no-repeat; 
    z-index: -1; 
  }
  
  .content {
    position: relative;
    z-index: 1;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.131);
  }
  
  .navbar {
      background: rgba(0, 0, 0, 0.067);
      backdrop-filter: blur(4px); 
      -webkit-backdrop-filter: blur(4px);
      padding: 0.5rem 0;
      transition: all 0.3s ease;
  }
  
  .navbar-brand img {
      height: 50px;
      width: auto;
      transition: height 0.3s ease, width 0.3s ease;
  }
  
  .navbar-brand img:hover {
      transform: scale(1.05);
  }
    .navbar-toggler {
      border: none;
      padding: 0.25rem 0.5rem;
      font-size: 1.25rem;
  }
  
  .navbar-toggler:focus {
      box-shadow: none;
  }
  
  .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Center navbar items */
.navbar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

  /* Center navbar-text when in hamburger menu */
@media (max-width: 768px) {
  .navbar-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Full width */
    margin: 0;
  }
}

/* Ensure navbar-text spans 100% width and centers the button */
.navbar-text {
  width: 100%; /* Full width */
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-text .btn {
  margin: 0 auto; /* Center the button */
}

/* Remove 100% width from navbar-text for screens 992px and above */
@media (min-width: 992px) {
  .navbar-text {
    width: auto; /* Default width */
  }
}

/* Restore 100% width for navbar-text below 992px */
@media (max-width: 991px) {
  .navbar-text {
    width: 100%; /* Full width */
  }
}

/* Desktop navbar styling */
  @media (min-width: 1079px) {
      
      .nav-link:hover {
          background-color: rgba(255, 255, 255, 0);
          transform: translateY(-2px);
      }
  }
  /* Tablet and mobile navbar styling */
  @media (max-width: 1078px) {
      
      .nav-link:hover {
          background-color: rgba(33, 209, 146, 0.1);
          color: #21D192 !important;
          transform: translateX(5px);
      }
  }
  
  .full-height {
    height: 100vh; 
  }
  .center-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }



  .ha1sz h1{
      font-size: 5.5wh;
      color: #F5F5DC;
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
  }
  .nav-link:hover{
      color: rgb(218, 218, 218);
  }
  
  /* Additional responsive hover states */
  @media (max-width: 1078px) {
      .nav-link:hover {
          color: #21D192 !important;
      }
  }

  h1, h2 {
    opacity: 0; 
    transform: translateY(-5px); 
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate {
    animation: fadeInUp 2s forwards;
  }

  .animate:nth-of-type(1) {
    animation-delay: 0s; 
  }
  .animate:nth-of-type(2) {
    animation-delay: 0.7s;
  }
  .animate:nth-of-type(3) {
    animation-delay: 1.2s; 
  }


  .alsosor .container-xxl {
  padding-top: 50px;
  }

  .card {
    border: 2px solid #e0e0e0;
    /* subtle default shadow to lift the card slightly from background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.18s ease, transform 0.12s ease;
    margin-bottom: 30px;
    opacity: 1;
    transform: none;
    max-width: 600px;
  }

  /* keep visible helper but don't animate via opacity/translate */
  .card.visible {
    opacity: 1;
    transform: none;
  }

  .card:hover {
    /* faint hover shadow only */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: none;
    cursor: pointer;
  }
  .read-more {
    position: absolute;
    bottom: 25px;
    right: 10px;
    color: rgb(0, 0, 0);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
    display: flex;
    align-items: center;
    font-size: 1rem;
  }

  .read-more .arrow {
    margin-left: 8px;
    font-size: 1rem;
    transition: margin-left 0.3s;
  }

  .card:hover .read-more {
    opacity: 1;
    transform: translateY(-5px);
  }

  .card:hover .read-more .arrow {
    margin-left: 12px;
    transform: translateY(1px);
  }


  @media (max-width: 1173px) {
    .read-more, .read-more .arrow {
      font-size: 14px; 
    }
  }

  @media (min-width: 992px) and (max-width: 1135px) {
    .read-more, .read-more .arrow {
      bottom: 5px; 
    }
  }

  @media (max-width: 991px) {
    .read-more, .read-more .arrow {
      font-size: 14px;
      bottom: 25px;
    }
  }
  @media (min-width: 765px) and (max-width: 794px) {
    .read-more, .read-more .arrow {
      bottom: 5px;
    }
  }
  @media (max-width: 404px) {
    .read-more, .read-more .arrow {
      font-size: 14px; 
      bottom: 5px; 
    }
  }

  .background-overlay {
  position: relative;
  width: 100%;
  background: url('/public/circle.svg') no-repeat center center;
  background-size: cover;
  padding: 1rem; 
}

.background-overlay-pokly {
  position: relative;
  width: 100%;
  background: url('/public/polygrid.svg') no-repeat center center;
  background-size: cover;
  padding: 1rem; 
}

.overlay-text {
  text-align: center;
  margin: 20px 0; 
  font-size: 2.6em;
  font-weight: bold;
  font-family: "Roboto", system-ui;
}
.section {
  position: relative;
  background-color: #ffffff; 
  padding: 50px 0;
  text-align: center;
}

/* Responsive section padding */
@media (max-width: 768px) {
  .section {
    padding: 40px 0;
  }
}

@media (max-width: 576px) {
  .section {
    padding: 30px 0;
  }
}

@media (max-width: 400px) {
  .section {
    padding: 25px 0;
  }
}

.section-title {
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  color: #2c5f2d; 
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Responsive section title */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
    margin-bottom: 15px;
    padding: 0 15px;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
    padding: 0 10px;
    line-height: 1.2;
  }
}

@media (max-width: 400px) {
  .section-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    padding: 0 5px;
  }
}

.section-title-contact {
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  color: #1f4220; 
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  transform: translateY(20px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-description {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: 0.4s; 
  padding: 0 20px;
}

/* Responsive section description */
@media (max-width: 768px) {
  .section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 576px) {
  .section-description {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 15px;
    text-align: justify;
  }
}

@media (max-width: 400px) {
  .section-description {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0 10px;
  }
}

.section.in-view .section-title {
  opacity: 1;
  transform: translateY(0);
}

.section.in-view .section-description {
  opacity: 1;
  transform: translateY(0);
}


.button--piyo{
  --main_color : #f4cf47 ;
  --sub_color1 : #f4e19c ;
  --sub_color2 : #ff8108 ;
  --base_color : #000 ;
  --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
  --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
  --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
}
.button--hoo{
  --main_color : #4993ff ;
  --sub_color1 : #385082 ;
  --sub_color2 : #fff58f ;
  --sub_color3 : #313131 ;
  --base_color : #4c4c4c ;
  --border_radius1 : 50px 50px 50px 50px / 40px 40px 40px 40px ;
  --border_radius2 : 60px 60px 50px 50px / 40px 40px 40px 40px ;
  --border_radius3 : 40px 40px 50px 50px / 60px 60px 40px 40px ;
  --border_radius3 : 50px 50px 45px 45px / 40px 40px 60px 60px ;
}
.button--pen{
  --main_color : #7aaaf2 ;
  --sub_color1 : #393939 ;
  --sub_color2 : #ada2a2 ;
  --base_color : #ffffff ;
  --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
  --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
  --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
}
.button{
  position : relative ;
  display : flex ;
  justify-content : center ;
  align-items : center ;
  width : 220px ;
  height : 60px ;
  box-sizing : border-box ;
  text-decoration : none ;
  border : solid 3px #373737 ;
  border-radius : 25px ;
  background : var(--main_color) ;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}
.button::before{
  content : '' ;
  position : absolute ;
  z-index : 2 ;
  top : 0 ;
  right : 20px ;
  bottom : 0 ;
  margin : auto 0 ;
  width : 24px ;
  height : 24px ;
  background : var(--base_color) ; 
  transition : all ease .2s ;
}
.button__wrapper{
  display : flex ;
  justify-content : center ;
  align-items : center ;
  position : relative ;
  z-index : 1 ; 
  width : 100% ;
  height : 100% ;
  border-radius : 20px ;
  overflow : hidden ;
}
.button__wrapper::before,
.button__wrapper::after{
  transition : all .5s ease ;
}
.characterBox{
  position : absolute ;
  top : -54px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  display : flex ;
  justify-content : space-between ;
  align-items : flex-end ;
  width : 180px ;
  height : 56px ;
}
.button__text{
  position : relative ;
  z-index : 3 ;
  font-size : 32px ;
  letter-spacing : 4px ;
  color : var(--base_color) ;
  transition : all .3s ease ;
}
.character{
  position : relative ;
  width : 56px ;
  height : 36px ;
  box-sizing : border-box ;
  border : solid 3px #000 ;
  background : var(--main_color) ;
  border-radius : var(--border_radius1) ;
  animation : sleep 1s ease infinite alternate ;
}
.character::before{
  content : '' ;
  position : absolute ;
  top : -12px ;
  left : 22px ;
  width : 12px ;
  height : 12px ;
  background : #000 ;
  clip-path : path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z') ;
}
.character__face{
  position : absolute ;
  z-index : 2 ;
  top : 15px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 12px ;
  height : 6px ;
  background : var(--sub_color2) ;
  border-radius : 50% 50% 50% 50% / 78% 78% 22% 22% ;
  transition : .2s ;
}
.character__face::before,
.character__face::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 8px ;
  height : 2px ;
  border-radius : 4px ;
  background : #000 ;
}
.character__face::before{
  left : -5px ;
}
.character__face::after{
  right : -5px ;
}
.button--hoo .character__face::before,
.button--hoo .character__face::after{
  background : #fff ;
}
.button--hoo .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  top : 8px ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 14px ;
  height : 10px ;
  background : #385082 ;
  animation : face_hoo 1s ease infinite alternate ;
}
.button--hoo .charactor__face2::before,
.button--hoo .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -1px ;
  width : 20px ;
  height : 10px ;
  box-sizing : border-box ;
  border-radius : 50% ;
  border : solid 3px #385082 ;
  background : #000 ;
}
.button--hoo .charactor__face2::before{
  left : -12px ;
}
.button--hoo .charactor__face2::after{
  right : -12px ;
}
.button--hoo .charactor__body{
  position : absolute ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  animation : body_hoo 1s ease infinite alternate ;
}
.button--hoo .charactor__body::before,
.button--hoo .charactor__body::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
}
.button--hoo .charactor__body::before{
  left : -17px ;
}
.button--hoo .charactor__body::after{
  right : -17px ;
}

.button--pen .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 30px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  animation : face_pen 1s ease infinite alternate ;
}
.button--pen .charactor__face2::before,
.button--pen .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -8px ;
  width : 17px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
}
.button--pen .charactor__face2::before{
  left : -4px ;
}
.button--pen .charactor__face2::after{
  right : -4px ;
}

.button--piyo::before{
  clip-path : path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z') ;
}
.button--hoo::before{
  clip-path : path('M21.93,9.8h-3.33S11.5,.79,11.5,.79c-.74-.94-2.05-1.05-2.92-.26-.88,.79-.99,2.19-.25,3.13l4.84,6.13-11.09-.02C.95,9.73,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l11.09,.02-4.86,6.12c-.74,.93-.63,2.33,.24,3.13,.39,.35,.87,.53,1.34,.53,.59,0,1.17-.27,1.58-.78l7.13-8.99h3.32s0,0,0,0c1.14,0,2.07-.99,2.07-2.22,0-1.23-.93-2.22-2.07-2.22Z') ;
}
.button--pen::before{
  clip-path : path('M23.36,10.63L6.18,.13c-.93-.57-1.85,.81-1.39,2.06l1.44,3.91c.3,.81,.01,1.81-.6,2.1L.72,10.58c-.96,.47-.96,2.37,0,2.83l4.91,2.38c.62,.3,.9,1.29,.6,2.1l-1.44,3.91c-.46,1.26,.46,2.63,1.39,2.06L23.36,13.37c.86-.53,.86-2.22,0-2.75Z') ;
}
.button--piyo .button__wrapper::before,
.button--piyo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  bottom : 0 ;
  width : 130px ;
  height : 38px ;
  background : var(--sub_color1) ;
  clip-path : path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z') ;
}
.button--piyo .button__wrapper::before{
  left : 0 ;
}
.button--piyo .button__wrapper::after{
  right : 0 ;
  transform : rotateY(180deg) ;
}
.button--hoo .button__wrapper::before,
.button--hoo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 80px ;
  height : 100px ;
  background : var(--sub_color1) ;
  clip-path : path('M75.96,41.27l-42.76,11.17V0H0V100H33.2v-28.75l45.07-23.97c3.38-1.8,1.39-6.98-2.31-6.01Z') ;
}
.button--hoo .button__wrapper::before{
  left : 6px ;
  bottom : 0 ;
}
.button--hoo .button__wrapper::after{
  right : 8px ;
  bottom : -10px ;
  transform : rotateY(180deg) ;
}
.button--pen .button__wrapper::before,
.button--pen .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 110px ;
  height : 60px ;
  background : var(--sub_color1) ;
  clip-path : path('M9.12,14.14L43.15,.5c1.61-.86,3.57-.59,4.9,.68l19.55,14.31c.42,.4,.76,.89,.99,1.42l3.45,13.09c.89,2.06,3.18,3.09,5.28,2.37l11.76-4.86c1.56-.54,3.29-.11,4.43,1.1l11.93,12.39c.48,.51,.84,1.12,1.03,1.8l3.35,11.62c.8,2.79-1.25,5.58-4.1,5.58H4.27c-2.71,0-4.73-2.54-4.18-5.24L6.92,17.11c.26-1.28,1.07-2.37,2.2-2.97Z') ;
}
.button--pen .button__wrapper::before{
  left : -16px ;
  bottom : -10px ;
}
.button--pen .button__wrapper::after{
  right : -8px ;
  bottom : -20px ;
  transform : rotateY(180deg) ;
}
.button:hover .button__wrapper::before{
  transform : translateX(-12px) ;
}
.button:hover .button__wrapper::after{
  transform : rotateY(180deg) translateX(-12px) ;
}
.button:hover .button__text{
  letter-spacing : 6px ;
}
.button:hover::before{
  right : 14px ;
}
.button:hover .wakeup{
  animation : wakeup .2s ease ;
  animation-fill-mode : forwards ;
}
.button:hover .wakeup .character__face{
  top : 20px ;
}
.button:hover .wakeup .character__face::before,
.button:hover .wakeup .character__face::after{
  animation : eye 5s linear infinite ;
}
.button:hover .wakeup:nth-child(2) .character__face::before,
.button:hover .wakeup:nth-child(2) .character__face::after{
  animation : eye_2 5s linear infinite ;
}
.button--hoo:hover .wakeup .charactor__face2::before,
.button--hoo:hover .wakeup .charactor__face2::after{
  height : 20px ;
}
.button--hoo:hover .wakeup .charactor__body{
  animation : body_hoo_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  border-top : solid 6px #385082 ;
}
.button--hoo:hover .wakeup .charactor__body::before,
.button--hoo:hover .wakeup .charactor__body::after{
  top : -12px ;
  border-top : solid 5px #385082 ;
}
.button--pen:hover .wakeup .charactor__face2{
  animation : face_pen_wakeup .2s ease ;
  animation-fill-mode : forwards ;
}
.button--pen:hover .wakeup .charactor__face2::before,
.button--pen:hover .wakeup .charactor__face2::after{
  top : -12px ;
  height : 18px ;
}
@keyframes sleep{
  0%  {
      height : 36px ;
      border-radius : var(--border_radius1) ;
  }
  100%{
      height : 32px ;
      border-radius : var(--border_radius2) ;
  }
}
@keyframes wakeup{
  0%  {
      height : 32px ;
      border-radius : var(--border_radius2) ;
  }
  100%{
      height : 56px ;
      border-radius : var(--border_radius3) ;
  }
}
@keyframes eye {
  0%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  30%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  32%{
      top : -4px ;
      width : 8px ;
      height : 2px ;
  }
  34%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  70%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  72%{
      top : -4px ;
      width : 8px ;
      height : 2px ;
  }
  74%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  76%{
      top : -4px ;
      width : 8px ;
      height : 2px ;
  }
  78%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  100%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  }
  @keyframes eye_2 {
  0%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  10%{
      transform : translateX(0);
  }
  12%{
      transform : translateX(3px);
  }
  20%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  22%{
      top : -4px ;
      width : 8px ;
      height : 2px ;
  }
  24%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  25%{
      transform : translateX(3px);
  }
  27%{
      transform : translateX(0);
  }
  74%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
      transform : translateX(0);
  }
  76%{
      top : -4px ;
      width : 8px ;
      height : 2px ;
      transform : translateX(3px);
  }
  78%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  80%{
      top : -4px ;
      width : 8px ;
      height : 2px ;
  }
  82%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
  }
  85%{
      transform : translateX(3px);
  }
  87%{
      transform : translateX(0);
  }
  100%{
      top : -6px ;
      width : 6px ;
      height : 6px ;
      transform : translateX(0);
  }
  }
  @keyframes body_hoo{
      0%  {
          bottom : 2px ;
      }
      100%{
          bottom : 0 ;
      }
  }
  @keyframes body_hoo_wakeup{
      0%  {
          bottom : 2px ;
      }
      100%{
          bottom : 6px ;
      }
  }
  @keyframes face_pen{
      0%  {
          height : 14px ;
      }
      100%{
          height : 10px ;
      }
  }
  @keyframes face_pen_wakeup{
      0%  {
          height : 14px ;
      }
      100%{
          height : 28px ;
      }
  }

  .button:not(:last-child){
      margin-bottom : 80px ;
  }

  .card-member {
    transition: transform 0.9s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
  }
  .card-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  /* Mobilbarát, világos téma apróságai */
  .card-title {
    font-weight: 600;
    color: #333;
  }
  .card-text {
    color: #555;
    font-size: 0.95rem;
  }

  /* Teljesítménytúra kártyák speciális stílusai */
.teljesitmeny-card {
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 15px;
  overflow: hidden;
}

.teljesitmeny-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.teljesitmeny-card .card-header {
  border-radius: 15px 15px 0 0 !important;
  border: none;
  padding: 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.teljesitmeny-card .terkep-container {
  position: relative;
  background-color: #f8f9fa;
}

.teljesitmeny-card .terkep-container iframe {
  transition: opacity 0.3s ease;
}

.teljesitmeny-card:hover .terkep-container iframe {
  opacity: 0.9;
}

.teljesitmeny-card .tour-stats {
  background-color: #f8f9fa;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.teljesitmeny-card .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  padding: 0.2rem 0;
}

.teljesitmeny-card .stat-item span:first-child {
  flex: 1;
  text-align: left;
}

.teljesitmeny-card .stat-item span:last-child {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 600;
  color: #2c5f2d;
}

.teljesitmeny-card .pricing {
  background-color: #fff3cd;
  padding: 0.75rem;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

.teljesitmeny-card .price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  padding: 0.2rem 0;
}

.teljesitmeny-card .price-item span:first-child {
  flex: 1;
  text-align: left;
}

.teljesitmeny-card .price-item span:last-child {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 600;
}

.teljesitmeny-card .price-item.text-success span:last-child {
  color: #28a745;
}

.teljesitmeny-card .route-description {
  background-color: #e7f3ff;
  padding: 0.75rem;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.teljesitmeny-card .route-description h6 {
  color: #007bff;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.teljesitmeny-card .route-description p {
  margin-bottom: 0;
  color: #333;
  line-height: 1.4;
}

/* Reszponzív beállítások a teljesítménytúra kártyákhoz */
@media (max-width: 1200px) {
  .teljesitmeny-card {
    max-width: 100% !important;
  }
}

@media (max-width: 992px) {
  .teljesitmeny-card {
    height: auto !important;
    max-width: 500px !important;
    margin: 0 auto;
  }
  
  .teljesitmeny-card .terkep-container {
    height: 240px !important;
  }
}

@media (max-width: 768px) {
  .teljesitmeny-card {
    height: auto !important;
    max-width: 100% !important;
  }
  
  .teljesitmeny-card .terkep-container {
    height: 200px !important;
  }
  
  .teljesitmeny-card .stat-item,
  .teljesitmeny-card .price-item {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .teljesitmeny-card .terkep-container {
    height: 150px !important;
  }
  
  .teljesitmeny-card .card-header h4 {
    font-size: 1.3rem;
  }
  
  .teljesitmeny-card .card-header small {
    font-size: 0.8rem;
  }
}

/* GPX térkép stílusok */
.gpx-map-placeholder {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gpx-map-placeholder:hover {
  transform: scale(1.02);
}

.teljesitmeny-card .gpx-map-placeholder .btn {
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}

.teljesitmeny-card .gpx-map-placeholder .btn:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Google Maps kontainer stílusok */
.terkep-container .google-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Nagy térkép szekció stílusai */
.route-selector {
  font-weight: 500;
  padding: 12px 20px;
  transition: all 0.3s ease;
  border-width: 2px !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
  background-color: transparent !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  white-space: nowrap !important;
}

.route-selector:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #495057 !important;
  color: #495057 !important;
}

.route-selector.active {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Aktív gombok specifikus színei */
.route-selector.active[data-route="5km"] {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: white !important;
}

.route-selector.active[data-route="15km"] {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #212529 !important;
}

.route-selector.active[data-route="25km"] {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
}

/* Hover effektek aktív gombokon */
.route-selector.active[data-route="5km"]:hover {
  background-color: #138496 !important;
  border-color: #138496 !important;
}

.route-selector.active[data-route="15km"]:hover {
  background-color: #e0a800 !important;
  border-color: #e0a800 !important;
}

.route-selector.active[data-route="25km"]:hover {
  background-color: #1e7e34 !important;
  border-color: #1e7e34 !important;
}

.big-map-container {
  position: relative;
  transition: all 0.3s ease;
}

.big-map-container:hover {
  box-shadow: 0 12px 25px rgba(0,0,0,0.15) !important;
}

.route-info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #e9ecef;
}

.route-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}

.map-loading-placeholder {
  transition: all 0.5s ease;
}

.route-info-title {
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

/* Bootstrap btn-group felülírása egyenletes elrendezéshez */
.btn-group {
  display: flex !important;
  align-items: stretch !important;
}

.btn-group .route-selector {
  flex: 1 !important;
  border-radius: 0 !important;
}

.btn-group .route-selector:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.btn-group .route-selector:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* Reszponzív beállítások a nagy térképhez */
@media (max-width: 768px) {
  .big-map-container {
    height: 350px !important;
    margin-bottom: 20px;
  }
  
  .btn-group {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .btn-group .route-selector {
    flex: none !important;
    margin-bottom: 5px;
    border-radius: 6px !important;
  }
  
  .route-info-card {
    margin-bottom: 15px;
  }
}

@media (max-width: 576px) {
  .big-map-container {
    height: 300px !important;
  }
  
  .route-selector {
    font-size: 0.9rem;
    padding: 10px 15px;
  }
}

/* Responsive adjustments for navbar-brand image */
.navbar-brand img {
  height: 50px;
  width: auto;
  transition: height 0.3s ease, width 0.3s ease;
}

@media (max-width: 768px) {
  .navbar-brand img {
    height: 40px; /* Smaller size for mobile */
  }
}

@media (max-width: 576px) {
  .navbar-brand img {
    height: 30px; /* Even smaller size for smaller devices */
  }
}

/* Center navbar items in hamburger menu */
@media (max-width: 768px) {
  .navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

/* Align navbar items to the side when not in hamburger menu */
@media (min-width: 769px) {
  .navbar-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}