/* =====================================================
   NEWS & UPDATES BAR
===================================================== */

.school-news-bar{
    width:100%;
    height:42px;

    display:flex;
    align-items:center;

    background:#f8f9fc;

    border-bottom:1px solid #e5e5e5;

    box-shadow:0 2px 6px rgba(0,0,0,.05);

    overflow:hidden;

    font-family:Arial, Helvetica, sans-serif;
}


/* =====================================================
   NEWS LABEL
===================================================== */

.news-label{
    height:100%;

    display:flex;
    align-items:center;

    padding:0 18px;

    background:#453b6e;

    color:#fff;

    position:relative;

    flex-shrink:0;

    z-index:2;
}


/* Small red accent */

.news-label:after{
    content:"";

    position:absolute;

    right:-12px;
    top:0;

    width:0;
    height:0;

    border-top:21px solid transparent;
    border-bottom:21px solid transparent;
    border-left:12px solid #453b6e;
}


/* NEW GIF */

.news-label img{
    width:30px;
    height:14px;

    object-fit:contain;

    margin-right:8px;
}


/* Label text */

.news-label strong{
    font-size:14px;

    white-space:nowrap;

    letter-spacing:.2px;
}


/* =====================================================
   SCROLLING CONTENT
===================================================== */

.news-scroll{
    flex:1;

    height:100%;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding-left:20px;
}


.news-scroll marquee{
    width:100%;

    color:#453b6e;

    font-size:14px;

    font-weight:600;

    line-height:42px;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767px){

    .school-news-bar{
        height:38px;
    }

    .news-label{
        padding:0 12px;
    }

    .news-label strong{
        font-size:12px;
    }

    .news-label img{
        width:27px;
        height:13px;
        margin-right:5px;
    }

    .news-label:after{
        border-top-width:19px;
        border-bottom-width:19px;
    }

    .news-scroll{
        padding-left:15px;
    }

    .news-scroll marquee{
        font-size:12px;
        line-height:38px;
    }

}
    /* =====================================================
   POLICE MODERN SCHOOL BANNER
===================================================== */

.police-school-banner{
    position:relative;
    width:100%;
    height:250px;
    overflow:hidden;
    background:#2d1b70;
}


/* =====================================================
   POLICE COLOR BACKGROUND
===================================================== */

.police-bg{
    position:absolute;
    inset:0;

    background:#2d1b70;
}


/* RED DIAGONAL AREA */

.police-bg::after{
    content:"";

    position:absolute;

    top:0;
    right:0;

    width:78%;
    height:100%;

    background:#e52b2b;

    clip-path:polygon(
        0 0,
        100% 0,
        100% 100%,
        22% 100%
    );
}


/* DARK NAVY DIAGONAL OVERLAY */

.police-bg::before{
    content:"";

    position:absolute;

    z-index:2;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#2d1b70;

    clip-path:polygon(
        0 0,
        44% 0,
        100% 100%,
        0 100%
    );
}


/* =====================================================
   CONTENT
===================================================== */

.police-banner-content{
    position:relative;
    z-index:5;

    width:94%;
    max-width:1400px;

    height:100%;

    margin:auto;

    display:flex;
    align-items:center;
}


/* =====================================================
   LOGO
===================================================== */

.police-logo{
    width:170px;
    height:170px;

    flex-shrink:0;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px;

    margin-left:15px;

    box-shadow:0 4px 15px rgba(0,0,0,.18);
}


.police-logo img{
    width:100%;
    height:100%;

    object-fit:contain;
}


/* =====================================================
   SCHOOL TEXT
===================================================== */

.police-school-text{
    flex:1;

    text-align:center;

    margin-left:15px;

    color:#fff;

    padding-right:30px;
}


/* SCHOOL NAME */

.police-school-text h1{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:54px;

    line-height:1;

    font-weight:700;

    letter-spacing:1px;

    color:#fff;

    text-shadow:
        1px 2px 2px rgba(0,0,0,.25);
}


/* SUB TITLE */

