body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
nav {display: flex; justify-content: center; align-items: center; padding: 0; background: rgba(51, 51, 51);}
nav ul {
 list-style: none; 
 background-color: rgba(51, 51, 51); 
 padding: 0; display: flex; 
 margin:0;
 align-items: center; 
 justify-content: center; 
 gap:80px; 
 z-index: 10
}
nav ul li { position: relative; color: white; font-size: 20px; padding: 0;} /*services link*/
nav ul li:hover {color:#f59b9b;}
nav ul li a:hover { color: #f59b9b; } /*title bar hover colour*/
nav ul li ul { display: none; position: absolute; background: #444; padding: 0; width: 300px; font-size: 20px; left: 30%; transform: translateX(-30%); z-index: 20;} /*services dropdown box colour */

nav ul li:hover ul { display: block;} /*services dropdown box on hover*/
nav ul li ul li a {display:block; padding: 10px;}
nav ul li ul li a:hover { background: #e40808; color:white;} /*services dropdown box on hover*/
nav ul li a { color:white; text-decoration: none; padding: 0; font-size: 20px;}/* all other options in the title bar*/
header { background: #f4f4f4; padding: 20px; text-align: center; }
footer { background: #7a0202; padding: 0; text-align: center; color:white; margin-top: auto;}

/* footer */
.background {
  background-image: url(images/intro_pics/footer.png); /* replace with your image */
  background-size: cover;     
  background-position: center;
  background-repeat: no-repeat;
}

.section1{
  display: flex;
  align-items: flex-start;
  gap: 95px;
  padding: 10px;
}

.images {
  display: flex;
  flex-direction: column;      /* stack images vertically */
  gap: 0;                   /* space between images */
  flex-shrink: 0;              /* prevent shrinking */
}

.image-year{
    margin-left: 0;
}

.text-right {
  flex: 1;
  text-align: left;     /* left-align text */
  display: flex;        /* optional if you need column layout */
  flex-direction: column; /* stack h2 and p vertically */
  justify-content: flex-start; /* align items at the top */
  align-items: flex-start;     /* align text to left edge */
  font-family: 'Times New Roman', Times, serif;
  font-size: 17px;
}

email{
    color:rgb(122, 171, 245);
    text-decoration: none;
}

email:hover {
  color: #d55bfa;
}

.section2{
  float: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 17px;
}

.section3{
    padding: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 17px;
}

/* about us page */

.sub-headings {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-weight: bold;
    font-size: 50px;
    color: #7a0202;
}

.container-about {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Experience Section */
.experience-section {
  text-align: center;
  padding: 0 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}


.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.service-box {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer; /* Indicate interactivity */
  transition: transform 0.3s;
}

/* Hover Effects */
.service-box:hover {
    background-color: #f7e0e0;
    color: #fff;
    transform: scale(1.05);
}

.service-box h3 {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 10px;
}

.service-box p {
  font-size: 0.9em;
  color: #666;
}

.service-box-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.service-box-link:hover .service-box {
    background-color: #4a90e2;
    color: #fff;
}

.git-button {
  display: inline-block;
  padding: 12px 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #880606;
  background-color: #fff;
  border: 2px solid #5c0c0c;
  border-radius: 25px;
  cursor: pointer;
  justify-content: center;
  position: center;
}

.git-button:hover {
    background-color: #5c0c0c;
    color: #fff;
}