body{
    background-color: #ececee;
    font-family: 'Open Sans';
    
    margin: 0;
  
}

div.header-part{
    display: flex;
}

.arm-header{
     text-indent: 5px;
     font-size:20px;
     font-family: 'Open Sans';
}

button.header-part{
    margin-left: 10px;
    margin-top: 20px;
    background-color: #fefefe;
    height: 30px;
    padding-left: 2px;
    border-radius: 4px;
    border:1px solid rgb(177, 175, 175)
    
}

img.log-img{
     object-fit: cover;
}

div.search{
  margin-left: 30px;
}

.search-bar{
    border: 1px solid #ccc;
    border-radius: 12px 0px 0 12px;
    height: 40px;
    margin-left:6px;
    width: 600px;
    margin-top: 8px;
    position: relative;  


   
}
.search-butt{
    background-color: rgb(168, 81, 15);
    color: white;
    height: 43.032px;
    border-radius: 0 12px 12px 0;
    width: 90px;
    border:0px solid ;
    position: relative;  

}
.search-input{
    font-size: 0;
}
div.sign-in{
    margin-top: -35px;
}

button.signin{
    margin-left: 850px;
    margin-top: px;
     color:white;
   background-color:rgb(168, 81, 15);
   height: 29px;
   border-radius:8px;
   border:none;
   width:70px;
    
}

.hero-section {
  position: relative;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 300px;

  object-fit: cover;
  padding-top: 10px;
   transform: scaleX(-1);
}

/* .gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(75, 0, 130, 0.7), rgba(63, 81, 181, 0.5), rgba(255, 193, 7, 0.4));
  height: 200px;
  margin-top: 10px;
} */

.content-container {
  position: absolute;
  height: 101px;
  width: 600px;
  margin-left: 180px;
  margin-top: 50px;
}

.title {
  font-size: 1.875rem; 
  font-weight: 800;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  margin-left: 20px;

}

.description {
  color: rgba(255, 255, 255, 0.95);
  max-width: 600px; 
  padding-top: 0px;
  font-size: 16px;
  margin-left: 20px;
}

@media (min-width: 768px) {
  .title {
    font-size: 2.25rem; 
  }

  .content-container {
    padding: 12px;
  }
}

div.section{
  margin-top: 310px;
  position: absolute;
  height: 150px;
  width: 100%;
   background-color: #B4AFAF33;
   gap: 100px;
}




div.section-buttons {
  display: flex;
  flex-wrap: wrap;       
  gap: 5px;               
  justify-content: flex-start; 
  margin: auto;
   justify-content: center;     
  align-items: center;
}

button.section {
  height: 40px;
  padding: 0 20px;
  border-radius: 25px;
  background-color: white;
  border: 0.1px solid #ececee;
  font-size: 14px;
  white-space: nowrap;  
  margin-right: 4px;

}



button.section:hover{
    height: 40px;
  padding: 0 20px;
  border-radius: 25px;
  background-color: white;
  border: 0.1px solid #ececee;
  font-size: 14px;
  white-space: nowrap;  
    border:0.1px solid #ccc;
   
}

.filter-div{
    margin-top: 22px;
    background-color: white;
    border-radius: 14px;
    /* height: 920px; */
    height: auto; 
    min-height: 940px;
    width:300px;
    position: absolute;
    margin-left: 10px;
}


.fil{
    padding-top:10px;
    padding-left: 20px;

}




p.region{
    color:rgba(56,65,85,1);


}

select.region{
    
     /* border:; */
     border-radius: 5px;
     border:none;
     background-color: rgba(239,239,239,1);
     width:250px;
     height:40px;
}

div.region{
    
     padding-left: 20px;
}


p.country{
    color:rgba(56,65,85,1);


}

select.country{
    
     /* border:; */
     border-radius: 5px;
     border:none;
     background-color: rgba(239,239,239,1);
     width:250px;
     height:40px;
}

div.country{
    
     padding-left: 20px;
     padding-top: 5px;
}

p.city{
    color:rgba(56,65,85,1);


}

select.city{
    
     /* border:; */
     border-radius: 5px;
     border:none;
     background-color: rgba(239,239,239,1);
     width:118px;
     height:40px;
}

div.city{
    
     padding-left: 20px;
     padding-top: 5px;
}
.city-town{
    display: flex;

}

p.town{
    padding-top: 6px;
    margin-left: 26px;
    color:rgba(56,65,85,1)
}
select.town{
    border-radius: 5px;
     border:none;
     background-color: rgba(239,239,239,1);
     width:118px;
     height:40px;
     margin-top: 57px;
     margin-left: -43px;

}




p.filed-influence{
     color:rgba(56,65,85,1);
     padding-top: 10px;
}

select.filed-influence{
    
     /* border:; */
     border-radius: 5px;
     border:none;
     background-color: rgba(239,239,239,1);
     width:250px;
     height:40px;
     margin-top: -20px;
}

div.filed-influence{
    margin-left: 20px;
    margin-top: 10px;
}

div.speciality{
    margin-left: 20px;
}

p.speciality{
    color:rgba(56,65,85,1);
    margin-top: 20px;

}

