/*

TemplateMo 548 Training Studio

https://templatemo.com/tm-548-training-studio

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #7a7a7a;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #ed563b;
  color: #fff;
}

::-moz-selection {
  background: #ed563b;
  color: #fff;
}

/* ===== MOBILE FIX: Header / Logo ===== */
@media (max-width: 767px) {

  /* Logo (imagem + texto) alinhados */
  .header-area .main-nav .logo{
    display: flex !important;
    align-items: center;
    gap: 8px;
    line-height: 80px;     /* acompanha a altura do header */
    max-width: 80vw;
    white-space: nowrap;   /* não quebra */
  }

  .header-area .main-nav .logo img{
    height: 46px !important; /* um pouco maior */
    width: auto;
  }

  /* Texto “Super Auto Diesel” pequeno (não some) */
  .header-area .main-nav .logo{
    font-size: 13px !important;
    font-weight: 700;
    color: #111 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  .header-area .main-nav .logo em{
    font-style: normal;
    color: #ed563b !important; /* Diesel em laranja */
    font-weight: 900;
  }

  /* Hamburger alinhado */
  .header-area .main-nav .menu-trigger{
    display: block !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: 16px;
  }

  /* Evita o banner “subir” demais por causa do header sticky */
  .main-banner{
    padding-top: 80px;
  }
}



  /* Evita o banner “subir” demais por causa do header sticky */
  .main-banner {
    padding-top: 80px; /* ajuste fino se precisar */
  }
}


/* ===== MOBILE FIX: Banner title ===== */
@media (max-width: 767px) {
  .header-text .caption h6 {
    font-size: 13px;
    letter-spacing: .5px;
  }

  .header-text .caption .hero-title {
    font-size: 34px;     /* controla o tamanho */
    line-height: 1.05;
    padding: 0 12px;     /* respiro lateral */
    word-break: normal;
    overflow-wrap: normal;
  }

  .header-text .caption .hero-title em {
    display: inline-block;
    font-size: 34px;     /* garante que não estoure */
  }

  .header-text .caption .hero-amp {
    font-size: 26px;
    font-weight: 700;
    display: inline-block;
    margin: 4px 0;
  }

  .main-button a {
    padding: 12px 18px;
    font-size: 14px;
  }
}


@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  text-align: center;
  margin-top: 140px;
  margin-bottom: 80px;

}

.section-heading h2 {
  font-size: 28px;
  font-weight: 800;
  color: #232d39;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 em {
  font-style: normal;
  color: #ed563b;
}

.section-heading img {
  margin: 20px auto;
}

.dark-bg h2 {
  color: #fff;
}

.dark-bg p {
  color: #fff;
}

.main-button a {
  display: inline-block;
  font-size: 15px;
  padding: 12px 20px;
  background-color: #ed563b;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #f9735b;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background: rgba(250,250,250,0.99) !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #232d39!important;
}

.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
}

.background-header .main-nav .nav li:last-child a:hover {
  color: #fff!important;
}

.background-header .main-nav .nav li:hover a {
  color: #ed563b!important;
}

.background-header .nav li a.active {
  color: #ed563b!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background: rgba(250,250,250,0.1);
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #ed563b;
  font-weight: 900;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li:last-child a {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ed563b;
  color: #fff;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: all .3s;
  height: auto;
  line-height: 20px;
}

.header-area .main-nav .nav li:last-child a:hover {
  background-color: #f9735b;
  opacity: 1;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #ed563b!important;
  opacity: 1;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #ed563b!important;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.main-banner.banner-bg{
  position: relative;
  min-height: 100vh;               /* mantém o “tamanho” do banner */
  background: url("images/caminhao.jpg") center center / cover no-repeat;
}

/* deixa icon + texto na mesma linha e centraliza verticalmente */
.feature-item.feature-inline{
  display: flex;
  align-items: center;      /* centro na altura do ícone */
  gap: 14px;                /* espaço entre ícone e texto */
}

/* não deixa o texto "cair" pra baixo por margin default */
.feature-item.feature-inline .right-content h4{
  margin: 0;
  line-height: 1;
  white-space: nowrap;      /* NÃO quebra "Trem De Força" */
}

/* controla tamanho do ícone */
.feature-item.feature-inline .left-icon img{
  width: 42px;              /* ajuste como quiser */
  height: auto;
  display: block;
}

/* garante que o conteúdo da direita não estreite e force quebra */
.feature-item.feature-inline .right-content{
  min-width: 0;
}




.left-icon img {
    width: 50px;         /* ajuste conforme seu layout */
    height: auto;
}

.right-content h4 {
    margin: 0;           /* remove espaço extra */
}


/* se tiver overlay escuro */
.main-banner.banner-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);     /* ajuste a força do escuro */
  z-index:0;
}

