@font-face {
    font-family: "red-hat-bold";
    src: url("../fonts/RedHatDisplayBold.woff");
}

@font-face {
    font-family: "red-hat-regular";
    src: url("../fonts/RedHatDisplayRegular.woff");
}

body {
    margin: 0 auto;
    width: 1200px;
    max-width: 100%;
    @media (width < 1200px) {
        width: 800px;
        max-width: 100%;
    }
}

.banner-section{
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    .content-section{
        position: absolute;
        width: 100% ;
        height: 100%;

        .gradient {
            max-width: 1200px;
            position: absolute;
            top: 0;
            width: 100%;
            height: 99.5%;
            background: linear-gradient(to right, rgba(0, 25, 40, 1) 10%, rgba(255, 255, 255, 0) 70%);
            z-index: 10;
        }

        .logo-white-header{
            width: 200px;            
            z-index: 100;
            position: absolute;
            padding-left: 4rem;
            top: 1rem;
        }
        
        .decorative-image-banner{
            width: 200px;
            display: block;            
            z-index: 100;
            position: absolute;
            top: 9rem;
        }


        h1{
            font-family: "red-hat-bold";
            color: #fff;
            padding-left: 4rem;
            padding-right: 2rem;
            z-index: 100;
            position: absolute;
            top: 15rem;
            font-size: 1.5rem;
        }
        .get-data {
            background-color: #fff;
            border: 1px solid #0a0a0a;
            color: #005ca0;
            border-radius: 10px;
            font-size: 1.2rem;
            z-index: 100;
            position: absolute;
            top: 25rem;
            padding: 1rem 2rem;
            transform: translate(-50%, -50%);
            left: 50%;
            right: 50%;
            width: 600px;
            max-width: 100%;
            p{
                padding: 0;
                margin: 0;
                padding-bottom: 1rem;
                font-family: "red-hat-regular";
                span{
                    font-family: "red-hat-bold";
                }
            }
            
            button{
                font-family: "red-hat-bold";
                background-color: red;
                color: #fff;
                padding: 0.5rem;
                width: 100%;
                border-style: none;
                border-radius: 5px;
                font-size: 1.2rem;
                cursor: pointer;
            }
        }
    }
    
    .banner-desktop {
        width: 1200px;
        max-width: 100%;
        img{
            width: 100%;
        }
    }
    
    @media (width > 1200px) {
        .banner-tablet{
            display: none;
        }

        .banner-semi-tablet{
            display: none;
        }

        .banner-semi-mobile{
            display: none;
        }

        .banner-mobile{
            display: none;
        }
    }

    @media( width <= 1200px){
        h1{
            font-size: 1.5rem;
        }

        .content-section {
            .logo-white-header{
                width: 150px;
            }

            .decorative-image-banner{
                width: 150px;
                top:5rem;
            }

            h1{
                font-size: 1.2rem;
                top: 8rem;
            }


            .get-data{
                width: 400px;
                font-size: 1rem;
                top: 16rem;
                padding: 1rem 1rem;
                p {
                    padding-bottom: 0.5rem;
                }
                button{
                    font-size: 1rem;
                }
            }
        }
    }

    @media (width <= 1200px) and (width > 1000px) {
        .banner-semi-tablet{
            display: none;
        }

        .banner-semi-mobile {
            display: none;
        }

        .banner-mobile{
            display: none;
        }
    }

    @media (width <= 1200px) {
        .banner-desktop {
            display: none;
        }

        .banner-tablet img{
            width: 100%;
            height: 100%;
        }
    }

    @media (width <= 1000px) {
        .banner-tablet {
            display: none;
        }

        .banner-semi-tablet img{
            width: 100%;
            height: 100%;
        }
    }

    @media (width <= 1000px) and (width > 750px){
        .banner-semi-mobile{
            display: none;
        }

        .banner-mobile{
            display: none;
        }
    }

    @media (width <= 750px) {
        .banner-semi-tablet{
            display: none;
        }

        .banner-semi-mobile img{
            width: 100%;
            height: 100%;
        }

        .content-section .get-data{
            width: 500px;
        }
    }

    @media (width <= 750px) and (width > 600px) {
        .banner-mobile{
            display: none;
        }
    }

    @media (width < 600px){
        .banner-semi-mobile{
            display: none;
        }

        .banner-mobile img{
            width: 100%;
            height: 100%;
        }

        .content-section {

            .logo-white-header {
                width: 200px;
            }

            .decorative-image-banner {
                width: 200px;
                top: 10rem;
            }

            h1 {
                font-size: 1.5rem;
                top: 15rem;
            }
    
            .get-data{
                width: 400px;
                p {
                    font-size: 1.2rem;
                }
                top: 30rem;
            }
        }

        .content-section .gradient{
            background: linear-gradient(to right, rgba(0, 25, 40, 1) 20%, rgba(255, 255, 255, 0) 70%);
        }
    }

    @media (width <= 570px) {
        .content-section .get-data {
            top: 26rem;
        }
    }

    @media (width < 530px) {
        .content-section {
            .get-data{
                width: 350px;
            }

            .logo-white-header{
                width: 200px;
            }

            .decorative-image-banner{
                width: 200px;
            }

            h1{
                font-size: 1.2rem;               
            }
        }

    }

    @media (width <= 500px) {
        .content-section {
            .decorative-image-banner{
                top: 8rem;
            }
            h1{
                top:12rem;
            }
            .get-data {
                top: 22rem;
            }
        }
    }

    @media (width < 450px) {
        
        .content-section {
            .logo-white-header{
                width: 150px;
            }
            .decorative-image-banner{
                width: 150px;
                top: 7rem;
            }
            h1{
                top: 10rem;
            }
            .get-data{
                width: 300px; 
                top: 20rem;           
            }
        }
    }

    @media (width < 400px) {
        .content-section h1{
            font-size: 1.1rem;
        }
    }

    @media (width <= 345px) {
        .content-section .get-data{
            width: 250px;
        }
    }

}



