body {
    background-color: #c7d1d5;
    margin: 0;
    padding: 0;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    min-width: 390px;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

#logo_licata_alarme {

}

#logo_home {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}


.top-div {
    height: 150px;
    text-align: center;
    background-color: #709CA7;
}

.top-div a {
    text-decoration: none;
    color: #cf2525;
}

.title-nos-services {
    text-align: center;
}

.bandeau-contact {
    display: flex;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #a5a0a0;
}

.nom-entreprise a {
    font-family: "Poppins", cursive;
    font-weight: bold;
    color: #cf2525;
    font-style: normal;
    font-size: xx-large;
    text-transform: uppercase;
    text-decoration: none;
}

.separator-tel-and-email {
    width: 20px;
}

#menu {
    display: none;
    background-color: #7A90A4;
    position: absolute;
    top: 10px;
}

.menu-list {
    list-style: none;
}

.menu-item a {
    text-decoration: none;
    color: #344D59;
    padding: 10px;
}

.top-section {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
}

.accueil-paragraphe {
    text-align: center;
}

.bouton-devis {
    text-align: center;
}

#services {
    margin-top: 40px;
}

.service {
    text-align: center;
    background-color: #fff;
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px gray;
    width: 100%;
}

.title-service {
    font-weight: bold;
    text-align: center;
}

.detail-service {
    text-align: center;
    padding-top: 20px;
}

#icon-menu-container {
    position: relative;
    z-index: 10000;
}

#checkbox {
    /* checkbox is hidden*/
    display: none
}

#icon-container {
    cursor: pointer;
    display: block;
    height: 30px;
    width: 30px;
}

/* common styles*/
.icon-menu, .icon-menu::before, .icon-menu::after, .icon-close, .icon-close::before, .icon-close::after {
    content: '';
    display: block;
    height: 2.7px;
    position: absolute;
    width: 28px;
    border-radius: 20px;
    transition: top ease 0.3s, transform ease 0.3s 0.3s, background 0.3s ease 0.3s;
    background: #344D59;
}


/* bottom line of hamburger */
.icon-menu::before {
    top: -7px;
    transition: background ease 0.3s, top ease 0.3s 0.3s, transform ease 0.3s;
}

/* top line of hamburger */
.icon-menu::after {
    top: 7px;
    transition: background ease 0.3s, top ease 0.3s 0.3s, transform ease 0.3s;
}

.icon-close {
    background: transparent;
    z-index: 1000;
}

/* line one of close icon */
.icon-close::before {
    transform: rotate(45deg);
    top: 0;
    background: #344D59;
}

/* line two of close icon */
.icon-close::after {
    transform: rotate(-45deg);
    top: 0;
    background: #344D59;
}

#icon {
    top: 20px;
    transition: background ease 0.3s, top ease 0.3s 0.3s, transform ease 0.3s;
}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
}

.footer-link-contactez-nous {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.footer-contact {
    margin-top: 40px;
}

footer {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    color: #fff;
    background-color: #242424;
    height: 200px;
}

footer a {
    color: #fff;
}

.installateur-agree {
    font-style: italic;
    margin-top: 20px;
}

h1, h2, h3 {
    color: #344D59;
}

@media screen and (min-width: 500px) {
    .services {
        display: flex;
        justify-content: space-between;
    }

    .service {
        display: inline-block;
        width: 45%;
        height: 360px;
        margin-left: 20px;
        vertical-align: top;
    }

    .h2-title-service {
        font-size: large;
    }

    .bandeau-contact {
        display: block;
        text-align: center;
    }
}

@media screen and (min-width: 992px) {
    .container {
        margin: auto;
        width: 1250px;
    }

    .accueil-paragraphe {
        text-align: left;
    }

    .services {
        display: flex;
        justify-content: space-between;
    }

    .service {
        display: inline-block;
        height: 406px;
        width: 30%;
        margin-left: 20px;
        vertical-align: top;
    }

    .title-service {
        height: 90px;
        margin-top: 10px;
    }

    .h2-title-service {
        font-size: x-large;
    }

    .top-div a {
        margin-left: 20px;
    }
}