@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%;
    }
    position: relative;
}

.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) {
        .banner-desktop {
            display: none;
        }

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

        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{
                top: 16rem;
                width: 400px;
                font-size: 1rem;
                padding: 0.8rem 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.5rem;
            }
        }

    }

    @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 0rem 1rem;
        margin-bottom: 0.5rem;
    }

    p{
        color: #9d9d9c;
        font-size: 1.5rem;
        text-align: center;
        padding: 0 1rem;
        margin-top: 0;
        font-family: "red-hat-regular";
        span{
            font-family: "red-hat-bold";
        }
    }

    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: 1rem;
        }
    }

    .container-slide {
        width: 250px;
        margin-top: 3rem;
        background-color: #005ca0;
        border-radius: 1rem;
        position: relative;
        padding: 10rem 1rem 1rem 1rem;

        .tittle-slide{
            font-family: "red-hat-bold";
            font-size: 1.5rem;
            padding: 0 0.5rem 0.5rem 0.5rem;            
            margin: 0;
        }
        p {
            padding: 0 0.5rem 1rem 0.5rem;
            margin: 0;
            font-family: 'red-hat-regular';
            color: #fff;
            font-size: 1rem;
            text-align: center;
        }
    }

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

        .splide__slide {
            img{
                width: 180px;
            }
        }

        .container-slide{
            width: 200px;
            padding: 10rem 0.7rem 0.7rem 0.7rem;
            .tittle-slide{
                font-size: 1.1rem;
            }
        }
    }

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

