:root {
  --dark-orange: #FF4D00;
  --nav-bar-color: #3C1518;
  --nav-hover-color: #69140E;
  --dark-bean: #3C1518;
  --white: white;
  --prince-orange: #ffc574;
  --section: #ffce8a;
  --brown: #A44200;
}

* {
    font-family: 'Times New Roman', Times, serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body, html {
  box-sizing: border-box;
  scrollbar-width: none; 
  /* z-index: -1000; */
}

h1 {
  color: var(--dark-bean);

}

h2 {
  color: var(--dark-bean);
}

p {
  color: var(--dark-bean);
}

i {
  color: var(--dark-bean);
}

#mission {
  background-color: var(--section);
}

#story {
  background-color: var(--section);
}

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

/* Navigation Bar */
.nav-bar {
  position: fixed;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--nav-bar-color);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;
  overflow: hidden;
  transition: top 0.3s;
}

.nav-bar-img {
  height: 50px;
  width: 75px; 
  padding: 5px 5px;
  box-sizing: initial;
}

.nav-bar-link {
  float: right; 
}

.nav-bar-link a {
  display: block;
  color: var(--white);
  text-align: center;
  padding: 22px 16px; 
  text-decoration: none;
}

.nav-bar-link a:hover {
  background-color: var(--nav-hover-color);
}

/* Home Section */
#home {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.home-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-header {
  position: relative;
  font-size: 5rem; 
  font-weight: 800;
  max-width: 800px;
  font-family: 'Times New Roman', Times, serif;
  z-index: 3;
  color: var(--white);
}

.home-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  padding-top: 10%;
  padding-left: 8%; 
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Story Section */
/* Subtitle Code */
.subtitle {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 2rem 0;
  color: var(--dark-bean);
  letter-spacing: 1px;
  position: relative;
  margin-bottom: 5rem;
}

.subtitle::after {
  content: '';
  display: block;
  width: 7rem;
  height: 4px;
  background-color: var(--nav-hover-color); /* Accent color – change to match your theme */
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.section-header-text{
  text-align: center;
}

.story-container {
  margin-left: 100px; 
}

.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.col {
  height: 100%;
}

.img-container {
  width: fit-content;
  height: 100%;
}

/* WARNING: Directions are inversed for left and right */
/* Right side */
.img-container.right {
  text-align: left;
  max-width: 80%;
}

.img-container.right p{
  position: relative; 
  opacity: 1; 
  transition: opacity 0.3s, transform 0.3s;
  margin-left: 1rem;
}

.img-container.right h1{
  position: relative; 
  opacity: 1; 
  transition: opacity 0.3s, transform 0.3s;
  margin: 1rem 1rem 1rem;
}


/* Left side */
.img-container.left {
  text-align: left;
  max-width: 80%;
}

.img-container.left p{
  position: relative; 
  opacity: 1; 
  margin-right: 1.5rem;
  transition: opacity 0.3s, transform 0.3s;
}

.img-container.left h1{
  position: relative; 
  opacity: 1; 
  margin-bottom: 1rem;
  margin-top: 1rem;
  margin-right: 1.5rem;
  transition: opacity 0.3s, transform 0.3s;
}

#row-1 {
  height: 400px; 
}

#row-2 {
  height: 800px; 
}

#row-3 {
  height: 400px; 
}

#row-4 {
  height: 800px;
}

#row-5 {
  height: 400px;
}

#row-6 {
  height: 800px;
}

#row-7 {
  height: 450px;
}

#row-8 {
  height: 800px;
}

#row-9 {
  height: 400px;
}

.col:nth-child(1) {
  flex: 3;
  display: flex; 
  justify-content: flex-end;
}

.col:nth-child(2){
  flex: 5;
}

.img-container.right img {
  clip-path: polygon(100% 0, 100% 0, 100% 0)
}

.img-container.left img {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0)
}

.whitespace {
  width: 100%;
  height: 2.5rem;
}

