:root{
    font-size: 62.5%;
    box-sizing: border-box;
    --color-principal: #3068A1;
    --color-secundario: #6F7072;
    --color-footer: #D3D3D3;
    --color-card: #F5F5F5;
    --color-text: #53535C;
    font-family: 'Montserrat', sans-serif;
}
.mobile-menu{
    display: none;
}
.mobile-menu-items{
    display: none;
}
h4{
    color: var(--color-principal);
    font-size: 1.4rem;
    margin-bottom: 0;
}
h2{
    margin-bottom: 5rem;
}
.footer-columns{
    padding-bottom: 1.5rem;
}
.bold{
    font-weight: 700;
}
body{
    margin: 0;
    padding: 0;
    color: var(--color-text);
}
.blue{
    color: var(--color-principal)
}
/* CABECERA GENERAL */

.main-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width: 22rem;
    margin-left: 3rem;
}
.head-contact{
    display: flex;
}
.head-item{
    line-height: 1.3;
    font-size: 1.4rem;
    padding-right: 3rem;
    border-left: 1px var(--color-text) solid;
    padding-left: 1rem;
    margin-top: 0;
}

.head-item:nth-child(1){
    border-left: 0;
}
.head-item p{
    margin-bottom: 0;
    margin-top: 0;
}

.head-item p:nth-child(1){
    font-weight: 700;
}

.main-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-secundario);
}
.main-items-list{
    display: flex;
    padding-left: 0;
    font-size: 1.4rem;
}
.main-item-list{
    list-style: none;
    padding-left: 3rem;
}

.rent-button li{
    padding-left: 3rem;
    padding-right: 3rem;
    font-weight: 700;
}
.main-item-link{
    text-decoration: none;
    color: white;
    padding: 1rem;
}
.rent-button{
    background-color: var(--color-principal);
}
.main-item-link:hover{
    border-bottom: 2px white solid;
}

/**********************/
/*** FIN DEL HEADER ***/
/**********************/

.banner{
    background-image: url(../pantallaprincipal/banner.png);
    background-position: center center;
    background-size: cover;
}
h1{
    margin-top: 0;
    padding-top: 5rem;
    padding-left: 5rem;
    color: white;
    font-size: 3rem;
}
h1::after{
    content: '';
    display: block;
    width: 6rem;
    height: .6rem;
    background-color: white;
    margin-top: .5rem;
}

.banner p{
    font-size: 1.5rem;
    color: white;
    padding-left: 5rem;
    max-width: 60rem;
    padding-bottom: 5rem
}
.principal-button{
    margin-left: 5rem;
    padding: 1rem;
    width: 30rem;
    font-size: 1.4rem;
    background-color: var(--color-principal);
    border: 0;
    border-radius: .5rem;
    margin-bottom: 12rem;
    margin-top: -2rem;
}
.principal-button:hover{
    background-color: #1C4D80;
}
.principal-button a{
    color: white;
    text-decoration: none;
}

#about-us{
    background-image: url(../Nosotros/nosotros.png);
    background-position: 25% 35%;;
    background-size: cover;
    width: 100%;
    height: 40vh;
}
#rent{
    background-image: url(../rentademaquinaria/rentademaquinaria.png);
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 40vh;
}
#Our-portfolio{
    background-image: url(../portafolio/portafolio.png);
    background-position: 25% 35%;;
    background-size: cover;
    width: 100%;
    height: 40vh;
}
#cotizacion{
    background-image: url(../cotizacion/cotizacion.png);
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 40vh;
}

/**** FIN DEL BANNER ****/

.delivery-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-principal);
    height: 8rem;
    margin-bottom: 7rem;
}
.delivery-bar h2{
    color:white;
    padding-left: 5rem;
    font-size: 2rem;
    margin: auto;
}

.delivery-bar h2:after{
    display: none;
}
.secondary-button{
    width: 30rem;
    font-size: 1.4rem;
    background-color: white;
    border: 0;
    border-radius: .5rem;
    padding: .7rem;
    margin-right: 3rem;
}
.secondary-button a{
    color: var(--color-principal);
    text-decoration: none;
    font-weight: 700;
}
.secondary-button:hover{
    background-color: var(--color-card);
}

/*****************************/
/*******FIN DE LA BARRA AZUL**/
/*****************************/

