* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    
    position: relative;
    height: 100%;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: clip;
}

h1 {
  font-size: 2.2rem;   /* Mobile default */
  line-height: 1.3;
  font-weight: 700;
}

@media (min-width: 576px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media (min-width: 992px) {
  h1 {
    font-size: 3.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3.5rem;
  }
}


p {
    font-family: 'Nunito Sans', sans-serif;
}

a {
    text-decoration: none;
    
}

.a-link-main:hover {
    color: #509d2d;
}

.a-link {
    color: #fff;
    text-decoration: underline;
}

.a-link:hover {
    color: #509d2d;
}

.shift {
    color: #407e25;
}

.bg-dark-color {
    background-color: #252525;
}

.bg-taupe {
 background-color: #E0E0E0;
}



.shiftHeroLogo {
    letter-spacing: 1rem;
    font-size: 1.5rem;
}

/*h1 {
    font-size: 50px;  
}

@media (max-width: 768px) {
    h1 {
        font-size: 25px; 
    }
}*/




/* ================ OUR SOLUTION - BENEFITS ===============================*/
.benefit-icon {
    height: 100px;
    width: 100px;
}

.shiftHero-word {
    letter-spacing: .2rem;
}

.shiftHeroWord-color {
    color: #519434;
    font-weight: 500;
}

/* ========================= REGISTER DETAILS PAGES ===================*/
.full-height {
    width: 100%;
    height: 100vh;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.box-shadow {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.9)
}

.form-control:active,
.form-control:focus {
    border: none;
    background-color: transparent;
}

.bg-green {
    background-color: #509d2d;
}

.sec-py-40 {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Customizing the appearance of radio buttons */
input[type="radio"].form-check-input:checked {
    background-color: green; 
    border-color: green; 
}

/*------------------------------------------------------------------------
# Header
--------------------------------------------------------------------------*/

.logo {
    padding-left: 30px; /*not in use in index.html*/
}



.nav-bg {
    background-color: black;
}
/*------------------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------------------*/
@media (max-width: 991px) {
  #hero-nav .navbar-collapse {
      background-color: #161619;
  }
}


.nav-link-user:hover {
    background: #509d2d;
} 

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-dark .navbar-toggler {
    border-color: transparent;
    color: transparent;
}

/* Hide the text by default for sign in */
.visually-hidden {
    display: block;
    position: absolute;
    
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 9999;
  }

.nav-link:hover .visually-hidden {
  display: block;
}


.navbar-hero--scrolled {
    background-color: #161619;
}

/*keep nav menu on top of everything*/
.fixed-top {
    z-index: 50000;
}

/*------------------------------------------------------------------------
# Dropdown Item
--------------------------------------------------------------------------*/

.dropdown-menu-dark .dropdown-item.active {
    background-color: #509d2d;
}



/*------------------------------------------------------------------------
# Hero Section
--------------------------------------------------------------------------*/
.hero {
    width: 100%;
    height: 90vh;
    padding-top: 60px;
}

@media (max-width: 767px) {
    .hero {
      padding-top: 100px; /* Adjust padding for smaller screens if needed */
      height: auto;
    }
}

.hero-max {
    width: 100%;
    height: 100vh;
    padding-top: 1000px;
}

#hero {
    width: 100%;
    height: calc(100vh - 60px);
    padding-top: 60px;
    background: linear-gradient(135deg, rgb(5, 5, 5) 42%, rgba(42,52,60,1) 75%, rgba(59,73,84,1) 100%);
}



@media (max-width: 990px) {
    #hero-row {
        margin-bottom: 25px;
    }
}


@media (min-width: 768px) and (max-width: 990px) {
    #hero {
      padding-top: 100px; /* Adjust padding for screens between 768px and 990px */
    }
}

@media (max-width: 990px) {
    #hero-signin {
      display: block;
      padding-top: 10px;
    }

    #hero {
        height: auto;
        padding-top: 100px;
    }
}

