/* ======================================================================
 * Ported verbatim from Ecothreads (no CSS rewrites).
 * Source: Ecothreads/services/styles.css
 * Source: Ecothreads/services/index.html <style>
 * ====================================================================== */

  .services{
    position: relative;
 }
 
 .services .goal {
   position: relative;
 
   background-color: #f5f5f5;
   background-image: url("https://ecothreadsepz.com/wp-content/uploads/2025/07/0A0A3741.jpg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
   height: 550px;
   overflow: visible;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
   z-index: 30;
 }
   
 .services .layout{
    width: 100%;
    height: 100%;
 
    position: relative
    z-index
    5
 }
   
 .services .layout .content{
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 10;
 }
     
 .services .layout .content h1{
    color: white;
    font-size: 3rem;
    text-align: center;
 }
 
 .services .hero{
    height: 700px;
    max-height: 100vh;
    object-fit: cover;
    filter: brightness(70%);
 }
  
 .services .hero h1{
    text-align: center;
    width: 100%;
 }
 
 @media (max-width: 768px) {
    .services .hero {
      height: 60vh;
    } 
  } 
 
  /* -------------------------- */
 .service-list{
    padding: 4rem 0;
    background-color: #fbfbfb;
 }
 
  .service-list .head{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 
  .service-list .grid{
    display: flex;
    gap: 1rem;
  }
 
  .service-list .grid .content{
    width: 50%;
    height: 100%;
  }
  
  .service-list .grid .content h3{
    font-size: 1.8rem;
    color: #42946a;
    text-transform: uppercase;
  }
 
  .service-list .grid .content h4{
    font-size: 1.6rem;
    padding: 0.8rem 0;
  }
 
  .service-list .grid .content p{
    font-size: 1.2rem;
    line-height: 1.8rem;
    padding-bottom: 1rem;
  }
 
  .service-list .grid .img{
    width: 50%;
    height: 400px;
  }
 
  .service-list .grid .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* ---------------- */
  .services .development{
    height: 430px;
    background-color: #f5f5f5;
  }
  
  .services .development .grid{
    height: 100%;
  }
  
  .service-list.development .grid .content{
    width: 50%;
    height: 100%;
    padding-left: 1%;
    box-sizing: border-box;
  }
 
  .services .development .grid .img{
    width: 49%;
    height: 100%;
  }
 
  /* ---------------------- */
  .services .production{
    background-color: #f9f9f9;
  }
 
  @media only screen and (max-width: 768px){
   .service-list{
     padding: 2rem 0;
     background-color: #fbfbfb;
  }
 
   .service-list .grid{
     display: flex;
     flex-direction: column;
     gap: 0rem;
   }
 
   .service-list .grid .content{
     width: 100%;
     height: 100%;
   }
 
   .service-list .grid .img{
     width: 100%;
     height: 350px;
   }
 
   .service-list.development .grid .content{
     width: 100%;
     height: 100%;
     padding-left: 0%;
     box-sizing: border-box;
   }
  
   .services .development .grid{
     flex-direction: column-reverse !important;
   }
 
   .services .consultation .grid{
     flex-direction: column-reverse !important;
   }
 
  
   .services .development .grid .img{
     width: 100%;
     height: 350px;
   }
 
   .services .development{
     height: 100%;
     background-color: #f5f5f5;
   }
 
   .service-list .grid .content h3{
     font-size: 1.4rem !important;
     color: #42946a;
     text-transform: uppercase;
     /* text-align: center; */
   }
  
   .service-list .grid .content h4{
     font-size: 1.4rem !important;
     padding: 0.8rem 0;
     /* text-align: center; */
   }
 
   .service-list .grid .content p{
     font-size: 1rem;
     line-height: 1.4rem;
     padding-bottom: 1rem;
     text-align: left;
     word-break: break-word;
   }
  }



    .services{
      position: relative;
   }
   
   .services .goal {
     position: relative;
   
     background-color: #f5f5f5;
     background-image: url("https://ecothreadsepz.com/wp-content/uploads/2025/07/0A0A3741.jpg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
     height: 550px;
     overflow: visible;
   
     display: flex;
     justify-content: center;
     align-items: center;
   
     z-index: 30;
   }
     
   .services .layout{
      width: 100%;
      height: 100%;
   
      position: relative
      z-index
      5
   }
     
   .services .layout .content{
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      z-index: 10;
   }
       
   .services .layout .content h1{
      color: white;
      font-size: 3rem;
      text-align: center;
   }
   
   .services .hero{
      height: 700px;
      max-height: 100vh;
      object-fit: cover;
      filter: brightness(70%);
   }
    
   .services .hero h1{
      text-align: center;
      width: 100%;
   }
   
   @media (max-width: 768px) {
      .services .hero {
        height: 60vh;
      } 
    } 
   
    /* -------------------------- */
   .service-list{
      padding: 4rem 0;
      background-color: #fbfbfb;
   }
   
    .service-list .head{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
   
    .service-list .grid{
      display: flex;
      gap: 1rem;
    }
   
    .service-list .grid .content{
      width: 50%;
      height: 100%;
    }
    
    .service-list .grid .content h3{
      font-size: 1.8rem;
      color: #42946a;
      text-transform: uppercase;
    }
   
    .service-list .grid .content h4{
      font-size: 1.6rem;
      padding: 0.8rem 0;
    }
   
    .service-list .grid .content p{
      font-size: 1.2rem;
      line-height: 1.8rem;
      padding-bottom: 1rem;
    }
   
    .service-list .grid .img{
      width: 50%;
      height: 400px;
    }
   
    .service-list .grid .img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* ---------------- */
    .services .development{
      height: 430px;
      background-color: #f5f5f5;
    }
    
    .services .development .grid{
      height: 100%;
    }
    
    .service-list.development .grid .content{
      width: 50%;
      height: 100%;
      padding-left: 1%;
      box-sizing: border-box;
    }
   
    .services .development .grid .img{
      width: 49%;
      height: 100%;
    }
   
    /* ---------------------- */
    .services .production{
      background-color: #f9f9f9;
    }
   
    @media only screen and (max-width: 768px){
     .service-list{
       padding: 2rem 0;
       background-color: #fbfbfb;
    }
   
     .service-list .grid{
       display: flex;
       flex-direction: column;
       gap: 0rem;
     }
   
     .service-list .grid .content{
       width: 100%;
       height: 100%;
     }
   
     .service-list .grid .img{
       width: 100%;
       height: 350px;
     }
   
     .service-list.development .grid .content{
       width: 100%;
       height: 100%;
       padding-left: 0%;
       box-sizing: border-box;
     }
    
     .services .development .grid{
       flex-direction: column-reverse !important;
     }
   
     .services .consultation .grid{
       flex-direction: column-reverse !important;
     }
   
    
     .services .development .grid .img{
       width: 100%;
       height: 350px;
     }
   
     .services .development{
       height: 100%;
       background-color: #f5f5f5;
     }
   
     .service-list .grid .content h3{
       font-size: 1.4rem !important;
       color: #42946a;
       text-transform: uppercase;
       /* text-align: center; */
     }
    
     .service-list .grid .content h4{
       font-size: 1.4rem !important;
       padding: 0.8rem 0;
       /* text-align: center; */
     }
   
     .service-list .grid .content p{
       font-size: 1rem;
       line-height: 1.4rem;
       padding-bottom: 1rem;
       text-align: left;
       word-break: break-word;
     }
    }