.page-header-courses   {
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
   padding: 87px 0 91px;
   text-align: center;
}

.header-content-zone {
     max-width: 780px;
	margin: 0 auto;

}

.page-main-title {


   font-size: 51px;
   font-weight: 800;
   color: #fff;
  margin-bottom: 17px;
   line-height: 1.19;

}

.page-subtitle-text {
    font-size: 18px;
      line-height: 1.71;
    color: #e0e7ff;

}

.course-filter-zone {
	   background: #f8fafc;
    padding: 33px 0;
    border-bottom: 1px solid #e2e8f0;

}

.filter-controls-group {
	    display: flex;
       gap: 14px;
   justify-content  :center;
	 flex-wrap: wrap;}

.filter-btn-item {
   padding: 11px 28px;
    cursor: pointer;
  border-radius: 7px;
  color: #475569;
	background: #fff;
   font-weight    :      600;
   transition: all 0.27s ease;
   border: 2px solid #e2e8f0;
       font-size     : 15px;
}

.filter-btn-item:hover {
  border-color: #2563eb;
	color   :   #2563eb;
}


.filter-btn-item.active-filter {

    background   :  #2563eb; 
	   border-color: #2563eb; 
	  color: #fff;
     }

.courses-catalog-section

{
  padding: 79px 0;
   background: #fff; 
	
}

.courses-grid-display {
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
   gap :      31px;
}

.course-card-unit {
   background: #fff;
  border  :     1px solid #e2e8f0;
          border-radius: 13px;
   overflow: hidden;
    transition: all 0.32s ease; 
	
}

.course-card-unit:hover {
  transform: translateY(-7px);
  box-shadow: 0 17px 43px rgba(0,0,0,0.12);
}

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

.course-img-area img

{
   width  : 100%;
    height: 100%;
  object-fit: cover;
    transition:transform 0.41s ease;
}

.course-card-unit:hover .course-img-area img {
	  transform: scale(1.07);}

.level-badge-beginner,
.level-badge-intermediate,
.level-badge-advanced 
 {
    font-size: 12px;
   top: 13px;
   letter-spacing     :        0.7px;
    right: 13px;
     font-weight: 700;
  text-transform: uppercase;
    position: absolute;
   padding: 6px 16px;
  border-radius     :    17px;
}

.level-badge-beginner {
   background: #10b981;
    color: #fff;

}



.level-badge-intermediate {
	background: #f59e0b;

     color: #fff;
}

.level-badge-advanced {
    background: #ef4444;
   color: #fff;
}

.course-content-block {
   padding: 27px 24px;
}

.course-title-text {
  font-size: 21px;
	font-weight: 700;
  color: #1e293b;
   margin-bottom :      13px;
    line-height: 1.34;
}

.course-desc-text    {
   font-size: 14px; 
	  line-height :1.69; 
	   color: #64748b; 
	         margin-bottom   :  21px;
}

.course-meta-info


{
  display: flex;
 gap: 23px;
   margin-bottom   :  23px;
	 padding-top: 17px;
    border-top: 1px solid #e2e8f0;
}


.meta-item-span    {
      display: flex;
  align-items: center;
  gap: 7px;
    font-size: 13px;
    color: #64748b;
}

.meta-icon-svg  
  {
  width  :     17px;
   height: 17px;
 stroke: #64748b;
    fill: none;
    stroke-width: 2.3;
  stroke-linecap: round;
    stroke-linejoin: round;
}

.course-action-link

{
	 display: inline-block;
  padding: 11px 27px;
    background: transparent;
    border: 2px solid #2563eb;
  color: #2563eb;
    font-weight: 600;
   font-size: 14px;
   border-radius: 6px;
   transition: all 0.28s ease;
}

.course-action-link:hover {
  background: #2563eb;
    color: #fff;
}@media (max-width: 991px) {
    .page-main-title {
        font-size: 37px;
    }

    .courses-grid-display {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .page-main-title {
        font-size: 31px;
    }

    .page-header-courses {
        padding: 63px 0 67px;
    }

    .courses-grid-display {
        grid-template-columns: 1fr;
    }

    .filter-controls-group {
        gap: 9px;
    }

    .filter-btn-item {
        padding: 9px 21px;
        font-size: 14px;
    }
}