/*//////////
//WEBPAGE//
////////*/

* {
    /* transition: */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    /* background-image: url("/TSA images/light_grey_dots_background.jpg");
  background-size: 30vh; */
    background-position: center;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.85);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* dark base for plasma */
    background-color: black;

}

* {
    box-sizing: inherit;
}

/*//////////
//NAVBAR///
////////*/

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 15px 30px;
    background: linear-gradient(to bottom, rgba(112, 224, 190, 0.8), rgba(112, 224, 190, 0.4));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.navbar a {
    height: 38px;
    padding: 0 18px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: white;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.navbar a:hover {
    background-color: rgba(65, 249, 194, 0.9);
    transform: translateY(-2px);
    color: #005959;
}

/*//////////
//SEARCH///
////////*/

.search-container {
    position: relative;
    width: auto;
    margin-left: 15px;
    width: 110px;
}

.search-container,
.search-container * {
    transition: 0.3s all;
}

.search-container:hover {
    width: 260px;
}

.searchInput {
    width: 100%;
    padding: 8px 10px 8px 35px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, 0.9);
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 18px;
    pointer-events: none;
}

/*///////////
//HEADERs///
/////////*/

.header {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/TSA images/londonbridge.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 0 0 30px 30px;
}

.cRheader {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #014122, #000000);
    background-size: cover;
    background-position: center;
    border-radius: 0 0 30px 30px;
}

.Rheader,
.aheader,
.Cheader {

    width: 100%;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    /* background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/TSA images/resourcesbanner-unsplash.jpg");
  background-size: cover;
  background-position: center; */

    background: linear-gradient(rgb(3, 43, 8, 0.5), rgb(0, 0, 0));

    /* border-radius: 0 0 30px 30px; */
}

.Cheader {
    border-radius: 0px;
}

.aheader {

    width: 100%;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    /* background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/TSA images/resourcesbanner-unsplash.jpg");
  background-size: cover;
  background-position: center; */

    background: linear-gradient(rgba(3, 43, 8, 0.1), rgb(0, 0, 0));

    /* border-radius: 0 0 30px 30px; */
}

.rbkg-head {
    position: relative;
    /* was absolute */
    width: 100%;
    height: 100vh;
    background-image: url("/TSA images/resourcesbanner-unsplash.jpg");
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* keep it behind text if needed */
    border-radius: 0 0 30px 30px;
}

.Rheader {
    position: relative;
    /* so title sits on top */
    z-index: 2;
}

.Rhero {
    position: relative;
    /* stays in flow */
    width: 100%;
    min-height: 100vh;
    /* full-screen hero height */
    background: url("/TSA images/resourcesbanner-unsplash.jpg") center/cover no-repeat,
        linear-gradient(to bottom, rgba(3, 43, 8, 0.5), rgba(0, 0, 0, 0.7));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}

.abkg-head {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-image: url("/TSA images/sebastien-devocelle-Ka2g_ZJxET0-unsplash.jpg");
    background-size: cover;
    background-position: center;
}

.cbkg-head {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: url("/TSA images/contactbanner-unsplash.jpg");
    background-size: cover;
    background-position: center;
}

