.title{
text-align: left;
font-size: 40px;
font-weight: bold;
color:#262C77;
}
.input-section{
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
header{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.group {
display: flex;
line-height: 28px;
align-items: centmefer;
position: relative;
width: 400px;
}

.input {
width: 100%;
height: 40px;
line-height: 28px;
padding: 0 1rem;
border: 2px solid transparent;
border-radius: 8px;
outline: none;
background-color: #f3f3f4;
color: #0d0c22;
transition: .3s ease;
}

.input::placeholder {
color: #9e9ea7;
}
/*
.input:focus, input:hover {
outline: none;
border-color: rgba(234,76,137,0.4);
background-color: #fff;
box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
} */

.icon {
position: absolute;
left: 1rem;
fill: #9e9ea7;
width: 1rem;
height: 1rem;
}
.input-action{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}



.depo{
margin-left: 20px;
}

.label{
color: #c3c3c3;
}
.two h1 {
text-transform: capitalize;
}
.two h1:before {
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 2px;
content: "";
background-color: #c50000;
}

.two h1 span {
font-size: 13px;
font-weight: 500;
text-transform: capitalize;
letter-spacing: 4px;
line-height: 3em;
padding-left: 0.25em;
color: rgba(0, 0, 0, 0.4);
padding-bottom: 10px;
}
.alt-two h1 {
text-align:center;
}
.alt-two h1:before {
left:50%; margin-left:-30px;
}
.line{
width: 24% !important;
height: 3px !important;
background-color:#00A453 !important;
margin-bottom: 20px;
}
.heading{
margin-top: 40px;

font-style: normal;
font-weight: 500;
font-size: 35px;
line-height: 48px;
/* or 137% */

text-transform: capitalize;

color: #001E00;
}
.btn{
background-color: #00A453;
}
.container{
gap: 30px;
display: flex;
flex-direction: row;
align-items:center;
justify-content: space-between;
width: 100%;
}
.card{
width: 30%;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
gap: 10px;
border: none !important;
flex-direction: row !important;
}
.guide{
width: 100%;
padding: 20px;
}
.stats{
width: 100%;
}
.stats-container{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 40px;
}
.stat-card{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content .title{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
/* identical to box height, or 120% */

display: flex;
align-items: center;
text-transform: capitalize;

color: #001E00;
}
.content{
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 22px;
/* or 160% */



color: #001E00;
}
.img{
font-size: 50px;
color: #00A453;
}
.stat-content .title{
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 19px;
/* identical to box height, or 74% */

display: flex;
align-items: center;
text-transform: capitalize;

color: #FBFFFB;
}
.stat-card{
width: 400px;
height: 225px;
background: #00A453;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 40px;

}
.stats{
padding: 40px;
margin-top: 40px;
}
.stat-content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
gap: 20px;
}
.stat-content p{
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 22px;
/* or 160% */

display: flex;
align-items: center;

color: #FAFFFA;
}
.com-icon{
font-style: normal;
font-weight: 500;
font-size: 55px;
line-height: 48px;
/* or 87% */

display: flex;
align-items: center;
text-transform: capitalize;

color: #FDFFFD;
}
.backgroud-green {

    text-transform: uppercase;
    margin: 20px;
    font-size: 2rem;
    line-height: 1.4;
    background: linear-gradient(rgba(0, 164, 83, 0.85), rgba(0, 124, 61, 0.85));
    color: #fff;
    padding: 80px 20px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 164, 83, 0.5); /* Green shadow */

}

.backgroud-green p {
    font-size: 2.2rem;
    font-weight: bold;
}
@media (max-width: 767px) {
    .backgroud-green p{
        font-size: 30px !important;
    }
}
.backgroud-green::after {
    content: '💻 ✏️ 🎨 📈 📊 🚀 🛠️ 📚';
    font-size: 3rem;
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0.1;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.5;
}

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);

.form {
width: 100%;
}

.file-upload-wrapper {
position: relative;
width: 100%;
height: 60px;
}
.file-upload-wrapper:after {
content: attr(data-text);
font-size: 18px;
position: absolute;
top: 0;
left: 0;
background: #fff;
padding: 10px 15px;
display: block;
width: calc(100% - 40px);
pointer-events: none;
z-index: 20;
height: 40px;
line-height: 40px;
color: #999;
border-radius: 5px 10px 10px 5px;
font-weight: 300;
}
.file-upload-wrapper:before {
content: "Upload";
position: absolute;
top: 0;
right: 0;
display: inline-block;
height: 60px;
background: #4daf7c;
color: #fff;
font-weight: 700;
z-index: 25;
font-size: 16px;
line-height: 60px;
padding: 0 15px;
text-transform: capitalize;
pointer-events: none;
border-radius: 0 5px 5px 0;
}
.file-upload-wrapper:hover:before {
background: #3d8c63;
}
.file-upload-wrapper input {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
height: 40px;
margin: 0;
padding: 0;
display: block;
cursor: pointer;
width: 100%;
}

.sprucecss {
align-items: flex-start;
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.05);
color: #444;
display: flex;
flex-direction: column;
gap: 0.5rem;
inset: auto auto 1rem 1rem;
line-height: 1.5;
max-width: 11rem;
padding: 1.5rem;
position: fixed;
text-decoration: none;
}
.sprucecss img {
height: 1.5rem;
width: auto;
}


input[type="date"] {
width: 100%;
display: block;
position: relative;
padding: 1rem 3.5rem 1rem 0.75rem;

font-size: 1rem;
font-family: monospace;

border: 1px solid #8292a2;
border-radius: 0.25rem;
background: white
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cg
fill='none' fill-rule='evenodd' stroke='%23688EBB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'
transform='translate(1 1)'%3E%3Crect width='18' height='18' y='2' rx='2'/%3E%3Cpath d='M13 0L13 4M5 0L5 4M0 8L18
8'/%3E%3C/g%3E%3C/svg%3E")
right 1rem center no-repeat;

cursor: pointer;
}
input[type="date"]:focus {
outline: none;
border-color: #3acfff;
box-shadow: 0 0 0 0.25rem rgba(0, 120, 250, 0.1);
}

::-webkit-datetime-edit {
}
::-webkit-datetime-edit-fields-wrapper {
}
::-webkit-datetime-edit-month-field:hover,
::-webkit-datetime-edit-day-field:hover,
::-webkit-datetime-edit-year-field:hover {
background: rgba(0, 120, 250, 0.1);
}
::-webkit-datetime-edit-text {
opacity: 0;
}
::-webkit-clear-button,
::-webkit-inner-spin-button {
display: none;
}
::-webkit-calendar-picker-indicator {
position: absolute;
width: 2.5rem;
height: 100%;
top: 0;
right: 0;
bottom: 0;

opacity: 0;
cursor: pointer;

color: rgba(0, 120, 250, 1);
background: rgba(0, 120, 250, 1);
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
opacity: 0.05;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator:hover {
opacity: 0.15;
}
/* Import Google Font - Poppins */