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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
body{
   background-color: #F5F5F5 !important;
}
a{
    text-decoration: none;

}
img{
   width: 100%;
}
:root {
  --nav-bg: #ffffff;
  --main-clr: rgb(0, 0, 0);
  --nav-shadow: 0px 1px #ccc;
  --sec-color: #e1e1e1;
}
section{
   margin: 85px 0;
}
/* navigation menu  */
.navigation {
   height: 65px;
   background: var(--nav-bg);
   box-shadow: var(--nav-shadow);
   position: fixed;
   width: 100%;
   top: 0;
   transition: .4s ease;
   z-index: 9999999999999;
}
.nav-container{
   padding-top: 10px;
}
.brand {
   position: absolute;
   float: left;
   padding-left: 20px;
   line-height: 55px;
   text-transform: uppercase;
   font-size: 1.4em;
   font-size: 25px;
   letter-spacing: 2px;
   color: #000;
   font-weight: 400;
}
.brand a, .brand a:visited {
   color: var(--main-clr);
   text-decoration: none;
}
.nav-container {
  max-width: 1140px;
  margin: 0 auto;

}

nav {
  float: right;
}
nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
nav ul li {
   float: left;
   position: relative;
}
nav ul li a,nav ul li a:visited {
   display: block;
   padding: 0 20px;
   line-height: 55px;
   color:#606060;
   background: var(--nav-bg) ;
   text-decoration: none;
}
nav ul li a{
   font-size: 14px;
   font-weight: 500;
   background: transparent;
   color: #606060;
}
nav ul li a:hover .navbar-dropdown{
   display: block;
}
nav ul li a:hover, nav ul li a:visited:hover {
   background: var(--sec-color);
   color: var(--main-clr);
}
.navbar-dropdown li a{
   background: var(--nav-bg);
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
   padding-left: 4px;
   content: ' \025BE';
}
nav ul li ul li a:not(:only-child):after, nav ul li ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content:' \025B8';
}

nav ul li ul li {
   min-width: 190px;
}
nav ul li ul li a {
   padding: 15px;
   line-height: 20px;
}
.navbar-dropdown {
   position: absolute;
   display: none;
   z-index: 100;
   background: var(--nav-bg);
   box-shadow: 0 0 35px 0 rgba(0,0,0,0.25);
}

/* Mobile navigation */
.nav-mobile {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   background: transparent;
   height: 55px;
   width: 70px;
}
ul.inner-dropdwn {
  display: none;
  position: absolute;
  top: 0px;
  margin-left: 190px;
  z-index: 100;
  background: var(--nav-bg);
  box-shadow: 0 0 35px 0 rgb(0 0 0 / 25%);
}
ul li ul li:hover ul.inner-dropdwn{
  display: block;
}
  /* header */
.header{
    width:100%;
    position: relative;
    min-height:90vh;
    /* background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.5)),url(assets/img/Bed03.jpg); */
    background-size: cover;
    background-position: center;
   /* transition: 5s ease-in-out; */
}