#title {
    margin: 0;
    padding: 0;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    background: linear-gradient(to right, #70e0be, #f9fff6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 3;
    /* Combined Animation */
    opacity: 0;
    animation: slideInFade 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.cRtitle {
    height: auto;
    margin: 0;
    padding: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2.5rem, 10vw, 5rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    background: linear-gradient(to right, #ffffff, #fdfffd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 3;
    opacity: 0;
    animation: slideInFade 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* .about-header {
  text-align: center;
  padding: 140px 20px 60px;
  background: linear-gradient(120deg, #70e0be, #0acc81);
  color: white;
}

.about-header h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 4rem;
  margin: 0;
}

.about-header p {
  font-size: 1.5rem;
  margin-top: 10px;
} */

#subheading {
    margin-top: 10px;
    color: #0acc81;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    font-weight: 500;
    letter-spacing: 1px;
    z-index: 3;
    opacity: 0;
    animation: fadeIn 1.5s ease-out 0.5s forwards;
}

/*//////////
//INFOS////
////////*/

.Hinfos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.mission,
.purpose,
.offers {
    position: relative;
    /* Essential for the ::after border */
    padding: 30px;
    border-radius: 15px;
    transition: all 0.4s ease;
    overflow: hidden;
    background: linear-gradient(rgba(206, 255, 245, 0.6), rgba(54, 226, 192, 0.8));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex: 1 1 200px;
    text-align: center;
    align-content: center;
}

.mission:hover,
.purpose:hover,
.offers:hover,
.paragraph:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
    background-color: rgba(64, 191, 166, 0.9);
}

.mission::after,
.purpose::after,
.offers::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #41f9c2;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.mission:hover::after,
.purpose:hover::after,
.offers:hover::after {
    transform: scaleX(1);
}

/*//////////
//HEALTH///
////////*/
/* //////////////////////
// SECTION CONTAINERS
////////////////////// */
.resource-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;

    max-width: 1200px;
    margin: 80px auto;
    padding: 40px 20px;

    border-radius: 40px;
    background: linear-gradient(to bottom,
            rgba(112, 224, 190, 0.2),
            rgba(112, 224, 190, 0.2));

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* //////////////////////
// SECTION TITLES
////////////////////// */
.resource-section h2 {
    grid-column: 1 / -1;

    text-align: center;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.91);
}

/* //////////////////////
// CARD BASE STYLES
////////////////////// */
.resource-card {
    /* background-color: rgba(255, 255, 255, 0.21); */
    background: linear-gradient(rgba(206, 255, 245, 0.6), rgba(54, 226, 192, 0.8));
    backdrop-filter: blur(5px);

    border-radius: 30px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    min-height: 280px;
    transition: transform 0.3s ease;
}

.resource-card:hover {
    transform: scale(1.02);
}

/* //////////////////////
// TEXT
////////////////////// */
.resource-card p {
    text-indent: 40px;
}

/* //////////////////////
// 3-CARD LAYOUT RULE
// third card becomes full width
////////////////////// */
.resource-section>div:nth-last-child(1):nth-child(even) {
    grid-column: 1 / -1;
}

/*
Explanation:
1 = h2
2 = card
3 = card
4 = card → spans both columns
*/

/* //////////////////////
// TYPOGRAPHY TITLES ////
////////////////////// */

.resource-title {
    text-align: center;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #005959;
}

/* //////////////////////
// MOBILE////////////////
////////////////////// */

@media (max-width: 700px) {
    .resource-section {
        grid-template-columns: 1fr;
        padding: 25px 15px;
        margin: 40px 15px;
    }

    .resource-section>* {
        grid-column: auto;
    }

    .resource-card {
        position: relative;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.1);
        overflow: hidden;
    }

}

.resource-section>div:not(h2) {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);

    /* transition:
        transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.5s ease,
        background-color 0.5s ease,
        border 0.5s ease; */
    cursor: pointer;
}

.resource-section>div:not(h2):hover {

    transform: translateY(-15px) scale(1.02) rotateX(2deg);
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(112, 224, 190, 0.8);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),

        0 0 25px rgba(112, 224, 190, 0.3);

}

.resource-section>div p {
    opacity: 0.8;
    transform: translateY(10px);

    transition: all 0.4s ease;
}

.resource-section>div:hover p {
    opacity: 1;
    transform: translateY(0);

    color: #004d33;

}

.resource-section>div:hover h3 {
    /* color: #00c97b; */
    transform: scale(1.05);
    transition: 0.3s ease;
}

/*//////////
//TYPOGRAPHY//
////////*/

.resource-title {
    text-align: center;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #005959;
}

.paragraph {
    justify-self: center;
    position: relative;
    width: 100%;
    padding: 30px;
    border-radius: 15px;
    transition: all 0.4s ease;
    overflow: hidden;
    background: linear-gradient(rgba(206, 255, 245, 0.6), rgba(54, 226, 192, 0.8));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.paragraph:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
    background-color: rgba(64, 191, 166, 0.9);
}

.paragraph::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #41f9c2;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.paragraph:hover::after {
    transform: scaleX(1);
}

