body {

  font-family: "Commissioner", sans-serif;

  margin: 0;

  padding: 0;

  background-color: #fff;

}



.header-navbar {

  background-color: #fff;

  border-bottom: 1px solid #ddd;

  padding: 0px 0;

  position: sticky;      /* 👈 keeps header visible */

  top: 0;                /* stick to very top */

  z-index: 1050;         /* above other elements */

}





.header-navbar .navbar-brand {

  font-weight: 700;

  font-size: 22px;

  color: #222;

}



.header-btn {

  position: absolute !important;

  right: 0px;

  height: 115px !important;

  z-index: 99;

  width: 243px;

  text-align: center;

  margin: 0 auto;

  padding-top: 24px !important;

}



#navbarNav {

  margin-right: 100px;

}



.header-navbar .navbar-nav .nav-link {

  font-size: 15px;

  color: #333;

  font-weight: 400;

  line-height: 50.41px;

  font-family: "Commissioner", sans-serif;

}



.header-navbar .nav-link:hover,

.header-navbar .nav-link.active {

  color: #e63946;

}



.header-navbar .contact-info {

  font-size: 14px;

  color: #555;

  text-align: right;

}



.header-navbar .btn-consult {

  font-size: 14px;

  padding: 8px 16px;

}



.custom-controls {

  z-index: 999;

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

  transition: all 0.3s ease;

  position: absolute;

  bottom: -5px;

  right: 0px;

  height: 57px;

  padding-top: 14px;

  width: 200px;

  text-align: center;

  border: 1px solid #222;

  background-color: #fff;

}



.stats-section {

  padding: 60px 0;

  background-color: #f9f9f9;

  text-align: center;

}



.stats-section h2 {

  font-size: 28px;

  font-weight: 600;

  margin-bottom: 20px;

}



.stats-section p.description {

  font-size: 16px;

  color: #666;

  margin-bottom: 40px;

}



.stats-section .stat-box {

  padding: 20px;

  border: 1px solid #ddd;

  border-radius: 8px;

  background-color: #fff;

  margin-bottom: 20px;

}



.stats-section .stat-number {

  font-size: 32px;

  font-weight: 700;

  color: #e63946;

}



.stats-section .stat-label {

  font-size: 14px;

  color: #444;

  margin-top: 5px;

}





.technologies-section {

  padding: 60px 0 40px;

  text-align: center;

  margin-top: -130px;

  margin-left: -108px !important;

}



.technologies-section h2 {

  font-family: "Prata", sans-serif;

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 30px;

  line-height: 67.6px;

}



.file-formats-section {

  background-color: #00a89d;

  padding: 30px 0;

  color: white;

  text-align: center;

}



.file-formats-section h5 {

  margin-bottom: 20px;

  font-size: 18px;

}



.file-formats-icons img {

  width: 50px;

  margin: 0 8px;

}





.capabilities-section {

  padding: 80px 0;

  background-color: #fff;

}



.capabilities-section img {

  width: 100%;

  border-radius: 4px;

}



.capabilities-content h2 {

  font-family: "prata";

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 20px;

  line-height: 61.6px;

}



.capabilities-content p {

  font-size: 15px;

  color: #444;

  font-family: "Commissioner", sans-serif;

}



.capabilities-list {

  display: flex;

  flex-wrap: wrap;

  margin: 20px 0;

  padding-left: 0;

  list-style: none;

}



.capabilities-list li {

  width: 50%;

  font-size: 16px;

  margin-bottom: 10px;

  position: relative;

  padding-left: 24px;

  font-family: "Commissioner", sans-serif;

}

.capabilities-list li {
      display: list-item;
      width: 100%;
      position: relative;
    }

    .capabilities-list li::before {
      content: "";
      position: absolute;
      left: 4px;
      top: 6px;
      width: 5px;
      height: 9px;
      border: solid #00c68c;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .capabilities-list li::after {
      content: "";
      position: absolute;
      left: -2px;
      top: 12px;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid #00c68c;
      background: transparent;
      margin-right: 10px;
    }



.final-cta {

  background-color: #14cc8f;

  padding: 30px 0;

  color: #fff;

}



.final-cta .cta-text {

  font-size: 34px;

  font-weight: 500;

}



.final-cta .btn-outline-light {

  font-weight: 600;

  border: 2px solid #fff;

}



.faq-cert-section {

  padding: 80px 0;

  background-color: #fff;

}



.faq-title {

  font-family: Georgia, serif;

  font-size: 32px;

  font-weight: 600;

  margin-bottom: 30px;

}



.accordion-button:not(.collapsed) {

  color: #000;

  background-color: #f8f9fa;

  box-shadow: none;

}



.accordion-button {

  font-weight: 600;

}



