
/* =========================================================
   PREMIUM PRICE OFFER PAGE
   Keeps the main site design intact and scopes new styles
   to the Price Offer page.
========================================================= */

.price-offer-nav{
    color:#f59e0b !important;
}

.min-vh-60{min-height:60vh;}

.offer-hero{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:#082c4c;
}
.offer-hero-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(4,28,50,.94) 0%,rgba(4,28,50,.72) 48%,rgba(4,28,50,.20) 100%),
        url('../images/header-1.png') center/cover no-repeat;
    transform:scale(1.03);
    animation:offerZoom 12s ease-in-out infinite alternate;
}
.offer-hero-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 50%,rgba(245,158,11,.18),transparent 32%);
}
.offer-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#ffd166;
    font-weight:800;
    letter-spacing:2.5px;
    font-size:14px;
    margin-bottom:18px;
}
.offer-hero h1{
    color:#fff;
    font-size:clamp(42px,5.2vw,76px);
    line-height:1.08;
    font-weight:800;
    margin-bottom:22px;
}
.offer-hero h1 span{color:#ffc107;}
.offer-hero p{
    max-width:700px;
    color:rgba(255,255,255,.86);
    font-size:18px;
    line-height:1.8;
}
.offer-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:30px;
}
.offer-hero-actions .btn{
    border-radius:10px;
    padding:13px 27px;
}
.offer-badge-card{
    width:250px;
    height:250px;
    margin:0 auto;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(10px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
    animation:floatOffer 4s ease-in-out infinite;
}
.offer-badge-card .badge-icon{
    color:#ffd166;
    font-size:30px;
    margin-bottom:2px;
}
.offer-badge-card small{
    font-size:11px;
    font-weight:800;
    letter-spacing:3px;
    color:#fff;
}
.offer-badge-card strong{
    color:#fff;
    font-size:31px;
    line-height:.95;
    margin:8px 0;
}
.offer-badge-card span{
    color:#ffd166;
    font-weight:800;
    letter-spacing:4px;
}

.offer-strip{
    background:#0b376b;
    padding:0;
}
.strip-item{
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#fff;
    font-weight:600;
    border-right:1px solid rgba(255,255,255,.12);
}
.strip-item i{
    color:#ffc107;
    font-size:21px;
}

.price-offer-section{
    background:#f7f9fc;
    padding:90px 0;
}
.offer-heading{
    margin-bottom:55px;
}
.section-kicker{
    display:inline-block;
    color:#f59e0b;
    font-size:14px;
    font-weight:800;
    letter-spacing:2.5px;
    margin-bottom:10px;
}
.offer-heading h2,
.offer-benefits h2{
    color:#0b376b;
    font-size:clamp(32px,4vw,46px);
    font-weight:800;
    margin-bottom:12px;
}
.offer-heading p{
    color:#64748b;
    font-size:16px;
}

.price-card{
    height:100%;
    position:relative;
    background:#fff;
    border:1px solid #e7ebf0;
    border-radius:20px;
    padding:38px 30px 30px;
    text-align:center;
    box-shadow:0 10px 30px rgba(15,23,42,.07);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
    overflow:hidden;
}
.price-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(15,23,42,.13);
    border-color:#f5b942;
}
.price-card.featured{
    border:2px solid #f59e0b;
    transform:translateY(-8px);
}
.price-card.featured:hover{transform:translateY(-15px);}
.offer-ribbon{
    position:absolute;
    top:18px;
    right:-39px;
    width:145px;
    padding:6px 0;
    background:#f59e0b;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    transform:rotate(45deg);
}
.price-icon{
    width:68px;
    height:68px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff8f2;
    color:#16a34a;
    font-size:27px;
}
.price-card.featured .price-icon{
    background:#fff5dc;
    color:#f59e0b;
}
.size-label{
    display:inline-block;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}
.price-card h3{
    color:#0b376b;
    font-size:23px;
    margin:9px 0 13px;
}
.price{
    color:#16a34a;
    font-size:49px;
    line-height:1;
    font-weight:800;
}
.price span{font-size:24px;vertical-align:top;}
.price small{
    font-size:18px;
    color:#64748b;
    font-weight:700;
}
.price-divider{
    height:1px;
    background:#e9edf2;
    margin:25px 0 19px;
}
.price-card ul{
    padding:0;
    margin:0 0 24px;
    text-align:left;
}
.price-card li{
    display:flex;
    gap:10px;
    color:#64748b;
    font-size:14px;
    margin-bottom:11px;
}
.price-card li i{color:#16a34a;margin-top:5px;}
.price-card .btn{border-radius:9px;}

.offer-benefits{
    padding:95px 0;
    background:#fff;
}
.benefit-image{
    position:relative;
    min-height:390px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
}
.benefit-image img{
    width:100%;
    height:390px;
    object-fit:cover;
}
.image-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:55px 28px 25px;
    color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.78));
}
.image-caption strong{
    display:block;
    font-size:24px;
}
.image-caption span{color:#ffd166;}
.offer-benefits h2{margin-bottom:18px;}
.lead-text{
    color:#64748b;
    line-height:1.85;
    font-size:16px;
}
.benefit-list{margin-top:25px;}
.benefit-list > div{
    display:flex;
    gap:15px;
    align-items:flex-start;
    padding:14px 0;
    border-bottom:1px solid #edf0f4;
}
.benefit-list > div > i{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf8ef;
    color:#16a34a;
}
.benefit-list strong{
    display:block;
    color:#0b376b;
    font-size:16px;
}
.benefit-list small{
    display:block;
    color:#64748b;
    margin-top:2px;
}

.offer-cta{
    padding:0 0 90px;
    background:#fff;
}
.cta-box{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:45px 50px;
    border-radius:24px;
    background:linear-gradient(135deg,#0b376b,#0e558d);
    box-shadow:0 20px 45px rgba(11,55,107,.2);
}
.cta-box:after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    right:-130px;
    top:-150px;
    background:rgba(255,193,7,.12);
}
.cta-box > div{position:relative;z-index:1;}
.cta-box > div:first-child{max-width:720px;}
.cta-box span{
    color:#ffd166;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}
.cta-box h2{
    color:#fff;
    font-size:clamp(28px,3.5vw,43px);
    margin:8px 0;
}
.cta-box p{color:rgba(255,255,255,.78);margin:0;}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.cta-actions .btn{white-space:nowrap;}

@keyframes offerZoom{
    from{transform:scale(1.03);}
    to{transform:scale(1.10);}
}
@keyframes floatOffer{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

@media(max-width:991px){
    .offer-hero{min-height:700px;padding:80px 0;}
    .offer-badge-card{margin:45px auto 0;width:190px;height:190px;}
    .offer-badge-card strong{font-size:25px;}
    .price-card.featured{transform:none;}
    .price-card.featured:hover{transform:translateY(-10px);}
    .cta-box{flex-direction:column;align-items:flex-start;padding:38px 30px;}
}
@media(max-width:767px){
    .offer-hero{min-height:760px;}
    .offer-hero h1{font-size:42px;}
    .offer-hero p{font-size:15px;}
    .offer-hero-actions .btn{width:100%;}
    .strip-item{min-height:76px;font-size:12px;}
    .strip-item i{font-size:17px;}
    .price-offer-section,.offer-benefits{padding:65px 0;}
    .offer-heading{margin-bottom:38px;}
    .price-card{padding:35px 24px 25px;}
    .benefit-image,.benefit-image img{height:290px;min-height:290px;}
    .cta-box h2{font-size:28px;}
    .cta-actions{width:100%;}
    .cta-actions .btn{flex:1;}
}

