/* ------------ Cover Image and Vidoe Block --------------- */

.cover__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cover__media img {
  width: 100%;
  height: 100%;         
  object-fit: cover;   
  object-position: center;
}

/* For Video Cover Block */
.cover__background-image,
.cover__background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stack order: video above image */
.cover__background-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cover__background-video {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Respect user "reduced motion" preference: hide video, show static image */
@media (prefers-reduced-motion: reduce) {
  .cover__background-video {
    display: none;
  }
}

/* /For Video Cover Block */

.cover__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  max-width: 80%;
  z-index: 2;
  
}

.cover__logo-link {
  display: inline-block;
  margin-inline: auto;
}

.cover__logo {
  display: block;
  width: 100%;
  max-width: clamp(240px, 60vw, 520px);
  margin: 0 auto 2rem;
}


/* When only button is present, center it differently */
.cover__content.cover__content--button-only {
  padding: 0;
  gap: 0;
}

.cover__title {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  margin: 0;
}

.cover__title p,
.cover__title span,
.cover__title a {
  font-family: inherit;
}

.cover__title p {
  margin: 0;
  font-size: var(--hero-size-mobile);
}

.cover__title a {
  text-decoration: none;
  color: inherit;
}

.cover__subtitle {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  margin: 0;
}

.cover__subtitle p {
  font-size: var(--subtext-size-mobile);
}

.cover__button {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Button only styling - when no text or subtext */
.cover__content.cover__content--button-only .coverButtonText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 1024px) {


  .cover__content {
    gap: 1rem;
    max-width: fit-content;
  }

  .cover__logo {
    max-width: clamp(320px, 35vw, 720px);
  }
  .cover__title p{
    font-size: var(--hero-size-desktop);
  }

  .cover__subtitle p {
    font-size: var(--subtext-size-desktop);
  }

}


    /* ------------Showcase Video  ------------ */

.showcase-video-cover {
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* Responsive image styling for cover background */
.showcase-video-cover__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-video-cover__content {
  position: relative;
  z-index: 1;
}

.showcase-video-cover__title {


  margin: 0 auto 40px auto;
}



@media screen and (min-width: 1024px) {

  .showcase-video-cover{
    /* max-height: 90vh; */
  }
  .showcase-video-cover__content {
    padding: clamp(24px, 7vw, 64px);
  }


}



    /* ---------- Video Grid ---------- */


    
    .video-grid {
      position: relative;
      margin: 0 auto;
    }

    .video-grid-container > *:not(.u-bg-overlay) {
      position: relative;
      z-index: 1;
    }

    .grid-cover-bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .video-grid__title-wrap {
      text-align: center;
      margin-bottom: 2rem;
    }
    
    .video-grid__title {

      margin: 0;

    }
    
    .video-grid__list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      width: 100%;
    }
    
    .video-grid__item {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      
    }
    
    .video-grid__item-title {

      /* font-size: 1.25rem; */
      margin: 0;
      text-align: center;
      color: #333;
      line-height: 1.4;
    }
        /* tablet breakpoint */
     @media screen and (min-width: 503px) and (max-width: 1023px){
      .video-grid__list {
        width: 70%;
      }
        }
    /* Desktop breakpoint */
    @media screen and (min-width: 1024px) {

      
      .video-grid-section {
        padding: 3rem 2rem;
      }
    
      
      .video-grid__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
        padding: 0 50px;
      }
      
      .video-grid__item-title {
        /* font-size: 1.4rem; */
      }
    }
    
/* -------------flex Grid --------------------*/

.flex-grid {
  background-color: var(--main-site-colour);
  
}

.flex-grid__inner {
  margin: 0 auto;
}

.flex-grid__title {
  margin-bottom: 20px;
  text-align: center;
}

.flex-grid__grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.flex-grid__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
}

.flex-grid__item--border {
  border: var(--fg-item-border-width, 3px) solid var(--fg-item-border-color, currentColor);
  border-radius: var(--fg-border-radius, 0);
  overflow: hidden;
  margin: 5px;
}


.flex-grid__item-image-wrapper {
  aspect-ratio: 1 / 1;
  width: calc(var(--mobile-width) * 1%);
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
}

.flex-grid__item-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.flex-grid__item-text {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  flex: 1;
  width: 100%;
  color: var(--site-font-colour);
}

.flex-grid__item-text--border {
  border: var(--fg-item-border-width, 3px)
          solid var(--fg-text-border-color, currentColor);
  border-radius: var(--fg-border-radius, 0);
  margin: 10px;
}


