@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*
font-family: 'Inter', sans-serif;
font-family: "Poppins", sans-serif;
*/
:root {
    --primary: #42AD79;
    --white: #FFFFFF;
    --black: #000000;
    --text: rgba(0,0,0,0.7);
}

body{ padding:0; margin:0; font-size:16px; color: var(--text); font-family: 'Inter', sans-serif; overflow-x: hidden;}
a, button{outline:none !important; text-decoration:none; box-shadow:none; transition:all .4s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%; height:auto;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important; font-family: "Poppins", sans-serif;}
input, select, textarea, button{ outline:none !important; box-shadow:none;}
input, textarea, select{ /*-moz-appearance: none; -webkit-appearance: none;*/ box-shadow:none !important;}

.container{ width:90%; max-width:1560px; margin:0 auto; padding:0;}
.container.big{ max-width: 1720px;}

.btns{ margin: 0; padding: 10px 20px; color: #1E1E1E; background: #60CB97; border-radius: 15px; display: inline-flex; border: none; justify-content: center; font-size: 16px; font-weight: 400; position: relative; overflow: hidden; z-index: 2;}
.btns::before{ content: ""; position: absolute; top: 0; left: 0; background: var(--black); height: 0; width: 0; border-radius: 15px; transition:all .4s ease-in-out; z-index: -1;}
.btns:hover::before{ width: 100%; height: 100%;}
.btns:hover{ color: var(--white);}
.btns.mini{ font-size: 16px;}

.main_title{ margin: 0 0 20px; padding: 0; font-size: 30px; font-weight: 600; color: var(--black);}
.main_title small{ margin-bottom: 10px; display: block; font-size: 16px; font-weight: 400; color: var(--primary);}
.main_title.center{ text-align: center;}
.global_title{ margin: 0 0 20px; padding: 0; font-size: 26px; font-weight: 600; color: var(--black);}
.global_title.center{ text-align: center;}

p{ font-size: 16px; font-weight: 400; color: var(--text);}

/*===================
 		HEADER 
 ===================*/
header{ width:100%; padding: 20px 0; margin:0; position:absolute; top:0; z-index:9999;}
header .navbar{ margin:0; padding:0;}
header .navbar-brand{ margin:0; padding:0;}
header .navbar-light .navbar-nav{ gap: 65px;}
header .navbar-light .navbar-nav .nav-item{ margin:0;}
header .navbar-light .navbar-nav .nav-link{ margin:0; padding:0; font-weight: 400; font-size: 16px; color: rgba(0,0,0,0.7);}
header .navbar-light .navbar-nav .nav-link:focus, header .navbar-light .navbar-nav .nav-link:hover{ color: var(--primary);}
header .navbar-light .navbar-nav .nav-link.active, header .navbar-light .navbar-nav .show > .nav-link{ color: var(--primary);}


/* HEADER STICKY */
header.sticky{ padding:10px 0; position:fixed; background: var(--white); box-shadow:0 5px 5px rgba(0,0,0,0.1); z-index:999 !important; animation:slide-down 0.4s;}

@keyframes slide-down{
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}


/*===================
 		FOOTER 
===================*/
.footer_sec{ margin: 0; padding: 23px 0 0; background: #60CB97;}
.footer_sec .ftr_top{ margin: 0; padding: 0 0 40px; display: flex; gap: 50px; justify-content: space-between; align-items: center;}
.footer_sec .ftr_top figure{ margin: 0; padding: 0;}
.footer_sec .ftr_top .right_contact{ margin: 0; padding: 0; display: flex; gap: 35px; flex-wrap: wrap;}
.footer_sec .ftr_top .right_contact li{ margin: 0; padding: 0; display: flex; gap: 14px; align-items: center;}
.footer_sec .ftr_top .right_contact li span{ font-size: 17px; font-weight: 400; color: var(--white);}
.footer_sec .ftr_top .right_contact li span a{ color: var(--white);}.footer_sec .ftr_top .right_contact li span a:hover{ color: var(--black);}
.footer_sec .ftr_top .right_contact li img{ filter: brightness(0) invert(1); max-width: 23px;}
.footer_sec .copyright_info{ margin: 0; padding: 18px 0 16px; display: flex; gap: 50px; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.5);}
.footer_sec .copyright_info p{ margin: 0; padding: 0; font-size: 17px; color: var(--white); display: flex; gap: 90px;}
.footer_sec .copyright_info p a{ color: var(--white);}
.footer_sec .copyright_info p a:hover{ color: var(--black);}

/*=================================
 		SECTION START HERE 
=================================*/
section{ padding:0; margin:0;}
.hero_sec{ margin: 0; padding: 160px 0 60px; position: relative; background: linear-gradient(-20deg, rgba(217,247,232,1) 0%, rgba(255,255,255,1) 100%);}
.hero_sec::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/hero_curve.png) center center no-repeat; background-size: 100% 100%;}
.hero_sec .container{ position: relative; z-index: 2;}
.hero_sec p{ margin: 0 0 50px; max-width: 800px;}

