* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font-primary: "Roboto Condensed", sans-serif;
  --color-blk: #0a0a0a;
  --color-lgt: #f1f1f1;


  --color-white: #fff;

  --color-green: #216e38;
  --color-grey: #495057;
  --text-wt: #f1f1f1;
  --text-blk: #0a0a0a;
  --color-wt: #fff;
  --color-yellow: #ffce13;
  --color-lb: #272727;
  --color-Timeless-Grey: #8F9290;
  --color-lg:#EEEEEE;
}

:root {
  --font-primary: "Roboto Condensed";
  --color-blk: #0a0a0a;
  --color-green: #007b55;
}

p,
ol,
ul,
dl,
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

a,
button {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

.sec-title {
  font-family: var(--font-primary);
  text-align: center;
  margin: 0px 0px 20px 0px;
}

.sec-title .title {
  font-family: var(--font-primary);
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-blk);
}

.sec-title .sub-text {
  font-size: 14px;
  margin: 0px 0px 10px 0px;
  color: var(--color-lg-blk);
  text-transform: capitalize;
}

.sec-title span {
  margin: 0px 0px 10px 0px;
  color: var(--color-lg-blk);
}

.gn-txt {
  font-size: 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  text-align: justify;
  margin: 0px 0px 10px 0px;
  color: var(--color-blk);
}

.gn-heads {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-blk);
  text-align: center;
  margin: 0px 0px 10px 0px;
}

.txt-wt {
  color: var(--color-wt);
}

.box-head {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-wt);
  text-align: center;
  margin: 0px 0px 10px 0px;
  text-transform: capitalize;
}

.gn-txt-center {
  font-size: 14px;
  font-family: var(--font-primary);
  font-weight: 400;
  text-align: center;
  margin: 0px 0px 10px 0px;
  color: var(--color-wt);
}

/* body {
  font-family: "Roboto Condensed";
 
} */


body {
  padding: 0;
  margin: 0;
  background-color: var(--color-lgt);
}

.pad-section40 {
  padding: 40px 0px;
}

/* ------------navbar---------------- */

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 24px;
}

.nav-links a {
  color: var(--color-lgt);
  font-size: 16px;
  padding: 6px;
  font-family: var(--font-primary);
  text-transform: capitalize;
}


.nav-link.active {
  color: #fff;

  border-radius: 5px;
}


.sticky-nav.menu_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.9.5);
  -webkit-animation: sticky 1s;
  -moz-animation: sticky 1s;
  -o-animation: sticky 1s;
  animation: sticky 1s;

 
}

@-webkit-keyframes sticky {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@keyframes sticky {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

/* Header Pointer Fix */


.nav-section {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  pointer-events: none;
  background-color: rgba(0,0,0,.36);
}

.nav-section .navbar {
  pointer-events: auto;
}

.navbar-toggler.menu-nav {
  border-color: rgba(255, 255, 255, 0.5);
}



.navbar-toggler-icon .menu-nav-icon {
  background-image: none;
  filter: brightness(0) invert(1);
}


.menu-nav-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-brand img {
  width: 120px;
}
.menus{
  align-items: center;
}
.menus a.nav-readmore {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600 !important;
  color: var(--color-lgt);
  display: inline-block;
  text-align: center;
  margin: 0px 10px;
  padding: 10px 10px !important;
  text-transform: capitalize;
  transition: color 0.3s ease;
  
}


.br-cell {
  font-size: 16px;
  background-color: var(--color-lgt) !important;
  min-width: 120px;
  color: var(--color-blk) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}
.br-cell:hover{
  background-color: var(--color-green)!important;
  color: var(--color-white)!important;
  border-radius: 10px;
}
.menus a.nav-link.active {
  color: var(--color-green) !important;
}
.navbar-nav li a.active{
  color: var(--color-green);
}
.navbar-nav li a{
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-lgt);
  font-size: 16px;
  margin: 0px 10px;
}
.navbar-nav li a:hover{
  color: var(--color-green);
  transition: color 0.3s ease;
}

/* ====================
   BANNER
==================== */

.main-banner {
  position: relative;
  overflow: hidden;
}

.de-slider {
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  min-height: 920px;
  align-items: center;
  overflow: hidden;
  background-repeat: no-repeat;
}

.de-slider::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .7);
  z-index: 1;
}
.de-banner{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 400px;
}
.service-head-1{
  background-image: url(../images/service/1920-600-2.webp);
}
.service-head-2{
  background-image: url(../images/banner/interior-banner.webp);
 
}
.service-head-3{
  background-image: url(../images/service/1920-600-4.webp);
}
.service-head-5{
  background-image: url(../images/banner/1920-800-C-1.webp);
}
.service-head-4{
  background-image: url(../images/service/1920-600-3.webp);
}
.service-head-7{
  background-image: url(../images/banner/1920-800-C-8.webp);
}
.de-banner-2{
  background-image: url(../images/banner/1920-800-C-5.webp);
}
.de-slider-1 {
  background-image: url(../images/banner/deplan-banner-1.webp);
}

.de-slider-2 {
  background-image: url(../images/banner/deplan-banner-2.webp);
}

.de-slider-3 {
  background-image: url(../images/banner/deplan-banner-3.webp);
}

.content {
  margin: 0px 0px 50px 0px;
}

.content h1 {
  color: var(--color-blk);
  background-color: var(--color-lgt);
  font-size: 18px;
  display: inline-block;
  padding: 10px;
  margin-right: 15px;
}

.content h1 em {
  color: var(--color--rd);
  font-size: 18px;
}

.content p {
  font-family: var(--font-primary);
  color: var(--color-lgt);
  font-size: 16px;
  display: inline-block;
  max-width: 600px;
}

