/* Reset margin and padding */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

/* Welcome section styling */
#welcome {
    background-size: cover;
    height: 100vh;
    width: 100%;
    justify-content: center; /* Vertically center the content */
    align-items: center; /* Horizontally center the content */
    background-color: #1A3636; /* Dark teal background */
    color: #ffffff; /* White text */
    text-align: center;
}

/* Styling for the welcome heading and paragraph */
#welcome h1 {
    font-size: 3rem; /* Adjust as needed */
    margin-bottom: 20px;
}

#welcome p {
    font-size: 1.5rem; /* Adjust as needed */
    margin-bottom: 40px;
}

#scroll-down {
    margin: 0 auto;
    animation: float 3s ease-in-out infinite;
}

#scroll-down:hover {
    background-color: #40534C; /* Darker green on hover */
}

/* Scroll Down Button Styling */
.scroll-arrow {
    background-color: transparent; /* Light teal background */
    border: none;
    border-radius: 50%; /* Make it circular */
    padding: 15px; /* Space around the SVG */
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keyframes for floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Start and end at the same position */
    }
    50% {
        transform: translateY(-10px); /* Move up by 10px */
    }
}

#welcome .welcome-content {
    /* border: 1px solid black; */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}


#welcome span {
    opacity: 0;
    transition: all 0.4s ease;
    transform: translateY(50px);
    /* display: inline-block; */
}

#welcome span.fade {
    opacity: 1;
    transform: translateY(0px);
}

/* DEMO-SPECIFIC STYLES */
.typewriter p {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid black; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 2s steps(30, end),
      blink-caret .5s step-end infinite;
}
  
/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
  
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white }
}