:root {
  --primary-color: #c78e3d;
  --font-style: "Playfair Display", serif;
}
.ourOfferings p {
  color: #57585a;
}
.ourOfferingsImgContainer {
  background-image: url("../images/backgrounds/backgroundImg.webp");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  /* border: 1px solid black; */
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainHeading {
  position: absolute;
  top: 180px;
  padding: 30px;
  margin: 0 250px;
  /* border: 1px solid black; */
}
.mainHeading h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 72px;
  text-align: center;
  color: var(--primary-color);
  margin: 0;
}
.headingTopleftImg {
  position: absolute;
  top: 10px;
  left: -25px;
}
.headingBottomRightImg {
  position: absolute;
  bottom: 0px;
  right: -35px;
  rotate: 180deg;
}

/* section1 */
.ooSection1 {
  padding: 80px 162px;
  width: 100%;
  position: relative;
  /* border: 1px solid black; */
}
.ooSection1TopLeft {
  position: absolute;
  top: 0;
  left: 0;
}
.ooSection1TopRight {
  position: absolute;
  top: 0;
  right: 0;
}

.ooSection1 div {
  text-align: center;
  width: 70%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ooSection1 div h3 {
  color: var(--primary-color);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  width: 70%;
  margin: auto;
}
.ooSection1 div p {
  font-size: 16px;
  line-height: 24px;
}
/* ------------------ Tab section and Buttons ------------------ */
.ooButtonSection {
  padding: 20px 162px 20px;
}
/* button group Section */
.btn-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  border: 1px solid var(--primary-color);
  width: fit-content;
  padding: 8px;
  margin: auto;
  position: sticky;
  top: 200px;
}
/* Default styles for buttons */
.btn-group .btn {
  background-color: white;
  color: black;
  border: none;
  border-radius: 4px !important;
  padding: 8px 16px;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 1px;
  font-weight: 700;
}
/* Styles for the active button */
#btn-left.active {
  background-color: #d3203f;
  color: white;
  border-color: #d3203f;
}
#btn-middle.active {
  background-color: #1b5749;
  color: white;
  border-color: #1b5749;
}
#btn-right.active {
  background-color: #b96e2b;
  color: white;
  border-color: #b96e2b;
}

/* active tab display */
.tab-content,
.topSection {
  display: none;
}
/* Show the active tab */
.topSection.active {
  display: flex;
}
.tab-content.active {
  display: flex;
  flex-direction: column;
  color: var(--primary-color);
  gap: 20px;
}

.ooTabSectionContent {
  position: relative;
  width: 100%;
  padding: 80px 162px;
}
.tabLeftImg {
  width: 17%;
  position: absolute;
  top: 35%;
  left: 0;
  z-index: -1;
  /* border: 1px solid black; */
}
.tabRightImg {
  width: 17%;
  position: absolute;
  bottom: 15%;
  right: 0;
  /* border: 1px solid black; */
  rotate: 180deg;
  z-index: -1;
}
/* .ooTabOne {
  border: 1px solid black;
} */
/* .ooTabTwo {
  border: 1px solid black;
} */
/* .ooTabThree {
  border: 1px solid black;
} */

.tab-content h2 {
  width: 40%;
  font-size: 48px;
  line-height: 52px;
  font-weight: 700;
  text-align: center;
  margin: auto;
}
.ooTabHeading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.ooTabHeading h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin: 0;
}
.tab1CarouselContainer {
  width: 72%;
  margin: auto;
  margin-top: 100px;
  position: relative;
  border: 4px solid var(--primary-color);
  border-radius: 8px;
}
.tab1CarouselContainer img {
  border-radius: 18px;
  scale: 1.01;
}
.ooTabTopLeft {
  position: absolute;
  top: -7.1%;
  left: -4.9%;
  width: 20%;
}
.ooTabBottomRight {
  position: absolute;
  bottom: -7.1%;
  right: -4.8%;
  width: 20%;
}
/* --------------------- Tab 1 Card Section --------------------- */

