/*
 Theme Name:   Hello Elementor Child
 Theme URI:    http://example.com/hello-elementor-child
 Description:  Hello Elementor Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Importing the parent theme style.css */
@import url("../hello-elementor/style.css");

:root {
  --color1: #b99c63;
  --color2: #ff1c25;
  --color3: #000;
  --color4: #fff;
}

/* Custom CSS can go here */

@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1240px !important;
  }
}

p {
  opacity: 0.8;
}

label {
  width: 100%;
}

/* home banner css start */

.hero-banner .carousel-caption {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: inherit;
  left: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: #fff;
  text-align: left !important;
  transform: translate(0%, -50%);
}

.hero-banner .carousel-item:before {
  content: "";
  background: transparent linear-gradient(180deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.hero-banner .carousel-caption h3 {
  font: normal normal 500 52px/62px Inter;
  letter-spacing: 0px;
  color: #ffffff;
}

.hero-banner .carousel-caption .description {
  font: normal normal medium 15px/23px Inter;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 0.8;
}

.arrow-control-slider {
  display: flex;
  gap: 20px;
}

.arrow-control-slider span {
  background-color: transparent;
  padding: 5px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  margin-right: 5px;
}

.arrow-control-slider span:hover {
  background-color: transparent;
}

.arrow-control-slider .control-prev {
  border-radius: 5px;
}

.arrow-control-slider .control-next {
  border-radius: 5px;
}

.arrow-control-bottom {
  display: flex;
  position: absolute;
  bottom: 50px;
  left: 0;
  z-index: 9;
  width: 100%;
}

.carousel-indicators {
    justify-content: end !important;
    padding: 0!important;
    bottom: 50px !important;
    margin-right: 10%!important;
    margin-bottom: 1rem!important;
    margin-left: 10%!important;
}
.carousel-indicators [data-bs-target] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 10px !important;
    border: 0 !important;
  }


.hero-banner .indicators-num {
  display: flex;
  position: absolute;
  bottom: 5%;
  left: 0;
  z-index: 9;
  width: 100%;
}

.hero-banner .carousel-indicator {
  display: flex;
}

.hero-banner .carousel-indicator span {
  color: #fff;
}

.hero-banner .carousel-indicator button {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0;
  border: 0 !important;
  margin-right: 8px;
}

.hero-banner .carousel-indicator button .budge {
  background: #eee !important;
  opacity: 1 !important;
  padding: 3px 15px 3px 15px !important;
  border: 0 !important;
  border-radius: 0;
  width: 30px !important;
  height: 10px !important;
  display: inline-block;
}

.hero-banner .carousel-indicator button.active .budge {
  background: var(--color1) !important;
}

.hero-banner .carousel-indicator button .number {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.hero-banner .carousel-indicator button.active .number {
  color: var(--color1) !important;
}

a.elementor-button.theme-btn-custom {
  display: flex;
  justify-content: start;
  align-items: center;
  width: max-content;
  gap: 0;
  border-radius: 45px;
  padding: 0;
  position: relative;
  transition: all 0.4s ease;
  color: #fff;
  border: 1px solid #fff !important;
}

a.elementor-button.theme-btn-custom:hover {
  color: #b99c63;
}

a.elementor-button.theme-btn-custom .elementor-button-icon {
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 45px;
  padding: 9px;
}

a.elementor-button.theme-btn-custom:before {
  content: "";
  background-color: #ffffff;
  width: 45px;
  height: 100%;
  position: absolute;
  z-index: -1;
  border-radius: 45px;
  transition: all 0.4s ease;
}

a.elementor-button.theme-btn-custom:hover:before {
  content: "";
  width: 100%;
}

a.elementor-button.theme-btn-custom span.text {
  padding: 10px 18px 10px 18px;
}

.theme-btn-custom-dark {
  display: flex;
  justify-content: start;
  align-items: center;
  width: max-content;
  gap: 0;
  border-radius: 45px;
  padding: 0;
  position: relative;
  transition: all 0.4s ease;
  color: #b99c63;
  border: 1px solid #b99c63 !important;
  display: flex;
  position: relative;
  align-items: center;
  z-index: 0;
  width: max-content;
}

.theme-btn-custom-dark:hover {
  color: #b99c63;
}

.theme-btn-custom-dark .elementor-button-icon {
  width: 45px;
  height: 45px;
  background: #b99c63;
  border-radius: 45px;
  padding: 9px;
}

.theme-btn-custom-dark:before {
  content: "";
  background-color: #b99c63;
  width: 45px;
  height: 100%;
  position: absolute;
  z-index: -1;
  border-radius: 45px;
  transition: all 0.4s ease;
}

.theme-btn-custom-dark:hover:before {
  content: "";
  width: 100%;
}

.theme-btn-custom-dark span.text {
  padding: 10px 18px 10px 18px;
}

/* home banner css end */

.sol-icon .elementor-icon:hover svg path {
  fill: #ffffff !important;
}

/* pagination style one css start  */
.pagination-style-one {
  display: inline-flex;
  justify-content: center;
}

.pagination-style-one .page-numbers.current {
  font-weight: 700 !important;
  color: var(--color1) !important;
}

.pagination-style-one .page-numbers {
  font: normal normal 700 18px / 22px Inter !important;
  letter-spacing: 0px;
  color: #292c2d !important;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 2px solid #ececec;
  border-radius: 8px;
  text-decoration: none !important;
  width: 45px;
  height: 45px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
}

/* pagination style one css start  */

/* Blog css start */

.blog-post-card {
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.blog-image-wrapper {
  position: relative;
}

.blog-image-wrapper img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

.blog-category-badge {
  border: 1px solid #cec5bb;
  border-radius: 15px;
  font: normal normal 500 15px/21px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
  padding: 5px 12px;
  text-transform: capitalize;
}

.postdate {
  font: normal normal 500 15px / 21px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

.blog-content {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.blog-content h2 {
  font-size: 34px !important;
  color: #0073aa;
  margin: 0;
}

.blog-content h2 a {
  color: #0073aa;
  text-decoration: none;
}

.blog-content p {
  margin-top: 10px;
}

.read-more-btn {
  display: inline-block;
  background: var(--color2);
  font-size: 16px !important;
  color: #fff !important;
  padding: 12px 30px !important;
  border-radius: 10px !important;
  margin-top: 15px;
  font-weight: 500;
  text-decoration: none;
}

.read-more-btn:hover {
  background: #292c2d !important;
  color: #fff !important;
}

h3.cat-color {
  font: normal normal 500 21px / 32px Inter;
  letter-spacing: 0px;
  color: #000000;
  padding-bottom: 15px !important;
  border-bottom: 1px solid #cec5bb;
  margin-bottom: 25px !important;
  margin-top: 0;
}

.sidebar-box h3 {
  margin-bottom: 15px;
}

.sidebar-box {
  padding: 30px;
  background: #e7e5df 0% 0% no-repeat padding-box;
  border-radius: 20px;
}

.sidebar-box h3 {
  margin-bottom: 15px;
}

.category-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.category-list li {
  margin-bottom: 8px;
}

.category-list a {
  color: #292c2d;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px !important;
  width: 100%;
  display: block;
}

.category-list a span {
  float: right;
}

.category-list a:hover {
  color: #292c2d;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px !important;
}

.article-detail {
  padding: 0px 0 70px 0;
  background-color: #f6f2ee;
}

.prevnext-post {
  font-size: 14px;
}

.recent-post {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center !important;
}

.recent-post img {
  width: 70px;
  display: block;
  border-radius: 10px;
}

.blog-content-area h3,
.blog-content-area h4,
.blog-content-area h5,
.blog-content-area h6,
.blog-content-area h2,
.blog-content-area h1 {
  font: normal normal 500 38px / 50px Inter;
  letter-spacing: 0px;
  color: #000000;
  text-transform: capitalize;
}

.blog-content-area p,
.blog-content-area li {
  font: normal normal 500 15px/24px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

.blog-content-area ul {
  padding-left: 15px;
  padding-bottom: 15px;
}

.recent-post a,
.recent-post a:hover {
  text-decoration: none;
  margin-bottom: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font: normal normal 500 17px / 23px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.recent-date {
  font: normal normal 500 15px / 21px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.4;
  margin-bottom: 3px;
}

/* blog css end */

/* testimonials css start */

/* testimonials box one  css start */

.testimonials-box-one {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 2px solid #ececec;
  border-radius: 10px 150px 10px 10px;
  padding: 0px 50px 50px 50px;
  text-align: center;
  margin-top: 55px;
  position: relative;
}

.testimonials-box-one:before {
  content: "";
  position: absolute;
  bottom: -1px;
  width: calc(100% + 4px);
  height: 10px;
  background: var(--color1);
  left: -2px;
  border-radius: 0px 0px 10px 10px;
  transition: all 0.4s ease;
}

.testimonials-box-one:hover:before {
  content: "";
  background: var(--color2);
}

.testimonials-box-one .img-wrap {
  position: relative;
  margin-top: -50px;
}

.testimonials-box-one .img-wrap img {
  width: 100px !important;
  margin: 0px auto;
  border-radius: 50%;
}

.testimonials-box-one .title,
.testimonials-box-one-popup .title {
  font: normal normal normal 21px / 25px Inter;
  letter-spacing: 0px;
  color: var(--color1);
  margin-bottom: 5px;
  margin-top: 20px;
}

.testimonials-box-one .quate-img img {
  width: 25px;
  margin: 0 auto;
}

.testimonials-box-one .rating-area {
  color: #ffc107;
  font-size: 20px;
  margin-top: 24px;
}

.testimonials-box-one .content-box {
  height: 130px;
}

.testimonials-box-one .content-box .description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.read-more-link {
  text-decoration: underline !important;
  font: normal normal 700 15px / 28px Inter;
  letter-spacing: 0px;
  color: #292c2d !important;
}

/* testimonials box one  css end */

/* testimonials box two  css start */
.testimonials-box-two {
  background: #f9f9f9 0% 0% no-repeat padding-box;
  box-shadow: 2px 5px 10px #d9d6cd29;
  border-radius: 20px;
  padding: 25px;
}

.testimonials-box-two .testimonials-wrap,
.testimonials-box-two-slider .testimonials-wrap {
  display: flex;
  align-items: center;
  justify-content: start;
}

.testimonials-box-two .content-box {
  font: normal normal 500 16px / 24px Inter;
  letter-spacing: 0px;
  color: #3a3a3a;
  margin-bottom: 30px;
}

.testimonials-box-two .content-box strong {
  color: #bfa74b;
  font-weight: 500 !important;
  font-style: italic;
}

.testimonials-box-two .testimonials-wrap .img-wrap img,
.testimonials-box-two-slider .testimonials-wrap .img-wrap img {
  width: 70px !important;
  min-width: 70px !important;
  height: 70px;
  border-radius: 50%;
  margin-right: 10px;
}

.testimonials-box-two .testimonials-wrap .title,
.testimonials-box-two-slider .testimonials-wrap .title {
  font: normal normal 600 16px / 24px Inter;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
}

.testimonials-box-two .testimonials-wrap {
  color: #ffc107;
  font-size: 16px;
}

/* testimonials css start */

/* testimonials popup css start */
.model-testimonial .img-wrap img {
  width: 130px !important;
  margin: 0px auto;
  border-radius: 50%;
}

.model-testimonial button.btn-close {
  position: absolute;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  right: -50px;
  top: 5px;
  z-index: 9;
  opacity: 1;
  filter: invert(1);
  padding: 0;
  width: 20px;
  box-shadow: none !important;
  outline: none;
}

@media only screen and (max-width: 991px) {
  .model-testimonial button.btn-close {
    right: 15px;
    top: 15px;
    filter: none;
  }
}

.model-testimonial button.btn-close:hover,
.model-testimonial button.btn-close:focus,
.model-testimonial button.btn-close:focus-visible {
  filter: brightness(0) saturate(100%) invert(24%) sepia(63%) saturate(7327%) hue-rotate(348deg) brightness(102%) contrast(103%);
}

.model-testimonial .modal-content {
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 20px;
  padding: 40px;
}

.model-testimonial .testimonials-wrap {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 15px;
}

.model-testimonial .testimonials-wrap .img-wrap {
  width: 80px;
  margin-right: 10px;
}

.model-testimonial .testimonials-wrap .img-wrap img {
  border-radius: 50%;
}

.model-testimonial .testimonials-wrap .title {
  font: normal normal 600 16px / 24px Inter;
  letter-spacing: 0px;
  color: #000;
  margin: 0;
}

.model-testimonial .rating {
  color: #ffc107;
  font-size: 16px;
}

.modal-backdrop {
  background-color: #000 !important;
  opacity: 0.8 !important;
}

/* testimonials popup css end */

/* slick dots start  */

.arrowbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0%;
  z-index: 99;
  color: #fff;
  cursor: pointer;
}

.arrowbtn:hover {
  background: transparent;
  color: #fff;
}

.arrowbtn img {
  width: 20px;
}

.left-btn {
  left: -10px;
}

.right-btn {
  right: -10px;
}

ul.slick-dots {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  list-style: none;
}

ul.slick-dots li {
  margin: 0 5px;
}

ul.slick-dots li button {
  padding: 5px;
  font-size: 0;
  border-radius: 50% !important;
  width: 10px;
  height: 10px !important;
  background-color: #cfcfcf;
  border-color: #cfcfcf;
}

ul.slick-dots li.slick-active button,
ul.slick-dots li button:hover {
  background-color: var(--color1) !important;
  border-color: var(--color1) !important;
}

/* slick dots end  */

/* download pdf start */

.download-box .img-box {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #bec0c5;
  border-radius: 20px;
  overflow: hidden;
}

.download-box .img-box img {
  transition: 0.3s ease all;
}

.download-box:hover .img-box img {
  scale: 1.1;
}

.download-box .text-box h4 {
  text-align: left;
  font: normal normal 500 20px/26px Inter;
  letter-spacing: 0px;
  color: var(--color1);
  opacity: 1;
}

.download-box .text-box .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.download-box .text-box .elementor-button img {
  filter: brightness(10);
}

.download-box .text-box .elementor-button:hover img {
  filter: inherit;
}

/* download pdf end */

/* other box one css start */

.other-box-one .img-wrap {
  position: relative;
  overflow: hidden;
}

.other-box-one .img-wrap img {
  transition: all 0.4s ease;
}

.other-box-one .img-wrap .btn-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.4s ease;
}

.other-box-one:hover .img-wrap .btn-center {
  opacity: 1;
}

.other-box-one:hover .img-wrap img {
  transform: scale(1.05);
}

.other-box-one .content-box .date {
  font: normal normal 600 13px / 18px Inter;
  letter-spacing: 1.6px;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.other-box-one .content-box .title {
  font: normal normal 500 20px/28px Inter;
  letter-spacing: 0px;
  color: var(--color1);
  margin-bottom: 10px;
}

/* other box one css start */

/* filter css start */
ul#project-filter-list {
  display: flex;
  justify-content: center;
  margin-bottom: 40px !important;
  padding-left: 0;
  list-style: none;
  flex-wrap: wrap;
}

ul#project-filter-list li {
  margin: 0 10px;
}

ul#project-filter-list li .cats {
  font: normal normal bold 18px / 30px Inter;
  letter-spacing: 0px;
  color: #292c2d;
  padding: 5px 15px;
  text-decoration: none;
}

ul#project-filter-list li .cats.active {
  color: var(--color1);
}

/* filter css end */

/* portfolio css start  */

.portfolio-box {
  position: relative;
  z-index: 0;
}

.portfolio-box:before {
  content: "";
  background: transparent linear-gradient(180deg, #ffffff 0%, #e3e3e3 43%, #575757 60%, #000000 100%) 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
  border-radius: 22px 155px 22px 22px;
  opacity: 0.75;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 0;
}

.portfolio-box .portfolio-wrap {
  transition: all 0.4s ease;
  border-radius: 22px 150px 22px 22px;
  transform: translateY(53px);
}

.portfolio-box .portfolio-effect {
  overflow: hidden;
}

.portfolio-box .portfolio-img img {
  border-radius: 22px 150px 22px 22px;
}

.portfolio-box:hover .portfolio-wrap {
  transition: all 0.4s ease;
  transform: translateY(0px);
}

.portfolio-info {
  position: absolute;
  bottom: 0;
  padding: 20px;
  color: #fff;
}

.portfolio-info .title {
  font: normal normal normal 28px / 35px Inter;
  letter-spacing: 0px;
  color: #ffffff;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
}

.portfolio-info p {
  font: normal normal normal 14px/21px Inter;
  letter-spacing: 0px;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-normal {
  display: flex !important;
  align-items: center !important;
  font: normal normal 700 16px / 20px Inter !important;
  letter-spacing: 0px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.4s ease;
}

.btn-normal svg {
  fill: #fff;
  margin-left: 10px;
  transition: all 0.4s ease;
  height: 14px !important;
}

.btn-normal:hover {
  color: var(--color1) !important;
}

.btn-normal:hover svg {
  fill: var(--color1) !important;
  transform: translateX(10px);
}

/* portfolio css end  */

.other-box-two {
  background: #fafafa 0% 0% no-repeat padding-box;
  border-radius: 20px;
}

.other-box-two .text-box {
  padding: 30px;
}

.other-box-two h4 {
  text-align: left;
  font: normal normal 600 24px / 34px Inter;
  letter-spacing: 0px;
  color: #101010;
  opacity: 1;
}

.other-box-two .videos-box video {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  min-height: 240px;
  object-fit: cover;
}

button.close-top-right,
button.close-top-right:hover,
button.close-top-right:focus,
button.close-top-right:focus-visible {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: transparent;
  border: 0;
  filter: invert(1);
  opacity: 1;
  border-radius: 0;
  box-shadow: none !important;
  outline: none;
  z-index: 9999;
}

.animated-btn button {
  border: 1px solid #000000 !important;
  font: normal normal 500 15px / 24px Inter !important;
  letter-spacing: 0px;
  color: #000000 !important;
  padding: 10px 24px !important;
  border-radius: 30px;
  text-transform: capitalize !important;
}

.animated-btn button:hover {
  border: 1px solid #b99c63 !important;
  background: #b99c63 !important;
  color: #fff !important;
}

.header-dark .header-icon:hover img {
  filter: invert(1);
}

/* ==============================
   APPLICATIONS SECTION
================================= */

.applications-section {
  background: #f6f2ee;
  padding: 65px 45px 60px;
  color: #000000;
}

/* Heading */

.applications-heading {
  padding-bottom: 65px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.applications-heading h2 span {
  color: #b99c63;
}

/* Accordion */

.applications-accordion {
  width: 100%;
}

/* Item */

.application-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Header */

.application-header {
  min-height: 79px;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #f6f2ee;
  overflow: hidden;
}

/* Number */

.application-number {
  font-size: 70px;
  line-height: 1;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  padding-left: 0;
  translate: 0 22px;
}

/* Active number */

.application-item.active .application-number {
  color: #b99c63;
  translate: 0 0;
}

/* Title */

.application-title {
  padding-left: 0;
  transition: all 0.3s ease;
  font: normal normal 500 28px / 36px Inter;
  letter-spacing: 0px;
  color: #000000;
  text-transform: capitalize;
}

.application-item.active .application-title {
  color: #b99c63;
}

/* Content */

.application-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;

  transition:
    grid-template-rows 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}

.application-item.active .application-content {
  margin-top: -50px;
}

.application-description {
  margin-top: 40px;
}

.application-content>.row {
  min-height: 0;
  overflow: hidden;
}

/* Open */

.application-item.active .application-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Content spacing */

.application-item.active .application-content>.row {
  padding-top: 0;
  padding-bottom: 55px;
}

/* Image */

.application-image {
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 15px;
}

.application-image img {
  width: 100%;
  height: 240px;
  display: block;
  object-fit: cover;

  transform: scale(1.02);
  transition: transform 0.8s ease;
}

.application-item.active .application-image img {
  transform: scale(1);
}

/* Description */
.application-description h3 {
  font: normal normal medium 28px/36px Inter;
  letter-spacing: 0px;
  color: #b99c63;
  text-transform: capitalize;
  margin: 0 0 14px;
}

.application-description p {
  font: normal normal 500 15px / 23px Inter !important;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

/* ==============================
   DESKTOP ALIGNMENT
================================= */

@media (min-width: 992px) {
  .application-header {
    grid-template-columns: 50% 50%;
  }

  .application-content .row {
    margin: 0;
  }

  .application-content .col-lg-6:first-child {
    padding-left: 0;
    padding-right: 45px;
  }

  .application-content .col-lg-6:last-child {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==============================
   TABLET
================================= */

@media (max-width: 991px) {
  .applications-section {
    padding: 50px 30px;
  }

  .applications-heading h2 {
    font-size: 38px;
  }

  .application-header {
    grid-template-columns: 35% 65%;
  }

  .application-number {
    font-size: 60px;
  }

  .application-title {
    font-size: 25px;
  }

  .application-description {
    padding: 30px 0 0;
  }

  .application-image {
    max-width: 100%;
  }
}

/* ==============================
   MOBILE
================================= */

@media (max-width: 767px) {
  .applications-section {
    padding: 40px 20px;
  }

  .applications-heading {
    padding-bottom: 35px;
  }

  .applications-heading h2 {
    font-size: 28px;

  }

  .application-header {
    min-height: 70px;
    grid-template-columns: 25% 75%;
  }

  .application-number {
    font-size: 48px;
  }

  .application-title {
    font-size: 21px;
  }

  .application-item.active .application-content>.row {
    padding-bottom: 35px;
  }

  .application-image img {
    height: 220px;
  }

  .application-description {
    padding-top: 25px;
  }

  .application-description h3 {
    font-size: 25px;
  }

  .application-description p {
    font-size: 15px;
  }
}

@media only screen and (max-width: 768px) {
  h3.cat-color {
    font-size: 18px !important;
  }

  .sidebar-box {
    padding: 10px;
  }

  .blog-content h2 {
    font-size: 24px !important;
  }

  .read-more-btn {
    font-size: 14px !important;
    padding: 8px 20px !important;
    border-radius: 7px !important;
  }

  .article-detail {
    padding: 0px 0 30px 0;
  }

  .blog-content-area h3,
  .blog-content-area h4,
  .blog-content-area h5,
  .blog-content-area h6,
  .blog-content-area h2,
  .blog-content-area h1 {
    font: normal normal 500 24px / 32px Inter;
  }

  /* banner responsive css  start */
  .hero-banner .carousel-caption h3 {
    font-size: 24px;
    line-height: 30px;
  }

  /* banner responsive css  end */

  .arrowbtn {
    width: 30px;
    height: 30px;
  }

  ul#project-filter-list li .cats {
    font-size: 16px;
    padding: 5px 2px;
  }

  .portfolio-info .title {
    font-size: 18px;
    line-height: 23px;
  }

  .other-box-two h4 {
    font-size: 18px;
    line-height: 24px;
  }
}

.bg-footer-linear {
  background: transparent linear-gradient(90deg, #b99c63 0%, #fee5b0 57%, #a3854d 100%) 0% 0% no-repeat padding-box;
}

.colortheme {
  filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(435%) hue-rotate(254deg) brightness(95%) contrast(89%);
}

.border-left-right {
  position: relative;
  z-index: 0;
}

.border-center:after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  width: 1px;
  height: 100%;
  background-color: #e1dfdc;
  z-index: -1;
}

.border-left-right:before {
  content: "";
  position: absolute;
  width: 68%;
  left: 16%;
  height: 100%;
  z-index: -1;
  border-left: 1px solid #e1dfdc;
  border-right: 1px solid #e1dfdc;
  margin: auto;
  background: transparent;
}

.heading-before:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  left: 0;
  top: 6px;
  background-color: #b99c63;
  border-radius: 5px;
}

.elementor-heading-title span {
  color: #b99c63;
}

.cnabout:hover .cn-effect {
  transition: all 1s ease !important;
}

.cnabout:hover .cn-effect {
  --e-transform-translateY: 0 !important;
  --e-transform-scale: 1 !important;
}

.btn-main .elementor-button {
  position: relative;
  z-index: 0;
}

.btn-main .elementor-button .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
}

.btn-main .elementor-button span.elementor-button-icon {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #b99c63;
  border-radius: 45px;
}

.btn-main .elementor-button .elementor-button-text {
  padding: 10px 18px 10px 18px;
}

.btn-main .elementor-button:before {
  content: "";
  background-color: #b99c63;
  width: 45px;
  height: 100%;
  left: 0;
  position: absolute;
  z-index: -1;
  border-radius: 45px;
  transition: all 0.4s ease;
}

.btn-main .elementor-button:hover:before {
  content: "";
  width: 100%;
}

.btn-main-white .elementor-button {
  position: relative;
  z-index: 0;
}

.btn-main-white .elementor-button .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
}

.btn-main-white .elementor-button span.elementor-button-icon {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 45px;
}

.btn-main-white .elementor-button .elementor-button-text {
  padding: 10px 18px 10px 18px;
}

.btn-main-white .elementor-button:before {
  content: "";
  background-color: #fff;
  width: 45px;
  height: 100%;
  left: 0;
  position: absolute;
  z-index: -1;
  border-radius: 45px;
  transition: all 0.4s ease;
}

.btn-main-white .elementor-button:hover:before {
  content: "";
  width: 100%;
}

.coresolution h2.elementor-heading-title {
  opacity: 0;
  transition: all 0.4s ease;
}

.coresolution:hover h2.elementor-heading-title {
 opacity: 1;
}
.coresolution .elementor-widget-text-editor {
  opacity: 0.8;
  transition: all 0.4s ease;
}

.coresolution .afterhover {
 opacity: 0;
}

.coresolution:hover h2.elementor-heading-title,  {
  opacity: 1;
  transition: all 0.4s ease;
}

.mar-heading {
    font: normal normal 500 100px / 100px Inter;
    letter-spacing: 0px;
    color: #F6F2EE;
}
.mar-heading span {
  color: #B99C63;
}

.coresolution:hover .afterhover {
 opacity: 1;
}

.coresolution:hover .elementor-widget-text-editor {
  opacity: 1;
  transition: all 0.4s ease;
}

.coresolution .elementor-button {
  position: relative;
}

.coresolution .elementor-button-icon {
  transition: all 0.4s ease;
}

.coresolution .elementor-button-text {
  transition: all 0.4s ease;
}

.coresolution:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000000 0% 0% no-repeat padding-box;
  opacity: 0;
  transition: all 0.4s ease;
  width: 100%;
  height: 100%;
}

.coresolution:hover:before {
  opacity: 0.7;
}

.coresolution .elementor-button-icon {
  width: 45px;
  height: 45px;
  padding: 10px;
  background: #b99c63;
  border-radius: 45px;
  margin-top: 5px;
  position: absolute;
  right: 0;
  opacity: 0;
  transition: all 0.4s ease;
}

.coresolution:hover .elementor-button-text {
  transform: translateX(-30px);
  color: #b99c63;
}

.coresolution:hover .elementor-button-icon {
  transform: translateX(30px);
  opacity: 1;
}

.supporting-solution .elementor-view-framed {
  opacity: 0;
  transition: all 0.4s ease;
}

.supporting-solution:hover .heading .elementor-heading-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: #b99c63 !important;
}

.supporting-solution:hover .heading-two .elementor-heading-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: #fff !important;
}

