/*Global Vars*/

:root {
  /*Site Colours*/
  /*use var(--name)*/

  /*text*/
  --txtwhite: white;
  --txtblack: #333333;
  --txthov: dodgerblue;
  /* Widths */
  --topnav-footer-flex-width: 1400px;
  /* Button Colours */
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f7f7f7;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* Optional: Styling for Scrollbar */
body::-webkit-scrollbar {
  width: 6px;
  /* Width of the scrollbar */
}

body::-webkit-scrollbar-track {
  background: black;
  border-left: 2px black solid;
  /* Track color */
}

body::-webkit-scrollbar-thumb {
  background-color: #f0f0f0;
  border-left: 2px black solid;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: orange;
  /* Thumb color on hover */
}

* {
  box-sizing: border-box;
}
/* Project Page */

/* General page and body styling for consistent design */

.grey-text {
  color: grey;
}

.main-content {
  background-color: #f7f7f7;
}

/* Navigation section styling for project links */
.link-nav {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

/* Styling for navigation links to make them visually appealing */
.link-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.link-nav a:hover {
  text-decoration: underline;
}

/* Flex container for arranging header, description, and project info side by side */
.flex-container {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  padding-bottom: 100px;
}

/* Main project title styling */
.header-container h1 {
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 56px;
  max-width: 100%;
  padding: 0px 20px 20px 20px;
}

.photo-carousel {
  position: relative;
  max-width: 100%;
  /* Full viewport width */
  height: 600px;
  /* Fixed height */
  overflow: hidden;
  /* Hide overflow to maintain container size */
  padding: 0px 20px;;
}

/* Styling images within the photo carousel */
.photo-carousel img {
  height: 600px;
  /* Make the image height match the container height */
  width: auto;
  /* Maintain the aspect ratio */
  object-fit: contain;
  /* Scale the image to fit within the container, preserving aspect ratio */
}

/* Flex container for scrolling images horizontally in the carousel */
.carousel-images {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Styling individual images within the scrolling carousel */
.carousel-images img {
  scroll-snap-align: start;
  flex-shrink: 0;
  margin-right: 20px;
}

/* Remove the margin from the last image */
.carousel-images img:last-child {
  margin-right: 0;
}

/* Navigation buttons for the photo carousel */
.carousel-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

/* Styling the previous/next buttons in the photo carousel */
.carousel-nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.carousel-nav button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.plan-information {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  grid-template-rows: repeat(2, 1fr); /* 2 rows */
  gap: 20px; /* Space between the plan information boxes */
  flex: 1; /* Allow plan information to take up its share of space */
}