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

/* ---------- Fullscreen sections ---------- */
.section{
  width: 100%;
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:50px 10%;
  gap:20px;
  overflow:hidden;
  opacity:0;
  transform:translateY(50px);
  transition:all 0.8s ease-out;
  margin: auto;
}
.section.visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Section 1 ---------- */
.section1{
  background:linear-gradient(135deg,#0a192f,#112240);
  color:#64ffda;
  flex-direction:row-reverse;
}
.section1 img{
  width: 55%;
  border-radius:20px;
  transform:scale(0.9);
  transition:transform 0.5s ease;
}
.section1 img:hover{transform:scale(1);}
.section1 h1{font-size:3rem;}
.section1 p{font-size:1.2rem;max-width:500px;}

/* ---------- Section 2 ---------- */
.section2{
  background:#fefefe;
  color:#0a192f;
  flex-direction:row;
}
.section2 img{
  width: 45%;
  border-radius:20px;
  opacity:0.9;
  transition:opacity 0.5s ease;
}
.section2 img:hover{opacity:1;}
.section2 h1{font-size:3rem;}
.section2 p{font-size:1.2rem;max-width:500px;}

/* ---------- Section 3 ---------- */
.section3{
  background:#112240;
  color:#fff;
  flex-direction:column;
  text-align:center;
  justify-content:center;
}
.section3 img{
  width:60%;
  border-radius:25px;
  margin:20px 0;
  transform:rotate(-3deg);
  transition:transform 0.5s ease;
}
.section3 img:hover{transform:rotate(0);}
.section3 h1{font-size:3rem;}
.section3 p{font-size:1.2rem;max-width:600px;margin:auto;}

/* ---------- Section 4 ---------- */
.section4{
  background:linear-gradient(135deg,#64ffda,#0a192f);
  color:#0a192f;
  flex-direction:row-reverse;
}
.section4 img{
  width:50%;
  border-radius:20px;
  transform:scale(1.05);
  transition:transform 0.5s ease;
}
.section4 img:hover{transform:scale(1);}
.section4 h1{font-size:3rem;}
.section4 p{font-size:1.2rem;max-width:500px;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .section{flex-direction:column;gap:30px;padding:50px 5%;}
  .section img{width: 90%;}
  .section h1{font-size:2.2rem;}
  .section p{font-size:1rem;}
}