*{
    margin: 0;
    padding: 0;
     font-family: 'Be Vietnam Pro', sans-serif;
     color: white;
 }
 
 
 html{
     scroll-behavior:smooth;
     max-width: 100%;
     overflow-x: hidden;
 }

 body{
    background-color: #27354A;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.overflow-wrapper{
    overflow-x: hidden;
    position: relative;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
        }


        nav{
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 3;
            padding: 2% 6%;
        
        }

        nav img{
            width: 175px;
            position: relative;
            z-index:2;
        
        }

        
        .nav-links{
            flex: 1;
            text-align: right;
            
            
        }
        
        .nav-links ul li{
            list-style: none;
            display: inline-block;
            padding: 0px 12px;
            position: relative;
            
        }
        .nav-links ul li a{
            color: #fff;
            text-decoration: none;
            font-size: 15px;
            
        }
        .nav-links ul li::after{
            content: '';
            width: 0%;
            height: 2px;
            background: #E85278;
            display: block;
            margin: auto;
            transition:0.5s;
        
        }
        
        .nav-links ul li:hover::after{
            width: 100%;
            
        }

        nav .fa-solid{
            display: none;
        }

        .fa-bars{
            color: #fff !important;
            font-size: 22px !important;
        }

        .open{
            height: 100vh;
            background-image: url("lineas_fondogris.png");
            background-size: 150%;
        }
        .texto-1{
            display: flex;
            justify-content: center;
           align-items: center;
           height: 90%;
           position: relative;
           
        }   

        .catch .texto-1{

           height: 100%;

           
        }   
        h1 {
            font-size: 58px;
            color: white;
            font-weight: 800;
        }


        .boton{
         display:flex;
         justify-content: center;
         position: relative;
            width: 100%;
          
        }


   

        
        .wrapper-1{
            height: 100vh;
            position: relative;
        }
.catch{
    height: 100vh;
    width: 100%;
    background-color: #E85278;
    position: relative;
}

h2{
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    z-index: 1;
}

.service{
 min-height: 100vh;
 width: 100%;
 padding: 0 0 40px 0;
 background-image: url("lineas_fondogris.png");
 background-size: 150%;
}



.wrapper-2{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 25px;
    text-align: right;

}


.cta-white{
    min-height: 5vh;
    width: 100%;
    background-image:url("white-objetivo.avif");
    padding-bottom: 4%;
    position: relative;
    margin-bottom: 5%;
}

.cta-white span{
    color: #27354A;
}

.cta-center{
    width: 90%;
    text-align: left;
    padding-bottom: 20px;
}

.us{
    min-height: 30vh;
    margin-bottom: 5vh;
    width: 100%;
    background-image: url("lineas_fondogris.png");
    background-size: 150%;
}

.us p{
    margin-top: 20px;
    padding: 20px;
}

.form{
    min-height: 50vh;
    width: 100%;
    background-color: #E85278;
    padding-bottom: 25%;
}

footer{
    height: 25vh;
    width: 100%;
    background-color:#27354A;
    background-image: url("lineas_fondogris.png");
    background-size: 150%;
}


a{
    text-decoration: none;
}

p{
    padding: 10px;
    color: #ffffffC7;
    font-size: 17px;
    font-weight: 300;
    line-height: 30px;
}

h3{
    position: relative;
font-size: 35px;
    font-weight: 400;
    color: #27354A;
}

.service-list h3{
    position: relative;
    font-size: 35px;
    font-weight: 400;
    padding-bottom: 20px;
    color: #fff;
    display: block;
}


.s{
    text-align: center;
    padding-bottom: 15px;
}

.s p{
    text-align: center;
    padding: 20px 20px 30px 20px;
    font-size: 17px;
    font-weight: 300;
}

h6{
    font-size: 17px;
}

.white-btn{
    color: #27354A;
    background-color: #fff;
    border: 1px #27354A solid;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 4px 4px 0 #27354A;
    transition: .3s;
    padding: 3px 14px 7px 14px;
    cursor: pointer;
    position: relative;
    margin-top: 20px;
    margin-left: 5%;
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
}

.blue-btn{
    font-size: 19px;
    color: #ffffff;
    background-color: #27354A;
    border: 1px #E85278 solid;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 4px 4px 0 #E85278;
    transition: .3s;
    padding: 3px 14px 7px 14px;
    cursor: pointer;
    position: relative;
    margin-left: 5%;
    font-family: 'Oswald', sans-serif;
}

