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


body{
background:#f5f8ff;
color:#222;
}



/* HEADER */

.contact-header{

position:sticky;
top:0;
z-index:999;

background:#073b91;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 8%;

color:white;

}



.logo{

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

}



.contact-header nav a{

color:white;
text-decoration:none;

margin-left:25px;

font-size:15px;

transition:.3s;

}


.contact-header nav a:hover,
.contact-header nav .active{

color:#ffd000;

}








/* HERO */


.contact-hero{

height:520px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:

linear-gradient(
rgba(0,30,80,.8),
rgba(0,20,60,.85)
),

url("../images/electrical-bg.jpg");

background-size:cover;

background-position:center;

color:white;

text-align:center;

}



.hero-content{

position:relative;
z-index:3;

}



.hero-content h1{

font-size:55px;

margin-bottom:20px;

}



.hero-content p{

font-size:20px;

margin:12px;

}



.location{

color:#ffd000;

font-weight:bold;

}



.hero-btn{

display:inline-block;

margin-top:30px;

padding:15px 35px;

background:#ffd000;

color:#111;

border-radius:50px;

font-weight:bold;

text-decoration:none;

transition:.3s;

}



.hero-btn:hover{

transform:scale(1.1);

}







/* ELECTRIC ANIMATION */


.electric-animation span{

position:absolute;

width:200px;

height:200px;

border:2px solid rgba(255,208,0,.4);

border-radius:50%;

animation:pulse 5s infinite;

}



.electric-animation span:nth-child(1){

left:10%;
top:20%;

}


.electric-animation span:nth-child(2){

right:15%;
top:30%;

animation-delay:1s;

}


.electric-animation span:nth-child(3){

left:45%;
bottom:-50px;

animation-delay:2s;

}



@keyframes pulse{

0%{

transform:scale(.5);
opacity:0;

}

50%{

opacity:1;

}

100%{

transform:scale(2);
opacity:0;

}

}








/* OWNER CARD */


.owner-section{

padding:80px 8%;

}



.owner-card{

max-width:900px;

margin:auto;

background:white;

border-radius:25px;

display:flex;

gap:40px;

padding:40px;

box-shadow:

0 20px 50px rgba(0,0,0,.12);

align-items:center;

}



.owner-image img{

width:220px;

height:220px;

object-fit:cover;

border-radius:50%;

border:8px solid #073b91;

}



.owner-info h2{

font-size:35px;

color:#073b91;

}


.owner-info h3{

margin:10px 0;

color:#555;

}



.experience-badge{

margin:20px 0;

padding:15px;

background:#eef4ff;

border-left:5px solid #ffd000;

}



.owner-info button{

background:#073b91;

color:white;

border:none;

padding:14px 25px;

border-radius:30px;

cursor:pointer;

font-weight:bold;

}



.owner-info button:hover{

background:#ffd000;

color:#111;

}








/* DETAILS */


.details-section{

padding:70px 8%;

background:white;

}



.details-section h2,
.service-section h2{

text-align:center;

font-size:38px;

color:#073b91;

margin-bottom:40px;

}



.details-grid{

display:grid;

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

gap:25px;

}



.detail-box{

background:#f7faff;

padding:35px;

border-radius:20px;

text-align:center;

transition:.3s;

}



.detail-box:hover{

transform:translateY(-10px);

box-shadow:0 15px 30px #ddd;

}


.icon{

font-size:45px;

margin-bottom:15px;

}



.detail-box a{

display:inline-block;

margin-top:15px;

padding:10px 25px;

background:#073b91;

color:white;

border-radius:30px;

text-decoration:none;

}









/* SERVICES */


.service-section{

padding:70px 8%;

}



.service-grid{

display:grid;

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

gap:20px;

}



.service-grid div{

background:white;

padding:35px;

text-align:center;

border-radius:20px;

font-size:20px;

box-shadow:0 10px 30px #ddd;

transition:.3s;

}



.service-grid div:hover{

background:#073b91;

color:white;

transform:translateY(-10px);

}








/* CTA */


.contact-cta{

background:

linear-gradient(135deg,#073b91,#001b55);

color:white;

padding:80px 10%;

text-align:center;

}



.contact-cta h2{

font-size:40px;

}


.contact-cta a{

display:inline-block;

margin:20px;

padding:15px 35px;

background:#ffd000;

color:#111;

border-radius:40px;

text-decoration:none;

font-weight:bold;

}







footer{

background:#001b55;

color:white;

padding:30px;

text-align:center;

}








@media(max-width:768px){


.contact-header{

flex-direction:column;

gap:20px;

}


.hero-content h1{

font-size:35px;

}


.owner-card{

flex-direction:column;

text-align:center;

}


.owner-image img{

width:170px;
height:170px;

}

}