img {
    width: auto;        /* Maintain original width */
    height: auto;       /* Maintain original height */
    max-width: 30%;    /* Ensure image fits within its container */
    max-height: 100px;  /* Optional: Limit image height if necessary */
}

body {
    font-family: 'Exo', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2B287F; /* Initial color */
}


header {
    background-color: #211F60;
    padding: 20px;
    text-align: center;
}

.logo img {
    width: 150px;
    height: auto;
}

main {
    text-align: center;
    padding: 20px;
}


.services {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

h1 {
    margin-top: 60px;
    margin-bottom: 30px;
    color: #2B287F;/* Adjust the value as needed */
}



.service-btn {
    top-margin: 20px;
    font-family: 'Exo', sans-serif;
    background-color: white; /* Default white background */
    color: #CC4843; /* Default text color */
    border: 2px solid white; /* Border to match the color */
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    width: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.service-btn .img {
    width: 50px; /* Small icon size */
    height: 50px; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image fits within the dimensions */
    margin-bottom: 10px; /* Space between image and text */
}

.service-btn span {
    font-size: 1.2em;
    margin: 0; /* Reset margin to ensure alignment */
}

.service-btn:hover {
    background-color: #CC4843; /* Light grey background on hover */
    color: #fff; /* Maintain text color on hover */
    border-color: #a23832; /* Darker border color on hover */
    transform: scale(1.05); /* Slightly increase button size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

.service-btn.active {
    background-color: #CC4843; /* Background color when selected */
    color: white; /* Text color when selected */
    border-color: #CC4843; /* Border color when selected */
}

.service-btn.active:hover {
    background-color: #a23832; /* Darker background color on hover when active */
    color: white; /* Maintain text color */
    border-color: #a23832; /* Maintain border color */
}



.circular-loader {
    width: 40px;
    height: auto;
    max-width: 80%;      /* Matches the original max-width */
    max-height: 100px;   /* Matches the original max-height */
    margin-bottom: 5px;

    /* Ensuring the loader is square */
    aspect-ratio: 1 / 1;

    /* Centering the loader */
    margin: 0 auto;
    margin-bottom: 15px;

    /* Loader design */
    border: 4px solid white; /* Light grey */
    border-top: 4px solid darkblue; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}