h1{
    font-family: 'Bungee', cursive;
    color: #E58C16;
  }
  
  /* Container for the seamless pattern image */
  .fullscreen-image-container {
    position: relative;
    z-index: 1;
  }
  
  /* Seamless pattern image */
  .fullscreen-image-second {
    width: 100%;
    height: 1300px;
    object-fit: cover;
  
  }
  
  /* 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%;
  }
  
  /* 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: 'Kenia', sans-serif;
    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");
  }
  
  /* 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;
  }
  
  
  
  
  @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 {
      content: "";
      position: absolute;
      width: 30px;
      height: 2px;
      background-color: #fff;
      left: 0;
    }
    
    .navbar-toggler-icon::before {
      top: -8px;
    }
    
    .navbar-toggler-icon::after {
      top: 8px;
    }
  }
  
  
  
  
  
  
  
  
  /* 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:100vh; /* Makes sure it's centered on the screen */
  }
  
  .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;
  }