/*==================================================
                ABOUT PAGE CSS
==================================================*/

/*=========================
        PAGE HEADER
==========================*/

.about-header{

    background:linear-gradient(
        135deg,
        #062741 0%,
        #0B4C78 60%,
        #55ACEE 100%
    );

    color:#fff;

    padding:90px 0;

    position:relative;

    overflow:hidden;

}

.about-header::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-150px;

    left:-100px;

}

.about-header::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    bottom:-150px;

    right:-80px;

}

.about-header h1{

    font-weight:800;

    letter-spacing:1px;

    animation:fadeDown .9s ease;

}

.about-header p{

    font-size:20px;

    opacity:.95;

    animation:fadeUp 1.2s ease;

}

/*=========================
      ABOUT SCHOOL
==========================*/

.about-school{

    background:#fff;

}

.about-school h2{

    color:#062741;

    font-weight:700;

    margin-bottom:25px;

}

.about-school p{

    color:#555;

    line-height:2;

    text-align:justify;

}

.about-logo{

    max-height:360px;

    border-radius:20px;

    transition:.5s;

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.about-logo:hover{

    transform:scale(1.05) rotate(2deg);

}

/*=========================
      VISION & MISSION
==========================*/

.vision-section{

    background:#F5F9FD;

}

.vision-card{

    background:#fff;

    border:none;

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    height:100%;

}

.vision-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.vision-card h3{

    color:#062741;

    margin-bottom:20px;

    font-weight:700;

}

.vision-card i{

    color:#55ACEE;

    margin-right:10px;

}

.vision-card p{

    color:#555;

    line-height:1.9;

}

/*=========================
    PRINCIPAL SECTION
==========================*/

.principal-section{

    background:#fff;

}

.principal-photo-wrapper{

    display:inline-block;

    padding:8px;

    background:linear-gradient(
        135deg,
        #062741,
        #0B4C78,
        #55ACEE
    );

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.principal-photo{

    width:260px;

    height:260px;

    border-radius:50%;

    object-fit:cover;

    border:8px solid #0B4C78;

    box-shadow:
        0 0 0 4px #003864,
        0 15px 35px rgba(0,0,0,.18);

    transition:.4s ease;

}

.principal-photo:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 0 5px #002642,
        0 25px 45px rgba(0,0,0,.25);

}

.principal-content{

    padding:20px;

}

.principal-content h3{

    color:#062741;

    font-weight:700;

    margin-bottom:20px;

}

.principal-content p{

    color:#555;

    line-height:2;

}

/*=========================
      WHY CHOOSE US
==========================*/

.why-choose{

    background:#F5F9FD;

}

.feature-card{

    background:#fff;

    padding:40px 25px;

    border-radius:20px;

    transition:.4s;

    text-align:center;

    height:100%;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.feature-card i{

    font-size:60px;

    color:#55ACEE;

    transition:.5s;

}

.feature-card:hover i{

    transform:rotateY(360deg);

    color:#062741;

}

.feature-card h5{

    color:#062741;

    margin-top:20px;

    margin-bottom:15px;

    font-weight:700;

}

.feature-card p{

    color:#666;

    line-height:1.8;

}

/*=========================
        STATS
==========================*/

.school-stats{

    background:linear-gradient(
        135deg,
        #062741,
        #0B4C78
    );

    color:#fff;

}

.stats-card{

    padding:30px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    transition:.4s;

}

.stats-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.15);

}

.stats-card h2{

    font-size:45px;

    font-weight:800;

    color:#55ACEE;

}

.stats-card p{

    margin-top:10px;

    font-size:18px;

}

/*=========================
      ANIMATIONS
==========================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
    SECTION ANIMATION
==========================*/

.about-school{

    animation:fadeUp .8s ease;

}

.vision-section{

    animation:fadeUp 1s ease;

}

.principal-section{

    animation:fadeUp 1.2s ease;

}

.why-choose{

    animation:fadeUp 1.4s ease;

}

.school-stats{

    animation:fadeUp 1.6s ease;

}

/*=========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

    .about-header{

        padding:70px 0;

    }

    .about-header h1{

        font-size:2.5rem;

    }

    .principal-photo{

        width:220px;

        height:220px;

        margin-bottom:30px;

    }

}

@media(max-width:768px){

    .about-header{

        padding:60px 0;

    }

    .about-header h1{

        font-size:2rem;

    }

    .about-school h2{

        text-align:center;

    }

    .principal-content{

        text-align:center;

    }

    .feature-card{

        margin-bottom:20px;

    }

    .stats-card{

        margin-bottom:20px;

    }

}

@media(max-width:576px){

    .about-header h1{

        font-size:1.7rem;

    }

    .about-header p{

        font-size:16px;

    }

    .principal-photo{

        width:180px;

        height:180px;

    }

    .feature-card{

        padding:30px 20px;

    }

    .feature-card i{

        font-size:45px;

    }

    .stats-card h2{

        font-size:35px;

    }

}
/*==================================================
            SCHOOL TIMINGS & UNIFORM
==================================================*/

/* SECTION */

.about-timing,
.about-uniform{

    background:#f7fbff;

}

.about-uniform{

    border-top:1px solid #e5eef8;

}

/* SECTION TITLE */

.section-title h2{

    color:#062741;

    font-weight:800;

    margin-bottom:12px;

    position:relative;

    display:inline-block;

}

.section-title h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    transform:translateX(-50%);

    width:70px;

    height:4px;

    background:#55ACEE;

    border-radius:10px;

}

.section-title p{

    color:#666;

    font-size:17px;

    margin-top:20px;

}

/* TABLE */

.timing-table,
.uniform-table{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    margin-bottom:0;

}

.timing-table thead,
.uniform-table thead{

    background:linear-gradient(
        135deg,
        #062741,
        #0B4C78
    );

    color:#fff;

}

.timing-table th,
.uniform-table th{

    text-align:center;

    padding:16px;

    font-weight:700;

    border:none;

}

.timing-table td,
.uniform-table td{

    padding:15px;

    vertical-align:middle;

    border-color:#e8eef5;

}

.timing-table tbody tr:nth-child(even),
.uniform-table tbody tr:nth-child(even){

    background:#f9fcff;

}

.timing-table tbody tr:hover,
.uniform-table tbody tr:hover{

    background:#edf6ff;

    transition:.3s;

}

/* FIRST COLUMN */

.timing-table td:first-child,
.uniform-table td:first-child{

    font-weight:700;

    color:#062741;

}

/* UNIFORM NOTE */

.uniform-note{

    background:#ffffff;

    border-left:6px solid #55ACEE;

    border-radius:15px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.uniform-note h5{

    color:#062741;

    font-weight:700;

    margin-bottom:18px;

}

.uniform-note ul{

    margin:0;

    padding-left:20px;

}

.uniform-note li{

    margin-bottom:10px;

    color:#555;

    line-height:1.7;

}

/* RESPONSIVE */

@media(max-width:768px){

    .timing-table,
    .uniform-table{

        font-size:14px;

    }

    .timing-table th,
    .timing-table td,
    .uniform-table th,
    .uniform-table td{

        padding:10px;

    }

    .section-title h2{

        font-size:2rem;

    }

}

@media(max-width:576px){

    .section-title h2{

        font-size:1.7rem;

    }

    .section-title p{

        font-size:15px;

    }

    .uniform-note{

        padding:18px;

    }

}