/*

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
--------------------------------------------- 
*/
.glow-logo {
  filter: drop-shadow(0 0 10px #8ecae6a1);
  transition: 0.5s;
}
.glow-logo:hover { 
    transform: scale(1.08);
}


.scroll-down-indicator {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-down-indicator span {
    width: 32px;
    height: 32px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    animation: bounce 1.5s infinite;
    margin-bottom: 4px;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0) rotate(45deg);}
    50% { transform: translateY(12px) rotate(45deg);}
}







/*TIMELAINE CHI SIAMO*/

    <style>
            
            /* --- TIMELINE MODERNA --- */
.main-timeline-2 {
    position: relative;
    padding: 20px 0;
}

/* Linea centrale verticale */
.main-timeline-2::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #e9ecef; /* Colore linea */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
    border-radius: 5px;
}

/* Contenitore della riga (card + icona) */
.timeline-2-row {
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 40px;
    padding: 0 40px; /* Spazio tra linea e card */
}

/* Posizionamento Sinistra/Destra */
.left-2 {
    left: 0;
    text-align: right; /* Allinea testo verso la linea centrale */
}

.right-2 {
    left: 50%;
    text-align: left;
}

/* Card Stile */
.shadow-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Ombra morbida iniziale */
}

.shadow-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Ombra più forte al passaggio */
}

/* Icona Centrale */
.timeline-icon {
    position: absolute;
    top: 20px;
    right: -20px; /* Posizione per elementi di sinistra */
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #fff; /* Bordo bianco per staccare dalla linea */
    box-shadow: 0 0 0 3px #8ecae6; /* Anello colorato esterno */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

/* Correzione icona per elementi di destra */
.right-2 .timeline-icon {
    left: -20px; 
    right: auto;
}

/* Colori personalizzati per badge e icone */
.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); color: #0d6efd; }
.bg-info-soft { background-color: rgba(13, 202, 240, 0.1); color: #0dcaf0; }
.bg-success-soft { background-color: rgba(25, 135, 84, 0.1); color: #198754; }
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); color: #ffc107; }

/* --- RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
    .main-timeline-2::after {
        left: 30px; /* Sposta la linea a sinistra su mobile */
    }
    
    .timeline-2-row {
        width: 100%;
        padding-left: 70px; /* Spazio per la linea a sinistra */
        padding-right: 15px;
        text-align: left; /* Testo sempre a sinistra su mobile */
    }
    
    .right-2 {
        left: 0; /* Resetta offset destra */
    }
    
    /* Sposta tutte le icone a sinistra sulla linea */
    .left-2 .timeline-icon,
    .right-2 .timeline-icon {
        left: 10px;
        right: auto;
    }
    
    /* Aggiunge freccetta che punta a sinistra per le card */
    .card::before {
        display: none; /* Rimuovi se non vuoi frecce */
    }
}

            
        </style>






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: #8ecae6;
  color: #fff;
}

::-moz-selection {
  background: #8ecae6;
  color: #fff;
}

@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-2 {
  text-align: center;
  margin-top: 0px;
  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: #8ecae6;
}


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

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

.section-heading-2 h2 em {
  font-style: normal;
  color: #8ecae6;
}


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

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

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


.main-button, .secondary-button {
  min-width: 150px;  
}

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

  border-radius: 20px;
}

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

.secondary-button a {
  display: inline-block;
  font-size: 15px;
  padding: 10px 20px;
  background-color: #fff;
  color: #8ecae6;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: solid 2px #8ecae6;
  border-radius: 20px;
}

.secondary-button a:hover {
  background-color: #8ecae6;
  color: #fff;
}

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

  border-radius: 20px;
}

.tertiary-button a:hover {
  background-color: #219ebc;
}






/* === UNIFORMITÀ CARD GALLERIA === */

/* Card container con altezza fissa */
.case-study-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Immagine con dimensioni fisse */
.case-study-card .case-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
}

.case-study-card .case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.case-study-card:hover .case-image img {
    transform: scale(1.05);
}

/* Badge categoria IN ALTO a sinistra */
.case-study-card .case-image .badge-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(142, 202, 230, 0.95); /* Azzurro del brand */
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Icona play centrata - PIÙ PICCOLA E ELEGANTE */
.case-study-card .play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}