.certification-text {

  font-size: 15px;

  color: #444;

  margin-bottom: 20px;

}



.certification-images img {

  width: 100%;

  border-radius: 6px;

  margin-bottom: 15px;

}



.footer-top {

  background: #111;

  color: #fff;

  padding: 30px 0;

  font-family: "Commissioner", sans-serif;

}



.footer-contact {

  color: #fff;

  font-size: 20px;

  font-weight: 500;

  line-height: 27.9px;

  font-family: "Commissioner", sans-serif;

}



.footer-contact i {

  font-size: 20px;

  margin-right: 8px;

  

  opacity: 0.8;

}



.footer-contact small {

  font-size: 16px;

  line-height: 31px;

  display: block;

  font-weight: 300;

}



.footer-main {

  background: #0b0b0b;

  color: #ccc;

  padding: 40px 0;

  font-size: 15px;

}



.footer-main h6 {

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 20px;

}



.footer-main ul {

  list-style: none;

  padding: 0;

}



.footer-main ul li a{

  margin-bottom: 8px;

  color: #ccc;

}



.footer-main ul li::before {

  content: ">";

  color: #00d084;

}



.footer-main ul li:before {

  padding-right: 10px;

}



.footer-social i {

  font-size: 18px;

  margin-right: 10px;

  

}



.footer-logo {

  margin-bottom: 15px;

}



/* .footer-main{

  background:#0b0b0b;

  color:#cfcfcf;

  padding:40px 0;

  font-family:"Commissioner",sans-serif;

  font-size:14px;

}



.footer-main h6{

  color:#fff;

  font-size:16px;

  font-weight:600;

  margin-bottom:18px;

}



.footer-list{

  list-style:none;

  margin:0;

  padding:0;

}



.footer-list li{

  margin:6px 0;

  padding-left:14px;

  position:relative;

}



.footer-list li::before{

  content:"›";

  position:absolute;

  left:0;

  color:#00d084;

}



.footer-list a{

  color:#cfcfcf;

  text-decoration:none;

}

.footer-list a:hover{

  color:#00d084;

} */



.how-we-work-section {

  padding: 10px 0;

  text-align: center;

  background-color: #fff;

}



.how-we-work-section h2 {

  font-family: "Prata";

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 10px;

}



.how-we-work-section p.lead {

  max-width: 760px;

  margin: 0 auto 40px;

  font-size: 15px;

  color: #444;

}



.step-box {

  margin-bottom: 10px;

}



.step-icon {

  background: #e7f8f4;

  border-radius: 50%;

  width: 100px;

  height: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: auto;

  margin-bottom: 15px;

  position: relative;

}



.step-icon-index {

  background: #e7f8f4;

  border-radius: 50%;

  /* width: 100px;

  height: 100px; */

  display: flex;

  align-items: center;

  justify-content: center;

  margin: auto;

  margin-bottom: 15px;

  position: relative;

}



.step-icon img {

  width: 70px;

  height: 70px;

}



.step-icon-services img {

  width: 110px;

  height: 110px;

}



.step-number {

  position: absolute;

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);

  background: #00c68c;

  color: #fff;

  font-weight: 600;

  font-size: 14px;

  border-radius: 20px;

  padding: 2px 10px;

}



.step-caption {

  font-size: 14px;

  font-weight: 500;

  max-width: 140px;

  margin: auto;

}



.cta-box {

  background: url("/images/header-cta.png") no-repeat center center;

  background-size: cover;

  /* border-radius: 0.5rem; */

  height: 60px;

}



.talk-to-expert::before {

  content: url("/images/message-icon.webp");

  position: relative;

  left: -20px;

  top: 10px

}



hr {

  margin: 8rem 0;

  color: inherit;

  border: 0;

  border-top: var(--bs-border-width) solid;

  opacity: 0.25;

}



.dropdown:hover .dropdown-menu {

  display: block;

  margin-top: 0;

}



.dropdown:hover>.dropdown-menu {

  display: block;

}



.dropdown>.dropdown-toggle:active {

  /*Without this, clicking will make it sticky*/

  pointer-events: none;

}



.title::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 1px;

  background: #ccc;

  z-index: 0;

  font-family: "Commissioner", sans-serif;

}



.title h4 {

  position: relative;

  padding: 10px;

  font-size: 17px;

  line-height: 61.6px;

  background: #fff;

  display: inline-block;

  z-index: 1;

  margin-bottom: 0;

  font-family: "Commissioner", sans-serif;

}



.title {

  width: 100%;

  text-align: center;

  position: relative;

}



.navtab {

  margin-inline-end: 100px !important;

}



.btn-text {

  margin-top: -0.5rem !important;

  margin-right: 0rem !important;

  margin-left: 4rem !important;

}







