@media screen and (max-width: 1024px) {
    .container{
        padding: 0 30px;
    }
    #services{
        padding: 100px 30px;
    }
    #visions {
        padding: 100px 30px;
        display: flex;
        gap: 70px;
        position: relative;
    }
    #featuredproject{
        padding: 100px 30px;
    }
    #budget-calculator{
        padding: 100px 30px;
    }
    #footer{
        padding: 100px 30px 30px;
    }
    #contactus {
        padding: 100px 30px;
        flex-direction: column;
    }
    /* Header */
    
    .mobile-fix{
        overflow: unset;
    }
    #header .hamburger{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 8px;
        cursor: pointer;
    }
    #header .hamburger > div{
        width: 30px;
        height: 3px;
        background-color: var(--primary);
    }
    #header .hamburger div:nth-child(3){
        width: 24px;
    }
    #header .nav-container{
        transform-origin: top left;
        transition: all 1000ms ease;
        position: absolute;
        flex-direction: column;
        gap: 30px;
        width: 80%;
        right: 0;
        top:0;
        background-color: var(--bg-light);
        height: 100vh;
        padding: 100px 50px;
        transform: translateX(100%);
        z-index: 10000;
    }
    #header .nav-container .logo, .nav-container .close{
        display: block;
        background-color: unset;
    }
    #header .nav-container a{
        background-color: unset;
    }
    #header .backdrop{
        transform-origin: top left;
        transition: all 1000ms ease;
        position: absolute;
        width: 100vw;
        height: 100vh;
        background-color: var(--bg-dark);
        background: rgba(40, 57, 81, 0.5);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(20px);
        top: 0;
        left: 0;
        transform: translateX(100%);
        z-index: 9999;
    }
    #header .close{
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 50px;
        font-weight: 400;
    }
    #header .show{
        transform: translateX(0);
    }
    /* Header */

    /* Visions */
    #visions{
        flex-direction: column;
    }
    #visions > div {
        width: 100%;
    }
    #visions .left-image img{
        position: relative;
        max-height: 350px;
    }
    #visions .pe{
    width: 100%;
    margin-left: 0;
    }

    /* Featured Project */
    #featuredproject .image{
        width: 40%;
        position: relative;
        overflow: hidden;
    }
    #featuredproject .project-details{
        width: 60%;
        background-color: var(--bg-light);
        padding: 40px;
    }


    /* Calculator */
    #budget-calculator {
        flex-direction: column;
    }
    #budget-calculator .left-image{
        width: 100%;
    }
    #budget-calculator .left-image img{
        position: relative;
        height: 350px;
        width: 100%;
    }

    /* Reviews */

    #clientreviews .reviews {
        flex-direction: column;
    }
    #clientreviews .review {
        width: 100%;
    }

    /* Contact Us */
    #contactus > div{
        width: 100% !important;
    }
    #contactus .location{
        position: relative;
        max-height: 350px;
        object-fit: cover;
    }
    #contactus .map{
        max-height: 250px;
    }

    /* Footer */
    #footer .footer-container {
        gap: 30px;
        flex-direction: column;
    }

    #calculator-modal .modal-content{
        padding-bottom: 70px;
        width: 90%;
    }
}