@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/static/OpenSans-Light.ttf') format("truetype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/static/OpenSans-Medium.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Light.ttf') format("truetype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Medium.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Italic.ttf') format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/static/OpenSans-SemiBold.ttf') format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-SemiBold.ttf') format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/static/OpenSans-Bold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Bold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Bold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Epilogue';
    src: url('./fonts/Epilogue-ExtraBold.ttf') format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-ExtraBold.ttf') format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/static/OpenSans-ExtraBold.ttf') format("truetype");
    font-weight: 800;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* utilities */
.version-mobile {
    display: none !important;
}

.w-20 {
    width: 20%;
}

.pt-100 {
    padding-top: 100px;
}

.pt-50 {
    padding-top: 50px;
}

.cta-primary {
    background: transparent;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 36px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    transition: background 0.3s ease;
}

.cta-primary:hover {
    background: #fff;
    color: blue;
}
/* Estado inicial: oculto y desplazado hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Estado visible: completamente opaco y en posición normal */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.left {
  transform: translateX(-50px);
}
.reveal.right {
  transform: translateX(50px);
}

/* end utilities */
/* Menú */
header {
    background: #265BFF;
    position: fixed;
    width: 100%;
    height: 100px;
    z-index: 100;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    padding: 0 100px;
}

nav img {
    max-width: 150px;
}

