* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
     :root {
        --negro: #000000b0;
        --masef: #ee413b;
        --rosaf: #fd0054;
        --blanco: #fbf9fa;
        --gris: #1b1d1f;
        --margen: 0px 20px;
        --sepBottom: 5px;
    }
    
    body {
        background-color: var(--negro);
        background-image: url("./img/inkman.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        color: var(--blanco);
        font-size: 15px;
    }
    
    button {
        background-color: var(--gris) !important;
        color: var(--rosaf) !important;
        font-size: 60px;
        padding: 3px 0px !important;
    }
    
    a {
        color: var(--masef);
    }
    
    a.nav-link {
        padding-right: 0 !important;
    }
    /* <!-- ////////////////////// CARTEL ////////////////////////////// --> */
    
    .cartel {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
    }
    
    .display-6 {
        font-size: 2em;
        font-weight: 400;
    }
    
    .navbar-expand-lg {
        padding: 0 !important;
    }

    /* <!-- //////////////////// NOSOTROS ////////////////////////////// --> */
    
    #nosotros {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
    }
    
    #nosotros img {
        width: 70%;
        padding: 20px 10px;
        -webkit-box-shadow: 5px 5px 15px 5px #000000;
        box-shadow: 5px 5px 15px 5px #000000;
        border-radius: 25px;
    }
    
    .texto {
        padding: 10px 50px;
        -webkit-box-shadow: 5px 5px 15px 5px #000000;
        box-shadow: 5px 5px 15px 5px #000000;
        border-radius: 25px;
    }
    /* <!-- //////////////////// TRABAJOS ////////////////////////////// --> */
    
    .trabajos,
    .trabajos1 {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
    }
    
    .trabajos img {
        width: 100%;
        height: 50vh;
        padding: 5px;
        border-radius: 30px;
        -webkit-box-shadow: 12px 14px 11px -5px rgba(253, 0, 84, 0.61);
        box-shadow: 12px 14px 11px -5px rgba(253, 0, 84, 0.61);
    }
    /* <!-- //////////////////// PREGUNTAS FRECUENTES ////////////////// --> */
    
    .preguntas {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
    }
    
    .preguntas button {
        color: var(--blanco) !important;
    }
    /* <!-- //////////////////////// COMENTARIOS ////////////////////////// --> */
    
    #comentarios {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
    }
    /* <!-- //////////////////////// CONTACTO ////////////////////////// --> */
    
    #contacto {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
    }
    
    .redes-s {
        padding: 10px 40px;
        font-size: 50px;
        border-radius: 20px;
    }
    
    .redes-s a i {
        border-radius: 20px;
        margin: 5px;
        box-shadow: 0px 10px 13px -7px #000000, 14px 21px 4px -6px rgba(84, 84, 84, 0.3);
    }
    
    .redes-s a i:hover {
        border-radius: 20px;
        box-shadow: 2px 3px 4px 3px rgba(28, 244, 255, 0.596);
    }
    /* <!-- //////////////////////////// FOOTER //////////////////////// --> */
    
    .pie {
        background-color: var(--negro);
        padding: var(--margen);
        margin-bottom: var(--sepBottom);
        text-align: center;
    }
    
    .pie a {
        color: var(--masef);
    }
    
    .pie a:hover {
        text-decoration: none;
    }
    /*//////////////////////////// CSS Whatsapp Chat  /////////////////////////////////*/
    
    #whatsapp-chat {
        position: fixed;
        background: #fff;
        width: 350px;
        border-radius: 10px;
        box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
        bottom: 90px;
        right: 30px;
        overflow: hidden;
        z-index: 99;
        animation-name: showchat;
        animation-duration: 1s;
        transform: scale(1);
    }
    
    .header-chat {
        background: #095e54;
        color: #fff;
        padding: 20px;
    }
    
    .header-chat h3 {
        margin: 0 0 10px;
    }
    
    .header-chat p {
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }
    
    .info-avatar {
        position: relative;
    }
    
    .info-avatar img {
        border-radius: 100%;
        width: 50px;
        float: left;
        margin: 0 10px 0 0;
    }
    
    .info-avatar:before {
        content: "\f232";
        z-index: 1;
        font-family: "Font Awesome 5 Brands";
        background: #23ab23;
        color: #fff;
        padding: 4px 5px;
        border-radius: 100%;
        position: absolute;
        top: 30px;
        left: 30px;
    }
    
    .info-chat span {
        display: block;
    }
    
    #get-label,
    span.chat-label {
        font-size: 12px;
        color: #888;
    }
    
    #get-nama,
    span.chat-nama {
        margin: 5px 0 0;
        font-size: 15px;
        font-weight: 700;
        color: #222;
    }
    
    #get-label,
    #get-nama {
        color: #fff;
    }
    
    span.my-number {
        display: none;
    }
    
    .blanter-msg {
        color: #444;
        padding: 20px;
        font-size: 12.5px;
        text-align: center;
        border-top: 1px solid #ddd;
    }
    
    textarea#chat-input {
        border: none;
        font-family: "Arial", sans-serif;
        width: 100%;
        height: 20px;
        outline: none;
        resize: none;
    }
    
    a#send-it {
        color: #555;
        width: 40px;
        margin: -5px 0 0 5px;
        font-weight: 700;
        padding: 8px;
        background: #eee;
        border-radius: 10px;
    }
    
    .first-msg {
        background: #f5f5f5;
        padding: 30px;
        text-align: center;
    }
    
    .first-msg span {
        background: #e2e2e2;
        color: #333;
        font-size: 14.2px;
        line-height: 1.7;
        border-radius: 10px;
        padding: 15px 20px;
        display: inline-block;
    }
    
    .start-chat .blanter-msg {
        display: flex;
    }
    
    #get-number {
        display: none;
    }
    
    a.close-chat {
        position: absolute;
        top: 5px;
        right: 15px;
        color: #fff;
        font-size: 30px;
    }
    
    @keyframes showhide {
        from {
            transform: scale(0.5);
            opacity: 0;
        }
    }
    
    @keyframes showchat {
        from {
            transform: scale(0);
            opacity: 0;
        }
    }
    
    @media screen and (max-width: 480px) {
        #whatsapp-chat {
            width: auto;
            left: 5%;
            right: 5%;
            font-size: 80%;
        }
    }
    
    .hide {
        display: none;
        animation-name: showhide;
        animation-duration: 1.5s;
        transform: scale(1);
        opacity: 1;
    }
    
    .show {
        display: block;
        animation-name: showhide;
        animation-duration: 1.5s;
        transform: scale(1);
        opacity: 1;
    }