:root {

font-size: 62.5%;
}

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

html {
    scroll-behavior: smooth;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
  }

.herorowcontainer {
    background-color: #CEABDB;
    display: flex;
    flex-direction: row;
    height: 80rem;
    width: 100%;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

#logo {
    position: absolute;
    width: 12.014rem;
    left: 11.063rem;
    top: 9rem;
}

.text {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding-left: 11.063rem;
  padding-top: 22rem;
}

#hero1 {
    font-family: 'Roboto';
    font-size: 3rem;
    line-height: 60px;
    color: #FEF4EF;
}

#hero2 {
  font-family: 'Italiana';
    font-size: 10rem;
    line-height: 60px;
    color: #FEF4EF;
}

#psub {
padding-top: 10rem;
line-height: 3rem;
}

.herosub {
font-family: 'Roboto';
padding-top: 0.4rem;
font-size: 1.8rem;
color: #FEF4EF;

}

#button {
  font-family: 'Roboto';
  color: #FEF4EF;
  font-size: 2rem;
  text-decoration: none;
  background-color: #8374A1;
  box-sizing: border-box;
  text-align: center;
  padding-top: 1.29rem;
  margin-top: 5rem;
  width: 30rem;
  height: 5rem;
  border-radius: 50rem;
  z-index: 2;
  box-shadow: 0px 10px 40px rgba(143, 109, 155, 0.7);
  transition-duration: 0.2s;
}

#button:hover {
  background-color: #CEABDB; 
  color: #ffffff;
}

#wave {
  display: flex;
  position: absolute;
  margin-top: 50rem;
  margin-inline-start: -35rem;
}

#waveimg {
  object-fit: cover;
  width: 100%;
  height: 30rem;
}

.dobra2 {
  display: flex;
  flex-direction: row;
  height: 80rem;
  background-image: url('https://raw.githubusercontent.com/wagneradl/spaexpress/master/assets/img/bgdobra2.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

.italiana {
  font-family: 'Italiana';
    font-size: 8rem;
    color: #FEF4EF;
    padding-left: 11.063rem;
    padding-top: 8rem;
}

.textdobra2 {
  width: 78rem;
}

.pdobra2 {
font-family: 'Roboto';
font-size: 2rem;
color: #FEF4EF;
padding-left: 11.063rem;
padding-top: 10rem;
line-height: 3rem;
}

#wave2 {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.wave2 {
  display: flex;
  flex-direction: row;
  position: absolute;
  margin-top: 45rem;
  width: 100%;
  height: 35em;
overflow: hidden;
}

.bullets ul {
  display: flex;
  flex-direction: row;
  font-family: 'Roboto';
  font-size: 2rem;
  color: #FEF4EF;
  list-style: none;
  justify-content: space-between;
  text-align: center;
  gap: 10rem;
}

.bullets {
  position: absolute;
  margin-top: 65rem;
  display: flex;
  flex-direction: row;
  padding: 0rem 10rem;

}

.dobra3 {
  display: flex;
  flex-direction: row;
  height: 80rem;

}

.row2 {
  display: flex;
  flex-direction: row;
}

.textdobra3 {
width: 40%;
position: absolute;
margin-left: 68rem;
margin-top: 10rem;
display: flex;
flex-direction: row;
}

.pdobra3 {
  font-family: 'Italiana';
  font-size: 7rem;
  color: #8374A1;
  text-align: left;
  list-style: none;
}

.ppdobra3 {
  font-family: 'Roboto';
font-size: 2rem;
color: #8374A1;

}

.t3 {
position: absolute;
margin-left: 68rem;
width: 60rem;
margin-top: 30rem;
}

.divbutton2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  margin-top: 71rem;
}

.dobra4 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 80rem;
  background-color: #8374A1;
}

.foto {
  display: flex;
  flex-direction: row;
  width: 30rem;
  height: 100%;
}

.divtextdobra4 {
width: 40%;
margin-left: 70rem;
display: flex;
flex-direction: column;
margin-top: 18rem;
position: absolute;
box-sizing: border-box;

}

.h1dobra4 {
  font-family: 'Italiana';
  font-size: 5rem;
  color: #FEF4EF;
}

.h2dobra4 {
  font-family: 'Roboto';
  font-size: 3rem;
  line-height: 60px;
  color: #FEF4EF;
}

