/* ========================== */
/*       TABLE OF INDEX       */
/* ========================== */
/* 1. General Elements */
/* 2. Header        */
/* 3. Contact Section      */
/* 4. What We Do Section */
/* 5. Pricing Section */
/* 6. Portfolio Section */
/* 7. Who We Are Section */
/* 8. Blog Section */
/* 9. Pricing Section */
/* 10. Contact Us Section */
/* 11. Services Section */
/* 12. Footer */
/* 13. Galaxy Section */
/* 14. Tablet Media Queries */
/* 15. Desktop Media Queries */

/* ========================== */
/*      GENERAL ELEMENTS      */
/* ========================== */

* {
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-size: 1.1em;
}

html,
body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  font-weight: 400;
  overflow-x: hidden;
  width: 100vw;
}

a {
  color: white;
  text-decoration: none;
}

/* ========================== */
/*          STYLING           */
/* ========================== */
.lh21 {
  line-height: 21.13px;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fw700 {
  font-weight: 700 !important;
}

.whiteOnBlack {
  background: black !important;
  color: whitesmoke;
}

.font12 {
  font-size: 12px !important;
}

.font16 {
  font-size: 1rem !important;
}

.font18 {
  font-size: 18px !important;
}

.font20 {
  font-size: 20px !important;
}

.font20 img {
  margin-right: 3%;
}

.font24 {
  font-size: 24px !important;
}

.font28 {
  font-size: 28px !important;
}

.font40 {
  font-size: 40px;
}

.font56 {
  font-size: 56px;
}

.poppins {
  font-family: "Poppins", sans-serif;
}

.crimson {
  font-family: "Crimson Text", serif;
  font-weight: 600;
}

.s11x14 {
  height: 14px;
  width: 11px;
}

.s14x11 {
  height: 11px;
  width: 14px;
}

.s14x14 {
  height: 14px;
  width: 14px;
}

.s16x13 {
  height: 13px;
  width: 16px;
}

.s16x16 {
  height: 16px;
  width: 16px;
}

.s20x20 {
  height: 20px;
  width: 20px;
}

.eightyWidth p{
  width: 80%;
}

.smallAdobePhoto {
  width: 157px;
  height: 193px;
}

.margin100100 {
  margin: 10% 0 10% 0;
  height: 45px !important;
}

.desktopOnly {
  display: none !important;
}

/* ========================== */
/*          LANDING           */
/* ========================== */
.landing {
  position: relative;
  background-color: lightgray;
  background-image: url("../nsdhimages/landingHeroBackground.webp");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 1014px;
  overflow: hidden;
}

.landingSmall {
  background: #a7a7a7; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  padding-top: 75px;
  font-size: 2rem;
  color: whitesmoke;
  width: 100%;
  overflow: hidden;
  background-image: url("../nsdhimages/landingHeroBackground.webp");
  background-size: cover; /* Ensures the image covers the entire area */
  background-position: center; /* Centers the image within the div */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}

.curvedLine {
  height: 8px;
  width: 44%;
  position: absolute;
  top: 8%;
}

.curvedLine img {
  width: 0; /* Start with 0 width */
  opacity: 0; /* Start invisible */
  animation: fadeInStretch 2s forwards; /* Apply fade-in and stretch animation */
}

.landingMockup {
  opacity: 0; /* Start invisible */
  animation: fadeInNoMovement 8s forwards; /* Apply fade-in animation */
  position: absolute;
  bottom: -7%;
  height: 54%;
  z-index: 100;
}

.landingPageBlob {
  animation: fadeInNoMovement 8s forwards; /* Apply fade-in animation */
}

.landingPageBlob {
  position: absolute;
  right: 0;
  bottom: -25%;
  margin: auto auto;
}

.fade1 {
  animation-delay: .7s; /* Delay for text */
  opacity: 0; /* Start invisible */
  animation: fadeInSlideDown1 2s .5s forwards; /* Apply fade-in and slide-down animation with delay */
}

.fade2 {
  opacity: 0; /* Start invisible */
  animation: fadeInSlideDown2 2s .9s forwards; /* Apply fade-in and slide-down animation with delay */
}

.fade3 {
  opacity: 0; /* Start invisible */
  animation: fadeInSlideDown2 2s 1.3s forwards; /* Apply fade-in and slide-down animation with delay */
}

.fade4 {
  opacity: 0; /* Start invisible */
  animation: fadeInSlideDown3 2s 1.7s forwards; /* Apply fade-in and slide-down animation with delay */
}

.fade5 {
  opacity: 0; /* Start invisible */
  animation: fadeInSlideDown4 2s 2s forwards; /* Apply fade-in and slide-down animation with delay */
}

.fade6 {
  opacity: 0; /* Start invisible */
  animation: fadeInSlideDown5 2s 2.2s forwards; /* Apply fade-in and slide-down animation with delay */
}

@keyframes fadeInSlideDown1 {
  0% {
      opacity: 0;
      transform: translate(0, 100%);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0%);
  }
}
@keyframes fadeInSlideDown2 {
  0% {
      opacity: 0;
      transform: translate(0, 20%);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0%);
  }
}
@keyframes fadeInSlideDown3 {
  0% {
      opacity: 0;
      transform: translate(0%, 100%);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0%);
  }
}
@keyframes fadeInSlideDown4 {
  0% {
      opacity: 0;
      transform: translate(0%, 40%);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0%);
  }
}
@keyframes fadeInSlideDown5 {
  0% {
      opacity: 0;
      transform: translate(0%, 30%);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0%);
  }
}

@keyframes fadeInStretch {
  0% {
      opacity: 0;
      width: 0; /* Start with 0 width */
  }
  50% {
      opacity: 1; /* Fade in */
      width: 0; /* Keep width 0 */
  }
  100% {
      opacity: 1;
      width: 100%; /* Stretch to full width */
  }
}

@keyframes fadeInFromLeft {
  0% {
      opacity: 0;
      width: 0; /* Start with 0 width */
      transform: translate(100%, 0);
  }
  50% {
      opacity: 1; /* Fade in */
      width: 0; /* Keep width 0 */
  }
  100% {
      opacity: 1;
      width: 95%; /* Stretch to full width */
      transform: translate(0, 0);
  }
}

@keyframes fadeInNoMovement {
  0% {
      opacity: 0;
      transform: translate(0, 0);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0);
  }
}

.container {
  z-index: 2;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  height: 28%;
  color: black;
}

.contactHeaderWrapper {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
}

.container h1 {
  font-size: 2.5rem;
  margin: 5% 0;
  width: 100%;
  position: static;
  max-width: 550px;
  font-weight: 700;
}

.container h3 {
    position: static;
    font-size: 1rem;
    font-weight: 500;
    max-width: 300px;
    margin: 4px 0;
  }

  .container button {
    margin-top: 40px;
  }

  @media (min-width: 600px) and (max-width: 1367px) {
    .curvedLine {
      height: 4px;
      width: 18%;
      position: absolute;
      top: 8%;
    }
    
    .curvedLine img {
      width: 0; /* Start with 0 width */
      opacity: 0; /* Start invisible */
      animation: fadeInStretch 2s forwards; /* Apply fade-in and stretch animation */
    }

    .landing {
      height: 100vh;
    }

    .landingSmall {
      height: 45vh;
      align-items: flex-start;
    }

    .landingSmall h1{
      margin-left: 10%;
      font-size: 5rem;
    }
  }  

/* ========================== */
/*          HEADER           */
/* ========================== */
header {
  width: 100%;
  height: 165px;
  z-index: 10;
}

.desktopHeaderWrapper {
  display: none;
}

.headerNav a {
  padding: 2% 0;
}

.headerNav .underline {
  border-bottom: 2px solid whitesmoke;
}

.headLogoContainer {
  position: absolute;
  display: flex;
  left: -27%;
  top: -50%;
}

.footerLogoSVG {
  width: 100%;
}

.mobileNavMenu {
  display: none;
}

