body, html {
    padding: 0;
    margin: 0;
}

/*about us section styiling starts*/

#aboutUsIntro {
    width: 90%;
    margin: auto;
    padding: 20px;
    text-align: justify;
    font-size: 1.25rem;
    border-radius: 10px;
    box-shadow: -5px 5px 0px #700000;
    border: solid 1px #808080;
    transition: ease-in-out .2s;
}

#aboutUsIntro:hover {
    box-shadow: -10px 10px 0px #700000;
    border: solid 1px #808080;
}


#aboutUsSectionHolder {
  margin-top: 50px;
  width: 100%;
  height: auto;
}

#aboutUsLeftImage {
  width: 100%;
  transition: ease-in-out 0.3s;
}

#aboutUsLeftSection {
  display: inline-block;
  vertical-align: middle;
  width: 49%;
  transition: ease-in-out 0.3s;
}

#aboutUsRightSection {
  display: inline-block;
  vertical-align: middle;
  width: 49%;
  transition: ease-in-out 0.3s;
}
.aboutUsRightSections {
  width: 100%;
  margin: 30px 0;
  height: auto;
}

.aboutUsImages {
  width: 20%;
  max-width: 175px;
  min-width: 150px;
  display: inline-block;
  vertical-align: middle;
  border: solid 5px #b30000;
  border-radius: 50%;
}

#licensedImageDesktop {
  display: inline-block;
}

#licensedImageMobile {
  display: none;
}

.aboutUsContentSections {
  width: 75%;
  display: inline-block;
  vertical-align: middle;
}

.aboutUsContentSections h2 {
  font-size: 2rem;
  margin: 0 0 10px 0;
}

.aboutUsContentSections p {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
}

/*right align for licensed content*/

#licensedContent {
  text-align: right;
}



/*about us section styling end*/


/* reviews section styling start */
/* === Our Customers Section === */
#ourCustomersWrapper {
  margin-top: 100px;
  width: 100%;

  /* sizing */
  min-height: 80vh; /* fills 80% of viewport height */
  /* aspect-ratio: 16 / 9;  <-- remove or comment out if you want min-height instead */

  /* background */
  background: url("../images/ourcustomers-background.jpg") center / cover no-repeat fixed;
  box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.5);

  /* layout */
  display: flex;
  flex-direction: column; /* stack heading on top, reviews below */
}

#ourCustomersWrapper h2 {
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.454);
  font-size: 3.5rem;
  padding: 20px 0;
  margin: 0 0 1rem; /* keep at top with spacing below */
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

#starsWrapper {
  width: 100%;
  text-align: center;
  margin: 0 0 1rem; /* keep at top with spacing below */
}

.starImage {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 15px;
  margin: auto auto 1rem; /* keep at top with spacing below */
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

/* === Reviews Wrapper === */
#reviewsWrapper {
  width: 80%;
  margin: auto;
  max-width: 1000px;
  flex: 1; /* take up the remaining vertical space */
  display: flex;
  justify-content: center; /* horizontally center reviews */
  align-items: center;     /* vertically center reviews */
  text-align: center;
  padding: 2rem;
}


.reviews {
  width: 100%;
  margin: 20px auto;
  padding: 100px;;

  /* frosted glass effect */
  background: rgba(255, 255, 255, 0.25);   /* translucent white */
  backdrop-filter: blur(10px);             /* blur whatever is behind */
  -webkit-backdrop-filter: blur(10px);     /* Safari support */

  border-radius: 12px;                     /* rounded corners for glass feel */
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border for definition */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* optional shadow for depth */
}


.customerName {
  width: 100%;
  text-align: left;
  font-weight: bolder;
  font-size: 1.25rem;
}

.reviewDate {
  width: 100%;
  text-align: right;
  font-size: 0.9rem;
  font-weight: bolder;
}

.customerReview {
  width: 100%;
  text-align: justify;
  font-size: 1.25rem;
  color: #ffffff;
  background-color: #ca0000;
  box-shadow: -10px 10px 0px #700000;
  border-radius: 10px;
  border: solid 1px #ffffff;
}

.workDescription {
  font-size: .90rem;
  font-style: italic;
}

.reviewSource {
  width: 100%;
  text-align: right;
  font-size: 0.9rem;
  font-weight: bolder;
}



/* Responsive Design */

@media (max-width: 1400px) {
#aboutUsLeftSection {
  display: inline-block;
  vertical-align: middle;
  width: 20%;
}

#aboutUsLeftImage {
  width: 100%;
  height: 750px;
}

#aboutUsRightSection {
  display: inline-block;
  vertical-align: middle;
  width: 79%;
}
  
}



