*{
  margin:0;
  font-family:calibri, sans-serif;
  /*border: solid red*/
}

li, p{
 /* border: solid blue*/
}
 #courses_img{
              padding: 10px;
              clear:left;
              height: 300px;
              background-image:  url(img/courses1.jpg);
              background-position: center;
              background-size:cover;
              background-repeat: no-repeat;
              color:white;
              font-size:20px;
              text-align: center;
              text-justify:auto;
                  box-shadow: 0px 2px 5px 0px #00000036;
 }
/********* main body *********/
.subheading{
  color:rgb(0,134,133);
  text-align: center;
  font-size:;
  margin-top: 30px;
  margin-bottom: 20px;
}
#welcome{
  background: white;
  width:200px;
  height: 100px;
  box-shadow: 1px 1px 5px gray;
  position:absolute;
  z-index: 5;
  right: 0;
  top:450px;
  text-align: center;
  padding-top: 25px;
}
#main-body{
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
}
.courses{
  
  width:250px;
  box-shadow: -1px 1px 5px gray;
}
.courses img{
  width:250px;
  height: 175px;
  margin-top: -25px;
}
.courses h3{
  position: relative;
  top:160px;
  color:white;
  width:150px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  text-shadow: 1px 3px 3px black;
  margin: 0 auto;
  box-shadow: 1px 3px 10px #333333;
  
}

.clist{
  margin-top: 20px;
}
.courses i{
  color :rgb(0,134,133);
}
.courses li{
  color :#333;
  padding: 5px;
}


#non-olevel{
  border-bottom: 5px solid rgb(134,0,133);
}
#non-olevel h3{
  background: rgb(134,0,133);
}
#non-olevel ul{
  padding-bottom: 10px;
}
#three-olevel{
  border-bottom: 5px solid rgb(134,133,0);
}
#three-olevel h3{
  background: rgb(134,133,0);
}
#five-olevel{
  border-bottom: 5px solid rgb(0,133,0);
}
#five-olevel h3{
  background:  rgb(0,133,0)
}
/****/
.courses-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
 /* border: solid blue*/
  
}

.course-card {
  background-color: white;
 /* border: solid red;*/
  /*border-radius: 8px;*/
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  width:250px;
  border-bottom: 5px solid #008586;
  /*display: flex;
  flex-direction: column;*/
}

.image-placeholder {
  width: 100%;
  height: 150px;
  background-color: #ccc;
  margin: auto;
  margin-bottom: 15px;
  
}
.course-details{
  margin-bottom: 20px;
  /*border:solid green*/
}
.course-details h2 {
 /* color: #008586;*/
  margin-top: 0;
  padding: 0 15px;
  font-size: 17px;
  
  position: relative;
  top:-30px;
  color:white;
  background: rgb(0,134,133);
  width:90%;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  text-shadow: 1px 1px 3px black;
  margin: 0 auto;
  box-shadow: 1px 3px 10px #333333;
}

.course-details p {
  margin: 5px 0;
  padding: 0 15px;
  color:#344
}
.course-details strong{
  color:#008586
}

.image-placeholder {
  
  
  flex-shrink: 0;
}

.course-details {
  flex: 1;
}

/*.course-details h2 {
  color: #008586;
  margin-top: 0;
  
}*/

.course-details p {
  margin: 5px 0;
}
/************ course requirements section ***********/
#course-requirements{
  width:800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between
}
#course-requirements img{
  height:450x;
  width:400px;
}
#req{
  height: 365px;
  display: block;
  justify-content: space-evenly
}
.requirements{
  padding: 18px;
  margin-bottom: 15px;
  width:410px;
  background: whitesmoke
}
.requirements h3{
  color:darkblue;
}
.requirements span{
  color:orangered;
}
.requirements p{
  color:#666666;
  font-size: 15px;
}
#non-o{
  border-left: 5px solid rgb(134,0,133);;
}
#three-o{
  border-left: 5px solid rgb(134,133,0);;
}
#five-o{
  border-left: 5px solid rgb(0,133,0);
}
/********************** Payments **********************
#payments{
  
  margin: 0 auto;
  margin-top: 70px;
  background: #222222;
  color:#bbbbbb;
  font-weight: bold;
  padding: 30px;
}
#payments h2{
  color:#00dddd;
}
#paydets{
  display: flex;
  justify-content: space-evenly;
}
#moneybag{
  width:30px
}
#payment-terms{
  display: flex;
  justify-content: space-evenly;
  
  padding-top: 30px;
}
#terms{
  border:solid skyblue;
  padding: 20px;
  
}
#payments ol{
  margin-left: -30px;
  margin-top: 20px;
  width:700px;
  font-size: 11px;
  
}
#payments li{
  padding-bottom: 10px;
}
#bank_logos{
  display: flex;
  margin: 0 auto;
  width:320px;
}
#bank_logos img{
  width:80px;
  height: 80px;
}
#payments h3{
  color:skyblue;
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
}

#payments span{
  color:white;
}
#account-details{
  margin-top: 40px;
  border: solid skyblue;
  padding: 20px;
}
#account-details p{
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
}
#fees-structure{
  width:400px;
  margin: 0 auto;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
  border: 1px solid green;
  padding: 10px;
}
#fees-structure button{
  color:white;
  background: #008384;
  padding: 10px;
  width:200px;
  border: none;
}
#fees-structure p{
  margin-top: 10px;
  margin-bottom: 10px;
}
/* Payments 2*/

