/* General Styles */
.content-area {
  display: flex;
  flex-wrap: wrap;
  background-color: black; /* Sets the background of the content area to black */
  color: white; /* Default text color set to white for contrast */
  padding: 20px; /* Padding around the content area */
}

.column {
  padding: 10px; /* Padding inside each column */
  position: relative; /* Allows for absolute positioning inside columns */
}

/* Column Sizing for Desktop */
.column-1 { 
  flex-basis: 50%; 
}
.column-2 { 
  flex-basis: 15%; 
}
.column-3 { 
  flex-basis: 35%; 
}

/* Container for the clockwork effect around the image */
.column-1 .image-clockwork-container {
  float: left; /* Aligns the container with the image's float property */
  width: 33%; /* Matches the image width */
  position: relative;
  border-radius: 50%; /* Ensures the container maintains a circular shape */
  margin-right: 20px; /* Space between the image container and the next content */
  box-sizing: border-box; /* Ensures dimensions include border */
  padding: 4px; /* Adjusts padding to create space for the border */
  background: black; /* Black background for the border */
	overflow: hidden;
}

/* Combined keyframes for rotation and pulsating brightness */
@keyframes rotateAndPulse {
  0% {
    transform: rotate(0deg);
    filter: brightness(0);
  }
  25% {
    filter: brightness(3);
  }
  50% {
    transform: rotate(180deg);
    filter: brightness(0);
  }
  75% {
    filter: brightness(3);
  }
  100% {
    transform: rotate(360deg);
    filter: brightness(0);
  }
}

/* Applies the combined effect */
.column-1 .image-clockwork-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  border: 4px solid transparent;
  border-top-color: #F80004; /* Your desired border color */
  border-radius: 50%;
  animation: rotateAndPulse 3.5s linear infinite;
}

/* Original image styling, adjusted for the new container */
.column-1 .image-clockwork-container img {
  width: 100%; /* Makes the image fill the container */
  height: auto;
  border-radius: 50%; /* Keeps the image rounded */
  display: block;
  background-color: transparent; /* Image background, now controlled by container */
  
}

.column-1 .infoImage-right {
  float: right;
  width: 50%;
  position: relative;
  border-radius: 50%;
  margin-right: 5px;
  background: black;
	overflow: visible;
}

.column-1 .infoImage-right img {
  width: 100%;
  border-radius: 50%;
  transform-origin: right center;
  transition: transform 0.6s ease; /* Smooth transition for transform changes */
  position: relative; /* Make sure the image is positioned relative so z-index can take effect */
  z-index: 1;
}

.column-1 .infoImage-right:hover img {
  transform: scale(2); /* Scale up the image to 110% of its original size on hover */
}

