@extends(template() . 'layout.master2')


@section('content2')
<div class="dashboard-body-part">

    <div class="mobile-page-header">
        <h5 class="title">{{ __('Top Traders') }}</h5>
        <p>Touch to expand</p>
        <a href="{{ route('user.dashboard') }}" class="back-btn"><i class="bi bi-arrow-left"></i> {{ __('Back') }}</a>
    </div>








<!DOCTYPE html>
<!--<html lang="en">-->
  
  
<!--  Design by foolishdeveloper.com -->
  
  
<!--<head>-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <title>Team Section </title>
  <style media="screen">
.g-4, .gy-4 {
    --bs-gutter-y: 1.5rem;
    --bs-gutter-x: -50rem;
}
.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    /* padding-right: calc(var(--bs-gutter-x) * .5); */
    padding-left: 85px;
    /* margin-top: var(--bs-gutter-y); */
}
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Exo;
   }
   @font-face {
     font-family: Exo;
     src: url(./fonts/Exo2.0-Medium.otf);
   }
   .main{
     width: 100%;
     height: 100vh;
     /*display: flex;*/
     justify-content: center;
     align-items: center;
     /*background-color: #0c5db9;*/
         /*flex-direction: column-reverse;*/
   }
   /*.profile-card{*/
   /*  position: relative;*/
   /*  font-family: sans-serif;*/
   /*  width: 220px;*/
   /*  height: 220px;*/
   /*  background: #fff;*/
   /*  padding: 30px;*/
   /*  border-radius: 50%;*/
   /*  box-shadow: 0 0 22px #3336;*/
   /*  transition: .6s;*/
   /*  margin: 10px 25px;*/
   /*}*/
   
   .profile-card {
    position: relative;
    font-family: sans-serif;
    width: 300px;
    height: 300px;
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 0 22px #3336;
    transition: .6s;
    margin: 10px 25px;
}
   
   
   
   /*.profile-card:hover{*/
   /*  border-radius: 10px;*/
   /*  height: 260px;*/
   /*}*/
   .profile-card:hover {
    border-radius: 10px;
    height: 360px;
    padding-bottom: 95px;
    margin-bottom: 95px;
}
/*.profile-card:hover {*/
/*    border-radius: 10px;*/
/*    height: 295px;*/
/*    padding-bottom: 45px;*/
/*}*/
   
   .profile-card .img{
     position: relative;
     width: 100%;
     height: 100%;
     transition: .6s;
     z-index: 99;
   }
   .profile-card:hover .img{
     transform: translateY(-60px);
   }
   .img img{
     width: 100%;
     border-radius: 50%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
   }
   .profile-card:hover img{
     border-radius: 10px;
   }
   /*.caption{*/
   /*  text-align: center;*/
   /*  transform: translateY(-80px);*/
   /*  opacity: 0;*/
   /*  transition: .6s;*/
   /*}*/
   
   .caption {
    text-align: center;
    transform: translateY(-80px);
    opacity: 0;
    transition: .6s;
    padding-top: 33px;
}
   
   .profile-card:hover .caption{
     opacity: 1;
   }
   .caption h3{
     font-size: 21px;
     font-family: sans-serif;
   }
   .caption p{
     font-size: 15px;
     color: #0c52a1;
     font-family: sans-serif;
     margin: 2px 0 9px 0;
   }
   .caption .social-links a{
     color: #333;
     margin-right: 15px;
     font-size: 21px;
     transition: .6s;
   }
   .social-links a:hover{
     color: #0c52a1;
   }
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    /* padding-right: var(--bs-gutter-x,.75rem); */
    /*padding-left: var(--bs-gutter-x,.75rem);*/
    margin-right: auto;
    margin-left: 156px;
}

.fab {
    font-family: "Font Awesome 5 Brands";
    font-size: 23px;
    color: #333;
    margin: 5px;
}
  </style>

<!--</head>-->

<!--<body>-->
    <!--<div class="main">-->
    
    <div class="container">
  <div class="row">
    <div class="col-sm">
        <div class="profile-card">
            <div class="img">
                <img src="https://1.bp.blogspot.com/-8c7QTLoyajs/YLjr2V6KYRI/AAAAAAAACO8/ViVPQpLWVM0jGh3RZhh-Ha1-1r3Oj62wQCNcBGAsYHQ/s16000/team-1-3.jpg">
            </div>
            <div class="caption">
                  <!--<div class="social-links">-->
                  <div class="">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
                <h3 style="color:#333; border-botom:1px; border-color:#111;">Vin Diesel</h3>
                <!--<p>Total Profits Earned: <span style="color:green;">$69,092</span></p>-->

                <!-- <p>Amount Invested: <span style="color:green;">$9,040</span></p>-->
                  <a href="deposit" class="btn btn--blue2 btn--full-width"><span style="color:#fff; font-weight:bold;"><img class="" src="/m/asset/img/deposit.74270622c36d4bf3dd9f.svg" alt="Deposit"> Copy This Trader </span></a>
        
            </div>
        </div>
        </div>
    <div class="col-sm">
        <div class="profile-card">
            <div class="img">
                <img src="https://1.bp.blogspot.com/-8c7QTLoyajs/YLjr2V6KYRI/AAAAAAAACO8/ViVPQpLWVM0jGh3RZhh-Ha1-1r3Oj62wQCNcBGAsYHQ/s16000/team-1-3.jpg">
            </div>
            <div class="caption">
                <h3 style="color:#333;">Vin Diesel</h3>
                <p>Senior App Developer</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        </div>
    <div class="col-sm">
        <div class="profile-card">
            <div class="img">
                <img src="https://1.bp.blogspot.com/-8c7QTLoyajs/YLjr2V6KYRI/AAAAAAAACO8/ViVPQpLWVM0jGh3RZhh-Ha1-1r3Oj62wQCNcBGAsYHQ/s16000/team-1-3.jpg">
            </div>
            <div class="caption">
                <h3 style="color:#333;">Vin Diesel</h3>
                <p>Senior App Developer</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        </div>
  </div>
