/* For Navigation */
/* 1. Main navigation bar background */
/* Styling for the links */
.nav-container {
  display: flex;
  /* justify-content: space-between; */
  /* background-color: #ffffff; */
  align-items: center;
  padding: 10px 20px;
}
.logo img {
  height: 60px; /* Adjust height as needed */
  width: auto;
}
.top-nav {
  display: flex;
  gap: 20px; /* Adjust spacing between links */
}
.top-nav a {
  color: blue;
  padding: 0 20px;
  text-decoration: none;
  font-size: 17px;
}
/* 2. Different background color when hovering over a link */
.top-nav a:hover {
  color: #ddd;
}
/* 3. Different background color for the active/current page link */
.navbar a.active {
  background-color: #ff5733; /* Sunset Orange Hex */
  color: white;
}

/* THE MAGIC TRICK: Pushes this container to the far right */
.social-icons {
  margin-left: auto; 
  display: flex;
  gap: 15px; /* Space between the two icons */
}

/* Styling the icons */
.social-icons a {
  color: #333333;
  font-size: 20px; /* Icon size */
  transition: color 0.2s ease;
}

/* Hover effects for brand colors */
.social-icons a:hover .fa-facebook {
  color: #1877F2; 
}

.social-icons a:hover .fa-linkedin {
  color: #0A66C2; 
}
/* end Navigation */

/* Pages */
body {
  /*background: linear-gradient(90deg, white, gray);*/
  background-color: #eee;
}

body, p {
  font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: justify;
}

.container_old1 {
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 177px;
  max-width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
}

.row:before, .row:after {
  display: table;
  content: " ";
}

h1 {
  font-size: 48px;
  font-weight: 300;
  margin: 0 0 20px 0;
  text-align: center;
}

.lead {
  font-size: 21px;
  font-weight: 200;
  margin-bottom: 20px;
}

p {
  margin: 0 0 10px;
}

a {
  color: #3282e6;
  text-decoration: none;
}
/* places items in the order they appear */
.container {
  display: flex;         /* Activates flexbox layout */
  align-items: flex-start;   /* Vertically centers the text and image */
  gap: 10px;             /* Adds clean spacing between text and image */
  width: 100%;          /*Ensures container stretches to use available space */
  margin: 0 auto;
  padding: 20px;

}

.right-image {
  max-width: 40%;        /* Prevents the image from becoming too large */
  height: auto;          /* Maintains original aspect ratio */
}

.left-image {
  width: 40%;        /* Prevents the image from becoming too large */
  height: auto;          /* Maintains original aspect ratio */
}

.left-image img {
  max-width: 100%;       /* Ensures responsiveness */
  height: auto;          /* Maintains original aspect ratio */
  /* display: block; */       /* Removes default bottom whitespace *
}

.text-content {
  flex: 1;               /* Allows text to fill the remaining left space */
  min-width: 300px;/* Triggers responsive wrapping on smaller screens */
  background-color: #f4f4f4;
  padding: 20px;
  border: 1px solid #ccc;
}