* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Montserrat;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {

    padding-top: 100px;
    /* Adjust to match the header's height */
    background-color: #f6f6f6;

    height: 100vh;
    /* background: black; */

    /* overflow: hidden; */
}

/* Navbar Styles */
.navbar {
    background: rgba(0, 0, 0, 0.9);
    /* Dark background */
    height: 100px;
    /* Set navbar height */
    z-index: 20;
    display: flex;
    align-items: center;
    transition: height 0.3s ease;
    /* Smooth transition for height */
}

/* Default Styles (For Desktop Screens) */
.navbar-logo {
    margin-left: -150px;
    /* Adjust logo for desktop */
    max-height: 150px;
    /* Maintain consistent logo size */
}


.navbar-nav {
    gap: 30px;
    /* Add spacing between links */
}

.nav-link {
    color: white !important;
    font-size: 1.2rem;
    /* Increase font size */
    transition: color 0.3s ease;
    margin-right: 0;
}

.nav-link:hover {
    color: #00AEEF !important;
    /* Highlight color on hover */
}

/* Mobile Menu Toggle */
.navbar-toggler {
    border: none;
    /* Remove border around toggle button */
    background: transparent;
    /* Transparent background */
}

.navbar-toggler-icon {
    color: white;
    /* Ensure visibility on dark background */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        /* Ensure brand and toggle are on opposite ends */
        align-items: center;
        padding: 10px 20px;
        /* Add padding */
        height: auto;
        /* Allow dynamic height for smaller screens */
    }

    .navbar-brand {
        flex: 1;
        /* Allow the brand to take space */
        display: flex;
        justify-content: flex-start;
        /* Align the logo to the left */
    }

    .navbar-toggler {
        flex: 0;
        /* Prevent stretching */
        margin-left: auto;
        /* Push it to the far right */
        border: none;
        /* Remove the border for a cleaner look */
        background: transparent;
        /* Optional: Make the toggle background transparent */
    }

    .navbar-logo {
        margin-left: 0;
        /* Center-align logo */
        max-height: 180px;
        /* Adjust logo size for smaller screens */
    }

    .nav-link {
        font-size: 1rem;
        /* Reduce font size */
        text-align: center;
        /* Center-align links */
    }

    .navbar-nav {
        flex-direction: column;
        /* Stack links vertically */
        gap: 10px;
        /* Add spacing between stacked links */
    }
}

/* For Extra Small Screens */
@media (max-width: 480px) {
    .navbar {
        padding: 5px 5px;
        /* Add tighter padding */
    }

    .navbar-logo {
        margin-left: 0;
        /* Center the logo for mobile */
        max-height: 130px;
        /* Make logo smaller */
    }

    .navbar-toggler {
        margin-right: 60px;
        /* Ensure toggle stays on the right */
    }

    .nav-link {
        font-size: 0.9rem;
        /* Reduce font size further */
    }
}

/* Media Queries for Small Screens */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
    }



}

.main-text {
    position: relative;
    /* Changed from absolute to relative */
    text-align: center;
    color: #fff;
    z-index: 10;
    padding: 50px 10px;
    /* Added padding for spacing */
    top: 180px;
    /* Removed top positioning */
    left: 0;
    /* Removed left positioning */
    transform: none;
    /* Removed transform */
    margin-bottom: 50px;
}

.main-text h1 {
    font-size: 3.5vw;
    color: #fff;
}

.main-text h1 span {
    color: #307be4;
}

.main-text p {
    font-size: 1.2vw;
    color: #fff;
    padding: 10px;
}