nav ul {
    margin: 0px;
    padding: 0px;
    place-self: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

nav ul li {
    list-style-type: none;
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-family: 'Open Sans';
    padding: 0 15px;
    width: 100px;
}

nav ul li:last-child {
    padding-right: 0px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    position: relative;
    transition: all .2s ease-in-out;
}

.item-menu:hover {
    font-weight: 700;
}

nav button {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-family: 'Open Sans';
}

.align-cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cta-contactos {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    font-family: 'Open Sans', sans-serif;
    padding: 12px 35px;
    border-radius: 36px;
    font-weight: 600;
    text-decoration: none;
}

.cta-contactos:hover {
    background: #fff;
    color: #265BFF;
}

.ancla {
    cursor: pointer;
}

.menu-next {
    display: none;
}

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

.bar1 {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.3s;
    border-radius: 10px;
    cursor: pointer;
}

.bar2 {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.3s;
    border-radius: 10px;
    cursor: pointer;
}

.bar3 {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.3s;
    border-radius: 10px;
    cursor: pointer;
}

.change .bar1 {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: 0px;
    width: 35px !important;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-top: -18px;
    width: 35px !important;
}

.active-item {
    border-bottom: 2px solid #71d8bf;
    padding: 0 0 3px 0;
}

/* Fin Menú */
/* Hero Section */
.hero-section {
    background: #265BFF;
}

.hero-home {
    max-width: 1300px;
    margin: 0 auto;
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px;
}

.hero-text {
    position: relative;
}

.hero-text h1 {
    font-size: 60px;
    font-weight: 800;
    line-height: 64px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-align: left;
}
.hero-text span {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 3s ease forwards;
}

.hero-text span:nth-child(1) {
  animation-delay: 0.2s;
}
.hero-text span:nth-child(3) {
  animation-delay: 0.5s;
}
.hero-text span:nth-child(5) {
  animation-delay: 0.7s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-image {
    display: flex;
    justify-content: end;
}

.hero-image img {
    width: 100%;
}

.hero-text img {
    width: 150px;
    float: right;
    margin-top: -30px;
    margin-right: 50px;
}

.hero-text img {
    animation: girar 15s linear infinite;
    /* Nombre, duración, interpolación y repetición */
}

@keyframes girar {
    from {
        transform: rotate(0deg);
        /* Punto de inicio */
    }

    to {
        transform: rotate(360deg);
        /* Punto de fin */
    }
}

/* End Hero Section */
/* section 1 */
.section-gray {
    background: #f5f3ef;
    padding: 100px;
}

.section-1 {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 50px;
}

.section-1-image img {
    width: 100%;
}

.section-1-text p {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    font-family: 'Open Sans', sans-serif;
    color: #1A1A1A;
    text-align: left;
}

.section-1-text p b {
    color: #265BFF;
}

/* section card */
.section-gray-2 {
    background: #f5f3ef;
    padding: 50px 100px;
}

.card-circles {
    max-width: 1300px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 80px 20px;
    position: relative;
}

.img-esquina-top {
    position: absolute;
    top: -73px;
    right: -67px;
    z-index: 1;
    width: 150px;
}

.img-esquina-bottom {
    position: absolute;
    bottom: -60px;
    left: -30px;
    z-index: 1;
    width: 150px;
}

.title-parragram h3 {
    font-size: 40px;
    font-weight: 800;
    line-height: 44px;
    font-family: 'Poppins', sans-serif;
    color: #1A1A1A;
    text-align: center;
    margin: 0;
}

.title-parragram p {
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    line-height: 32px;
    font-family: 'Poppins', sans-serif;
    color: #1A1A1A;
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
    margin-top: 20px;
}

.content-circles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 50px 0px;
}

.items-circle {
    padding: 20px 10px;
}

.items-circle img {
    width: auto;
    height: 140px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

.items-circle h4 {
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
    font-family: 'Montserrat', sans-serif;
    color: #1A1A1A;
    text-align: center;
    margin: 10px 0 0 0;
}

.items-circle p {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    font-family: 'Open Sans', sans-serif;
    color: #1A1A1A;
    text-align: center;
    margin: 10px 0 0 0;
}

/* section slider logos  */

.logos-clientes h3 {
    font-size: 40px;
    font-weight: 800;
    line-height: 44px;
    font-family: 'Poppins', sans-serif;
    color: #1A1A1A;
    text-align: center;
    margin: 0;
}

.logos-clientes h3 span {
    color: #f16f0c;
}

   .logos-clientes img{
        width: auto;
        height: auto;
        max-width: 130px;
        object-fit: contain;
        filter: grayscale(1);
    }

  .slider-home {
    background: linear-gradient(90deg, #f5f3ef 38.02%, rgba(255, 255, 255, 0) 100%);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 25px;
  }
  .slide-home img {
    object-fit: contain;
    background: #f5f3ef;
    border-radius: 50px;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.04);
  }
  .slider-home::before, .slider-home::after {
    background: linear-gradient(to right, #f5f3ef 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 300px;
    z-index: 2;
    padding: 20px;
  }
  .slider-home::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }
  .slider-home::before {
    left: 0;
    top: 0;
  }
/* end section orgullo */
/* section slider logos */
        @-webkit-keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 6));
    }
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 6));
    }
  }
    .slider-home .slide-logos {
    -webkit-animation: scroll 40s linear infinite;
            animation: scroll 40s linear infinite;
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100px;
    grid-template-columns: repeat(12, 1fr);
    width: calc(250px * 12);
    background: linear-gradient(90deg, #f5f3ef 38.02%, rgba(255, 255, 255, 0) 100%);
  }

/* end section slider logos  */
/* card pink */

.card-pink {
    max-width: 1300px;
    margin: 0 auto;
    background: #F6D8D6;
    border-radius: 16px;
    padding-left: 30px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
    justify-items: end;
    color: #fff;
}

.content-card-pink h3 {
    font-size: 56px;
    font-weight: 800;
    line-height: 64px;
    font-family: 'Epilogue', sans-serif;
    color: #265BFF;
    margin: 0;
}

.link-contacto {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    text-decoration: underline;
    color: #1A1A1A;
}

.Linkedin-logo {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    margin-top: 20px;
}

.Linkedin-logo img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.img-card-pink {
    position: relative;
    height: 500px;
}

.img-card-pink img {
    width: auto;
    position: relative;
    top: -45px;
    height: 600px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.img-final {
    max-width: 1300px;
    margin: 0 auto;
}

.img-final img {
    width: 100%;
}

.list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
}

.list-footer img {
    width: 120px;
    height: auto;
    object-fit: contain;
}

.list-footer ul {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 30px;
    align-items: center;
    justify-content: center;
}

.list-footer ul li {
    list-style-type: none;
    display: inline-block;
    padding: 0 15px;
    width: 90px;
}

.list-footer ul li a {
    text-decoration: none;
    font-size: 16px;
    font-family: 'Open Sans';
    color: #265BFF;
    cursor: pointer;
}

.section-footer {
    background: #f5f3ef;
}

.padding-footer {
    padding: 50px 100px 20px;
}

.footer-content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 100px;
}

