/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
Add your custom styles here
*/
#begin-main {position: relative;}
#begin-main h4 a {display: flex;align-items: center;justify-content: center;border-radius: 55.625px;background: #1E4EA2;width: 65px;height: 65px;cursor: pointer;}
#begin-main h4 a:hover {background: #FA9D1C;}
#begin-main #step1 .elementor-icon-box-content {display: flex;gap: 13px;}
#box-step #step2 p {padding-left: 66px;}
#begin-main #step3 .elementor-icon-box-content {flex-direction: column-reverse;display: flex;align-items: flex-end;}
#begin-main #step4 .elementor-icon-box-content {display: flex;align-items: self-start;gap: 25px;}
#box-step #step4 p {margin: -20px;}
#begin-main #step5 .elementor-icon-box-content {display: flex;justify-content: center;align-items: center;gap: 37px;}
#begin-main #step6 .elementor-icon-box-content {display: flex;flex-direction: row-reverse;gap: 45px;}
#box-step #step7 p {padding-left: 50px;}
#begin-main #step8 .elementor-icon-box-content {display: flex;flex-direction: column-reverse;gap: 26px;}
#box-step #step8 p {padding-left: 25px;}
#begin-main #step9 .elementor-icon-box-content {display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 30px;}
#begin-main #step10 .elementor-icon-box-content {display: flex;flex-direction: column;justify-content: center;align-items: center;}
#begin-main #step11 .elementor-icon-box-content {display: flex;gap: 20px;}
#box-step #step11 p {height: 0;padding-top: 10px;}
#step12 .elementor-icon-box-content {display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 15px;}
#begin-main #step13 .elementor-icon-box-content {display: flex;flex-direction: column-reverse;align-items: center;gap: 13px;}
#begin-main #step13 p {margin-left: -100px;}
#begin-main #step14 .elementor-icon-box-content {display: flex;flex-direction: column;gap: 0px;}
#begin-main #step14 .elementor-icon-box-content p {margin-left: -40px;}
#begin-main #step15 p {margin-left: -30px;margin-top: auto;}
#begin-main #step15 .elementor-icon-box-content {display: flex;flex-direction: column;gap: 0;}
#begin-main #step16 .elementor-icon-box-content {display: flex;flex-direction: row-reverse;gap: 30px;align-items: center;}
#begin-main #step17 .elementor-icon-box-content {justify-content: center;display: flex;flex-direction: column;align-items: center;}
#begin-main #step18 .elementor-icon-box-content {display: flex;flex-direction: column;align-items: center;}
#begin-main #step19 .elementor-icon-box-content {display: flex;flex-direction: row-reverse;align-items: end;gap: 12px;}
#begin-main #step19 p {position: relative;top: 30px;}
#begin-main #step20 .elementor-icon-box-content {display: flex;flex-direction: column;align-items: end;}