/* General Section Styling */
#payments {
  background-color: #f9f9f9;
  padding: 40px;
  font-family: 'Segoe UI', sans-serif;
  color: #333;
}

.subheading {
  
  margin-bottom: 20px;
  text-align: center;
  
}

/* Payment Terms */
#payment-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

#terms, #account-details {
  flex: 1;
  width: 300px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#terms h3, #account-details h3, #fees-structure h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #2980b9;
}

#terms ol {
  padding-left: 20px;
  line-height: 1.6;
}

#terms li {
  margin-bottom: 10px;
}

/* Account Details */


#bank_logos img {
  max-height: 40px;
  object-fit: contain;
}

/* Fees Structure */
#fees-structure {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  width:300px;
}

#fees-structure p {
  margin-bottom: 15px;
}

#fees-structure button {
  background-color: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#fees-structure button:hover {
  background-color: #219150;
}
/* banking */
.banking-details {
  padding: 40px 20px;
  background: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width:95%;
}

.banking-details h3 {
  color: #2980b9;
  margin-bottom: 20px;
  font-size: 24px;
}
#mobile-container{
  display: flex;
  
  gap:30px;
  margin-bottom: 20px;
 /* border: solid blue*/
}

.banking-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.banking-details li {
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.banking-details strong {
  color: #000;
}
#mobile-banking {
  list-style: none;
  background: white;
  text-align: center;
  
}
/*#mobile-banking div{
  display: block;
  margin-top: 8px;
  width:fit-content;
  
}*/
#ecocash, #innbucks, #mukuru{
  display: block;
  align-items: center;
  gap: 30px;
  width:fit-content;
  box-shadow: 1px 1px 6px gray
  /*border: solid #008586*/
  
}
#mobile-banking h3{
  color:
}
#mobile-banking img{
  width:100px;
  display: block;
  height: 50px;
  object-fit: cover;
  margin: auto;
}
#mobile-banking p{
 /* display: grid;
  align-items: center;*/
  margin-top: 6px;
  font-weight: bold;
  
  /*border: solid red*/
}
@media (max-width:800px){
  #course-requirements{
    width:100vw;
    display: block;
  }
  #course-requirements img{
    display: block;
    margin: 150px auto;
  }  
  .requirements{
    width:80%;
    margin: 0 auto;
    margin-bottom: 15px;
  }
  #main-body{
    display: block;
  }
  .courses{
    margin: 0 auto;
    margin-bottom: 20px;
    padding-bottom: 20px;
    width:80%;
  }
  #description-h2{
    margin-top: 150px;
  }

.courses img{
  width:100%;
  height: 200px;
  margin-top: -25px;
}
  .courses h3{
  position: relative;
  top:185px;
  }
  .course-card {
    margin: 0 auto;
  }
  
  #payments{
    width:350px;
  }
  #payment-terms{
    display: block;
    width:100%;
    margin: 30px auto;
}
  #payment-terms img{
    display: block;
    margin: 0 auto;
}  
  #payments ol{
    width:80%;
    margin: 0 auto;
  }
  #account-details p,h3{
    text-align: center
  }
  #bank_logos{
    width:80%;
    margin: 0 auto;
  }
  #bank_logos img{
    width:75px;
    height: 50px;
  }
  #fees-structure{
    width:320px;
    margin-top: 30px;
  }
  #mobile-banking {
    margin-top: 30px;
  }
}