.footer-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    font-family: 'Open Sans', sans-serif;
    color: #1A1A1A;
    text-align: left;
}
.image-group {
  position: relative;
  width: 100%;
  height: 500px;
}
.piece {
  position: absolute;
  opacity: 0;
  transform: scale(0.8) translateY(40px) rotate(5deg);
  transition: all 0.8s ease-out;
}

/* Posiciones finales */
.circle  { top: -30px; left: 145px; width: 180px; z-index: 3; }
.photo   { top: 100px; left: 100px; width: 500px; z-index: 2;}
.orange  { top: 0; left: 26px; width: 500px; z-index: 1; }
.yellow  { top: 180px; left: 100px; width: 400px}
.blue    { top: -45px; right: 50px; animation: slideIn 3s ease-in-out infinite alternate;}
.arrow   { top: 50px; right: 100px; z-index: 1; width: 200px; }
.doodle  { top: 170px;  right: -14px; width: 300px; }

@keyframes slideIn {
    from {
      transform: translateX(-10px); /* Comienza a la izquierda */
    }
    to {
      transform: translateX(10px); /* Termina a la derecha */
    }
  }
/* Estado visible (cuando entra en viewport) */
.piece.show {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0);
}

/* delays escalonados */
.piece.circle.show  { transition-delay: 0.1s; }
.piece.orange.show  { transition-delay: 0.3s; }
.piece.yellow.show  { transition-delay: 0.5s; }
.piece.photo.show   { transition-delay: 0.7s; }
.piece.blue.show    { transition-delay: 0.9s; }
.piece.arrow.show    { transition-delay: 1s; }
.piece.doodle.show  { transition-delay: 1.1s; }

