/*----------------apartamenty beginning--------------------------*/


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

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

  html, body { position: relative;
     
  }
  

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

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

}


    .upper-stripe { display: flex;
      box-sizing: border-box;
      width: 100%;
      max-width: 1850px;   /*was1500px*/
      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 1500px*/
    padding: 20px;
    transition: all 0.4s ease;
    z-index: 3; /*was z-index: 1; but it made menu'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 .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 li 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: #3F524E;                 /* it was used #4682B4*/
    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-----------------------*/


/*------------------------------vicinity beginning-----------------------------------*/

.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;
/*border: 2px solid red;*/
}

.vicinity-caption { width: 100%;
    max-width: 1500px; 
    font-size: 2rem;
    font-weight:bold;
    text-align: center;
    /*border: 1px solid green;*/
    margin-bottom: 6rem;
    
}

.vicinity-section1, .vicinity-section2, 
.vicinity-section3, .vicinity-section4 { display: flex;
  justify-content: center;
      width: 100%;
    max-width: 1850px;   /*was 1500px*/
    gap: 10px; 
    margin-bottom: 18rem;
    background-color:   #32413E;/* #5E8FA4;*/
    border-radius: 5px;
    
    }

    .sun-rise-box { flex: 0 1 48%; 
      height: 50vh;
      background-image: url(photos/sunrise-sea.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform:translateY(-6%);
      border-radius: 5px;
      /*border: 2px solid blue;*/  
    }

       /*.sun-rise-img { 
        transform:translate(5%, -10%); 
        }*/

.text-box {flex: 0 1 48%;
transform: translateY(6%);
padding: 2rem 1rem 0 3rem;
background-color: #D8DEE1;
line-height: 1.8;
font-size: 1.1rem;  
border-radius: 5px;
box-shadow: 2px 3px #B0B6BA;
}

.text-heading {text-indent: 4%;
  font-size: 1.5rem;

}

.bike-path-box { flex: 0 1 48%; 
  height: 50vh;
  background-image: url(photos/cycling.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform:translateY(-6%);
  border-radius: 5px;
}

.zoo-park-box {flex: 0 1 48%; 
  height: 50vh;
  background-image: url(photos/zoo-park.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform:translateY(-6%);
  border-radius: 5px;
}

    /*
    .sun-rise-box { box-size: border-box;
   transform:translate(5%, -13%); 
    }
 .sun-rise-img { float: left;
    transform:translate(5%, -13%); 
margin-right: 3rem;
}

.sun-rise-text { max-width: 100%;
   float: left;
    
    margin-left: 2%;
    text-align: left;
    padding-right: 2rem;
    
    color: var(--backdrop);
    font-size: 1.3rem;
    border: 1px solid blue;}

strong {text-indent: 2rem;
border: 1px solid red;} */











 








.under-white-wrapper { display: flex;
  width: 100%;
  height: auto;   /* was 35vh*/
  flex-wrap: wrap;
  justify-content: center;
margin: 1% 0 0; /*the first value was in % and it was 20%*/
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);
      }


   /*----------------------------vicinity end------------------------------*/




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

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

     nav { top: 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*/
    
  }
 
 
}



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

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

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

}

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

  .under-white-wrapper { 
    margin: 10% 0 0; /*the 1st value was 90%*/
 
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 query menu with logo end-----------------------------*/

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

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

  .vicinity-section1 { 
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 10rem;
}

.text-heading {text-align: center ! important;}

  .sun-rise-box {flex: 100%;
    }

  .text-box {flex:  100%;
    padding: .8rem 1rem 0 1rem;
    
  }

  .vicinity-section2 {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 10rem;
  }
  .bike-path-box {flex: 100%;
    }

    .vicinity-section3 {
      flex-wrap: wrap;
      gap: 0;
      margin-bottom: 10rem;
    }
    .zoo-park-box {flex: 100%;
    }

}




/*-------------------------media query vicinity end ------------------------------*/