/*----------------index beginning--------------------------*/


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

/*body { background-image: url(photos/container-background.jpg)
  }*/

  html, body { position: relative;
    background-image: url(photos/container-background.jpg);
    background-repeat: repeat-y;
    background-size: cover;
  
  }
  

:root { --font-color: #fff;
--backdrop: #fff;
}

    .container { height: auto; /*was 300vh or 500vh*/
      box-sizing: border-box;  
        width: 100%;
        max-width: 1850px; /*1500px*/
        margin: 0 auto;

}


    .upper-stripe { display: flex;
      box-sizing: border-box;
      width: 100%;
      max-width: 1850px;  /*was 1500px*/
      flex-wrap: wrap;
      justify-content: flex-end;
      background-color: #3F524E;
      padding: 0.1rem 0; /*1st value was 0.5rem, I lowered it to 0.1 since it made the logo jut out */
      z-index: -1;
      
               }

     .img-flag { float: left;
        margin: 0.5rem;    
            }

    .language-text { color: var(--font-color);
        margin: 0.5rem;
        float: left;
    }

 .welcome-day {/*flex: 0 1 100%;*/
    display: flex;
    width: 100%;
    justify-content: center;
    
}

    .welcome-day-text  { width: 50%; 
         text-align: right; 
        color: var(--font-color);
        margin-right: 0.5rem;
        float: left;
        
    } 

          .weekday {flex: 0 1 20%;            
          }

   .weekday-text { width: 50%;
    text-align: left; 
    color: var(--font-color);
   float: left;
   
   }       


   nav {
    position: fixed; 
    top: 12.5%; /*was 14%*/  
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1850px;  /*was 1500*/
    padding: 20px;
    transition: all 0.4s ease;
    z-index: 3; /*was z-index: 1; but it made manu's links inactive */
      }

  nav.sticky { 
    padding: 15px 20px; 
    background: #3F524E;  /*was yellow*/
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    top: 0; /*added by gpt*/
  transform: translate(-50%, 0); /*added by gpt*/
  
  }

  nav.sticky .logo img {   
    transform: scale(0.65); /* the value was 0.65 Scale down when sticky added after GPT advice 23 10 24 */
    }

  nav .nav-content { text-transform: uppercase;
    height: 12vh;   
    max-width: 1850px; /*was 1500px*/
    margin: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-weight: bolder;
    
                  }

  /*below there was: nav .logo a*/
  nav a { 
    font-weight: 500;
    font-size: 1.5rem; 
    text-decoration: none;
    color: var(--font-color);
    align-items: flex-end;
      }

  /*below there was: nav.sticky .logo a*/
  nav.sticky a {
    color: var(--font-color);
  }
  
  .nav-content .nav-links {  display: flex;  }
  
  .nav-content .nav-links li {
    list-style: none;
    margin: 0 8px;    }
  
  .nav-links li a {
    text-decoration: none;
    color: var(--font-color);
    font-size: 18px;
    font-weight: 900;
    padding: 10px 4px;
    transition: all 0.3s ease;   }
  
  /*.nav-links li a:hover {
color: var(--font-color); 
 }*/
  
  .nav.sticky .nav-links li a {
    color: var(--font-color);
    transition: all 0.4s ease;
  }
  
  .nav.sticky .nav-links li a:hover {
    color: #0e2431;
  }
    
/*.within-logo { width: 100%;
  max-width: 1550px;
  position: fixed; 
  top: 10%;
  left: 0;
  padding: 3.3rem;
  z-index: 1;
background-color: transparent;
} */

.logo img { max-width: 80%;  
   position: fixed;  /*was absolute but fixed gives me a better effect */ 
top: 1rem; /*was 9.8%*/
left: 5%;
 z-index: 2;
 transition: top 0.3s ease-in-out; /*added by gpt*/
 
}

/* -----------------------menu hamburger beginning-----------------------*/

#hamburger-input{   display: none; }

#hamburger-menu {
    position: fixed; 
    top: 72px;  /*was 60px*/
    right: 20px;
    width: 30px;
    height: 30px;
    display: none;
    border: none;
    padding: 0px;
    margin: 10px;
    z-index: 9;  /*added by me*/
    font-family: 'Cabin', Sans-serif;
    background: linear-gradient(
      to bottom, 
      #000, #000 10%, 
      transparent 10%, transparent 20%, 
      #000 20%, #000 30%, 
      transparent 30%, transparent 40%, 
      #000 40%, #000 51%,
      transparent 51%, transparent 1%
    );
}

#hamburger-menu #sidebar-menu {
    visibility: hidden;
    position: fixed; 
     top: 0;
    right: -50px;
    width: 100vw;
    height: 100%;
    background-color: transparent; /*was black*/ 
    transition: 0.1s;
    padding: 0px 10px;
    box-sizing: border-box;
}

#hamburger-menu ul {
  padding-left: 0px;
}