.hero-carousel-section {

  background: transparent

    /* position: relative;

      min-height: 500px;

      margin-bottom: 50px; */

}



.hero-carousel-section .carousel-inner img {

  /* width: 100vw;

      height: 100vh; */

  object-fit: cover;

}



.hero-carousel-section .carousel-caption {

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 0 15px;

}



.hero-carousel-section .carousel-caption p {

  max-width: 800px;  

  margin: 15px auto 25px; 

  line-height: 1.6;  

  font-size: 18px;    

  color: #f1f1f1;

}



@media (max-width: 768px) {

  .hero-carousel-section .carousel-caption p {

    max-width: 95%;

    font-size: 16px;

    line-height: 1.4;

  }

}



.hero-carousel-section h1 {

  font-size: 36px;

  font-weight: 700;

  color: #fff;

}



.hero-carousel-section p {

  font-size: 18px;

  color: #f1f1f1;

  margin-top: 15px;

  margin-bottom: 25px;

}



.hero-carousel-section .btn {

  font-size: 16px;

  padding: 10px 22px;

  margin: 0 6px;

}



.custom-controls button {

  font-size: 14px;

  background: none;

  border: none;

}



.hero-carousel-section .carousel {

  position: relative;

  overflow: hidden;

}



@media (min-width: 768px) {

  .col-md-2 {

    flex: 0 0 auto;

    width: 13.666667%;

  }

}



.btn-link {

  text-decoration: none !important;

}



.banner-heading {

  font-family: "prata", sans-serif;

  font-size: 46px;

  font-weight: 400;

  line-height: 21.6px;

}



.banner-text {



  font-family: "Commissioner", sans-serif;

  font-size: 20px;

  line-height: 26px;

  font-weight: 400;

}









#logoCarousel .carousel-control-prev-icon,

#logoCarousel .carousel-control-next-icon {

  background-image: none;

  /* Remove Bootstrap's default icons */

  width: 40px;

  height: 40px;

  background-color: transparent;

  border: 2px solid #000000;

  border-radius: 50%;

  position: relative;

}



#logoCarousel .carousel-control-prev-icon::after,

#logoCarousel .carousel-control-next-icon::after {

  content: '';

  display: block;

  width: 12px;

  height: 12px;

  border-top: 2px solid #000000;

  border-right: 2px solid #000000;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) rotate(45deg);

}



#logoCarousel .carousel-control-prev-icon::after {

  transform: translate(-50%, -50%) rotate(-135deg);

}



#logoCarousel .carousel-control-next-icon::after {

  transform: translate(-50%, -50%) rotate(45deg);

}







.experience-section {

  padding: 20px 0;

  background-color: #fff;

  text-align: center;

  margin-top: 80px;

}



.experience-section h1 {

  font-family: "prata";

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 20px;

}



.experience-section p {

  font-family: "Commissioner", sans-serif;

  font-size: 17px;

  color: #444;

  max-width: 960px;

  margin: 0 auto 50px;

  line-height: 26.6px;

}



.stat-wrapper {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 30px;



}



.stat-item {

  position: relative;

  min-width: 150px;

}



.stat-icon {

  position: absolute;

  top: 22px;

  right: -40px;

  width: 49px;

  height: 49px;





}



.stat-item h4 {

  font-size: 50px;

  font-weight: 500;

  color: #00c68c;

}



.stat-item small {

  display: block;

  font-size: 17px;

  color: #000000;

  font-family: "Myriad Pro";

  font-weight: 400;

  line-height: 15.6px;

}



.dot-divider {

  width: 10px;

  height: 10px;

  background-color: #000;

  display: inline-block;

  margin: 0 15px;

  position: relative;

  left: 36px;

}



.underline {

  border-top: 4px solid #00c68c;

  display: inline-block;

  padding-top: 5px;

}







.services-section h2 {

  font-family: "prata", sans-serif;

  margin-top: 60px;



}



.services-section p.text-center {

  max-width: 750px;

  margin: 0 auto 50px;

  font-size: 17px;

  color: #444;

  font-family: "Commissioner", sans-serif;



}



.service-box {

  background: #fff;

  padding: 0;

  border-radius: 0;

  overflow: hidden;

  position: relative;

  transition: all 0.3s ease;

  height: 100%;



}



.service-img-wrapper {

  position: relative;

  overflow: hidden;

}



.arrow-icon {

  position: absolute;

  bottom: 0px;

  right: -1px;

  background-color: #00c68c;

  width: 55px;

  height: 55px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  border-radius: 2px;

  opacity: 0;

  transition: background-color 0.3s ease;

  font-size: 18px;

  text-decoration: none;

  opacity: 1;



}



