* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* border: 1px solid green; */
}

:root {
  --yellow-color: rgb(255, 210, 0);
  --primary-color: rgb(0, 56, 127);
  --white-color: #ffffff;
  --black-color: #000000;
  --light-color: #f7f7f7;
  --dark-color: #111;
  --grey-color: rgba(206, 207, 200, 0.35);
  --overlay-color: rgba(24, 39, 51, 0.85);
  --menu-speed: 0.75s;
}

body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--primary-color);

  /* overflow-x: hidden; */
}

/* .menu-wrap {
  display: none;
} */

a {
  text-decoration: none;
  color: var(--yellow-color);
}

/* LINKS */

a.social:link {
  color: var(--primary-color);
}
a.social:visited {
  color: var(--primary-color);
}
a.social:hover {
  color: var(--dark-color);
}
a.law:link {
  color: var(--primary-color);
}
a.law:visited {
  color: var(--primary-color);
}
a.law:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}
/* Utility Classes */
.container {
  /* max-width: 1660px; */
  margin: 0 auto;
  padding: 0 15px;
}
.containex {
  /* max-width: 1660x; */
  margin: 0 auto;
  padding: 0 15px;
}

div.b {
  position: absolute;
  top: 0;
  border: 3px solid yellow;
  background-color: red;
}

.container-sm {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 15px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.mg-bottom {
  margin-bottom: 100px;
}

/* Navigation */
header {
  width: 100%;
  position: fixed;
  z-index: 1;
  color: #f4f4f6;
}
nav {
  display: flex;
  justify-content: space-between;
  height: 6rem;
  transition: all 400ms ease-in-out;
}
.shrink-nav {
  background-color: rgba(0, 56, 127, 0.8);
  height: auto;
  box-shadow: 0px 0px 14px 0px rgba(0, 56, 127, 0.8);
}

/* Navbar */
.logo {
  margin-left: 20px;
}
.navbar {
  padding: 20px;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .main-menu ul {
  display: flex;
}

.navbar ul li a {
  padding: 10px 20px;
  /* display: block; */
  font-weight: 600;
  transition: 0.5s;
}

.navbar ul li a:hover {
  color: var(--light-color);
}

.navbar ul li a i {
  margin-right: 10px;
}

.navbar ul li:last-child a {
  margin-left: 10px;
}

/* ----- HERO -----*/

.hero-container {
  position: relative;
  color: var(--yellow-color);
}

.hero-image {
  background-image: url("../images/HeroE-1.png");
  height: 100vh;
  background-size: cover;
  background-position: center;
  width: 100%;
  display: block;
}
.hero-text {
  font-family: "thunderhouse-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 0.8;
}
.hero-textH1 {
  font-size: 10rem;
  margin: 0;
  /* color: var(--yellow-color); */
  color: rgba(255, 210, 0, 0.8);
}
.hero-textH3 {
  font-family: "Poppins", sans-serif;
  font-size: 3rem;
  margin-top: 0.5rem;
  color: rgba(255, 210, 0, 0.8);
}

/* ------ ABOUT US DEBAKEL ----- */

.AboutUs {
  display: grid;
  place-items: center; /* Aligns the text at the bottom and center horizontally */
  /* height: 800px; */
  /* background-image: url("../images/AboutUs1840x1060.png"); */
  color: var(--primary-color); /* Text color to make it stand out */
  text-align: center; /* Centers text horizontally */
  background: var(--white-color);
}
.AbotUsContent {
  max-width: 800px; /* Maximum width of the content */
  width: 100%; /* Ensures the content uses full width up to 800px */
  text-align: center; /* Centers the text horizontally */
  /* padding: 20px; */
}
.AboutUsH1 {
  font-family: "thunderhouse-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--yellow-color);
  font-size: 15rem; /* Adjust title font size */
  line-height: 20rem;
  rotate: -5deg;
  margin-top: 100px;
}
.AboutUsText {
  padding: 20px 20px;
  font-size: 1.5rem;
}

/* ----- ALLES WIRT GUT ----- */
.AllesWirtGut {
  display: grid;
  place-items: end center; /* Aligns the text at the bottom and center horizontally */
  height: 1200px; /* Set the height of the div */
  background-image: url("../images/EverydayHooray-1840-1060.png");
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image covers the div */
  background-position: center; /* Centers the image */
  color: white; /* Text color to make it stand out */
  text-align: center; /* Centers text horizontally */
}

/* ----- EVENTS ----- */
.EventWrapper {
  display: flex;
  /* justify-content: center; */
  justify-content: space-around;
  justify-content: space-between;
  align-items: center;
  /* min-height: 100vh; */
  background: var(--white-color);
}

/* Event Container styles */
.EventContainer {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  /* background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  border-radius: 8px;
}

/* Event Title styles */
.EventContainer h1 {
  margin-bottom: 20px;
  font-size: 2rem;
  font-family: "thunderhouse-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--yellow-color);
  font-size: 15rem; /* Adjust title font size */
  margin-bottom: 20px; /* Space below title */
  rotate: -5deg;
}

/* Grid layout for cards */
.EventGrid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
  grid-template-columns: auto auto auto;
  gap: 20px;
  justify-items: center;
  align-items: center;
  margin-bottom: 100px;
}

/* Event Card styles */
.EventCard {
  background: var(--light-color);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 330px;
}

.EventCard img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.EventCard p {
  font-size: 1rem;
  color: var(--primary-color);
  margin: 0;
}
/* The flip card container 
We have added the border property to demonstrate that the flip itself goes out of the box on hover 
(remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  background: var(--grey-color);
  padding: 15px;
  border-radius: 8px;
  width: 330px;
  height: 330px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: var(--primary-color);
  color: var(--yellow-color);
  transform: rotateY(180deg);
}
.flip-card-back p {
  /* margin-top: 50px; */
  padding: 20px;
  letter-spacing: 0.5px;
}
.flip-card-back h1 {
  margin-top: 30px;
  font-size: 3rem;
  padding: 10px;
}

/* ----- CONTACT ----- */
.ContactWrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.ContactContainer {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  /* padding: 20px; */
  height: auto;
  min-height: 800px;
  /* border: 1px solid yellow; */
}

/* Contact Grid layout for content */
.ContactContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  /* gap: 200px; */
  /* justify-content: center;
  justify-content: space-evenly;
  justify-content: space-around; */
  justify-content: space-evenly;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
  /* border: 1px solid green; */
}
/* Contact Title styles */
.ContactContainer h1 {
  font-family: "thunderhouse-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15rem; /* Adjust title font size */
  margin-bottom: 20px; /* Space below title */
  color: var(--yellow-color);
  justify-content: center;
  rotate: 5deg;
  text-align: center;
}

