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

  Template Name: Bauhaus
  Description: Bauhaus - Architecture & Interior Template
  Author: Murren
  Author URI: http://themeforest.net/user/murren20
  Version: 1.0
  
  1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Helpers

  2.  Navbar 

      2.1 Navbar elements
      2.2 Navbar affix
      2.3 Sidebar Menu
      
  3.  Homepage

      3.1 Jumbotron
      3.2 Slider
      3.3 Section About
      3.4 Section Projects

          3.4.1 Projects Carousel

      3.5 Section Clients
      3.6 Section Partners
      3.7 Section News

  4.  Homepage v2

      4.1 Navbar
      4.2 Sections
      4.3 Section About
      4.4 Section Projects
      4.5 Section Reviews
      4.6 Section Contacts

  5.  Homepage v3

  6. Pages

     6.1 Works Grid
     6.2 Works Carousel
     6.3 Project Detail
     6.4 News Masonry
     6.5 News Listing
     6.6 Post detail

         6.6.1 Related posts
         6.6.2 Comments

     6.7 Widgets

         6.7.1 Widget Search
         6.7.2 Widget Twitter
         6.7.3 Widget Recent Posts

     6.8 About us

         6.8.1 Services
         6.8.2 Partners
         6.8.3 Team

      6.9. Contacts

      7. Footer
      8. Responsive styles

      8.1 Min width: 768px
      8.2 Min width 992px
      8.3 Min width 1200px 
      8.4 Max width 992px
      8.5 Min height 500px
      8.6 Min height 600px
      8.7 Min height 700px

    
    
/*-------------------------------------------------------------------------------
 1. Global
-------------------------------------------------------------------------------*/



/* 1.1 General */




@import url('bootstrap.css');
@import url('animsition.css');
@import url('font-awesome.min.css');
@import url('ionicons.min.css');
@import url('linearicons.css');
@import url('animate.css');
@import url('magnific-popup.css');
@import url('jquery.fullPage.css');
@import url('jquery.pagepiling.css');
@import url('settings.css');
@import url('layers.css');
@import url('navigation.css');


html{
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
}

body{
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 2.1428;
  color: #666666;
  -webkit-overflow-scrolling:touch;
}

/* Prevent horizontal overflow on mobile devices */
body, html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

::-webkit-scrollbar{
  width: 0.667rem;
  height: 0.667rem;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #9fc939;
}

::selection{
  background-color:#9fc939;
  color:#fff;
}

-webkit-::selection{
    background-color:#9fc939;
    color:#fff;
}

::-moz-selection{
    background-color:#9fc939;
    color:#fff;
}

/* Mobile: thinner scrollbars for smaller screens */
@media (max-width: 767px) {
  /* Firefox */
  html { scrollbar-width: thin; }
  /* WebKit */
  ::-webkit-scrollbar {
    width: 0.4rem;   /* vertical thickness */
    height: 0.4rem;  /* horizontal thickness */
  }
}



/* 1.2 Typography */



