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

:root{ 

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

    /* cores padrões */
    --color-primary: #A8CD41;
    --color-secondary: #3894D7;
    --color-tertiary: #1A1F35;
    --color-gradient: linear-gradient(90deg, rgba(0,149,217,1) 0%, rgba(167,205,57,1) 100%); 
    --color-text: var(--color-tertiary);
    --color-back: #FFF;
    --color-dark: #000;
    --color-light: #EFF3F5;

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

    /* top bar */
    --bar-back: transparent;
    --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: 10px;
    --top-logo-padding-responsive: 5px;
    --top-logo-width-responsive: 160px;
    --top-logo-height-responsive: 60px;
    --top-back: transparent;    
    --top-nav-back: transparent;
    --top-nav-color: var(--color-primary);    
    --top-nav-hover-back: transparent;
    --top-nav-hover-color: var(--color-secondary);
    --top-drop-back: var(--color-secondary);
    --top-drop-color: var(--color-tertiary);
    --top-drop-hover-back: rgba(0,0,0,0.05);
    --top-drop-hover-color: var(--color-tertiary);

    /* footer */
    --footer-back: var(--color-tertiary);
    --footer-color: #FFF;
    --footer-copy-back: var(--color-light);
    --footer-copy-color: var(--color-text);
    --footer-icon-color: var(--color-primary);
    --footer-icon-redes-color: var(--color-primary);
    --footer-icon-redes-color-hover: var(--color-primary);

    /* title */
    --title-color: var(--color-primary);
    --title-line-color: var(--color-secondary);
    --title-line-size: 150px;
    --title-post-color: var(--color-text);

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

}

/*
body { font-size: 14px; font-weight: 500; }
*/


header { position: absolute; z-index:999; width: 100%; }
header .navbar-nav a { font-size: 1.3em; font-style: italic; font-weight:700; text-transform: lowercase; }
header #top.navbar .container { background: rgba(26, 31, 53, 0.4); border-radius: 60px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
header #top.navbar .navbar-brand{ margin-top: -20px; margin-bottom: -25px; margin-left: 20px; }
header #menu { margin-top: -5px; margin-right: 10px; }

header .navbar-nav .dropdown-menu a{ color:var(--top-drop-color) !important; }

#video-background { position: relative; width: 100%; min-height: 100vh; }
#video-background .back-color { position: relative; width: 100%; min-height: 100vh; background: rgb(26,31,53); background: radial-gradient(circle, rgba(26,31,53,0.1) 10%, rgba(26,31,53,0.6) 100%); }
iframe { transition: opacity 500ms ease-in-out; transition-delay: 250ms; }

