.training-banner {
    background-image: url("../images/training-banner.png");
    background-size: cover;
    background-position: center;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    padding-left: 80px;
  }
  .training-banner h2 {
    font-size: 40px;
    font-weight: 600;
  }
  .training-banner a {
    text-decoration: none;
    color: white;
  }


.scard1 {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    padding: 15px 20px;
    position: relative;
    height: 400px;
    margin-top: 20px;
  }
  .scard1::before {
    position: absolute;
    content: "";
    background-color: white;
    height: 90%;
    width: 100%;
    z-index: -1;
    bottom: 0;
    border-radius: 24px;
    transition-duration: 2s;
  }
  .scard1:hover::before {
    height: 100%;
  }
  .scard1 h3 {
    font-family: "Mortend", sans-serif;
    font-size: 20px;
    width: 90%;
    align-self: start;
  }
  .scard1 p {
    color: #717171;
  }
  .scard1>a{
    text-decoration: none;
    color: black;
    font-weight: 700;
    align-self: self-start;
    position: absolute;
    bottom: 20px;
  
  }

  /* service description section */
  .training-container{
    --r: 30px;
    --s: 30px;
    --x: 300px;
    --y: 30px;
    width: 100%;
    height: 90%;
    background: hsl(0, 0%, 100%);
    border-radius: var(--r);
    --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000
          72%);
    --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
    --_d: (var(--s) + var(--r));
    mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m),
      100% calc(var(--_d) + var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)),
      var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
    padding: 30px;
    margin-bottom: 100px;
    display: flex;
    align-items: center;
  }
  .training-text{
    padding-top: 20px;
  }
  .training-text h3{
    
    font-size: 38px;
    font-family: "Mortend", sans-serif;
    margin-bottom: 10px;
  }
  .training-text p{
    
    color:#717171;
  }
  .training-text>h5{
    font-size: 24px;
    font-family: "Mortend", sans-serif;
    margin:46px 0 30px 0;
  }
  .obj-list{
    margin-bottom: 61px;
    position: relative;
  }
  .obj-list h5{
    font-size: 18px;
    font-weight: 700;
    color: #717171;
  }
  .obj-list p{
   font-size: 14px;
  }
  .obj-list img{
    flex-shrink: 0;
    height: 20px;
    width: 20px;
    margin-right: 10px;
  }

  /* responsive design  */
  @media only screen and (max-width: 1199px) {
  
    .training-container {
      
      --x: 150px;
      
    }
    .scard1 {
      height: 350px;
  }
}
  @media only screen and (max-width: 1199px) {
  
    .training-container {
      --x: none;
  }
}
  @media only screen and (max-width: 767px) {
  
    .scard1 {
      height: 420px;
  }
  .training-text h3 {
    font-size: 28px;
    
}
.obj-list {
  margin-bottom: 0px;
  position: relative;
}
}
  @media only screen and (max-width: 576px) {
  
    .scard1 h3 {
   
      width: 80%;
      margin-top: 15px;
  }
}
  @media only screen and (max-width: 500px) {
  
    .service-banner {
     
      height: 60vh;
      padding-left: 0px;
      align-items: center;
  }
  .service-banner h2 {
    font-size: 30px;
    font-weight: 600;
  }
  .service-banner a {
    text-align: center;
  }
  }
  @media only screen and (max-width: 450px) {
  
    .scard1 {
      height: 380px;
  }
  }
  @media only screen and (max-width: 400px) {
  
    .training-text p {
      color: #717171;
      font-size: 14px;
  }
  .scard1 h3 {
  
    font-size: 18px;
}
.scard1 {
  height: 360px;
}
  }