.police-school-text h2{
    margin:12px 0 7px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:23px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:.5px;

    color:#fff;
}


/* ADDRESS */

.police-address{
    font-family:Arial, Helvetica, sans-serif;

    font-size:20px;

    font-weight:600;

    line-height:1.4;

    color:#fff;
}


.police-address span{
    margin:0 10px;

    opacity:.8;
}


/* AFFILIATION */

.police-affiliation{
    margin-top:8px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:18px;

    font-weight:700;

    letter-spacing:1px;

    color:#fff;
}


/* =====================================================
   DESKTOP LARGE SCREEN
===================================================== */

@media(min-width:1400px){

    .police-school-banner{
        height:270px;
    }

    .police-logo{
        width:185px;
        height:185px;
    }

    .police-school-text h1{
        font-size:62px;
    }

    .police-school-text h2{
        font-size:25px;
    }

    .police-address{
        font-size:21px;
    }

}


/* =====================================================
   LAPTOP / TABLET
===================================================== */

@media(max-width:1100px){

    .police-school-banner{
        height:220px;
    }

    .police-logo{
        width:135px;
        height:135px;
    }

    .police-school-text h1{
        font-size:40px;
    }

    .police-school-text h2{
        font-size:18px;
    }

    .police-address{
        font-size:15px;
    }

    .police-affiliation{
        font-size:14px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767px){

    .police-school-banner{
        height:auto;
        min-height:270px;
    }


    .police-banner-content{
        width:96%;

        flex-direction:column;

        justify-content:center;

        padding:20px 0;
    }


    .police-logo{
        width:85px;
        height:85px;

        margin:0 0 12px;
    }


    .police-school-text{
        margin:0;
        padding:0 8px;

        text-align:center;
    }


    .police-school-text h1{
        font-size:28px;
        line-height:1.1;
    }


    .police-school-text h2{
        font-size:14px;
        margin:8px 0 5px;
    }


    .police-address{
        font-size:12px;
    }


    .police-address span{
        display:none;
    }


    .police-affiliation{
        font-size:12px;
        margin-top:5px;
    }


    /* MOBILE DIAGONAL */

    .police-bg::before{
        clip-path:polygon(
            0 0,
            70% 0,
            100% 100%,
            0 100%
        );
    }

}
/*====================================================
    MODERN SCHOOL NAVBAR
====================================================*/

.modern-header{
    position:relative;
    z-index:9999;
    width:100%;
    background:#ffffff;
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/*====================================================
    TOP INFO BAR
====================================================*/

.top-info-bar{
    background:#0d2942;
    color:#dce9f5;
    font-size:12px;
}

.modern-container{
    width:92%;
    max-width:1380px;
    margin:auto;
}

.top-info-bar .modern-container{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.top-info-left span,
.top-info-right span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.top-info-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.top-info-right a{
    color:#ffffff;
    text-decoration:none;
    font-weight:700;
    padding:5px 13px;
    border-radius:20px;
    background:#1d79b7;
    transition:.3s ease;
}

.top-info-right a:hover{
    background:#2d91d2;
}


/*====================================================
    MAIN NAVBAR
====================================================*/

.modern-navbar{
    position:relative;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(13,41,66,.08);
    transition:
        padding .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.nav-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}


/*====================================================
    LOGO
====================================================*/

.school-logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none !important;
    flex-shrink:0;
}

.school-logo img{
    width:58px;
    height:58px;
    object-fit:contain;
    transition:.4s ease;
}

.school-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.school-logo-text strong{
    color:#0d2942;
    font-size:18px;
    font-weight:800;
}

.school-logo-text small{
    margin-top:4px;
    color:#6b8194;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}


/*====================================================
    NAVIGATION
====================================================*/

.modern-navigation{
    margin-left:auto;
}

.modern-navigation > ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    gap:3px;
}

.modern-navigation > ul > li{
    position:relative;
}

/*====================================================
    SHARPER & LARGER NAVIGATION
====================================================*/

.nav-link{
    padding:30px 15px;
    font-size:14px;
    font-weight:800;
    color:#19364d !important;
    letter-spacing:.1px;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

.nav-link .fa-home{
    font-size:16px;
}

.modern-navigation > ul{
    gap:5px;
}

.nav-contact a{
    font-size:13px;
    font-weight:800;
    padding:12px 19px;
}


/*====================================================
    DROPDOWN FONT
====================================================*/

.modern-dropdown li a{
    font-size:14px;
    font-weight:700;
    letter-spacing:.05px;
}


/*====================================================
    LOGO TEXT
====================================================*/

.school-logo-text strong{
    font-size:19px;
    font-weight:800;
    letter-spacing:-.2px;
}

.school-logo-text small{
    font-size:10px;
    font-weight:600;
    letter-spacing:1.2px;
}


/*====================================================
    SCROLLED NAVBAR
====================================================*/

.modern-header.is-scrolled .nav-link{
    padding-top:22px;
    padding-bottom:22px;
    font-size:13.5px;
}

.modern-header.is-scrolled .nav-link::after{
    bottom:11px;
}


/* Bottom animated line */

.nav-link::after{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:18px;
    height:2px;
    border-radius:10px;
    background:#1976b9;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .35s ease;
}

.nav-link:hover{
    color:#1976b9 !important;
}

.nav-link:hover::after{
    transform:scaleX(1);
}


/* Home icon */

.nav-link .fa-home{
    font-size:15px;
    color:#1976b9;
}


/* Dropdown arrow */

.dropdown-arrow{
    font-size:11px;
    transition:transform .3s ease;
}

.has-dropdown:hover .dropdown-arrow{
    transform:rotate(180deg);
}


/*====================================================
    DROPDOWN
====================================================*/

.modern-dropdown{
    position:absolute;
    top:calc(100% - 5px);
    left:0;
    min-width:260px;
    margin:0;
    padding:10px;
    list-style:none;

    background:rgba(255,255,255,.98);
    border:1px solid rgba(25,118,185,.10);
    border-radius:15px;

    box-shadow:
        0 20px 45px rgba(13,41,66,.15);

    opacity:0;
    visibility:hidden;
    transform:translateY(12px) scale(.97);
    transform-origin:top center;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

    backdrop-filter:blur(15px);
}

.has-dropdown:hover > .modern-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.modern-dropdown li{
    position:relative;
}

.modern-dropdown li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:12px 14px;

    color:#29445b !important;
    font-size:13px;
    font-weight:600;
    text-decoration:none !important;

    border-radius:10px;

    transition:
        background .3s ease,
        color .3s ease,
        padding-left .3s ease;
}

.modern-dropdown li a i{
    color:#91a5b5;
    font-size:11px;
    transition:.3s ease;
}

.modern-dropdown li a:hover{
    color:#1976b9 !important;
    background:#eef7fd;
    padding-left:19px;
}

.modern-dropdown li a:hover i{
    color:#1976b9;
    transform:translateX(3px);
}


/*====================================================
    CONTACT BUTTON
====================================================*/

.nav-contact{
    margin-left:8px;
}

.nav-contact a{
    display:flex;
    align-items:center;
    gap:7px;

    padding:11px 17px;

    color:#ffffff !important;
    background:linear-gradient(135deg,#1672b3,#1d8ed0);

    border-radius:30px;

    font-size:12px;
    font-weight:800;

    text-decoration:none !important;

    box-shadow:0 7px 18px rgba(23,114,179,.20);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.nav-contact a:hover{
    color:#ffffff !important;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(23,114,179,.30);
}


/*====================================================
    MOBILE BUTTON
====================================================*/

.mobile-menu-toggle{
    display:none;
    width:45px;
    height:45px;

    padding:0;
    border:0;
    border-radius:12px;

    background:#eef7fd;

    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
}

.mobile-menu-toggle span{
    width:21px;
    height:2px;
    border-radius:10px;
    background:#1672b3;
    transition:.3s ease;
}


/*====================================================
    STICKY / SCROLLED STATE
====================================================*/

.modern-header.is-scrolled{
    position:fixed;
    top:0;
    left:0;
    right:0;

    box-shadow:
        0 10px 35px rgba(13,41,66,.12);
}

.modern-header.is-scrolled .top-info-bar{
    display:none;
}

.modern-header.is-scrolled .nav-inner{
    min-height:64px;
}

.modern-header.is-scrolled .school-logo img{
    width:46px;
    height:46px;
}

.modern-header.is-scrolled .nav-link{
    padding-top:21px;
    padding-bottom:21px;
}

.modern-header.is-scrolled .nav-link::after{
    bottom:11px;
}


/*====================================================
    HIDE ON SCROLL DOWN
====================================================*/

.modern-header.hide-on-scroll{
    transform:translateY(-100%);
}


/*====================================================
    TABLET
====================================================*/

@media(max-width:1150px){

    .modern-container{
        width:94%;
    }

    .nav-link{
        padding-left:9px;
        padding-right:9px;
        font-size:12px;
    }

    .school-logo-text strong{
        font-size:16px;
    }

    .nav-contact a{
        padding:10px 13px;
    }
}


/*====================================================
    MOBILE
====================================================*/

@media(max-width:900px){

    .top-info-bar{
        display:none;
    }

    .modern-navbar{
        box-shadow:0 5px 20px rgba(13,41,66,.08);
    }

    .nav-inner{
        min-height:70px;
    }

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

    .modern-navigation{
        position:absolute;
        top:100%;
        left:0;
        right:0;

        width:100%;

        background:#ffffff;

        border-top:1px solid rgba(13,41,66,.08);

        box-shadow:0 20px 35px rgba(13,41,66,.12);

        max-height:0;
        overflow:hidden;

        opacity:0;

        transition:
            max-height .45s ease,
            opacity .35s ease;
    }

    .modern-navigation.mobile-open{
        max-height:calc(100vh - 70px);
        opacity:1;
        overflow-y:auto;
    }

    .modern-navigation > ul{
        display:block;
        padding:12px 20px 20px;
    }

    .modern-navigation > ul > li{
        border-bottom:1px solid #edf2f6;
    }

    .nav-link{
        padding:15px 5px !important;
        width:100%;
        justify-content:space-between;
    }

    .nav-link::after{
        display:none;
    }

    .modern-dropdown{
        position:static;

        min-width:0;

        padding:0 0 8px;

        border:0;
        box-shadow:none;

        background:#f7fbfe;
        border-radius:10px;

        opacity:1;
        visibility:visible;
        transform:none;

        display:none;
    }

    .has-dropdown.mobile-open-dropdown > .modern-dropdown{
        display:block;
    }

    .modern-dropdown li a{
        padding:12px 15px;
    }

    .nav-contact{
        margin:12px 0 0;
        border:0 !important;
    }

    .nav-contact a{
        justify-content:center;
        padding:13px;
    }

    .modern-header.is-scrolled .nav-inner{
        min-height:64px;
    }

    .modern-header.is-scrolled .school-logo img{
        width:46px;
        height:46px;
    }
}


/*====================================================
    SMALL MOBILE
====================================================*/

@media(max-width:480px){

    .modern-container{
        width:94%;
    }

    .school-logo img{
        width:48px;
        height:48px;
    }

    .school-logo-text strong{
        font-size:15px;
    }

    .school-logo-text small{
        font-size:8px;
    }

    .modern-navigation > ul{
        padding-left:15px;
        padding-right:15px;
    }
}

/*====================================================
    FACILITIES SECTION
====================================================*/

.facilities-section{
    position:relative;
    padding:110px 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(32,105,190,.08), transparent 30%),
        linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    overflow:hidden;
}

.facilities-container{
    width:90%;
    max-width:1250px;
    margin:auto;
}


/*====================================================
    HEADING
====================================================*/

.facilities-heading{
    max-width:720px;
    margin:0 auto 55px;
    text-align:center;
}

.facilities-heading span{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    color:#1769aa;
    margin-bottom:12px;
}

.facilities-heading h2{
    margin:0 0 16px;
    font-size:42px;
    line-height:1.15;
    color:#102a43;
    font-weight:800;
}

.facilities-heading p{
    margin:0;
    color:#64748b;
    font-size:16px;
    line-height:1.8;
}


/*====================================================
    MAIN WRAPPER
====================================================*/

.facilities-wrapper{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:35px;
    align-items:stretch;
}


/*====================================================
    HIDE RADIO BUTTONS
====================================================*/

.facilities-wrapper > input{
    display:none;
}


/*====================================================
    LEFT MENU
====================================================*/

.facilities-menu{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:15px;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(23,105,170,.10);
    border-radius:24px;
    box-shadow:0 20px 50px rgba(16,42,67,.08);
    backdrop-filter:blur(12px);
}

.facility-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px 18px;
    border-radius:15px;
    cursor:pointer;
    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
    overflow:hidden;
}

.facility-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:#1769aa;
    transform:scaleY(0);
    transition:transform .35s ease;
}

.facility-icon{
    width:48px;
    height:48px;
    min-width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#eef6ff;
    font-size:23px;
    transition:
        transform .4s ease,
        background .35s ease;
}

.facility-name{
    flex:1;
    font-size:15px;
    font-weight:700;
    color:#334e68;
}

.facility-arrow{
    font-size:20px;
    color:#9fb3c8;
    transition:
        transform .35s ease,
        color .35s ease;
}


/*====================================================
    HOVER
====================================================*/

.facility-item:hover{
    background:#f5faff;
    transform:translateX(5px);
}

.facility-item:hover .facility-icon{
    transform:rotate(-8deg) scale(1.1);
}

.facility-item:hover .facility-arrow{
    color:#1769aa;
    transform:translateX(5px);
}


/*====================================================
    ACTIVE MENU ITEM
====================================================*/

#facility-chemistry:checked ~ .facilities-menu
.facility-item:nth-child(1),

#facility-physics:checked ~ .facilities-menu
.facility-item:nth-child(2),

#facility-maths:checked ~ .facilities-menu
.facility-item:nth-child(3),

#facility-library:checked ~ .facilities-menu
.facility-item:nth-child(4),

#facility-smart:checked ~ .facilities-menu
.facility-item:nth-child(5),

#facility-computer:checked ~ .facilities-menu
.facility-item:nth-child(6),

#facility-biology:checked ~ .facilities-menu
.facility-item:nth-child(7),

#facility-remedial:checked ~ .facilities-menu
.facility-item:nth-child(8){
    background:linear-gradient(135deg,#eaf5ff,#f7fbff);
    box-shadow:0 8px 25px rgba(23,105,170,.10);
    transform:translateX(5px);
}

#facility-chemistry:checked ~ .facilities-menu
.facility-item:nth-child(1)::before,

#facility-physics:checked ~ .facilities-menu
.facility-item:nth-child(2)::before,

#facility-maths:checked ~ .facilities-menu
.facility-item:nth-child(3)::before,

#facility-library:checked ~ .facilities-menu
.facility-item:nth-child(4)::before,

#facility-smart:checked ~ .facilities-menu
.facility-item:nth-child(5)::before,

#facility-computer:checked ~ .facilities-menu
.facility-item:nth-child(6)::before,

#facility-biology:checked ~ .facilities-menu
.facility-item:nth-child(7)::before,

#facility-remedial:checked ~ .facilities-menu
.facility-item:nth-child(8)::before{
    transform:scaleY(1);
}

#facility-chemistry:checked ~ .facilities-menu
.facility-item:nth-child(1) .facility-icon,

#facility-physics:checked ~ .facilities-menu
.facility-item:nth-child(2) .facility-icon,

#facility-maths:checked ~ .facilities-menu
.facility-item:nth-child(3) .facility-icon,

#facility-library:checked ~ .facilities-menu
.facility-item:nth-child(4) .facility-icon,

#facility-smart:checked ~ .facilities-menu
.facility-item:nth-child(5) .facility-icon,

#facility-computer:checked ~ .facilities-menu
.facility-item:nth-child(6) .facility-icon,

#facility-biology:checked ~ .facilities-menu
.facility-item:nth-child(7) .facility-icon,

#facility-remedial:checked ~ .facilities-menu
.facility-item:nth-child(8) .facility-icon{
    background:#1769aa;
    animation:facilityIconPulse 1.5s ease-in-out infinite;
}

@keyframes facilityIconPulse{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08) rotate(-4deg);
    }
}


