/* styles.css */

:root {
    --primary-color: #5400b3; /* Purple color for standout elements */
    --text-color: #333;       /* Dark text color */
    --bg-color: #f5f5f5;      /* Light background color */
    --button-color: #ffffff;  /* Button background color */
    --button-hover: #e0e0ff;  /* Button hover color */
}
  
body {
    font-family: 'Comfortaa';
    background-color: var(--bg-color);
    color: var(--text-color);
}
  
.hero-section {
    position: relative;
    z-index: 20;
    color: #fff;
    /* background-image: conic-gradient(from 45deg, #8a2be2, darkblue,#5400b3); */
    /* background: linear-gradient(to bottom, var(--primary-color), #8a2be2); */

    background: linear-gradient(-45deg, rgba(84,0,179,1) 0%, rgba(9,9,121,1) 35%, rgba(138,43,226,1) 100%);
    /* background: linear-gradient(-45deg, rgba(84,0,179,1) 0%, rgba(127,0,255,1) 50%, rgba(138,43,226,1) 100%); */

    text-align: center;
    height: 101vh;
    background-size: 200% 200%;
    animation: gradientAnimation 25s ease-in-out infinite;
}
  
@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    /* 25% {
        background-position: 0% 50%;
    } */
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.container {
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;

}
  
.site-name {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}
  
.slogan {
    font-size: 1.2rem;
    margin-bottom: 20px;
    line-height: 1.5;
}
  
.cta-button {
    background-color: var(--button-color);
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
  
.cta-button:hover {
    background-color: var(--button-hover);
}