.footer-columns{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
}
.footer-logo{
    width: 150px;

}
.footer-menu-list{
    list-style: none;
    padding-left: 0;
}
.footer-menu-item{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-text);
    font-weight: 700 ;
}
.socialmediaurl{
    display: flex;
    justify-content: space-between;
}
.main-footer{
    background-color: var(--color-card);
}
.dos17brand, .dos17brand a{
    text-align: center;
    color: white;
    background-color: var(--color-principal);
    padding: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
}
.dos17brand p{
    margin: 0;
}
.boldy{
    font-weight: 700;
}

/******************************/
/******CUERPO******************/
/******************************/
h3{
    color: var(--color-principal);
    font-size: 1.6rem;
}
h2{
    font-size: 2.5rem;
    text-align: center;
}
h2::after{
    content:'';
    display: block;
    width: 5rem;
    height: .7rem;
    background-color: var(--color-secundario);
    margin-left: auto;
    margin-right: auto;
    margin-top: .3rem;
}

.bout-us{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 2rem;
    grid-auto-rows: auto;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10rem;
    margin-top: 5rem;
}

.bout-us-card img{
    display: block;
    min-width: 150px;
    height: 150px;
}
.bout-us-card{
    display: flex;
    width: 100%;
    background-color: var(--color-card);
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-shadow: 1px 1px 4px var(--color-secundario);
    border-radius: 5px;
}
.bout-us-cardtext{
    margin-left: 1.5rem;
    font-size: 1.2rem;
    margin-right: 1.5rem;
}
#icon{
    padding: 2rem;
    width: 100px;
}

.our-services{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    background-color: var(--color-card);
}
.service-list{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    padding-left: 0;
    list-style: none;
    animation: cambio 20s infinite;
    animation-direction: alternate-reverse;
}
.services{
    width: 480px;
    overflow: hidden;
  
}
@keyframes cambio{
    0% {margin-left: 0;}
    18% {margin-left: 0;}

    20% {margin-left: -100%}
    38% {margin-left: -100%}

    40% {margin-left: -200%}
    58% {margin-left: -200%}

    60% {margin-left: -300%}
    78% {margin-left: -300%}

    80% {margin-left: -400%}
    100% {margin-left: -400%}
} 
.service-item{
    width: 480px;
}
.service-item:hover{
    width: 100%;
}
.service-item img{
    display: block;
    height: 320px;
}

.services-info{
    width: 80%;
    margin-left: auto;
    margin-right: auto; 
    text-align: center;
}

.services-info p{
    font-size: 1.3rem;
}

.why-pyrsa{
    margin-top: 5rem;
    margin-bottom: 7rem;
}
.why-cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
    max-width: 80%;
    margin: 0 auto;
}
.why-pyrsa-card{
    background-color: var(--color-card);
    text-align: center;
    padding: 2rem;
    box-shadow: 1px 1px 5px var(--color-secundario);
    border-radius: 5px;
}
.why-pyrsa-card p{
    margin-bottom: 0;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0;
    margin-top:0;
}
.why-pyrsa-card h3{
    font-size: 4rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
    line-height: 1;
    padding: .1px;
}
.why-pyrsa-card p:nth-child(2){
    line-height:1;
    margin-top: 0;
}

/*********************************/
/*----DISTINTIVOS AQUÍ-----------*/
/*********************************/

.distintives h2{
    margin-bottom: 5rem;
}
.dist-cards{
    display: grid;
    max-width: 80%;
    margin: auto;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2rem;
    text-align: center;
    margin-bottom: 5rem;

}
.dist-card img{
    width: 90px;
}
.dist-card{
    padding: 1rem;
    background-color: var(--color-card);
    border-radius: 5px;
    box-shadow: 1px 1px 5px var(--color-secundario);
    font-size: 1.4rem;
}


/*************************/
/*****+lista de página****/
/*****ABOUT US ***********/

.curri{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6,1fr);
    grid-gap: 3rem;
    max-width: 80%;
    margin: auto;
}

.curri-card-list{
    list-style: none;
    padding-left: 0;
    font-size: 1.4rem;
}
.curri-card-list li{
    margin-bottom: 1.5rem;
}

.curri-card{
    background-color: var(--color-card);
    padding: 2rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: 1px 1px 5px var(--color-secundario);
}

.one{
    grid-row-start: 1;
    grid-row-end: 3;
}

