/* Reset and basic styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  line-height: 1.5;
}

/* Header styles */
header {
  background-color: #37404b;
  color: #fff;
  padding: 20px 20px 20px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Logo styles */
.logo {
  display: flex;
  align-items: center;
}

/* Styles for the h1 element within the logo */
.logo h1 {
  margin: 0;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  padding: 10px 20px;
  position: relative;
  background: radial-gradient(circle, #0074D9, transparent);
}

/* Pseudo-element for the left border box */
.logo h1::before {
  content: '';
  /* Create an empty element for styling */
  background-color: #0074D9;
  /* Background color for the box */
  width: calc(100% + 35px);
  /* Extend the width to cover the entire text plus padding */
  height: 100%;
  /* Cover the full height of the text */
  position: absolute;
  /* Absolute positioning */
  top: 0;
  left: -20px;
  /* Move the box to the left by 20px */
  z-index: -1;
  /* Set z-index to place it behind the text */
}

/* Navigation styles */
nav {
  margin-right: 80px;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
}

nav li {
  margin-left: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

/* Style for the hero banner */
.hero-banner {
  background-image: url(../images/02-hero-bg.jpg);
  background-size: cover;
  background-position: center;
  height: 20vh;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  /* Hide overflowing content (the circular image) */
}

/* Style for the circular image container */
.circular-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  /* Position the circular image absolutely */
  top: 200px;
  /* Adjust the top value to move it up or down */
  left: 50px;
  /* Adjust the right value to move it left or right */
  z-index: 1;
  /* Set a higher z-index to ensure it's above the background image */
}

/* Style for the image inside the circular container */
.circular-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  text-align: right;
  color: #fff;
  padding: 0px 15px 0px 15px;
  background-color: #7dcbcddc;
  border: 2px solid #7dcbcddc;
  position: absolute;
  bottom: 0px;
  /* Adjust the distance from the bottom */
  right: 50px;
  /* Adjust the distance from the right (smaller positive value) */
  margin: 20px;
  /* Adjust the margin as needed */
  font-size: 2em;
  /* Adjust the size as needed */
}

.page-wrapper {
  margin-right: 10%;
  margin-left: auto;
  max-width: 100%;
  padding-top: 10px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  background-color: #fff;
}

/* CSS for Two-Column Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 4fr;
  /* Adjust the column widths as needed */
  gap: 20px;
  /* Gap between grid items (adjust as needed) */
  /* padding: 0 40px; */
}

.section-header {
  padding-right: 10px;
  background-color: #fff;
  color: #000;
  text-align: right;/* Align text to the right */
  /* padding: 20px; */
  border-right: 2px solid navy;
}

.right-column {
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Align content within the column to the top and bottom */
  grid-template-rows: auto 1fr 1fr 1fr;
  /* Define the grid rows for the right column */
}

/* Add styles for the image grid container */
.image-grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  margin-top: 10px;
}

/* Style for individual images within the grid */
.image-grid img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.first-image {
  grid-column: 1 / 3;
  grid-row: 1 / 1;
  grid-template-columns: auto;
  grid-template-rows: auto;
}


/* Style for individual images within the grid */
.image-container {
  position: relative;
  /* Create a positioning context for child elements */
}

/* Style for the full-width image container */
.image-container.full-width {
  grid-column: 1 / 3;
  /* Span both columns */
  grid-row: 1 / 2;
  /* Occupy only the top row */
}

/* Style for individual images within the grid */
.image-container img {
  max-width: 100%;
  width: 100%;
  /* Make sure the image fills its container horizontally */
  height: auto;
  /* Set a fixed height for uniformity, adjust the value as needed */
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
  /* Add border-radius to create rounded corners */
  transition: all 0.5s ease-in-out;
  /* Apply the transition effect to all properties */

  /* Add box-shadow properties for the hover effect */
  box-shadow: inset 0px 0px 8px rgba(232, 102, 236, 0), 0 0 15px rgba(232, 102, 236, 0);
}

/* Style for the h3 within the image container */
.image-container h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px 10px;
  margin: 0;
  font-size: 18px;
  max-width: 100%;
  /* Prevent h3 from overflowing its container */
  white-space: nowrap;
  /* Ensure that text doesn't wrap */
  overflow: hidden;
  /* Hide any overflowing text */
  text-overflow: ellipsis;
  /* Add ellipsis (...) to the text if it overflows */
}

.image-container.led img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
  box-shadow: inset 0px 0px 8px rgba(232, 102, 236, 0), 0 0 15px rgba(232, 102, 236, 0);
}

.image-container.signup img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
  box-shadow: inset 0px 0px 8px rgba(232, 102, 236, 0), 0 0 15px rgba(232, 102, 236, 0);
}

/* Apply the box shadow effect on hover */
.image-container:hover img {
  box-shadow: inset 0px 0px 8px rgba(125, 203, 205, 1), 0 0 15px rgba(125, 203, 205, 1);
}


/* Adjust the height for the "Horiseon's Website" image to take up the top two rows */
.image-container.first-image img {
  height: 300px;
  /* Adjust the height to a value that fits your design */
  grid-row: span 2;
  /* Span two rows to occupy both columns */
}

/* Adjust the height for the small images */
.image-container.small-image img {
  width: 100%;
  /* Ensure the width scales proportionally */
  max-height: 150px;
  /* Set a maximum height for the smaller images */
  object-fit: cover;
}

/* Add styles for individual sections (About Me, Work, Contact) as needed */
.page-section {
  margin-bottom: 20px;
  /* Add margin between sections */
}

/* Adjust the margin and padding for "Work" and "Contact Me" sections */
.page-section#work,
.page-section#contact {
  margin-top: 0;
  /* Reset the margin for these sections */
}

/* Adjust border and margin for the right column content */
.page-section p {
  margin: 20px 0;
  /* Add vertical margin to create the visual separation */
  padding-left: 20px;
  /* Add left padding for content alignment */
}

/* Style for the "Contact Me" section */
.page-section.contact {
  text-align: right;
}

/* Style for the contact links */
.contact-links {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  /* Spread out the icons horizontally */
  padding: 20px 0;
  /* Add padding to separate the icons from the top and bottom */
}

.contact-links a {
  text-decoration: none;
  font-size: 18px;
  color: #0074D9;
  padding: 20px 20px 20px 20px;
}

/* Add this CSS to increase the size of the symbols in the contact links */
.contact-links i {
  font-size: 40px;
  /* Adjust the size as needed */
}

.contact-links a:hover {
  color: #1256ac;
}

/* Add this CSS for the main container to make the footer stay at the bottom */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Ensure the content takes up at least the full viewport height */
}

footer {
  text-align: center;
  padding: 10px;
  background-color: #37404b;
  color: #fff;
}