/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


.hpi-before-circle:before {
    content: "";
    background: #d6df2b;
    width: 15px;
    height: 15px;
    position: absolute;
    left: -25px;
    top: 6px;
    border-radius: 50%;
}
.hpi-popup,
.hpi-popup > .elementor-element {
    position: static;
}
.hpi-close,
.plus-icon {
    cursor: pointer;
}
.active-popup .plus-icon {
    transform: rotate(45deg);
}
/*
.hpi-popup-model {
    opacity: 0;
    visibility: hidden;
}
.open-popup .hpi-popup-model {
    opacity: 1;
    visibility: visible;
}*/

.hpi-popup-model-wrapper {
	display: none !important;
}
html:has(.open-popup),
.hpi-team-list-wrapper, 
body:has(.hpi-projects-list-wrapper) {
    overflow-x: hidden !important;
}
.hpi-team-list-wrapper .elementor-grid,
.hpi-projects-list-wrapper .elementor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 !important;
    margin: 0 -15px;
}
.hpi-team-list-wrapper .elementor-grid .team-member {
    width: calc(20% - 30px);
    margin: 0 15px 30px;
}
.hpi-projects-list-wrapper .elementor-grid .e-loop-item {
	width: calc(33.33% - 30px);
    margin: 0 15px 30px;
}
.hpi-team-list-wrapper .elementor-grid .hpi-popup-model-clone,
.hpi-projects-list-wrapper .elementor-grid .hpi-popup-model-clone {
    width: 100%;
    margin: 0 0 20px;
    position: relative;
	display: none;
}
.hpi-team-list-wrapper .elementor-grid .hpi-popup-model-clone:before,
.hpi-team-list-wrapper .elementor-grid .hpi-popup-model-clone:after,
.hpi-projects-list-wrapper .elementor-grid .hpi-popup-model-clone:before,
.hpi-projects-list-wrapper .elementor-grid .hpi-popup-model-clone:after {
    content: "";
    background: #fff;
    left: -50vw;
    width: 100%;
    top: 0;
    position: absolute;
    height: 100%;
}
.hpi-team-list-wrapper .elementor-grid .hpi-popup-model-clone:after,
.hpi-projects-list-wrapper .elementor-grid .hpi-popup-model-clone:after {
    left: auto;
    right: -50vw;
}
.open-popup .hpi-team-list-wrapper .elementor-grid .hpi-popup-model-clone,
.open-popup .hpi-projects-list-wrapper .elementor-grid .hpi-popup-model-clone {
    display: block;
}
.hpi-wrap-btn .elementor-widget-html {
    right: 28px !important;
    bottom: 28px !important;
}
.hpi-popup-project .elementor-widget-text-editor h2,
.hpi-popup-project .elementor-widget-text-editor h3 {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 15px;
}
.hpi-popup-project .elementor-widget-text-editor p {
    font-size: 18px;
}
.hpi-popup-project .elementor-widget-button {
    padding-top: 15px !important;
}
.hpi-popup-project .elementor-widget-button .elementor-button {
    padding: 0 !important;
    background-color: transparent !important;
    font-size: 14px !important;
}
.hpi-popup-project .elementor-heading-title {
    font-weight: 600;
}
.hpi-wrap-btn {
    min-height: 320px;
}
.parent-plus-icon-event {
    cursor: pointer;
}
.hpi-projects-list-wrapper .parent-plus-icon-event {
    padding: 0;
}
.hpi-heading-dots span {
    position: relative;
}


