/* =========================================================
   SCHOOL HOUSES
   PREMIUM RESPONSIVE CSS
   Aggarwal Public School
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    --house-primary:#0b2341;
    --house-primary-light:#123b68;

    --house-blue:#008fd4;
    --house-blue-light:#00b8ff;

    --house-gold:#c89b3c;
    --house-gold-light:#f1d17a;

    --house-text:#172033;
    --house-muted:#667085;

    --house-white:#ffffff;
    --house-light:#f5f8fc;

    --house-border:rgba(11,35,65,0.09);

    --house-shadow-sm:
        0 10px 30px rgba(11,35,65,0.08);

    --house-shadow-md:
        0 20px 50px rgba(11,35,65,0.12);

    --house-shadow-lg:
        0 30px 80px rgba(11,35,65,0.17);

    --house-gradient:
        linear-gradient(
            135deg,
            #0b2341 0%,
            #123b68 55%,
            #008fd4 100%
        );

    --house-gold-gradient:
        linear-gradient(
            135deg,
            #c89b3c,
            #f1d17a
        );
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;

    font-family:'Poppins',sans-serif;

    color:var(--house-text);

    background:#ffffff;

    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.houses-container{

    width:min(1180px,92%);

    margin:0 auto;
}


/* =========================================================
   COMMON LABEL
========================================================= */

.houses-label{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:8px 15px;

    border-radius:30px;

    background:
        rgba(11,35,65,0.06);

    color:var(--house-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

    margin-bottom:18px;
}

.houses-label i{

    color:var(--house-gold);

    font-size:11px;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.houses-intro{

    position:relative;

    padding:100px 0;

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(0,168,255,0.09),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 85%,
            rgba(200,155,60,0.10),
            transparent 30%
        ),

        #ffffff;

    overflow:hidden;
}


/* Background circles */

.houses-bg-circle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;
}

.houses-circle-one{

    width:450px;
    height:450px;

    border:1px solid
        rgba(11,35,65,0.06);

    left:-220px;
    top:-220px;
}

.houses-circle-two{

    width:300px;
    height:300px;

    border:1px solid
        rgba(200,155,60,0.13);

    right:-150px;
    bottom:-150px;
}


/* Intro grid */

.houses-intro .houses-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items:center;

    gap:80px;
}


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

.houses-intro-image{

    position:relative;
}

.houses-image-frame{

    position:relative;

    padding:13px;

    border-radius:28px;

    background:
        rgba(255,255,255,0.86);

    box-shadow:
        var(--house-shadow-lg);
}

.houses-image-frame::before{

    content:"";

    position:absolute;

    width:115px;
    height:115px;

    left:-25px;
    bottom:-25px;

    border-radius:24px;

    background:
        var(--house-gold-gradient);

    z-index:-1;

    opacity:.85;
}

.houses-image-frame::after{

    content:"";

    position:absolute;

    width:85px;
    height:85px;

    right:-35px;
    top:-35px;

    border-radius:50%;

    border:13px solid
        rgba(0,143,212,0.12);
}

.houses-image-frame img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:20px;
}


/* =========================================================
   FLOATING CARD
========================================================= */

.houses-floating-card{

    position:absolute;

    right:-35px;
    bottom:45px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 19px;

    background:
        rgba(255,255,255,0.95);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border:1px solid
        rgba(255,255,255,0.90);

    border-radius:17px;

    box-shadow:
        var(--house-shadow-md);

    z-index:5;

    animation:
        housesFloat 4s ease-in-out infinite;
}

.floating-icon{

    width:43px;
    height:43px;

    display:flex;

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

    border-radius:12px;

    background:
        rgba(0,143,212,0.10);

    color:var(--house-blue);

    font-size:18px;
}

.houses-floating-card strong{

    display:block;

    color:var(--house-primary);

    font-size:12px;

    font-weight:700;

    margin-bottom:2px;
}

.houses-floating-card span{

    display:block;

    color:var(--house-muted);

    font-size:9px;

    font-weight:500;
}

@keyframes housesFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}


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

.houses-intro-content{

    max-width:680px;
}

.houses-intro-content h1{

    color:var(--house-primary);

    font-size:
        clamp(38px,4.5vw,60px);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1.5px;

    margin-bottom:23px;
}