/*====================================================
    RIGHT CONTENT
====================================================*/

.facilities-content{
    position:relative;
    min-height:550px;
    border-radius:28px;
    overflow:hidden;
    background:#102a43;
    box-shadow:0 25px 60px rgba(16,42,67,.15);
}

.facility-content{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:55% 45%;
    opacity:0;
    visibility:hidden;
    transform:translateX(30px);
    transition:
        opacity .5s ease,
        transform .5s ease,
        visibility .5s;
}


/*====================================================
    SHOW CONTENT
====================================================*/

#facility-chemistry:checked ~ .facilities-content
.chemistry-content,

#facility-physics:checked ~ .facilities-content
.physics-content,

#facility-maths:checked ~ .facilities-content
.maths-content,

#facility-library:checked ~ .facilities-content
.library-content,

#facility-smart:checked ~ .facilities-content
.smart-content,

#facility-computer:checked ~ .facilities-content
.computer-content,

#facility-biology:checked ~ .facilities-content
.biology-content,

#facility-remedial:checked ~ .facilities-content
.remedial-content{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}


/*====================================================
    IMAGE
====================================================*/

.facility-image{
    position:relative;
    overflow:hidden;
}

.facility-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            transparent 60%,
            rgba(16,42,67,.25)
        );
}

.facility-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 1s ease;
}