@media (max-width: 767px) {
    #hero {
      padding-top: 100px; 
      height: auto;
    }

    #hero-para {
        display: none;
    }

    #hero-btm-row {
        display: none;
    }

    .display-to-none {
        display: none;
    }
}

@media (max-width: 576px) {
    /*#hero-col-left {
        padding-top: 0px;
    }*/
    #hero {
        padding-top: 115px;
    }
}



@media (min-width:768px) {
  .display-to-none-lg {
    display: none;
  }
}


#hero h2 {
    font-family: 'Pronto', sans-serif;
}

.text-color-green {
    color: #509d2d;
}


#hero-logos {
    position: absolute;
    bottom: 0;
}

@media (max-width: 576px) {
    #hero-logos {
        position: relative;
    }
}



#hero-para {
    border: 2px solid rgba(42, 42, 42, 0.8);;
    background-color: transparent; 
    padding: 20px;
    padding-left: 0px;
}


.lighter-text {
    color: #a6a6a6;
}

.card-div {
    margin-top: -150px
}

.card-1 {
    border: 1px solid #1e741e;
    border-radius: 10px;
    padding: 15px;
    max-width: 250px;
    margin-right: 20px;
    background-color: transparent;
}

.card-2 {
    border: 1px solid #3f67d4;
    border-radius: 10px;
    padding: 15px;
    max-width: 250px;
    margin-right: 0;
    background-color: transparent;
}

/*------------------------------------------------------------------------
# what section
--------------------------------------------------------------------------*/

.icon-circle {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    /*background: linear-gradient(to bottom right, #509d2d, #ffffff);*/
    background: linear-gradient(to bottom right, #509d2d, #a0d388);
}


/*------------------------------------------------------------------------
# Counter
--------------------------------------------------------------------------*/


.counter-row {
    /*margin-top: -100px;*/
    padding-top: 50px;
}

.counter-box {
	display: block;
	/*background: #6aa152;*/
	padding: 40px 20px 37px;
	text-align: center
}

.counter-box p {
	margin: 5px 0 0;
	padding: 0;
	color: #407e25;
	font-size: 18px;
	font-weight: 500
}

.counter-box i {
	font-size: 2rem;
	margin: 0 0 15px;
	color: #6caf4f
}

.counter { 
	display: block;
	font-size: 32px;
	font-weight: 700;
	color: black;
	line-height: 28px
}

.counter-box.colored {
      /*background: #444;*/
      color: #407e25;
}

.counter-box.colored p,
.counter-box.colored i,
.counter-box.colored .counter {
	color: black;
}


/*------------------------------------------
# Counter 2
--------------------------------------------*/
/*  Counter Section  */

#counter {    
    background-color: #161619;
    color: #fff;
    display: block;
    overflow: hidden;
    text-align: center;
    padding: 100px 0;
}
#counter .count {
    padding: 50px;
    background: #161619;
    color: #fff;
    text-align: center;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.749)
}

.count-no {
    
    font-weight: 600;
    letter-spacing: .15rem;
}

.suffix {
    
    font-weight: bold;
    letter-spacing: 0;
    
}

.counter-icon-div  {
    color: white;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

#counter-icon-div-1 {
    background-color: #407c24;
}

#counter-icon-div-2 {
    background-color: #509d2d;
}

#counter-icon-div-3 {
    background-color: #64c239;
}

#counter-icon-div-4 {
    background-color: #76e443;
}


.count h4 {
    color: #fff;
	font-size: 16px;
	margin-top: 0;
}
#counter .count .fa {
    font-size: 40px;
    display: block;
    color: #fff;
}


/*------------------------------------------
# Hero Search bar 
-------------------------------------------*/
.search-form {
    border-radius: 30px 0px 0px 30px;
    /*border-radius: Top-left, Top-right, Bottom-right, Bottom-left;*/
  }
  
