@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;800&display=swap');

:root{
	--white-text:#fff;
	--background:#c8e8f1;
	--black-text:rgb(68, 66, 66)	
	--prueba: (180deg,#21c8f6,#637bff);
}

.background1-left-column{
	background: linear-gradient(180deg,#1D4D99,#637bff);
}

.background2-left-column{
	background: linear-gradient(180deg ,#1D4D99,#637bff);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    /*font-size:  20px;*/
}
 
body{
    /*background: #fff59d;*/
    min-width: 375px;
    overflow-x:hidden; /*To slider 2*/
 }
 
.header{
    position: fixed;
    width: 100%;
    height: 90px;
    /*margin-top: -100px;*/
    background-color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 5%;
    z-index:5;
}

.header .logo{
    cursor: pointer;
    margin-right: auto;
}

.header .logo img{
    height: 70px;
    width: auto;
    transition: all 0.3s;
}

.header .logo img:hover{
    transform: scale(1.2);
}

.header .nav-links{
    list-style: none;
}

.header .nav-links li{
    display: inline-block;
    padding: 0 5px;    
}

.header .nav-links li:hover,
.header .overlay a:hover{
    transform: scale(1.1);
}

.header .nav-links a{
    font-weight: 700;
    color: #1D4D99; 
    text-transform:uppercase;
}

.header .nav-links a:hover{
    color: #ffbc0e;
}

/**/.menu {
    display:none;
}

.header .btn button,
/**/.header .menu button{
    margin-left: 20px;
    font-weight: 700;
    color: white;
    padding: 9px 25px;
    background: #1D4D99;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform:uppercase;
    transition: all 0.3s ease 0s;
}

.header .btn button:hover,
.header .menu button:hover{
    /*background-color: #e2f1f8;*/
    color: #ffbc0e;
    transform: scale(1.1);
}


@media screen and (max-width: 800px){
    .nav-links, .btn {
        display: none;
    }
    .menu {
        display: inherit;
    }
}



/*Nav Mobile*/

.header a{
    text-decoration: none;  
    /*borramos el que teniamos en .header .nav-links a*/ 
}

.header .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(33, 49, 63, .95);
    overflow: hidden;
    transition: all 0.3s ease 0s;
}

.header .overlay .overlay-content{
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
}

.header .overlay a{
    padding: 15px;
    font-size: 36px;
    display: block;
    transition: all 0.3s ease 0s;
    font-weight: 700;
    text-transform:uppercase;
    color: white;
}

.header .overlay a:hover, 
.header .overlay a:focus{
    color: #ffbc0e;
}

.header .overlay .close{
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 65px;
}

@media screen and (max-height:450px) {
    .header .overlay a{
        font-size: 20px;
    }
    .header .overlay .close{
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/************border de modal*********/
.us0{
    width: 90%;
    margin-left: 5%;
    border-radius: 30px;
    box-shadow: 3px 3px 5px rgba(29, 77, 153,0.5);
    justify-content:center;
     align-items: center;
}

/********Second slider***********/
.home{
    height: 100vh;
    overflow:hidden;
    position:relative;
}

.home .slidee{
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    height: 95%;
    background-size: cover;
    background-position: center;
    display:none;
    padding:0 15px;
    animation: slidee 2s ease;
}

.home .slidee.active{
    display:flex;
}

@keyframes slidee{
    0%{
        opacity:0; transform:scale(1.1);
    }
    100%{
        opacity:1; transform:scale(1);
    }
}

.containerr{
    max-width:1170px;
    /*margin:auto;*/
    top:50px;
    left:100px;
}

.home .containerr{
    flex-grow:1;
}

.home .caption{
    width:50%;
    margin-top:30%;
    background-color:rgba(240,240,240,0.75);
    border-radius:15px;
    text-align:-webkit-center;
    padding:10px;
}

.home .caption h1{
    font-size:42px;
    color:#000000;
    margin:0;
    color:#1D4D99;
}

.home .slidee.active .caption h1{
    opacity:0;
    animation: captionText .5s ease forwards;
    animation-delay:1s;
}
    
.home .caption p{
    font-size:18px;
    /*margin:15px 0 30px;*/
    color:#FF8303;
    font-weight:700;
}

.home .slidee.active .caption p{
    opacity:0;
    animation: captionText .5s ease forwards;
    animation-delay:1.2s;
}

.home .caption a{
    display: inline-block;
    padding:10px 30px;
    background-color:#1D4D99;
    text-decoration:none;
    color:#ffffff;
    border-radius:5px;
}

.home .slidee.active .caption a{
    opacity:0;
    animation: captionText .5s ease forwards;
    animation-delay:1.4s;
}

@keyframes captionText{
    0%{
        opacity:0; transform:translateX(-100px);
    }
    100%{
        opacity:1; transform:translateX(0px);
    }
}

.home .controls .next{
    border-radius:10px 0 0 10px;
}

.home .controls .prev{
    border-radius:0 10px 10px 0;
}

.home .controls .prev,
.home .controls .next{
    position:absolute;
    top:50%;
    height:100px;
    width: 50px;
    margin-top: -20px;
    color:#ffffff;
    background-color:rgba(29, 77, 153, 0.5);
    text-align:center;
    /*line-height:40px;*/
    font-size:60px;
    cursor:pointer;
    transition: all .5s ease;
    font-weight:700;
    
}

.home .controls .prev:hover,
.home .controls .next:hover{
    background-color:#ffbc0e;
}

.home .controls .prev{
    left:0;
}

.home .controls .next{
    right:0;
}

.home .indicator{
    position:absolute;
    left:50%;
    bottom:30px;
    transform: translateX(-50%);
    font-weight:700;
    cursor: pointer;
}

.home .indicator div{
    display:inline-block;
    width:25px;
    height:25px;
    color:#ffffff;
    background-color:#1D4D99;
    border-radius:50%;
    text-align:center;
    line-height:25px;
    margin:0 3px;
}

.home .indicator div.active{
    background:#ffbc0e;
}

@media(max-width: 767px){
    .controls{
        display:none;
    }
}


/***************TESTIMONIALS****************/
.slide-container{
    max-width:1120px;
    width:100%;
    padding:40px 0;
}

.slide-content{
    margin:0 40px;
    overflow:hidden;
    border-radius:25px;
}

.card{
    /*width:320px;*/
    height:380px;
    border-radius:25px;
    background-color:#F0F0F0;
}

.image-content,
.card-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:10px 14px;
}

.image-content{
    position:relative;
    row-gap: 5px;
    padding: 10px 0;
}

.card .overlay{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:#1D4D99;
    border-radius:25px 25px 0 25px;
}

.overlay::before,
.overlay::after{
    content:'';
    position:absolute;
    right:0;
    bottom:-40px;
    height:40px;
    width:40px;
    background:#1D4D99;
}

.overlay::after{
    border-radius:0 25px 0 0;
    background-color:#F0F0F0;
}

.card-image{
    position:relative;
    height:135px;
    width:135px;
    border-radius:50%;
    background:#F0F0F0;
    padding:3px;
}

.card-image .card-img{
    height:100%;
    width:100%;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #1D4D99;
}

.card .name{
    font-size:18px;
    font-weight:700;
    color:#333;
    z-index:1;
    text-align:-webkit-center;
}

.card .description{
    font-size:14px;
    color:#707070;
    text-align:justify;
}

.card .button{
    border:none;
    font-size:16px;
    color:#F0F0F0;
    padding:8px 16px;
    background-color:#1D4D99;
    border-radius:6px;
    margin:5px;
    cursor:pointer;
    transition:all 0.3s ease;
    /*margin-top:50px;
    float:right;*/
}

.card .button a{
    text-decoration:none;
    color:white;
}

.card .button:hover{
    background:#1D4D99;
}

.swiper-navBtn{
    color: #6E93f7;
    transition:color 0.3s ease;
    font-weight:700;
}

.swiper-navBtn:hover{
    color:#4070F4;
    transform:scale(1.1);
}

.swiper-navBtn::before,
.swiper-navBtn::after{
    right:40px;
}

.swiper-button-next{
    right:0;
}

.swiper-button-prev{
    left:0;
}

.swiper-pagination-bullet{
    background-color:#4070F4;
}

.swiper-pagination-bullet-active{
    background-color:#1D4D99;
}



/************************************************/
.containerrr{
	display: flex;
	justify-content: center;
	height: 50vh;
    align-items: center;
    width:94%;
    margin-left:3%;
}

.cont2{
	display: flex;
	justify-content: center;
	height: 50vh;
    align-items: center;
    width:94%;
    margin-left:3%;
    overflow:hidden;
}

.containerrr .cards{
    background-color:var(--white-text);
	border-radius: 1rem;
	box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2);
	display: flex;	
	margin: 1.5rem;
	overflow: hidden;
	/*width: 35rem;*/
	height: 19rem;
}

.cont2 .cards2{
    background-color:var(--white-text);
	display: flex;	
	margin: 1.5rem;
	overflow: hidden;
	min-width: 35rem;
	height: 19rem;
}

.cont2 .cards2 img{
     max-width:80%;
     max-height:80%;
}

.containerrr .cards h6{
    opacity: 0.6;	
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-align:center;
}

.containerrr .cards h2{
    letter-spacing: .1rem;
	margin: 1rem 0;
	color: var(--black-text);
	text-align:center;
}

.left-column{
    color: var(--white-text);
	padding: 1rem;
	max-width: 11rem;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.left-column h2{
    color:var(--white-text);
}

.left-column i{
    font-size:5rem;
}

.right-column{
    padding: 3px 30px;
	width: 100%;
	display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
}

.right-column p{
    font-size:.9rem;
    color:var(--black-text);
    text-align:justify;
}

.containerrr .cards .button{
    border:none;
    font-size:16px;
    color:#F0F0F0;
    padding:8px 16px;
    background-color:#1D4D99;
    border-radius:6px;
    margin:5px;
    cursor:pointer;
    transition:all 0.3s ease;
    /*margin-top:50px;
    float:right;*/
}

@media (max-width: 1030px) {
	.containerrr, .cont2{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height:auto;
	}
  }
  
  
/****************CONTACT FORM****************/
.content{
    max-width:1170px;
    margin-left:auto;
    margin-right:auto;
    padding:1.5em;
    color:#1D4D99;
}

.content ul{
    list-style:none;
    padding:0;
}

.logoc{
    text-align:center;
    font-size:3em;
}

.logoc span{
    color:#1D4D99;
}

.contact-wrapper h2,
.contact-wrapper p{
    color:#112d59;
}

.contact-wrapper{
    box-shadow:0 0 20px 0 rgba(255,255,255,0.3);
}

.contact-wrapper > * {
    padding:1em;
}

.contact-wrapper2 h2,
.contact-wrapper2 p{
    color:#112d59;
}

.contact-wrapper2{
    box-shadow:0 0 20px 0 rgba(255,255,255,0.3);
}

.contact-wrapper2 > * {
    padding:1em;
}

.contact-form{ margin-left:7%; margin-right:-7%; }
.contact-form2{ margin-left:-7%; margin-right:7%; }

.contact-form form{
    display:grid;
    grid-template-columns: 50% 50%;
}
.contact-form2 form{
    display:grid;
    grid-template-columns: 50% 50%;
}

.contact-form form label {
    display: block;
}

.contact-form form p {
    margin: 0;
    padding: 1em;
}

.contact-form form .block {
    grid-column: 1 / 3;
}

.contact-form form button,
.contact-form form input,
.contact-form form textarea {
    width: 100%;
    padding: .7em;
    border: none;
    background: none;
    outline: 0;
    color: #000;
    border-bottom: 1px solid #1D4D99;
}

.contact-form form button {
    background: #1D4D99;
    border: 0;
    text-transform: uppercase;
    padding: 1em;
}

.contact-form form button:hover,
.contact-form form button:focus {
    background: #1D4D99;
    color: #fff;
    transition: background-color 1s ease-out;
    outline: 0;
}

/* CONTACT INFO */
.contact-info, .contact-info2 {
    /*background: #000;*/
    place-self:center;
    
}

.contact-info h4, .contact-info ul, .contact-info p {
    text-align: center;
    margin: 0 0 1rem 0;
    color:#1D4D99;
}

/* LARGE SIZE */
@media(min-width: 700px) {
    .contact-wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .contact-wrapper2 {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .contact-wrapper > * {
        padding: 2em;
    }
    .contact-wrapper2 > * {
        /*padding: 3em;*/
        margin-left:5em;
    }
    .contact-info h4,
    .contact-info ul,
    .contact-info p {
        text-align: center;
    }
}



/*************************footer**********************/
footer{
    position:relative;
    width:100%;
    background:#1D4D99;
    min-height:100px;
    padding: 20px 50px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

footer .social_icon,
footer .menuf{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:10px 0;
    flex-wrap:wrap;
}

footer .social_icon li,
footer .menuf li{
    list-style:none;
}

footer .social_icon li a{
    font-size:2em;
    color:#fff;
    margin:0 10px;
    display:inline-block;
    transition:0.5s;
}

footer .social_icon li a:hover{
    transform:translateY(-10px);
}

footer .menuf li a{
    font-size:1.2em;
    color:#fff;
    margin:0 10px;
    display:inline-block;
    /*transition:0.5s;*/
    text-decoration: none;
    opacity:0.75;
}

footer .menuf li a:hover{
    opacity:1;
}

footer p{
    color:#fff;
    text-align:center;
    margin-top:15px;
    margin-bottom:40px;
    font-size:1.1em;
}

footer .wave{
    position:absolute;
    top:-100px;
    left:0;
    width:100%;
    height:100px;
    background:url(../pics/olas.png);
    background-size:1000px 100px;
}

footer .wave#wave1{
    z-index:1000;
    opacity:1;
    bottom:0;
    animation:animateWave 20s linear infinite;
}

footer .wave#wave2{
    z-index:999;
    opacity:0.5;
    bottom:10px;
    animation:animateWave_02 20s linear infinite;
}

footer .wave#wave3{
    z-index:1000;
    opacity:0.2;
    bottom:15px;
    animation:animateWave 19s linear infinite;
}

footer .wave#wave4{
    z-index:999;
    opacity:0.7;
    bottom:20px;
    animation:animateWave_02 18s linear infinite;
}

@keyframes animateWave{
    0%{ background-position-x: 1000px; }
    100%{ background-position-x: 0px; }
}
@keyframes animateWave_02{
    0%{ background-position-x: 0px; }
    100%{ background-position-x: 1000px; }
}


/**************************************WHATSAPP BUTTON****************************/
.whtsapp{
    background-color:#25D366;
    border:5px solid #fff;
    position:fixed;
    z-index:999;
    border-radius:50%;
    bottom:25px;
    right:25px;
    padding:10px;
    z-index:1001;
    transition:ease 0.3s;
    animation:efecto 1.2s infinite;
}

.whtsapp:hover{
    transform:scale(1.1);
    transition:0.3s;
}

.whtsapp .fa-brands{
    font-size:30px;
    transition:ease 1s;
    color:#fff;
}

@keyframes efecto{
    0%{
        box-shadow:0 0 0 0 rgba(0,0,0,0.85);
    }
    100%{
        box-shadow:0 0 0 15px rgba(0,0,0,0);
    }
}



/*******************************RESPONSIVE****************************************/
@media screen and (max-width: 768px){
    .slide-content{ margin:0 10px; }
    .swiper-navBtn{ display:none; }
    .contact-form form{ display:inherit; }
    .cards h2{
    	color: var(--black-text);
    	text-align:center;
    	font-size:22px;
    	letter-spacing:0;
    }
    .right-column{
        padding: 1px 10px;
    	width: 100%;
    	display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
    }
    .right-column p{
        text-align:justify;
        font-size:0.5rem;
    }
    .cards .button{
        border:none;
        font-size:3px;
        color:#F0F0F0;
        padding:8px 16px;
        background-color:#1D4D99;
        border-radius:6px;
        margin:5px;
        cursor:pointer;
        transition:all 0.3s ease;
    }
    .left-column{
        color: var(--white-text);
    	padding: 1rem;
    	max-width: 6rem;
    	display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .left-column h2{ font-size:1rem; }
    .left-column i{ font-size:3rem; }
    .slide-container{
        max-width:1120px;
        width:90%;
        /*padding:40px 0;*/
    }
    .card .overlay{
        position:absolute;
        left:0;
        top:0;
        height:100%;
        width:100%;
        background:#1D4D99;
        border-radius:25px 25px 0 25px;
    }
    .card-image{
        position:relative;
        height:100px;
        width:100px;
        border-radius:50%;
        background:#F0F0F0;
        padding:3px;
    }
    .card .name{ font-weight:700; }
    .home .caption h1{
        font-size:20px;
        color:#1D4D99;
    }
    .home .caption p{
        font-size:12px;
        color:#FF8303;
    }
    .logoc {
        font-size:32px;
    }
    .cont2 .cards2 img{
        min-width:0;
        max-height:50%;
        margin:0 !important;
    }
    .cont2 .cards2{
        max-height:20rem;
        min-width:1rem;
        margin:0 !important;
        align-items:center !important;
    }
    .cont2 {
        min-width:1rem !important;
        max-height:20rem !important;
    	overflow:hidden;
    	margin:0 !important;
    }
    .cont2 p{
        font-size:12px !important;
        padding:0 15px 15px 15px !important;
    }
}


/********************************/
.contact-form span{
    color:red;
}

.contact-form span i{
    color:seagreen;
}

/*************************************hot sale*******************************/
.banner{
    position:relative;
    width:100%;
    height:100%;
    background:url(../pics/MABA_hotsale_1.png);
    background-size:cover;
    background-position:bottom;
}

.home .clouds{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:5;
}

.home .clouds img{
    position:absolute;
    bottom:0;
    max-width:100%;
    animation:animate calc(10s * var(--i)) linear infinite;
}

@keyframes animate{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(100%);
    }
}

.home section{
    position:relative;
    padding:75px 100px;
}

.home section h2{
    font-size:2.5em;
    margin-bottom:20px;
}