</div>
    </div>
    
    
            <style>
    .assets-header {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 1rem;
    text-align: left;

            margin: 3rem 3rem;
        
}
.assets-header, .earn-top, .m-stats .m-stats__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.assets-header {
    -webkit-box-pack: justify;
        display: flex;
        justify-content: space-between;
    margin-bottom: 2rem;
}
.assets-header__left, .assets-header__right {
    width: 100%;
}
.a-box {
    background: hsla(0,0%,100%,.02);
    border: 1px solid hsla(0,0%,100%,.05);
    border-radius: 12px;
    overflow: hidden;
    padding: 24px;
    position: relative;
}

.a-box:before {
    background: url(https://bitencrypto.com/res/assets/logo-line.33e95a975fef5e2e26ac.svg) no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    height: 298px;
    opacity: .02;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 264px;
}

.a-box__left, .a-box__user {
    -webkit-box-pack: justify;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.a-box__user {
    margin-bottom: 24px;
}
.a-box__cols {
    -webkit-box-pack: justify;
    column-gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 50px;
}
.a-box__cols, .a-box__email {
    -webkit-box-align: center;
    align-items: center;
}
.text-starts {
    font-size: 30px;
    height: 20px;
    line-height: 1;
    
    transform: translateY(3px);
}
.a-box__photo-text {
    font-size: 30px;
    line-height: 48px;
}
.a-box__photo {
    height: 48px;
    min-width: 48px;
    width: 48px;
}
.a-box__photo {
    border-radius: 50%;
    cursor: pointer;
    line-height: 48px;
    margin-right: 8px;
    opacity: 1;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.a-box__photo-text {
    background-color: #000;
    color: #fff;
   
    font-weight: 500;
    
}
.a-box__value {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input-password-hide svg {
    height: 1.5rem;
    width: 1.5rem;
}
.a-box__email {
    -webkit-box-pack: start;
        display: inline-flex;
    font-size: 18px;
    font-weight: 600;
    justify-content: flex-start;
    line-height: 21px;
}
.text-starts {
    font-size: 15px;
    height: 20px;
    line-height: 1;
    color: #fff;
    transform: translateY(3px);
}

.a-box__cols {
    -webkit-box-pack: justify;
        column-gap: 10px;
            display: flex;
    
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 50px;
}
.a-box__cols, .a-box__email {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.a-box__col--pointer {
    cursor: pointer;
}

.a-box__col {
    max-width: 210px;
    width: 100%;
}






.box {
    background: hsla(0,0%,100%,.02);
    border: 1px solid hsla(0,0%,100%,.05);
    border-radius: 12px;
    padding: 24px;
}


.earn-box__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    margin-bottom: 45px;
}
.earn-box__row {
    -webkit-box-pack: justify;
        -webkit-box-align: center;
        align-items: center;
        display: flex;
    justify-content: space-between;
    margin-bottom: 45px;
}
.earn-box--center .earn-box__name, .earn-box--center .earn-box__title, .earn-box--center .earn-box__val {
    text-align: left!important;
}
.earn-box__val--t2 {
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 10px;
}
.earn-box__val {
    color: #fff;
}
.earn-box__name {
    color: hsla(0,0%,100%,.5);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
}
.earn-box__links, .earn-top {
    -webkit-box-align: center;
        align-items: center;
    
    display: flex;
}

.earn-box__links {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    font-weight: 500;
    gap: 1rem;
    justify-content: flex-start;
}

.btn--blue2.btn--active:not(.btn--disabled):not(.btn--loading):not(.btn--outline), .btn--blue2:not(.btn--outline) {
    background-color: #009056;
}
.btn--blue2 {
    color: #fff;
}
.btn--dark-blue {
    border: 1px solid hsla(0,0%,100%,.1);
    color: #fff;
}
.btn--dark-blue:not(.btn--outline) {
    background-color: hsla(0,0%,100%,.03);
}

    
    
      /* Responsive styles for mobile */
        @media (max-width: 767px) {
            .assets-header {
                flex-direction: column;
                gap: 1rem;
            }

            .assets-header__left, .assets-header__right {
                width: 100%;
            }
            .earn-box__val--t2 {
    font-size: 34px;
        }
        .assets-header{
            margin: 2px 2px;
        }

</style>

