body, html {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
overflow-x:hidden;
}
.logo-container {
flex-shrink: 0;
}
.logo {
position: relative;
top: 0;
left: 0;
margin-left: 15px;
margin-right: 20px; /* Space between logo and links */
width: 150px; /* Adjust the size of the logo as needed */
height: auto; /* Maintain aspect ratio */
}
body.travel {
background-image: url('images/beach.jpg');
}
body.flights {
background-image: url('images/travel2.jpg');
}
body.tours {
background-image: url('images/tours.jpg');
}
body.business {
background-image: url('images/UAE.jpg');
}
body.visas {
background-image: url('images/visa.jpg');
}
body.about {
background-image: url('images/Africa2.jpg');
}
body.newsletter {
background-image: url('images/desert.jpg');
}
body.getInTouch {
background-image: url('images/transit.jpg');
}
body.transfers {
background-image: url('images/transfers.jpg');
}
body.company {
background-image: url('images/dubaiWhite.jpg');
}
.services h2, .contact h2 {
text-align: center;
color: white;
position: relative;
}
.background-image {
position: relative;
width: 100%;
height: 100vh; /* Full height of the viewport */
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
}
.contact form {
display: flex;
flex-direction: column;
}
.contact form input, .contact form textarea {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
/*code for button */
.contact form button {
padding: 25px;
border: none;
background-color: grey;
color: black;
border-radius: 5px;
cursor: pointer;
line-height: 50px;
}
.contact form button:hover {
background-color:orange;
}
.image-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: white;
align-items: center;
}
.image-container img {
max-width: 100%;
max-height: 80%;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.image-container img.active {
opacity: 1;
}
.service-item h2 {
margin-top: 10px;
font-size: 1.5em;
color: #333;
}
.service-item p {
margin-top: 10px;
color: #666;
}
.service-item img {
width: 100px;
align-items: center;
}
.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.gallery {
flex-direction: column;
align-items: center;
}
.service-item {
width: 80%;
}
}
.center-section {
width: 80%;
position: relative;
margin: 50px auto;
padding: 20px;
/*border: 1px solid #ccc; removingb border for centre*/
text-align: center;
}
.center-section p{
font-size: 20px;
}
.center-section h2,h3{
text-align: center;
}
button {
border: none;
background-color: #373f47;
color: white;
border-radius: 5px;
cursor: pointer;
line-height: 22px;
}
/*div for the home background images*/
#background-container {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#text-container {
text-align: center;
/* background: rgba(0, 0, 0, 0.5); Optional: To make the text more readable ; this is for the dynamic text */
padding: 20px;
border-radius: 10px;
}
/*testing the responsive links as is */
.navbar {
display: flex;
align-items: center;
background-color: #333;
padding: 10px 20px;
justify-content: space-between;
}
.logo {
color: #fff;
font-size: 24px;
}
/* Reset styles */
ul.menu {
list-style: none; /* Remove bullet points */
padding: 0;
margin: 0;
display: flex; /* Use Flexbox for even spacing */
justify-content: flex-start; /* Align links to the left */
}
li.menu-item {
margin-right: 20px; /* Add space between items */
margin-top: 49px;
}
li.menu-item:last-child {
margin-right: 0; /* Remove right margin from the last item */
}
a.menu-link {
text-decoration: none; /* Remove underline */
color: white; /* Link color */
font-size: 18px;
padding: 10px 15px; /* Add padding for clickable area */
display: block; /* Ensure the link fills the li */
white-space: nowrap; /* Prevent text from wrapping */
}
a.menu-link:hover {
background-color: grey; /* Change background on hover */
color: orange; /* Change text color on hover */
border-radius: 5px;
}
/* Optional: Style dropdown menu */
ul.submenu {
display: none; /* Hide dropdown by default */
position: absolute; /* Position it absolutely */
margin-left: 0; /* Align with parent li */
padding-left: 0;
}
li.menu-item:hover > ul.submenu {
display: block; /* Show dropdown on hover */
}
ul.submenu li {
margin: 0; /* Reset margin */
list-style-type:none;
margin-top: 10px;
margin-left: -20px;
}
ul.submenu li a {
padding: 10px 20px; /* Adjust padding for dropdown items */
white-space: nowrap;
text-decoration: none;
color: white;
}
ul.submenu li a:hover {
background-color: grey;
color: orange;
}
/* Mobile styles */
.menu-toggle {
display: none; /* Hidden on desktop */
}
@media screen and (max-width: 768px) {
.menu-toggle {
display: block;
background-color: #333;
color: white;
padding: 10px 15px;
cursor: pointer;
text-align: center;
margin-left: -5px;
}
ul.menu {
display: none; /* Initially hide the menu */
flex-direction: column;
padding-left: 0;
/* Full width for mobile */
}
ul.menu.open {
display: flex; /* Show menu when opened */
}
ul.submenu li {
margin: 0; /* Reset margin */
background-color: #333;
}
li.menu-item:nth-child(2) {
margin-bottom: 28px;
} /* Travel Services */
li.menu-item:nth-child(3) {
margin-bottom: 55px;
margin-left: -18px;
}/* Adjust this value for more space */
/* Business Services */
/* li.menu-item:nth-last-child(2) Contact */
}
#close-button {
position: absolute;
top: 20px;
right: 20px; /* Original position */
transform: translateX(-10px); /* Move 10px to the left */
}
a.menu-link {
text-transform: uppercase; /* Convert text to uppercase */
}