/* garante que textos/menus do banner fiquem por cima do overlay */
.main-banner.banner-bg > *{
  position: relative;
  z-index:1;
}

.main-banner.banner-bg{
  position: relative;
  min-height: 100vh;
  background: url("../images/caminhao.jpg") center center / cover no-repeat;
}

/* overlay escuro igual o template */
.main-banner.banner-bg .video-overlay{
  position: absolute;
  background-color: rgba(35,45,57,0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}



.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

/* Tira a indentação padrão da lista e centraliza o bloco */
#features .features-items{
  list-style: none;
  padding: 0;
  margin: 0 auto;          /* centraliza o UL dentro da coluna */
  width: fit-content;      /* o UL fica do tamanho do conteúdo */
}

/* Centraliza o UL dentro de cada coluna */
#features .col-lg-6{
  display: flex;
  justify-content: center;
}

.schedule-filter li {
    pointer-events: none; /* desativa clique */
    cursor: default;
}


/* Item: ícone + texto lado a lado e alinhados no meio */
#features .feature-item.feature-inline{
  display: flex;
  align-items: center;     /* central vertical com a imagem */
  gap: 14px;               /* espaçamento entre ícone e texto */
  margin-bottom: 22px;
}

/* Ícone com largura fixa pra alinhar todos iguais */
#features .feature-item.feature-inline .left-icon{
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#features .feature-item.feature-inline .left-icon img{
  max-width: 32px;
  height: auto;
  display: block;
}

/* Texto sem quebrar e sem margem */
#features .feature-item.feature-inline .right-content h4{
  margin: 0;
  white-space: nowrap;     /* não quebra “Trem De Força” */
}


.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #ed563b;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ed563b!important;
    opacity: 1;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li:last-child {
    width: 100%;
    background-color: #ed563b;
    color: #fff;
  }
  .header-area .main-nav .nav li:last-child a {
    background-color: #ed563b!important;
  }
  .header-area .main-nav .nav li:last-child a:hover,
  .header-area .main-nav .nav li:last-child:hover a {
    background-color: #ed563b!important;
    color: #fff!important;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #232d39 !important;
  }
  .header-area .main-nav .nav li:last-child a {
    color: #fff!important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ed563b!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(35,45,57,0.8);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
}

.main-banner .caption {
  text-align: center;
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 84px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #ed563b;
  font-weight: 900;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  margin-bottom: 80px;
}

.feature-item {
  display: inline-block;
  margin-bottom: 60px;
}

.feature-item .left-icon img {
  float: left;
  margin-right: 30px;
}

.feature-item .right-content {
  display: inline;
}

