body {
  font-family: "TikTok Sans", sans-serif;
}

.container {
  width: 1250px;
  margin: 0px auto;
}

/* =================================================
====================================================
-------------- H  O  M  E   P  A  G  E -------------
====================================================
====================================================*/

/* ------------------------------------
----------- H  E  A  D  E  R ----------
-------------------------------------*/

header {
  display: flex;
  background-color: white;
  position: sticky;
  top: 0px;
  height: 80px;
}

.navbar {
  display: flex;
  justify-content: space-around;
}

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

.logo {
  width: 140px;
}

.linkNavBar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.linkNavBar a {
  text-decoration: none;
  font-size: 14px;
  color: black;
}

.linkNavBar a:active {
  color: #819c4b;
  font-weight: 700;
}

.linkNavBar a:hover {
  color: #819c4b;
}

.linkNavBar a:focus {
  font-weight: bold;
  color: #819c4b;
}

.buttonToCall {
  display: flex;
  align-items: center;
}

.buttonToCall a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 110px;
  height: 40px;
  font-family: "TikTok Sans", sans-serif;
  font-size: 15px;
  border-radius: 5px;
  border-style: none;
  background-color: #323b20;
  color: white;
}

.buttonToCall a:hover {
  background-color: #819c4b;
}

/* ------------------------------------
----------- H  E  R  O ----------
-------------------------------------*/

.hero {
  display: flex;
  background-color: #f6f4ee;
  height: 600px;
}

.heroSection {
  display: flex;
  gap: 50px;
}

.heroContentLeft {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-self: center;
  gap: 20px;
}

.heroContentLeftDesc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.heroContentLeftDesc h1 {
  font-size: 35px;
  font-weight: 800;
}

.heroContentLeftDesc h1 > span {
  color: #819c4b;
}

.heroContentLeftDesc p {
  font-size: 17px;
  color: rgb(99, 99, 99);
  line-height: 1.4;
}

.heroContentLeftDesc p > span {
  font-weight: bold;
}

.heroContentLeftButton {
  display: flex;
  gap: 15px;
}

.heroContentLeftButton a:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 60px;
  background-color: #323b20;
  border-radius: 8px;
  color: white;
  text-decoration: none;
}

.heroContentLeftButton a:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid #819c4b;
  color: #819c4b;
  text-decoration: none;
}

.heroContentLeftSmall {
  display: flex;
  gap: 20px;
}

.heroContentLeftSmall p {
  font-size: 13px;
}

.fa-clock {
  color: #819c4b;
  font-size: 13px;
}

.fa-check {
  color: #819c4b;
  font-size: 13px;
}

.fa-handshake-simple {
  color: #819c4b;
  font-size: 13px;
}

.heroContentRight {
  display: flex;
  width: 50%;
}

.heroContentRightCard {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 585px;
  height: 350px;
  border-radius: 20px;
  background-color: white;
  justify-content: center;
  align-self: center;
  align-items: center;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.1);
}
.heroContentRightCard h2 {
  font-weight: 760;
  font-size: 25px;
}
.heroContentRightCard span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  width: 515px;
  height: 40px;
  background-color: #f5f3ed;
  border-radius: 5px;
  font-weight: bold;
}

.heroContentRightCard span > p {
  color: #819c4b;
}

.fa-lightbulb {
  font-size: 45px;
  color: #819c4b;
}

/* ------------------------------------
----------- O  U  R   S  T  O  R  Y ----------
-------------------------------------*/

.ourStory {
  height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.storyContentRight {
  display: flex;
  width: 60%;
  flex-direction: column;
  align-self: center;
  gap: 30px;
}

.storyContentRight h2 {
  font-size: 35px;
  font-weight: bold;
}

.storyContentRight p > span {
  color: #819c4b;
  font-weight: bold;
}

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

.avatarStoryContent img {
  width: 400px;
}

/* ------------------------------------
----------- O  U  R   S  E  R  V  I  C  E  S ----------
-------------------------------------*/

.servicesSection {
  display: flex;
  height: 500px;
  background-color: #f5f3ed;
}

.servicesMainDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.servicesMainDiv h2 {
  font-size: 35px;
  font-weight: bold;
}

.serviceSectionTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.servicesSectionCards {
  display: flex;
  gap: 10px;
}

.seriveCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  border: 0.3px solid #f5f3ed;
  width: 300px;
  height: 230px;
}

.seriveCard:hover {
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  zoom: 102%;
}

.seriveCard h3 {
  color: black;
  font-weight: 650;
  font-size: 17px;
}

.seriveCard p {
  text-align: center;
  color: rgb(99, 99, 99);
}

.iconFirstCard {
  width: 35px;
}

.servicesButton {
  margin-top: 20px;
}

