.section {
    position: relative;
	height: auto;
    min-height: 100vh; /* Changed from height to min-height */
    padding-top: 80px; /* Add padding to prevent overlap with the navbar */
	padding-bottom: 200px;

}

.card{
	background: rgba( 255, 255, 255, 0.1 );

backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

}

.input {
	display: flex;
	align-items: center; /* Vertically center the icon and input */
  }
  
  .input i {
	color: #FF007F;
	margin-bottom: 0; /* Remove the excessive margin */
	margin-right: 1rem; /* Consistent spacing between icon and input */
  }

.section .section-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add padding for better alignment */
}
#booking {
	font-family: 'PT Sans', sans-serif;
	background-image: url('../img/background.jpg');
	background-size: cover;
	background-position: center;
}

.quotation-form {
	background: rgba(0, 0, 0, 0.7);
	padding: 40px;
	border-radius: 6px;
    height: auto;
	
}

.quotation-form .form-group {
	position: relative;
	margin-bottom: 20px;
}

.quotation-form .form-control {
	background-color: #fff;
	height: 50px;
	color: #191a1e;
	border: none;
	font-size: 16px;
	font-weight: 400;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-radius: 40px;
	padding: 0px 25px;
}

h3{
	color: white;
}
.quotation-form .form-control::-webkit-input-placeholder {
	color: rgba(82, 82, 84, 0.4);
}

.quotation-form .form-control:-ms-input-placeholder {
	color: rgba(82, 82, 84, 0.4);
}

.quotation-form .form-control::placeholder {
	color: rgba(82, 82, 84, 0.4);
}

.quotation-form input[type="date"].form-control:invalid {
	color: rgba(82, 82, 84, 0.4);
}

.quotation-form select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.quotation-form select.form-control+.select-arrow {
	position: absolute;
	right: 10px;
	bottom: 6px;
	width: 32px;
	line-height: 32px;
	height: 32px;
	text-align: center;
	pointer-events: none;
	color: rgba(0, 0, 0, 0.3);
	font-size: 14px;
}

