/* General Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem; /* Offset for fixed navbar */
}

body {
    padding-top: 60px; /* Space for fixed navbar */
    font-family: 'Arial', sans-serif; /* Consistent font */
    line-height: 1.6; /* Improve readability */
}

#home,
#services,
#about,
#contact {
    scroll-margin-top: 80px; /* Adjust based on your navbar height */
}

p {
    margin-bottom: 1rem; /* Space below paragraphs */
}

img {
    max-width: 100%; /* Responsive images */
    height: auto;
    border-radius: 8px; /* Rounded corners for images */
}

/* Navbar Styles */
.navbar {
    padding: 1rem 2rem; /* Padding for spacing */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
}

.navbar-light .navbar-nav .nav-link {
    color: #333; /* Dark text for contrast */
    font-weight: 500; /* Slightly bold text */
    transition: color 0.3s ease; /* Smooth color transition */
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #154194; /* Primary color on hover */
    text-decoration: none; /* Remove underline on hover */
}

.navbar-brand img {
    max-width: 100%; /* Responsive logo */
    height: auto; /* Maintain aspect ratio */
}

.navbar-toggler {
    border: 1px solid transparent; /* Ensure the border exists */
    background-color: transparent; /* Make sure it's visible */
    padding: 0.25rem 0.75rem; /* Default padding */
    cursor: pointer; /* Make sure it's clickable */
    z-index: 1030; /* Make sure it's on top */
    display: inline-block; /* Ensure it's displayed */
}

.navbar-toggler-icon {
    background-image: url('images/menu.png');
    width: 1.5em; /* Ensure width is set */
    height: 1.5em; /* Ensure height is set */
    display: inline-block; /* Ensure it's displayed */
    background-size: contain; /* Make sure the icon scales correctly */
    background-repeat: no-repeat; /* Prevent repeating */
    background-position: center; /* Center the icon */
}
.navbar-collapse {
    justify-content: flex-end; /* Align nav items to the right */
}

.shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Mobile responsiveness */
@media (max-width: 767.98px) {
    .navbar-nav {
        text-align: center; /* Center nav items on mobile */
    }

    .nav-link {
        padding: 1rem; /* Add padding for touch targets */
    }
}

/* Buttons */
.btn {
    background-color: white;
    color: #154194;
    border-color: #154194;
    border-radius: 0.375rem; /* Rounded corners */
}

.btn:hover {
    background-color: #154194;
    color: white;
    border-color: #154194;
}

/* Icons */
.icon-container {
    background-color: #e9ecef;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
}

.icon-blue {
    color: #154194;
}

.icon-black {
    color: black;
}

/* Scroll Margin */
.section-id {
    scroll-margin-top: 20vh; /* Offset for fixed navbar */
}

/* Header & Titles */
.section-title {
    font-size: 2.5rem;
    color: #333;
    font-weight: 700;
    margin-bottom: 1.5rem; /* Space below title */
}

.section-subtitle {
    font-size: 1.75rem;
    color: #555;
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.125rem;
    font-weight: 300;
    color: #666;
}

/* Home Section */
.home-section {
    color: #343a40; /* Dark text for readability */
    padding: 4rem 0; /* Top and bottom padding */
}

/* Services Section */
.card-img-top {
    width: 100%;
    height: 200px; /* Adjust as needed */
    object-fit: cover;
    object-position: top; /* Prioritize top of the image */
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 1rem;
}

.card-text {
    font-size: 1rem;
    color: #666;
}

/* About Section - Mobile Adjustments */
@media (max-width: 767.98px) {
    .about-section img {
        display: none; /* Hide image on mobile */
    }
}

@media (max-width: 1174px) {
    .mobile_padding {
        margin-top: 2rem; /* Adjust margin on smaller screens */
    }
}

/* Contact Section */
.card {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-body {
    padding: 2rem;
}

.card-title {
    font-size: 1.5rem;
    color: #333;
}

.card-text {
    font-size: 1.125rem;
    color: #666;
}

.card-text a {
    color: #007bff;
    text-decoration: none;
}

.card-text a:hover {
    text-decoration: underline;
}

/* Footer Styles */
.footer {
    color: #333; /* Dark text for contrast */
    padding: 3rem 1.5rem; /* Consistent spacing */
    position: relative; /* For positioning the scroll-to-top button */
    border-top: 1px solid #ddd; /* Subtle border */
}

.footer-link {
    font-size: 1rem; /* Standard font size */
    font-weight: 500; /* Slightly bold text */
    margin-bottom: 1rem; /* Spacing between links */
}

.footer-link a {
    color: #333; /* Dark text color for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

.footer-link a:hover {
    color: #154194; /* Primary color on hover */
}

hr {
    border-color: #ddd; /* Light border color */
}

p.lead {
    font-size: 1.125rem; /* Slightly larger text */
    font-weight: 400; /* Normal weight */
    margin-bottom: 2rem; /* Adequate spacing */
}

.scroll-to-top {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #333;
    text-decoration: none;
}

.scroll-to-top .icon-black {
    color: #333; /* Black color for icon */
}

/* Mobile Adjustments for Footer */
@media (max-width: 767.98px) {
    .footer-link {
        font-size: 0.875rem; /* Slightly smaller font size */
    }
    
    .scroll-to-top {
        bottom: 0.5rem; /* Adjust position */
        right: 0.5rem; /* Adjust position */
    }
}

/* Miscellaneous */
.arrow_class {
    color: #154194; /* Primary color for arrows */
}

/* Ensure proper spacing between Navbar and Showcase */
.mt-5 {
    margin-top: 5rem;
}

/* Custom Mobile Padding */
@media (max-width: 767.98px) {
    .mobile-padding {
        padding: 3rem 1rem; /* Adjust padding for mobile */
    }
}