.paragraph h4 {
    text-align: center;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #005959;
}

/*//////////
//ANIMATIONS//
////////*/

@keyframes slideInFade {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Handle Webkit search cancel button */
.searchInput::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    background-size: contain;
    cursor: pointer;
}

/* --- PLASMA BACKGROUND --- */
.plasma-bg {
    position: fixed;
    /* stays in place while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -10;
    /* behind everything */
    pointer-events: none;
    /* don't block clicks */
}

/* --- BLOBS --- */
.blob {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
    filter: blur(80px);
    opacity: 0.7;
    background: linear-gradient(270deg, #1c1a52, #00ff80, #40b775, #037b2d);
    background-size: 600% 600%;
    animation: blobMove 12s infinite alternate ease-in-out;
}

/* Spread blobs with gaps */
.blob1 {
    top: 10%;
    left: 10%;
    animation-duration: 14s;
}

.blob2 {
    top: 30%;
    left: 70%;
    animation-duration: 18s;
    background: linear-gradient(270deg, #26be3d, #003cff, #ff9900, #5ba133);
}

.blob3 {
    top: 60%;
    left: 25%;
    animation-duration: 20s;
    background: linear-gradient(270deg, #db962dcd, #38df88, #2bcf7a, #3f20da);
}

.blob4 {
    top: 20%;
    left: 50%;
    animation-duration: 16s;
    background: linear-gradient(270deg, #08f1b7, #33ff7e, #99e4a1, #23c772);
}

.blob5 {
    top: 65%;
    left: 80%;
    animation-duration: 22s;
    background: linear-gradient(270deg, #33ffcc, #09d639, #0f7907, #6ce367);
}

/* --- ANIMATION --- */
@keyframes blobMove {
    0% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
        background-position: 0% 50%;
    }

    25% {
        transform: scale(1.05) translate(100px, -60px) rotate(8deg);
        /* more movement */
        border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
        background-position: 50% 100%;
    }

    50% {
        transform: scale(0.95) translate(-80px, 80px) rotate(-8deg);
        border-radius: 50% 50% 60% 40% / 45% 55% 50% 50%;
        background-position: 100% 50%;
    }

    75% {
        transform: scale(1.03) translate(70px, 40px) rotate(5deg);
        border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
        background-position: 50% 0%;
    }

    100% {
        transform: scale(1) translate(0px, 0px) rotate(0deg);
        border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
        background-position: 0% 50%;
    }
}

/* BUTTOOOOOOOOOOOOOOOOOOONNNNNNNNNNN CSSSSSSSSSSSSSSSSSSS */
.button-parent {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: flex-end;

}

.button-right-align {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 5px 20px 20px 0px;
}

.glow-on-hover {
    width: 115px;
    height: 50px;
    border: none;
    outline: none;
    color: #e5f6f2;
    background-color: #79f5c1d0;
    cursor: pointer;
    z-index: 0;
    border-radius: 10px;
    font-weight: 700;

}

.glow-on-hover a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #007b3d, #04af84a6, #10937b, #00ffe1b4, #00ffae, #00ffd0, #00ffa6d2);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
    background-color: black;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(90, 207, 139);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* =====================================
   INDIVIDUAL BOX SCROLL ANIMATION
   ===================================== */

/* Initial hidden state for EACH box */

.resource-section>div {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;
    will-change: opacity, transform;
}

/* When box is revealed */

.resource-section>div.box-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Index scroll fade-in */
.box-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.box-animate.box-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================
   SUBTLE HOVER (UNCHANGED BEHAVIOR)
   ===================================== */

.mtitle>div:hover,
.ptitle>div:hover,
.otitle>div:hover,
.Hinfos>div>div:hover,
.resource-section {
    transform: translateY(-4px);
}

.resource-card {

    flex: 1 1 300px !important;
    max-width: 100% !important;
}

/* TESTIMONAILS WRAP */
.Twrap {
    background-color: rgb(201, 240, 225);
    /* solid white background */
    color: #111;
    /* dark text for readability */
    padding: 60px 20px;
    text-align: center;
}

.Twrap h1 {
    font-family: 'Archivo Black', sans-serif;
    color: #005959;
}

/* fun facts */
.fun-facts-white {
    background-color: rgb(242, 244, 223);
    /* solid white background */
    color: #111;
    /* dark text for readability */
    padding: 60px 20px;
    text-align: center;
}

.fun-facts-white h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5rem;
    color: #005959;
    /* darker green to match your theme */
    margin-bottom: 40px;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.fact-card {
    background: #f9f9f9;
    /* lighter card on white section */
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 150, 128, 0.3);
    /* subtle color glow to match theme */
}

.fact-card h3 {
    margin-bottom: 10px;
    color: #007b3d;
    /* matching accent color */
}

.fact-card p {
    font-size: 0.95rem;
    line-height: 1.4;
}

.Uwrap {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-top: 100vh;
}

/* -----------------------------
   USER CARD

   UUUUUUUUUUUU


   
----------------------------- */
.Uwrap {
    position: relative;
}

.User {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    padding: 28px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #00b894cc, #55efc4cc);
    /* Slight transparency for depth */
    backdrop-filter: blur(12px);
    /* Adds frosted glass effect */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-family: 'Inter', system-ui, sans-serif;
    color: #033d2f;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    margin: 12px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}

/* Hover effect */
.User:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #00d98b, #81ffc1);
}

/* Floating subtle animation */
.User.float-card {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* -----------------------------
   HEADER / NAME
----------------------------- */
.User h3 {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #004d33;
    letter-spacing: 0.5px;
    text-align: center;
}

/* -----------------------------
   BIO TEXT
----------------------------- */
.User p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #02563c;
    text-align: center;
}

/* -----------------------------
   CONTACT LIST
----------------------------- */
.User ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.User li {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(243, 243, 243, 0.845);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, transform 0.3s ease;
}

.User li:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(3px);
}

/* Labels */
.User li strong {
    color: #004d33;
}

/* -----------------------------
   RESPONSIVE
----------------------------- */
@media (max-width: 500px) {
    .User {
        max-width: 95%;
        padding: 20px;
    }
}

.contact {
    margin-top: auto;
}

/* HEADER */
/* .about-header {
  text-align: center;
  padding: 60px 20px 40px 20px;
  background: linear-gradient(135deg, #df1717, #55ef95);
  color: #033d2f;
  position: relative;
  z-index: 2;
}

.about-header h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 10px;
}

.about-header p {
  font-size: 1.1rem;
} */

/* BACKGROUND LAYER */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 255, 153, 0.12), transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(0, 180, 148, 0.12), transparent 50%);
    z-index: 1;
    animation: backgroundMove 30s linear infinite;
}

