:root {
  --woodsmoke: #1a1a1a;
  --jade: #00af70;
  --alabaster: #fcfcfc;
  --jaffa: #ff974a;
  --tango: #ff8830;
  --lily-white: #e6f7fe;
  --endeavour: #15529f;
  --off-green: #e6f7f1;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.body {
  color: var(--woodsmoke);
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
}

.container {
  max-width: 1440px;
}

.text-scrolling {
  grid-column-gap: 25px;
  display: flex;
}

.text-group {
  grid-column-gap: 25px;
  flex: none;
  display: flex;
}

.top-bar-content {
  background-color: var(--jade);
  color: var(--alabaster);
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
  padding: 15px 20px;
  overflow: hidden;
}

.logo {
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.nav-itemns {
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: stretch;
}

.phone-btn-nav {
  grid-column-gap: 15px;
  background-color: var(--jaffa);
  color: var(--alabaster);
  border-radius: 99px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.phone-btn-nav:hover {
  background-color: var(--tango);
}

.btn-text {
  margin-bottom: 3px;
}

.heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  line-height: 1;
}

.paragraph {
  margin-bottom: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

.paragraph.footer {
  font-size: 1rem;
  line-height: 1;
}

.navbar {
  justify-content: space-between;
  align-items: center;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
}

.banner-content {
  background-color: var(--jade);
  border-radius: 10px;
  align-items: flex-end;
  margin-left: 50px;
  margin-right: 50px;
  padding-top: 50px;
  display: flex;
  overflow: hidden;
}

.banner-itemns {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.banner-cta {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 3vw;
  display: flex;
}

.cta-text {
  max-width: 350px;
  grid-row-gap: 15px;
  color: var(--alabaster);
  flex-direction: column;
  display: flex;
}

.brand-content {
  background-color: #fcfcfc;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
}

.brand-itemns {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: end;
}

.whatsapp-btn-nav {
  grid-column-gap: 15px;
  background-color: var(--jade);
  color: var(--alabaster);
  border-radius: 99px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.whatsapp-btn-nav:hover {
  background-color: var(--tango);
}

.gas-btn {
  grid-column-gap: 15px;
  background-color: var(--jaffa);
  color: var(--alabaster);
  border-radius: 99px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.gas-btn:hover {
  background-color: var(--tango);
}

.products-content {
  margin-left: 50px;
  margin-right: 50px;
}

.desktop-products-itemns {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
}

.product-gas {
  grid-row-gap: 30px;
  background-image: url('../images/pedir-gas.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 125px 30px;
  display: flex;
  overflow: hidden;
}

.product-cta {
  max-width: 200px;
  grid-row-gap: 30px;
  color: var(--woodsmoke);
  flex-direction: column;
  display: flex;
}

.product-agua {
  grid-row-gap: 30px;
  background-image: url('../images/pedir-agua.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 30px;
  display: flex;
  overflow: hidden;
}

.maps-text {
  grid-row-gap: 30px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.maps-heading {
  grid-row-gap: 30px;
  flex-direction: column;
  align-items: center;
}

.maps-paragraph {
  width: 570px;
}

.goolge-maps {
  margin-top: 50px;
  overflow: hidden;
}

.mobile-products-itemns {
  display: none;
}

.mob-product-cta {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 5vw;
  display: flex;
}

.mob-product-cta-text {
  grid-row-gap: 30px;
  color: var(--alabaster);
  flex-direction: column;
  display: flex;
}

.copyright-content {
  margin-left: 50px;
  margin-right: 50px;
}

.cipyright-itemns {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: stretch;
}

.social {
  padding-top: 25px;
  padding-bottom: 25px;
  display: flex;
}

.social-link {
  color: var(--jaffa);
  justify-content: center;
  align-items: center;
  padding: 5px;
  text-decoration: none;
  display: flex;
}

.link {
  color: var(--woodsmoke);
  text-decoration: none;
}

.medium {
  font-weight: 700;
}

.copy-paragraph, .credit-paragraph {
  padding-top: 25px;
  padding-bottom: 25px;
}

.maps-content {
  background-color: #fcfcfc;
  border-radius: 10px;
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
  padding: 50px;
}

.cta-buttons {
  grid-column-gap: 10px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-itemns {
    flex: 1;
    grid-template-columns: 1fr;
  }

  .heading {
    line-height: 1;
  }

  .banner-itemns {
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
  }

  .banner-cta {
    grid-row-gap: 20px;
    text-align: center;
    align-items: center;
    padding-left: 0;
  }

  .banner-img {
    display: flex;
  }

  .cta-text {
    width: 70%;
    grid-row-gap: 20px;
  }

  .image {
    object-fit: cover;
    flex: 1;
    padding-left: 30px;
  }

  .gas-btn {
    display: flex;
  }

  .products-content {
    border-radius: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    display: flex;
    overflow: hidden;
  }

  .desktop-products-itemns {
    grid-template-columns: 1fr;
    display: none;
  }

  .product-gas {
    flex-direction: column;
  }

  .product-cta {
    width: 70%;
  }

  .mobile-products-itemns {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    display: flex;
  }

  .mob-product-gas {
    background-image: url('../images/mob-gas.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    overflow: hidden;
  }

  .mob-product-cta {
    text-align: center;
    align-items: center;
    padding-left: 0;
  }

  .mob-product-cta-text {
    width: 70%;
    color: var(--woodsmoke);
    text-align: center;
    align-items: center;
  }

  .mob-product-img {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .mob-product-agua {
    background-image: url('../images/mob-agua.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    overflow: hidden;
  }

  .cta-buttons {
    align-items: center;
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .top-bar-content, .navbar, .banner-content {
    margin-left: 10px;
    margin-right: 10px;
  }

  .cta-text {
    width: 350px;
  }

  .brand-content {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .brand-itemns {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    grid-template-columns: 1fr 1fr;
  }

  .products-content {
    margin-left: 10px;
    margin-right: 10px;
  }

  .product-gas {
    padding-left: 15px;
    padding-right: 15px;
  }

  .product-cta {
    width: 350px;
  }

  .product-agua {
    padding-left: 15px;
    padding-right: 15px;
  }

  .maps-paragraph {
    width: 100%;
  }

  .mobile-products-itemns {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .mob-product-cta-text {
    width: 350px;
    grid-row-gap: 10px;
    margin-bottom: 25px;
  }

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

  .cipyright-itemns {
    grid-row-gap: 15px;
    grid-template-columns: 1fr;
  }

  .social {
    padding-top: 0;
    padding-bottom: 0;
  }

  .copy-paragraph {
    padding-top: 25px;
    padding-bottom: 0;
  }

  .credit-paragraph {
    padding-top: 0;
    padding-bottom: 25px;
  }

  .maps-content {
    margin-left: 10px;
    margin-right: 10px;
    padding: 25px;
  }
}

@media screen and (max-width: 479px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .top-bar-content {
    margin-top: 10px;
  }

  .heading {
    font-size: 2.5rem;
  }

  .cta-text {
    width: 100%;
  }

  .image {
    padding-left: 15px;
  }

  .brand-content {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .brand-itemns {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
  }

  .product-gas {
    background-position: 0 100%;
  }

  .product-cta, .maps-paragraph {
    width: 100%;
  }

  .mob-product-cta-text {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .copyright-content {
    text-align: center;
  }

  .copy-paragraph {
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    display: flex;
  }

  .credit-paragraph {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .maps-content {
    margin-top: 25px;
    padding-top: 50px;
  }
}

#w-node-_533aba1b-faf8-394b-5adb-ad13c443176c-88354d09 {
  justify-self: start;
}

#w-node-_6c6cde5c-af1a-d830-4599-a4416f05be9d-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-f6d88d3b-7cdc-0379-5a0d-847fe54935bd-88354d09 {
  justify-self: start;
}

#w-node-_19b469e0-083f-cbd5-7260-6a32257f478d-88354d09 {
  justify-self: end;
}

#w-node-ba656d80-3c11-a950-8c0f-f977e80d3872-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f0be4052-9307-3b4c-6d2a-348333346b40-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-c716d559-4b10-0592-d27c-1e04bbd5e11a-88354d09, #w-node-db698047-da92-c710-a3be-e08b7afc2fb1-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: stretch;
  justify-self: stretch;
}

#w-node-b6aaf648-5ff2-6f2e-3ee0-57049377a53d-88354d09 {
  justify-self: start;
}

#w-node-afdb2bb0-0b54-eb0d-49fe-ef85a5ba1626-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: start;
}

#w-node-e392bce4-a16c-1646-27fe-711db2540ab9-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-cea23134-caa0-ff2a-8abb-fa83069bb756-88354d09 {
  justify-self: end;
}

#w-node-_4443ab05-ef0f-11f2-654c-146a245a8d7f-88354d09 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

@media screen and (max-width: 991px) {
  #w-node-_533aba1b-faf8-394b-5adb-ad13c443176c-88354d09 {
    justify-self: center;
  }

  #w-node-_845d0a96-c27b-59f9-5b3f-4f8a9c6c8aec-88354d09, #w-node-aadd70ea-8515-7aa8-51d5-c676044ac131-88354d09 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 767px) {
  #w-node-b6aaf648-5ff2-6f2e-3ee0-57049377a53d-88354d09 {
    justify-self: center;
  }

  #w-node-afdb2bb0-0b54-eb0d-49fe-ef85a5ba1626-88354d09 {
    align-self: center;
    justify-self: center;
  }

  #w-node-cea23134-caa0-ff2a-8abb-fa83069bb756-88354d09, #w-node-_4443ab05-ef0f-11f2-654c-146a245a8d7f-88354d09 {
    justify-self: center;
  }
}

@media screen and (max-width: 479px) {
  #w-node-b6aaf648-5ff2-6f2e-3ee0-57049377a53d-88354d09, #w-node-cea23134-caa0-ff2a-8abb-fa83069bb756-88354d09 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}