/* Overall Page */

header 
{
   text-align: center;
   background-color: black;
}

body 
{
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   overflow-y: auto;
   height: 100%;
}

nav 
{
   height: 40px; 
   padding: 0 80px; 
   background-color: lightgrey;
   font-family: "Gill Sans", sans-serif;
   font-size: clamp(8px, 1.3vw, 15px); 
   display: flex;
   justify-content: space-between; 
   align-items: center; 
   position: relative;
}

nav .menu-items 
{
   display: flex;  
   justify-content: space-around;  
   width: 100%;
}

nav a 
{
   color: #000000;
   text-decoration: none;
   font-size: larger;
   padding: 10px; 
}

nav .menu-toggle 
{
   display: none;
   font-size: 30px;
   cursor: pointer;
   position: absolute;
   right: 30px; 
}

@media (max-width: 1100px) 
{
   nav 
   {
      padding: 0 30px; 
      font-size: 20px; 
   }

   nav .menu-items 
   {
      display: none;
      width: 100%;
      position: absolute;
      top: 40px; 
      right: 0;
      background-color: lightgrey;
      text-align: center;
   }

   nav .menu-items a 
   {
      display: block;
      padding: 15px;
      border-top: 1px solid #ccc;
   }

   nav .menu-toggle 
   {
      display: block;
   }

   nav .menu-items.active 
   {
      display: block;
   }

   nav a:hover 
   {
      background-color: rgb(155, 155, 155);
   }
}

.header-logo 
{
   width: 600px;
   height: auto;
   max-width: 100%;
   background-color: black;
}

/* Home page */
.container-homepage
{
   display: flex;       
   flex-direction: column;
   align-items: center;              
   height: 100%;        
   overflow: hidden;          
}

.container-top
{
   display: flex;        
   justify-content: center; 
   align-items: center; 
   max-height: 100%;      
   height: 500px;
   overflow: hidden;
}

.container-bottom 
{
   text-align: center;
   max-height: 100%; 
   height: 750px;        
   width: 100%;  
}       

.container-company-photo
{
   flex: 1;
   text-align: center;   
   width: 100%;           
   height: 100%;  
}

