/*====================================
          COMMON PRODUCT HERO
====================================*/

.product-hero{

    background:#f7fbff;
    padding:70px 0 90px;

}

.hero-content{

    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;

}

.hero-badge{

    display:inline-block;
    width:max-content;

    background:#eaf2ff;
    color:#1565ff;

    padding:10px 22px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:22px;

}

.hero-content h1{

    font-size:54px;
    font-weight:800;
    line-height:1.2;

    color:#173a7c;

    margin-bottom:15px;

}

.hero-content h3{

    font-size:28px;
    font-weight:700;

    color:#1565ff;

    margin-bottom:22px;

}

.hero-content p{

    font-size:18px;
    color:#555;

    line-height:1.9;

    text-align:left;

    margin-bottom:25px;

}

.hero-btn{

    display:inline-block;
    width:max-content;

    background:#1565ff;

    color:#fff;

    padding:15px 38px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.hero-btn:hover{

    background:#0d55df;

    color:#fff;

    transform:translateY(-5px);

}

.hero-image{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:650px;

    height:500px;

    object-fit:cover;

    border-radius:30px;

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

    transition:.4s;

}

.hero-image img:hover{

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

    box-shadow:0 30px 60px rgba(21,101,255,.20);

}
@media(max-width:991px){

.product-hero{

    padding:60px 0;

}

.hero-content{

    text-align:center;
    align-items:center;

}

.hero-content h1{

    font-size:40px;

}

.hero-content h3{

    font-size:24px;

}

.hero-content p{

    text-align:center;
    font-size:16px;

}

.hero-image{

    margin-top:40px;
    justify-content:center;

}

.hero-image img{

    max-width:520px;
    height:380px;

}

}


@media (max-width:576px){

.product-hero{
    padding:50px 15px;
}

.hero-content{
    text-align:left;
    align-items:flex-start;
}

.hero-content h1{
    font-size:30px;
}

.hero-content h3{
    font-size:20px;
}

.hero-content p{
    text-align:left;
    font-size:15px;
}

.hero-btn{
    width:100%;
    text-align:center;
}

.hero-image{
    justify-content:center;
    margin-top:30px;
}

.hero-image img{
    width:100%;
    max-width:650px;   /* same maximum size as desktop */
    height:auto;       /* keep original aspect ratio */
    object-fit:contain;
    border-radius:22px;
}

}