h1 {
font-size: 96px;
line-height: 110%;
}

@media only screen and (max-width: 768px) {
  h1 {
font-size: 64px;
  }
}

@media only screen and (max-width: 375px) {
  h1 {
font-size: 56px;
  }
}

h2 {
font-size: 64px;
line-height: 120%;
}

@media only screen and (max-width: 768px) {
  h2 {
font-size: 40px;
  }
}

h3 {
font-size: 48px;
line-height: 120%;
}

@media only screen and (max-width: 375px) {
  h3 {
font-size: 32px;
  }
}

h4 {
font-size: 36px;
line-height: 120%;
}

@media only screen and (max-width: 768px) {
  h4 {
font-size: 26px;
  }
}

h5 {
font-size: 24px;
line-height: 120%;
}

@media only screen and (max-width: 375px) {
  h5 {
font-size: 20px;
line-height: 130%;
  }
}

h6 {
font-size: 20px;
line-height: 120%;
letter-spacing: 0.2px;
}

p {
font-size: 16px;
line-height: 130%;
letter-spacing: -0.16px;
}

.navbar {
display: flex;
padding: 24px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid var(--gray-stroke, #DFDFDF);
}

@media only screen and (max-width: 768px) {
.navbar {
padding: 24px 16px;
  }
}

.navbar .container {
display: flex;
width: 100%;
max-width: 1313px;
justify-content: space-between;
align-items: center;
align-self: stretch;
flex: 1 0 0;
padding: 0px;
}

.navbar .container .logo {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
}

.navbar .container .items {
display: flex;
justify-content: center;
align-items: center;
gap: 42px;
}

@media only screen and (max-width: 992px) {
.items {
display: none !important;
  }
}

.navbar .container .ctas {
display: flex;
align-items: center;
gap: 24px;
}

.sub-navbar {
display: flex;
padding: 24px 32px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid var(--gray-stroke, #DFDFDF);
}

.sub-navbar .container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
gap: 24px;
flex-wrap: wrap;
}

@media only screen and (max-width: 992px) {
.sub-navbar .container {
gap: 12px;
  }
}

.hero {
display: flex;
padding: 100px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
margin: 0px;
}

@media only screen and (max-width: 768px) {
.hero {
padding: 25px 16px 50px;
  }
}

.hero .container {
display: flex;
max-width: 1040px;
padding: 0px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 32px;
align-self: stretch;
}

.hero .container .tags {
display: flex;
align-items: flex-start;
align-content: flex-start;
gap: 12px;
flex-wrap: wrap;
}

.hero .container .tags p {
display: flex;
padding: 16px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
background: var(--soft-gray, #F5F5EF);
}

.hero-relative {
position: relative;
display: inline-block;
}

@media only screen and (max-width: 576px) {
.hero-relative {
display: none !important;
visibility: hidden;
  }
}

.hero h1 {
overflow: hidden;
}

.hero-img-icon {
position: absolute;
top: 0px;
left: 590px;
transform: translateX(-50%);
}

@media only screen and (max-width: 768px) {
.hero-img-icon {
position: absolute;
top: 10px;
left: 400px;
transform: translateX(-50%);
width: 100px;
height: 100px;
  }
}

@media only screen and (max-width: 576px) {
.hero-img-icon {
display: none !important;
visibility: hidden;
  }
}

.banner-img {
display: flex;
min-height: 580px;
padding: 100px 16px;
flex-direction: column;
align-items: center;
align-self: stretch;
background: url("https://booston.dev/assets/imgs/hero-home.jpg") center center / cover no-repeat;
}

@media only screen and (max-width: 768px) {
.banner-img {
padding: 50px 16px;
  }
}

.banner-img .container {
display: flex;
max-width: 1040px;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
row-gap: 24px;
align-self: stretch;
flex-wrap: wrap;
}

.banner-img .container .text-left {
min-width: 370px;
max-width: 370px;
flex: 1 0 0;
}

.banner-img .container .text-right {
min-width: 370px;
max-width: 370px;
flex: 1 0 0;
}

.title-1 {
display: flex;
padding: 100px 16px 50px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
gap: 48px;
}

@media only screen and (max-width: 768px) {
.title-1 {
padding: 50px 16px 25px;
gap: 24px;
  }
}

.title-1 .container {
display: flex;
max-width: 1040px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
}

.title-1 .container-2 {
display: flex;
flex-direction: row;
max-width: 300px;
padding: 12px 24px;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
border-radius: 10px;
border: 1px solid #DFDFDF;
}

.details {
display: flex;
padding: 100px 16px 50px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
gap: 48px;
}

@media only screen and (max-width: 768px) {
.details {
padding: 42px 16px;
gap: 24px;
  }
}

.details .container {
display: flex;
max-width: 1040px;
width: 100%;
padding: 0px;
flex-direction: column;
align-items: flex-start;
gap: 48px;
align-self: stretch;
}

@media only screen and (max-width: 768px) {
.details .container {
gap: 24px;
  }
}

.details .container a {
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
}

.services {
display: flex;
padding: 50px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
gap: 32px;
}

@media only screen and (max-width: 768px) {
.services {
padding: 25px 16px;
  }
}

.services .container {
display: flex;
max-width: 1040px;
align-items: flex-start;
gap: 32px;
padding: 0px;
align-self: stretch;
}

@media only screen and (max-width: 576px) {
.services .container {
flex-direction: column;
  }
}

.services .container .card {
display: flex;
width: 100%;
height: 321px;
padding: 32px 60px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 10px;
flex: 1 0 0;
border-radius: 30px;
background-color: #F5F5EF;
}

@media only screen and (max-width: 768px) {
.services .container .card {
padding: 32px;
  }
}

.services .container .card img {
height: 180px;
}

@media only screen and (max-width: 576px) {
.services .container .card .img {
height: 120px;
  }
}

.services .container .card .cta {
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
}

.background-red {
background-color: red;
}

.no-style {
text-decoration: none;
}

.portfolio {
display: flex;
padding: 50px 0px 100px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
gap: 48px;
}


.portfolio .trabajos {
display: flex;
width: auto;
flex-direction: row;
overflow: hidden;
justify-content: center;
align-items: center;
align-self: stretch;
}

@media (max-width: 768px) {
.portfolio .trabajos {
height: 174px;
        }
      }

.portfolio .trabajos  img {
border-radius: 20px;
display: inline;
margin-right: 32px;
position:relative;
animation: mymove 90s infinite alternate-reverse both;
}

@media (max-width: 768px) {
.portfolio .trabajos  img {
height: 174px;
        }
      }

@keyframes mymove {
  from {transform: translateX(0);}
  to {transform: translateX(-1000%)}
}

.numbers {
display: flex;
padding: 100px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
background-color: #F5F5EF;
}

@media only screen and (max-width: 768px) {
.numbers {
padding: 50px 16px;
  }
}

.numbers .container {
display: flex;
max-width: 1312px;
width: 100%;
padding: 0px;
align-items: center;
gap: 48px;
}

@media only screen and (max-width: 1200px) {
.numbers .container {
flex-direction: column;
  }
}

.numbers .container .left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
}

.numbers .container .right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
flex: 1 0 0;
}

