body{
    font-family:Poppins,sans-serif;
    color:#1f2937;
}

.navbar{
    padding:18px 0;
}

.hero-section{
    padding:100px 0;
    background:
    linear-gradient(
    135deg,
    #fff5f8,
    #ffffff);
}

.hero-section h1{
    font-size:60px;
    line-height:1.2;
}

.card{
    border:none;
    border-radius:20px;
}

.template-card{
    transition:.3s;
}

.template-card:hover{
    transform:translateY(-10px);
}

.btn-primary{
    background:#e91e63;
    border-color:#e91e63;
}

.btn-primary:hover{
    background:#d81b60;
    border-color:#d81b60;
}

.text-danger{
    color:#e91e63 !important;
}

.bg-danger{
    background:#e91e63 !important;
}

section{
    overflow:hidden;
}


.hero-section{
    background:
    linear-gradient(
    135deg,
    #fff7fa,
    #ffffff
    );

    position:relative;
}

.hero-title{

    font-size:64px;

    font-weight:700;

    line-height:1.15;
}

.hero-description{

    font-size:20px;

    color:#6b7280;

    margin-top:25px;
}

.hero-badge{

    background:#ffe3ee;

    color:#e91e63;

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;
}

.text-gradient{

    background:linear-gradient(
    90deg,
    #e91e63,
    #ff6b9d
    );

    -webkit-background-clip:text;

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

.hero-preview{

    position:relative;

    height:600px;
}


.phone-mockup{

    position:absolute;

    top:50%;

    left:50%;

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

    z-index:10;
}

.phone-frame{

    width:300px;

    filter:
    drop-shadow(
    0 30px 50px rgba(0,0,0,.15));
}

.template-card-float{

    position:absolute;

    width:220px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 20px 40px rgba(0,0,0,.1);
}

.card-1{

    top:60px;

    left:20px;

    transform:rotate(-10deg);
}

.card-2{

    bottom:80px;

    right:20px;

    transform:rotate(10deg);
}

.template-card-float img{

    width:100%;

    height:300px;

    object-fit:cover;
}


.template-section{
    background:#ffffff;
}

.section-badge{

    background:#ffe3ee;

    color:#e91e63;

    padding:8px 18px;

    border-radius:999px;

    font-weight:600;
}

.section-title{

    font-size:42px;

    font-weight:700;
}

.btn-filter{

    border-radius:999px;

    padding:10px 20px;

    margin:5px;
}

.btn-filter.active{

    background:#e91e63;

    color:#fff;
}

.template-box{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    transition:.3s;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.template-box:hover{

    transform:translateY(-10px);
}

.template-image{

    position:relative;

    overflow:hidden;
}

.template-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:.4s;
}

.template-box:hover img{

    transform:scale(1.05);
}

.template-overlay{

    position:absolute;

    inset:0;

    background:
    rgba(0,0,0,.4);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.3s;
}

.template-box:hover .template-overlay{

    opacity:1;
}

.template-info{

    padding:20px;
}

.template-category{

    display:inline-block;

    background:#f4f4f4;

    padding:5px 12px;

    border-radius:999px;

    font-size:12px;

    margin-bottom:10px;
}


footer a{
    transition:.3s;
}

footer a:hover{
    color:#ff4d6d !important;
}

footer h5{
    font-weight:600;
}

#pricing .card{
    border-radius:24px;
    transition:.3s;
}

#pricing .card:hover{
    transform:translateY(-8px);
}

#pricing ul li{
    padding:6px 0;
    font-size:15px;
}

#pricing .btn{
    border-radius:12px;
    padding:12px;
    font-weight:600;
}