.image-group-about {
  position: relative;
  width: 100%;
  height: 600px;
}
.ball{
    animation: bounce 1.8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
.about  { top: 0; left: 0; width: 600px; }
.rectangle   { top: 17px; right: -50px; width: 395px; height: 190px; z-index: 1;}
.rectangle1  { top: 70px; right: 30px; width: 80px; z-index: 2; }
.rectangle2  { top: 95px; right: 40px; width: 70px; z-index: 2;}
.rectangle3   { bottom: 0px; right: 0px; width: 280px; z-index: 1;}
.rectangle4   { bottom: 134px; right: 113px; z-index: 1; width: 100px;}
.rectangle5  { bottom: 103px; right: 93px; width: 120px; z-index: 1;}
.rectangle6  { bottom: 115px; right: 73px; width: 140px; z-index: 1; }
.oval  { top: 56px; right: 200px; z-index: 2; width: 55px; animation-delay: 0s;}
.oval1   { top: 52px; right: 155px; z-index: 3; width: 65px; animation-delay: 0.2s;}
.oval2   { top: 52px; right: 115px; z-index: 4; width: 65px; animation-delay: 0.4s;}
.oval3  { bottom: 170px;  right: 170px; width: 45px; z-index: 2;}
.star  { bottom: 20px; right: 10px; width: 100px; animation: girar 15s linear infinite}
/* delays escalonados */
.piece.about.show  { transition-delay: 0.1s; }
.piece.rectangle.show  { transition-delay: 0.3s; }
.piece.rectangle1.show  { transition-delay: 0.5s; }
.piece.rectangle2.show   { transition-delay: 0.7s; }
.piece.rectangle3.show    { transition-delay: 0.3s; }
.piece.rectangle4.show    { transition-delay: 0.5s; }
.piece.rectangle5.show  { transition-delay: 0.7s; }
.piece.rectangle6.show  { transition-delay: 0.8s; }
.piece.oval.show   { transition-delay: 0.7s; }
.piece.oval1.show    { transition-delay: 0.9s; }
.piece.oval2.show    { transition-delay: 1s; }
.piece.oval3.show  { transition-delay: 0.8s; }
.piece.star.show  { transition-delay: 0.8s; }

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
/* ----- styles mobile ------ */

@media (min-width: 931px) and (max-width: 1480px) {
    .hero-text h1 {
        font-size: 54px;
        line-height: 58px;
    }

    .items-circle img {
        height: 120px;
    }

    .items-circle h4 {
        font-size: 26px;
        line-height: 32px;
    }
}

@media (max-width: 930px) {

    /* utilities */
    .version-desktop {
        display: none !important;
    }

    .version-mobile {
        display: block !important;
    }

    .pt-100 {
        padding-top: 0;
    }

    .pt-50 {
        padding-top: 0;
    }

    /* end utilities */
    nav ul.topnav {
        display: none;
    }

    nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0 20px;
        width: 100%;
    }

    nav ul.show-menu {
        display: block;
        position: absolute;
        top: 100px;
        background-color: #265BFF;
        z-index: 1;
        width: 100%;
        left: 0;
        box-sizing: border-box;
        padding: 0px 20px 16px 20px;
        transition: all ease 0.7s;
    }

    nav ul.show-menu li {
        display: block;
        padding: 16px 0px;
        font-size: 2rem;
        border-bottom: 1px solid #fff;
        width: 100%;
    }

    nav ul.show-menu li:last-child {
        border-bottom: none;
    }

    nav ul.show-menu li a:hover {
        border: none;
    }

    .menu-next {
        display: flex;
        justify-content: flex-end;
    }

    /* end nav menu */
    .hero-home {
        padding: 100px 20px;
        grid-template-columns: 1fr;
        height: auto;
        text-align: center;
    }

    .hero-text h1 {
        font-size: 50px;
        line-height: 56px;
    }

    .hero-text img {
        width: 120px;
        margin-top: -120px;
        margin-right: 0px;
    }

    .section-gray {
        padding: 50px 20px;
    }

    .section-gray-2 {
        padding: 100px 20px;
    }

    /* section 1 */
    .section-1 {
        display: flex;
        flex-direction: column-reverse;
    }
    .image-group {
    position: relative;
    width: 100%;
    height: 300px;
}
.circle  { top: -30px; left: 70px; width: 120px; z-index: 3; }
.photo   { top: 60px; left: 30px; width: 300px; z-index: 2;}
.orange  { top: 0; left: -13px; width: 300px; z-index: 1; }
.yellow  { top: 140px; left: 100px; width: 200px; z-index: 1; }
.blue    { top: -70px; right: 40px; width: 80px; animation: slideIn 3s ease-in-out infinite alternate;}
.arrow   { top: 20px;  right: 55px; z-index: 1; width: 160px; }
.doodle  { top: 90px; right: -14px; width: 180px; }

.image-group-about {
    position: relative;
    width: 100%;
    height: 450px;
}
.about  { top: 0; left: -40px; width: 400px; }
.rectangle   { top: 17px; right: 0px; width: 310px; height: 140px; z-index: 1;}
.rectangle1  { top: 55px; right: 70px; width: 60px; z-index: 2; }
.rectangle2  { top: 75px; right: 80px; width: 50px; z-index: 2;}
.rectangle3   { bottom: -30px; right: -9px; width: 260px; z-index: 1;}
.rectangle4   { bottom: 90px; right: 85px; z-index: 1; width: 100px;}
.rectangle5  { bottom: 65px;  right: 65px; width: 120px; z-index: 1;}
.rectangle6  { bottom: 75px; right: 45px; width: 140px; z-index: 1; }
.oval  { top: 44px; right: 200px; z-index: 2; width: 42px; animation-delay: 0s;}
.oval1   { top: 40px; right: 170px; z-index: 3; width: 50px; animation-delay: 0.2s;}
.oval2   { top: 40px; right: 145px; z-index: 4; width: 50px; animation-delay: 0.4s;}
.oval3  { bottom: 125px; right: 140px; width: 45px; z-index: 2;}
.star  { bottom: -15px; right: 15px; width: 100px; animation: girar 15s linear infinite}
    /* section card */
    .section-gray-2 {
        padding: 0px 20px 50px;
    }

    .card-circles {
        padding: 80px 20px 0;
    }

    .img-esquina-top {
        top: -45px;
        right: 0;
        left: 14px;
        width: 90px;
    }

    .img-esquina-bottom {
        bottom: -37px;
        left: auto;
        right: 16px;
        width: 90px;
    }

    .content-circles {
        grid-template-columns: 1fr;
        padding: 50px 0px;
    }

    /* section slider logos  */

    .logos-clientes h3 {
        padding-top: 25px;
    }
 .slider-home::before, .slider-home::after {
    width: 50px;
  }
   .slider-home .slide-logos {
    width: calc(210px * 12);}

    /* end section slider logos  */
    /* card pink */

    .card-pink {
        padding: 50px 0 0;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .content-card-pink h3 {
        font-size: 32px;
        line-height: 40px;
    }

    .link-contacto {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 32px;
        text-decoration: underline;
        color: #1A1A1A;
    }

    .Linkedin-logo {
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        margin-top: 20px;
    }

    .Linkedin-logo img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

    .img-card-pink {
        position: relative;
        height: 300px;
    }

    .img-card-pink img {
        width: 110%;
        position: relative;
        top: -56px;
        height: auto;
        margin: 0 auto;
        left: -19px;
        right: 0;
    }

    .img-final img {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }

    .list-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 20px;
    }

    .list-footer img {
        width: 90px;
        height: auto;
        object-fit: contain;
    }

    .list-footer ul {
        grid-template-columns: 1fr;
        column-gap: 30px;
        justify-content: left;
        row-gap: 10px;
        margin-top: 20px;
    }

    .list-footer ul li {
        padding: 0;
    }

    .section-footer {
        background: #f5f3ef;
    }

    .padding-footer {
        padding: 50px 0px 20px;
    }

    .footer-content {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 20px 20px;
    }

    .footer-content p {
        margin: 0;
        text-align: left;
    }

    .hero-image {
        padding-top: 30px;
    }

    .items-circle img {
        height: 120px;
    }

    .items-circle h4 {
        font-size: 26px;
        line-height: 32px;
    }
}