.company-photo 
{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.container-company-description
{
   flex: 1;
   text-align: center;
   flex-wrap: wrap; 
   margin: 50px;
}

.company-description
{
   text-align: justify;
   text-align-last: center;
   font-family: sans-serif;
   font-size: clamp(15px, 1.5vw, 24px);
}

@media (max-width: 1100px)
{
   .company-description
   {
      text-align: center;
   }
}

.container-our-listings-title
{
   display: flex; 
   flex-direction: column;     
   align-items: center;          
   overflow: hidden; 
}

.our-listings-title
{
   font-family: "Gill Sans", sans-serif;
   font-size: clamp(30px, 5vw, 40px);
   text-align: center;
   margin: 50px;
   color: Black;
}

.container-our-listings
{
   display: flex; 
   flex-direction: column;     
   align-items: center;   
   margin: 50px;
   margin-top: 0;
   height: 70%;
   border: 5px solid black;
}

.separate
{
   width: 100%;
   height: 30px;
   background-color: black;
}

/* About Us */
.container-aboutus
{
   display: flex;       
   flex-direction: column;
   align-items: center;              
   height: 100%;          
   overflow: hidden;          
}

.container-aboutus-title
{
   display: flex; 
   flex-direction: column;     
   align-items: center;              
   height: 200px;          
   overflow: hidden; 
}

.aboutus-title
{
   font-family: "Gill Sans", sans-serif;
   font-size: 40px;
   text-align: center;
   margin: 120px;
}

.container-aboutus-mult
{
   display: flex;        
   justify-content: center; 
   align-items: center; 
   max-height: 100%;      
   height: 480px;
   width: 100%;
   margin-right: 5px;
}

.container-aboutus-mult-bigger
{
   display: flex;        
   justify-content: center; 
   align-items: center; 
   max-height: 100%;      
   height: 550px;
   width: 100%;
   margin-right: 5px;
}

.container-agent-picture 
{
   display: flex; 
   align-items: center;
   flex-direction: column;
   overflow: hidden;
   width: 375px; 
   height: 100%; 
   justify-content: center;
}

.agent-picture
{
   width: 200px; 
   height: 200px;
   border-radius: 50%; 
   object-fit: cover;
}

.agent-name
{
   font-family: "Gill Sans", sans-serif;
   font-size: 20px;
   white-space: pre-line;
   text-align: center;
   font-weight: bold;
}

.agent-socials
{
   font-family: sans-serif;
   font-size: 15px;
   white-space: pre-line;
   text-align: center;
}

.container-agent-description
{
   flex: 2;
   text-align: center;
   flex-wrap: wrap; 
   margin-right: 50px;
}

.agent-description
{
   text-align: justify;
   text-align-last: center;
   font-family: sans-serif;
   font-size: clamp(17px, 1.5vw, 28px);
}

@media (max-width: 900px) 
{
   .container-aboutus-mult 
   {
      flex-direction: column;
      height: auto;
      margin-bottom: 100px;
   }

   .container-aboutus-mult-bigger
   {
      flex-direction: column;
      height: auto;
      margin-bottom: 100px;
   }

   .container-agent-description
   {
      margin-right: 50px;
      margin-left: 50px;
      margin-top: 10px;
   }

   .container-aboutus-title
   {
      height: 300px;
   }
}

/* Property Search */
.container-propertysearch
{
   display: flex;       
   flex-direction: column;
   align-items: center;              
   height: 100%;          
   overflow: hidden;          
}

.container-mls
{
   display: flex; 
   flex-direction: column;     
   align-items: center;              
   height: 680px;   
   width: 100%;       
   overflow: hidden; 
}

/* Trusted Partners */
.container-trustedpartners
{
   display: flex;       
   flex-direction: column;
   align-items: center;             
   height: 100%;          
   overflow: hidden;          
}

.container-trustedpartners-title
{
   display: flex; 
   flex-direction: column;     
   align-items: center;              
   height: 170px;          
}

.trustedpartners-title
{
   font-family: "Gill Sans", sans-serif;
   font-size: 40px;
   text-align: center;
   margin: 100px;
}

.container-trustedpartners-row
{
   display: flex;        
   justify-content: center; 
   align-items: center; 
   height: auto; 
   width: 100%;   
   margin-bottom: 100px;
   flex-wrap: wrap;
}

.container-trustedpartners-company
{
   display: flex; 
   align-items: center;
   flex-direction: column;
   width: 250px; 
   height: 100%; 
   justify-content: center;
   margin: 100px;
   margin-bottom: 0px;
}

.company-logo
{
   width: 100%;
   height: 100%;
   max-height: 300px;
   max-width: 300px;
   overflow: hidden;
}

.company-logo-inverted
{
   width: 100%;
   height: 100%;
   max-height: 300px;
   max-width: 300px;
   overflow: hidden;
   filter: invert(1);
}

.company-name
{
   font-family: "Gill Sans", sans-serif;
   font-size: 20px;
   white-space: pre-line;
   text-align: center;
   font-weight: bold;
}

.vendor-name
{
   font-family: "Gill Sans", sans-serif;
   font-size: 20px;
   white-space: pre-line;
   text-align: center;
}

.company-contact-info
{
   font-family: sans-serif;
   font-size: 15px;
   white-space: pre-line;
   text-align: center;
}

.ehl-styling
{
   width: 50px;
   height: 50px;
}

/* Our Reviews */
.container-ourreviews
{
   display: flex;       
   flex-direction: column;
   align-items: center;              
   height: 100%;          
   overflow: hidden;          
}

.container-ourreview-title
{
   display: flex; 
   flex-direction: column;     
   align-items: center;              
   height: 350px;          
   overflow: hidden; 
}

.ourreview-title
{
   font-family: "Gill Sans", sans-serif;
   font-size: 40px;
   text-align: center;
   margin: 100px;
   margin-bottom: 80px;
}

.ourreview-description
{
   font-family: sans-serif;
   font-size: 15px;
   text-align: center;
}

.container-ourreviews-row
{
   display: flex;        
   justify-content: center; 
   align-items: center; 
   max-height: 100%;      
   height: auto;
   width: 100%;
   flex-wrap: wrap;
   margin-bottom: 100px;
}

.container-review
{
   display: flex; 
   align-items: center;
   flex-direction: column;
   width: 600px; 
   height: auto; 
   justify-content: center;
   margin: 20px;
   margin-bottom: 0px;
}

.review
{
   
   max-width: 600px; 
   max-height: 600px; 
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media (max-width: 700px) 
{
   .container-review 
   {
      width: 90%;  
      height: auto;
   }

   .review img 
   {
      object-fit: contain; 
   }
}

/* Contact Us */
.container-contactus
{
   display: flex;       
   flex-direction: column;
   align-items: center;              
   height: 100%;          
   overflow: hidden;          
}

.container-contact-field-row
{
   display: flex;        
   justify-content: center; 
   align-items: center;   
   height: 100px;
   margin: 10px;
}

.container-big-contact-field-row
{
   display: flex;        
   justify-content: center; 
   align-items: center;   
   height: 200px;
}

.contact-field
{
   white-space: pre-line;
   margin: 30px;
}

.contact-field textarea 
{
   font-family: "Gill Sans", sans-serif;
   width: 500px;
   height: 30px;
   padding: 10px;
   border-radius: 5px;
   font-size: 15px;
   resize: none; 
}

.big-contact-field 
{
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.big-contact-field textarea 
{
   font-family: "Gill Sans", sans-serif;
   width: 1090px;
   height: 120px;
   padding: 10px;
   border-radius: 5px;
   font-size: 15px;
   text-align: left;
   resize: none;  
   line-height: 1.2;
   word-wrap: break-word;
   overflow-wrap: break-word;
   white-space: pre-wrap;
}

.container-contact-title
{
   display: flex; 
   flex-direction: column;     
   align-items: center;              
   height: 350px;          
   overflow: hidden; 
   margin-bottom: 40px;
}

.contact-title
{
   font-family: "Gill Sans", sans-serif;
   font-size: 40px;
   text-align: center;
   margin: 100px;
}

.contact-description
{
   font-family: sans-serif;
   font-size: 20px;
   text-align: center;
}

.submit-container
{
   display: flex;        
   justify-content: center; 
   align-items: center;   
   height: 150px;
   margin-top: 10px;
   margin-bottom: 40px;
}

.submit
{
   font-family: "Gill Sans", sans-serif;
   font-size: 1.2em; 
   padding: 15px 40px; 
   cursor: pointer; 
}

.container-disclaimer
{
   display: flex; 
   flex-direction: column;     
   align-items: center;  
   margin-left: 200px;
   margin-right: 200px;
   margin-bottom: 50px;
}

.disclaimer
{
   text-align: center; 
   font-family: sans-serif;
   font-size: 14px;
}

@media (max-width: 1200px) 
{
   .container-contact-field-row 
   {
      flex-direction: column;
      height: auto;
   }

   .container-big-contact-field-row 
   {
      flex-direction: column;
      height: auto;
   }

   .contact-field textarea
   {
      width: 80vw;
   }

   .big-contact-field textarea 
   {
      width: 80vw;
   }

   .container-big-contact-field-row
   {
      margin: 45px;
   }

   .container-contact-field-row
   {
      margin: 0px;
   }

   .container-disclaimer
   {
      margin-left: 50px;
      margin-right: 50px;
   }

   .contact-description
   {
      margin-left: 30px;
      margin-right: 30px;
   }
}