.roof-window-container {
  width: 100%;
  height: 100rem;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #f3f0eb;
  background-image: url("../../assets/images/roof-window/roof-window.png");
}

.roof-window-container .main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: center;
  align-items: center;
}

.roof-window-container .upper-container {
  height: 60%;
  margin-top: 1rem;
  padding: 5rem;
  width: 41%;
}

.roof-window-container .upper-container .layer-1 p {
  color: #28231f;
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 260;
  line-height: 120%;
  margin-top: 4rem;
}

.roof-window-container .upper-container .layer-2 p {
  color: #28231f;
  font-size: 16.937rem;
  font-style: normal;
  font-weight: 260;
  line-height: 17.325rem;
  letter-spacing: 0.085rem;
  text-align: center;
}

.roof-window-container .upper-container .layer-3 p {
  text-shadow: 0rem 0.275rem 0.481rem #fff;
  color: #28231f;
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 260;
  line-height: 120%;
}

.roof-window-container .upper-container .layer-4 {
  width: 84%;
}

.roof-window-container .upper-container .layer-4 .content-layer-4 {
  color: #28231f;
  text-align: right;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 260;
  line-height: 1.05rem;
  opacity: 0.5;
}

.roof-window-container .lower-container {
  height: 40%;
  margin-top: 12rem;
  display: flex;
  justify-content: center;
}

.roof-window-container .lower-container .inverted-comma {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.roof-window-container .lower-container .inverted-comma span {
  color: #fff;
  font-size: 16.88rem;
  line-height: 9rem;
  letter-spacing: 0.084rem;
  font-style: normal;
  font-weight: 100;
}

.roof-window-container .lower-container .content-container {
  text-align: left;
  width: 60%;
}

.roof-window-container .lower-container .animated-text-container p {
  color: #28231f;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 260;
  line-height: 2.8rem;
  letter-spacing: 0.011rem;
  opacity: 1;
}

.roof-window-container .lower-container .animated-text-container p,
.roof-window-container .lower-container #author-name,
.roof-window-container .lower-container #author-role {
  transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;
}

.roof-window-container .lower-container .animated-text-container p.fade-out,
.roof-window-container .lower-container #author-name.fade-out,
.roof-window-container .lower-container #author-role.fade-out {
  opacity: 0.5;
  transform: translateY(0);
}

.roof-window-container .lower-container .animated-text-container p.fade-in,
.roof-window-container .lower-container #author-name.fade-in,
.roof-window-container .lower-container #author-role.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.roof-window-container .lower-container .name-info {
  height: 15%;
  margin-top: 1rem;
}

.roof-window-container .lower-container .name-info p:first-child {
  color: #28231f;
  font-size: 1.0125rem;
  font-weight: 560;
  line-height: 1.51875;
  letter-spacing: 0.0050625rem;
  font-style: normal;
}

.roof-window-container .lower-container .name-info p:last-child {
  color: #28231f;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 260;
  line-height: 1.5;
  letter-spacing: 0.072rem;
  text-transform: uppercase;
}

.roof-window-container .lower-container .stories-button-container {
  height: 15%;
  margin-top: 2.25rem;
}

.roof-window-container .lower-container .shuffle-stories-button {
  display: inline-flex;
  height: 3.48rem;
  padding: 0rem 1.74rem;
  align-items: center;
  gap: 0.58rem;
  flex-shrink: 0;
  border: 1.15px solid #fff;
  background: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  font-family: "VELUX Transform Variable";
}
@media (max-width: 1440px) {
  .roof-window-container .upper-container {
    height: 60%;
    margin-top: 1rem;
    padding: 5rem;
    width: 57%;
  }
}
@media (max-width: 1240px) {
  .roof-window-container .upper-container {
    height: 60%;
    margin-top: 1rem;
    padding: 5rem;
    width: 62%;
  }
  .roof-window-container .lower-container .content-container{
    width: 55% !important;
  }
  .roof-window-container .upper-container .layer-2 p {
    font-size: 14.467rem;
    font-weight: 260;
    line-height: 16.5rem;
    text-align: center;
  }
}