/* .de-slider-content h2{
   font-family: var(--font-primary);
  font-size: 45px;
  font-weight: 800;
  color: var(--color-lgt);
  text-align: center;
}
.de-slider-content{
  width: 100%;
  padding: 0px;
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.al-slider-content h2 {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-lgt);
  text-align: center;
}

span.category em {
  color: var(--color--rd);
}

.al-slider-content {
  width: 100%;
  padding: 0px;
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-left {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: var(--color-wt);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-dots {
  position: absolute;
  bottom: 60px;
  left: 10%;
  z-index: 999;
}

.main-banner .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-wt);
  border-radius: 50%;
  margin-right: 10px;
  transition: all .5s;
}

.main-banner .owl-dots .active {
  background-color: #f35525;
}

/* Owl Nav Fix */
.main-banner .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none;
}

.main-banner .owl-nav button {
  pointer-events: auto;
  outline: none !important;
  z-index: 10000 !important;
}

.main-banner .owl-nav .owl-prev,
.main-banner .owl-nav .owl-next {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: var(--color-wt) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50%;
  opacity: 1;
  transition: all .8s;
  border: none;
  cursor: pointer;
  z-index: 10000 !important;
}

.main-banner .owl-nav .owl-prev {
  left: 45px;
}

.main-banner .owl-nav .owl-next {
  right: 45px;
}

.main-banner .owl-nav .owl-prev:hover,
.main-banner .owl-nav .owl-next:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--color-wt) !important;
}

/* Banner Base */
.de-banner {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60vh;
  overflow: hidden;

}

.de-banner {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.de-banner {
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  overflow: hidden;
}



.de-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  transform: scale(1);
  animation: zoomEffect 9s ease-in-out forwards;
  z-index: 0;
}


.de-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .6);
  z-index: 1;
}


.de-slider-content .content {
  position: relative;
  z-index: 2;

}


@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.12);
  }

 
}



.de-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .2);
  z-index: 1;

}

.btn-dplan {
  background-color: var(--color-Timeless-Grey);
  border: none;
  font-family: var(--font-primary);
  font-size: 14px;
}
.dropdown-dplan li a.dropdown-item{
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
}

.btn-dplan:hover {
  background-color: var(--color-green);
}

.de-banner-1 {
  background-image: url(../images/banner/d-banner-about.webp);
}

.de-banner-2 {
  background-image: url(../images/banner/1920-800-HOME-29.webp);
}

.de-banner-3 {
  background-image: url(../images/banner/BANNER%2003.webp);
}

.de-banner-4 {
  background-image: url(../images/banner/BANER%2005.webp);
}

.de-banner-6 {
  background-image: url(../images/banner/BANER%2006.webp);
}

.de-banner-7 {
  background-image: url(../images/banner/d-banner-7.webp);
}

.de-banner-8 {
  background-image: url(../images/banner/banner%20home-6%201920%20800%20-6.webp);
}

.de-banner-9 {
  background-image: url(../images/banner/banner%20home-7%201920%20800%20-7.webp);
}

.de-slider-content {
  width: 100%;
  position: relative;
  z-index: 2;

}

.de-banner-1 {
  display: flex;
  align-items: flex-end;

}

.banner-content {

  text-align: left;
  max-width: 700px;
  color: var(--color-wt);
}

/* Headline */
.banner-title {
  font-family: var(--font-primary);
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
}

.banner-title::after {
  content: "";
  height: 3px;
  width: 60px;
  position: absolute;
  bottom: -8px;
  left: 0;
}

/* Paragraph */
.banner-content p {
  font-family: var(--font-primary);
  font-size: 22px;
  line-height: 1.6;
  margin: 0;
  color: var(--color-wt);
}

.de-slider-content h2 {
  text-transform: capitalize;
  font-family: var(--font-primary);
  font-size: 38px;
  font-weight: 600;
  color: var(--color-lgt);
  text-align: start;
}



/* CONTACT */
/* ============== */


.dp-contact {
  position: relative;
  margin-bottom: 20px;
}

.dp-contact-form-section {
  min-height: 500px;
  background: url("../images/contact/contact-form.webp") center/cover no-repeat;
  display: flex;
  align-items: center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.dp-contact-info {
  position: relative;
  text-align: center;
  font-family: var(--font-primary);
  margin-bottom: 20px;
}

.dp-contact-info i {
  font-size: 32px;
  /* padding: 0px 10px 18px 0px; */
  justify-content: center;
  margin-bottom: 18px;
}
.dp-contact-info i:hover{
  color: var(--color-green);
}
.dp-contact-heading h2 {
  color: var(--color-white);
  font-family: var(--font-primary);
}

.dp-contact-form {

  width: 100%;
  padding: 25px 200px;
  margin: auto;
  font-family: var(--font-primary);
}

.dp-contact-input input {
  height: 48px !important;
  font-family: var(--font-primary);
}

.dp-contact-input input,
.dp-contact-input textarea {
  background-color: var(--color-grey);
  border: none !important;
  border-radius: 0 !important;
  color: var(--color-white);
  padding-left: 45px !important;
  /* Space for icon */
  font-size: 15px;
  padding-left: 50px;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);


}

.dp-contact-input input::placeholder,
.dp-contact-input textarea::placeholder {
  color: var(--color-white);
  opacity: 0.7;
  letter-spacing: 2px;
  font-family: var(--font-primary);

}

.dp-contact-input {
  position: relative;
}
.dp-contact-info h6{
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-blk);
}
.dp-contact-info p{
  font-size: 14px;
}
.dp-contact-input i {
  position: absolute;
  top: 15px;
  left: 15px;
  color: var(--color-white);
  font-size: 17px;
  justify-content: center !important;

}

.contact-textarea i {
  top: 9px !important;
}

.dp-contact-btn button {
  background-color: var(--color-lg);
  color: var(--color-blk);
  border-radius: 0 !important;
  border: none !important;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 32px;
  letter-spacing: 2px;
}

.section-map {
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;

}

/* contact end */


/* ABOUT US */
/* ============== */
.general-heading {
  font-family: var(--font-primary);
  font-size: 28px !important;
  font-weight: 600;
}

.general-sub-heading {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 500;
  margin: 0px 0px 10px 0px;
}