.feature-item .right-content h4 {
  margin-top: 0px;
  margin-bottom:  7px;
  letter-spacing: 0.25px;
  color: #232d39;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}

.feature-item .right-content a.text-button {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  color: #ed563b;
  font-weight: 500;
}

/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#call-to-action {
  padding: 120px 0px;
  background-image: url(../images/cta-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.cta-content h2 em {
  font-style: normal;
  color: #ed563b;
}

.cta-content p {
  font-size: 16px;
  color: #fff;
  margin: 15px 0px 25px 0px;
}



/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
  margin-bottom: 140px;
}

#tabs ul {
  margin: 0;
  padding: 0;
}
#tabs ul li {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
#tabs ul li:last-child {
  margin-bottom: 0px;
}
#tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  padding: 30px 30px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 5px;
  font-size: 19px;
  color: #232d39;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: all 0.3s;
}
#tabs .main-rounded-button a {
  text-align: center;
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #ed563b;
}
#tabs .main-rounded-button a:hover {
  background-color: #f9735b;
}
#tabs ul li a img {
  max-width: 100%;
  margin-right: 20px;
}
#tabs ul .ui-tabs-active span {
  background: #faf5b2;
  border: #faf5b2;
  line-height: 90px;
  border-bottom: none;
}
#tabs ul .ui-tabs-active a {
  color: #ed563b;
}
#tabs ul .ui-tabs-active span {
  color: #1e1e1e;
}
.tabs-content {
  margin-left: 30px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
.tabs-content img {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.tabs-content h4 {
  font-size: 23px;
  font-weight: 700;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 28px;
}


/* 
---------------------------------------------
schedule
--------------------------------------------- 
*/

#schedule {
  padding: 0px 0px 140px 0px;
  background-image: url(../images/schedule-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#schedule table {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#schedule table tbody {
  border-top: 1px solid #fff; 
}

#schedule table tbody tr {
  border-bottom: 1px solid #fff;
}

#schedule table tbody tr td {
  border-right: 1px solid #fff;
  height: 100px;
}

#schedule table tr td {
  color: #fff;
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
    opacity: 0;
    transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
    opacity: 1;
    transition: all 0.5s;
}

#schedule .filters {
  margin-bottom: 40px;
}
#schedule .filters ul {
  padding: 0;
  text-align: center;
}
#schedule .filters ul li {
  list-style: none;
  display: inline;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#schedule .filters ul li:after {
  content: "/";
  margin-left: 10px;
  color: #fff;
}
#schedule .filters ul li:last-child {
  margin-right: 0px;
}
#schedule .filters ul li:last-child::after {
  display: none;
}
#schedule .filters ul li.active,
#schedule .filters ul li:hover {
  color: #ed563b;
}
#schedule .filters-content {
  margin-top: 50px;
}
#schedule .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
#schedule .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}


/* 
---------------------------------------------
trainers
--------------------------------------------- 
*/

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 40px;
}

#trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #ed563b;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

#trainers .trainer-item p {
  margin-bottom: 20px;
}

#trainers .trainer-item ul.social-icons li {
  display: inline-block;
  margin-right: 12px;
}

#trainers .trainer-item ul.social-icons li:last-child {
  margin-right: 0px;
}

#trainers .trainer-item ul.social-icons li a {
  color: #232d39;
  transition: all .3s;
}

#trainers .trainer-item ul.social-icons li a:hover {
  color: #ed563b;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

#contact-us {
  margin-top: 140px;
}

#contact-us .container-fluid .col-lg-6 {
  padding: 0px;
}

#contact-us .contact-form {
  padding: 80px;
  background-image: url(../images/contact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-us .contact-form #contact {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 13px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.contact-form button {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ed563b;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  margin-top: -8px;
}

.contact-form button:hover {
  background-color: #f9735b;
}




/* 
---------------------------------------------
footer
--------------------------------------------- 
*/
footer {
  text-align: center;
  padding: 30px 0px;
}

footer p {
  color: #232d39;
  font-size: 13px;
}

footer p a {
  cursor: pointer;
  color: #ed563b;
}

footer p a:hover {
  color: #ed563b;
}


/* ===== Header / Logo / Menu no mobile ===== */
.header-area .main-nav .logo.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.header-area .main-nav .logo.brand img{
  height:70px;
  width:auto;
}

/* MOBILE: some o texto, fica só o ícone e mantém o menu */
@media (max-width: 767px){
  .header-area .main-nav .logo.brand img{
    height:44px;
  }
  .header-area .main-nav .logo.brand .brand-text{
    display:none !important; /* tira “Super Auto Diesel” inteiro */
  }

  /* garante espaço pro botão do menu (hamburger) */
  .header-area .main-nav{
    position:relative;
  }
  .header-area .main-nav .menu-trigger{
    display:block !important;
    position:absolute;
    right:15px;
    top:18px;
    z-index:9999;
  }
}

