body {

  background-color: #fff7f0;

  /*margin-left: 5em;

  margin-right: 5em;*/

  scroll-behavior: smooth;

  font-family: 'Fedra Sans JT - Light',sans-serif;

  margin: 0;

  padding: 0;

}

section {

  /*padding: 50px;*/

  padding-left: 6em;

  padding-right: 6em;

  padding-bottom: 50px;

  text-align: center;

}

@media all and (max-width: 768px) {

  section {

    padding-left: 1.5em;

    padding-right: 1.5em;

  }

}



h1 {

  margin-top: 2.5em;

  font-size: 2.5em;

  text-align: center;

  color: #3C2C23;

}

h2{

  color: #3C2C23;

}

p {

  text-align: center;

  font-size: 18px;

  color: #555555;

}

p1 {

  text-align: center;

  font-size: 18px;

  display: block;

  color: #555555;

}

p2{

  text-align: center;

  font-size: 24px;

  color: #555555; 

  display: block;

  padding: 20px;

}

p3{

  font-size: 24px;

  color: #555555;

  text-align: left;

}



.customArrow{

  font-size: 36px !important;

  cursor: pointer;

}



.centered {

  text-align: center;

}



/* Header styling */

header {

  background-color: #333;

  /*padding: 20px;*/

  padding-left: 20px;

  padding-right: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000; /* Ensure it's on top of other elements */

}



@media all and (max-width: 768px) {

  header {

    padding: 0px;

  }

}



footer{

  background-color: #333;

  color: #fff;

  text-align: center;

  font-size: 18px;

}



.logo img {

  max-width: 100%;

  height: auto;

  width: 20%;

  padding-left: 20px;

  cursor: pointer;

}



/* Media query for smaller screens */

@media all and (max-width: 768px) {

  .logo img {

      width: 100%;

      padding-left: 0px; 

  }

}



/* Navigation styling */

.navBar {

  list-style: none;

  padding: 0;

  display: flex;

  padding-right: 20px;

}



@media all and (max-width: 768px) {

  nav {

    display: none; /* Hide the navigation bar on smaller screens */

  }

}



.navBarItem {

  margin: 0 20px;

  /*padding: 15px 0;*/

  padding-right: 0.5rem;

  padding-left: 0.5rem;

  color: #fff;

  cursor: pointer;

  transition: color 0.3s ease;

  white-space: nowrap;

}



.navBarItem:hover {

  color: #ffd700;

}



.sectionClass{

  background-image: url('Assets/background-other.jpg');

  background-size: cover;

  background-position: center;

  min-height: 70vh;

}





/*about styling*/

.gridContainerAbout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px; /* Adjust the gap between text and image */

  max-width: 1200px; 

  margin: 0 auto;

}



@media all and (max-width: 768px) {

  .gridContainerAbout{

    grid-template-columns: 1fr;

  }

}



.imageContainerAbout {

  position: relative;

  overflow: hidden;

}

.imageContainerAbout img {

  width: 100%;

  height: auto;

  display: block;

  transition: transform 0.3s ease;

}



@media all and (max-width: 768px) {

  .imageContainerAbout img {

    display: none;

  }

}



/* Hover effect on the image */

.imageContainerAbout:hover img {

  transform: scale(1.1);

}



/* Overlay for shading */

.image-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3); /* Adjust the color and opacity as needed */

  opacity: 0;

  transition: opacity 0.3s ease;

}



/* Show overlay on hover */

.imageContainerAbout:hover .image-overlay {

  opacity: 1;

}

/*about styling end*/





/*section home styling*/

.home-section {

  height: 100vh; /* Set the height to cover the full viewport height */

  background-image: url('Assets/background-home.jpg');

  background-size: cover;

  background-position: center;

  /*color: #fff; */

  text-align: left;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}



@media all and (max-width: 768px) {

  .home-section {

    background-image: url('Assets/background-other.jpg');

    background-size: cover;

    background-position: center;

  }

}



/* Styling for the home content */

.home-content {

  max-width: 50%;

  margin-left: 100px;

}



/* Styling for the title */

.home-content h2 {

  font-size: 3em;

  margin-bottom: -10px;

  color: #3C2C23;

  /*color: #333333;*/

}



@media all and (max-width: 768px) {

  .home-content {

    margin-left: 10px;

    max-width: 100%;

  }

  .home-content h2 {

    font-size: 2.5em;

  }

}



.textClass{

  text-align: left;

}





.flexClass{

  display: flex;

  flex-direction: row;

}