@keyframes backgroundMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* CARD WRAPPER */
.Uwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
    padding-top: 100vh;
    /* stays */
    position: relative;
    z-index: 2;
}

.Uwrap::after {
    content: "";
    position: absolute;
    top: 90vh;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
}

/* background layer behind cards */
.Uwrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.25), transparent 60%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
    z-index: -1;
}

/* USER CARDS */
.User {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    width: 400px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.User:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.15);
}

/* FLOATING CARD ANIMATION */
.float-card {
    animation: float 7s ease-in-out infinite;
}

.User:nth-child(2) {
    animation-delay: -3.5s;
}

/* CONTACT SECTION STICK TO BOTTOM */
.contact {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.contact h3 {
    margin-bottom: 8px;
}

.contact ul {
    list-style: none;
    padding-left: 0;
}

.contact li {
    margin-bottom: 6px;
    font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .Uwrap {
        flex-direction: column;
        align-items: center;
    }
}

/* ===============================
   ABOUT PAGE COLOR SYSTEM
   =============================== */
:root {
    --bg-black: #80809c;
    --green-main: #00c97b;
    --green-dark: #008a57;
    --green-glow: rgba(0, 201, 123, 0.35);
    --glass-dark: rgba(10, 15, 12, 0.75);
}

/* ===============================
   FIX HEADER (CLEAN + STRONG)
   =============================== */
.about-header {
    background: radial-gradient(circle at top,
            rgba(0, 201, 123, 0.18),
            transparent 60%),
        linear-gradient(to bottom, #050507, #0b0b0f);
    color: white;
    border-bottom: 1px solid rgba(0, 201, 123, 0.25);
}

.about-header h1 {
    background: linear-gradient(90deg, #00e59a, #00a86b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px;
}

.about-header p {
    color: rgba(200, 255, 230, 0.75);
}

/* ===============================
   BACKGROUND MOTION (SUBTLE)
   =============================== */
.background-layer {
    background:
        radial-gradient(circle at 25% 30%, rgba(0, 201, 123, 0.15), transparent 55%),
        radial-gradient(circle at 75% 60%, rgba(0, 140, 90, 0.15), transparent 55%);
    animation: backgroundDrift 40s linear infinite;
}

@keyframes backgroundDrift {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

/* __________________________________________________________________
________________________________________________________________________
                            ABOUT                                       
 ------------------------------------------------------------------------ */

/* /* =======================
   VALUES SECTION
======================= */
/* ============================= */
/*         VALUES SECTION        */
/* ============================= */

.values-section {
    padding: 100px 10%;
    background-color: #f9f9f9;
    text-align: center;
}

.values-section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 60px;
}

/* Grid layout */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: stretch;
}

/* Card Styling */
.value-card,
.events-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Hover animation */
.value-card:hover,
.events-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Card images */
.card-img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    object-fit: cover;
    margin-bottom: 25px;
    align-self: center;
}

/* Headings */
.value-card h3,
.events-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #005959;
}

