/* Fonts */
@font-face 
{
    font-family: "Roboto-Regular";
    src: url("../fonts/Roboto-Regular.ttf") format('truetype');
}


@font-face 
{
    font-family: "Roboto-Bold";
    src: url("../fonts/Roboto-Bold.ttf") format('truetype');
    font-display: swap;
}
   
    
/* Variables */

:root
{
    --dark-green: #1E443D;
    --soft-dark-green: #327263;
    --nav-hover: #256b5b;
    --soft-green: #82B6AA;
    --grey-green: #B6CEC8;
    --white-green: #D7E7D9;
    --text-color: #FFFFFF;
    --contact-color: #000000;
    --whats-color: #25d366;
    --bg-black: #2C2D32;
    --mg-top-nav: 77px;
    --pd-areas: 4rem;  /* Padding das areas serviços, contato */
}

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

html
{
    max-width: 1920px;
    margin: 0 auto;
    font-size: 20px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: var(--nav-hover);
}

body
{
    font-family: "Roboto-Regular", monospace, sans-serif !important;
}

li { list-style-type: none; }

a, 
span, 
h1, 
h2, 
h3, 
p 
{ color: var(--text-color) !important; }

h1,
h2
{
    font-family: "Roboto-Bold", monospace, sans-serif !important;
    font-size: 1.5rem !important;
}

h3 { font-size: 1.2rem !important; }

p 
{
    margin-bottom: 0 !important;
}

/* Espaçamento do texto de cada parágrafo */
.indent {
    text-indent: 45px;
}

/* Link hover e active - links, dropdown nav e hamburger */
a:hover,
.dropdown-item:hover,
nav button:hover 
{ 
    opacity: 0.9;
}

a:active,
.dropdown-item:active,
nav button:active,
button:active 
{ 
    opacity: 0.6;
}

.dropdown-item:hover
{
    background-color: var(--nav-hover) !important;
}

/* Remove o outiline dos botões */
button:focus
{
   outline: none !important;
   box-shadow: none;
}

.line
{
    display: block;
    width: 80px;
    border-bottom: 3px solid var(--white-green);
    border-radius: 25px;
}

.branding-link img
{
    width: 160px;
}

/* SECTION - nav */

nav
{
    font-family: "Roboto-Bold", monospace, sans-serif !important;
    background-color: var(--soft-dark-green) !important;
}


/* Hamburguer icon */
.navbar-toggler-icon
{
    background-image: url("../icons/toggle.svg") !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
}

.navbar-toggler-icon.opened
{
    background-image: url("../icons/close-line-icon.svg") !important;
}

nav .dropdown-menu
{
    background-color: var(--soft-dark-green);
}

/* SECTION - header */

header
{
    display: flex !important;
    align-items: end;
    justify-content: center;

    height: 800px;
    background: url("../img/background_header.webp") no-repeat fixed;
    background-position: center;
    background-size: cover;
}

header .title-sobre h2
{
    font-size: 2rem !important;
}

header .col-text
{
    display: flex;
    flex-direction: column;
    z-index: 10;
}

header .col-text p
{
    font-size: 1.2rem;
}

header .buttons
{
    margin: 20px 0;
}

header .buttons a
{
    padding: 10px 40px;
    white-space: nowrap;
    font-family: "Roboto-Bold", monospace, sans-serif !important;
    
}

header .buttons .btn-contact
{
    background-color: var(--whats-color);
}

header .buttons .btn-more
{
    background-color: var(--dark-green);
}


/* SECTION - main */

main
{
    display: flex !important;
    align-items: center;

    background: #256b5b; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #16161694, #65c7f748, #16161694); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(30, 68, 61, .7), rgba(30, 68, 61, .7)), 
                url("../img/texture-services.webp") no-repeat;
    background-size: cover;
    
    min-height: 80vh;
}

main .cards
{
    margin-top: 4rem;
}

main .card
{
    /* width: fit-content !important; */
    height: 260px;
    border: 1px solid #4c4c4c;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
}


/* Sombra Card servico */
main .card:hover
{
    border: 1px solid  var(--text-color);
    -webkit-box-shadow: 10px 10px 28px -8px rgba(0,0,0,0.63) !important;
    -moz-box-shadow: 10px 10px 28px -8px rgba(0,0,0,0.63) !important;
    box-shadow: 10px 10px 28px -8px rgba(0,0,0,0.63) !important;
}

main .card:active
{
    border: 2px solid var(--soft-dark-green);
    opacity: .9;    
    -webkit-box-shadow: 10px 10px 28px -8px rgba(0,0,0,0.8) !important;
    -moz-box-shadow: 10px 10px 28px -8px rgba(0,0,0,0.8) !important;
    box-shadow: 10px 10px 28px -8px rgba(0,0,0,0.8) !important;
}

main .card img
{
    width: 100%;
    height:100%;
}

main .card-body .icon
{
    width: 60px;
    height: 60px;
}

main .card-body
{
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: 'Roboto-Bold', monospace, sans-serif !important;
}

main .card-body .icon
{
    margin-bottom: 20px;
}


main .card-body .card-service
{
    white-space: nowrap;
}


#sobre,
#contato,
#criminal
{
    min-height: 100vh;
}



/* SECTION - sobre */


#sobre,
#criminal
{
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-color: var(--soft-dark-green);
}

#sobre .title-sobre,
#criminal .title-sobre
{
    font-family: "Roboto-Bold", monospace, sans-serif !important;
}

#sobre .col-img img,
#criminal .col-img img
{
    max-width: 300px;
}