@media (max-width: 1200px) {

  .reviews {
    width: 90%;
  }
}

@media (max-width: 1000px) {

  .aboutUsRightSections h2 {
    font-size: 1.5rem;
  }

  .aboutUsRightSections p {
    font-size: 1.15rem;
  }
}

@media (max-width: 830px) {

 #aboutUsLeftSection {
  width: 0px;
  height: 0px;
  padding: 0;
  margin: 0;
 }

 #aboutUsRightSection {
  width: 100%;
  text-align: center;
 }

 .aboutUsRightSections {
  width: 100%;
  margin: auto;
 }
  #aboutUsRightSection {
    text-align: center;
  }

  .aboutUsImages {
    display: block;
    margin: auto;
  }

  #licensedImageDesktop {
    display: none;
  }

  #licensedImageMobile {
    display: block;
  }

  .aboutUsContentSections{

    display: block;
    width: 100%;
}

#licensedContent {
  text-align: center;
}

.aboutUsRightSections p {
  text-align: justify;
  padding: 0 15px;
}
}

@media (max-width: 600px) {
  
  #aboutUsIntro p {
    font-size: 1rem;
    text-align: center;
  }

}


@media (max-width: 540px) and (min-width: 520px) {

  #topSliderWrapper {
    margin-top: 175px;
    border-top: solid 10px #b8251a;
  }

  #reviewsWrapper {
    width: 100%;
    padding: 0;
  }

  .reviews {
    width: 70%;
    padding: 50px 10px
  }
}

@media (max-width: 480px) {


    #topSliderWrapper{
      margin-top: 190px;
    }

    .aboutUsImages {
      width: 80%;
      min-width: 80%;
    }
    .aboutUsContentSections {
      margin-bottom: 50px;
    }
}





/* Reveal about sections -on-scroll base state */
.aboutUsRightSections {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1000ms ease-out, transform 1000ms ease-out;
  will-change: opacity, transform;
}

/* When visible in viewport */
.aboutUsRightSections.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aboutUsRightSections {
    transition: none;
    transform: none;
  }
}

/* === Reviews: sequencing + animations === */

/* Start hidden by default; JS toggles these classes */
#reviewsWrapper .reviews {
  opacity: 0;
  display: none;
  position: relative;
  transition: opacity 1000ms ease;
  will-change: opacity, transform;
}

/* Visible state */
#reviewsWrapper .reviews.is-active {
  display: block;
  opacity: 1;
}

/* Exit fade */
#reviewsWrapper .reviews.is-exiting {
  opacity: 0;
}

/* Reset children to off-screen starting positions */

.customerReview {
  padding: 50px 25px;
}




#reviewWrapper.reviews .customerName,
#reviewsWrapper .reviews .customerReview,
#reviewsWrapper .reviews .reviewSource,
#reviewsWrapper .reviews .reviewDate {
  opacity: 0;
}

/* Enter animations when parent becomes active */
#reviewsWrapper .reviews.is-active .customerName {
  animation: slideInLeft 1200ms ease forwards;
}

#reviewsWrapper .reviews.is-active .customerReview {
  animation: slideInUp 1200ms ease 240ms forwards; /* small delay after name */
}

#reviewsWrapper .reviews.is-active .reviewSource,
#reviewsWrapper .reviews.is-active .reviewDate {
  animation: slideInRight 1200ms ease 480ms forwards; /* after review text */
}

/* Keyframes */
@keyframes slideInLeft {
  from { transform: translateX(-18px); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}
@keyframes slideInUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(18px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #reviewsWrapper .reviews,
  #reviewsWrapper .reviews.is-exiting {
    transition: none;
  }
  #reviewsWrapper .reviews .customerName,
  #reviewsWrapper .reviews .customerReview,
  #reviewsWrapper .reviews .reviewSource,
  #reviewsWrapper .reviews .reviewDate {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Fade from bottom base state */
#ourCustomersWrapper {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
  will-change: opacity, transform;
  background-attachment: fixed;
}

/* When visible */
#ourCustomersWrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #ourCustomersWrapper {
    transition: none;
    transform: none;
    opacity: 1;
  }
}



@media (max-width: 800px) {

  #reviewsWrapper {
    width: 100%;
    padding: 0;
    overflow: hidden;
      /* frosted glass effect */
  background: rgba(255, 255, 255, 0.25);   /* translucent white */
  backdrop-filter: blur(10px);             /* blur whatever is behind */
  -webkit-backdrop-filter: blur(10px);     /* Safari support */
  }
  .customerReview {
    width: 100%;
  }

  #reviewsWrapper .reviews.is-active {
  display: block;
  width: 90%;
  opacity: 1;
}

}