html, body {
    overflow-x: hidden;
}

.projects, .about, .outcomes, .footer {
    overflow-y: auto;
    height: auto;    
}



.gradient {
    display: flex;           
    flex-direction: column;  
    justify-content: flex-start; 
    width: 100%;
    height: 100vh;            
}

.gradient svg {
    width: 7.9375rem;
    height: 8.25819rem;
    flex-shrink: 0;
    fill: rgba(217, 217, 217, 0.00);
    stroke-width: 1px;
    stroke: #000;
    position: absolute; 
    top: 15%;          
    left: 20%;          
    transform: translate(-50%, -50%); 
}

.svg2 svg {
    width: 9.9375rem;
    height: 9.25819rem;
    flex-shrink: 0;
    fill: rgba(217, 217, 217, 0.00);
    stroke-width: 1px;
    stroke: #000;
    position: absolute; 
    top: 85%;          
    left: 65%;          
    transform: translate(-50%, -50%); 
}

.svg3 svg {
    width: 5.9375rem;
    height: 5.25819rem;
    flex-shrink: 0;
    fill: rgba(217, 217, 217, 0.00);
    stroke-width: 1px;
    stroke: #000;
    position: absolute; 
    top: 25%;          
    left: 85%;          
    transform: translate(-50%, -50%); 
}

.gradient svg,
.svg2 svg,
.svg3 svg {
  opacity: 0;
  animation: fadeLoop 4s ease-in-out infinite;
}

.gradient svg {
  animation-delay: 0s;
}
.svg2 svg {
  animation-delay: 1s;
}
.svg3 svg {
  animation-delay: 2s;
}

/* Keyframe shows a fade effect of the stars */

@keyframes fadeLoop {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




.background {
    width: 100%;
    height: 100%;              
    flex-shrink: 0;           
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.80) 0%, rgba(237, 190, 238, 0.80) 10%, rgba(204, 144, 205, 0.80) 30%, rgba(20, 140, 153, 0.80) 50%, rgba(255, 255, 255, 0.80) 100%);
    position: relative;  
}