/* Background Container */
.background {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Floating Buzzwords (Blinking Effect) */
.floating-word {
    position: absolute;
    font-size: 1.2vw;
    color: #00AEEF;
    opacity: 0.7;
    animation: blinkWord 3s infinite, colorChange 10s infinite;
    z-index: 5;
    /* Ensure it's above other elements */
    white-space: nowrap;
    /* Prevent words from breaking */
}

@media (max-width:992px) {

    .floating-word {
        font-size: 3.8vw;
        /* Resize for tablets and small screens */
        word-spacing: 2px;
        /* Add spacing for better readability */
        animation-duration: 5s;
        /* Slower animation for clarity */
    }
}

/* Media Queries for Floating Words */
@media (max-width: 768px) {
    .main-text {
        padding-top: 20px;
    }

    .floating-word {
        font-size: 3.5vw;
        /* Resize for tablets and small screens */
        word-spacing: 2px;
        /* Add spacing for better readability */
        animation-duration: 5s;
        /* Slower animation for clarity */
    }
}

/* Media Queries for Floating Words */
@media (max-width: 480px) {


    .floating-word {
        font-size: 4.2vw;
        /* Resize for tablets and small screens */
        word-spacing: 2px;
        /* Add spacing for better readability */
        animation-duration: 8s;
        /* Slower animation for clarity */
    }
}

/* Keyframes for blinking effect */
@keyframes blinkWord {

    0%,
    50% {
        opacity: 0.7;
    }

    25%,
    75% {
        opacity: 0.3;
    }
}

/* Keyframes for color change */
@keyframes colorChange {
    0% {
        color: #00AEEF;
    }

    25% {
        color: blueviolet;
    }

    50% {
        color: rgb(180, 180, 228);
    }

    75% {
        color: skyblue;
    }

    100% {
        color: rgb(84, 121, 192);
    }
}




/* Slider Section */
.skills-slider {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    margin: 30px 80px;
}

.skills-slider h1 {
    padding: 5px;
    margin: 15px;
    font-weight: 900;
    position: relative;
    color: #004484;
    /* Text color */
    font-size: 2rem;
    /* Adjust size as needed */
    display: inline-block;
    /* Ensure it wraps tightly around content */
    z-index: 1;
    /* Ensure text appears above the pseudo-element */
}

.skills-slider h1::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -18px;
    width: 90px;
    height: 70px;
    background-color: #e5f3ff;
    /* Light blue background */
    z-index: -1;
    /* Place it behind the text */
    padding: 10px;
    /* Add padding around the text */
}


.skills-slider p {
    font-size: 1.1rem;
    padding: 5px;
    margin: 15px;
    color: #555
}

.slider-container {
    width: 100%;
    display: flex;
    gap: 2px;
    transition: transform 0.5s ease-in-out;
}

.slide {
    position: relative;
    flex: 0 0 calc(25% - 2px);
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease-in-out;
    /* Smooth scaling effect */
    /* border-radius: 8px; */
    /* Optional: Add some rounded corners */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition: transform 0.4s ease-in-out; */
    /* Smooth zoom effect */
    /* Optional: Add an overlay directly to the image */
}

.slide-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Dark overlay to enhance text visibility */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align items at the bottom */
    align-items: center;
    text-align: center;
    transform: translateY(0);
    transition: transform 0.4s ease-in-out, background 0.3s ease-in-out;
    /* Smooth move-in effect */
}

.slide-overlay h3 {
    line-height: 1.25;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin: 0;
    padding: 10px;
    color: #fff;
    font-weight: 600;
    z-index: 2;
    transform: translateY(15px);
    /* Starts slightly below */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    /* Smooth fade-in and move-up */
}

/* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); */

