/*----------------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;  /*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 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.sticky a {color: red;}  /*if it does not work it must be cancelled*/

  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;   /*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 {    /*I added li and the color began to work*/
    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: white;   
}*/

  
  .nav.sticky .nav-links li a {
    color: white;   
    transition: all 0.4s ease;
  }
  
  .nav.sticky .nav-links li a:hover {
    color: white;  
  }


    
/*.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;

}

.apart-caption { width: 100%;
    max-width: 1500px; 
    font-size: calc(1.2rem + 1vw);   /*was 2rem*/
    font-weight:bold;
    text-align: center;
    /*border: 1px solid green;*/
    margin-bottom: 3rem;
    
}

.photo1-box, .photo2-box, .photo3-box, .photo4-box {
flex: 50%;
text-align: left;
padding: 0 0 5rem 3rem;
font-size: 1.5rem;
line-height: 2rem;
/*border: 1px solid blue;*/
}

.apartment-name {padding-bottom: 1.3rem;
font-size: calc(.8rem + .8vw);    /*was 1.5rem*/
font-weight: 900;
}

.hotelroom-img {max-width: 100%;}

/*.text-in-hotel-room {
max-width: 100%;
margin: 0 auto;
text-align: left;
font-size: 1.3rem;
padding: .5rem 0 0 8%;
margin-left: 11%;
line-height: 2rem;
border: 1px solid green;
}*/

 .more-info { max-width: 30%;  
  text-align: center;
  font-size: calc(1rem + .7vw);    /*was 100%*/
  margin: 1.8rem auto;
 border: 2px solid black;
 border-top-left-radius: 15px;
 border-bottom-right-radius: 15px;
 padding: .6rem;
}

.more-info:hover {
background-color: #3F524E;
color: #fff;
transition: .5s;

}


.more-info a {text-decoration: none;
color: inherit;
}

.promo-text { width: 100%; 
  max-width: 1500px;
  margin-top: 5rem;
  font-size: 2rem;
padding: 1rem;

}

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

  
.accordion-container {
  padding: 8vw; /* byłopadding: 200px;*/
  
    }
 

h2 {text-align: center;
margin-bottom: 1.2rem;}

.faq-drawer {
  margin-bottom: 30px;
}

.faq-drawer__content-wrapper {
  font-size: 1.25em;
  line-height: 1.4em;
  max-height: 0px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.faq-drawer__title {
  border-top: #000 1px solid;
  cursor: pointer;
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  padding: 30px 0 0 0;
  position: relative;
  margin-bottom: 0;
  transition: all 0.25s ease-out;
}

.faq-drawer__title::after {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: " ";
  display: inline-block;
  float: right;  
  height: 10px;
  left: 2px;
  position: relative;
  right: 20px;
  top: 2px;
  transform: rotate(135deg);
  transition: 0.35s ease-in-out;
  vertical-align: top;
  width: 10px;
}

/* OPTIONAL HOVER STATE */
.faq-drawer__title:hover { 
  color: #4E4B52;
}

.faq-drawer__trigger:checked
  + .faq-drawer__title
  + .faq-drawer__content-wrapper {
  max-height: 560px;  /*było 350px ale dłuższy tekst wpisany był obcinany przy szerokości ekranu 240px, ta częśc odpowiada za ilość wpisanego tekstu */
}

.faq-drawer__trigger:checked + .faq-drawer__title::after {
  transform: rotate(-45deg);
  transition: 0.25s ease-in-out;
}

input[type="checkbox"] {
  display: none;
}

/*------------------------------contact form beginning------------------------*/

.contact-form-container  { flex: 0 1 42%;
   box-sizing: border-box;
padding: 0 0 0 6%;

}

.contact-caption {border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color:orange; }

.upper-contact-details {flex: 0 1 100%;
margin-bottom: 2rem;
/*text-align: left;*/
font-size: calc(.8rem + .8vw); 
padding: 3rem 0 3rem 1.2%;
}

.top {border-top-style: solid;
  border-top-width: 5px;
  
     }


.upper-contact-details div {width: 33%;
  float: left;
  color: #3F524E;
  font-size: calc(.8rem + .6vw);
  padding: 2rem 0 2rem;
  text-align: center;
  }

.address-box {font-size: 1.5rem;}

.line-one, .line-two, .line-three { font-size: calc(.8rem + .6vw);

}

.fa-location-dot { font-size: 2rem;
color: #4682B4;
padding-right: 1.2rem;
}

 .fa-phone  {font-size: 2rem;
  color: #4682B4;
  padding-right: 1.2rem;
}

.fa-envelope {
font-size: 2rem;
color: #4682B4;
padding-right: 1.2rem;
}

.map-container {flex: 55%;
  }

input[type=text], input[type=email], textarea { box-sizing: border-box;
  
  padding: .5rem 0 2rem .3rem;
 margin-bottom: 1rem;
 width: 90%;
 border-radius: 4px;
 border: 1px solid black;
 resize: vertical;
}


input[type=submit] {
padding: .5rem;
width: 150px;
border-radius: 4px;
box-sizing: border-box;
 background-color:  #3F524E;
 color: var(--backdrop);
 font-size: 1.3rem;
resize: vertical;

}

input[type=submit]:hover {
color: #3F524E;
background-color: var(--backdrop);
transform: 1s;

}

/*------------------------------contact form end------------------------*/



.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-text { flex: 100%;
  max-width: 95%;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.6rem;

}

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


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

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



   /*----------------------------apartamenty end------------------------------*/

   /*-------------------------------apartament-1 beginning----------------------------*/
.gallery-apartment1 {display: grid;
width: 100%;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
gap: 5%;
margin-bottom: 5%;

}


/*-------------------------------apartament-1 end----------------------------*/


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




   

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




/*-------------------------media query apartamenty 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*/
      }
 
      .photo1-box, .photo2-box, .photo3-box, .photo4-box {
        flex: 100%;
        text-align: center;
        padding: 0 .6rem;
        font-size: 1.3rem;
        line-height: 2rem;
        /*border: 1px solid blue;*/
        }

        .more-info { max-width: 33%;  
          text-align: center;
          font-size: calc(1.2rem + 1.2vw);
          margin: 1.8rem auto;
         border: 2px solid black;
         border-top-left-radius: 15px;
         border-bottom-right-radius: 15px;
         padding: .6rem .3rem;
        }
 
/*----------------------------------------media query contact beginning------------*/
.upper-contact-details div {width: 100%;
     }

     .contact-form-container  { flex: 100%;
      box-sizing: border-box;
   padding: 0 0 3% 6%;

      }

      .map-container { flex:  100%;
      text-align: center;
        border: 1px solid blue;
            }

            .line-one, .line-two, .line-three { font-size: calc(.8rem + 1.5vw);
            }
 

/*-----------------------------------------------------media query contact end------------*/

}



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

  .under-white-wrapper { 
    margin: 20% 0 0;  /*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: 20% 0 0;   /*first 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: .5rem 0;} 

} 

 
/*------------------------media query apartamenty 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 apartament-1 beginning ---------------------------------------*/
@media only screen and (max-width: 800px) {

  .gallery-apartment1 {
grid-template-columns: 1fr;
margin-top: 8%; 


  }


}


/*-------------------------media query apartament-1 end ---------------------------------------*/