.background h1 {
    position: absolute; 
    top: 15%;          
    left: 50%;          
    transform: translate(-50%, -50%); 
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.background h2 {
    position: absolute; 
    top: 50%;          
    left: 5%;          
    transform: translate(-50%, -50%); 
    transform: rotate(90.163deg);
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.background h3 {
    position: absolute; 
    top: 50%;          
    right: 5%;          
    transform: translate(-50%, -50%); 
    transform: rotate(90.163deg);
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.backgroundimg {
    position: absolute;    
    top: 50%;            
    left: 50%;               
    transform: translate(-50%, -50%); 
}

.backgroundimg img {
    width: 50.8rem;
    height: 27.8rem;
}


.background h4 {
    position: absolute;
    bottom: 1%; 
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-family: Birthstone;
    font-size: 5.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    z-index: 10;
}

.background h5 {
    position: absolute;
    bottom: 8%; 
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-family: Poppins;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    z-index: 10;
}

.menubalk {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
    height: 4.5rem;
    z-index: 10;            
}

.menubalk img {
    width: 6.8rem;
    height: 3.8rem;
    flex-shrink: 0;
    margin-right: auto;
    margin-left: 1rem;
}

.menubalk a {
    position: relative;
    text-decoration: none;
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin-left: -0.8rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 99;
    flex-direction: column;
}

.dropdown:hover .dropdown-content {
    display: flex;
}

.dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-family: Poppins;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}



.about {
    width: 100%;
    height: 50.1875rem;
    flex-shrink: 0;
    border-radius: 0.9375rem;
    background: #000;
    padding: 0; 
    position: relative;
    overflow: hidden; 
}


.about h1, .about h2, .about h3 {
    margin: 0;
    line-height: 1.1;  
    position: absolute; 
}

.about h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 6.5rem;
    font-style: normal;
    font-weight: 700;
    top: 5.5rem; 
    left: 11%; 
    z-index: 1;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
}

.about h2 {
    color: #FFF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    font-family: Birthstone;
    font-size: 10.5rem;
    font-style: normal;
    font-weight: 400;
    top: 7.3rem;  
    left: 20.5%; 
    z-index: 10;
}

.about h3 {
    color: #FFF;
    font-family: Poppins;
    font-size: 5rem;
    font-style: italic;
    font-weight: 700;
    top: 15.5rem;  
    left: 11.5%; 
    z-index: 1;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
}

.smallgradient {
    width: 43.8125rem;
height: 27.4375rem;
flex-shrink: 0;
background: radial-gradient(50% 50% at 50% 50%, #E0BEEE 0%, #E0BEEE 30%, #000 75%, #000 100%);

}

.smallgradient svg {
    fill: rgba(217, 217, 217, 0.00);
    stroke-width: 2px;
    stroke: #FFF;
    width: 7.0625rem;
height: 7.16006rem;
flex-shrink: 0;
position: absolute;
left: 13%;
top: 20%;
}


.about-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    position: relative;
    margin-top: 2rem; 
    padding: 0 3rem;  
  }

  .about-content svg {
    fill: rgba(217, 217, 217, 0.00);
stroke-width: 2px;
stroke: #FFF;
position: absolute;
width: 6.5rem;
height: 7.49744rem;
flex-shrink: 0;
left: 58.5%;
top: 10%;
  }
  

  .about-text {
    max-width: 40rem;
    margin-top: -3rem;
    margin-left: 2rem;
  }
  
  .about-text p {
    color: #FFF;
    text-align: justify;
    font-family: Poppins;
    font-size: 0.8375rem;
    font-style: normal;
    font-weight: 350;
    line-height: 1.5625rem;
    margin-bottom: 1rem;
  }
  
  .about-content img {
    width: 30.6rem;
    height: auto;
    flex-shrink: 0;
    margin-top: -24rem;
    margin-right: 2rem;
  }

  .about-content h1 {
    color: #E0BEEE;
    font-family: Birthstone;
    font-size: 5.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    left: 2rem;
    top: 14rem;
  }

  .butterfly img {
    width: 10rem;
height: 8rem;
transform: rotate(-11.123deg);
flex-shrink: 0;
aspect-ratio: 2245/1587;
position: absolute;
top: 23%;
left: 50%;
z-index: 10;

}

.quote {
    position: relative;
    height: 39.75rem;
    border-radius: 0.9375rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: white;
    font-family: 'Birthstone', cursive;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .quote::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, #ffc0cb, transparent 40%), /* Light pink */
        radial-gradient(circle at 30% 50%, #dda0dd, transparent 40%), /* Lavender */
        radial-gradient(circle at 50% 70%, #b0e0e6, transparent 40%), /* Powder blue */
        radial-gradient(circle at 70% 90%, #d8bfd8, transparent 40%), /* Thistle */
        radial-gradient(circle at 80% 20%, #ffb6c1, transparent 40%), /* Light pinkish */
        radial-gradient(circle at 90% 80%, #add8e6, transparent 40%), /* Light blue */
        radial-gradient(circle at 40% 40%, #ff77ff, transparent 40%), /* Vivid pink */
        radial-gradient(circle at 60% 20%, #9370db, transparent 40%), /* Medium purple */
        radial-gradient(circle at 50% 90%, #7ec8ff, transparent 40%), /* Sky blue */
        radial-gradient(circle at 30% 10%, #ee82ee, transparent 40%); /* Violet */
    background-size: 300% 300%;
    animation: lavaMotion 5s ease-in-out infinite alternate;
    filter: blur(60px);
    opacity: 0.9;
    z-index: 0;
    transform: scale(1);
    will-change: background-position, transform, opacity;
}

/* Keeps the quote text above the effect */
.quote * {
    position: relative;
    z-index: 1;
}

/* Lava bubble-like movement */
@keyframes lavaMotion {
    0% {
        background-position: 0% 0%;
        transform: scale(1);
    }
    25% {
        background-position: 25% 75%;
        transform: scale(1.02);
    }
    50% {
        background-position: 50% 50%;
        transform: scale(1.05);
    }
    75% {
        background-position: 75% 25%;
        transform: scale(1.02);
    }
    100% {
        background-position: 100% 100%;
        transform: scale(1);
    }
}

.quote h1 {
    color: #055E68;
font-family: Birthstone;
font-size: 10rem;
font-style: normal;
font-weight: 400;
line-height: normal;
position: absolute;
top: -8%;
left: 24%;

}

.quote h2 {
    color: #000;
font-family: Poppins;
font-size: 5rem;
font-style: normal;
font-weight: 700;
line-height: normal;
position: absolute;
top: 25%;
left: 26%;
}

.quote h3 {
    color: #055E68;
font-family: Birthstone;
font-size: 10rem;
font-style: normal;
font-weight: 400;
line-height: normal;
position: absolute;
top: 2%;
left: 51%;
}

.quote h4 {
    color: #000;
font-family: Poppins;
font-size: 5rem;
font-style: normal;
font-weight: 700;
line-height: normal;
position: absolute;
left: 37%;
top: 31%;
}

.quote h5 {
    color: #055E68;
    font-family: Birthstone;
    font-size: 10rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    left: 25%;
    top: 15%;
}

.outcomes {
    width: 100%;
    height: 47.1875rem;
    flex-shrink: 0;
    border-radius: 0.9375rem;
    background: #000;
    margin-top: 5px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  
    position: relative;
}

.outcomes h1, .outcomes h2 {
    color: #FFF;
    font-family: Birthstone;
    font-size: 6rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

.outcomes h1 {
    margin-left: 2rem;
}

.outcomes h2 {
    margin-right: 2.5rem;
}

.outcomes::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 7rem; 
    left: 0;
}



.lo1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 2rem 2.5rem 0; 
    position: absolute;
    top: 8rem; 
    left: 0;
}

.lo1 h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 1;
    text-align: left;
}



.lo1 h2 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 15;
    text-align: center;
}

.lo1::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 7rem; 
    left: 0;
}

.lo1 svg {
    width: 2.5625rem;
height: 2.5rem;
flex-shrink: 0;
margin-right: 5rem;
}

.lo2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 2rem 2.5rem 0; 
    position: absolute;
    top: 16rem; 
    left: 0;
}

.lo2 h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 1;
    text-align: left;
}

.lo2 h2 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 15;
    text-align: center;
}

.lo2::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 7rem; 
    left: 0;
}

.lo2 svg {
    width: 2.5625rem;
height: 2.5rem;
flex-shrink: 0;
margin-right: 5rem;
}

.lo3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 2rem 2.5rem 0; 
    position: absolute;
    top: 24rem;
    left: 0;
}

.lo3 h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 1;
    text-align: left;
}

