html, body{
    font-family: Arial;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw; 
}

*{
    max-width: 100vw; 
    box-sizing: border-box;
}

.homepage-container{

    .first-section{
        position: relative;
        display: flex;
        flex-direction: column;
        background-image: url(/public/images/home-page/first-section.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: auto;
        min-height: 120vh;
        margin-bottom: clamp(20px,5vw,80px);

        @media only screen and (max-width: 1100px){
            background-image: url(/public/images/home-page/first-section-mobile.png);
            background-size: cover;
            background-position: center 20%;
            height: 100vh !important;
        }
        
        .first-section-content{
            display: flex;
            justify-content: center;
            gap: clamp(50px,30vw,350px);
            align-items: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;

            @media only screen and (max-width: 1120px){
                top: 10%;
                left: 50%;
                transform: translate(-50%, -10%);
                flex-direction: column;
                width: 100%;
                gap: clamp(20px,5vw,30px);
            }

            /* .left-content{
                display: flex;
                flex-direction: column;
                gap: clamp(0px,1vw,30px);
                width: min(450px,90%);

                .title{
                    font-family: Geologica;
                    font-weight: 700;
                    font-size: clamp(52px, 7vw, 105px);
                    line-height: clamp(50px, 7vw, 90px);
                    color: #fff;
                    text-transform: uppercase;
                    word-spacing: 100vw;
                    text-align: right;

                    @media only screen and (max-width:1120px){
                        text-align: center;
                    }
                }

                .sub-title{
                    font-family: Barlow;
                    font-weight: 700;
                    font-size: clamp(20px,1vw,24px);
                    line-height: clamp(23,1vw,28.8px);
                    color: #ffffff;
                    text-align: right;
                    margin: 0;

                    @media only screen and (max-width:1120px){
                        text-align: center;
                    }
                }

                .sub-title span{
                    display: block;
                }
            }

            .right-content{
                display: flex;
                flex-direction: column;
                justify-content: center;
                max-width: 400px;
                gap: 20px;
                margin-top: 60px;
                
                @media only screen and (max-width:1120px){
                    margin-top: 0px;
                    align-items: center;
                    text-align: center;
                    width: 90%;
                }

                .game-button{
                    background-color: #003DA6;
                    border: none;
                    border-radius: 7.5px;
                    padding: 10px 30px;
                    width: fit-content;
                    color: #FFFFFF;
                    font-weight: 700;
                    font-size: 12px;
                    cursor: pointer;
                }

            }

            .right-content span{
                color: #fff;
                font-family: Arial;
                font-size: clamp(20px,2vw,24px);
                line-height: 20px;
                font-weight: 600;

            } */
        }

        .hydrate-icon{
            position: absolute;
            left: clamp(10%,16vw,18%);
            top: 40%;
            height: 245px;
            width: 195px;

            @media only screen and (max-width:1100px){
                left: auto;
                top: 52%;
                right: 15%;
                height: clamp(101px,15vw,121px);
                width: clamp(80px,12vw,96px);
            }
        }

        .disclaimer-container{
            width: 320px;
            position: absolute;
            left: 100px;
            bottom: 100px;

            @media only screen and (max-width:768px){
                width: 90%;
                left: 50%;
                bottom: 1%;
                transform: translateX(-50%) translateY(-98%);
            }

            .disclaimer{
                color: #FFFFFF;
                margin: 0;
                font-family: Arial;
                font-weight: 400;
                font-size: clamp(6px,1vw,8px);
            }
        }

        .first-section-footer{
            pointer-events: none;
            position: absolute;
            bottom: 0;
            width: 100%;
            margin-bottom: max(-100px, -4vw);;
        }

        .scroll-down {
            position: fixed;
            bottom: 5%;
            left: 50%;
            height: 50px; 
            width: 30px;
            border: 2px solid #fff; 
            border-radius: 50px;
            cursor: pointer;
            z-index: 100;
            transition: opacity 1s ease;
            transform: translateX(-50%);
        }

        .scroll-down::before,
        .scroll-down::after {
            content: '';
            position: absolute;
            left: 50%;
            width: 8px;
            height: 8px;
            border: 2px solid #fff;
            border-top: transparent;
            border-left: transparent;
            transform: translate(-50%, 0) rotate(45deg);
        }

        .scroll-down::before {
            top: 30%;
        }

        .scroll-down::after {
            top: 50%;
        }

        .scroll-down.hide {
            opacity: 0;
            pointer-events: none;
        }
    }

    .second-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        background: #EFF4F6 url(/public/images/home-page/second-section.png);
        background-size: 410px auto;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: clamp(10px,1vw,20px);
        position: relative;

        @media only screen and (max-width: 910px){
            background: #EFF4F6 url(/public/images/home-page/second-section-mobile.png);
            background-position: right center; 
            background-repeat: no-repeat;
            background-size: auto 100%;
            height: 553px;
        }

        @media only screen and (max-width: 370px) {
            background: #EFF4F6 url(/public/images/home-page/second-section-mobile.png);
            background-position: calc(100% + 40px) center;
            background-repeat: no-repeat;
            background-size: auto 100%;
            height: 553px;
        }

        .mobile-left-arrow-container{
            position: absolute;
            top: 53%;
            left: 10px;
            transform: translateY(-47%) rotate(180deg);
            background-color: #ffffff;
            border-radius: 100%;
            padding: 5px 8px;
            width: fit-content;
            height: fit-content;
            display: flex;
            cursor: pointer;
            display: none;
            border: 1px solid #000000;


            .left-arrow{
                height: 18px;
                width: 12px;
            }

            @media only screen and (max-width: 910px){
                display: flex;
            }
        }

        .mobile-right-arrow-container{
            position: absolute;
            top: 53%;
            right: 10px;
            transform: translateY(-47%);
            background-color: #ffffff;
            border-radius: 100%;
            width: fit-content;
            height: fit-content;
            display: flex;
            padding: 5px 8px;
            cursor: pointer;
            display: none;
            border: 1px solid #000000;

            .right-arrow{
                height: 18px;
                width: 12px;
            }

            @media only screen and (max-width: 910px){
                display: flex;
            }
        }

        .second-section-content{
            display: flex;
            justify-content: space-between;
            align-items: start;
            width: min(1300px,95%);
            margin-bottom: 71px;
            margin-top: 229px;

            @media only screen and (max-width: 910px){
                justify-content: center;
                margin: 0;
            }
    
            .left-content{
                width: clamp(182px,30vw,400px);
                justify-content: center;
                display: flex;
                flex-direction: column;
                text-align: right;

                @media only screen and (max-width: 910px){
                    width: clamp(172px,46vw,400px);
                    height: 486px;
                }

                @media only screen and  (max-width:460px){
                    margin-left: 30px;
                }

                .middle-content{
                    gap: clamp(20px,2vw,30px);
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                    align-items: end;

                    @media only screen and (max-width:910px) and (min-width:700px){
                        text-align: center;
                        align-items: center;
                    }

                    .title{
                        font-family: Geologica;
                        font-weight: 700;
                        font-size: clamp(20px,2vw,32px);
                        line-height: clamp(20px,2vw,30px);
                        text-transform: uppercase;
                    }
    
                    .title span{
                        display: block;
                    }
        
                    .sub-title{
                        font-family: Arial;
                        font-weight: 700;
                        font-size: clamp(12px,1vw,16px);
                    }
        
                    .description{
                        font-family: Arial;
                        font-weight: 400;
                        font-size: clamp(12px,1vw,14px);
                        line-height: clamp(13.8px,1vw,16px);
                    }

                    .description.desktop{
                        
                        @media only screen and (max-width: 910px){
                            display: none !important;
                        }
                    }

                    .mobile-only{
                        display: none;
                        flex-direction: column;
                        gap: 8px;

                        @media only screen and (max-width: 910px){
                            display: flex;
                        }

                        .mobile-content{
                            display: flex;
                            align-items: center;
                            justify-content: right;
    
                            .mobile-img{
                                max-height: 40px;
                                width: auto;
                            }
    
                            .mobile-sub-title{
                                font-family: Arial;
                                font-weight: 700;
                                font-size: 12px;
                                line-height: 12px;
                                max-width: 129px;
                                margin: 0px;
                            }
    
                            .mobile-sub-title.first{
                                color: #003DA6;
                            }
    
                            .mobile-sub-title.second{
                                color: #C7372E;
                            }
    
                            .mobile-sub-title.third{
                                color: #3C9947;
                            }
                        }
                    }
    
                    .buy-button{
                        background-color: #003DA6;
                        border: none;
                        text-decoration: none;
                        border-radius: 7.5px;
                        padding: 10px 30px;
                        width: fit-content;
                        color: #FFFFFF;
                        font-weight: 700;
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
            }

            @media only screen and (max-width: 910px){
                .left-content.none{
                    display: none !important;
                }
            }
    
            .right-content{
                width: clamp(182px,30vw,400px);
                gap: 30px;
                display: flex;
                flex-direction: column;

                @media only screen and (max-width: 910px){
                    display: none;
                    width: min(329px,75%);
                    margin-top: 35px;
                }
    
                .title{
                    font-family: Geologica;
                    font-weight: 700;
                    font-size: clamp(20px,2vw,32px);
                    line-height: clamp(20px,2vw,30px);
                    text-transform: uppercase;
                    display: none;

                    @media only screen and (max-width: 910px){
                        display: block;
                    }
                }

                .group-item{
                    display: flex;
                    gap: 10px;
                    position: relative;
                    flex-direction: row;

                    @media only screen and (min-width:910px){
                        flex-direction: column;
                        padding-inline: 20px;
                    }

                    .left-arrow{
                        position: absolute;
                        left: -12px;
                        top: 50%;
                        transform: translateY(-50%) rotate(180deg);
                        z-index: 99;
                        cursor: pointer;

                        @media only screen and (max-width: 910px){
                            display: none !important;
                        }
                    }

                    .right-arrow{
                        position: absolute;
                        right: -12px;
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 99;
                        cursor: pointer;

                        @media only screen and (max-width: 910px){
                            display: none !important;
                        }
                    }

                    .group-img{
                        width: 36px;
                        height: 35px;

                        @media only screen and (min-width: 910px){
                            width: fit-content;
                            height: 75px;
                            max-width: 80px;
                        }
                    }

                    group-content{
                        display: flex;
                        flex-direction: column;
                    }

                    .sub-title{
                        max-width: 328px;
                        font-family: Arial;
                        font-weight: 700;
                        font-size: clamp(12px,1vw,16px);
                        line-height: clamp(13.8,1vw,18.4px);
                        margin-bottom: clamp(4px,1vw,10px);

                        @media only screen and (min-width: 910px){
                            font-family: Geologica;
                            font-weight: 700;
                            font-size: clamp(20px,2vw,26px);
                            line-height: 30px;
                        }
                    }

                    .sub-title.second{
                        color: #C7372E;
                    }

                    .sub-title.thrid{
                        color: #3C9947;
                    }
        
                    .description{
                        font-family: Arial;
                        font-weight: 400;
                        font-size: clamp(10px,1vw,14px);
                        line-height: clamp(11.5px,1vw,16px);
                        min-height: 48px;

                        @media only screen and (max-width: 910px) {
                            min-height: auto;
                        }
                    }

                }

                .group-item.none{
                    display: none !important;

                    @media only screen and (max-width: 910px){
                        display: flex !important;
                    }
                }

                .disclaimer{
                    margin-top: 174px !important;
                    min-height: 44px;
                    font-family: Arial;
                    font-weight: 400;
                    font-size: clamp(8px,5vw,10px);
                    color: #003DA6;
                    margin: 0;
                    display: block;

                    @media only screen and (max-width:910px){
                        margin-top: 10px !important;
                        font-size: clamp(5px,5vw,6px);
                        min-height: auto;
                    }

                    .link{
                        color: #003DA6;
                    }
                }

                .disclaimer.none{
                    display: none !important;

                    @media only screen and (max-width:910px){
                        display: block !important;
                    }
                }

                .desktop-pagination-container{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-inline: 20px;
                    
                    @media only screen and (max-width: 910px){
                        display: none;
                    }
        
                    .desktop-pagination-second-section{
                        display: flex;
                        align-items: center;
                        gap: 10px;
        
                        .first-button{
                            background-color: #003DA6;
                        }
        
                        .second-button{
                            background-color: #F5333F;
                        }
        
                        .third-button{
                            background-color: #00953B;
                        }
                    }
        
                    .desktop-pagination-second-section button{
                        cursor: pointer;
                        border: none;
                        width: 27px;
                        height: 7px;
                        border-radius: 40px;
                        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    }
        
                    .desktop-pagination-second-section button.active{
                        width: 63px;
                    }

                    .arrow-gif{
                        width: 100px;
                        height: 100px;
                    }
                }
            }

            @media only screen and (max-width:910px){
                .right-content.display {
                    display: flex !important;
                }
            }

            /* .motto{
                font-family: Arial;
                font-weight: 700;
                font-size: clamp(10px,1vw,14px);
                color: #003DA6;

                @media only screen and (max-width: 910px){
                    margin-left: 46px;
                }
            } */
        }

        @media only screen and (max-width:700px){

            .second-section-content.justify-between {
                justify-content: space-between;
            }
        }
    
        .second-section-content p{
            margin: 0;
            color: #003DA6;
        }

        .mobile-pagination-container{
            bottom: 5%;
            position: absolute;
            display: none;
            justify-content: start;
            align-items: center;
            flex-direction: column;
            
            @media only screen and (max-width: 910px){
                display: flex;
            }

            .mobile-pagination-second-section{
                display: flex;
                align-items: center;
                gap: 10px;

                .first-button{
                    background-color: #003DA6;
                }

                .second-button{
                    background-color: #F5333F;
                }

                .third-button{
                    background-color: #00953B;
                }
            }

            .mobile-pagination-second-section button{
                cursor: pointer;
                border: none;
                width: 27px;
                height: 7px;
                border-radius: 40px;
                transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .mobile-pagination-second-section button.active{
                width: 63px;
            }
        }
    }

    @media only screen and (max-width: 910px){

        .second-section.no-image {
            background: #EFF4F6 !important;
        }
    }

    .third-section{
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url(/assets/images/background-water-flow.jpg);
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        height: auto;
        min-height: 433px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(10px,1vw,20px);
        padding-bottom: clamp(40px,5vw,70px);

        @media only screen and (max-width: 1120px){
            padding-top: 40px;
        }

        .enter-button{
            background-color: #003DA6;
            border: none;
            text-decoration: none;
            border-radius: 7.5px;
            padding: 10px 30px;
            width: fit-content;
            color: #FFFFFF;
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
        }

        .title{
            font-family: Geologica;
            font-weight: 700;
            font-size: 28px;
            color: #003DA6;
            text-transform: uppercase;
            width: 90%;
            text-align: center;
        }

        .third-section-content{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            width:930px;

            @media only screen and (max-width: 1120px){
                flex-direction: column;
                gap: 40px;
                margin-top: 40px;
                width: 100%;
            }

            .item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: min(300px,95%);
                text-align: center;

                .icon{
                    width: 150px;
                }

                .icon.last{
                    width: 120px !important;
                    margin: 7.5px 0px;
                }

                .steps {
                    color: #003DA6;
                    font-family: Geologica;
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 30px;
                }

                .step-description{
                    color: #003DA6;
                    font-family: Arial;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 20px;

                    @media only screen and (max-width: 768px){
                        font-size: 14px;
                        line-height: 18px;
                    }
                }
            }
        }

        .disclaimer{
            font-family: Barlow;
            color: #003DA6;
            font-size: 10px;
            font-weight: 600;
            line-height: 12px;
            text-align: center;

            @media only screen and (max-width:1120px){
                margin-bottom: 40px;
            }
        }

        .disclaimer a {
            text-decoration: none;
            color: #003DA6;
            font-weight: 800;
            cursor: pointer;
        }

        .blue-container{
            background: #003DA6;
            width: min(930px,90%);
            border-radius: 50px;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            

            .container-title{
                width: 90%;
                margin-top: 51px;
                margin-bottom: 20px;
                font-family: Geologica;
                font-weight: 700;
                font-size: 28px;
            }

            .container-content{
                display: flex;
                gap: 1px;
                margin-bottom: 51px;

                @media only screen and (max-width:930px){
                 flex-direction: column; 
                 gap: 22px;  
                }
                
                .content{
                    display: flex;
                    width: 237px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    position: relative;
                    text-align: center;

                    .text{
                        margin: 10px;
                        font-size: 24px;
                        font-weight: 700;
                    }

                    .text span{
                        display: block;
                    }

                    .chances{
                        font-family: Geologica;
                        font-weight: 700;
                        font-size: 28px;
                    }
                }

                .content:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    right: -15px;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 80%;
                    width: 1px;
                    background-color: white;

                    @media only screen and (max-width:930px){
                        height: 1px;
                        width: 80%;
                        top: auto;
                        bottom: -15px;
                        left: 50%;
                        right: auto;
                        transform: translateX(-50%);
                    }
                }
            }
        }
        .blue-container p {
            color: #FFFFFF;
            margin: 0;
        }
    }

    .forth-section{
        background: #EFF4F6;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-bottom: 60px;
        margin-bottom: clamp(10px,1vw,20px);
        position: relative;

        .forth-section-title{
            margin-top: 60px;
            margin-bottom: 60px;
            color: #003DA6;
            font-family: Geologica;
            font-weight: 700;
            font-size: 28px;
            line-height: 35px;
            text-transform: uppercase;
            text-align: center;
            width: 95%;

            @media only screen and (max-width: 768px){
                margin-top: 80px;
            }

            @media only screen and (max-width: 1120px){
                margin-bottom: 80px;
            }
        }

        .slider-arrow-left{
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
            cursor: pointer;
            z-index: 2;
            @media only screen and  (max-width: 620px){
                display: none;
            }
        }

        .slider-arrow-right{
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 2;

            @media only screen and  (max-width: 620px){
                display: none;
            }
        }

        .slider-container{
            position: relative;

            .slide{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 46px;

                @media only screen and (max-width: 1120px){
                    flex-direction: column;
                }

                .image-container{
                    position: relative;
                    display: inline-block;
                    overflow: visible; 

                    .left-arrow-container{
                        position: absolute;
                        top: 49%;
                        left: 10px;
                        transform: translateY(-51%) rotate(180deg);
                        background-color: #ffffff;
                        border-radius: 100%;
                        padding: 5px 8px;
                        width: fit-content;
                        height: fit-content;
                        display: flex;
                        cursor: pointer;
                        z-index: 999;
                        display: none;


                        .left-arrow{
                            height: 18px;
                            width: 12px;
                        }

                        @media only screen and (max-width: 620px){
                            display: flex;
                        }
                    }

                    .right-arrow-container{
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        transform: translateY(-50%);
                        background-color: #ffffff;
                        border-radius: 100%;
                        width: fit-content;
                        height: fit-content;
                        display: flex;
                        padding: 5px 8px;
                        cursor: pointer;
                        z-index: 999;
                        display: none;

                        .right-arrow{
                            height: 18px;
                            width: 12px;
                        }

                        @media only screen and (max-width: 620px){
                            display: flex;
                        }
                    }

                    .content-img{
                        position: relative;
                        max-width: 537px;
                        max-height: 285px;
                        z-index: 10;
        
                        @media only screen and (max-width: 537px){
                            width: 100%;
                        }
                    }

                    .badge{
                        position: absolute;
                        top: -78px;
                        left: -120px;
                        z-index: 11;

                        @media only screen and (max-width: 1120px){
                            left: 35%;
                            transform: translateX(-65%);
                        }

                        .prize-money-badge{
                            width: clamp(124px,15vw,164px);
                        }
                    }

                }
    
                .text-content{
                    width: min(400px,90%);
                    display: flex;
                    align-items: start;
                    justify-content: center;
                    flex-direction: column;
                    color: #003DA6;
                    position: relative;
                    gap: 9px;
                    margin: 0px;
    
                    @media only screen and (max-width: 1120px){
                        align-items: center;
                    }

                    .winner-badge {
                        width: clamp(85px,10vw,107px); 
                        height: clamp(85px,10vw,107px);
                        background-color: #003DA6;
                        color: white;
                        border-radius: 50%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        position: absolute;
                        top: -77px;
                        right: 0;
                        transform: rotate(-15deg);
                        z-index: 10;

                        @media only screen and (max-width: 1120px){
                            left: 0;
                        }

                        .number {
                            font-size: clamp(50px,5vw,70px);
                            font-weight: bold;
                            margin: 0;
                            line-height: 1;
                        }

                        .number.more-winner{
                            font-size: clamp(30px,5vw,50px);
                        }
                        
                        .text {
                            font-size: clamp(12px,1vw,14px);
                            font-weight: bold;
                            text-transform: uppercase;
                            margin: 0;
                            line-height: 1;
                        }
                    }
    
                    .title{
                        font-family: Geologica;
                        font-weight: 700;
                        font-size: 24px;
                        line-height: 30px;
                        text-align: left;
                        margin: 0px;
    
                        @media only screen and (max-width: 1120px){
                            text-align: center;
                        }
                    }
    
                    .sub-title{
                        font-family: Arial;
                        font-weight: 700;
                        font-size: 21px;
                        line-height: 24px;
                        text-align: left;
                        margin: 0px;
    
                        @media only screen and (max-width: 1120px){
                            text-align: center;
                            font-size: 21px;
                            line-height: 27px;
                            min-height: 84px;
                        }
                    }
    
                    .description{
                        font-family: Arial;
                        font-weight: 400;
                        font-size: 18px;
                        line-height: 20px;
                        text-align: left;
                        margin: 0px;
                        height: clamp(36px,1vw,40px);
    
                        @media only screen and (max-width: 1120px){
                            text-align: center;
                            margin-bottom: 40px;
                        }
    
                        @media only screen and (max-width:768px){
                            font-size: 14px;
                            line-height: 18px;
                        }
                    }
    
                    .short-line-img{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .pagination-container{
                        display: flex;
                        justify-content: start;
                        align-items: center;
                        
                        @media only screen and (min-width: 1120px){
                            margin-top: 31px;
                        }

                        .pagination-forth-section{
                            display: flex;
                            align-items: center;
                            gap: 10px;
            
                            .first-button{
                                background-color: #003DA6;
                            }
            
                            .second-button{
                                background-color: #F5333F;
                            }
            
                            .third-button{
                                background-color: #00953B;
                            }
                        }
            
                        .pagination-forth-section button{
                            border: none;
                            width: 27px;
                            height: 7px;
                            border-radius: 40px;
                            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                        }
            
                        .pagination-forth-section button.active{
                            width: 63px;
                        }
                    }
                }
            }
        }
    }

    .fifth-section{
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(21px,5vw,40px);
        margin-bottom: 60px;

        @media only screen and (max-width:950px){
            margin-bottom: 0px;
        }
        
        .header{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            max-width: min(930px,90%);
            text-align: center;

            .title{
                font-family: Geologica;
                font-weight: 700;
                font-size: clamp(28px,1vw,30px);
                line-height: 37px;
                color: #003DA6;
                margin: 0;
                margin-bottom: 30px;
            }

            .description{
                font-family: Arial;
                font-weight: 400;
                font-size: clamp(14px,1vw,16px);
                line-height: 18px;
                color: #003DA6;
                margin: 0;
            }

            .description span{
                display: block;
                margin: 1rem 0; 
            }

            .special-description span{
                margin: 0 !important;
            }

            .bold-description{
                font-weight: 700;
            }

            .bold-description span{
                margin: 0 !important;
            }
        }

        .form{
            width: min(615px,90%);
            display: flex;
            flex-direction: column;

            .form-row{
                display: flex;
                flex-direction: column;

                .age-input{
                    width: 200px;
                }
            }

            .form-row label{
                color: #003DA6;
                font-family: Arial;
                font-weight: 700;
                font-size: 12px;
                line-height: 14px;
                margin: 10px 0px;
            }

            .form-row input{
                background: #EFF4F6;
                padding: 9px 15px;
                border-radius: 6px;
                border: none;
                color: #003DA6;
                font-family: Arial;
                font-weight: 700;
                font-size: 12px;
                line-height: 14px;
            }
            
            .form-row.others{
                margin: 10px 0px;
            }

            .other-hidden {
                display: none;
            }

            .form-row select{
                padding: 9px 15px;
                border-radius: 6px;
                border: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background:#EFF4F6 url(/assets/images/dropdown-arrow.png) calc(100% - 10px) center no-repeat;
                color: #003DA6;
                font-family: Arial;
                font-weight: 700;
                font-size: 12px;
                line-height: 14px;
                cursor: pointer;
            }

            .form-row select option{
                color: #003DA6;
                font-family: Arial;
                font-weight: 700;
                font-size: 12px;
                line-height: 14px;
            }

            .form-grid{
                display: grid;
                grid-template-columns: 1fr 2fr;
                gap: 10px;

                @media only screen and (max-width:480px){
                    display: flex;
                    flex-direction: column;
                }
            }

            .upload-section{
                margin-top: 40px;
                display: flex;
                flex-direction: column;
                gap: 15px;

                .upload-title{
                    color: #003DA6;
                    font-family: Arial;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 14px;
                    text-align: center;
                    margin: 0;
                }

                .upload-description{
                    color: #003DA6;
                    font-family: Arial;
                    font-weight: 400;
                    font-size: 11px;
                    line-height: 10px;
                    text-align: center;
                    margin: 0;
                }

                .upload-container{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border: 1px #003DA6;
                    border-radius: 6px;
                    padding: 40px 0px;
                    border-style: dashed;
                    gap: clamp(10px,1vw,20px);
                    position: relative;

                    .upload-file{
                        color: #003DA6;
                        cursor: pointer;
                        font-weight: 700;
                        text-decoration: 2px underline;
                    }
                    
                    .image-upload{
                        position: absolute;
                        bottom: 0;
                        opacity: 0%;
                        pointer-events: none;
                    }
                }

                .upload-container p{
                    color: #003DA6;
                    font-family: Arial;
                    font-weight: 400;
                    font-size: 13px;
                    line-height: 14px;
                    margin: 0;
                }

                .upload-container:hover {
                    background: #f8f9fa;
                }
                
                .upload-container.dragover {
                    background: #e0f0ff;
                }
            }

            .agreement-section{
                margin-top: 40px;
                display: flex;
                align-items: start;
                gap: 15px;

                @media only screen and (max-width: 768px){
                    margin-top: 50px;
                }

                .agreement{
                    margin: 0;
                    color: #003DA6;
                    font-family: Arial;
                    font-weight: 500;
                    font-size: 13.5px;
                    line-height: 15.5px;

                    .link{
                        color: #003DA6;
                        text-decoration: 2px underline;
                        cursor: pointer;
                    }

                    .new-line{
                        display: block;
                    }
                }
            }

            .agreement-section input{
                background: #ECECEC;
                border: 2px solid #003DA6;
                cursor: pointer;
                margin: 0;
            }

            .button-container{
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 40px 0px;

                .submit-button{
                    background-color: #003DA6;
                    border: none;
                    border-radius: 10px;
                    padding: 14px 40px;
                    width: fit-content;
                    color: #FFFFFF;
                    font-family: Arial;
                    font-weight: 700;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }
    }

    .sixth-section{
        background: #EFF4F6;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: clamp(10px,1vw,20px);

        .sixth-section-content{
            margin-block: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: min(850px,90%);

            .title{
                color: #003DA6;
                font-weight: 700;
                font-size: 28px;
                margin-bottom: 70px;
            }

            .accordion-container{
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 55px;

                .accordion{
                    position: relative;
                    padding: 0;
                    width: 100%;
                    background: none;
                    display: flex;
                    border: none;
                    color: #003DA6;
                    font-weight: 700;
                    font-size: clamp(20px,2vw,24px);
                    justify-content: space-between;
                    align-items: center;
                    text-align: start;
                    cursor: pointer;
                    gap: 10px;

                    .arrow-button{
                        width: 8px;
                        height: 12px;
                        transform: rotate(90deg);
                    }
                }

                .panel{
                    position: relative;
                    display: none;
                    overflow: hidden;
                    margin-top: -30px;
                    padding-bottom: 25px;
                    .panel-text{
                        font-weight: 400;
                        font-size: clamp(14px,2vw,16px);
                        color: #5F5F5F;

                        .link{
                            color: #003DA6;
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }

                .accordion::after {
                    content: "";
                    position: absolute;
                    background-color: #D3D3D3;
                    height: 1px;
                    width: 100%;
                    top: auto;
                    bottom: -15px;
                    left: 50%;
                    right: auto;
                    transform: translateX(-50%);
                }
                .accordion.active::after{
                    content: none;
                }

                .panel.active::after{
                    content: "";
                    position: absolute;
                    background-color: #D3D3D3;
                    height: 1px;
                    width: 100%;
                    top: auto;
                    bottom: 0px;
                    left: 50%;
                    right: auto;
                    transform: translateX(-50%);
                }
            }
        }

        .sixth-section-content p {
            font-family: Geologica;
            margin: 0;
        }

    }

    .popup-container{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: auto;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        flex-direction: column;

        .content{
            margin-top: -50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .close-icon{
            display: none;
            position: absolute;
            right: 20px;
            top: 20px;
            cursor: pointer;
        }

        .close-icon.active{
            display: block;
        }

        .title{
            font-family: URW Geometric;
            font-weight: 900;
            font-size: 28px;
            line-height: 25px;
            color: #003DA6;
            width: 90%;
            margin: 10px 0px;
        }

        .modal{
            width: min(705px,90%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            z-index: 99;
        }

        .loading-icon{
            width: 100px;
            height: 100px;
        }

        .popup-footer{
            font-family: URW Geometric;
            color: #ffffff;
            font-size: 14px;
            line-height: 16x;
            width: min(435px,90%);
            z-index: 99;
        }

        .popup-footer.lottie{
            font-size: 9px !important;
            font-weight: 400 !important;
            line-height: 9px;
            text-align: center;
            
            .link{
                color: #ffffff;
                display: block;
            }
        }

        .bottom-line{
            position: absolute;
            bottom: 2%;
            width: 100%;
        }
    }

    .popup-container.active {
        display: flex;
        opacity: 1;
    }

    .popup-container.background{
        background: linear-gradient(to bottom, 
        #6ECFF6 0%,
        #003DA6 95%,
        white 95%, 
        white 100%       
    );
    }
}

.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}