/* ===================================
HERO SECTION
=================================== */

.pf-hero{

    padding:80px 0;

    background:linear-gradient(135deg,#fff8f2,#ffffff);

    overflow:hidden;

}

.pf-hero-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.pf-hero-content{

    width:50%;

}

.pf-hero-tag{

    display:inline-block;

    background:#fff3e8;

    color:#ff6b00;

    padding:10px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.pf-hero-content h1{

    font-size:62px;

    line-height:1.15;

    font-weight:800;

    color:#222;

    margin-bottom:25px;

}

.pf-hero-content h1 span{

    color:#ff6b00;

}

.pf-hero-content p{

    font-size:18px;

    color:#666;

    line-height:1.8;

    max-width:550px;

    margin-bottom:35px;

}

/* Buttons */

.pf-hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:45px;

}

.pf-btn{

    background:#ff6b00;

    color:#fff;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.pf-btn:hover{

    background:#e65a00;

}

.pf-btn-outline{

    border:2px solid #ff6b00;

    color:#ff6b00;

    padding:16px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.pf-btn-outline:hover{

    background:#ff6b00;

    color:#fff;

}

/* Features */

.pf-hero-features{

    display:flex;

    gap:35px;

}

.pf-feature{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.pf-feature i{

    color:#ff6b00;

    font-size:22px;

}

/* Image */

.pf-hero-image{

    width:50%;

    position:relative;

    text-align:center;

}

.pf-hero-image img{

    width:100%;

    max-width:620px;

    animation:float 4s ease-in-out infinite;

}

/* Floating Cards */

.pf-offer-card{

    position:absolute;

    top:40px;

    right:0;

    background:#ff6b00;

    color:#fff;

    padding:18px 22px;

    border-radius:16px;

    font-weight:700;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.pf-rating-card{

    position:absolute;

    bottom:90px;

    left:0;

    background:#fff;

    padding:18px 25px;

    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    font-weight:700;

}

.pf-customer-card{

    position:absolute;

    bottom:20px;

    right:30px;

    background:#fff;

    padding:18px 25px;

    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    font-weight:700;

}

/* Animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* Responsive */

@media(max-width:991px){

.pf-hero-wrapper{

flex-direction:column;

text-align:center;

}

.pf-hero-content,

.pf-hero-image{

width:100%;

}

.pf-hero-content h1{

font-size:44px;

}

.pf-hero-buttons{

justify-content:center;

}

.pf-hero-features{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:576px){

.pf-hero{

padding:50px 0;

}

.pf-hero-content h1{

font-size:34px;

}

.pf-hero-content p{

font-size:16px;

}

.pf-hero-buttons{

flex-direction:column;

}

.pf-btn,

.pf-btn-outline{

width:100%;

text-align:center;

}

.pf-rating-card,

.pf-offer-card,

.pf-customer-card{

display:none;

}

}
/* ==========================================
PREMIUM HERO
========================================== */

.pf-hero{
    position:relative;
    overflow:hidden;
}

/* Background Circles */

.pf-hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:rgba(255,107,0,.06);

    right:-180px;

    top:-120px;

}

.pf-hero::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(255,107,0,.08);

    left:-120px;

    bottom:-120px;

}

/* Right Image */

.pf-hero-image{

    position:relative;

    z-index:2;

}

.pf-hero-image img{

    border-radius:24px;

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

}

/* Offer */

.pf-offer-card{

    animation:offerFloat 3s ease-in-out infinite;

}

/* Rating */

.pf-rating-card{

    animation:ratingFloat 4s ease-in-out infinite;

}

/* Customer */

.pf-customer-card{

    animation:customerFloat 5s ease-in-out infinite;

}

/* Hero Heading */

.pf-hero-content h1{

    letter-spacing:-2px;

}

/* Description */

.pf-hero-content p{

    max-width:520px;

}

/* Button */

.pf-btn{

    box-shadow:0 15px 35px rgba(255,107,0,.25);

}

.pf-btn:hover{

    transform:translateY(-3px);

}

.pf-btn-outline:hover{

    transform:translateY(-3px);

}

/* Floating Animation */

@keyframes offerFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes ratingFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(8px);

}

100%{

transform:translateY(0);

}

}

@keyframes customerFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
.pf-sale-badge{

    position:absolute;

    top:50%;

    left:-30px;

    background:#fff;

    padding:14px 18px;

    border-radius:12px;

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

    font-weight:700;

    color:#ff6b00;

}

.pf-delivery-badge{

    position:absolute;

    bottom:-10px;

    left:40px;

    background:#fff;

    padding:14px 18px;

    border-radius:12px;

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

    font-weight:600;

}