@font-face {

  font-family: "Klavika";

  src: url("../fonts/klavika-medium-webfont.woff2") format("woff2");

}

@font-face {

  font-family: "ClearSans";

  src: url("../fonts/ClearSans-Regular.ttf") format("truetype");

  src: url("../fonts/ClearSans-Light.ttf") format("truetype");

}

.material-symbols-outlined {

  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;

}



body {

  min-height: 100vh;

  width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

}

*,

*:after,

*:before {

  box-sizing: border-box;

}



/* ++++++++++++++++++ Menu en horizontal ++++++++++++++++++*/

#menu {

  top: 20px;

  right: 70px;

  align-items: center;

  position: absolute;

  border-radius: 10px;

  z-index: 1;

  width: 90%;

  background-color: #65b32e;

  display: flex;

  justify-content: space-between;

  padding: 5px;

}



#menu div.logo {

  display: flex;

  justify-content: space-around;

  height: 50px;

  text-decoration: none;

  width: 200px;

  margin: 0px 10px;

}



#menu ul {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  margin: 0px 10px;

  padding: auto;

}



#menu li {

  margin: 0px 5px;

  border-right: 1px solid #fff;

  height: 35px;

  padding-right: 1rem;

  display: flex;

  align-items: center;

}

#menu li:nth-last-child(1) {

  border-right: none;

}



#menu a {

  font-family: "ClearSans", sans-serif;

  font-weight: 100;

  font-size: 16px;

  color: #fff;

  text-decoration: none;

  width: auto;

  padding: 10px 10px;

  border-radius: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

  line-height: 1em;

  text-align: initial;

}

#menu a:hover {

  background-color: #589b28;

  width: auto;

  padding: 10px 10px;

}



/* Banner superior */

.banner-home {

  background-image: url(../img/webp/arquitecto.webp);

  width: 100%;

  height: 500px;

  background-repeat: no-repeat;

  position: relative;

  background-size: cover;

  display: flex;

  justify-content: center;

  align-items: center;

}

@media (max-width: 768px) {

  .banner-home {

    background-position: center;

    height: 430px;

    align-items: flex-end;

  }

}



.titulo-banner {

  font-family: "Klavika";

  color: #fff;

  font-size: 50px;

}

@media (max-width: 768px) {

  .titulo-banner {

    font-size: 60px;

    line-height: 0.9em;

    text-align: center;

  }



  .titulo-banner h1 {

    font-size: 60px;

   

  }



  .margin-inferior-titulo {

    margin-bottom: 50px;

  }

}



/* ++++++++++++++++++ menu en vertical ++++++++++++++++++ */

#menu.vertical {

  padding: 0px;

  width: 50px;

  right: 10px;

  position: fixed;

  margin: 0px 0px;

  top: 50px;

  z-index: 2;

}



#menu.vertical ul {

  background-color: #65b32e;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  flex-wrap: nowrap;

  list-style: none;

  margin: 0;

  padding: 0.25rem;

}



#menu.vertical li {

  margin: 8px 0;

  border-right: none;

  border-bottom: 1px solid #fff;

  padding-right: 0;

  display: flex;

  align-items: center;

}



#menu.vertical li:nth-last-child(1) {

  border-bottom: none;

}



#menu.vertical a {

  border-radius: 8px;

  color: #fff;

  height: 3rem;

  &:hover,

  &:focus,

  &.active {

    background-color: #6cbe31;

    outline: 0;



    span {

      transform: scale(1);

      opacity: 1;

    }

  }



  i {

    font-size: 1.375rem;

  }



  span {

    background-color: #65b32e;

    border-radius: 6px;

    right: calc(100% + 1.5rem);

    padding: 0.5rem 1rem;

    position: absolute;

    opacity: 0;

    transform-origin: center right;

    transform: scale(0);

    transition: 0.15s ease;

    white-space: nowrap;

    &:before {

      content: "";

      display: block;

      width: 12px;

      height: 12px;

      position: absolute;

      background-color: #65b32e;

      right: -5px;

      top: 50%;

      transform: translatey(-50%) rotate(45deg);

      border-radius: 3px;

    }

  }

}

#menu.vertical a:hover {

  background-color: #65b32e;

  text-decoration: none;

}



@keyframes scale {

  0% {

    transform: scale(0);

  }

  100% {

    transform: scale(1);

  }

}

#menu.vertical div.logo {

  display: none;

}



