*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f5fff5;
    color:#222;
}


a{
text-decoration: none;
}

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}

.header{
    background:#0b8f3a;
    padding:15px 0;
}

.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
gap:15px;
}

.logo{
    color:#fff;
    text-decoration:none;
    font-size:28px;
    font-weight:bold;
}

.menu{
    display:flex;
    gap:20px;
    list-style:none;
}

.menu a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

.menu a:hover{
    opacity:0.8;
}

.hero{
    padding:80px 0;
    text-align:center;
}

.hero h1{
    font-size:40px;
    color:#0b8f3a;
    margin-bottom:20px;
}

.hero p{
    font-size:18px;
}

.card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    margin-top:30px;
    box-shadow:0 0 10px rgba(0,0,0,0.08);
}

.form-box{
    max-width:400px;
    margin:50px auto;
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 0 10px rgba(0,0,0,0.08);
}

.form-box h2{
    margin-bottom:20px;
    color:#0b8f3a;
}

.input{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:8px;
}

.btn{
    width:100%;
    padding:12px;
    border:none;
    background:#0b8f3a;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}

.btn:hover{
    opacity:0.9;
}





.footer{
    margin-top:1em;;
    background:#0b8f3a;
    color:#fff;
    text-align:center;
    padding:20px 0;
}

@media(max-width:768px){

    .nav{
        flex-direction:column;
gap:15px;
    }

    .menu{
        flex-wrap:wrap;
gap:20px;
        justify-content:center;
    }

    .hero h1{
        font-size:40px;
    }
}











@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

.icon {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: inline-block;
}




.icon-home::before {content: "\f015";}
.icon-ball::before {content: "\f1e3";}
.icon-user::before {content: "\f007";}
.icon-users::before {content: "\f0c0";}
.icon-user-cancel::before {content: "\f235";}
.icon-user-plus::before {content: "\f234";}
.icon-star::before {content: "\f005";}
.icon-money::before {content: "\f0d6";}
.icon-clock::before {content: "\f017";}
.icon-cup::before {content: "\f091";}
.icon-club::before {content: "\f3ed";}
.icon-club-2::before {content: "\f132";}
.icon-player::before {content: "\f70c";}
.icon-coins::before {content: "\f51e";}
.icon-market::before {content: "\f07a";}
.icon-medal::before {content: "\f5a2";}
.icon-build::before {content: "\f1ad";}
.icon-calendar::before {content: "\f073";}
.icon-calendar-cancel::before {content: "\f273";}
.icon-calendar-ok::before {content: "\f274";}
.icon-plus::before {content: "\f067";}
.icon-flag::before {content: "\f024";}
.icon-flag-2::before {content: "\f11e";}
.icon-olmos::before {content: "\f3a5";}
.icon-ofis::before {content: "\f15c";}
.icon-energy::before {content: "\f0e7";}
.icon-plus-circle::before {content: "\f055";}
.icon-minus-circle::before {content: "\f056";}
.icon-cross-circle::before {content: "\f057";}
.icon-ok-circle::before {content: "\f058";}
.icon-goback::before {content: "\f064";}
.icon-left::before {content: "\f060";}
.icon-right::before {content: "\f061";}
.icon-ban::before {content: "\f05e";}
.icon-faq::before {content: "\f05a";}
.icon-up::before {content: "\f062";}
.icon-down::before {content: "\f063";}
.icon-refresh-right::before { content: "\f01e";}
.icon-left2::before { content: "\f100";}
.icon-right2::before { content: "\f101";}
.icon-search::before {content: "\f002";}
.icon-message::before {content: "\f003";}
.icon-on-off::before {content: "\f011";}
.icon-settings::before {content: "\f013";}
.icon-korzina::before {content: "\f014";}
.icon-refresh::before {content: "\f021";}
.icon-list::before {content: "\f022";}
.icon-lock::before {content: "\f062";}
.icon-qr-code::before {content: "\f029";}
.icon-camera::before {content: "\f030";}
.icon-pen::before {content: "\f040";}
.icon-location::before {content: "\f062";}
.icon-edit-square::before {content: "\f044";}
.icon-back-square::before {content: "\f045";}
.icon-ok-square::before {content: "\f046";}
.icon-left3::before {content: "\f053";}
.icon-right3::before {content: "\f054";}
.icon-up2::before {content: "\f077";}
.icon-down2::before {content: "\f078";}
.icon-question-circle::before {content: "\f059";}
.icon-minus::before {content: "\f068";}
.icon-spam::before {content: "\f071";}
.icon-airplane::before {content: "\f072";}
.icon-chat::before {content: "\f075";}
.icon-key::before {content: "\f084";}
.icon-like::before {content: "\f087";}
.icon-dislike::before {content: "\f088";}
.icon-login::before {content: "\f090";}
.icon-logout::before {content: "\f08b";}
.icon-square::before {content: "\f096";}
.icon-barcode::before { content: "\f02a"; }
.icon-toggle-on::before {content: "\f205";}
.icon-toggle-off::before {content: "\f204";}
.icon-check::before {content: "\f00c";}
.icon-stul::before {content: "\f6c0";}
.icon-krest::before {content: "\f00d";}
.icon-table::before {content: "\f0ce";}
.icon-friend::before {content: "\f2b5";}
.icon-poz::before {content: "\f21d";}
.icon-point::before {content: "\f140";}
.icon-history::before {content: "\f1da";}
.icon-gift::before {content: "\f06b";}
.icon-circle-up::before {content: "\f01b";}
.icon-circle-down::before {content: "\f01a";}
.icon-circle-left::before {content: "\f190";}
.icon-circle-right::before {content: "\f18e";}
.icon-wifi::before {content: "\f1eb";}
.icon-sort::before {content: "\f0dc";}
.icon-desktop::before {content: "\f108";}
.icon-notebook::before {content: "\f109";}
.icon-phone::before {content: "\f10b";}
.icon-tv::before {content: "\f26c";}
.icon-keyboard::before {content: "\f11c";}
.icon-menu::before {content: "\f0c9";}
.icon-menu-height::before {content: "\f142";}
.icon-menu-width::before {content: "\f141";}
.icon-globe::before {content: "\f0ac";}
.icon-hashtag::before {content: "\f292";}
.icon-language::before {content: "\f1ab";}
.icon-lock::before {content: "\f023";}