.supporting-solution:hover .elementor-view-framed {
  opacity: 1;
}
span.elementor-counter-number-suffix {
    font-size: 15px;
    margin-top: 6px;
}
.supporting-solution .imagebg {
  transition: all 1s ease;
}
.whatsapp .elementor-image-box-wrapper {
    display: flex;
    gap: 10px;
    align-items: center !important;
  }
  .whatsapp .elementor-image-box-wrapper h3.elementor-image-box-title {
    margin: 0;
}
.wpc-filters-main-wrap li.wpc-term-item input[type=checkbox], .wpc-filters-main-wrap li.wpc-term-item input[type=radio] {
  background-color: #fff;
}
.supporting-solution:hover h2.elementor-heading-title
{
    color: #b99c63 !important;
}
.supporting-solution:hover .imagebg {
  background-position: center right !important;
}

.testimonial-text .description {
  font: normal normal 500 42px / 58px Inter;
  letter-spacing: 0px;
  color: #000000;
}

.testimonial-text {
  padding-bottom: 30px;
  border-bottom: 1px solid #b99c63;
}

.testimonial-name {
  font: normal normal 500 18px / 30px Inter;
  letter-spacing: 0px;
  color: #000000;
}

.testimonial-meta {
  padding-top: 30px;
}

.testimonial-text .read-more {
  color: #b99c63;
  font-size: 24px;
  text-decoration: underline !important;
}

