@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;
                width: 100%;
                border-style: none;
                border-radius: 5px;
                cursor: pointer;
                padding: 0.5rem;
                font-size: 1.2rem;
            }
        }
    }
    
    .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) 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%;
        }

        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 <= 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 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: 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 1rem 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{
            padding: 0 1rem 0rem 1rem;
        }

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

        .container-slide{
            width: 200px;
            padding: 10rem 0.7rem 0.7rem 0.7rem;
        }
    }

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


.general-content-medical-center{
    display: flex;
    flex-direction: column;
    background-color: #005ca0;
    position: relative;

    .decorate-umc{
        position: absolute;
        width: 120px;
        right: 0;
    }

    .header-content {
        h2{ 
            text-align: center;
            font-family: "red-hat-bold";
            color: #fff;
            font-size: 2rem;
            padding-top: 2rem;
            margin: 0 auto;
            width: 70%;
        }

        p{
            text-align: center;
            font-family: "red-hat-regular";
            font-size: 1rem;
            color: #fff;
            padding: 0 1rem 1.5rem 1rem;
        }
    }

    .main-content {
        display: flex;
        .image-medical-center{
            width: 50%;
            position: relative;
            margin: auto 0;
            padding: 0 1rem;
        
            .banner-medical-center{
                width: 100%;
                height: 300px;
                border-radius: 25px;
                border: 10px #0080e2 solid;
            }

            .decorative-image-mc{
                position: absolute;
                top: 0.6rem;
                left: 1.6rem;
                width: 120px;
            }
        
            @media (width <= 1200px) {
                    .decorative-image-mc{
                        width: 100px;
                        top: 0.7rem;
                    }

                    .banner-medical-center{
                        height: 250px;
                    }
                
            }
        }
        
        .ubication-medical-center{
            width: 50%;
    
            .container-decorative{
                position: absolute;
                max-width: 100%;
                margin: 0 auto;
                display: flex;
                right: 0;
                justify-content: end;
                .decorate-umc{
                    width: 150px;
                }
            }
        
            .container-content{
                
                max-width: 100%;
                margin: 0 auto;
        
                :nth-child(3){
                    font-family: "red-hat-bold";
                    padding-bottom: 8rem;
                }
            }
        
            .maps{
                display: flex;
                justify-content: center;
                iframe{                    
                    border: 10px #0080e2 solid;
                    border-radius: 25px;
                    width: 90%;
                    height: 300px;
                }
            }
        
            @media (width <= 1200px) {
                .container-decorative{
                    .decorate-umc{
                        width: 120px;
                    }
                }
        
                .maps iframe{
                    height: 250px;
                }
            }
        
            @media (width <= 600px) {
                
            }
            
        }
    }

    p {
        font-size: 1.2rem;
        font-family: "red-hat-bold";
        padding-bottom: 2rem;
        color: #fff;
        text-align: center;
    }

    @media (width <=1200px) {
        .decorate-umc{
            width: 100px;
        }
    }

    @media (width <= 600px) {

        .decorate-umc{
            width: 80px;
        }

        .main-content{
            flex-direction: column;
            .image-medical-center {
                width: 100%;
                max-width: 100%;
                display: flex;
                justify-content: center;
                padding: 0 0 1rem 0;
                .banner-medical-center{
                    width: 100%;
                    height: auto;
                    border-radius: 0;
                    border: none;
                }

                .decorative-image-mc{
                    left: 0;
                    top: 0;
                    width: 100px;
                }
            }

            .ubication-medical-center{
                width: 100%;
                max-width: 100%;
            }
        }
    }

    @media (width <= 550px) {
        padding-bottom: 1rem;
    }

    @media (width <= 390px) {
        .header-content h2{
            padding-top: 4rem;
        }
    }
}


.services-schedule {
    padding-bottom: 6rem;
    position: relative;
    
    .decorative-container{
        position: absolute;
        z-index: 100;
        width: 1200px;
        max-width: 100%;
        top: -1.6rem;
        transform: translate(-50%, -50%);
        left: 50%;
        right: 50%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        
        img{
            width: 150px;
            height: 100%;
        }
    }

    section {
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 2rem;
    }

    .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;
        .splide-image {
            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: 11rem 1rem 2rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .tittle-slide{
            font-family: "red-hat-bold";
            font-size: 1.5rem;
            padding: 0 0.5rem 1rem 0.5rem;            
            margin: 0;
        }

        :nth-child(1){
            font-family: "red-hat-bold";
        }
        p {
            padding: 0 0.5rem 2rem 0.5rem;
            margin: 0;
            font-family: 'red-hat-regular';
            color: #fff;
            font-size: 1rem;
            text-align: center;
        }
        a{
            margin: 0 auto;
            color: #fff;
            border-radius: 5px;
            border: 1px solid #fff;
            padding: 1rem 4rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            p{
                display: inline;
                padding: 0;
                margin: 0 0.5rem 0 0;
            }
            img{
                width: 10px;
                
            }            
        }
    }

    @media (width <= 1200px){

        .decorative-container{
            top: -1.3rem;
            img{
                width: 120px;
            }
        }

        section {
            padding-top: 0.5rem;
        }

        .container-slide{
            width: 250px;
            padding: 10rem 0.7rem 0.7rem 0.7rem;
            .tittle-slide{
                font-size: 1.2rem;
                padding: 0 0.5rem 0.5rem 0.5rem;
            }
            p{
                padding: 0 0.5rem 0.5rem 0.5rem;
                font-size: 0.9rem;
            }
            a{
                padding: 0.6rem 2rem;
            }
        }
    }

    @media (width <= 600px) {
        .decorative-container {
            top: -1.6rem;
        }
        .decorative-container img {
            width: 100px;
        }
    }
}

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