/* ============================= */
/* PAGE BANNER */
/* ============================= */

.page-banner{
  position:relative;
  height:45vh;        
  min-height:320px;   
  max-height:500px; 
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  background: linear-gradient(135deg, #0FB4DF, #2ecc71, #03045e);
}

/* ============================= */
/* IMAGE LAYER (ZOOM EFFECT) */
/* ============================= */

.page-banner.has-image::after,
.page-banner.blog::after,
.page-banner.threerproma::after,
.page-banner.goodpractices::after,
.page-banner.expert::after,
.page-banner.data::after,
.page-banner.policy::after,
.page-banner.elearning::after,
.page-banner.technology::after,
.page-banner.publication::after,
.page-banner.contactus::after,
.page-banner.news::after,
.page-banner.calculator::after{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;
  transform: scale(1.2);
  animation: bannerZoom 25s ease-in-out infinite alternate;
  will-change: transform;
}

/* Individual images */
.page-banner.has-image::after{
  background-image: url('../images/banner11.jpeg');
}

.page-banner.blog::after{
  background-image: url('../images/banner14.jpeg');
}

.page-banner.threerproma::after{
  background-image: url('../images/3RproMar.png');
}
.page-banner.goodpractices::after{
  background-image: url('../images/good-practices.jpg');
}
.page-banner.expert::after{
  background-image: url('../images/expert.jpg');
}
.page-banner.data::after{
  background-image: url('../images/data.jpg');
}
.page-banner.policy::after{
  background-image: url('../images/policy1.jpg');
}
.page-banner.elearning::after{
  background-image: url('../images/elearning1.jpg');
}
.page-banner.technology::after{
  background-image: url('../images/technology.jpg');
}

.page-banner.publication::after{
  background-image: url('../images/publication.jpg');
}

.page-banner.contactus::after{
  background-image: url('../images/contactus.jpg');
}

.page-banner.news::after{
  background-image: url('../images/news.png');
}

.page-banner.calculator::after{
  background-image: url('../images/calculator.jpg');
}


/* ============================= */
/* GRADIENT OVERLAY */
/* ============================= */

.page-banner::before{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    135deg,
    rgba(15,180,223,0.25),
    rgba(11,61,92,0.45)
  );

  z-index:1;
}

/* ============================= */
/* BANNER CONTENT */
/* ============================= */

.banner-content{
  position:relative;
  z-index:2;
  animation: fadeUp 1.2s ease 0.3s both;
  transform: translateY(-10px);
}

.banner-content h1{
  font-size:48px;
  font-weight:700;
  margin-bottom:10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.banner-content p{
  font-size:14px;
  opacity:0.9;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ============================= */
/* WAVE DIVIDER */
/* ============================= */

.banner-wave{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:80px;
  z-index:2;
  display:block;
}

/* ============================= */
/* ANIMATIONS */
/* ============================= */

@keyframes bannerZoom{
  0%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes fadeUp{
  0%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}



/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:768px){

  .page-banner{
    height:32vh;        /* smaller */
    min-height:240px;   /* safety */
    max-height:340px;   
  }

  .banner-content h1{
    font-size:32px;
  }

  .banner-content p{
    font-size:16px;
  }
}