.lo3 h2 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 15;
    text-align: center;
}

.lo3::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 7rem; 
    left: 0;
}

.lo3 svg {
    width: 2.5625rem;
height: 2.5rem;
flex-shrink: 0;
margin-right: 5rem;
}

.lo4 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 2rem 2.5rem 0; 
    position: absolute;
    top: 32rem; 
    left: 0;
}

.lo4 h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 1;
    text-align: left;
}

.lo4 h2 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 15;
    text-align: center;
}

.lo4::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 7rem; 
    left: 0;
}

.lo4 svg {
    width: 2.5625rem;
height: 2.5rem;
flex-shrink: 0;
margin-right: 5rem;
}

.lo5 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 2rem 2.5rem 0; 
    position: absolute;
    top: 40rem;
    left: 0;
}

.lo5 h1 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 1;
    text-align: left;
}

.lo5 h2 {
    color: #FFF;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    flex: 15;
    text-align: center;
}

.lo5 svg {
    width: 2.5625rem;
height: 2.5rem;
flex-shrink: 0;
margin-right: 5rem;
}




.projects {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 

}

.aura {
    background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #E0BEEE 30%, #FFF 75%, #FFF 100%);
    width: 80.4375rem;
height: 35.1875rem;
flex-shrink: 0;
position: absolute;
}


.projects h1 {
    color: #148C99;
    font-family: Birthstone;
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 3rem;
}

.project-container {
    display: flex; 
    gap: 2rem; 
    position: relative;

}

.project-container svg {
    fill: rgba(217, 217, 217, 0.00);
stroke-width: 2px;
top: -7rem;
width: 7.25rem;
height: 9.77625rem;
flex-shrink: 0;
position: absolute;
z-index: 1;

}

.svg-projects svg {
    fill: rgba(217, 217, 217, 0.00);
    stroke-width: 2px;
    top: -15rem;
    width: 7.25rem;
    height: 9.77625rem;
    flex-shrink: 0;
    position: absolute;
    z-index: 1;
    left: 74%;
}



.div1, .div2, .div3, .div4 {
    width: 20.9375rem;
    height: 37.8125rem;
    flex-shrink: 0;
    border-radius: 2.8125rem;
    border: 1px solid #000;
    background: #FFF;
    margin-bottom: 5rem;
    z-index: 10;
    
}

.img {
    border-radius: 2.8125rem 2.8125rem 0rem 0rem;
border: 1px solid #000;
background: #000;
width: 20.9375rem;
height: 18rem;
}

.img {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically */

}

.img img {
    width: 18.4945rem;
height: auto;
flex-shrink: 0;

}


.div1 h1, .div2 h1, .div3 h1, .div4 h1 {
    color: #000;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 1.5rem;
}

.div1 h2, .div2 h2, .div3 h2, .div4 h2 {
    color: #000;
    font-family: Poppins;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 1.5rem;
    width: 18rem;
}

.button {
    width: 9.25rem;
    height: 3.3125rem;
    flex-shrink: 0;
    border-radius: 1.875rem;
    border: 1px solid #000;
    background: linear-gradient(270deg, #148C99, #E0BEEE, #148C99);
    background-size: 600% 600%;
    margin-left: 1.5rem;
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-position 0.5s ease;
}

/* Hover Effects: Animate gradient + scale */
.button:hover {
    animation: gradientShift 6s ease infinite;
    transform: scale(1.05); /* Increase size by 5% */
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}




.button p {
    color: #FFF;
    font-family: Poppins, sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-decoration: none;
}

.footer {
    width: 100%;
    height: 4rem;
    flex-shrink: 0;
    border: 1px solid #000;
    background: linear-gradient(90deg, #2991A2 0%, #D1BAE8 100%);
    color: white;
overflow: hidden;
    display: flex;            
    align-items: center;      
    justify-content: space-between;
    padding: 0 1rem;          
}

.footer img {
    width: 6.8rem;
    height: 3.8rem;
    flex-shrink: 0;
}

.footer p {
    color: black;
    font-family: Birthstone;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 2.5rem;
}