/* Mobile First Approach */



@media (max-width: 576px) {



    .hero-section {



        padding: 120px 0;



        text-align: center;



    }







    .hero-section h1 {



        font-size: 2.5rem;



    }







    .product-filters .row > div {



        margin-bottom: 10px;



    }







    .navbar-brand {



        font-size: 1.2rem;



    }







    .btn-custom {



        width: 100%;



        margin: 5px 0;



    }







    #car-model canvas {



        width: 100% !important;



        height: 200px !important;



    }



    .service-card {

        padding: 1.5rem !important;

    }



    .service-icon {

        font-size: 2.5rem !important;

    }



}







/* Tablet */



@media (min-width: 577px) and (max-width: 991px) {



    .hero-section {



        padding: 150px 0;



    }







    .col-md-3 {



        width: 50%;



    }







    .product-filters .row > div {



        width: 50%;



        margin-bottom: 15px;



    }



}







/* Animations for larger screens */



@media (min-width: 992px) {



    .service-card:hover {



        transform: translateY(-15px);



    }







    .product-card:hover .product-image {



        transform: scale(1.15);



    }



}







/* Adjust container paddings */



@media (max-width: 768px) {



    .container {



        padding-left: 20px;



        padding-right: 20px;



    }



}







/* Fix for 3D model on different screens */



@media (max-width: 1200px) {



    #car-model {



        margin-top: 30px;



    }



}