html {
    scroll-behavior: smooth;
}

body {
    font-size: 1.1rem;
    color: #ffffff;
}

.header-bg {
    background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

.header-bg .w-full.flex {
    padding: 0.6rem; /* Adjust this value to control header height */
}

.home-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/home.jpg') no-repeat center center;
    background-size: cover;
}

.about-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/about-us.jpg') no-repeat center center;
    background-size: cover;
}

.contact-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/contact-us.jpg') no-repeat center center;
    background-size: cover;
}

.section-spacing {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover-scale {
    transition: transform 0.2s;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.bg-overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 2rem;
    border-radius: 10px;
}

.header-logo {
    height: 3.3rem;
}

h1, h2, h3 {
    font-size: 1.3em;
    color: #ffffff;
}

p {
    font-size: 1.1em;
    color: #ffffff;
}

.learn-more-btn {
    background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Ensure transform is included */
}

.learn-more-btn:hover {
    opacity: 0.9; /* Slight opacity change on hover for effect */
    transform: translateY(-5px);
}

#mobile-menu {
    background: rgba(0, 0, 0, 0.8); /* Slightly transparent background */
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 70%;
    max-width: 300px;
    transform: translateX(100%); /* Initially off-screen */
    transition: transform 0.3s ease-in-out; /* Smooth slide-in animation */
}

#mobile-menu.show {
    transform: translateX(0); /* Slide in from the right */
}

.hover-scale:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}

button, a {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

button:hover, a:hover {
    transform: translateY(-5px); /* Add a lift effect */
}

/* Ensure body and html do not overflow */
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Prevent large elements from causing overflow */
.header-bg, .home-bg, .about-bg, .contact-bg {
    width: 100%;
    box-sizing: border-box;
}

/* Ensure mobile menu doesn't cause overflow */
#mobile-menu {
    overflow-x: hidden;
    max-width: 100%;
}