.hamInnerContainer {
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  margin: auto;
  height: 50%;
  z-index: 1005;
}
.hamContainer {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

svg {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.active svg {
  transform: rotate(90deg);
}

.active path {
  stroke: black; /* or any color you prefer */
}

path {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
path:nth-child(1) {
  transform-origin: 36% 40%;
}
path:nth-child(2) {
  stroke-dasharray: 29 299;
}
path:nth-child(3) {
  transform-origin: 35% 63%;
}
path:nth-child(4) {
  stroke-dasharray: 29 299;
}
path:nth-child(5) {
  transform-origin: 61% 52%;
}
path:nth-child(6) {
  transform-origin: 62% 52%;
}
.active path:nth-child(1) {
  transform: translateX(9px) translateY(1px) rotate(45deg);
}
.active path:nth-child(2) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}
.active path:nth-child(3) {
  transform: translateX(9px) translateY(1px) rotate(-45deg);
}
.active path:nth-child(4) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}
.active path:nth-child(5) {
  transform: translateX(9px) translateY(1px) rotate(-45deg);
}
.active path:nth-child(6) {
  transform: translateX(9px) translateY(1px) rotate(45deg);
}

.mobileWrapper {
  width: 100%;
  height: 125px;
  display: flex;
  position: relative;
  background-color: white;
}

.mobileNavMenu {
  position: fixed; /* or absolute, depending on your layout */
  top: 0;
  right: 0;
  width: 250px; /* Set the width of your menu */
  height: 100%; /* Full-screen height */
  background-color: #f0f0f0; /* Menu background color */
  transition: right 0.5s; /* Smooth transition for the slide effect */
  z-index: 1001; /* Ensure the menu is above other content */
  display: none;
  flex-direction: column;
}

.mobileNavMenu.active {
  display: flex;
}

.mobileNavMenuLinks {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: right;
  gap: 20px;
  margin-top: 50%;
  width: 80%;
}

.mobileNavMenuLinks a {
  color: black;
}

.headerNav {
  display: flex;
}

.mobileLogoDiv {
  position: relative;
}

.logoSVG {
  position: absolute;
  bottom: 0;
  top: 65%;
  margin: auto;
  left: 3%;
}

.footerLogoSVG {
  width: 100%;
}

.headLogoContainer {
  position: static;
}

.headLogoContainer h2 {
  position: absolute;
  width: 250px;
  left: 30%;
  top: 45%;
  line-height: 1.1;
  font-size: 1.5rem;
  font-weight: 400;
}

.chwrapper {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactHeader {
  top: 0;
  z-index: 10000;
  color: white;
  display: flex;
  flex-direction: row;
  max-width: 700px;
  width: 100%;
}

.contactHeaderDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5%;
  width: 150px;
  font-size: 13px;
}

.contactHeaderWrapper > .contactHeaderDiv:nth-child(1) {
  display: none;
}


.contactHeaderWrapper > .contactHeaderDiv:nth-child(2) {
  display: none;
}

@media (min-width: 1025px) {
  .contactHeader {
    display: flex;
    gap: 5%;
  }

  .mobileWrapper {
    display: none;
  }

  .hamContainer {
    display: none;
  }

  .logoSVG {
    top: 0px;
  }

  .desktopHeaderWrapper a{
    color: black;
    font-size: 1.5rem;
  }

  .headLogoContainer {
    width: 30%;
    height: 100%;
  }

  .headLogoContainer h2 {
    font-size: 2rem;
    left: 17%;
    top: 0;
  }
}


/* ========================== */
/*          WHAT WE DO           */
/* ========================== */

.whatWeDoTopInner {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: auto auto;  
  opacity: 0; /* Start invisible */
  transform: translateX(90%); /* Start off-screen to the right */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for smooth animation */
}

.whatWeDoTopInner.visible {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Slide to original position */
}

.whatWeDoTop h2 {
  text-align: left;
  width: 100%;
  margin: 0;
  line-height: 48px;
}

.whatWeDoTop h4 {
  margin: 0;
  text-align: left;
  width: 100%;
}

/* ========================== */
/*          SERVICES           */
/* ========================== */

.servicesSection {
  color: white;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
}

.servicesInnerContainerRemake {
  display: none;
}

.servicesTopContainer {
  height: 400px;
}

.servicesTopContainer h2 {
  width: 80%;
  margin: 0;
}
.servicesTopContainer h4 {
  width: 60%;
  margin: 0;
}

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

.ourServicesItem1, 
.ourServicesItem2, 
.ourServicesItem3, 
.ourServicesItem4, 
.ourServicesItem5,
.ourServicesItem6,
.ourServicesItem7 {
  height: 100%;
  width: 95%;
  margin-bottom: 4%;
}

.ourServicesItemUpperContainer {
  background: black;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10% 0;
}

.ourServicesItemUpperContainer p {
  width: 90%;
  margin-bottom: 15%;
}

.ourServicesItemUpperContainer button {
  border: none;
}

.servicesPageItemWrapper {
  width: 100%;
  margin: auto;
  display: flex;
  margin-left: 5%;
  gap: 2%;
}

.servicesPageItem button {
  border: 1px solid white;
}

.ourServicesItemLowerContainer {
  height: 100%;
}

.ourServicesItemLowerContainer img {
  width: 100%;
}

.quoteSection {
  height: 630px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("nsdhimages/quoteSectionImage.svg");
  position: relative;
  margin-top: 75px;
  opacity: 0; /* Start invisible */
  transition: opacity 1.5s ease-in; /* Smooth fade-in transition */
}

.quoteSectionInnerContainer {
  width: 90% !important;
  position: absolute;
  top: 5%;
}

.quoteSection p {
  font-weight: 700;
  font-size: 1.5rem;
  color: black;
  margin-bottom: 15%;
}

.quoteSection button {
  display: flex;
  margin: auto;
  color: white;
  justify-content: flex-start;
}

.quoteSection button p{
  display: flex;
  margin: auto;
  color: white;
  font-weight: 600;
}

.servicesPageItem {
  text-align: left;
  line-height: 21.13px;
  background-color: white;
  color: black;
  border: 1px solid #a7a7a7;
  margin: auto;
}

.servicesPageItem h2{
  text-align: center;
}

.ourServicesItemUpperContainerImageBackground{
  background-color: black;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.servicesPageItem p {
  margin: 0;
}

@media (min-width: 500px) and (max-width: 1367px) {
  .servicesInnerContainer {
    display: flex; /* Ensure flexbox is applied */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .ourServicesItemUpperContainer {
    height: 650px;
    padding: 50px 0;
  }

  .ourServicesItemUpperContainer,
  .ourServicesItemLowerContainer {
    width: 100%;
  }

  .ourServicesItemLowerContainer {
    height: 350px;
  }

  .ourServicesItemLowerContainer img{
    height: 100%;
    width: 100%;
  }

  .ourServicesItem1,
  .ourServicesItem2,
  .ourServicesItem3,
  .ourServicesItem4,
  .ourServicesItem5,
  .ourServicesItem6 {
    flex: 1 0 46%; /* Adjust the width as needed */
    box-sizing: border-box;
    margin: 5px; /* Optional: Adds space between the items */
  }

  .ourServicesItem7 {
    flex: 1 0 90%; /* Takes the full width for the last child */
    box-sizing: border-box;
    margin: 5px; /* Optional: Adds space between the items */
  }

  .ourServicesItem7 .ourServicesItemUpperContainer,
  .ourServicesItem7 .ourServicesItemLowerContainer{
    width: 100%;
  }

  .ourServicesItem7 .ourServicesItemLowerContainer{
    height: 100%;
  }

  .quoteSection {
    background-image: none;
    background-color: #a7a7a7;
    width: 100%;
    background-image: url("nsdhimages/artisanBackground.webp");
  }

  .quoteSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.925);
    pointer-events: none; /* Ensures the overlay doesn't interfere with interactions */
    filter: blur(1px);
    margin: -3px; /* Adjust this value for more or less blur */
  }

  .quoteSectionInnerContainer {
    position: relative;
  }
}

@media (min-width: 1368px) and (max-width: 2048px) {
}

/* ========================== */
/*          PORTFOLIO NUMBERS          */
/* ========================== */

.portfolioNumbersSection {
  color: white;
  background-color: black;
  display: flex;
  flex-wrap: wrap; /* Allow children to wrap */
  justify-content: center; /* Center align items horizontally */
  text-align: center;
  padding-top: 134px;
  padding-bottom: 10px;
  gap: 50px;
  position: relative;
}

.portfolioNumbersWrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* Ensure the wrapper also wraps its children */
  justify-content: center;
  align-items: center;
}