.ooTab1CardContainer {
  /* border: 1px solid black; */
  padding: 10px 30px;
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ooTab1Card {
  /* border: 1px solid black; */
  display: flex;
  padding: 40px 50px;
  gap: 50px;
  justify-content: center;
  align-items: center;
  background-color: #fff4f6;
  border-radius: 8px;
  border-bottom: 3px solid #d3203f;
  box-shadow: #fff4f6 0px 8px 10px 0px;
}
.ooTab1Card h4 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #d3203f;
}
.ooTab1CardImgContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 10%;
  /* border: 1px solid black; */
  justify-content: center;
  align-items: center;
}
.ooTab1CardImgContainer img {
  width: 80px;
  height: 80px;
}
.ooTab1CardSvg {
  opacity: 70%;
  /* border: 1px solid black; */
}
.ooTab1CardText {
  /* border: 1px solid black; */
  width: 90%;
}
.toggle-text {
  text-decoration: none;
  color: #d3203f;
  
}

.toggle-text:hover {
  color: #d3203f;
}
/* --------------------- Tab 2 Card Section --------------------- */
.ooTab2CardContainer {
  /* border: 1px solid black; */
  padding: 10px 30px;
  margin: 120px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ooTab2Card {
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  padding: 40px 50px;
  gap: 20px;
  background-color: #f0fffe;
  border-radius: 8px;
  border-bottom: 3px solid #007f7a;
  box-shadow: #f0fffe 0px 8px 10px 0px;
}
.ooTab2Card h4 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #007f7a;
}
/* --------------------- What we offer --------------------- */
.ooWhatWeOffer {
  /* border: 1px solid black; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 50px;
  padding: 100px 0;
}
.ooWhatWeOfferCard {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.ooWhatWeOfferCardImgContainer {
  /* border: 1px solid black; */
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #fff8f0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toggle-text1 {
  text-decoration: none;
  color: #007f7a;
}

.toggle-text1:hover {
  color: #007f7a;
}
/* --------------------- Tab 3 Card Section --------------------- */
.ooTab3CardContainer {
  /* border: 1px solid black; */
  padding: 100px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}
.ooTab3Card {
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 40px 50px;
  width: 30%;
  background-color: #fff8f0;
  border-radius: 8px;
  border-bottom: 3px solid #b96e2b;
  box-shadow: #fff8f0 0px 8px 10px 0px;
}
.ooTab3Card h4 {
  color: #b96e2b;
}
.ooTab3Card p {
  text-align: justify;
}
/* site visit modal start */
.siteVisitFormModal {
  width: fit-content;
  max-width: 100vw;
  height: fit-content;
  max-height: 100vh;
  margin: 40px auto;
}
.modal-backdrop {
  background-color: gray !important;
  backdrop-filter: blur(5px) !important;
  opacity: 0.8 !important;
}