.slide-overlay p {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    padding: 10px;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

/* .slide:hover img {
    /* transform: scale(1.05); */
/* Slightly zoom in on hover */
/* }  */

.slide:hover .slide-overlay {
    background: rgba(0, 87, 179, 0.704);
    /* Darker background on hover */
    transform: translateY(0);
    /* Move overlay up */
}

.slide:hover .slide-overlay h3,
.slide:hover .slide-overlay p {
    opacity: 1;
    /* Show both title and content on hover */
    transform: translateY(-80px);
    /* Move content into view */
}

/* Progress Bar Styling */
.custom-progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.custom-progress-bar .progress {
    width: 50px;
    height: 5px;
    /* Slightly larger for visibility */
    background-color: #e0e0e0;
    /* Light gray for inactive */
    margin: 0 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-radius: 2px;
    /* Rounded edges for a smoother look */
}

.custom-progress-bar .progress.active {
    background-color: #007BFF;
    /* Blue for active */
}

/* For Medium Screens (Tablets, 768px and below) */
@media (max-width: 768px) {
    .slide {
        flex: 0 0 50%;
        /* Show 2 slides at a time */
        height: 250px;
        /* Adjust height */
    }

    .slide-overlay h3 {
        font-size: 1rem;
        /* Adjust text size */
    }

    .slide-overlay p {
        font-size: 0.9rem;
        /* Adjust text size */
    }

    .slider-container {
        gap: 5px;
        /* Add spacing for slides */
    }
    .skills-slider h1 {
        font-size: 1.9rem;
        /* Reduce heading size */
    }

    .skills-slider p {
        font-size: 1.5rem;
        /* Reduce paragraph size */
    }
}

/* For Small Screens (Mobile Phones, 480px and below) */
@media (max-width: 480px) {
    .slide {
        flex: 0 0 100%;
        /* Show 1 slide at a time */
        height: 280px;
        /* Adjust height */
    }

    .slider-container {
        gap: 10px;
        /* Add spacing for slides */
    }

    .slide-overlay h3 {
        font-size: 1.5rem;
        /* Further reduce text size */
    }

    .slide-overlay p {
        font-size: 1.3rem;
        /* Further reduce text size */
    }

    .skills-slider h1 {
        font-size: 1.5rem;
        /* Reduce heading size */
    }

    .skills-slider p {
        font-size: 1.4rem;
        font-weight: bold;
        /* Reduce paragraph size */
    }
}

.vision-statement {
    margin-top: 5%;
    background-image: url('gradient-dynamic-blue-lines-background_23-2148995756.avif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
    color: #fff;
    /* Ensure it doesn't overlap */
    /* Keeps it above other elements */
}

.vision-statement .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.vision {
    margin-bottom: 20px;
}

.mission ul {
    list-style: none;
    padding: 0;
}

.mission ul li {
    margin: 10px 0;
    font-size: 1.2rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

.vision h3,
.mission h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: uppercase;
}

.vision p,
.mission p {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .main-text h1 {
        font-size: 7vw;
        /* Slightly smaller for desktops */
    }

    .main-text p {
        font-size: 4.5vw;
        /* Scale for desktops */
    }

    .vision-statement {
        margin-top: 50%;
        /* Adjust spacing below */
    }

    .vision h3,
    .mission h3 {
        font-size: 2rem;
    }

    .vision p,
    .mission ul li {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .main-text {
        margin-bottom: 6rem;
        /* More spacing on tablets */
    }

    .main-text h1 {
        font-size: 6vw;
        /* Adjust heading size */
    }

    .main-text p {
        font-size: 3vw;
        /* Adjust paragraph size */
    }

    .vision-statement {
        margin-top: 20%;
        /* Push down for tablets */
        padding: 50px 15px;
        /* Reduce padding slightly */
    }

    .vision h3,
    .mission h3 {
        font-size: 1.8rem;
    }

    .vision p,
    .mission ul li {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .main-text {
        margin-bottom: 8rem;
        /* More space for small screens */
    }

    .main-text h1 {
        font-size: 9.5vw;
        /* Larger for small screens */
    }

    .main-text p {
        font-size: 4vw;
        /* Scale text size */
    }

    .vision-statement {
        margin-top: 20%;
        /* Push down for tablets */
        padding: 50px 15px;
        /* Reduce padding slightly */
    }

    .vision h3,
    .mission h3 {
        font-size: 1.9rem;
    }

    .vision p,
    .mission ul li {
        font-size: 1.3rem;
    }

    body,
    html {
        margin: 0;
        width: 100%;
        /* overflow-x: hidden; */
        /* Disable horizontal scrolling */
    }
}

.footer {
    background-color: black;
    /* Dark background */
    color: #fff;
    /* White text */
    padding: 40px 20px;
    text-align: center;
}

.footer h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #f9f9f9;
}

.footer p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 20px;
}

.contact-info p {
    margin: 10px 0;
    font-size: 1rem;
    color: #f9f9f9;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-links ul li {
    display: inline;
}

.footer-links ul li a {
    text-decoration: none;
    color: #70a3eb;
    /* Highlighted link color */
    font-size: 1rem;
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: #f9f9f9;
}

.social-media {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-media a {
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-media a:hover {
    color: #307be4;
    /* Highlighted social media icon */
}

.footer-bottom {
    margin-top: 20px;
    border-top: 1px solid #333;
    padding-top: 20px;
    color: #777;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer h2 {
        font-size: 1.8rem;
        /* Smaller heading */
    }

    .footer p,
    .contact-info p,
    .footer-links ul li a {
        font-size: 1.1rem;
        /* Slightly smaller text */
    }

    .social-media a {
        font-size: 1.3rem;
        /* Adjust icon size */
    }

    .footer-links ul {
        gap: 15px;
        /* Reduce gap */
    }
}

@media (max-width: 480px) {
    .footer h2 {
        font-size: 1.5rem;
    }

    .footer p,
    .contact-info p,
    .footer-links ul li a {
        font-size: 1rem;
    }

    .social-media a {
        font-size: 1.2rem;
    }

    .footer {
        padding: 20px 10px;
        /* Reduce padding */
    }

    .footer-links ul {
        flex-direction: column;
        /* Stack links vertically */
        gap: 10px;
    }

    /* .social-media {
        flex-direction: column; /* Stack social media icons */
}