html {
  font-size: 14px;
  scroll-behavior: smooth;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/*<weight>: Use a value from 100 to 900*/

.grenze-gotisch-font {
  font-family: "Grenze Gotisch", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 4vh;
}

.grenze-gotisch-titles {
   font-family: "Grenze Gotisch", serif;
   font-optical-sizing: auto;
   font-weight: 200;
   font-style: normal;
 }

.grenze-gotisch-banner {
  font-family: "Grenze Gotisch", serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-size: 7vh;
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}
                 
.fade-in-first {
  animation: fadeIn 2s ease-in-out forwards; /* 2s duration, ease-in-out timing function, forwards to maintain end state */
}

.fade-in-second {
  opacity: 0; /* Initially hidden */
  animation: fadeIn 2s ease-in-out forwards; /* 2s duration, ease-in-out timing function, forwards to maintain end state */
  animation-delay: 1s; /* Delay for the second text to start after the first one */
}

.hover-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* Adjust this value to maintain aspect ratio */
}

.hover-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container without distortion */
  transition: opacity 1s ease-in-out;
}

.fade-out {
  opacity: 0;
}

.hover-container:hover #img1 {
  opacity: 0;
}

.hover-container:hover #img2 {
  opacity: 1;
}

/* Hover effect for cards */
.hover-card {
  transition: transform 0.3s ease-in-out;
}

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

.card-link {
  text-decoration: none;
  color: inherit;
}

.navbar-brand .icon {
  padding-right: 0;
  margin-right: -5px; /* Adjust this value to control the overlap */
  position: relative;
  z-index: 1;
}
.navbar-brand .text-overlay {
  position: relative;
  left: -18px; /* Adjust this value to control the overlap */
  z-index: 2;
  background-color: transparent; /* Ensure background is transparent */
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.container img {
  width: 100%;
  max-height: 250px; /* Adjust this value to your desired height */
  object-fit: cover; /* Ensures the image covers the specified height */
}

.fixed-height-img {
  width: 80%;
  max-height: 200px; /* Set a uniform height for the images */
  object-fit: cover; /* Ensures the image covers the specified height */
}

.fixed-height-img2 {
  width: 80%;
  max-height: 200px; /* Set a uniform height for the images */
  object-fit: cover; /* Ensures the image covers the specified height */
}

.navbar-gradient {
  background: rgba(0, 0, 255, 0.5); /* Fallback color */
  background: linear-gradient(180deg, rgba(0, 0, 207, 0.8) 0%, rgba(0, 0, 255, 0.2) 80%, rgba(0, 0, 255, 0) 100%);
  border-bottom: none;
  height: 12vh; /* Responsive height */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.card-row {
  /*background: linear-gradient(180deg, rgb(1, 45, 5) 0%, rgba(4, 0, 150, 0.6) 50%, rgba(4, 0, 150, 0.69) 100%);*/
  background-color: rgb(1, 45, 5);
  height: 10vh;
}

.banner {
  height: 10vh;
}

.soft {
  background-color: #e7f2fa;
  border-top: none;
}

.soft2 {
  background-color: #e7f2fa;
}

.img-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 50%;
  height: 300px; /* Set your desired height */
  overflow: hidden; /* Ensure no overflow */
}

.img-fixed-size {
  width: 50%;
  height: 100%;
  object-fit: cover; /* This ensures the image covers the area while maintaining aspect ratio */
}

.no-lb {
  border-left: none;
}

.about-card {
  height: 15vh;
  margin-bottom: 20px; /* Add margin for spacing between cards */
}

.card p {
  font-size: 1.1rem; /* Slightly larger font size for better readability */
  padding: 15px;
}

.card img {
  border-radius: 5px; /* Slightly round the corners of images */
}

.text-center p {
  margin: auto;
  max-width: 75%;
}

.footer1 {
  background: white;
  height: 10vh;
}

.card-body-2 {
  flex: 1 1 auto;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.shadow-custom {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.tall-row {
  height: 80vh;
  background-color: rgba(1, 1, 95, 0.89);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7), 0 -4px 8px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.6); /* Added top shadow */
  position: relative; /* Ensure the shadow is visible */
  z-index: 1; /* Bring it on top of other elements */
  overflow: hidden;
}

.silver{
  color: #c0c0c0;
}
.palegold{
  text-decoration-color: #eee8aa;
  color: #eee8aa !important;
}

.gold {
  color: #e5ec1b;
}

.yellow {
  color: #f0e68c;
}

.below-nav {
  padding-top: 17vh;
}

.no-border {
  border-style: none;
}

.t-back{
  background: transparent;
  backface-visibility: hidden;
}
/*pinks, purples, tan, seafoam blue, other green, gold, yellow*/


.bi-telephone {
  width: 1vh;
  height: 1vh;
  color: cornflowerblue;
}

.linespace{
  line-height: 2.8;
}

.icon{
  max-height: 12vh;
  max-width: 12vh;
  object-fit: cover;
}

.icon2{
  max-height: 3vh;
  max-width: 2vh;
  object-fit: cover;
}

.install {
  max-height: 25vh;
  max-width: 75vh;
}

.orange {
  color: orange;
}

.card-title {
  font-size: calc(1.5rem + 2vw); /* Make the font size responsive */
}

.short-row {
  background-color: rgba(1, 1, 95, 0.89);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7), 0 -4px 8px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.6); /* Added top shadow */
  position: relative; /* Ensure the shadow is visible */
  z-index: 1; /* Bring it on top of other elements */
  overflow: hidden;
  border-radius: 15px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-first {
  opacity: 0; /* Initially hidden */
  animation: fadeIn 1s ease-in-out forwards; /* 2s duration, ease-in-out timing function, forwards to maintain end state */
}

.fade-in-second {
  opacity: 0; /* Initially hidden */
  animation: fadeIn 2s ease-in-out forwards; /* 2s duration, ease-in-out timing function, forwards to maintain end state */
  animation-delay: 1s; /* Delay for the second text to start after the first one */
}

.fade-in-third {
  opacity: 0; /* Initially hidden */
  animation: fadeIn 2s ease-in-out forwards; /* 2s duration, ease-in-out timing function, forwards to maintain end state */
  animation-delay: 3s; /* Delay for the second text to start after the first one */
}

.bpadding {
  padding-bottom: 10vh;
}

.tpadding {
  padding-top: 7vh;
}

small {
  font-size: x-small;
  color: rgba(255, 255, 255, 0.7);
}

.tallrow2 {
  height: 60vh;
}

.image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto; /* Adjusts based on content */
}

.responsive-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: scale(1.5); /* Increase this value to scale the image up */
  transform-origin: center; /* Ensures the scaling happens from the center */
}


.auto-width {
  width: fit-content;
}

.z1 {
  z-index: 1;
}

.cont-img {
  width: 100%;
  max-height: 250px; /* Adjust this value to your desired height */
  object-fit: cover; /* Ensures the image covers the specified height */
}

.navbar-nav .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* Adjust if needed for alignment */
}

.height50 {
  height: 50vh;
}

.width7 {
  width: 70%;
}

.width8 {
  width: 80%;
}