.testimonial-arrows {
  position: absolute;
  top: 15px;
  right: -80px;
}

.testimonial-arrows button {
  border: 0;
  background: transparent;
  border-radius: 0;
  width: 50px;
  padding: 0 8px;
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.testimonial-arrows button:focus,
.testimonial-arrows button:focus-visible,
.testimonial-arrows button:hover {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

img.quate-img {
  position: absolute;
  left: -180px;
  width: 110px;
  top: 10px;
}

.project  h3.card-title {
transition: all 0.4s ease;
}
.project  .number h2 {
transition: all 0.4s ease;
}

.project:hover  h3.card-title {
color: #B99C63;
}
.project:hover  .number h2 {
color: #B99C63;
}

.testimonial-counter {
  font: normal normal 500 18px / 23px Inter;
  letter-spacing: 0px;
  color: #000000;
  position: absolute;
  right: -80px;
  bottom: 5px;
}

.testimonial-counter .current-slide {
  color: #b99c63;
}

.testimonial-header h4 {
  font: normal normal 500 16px / 23px Inter;
  letter-spacing: 0px;
  color: #000000;
}

.testimonial-text-full {
  letter-spacing: 0px;
  color: #000000;
  font: normal normal 500 18px / 24px Inter;
}

section.portfolio-section {
  margin-top: -150px;
}

.portfolio-filters li a {
  font-family: Inter;
  font-size: 15px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #000;
  background: #f7f2ee;
  border: 1px solid #cec5bb;
  padding: 16px 30px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.3s ease;
}

.portfolio-filters li a {
  color: #000;
}

.portfolio-grid {
  padding-top: 100px !important;
}

.portfolio-grid {
  padding-top: 10px;
}

.portfolio-filters li.active a,
.portfolio-filters li:hover a {
  background: #b99c63;
  color: #fff;
}

.portfolio-filters li.active a,
.portfolio-filters li:hover a {
  background: #b99c63;
  color: #fff;
}

.portfolio-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}

.portfolio-card-link .card-image {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.portfolio-card-link .card-image img {
  transition: all 0.4s ease;
  height: 420px;
  border-radius: 20px;
  object-fit: cover;
}

/* .portfolio-card-link:hover .card-image img {
  transform: scaleX(1.04);
  transform-origin: right center;
  transition: transform 0.5s ease;
} */

.portfolio-card:hover .portfolio-card-link .card-image img {
  transform: scaleX(1.04);
  transform-origin: right center;
  transition: transform 0.5s ease;
}

.portfolio-grid {
  row-gap: 50px !important;
}

.portfolio-card .card-content {
  display: flex;
  gap: 50px;
  margin-top: 20px;
}

.cardwrap-firstwrp {
  display: flex;
  align-items: self-end;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1dfdc;
}

.portfolio-card .card-content .card-title {
  font: normal normal 500 21px / 30px Inter;
  letter-spacing: 0px;
  color: #000000;
  margin: 0;
}

.portfolio-card .card-content .card-location {
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

.portfolio-card .number h2 {
  font: italic normal normal 18px / 24px Fraunces !important;
  letter-spacing: 0px;
  color: #000000;
  margin: 0;
}

.portfolio-card-link .btn-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.4s ease;
}

/* .portfolio-card-link:hover .btn-center {
  opacity: 1;
} */
.portfolio-card:hover .btn-center {
  opacity: 1;
}
.portfolio-card:hover .card-title{
	color: #B99C63 !important;
}


.portfolio-card-link .btn-center .elementor-button {
  font-size: 24px;
  border-width: 1px 1px 1px 1px;
  border-radius: 50px 50px 50px 50px;
  background-color: #fff;
  border-color: var(--e-global-color-primary);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-card-link .btn-center .elementor-button img {
  width: 24px;
  height: auto !important;
}

.portfolio-card-link .btn-center .elementor-button svg path {
  fill: var(--e-global-color-primary) !important;
}

.portfolio-card-link .btn-center .elementor-button:hover svg path {
  fill: #fff !important;
}

.portfolio-card-link .btn-center .elementor-button:hover {
  background-color: #fff !important;
  border: 1px solid var(--e-global-color-primary);
  color: #fff !important;
}

.portfolio-card .btn-center .elementor-button {
  transition: all 0.3s ease;
}

.portfolio-card .btn-center .elementor-button:hover {
  background-color: #B99C63 !important;
}

.portfolio-card .btn-center .elementor-button:hover .elementor-button-icon img {
  filter: brightness(0) invert(1);
}

.portfolio-card  .portfolio-card-link .btn-center .elementor-button:hover{
	background-color: #B99C63 !important;
}

.top-sub-banner {
  background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/Element-1.png);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: top right;
  padding: 72px 0;
  background-color: #f6f2ee;
}

.top-sub-banner h2 {
  font: normal normal 500 75px / 85px Inter;
  letter-spacing: 0px;
  color: #000000;
}

.top-sub-banner p {
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #707070;
  background: #000;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 30px;
  opacity: 1;
}

.flex-wrp {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.flex-wrp .wrap {
  border: 1px solid #cec5bb;
  border-radius: 30px;
  font: normal normal 500 15px / 20px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
  padding: 5px 15px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.top-sub-banner p .dot {
  color: #b99c63;
  font-size: 20px;
  font-weight: 700;
}

.top-sub-banner p .current {
  font: normal normal 500 15px/24px Inter;
  letter-spacing: 0px;
  color: #f6f2ee;
}

.info-portfolio ul {
  list-style: none;
  padding-left: 0;
}

span.info-title {
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
  min-width: 115px !important;
  display: inline-flex;
  text-wrap: nowrap;
  white-space: nowrap;
}

.info-portfolio ul .info-text {
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #b99c63;
}

.portfolio-detail-one {
  padding: 70px 0;
}

.info-portfolio ul li {
  border-top: 1px solid #e1dfdc;
  padding: 10px 0;
  display: flex;
  align-items: center;
  min-height: 68px;
}

.info-portfolio ul li:last-child {
  border-bottom: 1px solid #e1dfdc;
}

.info-portfolio {
  margin-top: 40px;
}

li#tab-title-description {
    display: none !important';
}
.portfolio-content {
  font: normal normal 500 18px / 28px Inter;
  letter-spacing: 0px;
  color: #000000;
}

a.go-back {
  text-decoration: underline;
  font: normal normal 500 15px / 24px Inter;
  letter-spacing: 0px;
  color: #070707;
  text-transform: capitalize;
}

.go-back span i {
  transform: translateY(-5px) rotate(-45deg);
  margin-left: 5px;
}

.go-back:hover {
  color: #b99c63;
}

.project-gallery-wrapper {
  padding: 60px 0;
}

.project-gallery-wrapper .img-wrap {
  border-radius: 20px;
}
.project-gallery-wrapper .img-wrap img {
    border-radius: 20px;
}

.after-post {
  gap: 10px;
}

.prev-post {
  font: normal normal 500 15px / 22px Inter;
  letter-spacing: 0px;
  color: #070707;
  text-decoration: underline !important;
  text-transform: capitalize;
  margin-bottom: 8px;
}



input.wpcf7-form-control.wpcf7-text.walcf7-datepicker {
    background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/Date.png);
    background-position: 95% 53%;
    background-repeat: no-repeat;
    background-size: 16px;
}

.after-post img, .after-post a , .after-post .prev-post{
transition: all 0.4s ease;
}

.after-post:hover img {
  filter: none;
}
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
    padding: 2% 5px !important;
}
.after-post:hover a, .after-post:hover .prev-post{
  color: #B99C63 !important;
}


.blog-search-field-wrapper {
    position: relative;
}
input#blog-search {
    background: #F6F2EE 0% 0% no-repeat padding-box;
    border: 1px solid #CEC5BB;
    border-radius: 10px;
        padding: 12px 10px;
}
button.blog-search-button, button.blog-search-button:hover {
    position: absolute!important;
    top: 7px!important;
    right: 10px!important;
    background: #000!important;
    border-radius: 5px!important;
    width: 35px!important;
    height: 35px!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-color: #000!important;
    color: #fff!important;
    font-weight: bold !important;
}
.dgwt-wcas-suggestions-wrapp {
  z-index: 999999999999999999 !important;
}