.search-btn {
    border-radius: 0px 30px 30px 0px;
    cursor:pointer;
}

/*------------------------------------------
# Product Section  might 
-------------------------------------------*/
.product {
    background-color: white;
}

.test-box {
    padding: 50px 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    border: 1px solid rgb(247, 245, 245);
    background-color: rgb(247, 245, 245);
}


/*-----------------------------------------
# SOCIAL ICONS
------------------------------------------*/
.social-icon:hover {
    color: #509d2d;
    transition: ease-in-out 0.1s;
} 
/*------------------------------------------
# Features Section 
-------------------------------------------*/
#features {
    background-color: rgb(247, 245, 245);
    padding-top: 40px;
    padding-bottom: 40px;
}

.text-green {
    color: #407e25;
}

.feature-box {
    background-color: white;
}

/*------------------------------------------
# Trusted Section 
-------------------------------------------*/
#trusted-grey-footer {
    border: 1px solid #252525;
    
}


/*------------------------------------------
# Testimonials Section 
-------------------------------------------*/
#testimonials {
    padding-top: 80px;
    padding-bottom: 30px;
} 

.testimonial-text {
    padding-top: 30px;
}




/*------------------------------------------
# Testimonials Section 
-------------------------------------------*/
#app-section a {
    cursor: pointer;
}


/*------------------------------------------
# Footer 
-------------------------------------------*/
footer {
    background-color: black;
}

.bg-footer {
    background-color: #252525;
}

.dark-bg {
  background-color: #161619;
}
.footer-background {
  background-color: #161619;
}

.text-small {
  font-size: 12px;
}

.bg-black {
  background-color: black;
}

.footer-link:hover {
  color: #919090;
  transition: ease-in-out 0.2s;
}


/*-----------------------------------------
# DIVIDER
------------------------------------------*/

.divider {
    background-color: rgb(247, 245, 245);
}

.divider-div {
    height: 40px;
    background-color: rgb(247, 245, 245);
}

/*-----------------------------------------
# BUTTONs
------------------------------------------*/

.btn-pills {
    color: white;
    background-color: #407e25;;
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid #407e25;
    border-radius: 40px;
    background: transparent;
    transition: all 0.3s ease 0s;
  }

.btn-pill {
    border-radius: 30px 30px 30px 30px;
    padding: 12px 25px;
    font-size: small;
}

.btn-app {
    background-color: black;
    padding: 5px 25px 5px 25px;
}

.btn-outline-black {
    padding: 0.75rem 2rem;
    color: white;
    border-color: white;
    background-color: transparent;
}

.btn-outline-black:hover {
    padding: 0.75rem 2rem;
    color: white;
    border-color: black;
    background-color: black;
    transition: ease-in-out 0.2s;
}

.btn-outline-black-on-white {
    padding: 0.75rem 2rem;
    color: white;
    border-color: black;
    background-color: black;
}

.btn-outline-black-on-white:hover {
    padding: 0.75rem 2rem;
    color: black;
    border-color: black;
    background-color: transparent;
    transition: ease-in-out 0.2s;
}

.btn-outline-white {
    padding: 0.75rem 2rem;
    color: white;
    border-color: white;
    background-color: transparent;
}

.btn-outline-white:hover {
    padding: 0.75rem 2rem;
    color: black;
    border-color: white;
    background-color: white;
    transition: ease-in-out 0.2s;
}

.btn-outline-black-white {
    padding: 0.75rem 2rem;
    color: black;
    border-color: black;
    background-color: transparent;
    transition: ease-in-out 0.2s;
}

.btn-outline-black-white:hover {
    padding: 0.75rem 2rem;
    color: white;
    border-color: black;
    background-color: black;
    transition: ease-in-out 0.2s;
}


.btn-solid-black {
    padding: 0.75rem 2rem;
    color: white;
    border-color: black;
    background-color: black;
}