.pdobra4 {
  font-family: 'Roboto';
  font-size: 2rem;
  color: #FEF4EF;
}

#button3 {
  font-family: 'Roboto';
  color: #FEF4EF;
  font-size: 2rem;
  text-decoration: none;
  background-color: #CEABDB;
  box-sizing: border-box;
  text-align: center;
  padding-top: 1.29rem;
  margin-top: 5rem;
  width: 25rem;
  height: 5rem;
  border-radius: 50rem;
  z-index: 2;
  box-shadow: 0px 10px 40px rgba(143, 109, 155, 0.7);
  transition-duration: 0.2s;
}

#button3:hover {
  background-color: #ffffff;
  color: #8273A1;
}

footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-family: 'Roboto';
  color: #FEF4EF;
  font-size: 1.2rem;
  text-decoration: none;
  background-color: #4e4c52;
  padding: 0rem 2.5rem;
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  line-height: 2rem;
}

a {
  color: #059695;
  text-decoration: none;
}

 @media (min-width: 480px) { 

  .bulletsmobile1 {
    display: none;
  }

  .bulletsmobile2 {
    display: none;
  }

  #fotomobile {
    display: none;
  }

  #footermobile {
    display: none;
  }

}

  @media (max-width: 480px) { 

  #logo {
    position: absolute;
    margin-left: 2rem;
    padding-left: 1rem; 
  }
  
  #img {
    display: none;
  }

.text {
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: left;
  padding-left: 4.4rem;
}

#hero1 {
    font-family: 'Roboto';
    font-size: 2.5rem;
    color: #FEF4EF;
    padding-top: 3rem;
}

#hero2 {
    font-size: 5rem;
    margin-top: -2rem;
    color: #FEF4EF;
}

#psub {
  padding-top: 10rem;
}

.herosub {  
  margin-top: -5rem;
  font-size: 1.5rem;
  color: #FEF4EF;
  width: 100%;
  height: 14rem;
}

#button {
  margin-top: 15rem;
  transition-duration: 0.2s;
}

.italiana {
  font-size: 5rem; 
  margin-top: 0rem;
}

.pdobra2 {
  font-size: 1.5rem;
  margin-top: -6rem;
  line-height: 2rem;
}

.textdobra2 {
  position: absolute;
  width: 100%;
  margin-left: -6rem;
}

.bullets {
  display: none;
}

ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 5rem;
}

.bulletsmobile1 {
  width: 80%;
  text-align: center;
  font-family: 'Roboto';
  font-size: 1.4rem;
  color: #FEF4EF;
  margin-top: 60rem;
  margin-left: 4rem;
}

.bulletsmobile2 {
  width: 80%;
  text-align: center;
  font-family: 'Roboto';
  font-size: 1.4rem;
  color: #FEF4EF;
  margin-top: 69rem;
  margin-left: -32rem;
}

.dobra2 {
  background-position: 10% 75%;
}

.row2 {
  display: none;
}

.textdobra3 {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-left: 0rem;
  }
  
  .pdobra3 {
    font-size: 2rem;
    color: #8374A1;
    text-align: left;
    font-size: 4.5rem;
    width: 70%;
    margin-left: 5rem;
    margin-top: 0rem;
  }
  
  .ppdobra3 {
  font-family: 'Roboto';
  font-size: 1.5rem;
  color: #8374A1;
  width: 70%;
  line-height: 2rem;
  margin-left: 5rem;
  }
  
  .t3 {
  position: absolute;
  margin-left:0rem;
  width: 100%;
  margin-top: 25rem;
  }

.foto {
  display: none;
}

.herowavecontainer {
  width: 50%;
}

.divtextdobra4 {
  width: 75%;
  margin-left: 5rem;
  margin-top: 35rem;
  
  }
  
  .h1dobra4 {
    font-size: 3.3rem;
  }
  
  .h2dobra4 {
    font-size: 2rem;
    line-height: 2rem;
    color: #FEF4EF;
    margin-top: 1.2rem;
  }
  
  .pdobra4 {
    font-family: 'Roboto';
    font-size: 1.5rem;
    color: #FEF4EF;
  }
  
  #button3 {
    font-size: 2rem;
    text-align: center;
    padding-top: 1.29rem;
    margin-top: 4rem;
    width: 25rem;
    height: 5rem;
    margin-left: 2rem;
  }

#fotomobile {
width: 100%;
}

.wavesanimated {
  display: none;
}