#box-step #step1 {left: 210px;top: -65px;position: absolute;}
#box-step #step2 {left: 200px;top: unset;position: absolute;bottom: 20px;}
#box-step #step3 {position: absolute;right: 160px;top: -10px;}
#box-step #step4 {position: absolute;right: 0px;top: 30px;}
#box-step #step5 {position: absolute;left: -40px;top: -70px;}
#box-step #step6 {position: absolute;right: 120px;top: 100px;}
#box-step #step7 {position: absolute;left: 140px;top: -20px;}
#box-step #stepbtn {position: absolute;top: 50px;left: -150px;}
#box-step #step8 {position: absolute;top: 50px;}
#box-step #step9 {position: absolute;top: -35px;left: 40px;right: 0;}
#box-step #step10 {position: absolute;top: 15px;right: 0;left: 370px;bottom: unset;}
#box-step #step11 {position: absolute;top: -30px;left: 280px;}
#box-step #step12 {position: absolute;top: -200px;bottom: unset;left: 0;right: 0;transform: translate(5%, 0);}
#box-step #step14 {position: absolute;top: -40px;left: 140px;}
#box-step #step13 {position: absolute;top: -30px;left: 100px;right: 0;}
#box-step #stepbtn2 {position: absolute;top: unset;left: 90px;bottom: 55px;}
#box-step #step15 {left: 20px;top: 0px;}
#box-step #step16 {position: absolute;top: -100px;right: 50px;}
#box-step #step17 {position: absolute;top: -50px;right: 100px;}
#box-step #step18 {left: -40px;top: 60px;}
#box-step #step19 {left: 0;position: absolute;right: 230px;top: -20px;}
#box-step #step20 {position: absolute;left: 90px;top: 60px;}
.main-box .e-con-inner {background-image: url(https://dev.webwiseagency.com/visual-sense/wp-content/uploads/2025/12/beginning-bg.png);background-position: center center;background-repeat: no-repeat;background-size: contain;}
#box-main2 .e-con-inner {background-image: url(https://dev.webwiseagency.com/visual-sense/wp-content/uploads/2025/12/messy-bg.png);
	background-position: center center;background-repeat: no-repeat;background-size: contain;}
#box-main3 .e-con-inner {background-image: url(https://dev.webwiseagency.com/visual-sense/wp-content/uploads/2025/12/lets-bg.png);background-position: center center;background-repeat: no-repeat;}
html {overflow-x: hidden;}
body {overflow-x: hidden;}
.dialog-lightbox-widget {background: linear-gradient(45deg, #1E4EA2, #1d4fa2eb) !important;}
.elementor-popup-modal .dialog-close-button {
	top: -40px !important;
	background: #fff !important;
	padding: 7px !important;
	right: 1px !important;
}
.elementor-popup-modal p strong {
	color: #1E4EA2;
}
li::marker {
	color: rgb(30, 78, 162);
}

.resp-boxes-wrap { position: relative; } 
.resp-boxes-wrap::after { content: ""; height: calc(100% - 100px); border-right: 1px dashed #1e4ea2; position: absolute; inset: 0 0 0 0; margin: auto; width: fit-content; transform: translateX(50%); }
.box-step-mobile {max-width:200px!important;margin:auto;background:#fff; position: relative; z-index: 2; }
.messy-resp .box-step-mobile { background:#F0F5FB;}
.box-step-mobile .elementor-icon-box-title {display: flex; align-items: center; justify-content: center; border-radius: 55.625px; background: #1E4EA2; width: 40px; height: 40px; cursor: pointer; margin: auto; margin-bottom: 10px !important;}



@media screen and (max-width: 1366px) {
	#step12 .elementor-icon-box-content {gap: 10px;}
	#box-step p {font-size: 18px;}
	#box-step #step1 {left: 170px;top: 85px;}
	#box-step #step2 {left: 160px;bottom: -120px;}
	#box-step #step3 {right: 160px;top: 70px;}
	#box-step #step4 {right: 0px;top: 75px;}
	#box-step #step5 {left: -30px;top: -30px;}
	#box-step #step6 {right: 60px;top: 80px;}
	#box-step #step7 {left: 60px;top: -30px;}
	#box-step #stepbtn {top: 10px;left: -150px;}
	#box-step #step8 {top: -40px;}
	#box-step #step9 {top: -105px;left: 40px;}
	#box-step #step10 {top: -125px;right: 0;left: 300px;bottom: unset;}
	#box-step #step11 {top: -80px;
        left: 220px;
        width: 100%;}  
	#box-step #step12 {        top: -130px;
        right: 140px;transform: translate(10%, 0);}
	#box-step #step13 {top: -45px;left: 120px; margin-left: 0px;}    
	#box-step #step13 p {margin-left: 0px;}
	#box-step #step14 {position: absolute;top: -10px;}    
	#box-step #step16 {position: absolute;        top: -60px;
        right: 150px;}   
	#box-step #step17 {top: -40px;right: 50px;}    
	#box-step #step18 {left: -110px;top: 0px;}
	#box-step #step19 {right: 130px;top: -80px;}   
	#box-step #step20 {left: -10px;top: 0px;}    
	#box-step #stepbtn2 {        left: 0px;
        bottom: 50px;
        width: 460px;}
	.begin-ht {
		min-height: 1200px;
		justify-content: space-between;
	}
	.begin-ht-2 {
		min-height: 690px;
		justify-content: space-evenly;
	}
	#box-main3 {
		margin-bottom: 100px;
	}
}

@media screen and (max-width: 1036px) {
	#box-step #step12 {
        top: -110px;
        right: 0;
        transform: translate(10%, 0);
    }
	#step12 .elementor-icon-box-content {gap: 15px;}
	#begin-main h4 a {width: 55px;height: 55px;}
	#box-step #step1 {left: 180px;top: 95px;width: 100%;}
	#box-step #step2 {left: 150px;bottom: -90px;}
	#box-step #step3 {right: 170px;top: 70px;}
	#box-step #step8 {top: -50px;}
	#box-step #step9 {top: -100px;}
	#box-step #step10 {top: -120px;}
	#box-step #stepbtn2 {left: 30px;bottom: 56px;width:auto !important;}
}
@media screen and (max-width: 1036px) {
	#box-step p {font-size: 16px;}
	#box-main3 .e-con-inner {background-size: contain;}
	.begin-ht {min-height: 840px;justify-content: space-between;}
	.begin-ht-2 {min-height: 640px;justify-content: space-evenly;}    
	#begin-main h4 a {width: 40px;height: 40px;}
	#box-step #step1 {left: 120px;top: 55px;width: 100%;}
	#box-step #step2 {left: 100px;bottom: -120px;}
	#box-step #step3 {right: 80px;top: 25px;}
	#box-step #step5 {left: -30px;top: -30px;}    
	#box-step #step6 {right: 60px;top: 80px;}    
	#box-step #step7 {left: 60px;top: -30px;}    
	#box-step #step8 {top: -50px;right: -40px;}
	#box-step #step9 {top: -75px;}
	#box-step #step10 {top: -80px;left: 200px;}
	#box-step #stepbtn {top: 0px;left: -60px;}
	#box-step #step11 {top: -10px;left: 160px;width: 100%;}  
	    #box-step #step13 {
        top: -25px;
        left: 60px;
    }
	#box-step #step14 {position: absolute;top: -10px;}   
	#box-step #stepbtn2 {left: 30px;bottom: 56px;}
	#box-step #step16 {top: -60px;right: 30px;} 
	#box-step #step15 {left: 20px;top: 0px;}
	#box-step #step17 {top: -40px;right: 50px;}  
	#box-main3 #begin-main {min-height: 330px;}
	#box-step #step18 {left: -60px;top: 13px;}
	#box-step #step19 {right: 50px;top: -40px;}   
	#box-step #step20 {left: 80px;top: 0px;}  
	#box-main3 {margin-bottom: 40px;}
	#begin-main #step20 .elementor-icon-box-content {align-items: center;}

	#begin-main #step14 .elementor-icon-box-content {gap: 10px}
	#begin-main #step15 .elementor-icon-box-content {gap: 10px;}    
}

