body {
        overflow-x: hidden;
}

.hp_title {
        text-transform: uppercase;
        margin-bottom: 20px;
        font-weight: bold;
}

.pages {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        min-height: 100vh;
        height: 100%;
        width: 100vw;
        padding: 10px;
        padding-top: 30px;

}


div#contentb {
        position: inherit;
        padding: 0;


}

div#content {
        width: 100vw;


}

.hp_first {
        /* justify-content: flex-start; */
}

.hp_second {
        background: #00BADA url('images/circles1.png') center center no-repeat;
        background-size: contain;
        background-attachment: fixed;
}

.hp_third {
        background: #141C25 url('images/circles1.png') center no-repeat;
        background-size: contain;
        background-attachment: fixed;
}

.hp_fourth {
        background: #fff url('images/circles1.png') center no-repeat;
        background-size: contain;
        background-attachment: fixed;

}

.hp_five {
        background: #006bc2 url('images/circles1.png') center no-repeat;
        background-size: contain;
        background-attachment: fixed;

}

.hp_fourth .fourth_c {
        color: #141C25;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
}

.hp_five .five_c {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
}

.hp_fourth .hp_content,
.hp_five .hp_content,
.hp_third .hp_content {
        text-align: left;
        line-height: 1.3em;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        font-weight: 300;
        flex-wrap: wrap;
}

.hp_fourth .hp_content div,
.hp_five .hp_content div {
        width: 100%;
        margin: 10px 0px;
}

.hp_third .hp_content div {
        width: 100%;
        margin: 20px 0px;
}

.hp_fourth .hp_title,
.hp_five .hp_title,
.hp_third .hp_title {
        width: 100%;
}

.hp_fourth .hp_subtitle,
.hp_five .hp_subtitle {
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 80px;
        /* text-align: center; */
        width: 100%;
}

.hp_subtitle {
        margin: 30px 0px;
}

.hp_bc {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
}

a,
a:visited,
a:hover,
a:active {
        color: #999;

}

#hp_btn2 {
        margin: 50px 0px !important;
}

#hp_btn1,
#hp_btn2 {
        font-weight: bold;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-transform: uppercase;
        height: 40px;
        line-height: 1.5;
        border-radius: 30px;
}

.hp_srolld {
        background: transparent url("images/scroll.png") center center no-repeat;
        background-size: contain;
        height: 70px;
        width: 70px;
        margin-top: 20px;

}

.hp_cards {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: fit-content;
        position: relative;
        left: 0px;
        overflow: hidden;
}

.animate {
        position: relative !important;
        scroll-snap-type: none;
        justify-content: center;
        align-items: center;
        width: 80%;
        overflow: auto;
}

.hp_cards_c {
        padding: 5px;
        position: relative;
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
}

.hp_card {
        background-color: #FFFFFF;
        border-radius: 30px;
        color: #141C25;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        /* padding: 20px; */
        margin: 0px 30px;
        box-shadow: 0px 0px 5px 2px #00000029;
}

.hp_card_t {
        font-weight: bold;
        text-align: left;
        padding-top: 20px;
        margin-bottom: 20px;
}

.hp_card_c {
        text-align: left;
        font-weight: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
}

.b {
        color: #00BADA;
        text-transform: uppercase;
}

.blue {
        background-color: #141C25 !important;


}

.white {
        background-color: #fff !important;
}

.grey {
        background-color: #22222299 !important;
}

div#foot {
        background: #fff url('images/circles1.png') center no-repeat;
        background-size: contain;
        background-attachment: fixed;
        width: 100vw;
        color: #141C25;
        margin-top: 0;
}

div#foot>a,
div#foot>a:visited,
div#foot>a:hover,
div#foot>a:active {
        color: #141C25;

}

.hp_card .hp_card_i {
        height: 100%;
        width: 50%;
        background-size: contain;
        min-height: 460px;
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;

}

#hp_c0 .hp_card_i {
        background: #fff url("images/i0.png") center center no-repeat;

}

#hp_c1 .hp_card_i {
        background: #fff url("images/i1.png") center center no-repeat;

}

#hp_c2 .hp_card_i {
        background: #fff url("images/i2.png") center center no-repeat;

}

#hp_c3 .hp_card_i {
        background: #fff url("images/i3.png") center center no-repeat;

}

