.text-mid-one{ margin: 50px 0 50px 0; }

/* .hero-text-main { margin-top: 135px; margin-bottom: 150px; } */

.heroImage {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Keep the base hero image visible */
.heroImage img {
  display: block;
  width: 100%;
  height: auto;
}

/* This wraps our before/after elements */
.hero-boxImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* important */
  pointer-events: none; /* makes sure it doesn’t block clicks */
}

/* Top-left decoration */
.hero-boxImg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 254px;
  height: 244px;
  background: url("https://rarepixelsdesign.com/wp-content/uploads/2025/11/topSquareGray.png") no-repeat top left;
  background-size: contain;
  z-index: 2;
}

/* Bottom-right decoration */
.hero-boxImg::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 254px;
  height: 244px;
  background: url("https://rarepixelsdesign.com/wp-content/uploads/2025/11/btmSquareGray.png") no-repeat bottom right;
  background-size: contain;
  z-index: 2;
}


.quote-text-main{ margin-top: 150px; margin-bottom: 88px; }
.quote-text{ width: 1438px; }


.quote-text span{ color: var(--primary); }
.quote-text-paragraph p { width: 100%; margin-top: 80px; }
.why-choose-us-text{ margin-bottom: 200px; }
.why-choose-us-text p{ width: 1093px; }


.rare-quote-text h2{ width: 1126px; }
.rare-quote-text h2 span{ color: var(--primary); }
.text-mid-one{ margin: 50px 0 50px 0; }
.rare-quote-text p{ width: 1213px; }
.why-choose-us-text span{ color: var(--primary); }



/* NEW CSS FOR RAREPIXELS ACCORDIANS */


.sub-serv-head { width: 70%; }

/* .sub-servc-lists { margin-top: 150px; } */

.sub-servc-list {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  padding: 40px 30px; 
  overflow: hidden;
  border-top: 1px solid gray;
  
  clip-path: inset(0 0 0% 0);
  max-height: 300px; 
  opacity: 0.9;
  transition:
    clip-path 0.6s ease-in-out,
    max-height 0.8s ease-in-out,
    padding 0.4s ease-in-out,
    opacity 0.4s ease-in-out;
  cursor: pointer;
}

.sub-servc-list .sub-serv-content p { opacity: 0; transition: all 0.6s ease-in-out; }
.sub-servc-list.active .sub-serv-content p { opacity: 1; }
.sub-servc-list.active .sub-serv-content .h4 { color: var(--primary); }
.sub-servc-list.i-am-last { border-bottom: 1px solid gray; }
.sub-servc-list.active {
	clip-path: inset(0 0 0 0);
	max-height: 1000px; 
	opacity: 1;
	padding: 60px 30px;
	cursor: auto;
  background-color: var(--black);
  color: var(--white);
}
.sub-servc-list .index-num, .sub-servc-list .sub-serv-content { transform: translateY(30%); transition: all 0.6s ease-in-out; }
.sub-servc-list.active .index-num, .sub-servc-list.active .sub-serv-content { transform: translateY(0%); }
.index-num span { font-size: 500px; line-height: 500px; opacity: 10%; }
.sub-serv-content { width: 760px; padding-right: 60px; }


.sub-servc-list p:last-child, .quote-text p:last-child { display: none; }