*{
    padding:0;
    background-color: none;
    margin:0;
}
:root{
  /* Light mode panels */
  --background-lm: #f2f2f2;
  --panel-1-lm: #FFFFFF;
  --panel-2-lm: #333333;

   /* Dark mode panels */
  --background-dm: 121212; 
  --panel-1-dm: #333333;
  --panel-2-dm: #ffffff;

  /* Text */
  --text-main-lm: #0B1320;
  --text-muted-lm: #8e97a3;
  --text-main-dm: #f5f5f2;
  --text-muted-dm: #b8b5b5;

  /* Border */
  --border: #bfcad5;

  /* Brand */
  --primary-1: #99af7d;
  --primary-2: #7d9068;
  --secondary-1: #d52122;
  --secondary-2: #eb4604;

/*new panel colors*/
  --bklight1: #f5f5f2;
  --bklight2: #eaebe7;
  --bkdark1: #333333;

}

img {
    max-width:100%;
}


svg{
    position:fixed;
    width:0;
    height:0;
}


/* Base text */
body{
  padding:0;
  margin:0;
  width:100%;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 16px;         /* body */
  line-height: 1.5;        /* ~24px on 16px */
  color:var(--text-main-lm);
  background-color: var(--background-lm);
}

/* Simple spacing */
h1, h2, h3, h4, h5, h6 { 
  margin: 0 0 0.5em 0;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }

xh2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2;
  }

  h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; }


h3 { font-size: clamp(1.25rem, 2vw, 1.3rem); line-height: 1.25; }
h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }   /* ~20px */
h5 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; } /* ~18px */
h6 { font-size: 1rem; line-height: 1.4; font-weight: 600; }      /* ~16px */

::selection {
  background-color: var(--primary-1); /* highlight background */
  color: #000000;            /* highlight text color */
}

.hero-tagline{
  font-size: 1.5rem;
  line-height: 1.2;        /* ~34px */
  font-weight: 600; 
  letter-spacing: 0.02em;  /* optional: improve readability */
  margin-bottom: 2rem;
}

a[name] {
  scroll-margin-top: 60px;
}

h2{
text-transform: uppercase;
  font-weight:400;
     color:var(--text-main-lm);

}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
span {
    display: block;
    xmargin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.page{
    display:flex;
    flex-direction: column;
}
.hide{
    display:none;
}


.banner {
  position: relative;
  width: 100%;
  height: 100dvh;
  margin: 0;
  display: flex;
  align-items:end;
  justify-content: left;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;

}

.subpage-banner{
      height: 30dvh;}


.banner img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit:cover;
  z-index: 0;
  pointer-events: none;  /* ensures clicks pass through */
}



.about-img{
  height:40vh;
  object-fit:cover;
}

.banner-video{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit:cover;
  z-index: 0;
  pointer-events: none;  /* ensures clicks pass through */
}

.textbox{
  display: flex;
  flex-direction: column;
  align-items: center;  
  text-align: center;
  width:100%;
  max-width: 60ch;
  margin: 0 auto;

}


.hero-container {
  color: var(--bklight1);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;     /* vertical main axis */
  justify-content: center;    /* vertical centering */
  align-items:start;        /* horizontal centering */
  max-width: 30%; /* or 80%, or a clamp() */
  xmargin-inline: auto; /* centers the container */
  padding:0 0 10% 10%;
}

.subpage-container{
    color: var(--bklight1);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;     /* vertical main axis */
  justify-content: center;    /* vertical centering */
  align-items:start;        /* horizontal centering */
  max-width: 50%; /* or 80%, or a clamp() */
  xmargin-inline: auto; /* centers the container */
  padding:0 0 2% 10%;
}


.hero-container > * {
  text-align: left;         /* center inline text inside each child */
}

nav{
  position:fixed;
  z-index:2;
  width:100%;
  background-color:rgba(33, 34, 35, 0.9);
    color: white;
  /* replace text-align with flex layout */
  display:flex;
  align-items:center;           /* vertical centering */
  /* optional horizontal padding */
  padding: 0.5rem 0rem;
}

/* define how the links appear in nav and override body settings */
nav a:link    { color: var(--text-main-dm); text-decoration: none; }
nav a:visited { color: var(--text-main-dm); }
nav a:hover   { color:var(--secondary-1);}
nav a:active  { color:var(--secondary-2)}

.nav-left{
  display:flex;
  align-items:center;
  gap:3rem;                     /* space between logo and button */
  margin-left: 1rem;            /* match your existing margins if needed */
  margin-right:auto;            /* pushes the rest to the right */
}

