/* ===================================
    Criativatek - Gym and fitness
====================================== */
/* font */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* variable */
:root {     
    --base-color: #FCB50F;  
    --dark-gray: #232323;
    --light-medium-gray: #cbcbcb;
    --alt-font: "Barlow Condensed", sans-serif;
    --primary-font: 'Urbanist', sans-serif;
} 
/* reset */
body {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}
/* custom cursor */
.custom-cursor .circle-cursor-inner {
    background-color: var(--dark-gray);
    width: 12px;
    height: 12px;
}
.custom-cursor .circle-cursor-inner.cursor-link-hover {
    background-color: var(--dark-gray);
}
.custom-cursor .circle-cursor-outer {
    border: 1px solid transparent;
}
/* header */
header .navbar-brand img {
    max-height: 43px;
    /* O logótipo novo é mais largo e o texto ficava pequeno. Cresce à vista com scale, e não com
       max-height, para o header manter a altura de que dependem os espaços das páginas. */
    transform: scale(1.2);
    transform-origin: left center;
}
header .navbar-brand,
header.sticky .fixed-header .navbar-brand,
header.sticky .disable-fixed .navbar-brand {
    padding: 18px 0;
}
/* Barra preta igual nos dois temas (o preto é o do Figma da agência). */
header .navbar.xp-header {
    background-color: #111215;
}
.xp-header .navbar-nav .nav-link {
    font-size: 17px;
    font-weight: 700;
    padding-left: 11px !important;
    padding-right: 11px !important;
}
.xp-header .navbar-nav .nav-item:hover .nav-link,
.xp-header .navbar-nav .nav-link:focus-visible {
    color: var(--base-color) !important;
}
.xp-header-telefone {
    font-size: 19px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
}
.xp-header-telefone:hover,
.xp-header .xp-header-tema:hover {
    color: var(--base-color);
}
.xp-header .xp-header-tema {
    color: #fff;
}
.xp-header .xp-logo-escuro {
    display: none;
}
/* Botões do header e do hero como no Figma: sem maiúsculas e mais cheios. */
.xp-header .btn.btn-small,
.xp-hero .btn.btn-large,
.xp-noticias .btn.btn-large {
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.xp-header .btn.btn-small {
    padding: 10px 24px 9px;
}
.xp-hero .btn.btn-large,
.xp-noticias .btn.btn-large {
    padding: 10px 44px 9px;
}
/* Nos ecrãs onde os 8 itens não cabem com folga, aperta-se o espaço entre eles. */
@media (min-width: 992px) and (max-width: 1299px) {
    .xp-header .navbar-nav .nav-link {
        font-size: 16px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    header .xp-header .container-fluid {
        padding-left: 25px;
        padding-right: 25px;
    }
}
@media (min-width: 992px) and (max-width: 1099px) {
    .xp-header .btn { display: none !important; }
}
@media (max-width: 991px) {
    .navbar.xp-header .navbar-collapse { background-color: #111215; }
}
/* Título das páginas interiores alinhado com o símbolo do logótipo. Os valores seguem os recuos do
   header (45px, 25px entre 992 e 1299, 15px abaixo) mais a coluna e a margem do PNG do logótipo;
   medidos no browser. À direita sem recuo, para a foto ir até à borda. */
.xp-titulo-logo { padding-left: 69px; padding-right: 0; }
@media (max-width: 1299px) { .xp-titulo-logo { padding-left: 45px; } }
@media (max-width: 991px) { .xp-titulo-logo { padding-left: 34px; } }
/* hero da homepage */
.xp-hero {
    background-color: #111215;
    padding: 48px 0 57px;
}
.xp-hero-areas {
    color: var(--base-color);
    font-size: 13px;
    line-height: 20px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.xp-hero h1 {
    line-height: 1;
}
.xp-hero-texto {
    color: rgba(255, 255, 255, .7);
    font-size: 18px;
    line-height: 28px;
    max-width: 540px;
}
.xp-hero-pontos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    line-height: 18px;
}
.xp-hero-pontos strong {
    display: block;
    font-family: var(--alt-font);
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
}
.xp-hero-cartao {
    position: relative;
    max-width: 448px;
    margin: 0 0 0 auto;
    aspect-ratio: 448 / 455;
    border-radius: 6px;
    overflow: hidden;
}
.xp-hero-cartao img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xp-hero-cartao figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 80px 26px 26px;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}
.xp-hero-cartao figcaption span {
    display: block;
}
.xp-hero-cartao-selo {
    color: var(--base-color);
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.xp-hero-cartao figcaption .alt-font {
    font-size: 30px;
    line-height: 34px;
}
@media (max-width: 991px) {
    .xp-hero { padding: 40px 0 50px; }
    .xp-hero-cartao { max-width: none; aspect-ratio: 4 / 3; }
}
@media (max-width: 575px) {
    .xp-hero-pontos { gap: 16px 28px; }
    .xp-hero .btn.btn-large { padding-left: 30px; padding-right: 30px; }
    .xp-hero-cartao figcaption { padding: 70px 22px 22px; }
    .xp-hero-cartao figcaption .alt-font { font-size: 28px; line-height: 32px; }
}
/* btn */
.btn {
    font-weight: 500;
}
.btn.btn-extra-large {
    padding: 19px 33px 16px;
    font-size: 17px;
}
.btn.btn-large {
    font-size: 16px;
    padding: 14px 27px 12px;
}
.btn.btn-medium {
    font-size: 15px;
    padding: 14px 25px 10px;
}
.btn.btn-small {
    font-size: 14px;
    padding: 12px 21px 10px;
}
.btn.btn-very-small {
    font-size: 12px;
    padding: 9px 17px 5px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
.btn.btn-base-color,
.btn.btn-box-shadow.btn-base-color:hover {
    color: var(--dark-gray);
}
h1, .h1 {
    font-size: 4rem;
    line-height: 3.8rem;
}
h3 {
    line-height: 2.813rem;
}
h4 {
    line-height: 2.375rem;
}
h5 {
    line-height: 2rem;
}
h6 {
    line-height: 1.75rem;
}
/* background color */
.bg-nero-grey {
    background-color: #1c1c1c;
}
.bg-cultured {
    background-color: #f4f9f6;
}
.bg-base-color-transparent {
    background-color: rgba(252, 181, 15, 0.95);
}
.bg-base-color-transparent-light {
    background-color: rgba(252, 181, 15, 0.6);
}
/* border color */
.border-color-base-color-transparent {
    border-color: rgba(116, 214, 11, 0.3) !important;
}
.event-style-03 .nav-tabs .nav-link {
    padding-top: 21px;
}
/* box shadow */
.box-shadow-double-large {
    -webkit-box-shadow: 0px 47px 45px rgb(0, 0, 0, 0.20);
    box-shadow: 0px 47px 45px rgb(0, 0, 0, 0.20);
}
/* tab style 08 */
.tab-style-08 ul .nav-item .nav-link.active, .tab-style-08 ul .nav-item .nav-link.show, .tab-style-08 ul .nav-item .nav-link:hover {
    color: var(--dark-gray);
}
.tab-style-08 ul .nav-item .tab-border {
    top: 0;
    bottom: auto;
    height: 4px;
}
.tab-style-08 ul .nav-item {
    border-right: 0;
}
/* accordion style */
.accordion-style-06 .accordion-item.active-accordion {
    background-image: linear-gradient(to bottom, #f7f8f9, #f9fafb, #fbfbfc, #fdfdfd, #ffffff);
}
.accordion-style-01 .accordion-item.active-accordion {
    padding: 30px 35px;
}
.accordion-style-02 .accordion-item .accordion-header {
    padding: 22px 0;
}
.team-style-08:hover figure figcaption .member-designation {
    opacity: 1;
}
/* social icon style 09 */
.social-icon-style-09 .medium-icon li {
    margin: 0 4px;
}
.social-icon-style-09 .medium-icon a {
    font-size: 18px;
}
/* Counter style 07 */
.counter-style-07 .vertical-counter-number ul {
    line-height: 1;
}
/* page title */
.page-title-extra-small h1 {
    font-size: 19px;
    line-height: 22px;
}
.page-title-extra-small h2 {
    font-size: 4rem;
    line-height: 4rem;
}
.small-screen {
    height: 500px !important;
}
/* review */
.review-star-icon i {
    color: var(--base-color);
}
/* text stroke color */
.text-outline-color-white { 
    -webkit-text-stroke-color: var(--white); 
}
/* right */
.right-minus-380px {
    right: -380px;
}
/* top */
.top-30 {
    top: 30%!important;
}
/* line height */
.lh-160 {
    line-height: 10rem;
}
.top-minus-200px {
    top: -200px;
}
/* nresletter popup  */
.subscribe-popup .mfp-close:before, .subscribe-popup .mfp-close:active:before {
    color: var(--white);
}
.mfp-bg {
    background-color: var(--dark-gray);
}
/* footer */
footer .footer-logo img {
    max-height: 54px;
}
footer .nav-link {
    line-height: normal;
}
/* Lista de localizações do rodapé. O marcador fica fora do texto, por isso as moradas que passam
   para a linha seguinte alinham pela primeira letra e não pelo ponto. */
.site-locations { list-style: none; padding: 0; margin: 0; }
.site-locations li { position: relative; padding-left: 18px; }
.site-locations li + li { margin-top: 6px; }
.site-locations li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--base-color);
}
@media (max-width: 1399px) {
    .accordion-style-01 .accordion-item .accordion-body {
        padding-right: 40px;
    }
}
@media (max-width: 1199px) {
    .accordion-style-01 .accordion-item {
        padding: 20px 20px;
    }
    .accordion-style-01 .accordion-item.active-accordion {
        padding-left: 20px;
        padding-right: 20px;
    }
    .accordion-style-01 .accordion-item .accordion-body {
        padding-right: 10px;
    }
    .lg-left-minus-250px {
        left: -250px !important;
    }
}
@media (max-width: 991px) {
    .tab-style-08 ul .nav-item .nav-link {
        padding: 18px 20px;
    }
    .page-title-big-typography .small-screen {
        height: 300px !important;
    }
    .page-title-extra-small h2 {
        font-size: 3.8rem;
        line-height: 3.8rem;
    }
    .event-style-03 .nav-tabs .nav-link {
        padding: 17px 8px 14px;
    }
    .event-style-03 .accordion .accordion-title .event-time {
        min-width: 260px;
    }
    .small-screen {
        height: 400px !important;
    }
}
@media (max-width: 767px) {
    h1, h2, h3, h4, h5, h6 {
        letter-spacing: 0;
    }
    .page-title-big-typography .small-screen {
        height: auto !important;
    }
    .event-style-03 .accordion .accordion-title .event-time {
        min-width: 140px;
    }
    .small-screen {
        height: 300px !important;
    }
}
@media (max-width: 575px) {
    .accordion-style-06 .accordion-item {
        padding: 10px 90px 10px 25px;
    }
    .accordion-style-06 .accordion-item.active-accordion {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .btn.btn-extra-large {
        font-size: 16px;
    }
}
/* Notícias (listagem e detalhe): cartão do Figma, com a imagem 5:4 encostada à esquerda. */
.xp-noticias { padding: 142px 0 64px; }
.nt-h1 { font-size: 55px; line-height: 60px; }
.nt-cartao { background-color: #f3f2ef; border-radius: 6px; }
html[data-theme="dark"] .nt-cartao { background-color: #1c1d22; }
.nt-imagem { display: block; width: 450px; max-width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 6px; }
/* .nt-cartao à frente: o .row > * do Bootstrap tira o padding lateral às colunas. */
.nt-cartao .nt-conteudo { padding: 27px 36px 40px; }
/* Largura do Figma (1140 de conteúdo): com os 1110 do tema, o resumo partia em 3 linhas. */
@media (min-width: 1200px) {
    .xp-noticias .container { max-width: 1170px; }
}
/* O cartão do Figma estende-se 40px abaixo da imagem. */
@media (min-width: 992px) {
    .nt-cartao > .col-lg-auto { padding-bottom: 40px; }
}
.nt-data { font-size: 13px; line-height: 18px; letter-spacing: 1px; text-transform: uppercase; }
.nt-titulo { font-size: 41px; line-height: 46px; }
.nt-titulo a { color: inherit; }
.nt-titulo a:hover { color: inherit; opacity: .8; }
.nt-voltar { font-size: 15px; }
.nt-texto { font-size: 17px; line-height: 28px; }
.nt-texto img { max-width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 991px) {
    .xp-noticias { padding-top: 70px; }
    .nt-h1 { font-size: 42px; line-height: 48px; }
    .nt-imagem { width: 100%; }
    .nt-titulo { font-size: 34px; line-height: 40px; }
}
@media (max-width: 575px) {
    .nt-cartao .nt-conteudo { padding: 25px 22px 30px; }
}