.arrow-icon:active {

  background-color: #008f66;

}



.service-meta {

  padding: 20px 10px 10px;

}



.service-tag {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 5px;

  margin-top: -20px;

}



.service-tag .line {

  width: 30px;

  height: 2px;

  background-color: #00c68c;

  flex-shrink: 0;

}



.service-tag small {

  font-size: 14px;

  font-weight: 500;

  color: #555;

  font-family: "Commissioner", sans-serif;

}



.service-box h3 {

  font-size: 23px;

  font-weight: 500;

  margin-bottom: 10px;

  line-height: 26.6px;

  font-family: "Commissioner", sans-serif;

}



.service-box p {

  font-size: 16px;

  color: #555;

  font-family: "Commissioner", sans-serif;

  line-height: 24px;

}







.overlay-box {

    background-color: #222;

    padding: 30px;

    margin-left: 58px;

    margin-top: -80px;

    z-index: 99;

    position: relative;

    width: 450px;

    color: #fff;

  }



  .service-list {

    list-style: none;

    padding-left: 40px;

    position: relative;

  }



  .service-list li {

    cursor: pointer;

    color: #999;

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 14px;

    position: relative;

    padding-left: 30px;

    outline: none; /* for keyboard focus ring fallback */

  }



  .service-list li.active {

    font-weight: 700;

    color: #000;

  }



  .service-list li.active::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 20px;

    height: 2px;

    background-color: #00c68c;

  }



  /* (Optional) tiny responsiveness so overlay doesn't overflow on small screens */

  @media (max-width: 575.98px) {

    .overlay-box {

      margin: 12px 0 0 0;

      width: auto;

      padding: 16px;

    }

  }



.arrow-icon {

  position: absolute;



  background-color: #00c68c;

  width: 55px;

  height: 55px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  border-radius: 2px;

  font-size: 18px;

  text-decoration: none;

}



.modal-sm-video {

  max-width: 560px;

  width: 90%;

}



.service-box {

  transition: all 0.3s ease-in-out;

}



.service-box:hover {

  transform: translateY(-4px);

}





/* industries sections */

.industries-section {

  background: url('/images/background-img.png') no-repeat center center;

  background-size: cover;

  color: #fff;

  padding: 80px 0;

  position: relative;

  text-align: center;

  z-index: 1;

}



.industries-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, .55);

  z-index: -1;

}



.industries-section h2 {

  font-family: 'prata', serif;

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 15px;

}



.industries-section p {

  font-family: 'Commissioner', sans-serif;

  font-size: 17px;

  font-weight: 400;

  color: #e0f2f1;

  max-width: 700px;

  margin: 0 auto 40px;

}



/* ---- tags layout (no Bootstrap .row to avoid conflicts) ---- */

.industry-tags {

  margin-top: 40px;

  display: flex;

  flex-direction: column;

  gap: 18px;

  /* space between the two rows */

  align-items: center;

  /* center the whole block */

}



.tags-row {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  /* space between chips */

  margin: 0;

  /* ensure no left shift */

  flex-wrap: nowrap;

  /* keep each row strictly in one line on desktop */

}



/* equal-size chips */

.chip {

  display: inline-block;

  width: 230px;

  /* equal width like your reference */

  padding: 12px 18px;

  border: 1px solid #fff;

  border-radius: 6px;

  color: #fff;

  text-align: center;

  background: transparent;

  transition: .25s ease;

  /* cursor: pointer; */

  line-height: 1.2;

}



.chip:hover {

  background: #fff;

  color: #004d40;

}



/* responsive: allow wrapping on smaller screens */

@media (max-width: 992px) {

  .tags-row {

    flex-wrap: wrap;

  }



  .chip {

    width: 45%;

  }



  /* two per row on tablets */

}



@media (max-width: 576px) {

  .chip {

    width: 100%;

  }



  /* single column on phones */

}









.portfolio-section {

  padding: 80px 0 40px;

  text-align: center;

}



.portfolio-section h2 {

  font-family: "Prata";

  font-size: 48px;

  font-weight: 400;

  line-height: 61.6px;

  margin-bottom: 10px;

}



.portfolio-section p {

  color: #555;

  font-size: 17px;

  margin-bottom: 30px;

  font-family: "Commissioner", sans-serif;

  font-weight: 400;

}



.portfolio-tabs .nav-link {

  font-size: 15px;

  color: #444;

  border: none;

  border-bottom: 2px solid transparent;

  margin: 0 10px;

  font-family: "Commissioner", sans-serif;

}



.portfolio-tabs .nav-link.active {

  color: #00a887;

  font-weight: 600;

  border-color: #00a887;

}



