/* About Section with Blended Background */
.about-school-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 60px 0 0 0;
    background: url('../images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: 1;
    overflow: hidden;
}

.about-school-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Purple/white overlay for readability and effect */
    background: linear-gradient(135deg, #f4eeffdd 10%, #c8b6ec99 70%, #cba6fb66 100%);
    mix-blend-mode: lighten;
    will-change: opacity;
    animation: aboutFadeInBg 2.2s cubic-bezier(.18,.82,.8,.96);
    pointer-events: none;
}
@keyframes aboutFadeInBg {
   from { opacity: 0; }
   to   { opacity: 1; }
}

.container {
    position: relative;
    z-index: 2;
}

/* Flex Layout for About Info */
.about-flex {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 38px;
    flex-wrap: wrap;
    margin-bottom: 44px;
    will-change: transform, box-shadow;
    animation: aboutFadeUp 1s .35s both cubic-bezier(.45,1.1,.85,1.0);
}
@keyframes aboutFadeUp {
    0% { opacity: 0; transform: translateY(82px);}
    50% { opacity: 0.5;}
    100% { opacity: 1; transform: none;}
}

.about-left {
    flex: 1 1 510px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 330px;
    background: rgba(255,255,255,0.95);
    border-radius: 22px;
    padding: 38px 30px;
    box-shadow: 0 8px 34px #a489fb1a;
    animation: cardPulseGlow 2.8s 1s both;
}
@keyframes cardPulseGlow {
   0% { box-shadow: 0 16px 40px #c1a6e800;}
   80% { box-shadow: 0 16px 44px #8a4acf4a;}
   100% { box-shadow: 0 8px 34px #a489fb1a;}
}
.about-title {
    font-size: 2.2rem;
    color: #712cac;
    margin-bottom: 21px;
    font-weight: 900;
    letter-spacing: .6px;
    animation: fadeInText 1.1s .5s both;
}
@keyframes fadeInText {
    from {opacity:.1; transform: translateY(22px);}
    to {opacity:1;}
}
.about-left p {
    font-size: 19px;
    color: #26263a;
    margin-bottom: 18px;
    line-height: 1.7;
    transition: color 0.25s;
}
.about-left strong, .about-left b {
    color: #6c1eb2;
    font-weight: 600;
}

/* Image Column with hover animation */
.about-right {
    flex: 1 1 480px;
    min-width: 320px;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 320px;
    transition: filter 0.35s;
}
.about-right img {
    width: 100%;
    max-width: 500px;
    height: 330px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 10px 36px rgba(130,44,191,0.17),0 8px 32px #b39eec22;
    border: 3px solid #efebfc;
    background: #fff;
    transition: transform 0.32s cubic-bezier(.27,.98,.83,.99), box-shadow .28s;
    animation: imgFadeZoom 1.2s .7s both;
}
.about-right img:hover {
    transform: scale(1.047) rotate(-1.1deg);
    box-shadow: 0 15px 50px #7b2cbf39,0 4px 12px #fff3;
}

@keyframes imgFadeZoom {
    0% { opacity:.05; transform: scale(.91);}
    80% { opacity:.6; transform: scale(1.05);}
    100% { opacity:1; transform: none;}
}

/* Facilities Section */
.facilities-wrapper {
    background: rgba(255,255,255,0.92);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 6px 32px rgba(80,40,160,0.08);
    padding: 42px 29px 44px 29px;
    margin-top: 10px;
    animation: aboutFadeUp 1s 1.3s both cubic-bezier(.45,1.1,.85,1.0);
}

.facilities-title {
    color: #8a2be2;
    font-size: 1.48rem;
    text-align: center;
    margin-bottom: 26px;
    font-weight: 800;
    letter-spacing: .6px;
    text-shadow:0 4px 18px #b897e126;
    transition: color .24s;
}

.facilities-grid {
    display: flex;
    gap: 76px;
    justify-content: center;
    margin: 0 auto;
    max-width: 950px;
}

.facility-list {
    list-style-type: none;
    padding: 0 0 0 17px;
    border-left: 4px solid #7c3ed4;
    margin: 0;
    background: linear-gradient(90deg,#f8f5ffd2 60%,#f5eaffd8 100%);
    border-radius: 13px;
    box-shadow:0 2px 8px #8862d311;
    min-width: 190px;
    animation: cardPulseGlow 2.6s 1.4s both;
    transition: box-shadow .26s, border-left-color .24s;
}
.facility-list li {
    font-size: 17px;
    color: #352663;
    margin-bottom: 16px;
    padding-left: 8px;
    min-height: 32px;
    display: flex; align-items: center;
    transition: color 0.23s, transform 0.18s;
    will-change: color, transform;
}
.facility-list li::before {
    content:"";
    display:inline-block;
    margin-right:10px;
    width: 11px; height: 11px; border-radius: 99px;
    background: radial-gradient(circle at 80% 88%, #a585f6 80%, #d5c4fb00 100%);
    box-shadow: 0 1px 4px #bdb9fc48;
    transition:background .21s;
}
.facility-list li:hover {color: #8a2be2;transform:translateX(8px);}
.facility-list li:hover::before {background: radial-gradient(circle at 80% 88%, #deabf6 70%, #b282fb00 100%);}

.facility-list li:last-child {margin-bottom: 0;}

/* Responsive Layout */
@media (max-width: 1120px) {
    .about-flex {
        gap: 18px;
    }
    .about-right img {
        max-width: 380px; height: 220px;
    }
    .facilities-grid { gap: 28px; }
}
@media (max-width: 850px) {
    .about-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
    }
    .about-right, .about-left { min-width: 0; max-width: 100%; }
    .about-right { justify-content: center; margin-bottom: 20px; }
    .about-right img { max-width: 99vw; min-width: 200px;}
    .about-left { min-width: 0; padding: 18px 13px;}
    .facilities-grid { flex-direction: column; gap: 14px; max-width:100%;}
}
@media (max-width: 599px) {
    .about-title { font-size: 1.02rem; }
    .about-left p { font-size: 15px; }
    .facilities-wrapper { padding: 15px 3px 20px 3px; border-radius: 14px 14px 0 0;}
    .facilities-title {font-size:1.08em;}
    .facility-list {border-left:3px solid #7b2cbf; padding:0 0 0 8px;}
    .about-right img { height: 125px;}
}