@media (max-width: 1024px) {
  .roof-window-container {
    width: 100%; 
    height: 60rem; 
  }
  .roof-window-container .upper-container {
    height: 60%;
    margin-top: 1rem;
    padding: 1rem;
    width: 100%;
  }
  .roof-window-container .upper-container .layer-1 p {
    margin-top: 5.75rem;
    font-size: 1.5rem;
  }
  .roof-window-container .upper-container .layer-2 p {
    font-size: 13.467rem;
    font-weight: 260;
    line-height: 15.5rem;
    text-align: center;
  }
  .roof-window-container .upper-container .layer-3 p {
    font-size: 1.5rem;
  }
  .roof-window-container .upper-container .layer-4 {
    width: 73%;
  }
  .roof-window-container .upper-container .layer-4 .content-layer-4 {
    font-size: 0.625rem;
    opacity: 0.5;
  }
  
.roof-window-container .lower-container {
  height: 40%;

  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}

.roof-window-container .lower-container .inverted-comma {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.roof-window-container .lower-container .inverted-comma span {
  color: #fff;
  font-size: 10.88rem;
  line-height: 6rem;
  letter-spacing: 0.084rem;
  font-style: normal;
  font-weight: 100;
}

.roof-window-container .lower-container .content-container {
  text-align: left;
  width: 60% !important;
}

.roof-window-container .lower-container .animated-text-container p {
  color: #28231f;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 300;
  line-height: 135%;
  opacity: 1;
}


.roof-window-container .lower-container .name-info p:first-child {
  font-size: 1rem;
  font-weight: 360;
  line-height: 130%;
}

.roof-window-container .lower-container .name-info p:last-child {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 360;
  line-height: 130%;
  text-transform: none;
}
.roof-window-container .lower-container .shuffle-stories-button {
  height: 3rem;
  padding: 0rem 1.74rem;
  align-items: center;
  gap: 0.58rem;
  flex-shrink: 0;
  border: 1.15px solid #fff;
  background: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
}
}
@media (max-width: 768px) {
  .roof-window-container {
    width: 100%; 
    height: 60rem; 
  }
  .roof-window-container .upper-container {
    height: 65%;
    margin-top: 1rem;
    padding: 1rem;
    width: 100%;
  }
  .roof-window-container .upper-container .layer-1 p {
    margin-top: 5.75rem;
    font-size: 1.4rem;
  }
  .roof-window-container .upper-container .layer-2 p {
    font-size: 13.467rem;
    font-weight: 260;
    line-height: 14.5rem;
    text-align: center;
  }
  .roof-window-container .upper-container .layer-3 p {
    font-size: 1.4rem;
  }
  .roof-window-container .upper-container .layer-4 {
    width: 71%;
  }
  .roof-window-container .upper-container .layer-4 .content-layer-4 {
    font-size: 0.625rem;
    opacity: 0.5;
  }
  
.roof-window-container .lower-container {
  height: 35%;
  /* height: 67%; */
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}

.roof-window-container .lower-container .inverted-comma {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

}

.roof-window-container .lower-container .inverted-comma span {
  color: #fff;
  font-size: 10.88rem;
  line-height: 6rem;
  letter-spacing: 0.084rem;
  font-style: normal;
  font-weight: 100;
  font-family: "VELUX Transform Variable";
}

.roof-window-container .lower-container .content-container {
  text-align: left;
  width: 65% !important;
}

.roof-window-container .lower-container .animated-text-container p {
  color: #28231f;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 135%;
  opacity: 1;
  font-family: "VELUX Transform Variable";
}


.roof-window-container .lower-container .name-info p:first-child {
  font-size: 1rem;
  font-weight: 560;
  line-height: 150%;
  font-family: "VELUX Transform Variable";
}

.roof-window-container .lower-container .name-info p:last-child {
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 260;
  line-height: 150%;
  text-transform: none;
  font-family: "VELUX Transform Variable";
}
.roof-window-container .lower-container .shuffle-stories-button {
  height: 3rem;
  padding: 0rem 1.74rem;
  align-items: center;
  gap: 0.58rem;
  flex-shrink: 0;
  border: 1.15px solid #fff;
  background: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
}
}
@media (max-width: 550px) {
  .roof-window-container {
    width: 100%; 
    height: 60rem; 
  }
  .roof-window-container .upper-container {
    height: 65%;
    margin-top: 1rem;
    padding: 1rem;
    width: 100%;
  }
  .roof-window-container .upper-container .layer-1 p {
    margin-top: 5.75rem;
    font-size: 1.4rem;
  }
  .roof-window-container .upper-container .layer-2 p {
    font-size: 11.5rem;
    font-weight: 260;
    line-height: 14.5rem;
    text-align: center;
  }
  .roof-window-container .upper-container .layer-3 p {
    font-size: 1.4rem;
  }
  .roof-window-container .upper-container .layer-4 {
    width: 71%;
  }
  .roof-window-container .upper-container .layer-4 .content-layer-4 {
    font-size: 0.625rem;
    opacity: 0.5;
  }
  
.roof-window-container .lower-container {
  height: 35%;
  /* height: 67%; */
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}

.roof-window-container .lower-container .inverted-comma {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.roof-window-container .lower-container .inverted-comma span {
  color: #fff;
  font-size: 10.88rem;
  line-height: 6rem;
  letter-spacing: 0.084rem;
  font-style: normal;
  font-weight: 100;
}

.roof-window-container .lower-container .content-container {
  text-align: left;
  width: 90% !important;
}

.roof-window-container .lower-container .animated-text-container p {
  color: #28231f;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 135%;
  opacity: 1;
}


.roof-window-container .lower-container .name-info p:first-child {
  font-size: 1.1rem;
  font-weight: 560;
  line-height: 150%;
}

.roof-window-container .lower-container .name-info p:last-child {
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 360;
  line-height: 150%;
  text-transform: none;
}
.roof-window-container .lower-container .shuffle-stories-button {
  height: 3rem;
  padding: 0rem 1.74rem;
  align-items: center;
  gap: 0.58rem;
  flex-shrink: 0;
  border: 1.15px solid #fff;
  background: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
}
}

@media (max-width: 450px) {
  .roof-window-container .main-container{
    justify-content: start;
  }
  .roof-window-container {
    width: 100%; 
    height: 40rem; 
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #f3f0eb;
    background-image: url("../../assets/images/roof-window/roof-window1.png");
  }
  .roof-window-container .upper-container {
    height: 60%;
    margin-top: 1rem;
    padding: 1rem;
    width: 100%;
  }
  .roof-window-container .upper-container .layer-1 p {
    margin-top: 1.75rem;
    font-size: 0.875rem;
  }
  .roof-window-container .upper-container .layer-2 p {
    font-size: 6.467rem;
    font-weight: 260;
    line-height: 6.5rem;
    text-align: center;
  }
  .roof-window-container .upper-container .layer-3 p {
    font-size: 0.875rem;
  }
  .roof-window-container .upper-container .layer-4 {
    width: 80%;
  }
  .roof-window-container .upper-container .layer-4 .content-layer-4 {
    font-size: 0.625rem;
    opacity: 0.5;
  }
  
.roof-window-container .lower-container {
  /* height: 40%; */
  height: 67%;
  margin-top: 0.5rem;
  display: flex;
  justify-content: start;
}

.roof-window-container .lower-container .inverted-comma {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.roof-window-container .lower-container .inverted-comma span {
  color: #fff;
  font-size: 4.88rem;
  line-height: 3rem;
  letter-spacing: 0.084rem;
  font-style: normal;
  font-weight: 100;
}

.roof-window-container .lower-container .content-container {
  text-align: left;
  width: 100% !important;
}

.roof-window-container .lower-container .animated-text-container p {
  color: #28231f;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 135%;
  opacity: 1;
}


.roof-window-container .lower-container .name-info p:first-child {
  font-size: 0.75rem;
  font-weight: 360;
  line-height: 150%;
}

.roof-window-container .lower-container .name-info p:last-child {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 360;
  line-height: 150%;
  text-transform: none;
}
.roof-window-container .lower-container .shuffle-stories-button {
  height: 3rem;
  padding: 0rem 1.2rem;
  align-items: center;
  gap: 0.58rem;
  flex-shrink: 0;
  border: 1.15px solid #fff;
  background: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  font-size: .75rem;
}
}