.flex-grid__item-text h1 {
  margin: 0 0 1rem 0;
}

.flex-grid__item-text p {
  line-height: 1.6;
}

.flex-grid__item-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: auto;
}

/*--Tablet Styling--*/

    
    /* tablet breakpoint */
    @media screen and (min-width: 503px) and (max-width: 1023px) {


      .flex-grid__grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        align-items: stretch;
      }

      .flex-grid__item-image-wrapper {
        width: calc(var(--tablet-width) * 1%);
        max-width: none;
        margin: 0;
      }

      .flex-grid__item {
        flex: 0 0 calc((100% - 3 * 2rem) / 4);
        min-width: 250px;
      }
      
    }
/*--- Desktop styling--*/
@media screen and (min-width: 1024px) {
  .flex-grid {
 
  }

  .flex-grid__grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: stretch;
  }

  .flex-grid__item-image-wrapper {
    width: calc(var(--desktop-width) * 1%);
    max-width: none;
    margin: 0;
  }


  .flex-grid__item {
    flex: 0 0 calc((100% - 3 * 2rem) / 4);
    min-width: 250px;
  }


}


   /* -------------Three Grid Block ------------*/
   /* .three-grid{
    padding-bottom: 20px;
      } */

   .three-grid__list{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
   }

   .three-grid__item {
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 600px;
    width: 100%;
   }

   .three-grid__item a {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .three-grid__item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

   .three-grid__title{
    text-align: center;
    /* margin-top: 20px;
    margin-bottom: 20px; */
  }
  
  .three-grid__title h1 {
    display: inline-block;
    text-align: center;
    width: fit-content;
    margin: 0 auto 10px auto;
  }
  .three-grid__caption {
    position: absolute;
    text-align: center;
    width: 70%;
    bottom: 0px; 
    left: 50%;
    transform: translateX(-50%);
    background-color:var(--cap-bg-colour);
    padding: 10px;
    border: var(--cap-border-colour) 1px solid;
  }


  .three-grid__caption a {
    color: var(--cap-font-colour);
  }

  .three-grid__caption p {
    color: var(--cap-font-colour);
    font-size: 1rem;
    padding-top: 5px;
    
  }
    /* Tablet - explicitly reset to mobile width */
    @media screen and (min-width: 503px) and (max-width: 1023px) {

      .three-grid__list {

        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

      .three-grid__caption{
        width: 65%;
      }

      .three-grid__item {
        max-width: 50%;  
      }

       .u-height-30vh{
        height: 40vh;
       }
}

     /* Three grid block desktop mode */

     @media screen and (min-width: 1024px) {
      .three-grid{
    
      }

       .three-grid__list {
        flex-direction: row;
  
      
       }

       .three-grid__item{
        max-width: 900px;
       }
    
      .three-grid__caption{
        width: 55%;
        padding: 20px;
        bottom: 0px;
      }

     }

  /* -------------Six Grid Block Links ------------*/

   .six-grid {
    /* background-color: var(--main-site-colour); */

   }  

   .six-grid__list{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
   }

   .six-grid__item {
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 600px;
    width: 100%;
   }

   .six-grid__item a {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .six-grid__item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

   .six-grid__title {
    text-align: center;
    /* margin-top: 20px;
    margin-bottom: 20px; */
  }
  
  .six-grid__title h1 {
    display: inline-block;
    text-align: center;
    width: fit-content;
    margin: 0 auto 10px auto;
  }

  .six-grid__caption {
    position: absolute;
    text-align: center;
    width: 70%;
    bottom: 0px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--cap-bg-colour);
    padding: 10px;
    border: var(--cap-border-colour) 1px solid;
  }


  .six-grid__caption a {
    color: var(--cap-font-colour);
  }

  .six-grid__caption p {
    color: var(--cap-font-colour);
    font-size: 1rem;
    padding-top: 5px;
    
  }
    /* Tablet - explicitly reset to mobile width */
    @media screen and (min-width: 503px) and (max-width: 1023px) {

      .six-grid__list {

        flex-direction: row;
        flex-wrap: wrap;
    
       }

       .six-grid__caption{
        width: 65%;
      }

       .six-grid__item {
        max-width: 50%;
       }

       .u-height-30vh{
        height: 40vh;
       }
}

     /* Six grid block desktop mode */

     @media screen and (min-width: 1024px) {
      .six-grid {

      }

      .six-grid__list {

        flex-direction: row;
        flex-wrap: wrap;
    
       }

       .six-grid__item {
        max-width: 33%;
       }
 
      .six-grid__caption {
        width: 55%;
        padding: 20px;
        bottom: 0px;
      }

     }

      /* -------Grid Media Block V2-------- */

      .media-grid {
        display: block;
        padding: 20px 5%;
        margin: 0 auto; /* Centers the grid container horizontally */
      }

      .media-grid__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr; /* Single column for mobile */
        grid-gap: 0.2rem;
      }

      .media-grid__item {
        display: flex;
        flex-direction: column; /* Stacks children vertically */
        justify-content: flex-start; 
        position: relative; 
        padding: 0px 5px;
        overflow: hidden;
      }

      .media-grid__item h2 {
        padding-bottom: 5px;
        color: #fff;
      }

      .media-grid__item__image {
        position: relative;
        /* height: 400px; */
        object-fit: cover;
        object-position: top;
      }

       .media-grid__item a img {
        position: relative;
        height: 400px;
        object-fit: cover;
        object-position: top;  
      } 

      .media-grid__banner { 
        display: block;
        position: absolute; 
        bottom: 10%; 
        left: 5px; 
        right: 5px; 
        width: calc(100% - 10px); /* Subtract the left and right padding of the li to keep in from overflowing*/
        background: linear-gradient(90deg, rgba(38,53,81,1) 0%, rgba(39,39,71,0.8141631652661064) 37%, rgba(38,53,80,0) 100%);
        padding-left: 15px;
        box-sizing: border-box; 
      }

      .media-grid__banner p{
        color: #ffff;
        font-weight: 300;
        max-width: 100%;
        padding-bottom: 5px;
        padding-right: 60px;
      }

      .media-grid__announcement {
        display: block;
        position: absolute;
        width: 40%;
        top: 5%;
        background: linear-gradient(90deg, rgba(186,125,73,1) 0%, rgba(186,125,73,0.6124824929971988) 37%, rgba(186,125,73,0) 100%);
        padding-left: 15px;
      }
    /* tablet breakpoint */
    @media screen and (min-width: 503px) and (max-width: 1023px){
      .media-grid {
        padding: 20px 10px;
      }
      .media-grid__list {
        grid-template-columns: repeat(2, 1fr); 
      }

    }
      /* Desktop styles  */
      @media screen and (min-width: 1024px) {
        .media-grid {
          padding: 20px 10px;
        }
        .media-grid__list {
          grid-template-columns: repeat(3, 1fr); 
        }
      }

      /*--- Contact Block- SHARES CLASSES WITH CONTENT BLOCK--- */


      .contact-block__container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
      }

      .contact-block__content {
        order: 2;
        text-align: center;
      }

      .contact-block__text {
        margin-bottom: 1.5rem;
        color: var(--site-font-colour);
      }

      .contact-block__content h1 {

        font-size: 4rem ;
      }

       .contact-block__contact {
        display: block;
        text-align: center;
       }

       .contact-block__socials {
        display: block;
        text-align: center;
  
     }

      .contact-block__company-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
      }
      .contact-block__company-info--center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .contact-block__company-info-address{
    
        text-align: left;
        min-width: 300px;
        }
  
        .contact-block__company-info-openingtimes{
  
          text-align: left;
          min-width: 300px;
          }


       /* Flip Layout (Image on Left, Content on Right) */
    .contact-block--flip .contact-block__content {
      order: 2;
    }

    .contact-block--flip .contact-block__img-wrapper {
      order: 1;
    }

        /* tablet breakpoint */
        @media screen and (min-width: 503px) and (max-width: 1023px){
          .contact-block__container {
           /* padding: 40px; */
           width: 80%;
           align-items: center;
         }

            .contact-block__company-info {
              flex-direction: row;
              /* justify-content: flex-start; */
            }
            .contact-block__company-info--center {
              /* display: flex; */
              flex-direction: row;
              /* justify-content: center;
              align-items: center; */
            }
      
      
            .contact-block__company-info-address{
      
            padding-top: 30px;
            /* text-align: center; */
            }
      
            .contact-block__company-info-openingtimes{
      
              padding-top: 30px;
              /* text-align: left; */

              }


         }

       /* Desktop Styles */
       @media screen and (min-width: 1024px) {
          

        .contact-block__container {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 3rem;
          align-items: start;
        }

        .contact-block__content {
          order: 1;
          flex: 1;
          text-align: left;
        }

        .contact-block__text {
          width: 90%;
        }

        .contact-block__content h1 {

          font-size: 5rem ;
        }


       .contact-block__contact {
        display: block;
        text-align: left;
       }

       .contact-block__socials {
        display: block;
        text-align: left;
  
     }

      .contact-block__company-info {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
      }

      .contact-block__company-info--center {
        /* display: flex; */
        flex-direction: row;
        /* justify-content: center;
        align-items: center; */
      }

      .contact-block__company-info-address{

      padding-top: 20px;
      text-align: left;
      }

      .contact-block__company-info-openingtimes{

        padding-top: 20px;
        }

      .contact-block--flip .contact-block__container {
        flex-direction: row-reverse;
      }
      
      .contact-block--flip .contact-block__content {
        order: 1;
      }
      
      .contact-block--flip .contact-block__img-wrapper {
        order: 2;
      }

      }


      /*--- Content Block- For Video Block and Content block - shared classes---- */

      .content-block {
        /* background-color: var(--main-site-colour); */
      }

      .content-block__container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
      }

      .content-block__content {
        order: 2;
        text-align: center;
      }

      .content-block__title {
        margin-bottom: 1rem;
        line-height: 1.2;
      }

      .content-block__text {
        margin-bottom: 1.5rem;
        color: var(--site-font-colour);
      }

      .content-block__text p {

        padding-top: 30px;
        text-align: left;
      }

      .content-block__button-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 2rem;
        justify-content: center;
      }

      .content-block__media {
        order: 1;
        width: 100%;
        max-width: 400px;
      }

      .content-block__image {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
      }

        /* tablet breakpoint */
 @media screen and (min-width: 503px) and (max-width: 1023px){
  .content-block__container {
   padding: 40px;
   width: 80%;
 }
 }

    /* Flip Layout (Image on Left, Content on Right) */
    .content-block--flip .content-block__content {
      order: 2;
    }

    .content-block--flip .content-block__img-wrapper {
      order: 1;
    }

      /* Desktop Styles */
      @media screen and (min-width: 1024px) {
        .content-block {
          padding: 4rem 6rem;
        }
        
        .content-block__container {
          flex-direction: row;
          gap: 4rem;
          align-items: center;
        }
        
        .content-block__content {
          order: 1;
          flex: 1;
          text-align: left;
  
        }

        .content-block__button-wrapper {

          justify-content: start;
        }
        
        .content-block__text {
        
          width: 90%;
        }
        
        .content-block__media {
          order: 2;
          flex: 1;
          
          max-width: none;
        }
        
        .content-block__image {
          max-width: 820px;
          /* min-height: 400px; */
          height: auto;
          /* max-height: 500px; */
          margin: 0 auto;
        }

        .content-block--flip .content-block__container {
          flex-direction: row-reverse;
        }
        
        .content-block--flip .content-block__content {
          order: 1;
        }
        
        .content-block--flip .content-block__img-wrapper {
          order: 2;
        }

        
      }
      /*--- Content Block Large ---*/

