/* Style the city list */
.city-list {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
}

/* Style for each city item */
.city-item {
    margin: 10px 0; /* Add some space between city items */
}

/* Remove underline, set color to white, and remove blue color when clicked or hovered */
.city-item a {
    color: white; /* Set text color to white */
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Optional: Adjust font size */
}

.city-item a:hover {
    color: white; /* Ensure text color stays white on hover */
    text-decoration: none; /* No underline on hover */
}

.city-item a:focus {
    outline: none; /* Remove focus outline */
    color: white; /* Keep color white when focused */
}

/* Existing styles */

.input-wrapper {
    margin-right: 50%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

	border: 2px solid #ccc;

	padding: 5px;

	margin-bottom: 5px;

}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 50px; /* Adjust size as needed */
	color: white; /* Adjust color as needed */
	cursor: pointer;
	z-index: 2; /* Ensure it's above the video */
}


.fa-map-marker {

	margin-right: 5px;

	color: #666;

}

.form-control {

	border: none;

	outline: none;

}


.searchResult {

	cursor: pointer;

}


/* New styles for the select element and its options */

.select-wrapper {

	position: relative;

}

/* Updated styles for the custom dropdown */

.custom-dropdown {

	position: absolute;

	left: 50%; /* Center align the dropdown horizontally */

	-webkit-transform: translateX(-50%);

	-ms-transform: translateX(-50%);

	transform: translateX(-50%); /* Adjust for center alignment */

	z-index: 1; /* Ensure the dropdown is above other elements */

	width: 100%;

	max-height: 150px; /* Adjust the maximum height as needed */

	overflow-y: auto;

	background-color: #000;

	border: 1px solid #ccc;

	border-radius: 4px;

	-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

	display: none;

}


.custom-dropdown.show {

	display: block;

}

/* Align text to the left */

.custom-dropdown .option {

	padding: 8px;

	cursor: pointer;

	text-align: left; /* Add this property to align the text to the left */

}


.custom-dropdown .option:hover {

	background-color: #ddd;

}


.form-control {

	border: 2px solid #ffff; /* You can adjust the border styles as needed */

}


.form-control:focus {

	outline: none;

	border-color: #ffff; /* Ensure the border color remains unchanged on focus */

}

.video {
	position: relative;

}

.video-logo {
	position: absolute;
	top: 10px; /* Adjust as needed */
	left: 10px; /* Adjust as needed */
	z-index: 10;
}

.videoFooter__text, .videoFooter__button {

}

.more-content-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-text {
    margin: 0 10px; /* Adjust as needed for alignment */
}

.logo-img {
    margin-right: 50%;
  }
  .heading {
      margin-right: 50%;
  }

.circle-button {
    display: inline-block;
    padding: 7px 7px; /* Adjust padding for size */
    background-color: red;
    color: white;
    font-size: 16px; /* Adjust font size as needed */
    font-weight: bold;
    border-radius: 50%; /* This makes the button circular */
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 40px; /* Adjust the position as needed */
    left: 300px; /* Adjust the position as needed */
}

.circle-button:hover {
    background-color: darkred; /* Darker red on hover */
}

/* Hide city list on mobile */
@media (max-width: 768px) {
    .cities {
        display: none;
    }
    .logo-img {
      margin-right: 0;
    }
    .input-wrapper{
         margin-right: 0;
    }
    .heading{
        margin-right:0%;
    }
}

/* Display city list on desktop (default) */
@media (min-width: 769px) {
    .cities {
        display: block;
    }
}