/* css for course */ .courses-section { text-align: center; padding: 50px 0; } .course-card { background-color: #fff; border-radius: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 32px; display: inline-block; width: 300px; height: auto; transition: transform 0.3s ease-in-out; } .course-image:hover { transform: scale(1.09); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); filter: brightness(70%) ; } .course-image { width: 100%; height: 200px; background: rgba(3,3,3,.5); object-fit: cover; border-bottom: 2px solid #3498db; transition: all 500ms ease-in-out 0s; } .course-details { padding: 20px; } h3 { margin-top: 0; font-size: 24px; color: #243865; } .course-description { margin-bottom: 10px; color: #555; font-size: 16px; line-height: 1.6; } .enroll-button { display: inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; text-decoration: none; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease-in-out; } .enroll-button:hover { background-color: #2364aa; } .more-link { color: #3498db; text-decoration: none; cursor: pointer; font-weight: bold; margin-left: 5px; } .less-link { color: #3498db; text-decoration: none; cursor: pointer; font-weight: bold; margin-left: 5px; display: none; } .less-link:hover { text-decoration: underline; } .more-link:hover { text-decoration: underline; } /*css for show services */ .videocontainers{ padding-top: 97px; } .videocontainer iframe:hover { /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */ filter: brightness(100%) ; } .videocontainer { position: relative; width: 100%; height: 0; border-radius: 20px; padding-bottom: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; } .videocontainer iframe { position: absolute; top: 0; left: 0; width: 100%; border-radius: 20px; height: 100%; filter: blur(1px) brightness(70%); } .project-card { background-color: #f8f9fa; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .project-title { color: #343a40; margin-bottom: 10px; } .project-description { color: #6c757d; font-size: 16px; line-height: 1.5; } .count-section { display: flex; justify-content: space-around; padding-left: 30px; margin-top: 30px; padding-bottom: 70px; } .count-card { text-align: center; background-color: #fff; padding: 20px; border-radius: 85px; } .count-card:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); filter: brightness(80%) ; } .count-card .icon { width: 100px; height: 38px; padding-right: 50px; margin-bottom: 30px; } .count-card h3 { color: #333; margin-bottom: 10px; } .count-card p { font-size: 30px; font-weight: bold; color: #007bff; } @media only screen and (max-width: 768px) { .count-section { flex-direction: column; align-items: center; } .count-card { width: 60%; margin: 20px; margin-right: 0; } }