/*==================================================
OFFER SECTION
==================================================*/

.offerSection{

    padding:110px 0;

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

    position:relative;

    overflow:hidden;

}

.offerSection::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(139,26,26,.05);

    top:-220px;

    right:-220px;

}

.offerSection::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(214,179,108,.08);

    bottom:-140px;

    left:-140px;

}



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

.offerHeading{

    max-width:760px;

    margin:auto auto 70px;

}

.offerTag{

    display:inline-block;

    color:#8B1A1A;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    position:relative;

    padding-left:60px;

    text-transform:uppercase;

}

.offerTag::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:45px;

    height:2px;

    background:#caa04d;

}

.offerHeading h2{

    margin-top:20px;

    font-size:56px;

    font-family:"Playfair Display",serif;

    color:#222;

}

.offerHeading h2 span{

    color:#8B1A1A;

    font-style:italic;

}

.offerHeading p{

    margin-top:20px;

    color:#666;

    font-size:17px;

    line-height:1.9;

}



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

.offerCard{

    background:#fff;

    border-radius:24px;

    padding:35px;

    height:100%;

    position:relative;

    overflow:hidden;

    border:1px solid #efe5d2;

    box-shadow:

    0 15px 45px rgba(0,0,0,.06);

    transition:.4s;

}

.offerCard:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.12);

}

.offerCard::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(90deg,#d7a63d,#8b1a1a);

}



/*==================================================
TOP
==================================================*/

.offerTop{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.offerTop span{

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

    color:#a57b28;

}



/*==================================================
ICON
==================================================*/

.offerIcon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:26px;

    transition:.4s;

}

.offerCard:hover .offerIcon{

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

}

.red{

    background:linear-gradient(135deg,#a51717,#6f0f0f);

}

.blue{

    background:linear-gradient(135deg,#233b74,#1d2956);

}

.gold{

    background:linear-gradient(135deg,#c89a2b,#9d6f11);

}

.green{

    background:linear-gradient(135deg,#227a4b,#135c36);

}

.purple{

    background:linear-gradient(135deg,#653a91,#47226b);

}

.orange{

    background:linear-gradient(135deg,#cf6d1a,#b44d05);

}



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

.offerCard h3{

    font-size:30px;

    font-family:"Playfair Display",serif;

    color:#222;

    margin-bottom:18px;

}

.offerCard p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;

}



/*==================================================
LIST
==================================================*/

.offerCard ul{

    padding:0;

    margin:0 0 30px;

    list-style:none;

}

.offerCard ul li{

    margin-bottom:12px;

    color:#555;

}

.offerCard ul li::before{

    content:"✓";

    color:#b4871f;

    font-weight:bold;

    margin-right:10px;

}



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

.offerBtn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 26px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.offerBtn i{

    transition:.35s;

}

.offerBtn:hover i{

    transform:translateX(6px);

}

.redBtn{

    background:#8B1A1A;

}

.blueBtn{

    background:#22396d;

}

.goldBtn{

    background:#c38d22;

}

.greenBtn{

    background:#1f7244;

}

.purpleBtn{

    background:#5a3282;

}

.orangeBtn{

    background:#c45f0d;

}

.offerBtn:hover{

    color:#fff;

    opacity:.92;

}
/*==================================================
CARD PREMIUM EFFECT
==================================================*/

.offerCard::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(214,179,108,.8),
        transparent 40%,
        transparent 60%,
        rgba(139,26,26,.35)
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.offerCard:hover::after{

    opacity:1;

}

/*==================================================
TITLE EFFECT
==================================================*/

.offerCard h3{

    transition:.35s;

}

.offerCard:hover h3{

    color:#8B1A1A;

}

/*==================================================
LIST EFFECT
==================================================*/

.offerCard ul li{

    transition:.3s;

}

.offerCard:hover ul li{

    padding-left:6px;

}

/*==================================================
BUTTON EFFECT
==================================================*/

.offerBtn{

    position:relative;

    overflow:hidden;

}

.offerBtn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );

    transition:.6s;

}

.offerBtn:hover::before{

    left:120%;

}

/*==================================================
ICON GLOW
==================================================*/

.offerCard:hover .offerIcon{

    box-shadow:

    0 18px 35px rgba(0,0,0,.15);

}

/*==================================================
CARD ANIMATION
==================================================*/

.offerCard{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(45px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:1200px){

.offerHeading h2{

font-size:48px;

}

.offerCard{

padding:30px;

}

}

@media(max-width:992px){

.offerSection{

padding:90px 0;

}

.offerHeading{

margin-bottom:50px;

}

.offerHeading h2{

font-size:42px;

}

.offerHeading p{

max-width:650px;

margin:auto;

}

}

@media(max-width:768px){

.offerSection{

padding:70px 0;

}

.offerHeading h2{

font-size:34px;

line-height:1.3;

}

.offerHeading p{

font-size:15px;

}

.offerCard{

padding:28px;

}

.offerTop{

gap:14px;

}

.offerIcon{

width:56px;

height:56px;

font-size:22px;

}

.offerCard h3{

font-size:24px;

}

.offerCard p{

font-size:15px;

}

}

@media(max-width:576px){

.offerSection{

padding:60px 0;

}

.offerHeading{

margin-bottom:40px;

}

.offerHeading h2{

font-size:28px;

}

.offerTag{

font-size:11px;

letter-spacing:2px;

padding-left:40px;

}

.offerTag::before{

width:28px;

}

.offerCard{

padding:22px;

border-radius:18px;

}

.offerTop{

flex-direction:column;

align-items:flex-start;

}

.offerIcon{

width:52px;

height:52px;

font-size:20px;

border-radius:14px;

}

.offerCard h3{

font-size:22px;

}

.offerCard ul{

margin-bottom:22px;

}

.offerBtn{

width:100%;

justify-content:center;

padding:15px;

}

}