/* Contact Paragraph styles */
.ContactContent p {
  padding: 15px;
  border-radius: 5px;
  color: var(--yellow-color);
  font-size: 1.5rem;
  justify-self: center;
  text-align: left;
}

/* ----- FOOTER ----- */

.footer h4 {
  margin-bottom: 10px;
}

.footer ul li {
  line-height: 2.5;
}

.footer a {
  color: #ccc;
  color: var(--primary-color);
}

.footer i {
  font-size: 1.5rem;
  margin-right: 10px;
}

.footer-grid {
  /* display: grid;
  grid-template-columns: auto;
  gap: 30px;
  justify-content: center;
  align-items: center;
  align-content: center; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
  text-align: center;
}

/* Card */
.card {
  background: #fff;
  color: #000;
  border-radius: 10px;
  padding: 20px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 20px;
  background: var(--yellow-color);
  color: #333;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: 0.5s;
}

.btn:hover {
  opacity: 0.8;
}

.btn-primary {
  background: var(--primary-color);
  color: #fff;
}

.btn-dark {
  background: var(--dark-color);
  color: #fff;
}

.btn-block {
  display: block;
  width: 100%;
}

/* Text Classes */
.text-xxl {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 40px 0 20px;
}

.text-xl {
  font-size: 2.2rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 40px 0 20px;
}

.text-lg {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 30px 0 20px;
}

.text-md {
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 20px 0 10px;
}

.text-sm {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0 5px;
}

.text-center {
  text-align: center;
}

/* Background */
.bg-primary {
  background: var(--primary-color);
  color: #fff;
}

.bg-light {
  background: var(--light-color);
  color: var(--primary-color);
}

.bg-dark {
  background: var(--dark-color);
  color: #fff;
}

.bg-black {
  background: #000;
  color: #fff;
}

/* Hamburger Button */
.hamburger-button {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
}

.hamburger-button .hamburger-line {
  width: 30px;
  height: 3px;
  background: var(--yellow-color);
  margin: 6px 0;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 250px;
  height: 100%;
  z-index: 100;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu ul {
  margin-top: 100px;
  padding-right: 10px;
}

.mobile-menu ul li {
  margin: 10px 0;
}

.mobile-menu ul li a {
  font-size: 20px;
  transition: 0.3s;
}

.menu-wrap {
  display: none;
}

@media (max-width: 760px) {
  .menu-wrap {
    display: block; /* Visible only on screens below 760px */
  }
  .navbar .main-menu {
    display: none;
  }
}