:root {
   --orange: #f2994a;
   --green: #27ae60;
   --bg: #f8f9fa;
   --shadow: 0 10px 28px rgba(18, 20, 22, 0.08);
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
 }

 body {
   font-family: "Poppins", sans-serif;
   color: #222;
   line-height: 1.45
 }

 a {
   text-decoration: none
 }
 .feedback-home{
  background-color: #f5fff7;
 }
.site-header{
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url('./images/3784896.jpg') center/cover no-repeat;
    margin-top: 50px;
    height: 500px;
}
 /* HOW WE TEACH SECTION */
.how-we-teach {
  padding: 50px 20px;
  text-align: center;
  width: 100%; /* full width */
}

.teach-title{
      font-size: 2rem;
      font-weight: 700;
      color: #0e9d58;
      text-align: center;
      position: relative;
      margin-bottom: 60px;
}

.teach-title::after {
      content: '';
      width: 80px;
      height: 4px;
      background: #ff8c00;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }

.how-we-teach .teach-header p {
  color: #555; /* light text for readability */
  font-size: 1rem;
  margin-bottom: 40px;
}

.teach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  justify-items: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.teach-card {
  background: #f9fafc;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 300px;
}

.teach-card i {
  color: var(--green);
  margin-bottom: 15px;
  transition: transform 0.3s;
}

.teach-card h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  font-weight: 700;
}

.teach-card p {
  font-size: 0.9rem;
  color: #555;
}

.teach-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.teach-card:hover i {
  transform: scale(1.2);
}

 /* ---------- Course SECTION ---------- */
 .section {
   max-width: 1300px;
   margin: 50px auto;
   padding: 0 20px
 }

 .section-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px
 }

 .section-header h2 {
   font-size: 1.5rem;
   font-weight: 700
 }

 .controls {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
 }

 .filter-btn {
   padding: 8px 16px;
   border-radius: 999px;
   border: 1px solid #ddd;
   background: #fff;
   font-weight: 600;
   cursor: pointer;
   transition: .2s
 }

 .filter-btn.active,
 .filter-btn:hover {
   background: var(--orange);
   color: #fff;
   border-color: var(--orange)
 }

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.4s ease;
  overflow: hidden;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Input styling */
#searchInput {
  padding: 10px 36px 10px 16px;
  border: none;
  border-radius: 50px;
  font-weight: 500;
  width: 300px; /* Default width for desktop */
  transition: width 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
  outline: none;
  background: #fff;
}

#searchInput::placeholder {
  color: #aaa;
  transition: all 0.3s ease;
}

#searchInput:focus {
  width: 400px; /* Expand on focus */
  background: #fefefe;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

#searchInput:focus::placeholder {
  color: var(--green);
  transform: translateX(5px);
}

/* Clear button styling */
#clearSearch {
  position: absolute;
  right: 10px;
  font-size: 1rem;
  color: #888;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#searchInput:not(:placeholder-shown) ~ #clearSearch {
  opacity: 1;
  transform: scale(1.1);
}

#clearSearch:hover {
  color: var(--green);
  transform: scale(1.2);
}

.no-courses {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #888;
  padding: 20px 0;
}


 /* ---------- GRID ---------- */
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
   /* justify-items: center; */
 }

 .course-card {
   background: #fff;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: .3s;
   position: relative;
   display: flex;
   flex-direction: column;
 }

 .course-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12)
 }

 /* Shine effect only on hover */
 .course-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: -75%;
   width: 50%;
   height: 100%;
   background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
   transform: skewX(-25deg);
   pointer-events: none;
 }

 .course-card:hover::after {
   animation: shine 0.7s forwards;
 }

 @keyframes shine {
   0% {
     left: -75%;
   }

   100% {
     left: 125%;
   }
 }

 .course-image {
   position: relative;
   height: 210px;
   overflow: hidden
 }

 .course-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .7s cubic-bezier(.2, .9, .25, 1)
 }

 .course-card:hover img {
   transform: scale(1.12)
 }

