pros_and_cons.css

body{
    font-family: Century Gothic;
    background-image: url('istockphoto-1387945043-170667a.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-color:bisque;
    background-blend-mode: multiply;
}
.main{
    top: 30%;
    float: right;
}
.logo {
    top: 50%;
    left: 20%;
}
.logo.img{
        width: 100px;
    }
ul{
    list-style-type: none;
    float: right;
}
ul li{
    display: inline-block;
}
ul li a{
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    border: 1px solid transparent;
    margin-top: 25px;
    transition: 0.6s ease;
}
ul li a :hover{
    background-color: #fff;
    color: #000;
}
ul li.active a{

}
 
.title{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title h1{
     color: #fff;
    font-size: 70px;
    
}
.Button{
    position: absolute;
    top: 70%;
    left: 40%;
    transform: translate(-50%, -50%);
}
.Btn{
    border: 1px solid #fff;
    padding: 10px,30px;
    color: #fff;
    text-decoration: none;
    transition: 0.6s ease;
}
.Btn :hover {
    background-color: #fff;
    color: #000;
    width: 200px;

}
a:hover {
background-color: rgb(162, 214, 242);
}
.section {
width:70%;
min-height:70vh;
background-color: #fff;
align-content: center;
position: absolute;
top: 130%;
left: 50%;
transform: translate(-50%, -50%);
}
.container{
width: 70%;
margin:auto;
padding-top:70px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-section{
float:left;
width: 55%;
}
.image-section img{
width:100%;
height:auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 24px;
}
.content-section .content{
margin-top: 20 px;
color: #5d5d5d;
}
.content-section .content{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}



.section1 {
width:70%;
min-height:70vh;
background-color: #fff;
align-content: center;
position: absolute;
top: 230%;
left: 50%;
transform: translate(-50%, -50%);
}
.container1{
width: 70%;
margin:auto;
padding-top:70px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-section1{
float:left;
width: 55%;
}

.content-section1 .title1{
text-transform: uppercase;
font-size: 24px;
}
.content-section1 .content1{
margin-top: 20 px;
color: #5d5d5d;
}
.content-section1 .content1{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.end{
    width:100%;
    min-height:20vh;
    background-color: #fff;
    align-content: center;
    position: absolute;
    top:300%;
    left: 50%;
    transform: translate(-50%, -50%);
    }