@supports (-webkit-touch-callout: none) {
    h1 {
        position: absolute;
        top: calc(50% + env(safe-area-inset-top)); /* Adjust for iOS safe areas */
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .swiper {
        height: 100%; 
    }
}

body {
	height:100vh !important;
	overflow:hidden;
}

.social-icons {
	position: absolute;
	left:0;
	right:0;
	bottom: 5px;
	z-index:5;
	/* Adjust as needed */
}

.bi {
  font-size: 1.5rem; /* mobile safe */
  color: #F59F27;
  font-weight: 800;
  background-color:lavender;
  border:2px solid black;
  border-radius:50%;
  padding: 0.75rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  text-align: center;
}

.fade-out {
  opacity: 0.5;
  transition: opacity 2s ease; /* adjust speed here */
}


h1 {
	font-family:Montserrat;
    position: absolute;
	margin:0;
	padding: 0.5rem 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.6); /* Reduce opacity for softer white */
    font-size: 1rem; /* Adjust font size as needed */
    z-index: 9999; /* Positioned behind the images */
    pointer-events: none; /* Ensure it does not block interaction with the images */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Softer shadow for better readability */
	opacity:0.5;
}


/* swiper */
.swiper-button-prev,
.swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
}

.swiper {
	position: relative;
	display: block;	
	top: 0;
	bottom: 0;
}


/* Swiper wrapper */
.swiper-wrapper {
    display: flex; /* Ensures the slides are in a row */
}

 .swiper-slide, .swiper-slide img {
	display: flex;	
	object-fit: cover !important;	
    z-index: 1;
}

/* Make Swiper container fill the screen */
.swiper.fullscreen {
    width: 100vw !important;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

/* Make images cover the entire area */
.swiper-slide img.full {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

/* Ensure swiper takes full width on smaller screens */

@media (max-width: 767.98px) {
    .swiper {
        width: 100vw;
        overflow: hidden;
    }

    .swiper-slide {
        width: 100%;
    }

    .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: contain; /* Change this to "contain" if you want to maintain aspect ratio */
    }
}
@media (min-width: 767.99px) {
	h1 {
		font-size:3rem;
	}
}