/* keep existing right-side item styles */
nav>div{
  /* inline-block no longer required with flex, but harmless */
  display:inline-block;
  font-size:1rem;
  font-weight:400;
  margin:0 2rem 0 0rem;
  text-transform: uppercase;
}


/* logo slot so an image can be dropped in */
.logo-slot{
  width:auto;                   /* will fit image */
  height:48px;                  /* example; adjust as needed */
  display:flex;
  align-items:center;
  overflow: hidden;
}

.logo-slot img{
height: 100%; /* match the slot’s height /
width: 100%; / let object-fit handle aspect ratio /
object-fit: contain; / fit entirely inside 48px box */
display: block;
}

.logo-slot a{
display: inline-flex;
align-items: center;
height: 100%;
}



.button{

  font-family: inherit;     /* inherit font from body or parent */
  font-size: inherit;       /* inherit font size */
  color: inherit;           /* inherit text color */
  background: none;         /* remove default button background */
  border: none;             /* remove default border */
  padding: 0;               /* remove default padding */
  cursor: pointer;          /* show pointer cursor for clarity */
  text-transform: uppercase;

}

a.button{
    background-color: var(--secondary-1);
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    color:var(--text-main-dm);
    border-radius: 5px;
    
}

a.button:link, a.button:visited{
    background-color: var(--secondary-1);
    color:white;
}

a.button:hover{
    background-color: var(--secondary-2);
}

a:link, a:visited{
    color:var(--secondary-1);
    text-decoration: none;
}

a:hover, a:active{
    color: var(--secondary-2);
    text-decoration: none;
    transition-duration: 0.3s;
}

a.outline-button:link, a.outline-button:visited{
  box-shadow: inset 0 0 0 2px var(--text-muted-lm);
background-color: transparent;
color:var(--text-muted-lm);
}

a.outline-button:hover, a.outline-button:active{
background-color: var(--border);
}

.contact-button:link, .contact-button:visited{
    background-color: var(--secondary-1);
    padding:0.4rem 1rem 0.5rem 1rem;
    margin: 0 1rem 0 0;
    color:white;
    border-radius: 5px;
}

.contact-button:hover, .contact-button:active{
    background-color: var(--secondary-2);
    text-decoration: none;
    transition-duration: 0.3s;
}

.button-container{
  display: flex;
  flex-direction: row;
  text-align: center;
  gap:1rem;
}

ul{
    list-style-type: square;
    padding-left:1rem;
}

.section{
    background-image:none;
    position:relative;
    width: 100%;
    min-height: 100px;
}

.services-section .section-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.services-section .textbox {
    max-width: 48rem;
}

.services-section .services-gallery {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    padding-bottom: 4rem;
}

.services-section .service-container {
    display: grid;
    grid-template-columns: minmax(240px, 0.58fr) minmax(0, 1.42fr);
    align-items: center;
    gap: 2rem;
    grid-template-areas: "text media";

}

.services-section .service-container.reverse {
    grid-template-columns: minmax(0, 1.42fr) minmax(240px, 0.58fr);

  grid-template-areas: "media text";
}

.services-section .service-textbox {
    grid-area: text;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1.5rem;
    padding: 2rem;
    max-width: 20rem;
    width: 100%;
    justify-self: start;
}

.services-section .service-textbox h3 {
    line-height: 1.15;
    color:var(--panel-1-dm);
    font-size:1.5rem;
    font-variant-caps: all-small-caps;
}

.services-section .service-textbox p {
    margin: 0;
    line-height: 1.6;
}

