.feature-header {
    text-align: center;
    margin-bottom: 40px;
}

.feature-header .badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background-color: #d1fae5;
    color: #065f46;
    border-radius: 9999px;
    margin-bottom: 16px;
    font-size: 14px;
}

.feature-header h1 {
    font-size: 36px;
    color: #1e293b;
    margin-bottom: 16px;
}

.feature-header h1 span {
    background: linear-gradient(to right, #059669, #0d9488);
    -webkit-background-clip: text;
    color: transparent;
}

.feature-header p {
    font-size: 18px;
    color: #475569;
    max-width: 600px;
    margin: 0 auto;
}


 /* Feattures Grid */
 .features-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     margin-bottom: 60px;
 }

 @media (min-width: 768px) {
     .features-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .features-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .feature-card {
     background: #ffffff;
     padding: 24px;
     border-radius: 16px;
     border: 1px solid #e5e7eb;
     text-align: left;
     transition: transform 0.3s, box-shadow 0.3s;


 }



 .feature-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .feature-icon {
     width: 64px;
     height: 64px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     transition: transform 0.3s;

 }

 .feature-img1 {
     background-size: contain;
     position: relative;
     color: white;
     z-index: 1;
 }

 .feature-img1::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("Assets/Quran1.jpg") no-repeat center/cover;
     opacity: 0.3;
     z-index: -1;
 }

 .feature-img2 {
     background-size: contain;
     position: relative;
     color: white;
     z-index: 1;
 }

 .feature-img2::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("Assets/arabic\ img.jpg") no-repeat center/cover;
     opacity: 0.3;
     z-index: -1;
 }

 .feature-img3 {
     background-size: contain;
     position: relative;
     color: white;
     z-index: 1;
 }

 .feature-img3::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("Assets/islamic\ history.jpg") no-repeat center/cover;
     opacity: 0.3;
     z-index: -1;
 }

 .feature-img4 {
     position: relative;
     color: white;
     z-index: 1;
 }

 .feature-img4::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("Assets/live\ classes.jpg") no-repeat center/cover;
     opacity: 0.3;
     z-index: -1;
 }

 .feature-img5 {
     position: relative;
     color: white;
     z-index: 1;
 }

 .feature-img5::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("Assets/bukhari.jpg") no-repeat center/cover;
     opacity: 0.3;
     z-index: -1;
 }

 .feature-img6 {
     position: relative;
     color: white;
     z-index: 1;
 }

 .feature-img6::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("Assets/certificate.jpg") no-repeat center/cover;
     opacity: 0.3;
     z-index: -1;
 }

 .feature-card:hover .feature-icon {
     transform: scale(1.1);
 }

 .feature-card h3 {
     font-size: 20px;
     color: black;
     margin-bottom: 12px;
 }

 .feature-card p {
     font-size: 16px;
     color: black;
 }
 /* Learning Paths */
 .learning-paths {
     margin-bottom: 60px;
     background: linear-gradient(135deg, #a9fac2, #f0fdfa);
     padding: 40px 20px;
     border-radius: 16px;
     border: 1px solid #c6f9de;
 }

 .learning-paths h2 {
     font-size: 28px;
     color: #1e293b;
     text-align: center;
     margin-bottom: 16px;
 }

 .learning-paths p {
     font-size: 16px;
     color: #475569;
     text-align: center;
     max-width: 500px;
     margin: 0 auto 32px;
 }

 .paths-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
 }

 @media (min-width: 768px) {
     .paths-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .path-card {
     padding: 24px;
     border-radius: 16px;
     border: 2px solid;
     text-align: center;
     transition: box-shadow 0.3s;
 }

 .path-card:hover {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .path-card h4 {
     font-size: 20px;
     color: #1e293b;
     margin-bottom: 12px;
 }

 .path-card .info {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin-bottom: 12px;
     font-size: 14px;
     color: #475569;
 }

 .path-card p {
     font-size: 14px;
     color: #475569;
 }

 /* Why Choose Us */
 .why-choose {
     background: linear-gradient(135deg, #064e3b 0%, #134e4a 60%, #0f172a 100%);
     padding: 32px;
     border-radius: 16px;
     border: 1px solid #e5e7eb;
 }

 .why-choose h2 {
     font-size: 28px;
     color: #64e6a9;
     text-align: center;
     margin-bottom: 32px;
 }

 .why-choose-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
 }

 @media (min-width: 768px) {
     .why-choose-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .why-choose-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .why-choose-item {
     text-align: center;
 }

 .why-choose-item .icon {
     width: 64px;
     height: 64px;
     border-radius: 9999px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 16px;
 }

 .why-choose-item h4 {
     font-size: 18px;
     color: #ffffff;
     margin-bottom: 8px;
 }

 .why-choose-item p {
     font-size: 14px;
     color: #69e7bd;
 }