.facility-content:hover .facility-image img{
    transform:scale(1.06);
}


/*====================================================
    INFORMATION
====================================================*/

.facility-info{
    position:relative;
    padding:60px 45px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(43,139,210,.35),
            transparent 45%
        ),
        #102a43;
}

.facility-number{
    font-size:13px;
    letter-spacing:3px;
    font-weight:700;
    color:#7cc4ff;
    margin-bottom:15px;
}

.facility-info h3{
    margin:0 0 20px;
    font-size:34px;
    line-height:1.2;
    font-weight:800;
}

.facility-info p{
    margin:0;
    font-size:15px;
    line-height:1.9;
    color:#d9e8f5;
}

.facility-line{
    width:55px;
    height:3px;
    margin:28px 0 18px;
    background:#43a5e8;
    border-radius:10px;
}

.facility-tag{
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#8fd1ff;
    font-weight:700;
}


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

@media(max-width:1000px){

    .facilities-wrapper{
        grid-template-columns:300px 1fr;
        gap:20px;
    }

    .facility-info{
        padding:40px 30px;
    }

    .facility-info h3{
        font-size:28px;
    }

}


/*====================================================
    TABLET / MOBILE
====================================================*/

@media(max-width:768px){

    .facilities-section{
        padding:75px 0;
    }

    .facilities-container{
        width:92%;
    }

    .facilities-heading{
        margin-bottom:35px;
    }

    .facilities-heading h2{
        font-size:32px;
    }

    .facilities-wrapper{
        display:block;
    }

    .facilities-menu{
        margin-bottom:20px;
        padding:10px;
    }

    .facility-item{
        padding:13px 14px;
    }

    .facility-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:20px;
    }

    .facilities-content{
        min-height:650px;
        border-radius:22px;
    }

    .facility-content{
        grid-template-columns:1fr;
        grid-template-rows:48% 52%;
    }

    .facility-image{
        min-height:280px;
    }

    .facility-info{
        padding:30px 25px;
    }

    .facility-info h3{
        font-size:27px;
    }

}