.column-1 .infoImage-right img.expanded {
  transform: scale(2); /* Scale up the image */
  transition: transform 0.6s ease; /* Ensure smooth transformation */
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Image Styling for Column 2 and 3 */
.column-2 img, .column-3 img {
  width: 100%; /* Makes the image take the full width of its parent column */
  height: auto;
}

/* Image Styling for Column 2 */
.column-2 img {
  width: 80%; /* Adjusts size relative to the column's width */
  height: auto;
  margin: 0 auto; /* Centers the image in the column */
  display: block; /* Ensures the image is properly displayed */
  transition: filter 0.3s ease; /* Smooth transition for the filter effect */
}

/* Brightness hover effect */
.column-2 img:hover {
  filter: brightness(1.2); /* Increase brightness to 120% when hovered */
}

/* Adjustments for Column 3's Image */
.column-3 img {
  width: 100%; /* Ensures the image covers the whole link area */
  border-radius: 10px; /* Non-rounded edges if you decide to keep the image non-rounded */
  display: block; /* Ensures the image is properly displayed */
  margin-bottom: 20px;
  box-shadow: 0 0 8px 6px rgba(255, 255, 255, 0.5);
}

.column-3 img:last-child {
  margin-bottom: 0;
}

/* Image link styling */
.column-3 .image-link {
  position: relative; /* Allows absolute positioning within */
  display: block; /* Makes the anchor behave like a block */
  max-width: 90%; /* Your existing image width */
  float: right; /* Your existing alignment for the image */
}

/* Button overlay styling */
.column-3 .btn-overlay {
  position: absolute; /* Positions the button over the image */
  top: 70%; /* Centers vertically */
  left: 50%; /* Centers horizontally */
  transform: translate(-50%, -50%); /* Adjusts for the button's own size to center perfectly */
  background-color: #007bff; /* Button color */
  color: white; /* Button text color */
  padding: 4px 8px; /* Button padding */
  border-radius: 5px; /* Rounded corners for the button */
  text-transform: uppercase; /* Optional: makes the text uppercase */
  font-weight: bold; /* Bold font for the button text */
  text-align: center; /* Center alignment of the text inside the button */
  transition: background-color 0.3s ease; /* Smooth background color transition for hover effect */
  text-decoration: none; /* No underline for the text */
  cursor: pointer; /* Cursor pointer to indicate a clickable button */
}

/* Button hover effect */
.column-3 .btn-overlay:hover {
  background-color: #0056b3; /* A darker blue on hover */
  text-decoration: none; /* Ensures text remains without underline on hover */
  color: greenyellow;
}

/* Adjusts for wrapping content around images */
.column-1 .infoImage-left {
  float: left; /* Aligns image to the left */
  margin-right: 20px; /* Space between the image and text */
}

.column-1 .infoImage-right {
  float: right; /* Aligns image to the right */
  margin-left: 20px; /* Space between the image and text */
}

/* Text Colors */
/* Adjustments for Column 1 */
.column-1 h1, .column-1 h2, .column-1 h3 {
  font-size: larger; /* Makes headings larger */
  color: #b3e0ff; /* Sets the headings color */
  margin-top: 20px; /* Adds spacing below headings */
  margin-bottom: 10px; /* Adds spacing below headings */
}

p {
  color: white; /* Sets paragraph text color to white */
  margin-bottom: 20px; /* Adds space below the paragraph */
}

.column-1 a {
  font-size: inherit; /* Ensures links are the same size as paragraph text */
  font-weight: bold; /* Makes links bold */
  color: #87CEEB; /* Skylight blue color for links */
}

/* Styles for links in their default state */
.column-1 a:link {
  color: #FFA500; /* Lush orange for unvisited links */
}

/* Styles for links that have been visited */
.column-1 a:visited {
  color: #FF0000; /* Red for visited links */
}

/* Styles for links when hovered over */
.column-1 a:hover {
  color: #90EE90; /* Light lush green when hovering */
}

/* Optional: Styles for links when they are being clicked (active state) */
.column-1 a:active {
  color: #FFA500; /* You can choose any color, here I'm using the same lush orange as the default state */
}

/* List Styling for .column-1 */
.column-1 ul {
  list-style-type: none; /* Removes default list bullets */
  padding-left: 0; /* Removes default padding */
  margin-left: 20px; /* Adds some left margin for indentation */
	margin-bottom: 20px;
}

/* List Styling for .column-1 for ordered lists */
.column-1 ol {
  list-style-type: decimal; /* Uses decimal numbers */
  padding-left: 0; /* Removes default padding */
  margin-left: 20px; /* Adds some left margin for indentation */
	margin-bottom: 20px;
}

/* List Item Styling for .column-1 */
.column-1 li {
  margin-bottom: 10px; /* Adds space between list items */
  padding-left: 20px; /* Adds padding for custom bullet or number */
  position: relative; /* Allows for absolute positioning of pseudo-elements */
}

/* Custom Bullet Styling with Pseudo-elements for .column-1 */
.column-1 ul li::before {
  content: '•'; /* Custom bullet symbol */
  color: #FFA500; /* Orange color for the bullet */
  position: absolute; /* Positions the bullet absolutely within the list item */
  left: 0; /* Aligns the bullet to the left */
  top: 0; /* Aligns the bullet to the top */
  transform: translateX(-100%); /* Moves the bullet outside the padding area */
}

/* Adjustments for nested lists */
.column-1 ul ul,
.column-1 ol ol,
.column-1 ul ol,
.column-1 ol ul {
  margin-left: 40px; /* Indents nested lists further */
}

/* Nested List Item Adjustments */
.column-1 ul ul li,
.column-1 ol ol li,
.column-1 ul ol li,
.column-1 ol ul li {
  padding-left: 40px; /* Adds more padding to nested list items */
}

/* Resets margin for the last item to remove extra space */
.column-1 li:last-child {
  margin-bottom: 0;
}

/* Styles for strong text within .column-1 */
.column-1 strong {
  color: #FFD700; /* Deep blue for strong text */
  font-weight: bold; /* Ensure it's bold, even if the browser default changes */
}

/* Styles for emphasized text within .column-1 */
.column-1 em {
  color: #C0C0C0; /* Dark magenta for emphasized text */
  font-style: italic; /* Ensure it's italic, even if the browser default changes */
}

/* Styles for description list within column-1 */
.column-1 dl {
    margin: 20px; /* Adds margin around the list for better spacing from other elements */
    background-color: #f4f4f4; /* Light grey background for distinction */
    padding: 15px; /* Padding inside the list for spacing between content and border */
    border-radius: 8px; /* Rounded corners for a smoother look */
    border: 1px solid #ddd; /* Subtle border around the list */
    box-shadow: 0 0 8px 8px #ffff00; /* Illuminous yellow glow around the element */
}

.column-1 dt {
    font-weight: bold; /* Bold font for terms to highlight them as headings */
    color: #00009C; /* Dark grey color for better readability */
    margin-bottom: 5px; /* Spacing below each term before the description */
}

.column-1 dd {
    margin-left: 20px; /* Indent descriptions to visually separate them from the terms */
    color: #666; /* Lighter grey color for descriptions, differentiating from terms */
    margin-bottom: 10px; /* Spacing below each description for separation from next entry */
}

/* Mobile Friendly Adjustments */
@media (max-width: 768px) {
  .content-area {
    flex-wrap: wrap; /* Allows multiple rows */
  }
  .column-1 {
    flex-basis: 100%; /* Column 1 takes full width on mobile */
    order: 1; /* Ensures column 1 is at the top */
  }
  .column-2, .column-3 {
    flex-basis: 100%; /* Resets basis before setting the width */
    width: auto; /* Width auto to override any other width settings */
  }
  .column-2 {
    flex: 0 0 30%; /* Column 2 takes up 30% of the width */
    order: 2; /* Ensures column 2 is below column 1 */
  }
  .column-3 {
    flex: 0 0 70%; /* Column 3 takes up 70% of the width */
    order: 3; /* Ensures column 3 is below column 2 */
  }
  .column img {
    float: none;
    display: block; /* Ensures images are centered and no longer float */
    margin: 10px auto; /* Adds margin around the images for spacing */
    max-width: 100%; /* Images will fill the width of their respective columns */
  }
	
  .column-1 .image-clockwork-container {
  aspect-ratio: 1 / 1; /* Enforces a 1:1 aspect ratio */
  display: flex;
  align-items: center;
  justify-content: center; /* Assuming you want horizontal centering as well */
  }
	
  .column-3 .btn-overlay {
  top: 86%; /* Centers vertically */
  }
	
}

@media (max-width: 480px) {

	.column-3 .btn-overlay {
  top: 72%; /* Centers vertically */
  font-size: 12px;
}
}