/*
Theme Name: Hello Biz Child
Theme URI: https://elementor.com/products/hello-biz/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description: Hello Biz is a free, user-friendly Hybrid WordPress Theme that was crafted for seamless integration with the Elementor site builder and tailored specifically for business websites. Perfect for beginners, but far from limited to just them, it features a dedicated beginner-oriented “Home” screen to simplify and streamline the web-building process. Hello Biz also integrates with Elementor’s premium features, giving you access to tools like AI, and accessibility enhancements in one place. Whether launching a startup site or refining a company portfolio, Hello Biz offers a solid, responsive foundation for all web creators. Report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team validates, triages, and handles vulnerabilities. Report here: https://patchstack.com/database/wordpress/theme/hello-biz/vdp.
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Template: hello-biz
Version: 1.0.0
*/
/* custom styles */

/* Make first section fixed at the top */
.top-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.top-slider.released {
  /* position handled by JS to prevent jump */
}

.next-section {
  margin-top: 100vh;
}
.single-service-sec{
    display: flex;
    background: #F4F4F4;
    padding: 20px 80px;
    border-top: 1px solid #000;
    border-radius: 12px;
    min-height: 200px;
    align-items: center;
    gap:20px;
}
.single-service-sec:hover{
    background-color: #166375;
}
.service-number-container{
    width: 5%;
}
.service-details-container{
    width: 45%;
    display:flex;
    position: relative;
    align-items: center;
    gap:10px;
}
.service-excerpt-container{
    width: 30%;
}
.service-btn-container{
    width: 20%;
    justify-content: flex-end;
    display: flex;
}
.service-title-sec, .service-img-sec{
    z-index: 1;
    transition: width 2s ease, visibility 1s ease;
}
.service-img-sec {
    max-width: 0 !important;
    overflow: hidden;
    visibility: hidden;
    transition: max-width 2s ease, visibility 1s ease;
}
.service-video-sec{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 236px;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.single-service-sec:hover .service-video-sec{
    opacity: 1;
}
.single-service-sec:hover .service-img-sec{
    max-width: 100% !important;
    visibility: visible;
}

.single-service-sec:hover .service-img-sec img {
    opacity: 1;
    transform: scale(1);
}

.service-img-sec img {
    width: 100%;
    height: auto;
    opacity: 0;
    transform: scale(0.3);
    transform-origin: center left;
    transition: opacity 2s ease, transform 2s ease;
    object-fit: cover;
}
.single-service-sec:hover .service-title-sec h2 {
    margin-left: 20px;
    transform: translateX(5px);

}
.service-title-sec h2 {
    margin-left: 10px;
    transition: margin-left 2s ease, transform 2s ease;
}
.single-service-sec .service-number-container h2, .single-service-sec .service-title-sec h2 a{
    font-family: "Urbanist", Sans-serif;
    font-weight: 500;
    color: #001736;
}
.single-service-sec .service-number-container h2{
    font-size: 24px;
}
.single-service-sec .service-title-sec h2 a{
    font-size: 30px;
}
.single-service-sec .service-excerpt-container{
    font-family: "Inter", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}
.single-service-sec .service-btn-container .service-btn{
        background-color: #00000000;
    font-family: "Inter", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    color: #ffffff;
    display: inline-block;
    padding: 10px 60px 10px 0 !important;
    background: url(https://wasserkraft.justgetvisible.com/wp-content/uploads/2025/07/down-arr.svg) no-repeat;
    background-position: center right;
    background-size: 35px;
    opacity: 0;
    display: inline-block;
    position: relative;
}
.single-service-sec .service-btn-container .service-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://wasserkraft.justgetvisible.com/wp-content/uploads/2025/07/green-btn-hover-bg.png) no-repeat center right;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
    z-index: 1;
    background-size: 35px;
}
.single-service-sec .service-btn-container .service-btn:hover::after {
    transform: scaleY(1);
}

.single-service-sec:hover .service-number-container h2, .single-service-sec:hover .service-excerpt-container{
    color: #ffffff;
}
.single-service-sec:hover .service-title-sec h2 a{
    color: #00FFD6;
}
.single-service-sec:hover .service-btn-container .service-btn{
    opacity: 1;
}

@media only screen and (min-width: 768px){
    .single-service-sec.desk-service{
        display: flex;
    }
    .single-service-sec.mobile-service{
        display: none;
    }
}
@media only screen and (max-width: 767px){
    .single-service-sec.desk-service{
        display: none;
    }
    .single-service-sec.mobile-service{
        display: flex;
    }
    .single-service-sec{
        padding: 20px;
        align-items: start;
    }
    .service-number-container {
    width: 20%;
}
.service-details-container {
    width: 80%;
    flex-direction: column;
    align-items: start;
}

.single-service-sec .service-btn-container .service-btn{
    opacity: 1;
    color: #000000;
}
.single-service-sec .service-number-container h2, .single-service-sec .service-title-sec h2 a{
    font-size: 20px;
}
.single-service-sec .service-title-sec h2{
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 24px;
}
.service-title-sec h2 {
    margin-left: 0;
    transition: none;
}
.service-excerpt-container, .service-btn-container{
    width: 100%;
}
.service-btn-container{
    margin-top: 30px;
}
.single-service-sec:hover .service-title-sec h2 {
    margin-left: 0;
    transform: none;
}
.single-service-sec:hover .service-title-sec h2 a {
    color: #ffffff;
}
.single-service-sec:hover .service-btn-container .service-btn {
    color: #fff;
}
}