/* ==========================================================
   PPPlus Website
   Version 2
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f7f8fa;

    color:#222;

    line-height:1.7;

}

.container{

    width:90%;
    max-width:1200px;

    margin:auto;

}


/* ===========================
        HEADER
=========================== */

header{

    background:#111;

    color:white;

    position:sticky;

    top:0;

    z-index:1000;

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

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    font-size:34px;

    font-weight:bold;

    letter-spacing:1px;

}

.logo span{

    color:#27c45b;

}

nav ul{

    display:flex;

    list-style:none;

    gap:28px;

}

nav a{

    color:white;

    text-decoration:none;

    font-size:16px;

    transition:.3s;

}

nav a:hover{

    color:#27c45b;

}


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

.hero{

    background:linear-gradient(135deg,#0f1724,#1d3557);

    color:white;

    text-align:center;

    padding:120px 20px;

}

.hero h1{

    font-size:54px;

    line-height:1.2;

    margin-bottom:35px;

}

.hero-text{

    max-width:820px;

    margin:auto;

    font-size:22px;

    opacity:.92;

}

.hero-buttons{

    margin-top:50px;

}

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

.button{

    display:inline-block;

    padding:16px 34px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;

    margin:12px;

    transition:all .35s ease;

}

.primary{

    background:#27c45b;

    color:white;

}

.primary:hover{

    background:#1fa64b;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(39,196,91,.35);

}

.secondary{

    border:2px solid white;

    color:white;

}

.secondary:hover{

    background:white;

    color:#1d3557;

}


/* ===========================
        CONTENT SECTIONS
=========================== */

section{

    padding:90px 0;

}

section h2{

    text-align:center;

    font-size:42px;

    margin-bottom:30px;

    color:#1d3557;

}

section p{

    max-width:900px;

    margin:20px auto;

    font-size:20px;

}


/* ===========================
     PHONE MESSAGE
=========================== */

.phone-message{

    display:flex;

    justify-content:center;

    margin:60px 0;

}

.phone-screen{

    width:360px;

    background:#111;

    color:white;

    border-radius:30px;

    padding:40px;

    text-align:center;

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

}

.phone-screen h3{

    color:#27c45b;

    margin-bottom:25px;

    font-size:28px;

}

.number{

    font-size:28px;

    font-weight:bold;

    color:#ffd84d;

    margin:18px 0;

}

.reward{

    color:#27c45b;

    font-weight:bold;

    margin-top:28px;

}

.after-message{

    text-align:center;

    font-size:24px;

    font-weight:bold;

    color:#1d3557;

    max-width:850px;

}

/*==========================================================
                    MEET PPPLUS
==========================================================*/

.meet{

    background:#f5f7fb;

}

.meet-header{

    text-align:center;

    max-width:900px;

    margin:auto;

}

.meet-header h2{

    font-size:48px;

    margin-bottom:20px;

}

.meet-header p{

    font-size:22px;

    color:#555;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:70px;

}

.card{

    background:white;

    border-radius:20px;

    padding:45px 35px;

    text-align:center;

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

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

}

.icon{

    font-size:48px;

    margin-bottom:25px;

}

.card h3{

    color:#1d3557;

    margin-bottom:18px;

    font-size:30px;

}

.card p{

    font-size:19px;

    color:#555;

}

.summary{

    margin-top:90px;

    text-align:center;

}

.summary p{

    font-size:26px;

}

.summary blockquote{

    font-size:34px;

    font-weight:bold;

    margin:25px auto;

    max-width:850px;

    color:#1d3557;

}

.summary blockquote.green{

    color:#27c45b;

}

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

.cta{

    background:#1d3557;

    color:white;

    text-align:center;

}

.cta h2{

    color:white;

    font-size:48px;

    max-width:900px;

    margin:auto;

}

.cta p{

    max-width:850px;

    margin:35px auto;

    font-size:22px;

    opacity:.9;

}

.cta-buttons{

    margin-top:45px;

}

.secondary-dark{

    background:transparent;

    color:white;

    border:2px solid white;

}

.secondary-dark:hover{

    background:white;

    color:#1d3557;

}



/*==========================================================
                        FOOTER
==========================================================*/

footer{

    background:#111;

    color:white;

    padding:70px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

.footer-grid h3{

    font-size:34px;

    margin-bottom:20px;

}

.footer-grid h4{

    margin-bottom:20px;

}

.footer-grid a{

    display:block;

    color:#cccccc;

    text-decoration:none;

    margin:10px 0;

    transition:.3s;

}

.footer-grid a:hover{

    color:#27c45b;

}

.copyright{

    text-align:center;

    margin-top:50px;

    padding-top:30px;

    border-top:1px solid #333;

    color:#888;

}

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

@media (max-width:900px){

    .container{
        width:94%;
    }

    nav ul{
        display:none;
    }

    .hero{
        padding:70px 20px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.25;
    }

    .hero-text{
        font-size:18px;
    }

    section{
        padding:60px 0;
    }

    section h2{
        font-size:32px;
    }

    section p{
        font-size:18px;
    }

    .section-title h2,
    .meet-header h2,
    .cta h2,
    .realisation h2{
        font-size:32px;
    }

    .realisation p{
        font-size:22px;
    }

    .highlight{
        font-size:26px;
    }

    .phone-display{
        width:300px;
    }

    .phone-body h3{
        font-size:24px;
    }

    .phone-number{
        font-size:24px;
    }

    .cards{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .button{
        display:block;
        width:100%;
        max-width:320px;
        margin:15px auto;
    }

}

.mobile-menu{

    display:none;

    font-size:34px;

    cursor:pointer;

    color:white;

}

@media (max-width:900px){

    .mobile-menu{

        display:block;

    }

}