h1{
  font-family: 'Bungee', cursive;
  color: #E58C16;
}

/* Adjusted positioning for Mig-Klatter GIF */
.mig-klatter-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.mig-klatter-image {
  width: 675px; /* 50% larger than original 450px */
  height: auto;
  border-radius: 15px;
}

/* Prevent horizontal scrolling */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 30px;
}

/* Ensure all elements stay within the viewport */
* {
  box-sizing: border-box;
}

/* Make the "anarkist case" section smaller */
.anarkist-case {
  max-width: 900px; /* Adjust this value as needed */
  margin: 0 auto;   /* Centers the container */
}

/* Text circle (text box) styling */
.text-circle-anarkist {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 36px auto;
  color: #222121; /* Text color remains dark */
  text-align: center;
  border-radius: 10px;
}



.text-circle-anarkist p {
  margin: 1;
  padding: 0;
  font-size: 17px;
  font-family: 'Roboto Condensed', sans-serif;
}

/* Text circles */
.text-circle {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: orange;
  color: #222121;
  text-align: center;
  margin: -6px 0;
  border-radius: 10px;
}

.text-circle p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

/* Button container and button styles */
.button-container {
  text-align: center; /* Center the button */
  margin-top: 20px; /* Add space between text and button */
}

.btn.custom-btn {
  background-color: #F09B1E;
  color: #FFFBFB;
  font-family: 'Bungee', cursive;
  font-size: 24px;

  padding: 10px 40px;
  border-radius: 30px;
  transition: transform 0.3s ease;
}

.btn.custom-btn:hover {
  transform: scale(1.14);
  background-color: #E58C16;
  color: black;
  outline: solid 2px #207D73;
}


/* Responsive Adjustments */

/* For phones and small devices */
@media (max-width: 576px) {
  .fullscreen-image-second {
    /* Limit the height on smaller screens */
    max-height: 80vh;
  }
  .mig-klatter-image {
    width: 650px;
    transform: translate(0%, 0%); /* Position for phones */
  }

  .mig-klatter-container{  
    width: -20px;
    object-fit: cover;
  }
}

/* For tablets and medium devices */
@media (min-width: 577px) and (max-width: 991.98px) {
  .fullscreen-image-second {
    max-height: 150vh;
  }
  .mig-klatter-image {
    width: 550px; /* Adjust size for tablets */
    transform: translate(0%, 20%); /* Position for tablets */
    position: relative;
  }
}

/* For large screens */
@media (min-width: 992px) {
  .fullscreen-image-second {
    max-height: 150vh;
  }
  .mig-klatter-image {
    width: 1050px; /* Adjust size for large screens */
    transform: translate(0%, 0%); /* Position for large screens */
    position: relative;
  }


}

/* Reduce space between sections on smaller devices */
@media (max-width: 767.98px) {
  .my-5 {
    margin-top: 2rem !important; /* Reduced from default 3rem */
    margin-bottom: 2rem !important; /* Reduced from default 3rem */
  }

  .text-circle-anarkist {
    margin: 20px auto; /* Reduce margin for smaller devices */
    padding: 15px; /* Reduce padding for smaller devices */
  }

  .btn.custom-btn {
    display: none; /* Hide the button */
  }
}
/* Fade-in effect for the anarkist section */
.fade-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-element.fade-in {
  opacity: 1;
  transform: translateY(0);
}









/* Navbar Styles */
.navbar {
  background-color: #000000; /* Updated to orange background */
  font-family: 'bungee', sans-serif;
}

.navbar-brand {
  color: #ffffff !important;
  font-family: 'Kenia', sans-serif;
  transition: color 0.3s ease;
}

.navbar-brand:hover {
  color: #E58C16 !important; /* You can adjust if needed */
}

.navbar a.nav-link {
  color: #fff !important;
  transition: color 0.3s ease;
}

.navbar a.nav-link:hover,
.navbar a.nav-link:focus {
  color: #E58C16 !important; /* Updated hover color to black */
}

.navbar-toggler {
  border-color: #fff;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


@media (max-width: 991.98px) {
  .navbar-toggler {
    border: none;
    background-color: transparent;
  }
  
  .navbar-toggler-icon {
    background-image: none; /* Remove default SVG */
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    position: relative;
  }
  
  /* Create top and bottom lines using pseudo-elements */
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #fff;
    left: 0;
  }
  
  .navbar-toggler-icon::before {
    top: -8px;
  }
  
  .navbar-toggler-icon::after {
    top: 8px;
  }
}



/* Footer Styles */
.custom-footer {
  font-family: 'Kenia', sans-serif;
  padding: 1rem 0;
  position: sticky;
  margin-bottom: 40px;
}

.custom-footer .footer-icon {
  vertical-align: middle;
  position: sticky;
  height: 20px; 
  margin-right: 8px;
}

.custom-footer .footer-text {
  vertical-align: middle;
  font-size: 18px;
}





/* Updated Card Styling */
.custom-card {
  text-decoration: none;
}


/* Make card container full width */
.card-container {
  background-color: #e29c00; /* Maintain background color */
  max-width: 100%;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 30vh; /* Makes sure it's centered on the screen */
}

@media (max-width: 991.98px) {
  .card-container {
    height: 50vh; /* Full height on smaller screens */
  }
}

.custom-card .card {
  width: 100%;
  height: 100px; /* Adjust height for bigger cards */
  align-items: center;
  border: none; /* Remove background */
  background: none; /* Fully transparent */
  position: relative;
}

.card-container {
  background-color: #e29c00; /* Replace with any color you'd like */
  max-width: 100%
}

.custom-card .card-body {
  font-family: 'Bungee', cursive;
  font-size: 22px; /* Larger default text */
  color: rgb(242, 242, 242);
  text-align: center;
  position: relative;
}

/* Default text always visible */
.default-text {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

/* Hover text starts hidden */
.hover-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  color: #181717;; /* Orange text */
}



.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.anarkist-card {
  background-color: #f4f4f4; /* Light grey background */
  border: 1px solid #ddd;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.anarkist-card .card-body {
  text-align: left;
  padding: 15px;
}

.anarkist-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}





.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.content {
  flex: 1;
  max-width: 600px;
}

.title {
  font-family: 'Bungee', cursive;
  font-size: 48px;
  margin-bottom: 10px;
}

.description {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #222121;
  margin-bottom: 20px;
}

.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
}

.app-image {
  width: 150%;
  max-width: 600px;
  border-radius: 15px;
}

@media (max-width: 768px) {
  .container {
      flex-direction: column;
      text-align: center;
  }

  .image-container {
      margin-top: 20px;
  }

  .app-image {
      max-width: 300px;
  }
}





.tldr-box {
  display: inline-block;
  padding: 20px 300px;
  border: 2px solid #E58C16;
  border-radius: 30px;
  font-family: 'Bungee', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  color: #E58C16;
}

.tldr-under-box {
  display: inline-block;
  padding: 5px 170px;
  border: 2px solid #E58C16;
  border-radius: 30px;
  font-family: 'Bungee', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: #E58C16;
}

.content {
  margin-top: 20px;
  max-width: 600px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;font-size: large;
  line-height: 2;
  font-family: dosis, sans-serif;
  font-size: 20px;
}