@media (min-width: 740px) and (max-width: 929px) {
    .hero-text h1 {
        font-size: 66px;
        line-height: 71px;
    }

    .content-circles {
        grid-template-columns: 1fr 1fr;
        padding: 50px 0px;
    }

    .content-card-pink h3 {
        font-size: 60px;
        line-height: 66px;
    }

    .img-card-pink {
        position: relative;
        height: 750px;
    }
        .image-group {
    position: relative;
    width: 100%;
    height: 500px;
}
.circle  { top: -30px; left: 145px; width: 180px; z-index: 3; }
.photo   { top: 100px; left: 100px; width: 500px; z-index: 2;}
.orange  { top: 0; left: 26px; width: 500px; z-index: 1; }
.yellow  { top: 180px; left: 100px; width: 400px}
.blue    { top: -45px; right: 50px; animation: slideIn 3s ease-in-out infinite alternate;}
.arrow   { top: 50px; right: 100px; z-index: 1; width: 200px; }
.doodle  { top: 170px;  right: -14px; width: 300px; }

.image-group-about {
    position: relative;
    width: 100%;
    height: 600px;
}
.about  { top: 0; left: 0; width: 600px; }
.rectangle   { top: 17px; right: -50px; width: 395px; height: 190px; z-index: 1;}
.rectangle1  { top: 70px; right: 30px; width: 80px; z-index: 2; }
.rectangle2  { top: 95px; right: 40px; width: 70px; z-index: 2;}
.rectangle3   { bottom: 0px; right: 0px; width: 280px; z-index: 1;}
.rectangle4   { bottom: 134px; right: 113px; z-index: 1; width: 100px;}
.rectangle5  { bottom: 103px; right: 93px; width: 120px; z-index: 1;}
.rectangle6  { bottom: 115px; right: 73px; width: 140px; z-index: 1; }
.oval  { top: 56px; right: 200px; z-index: 2; width: 55px; animation-delay: 0s;}
.oval1   { top: 52px; right: 155px; z-index: 3; width: 65px; animation-delay: 0.2s;}
.oval2   { top: 52px; right: 115px; z-index: 4; width: 65px; animation-delay: 0.4s;}
.oval3  { bottom: 170px;  right: 170px; width: 45px; z-index: 2;}
.star  { bottom: 20px; right: 10px; width: 100px; animation: girar 15s linear infinite}
}