@font-face {
    font-family: 'ECSquareSansPro-Light';
    src: url("../fonts/ECSquareSansPro-Light.otf") format('opentype');
}

@font-face {
    font-family: 'ECSquareSansPro-Bold';
    src: url("../fonts/ECSquareSansPro-Bold.otf") format('opentype');
}

@font-face {
    font-family: 'ECSquareSansPro-Medium';
    src: url("../fonts/ECSquareSansPro-Medium.otf") format('opentype');
}

@font-face {
    font-family: 'ECSquareSansPro-Regular';
    src: url("../fonts/ECSquareSansPro-Regular.otf") format('opentype');
}

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

body {
    font-family: 'ECSquareSansPro-Regular', Arial, sans-serif;
    background: linear-gradient(180deg, #70A2A9 0%, #005EBC 54.68%, #384A80 100%);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 🌞 Sun Styling (Moved Very Low) */
.sun {
    position: absolute;
    width: 800px;
    height: 800px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -650px; /* Now very low, just the top part visible */
    background-color: rgba(250, 240, 207, 0.77);
    border-radius: 50%;
    box-shadow: 0 3px 6px #FFFF5D;
    z-index: -1;
}

/* 📰 Main Title (Reduced Size by ~5px) */
.main-title {
    position: absolute;
    left: 50%;
    top: 35vh;
    transform: translate(-50%, -50%);
    font-size: 30px; /* Previously ~35px, now reduced clearly */
}

.main-title .light {
    font-family: 'ECSquareSansPro-Light';
}

.main-title .bold {
    font-family: 'ECSquareSansPro-Bold';
    margin-left: 5px;
}

.main-title .medium {
    font-family: 'ECSquareSansPro-Medium';
    margin-left: 2px;
}

/* 📜 Description (Reduced Size by ~5px) */
.description {
    position: absolute;
    left: 50%;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 40%;
    font-size: 20px; /* Previously ~25px, now clearly smaller */
}

/* 🔗 Clickable "Join the Community" */
.community-link {
    font-family: 'ECSquareSansPro-Bold';
    color: #ffffff;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
}

.community-link:hover {
    color: #FFFF5D;
}

/* 🏷️ Logo Box */
.logo {
    position: absolute;
    width: 5vw;
    height: 5vw;
    left: 90vw;
    top: 85vh;
    border: 2px solid white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🏷️ Logo Text */
.logo-text {
    font-family: 'ECSquareSansPro-Bold';
    font-size: 2vw;
    color: white;
}

.logo-text .bold {
    font-family: 'ECSquareSansPro-Bold';
}

.logo-text .regular {
    font-family: 'ECSquareSansPro-Regular';
}

/* 🔹 Responsive Adjustments */
@media (max-width: 1024px) {
    .main-title {
        font-size: 26px;
        top: 30vh;
    }
    .description {
        font-size: 18px;
        width: 60%;
        top: 45vh;
    }
    .sun {
        width: 50vw;
        height: 45vw;
        bottom: -35vw; /* Adjusted for smaller screens */
    }
    .logo {
        width: 6vw;
        height: 6vw;
        left: 85vw;
    }
    .logo-text {
        font-size: 3vw;
    }
}

@media (max-width: 768px) {
    .main-title {
        font-size: 22px;
        top: 28vh;
    }
    .description {
        font-size: 16px;
        width: 75%;
        top: 40vh;
    }
    .sun {
        width: 55vw;
        height: 50vw;
        bottom: -40vw; /* Further adjusted for tablets */
    }
    .logo {
        width: 7vw;
        height: 7vw;
        left: 80vw;
    }
    .logo-text {
        font-size: 4vw;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 18px;
        top: 26vh;
    }
    .description {
        font-size: 14px;
        width: 80%;
        top: 38vh;
    }
    .sun {
        width: 60vw;
        height: 55vw;
        bottom: -45vw; /* Further adjusted for mobile */
    }
    .logo {
        width: 9vw;
        height: 9vw;
        left: 75vw;
    }
    .logo-text {
        font-size: 5vw;
    }
}