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

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

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

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