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

header{
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    img {
        max-width: 100%;
    }

    @media (width <= 600px) {
        width: 80%;
    }
}

.buttom-fixed {
    display: flex;
    justify-content: center;
    a {
        font-family: "red-hat-bold";
        background-color: red;
        max-width: 350px;
        padding: 10px 20px;
        text-align: center;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.5rem;
        position: fixed;
        z-index: 101;
        bottom: 1rem;
    }
    @media (width <= 280px) {
        margin: 0 1rem;
    }

}

.banner {
    position: relative;
    display: flex;
    justify-content: center;
	z-index: 100;

    .banner-desktop {
        max-width: 1200px;
        width: 100%;
        filter: brightness(0.9);
    }

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

    .data{
        z-index: 100;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 1200px;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        p {
            font-family: "red-hat-bold";
            color: #fff;
            font-size: 3rem;
            width: 44%;
            padding-right: 44%;
            /* text-align: center; */
        }

        a {
            font-family: "red-hat-bold";
            background-color: red;
            max-width: 350px;
            padding: 10px 20px;
            text-align: center;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.5rem;
            z-index: 100;
            bottom: 1rem;
        }
    }

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

    @media (width <= 900px) {
        .data p {
            font-size: 3rem;
        }   
    }

    @media (width <= 700px) {
        .data p {
            font-size: 2.4rem;
        }   
    }

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

        .banner-mobile {
            width: 100%;
            filter: brightness(0.7);
            transform: scaleX(-1);
        }

        .data {
            p {
                font-size: 2.6rem;
            }
        }
    }

    @media (width <= 420px) {
        .data p {
            font-size: 2.2rem;
        }   
    }

    @media (width <= 300px) {
        .data p {
            font-size: 2rem;
        }   
    }
}

.plans {
    max-width: 1200px;
    margin: 4rem auto 2rem auto;

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

    .splide__pagination {
        bottom: -2rem;
    }

    .splide__pagination__page {
        background-color: #005ca0;
    }
    .splide__pagination__page.is-active {
        background-color: #0080e2;
    }
    .splide__slide {
        display: flex;
        justify-content: center;
        .plan-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            border-radius: 1rem;
            background-color: #f1f1f1;
            max-width: 400px;
            margin: 0 1rem;
            h2 {
                font-family: 'red-hat-bold';
                border-radius: 1rem 1rem 0 0;
                background-color:#239CD5;
                color: #fff;
                text-align: center;
                margin: 0;
                padding: 1rem 0;
            }
            .image-container {
                position:relative;
                img {
                    width: 100%;
                }
                .price-plan{
                    position: absolute;
                    bottom: 0.8rem;
                    left: 1rem;
                    .price {
                        font-family: 'red-hat-bold';
                        font-size: 3rem;
                        margin: 0;
                        color: #fff;
                    }
                    p {
                        font-family: 'red-hat-regular';
                        margin: 0;
                        color: #fff;
						font-size: 14px;
                        sup {
                            font-size: 1rem;
                        }
                    }
                }
            }
            .list-plan {
				color: #005ca0;
				height: 100%;
                padding: 1rem 0.6rem 1rem 0;
                ul {
                    font-family: 'red-hat-regular';
                    /*list-style-image: url("../images/check-list.png");*/
                    list-style-type: disc;
                    li {
                        padding-bottom: 1.2rem;
                    }
                    li::marker {
                      color: red;
                    }
                }
            }
            .buttom {
                padding: 1rem;
                text-align: center;
                background-color: red;
                border-radius: 0 0 1rem 1rem;
                display: flex;
                justify-content: center;
                align-items: center;
                a {
                    font-family: 'red-hat-bold';
                    font-size: 2rem;
                    color: #fff;
                    text-decoration: none;
                    padding: 0 0.5rem;
                }
            }   
        }
    }

    .legal {
        font-family: 'red-hat-regular';
        padding: 2rem 2rem 1rem 2rem;
        text-align: center;
        font-size: 0.9rem;
        p {
            padding-bottom: 0.1rem;
        }
        .legal-falabella {
            font-family: 'red-hat-bold';
        }
    } 


}

@media (width <= 600px) {
    .plans .splide__slide .plan-card {
        margin: 0 3rem;
    }
}

@media (width <= 450px) {
    .plans .splide__slide .plan-card .image-container .price-plan .price {
        font-size: 2.5rem;
    }
}

@media (width <= 350px) {
    .plans .splide__slide .plan-card .image-container .price-plan .price {
        font-size: 2rem;
    }
}

.slider-medicine {
    /* background-color: #005ca0; */
    h2 {
        text-align: center;
        font-family: 'red-hat-bold';
        font-size: 2rem;
        color: #0a0a0a;
        padding: 0 1rem 2rem 1rem;
    }

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

    .splide__pagination {
        bottom: -2rem;
    }

    .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 {
            z-index: 100;
            position: absolute;
            background-color: #0098e5;
            top: 1rem;
            padding: 4rem;
            clip-path: circle();
        }
    }

    .container-slide {
        width: 230px;
        margin-top: 5rem;
        background-color: #005ca0;
        border-radius: 1rem;
        position: relative;
        padding: 7rem 1rem 1rem 1rem;

        p {
            font-family: 'red-hat-regular';
            color: #fff;
            font-size: 1.3rem;
            text-align: center;
        }
    }

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

.legal {
    font-family: 'red-hat-regular';
    padding: 0 2rem 1rem 2rem;
    text-align: center;
    font-size: 1rem;
    p {
        padding-bottom: 0.1rem;
    }
}

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

        
    }

}
details {
	display:block; 
    font-family: 'red-hat-regular';
}
summary {
	display:block; 
	border-radius:5px;
	padding:5px;
	cursor:pointer;
    text-align: center;
}

summary::-webkit-details-marker {
/*    color:#FF0000; 
   background:#FFFFFF;  */
}

details[open] summary::-webkit-details-marker {
/*    color:#0000FF; 
   background:#00FFFF; */
}
summary::-webkit-details-marker {
   display: none
}

summary::after {
   content: "🠃";
   font-size: 1.5em;
   font-weight: bold;
   margin: -5px 5px 0 0;
   padding: 0;
   text-align: center;
   width: 20px;
}

details[open] summary:after {
   content: "🠁";
}
.reds{
	height: 20px; width: 50%; background-color: red; position: absolute; bottom: 0px; left: 25%; margin: 0px; border-radius: 5px;border-color: red
}
.blues{
	height: 20px; width: 50%; background-color: #239CD5; position: absolute; bottom: 0px; left: 25%; margin: 0px; border-radius: 5px;border-color: #239CD5
}

.logoo{
	max-width: 300px
}
.sol-inf{
	align-self: center; position: absolute; bottom: 50px;
}
@media (width <= 600px){
	.logoo{
		max-width: 250px;
		text-align: center
	}
	.sol-inf{
		display: none;
	}
}