.blue-btn:hover{
    color: #fff;
    background-color: #E85278;
    border: 1px #fff solid;
    transition: .3s;
}

.s img{
    width: 50px;
    padding: 10px;
}

.s-1{
    padding-top: 20px;
}

h4{
    font-size: 18px;
}


.scroll-btn::before {
    width: 3px;
    height: 8px;
    border-radius: 10px;
    display: none;
    content: '';
    position: relative;
    top: 6px;
    left: -1px;
    background-color: #fff;
}

.scroll-btn{
    position: absolute;
    display: none;
    bottom: 100px;
    justify-content: center;
    align-items: flex-start;
    width: 20px;
    height: 40px;
    box-sizing: border-box;
    background: #ea5278;
    border: 1px #fff solid;
    border-radius: 10px;
    box-shadow: 4px 4px 0 #fff;
    cursor: pointer;
    z-index: 1;
}

.circulo,.lineas,.flechas{
    position: relative;
}

.circulo::after {
    width: 140%;
    height: 140%;
    position: absolute;
    content: '';
    background: url("linea-circulo.svg") center center no-repeat;
    background-size: contain;
    z-index: -1;
    top: -10%;
    left: -20%;
}

.lineas::after{
    width: 130%;
    height: 100%;
    position: absolute;
    content: '';
    background: url('linea-discontinua.svg') center center no-repeat;
    background-size: contain;
    z-index: 0;
    top: 43%;
    left: -15%;
}

.flechas::after{
    width: 100%;
    height: 50%;
    position: absolute;
    content: '';
    background: url('linea-flechas.svg') center center no-repeat;
    background-size: contain;
    z-index: -1;
    top: 85%;
    left: 0;
}

form{
    background-color: rgba(0, 0, 0, 0.1);
min-height: 50vh;
width: 80%;
border: 1.5px solid #27354A;
border-radius: 10px;
box-shadow: 4px 4px 0 #27354A;
margin-left: 10%;
margin-top: 10%;
padding-top: 2%;

}

form label{
    display: block;
    font-weight: 200;
    padding: 15px;
}

input, textarea{
    width: 95%;
    background-color: #27354A;
    border: 1px solid white;
    border-radius: 10px;
    margin-top: 5px;
}

input{
    height: 4vh;
}

.privacy{
    width: unset;
    background-color: unset;
    border: unset;
    border-radius: unset;
    margin-top: unset;
    height: unset;
}



form button{
    color: #27354A;
    background-color: #fff;
    border: 1px #27354A solid;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 4px 4px 0 #27354A;
    transition: .3s;
    padding: 3px 14px 7px 14px;
    cursor: pointer;
    position: relative;
    margin-top: 20px;
    margin-left: 5%;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
}
form button:hover{
    color: #fff;
    background-color: #27354A;
    border: 1px #fff solid;
    transition: .3s;
}

.white-btn:hover{
    color: #fff;
    background-color: #27354A;
    border: 1px #fff solid;
    transition: .3s;
}


.footer-img{
 display: flex;
 justify-content: center;
}
.us img{
    width: 200px;
    padding: 23px 20px 0 20px;

}

footer img{
    width: 155px;
    padding: 20px 0 0 0;
}

textarea:focus, input:focus{
    background-color: #27354a8a;
}

h7{
    font-weight: 200;
    font-size: 13px;
    color: gray;
}

.contacto,.servicios{
    background-color: #27354A;
}

.publicidad{
    background-image: url("IMG_2784.PNG");
}

.clientes{
    background-image: url("IMG_2783.PNG");
}

.creativos{
    background-image: url("IMG_2785.PNG");
}
.sss{
 background-color: #fff;
 background-repeat: no-repeat;
 background-position: bottom -10% right 0;
 background-size: 125%;
 position: relative;

}

.sss::after{
    content: '';
    background: #fff;
    inset: 0;
    position: absolute;
    z-index: 0;
    opacity: 0.85;


}

.sss .fa-bars{
 color: #E85278 !important;
}

h8{
    font-size:60px;
    font-weight: 900;
    z-index: 1;
    position: relative;
    text-align: center;
}
.ss-titulo{
    font-size: 40px;
    color: #27354A;
    text-align: left;
    display: block;

}