@media only screen and (max-width: 1200px) {
.numbers .container .right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
align-self: stretch;
  }
}

@media only screen and (max-width: 768px) {
.numbers .container .right {
flex-direction: column;
  }
}

.numbers .container .right .card {
display: flex;
min-width: 380px;
padding: 32px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
border-radius: 30px;
background-color: #FDFDF7;
}

@media only screen and (max-width: 1200px) {
.numbers .container .right .card {
align-self: stretch;
min-width: 80px;
  }
}

.numbers .container .right .card .title {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}

.llamado {
display: flex;
padding: 100px 16px 150px;
flex-direction: column;
align-items: center;
align-self: stretch;
}

.llamado .container {
display: flex;
max-width: 1040px;
padding: 0px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 48px;
align-self: stretch;
}

.llamado .container .buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.llamado .container .buttons a {
display: flex;
padding: 16px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
background-color: #0096F7;
text-decoration: none;
}

.llamado .container .buttons .secondary {
display: flex;
padding: 16px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
border: 1px solid #DFDFDF;
background-color: #F5F5EF;
color: #737373;
}

.footer {
display: flex;
padding: 80px 24px;
flex-direction: column;
align-items: center;
justify-content: center;
border-top: 1px solid #DFDFDF;
background: #FFF;
}

@media only screen and (max-width: 768px) {
.footer {
padding: 80px 24px;
  }
}

@media only screen and (max-width: 375px) {
.footer {
padding: 64px 24px;
  }
}

.footer-container {
display: flex;
max-width: 1200px;
width: 100%;
justify-content: space-between;
align-items: center;
flex-direction: row;
}

@media only screen and (max-width: 768px) {
.footer-container {
flex-direction: column;
gap: 32px;
  }
}

.footer-right-elements {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
}

@media only screen and (max-width: 768px) {
.footer-right-elements {
flex-direction: column;
gap: 24px;
  }
}

.power {
display: flex;
padding: 80px 24px 120px;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F7F7F7;
border-top: 1px solid #DFDFDF;
}

.power-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 16px;
}

@media only screen and (max-width: 768px) {
.power {
padding: 80px 24px 120px;
  }
}

@media only screen and (max-width: 375px) {
.power {
padding: 64px 24px 80px;
  }
}

.banner-img {
display: flex;
padding: 100px 24px 100px;
flex-direction: column;
align-items: center;
align-self: stretch;
} 

.no-style {
text-decoration: none;
}