@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --primary-color:#7db240;
    --secondary-color:#726557;
    --white:#fff;
    --black:#000;
    --box-shadow:0px 4px 36px 0px rgba(80, 58, 142, 0.22);
    --font-family:"Urbanist", serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}
body{
  overflow-x: hidden;
}
html{
  overflow-x: hidden;
}
a{
    text-decoration: none !important;
    color: inherit;
}
ul li{
    list-style: none;
}
li{
    list-style: none;
    font-family: var(--font-family);
}

ul{
    padding-left: 0 !important;
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--font-family);
}
.pt-100{
    padding-top: 100px;
}
.pb-100{
    padding-bottom: 100px;
}
.pt-50{
    padding-top: 50px;
}
.pb-50{
    padding-bottom: 50px;
}

/*=========================================
             header 
  ============= ============================*/

 .navbar .navbar-brand img{
    width: 200px;
  }
  .navbar-nav .nav-item .nav-link{
    color: var(--black);
    font-weight: 700;
  }
  .header-button{
    margin-left: 30px;
  }
  .header-button button{
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background: var(--primary-color);
    font-weight: 700;
    color: var(--white);
  }
  .header-button button:hover{
    background: var(--white);
    box-shadow: var(--box-shadow);
    color: var(--primary-color);
  }
  .sticky{
    position: sticky;
    top: 0;
    z-index: 23;
    background: var(--white);
    box-shadow: var(--box-shadow);
  }
  .top-header{
    position: relative;
    background: var(--primary-color);
    padding-top: 10px;
  }
  .top-header-brand{
    display: flex;
    gap: 10px;
  }
  .call-icon i{
    color: var(--white);
  }
  .call-icon-text p{
    color: var(--white);
    font-weight: 700;
  }
  .header-social-icon ul{
    display: flex;
    justify-content: end;
    gap: 30px;
  }
  .header-social-icon ul li i{
    background: var(--white);
    padding: 7px 8px;
    border-radius: 50%;
  }
  .header-social-icon ul a{
    color: var(--black) !important;
  }
  /* ===================================================
  banner section start
  ======================================================= */
  .slider-bg-one{
    background: url(../img/banner/banner-one.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    height: 600px;
    border-radius: 20px;
    position: relative;
    z-index: 22;
    margin: 0 clamp(2rem, 7vw, 4.625rem);
  }
  @media (max-width:768px){
    .slider-bg-one{
      height: 700px;
    }
    .home-we-work-img{
      margin-left: -52px;
      margin-right: -60px;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .banner-text h1{
      font-size: 60px !important;
    }
    .home-we-work-img{
    margin-left: -126px;
    margin-right: -118px;
    }
    .scroll-text h3{
      font-size: 60px !important;
    }
    .team-person-content h4{
      font-size: 17px !important;
    }
    .home-project-heading h2{
      font-size: 32px !important;
    }
    .team-person-content{
      bottom: -54px;
    }
    .portfolio-img img{
      width: 100% !important;
    }
    .portfolio-main{
      margin-left: 0 !important;
      border-right: 0 !important;
      height: auto !important;
    }
    .banner-details-text h5{
      font-size: 15px !important;
    }
    .border-right{
      border-right: none !important;
    }
    .dropdown-menu-expanded{
      transform: none !important;
    }
  }
  .banner-two{
    background: url(../img/banner/banner-two.jpg);
    background-position: center;
  }
  .banner-three{
    background: url(../img/banner/banner-three.jpg);
    background-position:bottom center;
  }
  .banner-text .sub-heading{
    padding: 30px;
    color: var(--white);
    font-weight: 600;
  }
  .banner-text h1{
    padding:10px 30px;
    font-size: 100px;
    font-weight: 700;
    color: var(--white);
    text-transform: capitalize;
  }
  .banner-text p{
    padding: 10px 30px;
    color: var(--white);
  }
  .first-letter{
    color: var(--primary-color);
  }
  .overlay::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: var(--black);
    opacity: 0.4;
    z-index: -1;
    border-radius: 20px;
  }
  .overlay1::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: var(--black);
    opacity: 0.8;
    z-index: -1;
    border-radius: 20px;
  }
  .owl-prev{
    position: absolute;
    top: 50%;
    right: 5%;
    background: var(--white) !important;
    width: 60px;
    height: 60px;
    font-size: 30px !important;
    color: var(--primary-color) !important;
  } 
  .owl-next{
    position: absolute;
    bottom: 25%;
    right: 5%;
    background: var(--white) !important;
    width: 60px;
    height: 60px;
    font-size: 30px !important;
    color: var(--primary-color) !important;
  } 

  /*  */
  .banner-details-sec{
    position: relative;
    background: var(--primary-color);
    padding: 30px 40px;
    border-radius: 5px;
    top: -150px;
    z-index: 22;
    transition: all 0.3s;
  }
  .banner-details-sec:hover{
    background:var(--white);
    box-shadow: var(--box-shadow);
  }
  .banner-details-sec:hover .banner-details-text h5{
    color: #232323;
  }
  .banner-details-sec:hover .border-right{
    border-right:1px solid #d7d7d7;
  }
  .banner-details-sec:hover .banner-details-text p{
    color: var(--para-color);
  }
  .banner-details-sec:hover .service-head h2{
    color: var(--primary-color);
  }
  .banner-details-icon img{
    background: var(--white);
    border-radius: 50%;
    padding: 10px;
    margin: 10px;
  }
  .banner-details-text h5{
    font-weight: 800;
    padding-top: 20px;
    font-size: 20px;
    color: var(--white);
    text-transform: capitalize;
  }
  .banner-details-text p{
    color: var(--white);
    padding-top: 10px;
    font-weight: 600;
  }
  .border-right{
    border-right: 1px solid var(--white);
  }
  /* Home About Section Start */
  .home-about-bg{
    position: relative;
    background: #524e48;
  }
  .home-about-main{
    position: relative;
  }
  .home-about-img2{
    position: absolute;
    width: 100%;
    max-width: 385px;
    bottom: 0;
    right: 0;
  }
  .home-about-img1{
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 0.76;
  }
  .about-exp-counter{
    position: absolute;
    top: 20%;
    left: -30%;
    height: 152px;
    width: 152px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: var(--primary-color);
    border: 6px solid var(--white);
    border-radius: 50%;
  }
  .about-exp-counter h3{
    font-size: 39px;
    padding-top: 20px;
    font-weight: 800;
    color: var(--white);
  }
  .about-exp-counter p{
    font-weight: 800;
    color: var(--white);text-align: center;
  }
  .home-about-main-content h3{
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6em;
    text-transform: capitalize;
    color: var(--primary-color);
    padding-left: 35px;
    margin-bottom: 20px;
    font-weight: 600;
  }
  .home-about-main-content h2{
    padding-left: 35px;
    font-size: 40px;
    font-weight: 700;
    color: var(--white);
    text-transform: capitalize;
  }
  .home-about-main-content button{
    padding: 10px 40px;
    margin-left: 35px;
    background: var(--primary-color);
    border: none;
    color: var(--white);
    font-weight: 700;
    border-radius: 5px;
    margin-top: 20px;
  }
  .green{
    color: var(--primary-color);
  }
  .home-about-main-content p{
    padding-left: 32px;
    padding-top: 30px;
    color: var(--white);
  }
  .home-about-list{
    padding-left: 32px;
  }
  .home-about-list ul{
    padding-top: 30px;
  }
  .home-about-list ul li{
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: capitalize;
    font-weight: 600;
    color: var(--white);
  }
  .home-about-list ul li i{
    color: var(--primary-color);
  }
  .home-about-list button{
    background: var(--primary-color);
    border: none;
    border-radius: 5px;
    padding: 10px 30px;
    color: var(--white);
    text-transform: capitalize;
    font-weight: 700;
    transition: all 0.3s;
  }
  .home-about-list button:hover{
    background: var(--white);
    color: var(--primary-color);
  }
  .phone-icon i{
    background: var(--primary-color);
    color: var(--white);
    padding: 10px;
    border-radius: 50%;
  }
  .phone-num-main{
    display: flex;
    gap: 15px;
    padding-top: 30px;
    padding-left: 30px;
  }
  .phone-text p{
    text-transform: capitalize;
    font-weight: 600;
    color: var(--white);
  }
  .phone-text h5{
    font-weight: 700;
    text-transform: capitalize;
    color: var(--white);
  }
  .phone-icon img{
    border-radius: 50%;
    width: 40px;
  }
  /* project section start */
  .home-project-heading span{
    color: var(--primary-color);
    font-weight: 600;
    text-transform: capitalize;
  }
  .home-project-heading h2{
    font-size: 40px;
    font-weight: 700;
    text-transform: capitalize;
    padding-top: 15px;
    padding-bottom: 10px;
  }
  .home-project-content p{
    padding-top: 40px;
  }
  .nav{
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    gap: 20px;
  }
  .nav .nav-item .nav-link{
    color: var(--black);
    font-weight: 700;
    text-transform: capitalize;
    padding-right: 20px;
  }
  .nav .nav-item .nav-link.active{
    background: var(--primary-color);
  }
  .nav .nav-item .nav-link:hover{
    background: var(--primary-color);
    color: var(--white);
  }
  .home-project-image img{
    width: 100%;
    height:350px;
    object-fit: cover;
    border-radius: 2px;
  }
  .home-project-image{
    position: relative;
    margin-bottom: 30px;
  }
  /* .home-project-image::after{
    content: "";
    position: absolute;
    width: 130%;
    height: 0%;
    left: 10%;
    top: 10%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    overflow: hidden;
  }
  .home-project-image:hover::after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
  } */
  /* home why choose section */
  .home-choose-content span{
    font-weight: 600;
  }
  .home-choose-content h3{
    font-size: 40px;
    font-weight: 700;
    padding-top: 15px;
    padding-bottom: 15px;
    text-transform: capitalize;
  }
  .home-choose-content p{
    padding-bottom: 20px;
  }
  .home-choose-list-main{
    display: flex;
    gap: 15px;
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .home-choose-list-img{
    background: var(--primary-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
    padding: 10px;
  }
  .home-choose-list-img img{
    width: 35px;
  }
  .home-choose-list-text h4{
    font-weight: 700;
    text-transform: capitalize;
  }
  .home-choose-list-text{
    padding-bottom: 20px;
  }
  .boder-bottom{
    border-bottom: 1px solid #e1e1e1;
  }
  .home-choose-img-sec img{
    width: 100%;
    margin-bottom: 20px;
    height: 300px;
    border-radius: 5px;
    object-fit: cover;
  }
  /* home background img start */
  .home-back-bg{
    position: relative;
    background: url(../img/bg/bg-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:bottom center;
    background-attachment: fixed;
    height: 700px;
    z-index: 22;
  }
  .scroll-text{
    padding-top: 150px;
  }
  .scroll-text h3{
    font-size: 90px;
    font-weight: 700;
    color: var(--white);
    text-transform: capitalize;
  }
  /* how we work section start */
  .home-we-work-bg{
    position: relative;
    background: #524e48;
  }
  .home-we-work-img img{
    width: 100%;
    height: 880px;
    object-fit: cover;
  }
  .home-we-work-hed h3{
    padding-bottom: 30px;
    color: var(--white);
    font-size: 40px;
    font-weight: 700;
    text-transform: capitalize;
    padding-top: 20px;
  }
  .font-size h3{
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
  }
  .home-we-work-hed span{
    font-weight: 700;
  }
  .home-we-work-list-img{
    background: var(--primary-color);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-we-work-list-img img{
     width: 40px;
  }
  .home-we-work-list-text h4{
    color: var(--white);
    padding-top: 20px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: capitalize;
  }
  .home-we-work-list-text p{
    color: var(--white);
  }
  .home-we-work-list-main{
    margin-bottom: 30px;
    /* padding: 15px; */
    height: calc(100% - 20px);
    transition: all 0.3s;
  }
  /* .home-we-work-list-main:hover{
    background: var(--white);
    border-radius: 5px;
  }
  .home-we-work-list-main:hover .home-we-work-list-text h4{
    color: var(--primary-color);
  }
  .home-we-work-list-main:hover .home-we-work-list-text p{
    color: var(--para-color);
  } */
  .margin-23{
    padding: 100px 40px !important;
  }

  /* Home service section start */
  .home-service-img{
    position: relative;
  }
  .home-service-head h3{
    font-size: 40px;
    font-weight: 700;
    color: var(--primary-color);
   text-align: center;
   padding-bottom: 40px;
  }
  .home-service-img img{
    height: 500px;
    object-fit: cover;
  }
  .home-img-text{
    position: absolute;
    top: 50%;
    text-align: center;
    transition: all 0.4s ease-in-out;
    opacity: 0;
  }
  .home-img-text h4{
    color: var(--white);
    font-weight: 800;
  }
  .home-img-text p{
    color: var(--white);
    margin: 10px;
  }
  .overlay-service{
    /* background: rgba(117, 216, 4, 0.312); */
    background: #17171785;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
  }
  .home-service-img:hover .home-img-text{
    opacity: 1;
  }
  .home-service-img:hover .overlay-service{
    opacity: 1;
  }
  /* slider text section start */
  /* .slider-text{
    display: flex;align-items: center;
    justify-self: center;
    gap: 30px;
    font-size: 70px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px var(--primary-color);
    text-transform: capitalize;
    animation: scroll-left 10s linear infinite;
  }
  @keyframes  scroll-left {
    100%{
      transform: translateX(-100%);
    }
  } */
   /* contact section start */
   .form-hed h2{
    color:rgb(125, 179, 64);
    font-weight: 700;
    padding-bottom: 20px;
   }
   .form-input input{
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    background: var(--white);
    border: 1px solid #dee2e6;
    outline: none;
    border-radius: 5px;
   }
   .form-input textarea{
    width: 100%;
    border: 1px solid #dee2e6;
    outline: none;
    padding: 10px;
    resize: none;
   }
   .form-btn button{
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    border: none;
    background: var(--primary-color);
    border-radius: 5px;
    color: var(--white);
    font-weight: 600;
   }
   .form-btn button:hover{
    background: var(--white);
    box-shadow: var(--box-shadow);
    color: var(--primary-color);
   }
   .form-content{
    position: relative;
    display: block;
    background: var(--white);
    box-shadow: var(--box-shadow);
    padding: 100px 70px;
    margin-right: -35px;
   }
   /* .form-content::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50%;
    right: -35px;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    z-index: -1;
   } */
   .form-img-main{
    position: relative;
    display: block;
    margin-right: -30px;
    height: 100%;
   }
   .form-img{
    height: 100%;
   }
   .form-img img{
    width: 100%;
    height: 100%;
   } 
   /* home team section start */
   .bg-green{
    background: #ececec;
   }
   .team-bg{
    position: relative;
    background: #524e48;
   }
   .home-team-head span{
    font-weight: 600;
   }
   .home-team-head h3{
    font-size: 40px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 10px;
    color: var(--white);
   }
   .home-team-head p{
    padding-bottom: 40px;
    font-weight: 600;
   }
   .team-person-img{
    position: relative;
    margin-bottom: 70px;
   }
   .team-person-img img{
    width: 100%;
    border-radius: 5px;
   }
   .team-person-content{
    padding: 10px;
    background: var(--white);
    box-shadow: var(--box-shadow);
    text-align: center;
    position: absolute;
    bottom: -30px;
    left: 8px;
    right: 15px;
    border-radius: 5px;
    transition:all 0.3s ;
   }
   .team-person-content:hover{
    background: var(--primary-color);
   }
   .team-person-content:hover h4{
    color: var(--white);
   }
   .team-person-content:hover p{
    color: var(--white);
   }
   .team-person-content h4{
    padding-top: 10px;
     color: var(--primary-color);
     font-weight: 700;
     font-size: 22px;
   }
   .team-person-content p{
    font-weight: 600;
   }
  /* ============================================
  footer section start
  =============================================== */
  .footer-bg{
    position: relative;
    background: #524e48;
  }
  .footer-logo img{
    width: 250px;
    background: var(--white);
    padding: 10px;
    border-radius: 10px;
  }
  .footer-social-links-main{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 20px;
    padding-top: 30px;
  }
  .footer-border{
    padding-bottom: 30px;
    border-bottom: 1px solid #898686;
  }
  .footer-social-links-text h5{
    color: var(--white);
    font-weight: 700;
    text-transform: capitalize;
    transition: all 0.4s;
  }
  .footer-social-links-text h5:hover{
    color: var(--primary-color);
  }
  .footer-social-links-main ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }
  .footer-social-links-main ul li i{
    background: var(--primary-color);
    padding: 10px;
    color: var(--white);
    border-radius: 50%;
    transition: all 0.3s;
  }
  .footer-social-links-main ul li i:hover{
    background: var(--white);
    color: var(--primary-color);
  }
  .footer-contact-info{
    padding-top: 50px;
    padding-bottom: 40px;
  }
  .footer-contact-info h4{
    color: var(--white);
    font-weight: 800;
    text-transform: capitalize;
    transition: all 0.3s;
  }
  .footer-contact-info h4:hover{
    color: var(--primary-color);
  }
  .footer-contact-info ul{
    padding-top: 20px;
  }
  .footer-contact-info ul  li{
    padding-top: 10px;
    padding-bottom: 5px;
    color: var(--white);
    text-transform: capitalize;
    font-weight: 600;
  }
  .footer-contact-info ul li a{
    color: var(--white);
    transition: all 0.3s;
  }
  .footer-contact-info ul li a:hover{
    color: var(--primary-color);
  }
  .footer-contact-main{
    display: flex;
    gap: 20px;
    padding-top: 20px;
  } 
  .footer-phone-icon i{
    background:var(--primary-color);
    padding: 10px;
    border-radius: 50%;
    color: var(--white);
  }
  .footer-phone-text p{
    color: var(--white);
    font-weight: 600;
    padding-top: 4px;
    transition: all 0.3s;
  }
  .footer-phone-text p:hover{
    color: var(--primary-color);
  }
  .copy-right-area{
    padding-top: 40px;
    border-top: 1px solid #898686;
    text-align: center;
  }
  .copy-right-area p{
    color: var(--white);
  }
  .copy-right-area p a{
    color: var(--white);
    text-decoration: none;
  }
  .link-text{
    color: var(--primary-color) !important;
    transition:all 0.3s;
  }
  .link-text:hover{
    color: var(--white) !important;
  }
  /* =============================================
    Project Page Start
    =============================================== */
    .project-banner{
      background: url(../img/banner/banner-img-1.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position:center center;
      height: 400px;
      position: relative;
      z-index: 22;
    }
    .project-banner-hed h1{
      color: var(--white);
      font-size: 50px;
      font-weight: 700;
    }
    .project-banner-hed p{
      font-weight: 600;
    }
  /* =============================================
    Project-Details Page Start
    =============================================== */
    .project-details-banner-hed h1{
      color: var(--white);
      font-size: 90px;
      font-weight: 700;
    }
    .project-details-banner-hed p{
      color: var(--white);
      padding-top: 10px;
      font-weight: 600;
    }
    .project-details-content{
      margin-bottom: 40px;
    }
    .project-details-content img{
      width: 100%;
      height: 500px;
      object-fit: cover;
      border-radius: 5px;
    }
    .project-details-content-hed h2{
      font-size: 50px;
      font-weight: 700;
      padding-bottom: 40px;
    }
    .project-details-content-box{
      background: var(--white);
      box-shadow: var(--box-shadow);
      padding: 40px 30px;
    }
    .project-details-box-btn{
      text-align: end;
    }
    .project-details-content-box-text h3{
      font-weight: 600;
    }
    .project-details-box-btn button{
      padding: 10px 30px;
      border: none;
      border-radius: 5px;
      background: var(--primary-color);
      color: var(--white);
      font-weight: 600;
    }
    .project-details-box-btn button:hover{
      background: var(--white);
      box-shadow: var(--box-shadow);
      color: var(--primary-color);
    }
    /* ==========================
    About Us Page Start
    ============================== */
    .about-bg{
      position: relative;
      background: url(../img/banner/banner-two.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      z-index: 22;
    }
    .about-head h1{
       font-size: 50px;
       font-weight: 800;
       color: var(--white);
    }
    .padd-0{
      top: 0;
    }
    /*  */
    .about-des-bg{
      position: relative;
      background: #524e48;
    }
    .about-design-sec-content h3{
      font-weight: 700;
      font-size: 40px;
      padding-bottom: 20px;
      text-transform: capitalize;
      color: var(--white);
    }
    .about-design-sec-content p{
      color: var(--white);
    }
    .about-design-sec-content h5{
      font-weight: 800;
      color: var(--primary-color);
      padding-top: 10px;
      padding-bottom: 20px;
      text-transform: capitalize;
    }
    .about-design-sec-content button{
      padding: 10px 30px;
      color: var(--white);
      background: var(--primary-color);
      border-radius: 5px;
      border: none;
      font-weight: 600;
      text-transform: capitalize;
    }
    .about-design-img img{
      width: 100%;
    }

    /*  */
    .about-des-bg1{
      position: relative;
      background: #524e48;
    }
    .about-design-sec-content1 h3{
      font-weight: 700;
      font-size: 40px;
      padding-bottom: 20px;
      text-transform: capitalize;
      color: var(--white);
    }
    .about-design-sec-content1 p{
      color: var(--white);
    }
    .about-design-sec-content1 h5{
      font-weight: 800;
      color: var(--primary-color);
      padding-top: 10px;
      padding-bottom: 20px;
      text-transform: capitalize;
    }
    .about-design-sec-content1 button{
      padding: 10px 30px;
      color: var(--white);
      background: var(--primary-color);
      border-radius: 5px;
      border: none;
      font-weight: 600;
      text-transform: capitalize;
      transition: all 0.3s;
    }
    .about-design-sec-content1 button:hover{
      background: var(--white);
      color: var(--primary-color);
    }
    .about-design-img1 img{
      width: 100%;
    }
    .black{
      color: var(--black) !important;
    }


    /* ===============================
    service hub page start
    ================================= */
    .project-service-form{
      background: var(--white);
      padding: 20px 40px;
      border-radius: 5px;
      position: relative;
    }
    .input-field label{
      /* background: var(--primary-color); */
      border: 1px solid var(--primary-color);
      padding: 10px 20px;      
    }
    #option-1:checked ~ .option-1{
      background: var(--primary-color);
      color: var(--white);
    }
    #option-2:checked ~ .option-2{
      background: var(--primary-color);
      color: var(--white);
    }
    #option-3:checked ~ .option-3{
      background: var(--primary-color);
      color: var(--white);
    }
    #option-4:checked ~ .option-4{
      background: var(--primary-color);
      color: var(--white);
    }
    .project-service-form input[type="radio"]{
      display: none;
    }
    .option span{
      font-weight: 700;
    }
    .form-heading{
      font-weight: 700;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .input-field h4{
      font-size: 20px;
      font-weight: 600;
      padding-bottom: 10px;
      text-transform: capitalize;
    }
    .input-field{
      margin-bottom: 30px;
    }
    .input-com{
      padding: 10px;
      width: 100%;
      border-radius: 5px;
      outline: none;
      border: 1px solid #dee2e6;
      color: var(--black);
    }
    .border-none{
      border: none !important;
      font-weight: 700;
      color: var(--primary-color);
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .input-btn button{
      padding: 10px;
      border: none;
      background: var(--primary-color);
      border-radius: 5px;
      width: 100%;
      margin-top: 10px;
     margin-bottom: 30px;
     color: var(--white);
     font-weight: 600;
    }
/* service-page-banner  */
.industrial-interiors-details{
  background: url(../img/service/Industrial-Interiors/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.residential-interiors-details{
  background: url(../img/service/Residential-Interiors/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.modular-kitchen-designs-details{
  background: url(../img/service/Modular-Kitchen-Design/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.home-and-villa-details{
  background: url(../img/service/Home-Villa/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.living-room-details{
  background: url(../img/service/Living-Room/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.office-spaces-details{
  background: url(../img/service/office-space/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.one-bhk-interior-designs-details{
  background: url(../img/service/1-BHK-Interior-Design/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.two-bhk-interior-designs-details{
  background: url(../img/service/2-BHK-Interior-Design/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.three-bhk-interior-designs-details{
  background: url(../img/service/3-BHK-Interior-Design/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
.commercial-interiors-details{
  background: url(../img/service/Commercial-Interiors/banner-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: relative;
  z-index: 22;
}
    /* =====================================
    Contact Us Page Start
    ======================================== */
    .contact-page-hed h3{
      font-weight: 700;
      text-transform: capitalize;
      padding-bottom: 10px;
      font-size: 40px;
    }
    .contact-page-icon{
      display: flex;
      gap: 15px;
      padding-top: 30px;
    }
    .contact-icon i{
      background: var(--primary-color);
      padding: 10px;
      color: var(--white);
      font-size: 30px;
      border-radius: 5px;
    }
    .contact-icon-text h4{
      font-weight: 700;
    }

    .dropdown-menu-expanded{
      border-radius: 10px !important;
      background: var(--white);
      box-shadow: 0 10px 30px 10px rgba(66, 105, 149, .05);
      left: 50% !important;
      margin: 0 auto !important;
      padding: 30px !important;
      top: 50px;
      transform: translateX(-50%);
      width: max-content;
  }
  .nav-list-head li{
    padding-top: 10px;
  }
  .nav-list-head li a{
    font-weight: 700;
  }
  .nav-list-head li a img{
    width: 40px;
    background: var(--primary-color);
    padding: 10px;
    margin-right: 10px;
    border-radius: 10px;
  }

  /*  */
  @media (max-width:768px){
    .home-about-img1 img{
      width: 100%;
    }
    .home-about-img2{
      display: none;
    }
    .home-about-main-content{
      padding-top: 40px;
    }
    .banner-text h1{
      font-size: 45px;
    }
    .border-right{
      border: none;
    }
    .home-choose-list-img{
      width: 64px;
      height: 64px;
      padding: 10px;
    }
    .scroll-text h3{
      font-size: 56px;
    }
    .home-team-head h3{
      font-size: 35px;
    }
    .team-person-img{
      margin-bottom: 70px;
    }
    .form-img-main{
      margin-right: 0;
    }
    .form-img img{
      object-fit: cover;
    }
    .form-content{
      margin-right: 0;
    }
    .footer-social-links-main{
      justify-content: start;
    }
    .header-social-icon ul{
      justify-content: center;
    }
    .top-header-brand{
      /* justify-content: center; */
      display: none;
    }
    .banner-details-sec{
      top: -113px;
    }
    .padd-0{
      top: 0;
    }
    .about-design-img1{
      padding-top: 50px;
    }
    .dropdown-menu-expanded{
      transform: translateX(0);
    }
    .project-details-box-btn{
      text-align: start;
      padding-top: 20px;
    }
    .project-details-content-box-text p{
      padding-top: 20px;
    }
    .project-details-banner-hed h1{
      font-size: 60px;
    }
    .input-field label{
      margin: 10px;
    }
    .header-button{
      margin-left: 0;
      margin-top: 20px;
    }
  }
  @media (max-width:368px){
    .banner-text h1{
      font-size: 40px;
    }
    .home-about-main-content h2{
      font-size: 30px;
    }
    .home-project-heading h2{
      font-size: 30px;
    }
    .home-we-work-hed h3{
      font-size: 30px;
    }
  }

  /* consulation design page */
  .consulation-head h3{
    font-size: 40px;
    padding-top: 20px;
    font-weight: 700;
    color: var(--white);
  }
  .consulation-head span{
    font-weight: 600;
  }
  .consulation-text{
    padding-top: 20px;
  }
  .consulation-text p{
    font-weight: 600;
    color: var(--white);
  }
  .consulation-content-sec{
    background: var(--primary-color);
    padding: 30px;
    border-radius: 5px;
    height: calc(100% - 20px);
    transition: all 0.3s;
  }
  .consulation-content-sec:hover{
    background: var(--white);
  }
  .consulation-content-sec:hover h4{
    color: var(--primary-color);
  }
  .consulation-content-sec:hover p{
    color: var(--para-color);
  }
  .consulation-content-sec h4{
    color: var(--white);
    font-weight: 700;
    padding-bottom: 10px;
  }
  .consulation-content-sec p{
    color: var(--white);
    font-weight: 600;
  }
  .bg-gray{
    background:#524e48;
  }
  .black h2{
    color: #212529;
  }
  .black p{
    color: #212529;
  }

   /*testimonial  */
   .tyesti-slider-sec1{
    position: relative;
  }
.testi-slider-sec1{
   text-align: center;
   padding-bottom: 70px;
}
.testi-slider-sec1 h3{
    font-size: 40px;
    font-weight: 700;
}
.testi-review-section1{
    position: relative;
    background: var(--white);
    padding: 40px 30px;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    height: 300px;
}
.testi-thumimg1{
    display: flex;
    align-items: center;
    gap: 30px;
}
.thum-img1  img{
    border-radius: 50%;
    width: 70px !important;
}
.thumcontent1 h6{
    color: var(--black);
    font-size: 20px;
    font-weight: 600;
}
.thumcontent1 span{
    color: var(--para-color);
    font-weight: 500;
    font-size: 16px
}
.thumcontent1 p{
    font-weight: 400;
}
.testi-review-section1 p{
    font-weight: 400;
    padding-top: 30px;
}
.testi-rating{
    display: flex;
    background: #f9fbfd;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    padding: 10px 10px;
    border-radius: 10px;
}
.testi-rating-text h6{
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--para-color);
}
.test-rating-img img{
    width: 100px !important;
}
.pb-20{
  padding-top: 20px;
  padding-bottom: 10px;
  font-weight: 700;
  text-transform: capitalize;
}
.font-size1{
  font-size: 20px;
  font-weight: 700;
}
.about-design-sec-content p{
  font-weight: 600;
  color: var(--black);
  padding-top: 10px;
}
.about-design-icon{
  background: var(--white);
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 5px;
}




    /* <!------------------ portfolio start ---------------------> */
    .portfolio-bg{
      background-color: var(--primary-color);
    
    }

    .portfolio-img img{
      width:95%;
      border-radius:10px 0 0 10px !important;
    }
    .portfolio-main{
      padding: 50px !important;
      background-color:#f2f2f2;  
      margin-left: -50px;
      border-radius:0 10px 10px 0;
      border-right:5px solid #524e48;

    }
    .portfolio-box1 h3{
      font-size: 40px;
      font-weight: 700;
      padding-top: 85px;
  
    }
    .portfolio-box1 h6{
      font-size: 18px;
      font-weight: 600;
      padding-bottom: 5px;
      padding-top: 6px;

    }
    .portfolio-box2 h3{
      font-size: 30px;
      font-weight: 700;
      padding-top: 6px;
      color: var(--primary-color);

    }
    .portfolio-box2 p{
      font-size: 14px;
      font-weight: 500;
      padding-top: 6px;

    }
    .portfolio-box1 p{
      font-size: 14px;
      font-weight:500;
      padding-top: 10px;
  
    }
    .span-portfoliio{
      color: var(--primary-color);

    }
    /* ---------------mobile screen----------------? */
    @media (max-width:768px){
      .portfolio-bg{
        background-color: var(--primary-color);
      
      }
  
      .portfolio-img img{
        width:100%;
      }
      .portfolio-main{
        background-color:#f2f2f2;  
        border-radius:10px;
        border-right:none;
        width: 100%;
        padding: 20px !important;
        margin-left: 0px;
  
      }
      .portfolio-box1 h3{
        font-size: 27px;
        font-weight: 700;
        padding-top: 85px;
    
  
      }
      .portfolio-box1 h6{
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 5px;
        padding-top: 6px;
  
      }
      .portfolio-box2 h3{
        font-size: 27px;
        font-weight: 700;
        padding-top: 6px;
        color: var(--primary-color);
  
      }
      .portfolio-box2 p{
        font-size: 14px;
        font-weight: 500;
        padding-top: 6px;
  
      }
      .portfolio-box1 p{
        font-size: 14px;
        font-weight:500;
        padding-top: 10px;
  
      }
      .span-portfoliio{
        color: var(--primary-color);
  
      }


    }


    /* loptop screen */
    @media (min-width: 768px) and (max-width: 1024px){
      .portfolio-bg{
        background-color: var(--primary-color);
      
      }
  
      .portfolio-img img{
        width:95%;
        border-radius:10px 0 0 10px !important;
      }
      .portfolio-main{
        padding: 30px !important;
        background-color:#f2f2f2;  
        margin-left: -50px;
        border-radius:0 10px 10px 0;
        border-right:5px solid #524e48;
        height:368px;
  
      }
      .portfolio-box1 h3{
        font-size: 20px;
        font-weight: 700;
        padding-top: 1px;
    
      }
      .portfolio-box1 h6{
        font-size: 12px !important;
        font-weight: 600;
        padding-bottom: 5px;
        padding-top: 6px;
  
      }
      .portfolio-box2 h3{
        font-size: 14px;
        font-weight: 700;
        padding-top: 6px;
        color: var(--primary-color);
  
      }
      .portfolio-box2 p{
        font-size: 10px;
        font-weight: 500;
        padding-top: 6px;
  
      }
      .portfolio-box1 p{
        font-size: 10px;
        font-weight:500;
        padding-top: 10px;
    
      }
      .span-portfoliio{
        color: var(--primary-color);
  
      }
    }
    @media (min-width: 900px) and (max-width: 1024px){
      .portfolio-bg{
        background-color: var(--primary-color);
      
      }
  
      .portfolio-img img{
        width:95%;
        border-radius:10px 0 0 10px !important;
      }
      .portfolio-main{
        padding: 30px !important;
        background-color:#f2f2f2;  
        margin-left: -50px;
        border-radius:0 10px 10px 0;
        border-right:5px solid #524e48;
        height: 498px;
  
      }
      .portfolio-box1 h3{
        font-size: 25px;
        font-weight: 700;
        padding-top: 5px;
    
      }
      .portfolio-box1 h6{
        font-size: 15px !important;
        font-weight: 600;
        padding-bottom: 5px;
        padding-top: 6px;
  
      }
      .portfolio-box2 h3{
        font-size: 20px;
        font-weight: 700;
        padding-top: 6px;
        color: var(--primary-color);
  
      }
      .portfolio-box2 p{
        font-size: 14px;
        font-weight: 500;
        padding-top: 6px;
  
      }
      .portfolio-box1 p{
        font-size: 14px;
        font-weight:500;
        padding-top: 10px;
    
      }
      .span-portfoliio{
        color: var(--primary-color);
  
      }
    }
    @media (min-width:1025px) and (max-width: 1280px){
      .portfolio-bg{
        background-color: var(--primary-color);
      
      }
  
      .portfolio-img img{
        width:95%;
        border-radius:10px 0 0 10px !important;
      }
      .portfolio-main{
        padding: 50px !important;
        background-color:#f2f2f2;  
        margin-left: -50px;
        border-radius:0 10px 10px 0;
        border-right:5px solid #524e48;
  
      }
      .portfolio-box1 h3{
        font-size: 35px;
        font-weight: 700;
        padding-top:5px;
    
      }
      .portfolio-box1 h6{
        font-size: 18px;
        font-weight: 600;
        padding-bottom: 5px;
        padding-top: 6px;
  
      }
      .portfolio-box2 h3{
        font-size: 25px;
        font-weight: 700;
        padding-top: 6px;
        color: var(--primary-color);
  
      }
      .portfolio-box2 p{
        font-size: 16px;
        font-weight: 500;
        padding-top: 6px;
  
      }
      .portfolio-box1 p{
        font-size: 16px;
        font-weight:500;
        padding-top: 10px;
    
      }
      .span-portfoliio{
        color: var(--primary-color);
  
      }

    }
  
    
    /* <!------------------ portfolio ent ---------------------> */


        /* About Counter Section Start */

        .about-counter-sec{
          background-color: var(--primary-color);
        }
        .counter-text-main{
          text-align: center;
        }
        .counter-text-main h3{
          font-size: 60px;
          -webkit-text-stroke: 1px var(--white);
          color: transparent;
        }
        .counter-text-main p{
          font-weight: 500;
          color: var(--white);
    
        }
        .counter-text-main h5{
          color: var(--white);
          font-weight: 700;
          font-size: 18px;
    
        }
        @media (min-width: 768px) and (max-width: 1024px){
          .counter-text-main p{
            font-weight: 500;
            color: var(--white);
            font-size: 12px;
      
          }
          .counter-text-main h5{
            color: var(--white);
            font-weight: 700;
            font-size: 13px;
      
          }
          .team-person-content h4 {
            padding-top: 10px;
            color: var(--primary-color);
            font-weight: 700;
            font-size: 20px;
        }
        }
        @media (min-width: 900px) and (max-width: 1024px){

          .counter-text-main h5{
            color: var(--white);
            font-weight: 700;
            font-size: 3px !important;
      
          }
        }


/* <!-- Opportunities  start--> */
.bg-color-opportunities{
  background-color: var(--primary-color);
}  
.bg-container-opportunities{
  background-color: var(--white);
  padding: 50px;
  text-align: center;
  border-radius: 10px;
}     
.opportunities-content h2{
  font-size: 40px;
  font-weight: 700;
  color: var(--primary-color);
} 
 
.opportunities-content h4{
  font-size: 20px;
  font-weight: 500;
} 
 
.opportunities-content p{
  font-size: 15px;
  font-weight: 500;
  max-width: 500px;
  margin: 0 auto;
} 
.opportunities-button{
  background-color: #7db240;
  border:1px solid #7db240 !important;
  padding: 10px 30px;
  color: var(--white);
  border: none;
  border-radius:10px;
  margin-top: 30px;
}
/* .opportunities-button:hover{
  background-color: #fdfdfd;
  
  color: var(--black);
  border:1px solid rgb(202, 197, 197) !important;
  border-radius: 10px;
  margin-top: 30px;
} */
.opportunities-button h5{
  font-size: 17px;
  font-weight: 700;
  position: relative;
  top: 2px;
}
.opportunities-button a{
  color: var(--white) !important;
}
.opport-icon{
  font-size: 20px;
  position: relative;
  top: 4px;
}
.oppor-span{
  color: var(--primary-color);
  font-weight: 700;
}
        /* <!-- Opportunities  ent--> */

/* contact-page  */
.contact-us-banner-details {
  background: url(../img/banner/banner-img-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 22;
}



        /* ******************************************** error psge**************************************************** */
.error-main{
  text-align: center;
  align-items: center;
  

  

}
.error-main img{
  text-align: center;
  width: 400px;



}
.error-main-content h1{
  text-align: center;
  font-size: 120px;
  font-weight: 700;
  color:white;
  


}
.error-main-content{
  padding-top: 12%;
  padding-bottom: 17%;




}
.error-main-content h2{
  text-align: center;
  font-size: 50px;
  color:#7db240;


}
.error-main-content p{
  text-align: center;
  font-size: 20px;
  color:white;


}
.error-main-content button{
  text-align: center;
  padding: 13px 50px;
  margin-top: 20px;
  background-color:transparent;
  color:white;
  border-radius: 10px;
  border: 1px solid rgb(255, 255, 255);
  font-weight: 700;
  font-size: 18px;
  transition: all 0.3s;

}
.error-main-content button:hover{
  text-align: center;
  padding: 13px 50px;
  margin-top: 20px;
  background-color:#7db240;
  color:white;
  border-radius: 10px;
  border: 1px solid rgb(255, 255, 255);
  font-weight: 500;
  


}
.error-bg-img{
  background-image: url(/assets/img/404-img/404-img.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position:bottom center;
  z-index:5;
  width: 100%;
  height: 100vh;

  
}
.error-main-content img{
  width: 100px;
  padding-bottom: 20px;
  animation: spin 2s linear infinite;
  /* padding-right: 10px;
  transition-duration: 5s; */
  padding: 10px;
  
  

}
@keyframes spin{
  25%{
      transform: translatey(-100px);
      
  }

}

.error-bg-img::before{
  content: '';
  background-color: #000;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.7;

}
.button-error-page{
  color: var(--white-color);
  text-decoration: none;
  transition: all 0.3s;
}
.button-error-page:hover{
  color: var(--black-color);
  text-decoration: none;
}

  /* ****************************************************** mobile screen************************************************************** */
  @media (max-width:768px){
      .error-main{
          text-align: center;
          align-items: center;
          
       
          
      
        }
        .error-main img{
          text-align: center;
          width: 400px;
        
      
      
        }
        .error-main-content h1{
          text-align: center;
          font-size: 120px;
          font-weight: 700;
          color:white;
          
      
      
        }
        .error-main-content{
          padding-top: 12%;
          padding-bottom: 17%;
      
      
      
      
        }
        .error-main-content h2{
          text-align: center;
          font-size: 30px;
          color:#7db240;
      
      
        }
        .error-main-content p{
          text-align: center;
          font-size: 15px;
          color:white;
      
      
        }
        .error-main-content button{
          text-align: center;
          padding: 10px 30px;
          margin-top: 30px;
          background-color:transparent;
          color:white;
          border-radius: 10px;
          border: 1px solid rgb(255, 255, 255);
          font-weight: 500;
      
      
        }
        .error-main-content button:hover{
          text-align: center;
          padding: 10px 30px;
          margin-top: 30px;
          background-color:#7db340;
          color:white;
          border-radius: 10px;
          border: 1px solid rgb(255, 255, 255);
          font-weight: 500;
          
      
      
        }
        .error-bg-img{
          background-image: url(/assets/img/404-img/404-img.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          background-position:bottom center;
          z-index:5;
      
          
        }
        .error-main-content img{
          width: 90px;
          padding-bottom: 20px;
          animation: spin 2s linear infinite;
          /* padding-right: 10px;
          transition-duration: 5s; */
          padding: 10px;
          
          
      
        }
        @keyframes spin{
          25%{
              transform: translatey(-80px);
              
          }
       
        }
      
        .error-bg-img::before{
          content: '';
          background-color: #000;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          z-index: -1;
          opacity: 0.7;
      
        }
        .button-error-page{
          color: var(--white-color);
          text-decoration: none;
        }
        .button-error-page:hover{
          color: var(--black-color);
          text-decoration: none;
        }
  }

  .banner-btn{
    background-color: var(--primary-color);
    padding: 10px 30px;
    border: none;
    color: var(--white) !important;
    border-radius: 5px;
    margin: 10px 30px;
    font-weight: 700;
  }
  .banner-btn a{
    color: var(--white) !important;
  }