/* General Grid Styling */
.service_grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on small screens */
  gap: 20px;
  width: 100%;
  justify-items: center;
  padding: 30px; /* Added padding for better spacing */
  background-color: #f8f9fa; /* Light background color for contrast */
  border-radius: 10px; /* Rounded corners for a softer look */
  box-shadow: 0px 4px 10px #2c3e50; /* Subtle shadow for depth */
  border: solid #2c3e50;
}

/* Image Styling */
.img-fluid {
  width: 100%;
  max-width: 100px;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  border-radius: 20px; /* Rounded corners for images */
  cursor: pointer;
}

.img-fluid:hover {
  border: solid 2px #1abc9c; /* Blue border on hover */
  transform: scale(1.1); /* Slightly enlarge on hover */
}




/* Circle Avatar Styling */
.circle-avatar {
  width: 150px;
  height: 150px;
  background-color: #2c3e50;
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible; 
  position: relative; 
}

.circle-avatar img {
  width: 100%;
  height: auto; 
  border-radius: 50%; 
  position: relative;
  top: -20px; 
}

/* Hover Effect for Submit Button */
#submitButton:hover {
  background-color: #1abc9c;
  transform: scale(1.05); 
}

/* Flexbox for Text and Image */
.pic_text_flex {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center; 
  cursor: pointer;
}

/* Responsive Design */

/* Medium Screens (Tablets) */
@media (min-width: 768px) {
  .service_grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

/* Large Screens (Desktops) */
@media (min-width: 1024px) {
  .service_grid {
      grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
  }
}

/* Extra-Large Screens (Desktops) */
@media (min-width: 1440px) {
  .service_grid {
      grid-template-columns: repeat(4, 1fr); /* 4 columns on very large screens */
  }
}

/* Masthead Styling with Background Image */
.masthead {
  position: relative; /* Required for absolute positioning of the overlay */
  background-image: url('../assets/img/landskap.webp'); /* Path to your background image */
  background-size: cover; /* Ensures the image covers the entire header */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  padding: 100px 0; /* Adds some padding for spacing */
  text-align: center; /* Centers the content */
  color: white; /* Ensures text is white for readability */
  overflow: hidden; /* Ensures the overlay does not spill outside */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7); /* Add a subtle shadow for depth */
}

/* Dark Overlay */
.masthead::before {
  content: ""; /* Empty content for the pseudo-element */
  position: absolute; /* Absolute positioning */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* Dark overlay with 50% opacity */
  z-index: 1; /* Place the overlay behind the text */
}

/* Ensure content is above the overlay */
.masthead .container {
  position: relative; /* Ensures the text is above the overlay */
  z-index: 2; /* Place the text above the overlay */
}


/* Heading and Subheading Styling */
.masthead h1 {
  margin-bottom: 20px; /* Space below the main heading */
  margin-top: 20px;
  font-size: 2rem; /* Adjust font size as needed */
}

.masthead h2 {
  margin-bottom: 20px; /* Space below the secondary heading */
  font-size: 1.5rem; /* Adjust font size as needed */
  
}

.masthead .masthead-subheading {
  margin-bottom: 0; /* Space below the subheading */
  font-size: 1.25rem; /* Adjust font size as needed */
}




/* Ensure the image fits properly in its column */
.profile-img {
  width: 100%;
  max-width: 500px; /* Adjust as needed */
  height: auto;
  border-radius: 50%; /* Optional: if you want a circular profile picture */
  margin-top: 20px; /* Space above the image on smaller screens */
}


.profile-info {
  margin-top: 15px; /* Space between the image and text */
  text-align: center; /* Center align text */
}

.profile-name {
  font-size: 1.5rem; /* Adjust size as needed */
  font-weight: 100;
  margin: 0; /* Remove default margins */
  color: #ffffff; /* Dark color for better readability */
}

.profile-title {
  font-size: 1rem; /* Adjust size as needed */
  color: #ffffff; /* Lighter color for subtitle */
  margin: 5px 0 0; /* Space above the title */
}
/* Responsive Design */
@media (max-width: 992px) {
  /* On devices smaller than large screens, make the columns stack vertically */
  .row {
      display: flex;
      flex-direction: column;
      align-items: center; /* Center the content horizontally */
  }
  
  .col-lg-4 {
      width: 100%; /* Make sure columns take full width on smaller devices */
      text-align: center; /* Center align text on smaller screens */
  }
  
  .profile-img {
      margin-top: 20px; /* Add space between text and image on small devices */
  }
}