.servicesButton a {
  background-color: #819c4b;
  text-decoration: none;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.servicesButton a:hover {
  background-color: #323b20;
  zoom: 105%;
}

/* ------------------------------------
----------- T  E  S  T  I  M  O  N  I  E  S ----------
-------------------------------------*/

.testimonies {
  display: flex;
  height: 500px;
  background-image: url(/assets/img/main-tenant-guillemet.jpg);
  background-size: cover;
  background-position: center;
}

.testimoniesMainDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.testimoniesMainDiv h3 {
  font-size: 35px;
  font-weight: bold;
}

.testimoniesTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.testimoniesDivScroll {
  display: flex;
  gap: 15px;
}

.testimoniesCard {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #f6f4ee;
  gap: 8px;
  width: 300px;
  height: 280px;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px rgba(233, 233, 233, 0.1);
  opacity: 0.9;
}

.testimoniesCard blockquote {
  color: rgb(99, 99, 99);
  text-align: center;
}

.testimoniesCard small {
  color: black;
  font-weight: 500;
}
.fa-star {
  color: #819c4b;
  font-size: 21px;
}

/* ------------------------------------
----------- C  O  N  T  A  C  T   F  O  R  M ----------
-------------------------------------*/

.contactAndMapSection {
  display: flex;
  background-color: #f6f4ee;
  height: 600px;
}

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

.mapCard iframe {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1;
}

.contactCard {
  display: flex;
  height: 85%;
  width: 80%;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  padding-left: 25px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 5px 5px rgba(146, 146, 146, 0.1);
}

.contactTitle {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 5px;
}

.contactCard h3 {
  font-size: 35px;
  font-weight: bolder;
  color: #323b20;
}

.formInputEnd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.formInputEnd input {
  width: 80% !important;
}
.formInputEnd textarea {
  padding: 13px;
  width: 80%;
  height: 100px;
  font-family: "TikTok Sans", sans-serif;
  font-size: 15px;
  border-radius: 7px;
  border-style: none;
  border: 1px solid #d3d3d3;
}

.contactCard input {
  padding: 13px;
  width: 40%;
  height: 45px;
  font-family: "TikTok Sans", sans-serif;
  font-size: 15px;
  border-radius: 7px;
  border-style: none;
  border: 1px solid #d3d3d3;
}

.contactCard input:focus {
  outline: none;
}

.contactCard textarea:focus {
  outline: none;
}

.endFormContactCard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 80%;
}

.endFormContactCard button {
  height: 38px;
  width: 140px;
  border-style: none;
  border-radius: 8px;
  background-color: #819c4b;
  color: white;
  font-family: "TikTok Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.endFormContactCard p {
  font-size: 12px;
  font-style: italic;
}

.endFormContactCard a {
  text-decoration: none;
}

/* ------------------------------------
----------- F  O  O  T  E  R   S  E  C  T  I  O  N ----------
-------------------------------------*/
footer {
  display: flex;
  height: 150px;
  background-color: #10130a;
}

.footerSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footerLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 6px;
}

.footerLeft img {
  width: 140px;
}

.footerLeft p {
  font-size: 13px;
  color: white;
}

.footerLeft a {
  text-decoration: none;
  font-size: 13px;
  color: #819c4b;
}

.author {
  color: white !important;
  font-weight: 550;
}

.footerLeft a:nth-child {
  color: white;
}

.linkFooter {
  display: flex;
  flex-direction: column;
}

.linkFooter a {
  text-decoration: none;
  color: #819c4b;
  font-size: 15px;
}

.socialMediaFooter {
  display: flex;
  gap: 10px;
}
.fa-facebook-f {
  font-size: 20px;
  color: #819c4b;
}

.fa-facebook-f:hover {
  color: white;
}

.fa-whatsapp:hover {
  color: white;
}
.fa-whatsapp {
  font-size: 25px;
  color: #819c4b;
}

/* =================================================
====================================================
-------------- C  O  N  T  A  C  T   P  A  G  E ----
====================================================
====================================================*/

.hero-contact {
  background-color: #f6f4ee;
  display: flex;
  height: 290px;
}

.hero-contact-Title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 0 45px;
}

.hero-contact-Title h1 {
  font-size: 45px;
  font-weight: bold;
}

.hero-contact-Title p {
  text-align: center;
  font-size: 18px;
  line-height: 1.2;
}

.section-form-contact-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #819c4b;
  height: 400px;
  padding: 20px 0;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.2);
}

.form-contact-page-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  gap: 7px;
  background-color: white;
  border-radius: 20px;
  height: 550px;
}

.avatar-contact {
  width: 380px;
}

.form-contact-page-card h1 {
  font-size: 22px;
  font-weight: bold;
}

.form-contact-page-card p {
  font-style: italic;
}

.form-contact-page {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  gap: 450px;
}

