/* Base styles for all media devices */
body 
{
    background: linear-gradient(rgba(0, 0, 0, 0.6), #09c583), url(images/sele5.png); /* Gradient and image background */
    background-size: cover; /* Ensures the background covers the entire viewport */
    background-attachment: fixed; /* Keeps the background fixed in place when scrolling */
    background-position: center; /* Centers the background */
    background-repeat: no-repeat; /* Prevents the background from repeating */
    height: 100vh; /* Ensure the body covers the full height of the viewport */
    margin: 0; /* Resets default margin */
    padding: 0; /* Resets default padding */
}

.footer-2 
{
    color: rgb(255, 255, 255); /* White text color */
    position: fixed; /* Fixed position relative to the viewport */
    bottom: 0; /* Aligns the element to the bottom of the viewport */
    right: 0; /* Aligns the element to the right of the viewport */
    text-align: right; /* Aligns text to the right */
    font-size: 20px; /* Sets the font size */
    font-weight: bold; /* Makes the text bold */
    font-family: "Tahoma"; /* Sets the font family */
    background: rgb(0, 128, 0); /* Green background color */
    border-radius: 5px; /* Adds rounded corners */
    padding: 3px; /* Adds some padding around the text */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    text-decoration: none; /* Does not underline the text */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.footer-3 {
    color: rgb(255, 255, 255); /* White text color */
    position: fixed; /* Fixed position relative to the viewport */
    top: 0; /* Aligns the element to the top of the viewport */
    right: 0; /* Aligns the element to the right of the viewport */
    text-align: right; /* Aligns text to the right */
    font-size: 20px; /* Sets the font size */
    font-weight: bold; /* Makes the text bold */
    font-family: "Tahoma"; /* Sets the font family */
    background: rgb(0, 128, 0); /* Green background color */
    border-radius: 5px; /* Adds rounded corners */
    padding: 3px; /* Adds some padding around the text */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    text-decoration: none; /* Does not underline the text */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.footer-3 a 
{
    color: inherit; /* Inherit the color from the parent */
    text-decoration: none; /* Remove underline */
}

h4
{
    color: white; /* White text color */
    padding-top: 20px; /* Space above the heading */
    text-decoration-line: overline underline; /* Both overline and underline */
    margin-left: 50px; /* Space to the left */
    font-size: 40px; /* Sets the font size */
    margin-bottom: 5px; /* Space below the heading */
}
p
{
    font-size: 30px; /* Sets the font size */
    color: rgb(255, 255, 255); /* Text color */
    text-shadow: 2px 2px 4px rgb(242, 245, 170); /* Shadow effect on text */
    margin-bottom: 5px; /* Space below each paragraph */
}

.Our-Services 
{
    font-size: 30px; /* Sets the font size */
    margin-bottom: 5px; /* Space below the service list */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* Font family */
    color: rgb(255, 255, 255); /* White text color */
    list-style-type: square; /* Square bullets for list items */
    margin-left: 20px; /* Space to the left */
    cursor: pointer; /* Changes cursor to pointer on hover */
    text-shadow: 2px 2px 5px rgb(11, 4, 4); /* Shadow effect on text */
}

.Our-Services ul 
{
    list-style-type: square; /* Ensures square bullets for unordered lists */
}

.Our-Services li
{
    padding-bottom: 20px; /* Space below each list item */
}

/* Media Queries for all device sizes */

/* For mobile devices */
@media only screen and (max-width: 600px) 
{
    h4 {
        font-size: 28px; /* Smaller font size for headings */
        margin-left: 20px; /* Reduced left margin */
    }
    p {
        font-size: 24px; /* Smaller font size for paragraphs */
    }
    .footer-2, .footer-3 {
        font-size: 16px; /* Smaller font size for footers */
    }
}

/* For tablets */
@media only screen and (min-width: 601px) and (max-width: 900px)
{
    h4 {
        font-size: 32px; /* Slightly smaller font size for headings */
    }
    p {
        font-size: 26px; /* Slightly smaller font size for paragraphs */
    }
}

/* For desktops */
@media only screen and (min-width: 901px) and (max-width: 1200px) 
{
    h4 {
        font-size: 36px; /* Adjust font size for larger screens */
    }
    p {
        font-size: 28px; /* Adjust font size for larger screens */
    }
}

/* For large desktops */
@media only screen and (min-width: 1201px) 
{
    h4 {
        font-size: 40px; /* Keep larger font size for very large screens */
    }
    p {
        font-size: 30px; /* Keep larger font size for very large screens */
    }
}