/* Background */

body {
    background-color: #231942;
    min-height: 100vh;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
}

/*  Menu Bar */

.header {
    position: fixed;
    top: 0;
    right: 0;
    padding: 20px 600px;
    display: flex;
    justify-content: flex-end;
    width: auto;
    z-index: 100;

}

.menu {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 20px;
}

.header .item1 {
    display: flex;
    width: 120px;
    top: 0;
    left: 800px;
    position: absolute;
    height: 30px;
    align-items: center;
}

.header .portfolio {
    position: absolute;
    top: 0;
    left: 35px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: #ffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: none;
}

.header .portfolio:hover {
    color: #9f86c0; /* Light purple on hover */
    text-shadow: 0 0 8px rgba(159, 134, 192, 0.8), 
                 0 0 16px rgba(159, 134, 192, 0.6),
                 0 0 24px rgba(159, 134, 192, 0.4); /* Layered glowing effect */
}

.header .item2 {
    display: flex;
    align-items: center;
    width: 120px;
    top: 0;
    left: 600px;
    position: absolute;
    height: 30px;
}

.header .about {
    position: absolute;
    top: 0;
    left: 35px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: #ffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: none;

}

.header .about:hover {
    color: #9f86c0; /* Light purple on hover */
    text-shadow: 0 0 8px rgba(159, 134, 192, 0.8), 
                 0 0 16px rgba(159, 134, 192, 0.6),
                 0 0 24px rgba(159, 134, 192, 0.4); /* Layered glowing effect */
}

.header .item3 {
    display: flex;
    align-items: center;
    width: 120px;
    top: 0;
    left: 1000px;
    position: absolute;
    height: 30px;
}

.header .resume {
    position: absolute;
    top: 0;
    left: 35px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    color: #ffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: none;

}

.header .resume:hover {
    color: #9f86c0; /* Light purple on hover */
    text-shadow: 0 0 8px rgba(159, 134, 192, 0.8), 
                 0 0 16px rgba(159, 134, 192, 0.6),
                 0 0 24px rgba(159, 134, 192, 0.4); /* Layered glowing effect */
}

.header .sparkling-fill {
    width: 24px;
    height: 24px;
    top: 3px;
    left: 0;
    position: relative;
}

.header .div {
    width: 97px;
    top: 1px;
    left: 0;
    position: absolute;
    height: 30px;
}

.header .group-2 {
    width: 113px;
    top: 0;
    left: 464px;
    position: absolute;
    height: 30px;
}

.header .img {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 3px;
    left: 0;
}

/* Welcome Message */

.welcome-message {
    height: 100vh; /* Full viewport height */
    background:
        linear-gradient(to bottom, rgba(35, 25, 66, 0) 70%, #231942),
        url('Clouds.jpg') no-repeat center center; /* Cloud image */
    background-size: cover; /* Fill screen */
    display: flex;

}

.welcome-message .welcome-group {
    position: relative;
    width: 507px;
    height: 132px;
    top: 0;
    left: 0;
}

.welcome-message .overlap-group {
    position: relative;
    width: 503px;
    height: 132px;
    margin-top: 90px;
    margin-left: 120px;
}

.welcome-message .hi-there {
    position: relative;
    width: 430px;
    top: 0;
    left: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    color: #9f86c0;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
}

.welcome-message .name {
    position: absolute;
    width: 503px;
    top: 37px;
    left: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    color: #ffff;
    font-size: 64px;
    letter-spacing: 0;
    line-height: normal;
    overflow: hidden; /* Ensures text is hidden during animation */
    border-right: 2px solid white; 
    white-space: nowrap; 
    width: 0; 
    animation: typing 3s steps(12, end) forwards, /* Typing animation */
               blink-cursor 0.75s step-end infinite;
}

/* Typing animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; } /* Expands to show the full name */
}

/* Blinking cursor animation */
@keyframes blink-cursor {
    50% { border-color: transparent; } /* Blinks by making the border invisible */
}

.moon {
    position: absolute;
    width: 97px;
    height: 97px;
    right: 190px;
    top: 22%;
}

.moon .circle {
    width: 97px;
    height: 97px;
    top: 0;
    left: 0;
    background-color: #e1dddd;
    border-radius: 50px;
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.5); /* Glow effect */
}

.subtitle {
    position: relative;
    width: 100%;
    top: 50px; 
    left: 0;
    margin-left: 0px;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    color: #9f86c0;
    font-size: 17px;
    letter-spacing: 1px; 
    line-height: normal;
    text-align: left;
    text-transform: uppercase; 
}

/* Scroll Down Icon */

.scroll-down {
    width: 70px;
    height: 70px;
    position: absolute; 
    bottom: 20px; /* Distance from the bottom of the screen */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.scroll-down .arrows {
    width: 100%;
    height: auto;
    opacity: 0.3; /* Slight transparency for a subtle effect */
}

/* About Me section */

.about-me-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    text-align: center;
}

.about-title {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    color: #ffff;
    font-size: 32px;
    margin-bottom: 60px;
}

.about-image {
    width: 250px;
    height: 250px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 50%;
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: scale(1.4); 
}

.about-description {
    margin-top: 50px;
    align-items: center;
    max-width: 700px;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #E0B1CB;
    text-align: center;
    width: 2000px;
}

/* Contact section */

.contact-section {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1px 10px;
}

.social-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.contact-section .github {
    width: 64px;
    height: 65px;
    cursor: pointer;
    transition: tranform 0.2s;
}

.github:hover {
    transform: scale(1.1);
}

.contact-section .linkedin {
    width: 64px;
    height: 64px;
    cursor: pointer;
    transition: tranform 0.2s;
}

.linkedin:hover {
    transform: scale(1.1);
}

.contact-section .email {
    font-family: "Poppins", serif;
    font-weight: 600;
    color: #5e548e;
    font-size: 17px;
    text-align: center;
    margin-bottom: 3px;
}

.credits .built-by {
    margin-top: 0px;
    margin-bottom: 30px;
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
    color: #5e548e;
    font-size: 15px;
    text-align: center;
}