@charset "utf-8";
/* CSS Document */

/*------------------------------------------
Project Name : Build Construct
Desgined By  : hassan_malik19
Developed By : Hassan;
Date        :  6/Jan/18;

Table Of Index
------------------
1. Base css
2. Top bar css
3. Header css
4. Banner css
5. Slider Video wrap start
6. Custom slider options start
7. About us css
8. Quote css
9. Services css
10. Porfolio css
11. Testimonials css	
12. Our Team  css
13. Contact Us
14. footer css
------------------------------------------*/

/*********************************************
		base css
*********************************************/
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

body {
  font-family: "Open Sans", sans-serif;
  /* background-color: #2a2929; */
}

a {
  transition: color 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto; /* Ensures images don't stretch */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
}

h1 {
  font-size: 2.5rem; /* Scalable font */
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  text-transform: uppercase;
}

h1:before {
  content: "";
  /*background: url(../images/underline.png) no-repeat;*/
  width: 70px;
  height: 8px;
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
}

h1 span {
  color: #b3be43;
}

p {
  font-size: 1rem; /* Responsive text */
  line-height: 1.6;
  color: #333;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.8rem;
  }
}

/*********************************************
		Header start
*********************************************/
.header {
  background: #b3be43;
}
.logo {
  padding: 10px 0px;
}
.navbar {
  margin-bottom: 0px;
}
.navigationwrape {
  float: right;
}
.navbar-default .navbar-nav > li > a {
  padding: 33px 16px;
  font-size: 14px;
  color: #231f20;
  font-weight: 600;
  text-transform: uppercase;
}
.navbar-default .navbar-nav > li:hover > a,
.navbar-nav li:hover .dropdown-menu {
  color: #fff;
  background: #fdc236;
}
.navbar-default .navbar-nav > li > a.active {
  color: #fff;
  background: #b3be43;
}
.navbar-default {
  background: none;
  border: none;
}
.navbar {
  min-height: 0px;
}
.sticky {
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 10000;
  height: 86px;
  border-bottom: 1px solid #eee;
  -webkit-box-shadow: 0 2px 4px rgba(3, 3, 3, 0.11);
  -moz-box-shadow: 0 2px 4px rgba(3, 3, 3, 0.11);
  box-shadow: 0 2px 4px rgba(3, 3, 3, 0.11);
}
.navbar-toggle {
  background: #000;
  position: absolute;
  top: 18px;
  right: 0;
}
.navbar-toggle .icon-bar {
  background: #fff;
}
.navbar {
  z-index: 10000;
}
.custom-navbar .nav li.active > a {
  background-color: transparent;
  color: #1f72d9;
}
.navbar {
  border: none;
}