.content-block-large {
  display: block;
  width: 100%;
}

.content-block-large__content {
  display: flex;
  flex-direction: column; 
  justify-content: center;
  width: 100%;
}

.content-block-large__content h1 {
  display: inline-block;
  text-align: center;
  width: fit-content;
  margin: 0 auto 10px auto;
}

.content-block-large__content h3 {
  text-align: center;
  font-weight: lighter;
  padding-top: 20px;
}

.content-block-large__content p {
  padding-top: 30px;
  font-weight: lighter;
  
}

.content-block-large__content section {
  padding-top: 30px;
}

.content-block-large__media {
  width: 100%;
  position: relative;
  
}

.content-block-large__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: static;
}

.content-block-large__button--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* tablet breakpoint */
@media screen and (min-width: 503px) and (max-width: 1023px){
 .content-block-large {
  width: 80%;
 }
}
/* Desktop styles  */
@media only screen and (min-width: 1024px) {

  .content-block-large {
    display: flex;
    align-items: stretch;
  }

  .content-block-large__content {
    width: 60%;
  }

  .content-block-large__media {
    width: 40%;
  }

  .content-block-large--flip {
    flex-direction: row-reverse;
  }

}

/*--- End Content Block Large ---*/


      /*--- Image Text 5050 ---*/

      .image-text-5050 {
        display: block;
        width: 100%;
      }
      
      .image-text-5050__content {
        display: flex;
        flex-direction: column; 
        justify-content: center;
        width: 100%;
      }
      
      .image-text-5050__content h1 {
        display: inline-block;
        text-align: center;
        width: fit-content;
        margin: 0 auto 10px auto;
      }
      
      .image-text-5050__content h3 {
        text-align: center;
        font-weight: lighter;
        padding-top: 20px;
      }
      
      .image-text-5050__content p {
        padding-top: 30px;
        font-weight: lighter;
        
      }
      
      .image-text-5050__content section {
        padding-top: 30px;
      }
      
      .image-text-5050__media {
        width: 100%;
        position: relative;
        
      }
      
      .image-text-5050__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: static;
      }
      
      .image-text-5050__button--center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      
      /* tablet breakpoint */
      @media screen and (min-width: 503px) and (max-width: 1023px){
       .image-text-5050 {
        width: 80%;
       }
      }
      /* Desktop styles  */
      @media only screen and (min-width: 1024px) {
      
        .image-text-5050 {
          display: flex;
          align-items: stretch;
          gap: 0.3rem;
        }
      
        .image-text-5050__content {
          width: 50%;
        }
      
        .image-text-5050__media {
          width: 50%;
        }
      
        .image-text-5050--flip {
          flex-direction: row-reverse;
        }
      
      }
      
      /*--- End Image Text 50/50 ---*/



      
