@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap);

:root{ 

    font-family: 'Roboto', sans-serif;

    /* cores padrões */
    --color-primary: #21ABA0; /*#25C1B4;*/
    --color-secondary: #1D9A90;
    --color-tertiary: #1D9A90;
    --color-text: #71859D; /*#8798AD;*/
    --color-back: var(--color-light);/*#FBFDFD;*/
    --color-dark: #2E384D;
    --color-light: #F1F5F8;/*#EFF3F5;*/

    /* botões */
    --btn-back: var(--color-primary);
    --btn-back-hover: var(--color-secondary);
    --btn-color: #FFF;
    --btn-color-hover: var(--btn-color);

    /* top bar */
    --bar-back: var(--color-secondary);
    --bar-color: rgba(255,255,255,0.8);
    --bar-icon-color: var(--color-primary);
    --bar-icon-redes-color: var(--color-primary);
    --bar-icon-redes-color-hover: var(--color-primary);

    /* top */
    --top-logo-padding: 5px;
    --top-logo-padding-responsive: 5px;
    --top-logo-width-responsive: 160px;
    --top-logo-height-responsive: 60px;
    --top-back: var(--color-primary);
    --top-nav-back: transparent;
    --top-nav-color: #FFF;    
    --top-nav-hover-back: rgba(255,255,255,0.1);
    --top-nav-hover-color: #FFF;
    --top-drop-back: var(--color-back);
    --top-drop-color: var(--color-text);
    --top-drop-hover-back: transparent;
    --top-drop-hover-color: var(--color-primary);

    /* footer */
    --footer-back: var(--color-primary);
    --footer-color: #FFF;
    --footer-copy-back: rgba(255,255,255,0.1);
    --footer-copy-color: rgba(255,255,255,0.7);
    --footer-icon-color: rgba(255,255,255,0.6);
    --footer-icon-redes-color: rgba(255,255,255,0.6);
    --footer-icon-redes-color-hover: rgba(255,255,255,0.6);

    /* title */
    --title-color: var(--color-dark);
    --title-line-color: var(--color-secondary);
    --title-line-size: 150px;
    --title-post-color: #333;

    --title-internal-color: var(--color-primary);
    --title-internal-back: var(--color-dark);

}

body { font-size: 15px; font-weight: 400; }
header { position: relative; width: 100%; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15); z-index: 999; }
header .navbar-brand img { max-height: 70px; } 
header .navbar-nav a { font-size: 1em; font-weight:400; padding:10px 10px; font-family: 'Poppins', sans-serif;  text-transform: none; }
header .navbar-nav .dropdown-menu a { font-size: 0.9em }

.btn-primary { padding: 15px 50px; font-size: 1.1em; border-radius:8px; font-weight: 700; }
.bg-dark { background: var(--color-dark) !important; color: #FFF; }
.bg-dark .title { color: #FFF; } 
.text-primary { color: var(--color-primary) !important; }

.title { font-size: 2.8rem !important; font-family: 'Poppins', sans-serif; font-weight: 700; }
.title span { display: block; font-weight: 600; font-size: 1.4rem; color: var(--color-primary); margin-bottom: 2px; }
.title-text { font-weight: 500; line-height: 1.6em; }

.titulo h2{ font-style:normal; font-size:2.6em; font-weight: 600; padding:60px 0; font-family: 'Poppins', sans-serif;  }

.post-text{font-size:1.1em;line-height:1.7em;}
.post-text h5 { font-size: 1.2em; font-weight: 600; color: var(--title-color); margin-bottom: 10px; font-family: 'Poppins', sans-serif; }
.post-text h4 { font-size: 2em; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; font-family: 'Poppins', sans-serif; }
.post-text ul { padding-left: 20px; }

.widget-header{background:var(--color-secondary); }

.banner-center { background-size: cover; background-repeat: no-repeat; background-position: 50% 0; background-attachment: fixed; }
.banner-center .overlay { background: rgba(46,56,77,0.9); }
.banner-center { font-size: 2em; font-weight: 300; color: #FFF; line-height: 1.4em; }
.banner-center strong { font-weight: 500; }

#box-service { margin: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap:40px; }
#box-service a { padding: 50px 30px; display: flex; flex-direction: column; /*align-items: center; text-align: center;*/ border: 1px solid rgba(33,171,160,0.5); color: var(--color-text); font-size: 1.1em; font-weight: 500; line-height: 1.4em; background: #FFF; border-radius: 10px; transition: 0.4s ease-in-out; -webkit-box-shadow: 0px 5px 20px 0 rgba(0,0,0,0.08); -moz-box-shadow: 0px 5px 20px 0 rgba(0,0,0,0.08); box-shadow: 0px 5px 20px 0 rgba(0,0,0,0.08); }
#box-service a img { width: 100px; background: #D3F3F0; border-radius: 100%; margin-bottom: 20px; }
#box-service a h2 { font-size: 1.4em; margin: 20px 0; font-weight: 800; font-family: 'Poppins', sans-serif; color: var(--title-color); transition: 0.4s ease-in-out; }
#box-service a p { padding: 0; margin: 0; transition:0s ease-in-out; } 
#box-service a span { color: var(--color-primary); font-weight: 700; margin-top: 20px; transition: 0.4s ease-in-out; } 
#box-service a span i { transition: transform 0.5s ease-in-out 0s; }
#box-service a:hover { background: var(--color-primary); color: #FFF; cursor: pointer; transform:translateY(-10px); box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.2); }
#box-service a:hover h2, #box-service a:hover span { color: #FFF; }
#box-service a:hover span i { transform:translateX(10px); }

@media (max-width:767.99px){ 
    #box-service {overflow-x:auto; gap:15px; grid-template-columns: repeat(3, 70%); padding: 15px 15px 30px 15px; margin: 0 -15px; }
    #box-service::-webkit-scrollbar{display:none}
    #box-service a { padding: 30px 20px; font-size: 0.9em; }
    .banner-center { font-size: 1.3em; }
    .title { font-size: 2rem !important; }
    .post-text.text-justify{text-align:left !important;}
}