.general-text {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300;
  text-align: justify;
  margin: 0px 0px 20px 0px;
}

.des-img-wrapper {
  z-index: 1;
  position: relative;
  width: 100%;
  margin: 0 auto;
  animation: floatY 5s ease-in-out infinite;
  will-change: transform;

}

.des-img-wrapper::after {
  background-image: url(../images/about/grey-background.webp);
  content: "";
  position: absolute;
  top: 15%;
  left: 10%;
  width: 100%;
  height: 100%;
  z-index: -1;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
  animation: floatY 5s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatY {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.learn-more-btn a {
  background-color: var(--color-green);
  color: var(--color-white);
  border-radius: 0 !important;
  border: none !important;
  font-size: 16px;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 32px;
  letter-spacing: 2px;
}

.com-des-icons {
  margin: 0px 0px 45px 0px;
}

.com-des-ico-area i {
  font-size: 50px;
  margin: 0px 10px 0px 0px;
  color: var(--text-blk);
  transition: all 0.3s ease-in-out;

  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.com-des-ico-area i:hover {
  background-color: var(--color-white);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: var(--color-yellow);
  border-radius: 50%;
}

.com-des-ico-area {
  border-right: 1px solid var(--color-grey);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.c-d-i-a {
  border-right: none !important;
}

.des-img-wrapper .right {
  position: relative;
  width: 100%;
  height: 100%;
}

.des-img-wrapper .right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/about/bg-img-1.webp") no-repeat center / cover;
  border-radius: 12px;
  z-index: 1;
  transform: translate(30px, 30px);
  /* controls visible offset */
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

/* Foreground main image */
.des-img-wrapper .right img {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 2;
  object-fit: cover;
  transform: translate(-30px, -30px);
  /* opposite of background offset */
}

.company-description {
  position: relative;
  padding: 10px 20px;
}

/* === Banner Section Base === */

.banner-area {
  display: flex;
  justify-content: center;
  align-items: start;
}

.banner-section {
  background-color: var(--color-lgt);
  position: relative;
  padding: 0;

}

/* Banner wrapper */
.banner-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Banner background image */
.banner-img img {
  width: 100%;

  object-fit: cover;
  display: block;
}

/* === Overlay Content Box === */
.banner-content {
  position: absolute;
  top: 20%;
  left: 12%;
  transform: translateY(-50%);
  background: var(--color-lgt);
  padding: 40px;
  max-width: 480px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* Headings and paragraphs */
.banner-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-blk);
  margin-bottom: 20px;
}

.banner-content p {
  color: var(--color-blk);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* Button styling */
.btn-about {
  background: var(--color-green);
  border: none;
  color: var(--color-wt);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-about:hover {
  background: var(--color-green);
}

/* Partners Section */
.partners-section {
  background-color: #f8f9fa;
  /* subtle light background */
}

.partners-section .image-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.4);

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

.partners-section .image-div img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Hover effects */
.partners-section .image-div:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

.achievements-area {
  margin-top: 100px;
}

.achievement-img {
  margin-bottom: 30px;
}

.achievement-item {
  justify-content: center;
}



/* Achievement section */
.achievement-items-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.custom-border {
  position: absolute;
  top: 42%;
  left: -10%;
  transform: translateY(-50%);
  min-width: 15%;
  min-height: 100%;
  z-index: 1;
}

.achievement-item {
  display: flex;
  gap: 50px;
}

.achievement-item:last-child {
  margin-bottom: 0;
}

.achievement-item h1 {
  font-size: 32px;
  margin: 0;
}

.achivement-content h1 {
  font-size: 24px;
  margin: 0;
  margin-bottom: 5px;
}

.achivement-content p {
  margin: 0;
  margin-bottom: 5px;
}

/* Border parts */
.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--color-blk);
}

.right-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 9%;
  background: var(--color-blk);
}

.right-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 9%;
  background: var(--color-blk);
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--color-blk);
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: var(--color-blk);
}



/* SERVICES */
/* ====================== */



.service-header h1 {
  display: inline-block;
 font-size: 28px;
  font-family: var(--font-primary);

  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  overflow: hidden;
  font-weight: 600;
}
.service-header p{
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-blk);
  font-size: 14px;
  margin: 0px 0px 20px 0px;
}
.service-card-outer {
  position: relative;
  width: 100%;
  padding: 100px 30px 30px 30px;
  background: var(--color-wt);
  border: 0 solid transparent;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  overflow: hidden;
  margin-bottom: 30px;
  font-family: var(--font-primary);
}

.service-card-num span {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 90px;
  font-weight: 700;
  color: #f0f0f0;
  z-index: 0;
  font-family: var(--font-primary);
}

.service-card-icon {
  width: 55px;
  height: auto;
  margin-bottom: 20px;
  position: relative;
}

.service-card-icon img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.service-card-content h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.service-card-content p {
  font-size: 14px;
  color: var(--color-grey);
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  font-family: var(--font-primary);
}

.service-card-content a {

  color: var(--color-blk);
  text-decoration: none;
  font-size: 14px;
  /* border-bottom: 2px solid #d9c7b7; */
  padding-bottom: 3px;
  position: relative;
  z-index: 2;
}

/* Hover lift */
.service-card-outer:hover {
  transform: translateY(-8px);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.12);
}

/* === HALF BORDER ANIMATION EFFECT === */
.service-card-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  background-color: var(--color-Timeless-Grey);
  mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0 100%, 0 60%, 100% 60%, 100% 100%);

  opacity: 1;
  transition: clip-path 1s ease;
}

.service-card-outer:hover::before {
  animation: completeBorder 1s linear forwards;
}