/* Animation */
.worker-carrying{ animation: sway 2s ease-in-out infinite; transform-origin: center bottom;}
.drill{ animation: vibrate 0.2s linear infinite;}
.cloud{ animation: moveClouds 5s linear infinite alternate;}
.clouds{ animation: moveCloud 30s linear infinite;}
.stroke{ stroke-dasharray: 0; stroke-dashoffset: 500; animation: strokeAnimation 5s linear infinite;}

@keyframes sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
}
@keyframes vibrate {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
@keyframes moveClouds {
    0% { transform: translateX(0); }
    100% { transform: translateX(50px); }
}
@keyframes moveCloud {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(800px); }
}
@keyframes strokeAnimation {
    0% {
        stroke-dasharray: 0, 500;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 500, 0;
        stroke-dashoffset: -500;
    }
}

/* Work */
.work_sec{ margin: 0; padding: 60px 0;}
.work_sec h2{ margin-bottom: 19px;}
.work_sec figure{ margin: 0; padding: 0; text-align: center;}
.work_sec figure img{ width: 340px;}
.work_sec .button{ margin: 50px 0 0; display: flex; flex-direction: column; gap: 20px; text-align: center;}
.work_sec .button a:first-child{ margin: 0 10px;}

/* Builder */
.builder_sec{ margin: 0; padding: 0 0 30px;}
.builder_sec .nav-tabs{ margin: 0 0 50px; padding: 5px; display: inline-flex; gap: 15px; background: var(--white); border-radius: 20px; border: 2px solid rgba(0,0,0,0.1);}  
.builder_sec .nav-tabs li{ margin: 0; padding: 0;}
.builder_sec .nav-tabs li .nav-link{ margin: 0; padding: 12px 30px; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 400; color: rgba(0,0,0,0.6); border-radius: 17px; border: 2px solid rgba(0,0,0,0);}
.builder_sec .nav-tabs li .nav-link:hover{ color: var(--primary); border-color: rgba(0,0,0,0.0);}
.builder_sec .nav-tabs li .nav-link.active{ color: rgba(0,0,0,1); background: #60CB97; border-color: rgba(0,0,0,0.1);}
.builder_box{ margin: 0 0 40px; padding: 40px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(0,0,0,0.2); border-radius: 30px; transition: all 0.4s ease-in-out;}
.builder_box:nth-child(even){ padding: 40px 60px 40px 40px; flex-direction: row-reverse; background: rgba(217, 247, 232, 0.2);}
.builder_box:hover{ border-color: var(--primary); box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.builder_box figure{ margin: 0; padding: 0; width: 300px; text-align: right;}
.builder_box:nth-child(even) figure{ text-align: left;}
.builder_box .detail{ margin: 0; padding: 0; width: calc(100% - 360px);}
.builder_box h2{ margin-bottom: 15px;}
.builder_box p{ margin: 0 0 40px 0;}

/* Contact */
.contact_sec{ margin: 0; padding: 60px 0; background: linear-gradient(-20deg, rgba(217,247,232,1) 0%, rgba(255,255,255,1) 100%);}
.contact_sec .register_block{ margin: 0; padding: 60px 50px 60px 60px;}
.contact_sec .register_block .input-group{ margin: 0 0 20px;}
.contact_sec h2{ margin-bottom: 30px;}
.contact_sec .register_block svg{ padding: 0 0 0 30px; height: 580px;}
.contact_sec .register_block .fancy_check svg{ padding: 0;}

/* Register */
.register_sec{ margin: 10px 0; padding:60px 0; background: #D9F7E8;}
.register_sec .register_dtl{ padding: 0 60px 0 0;}
.register_sec .nav-tabs{ margin: 5px 0 40px; padding: 5px; display: inline-flex; gap: 15px; background: var(--white); border-radius: 20px; border: 2px solid rgba(0,0,0,0.1);}
.register_sec .nav-tabs li{ margin: 0; padding: 0;}
.register_sec .nav-tabs li .nav-link{ margin: 0; padding: 12px 30px; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 400; color: rgba(0,0,0,0.6); border-radius: 17px; border: 2px solid rgba(0,0,0,0);}
.register_sec .nav-tabs li .nav-link:hover{ color: var(--primary); border-color: rgba(0,0,0,0.0);}
.register_sec .nav-tabs li .nav-link.active{ color: rgba(0,0,0,1); background: #60CB97; border-color: rgba(0,0,0,0.1);}
.register_block p{ margin: 0 0 40px; padding: 0; color: var(--black); display: inline-flex; gap: 10px;}
.register_block p a{ color: #60CB97;}
.register_block p a:hover{ color: var(--black);}
.register_block{ margin: 0; padding: 40px 130px 40px 60px; background: var(--white); border-radius: 40px; border: 2px solid rgba(0,0,0,0.1);}
.register_block i{ display: flex; margin: 0 0 30px;}
.register_block .input-group{ margin: 0 0 20px; padding: 0; position: relative;}
.register_block .input-group .icon{ position: absolute; top: 50%; left: 28px; transform: translate(0, -50%); z-index: 10;}
.register_block .form-control{ margin: 0; padding: 18px 20px 18px 70px; font-size: 16px; font-weight: 400; color: var(--black); border: 2px solid rgba(0,0,0,0.1); border-radius: 20px !important;}
.register_block textarea.form-control{ padding: 20px; resize: none; height: 140px;}
.register_block textarea.form-control::placeholder{ color: rgba(0,0,0,0.5);}
.register_block .form-control:focus{ border-color: var(--primary);}
.register_block .form-control::placeholder{ color: var(--black); font-size: 18px;}
.register_block .form-select.form-control{ padding-left: 20px; padding-right: 30px;} 
.register_block .selectBox.form-control{ padding-left: 20px; position: relative;}
.register_block .selectBox.form-control::before{ content: ''; position: absolute; background: url(../images/drop-down.svg) center center no-repeat; background-size: 100% 100%; right: 15px; width: 13px; height: 6px; top: 50%; transform: translateY(-50%);}
.register_block .selectBox.form-control{ padding-left: 20px;}
.register_block .multiselect label input[type="checkbox"]:checked{ accent-color: var(--primary);}
.register_block .multiselect{ width: 100%;}
.register_block .multiselect select{ background: transparent; border: none; width: 100%; appearance: none;} 
.register_block .multiselect .selectBox{ position: relative;} 
.register_block .multiselect .selectBox.form-control[data-open="true"]{ border-color: var(--primary);}
.register_block .multiselect .selectBox.form-control:focus{ border-color: var(--primary); box-shadow: none;}
.register_block .multiselect .overSelect{ position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.register_block .multiselect #checkboxes{ position: absolute; z-index: 99; background: #FFFFFF; left: 0; top: 100%; width: 100%; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 10px 7px; display: none; box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
.register_block .multiselect #checkboxes label{ display: flex; gap: 7px; align-items: center; padding: 7px 15px;}
.register_block .multiselect #checkboxes label:hover{ background:#D9F7E8;}

.fancy_check{ margin: 14px 0 43px; padding:0;}
.fancy_check .cbx { margin: auto; -webkit-user-select: none; user-select: none; cursor: pointer; display: flex; gap: 8px;}
.fancy_check .cbx span { display: inline-block; vertical-align: middle; transform: translate3d(0, 0, 0); font-size: 14px; color: rgba(0,0,0,0.9);}
.fancy_check .cbx span a{ color: rgba(0, 110, 255, 0.9); text-decoration: underline;}
.fancy_check .cbx span a:hover{ color: rgba(96, 203, 151, 0.9);}
.fancy_check .cbx span:first-child { position: relative; width: 22px; height: 22px; min-width: 22px; border-radius: 7px; transform: scale(1); vertical-align: middle; border: 1px solid var(--black); transition: all 0.2s ease;}
.fancy_check .cbx span:first-child svg { position: absolute; top: 5px; left: 4px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all 0.3s ease; transition-delay: 0.1s; transform: translate3d(0, 0, 0);}
.fancy_check .cbx span:first-child:before { content: ""; width: 100%; height: 100%; background: var(--primary); display: block; transform: scale(0); opacity: 1; border-radius: 50%;}
.fancy_check .cbx:hover span:first-child { border-color: var(--black);}
.fancy_check .inp-cbx:checked + .cbx span:first-child { background: var(--primary); border-color: var(--primary); animation: wave 0.4s ease;}
.fancy_check .inp-cbx:checked + .cbx span:first-child svg { stroke-dashoffset: 0; height: auto;}
.fancy_check .inp-cbx:checked + .cbx span:first-child:before { transform: scale(3.5); opacity: 0; transition: all 0.6s ease;}
@keyframes wave{
	50% {
	 transform: scale(0.9);
	}
}

.signin_sec{ margin: 0 0 10px; padding: 60px 0; background: #D9F7E8;}
.signin_sec .register_block i{ margin: 15px;}
.signin_sec .register_dtl{ margin: 0; padding: 0 20px 0 0;}
.signin_sec .fancy_check{ margin: 25px 0 50px; padding: 0; display: flex; gap: 10px; align-items: center;}
.signin_sec .fancy_check .cbx{ margin: 0; align-items: center;}
.signin_sec .fancy_check .cbx span:first-child{ margin: 0; padding: 0; height: 20px; width: 20px; min-width: 20px; border-radius: 20px; border: 2px solid rgba(0,0,0,0.1); position: relative; transform: scale(1);}
.signin_sec .fancy_check .cbx span:first-child svg{ top: 3px; left: 2px;}
.signin_sec .fancy_check .cbx span:first-child svg{ margin: 0;}
.signin_sec .fancy_check label span{ font-size: 16px;}
.signin_sec .register_block .input-group{ margin-bottom: 20px;}
.signin_sec .register_block p{ margin-bottom: 50px;}
.signin_sec .register_block h2{ margin-top: 30px;}
.signin_sec .register_block svg{ height: 460px;}
.signin_sec .register_block{ padding: 60px 115px 60px 60px;}