/* .portfolio-grid img {

  width: 100%;

  border-radius: 4px;

  display: block;

  object-fit: cover;

}



.image-compare {

  position: relative;

  width: 100%;

  overflow: hidden;

  aspect-ratio: 448 / 286;

  max-height: 100%;

}



.image-compare img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  pointer-events: none;

  display: block;

}



.image-compare .before {

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

}



.after-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 50%;

  overflow: hidden;

  z-index: 2;

}



.after-wrapper img {

  width: 100%;

  height: 100%;

}



.slider-bar {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 2px;

  background: #fff;

  z-index: 3;

  transform: translateX(-1px);

}



.slider-button {

  position: absolute;

  top: 50%;

  left: 50%;

  background: #00c68c;

  color: #fff;

  border-radius: 50%;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  transform: translate(-50%, -50%);

  z-index: 4;

  cursor: grab;

} */



/* Testimonials Section */

.testimonials-section {

  background: #f7f7f7;

  padding: 80px 0;

  text-align: center;

}



.testimonials-section h2 {

  font-family: "Prata", sans-serif;

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 10px;

}



.testimonials-section p.subtext {

  color: #555;

  font-size: 15px;

  margin-bottom: 40px;

}



.testimonial-card {

  background: #fff;

  border-radius: 12px;

  padding: 30px;

  text-align: left;

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

}



.testimonial-card img {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 10px;

}



.testimonial-card h6 {

  font-size: 18px;

  font-weight: 600;

  margin-bottom: 5px;

  font-family: "Commissioner", sans-serif;

}



.testimonial-card small {

  font-size: 13px;

  color: #888;

  font-family: "Commissioner", sans-serif;

}



.testimonial-card p {

  font-size: 14px;

  color: #555;

  margin-top: 15px;

}



#testimonial-track {

  display: flex;

  animation: scrollTestimonials 30s linear infinite;

}



.testimonials-section .overflow-hidden {

  overflow: hidden;

}



.testimonial-slide {

  width: 300px;

  /* fixed width for smooth scroll */

  flex-shrink: 0;

}



@keyframes scrollTestimonials {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}







  .success-section {

    padding: 80px 0;

    background-color: #fff;

  }



  .success-section h2 {

    font-family: "Prata", serif;

    font-size: 36px;

    font-weight: 600;

    margin-bottom: 10px;

  }



  .success-section p.subtext {

    color: #444;

    margin-bottom: 40px;

  }



  .success-carousel .carousel-inner {

    border-radius: 8px;

  }



  /* Maintain stable height to avoid flicker/jump */

  .success-carousel .carousel-item .row {

    min-height: 420px; /* adjust if your slides are taller/shorter */

  }



  /* smoother & slower slide transition */

  #successCarousel .carousel-item {

    transition: transform 0.9s ease-in-out; /* slowed from .6s */

    will-change: transform;

    backface-visibility: hidden;

  }



  /* If you prefer cross-fade, just add `carousel-fade` to the main div */

  /* #successCarousel.carousel-fade .carousel-item { transition-duration: .9s; } */



  .success-carousel .carousel-item {

    padding: 20px 0;

  }



  .success-carousel .carousel-item .image-stack {

    position: relative;

    padding-left: 15px;

  }



  .success-carousel .carousel-item .image-stack::before {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 10px;

    background-color: #14C887;

    z-index: 1;

  }



  .success-carousel .carousel-item img {

    width: 100%;

    display: block;

    position: relative;

    z-index: 2;

  }



  .case-content h5 {

    font-size: 20px;

    font-weight: 600;

    font-family: "Prata", serif;

    margin-bottom: 20px;

  }



  .case-content .section-title {

    font-weight: 600;

    color: #111;

    margin-top: 20px;

    margin-bottom: 5px;

    font-family: "Commissioner", sans-serif;

  }



  .case-content p {

    font-size: 15px;

    color: #444;

    font-family: "Commissioner", sans-serif;

  }



  .case-content .btn-success {

    margin-top: 20px;

    background-color: #14C887;

    border: none;

    font-family: "Commissioner", sans-serif;

  }



  #successCarousel .carousel-control-prev,

  #successCarousel .carousel-control-next {

    width: 48px;

    height: 48px;

    background-color: #fff;

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

    opacity: 1;

    transition: all 0.3s ease;

    z-index: 3;

  }



  #successCarousel .carousel-control-prev {

    left: 30px;

  }



  #successCarousel .carousel-control-next {

    right: 30px;

  }



  #successCarousel .carousel-control-prev-icon,

  #successCarousel .carousel-control-next-icon {

    filter: invert(0%) brightness(0);

    width: 20px;

    height: 20px;

  }



/* real estate section */

.real-estate-section {

  padding: 80px 0;

}



