/* Import Mulish font */
@font-face {
    font-family: 'Mulish';
    src: url('fonts/Mulish-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Full-screen background */
body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #C4B1A2;
    overflow: hidden; /* Disable scrolling */
    font-family: 'Mulish', sans-serif; /* Apply the Mulish font */
}

/* Centering container */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 90vh; /* Reserve space for footer */
}

/* SVG Styling */
svg {
    width: 25vw;  /* 30% of the viewport width on larger screens */
    height: auto; /* Maintain aspect ratio */
    max-height: 90vh; /* Prevent the SVG from exceeding viewport height */
    opacity: 0; /* Start invisible */
    animation: fade-in 0.6s ease forwards, stroke-animation 1.5s ease forwards;
    transform-origin: center; /* Ensure scaling happens from the center */
    position: absolute; /* Absolute positioning to support translate centering */
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Text styling after SVG */
/* Text styling after SVG */
.svg-text {
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
    opacity: 0; /* Start hidden */
    animation: fade-in-text 1s ease forwards 0.8s; /* Delay of 0.8s */
}

/* Fade-in animation for text */
@keyframes fade-in-text {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



/* Fade-in animation */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* SVG stroke path animation */
@keyframes stroke-animation {
    from {
        stroke-dasharray: 0, 1000;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dasharray: 1000, 0;
        stroke-dashoffset: 1000;
    }
}

/* Fill fade-in animation */
@keyframes fill-fade-in {
    from {
        fill: transparent;
    }
    to {
        fill: #7B7C58;
    }
}

/* Apply the stroke, fill, and drop shadow animations to all SVG paths and polygons */
svg path, svg polygon {
    stroke-dasharray: 1000; /* Set total length of the path */
    stroke-dashoffset: 1000;
    animation: stroke-animation 1.5s ease forwards, fill-fade-in 0.5s ease 1.5s forwards, drop-shadow 0.5s ease 1.5s forwards; /* Delayed fill and shadow animations */
}


/* Footer styling */
footer {
    width: 100%;
    padding: 5px 0;
    text-align: center;
    background-color: #7B7C58;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    font-size: 0.5rem;
}

footer p {
    margin: 2px 0;
}

footer a {
    color: #C4B1A2;
    text-decoration: underline;
}

footer a:hover {
    color: #FFFFFF;
}



/* Media query for mobile screens */
@media (max-width: 768px) {
    svg {
        width: 270px; /* Fixed width for mobile screens */
        height: auto; /* Maintain aspect ratio */
        max-height: 95vh;
    }
}