/*********************************************
	 slider Start
*********************************************/
.slider-wrap {
  background: url(../images/banner2.jpg) no-repeat;
  background-size: cover;
  padding: 60px 0;
}
.formwrap {
  background: rgba(0, 0, 0, 0.51);
  padding: 30px;
  border: 1px solid #fff;
}
.formwrap h3 {
  font-size: 30px;
  color: #000;
  margin-top: 0px;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 15px;
}
.formwrap p {
  font-size: 16px;
  color: #fff;
  line-height: 22px;
}
.formwrap .form-control {
  border-radius: 0;
  height: 50px;
  border: none;
}
.formwrap textarea.form-control {
  height: 110px;
}
.formwrap .btn {
  background: #b3be43;
  border: solid 1px #fff;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  border-radius: 0;
  padding: 12px 15px;
}
.form-group {
  margin-bottom: 10px;
}
.formwrap .btn:hover {
  background: #fff;
  color: #000;
  border: solid 1px #b3be43;
}
.banner-info {
  margin-top: 100px;
}
.slider-wrap h2 {
  font-size: 70px;
  color: #fff;
  font-weight: bold;
  margin-top: 50px;
}
.slider-wrap h2 span {
  color: #b3be43;
  text-shadow: 3px 4px rgba(0, 0, 0, 0.11);
}
.slider-wrap p {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  line-height: 30px;
  margin-top: 15px;
}
.slider-wrap .readmore {
  margin-top: 18px;
}
.slider-wrap .readmore a {
  padding: 14px 36px;
  font-size: 18px;
  background: #b3be43;
  color: #fff !important;
  text-shadow: none;
}
.slider-wrap .readmore a:hover {
  color: #000 !important;
  background: #fff;
}
.consultWrap {
  text-align: center;
}
.slideWrp {
  position: relative;
}
.sliderForm {
  width: 360px;
  float: right;
}
.hoverForm {
  position: absolute;
  top: 65px;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/*********************************************
	Slider Video wrap start
*********************************************/
.videoWrp {
  background: none;
  position: relative;
  padding: 0;
  height: 600px;
}
.hero-wrapper {
  height: 600px;
  min-width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
}
.video {
  position: relative;
}
.hero-wrapper:before {
  content: "";
  position: absolute;
  top: -60px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.hero-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  top: 0;
  background-position: center center;
  background-size: cover;
}
.hero-image #bgvid {
  display: block;
  min-height: 100%;
  min-width: 100%;
  max-width: inherit;
}
.videohover {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/*********************************************
	Custom slider options start
*********************************************/
.tp-banner-container {
  position: relative;
  z-index: 1;
  padding: 0;
  width: 100%;
}
.tp-banner {
  position: relative;
  width: 100%;
}
.tp-caption {
  line-height: normal !important;
}
.tp-caption a {
  color: inherit !important;
}
.tp-bullets.simplebullets.round .bullet {
  border: 3px #fff solid;
  border-radius: 50%;
  background-image: none !important;
}
.tparrows {
  width: auto !important;
  height: auto !important;
  background-image: none !important;
}
.tp-arr-allwrapper {
  margin: 0 10px;
  width: 50px;
  height: 60px;
  background: rgba(255, 255, 255, 0.5);
}
.tp-arr-allwrapper:hover .tp-arr-iwrapper {
  color: #fff;
}
.tp-leftarrow .tp-arr-allwrapper {
}
.tp-rightarrow .tp-arr-allwrapper {
}
.tp-arr-iwrapper {
  color: #000;
  text-align: center;
  font-size: 30px;
  font-family: FontAwesome;
  line-height: 60px;
}
.tp-leftarrow .tp-arr-iwrapper {
}
.tp-leftarrow .tp-arr-iwrapper:before {
  content: "\f104";
}
.tp-rightarrow .tp-arr-iwrapper:before {
  content: "\f105";
}
.tp-rightarrow .tp-arr-iwrapper {
}
.slide-h1 {
  margin: 5px 0 !important;
  padding: 0 0 10px !important;
  padding-bottom: 5px !important;
  color: #444;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 57px;
}
.slide-h2 {
  margin: 5px 0 !important;
  padding: 0 0 10px !important;
  padding-bottom: 5px !important;
  color: #555;
  font-weight: bold;
  font-size: 55px;
  line-height: 100%;
}
.big-font {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 60px;
}
.large-desc {
  font-size: 16px;
}
.slide-h3 {
  color: #fff;
  font-size: 31px;
  line-height: 100%;
}
.slide-h3 span {
  text-transform: uppercase;
  font-weight: bold;
}
.slide-head {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 30px;
}
.slide-desc {
  font-size: 22px;
  line-height: 150%;
}
.main-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 70px;
}
.icon-cont {
  padding: 15px 40px;
  border-radius: 10px;
  text-align: center;
}
.icon-cont:after {
  position: absolute;
  bottom: -10px;
  left: 40%;
  z-index: 5;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  content: "";
}
.icon-cont i {
  margin-bottom: 10px;
  color: #fff;
  font-size: 50px;
}
.icon-cont span {
  display: block;
  padding: 0 0 5px;
  color: #fff;
  text-align: center;
  font-size: 18px;
}
a.wit-btn {
  background: #fff;
  color: #333 !important;
  text-transform: uppercase;
}
.wit-line {
  width: 5%;
  height: 1px;
  background: #fff;
}
.vert-line {
  min-height: 270px;
  width: 1px;
  background: #fff;
}
.subTxt {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 17px;
  color: #333;
}
.large-title {
  color: #222;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase !important;
}
.large-light-title {
  color: #787878 !important;
  font-size: 70px;
  font-weight: lighter;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.large-text {
  font-size: 20px;
  color: #000;
  font-weight: lighter;
}
.larger-text {
  font-size: 24px;
  font-weight: lighter;
  text-transform: uppercase;
}
.witTxt {
  color: #fff !important;
}
.light-font {
  font-weight: lighter !important;
  font-size: 50px;
}
.black-bg {
  background: rgba(0, 0, 0, 0.63);
  color: #a8a8a8;
  text-transform: none;
}
.lft-list {
  padding: 10px;
  font-size: 18px;
  color: #fff;
}
.wit-border {
  border: 1px #fff solid;
  padding: 15px 60px;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
}
.rounded-bord {
  margin-right: 15px;
  border: 1px #fff solid;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  border-radius: 50%;
}
#vertical-ticker {
  height: 120px;
  overflow: hidden;
}
#vertical-ticker li {
  padding: 15px 20px;
  display: block;
  text-align: center;
}
.to-bottom i.fa {
  font-size: 30px;
  border: 2px #a8a8a8 solid;
  padding: 20px 22px;
  border-radius: 50%;
  -webkit-animation: bounce 2s infinite linear;
  animation: bounce 2s infinite linear;
}
.slidertext1 {
  color: #fff;
  font-size: 70px;
  font-weight: 700;
  text-transform: none !important;
  text-align: left;
  z-index: 10000;
  text-shadow: 0 0 1px rgba(24, 24, 24, 0.75);
  font-family: "Oswald", sans-serif;
  margin-left: 60px;
}
.slidertext1 span {
  color: #b3be43;
}
.slidertext2 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: none !important;
  text-align: left;
  z-index: 10000;
  margin-left: 60px;
}
.slidertext4 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: none !important;
  text-align: center;
  text-shadow: 0 0 1px rgba(24, 24, 24, 0.75);
  z-index: 10000;
  margin-left: 60px;
}
.slidertext3 a {
  color: #000 !important;
  font-size: 18px;
  font-weight: 700;
  padding: 14px 34px;
  text-transform: uppercase !important;
  text-align: left;
  background: #fdc236;
  z-index: 10000;
}
.tp-bannertimer {
  display: none;
}
.slidertext3 {
  margin-left: 60px;
}

