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

:root {
  --title-color: #1B2336;
  --nav-default-color: #636875;
  --btn-color: #4B83FC;
  --btn-hover-color: #66CFA9;
  --bg-color: #FFFFFF;
  --ft-color: #1E2845;
  --ft-paragraph-color: #BAC4E1;
  --alt-paragraph-color: #415674;
  --acordion-bg-color: #F5F3F4;

  font-size: 62.5%; /* 1rem = 10 pix */
  --nav-height: 14.1rem;

}

html {
  scroll-behavior: smooth;
}

/*Deixar a Largura do HTML em 100%*/
html,
body {
  width: 100%;
  height: 100%;
}

/* Deixa os link sem marcação de cor após ser visitados */
a { 
  color: inherit;
} 

.link, .link:visited {
  color: #4B83FC;
}

/*Define a fonte usada no index HTML inteiro*/
body {
  font-family: 'Nunito Sans', sans-serif;

  font-size: 1.6rem;

  text-align: center;

  overflow: overlay;
  background-color: var(--bg-color);
}

.wrapper {
  width: min(156rem, 100%);
  margin-inline: auto;
  padding-inline: 2.4rem;
}

p {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.9rem;
  color: var(--alt-paragraph-color);
  opacity: 0.8;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

h1,
h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 7.5rem;
  line-height: 9.5rem;
  color: var(--title-color);
}

h2 {
  font-size: 4.5rem;
  line-height: 5.3rem;
}

#home {
  display: flex;

  margin-block: 14.1rem 0;
  background: linear-gradient(86.23deg, rgba(255, 255, 255, 0.95) 37.69%, rgba(140, 191, 255, 0.48) 92.77%), url("../img/home-beach.jpg") no-repeat;
  background-size: cover;

  text-align: left;
}

section header h1 {
  padding-top: 15.4rem;
  color: var(--title-color);
  width: 904px;
}

section header p {
  padding: 2.5rem 0 4rem 0;
  width: 63.8rem;
  color: var(--nav-default-color);
  opacity: 1;
}

a.button {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 3.4rem;
  gap: 1rem;

  font-size: 1.8rem;
  line-height: 2.9rem;
  width: 27.5rem;
  height: 5.9rem;

  background: var(--btn-color);

  box-shadow: 0 .4rem 1.3rem rgba(75, 131, 252, 0.4);
  border-radius: .6rem;

  color: var(--bg-color);
  text-decoration: none;
}

a.button:hover {
  background: var(--btn-hover-color);

  box-shadow: 0 .4rem 1.3rem rgba(102, 207, 169, 0.4);
  transition: all 150ms;
}

#home img {
  display: flex;
  padding: 6.5rem 0 8rem 0;
}

/*================================ Security ===============================================*/

.wrapper .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 22.5rem 0 13.4rem 0;
}

.wrapper .grid-container > div {
  width: auto;
  text-align: left;
}

.wrapper .grid-container .beach {
  padding-right: 13.2rem;
}

.wrapper .grid-container img {
  max-width: 120%;
}

.wrapper .grid-container h2 {
  width: 39.8rem;
  height: auto;

  padding-bottom: 2.5rem;
}

.wrapper .grid-container p {
  padding-bottom: 2.5rem;
}

.wrapper .grid-container p:last-child {
  padding-bottom: 3.5rem;
}

/*================================ ISH ===============================================*/

#ish {
  background: #FAFCFD;
}

#ish .wrapper {
  display: flex;
  padding: 14rem 0;
  flex-direction: column;
  align-items: center;
}

#ish .wrapper h2 {
  width: 62.3rem;
  padding-bottom: 2.5rem;
}

#ish .wrapper p {
  padding-bottom: 2.5rem;
}

#ish .wrapper div {
  padding-bottom: 1.5rem;
}

/*============================================= Page 2 ============================================================*/

/*================================ Home-works ===============================================*/

#home-works {
  display: flex;

  margin-block: 14.1rem 0;

  background: url("../img/bridge-view.jpg") no-repeat;
  background-size: cover;
  height: 89.3rem;

  text-align: center;
}

#home-works .bg-color {
  display: flex;
  align-items: center;
  text-align: center;
  background-color: hsla(212, 42%, 35%, 0.7);
  width: 100vw;
}

#home-works h1,
#home-works p {
  color: var(--bg-color);
  margin: 0 11.6rem;
}

#home-works p {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--bg-color);
  
}

/*================================ delimitation-areas ===============================================*/
#delimitation-areas {
  background: #FAFCFD;
}


#delimitation-areas .grid-container {
  grid-template-columns: 63.4rem 85.7rem;
  grid-gap: 6.5rem;
  padding: 14.4rem 0 12.1rem 0;
}

#delimitation-areas h2 {
  width: auto;
  color: var(--title-color);
}

#delimitation-areas p {
  width: auto;
}

#delimitation-areas img {
  width: 95%;
}

/*================================ accordion ===============================================*/