.houses-intro-content h1 span{

    display:block;

    background:
        linear-gradient(
            135deg,
            #008fd4,
            #00b8ff
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.houses-intro-content > p{

    color:var(--house-muted);

    font-size:15px;

    line-height:1.9;

    margin-bottom:15px;
}


/* =========================================================
   INTRO POINTS
========================================================= */

.house-intro-points{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:11px;

    margin-top:27px;
}

.house-point{

    min-height:100px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:13px 7px;

    background:#ffffff;

    border:1px solid
        var(--house-border);

    border-radius:16px;

    box-shadow:
        var(--house-shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.house-point:hover{

    transform:translateY(-7px);

    box-shadow:
        var(--house-shadow-md);

    border-color:
        rgba(0,143,212,0.25);
}

.house-point i{

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:12px;

    background:
        rgba(0,143,212,0.10);

    color:var(--house-blue);

    font-size:16px;

    margin-bottom:8px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.house-point:hover i{

    transform:
        scale(1.08)
        rotate(-5deg);

    background:
        var(--house-gradient);

    color:#ffffff;
}

.house-point span{

    color:#344054;

    font-size:10px;

    font-weight:600;

    line-height:1.4;
}


/* =========================================================
   FOUR HOUSES SECTION
========================================================= */

.four-houses{

    position:relative;

    padding:105px 0;

    background:
        linear-gradient(
            180deg,
            #f6f9fd 0%,
            #ffffff 100%
        );
}

.houses-heading{

    max-width:780px;

    margin:0 auto 55px;

    text-align:center;
}

.houses-heading h2{

    color:var(--house-primary);

    font-size:
        clamp(32px,4vw,48px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:16px;
}

.houses-heading h2 span{

    color:var(--house-blue);
}

.houses-heading p{

    color:var(--house-muted);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   HOUSES GRID
========================================================= */

.houses-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;
}


/* =========================================================
   HOUSE CARD
========================================================= */

.house-card{

    position:relative;

    min-height:345px;

    padding:30px 23px;

    background:#ffffff;

    border:1px solid
        var(--house-border);

    border-radius:23px;

    box-shadow:
        var(--house-shadow-sm);

    overflow:hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.house-card::before{

    content:"";

    position:absolute;

    width:190px;
    height:190px;

    border-radius:50%;

    right:-95px;
    top:-95px;

    background:
        rgba(0,143,212,0.06);

    transition:
        transform .5s ease;
}

.house-card::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:4px;

    background:
        var(--house-gradient);

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform .45s ease;
}

.house-card:hover{

    transform:
        translateY(-11px);

    box-shadow:
        var(--house-shadow-lg);

    border-color:
        rgba(0,143,212,0.20);
}

.house-card:hover::before{

    transform:
        scale(1.45);
}

.house-card:hover::after{

    transform:
        scaleX(1);
}


/* =========================================================
   HOUSE COLOR ACCENTS
========================================================= */

.house-card.aravali::after{

    background:
        linear-gradient(
            90deg,
            #8b4513,
            #d79a55
        );
}

.house-card.himalaya::after{

    background:
        linear-gradient(
            90deg,
            #008fd4,
            #00c6ff
        );
}

.house-card.nilgiri::after{

    background:
        linear-gradient(
            90deg,
            #239b56,
            #63d471
        );
}

.house-card.shivalik::after{

    background:
        linear-gradient(
            90deg,
            #7b4ab5,
            #b77de8
        );
}


/* =========================================================
   HOUSE CARD TOP
========================================================= */

.house-card-top{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;
}

.house-icon{

    width:62px;
    height:62px;

    display:flex;

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

    border-radius:18px;

    background:
        rgba(0,143,212,0.10);

    color:var(--house-blue);

    font-size:23px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.house-card:hover .house-icon{

    transform:
        rotate(-7deg)
        scale(1.08);

    background:
        var(--house-gradient);

    color:#ffffff;
}

.house-number{

    color:
        rgba(11,35,65,0.08);

    font-size:45px;

    font-weight:800;

    line-height:1;
}


/* =========================================================
   HOUSE CARD CONTENT
========================================================= */

.house-card h3{

    position:relative;

    z-index:2;

    color:var(--house-primary);

    font-size:19px;

    font-weight:700;

    margin-bottom:12px;
}

.house-card p{

    position:relative;

    z-index:2;

    color:var(--house-muted);

    font-size:12px;

    line-height:1.8;
}


/* =========================================================
   HOUSE CARD FOOTER
========================================================= */

.house-card-footer{

    position:absolute;

    left:23px;
    right:23px;
    bottom:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:16px;

    border-top:
        1px solid
        rgba(11,35,65,0.07);
}

.house-card-footer span{

    color:var(--house-primary);

    font-size:10px;

    font-weight:600;
}

.house-card-footer span i{

    color:var(--house-blue);

    margin-right:5px;
}

.house-card-footer > i{

    color:
        rgba(11,35,65,0.35);

    font-size:12px;

    transition:
        transform .3s ease,
        color .3s ease;
}

.house-card:hover
.house-card-footer > i{

    transform:translateX(5px);

    color:var(--house-blue);
}


/* =========================================================
   MEMBERSHIP SECTION
========================================================= */

.house-membership{

    padding:110px 0;

    background:#ffffff;
}

.membership-grid{

    display:grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items:center;

    gap:80px;
}


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

.membership-image{

    position:relative;
}

.membership-image-frame{

    position:relative;
}

.membership-image-frame::before{

    content:"";

    position:absolute;

    width:85%;
    height:85%;

    right:-25px;
    bottom:-25px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(0,143,212,0.13),
            rgba(200,155,60,0.12)
        );

    z-index:0;
}

.membership-image-frame img{

    position:relative;

    z-index:1;

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:27px;

    box-shadow:
        var(--house-shadow-lg);
}


/* =========================================================
   MEMBERSHIP BADGE
========================================================= */

.membership-badge{

    position:absolute;

    z-index:4;

    left:-25px;
    bottom:35px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:14px 18px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:
        var(--house-shadow-md);
}

.membership-badge i{

    color:var(--house-gold);

    font-size:20px;
}

.membership-badge span{

    color:var(--house-primary);

    font-size:10px;

    font-weight:700;

    line-height:1.5;
}


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

.membership-content{

    max-width:650px;
}

.membership-content h2{

    color:var(--house-primary);

    font-size:
        clamp(32px,4vw,47px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:18px;
}

.membership-content h2 span{

    display:block;

    color:var(--house-blue);
}

.membership-content > p{

    color:var(--house-muted);

    font-size:14px;

    line-height:1.9;

    margin-bottom:14px;
}


/* =========================================================
   MEMBERSHIP FEATURES
========================================================= */

.membership-features{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:25px;
}

.membership-feature{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:14px 15px;

    background:#f8fafc;

    border:
        1px solid
        rgba(11,35,65,0.06);

    border-radius:14px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.membership-feature:hover{

    transform:
        translateX(7px);

    background:#f1f8fc;
}

.membership-feature > i{

    flex:0 0 40px;

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:12px;

    background:
        rgba(0,143,212,0.10);

    color:var(--house-blue);

    font-size:16px;
}

.membership-feature strong{

    display:block;

    color:var(--house-primary);

    font-size:13px;

    margin-bottom:3px;
}

.membership-feature span{

    display:block;

    color:var(--house-muted);

    font-size:10px;

    line-height:1.6;
}


/* =========================================================
   HOUSE INCHARGES
========================================================= */

.house-incharges{

    padding:105px 0;

    background:
        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        );
}

.incharges-heading{

    max-width:780px;

    margin:0 auto 55px;

    text-align:center;
}

.incharges-heading h2{

    color:var(--house-primary);

    font-size:
        clamp(32px,4vw,47px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:15px;
}

.incharges-heading h2 span{

    color:var(--house-blue);
}

.incharges-heading p{

    color:var(--house-muted);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   INCHARGE GRID
========================================================= */

.incharge-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;
}

.incharge-card{

    position:relative;

    text-align:center;

    padding:31px 19px;

    background:#ffffff;

    border:
        1px solid
        var(--house-border);

    border-radius:21px;

    box-shadow:
        var(--house-shadow-sm);

    overflow:hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.incharge-card::before{

    content:"";

    position:absolute;

    width:130px;
    height:130px;

    border-radius:50%;

    right:-65px;
    top:-65px;

    background:
        rgba(0,143,212,0.055);

    transition:
        transform .5s ease;
}

.incharge-card:hover{

    transform:
        translateY(-9px);

    box-shadow:
        var(--house-shadow-md);

    border-color:
        rgba(0,143,212,0.20);
}

.incharge-card:hover::before{

    transform:scale(1.5);
}

.incharge-icon{

    position:relative;

    z-index:1;

    width:62px;
    height:62px;

    display:flex;

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

    margin:0 auto 17px;

    border-radius:18px;

    background:
        rgba(0,143,212,0.10);

    color:var(--house-blue);

    font-size:22px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.incharge-card:hover .incharge-icon{

    transform:
        scale(1.08)
        rotate(5deg);

    background:
        var(--house-gradient);

    color:#ffffff;
}

.incharge-card h3{

    position:relative;

    z-index:1;

    color:var(--house-primary);

    font-size:17px;

    margin-bottom:9px;
}

.incharge-card p{

    position:relative;

    z-index:1;

    color:var(--house-muted);

    font-size:11px;

    line-height:1.7;
}


/* =========================================================
   COMPETITIONS SECTION
========================================================= */

.house-competitions{

    position:relative;

    padding:110px 0;

    background:
        linear-gradient(
            135deg,
            #0b2341 0%,
            #123b68 55%,
            #0b2341 100%
        );

    overflow:hidden;
}

.competition-glow{

    position:absolute;

    border-radius:50%;

    pointer-events:none;
}

.competition-glow-one{

    width:480px;
    height:480px;

    left:-230px;
    top:-240px;

    background:
        rgba(0,143,212,0.14);

    filter:blur(4px);
}

.competition-glow-two{

    width:380px;
    height:380px;

    right:-180px;
    bottom:-200px;

    background:
        rgba(200,155,60,0.12);

    filter:blur(4px);
}

.competition-heading{

    position:relative;

    z-index:2;

    max-width:780px;

    margin:0 auto 55px;

    text-align:center;
}

.house-competitions .houses-label{

    color:#ffffff;

    background:
        rgba(255,255,255,0.08);
}

.competition-heading h2{

    color:#ffffff;

    font-size:
        clamp(32px,4vw,48px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:16px;
}

.competition-heading h2 span{

    display:block;

    color:var(--house-gold-light);
}

.competition-heading p{

    color:
        rgba(255,255,255,0.68);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   COMPETITION GRID
========================================================= */

.competition-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.competition-card{

    padding:30px 19px;

    text-align:center;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius:20px;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease;
}

.competition-card:hover{

    transform:
        translateY(-9px);

    background:
        rgba(255,255,255,0.10);

    border-color:
        rgba(255,255,255,0.20);
}

.competition-icon{

    width:62px;
    height:62px;

    display:flex;

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

    margin:0 auto 17px;

    border-radius:18px;

    background:
        rgba(255,255,255,0.09);

    color:var(--house-gold-light);

    font-size:23px;

    transition:
        transform .4s ease,
        background .4s ease;
}

.competition-card:hover
.competition-icon{

    transform:
        scale(1.08)
        rotate(-5deg);

    background:
        var(--house-gold-gradient);

    color:var(--house-primary);
}

.competition-card h3{

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    margin-bottom:9px;
}

.competition-card p{

    color:
        rgba(255,255,255,0.60);

    font-size:10.5px;

    line-height:1.7;
}


/* =========================================================
   HOUSE VALUES
========================================================= */

.house-values{

    padding:105px 0;

    background:#ffffff;
}

.values-heading{

    max-width:760px;

    margin:0 auto 50px;

    text-align:center;
}

.values-heading h2{

    color:var(--house-primary);

    font-size:
        clamp(32px,4vw,47px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:15px;
}

.values-heading h2 span{

    color:var(--house-blue);
}

.values-heading p{

    color:var(--house-muted);

    font-size:13px;

    line-height:1.8;
}


/* =========================================================
   VALUES GRID
========================================================= */

.values-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;
}

.value-box{

    position:relative;

    text-align:center;

    padding:30px 15px;

    border-radius:20px;

    background:
        #f8fafc;

    border:
        1px solid
        rgba(11,35,65,0.06);

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

.value-box:hover{

    transform:
        translateY(-8px);

    background:#ffffff;

    box-shadow:
        var(--house-shadow-md);
}

.value-icon{

    width:60px;
    height:60px;

    display:flex;

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

    margin:0 auto 16px;

    border-radius:17px;

    background:
        rgba(0,143,212,0.10);

    color:var(--house-blue);

    font-size:21px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.value-box:hover .value-icon{

    transform:
        scale(1.08);

    background:
        var(--house-gradient);

    color:#ffffff;
}

.value-box h3{

    color:var(--house-primary);

    font-size:16px;

    margin-bottom:7px;
}

.value-box p{

    color:var(--house-muted);

    font-size:10px;

    line-height:1.7;
}


/* =========================================================
   GALLERY
========================================================= */

.houses-gallery{

    padding:105px 0;

    background:#f7f9fc;
}

.gallery-heading{

    max-width:760px;

    margin:0 auto 50px;

    text-align:center;
}

.gallery-heading h2{

    color:var(--house-primary);

    font-size:
        clamp(32px,4vw,47px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:15px;
}

.gallery-heading h2 span{

    color:var(--house-blue);
}

.gallery-heading p{

    color:var(--house-muted);

    font-size:13px;

    line-height:1.8;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.houses-gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    grid-auto-rows:230px;

    gap:17px;
}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:21px;

    background:#e7edf4;

    box-shadow:
        var(--house-shadow-sm);
}

.gallery-item.gallery-large{

    grid-column:span 2;

    grid-row:span 2;
}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s
        cubic-bezier(.2,.7,.2,1),

        filter .5s ease;
}

.gallery-item:hover img{

    transform:
        scale(1.09);

    filter:
        brightness(.72);
}


/* =========================================================
   GALLERY OVERLAY
========================================================= */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:22px;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,0.78)
        );

    opacity:0;

    transition:
        opacity .4s ease;
}

.gallery-item:hover
.gallery-overlay{

    opacity:1;
}

.gallery-overlay span{

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    transform:
        translateY(12px);

    transition:
        transform .4s ease;
}

.gallery-item:hover
.gallery-overlay span{

    transform:
        translateY(0);
}


/* =========================================================
   CTA
========================================================= */

.houses-cta{

    position:relative;

    padding:110px 0;

    background:
        linear-gradient(
            135deg,
            #0b2341,
            #123b68
        );

    overflow:hidden;
}

.cta-glow{

    position:absolute;

    width:520px;
    height:520px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        rgba(0,143,212,0.12);

    filter:blur(12px);
}

.houses-cta-content{

    position:relative;

    z-index:2;

    max-width:820px;

    margin:0 auto;

    text-align:center;
}

.houses-cta .houses-label{

    color:#ffffff;

    background:
        rgba(255,255,255,0.08);
}

.houses-cta-content h2{

    color:#ffffff;

    font-size:
        clamp(32px,4vw,49px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:18px;
}

.houses-cta-content h2 span{

    display:block;

    color:var(--house-gold-light);
}

.houses-cta-content p{

    max-width:680px;

    margin:0 auto 30px;

    color:
        rgba(255,255,255,0.68);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.houses-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:195px;

    padding:14px 25px;

    border-radius:50px;

    background:
        var(--house-gold-gradient);

    color:var(--house-primary);

    font-size:12px;

    font-weight:700;

    box-shadow:
        0 14px 35px
        rgba(200,155,60,0.25);

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

.houses-cta-button:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(200,155,60,0.36);
}

.houses-cta-button i{

    transition:
        transform .3s ease;
}

.houses-cta-button:hover i{

    transform:
        translateX(5px);
}


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

@media(max-width:1100px){

    .houses-intro .houses-container{

        gap:55px;
    }

    .houses-image-frame img{

        height:430px;
    }

    .houses-floating-card{

        right:-20px;
    }

    .houses-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .membership-grid{

        gap:55px;
    }

    .membership-image-frame img{

        height:430px;
    }

    .incharge-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .competition-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .values-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .houses-gallery-grid{

        grid-auto-rows:210px;
    }

}


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

@media(max-width:900px){

    .houses-intro .houses-container{

        grid-template-columns:1fr;

        gap:55px;
    }

    .houses-intro-image{

        width:100%;

        max-width:650px;

        margin:0 auto;
    }

    .houses-intro-content{

        max-width:750px;

        margin:0 auto;
    }

    .houses-intro-content h1{

        font-size:47px;
    }


    .membership-grid{

        grid-template-columns:1fr;

        gap:55px;
    }

    .membership-image{

        width:100%;

        max-width:650px;

        margin:0 auto;
    }

    .membership-content{

        max-width:750px;

        margin:0 auto;
    }


    .houses-gallery-grid{

        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows:240px;
    }

}


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

@media(max-width:600px){

    .houses-container{

        width:90%;
    }


    /* INTRO */

    .houses-intro{

        padding:60px 0 75px;
    }

    .houses-intro .houses-container{

        gap:42px;
    }

    .houses-image-frame{

        padding:9px;

        border-radius:20px;
    }

    .houses-image-frame img{

        height:340px;

        border-radius:15px;
    }

    .houses-image-frame::before{

        width:75px;
        height:75px;

        left:-14px;
        bottom:-14px;

        border-radius:15px;
    }

    .houses-image-frame::after{

        width:55px;
        height:55px;

        right:-19px;
        top:-19px;

        border-width:9px;
    }


    /* FLOATING CARD */

    .houses-floating-card{

        right:10px;
        bottom:17px;

        padding:10px 12px;

        border-radius:13px;

        gap:8px;
    }

    .floating-icon{

        width:34px;
        height:34px;

        border-radius:9px;

        font-size:14px;
    }

    .houses-floating-card strong{

        font-size:9px;
    }

    .houses-floating-card span{

        font-size:7px;
    }


    /* LABEL */

    .houses-label{

        padding:7px 12px;

        font-size:9px;

        letter-spacing:1px;

        margin-bottom:14px;
    }


    /* INTRO CONTENT */

    .houses-intro-content h1{

        font-size:34px;

        letter-spacing:-.7px;

        line-height:1.15;

        margin-bottom:18px;
    }

    .houses-intro-content > p{

        font-size:12.5px;

        line-height:1.8;
    }


    /* INTRO POINTS */

    .house-intro-points{

        grid-template-columns:
            repeat(2,1fr);

        gap:10px;

        margin-top:23px;
    }

    .house-point{

        min-height:88px;

        padding:11px 6px;
    }

    .house-point i{

        width:34px;
        height:34px;

        font-size:13px;

        border-radius:10px;
    }

    .house-point span{

        font-size:9px;
    }


    /* FOUR HOUSES */

    .four-houses{

        padding:72px 0;
    }

    .houses-heading{

        margin-bottom:35px;
    }

    .houses-heading h2{

        font-size:30px;
    }

    .houses-heading p{

        font-size:12px;

        line-height:1.75;
    }

    .houses-grid{

        grid-template-columns:1fr;

        gap:15px;
    }

    .house-card{

        min-height:285px;

        padding:27px 21px;

        border-radius:19px;
    }

    .house-card-top{

        margin-bottom:21px;
    }

    .house-icon{

        width:54px;
        height:54px;

        border-radius:15px;

        font-size:19px;
    }

    .house-number{

        font-size:39px;
    }

    .house-card h3{

        font-size:17px;
    }

    .house-card p{

        font-size:11.5px;

        line-height:1.75;
    }

    .house-card-footer{

        left:21px;
        right:21px;
        bottom:20px;

        padding-top:13px;
    }

    .house-card-footer span{

        font-size:9px;
    }


    /* MEMBERSHIP */

    .house-membership{

        padding:75px 0;
    }

    .membership-grid{

        gap:40px;
    }

    .membership-image-frame img{

        height:340px;

        border-radius:20px;
    }

    .membership-image-frame::before{

        right:-12px;
        bottom:-12px;

        border-radius:24px;
    }

    .membership-badge{

        left:12px;
        bottom:17px;

        padding:10px 13px;

        border-radius:11px;
    }

    .membership-badge i{

        font-size:15px;
    }

    .membership-badge span{

        font-size:8px;
    }

    .membership-content h2{

        font-size:30px;
    }

    .membership-content > p{

        font-size:12px;

        line-height:1.8;
    }

    .membership-features{

        gap:9px;

        margin-top:20px;
    }

    .membership-feature{

        padding:11px 12px;

        gap:10px;
    }

    .membership-feature > i{

        flex-basis:34px;

        width:34px;
        height:34px;

        border-radius:9px;

        font-size:13px;
    }

    .membership-feature strong{

        font-size:11px;
    }

    .membership-feature span{

        font-size:8.5px;
    }


    /* INCHARGES */

    .house-incharges{

        padding:75px 0;
    }

    .incharges-heading{

        margin-bottom:35px;
    }

    .incharges-heading h2{

        font-size:30px;
    }

    .incharges-heading p{

        font-size:12px;

        line-height:1.75;
    }

    .incharge-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:11px;
    }

    .incharge-card{

        padding:23px 10px;

        border-radius:16px;
    }

    .incharge-icon{

        width:50px;
        height:50px;

        border-radius:14px;

        font-size:18px;

        margin-bottom:13px;
    }

    .incharge-card h3{

        font-size:13px;
    }

    .incharge-card p{

        font-size:9px;

        line-height:1.65;
    }


    /* COMPETITIONS */

    .house-competitions{

        padding:75px 0;
    }

    .competition-heading{

        margin-bottom:35px;
    }

    .competition-heading h2{

        font-size:30px;
    }

    .competition-heading p{

        font-size:12px;

        line-height:1.75;
    }

    .competition-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:11px;
    }

    .competition-card{

        padding:23px 10px;

        border-radius:16px;
    }

    .competition-icon{

        width:50px;
        height:50px;

        border-radius:14px;

        font-size:18px;

        margin-bottom:13px;
    }

    .competition-card h3{

        font-size:13px;
    }

    .competition-card p{

        font-size:8.8px;

        line-height:1.65;
    }


    /* VALUES */

    .house-values{

        padding:75px 0;
    }

    .values-heading{

        margin-bottom:35px;
    }

    .values-heading h2{

        font-size:30px;
    }

    .values-heading p{

        font-size:11.5px;

        line-height:1.75;
    }

    .values-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:10px;
    }

    .value-box{

        padding:23px 9px;

        border-radius:16px;
    }

    .value-icon{

        width:50px;
        height:50px;

        border-radius:14px;

        font-size:18px;

        margin-bottom:12px;
    }

    .value-box h3{

        font-size:13px;
    }

    .value-box p{

        font-size:8.8px;
    }


    /* GALLERY */

    .houses-gallery{

        padding:75px 0;
    }

    .gallery-heading{

        margin-bottom:35px;
    }

    .gallery-heading h2{

        font-size:30px;
    }

    .gallery-heading p{

        font-size:11.5px;
    }

    .houses-gallery-grid{

        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows:155px;

        gap:9px;
    }

    .gallery-item{

        border-radius:13px;
    }

    .gallery-item.gallery-large{

        grid-column:span 2;

        grid-row:span 2;
    }

    .gallery-overlay{

        padding:13px;
    }

    .gallery-overlay span{

        font-size:10px;
    }


    /* CTA */

    .houses-cta{

        padding:75px 0;
    }

    .houses-cta-content h2{

        font-size:30px;
    }

    .houses-cta-content p{

        font-size:12px;

        line-height:1.75;
    }

    .houses-cta-button{

        min-width:170px;

        padding:13px 19px;

        font-size:10.5px;
    }

}


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

@media(max-width:380px){

    .houses-container{

        width:92%;
    }

    .houses-image-frame img{

        height:290px;
    }

    .houses-intro-content h1{

        font-size:29px;
    }

    .houses-heading h2,
    .membership-content h2,
    .incharges-heading h2,
    .competition-heading h2,
    .values-heading h2,
    .gallery-heading h2,
    .houses-cta-content h2{

        font-size:27px;
    }

    .house-intro-points{

        gap:8px;
    }

    .house-point{

        min-height:80px;
    }

    .house-card{

        min-height:275px;
    }

    .membership-image-frame img{

        height:290px;
    }

    .houses-gallery-grid{

        grid-auto-rows:130px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }
}