#hamburger-menu li {
  list-style-type: none;
  line-height: 3rem;
  text-align: center;
}

#hamburger-menu a {
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
}

#hamburger-menu a:hover {
  text-decoration: underline;
}

#hamburger-input:checked + #hamburger-menu #sidebar-menu {
    visibility: visible;
    right: 0; 
    background-color: black;       
}

/*#hamburger-input:checked ~ .overlay {
visibility: visible;
opacity: 0.4;
}*/


/* -----------------------menu hamburger end-----------------------*/

.wrapper { display: flex;
  flex-wrap: wrap;
   width: 100%;
 height: auto;  
max-width: 1850px;   /*1500px*/
justify-content: center;
position: absolute;
top: 250px; /*was 50% and then 22% last was 26%, the last was 300px*/
left: 50%;  
transform: translateX(-50%);
box-sizing: border-box;

}

.section1 { flex: 30%;
  text-align: center;
  }

  .img-first {  max-width: 95%; 

    height: 100%;
    
    /*width: max(800px, 50%);*/
    border-radius: 6px;
  }

  .text-in-section1 { flex:  30%;
    padding: 2%; /*1.5rem*/
  background: var(--backdrop);
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
  }

  .text-heading {font-family: Lato, sans-serif;
  font-size: 1.2rem;
    }

  .feel-text { max-width: 95%;
     font-family: Raleway, sans-serif;
    font-size: clamp(0.75rem, 0.15rem + 1.2vw, 1.125rem);
 line-height: 1.5;
 /*padding: 2%;*/
/*font-display: swap;*/
  }



  /*.sub-container {  display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: flex-start;
    margin: 9rem 0 0 0; /*was 9rem 3rem
font-size: 2rem;
color: white;
padding: 1.5rem;
border: 1px solid yellow;
  }*/

  /*
  .text1 {text-indent: 1%;
    flex: 100%;
    padding: 1.3rem;
    font-size: 2.5rem;
    font-weight: bolder;
      } 
*/

/*
  .text2 {text-indent: 3%;
    flex: 100%;
  padding: 1.3rem;
  font-size: 2.5rem;
    font-weight: bolder;
    border: 4px solid blue;
  }
  */

  /*
  .text3 {text-indent: 5%;
flex: 100%;
    padding: 1.3rem;
    font-size: 2.5rem;
    font-weight: bolder;
    border: 4px solid blue;
}
    */

.text4, .text5, .text6 {display: none;}

  
  .white-wrapper { display: flex;
   width: 100%;
   max-width: 1850px;   /*was 1500px*/
   height: auto;  /*auto*/
    flex-wrap: wrap;
   /*max-width: 1500px;*/
   justify-content: center;
   /*padding: 2rem 0;*/
   margin-top: 20%; /* was 15%*/
   position: relative;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    box-sizing: border-box;
    background: var(--backdrop);
       }
  

 
.section2 { flex: 0 1 50%;
     /*margin-top: 6rem;*/ 
    overflow: hidden;
    height: 100%;  
    padding: 1rem;
    position: relative;  /*I added it after GPT suggestion, it wasn't before*/
    /*background-color: var(--backdrop);*/
    
    box-sizing: border-box;
    }

.section2 img { /*max-width: 95%;*/
  
  /*max-height: 100%;*/
  /*padding-left: 8%;*/
  display: none;
  position: absolute;
  
  /*overflow: hidden;*/
  border-radius: 6px;
  box-sizing: border-box;
}

.section2 img.active {display: block;
 max-width: 100%;  /*was 95%*/
 max-height: 100%;  /*i added it 07/10/24*/
}

/*.img-second { max-width: 95%;
  /*border-radius: 6px;
 text-align: center;
 border: 1px solid green; 
}*/



.section3 { flex: 0 1 50%;
  /*margin: 6rem 0 1rem;*/
  padding: 1.2rem 0 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  background-color: var(--backdrop);
    }

    .section3 a { font-weight: 700;
display: block;
cursor: pointer;
text-decoration: none;
    }

.ap-roundup {max-width: 60%;
margin: 0 auto;  
padding: 0 0 4.5rem;

}

.apartment-link {padding: 1rem 0;
  font-size: 1.5rem;
  border-bottom: 1.4px solid #929aa0;
  text-align: center; 
  color: #5f676d; /* was #2b2e31;*/
  }
  

.view-apart { max-width: 100%;
    text-align: center;
  font-size: 1.2rem;
border: 3.5px double black;
padding: 1.2rem 0 .5rem;
margin-top: 2rem;
color: #5f676d;
}


.under-white-wrapper { display: flex;
  width: 100%;
  height: auto;   /* was 35vh*/
  flex-wrap: wrap;
  justify-content: center;
margin: 20% 0 0; /*the first value was in %*/
background: #3F524E;

}

.section4, .section5, .section6, .section7 {
flex: 0 1 25%;
text-align: center;

color: var(--backdrop);
padding: 2.5rem 0; 
font-size: 1.4rem;

}

