@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

html{
  scroll-behavior: smooth;
}

:root {
  --text-color-black: #000000;
  --bg-black-light: #2D2D2D;
  --bg-white-lightbg-white-light: #E1E1E1;
  --text-white-light: #717171;
  --text-White-dark: #FFFFFF;
  --bg-orange-light: #E88F1B;
  --bg-orange-shadow: #E88F1B69;
  --text-orange-dark: #E88F1B;
  --bg-white-light-v1: #ECECEC;
  --text-color-black-light-v1: #525252;
  --bg-white-light-v2: #FCF4E8;
  --overlay-dark-color: #181f18b3;
  --bg-white-light-v3: rgba(225, 225, 225, 1);
  --bg-footer-line:#B4B4B4;
  --hover-orange:#de8c1f;
}

/* global */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  color: var(--text-color-black);
  height: 100vh;
}

.btn-orange-light {
  color: var(--text-White-dark);
  background-color: var(--bg-orange-light);
  font-weight: 600;
}
/* .navbar-toggler:hover{
  background-color: var(--hover-orange);
} */

#btn-orange-light:hover {
  color: var(--text-White-dark);
  background-color: var(--hover-orange);
}

#btn-orange-light:active {
  border: none;
  color: var(--text-White-dark);
  background-color: var(--bg-orange-light);
}

.span-special-content {
  color: var(--text-orange-dark);
}


/* ----------------- */

/* javascript using display block width - (...) */
.hero-titles-responsive {
  display: none;
}


/* if hover footer a tag  */
.footer-container-links:hover{
  text-decoration: underline;
}

/* ----------------------- */

/* colors */


/* navbar */
header nav.navbar {
  z-index: 10;
}
.nav-item .nav-item{
  transition: 1s;
}

.nav-item .nav-link:hover{
  transition: 0.4s;
  color: var(--text-orange-dark);
}

/* navbar */


/* header */
.btn-header {
  width: 85px;
  height: 23px;

}

/* header */
.hero-section {
  margin-bottom: 6rem;
}

.hero-section .hero-content {
  margin-top: 8rem;
}

.hero-section .hero-content h1 {
  font-weight: 600;
  line-height: 75.3px;
  font-size: 60px;
}


.hero-section .hero-description {
  margin-top: 20px;
}

.hero-section .hero-description p {
  font-size: 18px;
  max-width: 503px;
  font-weight: 300;
  margin: auto;
  margin-bottom: 20px;
}

.hero-description .hero-description-content {
  margin: auto;
  max-width: 500px;
  position: relative;
}
.hero-description .hero-description-content button:hover {
  background-color: var(--hover-orange);
}


.hero-description .hero-description-content input {
  background-color: var(--bg-white-light-v3);
  color: var(--text-white-light);
  outline: none;
  width: 460px;
  height: 58px;
  border: none;
  padding-left: 35px;
  border-radius: 27.5px;
  padding-right: 10rem;

}

.hero-description .hero-description-content button {
  box-shadow: 0px 4px 4px 0px var(--bg-orange-shadow);
  border-radius: 26px;
  border: none;
  width: 144px;
  height: 46px;
  transition: 3s;
  position: absolute;
  top: 6px;
  right: 27px;

}

/* media query */
@media (max-width:1300px) {
  .hero-section .hero-content h1 {
    font-size: 55px;
    line-height: 60px;
  }
}

@media (max-width:600px) {
  .hero-section .hero-content h1 {
    font-size: 42px;
    line-height: 55px;
  }
}

@media (max-width:550px) {
  .hero-description .hero-description-content input {
    width: 90%;
    padding-right: 1rem;
  }

  .hero-description .hero-description-content button {
    position: static;
    top: unset;
    left: unset;
    margin-top: 1rem;

  } 
}




/* section first */


.section-first {
  padding: 85px 0px;
  background-color: var(--bg-black-light);
}
@media(max-wdth:500px){

  .section-first {
    padding-top: 20px;
    padding-bottom: 0px;
    /* padding: 20px 0px; */
  }
}