/*---------- Testimonials ------------*/

.testimonials-Section {
  color: var(--site-font-colour);
}


.testimonials-Section__inner {
  margin: 0 auto;
}

.testimonials-Section__title {
  margin-bottom: 20px;
  text-align: center;
  display: block;
  width: 100%;
}

.testimonials-Section__grid {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  gap: 20px;
}

.testimonials-Section__item {
  display: flex;
  flex-direction: column;
}

.testimonials-Section__item--padded {
  padding: 50px 10px;
}

.testimonials-Section__item-client-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.testimonials-Section__item-client-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--site-font-colour);
}

.testimonials-Section__item-client-name {
  padding: 20px;
}

.testimonials-Section__item-quote {
  font-size: 1.5em;
  font-style: italic;
  text-align: center;
  padding-bottom: 10px;
}

/* tablet breakpoint */
@media screen and (min-width: 503px) and (max-width: 1023px){

  .testimonials-Section__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: stretch;
    gap: 2rem;
  }

  .testimonials-Section__item {
   width: 40%;
  }
 }

 /* Desktop styles */
@media screen and (min-width: 1024px) {

    .testimonials-Section__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center; 
      align-items: stretch;
      gap: 2rem;
    }
  
    .testimonials-Section__item {
      flex: 0 1 calc(33.333% - 2rem); 
      max-width: 600px;               
      box-sizing: border-box; 
    }
  

  .testimonials-Section__item-client-image {
    width: 60px;
    height: 60px;
  }

  .testimonials-Section__item-quote {
    max-width: 90%;
    line-height: 1.2;
    margin-inline: auto;
  }
}