.portfolioNumbersItem1,
.portfolioNumbersItem2,
.portfolioNumbersItem3,
.portfolioNumbersItem4 {
  width: 100%; /* Each item takes 50% width minus the gap */
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 50px; /* Adds space between rows */
}

.portfolioNumbersItem1 p,
.portfolioNumbersItem2 p,
.portfolioNumbersItem3 p,
.portfolioNumbersItem4 p {
  margin: 0;
}

@media (min-width: 600px) and (max-width: 1367px) {
  .portfolioNumbersWrapper {
    flex-wrap: wrap; /* Ensures children wrap */
    width: 100%;
  }

  .portfolioNumbersItem1,
  .portfolioNumbersItem2,
  .portfolioNumbersItem3,
  .portfolioNumbersItem4 {
    width: calc(50% - 50px); /* Each item takes 50% width minus the gap */
    flex: 1 0 45%; /* Adjust the width as needed */
    box-sizing: border-box;
    margin: 5px; /* Optional: Adds space between the items */
  }
}


/* ========================== */
/*          TESTIMONIALS      */
/* ========================== */

.testimonialsSection {
  font-family: "Poppins", sans-serif;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.testimonialsInnerSection {
  width: 95%;
  height: 100%;
  color: black;
}

.testimonialsInnerUpper {
  font-family: "Poppins", sans-serif;
  width: 86%;
  margin: auto;
  padding-top: 54px;
  color: white;
}

.testimonialsInnerUpper h2 {
  font-size: 2.5rem;
  margin: 0 0 5% 0;
  width: 80%;
}

.testimonialsInnerUpper p {
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.testimonialsInnerMid {
  height: 50%;
  border-radius: 15px;
  background-color: white;
}

.testimonialsInnerLower {
  height: 35%;
  width: 90%;
  margin: 12% auto;
  background: gray;
}

.reviewsContainer {
  width: 100%;
  height: 100%;
  display: flex;
}

.reviewsContainerInnerLeft,
.reviewsContainerInnerRight {
  width: 7%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.leftArrowContainer,
.rightArrowContainer {
  width: 100%;
  display: flex;
  cursor: pointer;
}

.leftArrowContainer {
  justify-content: flex-start;
}

.rightArrowContainer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.reviewWrapper  {
  border-radius: 5px;
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 100%;
}

.googleImage {
  position: absolute;
  right: 3%;
  top: -25%;
  width: 100px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.googleImage img {
  width: 100%;
}

.reviewNameContainer {
  width: 90%;
  display: flex;
  margin: auto;
  padding: 9px 0;
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  z-index: 3; /* Ensure it stays above other elements */
}

.reviewNameImage{
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviewNameInnerRightContainer{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.reviewNameFirstLast{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.reviewNameDate{
  width: 100%;
  color: #8D8D8D;
  font-size: 12px;
  display: flex;
  align-items: flex-start;
}


.reviewStars {
  width: 90%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  position: sticky;
  z-index: 3;
  top: 27%;
  padding: 1%;
  background-color: white;
  transition: height 0.5s ease;
}

.reviewText {
  width: 90%;
  margin: auto;
  transition: padding 0.5s ease; /* Smooth transition for padding change */
  font-size: 14px;
}

.reviewPic {
  max-width: 44px;
  border-radius: 50%;
}

.reviewButton {
  width: 90%;
  font-size: 14px;
  color: #8D8D8D;
  display: flex;
  align-items: center;
  margin: auto 0;
}

.review {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  display: flex;
  align-items: center;
}

/* State classes for current, next, and previous reviews */
.current {
  transform: translateX(0);
}

.next {
  transform: translateX(100%);
}

.prev {
  transform: translateX(-100%);
}

#review1 {
  height: 100%;
  /* display: flex; */
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

#review2 {
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 100%;
}

#review3 {
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 16px;
}



/* Animations for sliding in and out */
.slide-in-left {
  animation: slideInLeft 0.5s forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s forwards;
}

.slide-out-right {
  animation: slideOutRight 0.5s forwards;
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease-out, transform 2s ease-out;
}

.invisible {
  opacity: 0;
  transform: translateY(0); /* No movement, just transparency */
  transition: opacity 1s ease-out;
}

.scrolling-down {
  transform: translateY(50%);
}

.scrolling-up {
  transform: translateY(-50%);
}

.row1Trigger, .row2Trigger, .row3Trigger {
  opacity: 0;
  transform: translateY(50%);
}

.row1Trigger.visible, .row2Trigger.visible, .row3Trigger.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease-out, transform 2s ease-out;
}

.row1Trigger.invisible, .row2Trigger.invisible, .row3Trigger.invisible {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* 
opacity: 0; 
transform: translateX(90%); /
transition: opacity 1s ease-out, transform 1s ease-out; 
margin-bottom: 5%;
}
.content.visible {
opacity: 1; 
transform: translateX(0); 
transition: opacity 1s ease-out, transform 1s ease-out; 
 */

.reviewsContainerInnerMid {
  transition: height 0.5s ease;
  overflow: hidden; /* Ensures that content does not overflow when height is reduced */
}

.hiddenText {
  display: none;
  width: 90%;
  margin: auto;
}

.reviewsContainerInnerMid.expanded {
  transition: height 0.5s ease;
}

.expanded .hiddenText {
  display: inline;
}

.expanded-padding {
  padding-top: 75px; /* Adjust the padding value as needed */
}

#review1 .expanded-padding {
  padding-top: 150px; /* Adjust the padding value as needed */
}
#review2 .expanded-padding {
  padding-top: 250px; /* Adjust the padding value as needed */
}
#review3 .expanded-padding {
  padding-top: 0px; /* Adjust the padding value as needed */
}

/* ========================== */
/*          DIVIDERS          */
/* ========================== */

.mapSection {
  height: 463px;
  width: 100%;
}

.mapSection {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.mapSection iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mapContainerInfoWrapper {
  padding: 100px 0;
}

/* ========================== */
/*          DIVIDERS          */
/* ========================== */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c63ff;
}

.dividerIMG {
  width: 25px;
}

/* ========================== */
/*          SERVICES           */
/* ========================== */

.servicesButton {
  font-family: "Montserrat", sans-serif;
  color: #6c63ff;
  background-color: transparent;
  border-radius: 3px;
  height: auto;
  font-weight: 700;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  margin: 10px auto;
  padding: 15px 30px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}

/* ========================== */
/*          WHAT WE DO           */
/* ========================== */

#whatWeDo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: auto 4% auto 6%;
  text-align: left;
}

.whatWeDoBottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 55px;
}

.whatWeDoBottom h3 {
  font-size: 1.5rem;
}

.whatWeDoBottom div,
h3,
p {
  z-index: 2;
}

.content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  border-left: 2px solid black;
  padding-left: 4%;
  opacity: 0; /* Start invisible */
  transform: translateX(90%); /* Start off-screen to the right */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for smooth animation */
  margin-bottom: 5%;
}
.content.visible {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Slide to original position */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for smooth animation */
}

.contentWrapper {
  display: flex;
  flex-direction: column;
  margin-top: 10%;
  gap: 3%;
}

.content h3 {
  margin: 2% 0;
}

.content img {
  max-height: 100px;
  z-index: 2;
  margin-top: 4%;
}

