html {
  min-height: 100vh;
  scroll-behavior: smooth;
}

body {
    font-family: 'Poppins';
    font-size: 2vh;
    overflow-y: auto!important;
}
@font-face {
    font-family: 'Poppins';
  src: url('path/to/Poppins-Regular.ttf') format('truetype'),
       url('path/to/Poppins-Regular.woff') format('woff'),
       url('path/to/Poppins-Regular.woff2') format('woff2'),
       url('path/to/Poppins-Medium.ttf') format('truetype'),
       url('path/to/Poppins-Medium.woff') format('woff'),
       url('path/to/Poppins-Medium.woff2') format('woff2'),
       url('path/to/Poppins-Bold.ttf') format('truetype'),
       url('path/to/Poppins-Bold.woff') format('woff'),
       url('path/to/Poppins-Bold.woff2') format('woff2'),
       url('path/to/Poppins-Light.ttf') format('truetype'),
       url('path/to/Poppins-Light.woff') format('woff'),
       url('path/to/Poppins-Light.woff2') format('woff2'),
       url('path/to/Poppins-ExtraLight.ttf') format('truetype'),
       url('path/to/Poppins-ExtraLight.woff') format('woff'),
       url('path/to/Poppins-ExtraLight.woff2') format('woff2'),
       url('path/to/Poppins-Thin.ttf') format('truetype'),
       url('path/to/Poppins-Thin.woff') format('woff'),
       url('path/to/Poppins-Thin.woff2') format('woff2'),
       url('path/to/Poppins-SemiBold.ttf') format('truetype'),
       url('path/to/Poppins-SemiBold.woff') format('woff'),
       url('path/to/Poppins-SemiBold.woff2') format('woff2'),
       url('path/to/Poppins-Black.ttf') format('truetype'),
       url('path/to/Poppins-Black.woff') format('woff'),
       url('path/to/Poppins-Black.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;

    font-family: 'Dela Gothic One';
    src: url('path/to/DelaGothicOne-Regular.woff2') format('woff2'), /* modern browsers */
    url('path/to/DelaGothicOne-Regular.woff') format('woff'), /* older browsers */
    url('path/to/DelaGothicOne-Regular.ttf') format('truetype'); /* fallback */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Italianno';
    src: url('https://fonts.gstatic.com/s/italianno/v14/dg4n_p3sv6gCJkwzT6RnjyM.woff2') format('woff2'), url('https://fonts.gstatic.com/s/italianno/v14/dg4n_p3sv6gCJkwzT6xkjQ.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.ExtensionTop {
    padding-top: 10vw;
}
.ExtensionBottom {
    padding-bottom: 10vw;
}
.UserForm {
    position: absolute;
    margin-left: 40vw;
    width: 20vw;
    height: 50vh;
    border: 0.25vh solid black;
    border-radius: 15%;
    background-color: white;
}

.UserAuthorize {
    position: absolute;
    margin-left: 3vw;
    margin-top: 12vh;
}

.NavigationLogo {
    width: 10vw;
    height:   7vh;
}

::-webkit-scrollbar {
    width: 0;
}

.element::-webkit-scrollbar {
    width: 0;
    background: transparent;
}








.floating-button {
    text-decoration: none;
    display: inline-block;
    width: 140px;
    height: 45px;
    line-height: 45px;
    border-radius: 45px;
    margin: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 600;
    color: black;
    background: white;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
    transition: 2s;
}

    .floating-button:hover {
        background-color: black;
        box-shadow: 0 15px 20px rgba(46, 229, 157, .4);
        color: white;
        transform: translateY(-7px);
    }

.black-floating-button {
    text-decoration: none;
    display: inline-block;
    width: 140px;
    height: 45px;
    line-height: 45px;
    border-radius: 45px;
    margin: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 600;
    color: white;
    background: black;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
    transition: 2s;
}

    .black-floating-button:hover {
        background-color: white;
        box-shadow: 0 15px 20px rgba(46, 229, 157, .4);
        color: black;
        transform: translateY(-7px);
    }

.backbutton {
    text-decoration: none;
    display: inline-block;
    width: 140px;
    height: 45px;
    line-height: 45px;
    border-radius: 45px;
    margin: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 600;
    color: white;
    background: black;
    box-shadow: 0 15px 20px rgba(207, 3, 3, 0.8);
    t ransition: 2s;
}



/*Navigation*/

.logo {
    height: 5vw;
    width: 7vw;
    margin-right: auto;
    margin-left: -7.4vw;
    margin-top: -1.3vw;
    left: 0;
    right: 95vw;
   
}

    .logo img {
        width: 21vw;
        height: 7.2vw;
        left: 0;
        object-fit:cover;
        transition:all 0.5s;
    }

    .logo img:hover{
        opacity: 0.7;
    }

.navholder {
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    position: fixed!important;
    z-index: 2;
}

.navigation {
    list-style: none;
    display: flex;
    background-color: black;
    width: 100vw;
    height: 4.2vw;
    position: fixed !important;
    top: 0!important;
    z-index: 2;
}

.items {
    font-size: 1.1vw;
    font-weight: 400;
    padding: 1.3vw;
    padding-left:2vw;
    padding-top:1.3vw;
    font-family: Poppins;
}

    .items a {
        color: white;
        transition: opacity .7s;
    }

        .items a:hover {
            opacity: 0.6;
        }

.Order-button{

}

.design {
    font-size: 1.1vw;
    font-weight: 400;
    padding: 1.3vw;
    padding-left: 2vw;
    padding-top: 1.3vw;
}

    .design a {
        animation: designcolor 6s infinite;
        transition: opacity .7s;
    }

        .design a:hover {
            opacity: 0.6;
        }

@keyframes designcolor {
    0% {
        color: #B0FB70;
    }

    25% {
        color: #6DCB4C;
    }

    50% {
        color: #31A6E7;
    }

    75% {
        color: #4AA4A4;
    }

    90% {
        color: #55D7F6;
    }

    100% {
        color: #31A6E7;
    }
}


.charity {
    font-size: 1.1vw;
    font-weight: 400;
    padding: 1.3vw;
    padding-left: 2vw;
    padding-top: 1.3vw;
}

    .charity a {
        color: #FAFF00;
        transition: opacity .7s;
    }

        .charity a:hover {
            opacity: 0.6;
        }


.hiddden{
    opacity: 0.01;
}

/*Footer*/
.footer-menu {
    text-align: right;
    margin-right: 1.2vw;
    transition: opacity .7s;
}

    .footer-menu:hover {
        opacity: 0.6;
    }


/* Navbar for mobile devices*/
@media screen and (max-width: 768px) {
    html {
        overflow-x: hidden!important;
        
    }
    body{
    }
    .navholder{
        display:none;
    }
    .navholderMain {
        display: none;
    }
    @media only screen and (max-height: 800px) and (max-width: 768px) {
        .Mobilelogo {
            width: 10vh;
            height: 10vh;
            z-index: 10000 !important;
            left: -26vw !important;
            top: -11.5vh;
            object-fit: cover;
            position: fixed;
            background: none !important;
        }
    }
    .Mobilelogo{
        width: 10vh;
        height: 10vh;
        z-index: 10000!important;
        left: -30vw;
        top: -11.5vh;
        object-fit: cover;
        position: fixed;
        background: none!important;
        
        
    }
        .Mobilelogo img {
            width: 450%;
            height: 350%;
            top: 0;
            left: 0;
        }
    .projectmainpadding {
        padding-bottom: 97vh!important;
        z-index: -100!important;
        
    }    

    .burger-menu {
        display: block;
        left: 0;
        top: 0;
        width: 100vw;
        height: 12vh;
        color: black;
        background-color: black;
        z-index: 9999;
        position: fixed;
    }
    
    .burger-menu_button {
        top: 3vh;
        position: fixed;
        right: 3%;
        z-index: 10000!important;
        width: 10vh;
        height: 12vw;
        border-radius: 50%;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
        color: white;
    }

    
    .burger-menu_lines::before,
    .burger-menu_lines::after,
    .burger-menu_lines {
        position: absolute;
        width: 10vw;
        height: 0.2vh;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
        background-color:white;
        z-index: 900;    }


    .burger-menu_lines {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .burger-menu_lines::before {
            content: '';
            top: -12px;
        }

        .burger-menu_lines::after {
            content: '';
            top: 12px;
        }


    .burger-menu_active .burger-menu_lines {
        background-color: transparent;
    }

        .burger-menu_active .burger-menu_lines::before {
            top: 0;
            transform: rotate(45deg);
        }

        .burger-menu_active .burger-menu_lines::after {
            top: 0;
            transform: rotate(-45deg);
        }

    .burger-menu_nav {
        padding-top: 15vh;
        padding-right: 10vw;
        top: 1vh;
        z-index: 100;
        display: flex;
        flex-flow: column;
        height: 98vh;
        width: 98vw;
        background-color: black;
        overflow-y: auto;
        position: fixed;
        right: -125%;
        -webkit-transition: 0.8s;
        -moz-transition: 0.8s;
        -o-transition: 0.8s;
        transition: 0.8s;
        border-radius: 10vh;
        z-index: 9999 !important;
    }

    .burger-menu_active .burger-menu_nav {

        right: 1vw;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
    }
    .burger-menu_nav:first-child{
        padding-top: 10vh!important;
    }
    .burger-menu_link {
        padding-bottom: 7vh;
        padding-left: 10vw;
        text-align: center;
        font-family: Poppins;
        font-size: 4vh;
        text-decoration: none;
        letter-spacing: 0.5vh;
        font-weight: 900;
        color: white;
        z-index: 9998;
    }
    .burger-menu-link:first-child {
        padding-top: 6vh;
    }
    .burger-menu_link_Charity {
        padding-bottom: 7vh;
        padding-left: 10vw;
        text-align: center;
        font-family: Poppins;
        font-size: 4vh;
        text-decoration: none;
        letter-spacing: 0.5vh;
        font-weight: 600;
        color: rgb(0, 209, 255 );
    }
    .burger-menu_link_LiveDesign {
        padding-bottom: 7vh;
        padding-left: 10vw;
        text-align: center;
        font-family: Poppins;
        font-size: 4vh;
        text-decoration: none;
        letter-spacing: 0.5vh;
        font-weight: 600;
        color: #B0FB70;
        -webkit-animation-name: DesignColorChanger;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        transition: opacity .7s;
    }


        .burger-menu_link:hover {
            filter: brightness(0.9);
        }

    .burger-menu_overlay {
        display: none;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
    }

    .burger-menu_active .burger-menu_overlay {
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .footer-bs {
        background-color: black;
        padding: 12vh 9.5vh;
        padding-top: 2vh!important;
        padding-left: 2vh!important;
        color: rgba(255,255,255,1.00);
        z-index: 400!important;
    }




        .footer-bs .footer-ns h4 {
            font-size: 1.2vh;
            text-transform: uppercase;
            letter-spacing: 0.4vh;
        }

    .computerfootertext {
        display: none !important;
    }
    .phonefootertext{
        display: block;
    }
        .phonefootertext{
            font-size: 1.5vh!important;
        }

        .footer .footer-text {
            color: gray;
            text-align: left;
        }


    .footer-text {
        color: gray;
    }

    .footer-menu {
        float: right;
        margin-bottom: 0.6vh;
    }

        .footer-menu ul {
            display: flex;
        }

            .footer-menu ul li {
                padding-right: 1vw;
               
                display: block;
            }

                .footer-menu ul li a {
                    color: white;
                    text-decoration: none;
                    padding-left: 5vw;
                    font-size: 2.5vh;
                }

                    .footer-menu ul li a:hover {
                        color: #27bcda;
                    }








}

/*NavBar for computers*/
@media screen and (min-width: 768px) {
    .computerfootertext{
        display: block!important;
        padding-top: 1vw;
        padding-left: 2vw;
    }
    .phonefootertext{
        display: none!important;
    }
    .navholderMain {
        position: fixed !important;
        z-index: 2;
        padding-bottom: 5vh;
    }
    .navigationMain {
        list-style: none;
        background: rgba(0,0,0,0.16) 0%;
        display: flex;
        width: 100vw;
        height: 4vw;
        z-index: 200;
        box-shadow: 0 0 0.5vw 1vh rgba(0,0,0,0.2);
        position: absolute;
    }
    img {
        width: 50vw;
        height: 70vh;
    }
    .NavigationLogo{
        left: 0;
        top: 0;
        width: 6vw;
        height: 2.5vw;
    }
    .navholder {
        display: block;
    }

    .navholderMain {
        display: block
    }

    .mobileMenuHolder {
        display: none;
        z-index: 9999;
    }
    .right {
        position: absolute;
        width: 50vw;
        height: 70vh;
        right: 0;
    }

    .left {
        position: absolute;
        width: 50vw;
        height: 70vh;
        left: 0;
    }

    .footer-bs {
        background-color: black;
        padding: 8vh 6vh;
        
        color: rgba(255,255,255,1.00);
    }




        .footer-bs .footer-ns h4 {
            font-size: 1.2vh;
            text-transform: uppercase;
            letter-spacing: 0.4vh;
        }

        .footer-bs .footer-ns p {
            font-size: 1.2vh;
            color: rgba(255,255,255,0.70);
        }

    .footer .footer-text {
        color: gray;
        text-align: left;
    }


    .footer-text {
        color: gray;
    }

    .footer-menu {
        float: right;
        margin-bottom: 0.6vh;
    }

        .footer-menu ul {
            display: flex;
        }

            .footer-menu ul li {
                padding-right: 1vw;
                display: block;
            }

                .footer-menu ul li a {
                    color: white;
                    text-decoration: none;
                    padding-left: 5vw;
                }

                    .footer-menu ul li a:hover {
                        color: #27bcda;
                    }


}
input[type=text], input[type=email], input[type=password] {
    background-color: transparent;
}

.Livedesign:hover h1{
    color: red;
}
.Livedesign:hover h2{
    color: red;
}
.Livedesign:hover a h1 {
    transform: translate(37vw);
    text-decoration: none;
}

.Livedesign a h1:active {
    text-decoration: none;
}
.Livedesign:hover a h2 {
    transform: translate(-80%);
    text-decoration: none;
}

.Livedesign a h2:active {
    text-decoration: none;
}

.emailfieldlivedesign {
    position: absolute;
    width: 40vw;
    height: 3.8vw;
    top: 6.5vw;
    left: 30vw;
    background: none;
    z-index: 50 !important;
    border-radius: 3vw;
    border-color: #54D6F9!important;
    border-width: 0.3vw;
}
    .emailfieldlivedesign::placeholder{
        padding-left: 1vw;
        font-size: 1.5vw;
    }

.livedesignsumbitbutton {
    background: linear-gradient(90deg, #50D5FF 0%, #85EAB1 48.96%, #B9FF65 100%);
    border: 0.5vw solid #FFFFFF;
    box-shadow: 0px 0px 3vw 0.2vw rgba(0, 0, 0, 0.25) ;
    border-radius: 6vw;
    position: absolute;
    width: 20vw;
    color: white;
    font-size: 2vw;
    font-family: Poppins;
    height: 6vw;
    top: 12vw;
    left: 40vw;
    font-weight: 900;
    transition: all 0.3s;
}
    .livedesignsumbitbutton:hover{
        opacity: 0.7;
    }
    /*styles for projects main*/
    .projectmainpadding {
        padding-bottom: 67vw;
    }
.projectmainresidentalprojects {
    display: block;
}

    .mobileprojects {
        display: none;
    }
.projectmaincomercialprojects {
    display: block;
}
@media screen and (max-width: 768px) {
    .projectmainresidentalprojects {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }
    .projectmaincomercialprojects {
        display: none;
        position: absolute;
        top: 60vh;
        left: 0;
    }
    .mobileprojects{
        display: block;
        position: absolute;
        top: 10vh;
        z-index: 100;
    }
    .projectresidentialmobile {
        height: 45vh;
        width: 100vw;
        background-color: white;
        object-fit: cover;
    }
    .projectcommercialmobile {
        height: 45vh;
        width: 100vw;
        background-color: white;
        filter: grayscale(0%);
        object-fit: cover;
    }
    .projectcommercialmobile .text{
    }
    .res{
        position: absolute;
        color: white;
        font-family: 'Dela Gothic One';
        font-size: 4vh;
        z-index: 100;
        text-align: center;
        top: 16vh!important
    }
    .com {
        position: absolute;
        color: white;
        font-family: 'Dela Gothic One';
        font-size: 4vh;
        z-index: 100;
        text-align: center;
        top: 61vh !important
    }
    .upper{
        z-index: 10000!important;
        height: 100vh!important;
    }

}
.projectmainresidentalprojects {
    top: 7vw;
    position: absolute;
    width: 100vw;
    height: 35vw;
    background-color: white;
    transition: all 0.5s ease;
    z-index: 0;
}
.projectmaincomercialprojects{
    top: 35.5vw;
    position: absolute;
    width: 100vw;
    height: 35vw;
    background-color: white;
    transition: all 0.5s ease;
    z-index: 0;
}
.projectmainresidentalprojects:hover {
    background-color: rgb(132,132,132);
}
.projectmaincomercialprojects:hover {
    background-color: rgb(132,132,132);
}
.projectmainresidentalprojects h1{
    font-size: 4vw;
    color: black;
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    line-height: 5vw;
    display: flex;
    align-items: center;
    text-align: center;
    width: 40vw;
    top: 9vw;
    left: 5vw;
    position: absolute;
}
.projectmaincomercialprojects h1 {
    font-size: 4vw;
    color: black;
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    line-height: 5vw;
    display: flex;
    align-items: center;
    text-align: center;
    width: 40vw;
    top: 11vw;
    right: 5vw!important;
    position: absolute;
}

.projectmainresidentalprojects img {
    width: 50vw;
    height: 35vw;
    left: 50vw;
    position: absolute;
    filter: grayscale(100%) !important;
    top: 0;
}

.projectmaincomercialprojects img {
    width: 50vw;
    height: 35vw;
    left: 0vw;
    position: absolute;
    filter: grayscale(100%) !important;
}
.projectmainresidentalprojects:hover h1,
.projectmainresidentalprojects:hover img {
    /* your styles here */
    color: white;
    filter: grayscale(0%) !important;
}
.projectmaincomercialprojects:hover h1,
.projectmaincomercialprojects:hover img {
    color: white;
    filter: grayscale(0%) !important;
}
/*Index*/
@media only screen and (max-height: 800px) and (max-width: 768px) {

}
    @media screen and (max-width: 768px) {
        .Livedesignindexblock {
            position: absolute;
            top: 45vh !important;
            width: 100vw;
            height: 15vh !important;
            background: linear-gradient(270deg, #55D7F6 0%, #B6FE68 100%);
            text-align: center !important;
            align-content: center;
        }

            .Livedesignindexblock:hover {
            }

            .Livedesignindexblock h1 {
                color: white;
                font-size: 4vh !important;
                position: absolute !important;
                z-index: 70;
                font-weight: 500 !important;
                font-family: 'Dela Gothic One', sans-serif;
                transition: transform 0.5s ease;
                left: 25vw !important;
            }

            .Livedesignindexblock h2 {
                color: white;
                top: 7vh !important;
                font-family: 'Dela Gothic One', sans-serif;
                font-size: 2.66vh !important;
                position: absolute !important;
                left: 10vw !important;
                z-index: 70;
                transition: transform 0.5s ease;
                font-weight: 500 !important;
            }

            .Livedesignindexblock:hover h1 {
                transform: none !important;
            }

            .Livedesignindexblock:hover h2 {
                transform: none !important;
            }
    }

    .Livedesignindexblock {
        position: absolute;
        top: 45vw;
        width: 100vw;
        height: 12vw;
        background: linear-gradient(270deg, #55D7F6 0%, #B6FE68 100%);
    }

        .Livedesignindexblock:hover {
        }

        .Livedesignindexblock h1 {
            color: white;
            font-size: 4.5vw;
            position: absolute;
            z-index: 70;
            left: 5vw;
            top: 2vw;
            font-weight: 700 !important;
            font-family: Poppins, sans-serif;
            transition: transform 0.5s ease;
        }

        .Livedesignindexblock h2 {
            color: white;
            font-family: Poppins, sans-serif;
            font-size: 2.8vw;
            position: absolute;
            z-index: 70;
            right: 5vw;
            top: 3.3vw;
            transition: transform 0.5s ease;
            font-weight: 700 !important;
        }

        .Livedesignindexblock:hover h1 {
            transform: translate(32vw, -2vw);
        }

        .Livedesignindexblock:hover h2 {
            transform: translate(-30vw, 2vw);
        }
    /*Services*/
    @media screen and (max-width: 768px) {
        .servicespadding {
            padding-bottom: 43.3vh !important;
        }

        .servicestopperblock {
            position: absolute;
            top: 13.5vh;
        }

            .servicestopperblock img {
                position: absolute !important;
                top: -4vh !important;
                left: 0 !important;
                width: 100vw !important;
                height: 30vh !important;
            }

            .servicestopperblock h1 {
                position: absolute !important;
                text-align: center !important;
                font-size: 2.7vh !important;
                width: 90vw !important;
                top: 20vh !important;
                left: 0vh !important;
            }

            .servicestopperblock h2 {
                position: absolute !important;
                text-align: center !important;
                font-size: 1.8vh !important;
                width: 90vw !important;
                top: 30vh !important;
                left: 0vh !important;
                font-weight: 900 !important;
            }

            .servicestopperblock h4 {
                position: absolute !important;
                text-align: center !important;
                font-size: 1.3vh !important;
                width: 75vw !important;
                top: 35vh !important;
                left: 8vw !important;
                font-weight: 900 !important;
                line-height: 2vh !important;
            }

        .servicesbottomblock {
            display: none;
        }

        .servicesbottomphoneblock {
            display: block !important;
        }

            .servicesbottomphoneblock img {
                position: absolute;
                left: 0;
                width: 100vw;
                height: 30vh !important;
            }

        .pcservicesadds {
            display: none !important;
        }

        #sliderbottomslider {
            display: none !important;
        }

        #slidertopslider {
            display: none !important;
        }

        .smallservicepadding {
            padding-bottom: 45vw !important;
        }

        .mobileadditionalforservices {
            display: block !important;
            width: 40vh !important;
            height: 40vh !important;
            position: absolute;
            left: 0;
            top: 0;
        }

            .mobileadditionalforservices img {
                position: absolute !important;
                left: -5vw !important;
                top: 86vh !important;
                width: 120vw !important;
                height: 30vh !important;
            }

            .mobileadditionalforservices h3 {
                position: absolute !important;
                text-align: center !important;
                font-size: 1.8vh !important;
                width: 90vw !important;
                top: 44vh !important;
                left: 0vh !important;
                font-family: Poppins;
                font-weight: 900;
            }

            .mobileadditionalforservices h4 {
                position: absolute !important;
                text-align: center !important;
                font-size: 1.8vh !important;
                width: 90vw !important;
                top: 60vh !important;
                left: 0vh !important;
                font-family: Poppins;
                font-weight: 900;
            }

            .mobileadditionalforservices h5 {
                position: absolute !important;
                text-align: center !important;
                font-size: 1.8vh !important;
                width: 90vw !important;
                top: 72vh !important;
                left: 0vh !important;
                font-family: Poppins;
                font-weight: 900;
            }

            .mobileadditionalforservices p {
                position: absolute !important;
                text-align: center !important;
                font-size: 1.3vh !important;
                width: 75vw !important;
                top: 49vh !important;
                left: 8vw !important;
                font-weight: 900 !important;
            }

        .mobiltextservicesarchitecturalanddesignblock {
            position: absolute !important;
            text-align: center !important;
            font-size: 1.3vh !important;
            width: 75vw !important;
            top: 64vh !important;
            left: 8vw !important;
            font-weight: 900 !important;
        }

        .mobiltextservicesarchitecturalanddesignblocksecond {
            position: absolute !important;
            text-align: center !important;
            font-size: 1.3vh !important;
            width: 75vw !important;
            top: 76vh !important;
            left: 8vw !important;
            font-weight: 900 !important;
        }
    }

    .pcservicesadds {
        display: block !important;
    }

    .mobileadditionalforservices {
        display: none;
    }

    .servicespadding {
        padding-bottom: 34.5vw;
    }

    .servicestopperblockslider {
        position: absolute;
        height: 15vw;
        width: 100vw;
        top: 38vw;
        left: 0vw;
    }


    .servicestopperblock {
        width: 100vw;
        height: 60vw;
        background: white;
    }

    .servicestopperblockleftside {
        position: absolute;
        width: 40vw;
        height: 23vw;
        left: 5vw;
        top: 11vw;
        z-index: 50;
    }

    .servicestopperblock img {
        width: 50vw;
        position: absolute;
        top: 0;
        right: 0;
        filter: grayscale(0%) !important;
        height: 37vw;
        object-fit: cover;
    }

    .servicestopperblockleftside h1 {
        padding-top: 0vh;
        font-size: 1.6vw;
        font-weight: 500;
        text-align: center;
        font-family: 'Dela Gothic One';
        color: black;
        width: 38vw;
    }

    .servicestopperblockleftside h2 {
        font-size: 1.2vw;
        font-weight: 300;
        text-align: center;
        font-family: Poppins;
        font-weight: 900;
        color: black;
        width: 40vw;
        padding-top: 2vw;
    }

    .servicestopperblockleftside h4 {
        font-size: 1.1vw;
        font-weight: 400;
        text-align: center;
        font-family: Poppins;
        color: black;
        width: 40vw;
    }

    .servicesbottomblock {
        width: 100vw;
        height: 40vw;
        position: absolute;
        top: 49vw;
    }

    .servicesbottomtextblock {
        position: absolute;
        right: 7vw;
        top: 2.5vw;
        width: 37vw;
        text-align: center;
        color: black;
        height: 24vw;
        font-family: Poppins;
        font-weight: 300;
    }

        .servicesbottomtextblock h4 {
            font-family: 'Dela Gothic One';
            font-size: 1.2vw;
            font-weight: 200;
            font-family: 'Dela Gothic One';
        }

        .servicesbottomtextblock h3 {
            font-family: 'Dela Gothic One';
            padding-top: 1.2vw;
            font-size: 1.7vw;
        }

        .servicesbottomtextblock p {
            font-family: Poppins !important;
            font-weight: 700;
            font-size: 1.1vw;
        }

    .pcpforaboutus {
        display: block;
    }

    .mobilepforaboutus {
        display: none !important;
    }
    /*about us*/
    @media screen and (max-width: 768px) {
        .smallservicepadding {
            padding-bottom: 88vh !important;
        }

        .pcpforaboutus {
            display: none !important;
        }

        .mobilepforaboutus {
            display: block !important;
            display: block;
            left: 0vw !important;
            top: 18vh !important;
            font-size: 2.3vh !important;
            width: 83vw !important;
        }

        .aboutustopblock {
            top: 10vh !important;
            left: 6vw !important;
        }

            .aboutustopblock h1 {
                font-size: 5vh !important;
            }

            .aboutustopblock h2 {
                display: block;
                left: 0vw !important;
                top: 11vh !important;
                font-size: 2.6vh !important;
            }

        .aboutuspadding {
            padding-bottom: 156vh !important;
        }

        .ourteamblock {
            top: 85vh !important;
            background-color: rgb(217, 217, 217) !important;
            height: 60vh !important;
            width: 100vw !important;
            z-index: -1;
        }

            .ourteamblock h1 {
                font-size: 5vh !important;
                top: -6vh !important;
                left: 5vw !important;
                width: 80vw !important;
            }

            .ourteamblock img {
                height: 30vh !important;
                width: 30vh !important;
                top: 10vh !important;
                left: 17vw !important;
                border-radius: 60vh !important
            }

        .quoteaboutusblock {
            width: 50vw!important;
            top: 46vh !important;
            left: 10vw !important;
        }

            .quoteaboutusblock h4 {
                font-size: 1.5vh !important;
                line-height: 2.5vh !important;
                width: 80vw !important;
                text-align: center;
            }

            .quoteaboutusblock h5 {
                font-size: 1.5vh !important;
                top: 8vh !important;
                width: 60vw!important;
                left: 25vw!important;
                display: inline-block!important;
            }
        .tabinquote {
            display: inline-block;
            margin-left: 40px;
        }

        .rightcofounder {
            font-size: 1.8vh !important;
            right: 7vw !important;
            top: 42vh !important;
        }

        .rightcofounderabove {
            font-size: 1.5vh !important;
            top: 44vh !important;
            right: 23vw !important;
        }

        .leftcofounder {
            font-size: 1.8vh !important;
            left: 5vw !important;
            top: 5vh !important;
        }

        .leftcofounderabove {
            font-size: 1.5vh !important;
            top: 7vh !important;
            left: 23vw !important;
            position: absolute !important;
        }

        .aboutusimage {
            top: 12vh !important;
            z-index: -1000 !important;
        }

        .aboutustopblock {
            top: 25vh !important;
            position: absolute;
        }

        .ourteamblock {
            background-color: white;
            position: absolute;
            top: 100vh !important;
            width: 100vw;
            height: 50vw;
        }
    }

    .aboutuspadding {
        padding-bottom: 143vw;
    }

    .aboutustopblock {
        width: 80vw;
        height: 15vw;
        color: black;
        font-family: 'Dela Gothic One' !important;
        position: absolute;
        left: 12vw;
    }

        .aboutustopblock h1 {
            font-family: 'Dela Gothic One' !important;
            font-size: 2.5vw;
            width: 80vw;
            font-family: Poppins;
            font-weight: 800;
            top: 8vw;
            position: absolute;
        }

        .aboutustopblock h2 {
            font-family: 'Dela Gothic One' !important;
            font-size: 1.4vw;
            font-weight: 400;
            font-family: Poppins;
            width: 80vw;
            top: 12.7vw;
            position: absolute;
            left: -0.5vw;
        }

        .aboutustopblock p {
            font-size: 1.4vw;
            font-family: Poppins;
            top: 16vw;
            position: absolute;
            width: 70vw;
            left: -0.5vw;
        }

    .aboutusimage {
        width: 100vw;
        height: 50vw;
        object-fit: cover;
        position: absolute;
        top: 31vw;
    }

    .ourteamblock {
        background-color: white;
        position: absolute;
        top: 80vw;
        width: 100vw;
        height: 50vw;
    }

        .ourteamblock h1 {
            color: black;
            top: 0.5vw;
            position: absolute;
            font-size: 2.5vw;
            font-family: 'Dela Gothic One';
            left: 42vw;
        }

        .ourteamblock img {
            position: absolute;
            border-radius: 4vw !important;
            width: 41vw;
            height: 41vw;
            left: 28.5vw;
            top: 6.6vw;
        }

    .leftcofounder {
        left: 17vw;
        top: 49vw;
        position: absolute;
        font-size: 1.7vw;
        font-family: 'Dela Gothic One';
        color: black;
    }

    .rightcofounder {
        right: 20vw;
        top: 49vw;
        position: absolute;
        font-size: 1.7vw;
        font-family: 'Dela Gothic One';
        color: black;
    }

    .leftcofounderabove {
        left: 24.3vw;
        top: 51.5vw;
        position: absolute;
        font-weight: 200;
        font-size: 1.4vw;
        font-family: Poppins;
    }

    .rightcofounderabove {
        right: 26.3vw;
        top: 51.5vw;
        position: absolute;
        font-weight: 200;
        font-size: 1.4vw;
        font-family: Poppins;
    }

    .quoteaboutusblock {
        width: 70vw;
        left: 17vw;
        top: 55.5vw;
        position: absolute;
    }

        .quoteaboutusblock h4 {
            font-size: 1.37vw;
        }

        .quoteaboutusblock h5 {
            position: absolute;
            font-size: 1.2vw;
            font-style: italic;
            left: 27vw;
            top: 2vw;
        }
    /*Livedesign*/
    @media screen and (max-width: 768px) {
        .livedesignpadding {
            padding-bottom: 90vh !important;
        }

        .toplivedesignintroductionblock {
            width: 100vw;
            height: 15vh !important;
            position: absolute;
            top: 12vh !important;
            background: linear-gradient(172.71deg, #71FFE5 4.98%, #D2FF99 93.65%);
            z-index: 9998;
            align-items: center;
        }

            .toplivedesignintroductionblock h1 {
                font-size: 6vh !important;
                font-weight: 900 !important;
                width: 95vw !important;
                letter-spacing: 1vw !important;
                left: 5vw !important;
            }

            .toplivedesignintroductionblock h4 {
                font-size: 2vh !important;
                font-weight: 900 !important;
                top: 8vh !important;
                left: 29vw !important;
            }


        .middlelivedesignintroductionblock img {
            width: 35vh !important;
            height: 35vh !important;
            top: 24vh !important;
            left: 12vw !important;
            border-radius: 26px !important;
        }

        .middlelivedesignintroductionblock h5 {
            font-weight: 600 !important;
            top: 62vh !important;
            font-family: 'Poppins' !important;
            left: 10vw !important;
            font-size: 3.3vh !important;
            width: 80vw !important;
        }

        .middlelivedesignintroductionblock h6 {
            font-weight: 300;
            top: 82vh !important;
            left: 10vw !important;
            font-size: 2.52vh !important;
            width: 80vw !important;
        }

        .livedesignimagebackground {
            width: 39vh !important;
            height: 39vh !important;
            top: 22vh !important;
            left: 8vw !important;
            border-radius: 26px !important;
        }

        .livedesignpadding {
            padding-bottom: 196vh !important;
        }

        .bottomlivedesignintroductionblock {
            top: 160vh !important;
            height: 40vh !important;
        }

            .bottomlivedesignintroductionblock h3 {
                font-size: 5.5vh !important;
                left: 10vw !important;
            }

        .emailfieldlivedesign {
            width: 90vw !important;
            height: 7vh !important;
            left: 5vw !important;
            font-size: 2vh !important;
            padding-left: 2vw !important;
            font-style: oblique;
            border: 4px solid #54D6F9 !important;
            position: absolute !important;
            border-radius: 53px !important;
            top: 10vh !important;
        }

            .emailfieldlivedesign::placeholder {
                font-size: 2vh !important;
                padding-left: 2vw !important;
                font-style: oblique;
            }
    }

    .livedesignpadding {
        padding-bottom: 90vw;
    }

    .toplivedesignintroductionblock {
        width: 100vw;
        height: 17vw;
        position: absolute;
        top: 3.6vw;
        background: linear-gradient(172.71deg, #71FFE5 4.98%, #D2FF99 93.65%);
    }

        .toplivedesignintroductionblock h1 {
            position: absolute;
            top: 1vw;
            left: 28vw;
            font-family: 'Poppins';
            font-weight: 900;
            font-size: 7vw;
            display: flex;
            align-items: center;
            text-align: center;
            color: #2D2C2C;
            letter-spacing: 0.2vw;
        }

        .toplivedesignintroductionblock h4 {
            position: absolute;
            left: 40vw;
            top: 10vw;
            font-family: 'Poppins';
            font-style: normal;
            font-weight: 900;
            font-size: 2vw;
            display: flex;
            align-items: center;
            text-align: center;
            color: #2D2C2C;
        }

    .middlelivedesignintroductionblock {
        background-color: white;
        position: absolute;
        top: 20vw;
        width: 100vw;
        height: 42vw;
    }

    .livedesignimagebackground {
        height: 40vw;
        width: 40vw;
        border-radius: 3vw;
        top: 5vw;
        left: 5vw;
        position: absolute;
        background: linear-gradient(180deg, #B7FFF2 0%, #DAFFAC 100%);
    }

    .middlelivedesignintroductionblock img {
        height: 34vw;
        width: 34vw;
        border-radius: 3vw;
        top: 8vw;
        left: 8vw;
        position: absolute;
        object-fit: cover;
    }

    .middlelivedesignintroductionblock h5 {
        font-weight: 800;
        font-size: 1.6vw;
        top: 14vw;
        font-weight: 900;
        color: black;
        right: 5vw;
        width: 45vw;
        position: absolute;
        text-align: center;
    }

    .middlelivedesignintroductionblock h6 {
        font-size: 1.5vw;
        top: 19vw;
        color: black;
        right: 5vw;
        width: 45vw;
        position: absolute;
        text-align: center;
    }

    .bottomlivedesignintroductionblock {
        top: 72vw;
        background: linear-gradient(172.71deg, #D2FF99 4.98%, #71FFE5 93.65%);
        height: 20vw;
        width: 100vw;
        position: absolute;
        z-index: 40;
    }

        .bottomlivedesignintroductionblock h3 {
            top: 0vw;
            left: 40vw;
            position: absolute;
            font-weight: 900;
            font-size: 3vw;
        }
    /*project show*/
    #Mprojectslider {
        display: none;
    }
.mobilepaddingforlistshow{
    display: none!important;
}
@media screen and (max-width: 768px) {
    #Mprojectslider {
            display: block;
        }

        .mobilepaddingforlistshow {
            padding-bottom: 7vh !important;
        }

        .leftblock {
            height: 50vh !important;
            width: 100vw !important;
            background-color: black !important;
        }

            .leftblock img {
                height: 50vh !important;
                width: 100vw !important;
                filter: grayscale(0%) !important;
                filter: brightness(70%) !important;
                object-fit: cover;
            }

        .rightblock {
            height: 50vh !important;
            width: 100vw !important;
            background-color: black !important;
        }

            .rightblock img {
                height: 50vh !important;
                width: 100vw !important;
                filter: grayscale(0%) !important;
                filter: brightness(70%) !important;
                object-fit: cover;
            }

            .rightblock .textblock {
                text-align: center !important;
                left: 0 !important;
                width: 100% !important;
                padding-top: 13vh !important;
            }

        .leftblock .textblock {
            left: 0 !important;
            width: 100% !important;
            text-align: center !important;
            padding-top: 13vh !important;
        }

        .textblock h1 {
            padding-top: 2vh !important;
            font-size: 5vh !important;
            color: white;
        }

        .textblock h5 {
            display: none !important;
            font-family: Poppins !important;
            font-weight: 400 !important;
        }

        .textblock h3 {
            color: white;
            font-size: 1.5vh !important;
        }
    }

    .leftblock {
        width: 100vw;
        height: 35vw;
        background-color: white;
        transition: all 0.5s ease;
    }

        .leftblock:hover {
            background-color: rgb(132,132,132)
        }

        .leftblock img {
            width: 50vw;
            height: 35vw;
            position: absolute;
            left: 0;
            object-fit: cover !important;
            filter: grayscale(100%)
        }

        .leftblock:hover img {
            filter: grayscale(0%);
        }

        .leftblock .textblock {
            color: black;
            position: absolute;
            width: 40vw;
            right: 5vw;
            text-align: center;
            padding-top: 9vw;
        }

            .leftblock .textblock h1 {
                font-family: 'Dela Gothic One';
                font-size: 3vw;
            }

            .leftblock .textblock h3 {
                font-family: 'Dela Gothic One';
                font-size: 1.5vw;
            }

            .leftblock .textblock h5 {
                font-size: 1vw;
            }

        .leftblock:hover .textblock {
            color: white;
        }

    .rightblock:hover img {
        filter: grayscale(0%) !important;
    }

    .rightblock {
        width: 100vw;
        height: 35vw;
        background-color: white;
        transition: all 0.5s ease;
    }

        .rightblock:hover {
            background-color: rgb(132,132,132)
        }

        .rightblock img {
            width: 50vw;
            height: 35vw;
            position: absolute;
            right: 0;
            filter: grayscale(100%);
            object-fit: cover !important;
        }

        .rightblock .textblock {
            color: black;
            position: absolute;
            width: 30vw;
            left: 8vw;
            padding-top: 8vw;
            text-align: center;
        }

            .rightblock .textblock h1 {
                font-family: 'Dela Gothic One';
                font-size: 3vw;
            }

            .rightblock .textblock h3 {
                font-family: 'Dela Gothic One';
                font-size: 1.5vw;
            }

            .rightblock .textblock h5 {
                font-size: 1vw;
            }

        .rightblock:hover .textblock {
            color: white;
        }

    .blockpadding {
        padding-bottom: 40vw;
    }

    .projectshowtopperpadding {
        padding-bottom: 10vw;
    }

    .projectshowblock {
        display: block
    }

    .mobileproject {
        display: none;
    }
    /*Projectshow*/
    @media screen and (max-width: 768px) {
        .Livedesignindexblock {
        }

        .projectmainresidentalprojects {
            top: 80vh !important
        }

        .projectmaincomercialprojects {
            display: none !important;
        }

        .projectshowblock {
            display: none;
        }

        .comuterslider {
            display: none;
        }

        .mobileproject {
            display: block;
        }

        .projectshowpadding {
            padding-bottom: 132vh !important;
        }

        .mobileproject h1 {
            position: absolute;
            left: 4vw;
            top: 12vh !important;
            font-family: 'Dela Gothic One';
            font-size: 3vh !important;
            width: 90vw !important
        }

        .mobileproject h5 {
            position: absolute;
            left: 4vw;
            right: 4vw;
            top: 19vh !important;
            font-family: 'Dela Gothic One';
            font-size: 2vh !important;
        }

        .mobileproject h6 {
            position: absolute;
            left: 4vw;
            top: 73vh !important;
            font-family: Poppins;
            font-size: 2vh !important;
        }

        .mobileproject img {
            width: 100vw !important;
            height: 45vh !important;
            top: 25vh !important;
            position: absolute;
        }
    }

    .projectshowpadding {
        padding-bottom: 63vw;
    }

    .projectshowblock {
        width: 100vw;
        height: 70vw;
        position: absolute;
    }

        .projectshowblock h1 {
            left: 4vw;
            top: 3vw;
            position: absolute;
            font-family: 'Dela Gothic One';
            font-size: 3vw;
            color: black;
        }

        .projectshowblock h5 {
            font-size: 1vw;
            color: black;
            top: 8.5vw;
            position: absolute;
            right: 6vw;
            width: 40vw;
            text-align: left;
        }

        .projectshowblock img {
            top: 9vw;
            left: 4vw;
            position: absolute;
            object-fit: cover;
            width: 47vw;
            height: 47vw;
        }

    @keyframes slidy {
        0% {
            left: 0%;
        }

        20% {
            left: 0%;
        }

        25% {
            left: -100%;
        }

        45% {
            left: -100%;
        }

        50% {
            left: -200%;
        }

        70% {
            left: -200%;
        }

        75% {
            left: -225%;
        }

        80% {
            left: -250%;
        }

        90% {
            left: -300%;
        }
    }

    body {
        margin: 0;
    }

    div#projectslider {
        overflow: hidden;
        position: absolute;
        top: 17.5vw;
        left: 54vw;
        height: 40vw;
    }

        div#projectslider figure img {
            width: 19%;
            float: left;
            height: 40vw;
            object-fit: cover;
        }

        div#projectslider figure {
            position: relative;
            width: 500%;
            margin: 0;
            left: 0;
            text-align: left;
            font-size: 0;
            animation: 30s slidy infinite;
        }
    /*Comming soon*/
    @media screen and (max-width: 768px) {
        .charitycomingsoon {
            width: 100vw !important;
            height: 70vh !important;
            padding-bottom: 70vh !important;
        }

        .charitymobilepad {
            padding-bottom: 80vh !important;
            display: block;
        }

        .charitycomingsoon h1 {
            font-size: 7vh !important;
            width: 100vw !important;
            left: 1vh !important;
            top: 35vh !important;
            position: absolute !important;
        }
    }

    .charitymobilepad {
        display: none !important;
    }

    .charitycomingsoon {
        width: 100vw;
        height: 10vw;
        padding-bottom: 30vw;
        background-color: black;
    }

        .charitycomingsoon h1 {
            color: rgba(235, 90, 58, 0.33);
            position: absolute;
            top: 15vw;
            left: 25vw;
            font-size: 8vw;
            font-family: 'Italianno';
            font-style: oblique;
            font-weight: 100;
        }
    /*For Mobile*/

    @media screen and (max-width: 768px) {
        .pccontacts {
            display: none !important;
        }
    }