.two{
    grid-row-start: 2;
    grid-row-end: 4;
}
.three{
    grid-row-start: 3;
    grid-row-end: 5;
}
.four{
        grid-row-start: 4;
        grid-row-end: 6;
 }
 .five{
        grid-row-start: 5;
        grid-row-end: 7;
 }
 .experience{
     margin-bottom: 7rem;
 }

 /***************************/
 /******OUR PORTFOLIO********/
 /***************************/

.portafolio-card{
    background-color: var(--color-card);
    margin-top:-2rem;
    padding: 2rem;
}
.portfolio-cards{
     display: grid;
     grid-template-columns: repeat(3,1fr);
     grid-gap: 2rem;
     max-width: 80%;
     margin: auto;

}
.port-card img{
    width: 100%;
}
.port-card{
    text-align: center;
    text-transform: uppercase;
}
.port-card h3{
    margin-top: .5rem;
}

.logos{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    max-width: 80%;
    grid-template-rows: repeat(3, minmax(200px,201px));
    margin: auto;
    grid-gap: 2rem;
    margin-bottom: 5rem;
}
.logos img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*****************************/
/********** CONTACTO *********/
/*****************************/

.contacting{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 80%;
    margin: auto;
    grid-gap: 2rem;

}
.contact-title{
    display: flex;
    align-items: center;
}
.contact-title p{
    font-size: 1.3rem;
    margin-left: 1rem;
}
input{
    display: block;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 5px;
    border: 1px solid var(--color-text);
    padding:1rem;
}
label{
    display: block;
    font-weight: 700;
    margin-bottom: .7rem;
    margin-top: 1.3rem;
}
.contact-form{
    padding: 2rem;
}
.submit-button{
   border: none;
   background-color: var(--color-principal);
   color: white;
   font-size: 1.3rem;
   width: 18rem;
   padding: 1rem;
   margin-top: 1.3rem;
   border-radius: 5px;
}
.contact{
    margin-bottom: 5rem;
    margin-top: 3rem;
}
iframe{
    width: 90%;
}


/************************************/
/*********** FOR RENT ***************/
/************************************/