.real-estate-section h2 {

  font-family: "Prata", serif;

  font-size: 36px;

  font-weight: 500;

  margin-bottom: 20px;

}



.real-estate-section p {

  font-size: 16px;

  font-family: "Commissioner", sans-serif;

  color: #333;

}



.real-estate-section .btn-outline-success {

  border-color: #00c68c;

  color: #00c68c;

  margin-top: 20px;

  font-weight: 500;

  font-size: 14px;

}



.real-estate-img {

  width: 100%;

  border-radius: 6px;

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

}



@media (max-width: 768px) {

  .real-estate-section h2 {

    font-size: 28px;

  }

}



/* real estate section ends */



/* Services Overview Section starts */

.image-compare-box {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border: 1px solid #ddd;

  border-radius: 6px;

}



.image-compare-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.order-btn {

  position: absolute;

  bottom: -2px;

  right: -1px;

  font-size: 13px;

  padding: 6px 12px;

  background-color: #00c68c;

  border: none;

  border-radius: 4px;

  color: #fff;

  text-decoration: none;

  z-index: 2;

}



.before-after-grid-section h2 {

  font-family: "Prata", serif;

  font-size: 48px;

  font-weight: 400;

  margin-bottom: 20px;

  line-height: 61.6px;

}



/* .before-after-grid-section h3 {

            font-family: "Commissioner", sans-serif;

            font-size: 23px !important;

            font-weight: 500;

            margin-bottom: 20px;

            line-height: 26.6px;

        } */



.section-line {

  width: 20px;

  height: 2px;

  background-color: #00c68c;

  /* green line */

  display: inline-block;

}



.section-head h5 {

  font-weight: 500;

  font-size: 23px;

  line-height: 26.6px;

  font-family: "Commissioner", sans-serif;

}



/* Services Overview Section ends  */



/* other services section starts */

.other-services-section {

  background-color: #EEF8F4;

  padding-top: 80px;

  padding-bottom: 80px;

}



.section-heading {

  font-family: "Prata", serif;

  font-size: 32px;

  font-weight: 400;

  color: #000;

}



.other-services-section ul li {

  font-family: "Commissioner", sans-serif;

  font-size: 16px;

  color: #111;

  margin-bottom: 15px;

  display: flex;

  align-items: center;

}



.check-icon {

  display: inline-block;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 2px solid #00c68c;

  background: transparent;

  margin-right: 10px;

  position: relative;

  top: 3px;

}