input.speciality{
    width:250px;
    height:40px;
    border-radius:5px;
    border: 1px solid #ccc;
    margin-top: 5px;
    

}

button.spciality{
    border-radius: 10px;
    border:1px solid #ccc;
    background-color: rgba(245,241,249,1);
    
}


div.expertise{
    margin-left: 20px;
}

p.expertise{
    color:rgba(56,65,85,1);
    margin-top: 20px;

}

input.expertise{
    width:250px;
    height:40px;
    border-radius:5px;
    border: 1px solid #ccc;
    margin-top: 5px;

}

button.expertis{
    border-radius: 10px;
    border:1px solid #ccc;
    background-color: rgba(245,241,249,1);
   
}

div.applay-filters{
    margin-top: 23px;
    margin-left: 30px;
}

button.applay-filters{
    background-color: rgb(168, 81, 15);
    color: white;
    border:1px solid #ccc;
    border-radius:10px;
    height: 40px;
    width: 250px;
    margin-top: 10px;
}


button.applay-filters:hover{
    background-color: rgb(148, 68, 7)
}

button.save-search{
    background-color: white;
    color: black;
    border:1px solid #ccc;
    border-radius:10px;
    height: 40px;
    width: 250px;
    margin-top: 10px;
}

button.save-search:hover{
    border: 2px solid #ccc;
}

button.create-alert{
    background-color: white;
    color: black;
    border:1px solid #ccc;
    border-radius:10px;
    height: 40px;
    width: 250px;
    margin-top: 10px;
}

button.create-alert:hover{
     border: 2px solid #ccc;
}

div.fil-reset{
    display: flex;
}

input.rst{
    margin-top: 25px;
    margin-left: 170px;
    height: 20px;
    color:rgb(168, 81, 15);
    border: none;
    background-color: white;
}

button.reset:hover{
    color:rgb(85, 39, 4)
}

div.main{
   
    display: flex;
    margin-top: 490px;
}



#all-cards {
  
  display: grid;
  grid-template-columns: repeat(3,300px);
   grid-auto-rows: 180px;
  row-gap: 60px; 
  margin-top: 60px;
  padding: 0; 
  width: 990px;
  box-sizing: border-box;
  margin-left: 340px;
  width: 100%; 
  height: 1000px; 
  column-gap: 45px;

 }

div.section-cards{
    width: 280px;
}




div.cards1{
  color:black;
  margin-top:10px;
  background-color: white;
  width:335px;
  height: 230px;
  border-radius:15px;
  text-align: left;

}

div.bio{
    display: flex;
}

h4.fullname{
    color:black;
    margin-left: 16px;
    margin-top: 32px;
    
}

p.profession{
    margin-left: 92px;
    margin-top: -35px;
    font-size: 12px;
    color: #475569;
}


p.living-loc{
    color: rgba(71,85,105,1);
    margin-left: 92px;
    margin-top: -22px;
    font-size: 10px;
}



.pr-field-container {
    display: flex;
    flex-wrap: wrap;       /* allows boxes to go to next line */
    gap: 5px;  
    margin-left: 10px;   
    margin-top: 20px;
}

div.pr-field {
    background-color: rgb(241,245,249);
    height: 18px;
    text-align: center;
    border-radius: 10px;
    font-size: 11px;
    padding: 0 8px;        /* horizontal padding */
    line-height: 18px;     /* vertical center */
    white-space: nowrap;    /* prevent text wrap inside the box */
    display: inline-block;  /* box width adjusts to text */
}


/* div.pr-field-container{
  display: flex;


}


div.pr-field {
    background-color: rgb(241,245,249);
    height: 18px;
    text-align: center;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 10px;
    margin-top: 20px;
    display: inline-block;  
    padding: 0 8px;         
    line-height: 18px;      
    white-space: nowrap;   
} */

/* div.pr-field{
    background-color: rgb(241,245,249);
    width: 71px;
    height: 18px;
    text-align:center;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 10px;
    margin-top: 20px;
} */

p.profile-view{
    padding-top: 36px;
    padding-left: 15px;
    font-size:13px;
    color:rgb(168, 81, 15);
    text-align: center;
}


a.profile-view:link{
    text-decoration: none
}
a.profile-view:visited{
    text-decoration: none
}

/* div.profile-connect{
    display: flex;
}

button.connect{
    margin-left: 115px;
    height: 30px;
    margin-top: 15px;
    background-color: white;
    border:1px solid #ccc;
    border-radius: 5px;
} */

img.people-image{
  width: 60px;
  height: 60px;
  border-radius: 100%;
  margin-top: 16px;
  margin-left: 15px;
}

div.map-view{
    height: 40px;
    position: absolute;
    
}
div.saved-searchs{
    height: 40px;
    position: absolute;
}
div.sort{
    height: 40px;
    position: absolute;
}
div.sort-select{
    height: 40px;
    position: absolute;
}

button.map-viewbut{
    margin-left:680px ;
    margin-top: 20px;
    background-color:#ececee;
    border: 1px solid #ccc;
    width: 90px;
    height: 30px;
    position: relative;  
    box-sizing: border-box;  
    z-index: 10;
    
    
    
}

