*{padding: 0; margin: 0;box-sizing:border-box}
body{ color: #2d2d2d;
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a{text-decoration: none;color: #2d2d2d;}
br{ margin-bottom: 0.75em}
.mp-box{ display: flex;width: 100%; flex-direction: column; height: 100vh;}
.mp-top{display: flex;width: 100%; margin-bottom: 1em;}
.mp-top img{ width: 100%;}
.rounded{border-radius: 30px; }
.avatar{display: flex;margin-top: -70px; }
.avatar-box{display: flex;  width: 120px;  height:120px; margin-bottom: 0.5em;}
.avatar img{ width: 100%;  border: 5px solid #fff;}
.avatar-rounded{ border-radius: 100%;}
.mp-info{display: flex; flex-direction: column; width: 100%; padding: 0 6%;}
.name{font-size:24px;font-weight:600}
.text-center{text-align:center}
.flex{display: flex}
.flex-center{justify-content:center}
.job{line-height:20px;color:#535353;font-size:14px; margin-bottom: 0.5em}
.company{line-height:22px;font-size:16px;color:#3f3e3e}
.mp-title{font-size:18px;font-weight:500;margin-top:0.75em}
.mp-content{font-size:14px;line-height:25px;margin-top:.75em;color:#3f3e3e}
.c-i{display:flex;flex-direction:row;width:100%;margin-top:1em;flex-wrap:wrap}
.c-i  a{width:3em;height:3em;border-radius:100%;background:#535353;margin-right:0.5em;display:flex;justify-content:center;place-items:center;place-content:center;margin-bottom:0.75em}
.mp-addr{display:flex;flex-direction:row;justify-items:start;margin-top:1.75em;align-items: start;}
.addr-ico{margin-right:0.25em;display:flex;flex-shrink:0}
.addr-info{line-height:20px;font-size:14px;color:#3f3e3e}
.co-box{display: flex; align-items:flex-start;flex-direction:row;border-top-left-radius: 15px; border-top-right-radius: 15px; background: #f1efef; padding: 2em 6%; width: 100%; margin-top: 1.75em;
flex-wrap: wrap;padding-bottom: 5em;}
.co-box a{display: flex; flex-direction: column; justify-content: center; width: 25%;  margin-bottom: 1em; }
.co-ico{display: flex; justify-content:center ;}
.co-txt{font-size: 14px; text-align: center; line-height: 20px; margin-top: 0.5em;}
.mp-botton-box{position: fixed; bottom: 0.5em;left:0; width: 100%; padding: .5em 6%;}
.mp-bt{ width: 100%; background: #2d2d2d; border-radius: 50px; display: flex; justify-content: center; justify-items: center;flex-direction: row; padding: 0.5em 0; align-items: center;}
.mp-bt-txt{color:#ffffff; line-height: 2em;}
.mp-bt-ico{ margin-right: 0.5em; margin-top: 0.25em; }
/*login*/
.login{display:flex; width: 100%; border-bottom: 1px solid #ccc; padding: 1em 0;flex-direction: row;justify-content: center; background: #f8f8f8}
.logo-head{ display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 1em}
.login-logo{ max-width: 100px;}
.login-logo img{ width: 100%}
.login-box{width:100%;max-width: 1200px; display:flex;  flex-direction: column;justify-content: center; margin: 3em auto; padding: 0 2% ; }
.login-content{width:100%; max-width:800px;display: flex;flex-direction: column; border: 1px solid #ccc; border-radius: 20px; padding: 2em 2%; margin: auto}
.login-title{ font-size: 30px; font-weight: 600 }
.login-title2{ font-size: 20px; font-weight: 600 }
.logo-email{ font-size: 14px; margin-bottom: 0.75em}
.login-input{ margin-bottom: 1em; display: flex}
.login-err,.login-errs{
    color: #fd1e1e; line-height: 1.75em; font-size: 12px; margin-bottom: 1em;display: flex;
}
.login-input input{ border: 1px solid #ccc; padding:10px; height: 3em; border-radius: 5px; width: 100%}
.login-info{ margin-top: 0.5em; color: #737272;
.longin-a {color:#007BFF; margin-bottom: 0.5em}
}
.tab-container {
    width: 100%;
   margin-top: 50px;
    font-family: Arial, sans-serif;
}

.tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    font-size: 16px;
}

.tab-btn {
    padding: 10px 20px;
    background-color: #e0e0e0;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.login-page{height: 100vh; display: flex; justify-content: center; align-items: center}
.login-f{ font-weight: 600;margin: 1.5em 0}
.login-f a{color:#007BFF; }
.login-button{ display: flex; justify-content: center; align-items: center}
.login-button button{ background: #007BFF; border-radius: 10px; padding: 15px  3em; text-align: center; color: #fff;font-size: 16px; font-weight: 600; border: 0;cursor:pointer}
.tab-btn.active  {
    background-color: #007BFF;
    color: white;
}
.card {
    display: none;
}

.card.active  {
    display: block;
}