body {  
    font-family: 'Arial', sans-serif;  
    background-color: #f8f9fa;  
    margin: 0;  
    padding: 0;  
}  
.navbar {  
    background-color: rgba(44, 56, 219, 0.8); /* Semi-transparent background */
    transition: background-color 0.3s;
}  
.navbar.scrolled {  
    background-color: rgb(0, 21, 43); /* Fully opaque background when scrolled */  
}  
.navbar-brand img {  
    height: 40px;  
}  
.navbar-nav .nav-link {  
    color: #ffffff;  
    transition: color 0.3s;  
}  
.navbar-nav .nav-link:hover {  
    color: #007bff;  
}  
.hero {        
    background-size: cover;  
    background-position: center;  
    color: #ffffff;  
    text-align: center;  
    padding: 150px 0;  
}  
.hero h1 {  
    font-size: 3rem;  
    margin-bottom: 20px;  
}  
.hero p {  
    font-size: 1.2rem;  
    margin-bottom: 40px;  
}  
.hero .btn {  
    font-size: 1.1rem;  
    padding: 10px 20px;  
}  
.section {  
    padding: 60px 0;  
}  
.section h2 {  
    font-size: 2.5rem;  
    margin-bottom: 30px;  
    text-align: center;  
}  
.section p {  
    font-size: 1.1rem;  
    margin-bottom: 20px;  
    text-align: center;  
}  
.about-us {  
    background-color: #e9ecef;  
}  
.card {  
    border-radius: 10px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
    transition: transform 0.3s;  
}  
.card:hover {  
    transform: translateY(-10px);  
}  
.card img {  
    border-top-left-radius: 10px;  
    border-top-right-radius: 10px;  
}  
.card-body {  
    padding: 20px;  
}  
.footer {  
    background-color: rgba(44, 56, 219, 0.8);  
    color: #ffffff;  
    text-align: center;  
    padding: 20px 0;  
}  
.footer p {  
    margin: 0;  
}  
.contact-form {  
    background-color: #ffffff;  
    padding: 40px;  
    border-radius: 10px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}  
.contact-form h2 {  
    margin-bottom: 30px;  
}  
.contact-form .form-group {  
    margin-bottom: 20px;  
}  
.contact-form .form-control {  
    border-radius: 5px;  
}  
.contact-form .btn {  
    font-size: 1.1rem;  
    padding: 10px 20px;  
}  
/* Back to Top Button */  
.back-to-top {  
    position: fixed;  
    bottom: 20px;  
    right: 20px;  
    background-color: #00aeff;  
    color: #ffffff;  
    border: none;  
    border-radius: 50%;  
    width: 50px;  
    height: 50px;  
    display: none; /* Initially hidden */  
    align-items: center;  
    justify-content: center;  
    font-size: 1.2rem;  
    cursor: pointer;  
    transition: background-color 0.3s;  
}  
.back-to-top:hover {  
    background-color: #0056b3;  
}  
/* Map and Form Layout */  
.contact-section {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  
.contact-form, .contact-map {  
    flex: 1;  
    margin: 10px;  
}  
.contact-map iframe {  
    width: 100%;  
    height: 400px;  
    border: 0;  
}  
@media (max-width: 768px) {  
    .contact-form, .contact-map {  
        flex: 100%;  
    }  
}