/* General Styles */
body {
    /* A smoother, darker gradient that's easier on the eyes */
    background-color: #1a171b !important;
    background-attachment: fixed; /* Prevents gradient from scrolling with content */
    color: #e3e6ea; /* A slightly softer white for better readability */
    font-family: "Quicksand", sans-serif !important;
    font-weight: 300;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE and Edge */
    -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Override Bootstrap's default font */
:root {
    --bs-body-font-family: "Quicksand", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: #f8f8f8;
    font-weight: 500; /* A slightly bolder weight for headings */
}

/* Main Content */
main {
    padding: 20px;
    max-width: 1100px;
    margin: auto;
}

/* Service and Team Containers (for homepage) */
.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 30px;
}

/* Video/Slideshow Styles */
.slideshow-container { 
    max-width: 800px;
    margin: 20px auto;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 20px;
}

.mySlides {
    display: none;
}

.text { 
    color: #ffffff;
}

/* Utility Spacer Classes */
.spacer-purple {
    background: #7773a9;
    height: 75px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.spacer-blue {
    background: #8cb4eb;
    height: 75px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Footer Styles */
footer {
    background: rgba(21, 1, 121, 0.291);
    color: #e3e6ea;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

/* Social Media Links in Footer */
.social-links {
    margin: 15px 0; /* Adds vertical spacing around the icons */
}

.social-links a {
    display: inline-block; /* Necessary for transform to work */
    margin: 0 10px;      /* Adds horizontal spacing between icons */
    transition: transform 0.3s ease; /* Smooth transition for the hover effect */
}

.social-links a:hover {
    transform: scale(1.15); /* Makes the icon slightly larger on hover */
}

.social-links img {
    height: 32px; /* Sets a consistent height for the icons */
    width: auto;  /* Maintains the aspect ratio */
}

/* Responsive Design */
@media (max-width: 767px) {
    .service,
    .team-member {
        width: 95%; /* Full width on mobile */
    }

    .next {
        right: 5%; /* Adjust slideshow button position */
    }

    /* Blog specific responsive adjustments */
    .blog-image-container {
        padding-top: 56.25%; /* 16:9 Aspect Ratio for mobile blog images */
    }
}