#hp_c4 .hp_card_i {
        background: #fff url("images/i4.png") center center no-repeat;

}

.hp_card_cont {
        height: 100%;
        min-height: 300px;
        width: 50%;
        padding: 40px;
}

@media (hover: none) and (pointer: coarse) {
        .hp_cards_c {
                scroll-snap-type: x mandatory;
                justify-content: unset;
                align-items: unset;
                width: auto;
                overflow: auto;
                position: unset;
        }

        .hp_card {
                scroll-snap-align: center;
                scroll-snap-stop: always;
        }

        .hp_cards {
                width: fit-content;
                position: unset;
                overflow: auto;
        }

}

@media (hover: none) and (pointer: fine) {
        .hp_cards_c {
                scroll-snap-type: x mandatory;
                justify-content: unset;
                align-items: unset;
                width: auto;
                overflow: auto;
                position: unset;
        }

        .hp_card {
                scroll-snap-align: center;
                scroll-snap-stop: always;
        }

        .hp_cards {
                width: fit-content;
                position: unset;
                overflow: auto;
        }

}

@media (hover: hover) and (pointer: coarse) {
        .hp_cards_c {
                scroll-snap-type: x mandatory;
                justify-content: unset;
                align-items: unset;
                width: auto;
                overflow: auto;
                position: unset;
        }

        .hp_card {
                scroll-snap-align: center;
                scroll-snap-stop: always;
        }

        .hp_cards {
                width: fit-content;
                position: unset;
                overflow: auto;
        }

}


.hp_stepper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        height: 50px;
        width: 200px;
        margin: 30px 0px;
}

.hp_step {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: #fff;
}

@media screen and (min-width:250px) and (max-width:376px) {
        .hp_title {
                font-size: 1.1em;
        }


        .hp_subtitle {
                font-size: 1em;
        }

        #hp_btn1,
        #hp_btn2 {
                font-size: .7em;
                margin: 50px 0px;
                padding: 10px 30px;
                max-width: 370px;
                min-width: 350px
        }

        #hp_btn2 {
                font-size: .9em;
        }

        .hp_link_pw {
                font-size: .9em;
        }

        .hp_fourth .fourth_c,
        .hp_five .five_c {
                max-width: 375px;
                min-width: 300px;
        }


        .hp_fourth .hp_content,
        .hp_five .hp_content,
        .hp_third .hp_content {
                max-width: 375px;
                min-width: 300px;
                font-size: 1em;

        }

        .hp_second .hp_title,
        .hp_third .hp_title,
        .hp_five.hp_title,
        .hp_fourth .hp_title {
                margin-top: 10px;
        }

        .hp_fourth .hp_subtitle,
        .hp_five .hp_subtitle {
                margin-bottom: 20px;
        }

        .hp_five .hp_subtitle {
                max-width: 300px;
        }

        .hp_card {
                min-height: 460px;
                min-width: 350px;
                max-width: 375px;
                font-size: 1em;
                flex-direction: column;
        }

        .hp_cards {
                width: 100%;
        }

        .hp_card_c {
                font-size: .7em;
        }

        .hp_card_t {
                font-size: .8em;
        }

        .hp_card_i {
                height: 100% !important;
                width: 100% !important;
                border-top-left-radius: 30px !important;
                border-top-right-radius: 30px !important;
                border-bottom-left-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
                min-height: 250px !important;
                max-height: 260px !important;
        }

        .hp_card_cont {
                height: 100% !important;
                width: 100% !important;
                min-height: 250px !important;
                max-height: 260px !important;
                padding: 20px;
        }


}

