/*
===============================================
	JOIN-US.CSS
	-----------
	- This CSS file is for join-us.
===============================================
*/

/* First Fold Section CSS */

body.joinus-page .first-fold-section .joinus-first-fold{
	position: relative;
	display: block;
	width: 100%;
	height: 50vh;
}

body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #31AAE1;
}

body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45%;
	height: 100%;
	padding: 0 4%;
	z-index: 2;
}

body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col.col-2{
	width: 55%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../../../../../../wp-content/uploads/2021/07/joinus-firstbg.jpg') center/cover no-repeat;
	background-color: rgba(0,0,0,0.2);
	cursor: pointer;
	z-index: 1;
}


body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col.col-2:before{
	position: absolute;
	content: '';
	bottom: 0;
	left: -20%;
	width: 40%;
	height: 30%;
	background: url('../../../../../../wp-content/uploads/2021/07/shape-2.svg') bottom center/contain no-repeat;
	z-index: -1;
}

body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col.col-2:after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F58931;
	opacity: 0.9;
	transform: scaleY(1);
	transform-origin: top center;
	transition: transform 0.55s cubic-bezier(.77,0,.175,1);
	z-index: 2;
}

body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .col-inner{
	position: relative;
	margin-top: 45px;
}

body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col.col-2.active:after{
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.55s cubic-bezier(.77,0,.175,1);
}

body.joinus-page .first-fold-section .main-heading h1{
	text-transform: initial;
	margin-bottom: 0px;
}

body.joinus-page .first-fold-section .main-heading h1 span{
	display: inline-block;
	padding-bottom: 12px;
	border-bottom: 5px solid #FDC62D;
}

body.joinus-page .first-fold-section .second-heading h2{
	font-weight: 400;
	line-height: 130%;
	margin-bottom: 25px;
	line-height: 125%;
	margin-top: 60px;
	transform: translateY(-60%);
	opacity: 0;
	transition: transform 0.55s cubic-bezier(.77,0,.175,1),
                opacity 0.55s cubic-bezier(.77,0,.175,1);
}

body.joinus-page .first-fold-section .main-cta{
	display: none;
	transform: translateY(-120%);
	opacity: 0;
	transition: transform 0.55s cubic-bezier(.77,0,.175,1),
                opacity 0.55s cubic-bezier(.77,0,.175,1);
}

body.joinus-page .first-fold-section .joinus-col.col-2.active .second-heading h2{   
    transform: translateY(0%);
	opacity: 1;
	transition: transform 0.55s cubic-bezier(.77,0,.175,1),
                opacity 0.55s cubic-bezier(.77,0,.175,1);
}

body.joinus-page .first-fold-section .joinus-col.col-2.active .main-cta{   
    transform: translateY(0%);
	opacity: 1;
	transition: transform 0.55s cubic-bezier(.77,0,.175,1),
                opacity 0.55s cubic-bezier(.77,0,.175,1);
}

/* Step Application CSS */

body.joinus-page .step-application-section{
	position: relative;
}

body.joinus-page .step-application-section:before{
	position: absolute;
	content: '';
	top: 68%;
	left: 0;
	width: 25vw;
	height: 25vw;
	background: url('../../../../../../wp-content/uploads/2021/07/shape1.svg') left center/contain no-repeat;
	z-index: -1;
}

body.joinus-page .step-application-section .step-application-heading h2{
	font-weight: 400;
}

body.joinus-page .step-application-section .step-row{
	display: flex;
	align-items: flex-start;
	padding: 0 4%;
	margin-bottom: 15px;
}

body.joinus-page .step-application-section .step-row:last-child{
	margin-bottom: 0px;
}

body.joinus-page .step-application-section .step-row .text-col,
body.joinus-page .step-application-section .step-row .image-col{
	width: 42%;
}

body.joinus-page .step-application-section .step-row .step-col{
	position: relative;
	width: 16%;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: hidden;
}

body.joinus-page .step-application-section .step-row .step-col h2{
	position: relative;
	background-color: #FFFFFF;
	margin-top: 110px;
	margin-bottom: 110px;
	padding-top: 5px;
	padding-bottom: 5px;
}

body.joinus-page .step-application-section .step-row .step-col:before{
	position: absolute;
	content: '';
	bottom: -60px;
	left: calc(50%);
	width: 4px;
	height: 200px;
	background: none;
	border-left: 2px dashed #f58931;
	transform: translateX(-50%);
	-webkit-animation: slideDash 1.5s infinite linear forwards;
    animation: slideDash 1.5s infinite linear forwards;
    z-index:-1;
}