#burger-menu div.logo2 {

  display: none;

}



/* ++++++++++++++++++ Menu en movil ++++++++++++++++++ */

@media (max-width: 768px) {

  .barra-burger-menu {

    background-color: #65b32e;

    width: 100%;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: fixed;

    z-index: 3;

  }



  #burger-menu {

    cursor: pointer;

    height: 27px;

    width: 27px;

    margin: 20px;

    overflow: visible;

    position: relative;

    z-index: 2;



    span,

    span:before,

    span:after {

      background: #fff;

      display: block;

      height: 2px;

      opacity: 1;

      position: absolute;

      transition: 0.3s ease-in-out;

    }



    span:before,

    span:after {

      content: "";

    }



    /* TOP */

    span:before {

      left: 0px;

      top: -10px;

      width: 27px;

    }



    /* MIDDLE */

    span {

      right: 0px;

      top: 13px;

      width: 27px;

    }



    /* BOTTOM */

    span:after {

      left: 0px;

      top: 10px;

      width: 27px;

    }



    /* ROTATION ON CLICK */

    &.close {

      span:before {

        top: 0px;

        transform: rotate(90deg);

        width: 27px;

      }



      span {

        transform: rotate(-45deg);

        top: 13px;

        width: 27px;

      }



      span:after {

        top: 0px;

        left: 0;

        transform: rotate(90deg);

        opacity: 0;

        width: 0;

      }

    }

  }



  #burger-menu div.logo2 {

    display: flex;

    position: absolute;

    top: -11px;

    left: 28vw;

    width: 40px;

    height: 46px;

    cursor: default;

  }



  #menu {

    z-index: 1;

    width: 100%;

    min-height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    height: 0;

    visibility: hidden;

    opacity: 0;

    text-align: center;

    padding-top: 20px;

    transition: all 0.3s ease-in-out;



    &.overlay {

      visibility: visible;

      display: flex;

      justify-content: center;

      align-items: flex-start;

      opacity: 1;

      background: #65b32e;

    }



    ul {

      padding: 0;

      display: flex;

      flex-direction: column;

      align-items: flex-start;

      width: 100%;

      margin-top: 80px;

    }



    li {

      display: flex;

      align-items: center;

      border: none;

      width: 100%;

      height: 80px;

    }



    a {

      color: #fff;

      display: block;

      font-size: 30px;

      margin-bottom: 30px;

      text-decoration: none;

    }

  }

  #menu a:hover {

    background-color: #589b285d;

    width: auto;

    padding: 10px 10px;

  }

  #menu div.logo {

    display: none;

  }



  #menu.vertical {

    display: none;

  }

}



@media (max-width: 768px) {

  .salto-linea {

    display: none;

  }

}



/* ++++++++++++++++++ Contenido principal ++++++++++++++++++ */

main.content {

  background-color: rgb(255, 255, 255);

  display: flex;

  flex-direction: column;

  height: auto;

  margin-top: 30px;

  margin-bottom: 80px;

  align-items: center;

  width: 100%;

}

@media (max-width: 768px) {

  main.content {

    margin-bottom: 30px;

  }

}



div.content-title {

  align-items: center;

  display: flex;

  height: 100px;

  justify-content: center;

  margin: 20px 0px;

  width: auto;

  font-family: "Klavika";

}

div.content-title p.title {

  color: #182828;

  font-size: 80px;

}

@media (max-width: 768px) {

  div.content-title {

    height: auto;

    margin: 0px 0px 20px 0px;

  }

  div.content-title p.title {

    font-size: 45px;

    margin: 0px;

    text-align: center;

    line-height: 0.9em;

  }

}



section.contain-cards {

  display: flex;

  height: 130px;

  justify-content: center;

  flex-direction: row;

  margin-top: 20px;

  width: 100%;

}

@media (max-width: 768px) {

  section.contain-cards {

    flex-direction: column;

    height: auto;

    align-items: center;

    margin-top: 0px;

  }

}

section.contain-cards article.card {

  display: flex;

  align-items: center;

  flex-direction: row;

  width: 35%;

  height: auto;

  padding: 20px;

  background-color: #f2f3f4;

  border-radius: 10px;

  margin: 0px 10px;

}

@media (max-width: 768px) {

  section.contain-cards article.card {

    width: 90%;

    box-sizing: border-box;

    margin: 10px 0px;

  }

}

