@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

html {
    font-size: 62.5%;
}
body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
    font-size: 1.6rem;
    color: #1b1c1e;
    font-weight: 400;
    letter-spacing: 0.5px;
}
/* Navbar-section */
header.sticky-nav {
    width: 100%;
    display: flex;
    background: black;
    padding: 34px 0px;
}
nav.navbar.navbar-expand-lg.navbar-light {
    width: 100%;
    display: flex;
    align-items: center;
}
.logo {
    width: 100%;
    display: flex;
    align-items: center;
}
.logo a {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
}
.logo a h4 {
    font-size: 20px;
    font-weight: 500;
}
.language_btn {
    width: 100%;
    margin-left: 60px;
}
.language_btn select {
    border: 1px solid #242323;
    padding: 10px 28px;
    background: black;
    color: white;
    font-size: 18px;
}
.language_btn select:focus{
    outline:none;
}
div#navbarSupportedContent {
    width: 100%;
    display: flex;
}
ul.navbar-nav {
    width: 100%;
    display: flex;
}
li.nav-item {
    width: 100%;
    list-style: none;
    display: flex;
}
a.nav-link {
    text-decoration: none;
    font-size: 19px;
    margin: 0px 15px;
    font-weight: 500;
    color: #e7f9f9;
}
a.nav-link:hover{
    color: #14efff;
}
.login_process {
    width: 100%;
    display: flex;
    margin: 0px 55px;
}
.user_profile {
    border: 1px solid;
    background: #37ffff;
    display: flex;
    justify-content: start;
    width: 100%;
    padding: 8px 0px;
    padding-right: 24px;
    border-radius: 8px;
}
.user_profile a {
    display: flex;
    align-items: center;
    padding-right: 84px;
    text-decoration: none;
    color: black;
    font-size: 14px;
}
.user_profile a img {
    width: 60%;
    padding: 0px 11px;
}
.navbar-toggle {
    display: none;
    font-size: 40px;
    color: white;
    cursor: pointer;
}
@media (min-width: 360px) and (max-width: 768px) {
    .navbar-menu {
        display: none;
        flex-direction: column;
    }

    .navbar-toggle {
        display: block;
        width: 16%;
        text-align: center;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .nav-item {
        margin: 10px 0;
    }

    .language_btn, .login_process {
        margin-top: 10px;
    }  
}
@media (max-width: 990px) {
    .navbar-menu {
        display: none;
        flex-direction: column;
    }

    .navbar-toggle {
        display: block;
        width: 10%;
        text-align: center;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .nav-item {
        margin: 10px 0;
    }

    .language_btn, .login_process {
        margin-top: 10px;
    }  
}
@media (min-width: 360px) and (max-width: 768px) {
    .logo {
        width: 30%;
    }
    .logo img {
        width: 40%;
    }
    .logo a h4 {
        font-size: 18px;
        font-weight: 500;
        padding-top: 1rem;
    }
    .language_btn {
        width: 30%;
        margin-left: 0px;
    }
    .dropdown-container {
        width: 153%;
    }
    button#nav-close-btn {
        width: 20%;
        text-align: center;
    }
    .login_process {
        width: 40%;
        display: flex;
        margin: 0px 0px;
        justify-content: end;
        margin-top: 2rem;
    }
}
@media (max-width: 990px) {
    .logo {
        width: 30%;
    }
    .logo img {
        width: 40%;
    }
    .logo a h4 {
        font-size: 18px;
        font-weight: 500;
        padding-top: 1rem;
    }
    .language_btn {
        width: 30%;
        margin-left: 0px;
    }
    button#nav-close-btn {
        width: 10%;
        text-align: center;
    }
    .login_process {
        width: 40%;
        display: flex;
        margin: 0px 0px;
        justify-content: end;
        margin-top: 2rem;
    }
}
@media (min-width: 992px) and (max-width: 1204px) {
    .logo {
        width: 50%;
        display: flex;
        align-items: center;
    }
    .language_btn {
        width: 100%;
        margin-left: 4px;
    }
    a.nav-link {
        text-decoration: none;
        font-size: 19px;
        margin: 0px 5px;
        font-weight: 500;
        color: #e7f9f9;
    }
    .login_process {
        width: 40%;
        display: flex;
        margin: 0px 0px;
        justify-content: end;
        margin-top: 0rem;
    }
    .user_profile {
        border: 1px solid;
        background: #37ffff;
        display: flex;
        justify-content: start;
        width: 81%;
        padding: 8px 0px;
        padding-right: 24px;
        border-radius: 8px;
    }
}
@media (min-width: 200px) and (max-width: 430px) {
    .dropdown-container {
        width: 147%;
    }
}
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
} 
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
} 
.dropdown {
    position: relative;
    display: inline-block;
} 
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown a:hover {
    background-color: #ddd;
}
.show {
    display: block
}
@media (max-width: 767px) {
    .nav-close-btn {
        display: block;
        background: none;
        border: none;
        font-size: 56px;
        color: white;
        padding: 0px;
        cursor: pointer;
        position: absolute;
        top: 0px;
        right: 3px;
        background: black;
    }
}
@media (min-width: 768px) {
    .nav-close-btn {
        display: none;
    }
}
/* Navbar-section */
/* Welcome-section */
.welcome-section {
    width: 100%;
    background: #2345a9;
    padding: 0rem 1rem;
}
.welcome-box {
    width: 100%;
}
.welcome-box-heading {
    width: 100%;
    padding-top: 4rem;
    text-align: center;
}
.welcome-box-heading h1 {
    color: white;
    font: revert;
    font-size: 7rem;
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
@media (min-width: 360px) and (max-width: 768px) {
    .welcome-box-heading h1 {
        font-size: 34px;
    }
    .welcome-box-links ul {
        padding-left: 0rem;
    }
}
.welcome-box-links {
    background-color: #2345a9;
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
}
.top-nav {
    display: none;
    margin-left: 6rem;
    padding: 4rem 0rem;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.welcome-link {
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.welcome-link:hover {
    background: black;
    color: #37ffff;
    border-radius: 20px;
}

.menu-toggle {
    background: #2345a9;
    color: white;
    border: none;
    padding: 10px 0px;
    cursor: pointer;
    font-size: 20px;
}

.sidebar {
    width: 250px;
    background-color: #131c2c;
    color: white;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100%;
    overflow-y: auto;
    transition: left 0.3s;
    display: none;
}

.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-links li {
    border-bottom: 1px solid #444;
}

.sidebar-links a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 15px 20px;
}

.sidebar-links a:hover {
    background: black;
    color: #37ffff;
    border-radius: 20px;
}

.content {
    padding: 20px;
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
}
.close-btn {
    width: 100%;
    font-size: 48px;
    background: #131c2c;
    color: white;
}
@media (max-width: 860px) {
    .top-nav {
        display: none;
        margin-left: 0rem;
    }
    
    .menu-toggle {
        display: block;
    }

    .sidebar {
        display: block;
        width: 250px;
        left: -250px;
    }

    .content {
        margin-left: 0;
        width: 100%;
    }
}

@media (min-width: 860px) {
    .menu-toggle {
        display: none;
    }

    .top-nav {
        display: block;
    }

    .sidebar {
        display: none;
    }

    .content {
        margin-left: 0;
        width: 100%;
    }
}
@media (min-width: 856px) and (max-width: 1000px) {
    .welcome-box-heading h1 {
        color: white;
        font: revert;
        font-size: 6rem;
        font-family: "Mulish", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
    }
    .top-nav {
        margin-left: 0rem;
    }
    .welcome-link {
        color: white;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        padding: 11px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}
@media (min-width: 200px) and (max-width: 856px) {
    .welcome-box-heading h1 {
        color: white;
        font: revert;
        font-size: 4rem;
        font-family: "Mulish", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
    }
}
/* Welcome-section */
/* Trading-section */
.trading-section {
    width: 100%;
    /*padding: 5rem 5rem; */
    background: #131c2c;
    padding: 1% 5%;
    padding-top: 6%;
}
.trading-balance-box {
    width: 100%;
    border: 1px solid #f85e01;    
    padding: 2rem 2rem;
}
.trading-balance-detail {
    width: 100%;
    display: flex;
    margin-bottom: 2rem;
}
.trading-balance-detail h1 {
    color: white;
    font-size: 2.50rem;
}



.daily-profit {
    width: 100%;
}
.trading-profit-list {
    width: 100%;
}
#trading-col {
    border: 1px solid #37ffff; padding: 0%;
}
.profit-detail-box {
    width: 100%;
    text-align: center;
}
.profit-date {
    width: 100%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid #37ffff;
}
.profit-date hr {
    color: #37ffff;
    width: 100%;
    opacity: 2.25;
}
.profit-date h2 {
    font-size: 15px;
    font-weight: 100;
    color: white;
}
.profit-detail {
    width: 100%;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 4px;
}
.profit-detail h2 {
    color: #2cffff;
    font-size: 16px;
    font-weight: 600;
}
.profit-detail h3 {
    color: white;
    font-size: 17px;
    font-weight: 500;
}
.profit-detail h4 {
    color: #2cffff;
    font-size: 17px;
    font-weight: 500;
}
.slider-container {
    width: 100%;
    max-width: 400px;
}
.slider-container h1 {
    color: white;
    font-size: 18px;
}
input[type="range"] {
    width: 100%;
    margin: 10px 0;
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    background: #37ffff;
    outline: none;
    transition: opacity 0.2s;
    border-radius: 16px;
}
  
  input[type="range"]:hover {
    opacity: 1;
    background: white;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #8d14bd;
    cursor: pointer;
    border-radius: 50%;
  }
 
  .range-values {
    display: flex;
    justify-content: space-between;
    font-size: 1.2em;
  }
.monthly-profit-list {
    width: 100%;
}
.monthly-profit-box {
    width: 100%;
    border: 1px solid #37ffff;
}

.monthly-profit-date {
    width: 100%;
    border: 1px solid #37ffff;
    padding-top: 4px;
    padding-left: 6px;
}
.monthly-profit-date h2 {
    font-size: 15px;
    font-weight: 600;
    color: white;
}

.pay-off-bok {
    width: 100%;
    display: flex;
    justify-content: center;
}
.pay-off {
    text-decoration: none;
    background: #3567fd;
    color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0px;
    border: 1px solid #37ffff;
}
.pay-off:hover{
    border: 0px solid #37ffff;
}
@media (min-width: 360px) and (max-width: 768px) {
    .trading-balance-detail h1 {
        color: white;
        font-size: 18px;
    }
    .profit-date h2 {
        font-size: 12px;
    }
    .profit-detail h2 {
        color: #2cffff;
        font-size: 14px;
        font-weight: 600;
    }
    .profit-detail h3 {
        color: white;
        font-size: 14px;
        font-weight: 500;
    }
    .profit-detail h4 {
        color: #2cffff;
        font-size: 14px;
        font-weight: 500;
    }
    #trading-col {
        border: 1px solid #37ffff;
        width: 33%;
    }
    .monthly-profit-list {
        width: 100%;
        margin-top: 4rem;
        padding-left: 0rem;
    }
    .monthly-profit-date {
        text-align: center;
    }
    input[type="range"] {
        height: 16px;
    }
      
    input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }
    .monthly-profit-date h2 {
        font-size: 14px;

    }  
}
/* Trading-section */
/* Trading Detail Section */
.trading-detail-section {
    width: 100%;
    /*padding: 5rem 5rem; */
    background: #131c2c;
    padding: 1% 5%;
    padding-bottom: 2%;
}
.trading-detail-menu {
    width: 100%;
    border: 1px solid #f85e01;
    padding: 4% 2%;
}
.trading-detail-box {
    width: 100%;
    padding-left: 2rem;
    padding-top: 4rem;
}
.trading-detail-heading {
    width: 100%;
}
.trading-detail-heading h1 {
    font-size: 2rem;
    font-weight: 600;
    color: white;
}
.referral-link-box {
    width: 100%;
    margin-top: 2rem;
}
.referral-heading {
    width: 100%;
}
.referral-heading h1 {
    font-size: 2rem;
    font-weight: 600;
    color: white;
}
.referral {
    width: 100%;
    display: flex;
}
.referral-link {
    color: #37fff1;
    text-decoration: none;
    font-size: 16px;
}
.hashcodes-section {
    width: 100%;
    border-left: 1px solid #37ffff;
    border-right: 1px solid #37ffff;
    padding: 35px 18px;
}
.hashcodes-heding {
    width: 100%;
    margin-bottom: 18px;
}
.hashcodes-heding h1 {
    font-size: 2rem;
    font-weight: 600;
    color: white;
}
.hashcodes-box {
    width: 100%;
    border: 1px solid #37ffff;
    display: flex;
    padding-left: 6px;
    padding-top: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.hashcodes-box h2{
    font-size: 14px;
    font-weight: 600;
    color: white;
}
.hashcodes-box p{
    font-size: 14px;
    font-weight: 600;
    color: #3567fd;
}
.news-box {
    width: 100%;
    margin-top: 4rem;
    padding: 0% 4%;
}
.news-box h2 {
    color: white;
}
.news-box p {
    color: white;
    margin-top: 2rem;
    font-size: 15px;
}

/* Trading Detail Section */
/* Footer Section */
footer{
    width: 100%;
    background: black;
}
.footer-section {
    width: 100%;
    padding: 8rem 10rem;
}
.footer-section-top {
    width: 100%;
}
.unicorn-footer-box{
    width: 100%;
}
.footer-menu-1 {
    width: 100%;
}
.footer-menu-1 h4 {
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
    font-size: 16px;
}
.footer-menu-1 li{
    list-style: none;
}
.footer-menu-1 a {
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    color: #909090;
    font-size: 28px;
}
.footer-menu-2 {
    width: 100%;
    padding-top: 40px;
}
.footer-menu-2 li{
    list-style: none;
}
.footer-menu-2 a {
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    color: #909090;
    font-size: 16px;
}
.unicorn-adress {
    width: 100%;
}
.unicorn-adress-heading-1 {
    width: 100%;
    display: flex;
    align-items: center;
}
.unicorn-adress-heading-2 {
    width: 100%;
    display: flex;
    align-items: center;
}
.unicorn-adress-heading-2 img {
    width: 14%;
    margin-right: 5%;
}
.unicorn-adress-heading-1 h2 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    font-size: 20px;
}
.unicorn-adress-heading-2 h2 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    font-size: 20px;
}
.unicorn-adress-detail{
    width: 100%;
}
.unicorn-adress-detail-1 p {
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    color: #909090;
    font-size: 17px;
    font-weight: 100;
    padding-top: 10px;
}
.unicorn-adress-detail-2 p {
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    color: #909090;
    font-size: 17px;
    font-weight: 100;
    padding-top: 10px;
}
.paypal-box {
    width: 100%;
    margin-top: 14rem;
}
.unicorn-news {
    width: 100%;
}
.unicorn-news-heading {
    width: 100%;
    margin: 35px 0px;
}
.unicorn-news-heading h2 {
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    color: white;
    font-size: 20px;
}
.unicorn-news-input-group {
    width: 100%;
}
.unicorn-news-input-group label {
    color: white;
    width: 100%;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 1rem;
}
.unicorn-news-input-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid white;
    border-radius: 6px;
    background: #131c2c;
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
}
.news-checkbox {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
}
.news-checkbox input {
    width: 2rem;
    height: 2rem;
    margin-right: 4%;
}
.news-checkbox p {
    color: white;
    font-size: 12px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
}
.unicorn-news-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.unicorn-news-btn a {
    width: 100%;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    padding: 8px 0px;
    background: #3567fd;
    border-radius: 5px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
}
.unicorn-news-btn a:hover{
    background: #131c2c;
}
.footer-section-bottom {
    width: 100%;
}
.copyright-box {
    width: 100%;
}
.copyright-box p {
    color: white;
    font-size: 13px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
}
@media (min-width: 360px) and (max-width: 768px) {
    .footer-section {
        width: 100%;
        padding: 4rem 2rem;
    }
    .paypal-box {
        margin-top: 4rem;
        margin-bottom: 0rem;
    }
    .paypal-box img {
        width: 84%;
        margin-top: 34%;
        margin-left: 0%;
    }
    .footer-menu-1 a {
        font-size: 18px;
    }
    .footer-menu-2 a {
        font-size: 14px;
    }
    div#footer-col-1 {
        width: 50%;
    }
    div#footer-col-2 {
        width: 50%;
    }
    .unicorn-adress-heading-1 h2 {
        color: white;
        font-size: 15px;
    }
    .unicorn-adress-detail-1 p {
        color: #ffffff;
        font-size: 14px;
    }
    .unicorn-adress-heading-2 img {
        width: 10%;
        margin-right: 2%;
    }
    .unicorn-adress-heading img {
        width: 10%;
        margin-right: 2%;
    }
    .unicorn-news {
        width: 100%;
        margin-top: 12%;
    }
    .unicorn-news-heading h2 {
        font-size: 15px;
    }
    .footer-section-bottom {
        width: 100%;
        margin-top: 8%;
    }
}
@media (max-width: 990px) {
    .footer-section {
        width: 100%;
        padding: 4rem 2rem;
    }
    .paypal-box img {
        width: 100%;
    }
}
/* Footer Section */
/* my-account */
.account-dashboard {
    width: 100%;
    background: #37ffff;
    padding-left: 16rem;
    padding-right: 16rem;
    padding-top: 6rem;
    padding-bottom: 125px;
}
.left-part {
    width: 100%;
}
.left-part-detail{
    width: 90%;
}
.account-profil {
    width: 100%;
    background: black;
    display: grid;
    justify-content: center;
    text-align: center;
    padding: 28px 15px;
}
.account-profil-img {
    width: 100%;
    display: flex;
    justify-content: center;
}
.account-username {
    width: 100%;
    margin: 10px 0px;
}
.account-username h1 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 18px;
}
.account-Follow-list{
    width: 100%;
    display: flex;
    justify-content: center;
}
.account-follow-list h3 { 
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.vertical-line {
    border-left: 1px solid #909090;
    height: 40px;
}
.account-follow-list h4 { 
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 11px;
    color: #909090;
}
.account-menu {
    background: black;
    width: 100%;
    margin-top: 3rem;
    padding: 4px 5px;
}
.account-menu ul {
    list-style: none;
}
.account-menu a {
    display: flex;
    width: 100%;
    padding: 8px 8px;
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 18px;
    text-decoration: none;
}
.right-part {
    width: 100%;
}
.right-part-detail {
    width: 100%;
    background: black;
    padding: 40px 30px;
}
.account-info {
    width: 100%;
}
.account-detail-heading {
    width: 100%;
}
.account-detail-heading h2 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 25px;
}
.account-detail-heading p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    padding-top: 10px;
}
.account-info-btn {
    width: 100%;
    display: flex;
}
.discard-btn {
    width: 100%;
    display: flex;
}
.discard-btn a {
    text-decoration: none;
    border: 1px solid #37ffff;
    display: flex;
    justify-content: center;
    width: 94%;
    padding: 6px 14px;
    color: #37ffff;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.update-info-btn {
    width: 100%;
    display: flex;
}
.update-info-btn a {
    text-decoration: none;
    border: 1px solid;
    display: flex;
    justify-content: center;
    width: 94%;
    padding: 6px 0px;
    color: black;
    background: #37ffff;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.display-info {
    width: 100%;
}
.display-info-heading {
    width: 100%;
}
.display-info-heading h3 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 20px;
    font-weight: 300;
}
.display-info-heading p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    padding-top: 10px;
}
.display-info-tital {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.display-info-input-group{
    width: 100%;
}
.display-info-input-group label {
    color: white;
    width: 100%;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    font-weight: 200;
    padding-bottom: 10px;
}
.display-info-input-group input {
    width: 80%;
    border: 1px solid white;
    color: white;
    background: black;
    padding: 8px 10px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.personal-info {
    width: 100%;
}
.personal-info-heading {
    width: 100%;
}
.personal-info-heading h3 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 20px;
    font-weight: 300;
}
.personal-info-heading p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    padding-top: 10px;
}
.personal-info-tital {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.personal-info-input-group{
    width: 100%;
}
.personal-info-input-group label {
    color: white;
    width: 100%;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    font-weight: 200;
    padding-bottom: 10px;
}
.personal-info-input-group input {
    width: 80%;
    border: 1px solid white;
    color: white;
    background: black;
    padding: 8px 10px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.personal-info-btn {
    width: 100%;
    display: flex;
    justify-content: end;
}
.login-info {
    width: 100%;
}
.login-info-heading {
    width: 100%;
    margin-bottom: 25px;
}
.login-info-heading h3 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 18px;
}
.login-info-heading p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    padding-top: 8px;
}
.login-info-detail {
    width: 100%;
}
.login-email-box {
    width: 100%;
    margin-bottom: 30px;
}