.wrapper-4{
    width: 80%;
    position: relative;
}
.sss .separator{
    margin-bottom: 17.5px;
    width: 44px;
    height: 10px;
    background: #E85278;
    position: relative;
    display: block;
    margin-top: 20px;
}

.service-desc .separator{
    background-color: #E85278;
}
.ss-titulo span{
    color: #28374c;
}
h8 span::after{
    width: 130%;
    height: 200%;
    position: absolute;
    content: '';
    background: url("linea-borron-pink.svg") center center no-repeat;
    background-size: contain;
    z-index: -1;
    top: -25%;
    left: -20%;
}

.ss-titulo span::after{
    width: 0%;
    height: 0%;
    position: absolute;
    content: '';
    background: url("") center center no-repeat;
    z-index: -3;
    top: -25%;
    left: -20%;
}
.service-list{
    min-height: 100vh;
    background-image: url("lineas_fondogris.png");
               background-size: 150%;
               background-color: #E85278;
               position: relative;
    padding-bottom: 10%;
}


.cta-white .blue-btn{
    background-color: #fff;
    color: #ea5278;

}


.s-block{

    height: 100%;
    width: 100%;
    background-color: #fff;
    position: relative;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px #00000041;



}

.service-list a{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    display: block;
    height: 40vh;
    width: 80%;
    margin-left: 10%;

    border-radius: 10px;


}