.check-icon::after {

  content: "";

  position: absolute;

  left: 4px;

  top: 1px;

  width: 5px;

  height: 9px;

  border: solid #00c68c;

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



/* other services section ends */



/* contact us css starts */

.office-contact-section {

  text-align: center;

}



.contact-card {

  padding: 30px;

  border-radius: 8px;

  min-height: 200px;

}



.blue-card {

  background-color: #00246b;

}



.gradient-card {

  background: linear-gradient(135deg, #00c68c, #007cff);

}



.contact-card .icon i {

  color: #fff;

}



.contact-card h6 {

  font-size: 14px;

  letter-spacing: 0.5px;

}



.contact-card p {

  font-size: 14px;

  margin-bottom: 6px;

}



.contact-card .card-link {

  font-size: 13px;

  font-weight: 500;

  color: #fff;

  text-decoration: none;

}



.contact-card .card-link:hover {

  text-decoration: underline;

}



.contact-box {

  max-width: 800px;

  margin: 0 auto;

}



.contact-section h2 {

  font-family: "Prata", serif;

  font-size: 26px;

  font-weight: 500;

  text-align: center;

}



.contact-form .form-control {

  border-radius: 5px;

  font-size: 14px;

  padding: 12px;

  font-family: "Commissioner", sans-serif;

}



.upload-btn {

  padding: 8px 18px;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

}



.file-name {

  font-size: 14px;

  color: #555;

  font-family: "Commissioner", sans-serif;

}



.contact-form .btn-success {

  background-color: #00c68c;

  border: none;

  padding: 10px 24px;

  font-size: 14px;

  font-weight: 500;

}



.grtyoutube-popup {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 99999

}



.grtyoutube-popup-content {

  margin-top: 150px;

  width: 95%;

  max-width: 850px;

  margin-left: auto;

  margin-right: auto;

  position: relative

}



.grtyoutube-popup-close {

  position: absolute;

  top: -25px;

  right: 0;

  color: #fff;

  font-size: 25px;

  width: 19px;

  height: 19px;

  cursor: pointer

}



.grtyoutube-iframe {

  width: 100%;

  height: 480px

}



.grtyoutube-dark-theme {

  background: rgb(0 0 0 / .85)

}



.grtyoutube-dark-theme .grtyoutube-popup-content {

  -webkit-box-shadow: 0 0 8px 0 rgb(255 255 255 / .4);

  -moz-box-shadow: 0 0 8px 0 rgb(255 255 255 / .4);

  box-shadow: 0 0 8px 0 rgb(255 255 255 / .4)

}



.grtyoutube-dark-theme .grtyoutube-popup-close {

  background: url(/images/icons/icon-close-white.png) no-repeat

}



.grtyoutube-light-theme {

  background: rgb(255 255 255 / .85)

}



.grtyoutube-light-theme .grtyoutube-popup-content {

  -webkit-box-shadow: 0 0 8px 0 rgb(0 0 0 / .4);

  -moz-box-shadow: 0 0 8px 0 rgb(0 0 0 / .4);

  box-shadow: 0 0 8px 0 rgb(0 0 0 / .4)

}



.grtyoutube-light-theme .grtyoutube-popup-close {

  background: url(/images/icons/icon-close-black.png) no-repeat

}



.cust-bg,

.cust-bg a,

.cust-bg h2 {

  text-align: left

}



.pad-10px {

  padding: 10px;

  border: 1px solid #ccc

}



.youtube-link {

  display: block;

  margin-bottom: 10px;

  text-decoration: none

}



.youtube-link img {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: perspective(1px) translateZ(0);

  transform: perspective(1px) translateZ(0);

  box-shadow: 0 0 1px #fff0;

  -webkit-transition-duration: .3s;

  transition-duration: .3s;

  -webkit-transition-property: box-shadow;

  transition-property: box-shadow;

  border: 2px solid #efefef;

  width: 100%

}



/* ========== Before/After ========== */

.before-after-container {

  position: relative;

  overflow: hidden;

  cursor: ew-resize;

  user-select: none;

  -webkit-user-select: none;

  -webkit-tap-highlight-color: transparent;

  touch-action: none;

  border-radius: 0px;

}



.before-after-container img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  pointer-events: none;

  -webkit-user-drag: none;

}



.before-after-container .before {

  position: relative;

  z-index: 1;

}



.before-after-container .after {

  clip-path: inset(0 50% 0 0);

  z-index: 2;

}



/* divider bar */

.before-after-container .bar {

  position: absolute;

  inset: 0 auto 0 50%;

  width: 2px;

  background: #fff;

  z-index: 3;

  transform: translateX(-50%);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);

  pointer-events: none;

}



/* handle: white disc with left+right triangles (no plus) */

.before-after-container .handle {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: #fff;

  z-index: 4;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);

}



/* draw the arrows */

.before-after-container .handle::before,

.before-after-container .handle::after {

  content: "";

  width: 0;

  height: 0;

  display: block;

  border-style: solid;

}



.before-after-container .handle::before {

  border-width: 8px 6px 8px 0;

  border-color: transparent #111 transparent transparent;

  margin-right: 6px;

}



.before-after-container .handle::after {

  border-width: 8px 0 8px 6px;

  border-color: transparent transparent transparent #111;

  margin-left: 6px;

}



/* if any old spans existed in your markup, hide them */

.before-after-container .handle span {

  display: none !important;

}



/* bottom-right expand button */

.open-modal-btn {

  position: absolute;

  right: 0px;

  bottom: 0px;

  z-index: 5;

  width: 32px;

  height: 28px;



  border: none;

  background: rgba(255, 255, 255, 0.25);

  /* semi-transparent white */

  color: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  padding: 0;

  transition: background 0.2s ease;

}



.open-modal-btn svg {

  width: 14px;

  height: 14px;

  stroke: #111;

  opacity: 0.8;

  /* make icon slightly softer */

}



.open-modal-btn:focus {

  outline: none;

}



.open-modal-btn:hover {

  background: rgba(255, 255, 255, 0.5);

  /* more visible on hover */

}



/* modal visuals */

.modal-backdrop.show {

  background-color: rgba(0, 0, 0, .3) !important;

}



#sliderModal .modal-content {

  border-radius: 10px;

  overflow: hidden;

  background: #fff;

}



#sliderModal .modal-body {

  padding: 0 !important;

  min-height: 300px;

}





.bg-removal-section h2 {

  letter-spacing: .3px;

}



.brs-card {

  border-radius: 10px;

  overflow: hidden;

  background: #f5f5f5;

  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);

}



.brs-img {

  width: 100%;

  height: 100%;

  aspect-ratio: 16/10;

  /* keeps heights aligned */

  object-fit: cover;

  display: block;

}



.brs-arrow {

  transition: opacity .2s ease;

}



.brs-arrow:hover {

  opacity: .7;

}



/* Optional: tighten text width on large screens for the same feel */

.bg-removal-section .container>p {

  max-width: 780px;

  margin-left: auto;

  margin-right: auto;

}