.btn-solid-black:hover {
    padding: 0.75rem 2rem;
    color: black;
    border-color: black;
    background-color: transparent;
    transition: ease-in-out 0.2s;
}

.btn-on-green {
    padding: 0.75rem 2rem;
    color: #000;
    font-weight: 700;
    border-color: #3f861d;
    background-color: #fff;
}

.btn-on-green:hover {
    padding: 0.75rem 2rem;
    color: #509d2d;
    font-weight: 700;
    border-color: #fff;
    background-color: #fff;
    transition: ease-in-out 0.2s;
}

.btn-success-green {
    color: white;
    background-color: #509d2d;
    /*border-color: #509d2d;*/
    border: 0.25px solid #5ad81f;
    padding: 0.75rem 2rem;
}

.btn-success-green:hover {
    color: white;
    background-color: #498f29;
    border-color: #498f29;
    transition: ease-in-out 0.2s;
}

.btn-success-green:active {
    box-shadow: none;
    border-color: none;
}

.btn-success-green-small {
    color: white;
    background-color: #509d2d;
    /*border-color: #509d2d;*/
    border: 0.25px solid #5ad81f;
    
}

.btn-success-green-small:hover {
    color: #252525;
    background-color: #509d2d;
    border-color: #509d2d;
}

.btn-outline-success {
    color: #509d2d;
    border-color: #509d2d;
}

.btn-outline-success:hover {
    background-color: #509d2d;
    border-color: #509d2d;
}

.btn-success {
    background-color: #509d2d;
    /*border-color: #509d2d;*/
    border: 0.25px solid #5ad81f;
}

.btn-success:hover {
    background-color: #498f29;
    border-color: #498f29;
    transition: ease-in-out .2s;
}


@media (max-width: 991px) {
    .btn-margin {
        margin-bottom: 15px;
    }

}




/*-----------------------------------------
# FAQs Accordion
------------------------------------------*/

#faq, 
#contractor-benefits {
    width: 100%;
    height: 100vh;
    background-color: white
}

.accordion-button:not(.collapsed) {
    color: #414241;
    background-color: transparent;
    
}

.accordion-button:focus {
    border-color: none;
    box-shadow: none;
}

.btn-pill-small {
    border-radius: 30px 30px 30px 30px;
    padding: 10px 23px;
    font-size: .5rem;
}


.small-p-text {
    font-size: 12px;
}

.h6-small {
    font-size: 14px;
    font-weight: bold;
    color: #509d2d
    
}

/*=============================================================
# Ad section 
===============================================================*/

.bg-dark-black {
    background-color: #161619;
} 

.massive-text {
    font-size: 72px;
    letter-spacing: -2.5px;   
}

@media (max-width: 991px) {
    .massive-text {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .massive-text {
        font-size: 48px;
    }
}

@media (max-width: 576px) {
    .massive-text {
        font-size: 36px;
    }
}



#hero-section {
    background-color: #252525;
    color: #fff;
    height: 100vh;
    padding-top: 100px;
}





  /*===================================================================================
  # Join us / Engineers Section
  =====================================================================================*/

  #hero-joinus {
    height: 90vh;
    width: 100%;

  }

 .join-us-h2 {
    font-weight: 600;
 }

 #test-div {
    margin-top: -80px;
 }



  
 


  
 

/*===================================================================================
  # FORMS
  =====================================================================================*/
  #eng-sent-message {
    display: none;
  }

  #com-sent-message {
    display: none;
  }   

  #sent-message {
    display: none;
  }

  #connect-sent-message {
    display: none;
  }
  

.bg-neutral {
    background-color: #F7F5F5;
    border: none;
}


