/* Tablet Devices (768px - 1024px) */
@media (min-width:768px) and (max-width: 1023px) {
    .sidebar{
        font-size: 12px;
    }
    .btn-tool{
        font-size: 10px;
    }
    
    .form_control {
        width: 600px !important;
    }
    
    .inside_button {
        width: 280px !important;
        margin-left: -285px ;
    }
    
    .head_btn .navbar-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .head_btn li {
        margin-bottom: 10px;
    }
    
    .content-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .line::after {
        display: none;
    }
    
    .select {
        margin-top: 10px;
    }
    
    .view {
        right: 0;
        font-size: 10px;
    }
    
    .bottom-container {
        padding: 0 20px;
    }
    
    .bottom-left {
        margin-left: 0;
    }
    
    .bottom-left img {
        margin-left: 0;
        padding-left: 0;
    }
    
    .bottom-left p {
        margin-left: 0;
    }
}

/* Mobile Devices (576px - 768px) */
@media (min-width:576px) and (max-width: 768px) {
    .navbar-brand img {
        width: 150px !important;
    }
    
    .navbar-nav .btn {
        margin-top: 10px;
    }
    
    .gradient-bg {
        background: linear-gradient(to bottom, #ffffff 50%, #000000 50%) !important;
    }
    
    .input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .form_control {
        width: 100% ;
        margin-bottom: 10px;
    }
    
    .inside_button {
        width: 100% ;
        margin-left: 0 ;
        margin-top: 0 ;
    }
    
    .out_button {
        width: 100%;
        margin-left: 0 !important;
    }
    
    .head_btn .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .head_btn li {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
    
    .sidebar, .categories {
        margin-bottom: 30px;
        font-size: 8px;
    }
    
    .content-header {
        text-align: center;
    }
    
    .card-custom {
        margin-bottom: 15px;
    }
    
    .view {
        position: static !important;
        margin-top: 0px;
        justify-content: center;
        font-size: 5px;
    }
    
    .btn-view {
        border-radius: 20px !important;
        width: 50%;
    }
    
    .bottom-container {
        flex-direction: column;
        text-align: center;
    }
    
    .bottom-left,
    .bottom-column {
        margin-left: 0;
        padding: 20px;
    }
    
    .bottom-left img {
        margin: 0 auto;
        display: block;
    }
    
    .footer {
        text-align: center;
    }
    
    .footer a {
        display: block;
        padding: 5px 0;
        margin: 5px 0;
    }
}

/* Small Mobile Devices (320px - 576px) */
@media (min-width:320px) and (max-width: 576px) {
    body {
        font-size: 14px;
    }
    
    .navbar-nav .nav-link {
        text-align: center;
        padding: 10px 0;
    }
    
    .navbar-nav .btn {
        width: 100%;
        margin: 10px 0;
    }
    
    .form_control {
        font-size: 14px;
    }
    
    .inside_button,
    .out_button {
        font-size: 14px;
        padding: 12px 10px;
    }
    
    .sidebar h5,
    .categories h5 {
        font-size: 20px;
        padding: 15px;
    }
    
    .content-header h3 {
        font-size: 20px;
    }
    
    .card-custom {
        padding: 15px;
    }
    
    .card-custom h6 {
        font-size: 16px;
    }
    
    .card-custom p {
        font-size: 13px;
    }
    
    .paragraph div {
        margin-bottom: 15px;
    }
    
    .bottom-left img {
        width: 150px;
        height: auto;
    }
    
    .bottom-column h5 {
        font-size: 16px;
    }
    
    .bottom-column a {
        font-size: 13px;
    }
}

/* Large Desktop Screens (1200px and above) */
@media (min-width: 1024px) and (max-width:1400px) {
    .container {
        max-width: 1150px !important;
    }
    
    .form_control {
        width: 800px !important;
    }
    
    .inside_button {
        width: 380px !important;
        margin-left: -300px;
    }
}

/* Extra Large Screens (1400px and above) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .form_control {
        width: 900px;
    }
    
    .inside_button {
        width: 380px;
        margin-left: -385px;
    }
}