.section-first-content-first {
  color: var(--text-White-dark);
  font-size: 45px;
  font-weight: 600;

}

.section-first-content-first h1 {
  max-width: 465px;
  text-shadow: 1px -1px black;
}

.section-first-content-first img {
  max-width: 485px;

}

.section-first-content-first-last {
  color: var(--text-White-dark);
  font-size: 17px;
  font-weight: 300;
}

.section-first-content-first-last p {
  max-width: 445px;
}

.section-first-content-first-last button {

  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: center;
  width: 138px;
  height: 46px;
  background-color: transparent;
  border-radius: 19px;
  border: 1px solid var(--bg-orange-light);
  color: var(--text-White-dark);
  margin-top: 1.5rem;

}


@media (max-width:1200px) {
  .section-first-content-first img {
    width: 100%;

  }
}

/* --------------- */




/* service section */
.service-content {
  padding-top: 3.5rem;
}

.service-content h1 {
  font-weight: 600;
  font-size: 45px;
  line-height: 2rem;
}

.service-content p {
  font-weight: 300;
  font-size: 17px;
}

.service-section-content h2 {
  font-weight: 600;
  background-color: var(--bg-white-light-v1);
  font-size: 18px;
  display: inline-block;
  border-radius: 22px;
  padding: 8px 12px;
}

.service-section-content p {

  font-weight: 400;
  font-size: 16px;
  margin-top: 0.5rem;
  color: var(--text-color-black-light-v1);

}

.service-section-content button {

  border: none;
  background-color: var(--text-color-black);
  color: var(--text-White-dark);
  color: var(--text-White-dark);
  width: 134px;
  height: 39px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 14px;

}

.service-section-content button span {



  color: var(--text-orange-dark);
  font-size: 15px;

}

.service-section .container .row {
  /* margin: 5rem 0px; */
  padding-top: 5rem;
}

/* ----------- */






/* section third */

.section-third {
  color: var(--text-White-dark);
  background-color: var(--bg-black-light);
}

.section-third-content i {
  background-color: var(--text-orange-dark);
  padding: 10px;
  border-radius: 20px;
}

.section-third-content h2 {

  font-size: 24px;
  font-weight: 600;
}

.section-third-content p {
  font-weight: 300;
  font-size: 14px;

}

.section-third-content a {
  color: var(--bg-orange-light);
  text-decoration: underline;
}

.title-underline {
  margin: auto;
  background-color: orange;
  width: 15%;
  border-radius: 5px;
  height: 3px;
}


/* testimonial */
.testimonial-row .testimonial-content h1 {
  font-size: 40px;
  font-weight: 600;

}

/* testimonal  */



/* footer overlaping */

.footer-overlapper {
  position: relative;

}

.footer-overlapper .footer-overlapper-container {
  background-color: var(--bg-white-light-v2);
  max-width: 967px;
  position: relative;
  z-index: 1;
  margin: auto;
  border-radius: 30px;
}

.footer-overlapper-container .overlapping-title {
  text-align: center;
  padding: 47px 0px;

}

.footer-overlapper-container .overlapping-title h1 {
  font-size: 35px;
  font-weight: 600;
  color: var(--bg-orange-light);

}

.footer-overlapper-container .overlapping-images img {
  width: 105px;
  margin-top: -2rem;
  height: auto;
  object-fit: contain;

}

.footer-overlapper-container .overlapping-images {
  display: flex;
  margin-top: 1rem;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  height: 13rem;
}

/* ------------------ */



/* footer */
.footer {
  background-attachment: fixed;
  width: 100%;
  position: relative;
  background-position: center;
  /* height: 34rem; */
  /* max-height: 640px; */
  z-index: 0;
  background-image: url(image/skyscrapers-fotor-20230918153211.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -6rem;

}

.overlay {
  background-color: var(--bg-black-light);
  width: 100%;
  opacity: 0.9;
  position: absolute;
  top: 0px;
  bottom: 0px;

}

.footer-container {
  position: relative;
}

.footer .container {
  padding-top: 13rem;
  position: relative;
  z-index: 0;
}

.footer-container-image {
  max-width: 260px;
}

.footer-container-content div,
a {
  cursor: pointer;
  text-decoration: none;
  color: var(--bg-white-light-v1);
}

.footer-container-content h1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--bg-white-light-v1);
}

