@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     transition: background .5s;
     max-width: 100%;
     scroll-behavior: smooth;
     font-family: 'Oswald', sans-serif;
     letter-spacing: 1px;
}
 ::-webkit-scrollbar{
     display: none;
}
 :root{
     --background: #cccccc ;
     --text: #121212;
     --radius: 50px;
     --accent: #4CAF50;
     --black: #121212;
     --white: #e6e6e6;
}
 body{
     background: var(--background);
     height: 100%;
     overflow-y: scroll;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}
 main{
     z-index: 99999;
     background: var(--background);
}
 .cta{
     position: relative;
     margin: 5vh;
     height: calc(100vh - 13vh - (5vh * 2));
     background: no-repeat url(/img/foto9.webp) center;
     background-size: cover;
     display: flex;
     border-radius: var(--radius);
}
 .cta aside{
     padding-inline: 30px;
     padding-top: 30px;
     padding-bottom: 250px;
     z-index: auto;
     height: 100%;
     display: flex;
     width: 50%;
     color: var(--white);
}
 .cta p{
     text-wrap: balance;
     font-size: 1rem; 
     width: 90%;
     text-transform: capitalize;
     font-weight: bolder;
     font-family: 'Archivo Black', sans-serif;
}
 .learn_more{
     height: 6vh;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     text-transform: capitalize;
}
 .learn_more svg{
     height: 100px;
     width: 1000px;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     fill: var(--background);
     transition: fill .5s;
     z-index: 0;
}
 .learn_more a{
     cursor: pointer;
     text-decoration: none;
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     color: var(--text);
     font-size: 1rem;
     transition: color .5s;
}
 .learn_more a:hover{
     color: var(--accent);
}
 .SecondSection{
     height: 100vh;
     flex: 1;
}
 .SecondSection h2{
     font-size: 2.5rem;
     text-align: center;
     color: var(--text);
     margin: 10vh;
     margin-bottom: 0;
}
 .SecondSection p, li{
     font-size: 1.5rem;
     text-align: justify;
     text-justify: newspaper;
     margin-inline: 10vh;
     margin-top: 0;
     color: var(--text);
}
 .carousel{
     display: flex;
     justify-content: center;
     align-items: center;
}
 .swiper{
     width: 75%;
     padding-top: 50px;
     padding-bottom: 50px;
     height: 500px;
}
 .swiper-slide{
     background-position: center;
     background-size: cover;
     width: 500px;
     height: 500px;
}
 .swiper-slide img{
     display: block;
     width: 400px;
     height: 400px;
     cursor: pointer;
     filter: drop-shadow(30px 50px 5px #00000021);
     object-fit: contain;
}
 @media (max-width:1760px){
     :root{
         --radius: 30px;
    }
     .cta aside{
         padding-inline: 20px;
         z-index: auto;
         height: 100%;
         display: flex;
         align-items: center;
         width: 75%;
         font-size: 1.7rem;
    }
}
 @media (max-width:1450px){
     .cta{
         margin: 3vh;
         height: calc(100vh - (3vh * 2));
    }
     .cta p{
         margin-top: 100px;
    }
}
 @media (max-width:1080px){
     .cta{
         justify-content: center;
         text-align: center;
    }
     .cta aside{
         padding-inline: 0px;
         width: 75%;
         font-size: 1.5rem;
    }
     .cta p{
         width: 100%;
    }
}
 @media (max-width:925px){
     .cta{
         text-align: center;
    }
     .cta aside{
         padding-inline: 20px;
         width: 100%;
         font-size: 1.2rem;
    }
     .SecondSection h2{
         font-size: 1.5rem;
    }
     .SecondSection p{
         text-align: justify;
         text-rendering: optimizeLegibility;
         font-size: 1rem;
         margin: 4vh;
    }
     .swiper{
         width: 90%;
    }
     .swiper-slide img{
         width: 300px;
         height: 300px;
    }
}
 @media (max-width:850px){
     .cta{
         margin: 0;
         height: 100vh;
         border-radius: 0;
    }
}
 @media (max-width:720px){
     .SecondSection{
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
    }
     .carousel{
         padding-top: 50px;
         padding-bottom: 50px;
    }
     .swiper{
         width: 100%;
         height: 275px;
    }
     .swiper-slide img{
         width: 200px;
         height: 200px;
    }
}
 @media (max-width:600px){
    .cta aside{
        padding-inline: 30px;
        padding-top: 0px;
        padding-bottom: 100px;
        width: 100%;
   }
     .SecondSection h2{
         font-size: 1.5rem;
    }
     .SecondSection p{
         font-size: 1rem;
         margin: 1vh;
    }
}
 @media (max-width:500px){
    .cta p{
        font-size: .8rem; 
        width: 100%;
    }
     .swiper{
         height: 225px;
    }
     .swiper-slide img{
         width: 150px;
         height: 150px;
    }
}
 @media (max-width:450px){
     .swiper{
         width: 90%;
         height: 225px;
    }
     .swiper-slide img{
         width: 150px;
         height: 150px;
    }
}
@media (max-width: 350px){
    .cta p{
        font-size: .7rem; 
        width: 100%;
    }
}
 @media (max-width: 245px) {

     .learn_more a{
         font-size: .8rem;
    }
}