.drop-shadow-light {
    filter: drop-shadow(7px 21px 15px #c9c5c5);
}

.bg-dark-white {
    background-color: #f7f5f5;
}

.border-rounded {
    border-radius: 15px;
}

.wrapper {
    background: linear-gradient(to right, #509d2d, #a5e787);
    padding: 1px;
}

.inner-wrapper {
    height: 100%;
}


/*========= ABOUT - WHO WE ARE SECTION ID=TEAM =====================*/

.about-hero {
    /*background-image: url('../images/backgrounds/about-bg-1.webp');*/
    background-image: url('../images/backgrounds/about-bg-3-small.webp');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}



.text-green-bright {
    color: #6fda3d;
}

.safe-logo {
    background-image: url('../images/backgrounds/safe-contractor.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

#howItWorks {
    background-image: url('../images/backgrounds/backgroundImage2.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

#connect-how {
    background-color: #2E6F9E;
    /*background-image: url('../images/backgrounds/backgroundImage2.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;*/
}


/*==============================================================================
# STICKY COUNTER
================================================================================*/

.hero-counter {
    /*position: sticky;*/
    top: 99px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(80, 157, 45, 0.8);
    color: #161619

}

.hero-counter-wrapper {
    background-color: rgba(80, 157, 45, 0.8);
}

.bg-counter {
    background-color: #333232;
}

.counter-heading {
    font-size: 24px;
}

.counter-text {
    font-size: 16px; 
}

/* Media query for large (lg) devices */
@media (min-width: 992px) {
    .counter-heading {
        font-size: 22px;
    }
    .counter-text {
        font-size: 14px;
    }
}

/* Media query for medium (md) devices */
@media (max-width: 991px) {
    .counter-heading {
        font-size: 20px;
    }
    .counter-text {
        font-size: 12px; 
    }
}

/* Media query for small (sm) devices */
@media (max-width: 767px) {
    .counter-heading {
        font-size: 18px;
    }
    .counter-text {
        font-size: 10px; 
    }
}

/* Media query for extra small (xs) devices */
@media (max-width: 575px) {
    .counter-heading {
        font-size: 16px;
    }
    .counter-text {
        font-size: 8px; 
    }
}






/*==============================================================================
# TRUSTED BY
================================================================================*/

.trusted-grad {
    background-image: linear-gradient(to right, #050505, #3a4853);
}



/*==============================================================================
# ADDED STYLES
================================================================================*/



.heading-para {
    font-size: 1.5rem;
  }
    /** pill**/
    .pill {
        border: 2px solid white; 
        border-radius: 50px; 
        padding: 4px 18px !important; 
        color: white !important; 
        transition: all 0.3s ease-in-out;
        display: inline-block; 
    }
    
    .pill:hover {
        background-color: white; 
        color: #509d2d !important; 
    }
    
    .pill-green {
        border: 2px solid #509d2d; 
        border-radius: 50px; 
        padding: 4px 18px !important; 
        background-color: #509d2d;
        color: white !important; 
        transition: all 0.3s ease-in-out;
        display: inline-block; 
    }
    
    .pill-green:hover {
        background-color: transparent; 
        color: #509d2d !important; 
    }
    
    /** General font**/
    .text-small {
        font-size: .75rem;
    }


    .bg-connect {
        background-color: #2E6F9E;
      }


       /***** whats app ****/
       .whatsapp-fixed, .whatsapp-fixed-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
      }

      /* QR image styling */
    .whatsapp-fixed .qr-img-small {
      width: 100%;
      max-width: 100px;
      height: auto;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .qr-label {
      font-size: 0.85rem;
      color: #fff;
      font-weight: 500;
      background-color: #25D366;
      padding: 8px 16px;
      border-radius: 30px;
      display: flex;
      align-items: center;
    }



    /* Mobile chat button styling */
    .whatsapp-fixed-btn {
      background-color: #25D366;
      color: #fff;
      padding: 8px 16px;
      border-radius: 30px;
      font-weight: bold;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Optional icon sizing */
    .whatsapp-fixed-btn i {
      font-size: 20px;
    }

    .whatsapp-fixed-btn:focus {
      color: #fff;
    }fff;
    }