/*body {
  margin: 0;
  padding: 0;
  font-size: 18px; 
  line-height: 1.7; 
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  background: linear-gradient(90deg,#40615a, #2f8f8f52); 
}*/
#container {
    display: flex;
    justify-content: flex-start; /* Align items at the top */
    align-items: flex-start; /* Align items at the top */
    height: 100%;
    padding: 1%;
    gap: 0;
    border: none; /* Ensure the border is removed */
    margin-top: 105px; /* Add this to create a gap from the top */
}

#circleSvg {
    flex: 1; /* Occupy 1/3 of the width */
    display: block;
    margin: 0 auto;
    height: auto; /* Keep the aspect ratio of the circles intact */
}

#text {
    flex: 2; /* Occupy 2/3 of the width */
    margin-top: 20px;
    padding: 20px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(45deg,#02080e, #596f85); /* Dark blue to darker blue gradient */
    background-size: 400% 400%;
    color: #fff;
    animation: gradientAnimation 10s ease infinite, textFlowIn 1s ease-out;
    transition: transform 0.3s ease, color 0.3s ease;
    transform-origin: top; /* Ensure the text expands from the top */
    overflow: visible; /* Allow the text to grow naturally */
    box-sizing: border-box; /* Include padding in the width calculation */
    height: auto; /* Allow height to adjust automatically */
}

svg {
    display: block;
    margin: 0 auto;
}
/* Keyframe animation to slide in */
@keyframes slideIn {
    0% {
        transform: translateX(-100%); /* Start off-screen */
    }
    100% {
        transform: translateX(0); /* End at the original position */
    }
}
/* Style for circle elements */
.circle-button {
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    background: linear-gradient(-45deg,#02080e, #44596e); /* Dark blue to darker blue gradient */
    animation: slideIn 1s ease-out forwards; /* Slide in animation */

}

/* Hover effect for circle (enlarge by the same scale as #text div) */
.circle-button:hover {
    fill: #2f8f8f52; 
    transform: scale(1.1); /* Enlarge the circle by the same factor as the text */
    transform-origin: center; /* Ensure the circle scales about its center */
    transition: transform 0.3s ease, fill 0.3s ease; /* Smooth transition */
}

/* Styling for circle text */
.circle-text {
    text-anchor: middle;
    fill: white;
    pointer-events: none; /* Prevent text from being clickable */
    transition: transform 0.3s ease; /* Optional: add text scaling effect */
    font-size: 14px; /* Adjust font size */
    animation: slideIn 1s ease-out forwards; /* Slide in animation */
}

/* Media query for small screens */
@media (max-width: 768px) {
    #container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align the items */
    }

    #circleSvg {
        order: -1; /* Move the SVG to the top of the stack */
        margin-bottom: 20px; /* Add spacing between the SVG and text */
        width: 100%; /* Optional: Make SVG width responsive */
        max-width: 400px; /* Keep a reasonable maximum size */
    }

    #text {
        margin-top: 0; /* Remove extra margin since it's now below */
        width: 100%; /* Make the text take up full width */
        max-width: 400px; /* Optional: Limit the width for readability */
    }
}