@media (max-width: 499px) {
  .content {
    z-index: 2;
  }

  .whatWeDoBottom {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .whatWeDoBottom h3 {
    font-size: 1.5rem;
  }

  .whatWeDoBottom div,
  h3,
  p {
    z-index: 2;
  }
}

@media (min-width: 600px) and (max-width: 1367px) {
  .whatWeDoBottom {
    flex-direction: column;
  }

  .contentWrapper {
    display: flex;
    flex-direction: row;
    margin-top: 3%;
    margin-bottom: 0;
  }
}

/* ========================== */
/*          PRICING           */
/* ========================== */

.checkmark {
  max-height: 30px;
  margin-right: 4%;
}

.threePieceContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 50px;
}

.priceContainer {
  border-radius: 6px;
  max-width: 400px;
  width: 85%;
  height: 511px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 70px 30px 30px 30px;
  position: relative;
  margin-bottom: 50px;
  max-height: 511px;
}

.largerContainer {
  height: 575px;
  max-height: 575px;
  width: 450px;
  max-width: 475px;
}
.priceContainer h2 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  margin: 0;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 2px solid #d8d6fd;
  background: #f3f2ff;
}

.priceContainer ul {
  list-style-type: none;
}
.priceContainer li {
  margin-bottom: 15px;
  position: relative;
  text-align: left;
}

.priceContainer img {
  width: 15px;
  height: 15px;
  position: absolute;
  left: -30px;
}

.right {
  z-index: 1;
}

.pricingItemContainer {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  padding: 50px 50px;
  width: 100%;
}

.pricingItem {
  width: 45%;
}
@media (min-width: 500px) and (max-width: 1367px) {


  .pricingItemContainer {
    width: 100%;
  }

  .pricingSVG {
    margin-left: 16% !important;
  }

  .pricingItemText p {
    max-width: 500px;
  }

  #whoWeAre p {
    max-width: 620px !important;
    text-align: center;
  }

  .threePieceContainer {
    display: block;
  }
  .priceContainer {
    margin: 0 auto 50px auto;
  }
}

@media (max-width: 499px) {
  .pricingInnerContainer {
    display: block;
    flex-direction: column;
    min-width: 0;
  }

  .pricingItemContainer {
    display: block;
    padding: 0;
  }

  .threePieceContainer {
    flex-direction: column;
    gap: 0;
  }

  .finalPriceContainer .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }

  .pricingItem {
    display: block;
    width: 90%;
    position: relative;
    margin-left: 35px;
  }

  .pricingItemText {
    position: relative;
    z-index: 5;
  }

  .pricingItem img {
    position: absolute;
    left: -40px;
    height: 30px;
  }

  .largerContainer {
    width: 85%;
  }

  #prices {
    margin-top: 0;
  }
}

/* ========================== */
/*       ABOUT US          */
/* ========================== */

.aboutUsGallery {
  margin: 5% auto;
  padding: 10% 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#aboutUsSectionWrapper {
  display: none;
}

.aboutUsGalleryInnerContainer {
  opacity: 0; /* Start invisible */
  transform: translateX(-90%); /* Start off-screen to the right */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for smooth animation */
  width: 100%;
  display: flex;
  gap: 5%;
}

.aboutUsGalleryInnerContainer.visible {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Slide to original position */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for smooth animation */
}

.leftInnerContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

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

@media (min-width: 600px) and (max-width: 1367px) {
  .rightInnerContainer {
    justify-content: flex-end;
  }
  .aboutUsGallery {
    padding: 10% 0 0 0;
    justify-content: flex-start;
  }

  .aboutUsGalleryInnerContainer {
    gap: 0;
    height: 600px;
    justify-content: flex-start;
    width: 77%;
  }
  
  .aboutUsGalleryInnerContainer.visible {
    gap: 3%;
  }
  
  .leftInnerContainer {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 3%;
  }

  .smallAdobePhoto {
    width: 210px;
    height: 211px;
  }
  .smallAdobePhoto2 {
    width: 235px;
    height: 289px;
  }
  .largeAdobePhoto {
    width: 299px;
  }
}

/* ========================== */
/*       WHO WE ARE           */
/* ========================== */

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


.title {
  color: gray;
}

#whoWeAre,
#portfolio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#whoWeAre {
  margin-bottom: 100px;
  max-width: 1100px;
  margin: auto auto;
}

#whoWeAre p {
  max-width: 90%;
  font-size: 1.1rem;
}

.dividerIMG {
  margin: 0 15px 15px 15px;
}

@media (max-width: 499px) {
  .ownerDiv {
    margin-bottom: 50px;
  }
}

/* ========================== */
/*          FOOTER           */
/* ========================== */

.footer {
  color: black;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #dcdcdc;
  padding-bottom: 80px;
  margin: auto auto;
}

.footer nav {
  display: flex;
  flex-direction: column;
}

.footer a {
  line-height: 2.3rem;
  color: black;
  max-width: 65%;
}

.navLinkWrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footerContainerCompanyName {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 75%;
  margin: auto;
  padding: 8% 0;
  line-height: 28px;
}

.footerInnerContainer {
  display: block;
  justify-content: space-around;
  align-items: center;
  margin: auto auto;
  max-width: 1100px;
  width: 100%;
}

.footerContainer {
  margin-left: 10%;
  width: 75%;
  text-wrap: wrap;
}

.footerCompanyNameLine {
  height: 1px;
  width: 80%;
  background-color: black;
  margin-bottom: 10px;
  margin: auto auto;
}

.line {
  height: 1px;
  width: 225px;
  background-color: black;
  margin-bottom: 10px;
}

.footerBusinessNameContainer {
  height: 1px;
  width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

.copyright {
  text-align: center;
  background-color: #DCDCDC;
  height: 100%;
  border-top: 1px solid #A7A7A7;
}

.copyright p {
  height: 100%;
  margin: 0;
  padding: 20px;
  font-size: 0.8rem;
}

/* ========================== */
/*          CONTACT US           */
/* ========================== */

.contactUsSection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto auto;
  width: 1100px;
  gap: 100px;
  padding: 100px 0 100px 0;
}

.contactContainerWrapper {
  display: flex;
}

.contactPageInnerContainer> div:first-child {
  display: none;
}

.desktopV {
  display: none;
  
}

.recreatedContactContainerWrapper {
  display: none;
}

.contactUsInnerSection {
  display: flex;
  flex-direction: column;
}

.contactSVG {
  position: relative;
  z-index: 2;
}

.contactUsInnerSection img {
  width: 400px;
}

.contactUsButton {
  font-family: "Raleway", sans-serif;
  background-color: black;
  color: white;
  height: 45px;
  width: 161px;
  transition: 0.3s ease;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
}

.contactUsButton span {
  display: block;
  height: 45px;
  display: flex;
  align-items: center;
}

.contactInfoContainer {
  display: flex;
  max-width: 1100px;
  margin: auto auto;
  justify-content: center;
  align-items: flex-start;
  margin-top: 100px;
  margin-bottom: 100px;
  gap: 75px;
}

.phoneEmailContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.phoneEmailContainer div {
  display: flex;
}

.phoneEmailContainer img {
  max-width: 80px;
  height: auto;
  margin-right: 5%;
}

.contactInfo {
  display: flex;
  flex-direction: column;
}

.contactDiv {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: left;
}

.contactInfo h2 {
  font-size: 1.3rem;
  margin-bottom: 0;
}

.contactInfo p {
  font-size: 1.1rem;
}

.space {
  height: 50px;
  width: 1px;
  margin: 0 30px 0 0;
  /* background-color: #6c63ff; */
}

.contactContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 90%;
  margin: 100px auto 0 auto;
  color: black;
  text-align: left;
  position: relative;
}

.contactContainer form {
  font-family: "Raleway", sans-serif;
  display: block;
  box-sizing: border-box;
  padding: 5% 5% 30% 5%;
  background-color: white;
  margin: 50px 0 50px 0;
}

.contactContainer input {
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
  width: 100%;
  display: block;
  margin-bottom: 24px;
  padding: 6% 2%;
  border: 1px solid gray;
}