/*====================================================
    SMALL MOBILE
====================================================*/

@media(max-width:480px){

    .facilities-heading h2{
        font-size:28px;
    }

    .facilities-heading p{
        font-size:14px;
    }

    .facility-name{
        font-size:14px;
    }

    .facility-arrow{
        display:none;
    }

    .facilities-content{
        min-height:680px;
    }

    .facility-content{
        grid-template-rows:42% 58%;
    }

    .facility-info{
        padding:25px 22px;
    }

    .facility-info h3{
        font-size:24px;
    }

    .facility-info p{
        font-size:14px;
        line-height:1.7;
    }

}

  .app-download-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, #0077ff, #00c6ff);
    color: white;
    font-family: 'Segoe UI', sans-serif;
  }

  .container {
    max-width: 1200px;
    margin: auto;
  }

  .content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .text-content {
    flex: 1 1 50%;
    padding: 20px;
  }

  .glow-title {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 5px #ffffff, 0 0 15px #33ccff, 0 0 20px #33ccff;
    margin-bottom: 15px;
  }

  .sub-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #000;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .store-btn img {
    width: 28px;
    height: 28px;
  }

  .store-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  }

  .phone-image {
    flex: 1 1 40%;
    text-align: center;
    padding: 20px;
  }

  .phone-image img {
    max-width: 250px;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @media (max-width: 768px) {
    .content-wrapper {
      flex-direction: column-reverse;
      text-align: center;
    }
    .text-content, .phone-image {
      flex: 1 1 100%;
    }
    .glow-title {
      font-size: 2rem;
    }
  }
/* WhatsApp Floating Button */
.whatsapp-float{
    position:fixed;
    width:58px;
    height:58px;
    right:25px;
    bottom:25px;

    background:#25D366;
    color:#fff;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:32px;
    text-decoration:none;

    box-shadow:0 5px 20px rgba(0,0,0,0.25);

    z-index:9999;
    transition:all .3s ease;
}

/* Hover */
.whatsapp-float:hover{
    background:#20bd5a;
    color:#fff;
    transform:scale(1.08);
}

/* Tooltip */
.whatsapp-tooltip{
    position:absolute;
    right:70px;
    top:50%;
    transform:translateY(-50%);

    background:#222;
    color:#fff;

    padding:9px 14px;
    border-radius:6px;

    font-size:14px;
    font-weight:500;
    white-space:nowrap;

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;

    box-shadow:0 3px 12px rgba(0,0,0,.20);
}

/* Small arrow */
.whatsapp-tooltip:after{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);

    border-width:6px 0 6px 6px;
    border-style:solid;
    border-color:transparent transparent transparent #222;
}

