@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Lato:wght@400;700&display=swap');

:root {
    --primary-color: #8E85FF; /* A soft purple */
    --secondary-color: #FFD700; /* Yellow for accents */
    --background-dark: #0d0c1d; /* Deep, dark navy-purple */
    --background-light: #2c2a4a; /* Lighter purple-blue */
    --text-color: #dcdcf2; /* Brighter lavender for visibility */
    --heading-color: #FFFFFF;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-color);
    /* New background inspired by the image */
    background-image: radial-gradient(circle at top right, rgba(76, 59, 137, 0.4), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(44, 42, 74, 0.5), transparent 50%),
                      linear-gradient(to bottom, #0d0c1d, #1a183e);
    overflow-x: hidden;
    position: relative;
}

/* --- Night Sky Background Elements --- */

.sky-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.stars::before, .stars::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        /* A lot of stars! */
        -5vw 15vh 0px 0px white, 10vw 5vh 1px 0px white, 15vw 25vh 0px 0px white, 20vw 80vh 1px 0px white, 25vw 45vh 0px 0px white,
        30vw 10vh 1px 0px white, 35vw 90vh 0px 0px white, 40vw 20vh 1px 0px white, 45vw 60vh 0px 0px white, 50vw 5vh 1px 0px white,
        55vw 75vh 0px 0px white, 60vw 30vh 1px 0px white, 65vw 95vh 0px 0px white, 70vw 15vh 1px 0px white, 75vw 50vh 0px 0px white,
        80vw 85vh 1px 0px white, 85vw 20vh 0px 0px white, 90vw 65vh 1px 0px white, 95vw 10vh 0px 0px white, 98vw 98vh 1px 0px white;
    animation: twinkle 5s infinite alternate;
}

.stars::after {
    width: 1px;
    height: 1px;
    box-shadow: 
        5vw 80vh 0px 0px white, 12vw 40vh 1px 0px white, 18vw 5vh 0px 0px white, 22vw 60vh 1px 0px white, 28vw 30vh 0px 0px white,
        33vw 70vh 1px 0px white, 38vw 15vh 0px 0px white, 42vw 85vh 1px 0px white, 48vw 40vh 0px 0px white, 52vw 95vh 1px 0px white,
        58vw 25vh 0px 0px white, 62vw 60vh 1px 0px white, 68vw 5vh 0px 0px white, 72vw 70vh 1px 0px white, 78vw 35vh 0px 0px white,
        82vw 90vh 1px 0px white, 88vw 50vh 0px 0px white, 92vw 20vh 1px 0px white, 96vw 80vh 0px 0px white, 3vw 3vh 1px 0px white;
    animation-delay: 2.5s;
}

@keyframes twinkle {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.moon {
    position: absolute;
    top: 10vh;
    right: 15vw;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F0E68C;
    box-shadow: 
        0 0 20px #F0E68C,
        0 0 40px #F0E68C,
        0 0 60px rgba(240, 230, 140, 0.5);
}

.moon::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--background-dark);
    transform: rotate(-15deg);
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 150px;
    height: 50px;
    filter: blur(8px);
    animation: drift 80s infinite linear;
}

.cloud.c1 { top: 20vh; left: -200px; animation-duration: 80s; }
.cloud.c2 { top: 40vh; left: -300px; animation-duration: 120s; transform: scale(1.5); }
.cloud.c3 { top: 60vh; left: -150px; animation-duration: 100s; transform: scale(0.8); }

@keyframes drift {
    from { transform: translateX(0); left: -200px; }
    to { transform: translateX(150vw); }
}


/* --- General Styling --- */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    color: var(--heading-color);
}

p, .lead, .card-text, .blockquote-footer {
    color: var(--text-color) !important; /* Make text more visible */
}

.navbar {
    background-color: rgba(13, 12, 29, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand {
    color: var(--heading-color) !important;
    font-weight: bold;
}

.navbar-brand img {
    height: 40px;
}

.nav-link {
    color: var(--text-color) !important;
}

.hero {
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: bold;
    color: white;
}

.btn-primary:hover {
    background-color: #a199ff;
    border-color: #a199ff;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: bold;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--background-dark);
}

section {
    padding: 60px 0;
    position: relative;
}

.bg-light {
   background-color: transparent !important;
}

.card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background-color: rgba(44, 42, 74, 0.4);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.contact-form {
    background: rgba(44, 42, 74, 0.4);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.form-control {
    background-color: rgba(13, 12, 29, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    border-radius: 8px;
}

.form-control::placeholder {
    color: #a199ff;
}

.form-control:focus {
    background-color: rgba(13, 12, 29, 0.7);
    border-color: var(--primary-color);
    color: white;
    box-shadow: none;
}

footer {
    background-color: transparent;
    padding: 40px 0;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer a {
    color: var(--primary-color);
}
