*{
    padding:0;
    margin:0 ;
}

img{
    max-width:100%;
    
}
.blue{
    background-color:#0C4f70;
    color: white;
}
header h1{
    text-align: center;
}

.lovers-page{
 height: 50px;
 padding:20px 0px ;
  
}

.banner-1 img {
     width: 100%; 
     height: auto; 
    }
   
.banner-1{
    margin: 0px  0px 84px;
    
}

 .All-middle-elements{

        width:80%;
         margin-left: auto;
         margin-right: auto;
         
    }
    .container{
    display:flex;
    margin-bottom: 40px;
    }
.puppy-1, .missing-puppy, .puppy-2{
    flex:1;
}

.puppy-1 img, .puppy-2 img{
    width:100%;
    /* here is a character below which make the middle missing puppy height equal to the others otherwise the middle element height longer than the others*/
     display: block;
}
.missing-puppy{
    background-color: brown;
     margin:0 1%;
     display:flex;
     justify-content: center;
     align-items: center;   
}

.missing-wrapper{
    font-size: 40px;
    padding:0px 2px;
    text-align: center;
    font-weight: bold;
    /* box-sizing: border-box; */
}
.additionalpuppies h2{
text-align: center;
margin-bottom: 40px;
font-size: 40px;
}

.con1{
    display:flex;
   
} 

.puppy-3{
    margin-right:30px ;
}
.puppy-4{
    margin-left: 30px;
}

.puppy-3,.puppy-4{
width:50%
}
.puppy-3 img,.puppy-4 img{
width:100%
}

footer{
    margin-top: 75px;
    padding:100px 0px 125px;
    text-align: center;
    font-size: 30px;

}
.otherstyle{
    height: 100px;
}