:root {
    --color-bg: #FFFFFF;
    --color-text: #111111;
    --color-sub-text: #666666;
    --color-primary: #000000;
    /* Black for strong elements */
    --color-accent-blue: #89CFF0;
    /* Keep brand colors but subtle */
    --color-accent-yellow: #FFF500;
    --color-gray-bg: #F5F5F5;

    /* Unified Font */
    --font-main: "Tsukushi A Round Gothic", "筑紫A丸ゴシック", "Zen Maru Gothic", sans-serif;
    --font-serif: "Tsukushi A Round Gothic", "筑紫A丸ゴシック", "Zen Maru Gothic", sans-serif;

    --container-width: 1000px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "筑紫A丸ゴシック", "Tsukushi A Round Gothic", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Quicksand", sans-serif;
    background-color: #FFFFF0;
    /* Hardcoded Cream */
    background-image: url('cloud_bg.png'), url('cloud_bg.png'), url('cloud_bg.png'), url('cloud_bg.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position:
        left -100px top 50px,
        right -100px top 600px,
        left -150px top 1500px,
        right -50px bottom 50px;
    background-size:
        600px auto,
        500px auto,
        600px auto,
        700px auto;
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    font-weight: 700;
    min-height: 100vh;
    overflow-x: hidden;
    /* Prevent horizontal scroll from floating elements */
    width: 100%;
    /* Ensure body doesn't shrink */
}

html {
    /* Sticky Header Adjustment */
    padding-top: 70px;
    /* Header height */
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.4;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

/* Buttons - Minimal & Sharp */
.btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid var(--color-text);
    background: transparent;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 0;
    /* Sharp edges */
}

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

.btn-detail {
    display: inline-block;
    background-color: #5DADE2;
    /* Sky blue */
    color: white;
    padding: 8px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.btn-detail:hover {
    background-color: #3498DB;
}

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

.btn-primary:hover {
    background-color: #333;
    border-color: #333;
}

/* Header - Clean & Minimal */
header {
    padding: 20px 0;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #eee;
}

.header-container {
    display: flex;
    justify-content: center;
    /* Center the nav */
    align-items: center;
    position: relative;
    /* For absolute positioning of button */
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.desktop-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: 1rem;
}

.separator {
    color: var(--color-text);
    font-weight: 700;
    /* Enforce bold */
}

.btn-support {
    position: absolute;
    right: 20px;
    /* Position on the right */
    background-color: #FFFF00;
    color: #000;
    padding: 10px 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.2s ease;
    display: inline-block;
}

.btn-support:hover {
    transform: scale(1.05);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    /* Right align on mobile */
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu li {
    margin-bottom: 15px;
    text-align: center;
}

.mobile-menu a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.2rem;
}

.btn-support-mobile {
    background-color: #FFFF00;
    color: #000;
    padding: 10px 30px;
    display: inline-block;
    margin-top: 10px;
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
        /* Ensure base size is readable */
        line-height: 1.9;
        /* Even more breathing room on mobile */
    }

    h1 {
        font-size: 1.8rem;
        /* Adjust header size */
    }

    h2 {
        font-size: 1.5rem;
    }

    .desktop-nav,
    .btn-support {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .header-container {
        justify-content: flex-end;
        /* Align toggle to right */
        height: 40px;
    }
}

/* Hero - Intellectual & Calm */
.hero {
    padding: 200px 0 120px;
    background-color: var(--color-bg);
}

.hero-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.hero-text {
    flex: 1;
}

.hero h1 {
    font-size: clamp(1.5rem, 5vw, 3.2rem);
    /* Responsive font size */
    margin-bottom: 40px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    /* Force single line */
}

.hero .highlight {
    background: linear-gradient(transparent 60%, var(--color-accent-yellow) 60%);
    display: inline;
    /* Ensure it wraps text only */
    padding: 0 5px;
}

.hero-image-container {
    margin: 40px 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align bottom */
    gap: 20px;
    flex-wrap: wrap;
    /* Allow wrapping on very small screens */
}

.hero-icon {
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.hero-icon:hover {
    transform: translateY(-10px);
}

/* Individual sizing adjustments if needed */
.icon-sushi {
    max-width: 100px;
}

.icon-nose {
    max-width: 80px;
}

.icon-arrow {
    max-width: 80px;
}

.icon-bulb {
    max-width: 80px;
}

.icon-person {
    max-width: 60px;
}

@media (max-width: 768px) {
    .hero-image-container {
        gap: 10px;
    }

    .hero-icon {
        max-width: 15vw;
        /* Responsive size on mobile */
    }
}

.hero-sub {
    font-size: 1.1rem;
    color: var(--color-sub-text);
    margin-bottom: 50px;
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.1;
    /* Very subtle background visual */
    font-size: 10rem;
    pointer-events: none;
}

/* Section Common */
.section-title {
    font-size: 2rem;
    margin-bottom: 60px;
    position: relative;
    padding-left: 20px;
    border-left: 4px solid var(--color-accent-blue);
}

/* Philosophy - Text Heavy, Clean */
.philosophy {
    padding: 100px 0;
    background-color: var(--color-gray-bg);
    text-align: center;
}

.philosophy-text {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 2.2;
    color: var(--color-text);
}

/* About - Structured, No loud background */
.about-section {
    padding: 120px 0;
    background-color: white;
}

.about-content {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.about-image {
    flex: 1;
}

.circle-image {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    border-radius: 50%;
    /* Keep circle but clean */
}

.about-text {
    flex: 1.5;
}

.about-text p {
    margin-bottom: 24px;
    color: var(--color-sub-text);
}

.logo-mark {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.5rem;
    margin-top: 40px;
    letter-spacing: 0.2em;
}

/* Vision - Minimal Blue Accent */
.vision-section {
    padding: 120px 0;
    background-color: #F0F8FF;
    /* Very pale blue */
    color: var(--color-text);
}

.vision-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 80px;
}

.vision-grid {
    display: flex;
    gap: 60px;
}

.vision-text {
    flex: 1;
    color: var(--color-sub-text);
}

.vision-text p {
    margin-bottom: 30px;
    line-height: 1.8;
    font-weight: 500;
}

.mobile-br {
    display: none;
}

@media (max-width: 768px) {
    .mobile-br {
        display: block;
    }
}

.vision-visual {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-graphic {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--color-accent-blue);
    font-weight: bold;
}

.vision-images {
    font-size: 3rem;
    display: flex;
    justify-content: center;
    gap: 30px;
    opacity: 0.8;
}

/* History - Clean Timeline */
/* History Section */
.history-section {
    padding: 60px 0;
    background-color: #fff;
}

.highlight-bg {
    background-color: #FFFF00;
    display: inline-block;
    padding: 5px 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.mt-40 {
    margin-top: 40px;
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #000;
    margin-left: 10px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #ddd;
}

.timeline-item {
    margin-bottom: 60px;
    position: relative;
}

.timeline-year {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
    position: relative;
}

.timeline-year::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    transform: translateY(-50%);
}

.timeline-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.timeline-content p {
    color: var(--color-sub-text);
    font-size: 0.95rem;
}

.sub-event {
    margin-top: 20px;
    padding-left: 20px;
    border-left: 2px solid var(--color-accent-yellow);
}

.sub-event h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

/* CTA */
.cta {
    padding: 120px 0;
    text-align: center;
    background-color: var(--color-text);
    color: white;
}

.cta h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.cta p {
    color: #ccc;
    margin-bottom: 40px;
}

.cta .btn {
    border-color: white;
    color: white;
}

.cta .btn:hover {
    background-color: white;
    color: var(--color-text);
}

.hero-sub {
    font-size: 1.1rem;
    color: var(--color-sub-text);
    margin-bottom: 50px;
    text-align: center;
    /* Center align */
}

/* Footer */
.site-footer {
    padding: 60px 0;
    background-color: #f9f9f9;
    color: var(--color-sub-text);
    text-align: center;
    font-size: 0.8rem;
}

/* Mobile */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.5rem;
        /* Ensure fit on small screens */
        text-align: left;
    }

    .hero h1 .anim-text.d-block {
        display: block;
        white-space: nowrap;
        /* Prevent internal wrapping */
    }

    .container {
        padding: 0 20px;
        /* Reduce padding to gain space */
    }

    /* Hero Center Alignment */
    .hero-content {
        flex-direction: column;
        align-items: center;
        /* Center items */
        text-align: center;
    }

    .hero-text {
        width: 100%;
    }

    .hero h1 {
        font-size: 1.5rem;
        text-align: center;
        /* Center text */
        width: 100%;
    }

    .hero-image-container {
        justify-content: center;
    }


    .hero {
        padding-top: 40px;
        /* Reduced from 200px to 1/5th */
        padding-bottom: 60px;
    }

    .about-content,
    .vision-grid {
        flex-direction: column;
    }

    .timeline {
        padding-left: 20px;
    }

    .timeline-year::before {
        left: -25px;
    }

    /* Fix About Section Width */
    .about-content,
    .about-text,
    .about-images-row,
    .about-collage-wrapper,
    .vision-text-block {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .about-text {
        text-align: justify;
        /* Or left, to use space better? User said 'squashed to left'. Let's ensure it fills width. */
        padding: 0;
    }

    /* Stack event items vertical on mobile */
    .event-item {
        flex-direction: column;
        gap: 20px;
    }

    .event-image {
        width: 100%;
        margin-top: 10px;
    }
}

.content-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.rounded-image {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin: 0 auto;
}

.shadow-image {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.mt-20 {
    margin-top: 20px;
}

/* Event Item Layout */
.event-item {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: flex-start;
}

.event-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.event-image {
    flex: 0 0 300px;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-image img {
    width: 100%;
    height: auto;
    margin-top: 0;
    border-radius: 8px;
}

/* Mobile Event Layout */
@media (max-width: 768px) {
    .event-item {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .event-image {
        flex: none;
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    .event-image img {
        width: 80%;
        /* Consistent with previous mobile sizing */
        max-width: 300px;
    }

    .event-details {
        width: 100%;
        align-items: center;
        /* Center text on mobile? Or keep left? User image shows left align on desktop. Let's keep left for text, maybe center button? Let's stick to left for now as per desktop. */
    }
}

/* About Section - Centered Layout */
.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

.about-section .section-title {
    border-left: none;
    padding-left: 0;
    text-align: center;
}

.about-title-wrapper {
    margin-bottom: 30px;
}

.about-logo-img {
    max-width: 100%;
    width: 300px;
    height: auto;
    margin: 0 auto 40px;
    display: block;
}

.about-text {
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 40px;
}

.about-images-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.rounded-image {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    /* Fallback */
    aspect-ratio: 1 / 1;
    /* Force square */
    object-fit: cover;
    margin: 0 auto;
}

/* Vision Section Styles */
.vision-headline {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Support Section */
.support-section {
    padding: 100px 0;
    background-color: #fff;
    /* Clean white background */
}

.support-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
    gap: 40px;
}

.support-text-area {
    flex: 1.5;
}

.support-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 700;
}

.support-desc-sub {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-sub-text);
}

.support-desc-sub .highlight-bg {
    font-size: 1rem;
    padding: 0 5px;
}

.support-visual-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

.support-person {
    width: 120px;
    height: auto;
}

.support-arrow {
    width: 100px;
    height: auto;
    /* Rotate arrow to point to person if needed, or use as is */
}

.support-circles {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.circle-item {
    text-align: center;
    flex: 1;
    min-width: 140px;
}

.circle-inner {
    width: 160px;
    height: 160px;
    border: 2px dashed var(--color-text);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    transition: all 0.3s;
}

.circle-item:hover .circle-inner {
    transform: rotate(5deg);
    border-style: solid;
    background-color: #f9f9f9;
}

.circle-caption {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 700;
}

.support-pricing {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.pricing-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    padding: 20px 40px;
    border-radius: 50px;
    /* Pill shape */
    color: white;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-price:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.price-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin-right: 5px;
}

.price-unit {
    font-size: 1rem;
}

.btn-blue {
    background-color: #00BFFF;
}

/* 3,000 */
.btn-green {
    background-color: #8CDD81;
}

/* 10,000 */
.btn-orange {
    background-color: #E67E22;
}

/* 30,000 */
.btn-purple {
    background-color: #DA70D6;
}

/* 50,000 */
.btn-gray {
    background-color: #A9A9A9;
}

/* 1,000,000 */

.tax-note {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 700;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .support-content {
        flex-direction: column;
        gap: 40px;
    }

    .support-visual-area {
        width: 100%;
        justify-content: center;
    }

    .support-circles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2x2 grid on mobile */
        gap: 30px 10px;
    }

    .pricing-row {
        flex-direction: column;
        width: 100%;
    }

    .btn-price {
        width: 100%;
        max-width: 320px;
    }
}

.vision-text-block {
    text-align: center;
    /* Center align */
    max-width: 800px;
    margin: 0 auto;
}

.vision-text-block p {
    margin-bottom: 30px;
    line-height: 2;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .vision-headline {
        font-size: 1.5rem;
    }

    .vision-text-block {
        padding: 0 20px;
    }

    .about-text {
        font-size: 1rem;
        text-align: center;
        /* Ensure centered on mobile too */
    }
}

/* Image Sizing - 30% for non-hero images */
.small-image {
    width: 30%;
    max-width: 300px;
    /* Cap it reasonably */
    min-width: 200px;
    /* Ensure visibility on mobile */
    height: auto;
    display: block;
    margin: 20px auto;
    /* Center images */
}

.about-logo-img {
    max-width: 100%;
    width: 250px;
    /* Slightly smaller */
    height: auto;
    margin: 0 auto 30px;
    display: block;
}

/* Mobile adjustments for images */
@media (max-width: 768px) {
    .rounded-image {
        width: 150px;
        height: 150px;
    }

    .about-logo-img {
        width: 60%;
    }

    .small-image {
        width: 80%;
        /* On mobile, 30% might be too small, let's keep it readable */
        max-width: 100%;
    }
}

/* Omamori Pricing Grid */
.support-pricing-omamori {
    max-width: 800px;
    margin: 40px auto 0;
    text-align: center;
}

.omamori-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    /* Improve responsiveness */
    width: 100%;
    /* Ensure row takes full width */
}

.omamori-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
    /* Base width */
    flex: 0 0 45%;
    /* Enforce ~50% width minus gap */
    max-width: 300px;
}

.omamori-image-wrapper {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.omamori-img {
    width: 100%;
    height: auto;
    max-width: 180px;
    /* Adjust max width */
    animation: rotateme 20s linear infinite;
    transform-origin: center;
}

@keyframes rotateme {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.omamori-price {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--font-main);
    color: var(--color-text);
}

.omamori-price .unit {
    font-size: 1rem;
    margin-left: 5px;
}

.tax-note-omamori {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-top: 20px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .omamori-row {
        gap: 20px;
    }

    .omamori-item {
        width: 45%;
        /* 2 items per row on mobile */
    }

    .omamori-image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }
}

/* Scroll Animation Styles */
.anim-text {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-text.d-block {
    display: inline-block;
}

.anim-image {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Floating Background */
/* Floating Background */
#floating-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.float-item {
    position: absolute;
    opacity: 0.3;
    /* 30% opacity */
    user-select: none;
    will-change: transform;
    /* Animation name is set here, duration/delay in JS */
    animation-name: floating;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translate(0, 0) rotate(-10deg);
    }

    25% {
        transform: translate(30px, -20px) rotate(5deg);
    }

    50% {
        transform: translate(10px, 40px) rotate(10deg);
    }

    75% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(-10deg);
    }
}

/* About Collage */
.about-collage-wrapper {
    width: 100%;
    margin: 40px 0;
    display: flex;
    justify-content: center;
}

.about-collage-wrapper img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 8px;
}

/* Vision Inserted Image */
.vision-inserted-image {
    width: 100%;
    margin: 40px 0;
    display: flex;
    justify-content: center;
}

.vision-inserted-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 30px;
    /* Highly rounded corners as per reference */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}