.video-container { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; cursor: pointer; border-radius: 30px; } .video-container .text{ position: absolute; bottom: 40px; left: 0; background-color: white; padding: 20px 20px; border-radius: 30px; margin:0 5px; } .video-container .text p{ color:#483286 ; } .video-container .name{ position: absolute; bottom: 0; left: 0; background-color: white; display: flex; justify-content: space-between; padding: 20px 20px; border-radius:0 0 30px 30px; border-top: 1px solid #483286; margin:0 5px 5px 5px; width: 100%; } .video-container .name h4{ color:#483286 ; } .video-container video { width: 100%; height: 100%; object-fit: cover; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: white; background: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease-in-out; } .video-container:hover .play-button, .video-container:hover .text { opacity: 0; /* Hide play button on hover */ } .video-container:hover .name { border: 0; border-radius: 30px; } /* universities image slider */ .swiper-universities { width: 100%; height: auto; /* padding-bottom: 100px !important; */ /* overflow: hidden; */ } .swiper-universities .swiper-wrapper{ display: flex; /* justify-content: center; */ gap: 0px; /* align-items: center; */ transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out; padding-top: 30px; /* padding-bottom: 90px; margin-bottom: 90px; */ width: 100%; } .swiper-universities .swiper-slide { height: 150px; /* margin: 30px 0; */ /* padding-bottom: 90px; */ margin-bottom: 120px; /* padding: 30px; */ } .swiper-universities .swiper-slide .text h3{ font-size: 12px; text-align: center; } .swiper-universities .swiper-slide .image img{ height: 100%; width: 100%; border-radius: 10px; } @media (min-width:768px) { .swiper-universities .swiper-slide .image img{ border-radius: 30px; } .swiper-universities .swiper-slide .text h3{ font-size: 18px; } } .swiper-universities .swiper-slide .image { width: 100%; height: 100%; transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out; filter: grayscale(10%); /* Default blur and grayscale effect */ position: relative; object-fit: cover; } .swiper-universities .swiper-slide .image .text{ position: absolute; left: 10%; bottom: 10%; } .swiper-universities .swiper-slide-active .image{ transform: scale(1.1); /* Increase size */ filter: blur(0) grayscale(0); /* Default blur and grayscale effect */ } /* .swiper-universities .swiper-slide-active .image .text h3{ background-color: black; padding: 5px; color: white; } */ /* about page teacher slider */ .swiper-teachers { width: 90%; height: auto; margin: auto; padding-bottom: 100px !important; /* overflow: hidden; */ } .swiper-teachers .swiper-wrapper{ display: flex; /* justify-content: center; */ gap: 0px; align-items: center; transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out; padding-top: 30px; height: auto; } .swiper-teachers .swiper-slide { height: 300px; width: 570px; margin: 30px 0; /* padding: 30px; */ } .swiper-teachers .swiper-slide .image { width: 100%; transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out; filter: grayscale(10%); /* Default blur and grayscale effect */ position: relative; } .swiper-teachers .swiper-slide .image .text{ background-color: var(); width: 60%; position: absolute; left: 20%; bottom: -10%; padding:10px 20px; /* transform: skewY(10deg); */ } .swiper-teachers .swiper-slide .image img{ height: 100%; width: 100%; border-radius: 30px; /* transform: skewY(10deg); */ } .swiper-teachers .swiper-slide-active .image{ transform: scale(1.1); /* Increase size */ filter: blur(0) grayscale(0); /* Default blur and grayscale effect */ } /* .swiper-teachers .swiper-slide-active .image .text h3{ background-color: black; padding: 5px; color: white; } */ .swiper-events .swiper-slide { height: 390px !important; /* margin-right: 20px !important; */ } .swiper-events .blog-post { height: 550px !important; } .swiper-events .swiper-button-next{ right: -10px !important; top: 30% !important; } .swiper-events .swiper-button-prev{ left: -9px !important; top: 30% !important; } .swiper-events .swiper-button-next::after, .swiper-events .swiper-button-prev::after{ color: #000000 !important; font-size: 14px !important; font-weight: bold; } /* banner slider */ .swiper-banner { width: 100%; margin-top: -30px; } @media (min-width:992px) { .swiper-banner { /* width: 80%; */ margin-top: -50px; } } .swiper-banner .swiper-wrapper{ display: flex; /* justify-content: center; */ /* gap: 30px; */ align-items: center; /* padding-top: 30px; */ /* margin-bottom: 30px; */ } .swiper-banner .swiper-slide { /* min-height: 120px !important; */ width: 00px ; padding: 0 50px; /* border: 1px solid black; */ /* box-shadow: 0 5px 10px gray; */ /* border-radius: 30px; */ } @media (min-width:1199px) { .swiper-banner .swiper-slide { /* min-height: 120px !important; */ width: 100%; } } .swiper-banner video{ width: 100%; height: 300px; border-radius: 200px 50px 200px 200px; object-fit: cover; /* border-radius: 100%; */ } .swiper-banner .swiper-button-next::after, .swiper-banner .swiper-button-prev::after{ color: #1856A6 !important; font-size: 20px !important; font-weight: bold; } @media (min-width:768px) { .swiper-banner video{ width: 100%; height: 300px; } } @media (min-width:992px) { .swiper-banner video{ height: 350px; border-radius: 500px 50px 500px 500px; } } @media (min-width:1200px) { .swiper-banner video{ height: 400px; border-radius: 500px 50px 500px 500px; } } /* responsive */ @media (max-width:576px) { .swiper-universities .swiper-slide{ width: 119px; } } @media (min-width:576px) { .swiper-universities .swiper-slide{ width: 119px; } } @media (min-width:768px) { .swiper-universities .swiper-slide{ height: 200px; width: 240px; } } @media (min-width:992px) { .swiper-universities .swiper-slide{ height: 200px; width: 194px; } } @media (min-width:1200px) { .swiper-universities .swiper-slide{ height: 230px; width: 262px; } } /* new css for swipers */ .mySwiper-text { width: 100%; height: 100%; padding-left: 10px !important; padding-right: 10px !important; } .mySwiper-text .swiper-slide { text-align: center; font-size: 18px; /* background: #fff; */ display: flex; justify-content: center; align-items: center; } .mySwiper-text .swiper-slide .box { padding: 10px 20px; background-color: white; box-shadow: 0 5px 10px rgb(194, 191, 191); border-radius: 20px; width: 100%; margin: 20px 0; } .mySwiper-text .swiper-button-next::after, .mySwiper-text .swiper-button-prev::after{ color: #1856A6 !important; font-size: 20px !important; font-weight: bold; padding: 10px 15px ; background-color: rgba(255, 255, 255, 0.37); border-radius: 100%; } /* for uni image */ /* .swiper.mySwiper-unis { overflow: visible; } */ .mySwiper-unis { /* width: 100%; */ /* height: 100%; */ margin-top: -22px; padding-left: 3px !important; padding-right: 3px !important; padding-top: 5px !important; padding-bottom: 5px !important; } .mySwiper-unis .swiper-slide { text-align: center; height: 120px; font-size: 18px; background: #fff; display: flex; justify-content: center; padding:80px 20px; box-shadow:0 0px 10px rgba(0, 0, 0, 0.25); border-radius: 20px; margin-bottom: 40px; align-items: center; } .mySwiper-unis .swiper-slide .box { padding: 10px 20px; background-color: white; filter: drop-shadow(30px 10px 12px rgb(122, 122, 122)) ; border-radius: 20px; width: 100%; margin: 20px 0; } .mySwiper-unis .swiper-button-next::after, .mySwiper-unis .swiper-button-prev::after{ color: #1856A6 !important; font-size: 20px !important; font-weight: bold; padding: 10px 15px ; background-color: rgba(255, 255, 255, 0.37); border-radius: 100%; } /* testimonial video */ .mySwiper-video { width: 80%; height: 100%; } .mySwiper-video .swiper-slide { text-align: center; font-size: 18px; /* background: #fff; */ display: flex; justify-content: center; align-items: center; /* margin-right: 10px !important; */ } .mySwiper-video .swiper-button-next::after, .mySwiper-video .swiper-button-prev::after{ color: #1856A6 !important; font-size: 20px !important; font-weight: bold; padding: 10px 15px ; background-color: rgba(255, 255, 255, 0.37); border-radius: 100%; } /* achievements */ .mySwiper-img { width: 100%; height: 100%; } .mySwiper-img .swiper-slide { height: 200px; text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; /* margin-right: 10px !important; */ } .mySwiper-img .swiper-slide img{ height: 100%; width: 100%; object-fit: cover; } .mySwiper-img .swiper-button-next::after, .mySwiper-img .swiper-button-prev::after{ color: #1856A6 !important; font-size: 20px !important; font-weight: bold; padding: 10px 15px ; background-color: rgba(255, 255, 255, 0.37); border-radius: 100%; } /* achievements */ .mySwiper-team { width: 100%; height: 320px; } @media (min-width:1200px) { .mySwiper-team { width: 100%; height: 390px; } } .mySwiper-team .swiper-slide { height: 90%; text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; margin-top: 10px !important; } .mySwiper-team .swiper-slide img{ height: 100%; width: 100%; object-fit: cover; } .mySwiper-team .swiper-button-next::after, .mySwiper-team .swiper-button-prev::after{ color: #1856A6 !important; font-size: 20px !important; font-weight: bold; padding: 10px 15px ; background-color: rgba(255, 255, 255, 0.37); border-radius: 100%; } .mySwiper-team .swiper-slide .image { width: 100%; height: 100%; transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out; filter: grayscale(10%); /* Default blur and grayscale effect */ position: relative; } .mySwiper-team .swiper-slide .image .text{ background-color: var(); width: 60%; position: absolute; left: 20%; bottom: -10%; padding:10px 20px; /* transform: skewY(10deg); */ } .mySwiper-team .swiper-slide .image img{ height: 100%; width: 100%; border-radius: 20px; /* transform: skewY(10deg); */ }