@keyframes completeBorder {

  /* Step 1 — Start: bottom band only */
  0% {
    clip-path: polygon(0 100%, 0 60%, 100% 60%, 100% 100%);
  }

  /* Step 2 — Expanding upward from bottom */
  25% {
    clip-path: polygon(0 100%, 0 40%, 100% 40%, 100% 100%);
  }

  /* Step 3 — Nearly half coverage */
  50% {
    clip-path: polygon(0 100%, 0 20%, 100% 20%, 100% 100%);
  }

  /* Step 4 — Reaching top edge (almost full reveal) */
  75% {
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
  }

  /* Step 5 — Fully filled border (steady state) */
  100% {
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
  }
}


/* === BOUNCE-IN-FWD ICON ANIMATION === */
.service-card-outer:hover .service-card-icon img {
  animation: bounce-in-fwd 1.1s both;
}

@keyframes bounce-in-fwd {
  0% {
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    transform: scale(0.7);
    animation-timing-function: ease-in;
  }

  72% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }

  81% {
    transform: scale(0.84);
    animation-timing-function: ease-in;
  }

  89% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }

  95% {
    transform: scale(0.95);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}



.site-button-link {
  display: inline-block;
  font-weight: 500;
  position: relative;
  padding-left: 0;
  font-size: 14px;
  z-index: 1;
  text-transform: uppercase;
}


.site-button-link i {
  display: inline-block;
  margin: -4px 0px 0px 5px;
  font-size: 16px;
  vertical-align: middle;
  line-height: 24px;
}





.site-button-link {
  display: inline-block;
  font-weight: 500;
  position: relative;
  padding-left: 0;
  font-size: 14px;
  z-index: 1;
  text-transform: uppercase;
  color: var(--color-blk);
  /* default black */
  text-decoration: none;
}

/* Optional: icon beside text */
.site-button-link i {
  display: inline-block;
  margin: -4px 0px 0px 5px;
  font-size: 16px;
  vertical-align: middle;
  line-height: 24px;
}




.site-button-link:hover {
  color: var(--color-green);
}




.hilite-title {
  border: 0px;
}




.icon-count-number {
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 56px;
  font-weight: 600;
  color: rgba(177, 177, 177, 0.2);
  line-height: 120px;
  font-family: var(--font-primary);
  transition: all 0.5s linear;
}

/* Black line (initially short) */
.icon-count-number:after {
  content: "";
  width: 15px;
  /* short before hover */
  height: 2px;
  background-color: var(--color-blk);
  left: -60%;
  top: 50%;
  position: absolute;
  margin-top: -2px;
  transition: all 0.5s ease-in-out;
  transform-origin: left center;
}

/*  When hovering the card, grow the line */
.service-card-outer:hover .icon-count-number:after {
  width: 45px;
  /* grows longer */
  background-color: var(--color-blk);
  /* optional: orange highlight */
}


/* ==================== */
/* BLOG */
/* =================== */
.blog-details {
  padding: 60px 0px 0px 0px;
}

.text-small {
  font-size: 14px;
  font-weight: 600;
  /* text-transform: uppercase; */
  letter-spacing: 0.3px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--text-blk);
  margin: 0px 0px 10px 0px;

}

.text-normal {
  font-size: 18px;
  font-weight: 600;
  /* text-transform: uppercase; */
  font-family: var(--font-primary);
  color: var(--text-blk);
}

.text-heading {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--text-blk);
}

.card-wrapper {
  max-width: 400px;
  border-radius: 0;
  margin: 0px 0px 25px 0px;
  background: var(--text-wt);
  overflow: hidden;
}

.img-reflection {
  background-position: left top;
  position: relative;
  overflow: hidden;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.img-reflection:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  width: 35%;
  height: 200%;
  left: -100%;
  top: -50%;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;

  -moz-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}

.img-reflection:hover:after {
  left: 150%;
}

.main-pic {
  position: relative;
  padding: 10px 10px;
  border: 1px solid lightgray;
  background: var(--color-white);
}

.main-pic img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  padding: 10px;
}

.blog-overlay {
  position: absolute;
  top: 0px;
  left: 0;
  width: 60px;
  height: 75px;
  background: var(--color-lgt);

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.blog-overlay h1 {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  line-height: 1;
  font-family: var(--font-primary);
}

.blog-overlay h3 {
  font-size: 14px;
  letter-spacing: 2px;
  margin: 8px;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 500;
  font-family: var(--font-primary);
}

.blog-text {

  padding: 10px 10px;
}

.blog-text h4:hover {
  color: var(--color-Timeless-Grey);
}

.meta-text {
  color: var(--color-grey);
  font-size: 14px;
  margin-bottom: 8px;
}

.blog-title {
  font-weight: bold;
  margin-bottom: 17.6px;
}

.view-more {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-blk);
  text-underline-offset: 2px;
  cursor: pointer;
}

.site-button-link {
  display: inline-block;
  font-weight: 500;
  position: relative;
  padding-left: 0;
  font-size: 14px;
  z-index: 1;
  text-transform: uppercase;
  line-height: 1.6;
  font-family: var(--font-primary);
}


.site-button-link i {
  display: inline-block;
  margin: -2px 0px 0px 5px;
  font-size: 16px;
  vertical-align: middle;

}





.site-button-link {
  display: inline-block;
  font-weight: 500;
  position: relative;
  padding-left: 0;
  font-size: 14px;
  z-index: 1;
  text-transform: uppercase;
  color: var(--color-blk);
  /* default black */
  text-decoration: none;
}

/* Optional: icon beside text */
.site-button-link i {
  display: inline-block;
  margin: -4px 0px 0px 5px;
  font-size: 16px;
  vertical-align: middle;
  line-height: 24px;
}






.site-button-link:hover:before {
  background: none;
}

.pagination {
  display: flex;
  border: 1px solid #ccc;
  width: fit-content;
  margin-top: 30px;

}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-right: 1px solid #ccc;
  color: var(--color-blk);
  text-decoration: none;
  font-size: 14px;
  background: var(--color-lgt);
 
}

.pagination a:last-child,
.pagination span:last-child {
  border-right: none;
}

.pagination .active {
  background: var(--color-blk);
  color: var(--color-lgt);
  font-weight: bold;
}

