:root {
            --spacing-card: 15%;
        }

        html {
            overflow-x: hidden !important;
            overflow-y: visible !important;
        }


        @keyframes slideUp {
            0% {
                transform: translateY(30px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .title-text span {
            height: 100%;
            overflow: visible;
        }

        .ywl-bg-r {
            box-shadow: 3px 8px 24px 2px #0000003d;
            border-radius: 2vh !important;
        }

        .circular-section {
            position: relative;
            height: 80vh;
            overflow: hidden;
        }

        .circular-section .carousel {
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-150px, -200px);
            transform-origin: 150px 3200px;
            will-change: transform;
        }

        .wrapper {
            position: absolute;
            height: 100vh;
            transform-origin: 150px 3000px;
        }

        .wrapper div {
            width: 400px;
            height: 620px;
        }

        .swiper-card {
            display: flex;
            align-items: baseline;
            justify-content: center;
            /* background: #fca802; */
            height: 100%;
            width: 90%;
            border-radius: 2vh;
        }

        .swiper-card p {
            color: #003366;
            font-size: 1vw;
            line-height: 160%;
        }

        .swiper-card>div {
            /* font-size: 22px; */
            font-weight: bold;
            /* aspect-ratio: 2 / 3; */
            width: auto;
            color: #fff;
            border-radius: 50em;
            padding: 2rem;
            text-align: left;
        }

        .swiper-card--1 {
            background: #fff;
            box-shadow: 10px 12px 0px 0px #ecb250;
        }

        .swiper-card--2 {
            background: #ffffff;
            box-shadow: 10px 12px 0px 0px #003366;
        }

        .swiper-card--3 {
            background: #ffffff;
            box-shadow: 10px 12px 0px 0px hsl(201.7deg 100% 36.86%);
        }

        .swiper-card--4 {
            background: #ffffff;
            box-shadow: 10px 12px 0px 0px #003f66;
        }

        .over-lap {
            overflow: scroll;
        }

        .log-img {
            width: 100px !important;
            height: 100px !important;
            margin: auto;
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .log-img img {
            width: 100%;
        }

        hr.bg-black {
            background: transparent !important;
            border-bottom: 2px dotted #134168;
        }

        @media (max-width:1602px) {
            .wrapper div {
                width: 390px;
                height: 470px;
            }

            .circular-section .carousel {
                top: 40%;
            }

            .circular-section {
                height: 100vh;
            }
        }

        @media (max-width: 1500px) {
            .wrapper div {
                width: 290px;
                height: 470px;
            }

            .circular-section .carousel {
                transform-origin: 150px 2600px;
            }

            .wrapper {
                transform-origin: 150px 2400px;
            }

            .swiper-card p {
                font-size: 1.1vw;
            }


        }

        @media (max-width:767px) {
            .main {
                margin-bottom: 9vh !important;
            }

            .circular-section {
                overflow: visible !important;
            }

            .swiper-card p {
                font-size: 3.5vw;
                line-height: 5.4vw;
            }

            .swiper-card h2 {
                font-size: 5vw;
            }

            .wrapper div {
                width: 300px;
                height: 540px;
            }

            .wrapper {
                transform-origin: 150px 2590px;
            }

            .circular-section {
                height: 70vh;
            }

        }

        .title-text span {
            line-height: 1.1;
            overflow: visible;
            height: 100%;
        }