@media (min-width:1400px) {
   .course-card {
      height: 275px;      
   }
}

@media (max-width:991px) {

   .certificate-btn{
      margin-right: 0px;
  }
  .view_certified::before{
   display: none;
  }
  .navbar-top .profile-dropdown .dropdown-menu{
   left: 0px;
  }
   .active-card-detail::before,
   .replies-detail::after {
      display: none;
   }

   .left-sidebar {
      display: none;
   }

   .banner-info {
      height: auto;
      padding: 16px 0px;
   }

   footer {
      margin-top: 32px;
      padding-top: 32px;
      padding-left: 0px;
      padding-right: 0px;
   }

   .navbar-light {
      flex-direction: row-reverse;
   }

   .active-card-detail,
   .replies-detail,
   .vr-card-detail {
      position: inherit;
   }

   .project-card {
      display: block;
   }

   .progress-bar-detail p {
      margin-bottom: 0px;
   }

   .vr-card-detail {
      margin-top: 8px;
   }

   .vr-card-detail h3 {
      max-width: 100%;
   }

   .progress-bar-line span,
   .team-detail {
      max-width: 100%;
   }

   .upcoming-courses h2,
   .project-info .foundation-detail h2,
   .team-detail h2 {
      font-size: 20px;
   }
   .upcoming-courses select{
      margin-right: 0px;
   } 
  
  .planning-box,.assessment-box,.fundamentals-box {
      position: inherit;
      width: auto;
  }
}

@media (max-width:767px) {

   .project-management p,
   .active-card-detail p {
      font-size: 16px;
   }

   .project-management {
      margin-top: 9px;
      border-bottom: 1px solid #1a202924;
      padding-bottom: 9px;
   }

   .user-view {
      display: block;
   }
   .progress-bar-tab .team-detail h3{
      white-space: wrap;
   }
   .course-card{
      margin-bottom: 10px;
   }
   .project-manager{
      display: none;
   }
   .project-detail select{      
      color: #fff;
      font-weight: 700;
      background-color: #494745;
      outline: unset;
   }
   .completed-tab  .team-detail p{
      margin-bottom: 2px;
   }
}

@media (max-width:575px) {
   .banner-box {
      display: block;
   }

   .project-detail hr {
      border-bottom: 1px solid #afafaf40;
      margin: 16px 0;
      display: block;
   }

   .vr-card-detail h3,
   p,
   .team-detail h3,
   p,
   span {
      font-size: 12px;
   }

   .team-detail {
      gap: 8px;
   }

   .progress-bar-line {
      display: flex;
   }

   .team-people {
      width: 75px;
      height: 75px;
      flex: 0 0 75px;
   }

   .team-people img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
   }

   .course-card-img {
      width: 88px;
      height: 88px;
      flex: 0 0 88px;
   }

   .course-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .course-card.card {
      flex-direction: row !important;
      margin-bottom: 8px;
   }

   .course-card .card-text {
      margin-bottom: 0px;
   }

   .course-card .card-title {
      margin-bottom: 0px;
      max-width: 235px;
   }

   .course-card .card-title,
   .card-text {
      font-size: 12px;
   }

   .upcoming-courses h2,
   .discussions-detail h2 {
      font-size: 16px;
   }

   .upcoming-courses select {
      color: #007FFF;
      padding-right: 24px;
   }

   .project-info .foundation-detail h2 {
      font-size: 16px;
   }

   .progress-detail {
      display: none;
   }

   .active-card {
      padding: 8px;
   }

   .message-icon svg path {
      fill: #007FFF;
   }

   .upcoming-courses {
      margin-top: 16px;
      margin-bottom: 8px;
   }

   .discussions-detail {
      margin-top: 16px;
   }

   .upcoming-courses .form-select {
      background-image: url("/static/athar/images/right-arrow.050cc4428304.svg");
      background-size: 17px 40px;
   }

   .card-body svg {
      width: 16px;
      height: 16px;
   }

   .card-body svg path,
   .vr-card-detail svg path,
   .vr-card-detail svg path {
      fill: #007FFF;
   }

   .course-card .card-body {
      padding: 11px;
   }

   .project-info .nav-pills {
      gap: 15px;
   }

   .project-info .nav-pills .nav-link.active,
   .nav-pills .show>.nav-link {
      border-bottom-color: #007FFF;
   }

   .progress-bar-tab .team-people {
      width: 64px;
      height: 64px;
      flex: 0 0 64px;
   }

   .progress-bar-tab .foundation-detail {
      display: block !important;
   }

   .progress-bar-tab .foundation-detail p {
      color: #007FFF;
      font-size: 16px;
   }

   .progress-bar-tab .project-card,
   .completed-tab .project-card {
      padding: 8px;
   }

   .completed-tab .team-people{
      width: 65px;
      height: 65px;
      flex:  0 0 65px;
   }
   .completed-tab .team-people img{
      width: 100%;
      height: 100%;      
   }
   .completed-tab  .team-detail h3 {
      max-width: 230px;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
    overflow: hidden;
  }

   .course-title {
      display: block !important;
   }

   .completed-tab .team-detail h2 {
      font-size: 16px;
      line-height: inherit;
   }

   .view_certified {
      background-color: #007FFF;
      font-size: 12px;
      padding: 11px 40px;
   }

   .check_details span,
   .check_details p {
      font-size: 10px;
   }

   .progress-bar-tab .team-detail h3{
      max-width: 230px;
      width: 100%;
      white-space: nowrap;
   }
   .right_sign_wrp img{
      width: 20px;
      height: 20px;
   }

}

@media (max-width: 575px) {
   .project-card .team-detail img {
      width: 64px;
      height: 64px;
      flex: 0 0 64px;
   }
}