@media all and (max-width: 768px) {

  .flexClass {

    display: flex;

    flex-direction: column;

  }

}



        /* Container for the button rows */

        .row-container {

          display: flex;

          flex-wrap: wrap;

          justify-content: center;

          gap: 50px; /* Adjust the gap between rows */

      }



      @media all and (max-width: 768px) {

        .row-container {

          gap: 10px;

        }

      }



      /* Container for the buttons */

      .button-container {

          display: flex;

          /*flex-wrap: wrap;*/

          gap: 50px; /* Adjust the gap between buttons */

      }



      @media all and (max-width: 768px) {

        .button-container {

          display: flex;

          flex-direction: column;

          gap: 10px;

        }

      }



      /* Styling for service buttons */

      .serviceButtonGeneral {

          padding: 25px;

          border-radius: 50px; /* Rounded corners */

          text-align: center;

          text-decoration: none;

          font-size: 28px;      

          width: 300px;

          height: 250px;

          cursor: pointer;

          transition: background-color 0.3s ease;

          transition: box-shadow 0.3s ease, transform 0.3s ease;

      }



      @media all and (max-width: 768px) {

        .serviceButtonGeneral {

          /* Adjust styles for smaller screens */

          width: 100%; /* Set width to 100% for better responsiveness */

          height: auto; /* Allow height to adjust based on content */

          font-size: 18px;

          border-radius: 25px; /* Rounded corners */

          padding: 20px;

        }

      }



      /* Hover effect */

      .serviceButtonInactive:hover {

        background-color: #745c49;

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

        transform: scale(1.05);

      }



      .serviceButtonInactive{

        border: 2px solid #8b715c; /* Border color */

        background-color: #8b715c; /* Background color */

        color: #fff; /* Text color */

      }



      .serviceButtonActive {

        border: 2px solid #fff;

        background-color: #fff;

        color: #8b715c;

      }



.serviceDescClass{

  width: 65%;

  border-right: 1px solid lightgrey;

}

.serviceSummaryClass{

  width: 35%;

}



@media all and (max-width: 768px) {

  .serviceDescClass {

    width: 100%;

    border-right: none;

    border-bottom: 3px solid lightgrey;

  }

  .serviceSummaryClass{

    width: 100%;

  }

}



.servicesListClass{

  list-style-type: disclosure-closed;

  margin-top: -1.0em;

  font-size: 18px;

  text-align: left;

  color: #3C2C23;

}

.serviceListItemClass{

  text-align: left;

  font-size: 18px;

  color: #555555;

}



@media all and (max-width: 768px) {

  .servicesListClass {

    margin-top: 1em;

  }

}





.serviceContainerVisible{

  display: block;

}



.serviceContainerHidden{

  display: none;

}



.contactButton {

  padding: 10px;

  border: 2px solid #8b715c; /* Border color */

  border-radius: 20px; /* Rounded corners */

  /*background-color: #3498db;*/

  background-color: #8b715c;

  color: #fff; /* Text color */

  text-align: center;

  text-decoration: none;

  font-size: 18px;

  transition: background-color 0.3s ease;

  cursor: pointer;

  justify-content: center;

}



.contactButton:hover {

  background-color: #745c49;

}



.contactInfoClass{

    width: 40%;

}



@media all and (max-width: 768px) {

  .contactInfoClass {

    width: 100%;

  }

}



.contactInfoIntroduction{

  padding: 30px;

}



@media all and (max-width: 768px) {

  .contactInfoIntroduction{

    padding: 0px;

  }

}



.contactDetailsClass{

    display: flex;

    flex-wrap: nowrap;

    justify-content:center;

    gap: 50px;

}

@media all and (max-width: 768px) {

  .contactDetailsClass{

    gap: 10px;

  }

}



.contactInfoParagraph{

  margin-top: 5px;

  margin-bottom: 5px;

}



.formContainerClass{

  width: 60%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding-left: 10px;

  padding-right: 10px;

}





form {

  background-color: #fff;

  border-radius: 8px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  padding: 20px;

}



@media all and (max-width: 768px) {

  .formContainerClass{

    width: 100%;

  }

}



label {

  display: block;

  font-size: 18px;

  margin-bottom: 6px;

  color: #555555;

}



input[type="text"],

textarea {

  width: 100%;

  padding: 8px;

  margin-bottom: 14px;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

  color: #555555;

}



.formRowClass {

  display: flex;

  flex-direction: column;

}



.formRowClass > div {

  margin-bottom: 14px;

}



input[type="submit"] {

  background-color: #8b715c;

  color: #fff;

  padding: 10px;

  border: none;

  border-radius: 4px;

  transition: background-color 0.3s ease, transform 0.3s ease;

}



input[type="submit"]:hover {

  background-color: #745c49;

}



/* Success styling */

input[type="submit"].success {

  background-color: #28a745;

  cursor: default; /* Remove pointer cursor */

  transform: scale(0.95); /* Add a subtle scale effect */

}



/* Style for the checkmark icon */

input[type="submit"].success::after {

  content: '\2713'; /*checkmark unicode*/

  font-size: 1.5em;

  margin-left: 10px;

}



.submitButtonActive{

  cursor: pointer;

}

.submitButtonInactive{

  cursor: not-allowed;

  opacity: 0.7;

}



.consentCheckboxClass{

  display: flex;

  flex-direction: row;

  gap: 5px;

}



.error-message {

  color: red;

  font-size: 0.8em;

}



/* Example of highlighting invalid input */

input:invalid {

  border: 1px solid red;

}