/* -------- Text Block ---------- */

.text-block {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  /* background-color: var(--main-site-colour); */
}

.text-block__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.text-block__inner {
  padding: 20px;
  position: relative;
  z-index: 1;
}

.text-block__content {
  text-align: center;
}

.text-block__content--left {
  text-align: left;
}

.text-block__title {
  margin-bottom: 1rem;
  line-height: 1.2;
}

.text-block__text {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  color: var(--site-font-colour);
}

.text-block__button-wrapper {
  margin-top: 1.5rem;
}

.text-block__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.text-block__btn--Left {

  display: flex;
  flex-direction: row;
  gap: 20px;
  text-align: left;
}

.text-block__text p {
  max-width: 100%;
}

  /* tablet breakpoint */
 @media screen and (min-width: 503px) and (max-width: 1023px){
 .text-block__inner {
  padding: 40px;
  width: 80%;
}
}

/* Desktop Styles */
@media screen and (min-width: 1024px) {

  
  .text-block {
    padding: 4rem 6rem;
    max-width: 100%;
  }

  .text-block__inner {
    padding: 0 60px;
    width: 60%;
  }

}


    /* ------- Text Strip ------- */

.text-strip{
  padding-bottom: 20px;
  margin: 0px 10px;
}

.text-strip__grid{
  height: auto;
  font-family: var(--font-primary);
  text-align: center;
  justify-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.text-strip__title{
  color: var(--site-font-colour);
  text-align: center;
  padding-top: 10px;
}

.text-strip__grid h1{
  color: var(--textblock-title-color);
}

.text-strip__grid h2{
  color: var(--textblock-title-color);
}

.text-strip__grid h3{
  color: var(--textblock-title-color);
}

.text-strip__grid p{
  /* font-size: 1.2em; */
  padding: 20px 0px;
  color: var(--textblock-subtext-color);
}

/* Remove flex properties from textBlockPadding on mobile */
.text-strip__item--padded{
  padding: 50px 10px;
  height: 100%;
}
.text-strip__item--bg{
  background-color: white;
  margin: 10px;
  max-width: 500px;
  height: 100%;
}

/* Apply centering only to the individual block classes */
.text-strip__item-1, .text-strip__item-2, .text-strip__item-3{
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  height: 100%;
  text-align: center; 
}

/* Style for linked text strip items */
.text-strip__item--link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

/* Hover animation - only applies when animateOnHover is enabled */
.text-strip__grid--animate .text-strip__item-1,
.text-strip__grid--animate .text-strip__item-2,
.text-strip__grid--animate .text-strip__item-3,
.text-strip__grid--animate .text-strip__item--link {
  transition: transform 0.3s ease;
}

.text-strip__grid--animate .text-strip__item-1:hover,
.text-strip__grid--animate .text-strip__item-2:hover,
.text-strip__grid--animate .text-strip__item-3:hover,
.text-strip__grid--animate .text-strip__item--link:hover {
  transform: scale(1.05);
}

/* tablet breakpoint */
@media screen and (min-width: 503px) and (max-width: 1023px){

    .text-strip__item--bg{
      background-color: white;
      margin: 10px;
      max-width: 70%;
      height: 100%;
    }

  }

/* Desktop Styles */
@media screen and (min-width: 1024px){
  .text-strip__grid{
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr; 
      gap: 2rem;
      align-items: stretch; /* Ensure grid items stretch to full height */
  }
  
  .text-strip__title{
      text-align: center;
  }

  .text-strip__grid p{
      max-width: 90%;
  }

  /* Equal height for all blocks */
  .text-strip__item-1, .text-strip__item-2, .text-strip__item-3{
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%; /* Force all blocks to use full available height */
  }

  .text-strip__item--bg{
      margin: 0;
      height: 100%; 
      display: flex;
      flex-direction: column;
  }
  
  /* Make sure the content areas expand to fill available space */
  .text-strip__item--padded{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }
}
   /* ------------- Image Galley COMPONANT ------------- */

   .image-gallery__title {
    text-align: center;
    /* padding: 0 1rem; */
  }
  
  .image-gallery__title h1 {
    margin: 0 auto;
  }

   .image-gallery__grid{

    --gap: 5px;
    --num-cols: 8;
    --row-height: auto;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
   }

   .image-gallery__grid img{

    width: 100%;
    height: 100%;
    object-fit: cover;
   }

   .image-gallery__image--horizontal{
    
    grid-row: span 2;
    grid-column: span 4;

   }

   .image-gallery__image--vertical{

    grid-row: span 3;
    grid-column: span 4;
   }

   .image-gallery__text{

    grid-row: span 3;
    grid-column: span 8;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    padding: 20px;
   }

    /* text-align: center;
  } */

  .image-gallery__text p{

    padding-top: 30px;
    text-align: left;
    max-width: 90%;
    margin: 0 auto;

  }

  /* Portfoilio FIRST IMAGE CENTERS ON MOBILE media Query */
  @media screen and (max-width: 502px) {
  .image-gallery__grid > *:first-child {
    margin-left: auto;
    margin-right: auto;
    grid-column: 2 / span 6;
  }
}

  /* tablet breakpoint */
@media screen and (min-width: 503px) and (max-width: 1023px){

  .image-gallery__grid > *:first-child {
    margin-left: auto;
    margin-right: auto;
    grid-column: 3 / span 4;
  }

  .image-gallery__text{
    grid-column: 2 / span 6;
  }
}

  /* Desktop Media Query */

 @media screen and (min-width: 1024px){
    
    .image-gallery__grid{
        --num-cols: 8;
    }

    .image-gallery__image--horizontal {

      grid-row: span 1;
      grid-column: span 2;
  
     }
  
     .image-gallery__image--vertical {
      grid-row: span 2;
      grid-column: span 2;
     }
    
     .image-gallery__text {
      grid-row: span 2;
      grid-column: span 4;
      justify-content:flex-start;
      text-align: center;
      }

      .image-gallery__text p {
        max-width: 80%;
      }

      .image-gallery__buttons {
        display: flex;
        font-family:inherit;
        font-weight: 300;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px; 
      }

   }
   /* ------------- PACKAGES COMPONANT ------------- */

.packages{
  margin-top: 20px;
}
.packages__grid{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-gap: 20px;
  margin: 0 auto;
  font-family: var(--font-primary);
}

.packages__title{
  text-align: center;
}

.packages__title h1 {
  display: inline-block;
  text-align: center;
  width: fit-content;
  margin: 0 auto 10px auto;
}


.packages__item-1 {
  border: 3px solid #CD7F32;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.packages__item-2 {
  border: 3px solid#C0C0C0;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.packages__item-3 {
  border: 3px solid #D4AF37;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.packages__item-1 p, .packages__item-2 p, .packages__item-3 p{
  margin-bottom: 20px;
}

.packages__item-1 h2, .packages__item-2 h2, .packages__item-3 h2{

  margin-bottom: 50px;
}

.packages__name-1 {
  border: 2px solid rgb(0, 0, 0);
  background-color: #CD7F32;
  padding: 10px;
  display: inline-block;
}

.packages__name-2 {
  border: 2px solid rgb(0, 0, 0);
  background-color:#C0C0C0;
  padding: 10px;
  display: inline-block;
}

.packages__name-3 {
  border: 2px solid rgb(0, 0, 0);
  background-color: #D4AF37;
  padding: 10px;
  display: inline-block;
}

.packages__price {
  padding: 10px 20px;
}

  /* tablet breakpoint */
  @media screen and (min-width: 503px) and (max-width: 1023px){
    .packages__item-1, .packages__item-2, .packages__item-3 {
      width: 70%;
    }
  }

/* Desktop styles */

@media screen and (min-width: 1024px) {

  .packages{
    margin: 20px 100px 0px 100px;
  }

  .packages__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }

}


