/* General Styles */
.app4 {
  font-family: Arial, sans-serif;
}



.main-container4 {
  display: flex;
  padding: 20px;
  background-image: src('C:\Users\ELCOT\Desktop\react\new\public\assets\old-grungy-ochre-colored-wall-background-texture-photo.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* To cover the entire element */
  background-position: center; /* To center the image */

}

.top-banner4 {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.banner-image4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.banner-text4 h1 {
  font-size: 48px;
  margin: 0;
  color: white;
}

.banner-text4 p {
  font-size: 20px;
  margin: 0;
}


.sidebar4 { 
  width: 25%; /* Keep sidebar width proportional */
  min-height: 250px; /* Use min-height for flexibility instead of fixed height */
  border-radius: 10px; /* Softer radius for modern look */
  padding: 20px;
  background-color: #f4f6f9; /* Light background for sidebar */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
}

.sidebar4:hover {
  transform: translateY(-5px); /* Subtle lift */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}


.investor-count-card4 {
  padding: 15px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 12px; /* More rounded corners for a modern card look */
  background-color: #e3f2fd; /* Soft blue background */
  color: #1565c0; /* Darker blue for contrast */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  height: 140px;

}

.investor-count-card4:hover {
  transform: scale(1.05); /* Slight enlarge on hover */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}
.investor-count-card4 h2{
  padding-top: 10px;
}
.invest-4 {
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 10px;
  background-color: #4b53bc; /* Keep the main background color */
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  height: 60px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.invest-4:hover {
  background-color: #353cad; /* Darker blue on hover */
  transform: scale(1.05); /* Slight enlarge on hover */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}
.invest-4 h3{
  color: white;
}
.investment4{
  padding-top: 4px;
}

.investor-info4 {
  width: 90%; /* Increased width */
  height: 600px; /* Increased height */
  padding: 20px; /* Adjusted padding */
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.85);
  color: #333;
  line-height: 1.6;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  overflow-y: auto; /* Vertical scroll for overflow */
}






.content-container4 {
  width: 75%;
}


.search-bar4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
}

.search-bar4 input {
  width: 60%;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-left: 60px;
  
}

.sort-container4 {
  display: flex;
  align-items: center;
  margin-right: 50px;
  color: rgb(0, 0, 0);
  
}

.sort4 {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-left: 10px;
  cursor: pointer;
}

.investor-list34 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Slightly increased space between cards */
  justify-content: center;
  padding: 20px;
  max-width: 95%; /* Increase container width */
  margin: 0 auto;
}
.line44{
  color: #0f3460;
}

.investor-card34 {
  background-color: rgba(240, 248, 255, 0.9); /* Softer background */
  padding: 20px; /* Slightly increase padding */
  border: 1px solid #ccc;
  border-radius: 15px; /* Rounded corners */
  width: 47%; /* Increase card width for larger container */
  display: flex;
  align-items: flex-start; /* Align content at the top */
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
  opacity: 0;
  animation: fadeInUp 0.6s forwards; /* Slide-up fade-in animation */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.investor-card-content34 {
  display: flex;
  align-items: flex-start; /* Align image and text to the top */
  width: 100%; /* Make sure content fills card width */
}

.investor-card-line34 {
  border: none;
  border-top: 2px solid #ddd; /* Style for the line */
  margin-bottom: 15px;
  margin-top: 15px;
  width: 150%; /* Set the width to 100% to span the entire card */


}


.avatar34 {
  margin-right: 20px; /* More space between image and text */
}

.avatar34 img {
  border-radius: 50%;
  width: 60px; /* Increase avatar size */
  height: 60px;
  transition: transform 0.4s ease;
  margin-bottom: 0;
  display: block;
}

.avatar34 img:hover {
  transform: rotate(10deg) scale(1.15); /* Unique tilt and enlarge effect on hover */
}

.investor-details34 {
  display: flex;
  flex-direction: column; /* Stack text vertically */
  justify-content: flex-start; /* Align text at the top */
}

.kar1 {
  color: black;
  font-size: 18px; /* Decrease font size */
  margin: 0 0 10px 0; /* Increase margin between name and location */
  line-height: 1.4; /* Increase line height for better readability */
}

.kar2, .kar3, .kar4 {
  color: gray;
  font-size: 14px; /* Smaller font size for other text */
  margin: 0 0 10px 0; /* Add spacing between each text element */
  line-height: 1.5; /* Increase line height for more space between lines */
}

.kar5 {
  color: gray;
  font-size: 14px;
  margin-top: 15px; /* More space above the address */
  line-height: 1.6; /* Increase line height for address text */
}

/* Keyframes for slide-up fade-in animation */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px); /* More noticeable slide-up */
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.view-profile-btn34 {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  text-align: center;
  margin-left: 65px;
}