.dobra4 {
  margin-top: -6rem;
}

#footerdesktop {
  display: none;
}

#footermobile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Roboto';
    font-size: 1.2rem;
    height: 6rem;
    text-align: center;
  }
}

@media (orientation: landscape) and (max-width: 900px) { 

.herorowcontainer {
    width: 85rem;
    height: 60rem;
}

.row {
    width: 100%;
    display: flex;
}

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-left: 4rem;
}

#logo {
    width: 9.014rem;
    left: 7.063rem;
    top: 7rem;
}

.text {
  width: 100%;
  padding-left: 7.063rem;
  padding-top: 15rem;
}

#hero1 {
  font-size: 2rem
}

#hero2 {
  font-size: 7rem;
}

#psub {
padding-top: 5rem;
line-height: 3rem;
font-size: 1.6rem;
}

.herosub {
padding-top: 0.4rem;
font-size: 1.8rem;
}

#button {
  font-size: 2rem;
  padding-top: 1.29rem;
  margin-top: 5rem;
  width: 30rem;
  height: 5rem;
}

#wave {
  display: flex;
  position: absolute;
  margin-top: 30.02rem;
  margin-inline-start: -35rem;
}

#waveimg {
  object-fit: cover;
  width: 100%;
  height: 30rem;
}

.dobra2 {
  width: 85rem;
  height: 80rem;
}

.italiana {
  font-size: 8rem;
  padding-left: 11.063rem;
  padding-top: 8rem;
}

.textdobra2 {
  width: 60rem;
  margin-left: -4rem;
}

.pdobra2 {
  font-size: 1.5rem;
  padding-left: 11.063rem;
  padding-top: 7rem;
  line-height: 3rem;
}

#wave2 {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.wave2 {
  margin-top: 55rem;
  width: 85rem;
  height: 25rem;
  overflow: hidden;
}

.bullets ul {
  font-size: 1.5rem;
  list-style: none;
  justify-content: space-between;
  text-align: center;
  gap: 8rem;
}

.bullets {
  position: absolute;
  margin-top: 68rem;
  display: flex;
  flex-direction: row;
  padding: 0rem 4rem;

}

.dobra3 {
  display: flex;
  flex-direction: row;
  height: 55rem;
  background-image: url('https://raw.githubusercontent.com/wagneradl/spaexpress/master/assets/img/imgdobra3.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
}

.row2 {
display: none;
}

#row2 {
display: none;
}

.textdobra3 {
width: 40%;
position: absolute;
margin-left: 42rem;
margin-top: 5rem;
display: flex;
flex-direction: row;
}

.pdobra3 {
  font-family: 'Italiana';
  font-size: 5rem;
  color: #8374A1;
  text-align: left;
  list-style: none;
}

.ppdobra3 {
  font-family: 'Roboto';
font-size: 1.5rem;
color: #8374A1;

}

.t3 {
position: absolute;
margin-left: 42rem;
width: 35rem;
margin-top: 20rem;
}

.divbutton2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  margin-top: 71rem;
}

.dobra4 {
  display: flex;
  flex-direction: row;
  width: 85rem;
  height: 55rem;
  background-color: #8374A1;
}

#foto {
 width: auto;
 height: 55rem;
}

.divtextdobra4 {
width: 40%;
margin-left: 47em;
display: flex;
flex-direction: column;
margin-top: 8rem;
position: absolute;
box-sizing: border-box;

}

.h1dobra4 {
  font-size: 3.5rem;
}

.h2dobra4 {
  font-family: 'Roboto';
  font-size: 2rem;
  line-height: 60px;
  color: #FEF4EF;
}

.pdobra4 {
  font-family: 'Roboto';
  font-size: 1.5rem;
  color: #FEF4EF;
}

#button3 {
  font-family: 'Roboto';
  color: #FEF4EF;
  font-size: 2rem;
  text-decoration: none;
  background-color: #CEABDB;
  box-sizing: border-box;
  text-align: center;
  padding-top: 1.29rem;
  margin-top: 5rem;
  width: 25rem;
  height: 5rem;
  border-radius: 50rem;
  z-index: 2;
  box-shadow: 0px 10px 40px rgba(143, 109, 155, 0.7);
  transition-duration: 0.2s;
}

#button3:hover {
  background-color: #ffffff;
  color: #8273A1;
}

#footerdesktop {
  width: 85rem;
}

}