/*==================================================
            CASA RUBIO RATES
==================================================*/

.casa-rates{
    position: relative;
    padding:100px 0;
    background:linear-gradient(180deg,#f5f9fc 0%,#ffffff 100%);
    overflow:hidden;
}

/* Decorative Background */

.casa-rates::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(43,71,100,.05);
    border-radius:50%;
    top:-250px;
    right:-180px;
}
.casa-rates::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(43,71,100,.04);
    border-radius:50%;
    bottom:-180px;
    left:-120px;
}
/*======================
      TITLE
======================*/

.casa-title{
    max-width:760px;
    margin:auto;
    margin-bottom:70px;
    position:relative;
    z-index:2;
}

.rate-subtitle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#edf5ff;
    color:#2b4764;
    padding:10px 22px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.casa-title h2{
    font-size:48px;
    font-weight:700;
    color:#2b4764;
    margin-bottom:20px;
}

.casa-title p{
    font-size:17px;
    line-height:1.8;
    color:#6b7280;
}
/*======================
        CARD
======================*/
.rate-card{

    position:relative;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    border:1px solid #edf2f7;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    transition:.35s;

}
.rate-card:hover{

    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);

}

.featured{

    transform:scale(1.03);
    border:2px solid #2b4764;

}
.featured:hover{

    transform:scale(1.03) translateY(-12px);

}
/*======================
       RIBBON
======================*/

.popular-tag{

    position:absolute;
    top:22px;
    right:-55px;

    width:190px;

    padding:8px 0;

    background:#ffb400;

    color:#fff;

    text-align:center;

    transform:rotate(45deg);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    z-index:20;

}
/*======================
       HEADER
======================*/
.rate-header{

    background:linear-gradient(135deg,#24486a,#3d78b5);

    color:#fff;

    text-align:center;

    padding:40px 30px;

}
.rate-icon{

    width:80px;

    height:80px;

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

    border-radius:50%;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}
.rate-icon i{

    font-size:36px;

    color:#fff;

}

.rate-header h3{

    color:#fff;

    margin-bottom:8px;

    font-size:30px;

    font-weight:700;

}

.rate-header small{

    color:rgba(255,255,255,.85);

    font-size:14px;

}
/*======================
      BODY
======================*/
.rate-body{

    padding:35px;

    flex:1;

}
.rate-title{

    color:#24486a;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}
.rate-title i{

    color:#3d78b5;

}
.rate-list{

    list-style:none;

    margin:0;

    padding:0;

}
.rate-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #eef2f6;

}
.rate-list li:last-child{

    border-bottom:none;

}
.rate-list h6{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#2b4764;

}
.rate-list small{

    color:#777;

    font-size:13px;

}
.price-tag{

    min-width:120px;

    text-align:center;

    background:linear-gradient(135deg,#2b4764,#3d78b5);

    color:#fff;

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    font-size:15px;
}

/*======================
    HOLIDAY
======================*/

.holiday-list{

    list-style:none;

    padding:0;

    margin:0;

}

.holiday-list li{

    padding:14px 0;

    border-bottom:1px solid #edf2f6;

    font-size:16px;

}

.holiday-list li:last-child{

    border-bottom:none;

}

.holiday-list i{

    color:#2b4764;

    margin-right:10px;

}

.holiday-price {
    margin-top: 24px; /* Maliit na agwat mula sa listahan ng holidays */
    background: linear-gradient(135deg, #24486a, #3d78b5);
    color: #fff;
    text-align: center;
    padding: 24px 30px; /* Sakto lang na kapal ng inner spacing */
    border-radius: 18px;
}

.holiday-price small{

    color:#dbe7f4;

}

.holiday-price h2{
    color:#fff;

    font-size:44px;

    margin:10px 0 20px;

    font-weight:700;
}
/*======================
      BUTTON
======================*/
.btn-rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #24486a;
    padding: 8px 24px;       /* Binawasan ang vertical padding para mas manipis at compact */
    margin-top: -8px;        /* Inangat nang kaunti paitaas */
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

.btn-rate:hover{

    background:#f3f7fb;

    color:#24486a;

    transform:translateY(-2px);

}

/*======================
      MOBILE
======================*/
@media(max-width:991px){

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-10px);
    }
}
@media(max-width:768px){

    .casa-rates{

        padding:80px 0;

    }
    .casa-title h2{

        font-size:36px;

    }
    .rate-header{

        padding:35px 20px;

    }
    .rate-body{

        padding:25px;

    }
    .holiday-price h2{

        font-size:36px;

    }
    .price-tag{

        min-width:95px;

        font-size:14px;

    }

}