.story-whitespace-bottom {
  width: 100%;
  height: 15rem;
}

/* .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 25px;
}


.text {
  color: white;
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
} */

.spacing-div {
  margin: 100px;
}

/* About Section */
.about-mission {
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-wrap: nowrap; /* Ensures responsiveness */
    gap: 50px; /* Adds spacing between image and text */
    padding: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

#pc-view {
  display: block;
}

#mobile-view {
  display: none;
}

/* Image container */
.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 500px; /* Adjust as needed */
}

.image-container img{
  width: 100%; 
  max-width: 400px; /* Adjust max width */
  height: auto;
}

/* Text container */
.text-container {
  flex: 1;
  max-width: 500px;
}

.text-container h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.text-container p {
  font-size: 18px;
  color: var(--dark-bean);
  margin-bottom: 1.5rem;
}

/* Button */
.button {
  cursor: pointer;
  outline: 0;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  color: var(--dark-bean);
  border-color: var(--dark-bean);
}

.button:hover {
  color: var(--white);
  background-color: var(--dark-bean);
  border-color: var(--dark-bean);
}


/* Pop Up Chat */
/* Button used to open the chat form - fixed at the bottom of the page */
#open-button {
  color: var(--dark-bean);
  font-size: 48px;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 1;
  position: fixed;
  bottom: 30px;
  right: 10px;
  color: white;
  -webkit-text-stroke: 2px var(--dark-bean);
  z-index: 3;
}

.contact-us-header {
  text-align: center;
  font-size: 28px;
  margin-bottom: 1rem;
}

/* The popup chat - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 15px;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  /* border-radius: 3%; */
  border: 1px solid var(--dark-bean);
  background-color: var(--prince-orange);
}

/* Full-width textarea */
.form-container textarea{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: 1px solid var(--dark-bean);
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

.form-container input{
  background: #f1f1f1;
  border: none;
  resize: none; 
  width: 100%;
}

.form-container .g-recaptcha {
  transform: scale(0.92);
  transform-origin: 0 0;
  margin-bottom: 5px;
  display: block;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: lightgreen;
  color: var(--dark-bean);
  padding: 16px 20px;
  border: 1px solid var(--dark-bean);
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: orangered;
}

/* Add some hover effects to buttons */
.form-container .btn:hover {
  opacity: 1;
  color: var(--dark-bean);
}

input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  border: 1px solid var(--dark-bean);
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  font-family: monospace;
}

#open-button:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
  
  /* Testimonial */
.slider {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--dark-bean) 10%, 90%,
    transparent
  );
}

.slider .list{
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}
.slider .list .slider-item {
  width: var(--width);
  height: 225px;
  position: absolute;
  left: 100%;
  animation: autoRun 45s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc( (45s / var(--quantity)) * (var(--position) - 1) - 45s)!important;
  border: 2px;
  border-radius: 10px;
  border-style: solid;
  border-color: var(--dark-bean);
  background-color: rgb(239.225,202);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  background-color: var(--white);

}

.slider .list .slider-item img {
  /* Testimonial Profile Pictures */
  padding-top: 7px;
  width: 75px;
  height: 60px;
}

@keyframes autoRun{
  from {
    left: 100%
  } to {
    left: calc(var(--width) * -1);
  }
}
.slider:hover .slider-item{
  animation-play-state: paused!important;
  filter: grayscale(1);
}
.slider .slider-item:hover{
  filter: grayscale(0);
}
.slider[reverse="true"] .slider-item{
  animation: reversePlay 45s linear infinite;
}
@keyframes reversePlay{
  from {
      left: calc(var(--width) * -1);
  } to {
      left: 100%;
  }
}

.slider-caption{
  display: flex;
  justify-content: left;
}

.testimonial-name{
  margin-right: 25px;
  margin-top: 20px;
  font-size: 32px;
}

.testimonial-profession{
  margin: 6px;
  margin-top: 10px;
}