/* .header:hover{
   transform:  scale(1.12046, 1.12046);
   transform-origin: 0% 0% 0px;
} */
.social-media a{
   cursor: pointer;
    color:#fff;
    text-decoration:none;
    margin:0 25px;
}
.header .social-media{

    transform:rotate(90deg)translate(-100%);
    transform-origin:left;
    position:absolute;
    bottom:40px;
    left:5%;
}
.header .line{
    position:absolute;
    top:0;
    bottom:0;
    left:9%;
   width:2px;
    background:rgba(255,255,255,0.3);
} 
.hed-cont {
    position: absolute;
   bottom: 10%;
    padding: 0px 15%;
    color: #fff;
}
.hed-cont h2{
    margin-bottom: 10px;
    font-size: 32px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
}
.hed-cont p{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;
}
 .hed-flx{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
}
 .hed-flx .cnt{
   margin-right: 20px;
}
 .hed-flx i{
   margin-right: 5px;
   font-size: 14px;
}
 .hed-flx span{
   font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
}
.btm-flx{
   padding: 0 0 10px 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
 .lft-flx{
   display: inline
}
.lft-flx a{
   cursor: pointer;
}
 .lft-flx i{
   font-size: 18px;
   color: #000;
   padding-right: 15px;
}
/* projects */
.img-sec{
   overflow: hidden;
}
.img-sec img{
   transition: .5s ease-in-out;
   
}

.img-sec:hover img{
   transform: scale(1.1);
}
.p-name{
   font-size: 14px;
   font-weight: 600;
}
.p-locn{
   font-size: 13px;
   font-weight: 500;
}

section.projects .p-dtls{
   margin-top: 10px;
   text-align: center;
}

/* project details */
.project-details p{
   font-size: 14px;
   text-align: justify;
}
.project-details .img-sec{
   margin-bottom: 10px;
}
.p-nme{
   font-size: 20px;
   border-bottom: 1px solid #ccc;
   font-weight: 500;
   padding: 10px 0;
   margin-bottom: 10px;
}
.p-place{
   font-size: 16px;
}
.p-area{
   font-size: 14px;
   margin-bottom: 20px;
}
.top-10{
   margin-top: 20px !important;
}
/* footer */
.footer{
   background-color: rgb(44, 41, 41);
   padding: 50px 40px;
   position: sticky;
   color: #fff;
}
.footer .foot-logo a{
   font-size: 20px;
   font-weight: 700;
   color: var(--body-color);
   letter-spacing: .2em;
   text-decoration: none;
}
.footer p{
   padding-top: 10px;
   font-size: 14px;
   text-align: justify;
}
.footer .foot-head{
   color: var(--body-color);
   margin-bottom: 12px;
   font-size: 18px;
   font-weight: 500;
   font-family: 'Oswald', sans-serif;
   letter-spacing: .1em;
}
.footer ul{
   padding-left: 0;
}
.footer ul li{
   list-style: none;
}
.footer ul li a{
   font-size: 14px;
   color: var(--body-color);
   text-decoration: none;
}
.footer ul li a:hover{
   color: var(--sec-color);
   text-decoration: underline;
}
.footer .social-icons{
   padding: 0 0 10px 0;
   display: flex;
}
.footer .social-icons a{
   display: inline-block;
   width: 35px;
   height: 35px;
   text-align: center;
   border-radius: 100%;
   color: var(--main-clr);
   margin-right: 10px;
   border: 1px solid transparent;
   background-color: var(--nav-bg);

}
.footer .social-icons i{
   line-height: 30px;
   font-size: 18px;
  
}
.footer .social-icons a:hover{
   background-color: var(--main-clr);
   border: 1px solid var(--sec-color);
   transition: .6s cubic-bezier(0.4, 0, 1, 1);
    color: #fff;
}
.footer .contact i{
   padding-right: 10px;
   font-size: 15px;
   margin-bottom: 10px;
}
/* projects */
.brdr-bx{
   margin-bottom: 27px;
   border: 1px solid #dee2e6;
   padding: 1px 1px 12px;
}
.projects a{
   text-decoration: none;
   color: #000;
}
.projects a:hover{
   text-decoration: none;
   color: #000;
}
 section .image-gallery{
   max-width: 1300px;
   min-height: 100vh;
   width: 100%;
   background: #fff;
   margin: auto;
 }
 .image-gallery header{
   color: #fff;
   font-size: 30px;
   font-weight: 600;
   text-align: center;
   background: #24292d;
   padding: 20px 0;
   letter-spacing: 1px;
 }
 .image-gallery .image-container{
   columns: 3;
   margin-top: 20px;
   gap: 15px;
   overflow: hidden;
 }
 .image-gallery .image-box:hover img{
  transform: scale(1.2);
 }
 
 .image-container img{
   width: 100%;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
   transition: .7s;
 }
 .image-container .image-box{
   position: relative;
   cursor: pointer;
   margin: 10px 0;
   overflow: hidden;
 }
 .image-box .logo_icons{
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
   padding: 10px 15px;
   background: rgb(0 0 0 / 36%);
   box-shadow: 0 -10px 10px rgb(0 0 0 / 36%);
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s ease;
 }
 .image-box:hover .logo_icons{
   opacity: 1;
   pointer-events: auto;
 }
 .image-box .logo_icons .icons i{
   color: #b4b4b4;
   background: #fff;
 }
 .logo_icons .icons i:hover{
   color: #707070;
 }
 section .image-gallery .logo_icons .text_content{
   color: #fff;
   font-size: 14px
 }
 section .image-gallery .text_content .followers{
   font-size: 12px;
   font-weight: 400;
   margin-top: -4px;
 }
 @media (max-width: 1034px) {
  
   .lft-flx {
      display: none;
  }
   .lightBox_content .bx-x{
     top: -40px;
     right: 4px
   }
 }
 @media (max-width: 1002px) {
   .image-gallery .image-container{
     columns: 2;
   }
 }
 @media (max-width: 602px) {
   .image-gallery .image-container{
     columns: 1;
   }
 }
 @media (max-width: 602px) {
   .image-gallery header{
     font-size: 25px;
   }
 }

 /* contact */
 .banner{
   height: 100%;
   background-image: url(assets/img/Bed03.jpg);
 position: relative;
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
   margin-top: 60px;
 
}
.banner .bnr-highlight{
   background-color: rgb(0 0 0 / 55%);
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}
.banner .bnr-txt{
   padding: 10% 5% 2%;
}
.banner .title{
   color: #fff;
   font-size: 25px;
   font-weight: 500;
}

 
.contact-d .c-flx i{
   font-size: 14px;
    margin-right: 10px;
    color: #7e7e7e;
}
.contact-d .c-flx span{
   font-size: 13px;
}
.contact-d .c-cont {
   font-size: 14px;
   margin-left: 28px;
   margin-bottom: 25px;
}
.contact-d .img-bnr{
   width: 100%;
   height: 30%;
    background-image: url(assets/img/LivingDining1.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
   font-size: 0.75em;
   color: #999;
   top: -5px;
   -webkit-transition: all 0.225s ease;
   transition: all 0.225s ease;
}

.styled-input {
   float: left;
   width: 264px;
   margin: 0.5rem 0;
   position: relative;
   border-radius: 4px;
}
.contact-d .cnt-hedd{
  text-align: center;
}
@media only screen and (max-width: 768px){

   .brdr-bx{
      margin-bottom: 10px;
      
   }
   .styled-input {
       width:100%;
   }
   .contact-d .cnt-hedd{
      margin-top: 20px;
      text-align: start;
      font-weight: 500;
   }
}

.styled-input label {
   color: #999;
   padding: 1.3rem 30px 1rem 30px;
   position: absolute;
   top: -5px;
   left: 0;
   -webkit-transition: all 0.25s ease;
   transition: all 0.25s ease;
   pointer-events: none;
}

.styled-input.wide { 
   width: 650px;
   max-width: 100%;
}

input,
textarea {
   padding: 15px;
   border: 0;
   width: 100%;
   font-size: 1rem;
   background-color: #2d2d2d;
   color: white;
   border-radius: 4px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
   width: 100%;
   -webkit-transition: all 0.075s ease;
   transition: all 0.075s ease;
}

textarea {
   width: 100%;
   min-height: 15em;
}

.input-container {
   width: 650px;
   max-width: 100%;
}

.submit-btn {
   float: right;
   padding: 7px 22px;
   border-radius: 6px;
   display: inline-block;
   background-color: #1d1d1d;
   color: white;
   font-size: 15px;
   cursor: pointer;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
             0 2px 10px 0 rgba(0,0,0,0.07);
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
}

.submit-btn:hover {
   transform: translateY(1px);
   box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
             0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
   .header{
      min-height:88vh;
  }
   a.active::before{
      display: none;
   
   }
   .submit-btn {
       width:100%;
       float: none;
       text-align:center;
   }
}

input[type=checkbox] + label {
 color: #ccc;
 font-style: italic;
} 

input[type=checkbox]:checked + label {
 color: #f00;
 font-style: normal;
}
.contact-dtls{
   padding: 38px 20px;
 display: flex;
 flex-direction: column;
 text-align: center;
 align-items: center;
}
/* media query */
  @media only screen and (max-width:990px) {

   .rcnt-prjcts .row{
      margin-top: 8px;
   }
   .sec-hed{
      margin-top: 40px;
   }
   .what-we-do .row{
      margin-bottom: 10px;
   }
   .what-we-do .srvc-bx{
      margin-bottom: 10px;
   }
   .about-us .abt-cnt{
     margin-top: 20px;
   }
   .banner .title{
      font-size: 18px;
   }
   .project-details .img-sec{
      margin-bottom: 10px;
   }
   .footer p {
    text-align: center;
  }
   .footer .social-icons{
    justify-content: center;
   }
   .footer{
     text-align: center;
   }
   section.projects .row .col-md-4{
      margin-top: 20px;
   }
   .btm-flx {
      padding-top: 0;
      justify-content: center;
  }
    .hed-flx .cnt{
      margin-bottom: 3px;
   }
   .hed-flx{
      flex-direction: column;
      align-items: center;
}
   .hed-cont {
      padding: 0px 10px 0 50px;
   }
    nav ul li a{
      font-size: 13px;
    }
    nav ul li ul li a:not(:only-child):after, nav ul li ul li a:visited:not(:only-child):after {
      padding-left: 4px;
      content: ' \025BE';
  }
  ul.inner-dropdwn {
      display: none;
      position: static;
      top: 0px;
      margin-left: 18px;
      box-shadow: none;
  }
   .nav-mobile {
       display: block;
  }
   nav {
       width: 100%;
       padding: 55px 0 15px;
  }
   nav ul {
       display: none;
  }
   nav ul li {
       float: none;
  }
   nav ul li a {
       padding: 15px;
       line-height: 20px;
       background:var(--nav-bg);
  }
   nav ul li ul li a {
       padding-left: 30px;
  }
   .navbar-dropdown {
       position: static;
}

#navbar-toggle {
   position: absolute;
   left: 18px;
   top: 15px;
   cursor: pointer;
   padding: 10px 35px 16px 0px;
}
#navbar-toggle span, #navbar-toggle span:before, #navbar-toggle span:after {
   cursor: pointer;
   border-radius: 1px;
   height: 2px;
   width: 24px;
   background: var(--main-clr);
   position: absolute;
   display: block;
   content: '';
   transition: all 300ms ease-in-out;
}
#navbar-toggle span:before {
   top: -7px;
}
#navbar-toggle span:after {
   bottom: -7px;
}
#navbar-toggle.active span {
   background-color: transparent;
}
#navbar-toggle.active span:before, #navbar-toggle.active span:after {
   top: 0;
}
#navbar-toggle.active span:before {
   transform: rotate(45deg);
}
#navbar-toggle.active span:after {
   transform: rotate(-45deg);
}


}
a.active{

}
a.active::before{
   width: 20px;
   height: 20px;
   content: '';
   position: absolute;
   left: 50%;
   bottom: 12px;
   transform: translateX(-50%);
   height: 1.7px;
   width: -webkit-fill-available;
   background-color: #818181;
   transition: all 0.3s ease;

}
p{
   font-size: 14px;
   /* font-weight: 500; */
}

