body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    line-height: 1.5rem;
}
html {
  scroll-behavior: smooth;
}
/* Main content area styles */
.main-content {
    max-width: 1200px; /* Limit the width of the content */
    margin: 0 auto; /* Center the content */
    padding: 0px; /* Optional padding */
}

main section {
    /* background-color: #f9f9f9; */
    padding: 20px;
    height: 200vh;
}

main h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

main p {
    font-size: 1.2rem;
    line-height: 1.6;
}


.article-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Creates 6 equal-width columns */
    column-gap: 10px;
    padding: 20px;
    row-gap: 0px;
    width: 80%; /* Set the width to 80% */
    margin: 0px auto; /* Center the container horizontally */
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
}


.grid-demo {
    grid-column: span 6;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.cell {
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
    background-color: #f9f9f9;
}

.article-title {
    grid-column: 1 / -1; /* Makes the title span all 6 columns */
    font-weight: 600;
    color: #486e84;
    font-size: 2.2rem;
    line-height: 2.8rem;
    margin-bottom: 2rem;
}

.article-description {
    grid-column: 1 / -1; /* Makes the description span all 6 columns */
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 2rem;
}



/* Intro */
.intro {
  max-width: 1600px;
  width: 80vw;
  margin: 100px auto 0px;
}
.intro p {line-height: 2rem;}
.intro h1 {font-size: 3rem; font-weight: 100;margin: 80px 0px 60px; color: #476F85; line-height: 3.2rem;}


/* Work Grid */


.image-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal-width columns */
  grid-auto-rows: calc(16.66vw); /* Each row height based on 1/6 of viewport width */
  gap: 10px; /* Adjust the gap between grid items */
}

.grid-item {
  position: relative;
  background-size: cover; /* Ensure the image covers the entire item */
  background-position: center; /* Center the image */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 28px;
  line-height: 32px;
  color: white;
}

.grid-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0); /* No dark overlay by default */
  transition: background-color 0.3s ease; /* Smooth transition for the darkening effect */
  z-index: 1; /* Ensure the overlay is below the text */
}

.grid-item span {
  position: relative; /* Ensure text stays above the darkened background */
  z-index: 2; /* Keep the text above the overlay */
  opacity: 0; /* Text is hidden by default */
  transition: opacity 0.3s ease; /* Smooth opacity transition */
  font-family: Helvetica, sans-serif;
  padding: 0px 10px;
}

.grid-item:hover::before {
  background-color: rgba(0, 0, 0, 0.65); /* Darken with 50% opacity on hover */
}

.grid-item:hover span {
  opacity: 1; /* Text becomes fully visible on hover */
}
.item21 span {
  opacity: 1; /* Text becomes fully visible on hover */
}


.image-grid a {
    width: 100%;
    height: 100%;
    text-decoration: none; /* Removes underline */
}
/* Background images */
.item1 { background-image: url('../images/home/newmarket.jpg'); }
.item2 { background-image: url('../images/home/nfpl.jpg'); }
.item3 { background-image: url('../images/home/rizzo.jpg'); }
.item4 { background-image: url('../images/home/ultrack.jpg'); }
.item5 { background-image: url('../images/home/spark.jpg'); }
.item6 { background-image: url('../images/home/lab_1.jpg'); }
.item7 { background-image: url('../images/home/lennox.jpg'); }
.item8 { background-image: url('../images/home/gpl.jpg'); }
.item9 { background-image: url('../images/home/top100.jpg'); }
.item10 { background-image: url('../images/home/studio.jpg'); }
.item11 { background-image: url('../images/home/kpl.jpg'); }
.item12 { background-image: url('../images/home/castrol.jpg'); }
.item13 { background-image: url('../images/home/tilley.jpg'); }
.item14 { background-image: url('../images/home/maker.jpg'); }
.item15 { background-image: url('../images/home/mpl.jpg'); }
.item16 { background-image: url('../images/home/teennight.jpg'); }
.item17 { background-image: url('../images/home/innis_200.jpg'); }
.item18 { background-image: url('../images/home/bpl.jpg'); }
.item19 { background-image: url('../images/home/spl.jpg'); }
.item21 { background-image: url('../images/home/archives.jpg'); }

/* Large items on desktop (above 800px) */
.item1, .item5, .item16 {
  grid-column: span 3; /* Large items span 3 columns */
  grid-row: span 2; /* Large items span 2 rows */
  height: calc(2 * 16.66vw + 10px); /* Height of 2 rows plus gap */
}
.item21 {
  grid-column: span 2; /* Large items span 3 columns */

}


/* Training */
* {
    /* box-sizing: border-box; */
    margin: 0;
    padding: 0;
}