#accordion {
  padding: 12.2rem 0 14.4rem 0;
}

#accordion .wrapper {
  width: min(142.8rem, 100%);
}

#accordion .wrapper .grid-container {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
      'A B'
      'C C';
  padding: 12.5rem 0 3.2rem 0;
}

#accordion .wrapper .grid-container img {
  grid-area: A;
}

#accordion .wrapper .grid-container p:nth-child(2) {
  grid-area: B;
}

#accordion .wrapper .grid-container p:nth-child(3) {
  grid-area: C;
}


#accordion h2,
#final-calc h2 {
  padding-bottom: 2.5rem;
  color: var(--title-color);
}

#accordion h3 {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.3rem;
}

#accordion p {
  padding-bottom: 4.2rem;
}

#accordion img {
  width: 100%;
  padding-bottom: 3.2rem;
}

#accordion .title > p {
  text-align: center;
  padding-right: 6.7rem;
  padding-left: 6.7rem;
}

details {
  padding-bottom: 2.5rem;
}

details {
  transition: all 350ms ease-in-out;
}

summary {
  background: var(--acordion-bg-color);
  color: var(--nav-default-color);
  padding: 2rem 3.5rem;
  cursor: pointer;
  transition: all 500ms ease;
  border-radius: 6px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details[open] summary {
  background: var(--btn-color);
  box-shadow: 0 .4rem 1.3rem rgba(75, 131, 252, 0.4);
  color: var(--bg-color);
}

details[open] svg path:first-child {
  stroke: var(--bg-color);
}

details[open] svg path:last-child {
  display: none;
}

#accordion .grid-container {
  column-gap: 5.9rem;
  padding: 9.6rem .8rem 4.7rem .8rem;
}

#accordion p {
  text-align: left;
  padding-bottom: 3.2rem;
}

#accordion p:last-child {
  padding-bottom: 3.2rem;
}

/*================================ final-calc ===============================================*/

#final-calc {
  background: linear-gradient(270deg, #DEEFF6 0%, #FEFFFF 100%);
}

#final-calc .wrapper {
  width: min(140.4rem, 100%);
  padding: 0;
}

#final-calc img {
  width: 95%;
}

#final-calc .grid-container {
  grid-gap: 7.9rem;
  padding: 12.8rem 0 13.6rem 0;
}

#final-calc h2 {
  width: auto;
}

/*============================================= Page 3 ============================================================*/

/*================================ system ===============================================*/

#system {
  margin-block: 14.1rem 0;
  background: rgba(245, 250, 252, 0.5);

}

#system .grid-container {
  grid-gap: 10.8rem;
  padding: 14.4rem 0 14.7rem;
}

#system .grid-container:last-child {
  position: relative;
  height: 107.3rem;
}

#system div {
  z-index: 1;
}

#system .box-img {
  position: relative;
  bottom: 43.7rem;
  left: 19.4rem;
  width: 50.4rem;
  height: 48.4rem;

  background: var(--btn-color);
  border-radius: 1.5rem;
  z-index: -1;
}



#system h2 {
  width: auto;
}

/*============================================= Page 4, 5 ============================================================*/

#terms,
article {
  background: rgba(245, 250, 252, 0.5);

  margin-block: 14.1rem 0;
}

#terms .wrapper,
article .wrapper {
  padding: 14.4rem 0 15.6rem 0;
  text-align: left;
}

#terms h2,
article h2 {
  padding-bottom: 2rem;
}

#terms h3,
article h3 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 3.2rem;
  color: var(--title-color);
  opacity: 0.8;
}

#terms p,
article p {
  padding-bottom: 2.5rem;
}

article div {
  padding-bottom: 2.5rem;
}

/*================================ Footer ===============================================*/

footer {
  background-color: var(--ft-color);
  display: flex;
}

footer .wrapper {
  padding-top: 15.1rem;
}

footer ul li a{
  text-decoration: none;
}

footer ul li a:hover {
  color: var(--btn-color);
}

footer h5 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 2.6rem;
  color: var(--bg-color);
  padding-bottom: 1.4rem;
}

footer li{
  padding-bottom: 1.4rem;
}

footer p,
footer li a{
  color: var(--ft-paragraph-color);

  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.9rem;
}

 footer .wrapper .grid-container {
  grid-template-columns: 37.2rem 32.2rem 52.3rem;
  grid-gap: 13.2rem;
  padding: 0 0 3rem 0;
}

footer .wrapper .grid-container > div {
  width: auto;
  text-align: left;
}

footer .social-links {
  padding-bottom: 4rem;
}

footer .social-links a{
  padding-right: 1.7rem;
}

.referency {
  padding: 3.1rem 0 3.6rem;
  border-top: 0.1rem solid var(--ft-paragraph-color);
}

.referency a {
  color: var(--acordion-bg-color);
  opacity: 0.8;
}

footer a {
  text-decoration: none;
  color: #F4F5F9;
}