devices.css

body{
    font-family: Century Gothic;
    background-image: url('istockphoto-1341437690-170667a.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-color:bisque;
    background-blend-mode: multiply;
}
header{
height: 100vh;
}
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{

}
.logo img{
    float: left;
    width: 350px;
    
}

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

.title h1{
    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;
top: 150px;
background-color: #fff;
align-content: center;
position: absolute;
top: 100%;
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{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;

}
.image-section img{
width:78%;
height:auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 24px;
}
.content-section .content{
margin-top: 20px;
color: #5d5d5d;
}
.content-section .content{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.logo img{
    float: left;
    width: 250px;
    
}

.section1 {
width:70%;
min-height:70vh;
background-color: #fff;
align-content: center;
position: absolute;
top: 200%;
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%;
}
.image-section1{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;

}
.image-section1 img{
width:78%;
height:auto;
}
.content-section1 .title1{
text-transform: uppercase;
font-size: 24px;
}
.content-section1 .content1{
margin-top: 20px;
color: #5d5d5d;
}
.content-section1 .content1{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section1 .content1 .button1 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}



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

}
.image-section2 img{
width:78%;
height:auto;
}
.content-section2 .title2{
text-transform: uppercase;
font-size: 24px;
}
.content-section2 .content2{
margin-top: 20px;
color: #5d5d5d;
}
.content-section2 .content2{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section2 .content2 .button2 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section2{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}


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

}

.content-section3 .title3{
text-transform: uppercase;
font-size: 24px;
}
.content-section3 .content3{
margin-top: 20px;
color: #5d5d5d;
}
.content-section3 .content3{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section3 .content3 .button3 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section3{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}


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

}
.image-section4 img{
width:78%;
height:auto;
}
.content-section4 .title4{
text-transform: uppercase;
font-size: 24px;
}
.content-section4 .content4{
margin-top: 20px;
color: #5d5d5d;
}
.content-section4 .content4{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section4 .content4 .button4 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section4{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}


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

}
.image-section5 img{
width:78%;
height:auto;
}
.content-section5 .title5{
text-transform: uppercase;
font-size: 24px;
}
.content-section5 .content5{
margin-top: 20px;
color: #5d5d5d;
}
.content-section5 .content5{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section5 .content5 .button5 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section5{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}



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

}
.image-section6 img{
width:78%;
height:auto;
}
.content-section6 .title6{
text-transform: uppercase;
font-size: 24px;
}
.content-section6 .content6{
margin-top: 20px;
color: #5d5d5d;
}
.content-section6 .content6{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section6 .content6 .button6 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section6{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}




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

}
.image-section7 img{
width:78%;
height:auto;
}
.content-section7 .title7{
text-transform: uppercase;
font-size: 24px;
}
.content-section7 .content7{
margin-top: 20px;
color: #5d5d5d;
}
.content-section7 .content7{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section7 .content7 .button7 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section7{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}



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

}
.image-section8 img{
width:78%;
height:auto;
}
.content-section8 .title8{
text-transform: uppercase;
font-size: 24px;
}
.content-section8 .content8{
margin-top: 20px;
color: #5d5d5d;
}
.content-section8 .content8{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section8 .content8 .button8 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section8{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}


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

}
.image-section9 img{
width:78%;
height:auto;
}
.content-section9 .title9{
text-transform: uppercase;
font-size: 24px;
}
.content-section9 .content9{
margin-top: 20px;
color: #5d5d5d;
}
.content-section9 .content9{
margin-top: 10px;
font-family: sans-serif;
font-size: 17px;
line-height: 1.5;
}
.content-section9 .content9 .button9 a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
letter-spacing:1.5px;
}
.image-section9{
float:left;
width:40px;
position: absolute;
top: 40%;
left: 65%;
width: 400px;
}
.end{
    width:100%;
    min-height:20vh;
    background-color: #fff;
    align-content: center;
    position: absolute;
    top:1100%;
    left: 50%;
    transform: translate(-50%, -50%);
    }