.pagination a:hover:not(.active):not(.disabled) {
  background: var(--color-lgt);
}

.pagination .disabled {
  color: #888;
  pointer-events: none;
  background: var(--color-lgt);
}

/* Keyframe animation for blur + spacing effect */
@keyframes focus-in-contract {
  0% {
    letter-spacing: 8px;
    filter: blur(8px);
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
  }
}



/* =========== */
/* Single Blog */
/* ============ */
:root {

  --text-wt: #f1f1f1;
  --text-blk: #0a0a0a;

}


.blog-content h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 32px;
}

.blog-content p {
  margin-bottom: 20px;


}

.text-small {
  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.3px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--text-blk);


}

.testimonial-box {
  border: 1px solid #ddd;
  border-radius: 2px;
  background: var(--color-lgt);
  padding: 32px;

}

.testimonial-quote {
  font-size: 48px;
  font-family: serif;
  color: #ccc;
  float: left;
  line-height: 1;
  margin-right: 16px;
  margin-top: -3px;
}

.testimonial-content {
  overflow: hidden;
}

.testimonial-text {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 24px;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--text-blk);
}

.testimonial-author {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 2px;
  margin-top: 16px;
  font-family: var(--font-primary);
}

.testimonial-position {
  font-size: 12px;
  color: var(--text-blk);
  line-height: 30px;
  font-weight: 600;
  margin-bottom: 0;
}

.pic-wrap img {
  height: 250px;
  object-fit: cover;
  width: 100%;

}

.blog-para p {
  font-family: var(--font-primary);

}

.bg-custom-light {
  background: #f2f4f5;
  border-radius: 2px;
  padding: 32px 32px 40px 32px;
  margin-top: 24px;
  margin-bottom: 40px;
}

.tags-block {
  margin-bottom: 32px;
}

.tags-heading h5 {
  font-weight: 600;
  font-size: 25px;

}

.tag-btn {
  display: inline-block;
  margin: 0 0 5px;
  padding: 8px 14px;
  background: var(--color-lgt);
  border: 1px solid #e3e3e3;
  border-radius: 2px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-blk);
  box-shadow: none;
  transition: background 0.2s;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.tag-btn:hover,
.tag-btn:focus {
  background: var(--color-lgt);
  color: #d7b39a;
}

.share-label {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 11.2px;
}

.social-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: var(--color-lgt);
  text-align: center;
  line-height: 36px;
  font-size: 20px;
  color: var(--color-blk);
  margin-right: 7px;
  transition: background 0.2s;
  box-shadow: none;

}

.social-icon:hover,
.social-icon:focus {
  background: var(--color-blk);
  color: var(--color-lgt);
}


/* ======== */
/* Gallery */
/* ============ */

.gallery-drop {
  display: flex;
  align-items: center;
  justify-content: start;
}

.gallery-drop h2 {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-blk);
  text-transform: capitalize;
  margin: 0px 10px 0px 0px;
}

.dropdown-dplan {
  position: relative;
}

.gallery-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  background: var(--color-lgt);

}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transition: 0.3s ease;
}
.gallery-item:hover img{
transform: scale(1.05);
}
.overlay-box {
  position: absolute;
  left: 0;
  bottom: 20px;
  padding-left: 10px;
  width: 100%;
  pointer-events: none;
}

.overlay-content {
  display: inline-block;
  background: var(--color-lgt);
  color: var(--color-grey);
  min-width: 280px;

  padding: 13px 0px 13px 58px;

  box-sizing: border-box;
  border-radius: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  position: relative;

  width: auto;
  max-width: 60%;

  transform: scaleX(0);
  transform-origin: left bottom;
  transition: transform 0.3s cubic-bezier(.37, .49, .48, 1.26);
  overflow: hidden;
  pointer-events: auto;
}

.gallery-item:hover .overlay-content,
.gallery-item:focus-within .overlay-content {
  transform: scaleX(1);

}

.overlay-content h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  display: inline-block;
  font-family: var(--font-primary);
}

.overlay-content h3::before {
  content: "";
  display: block;
  position: absolute;
  left: -41px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 1px;
  background: #25262c;
}

.overlay-content span {
  display: block;
  font-size: 16px;
  color: color: var(--color-blk);
  font-weight: 400;
  font-family: var(--font-primary);

}

.styled-pagination {
  margin-top: 40px;
  padding: 20px 0;
}

.styled-pagination ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.styled-pagination ul li {
  display: inline-block;
}

.styled-pagination ul li a,
.styled-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--text-blk);
  border-radius: 0;
  text-decoration: none;
  color: var(--text-blk);
  font-weight: 600;
  transition: none;
}

.styled-pagination ul li a:hover {
  transform: none;
}

/* Page number links - hover changes to black background with white text */
.styled-pagination ul li:not(.prev):not(.next) a:hover {
  border-color: var(--text-blk);
  background-color: var(--text-blk);
  color: var(--text-wt);
}

.styled-pagination ul li span.active {
  background-color: var(--text-blk);
  color: var(--text-wt);
  border-color: var(--text-blk);
}

/* Previous and Next arrow buttons */
.styled-pagination ul li.prev a,
.styled-pagination ul li.next a {
  border-radius: 0;
  color: var(--text-blk);
  border: none;
}

/* Arrow icon styling - black color */
.styled-pagination ul li.prev a i,
.styled-pagination ul li.next a i {
  font-size: 14px;
  color: var(--text-blk);
  border: none;
}

/* NO hover effects for arrow buttons */
.styled-pagination ul li.prev a:hover,
.styled-pagination ul li.next a:hover {
  background-color: transparent;
  color: var(--text-blk);
  border-color: var(--text-wt);
  transform: none;
  border: none;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}






/* ======================= */
/* FOOTER  */
/* ====================== */

.dp-footer-logo img {
  width: 130px;
  margin: 0px 0px 25px 0px;
}


