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

:root{
    --white: #fff;
    --creame: #F2F1EC;
    --black: #171717;
    --gray: #85888C;
    --orange: #FAAE41;
    --limegreen:#8BC540;
    --light-orange: #f9ba5d;
    --success-green:#e1ecd4;
    --error-red:#eb9999;

} /* variables*/

*{margin:0px; padding:0px;}

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}
body {
	font-family: 'Montserrat', sans-serif;
    color: var(--black);
	overflow: hidden;
	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    --tw-text-opacity: 1;
    background-color:var(--creame);
}

h1, h2, h3{ font-weight:300;  margin-bottom:1.5em;}
a{transition: all 0.3s ease-in-out;}
a:hover{color: #8bc540 !important;}

.aligncenter{text-align:center}
.alignright{text-align:right}
.alignleft{text-align:left}

.readmore, .readmorewhite{padding:15px 25px; text-decoration: none; color: inherit; margin-top: 1em; display: inline-block; transition: all 0.3s ease-in-out;}
.readmore{ border:1px solid var(--black);} 
.readmorewhite{ border:1px solid var(--white);}
.readmore:hover, .readmorewhite:hover{background-color: #8bc540; color: #000 !important;}

.container12, header, footer{width:100%; float:left; position:relative;}
article{width:80%; margin:0px auto;}

header{position:absolute; width:100%; padding:2em 3em; left:0px; right:0px; top:0px; z-index: 10;}
header .logo{ width: 194px; margin: auto; position: absolute; left: 0px; right: 0px;}
header .logo img{width:100%;}

header .navigation{width: 100%; float:right;}

/* Menu Icon */
.hamb{
    cursor: pointer;
    padding: 47px 20px;
    z-index: 10;
    position: absolute;
    right: 3em;

}/* Style label tag */

.hamb-line {
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before{
    border-top: solid 1px var(--white);
    border-bottom: solid 1px var(--white);
    content: '';
    display: block;
    position: absolute;
    transition: all .2s ease-out;
    width: 42px;
    height: 13px;

}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */


/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100%;
    display: block;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}



  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

  /* Nav menu */

.side-menu:checked ~ nav{
    max-height: 100%;
    display: block;
    width: 100%;
    margin-top: -2em;
    height: 100ch;
    margin-left: -48px;
    padding-top: 7em;
    padding-left: 6em;
}
nav{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #000000d1;
    overflow: hidden;

}
nav ul li{ display: list-item !important;float: none !important; list-style: none;}
nav ul a{
    display: block;
    padding: 20px 30px;
    color: var(--white);
    width: 30%;
    font-size: 30px;
    text-decoration: none;
    font-weight: 200;
}

nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}


.banner{position:relative; height:100vh; width:100%; }
.home .banner li div{position:relative; width:100%; height:100vh; background-position:center; background-repeat: no-repeat; background-size:cover !important;}
.home .banner li div::before{content:""; position:absolute; width:100%; height:100%; left:0px; top:0px; background:#0000007b; mix-blend-mode: multiply;}
.home .banner .caption{position: absolute; top: 8em; z-index: 3; color: var(--white); font-weight: 200; font-size: 44px; width: 48vw; text-align: center; line-height: 1.2; left: 0; right: 0; margin: auto;}
.home .banner .flex-direction-nav{display: none;}

.inner .banner{height:auto;}
.inner .bannerimg{width: 100%; height: 53vh; background-position: center; background-size: cover;}
.inner .banner:before{content:""; position:absolute; width:100%; height:100%; left:0px; top:0px; background:#0000007b; mix-blend-mode: multiply;}
.inner .banner .title{position: absolute; bottom: 0px; color: #fff; right: 0px; left: 0px; margin: 0 auto; width: auto; text-align: center;}

.innershortbanner .banner{height:auto;}
.innershortbanner .banner:before{position:absolute; content:""; height:100%; width:100%; background-color:#000000ab;}
.innershortbanner .banner .bannerimg{width: 100%; height: 30vh; background-position: center; background-size: cover;}


.home .flex-direction-nav{display:none;}

.aboutbrief{padding: 8em 0px;}
.aboutbrief .brief{text-align: right; font-size: 42px; padding-right: 1em; line-height: 1.3; font-weight: 200;}
.aboutbrief .cont{ position: relative;}
.aboutbrief .contbody{ position: absolute; top: 50%; transform: translate(0, -50%); padding: 10px;}

.aboutcont{padding:4em 0px;}
.aboutcont h3{font-size:40px; font-weight:200;}

.aboutbrief .brief .orangetext{color:var(--orange)}
.aboutbrief .brief .greentext{color:var(--limegreen)}

.missionvision{margin:4em 0px; display: grid; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: auto auto;}
.tilebox .cont{padding: 7em 4em; height: 100%; background-color: var(--black); background-position: center; background-size:cover; position:relative; color:#fff;}
.tilebox .cont:before{content:""; position:absolute; width:100%; height:100%; left:0px; top:0px; background:#000000b6; mix-blend-mode: multiply;}
.tilebox .cont h3{position:relative; margin-bottom:0.6em; color:var(--orange)}
.tilebox .cont p{position:relative;}

.partnersbar{padding:4em 0; background-color:var(--white);}
.partnersbar .partnerslide li{display: flex !important; align-items: center; justify-content: center; margin: auto; height: 137px;}
.partnersbar .partnerslide img{width:80%; height: 90%; object-fit: contain;}

.testimonials{padding: 4em 0;}
.testimonials .cont{padding: 0 7em; font-size: 22px; font-weight: 300; position:relative;}
.testimonials .names{font-size: 18px; font-weight:500}
.testimonials .names span{font-size: 14px;}

.darkbg{background-color:#000; color:white;}
.darkbg a{color:white;}
.servicelist{margin:4em 0;}
.servicelist .col-lg-6{position:relative; margin-bottom:1.5em;}
.servicelist .servebx{ filter: grayscale(100%); transition: all 0.3s ease-in-out; background-repeat:no-repeat; height:15em; background-size:cover !important; background-position:center;}
.servicelist .servebx:before{content:""; position:absolute; width:100%; height:100%; left:0px; top:0px; background:#0000005e; mix-blend-mode: multiply;}
.servicelist .servetitle{font-weight:200; font-size:20px; position: absolute; padding:4em 3em; top: 50%; transform: translate(0, -50%); color: var(--white); width: 100%; text-align: center; text-shadow: 1px 1px 11px #1d1d1d; transition: all 0.3s ease-in-out;}

.servicelist .servebx:hover{filter: grayscale(0%) !important;}
.servicelist .servebx:hover .servetitle{color:var(--limegreen); font-weight:400;}

/*.reveal { position: relative; transform: translateY(150px); opacity: 0; transition: .5s all ease;}
.reveal.active {transform: translateY(0); opacity: 1;}*/

.reveal {
    animation-duration: 0.5s;
    animation-name: animate-fade;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
    opacity: 0;
  }
.delay-1 { animation-delay: 0.6s;}
.delay-2 { animation-delay: 0.7s;}  
.delay-3 { animation-delay: 0.8s;}

.reveal.active {
    animation-name: animate-pop;
    animation-timing-function: cubic-bezier(.26,.53,.74,1.48);
    opacity: 1;
  }

@keyframes animate-fade {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes animate-pop {
    0% {
      opacity: 0;
      transform: scale(0.5, 0.5);
    }
          
    100% {
      opacity: 1;
      transform: scale(1, 1);
    }
  }


.experts{padding: 4em 0; background-color: var(--black); color: #fff;}
.experts .expertimg{width: 352px; height: 360px; flex-shrink: 0; background-repeat: no-repeat; background-size: cover;}

.ourwork{padding: 4em 0 6em 0; background-blend-mode: hard-light; background-color:#ccc3b994; background-position: center; background-repeat: no-repeat;  background-size: cover;}
.ourwork .worktile{display: grid; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: auto auto auto auto;}
.ourwork .worktile .boxtile{ box-sizing: border-box; background-size: cover !important; height: 170px; box-shadow: inset 0px 0px 75px 6px #0a0a0a; filter: grayscale(100%); transition: all 0.3s ease-in-out;}
.ourwork .worktile .boxtile:hover{filter: grayscale(0%);}
.ourwork .worktile .boxtile .worktitle{ display:none; position:absolute; top: 50%; transform: translate(0, -50%); color:#fff; width:100%; text-align:center; text-shadow: var(--black) 1px 1px 1px; transition: all 0.9s ease-in-out; }
.ourwork .worktile .boxtile .worktitle h4{font-weight:400; margin-bottom: 0px;}
.ourwork .worktile .boxtile:hover .worktitle{ display:block;}

.workbrief{padding: 4em 0 2em 0;}
.workbrief h2{font-size: 3rem; margin-bottom: 0px;}
.gallerybar .imgbx{height: 90vh; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important; position:relative;}
.gallerybar .imgbx .caption{position: absolute; bottom: 0px; padding: 1em; width: 70%; background-color: #ffffff1f;}

.calltoaction{padding:4em 0px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.calltoaction .shade{padding:3em; background-color:#000000aa; color:#fff;}
.calltoaction .shade .brief{font-size:38px; font-weight:200; text-align: right; line-height: 1.3;}

footer{padding:3em 0;}
footer .footmenu{text-align: center; margin-bottom:1em;}
footer .footmenu ul{margin:0px; padding:0px;}
footer .footmenu ul li{display:inline; list-style:none}
footer .footmenu ul li a{margin:0px 20px; text-decoration:none; color:inherit;}

footer .social ul{margin:0px; padding:0px; text-align:center;}
footer .social ul li{display:inline; list-style:none}
footer .social ul li a{margin:0px 20px; text-decoration:none; color:inherit;}
footer a:hover{color: #8bc540;}

footer .copy{text-align:center; margin:3em 0 .5em 0; font-size:12px;}


.contacts{padding:4em 0px;}
.contacts h4, .contacts h5{font-weight:400}
.contacts a{text-decoration: none; color:inherit;}
.contactForm{width:100%}
.contactForm input[type=text], .contactForm input[type=email]{width: 100%; padding: 16px 14px; border: 1px solid #85888c8a; border-radius: 7px; margin-bottom: 1em;}

.contactForm textarea{width:100%; padding:5px 10px; padding: 16px 14px; border: 1px solid #85888c8a; border-radius: 7px; margin-bottom: 1em;}
.contactForm label{font-weight:600; font-size:14px;}
.contactForm label i{font-weight:400; font-size:12px;}
.contactForm .submit{padding:15px 25px; border:solid 1px var(--black); transition: .5s all ease;}
.contactForm .submit:hover{background-color:var(--limegreen); color:var(--white);}

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 767px)  {
  .h2, h2 {font-size: calc(1.325rem + 3.9vw);}  
  .home .banner .caption {top: 6em; width: 74vw; font-size: 40px;}

  .inner .banner .title h2{font-size:36px;}
  .hamb {right: 2em; }
  .side-menu:checked ~ nav { padding-top: 10em; padding-left: 0em;}
  nav ul a { width: 100%;}

  .aboutbrief { padding: 4em 0px; }
  .aboutbrief .brief {font-size: 37px;}
  .aboutbrief .contbody { position: relative; }
	
	.gallerybar .imgbx { height: 45vh; }

  .aboutcont {padding: 2em 0px; }
  .missionvision { grid-template-columns: auto;}
  .tilebox .cont { padding: 3em 2em;}
  .tilebox {margin-bottom: 1em;}

  .ourwork .worktile {grid-template-columns: auto auto;}
	
	.testimonials .cont {padding: 0;}

  .calltoaction .shade {padding: 2em;}
  .calltoaction .shade .brief { text-align: left; margin-bottom: 1em; font-size: 33px; }  
  .experts .expertimg { width: 100%; height: 317px;}

  .quickcontact{margin-top:3em;}

  footer .footmenu ul li {display: list-item; margin-bottom: 1em;}
  footer .social{margin-top: 3em;}
  footer .social ul li a { margin: 0 13px;}

}