@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

@font-face {
  font-family: 'BrittanySignature';
  src: url('../fonts/BrittanySignature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root{
  --primary-color: #133467  ;
  --secondary-color: #faeab1  ;

}

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

.map-container iframe {
  width: 100%;
  height: 100%;
}
.map-container {
  width: 100%;
  height: 0;
  border-radius: 2px;
  padding-bottom: 56.25%; 
  position: relative;
}
.map-container iframe {
  position: absolute;
  top: 0;
  border-radius: 2px;
  left: 0;
}
.transition-section {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.transition-section-enter-active {
  opacity: 1;
}

*{
 font-family: josefin sans;
}

.britanian{
  font-family: BrittanySignature , sans-serif;
}

h1{
  font-family: BrittanySignature;
}
.h-img{
  height: 10px;
}

.title{
  color: var(--secondary-color);
}

.title1{
  color: var(--primary-color);

}

.gradient-btm {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.975));
}
.gradient-top {
  background: linear-gradient(to top, rgba(0, 0, 0, 0),rgba(255, 255, 255, 0.648), rgba(255, 255, 255, 0.8));
}

.rounded-cs{
  border-radius: 60px;
}
.h-custom{
  height: 1000px;

}
.costum-h{
  height: 1900px;
}
.costum-h-1{
  height:  800px;
}
.no-horizontal-scroll {
  overflow-x: hidden;
  word-wrap: break-word;
}

.y-hidden {
  overflow-y: auto;
  scrollbar-width: none;
}

.y-hidden::-webkit-scrollbar {
  display: none;
}
.z-cuss{
  z-index: 1000;
}
.heights{
  height: 1600px;

}
.max-h-content{
  max-height: 1400px;
}

.gallery-container {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.gallery-item {
  flex: 1 1 calc(33.333% - 10px); 
  box-sizing: border-box;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
  
}
.gallery-item:hover img {
  transform: scale(1.25); 
}



.h-custom-2{
  height: 100vh;

}

.isAktive{
  position: relative;
  bottom: 40rem; ;
}

@media screen and (max-width: 499px){
  .gallery-item {
    flex: 1 1 calc(33.333% - 30px); 
    box-sizing: border-box;
  }
  .h-card{
    height: 430px;
  }
  .h-custom-2{
    height: 180vh;

  }
  
}

@media screen and (min-width: 500px){

  .h-custom{
    height: 900px; 
  }
  .h-card{
    height: 500px;
  }
  
.h-custom-2{
  height: 170vh;

}
.gallery-item {
  flex: 1 1 calc(33.333% - 50px); 
  box-sizing: border-box;
}

.h-cus{
  height: 700px;
}

}




@media screen and (min-width: 1024px){
  
.h-custom-2{
  height: 190vh;

}
.h-custom{
  height: 1000px; 

}
.gallery-item {
  flex: 1 1 calc(33.333% - 50px); 
  box-sizing: border-box;
}
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.rotate-60 {
  transform: rotate(45deg);
}

.animate-slide-up {
  animation: slide-up 0.7s ease-in-out forwards;
}


.bg-loader {
  height: 100vh;
  width: 100vw;
  background-color: #133467;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1000ms;
}

.loader {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader .center {
  width: 40px;
  height: 40px;
  background: #e1b2b4;
  border-radius: 50%;
  animation: center 3.2s ease-in-out infinite;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/%3E%3C/svg%3E');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.loader .item {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;
  background: #e1b2b4;
  border-radius: 50%;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/%3E%3C/svg%3E');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.item-1 {
  animation: anim-1 3.2s ease-in-out infinite 0.2s;
  animation-fill-mode: backwards;
}

@keyframes anim-1 {
  0%, 60%, 100% {
    transform: rotate(45deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(45deg) translateX(0) scale(1.5);
  }
}
.item-2 {
  animation: anim-2 3.2s ease-in-out infinite 0.4s;
  animation-fill-mode: backwards;
}

@keyframes anim-2 {
  0%, 60%, 100% {
    transform: rotate(90deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(90deg) translateX(0) scale(1.5);
  }
}
.item-3 {
  animation: anim-3 3.2s ease-in-out infinite 0.6s;
  animation-fill-mode: backwards;
}

@keyframes anim-3 {
  0%, 60%, 100% {
    transform: rotate(135deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(135deg) translateX(0) scale(1.5);
  }
}
.item-4 {
  animation: anim-4 3.2s ease-in-out infinite 0.8s;
  animation-fill-mode: backwards;
}

@keyframes anim-4 {
  0%, 60%, 100% {
    transform: rotate(180deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(180deg) translateX(0) scale(1.5);
  }
}
.item-5 {
  animation: anim-5 3.2s ease-in-out infinite 1s;
  animation-fill-mode: backwards;
}

@keyframes anim-5 {
  0%, 60%, 100% {
    transform: rotate(225deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(225deg) translateX(0) scale(1.5);
  }
}
.item-6 {
  animation: anim-6 3.2s ease-in-out infinite 1.2s;
  animation-fill-mode: backwards;
}

@keyframes anim-6 {
  0%, 60%, 100% {
    transform: rotate(270deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(270deg) translateX(0) scale(1.5);
  }
}
.item-7 {
  animation: anim-7 3.2s ease-in-out infinite 1.4s;
  animation-fill-mode: backwards;
}

@keyframes anim-7 {
  0%, 60%, 100% {
    transform: rotate(315deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(315deg) translateX(0) scale(1.5);
  }
}
.item-8 {
  animation: anim-8 3.2s ease-in-out infinite 1.6s;
  animation-fill-mode: backwards;
}

@keyframes anim-8 {
  0%, 60%, 100% {
    transform: rotate(360deg) translateX(40px) scale(1);
  }
  10%, 50% {
    transform: rotate(360deg) translateX(0) scale(1.5);
  }
}
@keyframes center {
  0%, 10%, 90%, 100% {
    transform: scale(0.7);
  }
  45%, 55% {
    transform: scale(1);
  }
}