*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",Arial,sans-serif;
}


body{

background:#f5f7f6;
color:#222;
overflow-x:hidden;

}


/* LIGHT NETWORK BACKGROUND */

body:before{

content:"";
position:fixed;
inset:0;
background-image:
radial-gradient(#008c58 1px,transparent 1px);
background-size:45px 45px;
opacity:.08;
z-index:-2;

}


body:after{

content:"";
position:fixed;
width:500px;
height:500px;
right:-150px;
top:150px;
background:#d5ad32;
opacity:.08;
filter:blur(100px);
z-index:-1;

}



/* TOP BAR */

.topbar{

height:32px;
background:#004d2c;
color:white;
text-align:right;
padding:7px 55px;
font-size:13px;

}



/* HEADER */


.header{

height:105px;
background:white;
display:flex;
align-items:center;
padding-left:35px;

}


.logo{

display:flex;
align-items:center;
gap:15px;

}


.logo img{

width:75px;

}


.logo h1{

font-family:Georgia,serif;
font-size:30px;
color:#005c35;

}


.logo p{

font-size:12px;
color:#777;

}



/* HERO */


.hero{

background:linear-gradient(
135deg,
#014d26,
#014d26
);

text-align:center;
padding:55px 20px;
border-bottom:3px solid #d5ad32;

}



.hero span{

background:#d5ad32;
color:white;
padding:7px 70px;
border-radius:25px;
font-weight:bold;

}


.hero h2{

margin-top:20px;
font-family:Georgia;
font-size:42px;
color:#ffffff;

}




.container{

width:82%;
margin:45px auto;

}



/* PORTAL CARDS */


.service-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}


.service-card{

background:white;
padding:30px;
min-height:230px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;

}


.service-card:hover{

transform:translateY(-8px);

}



.service-icon{

height:42px;
width:42px;
border-radius:50%;
background:#006633;
color:white;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:15px;

}


.service-card h3{

color:#006633;

}


.service-card p{

color:#777;
font-size:13px;
margin:10px 0;

}


.service-card a{

color:#00a63c;
font-weight:bold;
text-decoration:none;

}




/* SOCIAL ICONS */


.title{

margin: 70px 0 0 0;
margin-bottom:35px;
text-align:center;
color:#005c35;
font-size:22px;

}



.social-grid{

display:flex;
justify-content:center;
gap:45px;
flex-wrap:wrap;

}



.social-item{

text-align:center;

}



.social-item a{

text-decoration:none;

}



.social-item i{

height:75px;
width:75px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
transition:.4s;
background:white;
box-shadow:0 5px 20px rgba(0,0,0,.1);

}



.social-item:hover i{

transform:translateY(-12px) scale(1.15);
box-shadow:0 0 25px currentColor;

}



.social-item h3{

margin-top:15px;
color:#333;

}


.social-item span{

font-size:12px;
color:#777;

}


.facebook{color:#1877f2;}
.youtube{color:#ff0000;}
.instagram{color:#e1306c;}
.linkedin{color:#0077b5;}
.twitter{color:#111;}




/* FOOTER */


.footer{

margin-top:120px;

}


.footer-green{

height:8px;
background:#006633;

}


.footer-gold{

height:5px;
background:#d5ad32;

}


.footer-content{

background:#07130f;
color:white;
padding:35px;
text-align:center;

}




@media(max-width:900px){

.service-grid{

grid-template-columns:1fr;

}

}