:root {
  --blue: #095ecd;
  --dark-blue: #303c8d;
  --red: #d83357;
  --orange: #d8872b;
  --green: #09750e;
  --big-font: "Fredoka", sans-serif;
  --basic-font: "Vend Sans", sans-serif;
}

.website-section {
  overflow: hidden;
  width: 100%;
}

.banner-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#home-section {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.background {
  width: 75%;
  height: 80%;
  background-image: url(/images/beach/beachPicture.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 2rem;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.background img {
  width: 30%;
}

.background h1 {
  color: white;
  font-family: var(--basic-font);
  font-size: 1.2rem;
}

.banner {
  width: 100%;
}

.banner img {
  width: 100%;
  object-fit: cover;
}

.title {
  font-size: 2rem;
  color: var(--dark-blue);
  font-family: var(--big-font);
  font-weight: 600;
}

.text {
  font-family: var(--basic-font);
  font-weight: 550;
  max-width: 80ch;
  width: 70%;
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.text p{
  text-align:left;
}

.cta-button{
  font-family: var(--big-font);
  color:#fff;
  background-color: #303c8d;
  border: none;
  border-radius: 32px;
  padding:0.8rem 1rem ;
  font-size: 22px;
}

.orange{
color:var(--orange)
}

.green{
  color: var(--green);
}

.red{
  color:rgb(39, 39, 39);
}


.parent-home {
  width:60%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 20px;
    margin-bottom: 3rem;
}

.parent-home img{
    width:100%;
  height: 100%;
  border-radius:1rem;
  object-fit: cover;
}
    
.parent-home .div1 {
    grid-row: span 2 / span 2;
}

.parent-home .div2 {
    grid-row: span 3 / span 3;
}

.parent-home .div3 {
    grid-row: span 3 / span 3;
    grid-row-start: 3;
}

.parent-home .div4 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 4;
}

.parent-home .div5 {
    grid-row: span 2 / span 2;
    grid-row-start: 6;
}

.parent-home .div6 {
    grid-row: span 2 / span 2;
    grid-row-start: 6;
}
        

.parent {
  width:60%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 20px;
}
    
.parent .div1 {
    grid-row: span 3 / span 3;
}

.parent .div2 {
    grid-row: span 2 / span 2;
}

.parent .div3 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 3;
}

.parent .div4 {
    grid-row: span 2 / span 2;
    grid-row-start: 4;
}

.parent .div5 {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 5;
}

.parent .div6 {
    grid-row: span 3 / span 3;
    grid-row-start: 6;
}

.parent .div7 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 8;
}
         

.bedroom-pic{
  width:100%;
  height: 100%;
  border-radius:1rem;
  object-fit: cover;
}

footer{
  width: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  min-height:15rem;
  background-color:#181830;
}

footer img{
  width:20%;
}

footer div{
  width:40%;
  height: 80%;
  gap: 12px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


footer div a{
  color: white;

  text-decoration: none;
  font-size: var(--basic-font);
  font-weight: 800;
}



@media (max-width: 1200px) {
  .background {
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin-top: 0;
  }

  .background img {
    width: 60%;
    max-width: 500px;
  }

  .banner {
    height: 80px;
  }

  .banner img {
    height: 100%;
  }

  .title {
    font-size: 1.8rem;
  }

  .parent-home {
  width:80%;

}

  .parent {
  width:80%;
  }
}