.header-foto { background: var(--color-tertiary); position: relative; width: 100%; height:550px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.header-foto img { height: 100%; -o-object-fit: cover; object-fit: cover; }

.titulo {  position: absolute; width: 100%; top: 350px; z-index:9; }
.titulo h2 { font-size:4em; font-style: italic; text-transform: lowercase; }

.title-gg { font-size: 3.5em; font-style: italic; }

.title { font-weight: 700; font-style: italic; }
.title strong { color: var(--color-secondary); }
.title-text { font-weight: 500; }

#box-welcome { font-size:1.1em; }
#box-welcome .title { font-size: 3em; }

@media (max-width:991.99px){ 
    .header-foto {  height:350px; } 
    .titulo {  top: 160px; } 
    .titulo h2 { font-size:1.8em; } 
    .title-gg, #box-welcome .title { font-size:2em; }
}

.slider-main  {  }
.slider-main .slider-item { overflow: hidden; }
.slider-main .slider-item img { animation: zoom-in-zoom-out 30s ease-out infinite; }


@keyframes zoom-in-zoom-out {
  0% { transform: scale(1, 1); }
  50% { transform: scale(1.1, 1.1); }
  100% { transform: scale(1, 1); }
}

.glass { height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.btn-primary { padding: 15px 50px; font-size: 1.1em; border-radius:30px; font-weight: 700; }
.bg-primary { background: var(--color-primary) !important; }
.bg-secondary { background: var(--color-secondary) !important; }
.bg-dark { background: var(--color-tertiary) !important; }
.bg-light { background: var(--color-light) !important; }
.bg-tertiary { background: var(--color-tertiary) !important; }
.bg-gradient { background: var(--color-gradient) !important; }



.box-chamada { font-size: 1.2em; line-height: 1.6em; font-weight:500; }
.box-chamada h2 { font-weight: 700; }
.box-chamada .btn { margin-top: 20px; }

.widget { box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.1); border-radius: 10px; }
.widget-header{background:transparent; color: var(--color-text); padding:15px 20px 0 20px; }
.widget-body { border: 0; }

#box-blog .bg-white { border-radius: 10px; margin-top: 10px; margin-bottom: 30px; box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#box-blog .bg-white:hover { box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.2);  }
#box-blog a small { color: var(--color-primary); }
#box-blog a h5{ line-height:1.15em }
#box-blog a p { /*color: rgba(255,255,255,0.6);*/ }
#box-blog a {  overflow: hidden; letter-spacing: 0.05em; border-radius: 10px; }
#box-blog a .img { overflow: hidden; }
#box-blog a img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#box-blog a:hover img { transform: scale(1.05); }

#box-contato .btn { background: var(--color-primary); color: var(--color-text); }

#box-service { display: grid; grid-template-columns: repeat(7, 1fr); gap:20px }
#box-service div { padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--color-text); font-size: 1.1em; font-weight: 700; line-height: 1em; font-style: italic; background: #FFF; border-radius: 10px; transition: 0.4s ease-in-out; -webkit-box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.1); -moz-box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.1); box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.1); }
#box-service div:hover { cursor: pointer; transform:translateY(-15px); box-shadow: 0px 5px 15px 0 rgba(0,0,0,0.2); }
#box-service div svg { width: 80px; margin-bottom: 5px; }

@media (max-width:767.99px){ 
    #box-service {overflow-x:auto; gap:15px; grid-template-columns: repeat(7, 140px); }
    #box-service::-webkit-scrollbar{display:none}
    #box-service div { padding: 10px; font-size: 0.9em; }
    header #top.navbar .container { border-radius: 0; }
    header #menu { margin-right: 0; padding-bottom: 10px; }
}

.accordion {
  width: 100%;
  /*max-width: 1080px;*/
  height: 550px;
  overflow: hidden;
  /*margin: 50px auto;*/
}
.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 14.285%;
  height: 550px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}
.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}
.accordion ul li div a {
  display: block;
  height: 550px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  transition: all 200ms ease;
  background: rgba(26, 31, 53, 0.5);
}
.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}
.accordion ul li div a h2 {
  text-overflow: clip;
  font-size: 24px;
  line-height: 1.2em;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 450px;
  color: #FFF;
}
.accordion ul li div a p {
  top: 450px;
  font-size: 13.5px;
}
.accordion ul:hover li, .accordion ul:focus-within li {
  width: 8%;
}
.accordion ul li:focus {
  outline: none;
}
.accordion ul:hover li:hover,
.accordion ul li:focus, .accordion ul:focus-within li:focus {
  width: 50%;
}
.accordion ul:hover li:hover a,
.accordion ul li:focus a, .accordion ul:focus-within li:focus a {
  background: rgba(26, 31, 53, 0.1);
}
.accordion ul:hover li:hover a *,
.accordion ul li:focus a *, .accordion ul:focus-within li:focus a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.accordion ul:hover li {
  width: 8% !important;
}
.accordion ul:hover li a * {
  opacity: 0 !important;
}
.accordion ul:hover li:hover {
  width: 50% !important;
}
.accordion ul:hover li:hover a {
  background: rgba(26, 31, 53, 0.1);
}
.accordion ul:hover li:hover a * {
  opacity: 1 !important;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

@media screen and (max-width: 600px) {

  .accordion {
    height: auto;
  }
  .accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
}