/* banner css */

.banner-text {
    font-family: 'Kumbh Sans', sans-serif;
    color: #BD9191;
}

.banner-title {
    font-family: 'Afacad', sans-serif;
}

.medium-screen-title {
    font-family: 'Afacad', sans-serif;
}

.banner-section {
  background: url('./certificate-images/certificate-banner.png') center/cover no-repeat;
  height: 300px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden; /* ensures absolute image doesn't spill out */
}

.inner-image {

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url('./certificate-images/certificate-inner-banner.png') no-repeat;
    width: 100%;
    height: 100%;
    background-size: contain;
    z-index: 0;


}

.banner-content {
  position: relative;
  z-index: 1;
}

.banner-title,
.banner-text {
  color: #fff;
}



@media (max-width: 768px) {
  .banner-section {
    background: url('./certificate-images/certificate-banner.png') center/cover no-repeat;
    height: 100px; /* adjust if needed */
  }

 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perfect centering */
  background: url('./certificate-images/lg-inner-img.png') no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 80%;
  display: block;
  z-index: 0;
}
 .banner-content {
    text-align: center;
  }
  .banner-title{
    font-size: 30px;
  }

  .banner-text{
    font-size: 15px;
  }

}



@media (min-width: 2000px) {
  .banner-section {
    background: url('./certificate-images/certificate-banner.png') center/cover no-repeat;
    height: 400px; /* adjust if needed */
  }

 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perfect centering */
   background: url('./certificate-images/lg-inner-img.png') no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 60%;
  display: block;
  z-index: 0;
}
 .banner-content {
    text-align: center;
  }
  .banner-title{
    font-size: 70px;
  }

  .banner-text{
    font-size: 25px;
  }

}

/* cerfiticate css */

.certificate-title{
     font-family: 'Afacad', sans-serif;
    color: #302F2F;

}

.certificate-content{
    margin-top: 40px;
    margin-bottom: 40px;
}
.certificate-para{


  color: #606060;
    font-family: 'Afacad', sans-serif;
    max-width: 50rem;
    margin: 0 auto;
    /* centers the block itself */
    text-align: center;
}

.certificate-button{
    color: #ffffff;
    background-color: #e53935;
    font-family: 'Afacad', sans-serif;
    border: none;

}

.certificate-img-card{
     border: 1px solid transparent; /* set transparent border first */
  border-radius: 5px;
  background: 
    linear-gradient(#fff, #fff) padding-box,   /* inner background */
    linear-gradient(to right, #FFC4C4, #FFFFFF) border-box; /* gradient border */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  padding: 10px;

}

.certificate-img-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Position button in the middle of the card */
.certificate-img-card .certificate-button {
  position: absolute;
  bottom: -13px;               /* stick to bottom */
  left: 50%;               /* move to horizontal center */
  transform: translateX(-50%);
  background: #EF3030;     /* red background like your screenshot */
  color: #fff;
  border: none;
  border-radius: 0;        /* flat edges */
  width: 80%;             /* full width button */
  padding: 5px;
}