@media (min-width:1025px) {
    
	.hpi-heading-dots span:after {
		content: "";
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #b7cf2f;
		display: inline-block;
		position: relative;
		top: 0;
		right: -10px;
	}

	.hpi-right-dots:after {
		content: "";
		position: absolute;
		right: -39px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #b7cf2f;
		bottom: 40px;
		z-index: 99;
		top: auto;
	}
    .hpi-hide-animate {
        position: relative;
        z-index: 99;
    }
	body .hpi-right-dots:before {
		content: "" !important;
		display: block !important;
		position: absolute;
		right: -32px;
		height: 35px;
		width: 2px;
		background: #f2f2f2;
		left: auto;
		top: auto;
		z-index: 99 !important;
		bottom: 30px;
	}
	
	body .hpi-white-dots:before {
		background: #fff;
	}
	
	.hpi-spaces.hpi-right-dots:before {
		bottom: 30px;
		right: -80px;
	}
	.hpi-spaces.hpi-right-dots:after {
		right: -88px;
	}
	.hpi-right-dots.hpi-right-little:after {
		right: -77px;
	}
	.hpi-right-dots.hpi-right-little:before {
		right: -70px;
	}
    .hide-verticle-dot{
        opacity: 0 !important;
        transition:opacity 0.2s ease;
    }
    /* =========================
       WRAPPER
    ========================= */
    .hpi-line-wrap {
		position: absolute;
		top: 228px;
		left: 235px;
		right: 40px;
		height: 100vh;
		z-index: 10;
		pointer-events: none;
	}

    .admin-bar .hpi-education-studio {
        top: 230px;
    }
    
    .hpi-top-padding {
        padding-top: 145px !important;
    }
    
    .hpi-education-studio {
        left: 280px;
        top: 230px;
    }
    
    .hpi-bottom-line{
        position:absolute;
        right:0;
        bottom:0;
        width:40px; /* horizontal length */
        height:2px;
        background:#b7cf2f;
        opacity:0;
    }
    
    .hpi-bottom-line-fill{
        position:absolute;
        inset:0;
        background:#b7cf2f;
        transform:scaleX(0);
        transform-origin:left center;
    }
    
    .hpi-bottom-dot{
        position:absolute;
        right:0;
        top:50%;
        width:16px;
        height:16px;
        border-radius:50%;
        background:#b7cf2f;
        transform:translate(-50%, -50%);
    }
    
    /* =========================
       TOP HORIZONTAL LINE
    ========================= */
    .hpi-top-line{
        position: relative;
        width: 100%;
        height: 2px;
    }
    
    /* BG LINE */
    .hpi-top-line::before{
        content: "";
        position: absolute;
        inset: 0;
    }
    
    /* ACTIVE LINE */
    .hpi-top-line-fill{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #b7cf2f;
    
        transform: scaleX(0);
        transform-origin: left center;
    }
    
    /* HORIZONTAL DOT */
    .hpi-top-dot{
        position: absolute;
        top: 50%;
        left: 0;
    
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #b7cf2f;
    
        transform: translate(-50%, -50%);
    }
    
    /* =========================
       VERTICAL LINE
    ========================= */
    .hpi-vertical-line{
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 100vh;
        opacity: 0;
    }
    
    /* BG LINE */
    .hpi-vertical-line::before{
        content: "";
        position: absolute;
        inset: 0;
    }
    
    /* ACTIVE LINE */
    .hpi-vertical-line-fill{
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background: #b7cf2f;
        transform: scaleY(0);
        transform-origin: top center;
    }
    
    /* VERTICAL DOT */
    .hpi-vertical-dot{
        position: absolute;
        top: 0;
        left: 50%;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #b7cf2f;
        transform: translate(-50%, -50%);
    }

}

@media (max-width:1366px) {
	
	.hpi-spaces.hpi-right-dots:before {
		bottom: 30px;
		right: -32px;
	}
	.hpi-spaces.hpi-right-dots:after {
		right: -39px;
	}
	
}

@media (max-width:1024px) {
	
	.hpi-team-list-wrapper .elementor-grid .team-member,
	.hpi-projects-list-wrapper .elementor-grid .e-loop-item {
		width: calc(50% - 30px);
		margin: 0 15px 30px;
	}
	.hpi-team-list-wrapper .elementor-grid .hpi-popup-model-clone ,
	.hpi-projects-list-wrapper .elementor-grid .hpi-popup-model-clone {
		width: 100%;
		margin: 0 0 20px;
	}
	.hpi-before-circle:before {
		left: -15px;
		width: 10px;
		height: 10px;
	}
	.hpi-close img {
		width: 20px;
	}
	
}

@media (max-width:767px) {
	
	.hpi-team-list-wrapper .elementor-grid .team-member,
	.hpi-projects-list-wrapper .elementor-grid .e-loop-item {
		width: 100%;
		margin: 0 15px 30px;
	}
	.hpi-popup-project .elementor-widget-heading {
		margin-bottom: 0 !important;
	}
	.hpi-popup-model {
		height: 70dvh;
		overflow-y: auto;
	}
	
}