/*----------------------------

         Add CSS file

----------------------------*/

@import "../plugins/bootstrap/css/bootstrap.min.css";

@import "../plugins/fontawesome/css/all.min.css";

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



/*----------------------------

   element      

----------------------------*/



* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

html { text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}

*{margin:0; padding:0}

a{ text-decoration:none;}

a:hover{ text-decoration:none !important;}

header, nav, section, article, aside, footer { display:block;}

html {font-size: 100%;}

body {font-size: 12px;background:var(--body); font-family: "Inter", sans-serif;line-height: 26px;color:#455A64;-webkit-font-smoothing: antialiased;font-weight: normal;}

h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;color: #455A64;-webkit-font-smoothing: antialiased;}

:-ms-input-placeholder{color: #000;}



:root {

   --red:#DC2626;

   --darkgreen:#166534;

   --green:#22C55E;

   --black:#000000;

   --gray:#818181;

   --blue:#3275B9;

   --purple:#6B21A8;

   --yellow:#FDD511;

   --white:#ffffff;

   --brown:#9A3412;

   --border:#E5E7EB;

   --chocolate: #8B4513;

   --body:#CED4DA;

   --lightgreen:#DCFCE7;

   --lightblue:#DBEAFE;

   --lightyellow:#FFEDD5;

   --lightpurple:#F3E8FF;

   --lightred:#FEE2E2;

   --lightgray:#a3bfdb;

   --lightgray1:#F4F4F4;

   --light-chocolate: #F1D3B3;

}





.wd10{width: 10%;}

.wd20{width: 20%;}

.wd30{width: 30%;}

.wd40{width: 40%;}

.wd50{width: 50%;}

.wd60{width: 60%;}

.wd70{width: 70%;}

.wd80{width: 80%;}

.wd90{width: 90%;}

.wd100{width:100%;}



/*----------------------------

   auth      

----------------------------*/

.navbar-kiero {background:var(--white); box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); position: relative;  }

.kiero-logo{text-align: center; margin-bottom: 1rem;}

.kiero-logo img{height:50px}

.btn-nav-link{white-space: nowrap; padding: 8px 15px; display: inline-block; font-size: 13px; color: var(--gray); font-weight: bold; text-align: center; }

.btn-outline-nav-link{background: var(--white); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 13px; color: var(--blue); border-radius: 5px; font-weight: bold; text-align: center; }



.auth-section{ background: url(../images/auth-bg.jpg) var(--lightgray); background-size: 100%; background-position: center; align-items: center; display: flex; justify-content: center; height: 100vh;  position: relative; padding: 2rem 0;}
.auth-section:before{content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;     background: rgb(9 32 55 / 70%);}


.auth-form {background: #fffffff5; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); border-radius: 15px; position: relative; padding: 2rem; backdrop-filter: blur(5px); }





.logo-icon {width: 100px; height: 100px; background-color: var(--lightblue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--kiero-blue); margin: 0 auto 1.5rem; }

.logo-icon img{height: 70px;}



.auth-form  h2 {font-size:28px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}

.auth-form  p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: left; }



.auth-form .form-group{margin-bottom: 1rem;}

.auth-form .form-group h4 {color:var(--gray); font-size: 14px; font-weight: 600; margin:0; padding:0; }





.auth-form input.form-control {background: var(--white); border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}

.auth-form input.form-control:focus {border: 1px solid var(--blue); }



button.auth-form-btn {outline: none;border: none;background:var(--blue);width: 100%; padding: 12px 40px;display: inline-block;color: #fff;font-size: 16px;font-weight: 600;border-radius: 5px;box-shadow: 0 8px 13px rgb(9 84 149 / 10%);}





.auth-content-info  h2 {font-size: 24px;font-weight: 600;color:var(--gray);margin: 0;padding: 0;}

.auth-content-info  h2 span{color:var(--blue);}

.auth-content-info  p {font-size:14px; font-weight: 500; color:var(--gray); margin: 0 0 1rem 0; padding: 0; }







a.Forgottext{font-size:14px; font-weight: 500; color:var(--blue); margin: 0 0 0rem 0; padding: 0; }



.auth-kiero-content  h1 {font-size:28px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}

.auth-kiero-content  p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: left; }









.feature-item {margin-bottom: 1.5rem; }

.feature-icon-wrapper {width: 40px; height: 40px; font-size: 20px; background-color: var(--blue);color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 1rem; }

.feature-item h6 {font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}

.feature-item p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: left; }





.stats-bar{background: #fffffff5; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); border-radius: 15px; position: relative; padding: 2rem; backdrop-filter: blur(5px); }

.stat-value{font-size:18px;font-weight: 600;color:var(--blue);margin: 0;padding: 0; text-align: center;}

.stat-label{font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }











/*----------------------------

   Checkbox    

----------------------------*/

.fwscheckbox label {padding-left: 31px; position: relative; display: inline-block; padding: 0 0 0 2em; margin-bottom: 10px;  line-height: 1.5; cursor: pointer; font-size: 14px;}

.fwscheckbox label::before,

.fwscheckbox label::after {position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; }

.fwscheckbox label::before {content: " ";border: 1px solid var(--border);-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;}

.fwscheckbox input[type="checkbox"]{position: absolute; opacity: 0; z-index: -1; margin: 0; }

.fwscheckbox input[type="checkbox"] + label::after {content: "\2714"; color: #FFF; line-height: 1.9; text-align: center; border: none; }

.fwscheckbox input[type="checkbox"]:checked + label::before {background: var(--blue);border-color: var(--blue);}

.fwscheckbox input[type="checkbox"] + label::after{-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }

.fwscheckbox input[type="checkbox"]:checked + label::after{-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }







.features-section {padding: 2rem 0; background-color: var(--white); }

.features-heading h2 {font-size:30px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}

.features-heading p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }



.feature-block {padding: 2rem; text-align: center; }

.feature-block-icon {width: 64px; height: 64px; background-color: var(--lightblue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--blue); margin: 0 auto 1.5rem; }

.feature-block h5 {font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}

.feature-block p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }



.bl-feat .feature-block-icon{ background-color: var(--lightblue); color: var(--blue);}

.gr-feat .feature-block-icon{ background-color: var(--lightgreen); color: var(--green);}

.ye-feat .feature-block-icon{ background-color: var(--lightyellow); color: var(--yellow);}

.pu-feat .feature-block-icon{ background-color: var(--lightpurple); color: var(--purple);}







.testimonials-section {padding:2rem 0; background-color:var(--lightgray); }

.testimonials-heading{margin-bottom: 1rem;}

.testimonials-heading h2 {font-size:30px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}

.testimonials-heading p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }



.testimonial-card {background-color: var(--white); border: none; border-radius: 1rem; padding: 2rem; height: 100%; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); }

.testimonial-card img {width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 1rem; }

.testimonial-card .vendor-name {font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}

.testimonial-card .vendor-title {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }

.testimonial-card .quote-text {font-size: 1rem; line-height: 1.6; margin-top: 1rem; }







.onboarding-section {padding: 2rem 0; background-color: var(--white); }

.onboarding-heading{margin-bottom: 1rem;}

.onboarding-heading h2 {font-size:30px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}

.onboarding-heading p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }



.step-item {position: relative; padding: 0 1rem; }

.step-circle {width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: var(--blue); color: var(--white); font-weight: 700; font-size: 1.25rem; display: inline-block; margin-bottom: 1rem; }

.step-title{font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}

.step-description {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }