/* Index Page Styling */

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

body{
background:#ffffff;
}

.header{
width:100%;
position:fixed;
top:0;
left:0;
background:#ffffff;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
z-index:1000;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:40px 8%;
}

.logo{
font-size:36px;
font-weight:600;
color:#111;
}

.logo span{
color:#000000;
}

.nav-links{
display:flex;
list-style:none;
gap:30px;
}

.nav-links a{
text-decoration:none;
color:#333;
font-weight:500;
font-size: 22px;
transition:0.3s;
}

.nav-links a:hover{
color:#00a651;
}

.cta{
background:#00a651;
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.cta:hover{
background:#008f45;
}

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

@media(max-width:768px){

.nav-links{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:center;
display:none;
padding:20px 0;
}

.nav-links.active{
display:flex;
}

.menu-toggle{
display:block;
}

.cta{
display:none;
}

}


.hero{
height:90vh;
background-image:url("../images/Eryon_HomePage_Image.jpeg");
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
padding-left:8%;
}

/* Dark overlay */
.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
}

/* Content */
.hero-content{
position:relative;
max-width:650px;
color:black;
z-index:2;
}

/* Heading */
.hero-content h1{
font-size:48px;
line-height:1.2;
/* margin-bottom:20px; */
font-weight:600;

background:rgba(0,0,0,0.75);
color:#f4c542;

display:inline-block;
/* padding:20px 30px; */
border-radius:4px;
}

.hero-content{
position:absolute;
top:40%;
left:8%;
transform:translateY(-40%);
margin-top:200px;
}

/* Button */
.hero-btn{
display:inline-block;
background:#f4c542;
color:black;
padding:14px 30px;
text-decoration:none;
font-weight:500;
border-radius:4px;
transition:0.3s;
}

.hero-text-box{
background: rgba(0,0,0,0.85);
padding:25px 30px;
display:inline-block;
border-radius:4px;
color:white;
max-width:700px;
}

.hero-text-box h1{
font-size:48px;
margin-bottom:10px;
}

.hero-text-box p{
font-size:18px;
color:#e5e5e5;
}

.hero-btn:hover{
background:#e6b82e;
}


.about-section{
background:#141414;
padding:80px 8%;
color:white;
}

.about-container{
display:flex;
justify-content:space-between;
align-items:center;
gap:60px;
}

/* LEFT TEXT */

.about-text{
flex:1;
}

.about-text h5{
color:white;
letter-spacing:1px;
margin-bottom:20px;
}

.about-text h2{
color:#f4c542;
font-size:36px;
line-height:1.4;
margin-bottom:25px;
}

.about-text p{
color:#dcdcdc;
line-height:1.7;
margin-bottom:30px;
}

.about-btn{
background:#f4c542;
color:black;
padding:14px 28px;
text-decoration:none;
font-weight:500;
display:inline-block;
}

/* RIGHT IMAGES */

.about-images{
flex:1;
display:flex;
flex-direction:column;
gap:30px;
}

.image-card{
position:relative;
overflow:hidden;
}

.image-card img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}

/* IMAGE LABEL */

.image-label{
position:absolute;
top:20px;
left:20px;
background:black;
color:#f4c542;
padding:12px 20px;
font-weight:600;
}
@media (max-width:900px){

.about-container{
flex-direction:column;
}

.image-card img{
height:220px;
}

}


.energy-info{
background:#ffffff;
padding:120px 8%;
}

.energy-container{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:80px;
}

/* LEFT SIDE */

.energy-left{
flex:1;
}

.energy-left h2{
font-size:52px;
line-height:1.3;
font-weight:400;
color:#222;
}

/* RIGHT SIDE */

.energy-right{
flex:1;
}

.energy-right p{
font-size:18px;
line-height:1.8;
color:#333;
margin-bottom:20px;
}

@media (max-width:900px){

.energy-container{
flex-direction:column;
gap:40px;
}

.energy-left h2{
font-size:36px;
}

}


.footer{
background:#141414;
color:white;
padding-top:80px;
}

/* FOOTER MAIN */

.footer-container{
display:flex;
justify-content:space-between;
padding:0 8% 60px 8%;
gap:40px;
}

.footer-logo h2{
color:#f4c542;
font-size:28px;
margin-bottom:5px;
}

.footer-logo p{
letter-spacing:2px;
color:#ddd;
}

.footer-address p,
.footer-contact p{
margin-bottom:8px;
color:#ddd;
}

/* BOTTOM BAR */

.footer-bottom{
background:#2a2a2a;
text-align:center;
padding:18px;
font-size:14px;
color:#bbb;
}

@media (max-width:900px){

.footer-container{
flex-direction:column;
gap:30px;
}

}


.about-hero{
height:50vh;
background-image:url("../images/Solar_background-image.jpeg");
background-size:cover;
background-position:center;

position:relative;
display:flex;
align-items:flex-end;
padding-left:8%;
padding-bottom:60px;
}

.about-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.about-hero-text{
position:relative;
z-index:10;
color:#f4c542;
}