.course-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

 .badge {
   position: absolute;
   top: 14px;
   left: 14px;
   padding: 6px 12px;
   font-size: .75rem;
   font-weight: 700;
   color: #fff;
   border-radius: 999px;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2)
 }

 .badge.orange {
   background: var(--orange)
 }

 .badge.green {
   background: var(--green)
 }

 .overlay {
   position: absolute;
   inset: 0;
   background-color: rgb(225, 180, 96, 0);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   color: #fff;
   text-align: center;
   transform: translateY(100%);
   transition: .5s
 }
 .overlay a{
  cursor: pointer;
 }

 .course-card:hover .overlay {
   transform: translateY(0)
 }

 .overlay h3 {
   font-size: 1.1rem;
   margin-bottom: 10px
 }

 .overlay a {
   padding: 10px 18px;
   background: #fff;
   color: var(--green);
   border-radius: 8px;
   font-weight: 700
 }

 /* ---------- BODY ---------- */
 .course-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 18px
 }

 .course-title {
   font-weight: 700;
   font-size: 1.05rem;
   margin-bottom: 10px
 }

 .course-duration {
  display: inline-block;
  background: rgba(242, 153, 74, 0.15);
  color: var(--orange);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  align-self: flex-start;
}

 .course-desc {
   font-size: .9rem;
   color: #666;
   margin-bottom: 16px
 }

 .price-row {
   margin-top: auto
 }

 .current-price {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--orange)
 }

 .old-price {
   text-decoration: line-through;
   color: #999;
   font-size: .95rem;
   margin-left: 8px
 }

 .save-pill {
   font-size: .8rem;
   background: rgba(39, 174, 96, 0.1);
   color: var(--green);
   padding: 4px 10px;
   border-radius: 999px;
   font-weight: 600;
   margin-left: 8px
 }

.course-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* spacing between points */
  margin-bottom: 12px;
}

.point-item {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.05); /* light gray background */
  color: #333; /* text color */
  font-size: 0.75rem; /* smaller text */
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 12px;
}

.point-item .tick {
  color: var(--green); /* green tick */
  margin-right: 4px;
  font-weight: 700;
}

 .enroll-btn {
   display: block;
   text-align: center;
   background: linear-gradient(90deg, var(--green), #21b56a);
   color: #fff;
   padding: 10px 0;
   border-radius: 0 0 14px 14px;
   font-weight: 700;
   border-style: none;
   cursor: pointer;
 }

 .enroll-btn:hover {
   background: var(--green);
   transition: all 1s ease;
 }

  @media(max-width:900px){
    .cards-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 per row on tablet */
    }
     #searchInput {
    width: 220px; /* Tablet width */
    }
    #searchInput:focus {
      width: 260px;
    }
  }

  @media (max-width: 767px) {
  .cards-grid {
    grid-template-columns: 1fr; /* 1 per row on mobile */
    }
  /* Decrease font sizes */
  .course-title {
    font-size: 0.95rem;
  }
  .course-desc {
    font-size: 0.8rem;
  }
  .current-price {
    font-size: 1.05rem;
  }
  .old-price {
    font-size: 0.8rem;
  }
  .save-pill {
    font-size: 0.7rem;
  }

}
 @media(max-width:600px) {
   .section-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px
   }
 }
/* Responsive */
@media(max-width:1200px) {
  .teach-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:767px) {
  .teach-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    gap: 20px;
  }
   .teach-card h3 {
    font-size: 1rem;
  }

  .teach-card p {
    font-size: 0.85rem;
  }
}
@media(max-width:650px) {
  .teach-grid {
    grid-template-columns: 1fr; /* single card per row */
    gap: 20px;
  }

  .teach-card {
    max-width: 90%; /* make card wider */
    padding: 25px 20px;
  }

  .teach-card h3 {
    font-size: 1.05rem;
  }

  .teach-card p {
    font-size: 0.9rem;
  }
}

@media(max-width:500px) {
  .teach-card {
    max-width: 95%; /* full width almost */
    padding: 20px 15px;
  }

  .teach-card h3 {
    font-size: 0.95rem;
  }

  .teach-card p {
    font-size: 0.8rem;
  }

  .teach-grid {
    gap: 15px;
  }
}