/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
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.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.3.0.1743768366
Updated: 2025-04-04 12:06:06

*/


 @font-face {
    font-family:'SF Pro Display';
   src:url('./fonts/SFPRODISPLAYREGULAR.woff') format('woff'),
     url('./fonts/SFPRODISPLAYREGULAR.ttf') format('truetype');
}

@font-face {
    font-family:'SF Pro Display Thin';
    src: url('./fonts/SF-Pro-Display-Thin.woff') format('woff');
}
@font-face {
    font-family:'SF Pro Display light';
    src: url('./fonts/SF-Pro-Display-Light.woff') format('woff'); 
}


.elementor-button-content-wrapper span.elementor-button-text {
		font-family: 'SF Pro Display' !important;
}

.built-sub-text-b{
	font-family:'SF Pro Display light' !important;
letter-spacing:0.5px;
	
}

.banner-top-text .elementor-button-content-wrapper .elementor-button-text{
	font-family: 'SF Pro Display' !important;
}
div{
	  font-family: 'SF Pro Display' !important;
}
h2.elementor-heading-title.elementor-size-default {
	   font-family: 'SF Pro Display' !important;
}
h2{
	font-family: 'SF Pro Display' !important;
}
h1{
font-family:'SF Pro Display'!important;
}
h3{
	 font-family:'SF Pro Display' !important;
}
body{
font-family:'SF Pro Display'!important;
	    font-style: normal;
}
p{
font-family: 'SF Pro Display' !important;
	}
elementor-widget-container{
	font-family:'SF Pro Display' !important;
	}
p.elementor-image-box-description {
		font-family:'SF Pro Display' !important;
	}

/*css for mobile btn   */
button.waitlist-submit-btn.btn-goal-m {
	width: 137px;
}
input.waitlist-email-input.goal-page-m {
    background: black;
}
span.wpcf7-spinner {
    position: absolute;
    top: 20px;
}
    


/*end css for mobile btn  */
/*css for btn color  */
.waitlist-submit-btn:focus{
	background: #6366F1;
}
.email-filed-q .wpcf7-form-control-wrap span.wpcf7-not-valid-tip {
    position: absolute;
    top: 44px;
}
.wpcf7 form.invalid .wpcf7-response-output{
	border: none;
	align-items: center;
    justify-content: center;
    display: flex
;
    color: white;
}
.wpcf7 form.sent .wpcf7-response-output {
   border: none;
    color: white;
    display: flex
;
    justify-content: center;
}
[type=submit]:focus{
	background: #6366F1;
}


/*css for stiky card  */
/* Container styles (if needed) */
.elementor-container.scroll-cont {
    position: relative;
    padding-top: 50px; /* Adjust for spacing */
}

