/*** mobile ***/
@media only screen and (max-width : 950px) {

    html,
    body {
        position: absolute;
        min-width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    p {
        word-break: break-word;
    }

    header {
        width: 100%;
        background-color: rgb(255, 255, 255, 0);
        padding: 2rem 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    section {
        box-sizing: border-box;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    #home,
    #aboutus,
    #ourservices,
    #ourteam,
    #contactus {
        max-width: none;
        min-width: none;
        overflow: auto;
        position: relative;
    }

    .header.scroll {
        width: 100%;
        background-color: rgb(255, 255, 255, 0.8);
        padding: 1rem 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
        transition: all .22s ease-in-out;
    }

    .header.scroll .logo {
        max-width: 170px;
        margin: auto;
    }

    .logo {
        position: relative;
        max-width: 370px;
        margin: auto;
    }

    nav {
        margin: auto;
    }


    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        min-height: calc(100vh - 70px);
        background-color: #fff;
        clip-path: circle(100px at 110% -15%);
        transition: 1s ease-out;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 3px;
        pointer-events: none;
    }

    .menu li,
    a {
        width: 100%;
        height: 100%;
        text-align: center;
    }

    .hamburger {
        display: block;
        z-index: 1;
    }

    .nav.active .menu {
        clip-path: circle(1500px at 110% -15%);
        pointer-events: all;
    }

    .nav.active .hamburger {
        border-top-color: transparent;
    }

    .nav.active .hamburger::before {
        transform: rotate(135deg);
    }

    .nav.active .hamburger::after {
        transform: rotate(-135deg);
        top: -7px;
    }

    .submenu {
        position: absolute;
        height: 300px;
        background-color: rgb(230, 230, 230, 1);
        width: 100%;
        left: 0;
        display: none;
        border-radius: 4px;
        animation: slideup .3s ease;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        z-index: 2;
    }

    .submenu2 {
        position: absolute;
        /*height: 300px;*/
        background-color: rgb(200, 200, 200, 1);
        width: 100%;
        left: 0;
        display: none;
        border-radius: 4px;
        animation: slideup .3s ease;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        z-index: 3;
    }

    /*** show menu on hover ***/

    .menu li:hover>.submenu {
        display: grid;
    }

    .submenu li:hover>.submenu2 {
        display: grid;
    }

    /************************************************************************/

    .right img {
        margin-top: 50px;
        margin-left: 30%;
    }

    /** HOME ****************************************************************/

    .section-home-box {
        box-sizing: border-box;
        width: 100%;
        background: right / cover no-repeat fixed url(../img/background-mob.jpg);
    }

    .section-home-box h1 {
        font-size: 4rem;
        text-align: center;
        padding-top: 100px;
    }

    .section-home-box h2 {
        font-size: 4rem;
        text-align: center;
    }

    .section-home-box a {
        padding-top: 100px;

    }

    .estimate {
        padding-inline: auto;
        margin-inline: auto;
        justify-content: unset;
    }

    .estimate img {
        display: none;
        width: 0;
    }

    .estimate .img-esq {
        display: none;
        width: 0;
    }

    .estimate button {
        display: block;
        padding: 1rem 0;
        width: 300px;
        margin-top: 15%;
    }


    /** SECTION ABOUT US ***************************************************************/

    .section-box {
        width: 100%;

        box-sizing: border-box;
        padding: 0;
    
    }

    .section-aboutus-box {
        background: center / cover no-repeat fixed url(../img/background-about-mob.jpg);
    }

    .section-aboutus-box h1 {
        font-size: 3rem;
        max-width: 90%;
        text-align: center;
    }

    .section-aboutus-box span {
        color: #ff0000;
    }

    .section-aboutus-content {
        max-width: 100%;
        padding: 20px;
        background-color: rgb(255, 255, 255, .8);

        display: flex;
        flex-direction: column;
        gap: 40px;

    }

    .section-aboutus-content img {
        width: 40%;
    }

    .core-values {
        background-color: rgb(220, 220, 220);
        padding-inline: 20px;
    }

    .core-values-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }

    .section-aboutus-content2 {
        flex-direction: column;

    }

    /*** OUR SERVICES ****************************/

    .services-right img {
        width: 40%;
    }

    .services-left img {
        width: 40%;
    }

    .ourservices-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ourservices-box-logo {
        width: 40%;
    }

    .ourservices-box-logo img {
        width: 80%;
    }

    .ourservices-box-logo h1 {
        font-size: 1.5rem;
    }

    .btn {
        width: 200px;
    }

    /******************************************************/

    .galeria {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 15vh;
    }

    .contact-box {
        display: flex;
        width: 100%;
        padding-top: 20px;
        background-color: #F4F6EB;
        padding-bottom: 40px;
    }

    .form-box {
        min-width: 90%;
        min-height: 400px;
        text-align: center;
        justify-self: center;
        align-self: center;
    }

    .formulario textarea {
        width: 100%;
    }


    .formulario {
        width: 100%;
        box-sizing: border-box;
    }

    .maquina {
        display: none;
    }

    .form-desc {
        display: none;
        width: 0;
    }

    .formulario input {
        width: 100%;
        padding: 10px;
        font-size: 1rem;
        text-align: center;
    }

    .formulario input[type="submit"] {
        background-color: red;
    }

    .team-cont {
        margin-bottom: 30px;
        align-items: baseline;
    }

    .ourteam-box {
        padding: 0;
        background-size: contain;
        background-position: bottom;
        background-color: #000;
        align-items: baseline;
    }

   .title h1 {
        
        margin-top: 100px;
    }

    .ourteam-box span {
        color: #ff0000;
        background-color: none;
    }

    .team-people-photo {
        text-align: center;
        justify-self: center;

        padding-top: 20px;
    }

    .team-people-left {
        border: 2px solid #c1c1c1;
        border-radius: 10px;
       
    }

    .ourteam-box h1 {
        padding-left: 0;
        left: 0;
        position: static;
    }

    .team-box {
        width: 100%;
        flex-direction: column;
    }

    .footer {
        box-sizing: unset;
        width: 100%;
        display: block;
        padding: 0;
        font-size: 10px;
    }

    .footer1 {
        box-sizing: border-box;
        width: 100%;
        text-align: center;
        padding-top: 30px;
        margin-bottom: 30px;
    }

    .footer1 ul li {
        display: inline-block;
        padding-inline: 5px;
        font-size: 10px;
    }

    .footer1 li a {
        display: inline-block;
        font-size: 10px;
    }

    .footer1 li i {
        font-size: 32px;
        padding-right: 10px;
    }

    .footer1 h1 {
        font-size: 20px;
    }

    .footer2 {
        text-align: center;
    }

    .usss {
        width: 150px;
    }

    .aj {
        width: 24px;
        margin-bottom: 20px;
    }

    .btn {
        width: 200px;
        border-radius: 50px;
        padding-top: 50px;
        padding-bottom: 5px;
    }

    .ourservices-box-logo {
        display: none;
    }

    .ourservices-box-cont {
        gap: 0;
        padding: 0;
        align-items: center;
    }

    .ourservices-box-menu {
        width: 100%;
    }

    .services-left {
        background-position: center top;
    }

    .robotic-demolition {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .concrete-scanning {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .concrete-coring {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .concrete-cutting {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .exterior-demolition {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .interior-demolition {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .dumpster {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .final-cleaning {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .painting {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .general-labor {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .flooring-polishing {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .flooring-preparation {
        background-position-y: -50px;
        background-position-x: center;
        text-align: center;
    }

    .section-home-box h1 {
        font-size: 3rem;
        padding-top: 300px;

    }

    .section-home-box h2 {
        font-size: 3rem;
    }
    .desk {
        display: none;
    }
    .mobile {
        display: inline-block;
    }

  .services-h1-mobi h1 {
        display:flex;
        position: relative;
        width: 100%;
        font-size: 3rem;
    }

    .team-people-desc h1 {
        font-size: 18px;
    }

    .team-people-desc h2 {
        font-size: 16px;
        color: #fff;
    }
}