/* Paragraphs */
.value-card p,
.events-card p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* Special styling for the last events card */
.events-card p {
    opacity: 0.95;
}

/* VALUE CARDS */
/* ================================
   USER CARDS (Fresh Color Theme)
================================= */
.User {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    padding: 28px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #00d9a5cc, #9b5de5cc);
    /* mint → purple */
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', system-ui, sans-serif;
    color: #ffffff;
    /* white text on gradient */
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    margin: 12px;
    position: relative;
    overflow: hidden;
    transition: ease-in-out 0.5s;
}

.User:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    background: linear-gradient(135deg, #61ff76cc, #5de5decc);
    /* coral → purple on hover */
}

/* Floating effect (optional) */
.User.float-card {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Name */
.User h3 {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Bio */
.User p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #e0e0e0;
    text-align: center;
}

/* Contact list */
.User ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.User li {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, transform 0.3s ease;
}

.User li:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(3px);
}

.User li strong {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 500px) {
    .User {
        max-width: 95%;
        padding: 20px;
    }
}

/* people container (optional but recommended) */
.people {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    flex-wrap: wrap;
}

/* individual testimonial card */
.T1 {
    position: relative;
    width: 320px;
    padding: 60px 25px 30px;
    /* top padding makes room for image */
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: ease-in-out 0.2s;
}

.T2 {
    position: relative;
    width: 320px;
    padding: 60px 25px 30px;
    /* top padding makes room for image */
    background-image: linear-gradient(rgba(238, 203, 116, 0.1), rgba(249, 195, 58, 0.1));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(201, 162, 7, 0.893);
    transition: 0.5s cubic-bezier(.78, .8, .27, 1.27);
}

.tes:hover {
    transform: scale(1.02);
}

.T2:hover {
    /* transform: scaleX(1.1) scaleY(.9) ; */
    box-shadow: 0 0 32px 12px rgba(232, 175, 3, 0.4);
}

/* profile image bro look at people bruh its */
.T1 img {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    background: white;
}

.T2 img {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(201, 189, 77, 1);
    background: white;
}

/* name */
.T1 h4,
.T2 h4 {
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* testimonial text */
.T1 p,
.T2 p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.85;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

.wrapper {
    width: 90%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 100px;
    margin-top: 5rem;
    overflow: hidden;

    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0));
}

@keyframes scrollLeft {
    to {
        left: -200px;
    }
}

.item {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(rgb(202, 245, 202), rgb(131, 159, 131));
    border-radius: 6px;
    position: absolute;
    left: max(calc(200px * 8), 100%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    display: flex;
}

.item p {
    text-align: center;
    width: 100%;
    align-self: center;
}

.item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
}

