.casa-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-right: 10px;
}

.popup-trigger {
  margin: 0 auto; /* Center the image horizontally */
  display: block; 

  width: 260px;
  height: auto;
}

.main-img {
  margin: 0 auto; /* Center the image horizontally */
  display: block; /* Ensure the image is displayed as a block element */
  width: 260px;
  height: auto;
  cursor: pointer; /* Set the cursor to pointer */
}


.casa-title {
  margin: 0 auto;
  text-align: center;
  color: #102d7b;
}

.popup {
  cursor: grab;
  background-color: #FFF;

  /* Set maximum height */
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  /* Use flexbox to align items */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  max-width: 1080px;
  padding: 40px;
  width: 90%;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
  /* Initially hidden */
  justify-content: center;
  align-items: center;
}

/* Style for the image */
#popupImage {
  max-width: 320px;
  /* Set maximum width to 200px */
  max-height: 250px;
  /* Set maximum height to 150px */
  margin-right: 20px;
  margin-top: 12px;
  padding: 0px;
}

.left-image-box {
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */


}

.contact-box {
  flex: 1;
  /* Allow the contact box to grow and take available space */
  margin: 0;
  /* Remove any margin */
}

.content {
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
}


.title {
  font-family: "Open Sans", sans-serif;

  font-size: 18px;
  font-weight: 400;
  margin: 0;
  font-style: italic;
}

.name {
  font-family: Raleway, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 48px;
}

.bio {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin: 16px 0 0;
}

/* Style for the image box */
.left-image-box {
  display: flex;
  /* Use flexbox for layout */
  flex-direction: column;
  /* Arrange items in a column */
  align-items: center;
  /* Center items horizontally */
  max-width: 320px;
  background-color: white;
  /* Set background color of image box to white */
  padding: 0px;
  /* Add some padding */
  border-radius: 0px;
  /* Add border radius */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  /* Add shadow */
  margin-right: 40px;
  /* Add margin */
}

/* Style for the image */
#popupImage {
 width: 260px;
  /* Set maximum width to 300px */
  max-height: 250px;
  /* Set maximum height to 250px */
  margin-right: 0px;
  margin-top: 0px;
  padding: 0px;
}

.left-image-box {
  display: flex;
  /* Use flexbox for layout */
  flex-direction: column;
  /* Arrange items in a column */
  align-items: center;
  /* Center items horizontally */
}

.contact-box {
  width: 260px;
  /* Set maximum width to 300px */
  max-height: 250px;
  /* Set maximum height to 250px */
  margin-top: 0px;
}

.contact-container {
  display: flex;
  align-items: center;
  margin-top: 0px;
  padding: 10px;
  
}

.svg-container {
  margin-right: 5px;
  padding: 5px;
}

.circle {
  width: 30px;
  height: 30px;
  background-color: #102d7b;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.casa-left-icon {
  width: 20px;
  height: 20px;
}

.casa-left-icon svg {
  fill: white;
  width: 100%;
  height: 100%;
}

.casa-left-icon-cell svg {
  fill: white;
  width: 20px;
  /* Adjust the size of the icon */
  height: 20px;
  transform: translate(20%, 10%);
  /* Move the icon more to the right and a little bit down */
}

.button_slide a {
  color: #000000;
}

.button_slide {
  color: #000000;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 0px;
  padding-top: 4px;
  padding-right: 20px;
  padding-bottom: 4px;
  padding-left: 20px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #000000;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}



.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #000000;

}

.slide_right:hover a {
  color: #FFF
}

#outer {
  width: 364px;
  margin: 50px auto 0 auto;
  text-align: center;

}

a {
  color: #102d7b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 200;
}

a:hover {
  text-decoration: underline;
  /* Underline on hover */
}

.casa-social-icons {
  position: absolute;
  top: 30px;
  right: 40px;
  display: flex;
  /* Align items horizontally */
}

.casa-social-icons .svg-box {
  margin: 10px;
  /* Add spacing between icons */
}

.casa-social-icons .img-svg {
  width: 25px;
  height: 25px;
  fill: #a5a5a5;
  /* Set default color of icons */
  transition: fill 0.3s ease;
  /* Smooth transition for color change */
}

.casa-social-icons .img-svg:hover {
  fill: #102d7b;
  /* Change color on hover */
}

/* Media queries for responsiveness */

/* For screens smaller than 768px (tablets) */
@media screen and (max-width: 768px) {
  /* Your existing CSS for tablets */

  /* Additional adjustments for screens smaller than 768px (mobile) */
  .popup-trigger {
    height: auto; /* Allow height to adjust based on content */
    max-width: 100%; /* Set maximum width to 100% */
  }

  .main-img {
    height: auto; /* Allow height to adjust based on content */
    max-width: 100%; /* Set maximum width to 100% */
  }

  .left-image-box {
    flex-direction: column; /* Arrange items in a column */
    max-width: 100%; /* Set maximum width to 100% */
    margin-right: 0; /* Remove right margin */
  }

  .popup {
    padding: 20px; /* Reduce padding */
    max-width: 100%; /* Set maximum width to 100% */
    width: auto; /* Set width to auto */
  }

  .contact-box {
    max-width: 100%; /* Set maximum width to 100% */
  }

  .svg-container {
    margin-right: 5px; /* Adjust margin */
  }

  .button_slide {
    padding: 4px 10px; /* Adjust padding */
  }

  #outer {
    width: 100%; /* Set width to 100% */
    max-width: 100%; /* Limit maximum width */
    margin: 50px auto 0 auto; /* Center horizontally and add top margin */
  }
}

/* For screens smaller than 480px (most smartphones) */
@media screen and (max-width: 480px) {
  /* Additional adjustments for screens smaller than 480px (most smartphones) */
  .popup-trigger {
    width: 100%; /* Set width to 100% */
    max-width: none; /* Remove maximum width */
  }

  .main-img {
    width: 50%; /* Set width to 100% */
    max-width: none; /* Remove maximum width */
  }

 .left-image-box {
  max-width: 100%; /* Set maximum width to 100% */
  margin: 0 auto; /* Center the box horizontally */
  align-items: center; /* Corrected spelling for align-items */
}

  .title {
    display: none;
         
  }

  .name {
    display: none;
   
  }

  .bio {
    display: none;

  }

  .popup {
    padding: 10px;
     display: block;/
  }

  .button_slide {
    font-size: 12px; /* Reduce font size */
    padding: 3px 8px; /* Adjust padding */
  }
}