/* ==========================================================
   ProtectMomNJ Production V3
   Author: Michael D. Teague
   Website: www.ProtectMomNJ.com
========================================================== */

/* ---------- RESET ---------- */

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

html{
scroll-behavior:smooth;
}

body{

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

background:#ffffff;

color:#333333;

line-height:1.7;

}


/* ---------- HERO ---------- */

.hero{

width:100%;

background:#ffffff;

}

.hero-image{

width:100%;

display:block;

height:auto;

}


/* ---------- GLOBAL ---------- */

.container{

width:90%;

max-width:1200px;

margin:auto;

padding:70px 20px;

}

section{

padding:20px 0;

}


/* ---------- ABOUT ---------- */

.about{

background:#ffffff;

}

.about .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

flex-wrap:wrap;

}

.photo{

flex:1;

text-align:center;

}

.photo img{

width:340px;

max-width:100%;

border-radius:14px;

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

}

.bio{

flex:2;

}

.bio h2{

font-size:42px;

color:#0B6A3B;

margin-bottom:20px;

}

.bio p{

font-size:20px;

margin-bottom:22px;

}


/* ---------- CALL BUTTON ---------- */

.call-button{

display:inline-block;

background:#0B6A3B;

color:#ffffff;

text-decoration:none;

font-size:22px;

font-weight:bold;

padding:18px 40px;

border-radius:10px;

margin-top:15px;

transition:.30s;

}

.call-button:hover{

background:#084D2B;

}


/* ---------- BENEFITS ---------- */

.benefits{

background:#F7F8F9;

}

.benefits h2{

text-align:center;

font-size:40px;

margin-bottom:50px;

color:#0B6A3B;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

background:#ffffff;

padding:35px;

border-radius:14px;

box-shadow:0 8px 24px rgba(0,0,0,.08);

text-align:center;

transition:.30s;

}

.card:hover{

transform:translateY(-6px);

}

.card h3{

color:#0B6A3B;

margin-bottom:18px;

font-size:24px;

}

.card p{

font-size:18px;

}


/* ---------- CONTACT ---------- */

.contact{

background:#ffffff;

}

.contact h2{

text-align:center;

font-size:40px;

margin-bottom:20px;

color:#0B6A3B;

}

.contact p{

text-align:center;

font-size:20px;

margin-bottom:35px;

}

form{

max-width:720px;

margin:auto;

}

input,

textarea{

width:100%;

padding:18px;

margin-bottom:20px;

font-size:18px;

border:1px solid #cccccc;

border-radius:8px;

}

textarea{

resize:vertical;

min-height:180px;

}

button{

width:100%;

background:#0B6A3B;

color:#ffffff;

font-size:22px;

font-weight:bold;

padding:18px;

border:none;

border-radius:10px;

cursor:pointer;

transition:.30s;

}

button:hover{

background:#084D2B;

}


/* ---------- FOOTER ---------- */

footer{

background:#154A30;

color:#ffffff;

text-align:center;

padding:60px 20px;

}

footer h3{

font-size:30px;

margin-bottom:20px;

}

footer a{

color:#ffffff;

font-weight:bold;

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}


/* ---------- MOBILE ---------- */

@media screen and (max-width:900px){

.about .container{

flex-direction:column;

text-align:center;

}

.bio h2{

font-size:34px;

}

.bio p{

font-size:18px;

}

.call-button{

width:100%;

text-align:center;

}

}

@media screen and (max-width:600px){

.container{

padding:50px 15px;

}

.benefits h2,

.contact h2{

font-size:30px;

}

.photo img{

width:260px;

}

.card{

padding:25px;

}

input,

textarea,

button{

font-size:16px;

}

}