.contact {
  font-size: 1.2rem;
  line-height: 1.5;
    }
  
.contact a {text-decoration: none;
color: var(--backdrop);
}


.contact-box {
  margin-top: 1.5rem;
}

.faq-box {margin-top: 1.5rem;
}

.faq-apart a {text-decoration: none;
  color: var(--backdrop);
  }

.regulation a {text-decoration: none;
color: var(--backdrop);
}

.media-box { margin-top: 1.5rem; 
    }

    .policy-box {margin-top: 1.5rem;
    }

.fa-brands {text-decoration: none;
color: var(--backdrop);
}

   /*----------------------------index end------------------------------*/




/*-------------------------media query index beginning-------------------*/
@media only screen and (min-width: 800px) and (max-width: 1350px) {

  .logo img {
    top: 1rem;  /*I added rem to the unit as it was missing and GPT told me to correct it */ /* was 4.3rem*/ /*5rem*/
    left: 5%;  
    transition: top 0.3s ease-in-out; 
    
     }

     nav { top: 12.5%;  /*was 10%*/
    
    }  /*was 10%*/

     .upper-stripe { 
      padding: 0.5rem 0; 
                         }         




}

@media only screen and (max-width: 800px) {
nav {display: none;}

.within-logo {background-color: var(--backdrop);
  transition: top 0.3s ease-in-out;  /*added by gpt*/

}

/* Sticky state for .within-logo - added by gpt*/
.sticky {   /*all added by gpt*/
  top: 0 !important;
}

.logo img { position: absolute; /*added by gpt*/
top: 13.5%; 
left: 3%;
transition: top 0.3s ease-in-out;  /* added by gpt*/

}
/* Sticky state for .logo img - added by gpt*/

/*.sticky-logo {
  top: 2% !important;
}             I commented it as GPT indicated it as an error*/

.sticky-logo {   /*added by gpt*/
  top: 2% !important;   
}

.wrapper { display: flex;
    flex-wrap: wrap;
  
  }

  .text-in-section1 { flex: 80%;
    max-width: 95%;  /*ask GPT why I had to add this value to achieve the result that this element is not extended for 100% of its width, it is a flex element in a flexbox*/
    
  }
 
  .text1, .text2, .text3 {display: none;}

}

@media only screen and (max-width: 800px) {

  .white-wrapper {
  width: 100%;

  flex-wrap: wrap;

/*height: auto;*/

/*margin-bottom: 80%;*/
}

  .section2 { display: flex;
    justify-content: center;
    align-items: center;
flex-wrap: wrap;
width: 100%;
flex: 1 1 100%;
    max-width: 100%;
height: 70%;
margin: 1rem 0 ;

/*flex: 0 1 100%;*/
padding: 0;
  }

  .section2 img {padding-left: 0;
    /*max-width: 100%;*/
          
  }

  .section2 img.active {
max-width: 100%;
/*height: 100%;*/
  }

  .section3 {
    flex: 0 1 100%;
    padding-bottom: 3.5rem;
    margin-bottom: 20%;
      }

      .ap-roundup { max-width: 100%;
text-align: center;
      }       

      .view-apart {max-width: 100%;}


}

@media only screen and (max-width: 800px) {

  .under-white-wrapper { 
    margin: 80% 0 0;
 /*was 500px*/
z-index: 1;
  } 

  .section4, .section5, .section6, .section7 { flex: 0 1 50%;
 
  }

}

@media only screen and (max-width: 550px) {

  .under-white-wrapper { 
    margin: 90% 0 0;
 
z-index: 1;
  }

  .section3 {
    flex: 0 1 100%;
    padding-bottom: 1rem;
    margin-bottom: 0;
      }

      .ap-roundup { padding: 0 ;
        
              } 

              .section3 {padding: 0;}

              .section4, .section5, .section6, .section7 { flex:  100%;
                padding:  0;
                 height: auto;
                border-bottom: 1px solid #929aa0;
                max-width: 90%;
              }

              .view-apart {margin-top: 0;}

              .apartment-link {padding: .5 rem 0;} 

} 

/*
@media only screen and (max-width: 500px) {
  
  .sub-container { margin: 6rem 0;
    padding: 0 0 0 0.3rem;
    max-width: 100%;

  }
  .text4 {display: block;
  flex: 100%;
text-indent: 10%;}

.text5 {display: block;
  flex: 100%;
text-indent: 35%;} 

.text6 {display: block;
  flex: 100%;
text-indent: 50%;}
} */
 
/*------------------------media query index end-----------------------------*/

/*-------------------------media query menu beginning------------------------*/
    
    @media only screen and (max-width: 800px) {
      /*#main-menu {
        display: none;
      }*/
      #hamburger-menu {
        display: inline;
      }
    }
    
/*-------------------------media query menu end ----------------------------*/