html {
    scroll-behavior: smooth;
}

.service-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.service-buttons-with-modal {
    justify-content: center;
}

.service-icon-div {
    margin: 10px 20px;
    flex: 1;
}

.cursor-pointer {
    cursor: pointer !important;
}

.main-color {
    background-color: #5FD9FC;
}

.main-color-text {
    color: #5FD9FC;
}

.hidden-text-color {
    color: #acc2c8;
}

.header-img {
    background: url(images/header.png) no-repeat center;
    background-size: 264px;
    height: 140px;
}

.bug {
    background: url(images/1501376681.svg) no-repeat bottom;
    background-size: contain;
}

.desinfeccion {
    background: url(images/insecto.png) no-repeat bottom;
    background-size: contain;
}

.desratacion {
    background: url(images/rat.png) no-repeat bottom;
    background-size: contain;
}

.limpieza {
    background: url(images/tanqueAgua.png) no-repeat bottom;
    background-size: contain;
}

.bacteria {
    background: url(images/las-bacterias.png) no-repeat bottom;
    background-size: contain;
}

.pigeon {
    background: url(images/pigeon.png) no-repeat bottom;
    background-size: contain;
}

.mosquito {
    background: url(images/mosquito.png) no-repeat bottom;
    background-size: contain;
}

.wp-button {
    height: 70px;
    width: 70px;
    position: fixed;
    flex-wrap: wrap;
    bottom: 24px;
    right: 15px;
    background: url(images/whatsapp-round-color.svg) no-repeat center center;
}

.subtitle-color {
    color: #999c9f;
}

#hero-section {
    min-height: 92vh;
    padding: 10%;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
    background: url(images/fumigacion.png) no-repeat;
    background-size: contain;
    background-position-x: left;
    background-position-y: center;
    background-color: #f2f2f2;
}

.nav-link-a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #4fd9ff;
    font-weight: bold;
    font-size: 120%;
}

.container-fluid {
    background-color: #f2f2f2;
}
.navbar {
    background-color: #f2f2f2;

}

.section {
    min-height: 100vh;
}

#first {
    background-color: #fafafa;
    padding: 4% 10% 10% 10%;
    min-height: 60vh;
}

#seccond {
    background-color: #81C4D6;
    padding: 4% 10% 10% 10%;
    min-height: 60vh;
}

#third {
    background-color: #0096c0;
    display: flex;
    flex-direction: column;
    padding-top: 4%;
    min-height: 70vh;
}

.carousel-inner-custom {
    height: 100%;
    padding: 9%;
}

.carousel-inner-custom-description {
    font-size: large;
}

#forth {
    background-color: rgb(42, 224, 164);
    padding-top: 14%;
}

#fifth {
    background-color: rgb(23, 80, 61);
}

.modal-button {
    background: #f1faee !important;
}

#sixth {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-evenly;
    padding-top: 0%;
    flex-wrap: wrap;
}

#seventh {
    background-color: #f2f2f2;
    min-height: 80vh;
}

#contact-nav {
    padding-top: 4%;
}

a:hover {
    background-color: rgba(38, 156, 253, 0.096);
  }

.custom-modal {
    max-width: none !important;
    width: 50% !important;
}

@media (min-width:320px) {
    #hero-section {
        min-height: 92vh;
        padding: 10%;
        padding-top: 14%;
        display: flex;
        flex-direction: column;
        justify-content: right;
        align-items: flex-end;
        background-size: contain;
        background-position-x: left;
        background-position-y: center;
        background-color: #f2f2f2;
    }
}

@media (min-width:481px) {}

@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}

@media (min-width:961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}

@media only screen and (max-width: 500px) {
    #hero-section {
        background: none;
        background-color: #f2f2f2;
    }
    #hero-section {
        background: none;
        background-color: #f2f2f2;
    }
    #third {
        min-height: 108vh;
    }
    .custom-modal {
        max-width: none !important;
        width: inherit !important;
    }
}