.services-section .service-card {
    grid-area: media;
    width: 100%;
    aspect-ratio: 2/1;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.services-section .service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.portfolio-section{
  background-color: var(--bklight1);
}

.offers-section{
    background-color: white;
    color: var(--text-main-dm);
    text-align: center;
}

.package-section{
  background-color: var(--bklight2);
}

.offers-gallery{
    color: var(--text-main-lm);
    padding:3rem 0;
}



.contact-section{
    background-color: var(--bkdark1);
    color: var(--text-main-dm);
}


.section-container{ /*this is needed for making everything centred*/
    max-width: 80%; /* or 80%, or a clamp() */
    margin-inline: auto; /* centers the container */
    padding:3rem 2rem 3rem 2rem;
}

.section-label{
  text-transform: uppercase;
  font-size: 1.2rem; 
  font-weight: 300; 
   color:var(--text-muted-lm);
   }

.grid1 { /*for multiple images or items*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    max-width: 100%; /* container width */
    margin-inline: auto; /* centers the grid in .section */
    place-content: center; /* centers tracks if free space remains */
    justify-items: start; /* left-align content within cells */
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.grid2{ /*use for 2 columns*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 2fr));
    gap: 5rem;
    max-width: 100%; /* container width */
    margin-inline: auto; /* centers the grid in .section */
    place-content: center; /* centers tracks if free space remains */
    justify-items: start; /* left-align content within cells */
    align-items: center;
    margin-bottom: 3rem;
}


.card{
    z-index: 1;
    display:grid;
    cursor:pointer;
    overflow:hidden;
    border-radius: 1px;
    background-color: var(--panel-1-lm);

}
.card > * {
    grid-column:1/2;
    grid-row:1/2;
}


.card-img{
    width:100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.service-container{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  gap:0.5rem;
}

.service-card {
  width:100%;
  height:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
  overflow:hidden;
  xposition:relative;
}

.service-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}


.close-btn {
  position: fixed;
  top: 1rem;    /* distance from the top of the viewport */
  left: 1rem;  /* distance from the right edge of the viewport */
  color:var(--panel-1-lm);
  border-radius: 100%;
  cursor: pointer;
  font-size: 2rem;
}

.card-content{
    background-color: none;
    padding:0rem 5% 0rem 5%;
    z-index:1;
    align-self:end;
    opacity: 0;
    color:var(--text-main-lm);
    
}

.card:hover .card-img{
/*card-img thats inside a card which is being hovered*/
    filter: url(#whiteflood);
}
.card:hover .card-content{
/*card-content thats inside a card which is being hovered*/
    opacity: 100%;
    padding-bottom:0rem;
    transition-duration: 0.3s;
}
.container{
    background-color: rgba(0, 0, 0, 0.75);
    z-index:11;

}
.pop-up-window{
    /* some details copied from section-container */
    margin:5rem 0 5rem 0;
    height:100%;
    background-color: var(--background-lm);
    max-width: 70vw; /* or 80%, or a clamp() */
    margin-inline: auto; /* centers the container */
    padding:3rem 2rem 5rem 2rem;
}
.wrapperBoxes {
    /*the grids that the portfolio pages are in*/
    max-width: 100%; /* Or set a fixed pixel value if preferred */
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Spacing between items */
    justify-content: flex-start; /* Left-aligns for natural flow */
}

.scroll-area {
  height: 100vh;           /* or any fixed size that creates overflow */ 
  overflow: auto;         /* makes this a scroll container */
  scroll-behavior: smooth;/* smooth only here */
}


.wrapper::-webkit-scrollbar{
    width:0;
}

.wrapperBoxes {
    /*the grids that the portfolio pages are in*/
    max-width: 100%; /* Or set a fixed pixel value if preferred */
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Spacing between items */
    justify-content: flex-start; /* Left-aligns for natural flow */
}

.media-element{
    height: 60vh; /* Fixed height in vh – ensures full visibility and screen fit */
    width: auto; /* Width adapts to aspect ratio */
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
}
.media-element img, .media-element video {

    height: 100%; /* Fills the fixed height */
    width: auto; /* Adapts width to maintain aspect ratio */
    object-fit: contain; /* Keeps the entire image visible without cropping */
    display: block;
    max-width:100%;
}

.media-element > img, .card img, .banner {
    inline-size:100%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;  
}


.project-desc{
    display: flex;
    flex-direction: column;
    padding-bottom:2rem;
}


/*test stuff for interactive/ecom gallery*/

.ecommerce-gallery-container{
  display:flex;
  flex-direction: row;
  justify-content: left;
  gap:2rem;
}

.ecommerce-gallery {
  display: flex;
  align-items: centre;
  gap: 0.75rem;
  flex-direction: row;
}
.ecommerce-gallery-text{
  xmargin:auto;
  padding-left:12px;
  max-width:60ch;
}

.testimonial-section {
  background-color: var(--bklight2);
}

/* Container layout: Side-by-side alignment */
.testimonial-container {
    display: flex;
    align-items: center; 
    justify-content: center; /* Pulls the image and text block into the middle of the screen */
    gap: 3rem; /* Adjust this to control exactly how close the image sits to the text */

  }

.testimonial-textbox {
    display: flex;
    flex-direction: column;
    align-items: center; /* Keeps everything inside the textbox centered */
    text-align: center; /* Keeps the quote itself centered */
    max-width: 800px; /* Adjust this to control how wide the paragraph is allowed to get */
    gap: 0.8rem;
}

/* Prevents the image from shrinking if the text is very long */
.testimonial-image-card {
    flex-shrink: 0; 
}

/* Thumbnail styling */
.testimonial-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: #444; /* Dark grey for readability */
    margin: 0;
    line-height: 1.5;
}

.testimonial-author {
    font-size: 0.95rem;
    font-weight: 600;
    color: #777; /* Lighter grey to contrast with the quote */
    margin: 0;
}

/* Hide the checkbox completely */
.read-more-toggle {
    display: none;
}

/* Default collapsed state for the quote */
.testimonial-quote {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limits to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

/* Expanded state when the hidden checkbox is checked */
.read-more-toggle:checked ~ .testimonial-quote {
    -webkit-line-clamp: unset;
}

/* Styling the label to look like a button */
.read-more-btn {
    color: var(--primary-1); /* Match your brand colour */
    font-size: 0.95rem;
    font-style: italic;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 10px;
}

.read-more-btn:hover {
    text-decoration: underline;
}

/* Default text for the button */
.read-more-btn::after {
    content: "Read more";
}

/* Changes text to 'Read less' when expanded */
.read-more-toggle:checked ~ .read-more-btn::after {
    content: "Read less";
}

.main-media {
  width: 35vw;
  height: 35vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.main-media img, .main-media video {
  max-width: 100%;
  max-height: 100%;
}
.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 0 0;
  overflow-y: scroll;
  overflow-x: hidden;
  height:35vw; /*use the same height as the main-media */
position: relative;}



.thumbnails img{
  background-color: white;

}
.thumbnail {
  width: 63px;
  height: 63px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border 0.2s;
  overflow:visible;
}

.thumbnail.active {
  border: 2px solid var(--secondary-2);
}


.video-thumbnail, .ar-thumbnail{
  position: relative;
  display: inline-block;
  width: 63px;
  height: 63px;
  flex-shrink: 0;

}

.video-thumbnail img, .ar-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

.video-thumbnail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; /* Adjust size to your image */
  height: 30px; /* Adjust size to your image */
  background: url('images/play_icon.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.8;
}

.ar-thumbnail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; /* Adjust size to your image */
  height: 30px; /* Adjust size to your image */
  background: url('images/ar_icon.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.8;
}

/*test stuff for gallery end*/

/*test stuff for offers*/

.offers-gallery {
    display: flex;
    gap: 24px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.pricing-plan {
    flex: 1 1 260px;
    max-width: 300px;
    border-radius: 16px;
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--bklight1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 4px solid transparent;

}

.pricing-plan:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    border: 4px solid var(--primary-2);
}

.pricing-plan.standard {
    background: var(--bklight2);
}

.pricing-plan h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
    text-align: left;
}

.pricing-plan ul {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
    flex-grow: 1;
}

.pricing-plan ul li {
    padding: 10px 0 10px 30px;
    font-size: 15px;
    text-align: left;
    position: relative;
}

.pricing-plan ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #7a8b5c; /* placeholder, change later */
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.pricing-plan ul li b {
    font-weight: 700;
}

.pricing-plan ul li s {
    opacity: 0.4;
    text-decoration: line-through;
}

.pricing-plan ul li s::before {
    background: #ccc;
}

.pricing-plan ul li:has(s)::before {
    content: none;
}

.pricing-plan a {
    display: block;
    text-align: center;
    padding: 14px 0;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #1a1a1a;
    margin-top: auto;
}


@media (max-width: 900px) {

    .media-element{
      height:auto;
    }


nav > div:not(.nav-left) {
   display: none;
}

.grid2{
  grid-template-columns: 1fr;
  margin-bottom:0;
  gap:1rem; 
}

.grid1{
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

.button-container{
  flex-direction: column;
}

.main-media {
  width: 100%;
  height: 100%;
  
}
.thumbnails {
  flex-direction: row;
  height:100%;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0.75rem 0;
  position:relative;
}



.ecommerce-gallery {
  flex-direction: column;
}
.ecommerce-gallery-container{
 flex-direction: column;
}
.ecommerce-gallery-text{
  padding:0;
}


  .offers-gallery {
    overflow-x:scroll;
    flex-shrink: 0;
    justify-content: flex-start;
    scroll-snap-type: x mandatory; 
    scroll-snap-align: center;
  }
  
  .pricing-plan {
  min-width:60vw;


  }

.about-img{
  height:40vh;
  width:100%;

}
  .services-section .service-container,
  .services-section .service-container.reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
  }

  .services-section .service-textbox,
  .services-section .service-card {
    width: 100%;
    min-width: 0;
  }

    .services-section .service-textbox {
    justify-self: stretch;
  }

}

}