.s-block img{
    width: 80px;
    padding: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.s-block h4{
    display: block;
}

.wrapper-3 h4{
    color: #000;
    text-align: center;
    font-weight: 400;

}

.wrapper-3{
    display: block;
    text-align: center;
}

.separator {

    margin-bottom: 17.5px;
    display: block;
    width: 38px;
    height: 8px;
    background: #fff;
    z-index: 1;
}

.service-desc{
    min-height: 80vh;
    padding-bottom: 10%;
    width: 100%;
    position: relative;
    background-color: #27354A;
    background-image: url("lineas_fondogris.png");
    background-size: 150%;
    text-align: center;

}

h9{
    font-size: 26px;
    font-weight: 600;
    position: relative;
    display: block;
    padding: 20px 0 10px 0;
}



.service-desc p{
    text-align: left;
    width: 85%;
    margin-left: 7.5%;
    padding: 0;
    font-size: 18px
}
/*-----media-----*/

@media(max-width: 550px){



    nav .fa-solid{
        display: block;
        font-size:18px;
        color: #fff;
        margin: 10px;
        cursor: pointer;
        font-weight: 700; 
            z-index: 1;
    }
    
        .nav-links ul li{
        display: block;
        padding: 15% 0 0 0;
}
            .nav-links ul li a{
            font-size: 16px;
}
    
            .nav-links ul{
        padding: 25% 0 0 7%;
}
    .nav-links{
        position: absolute;
        background: #E8527866;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        -moz-backdrop-filter: blur(10px);
        -o-backdrop-filter: blur(10px);
        -ms-backdrop-filter: blur(10px);
        height: 100vh;
        width: 275px;
        top: 0;
        inset: 0 0 0 50%;
        text-align: left;
        z-index: 11 !important;
        transition:1s;
        padding-top: 5%;
        transform: translateX(100%);
        box-shadow: 0 0px 17px black;
        }

    


.menu-background{
    opacity: 0;
  content  : "";
  position : fixed;
  z-index  : 11;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        -moz-backdrop-filter: blur(4px);
        -o-backdrop-filter: blur(4px);
        -ms-backdrop-filter: blur(4px);
  width    : 100%;
  height   : 200vh;
    transition: 1s;
}



.open{
    height: 100vh;
    background-image: url("lineas_fondogris.png");
    background-size: 150%;
}
.texto-1{
    display: flex;
    justify-content: center;
   align-items: center;
   height: 90%;
   position: relative;
   
}   

.catch .texto-1{

   height: 100%;

   
}   
h1 {
    font-size: 58px;
    color: white;
    font-weight: 800;
}


.boton{
 display:flex;
 justify-content: center;
 position: relative;
    width: 100%;
  
}





.wrapper-1{
    height: 100vh;
    position: relative;
}
.catch{
height: 100vh;
width: 100%;
background-color: #E85278;
position: relative;
}

h2{
text-align: center;
color: #fff;
font-size: 30px;
font-weight: 300;
z-index: 1;
}

.service{
min-height: 100vh;
width: 100%;
padding: 0 0 40px 0;
background-image: url("lineas_fondogris.png");
background-size: 150%;
}



.wrapper-2{
display: flex;
justify-content: center;
width: 100%;
padding-top: 25px;
text-align: right;

}


.cta-white{
min-height: 10vh;
width: 100%;
background-image:url("white-objetivo.avif");
padding-bottom: 10%;
position: relative;
margin-bottom: 5%;
}

.cta-white span{
color: #27354A;
}

.cta-center{
width: 90%;
text-align: left;
padding-bottom: 20px;
}

.us{
min-height: 30vh;
margin-bottom: 5vh;
width: 100%;
background-image: url("lineas_fondogris.png");
background-size: 150%;
}

.us p{
margin-top: 20px;
padding: 20px;
}

.form{
min-height: 50vh;
width: 100%;
background-color: #E85278;
padding-bottom: 25%;
}

footer{
height: 25vh;
width: 100%;
background-color:#27354A;
background-image: url("lineas_fondogris.png");
background-size: 150%;
}


a{
text-decoration: none;
}

p{
padding: 10px;
color: #ffffffC7;
font-size: 17px;
font-weight: 300;
line-height: 30px;
}

h3{
position: relative;
font-size: 23px;
font-weight: 400;
color: #27354A;
}

.service-list h3{
position: relative;
font-size: 23px;
font-weight: 400;
padding-bottom: 20px;
color: #fff;
display: block;
}


.s{
text-align: center;
padding-bottom: 15px;
}

.s p{
text-align: center;
padding: 20px 20px 30px 20px;
font-size: 17px;
font-weight: 300;
}

h6{
font-size: 17px;
}

.white-btn{
color: #27354A;
background-color: #fff;
border: 1px #27354A solid;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 4px 4px 0 #27354A;
transition: .3s;
padding: 3px 14px 7px 14px;
cursor: pointer;
position: relative;
margin-top: 20px;
margin-left: 5%;
font-family: 'Oswald', sans-serif;
font-size: 19px;
}

.blue-btn{
font-size: 19px;
color: #ffffff;
background-color: #27354A;
border: 1px #E85278 solid;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 4px 4px 0 #E85278;
transition: .3s;
padding: 3px 14px 7px 14px;
cursor: pointer;
position: relative;
margin-left: 5%;
font-family: 'Oswald', sans-serif;
}

.blue-btn:hover{
color: #fff;
background-color: #E85278;
border: 1px #fff solid;
transition: .3s;
}

.s img{
width: 50px;
padding: 10px;
}

.s-1{
padding-top: 20px;
}

h4{
font-size: 18px;
}


.scroll-btn::before {
width: 3px;
height: 8px;
border-radius: 10px;
display: block;
content: '';
position: relative;
top: 6px;
left: -1px;
background-color: #fff;
}

.scroll-btn{
position: absolute;
display: flex;
bottom: 100px;
justify-content: center;
align-items: flex-start;
width: 20px;
height: 40px;
box-sizing: border-box;
background: #ea5278;
border: 1px #fff solid;
border-radius: 10px;
box-shadow: 4px 4px 0 #fff;
cursor: pointer;
z-index: 1;
}

.circulo,.lineas,.flechas{
position: relative;
}

.circulo::after {
width: 140%;
height: 140%;
position: absolute;
content: '';
background: url("linea-circulo.svg") center center no-repeat;
background-size: contain;
z-index: -1;
top: -10%;
left: -20%;
}

.lineas::after{
width: 130%;
height: 100%;
position: absolute;
content: '';
background: url('linea-discontinua.svg') center center no-repeat;
background-size: contain;
z-index: 0;
top: 43%;
left: -15%;
}

.flechas::after{
width: 100%;
height: 50%;
position: absolute;
content: '';
background: url('linea-flechas.svg') center center no-repeat;
background-size: contain;
z-index: -1;
top: 85%;
left: 0;
}

form{
background-color: rgba(0, 0, 0, 0.1);
min-height: 50vh;
width: 80%;
border: 1.5px solid #27354A;
border-radius: 10px;
box-shadow: 4px 4px 0 #27354A;
margin-left: 10%;
margin-top: 10%;
padding-top: 2%;

}

form label{
display: block;
font-weight: 200;
padding: 15px;
}

input, textarea{
width: 95%;
background-color: #27354A;
border: 1px solid white;
border-radius: 10px;
margin-top: 5px;
}

input{
height: 4vh;
}

.privacy{
width: unset;
background-color: unset;
border: unset;
border-radius: unset;
margin-top: unset;
height: unset;
}



form button{
color: #27354A;
background-color: #fff;
border: 1px #27354A solid;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 4px 4px 0 #27354A;
transition: .3s;
padding: 3px 14px 7px 14px;
cursor: pointer;
position: relative;
margin-top: 20px;
margin-left: 5%;
font-family: 'Oswald', sans-serif;
font-size: 18px;
margin-bottom: 20px;
}
form button:hover{
color: #fff;
background-color: #27354A;
border: 1px #fff solid;
transition: .3s;
}

.white-btn:hover{
color: #fff;
background-color: #27354A;
border: 1px #fff solid;
transition: .3s;
}


.footer-img{
display: flex;
justify-content: center;
}
.us img{
width: 200px;
padding: 23px 20px 0 20px;

}

footer img{
width: 155px;
padding: 20px 0 0 0;
}

textarea:focus, input:focus{
background-color: #27354a8a;
}

h7{
font-weight: 200;
font-size: 13px;
color: gray;
}

.contacto,.servicios{
background-color: #27354A;
}

.publicidad{
background-image: url("IMG_2784.PNG");
}

.clientes{
background-image: url("IMG_2783.PNG");
}

.creativos{
background-image: url("IMG_2785.PNG");
}
.sss{
background-color: #fff;
background-repeat: no-repeat;
background-position: bottom -10% right 0;
background-size: 125%;
position: relative;

}

.sss::after{
content: '';
background: #fff;
inset: 0;
position: absolute;
z-index: 0;
opacity: 0.85;


}

.sss .fa-bars{
color: #E85278 !important;
}

h8{
font-size:40px;
font-weight: 900;
z-index: 1;
position: relative;
text-align: center;
}
.ss-titulo{
font-size: 30px;
color: #27354A;
text-align: left;
display: block;

}

.wrapper-4{
width: 80%;
position: relative;
}
.sss .separator{
margin-bottom: 17.5px;
width: 44px;
height: 10px;
background: #E85278;
position: relative;
display: block;
margin-top: 20px;
}

.service-desc .separator{
background-color: #E85278;
}
.ss-titulo span{
font-size: 30px;
color: #28374c;
}
h8 span::after{
width: 130%;
height: 200%;
position: absolute;
content: '';
background: url("linea-borron-pink.svg") center center no-repeat;
background-size: contain;
z-index: -1;
top: -25%;
left: -20%;
}

.ss-titulo span::after{
width: 0%;
height: 0%;
position: absolute;
content: '';
background: url("") center center no-repeat;
z-index: -3;
top: -25%;
left: -20%;
}
.service-list{
min-height: 130vh;
background-image: url("lineas_fondogris.png");
       background-size: 150%;
       background-color: #E85278;
       position: relative;

padding-bottom: 20%;
}


.cta-white .blue-btn{
background-color: #fff;
color: #ea5278;

}


.s-block{

height: 100%;
width: 100%;
background-color: #fff;
position: relative;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px #00000041;



}

.service-list a{
padding-top: 20px !important;
padding-bottom: 20px !important;
display: block;
height: 40vh;
width: 80%;
margin-left: 10%;

border-radius: 10px;


}

.s-block img{
width: 80px;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}

.s-block h4{
display: block;
}

.wrapper-3 h4{
color: #000;
text-align: center;
font-weight: 400;

}

.wrapper-3{
display: block;
text-align: center;
}

.separator {

margin-bottom: 17.5px;
display: block;
width: 38px;
height: 8px;
background: #fff;
z-index: 1;
}

.service-desc{
min-height: 80vh;
padding-bottom: 20%;
width: 100%;
position: relative;
background-color: #27354A;
background-image: url("lineas_fondogris.png");
background-size: 150%;
text-align: center;

}

h9{
font-size: 26px;
font-weight: 600;
position: relative;
display: block;
padding: 20px 0 10px 0;
}



.service-desc p{
text-align: left;
width: 85%;
margin-left: 7.5%;
padding: 0;
font-size: 18px
}
}