.siteVisitFormModalContent {
  width: 1008px;
  height: 100%;
  background-image: url("../images/backgrounds/whiteFrame.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px !important;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.siteVisitFormModalHeader {
  padding: 0 1rem;
  border: none !important;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.siteVisitFormModalHeader .close {
  height: 32px;
  width: 32px;
  padding: 0 0 4px 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background-color: #fef6ec;
  color: var(--primary-color);
  font-size: 2.5rem;
  /* border: 1px solid var(--primary-color); */
  margin-top: 16px;
  opacity: 1;
}

.siteVisitFormModalBody {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  /* border: 1px solid black; */
  align-items: flex-start;
}

.siteVisitPopupImgContainer {
  width: 50%;
  height: 888px;
  background-image: url("../images/ourOfferings/popupFormImgLargeScrean.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px 0 0 8px !important;
  position: relative;
}
.siteVisitFormContainer {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  padding: 50px 40px;
}
.siteVisitPopupContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.siteVisitPopupContent h5 {
  color: var(--primary-color);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  margin: 4px 0 0 0;
}
.siteVisitPopupContent p {
  color: #57585a;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
.sitevisitFormData {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sitevisitFormData input,
.sitevisitFormData select {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  background-color: transparent;
  color: #57585a;
  font-size: 16px;
  line-height: 24px;
}

.sitevisitFormData input:focus,
.sitevisitFormData select:focus {
  outline: none;
  border: 2px solid var(--primary-color);
}

.sitevisitFormData select {
  -webkit-appearance: none; /* Remove default styling for WebKit browsers */
  -moz-appearance: none; /* Remove default styling for Firefox */
  appearance: none; /* Remove default styling */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 10l5 5 5-5z" fill="black"/></svg>')
    no-repeat right 16px center;
  background-size: 24px;
}

.sitevisitFormData select::-ms-expand {
  display: none; /* Remove default arrow in IE */
}
.sitevisitFormData button {
  width: 70%;
  display: block;
  margin: auto !important;
  margin-top: 28px !important;
}
.siteVisitDateAndTime {
  display: flex;
  gap: 20px;
}
.siteVisitDateAndTime div {
  width: 50%;
}

/* site visit modal end */

/* media queries */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media all and (min-width: 993px) and (max-width: 1400px) {
  /* section1 and section4 */

  .ooSection1TopLeft {
    width: 20%;
  }
  .ooSection1TopRight {
    width: 20%;
  }
  .ooSection1 {
    padding: 80px 60px;
  }
  .ooSection1 div {
    width: 70%;
  }
  /* ------------------ Tab section and Buttons ------------------ */
  .ooButtonSection {
    padding: 20px 60px 20px;
  }

  .ooTabSectionContent {
    padding: 80px 60px;
  }
  .tabLeftImg {
    width: 15%;
  }
  .tabRightImg {
    width: 15%;
  }
  .tab-content h2 {
    width: 50%;
  }
  .tab1CarouselContainer {
    width: 80%;
    margin-top: 80px;
    border: 4px solid var(--primary-color);
    border-radius: 8px;
    
  }
  .tab1CarouselContainer img {
    border-radius: 12px;
    scale: 1.01;
  }

  /* --------------------- What we offer --------------------- */
  .ooWhatWeOfferCard {
    width: 30%;
  }

  /* --------------------- Tab 3 Card Section --------------------- */
  .ooTab3CardContainer {
    padding: 80px 30px;
  }
  .ooTab3Card {
    width: 45%;
  }
  /* site visit modal start */
  .siteVisitFormModalContent {
    width: 90vw;
  }
  .siteVisitFormModalBody {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-direction: column;
  }

  .siteVisitPopupImgContainer {
    width: 100%;
    height: 550px;
    background-image: url("../images/ourOfferings/popupFormImg.webp");
    border-radius: 8px 8px 0 0 !important;
  }
  .siteVisitFormContainer {
    width: 100%;
    padding: 50px 180px;
  }
  .sitevisitFormData {
    gap: 16px;
  }
  .sitevisitFormData button:hover::before {
    height: 1200% !important;
  }
  /* site visit modal end */
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media all and (min-width: 481px) and (max-width: 992px) {
  .mainHeading {
    padding: 10px 0px;
  }
  .mainHeading h1 {
    font-size: 52px;
    line-height: 64px;
  }
  .headingTopleftImg {
    top: -5px;
    left: -30px;
    width: 60px;
  }
  .headingBottomRightImg {
    bottom: -10px;
    right: -35px;
    width: 60px;
  }
  /* section1 and section4 */

  .ooSection1TopLeft {
    width: 25%;
  }
  .ooSection1TopRight {
    width: 25%;
  }
  .ooSection1 {
    padding: 80px 24px;
  }
  .ooSection1 div {
    width: 90%;
  }
  .tab-content h2 {
    width: 80%;
  }

  /* ------------------ Tab section and Buttons ------------------ */
  .ooButtonSection {
    padding: 20px 24px 20px;
  }
  /* button group Section */
  .btn-group {
    flex-wrap: wrap;
  }
  .ooTabSectionContent {
    padding: 80px 24px;
  }
  .tabLeftImg {
    display: none;
  }
  .tabRightImg {
    display: none;
  }
  .tab1CarouselContainer {
    width: 100%;
    margin-top: 40px;
    border: 4px solid var(--primary-color);
    border-radius: 8px;
  }
  .tab1CarouselContainer img {
    border-radius: 10px;
    scale: 1.01;
  }

  /* --------------------- Tab 1 Card Section --------------------- */
  .ooTab1CardContainer {
    padding: 10px 10px;
    margin-top: 80px;
  }
  .ooTab1Card {
    flex-direction: column;
    padding: 40px 24px;
    gap: 50px;
  }
  .ooTab1CardSvg {
    opacity: 70%;
    rotate: 90deg;
    width: 20px;
    margin: -140px 0;
  }

  /* --------------------- Tab 2 Card Section --------------------- */
  .ooTab2CardContainer {
    padding: 10px 10px;
    margin: 80px 0;
  }
  .ooTab2Card {
    padding: 40px 24px;
  }

  /* --------------------- What we offer --------------------- */
  .ooWhatWeOfferCard {
    width: 40%;
  }
  .ooWhatWeOffer {
    padding: 80px 0;
  }

  /* --------------------- Tab 3 Card Section --------------------- */
  .ooTab3CardContainer {
    padding: 60px 30px;
  }
  .ooTab3Card {
    width: 80%;
  }
  /* site visit modal start */
  .siteVisitFormModalContent {
    width: 90vw;
  }
  .siteVisitFormModalBody {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-direction: column;
  }

  .siteVisitPopupImgContainer {
    width: 100%;
    height: 550px;
    background-image: url("../images/ourOfferings/popupFormImg.png");
    border-radius: 8px 8px 0 0 !important;
  }
  .siteVisitFormContainer {
    width: 100%;
    /* padding: 50px 180px; */
  }
  .sitevisitFormData {
    gap: 16px;
  }
  .sitevisitFormData button:hover::before {
    height: 1200% !important;
  }
  /* site visit modal end */
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media all and (max-width: 480px) {
  .ourOfferings h2 {
    font-size: 32px;
    line-height: 40px;
  }
  .mainHeading {
    padding: 10px 0px;
  }
  .mainHeading h1 {
    font-size: 40px;
    line-height: 36px;
  }
  .headingTopleftImg {
    top: 0px;
    left: 20px;
    width: 40px;
  }
  .headingBottomRightImg {
    bottom: -10px;
    right: -20px;
    width: 40px;
  }
  /* section1 and section4 */

  .ooSection1TopLeft {
    width: 35%;
  }
  .ooSection1TopRight {
    width: 35%;
  }
  .ooSection1 {
    padding: 80px 24px;
  }
  .ooSection1 div {
    width: 90%;
  }

  /* ------------------ Tab section and Buttons ------------------ */
  .ooButtonSection {
    padding: 20px 24px 20px;
  }
  /* button group Section */
  .btn-group {
    flex-direction: column;
  }
  .ooTabSectionContent {
    padding: 80px 24px 40px;
  }
  .tabLeftImg {
    display: none;
  }
  .tabRightImg {
    display: none;
  }
  .tab-content h2 {
    width: 90%;
  }
  .tab1CarouselContainer {
    width: 100%;
    margin-top: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
  }
  .tab1CarouselContainer img {
    border-radius: 8px;
    scale: 1.02;
  }

  /* --------------------- Tab 1 Card Section --------------------- */
  .ooTab1CardContainer {
    padding: 10px 10px;
    margin-top: 24px;
  }
  .ooTab1Card {
    flex-direction: column;
    padding: 40px 24px;
    gap: 50px;
  }
  .ooTab1CardSvg {
    opacity: 70%;
    rotate: 90deg;
    width: 20px;
    margin: -140px 0;
  }
  .ooTab1CardText {
    width: 100%;
  }

  /* --------------------- Tab 2 Card Section --------------------- */
  .ooTab2CardContainer {
    padding: 10px 0px;
    margin: 60px 0;
  }
  .ooTab2Card {
    padding: 40px 24px;
  }

  /* --------------------- What we offer --------------------- */
  .ooWhatWeOfferCard {
    width: 80%;
  }
  .ooWhatWeOffer {
    padding: 40px 0;
  }

  /* --------------------- Tab 3 Card Section --------------------- */
  .ooTab3CardContainer {
    padding: 40px 0px;
  }
  .ooTab3Card {
    width: 100%;
  }
  /* site visit modal start */
  .siteVisitFormModalContent {
    width: 90vw;
  }
  .siteVisitFormModalBody {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-direction: column;
  }

  .siteVisitPopupImgContainer {
    width: 100%;
    height: 250px;
    background-image: url("../images/ourOfferings/popupFormImg.png");
    border-radius: 8px 8px 0 0 !important;
  }
  .siteVisitFormContainer {
    width: 100%;
    /* padding: 50px 180px; */
  }
  .sitevisitFormData button {
    width: 100%;
  }
  .sitevisitFormData {
    gap: 10px;
  }
  .siteVisitDateAndTime {
    flex-direction: column;
  }
  .siteVisitDateAndTime div {
    width: 100%;
    gap: 10px;
  }
  .sitevisitFormData button:hover::before {
    height: 1200% !important;
  }
  /* site visit modal end */
}