.for-rent{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
    grid-auto-rows: auto;
    max-width: 80%;
    margin: auto;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.rent-cards img{
    width: 100%;
    border-radius: 5px 5px 0 0;
}
.rent-cards{
    text-align: center;
    background-color: var(--color-card);
    border-radius: 5px;  
}
.rent-cards a{
    text-decoration: none;
    color: var(--color-principal);
    font-size: 1.5rem;
    font-weight: 700;
}
.rent-cards h3{
    padding: 0 1.5rem 0 1.5rem;
}
.for-rent-button{
    width: 90%;
    padding: 1rem;
    border: 1.4px solid var(--color-principal);
    background-color: transparent;
    border-radius: 5px;
    margin: 1.5rem auto;
    cursor: pointer;
    display: block;
}
.for-rent-button:hover{
    background-color: var(--color-principal);
    color: white;
}
.for-rent-button a{
    text-decoration: none;
    color: var(--color-principal);
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
}
.agradecimiento{
    background-color: var(--color-principal);
    padding: 5rem;
}
.agradecimiento h4{
    font-size: 2.5rem;
    color: white;
    max-width: 80%;
    margin: auto;
    text-align: center;
}

/************************************/
/*********** COTIZACIÓN *************/
/************************************/

.cotizacion-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.formulario-cotizacion{
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5rem;
    padding-top: 4rem;
}
.dates{
    display: flex;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.dates label{
    margin-right: 2rem;
    margin-left: 1rem;
}
.formulario-cotizacion p{
    font-weight: 700;
}

.logistic{
    background-image: url(../cotizacion/logistica.png);
    background-position: center center;
    background-size: cover;
    margin-top:0;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logistic h2::after{
    background-color: white;
    margin-left: 0;
}
.logistic img{
    width: 150px;
    padding-left: 5rem;
}
.logistic h2, .logistic p{
    text-align: left;
    padding-left: 5rem;
    margin-bottom: 2rem;
}
.logistic p{
    font-size: 1.4rem;
    max-width: 70%;

}


@media only screen and (max-width: 900px){
    .main-header{
        display: flex;
        flex-direction: row-reverse;
        position: relative;
    }
    .mobile-menu{
        display: block;
        width: 4rem;
        height: 3rem;
        background-image: linear-gradient(var(--color-principal) 0%,
        var(--color-principal) 20%, white 20%, white 40%, var(--color-principal) 40%,
        var(--color-principal) 60%, white 60%, white 80%, var(--color-principal) 80%,
        var(--color-principal)100%);
        margin-left: 3rem;
        cursor: pointer;
   }
  
   .mobile-items{
       padding-left:0;
       font-size: 1.4rem;
   }
   .mobile-menu-items{
       text-align: center;
       background-color: var(--color-principal);
       background-blend-mode: multiply;  
       display: block;
       position: fixed;
       width: 50vw;
       height: 100vh;
       margin-left: -60vw;
       margin-top: 5.5rem;
       transition: margin-left .3s;
   }
    .mobile-menu:active .mobile-menu-items{
        margin-left: -5vw;
        margin-top: 5.5rem;
    }
   .mobile-link{
       text-decoration: none;
       color: white;
       margin-top: 0;
       padding: 1.5rem;
       display: block;
   }
   .mobile-link:hover, .ghost-button:hover{
       background-color: #1E4A77;
   }
   .encuentranos{
    display: flex;
    flex-direction: column;
    justify-content: center;
   }
   .ghost-button{
       background: none;
       margin-bottom: 3rem;
       border: 1px solid white;
       border-radius: 5px;
       margin-right: 3rem;
        margin-left: 3rem;
    }
    .high-light{
        font-weight: 700;
        font-size: 2rem;
    }
    .ghost-button a{
        font-weight: 700;
    }
    .mobile-rent-button{
        background: none;
        margin: auto;
        display: block;
    }
   .delivery-bar{
       display: block;
       padding: 2rem;
   }
   .delivery-bar h2{
       margin-bottom: 2rem;
       margin-top: 0;
   }
   .secondary-button{
       display: block;
        margin-left: auto;
        margin-right: auto;
   }
   .mobile-menu-list:active .animated-menu{
        display: block;
   }
   .main-menu{
       display: none;
   }
   .head-contact{
       display: none;
   }
   .bout-us{
       max-width: 90%;
   }
   .dist-cards{
       max-width: 96%;
   }
   #bout-us-card{
    display: flex;
    flex-direction: column;
    }
    .portfolio-cards{
    max-width: 95%;
    }
    .logos{
        max-width: 90%;
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

.for-rent{
    max-width: 98%;
    }
    .cotizacion-form{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr, 1fr;
    }
    .logistic{
        align-items: center;
    }
    .logistic p{
        text-align: center;
    }
    .submit-button{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3rem;
        width: 100%;
    }
    .contacting{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        max-width: 90%;
        margin: auto;
        grid-gap: 2rem;
    }
    iframe{
        width: 100%;
    }
}
@media only screen and (max-width: 720px){
    .dist-cards{
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 90%;
        margin: auto;
        margin-bottom: 7rem;
    }
    
    .bout-us{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 2rem;
        grid-auto-rows: auto;
        max-width: 90%;
        margin-bottom: 5rem;
    }
    
    .bout-us-card img{
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: .5rem .5rem 0 0;
    }
    .bout-us-card{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 0;
    }
    .bout-us-cardtext{
        Text-align: center;
    }
    
    .our-services{
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        align-items: center;
        justify-items: center;
        background-color: var(--color-card);
    }
    .our-services h2{
        margin-bottom: 0;
        margin-top: 7rem;
    }
    .our-services p{
        margin-bottom: 7rem;
    }
    .why-cards{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 2rem;
        max-width: 96%;
        margin: 0 auto;
    }
    .secondary-button{
        width: 30rem;
        font-size: 1.4rem;
        background-color: white;
        border: 0;
        border-radius: .5rem;
        padding: .7rem;
        margin-right: auto;
        margin-left: auto;
    }
    .delivery-bar{
        background-color: var(--color-principal);
        height: 8rem;
        margin-bottom: 7rem;
        padding-bottom: 5rem;
    }
    .delivery-bar h2{
        color:white;
        padding-left: 0;
        font-size: 2rem;
    }
    .footer-columns{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-items: center;
    }
    .footer-columns a{
        text-transform: uppercase;
    }
    .footer-logo{
        display: none;
    }
    #icon{
        width: 100px;
        height: 100px;
        object-fit: contain;
    }
    .curri{
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-columns: none;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        max-width: 90%;
        margin: auto;
    }
    
    .curri-card-list{
        list-style: none;
        padding-left: 0;
        font-size: 1.4rem;
    }
    
    .curri-card{
        background-color: var(--color-card);
        padding: 2rem;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        box-shadow: 1px 1px 5px var(--color-secundario);
        text-align: center;
    }
    .one{
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    .two{
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .three{
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .four{
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .five{
        grid-row-start: 5;
        grid-row-end: 6;
    }
    .portafolio-card{
        background-color: var(--color-card);
        margin-top:-2rem;
        padding: 2rem;
    }
    .portfolio-cards{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
        max-width: 95%;
        margin: auto;
    } 
    
    .logos{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        max-width: 80%;
        margin: auto;
        grid-template-rows: 10rem 10rem 10rem 10rem 10rem;
        grid-gap: 2rem;
        margin-bottom: 5rem;
    }
    .for-rent{
        display: grid;
        grid-template-columns: repeat(2, calc(50% - 1rem));
        grid-gap: 2rem;
        grid-auto-rows: auto;
        max-width: 90%;
        margin: auto;
        margin-top: 5rem;
        margin-bottom: 5rem;
        
    }
    .agradecimiento h4{
        font-size: 2rem;
        max-width: 100%;
    }
    .logistic h2::after{
        background-color: white;
        margin:auto;
        margin-top: 1rem;
    }
    .logistic img{
        padding-left: 0;
    }
    .logistic h2, .logistic p{
        text-align: left;
        padding-left: 0;
        margin-bottom: 2rem;
    }
    .logistic p{
        max-width: 90%;
        text-align: center;
        margin: auto;
        margin-bottom: 7rem;
    }
}
@media only screen and (max-width: 480px){
    .mobile-items{
        padding-left:0;
        font-size: 1.4rem;
    }
    .mobile-menu-items{
        text-align: center;
        background-color: var(--color-principal);
        background-blend-mode: multiply;  
        display: block;
        position: fixed;
        width: 80vw;
        height: 100vh;
        margin-left: -90vw;
        margin-top: 5.5rem;
        transition: margin-left .3s;
    }
    .mobile-menu:hover .mobile-menu-items{
        margin-left: -9vw;
        margin-top: 5.5rem;
    }
    .why-cards{
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-gap: 2rem;
        max-width: 90%;
        margin: 0 auto;
    }
    .dist-cards{
        display: grid;
        grid-template-columns: 1fr;
        max-width: 90%;
        margin: auto;
        margin-bottom: 5rem;
    }
    .bout-us{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
        grid-auto-rows: auto;
        max-width: 90%;
    }
    .footer-columns{
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        max-width: 100%;
    }
    .footer-logo{
        display: block;
    }
    .footer-column:nth-child(2){
        display: none;
    }
    .banner{
        background-image: url(../pantallaprincipal/banner.png);
        background-position: center center;
        background-size: cover;
        padding-bottom: 7rem;
        width: 100vw;
        height: 50vh;
    }
    h1{
        padding-top: 5rem;
        padding-left: 0;
        color: white;
        font-size: 2.5rem;
        text-align: center;
    }
    h1::after{
        content: '';
        display: block;
        width: 6rem;
        height: .6rem;
        background-color: white;
        margin: auto;
        margin-top: .5rem;
    }
    
    .banner p{
        font-size: 1.5rem;
        color: white;
        padding-left: 0;
        max-width: 90%;
        margin: auto;
        text-align: center;
        padding-bottom: 5rem;
    }
    .principal-button{
        display: block;
        margin: auto;
        padding: 1rem;
        width: 30rem;
        font-size: 1.4rem;
        background-color: var(--color-principal);
        border: 0;
        border-radius: .5rem;
    }
    .principal-button:hover{
        background-color: #1C4D80;
    }
    .principal-button a{
        color: white;
        text-decoration: none;
    }
    .logos{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        max-width: 80%;
        margin: auto;
        grid-template-rows: repeat(8,10rem);
        grid-gap: 2rem;
        margin-bottom: 5rem;
    }
    #tatsa{
        grid-column-start: 1;
        grid-column-end: 3;
        height: 100%;
        width: 100%;
        object-fit: contain;

    }
    .for-rent{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
        grid-auto-rows: auto;
        max-width: 90%;
        margin: auto;
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
    .agradecimiento h4{
        font-size: 1.5rem;
        min-width: 100%;
    }
    .services{
        width: 300px;
        overflow: hidden;
      
    }

    .service-item{
        max-width: 300px;
    }
    .service-item img{
        display: block;
        width: 300px;
        height: 100%;
    }
}