/* Hero Section Styles */
.hero-section {
  background: linear-gradient(
    135deg,
    #0B1D51 0%,
    #725CAD 25%,
    #8CCDEB 50%,
    #FFE39F 75%,
    #FFE3A9 100%
  );
  color: white;
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.hero-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.hero-section h1 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  line-height: 1.1;
}

.hero-section p {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 3rem;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
}

.stat {
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.stat:hover {
  transform: translateY(-5px);
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: white;
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 1.5rem 3rem;
    min-height: 50vh;
  }
  
  .hero-section h1 {
    font-size: 2.5rem;
  }
  
  .hero-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }
  
  .hero-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  
  .stat {
    width: 200px;
    padding: 1.25rem;
  }
  
  .stat-number {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section p {
    font-size: 1rem;
  }
  
  .hero-stats {
    gap: 1rem;
  }
  
  .stat {
    width: 150px;
    padding: 1rem;
  }
}


.hero-button {
  padding: 8px;
  border: 2px solid #fff;
  border-radius: 10px;
  font-size: 0.9rem;
  text-decoration: none;
}

.hero-button a {
  text-decoration: none;
}

.herobutton::hover {
  background-color: #fff;
  color: #000;
}

/* Guides Page Styles */
.guides-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.guides-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1200px) {
  .guides-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .guides-masonry {
    grid-template-columns: 1fr;
  }
}

.guide-card {
  padding: 2rem;
  border-radius: 15px;
  margin-bottom: 2rem;
  text-align: center;
  transition: transform 0.3s ease;
  width: 100%;
  height: 30vh;
}

.guide-card:hover {
  transform: translateY(-5px);
}

.guide-card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.guide-card button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 1rem;
  color: inherit;
  font-weight: 500;
  display: none;
}

/* Card Styles */
.guide-card.french {
  background: linear-gradient(
    to right,
    #3238a8 0%,
    #3238a8 33.3%,
    white 30%,
    white 63.6%,
    #a33c27 60%,
    #a33c27 100%
  );
  color: #D64545;
  opacity: 1;
}

.guide-card.britain {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flag_of_the_United_Kingdom_%281-2%29.svg/1920px-Flag_of_the_United_Kingdom_%281-2%29.svg.png");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
  opacity: 1;
}

