/* ======================================================================================================================================
   RESETS + BASICS
====================================================================================================================================== */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body {
  background-color: #F2CC8F;
  font-family: "Jost", sans-serif;
  color: #3D405B; /* ensure good readability */
  font-weight: 400;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.6; 
  position: relative;
  overflow: hidden;
}


body::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 60vh; 
  max-width: 100%;
  max-height: 100%;
  background: url('/assets/logos/rt-logo-round.svg') center center no-repeat;
  background-size: contain;
  opacity: 0.10;
  z-index: 0;
  pointer-events: none;
}



h1, h2, h3 { 
  font-family: "Aboreto", sans-serif;
  color: white;
  font-size: 2.5rem;
  margin-bottom: 0.5em;
 }

h1 {
  padding: 1rem;
}


p {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  margin-bottom: 1em; 
}


a {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; 
  color: #81B29A;
  text-decoration: none;
}
a:hover { text-decoration: underline; }


/* ======================================================================================================================================
   FONTS 
====================================================================================================================================== */

/* Headings ---------- */
.aboreto-font {
  font-family: "Aboreto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Text | Weight: 0 - 900 ----------- */


.jost-font-reg {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.jost-font-bold {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.jost-font-light {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}



/* ======================================================================================================================================
   BUTTONS
====================================================================================================================================== */

.btn-primary {
  display: inline-block;
  background: #008cba;
  color: #fff;
  padding: 0.75em 1.5em;
  margin-top: 1em;
  border-radius: 4px;
  transition: background 0.3s;
}
.btn-primary:hover { background: #007aa3; }

.download-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background-color: #81B29A;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}
.download-btn:hover {
  background-color: #3D405B;
}


/* ======================================================================================================================================
   HERO BANNER
====================================================================================================================================== */

.hero {
  background: url('/assets/images/hero-lisbon.jpg') center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 6em 1em;
}
.hero-content { max-width: 600px; margin: 0 auto; }
.hero h1 { font-size: 2.5em; margin-bottom: 0.5em; }
.hero p { font-size: 1.2em; }



/* ======================================================================================================================================
   SECTIONS
====================================================================================================================================== */

section { padding: 4em 1em; max-width: 900px; margin: 0 auto; }
.services .service-cards {
  display: flex; flex-wrap: wrap; gap: 1em;
}
.services .card {
  flex: 1 1 calc(33% - 1em);
  border: 1px solid #ddd; border-radius: 6px;
  padding: 1em;
}
.locations { margin-top: 1em; font-style: italic; }



/* ======================================================================================================================================
   ABOUT
====================================================================================================================================== */

.about { background: #f9f9f9; text-align: center; }



/* ======================================================================================================================================
   TESTIMONIALS
====================================================================================================================================== */

.testimonials .testimonial-cards {
  display: flex; flex-direction: column; gap: 1.5em;
}
.testimonial { background: #fff; border-left: 4px solid #008cba; padding: 1em; }
.author { font-weight: bold; margin-top: 0.5em; text-align: right; }



/* ======================================================================================================================================
   CONTACT FORM
====================================================================================================================================== */

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%; padding: 0.75em; border: 1px solid #ccc;
  border-radius: 4px;
}
.contact-form label { font-weight: bold; }


/* ======================================================================================================================================
   FOOTER
====================================================================================================================================== */

footer {
  text-align: center; padding: 2em 1em; background: #f1f1f1;
  font-size: 0.9em;
}






/* ======================================================================================================================================
   RESPONSIVENESS
====================================================================================================================================== */

@media (min-width: 768px) {


  .testimonials .testimonial-cards { flex-direction: row; }
  .testimonial { flex: 1; }
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form textarea { grid-column: span 2; }


}


@media (max-width: 768px) {

  body::before {
    width: 90vw;
    height: 90vw;
  }

  h1 {
    font-size: 1.5rem;
  }

  p {
    padding: 0 1rem;
  }

}