/*Colors*/
:root {
    --scroll: #3e3e3f;
    --body: #8b8b8b;
    --bg-elements: #e6e7e7;
    --nav: #ffffff;
    --font: #b8cdda;
}

/*Font*/
.font {
    font-family: 'Roboto Slab', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.font-color {
    color: var(--font);
}

/*Scrollbar*/
body {
    background-color: var(--body);
}

body::-webkit-scrollbar {
    width: 8px;   
}

body::-webkit-scrollbar-track {
    background: transparent
}
  
body::-webkit-scrollbar-thumb {
    position: fixed;
    background-color: var(--scroll); 
    border-radius: 20px;  
    border: 10px solid transparent;
}

/*Navbar*/
.f-input {
    border-radius: 50px 50px 50px 50px;
    background: transparent;
}

.form {
    background-color: var(--bg-elements);
    border-radius: 50px 50px 50px 50px;
}


.logo-container {
    padding: 0 0 0 4rem;
}


.navbar {
    font-family: "Noto Sans TC", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9rem;
    background-color: var(--nav);
}

.dropdown-toggle {
    font-size: 0.9rem;
}

.search {
    font-size: 1.1rem;
    font-weight: bold;
    background-color: var(--bg-elements);
    border-radius: 50%;
    cursor: pointer;
}

.search:hover{
    background-color: #e5e5e5;
    transition-duration: 0.2s;
}

.cita {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
    display: block;
}

.max { /*Maximia tu pensión*/
    color:var(--body) ;
}

.max:hover{
    color: black;
}

/*Legend*/
.legend {
    background: linear-gradient(60deg, rgba(204,189,157,1) 2%, rgba(133,129,213,1) 77%, rgba(101,101,190,1) 94%);
}

.h1 {
    font-size: 300%; 
    font-family: 'Roboto Slab', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}   

.legend-xs h1 {
    font-size: 2rem; 
    font-family: 'Roboto Slab', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.legend-xxl h1 {
    font-size: 10rem;
}

.proyect {
    color: var(--font); 
    background-color: rgba(0, 0, 0, 0.3); 
    border-radius: 5px;
    top: 75%;
}

.proyect-xxl-h1 {
    font-size: 5em;
}

.proyect-xxl-font {
    font-size: 2.6em;
}


.img-xs, .img {
    width: 100%; 
    height: 70dvb; 
    object-fit: cover;
}

/*EP Logo*/
.EP {
    background: rgb(10,106,136);
    background: linear-gradient(135deg, rgba(10,106,136,1) 0%, rgba(126,148,172,1) 50%, rgba(249,249,249,1) 100%);    
}

/*About us*/
.ab_us {
    background-color: #f3f2eb;
}

.about{
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.spacing {
    word-spacing: 0.5rem;
}

/*Services*/
.servs {
    background: rgb(10,106,136);
    background: linear-gradient(135deg, rgba(10,106,136,1) 0%, rgba(126,148,172,1) 42%, rgba(237,220,171,1) 100%);
}

/*NSS*/
.nss {
    background-color: rgba(233, 236, 239, 1);
}

.r-nss {
    font-size: 1.14rem;
}

.img-nss {
    height: 35%;
}

.img-nss img {
    width: 85%;
}

.wsp {
    color: #6ba54a;
}

/*Location*/
.location-container {
    background: rgb(241,241,241);
    background: linear-gradient(135deg, rgba(241,241,241,1) 0%, rgba(153,165,177,1) 42%, rgba(92,129,222,1) 100%);
}

.anchor{
    text-decoration: none;
}

.anchor:hover {
    text-decoration: underline;
}


/*Contact Us*/
.info {
    background-color: #2f4d8d; 
    color: #b1c2e5; 
    margin-top: -10px;
}

.loc {
    width: 25%;
}

.info-item a {
    color: #b1c2e5;
    text-decoration: none;
}

.info-item a:hover {
    color: black;
    text-decoration: underline;
}

.ley73 p:hover, .follow p:hover, .num p:hover, .loc p:hover {
    text-decoration: underline;
    color: black;
    cursor: pointer;
}


.wapp {
    background-color: #25d366; 
    top: 50%; 
    box-shadow: 5px 5px 5px gray; 
    top: 85%; 
    left:93%;
    z-index: 3;
}

.wapp:hover {
    background-color: black; 
    transition-duration: 0.5s;
    cursor: pointer;
}

/*Copy Right*/

.copy {
    background-color: #284278;
}

/*Media Querys*/

@media (min-width: 0px) and (max-width: 992px){
    .loc {
        width: 100%;
    }
    .wapp {
        top: 85%;
        left: 85%;
    }
}


@media (min-width: 0px) and (max-width: 576){
    .wapp {
        top: 70%;
        left: 50%;
    }
}

@media (min-width: 1400px) and (max-width: 6000px) {
    .Espinoza, .about-text {
        max-width: 1800px;
    }

    .PYMES, .about-img, .servs-text p, .nss-left {
        max-width: 600px;
    }

    .mynavbar_body, .top-part, .bottom-part {
        max-width: 1400px; 
    }

    .top-part, .bottom-part {
	    min-width: 1300px;
    }

    .mynavbar_body{
        min-width: 1400px;
    }

    .m_sep {
        max-width: 500px;
        min-width: 380px;
    }

    .navnav {
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .Espinoza{
        min-width: 600px;
    }

    .PYMES {
        min-width: 550px;

    }

    .about-text{
        min-width: 800px;
    }

    .about-img{
        min-width: 400px;
    }

    .servs-text p {
        min-width: 500px;
    }   

    .proyect-xxl-h1 {
        font-size: 4em; 
    }

    .proyect-xxl-font {
        font-size: 2em;
        padding: 2rem;
    }

    .nss-left {
        min-width: 650px;
    }

    .nss-right {
        max-width: 625px;
        min-width: 600px;
    }

    .location-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .info-item {
        max-width: 350px;
        min-width: 300px
    }
}

/*Animaciones*/ 
.cont {
    background-color: #15213a;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0000 18.75%, #3b82f6 0 31.25%, #0000 0),
      linear-gradient(45deg, #0000 18.75%, #3b82f6 0 31.25%, #0000 0),
      linear-gradient(135deg, #0000 18.75%, #3b82f6 0 31.25%, #0000 0),
      linear-gradient(45deg, #0000 18.75%, #3b82f6 0 31.25%, #0000 0);
    background-size: 60px 60px;
    background-position:
      0 0,
      0 0,
      30px 30px,
      30px 30px;
    animation: slide 3s linear infinite;
  }
  
  @keyframes slide {
    to {
      background-position:
        60px 0,
        60px 0,
        90px 30px,
        90px 30px;
    }
  }