* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body {
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');
    font-family: 'Roboto', sans-serif;
    background-color: #032f47;
    color: white;
}

header {
    display: flex;
    position: sticky;
    color: white;
    grid-gap: 20%;
    margin-bottom: 2%;
}

.Logo img {
    margin: 7% 50% 2% 10%;
}

ul {
    display: flex;
    margin-top: 4%;
    font-size: large;
    grid-gap: 3%;
    width: 80%;
}

ul li {
    transition: all 0.5s;
}

ul li:hover {
    text-decoration: underline;
    font-size: x-large;
    color: #119eda;
}

.slider {
    overflow: hidden;
    margin: 1% 1% 7% 5%;
    border-radius: 25px;
    width: 58%;
    transform: translateY(-2%);
}

.imgs {
    display: flex;
    transition: all 0.5s ease-in-out;
}

.imgs img {
    height: 745px;
    width: 100%;
}

.arrows {
    display: flex;
    position: absolute;
    grid-gap: 1280%;
}

.arrows img {
    width: 40px;
    z-index: 100;
    margin-top: 435%;
}

button {
    font-size: large;
    height: 40px;
    width: 110%;
    border-radius: 15px;
    transform: translateY(-25%);
}

button:hover {
    background-color:#171f38;
    border: 2px solid white;
    color: white;
}

.main {
    display: flex;
}

.second {
    text-align: center;
    width: 30%;
}

.descriptive {
    position: absolute;
    top: 4%;
    text-align: center;
    color: white;
    background-color: #0a39537d;
    border-radius: 15px;
    left: 10%;
    right: 10%;
}

.prom {
    background-color: #171f38;
}

.firsT {
    text-align: center;
    margin-bottom: 5%;
    padding-top: 2%;
}

#theOne {
    text-align: center;
    color: #15a0db;
}

.mail,
.calendar,
.messages,
.visios,
.cloud,
.cloudNew1,
.cloudNew2,
.aviS {
    display: flex;
    margin-bottom: 10%;
}

.mailOne,
.calendarOne,
.messagesOne,
.visiosOne,
.cloudOne,
.cloudNew1One,
.cloudNew2One {
    width: 30%;
    margin: 8%;
}

.mailOne h3,
.calendarOne h3,
.messagesOne h3,
.visiosOne h3 {
    letter-spacing: 1px;
    margin-top: 2%;
}

.prom img {
    width: 82%;
    height: 400px;
}

.flex {
    display: flex;
}

.aviS {
    margin: 0% 15%;
}

.avis {
    transform: translateY(-25%);
}

.avisTwo {
    margin-top: 8%;;
    width: 750px;
    margin-left: 8%;
}

footer {
    background-color: #171f38;
    width: 100%;
}

.input {
    display: flex;
    margin-left: 25%;
    margin-bottom: 5%;
}

.input button {
    width: 25%;
    height: 50px;
    margin-left: 5%;
    transform: translateY(0%);
}

input {
    width: 60%;
    border-radius: 15px;
    font-size: large;
}

.newsletter {
    border: 2px solid white;
    margin: 0 25% 5%;
    padding: 1%;
}

.final {
    text-align: center;
    margin-bottom: 2%;
}

a{
    color: white;
    text-decoration: none;
    margin-left: 2%;
}

.final a:hover {
    text-decoration: underline;
}

.reseaux {
    text-align: center;
    margin-bottom: 2%;
}

.reseaux img {
    width: 3%;
}

.prix {
    display: flex;
    margin: 2%;
}

.prix ul {
    display: block;
}

.free,
.professionnel,
.business,
.entreprise {
    width: 20%;
    padding: 2%;
    border: 2px solid rgb(16, 132, 198);
    border-radius: 15px;
    margin: 2% 3%;
}

.free p,
.professionnel p,
.business p,
.entreprise p {
    margin-top: 5%;
}

.prix button {
    margin-top: 15%;
    width: 75%;
    height: 50px;
    background-color: #04acf4;
}

.pkKo p,
.pkKo h2 {
    margin-bottom: 2%;
}

.pk {
    width: 50%;
    margin: 0% 25%;
}

.right input {
    width: 480px;
    height: 50px;
}

.right select {
    width: 480px;
    height: 50px;
}

.res {
    display: flex;
}

.left {
    margin: 2% 0 5% 15%;

}

.right {
    margin: 2% 10% 5% 0;
}

.flex2 {
    display: flex;
    
}