/* =================================================
        WHY PAGE
==================================================*/

:root{
    --ppp-blue:#0071ba;
    --ppp-blue-dark:#005b96;
    --ppp-green:#6ebf4b;
    --ppp-navy:#002C51;
    --ppp-light:#f8f9fa;
}

body.why-page{
    color:#444;
    line-height:1.8;
    font-size:1.05rem;
    background:#fff;
}

/* =================================================
        SECTION SPACING
==================================================*/

.section-space{
    padding:90px 0;
}

.section-space.bg-light{
    background:#f8f9fa !important;
}

/* =================================================
        SECTION TITLE LINKS
==================================================*/

.section-title-link{

    color:var(--ppp-navy);

    text-decoration:none;

    transition:color .25s ease;

}

.section-title-link:hover,
.section-title-link:focus{

    color:var(--ppp-green);

    text-decoration:none;

}

/* =================================================
        TYPOGRAPHY
==================================================*/

.section-heading{
    margin-bottom:60px;
}

.section-heading h2{

    font-family:'Oswald',sans-serif;
    font-size:3rem;
    color:var(--ppp-navy);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:20px;

}

.section-heading h2::after{

    content:"";
    display:block;

    width:80px;
    height:4px;

    background:var(--ppp-blue);

    margin:18px auto 0;

}

.section-heading .lead{

    max-width:850px;
    margin:30px auto 0;

    font-size:1.3rem;
    color:#666;

}

.why-page p{

    margin-bottom:1.8rem;

}



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

.why-page .hero{

    background:#f8f9fa;

    padding:45px 0;

    border-bottom:6px solid var(--ppp-blue);

    margin-bottom:10px;

}

.why-page .hero h1{

    font-family:'Oswald',sans-serif;

    font-size:2.9rem;

    color:var(--ppp-navy);

    margin-bottom:15px;

    line-height:1.15;

}

.why-page .hero .lead{

    font-size:1.15rem;

    color:#555;

    margin-bottom:20px;

    line-height:1.6;

}

.why-page .hero p{

    margin-bottom:20px;

}

.why-page .hero img{

    width:100%;

    max-height:320px;

    object-fit:cover;

    border-radius:0px;

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

}

/* =================================================
        BUTTONS
==================================================*/

body.why-page .btn.btn-primary{

    background-color: var(--ppp-blue) !important;
    border-color: var(--ppp-blue) !important;
    color:#fff !important;

}

body.why-page .btn.btn-primary:hover,
body.why-page .btn.btn-primary:focus{

    background-color: var(--ppp-green) !important;
    border-color: var(--ppp-green) !important;
    color:#fff !important;

}

body.why-page .btn.btn-outline-light{

    background:transparent !important;
    border:2px solid #fff !important;
    color:#fff !important;

}

body.why-page .btn.btn-outline-light:hover,
body.why-page .btn.btn-outline-light:focus{

    background:var(--ppp-green) !important;
    border-color:var(--ppp-green) !important;
    color:#fff !important;

}

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

/* Quote */

.quote-block{

    max-width:900px;

    margin:60px auto;

    padding:40px 50px;

    background:#f8f9fa;

    border-left:6px solid var(--ppp-blue);

    font-size:1.65rem;

    line-height:1.6;

    font-style:italic;

    color:var(--ppp-navy);

    text-align:center;

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

    position:relative;

}

.quote-block::before{

    content:"“";

    position:absolute;

    left:25px;
    top:-15px;

    font-size:5rem;

    color:rgba(0,113,186,.18);

    font-family:Georgia,serif;

}

.quote-block::after{

    content:"”";

    position:absolute;

    right:25px;
    bottom:-55px;

    font-size:5rem;

    color:rgba(0,113,186,.18);

    font-family:Georgia,serif;

}


/* =================================================
        FEATURE CARDS
==================================================*/