/* Show tooltip */
.whatsapp-float:hover .whatsapp-tooltip{
    opacity:1;
    visibility:visible;
}

/* Mobile */
@media(max-width:767px){

    .whatsapp-float{
        width:52px;
        height:52px;
        right:15px;
        bottom:15px;
        font-size:28px;
    }

    .whatsapp-tooltip{
        right:62px;
        font-size:12px;
        padding:8px 11px;
    }
}


  .app-download-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, #0077ff, #00c6ff);
    color: white;
    font-family: 'Segoe UI', sans-serif;
  }

  .container {
    max-width: 1200px;
    margin: auto;
  }

  .content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .text-content {
    flex: 1 1 50%;
    padding: 20px;
  }

  .glow-title {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 5px #ffffff, 0 0 15px #33ccff, 0 0 20px #33ccff;
    margin-bottom: 15px;
  }

  .sub-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #ffffff;
  }

  .download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #000;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .store-btn img {
    width: 28px;
    height: 28px;
  }

  .store-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  }

  .phone-image {
    flex: 1 1 40%;
    text-align: center;
    padding: 20px;
  }

  .phone-image img {
    max-width: 250px;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @media (max-width: 768px) {
    .content-wrapper {
      flex-direction: column-reverse;
      text-align: center;
    }
    .text-content, .phone-image {
      flex: 1 1 100%;
    }
    .glow-title {
      font-size: 2rem;
    }
  }