.item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
}

.item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
}

.item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
}

/* .community-leadership{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  height:auto;
  padding:10px;
  margin-top:20px;
}
.card-content{
  justify-self:flex-start;
  width:300px;
}
.community-card1{
  display:flex;
  width:100%;
  align-content:center;
  justify-content: space-between;
  height:auto;
  flex-direction:row;
  background-color:lightgray;
  padding:10px;
}
.community-card2{
  display:flex;
  width:100%;
  align-content:center;
  justify-content: space-between;
  height:auto;
  flex-direction:row-reverse;
}
.community-leadership img {
  justify-content:flex-end;
  width:auto;
  height:300px;
}
 */
/* -----------------------------
   COMMUNITY LEADERSHIP CONTAINER
----------------------------- */
.candidate-section {
    display: flex;
    flex-direction: column;
    background: white;
}

.community-leadership {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
    padding: 20px 10px;
    box-sizing: border-box;
    align-self: center;
    background-color: rgb(254, 252, 252);
}

.community-card1,
.community-card2 {
    display: flex;
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
    transition: ease 0.3s;
}

/*Hover effects*/
.community-card1:hover {
    transform: scale(1.02);
    /* transform: skew(10deg, 0deg); */
}

.community-card2:hover {
    transform: scale(1.02);
    /* transform: skew(-10deg, 0deg); */
}

/* -----------------------------
   IMAGE
----------------------------- */
.community-card1 img,
.community-card2 img {
    width: auto;
    height: 300px;
    border-radius: 10px 60px 10px 60px;
    object-fit: cover;
}