.case-study-card .play-icon-wrapper i {
    font-size: 3.5rem; /* Ridotto da 4rem */
    color: #fff;
    opacity: 0.85;
    transition: all 0.3s ease;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.case-study-card:hover .play-icon-wrapper i {
    opacity: 1;
    transform: scale(1.15);
    color: #8ecae6; /* Azzurro al passaggio */
}

/* Overlay scuro al passaggio per video */
.case-study-card .case-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.case-study-card:hover .case-image::after {
    background: rgba(0, 0, 0, 0.15);
}

/* Contenuto testuale con altezza fissa */
.case-study-card .case-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.case-study-card .case-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1e293b;
    min-height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-study-card .case-content p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1rem;
    height: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Responsive */
@media (max-width: 768px) {
    .case-study-card .case-image {
        height: 220px;
    }
    
    .case-study-card .play-icon-wrapper i {
        font-size: 3rem; /* Ancora più piccolo su mobile */
    }
    
    .case-study-card .case-content h4 {
        min-height: auto;
        font-size: 1.1rem;
    }
    
    .case-study-card .case-content p {
        height: auto;
        max-height: 100px;
    }
}


/* 
---------------------------------------------
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: #8ecae6!important;
}

.background-header .nav li a.active {
  color: #8ecae6!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;
}

@media (max-width: 768px) {
  .header-area .main-nav .logo {
    font-size: 19px; /* o un'altra dimensione più piccola */
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .header-area .main-nav .logo {
    font-size: 19px !important; /* o un'altra dimensione più piccola */
  }
}


.header-area .main-nav .logo em {
  font-style: normal;
  color: #8ecae6;
  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: #8ecae6;
  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: #219ebc;
  opacity: 1;
}

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

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #8ecae6!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;
}


@media (max-width: 992px) {
  .nav {
    display: none; /* Nasconde menu desktop */
  }
  .menu-trigger {
    display: block; /* Mostra il menu mobile */
  }
}


.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: "";
}

.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;
}

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

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

@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: 992px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #8ecae6!important;
    opacity: 1;
  }
  .header-area {
    position: sticky;
     top: 0;
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area.header-sticky,
.header-area.header-sticky.background-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background-color: #fff;
}



  .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: #8ecae6;
    color: #fff;
  }
  .header-area .main-nav .nav li:last-child a {
    background-color: #8ecae6!important;
  }
  .header-area .main-nav .nav li:last-child a:hover,
  .header-area .main-nav .nav li:last-child:hover a {
    background-color: #8ecae6!important;
    color: #fff!important;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  
  .header-area.background-header {
  background-color: #fff; /* sfondo visibile */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* per dare separazione */
}

@media (max-width: 992px) {
  .header-area .nav {
    background-color: #fff; /* sfondo per il menu */
  }
  .header-area .nav.active, /* se aggiungi classe active via JS */
  .header-area .nav.slide-toggle-show { /* o se usi slideToggle */
    display: block; /* visibile quando attiva */
  }
}

  
  
  .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: #8ecae6!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: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


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


.banner{
  background-image: url(../images/banner.jpg), linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
  background-blend-mode: overlay;
  background-size: cover;
  background-position: bottom;
}

.navbar-banner{
  background-image: url(../images/banner.jpg), linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3))!important;
  background-blend-mode: overlay;
  background-size: cover;
  background-position: bottom;
  color: #fff!important;
}



.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(40,50,50,0.7);
    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 !important; /* DESKTOP DEFAULT */
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

/* MOBILE */
@media (max-width: 768px) {
  .main-banner .caption h2 {
    font-size: 55px !important;
  }
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #8ecae6;
  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: #8ecae6;
  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: #8ecae6;
}

.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: #8ecae6;
}
#tabs .main-rounded-button a:hover {
  background-color: #219ebc;
}
#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: #8ecae6;
}
#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: #8ecae6;
}
#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: #8ecae6;
  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: #8ecae6;
}


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


#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: #8ecae6;
  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: #219ebc;
}

.contact-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(35, 45, 57, 0.08);
  overflow: hidden;
}

.contact-info {
  background-color: #219ebc;
  color: #fff;
  padding: 50px 40px;
}

.contact-info h4 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-info p {
  color: rgba(255, 255, 255, 0.85);
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info-list li {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-size: 14px;
}

.contact-info-list li i {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  margin-right: 12px;
}

.contact-info .social-icons {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info .social-icons li {
  margin-right: 12px;
}

.contact-info .social-icons a {
  color: #fff;
  font-size: 16px;
}

.contact-form-wrap {
  padding: 50px 40px;
}

.contact-form-wrap .form-group {
  margin-bottom: 25px;
}

.contact-form-wrap label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #232d39;
  margin-bottom: 8px;
}

.contact-form-wrap input,
.contact-form-wrap textarea {
  width: 100%;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: #232d39;
  outline: none;
  transition: border-color .3s;
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
  border-color: #8ecae6;
}

.contact-form-wrap textarea {
  resize: none;
}

@media (max-width: 991px) {
  .contact-info {
    padding: 40px 30px;
  }
  .contact-form-wrap {
    padding: 40px 30px;
  }
}


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

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

footer p a {
  cursor: pointer;
  color: #8ecae6;
}

footer p a:hover {
  color: #8ecae6;
}



/* 
---------------------------------------------
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%;
}


/* 
---------------------------------------------
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;
  }
}