/* Make images a little taller on large screens for presence */

@media (min-width: 992px) {

  .brs-img {

    aspect-ratio: 16/9;

  }

}



.mission-section {

  position: relative;

  background-color: #1f2529;

  /* dark overlay base */

  overflow: hidden;

}



.mission-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background: url("/images/bg/gears-pattern.png") center/cover no-repeat;

  opacity: 0.15;

  /* faint background gears */

}



.mission-section .container {

  position: relative;

  /* keeps text above overlay */

  z-index: 1;

  max-width: 900px;

}



.mission-section h2 {

  font-family: "Prata", serif;

  font-size: 2.2rem;

  font-weight: 500;

}



.mission-section p {

  font-family: "Commissioner", sans-serif;

  font-size: 1.05rem;

  line-height: 1.7;

}



.feature-card {

  background: #f8f9fa;

  border-radius: 8px;

  transition: all 0.3s ease;

}



.feature-card h5 {

  font-family: "Prata", serif;

}



.feature-card p {

  font-size: 14px;

  color: #555;

  font-family: "Commissioner", sans-serif;

  line-height: 22px;

}



.feature-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}



.icon-circle {

  width: 70px;

  height: 70px;

  margin: 0 auto;

  border-radius: 50%;

  background: #eafaf2;

  display: flex;

  align-items: center;

  justify-content: center;

}



.external-box {

  background: #16a085; /* teal green */

  border-radius: 8px;

  max-width: 900px;

  margin: 0 auto;

}



.external-box h5 {

  font-weight: 600;

  font-size: 20px;

}



.external-box p {

  font-size: 14px;

  line-height: 1.6;

}





/* ===== Before/After Core ===== */

.before-after-container-services{

  position:relative;

  overflow:hidden;

  cursor:ew-resize;

  user-select:none;

  -webkit-user-select:none;

  -webkit-tap-highlight-color:transparent;

  touch-action:none;

  /* border-radius:10px; */

}

.before-after-container-services img{

  display:block;

  width:100%;

  height:auto;

  position:absolute;

  top:0; left:0;

  object-fit:cover;

  pointer-events:none;

  -webkit-user-drag:none;

}

.before-after-container-services .before{ position:relative; z-index:1; }

.before-after-container-services .after{

  clip-path:inset(0 50% 0 0); /* default 50/50 */

  z-index:2;

}



/* Divider bar */

.before-after-container-services .bar{

  position:absolute; inset:0 auto 0 50%;

  width:2px; background:#fff; z-index:3;

  transform:translateX(-50%);

  box-shadow:0 0 0 1px rgba(0,0,0,.12);

  pointer-events:none;

}



/* Handle: white circle with arrows */

.before-after-container-services .handle{

  position:absolute; top:50%; left:50%;

  transform:translate(-50%,-50%);

  width:48px; height:48px; border-radius:50%;

  background:#fff; 

  z-index:4;

  display:flex; align-items:center; justify-content:center;

  box-shadow:0 6px 20px rgba(0,0,0,.25);

}

.before-after-container-services .handle::before,

.before-after-container-services .handle::after{

  content:"";

  display:block;

  width:0; height:0;

  border-style:solid;

}

.before-after-container-services .handle::before{

  border-width:8px 6px 8px 0;

  border-color:transparent #111 transparent transparent;

  margin-right:4px;

}

.before-after-container-services .handle::after{

  border-width:8px 0 8px 6px;

  border-color:transparent transparent transparent #111;

  margin-left:4px;

}



/* Expand button (light style for inline and modal) */

.before-after-container-services .open-modal-btn{

  position:absolute;

  right:0px; 

  bottom:0px;

  padding:6px;

  background:rgba(255,255,255,.92);

  border:1px solid rgba(0,0,0,.08);

  border-radius:0px;

  line-height:0;

  z-index:5;

  box-shadow:0 6px 14px rgba(0,0,0,.12);

  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease;

}

.before-after-container-services .open-modal-btn svg{

  width:18px;

  height:18px;

  stroke:#6b7280;

}

.before-after-container-services .open-modal-btn:hover{

  background:#fff;

  border-color:rgba(0,0,0,.15);

  box-shadow:0 8px 18px rgba(0,0,0,.18);

}

.before-after-container-services .open-modal-btn:active{

  transform:translateY(1px);

}



.services-section a,

.services-section a:link,

.services-section a:visited {

  color: #000 !important;

  text-decoration: none; /* remove underline if you want */

}



.services-section a:hover,

.services-section a:focus {

  color: #111 !important;   /* slightly darker on hover */

  text-decoration: underline; /* optional hover effect */

}



.list-unstyled a{

  color: #fff !important;

  text-decoration: none;

}