body.joinus-page .step-application-section .step-row .step-col:after{
	position: absolute;
	content: '';
	top: 0%;
	left: calc(50%);
	width: 4px;
	height: 170px;
	background: none;
	border-left: 2px dashed #f58931;
	transform: translateX(-50%);
	-webkit-animation: slideDash 1.5s infinite linear forwards;
    animation: slideDash 1.5s infinite linear forwards;
    z-index:-1;
}


body.joinus-page .step-application-section .step-row img{
	text-align: center;
	max-width: 280px;
	border: 1px solid #ccc;
	margin-bottom: 10px;
	
}

@-webkit-keyframes slideDash {
    from {
        -webkit-transform: translateY( -20%);
    }
    to {
        -webkit-transform: translateY( 0%);
    }
}

@keyframes slideDash {
    from {
        -webkit-transform: translateY( -24%);
    }
    to {
        -webkit-transform: translateY( 0%);
    }
}


body.joinus-page .step-application-section .step-row.row-3 .step-col:before{
	display: none;
}

body.joinus-page .step-application-section .step-row .step-text h4{
	margin-bottom: 0px;
	line-height: 100%;
}

body.joinus-page .step-application-section .step-row .text-col .step-heading h2{
	margin-bottom: 10px;
}

body.joinus-page .step-application-section .step-row .step-no-heading h1{
	margin-bottom: 0px;
}

body.joinus-page .step-application-section .step-row .image-col .animated-icon-raw{
 	text-align: center;
}

body.joinus-page .step-application-section .step-row .image-col .animated-icon-raw lord-icon{
	width: 150px !important;
	height: 150px !important;
	background-color: #f9f9f9;
	border-radius: 50%;
	padding: 20px;
}

/* Smaller Screen Desktops */
@media only screen and (max-width: 1280px) {
    
}

/* Mid Large Screen Desktops */
@media only screen and (min-width: 1440px) {
    
}

/* Large Screen Desktops */
@media only screen and (min-width: 1920px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	/*  First Fold CSS */

    body.joinus-page .first-fold-section .second-heading h2{
    	margin-top: 10px;
    }
    
    /*  Steps Application CSS */

    body.joinus-page .step-application-section .step-row:last-child{
		margin-bottom: 40px;
	}
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

}

/* Mobile Devices */
@media only screen and (max-width: 765px) {
    
    /* First Fold CSS */

    body.joinus-page .first-fold-section .joinus-first-fold{
    	min-height: 70vh;
    }

    body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row{
    	flex-wrap: wrap;
    }

    body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col{
    	width: 100%;
    }

    body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col.col-1{
    	height: 50%;
    }

    body.joinus-page .first-fold-section .joinus-first-fold .joinus-fold-row .joinus-col.col-2{
    	height: 50%;
    	width: 100%;
    	background-position: top center !important;
    }

    body.joinus-page .first-fold-section .second-heading h2{
    	margin-top: -30px;
    	text-align: center;
    }

    /*  Application Steps CSS */

    body.joinus-page .step-application-section .step-row{
		flex-wrap: wrap;
    	padding: 0px;
    }

     body.joinus-page .step-application-section .step-row{
     	margin-top: 50px;
     }

	body.joinus-page .step-application-section .step-row .col{
		width: 100%;
	}

    body.joinus-page .step-application-section .step-row .text-col{
        width: calc(100%);
    }

    body.joinus-page .step-application-section .step-row .step-col{
    	position: relative;
    }

    body.joinus-page .step-application-section .step-row.row-2 .step-col{
    	right: auto;
    	left: 8px;
    }

    body.joinus-page .step-application-section .step-row .image-col{
    	padding-left: 15px;
    }

    body.joinus-page .step-application-section .step-row.row-2 .image-col{
    	padding-left: 0px;
    	padding-right: 0px;
    }

    body.joinus-page .step-application-section .step-row .step-col:before,
	body.joinus-page .step-application-section .step-row .step-col:after{
    	display: none;
    }

	body.joinus-page .step-application-section .step-row .step-col h2{
		margin-top: 30px;
		margin-bottom: 40px;
	}

    body.joinus-page .step-application-section .step-row .image-col .animated-icon-raw lord-icon{
    	height: 70px !important;
    	width: 70px !important;
    	padding: 8px;
    }

    body.joinus-page .step-application-section .step-row.row-2{
    	margin-top: 60px;
    }

    body.joinus-page .step-application-section .step-row.row-3{
    	margin-bottom: 60px;
    }


	

}