article.card img.card-img {

  width: 91px;

  height: 91px;

}

article.card p.card-text {

  display: flex;

  justify-content: space-between;

  margin-left: 30px;

  font-family: "ClearSans", sans-serif;

  width: auto;

  height: auto;

  line-height: 1.1em;

  color: #182828;

}

@media (max-width: 768px) {

  article.card p.card-text {

    margin: 0px 0px 0px 20px;

  }

}



/* ++++++++++++++++++ contenido del Footer(pie de pagina) ++++++++++++++++++ */

.footer {

  align-items: center;

  background-color: #182828;

  border-radius: 20px;

  display: flex;

  flex-direction: row;

  font-family: "ClearSans", sans-serif;

  font-size: 14px;

  height: 150px;

  font-weight: 100;

  justify-content: space-around;

  margin: auto;

  margin-top: 30px;

  margin-bottom: 20px;

  width: 90%;

}

@media (max-width: 768px) {

  .footer {

    flex-direction: column;

    height: auto;

    align-items: center;

  }

}



section.links {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 25%;

  padding: 0px;

}

@media (max-width: 768px) {

  section.links {

    width: 100%;

  }

}



section.links nav.links-nav {

  width: 100%;

}

nav ul.links-nav-ul {

  list-style-type: none;

  padding: 0;

  display: flex;

  justify-content: center;

  flex-direction: column;

}

nav ul li {

  margin: 0 10px;

  display: flex;

  margin-left: 80px;

}

@media (max-width: 768px) {

  nav ul li {

    margin: auto;

  }

}

nav ul li a {

  color: #fff;

  text-decoration: none;

  line-height: 1.3em;

}

nav ul li a:hover {

  color: #ccc;

}



section.address {

  width: 25%;

  font-size: 16px;

  color: #fff;

  display: flex;

  text-decoration: none;

  align-items: start;

  flex-direction: column;

  justify-content: center;

  padding: 0px 30px;

  margin: 0px 30px;

}

.address-title,

.address-email,

.address-number {

  margin: 2px 0px;

  width: 100%;

}



.address-number a {

  text-decoration: none;

  color: white;

  transition: all 0.3s;

}



.address-number a:hover {

  color: #589b28;

}



.address-email a {

  text-decoration: none;

  color: white;

  transition: all 0.3s;

}



.address-email a:hover {

  color: #589b28;

}



@media (max-width: 768px) {

  section.address {

    width: 100%;

    text-align: center;

  }

  .address-title,

  .address-email,

  .address-number {

    margin: 0px;

  }

}



section.social {

  width: 25%;

  font-size: 16px;

  color: #fff;

  display: flex;

  text-decoration: none;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  text-align: center;

}



section.social ul a {

  color: white;

  text-decoration: none;

  transition: all 0.3s;

}



section.social ul a:hover i {

  color: #589b28;

}



section.social ul a i {

  font-size: 2.5vw;

  transition: all 0.3s;

}



@media (max-width: 768px) {

  section.social {

    margin-top: 10px;

    margin-bottom: 10px;

    width: 100%;

  }



  section.social ul {

	display: flex;

	gap: 2vw;

  }



  section.social ul a i {

	font-size: 6vw;

  }

}

section.social ul {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 0px;

  width: auto;

}

section.social ul a {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 5px;

  width: auto;

  height: 15px;

  border: 0;

}



section.logo-footer {

  display: flex;

  width: 25%;

  height: 70%;

  justify-content: center;

  border-radius: 10px 10px;

  margin-top: -45px;

}

@media (max-width: 768px) {

  section.logo-footer {

    margin-top: 0px;

  }

}



section.logo-footer .logof {

  border-bottom-left-radius: 15px;

  border-bottom-right-radius: 15px;

}

@media (max-width: 768px) {

  section.logo-footer .logof {

    height: 110px;

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

    border-bottom-left-radius: 0px;

    border-bottom-right-radius: 0px;

  }

}



.icon-color-footer {

  width: 40px;

  height: auto;

}



a.float-whatsapp {

  position: fixed;

  width: 60px;

  height: 60px;

  bottom: 30px;

  right: 30px;

  background-color: #25d366;

  color: #fff;

  border-radius: 50px;

  text-align: center;

  font-size: 30px;

  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);

  z-index: 0;

  display: flex;

  justify-content: center;

  align-items: center;

}



.my-float {

  width: 30px;

}