.form-avatar-div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.contact-icon {
  display: none;
}

.label-name,
.label-email {
  display: flex;
  margin-top: 10px;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}

.label-inputs-end {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.label-inputs-end input {
  width: 100%;
  height: 35px;
  border-radius: 5px;
  font-size: 15px;
  font-family: "TikTok Sans", sans-serif;
  padding-left: 5px;
  border-style: none;
  border: 1px solid #d3d3d3;
}

.label-inputs-end textarea {
  font-family: "TikTok Sans", sans-serif;
  padding-left: 5px;
  border-style: none;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  font-size: 15px;
  height: 120px;
  width: 350%;
}

.form-contact-page label {
  font-size: 15px;
}

.form-contact-page input {
  width: 350%;
  height: 35px;
  border-radius: 5px;
  font-size: 15px;
  font-family: "TikTok Sans", sans-serif;
  padding-left: 5px;
  border-style: none;
  border: 1px solid #d3d3d3;
}

.section-contact-end {
  background-color: #f6f4ee;
  height: 300px;
  padding-top: 120px;
}
.end-contact-page {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.end-section-cards {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}

.end-section-card3 {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}

.details-card-contact-page {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.icon-tel {
  width: 80px;
}

.form-contact-page button {
  height: 45px;
  font-family: "TikTok Sans", sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-style: none;
  border-radius: 4px;
  color: white;
  background-color: #819c4b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.details-card-contact-page p:first-of-type {
  font-weight: bold;
}

/* =================================================
====================================================
-------------- S  E  R  V  I  C  E  S   P  A  G  E ----
====================================================
====================================================*/
.hero-services {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f3ed;
  height: 250px;
}

.hero-services-title {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero-services-title h1 {
  font-size: 30px;
  font-weight: bold;
}

.hero-services-title p {
  font-style: italic;
  font-size: 17px;
  line-height: 1.2em;
}

.main-section-services {
  display: flex;
}

.main-section-services h2 {
  font-size: 22px;
  font-weight: bold;
}
.main-contain-div-cards-services {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 30px 0;
  width: 100%;
}

.main-contain-div-cards-services img {
  width: 400px;
}

.main-div-details-card-service {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.details-card-service {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 10px;
}

.details-card-service i {
  color: #819c4b;
  font-weight: 800;
}

.subtile-details-card-service small {
  font-size: 0.9em;
  font-style: italic;
  line-height: 1.2;
}

.title-service-card-details {
  display: flex;
  gap: 5px;
}

.suite-services-cards {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: 25px;
  padding: 30px 0;
}

.suite-services-card-solo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* =================================================
====================================================
-------------- M  E  N  T  I  O  N  S    P  A  G  E ----
====================================================
====================================================*/
.banner {
  background-color: #f6f4ee;
  height: 180px;
  display: flex;
}

.banner-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  gap: 15px;
}

.banner-hero p {
  font-size: 1.1em;
  line-height: 1.1em;
  font-style: italic;
}

.banner-hero h1 {
  font-size: 2.1em;
  font-weight: bold;
  color: #323b20;
}

.banner-hero span {
  font-weight: bold;
  color: #819c4b;
}

.main-section-mentions {
  display: flex;
  padding: 25px;
  background-color: white;
}

.div-block-mentions {
  display: flex;
  gap: 55px;
}

.div-mentions-points {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 70%;
}

.aside-main-section-mentions {
  display: flex;
  justify-content: center;
  align-items:flex-start;
}

.aside-main-section-mentions ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 1.1em;
  position: sticky;
  top: 80px;
}

.aside-main-section-mentions a {
  text-decoration: none;
  color: #10130a;
}

.aside-main-section-mentions a:hover {
  font-weight: bold;
}

.aside-main-section-mentions a:active {
  font-weight: bold;
  color: #819c4b;
}

.mentions-points-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px 5px rgba(51, 51, 51, 0.1);
  padding: 45px;
}

.mentions-points-card h2 {
  font-size: 1.8em;
  font-weight: bold;
}

.mentions-points-card p {
  line-height: 1.3em;
  color: #292929;
}

.mentions-points-card a {
  text-decoration: none;
  color: #819c4b;
  font-weight: bold;
}

.details-mentions-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messageSentSection {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f6f4ee;
}

.messageSentDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: white;
  padding: 40px 60px;
  border-radius: 15px;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.1);
}

.messageSentDiv h1 {
  font-size: 30px;
  font-weight: bold;
}

.messageSentDiv p {
  font-size: 18px;
  font-style: italic;
  text-align: center;
  color: rgb(99, 99, 99);
}

.messageSentDiv a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  background-color: #819c4b;
  padding: 10px;
  border-radius: 5px;
}

.messageSentDiv img {
  width: 150px;
}