/**
 * About Page Styles
 * Note: Sky background styles commented out - now using standard page-header
 */

/* 
// Sky background wrapper for the About page header
.about-sky-section {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin-top: 80px;
    background: linear-gradient(180deg,
            #4a9fd8 0%,
            #7bb8e3 25%,
            #a8d5f0 50%,
            #d4ebf7 75%,
            #e8f4fa 100%);
}

// Cloud overlay - first layer (top clouds)
.about-sky-section::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 60%;
    background:
        radial-gradient(ellipse 800px 300px at 20% 40%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse 600px 250px at 60% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 700px 280px at 85% 45%, rgba(255, 255, 255, 0.65) 0%, transparent 50%);
    animation: drift-clouds-top 40s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

// Cloud overlay - second layer (bottom clouds)
.about-sky-section::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: 110%;
    height: 50%;
    background:
        radial-gradient(ellipse 900px 350px at 15% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 750px 300px at 50% 70%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse 650px 280px at 80% 65%, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
    animation: drift-clouds-bottom 50s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

// Gentle cloud drift animation - top layer
@keyframes drift-clouds-top {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.7;
    }

    50% {
        transform: translate(2%, -1%);
        opacity: 0.85;
    }
}

// Gentle cloud drift animation - bottom layer
@keyframes drift-clouds-bottom {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.5;
    }

    50% {
        transform: translate(-2%, 1%);
        opacity: 0.65;
    }
}

// Ensure page header content stays on top
.about-sky-section .page-header {
    position: relative;
    z-index: 2;
    padding: 3rem 0;
    margin-top: 0 !important;
    padding-top: calc(80px + 3rem) !important;
}

// Adjust text color for better contrast on sky background
.about-sky-section .page-header h1 {
    color: #1e3a5f;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

.about-sky-section .page-header p {
    color: #2c5282;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

// Wave divider at bottom of sky section
.about-sky-section .wave-divider {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,40 C240,70 480,20 720,40 C960,60 1200,10 1440,30 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
}

// Responsive adjustments
@media (max-width: 768px) {
    .about-sky-section .page-header {
        padding: 2rem 0;
    }

    .about-sky-section .wave-divider {
        height: 50px;
    }
}
*/