@media screen and (max-width: 768px) {
	#box-step p {font-size: 16px;}
	#box-main3 .e-con-inner {background-size: contain;}
	.begin-ht {min-height: 840px;justify-content: space-between;}
	.begin-ht-2 {min-height: 640px;justify-content: space-evenly;}    
	#begin-main h4 a {width: 40px;height: 40px;}
	#box-step #step1 {left: 120px;top: 55px;width: 100%;}
	#box-step #step2 {left: 100px;bottom: -90px;}
	#box-step #step3 {right: 80px;top: 25px;}
	#box-step #step5 {left: -30px;top: -30px;}    
	#box-step #step6 {right: 60px;top: 80px;}    
	#box-step #step7 {left: 60px;top: -30px;}    
	#box-step #step8 {top: -50px;right: -40px;}
	#box-step #step9 {top: -75px;}
	#box-step #step10 {top: -80px;left: 200px;}
	#box-step #stepbtn {top: 0px;left: -60px;}
	#box-step #step11 {top: -10px;left: 160px;width: 100%;}  
	#box-step #step13 {top: -25px;left: 120px;} 
	#box-step #step14 {position: absolute;top: -10px;}   
	#box-step #stepbtn2 {left: 30px;bottom: 56px;}
	#box-step #step16 {top: -60px;right: 30px;} 
	#box-step #step15 {left: 20px;top: 0px;}
	#box-step #step17 {top: -40px;right: 50px;}  
	#box-main3 #begin-main {min-height: 330px;}
	#box-step #step18 {left: -60px;top: 13px;}
	#box-step #step19 {right: 50px;top: -40px;}   
	#box-step #step20 {left: 80px;top: 0px;}  
	#box-main3 {margin-bottom: 40px;}
	#begin-main #step20 .elementor-icon-box-content {align-items: center;}

	#begin-main #step14 .elementor-icon-box-content {gap: 10px}
	#begin-main #step15 .elementor-icon-box-content {gap: 10px;}    

	.main-box .e-con-inner, #box-main2 .e-con-inner, #box-main3 .e-con-inner {background-image:none;}
	.dialog-message { height: 60vh !important;}
}



.popup-navigation {
    display: inline-flex;
    align-items: center;
    width: 100%;
    position: absolute;
    justify-content: space-between;
    bottom: -60px;
    padding: 0 15px;
}

.popup-navigation button {
    color: #fff;
    border: 1px solid #fff;
}

.popup-navigation button:hover {
    background: #fff;
    color: #000;
}