.cnt-comman {
  position: relative;
}

.cnt-comman:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  background-color: #e1dfdc73;
  height: 70%;
}


.cnt-comman:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  background-color: #e1dfdc73;
  height: 70%;
}

.after-post .title {
  font: normal normal 500 24px / 36px Inter;
  letter-spacing: 0px;
  color: #000000;
}

.after-post a img {
  width: 24px;
  filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(0%) hue-rotate(205deg) brightness(103%) contrast(103%);
}

.divider {
  width: 100%;
  height: 1px;
  background: #e1dfdc;
  margin-bottom: 50px;
}

.numner-process h2.elementor-heading-title {
  background: transparent linear-gradient(180deg, #e0be7a 0%, #b99c63 100%) 0% 0% no-repeat padding-box;
  border: 1px solid #b99c63;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: auto;
}

.process-item {
  position: relative;
  z-index: 0;
}

.process-item:after {
  content: "";
  position: absolute;
  width: 60%;
  height: 1px;
  background: #b99c63;
  top: 45px;
  left: 0;
  z-index: -1;
  right: auto;
}

.process-item:first-child:after {
  display: none;
}

.process-item:before {
  content: "";
  position: absolute;
  width: 60%;
  height: 1px;
  background: #b99c63;
  top: 45px;
  left: auto;
  z-index: -1;
  right: 0;
}

.process-item:last-child:before {
  display: none;
}

.hfe-nav-menu li.menu-item {
  overflow: hidden;
}

/* .hfe-nav-menu li.menu-item:hover a {
  animation: iconEnter 0.4s ease 0.15s forwards;
}
@keyframes iconEnter {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }

  25% {
    transform: translateY(-25px);
    opacity: 0;
  }

  50% {
    transform: translateY(25px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
} */

input:focus-visible,
select:focus-visible {
  box-shadow: none;
  outline: none !important;
  box-shadow: none !important;
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon {
    padding: 0 !important;
}

.services-grid {
  padding: 70px 0 30px 0;
}
.services-grid .portfolio-card .card-title {
  transition: all 0.4s ease;
}

.services-grid .portfolio-card:hover .card-title {
  color: #B99C63;
}

form.services-filter-form {
  padding-bottom: 70px;
  border-top: 1px solid #e1dfdc;
  padding-top: 30px;
}

section.services-section {
  margin-top: -160px;
}

a.services-clear-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

a.services-clear-filter img {
  width: 17px;
}

form.services-filter-form {
  padding-bottom: 70px;
}

a.services-clear-filter {
  font: normal normal 600 15px / 17px Inter;
  letter-spacing: 0px;
  color: #000000;
}

form.services-filter-form input,
form.services-filter-form select {
  background-color: #f6f2ee !important;
  border: 1px solid #cec5bb !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
}

.top-sub-banner.bg-none {
  padding: 0 !important;
  background: #fff !important;
  position: relative;
  color: #fff;
}

.brd.brd-services {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  z-index: 1;
}

.brd-service h2 {
  color: #f6f2ee !important;
}

.top-sub-banner .brd.brd-service p {
  background: #ffffff !important;
}

.top-sub-banner .brd.brd-service .current {
  font: normal normal 500 15px / 24px Inter;
  letter-spacing: 0px;
  color: #000000 !important;
}

.about-system-subtitle {
  position: relative;
}

.about-system-subtitle h3 {
  font-family: "Fraunces";
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: #000000;
  padding-left: 10px;
}

.about-system-description {
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #000000;
  opacity: 0.8;
}

section.about-system-section {
  background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/Element-3.png);
  background-repeat: no-repeat;
  background-position: 100% 50px;
  background-size: 340px;
}

.about-system-title,
.page-heading {
  font: normal normal 500 42px / 52px Inter;
  letter-spacing: 0px;
  color: #000;
}

/* ==============================
   INVISIBLE GRILLE SLIDER
============================== */

.wire-types-section {
  position: relative;
  overflow: hidden;
  padding: 70px 0 70px;
  background-color: #000;
  color: #fff;
  background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/Background-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.wire-heading {
  margin-bottom: 50px;
}

.wire-heading h2 {
  color: #f6f2ee;
}

.wire-heading h2 span,
.page-heading span {
  color: #b99c63;
}

/* Slider Wrapper */

.wire-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
}

/* Slider */

.wire-slider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  padding: 20px 0 30px;
}

/* Slide */

.wire-slide {
  flex: 0 0 31%;
  transition:
    transform 0.55s ease,
    opacity 0.55s ease,
    width 0.55s ease;
  opacity: 0.75;
  transform: scale(0.88);
}

/* Active Slide */

.slick-current .wire-slide {
  flex: 0 0 38%;
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Card */

.wire-card {
  position: relative;
  min-height: 415px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 17px;
  background: rgba(28, 26, 25, 0.72);
  overflow: hidden;
  transition: all 0.55s ease;
}

.slick-current .wire-slide .wire-card {
  min-height: 560px;
  border-color: #b99a5c;

  background:
    radial-gradient(circle at 50% 100%,
      rgba(196, 153, 73, 0.45),
      transparent 65%),
    rgba(45, 40, 33, 0.85);

  box-shadow:
    0 0 35px rgba(190, 145, 65, 0.12),
    inset 0 0 35px rgba(190, 145, 65, 0.08);
}

/* Image */

.wire-image {
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wire-slide:not(.active) .wire-image {
  height: 240px;
}

.wire-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Content */

.wire-content {
  text-align: center;
  padding: 15px;
}

.wire-content h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 400;
}

.slick-current .wire-slide .wire-content h3 {
  font: normal normal 500 28px / 36px Inter;
  letter-spacing: 0px;
  color: #b99c63;
  text-transform: capitalize;
}

.wire-content p {
  max-width: 330px;
  margin: 0 auto;
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #f6f2ee;
  opacity: 0.8;
}

/* Details */

.wire-details {
  max-width: 305px;
  display: none;
  margin: 20px auto 0;
}

.slick-current .wire-details {
  display: block;
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
  border-bottom: 1px solid #e1dfdc;
  text-align: left;
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #f6f2ee;
  opacity: 0.8;
}

.detail-row strong {
  font: normal normal 500 15px / 23px Inter;
  letter-spacing: 0px;
  color: #b99c63;
}

.detail-row:last-child {
  border: 0;
}

/* Arrows */

.wire-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;

  width: 55px;
  height: 55px;

  border: 0;
  background: transparent;

  color: #c0a05f;
  font-size: 38px;
  line-height: 1;

  cursor: pointer;
  transform: translateY(-50%);

  transition: all 0.3s ease;
}

.wire-arrow:hover {
  color: #fff;
  transform: translateY(-50%) scale(1.15);
}

.wire-prev {
  left: -65px;
}

.wire-next {
  right: -65px;
}

.wire-slider {
  padding: 0 50px;
}

/* ==============================
   TABLET
============================== */

@media (max-width: 1100px) {
  .wire-prev {
    left: 0;
  }

  .wire-next {
    right: 0;
  }

  .wire-slide {
    flex: 0 0 32%;
  }

  .wire-slide.active {
    flex: 0 0 40%;
  }
}

/* ==============================
   MOBILE
============================== */