button.saved-searchs{
    margin-top: 20px;
    margin-left: 340px;
    background-color:#ececee;
    border: 1px solid #ccc;
    width: 115px;
     height: 30px;
      position: relative;  /* Make sure it's positioned normally */
    box-sizing: border-box;  /* Ensures padding and border are included in width and height */
    z-index: 10;
    

}

p.sort{
    color: rgb(71,85,110);
    font-size: 12px;
    margin-left: 500px;
    margin-top: 22px;
}

div.sort-select{
    margin-left: 530px;
    margin-top: 15px;
   
}

select.sort{
    background-color:rgb(239,239,239);
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 120px;
    height: 25px;
    text-align: center;
      height: 30px;
    margin-top: 3px;
}


div.pagination{
    margin-left: 700px;
    display: flex;
    
}

button.previous{
    background-color: #ececee;
    border: none;
    font-size:15px;
    border:1px solid #ccc;
    border-radius: 5px;

}


button.next{
    margin-left: 10px;
    background-color: #ececee;
    border: none;
    font-size:15px;
    border:1px solid #ccc;
    border-radius: 5px;
    
}



.pagination button.active {
  background-color: rgb(15,23,42);
  color: white;
}


.page-btn {
  margin: 0 5px;
  padding: 6px 12px;
  background-color: white;
  border: 1px solid #ccc;
  cursor: pointer;
   height: 40px;
    width: 30px;
    border-radius: 3px;
}

.page-btn.active {
   background-color: rgb(15,23,42);
    height: 40px;
    width: 30px;
    border: none;
    color: white;
    border-radius: 3px;
    margin-left: 10px;
}







#map-view-container {
    display: none; 
    margin-left: 320px;
    width: 50%;     
    height: calc(100vh - 150px); 
    margin-top: 80px;
    height: 950px;
    border-radius: 20px;

}

img#mapview{
     border-radius: 20px;
     width: 500px;
     height: 700px;
      object-fit: cover;
}



/* #view-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 320px;
  gap: 20px;
}

#map-view-container {
  display: none;
  flex: 1;
  max-width: 50%;
  height: 950px;
  border-radius: 20px;
}

#grid-view-container {
  flex: 1;
}

.list-view #all-cards {
  display: flex;
  flex-direction: column;
  margin-left: 0px;
}

.list-view .card {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
} */



#map-and-list-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
  margin-left: 320px;
}

#map-container {
  
  height: 900px;
  border-radius: 20px;
  overflow: hidden;
}

#list-container {
  
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 420px;
  border-radius: 15px;
  background: #ffffffa1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#people-list {
  overflow-y: auto;
  padding: 10px;
}

.person-card {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #eee;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 11px;
  margin-top: 10px;
}

.person-card img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.person-info {
  flex: 1;
}

.person-info h4 {
  margin: 0;
}

.person-info p {
  margin: 0;
  color: gray;
}

.view-btn {
  background: none;
  border: none;
  color:  rgb(168, 81, 15);
  font-weight: bold;
  cursor: pointer;
}



.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.5); 
}


.modal-content {
  background-color: #fff;
  margin: 10% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
  border-radius: 8px;
  position: relative;
  max-height: 300px;
   overflow-y: auto;
}

.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: black;
}

#saved-searches-list span {
  color: #676768;
  margin-top: -10px;
}


p.nsimg{
  margin-left: 500px;
}




div.footer{
    height: 250px;
    width:100%;
    background-color: white;
    margin-top: 20px;
}

.footer-logo{
    margin-left: 100px;
    padding-top: 60px;
}
a.footer-logo-href{
    text-decoration: none;
}
a.footer-logo-href:visited{
 color:black;
 text-decoration: none;
}
.logo-desc{
    margin-top: -15px;
    font-size: 12px;
    color: rgb(71 85 105 / 1);
}

.footer-explore{
    margin-left: 460px;
    margin-top: -50px;
}

.exp{
    font-size: 14px;
     color: rgb(71 85 105 / var(--tw-text-opacity, 1));
     margin-top: -10px;
}

.footer-community{
     margin-left: 590px;
     margin-top: -135px;
}

.comm{
    font-size: 14px;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
     margin-top: -10px;
}

.newsletter{
     margin-left: 900px;
     margin-top: -180px;

}

input.email{
    width: 200px;
    height: 30px;
    margin-top: -15px;
    border-radius: 5px 0px 0px 5px;
    border:1px solid #ccc
    /* display: flex; */
}

.subscribe{
     height:34px;
     position:absolute;
     margin-top:-4px;
     background-color:rgb(168, 81, 15);
     border:none;
     border-radius: 0px 5px 5px 0px;
     color:white;
     
}

.subscribe:hover{
     height:34px;
     position:absolute;
     margin-top:-8px;
     background-color:rgb(168, 81, 15);
     border:none;
     border-radius: 0px 5px 5px 0px;
     box-shadow: 0px 0px 0px 0.6px rgb(168, 81, 15);
     color:white;
     
}