.section{
    font-family:Ebrima, sans-serif ;
    margin-top: 2rem;
    margin-bottom: 2rem;

}


.sion{
    align-items: center;
    max-width: 100%; 
    height: auto;
}

.sion img{
    margin-top: 2rem;
    width: 50%;
    height: auto;
    border-radius: 0.5em;

}

.sion h1{
    font-size: 2.5rem;
    margin-bottom: 1rem;
} 
.sion h3{
    font-size: 1.5rem;
    margin-bottom: 1rem;
} 
.sion p{
    font-size: 1.2rem;
    margin-bottom: 1rem;
} 

/* .row{
    border: 1px solid rgb(202, 19, 19);
    
} */
.col-lg-12, .col-lg-6{
    /* border: 1px solid rgb(202, 19, 19); */
    text-align: center; 
 
}

.col-lg-12, .col-md-12{
    text-justify:inherit;
    /* text-align: end !important; */
}

.banner{
    margin-left: -5%;
    width: 110%;
    height: auto;
    
}

.round-img{
    border-radius: 0.5em;
    width: 100%;
    height: auto;
}

.card{
  margin:  2rem 2rem;
  padding: 1.5rem 2rem 2rem 2rem;
  text-align:justify;
  border-radius: 10px;
  position: relative;
}

/* This is to ensure that the card styles are consistent with the dark theme and have a visually appealing background and border effect. */
[data-bs-theme="light"] 
.card{
  background: #f8f9fa;
  color: #212529;
  border: 1px solid #dee2e6;
}

[data-bs-theme="dark"] 
.card{
  color: #f8f9fa;
  border: 1px solid #343a40;
  background: #1c1f2b;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

[data-bs-theme="dark"]
.card::after, .card::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #006aff, #ffeb3b, #006aff, #ffeb3b, #006aff);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

[data-bs-theme="dark"]
.card::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}




/*Small screens (iPhones, 576px and down)  XS*/
@media (max-width: 576px) {
  .section {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .round-img {
    border-radius: 0.5em;
    width: 100%;
    height: auto;
  }
  .banner {
    margin-left: -5%;
    width: 110%;
    height: auto;
  }
  /* .row > [class^="col-"],
  .row > [class*=" col-"] {
    margin-bottom: 1.5rem;
  } */
  .sion img{
    max-width: 50%;
    height: auto;
    margin-top: -1rem;
  }
  .sion h1{
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  } 
  .sion h3{
      font-size: 1rem;
      margin-bottom: 1rem;
  } 
  .sion p{
      font-size: 0.8rem;
      margin-bottom: 1rem;
  } 
  .progress {
    height: 2px !important;
  }
  .btn {
    font-size: 0.9em;
    padding: 0.3em 1em;
  }
}
/*Small screen (iPhones Vertical, 577px to 768) SM*/
@media (min-width: 577px) and (max-width: 768px) {
  .sion h1{
      font-size: 2rem;
      margin-bottom: 1rem;
  } 
  .sion h3{
      font-size: 1rem;
      margin-bottom: 1rem;
  } 
  .sion p{
      font-size: 0.8rem;
      margin-bottom: 1rem;
  } 

  .sion img{
    max-width: 100%;
    height: auto;
    margin-top: -1rem;
  }

  .section {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .round-img {
    border-radius: 0.5em;
    width: 100%;
    height: auto;
  }
  .banner {
    margin-left: -5%;
    width: 110%;
    height: auto;
  }
  .card{
    margin:  2rem 2rem;
    padding: 1rem 1rem 1rem 1rem;
    text-align:justify;
    border-radius: 10px;
    position: relative;
  }
}
/*Small screen () MD*/
@media (min-width: 769px) and (max-width: 992px) {

  .sion h1{
      font-size: 2.3rem;
      margin-bottom: 1rem;
  } 
  .sion h3{
      font-size: 1.3rem;
      margin-bottom: 1rem;
  } 
  .sion p{
      font-size: 1rem;
      margin-bottom: 1rem;
  } 

  .sion img{
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;

  }
  .progress {
    height: 2px !important;
  }
  .btn {
    font-size: 1em;
    padding: 0.5em 1.5em;
  }

  .card{
    margin:  0.5rem 0.5rem;
    padding: 1rem 1rem 1rem 1rem;
    text-align:justify;
    border-radius: 10px;
    position: relative;
  }
  
}
/* Ipad Pro screen LG-XL*/
@media (min-width: 993px) and (max-width: 1200px) {

  .sion h1{
      font-size: 2.3rem;
      margin-bottom: 1rem;
  } 
  .sion h3{
      font-size: 1.3rem;
      margin-bottom: 1rem;
  } 
  .sion p{
      font-size: 1rem;
      margin-bottom: 1rem;
  } 

  .sion img{
    max-width: 100%;
    height: auto;
    margin-top: 8rem;

  }
  .progress {
    height: 2px !important;
  }
  .btn {
    font-size: 1em;
    padding: 0.5em 1.5em;
  }
}
/* Laptop Screen > XXL*/
@media (min-width: 1201px) and (max-width: 1400px) {

.sion h1{
      font-size: 2.3rem;
      margin-bottom: 1rem;
  } 
  .sion h3{
      font-size: 1.3rem;
      margin-bottom: 1rem;
  } 
  .sion p{
      font-size: 1rem;
      margin-bottom: 1rem;
  } 

  .sion img{
    max-width: 100%;
    height: auto;
    margin-top: 3.5rem;

  }
  .progress {
    height: 2px !important;
  }
  .btn {
    font-size: 1.1em;
    padding: 0.5em 1.5em;
  }
}
/* PC Screen */
@media (min-width: 1401px){
  .sion h1{
      font-size: 2.5rem;
      margin-bottom: 1rem;
  } 
  .sion h3{
      font-size: 1.5rem;
      margin-bottom: 1rem;
  } 
  .sion p{
      font-size: 1.2rem;
      margin-bottom: 1rem;
  } 

  .sion img{
    max-width: 100%;
    height: auto;
    margin-top: 4rem;

  }
  .progress {
    height: 2px !important;
  }
  .btn {
    font-size: 1.2em;
    padding: 0.5em 1.5em;
  }
}

/* progress bar for timing-line */

.start-0{
    left: 0 !important;
}
.start-25{
    left: 25% !important;
}
.start-50{
    left: 50% !important;
}
.start-75{
    left: 75% !important;
}
.start-100{
    left: 100% !important;
}