.contactContainer textarea {
  padding: 2% 2%;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  height: 150px;
  display: block;
  margin-top: 10px;
  margin-bottom: 5%;
  border: 1px solid gray;
}

.contactContainer button {
  color: #fff;
  background: black;
  font-weight: 700;
  text-decoration: none;
  padding: 25px 50px;
  font-size: 1rem;
  cursor: pointer;
  gap: 32%;
  position: absolute;
  bottom: 10%;
  display: flex;
  justify-content: center;
}

.contactContainer h3 {
  margin: 0 0 38px 0;
}

.contactSmallContainer {
  border: 1px solid black;
  background-color: #dcdcdc;
  color: black;
  width: 80%;
  margin: auto;
  height: 185px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10%;
}

.contactSmallInnerContainer{
  width: 90%;
  margin: auto;
  height: 185px;
  display: flex;
  height: 100%;
}

.contactSmallInnerLeftContainer{
  width: 30%;
  margin: auto 10px;
  height: 185px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contactUsImage {
  width: 70%;
  height: 70%;
}

.contactSmallInnerRightContainer{
  width: 70%;
  height: 185px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.contactSmallRightInnerContainer {
  height: 20%;;
  display: flex;;
  align-items: center;
  justify-content: left;
}

@media (min-width: 600px) and (max-width: 1034px) {
  .contactContainerWrapper {
    display: flex;
    height: 1000px;
    width: 95%;
  }

  .contactSmallContainer {
    margin: 5% auto;
    width: 100%;
  }

  .contactSmallContainer3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
  }

  .contactSmallContainerWrapper {
    height: 65%;
    margin: auto;
  }
}

/* ========================== */
/*          FADE IN OUT ANIMATION      */
/* ========================== */

#fadeInFromRightMid1,
#fadeInFromRightMid2,
#fadeInFromRightTop1,
#fadeInFromRightTop2,
#fadeInFromRightBottom1,
#fadeInFromRightBottom2 {
  opacity: 0; /* Start invisible */
  transform: translateX(100%); /* Start off-screen to the right */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transition for smooth animation */
}

#fadeInFromRightTop1,
#fadeInFromRightTop2,
#fadeInFromRightMid1,
#fadeInFromRightMid2,
#fadeInFromRightBottom1,
#fadeInFromRightBottom2 {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Slide to original position */
}

.contactUsButtonFade1 {
  opacity: 0; /* Start invisible */
  transform: translateX(90%); /* Start off-screen to the right */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Transition for smooth animation */
}

.contactUsButtonFade1.visible {
  opacity: 1; /* Fade in */
    transform: translateX(0); /* Slide to original position */
}

.servicesTopContainerInnerContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  color: black;
  opacity: 0; /* Start invisible */
  transform: translateY(-10%); /* Start off-screen to the right */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Transition for smooth animation */
}

.servicesPageInnerContainer {
  color: black;
  width: 90%;
  margin: auto;
  margin-top: 35%;
  margin-bottom: 35%;
}

.servicesTopContainerInnerContainer h2{
  font-size: 32px;
  margin: 25px 0 25px 0;
  font-weight: 600;
}

.servicesTopContainerInnerContainer h4{
  font-size: 1rem;
  font-weight: 600;
}

.servicesTopContainerInnerContainer.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}



.ourServicesItem1,
.ourServicesItem2,
.ourServicesItem3,
.ourServicesItem4,
.ourServicesItem5,
.ourServicesItem6,
.ourServicesItem7 {
  opacity: 0.01; /* Start invisible */
  transform: translateY(10%); /* Start off-screen to the right */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Transition for smooth animation */
}

.ourServicesItem1.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}
.ourServicesItem2.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}
.ourServicesItem3.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}
.ourServicesItem4.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}
.ourServicesItem5.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}
.ourServicesItem6.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}
.ourServicesItem7.visible {
  opacity: 1; /* Fade in */
    transform: translateY(0%); /* Slide to original position */
}

.portfolioNumbersItem1,
.portfolioNumbersItem2,
.portfolioNumbersItem3,
.portfolioNumbersItem4 {
  opacity: 0.01; /* Start invisible */
  transform: translateY(-40%); /* Start off-screen to the right */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Transition for smooth animation */
}

.portfolioNumbersItem1.visible,
.portfolioNumbersItem2.visible,
.portfolioNumbersItem3.visible,
.portfolioNumbersItem4.visible {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
}

.quoteSection.visible {
  opacity: 1; /* Fade in */
}


@media (min-width: 600px) and (max-width: 741px) {
  .container h1 {
    font-size: 48px !important;
    max-width: 800px;
  }
}

