body{
    padding:0;
    margin:0;
    
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size:1.1rem;
}

.ampladaMaximaHeader {
    width:100%;
    max-width:1920px;
    margin:auto;
}

.ampladaMaximaContingut {
    width:100%;
    max-width:1420px;
    margin:auto;
}

a{text-decoration:none;}

/* ======== HEADER ========= */ 

#header{
    padding:1rem;
    border-bottom:1.5px solid #EEEEEE;
}

#headerContent{
    display:flex;
    flex-wrap:wrap;
    font-weight: 400;
}

.menu-icon {
    color: #000;
    cursor: pointer;
    width:4rem;
    padding:1rem 0;
    text-align:center;
        
    display:none;
}

#divLogo{width:fit-content;}
#divLinks{
    width:fit-content;
    margin-left: auto;
}

.sliderContent{border-radius:1rem;overflow:hidden;margin-top:4rem;height:50vh;min-height:400px;position:relative;}
.imgSlider{object-fit: cover; object-position: center; width: 100%;}



/* ======== LINKS HEADER ========= */ 
.ulMenu{
    display:flex;
    flex-wrap:wrap;
    list-style-type: none;
}
.divContainerLink{padding: 0 2rem;}
.headerLink{
    color: #000;
    padding:0.8rem 1.5rem;
    border-radius:10px;
}

.headerLink:hover{
    color:#000;
    background:#F5F5F5;
}

.contacteLink{
    text-decoration:none;
    padding:0.6rem 1rem;
    border-radius:10px;
    color:#FFF;
    background: #FF0100;
}

.linkSubmenu{
    color: #000;
    padding:0 2rem;
    cursor:pointer;
}

/* ANIMACIÓ */
@keyframes smooth-appear {
  to{
    bottom: 20px;
    opacity:1;
  }
}

/* AL FER HOVER SOBRE EL BOTO, DESSPLEGUEM EL SUBMENU AMB UNA ANIMACIÓ */
.ulMenu li:hover > ul {
    display:block;
    
    top: 3.4rem;
    opacity:0;
    animation: smooth-appear 0.5s ease forwards;
}

/* ESTILS SUBMENU DESPLEGABLE */
.ulSubMenu{
    display:none;
    position:absolute;
    z-index:100;
    padding:0 1rem;
    padding-top:2.1rem;
    list-style-type: none;
    background:transparent;
}

.ulSubMenu li{
    background:#FCFCFC;
    opacity:0.96;
    padding:1rem 3rem;
}

.ulSubMenu li a{
    color:inherit;
}

.ulSubMenu li a:hover{
    color:#FF0100;
}