.access-benefits {
    padding-top: 2rem;
    padding-bottom: 6rem;
    /* background-color: #005ca0; */
    h2 {
        text-align: center;
        font-family: 'red-hat-bold';
        font-size: 2rem;
        color: #005ca0;
        padding: 0 1rem 2rem 1rem;
    }

    section {
        max-width: 1200px;
        margin: 0 auto;
    }

    .splide__pagination {
        bottom: -3rem;
    }

    .splide__pagination__page {
        background-color: #005ca0;
    }
    .splide__pagination__page.is-active {
        background-color: #0080e2;
    }

    .splide__arrow {
        background: none;      
        img {
            width: 50px;
            /* filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(10deg) brightness(102%) contrast(102%); */
            filter: invert(22%) sepia(96%) saturate(1590%) hue-rotate(186deg) brightness(94%) contrast(101%);
        }
    }

    .splide__slide {
        position: relative;
        display: flex;
        justify-content: center;
        img {
            width: 180px;
            z-index: 100;
            position: absolute;
            top: -2rem;
            left: 0;
            right: 0;
            margin: 0 auto;
          
        }
    }

    .container-slide {
        width: 250px;
        margin-top: 3rem;
        background-color: #005ca0;
        border-radius: 1rem;
        position: relative;
        padding: 10rem 1rem 1rem 1rem;
        p {
            padding: 0 0.5rem 1rem 0.5rem;
            margin: 0;
            font-family: 'red-hat-bold';
            color: #fff;
            font-size: 1.2rem;
            text-align: center;
        }
    }

    @media (width <= 1200px) {
        h2{
            font-size: 1.6rem;
        }

        .container-slide{
            padding: 10.5rem 1rem 1rem 1rem;
            width: 200px;
            .tittle-slide{
                font-size: 1rem;
            }
            p{
                font-size: 1rem;
            }
        }
    }

    @media (width <= 450px){
        .container-slide{
            padding: 8rem 0.5rem 0.5rem 0.5rem;
            p{
                font-size: 1rem;
            }
        }

        .splide__slide img {
            width: 150px;
        }
    }

    @media (width <= 350px){
        padding-top: 5rem;
    }

}

footer {
    background-color: #005ca0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 2rem;

    .content-footer{
        width: 100%;
        padding-top: 2rem;
        display: flex;
        align-items: center;

        .logo{
            width: 30%;
            margin: auto;
			text-align: center;
            justify-content: center;
            img{
                width: 100%;
                max-width: 300px;
            }
        }

        .terms-policies{
            width: 60%;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .policies{
                text-align: center;
                width: 100%;
                display: flex;
                justify-content: space-evenly;
            }
            .policies p{
                
                color: #fff;
                display: inline;                
                font-family: "red-hat-bold";
                font-size: 0.9rem;
                text-align: center;
            }
        
            .terms{
                font-size: 0.8rem;
                font-family: "red-hat-regular";
                color: #fff;
                max-width: 100%;
                text-align: center;
                padding-left: 2rem;
                padding-right: 2rem;
                span{
                    font-family: "red-hat-bold";
                    padding-bottom: 1rem;
                }
            }
         }
            .footer-final{
                font-family: "red-hat-regular";
                color: #fff;
                text-align: center;
                display: flex;
                align-items: center;
                a{
                    margin: 20px;
                    height: 100%;
                }
                p{
                    font-size: 0.8rem;
					padding-top: 10px;
                }
            }

       
    

    }


    @media (width <= 1200px) {
        .content-footer{
            flex-direction: column;
            padding-top: 2rem;
            .logo{
                width: 100%;
                img{
                    width: 300px;
                }
            }
    
            .terms-policies{
                width: 100%;
            }
        }
		.footer-final{
          display: inline-flex!important;
           
        }
    }

    @media (width <= 600px){
        .logo img {
            width: 300px;
        }
		.vig {
            width: 100%!important;
			padding-bottom: 0rem!important;
        }

        .policies {
            flex-direction: column;
        }
    }

    @media (width <= 500px){

        .footer-final{
            padding-top: 1rem;
           
        }
    }

    @media (width <= 400px) {
        .terms{
            padding: 0;
        }

        
    }

}