.our-plans {    
    padding-top: 1rem;
    padding-bottom: 6rem;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    h2 {
        text-align: center;
        font-family: 'red-hat-bold';
        font-size: 2rem;
        color: #005ca0;
        padding: 0 1rem 4rem 1rem;
        margin-bottom: 0.5rem;
    }

    .content-slider{
        display: flex;
        justify-content: center;
        align-items: flex-end;

        .labels-plans{
            width: 40%;

            table{
                border-collapse: collapse;
                width: 100%;
                
                tr td{
                    color: #005ca0;
                    font-family: "red-hat-regular";
                    border-left: 0;
                    border-top: 1px solid #005ca0;
                    border-bottom: 1px solid #005ca0;
                    border-right: 1px solid #005ca0;
                    text-align: left;
                    padding: 8px;
                    font-size: 1.2rem;
                }
            }
        }

        .slider-options{
            width: 50%;
            margin-left: 0.2rem;
            position: relative;

            .splide__pagination {
                bottom: -2rem;
            }
        
            .splide__pagination__page {
                background-color: #005ca0;
            }
            .splide__pagination__page.is-active {
                background-color: #0080e2;
            }
        
            .splide__arrow {
                background: none;
                top: 7rem;
                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__arrow--next{
                right: -2rem;
            }
            .splide__arrow--prev{
                left: -2rem;
            }

            .splide__slide{
                padding-right: 0.2rem;
            }
        
            .splide__slide table {
                width: 100%;
                border-collapse: collapse;
                
                
                tr td{
                    color: #005ca0;
                    font-family: "red-hat-regular";
                    border: 1px solid #005ca0;
                    text-align: center;
                    padding: 8px;
                    font-size: 1.2rem;
                    img {
                        width: 30px;
                    }
                    
                }
                tr .premium{
                    background-color: #0080e2;
                    color: #fff;
                    text-align: center;
                }

                tr .pricing{
                    text-align: center;
                    .from {
                        font-family: "red-hat-bold";
                        font-size: 1.8rem;
                        span{
                            font-size: 2.5rem;
                        }
                    }
                    .month {
                        font-size: 1rem;
                    }
                }
            }
        }

        a {
            position: absolute;
            background-color: red;
            color: #fff;
            width: 200px;
            max-width: 100%;
            text-align: center;
            padding: 0.5rem 1rem;
            bottom: -6rem;
            left: 50%;
            transform: translate(-50%, 0);
            font-family: "red-hat-regular";
            font-size: 1rem;
            border-radius: 5px;
            text-decoration: none;
        }
    }

    .notes {
        padding-top: 7rem;
        font-family: "red-hat-regular";
        display: flex;
        justify-content: center;

        details summary{
            margin: 0 auto;
            background-color: #005ca0;
            padding: 0.5rem 1rem;
            width: 250px;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            list-style-type: none;
            cursor: pointer;
        }

        details p {
            padding-top: 1rem;
            padding-left: 1rem;
            padding-right: 1rem;
            margin: 0 auto;
            text-align: center;
            color: #005ca0;
            max-width: 1000px;
        }

        details > summary::after {
            content: url('../images/close-row.png');
            padding-left: 1rem;
        }
        
        details[open] > summary::after {
            content: url('../images/open-row.png');
            padding-left: 1rem;
        }
    }

    .notes-dent {
        padding-top: 4rem;
        font-family: "red-hat-regular";
        display: flex;
        justify-content: center;

        details summary{
            margin: 0 auto;
            background-color: #005ca0;
            padding: 0.5rem 1rem;
            width: 250px;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            list-style-type: none;
            cursor: pointer;
        }

        details p {
            padding-top: 1rem;
            padding-left: 1rem;
            padding-right: 1rem;
            margin: 0 auto;
            text-align: center;
            color: #005ca0;
            max-width: 1000px;
        }

        details > summary::after {
            content: url('../images/close-row.png');
            padding-left: 1rem;
        }
        
        details[open] > summary::after {
            content: url('../images/open-row.png');
            padding-left: 1rem;
        }
    }

    .dental-plan{
        h2{
            font-size: 1.6rem;
            padding-top: 2rem;
        }
    }

    .dental-plan{
        .content-plan{
            display: flex;
            justify-content: center;
            align-items: flex-end;

            .labels-plans-dent{
                width: 60%;

                table{
                    border-collapse: collapse;
                    width: 100%;
                    
                    tr td{
                        color: #005ca0;
                        font-family: "red-hat-regular";
                        border-left: 0;
                        border-top: 1px solid #005ca0;
                        border-bottom: 1px solid #005ca0;
                        border-right: 1px solid #005ca0;
                        text-align: left;
                        padding: 8px;
                        font-size: 1.2rem;
                    }
                }
            }
        }

        .options-plan{
            width: 30%;
            margin-left: 0.2rem;
        
            table {
                width: 100%;
                border-collapse: collapse;
                
                
                tr td{
                    color: #005ca0;
                    font-family: "red-hat-regular";
                    border: 1px solid #005ca0;
                    text-align: center;
                    padding: 8px;
                    font-size: 1.2rem;
                    img {
                        width: 30px;
                    }
                    
                }
                tr .premium{
                    background-color: #0080e2;
                    color: #fff;
                    text-align: center;
                }

                tr .pricing{
                    text-align: center;
                    .from {
                        font-family: "red-hat-bold";
                        font-size: 1.8rem;
                        span{
                            font-size: 2.5rem;
                        }
                    }
                    .month {
                        font-size: 1rem;
                    }
                }
            }
        }
    }

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

        .content-slider .labels-plans table tr td{
            font-size: 1rem;
        }

        .dental-plan .content-plan .labels-plans-dent table tr td {
            font-size: 1rem;
        }

        .content-slider .slider-options .splide__slide table {
            tr td {
                font-size: 1rem;
                img{
                    width: 20px;
                }
            }
            tr .pricing {
                .from {
                    font-size: 1.4rem;
                    span{
                        font-size: 2.2rem;
                    }
                }

                .month{
                    font-size: 0.8rem;
                }
            }
        }

        .dental-plan .options-plan table {
            tr td {
                font-size: 1rem;
                img{
                    width: 20px;
                }
            }
            tr .pricing {
                .from {
                    font-size: 1.4rem;
                    span{
                        font-size: 2.2rem;
                    }
                }

                .month{
                    font-size: 0.8rem;
                }
            }
        }
                    
    }

    @media (width < 975px) {

        .content-slider .slider-options {
            .splide__arrow--next{
                right: -1rem;
            }
            .splide__arrow--prev{
                left: -1rem;
            }
        }
    }

    @media (width < 700px) {

        .content-slider .labels-plans {
            width: 50%;
        }
    }

    @media (width < 650px) {
        .content-slider .labels-plans {
            width: 40%;
        }

        .content-slider .slider-options{
            width: 40%;
        }
    }

    @media (width < 600px) {   

        .dental-plan .content-plan .labels-plans-dent {
            width: 40%;
        }
        .dental-plan .content-plan .options-plan {
            width: 50%;
        }

        .content-slider a {
            width: 100px;
        }

        .content-slider .labels-plans table {
            tr td {
                font-size: 1rem;
            }
        }

        .dental-plan .content-plan .labels-plans-dent table {
            tr td {
                font-size: 1rem;
            }
        }

        .dental-plan .content-plan .options-plan table {
            tr td {
                font-size: 1rem;
            }

            tr .pricing{
                .from{
                    font-size: 1.5rem;
                    span{
                        font-size: 2rem;
                    }
                }
                .month {
                    font-size: 0.8rem;
                }
            }
        }

        .content-slider .slider-options .splide__slide table{
            tr td {
                font-size: 1rem;
            }

            tr .pricing{
                .from{
                    font-size: 1.5rem;
                    span{
                        font-size: 2rem;
                    }
                }
                .month {
                    font-size: 0.8rem;
                }
            }
        }
    }

    @media (width < 490px) {
        .content-slider .slider-options {
            .splide__arrow--next{
                right: 0rem;
            }
            .splide__arrow--prev{
                left: 0rem;
            }
        }

        .content-slider .labels-plans {
            width: 40%;
        }

        .content-slider .slider-options{
            width: 50%;
        }

        .content-plan .labels-plans-dent {
            width: 40%;
        }
        .content-plan .options-plan {
            width: 50%;
        }
    }

}


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;
        }

        
    }

}

.button-request{
    display: flex;
    justify-content: center;
    
    a{
        z-index:200;
        position: fixed;
        background-color: red;
        padding: 0.5rem 4rem;
        border-radius: 5px;
        bottom: 2rem;
        text-decoration: none;

        p{
            font-size: 1.2rem;
            color: #fff;
            padding-right: 1rem;
            display: inline;
            font-family: "red-hat-bold";
        }
        img{
            width: 20px;
        }
    }

    @media (width <= 1200px) {
        a{
            padding: 0.7rem 2rem;
            p{
                font-size: 1.2rem;
            }
            img{
                width: 15px;
            }
        }
    }
}