@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
       url('../fonts/poppins-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

h1,
.h1{ 
  font-weight: 700;
  font-size: 3.428rem;
  line-height: 1.2;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.025em;
  margin:0.5em 0;
}

h2,
.h2{ 
  font-weight: 600;
  font-size: 2.571rem;
  line-height: 1.166;
  color: #333;
  letter-spacing: 0;
  margin:2.6rem 0;
}

h3,
.h3{
  font-weight: 600;
  font-size: 2.142rem;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: #333;
  margin:2.6rem 0;
}

h4,
.h4{
  font-weight: 600;
  font-size: 1.714rem;
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: #333;
  margin:2.6rem 0;
}

h5,
.h5{
  font-weight: 600;
  font-size: 1.571rem;
  line-height: 1.1;
  letter-spacing:0;
  color: #333;
  margin:2.6rem 0;
}

h6,
.h6{
  font-weight: 600;
  font-size: 1.285rem;
  line-height: 1.3333;
  letter-spacing:0;
  color: #333;
  margin:2.6rem 0;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a,
h6 a,
.h6 a{
  color:inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover,
h5 a:hover,
.h5 a:hover,
h6 a:hover,
.h6 a:hover{
  text-decoration: none;
}


strong{
  font-weight: 600;
}

p,
blockquote{
  margin-bottom: 2.6rem;
}

blockquote{
  font-size: 1.414rem;
  letter-spacing: 0.025em;
  line-height: 1.5;
  padding: 0;
  width: 80%;
  padding-left: 6.8rem;
  border-left: 0.3rem solid #9fc939;
  margin-top: 5rem;
  color:#333;
}

cite{
  display: block;
  color: #333;
  font-weight: 600;
  letter-spacing: 0;
  font-style: normal;
}

.blockquote-cite{
  font-size: 1rem;
  color: #999999;
  letter-spacing: 0.05em;
  padding-left: 7.1rem;
  margin-bottom: 5rem;
}

.blockquote-cite cite{
  font-size: 1.14rem
}

a {
  color:#9fc939;
  -webkit-transition: color .3s ease-out;
       -o-transition: color .3s ease-out;
          transition: color .3s ease-out;
}

a:hover,
a:focus {
  color:#9fc939;
  outline: none;
}


a:focus{
  text-decoration: none;
}


/* 1.3 Fields */



input[type='text'],
input[type='address'],
input[type='url'],
input[type='password'],
input[type='email'],
input[type="search"],
input[type="tel"],
textarea{
  display: inline-block;
  width:100%;
  font-size: 1rem;
  border-radius: 0.75em;
  color: #3d3d3d;
  background-color:#fff;
  border:0;
  border: 0.083rem solid #d1d1d1;
  border-radius: 0;
  padding:0.2rem 1rem 0;
  height:3.6em;
  -webkit-box-shadow:none;
          box-shadow:none;
      -webkit-appearance: none;
  -webkit-transition: all .15s;
       -o-transition: all .15s;
          transition: all .15s;
}

textarea{
  padding-top: 0.8rem;
  height: 15rem;
  resize:none;
  -webkit-transition: all .3s;
       -o-transition: all .3s;
          transition: all .3s;
}

input[type='text']:focus,
input[type='address']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus{
  border-color: #9fc939;
  outline: 0;
}

input.input-gray,
textarea.input-gray{
  background: #f6f6f6;
}


input.input-gray:focus,
textarea.input-gray:focus{
  background: #fff;
}

input::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}

textarea::-moz-placeholder{
  color: #999;
  opacity: 1;
}

textarea:-ms-input-placeholder {
  color: #999;
}

textarea::-webkit-input-placeholder {
  color: #999;
}

.form-group{
  margin-bottom: 2.5rem;
}

input.error{
  border-color: #9fc939;
}

.mc-label,
label.error{
  font-size: 0.83em;
  font-weight: 400;
  margin: 0.7em 0 0 0;
  color: #747474;
}



/* 1.4 Buttons */



.btn{
  color:#fff;
  letter-spacing: 0.025em;
  font-size: 1rem;
  display: inline-block;
  border:0;
  border-radius: 0;
  padding: 1.1em 2.28em 1em;
  background-color: #333;
  text-decoration: none;
  -webkit-transition: all .3s ease-out!important;
          transition: all .3s ease-out!important;
}

.btn:hover,
.btn:focus{
  background-color:#9fc939;
  color: #fff;
  -webkit-box-shadow:none;
  box-shadow: none;
  outline: none!important;
}

.btn-upper{
  font-weight: 600;
  text-transform: uppercase;
}


.btn-yellow{
  background: #9fc939;
  color: #fff;
}

.btn-yellow:hover,
.btn-yellow:focus{
  background: #333;
}



/* 1.5 Icons */



.icon{
  display: inline-block;
}

.icon-medium{
  font-size: 4.2rem;
}

.link-arrow{
  display: inline-block;
  color: #333;
  line-height: 1!important;
  font-weight: 600;
}

.link-arrow-2{
  display: inline-block;
  font-size: 1.14rem;
  color: #999999;
  font-weight: 400;
}

.link-arrow .icon,
.link-arrow-2 .icon{
  position: relative;
  margin-left: 0.7rem;
  font-size: 2.1em;
  vertical-align: middle;
  -webkit-transition: transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
}

.link-arrow .icon{
  top:0.1rem;
}

.link-arrow .ion-ios-arrow-right{
  font-size: 1.5em;
}

.link-arrow-2 .ion-ios-arrow-right{
  font-size: 1.5em;
}

.link-arrow:hover,
.link-arrow-2:hover{
  color: #9fc939;
  text-decoration:none;
}

.link-arrow:hover .icon,
.link-arrow-2:hover .icon{
  -webkit-transform: translateX(0.5rem);
  -o-transform: translateX(0.5rem);
  transform: translateX(0.5rem);
}



/* 1.6 Preloader */



.animsition{
  position:absolute;
  z-index: 100;
  left: 0;
  width: 100%;
  top:0;
  height: 100%;
}

.preloader{
  position: fixed;
  overflow: hidden;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#fff;
  color:#4b4b4b;
  text-align: center;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.167rem;
  height: 4.167rem;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #9fc939;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}



/* 1.7 Helpers */



.text-dark{
  color: #333;
}

.text-muted{
  color: #999;
}

.text-white{
  color: #fff;
}

.text-primary{
  color: #9fc939;
}

.masked{
  position: relative;
}

.masked:before{
  content:'';
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.1;
}

.pt-0{
  padding-top: 0!important;
}

.pb-0{
  padding-bottom:0!important;
}

.rel-1{
  position: relative;
  z-index: 1;
}

.overflow-hidden{
  overflow: hidden;
}


/*-------------------------------------------------------------------------------
  2. Navbar
-------------------------------------------------------------------------------*/



.navbar{ 
  position: absolute;
  z-index: 10;
  left:0;
  top:0;
  width:100%;
  padding-top: 2.7rem;
  height: 7rem;
  background-color: #fff;
  margin:0;
  border-radius: 0;
}

.navbar .brand{
  float: left;
  margin-top: -0.5rem;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}



/* 2.1 Navbar elements */



.brand{
  line-height: 1.6;
  color: #333;
  display: inline-block;
}

a.brand:hover,
a.brand:focus{
  text-decoration: none;
  color: #333;
}

.brand img{
  display: inline-block;
  vertical-align: top;
  margin-right: 0.65rem;
  height: 3.75rem;     /* Reduced from ~50px to ~45px */
  width: auto;      /* Maintain the aspect ratio */
  max-width: 100%;  /* Prevent overflow on smaller screens */
}

.brand-info{
  display: inline-block;
}

.brand-name{
  font-weight: 600;
  font-size: 1.714rem;
  line-height: 1;
}

.brand-text{
  color: #999999;
  font-size: 0.857rem;
  font-weight: 300;
  margin-top: -0.3rem; 
}

.navbar-toggle{
  display: block;
  margin:0;
  padding: 0;
  border-radius: 0;
}

.navbar-toggle .icon-bar{
  background-color: #333;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.navbar-toggle:hover .icon-bar{
  background-color:  #9fc939;
}

.navbar .social-list{
  float: right;
}

.social-list{
  overflow:hidden;
}

.social-list a{
  float: left;
  font-size: 1.428rem;
  line-height: 1;
  color:#333;
  margin-left: 2rem;
}

.social-list a:first-child{
  margin-left: 0;
}

.social-list a:hover{
  color:#9fc939;
  text-decoration: none;
}

.navbar-spacer{
  float: right;
  margin:-1rem 4.5rem 0;
  width: 0.083rem;
  height: 3.3rem;
  background-color: #e0e0e0;
}

.navbar-address{
  float: right;
  font-weight: 600;
  text-transform: uppercase;
}



/* 2.2 Navbar affix */


.navbar.affix{
  position: fixed;
  box-shadow: 0 0 5.417rem rgba(0,0,0,0.07);
}


/* 2.3 Sidebar menu */



.click-capture{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 99;
}

.menu{
  position: fixed;
  top:0;
  bottom:0;
  right: 0;
  width: 100%;
  z-index: 100;
  background-color: #fff;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.close-menu{
  position: absolute;
  z-index: 2;
  top: 2.3rem;
  font-size: 1.6rem;
  line-height: 1;
  color: #333;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.close-menu:hover{
  color: #9fc939;
}

.menu .menu-lang{
  opacity: 0;
  position: absolute;
  opacity: 0;
  left: 15%;
  top:3rem;
  text-transform: uppercase;
  -webkit-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  -o-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition: transform 0.5s 0.4s ease, opacity 0.5s 0.4s ease, color 0.3s ease;
  -o-transition:  transform 0.5s 0.4s ease, opacity 0.5s 0.4s ease, color 0.3s ease;
  transition: transform 0.5s 0.4s ease, opacity 0.5s 0.4s ease, color 0.3s ease;
}

.menu-lang a{
  display: inline-block;
  margin-left: 1.5rem;
  color: #999999;
}

.menu-lang a:first-child{
  margin-left: 0;
}

.menu-lang .active,
.menu-lang a:hover{
  color: #9fc939;
  text-decoration: none;
}

.menu-list{
  opacity: 0;
  position: absolute;
  left: 0;
  top:9rem;
  bottom:10.5rem;
  padding-left: 15%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overflow-scrolling:touch;
  font-weight: 600;
  letter-spacing: -0.025rem;
  list-style: none;
  margin:0;
  -webkit-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  -o-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition: transform 0.5s 0.6s ease, opacity 0.5s 0.6s ease;
  -o-transition: transform 0.5s 0.6s ease, opacity 0.5s 0.6s ease;
  transition: transform 0.5s 0.6s ease, opacity 0.5s 0.6s ease;
}

.menu-list li a{
  color: #999999;
}

.menu-list .active > a,
.menu-list li a:hover{
  text-decoration: none;
  color: #333;
}

.menu-list > li{
  font-size: 1.95rem;
  line-height: 1;
}

.menu-list > li{
  margin-top: 2.7rem;
}

.menu-list > li:first-child{
  margin-top: 0;
}


.menu-list ul{
  display: none;
  list-style: none;
  padding:0;
  margin: 0;
}

.menu-list ul li{
  font-size: 1.142rem;
  margin-top: 1.142rem;
}

.menu-list ul li:first-child{
  margin-top:2.4rem;
}

.menu-footer{
  position: absolute;
  left: 15%;
  bottom: 4rem;
}

.menu-footer .social-list{
  opacity: 0;
  -webkit-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  -o-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition: all 0.5s 0.7s ease;
  -o-transition: all 0.5s 0.7s ease;
  transition: all 0.5s 0.7s ease;
}

.menu-footer .social-list a{
  color: #cccccc;
  margin:0;
  margin-right:2.7rem;
}

.menu-footer .social-list a:last-child{
  margin-right: 0;
}

.menu-footer .social-list a:hover{
  color:#9fc939;
}

.menu-footer .copy{
  opacity: 0;
  display: none;
  margin-top: 3.2rem;
  color: #333;
  line-height: 1.71rem;
  -webkit-transform: translateY(2rem);
  -ms-transform: translateY(2rem);
  -o-transform: translateY(2rem);
  transform: translateY(2rem);
  -webkit-transition: all 0.5s 0.9s ease;
  -o-transition: all 0.5s 0.9s ease;
  transition: all 0.5s 0.9s ease;
}

.menu-is-opened .click-capture{
  visibility: visible;
}

.menu-is-opened .menu{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  box-shadow: 0 0 5.417rem rgba(0,0,0,0.07);
}

.menu-is-opened .menu .menu-lang,
.menu-is-opened .menu-list,
.menu-is-opened .menu .menu-footer .social-list,
.menu-is-opened .menu .menu-footer .copy{
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  transform: translate(0);
  opacity: 1;
}

.menu-is-closed .menu .menu-lang,
.menu-is-closed .menu .menu-list,
.menu-is-closed .menu .menu-footer .social-list,
.menu-is-closed .menu .menu-footer .copy{
  opacity: 0;
  -webkit-transition-delay: 0s;
  -o-transition-delay:0s;
  transition-delay: 0s;
}




/*-------------------------------------------------------------------------------
  3. Homepage
-------------------------------------------------------------------------------*/



.wrapper{
  padding-top:7rem;
  overflow-x:hidden;
}

.wrapper-without-overflow{
  padding-top:7rem;
}

.boxed{
  padding-left: 1.7rem;
  padding-right: 1.7rem;
}

.boxed .container,
.boxed .container-fluid{
  padding: 0;
  max-width: 100%;
}

.left-boxed{
  left: 1.7rem;
}

.right-boxed{
  right:1.7rem;
}

.section{
  padding-bottom:4.28rem;
  padding-top: 6.28rem;
}

.section-title{
  margin:0;
}

.section-title .link-arrow-2{
  margin-top:1.05rem;
}

.section-subtitle{
  display: inline-block;
  font-weight: 500;
  font-size: 1.142rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fc939;
  margin-bottom: 1rem;
}


/* 3.1 Jumbotron */



.jumbotron{
  position: relative;
  overflow: hidden;
  padding:0;
  margin:0;
  color: #fff;
  background-color: #fff;
}


/* 3.2 Slider */



.rev_slider .link-arrow{
  color: #fff;
}

.rev_slider .link-arrow:hover{
  color:#9fc939;
}

.rev_slider .link-arrow:hover .icon{
  -webkit-transform: none;
  -o-transform: none;
  transform: none;
}

.slider-prev,
.slider-next{
  position: absolute;
  top:50%;
  z-index: 1;
  font-size:4rem;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.slider-prev{
  left: 2.2rem;
}

.slider-next{
  right:2.2rem;
}

.slider-prev:hover,
.slider-next:hover{
  color:#9fc939;
}



/* 3.3 Section About */



.section-about{
  padding:8rem 0 0;
}

.section-about-title{
  margin-bottom: 5rem;
}

.dots-image{
  display: inline-block;
  position: relative;
}

.dots-image img{
  display: block;
  position: relative;
  z-index: 1;
}

.dots-image .dots{
  position: absolute;
  left:-20%;
  bottom: -15%;
  width: 101%;
  height: 57.2%;
  background:url(../images/bg/dots.png) 0 0 repeat;
  filter: brightness(0%); /* Decrease percentage for more darkness */
}

.experience-box{
  position: relative;
  white-space:nowrap;
  margin:6rem 0;
}



@media (min-width: 992px){
  .experience-box{
    margin-top: 6rem;
  }
}

@media (min-width: 1200px){
  .experience-box{
    margin-top: 12.2rem;
  }
}

.experience-border{
  display: inline-block;
  vertical-align: middle;
  width: 12.15rem;
  height: 12.15rem;
  border:0.357rem solid #9fc939;
}

.experience-content{
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -8rem;
  top:0.2rem;
}

.experience-number{
  display: inline-block;
  vertical-align: middle;
  font-size: 7.142rem;
  line-height: 1;
  font-weight: 600;
  color: #333;
}

.experience-info{
  display: inline-block;
  vertical-align: middle;
  margin:-1rem 0 0 0.8rem;
  font-size: 1.57rem;
  line-height: 1.181;
  color: #333;
}



/* 3.4 Section Projects */



.section-projects{
  padding-bottom: 8rem;
}

.filter-content{
  position: relative;
  overflow: hidden;
}

.filter{
  list-style: none;
  font-size: 1.142rem;
  font-weight: 600;
  color: #333;
  padding-left: 0;
  margin:0;
}

.filter li{
  margin:0.6rem 2.6rem 0 0 ;
  display: inline-block;
}

.filter li:last-child{
  margin-right: 0;
}

.filter li a{
  color: inherit;
}

.filter li a:hover,
.filter .active a{
  color: #9fc939;
  text-decoration: none;
}

.section-projects .filter-content{
  margin:2rem 0 0 0;
}

.section-projects .filter{
  margin: 0;
}

.section-projects .view-projects{
  margin:0.85rem 0 0 0;
}

.view-projects{
  display: inline-block;
  font-style: italic;
  color: #999999;
}

.view-projects:hover{
  text-decoration: none;
  color: #9fc939;
}



/* 3.4.1 Projects Carousel */



.project-carousel{
  margin-top: 5.92rem;
}

.owl-nav{
  position: absolute;
  top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Reset owl nav positioning for clients section */
.section-2 .owl-nav {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

.owl-nav .disabled{
  color: #bcbcbc;
}

.owl-prev,
.owl-next{
  display: inline-block;
  font-size: 2.8rem;
  line-height: 1;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.owl-prev:before{
  font-family:"Ionicons";
  content: "\f3d2";
}

.owl-next:before{
  font-family:"Ionicons";
  content: "\f3d3";
}

.owl-prev:hover,
.owl-next:hover{
  color: #9fc939;
}

.owl-dots{
  text-align: center;
  margin-top: 5.857rem;
}

.owl-dot{
  display: inline-block;
  vertical-align: top;
   margin:0 0.6rem;
}

.owl-dot span{
  display: block;
  width: 0.05rem;
  height: 0.05rem;
  background-color: #cccccc;
}

.owl-dot.active span{
  background-color: #9fc939;
}

/* Ensure global owl styles don't affect clients carousel */
.section-2 .owl-dots {
  display: none;
}

.section-2 .clients-carousel.owl-carousel .owl-dots {
  display: block !important;
}

.project-item{
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.project-item img{
  width: 100%;
  height: 28rem;
  object-fit: cover;
  object-position: center;
}

.item-shadow{
  position: relative;
}

.item-shadow:before{
  content:'';
  position: absolute;
  z-index: 1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, 0.40);
}

.project-item .link-arrow{
  position: absolute;
  z-index: 2;
  color: #fff;
  left: 3rem;
  bottom: 2.3rem;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.project-hover{
  position: absolute;
  z-index: 2;
  left: 0;
  top:0;
  width: 100.1%;
  height: 100%;
  padding:4.85rem 3rem;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.project-title{
  color: #fff;
  margin:0;
}

.project-hover .project-title{
  position: absolute;
  bottom: 5.5rem;
}

.project-description{
  opacity: 0;
  margin-top:12%;
  line-height: 1.71;
  color:#333333;
  -webkit-transform: translateX(-1rem);
  -ms-transform: translateX(-1rem);
  -o-transform: translateX(-1rem);
  transform: translateY(-1rem);
}

.project-item:hover .project-hover{
  background-color: rgba(255, 255, 255, 1);
  border: 0.167rem solid #9fc939;
}

.project-item:hover .project-hover .project-title{
  position: relative;
  color: #333;
  bottom:2rem;
  -webkit-transform: translateY(2rem);
  -ms-transform: translateY(2rem);
  -o-transform: translateY(2rem);
  transform: translateY(2rem);
  -webkit-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  
}

.project-item:hover .project-hover .project-description{
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateY(0);
  -webkit-transition: all 0.4s 0.2s ease;
  -o-transition: all 0.4s 0.2s ease;
  transition: all 0.4s 0.2s ease;
}

/* Disable project text animations on mobile and keep images visible */
@media (max-width: 768px) {
  /* Let the image be visible; move overlay content below the image */
  .project-item {
    position: relative;
  }
  .project-item .project-hover {
    position: static !important; /* no overlay */
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0.75rem 0.75rem 1rem !important;
    transition: none !important;
  }

  .project-item .project-hover .project-title {
    position: static !important;
    bottom: auto !important;
    color: #333 !important;
    transform: none !important;
    transition: none !important;
    text-align: center !important;
    margin: 0.5rem 0 0 !important;
  }

  /* Description is already hidden on xs/sm via hidden-* classes;
     keep it hidden to avoid long cards, but ensure no transforms apply */
  .project-item .project-hover .project-description {
    transform: none !important;
    transition: none !important;
    margin-top: 0.5rem !important;
  }

  /* Make entire project card tappable on mobile */
  .project-item .project-link-overlay {
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    top: 0; right: 0; bottom: 0; left: 0;
    text-indent: -9999px; /* hide text but keep accessible */
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(159, 201, 57, 0.25);
    transition: background-color 120ms ease, box-shadow 150ms ease;
  }
  .project-item .project-link-overlay:active { 
    background: rgba(0,0,0,0.06);
    box-shadow: inset 0 0 0 2px rgba(159, 201, 57, 0.2);
  }
  .project-item .project-link-overlay:focus-visible { 
    outline: 2px solid #9fc939; 
    outline-offset: -2px; 
  }
  .project-item .link-arrow { display: none !important; }

  /* Neutralize any :hover rules on mobile */
  .project-item:hover .project-hover,
  .project-item:hover .project-hover .project-title,
  .project-item:hover .project-hover .project-description {
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Subtle press animation for tap feedback */
  .project-item {
    will-change: transform, box-shadow;
  }
  .project-item img {
    transition: transform 120ms ease;
    transform-origin: center;
  }
  .project-item.pressed {
    transform: scale(0.985);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .project-item.pressed img {
    transform: scale(1.02);
  }
}

.project-item:hover .link-arrow{
  color: #9fc939;
}



/* 3.5  Section Clients */



.section-clients .section-title{
  margin-right: 7rem;
}

.client-carousel{
  margin-top: 4.8rem;
}

.client-carousel .client-carousel-item img{
  display: inline-block;
  width: auto;
}

.client-box{
  position: relative;
  color: #999;
  background-color: #fff;
  padding:6rem 3.28rem 3.28rem;
}

.image-quote{
  position: absolute;
  top:3.28rem;
  right: 3.28rem;
}

.client-img{
  position: relative;
  z-index: 1;
  margin:0 0 -3rem 2.6rem;
  border-radius: 50%;
}

.client-title{
  letter-spacing: 0;
}

.client-name{
  font-size: 1.28rem;
  line-height: 1;
  color: #333;
}

.client-description{
  margin:1.5rem 0 0;
  line-height: 1.71em;
}


.client-carousel .owl-nav{
  right: 0;
  top: -7.8rem;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.client-carousel .owl-prev{
  margin-right: 2rem;
}



/* 3.6 Section Partners */



.partner-carousel{
  margin-top: 10.28rem;
}

.partner-carousel  .partner-carousel-item img{
  width: auto;
  margin:0 auto;
  opacity: 0.6;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.partner-carousel  .partner-carousel-item:hover img{
  opacity: 1;
}



/* 3.7 Section News */



.section-news{
  border-bottom: 0.083rem solid #e1e1e1;
}

.news-carousel{
  margin-top: 4.7rem;
}

.news-item{
  position: relative;
  height: 20rem; /* Match original image dimensions */
  border: 0.167rem solid #9fc939; /* Add black border */
}

.news-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.news-item-link:hover,
.news-item-link:focus {
  text-decoration: none;
  color: inherit;
}

.news-title-text {
  color: inherit;
}

.news-arrow {
  display: inline-block;
  margin-left: 0.5rem;
}

@media (min-width: 1024px) {
  .news-item {
    width: 90%;
  }
}


.larger-item{
  width: 100%;
  min-height: 250px; /* Increased from 180px for larger items */
}

/* Specific styling for news items in section-4 - uniform shape */
.section-4 .news-item {
  height: 250px; /* Fixed height for uniform shape */
  min-height: 250px; /* Same as height for consistency */
  display: flex;
  flex-direction: column;
}

.section-4 .news-hover {
  padding: 1.5rem; /* Increased padding for better spacing */
  height: 100%; /* Take full height of parent */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribute content evenly */
}

.section-4 .news-description {
  /* Show full text in What we do cards (no ellipsis) */
  margin: 1rem 0; /* Increased margin for better spacing */
  font-size: 0.85rem; /* Reduced from 0.95rem for more compact text */
  line-height: 1.4; /* Slightly tighter line height */
  flex-grow: 1; /* Allow description to grow */
}

/* Ensure news titles are properly sized in section-4 */
.section-4 .news-title {
  font-size: 1.15rem; /* Reduced from 1.25rem for more compact look */
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.section-4 .news-arrow {
  flex-shrink: 0; /* Prevent arrow from shrinking */
}

.news-hover{
  background-color: #fff;
  height: 100%;
}

.news-hover .content{
  opacity: 1;
}

.news-title,
.news-description{
  opacity: 1;
  transform: none;
}

/* Override global clamping for section-4 specifically (ensure no mid-text ellipses) */
.section-4 .news-description{
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  white-space: normal !important;
}

.news-hover .read-more{
  opacity: 1;
}

.news-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  color: #999;
  transition: all 0.3s;
  
  /* Added for vertical centering: */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hover-border{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hover-border div{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.hover-border div::before {
  position: absolute;
  content: "";
  background:#9fc939;
  height: 0.167rem;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.hover-border::after {
  position: absolute;
  content: "";
  background:#9fc939;
  width: 0.167rem;
  height: 100%;
  right: 0;
  bottom: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: 0.2s 0.2s;
  -o-transition: 0.2s 0.2s;
  transition: 0.2s 0.2s;
}

.hover-border div::after {
  position: absolute;
  content: "";
  background:#9fc939;
  width: 100%;
  height: 0.167rem;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 0.2s 0.4s;
  -o-transition: 0.2s 0.4s;
  transition: 0.2s 0.4s;
}

.hover-border::before {
  position: absolute;
  content: "";
  background:#9fc939;
  width: 0.167rem;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: 0.2s 0.8s;
  -o-transition: 0.2s 0.8s;
  transition: 0.2s 0.8s;
}

.news-hover .content{
  opacity: 0;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.news-hover .time{
  margin-bottom: 0.6rem;
}

.news-title{
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin:0;
  -webkit-transform: translateX(-2rem);
  -ms-transform: translateX(-2rem);
  -o-transform: translateX(-2rem);
  transform: translateX(-2rem);
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.news-description {
  /* Keep line-clamp behavior to avoid overflow */
  color: #747474;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;    /* or 4 lines, if you prefer */
  line-clamp: 5;
  -webkit-box-orient: vertical;

  /* Remove the large margin-top and set modest margins */
  margin: 1rem 0; 

  /* Keep or remove transform animations as you like. */
  opacity: 0;
  line-height: 1.71;
  transition: 0.5s 0.3s ease;
  transform: translateY(-2rem); 
}

.news-hover .read-more{
  position: absolute;
  opacity: 0;
  bottom: 2.7rem;
}

.read-more{
  font-weight: 600;
}

.news-item:hover .news-hover,
.news-item-link:hover .news-item .news-hover{
  background-color: #fff;
}

.news-item:hover .hover-border::before, 
.news-item:hover .hover-border::after,
.news-item:hover .hover-border div::before, 
.news-item:hover .hover-border div::after,
.news-item-link:hover .news-item .hover-border::before, 
.news-item-link:hover .news-item .hover-border::after,
.news-item-link:hover .news-item .hover-border div::before, 
.news-item-link:hover .news-item .hover-border div::after {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.news-item:hover .news-hover .content,
.news-item-link:hover .news-item .news-hover .content{
  opacity: 1;
}

.news-item:hover .news-hover .news-title,
.news-item:hover .news-hover .news-description,
.news-item-link:hover .news-item .news-hover .news-title,
.news-item-link:hover .news-item .news-hover .news-description{
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.news-item:hover .news-hover .read-more,
.news-item-link:hover .news-item .news-hover .read-more{
  opacity: 1;
}

/* Mobile-friendly news item fixes - disable hover effects on phones */
@media (max-width: 768px) {
  /* Disable all hover effects on mobile */
  .news-item:hover .news-hover,
  .news-item-link:hover .news-item .news-hover,
  .news-item:hover .hover-border::before, 
  .news-item:hover .hover-border::after,
  .news-item:hover .hover-border div::before, 
  .news-item:hover .hover-border div::after,
  .news-item-link:hover .news-item .hover-border::before, 
  .news-item-link:hover .news-item .hover-border::after,
  .news-item-link:hover .news-item .hover-border div::before, 
  .news-item-link:hover .news-item .hover-border div::after,
  .news-item:hover .news-hover .content,
  .news-item-link:hover .news-item .news-hover .content,
  .news-item:hover .news-hover .news-title,
  .news-item:hover .news-hover .news-description,
  .news-item-link:hover .news-item .news-hover .news-title,
  .news-item-link:hover .news-item .news-hover .news-description,
  .news-item:hover .news-hover .read-more,
  .news-item-link:hover .news-item .news-hover .read-more {
    /* Reset all hover effects */
    background-color: initial !important;
    transform: none !important;
    opacity: initial !important;
  }
  
  /* Show static content instead of hover effects */
  .news-item {
    background: #fff;
  }
  
  .news-hover {
    background-color: #fff !important;
  }
  
  .news-hover .content {
    opacity: 1 !important; 
  }
  
  .news-hover .news-title,
  .news-hover .news-description {
    opacity: 1 !important; 
    transform: translateY(0) !important;
  }
  
  .news-hover .read-more {
    opacity: 1 !important;
  }
  
  /* Remove border animations */
  .news-item .hover-border::before, 
  .news-item .hover-border::after,
  .news-item .hover-border div::before, 
  .news-item .hover-border div::after {
    display: none !important; /* Completely hide animated borders */
  }
  
  /* Simple touch interaction without fancy effects */
  .news-item {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(159, 201, 57, 0.1); /* Subtle tap highlight */
    transition: none !important; /* Remove transitions */
  }
  
  .news-item-link {
    min-height: 44px;
    display: block;
    width: 100%;
    transition: none !important;
  }
  
  /* Remove any transform effects completely */
  .news-item *,
  .news-item *::before,
  .news-item *::after {
    transform: none !important;
    transition: none !important;
  }
}

/* Tablets and smaller devices */
@media (max-width: 992px) {
  .news-item {
    /* Reduce dependency on hover for tablets too */
    cursor: pointer;
  }
  
  /* Make content slightly more visible on tablets */
  .news-hover .content {
    opacity: 0.8;
    transition: opacity 0.2s ease;
  }
  
  /* On touch, make content fully visible */
  .news-item:active .news-hover .content,
  .news-item:focus .news-hover .content {
    opacity: 1 !important;
  }
}

/* Mobile navbar height adjustments */
@media (max-width: 768px) {
  .navbar {
    height: 5rem !important; /* Reduced from 7rem */
    padding-top: 1.5rem !important; /* Reduced from 2.7rem */
  }
  
  .navbar .brand {
    margin-top: -0.2rem !important; /* Adjusted from -0.5rem */
  }
  
  .brand img {
    height: 3rem !important; /* Reduced from 4.167rem */
  }
  
  /* Adjust wrapper padding to account for smaller navbar */
  .wrapper,
  .wrapper-without-overflow {
    padding-top: 5rem !important; /* Reduced from 7rem to match navbar height */
  }
}

/* Even smaller mobile devices */
@media (max-width: 480px) {
  .navbar {
    height: 4.5rem !important; /* Even more compact on small phones */
    padding-top: 1.2rem !important;
  }
  
  .brand img {
    height: 2.5rem !important; /* Smaller logo on tiny screens */
  }
  
  .wrapper,
  .wrapper-without-overflow {
    padding-top: 4.5rem !important;
  }
}



/*-------------------------------------------------------------------------------
  4. Homepage v2
-------------------------------------------------------------------------------*/



/* 4.1 Navbar */



.navbar-2{
  background: transparent;
  padding-top: 3rem;
  -webkit-transition: all 0.3s  ease;
  -o-transition: all 0.3s  ease;
  transition: all 0.3s  ease;
}

.navbar-2 .navbar-bg{
  content:'';
  position: absolute;
  left: 0;
  right:0;
  top:-0.083rem;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
  -webkit-transition: all 0.3s  cubic-bezier(0.37, 0.31, 0.2, 0.85);
  -o-transition: all 0.3s  cubic-bezier(0.37, 0.31, 0.2, 0.85);
  transition: all 0.3s  cubic-bezier(0.37, 0.31, 0.2, 0.85);
}

.navbar-2 .brand{
  width: 13rem;
}

.navbar-2 .navbar-address{
  float: left;
  margin-left: 5rem;
  margin-top: 0.35rem;
}

.navbar-2 .social-list{
  float: left;
  margin-left: 7.5rem;
  margin-top: 0.35rem;
}

.navbar-white{
  background: transparent;
}

.navbar-white .navbar-bg{
  height: 0;
}

.navbar-white .brand,
.navbar-white .brand:hover,
.navbar-white .brand:focus,
.navbar-white .brand-text,
.navbar-white .navbar-address,
.navbar-white .navbar-address .text-dark,
.navbar-white .social-list a{
  color: #fff;
}

.navbar .brand-img-white{
  display: none;
}

.navbar-white .brand-img{
  display: none;
}

.navbar-white .brand-img-white{
  display: inline-block;
}

.navbar-white  .navbar-toggle .icon-bar{
    background: #fff;
}

.navbar-white  .social-list a:hover{
  color: #9fc939;
}

.copy-bottom{
  display: none;
  position: absolute;
  z-index: 10;
  left:0;
  bottom:2.4rem;
  color: #333;
  font-size: 1.1rem;
}

.lang-bottom{
  display: none;
  position: absolute;
  z-index: 10;
  right:0;
  bottom:2.4rem;
  color: #333;
}

.copy-bottom.white{
  color: #fff;
}

.lang-bottom .menu-lang{
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
}

.lang-bottom .menu-lang a:not(.active){
  color: #333;
}


.lang-bottom.white,
.lang-bottom.white .menu-lang a:not(.active){
  color: #fff;
}

.lang-bottom .menu-lang  a:hover,
.lang-bottom.white .menu-lang  a:hover{
  color: #9fc939;
}

#pp-nav{
  z-index: 99;
  width: 2.1428rem;
  margin-top:0!important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

#pp-nav .pp-nav-up,
#pp-nav .pp-nav-down{
  display: none;
  font-size: 2.1428rem;
  cursor: pointer;
  color: #333;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#pp-nav .pp-nav-up{
  margin-bottom: 3.5rem;
}

#pp-nav .pp-nav-down{
  margin-top: 3.5rem;
}

#pp-nav li, .pp-slidesNav li{
  margin:1.928rem auto;
  width: 0.833rem;
  height: 0.833rem;
}

#pp-nav span, .pp-slidesNav span{
  left: 0;
  top:0;
  cursor: pointer;
  width: 0.833rem;
  height: 0.833rem;
  background: #333;
  border:0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#pp-nav .pp-nav-up:hover,
#pp-nav .pp-nav-down:hover,
#pp-nav.white .pp-nav-up:hover,
#pp-nav.white .pp-nav-down:hover{
  color: #9fc939;
}

#pp-nav.white .pp-nav-up,
#pp-nav.white .pp-nav-down{
  color: #fff;
}

#pp-nav.white span, .pp-slidesNav span{
  background: #fff;
}

#pp-nav li .active span, .pp-slidesNav .active span,
#pp-nav span:hover, .pp-slidesNav span:hover{
  background: #9fc939;
}



/* 4.2 Sections */



.pagepiling .section{
  background: #fff;
  padding-top: 11.3rem;
  padding-bottom: 7rem;
}

/* Special compressed styling for section-4 (What We Do) */
.pagepiling .section-4 {
  padding-top: 4rem; /* Slightly reduced to accommodate larger items */
  padding-bottom: 2rem; /* Reduced bottom padding */
}

.pagepiling .section-4 .vertical-centred {
  padding-top: 4rem; /* Match section padding */
  padding-bottom: 2rem; /* Match section padding */
}

.pagepiling .section-1.pp-scrollable .vertical-centred{
  padding-top: 10rem;
  padding-bottom: 11rem;
}

.pagepiling .pp-scrollable{
  padding: 0;
}

.pp-scrollable .vertical-centred{
  padding-top: 11.3rem;
  padding-bottom: 7rem;
}

.scroll-wrap{
  position: relative;
  min-height: 100%;
}

.scrollable-content{
  white-space: nowrap;
  width: 100%;
  font-size: 0;
}

.scrollable-content:before{
  content: '';
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
}

.vertical-centred{
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  font-size: 1rem;
}

.boxed-inner{
  position: relative;
  padding:0;
}

.section-bg{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.vertical-title{
  position: fixed;
  top: 45%;
  white-space: nowrap;
  width: 0;
  left: 4.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: translateY(-45%) rotate(-90deg);
}

.vertical-title span{
  display: block;
  float: right;
}

.section .intro{
  opacity: 0;
  -webkit-transition: opacity 1s 0.3s ease;
  -o-transition:opacity 1s 0.3s ease;
  transition: opacity 1s 0.3s ease;
}

.section:not(.section-1) .intro{
  -webkit-transform: translateY(7rem);
  -ms-transform: translateY(7rem);
  -o-transform: translateY(7rem);
  transform: translateY(7rem);
  -webkit-transition: all 0.35s 0.6s ease;
  -o-transition:all 0.35s 0.6s ease;
  transition: all 0.35s 0.6s ease;
}

.section.active .intro{
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.subtitle-top{
  line-height: 1.714;
  margin-bottom: 2.8rem;
  letter-spacing: 0.1em;
}



/* 4.3 Section About */



.hr-bottom{
  position: absolute;
  margin-top: 13vh;
  margin-bottom: 0;
  height: 0.2858rem;
  width: 7.142rem;
  background: #9fc939;
}

.title-uppercase{
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.33333;
  margin:0 0 5rem;
  font-size: 2.25rem;
}

.service-list{
  margin-bottom: 5rem;
  font-size: 1.2857rem;
  padding-left: 0;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: -0.025rem;
  font-weight: 400;
}

.service-list li{
  margin-bottom: 0.7rem;
}

.service-list li a{
  color: inherit;
}

.service-list li a:hover{
  color: #9fc939;
  text-decoration: none;
}

.dots-image-2{
  display: inline-block;
  position: relative;
}

.dots-image-2 .dots {
  position: absolute;
  z-index: -1;
  left: -25%;
  bottom: -19%;
  width: 101%;
  top: 50%;
  opacity: 1;
  background: url(../images/bg/dots.png) 0 0 repeat;
  filter: brightness(20%); /* Decrease percentage for more darkness */
}



.dots-image-2 .experience-info{
  position: absolute;
  left: 12%;
  margin-top:-4.4rem;
  top:100%;
}

.experience-info .number{
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  font-size: 10.71rem;
  margin-right: 1.7rem;
}


.experience-info .text{
  display: inline-block;
  font-size: 1.571rem;
  font-weight: 600;
  line-height: 1.181;
  text-transform: uppercase;
}



/* 4.4 Section Projects*/


.bg-changer{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.bg-changer .section-bg{
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 0.5s 0.2s ease,  transform 5s 0.2s ease;
  -o-transition: opacity 0.5s 0.2s ease,  transform 5s 0.2s ease;
  transition: opacity 0.5s 0.2s ease, transform 5s 0.2s ease;
}

.bg-changer .active{
  opacity: 1;
  -webkit-transform: scale(1.05);
  -ms-transform:scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.bg-changer .section-bg:first-child{
  opacity: 1;
}

.row-project-box{
  margin-top: -2.5rem;
}

.col-project-box{
  margin-top: 2.5rem;
}

.project-box{
  display: block;
  padding-bottom: 30%;
  position: relative;
  border:0.083rem solid #fff;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s  ease;
}

.project-box-inner{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  padding:2.14rem 1.928rem;
}

.project-box h5{
  margin:0;
  color: #fff;
}

.project-category{
  color: #cccccc;
  margin-top: 0.5rem;
}

.project-box:hover{
  background: #9fc939;
  text-decoration: none;
  border-color: transparent;
}

.project-box:hover h5{
  color: #333;
}

.project-box:hover .project-category{
  color:#666666;
}

.link-arrow.h5{
  text-transform: uppercase;
  letter-spacing: -0.025rem;
  margin-bottom: 0;
}

.link-arrow.h5 .icon-chevron-right{
  font-size: 1.8rem;
  margin-top: -0.45rem;
}


.section-3 .link-arrow.h5{
  margin-top: 4rem;
}


.section-4 h2{
  margin-bottom: 7rem;
}



/* 4.5 Section Reviews */



.icon-quote{
  display: inline-block;
  margin-top: -0.6rem;
  color:#9fc939;
  font-size: 5.14rem;
}

.section-5 .title-uppercase{
  margin-top: 7vh;
  margin-bottom: 3rem;
}

.review-carousel .text{
  font-family: 'Libre Baskerville', serif;
  font-size: 1.142rem;
  line-height: 1.875;
}

.review-author{
  margin-top: 5.7rem;
}

.author-name{
  font-size: 1.2857rem;
  line-height: 1.333;
  font-weight: 600;
}

.review-carousel .owl-nav{
  position: relative;
  top:0;
  margin-top:7.7vh;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

.review-carousel .owl-prev,
.review-carousel .owl-next{
  font-size: 1.2857rem;
  width: 3.57rem;
  height: 3.57rem;
  line-height: 3.57rem;
  border:0.083rem solid #fff;
  color: #fff;
  text-align: center;
  margin-right: 0.857rem;
}

.review-carousel .owl-prev:before{
  font-family: 'Linearicons';
  content: "\e93b";
}

.review-carousel .owl-next:before{
  font-family: 'Linearicons';
  content: "\e93c";
}

.review-carousel .owl-prev:hover,
.review-carousel .owl-next:hover{
  background: #fff;
  color: #333;
}

.review-carousel .owl-prev.disabled,
.review-carousel .owl-next.disabled{
  cursor: default;
}

.review-carousel .owl-prev.disabled:hover,
.review-carousel .owl-next.disabled:hover{
  background: none;
  color: #fff;
}



/* 4.6 Section Contacts */



.map-2{
  width: 100%;
  height: 18rem;
  border: 0;
  text-align: center;
}

.contact-info{
  overflow:hidden;
  margin-top: 5.5rem;
}

.row-contact-info{
  margin:-5rem -4% 0;
}

.success-message,
.error-message{
  display: none;
  margin-top: 2rem;
}

.col-contact-info{
  padding:0 4%;
  margin-top: 5rem;
  padding-top: 5rem;
  border-top:0.083rem solid #cacaca;
}

.col-contact-info:first-child{
  border-top:0;
  padding-top: 0;
}

.contact-info h3{
  font-size: 1.92rem;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin:0 0 2rem 0;
}

.contact-info .col-right{
  word-wrap: break-word;
  padding-left: 0;
  padding-right: 0;
}

.contact-info-row{
  line-height: 1.5;
  margin-bottom: 2.14rem;
}

.contact-info-row:last-child{
  margin-bottom: 0;
}

.contact-info-row strong {
  font-size: 1.1428rem;
  text-transform: uppercase;
  color: #333;
  display: inline-block;
  padding-bottom: 0.5rem; /* adjust as needed */
}



/*-------------------------------------------------------------------------------
  5. Homepage v3
-------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------
  6. Pages
-------------------------------------------------------------------------------*/



.display-1{
  font-size: 4.28rem;
  line-height: 1;
  letter-spacing: -0.05em;
  margin:0;
}

.display-2{
  font-size: 5.14rem;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  text-transform: uppercase;
}

.text-display-1{
  font-size: 1.25rem;
  line-height: 2;
  letter-spacing: 0;
}

.text-display-1 p{
  margin-bottom: 3.5rem;
}

.text-display-1 p:last-child{
  margin-bottom: 0;
}

.title-hr{
  width: 7rem;
  max-width: 100%;
  height: 0.28rem;
  background: #9fc939;
}

.title-info{
  font-size: 1.28rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #999999;
  margin-bottom: 1.4rem;
}

.page-header,
.page-header-2,
.page-header-3{
  border-bottom: 0;
  margin:8rem 0 7rem;
  padding: 0;
}

.page-header h1,
.page-header-2 h1,
.page-header-3 h1{
  margin:0;
}

.page-header-3 .title-hr{
  margin-bottom:2.7rem;
}

.page-inner{
  margin-top: 4rem;
}

.section-info{
  color: #999999;
  line-height: 1.111;
  font-size: 1.28rem;
  text-transform: uppercase;
  font-weight: 600;
}

.section-info{
  margin-bottom: 4rem;
}

.section-info .title-hr{
  margin:0 0 2rem;
}

.info-title{
  width: 0.083rem;
}

.bg-dots{
  background:url(../images/bg/dots2.png) 0 0 repeat;
}



/* 6.1 Works Grid */



.js-isotope{
  overflow:hidden;
}

.filter-content-2{
  margin-bottom: 5.9rem;
}

.filter-content-2 .filter li,
.filter-content-3 .filter li,
.filter-content-4 .filter li{
  margin-right: 4rem;
}

.filter-content-3{
  margin-bottom: 4.6rem;
}

.filter-content-4{
  margin:6rem 0 9rem;
}

.grid-items{
  margin:-2.5rem -1.25rem 0 -1.25rem;
}

.grid-items:after{
  content:'';
  clear: both;
  display:block;
}

.grid-item{
  float: left;
  padding:2.5rem 1.25rem 0 1.25rem;
}

.project-hover-2{
  position: absolute;
  z-index: 2;
  left: 0;
  top:0;
  width: 100.1%;
  height: 100%;
  padding:2.71rem;
  -webkit-transition: 0.5s ease;;
  -o-transition: 0.5s ease;;
  transition: 0.5s ease;;
}

.project-hover-2 .icon-plus{
  opacity: 0;
  position: absolute;
  color: #333;
  right: 2.71rem;
  font-size: 3rem;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.project-hover-2 .project-title{
  opacity: 0;
  position: absolute;
  bottom: 2.71rem;
  color: #333;
  -webkit-transform: translateX(-2rem);
  -ms-transform: translateX(-2rem);
  -o-transform: translateX(-2rem);
  transform: translateX(-2rem);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.project-item:hover .project-hover-2{
  background-color: rgba(133, 195, 26, 1);
}

.project-item:hover .project-hover-2 .project-title,
.project-item:hover .project-hover-2 .icon-plus{
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}



/* 6.2 Works Carousel */



.sly {
  position: relative;
  overflow: hidden;
}

.slidee{
  list-style: none;
  padding-left: 0;
}

.sly ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.sly ul li {
  float: left;
  width: 35rem !important;
  height: 100%;
  margin: 0 2rem 0 0;
  padding: 0;
}

.prev,
.next{
  position: absolute;
  top:50%;
  color: #fff;
  font-size: 4rem;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.prev.disabled,
.next.disabled{
  opacity: 0.5;
}

.prev:hover,
.next:hover{
  color: #9fc939;
}

.prev{
  left: 2.5rem;
}

.next{
  right:2.5rem;
}



/* Scrollbar */



.scrollbar {
  margin: 6.8rem 0 0;
  height: 0.083rem;
  background: #dae5e6;
  line-height: 0;
}

.scrollbar .handle {
  position: relative;
  top:-0.167rem;
  width: 8.333rem;
  height: 0.25rem;
  background: #999999;
  cursor: pointer;
}
.scrollbar .handle .mousearea {
  position: absolute;
  top: -0.75rem;
  left: 0;
  width: 100%;
  height: 1.667rem;
}



/* 6.3 Project Detail */



.project-detail{
  position: relative;
  overflow:hidden;
}

.project-detail-item{
  min-height: 35rem;
  background-size:cover;
  background-position: 50% 50%;
  padding: 6.78rem 11.2rem;
}

.project-detail-info{
  background-color: #fff;
  padding: 3.3rem;
}

.project-detail-control{
  display: inline-block;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.project-detail-control:hover{
   color:#9fc939;
}

.project-detail-control .show-info{
  display: none;
}

.project-detail-control.active .show-info{
  display: block;
}

.project-detail-control.active .hide-info{
  display:none;
}

.project-detail-title{
  font-size: 2.57rem;
  letter-spacing: -0.025em;
  line-height: 1.16666;
  margin:3rem 0 2.4rem 0;
}

.project-detail-list{
  list-style: none;
  padding-left: 0;
  margin-top:3.6rem;
}

.project-detail-list li{
  border-bottom: 0.083rem solid #e1e1e1;
  padding-bottom: 0.6rem;
  margin-top:0.65rem;
  overflow:hidden;
}

.project-detail-list li:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}

.project-detail-list li .left{
  float: left;
  font-weight: 600;
}

.project-detail-list li .right{
  float: right;
}

.project-detail-meta{
  margin-top: 4.5rem;
  overflow:hidden;
}

.project-detail-meta .left{
  font-weight: 600;
}



/* 6.4 News Masonry */



.card img{
  display: block;
  width: 100%;
}

.card-block{
  background: #f2f2f2;
  padding:2.5rem;
  line-height: 1.714;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}

.card-posted{
  margin-bottom: 0.8rem;
}

.card-posted a{
  color: #333;
}

.card-posted a:hover{
  color: #333;

}

.card-title{
  letter-spacing: 0;
  margin:0;
}

.card-text{
  margin-top: 2rem;
}

.card-read-more{
  display: inline-block;
  margin-top: 2rem;
  font-weight: 600;
  color: #333;
}

.card-read-more:hover{
  color: #333;
}

.card:hover .card-block{
  background: #9fc939;
}



/* 6.5 News Listing */



.card-row{
  position: relative;
  background: #f2f2f2;
  -webkit-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
  margin-bottom: 5rem;
}

.card-row:last-child{
  margin-bottom: 0;
}

.card-row-img{
  position: absolute;
  left: 0;
  top:0;
  padding:0;
  height: 100%;
  background-size:cover;
  background-position: center 0;
}

.card-row-img img{
  width: 100%;
}

.card-row:hover{
  background: #9fc939;
}

.card-row .card-block{
  padding:3.6rem;
  background: transparent;
}

.card-row .card-read-more{
  margin-top: 7vw;
}

/* 6.6 Post Detail */

.secondary {
  /* Remove extra margin so it's aligned with .primary on load */
  margin-top: 0;
}

/* Sticky Sidebar only on larger screens */
@media (min-width: 992px) {
  .secondary {
    position: -webkit-sticky;
    position: sticky;
    /* Set this top offset to match the same "padding" or space it 
       has relative to the .primary heading when you scroll.
       Adjust the value (e.g. 6rem, 80px, etc.) to fit your layout. */
    top: 13rem; 
    
    /* Allow scrolling if content is too long */
    overflow-y: auto;
    z-index: 1; 
  }
}

.post-gallery{
  position: relative;
  overflow-y: hidden;
}

.header-space{
  margin-top: 7rem;
}

.post-thumbnail{
  background: url(../images/news/1-1920x1080.jpg) 50%  no-repeat;
  background-size:cover;
  padding: 16.4rem 1.25rem 19rem;
}

.post-thumbnail h1,
.post-thumbnail .title-info{
  color: #fff;
}

.page-content{
  margin-top: 8.2rem;
}

.page-content-2{
  margin-top: 6.6rem;
}

.posted-on{
  font-size: 1.142rem;
}

.posted-on a{
  color: #333;
}

.posted-on a:hover{
  color:#9fc939;
  text-decoration: none;
}

.entry-title{
  margin:0 0 1rem;
  letter-spacing: -0.05em;
  line-height: 1.125;
}

.entry-description{
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 4.8rem;
  margin-top: 0;
}

.entry-content{
  font-size: 1.2857rem;
  line-height: 1.666;
  font-weight: 300;
  letter-spacing: 0;
}

.row-images{
  padding-top: 3rem;
  padding-bottom: 4rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.row-images .col-image{
  margin-top: 2.5rem;
  padding-left: 0%;
  padding-right: 0%;
}

.row-images .col-image:first-child{
  margin-top: 0;
}

.row-images .col-image{
  position: relative;
}

.row-images .col-image img{
  width: 100%;
}

.row-images .col-image::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.333rem;
  height: 3.333rem;
  border-top: 0.25rem solid #9fc939;
  border-left: 0.25rem solid #9fc939;
  pointer-events: none;
  z-index: 1;
}

.row-images .col-image::after{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.333rem;
  height: 3.333rem;
  border-bottom: 0.25rem solid #9fc939;
  border-right: 0.25rem solid #9fc939;
  pointer-events: none;
  z-index: 1;
}

.entry-footer{
  padding-top: 4rem;
}

.tags-links span{
  color: #333;
}

.tags-links,
.tags-links a{
  color:#999999;
}

.tags-links a:hover{
  color: #cc0000;
  text-decoration: none;
}

.post-share{
  margin-top: 1rem;
}

.post-share span{
  color: #333;
}

.post-share a{
  color: #cccccc;
  font-size: 1.4rem;
  vertical-align: middle;
  margin-left: 0.8rem;
}

.post-share a:hover{
  color:#9fc939;
}



/* 6.6.1 Related Posts */



.related-posts{
  margin-top: 6rem;
  padding-top:6rem;
  border-top:0.083rem solid #e1e1e1;
}

.related-post-title{
  margin:0;
}



/* 6.6.2 Comments */



.section-comments{
  margin-top: 6.8rem;
  padding: 7.3rem 15px;
  background-color: #fff;
}

.comments-title{
  margin:0;
  margin-bottom: 2.85rem;
}

.comment-list{
  padding-left: 0;
  list-style: none;
}

.comment .avatar{
  float: left;
  margin-right: 2.14rem;
}

.comment-content{
  overflow: hidden;
  padding:1.2rem 0 3rem 1.5rem;
  border-top:0.083rem solid #d8d8d8;
}

.comment-content p{
  margin-bottom: 0;
}

.comment-metadata{
  margin-bottom: 0.6rem;
}

.comment-metadata .fn a{
  color: #333333;
}

.comment-metadata .fn a:hover{
  color: #9fc939;
  text-decoration: none;
}

.comment-time{
  color: #999999;
  font-size: 0.917rem;
  text-transform: uppercase;
}

.comment-time:hover{
  color: #333;
  text-decoration: none;
}

.reply{
  margin-top: 0.7rem;
}

.reply a{
  color: #999999;
  font-style: italic;
}

.reply a:hover{
  color: #0099cc;
  text-decoration: none;
}

.comment-reply-title small{
  float: right;
  margin-top: 0.5rem;
}



/* 6.7 Widgets */



.widget{
  margin-bottom: 4.5rem;
  padding-bottom: 5rem;
  border-bottom: 0.083rem solid #e1e1e1;
}

.widget:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.widget-title{
  font-size: 1.2758rem;
  letter-spacing: 0;
  margin:0 0 3rem;
}

.widget_archive li,
.widget_categories li,
.widget_pages li,
.widget_meta li,
.widget_recent_entries li,
.widget_nav_menu li{
   margin-top:0.5em;
}

.widget_archive li a,
.widget_categories li a,
.widget_pages li a,
.widget_meta li a,
.widget_recent_entries li a,
.widget_nav_menu li a{
   color:#666666;
}

.widget_archive li a:hover,
.widget_categories li a:hover,
.widget_pages li a:hover,
.widget_meta li a:hover,
.widget_recent_entries li a:hover,
.widget_nav_menu li a:hover{
   color:#9fc939;
   text-decoration:none;
}

.widget_categories li{
  text-align: right;
}

.widget_categories li a{
   float: left;
}



/* 6.7.1 Widget Search */



.search-form{
  position: relative;
}

.search-form .search-field{
  background: #f6f6f6;
  border-color:transparent;
}


.search-form .search-field:focus{
  background: none;
}

.search-submit{
  position: absolute;
  background: none;
  border:0;
  right: 0.8rem;
  top:1.1rem;
}

.search-submit:focus{
  outline:none;
}



/* 6.7.2 Widget Twitter */



.widget ul{
  list-style: none;
  padding-left: 0;
  margin:0;
}

.widget_twitter li{
  margin-bottom: 2.2rem;
}

.widget_twitter li:last-child{
  margin-bottom: 0;
}

.widget_twitter li a{
  color: #0099cc;
}

.tweet-time{
  display: block;
  margin-top: 0.4rem;
  font-size: 0.857rem;
  display: block;
  color: #999999;
  text-transform: uppercase;
}

.widget-all-items{
  display: inline-block;
  margin-top: 1.4rem;
  color: #999999;
  font-size: 0.928rem;
  text-transform: uppercase;
  font-weight: 600;
}

.widget-all-items:hover{
  text-decoration: none;
}



/* 6.7.3 Widget Recent Posts */

.widget_recent_posts li {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.667rem;
}

.widget_recent_posts li:last-child{
  margin-bottom: 0;
}

.recent-post-thumbnail {
  display: block;
  width: 6.667rem;
  height: 6.667rem;
  overflow: hidden;
  border-radius: 0.333rem;
  flex-shrink: 0;
}

.recent-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.recent-post-content {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.recent-post-content .post-title,
.post-title{
  display: block;
  font-weight: 600;
  margin-bottom: 0.417rem;
  line-height: 1.3;
  text-decoration: none;
  letter-spacing: 0;
  color: #333;
}

.recent-post-content .post-title:hover,
.post-title:hover {
  color: #9fc939;
  text-decoration: none;
}

.recent-post-content .post-time {
  font-size: 0.9em;
  color: #666;
}

.post-title:hover{
  color: #9fc939;
  text-decoration: none;
}

.post-time{
  display: block;
  margin-top: 0.6rem;
  font-size: 0.857rem;
  color: #999999;
}



/* 6.8 About Us */



.about-info{
  padding-top: 0;
}

.content-entry-image{
  padding-top: 38%;
  min-height: 28rem;
  background: url(../images/1-1920x800.jpg) 50%;
  background-size: cover;
}



/* 6.8.1 Services */



.row-services{
  margin:-4rem -2.5rem 0 -2.5rem;
}

.col-service{
  color:#333;
  margin-top: 4rem;
  padding:0 2.5rem;
}

.col-service h4{
  margin-top: 3.3rem;
}

.col-service p{
  margin-bottom: 0;
}




/* 6.8.2 Partners */



.row-partners{
  margin:-5rem -1rem 0;
}

.col-partner{
  padding:0 1rem;
  margin-top: 5rem;
  float: left;
}

.col-partner img{
  max-width: 100%;
}

/* Clients Carousel - Improved with fixed heights and equal spacing */
.clients-carousel {
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.clients-carousel .item {
  padding: 2.5rem 0;
  min-height: 350px;
  display: flex;
  align-items: center;
}

.clients-carousel .clients-grid {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.clients-carousel .clients-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 3.5rem;
  min-height: 110px;
}

.clients-carousel .clients-row:last-child {
  margin-bottom: 0;
}

.clients-carousel .client-item {
  flex: 0 0 18%;
  max-width: 18%;
  padding: 1.2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}

.clients-carousel .client-item img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  opacity: 0.6;
  filter: grayscale(100%) brightness(0.7);
  transition: all 0.3s ease;
  object-fit: contain;
}

.clients-carousel .client-item:hover img {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.05);
}

/* Tablet adjustments */
@media (max-width: 992px) {
  .clients-carousel {
    margin-bottom: 3.5rem;
  }
  
  .clients-carousel .item {
    min-height: 330px;
    padding: 2.2rem 0;
  }
  
  .clients-carousel .clients-grid {
    padding: 0 2rem;
  }
  
  .clients-carousel .clients-row {
    margin-bottom: 3.2rem;
    min-height: 105px;
  }
  
  .clients-carousel .client-item {
    flex: 0 0 21%;
    max-width: 21%;
    padding: 1.1rem;
    min-height: 85px;
  }
  
  .clients-carousel .client-item img {
    max-height: 75px;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  .clients-carousel {
    margin-bottom: 3rem;
  }
  
  .clients-carousel .item {
    min-height: 400px;
    padding: 2.5rem 0;
  }
  
  .clients-carousel .clients-grid {
    padding: 0 1.5rem;
  }
  
  .clients-carousel .clients-row {
    justify-content: space-around;
    margin-bottom: 4rem;
    min-height: 120px;
  }
  
  .clients-carousel .client-item {
    flex: 0 0 45%;
    max-width: 45%;
    padding: 1.5rem 0.8rem;
    min-height: 110px;
  }
  
  .clients-carousel .client-item img {
    max-height: 85px;
  }
}

/* Mobile portrait */
@media (max-width: 576px) {
  .clients-carousel {
    margin-bottom: 2.5rem;
  }
  
  .clients-carousel .item {
    min-height: 360px;
    padding: 2.5rem 0;
  }
  
  .clients-carousel .clients-grid {
    padding: 0 1rem;
  }
  
  .clients-carousel .clients-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
    min-height: auto;
  }
  
  .clients-carousel .client-item {
    flex: 0 0 48%;
    max-width: 48%;
    width: 48%;
    padding: 1rem 0.5rem;
    min-height: 85px;
  }
  
  .clients-carousel .client-item img {
    max-height: 70px;
    max-width: 90%;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .clients-carousel {
    margin-bottom: 2rem;
  }
  
  .clients-carousel .item {
    min-height: 340px;
    padding: 2.2rem 0;
  }
  
  .clients-carousel .clients-row {
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .clients-carousel .client-item {
    flex: 0 0 47%;
    max-width: 47%;
    width: 47%;
    padding: 0.8rem 0.4rem;
    min-height: 80px;
  }
  
  .clients-carousel .client-item img {
    max-height: 65px;
    max-width: 85%;
  }
}

/* Handle rows with fewer items */
.clients-carousel .clients-row:has(.client-item:nth-child(1):last-child) {
  /* Single item row */
  justify-content: center;
}

.clients-carousel .clients-row:has(.client-item:nth-child(2):last-child) {
  /* Two items row */
  justify-content: center;
  gap: 4rem;
}

.clients-carousel .clients-row:has(.client-item:nth-child(3):last-child) {
  /* Three items row */
  justify-content: center;
  gap: 2rem;
}

/* Mobile specific handling for fewer items */
@media (max-width: 576px) {
  .clients-carousel .clients-row:has(.client-item:nth-child(1):last-child) {
    /* Single item - center it */
    justify-content: center;
  }
  
  .clients-carousel .clients-row:has(.client-item:nth-child(2):last-child) {
    /* Two items - use space-between for better mobile layout */
    justify-content: space-between;
    gap: 1rem;
  }
  
  .clients-carousel .clients-row:has(.client-item:nth-child(3):last-child) {
    /* Three items - center the third one */
    justify-content: space-between;
    gap: 1rem;
  }
  
  .clients-carousel .clients-row:has(.client-item:nth-child(3):last-child) .client-item:nth-child(3) {
    /* Third item in a 3-item row spans the width and centers */
    flex: 0 0 48%;
    margin: 1rem auto 0;
  }
}

/* Fallback for browsers that don't support :has() selector */
@supports not selector(:has(*)) {
  .clients-carousel .clients-row {
    justify-content: center;
    gap: 2rem;
  }
  
  .clients-carousel .client-item {
    margin: 0 1rem;
  }
  
  @media (max-width: 576px) {
    .clients-carousel .clients-row {
      justify-content: space-between;
      gap: 1rem;
    }
    
    .clients-carousel .client-item {
      margin: 0;
    }
  }
}

/* Override global owl carousel dots for clients carousel specifically */
.clients-carousel.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.clients-carousel.owl-carousel .owl-dot {
  display: inline-block;
  margin: 0 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(159, 201, 57, 0.3);
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.clients-carousel.owl-carousel .owl-dot span {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.clients-carousel.owl-carousel .owl-dot.active,
.clients-carousel.owl-carousel .owl-dot:hover {
  background: #9fc939;
  transform: scale(1.1);
}

/* Responsive dots adjustments */
@media (max-width: 768px) {
  .clients-carousel.owl-carousel .owl-dots {
    margin-top: 1rem;
  }
  
  .clients-carousel.owl-carousel .owl-dot {
    margin: 0 6px;
    width: 10px;
    height: 10px;
  }
}

/* Fix navigation positioning for clients carousel */
.clients-carousel.owl-carousel .owl-nav {
  display: none !important; /* Hide navigation arrows for clients carousel */
}



/* 6.8.3 Team */



.row-team{
  margin-top: -2.5rem;
}

.col-team{
  margin-top: 2.5rem;
}

.team-profile{
  position: relative;
}

.team-profile img{
  width: 100%;
  display: block;
}

.team-hover{
  opacity: 0;
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background: rgba(133, 195, 26, 1);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.team-content{
  position: absolute;
  left: 1.857rem;
  bottom: 0.8rem;
}

.team-name{
  margin-bottom: 0.3rem;
}

.team-name h6{
  margin:0;
}

.team-social a{
  float: left;
  color: #333;
  font-size: 1.25rem;
  margin-right: 1.5rem;
}

.team-social a:hover{
  color: #fff;
  text-decoration: none;
}

.team-profile:hover .team-hover{
  opacity: 1;
}

.add-new-team{
  position: relative;
  border:0.083rem solid #bfbfbf;
  padding-top: 100%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.add-new-text{
  position: absolute;
  left: 0;
  width: 100%;
  top:50%;
  text-align: center;
  font-size: 1.285rem;
  line-height: 1.1111;
  color: #333;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.add-new-text .inner{
  display: inline-block;
  text-align: left;
}

.add-new-team input[type="file"]{
  position: absolute;
  cursor: pointer;
  opacity: 0;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.add-new-team:hover{
  background: #9fc939;
  border-color: transparent;
}




/* 6.9 Contacts */



.map{
  width: 100%;
  height: 26rem;
  border: 0;
  text-align: center;
}

.map-info{
  color:#333;
  text-align: left;
  padding:1rem 0;
}

.map-address-row{
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.4;
}

.map-address-row .fa{
  margin-right: 0.5rem;
}

.gmap-open{
  margin:2rem 0 0;
}

.row-contact{
  margin:-6rem -3.5rem 0;
}

.col-contact{
  margin-top: 6rem;
  padding:0 3.5rem;
}

.contact-title{
  letter-spacing: 0;
  margin:0;
}

.contact-top{
  margin-bottom: 1.3rem;
}

.contact-title span{
  color: #ccc;
  font-weight: 400;
}

.contact-address{
  font-size: 1.142rem;
  line-height: 1.875;
  letter-spacing: -0.025rem;
  margin-bottom: 2rem;
}

.contact-row{
  margin-bottom: 0.6rem;
}

.phone-lg{
  font-size: 2.142rem;
  line-height: 1.3;
  margin-bottom: 3.6rem;
}

.contact-social{
  margin-top: 1rem;
}

.contact-social a{
  color: #999999;
  font-size: 1.3rem;
}

.section-message{
  padding-top: 8rem;
}



/*-------------------------------------------------------------------------------
  7. Footer
-------------------------------------------------------------------------------*/


.footer{
  color: #333;
  line-height: 1.71;
}

.footer ul{
  list-style: none;
  padding:0;
  margin:0;
}

.footer ul li a{
  color: #333;
}

.footer ul .active a,
.footer ul li a:hover{
  color:#9fc939;
  text-decoration: none;
}

.footer-flex{
  margin-top: -4rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-flex .flex-item{
  margin-top: 4rem;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}



/* ------------------------------------------------------------------------------- */
/*  8. Responsive styles
/* ------------------------------------------------------------------------------- */



/* 8.1 Min width 768px */



@media (min-width: 768px){

  html{
    font-size: 1.083rem;
  }

  .pull-sm-left{
    float: left;
  }

  .pull-sm-right{
    float: right;
  }


  /* Sidebar Menu */


  
  .menu{
    width: 50%;
  }


  /* Homepage */



  .boxed{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .boxed-inner{
    padding-left: 0;
  }

  .right-boxed{
    right: 3rem;
  }

  .left-boxed{
    left: 3rem;
  }



  /* Section About */



  .section-about{
    padding-top: 12rem;
  }



  /* Section Projects */



  .section-projects .filter{
    margin-right: 14rem;
  }

  .section-projects .view-projects{
    position: absolute;
    top:0;
    right:0;
  }


  /* Works Carousel */



  .sly ul li{
    width: 46.25rem;
  }



  /* Homepage v2 */


  .project-box{
    padding-bottom: 75%;
  }

  .row-contact-info{
    margin-top: -2rem;
  }

  .col-contact-info{
    padding-top: 4rem;
    margin-top: 2rem;
  }


  /* Footer */



  .footer-flex .flex-item{
    -webkit-flex: 0 0 33.3333%;
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
  }
}




/* 8.2 Min width 992px */



@media (min-width: 992px){

  html{
    font-size: 1.167rem;
  }



  /* Helpers */



  .pull-md-right{
    float: right;
  }


  /* Sidebar Menu */



  .menu{
    width: 35%;
  }



  /* Homepage */



  .boxed{
    padding-left: 4.2857rem;
    padding-right: 4.2857rem;
  } 

  .right-boxed{
    right:4.2857rem;
  }

  .left-boxed{
    left: 4.2857rem;
  }


  /* Homepage v2 */


  .boxed-inner .boxed{
    padding-left: 6rem;
  }

  .service-list{
    margin-bottom: 0;
  }

  .col-contact-info{
    border-top: 0;
    padding-top: 0;
  }

  .row-contact-info{
    margin-top: -5rem;
  }

  .col-contact-info{
    margin-top: 5rem;
  }



  /* Pages */



  .page-header{
    margin:12.8rem 0 10.8rem;
  }

  .page-header-2{
    margin: 8.7rem 0 10.5rem;
  }

  .page-header-3{
    margin:9.2rem 0 12.2rem;
  }

  .page-header-3 .title-hr{
    margin:0.9rem 0 0;
  }

  .about-info .section-info .title-hr{
    margin-top: 1rem;
  }



  /* Post detail */



  .secondary{
    padding:0.5rem 0 0 6rem;
    margin-top: 0;
  }

  .post-thumbnail{
    padding-left: 0;
    padding-right: 0;
  }



  /* About */



  .about-info{
    padding-top: 1.2rem;
  }


  /* Contact */


  .map{
    height: 36rem;
  }


  /* Homepage v2 */


  .col-contact-info:nth-child(2n){
    border-left: 0.083rem solid #cacaca;
  }

}


/* 8.3 Min width 1200px */




@media (min-width: 1200px){



  /* Helpers */



  .pull-lg-right{
    float: right;
  }



  /* Section Projects */



  .section-projects .filter-content{
    margin-top: 0;
  }



  /* Homepage v2 */


  .section-3 .link-arrow.h5{
    float: right;
    margin-top: -1.3rem;
  }

  .section-5 .title-uppercase{
    margin-top: 22vh;
    margin-bottom: 0;
  }



  /* Works Carousel */



  .sly ul li {
    width: 57.083rem;
  }


  /* Homepage v2 */


  .section-5 .vertical-centred{
    padding-top: 17rem;
    padding-bottom: 8rem;
  }



  /* Footer */



  .footer-flex .flex-item{
    -webkit-box-flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
}



/* 8.5 Min Height 500px */



@media (min-height: 500px){

  #pp-nav .pp-nav-up,
  #pp-nav .pp-nav-down{
      display: block;
  }
  
}



/* 8.6 Min Height 600px */



@media (min-height: 600px){


  /* Sidebar Menu */


  .menu .menu-lang{
    top:7rem;
  }

  .menu-list{
    top:14rem;
    bottom: 5rem;
  }

  .menu-list > li{
    font-size: 2.571rem;
  }

  .menu-footer{
    bottom: 6rem;
  }

  .menu-footer .copy{
    display: block;
  }
}



/* 8.7 Min Height 700px */



@media (min-height: 700px){



  /* Homepage v2 */



  .copy-bottom{
    display: block;
  }

  .lang-bottom{
    display: block;
  }
  
}

/* Swiper */

.swiper-button-prev,
.swiper-button-next {
  color: #333 !important;
}

.swiper-pagination-bullet {
  background: #333 !important;
}

:root {
  --swiper-navigation-size: 2rem !important;
}

@media screen and (max-width: 1023px), screen and (max-height: 844px) {
  .copy-bottom.boxed,
  .lang-bottom.boxed {
    display: none;
  }
}

/* Updated positioning for the icon and title within a news item */
.news-hover .content {
  position: relative;
}

.news-hover .news-title {
  margin: 0;
}

/* Apply padding only on large screens and up (desktops) */
@media (min-width: 1025px) {
  .news-hover .news-title {
    padding-right: 1.5em; /* Reserve space for the icon on the right */
    padding-top: 1.5em;   /* Push the title down slightly so it sits below the icon */
  }
}

.news-hover .icon {
  position: absolute;
  right: 0.5em;
  top: 0;  /* Adjust this value to move the icon slightly above the title */
  font-size: 2.0em; /* Increase or decrease as needed */
}

/* Add styling for the green arrow next to the news title */
.news-arrow {
  color: #9fc939;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 0.25em; /* Default: no margin on smaller screens */
}

@media screen and (min-width: 1024px) {
  .news-arrow {
    margin-left: 0.5em; /* Apply margin on larger screens only */
  }
}


.news-arrow:hover {
  color: #333000;           /* Darker green on hover */
}

/* Style the inline SVG to make the arrow thinner */
.news-arrow svg {
  width: 1.3em;
  height: 1.3em;
}


.navbar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-nav ul li {
  margin-right: 2.5rem;  /* Increased spacing between items */
  font-size: 1.3rem;   /* Slightly bigger font size */
  font-weight: 500;
}

.navbar-nav ul li a {
  color: #333;         /* Black text */
  padding-right: 0.833rem; /* Padding to the right */
  text-decoration: none; /* Remove underline */
}

.navbar-nav ul li a:hover {
  text-decoration: none; /* Ensure no underline on hover */
}

.navbar-nav ul li:last-child {
  margin-right: 0;
}

/* Adjusted navbar styles with vertical lines */
.navbar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-nav ul li {
  font-size: 1.1rem; /* Slightly bigger font size */
}

/* Add vertical line between items (skip the last item) */
.navbar-nav ul li:not(:last-child) {
  border-right: 0.083rem solid #ccc; /* Vertical line in black */
  padding-right: 0.833rem;           /* Padding to the right of the text */
  margin-right: 1.667rem;            /* Extra spacing between entries */
}

.navbar-nav ul li a {
  color: #333;           /* Black text */
  padding-right: 0.833rem;    /* Add extra padding within the link */
  text-decoration: none;  /* Remove underline */
}

.navbar-nav ul li a:hover {
  text-decoration: none;  /* Ensure no underline on hover */
}

/* Navbar active link color customization */
.navbar-nav li a.active {
    color: #9fc939 !important;
}

.green-underscore {
  color: #9fc939;
}

.oib-light {
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   Thicker scrollbar for the project section (Section-3)
----------------------------------------------------------------------- */
.section-3 .scrollbar {
  /* Increase the height of the horizontal scrollbar */
  height: 0.4em;
}

.section-3 .scrollbar .handle {
  /* Make sure the handle fills the increased height */
  height: 100%;
  /* The background color remains the same (green) */
  background-color: #9fc939;
}

/* Mobile devices: show the navbar button, hide the navigation menu */
@media (max-width: 767px) {
  .navbar-toggle {
      display: block;
  }
  .navbar-nav {
      display: none;
  }
}

/* Tablets in portrait mode: show navbar button */
@media (max-width: 1023px) and (orientation: portrait) {
  .navbar-toggle {
      display: block;
  }
  .navbar-nav {
      display: none;
  }
}

/* Small landscape devices (phones in landscape): force mobile layout */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {
  .navbar-toggle {
      display: block !important;
  }
  .navbar-nav {
      display: none !important;
  }
}

/* Laptops and larger screens: hide the navbar button, show the navigation menu */
@media (min-width: 1024px) {
  .navbar-toggle {
      display: none;
  }
  .navbar-nav {
      display: block;
  }
}

/* Override for laptop-size screens in landscape (always show full navbar) */
@media (min-width: 1024px) and (orientation: landscape) {
  .navbar-toggle {
      display: none !important;
  }
  .navbar-nav {
      display: block !important;
  }
}

@media (max-width: 767px) {
  /* Hide all horizontal scrollbars on mobile */
  .scrollbar {
    display: none;
  }
  
  /* Fix for Sly carousel that might be causing overflow */
  .sly, .slidee {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Ensure images don't cause overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Specific rules for mobile devices in landscape orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* Force mobile navbar on landscape phones */
  .navbar-toggle {
    display: block !important;
  }
  .navbar-nav {
    display: none !important;
  }
  
  /* Adjust navbar height for landscape */
  .navbar {
    height: 5rem;
    padding-top: 1.5rem;
  }
  
  /* Reduce wrapper padding for landscape */
  .wrapper {
    padding-top: 5rem;
  }
  
  /* Adjust brand image size for landscape */
  .brand img {
    height: 3rem;
  }
}

/* Additional landscape orientation fixes */
@media screen and (max-width: 1023px) and (orientation: landscape) {
  /* Ensure mobile layout even in landscape */
  .navbar-toggle {
    display: block !important;
  }
  .navbar-nav {
    display: none !important;
  }
}

.small-text {
  font-size: 0.75em;
}

/* New grid layout for section 4 news items */
.news-grid {
  display: grid;
  grid-gap: 1.5rem; /* Increased gap for better spacing */
  grid-template-columns: repeat(2, 1fr);
  width: 100%; /* Default for screens below 1024px */
  max-height: 70vh; /* Increased to accommodate larger items */
  align-items: stretch; /* Ensure all items have equal height */
  grid-template-rows: repeat(2, 250px); /* Fixed row heights for uniform shape */
}

/* For screens above 1024px, set grid width to 85% */
@media (min-width: 1025px) {
  .news-grid {
    width: 85%; /* Slightly wider to accommodate larger items */
  }
}

/* For smaller screens, show a single column layout */
@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto; /* Remove fixed height restriction */
    max-height: none; /* Remove max-height restriction */
    gap: 1.5rem; /* Ensure good spacing between items */
  }
  
  /* Also hide pp-nav on smaller mobile devices */
  #pp-nav {
    display: none !important;
  }
}

.section-4 .intro {
  margin-bottom: 1rem; /* Reduce spacing below intro */
}

.section-4 .title-uppercase {
  margin-bottom: 1.5rem; /* Reduce title bottom margin */
  font-size: 2.5rem; /* Slightly smaller title if needed */
}

/* Make sure content fits within viewport */
.section-4 .container-fluid {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 80vh; /* Ensure content doesn't exceed 80% of viewport */
}

/* Remove height restrictions on mobile */
@media (max-width: 768px) {
  .section-4 .container-fluid {
    max-height: none !important; /* Remove height restriction on mobile */
    justify-content: flex-start !important; /* Align to top instead of center */
  }
}

/* Responsive adjustments for section-4 */
@media (max-width: 768px) {
  /* Hide page piling navigation on mobile */
  #pp-nav {
    display: none !important;
  }
  
  .section-4 .title-uppercase {
    font-size: 2rem !important; /* Even smaller on mobile */
    margin-bottom: 1rem !important;
  }
  
  .section-4 .news-item {
    height: auto !important; /* Allow natural height on mobile */
    min-height: 180px !important; /* Keep minimum for consistency */
  }
  
  .section-4 .news-hover {
    padding: 1.25rem !important; /* Good padding on mobile */
  }
  
  .section-4 .news-description {
    font-size: 0.9rem !important; /* Increased from 0.8rem for better readability */
    line-height: 1.4 !important; /* More comfortable line height */
  }
  
  .section-4 .news-title {
    font-size: 1.2rem !important; /* Increased from 1.1rem for better visibility */
  }
}

/* Center section-2 content on small screens */
@media (max-width: 767px) {
  /* Center the introductory text */
  .section-2 .intro {
    text-align: center;
    margin: 0 auto;
  }

  /* If you want to center the partner logos as well,
     use flexbox to center the items within the row */
  .section-2 .row.row-partners {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .scrollable-content {
      overflow-x: hidden;
  }
}

.row-images img {
    height: 50vh;       /* Sets the height to 70% of the viewport height */
    width: 100%;        /* Ensures the image fills the container's width */
    object-fit: cover;  /* Maintains aspect ratio and covers the entire area */
}

.about-paragraph{
  font-size: 1.15rem;
}

.col-service-text {
  font-size: 1.1rem;
}

  /* Post slide images */
  .slide-img {
    width: 100%;
    height: auto;
    display: block;
  }

/* Dark Mode Styles */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  border: 0.167rem solid #9fc939;
  border-radius: 50%;
  background: none;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  transition: all 0.3s ease;
  position: relative;
  float: right;
  z-index: 1000;
}

.dark-mode-toggle:hover {
  background-color: #9fc939;
  transform: scale(1.1);
}

.dark-mode-toggle:hover .toggle-icon:before {
  color: #ffffff !important;
}

.dark-mode-toggle .toggle-icon {
  font-size: 1.167rem;
  color: #9fc939;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.333rem;
  height: 1.333rem;
  position: relative;
  font-family: 'FontAwesome';
}

/* Moon icon (default - light mode) */
.dark-mode-toggle .toggle-icon:before {
  content: "\f186"; /* fa-moon-o */
  font-size: 1.167rem;
  color: #9fc939;
}

/* Sun icon (dark mode) */
.dark-mode-toggle .toggle-icon.sun-icon:before {
  content: "\f185"; /* fa-sun-o */
  font-size: 1.167rem;
  color: #9fc939;
}

.dark-mode-toggle .toggle-icon.sun-icon:after {
  display: none;
}

.dark-mode-toggle:hover .toggle-icon {
  transform: rotate(20deg);
}

/* Dark mode toggle in dark mode */
.dark-mode .dark-mode-toggle {
  border-color: #9fc939;
  color: #e0e0e0;
}

.dark-mode .dark-mode-toggle .toggle-icon {
  color: #9fc939;
}

.dark-mode .dark-mode-toggle .toggle-icon:before {
  color: #9fc939;
}

.dark-mode .dark-mode-toggle .toggle-icon.sun-icon:before {
  color: #9fc939;
}

.dark-mode .dark-mode-toggle .toggle-icon.sun-icon:after {
  display: none;
}

.dark-mode .dark-mode-toggle:hover {
  background-color: #9fc939;
  transform: scale(1.1);
}

.dark-mode .dark-mode-toggle:hover .toggle-icon:before {
  color: #ffffff !important;
}

/* Main image dark mode switching */
.main-image-light {
  display: block;
}

.main-image-dark {
  display: none;
}

.dark-mode .main-image-light {
  display: none;
}

.dark-mode .main-image-dark {
  display: block;
}

/* Smooth transition for image switching */
.main-image-light,
.main-image-dark {
  transition: opacity 0.3s ease;
}

/* Utility classes for inline styles migration */
.menu-lang-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-dark-mode-spacing {
  margin-right: 1.25rem;
}

.navbar-nav-right {
  float: right;
}

.navbar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-nav-item {
  margin-right: 1.667rem;
}

.bim-highlight {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0;
  background-color: #9fc939;
  color: #fff;
}

.news-hover-static {
  position: relative;
  background-color: #fff;
}

.content-visible {
  opacity: 1;
}

.no-transform {
  transform: none;
}

.honeypot-field {
  display: none !important;
}

/* Ensure dark mode toggle is visible in navbar */
.dark-mode .navbar-2 .dark-mode-toggle {
  border-color: #9fc939;
  background-color: rgba(159, 201, 57, 0.1);
}

.dark-mode .navbar-2 .dark-mode-toggle .toggle-icon:before {
  color: #9fc939;
}

.dark-mode {
  background-color: #2a2a2a;
  color: #cccccc;
}

.dark-mode body {
  background-color: #2a2a2a;
  color: #cccccc;
}

/* Dark mode green underscore styling */
.dark-mode .green-underscore {
  color: #9fc939;
}

/* Dark mode BIM highlight - black text */
.dark-mode .bim-highlight {
  color: #2a2a2a;
}

/* Dark mode navbar styles */
.dark-mode .navbar-2 .navbar-bg {
  background: #2a2a2a;
}

/* Dark mode pagepiling section styles */
.dark-mode .pagepiling .section {
  background: #2a2a2a;
}

/* Dark mode boxed styles */
.dark-mode .boxed {
  background-color: #2a2a2a;
}

/* Additional dark mode elements */
.dark-mode .navbar-2 {
  background: rgba(42, 42, 42, 0.95);
}

.dark-mode .navbar-2 .brand,
.dark-mode .navbar-2 .navbar-address,
.dark-mode .navbar-2 .social-list {
  color: #cccccc;
}

.dark-mode .navbar-2 .navbar-address a,
.dark-mode .navbar-2 .social-list a {
  color: #cccccc;
}

.dark-mode .navbar-2 .navbar-address a:hover,
.dark-mode .navbar-2 .social-list a:hover {
  color: #9fc939;
}

/* Dark mode navbar navigation items */
.dark-mode .navbar-nav a {
  color: #cccccc !important;
}

.dark-mode .navbar-nav a:hover {
  color: #9fc939 !important;
}

/* Dark mode navbar toggle (hamburger menu) */
.dark-mode .navbar-toggle .icon-bar {
  background-color: #cccccc;
}

.dark-mode .navbar-toggle:hover .icon-bar {
  background-color: #9fc939;
}

/* Dark mode text elements */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #cccccc;
}

.dark-mode p,
.dark-mode span,
.dark-mode div {
  color: #cccccc;
}

/* Override text-dark class in dark mode */
.dark-mode .text-dark {
  color: #cccccc !important;
}

/* Dark mode borders and dividers */
.dark-mode hr {
  border-color: #444444;
}

/* Dark mode form elements */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: #3a3a3a;
  color: #cccccc;
  border-color: #444444;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  border-color: #9fc939;
  background-color: #424242;
}

/* Dark mode cards and content areas */
.dark-mode .card,
.dark-mode .content-area,
.dark-mode .section-content {
  background-color: #2a2a2a;
  color: #cccccc;
}

/* Dark mode links */
.dark-mode a {
  color: #cccccc;
}

.dark-mode a:hover {
  color: #9fc939;
}

/* Dark mode page piling navigation */
.dark-mode #pp-nav .pp-nav-up,
.dark-mode #pp-nav .pp-nav-down {
  color: #cccccc;
}

.dark-mode #pp-nav .pp-nav-up:hover,
.dark-mode #pp-nav .pp-nav-down:hover {
  color: #9fc939;
}

.dark-mode #pp-nav span,
.dark-mode .pp-slidesNav span {
  background: #444444;
}

.dark-mode #pp-nav li .active span,
.dark-mode .pp-slidesNav .active span,
.dark-mode #pp-nav span:hover,
.dark-mode .pp-slidesNav span:hover {
  background: #9fc939;
}

/* Dark mode scrollbar */
.dark-mode ::-webkit-scrollbar-thumb {
  background: #444444;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

.dark-mode ::-webkit-scrollbar-track {
  background: #2a2a2a;
}

/* Dark mode selection */
.dark-mode ::selection {
  background-color: #9fc939;
  color: #2a2a2a;
}

.dark-mode ::-webkit-selection {
  background-color: #9fc939;
  color: #2a2a2a;
}

/* Dark mode buttons */
.dark-mode .btn,
.dark-mode button {
  color: #2a2a2a !important;
}

.dark-mode .btn:hover,
.dark-mode button:hover {
  background-color: #b8e045;
  color: #2a2a2a !important;
}

/* Dark mode contact section specific improvements */
.dark-mode .btn-yellow {
  background-color: #9fc939 !important;
  color: #2a2a2a !important;
}

.dark-mode .btn-yellow:hover {
  background-color: #b8e045 !important;
  color: #2a2a2a !important;
}

/* Dark mode contact info text */
.dark-mode .contact-info-row {
  color: #cccccc !important;
}

.dark-mode .contact-info-row strong {
  color: #f0f0f0 !important;
}

/* Dark mode - remove dotted backgrounds */
.dark-mode .dots-image .dots,
.dark-mode .dots-image-2 .dots,
.dark-mode .bg-dots {
  background: none !important;
  display: none;
}

.dark-mode .dots-image::after,
.dark-mode .dots-image-2::after {
  display: none;
}

/* Dark mode footer text visibility */
.dark-mode .copy-bottom {
  color: #cccccc !important;
}

.dark-mode .lang-bottom {
  color: #cccccc !important;
}

.dark-mode .footer {
  color: #cccccc !important;
}

.dark-mode .footer ul li a {
  color: #cccccc !important;
}

.dark-mode .footer ul .active a,
.dark-mode .footer ul li a:hover {
  color: #9fc939 !important;
}

.dark-mode .menu-footer {
  color: #cccccc !important;
}

.dark-mode .menu-footer .copy {
  color: #cccccc !important;
}

.dark-mode .menu-footer .social-list a {
  color: #cccccc !important;
}

.dark-mode .menu-footer .social-list a:hover {
  color: #9fc939 !important;
}

/* Dark mode project section fixes */
.dark-mode .project-title {
  color: #cccccc !important;
}

.dark-mode .project-description {
  color: #cccccc !important;
}

.dark-mode .project-item .link-arrow {
  color: #cccccc !important;
}

.dark-mode .project-item:hover .project-hover {
  background-color: rgba(42, 42, 42, 0.95) !important;
  border-color: #9fc939;
}

.dark-mode .project-item:hover .project-hover .project-title {
  color: #cccccc !important;
}

.dark-mode .project-item:hover .project-hover .project-description {
  color: #cccccc !important;
}

/* Dark mode filter navigation */
.dark-mode .filter li a {
  color: #cccccc !important;
}

.dark-mode .filter li a:hover,
.dark-mode .filter .active a {
  color: #9fc939 !important;
}

/* Dark mode language selectors */
.dark-mode .menu-lang a {
  color: #cccccc !important;
}

.dark-mode .menu-lang .active,
.dark-mode .menu-lang a:hover {
  color: #9fc939 !important;
}

.dark-mode .lang-bottom {
  color: #cccccc !important;
}

.dark-mode .lang-bottom .menu-lang {
  color: #cccccc !important;
}

.dark-mode .lang-bottom .menu-lang a:not(.active) {
  color: #cccccc !important;
}

.dark-mode .lang-bottom .menu-lang a:hover {
  color: #9fc939 !important;
}

/* Dark mode menu sidebar */
.dark-mode .menu {
  background-color: #2a2a2a !important;
}

.dark-mode .menu-list a {
  color: #cccccc !important;
}

.dark-mode .menu-list a:hover {
  color: #9fc939 !important;
}

/* Dark mode client/partner section - remove gray overlays */
.dark-mode .partner-carousel .partner-carousel-item img,
.dark-mode .col-partner img {
  opacity: 0.6 !important;
  filter: brightness(0) invert(1) !important;
}

.dark-mode .partner-carousel .partner-carousel-item:hover img,
.dark-mode .col-partner:hover img {
  opacity: 1 !important;
  filter: none !important;
}

/* Dark mode clients carousel */
.dark-mode .clients-carousel .client-item img {
  opacity: 0.4 !important;
  filter: grayscale(100%) brightness(0) invert(1) !important;
}

.dark-mode .clients-carousel .client-item:hover img {
  opacity: 1 !important;
  filter: grayscale(0%) brightness(1) !important;
}

.dark-mode .clients-carousel.owl-carousel .owl-dot {
  background: rgba(255,255,255,0.3) !important;
}

.dark-mode .clients-carousel.owl-carousel .owl-dot span {
  display: none;
}

.dark-mode .clients-carousel.owl-carousel .owl-dot.active {
  background: #9fc939 !important;
}

/* Dark mode "What we do" section fixes */
.dark-mode .news-hover {
  background-color: #2a2a2a !important;
  color: #cccccc !important;
}

.dark-mode .news-title {
  color: #cccccc !important;
}

.dark-mode .news-description {
  color: #cccccc !important;
}

.dark-mode .news-hover .read-more {
  color: #9fc939 !important;
}

.dark-mode .news-hover .read-more:hover {
  color: #b8e045 !important;
}

.dark-mode .news-arrow {
  color: #9fc939 !important;
}

.dark-mode .news-arrow:hover {
  color: #b8e045 !important;
}

/* Responsive styles for dark mode toggle */
@media (max-width: 767px) {
  .dark-mode-toggle {
    width: 2.917rem;
    height: 2.917rem;
    margin-top: 0.667rem;
    margin-left: 0.833rem;
  }
  
  .dark-mode-toggle .toggle-icon {
    font-size: 1.333rem;
  }
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    width: 2.667rem;
    height: 2.667rem;
    margin-top: 0.5rem;
    margin-left: 0.667rem;
  }
  
  .dark-mode-toggle .toggle-icon {
    font-size: 1.167rem;
  }
}

/* Dark Mode Post Template Styles */
.dark-mode .page-content-2 {
  background-color: #2a2a2a !important;
  color: #cccccc !important;
}

.dark-mode .entry-title {
  color: #9fc939 !important;
}

.dark-mode .posted-on {
  color: #cccccc !important;
}

.dark-mode .entry-content {
  color: #cccccc !important;
}

.dark-mode .entry-content p {
  color: #cccccc !important;
}

.dark-mode .entry-content blockquote {
  background-color: #2a2a2a !important;
  border-left: 0.333rem solid #9fc939 !important;
  color: #cccccc !important;
}

.dark-mode .entry-content blockquote p {
  color: #cccccc !important;
}

.dark-mode .widget-title {
  color: #9fc939 !important;
}

/* Dark mode widget border bottom - make it more visible */
.dark-mode .widget {
  border-bottom-color: #555555 !important;
}

/* Dark mode widget text colors */
.dark-mode .widget_archive li a,
.dark-mode .widget_categories li a,
.dark-mode .widget_pages li a,
.dark-mode .widget_meta li a,
.dark-mode .widget_recent_entries li a,
.dark-mode .widget_nav_menu li a {
  color: #cccccc !important;
}

.dark-mode .widget_archive li a:hover,
.dark-mode .widget_categories li a:hover,
.dark-mode .widget_pages li a:hover,
.dark-mode .widget_meta li a:hover,
.dark-mode .widget_recent_entries li a:hover,
.dark-mode .widget_nav_menu li a:hover {
  color: #9fc939 !important;
}

.dark-mode .recent-post-content .post-title {
  color: #cccccc !important;
}

.dark-mode .recent-post-content .post-title:hover {
  color: #9fc939 !important;
}

.dark-mode .post-time,
.dark-mode .recent-post-content .post-time {
  color: #888888 !important;
}

.dark-mode .widget_categories ul li {
  color: #cccccc !important;
}

.dark-mode .widget_categories ul li > a:first-child {
  color: #9fc939 !important;
}

/* Dark mode backgrounds */
.dark-mode .secondary {
  background-color: #2a2a2a !important;
}

.dark-mode .primary {
  background-color: #2a2a2a !important;
}

/* Partner/Client image styling */
.col-partner img {
  width: 10rem;
  height: 6.667rem;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.col-partner:hover img {
  filter: grayscale(0%);
}

/* Form success and error messages */
.success-message, .error-message {
  display: none;
  margin-top: 1.25rem;
  padding: 0.833rem;
  border-radius: 0.333rem;
  font-size: 1.167rem;
  font-weight: 500;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  border: 0.083rem solid #c3e6cb;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 0.083rem solid #f5c6cb;
}

/* Dark mode form messages */
.dark-mode .success-message {
  background-color: #1e4d26 !important;
  color: #7dd87f !important;
  border: 0.083rem solid #28a745 !important;
}

.dark-mode .error-message {
  background-color: #4d1e26 !important;
  color: #f87f8f !important;
  border: 0.083rem solid #dc3545 !important;
}

/* Honeypot field - completely hidden from users */
input[name="website"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -831.5rem !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 800px){
  html{ font-size: 10px; }
}

@media (min-width: 1400px){
  html{ font-size: 14px; }
}

/* Hide navbar phone number on screens smaller than 1400px */
@media (max-width: 1499px) {
  .navbar-address.visible-lg:first-of-type {
    display: none !important;
  }
}

/* Show navbar phone number only on screens 1400px and larger */
@media (min-width: 1500px) {
  .navbar-address.visible-lg:first-of-type {
    display: block !important;
  }
}

@media (min-width: 1800px){
  html{ font-size: 15px; }
}

@media (min-width: 2000px){
  html{ font-size: 16px; }
}


@media (min-width: 2200px){
  html{ font-size: 17px; }
}

/* ------------------------------------------------------------------------------
   Project Items Responsive Styles
-------------------------------------------------------------------------------*/

/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {
  .project-item img {
    width: 100%;
    height: 16rem;
    object-fit: cover;
  }
  
  .project-box {
    padding-bottom: 45%;
  }
  
  .project-box-inner {
    padding: 1.5rem 1rem;
  }
  
  .grid-item {
    width: 100%;
    padding: 1.25rem 0.625rem 0 0.625rem;
  }
  
  .project-hover-2 {
    padding: 1.5rem;
  }
  
  /* Carousel adjustments for mobile */
  .project-carousel {
    margin-top: 3rem;
  }
  
  /* Grid items spacing for mobile */
  .grid-items {
    margin: -1.5rem -0.75rem 0 -0.75rem;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .project-item img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
  }
  
  .project-box {
    padding-bottom: 35%;
  }
  
  .project-box-inner {
    padding: 1.8rem 1.5rem;
  }
  
  .grid-item {
    width: 50%;
    padding: 2rem 1rem 0 1rem;
  }
  
  .project-hover-2 {
    padding: 2rem;
  }
  
  /* Carousel adjustments for tablets */
  .project-carousel {
    margin-top: 4.5rem;
  }
  
  /* Grid items spacing for tablets */
  .grid-items {
    margin: -2rem -1rem 0 -1rem;
  }
}

/* Small laptops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .project-item img {
    width: 32rem;
    height: 22rem;
    object-fit: cover;
  }
  
  .project-box {
    padding-bottom: 30%;
  }
  
  .project-box-inner {
    padding: 2rem 1.7rem;
  }
  
  .grid-item {
    width: 33.333%;
    padding: 2.25rem 1.125rem 0 1.125rem;
  }
  
  .project-hover-2 {
    padding: 2.3rem;
  }
}

/* Large screens (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .project-item img {
    width: 36rem;
    height: 25rem;
    object-fit: cover;
  }
  
  .project-box {
    padding-bottom: 28%;
  }
  
  .project-box-inner {
    padding: 2.1rem 1.8rem;
  }
  
  .grid-item {
    width: 33.333%;
    padding: 2.4rem 1.2rem 0 1.2rem;
  }
  
  .project-hover-2 {
    padding: 2.5rem;
  }
}

/* Extra large screens (1600px and above) - keep original sizes */
@media (min-width: 1600px) {
  .project-item img {
    width: 39.167rem;
    height: 28rem;
    object-fit: cover;
  }
  
  .project-box {
    padding-bottom: 25%;
  }
  
  .project-box-inner {
    padding: 2.14rem 1.928rem;
  }
  
  .grid-item {
    width: 33.333%;
    padding: 2.5rem 1.25rem 0 1.25rem;
  }
  
  .project-hover-2 {
    padding: 2.71rem;
  }
}

@media (min-width: 3000px){
  html{ font-size: 21px; }
}


@media (min-width: 3200px){
  html{ font-size: 22px; }
}

@media (min-width: 3400px){
  html{ font-size: 23px; }
}

@media (min-width: 3600px){
  html{ font-size: 24px; }
}

@media (min-width: 3800px){
  html{ font-size: 25px; }
}