.guide-card.sweden {
  background:
  linear-gradient(90deg, transparent 40%, #fecd04 40%, #fecd04 60%, transparent 60%) top left,
  linear-gradient(180deg, transparent 40%, #fecd04 40%, #fecd04 60%, transparent 60%) top right,
    linear-gradient(180deg, transparent 40%, #fecd04 40%, #fecd04 60%, transparent 60%) bottom left,
    linear-gradient(90deg, transparent 40%, #fecd04 40%, #fecd04 60%, transparent 60%) bottom right,


  /* Blue background */
    #085388;  color: #2B87BB;
  opacity: 1;
}

.guide-card.germany {
  background: linear-gradient(
    to bottom,
    #020202 0%,
    #020202 33.3%,
    #ee1e26 30%,
    #ee1e26 63.6%,
    #fdd005 60%,
    #fdd005 100%
  );  color: #2BB844;
  opacity: 0.9;
}

.guide-card.austria {
  background: linear-gradient(
    to bottom,
    #c82031 0%,
    #c82031 33.3%,
    white 30%,
    white 63.6%,
    #c82031 60%,
    #c82031 100%
  );  color: #2BB844;
  opacity: 0.9;
}

.guide-card.italy {
  background: linear-gradient(
    to right,
    #198933 0%,
    #198933 33.3%,
    white 30%,
    white 63.6%,
    #c50a09 60%,
    #c50a09 100%
  );  color: #2B44BB;
  opacity: 0.9;
}

.guide-card.switzerland {
  background:
    /* Horizontal bar */
    linear-gradient(90deg, transparent 25%, white 25%, white 75%, transparent 75%),
    /* Vertical bar */
    linear-gradient(180deg, transparent 25%, white 25%, white 75%, transparent 75%),
    #f40f0e; /* Red background */
  background-size: 50% 50%, 50% 50%, cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.8;
}

.guide-card.belgium {
  background: linear-gradient(
    to right,
    #020202 0%,
    #020202 33.3%,
    #fce933 30%,
    #fce933 63.6%,
    #ed222d 60%,
    #ed222d 100%
  );  color: #2B44BB;
  opacity: 0.9;
}


.guide-card.netherlands {
  background: linear-gradient(
    to bottom,
    #92373a 0%,
    #92373a 33.3%,
    white 30%,
    white 63.6%,
    #1b458d 60%,
    #1b458d 100%
  );  color: #2BB844;
  opacity: 0.9;
}

.guide-card.romania {
  background: linear-gradient(
    to right,
    #273679 0%,
    #273679 33.3%,
    #fad113 30%,
    #fad113 63.6%,
    #cf2027 60%,
    #cf2027 100%
  );  color: #2B44BB;
  opacity: 0.9;
}

.guide-card.luxembourg {
  background: linear-gradient(
    to bottom,
    #f02e42 0%,
    #f02e42 33.3%,
    white 30%,
    white 63.6%,
    #16a3e3 60%,
    #16a3e3 100%
  );  color: #2BB844;
  opacity: 0.9;
}

.guide-card.lithuania {
  background: linear-gradient(
    to bottom,
    #fbb716 0%,
    #fbb716 33.3%,
    #066a43 30%,
    #066a43 63.6%,
    #be212a 60%,
    #be212a 100%
  );  color: #2BB844;
  opacity: 0.9;
}

.guide-card.ireland {
  background: linear-gradient(
    to right,
    #169b62 0%,
    #169b62 33.3%,
    white 30%,
    white 63.6%,
    #ff883e 60%,
    #ff883e 100%
  );  color: #2B44BB;
  opacity: 0.9;
}

.guide-card.estonia {
  background: linear-gradient(
    to bottom,
    #1674bc 0%,
    #1674bc 33.3%,
    #000001 30%,
    #000001 63.6%,
    #fffffe 60%,
    #fffffe 100%
  );  color: #2BB844;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.guide-card.monaco {
  background: linear-gradient(
    to bottom,
    #dc0d38 0%,
    #dc0d38 49.9%,
    #fffffe 50%,
    #fffffe 100%
  );  color: #2BB844;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.guide-card.ukraine {
  background: linear-gradient(
    to bottom,
    #0057b7 0%,
    #0057b7 49.9%,
    #ffd700 50%,
    #ffd700 100%
  );  color: #2BB844;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.guide-card.hungary {
  background: linear-gradient(
    to bottom,
    #ce2939 0%,
    #ce2939 33.3%,
    white 30%,
    white 63.6%,
    #477050 60%,
    #477050 100%
  );  color: #2BB844;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.guide-card.sanmarino {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Flag_of_San_Marino.svg/800px-Flag_of_San_Marino.svg.png");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}

.guide-card.liechtenstein {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Flag_of_Liechtenstein.svg/960px-Flag_of_Liechtenstein.svg.png");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}

.guide-card.poland {
  background: linear-gradient(
    to top,
    #dc0d38 0%,
    #dc0d38 49.9%,
    #fffffe 50%,
    #fffffe 100%
  );  color: #2BB844;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.guide-card.portugal {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/600px-Flag_of_Portugal.svg.png");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}

.guide-card.greece {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Greece.svg/800px-Flag_of_Greece.svg.png");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}

.guide-card.spain {
  background: url("https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}

.guide-card.andorra {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Andorra.svg/960px-Flag_of_Andorra.svg.png");
  background-size: cover;
   background-position: center;
  color: #2B87BB;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}



#searchInput {
  width: 90%;
  padding: 10px;
  font-size: 16px;
  border: 4px solid darkblue;
  border-radius: 25px;
  margin-bottom: 20px;
  box-sizing: border-box;
  margin-left: 5%;
}

.search ul {
  display: none;
  position: absolute;
  background: white;
  border: 2px solid darkblue;
  border-radius: 10px;
  width: 90%;
  margin-left: 5%;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 12px rgba(255, 255, 255, 0.1);
  z-index: 1000;
}

.search ul li {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  list-style: none;
}

.search ul li:hover {
  background-color: #f0f0f0;
}

.search ul li:last-child {
  border-bottom: none;
}

.search {
  position: relative;
}

.search a {
  text-decoration: none;
  color: inherit;
}