* {
                    margin: 0; 
                    box-sizing: border-box;
                    font-family: Arial, sans-serif;
                }
                
                body {
                    background-color: #1a1a25;
                    color: #ffffff;
                    font-family: 'Poppins', sans-serif;
                
                }
                 
                
                .container {
                    max-width:450px;
                    margin: 0 auto;
                    padding: 10px;
                }
                
                /* Hero Section */
                .hero-section {
                    background-image: url('https://images.unsplash.com/photo-1518546305927-5a555bb7020d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
                    background-size: cover;
                    background-position: center;
                    padding: 20px;
                    height: 350px;
                    position: relative;
                    border-radius: 0 0 10px 10px;
                }
                
                /* .hero-section::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.7);
                    border-radius: 0 0 10px 10px;
                } */
                
                
                .skeleton {
                    position: relative;
                    overflow: hidden;
                    background-color: #4f4f4f;       /* light gray base */
                  }
                  
                  /* 2) Moving shimmer */
                  .skeleton::after {
                    content: '';
                    position: absolute;
                    top: 0; left: -100%;
                    width: 100%; height: 100%;
                    background: linear-gradient(
                      90deg,
                      transparent,
                      rgba(255,255,255,0.6),
                      transparent
                    );
                    animation: shine 1.5s infinite;
                  }
                  
                  /* 3) Keyframes */
                  @keyframes shine {
                    to { left: 100%; }
                  }
                  
                  /* 4) Helper classes for icon & text placeholders */
                  .skeleton-icon {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                  }
                  
                  .skeleton-text {
                    height: 14px;
                    border-radius: 4px;
                    margin: 4px 0;
                  }
                  
                
                .coinDets{
                    display: flex;
                    justify-content: space-between;
                    text-align: right;
                    align-items: center;
                   margin-bottom: 10px;
                }
                .cellchange{
                    width: 70px;
                    text-align: center;
                    border-radius: 5px;
                    font-size: 13px;
                    font-weight: bold;
                    padding: 2px;
                }
                
                .cellprice{
                    text-align: right !important;
                    width: 50%;
                }
                
                .rightHalf{
                    display: flex;
                    justify-content: space-between;
                    width: 45%;
                    align-items: center;
                }
                
                .top-coins {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    position: relative;
                    background-color: rgba(40, 44, 52, 0.7);
                    border-radius: 7px;
                    z-index: 1;
                }
                
                .coin-card {
                    
                    border-radius: 10px;
                    padding: 15px;
                    flex: 1;
                    margin: 0 5px;
                }
                
                .coin-info {
                    display: flex;
                    flex-direction: column;
                }
                
                .coin-pair {
                    font-weight: bold;
                    font-size: 16px;
                    margin-bottom: 5px;
                }
                
                .coin-change {
                    color: #4caf50;
                    font-size: 14px;
                    margin-bottom: 5px;
                    text-align: center;
                }
                
                .coin-price {
                    font-size: 18px;
                    font-weight: bold;
                }
                
                .quick-actions {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    position: relative;
                    z-index: 1;
                }
                
                .action-button {
                    background-color: #282c34;
                    border-radius: 10px;
                    padding: 15px;
                    display: flex;
                    width: 48%;
                    align-items: center; 
                    margin: 8px;
                    cursor: pointer;
                }
                
                .action-button i {
                    margin-right: 10px;
                    color: #ffd700;
                }
                
                .cta-button {
                    background-color: #3a3f4a;
                    border-radius: 25px;
                    padding: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;
                    position: relative;
                    z-index: 1;
                    cursor: pointer;
                }
                
                .cta-button i {
                    margin-right: 10px;
                }
                
                .feature-icons {
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    z-index: 1;
                }
                
                .feature {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;
                }
                
                .feature i {
                    font-size: 24px;
                    margin-bottom: 5px;
                    color: #ffd700;
                }
                
                .feature span {
                    font-size: 12px;
                }
                
                /* Navigation Tabs */
                .nav-tabs {
                    display: flex;
                    margin-top: 20px;
                    border-bottom: 1px solid #333;
                }
                
                .tab {
                    padding: 15px 20px;
                    cursor: pointer;
                    position: relative;
                }
                
                .tab.active {
                    color: #ffd700;
                }
                
                .tab.active::after {
                    content: '';
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background-color: #ffd700;
                }
                
                /* Cryptocurrency Table */
                .crypto-table {
                    margin-top: 20px;
                    padding: 0 10px;
                }
                
                .table-header {
                    display: flex;
                    padding: 15px 0;
                    border-bottom: 1px solid #333;
                    color: #888;
                }
                
                .header-name {
                    flex: 2;
                }
                
                .header-price {
                    flex: 1;
                    text-align: right;
                }
                
                .header-change {
                    flex: 1;
                    text-align: right;
                }
                
                .crypto-row {
                    display: flex;
                    padding: 20px 0;
                    border-bottom: 1px solid #333;
                    align-items: center;
                }
                
                .crypto-name {
                    flex: 2;
                    display: flex;
                    align-items: center;
                }
                
                .crypto-icon {
                    width: 30px;
                    height: 30px;
                    margin-right: 15px;
                    border-radius: 50%;
                }
                
                .crypto-symbol {
                    font-weight: bold;
                }
                
                .crypto-price {
                    flex: 1;
                    text-align: right;
                    font-weight: bold;
                }
                
                .crypto-change {
                    flex: 1;
                    text-align: right;
                    padding: 5px 10px;
                    border-radius: 5px;
                    width: fit-content;
                    margin-left: auto;
                }
                
                .positive {
                    background-color: rgba(76, 175, 80, 0.2);
                    color: #4caf50;
                }
                
                .negative {
                    background-color: rgba(244, 67, 54, 0.2);
                    color: #f44336;
                }
                
                .positiver {
                    /* background-color: rgba(76, 175, 80, 0.2); */
                    color: #4caf50;
                }
                
                .negativer {
                    /* background-color: rgba(244, 67, 54, 0.2); */
                    color: #f44336;
                }
                
                /* Responsive Design */
                @media (max-width: 768px) {
                   
                    
                    .coin-card, .action-button {
                        margin: 5px 0;
                    }
                    
                    .feature {
                        margin: 10px 0;
                    }
                }