/* =======================================
   PATANGE HOSTEL - HOME PAGE CSS
======================================= */

/* Home Page CSS Only */
.home-footer-nav{
    background:#111;
    padding:3px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:9999;
}

.home-footer-nav a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.home-footer-nav a:hover{
    color:#ffc107;
}
.hero{
    background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
    url("../images/pc hero.jpeg");

    background-size:cover;
    background-position:center 100%;
    background-repeat:no-repeat;
    height:calc(100vh - 30px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    padding-bottom:40px;
    text-align:center;
    color:white;
    animation:zoomHero 5s ease-in-out infinite alternate;
}
.hero h1{
    font-size:32px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;

    color:#ffffff;
    text-align:center;
    margin-bottom:10px;
    display:inline-block;
    padding:12px 30px;

    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(8px);

    border:none;
    border-radius:25px;

    text-shadow:
    0 1px 0 #ffffff,
    0 2px 0 #ffe082,
    0 3px 0 #ffca28,
    0 8px 18px rgba(0,0,0,.55);

    box-shadow:
    0 0 20px rgba(255,215,0,.20),
    0 10px 35px rgba(0,0,0,.25);

    animation:goldGlow 3s ease-in-out infinite alternate;
}
.hero p{
    font-size:24px;
    max-width:800px;
    line-height:1.7;
    margin-bottom:20px;
}

.hero .btn{
    background:#16a34a;
    color:#fff;
    padding:15px 35px;
    border-radius:40px;
    text-decoration:none;
    font-size:18px;
    transition:.4s;
}

.hero .btn:hover{
    background:#15803d;
    transform:translateY(-4px);
}
@keyframes zoomHero{

0%{
    background-size:100%;
}

100%{
    background-size:130%;
}

}
@keyframes zoomHeroMobile {

    0% {
        background-size: auto 100%;
    }

    100% {
        background-size: auto 200%;
    }

}
@keyframes goldGlow{

0%{
    box-shadow:
    0 0 15px rgba(255,215,0,.18),
    0 10px 35px rgba(0,0,0,.25);
}

100%{
    box-shadow:
    0 0 30px rgba(255,215,0,.45),
    0 10px 40px rgba(0,0,0,.35);
}

}

.hero-content{
    margin-top:auto;
    margin-bottom:1px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:translateY(70px);
}

.hero-content h1{
    font-size:48px;
    margin-bottom:15px;
}

.btn2{
    background:#28a745;
    margin-left:10px;
}
.features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    padding:60px 20px;
}

.feature-box{
    width:250px;
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    text-align:center;
    transition:0.3s;
}

.feature-box:hover{
    transform:translateY(-8px);
}
.home-page{ overflow: hidden;}
/* =========================================================
   HOME PAGE - MOBILE RESPONSIVE
   Desktop layout remains unchanged
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       Prevent unwanted horizontal overflow
    ----------------------------------------- */

    .home-page {
        overflow-x: hidden;
        overflow-y: auto;
    }


    /* -----------------------------------------
       Hero
    ----------------------------------------- */

    .hero {
        height: calc(100vh - 78px);

        min-height: 560px;

        background-position: center center;

        padding: 0 15px 35px;

        justify-content: flex-end;
    }


    /* -----------------------------------------
       Hero Content
    ----------------------------------------- */

    .hero-content {

        width: 100%;

        margin: 0;

        transform: none;

        padding: 0 5px;
    }


    /* -----------------------------------------
       Main Heading
    ----------------------------------------- */

    .hero-content h1,
    .hero h1 {

        font-size: 28px;

        line-height: 1.2;

        letter-spacing: 1px;

        margin-bottom: 10px;

        padding: 10px 15px;

        max-width: 100%;
    }


    /* -----------------------------------------
       Hero Description
    ----------------------------------------- */

    .hero p {

        font-size: 16px;

        line-height: 1.45;

        max-width: 95%;

        margin-bottom: 15px;
    }


    /* -----------------------------------------
       Hero Buttons
    ----------------------------------------- */

    .hero .btn {

        font-size: 16px;

        padding: 11px 24px;

        border-radius: 30px;

        margin-top: 8px;
    }


    .btn2 {

        margin-left: 5px;
    }


    /* -----------------------------------------
       Bottom Navigation
    ----------------------------------------- */

    .home-footer-nav {

        padding: 5px 4px;

        gap: 2px 0;

        min-height: 58px;

        flex-wrap: wrap;

        align-content: center;
    }


    .home-footer-nav a {

        font-size: 12px;

        margin: 0;

        padding: 4px 8px;

        line-height: 1.2;

        white-space: nowrap;
    }


    /* -----------------------------------------
       Features - if used on Home
    ----------------------------------------- */

    .features {

        padding: 30px 15px;

        gap: 15px;
    }


    .feature-box {

        width: 100%;

        max-width: 340px;

        padding: 18px;
    }

}
/* =========================================
   HOME - MOBILE PORTRAIT ONLY
   Desktop & Landscape remain unchanged
========================================= */

@media (max-width: 600px) and (orientation: portrait) {


    .home-page .hero {
        background-image: url("../images/mobile hero.jpeg");
        background-repeat: no-repeat !important;
        background-position: center center !important;
animation: zoomHeroMobile 5s ease-in-out infinite alternate !important;
    }

}
@media (min-width: 769px) {
    .home-page .hero-content {
        transform: translateY(0);
    }
}