.footer-icons {
  color: var(--text-orange-dark);
  font-size: 17px;
  border: 2px solid rgba(79, 92, 103, 1);
  border-radius: 100%;
  padding: 2px 7px;
  ;
}

.footer-container-links {
  font-weight: 400;
  font-size: 13px;
  line-height: 32px;
}

/* ---- */







/* MediaQuery */
@media(max-width:1000px) {
  .hero-section .hero-content {
    margin-top: 7.7rem;
  }

  .title-underline {
    width: 35%;
  }
}

@media(max-width:765px) {
  .footer-overlapper {
    margin: 0rem 1rem;
  }

  .footer-overlapper-container .overlapping-images {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 20rem;
    align-items: center;
  }
}
.footer-container .footer-container-line{
  background-color: var(--bg-footer-line);
  width: 100%;
  height: 1px;
  margin-top: 1rem;
}
.footer-line-container .footer-line-child a{
  color: var(--text-White-dark);
}
.footer-container-content .footer-container-contents-div{
  display: flex;
  flex-direction: column;
}
.footer-bottom-links{
  font-size: 12px;
  font-weight: 400;
}

/* social media */
.social_media_instagram{

}
.social_media_facebook{
  font-size: 16px;
  padding: 3px 11px;
}
.social_media_linkedin{

}
.social_media_youtube{
  font-size: 16px;
  padding: 4px 7px;
}
.social_media_twitter{

}

/* logo responsive */
@media(max-width:525px){
  .footer-container-image {
    width: 230px;
}
}

@media(max-width:565px) {
  .service-section-content h1 {
    font-size: 43px;
  }

}

@media(max-width:1200px) {
  .testimonial-row .testimonial-content h1 {
    line-height: 3rem;
  }
}



/* services page */
.service-page-content h1 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 24px;
  color: var(--bg-orange-light);

}

.pages-header-shadow {
  box-shadow: 0px 4px 4px 0px #00000040 inset;
  margin-top: 3rem;
  background: linear-gradient(180deg, #FFE0B1 0%, rgba(252, 244, 232, 0) 100%);

}

.service-section .client-count-container{
  width: 3px;
    border-radius: 30px;
    height: auto;
    margin: 12px 0px;
    background-color: #cccccc;
}
.service-section .project-first-discription{
      /* background-color: green; */
      height: 11rem;
      display: table-cell;
      padding: 0px;
      vertical-align: bottom;
}
.service-page .service-page-content{
  font-size: 24px;
  font-weight: 600;
}
.serviceBlackContainer p {
  font-weight: 300;
  color: var(--text-White-dark);
  font-size: 17px;
}

#service-page-container{
  padding: 4rem 0rem;
}

/* ------------ */




/* overlap whatsapp need help content */
.whatsapp-container{
  position: fixed;
    bottom: 7px;
    z-index: 1;
    bottom: 20px;
    right: 20px;
}
.whatsapp-container a {
  padding: 2px 10px;
  border-radius: 5px;
  background-color: white;
  color: black;
  font-size: 13px;
  margin: 0px 10px;
  box-shadow: 0px 1px 6px 0px #999797;
}
.whatsapp-container img {
  width: 54px;
  cursor: pointer;
}

.whatsapp-container img:hover {
  /* box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .15); */
}


/* service page  */
.parent-of-service-content .child-of-service-content{
  font-weight: 600;
  font-size: 20px;
}
.serviceSection-title{
  font-weight: 600;
}
.serviceSection-content-container .serviceSection-content{
  font-weight: 400;
    font-size: 16px;
    color: var(--text-color-black-light-v1);
}




/* enquiry form  */

