/* Reset and general styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Full height and width for HTML and body */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff8e7; /* Soft yellow background */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Main container styling */
.main {
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Logo container */
#logo {
    z-index: 999;
    height: 30%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo image styling with animation */
#logo img {
    height: 100%;
    width: 80%;
    object-fit: contain;
    animation: scaleUpDown 5s infinite;
}

/* Content container styling */
#content {
    width: 80%;
    z-index: 999;
    text-align: center;
    margin-top: 80px;
}

/* Content header styling */
#content h2 {
    color: #000; /* Dark orange for heading */
    font-size: 3.5vw;
}

/* Keyframes for scaling animation */
@keyframes scaleUpDown {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Keyframes for rotating animation */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Gradient effect styling */
.gradient {
    --size: 250px; /* Adjust size */
    --speed: 8s; /* Increased speed */
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

    z-index: -0;
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 6)); 
    background-image: linear-gradient(hsl(42, 100%, 65%), hsl(28, 100%, 60%)); /* Yellow to orange gradient */
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 0%;
    position: absolute;
}

/* Media query for larger screens */
@media (min-width: 720px) {
    .gradient {
        size: 400px; /* Increased size for larger screens */
    }
}

/* Transition for smooth changes */
* {
    transition: all 0.25s ease-out;
}

/* Example CSS for button */
#cta-button {
    display: inline-block;
    padding: 10px 20px;
    z-index: 0;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background-color: #ffb300; /* Golden button color */
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

#cta-button:hover {
    background-color: #ff8c00; /* Darker orange hover effect */
}

/* Text block styling */
h4 {
    z-index: 999;
    font-size: 18px; /* Adjust the font size as needed */
    color: #333; /* Darker text color */
    border: 2px solid #ffb300; /* Golden border */
    padding: 10px; /* Add some padding for better appearance */
    border-radius: 5px; /* Optional: round the corners of the border */
    text-align: center; /* Center align the text */
    margin: 20px 0; /* Add margin to space it out from other elements */
}
/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    margin: 10% auto;
    display: block;
    width: 80%;
    max-width: 700px;
    animation: fadeInZoom 0.5s ease; /* Animation applied when modal appears */
}

/* Close button styling */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #f1c40f;
    text-decoration: none;
    cursor: pointer;
}

/* Popup animation */
@keyframes fadeInZoom {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Close animation */
@keyframes fadeOutZoom {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.7);
    }
}

/* Modal fade out transition when closing */
.modal.fade-out .modal-content {
    animation: fadeOutZoom 0.5s ease;
}