.borderTOPli{border-top:1.5px solid #FF0100;}





/* ======== SLIDER ========= */ 
.eslogan{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color:#FFF;width:95%;text-align:center;}
.esloganTitol{font-size:3.5rem;font-weight:900;}
.esloganSubtitol{font-size:1.1rem;font-weight:500;}



/* ======== PARAGRAFS ========= */ 
.titolParagraf{font-size:2rem;font-weight:600;margin-top:6rem;}

.perque{
    width: calc(1420px - 400px);
    margin-top:2rem;
    line-height:1.7;
}

.text{
    margin-top:2rem;
    line-height:1.7;
}

.contenidorItems{display:flex;flex-wrap:wrap;margin-top:3rem;}

.pericia{width:25%;}
.experiencia{width: calc(25% - 2rem);margin: 0 1rem;}
.eficiencia{width: calc(25% - 1rem);margin-right: 1rem;}
.exelencia{width:25%;}

.imatgeItem{
    border-radius:10px;
    overflow:hidden;
    height:12rem;
}
.imatgeItem img{
    object-fit: cover; 
    object-position: center; 
    width: 100%;
    height:100%;
}

.titolItem{
    font-weight:500;
    margin-top:1.5rem;
    color:#000;
}

.textItem{
    margin-top:0.5rem;
    font-size:1rem;
    line-height:1.5;
    color:#9c7366;
}


   /* +++++++++++++++++++++++++++++++++++++
        I N S T A L · L A C I O N S  
   +++++++++++++++++++++++++++++++++++++ */
   .divFlexImatges{
        margin-top:3rem;
       display:flex;
       flex-wrap:wrap;
       justify-content:space-around;
       overflow:hidden;
   }
   
   .imatge1{width:31%;}
   .imatge2{width:31%;}


/* ======== EQUIP ========= */ 
.titolParagraf2{font-size:1.5rem;font-weight:600;margin-top:6rem;}
.equip1{width: calc(25% - 1rem);margin-right: 1rem;}
.equip2{width: calc(25% - 0.5rem);margin-right:  0.5rem;}
.equip3{width: calc(25% - 0.5rem);margin-left: 0.5rem;}
.equip4{width: calc(25% - 1rem);margin-left:  1rem;}

.imatgeEquip{
    border-radius:10px;
    overflow:hidden;
    height:20rem;
}
.imatgeEquip img{
    object-fit: cover; 
    object-position: center; 
    width: 100%;
    height:100%;
}

.titolEquip{
    font-weight:400;
    margin-top:1.5rem;
    color:#000;
}




/* ======== FORM ========= */ 
input[type="text"]{
    border:1px solid #CAA79E; color: #9c7366; border-radius:8px;padding:1rem;width:calc(100% - 2rem);outline: none;
    font-family: "Roboto", sans-serif;
    font-size:1rem;
}

textarea{
    border:1px solid #CAA79E; color: #9c7366; border-radius:8px;padding:1rem;width:calc(100% - 2rem);outline: none;resize: none;
    font-family: "Roboto", sans-serif;
    font-size:1rem;
}

input[type="submit"]{
    all: unset;
	
	cursor:pointer;
    padding:0.6rem 0;
    border-radius:10px;
    color:#FFF;
    background: #FF0100;
    width:100%;
}



/* ======== FOOTER ========= */ 
.footerContainer{
    color:#9c7366;
    border-top:1px solid #EEEEEE;
    padding-top:2rem;
    padding-bottom:3rem;
    font-size:1rem;
}

.itemPolitica{width:33%;text-align:center;}
.itemPolitica a{color:#9c7366;}







/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*                     R E S P O N S I V E                       */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 2000px) {

    #divLogo{padding:0 2rem;}
}





@media screen and (max-width: 1500px) {
    
    .contingut{
        margin: 0 3rem;
        width:calc(100% - 6rem);
    }
  
}





@media screen and (max-width: 1400px) {

    .imatgeEquip{ height:15rem; }
}





@media screen and (max-width: 1200px) {
    .imatgeEquip{ height:10rem; }
    .perque{width:90%;}
}





@media screen and (max-width: 1100px) {
    
    /* ======== PARAGRAFS ========= */ 
    .titolParagraf{margin-top:4rem;}
    
    .pericia{width: calc(49% - 1rem);margin:0;margin-right: 1rem;}  /*  margin:0; -> Resetegem valors de margin anteriors */
    .experiencia{width: calc(49% - 1rem);margin:0;margin-left: 1rem;}
    .eficiencia{width: calc(49% - 1rem);margin:0;margin-right: 1rem;margin-top:2rem;}
    .exelencia{width: calc(49% - 1rem);margin:0;margin-left: 1rem;margin-top:2rem;}
    
     /* +++++++++++++++++++++++++++++++++++++
        I N S T A L · L A C I O N S  
   +++++++++++++++++++++++++++++++++++++ */
   .imatge1{width:46%;}
   .imatge2{width:96%;margin-top:1rem;}
}






@media screen and (max-width: 900px) {


    /* ======== HEADER ========= */ 
    #divLogo{padding:0;}
    
    #header{
        padding:1rem 0;
    }

    .menu-icon {
        display: block;
        z-index: 1;
    }
    
    #divLogo{
        width:calc(100% - 4rem);
        text-align:center;
    }
    #divLinks{
        width:100%;
        display:none;
    }
    
    
    /* ======== SLIDER ========= */
    .imgSlider{object-fit: cover; object-position: center; width: 100%;height: 100%;}
    
    /* ======== LINKS HEADER ========= */ 
    .ulMenu{ display:block; padding:0;}
    .ulMenu li {
        padding:1rem 2rem;
        border-bottom:1px solid #F5F5F5;
    }
        
    .headerLink{
        text-decoration:none;
        color: #000;
        padding:0.8rem 1.5rem;
        border-radius:10px;
    }
    
    .headerLink:hover{
        color:#FF0100;
        background:transparent;
    }
    
    .contacteLink{
        padding:0.8rem 1.5rem;
        border-radius:0px;
        color:#000;
        background:transparent;
    }
    
    .contacteLink:hover{color:#FF0100;}
    
    .linkSubmenu{
        color: #000;
        padding:0.2rem 0rem;
        padding-left: 3.4rem;
    }
    
    /* AL FER HOVER SOBRE EL BOTO, DESSPLEGUEM EL SUBMENU AMB UNA ANIMACIÓ */
    .ulMenu li:focus > ul {
        display:block;
        top: auto;
    }

    /* ESTILS SUBMENU DESPLEGABLE */
    .ulSubMenu{
        display:none;
        position:static;
        z-index:auto;
        padding:0 1rem;
        list-style-type: none;
    }

    .ulSubMenu li{
        background:transparent;
        opacity:1;
        padding-left:5rem;
    }

    .ulSubMenu li a{ color:inherit; }

    .ulSubMenu li a:hover{ color:#FF0100; }

    .borderTOPli{margin-top:1rem;border-top:1.5px solid #F5F5F5;}


    
    /* ======== ALTRES ========= */ 
    .perque{width:100%;}
}




@media screen and (max-width: 800px) {
    .imatgeEquip{ height:6rem; }
  
    .esloganTitol{font-size:3rem;}
}



@media screen and (max-width: 600px) {
    
    .contingut{
        margin: 0 1.5rem;
        width:calc(100% - 3rem);
    }
    
    .itemPolitica{width:100%;padding:0.5rem 0;}
  
}



@media screen and (max-width: 450px) {
    
    .sliderContent{border-radius:0.6rem;}
    .esloganTitol{font-size:2.5rem;}
    
    
    /* ======== PARAGRAFS ========= */ 
    
    .pericia{width: 100%;margin:0;}  /*  margin:0; -> Resetegem valors de margin anteriors */
    .experiencia{width: 100%;margin:0;margin-top:2rem;}
    .eficiencia{width: 100%;margin:0;margin-top:2rem;}
    .exelencia{width: 100%;margin:0;margin-top:2rem;}
}

@media screen and (max-width: 300px) {
    
    .sliderContent{min-height:550px;}
    .esloganTitol{font-size:2rem;}
}