/* ALL TABLET CSS */
@media (min-width: 600px) and (max-width: 1024px) {

  .tabletDisplayFlex{
    display: flex !important;
  }

  .curvedLine {
    width: 27%;
  }


  .container h1 {
    font-size: 72px;
    max-width: 800px;
  }
  
  .landingMockup{
    width: 750px;
    height: 750px;
    bottom: -10%;
  }

  .contactHeaderWrapper {
    gap: 3%;
  }

  .aboutUsWrapper {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin: auto auto;
  }

  .aboutUsGallery {
    padding: 0 0 0 0;
  }

  #whatWeDo {
    margin: 0 !important;
  }

  .contactHeaderWrapper > .contactHeaderDiv:nth-child(3) {
    display: flex;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(2) {
    display: flex;
    width: 700px;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(1) {
    display: flex;
  }

  .mapContainerInfoWrapper {
    display: flex;
    flex-direction: column;
  }

  .mapContainerInfoWrapper .contactSmallContainer {
    width: 80%;
  }

  
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(4) {
    display: none;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(3) {
    display: flex;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(2) {
    display: flex;
    width: 200px;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(1) {
    display: flex;
  }

  .headLogoContainer h2 {
    left: 20%;
  }

  .servicesTopContainerInnerContainer h2{
    font-size: 24px;
    margin: 25px 0 25px 0;
    font-weight: 600;
  }
  
  .servicesTopContainerInnerContainer p{
    font-size: 2rem;
    font-weight: 400;
  }

  .ourServicesItemUpperContainer p {
    font-size: 1rem;
    max-width: 650px;
  }

  .testimonialsInnerSection {
    width: 120%;
  }

  .reviewWrapper {
    overflow: hidden;
  }

  .testimonialsInnerMid {
    height: 55%;
  }

  .reviewText {
    font-size: 18PX;
  }

  .testimonialsSection {
    height: 700px;
  }

  .reviewNameFirstLast {
    font-size: 24px;
  }

  .googleImage {
    position: absolute;
    right: 3%;
    top: -17%;
    width: 200px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }

    .footerInnerContainer {
    display: flex;
    flex-wrap: wrap; /* Allows the children to wrap to the next line */
    justify-content: center; /* Centers children horizontally */
    align-items: flex-start; /* Centers children vertically */
    width: 85%;
  }

  .footerContainer {
    flex: 1 0 47%; /* Adjust the width as needed */
    box-sizing: border-box;
    margin: 5px; /* Optional: Adds space between the items */
  }

  .footerCompanyNameLine {
    width: 100%;
  }

  .whatWeDoBottom {
    gap: 20px;
  }

  .content .visible {
    margin-bottom: 2%;
  }

  /* ALL DESKTOP CSS */
}

@media (min-width: 765px) and (max-width: 1367px) {
  .servicesTopContainerInnerContainer h2{
    font-size: 36px;
  }

  .servicesTopContainerInnerContainer {
    gap: 10px;
  }

  .servicesTopContainerInnerContainer h4 {
    font-size: 24px;
  }
}

@media (min-width: 1025px) {
  /* HEADER */
  header {
    /* background-color: blue; */
    height: 165px;
    position: relative;
    max-width: 1291px;
    margin: auto;
  }
  
  .logoSVG {
    position: absolute;
    bottom: -85%;
  }

  .contactHeader {
    position: -webkit-sticky; /* For Safari */
    position: fixed;
    top: 0;
    z-index: 10000;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 56px;
    /* background-color: blue; */
  }

  .chwrapper {
    position: -webkit-sticky; /* For Safari */
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    height: 56px;
  }

  .contactHeaderWrapper {
    /* background-color: red; */
    display: flex;
    width: 100%;
    width: 1000px;
  }

  .contactHeaderDiv {
    width: 500px;
  }

  

  .contactHeaderWrapper > .contactHeaderDiv:nth-child(3) {
    display: flex;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(2) {
    display: flex;
    width: 700px;
  }
  .contactHeaderWrapper > .contactHeaderDiv:nth-child(1) {
    display: flex;
    text-wrap: wrap;
  }
  
  
  .contactHeaderEmailDiv 
  .contactHeaderAddressDiv 
  .contactHeaderTimeDiv {
  display: flex;
  flex-direction: row;
  }

  .headerNavPhoneDiv {
    display: flex;
  }

  .desktopHeaderWrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: relative;
    margin: auto;
    max-width: 1291px;
    height: 120px;
    /* background-color: blue; */
  }

  .desktopHeaderWrapper a {
    font-size: 1rem;
  }

  .headLogoContainer {
  }

  .headLogoContainer h2 {
    font-size: 1.5rem;
    height: 100%;
    margin: auto;
    left: 0;
    left: 15%;
    top: 65%;
  }

  .container {
    top: 10%;
    width: 100%;
  }

  .container h1 {
    font-size: 75px;
    max-width: 700px;
    margin: 0 0 42px 0;
  }

  .container h3 {
    line-height: 26px;
  }

  .container > h3:nth-child(6) {
    margin: 0 0 50px 0;
  }

  .curvedLine {
    max-width: 160px;
    top: 10%;
  }

  .headerNav {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    height: 100%;
    max-width: 500px;
    position: absolute;
    z-index: 2;
    font-weight: 700;
    margin-right: 2%;
    right: 0%;
    bottom: -35%;
  }

  .headerNav a {
    color: black;
  }

  .headerNavPhoneDiv {
    /* background-color: green; */
    display: flex;
    gap: 10px;
    margin-left: 5%;
  }

  .headerNavPhoneDiv img {
    width: 55px;
    height: 55px;
    margin: auto auto;
  }

  .headerNavPhoneInnerWrapper {
    /* background-color: red; */
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
  }

  .headerNavPhoneInnerWrapper > p:nth-child(1) {
    font-size: 1rem;
    font-weight: 400;
    color:rgb(110, 119, 125);
    margin: 0;
    height: 20%;
    font-family: "Raleway", sans-serif;
  }

  .headerNavPhoneInnerWrapper > p:nth-child(2) {
    font-size: 21px;
    height: 50%;
    margin: 0 !important;
  }

    /* LANDING */

  .landing {
    height: 800px;
  }

  .landingMockup {
    position: absolute;
    right: 14%;
    bottom: -7%;
    left:auto;
    height: 650px;
    width: 650px;
  }

  .landingPageBlob {
    animation: fadeInNoMovement 8s forwards; /* Apply fade-in animation */
  }

  .landingPageBlob {
    position: absolute;
    right: 12%;
    bottom: 0%;
  }

  .desktopLandingInnerContainer {
    width: 100%;
    height: 100%;
    max-width: 1291px;
    position: relative;
  }

  /* ABOUT US */

  .aboutUsWrapper {
      display: none;
      justify-content: center;
      align-items: center;
      max-width: 1315px;
      max-height: 597px;
      margin: auto auto;
    }

    .aboutUsGallery {
      height: 100%;
    }

    
    .leftInnerContainer {
      gap: 5%;
      height: 100%;
    }

    .rightInnerContainer {
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }

    .aboutUsGalleryInnerContainer {
      height: 100%;
      width: auto;
      margin: auto auto;
    }

    #whatWeDo {
      margin: 0 !important;
      padding: 4% 0 0 0;
      width: 100%;
      right: 0;
      max-width: 633px;
      max-height: 523px;
    }

    .whatWeDoTopInner h2 {
      font-size: 2rem;
    }

    .whatWeDoTopInner h4 {
      font-size: 1rem;
    }

    .whatWeDoBottom,
    .whatWeDoTop {
      font-size: 14px;
    }

    .whatWeDoBottom {
      flex-direction: column;
      gap: 10px;
    }

    .whatWeDoTopInner p{
      font-size: 16px;
    }

    .content {
      max-height: 200px;
    }

    .content h3 {
      font-size: 20px !important;
    }

    .content p {
      font-size: 16px;
      line-height: 26px;
    }

    .contentWrapper {
      flex-direction: row;
    }

    .aboutUsGalleryInnerContainer {
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 3%;
      /* background-color: red; */
      width: 100%;
    }

    .smallAdobePhoto {
      width: 140px;
      height: 150px;

    }
  
    .smallAdobePhoto2 {
      width: 145px;

    }

  
    .largeAdobePhoto {
      height: 100%;
    }

    /* ABOUT US 2 SECTION */

    #aboutUsSectionWrapper {
      /* background: blue; */
      max-width: 1515px;
      max-height: 597px;
      width: 100%;
      height: 100%;
      margin: 120px auto 110px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .aboutUsGalleryWrapper {
      max-width: 657.5px;
      max-height: 597px;
      width: 100%;
      height: 100%;
      padding: 0 12px;
      /* background: red; */
    }

    .aboutUsGallery2 {
      max-width: 585px;
       max-height: 597px;
       width: 100%;
       height: 100%;
       /* background: yellow; */
       display: flex;
       align-items: flex-end;
       justify-content: flex-end;
       gap: 24px;
       padding: 0 12px;
       opacity: 0;
       transform: translateX(-90%); /* Start off-screen to the right */
    }

    .aboutUsGallery2.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }

    .leftInnerContainer2 {
      /* background: blue; */
      display: flex;
      flex-direction: column;
      max-width: 235px;
      max-height: 597px;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 24px;
      overflow: hidden;
    }

    .leftInnerContainer2 > div:nth-child(1){
      /* background: purple; */
      max-width: 210px;
      max-height: 211px;
    }

    .leftInnerContainer2 > div:nth-child(1) img{
      width: 100%;
      height: 100%;
    }

    .leftInnerContainer2 > div:nth-child(2){
      background: gray;
      max-width: 235px;
      max-height: 285px;
    }

    .leftInnerContainer2 > div:nth-child(2) img{
      width: 100%;
      height: 100%;
    }

    .rightInnerContainer2 > div:nth-child(1){
      max-width: 326px;
      max-height: 597px;
    }

    .rightInnerContainer2 img{
      width: 326px;
      height: 597px;    
    }

    .AboutUsBottom {
      /* background: gray; */
      max-width: 857.5px;
      height: 580px !important;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .AboutUsBottom button {
      align-self: self-start;
      font-family: "Raleway", sans-serif;
      background-color: black;
      color: white;
      height: 45px;
      width: 161px;
      transition: 0.3s ease;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 600;
      font-size: 18px;
    }

    .AboutUsBottomWrapper {
      /* background: orange; */
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }


    .AboutUsBottomWrapperHeader h4{
      margin-bottom: 15px;
      margin: 0 0 15px 0;
    }

    .AboutUsBottomWrapperHeader h2{
      margin-bottom: 15px;
      font-size: 3rem;
      margin-block-start: 0;
    }

    .AboutUsBottomWrapperHeader p{
      margin-bottom: 30px;
    }

    .AboutUsBottomWrapperHeaderInner {
    opacity: 0;
    transform: translateX(90%); /* Start off-screen to the right */
    }

    .AboutUsBottomWrapperHeaderInner.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }

    .aboutItemWrapper {
      display: flex;
      max-height: 159.8px;
      margin-bottom: 15px;
      gap: 20px;
    }

    .aboutItem {
      padding-left: 20px;
      border-left: 3px solid black;
      opacity: 0;
      transform: translateX(90%); /* Start off-screen to the right */
    }

    .aboutItem h3{
      font-size: 1.5rem;
    }

    .aboutItem.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }

    .aboutItemButton {
      opacity: 0;
      transform: translateX(90%); /* Start off-screen to the right */
    }
    .aboutItemButton.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }

    .aboutItem img{
      width: 40px;
      height: 40px;
    }
    .aboutItem h3{
      max-width: 258.58px;
      max-height: 28.8px;
    }
    /* SERVICES SECTION */

    .servicesSection {
      margin: auto;
      max-width: none;
    }

    .servicesTopContainerInnerContainer h2 {
      font-size: 32px;
      margin: 0;
    }
    .servicesTopContainerInnerContainer p {
      font-size: 16px;
    }

    .servicesTopContainer {
      height: 200px;
    }

    .servicesTopContainerInnerContainer {
      /* background-color: magenta; */
      height: 100%;
    }

    .servicesInnerContainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-around;
      max-width: 1290px;
      min-width: 1290px;
      margin: auto;
      width: 100%;
      padding-bottom: 50px;
      /* background-color: peru; */
    }

    .ourServicesItem1, 
    .ourServicesItem2, 
    .ourServicesItem3, 
    .ourServicesItem4, 
    .ourServicesItem5,
    .ourServicesItem6 {
      height: 587px;
      margin-bottom: 15%;
      flex: 1 0 33%;
      max-width: 414px;
    } 

    .ourServicesItemImg {
      height: 55px;
      width: 55px;
    }    

    .ourServicesItem7 {
      margin: 0 auto !important; /* Center horizontally */
      flex: 1 0 100%; /* Take the full width */
      box-sizing: border-box;
      max-width: 54%;
      max-width: 414px;
    }

    .ourServicesItemUpperContainer {
      height: 337px;
      width: 414px;
    }

    .ourServicesItemLowerContainer {
      height: 400px;
      width: 414px;
    }

    .ourServicesItemLowerContainer img {
      height: 100%;
    }

    .ourServicesItem7 .ourServicesItemUpperContainer {
      width: 414px;
    }

    .ourServicesItem7 .ourServicesItemLowerContainer{
      height: 337px;
      width: 414px;
    }

    .ourServicesItemUpperContainer h2 {
      font-size: 24px;
    }
    .ourServicesItemUpperContainer p {
      font-size: 16px;
      margin: 5%;
    }

    .ourServicesItemUpperContainer .contactUsButton {
      font-size: 16px;
    }

    /* QUOTE SECTION */

    .quoteSection {
      height: 75vh;
      margin: 0;
      background-image: url("nsdhimages/artisanBackground.webp");
      background-size: cover; /* Add this line */
      background-repeat: no-repeat; /* Optional: Prevents the image from repeating */
      background-position: center; /* Optional: Centers the image within the container */
    }

    .quoteSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.925);
      pointer-events: none; /* Ensures the overlay doesn't interfere with interactions */
      filter: blur(1px);
      margin: -3px; /* Adjust this value for more or less blur */
    }

    .quoteSectionInnerContainer {
      height: 100%;
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0;
      max-width: 1200px;
    }

    .quoteSectionInnerContainer p {
      font-size: 24px;
      margin: 5% 0;
    }

    .quoteSectionInnerContainer button {
      margin: 0;
    }
    
    .quoteSectionInnerContainer button p {
      font-size: 14px;
      width: 100%;
      height: 100%;
      width: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .contactUsButton {
      width: 135px;
      height: 40px;
    }

    /* PORTFOLIO NUMBERS */

    .portfolioNumbersSection {
      align-items: center;
      justify-content: flex-start; 
      padding-top: 0px;   
      gap: 0px;
      padding:  20px;
    }
    
    .portfolioNumbersSectionInnerWrapper {
      width: 90%;
      margin: auto;
    }

    .portfolioNumbersWrapper {
      width: 500px;
      height: 500px;
      margin: auto;
    }

    .contactContainer {
      margin: 0;
    }

    .portfolioNumbersWrapper {
      width: 1000px;
      height: 300px;
    }
  
    .portfolioNumbersItem1,
    .portfolioNumbersItem2,
    .portfolioNumbersItem3,
    .portfolioNumbersItem4 {
      width: 100px;
      flex: 1 0 10%; /* Adjust the width as needed */
      box-sizing: border-box;
      margin: 5px; /* Optional: Adds space between the items */
    }

    /* CONTACT CONTAINER */

    .contactContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      width: 25%;
      margin: 10px;
      margin-left: 15%;
      color: black;
      text-align: left;
      position: relative;
    }

    .contactContainer form {
      font-family: "Raleway", sans-serif;
      display: block;
      box-sizing: border-box;
      padding: 1% 2% 1% 2%;
      background-color: white;
      margin: 5px 0 5px 0;
      padding-bottom: 10%;
      width: 100%;
    }
    
    .contactContainer input {
      font-family: "Montserrat", sans-serif;
      box-sizing: border-box;
      width: 100%;
      display: block;
      margin-bottom: 24px;
      padding: 6% 2%;
      border: 1px solid gray;
    }
    
    .contactContainer textarea {
      padding: 2% 2%;
      font-family: "Montserrat", sans-serif;
      width: 100%;
      height: 150px;
      display: block;
      margin-top: 10px;
      margin-bottom: 5%;
      border: 1px solid gray;
    }
    
    .contactContainer button {
      color: #fff;
      background: black;
      font-weight: 700;
      text-decoration: none;
      padding: 5px 10px;
      font-size: 1rem;
      transition: 0.3s ease;
      border: 1px solid transparent;
      cursor: pointer;
      gap: 32%;
      position: absolute;
      bottom: 2%;
      display: flex;
      justify-content: center;
    }
    
    .contactContainer h3 {
      margin: 0 0 38px 0;
    }

    /* GOOGLE TESTIMONIALS */

    .testimonialsSection {
      /* background-color: blue; */
      font-family: "Poppins", sans-serif;
      height: 250px;
      width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: left;
      position: absolute;
      top: 38%;
      right: 20%;
    }
    
    .testimonialsInnerSection {
      /* background-color: red; */
      width: 95%;
      height: 100%;
    }
    
    .testimonialsInnerUpper {
      /* background-color: orange; */
      font-family: "Poppins", sans-serif;
      width: 86%;
      margin: auto;
      padding-top: 20px;
    }
    
    .testimonialsInnerUpper h2 {
      font-size: 1.5rem;
      margin: 0 0 5% 0;
      width: 80%;
    }
    
    .testimonialsInnerUpper p {
      margin: 0;
      font-family: "Poppins", sans-serif;
    }
    
    .testimonialsInnerMid {
      height: 120%;
      font-size: 12px;
    }
    
    .testimonialsInnerLower {
      height: 35%;
      width: 90%;
      margin: 12% auto;
      background: gray;
      
    }
    
    .reviewsContainer {
      width: 100%;
      height: 100%;
      display: flex;
    }
    
    .reviewsContainerInnerLeft,
    .reviewsContainerInnerRight {
      width: 7%;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    
    .leftArrowContainer,
    .rightArrowContainer {
      width: 100%;
      display: flex;
      cursor: pointer;
    }
    
    .leftArrowContainer {
      justify-content: flex-start;
    }
    
    .rightArrowContainer {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
    
    .reviewWrapper  {
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    
    .googleImage {
      position: absolute;
      right: 3%;
      width: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }


    
    .reviewNameContainer {
      width: 90%;
      display: flex;
      margin: auto;
      padding: 0;
      position: -webkit-sticky; /* For Safari */
      position: sticky;
      top: 0;
      z-index: 3; /* Ensure it stays above other elements */
      background-color: white;
    }
    
    .reviewNameImage{
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .reviewNameInnerRightContainer{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .reviewNameFirstLast{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 1.5rem;
    }
    
    .reviewNameDate{
      width: 100%;
      color: #8D8D8D;
      font-size: 12px;
      display: flex;
      align-items: flex-start;
    }
    
    
    .reviewStars {
      display: flex;
      align-items: center;
      margin: 0 auto;
      position: sticky;
      z-index: 3;
      top: 17%;
      padding: 1% !important;
      background-color: white;
      transition: height 0.5s ease;
    }
    
    .reviewText {
      width: 90%;
      font-size: 1rem;
      margin: auto;
      transition: padding 0.5s ease; /* Smooth transition for padding change */
    }

    
    
    .reviewButton {
      width: 90%;
      font-size: 10px;
      color: #8D8D8D;
      display: flex;
      align-items: center;
      margin: auto 0;
    }
    
    .review {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease;
    }

        /* YELP TESTIMONIALS */

    .testimonialsYelpSection {
          /* background-color: blue; */
          font-family: "Poppins", sans-serif;
          height: 250px;
          width: 500px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: left;
          position: absolute;
          top: 61%;
          right: 20%;
        }


    /* MAP SECTION */

    .mapContainerWrapper {
      display: flex;
      justify-content: center;
      gap: 5%;
      max-width: 1000px;
      margin: auto;
      padding: 5% 0;
    }
    .mapSection {
      width: 50%;
    }

    .mapContainerWrapper .contactSmallContainer {
      width: 300px;
      height: 100px;
      align-items: center;
      justify-content: center;
    }

    .mapContainerWrapper .contactSmallContainer .contactSmallInnerRightContainer {
      gap: 15%;
    }

    .mapContainerWrapper .contactSmallContainer p {
      font-size: 12px !important;
      line-height: 16px;
    }

    .mapContainerWrapper .contactSmallInnerLeftContainer {
      height: 100%;
    }
    .mapContainerInfoWrapper {
      display: flex;
      flex-direction: column;
      gap: 4%;
      padding: 0;
    }

    /* FOOTER */

    .footer {
      padding: 0;
    }

    .footerContainerCompanyName {
      margin: 3% auto;
      padding: 0;
    }

    .footerContainer {
      display: flex;
      flex-direction: column;
      flex:none;
      margin: 1%;
    }
    .footerContainer h2{
      font-size: 20px;
    }
    .footerContainer p{
      font-size: 16px;
      line-height: 26px;
    }
    .footerContainer a{
      font-size: 16px;
      line-height: 26px;
    }

    .footerFlex {
      display: flex;
      width: 100%;
    }

    .footerCompanyNameLine {
      width: 100%;
    }

    .footerFlex .footerContainer {
      max-width: 33%;
      display: flex;
      flex-direction: column;
    }


    .navLinkWrapper {
      height: 40px;
    }

    /* CONTACT PAGE */
    .contactPageInnerContainer {
      border: 1px solid #a7a7a7;
      width: 100%;;
      background-color: black;
      color: white;
      max-width: 1315px;
      height: 691px;
      margin: auto auto;
      display: flex;
      flex-direction: column;
      margin: 120px auto;
    }

    .contactPageInnerContainer > div:nth-child(1) {
      max-height: 152px;
      height: 100%;
      margin-bottom: 60px;
      /* background-color: red; */
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
    }
    .contactPageInnerContainer > div:nth-child(2) {
      height: 100%;
      display: flex;
    }

    .contactPageInnerContainer > div:nth-child(2) > div:first-child {
      height: 100%;
      width: 100%;
      max-width: 657px;
      max-height: 479px;
      padding: 12px;
    }

    .contactPageInnerContainer > div:nth-child(2) > div:nth-child(2) {
      width: 100%;
      max-width: 657px;
      padding: 12px;
    }

    .contactPageInnerContainer > div > h2 {
      margin-left: 12px;
    }

    .contactPageInnerContainer h4 {
      font-size: 20px;
      line-height: 24px;
      font-weight: 600;
      margin: 0 0 12px 12px;
    }

    .contactPageInnerContainer h2 {
      font-size: 48px;
      line-height: 57px;
      font-weight: 600;
      margin: 0 0 12px 0px;
    }

    .contactSmallContainerWrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      max-height: 450px;
    }

    .contactSmallInnerLeftContainer {
      height: 100%;
    }

    .contactSmallContainerWrapper .contactSmallContainer {
      max-height: 120px;
      margin: 0;
      width: 95%;
      background-color: white;
    }

    .contactSmallContainerWrapper .contactSmallContainer img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .recreatedContactContainerWrapper {
      width: 100%;
      width: 500px;
      display: flex;
      flex-direction: column;
    }

    .recreatedContactContainerWrapper form {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .recreatedContactContainerWrapper button {
      margin-right: 2%;
      background-color: white;
      color: black;
    }

    .contactContainerWrapper {
      display: none;
    }

    .contactContainerRow {
      width: 100%;
      display: flex;
      height: 100%;
      justify-content: flex-start;
    }

    .itemWrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      max-height: 195px;
      height: 100%;
      position: relative;
    }

    .itemWrap h4 {
      text-align: left;
      margin-top: 0;
      margin-bottom: 8px;
      margin-left: 0;
    }

    .itemWrap input {
      width: 100%;
    }

    .itemWrap p {
      width: 95%;
      height: 100%;
    }

    .itemWrap span {
      width: 98%;
    }

    .recreatedContactContainerWrapper > .contactContainerRow:first-child > div {
      width: 312px;
      max-width: 312px;    
    }

    .itemWrap2 {
      width: 1000px;
      max-width: 640px;
    }


    #yourMessage,
    #yourMessageDesktop {
      max-width: 625px;
      width: 100%;
      height: 145px;
      font-family: "Raleway", sans-serif;
      margin-bottom: 30px;
    }

    #email,
    #email2,
    #phone,
    #name {
      height: 56px;
      font-family: "Raleway", sans-serif;
    }

    .contactContainerIcon {
      position: absolute;
      width: 12px ;
      height: 47px ;
      right: 8%;
      bottom: -10%;
      margin: auto;
      z-index: 10;
    }

    .nameIconAdjust {
      right: 5.5%;
    }

    .messageIconAdjust {
      top: -45%;
      right: 5.5%;
    }

    .contactSmallContainer3 {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  
    /* SERVICES REMAKE */
    .displayNone {
      display: none;
    }

    .servicesInnerContainerRemake{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
    
    .rowRemake {
      width: 100%;
    }

    .rowDevider {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 110%;
      width: 100%;
      max-width: 1485px;
      margin: auto;
      gap: 20px;
      padding: 20px 0;
    }

    .rowItem {
      height: 673px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: black;
      border: 1px solid #a7a7a7;
      background-color: white;
    }

    .rowItemInnerDiv{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 40px 50px;
    }

    .rowItemInnerDiv h4 {
      font-size: 24px;
      line-height: 28px;
      text-align: center;
      width: 110%;
    }

    .rowItemInnerDiv P{
      text-align: LEFT;
    }

    .rowItemInnerDiv button {
      margin-top: 20px;
      font-size: 14px;
    }

    .rowItemInnerDiv > div:first-child {
      background-color: black;
      width: 75px;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;    
    }

    .rowItemInnerDiv > div:first-child > img {
      width: 45px;
      height: 45px;
    }

    .rowItemInnerDiv > div:first-child > img {
      width: 45px;
      height: 45px;
    }

    .servicesPageItemWrapper {
      line-height: 0px;
      margin: 0 0 0 5%;
      display: flex;
      align-items: center;
    }

    .mobileOnly {
      display: none;
    }
  
    .desktopOnly {
      display: flex !important;
    }

    .row1Trigger {
      opacity: 0;
      transform: translateY(50%); /* Start off-screen to the right */
    }
    .row1Trigger.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }
    .row2Trigger {
      opacity: 0;
      transform: translateY(50%); /* Start off-screen to the right */
    }
    .row2Trigger.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }
    .row3Trigger {
      opacity: 0;
      transform: translateY(50%); /* Start off-screen to the right */
    }
    .row3Trigger.visible {
      opacity: 1; /* Fade in */
      transform: translateX(0); /* Slide to original position */
      transition: opacity 1s ease-out, transform 2s ease-out; /* Transition for smooth animation */
    }


  }