.quotation-form select.form-control+.select-arrow:after {
	content: '\279C';
	display: block;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.quotation-form .form-label {
	display: block;
	margin-left: 20px;
	margin-bottom: 5px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 24px;
	height: 24px;
	font-size: 12px;
	color: #fff;
}

.quotation-form .form-checkbox input {
	position: absolute !important;
	margin-left: -9999px !important;
	visibility: hidden !important;
}

.quotation-form .form-checkbox label {
	position: relative;
	padding-top: 4px;
	padding-left: 30px;
	font-weight: 400;
	color: #fff;
}

.quotation-form .form-checkbox label+label {
	margin-left: 15px;
}

.quotation-form .form-checkbox input+span {
	position: absolute;
	left: 2px;
	top: 4px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
}

.quotation-form .form-checkbox input+span:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	background-color: #FF007F;
	-webkit-transition: 0.2s all;
	transition: 0.2s all;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.quotation-form .form-checkbox input:not(:checked)+span:after {
	opacity: 0;
}

.quotation-form .form-checkbox input:checked+span:after {
	opacity: 1;
	width: 10px;
	height: 10px;
}

.quotation-form .form-btn {
	margin-top: 27px;
}

.quotation-form .submit-btn {
	color: #fff;
	background-color: #FF007F;
	font-weight: 400;
	height: 50px;
	font-size: 14px;
	border: none;
	width: 100%;
	border-radius: 40px;
	text-transform: uppercase;
	-webkit-transition: 0.2s all;
	transition: 0.2s all;
}

.quotation-form .submit-btn:hover,
.quotation-form .submit-btn:focus {
	opacity: 0.9;
}

.quotation-form textarea.form-control {
    border-radius: 0 !important; /* Forcefully remove border radius */
    height: 120px; /* Adjust height if needed */
}


.form-group input[type="date"] {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px; /* Adjust as needed */
}

.input-group .form-control,
.input-group .form-select {
    border-radius: 5px; /* Adjust as needed */
}

.input-group .form-select {
    border-right: none; /* Remove extra border between dropdown and input */
}

.input-group .form-control {
    border-left: none; /* Seamless integration with dropdown */
    width: 100px;
}


/* Attachments input */
.attachment-input {
    border-radius: 10px !important; /* Keeps the rounded border */
    background-color: transparent; /* Removes the white background */
    color: #000000; /* Ensures text is visible on a dark background */
    border: 1px solid #fff; /* Adds a subtle white border */
    display: flex;
    padding: 10px !important;
    justify-content: center;
}

.attachment-input::-webkit-file-upload-button {
    background-color: transparent; /* Removes white background on the file upload button */
    color: #000000; /* Ensures the button text is visible */
    border: 1px solid #000000; /* Adds a white border to the button */
    border-radius: 10px; /* Matches the input's border radius */
    padding: 5px 10px; /* Adds padding for better appearance */
    margin-left:0.5rem;
}

.attachment-input::-ms-browse {
    background-color: transparent; /* Removes white background on the file upload button */
    color: #fff; /* Ensures the button text is visible */
    border: 1px solid #fff; /* Adds a white border to the button */
    border-radius: 10px !important; /* Matches the input's border radius */
    padding: 5px 10px; /* Adds padding for better appearance */
}

/* Preferred Communication Method select */
.communication-select {
    width: 300px;
    border-radius: 10px !important; /* Keeps the rounded border */
    background-color: transparent; /* Removes the white background */
    color: #fff; /* Ensures text is visible on a dark background */
    border: 1px solid #fff; /* Adds a subtle white border */
}


.form-select.bg-transparent.text-white option {
    color: black;
}


input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
	filter: drop-shadow(0 0 0.10rem #FF007F);
    border: 1px solid #ffffff !important; /* Change this color as needed */
}

.input i{
	color:#FF007F;
	margin-bottom: 2rem;
}

.form-control .bg-transparent .text-white option{
color: #191a1e;
}

select {
	background-color: transparent !important; /* Removes the dropdown background */
	color: white; /* Keeps text visible */
	border: 1px solid white; /* Optional: Adds a border */
  }
  
  select option {
	background-color: black; /* Adjust to match your design */
	color: white; /* Ensures readability */
  }

.form-label{
	color: white;
}

h1{
	color: white;
}

.form-button {
	color: #ffffff;
	padding: 0.7em 1.7em;
	font-size: 15px;
	font-weight: 400;
	border-radius: 0.5em;
	background: #FF007F;
	cursor: pointer;
	border: 1px solid #FF007F;
	transition: all 0.3s;
	box-shadow: 1px 1px 6px #ff7abc, -1px -1px 6px #FF007F;
	margin-top: 2rem;
  }
  
  .form-button:hover {
	border: 1px solid white;
  }
  
  .form-button:active {
	box-shadow: 2px 2px 6px #FF007F, -2px -2px 6px #FF007F;
  }
  


  .feature-list {
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.feature-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.feature-title {
    font-weight: bold;
    margin-bottom: 5px;
}

p {
    color: #ccc;
    font-size: 16px;
}
/* Create a custom checkbox */
.checkmark {
	position: relative;
	top: 0;
	left: 0;
	height: 1.3em;
	width: 1.3em;
	background: black;
	border-radius: 50px;
	transition: all 0.7s;
	--spread: 20px;
   }
   
   /* When the checkbox is checked, add a blue background */
   .container input:checked ~ .checkmark {
	background: black;
	box-shadow: -10px -10px var(--spread) 0px #5B51D8, 0 -10px var(--spread) 0px #833AB4, 10px -10px var(--spread) 0px #E1306C, 10px 0 var(--spread) 0px #FD1D1D, 10px 10px var(--spread) 0px #F77737, 0 10px var(--spread) 0px #FCAF45, -10px 10px var(--spread) 0px #FFDC80;
   }
   
   /* Create the checkmark/indicator (hidden when not checked) */
   .checkmark:after {
	content: "";
	position: absolute;
	display: none;
   }
   
   /* Show the checkmark when checked */
   .container input:checked ~ .checkmark:after {
	display: block;
   }
   
   /* Style the checkmark/indicator */
   .container .checkmark:after {
	left: 0.45em;
	top: 0.25em;
	width: 0.25em;
	height: 0.5em;
	border: solid #f0f0f0;
	border-width: 0 0.15em 0.15em 0;
	transform: rotate(45deg);
   }

@media screen and (max-width: 768px) {
	.card{
		background:none;
		backdrop-filter: blur( 0 );
-webkit-backdrop-filter: blur( 0 );
border-radius: 0;
border: none;
	}
	.section{
		padding-top: 5px;
	}
	/* Hide the right-side description on mobile */
	.col-md-10.col-lg-6.col-xl-7.order-1.order-lg-2 {
	  display: none !important;
	}

	.container.h-100 {
		padding-bottom: 200px !important; /* Adds space above the footer */
	  }

	  form {
		margin-bottom: 100px !important; /* Push form up */
	  }
  
	/* Ensure form container takes full width */
	.col-md-10.col-lg-6.col-xl-5 {
	  width: 100% !important;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
  
	/* Ensure form inputs are full-width */
	.input,
	.form-control {
	  width: 100% !important;
	}
  
	/* Reduce form input size for better mobile view */
	.form-label,
	.form-control,
	.form-button {
	  font-size: 14px !important;
	}
  
	/* Reduce .form-button size */
	.form-button {
	  padding: 0 1.5em !important;
	}

	footer {
		position: relative;
		bottom: 0;
		width: 100%;
		padding: 20px 0;

		height: 20vh;
	  }
  }