@media (max-width: 767px) {
  .wire-types-section {
    padding: 55px 15px 70px;
  }

  .wire-heading {
    margin-bottom: 25px;
  }

  .wire-heading h2 {
    font-size: 28px;
  }

  .wire-slider {
    gap: 0;
    padding: 10px 30px 30px;
  }

  .wire-slide {
    display: none;
  }

  .wire-slide.active {
    display: block;
    flex: 0 0 100%;
    transform: scale(1);
  }

  .wire-card,
  .slick-current .wire-slide .wire-card {
    min-height: 500px;
  }

  .wire-image,
  .wire-slide:not(.active) .wire-image {
    height: 260px;
  }

  .wire-content h3 {
    font-size: 25px;
  }

  .wire-content p {
    font-size: 15px;
  }

  .wire-arrow {
    width: 40px;
    height: 40px;
    font-size: 30px;
  }

  .wire-prev {
    left: -3px;
  }

  .wire-next {
    right: -3px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-text .description {
    font: normal normal 500 18px / 26px Inter;
    letter-spacing: 0px;
    color: #000000;
  }

  .testimonial-text .read-more {
    font-size: 16px;
  }

  img.quate-img {
    position: absolute;
    left: -55px;
    width: 40px;
    top: 5px;
  }

  .testimonial-arrows button {
    width: 36px;
  }

  .testimonial-arrows {
    position: absolute;
    top: 0px;
    right: -65px;
  }

  .testimonial-counter {
    font: normal normal 500 12px / 15px Inter;
    letter-spacing: 0px;
    color: #000000;
    position: absolute;
    right: -50px;
    bottom: 0px;
  }

  .testimonial-name {
    font: normal normal 500 15px / 22px Inter;
    letter-spacing: 0px;
    color: #000000;
  }

  section.portfolio-section {
    margin-top: 0 !important;
  }

  .cnt-comman:before {
    display: none;
  }

  .cnt-comman:after {
    display: none;
  }

  .top-sub-banner h2 {
    font: normal normal 500 32px / 42px Inter;
    letter-spacing: 0px;
    color: #000000;
  }

  .portfolio-grid {
    padding-top: 20px !important;
  }

  .elementor-element.header-icon {
    width: 35px;
    height: 35px;
    padding: 4px;
    display: flex;
    align-items: center;
  }

  .process-item:after {
    display: none;
  }

  .process-item:before {
    display: none;
  }
}

/* =========================================================
   WIRE SPACING SECTION
========================================================= */

.wire-spacing-wrapper {
  --ws-yellow: #b99c63;
  --ws-white: #f6f2ee;

  position: relative;
  width: 100%;
  padding: 100px 0;
  background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/Background-2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--ws-white);
  font-family: "Inter", sans-serif;
  overflow: hidden;
}

/* =========================================================
   SLIDER
========================================================= */

.wire-spacing-wrapper .wire-spacing-slider {
  position: relative;
  width: 100%;
}

.wire-spacing-wrapper .wire-spacing-slide {
  position: relative;
  /* min-height: 650px; */
  outline: none;
}

.wire-spacing-wrapper .wire-spacing-slide>.container-fluid {
  width: 100%;
  height: 100%;
}

.wire-spacing-wrapper .wire-spacing-slide .row {
  /* min-height: 650px; */
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.wire-spacing-wrapper .wire-spacing-content {
  width: 100%;
}

/* Main heading */

.wire-spacing-wrapper .wire-spacing-content h2 span {
  color: var(--ws-yellow);
}

/* =========================================================
   SPACING TITLE
========================================================= */

.wire-spacing-wrapper .wire-spacing-info h3 {
  margin: 0 0 12px;

  font-size: 25px;
  line-height: 1.25;

  font-weight: 500;

  color: var(--ws-yellow);
}

/* Intro */

.wire-spacing-wrapper .wire-spacing-intro {
  margin: 0 0 20px;

  font-size: 15px;
  line-height: 1.65;

  font-weight: 400;

  color: var(--ws-white);
  opacity: 0.8;
}

/* =========================================================
   DETAIL ROWS
========================================================= */

.wire-spacing-wrapper .wire-spacing-details {
  width: 100%;
  margin-top: 18px;
}

.wire-spacing-wrapper .wire-spacing-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 60px;

  border-top: 1px solid rgba(246, 242, 238, 0.18);

  font-size: 15px;
}

.wire-spacing-wrapper .wire-spacing-detail-row:last-child {
  border-bottom: 1px solid rgba(246, 242, 238, 0.18);
}

.wire-spacing-wrapper .wire-spacing-detail-row span {
  color: var(--ws-white);
  opacity: 0.8;
}

.wire-spacing-wrapper .wire-spacing-detail-row strong {
  font-weight: 400;
  color: var(--ws-yellow);

  text-align: right;
}

/* =========================================================
   NOTE
========================================================= */

.wire-spacing-wrapper .wire-spacing-note {
  margin: 17px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ws-white);
  opacity: 0.52;
}

/* =========================================================
   RIGHT IMAGE
========================================================= */

.wire-spacing-wrapper .wire-spacing-image {
  position: relative;
}

.wire-spacing-wrapper .wire-spacing-image img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* =========================================================
   MEASUREMENT
========================================================= */

.wire-spacing-wrapper .wire-spacing-measurement {
  position: absolute;

  top: 50%;
  left: 57%;

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

  display: flex;
  align-items: center;

  gap: 4px;

  z-index: 3;

  color: var(--ws-yellow);
}

.wire-spacing-wrapper .wire-spacing-measurement span {
  position: relative;

  display: block;

  width: 17px;
  height: 1px;

  background: var(--ws-yellow);
}

.wire-spacing-wrapper .wire-spacing-measurement span::before,
.wire-spacing-wrapper .wire-spacing-measurement span::after {
  content: "";

  position: absolute;

  top: -3px;

  width: 1px;
  height: 7px;

  background: var(--ws-yellow);
}

.wire-spacing-wrapper .wire-spacing-measurement span::before {
  left: 0;
}

.wire-spacing-wrapper .wire-spacing-measurement span::after {
  right: 0;
}