@media screen and (min-width:377px) and (max-width:499px) {
        .hp_title {
                font-size: 1.2em;
        }


        .hp_subtitle {
                font-size: 1.1em;
        }

        #hp_btn1,
        #hp_btn2 {
                font-size: .7em;
                margin: 50px 0px;
                max-width: 480px;
                min-width: 350px
        }

        #hp_btn2 {
                font-size: .9em;
        }

        .hp_link_pw {
                font-size: .9em;
        }

        .hp_fourth .fourth_c,
        .hp_five .five_c {
                min-width: 350px;
                max-width: 450px;
        }

        .hp_second .hp_title,
        .hp_fourth .hp_content,
        .hp_five .hp_content,
        .hp_third .hp_content {
                min-width: 350px;
                max-width: 450px;
                font-size: 1.1em;
        }

        .hp_second .hp_title,
        .hp_third .hp_title,
        .hp_fourth .hp_title,
        .hp_five .hp_title {
                margin-top: 30px;
        }

        .hp_fourth .hp_subtitle,
        .hp_five .hp_subtitle {
                margin-bottom: 30px;
        }

        .hp_five .hp_subtitle {
                max-width: 300px;
        }

        .hp_card {
                min-height: 460px;
                min-width: 355px;
                font-size: 1em;
                flex-direction: column;
        }

        .hp_card_c {
                font-size: .8em;
        }

        .hp_card_t {
                font-size: .9em;
        }

        .hp_cards {
                width: 100%;
                /* max-height: 800px; */
        }

        .hp_card_i {
                height: 100% !important;
                width: 100% !important;
                border-top-left-radius: 30px !important;
                border-top-right-radius: 30px !important;
                border-bottom-left-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
                min-height: 250px !important;
                max-height: 310px !important;
        }

        .hp_card_cont {
                height: 100% !important;
                width: 100% !important;
                min-height: 250px !important;
                max-height: 310px !important;
        }
}

@media screen and (min-width:500px) and (max-width:999px) {
        .hp_title {
                font-size: 1.3em;
        }


        .hp_subtitle {
                font-size: 1.1em;
        }

        #hp_btn1,
        #hp_btn2 {
                font-size: .8em;
                padding: 0px 40px;
                margin: 50px 0px;
                max-width: 750px;
                min-width: 350px
        }

        #hp_btn2 {
                font-size: .9em;
        }

        .hp_link_pw {
                font-size: 1em;
        }

        .hp_fourth .fourth_c,
        .hp_five .five {
                min-width: 400px;
                max-width: 700px;
        }

        .hp_fourth .hp_content,
        .hp_five .hp_content,
        .hp_third .hp_content {
                min-width: 400px;
                max-width: 700px;
                font-size: 1.1em;
        }

        .hp_second .hp_title,
        .hp_third .hp_title,
        .hp_fourth .hp_title,
        .hp_five .hp_title {
                margin-top: 30px;
        }

        .hp_fourth .hp_subtitle,
        .hp_five .hp_subtitle {
                margin-bottom: 30px;
        }

        .hp_five .hp_subtitle {
                max-width: 600px;
        }

        .hp_card {
                min-height: 460px;
                min-width: 450px;
                flex-direction: column;
        }

        .hp_card_c {
                font-size: .9em;
        }

        .hp_card_t {
                font-size: 1em;
        }

        .hp_cards {
                width: 100%;
                max-height: 800px;
        }

        .hp_card_i {
                height: 100% !important;
                width: 100% !important;
                border-top-left-radius: 30px !important;
                border-top-right-radius: 30px !important;
                border-bottom-left-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
                min-height: 300px !important;
        }

        .hp_card_cont {
                height: 100% !important;
                width: 100% !important;
        }


}

@media screen and (min-width:1000px) {
        .hp_title {
                font-size: 1.8em;
        }


        .hp_subtitle {
                font-size: 1.3em;
        }

        #hp_btn1,
        #hp_btn2 {
                font-size: .9em;
                padding: 0px 50px;
                margin: 50px 0px;
                max-width: 1000px;
                min-width: 350px
        }

        .hp_link_pw {
                font-size: 1em;

        }

        .hp_fourth .fourth_c,
        .hp_five .five_c {
                max-width: 1500px;
                min-width: 900px;
        }

        .hp_fourth .hp_content,
        .hp_five .hp_content,
        .hp_third .hp_content {
                max-width: 960px;
                min-width: 900px;
                font-size: 1.2em;
        }

        .hp_second .hp_title,
        .hp_third .hp_title,
        .hp_fourth .hp_title,
        .hp_five .hp_title {
                margin-top: 50px;
        }

        .hp_fourth .hp_subtitle,
        .hp_five .hp_subtitle {
                margin-bottom: 50px;
        }

        .hp_five .hp_subtitle {
                max-width: 900px;
        }

        .hp_card {
                min-height: 460px;
                min-width: 900px;
        }

        .hp_card_c {
                font-size: 1em;
        }

        .hp_card_t {
                font-size: 1.1em;
        }

        .hp_cards {
                width: 100%;
        }

        .hp_srolld {
                margin-top: 100px;

        }




}