/* MOBILE */
@media (max-width: 767px){

  /* altura limpa do header */
  .header-area.header-sticky{
    padding: 8px 0 !important;
  }

  /* LOGO */
  .header-area .main-nav .logo.brand{
    display: flex;
    align-items: center;
  }

  .header-area .main-nav .logo.brand img{
    height: 50px;   /* AQUI aumenta a logo (ajuste fino: 48–54) */
    width: auto;
  }

  /* HAMBURGER */
  .header-area .main-nav .menu-trigger{
    top: 50%;
    transform: translateY(-50%); /* alinha verticalmente com a logo */
    right: 16px;
  }
}

@media (max-width: 767px){

  /* header compacto */
  .header-area.header-sticky{
    padding: 8px 0 !important;
  }

  /* logo container */
  .header-area .main-nav .logo.brand{
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* ícone da logo */
  .header-area .main-nav .logo.brand img{
    height: 46px; /* tamanho equilibrado */
    width: auto;
  }

  /* TEXTO Super Auto Diesel (pequeno) */
  .header-area .main-nav .logo.brand .brand-text{
    display: inline-block !important;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
  }

  .header-area .main-nav .logo.brand .brand-text em{
    font-style: normal;
    color: #f04b2a; /* cor diesel */
    font-weight: 700;
  }

  /* hamburger alinhado */
  .header-area .main-nav .menu-trigger{
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
  }
}


/* ===== Desktop: mais respiro no header ===== */
@media (min-width: 992px){

  /* header um pouco mais alto */
  .header-area.header-sticky{
    padding: 18px 0;
  }

  /* logo + texto */
  .header-area .main-nav .logo.brand{
    gap: 14px;              /* AQUI afasta logo do texto */
  }

  .header-area .main-nav .logo.brand img{
    height: 60px;           /* logo confortável no desktop */
  }

  .header-area .main-nav .logo.brand .brand-text{
    font-size: 22px;
    letter-spacing: .5px;
  }

  /* afasta o menu do logo */
  .header-area .main-nav .nav{
    margin-left: 40px;      /* AQUI cria respiro visual */
  }
}



/* ===== DESKTOP FIX: header alinhado sem quebrar ===== */
@media (min-width: 992px){

  /* header com respiro */
  .header-area.header-sticky{
    padding: 16px 0;
  }

  /* logo */
  .header-area .main-nav .logo.brand{
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }

  .header-area .main-nav .logo.brand img{
    height: 58px;
    width: auto;
  }

  .header-area .main-nav .logo.brand .brand-text{
    font-size: 22px;
    letter-spacing: .5px;
    white-space: nowrap;
  }

  /* menu separado da logo */
  .header-area .main-nav .nav{
    float: right;            /* mantém padrão do template */
    margin-left: 50px;       /* espaço visual correto */
  }
}






/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #232d39;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #232d39;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fff;
    border-radius: 50%;
}


/* =========================
   PATCH FINAL HEADER (SAFE)
   Cole no FINAL do CSS
========================= */