/* where are we going to do a work log */
/* -------------------k what? brutha where and how well not where only how?dudeski----------
   TEXT CONTENT
----------------------------- */
.card-content {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

/* Headings */
.card-content h3 {
    margin: 0 0 6px 0;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.8rem;
    color: #000000;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

/* Role */
.card-content .role {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1rem;
    color: #006644;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    width: 300px;
}

/* Paragraph */
.card-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* -----------------------------
   ALTERNATE CARD DIRECTION
----------------------------- */
.community-card2 {
    flex-direction: row-reverse;
}

/* -----------------------------
   RESPONSIVE
----------------------------- */
@media (max-width: 900px) {

    .community-card1,
    .community-card2 {
        flex-direction: column;
        text-align: center;
    }

    .community-card2 {
        flex-direction: column;
    }

    .community-card1 img,
    .community-card2 img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* I have gone for a bathroom break chat  */

/*//////////
// FOOTER //
//////////*/

.footer {
    width: 100%;
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color: white;
    padding: 40px 20px;
    position: static;
    bottom: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer a {
    color: #70e0be;
    text-decoration: none;
    font-weight: 600;
}

.footer a:hover {
    text-decoration: underline;
}

/*Jan 1 – Jan 3: Brainstormed project ideas, sketched initial concepts nonstop.

Jan 4 – Jan 5: Built first rough prototypes, tested core functionality. spent a lot of time on coolors.co

Jan 6 – Jan 7: Debugged major crashes, implemented quick fixes. Burned out by evening of Jan 7.

Jan 8 – Jan 10: Chilled, reflected on workflow, organized notes. Minimal coding.

Jan 11 – Jan 13: Reworked design system; late-night coding sessions, relentless push to improve UI.

Jan 14 – Jan 15: Paused to test prototypes with friends; minor tweaks made. Felt productive but relaxed.

Jan 16 – Jan 18: Furiously implemented missing features, documentation barely kept up. Brain overloaded.

Jan 19 – Jan 20: Small chill break; played games, listened to music, light planning.

Jan 21 – Jan 23: Late-night sprint to finish animations and interactions. Debugging frenzy.

Jan 24 – Jan 26: Chill phase: reviewed work, fixed minor typos, no major development.

Jan 27 – Jan 29: Intensive coding session, finally solved persistent bugs. Sleep reduced to 4 hours.

Jan 30 – Feb 2: Light work: organizing files, reading tutorials, sketching new ideas.

Feb 3 – Feb 5: Furious push to finalize first full prototype. Coffee and energy drinks in excess.

Feb 6 – Feb 10: Chill break, minor adjustments only, mostly resting.

Feb 11 - major realization and extreme stress to only rebuild the entire website that night.
turn this into a table k?
k!!

BROOOO I GOT TO LEAVE TO SWIMMING CLASS>ye i mma leave too alr bro bye
http://127.0.0.1:5500/CODE/About/ check out about page it kind of looks good show feed back
god dayumm that fireeeee you ccoooked
alr bro bye we willl work JUST GIMME THOSE GUYS PICS OR ELSE I GET U T NOOOO I WILL GET THEM I PROMSIE ALR BYE BYE
when you get home K BYE GOTTA LEAVE final message. BYE...
*/
.worklogt {
    margin: 30px;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(218, 217, 217);
    text-align: center;
    font-size: 2rem;
    font-family: 'Archivo Black', sans-serif;
}

.ptable {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(108, 161, 89, 0.1);
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
    color: black;
    font-size: 1.1rem;
    font-family: sans-serif;
}

.ptable th,
.ptable td {
    padding: 15px 20px;
    text-align: left;
}

.ptable th {
    background-color: #429e65;
    color: #fff;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ptable tr:nth-child(even) {
    background-color: #f2f2f2;
}

.ptable tr:hover {
    background-color: #e0e0e0;
}

/* Energy badges */
.energy {
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    font-size: 0.9rem;
}

.High {
    background-color: #ff4d4f;
}

.Focused {
    background-color: #1890ff;
}

.BurnedOut {
    background-color: #fa8c16;
}

.Calm {
    background-color: #52c41a;
}

.Intense {
    background-color: #722ed1;
}

.Productive {
    background-color: #13c2c2;
}

.Overloaded {
    background-color: #f5222d;
}

.wl {
    background: linear-gradient(135deg, #95F985, #2f3640);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cText {
    width: 100%;
    height: auto;
    display: flex;
    align-content: center;
}

.worktextH {
    display: inline-block;
    background-image: linear-gradient(rgba(254, 218, 202, 0.56), rgba(149, 136, 115, 0.758));
    width: 33%;
    margin: 10px;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px 60px 10px 60px;
    transition: ease 0.5s;
}

.worktextC {
    background-image: linear-gradient(rgba(202, 230, 254, 0.56), rgba(115, 125, 149, 0.758));
    width: 33%;
    margin: 10px;
    margin-top: 20px;
    padding: 20px;
    transition: ease 0.5s;
    border-radius: 60px 60px 10px 10px;
}

.worktextJ {
    background-image: linear-gradient(rgba(254, 248, 202, 0.56), rgba(98, 237, 135, 0.815));
    width: 33%;
    margin: 10px;
    margin-top: 20px;
    padding: 20px;
    transition: ease 0.5s;
    border-radius: 60px 10px 60px 10px;
}

.wheader {
    text-align: center;
    font-size: 1.1rem;
}

.worktextH:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 1rem rgba(196, 242, 227, 0.4);
    Z-index: 1;
}

.worktextC:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 1rem rgba(196, 242, 227, 0.4);
}

.worktextJ:hover {
    transform: translateY(-5px);
    box-shadow: -5px 5px 1rem rgb(196, 242, 227, 0.4);
}

/* visuas */
.cta-primary,
.cta-secondary,
.event-btn,
.login-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 22px;
    text-transform: none;
}

.login-btn:hover {
    background: white;
    color: var(--primary);
}

.form-container {
    background: rgba(181, 239, 176, 0.85);
    width: 80%;
    display: flex;
    justify-content: center;
    padding: 10px;

}

#suggestionForm {
    background-color: rgba(83, 225, 144, 0.85);
    margin: 40px;
    width: 80%;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-self: center;
    flex-direction: column;
}

.cta-primary {
    width: 200px;
    height: auto;
    align-self: flex-end;
    background-color: #004d33;
    border-radius: 10px;
    text-align: center;
    color: white;
    line-height: 1.1;
}