/* SECTION - Contato */
#contato
{   
    display: flex !important;
    align-items: center;

    background: #256b5b; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #16161694, #65c7f748, #16161694); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(40, 40, 40, 0.5), rgba(40, 40, 40, 0.5)), 
                url("../img/black_map_pin.webp") no-repeat;
    background-size: cover;
    background-position: center;

    padding: var(--pd-areas) 0;
}

#contato .row
{
    margin-top: var(--pd-areas);
}

#contato p
{
    line-height: 1.6;
}

#contato .col-address
{
    display: flex;
    align-items: center;
}

#contato .card-address
{
    max-width: 475px;
    border: 2px solid var(--dark-green);
}

#contato input:focus
{
   outline: none !important;
   box-shadow: none;
}

/* Mensagem em baixo do input */
#contato .form-text
{
    color: #898989;
    font-size: 0.75rem;
}


#contato .card .card-body span
{
    color: var(--contact-color) !important;
    font-weight: bold;
}

#contato .card .card-link,
#contato .card-form button
{
    padding: 10px 40px;
    background-color: var(--soft-dark-green);
}

/* SECTION - contato > form */

.card-form  h3 
{ 
    margin-bottom: 1rem;
}

#contato .card-form
{
    max-width: 386px;
    background-color: var(--bg-black);
}

#contato #btnSend
{
    cursor: pointer;
    padding: 10px 50px;
    border: none;
    color: var(--text-color);
    font-family: "Roboto-Bold", monospace, sans-serif !important;
    border-radius: 0;
}

#contato #btnSend:focus,
#contato #btnSend:active 
{
    outline: none !important;
    box-shadow: none;
}

#contato #btnSend:hover
{
    background-color: var(--nav-hover) !important;
    color: var(--white-green) !important; 
}


/* Efeito ao dar o submit (utilizando no JS) */
#contato #btnSend.send-message
{
    background-image: url(../img/loading.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #656c6b !important;
    cursor: default;
    min-width: 163px;
    min-height: 50px;
}


/* SECTION - Footer */
footer
{
    background-color: var(--dark-green);
    padding: .5rem 0;
}

footer .row small
{
    color: var(--grey-green) !important;
}

footer .social-medias
{
    display: flex;
    align-items: center;
    margin: 0;
}



#email-icon
{
    height: 15px !important;
}

/* Define o tamanho de todos os ícones da página */

/* footer .social-medias img */
.icon
{
    width: 18px;
    height: 18px;
}

footer .social-medias li:not(:first-child)
{
    margin-left: 15px;
}

#btn-whatsapp img
{
    position:fixed;
    width:45px;
    height:45px;
    bottom:75px;
    right:25px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    z-index:999999;
}



/**************
** /criminal > Section 
*/

#criminal .title-sobre
{
    display: flex;
    align-items: flex-end;
}

#criminal .title-sobre h2
{
    margin-bottom: 0;
}


#criminal .title-sobre .service-icon
{
    max-width: 70px;
    width: 100%;
    margin-left: 8px;
}

#criminal .title-sobre .service-icon .icon
{
    width: 70px;
    height: 70px;
}

#criminal .list li
{
    list-style-type: circle !important;
    color: var(--text-color);
    margin-left: 30px;
}

/******
 * Media Query
*/

@media (max-width: 991px) {
    
    p,
    #contato a, 
    .form-group input, 
    .form-group textarea,
    .form-group button,
    .card-service, 
    .card-contacts li,
    .card-contacts span,
    footer
    {
        font-size: 0.85rem !important;
    }

    nav
    {
        background-color: var(--dark-green) !important;
    }

    
    header
    {
        height: 600px;
    }

    .card-form  h3 
    { 
        font-size: 0.95rem !important; 
    }

    main,
    #contato
    {
        padding: var(--pd-areas) 0;
    }

    main .cards
    {
        padding: 0 1rem;
    }

    main .cards div:nth-child(3),
    main .cards div:nth-child(4)
    {
        margin-top: 30px;
    }

    main .card-body .icon
    {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 767px) 
{
    header
    {
        align-items: center;
    }

    header .buttons a
    {
        font-size: 0.7rem;
        padding: 10px 25px;
    }

    #sobre,
    #criminal
    {
        padding-top: 2rem;
    }
}

@media (max-width: 575px) 
{

    #contato .col-address
    {
        padding: 0 2rem;
    }

    footer .row > div
    {
        display: flex;
        align-items: center !important;
        justify-content: center !important;
    }

    footer .navbar-brand
    {
        margin: 0;
        padding: 0;
    }

    footer .row > :nth-child(2)
    {
        padding: .3rem 0;
    }

    footer .col-logo { order: 1; }
    footer .col-copyright { order: 3; }
    footer .col-social 
    {
        order: 2; 
    }
}

@media (max-width: 379px) 
{
    header .buttons a
    {
        font-size: 0.6rem;
        padding: 10px 15px;
    }

    header .buttons .btn-more
    {
        margin-left: 1.1rem !important;
    }


    /* Distância entre os cards da main */
    main .cards > div
    {
        padding: 2px;
    }

    main .cards
    {
        padding: 0;
    }

    main .card-body .icon
    {
        width: 45px;
        height: 45px;
    }

    main .card-body .card-service
    {
        font-size: 0.65rem !important;
    }

    #contato .card-body a
    {
        font-size: 0.7rem !important;
        padding: 10px 20px !important;
    }

    #sobre .col-img img,
    #criminal .col-img img
    {
        max-width: 100%;
    }
}