/*-- FAQ --*/

.faq {

}

.faq__title {
  text-align: center;
  display: block;
  width: fit-content;
  margin: 0 auto 30px auto;
}

.faq__item {
  margin-bottom: 15px;
  overflow: hidden;
}

.faq__question {
  background-color: var(--faq-header-colour);
  font-weight: 300;
  color: white;
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}

.faq__question:hover {
  background-color: var(--faq-onhover-colour);
}

.faq__arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  position: relative; 
}

.faq__arrow::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

.faq__question.active .faq__arrow::before {
  transform: translateY(-50%) rotate(180deg);
}

.faq__answer {
  background-color: var(--faq-answer-bg);
  padding: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq__answer.active {
  padding: 20px;
  max-height: 2000px;
}

.faq__answer p {
  padding: 10px;
}

@media screen and (min-width: 1024px) {
  .faq {
    margin: 20px 100px 32px 100px;
    padding: 0px;
  }

  .faq__answer.active {
    padding: 20px;
    max-height: 500px;
  }

}

/*--------Image Strip-------*/

.image-strip{
  margin: 0 5%;
}

.image-strip__title{

  text-align: center;
  /* margin-bottom: 2rem; */
}

.image-strip__list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 10px auto; */
  padding: 20px 0;
}

.image-strip__item{
  width: 180px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 10px;
}