.enquiry-form{
  color: rgba(113, 113, 113, 1);
  background-color: rgba(252, 244, 232, 1);
  border-radius: 15px;
  padding: 25px 50px;

}
.enqForm-controller{
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: unset;
}
.enqForm-controller h3{
  color: black;
}
.enqForm-label{
  text-align: start;


  padding: 4px;
  margin: 3px;
}
.enqForm-input-field{
  outline: none;
  padding: 12px;
  border-radius: 5px;
  border: none;
}
.enqForm-btn-controller input {
  border: none;
  background-color: rgba(232, 143, 27, 1);
  padding: 10px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
}

/* enquiry fom button controller specific */
.enqForm-btn-controller{
  max-width: 331px;
  /* padding: 2rem; */
  /* height: 57px; */
  margin: 1rem auto 1rem auto;
}


/* if screen size is > 991 */
@media(max-width:991px){
  .enquiry-form {
    padding: 20px 35px;
}
}

@media(max-width:416px){
  .enquiry-form {
    padding: 20px 20px;
}
}

/* ---------------- */



/* ------- */
.enquiry-form-content{
  max-width: 20rem;
}
.enquiry-form-content h3{
  color: #000;
font-size: 30px;
font-weight: 600;

}



.service-section-content h1 {
  font-weight: 600;
  font-size: 30px;
}



#enquiry-form-content{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0rem;
}

.enquiry-form-content p :last-child{
font-size: 14px;
font-weight: 400;
max-width: 20rem;
}

.enquiry-formContentContainer {

}

.enquiry-formContentContainer .enquiryForm-first-content{
 max-width: 310px;
}
.enquiry-formContentContainer .enquiryForm-first-content h3{
  font-size: 30px;
  font-weight: 600;
 }
 .enquiry-formContentContainer .enquiryForm-first-content a:first-child{
  font-size: 14px;
  font-weight: 600;
 }
 .enquiry-formContentContainer .enquiryForm-first-content a:last-child{
  font-size: 14px;
  font-weight: 400;
 }
.enquiry-formContentContainer .enquiryForm-second-content{
  background-color: rgba(45, 45, 45, 1);
  padding: 20px 25px;
    border-radius: 10px;
}

.enquiryForm-second-content .enquiry-form-content{
  padding: 0px 10px;
}

.enquiry-formContentContainer .enquiryForm-third-content{

}
#title-for-follow{
  font-weight: 700;
  font-size: 20px;
}

/* .enquiry-form-containerFirstContent */




.hero{
  width: 100%;
  height: 30rem;
  overflow: hidden;
  background-color: transparent;
  overflow: hidden;
}

.hero .carousel{
  width: 300px;
  margin: 40px auto 0;
  overflow: visible;
}
.carousel img{
  border-radius: 6px;
}
.flipster__button{
  z-index: 9!important;
}
@media(max-width:555px){
  .hero{
    width: 90%;
    margin: auto;
    border-radius: 6px;
  }
}


/* portfolio
.portfolio-section{
  font-size: 16px;
  margin: 10px 0px;
  font-weight: 400;
  cursor: pointer;
} */


 /* PROJECT  */
 ul{
  list-style: none;
 }
 .project *{
  font-family: inherit;
  color: #272727;
 }
 .project{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.project .project-heading{
  flex-direction: column;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 3rem;
}
.project-filter{
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(237, 237, 237, 0.6);
  padding: 5px 8px;

}
.project-filter > li{
  
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 1rem;
  color: #9b9b9b;
  letter-spacing: 0.5px;
  font-weight: 400;
}
.project-filter-active{
  background-color: #f0f0f0;
  color: #272727;
}
.project-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.project-box{
  width: 100%;
  max-width: 330px;
  /* flex: ; */
  margin: 20px;
  border: 1px solid #eeeeee;
  padding: 10px;
  border-radius: 4px;
}
.project-box img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.project-box p {
  margin: 10px 0px;
}
.project-box h1{
  font-size: 18px;
  color: #272727;
  font-weight: bold;
  margin: 10px;
}
/* ---------------- */