/* a {
  text-decoration: none;
} */

.course_title{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
}

/* .card{
  padding: 100x;
} */
/* Fullstack */
.card_box {
  width: 250px;
  height: 350px;
  border-radius: 20px;
  background: #429FFD;
  position: relative;
  box-shadow: 0 25px 50px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: all .3s;
  
}

.card_box:hover {
  transform: scale(0.9);
}

.card_box span {
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500px !important; 
  
}


.card_box span::before {
  content: 'Fullstack';
  position: absolute;
  width: 150%;
  height: 40px;
  background-image: linear-gradient(45deg, #ff6547 0%, #ffb144  51%, #ff7053  100%);
  transform: rotate(-45deg) translateY(-20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.23);
  font-weight: bold;
}

.card_box span::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: 0;
  left: 0;
  height: 10px;
  z-index: -1;
  box-shadow: 140px -140px #cc3f47;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
} 


/* Cloud Computing */
.card_box_cloud {
    width: 250px;
    height: 350px;
    border-radius: 20px;
    background: #429FFD;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.55);
    cursor: pointer;
    transition: all .3s;
  }
  
  .card_box_cloud:hover {
    transform: scale(0.9);
  }
  
  .card_box_cloud span {
    position: absolute;
    overflow: hidden;
    width: 150px;
    height: 150px;
    top: -10px;
    left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500px !important; 
  }
  
  
  .card_box_cloud span::before {
    content: 'Cloud Computing';
    position: absolute;
    width: 150%;
    height: 40px;
    background-image: linear-gradient(45deg, #ff6547 0%, #ffb144  51%, #ff7053  100%);
    transform: rotate(-45deg) translateY(-20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 5px 10px rgba(0,0,0,0.23);
  }
  
  .card_box_cloud span::after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: 0;
    left: 0;
    height: 10px;
    z-index: -1;
    box-shadow: 140px -140px #cc3f47;
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  } 



  
/* Devops */
.card_box_devops {
    width: 250px;
    height: 350px;
    border-radius: 20px;
    background: #429FFD;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.55);
    cursor: pointer;
    transition: all .3s;
  }
  
  .card_box_devops:hover {
    transform: scale(0.9);
  }
  
  .card_box_devops span {
    position: absolute;
    overflow: hidden;
    width: 150px;
    height: 150px;
    top: -10px;
    left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500px !important; 
  }
  
  
  .card_box_devops span::before {
    content: 'Devops';
    position: absolute;
    width: 150%;
    height: 40px;
    background-image: linear-gradient(45deg, #ff6547 0%, #ffb144  51%, #ff7053  100%);
    transform: rotate(-45deg) translateY(-20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 5px 10px rgba(0,0,0,0.23);
  }
  
  .card_box_devops span::after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: 0;
    left: 0;
    height: 10px;
    z-index: -1;
    box-shadow: 140px -140px #cc3f47;
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  } 



  
/* Data Science */
.card_box_datascience {
    width: 250px;
    height: 350px;
    border-radius: 20px;
    background: #429FFD;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.55);
    cursor: pointer;
    transition: all .3s;
  }
  
  .card_box_datascience:hover {
    transform: scale(0.9);
  }
  
  .card_box_datascience span {
    position: absolute;
    overflow: hidden;
    width: 150px;
    height: 150px;
    top: -10px;
    left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500px !important; 
  }
  
  
  .card_box_datascience span::before {
    content: 'Data Science';
    position: absolute;
    width: 150%;
    height: 40px;
    background-image: linear-gradient(45deg, #ff6547 0%, #ffb144  51%, #ff7053  100%);
    transform: rotate(-45deg) translateY(-20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 5px 10px rgba(0,0,0,0.23);
  }
  
  .card_box_datascience span::after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: 0;
    left: 0;
    height: 10px;
    z-index: -1;
    box-shadow: 140px -140px #cc3f47;
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  } 



  /*-----------------------Star-------------*/

    .rating_course:not(:checked) > label {
      float: right;
      cursor: pointer;
      font-size: 20px;
      color: orange;
      height:60px;
      display: flex; 
      flex-direction: column;
      justify-content: center;
      width: fit-content;
      
    }
    
    .rating_course label:before {
      content: '★';
      margin-top: 30px;
      
    }

    .rating_course {
        margin-right: 5px;
        
      }
    .rating_coursevalue{
      margin-top: 30px;
      margin-right: 40px;
      float: right;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 100;
      font-size: 20px;
      color: white;
      height:60px;
        display: flex;
      flex-direction: column;
      justify-content: right;
      width: fit-content;
    }

    /* Single Courses */

    .card_box_singlecourse {
        justify-content: center;
        /* width: 400px; */
        height: 75px;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        transition: all .3s;
        /* border-top: 1px solid #0D6EFD;
        border-right: 1px solid #0D6EFD;
        border-bottom: 1px solid #0D6EFD;
        border-left: 5px solid #0D6EFD; */
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        transition: 400ms;
        font-weight: bold;
        padding: 1px;
        /* margin: 100px; */
        
      }


.course_content{
  color: white;
  float: right;
  margin-top: 10px;
}

.course_content_ds{

  color: white;
  float: left;
  padding-left: 45px;
  
}

/* Progress */
@import url("https://fonts.googleapis.com/css?family=Muli:700");
:root {
  --background-modal-color: #ffffff;
  --body-color: #ffffff;
  --color-timeline-default: #D2D3D8;
  --color-step-completed: #ffffff;
  --color-checkmark-completed: #fff;
  --color-in-progress: #13CB8F;
  --color-label-default: var(--color-timeline-default);
  --color-label-completed: var(--color-step-completed);
  --color-label-loading: var(--color-in-progress);
  --color-icon-completed: var(--color-step-completed);
  --color-icon-default: var(--color-timeline-default);
}
:root.dark-mode {
  --color-checkmark-completed: #fff;
  --background-modal-color: #5C6174;
  --color-timeline-default: #9799A3;
  --color-checkmark-completed: var(--background-modal-color);
  --body-color: #fff;
  --color-step-completed: #fff;
}

* {
  box-sizing: border-box;
}

.wrapper {
  font-family: "Muli", sans-serif;
  background: var(--body-color);
  padding: 0;
  margin: 0;
  display: flex; 
  width: 100vw;
  /* height: 100vh; */
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #0D6EFD !important;
}
.toggle {
  transform: scale(0.8);
  position: absolute;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 140px;
}
.toggle span {
  margin: 0 0.5rem;
}
.toggle input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.toggle input[type=checkbox]:checked + label {
  background: #13CB8F;
}
 .toggle input[type=checkbox]:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}
 .toggle label {
  cursor: pointer;
  width: 75px;
  height: 34px;
  background: #D2D3D8;
  display: block;
  border-radius: 40px;
  position: relative;
}
.toggle label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 40px;
  transition: 0.3s;
}
.main-container {
  background-color: #0D6EFD !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 200ms ease;
  /* background: var(--background-modal-color); */
  width: 50%;
  height: 220px;
  min-width: 420px;
  /* max-width: 750px; */
  flex-grow: 1;
  border-radius: 5px;
  /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14); */
}
.main-container .steps-container {
  padding: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-container .steps-container .step {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  flex-grow: 0;
  height: 15px;
  width: 15px;
  border: 4px solid var(--color-timeline-default);
  border-radius: 50%;
}
 .main-container .steps-container .step .preloader, body .main-container .steps-container .step svg {
  display: none;
}
.main-container .steps-container .step.completed {
  width: 18px;
  height: 18px;
  background: var(--color-step-completed);
  border: none;
}
.main-container .steps-container .step.completed svg {
  transition: all 200ms ease;
  display: block;
  height: 10px;
  width: 10px;
  /* fill: var(--color-checkmark-completed); */
  fill:#7f8085;
}
.main-container .steps-container .step.in-progress {
  width: 18px;
  height: 18px;
  background: var(--color-in-progress);
  border: none;
}
.main-container .steps-container .step.in-progress .preloader {
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-left-color: transparent;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.main-container .steps-container .step .label {
  position: absolute;
  top: 30px;
  filter: none;
  z-index: 2000;
  color: var(--color-label-default);
  transition: all 200ms ease;
  font-weight: 700;
}
.main-container .steps-container .step .label.completed {
  color: var(--color-label-completed);
}
body .main-container .steps-container .step .label.loading {
  color: var(--color-label-loading);
}
.main-container .steps-container .step .icon {
  font-size: 40px;
  position: absolute;
  top: -60px;
  color: var(--color-icon-default);
  transition: color 200ms ease;
}
.main-container .steps-container .step .icon.completed {
  color: var(--color-icon-completed);
}
.main-container .steps-container .step .icon.in-progress {
  color: var(--color-in-progress);
}
.main-container .steps-container .line {
  transition: all 200ms ease;
  height: 2px;
  flex-grow: 1;
  max-width: 120px;
  background: var(--color-timeline-default);
}
.main-container .steps-container .line.completed {
  background: var(--color-step-completed);
}
.main-container .steps-container .line.next-step-uncomplete {
  background: linear-gradient(to right, var(--color-step-completed), var(--color-timeline-default));
}
.main-container .steps-container .line.next-step-in-progress {
  background: linear-gradient(to right, var(--color-step-completed), var(--color-in-progress));
}
.main-container .steps-container .line.prev-step-in-progress {
  background: linear-gradient(to right, var(--color-in-progress), var(--color-timeline-default));
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
      
/* ---------------------------- */

.card{

  display: flex;
  
  flex-wrap: wrap;
  border-left: 5px solid #0D6EFD;
width: 200px;
   
}


.card img {
  height: 30px;
  transition: 1s;
  /* padding: 10px; */
 
  
}
/* CSS for responsive design */
/* .card-group {
  display: flex;
  flex-wrap: wrap;
  /* align-items: var(--color-label-default); */
        /* flex-direction: column; */
/* } */ 
/* .card-group{
/* CSS for responsive design */

   
@media (max-width: 867px) {

.card-group {
 
  display: flex;
flex-wrap: wrap; 
/* justify-content: space-evenly;  */
/* align-items: var(--color-label-default); */
}

.card {
 
  width: calc(50% - 40px); /* Set the width of each card (50% - margins) */
  margin: 200px; /* Adjust the margin between cards */
  

}


.card-title {
  /* margin-bottom: initial; */
  color: var(--bs-card-title-color);
  font-size: 10px;
  /* padding: 110px; */
  margin-right: 100px;
}

}