.testimonial-rating{
  /* display: inline; */
  margin: 6px;
  margin-left: 6px;
  margin-bottom: 8px;
  /* display: flex; */
  /* flex-direction: row; */
  /* justify-content: center; */
}

.testimonial-message{
  margin-top: 2px;
  padding: 5px;
  word-wrap: break-word;
  white-space: initial;
}

/* Footer */
footer{
    background-color: var(--nav-bar-color);
}

.footerContainer{
    background-color: var(--nav-bar-color);
    width: 100%;
    padding: 30px 0px 20px ;
}

.socialIcons{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 100%;
}
.socialIcons a{
    text-decoration: none;
    padding:  10px;
    background-color: white;
    margin: 10px;
    border-radius: 50%;
}
.socialIcons a i{
    font-size: 2em;
    color: var(--dark-bean);
    opacity: 0,9;
}

/* Hover affect on social media icon */
.socialIcons a:hover{
  background-color: var(--nav-bar-color);
  transition: 0.5s;
}
.socialIcons a:hover i{
  color: white;
  transition: 0.5s;
}
.footerBottom{
  width: 100%;
  background-color: var(--nav-bar-color);
  padding: 20px;
  text-align: center;
}

.footerBottom p{
  color: white;
  overflow: hidden;
}

.designer{
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0px 5px;
}

/* Mobile Menu Button */
.menu-button {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 5px;
}

#nav-pc-view {
  display: inline;
}

#nav-mobile-view {
  display: none;
}



@media (max-width: 1200px) {

  .home-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 5% 0 5%;
    text-align: center;
  }

  .hero-header {
    font-size: 2.5rem;
    max-width: 90%;
    margin-bottom: 1rem;
  }

  .home-img {
    object-position: left;
  }
  .menu-button {
      display: block;
      color: var(--white);
  }

  #nav-pc-view {
    display: none;
  }

  #nav-mobile-view {
    display: block;
  }

  .menu-button i {
    color: var(--white);
  }

  .nav-bar {
      padding: 0;
  }

  /* .home-img {
      content: url("Images/mobileHome.png");
  } */

  .text {
    font-size: 24px;
  }

  .testimonial-name {
    font-size: 20px;
  }

  .about-mission {
    flex-direction: column;
    padding: 30px 20px;
  }

  .about-mission.reverse {
    flex-direction: column-reverse;
  }

  .nav-bar-img {
    height: 40px;
    width: 60px;
    padding: 5px;
  }

  .nav-bar-link {
    float: none;
    display: none;
    width: 100%;
  }

  .nav-bar.active .nav-bar-link {
    display: block;
  }

  .nav-bar-link a {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .home-content {
    padding-top: 20%;
    padding-left: 5%;
  }

  .home-content h1 {
    font-size: 2.5rem;
  }

  .button {
    font-size: 0.8rem;
    padding: 0.4rem;
  }

  .about-mission {
    padding: 20px 15px;
  }

  .text-container h2 {
    font-size: 1.5rem;
  }

  .text-container p {
    font-size: 0.9rem;
  }

  .story-container {
    margin-left: 0 !important;
  }

  .testimonial-name {
    font-size: 1.2rem;
  }

  /* Story Section */

  .row {
    flex-direction: column !important;
    height: auto !important;
    padding: 1rem 1rem;
  }

  .col {
    width: 100%;
    justify-content: center !important;
    align-items: center;
  }

  .img-container.left,
  .img-container.right {
    max-width: 100%;
    text-align: center;
    margin: 1rem auto;
  }

  .img-container.left h1,
  .img-container.right h1,
  .img-container.left p,
  .img-container.right p {
    margin: 1rem 1rem;
    text-align: center;
  }

  .story-img {
    width: 90%;
    height: auto;
    max-width: 400px;
  }

  #row-1, #row-2, #row-3, #row-4, #row-5, #row-6, #row-7, #row-8, #row-9 {
    height: auto !important;
  }

  .story-whitespace-bottom {
    height: 2.5rem;
  }
}