@media screen and (min-width: 1024px) {

}


/* ============================================
   404 ERROR PAGE STYLES
   ============================================ */

.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-page__container {
  width: 100%;
}

.error-page__content {
  text-align: center;
  padding: 40px 20px;
}

.error-page__code {
  font-size: clamp(80px, 15vw, 180px);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 20px;
  opacity: 0.1;
  background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-page__title {
  font-size: clamp(28px, 5vw, 48px);
  margin-bottom: 30px;
  padding-bottom: 15px;
}

.error-page__message {
  font-size: clamp(16px, 2.5vw, 20px);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.error-page__button-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.error-page__button-wrap .button {
  min-width: 180px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.error-page__button-wrap .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tablet and Desktop adjustments */
@media screen and (min-width: 768px) {
  .error-page__content {
    padding: 60px 40px;
  }
}

@media screen and (min-width: 1024px) {
  .error-page {
    min-height: 70vh;
  }

  .error-page__content {
    padding: 80px 60px;
  }
}


/*-------- FOOTER--------*/
 
.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--footer-colour);
  font-family: var(--font-primary);
  margin: 0px auto;
}

.site-footer__logodiv {
  text-align: center;
}

.site-footer__logo {
  display: block;
  max-width: 200px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

 .socialLogos {

  display: inline-block;
  align-items: center;
  height: 50px;
  width: auto;
  padding-bottom: 20px;

 }

 .site-footer__socials {
    display: block;
    text-align: center;

 }


 .site-footer__text{
  display: block;
  text-align: center;
 }

 .site-footer__contact{
  display: block;
  text-align: center;
 }

 .site-footer__company-info {
  display: block;
  text-align: center;
 }


 @media screen and (min-width: 756px) {

  .site-footer__company-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }

  .site-footer__company-info-block1{
    padding: 10px 50px;
    text-align: left;
  }

  .site-footer__company-info-block1-alone{
    padding: 10px 50px;
    text-align: centre;
  }

  .site-footer__company-info-block2{
    padding: 10px 50px 10px 30px;
    text-align: left;
  }

 }
 
/* -------- Made By Section (Mobile-First) -------- */

.site-footer {
  position: relative;
}

.site-footer__madeby {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 40px 0 0px 0;
}

.madeby__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.madeby__link:hover {
  opacity: 0.7;
}

.madeby__logo {
  height: 35px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.madeby__text {
  font-size: 1rem;
}

/* Desktop  */
@media screen and (min-width: 1024px) {
  .site-footer__madeby {
    /* padding: 0 20px 20px 0; */
    width: auto;
    justify-content: center;
  }

  .madeby__link {
    flex-direction: row;
    gap: 12px;
  }
}




/* ------------- CTA Image Grid Component ------------- */

.cta-image-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.cta-image-grid__title {
  text-align: center;
  padding: 1rem 1rem;
}


.cta-image-grid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: auto;
}

.cta-image-grid__item a {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.cta-image-grid__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}


.cta-image-grid__overlay {
  position: static;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 1rem;
  z-index: 1;
  color: inherit !important;
  overflow-wrap: break-word;
}

.cta-image-grid__overlay::before {
  display: none;
}

.cta-image-grid__overlay h2 {
  margin: 0 0 0.5rem 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.cta-image-grid__overlay h3 {
  margin: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.cta-image-grid__overlay .cta-image-grid__subtext {
  margin: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.cta-image-grid__item a {
  color: inherit;
  text-decoration: none;
}


/* Tablet breakpoint */
@media screen and (min-width: 503px) and (max-width: 1023px) {
  .cta-image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Every 3rd item starting from 1st (full width) */
  .cta-image-grid > :nth-child(3n+1) {
    grid-column: 1 / -1;
  }
}

/* Desktop breakpoint */
@media screen and (min-width: 1024px) {
  .cta-image-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .cta-image-grid__item {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .cta-image-grid__item a {
    height: 100%;
    position: relative;
  }

  .cta-image-grid__item img {
    height: 100%;
  }

  .cta-image-grid__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    z-index: 1;
    color: auto;
  }

  .cta-image-grid__overlay::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-colour, var(--bg-overlay-colour));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  .cta-image-grid__item:hover .cta-image-grid__overlay::before {
    opacity: 0.7;
  }

  .cta-image-grid__overlay h2 {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .cta-image-grid__overlay h3 {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .cta-image-grid__overlay .cta-image-grid__subtext {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .cta-image-grid__item:hover .cta-image-grid__overlay h2,
  .cta-image-grid__item:hover .cta-image-grid__overlay h3,
  .cta-image-grid__item:hover .cta-image-grid__overlay .cta-image-grid__subtext {
    opacity: 1;
  }
}

/* Masonry Grid Toggle */
@media screen and (min-width: 503px) and (max-width: 1023px) {
  .cta-image-grid.masonry-Grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Every 3rd item starting from 1st (large images) */
  .cta-image-grid.masonry-Grid > :nth-child(3n+1) {
    grid-column: 1 / -1; /* Full width */
  }
}

/* Masonry Grid - Desktop */
@media screen and (min-width: 1024px) {
  .cta-image-grid.masonry-Grid {
    grid-template-columns: repeat(9, 1fr);
    grid-auto-flow: dense;
    gap: 0.5rem;
  }
  
  /* Odd groups - large LEFT (1, 7, 13...) */
  .cta-image-grid.masonry-Grid > :nth-child(6n+1) {
    align-self: center;
    grid-column: 1 / 7;
    grid-row: span 2;
  }
  
  /* Odd groups - small RIGHT (2, 3, 8, 9...) */
  .cta-image-grid.masonry-Grid > :nth-child(6n+2) {
    grid-column: 7 / 10;
    grid-row: span 1;
  }
  
  .cta-image-grid.masonry-Grid > :nth-child(6n+3) {
    grid-column: 7 / 10;
    grid-row: span 1;
  }
  
  /* Even groups - small LEFT (4, 5, 10, 11...) */
  .cta-image-grid.masonry-Grid > :nth-child(6n+4) {
    grid-column: 1 / 4;
    grid-row: span 1;
  }
  
  .cta-image-grid.masonry-Grid > :nth-child(6n+5) {
    grid-column: 1 / 4;
    grid-row: span 1;
  }
  
  /* Even groups - large RIGHT (6, 12, 18...) */
  .cta-image-grid.masonry-Grid > :nth-child(6n) {
    align-self: center;
    grid-column: 4 / 10;
    grid-row: span 2;
  }
}