.wire-spacing-wrapper .wire-spacing-measurement em {
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.wire-spacing-wrapper .wire-spacing-controls {
  display: flex;
  align-items: center;
  z-index: 10;
}

/* Counter */

.wire-spacing-wrapper .wire-spacing-counter {
  display: flex;
  align-items: center;
  gap: 5px;

  min-width: 65px;

  font-size: 15px;
  line-height: 1;
}

.wire-spacing-wrapper .wire-spacing-current {
  color: var(--ws-yellow);
}

.wire-spacing-wrapper .wire-spacing-total,
.wire-spacing-wrapper .wire-spacing-counter b {
  color: var(--ws-white);
  opacity: 0.65;
}

.wire-spacing-wrapper .wire-spacing-counter b {
  font-weight: 400;
}

/* =========================================================
   ARROWS
========================================================= */

.wire-spacing-wrapper .wire-spacing-arrows {
  display: flex;
  align-items: center;

  margin-left: auto;
  margin-right: 30px;

  gap: 30px;
}

.wire-spacing-wrapper .wire-spacing-arrows button {
  position: relative;
  height: 25px;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
}

/* Arrow line */

.wire-spacing-wrapper .wire-spacing-arrows button img {
  width: 25px;
}

/* =========================================================
   DOTS
========================================================= */

.wire-spacing-wrapper .wire-spacing-dots {
  position: absolute;

  left: 0;
  bottom: -3px;

  width: 180px;
}

.wire-spacing-wrapper .wire-spacing-dots ul {
  display: flex;
  align-items: center;

  padding: 0;
  margin: 0;

  list-style: none;

  gap: 8px;
}

.wire-spacing-wrapper .wire-spacing-dots li {
  width: 28px;
  height: 1px;

  padding: 0;
  margin: 0;

  cursor: pointer;
}

.wire-spacing-wrapper .wire-spacing-dots button {
  display: block;

  width: 100%;
  height: 1px;

  padding: 0;

  border: 0;

  background: rgba(246, 242, 238, 0.25);

  font-size: 0;

  transition:
    background 0.35s ease,
    width 0.35s ease;
}

.wire-spacing-wrapper .wire-spacing-dots li.slick-active button {
  background: var(--ws-yellow);
}

/* =========================================================
   SLICK FADE
========================================================= */

.wire-spacing-wrapper .slick-slide {
  outline: none;
}

.wire-spacing-wrapper .slick-list {
  overflow: hidden;
}

.wire-spacing-wrapper .slick-track {
  display: flex;
}

.wire-spacing-wrapper .slick-slide>div {
  height: 100%;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .wire-spacing-wrapper {
    min-height: auto;
  }

  .wire-spacing-wrapper .wire-spacing-slide,
  .wire-spacing-wrapper .wire-spacing-slide .row {
    min-height: auto;
  }

  .wire-spacing-wrapper .wire-spacing-content {
    max-width: 650px;

    padding: 60px 40px 30px;
  }

  .wire-spacing-wrapper .wire-spacing-content h2 {
    margin-bottom: 40px;
  }

  .wire-spacing-wrapper .wire-spacing-image {
    height: auto;

    min-height: 430px;

    padding: 20px 60px 110px;
  }

  .wire-spacing-wrapper .wire-spacing-image img {
    max-width: 650px;
  }

  .wire-spacing-wrapper .wire-spacing-controls {
    left: 40px;
    bottom: 45px;

    width: calc(100% - 80px);
  }

  .wire-spacing-wrapper .wire-spacing-measurement {
    left: 50%;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .wire-spacing-wrapper {
    min-height: auto;
  }

  .wire-spacing-wrapper .wire-spacing-content {
    padding: 45px 22px 15px;
  }

  .wire-spacing-wrapper .wire-spacing-content h2 {
    margin-bottom: 32px;

    font-size: 30px;
    letter-spacing: -0.8px;
  }

  .wire-spacing-wrapper .wire-spacing-info h3 {
    font-size: 21px;
  }

  .wire-spacing-wrapper .wire-spacing-intro {
    font-size: 13px;
    line-height: 1.6;
  }

  .wire-spacing-wrapper .wire-spacing-detail-row {
    min-height: 53px;

    font-size: 12px;
  }

  .wire-spacing-wrapper .wire-spacing-note {
    font-size: 11px;
  }

  .wire-spacing-wrapper .wire-spacing-image {
    min-height: 300px;

    padding: 10px 15px 95px;
  }

  .wire-spacing-wrapper .wire-spacing-image img {
    width: 100%;
  }

  .wire-spacing-wrapper .wire-spacing-measurement {
    left: 50%;

    transform: translate(-50%, -50%) scale(0.8);
  }

  /* Bottom controls */

  .wire-spacing-wrapper .wire-spacing-controls {
    left: 22px;
    bottom: 30px;

    width: calc(100% - 44px);

    justify-content: space-between;
  }

  .wire-spacing-wrapper .wire-spacing-counter {
    min-width: 55px;
  }

  .wire-spacing-wrapper .wire-spacing-arrows {
    margin-left: 0;
    margin-right: 0;

    gap: 12px;
  }

  .wire-spacing-wrapper .wire-spacing-arrows button {
    width: 38px;
  }

  .wire-spacing-wrapper .wire-spacing-dots {
    position: absolute;

    left: 50%;
    bottom: -12px;

    transform: translateX(-50%);

    width: 130px;
  }

  .wire-spacing-wrapper .wire-spacing-dots ul {
    justify-content: center;
  }

  .wire-spacing-wrapper .wire-spacing-dots li {
    width: 22px;
  }
}

/* =========================================================
   INSTALLATION TYPE WRAPPER
========================================================= */

.installation-type-wrapper {
  --itw-gold: #b99c63;
  --itw-black: #050505;
  --itw-text: #0a0a0a;
  --itw-border: rgba(10, 10, 10, 0.12);

  width: 100%;
  background: #f6f2ee;

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

  padding: 78px 0;

  overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.installation-type-wrapper .container {
  max-width: 1260px;
}

/* =========================================================
   LEFT IMAGE
========================================================= */

.installation-type-wrapper__image {
  position: relative;

  width: 100%;
  height: 456px;

  overflow: hidden;

  border-radius: 13px;
}

/* .installation-type-wrapper__image {
  position: relative;
  overflow: hidden; 
  width: 100%;
  height: 100%;
} */

.installation-type-wrapper__image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
}

/* Jab nayi image aaye toh right se center aaye */
.slide-in-right {
  animation: slideInFromRight 0.5s forwards;
}

/* Jab purani image left ki taraf jaye */
.slide-out-left {
  animation: slideOutToLeft 0.5s forwards;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* =========================================================
   RIGHT CONTENT
========================================================= */

.installation-type-wrapper__content {
  padding-left: 55px;
}

/* =========================================================
   HEADING
========================================================= */

.installation-type-wrapper__heading {
  margin: 0 0 12px;

  font-size: 40px;
  line-height: 1.2;

  font-weight: 400;

  letter-spacing: -1.5px;

  color: var(--itw-text);
}

.installation-type-wrapper__heading span {
  color: var(--itw-gold);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.installation-type-wrapper__description {
  max-width: 550px;
  font-weight: 500;
  margin: 0 0 38px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--itw-text);
}

/* =========================================================
   ACCORDION
========================================================= */

.installation-type-wrapper__accordion {
  border: 0;
}

/* =========================================================
   ACCORDION ITEM
========================================================= */

.installation-type-wrapper__item {
  border-top: 1px solid var(--itw-border);
}

.installation-type-wrapper__item:last-child {
  border-bottom: 1px solid var(--itw-border);
}

/* =========================================================
   ACCORDION HEADER
========================================================= */
/* arrow animation start */
.installation-type-wrapper__header {
    position: relative;
}
.installation-type-wrapper__header .installation-type-wrapper__arrow {
    opacity: 0 !important;
    visibility: hidden !important;
}

.installation-type-wrapper__moving-arrow {
    position: absolute;
    right: 0;
    top: 60%;
    width: 22px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    opacity: 1;
    transform: translateY(-50%);
    transition: top 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.no-arrow-sec .installation-type-wrapper__moving-arrow{
	display: none !important
}
/* arrow animation  */

.installation-type-wrapper__header {
  position: relative;

  display: grid;

  grid-template-columns: 90px 1fr 30px;

  align-items: start;

  width: 100%;

  min-height: 68px;

  padding: 20px 0;

  cursor: pointer;

  transition:
    color 0.3s ease,
    padding 0.3s ease;
}

/* Number */

.installation-type-wrapper__number {
  padding-top: 2px;
  font-style: italic;
  color: var(--itw-text);
  font-family: Fraunces;
  font-size: 20px;
}

/* Title */

.installation-type-wrapper__title {
  font-size: 24px;
  line-height: 1.3;

  font-weight: 500;

  color: var(--itw-text);

  transition: color 0.3s ease;
}

/* =========================================================
   ARROW
========================================================= */

.installation-type-wrapper__arrow {
  display: flex;

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

  padding-top: 3px;

  font-size: 27px;
  line-height: 1;

  font-weight: 300;

  color: var(--itw-gold);

  opacity: 0;

  transform: translateX(-8px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Active header */

.installation-type-wrapper__header:not(.collapsed) .installation-type-wrapper__title {
  color: var(--itw-gold);
}

.installation-type-wrapper__header:not(.collapsed) .installation-type-wrapper__number {
  color: var(--itw-gold);
}

.installation-type-wrapper__header:not(.collapsed) .installation-type-wrapper__arrow {
  opacity: 1;

  transform: translateX(0);
}

/* =========================================================
   ACCORDION BODY
========================================================= */

.installation-type-wrapper__body {
  padding: 0 60px 20px 90px;
}

.installation-type-wrapper__body p {
  max-width: 520px;
  font-weight: 500;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--itw-text);
}

.installation-type-wrapper__tags {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--itw-gold);
}

/* =========================================================
   BOOTSTRAP COLLAPSE TRANSITION
========================================================= */

.installation-type-wrapper .accordion-collapse {
  transition: height 0.4s ease;
}

/* Remove Bootstrap accordion default styles */

.installation-type-wrapper .accordion-item {
  border: 0;
  background: transparent;
}

.installation-type-wrapper .accordion-button {
  box-shadow: none;
}

.installation-type-wrapper .accordion-button::after {
  display: none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .installation-type-wrapper {
    padding: 60px 0;
  }

  .installation-type-wrapper__image {
    height: 430px;

    margin-bottom: 45px;
  }

  .installation-type-wrapper__content {
    padding-left: 0;
  }

  .installation-type-wrapper__heading {
    font-size: 36px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .installation-type-wrapper {
    padding: 45px 0;
  }

  .installation-type-wrapper .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .installation-type-wrapper__image {
    height: 300px;

    margin-bottom: 35px;

    border-radius: 10px;
  }

  .installation-type-wrapper__heading {
    font-size: 30px;

    letter-spacing: -0.8px;
  }

  .installation-type-wrapper__description {
    margin-bottom: 28px;

    font-size: 13px;
  }

  /* Header */

  .installation-type-wrapper__header {
    grid-template-columns: 55px 1fr 25px;

    min-height: 60px;

    padding: 18px 0;
  }

  .installation-type-wrapper__number {
    font-size: 15px;
  }

  .installation-type-wrapper__title {
    font-size: 19px;
  }

  .installation-type-wrapper__arrow {
    font-size: 22px;
  }

  /* Body */

  .installation-type-wrapper__body {
    padding: 0 25px 20px 55px;
  }

  .installation-type-wrapper__body p {
    font-size: 13px;
  }

  .installation-type-wrapper__tags {
    font-size: 12px;
  }
}


.more-solution-section {
  padding: 100px 0;
  background: #1C1A18 0% 0% no-repeat padding-box;
  font-weight: 500;
  font: normal normal 500 15px/25px Inter;
  background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/Background-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.more-solution-section .heading-section {
  text-align: center;
}

.more-solution-section .heading-section .eyebrow {
  text-align: center;
  font: italic normal 600 17px/24px Fraunces;
  letter-spacing: 0px;
  color: #F7F2EE;
  text-transform: capitalize;
}

.more-solution-section .heading-section .eyebrow span {
  color: var(--color1);
}

.more-solution-section .heading-section h2,
.more-solution-section .heading-section p {
  color: #F7F2EE;
}

.more-solution-section .heading-section p {
  opacity: 0.8;
}

.more-solution-section .heading-section h2 span {
  color: var(--color1);
}


/* =========================================================
   GRILLE FEATURE SECTION
========================================================= */

.grille-feature-wrapper {
  --grille-gold: #B99C63;
  --grille-white: #F6F2EE;

  position: relative;

  width: 100%;

  background: #080808;

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

  overflow: hidden;
}


/* =========================================================
   MAIN INNER
========================================================= */

.grille-feature-wrapper__inner {
  position: relative;

  width: 100%;

  /*
       Original image ratio:
       1920 x 900
    */

  aspect-ratio: 1920 / 900;

  min-height: 600px;

  overflow: hidden;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.grille-feature-wrapper__bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;

  display: block;

  z-index: 1;
}


/* =========================================================
   ANNOTATIONS
========================================================= */

.grille-feature-wrapper__annotations {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;
}


/* =========================================================
   FEATURE
========================================================= */

.grille-feature-wrapper__feature {
  position: absolute;

  display: flex;
  align-items: flex-start;

  width: 49%;

  color: var(--grille-white);
}


/* =========================================================
   FEATURE POSITIONS
========================================================= */

.grille-feature-wrapper__feature--01 {
  top: 17%;

  left: 48.5%;
}

.grille-feature-wrapper__feature--02 {
  top: 42%;

  left: 48.5%;
}

.grille-feature-wrapper__feature--03 {
  top: 71%;

  left: 54%;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.grille-feature-wrapper__line {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  width: 20%;

  margin-top: 8px;
}

.grille-feature-wrapper__feature--01 .grille-feature-wrapper__line,
.grille-feature-wrapper__feature--02 .grille-feature-wrapper__line {
  width: 32%;
}


/* Horizontal line */

.grille-feature-wrapper__line-inner {
  width: 100%;

  height: 1px;

  background: var(--grille-gold);
}


/* Dots */

.grille-feature-wrapper__dot {
  width: 10px;
  height: 10px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--grille-gold);
}


/* =========================================================
   TEXT
========================================================= */

.grille-feature-wrapper__text {
  padding-left: 20px;

  max-width: 400px;
}

.grille-feature-wrapper__text h3 {
  margin: 0 0 6px;

  color: var(--grille-gold);

  font-size: 27px;
  line-height: 1.2;

  font-weight: 500;


}


.grille-feature-wrapper__text p {
  margin: 0;

  color: var(--grille-white);

  opacity: 0.8;

  font-size: 15px;

  line-height: 1.5;

  /* font-weight: 500; */
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

  .grille-feature-wrapper__text h3 {
    font-size: 29px;
  }

  .grille-feature-wrapper__text p {
    font-size: 16px;
  }

  .grille-feature-wrapper__text {
    max-width: 440px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

  .grille-feature-wrapper__inner {
    min-height: 540px;
  }


  .grille-feature-wrapper__feature {
    width: 50%;
  }


  .grille-feature-wrapper__feature--01 {
    left: 48%;
  }

  .grille-feature-wrapper__feature--02 {
    left: 48%;
  }

  .grille-feature-wrapper__feature--03 {
    left: 52%;
  }


  .grille-feature-wrapper__line {
    width: 17%;
  }


  .grille-feature-wrapper__text {
    padding-left: 15px;

    max-width: 330px;
  }


  .grille-feature-wrapper__text h3 {
    font-size: 23px;
  }


  .grille-feature-wrapper__text p {
    font-size: 14px;
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 991.98px) {

  .grille-feature-wrapper__inner {
    aspect-ratio: auto;

    min-height: 650px;
  }


  /*
       Image ko thoda left shift kar rahe hain
       taaki product clearly visible rahe.
    */

  .grille-feature-wrapper__bg {
    object-position: 32% center;
  }


  .grille-feature-wrapper__feature {
    width: 55%;
  }


  .grille-feature-wrapper__feature--01 {
    top: 15%;
    left: 43%;
  }

  .grille-feature-wrapper__feature--02 {
    top: 42%;
    left: 43%;
  }

  .grille-feature-wrapper__feature--03 {
    top: 69%;
    left: 48%;
  }


  .grille-feature-wrapper__line {
    width: 15%;
  }


  .grille-feature-wrapper__text {
    max-width: 350px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .grille-feature-wrapper__inner {
    min-height: auto;

    aspect-ratio: auto;

    padding: 0 0 50px;
  }


  /*
       Background image mobile par
       full-width visual ke roop me rahegi.
    */

  .grille-feature-wrapper__bg {
    position: relative;

    inset: auto;

    width: 100%;

    height: 380px;

    object-fit: cover;

    object-position: 30% center;
  }


  .grille-feature-wrapper__annotations {
    position: relative;

    inset: auto;

    display: block;

    padding: 35px 22px 0;
  }


  .grille-feature-wrapper__feature {
    position: relative;

    top: auto !important;
    left: auto !important;

    display: block;

    width: 100%;

    margin-bottom: 35px;
  }


  /*
       Mobile par connecting line ko
       text ke upar rakha hai.
    */

  .grille-feature-wrapper__line {
    width: 100%;

    margin: 0 0 14px;
  }


  .grille-feature-wrapper__line-inner {
    flex: 1;
  }


  .grille-feature-wrapper__text {
    padding-left: 0;

    max-width: 100%;
  }


  .grille-feature-wrapper__text h3 {
    font-size: 22px;

    margin-bottom: 7px;
  }


  .grille-feature-wrapper__text p {
    font-size: 14px;

    line-height: 1.55;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .grille-feature-wrapper__bg {
    height: 300px;

    object-position: 27% center;
  }


  .grille-feature-wrapper__annotations {
    padding:
      30px 18px 0;
  }


  .grille-feature-wrapper__feature {
    margin-bottom: 32px;
  }


  .grille-feature-wrapper__dot {
    width: 8px;
    height: 8px;
  }


  .grille-feature-wrapper__text h3 {
    font-size: 20px;
  }


  .grille-feature-wrapper__text p {
    font-size: 13px;
  }

}


/* =========================================================
   PRACTICAL BENEFITS
   Everything is scoped inside this parent
========================================================= */

.practical-benefits-wrapper {

  --pb-gold: #B99C63;
  --pb-white: #F6F2EE;

  position: relative;

  width: 100%;
  min-height: 565px;

  padding: 72px 0 85px;

  background-color: #080808;

  /*
       If this section has a background image,
       put it here.
    */
  background-image:
    url("https://csinvisiblegrille.com/wp-content/uploads/2026/09/Background.jpg");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

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

  overflow: hidden;
}


/* =========================================================
   BOOTSTRAP CONTAINER
========================================================= */

.practical-benefits-wrapper .container {

  max-width: 1100px;

}


/* =========================================================
   HEADING
========================================================= */

.practical-benefits-wrapper__heading {

  width: 100%;

  text-align: center;

  margin-bottom: 64px;

}


.practical-benefits-wrapper__heading h2 {

  margin: 0;

  color: var(--pb-white);

  font-size: 41px;

  line-height: 1.2;

  font-weight: 500;

  letter-spacing: -1.3px;

}


.practical-benefits-wrapper__heading h2 span {

  color: var(--pb-gold);

}


/* =========================================================
   MAIN GRID
========================================================= */

.practical-benefits-wrapper__grid {

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto auto;

}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.practical-benefits-wrapper__item {

  position: relative;

  display: flex;

  align-items: flex-start;

}


/* =========================================================
   ITEM POSITIONS
========================================================= */

/*
    Top-left
*/

.practical-benefits-wrapper__item:nth-child(1) {

  padding-right: 70px;

  padding-bottom: 0;
  border-right: 1px dashed #F6F2EE;
  margin-bottom: 40px;

}


/*
    Top-right
*/

.practical-benefits-wrapper__item:nth-child(2) {

  padding-left: 68px;
  padding-bottom: 0;
  margin-bottom: 40px;

}


/*
    Bottom-left
*/

.practical-benefits-wrapper__item:nth-child(3) {

  margin-top: 40px;
  padding-bottom: 0;
  border-right: 1px dashed #F6F2EE;
  padding-right: 70px;

}


/*
    Bottom-right
*/

.practical-benefits-wrapper__item:nth-child(4) {
  margin-top: 40px;
  padding-left: 68px;

}


/* =========================================================
   CENTER VERTICAL DIVIDER
========================================================= */




/* =========================================================
   HORIZONTAL DIVIDER
========================================================= */

.practical-benefits-wrapper__grid::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;
  transform: translateY(-50%);
  border-top: 1px dashed #F6F2EE;
  z-index: 3;

}


/* =========================================================
   ICON
========================================================= */

.practical-benefits-wrapper__icon {

  flex: 0 0 120px;

  width: 120px;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  padding-top: 8px;

}


/*
   Actual icon image
*/

.practical-benefits-wrapper__icon img {

  display: block;

  width: 58px;

  height: 58px;

  object-fit: contain;

}


/* =========================================================
   CONTENT
========================================================= */

.practical-benefits-wrapper__content {

  flex: 1;

  min-width: 0;

}


/* =========================================================
   TITLE
========================================================= */

.practical-benefits-wrapper__content h3 {

  margin: 0 0 5px;

  color: var(--pb-white);

  font-size: 26px;

  line-height: 1.25;

  font-weight: 500;



}


/* =========================================================
   DESCRIPTION
========================================================= */

.practical-benefits-wrapper__content p {

  max-width: 390px;

  margin: 0;

  color: var(--pb-white);

  opacity: 0.8;

  font-size: 15px;

  line-height: 1.55;

  /* font-weight: 500; */

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

  .practical-benefits-wrapper .container {

    max-width: 1100px;

  }

  .practical-benefits-wrapper__heading h2 {

    font-size: 42px;

  }

  .practical-benefits-wrapper__content h3 {

    font-size: 27px;

  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .practical-benefits-wrapper {

    padding: 65px 0 75px;

  }


  .practical-benefits-wrapper__heading {

    margin-bottom: 55px;

  }


  .practical-benefits-wrapper__heading h2 {

    font-size: 37px;

  }


  .practical-benefits-wrapper__item:nth-child(1),
  .practical-benefits-wrapper__item:nth-child(3) {

    padding-right: 45px;

  }


  .practical-benefits-wrapper__item:nth-child(2),
  .practical-benefits-wrapper__item:nth-child(4) {

    padding-left: 45px;

  }


  .practical-benefits-wrapper__icon {

    flex-basis: 75px;

    width: 75px;

  }


  .practical-benefits-wrapper__icon img {

    width: 52px;

    height: 52px;

  }


  .practical-benefits-wrapper__content h3 {

    font-size: 23px;

  }


  .practical-benefits-wrapper__content p {

    font-size: 14px;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .practical-benefits-wrapper {

    min-height: auto;

  }


  .practical-benefits-wrapper .container {

    max-width: 90%;

  }


  .practical-benefits-wrapper__heading h2 {

    font-size: 34px;

  }


  .practical-benefits-wrapper__grid {

    grid-template-columns: 1fr 1fr;

  }


  .practical-benefits-wrapper__item {

    min-height: 145px;

  }


  .practical-benefits-wrapper__item:nth-child(1),
  .practical-benefits-wrapper__item:nth-child(3) {

    padding-right: 35px;

  }


  .practical-benefits-wrapper__item:nth-child(2),
  .practical-benefits-wrapper__item:nth-child(4) {

    padding-left: 35px;

  }


  .practical-benefits-wrapper__icon {

    flex-basis: 65px;

    width: 65px;

  }


  .practical-benefits-wrapper__icon img {

    width: 48px;

    height: 48px;

  }


  .practical-benefits-wrapper__content h3 {

    font-size: 21px;

  }


  .practical-benefits-wrapper__content p {

    font-size: 13px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .practical-benefits-wrapper {

    padding: 50px 0 55px;

  }


  .practical-benefits-wrapper .container {

    max-width: 100%;

    padding-left: 22px;

    padding-right: 22px;

  }


  .practical-benefits-wrapper__heading {

    margin-bottom: 42px;

  }


  .practical-benefits-wrapper__heading h2 {

    font-size: 29px;

    line-height: 1.25;

    letter-spacing: -0.7px;

  }


  /*

       Mobile par 2-column divider
       hata kar single column.
    */

  .practical-benefits-wrapper__grid {

    display: block;

  }


  .practical-benefits-wrapper__grid::before,
  .practical-benefits-wrapper__grid::after {

    display: none;

  }


  /* =====================================================
       ITEM
    ===================================================== */

  .practical-benefits-wrapper__item,

  .practical-benefits-wrapper__item:nth-child(1),
  .practical-benefits-wrapper__item:nth-child(2),
  .practical-benefits-wrapper__item:nth-child(3),
  .practical-benefits-wrapper__item:nth-child(4) {

    min-height: auto;

    padding: 0 0 30px;

    margin-bottom: 30px;

    border-bottom:
      1px dashed rgba(246, 242, 238, 0.22);

  }


  .practical-benefits-wrapper__item:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: 0;

  }


  /* =====================================================
       ICON
    ===================================================== */

  .practical-benefits-wrapper__icon {

    flex: 0 0 68px;

    width: 68px;

    padding-top: 3px;

  }


  .practical-benefits-wrapper__icon img {

    width: 48px;

    height: 48px;

  }


  /* =====================================================
       CONTENT
    ===================================================== */

  .practical-benefits-wrapper__content h3 {

    font-size: 21px;

    margin-bottom: 7px;

  }


  .practical-benefits-wrapper__content p {

    font-size: 13px;

    line-height: 1.55;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .practical-benefits-wrapper {

    padding: 42px 0 45px;

  }


  .practical-benefits-wrapper .container {

    padding-left: 18px;

    padding-right: 18px;

  }


  .practical-benefits-wrapper__heading {

    margin-bottom: 35px;

  }


  .practical-benefits-wrapper__heading h2 {

    font-size: 26px;

  }


  .practical-benefits-wrapper__icon {

    flex-basis: 58px;

    width: 58px;

  }


  .practical-benefits-wrapper__icon img {

    width: 43px;

    height: 43px;

  }


  .practical-benefits-wrapper__content h3 {

    font-size: 19px;

  }


  .practical-benefits-wrapper__content p {

    font-size: 12px;

  }

}



/* =========================================================
   INSTALLATION PROCESS
   ALL CSS SCOPED INSIDE THIS PARENT
========================================================= */

.installation-process-wrapper {

  --ip-gold: #B99C63;
  --ip-gold-light: #E0BE7A;
  --ip-black: #0A0A0A;
  --ip-border: rgba(185, 156, 99, 0.48);

  width: 100%;

  background: #F6F2EE;

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

  padding: 74px 0 96px;

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.installation-process-wrapper .container {

  max-width: 1240px;

}


/* =========================================================
   HEADING
========================================================= */

.installation-process-wrapper__heading {

  max-width: 820px;

  margin: 0 auto;

  text-align: center;

}


.installation-process-wrapper__heading h2 {

  margin: 0 0 17px;

  color: var(--ip-black);

  font-size: 41px;

  line-height: 1.2;

  font-weight: 500;

  letter-spacing: -1.4px;

}


.installation-process-wrapper__heading h2 span {

  color: var(--ip-gold);

}


.installation-process-wrapper__heading p {

  max-width: 790px;

  margin: 0 auto;

  color: var(--ip-black);

  font-size: 15px;

  line-height: 1.5;

  font-weight: 500;

}


/* =========================================================
   PROCESS AREA
========================================================= */

.installation-process-wrapper__process {

  position: relative;

  margin-top: 29px;

}


/* =========================================================
   CONNECTING LINE
========================================================= */

.installation-process-wrapper__line {

  position: absolute;
  top: 41px;
  left: 50%;
  width: 77.34%;
  height: 1px;
  background: var(--ip-border);
  z-index: 0;
  translate: -50% 0;

}


/* =========================================================
   STEP
========================================================= */

.installation-process-wrapper__step {

  position: relative;

  z-index: 1;

  text-align: center;

  padding: 0 25px;

}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.installation-process-wrapper__number {

  width: 76px;

  height: 76px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    transparent linear-gradient(180deg,
      #E0BE7A 0%,
      #B99C63 100%) 0% 0% no-repeat padding-box;

  color: #FFFFFF;

  font-family: Fraunces;

  font-size: 28px;

  font-style: italic;

  font-weight: 400;

}


/* =========================================================
   CONTENT
========================================================= */

.installation-process-wrapper__content {

  padding-top: 37px;

}


.installation-process-wrapper__content h3 {

  margin: 0 auto 11px;

  max-width: 280px;

  color: var(--ip-black);

  font-size: 24px;

  line-height: 1.25;

  font-weight: 500;



}


.installation-process-wrapper__content p {

  max-width: 260px;

  margin: 0 auto;

  color: var(--ip-black);

  font-size: 15px;

  line-height: 1.5;

  font-weight: 500;
  opacity: 0.8;

}

.services-auto-filter {
    background-image: url(https://csinvisiblegrille.com/wp-content/uploads/2026/09/down-chevron.png) !important;
    background-size: 15px !important;
}
.application-description ul {
    padding-left: 15px;
}
.application-description ul li {
    font: normal normal 500 15px / 23px Inter;
    letter-spacing: 0px;
    color: #B99C63;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */
.page-id-99 .wpcf7-list-item {
  margin: 0 10px 0 0em !important;
}

@media (min-width: 1400px) {

  .installation-process-wrapper .container {

    max-width: 1240px;

  }


  .installation-process-wrapper__heading h2 {

    font-size: 42px;

  }


  .installation-process-wrapper__content h3 {

    font-size: 25px;

  }

}

@media (min-width: 1025px) {
    .installation-type-wrapper__content .wire-heading h2, 
    .installation-type-wrapper__content .page-heading {
        white-space: nowrap;
        overflow: visible;
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .installation-process-wrapper {

    padding: 65px 0 80px;

  }


  .installation-process-wrapper .container {

    max-width: 94%;

  }


  .installation-process-wrapper__heading h2 {

    font-size: 37px;

  }


  .installation-process-wrapper__heading p {

    font-size: 14px;

  }


  .installation-process-wrapper__step {

    padding: 0 15px;

  }


  .installation-process-wrapper__number {

    width: 72px;

    height: 72px;

    font-size: 26px;

  }


  .installation-process-wrapper__content {

    padding-top: 32px;

  }


  .installation-process-wrapper__content h3 {

    font-size: 21px;

  }


  .installation-process-wrapper__content p {

    font-size: 14px;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .installation-process-wrapper {

    padding: 55px 0 65px;

  }


  .installation-process-wrapper__heading {

    max-width: 700px;

  }


  .installation-process-wrapper__heading h2 {

    font-size: 34px;

  }


  .installation-process-wrapper__process {

    margin-top: 45px;

  }


  /*
       Tablet:
       2 x 2 layout
    */

  .installation-process-wrapper__line {

    display: none;

  }


  .installation-process-wrapper__step {

    margin-bottom: 55px;

  }


  .installation-process-wrapper__content {

    padding-top: 25px;

  }


  .installation-process-wrapper__content h3 {

    font-size: 21px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .installation-process-wrapper {

    padding: 45px 0 50px;

  }


  .installation-process-wrapper .container {

    max-width: 100%;

    padding-left: 22px;

    padding-right: 22px;

  }


  /* Heading */

  .installation-process-wrapper__heading {

    text-align: center;

  }


  .installation-process-wrapper__heading h2 {

    font-size: 29px;

    line-height: 1.25;

    letter-spacing: -0.8px;

  }


  .installation-process-wrapper__heading p {

    font-size: 13px;

    line-height: 1.55;

  }


  /* Process */

  .installation-process-wrapper__process {

    margin-top: 40px;

  }


  /*
       Mobile:
       Single vertical column
    */

  .installation-process-wrapper__process .row {

    display: block;

  }


  .installation-process-wrapper__process .col-lg-3 {

    width: 100%;

  }


  /* Vertical line */

  .installation-process-wrapper__line {

    display: block;

    top: 0;

    bottom: 0;

    left: 38px;

    width: 1px;

    height: auto;

    background:
      repeating-linear-gradient(to bottom,
        rgba(185, 156, 99, 0.5) 0,
        rgba(185, 156, 99, 0.5) 4px,
        transparent 4px,
        transparent 9px);

  }


  /* Step */

  .installation-process-wrapper__step {

    display: flex;

    align-items: flex-start;

    text-align: left;

    padding: 0;

    margin-bottom: 38px;

  }


  .installation-process-wrapper__step:last-child {

    margin-bottom: 0;

  }


  /* Number */

  .installation-process-wrapper__number {

    position: relative;

    flex: 0 0 76px;

    width: 76px;

    height: 76px;

    margin: 0;

    font-size: 25px;

  }


  /* Content */

  .installation-process-wrapper__content {

    padding: 5px 0 0 25px;

  }


  .installation-process-wrapper__content h3 {

    max-width: none;

    margin: 0 0 8px;

    font-size: 21px;

    line-height: 1.3;

  }


  .installation-process-wrapper__content p {

    max-width: none;

    margin: 0;

    font-size: 13px;

    line-height: 1.55;

  }


  .installation-process-wrapper__desktop-break {

    display: none;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .installation-process-wrapper {

    padding: 40px 0 45px;

  }


  .installation-process-wrapper .container {

    padding-left: 18px;

    padding-right: 18px;

  }


  .installation-process-wrapper__heading h2 {

    font-size: 26px;

  }


  .installation-process-wrapper__heading p {

    font-size: 12px;

  }


  .installation-process-wrapper__process {

    margin-top: 35px;

  }


  .installation-process-wrapper__line {

    left: 31px;

  }


  .installation-process-wrapper__number {

    flex-basis: 50px;

    width: 50px;

    height: 50px;

    font-size: 18px;

  }


  .installation-process-wrapper__content {

    padding-left: 18px;

    padding-top: 2px;

  }


  .installation-process-wrapper__content h3 {

    font-size: 18px;

  }


  .installation-process-wrapper__content p {

    font-size: 12px;

  }
}


@media only screen and (max-width: 767px) {

.single-service .top-sub-banner img{
	height: 330px !important;
}
.brd.brd-services {
  bottom: 30px;
}
.top-sub-banner h2 {
    margin-bottom: 10px;
}
.top-sub-banner p {
    font: normal normal 500 12px / 20px Inter;
    letter-spacing: 0px;
    color: #707070;
    background: #000;
    display: inline-block;
    padding: 4px 15px;
    border-radius: 30px;
    margin-bottom: 10px !important;
}
.about-system-title, .page-heading {
    font: normal normal 500 24px / 32px Inter;
}

.wire-spacing-wrapper {
    padding: 30px 0;
}
.wire-spacing-wrapper .wire-spacing-content {
  padding: 10px;
}
form.services-filter-form {
  padding-bottom: 0px;
}
section.services-section {
  margin-top: -0px;
}
form.services-filter-form {
  padding-bottom: 0px;
  border-top: 0;
  padding-top: 30px;
}
.mar-heading {
  font: normal normal 500 50px / 60px Inter;
  letter-spacing: 0px;
  color: #F6F2EE;
}
.portfolio-detail-one {
  padding: 20px 0 50px 0;
}
.wpcf7-form label .wpcf7-list-item{
  width: 100% !important;
}
.page-id-22 .hero-banner .carousel-item img.w-100 {
  height: 100vh;
	object-fit: cover;
}
.single-project .prevnext-post .row>.col-md-6 {
   flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  padding: 0 4px !important;
}

.single-project .prev-post {
  font: normal normal 500 12px / 18px Inter;
}

.single-project .after-post .title {
  font: normal normal 500 15px / 22px Inter;
  letter-spacing: 0px;
  color: #000000;
}

.wire-types-section .arrowbtn img {
  width: 22px;
}
.wire-types-section .left-btn {
  left: -2px;
}
.wire-types-section .right-btn {
  right: -2px;
}

}



/* ==========================================
   SERVICES CUSTOM DROPDOWN
========================================== */

.services-filter {
    font-family: "Inter", sans-serif;
}

/* Main dropdown */
.custom-select {
    position: relative;
    width: 100%;
}


/* Trigger */
.custom-select-trigger {
    position: relative;
    height: 46px !important;
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;

    cursor: pointer!important;
    text-transform: capitalize!important;
    border-style: solid!important;
    border-width: 1px 1px 1px 1px!important;
    border-color: #B99C63!important;
    padding: 8px 15px!important;
    background: #F6F2EE 0% 0% no-repeat padding-box!important;
    border: 1px solid #CEC5BB!important;
    font: normal normal 500 15px / 23px Inter!important;
    letter-spacing: 0px!important;
    color: #000000!important;
    border-radius: 8px !important;
    width: 100%!important;
    text-align: start!important;
}


/* Hover */
.custom-select-trigger:hover {
    border-color: #B99C63;
}


/* Arrow */
.custom-select-arrow {
width: 10px;
    height: 10px;
    border-left: 2px solid #B99C63;
    border-top: 2px solid #B99C63;
    transform: rotate(225deg);
    margin-top: -2px;
    transition: transform 0.25s ease;
}


/* Open arrow */
.custom-select.open .custom-select-arrow {
    transform: rotate(45deg);
    margin-top: 0px;
}


/* Options wrapper */
.custom-select-options {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    z-index: 9999;

    background: #f8f7f5;

    border-radius: 8px;

    overflow: hidden;

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* Open */
.custom-select.open .custom-select-options {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Option */
.custom-select-option {
    min-height: 46px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    border-bottom: 1px solid #d8d3ca;
    background: #f8f7f5;
    transition: background 0.2s ease, color 0.2s ease;
}


/* Last option */
.custom-select-option:last-child {
    border-bottom: 0;
}


/* Hover */
.custom-select-option:hover {
    background: #eeeae4;
}


/* Selected option */
.custom-select-option.active {
    background: #B99C63;
    color: #ffffff;
}


/* Selected hover */
.custom-select-option.active:hover {
    background: #B99C63;
    color: #ffffff;
}