html, body {
  height: 100%;
  margin: 0;
}

body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("Images/backgroundImage.png") no-repeat center center;
  background-size: cover;
  filter: blur(8px);
  z-index: -1;
  opacity: 0.6;
}


.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  padding: 2rem;
  border-radius: 8px;
}

.transparent-box {
  background: rgba(255, 255, 255, 0.6); /* white @ 70% transparency */
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* soft shadow */
  backdrop-filter: blur(4px); /* optional: gives a frosted-glass effect */
  border-style: groove;
  /*border-color: rgb(0, 62, 153);*/
  border-width: 2px;
}

.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 50px;
}

.card-img-top {
  height: 200px;        /* choose any height you like */
  object-fit: cover;    /* crops edges but keeps image looking good */
  width: 100%;
}

.blue-title {
  color: rgb(0, 62, 153);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  font-weight: bold;
  font-family: "Garamond";
}

/* 1. Define the animation using @keyframes */
@keyframes slide-in {
  from {
    transform: translateX(-100%); /* Start position: off-screen to the left */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* End position: original position */
    opacity: 1;
  }
}

/* 2. Apply the animation to the div */
.slide-in-box {
  animation-name: slide-in;
  animation-duration: 1.5s; /* The animation lasts for 1.5 seconds */
  animation-timing-function: ease-out; /* Controls the speed curve */
  animation-fill-mode: backwards; /* Ensures the start styles (opacity: 0) are applied before the animation begins */
  /* Optional styles for the box */
}


/* NAVBAR GRADIENT */
.custom-nav {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.nav-link {
  color: black !important;
  font-weight: 500;
}

.nav-link:hover {
  color: rgb(0, 62, 153) !important;
  font-weight: bold;
}

footer a:hover {
  color: rgb(0, 62, 153) !important;
  font-weight: bold;
}

 nav-link a:active{ 
	 font-weight: bold; 
	 color: rgb(0, 62, 153) !important; 
 } 

footer {
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.3);
}

.footer-facebook i {
  color: rgb(0, 62, 153);
  font-size: 12pt;
  /*transition: 0.2s ease-in-out;*/
}

.footer-facebook i:hover {
  color: rgb(0, 90, 200); /* optional hover effect */
}


/*FONTS*/
@font-face {
  font-family: 'Klandestin';
  src: url('Fonts/TitleFont/Klandestin.otf') format('opentype'),
       url('Fonts/TitleFont/Klandestin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}