/* body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: white;
    color: #1b1b1b;
} */

/* General Layout */
section {
    padding: 80px 7%;
}

h1, h2, h3 {
    font-weight: 700;
    color: #1b1b1b;
}

.subtitle, p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
}

/* ---------------- ABOUT US ---------------- */
.about-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}
.about-left {
    flex: 1;
    margin-top: 0px;
    width: 75%;
}
.about-right {
    flex: 1;
    width: 25%;
}

.about-section img {
    width: 100%;
    border-radius: 18px;
}

/* ---------------- MISSION ---------------- */
.mission-section {
    display: flex;
    align-items: center;
    gap: 60px;
}
.mission-img {
    flex: 1;
    margin-top: 0px;
    width: 25%;
}
.mission-text {
    flex: 1;
    width: 75%;
}

.mission-img img {
    width: 100%;
    border-radius: 18px;
}

/* ---------------- STORY ---------------- */
.story-section {
    display: flex;
    align-items: center;
    gap: 60px;
}
.story-text {
    flex: 1;
    width: 75%;
}
    a {
  text-decoration: none;
}
.story-img {
    flex: 1;
    width: 25%;
}

.story-img img {
    width: 100%;
    border-radius: 18px;
}

/* ---------------- RESOURCES ---------------- */
.resources-section .center {
    text-align: center;
    margin-bottom: 40px;
}

.resource-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.card {
    width: 40%;
    background: white;
    padding: 40px 30px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-8px);
}

.card img {
    width: 90px;
    margin-bottom: 20px;
}
.app-buttons {
    margin-top: 0px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.app-button{
    width: 150px;
}


/* ---------------- RESPONSIVE ---------------- */
@media(max-width: 992px) {
    .about-section,
    .mission-section,
    .story-section,
    .resource-cards {
        flex-direction: column;
        text-align: center;
        .about-right,
        .mission-img,
        .story-img {
            width: 100%;
        }
    }

    .card {
        width: 90%;
    }
}
/* ------------------- ANIMATION DEFAULT ------------------- */
.animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-in-out;
}

.animate.show {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from left */
.animate-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s ease-in-out;
}
.animate-left.show {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.animate-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s ease-in-out;
}
.animate-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* Slide up */
.animate-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
}
.animate-up.show {
    opacity: 1;
    transform: translateY(0);
}