:root{
--clean:#38BDF8;
--solar:#FACC15;
}




:root{
  --clean:#020617; /* slightly darker blue for cleaning */
  --solar:#facc15; /* keep sunny yellow for solar */
  --overlay-bg: rgba(0,0,0,0.4); /* dark overlay for text readability */
  --overlay-text:#ffffff; /* white text for contrast */
}

.cleaning {
  background: #020617; /* lighter blue but readable */
}

.solar {
  background: #09133d; /* softer yellow but readable */
}

.panel img {
  filter: brightness(0.5); /* darker images so text pops */
  opacity:1; /* full opacity, no weird faded effect */
}

.overlay h2, .overlay p, .overlay span {
  color: var(--overlay-text);
}

.overlay {
  background: var(--overlay-bg);
  padding: 20px;
  border-radius: 20px;
}

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

body{
height:100vh;
overflow:hidden;
background:#f9fafb;
transition:.5s;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
height:70px;
background-color:#8f9199;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
z-index:10;
}

.logo{
height:40px;
}

.mode-toggle{
border:none;
padding:8px 20px;
border-radius:30px;
cursor:pointer;
}

/* MAIN */

.container{
height:100vh;
display:flex;
animation:fadeIn 1s ease;
}

.panel{
flex:1;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
transition:.6s;
}

.panel img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:.18;
}

/* .cleaning{
background:#ecfeff;
}

.solar{
background:#fef9c3;
} */

/* slanted divider */

.slant{
position:absolute;
left:50%;
top:-20%;
width:6px;
height:140%;
background:#22c55e;
transform:rotate(30deg);
border-radius:10px;
}

/* vertical text */

.vertical{
position:absolute;
font-size:80px;
font-weight:900;
opacity:.2;
transform:rotate(-90deg);
}

.cleaning .vertical{color:#0ea5e9;}
.solar .vertical{color:#ca8a04;}

.content{
z-index:2;
text-align:center;
animation:slideUp 1s ease;
}

.content h2{
font-size:32px;
margin-bottom:15px;
}

.content p{
opacity:.7;
margin-bottom:30px;
}

.btn{
padding:18px 40px;
border-radius:40px;
text-decoration:none;
color:white;
display:inline-flex;
gap:10px;
transition:.4s;
}

.clean-btn{
background:var(--clean);
}

.solar-btn{
background:var(--solar);
color:black;
}

.panel:hover{
flex:1.15;
}

.panel:hover .btn{
transform:scale(1.1);
}

/* footer */

.footer{
position:absolute;
bottom:40px;
width:100%;
text-align:center;
opacity:.6;
}

/* dark mode */

.dark{
background:#020617;
color:white;
}

.dark header{
background:#020617;
}


.dark .solar{
background:#020617;
}

.dark .cleaning{
    background:#09133d;
}

/* animations */

@keyframes slideUp{
from{transform:translateY(60px);opacity:0}
to{opacity:1}
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,sans-serif;
}

body{
min-height:100vh;
background:#f9fafb;
transition:.5s;
}

header{
position:fixed;
top:0;
width:100%;
height:70px;
background:#8f9199;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 30px;
z-index:10;
}

.logo{height:40px;}

.mode-toggle{
border:none;
padding:8px 18px;
border-radius:30px;
cursor:pointer;
}

.split{
height:100vh;
display:flex;
}

.panel{
position:relative;
flex:1;
overflow:hidden;
text-decoration:none;
color:white;
transition:.5s;
}

/* DIAGONAL CUT */

.cleaning{
clip-path:polygon(0 0,100% 0,85% 100%,0 100%);
}

.solar{
clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
margin-left:-15%;
}

.panel img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.6);
transition:.6s;
}

.overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
text-align:center;
}

.overlay h2{
font-size:70px;
letter-spacing:4px;
}

.overlay span{
margin-top:20px;
background:white;
color:black;
padding:14px 30px;
border-radius:40px;
}

.panel:hover img{
transform:scale(1.1);
}

/* DARK MODE */

.dark{
background:#020617;
}

.dark header{
background:#8f9199;
}

@media (max-width:900px){

.split{
flex-direction:column;
height:auto;
}

.panel{
height:50vh;
}

.cleaning,
.solar{
clip-path:none;
margin:0;
}

.overlay h2{
font-size:40px;
}

}