.section_service {
  position: relative;
  width: 100%;
  padding: 12rem 8rem;
  overflow: hidden;
  background: var(--primary_light);
}

.service_container {
  position: relative;
  max-width: 150rem;
  margin: 0 auto;
  /* background-color: dodgerblue; */
}

.service_container__1_1 {
  width: 100%;
  position: relative;
  height: 15rem;
  /* background-color: crimson; */
}

.section_service .highlight_txt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-size: 19.6rem;
  line-height: 1;
  letter-spacing: 1.666rem;
  margin: 0 auto;
  text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.05);
}

.section_service .section_title {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 2.4rem;
  letter-spacing: 0.168rem;
  font-weight: 400;
  color: var(--primary_red);
  text-shadow: 0 0.4rem 0.7rem rgba(0, 0, 0, 0.2);
}

.service_container__1_2 {
  padding-top: 5rem;
  position: relative;
  display: grid;
  grid-template-columns: 42.5rem 1fr 1fr 1fr;
}

/* EDITING THE FLOATING BUTTON ON THE RIGHT */
.select_service_container {
  position: fixed;
  right: 0;
  bottom: 50%;
  transform: translate(0, 50%);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  z-index: 5;
  /* background-color: lightseagreen; */
  width: max-content;
  display: none;
}

.full_btn {
  grid-row: 1/1;
}
.premium_btn {
  grid-row: 2/2;
}
.signature_btn {
  grid-row: 3/3;
}

.select_service_container .vertical_text {
  display: inline-block;
  writing-mode: vertical-rl; /* Vertical text from right to left */
  transform: rotate(180deg); /* Rotate text 180 degrees to make it upright */
  white-space: nowrap; /* Prevent text from wrapping */
  text-align: center; /* Center the vertical text within the button */
  transform-origin: center center; /* Set the transform origin to the center */
  width: max-content;
}

.select_btn {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  font-weight: 600;
  color: var(--gray_1);
  background: transparent;
  padding: 1.2rem;
  border: none;
  width: 100%;
}

.select_btn.active {
  background: var(--primary_red);
  color: var(--primary_light);
}

/* =============SERVICE LEFT CONTAINER============= */
.service_left_container {
  grid-column: 1/1;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

.service_message_box {
  grid-row: 1/1;
  height: 100%;
  width: 100%;
  padding: 4.8rem;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  z-index: 1;
}

.service_message {
  text-transform: uppercase;
  line-height: 1.5;
  font-size: 4.8rem;
  font-weight: 400;
  letter-spacing: 0.408rem;
  color: var(--primary_orange);
  opacity: 0.5;
}

.service_category_container {
  grid-row: 2/2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.interior_category_container,
.exterior_category_container {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.4);
}

.category_row {
  width: 100%;
  height: 8rem;
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 4.8rem;
  opacity: 0.6;
  color: var(--primary_dark);
  font-size: 2rem;
  text-transform: capitalize;
  font-weight: 400;
}

.left_interior_heading_container,
.left_exterior_heading_container {
  height: 8rem;
  width: 100%;
  padding: 0 4.8rem;
  display: flex;
  align-items: center;
  background: var(--primary_light);
}

/* ======================================= */
.detail_container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.full_detail_container {
  grid-column: 2/2;
  background: var(--primary_light);
  position: relative;
}
.full_detail_container__1 {
  background: #fff;
}

.signature_detail_container {
  grid-column: 4/4;
  background: var(--primary_light);
  position: relative;
}
.signature_detail_container__1 {
  background: #fff;
}

.premium_detail_container {
  grid-column: 3/3;
  background: var(--primary_light);
  position: relative;
}
.premium_detail_container__1 {
  background: linear-gradient(
    to bottom,
    rgba(199, 61, 49, 0.74),
    rgba(199, 85, 49, 0.6)
  );
}

.detail_container__1 {
  padding: 4.8rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card_heading {
  text-transform: uppercase;
  font-size: 3.6rem;
  line-height: 1;
  font-weight: 700;
  display: inline-block;
  letter-spacing: 0.306rem;
  color: var(--primary_dark);
}

.pricing_container {
  margin: 8rem 0 4.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.pricing {
  text-transform: capitalize;
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
  display: inline-block;
  color: var(--primary_dark);
  opacity: 0.7;
}

.pricing span {
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  display: inline-block;
  letter-spacing: 0.204rem;
  color: var(--primary_dark);
  opacity: 0.5;
}

.description {
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.136rem;
  text-align: center;
  color: var(--primary_dark);
  opacity: 0.4;
  margin-bottom: auto;
}

.btn_schedule:is(:link, :visited) {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.136rem;
  padding: 2rem 3.2rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 0.15rem solid var(--primary_dark);
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.05);
  color: var(--primary_dark);
  margin-top: 4.8rem;
}

.btn_schedule.premium:is(:link, :visited) {
  border: none;
  color: var(--primary_red);
}

.premium {
  color: var(--primary_light);
}

.premium span {
  color: var(--primary_light);
}

.premium_detail_container:after {
  content: "best choice";
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 1rem;
  font-weight: 600;
  color: var(--primary_orange);
  opacity: 0.8;
  position: absolute;
  left: 50%;
  top: -3rem;
  transform: translateX(-50%);
}

/* ---------------------------------------------------- */
/* ------------------INTERIOR EXTERIOR----------------- */
/* ---------------------------------------------------- */
.detail_row_category {
  display: none;
}

.interior_heading_container,
.exterior_heading_container {
  height: 8rem;
  width: 100%;
  padding: 0 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary_light);
}

.interior_heading,
.exterior_heading {
  text-transform: uppercase;
  font-size: 3rem;
  letter-spacing: 0.272rem;
  font-weight: 600;
  line-height: 1;
}

.interior_heading.hidden,
.exterior_heading.hidden {
  display: none;
}

.interior_container,
.exterior_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.detail_row {
  width: 100%;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 3.2rem;
  opacity: 0.8;
  color: var(--primary_dark);
  font-size: 2rem;
  text-transform: capitalize;
  font-weight: 400;
}
.detail_row.premium {
  color: var(--primary_orange);
}

.section_service .icon {
  width: 2.4rem;
}

/* ===========editing hover effacts=========== */
.top {
  z-index: 3;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}