.login-email-box h4 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;
}
.login-email-box a {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
}
.change-password {
    width: 100%;
}
.change-password-box {
    width: 100%;
}
.change-password-box h4{
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;
}
.change-password-box a {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
}
.personal-information-box {
    width: 100%;
}
.personal-information-heading {
    width: 100%;
    margin-bottom: 4rem;
}
.personal-information-heading h4 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;
}
.personal-information-heading p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;
    padding-top: 8px;
}
.personal-information-accordion {
    background: transparent;
    color: white;
    cursor: pointer;
    padding-left: 0px;
    padding-bottom: 6px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 5.4s;
} 
.panel {
    display: none;
    overflow: hidden;
    color: white;
    margin-top: 14px;
}
.panel p {
    color: white;
    margin: 0px 0px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.panel a {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
/* my-account */
/* settings */
.notification-settings-box {
    width: 100%;
}
.settings-box-heading {
    width: 100%;
}
.settings-box-heading h1 {
    color: #c7c4c4;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 24px;
    font-weight: 300;
}
.settings-box-heading h2 {
    color: #c7c4c4;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 18px;
}
.settings-box-heading p {
    color: #c7c4c4;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.status-settings {
    width: 100%;
    margin-top: 3rem;
}
.status-heading {
    width: 100%;
    padding: 1rem 0rem;
}
.status-heading h4 {
    color: #c7c4c4;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.notification-status {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.status-box {
    width: 25%;
    display: flex;
    justify-content: end;
}
.status-box a {
    border: 1px solid #3567fd;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 8px 0px;
    text-decoration: none;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    color: #3567fd;
}
.status-switch-btn {
    position: relative;
    display: inline-block;
    width: 54%;
    padding: 5px 5px;
}
.status-switch-btn input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: black;
    -webkit-transition: .4s;
    transition: .4s;
}
  
input:checked + .slider {
    background-color: #3567fd;
} 
  
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
  
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
  
.slider.round:before {
    border-radius: 50%;
}
/* settings */
/* notifications */
.notifications-section {
    width: 100%;
    margin-bottom: 18rem;
}
.notifications-heading {
    width: 100%;
    margin-bottom: 2rem;
}
.notifications-heading h1 {
    color: white;
    font-size: 25px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
}
.notifications-detail {
    width: 100%;
    border: 1px solid #3a3838;
}
.notifications-detail-box {
    width: 100%;
    text-align: center;
    margin: 100px 0px;
}
.notifications-detail-box h1 {
    color: white;
    font-size: 25px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
}
.notifications-detail-box p {
    color: white;
    font-size: 14px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
}
/* notifications */
/* User Profil */
.user-profil-section {
    width: 100%;
    display: flex;
    justify-content: center;
    background: black;
}
.error-msg-box {
    width: 100%;
    text-align: center;
    margin: 18rem 0rem;
}
.error-msg-box h1 {
    color: white;
    font-size: 26px;
    font-weight: bold;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    margin-bottom: 1rem;
}
.error-msg-box h2 {
    color: white;
    font-size: 16px;
    font-weight: 600;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    margin-bottom: 4rem;
}
.error-msg-box a {
    color: black;
    border: 0px solid;
    background: white;
    text-decoration: none;
    font-size: 14px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    padding: 12px 34px;
}
.error-msg-box a:hover {
    color: white;
    background: #3567fd;
}
/* User Profil */
/* registieren Section*/
.registe-section {
    width: 100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.registe-close-btn {
    left: 33%;
    width: 0%;
    font-size: 48px;
    color: gray;
    position: relative;
    bottom: 434px;
    text-decoration: none;
}
.registieren-box {
    width: 32%;
    background: #131c2c;
    margin: 4rem 0px;
}
.registe-form {
    width: 100%;
    padding: 1rem 4rem;
}
.registe-form-heading {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.registe-form-heading h1 {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 35px;
}
.registe-input-group {
    width: 100%;
}
.registe-input-group label {
    width: 100%;
    color: white;
    margin-top: 18px;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.registe-input-group input {
    width: 100%;
    padding: 4px 8px;
    background: transparent;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid white;
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
}
.registe-checkbox {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.registe-checkbox input#checkbox {
    width: 100%;
    height: 2rem;
}
.registe-checkbox p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;
}
.submit-registe {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.submit-registe a {
    text-decoration: none;
    color: black;
    background: white;
    display: flex;
    justify-content: center;
    width: 60%;
    padding: 1rem 1rem;
    border: 1px solid white;
}
.submit-registe a:hover {
    border: 1px solid white;
    background: black;
    color: white;
}
.submit-registe input{
    text-decoration: none;
    color: black;
    background: white;
    display: flex;
    justify-content: center;
    width: 60%;
    padding: 1rem 1rem;
    border: 1px solid white;
}
.submit-registe input{
    border: 1px solid white;
    background: black;
    color: white;
}
.back-to-login {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.back-to-login p {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}
.back-to-login a {
    color: white;
    font-family: unset;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    font-size: 14px;
}
@media (min-width: 884px) and (max-width: 1140px) {
    .registe-close-btn {
        left: 56%;
        width: 0%;
        font-size: 48px;
        color: gray;
        position: relative;
        bottom: 447px;
        text-decoration: none;
    }
    .registieren-box {
        width: 55%;
        background: #131c2c;
        margin: 4rem 0px;
    }
}
@media (min-width: 768px) and (max-width: 885px) {
    .registe-close-btn {
        left: 33%;
        width: 0%;
        font-size: 48px;
        color: gray;
        position: relative;
        bottom: 434px;
        text-decoration: none;
    }
    .registieren-box {
        width: 55%;
        background: #131c2c;
        margin: 4rem 0px;
    }
}
@media (min-width: 250px) and (max-width: 768px) {
    .registe-close-btn {
        left: 82%;
        width: 0%;
        font-size: 48px;
        color: gray;
        position: relative;
        bottom: 408px;
        text-decoration: none;
    }
    .registieren-box {
        width: 100%;
        background: #131c2c;
        margin: 5rem 2rem;
    }
}
/* registieren Section */
/* login Section */
.login-section {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}
.login-close-btn {
    left: 88%;
    width: 0%;
    font-size: 48px;
    color: gray;
    position: relative;
    text-decoration: none;
    top: 87%;
}
.login-box {
    width: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
}
.login-heading {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-heading h1 {
    font-size: 48px;
    font-weight: 400;
    line-height: 48px;
    color: white;
}
.member-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px;
}
.member-box h4 {
    font: var(--fnt,var(--font_8));
    font-size: 16px;
    color: white;
}
.member-box h4 a {
    color: #3160ed;
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
}
.login-list {
    width: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
}
.singup-google {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.singup-google a {
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 0px solid;
    background-color: white;
    padding: 10px 10px;
    gap: 60px;
    text-decoration: none;
    color: black;
}
.singup-facebook{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.singup-facebook a{
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 0px solid;
    color: white;
    background-color: #1878f2;
    padding: 10px 10px;
    gap: 52px;
    text-decoration: none;
    color: white;
}
.hr-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
    color: #8a8a8a;
    margin-top: 25px;
}
.hr-box hr {
    margin: 1rem 1px;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 2.25;
    border: 1px solid;
    width: 14rem;
}
.hr-box h4{
    color: white;
}
.singup-email {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 14px 0px;
}
.singup-email a {
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #848485;
    color: white;
    background-color: transparent;
    padding: 8px 10px;
    text-decoration: none;
}
.singup-email a:hover{
    border: 1px solid #dfdfdf;
}
.login-input-group {
    width: 100%;
    margin-top: 20px;
}
.login-input-group label {
    width: 100%;
    color: white;
    font-size: 15px;
    padding: 1px 0px;
}
.login-input-group input#name {
    width: 100%;
    color: white;
    font-size: 15px;
    padding: 5px 5px;
    background: transparent;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid #979797;
}
.forgot-box {
    margin-top: 30px;
    width: 100%;
}
.forgot-btn {
    color: white;
    font-size: 15px;
}
.login-btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0px;
}
.login-btn {
    text-decoration: none;
    background: #3567fd;
    color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0px;
}
.logo-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 20px;
}
.logo-box img{
    width: 10%;
}
@media (min-width: 250px) and (max-width: 768px) {
    .login-close-btn {
        left: 84%;
        width: 0%;
        font-size: 48px;
        color: gray;
        position: relative;
        text-decoration: none;
        bottom: 28%;
    }
}
/* login Section */
/* Forgot-password Section */
.forgot-password {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 128vh;
    padding: 26% 0%;
}
.forgot_password-reset_link {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 126vh;
    padding: 2% 34%;
}
.registe-form-heading {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.forgot-close-btn {
    font-size: 48px;
    color: gray;
    position: relative;
    text-decoration: none;
    width: 0%;
    bottom: 1rem;
    left: 2rem;
}
.forgot-password-detail {
    width: 100%;
    text-align: center;
    margin-top: 14px;
}
.forgot-password-detail p {
    color: white;
    font-size: 17px;
}
.forgot-list {
    width: 100%;
    display: grid;
    padding-left: 2%;
    padding-right: 2%;
}
.forgot-input-group {
    width: 100%;
    margin-top: 45px;
}
.forgot-input-group label {
    width: 100%;
    color: white;
    padding: 2px 0px;
}
.forgot-input-group input#name {
    width: 100%;
    color: white;
    background: transparent;
    padding: 2px 4px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid #979797;
}
.reset-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    padding-bottom: 8%;
}
.reset-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3567fd;
    color: white;
    text-decoration: none;
    width: 100%;
    padding: 10px 0px;
}
.reset-btn:hover {
    color: black;
}
@media (min-width: 250px) and (max-width: 768px) {
    .forgot-password {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 2rem 2rem;
    }
    .forgot-list {
        width: 100%;
        display: grid;
        padding-left: 10px;
        padding-right: 10px;
    }
    .forgot-close-btn {
        font-size: 48px;
        color: gray;
        position: relative;
        text-decoration: none;
        width: 34%;
    }
    .forgot_password-reset_link {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 120vh;
        padding: 2% 5%;
    }
}
@media (min-width: 768px) and (max-width: 1084) {
    .forgot_password-reset_link {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 120vh;
        padding: 2% 18%;
    }
}
/* Forgot-password Section */
/* blog-section */
.blog-section {
    width: 100%;
    background: #131c2c;
    padding: 0rem 11rem;
    padding-top: 6rem;
}
.blog-section-heading {
    width: 100%;
    margin-bottom: 4rem;
}
.all-posts-box {
    width: 100%;
    margin-bottom: 4rem;
    padding: 0rem 2rem;
}
.all-posts-btn {
    text-decoration: none;
    color: #37ffff;
    font-size: 14px;
}
.blog-section-heading h1 {
    color: white;
    font-family: inherit;
    font-style: normal;
    font-optical-sizing: auto;
    font-size: 66px;
}
.all-posts-box{
    width: 100%;
}
.blog-mune {
    width: 100%;
    display: flex;
    justify-content: center;
}
.blog-mune-box {
    width: 98%;
    border: 1px solid #37ffff;
}
.blog-mune-top-box {
    width: 100%;
}
.blog-mune-top-box img {
    width: 100%;
}
.blog-mune-bottom-box {
    width: 100%;
}
.blog-post-box {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 1rem;
    padding: 0rem 1rem;
}
.blog-date {
    width: 100%;
    display: flex;
    justify-content: start;
}
.blog-date h6 {
    color: #909090;
    font-size: 11px;
}
.blog-post {
    width: 100%; 
    display: flex;
    justify-content: end;
}
.blog-links{
    width: 100%;
    margin-bottom: 8rem;
}
.blog-link-box {
    width: 100%;
    padding: 0px 10px;
    margin-bottom: 1rem;
}
.yem-btn-1 {
    text-decoration: none;
    color: #34f6f6;
    font-size: 20px;
}
.yem-btn-1:hover {
    color: white;
}
.yem-btn-2 {
    text-decoration: none;
    color: white;
    font-size: 15px;
}
.blog-post-homepage {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    border-top: 1px solid #424956;
    display: flex;
    align-items: center;
}
.blog-post-homepage img {
    width: 40%;
}
.view {
    width: 10%;
}
.comment {
    width: 10%;
}
.like {
    width: 80%;
    display: flex;
    justify-content: end;
}
.like img {
    width: 5%;
}
.automatisiert-box {
    width: 100%;
    background-image: url(../image/background-4.png);
    background-color: black;
    background-size: cover;
    background-position: center;
    margin-top: 8rem;
    border-radius: 2rem;
    padding: 6rem 4rem;
}
.automatisiert-heading-box {
    width: 100%;
}
.automatisiert-heading-imgbox {
    width: 100%;
}
.automatisiert-heading {
    width: 100%;
}
.automatisiert-heading h1 {
    color: white;
    font-size: 28px;
}
.automatisiert-heading h4 {
    color: #424956;
    font-size: 16px;
}
.automatisiert-imgbox {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: 14px;
    margin-top: 1rem;
}
.submit-ticket-box {
    background-image: url(../image/large-card.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    margin-top: 6rem;
    border-radius: 18px;
    text-align: center;
    padding: 75px 10px;
}
.submit-ticket-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
}
.submit-ticket-heading h1 {
    color: white;
    font-size: 44px;
}
.submit-ticket-heading p {
    color: white;
    font-size: 14px;
}
.submit-ticket-btnbox {
    width: 100%;
    display: flex;
    justify-content: center;
}
.submit-ticket-btn {
    text-decoration: none;
    border: 1px solid white;
    color: black;
    background: #37ffff;
    font-size: 14px;
    padding: 15px 30px;
    border-radius: 4px;
}
.submit-ticket-btn:hover {
    border: 0px;
    color: white;
    background: #3567fd;
}
@media (min-width: 360px) and (max-width: 768px) {
    .blog-section {
        padding: 0rem 2rem;
    }
    .all-posts-box {
        padding: 0rem 0rem;
    }
    .blog-mune-box {
        margin-bottom: 2rem;
    }
    .automatisiert-heading-box {
        text-align: center;
    }
    .automatisiert-imgbox {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
}
/* blog-section */
/* Profil Section */
.profil-section {
    width: 100%;
    background: rgb(19, 28, 44);
    padding: 4% 4%;
}
.profil-menu-box {
    width: 100%;
    border: 1px solid #37ffff;
}
.profil-box {
    width: 100%;
    padding: 7% 5%;
}
.profil-heading {
    width: 100%;
}
.profil-heading {
    width: 100%;
}
.profil-heading h1 {
    color: white;
    font-size: 26px;
}
form {
    width: 100%;
}
.profil-input-group {
    width: 100%;
}
.profil-input-group label {
    color: #37ffff;
    font-size: 15px;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 4px;
}
.profil-input-group input {
    width: 100%;
    background: transparent;
    border: 1px solid #37ffff;
    color: white;
    font-size: 16px;
    padding: 10px 10px;
}
.profil-input-group input {
    width: 100%;
    background: transparent;
    border: 1px solid #37ffff;
    color: white;
    font-size: 16px;
    padding: 10px 10px;
}
.profil-input-group select {
    width: 100%;
    background: transparent;
    border: 1px solid #37ffff;
    color: white;
    font-size: 16px;
    padding: 10px 10px;
}
.profil-input-group option {
    color: black;
}
.update-profil-box {
    width: 100%;
    margin-top: 10%;
}
.update-profil-btn {
    width: 45%;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #37ffff;
    padding: 8px 0px;
    margin-top: 24px;
}
.update-profil-btn:hover {
    background: #2345a9;
}
.secturity-box {
    width: 100%;
    padding: 6% 5%;
}
.secturity-heading {
    width: 100%;
}
.secturity-heading h1{
    color: white;
    font-size: 26px;
}
.personal-code-box {
    width: 100%;
    border: 1px solid #37ffff;
    padding: 5% 5%;
}
.personal-code-box h4{
    color: #37ffff;
    font-size: 16px;
}
.personal-code-box p {
    color: white;
    font-size: 14px;
}
.personal-code {
    width: 100%;
    display: flex;
}
.personal-code input {
    width: 14%;
    height: 50px;
    border: 1px solid #37ffff;
    background: transparent;
    color: white;
    text-align: center;
    font-size: 18px;
    margin: 0%;
}
.update-code-btn {
    text-decoration: none;
    color: white;
    border: 2px solid #37ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36%;
    font-size: 15px;
    font-weight: 600;
    margin-left: 8%;
}
.update-code-btn:hover {
    background: #2345a9;
}
form h1 {
    color: white;
    font-size: 24px;
    margin-top: 30px;
}
.secturity-input-group {
    width: 100%;
}
.secturity-input-group label {
    color: #37ffff;
    font-size: 15px;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
} 
.secturity-input-group input {
    width: 100%;
    background: transparent;
    border: 1px solid #37ffff;
    color: white;
    font-size: 16px;
    padding: 10px 10px;
}
.security-code {
    width: 100%;
    display: flex;
    padding: 6px 20px;
}
.security-code-btn {
    width: 45%;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    border: 2px solid #37ffff;
    padding: 8px 0px;
    margin-top: 24px;
}
.security-code-btn:hover {
    background: #2345a9;
}
.withdrawal-section {
    width: 100%;
    background: rgb(19, 28, 44);
    padding: 0% 4%;
    padding-bottom: 8%;
}
.withdrawal-box {
    width: 100%;
    padding: 7% 5%;
}
.withdrawal-heading {
    width: 100%;
}
.withdrawal-heading h1 {
    color: white;
    font-size: 26px;
}
.withdrawal-menu-box {
    width: 100%;
    border: 1px solid #37ffff;
    margin-top: 4%;
    padding: 12px 18px;
}
.withdrawal-input-group {
    width: 100%;
    padding-bottom: 6px;
}
.withdrawal-input-group label {
    color: #37ffff;
    width: 100%;
    font-size: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.withdrawal-input-group input {
    width: 100%;
    background: transparent;
    border: 1px solid #37ffff;
    padding: 10px 15px;
    color: white;
    font-size: 15px;
}
/* Profil Section */
/* Myteam Section */
.myteam-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 4rem 4rem;
}
.myteam-box {
    width: 100%;
    border: 1px solid #37ffff;
    background: black;
    padding: 2rem 8rem;
    padding-bottom: 14%;
}
.myteam-menu-box {
    width: 100%;
    padding: 0rem 4rem;
}
.myteam-menu-heading {
    width: 100%;
    margin-bottom: 4rem;
}
.myteam-menu-heading h1 {
    color: white;
    font-size: 26px;
}
.myteam-menu-heading h2 {
    color: #37ffff;
    font-size: 16px;
}
.myteam-menu-heading h4 {
    color: white;
    font-size: 14px;
}
.referral-link-box {
    width: 100%;
    margin-top: 2rem;
}
.referral-link-box h2 {
    color: #37ffff;
    font-size: 16px;
}
.referral-link-box a {
    color: white;
    font-size: 16px;
}
.customers-status-box {
    width: 100%;
}
.customers-status-heading{
    width: 100%;
    text-align: center;
}
.customers-status-heading h1 {
    color: #37ffff;
    font-size: 20px;
}
.customers-status-date {
    width: 100%;
}
.customers-status-input-group {
    width: 100%;
    margin-bottom: 3rem;
}
.customers-status-input-group label {
    width: 100%;
    color: #1effff;
    font-size: 14px;
}
.customers-status-input-group input {
    width: 100%;
    background: transparent;
    color: white;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid #14efff;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 8px;
    font-size: 18px;
    cursor: pointer;
}
.customers-status-input-group input:hover {
    border-bottom: 1px solid #2345a9;
}
.customers-status-menu-box {
    width: 100%;
    margin-top: 6%;
}
.customers-status-menu {
    width: 100%;
    margin-top: 2rem;
    text-align: center;
}
.customers-status-heading {
    width: 100%;
    margin-bottom: 2%;
}
.page-link {
    font-size: 12px;
}
.customers-status-typ {
    color: white;
    font-size: 15px;
    text-decoration: none;
}
.customers-status-typ:hover {
    color: #14efff;
}
.customers-status-detail {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid white;
    margin-top: 8rem;
    margin-bottom: 3rem;
}
.customers-status-detail-box{
    width: 100%;
}
.customers-status-detail thead {
    width: 100%;
    text-align: center;
    background: #37ffff;
    border-bottom: 3px solid white;
}
.customers-status-detail thead th {
    color: black;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 6px;
}
.customers-status-detail tbody {
    width: 100%;
    text-align: center;
}
.customers-status-detail tbody td {
    color: white;
    font-size: 15px;
    padding: 8px 0px;
    height: 4rem;
}
.customers-status-detail tbody tr:hover {
    background: rgb(5 19 36);
}
@media (min-width: 264px) and (max-width: 768px) {
    .myteam-section {
        padding: 4rem 2rem;
    }
    .myteam-box {
        padding: 2rem 2rem;
        padding-bottom: 26%;
    }
    .customers-status-detail-box {
        overflow-x: auto;
        margin-bottom: 5%;
    }
    .customers-status-detail {
        margin-bottom: 0rem;
        margin-top: 2rem;
    }
    .myteam-menu-box {
        width: 100%;
        padding: 0rem 2rem;
    }
    .customers-status-detail tbody td {
        color: white;
        font-size: 15px;
        padding: 8px 14px;
        height: 4rem;
    }
}
@media (min-width: 768px) and (max-width: 994px) {
    .customers-status-detail-box {
        overflow-x: auto;
        margin-bottom: 5%;
    }
    .myteam-menu-box {
        width: 100%;
        padding: 0rem 6rem;
    }
    .customers-status-detail tbody td {
        color: white;
        font-size: 15px;
        padding: 8px 14px;
        height: 4rem;
    }
    .myteam-box {
        padding: 2rem 4rem;
        padding-bottom: 14%;
    }
}
@media (min-width: 994px) and (max-width: 1236px) {
    .myteam-box {
        padding: 2rem 2rem 14%;
    }
    .customers-status-detail tbody td {
        color: white;
        font-size: 15px;
        padding: 8px 14px;
        height: 4rem;
    }
}
/* Myteam Section */
/* Yem News Section */
.yem-news-section {
    width: 100%;
    background: #131c2c;
}
.featured-items-box {
    width: 100%;
    background: black;
    padding: 0rem 2rem;
}
.featured-items-heading {
    width: 100%;
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 2rem;
}
.featured-items-heading h1 {
    color: white;
    font-size: 44px;
}
.featured-items-text {
    width: 100%;
    text-align: center;
    padding-bottom: 5rem;
}
.featured-items-text p {
    color: white;
    font-size: 14px;
}
.news-item-menu {
    width: 100%;
    padding: 5rem 8rem;
}
.news-item-box {
    width: 100%;
    padding-top: 2rem;
}
.news-item-detal {
    width: 100%;
}
.news-item-detal img {
    width: 100%;
    height: 100%;
}
.news-item-heading {
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.news-item-heading h1 {
    color: white;
    font-size: 21px;
}
.news-item-text {
    width: 100%;
}
.news-item-text p {
    color: white;
    font-size: 15px;
    padding-bottom: 2rem;
}
.read-more-box {
    width: 100%;
    padding-bottom: 12px;
}
.read-more-btn {
    color: white;
    font-size: 14px;
}
@media (min-width: 250px) and (max-width: 768px) {
    .news-item-menu {
        width: 100%;
        padding: 1rem 2rem;
    }
}
/* Yem News Section */
/* History Section */
.history-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 4rem 4rem;
}
.history-box {
    width: 100%;
    border: 1px solid #37ffff;
    background: black;
    padding: 2rem 8rem;
    padding-bottom: 10%;
}
.history-menu-box {
    width: 100%;
    padding: 0rem 4rem;
}
.history-menu-heading {
    width: 100%;
    margin-bottom: 4rem;
}
.history-menu-heading h1 {
    color: white;
    font-size: 26px;
}
.history-menu-heading h2 {
    color: #37ffff;
    font-size: 16px;
}
.history-menu-heading h4 {
    color: white;
    font-size: 14px;
}
.information-box {
    width: 100%;
    margin-top: 2rem;
}
.information-box h2 {
    color: #37ffff;
    font-size: 16px;
}
.information-box a {
    color: white;
    font-size: 16px;
    text-decoration: none;
}
.history-status-box {
    width: 100%;
}
.history-status-heading{
    width: 100%;
}
.history-status-heading h1 {
    color: #37ffff;
    font-size: 20px;
}
.history-pdf a {
    color: #37ffff;
    font-size: 15px;
    text-decoration: none;
}
.history-status-date {
    width: 100%;
}
.history-status-input-group {
    width: 100%;
    margin-bottom: 3rem;
}
.history-status-input-group label {
    width: 100%;
    color: #1effff;
    font-size: 14px;
}
.history-status-input-group input {
    width: 100%;
    background: transparent;
    color: white;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid #14efff;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 8px;
    font-size: 18px;
    cursor: pointer;
}
.history-status-input-group input:hover {
    border-bottom: 1px solid #2345a9;
}
.history-status-menu {
    width: 100%;
    margin-top: 6rem;
}
.history-status-heading {
    width: 100%;
}
.history-pdf {
    color: #37ffff;
    font-size: 15px;
}
.history-status-typ:hover {
    color: #14efff;
}
.history-status-typ {
    color: white;
    font-size: 15px;
    text-decoration: none;
}
.history-status-detail {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid white;
    margin-top: 8rem;
    margin-bottom: 1rem;
}
.history-status-detail thead {
    width: 100%;
    text-align: center;
    background: #37ffff;
    border-bottom: 3px solid white;
}
.history-status-detail thead th {
    color: black;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 6px;
}
.history-status-detail tbody {
    width: 100%;
    text-align: center;
}
.history-status-detail tbody td {
    color: white;
    font-size: 15px;
    padding: 8px 0px;
    height: 4rem;
}
.history-status-detail tbody tr:hover {
    background: rgb(5 19 36);
}
@media (min-width: 360px) and (max-width: 768px) {
    .history-section {
        padding: 4rem 2rem;
    }
    .history-box {
        padding: 2rem 2rem;
        padding-bottom: 20%;
    }
    .history-status-menu {
        width: 100%;
        margin-top: 6rem;
    }
    .history-status-detail {
        margin-bottom: 0rem;
        margin-top: 2rem;
    }
}
@media (min-width: 768px) and (max-width: 994px) {
    .customers-status-detail-box {
        overflow-x: auto;
        margin-bottom: 5%;
    }
    .history-status-detail {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
}
/* History Section */
/* Archive Section */
.archive-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 4rem 4rem;
}
.archive-box {
    width: 100%;
    border: 1px solid #37ffff;
    background: black;
    padding: 2rem 8rem;
}
.archive-menu-box {
    width: 100%;
    padding: 0rem 4rem;
}
.archive-menu-heading {
    width: 100%;
    margin-bottom: 4rem;
}
.archive-menu-heading h1 {
    color: white;
    font-size: 26px;
}
.archive-menu-heading h2 {
    color: #37ffff;
    font-size: 16px;
}
.archive-menu-heading h4 {
    color: white;
    font-size: 14px;
}
.information-box {
    width: 100%;
    margin-top: 2rem;
}
.information-box h2 {
    color: #37ffff;
    font-size: 16px;
}
.information-box a {
    color: white;
    font-size: 16px;
    text-decoration: none;
}
.archive-status-box {
    width: 100%;
}
.archive-status-heading{
    width: 100%;
}
.archive-status-heading h1 {
    color: #37ffff;
    font-size: 20px;
}
.archive-pdf a {
    color: #37ffff;
    font-size: 15px;
    text-decoration: none;
}
.archive-status-date {
    width: 100%;
}
.archive-status-input-group {
    width: 100%;
    margin-bottom: 3rem;
}
.archive-status-input-group label {
    width: 100%;
    color: #1effff;
    font-size: 14px;
}
.archive-status-input-group input {
    width: 100%;
    background: transparent;
    color: white;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid #14efff;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 8px;
    font-size: 18px;
    cursor: pointer;
}
.archive-status-input-group input:hover {
    border-bottom: 1px solid #2345a9;
}
.archive-status-menu {
    width: 100%;
    margin-top: 6rem;
}
.archive-status-heading {
    width: 100%;
}
.archive-pdf {
    color: #37ffff;
    font-size: 15px;
}
.archive-status-typ:hover {
    color: #14efff;
}
.archive-status-typ {
    color: white;
    font-size: 15px;
    text-decoration: none;
}
.archive-status-detail {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid white;
    margin-top: 2rem;
    margin-bottom: 18rem;
}
.archive-status-detail thead {
    width: 100%;
    text-align: center;
    background: #37ffff;
    border-bottom: 3px solid white;
}
.archive-status-detail thead th {
    color: black;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 6px;
}
.archive-status-detail tbody {
    width: 100%;
    text-align: center;
}
.archive-status-detail tbody td {
    color: white;
    font-size: 15px;
    padding: 8px 0px;
    height: 4rem;
}
.archive-status-detail tbody tr:hover {
    background: rgb(5 19 36);
}
@media (min-width: 360px) and (max-width: 768px) {
    .archive-section {
        padding: 4rem 2rem;
    }
    .archive-box {
        padding: 2rem 2rem;
    }
    .archive-status-menu {
        width: 100%;
        margin-top: 6rem;
        overflow-x: auto;
    }
    .archive-status-detail {
        margin-bottom: 0rem;
    }
}

/* Archive Section */
/* Deposit Membership Section */
.membership-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 4rem 4rem;
}
.deposit-membership-box {
    width: 100%;
    padding: 1rem 10rem;
}
.membership-box-1 {
    width: 100%;
    height: 100%;
    background: #4c4d4e;
    padding: 2rem 4rem;
    border: 1px solid #37ffff;
}
.membership-box-2 {
    width: 100%;
    height: 100%;
    background: black;
    padding: 2rem 4rem;
    border: 1px solid #37ffff;
}
.membership-heading_box {
    width: 100%;
    text-align: center;
}
.membership-heading {
    width: 100%;
}
.membership-heading h1 {
    color: white;
    font-size: 28px;
}
.membership-prise {
    width: 100%;
}
.membership-prise h2 {
    color: #37ffff;
    font-size: 26px;
    font-weight: 600;
}
.membership-detail-box {
    width: 100%;
}
.membership-detail-heading {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 1rem ;
}
.membership-detail-heading h1 {
    color: white;
    font-size: 20px;
    font-weight: 700;
}
.valid-heading{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1rem ;
}
.valid-heading h2 {
    color: white;
    font-size: 20px;
    font-weight: 500;
}
.membership-detail-text {
    width: 100%;
    padding-top: 1rem;
}
.membership-detail-text li {
    color: white;
    font-size: 16px;
    padding-top: 4px;
}
.memberships-btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
    margin-bottom: 25px;
}
a.memberships-btn {
    width: 66%;
    text-align: center;
    text-decoration: none;
    color: black;
    background: #37ffff;
    border-radius: 8px;
    padding: 2px 0px;
    font-size: 17px;
}
a.memberships-btn:hover {
    color: white;
    background: #3257c7;
}