.feature-card{

    background:#fff;

    border-radius:14px;

    padding:40px 35px;

    height:100%;

    text-align:center;

    border:1px solid #e5e5e5;

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

    transition:.30s ease;

}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:var(--ppp-blue);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.feature-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:var(--ppp-blue);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:2rem;

    transition:.30s;

}

.feature-card:hover .feature-icon{

    background:var(--ppp-green);

    transform:scale(1.08);

}

.feature-card h3{

    color:var(--ppp-navy);

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:18px;

}

.feature-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:0;

}

/* =================================================
        FEATURE GRID
==================================================*/

.feature-grid{

    margin-top:60px;

}

/* =================================================
        COMPARISON CARDS
==================================================*/

.comparison-card{

    background:#fff;
    border-radius:14px;
    overflow:hidden;

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

    transition:.3s;

    height:100%;

}

.comparison-card:hover{

    transform:translateY(-8px);

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

}

.comparison-card img{

    width:100%;
    /*height:420px;*/
    aspect-ratio:4/3;
    object-fit:cover;

}

.comparison-content{

    padding:35px;

}

.badge-group{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.comparison-badge{

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

    font-size:.9rem;

}

.comparison-badge.professional{

    background:#e8f4ff;

    color:var(--ppp-blue);

}

.comparison-badge.phone{

    background:#f2f2f2;

    color:#777;

}

/* =================================================
        COMPARISON TITLES
==================================================*/

.comparison-title{

    position:relative;

    display:inline-block;

    left:50%;

    transform:translateX(-50%);

    margin-bottom:30px;

    padding-bottom:12px;

    font-size:1.55rem;

    font-weight:700;

    color:var(--ppp-navy);

}

.comparison-title::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:0;

    width:70px;

    height:4px;

    border-radius:2px;

}

.comparison-title-blue::after{

    background:var(--ppp-blue);

}

.comparison-title-gray::after{

    background:#bdbdbd;

}

/* =================================================
        COMPARISON WRAPPER
==================================================*/

.comparison-wrapper{

    position:relative;

}

/* =================================================
        VS CIRCLE
==================================================*/

.comparison-vs{

    position:absolute;

    top:42%;

    left:50%;

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

    width:74px;
    height:74px;

    border-radius:50%;

    background:var(--ppp-blue);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.3rem;

    letter-spacing:1px;

    border:5px solid #fff;

    box-shadow:0 8px 25px rgba(0,0,0,.18);

    z-index:10;

}

/* Hover effect */

.comparison-wrapper:hover .comparison-vs{

    background:var(--ppp-green);

    transition:.25s;

}

/* =================================================
        CALL TO ACTION
==================================================*/

.call-to-action{

    background:var(--ppp-navy);

    color:#fff;

}

.call-to-action h2{

    font-family:'Oswald',sans-serif;

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;

}

.call-to-action .lead{

    color:rgba(255,255,255,.9);

    font-size:1.3rem;

    margin-bottom:30px;

}

.call-to-action p{

    color:rgba(255,255,255,.85);

    max-width:850px;

    margin:0 auto 20px;

}

.cta-buttons{

    margin-top:45px;

}

.cta-buttons .btn{

    min-width:220px;

    margin:10px;

}

/*======================================
      MEDIA QUERIES
======================================*/

@media (max-width:768px){

.why-page .hero{

    padding:60px 0;

}

.why-page .hero h1{

    font-size:2.2rem;

}

.why-page .hero img{

    margin-top:40px;

}

}

@media (max-width:991px){

.comparison-vs{

    position:relative;

    left:auto;
    top:auto;

    transform:none;

    margin:0 auto 35px;

}

}

@media (max-width:768px){

.call-to-action h2{

    font-size:2.2rem;

}

.call-to-action .lead{

    font-size:1.1rem;

}

.cta-buttons .btn{

    display:block;

    width:100%;

    max-width:280px;

    margin:12px auto;

}

}

/* =================================================
        END MEDIA QUERIES
==================================================*/