@charset "UTF-8";

.main, .mainForMobile{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 1200px;
flex-basis: 100%;
margin: 40px auto;
}

.mainForMobile{
justify-content: center;
display: none;
margin-bottom: 200px;

}

.main > .img, .mainForMobile > .img{
display: flex;
flex-basis: 100%;
width: 700px;
height: 700px;
max-width: 700px;
max-height: 700px;
background-repeat: no-repeat;
background-size: cover;
background-position: top;
border-radius: 10px;
margin:  20px;
transition: 1s ease-in-out;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.452);
background-color: #161616;
}


.main > #n1{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0000.jpg");}
.main > #n2{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0001.jpg");}
.main > #n3{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0002.jpg");}
.main > #n4{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0003.jpg");}


.main > #n5{background-image: url("../images/maqueMadeiraImages/WhatsApp_Image.jpeg");}

.mainForMobile > #n1mb{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0000.jpg");}
.mainForMobile > #n2mb{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0001.jpg");}
.mainForMobile > #n3mb{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0002.jpg");}
.mainForMobile > #n4mb{background-image: url("../images/maqueMadeiraImages/IMG-20240705-WA0003.jpg");}

.mainForMobile > #n5mb{background-image: url("../images/maqueMadeiraImages/WhatsApp_Image.jpeg");}

.main > span:hover{

    z-index: 1;
    transition: .5s ease-in-out;

}

.textForImage, .textForImageMobile{
display: flex;
flex-wrap: wrap;
padding: 0 20px;
overflow: hidden;
background-color: whitesmoke;
background-image: linear-gradient(to top, white,rgb(248, 248, 248));
}

.textForImage{
max-width: 400px;
height: 900px;
border-radius: 20px 200px 20px 20px;
}

.textForImageMobile{
max-width: 700px;
height: 400px;
border-radius: 10px 10px 10px 10px;
}

.textForImage > h1, .textForImageMobile > h1{
display: flex;
flex-basis: 100%;
align-items: center;
width: 100%;
height: 200px;

}

.textForImage > p, .textForImageMobile > p{
text-align: justify;
height: 100%;

}