@-webkit-keyframes bounce {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0);
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0);
  }
}
/*********************************************
	Custom slider options end
*********************************************/

/*********************************************
	About-wrap start
*********************************************/
.about-wrap {
  padding: 60px 0;
}
.about-wrap h1 {
  text-align: left;
  margin-bottom: 40px;
  margin-top: 0;
}
.about-wrap h1:before {
  left: 0;
  margin-left: 0;
}
.aboutTxt {
  font-size: 24px;
  font-weight: bold;
  color: #3a3a3a;
}
.aboutTxt span {
  display: block;
}
.about-wrap p {
  font-size: 16px;
  line-height: 24px;
  color: #000;
  margin-top: 10px;
}
.about-wrap .view-all {
  text-align: left;
}
.inner-about {
  padding-bottom: 20px;
}
.iconsWrp {
  text-align: center;
  margin-top: 18px;
}
.iconsWrp h6 {
  font-size: 18px;
}
.icon-box .icon-wrap.icon-border-effect {
  position: relative;
}
.icon-box .icon-wrap.icon-lg {
  height: 90px;
  line-height: 90px;
  text-align: center;
  width: 90px;
}
.icon-box .icon-wrap.icon-circled {
  border-radius: 50%;
}
.icon-box .icon-wrap.icon-dark {
  color: #fff;
}
.icon-box .icon-wrap.icon-dark {
  background-color: #b3be43;
}
.icon-box .icon-wrap {
  display: inline-block;
  height: 64px;
  margin-bottom: 8px;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 64px;
}
.icon-box i {
  display: inline-block;
  font-size: 40px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.icon-box .icon-wrap.icon-lg i {
  line-height: 90px;
}
.icon-box .icon-wrap.icon-border-effect.effect-circled::after {
  border-radius: 50%;
}
.icon-box .icon-wrap.icon-border-effect::after {
  border-radius: 50%;
  box-sizing: content-box;
  content: "";
  height: 100%;
  left: -4px;
  opacity: 0;
  padding: 4px;
  top: -4px;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.icon-box .icon-wrap.icon-border-effect::after {
  box-shadow: 0 0 0 3px #b3be43;
}
.icon-box .icon-wrap.icon-dark:hover {
  color: #fff;
}
.icon-box .icon-border-effect:hover::after,
.icon-box:hover .icon-border-effect::after {
  opacity: 1;
  transform: scale(1);
}
.aboutImg {
  position: relative;
  display: inline-block;
}
.aboutImg:before {
  content: "";
  border: 1px solid #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  z-index: 1;
}

/*********************************************
		Quote wrap start
*********************************************/
.quote-wrap {
  background: #b3be43;
  padding: 30px 0;
}
.quote-wrap h2 {
  color: #353535;
  margin: 0px !important;
  font-size: 24px;
}
.quote-wrap p {
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
}
.quote-wrap .quote-btn {
  text-align: center;
}
.quote-wrap .quote-btn a {
  background: #fff;
  color: #000;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 27px;
  font-weight: bold;
}
.quote-wrap .quote-btn a:hover {
  background: #000;
  color: #fff;
}

/*********************************************
		Services start
*********************************************/
.service-wrap {
  padding: 60px 0;
  background: url(../images/service-bg.jpg) no-repeat top;
  background-size: cover;
  text-align: center;
}
.service-wrap h3 a {
  font-size: 24px;
  text-decoration: none;
  color: #000;
}
.service-wrap h3 a:hover {
  color: #b3be43;
}
.service-wrap h1 {
  color: #fff;
}
.service-wrap h1:before {
  background: url(../images/underline-white.png) no-repeat;
}
.service-details {
  background: #fff;
  padding: 15px 15px 25px 15px;
}
.service-details h3 {
  margin-top: 10px;
}
.readmore a {
  position: relative;
  vertical-align: middle;
  z-index: 1000;
  background: #b3be43;
  color: #fff !important;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 12px 30px;
  display: inline-block;
}
.readmore a:hover {
  color: #fff !important;
  background: #000;
}
.inner-content .service-details {
  background: #f3f3f3;
}
.inner-content .service-wrap {
  background: none;
  padding: 0;
}
.service-image {
  position: relative;
  overflow: hidden;
}
.service-image:before {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#cc8809),
    to(transparent)
  );
  background-image: -webkit-linear-gradient(transparent, #cc8809);
  background-image: -moz-linear-gradient(transparent, #cc8809),
    -moz-linear-gradient(transparent, #cc8809);
  background-image: -o-linear-gradient(transparent, #cc8809),
    -o-linear-gradient(transparent, #cc8809);
  background-image: linear-gradient(transparent, #cc8809),
    linear-gradient(transparent, #cc8809);
  -moz-background-size: 100%;
  background-size: 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.serviceList li {
  margin: 10px;
}
.service-image img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.serviceList li:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.hoverlink {
  left: 0;
  right: 0;
  line-height: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 110%;
  transform: translateY(-50%);
  margin: 0 auto;
  z-index: 7;
  font-size: 36px;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.serviceList li:hover .service-image:before {
  opacity: 1;
  visibility: visible;
  bottom: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.serviceList li:hover .hoverlink {
  opacity: 1;
  visibility: visible;
  top: 45%;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.icon {
  z-index: 1000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -35px;
  margin-top: -35px;
}
.icon a {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.6);
  width: 70px;
  height: 70px;
  border-radius: 100%;
  display: block;
  font-size: 30px;
  color: #000;
  text-align: center;
  line-height: 70px;
}

/*********************************************
		Porfolio wrap
*********************************************/
.porfolio-wrap {
  padding: 60px 0;
}
.porfolio-wrap h1 {
  margin-bottom: 30px;
}
.portfolio-service li {
  margin-top: 30px;
}
.project-image {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
.porfolio-wrap h3 a {
  text-decoration: none;
  color: #fff;
  font-size: 30px;
}
.portfolio-tags {
  color: #fff;
}
.project-image:before {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#cc8809),
    to(transparent)
  );
  background-image: -webkit-linear-gradient(transparent, #cc8809);
  background-image: -moz-linear-gradient(transparent, #cc8809),
    -moz-linear-gradient(transparent, #cc8809);
  background-image: -o-linear-gradient(transparent, #cc8809),
    -o-linear-gradient(transparent, #cc8809);
  background-image: linear-gradient(transparent, #cc8809),
    linear-gradient(transparent, #cc8809);
  -moz-background-size: 100%;
  background-size: 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.portfolio-overley h3 {
  border-radius: 50%;
  left: 0;
  right: 0;
  line-height: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  color: #fffefe;
  position: absolute;
  top: 110%;
  transform: translateY(-50%);
  margin: 0 auto;
  z-index: 7;
  font-size: 36px;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.portfolio-service li:hover .project-image:before {
  opacity: 1;
  visibility: visible;
  bottom: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.portfolio-service li:hover .portfolio-overley h3 {
  opacity: 1;
  visibility: visible;
  top: 45%;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.portfolio-tags {
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  font-size: 16px;
  position: absolute;
  top: 110%;
  font-weight: 600;
  transform: translateY(-50%);
  margin: 0 auto;
  z-index: 7;
  color: #fffefe;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.portfolio-service li:hover .portfolio-tags {
  opacity: 1;
  visibility: visible;
  top: 58%;
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}
.portfolio-service li:hover .builder {
  top: 62% !important;
}

/*********************************************
		Testimonials-wrap
*********************************************/
.testimonials-wrap {
  background: url(../images/testimonial-bg.jpg) no-repeat top;
  padding: 50px 0;
  background-size: cover;
  background-attachment: fixed;
}
.testimonials-wrap h1 {
  color: #fff;
}
.testimonials-wrap h1:before {
  background: url(../images/underline-white.png) no-repeat;
}
.testimonials li {
  margin: 10px;
  margin-top: 20px;
}
.testi-info {
  background: #fff;
  padding: 40px 30px 30px 50px;
  position: relative;
  margin-bottom: 50px;
}
.testi-info p {
  position: relative;
  font-size: 14px;
  line-height: 24px;
  font-style: italic;
  color: #696969;
}
.testi-info p:before {
  content: "\f10d";
  font-family: "FontAwesome";
  position: absolute;
  top: -5px;
  left: -29px;
  color: rgba(253, 194, 54, 0.41);
  font-size: 43px;
  font-style: normal;
}
.name {
  font-size: 18px;
  float: left;
  color: #fff;
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
}
.name span {
  display: block;
  text-transform: none;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.client-image img {
  border-radius: 100%;
  border: 2px solid #fff;
}
.client-image {
  float: left;
  margin-right: 15px;
}
.test .testi-info {
  background: #eee;
}
.test .client-image img {
  border: 2px solid #eee;
}
.test li {
  margin: 0;
  margin-top: 20px;
}
.testi-info:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 80px;
  border-width: 20px 20px 0px 0px;
  border-style: solid;
  border-color: #fff transparent;
  display: block;
  width: 0;
}
.owl-controls .owl-nav {
  display: none;
}

/*********************************************
		Our Team Wrap start
*********************************************/
.teamWrp {
  text-align: center;
}
.team_wrap {
  padding: 50px 0;
}
.team_wrap h1 {
  margin-bottom: 40px;
}
.team_wrap p {
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin-bottom: 25px;
}
.team {
  display: inline-block;
  background-color: #fff;
  margin: 0px 0px 30px;
}
.team-info h5 {
  margin-bottom: 0;
}
.team-info {
  text-align: center;
  position: relative;
  padding: 7px 15px;
  background: #b3be43;
}
.team-info h5 > a {
  font-size: 18px;
  text-decoration: none;
  color: #000;
  display: block;
  margin: 0px 0px 5px;
  text-transform: uppercase;
}
.team-info span {
  font-size: 14px;
  color: #242424;
  display: block;
}
.team-info ul {
  border-top: 1px solid #cecece;
  padding: 8px 5px 5px 5px;
  background: #b3be43;
}
.team-info ul li {
  position: relative;
}
.team-info ul li a {
  color: #fff;
  font-size: 18px;
}
.team-info h5 > a:hover {
  color: #222;
}
.team:hover .team-image img {
  transform: scale(1.2) rotate(-6deg);
  -webkit-transform: scale(1.2) rotate(-6deg);
  -moz-transform: scale(1.2) rotate(-6deg);
}
.team-image {
  position: relative;
  overflow: hidden;
}
.team .team-image img {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.expert-team {
  padding-top: 0;
}
.team-image ul {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  background: #fdc236;
  padding: 15px 0px;
  transform: perspective(500px) rotateX(90deg);
  transition: all 0.5s;
  transform-origin: bottom;
}
.team-image ul li {
  display: inline-block;
  margin: 0px 2px;
}
.team-image ul li a {
  background: #fafafa none repeat scroll 0 0;
  display: block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  color: #051429;
}
.team-image img {
  transition: all 0.5s;
}
.team-image ul li a:hover {
  background: #222;
  color: #fff;
}
.team:hover .team-image ul {
  transform: perspective(500px) rotateX(0deg);
}
.team-image ul li:nth-child(1) a:hover {
  background: #3b5998 !important;
  color: #fff;
}
.team-image ul li:nth-child(2) a:hover {
  background: #55acee !important;
  color: #fff;
}
.team-image ul li:nth-child(3) a:hover {
  background: #007ab9 !important;
  color: #fff;
}
.team-image ul li:nth-child(4) a:hover {
  background: #dc4e41 !important;
  color: #fff;
}

/***********************************
	Contact css
***********************************/
.call-wrap {
  background: url(../images/call-bg.jpg) no-repeat top;
  background-size: cover;
  padding: 60px 0;
}
.call-wrap h1 {
  text-align: center;
  color: #fff;
}
.call-wrap h1:before {
  background: url(../images/underline-white.png) no-repeat;
}
.call-wrap p {
  margin-top: 18px;
  color: #fff;
}
.callus h2 {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}
.callus .call-text {
  font-size: 28px;
  font-family: "Oswald", sans-serif;
  color: #fff;
  line-height: 24px;
}
.callus .call-text span {
  font-weight: bold;
  color: #b3be43;
  font-size: 1.28em;
}
.contactForm {
  margin-top: 20px;
}
.contactForm .form-group .form-control {
  height: 45px;
  border-radius: 0;
}
.contactForm .form-group {
  margin-bottom: 26px;
}
textarea.form-control {
  height: 110px !important;
}
.contactForm {
  background: none;
  padding: 0;
}
.contactForm .btn {
  display: inline-block;
  width: auto;
  font-size: 18px;
  padding: 13px 34px;
}
.call-wrap .formwrap {
  border: none;
}

/***********************************
	footer css
***********************************/
.footer-wrap {
  padding: 30px 0 20px 0;
  background-color: #b3be43;
}
.copyright {
  color: #fff;
  margin-top: 10px;
  color: #1a1a1a;
}
.social-icons {
  list-style: none;
  text-align: right;
}
.social-icons li {
  display: inline-block;
  padding: 0 3px;
}
.social-icons li a {
  text-decoration: none;
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid#4267b2;
  text-align: center;
  line-height: 30px;
  color: #4267b2;
}
.social-icons li:nth-child(2) a {
  border: 1px solid#2caae0;
  color: #2caae0;
}
.social-icons li:nth-child(3) a {
  border: 1px solid#e04e42;
  color: #e04e42;
}
.social-icons li:nth-child(4) a {
  border: 1px solid#0173b1;
  color: #0173b1;
}
.social-icons li:nth-child(5) a {
  border: 1px solid#f63c27;
  color: #f63c27;
}
.social-icons li:nth-child(1) a:hover {
  background: #4267b2;
  color: #fff;
}
.social-icons li:nth-child(1) a:hover {
  background: #4267b2;
  color: #fff;
}
.social-icons li:nth-child(2) a:hover {
  background: #2caae0;
  color: #fff;
}
.social-icons li:nth-child(3) a:hover {
  background: #e04e42;
  color: #fff;
}
.social-icons li:nth-child(4) a:hover {
  background: #0173b1;
  color: #fff;
}
.social-icons li:nth-child(5) a:hover {
  background: #f63c27;
  color: #fff;
}

/***********************************
	page css
***********************************/
.scrollToTop {
  display: none;
}
.page-scroll {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.page-scroll a {
  font-size: 18px;
  color: #fff;
  background: #b3be43;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 39px;
  display: inline-block;
  border: 1px solid #fff;
}

/*****************************************
		media screen
*****************************************/

@media screen and (max-width: 1200px) {
  .navbar-default .navbar-nav > li > a {
    padding: 24px 12px;
  }
  .hoverForm {
    position: static;
    background: #7d7d7d;
  }
  .sliderForm {
    float: none;
    width: auto;
  }
  .formwrap {
    border: none;
    background: none;
  }

  .slideForm .formwrap {
    background: rgba(0, 0, 0, 0.51);
  }
}

@media screen and (max-width: 990px) {
  .navbar-default .navbar-nav > li > a {
    padding: 18px 6px;
    font-size: 13px;
  }
  .header .col-sm-9 {
    padding-left: 0;
  }
  .quote-wrap h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .about-image {
    text-align: center;
    margin-top: 30px;
  }
  .serviceList li {
    margin-bottom: 30px;
  }
  .team_wrap {
    text-align: center;
  }
  .social {
    margin-bottom: 20px;
  }
  .worker-image {
    text-align: center;
  }
  .contact-form .button {
    margin-bottom: 40px;
  }
  .slider-wrap .readmore {
    margin-bottom: 40px;
  }
  .quote-wrap .quote-btn a {
    display: inline-block;
    margin-top: 15px;
  }
  .about-wrap h1 {
    margin-top: 25px;
  }
  .banner-info {
    margin: 0 !important;
  }
  .videohover {
    top: 0;
  }
  .videoWrp {
    height: 400px;
  }
  .videoWrp .hero-wrapper {
    height: 460px;
  }
}

@media screen and (max-width: 767px) {
  .top-text {
    text-align: center;
  }
  .topbar-links {
    text-align: center;
    margin-top: 5px;
  }
  .logo {
    text-align: center;
  }
  .serviceList {
    text-align: center;
  }
  .portfolio-service {
    text-align: center;
  }
  .team_wrap {
    text-align: center;
  }
  .navigationwrape {
    float: none;
  }
  .navbar-default .navbar-nav > li > a {
    padding: 14px 16px;
  }
  .service-image {
    display: inline-block;
  }
  .about-service li {
    float: none;
    width: 100%;
  }
  .copyright {
    text-align: center;
  }
  .foot {
    text-align: center;
  }
  .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
  }
  .sliderTxt p {
    font-size: 18px;
    line-height: 20px;
  }
  .navbar-default {
    background: #f7f7f7;
    border: 1px solid #eee;
    border-top: none;
  }
  .icon-box {
    margin-top: 10px;
  }
  .slider-wrap h2 {
    font-size: 36px;
  }
  .slider-wrap p {
    font-size: 14px;
    line-height: 22px;
  }
  .slider-wrap .readmore a {
    font-size: 14px;
    padding: 12px 24px;
  }
  .staticSlide h2 {
    margin-top: 0;
  }
  .videoWrp {
    height: 280px;
  }
  .videoWrp .hero-wrapper {
    height: 340px;
  }
}
@media screen and (max-width: 480px) {
  .portfolio-service {
    text-align: center;
  }
  .sliderTxt h1 {
    font-size: 24px;
  }
  .sliderTxt p {
    font-size: 14px;
  }
  .slider-wrap p {
    font-size: 12px;
    line-height: 18px;
  }
  .slider-wrap h2 {
    font-size: 24px;
  }
}

@media screen and (max-width: 424px) {
  .slider-wrap p {
    font-size: 8px;
    line-height: 14px;
    margin-top: 5px;
  }
  .slider-wrap h2 {
    font-size: 18px;
  }
}

/* action btn */

.contact-buttons {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.contact-btn {
  display: flex;

  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white; /* Text inside button stays white */
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  white-space: nowrap;
}

/* Button hover effect (only text color stays white, background remains) */
.contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Ensure text inside button remains white on hover */
.contact-btn:hover span {
  color: white !important;
}

/* Specific button colors */
.whatsapp {
  background-color: #25d366;
}
.whatsapp:hover {
  background-color: #1ebe57;
}

.call-us {
  background-color: #007bff;
}
.call-us:hover {
  background-color: #f46135;
}

.query {
  background-color: #ff9800;
}
.query:hover {
  background-color: #e68900;
}

/* Icon Styling (Keeps original color) */
.contact-btn i {
  margin-right: 10px;
  font-size: 20px;
  color: inherit; /* Keeps icon color same as original */
}
.error-404-wrapper {
  margin: 0;
  padding: 0;
  background-color: #f2f4f8;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   height: 80vh; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-404-wrapper .container {
  text-align: center;
  background: white;
  padding: 3rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.error-404-wrapper h1 {
  font-size: 16rem;
  margin: 0;
  /* color: #0056a0; */
}

.error-404-wrapper .subtitle {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 2rem;
}

.error-404-wrapper .btn {
  text-decoration: none;
  background-color: #0056a0;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: bold;
  transition: background 0.3s ease;
}

.error-404-wrapper .btn:hover {
  background-color: #003f7c;
}
/* Desktop & Tablet Layout */
.container {
   max-width: 1200px; /* Ensures proper width on large screens */
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Fix Images and Elements */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Mobile Layout */
@media (max-width: 768px) {
    .container {
        width: 100%;
        max-width: 100%; /* Expands for mobile */
        padding: 0 10px;
    }
}

/* Ensure Desktop Mode Returns */
@media (min-width: 769px) {
    .container {
        max-width: 1200px !important; /* Forces reset to desktop */
        padding: 0 15px !important;
    }
}




/* header button  */
.contact-info {
      display: flex;
      justify-content: center; /* Center align */
      gap: 15px; /* Spacing between buttons */
      margin-top: 20px;
  }

  .btn-contact {
      display: inline-block;
      padding: 12px 20px;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      border-radius: 5px;
      color: white;
      transition: 0.3s;
      text-align: center;
      min-width: 140px; /* Ensure consistent button size */
  }

  .phone-btn {
      background-color: #28a745; /* Green */
  }

  .phone-btn:hover {
      background-color: #8fefae;
  }

  .email-btn {
      background-color: #007bff; /* Blue */
  }

  .email-btn:hover {
      background-color: #98daf2;
  }
/* more service  heading*/

.heading { text-align: center; margin: 20px 0; }
    .slider-container { width: 100%; overflow: hidden; display: flex; justify-content: center; }
    .slider { display: flex; gap: 20px; }
    .card { min-width: 200px; text-align: center; cursor: pointer; transition: 0.5s; }
    .card img { width: 100%; height: 150px; border-radius: 10px; }
    .card h3 { margin-top: 10px; font-size: 16px; }
    .card:hover { transform: scale(1.05); }

  /* Full-Screen Video Background */
  .slideWrp {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
  }

  .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .big-title h1 {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }

  .content-container {
    display: flex;
    max-width: 1100px;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
  }

  .text-content {
    width: 50%;
    text-align: left;
    padding: 20px;
  }

  .text-content h2 {
    font-size: 35px;
    margin-bottom: 10px;
  }

  .text-content p {
    font-size: 35px;
    margin-bottom: 10px;color: #fff;
    padding: 20px 20px 20px 20px;
  }

  .text-content ul {
    list-style: none;
    padding: 0;
  }

  .text-content ul li {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .form-content {
    width: 40%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    color: black;
    text-align: left;
  }
  .form-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
/* Hide logos on mobile (screens smaller than 768px) */
@media screen and (max-width: 768px) {
    .form-content {
        display: none;
    }
}



  .formwrap h3 {
    font-size: 22px;
    margin-bottom: 10px;
    text-align: center;
  }

  .form-group {
    margin-bottom: 10px;
  }

  .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .btn {
    width: 100%;
    padding: 10px;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  .btn:hover {
    background: #0056b3;
  }

  @media (max-width: 768px) {
    .content-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .text-content, .form-content {
      width: 100%;
      text-align: center;
    }
  }

/* Left Side: Movable Logo Container */
.logo-container {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1000;
    animation: moveUpDown 4s ease-in-out infinite alternate; /* Smooth movement */
}

/* Logo Animation for Up and Down Motion */
@keyframes moveUpDown {
    0% { transform: translateY(-50%) translateY(-10px); }
    100% { transform: translateY(-50%) translateY(10px); }
}

/* Individual Logo Items */
.logo-item {
    width: 120px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

/* Logo Images */
.logo-item img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

/* Hover Effect: Stops Movement and Enlarges */
.logo-item:hover {

     animation-play-state: paused;   /*Stop movement on hover */
     transform: scale(1.3) rotate(360deg); /*Enlarge and rotate */
}
/* Default: Show logos on desktop */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Hide logos on mobile (screens smaller than 768px) */
@media screen and (max-width: 768px) {
    .logo-container {
        display: none;
    }
}



/* Right Side: Form */
.form-content {
    width: auto;
}

.formwrap {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.formwrap h3 {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    /*width: 150%;*/
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
/* Floating Buttons Container */
.floating-buttons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

/* Hide Floating Buttons on Mobile (screens smaller than 768px) */
@media screen and (max-width: 768px) {
  .floating-buttons {
    display: none; /* Hide the floating buttons completely on mobile */
  }
}

/* Floating Button Styles */
.float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto; /* Adjust width to fit the content */
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: #007bff;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Button Hover Effect */
.float-btn:hover {
    background: #0056b3; /* Darker on hover */
}

/* Icon Styling */
.float-btn i {
    font-size: 20px;
    color: white;
}

/* Specific Button Colors */
.book-now { background-color: #b3be43; }
.book-now:hover { background-color: #9ea82f; }

.call-us { background-color: #28a745; }
.call-us:hover { background-color: #218838; }

.email { background-color: #17a2b8; }
.email:hover { background-color: #138496; }

.emergency { background-color: #dc3545; }
.emergency:hover { background-color: #c82333; }

.whatsapp { background-color: #25D366; }
.whatsapp:hover { background-color: #1ebe57; }

/* For Mobile: Hide Floating Buttons */
@media screen and (max-width: 768px) {
  .floating-buttons-mobile {
    display: none; /* Ensure no floating buttons appear on mobile */
  }
}



/* slider */

.slider-container {
            width: 100%;
            overflow: hidden;
            background: #f5f5f5;
            padding: 20px 0;
            display: flex;
            justify-content: center;
        }

        .slider {
            display: flex;
            gap: 20px;
            position: relative;
            white-space: nowrap;
        }

        .card {
            min-width: 200px;
            background: white;
            padding: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            text-align: center;
            transition: transform 0.5s ease-in-out;
        }

        .card img {
            width: 100%;
            height: 150px;
            border-radius: 10px;
        }

        .card h3 {
            margin-top: 10px;
            font-size: 16px;
        }
        /* Styling the list */
li {
    display: flex;
    justify-content: center; /* Center images */
    align-items: center;
    gap: 15px; /* Space between images */
    list-style: none;
    padding: 0;
}

/* Make all images the same size */
li a img {
    width: 100px; /* Set a fixed width */
    height: auto; /* Maintain aspect ratio */
    max-height: 80px; /* Adjust to your needs */
    object-fit: contain; /* Ensures images fit nicely */
}



.slider-wrapper {
    width: 220px; /* Match the width of one image */
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #ccc;
}

.slider {
    display: flex;
    width: max-content;
}

.slider img {
    width: 220px; /* Fixed width for smooth transition */
    height: 150px; /* Adjust height */
    object-fit: cover;
}
 
/* Center specific slider items properly */
  /* Center specific slider items properly */
  #slider2-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
  }

  #slider2 {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    white-space: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  #slider2::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
  }

  #slider2 .card {
    flex: 0 0 auto;
    width: 350px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
  }

  #slider2 .card img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    border-radius: 10px;
  }

  @media (max-width: 768px) {
    #slider2 {
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    #slider2 .card {
      width: 90%;
    }

    #slider2 .card img {
      width: 100%;
      height: auto;
    }
  }

  @media (max-width: 480px) {
    #slider2 {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
    }

    #slider2 .card {
      width: 100%;
    }

    #slider2 .card img {
      width: 100%;
      height: auto;
    }
  }

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 15px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Navigation Buttons */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.modal-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* Ensure navigation buttons are visible on mobile */
@media (max-width: 600px) {
  .modal-nav {
    font-size: 24px; /* Reduce size for mobile */
    padding: 8px 12px;
  }

  .prev {
    left: 5px; /* Move closer to the center */
    z-index: 1001; /* Ensure buttons are on top */
  }

  .next {
    right: 5px; /* Move closer to the center */
  }
}

.before-after-wrapper {
  position: relative;
  width: 600px; 
  height: 600px;
  display: flex;
  overflow: hidden;
  border: 2px solid #ccc;
  cursor: pointer;
  margin-top: 50px;
}

.before-after-wrapper .image {
  width: 50%;
  height: 100%;
  transition: width 0.6s ease;
  overflow: hidden;
}

.before-after-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Expand Left */
.before-after-wrapper.left-active .left {
  width: 100%;
}

.before-after-wrapper.left-active .right {
  width: 0;
}

/* Expand Right */
.before-after-wrapper.right-active .left {
  width: 0;
}

.before-after-wrapper.right-active .right {
  width: 100%;
}
.sws-contact-section {
    background: #fff; /* Dark blue (brand style) */
    color: #000;
    padding: 60px 20px;
    text-align: center;
  }
  
  .sws-contact-box {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .sws-contact-heading {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .sws-contact-text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
  }
  
  .sws-contact-btn {
    display: inline-block;
    background: #f77f00;
    color: #fff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  
  .sws-contact-btn:hover {
    background: #ff9900;
  }