.display-header { padding: 0px; margin: 0px; font-family: "Poppins", sans-serif; color: #00324c; font-size: 35px; font-weight: 300; line-height: 45px; padding-bottom: 20px; } .display-title { padding: 0px; margin: 0px; font-family: "Poppins", sans-serif; color: #00324c; font-size: 20px; font-weight: 300; line-height: 45px; padding-bottom: 20px; } .display-body { font-size: larger; padding: 0px; margin: 0px; font-family: "Poppins", sans-serif; color: #687377; font-size: 16px; font-weight: 300; } li.more-features-list-items { padding: 10px 10px 10px 0; unicode-bidi: isolate; margin: 0px; display: list-item; } ul.more-features-list { font-size: 16px; font-weight: 300; list-style-type: none; margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; unicode-bidi: isolate; display: block; position: relative; margin-left: 10px; padding: 10px 0 0 0; display: block; } .list-item { border-bottom: 1px #d6d7d7 solid; } .autoplay-progress { position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--swiper-theme-color); } .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 4px; stroke: var(--swiper-theme-color); fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); } .login-pg-swiper { width: 80vw; /* 80% of viewport width */ height: 70vh; /* 70% of viewport height */ margin: auto; /* Center the swiper container */ } .swiper-slide img.login-pg-img-swiper { display: block; width: 100%; /* Image takes full width of the slide (which is 80vw) */ height: 100%; /* Image takes full height of the slide (which is 70vh) */ object-fit: contain; /* Ensures the entire image is visible without stretching, maintaining aspect ratio */ }