.view-profile-btn34:hover {
  background-color: #0056b3;
}


.investor-card34:hover {
  transform: scale(1.08); /* Slightly larger hover effect */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3); /* Deeper shadow */
  background-color: rgba(255, 255, 255, 0.95); /* Subtle background change on hover */
}


.load-more-container4 {
  text-align: center;
  margin-top: 20px;
}

.load-more-btn43 {
  background-color: #4b53bc;
  color: white;
  padding: 15px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


/* Key Points Section */
.key-points-container4 {
background-color: #1a1a2e; /* Dark navy blue for a more professional look */
padding: 50px 20px;
text-align: center;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.key-points-title4 {
font-family: 'Georgia', serif;
font-size: 32px;
color: #f1c40f; /* Gold color for the title */
margin-bottom: 40px;
letter-spacing: 1.5px;
opacity: 0;
animation: fadeInTitle 1.2s ease-out forwards;
}

@keyframes fadeInTitle {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.key-points-grid4 {
display: flex;
justify-content: space-between;
gap: 20px;
}

.key-point4 {
background-color: #16213e; /* Darker background for key points */
padding: 30px;
border-radius: 12px;
width: 30%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
animation: fadeInKeyPoint 1.5s ease-out forwards;
}

@keyframes fadeInKeyPoint {
from {
  opacity: 0;
  transform: translateY(40px) scale(0.95); /* Adds scaling effect */
}
to {
  opacity: 1;
  transform: translateY(0) scale(1);
}
}

.key-point4:hover {
transform: translateY(-10px) scale(1.1); /* Smooth scaling hover effect */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Increased shadow for hover */
background-color: #0f3460; /* Slightly lighter on hover */
}

/* Icon Animation */
.key-point-icon4 img {
width: 60px;
height: 60px;
margin-bottom: 15px;
transition: transform 0.5s ease;
border-radius: 50%; /* Makes the image round */
}

.key-point4:hover .key-point-icon4 img {
transform: rotate(360deg) scale(1.2); /* Slightly increase size and rotate */
}
.key-point-icon4 img {
width: 60px;
height: 60px;
margin-bottom: 15px;
transition: transform 0.5s ease;
border-radius: 50%; /* Makes the image round */
object-fit: cover; /* Ensures the image covers the entire circular area */
}


.key-point4 h3 {
font-family: 'Georgia', serif;
font-size: 24px;
color: #f5f6fa; /* Light gray for the text */
margin-bottom: 15px;
transition: color 0.3s ease;
}

.key-point4:hover h3 {
color: #f1c40f; /* Gold on hover for emphasis */
}

.key-point4 p {
font-family: 'Arial', sans-serif;
font-size: 16px;
line-height: 1.8;
color: #dcdde1; /* Softer light gray */
transition: color 0.3s ease;
}

.key-point4:hover p {
color: #0abde3; /* Soft cyan text color on hover for accent */
}



.counters-section4 {
  padding: 50px 0;
  text-align: center;
  background-size: cover; /* Ensures full cover background */
  background-position: center;
  background-repeat: no-repeat;
}

.counters-title4 {
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 40px;
}

.counters-grid {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.counter-item {
  background-color: rgba(255, 255, 255, 0.8); /* Slight transparent background */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 22%;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.counter-item4:hover {
  transform: translateY(-10px); /* Hover animation */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

.counter-icon4 {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.counter-item h3 {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.counter-item4 p {
  font-size: 16px;
  color: #666;
}

@media (max-width: 768px) {
  .counters-grid {
    flex-direction: column;
    align-items: center;
  }

  .counter-item {
    width: 80%;
    margin-bottom: 20px;
  }
}

.investment-range {
 
  color: #989998; /* Change color as needed */
  margin: 5px 0;
}