/*
Theme Name: Byout Investment
Author: Ayman
Version: 0.0.1
*/
*{
    padding: 0;
    margin: 0;
}
.shadow-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5); /* White shadow overlay */
    z-index: 1;
    box-shadow: 0 0 20px 12px rgba(255, 255, 255, 0.5); /* White shadow effect */
    pointer-events: none; /* Ensures the shadow doesn't block interactions */
}
.shadow-container > * {
    position: relative;
    z-index: 2; /* Keeps the content above the shadow */
}

.objectFitCover{
    object-fit: cover;
    object-position: center;
}
.vh-50 {
    height: 50vh;
}
.moveDown {
    position: relative;
    transform: translateY(30%);
    z-index: 2;
}
.featureWidth{
    width: 45%;
}
.featureWidth2{
    width: 100%;
}
/* Make sure swiper container has a height */
.swiper {
    width: 100%;
    height: 85vh;  /* Or any specific height */
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute !important;
    bottom: 20px !important; /* Position arrows 20px from the bottom */
    background-color: white !important; /* White background for the box around the arrows */
    padding: 10px !important; /* Add padding to make the arrow button bigger */
    z-index: 10 !important; /* Ensure arrows are above the images */
    display: flex !important;
    width: 50px !important; /* Set the width of the arrows */
    height: 50px !important; /* Set the height of the arrows */
    justify-content: center !important;
    align-items: center !important;
	transform: translateY(250%);
}

/* Right arrow (next) */
.swiper-button-next {
    right: 60px !important;  /* Position the 'next' button 20px from the right */
    border-radius: 10% 0 0 10%;
}

/* Left arrow (prev) */
.swiper-button-prev {
    right: 20px !important; /* Position the 'prev' button 40px to the left of the 'next' button */
    border-left: 1px solid #aaa !important;
    border-radius: 0 10% 10% 0;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px !important; /* Adjust the size of the arrow icon */
    color: black !important; /* Optionally, set the color of the arrow */
}
.galleryHeight{
    height: 500px;
}
.video{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	margin: 0 auto 0 auto;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border: none;
}
.w-48{
  width: 48%;
}
.scroll-animate {
    transform: translateY(50px);
    transition: all 1s ease;
}

.scroll-animate.show .content {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate.show .image {
    opacity: 1;
    transform: translateX(0);
}

.content {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease;
}

.image {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease;
}
.gallery-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between cards */
}

.gallery-card {
    opacity: 0;
    transform: translateY(50px); /* Initial state: Move down */
    transition: all 1.5s ease;
}

.gallery-card.show {
    opacity: 1;
    transform: translateY(0); /* Animate to original position */
}

@media screen and (min-width:767px) {
    .moveDown {
        transform: translateY(110%);
    }
    .featureWidth{
        width: 15%;
    }
	.featureWidth2{
		width: 22%;
	}
	.video{
		position: relative;
		width: 50%;
		padding-top: 24.25%;
		overflow: hidden;
	}
}