.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    /* max-width: 1200px; */
}
.grid-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px;
}
.grid-container img:nth-child(1),
.grid-container img:nth-child(8),
.grid-container img:nth-child(11)  {
    grid-column: span 3;
    grid-row: span 2;
}
.grid-container img:nth-child(3) {
    grid-column: span 2;
}
.grid-container img:nth-child(4) {
    grid-column: span 2;
}

.grid-container img:nth-child(2),
.grid-container img:nth-child(5){
    grid-column: span 1;
}
.grid-container img:nth-child(6),
.grid-container img:nth-child(12)  {
    grid-column: span 2;
    grid-row: span 2;
}
.grid-container img:nth-child(7),
.grid-container img:nth-child(9) {
    grid-column: span 1;
}
.grid-container img:nth-child(10) {
    grid-row: span 2;
}

/* Intro */

.text-section {
  display: flex;
  justify-content: space-between;
  padding: 15px 10% 80px;
  width: 80%; /* Ensures full width */
  grid-column: 1 / -1; /* Ensures the section spans the full width in a grid layout */
}
.training-title {
  display: flex;
  justify-content: space-between;
  margin: 80px 10% 0px 10%;
  width: 80%; /* Ensures full width */
  grid-column: 1 / -1; /* Ensures the section spans the full width in a grid layout */
}

.left-text, .right-text {
  width: 45%;
  font-size: 1.1em;
  line-height: 1.6;
}

.right-text {
  text-align: left;
  color: #48667e;
  font-style: italic;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
  .text-section {
    flex-direction: column;
  }

  .left-text, .right-text {
    width: 100%; /* Full width on mobile */
    text-align: left;
  }

  .left-text {
    padding-bottom: 30px;
  }
}




/* Case Studdies */

.billboard {
display: flex;
justify-content: center; /* Centers the image horizontally */
align-items: center;     /* Centers the image vertically, if the section has a height */
padding: 40px;
}

.billboard img {
max-width: 600px;   /* Ensures the image doesn't exceed its container's width */
width: 100%;        /* Adjust this value to make the image smaller or larger */
height: auto;      /* Maintains the aspect ratio */
}

.cs-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Creates 6 equal-width columns */
    column-gap: 10px;
    padding: 00px 20px;
    font-family: Arial, sans-serif;
    row-gap: 20px;
    width: 80%; /* Set the width to 80% */
    margin: 0px auto 60px; /* Center the container horizontally */
}

/* Columns spanning grid 2-3 and 4-5 */
.cs-container .column.left {
    grid-column: 1 / 4; /* Spans from column 2 to 3 */
    padding: 10px 60px 10px 0px;
}
.cs-container .column.right {
    grid-column: 4 / 7; /* Spans from column 4 to 5 */
    padding: 10px 60px 10px 0px;
}
.cs-container .column h3 {color: #000;
}
/* Media query for mobile view */
@media (max-width: 768px) {
    .cs-container {
        grid-template-columns: 1fr 1fr; /* Two equal columns for mobile */
        width: 90%; /* Slightly wider on mobile for better readability */
    }

    .cs-container .column.left, .cs-container .column.right {
        grid-column: span 2; /* Each will take up the full width */
    }
}



.casestudies p { padding: 1em 0em;}

/* Container for the two columns */
.two-column-container {
  display: flex;
  max-width: 1100px; /* Maximum width for the combined columns */
  margin: 0 auto; /* Center the container horizontally */
  gap: 20px; /* Space between the columns */
  padding: 20px; /* Optional padding */
  align-items: center; /* Vertically center content in columns */
}

/* General column styling */
.column {
  flex: 1; /* Ensure equal width for both columns */
}

/* Image column */
.image-column img {
  width: 100%; /* Image takes up the full width of the column */
  height: 100%; /* Optional: makes the image fill the container height */
  object-fit: cover; /* Keeps the image proportionate and fills the column */
  display: block; /* Remove inline spacing issues with images */
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
  .two-column-container {
    flex-direction: column; /* Stack columns vertically */
    gap: 0; /* No gap needed when stacked */
    padding: 20px 15px;
  }

  .column {
    width: 90%; /* Full width for stacked columns */
  }
}







/* Responsive adjustments for screens smaller than 800px */
@media (max-width: 800px) {

  .intro {
    margin: 50px auto 0px;
  }

  .image-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
    grid-auto-rows: calc(50vw); /* Adjust row height for mobile */
  }

  .item1, .item6, .item15 {
    grid-column: span 2; /* Large items span 2 columns */
    grid-row: span 2; /* Large items span 2 rows */
    height: calc(2 * 50vw + 10px); /* Adjusted height for 2 rows on mobile */
  }

  .item5, .item16 {
    grid-column: span 1; /* Example: Making item1 smaller on mobile */
    grid-row: span 1; /* Becomes a 1x1 item on mobile */
    height: calc(1 * 50vw); /* Height of 2 rows plus gap */
  }
}