/* about-us */
.about-us p{
   text-align: justify;
}
.what-we-do .srvc-bx{
   border: 1px solid #cccc;
   position: relative;
   margin-bottom: 20px;
}
.what-we-do .srvc-bx .srvc-hd{
   padding: 45px 0 20px 0;
   text-align: center;
   font-size: 15px;
   font-weight: 500;
}
.what-we-do .srvc-bx .srvc-hd::before{
   width: 20px;
   height: 20px;
   content: '';
   position: absolute;
   left: 50%;
   bottom: 60px;
   transform: translateX(-50%);
   height: 2.7px;
   width: 30px;
   background-color: #818181;
   transition: all 0.3s ease;
}
.srvc-p{
   /* text-align: justify; */
   font-size: 11px;
   color: #2d2d2d;
   
}
.what-we-do a{
   text-decoration: none;
}
.rcnt-prjcts{
   position: sticky;
   overflow: auto;
   height: 90%;
}
.srvc-bx .srvc-overlay{
   height: 100%;
   width: 100%;
   overflow: auto;
   position: absolute;
   background-color: #f8f9faeb;
   z-index: 9;
   top: 0;
   display: flex;
   box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
   align-items: flex-start;
   flex-direction: column;
   justify-content: center;
   padding: 10px ;
   text-align: justify;
   opacity: 0;
   transition: all .3s ease ;
   left: 0;
}
.srvc-bx:hover .srvc-overlay{
   opacity: 1;
}
.srvc-bx:hover {
   border: none;
}
.vw-btn{
   text-decoration: none;
   background-color: #1d1d1d;
   color: #f1f1f1;
   padding: 8px 20px;
   font-size: 12px;
   border-radius: 6px;
}
.srvc-overlay p{
   font-size: 12px;
}
.what-we-do h4{
   margin-bottom: 20px;
   font-weight: 500;
   font-family: sans-serif;
}
.what-we-do .row{
   margin-bottom: 6px;
}

.bg-grey{
   background-color: #F5F5F5;
}
.bg-white{
   background-color: #ffff;
 
}