*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    background-color: #EAE8E8;
}

.hero {
    display: grid;
    grid-template: repeat(7, 1fr) / repeat(18, 1fr);
}

.hero .back {
    grid-area: 1 / 1 / 7 / 19;
    background: url(./img/Rectángulo\ 117.png);
    background-position: center;
    background-repeat: no-repeat;
    height: 62vh;
    overflow: hidden;
    position: relative;
    bottom: 45%;
}

.hero .hero-container-text {
    grid-area: 3 / 2 / 6 / 18;
    position: relative;
    bottom: 5%;
}

.hero .hero-container-text h1 {
    font-size: 2.7rem;
    text-transform: uppercase;
    line-height: 5rem;
    font-weight: 400;
    text-align: center;
}

.hero .hero-container-text h1 span {
    font-weight: 700;
}


.about-nav {
    display: grid;
    grid-template: repeat(46, 1fr) / repeat(30, 1fr);
    background-color: #EAE8E8;
}

.about-nav header {
    grid-area: 3 / 3 / 6 / 30;
    display: flex;
    justify-content: space-between;
}

.about-nav header a.logo {
    width: 20%;
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: flex-start;
}

.about-nav header a.logo h2 {
    font-size: 3.2rem;
    letter-spacing: 0.3rem;
    font-weight: 500;
    text-transform: uppercase;
}

.about-nav header nav {
    width: 50%;
}

.about-nav header nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.about-nav header nav ul li {
    list-style: none;
}

.about-nav header nav ul li a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.about-nav header nav ul li a.active {
    background-color: #262626;
    padding: 11px 10px;
    color: #fff;
    border-radius: 5px;
}

.about-nav .email-container {
    grid-area: 7 / 24 / 9 / 30;
    width: 100%;
}

.about-nav .email-container h6 {
    font-size: 0.88rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
}


.about-nav .container-img-big-one {
    grid-area: 8 / 2 / 30 / 21;
}


.about-nav .container-img-big-one img {
    width: 100%;
    height: 100%;
}

.about-nav .container-img-small-one {
    grid-area: 12 / 23 / 18 / 29;
}

.about-nav .container-img-small-one img {
    width: 90%;
    height: 80%;
}

.about-nav .container-img-small-two {
    grid-area: 20 / 18 / 27 / 24;
}

.about-nav .container-img-small-two  img {
    width: 82%;
    height: 75%;
}

