/* Extracted from lines 143-378 of index.php */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
.whatsapp-button {
			position: fixed;
			bottom: 20px;
			left: 20px;
			width: 60px;
			height: 60px;
			background-color: #25D366;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
			cursor: pointer;
			transition: background-color 0.3s ease;
			z-index: 1000;
			animation: pulse 1.5s infinite;
		}

		.whatsapp-button i {
			color: white;
			font-size: 24px;
		}

		.whatsapp-button:hover {
			background-color: #20B759;
		}

#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.hero-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
}


		.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #8B4513;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.back-to-top:hover {
  background-color: #555;
}


		/* Ensure form fields are full width on mobile devices */
		.form-group,
		.form-field {
			width: 100%
		}

		.icon1 {
			display: none;
			position: absolute;
			left: 2px;
			top: 50%;
			transform: translateY(-50%);
			color: #495057
		}

		.form-control {
			padding-left: 40px
		}

		.select-wrap .form-control {
			padding-right: 40px
		}

		@media (max-width:768px) {
		  .form-group {
			  padding: 1rem;
		  }
		}
			body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

}


/* slideshow*/

/* 1. Hero Section Background */
#heroSlideshow {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
    overflow: hidden; /* <--- This will fix your bottom scrollbar!! */
}

/* 2. Only Hero Container Text Layout */
#heroSlideshow .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;

}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}




/* Mobile specific styles */
@media only screen and (max-width: 767px) {
    #heroSlideshow {
        height: 80vh; /* Adjust as needed */
        background-position: center top;
    }

    .slider-text {
        padding-top: 30px;
        text-align: center;
    }

    .slider-text h1 {
        font-size: 1.5rem !important;
    }

    .subheading {
        font-size: 0.9rem !important;
    }
}



/* Container for package sections */
.main-content, body > div {
  display: flex;
  justify-content: center;
  width: 100%;
}



.package-sections {
  display: flex;
  flex-direction: row;
  gap: 40px;
  margin: 60px auto;
  padding: 20px;
  max-width: 1200px;
  width: 90%;
}

.package-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.package-heading {
  font-size: 26px;
  font-weight: 800;
  color: #b88929;
  text-align: center;
}

.package-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.package-link {
  display: inline-block;
  background: #000;
  color: #f8d26b;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s, transform 0.3s;
  min-width: 280px; /* Ensure buttons have a decent width */
}

.package-link:hover {
  background: #b88929;
  color: #fff;
  transform: translateY(-3px);
}

/* Optional Mobile Tweak */
@media (max-width: 768px) {
  .package-link {
    width: 100%;
    min-width: unset;
  }
}

/* Extracted from lines 2787-2803 of index.php */
.float {
			position: fixed;
			width: 60px;
			height: 60px;
			bottom: 40px;
			left: 40px;
			background-color: #25d366;
			color: #FFF;
			border-radius: 50px;
			text-align: center;
			font-size: 30px;
			z-index: 100;
		}

		.my-float {
			margin-top: 14px;
		}