.dp-footer-list a {
  text-decoration: none !important;
  font-size: 16px;
  line-height: 36px;
  list-style-type: none;
  font-family: var(--font-primary);
  text-decoration: none;
  color: var(--color-blk);

}

/* .dp-footer ul{
  font-size: 16px;
  line-height: 36px;
  list-style-type: none;
   font-family: var(--font-primary);
   text-decoration: none;
} */

.dp-footer p {
  color: var(--color-blk);
  font-family: var(--font-primary);
}

.dp-footer li a {
  font-family: var(--font-primary);
  color: var(--color-blk);
  display: inline-block;
  margin: 0px 0px 10px 0px;
  line-height: 25px;
  text-transform: capitalize;
  font-size: 14px;
  transition: transform 0.4s ease!important;
}
.dp-footer li a:hover {
 transform: translateX(10px)!important;
}
.ps-1 span{
  font-size: 14px;
}
.footer-heading {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  font-size: 24px;
  color: var(--color-Timeless-Grey);
  font-family: var(--font-primary);
}

.footer-heading::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  background-color: var(--color-Timeless-Grey);
  margin-top: 5px;
}

.footer-span-info {
  padding-left: 10px;
}
.footer-span-info span{
 font-size: 14px;
 margin: 0px 0px 7px 0px!important;
}
.dp-footer-info {

  margin-left: 0 !important;
  padding-left: 0 !important;
  font-family: var(--font-primary);
}

.dp-footer-info i {
  font-size: 37px;
  font-size: 30px;

}

.footer-contact-info {
  
  font-family: var(--font-primary);
}

.footer-call-icon {
  background-color: var(--color-Timeless-Grey);
  width: 30px;
  height: 30px;
  line-height: 45px;
  font-size: 12px;
  color: var(--color-wt);
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-call-icon:hover {
  background-color: var(--color-green);
}

.green-text {
  color: var(--color-blk);
  
}

.footer-image img {
  width: 78px;
  margin: 0px 5px 10px 0px;
  height: 78px;
  object-fit: cover;
}



.service-section {
  display: block;
  position: relative;
  padding: 60px 0px 60px 0px;
  min-height: 500px;
}

.service-image {
  display: block;
  margin: 0px 0px 20px 0px;
}

.service-lists a {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-lg-black);
  background-color: var(--color-wt);
  padding: 14px 15px;
  text-decoration: none;
  width: 100%;

}

.service-types h1 {
  font-family: "roboto condensed";
  font-size: 24px;
  font-weight: 600;
  color: var(--color-lg-black);
}

.service-lists li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-lists li a i {
  font-size: 16px;
  color: #333;
}

.service-types {
  display: block;
}

.service-lists a i {
  font-size: 16px;
  color: var(--color-lg-black);
  /* font-weight: 400; */
  margin: 0px 0px 0px 30px;
  right: 12;
}

ul.service-lists li a:before {
  /* content: "\f113"; */
  position: absolute;
  right: 12px;
  top: 16px;
  /* font-family: Flaticon; */
  color: #010d14;
}

.service-lists li {
  margin: 0px 0px 10px;
  list-style: none;
}

.service-lists :hover  {
  background-color: var(--color-green);
  color: var(--color-lg)!important;
  transition: all .5s cubic-bezier(0.25, 0.1, 0.27, 0.75);
}
.service-lists :hover i{
  color: var(--color-white);
}
.service-lists a  i :hover{
  color: var(--color-white);
}




.best-content h1 {
  font-family: var(--font-primary);
  font-size: 32px;
  margin: 0px 0px 10px 0px;
  font-weight: 600;
  color: var(--color-lg-black);
}

.best-content p {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-lg-black);
  line-height: 26px;
  margin: 0px 0px 20px;
  text-align: justify;
}

.tick-list {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-lg-black);
  font-weight: 400;
  line-height: 30px;
  padding-left: 0px;
}

.tick-list i {
  font-size: 20px;
  color: var(--color-yl);


}
.service-lists li a i:hover{
  color: var(--color-white)!important;
}
.enquiry h3 {
  font-family: var(--font-primary);
  font-size: 25px;
  font-weight: 600;
  color: var(--color-wt);
}

.address-wrap h2 {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-wt);
  text-align: center;
  margin-top: 20px;
}

.address-wrap h2 span {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 600;
  color: #FFD43B;
}

.address-wrap i {
  text-align: center;
  color: #010d14;
  border-radius: 50%;
  font-size: 40px;
  position: relative;
  z-index: 9;
  width: 80px;
  height: 100px;
  vertical-align: middle;
  margin-left: 0;
  height: auto;
  background-color: var(--color-yl);
  padding: 20px;
  display: inline-block;
}

.enquiry {
  background-image: url(../images/service/enq.webp);
  display: block;
  padding: 60px 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 300px;
  text-align: center;
}

.addres-parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.enquiry {
  position: relative;
  background-image: url(../images/gallery/gallery-9%20950%20800%20-11.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 300px;
  padding: 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-wt);
  z-index: 1;
  overflow: hidden;
}

.enquiry::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(12, 46, 103, .84);
  z-index: 0;
}

.divider {
  border: 1px dashed var(--color-yl);
  width: 100%;
  margin: 20px auto;
}


.enquiry * {
  position: relative;
  z-index: 2;
}

.brochure-box {
  background-color: var(--color--gy);
  padding: 60px;
  margin: 20px 0px 0px 0px;

}

.brochure-content h1 {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-blk);


}

.brochure-content h2 {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-blk);
  background-color: var(--color-yl);
  padding: 10px 0px 10px 10px;
  margin: 0px 10px
}

.brochure-content a {
  background-color: var(--color-yl);
  padding: 20px 20px 20px 20px;
  color: var(--color-blk);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.brochure-content span a {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--font-primary);
  font-weight: 400;
  text-decoration: none;
  background-color: var(--color-blk);
  padding: 20px;
  margin: 0 !important;
  color: var(--color-wt);
}