.about-nav .about-aina {
    grid-area: 30 / 2 / 35 / 21;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.about-nav .about-aina h3{
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
}

.about-nav .mision-aina {
    grid-area: 38 / 2 / 44 / 21;
    display: flex;
    justify-content: space-between;
}

.about-nav .mision-aina .button {
    width: 20%;
}

.about-nav .mision-aina .button button {
    padding: 10px 18px;
    background-color: #262626;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;
}

.about-nav .mision-aina p {
    width: 50%;
    font-weight: 300;
    line-height: 1.4rem;
}

.vision {
    display: grid;
    grid-template: repeat(39, 1fr) / repeat(30, 1fr);
}

.vision .vision-back {
    grid-area: 1 / 1 / 40 / 31;
    overflow: hidden;
}

.vision .vision-back img {
    width: 100%;
    height: 100%;
}

.vision .vision-title {
    grid-area: 2 / 1 / 8 / 23;
    margin: 20px;
    padding: 10px;
}

.vision .vision-title h3 {
    font-size: 2.8rem;
    letter-spacing: 0.2rem;
    font-weight: 500;
}

.vision .vision-about {
    grid-area: 9 / 1 / 23 / 17;
    padding: 10px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
}

.vision .vision-about .button {
    width: 20%;
}

.vision .vision-about .button button {
    padding: 10px 18px;
    background-color: #262626;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;

}

.vision .vision-about .paragraph {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.vision .vision-about .paragraph p {
    font-size: 0.95rem;
    font-weight: 300;
}

.vision .vision-about .paragraph p.two {
    position: relative;
    top: 20%;
}


.vision header {
    grid-area: 28 / 1 / 36/ 30;
    padding: 10px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
}

.vision header a.logo {
    width: 40%;
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.vision header a.logo h2 {
    font-size: 2.3rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    text-transform: uppercase;
}


.vision header nav {
    width: 50%;
}

.vision header  nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.vision header nav ul li {
    list-style: none;
}

.vision header nav ul li a {
    text-decoration: none;
    cursor: pointer;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.vision header nav ul li a.active {
    background-color: #262626;
    padding: 11px 10px;
    color: #fff;
    border-radius: 5px;
}

.vision .email-container {
    grid-area: 36 / 24 / 38 / 30;
}

.vision .email-container h6 {
    font-size: 0.88rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
}

.gallery {
    display: grid;
    grid-template: repeat(35, 1fr) / repeat(53, 1fr);
    height: 75vh;
}

.gallery .gallery-one {
    grid-area: 1 / 1 / 35 / 19;
}


.gallery .gallery-one img {
    width: 100%;
    height: 100%;
}

.gallery  img.two-one {
    grid-area: 1 / 19 / 15 / 32;
    width: 100%;
    height: 100%;
}

.gallery img.two-two {
    grid-area: 1 / 32 / 15 / 43;
    width: 100%;
    height: 100%;
}

.gallery img.two-three {
    grid-area: 1 / 43 / 15 / 54;
    width: 100%;
    height: 100%;
}

.gallery img.three-one {
    grid-area: 15 / 19 / 28 / 32;
    width: 100%;
    height: 100%;
}

.gallery img.three-two {
    grid-area: 15 / 32 / 28 / 43;
    width: 100%;
    height: 100%;
}

.gallery img.three-three {
    grid-area: 15 / 43 / 28 / 54;
    width: 100%;
    height: 100%;
}






.proyects {
    display: grid;
    grid-template: repeat(35, 1fr) / repeat(30, 1fr);
}

.proyects .proyects-about {
    grid-area: 5 / 1 / 23 / 20;
    padding: 10px;
    margin: 30px;
}

.proyects .proyects-about h2 {
    text-align: center;
    font-size: 1.7rem;
    text-transform: uppercase;
    line-height: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
}

.proyects .proyects-about h2 span {
    font-weight: 600;
    font-size: 2rem;
}

.proyects .proyects-img {
    grid-area: 17 / 20 / 34 / 30;
}

.proyects .proyects-img img {
    width: 100%;
    height: 100%;
}

.proyects .proyects-button {
    grid-area: 24 / 12 / 28 / 18;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.proyects .proyects-button button {
    border: none;
    background: none;
}

.proyects .proyects-button button a {
    cursor: pointer;
    font-size: 1.2rem;
    color: #195CF2;
    text-decoration: none;
}

.proyects .proyects-button img {
    width: 45px;
    height: 40px;
}


.service-intro {
    display: grid;
    grid-template: repeat(39, 1fr) / repeat(30, 1fr);
}

.service-intro header {
    grid-area: 2 / 1 / 7 / 30;
    padding: 10px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
}

.service-intro header a.logo {
    width: 40%;
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.service-intro header a.logo h2 {
    font-size: 2.3rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.service-intro header nav {
    width: 50%;
}

.service-intro header nav  ul  {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.service-intro header nav ul li  {
    list-style: none;
}

.service-intro header nav ul li a {
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.service-intro .email-container {
    grid-area: 7 / 24 /  11 / 29 ;
}

.service-intro .email-container h6 {
    font-size: 0.88rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
}

.service-intro .service-intro-img {
    grid-area: 9 / 1 / 34 / 22;
    padding: 10px;
    margin: 20px;
}

.service-intro .service-intro-img img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 0.6px solid #000;
}

.ux {
    display: grid;
    grid-template: repeat(38, 1fr) / repeat(30, 1fr);
}

.ux header {
    grid-area: 2 / 1 / 7 / 30;
    padding: 10px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
}

.ux header a.logo {
    width: 40%;
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ux header  a.logo h2 {
    font-size: 2.3rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.ux header nav {
    width: 50%;
}

.ux header nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.ux header nav ul li  {
    list-style: none;
}

.ux header nav ul li a  {
    text-decoration: none;
    cursor: pointer;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.ux .email-container {
    grid-area: 7 / 24 /  11 / 29 ;
}


.ux .email-container h6 {
    font-size: 0.88rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
}



.ux .ux-big {
    grid-area: 10 / 1 / 17 / 12;
    padding: 20px;
    margin: 10px;
}

.ux .ux-big h3 {
    font-size: 2.1rem;
    line-height: 4rem;
    font-weight: 400;
}



.ux .ux-button {
    grid-area: 19 / 1  / 23 / 6;
    padding: 20px;
    margin: 10px;
}

.ux .ux-button button {
    padding: 15px 18px;
    background-color: #262626;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;

}

.ux .ux-par {
    grid-area: 24 / 1 / 38 / 13;
    padding: 20px;
    margin: 10px;
}

.ux .ux-par p {
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    font-weight: 300;

}

.ux .ux-img {
    grid-area: 10 / 17 / 37 / 30;
}

.ux .ux-img img {
    width: 100%;
    height: 100%;
}


.web-develop {
    display: grid;
    grid-template: repeat(53, 1fr) / repeat(30, 1fr);
}

.web-develop header {
    grid-area: 2 / 1 / 7 / 30;
    padding: 10px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
}

.web-develop header a.logo {
    width: 40%;
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.web-develop header a.logo h2 {
    font-size: 2.3rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.web-develop header nav {
    width: 50%;
}

.web-develop header nav ul  {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.web-develop header nav ul li {
    list-style: none;
}

.web-develop header nav ul li a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.web-develop .email-container {
    grid-area: 7 / 24 /  11 / 29 ;
}

.web-develop .email-container h6 {
    font-size: 0.88rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
}

.web-develop .web-big {
    grid-area: 11 / 4 / 19 / 12;
}

.web-develop .web-big h3 {
    font-size: 2.1rem;
    line-height: 4rem;
    font-weight: 400;
}

.web-develop .web-button {
    grid-area: 12 / 16 / 15 / 19;
}

.web-develop .web-button button {
    padding: 15px 18px;
    background-color: #262626;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;
}

.web-develop .web-par {
    grid-area: 17 / 16 / 25 / 28;
}

.web-develop .web-par p {
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    font-weight: 300;
}

.web-develop .web-video {
    grid-area: 24 / 1 / 54 / 19;
}

.web-develop .web-video video {
    width: 100%;
    height: 100%;
}

.web-develop .web-img-one {
    grid-area: 31 / 18 / 38 / 24;
}

.web-develop .web-img-one img {
    width: 85%;
    height: 90%;
}

.web-develop .web-img-two {
    grid-area: 31 / 24 / 38 / 30;
}

.web-develop .web-img-two img {
    width: 85%;
    height: 90%;
}

.web-develop .web-img-three {
    grid-area: 39 / 18 / 46 / 24;
}

.web-develop .web-img-three img {
    width: 85%;
    height: 90%;
}

.web-develop .web-img-four {
    grid-area: 39 / 24 / 46 / 30;
}

.web-develop .web-img-four img {
    width: 85%;
    height: 90%;
}

.work-tog {
    display: grid;
    grid-template: repeat(50, 1fr) / repeat(18, 1fr);
    height: 50vh;
}

.work-tog-big-text {
    grid-area: 18 / 1 / 28 / 19;
    display: flex;
    align-items: center;
}

.rectangle-back {
    grid-area: 2 / 1 / 51 / 20;
    background-color: #F288CD;
    width: 100%;
    height: 100%;
    border-top-right-radius: 123px;
    border-top-left-radius: 123px;
}

.rectangle-back-two {
    grid-area: 42 / 1 / 51 / 20;
    background-color: #262626;
    width: 100%;
    height: 110%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

.work-tog-big-text h1 {
    font-size: 6rem;
    letter-spacing: 4px;
    position: relative;
    left: 3%;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.work-tog-line-one {
    grid-area: 12 / 1 / 12 / 19;
    width: 95%;
    position: relative;
    left: 2%;
    height: 6px;
    z-index: 1;
    background-color: #fff;
}

.work-tog-line-two {
    grid-area: 34 / 1 / 34 / 19;
    width: 95%;
    height: 6px;
    position: relative;
    left: 2%;
    z-index: 1;
    background-color: #fff;
}

.work-intro {
    display: grid;
    grid-template: repeat(15, 1fr) / repeat(30, 1fr);
    height: 60vh;
    background-color: #262626;
    overflow: hidden;
}

.work-intro .work-intro-container {
    grid-area: 2 / 1 / 14 / 30;
    padding: 20px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
}

.work-intro .work-intro-container h3 {
    width: 40%;
    font-size: 2.58rem;
    letter-spacing: 0.1rem;
    text-align: center;
    line-height: 4rem;
    font-weight: 400;
    color: #fff;
}

.work-intro .work-intro-container .container-par {
    width: 45%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 2%;
}

.work-intro .work-intro-container .container-par p {
    font-size: 1rem;
    letter-spacing: 0.2rem;
    font-weight: 300;
    color: #fff;
    text-align: center;
}

.work-intro .work-intro-container .container-par p.two {
    position: relative;
    top: 10%;
}

.sliders .container {
    width: 100%;
    height: 610px;
    position: relative;
    overflow: hidden;
    background-color: #262626;
}

.sliders .sliders-rectangle {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #262626;

}

.sliders .container .cards {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(8, 500px);
    grid-template-rows: repeat(1, 550px);
    background-color: #262626;
    grid-gap: 20px;
    overflow: hidden;
    touch-action: none;
}

.sliders .container .cards .card {
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 10px 10px;
    background-color: #fff;
    border-radius: 30px;
    border: 1px solid #000;
    overflow: hidden;
}

.sliders .container .cards .card .card-content {
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 10px;
    margin: 10px;
    width: 95%;
}

.sliders .container .cards .card .card-content h1 {
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    position: relative;
    left: 2%;
}

.sliders .container .cards .card .card-content .card-content-buttons ul {
    display: flex;
    justify-content: space-around;
    width: 70%;
}

.sliders .container .cards .card .card-content .card-content-buttons ul li {
    list-style: none;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 8px 15px;
    background: none;
    border-radius: 12px;
    border: 1px solid #000;
}



.sliders .container .cards .card .card-container-img-one {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    margin: 10px;
    border-radius: 30px;
    background-color: #3495C9;
}
.sliders .container .cards .card .card-container-img-two {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    margin: 10px;
    border-radius: 30px;
    background-color: #DE6464;
}

.sliders .container .cards .card .card-container-img-three {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    border-radius: 30px;
    margin: 10px;
    background-color: #49C432;
}

.sliders .container .cards .card .card-container-img-four {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    border-radius: 30px;
    margin: 10px;
    background-color: #692666;
}

.sliders .container .cards .card .card-container-img-five {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    border-radius: 30px;
    margin: 10px;
    background-color: #3495C9;
}

.sliders .container .cards .card .card-container-img-six {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    border-radius: 30px;
    margin: 10px;
    background-color: #DE6464;
}

.sliders .container .cards .card .card-container-img-seven {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    border-radius: 30px;
    margin: 10px;
    background-color: #49C432;
}


.sliders .container .cards .card .card-container-img-eight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 95%;
    border-radius: 30px;
    margin: 10px;
    background-color: #692666;
}


.sliders .container .cards .card img.mobile-one {
    width: 25%;
    height: 90%;
    position: relative;
    right: 5%;
}

.sliders .container .cards .card img.mobile-two {
    width: 25%;
    height: 90%;
}

.sliders .container .cards .card img.pokemon {
    width: 75%;
    height: 75%;
}


.sliders .container .cards .card img {
    width: 75%;
    height: 70%;
    border-radius: 10px;
}

.animation {
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(18, 1fr);
    height: 40vh;
    background-color: #262626;
}


.animation .rectangle {
    grid-area: 2 / 8 / 4 / 13;
    display: flex;
    position: relative;
    top: 20%;
    left: 20%;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 45%;
    border-radius: 40px;
    border: 1px solid #fff;
}

.animation .rectangle .circle {
    width: 20%;
    height: 75%;
    background-color: #F2F2F2;
    border-radius: 50%;
    animation: drag 3s ease-in infinite;
}


@keyframes drag {
    from{
        transform: translateX(-20%);
    }
    to{
        transform: translateX(70%);
    }
}


.animation .rectangle .circle h6 {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 400;
}




.digital-mark {
    display: grid;
    grid-template: repeat(48, 1fr) / repeat(30, 1fr);
}

.digital-mark header {
    grid-area: 2 / 1 / 7 / 30;
    padding: 10px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
}

.digital-mark header a.logo {
    width: 40%;
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.digital-mark header a.logo h2 {
    font-size: 2.3rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.digital-mark header nav {
    width: 50%;
}

.digital-mark header nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.digital-mark header nav ul li  {
    list-style: none;
}

.digital-mark header nav ul li a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-weight: 500;
}


.digital-mark .email-container {
    grid-area: 7 / 24 /  11 / 29 ;
}

.digital-mark .email-container h6 {
    font-size: 0.88rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
}

.digital-mark  .digital-button {
    grid-area: 10 / 1 / 14 / 6;
    padding: 20px;
    margin: 10px;
}

.digital-mark .digital-button button {
    padding: 15px 18px;
    background-color: #262626;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;
}

.digital-mark .digital-big {
    grid-area: 14 / 1 / 24 / 12;
    padding: 20px;
    margin: 10px;
}

.digital-mark .digital-big h3 {
    font-size: 2.1rem;
    line-height: 4rem;
    font-weight: 400;
}


.digital-mark .digital-par {
    grid-area: 23 / 1 / 43 / 15;
    padding: 20px;
    margin: 10px;
}

.digital-mark .digital-par p {
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    font-weight: 300;
}

.digital-mark .digital-par p.two {
    position: relative;
    top: 10%;
}

.digital-mark .digital-container-img {
    grid-area: 12 / 16 / 45 / 30;
}

.digital-mark .digital-container-img img {
    width:100%;
    height: 100%;
    animation: move 6s ease-in-out infinite;
}


@keyframes move {
    from{
        opacity: 100%;
    }
    to{
        opacity: 0%;
    }
}

.big-text {
    display: grid;
    grid-template: repeat(55, 1fr) / repeat(33, 1fr);
    height: 120vh;
}

.big-text .big-text-one {
    grid-area: 2 / 1 / 18 / 34;
    padding: 20px;
    margin: 10px;
}

.big-text .big-text-one h1 {
    font-size: 2.8rem;
    text-transform: uppercase;
    text-align: center;
    line-height: 5rem;
    font-weight: 400;
}

.big-text .big-text-one h1 span {
    font-size: 3.5rem;
    font-weight: 600;
}

.big-text .big-text-two {
    grid-area: 24 / 1 / 49 / 34;
    padding: 20px;
    margin: 10px;
}

.big-text .big-text-two h1 {
    font-size: 2.8rem;
    text-transform: uppercase;
    text-align: center;
    line-height: 5rem;
    font-weight: 400;
}

.big-text .big-text-two h1 span {
    font-size: 3.5rem;
    font-weight: 600;
}


.footer {
    display: grid;
    grid-template: repeat(24, 1fr) / repeat(30, 1fr);
    height:70vh;
}

.footer .footer-container {
    grid-area: 3 / 2 / 24 / 16;
    padding: 20px;
    height: 60vh;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    bottom: 5%;
}

.footer .footer-container h1.logo {
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 500;
}

.footer .footer-container .footer-sub-container {
    display: flex;
    height: 60%;
    flex-direction: column;
    justify-content: space-evenly;
}

.footer .footer-container .footer-sub-container h5.agency {
    font-size: 0.88rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
}

.footer .footer-container .footer-sub-container h3.value {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.2rem;
}



.footer .footer-container .footer-sub-container .contact {
    display: flex;
    justify-content: space-between;
}

.footer .footer-container .footer-sub-container .contact h5 {
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
}


.footer .footer-container .footer-sub-container .location {
    display: flex;
    justify-content: space-between;   
}

.footer .footer-container .footer-sub-container .location h5 {
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
}




.footer .footer-button {
    grid-area: 3 / 20 / 17 / 27;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.footer .footer-button button {
    border: none;
    background: none;
}

.footer .footer-button button a {
    font-size: 1.2rem;
    cursor: pointer;
    color: #195CF2;
    text-decoration: none;
}

.footer .footer-button img {
    width: 35px;
    height: 30px;
}

.final {
    display: grid;
    grid-template: repeat(50, 1fr) / repeat(30, 1fr);
}

.final img.back {
    grid-area: 1 / 2 / 50 / 30;
    width: 100%;
    height: 100%;
    z-index: 0;
}


.final img.front {
    grid-area: 5 / 4 / 45 / 28;
    width: 100%;
    height: 120vh;
    z-index: 1;
}

@media only screen and (max-width: 1500px) {
    .work-tog-big-text h1 {
        font-size: 6rem;
        letter-spacing: 4px;
        position: relative;
        left: 1%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }

}

@media only screen and (max-width: 1424px) {
    .big-text .big-text-one h1 {
        font-size: 2.6rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 5rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 3.3rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 2.6rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 5rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 3.1rem;
        font-weight: 600;
    }
    .work-tog-big-text h1 {
        font-size: 5.8rem;
        letter-spacing: 4px;
        position: relative;
        left: 1%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 1363px) {
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 24;
        margin: 20px;
        padding: 10px;
    }
    .work-tog-big-text h1 {
        font-size: 5.6rem;
        letter-spacing: 3.7px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}


@media only screen and (max-width: 1358px) {
    .work-intro .work-intro-container h3 {
        width: 45%;
        font-size: 2.5rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }

}

@media only screen and (max-width: 1354px) {
    .big-text {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(33, 1fr);
        height: 140vh;
    }
}

@media only screen and (max-width: 1331px) {
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.5rem;
        text-transform: uppercase;
        line-height: 2.8rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .work-tog-big-text h1 {
        font-size: 5.4rem;
        letter-spacing: 3.7px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 1322px) {
    .footer .footer-container {
        grid-area: 3 / 2 / 24 / 17;
        padding: 20px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
} 


@media only screen and (max-width: 1303px) {
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 25;
        margin: 20px;
        padding: 10px;
    }
    .work-tog-big-text h1 {
        font-size: 5.2rem;
        letter-spacing: 3.5px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 1270px) {
    .work-tog-big-text h1 {
        font-size: 5.1rem;
        letter-spacing: 3.4px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 1266px) {
    .web-develop .web-big {
        grid-area: 11 / 3 / 19 / 12;
    }
    .animation .rectangle .circle {
        width: 22%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
}

@media only screen and (max-width: 1248px) {
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 26;
        margin: 20px;
        padding: 10px;
    }
}

@media only screen and (max-width: 1236px) {
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.3rem;
        text-transform: uppercase;
        line-height: 2.6rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
}


@media only screen and (max-width: 1227px) {
    .footer .footer-container .footer-sub-container h3.value {
        font-size: 1.3rem;
        font-weight: 400;
        letter-spacing: 0.2rem;
    }
    .work-tog-big-text h1 {
        font-size: 5rem;
        letter-spacing: 3.2px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}


@media only screen and (max-width: 1208px) {
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 28;
        margin: 20px;
        padding: 10px;
    }
    .vision header a.logo h2 {
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .rectangle-back {
        grid-area: 2 / 1 / 51 / 20;
        background-color: #F288CD;
        width: 100%;
        height: 100%;
        border-top-right-radius: 110px;
        border-top-left-radius: 110px;
    }
    .work-tog-big-text h1 {
        font-size: 4.8rem;
        letter-spacing: 3px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}


@media only screen and (max-width: 1190px) { 
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 110vh;
    }
    .gallery .gallery-one {
        display: none;
    }
    .gallery img.two-one {
        grid-area: 1 / 19 / 21 / 37;
        width: 100%;
        height: 100%;
    }

    .gallery img.two-two {
        grid-area: 1 / 37 / 21 / 54;
        width: 100%;
        height: 100%;
    }
    
    .gallery img.two-three {
        grid-area: 21 / 19 / 41 / 37;
    }
    .gallery img.three-one {
        grid-area: 21 / 37 / 41 / 54;
    }
    .gallery img.three-two {
        grid-area: 1 / 1 / 21 / 19;
    }
    .gallery img.three-three {
        grid-area: 21 / 1 / 41 / 19;
    }
    .web-develop {
        display: grid;
        grid-template: repeat(90, 1fr) / repeat(30, 1fr);
    }
    .web-develop .web-video {
        grid-area: 24 / 3 / 54 / 29;
    }
    .web-develop .web-img-one {
        grid-area: 55 / 3 / 69 / 15;
    }
    .web-develop .web-img-one img {
        width: 100%;
        height: 100%;
    }
    .web-develop .web-img-two {
        grid-area: 55 / 17 / 69 / 29;
    }
    .web-develop .web-img-two img {
        width: 100%;
        height: 100%;
    }
    .web-develop .web-img-three {
        grid-area: 72 / 3 / 86 / 15;
    }
    .web-develop .web-img-three img {
        width: 100%;
        height: 100%;
    }
    .web-develop .web-img-four {
        grid-area: 72 / 17 / 86 / 29;
    }
    .web-develop .web-img-four img {
        width: 100%;
        height: 100%;
    }
}


@media only screen and (max-width: 1180px) {
    .about-nav header nav {
        width: 60%;
    }
    .about-nav header nav ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .about-nav header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.87rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .vision header nav {
        width: 55%;
    }
    .vision header nav ul  {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .vision header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.87rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .about-nav .email-container h6 {
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .vision .email-container {
        grid-area: 36 / 22 / 38 / 27;
    }
    .vision .email-container h6 {
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }

    .service-intro header nav {
        width: 60%;
    }

    .service-intro header nav ul  {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .service-intro header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.87rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .service-intro .email-container {
        grid-area: 7 / 23 / 11 / 28;
    }
    .service-intro .email-container h6 {
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }

    .ux header nav {
        width: 60%;
    }

    .ux header nav  ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .ux header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.87rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .ux .email-container {
        grid-area: 7 / 23 / 11 / 28;
    }
    .ux .email-container h6 {
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }

    .web-develop header nav {
        width: 60%;
    }

    .web-develop header nav  ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .web-develop header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.87rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .web-develop .email-container {
        grid-area: 7 / 23 / 11 / 28;
    }
    .web-develop .email-container h6 {
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }

    .digital-mark header nav {
        width: 55%;
    }

    .digital-mark header nav ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .digital-mark header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.87rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .digital-mark .email-container {
        grid-area: 7 / 23 / 11 / 28;
    }
    .digital-mark .email-container h6 {
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }


    .hero .hero-container-text h1 {
        font-size: 2.5rem;
        text-transform: uppercase;
        line-height: 5rem;
        font-weight: 400;
        text-align: center;
    }
    .work-intro .work-intro-container h3 {
        width: 45%;
        font-size: 2.3rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p.two {
        position: relative;
        top: 20%;
    }
    .rectangle-back {
        grid-area: 2 / 1 / 51 / 20;
        background-color: #F288CD;
        width: 100%;
        height: 100%;
        border-top-right-radius: 100px;
        border-top-left-radius: 100px;
    }
}




@media only screen and (max-width: 1153px) {
    .hero .hero-container-text {
        grid-area: 3 / 2 / 6 / 18;
        position: relative;
        bottom: 8%;
    }
    .hero .hero-container-text h1 {
        font-size: 2.5rem;
        text-transform: uppercase;
        line-height: 4.5rem;
        font-weight: 400;
        text-align: center;
    }

    .proyects .proyects-button {
        grid-area: 24 / 11 / 28 / 18;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .work-tog-big-text h1 {
        font-size: 4.6rem;
        letter-spacing: 2px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .rectangle-back {
        grid-area: 2 / 1 / 51 / 20;
        background-color: #F288CD;
        width: 100%;
        height: 100%;
        border-top-right-radius: 80px;
        border-top-left-radius: 80px;
    }
    .rectangle-back-two {
        grid-area: 42 / 1 / 51 / 20;
        background-color: #262626;
        width: 100%;
        height: 110%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
    .big-text .big-text-one h1 {
        font-size: 2.4rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4.3rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 2.9rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 2.4rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4.3rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 3.1rem;
        font-weight: 600;
    }
    .service-intro header a.logo h2 {
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux header a.logo h2 {
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .web-develop header a.logo h2 {
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .digital-mark header a.logo h2 {
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

}

@media only screen and (max-width: 1131px) {
    .ux .ux-big h3 {
        font-size: 1.9rem;
        line-height: 3.6rem;
        font-weight: 400;
    }
    .web-develop .web-big h3 {
        font-size: 1.9rem;
        line-height: 3.6rem;
        font-weight: 400;
    }
    .work-tog-big-text {
        grid-area: 18 / 1 / 28 / 19;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .work-tog-big-text h1 {
        font-size: 4.4rem;
        letter-spacing: 2px;
        position: relative;
        left: 5%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .rectangle-back {
        grid-area: 2 / 1 / 51 / 20;
        background-color: #F288CD;
        width: 100%;
        height: 100%;
        border-top-right-radius: 60px;
        border-top-left-radius: 60px;
    }
}

@media only screen and (max-width: 1117px) {
    .vision .vision-title h3 {
        font-size: 2.6rem;
        letter-spacing: 0.2rem;
        font-weight: 500;
    }
    .vision header a.logo h2 {
        font-size: 1.9rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .footer .footer-container .footer-sub-container h3.value {
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0.2rem;
    }
}

@media only screen and (max-width: 1100px) {
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 100vh;
    }
    .about-nav .about-aina h3 {
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
        text-align: center;
    }
    .hero .hero-container-text h1 {
        font-size: 2.2rem;
        text-transform: uppercase;
        line-height: 4.2rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav .mision-aina p {
        width: 50%;
        font-weight: 300;
        line-height: 1.5rem;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.92rem;
        font-weight: 300;
    }
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.3rem;
        text-transform: uppercase;
        line-height: 2.4rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.8rem;
    }
    .ux .ux-par p {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
    }
    .web-develop .web-par p {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
    }
    .work-intro .work-intro-container h3 {
        width: 45%;
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .digital-mark .digital-par p {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
    }
    .service-intro .service-intro-img {
        grid-area: 9 / 1 / 34 / 24;
        padding: 10px;
        margin: 20px;
    }
}

@media only screen and (max-width: 1080px) {
    .work-tog-big-text h1 {
        font-size: 4.2rem;
        letter-spacing: 2px;
        position: relative;
        left: 5%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .animation .rectangle .circle {
        width: 24%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(42, 1fr) / repeat(30, 1fr);
    }
    .digital-mark .digital-container-img {
        grid-area: 12 / 16 / 40 / 30;
    }
}

@media only screen and (max-width: 1051px) {
    .about-nav .container-img-big-one {
        grid-area: 8 / 2 / 30 / 23;
    }
    .about-nav .container-img-small-one {
        grid-area: 12 / 24 / 18 / 30;
    }
    .about-nav .container-img-small-two {
        grid-area: 20 / 24 / 27 / 31;
    }
    .about-nav .container-img-small-two img {
        width: 90%;
        height: 75%;
    }
    .vision .vision-title h3 {
        font-size: 2.4rem;
        letter-spacing: 0.2rem;
        font-weight: 500;
    }

    .work-tog-big-text h1 {
        font-size: 4.2rem;
        letter-spacing: 2px;
        position: relative;
        left: 4%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .about-nav .mision-aina p {
        width: 50%;
        font-weight: 300;
        line-height: 1.5rem;
        font-size: 0.9rem;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.9rem;
        font-weight: 300;
    }
    .ux .ux-par p {
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
    }
    .web-develop .web-par p {
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .digital-mark .digital-par p {
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        text-align: justify;
    }
    .big-text .big-text-one h1 {
        font-size: 2.2rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4.1rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 2.7rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 2.2rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4.1rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 2.7rem;
        font-weight: 600;
    }

    .footer .footer-container .footer-sub-container h3.value {
        font-size: 1.1rem;
        font-weight: 400;
        letter-spacing: 0.2rem;
    }
}


@media only screen and (max-width: 1030px) {
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 95vh;
    }
    .vision header a.logo h2 {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .service-intro header a.logo h2 {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux header a.logo h2 {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .web-develop header a.logo h2 {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .digital-mark header a.logo h2 {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .about-nav header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .vision header nav ul li a {
        text-decoration: none;
        padding: 10px;
        color: #000;
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .service-intro header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .ux header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .web-develop header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .digital-mark header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.8rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .ux .ux-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .web-develop .web-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .work-tog-big-text h1 {
        font-size: 4.1rem;
        letter-spacing: 2px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .rectangle-back {
        grid-area: 2 / 1 / 51 / 20;
        background-color: #F288CD;
        width: 100%;
        height: 100%;
        border-top-right-radius: 40px;
        border-top-left-radius: 40px;
    }

}

@media only screen and (max-width: 1020px) {
    .hero .hero-container-text h1 {
        font-size: 2rem;
        text-transform: uppercase;
        line-height: 4rem;
        font-weight: 400;
        text-align: center;
    }
    .work-intro .work-intro-container h3 {
        width: 45%;
        font-size: 1.9rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
} 

@media only screen and (max-width: 1000px) {
    .hero .back {
        grid-area: 1 / 1 / 7 / 19;
        background: url(./img/Rectángulo\ 117.png);
        background-position: center;
        background-repeat: no-repeat;
        height: 62vh;
        overflow: hidden;
        position: relative;
        bottom: 10%;
        opacity: 0.7;
    }
    .about-nav header {
        grid-area: 2 / 3 / 5 / 30;
        display: flex;
        justify-content: space-between;
    }
    .about-nav .email-container {
        grid-area: 5 / 23 / 7 / 29;
        width: 100%;
    }
    .about-nav .container-img-big-one {
        grid-area: 7 / 2 / 30 / 30;
    }
    .about-nav .container-img-small-one {
        grid-area: 12 / 4 / 18 / 12;
    }
    .about-nav .container-img-small-two {
        grid-area: 20 / 8 / 27 / 16;
    }
    .about-nav .about-aina {
        grid-area: 31 / 3 / 36 / 29;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .about-nav .about-aina h3 {
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav .mision-aina {
        grid-area: 38 / 3 / 44 / 29;
        display: flex;
        justify-content: space-between;
    }
    .about-nav .mision-aina p {
        width: 50%;
        font-weight: 300;
        line-height: 1.5rem;
        font-size: 1rem;
        text-align: justify;
    }
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 30;
        margin: 20px;
        padding: 10px;
        z-index: 1;
    }
    .vision {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(30, 1fr);
    }
    .vision .vision-back {
        grid-area: 1 / 1 / 46 / 31;
        overflow: hidden;
    }
    .vision .vision-back img {
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }
    .vision header {
        grid-area: 27 / 1 / 40/ 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1;
    }
    .vision header a.logo {
        width: 60%;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .vision header nav {
        width: 100%;
        height: 40%;
    }
    .vision .email-container {
        grid-area: 41 / 22 / 43 / 27;
        z-index: 1;
    }

    .vision .vision-about {
        grid-area: 11 / 1 / 25 / 29;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
        z-index: 1;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.9rem;
        font-weight: 300;
        text-align: justify;
    }
    .proyects {
        display: grid;
        grid-template: repeat(51, 1fr) / repeat(30, 1fr);
    }
    .proyects .proyects-about {
        grid-area: 5 / 3 / 23 / 28;
        padding: 10px;
        margin: 30px;
    }
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.3rem;
        text-transform: uppercase;
        line-height: 2.7rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }

    .proyects .proyects-button {
        grid-area: 30 / 3 / 35 / 11;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .proyects .proyects-img {
        grid-area: 28 / 16 / 46 / 28;
    }
    .service-intro .service-intro-img {
        grid-area: 11 / 4 / 36 / 28;
        padding: 10px;
        margin: 20px;
    }
    .ux .ux-big {
        grid-area: 10 / 1 / 17 / 14;
        padding: 20px;
        margin: 10px;
    }
    .ux .ux-par {
        grid-area: 24 / 1 / 38 / 14;
        padding: 20px;
        margin: 10px;
    }
    .web-develop .web-big {
        grid-area: 11 / 4 / 19 / 16;
    }
    .web-develop .web-par {
        grid-area: 21 / 4 / 27 / 28;
    }
    .web-develop .web-par p {
        font-size: 1rem;
        letter-spacing: 0.2rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop .web-button {
        grid-area: 12 / 23 / 15 / 29;
    }
    .digital-mark .digital-button {
        grid-area: 10 / 3 / 14 / 9;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-big {
        grid-area: 16 / 3 / 27 / 15;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-container-img {
        grid-area: 9 / 16 / 30 / 30;
    }
    .digital-mark .digital-par {
        grid-area: 30 / 3 / 43 / 28;
        padding: 20px;
        margin: 10px;
    }
    .work-intro {
        display: grid;
        grid-template: repeat(22, 1fr) / repeat(30, 1fr);
        height: 65vh;
        background-color: #262626;
        overflow: hidden;
    }
    .work-intro .work-intro-container {
        grid-area: 2 / 2 / 17 / 29;
        padding: 20px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.9rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par {
        width: 93%;
        height: 50%;
        display: flex;
        flex-direction: column;
        position: relative;
        top: 2%;
        left: 5%;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 1.1rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .work-intro .work-intro-container .container-par p.two {
        position: relative;
        top: 40%;
    }

    .animation .rectangle .circle {
        width: 26%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
    .big-text {
        background-color: #262626;
    }
    .big-text .big-text-one h1 {
        color: #fff;
    }
    .big-text .big-text-two h1 {
        color: #fff;
    }
    
    


    .footer {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }
    .footer .footer-container {
        grid-area: 3 / 8 / 24 / 24;
        padding: 20px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
    .footer .footer-container h1.logo {
        font-size: 5rem;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
    }
    .footer .footer-container .footer-sub-container h5.agency {
        font-size: 0.88rem;
        font-weight: 300;
        letter-spacing: 0.1rem;
        text-align: center;
    }
    .footer .footer-button {
        grid-area: 25 / 12 / 30 / 20;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}

@media only screen and (max-width: 980px) {
    .about-nav .email-container h6 {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .vision .email-container h6 {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .service-intro .email-container h6 {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .ux .email-container h6 {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .web-develop .email-container h6 {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .digital-mark .email-container h6 {
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        font-weight: 400;
    }
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 90vh;
    }
    .about-nav header nav {
        width: 65%;
    }
    .service-intro header nav {
        width: 65%;
    }
    .ux header nav {
        width: 65%;
    }
    .web-develop header nav {
        width: 65%;
    }
    .digital-mark header nav {
        width: 60%;
    }
    .service-intro header a.logo h2 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux header a.logo h2 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .web-develop header a.logo h2 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .digital-mark header a.logo h2 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .work-tog-big-text h1 {
        font-size: 3.9rem;
        letter-spacing: 1.8px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .animation .rectangle .circle {
        width: 28%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }

}

@media only screen and (max-width: 955px) {
    .service-intro .service-intro-img {
        grid-area: 11 / 3 / 36 / 29;
        padding: 10px;
        margin: 20px;
    }
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 88vh;
    }
    .work-tog-big-text h1 {
        font-size: 3.8rem;
        letter-spacing: 1.8px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 933px) {
    .about-nav .email-container h6 {
        font-size: 0.71rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .vision .email-container h6 {
        font-size: 0.71rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .service-intro .email-container h6 {
        font-size: 0.71rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .ux .email-container h6 {
        font-size: 0.71rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .web-develop .email-container h6 {
        font-size: 0.71rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .digital-mark .email-container h6 {
        font-size: 0.71rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
}

@media only screen and (max-width: 931px) {
    .rectangle-back {
        grid-area: 2 / 1 / 51 / 20;
        background-color: #F288CD;
        width: 100%;
        height: 100%;
        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
    }
    .rectangle-back-two {
        grid-area: 42 / 1 / 51 / 20;
        background-color: #262626;
        width: 100%;
        height: 110%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .footer .footer-container {
        grid-area: 3 / 7 / 24 / 25;
        padding: 20px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
    .footer .footer-button {
        grid-area: 25 / 10 / 30 / 22;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}

@media only screen and (max-width: 922px) {
    .proyects .proyects-about {
        grid-area: 5 / 2 / 23 / 29;
        padding: 10px;
        margin: 30px;
    }
    .web-develop .web-img-one {
        grid-area: 55 / 2 / 69 / 15;
    }
    .web-develop .web-img-two {
        grid-area: 55 / 17 / 69 / 30;
    }
    .web-develop .web-img-three {
        grid-area: 72 / 2 / 86 / 15;
    }
    .web-develop .web-img-four {
        grid-area: 72 / 17 / 86 / 30;
    }
}


@media only screen and (max-width: 912px) {
    .vision .vision-title h3 {
        font-size: 2.2rem;
        letter-spacing: 0.2rem;
        font-weight: 500;
    }
    .work-intro {
        display: grid;
        grid-template: repeat(26, 1fr) / repeat(30, 1fr);
        height: 65vh;
        background-color: #262626;
        overflow: hidden;
    }
    .animation .rectangle {
        grid-area: 2 / 7 / 4 / 14;
        display: flex;
        position: relative;
        top: 20%;
        left: 20%;
        justify-content: center;
        align-items: center;
        width: 60%;
        height: 55%;
        border-radius: 40px;
        border: 1px solid #fff;
    }
    .animation .rectangle .circle {
        width: 27%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
}

@media only screen and (max-width: 900px) {
    .about-nav {
        display: grid;
        grid-template: repeat(60, 1fr) / repeat(30, 1fr);
        background-color: #EAE8E8;
    }
    .about-nav .container-img-big-one {
        grid-area: 15 / 2 / 39 / 30;
    }
    .about-nav .about-aina {
        grid-area: 41 / 3 / 46 / 29;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .about-nav .mision-aina {
        grid-area: 50 / 3 / 56 / 29;
        display: flex;
        justify-content: space-between;
    }
    .about-nav .container-img-small-one {
        grid-area: 17 / 4 / 23 / 12;
    }
    .about-nav .container-img-small-two {
        grid-area: 26 / 8 / 33 / 16;
    }
    .about-nav .email-container {
        grid-area: 13 / 23 / 15 / 29;
        width: 100%;
    }
    .about-nav header {
        grid-area: 2 / 2 / 11 / 30;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .about-nav header nav {
        width: 100%;
        height: 30%;
    }
    .about-nav header a.logo {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content:center;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
    }
    .service-intro .service-intro-img {
        grid-area: 17 / 3 / 50 / 29;
        padding: 10px;
        margin: 20px;
    }
    .service-intro .email-container {
        grid-area: 13 / 23 / 15 / 29;
        width: 100%;
    }
    .service-intro header {
        grid-area: 2 / 2 / 14 / 30;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .service-intro header a.logo h2 {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .service-intro header nav {
        width: 100%;
        height: 30%;
    }
    .service-intro header a.logo {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content:flex-start;
    }
    .proyects {
        display: grid;
        grid-template: repeat(65, 1fr) / repeat(30, 1fr);
    }
    .proyects .proyects-img {
        grid-area: 39 / 3 / 65 / 29;
    }
    .proyects .proyects-about {
        grid-area: 5 / 2 / 28 / 29;
        padding: 10px;
        margin: 10px;
    }
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.8rem;
        text-transform: uppercase;
        line-height: 2.8rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 2.2rem;
    }
    .proyects .proyects-button {
        grid-area: 30 / 11 / 35 / 21;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .ux {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
    }
    .ux .ux-img {
        grid-area: 13 / 17 / 40 / 30;
    }
    .ux .ux-big {
        grid-area: 13 / 1 / 20 / 14;
        padding: 20px;
        margin: 10px;
    }
    .ux .email-container {
        grid-area: 13 / 23 / 17 / 28;
        z-index: 1;
    }
    .ux header {
        grid-area: 2 / 2 / 12 / 30;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1;
    }
    .ux header a.logo h2  {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux header nav{
        width: 100%;
        height: 30%;
    }

    .ux header a.logo {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content:flex-start;
    }
    .ux .ux-big {
        grid-area: 18 / 2 / 32 / 16;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-big h3 {
        font-size: 1.9rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .ux .ux-button {
        grid-area: 20 / 22 / 28 / 29;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-img {
        grid-area: 1 / 1 / 56 / 31;
    }
    .ux .ux-img img {
        opacity: 0.3;
        width: 100%;
        height: 100%;
    }
    .ux .ux-par {
        grid-area: 39 / 2 / 54 / 30;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }

    .ux .ux-par p {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
        text-align: justify;
        font-weight: 300;
    }

    .web-develop {
        display: grid;
        grid-template: repeat(105, 1fr) / repeat(30, 1fr);
    }

    .web-develop header {
        grid-area: 2 / 2 / 12 / 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .web-develop  header a.logo h2  {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .web-develop header nav{
        width: 100%;
        height: 30%;
    }

    .web-develop header a.logo {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content:flex-start;
    }
    .web-develop .email-container {
        grid-area: 12 / 23 / 16 / 28;
    }
    .web-develop .web-big {
        grid-area: 18 / 3 / 26 / 15;
    }
    .web-develop .web-button {
        grid-area: 20 / 23 / 23 / 29;
    }
    .web-develop .web-par {
        grid-area: 28 / 3 / 34 / 29;
    }
    .web-develop .web-video {
        grid-area: 34 / 3 / 64 / 29;
    }
    .web-develop .web-img-one {
        grid-area: 66 / 2 / 80 / 15;
    }
    .web-develop .web-img-two {
        grid-area: 66 / 17 / 80 / 30;
    }
    .web-develop .web-img-three {
        grid-area: 85 / 2 / 99 / 15;
    }
    .web-develop .web-img-four {
        grid-area: 85 / 17 / 99 / 30;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(68, 1fr) / repeat(30, 1fr);
    }
    .digital-mark header {
        grid-area: 2 / 2 / 12 / 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .digital-mark header a.logo h2  {
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .digital-mark header nav{
        width: 100%;
        height: 30%;
    }

    .digital-mark header a.logo {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content:flex-start;
    }

    .digital-mark .email-container {
        grid-area: 11 / 23 / 15 / 28;
    }
    .digital-mark .digital-big {
        grid-area: 28 / 3 / 42 / 17;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-button {
        grid-area: 16 / 3 / 26 / 13;
        padding: 20px;
        margin: 10px;
    }

    .digital-mark .digital-par {
        grid-area: 44 / 3 / 58 / 29;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-container-img {
        grid-area: 15 / 18 / 42 / 30;
    }
    .digital-mark .digital-container-img img {
        width: 100%;
        height: 100%;
        animation: none;
    }

    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 80vh;
    }
    .big-text .big-text-one h1 {
        font-size: 2.1rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4.1rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 2.5rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 2.1rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4.1rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 2.5rem;
        font-weight: 600;
    }
    .about-nav .mision-aina p {
        width: 60%;
        font-weight: 300;
        line-height: 1.5rem;
        font-size: 1rem;
        text-align: justify;
    }
    .work-tog-big-text h1 {
        font-size: 3.6rem;
        letter-spacing: 1.8px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 875px) {
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 75vh;
    }
    .hero .hero-container-text {
        grid-area: 2 / 2 / 6 / 18;
        position: relative;
        bottom: -10%;
    }
    .digital-mark .digital-par {
        grid-area: 44 / 3 / 59 / 29;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-button {
        grid-area: 16 / 2 / 26 / 13;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-big {
        grid-area: 28 / 2 / 43 / 17;
        padding: 20px;
        margin: 10px;
    }
}

@media only screen and (max-width: 862px) {
    .work-tog-big-text h1 {
        font-size: 3.5rem;
        letter-spacing: 1.6px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .final img.back {
        grid-area: 1 / 1 / 50 / 31;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
    .final img.front {
        grid-area: 5 / 3 / 45 / 29;
        width: 100%;
        height: 120vh;
        z-index: 1;
    }
}

@media only screen and (max-width: 854px) {
    .vision .vision-title h3 {
        font-size: 2.1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .proyects .proyects-about {
        grid-area: 5 / 2 / 25 / 29;
        padding: 5px;
        margin: 20px;
    }
}


@media only screen and (max-width: 833px) {
    .ux header {
        grid-area: 2 / 2 / 16 / 30;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1;
    }
    .ux header nav {
        width: 100%;
        height: 50%;
    }
    .ux .email-container {
        grid-area: 15 / 23 / 19 / 28;
        z-index: 1;
    }
    .ux .ux-big {
        grid-area: 20 / 2 / 34 / 16;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-button {
        grid-area: 22 / 22 / 30 / 29;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
}

@media only screen and (max-width: 826px) {
    .work-tog-big-text h1 {
        font-size: 3.4rem;
        letter-spacing: 1.5px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container {
        grid-area: 2 / 2 / 20 / 29;
        padding: 20px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .footer .footer-container {
        grid-area: 3 / 6 / 24 / 26;
        padding: 20px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 130vh;
    }
    .service-intro .service-intro-img {
        grid-area: 17 / 2 / 50 / 30;
        padding: 10px;
        margin: 10px;
    }
}


@media only screen and (max-width: 810px) {
    .work-tog-big-text h1 {
        font-size: 3.3rem;
        letter-spacing: 1.4px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 805px) {
    .ux .ux-big h3 {
        font-size: 1.8rem;
        line-height: 3.4rem;
        font-weight: 400;
    }

}

@media only screen and (max-width: 800px) {
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .work-tog-big-text h1 {
        font-size: 3.3rem;
        letter-spacing: 1.4px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.7rem;
        text-transform: uppercase;
        line-height: 2.7rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 2.1rem;
    }
    .big-text .big-text-one h1 {
        font-size: 1.9rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 2.3rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 1.9rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 2.3rem;
        font-weight: 600;
    }
    .animation .rectangle .circle {
        width: 30%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
    .service-intro .email-container {
        grid-area: 13 / 22 / 15 / 28;
        width: 100%;
    }
    .ux .email-container {
        grid-area: 15 / 22 / 19 / 27;
        z-index: 1;
    }
    .web-develop .email-container {
        grid-area: 12 / 22 / 16 / 27;
    }
    .digital-mark .email-container {
        grid-area: 11 / 22 / 15 / 27;
    }
}

@media only screen and (max-width: 775px) {
    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 72vh;
    }
    .work-tog-big-text h1 {
        font-size: 3.2rem;
        letter-spacing: 1.4px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .ux .ux-big {
        grid-area: 18 / 2 / 32 / 17;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 120vh;
    }
    .service-intro .service-intro-img {
        grid-area: 17 / 2 / 48 / 30;
        padding: 10px;
        margin: 10px;
    }
}

@media only screen and (max-width: 764px) {
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.5rem;
        text-transform: uppercase;
        line-height: 2.7rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 2rem;
    }
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 30;
        margin: 10px;
        padding: 10px;
        z-index: 1;
    }
    .vision .vision-title h3 {
        font-size: 1.9rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .big-text .big-text-one h1 {
        font-size: 1.8rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 2.1rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 1.8rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 2.1rem;
        font-weight: 600;
    }
    .final {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(30, 1fr);
    }
    .final img.front {
        grid-area: 5 / 1 / 45 / 31;
        width: 100%;
        height: 120vh;
        z-index: 1;
    }
    .final img.back {
        grid-area: 1 / 1 / 50 / 31;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
}

@media only screen and (max-width: 760px) {
    .work-intro .work-intro-container {
        grid-area: 1 / 1 / 26 / 31;
        padding: 5px;
        margin: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .work-intro .work-intro-container h3 {
        width: 100%;
        height: 30%;
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p.two {
        position: relative;
        top: 12%;
    }
    .work-intro .work-intro-container .container-par {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        top: 10%;
        left: 0%;
    }
    .animation .rectangle .circle {
        width: 32%;
        height: 75%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
}

@media only screen and (max-width: 750px) {
    .work-tog-big-text h1 {
        font-size: 3.1rem;
        letter-spacing: 1.4px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .footer .footer-container {
        grid-area: 3 / 5 / 24 / 27;
        padding: 20px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
} 



@media only screen and (max-width: 728px) {
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.93rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .work-tog-big-text h1 {
        font-size: 3rem;
        letter-spacing: 1.4px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .digital-mark header {
        grid-area: 2 / 2 / 13 / 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .digital-mark .email-container {
        grid-area: 12 / 22 / 16 / 27;
    }
} 

@media only screen and (max-width: 717px) {
    .digital-mark .digital-par {
        grid-area: 44 / 2 / 61 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-container-img {
        grid-area: 15 / 17 / 42 / 30;
    }
}

@media only screen and (max-width: 714px) {
    .ux .ux-big {
        grid-area: 18 / 2 / 32 / 18;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .web-develop .web-par {
        grid-area: 28 / 3 / 36 / 29;
    }
    .work-tog-big-text h1 {
        font-size: 2.8rem;
        letter-spacing: 1.3px;
        position: relative;
        left: 4%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .animation .rectangle {
        grid-area: 1 / 4 / 6 / 15;
        display: flex;
        position: relative;
        top: 20%;
        left: 10%;
        justify-content: center;
        align-items: center;
        width: 90%;
        height: 30%;
        border-radius: 40px;
        border: 1px solid #fff;
    }
    .animation .rectangle .circle {
        width: 20%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
}

@media only screen and (max-width: 700px) {
    .hero .hero-container-text h1 {
        font-size: 1.8rem;
        text-transform: uppercase;
        line-height: 3.7rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav {
        display: grid;
        grid-template: repeat(70, 1fr) / repeat(30, 1fr);
        background-color: #EAE8E8;
    }
    .about-nav header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.77rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .about-nav .about-aina {
        grid-area: 41 / 2 / 46 / 30;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .about-nav .about-aina h3 {
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav .mision-aina {
        grid-area: 50 / 2 / 68 / 30;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column-reverse;
    }
    .about-nav .mision-aina p {
        width: 100%;
        height: 40%;
        font-weight: 300;
        line-height: 1.5rem;
        font-size: 1rem;
        text-align: justify;
    }
    .about-nav .mision-aina .button {
        width: 100%;
        display: flex;
        height: 30%;
        justify-content: center;
        align-items: center;
    }
    .about-nav .mision-aina .button button {
        padding: 10px 18px;
        width: 30%;
        height: 60%;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.88rem;
        border: none;
        border-radius: 10px;
    }
    .vision {
        display: grid;
        grid-template: repeat(57, 1fr) / repeat(30, 1fr);
    }
    .vision .vision-back img {
        width: 100%;
        height: 100%;
        opacity: 0.5;
        filter: grayscale(40%);
    }
    .vision .vision-back {
        grid-area: 1 / 1 / 58 / 31;
        overflow: hidden;
    }
    .vision .vision-title {
        grid-area: 2 / 1 / 8 / 30;
        margin: 10px;
        padding: 10px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .vision .vision-title h3 {
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .vision .vision-about {
        grid-area: 11 / 1 / 37 / 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        z-index: 1;
    }
    .vision .vision-about .paragraph {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 50%;
    }

    .vision .vision-about .button button {
        padding: 10px 15px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.88rem;
        border: none;
        border-radius: 10px;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.9rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header {
        grid-area: 38 / 1 / 52/ 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1;
    }
    .vision .email-container {
        grid-area: 52 / 22 / 55 / 27;
        z-index: 1;
    }

    .gallery {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(53, 1fr);
        height: 65vh;
    }
    .proyects .proyects-about {
        grid-area: 2 / 2 / 28 / 29;
        padding: 5px;
        margin: 10px;
    }
    .proyects .proyects-img {
        grid-area: 39 / 1 / 65 / 31;
    }
    .proyects .proyects-button {
        grid-area: 30 / 10 / 35 / 22;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .vision header a.logo h2 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .vision header nav ul li a {
        text-decoration: none;
        padding: 10px;
        color: #000;
        font-size: 0.77rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .service-intro header a.logo h2 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .service-intro header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.77rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .ux header a.logo h2 {
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.77rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .ux .ux-big h3 {
        font-size: 1.6rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .ux .ux-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.8rem;
        border: none;
        border-radius: 10px;
    }
    .ux .ux-par {
        grid-area: 36 / 2 / 54 / 30;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-par p {
        font-size: 0.92rem;
        letter-spacing: 0.2rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .web-develop header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.77rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .web-develop .web-big h3 {
        font-size: 1.6rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .web-develop .web-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.8rem;
        border: none;
        border-radius: 10px;
    }
    .web-develop .web-par p {
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        text-align: justify;
        font-weight: 300;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .digital-mark header a.logo h2 {
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .digital-mark header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.77rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .digital-mark .digital-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.8rem;
        border: none;
        border-radius: 10px;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.6rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .digital-mark .digital-par p {
        font-size: 0.88rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        text-align: justify;
    }
    .big-text .big-text-one h1 {
        font-size: 1.7rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 2rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 1.7rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 2rem;
        font-weight: 600;
    }

}

@media only screen and (max-width: 680px) {
    .gallery {
        display: grid;
        grid-template: repeat(99, 1fr) / repeat(53, 1fr);
        height: 100%;
    }
    .gallery img.three-two {
        grid-area: 1 / 1 / 30 / 27;
    }
    .gallery img.two-one {
        grid-area: 1 / 27 / 30 / 54;
    }
    .gallery img.two-three {
        grid-area: 30 / 1 / 59 / 27;
    }
    .gallery img.three-one {
        grid-area: 30 / 27 / 59 / 54;
    }
    .gallery img.three-three {
        grid-area: 59 / 1 / 88 / 27;
    }
    .gallery img.two-two {
        grid-area: 58 / 27 / 88 / 54;
    }
    .work-tog-big-text h1 {
        font-size: 2.7rem;
        letter-spacing: 1.3px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .footer .footer-container {
        grid-area: 3 / 4 / 24 / 28;
        padding: 10px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
}

@media only screen and (max-width: 670px) {
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.4rem;
        text-transform: uppercase;
        line-height: 2.6rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.8rem;
    }
}


@media only screen and (max-width: 650px) {
    .digital-mark header {
        grid-area: 2 / 1 / 13 / 30;
        padding: 10px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .about-nav header nav {
        display: none;
    }
    .about-nav .container-img-big-one {
        grid-area: 10 / 1 / 39 / 31;
    }
    .about-nav .container-img-small-one {
        grid-area: 15 / 4 / 23 / 12;
    }
    .about-nav .container-img-small-two {
        grid-area: 26 / 8 / 35 / 17;
    }
    .about-nav header a.logo {
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content: flex-start;
    }
    .about-nav .email-container {
        grid-area: 5 / 22 / 8 / 29;
        width: 100%;
    }
    .web-develop {
        display: grid;
        grid-template: repeat(150, 1fr) / repeat(30, 1fr);
    }

    .web-develop .web-img-one {
        grid-area: 64 / 5 / 80 / 27;
    }
    .web-develop .web-img-two {
        grid-area: 84 / 5 / 100 / 27;
    }
    .web-develop .web-img-three {
        grid-area: 106 / 5 / 122 / 27;
    }
    .web-develop .web-img-four {
        grid-area: 126 / 5 / 142 / 27;
    }
    .work-tog-big-text h1 {
        font-size: 2.6rem;
        letter-spacing: 1.2px;
        position: relative;
        left: 4%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .vision header {
        grid-area: 40 / 1 / 54/ 30;
        padding: 10px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1;
    }
    .vision .email-container {
        grid-area: 46 / 22 / 49 / 27;
        z-index: 1;
    }
    .vision .vision-title h3 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .vision header nav {
        display: none;
    }
    .vision .vision-title {
        grid-area: 2 / 1 / 9 / 30;
        margin: 10px;
        padding: 10px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .vision .vision-about {
        grid-area: 11 / 1 / 40 / 30;
        padding: 10px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        z-index: 1;
    }

    .vision .vision-about .paragraph p {
        font-size: 0.92rem;
        font-weight: 300;
        text-align: justify;
    }

    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 100vh;
    }
    .service-intro header {
        grid-area: 2 / 1 / 14 / 30;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .service-intro .service-intro-img {
        grid-area: 13 / 2 / 48 / 30;
        padding: 10px;
        margin: 10px;
    }

    .service-intro .email-container {
        grid-area: 6 / 22 / 9 / 30;
        width: 100%;
    }

    .service-intro header nav {
        display: none;
    }
    .ux header {
        grid-area: 2 / 1 / 16 / 30;
    }

    .ux header nav {
        display: none;
    }
    .ux .email-container {
        grid-area: 5 / 22 / 11 / 30;
        z-index: 1;
    }
    .ux .ux-big {
        grid-area: 12 / 2 / 22 / 29;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
        text-align: center;
    }
    .ux .ux-par {
        grid-area: 24 / 2 / 42 / 30;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-button {
        grid-area: 44 / 21 / 53 / 29;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .web-develop header nav {
        display: none;
    }
    .web-develop header {
        grid-area: 2 / 1 / 12 / 30;
        padding: 10px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    
    .web-develop .email-container {
        grid-area: 4 / 22 / 9 / 30;
    }
    .web-develop .web-big {
        grid-area: 10 / 2 / 20 / 29;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .web-develop .web-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
        text-align: center;
    }
    .web-develop .web-par {
        grid-area: 20 / 2 / 33 / 30;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .web-develop .web-button {
        grid-area: 32 / 23 / 35 / 29;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(78, 1fr) / repeat(30, 1fr);
    }
    .digital-mark header nav {
        display: none;
    }
    .digital-mark .email-container {
        grid-area: 5 / 22 / 12 / 30;
    }
    .digital-mark .digital-big {
        grid-area: 10 / 2 / 20 / 29;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
        text-align: center;
    }
    .digital-mark .digital-par {
        grid-area: 47 / 2 / 68 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-par p {
        font-size: 0.92rem;
        letter-spacing: 0.2rem;
        font-weight: 300;
        text-align: justify;
    }
    .digital-mark .digital-container-img {
        grid-area: 17 / 9 / 44 / 22;
    }
    .digital-mark .digital-button {
        grid-area: 68 / 21 / 78 / 29;
        padding: 20px;
        margin: 10px;
    }
}


@media only screen and (max-width: 627px) {
    .vision .vision-title h3 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .work-tog-big-text h1 {
        font-size: 2.6rem;
        letter-spacing: 1.2px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }

}

@media only screen and (max-width: 620px) {
    .vision header a.logo {
        width: 70%;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .ux .ux-big {
        grid-area: 12 / 2 / 24 / 29;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-par {
        grid-area: 26 / 2 / 46 / 30;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .big-text .big-text-one {
        grid-area: 5 / 1 / 18 / 34;
        padding: 20px;
        margin: 10px;
    }
    .big-text .big-text-one h1 {
        font-size: 1.5rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 3rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 1.9rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 1.5rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 3rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 1.9rem;
        font-weight: 600;
    }
    .work-tog-big-text h1 {
        font-size: 2.5rem;
        letter-spacing: 1.2px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}



@media only screen and (max-width: 600px) {
    .hero .back {
        grid-area: 1 / 1 / 9 / 19;
        background: url(./img/Rectángulo\ 117.png);
        background-position: center;
        background-repeat: no-repeat;
        height: 62vh;
        overflow: hidden;
        position: relative;
        bottom: 10%;
        opacity: 0.7;
    }
    
    
    .hero .hero-container-text {
        grid-area: 2 / 2 / 8 / 18;
        position: relative;
        bottom: 0%;
    }
    .hero .hero-container-text h1 {
        font-size: 1.6rem;
        text-transform: uppercase;
        line-height: 3.4rem;
        font-weight: 400;
        text-align: center;
    }

    .about-nav header a.logo h2 {
        font-size: 3rem;
        letter-spacing: 0.3rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .about-nav header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.75rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }
    .about-nav .email-container h6 {
        font-size: 0.68rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .about-nav .about-aina h3 {
        font-size: 1.3rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav .mision-aina p {
        width: 100%;
        height: 40%;
        font-weight: 300;
        line-height: 1.5rem;
        font-size: 0.9rem;
        text-align: justify;
    }
    .about-nav .mision-aina .button button {
        padding: 10px 18px;
        width: 30%;
        height: 60%;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.85rem;
        border: none;
        border-radius: 10px;
    }
    .vision .vision-title {
        grid-area: 2 / 1 / 10 / 30;
        margin: 10px;
        padding: 10px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vision .vision-about .button button {
        padding: 10px 15px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.85rem;
        border: none;
        border-radius: 10px;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.88rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header a.logo h2 {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .vision .email-container h6 {
        font-size: 0.68rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .proyects .proyects-button {
        grid-area: 30 / 9 / 35 / 23;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .proyects .proyects-button button a {
        font-size: 1.1rem;
        color: #195CF2;
        text-decoration: none;
    }
    .service-intro header a.logo h2 {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .service-intro .email-container h6 {
        font-size: 0.68rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .ux header a.logo h2 {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux .email-container h6 {
        font-size: 0.68rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }

    .ux .ux-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .ux .ux-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.77rem;
        border: none;
        border-radius: 10px;
    }
    .ux .ux-par p {
        font-size: 0.92rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .web-develop .email-container h6 {
        font-size: 0.68rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .web-develop .web-big h3 {
        font-size: 1.7rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .web-develop .web-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.77rem;
        border: none;
        border-radius: 10px;
    }
    .web-develop .web-par p {
        font-size: 0.9rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .work-tog-big-text h1 {
        font-size: 2.4rem;
        letter-spacing: 1.2px;
        position: relative;
        left: 3%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.88rem;
        letter-spacing: 0.1rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .digital-mark header a.logo h2 {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .digital-mark .email-container h6 {
        font-size: 0.68rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .digital-mark .digital-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.77rem;
        border: none;
        border-radius: 10px;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.4rem;
        line-height: 3.4rem;
        font-weight: 400;
    }
    .digital-mark .digital-par p {
        font-size: 0.88rem;
        letter-spacing: 0.1rem;
        font-weight: 300;
        text-align: justify;
    }
    .footer .footer-container h1.logo {
        font-size: 4rem;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
    }
    .footer .footer-container .footer-sub-container h5.agency {
        font-size: 0.86rem;
        font-weight: 300;
        letter-spacing: 0.1rem;
        text-align: center;
    }
    .footer .footer-container .footer-sub-container h3.value {
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0.2rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.88rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .footer .footer-container .footer-sub-container .location h5 {
        font-size: 0.83rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .footer .footer-button button a {
        font-size: 1.1rem;
        color: #195CF2;
        text-decoration: none;
    }
    .footer .footer-button {
        grid-area: 25 / 9 / 30 / 23;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .animation .rectangle .circle {
        width: 22%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 80vh;
        z-index: 1;
    }

    
} 

@media only screen and (max-width: 589px) {

    .vision .vision-title {
        grid-area: 2 / 1 / 12 / 30;
        margin: 10px;
        padding: 10px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vision .vision-title h3 {
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-align: center;
    }
}

@media only screen and (max-width: 580px) {
    .proyects .proyects-about {
        grid-area: 1 / 2 / 28 / 30;
        padding: 5px;
        margin: 10px;
    }
    .work-tog-big-text h1 {
        font-size: 2.4rem;
        letter-spacing: 1.1px;
        position: relative;
        left: 2%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
}

@media only screen and (max-width: 570px) {
    .work-tog {
        display: grid;
        grid-template: repeat(50, 1fr) / repeat(18, 1fr);
        height: 70vh;
    }
    .work-tog-big-text {
        grid-area: 16 / 2 / 29 / 18;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .work-tog-big-text h1 {
        font-size: 2.8rem;
        letter-spacing: 1.5px;
        position: relative;
        left: 0%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
        text-align: center;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }

}


@media only screen and (max-width: 560px) {

    .footer .footer-container {
        grid-area: 3 / 3 / 24 / 29;
        padding: 10px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 75vh;
        z-index: 1;
    }
}

@media only screen and (max-width: 552px) {
    .about-nav header a.logo h2 {
        font-size: 2.5rem;
        letter-spacing: 0.3rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .about-nav .about-aina {
        grid-area: 41 / 2 / 47 / 30;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

@media only screen and (max-width: 550px) {
    .about-nav header nav ul li a {
        text-decoration: none;
        color: #000;
        font-size: 0.65rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-weight: 500;
    }

    .hero .hero-container-text h1 {
        font-size: 1.5rem;
        text-transform: uppercase;
        line-height: 3.3rem;
        font-weight: 400;
        text-align: center;
    }

    .about-nav header a.logo h2 {
        font-size: 2.8rem;
        letter-spacing: 0.3rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .about-nav .email-container h6 {
        font-size: 0.65rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .about-nav .about-aina h3 {
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav .mision-aina p {
        width: 100%;
        height: 40%;
        font-weight: 300;
        line-height: 1.4rem;
        font-size: 0.9rem;
        text-align: justify;
    }
    .about-nav .mision-aina .button button {
        padding: 10px 18px;
        width: 30%;
        height: 60%;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.82rem;
        border: none;
        border-radius: 10px;
    }
    .vision .vision-title {
        grid-area: 2 / 1 / 13 / 30;
        margin: 10px;
        padding: 10px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vision .vision-title h3 {
        font-size: 1.7rem;
        text-align: center;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .vision .vision-about .button button {
        padding: 10px 15px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.82rem;
        border: none;
        border-radius: 10px;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.85rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header a.logo h2 {
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .vision .email-container h6 {
        font-size: 0.67rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .proyects .proyects-about h2 {
        text-align: center;
        font-size: 1.3rem;
        text-transform: uppercase;
        line-height: 2.4rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.6rem;
    }
    .proyects .proyects-button {
        grid-area: 30 / 9 / 35 / 23;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 85vh;
    }
    .proyects .proyects-button button a {
        font-size: 1rem;
        color: #195CF2;
        text-decoration: none;
    }
    .service-intro header a.logo h2 {
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .service-intro .email-container h6 {
        font-size: 0.65rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .ux header a.logo h2 {
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux .email-container h6 {
        font-size: 0.65rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .ux .ux-big h3 {
        font-size: 1.5rem;
        line-height: 3rem;
        font-weight: 400;
    }
    .ux .ux-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        border: none;
        border-radius: 10px;
    }
    .ux .ux-par p {
        font-size: 0.87rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .web-develop .email-container h6 {
        font-size: 0.67rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .web-develop .web-big h3 {
        font-size: 1.5rem;
        line-height: 3rem;
        font-weight: 400;
    }
    .web-develop .web-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        border: none;
        border-radius: 10px;
    }
    .web-develop .web-par p {
        font-size: 0.88rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .work-tog-big-text h1 {
        font-size: 3rem;
        letter-spacing: 1.1px;
        position: relative;
        left: 0%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 4rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        top: 20%;
        left: 0%;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.85rem;
        letter-spacing: 0.1rem;
        font-weight: 300;
        color: #fff;
        text-align: center;
    }
    .digital-mark header a.logo h2 {
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .digital-mark .email-container h6 {
        font-size: 0.65rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }
    .digital-mark .digital-button button {
        padding: 15px 18px;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        border: none;
        border-radius: 10px;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.4rem;
        line-height: 3rem;
        font-weight: 400;
    }
    .digital-mark .digital-par p {
        font-size: 0.86rem;
        letter-spacing: 0.1rem;
        font-weight: 300;
        text-align: justify;
    }
    .footer .footer-container h1.logo {
        font-size: 3.6rem;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
    }
    .footer .footer-container .footer-sub-container h5.agency {
        font-size: 0.83rem;
        font-weight: 300;
        letter-spacing: 0.1rem;
        text-align: center;
    }
    .footer .footer-container .footer-sub-container h3.value {
        font-size: 0.9rem;
        font-weight: 400;
        letter-spacing: 0.2rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.85rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .footer .footer-container .footer-sub-container .location h5 {
        font-size: 0.8rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .footer .footer-button button a {
        font-size: 1rem;
        color: #195CF2;
        text-decoration: none;
    }
    .footer .footer-button {
        grid-area: 25 / 9 / 30 / 23;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .animation .rectangle .circle {
        width: 25%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
} 



@media only screen and (max-width: 523px) {
    .digital-mark {
        display: grid;
        grid-template: repeat(88, 1fr) / repeat(30, 1fr);
    }
    .digital-mark .digital-par {
        grid-area: 46 / 2 / 74 / 30;
        padding: 10px;
        margin: 10px;
    }
    .ux .ux-par {
        grid-area: 26 / 2 / 46 / 30;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .web-develop .web-par {
        grid-area: 20 / 2 / 33 / 30;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .digital-mark .digital-button {
        grid-area: 74 / 20 / 84 / 29;
        padding: 20px;
        margin: 10px;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 82vh;
    }
    .service-intro .service-intro-img {
        grid-area: 15 / 2 / 48 / 30;
        padding: 10px;
        margin: 10px;
    }
    .animation .rectangle .circle {
        width: 27%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 72vh;
        z-index: 1;
    }
    
}

@media only screen and (max-width: 510px) {
    .about-nav .email-container {
        display: none;
    }
    .about-nav header a.logo {
        justify-content: center;
    }
    .vision .email-container {
        display: none;
    }
    .service-intro .email-container {
        display: none;
    }
    .service-intro header a.logo {
        justify-content: center;
    }
    .service-intro header a.logo h2 {
        font-size: 1.9rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    .ux header a.logo {
        justify-content: center;
    }
    .ux .email-container {
        display: none;
    }
    .web-develop header a.logo {
        justify-content: center;
    }
    .web-develop .email-container {
        display: none;
    }
    .digital-mark header a.logo {
        justify-content: center;
    }
    .digital-mark .email-container {
        display: none;
    }
    .ux {
        display: grid;
        grid-template: repeat(65, 1fr) / repeat(30, 1fr);
    }
    .ux .ux-img {
        grid-area: 1 / 1 / 66 / 31;
    }
    .ux .ux-button {
        grid-area: 49 / 5 / 59 / 27;
        padding: 20px;
        margin: 10px;
        z-index: 1;
    }
    .ux .ux-button button {
        padding: 15px 18px;
        width: 100%;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        border: none;
        border-radius: 10px;
    }
    .web-develop .web-button {
        grid-area: 34 / 6 / 37 / 26;
    }
    .web-develop .web-button button {
        padding: 15px 18px;
        width: 100%;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        border: none;
        border-radius: 10px;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(90, 1fr) / repeat(30, 1fr);
    }
    .digital-mark .digital-button {
        grid-area: 76 / 6 / 86 / 26;
        padding: 20px;
        margin: 10px;
    }
    .digital-mark .digital-button button {
        padding: 15px 18px;
        width: 100%;
        background-color: #262626;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        border: none;
        border-radius: 10px;
    }
    .service-intro .service-intro-img {
        grid-area: 15 / 2 / 48 / 30;
        padding: 5px;
        margin: 5px;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 78vh;
    }
}

@media only screen and (max-width: 502px) {
    .about-nav {
        display: grid;
        grid-template: repeat(80, 1fr) / repeat(30, 1fr);
        background-color: #EAE8E8;
    }
    .about-nav .about-aina {
        grid-area: 41 / 2 / 50 / 30;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .about-nav .mision-aina {
        grid-area: 54 / 2 / 76 / 30;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column-reverse;
    }
    .vision .vision-about .button {
        width: 30%;
    }

}

@media only screen and (max-width: 500px) {

    .hero .hero-container-text {
        grid-area: 2 / 2 / 9 / 18;
        position: relative;
        bottom: 0%;
    }
    .hero .hero-container-text h1 {
        font-size: 1.4rem;
        text-transform: uppercase;
        line-height: 3rem;
        font-weight: 400;
        text-align: center;
    }
    .vision header a.logo {
        width: 90%;
    }
}

@media only screen and (max-width: 481px) {
    .proyects .proyects-about {
        grid-area: 1 / 2 / 29 / 30;
        padding: 5px;
        margin: 10px;
    }
    .footer .footer-container {
        grid-area: 3 / 1 / 24 / 31;
        padding: 10px;
        height: 60vh;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        bottom: 5%;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 90vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 66vh;
        z-index: 1;
    }
}

@media only screen and (max-width: 460px) {
    .ux .ux-par {
        grid-area: 26 / 2 / 47 / 30;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .digital-mark .digital-big {
        grid-area: 7 / 1 / 20 / 30;
        padding: 10px;
        margin: 10px;
        z-index: 1;
    }
    .digital-mark .digital-container-img {
        grid-area: 18 / 8 / 48 / 23;
    }
    .digital-mark .digital-par {
        grid-area: 48 / 2 / 76 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-button {
        grid-area: 78 / 6 / 88 / 26;
        padding: 20px;
        margin: 10px;
    }
    .big-text .big-text-one h1 {
        font-size: 1.4rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 2.8rem;
        font-weight: 400;
    }
    .big-text .big-text-one h1 span {
        font-size: 1.8rem;
        font-weight: 600;
    }
    .big-text .big-text-two h1 {
        font-size: 1.4rem;
        text-transform: uppercase;
        text-align: center;
        line-height: 2.8rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 span {
        font-size: 1.8rem;
        font-weight: 600;
    }

}

@media only screen and (max-width: 454px) {
    .hero .hero-container-text {
        grid-area: 2 / 1 / 9 / 19;
        position: relative;
        bottom: -15%;
        padding: 10px;
        margin: 10px;
    }
    .hero .hero-container-text h1 {
        font-size: 1.4rem;
        text-transform: uppercase;
        line-height: 2.5rem;
        font-weight: 400;
        text-align: center;
    }
    .animation .rectangle .circle {
        width: 29%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }

} 

@media only screen and (max-width: 450px) {
    .hero .hero-container-text h1 {
        font-size: 1.3rem;
        text-transform: uppercase;
        line-height: 2.4rem;
        font-weight: 400;
        text-align: center;
    }
    .about-nav .about-aina h3 {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 400;
        text-align: center;
    }

    .footer .footer-container .footer-sub-container h5.agency {
        font-size: 0.7rem;
        font-weight: 300;
        letter-spacing: 0.1rem;
        text-align: center;
    }
    .footer .footer-container .footer-sub-container h3.value {
        font-size: 0.85rem;
        font-weight: 400;
        letter-spacing: 0.2rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.77rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
}

@media only screen and (max-width: 430px) {
    .digital-mark .digital-par {
        grid-area: 48 / 2 / 78 / 30;
        padding: 10px;
        margin: 10px;
    }
    .web-develop .web-img-one {
        grid-area: 64 / 4 / 80 / 28;
    }
    .web-develop .web-img-two {
        grid-area: 84 / 4 / 100 / 28;
    }
    .web-develop .web-img-three {
        grid-area: 106 / 4 / 122 / 28;
    }
    .web-develop .web-img-four {
        grid-area: 126 / 4 / 142 / 28;
    }
    .animation .rectangle .circle {
        width: 35%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
}

@media only screen and (max-width: 420px) {
    .hero {
        display: grid;
        grid-template: repeat(45, 1fr) / repeat(18, 1fr);
    }
    .hero .back {
        grid-area: 1 / 1 / 46 / 19;
        background: url(./img/Rectángulo\ 117.png);
        background-position: center;
        background-repeat: no-repeat;
        height: 60vh;
        overflow: hidden;
        position: relative;
        bottom: 10%;
        opacity: 0.7;
    }
    .hero .hero-container-text {
        grid-area: 2 / 1 / 46 / 19;
        position: relative;
        bottom: -20%;
        padding: 10px;
        margin: 10px;
    }
    .hero .hero-container-text h1 {
        font-size: 1.3rem;
        line-height: 2rem;
    }
    .about-nav .mision-aina {
        grid-area: 54 / 2 / 78 / 30;
        display: flex;
        justify-content: space-between;
        flex-direction: column-reverse;
    }
    .about-nav header a.logo h2 {
        font-size: 2.5rem;
    }
    .about-nav .about-aina h3 {
        font-size: 1.2rem;
    }
    .about-nav .mision-aina .button button {
        font-size: 0.8rem;
    }
    .about-nav .mision-aina p {
        font-size: 0.88rem;
    }
    .vision .vision-title h3 {
        font-size: 1.5rem;
    }
    .vision .vision-about .button button {
        font-size: 0.8rem;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.82rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header a.logo h2 {
        font-size: 1rem;
    }
    .proyects .proyects-about h2 {
        font-size: 1.1rem;
        line-height: 2.2rem;
        letter-spacing: 0.1rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.4rem;
    }
    .proyects .proyects-button button a {
        font-size: 0.9rem;
    }
    .ux header a.logo h2 {
        font-size: 1.1rem;
        letter-spacing: 0.1rem;
    }
    .ux .ux-big h3 {
        font-size: 1.3rem;
        line-height: 2.5rem;
    }
    .ux .ux-par p {
        font-size: 0.83rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 1.1rem;
        letter-spacing: 0.1rem;
    }
    .web-develop .web-big h3 {
        font-size: 1.3rem;
        line-height: 2.8rem;
    }
    .web-develop .web-par p {
        font-size: 0.83rem;
        letter-spacing: 0.1rem;
    }
    .work-tog-big-text h1 {
        font-size: 2.8rem;
        letter-spacing: 1px;
        position: relative;
        left: 0%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 3rem;
        font-weight: 400;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.83rem;
        letter-spacing: 0.1rem;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 72vh;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(105, 1fr) / repeat(30, 1fr);
    }
    .digital-mark header a.logo h2 {
        font-size: 1.1rem;
    }
    .digital-mark .digital-container-img {
        grid-area: 19 / 6 / 53 / 25;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.3rem;
        line-height: 2.8rem;
        font-weight: 400;
    }
    .digital-mark .digital-par {
        grid-area: 54 / 2 / 96 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-par p {
        font-size: 0.83rem;
        letter-spacing: 0.1rem;
    }
    .digital-mark .digital-button {
        grid-area: 92 / 6 / 102 / 26;
        padding: 20px;
        margin: 10px;
    }
    .big-text .big-text-one h1 {
        font-size: 1.2rem;
        line-height: 2.5rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 {
        font-size: 1.2rem;
        line-height: 2.5rem;
    }
    .footer .footer-button button a {
        font-size: 0.9rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.7rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 85vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 66vh;
        z-index: 1;
    }

}

@media only screen and (max-width: 415px) {
    .hero .hero-container-text {
        grid-area: 2 / 1 / 46 / 19;
        position: relative;
        bottom: -10%;
        padding: 10px;
        margin: 10px;
    }
    .hero .hero-container-text h1 {
        font-size: 1.3rem;
        line-height: 3rem;
    }
}

@media only screen and (max-width: 400px) {
    .web-develop .web-img-one {
        grid-area: 64 / 3 / 80 / 29;
    }
    .web-develop .web-img-two {
        grid-area: 84 / 3 / 100 / 29;
    }
    .web-develop .web-img-three {
        grid-area: 106 / 3 / 122 / 29;
    }
    .web-develop .web-img-four {
        grid-area: 126 / 3 / 142 / 29;
    }
    .proyects .proyects-button {
        grid-area: 30 / 7 / 35 / 25;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .vision header {
        grid-area: 44 / 1 / 58 / 30;
        padding: 10px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1;
    }
    .footer .footer-container .footer-sub-container {
        display: flex;
        height: 80%;
        flex-direction: column;
        justify-content: space-around;
    }
    .footer .footer-container .footer-sub-container h3.value {
        text-align: center;
    }
}

@media only screen and (max-width: 375px) {
    .hero .hero-container-text h1 {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .about-nav header a.logo h2 {
        font-size: 2.4rem;
    }
    .about-nav .about-aina h3 {
        font-size: 1.1rem;
    }
    .about-nav .mision-aina .button button {
        font-size: 0.88rem;
    }
    .about-nav .mision-aina p {
        font-size: 0.87rem;
    }
    .vision .vision-title h3 {
        font-size: 1.4rem;
    }
    .vision .vision-about .button button {
        font-size: 0.77rem;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.81rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header a.logo h2 {
        font-size: 0.98rem;
    }
    .proyects .proyects-about h2 {
        font-size: 1rem;
        line-height: 2.1rem;
        letter-spacing: 0.1rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.3rem;
    }
    .proyects .proyects-button button a {
        font-size: 0.88rem;
    }
    .ux header a.logo h2 {
        font-size: 1rem;
        letter-spacing: 0.1rem;
    }
    .ux .ux-big h3 {
        font-size: 1.2rem;
        line-height: 2.4rem;
    }
    .ux .ux-par p {
        font-size: 0.81rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 1rem;
        letter-spacing: 0.1rem;
    }
    .web-develop .web-big h3 {
        font-size: 1.2rem;
        line-height: 2.7rem;
    }
    .web-develop .web-par p {
        font-size: 0.81rem;
        letter-spacing: 0.1rem;
    }
    .work-intro .work-intro-container h3 {
        width: 100%;
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        text-align: center;
        line-height: 2.8rem;
        font-weight: 400;
        color: #fff;
    }
    .work-tog-big-text h1 {
        font-size: 2.6rem;
        letter-spacing: 0.9px;
        position: relative;
        left: 0%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.81rem;
        letter-spacing: 0.1rem;
    }
    .animation .rectangle .circle {
        width: 38%;
        height: 97%;
        background-color: #F2F2F2;
        border-radius: 50%;
        animation: drag 3s ease-in infinite;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 68vh;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(105, 1fr) / repeat(30, 1fr);
    }
    .digital-mark header a.logo h2 {
        font-size: 1rem;
    }
    .digital-mark .digital-container-img {
        grid-area: 19 / 6 / 53 / 25;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.2rem;
        line-height: 2.6rem;
        font-weight: 400;
    }
    .digital-mark .digital-par {
        grid-area: 54 / 2 / 96 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-par p {
        font-size: 0.81rem;
        letter-spacing: 0.1rem;
    }
    .digital-mark .digital-button {
        grid-area: 92 / 6 / 102 / 26;
        padding: 20px;
        margin: 10px;
    }
    .big-text .big-text-one h1 {
        font-size: 1.1rem;
        line-height: 2.4rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 {
        font-size: 1.1rem;
        line-height: 2.4rem;
    }
    .footer .footer-container .footer-sub-container .contact {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .footer .footer-button button a {
        font-size: 0.88rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.65rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 82vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 66vh;
        z-index: 1;
    }

}

@media only screen and (max-width: 350px) {
    .hero .hero-container-text h1 {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .about-nav header a.logo h2 {
        font-size: 2.3rem;
    }
    .about-nav .about-aina h3 {
        font-size: 1rem;
    }
    .about-nav .mision-aina .button button {
        font-size: 0.86rem;
    }
    .about-nav .mision-aina p {
        font-size: 0.85rem;
    }
    .vision .vision-title h3 {
        font-size: 1.3rem;
    }
    .vision .vision-about .button button {
        font-size: 0.75rem;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.79rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header a.logo h2 {
        font-size: 0.96rem;
    }
    .proyects .proyects-about h2 {
        font-size: 0.98rem;
        line-height: 2rem;
        letter-spacing: 0.1rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.2rem;
    }
    .proyects .proyects-button button a {
        font-size: 0.86rem;
    }
    .ux header a.logo h2 {
        font-size: 0.9rem;
        letter-spacing: 0.1rem;
    }
    .ux .ux-big h3 {
        font-size: 1.1rem;
        line-height: 2.3rem;
    }
    .ux .ux-par p {
        font-size: 0.8rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 0.98rem;
        letter-spacing: 0.1rem;
    }
    .web-develop .web-big h3 {
        font-size: 1.1rem;
        line-height: 2.6rem;
    }
    .web-develop .web-par p {
        font-size: 0.79rem;
        letter-spacing: 0.1rem;
    }
    .work-tog-big-text h1 {
        font-size: 2.4rem;
        letter-spacing: 0.9px;
        position: relative;
        left: 0%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.79rem;
        letter-spacing: 0.1rem;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 60vh;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(105, 1fr) / repeat(30, 1fr);
    }
    .digital-mark header a.logo h2 {
        font-size: 0.98rem;
    }
    .digital-mark .digital-container-img {
        grid-area: 19 / 5 / 53 / 26;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.1rem;
        line-height: 2.4rem;
        font-weight: 400;
    }
    .digital-mark .digital-par {
        grid-area: 54 / 2 / 96 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-par p {
        font-size: 0.79rem;
        letter-spacing: 0.1rem;
    }
    .digital-mark .digital-button {
        grid-area: 92 / 6 / 102 / 26;
        padding: 20px;
        margin: 10px;
    }
    .big-text .big-text-one h1 {
        font-size: 1rem;
        line-height: 2.3rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 {
        font-size: 1rem;
        line-height: 2.3rem;
    }
    .footer .footer-button button a {
        font-size: 0.86rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.63rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 80vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 66vh;
        z-index: 1;
    }

}

@media only screen and (max-width: 340px) {
    .hero .hero-container-text h1 {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .about-nav header a.logo h2 {
        font-size: 2.2rem;
    }
    .about-nav .about-aina h3 {
        font-size: 0.98rem;
    }
    .about-nav .mision-aina .button button {
        font-size: 0.84rem;
    }
    .about-nav .mision-aina p {
        font-size: 0.8rem;
    }
    .vision .vision-title h3 {
        font-size: 1.2rem;
    }
    .vision .vision-about .button button {
        font-size: 0.73rem;
    }
    .vision .vision-about .paragraph p {
        font-size: 0.78rem;
        font-weight: 300;
        text-align: justify;
    }
    .vision header a.logo h2 {
        font-size: 0.94rem;
    }
    .proyects .proyects-about h2 {
        font-size: 0.96rem;
        line-height: 1.8rem;
        letter-spacing: 0.1rem;
    }
    .proyects .proyects-about h2 span {
        font-weight: 600;
        font-size: 1.1rem;
    }
    .proyects .proyects-button button a {
        font-size: 0.84rem;
    }
    .ux header a.logo h2 {
        font-size: 0.88rem;
        letter-spacing: 0.1rem;
    }
    .ux .ux-big h3 {
        font-size: 1.2rem;
        line-height: 2.1rem;
    }
    .ux .ux-par p {
        font-size: 0.77rem;
        letter-spacing: 0.1rem;
        text-align: justify;
        font-weight: 300;
    }
    .web-develop header a.logo h2 {
        font-size: 0.96rem;
        letter-spacing: 0.1rem;
    }
    .web-develop .web-big h3 {
        font-size: 1.2rem;
        line-height: 2.4rem;
    }
    .web-develop .web-par p {
        font-size: 0.77rem;
        letter-spacing: 0.1rem;
    }
    .work-tog-big-text h1 {
        font-size: 2.2rem;
        letter-spacing: 0.9px;
        position: relative;
        left: 0%;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
    }
    .work-intro .work-intro-container .container-par p {
        font-size: 0.77rem;
        letter-spacing: 0.1rem;
    }
    .service-intro {
        display: grid;
        grid-template: repeat(55, 1fr) / repeat(30, 1fr);
        height: 60vh;
    }
    .digital-mark {
        display: grid;
        grid-template: repeat(105, 1fr) / repeat(30, 1fr);
    }
    .digital-mark header a.logo h2 {
        font-size: 0.96rem;
    }
    .digital-mark .digital-container-img {
        grid-area: 19 / 5 / 53 / 28;
    }
    .digital-mark .digital-big h3 {
        font-size: 1.2rem;
        line-height: 2.2rem;
        font-weight: 400;
    }
    .digital-mark .digital-par {
        grid-area: 54 / 2 / 96 / 30;
        padding: 10px;
        margin: 10px;
    }
    .digital-mark .digital-par p {
        font-size: 0.77rem;
        letter-spacing: 0.1rem;
    }
    .digital-mark .digital-button {
        grid-area: 92 / 6 / 102 / 26;
        padding: 20px;
        margin: 10px;
    }
    .big-text .big-text-one h1 {
        font-size: 0.98rem;
        line-height: 2.2rem;
        font-weight: 400;
    }
    .big-text .big-text-two h1 {
        font-size: 0.98rem;
        line-height: 2.2rem;
    }
    .footer .footer-button {
        grid-area: 25 / 8 / 30 / 25;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .footer .footer-button button a {
        font-size: 0.84rem;
    }
    .footer .footer-container .footer-sub-container .contact h5 {
        font-size: 0.61rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
    }
    .final {
        display: grid;
        grid-template: repeat(40, 1fr) / repeat(30, 1fr);
        height: 70vh;
    }
    .final img.front {
        grid-area: 2 / 2 / 41 / 30;
        width: 100%;
        height: 66vh;
        z-index: 1;
    }

}