@media (max-width: 767px) {

    .wrap_mobile {
        display: none;
    }

    .sidebar  {
        display: none!important;
    }

    .mobile_buy_btn {
        display: flex;
    }

    .left-div {
        margin-bottom: 20px;
    }

    .sayfa {
        height: auto;
    }

    .buy_text {
        display: none;
    }

    #buy_open {
        align-items: center;
        justify-content: center;
    }

    #open_generate {
        display: flex;
        padding: 22px 30px;
    }
    
    .mobile_generate_btn {
        display: none;
    }
    
    #wrapper {
        background: rgb(15,15,15);
        background: linear-gradient(360deg, rgba(15,15,15,1) 50%, rgba(0,0,0,1) 100%);
        overflow: auto;
        height: 90%!important;
        display: block!important;
    }
    
    .sidebar {
        display: none;
    }
    
    .mobilebar {
        z-index: 999999999999999999999999999999999999999999999999999 !important;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: rgb(19, 19, 19);
        border-top: 2px solid rgb(34, 34, 34);
    }
    
    body {
        overflow: hidden;
        flex-direction: column;
    }
    
    
    
    
    
    
    
    .mobilebar {
        border-radius: 50px 50px 0px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #0f0f0f; /* Dark grey background */
        border-top: 2px solid #2b2b2b; /* Slightly lighter border for subtle effect */
        position: fixed;
        padding: 20px 90px;
        bottom: 0;
        width: 100%;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
        z-index: 1000;
    }
    
    .mobilebar i {
        color: #ccc; /* Light grey for icons */
        font-size: 22px; /* Larger icons */
        padding: 0 15px; /* Less padding for closer icons */
        transition: color 0.3s;
    }
    
    .mobilebar i:hover {
        color: #fff; /* White color on hover for high contrast */
    }
    
    /* .fa-plus {
        box-shadow: 0px 0px 60px #303030;
        background-color: #fff;
        color: #222!important;
        border-radius: 50%;
        padding: 15px!important;
        outline: 2px solid #636060;
        border: 5px solid #1b1b1b;
    } */
    
    /* .divider {
        height: 30px;
        width: 1px;
        background-color: #303030; 
        opacity: 0.6;
    } */
    
    
    
    .btc_1_div {
        border-left: 3px solid #db3646!important;
    }
    
    
    .fa-plus {
        background-color: #0f0f0f;
        color: #cfcfcf !important;
        border-radius: 10px;
        padding: 9px !important;
        outline: 2px solid #0f0f0f;
        border: 3px solid #535353;
    }

    .sayfa {
        flex-direction: column;
    }

    .left-div {
        display: block;
        height: 450px !important;
        width: 100%;
    }

    .right-div {
        height: auto;
        width: 100%;
    }








    @keyframes buttonPulse {
        0% { transform: scale(1); }
        50% { transform: scale(0.5); }
        100% { transform: scale(1); }
      }
      
      .button-animate {
        animation: buttonPulse 0.6s ease-in-out forwards;
      }
  



    /* CSS kısmı */
    .mobilebar i {
        transition: transform 0.6s ease-in-out;
        transform-origin: center;
      }
      
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(0.5); }
        100% { transform: scale(1); }
      }
      
      .mobilebar i.animate {
        animation: pulse 0.6s ease-in-out forwards;
      }
  




      #preview {
        height: 100%;
      }

      .design_history {
        padding: 10px 7px;
        height: 70px;
      }





}