.brochure-content a.round-button {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--font-primary);
  font-weight: 600;
  text-decoration: none;
  background-color: var(--color-wt);
  z-index: 9;
  border-radius: 100%;
  border: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
  position: absolute;
  overflow: hidden;
  height: 30px;
  width: 30px;
  left: 40%;
  bottom: -5%;
}

.brochure-content p {
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-blk);
  font-weight: 400;
  margin: 0px 0px 30px 0px;
}

.brochure-content {
  position: relative;
  font-weight: 400;

}

.work-image {
  margin: 30px 0px 0px 0px;
}

.tick-list li {
  display: flex;
}


.tick-list {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-lg-black);
  font-weight: 400;
  line-height: 30px;
}

.tick-list i {
  font-size: 16px;
  color: var(--color-yl);
  margin: 10px 10px 0px 0px;

}

/* ------------breadcrumb--------------- */
.d-plans {
  position: relative;

}

.slide_item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 120px;
  min-height: 100vh;
}



.image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}


.slide-one {
  background-image: url(../images/slider/d-plans-1.webp);
}

.slide-two {
  background-image: url(../images/slider/d-plans-2.webp);
}

.slide-three {
  background-image: url(../images/slider/d-plans-3.webp);
}

.slide-four {
  background-image: url(../images/slider/FRONT%20PAGE%2003.webp);
}

.image-layer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.10);
}

.slide-content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}

.owl-item.active .slide-content {
  opacity: 1;
  transform: translateY(0);
}


.slide-content h1 {
  font-size: 25px;
  color: var(--font-primary);
  font-weight: 400;
  color: var(--color-white);
  text-align: left;
}

.slide-content h2 {
  font-size: 32px;
  font-family: var(--font-primary);
  font-weight: 500;
  max-width: 600px;
  color: var(--color-lgt);
  text-align: left;

  
}

.slide-content p {
  font-size: 16px;
  max-width: 600px;
  font-family: var(--font-primary);
  margin: 0px 0px 25px 0px;
  color: var(--color-white);
}


.slider-button a {
  background: var(--color-green);
  padding: 12px 20px;
  color: var(--font-primary);

  font-weight: 500;
  color: var(--color-white);
}

.slider-button span {
  background: var(--font-primary);
  color: var(--color-green);
  padding: 12px 20px;
  font-weight: 500;
  background-color: var(--color-white);
  margin: 0px 15px;
}

.contact-head h1 {

  font-size: 28px;
  font-weight: 600;
  color: var(--color-dk-black);
  text-align: center;
}

.image-layer img {
  transform: scale(1);
  z-index: 0;
}

.owl-item.active .image-layer {
  transform: scale(1.15);
  transition: all 6000ms linear;
}
.social-media-links {
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  right: 0px;
  top: 30%;
  padding: 10px 0px 20px 10px;
  bottom: 50%;
  z-index: 99;   
   transition: transform 0.3s ease;
  height: 270px;
  border-radius: 15px 0px 0px 15px;
}
.social-media-links ul li a img{
  width: 18px!important;
  margin: 0px 10px 20px 0px;
 
}
.social-media-links ul li a img:hover{
   transform: translate(-6px);
}
/* -----------contact form--------------- */
/* -----------banner--------------- */
.banner-section {
  background-color: var(--color-Timeless-Grey);
  padding: 60px 0px 60px 0px;
}

.banner-icon img {
  width: 30px;
  margin: 5px 0px 0px 0px;

}

.banner-details {
  display: flex !important;
}

.icon-content h1 {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  margin: 10px 0px;
  color: var(--color-white);
  margin: 10px 0px 0px 10px;
}

.icon-content span {
  font-weight: 600;
  color: var(--color-white);
}

.banner-head h1 {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  max-width: 500px;
  color: var(--color-white);
  
}

.learn-more a {
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-dk-black);
  padding: 10px 20px 10px 20px;
  float: right;
    margin: 0px 0px 20px 0px;
}

.learn-more img {
  width: 20px;
  color: var(--color-dk-black);
  margin: 0px 0px 0px 10px;
}

.learn-more i {
  margin: 0px 0px 0px 10px;

}

.service-type {
  position: relative;
  margin: 0px 0px 30px 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: end;
}

.image-banner img {
  transition: .3s ease-in-out;
}

.image-banner:hover img {
  transform: scale(1.05);
}

.service-content {
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  left: 20px;
  right: 20px;
  padding: 10px;
  background-color: var(--color-white);
  min-height: 75px;
}

.service-content h1 {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-Timeless-Grey);
  margin: 0px 0px 3px 0px;
}

.service-content h2 {

  font-size: 20px;
  font-weight: 500;
  color: var(--color-dk-black);
  font-family: var(--font-primary);
 
}

.service-icon {
  text-align: end;
}

.service-icon {
  position: absolute;
  right: 36px;
  bottom: 46px;
  background-color: var(--color-Timeless-Grey);
  padding: 0px 15px;
  color: var(--color-white);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.service-icon:hover{
  background-color: var(--color-green);
}

.service-icon img {
  width: 20px;
  text-align: center;
}

.bottom-paragraph p {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-white);
  max-width: 900px;
  line-height: 27px;
}
.works-carousel .service-icon img {
  width: 20px;
}



/* -------------banner----------------- */
/* -------------logo section------------------ */
.logo-construction {

  padding: 20px 0px 20px 0px;
}

.logo-pic {
  width: 100px;
  margin: 0px 0px 20px 0px;
  display: inline-block;

}

.logos {
  padding: 10px 0px;
  display: block;
  text-align: center;
  box-shadow: 1px 6px 10px rgba(0, 0, 0, 0.1);
  background-color: var(--color-white);
}

.logo-construction h1 {
  font-family: var(--font-primary);
  font-size: 38px;
  color: var(--color-blk);
  font-weight: 600;
}

/* -------------logo section------------------ */
/* -----------------project--------------------- */
.project-section {
  background-color: var(--color-lb);
  padding: 60px 0px 60px 0px;
}

