/* -------------------- General Styles -------------------- */

/* Body style: Setting font, background color, and basic reset for margins/paddings */
body {
    font-family: 'Arial', sans-serif; /* Font for the body text */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    background-color: #f5f5f5; /* Light grey background */
}

/* -------------------- Header Section -------------------- */

/* Navigation bar style */
header {
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Beautiful gradient with warm tones */
    color: white; /* White text color */
    padding: 20px 0; /* More padding for better spacing */
    position: fixed; /* Fixed position at the top */
    width: 100%; /* Full width */
    top: 0;
    z-index: 1000; /* Ensure it stays on top of other elements */
}

/* Logo inside the header */
nav .logo a img {
    height: 50px; /* Set logo height */
    margin-left: 20px; /* Margin on the left */
}

/* Navigation menu style */
nav .nav-links {
    list-style: none; /* Remove default list styling */
    padding: 0;
    text-align: right; /* Align the navigation to the right */
}

/* Navigation items */
nav .nav-links li {
    display: inline-block; /* Arrange navigation items horizontally */
    margin: 0 15px; /* Add space between each item */
}

/* Style for navigation links */
nav .nav-links a {
    color: white; /* White text for links */
    text-decoration: none; /* Remove underline from links */
    font-size: 18px; /* Set font size */
}

/* Hover effect for navigation links */
nav .nav-links a:hover {
    color: #ff7e5f; /* Change link color on hover */
}

/* -------------------- Slider Section -------------------- */

/* Slider container that holds the slides */
.slider {
    position: relative; /* Positioning context for slides */
    width: 100%; /* Make the slider full-width */
    height: 500px; /* Set a height for the slider */
    overflow: hidden; /* Hide content that overflows */
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Gradient background for the slider */
}

/* Slider container for all slides */
.slider-container {
    display: flex; /* Arrange slides horizontally */
    width: 300%; /* Set total width based on number of slides */
    transition: transform 0.5s ease; /* Smooth sliding effect */
}

/* Individual slide style */
.slide {
    width: 100%; /* Each slide takes up 100% width */
    height: 100%; /* Full height of the slider */
    opacity: 0; /* Initially, slides are invisible */
    transition: opacity 1s ease-in-out; /* Smooth transition for opacity */
}

/* Slide images will be responsive */
.slide img {
    width: 100%; /* Make images responsive */
    height: 100%; /* Cover the full slide area */
}

/* -------------------- eMilestone Section -------------------- */

/* eMilestone section styling */
.eMilestone {
    text-align: center; /* Center align the content */
    margin-top: 100px; /* Add space below the slider */
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Soft gradient background */
    padding: 30px 0; /* Padding for spacing */
}

.eMilestone h2 {
    font-size: 36px; /* Large font size for the heading */
    color: white; /* White text color for the heading */
    margin-bottom: 20px; /* Add space below the heading */
}

/* Rotating words effect style */
.rotating-words {
    display: inline-block;
    font-size: 24px;
    color: white; /* White color for rotating words */
}

.rotating {
    display: none; /* Initially hide all rotating words */
    animation: rotateWords 10s infinite; /* Apply the rotation animation */
}

/* Keyframes for rotating words */
@keyframes rotateWords {
    0%, 20% {
        display: block;
        opacity: 1; /* Fade in the first word */
    }
    25%, 45% {
        display: none;
        opacity: 0; /* Hide the first word */
    }
    50%, 70% {
        display: block;
        opacity: 1; /* Fade in the next word */
    }
    75%, 95% {
        display: none;
        opacity: 0; /* Hide the second word */
    }
}

/* -------------------- Slider Arrows and Dots -------------------- */

/* Arrows for navigation */
.prev-arrow, .next-arrow {
    font-size: 40px; /* Increase arrow size */
    color: white; /* White color for arrows */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Center the arrows vertically */
    z-index: 1; /* Ensure arrows appear above slides */
    cursor: pointer;
}

.prev-arrow {
    left: 10px; /* Position the left arrow */
}

.next-arrow {
    right: 10px; /* Position the right arrow */
}

/* Dots for navigation */
.dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%); /* Center the dots horizontally */
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between dots */
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Circular dots */
    background-color: rgba(255, 255, 255, 0.7); /* Light grey color for the dots */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Active dot style */
.dot.active {
    background-color: #ff7e5f; /* Highlight active dot with the same color as hover */
}

/* Hover effect for dots */
.dot:hover {
    background-color: #feb47b; /* Change dot color on hover */
}

/* -------------------- Responsive Design -------------------- */

/* Adjust layout for screens smaller than 768px */
@media (max-width: 768px) {
    header {
        padding: 20px; /* Add more padding for small screens */
    }

    /* Adjust slider height for mobile screens */
    .slider {
        height: 300px;
    }

    /* Adjust font size for smaller screens */
    .eMilestone h2 {
        font-size: 28px;
    }

    /* Make navigation arrows smaller on mobile */
    .prev-arrow, .next-arrow {
        font-size: 30px; /* Smaller arrows */
    }

    /* Dots style for smaller screens */
    .dots {
        gap: 5px;
    }
}

/* Larger screen adjustments (tablet and desktop) */
@media (min-width: 768px) {
    /* For medium and large screens, ensure elements look proportionate */
    .slider {
        height: 500px; /* Full height for desktop */
    }

    .eMilestone h2 {
        font-size: 36px; /* Larger font size for heading */
    }
}

/* -------------------- Mobile Optimization -------------------- */

/* Additional mobile optimizations for screens 480px and below */
@media (max-width: 480px) {
    /* Header padding adjustment for ultra-small screens */
    header {
        padding: 10px 0;
    }

    /* Adjust slider images and container to fit small screens */
    .slider-container {
        flex-direction: column; /* Stack images vertically */
    }

    /* Adjust font size of rotating words for smaller screens */
    .rotating-words {
        font-size: 18px;
    }
}