/* Sticky effect for the first card */
.first-card {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 110px; /* Distance from the top when it starts sticking */
    z-index: 1;
    margin-bottom: 20px; /* Space between the cards */
    padding: 20px;
    
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Sticky effect for the second card */
.second-card {
    position: -webkit-sticky;
    position: sticky;
    top: 110px; /* This can be adjusted based on your needs */
    z-index: 2; /* Lower z-index to go behind the first card */
    margin-bottom: 20px;
    padding: 20px;
   
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Sticky effect for the third card */
.third-card {
    position: -webkit-sticky;
    position: sticky;
    top:110px; /* Distance from the top when it starts sticking */
    z-index: 3; /* Lower z-index to go behind other cards */
    margin-bottom: 20px;
    padding: 20px;
   
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Sticky effect for the fourth card */
.fourth-card {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Distance from the top when it starts sticking */
    z-index: 4; /* Lower z-index to go behind other cards */
    margin-bottom: 20px;
    padding: 20px;
  
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Add focus effect when the card becomes sticky (higher z-index) */
.first-card.sticky-visible,
.second-card.sticky-visible,
.third-card.sticky-visible,
.fourth-card.sticky-visible {
    z-index: 10; /* Bring it to the front */
    transform: scale(1.05); /* Slightly enlarge the card */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Enhance shadow */
}

/*end css for stiky card  */






input.custom-email-input {
    background: none;
    border: none;
    color: white;
}
.email-filed-q {
    display: flex
;
    align-items: center;
	gap:66px;
}
button.custom-submit-btn:focus {
	    background-color:#6366F1;
}


.email-container {
	    display: flex
;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background:#000;
    width: 100%;
    max-width:42%;
    border-radius: 99px;
    border: 1px soild;
    border: 1px solid;
	margin:0px auto;
	height:60px;
	position:relative;
}
/* css for footer form */
input.waitlist-name-input {
	    width: 266px;
    border-radius: 99px;
	border: 1px solid #252525;
}
input.waitlist-email-input {
    width: 329px;
    border-radius: 99px;
		border: 1px solid #252525;
}



/* Center the form */
.waitlist-form-container {
    display: flex;
  
    align-items: center;
    gap: 15px; /* Space between sections */
    width: 100%;
    max-width:800px;
    margin: 0 auto;
}

/* Style each section */
.waitlist-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Input Fields */
.waitlist-name-input,
.waitlist-email-input {
    width: 310px;
    height: 57px;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    font-size: 14px;
    text-align: center;
    background: transparent; /* Removes white background */
    color: white; /* Makes text white */
    outline: none; /* Removes default focus outline */
    padding: 0 15px; /* Add padding */
}

/* Placeholder Text Color */
.waitlist-name-input::placeholder,
.waitlist-email-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
	text-align: left;/* Light white for better readability */
}

/* Button Styling */
.waitlist-submit-btn {
    background: #6366F1;
    width: 163px;
    height: 37px;
    border-radius: 9999px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-align: center;

    /* Box Shadows */
    box-shadow: 
        0px 0px 0px 1px #4338CA99, 
        0px 1px 3px 0px #312E8166, 
        0px 1px 1px 0px #818CF8 inset;

    transition: background 0.3s ease-in-out;
}

.waitlist-submit-btn:hover {
    background: #4f46e5;
}
/*end   */





button.waitlist-submit-btn:focus {
	background: #6366F1;
}


.custom-name-input,.custom-email-input {
    width: 481px;
    height: 57px;
    border-radius: 9999px;
    border-width: 1px;
    padding: 10px 20px;
    font-size: 16px;
}

.custom-submit-btn {
    width: 195px;
    height: 39px;
    border-radius: 9999px;
    border: none;
   background: #6366F1;
 /* Button color */
    color: white;
    font-size: 16px;
    font-weight:normal;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
   
}

.custom-submit-btn:hover {
 background: #6366F1;
; /* Slightly darker on hover */
}

/*  */
.built-sec-text h3{
	padding-top:0px;
	margin-top:-1px;
	
}
.track-goal-text h3{
	padding-top:0px;
	margin-top:0px;
}


/*css for email form  */

input.custom-email-input:focus-visible {
    outline: none;  
    box-shadow: none; 
}
input.custom-email-input{
	width:300px;
}
.send-btn-fied p{
	
	padding:0px;
	margin:0px;
}
/* media query */
  @media screen and (max-width: 360px) {
        .email-container {
        max-width:20% !important;
    }
  }


  @media(max-width: 579px) {
      input.custom-email-input {
    width: 220px;
}
.email-container {
	max-width: 72%
}
	.custom-email-input {
		padding:0px !important;
	}
}


  @media (max-width: 580px) {
    input.custom-email-input {
    width: 220px;
}
.email-container {
	max-width:72%
}
	.custom-email-input {
		padding:0px !important;
	}
		.waitlist-form-container {
    display: flex;
			flex-direction:column;
			}
		input.custom-email-input {
        width: 116px !important;
    }
		    input.waitlist-name-input {
        width: 284px !important;
    }
  }

@media(max-width:768px){
	input.waitlist-email-input {
		width: 284px;}
	input.waitlist-name-input {
		width: 196px;}
	
}
@media(max-width: 992px) {
    
input.custom-email-input {
    width: 220px;
}
.email-container {
	max-width: 72%!important
}
	.custom-email-input {
		padding:0px !important;
	}
}



  @media(max-width: 1500px) {
    	.email-container {
			
		} 
  }

  @media(max-width:1024px) {
    	.email-container {
				    max-width: 62%;
			
		} 
  }

@media (max-width: 1040px) and (min-width: 1025px) {
	input.custom-email-input {
    width: 241px;
}
	.email-container{
		 max-width: 55%;
		
	}
}