/* DESKTOP/TABLET: mantém padrão do template (floats) e só dá respiro */
@media (min-width: 768px){
  .header-area .main-nav { position: relative; }

  /* logo (imagem + texto) sem quebrar o layout */
  .header-area .main-nav .logo.brand{
    float: left;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    line-height: 80px;          /* mantém alinhado com o header original */
  }
  .header-area .main-nav .logo.brand img{
    height: 58px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
  }
  .header-area .main-nav .logo.brand .brand-text{
    font-size: 22px;
    letter-spacing: .5px;
    white-space: nowrap;
  }

  /* menu continua float right, só ajusta espaço */
  .header-area .main-nav .nav{
    float: right;
    margin-top: 24px;           /* alinhamento */
  }

  /* mais espaçamento entre itens (sem mexer em margin-left que pode “empurrar”) */
  .header-area .main-nav .nav li{
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* MOBILE: logo + texto pequeno + hamburger alinhado */
@media (max-width: 767px){
  .header-area.header-sticky{
    padding: 8px 15px !important;
    height: 80px;
  }

  .header-area .main-nav{ position: relative; }

  .header-area .main-nav .logo.brand{
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 80px;
  }

  .header-area .main-nav .logo.brand img{
    height: 46px !important;
    width: auto;
  }

  .header-area .main-nav .logo.brand .brand-text{
    display: inline-block !important;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
  }

  .header-area .main-nav .logo.brand .brand-text em{
    font-style: normal;
    color: #ed563b;
    font-weight: 900;
  }

  /* hamburger */
  .header-area .main-nav .menu-trigger{
    display: block !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: 16px;
  }
}

@media (max-width: 767px){

  /* --- 1) Alinha logo e hamburger na mesma linha --- */
  .header-area{
    height: 80px;
    padding: 0 15px;
  }

  .header-area .main-nav{
    position: relative;
    min-height: 80px;
  }

  .header-area .main-nav .logo{
    display: inline-flex !important;
    align-items: center;
    line-height: 80px !important;   /* referência perfeita */
  }

  /* hamburger sempre “no meio” da faixa branca */
  .header-area .main-nav .menu-trigger{
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
  }

  /* --- 2) Quando o menu abre, ele desce certinho e o X fica no topo --- */
  .header-area.header-sticky .nav{
    margin-top: 80px !important;  /* menu começa abaixo do header */
  }

  /* garante que o menu aberto não “puxe” o X pro meio */
  .header-area .main-nav .menu-trigger.active{
    top: 40px !important;                 /* metade de 80px */
    transform: translateY(-50%) !important;
  }

  /* deixa o X sempre visível e acima do menu */
  .header-area .main-nav .menu-trigger.active span:before,
  .header-area .main-nav .menu-trigger.active span:after{
    z-index: 9999 !important;
  }

  /* --- 3) Ajuste visual do dropdown (opcional mas ajuda) --- */
  .header-area .main-nav .nav{
    background: #fff;
    border-top: 1px solid #eee;
  }
}

@media (max-width: 767px){

  /* Barra do header alinhada */
  .header-area .main-nav{
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;    /* centro vertical real */
    justify-content: space-between;
  }

  /* Logo não usa line-height pra alinhar */
  .header-area .main-nav .logo{
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hamburger vira item do flex e alinha junto */
  .header-area .main-nav .menu-trigger{
    position: relative !important;     /* sai do absoluto */
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Quando abre o menu, ele continua abaixo do header */
  .header-area .main-nav .nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;                         /* abaixo do header */
    margin-top: 0 !important;
  }
}

@media (max-width: 767px){

  /* header alinhado (logo + hamburger) */
  .header-area .main-nav{
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    flex-wrap: wrap;                 /* permite o menu vir abaixo */
  }

  .header-area .main-nav .logo{
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-area .main-nav .menu-trigger{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* MENU: volta pro padrão do template (JS consegue abrir) */
  .header-area .main-nav .nav{
    position: static !important;     /* <<<<<< importante */
    float: none !important;
    width: 100%;
    display: none;                   /* fechado por padrão */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* quando o JS adicionar inline/display, garantimos que aparece */
  .header-area .main-nav .nav.active{
    display: block !important;
  }

  /* empurra o menu pra baixo do header (fica bonito) */
  .header-area.header-sticky .nav{
    margin-top: 12px !important;     /* em vez de 80px */
  }
}

@media (max-width: 767px){

  /* mantém seu header alinhado */
  .header-area .main-nav{
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* BOTÃO hamburger/X sempre no canto direito do header */
  .header-area .main-nav .menu-trigger{
    position: absolute !important;
    right: 16px !important;
    top: 40px !important;              /* metade de 80px */
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
  }

  /* garante que as “linhas” do ícone fiquem bem posicionadas */
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span:before,
  .header-area .main-nav .menu-trigger span:after{
    left: 0 !important;
  }

  /* menu abre abaixo do header */
  .header-area .main-nav .nav{
    width: 100%;
    display: none;
    position: static !important;
    float: none !important;
    margin-top: 12px !important;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 9999;
  }
}




/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 992px) {

  .main-banner .caption h2 {
    font-size: 64px;
  }
  #features {
    margin-bottom: 110px;
  }
  #features .feature-item {
    margin-bottom: 30px;
  }
  #our-classes .tabs-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .trainer-item {
    margin-bottom: 30px;
  }
  #contact-us #map {
    margin-bottom: -7px;
  }
  #contact-us .contact-form {
    padding: 30px;
  }
  #contact-us .contact-form #contact {
    padding: 30px;
  }

}

@media (max-width: 450px) {
  .feature-item .right-content a.text-button {
    margin-left: 130px;
  }
}