@media (max-width: 450px){
    .nav-elements{
        display: none;
    }
    #ham-menu{
        display: inline-block;
        margin-right: 5vw;
    }
    /* Keep the font size smaller on mobile */
    .main-heading h1{
        font-size: 8vw;
        font-weight: 700;
    }

    /* Apply flexbox to the parent to center everything */
    .main-heading {
        position: relative;
        right: 20px;
    }



    .home-pg-main button{
        font-size: 3vw;
    }
    .about{
        flex-direction: column-reverse;
    }
    .about-txt h2{
        margin-bottom: 2vh;
        font-size: 5vw;
    }
    .about-img img{
        margin-bottom: 2.2vh;
        height: 60vw;
    }
    .company-info{
        padding: 5.2vh 0vw;
    }
    .company-info .numbers{
        font-size: 6vw;
    }
    .company-info .domain{
        font-size: 2.5vw;
    }
    .product-name a{
        font-size: 2.5vw;
    }
    .product-name{
        width: 28vw;
    }
    .product-name i{
        font-size: 4vw;
        margin-right: 2px;
    }
    .footer{
        font-size: 3vw;
        flex-direction: column;
        padding: 3vw 5vw;
    }
    .footer span{
        height: 6vw;
        width: 6vw;
        margin: 1.5vh 1vw 1vw 1vw;
    }
    .footer span i{
        font-size: 3vw;
    }

    ::-webkit-scrollbar {
        width: 5px; /* Width of the scrollbar */
    }
    .details{
        flex-direction: column;
        height: 100vh;
    }
    .prod-details-txt ol li{
        font-size: 2.7vw;
    }
    .prod-heading h1{
        font-size: 6vw;
    }
    .prod-heading{
        height: 11vh;
    }


    .para1{
        flex-direction: column-reverse;
    }
    .para-txt h2{
        font-size: 5vw;
    }
    .about-main-box{
        padding: 5vh 5vw;
    }
    .about-main-box .para1 img{
        height: 50vw;
        margin: 0 0 5vh 0;
    }
    .para3{
        width: 90vw;
        margin-right: 0;
    }
    .para2{
        width: 90vw;
        margin:3vh 0 3vh 0;
    }
    .para1 p, .para2 p, .para3 p {
        font-size: 3vw;
    }
    .ham-menu-mobile{
        display: none;
        position: fixed;
        top: 6.5vh;
        right: 1vh;
    }
    .ham-menu-mobile li a{
        font-size: 3vw;
    }
    .ham-menu-mobile.active {
        display: flex;
    }

    .contact-info-form{
        margin-top: 2vh;
        flex-direction: column;
    }
    .contact-info .logo{
        width: 6vw;
        height: 6vw;
        margin-right: 2vw;
    }
    .logo i{
        font-size: 2.5vw;
    }
    .info{
        width: 80vw;
        font-size: 2.8vw;
    }
    .info h3{
        font-size: 3.8vw;
    }
    .input-box{
        margin-top: 3vh;
        flex-direction: column;
    }
    .contact-form input{
        width: 100%;
        margin-bottom: 2vh;
        padding: 1.4vh 2vw;
    }
    .contact-form form button{
        padding: 2vw 3vw;
        font-weight: 500;
        border-radius: 1vh;
    }
}

@media (max-width: 1024px) and (min-width: 770px) {
    .nav-elements a{
        font-size: 1.2vw;
    }
    .details{
        width: 85%;
    }
}

@media (max-width: 769px) and (min-width: 450px){
    .nav-elements a{
        font-size: 1.3vw;
    }
    .about{
        flex-direction: column-reverse;
    }
    .about-img img{
        height: 30vw;
        margin-bottom: 2vh;
    }
    .prod-heading{
        height: 12vh;
    }
    .about-main-box{
        padding: 5vh 8vw;
    }
    .para1 p, .para2 p, .para3 p{
        font-size: 1.3vw;
    }
    .para2{
        width: 57vw;
        margin:2vh 0 2vh 25vw;
    }
    .para3{
        width: 57vw;
        margin-right: 25vw;
    }

    .contact-info-form{
        padding: 3vw 6vw 3vw 8vw;
    }
    .contact-info .info{
        font-size: 1.3vw;
    }
    .info h3{
        font-size: 1.5vw;
    }
    .contact-form input, .contact-form textarea{
        font-size: 1.2vw;
    }
}