.project-head {
  border-right: 2px solid var(--color-yellow);
  display: inline-block;
  border-radius: 1px;
}

.project-head h1 {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0px 0px 5px 0px;
}

.project-head h2 {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0px 30px 10px 0px;
}

.project-content {
  display: flex;
  margin: 0px 0px 30px 0px;
}



.project-right p {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
  max-width: 600px;
  margin: 0px 0px 0px 30px;
}

.project-type {
  border: 1px solid var(--color-grey);
  padding: 20px 10px;
  position: relative;
  min-height: 420px;
  margin: 0px 0px 20px 0px;

}

.type-content h1 {
  -webkit-text-stroke: 2px rgba(141, 134, 134, 0.1);
  font-size: 80px;
  font-weight: 600;
  color: transparent;

}

.type-content h2 {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0px 0px 8px 0px;
}

.type-content p {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;

  color: var(--color-white);
  max-width: 500px;
  margin: 0px 0px 20px 0px;

}

/* -----------------project--------------------- */
/* -----------video--------------- */
.video-section {
  background-image: url(../images/home/RESI%20INT%2012.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;

  justify-content: center;
  min-height: 500px;
  position: relative;
}

.video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  text-align: center;


}

/* -----------video--------------- */
/* -----------client says--------------- */
.client-says {
  padding: 60px 0px 60px 0px;
  background-color: var(--color-lt-wt);
}

.client-head {
  display: flex;
}

.client-content {
  border-right: 2px solid var(--color-green);
  margin: 0px 30px 0px 0px;
}

.client-right p {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-dk-black);
  max-width: 600px;
}

.client-content h1 {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-dk-black);

}

.client-content h2 {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-blk);
  margin: 0px 80px 0px 0px;

}

.client-review {
  background-color: var(--color-white);
  padding: 50px !important;
  position: relative;
  min-height: 250px;
  box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.1);
  margin: 0px 0px 50px 0px;
}

.review-content p {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-dk-black);
  text-align: center;
  margin: 0px 0px 20px 0px;
}

.review-left {
  position: absolute;
  left: 15px;
  top: 20px;
  width: 30px;
}

.review-right {
  position: absolute;
  right: 15px;
  top: 85px;
  width: 30px;

}

.profile-image img {
  position: absolute;
  bottom: -42px;
  right: 39%;
  left: 42%;
  width: 80px !important;
  overflow: visible;

}


.profile-image img {
  margin: 0px 0px 15px 0px;
}

.reviewer-name h1 {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 0px 0px 5px 0px;
  text-transform: capitalize;
}

.reviewer-name h2 {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0px 0px 10px 0px;
}

.client-review {
  z-index: 99;
  position: relative;
}

.client-review .owl-nav {
  display: block !important;
  z-index: 99;
}

.client .owl-nav {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.client .owl-nav button span {
  font-size: 35px;
}

.client .owl-nav button {
  background: #000;
  color: #fff !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.client {
  position: relative;
  margin-bottom: 80px;
}

.client-says .owl-prev {
  background-color: var(--color-blk) !important;
  color: var(--color-white) !important;
  width: 30px !important;
  color: var(--color-white) !important;
}

.client-says .owl-next {
  background-color: var(--color-blk) !important;
  color: var(--color-white) !important;
  width: 30px !important;
  font-size: 15px;
  color: var(--color-white) !important;
}

.client-says .owl-carousel .owl-nav {
  display: block !important;

}


/* -----------client says--------------- */
/* -------------experience------------- */
.experience-section {
  padding: 40px 0px 40px 0px;
}

.experience-content h1 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-dk-black);
  margin: 0px 0px 20px 0px;

}

.experience-content h2 {
  font-family: var(--font-primary);
  font-size: 35px;
  font-weight: 600;
  color: var(--color-dk-black);
  max-width: 400px;
  margin: 0px 0px 20px 0px;
}

.experience-content p {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-dk-black);
  text-align: justify;
  margin: 0px 0px 10px 0px;
  max-width: 300px;
}

.experience-btn a {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-dk-black);

}

.exp-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}


.exp-left-column {
  display: grid;
  grid-template-rows: 150px 315px;
  gap: 15px;
}


.top-box {
  background: var(--color-lt-wt);
  padding: 15px;
  grid-template-rows: 150px 250px;
  text-align: right;
  position: relative;
  background-image: url(../images/home/grid.webp);
  height: 154px;

}

.top-box h4 {
  font-size: 14px;
  margin: 0px;
}

.top-box h1 {
  font-family: var(--font-primary);
  font-size: 30px;

}



.exp-num {
  
  position: absolute;
 top: 83px;
  left: 55%;
  line-height: 0.85!important;
  width: 45%;
  height: 8px;  
  bottom: 20px; 
  z-index: 99;            
         
  pointer-events: none;
}

.exp-num {
  font-size: 80px;
  color: transparent;
  -webkit-text-stroke: 2px #9a9a9a;
 
}


.bottom-box {
  gap: 15px;
}

.bottom-box img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  grid-template-rows: auto 1fr;

}


.exp-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;

}

.exp-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}


.img-large {
  grid-column: span 2;
}

.experience-right {
  position: relative;
  z-index: 99;


}

.experience-content::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 80%;
  height: 80%;
  background-size: 12px 12px;
  /* background-image: url(../images/home/bg-5.png); */
  background-repeat: repeat !important;

  background-color: var(--color-Timeless-Grey);
  z-index: -10;

}

.experience-content::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: -8px;
  width: 80%;
  height: 80%;
  background-size: 12px 12px;
  /* background-image: url(../images/home/bg-5.png); */
    background-color: var(--color-Timeless-Grey);
  background-repeat: repeat !important;

  z-index: -10;
}

.dplan-foot {
  background-color: #DCDDD8;
}

.experience-content {
  position: relative;
  background-color: var(--color-white);
  padding: 20px;
  max-width: 400px;
  /* min-width: 300px; */
}

/* -------------experience------------- */