@media (max-width: 320px) {
    .deposit-membership-box {
        width: 100%;
        padding: 1rem 2rem;
    }
    .membership-section {
        padding: 4rem 0rem;
    }
    .membership-box-1 {
        padding: 2rem 1rem;
    }
    .membership-box-2 {
        padding: 2rem 1rem;
    }
}

@media (min-width: 321px) and (max-width: 375px) {
    .deposit-membership-box {
        width: 100%;
        padding: 1rem 2rem;
    }
    .membership-section {
        padding: 4rem 0rem;
    }
    .membership-box-1 {
        padding: 2rem 1rem;
    }
    .membership-box-2 {
        padding: 2rem 1rem;
    }
}

@media (min-width: 376px) and (max-width: 425px) {
    .deposit-membership-box {
        width: 100%;
        padding: 1rem 4rem;
    }
    .membership-section {
        padding: 4rem 0rem;
    }
    .membership-box-1 {
        padding: 2rem 1rem;
    }
    .membership-box-2 {
        padding: 2rem 1rem;
    } 
}

@media (min-width: 426px) and (max-width: 600px) {
    .deposit-membership-box {
        width: 100%;
        padding: 1rem 4rem;
    }
    .membership-section {
        padding: 4rem 0rem;
    }
    .membership-box-1 {
        padding: 2rem 1rem;
    }
    .membership-box-2 {
        padding: 2rem 1rem;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .deposit-membership-box {
        width: 100%;
        padding: 1rem 4rem;
    }
    .membership-section {
        padding: 4rem 0rem;
    }
    .membership-box-1 {
        padding: 2rem 1rem;
    }
    .membership-box-2 {
        padding: 2rem 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .deposit-membership-box {
        width: 100%;
        padding: 1rem 4rem;
    }
    .membership-section {
        padding: 4rem 0rem;
    }
    .membership-box-1 {
        padding: 2rem 1rem;
    }
    .membership-box-2 {
        padding: 2rem 1rem;
    }
}
/* Deposit Membership Section */
/* Shopping Cart Section */
.shopping-cart-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 5rem 5rem;
}
.shopping-cart-box {
    width: 100%;
    background: black;
    border: 1px solid #37ffff;
    padding: 2rem 3rem;
    margin-bottom: 4rem;
}
.shopping-cart-top {
    width: 100%;
}
.shopping-cart-heading {
    width: 100%;
}
.shopping-cart-heading h1 {
    color: white;
    font-size: 25px;
}
.shopping-cart-titel {
    width: 100%;
    margin: 14px 0px;
}
.shopping-cart-imgbox {
    width: 100%;
}
.shopping-cart-titel-heading {
    width: 100%;
    margin-bottom: 2%;
}
.shopping-cart-titel-heading h1 {
    color: white;
    font-size: 16px;
}
.shopping-cart-titel-heading h2 {
    color: white;
    font-size: 16px;
}
.order-detail-box {
    width: 100%;
    margin-top: 2%;
}
.order-detail-heding {
    width: 100%;
}
.order-detail-heding h1 {
    color: white;
    font-size: 20px;
}
.order-detail {
    width: 100%;
    margin-top: 1rem;
}
.order-detail-prise {
    width: 100%;
}
.order-detail-prise-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.order-detail-prise h4 {
    color: white;
    font-size: 16px;
    margin-top: 2%;
}
#div_subtotal {
    text-align: end;
}
#div_vat {
    text-align: end;
}
h4#div_total_amount {
    text-align: end;
}
.order-buy-btnbox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
a.paypal-btn{
    text-decoration: none;
    color: black;
    background: #ffe58b;
    width: 100%;
    text-align: center;
    padding: 1rem 0rem;
    border-radius: 5px;
    font-size: 14px;
}
a.paypal-btn:hover {
    color: white;
    background:black;
}
a.checkouy-btn{
    text-decoration: none;
    color: white;
    background: #3567fd;
    width: 100%;
    text-align: center;
    padding: 1rem 0rem;
    border-radius: 5px;
    font-size: 14px;
}
a.checkouy-btn:hover{
    color: white;
    background: black;
}
.shopping-bottom {
    width: 100%;
    margin-bottom: 4rem;
}
.order-notice-box {
    width: 100%;
}
.order-notice-headind {
    width: 100%;
}
.order-notice-headind h4 {
    color: #37ffff;
    font-size: 15px;
}
.notice-box {
    width: 40%;
    border: 1px solid #37ffff;
    display: flex;
    background: #282828;
    color: gray;
    padding: 1rem 1rem;
}
.notice-box:hover {
    background: white;
}
#notice {
    width: 100%;
}
@media (min-width: 360px) and (max-width: 768px) {
    .shopping-cart-imgbox {
        width: 100%;
        margin-bottom: 2rem;
    }
    .order-notice-box {
        margin-top: 4rem;
    }
    .notice-box {
        width: 100%
    }
}/* Shopping Cart Section */
.shopping-cart-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 5rem 5rem;
}
.shopping-cart-box {
    width: 100%;
    background: black;
    border: 1px solid #37ffff;
    padding: 2rem 3rem;
    margin-bottom: 4rem;
}
.shopping-cart-top {
    width: 100%;
}
.shopping-cart-heading {
    width: 100%;
}
.shopping-cart-heading h1 {
    color: white;
    font-size: 25px;
}
.shopping-cart-titel {
    width: 100%;
    margin: 14px 0px;
}
.shopping-cart-imgbox {
    width: 100%;
}
.shopping-cart-titel-heading {
    width: 100%;
    margin-bottom: 2%;
}
.shopping-cart-titel-heading h1 {
    color: white;
    font-size: 16px;
}
.shopping-cart-titel-heading h2 {
    color: white;
    font-size: 16px;
}
.order-detail-box {
    width: 100%;
    margin-top: 2%;
}
.order-detail-heding {
    width: 100%;
}
.order-detail-heding h1 {
    color: white;
    font-size: 20px;
}
.order-detail {
    width: 100%;
    margin-top: 1rem;
}
.order-detail-prise {
    width: 100%;
}
.order-detail-prise-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.order-detail-prise h4 {
    color: white;
    font-size: 16px;
    margin-top: 2%;
}
#div_subtotal {
    text-align: end;
}
#div_vat {
    text-align: end;
}
h4#div_total_amount {
    text-align: end;
}
.order-buy-btnbox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
a.paypal-btn{
    text-decoration: none;
    color: black;
    background: #ffe58b;
    width: 100%;
    text-align: center;
    padding: 1rem 0rem;
    border-radius: 5px;
    font-size: 14px;
}
a.paypal-btn:hover {
    color: white;
    background:black;
}
a.checkouy-btn{
    text-decoration: none;
    color: white;
    background: #3567fd;
    width: 100%;
    text-align: center;
    padding: 1rem 0rem;
    border-radius: 5px;
    font-size: 14px;
}
a.checkouy-btn:hover{
    color: white;
    background: black;
}
.shopping-bottom {
    width: 100%;
    margin-bottom: 4rem;
}
.order-notice-box {
    width: 100%;
}
.order-notice-headind {
    width: 100%;
}
.order-notice-headind h4 {
    color: #37ffff;
    font-size: 15px;
}
.notice-box {
    width: 40%;
    border: 1px solid #37ffff;
    display: flex;
    background: #282828;
    color: gray;
    padding: 1rem 1rem;
}
.notice-box:hover {
    background: white;
}
#notice {
    width: 100%;
}
@media (min-width: 360px) and (max-width: 768px) {
    .shopping-cart-imgbox {
        width: 100%;
        margin-bottom: 2rem;
    }
    .order-notice-box {
        margin-top: 4rem;
    }
    .notice-box {
        width: 100%
    }
}
/* Shopping Cart Section */
/* Complete Order Section */
.complete-order-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 5rem 5rem;
}
.complete-order-box {
    width: 100%;
    background: black;
    border: 1px solid #37ffff;
    padding: 2rem 10rem;
    margin-bottom: 4rem;
}
.complete-order-left-box {
    width: 100%;
    margin-bottom: 4rem;
}
.complete-order-left-heading {
    width: 100%;
}
.complete-order-left-heading h1 {
    color: white;
    font-size: 25px;
}
.express-checkout-box {
    width: 70%;
}
.express-checkout-heding {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.express-checkout-heding h4 {
    color: #1fffff;
}
.customer-information {
    width: 70%;
}
.customer-information-heading {
    width: 100%;
    margin-top: 22px;
}
.customer-information-heading h4 {
    color: white;
    font-size: 15px;
}
.customer-input-group {
    width: 100%;
    margin-top: 1rem;
}
.customer-input-group label {
    width: 100%;
    color: #15efff;
    font-size: 14px;
    padding-bottom: 4px;
}
.customer-input-group input {
    width: 100%;
    color: black;
    font-size: 16px;
    padding: 8px 5px;
    margin-bottom: 2px;
}
.further-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 26px;
    margin-bottom: 8rem;
}
.further-btn {
    width: 100%;
    background: #3567fd;
    color: white;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    padding: 10px 0px;
    border-radius: 6px;
}
.further-btn:hover {
    color: white;
    background: black;
}
.complete-order-right-box {
    width: 100%;
}
.order-view-heading {
    width: 100%;
}
.order-view-heading h1 {
    color: #37ffff;
    font-size: 21px;
}
.edit-btn {
    color: #37ffff;
    font-size: 15px;
}
.membership-img {
    width: 100%;
}.membership-img img {
    width: 100%;
}
.complete-order-detail-img {
    width: 100%;
}
.complete-order-detail-img img{
    width: 100%;
}
.complete-order-detail {
    width: 100%;
}
.complete-order-detail-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.complete-order-detail h4 {
    color: white;
    font-size: 16px;
}
.payment-process-status {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}
.payment-process-status p {
    color: #37ffff;
    font-size: 15px;
}
.complete-order-prise {
    width: 100%;
    display: flex;
    justify-content: end;
}
.complete-order-prise ul {
    list-style: none;
}
.complete-order-prise ol {
    color: white;
    font-size: 16px;
}
.complete-order-prise li {
    color: white;
    font-size: 16px;
}
@media (min-width: 260px) and (max-width: 768px) {
    .complete-order-section {
        width: 100%;
        background-image: url(../image/background-img.jpg);
        background-size: cover;
        background-position: center;
        padding: 5rem 1rem;
    }
    .complete-order-box {
        width: 100%;
        background: black;
        border: 1px solid #37ffff;
        padding: 2rem 1rem;
        margin-bottom: 4rem;
    }
    .express-checkout-box {
        width: 100%;
    }
    .customer-information {
        width: 100%;
    }
    .complete-order-detail {
        width: 100%;
        margin-top: 2rem;
    }
    .complete-order-detail-img img {
        width: 24%;
    }
    .complete-order-box {
        padding: 2rem 2rem;
    }
}
@media (min-width: 768px) and (max-width: 999px) {
    .complete-order-section {
        width: 100%;
        background-image: url(../image/background-img.jpg);
        background-size: cover;
        background-position: center;
        padding: 5rem 4rem;
    }
    .complete-order-box {
        width: 100%;
        background: black;
        border: 1px solid #37ffff;
        padding: 2rem 3rem;
        margin-bottom: 4rem;
    }
}
/* Complete Order Section */
/* Checkout Payment Section */
.complete-order-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 5rem 5rem;
}
.complete-order-box {
    width: 100%;
    background: black;
    border: 1px solid #37ffff;
    padding: 2rem 10rem;
    margin-bottom: 4rem;
}
.order-view-heading h4 {
    color: white;
    font-size: 15px;
}
.payment-optcion-box {
    width: 100%;
    margin-top: 2rem;
}
.payment-optcion-input-group {
    border: 1px solid #37ffff;
    width: 94%;
    padding: 15px 12px;
    display: flex;
    align-items: center;
}
.payment-optcion-input-group input{
    width: 10%;
    height: 18px;
}
.payment-optcion-input-group label {
    display: inline-block;
    font-size: 20px;
    color: white;
}
.terms-and-conditions-box {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 2rem;
}
.terms-and-conditions-box p {
    font-size: 14px;
    color: white;
}
.terms-and-conditions-input-group {
    width: 100%;
    display: flex;
}
.terms-and-conditions-input-group input {
    width: 8%;
    height: 18px;
    margin: 10px 0px;
}
.terms-and-conditions-input-group p{
    font-size: 15px;
    color: white;
    margin-left: 10px;
}
.Order-btn {
    width: 100%;
    background: #3567fd;
    color: white;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    padding: 12px 0px;
    border-radius: 6px;
}
.Order-btn:hover {
    color: black;
    background: #99B2FE;
}
@media (min-width: 360px) and (max-width: 768px) {
    .complete-order-section {
        padding: 5rem 2rem;
    }
    .complete-order-box {
        padding: 2rem 2rem;
    }
}
/* Checkout Payment Section */
/* Order Confirmation Section */
.order-confirmation-section {
    width: 100%;
    background-image: url(../image/background-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 4rem 5rem;
}
.order-confirmation-box {
    width: 100%;
    border: 1px solid #37ffff;
    background: black;
    padding: 2rem 12rem;
    margin-bottom: 4rem;
}
.order-confirmation-menu-box {
    width: 100%;
}
.order-confirmation-menu-heading {
    width: 100%;
    margin-bottom: 4rem;
}
.order-confirmation-menu-heading h1 {
    color: white;
    font-size: 26px;
}
.order-confirmation-menu-heading h2 {
    color: #37ffff;
    font-size: 16px;
}
.order-confirmation-menu-heading h4 {
    color: white;
    font-size: 14px;
}
.order-confirmation-pdf {
    color: #37ffff;
    font-size: 15px;
}
.referral-link-box {
    width: 100%;
    margin-top: 2rem;
}
.referral-link-box h2 {
    color: #37ffff;
    font-size: 16px;
}
.referral-link-box a {
    color: white;
    font-size: 16px;
}
.order-confirmation-box {
    width: 100%;
}
.order-confirmation-heading{
    width: 100%;
}
.order-confirmation-heading h1 {
    color: #37ffff;
    font-size: 20px;
}
.order-confirmation-date {
    width: 100%;
}
.order-confirmation-input-group {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.order-confirmation-input-group label {
    width: 100%;
    color: #37ffff;
    font-size: 14px;
}
.order-confirmation-input-group input#name {
    width: 100%;
    padding: 1rem 1rem;
    color: white;
    background: transparent;
    border: 1px solid #37ffff;
}
.confirmation-deatil-heading {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 4rem;
}
.confirmation-deatil-heading h2 {
    color: #37ffff;
    font-size: 20px;
}
.confirmation-deatil-heading p {
    color: white;
    font-size: 18px;
}
.order-confirmation-detail {
    width: 100%;
    border: 1px solid #37ffff;
    padding: 5rem 6rem;
    padding-bottom: 8rem;
}
.order-confirmation-top-box {
    width: 100%;
    margin-bottom: 4rem;
}
.order-confirmation-box-1 {
    width: 100%;
}
.order-confirmation-box-2 {
    width: 100%;
    text-align: end;
}
.order-img {
    width: 100%;
}
.order-name {
    width: 100%;
}
.order-name h2 {
    color: white;
    font-size: 16px;
}
.order-amount {
    width: 100%;
}
.order-amount h4 {
    color: white;
    font-size: 16px;
}
.order-prise {
    width: 100%;
}
.order-prise h4 {
    color: white;
    font-size: 16px;
}
.order-confirmation-bottom-box {
    width: 100%;
    display: flex;
    justify-content: end;
    margin-top: 2rem;
}
.order-confirmation-bottom-prise {
    width: 35%;
}
.order-confirmation-bottom-prise h4 {
    color: white;
    font-size: 16px;
    margin-bottom: 6px
}
.order-confirmation-bottom-prise h2 {
    color: white;
    font-size: 20px;
}
.order-confirmation-prise-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.order-confirmation-address {
    border: 1px solid #37ffff;
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 4rem;
}
.confirmation-address-box {
    width: 100%;
    padding: 3rem 6rem;
}
.confirmation-address-box p {
    color: white;
    font-size: 15px;
}
@media (min-width: 769px) and (max-width: 925px) {
    .order-confirmation-bottom-prise {
        width: 60%;
    }
}
@media (min-width: 360px) and (max-width: 768px) {
    .order-confirmation-section {
        padding: 4rem 2rem;
    }
    .order-confirmation-box {
        padding: 2rem 2rem;
    }
    .referral-link-box {
        margin-bottom: 2rem;
    }
    .order-name {
        margin-top: 2rem;
    }
    .order-confirmation-bottom-prise {
        width: 100%;
    }
    .order-confirmation-box-2 {
        width: 100%;
        text-align: inherit;
        margin-top: 2rem;
    }
}
/* Order Confirmation Section */
/* Privacy Policy Section */
.privacy-policy-section {
    width: 100%;
    background-image: url(../image/background-3.jpg);
    background-size: cover;
    background-position: center;
    padding-left: 10rem;
    padding-right: 10rem;
    padding-bottom: 10rem;
}
.privacy-policy-section-heading {
    width: 100%;
    margin-bottom: 5rem;
    padding-top: 1rem;
}
.privacy-policy-section-heading h1 {
    color: white;
    font-size: 64px;
    font-family: system-ui;
}
.privacy-policy-box {
    width: 100%;
    background: #cad7ff;
    padding: 8rem 8rem;
    border-radius: 2rem;
}
.privacy-policy-detail-box {
    width: 100%;
    margin-bottom: 8rem;
}
.privacy-policy-detail-box-1 {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 4rem;
}
.privacy-policy-detail-heading {
    width: 100%;
    margin-bottom: 2rem;
}
.privacy-policy-detail-heading h1 {
    color: black;
    font-size: 22px;
}
.privacy-policy-detail-heading h2 {
    color: #4f4f4f;
    font-size: 22px;
}
.privacy-policy-detail-text {
    width: 100%;
}
.privacy-policy-detail-text p {
    color: #4f4f4f;
    font-size: 15px;
}
.cookies-btn {
    color: #4f4f4f;
}
@media (min-width: 250px) and (max-width: 768px) {
    .privacy-policy-section {
        width: 100%;
        background-image: url(../image/background-3.jpg);
        background-size: cover;
        background-position: center;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 10rem;
    }
    .privacy-policy-box {
        width: 100%;
        background: #cad7ff;
        padding: 2rem 2rem;
        border-radius: 2rem;
    }
    .privacy-policy-section-heading {
        width: 100%;
        margin-bottom: 5rem;
        padding-top: 2rem;
    }
    .privacy-policy-section-heading h1 {
        color: white;
        font-size: 26px;
        font-family: system-ui;
    }
}
/* Privacy Policy Section */
/* Terms & Conditions Section */
.terms-conditions-section {
    width: 100%;
    background-image: url(../image/background-3.jpg);
    background-size: cover;
    background-position: center;
    padding-left: 10rem;
    padding-right: 10rem;
    padding-bottom: 10rem;
}
.terms-conditions-section-heading {
    width: 100%;
    margin-bottom: 5rem;
    padding-top: 2rem;
}
.terms-conditions-section-heading h1 {
    color: white;
    font-size: 50px;
    font-family: system-ui;
}
.terms-conditions-box {
    width: 100%;
    background: #cad7ff;
    padding: 8rem 8rem;
    border-radius: 2rem;
}
.terms-conditions-detail-box {
    width: 100%;
    margin-bottom: 8rem;
}
.terms-conditions-detail-box-1 {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 4rem;
}
.terms-conditions-detail-heading {
    width: 100%;
}
.terms-conditions-detail-heading h1 {
    color: black;
    font-size: 20px;
}
.terms-conditions-detail-heading h4 {
    color: black;
    font-size: 16px;
    font-weight: 600;
}
.terms-conditions-detail-text {
    width: 100%;
}
.terms-conditions-detail-text li {
    color: black;
    font-size: 15px;
}
.terms-conditions-li-box{
    width: 100%;
}
.terms-conditions-li-box ul {
    list-style: none;
}
.terms-conditions-li-box li {
    color: black;
    font-size: 14px;
}
@media (min-width: 250px) and (max-width: 768px) {
    .terms-conditions-section {
        width: 100%;
        background-image: url(../image/background-3.jpg);
        background-size: cover;
        background-position: center;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 10rem;
    }
    .terms-conditions-box {
        width: 100%;
        background: #cad7ff;
        padding: 2rem 2rem;
        border-radius: 2rem;
    }
    .terms-conditions-section-heading {
        width: 100%;
        margin-bottom: 5rem;
        padding-top: 2rem;
    }
    .terms-conditions-section-heading h1 {
        color: white;
        font-size: 26px;
        font-family: system-ui;
    }
}

/* Terms & Conditions Section */
/* blog-post-section */
.blog-post-section {
    width: 100%;
    background: #131c2c;
    padding: 4rem 16rem;
}
.blog-posts-box {
    width: 100%;
    margin-bottom: 4rem;
}
.blog-posts-btn {
    text-decoration: none;
    color: #e7e7e7;
    font-size: 14px;
}
.blog-post-detail-mune {
    width: 100%;
    border: 1px solid white;
    padding: 5rem 9rem;
}
.blog-post-detail-box {
    width: 100%;
    margin-bottom: 2rem;
}
.blog-post-detail-date {
    width: 100%;
    display: flex;
    justify-content: start;
}
.blog-post-detail-date h6 {
    color: #e7e7e7;
    font-size: 14px;
}
.blog-post-detail-post {
    width: 100%; 
    display: flex;
    justify-content: end;
}
.blog-post-detail-mune-heading {
    width: 100%;
}
.blog-post-detail-mune-heading h1 {
    color: white;
    font-size: 40px;
}
.blog-post-mune-heading {
    width: 100%;
    margin: 2rem 0rem;
}
.blog-post-mune-heading h1 {
    color: #37ffff;
    font-size: 18px;
}
.blog-post-mune-detail {
    width: 100%;
    margin: 2rem 0rem;
}
.blog-post-mune-detail p {
    color: white;
    font-size: 14px;
}
.blog-post-detail-mune-imgbox {
    width: 100%;
    margin: 4rem 0rem;
}
.blog-post-detail-mune-imgbox img {
    width: 100%;
}
.blog-mune-detail {
    width: 100%;
    margin-top: 5rem;
}
.blog-mune-heading {
    width: 100%;
}
.blog-mune-heading h1 {
    color: #37ffff;
    font-size: 18px;
}
.blog-mune-text {
    width: 100%;
}
.blog-mune-text p {
    color: white;
    font-size: 14px;
}
.news-page-btn{
    color: #37ffff;
}
.blog-social-media {
    width: 100%;
    margin-top: 10rem;
}
.blog-social-box {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 2rem 0rem;
}
.blog-social-media-box {
    width: 6%;
}
@media (min-width: 360px) and (max-width: 768px) {
    .blog-post-section {
        padding: 4rem 2rem;
    }
    .blog-post-detail-mune {
        padding: 5rem 2rem;
    }
    .blog-social-media-box {
        width: 15%;
    }
}
/* blog-post-section */

/* my new css */

.trading-section-btnbox {
    width: 100%;
    margin-bottom: 1%;
}

.trading-section-btn {
    width: 100%;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    color: #3e3e3e;
    text-decoration: none;
    font-size: 17px;
    font-family: sans-serif;
    font-weight: 100;
    padding: 1% 1%;
    border: 2px solid #f85e01;
}

.trading-section-btn:hover {
    background: #f85e01;
}

.daily-profit-mainbox {
    width: 100%;
    border: 1px solid #37ffff;
    padding: 2% 3%;
}

.personal-pinbox {
    width: 100%;
    margin-top: 4%;
    margin-bottom: 4%;
}

.personal-pinbox label{
    width: 100%;
    color: #37ffff;
    font-size: 1.5rem;
}

.personal-pinbox input{
    width: 100%;
    height: 5rem;
    margin-top: 2%;
    font-size: 2rem;
    padding: 1% 4%;
    color: white;
    background: #131c2c;
    border: 1px solid #37ffff;
}
.border-left {
    border-left: 1px solid #f85e01;
}
.trading-detail-menu-imgbox {
    width: 100%;
    display: flex;
    justify-content: center;
}

.trading-detail-menu-imgbox img {
    width: 90%;
}

.trading-detail-menu-heading {
    width: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

.trading-detail-menu-heading h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: white;
    font-size: 4rem;
}

.trading-detail-menu-heading p {
    color: white;
    font-size: 1.4rem;
    font-weight: 100;
    font-family: sans-serif;
    margin-top: 5%;
}
.uost-membership-card-section {
    width: 100%;
    padding-left: 2%;
}
.uost-membership-card {
    width: 100%;
    height: 100%;
    background: white;
    border: 2px solid #f85e01;
    padding: 3% 5%;
}
.uost-membership-heading {
    width: 100%;
    text-align: center;
}
.uost-membership-heading p {
    color: #f95e01;
    font-family: inherit;
    font-size: 1.6rem;
    margin-bottom: 0%;
}
.uost-membership-detail {
    width: 100%;
    height: 22rem;
    text-align: center;
    margin-top: 2%;
}
.uost-membership-detail p {
    font-family: sans-serif;
    font-size: 13px;
    color: gray;
    margin-bottom: 0%;
}
.amount-available-box {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    border: 1px solid #f85e01;
    /* margin-top: 20%; */
}
.amount-available-box p {
    margin-top: 0%;
    margin-bottom: 0%;
}
.uost-membership-form-box {
    width: 100%;
    margin-top: 5%;
}
.uost-membership-form {
    width: 100%;
    margin-top: 4%;
}
.uost-membership-form label {
    display: block;
    font-size: 15px;
    font-weight: 100;
    font-family: sans-serif;
    margin-bottom: 6px;
    color: #333;
}

.uost-membership-form .dropdown-wrapper {
    position: relative;
    width: 100%;
}
.uost-membership-form select {
    width: 100%;
    height: 5rem;
    padding: 5% 9% 8% 7%;
    font-size: 16px;
    font-weight: 100;
    font-family: sans-serif;
    color: black;
    border: 1px solid #f85e01;
    border-radius: 10px;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='10' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8% center; 
}

.uost-membership-form input {
    width: 100%;
    height: 5rem;
    font-size: 2rem;
    font-weight: 100;
    font-family: sans-serif;
    color: black;
    border: 1px solid #f85e01;
    padding: 1% 2%;
}

.buy-membership-btnbox {
    width: 100%;
    margin-top: 5%;
}
.buy-membership-btn {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f85e01;
    color: black;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 100;
    font-family: sans-serif;
    border: 1px solid #39fdfc;
}
.buy-membership-btn:hover {
    background: #f9b523;
}

.affiliate-program-box {
    width: 100%;
    background: white;
    border: 2px solid #f85e01;
    padding: 3% 5%;
}
.affiliate-program-heading {
    width: 100%;
    text-align: center;
}
.affiliate-program-heading p {
    color: #f95e01;
    font-family: inherit;
    font-size: 1.6rem;
    margin-bottom: 0%;
}
.affiliate-program-detail {
    width: 100%;
    text-align: center;
    margin-top: 2%;
}
.affiliate-program-detail p {
    font-family: sans-serif;
    font-size: 13px;
    color: gray;
    margin-bottom: 0%;
}    
.affiliate-program-detail ul {
    padding: 8%;
}
.affiliate-program-detail li {
    font-family: sans-serif;
    font-size: 14px;
    color: gray;
    margin-bottom: 0%;
}

.uost-smart-way-heading {
    width: 100%;
}
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.uost-smart-way-heading p {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: white;
    font-size: 26px;
}

.uost-smart-way-card {
    width: 100%;
    background: #e9e9e9;
    border: 2px solid #f85e01;
    text-align: center;
    padding: 10% 5%;
    margin-bottom: 12%;
}
.uost-smart-way-imgbox {
    width: 100%;
}



.termination-agreement-section {
    width: 100%;
    background: #131c2c;
    padding: 4% 15%;
    padding-top: 6%;
}
.termination-agreement-box {
    width: 100%;
    background: white;
}
.termination-agreement-head-box {
    width: 100%;
    padding: 3%;
    border-bottom: 1px solid #f85e01;
}
.termination-agreement-logo {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.termination-agreement-logo img {
    width: 30%;
}
.termination-agreement-head {
    width: 100%;
    display: grid;
    justify-content: flex-start;
}
.termination-agreement-head p {
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #525252;
    margin-bottom: 0%;
    font-weight: 100;
}
.termination-agreement-body {
    width: 100%;
    padding: 3%;
}
.termination-agreement-form {
    width: 100%;
    margin-bottom: 8%;
}
.termination-agreement-form label {
    width: 100%;
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #525252;
    margin-bottom: 0%;
    font-weight: 100;
}
.termination-agreement-form input {
    width: 100%;
    height: 4.6rem;
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #525252;
    margin-bottom: 0%;
    font-weight: 100;
    padding: 2%;
    border-radius: 8px;
    border: 1px solid;
}
.termination-agreement-form select {
    width: 100%;
    height: 4.6rem;
    padding: 5% 9% 8% 7%;
    font-size: 16px;
    font-weight: 100;
    font-family: sans-serif;
    color: black;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='10' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8% center; 
}
.termination-agreement-detail {
    width: 100%;
    margin-top: 3%;
}
.termination-agreement-detail h1 {
    font-family: sans-serif;
    font-size: 2.2rem;
    color: black;
    font-weight: 100;
    margin-bottom: 2%;
}
.termination-agreement-detail p {
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #525252;
    margin-bottom: 0%;
    font-weight: 100;
}
.membership-agreement {
    width: 100%;
    margin-top: 5%;
}
.termination-text {
    width: 100%;
    margin-bottom: 2%;
}
.termination-text p {
    font-family: sans-serif;
    font-size: 13px;
    color: black;
    margin-bottom: 0%;
    font-weight: 100;
}

.membership-agreement-form {
    width: 100%;
    margin-bottom: 8%;
}
.membership-agreement-form label {
    width: 100%;
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #525252;
    margin-bottom: 0%;
    font-weight: 100;
}
.membership-agreement-form input {
    width: 100%;
    height: 4.6rem;
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #525252;
    margin-bottom: 0%;
    font-weight: 100;
    padding: 2%;
    border: 1px solid;
}
.membership-agreement-form select {
    width: 100%;
    height: 4.6rem;
    padding: 4%;
    font-size: 16px;
    font-weight: 100;
    font-family: sans-serif;
    color: black;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='10' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8% center; 
}

.termination-agreement-upload-box {
    width: 100%;
    padding: 3%;
    border-top: 1px solid #f85e01;
}
.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #007bff;
    color: #007bff;
    background-color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-family: sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }

  .upload-btn:hover {
    background-color: transparent;
    color: black;
    border: 1px solid black;
  }

  .upload-btn svg {
    margin-right: 8px;
    fill: currentColor;
  }

  .upload-input {
    display: none;
  }
  
.termination-agreement-upload {
    width: 100%;
    margin-bottom: 8%;
}

.termination-agreement-upload label {
    width: 100%;
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #007bff;
    margin-bottom: 0%;
    font-weight: 100;
}
.termination-agreement-upload input {
    width: 100%;
    height: 4.6rem;
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #007bff;
    margin-bottom: 0%;
    font-weight: 100;
    padding: 2%;
    border-radius: 8px;
    border: 1px solid;
}
.termination-agreement-submit-box {
    width: 100%;
    margin-top: 4%;
}
.termination-agreement-submit {
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 2rem;
    font-weight: 200;
    font-family: sans-serif;
    background: #f9b523;
    border-radius: 6px;
}
.termination-agreement-submit:hover {
    background: #fbd98f;
}







.projects-section {
    width: 100%;
    padding: 2%;
    border-top: 0px;
    border-left: 1px solid #f85e01;
    border-right: 1px solid #f85e01;
    border-bottom: 1px solid #f85e01;
}
.projects-date-list {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0%;
}
.projects-date {
    color: white;
    font-size: 1.9rem;
    font-weight: 400;
    font-family: system-ui;
    padding: 1% 1%;
    background: #182132;
    display: flex;
    justify-content: start;
    align-items: center;
}
.projects-date:hover {
    background: transparent;
}
.custom-col {
    flex: 0 0 20%;
    max-width: 20%;
}
.projects-card {
    width: 100%;
    border: 1px solid #f85e01;
    text-align: center;
}
.projects-card-heading {
    width: 100%;
    height: 5rem;
    background: #e9eaea;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f85e01;
}
.projects-card-heading h1 {
    font-size: 2.2rem;
    font-weight: bold;
    font-family: system-ui;
    padding: 1% 1%;
    color: #f85e01;
}
.projects-card-detail {
    width: 100%;
    height: 65rem;
    background: #e9eaea;
    text-align: center;
    padding: 4% 3%;
}
.projects-card-detail p {
    font-family: sans-serif;
    font-size: 1.3rem;
    color: black;
    margin-bottom: 0%;
    font-weight: 100;
}
.minimum-investment {
    width: 100%;
    padding: 5% 1%;
    background: #e9eaea;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f85e01;
}
.minimum-investment p {
    font-family: sans-serif;
    font-size: 1.5rem;
    color: black;
    margin-bottom: 0%;
    font-weight: 600;
}
.available-balance {
    width: 100%;
    padding: 5% 1%;
    background: #e9eaea;
    text-align: center;
    border-top: 1px solid #f85e01;
}
.available-balance h3 {
    color: #f85e01;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: sans-serif;
}
.available-balance h2 {
    color: black;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: 'Mulish';
}
.money-back-hading {
    width: 100%;
}
.money-back-hading h1 {
    color: #25aa9a;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: 'Mulish';
}
.money-back-detail {
    width: 100%;
    margin-top: 2%;
}
.money-back-detail p {
    color: white;
    font-size: 1.4rem;
    font-weight: 300;
    font-family: 'Mulish';
    margin-bottom: 0%;
}
.money-back-btnbox {
    width: 100%;
    margin-top: 8%;
}
.money-back-btn {
    color: black;
    background: #37ffff;
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 100;
    font-family: sans-serif;
    padding: 2.5% 12%;
}
.money-back-btn:hover {
    background: #25aaaa;
}

@media (max-width: 320px) {
    .uost-membership-card-section {
        padding-left: 0%;
    }
    .uost-membership-card {
        height: 99%;
    }
    .buy-membership-btnbox {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .uost-smart-way-imgbox {
        display: flex;
        justify-content: center;
    }
    .custom-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .termination-agreement-section {
        padding: 4% 2%;
    }
    .complete-order-section {
        padding: 2rem 2rem;
    }
    .complete-order-box {
        padding: 2rem 2rem;
    }
}

@media (min-width: 321px) and (max-width: 375px) {
    .uost-membership-card-section {
        padding-left: 0%;
    }
    .uost-membership-card {
        height: 99%;
    }
    .buy-membership-btnbox {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .uost-smart-way-imgbox {
        display: flex;
        justify-content: center;
    }
    .custom-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .termination-agreement-section {
        padding: 4% 2%;
    }
    .complete-order-section {
        padding: 2rem 2rem;
    }
    .complete-order-box {
        padding: 2rem 2rem;
    }
}

@media (min-width: 376px) and (max-width: 425px) {
    .uost-membership-card-section {
        padding-left: 0%;
    }
    .uost-membership-card {
        height: 99%;
    }
    .buy-membership-btnbox {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .uost-smart-way-imgbox {
        display: flex;
        justify-content: center;
    }
    .custom-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .termination-agreement-section {
        padding: 4% 2%;
    }
}

@media (min-width: 426px) and (max-width: 600px) {
    .uost-membership-card-section {
        padding-left: 0%;
    }
    .uost-membership-card {
        height: 99%;
    }
    .buy-membership-btnbox {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .uost-smart-way-imgbox {
        display: flex;
        justify-content: center;
    }
    .custom-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .termination-agreement-section {
        padding: 4% 2%;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .uost-membership-card-section {
        padding-left: 0%;
    }
    .uost-membership-card {
        height: 99%;
    }
    .buy-membership-btnbox {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .uost-smart-way-imgbox {
        display: flex;
        justify-content: center;
    }
    .custom-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .termination-agreement-section {
        padding: 4% 2%;
    }
}