.about-hero-text h1{
font-size:60px;
font-weight:600;

background:rgba(0,0,0,0.75);
display:inline-block;
padding:15px 30px;
border-radius:4px;
}

.about-company{
background:#f4f4f4;
padding:80px 0;   /* remove side padding */
}

.about-wrapper{
max-width:1200px;
margin:0 auto;
padding:0 40px;   /* consistent spacing */
}
/* TITLE */

.about-title{
font-size:36px;
margin-bottom:20px;
color:#222;
}

/* INTRO */

.about-intro{
font-size:18px;
line-height:1.7;
color:#444;
margin-bottom:40px;
max-width: 800px;
}

/* POINTS */

.about-points{
display:flex;
flex-direction:column;
gap:25px;
}

.point h3{
font-size:20px;
margin-bottom:8px;
color:#111;
}

.point p{
color:#555;
line-height:1.7;
}
.mission-section{
background:#f4f4f4;
padding:60px 8%;
}

.mission-container{
display:flex;
gap:30px;
}

.mission-box{
background:white;
padding:30px;
flex:1;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.mission-box h3{
margin-bottom:15px;
}

.cta-section{
padding:100px 8%;
background:#f4f4f4;
}

.cta-container{
display:flex;
align-items:stretch;
min-height:250px;
}

/* LEFT */
.cta-left{
background:#f4c542;
padding:60px;
flex:1;
}

/* RIGHT */
.cta-right{
position:relative;
flex:1;
display:flex;
}

.cta-right img{
width:100%;
height:250px;
object-fit:cover;
}



.about-cta{
text-align:center;
padding:80px 8%;
background:#141414;
color:white;
}

.cta-btn{
background:#f4c542;
padding:14px 30px;
color:black;
text-decoration:none;
display:inline-block;
margin-top:20px;
}

/* BUTTON
.cta-btn {
  position: absolute;
  bottom: -20px;
  right: 40px;
  background: #000;
  color: #fff;
  padding: 15px 40px;
  text-decoration: none;
  font-weight: 600;
} */


/* Contact US */
.contact-section{
padding:100px 8%;
background:#ffffff;
}

.contact-container{
display:flex;
gap:60px;
}

/* LEFT SIDE */

.contact-left{
flex:1;
}

.contact-left h2{
font-size:32px;
margin-bottom:20px;
}

.contact-left p{
margin-bottom:15px;
line-height:1.7;
color:#191919;
}

.contact-info{
margin-top:20px;
}

.contact-info ul{
padding-left:20px;
}

/* RIGHT SIDE */

.contact-right{
flex:1;
background:#f4c542;
padding:40px;
}

.contact-right h3{
margin-bottom:20px;
}

/* FORM */

.contact-right form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-right input,
.contact-right textarea{
padding:12px;
border:none;
outline:none;
}

.contact-right button{
background:black;
color:white;
padding:12px;
border:none;
cursor:pointer;
}

/* Service Section */
.services-section{
padding:60px 8%;
background:#f4f4f4;
}

.services-header{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:60px;
}

.services-header h2{
font-size:46px;
margin-bottom:15px;
}

.services-header p{
color:#555;
}

/* GRID */

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

/* CARD */

.service-card{
background:white;
padding:20px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.service-card img{
width:100%;
height:180px;
object-fit:cover;
margin-bottom:15px;
}

.service-card h3{
margin-bottom:10px;
}

.service-card p{
color:#555;
margin-bottom:10px;
}

.service-card ul{
padding-left:18px;
color:#444;
}

/* HOVER EFFECT */

.service-card:hover{
transform:translateY(-5px);
}

@media (max-width:900px){
.services-grid{
grid-template-columns:1fr;
}
}

.services-video{
padding:100px 8%;
background:#ffffff;
text-align:center;
}

.services-video-text{
max-width:700px;
margin:auto;
margin-bottom:40px;
}

.services-video-text h2{
font-size:32px;
margin-bottom:15px;
}

.services-video-text p{
color:#555;
line-height:1.7;
}

.services-video-box {
    width: 80%;
    margin: auto;
    aspect-ratio: 16 / 9; 
}

.services-video-box video{
width:100%;
height: 100%;
object-fit: cover;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.design-gallery{
padding:100px 8%;
background:#f4f4f4;
}

.design-header{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:50px;
}

.design-header h2{
font-size:32px;
margin-bottom:10px;
}

.design-header p{
color:#555;
}

/* GRID */

.design-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* CARD */

.design-card{
overflow:hidden;
background:white;
}

.design-card img{
width:100%;
height:250px;
object-fit:cover;
transition:0.4s;
}

/* HOVER EFFECT */

.design-card:hover img{
transform:scale(1.05);
}

/* PRODUCT PAGE STYLING */
.products {
  padding: 80px 8%;
  text-align: center;
}

.filters {
  margin-bottom: 30px;
}

.filters button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background: #0a66c2;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.product-card {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  text-align: left;
}

.product-card h3 {
  margin-bottom: 10px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #0a66c2;
}

.product-card button {
  margin-top: 15px;
  padding: 8px 15px;
  border: none;
  background: #222;
  color: white;
  border-radius: 5px;
}