/*
Theme Name: Thrive4 Girls
Theme URI: https://thrive4.hu/
Author: MAZSIOOO
Author URI: https://thrive4.hu/
Description: <--- SILENCE IS GOLDEN --->
Version: 1.06
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: egyoszlopos, világos, reszponzív
Text Domain: Thrive4 Girls
*/

@import url('/wp-content/themes/thrive/css/css-reset.css');
@import url('/wp-content/themes/thrive/css/flex-rules.css');
@import url('/wp-content/themes/thrive/css/fonts.css');

:root{
    --clr-l-0: #171619;
    --clr-l-1: #1a191d;
    --clr-l-2: #212024;

    --clr-txt-0: #fff;
    --clr-txt-1: #e1d5c9;
    --clr-txt-2: #807b8b;
    --clr-brand: #e00444;
    --clr-border: #2f2d34;

    --tr-g-xs: 0.25rem;
    --tr-g-s: 0.5rem;
    --tr-g-sm: 0.75rem;
    --tr-g-m: 1rem;
    --tr-g-l: 1.5rem;
    --tr-g-xl: 2rem;
    --tr-g-xxl: calc(var(--tr-g-xl) + var(--tr-g-l));

    --tr-b-radius:var(--tr-g-sm);
    --tr-border: 1px solid var(--clr-border);
    --tr-shadow: rgba(2, 2, 3, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.8) 0px 30px 60px -30px;
    --tr-transition-0: all 0.3s ease;
    --tr-content-width: calc(100% - var(--tr-g-xl));
    --tr-content-max: 1360px;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'TT Fors Variable';
    background-color: var(--clr-l-0);
    background-image: radial-gradient(#1a191d 1px, transparent 1px), radial-gradient(#1a191d 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: 0 0, 6px 6px;
    background-color: #171619;
}

.font-alt{
    font-family: 'Dharma Gothic E Extrabold', sans-serif;
    text-transform: uppercase;
}

main, body{
    min-height:100vh;
}

main{
    position:relative;
    z-index:0;
}

.set-center{
    margin:0 auto;
}

.set-content{
    width:var(--tr-content-width);
    max-width:var(--tr-content-max);
}

.ui-card, .scrolled{
    background-color: var(--clr-l-1);
    border: var(--tr-border)!important;
    border-radius: var(--tr-g-sm);
    transition: var(--tr-transition-0);
}

.ui-card:hover:not(.no-hover){
    box-shadow: var(--tr-shadow);
    transform: translateY(-4px);
}

.tr-btn{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--tr-g-s);
    margin-top:var(--tr-g-m);
    background-color:var(--clr-brand);
    border-radius:var(--tr-b-radius);
    padding:20px 32px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight:600;
    box-shadow:0px 0px 12px 7px rgba(224, 4, 68, .15);
    transition:var(--tr-transition-0);
    border:2px solid var(--clr-brand);
}

.max-width{
    width:max-content;
}

.block-w-100{
    width:100%;
}

.tr-btn:hover{
    background-color:rgb(184, 4, 55);
    box-shadow:0px 4px 16px 12px rgba(224, 4, 68, .20);
}

.no--mb {
    display: none !important;
}

.show--mb {
    display: flex !important;
}

.show--mb--blck {
    display:inline-block!important;
}


.clr-alt-white{
    color:var(--clr-txt-1);
}

.clr-red{
    color:var(--clr-brand);
}

.clr-text{
    color:var(--clr-txt-2);
}

.sub-heading{
    letter-spacing:var(--tr-g-xs);
    padding-left:var(--tr-g-s);
}

.sub-heading:not(.hero-h2){
    font-size:clamp(var(--tr-g-sm), 3vw, var(--tr-g-l));
}

.hero-h2{
    font-size:clamp(var(--tr-g-sm), 8vw, var(--tr-g-l));
}

.section-heading{
    font-size:clamp(48px, 5vw, 72px);
}

.section-par{
    max-width:calc(var(--tr-content-max) / 2);
    font-size:clamp(18px, 3vw, 20px);
    line-height:clamp(26px, 3vw, 28px);
    font-weight:500;
}

.section-style{
    padding:var(--tr-g-xxl) 0;
}

.no-show{
    display:none
}

.modal-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:998;
    background-color:rgba(0, 0, 0, .35);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content{
    position:relative;
    max-width:1000px;
    max-height:708px;
    width:100%;
    box-shadow:var(--tr-shadow);
    overflow:hidden;
}

.modal-close{
    right:20px;
    top: 20px;
    box-shadow:var(--tr-shadow);
    background-color:var(--clr-brand);
}

.scroll-controll, .modal-close{
    position:absolute;
    border:var(--tr-border);
    border-radius:50%;
    height: 48px;
    width: 48px;
    font-size:32px;
    color:var(--clr-txt-1);
    cursor:pointer;
    transition:var(--tr-transition-0);
    z-index:2;
}

.scroll-controll{
    --scroll-offset: -12px;
    top:40%;
    background-color:var(--clr-l-1);
}

.scroll-controll:hover, .modal-close:hover{
    background-color:var(--clr-l-2);
    box-shadow:var(--tr-shadow);
}


/*------------------- SITE CSS -------------------*/
    
    /*------------------- NAV CSS -------------------*/
    .tr-navigation {
        position: fixed;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 900;
        color: var(--clr-txt-1);
        height: 86px;
        gap: var(--tr-g-xs);
        border:1px solid transparent;
    }

    .tr-navigation.scrolled{
        padding: 0 20px;
        top: 16px;
        box-shadow: var(--tr-shadow);
    }

    .tr-logo{
        width:100px;
        height:auto;
        margin-right:auto;
    }

    .tr-menu{
        flex-grow:1;
        height:inherit;
    }

    .tr-nav-item{
        font-size:13px;
        text-transform:uppercase;
        font-weight:600;
        color:var(--clr-txt-1);
        padding:0px var(--tr-g-sm);
        height:inherit;
        transition: var(--tr-transition-0);
        border-bottom:var(--tr-g-xs) solid transparent;
        border-top:var(--tr-g-xs) solid transparent!important;
    }

    .tr-nav-item:hover, .tr-nav-item:focus{
        color:var(--clr-brand);
        border-bottom:var(--tr-g-xs) solid var(--clr-brand);
    }

    .tr-drop-menu {
        position: relative;
        display: inline-block;
        height:inherit;
    }

    .dd-trigger {
        background-color: transparent;
        height:inherit;
        padding: var(--tr-g-m);
        font-size: var(--tr-g-m);
        border: none;
        cursor: pointer;
        border-bottom:var(--tr-g-xs) solid transparent;
    }

    .main-menu-mb .dd-list{
        min-width:300px!important;
        left: 50%;
        transform: translateX(-50%);
    }

    .dd-list {
        display: none;
        position: absolute;
        background-color: var(--clr-l-1);
        min-width: 86px;
        overflow: auto;
        box-shadow: var(--tr-shadow);
        z-index: 1;
    }

    .dd-list a {
        color: var(--clr-txt-1);
        padding: var(--tr-g-l) var(--tr-g-m);
        text-decoration: none;
        display: block;
    }

    .show {display: block;}
    /*------------------- END NAV CSS -------------------*/

    /*------------------- HERO CSS -------------------*/
        .tr-hero-main{
            --img-url: url('/wp-content/themes/thrive/assets/hero/3-600.webp');
            position:relative;
            height:100vh;
            background: var(--img-url) no-repeat center/cover;
        }

        @media (min-width: 601px){
            .tr-hero-main{
                --img-url: url('/wp-content/themes/thrive/assets/hero/3.webp');
                height:860px;
            }

            .scroll-controll{
            --scroll-offset: -24px;
            }
        }

        .hero-h1{
            font-size:clamp(70px, 8vw, 120px);
            line-height:clamp(80px, 8vw, 120px);
        }

        .hero-par{
            max-width:600px;
        }
    /*------------------- END HERO CSS -------------------*/

    /*------------------- MOTIVATION INTRO -------------------*/
        .tr-motivation-intro{
            padding:var(--tr-g-xl) 0;
            background-color:var(--clr-l-1);
            overflow:hidden;
            transform:rotate(-1deg);
            max-width:99.5%;
            box-shadow:var(--tr-shadow);
        }

        .intro-wrapper{
            --anim-time : 60s;
            animation: cvAutoScroll var(--anim-time) linear infinite;
        }

        .motivation-word{
            font-size:clamp(20px, 3vw, 28px);
            white-space:nowrap;
        }

        @keyframes cvAutoScroll {
            0% {
                opacity:0;
            }
            1% {
                opacity:1;
                transform: translateX(0%);
            }
            99% {
                opacity:1;
                transform: translateX(-100%);
            }
            100%{
                opacity:0;
                transform: translateX(-100%);
            }
        }
    /*------------------- END MOTIVATION INTRO -------------------*/

    /*------------------- ABOUT US CSS -------------------*/
        .about-us-gallery{
            position:relative;
            z-index:1;
            margin-bottom:var(--tr-g-l);
        }

        .about-us-content > div{
            width:100%;
        }

        .gallery-wrapper{
            scroll-snap-type: x mandatory;
            overflow-x: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .gallery-wrapper::-webkit-scrollbar {
            display: none;
        }

        .scroll-left{
            left:var(--scroll-offset);
        }

        .scroll-right{
            right:var(--scroll-offset);
        }

        .gallery-wrapper img{
            flex: 0 0 100%;
            scroll-snap-align: start;
            box-shadow:var(--tr-shadow);
            border:var(--tr-border);
            border-radius:var(--tr-b-radius);
            margin-right:var(--tr-g-m);
            transition: var(--tr-transition-0);
        }

        .thumbnails-wrapper > img{
            cursor:pointer;
            max-width:9%;
            border:2px solid var(--clr-l-1);
            transition: var(--tr-transition-0);
            border-radius:var(--tr-g-s);
            filter:grayscale(1);
        }

        .thumbnail.active, .thumbnail:hover{
            border:2px solid var(--clr-brand);
            filter:grayscale(0);
        }
    /*------------------- END ABOUT US-------------------*/

    /*------------------- PRICING CONTENT -------------------*/
        .tr-list-item{
            font-size:clamp(17px, 3vw, var(--tr-g-l));
        }

        .tr-list-item > span{
            flex:1;
        }

        .tr-list-item:not(.ui-card){
            padding:var(--tr-g-m);
        }

        .tr-list-item.ui-card{
            background: linear-gradient(35deg,var(--clr-l-1) 0%, var(--clr-l-2) 100%)!important;
            cursor:pointer;
            padding:var(--tr-g-l) var(--tr-g-m);
            border-left:4px solid var(--clr-brand)!important;
        }

        .warning, .forminator-error-message{
            font-size:10px;
            font-weight:500;
            letter-spacing: 1px;
            text-transform: uppercase;
            color:var(--clr-brand);
            background-color:rgba(224, 4, 68, .25);
            border-radius:var(--tr-g-s);
            padding:var(--tr-g-xs) var(--tr-g-s);
        }
    /*------------------- END PRICING CONTENT-------------------*/

    /*------------------- TRAINERS CSS -------------------*/
        .trainers-grid{
            flex-wrap:wrap;
        }

        .trainer-card{
            position:relative;
            flex:1;
            min-width:280px;
            padding:var(--tr-g-l);
            z-index:1;
            background: url('/wp-content/themes/thrive/assets/t4_card_bg.png'), linear-gradient(35deg,var(--clr-l-1) 0%, var(--clr-l-2) 100%);
            background-position:bottom center;
            background-size:100%;
            background-repeat: no-repeat;
            overflow:hidden;
            border-bottom:3px solid var(--clr-brand)!important;
        }

        .trainer-card::after{
            content:'';
            position:absolute;
            display:block;
            height:100%;
            width:100%;
            z-index:2;
            background: linear-gradient(0deg, var(--clr-l-1) 20%, transparent 70%);
        }

        .trainer-info{
            position:absolute;
            z-index:3;
            left:0;
            bottom:0;
            padding:var(--tr-g-l);
        }

        .btn-forward{
            position:absolute;
            font-size:var(--tr-g-l);
            z-index:4;
            right:var(--tr-g-l);
            bottom:var(--tr-g-l);
            height:48px;
            border-radius:48px;
            aspect-ratio:1;
            background-color:var(--clr-brand);
        }

        .trainer-name{
            font-size:32px;
        }

        .trainer-title{
            font-size:12px;
            text-transform:uppercase;
        }

    /*------------------- END TRAINERS CSS -------------------*/

    /*------------------- CLASSES -------------------*/
    .classes-grid{
        flex-wrap:wrap;
    }

    .classes-grid >div:not(:last-child){
        border-bottom:var(--tr-border);
        border-right:var(--tr-border);
    }

    .day-container{
        padding:var(--tr-g-sm);
        flex:1;
        min-width:240px;
    }

    .day-container > h5 {
        text-transform: capitalize;
        margin-bottom:var(--tr-g-sm);
    }

    .day-container > a, .class-item{
        padding:var(--tr-g-sm);
        background:linear-gradient(35deg,var(--clr-l-1) 0%, var(--clr-l-2) 100%);
    }
    /*------------------- END CLASSES -------------------*/

    /*------------------- CONTACT -------------------*/
    .contact-content{
        overflow:hidden;
        flex-direction:column;
    }

    .contact-form{
        padding:var(--tr-g-l);
        width:100%;
    }

    .forminator-ui, .forminator-ui *:not(.forminator-label){
        display:flex;
        flex-direction:column;
    }

    .forminator-ui label{
        display:flex;
        color:var(--clr-txt-1);
    }

    .forminator-ui input, .forminator-ui textarea{
        background-color: var(--clr-l-0);
        border: var(--tr-border)!important;
        border-radius: var(--tr-g-sm);
        transition: var(--tr-transition-0);
        font-size: 13px;
        font-weight:600;
        height:50px;
        padding:8px;
        color:var(--clr-txt-2);
    }


    .tr-footer{
        border-radius: 32px 32px 0 0px;
        margin-top: var(--tr-g-xxl);
        padding: var(--tr-g-m);
        background-color: var(--clr-l-2);
        box-shadow: var(--tr-shadow);
    }

    .footer-content{
        flex-direction:column;
        padding:var(--tr-g-xxl) 0px;
        flex-wrap:wrap;
    }

    .footer-content > div{
        flex:1;
    }

    .footer-logo{
        max-width:200px;
        height:auto;
    }

    .menu-list-header{
        font-size:24px;
    }

    .footer-menu-item{
        font-weight:500;
        font-size:14px;
        color:var(--clr-txt-2);
        transition:var(--tr-transition-0);
    }

    .footer-menu-item:hover{
        color:var(--clr-brand);
    }

    .tr-copyright{
        border-top:var(--tr-border);
        padding:var(--tr-g-l) 0px;
        font-size:10px;
        letter-spacing:3px;
    }

/*------------------- SITE CSS -------------------*/
.fadeInUp {
    --get-delay: 0.8s;
    animation: fadeInUp var(--get-delay) cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}


@media (min-width: 1024px) {
    :root{
        --tr-content-width: calc(100% - 40px);
    }

    .trainer-card{
        max-width:360px;
    }

    .intro-wrapper{
        --anim-time : 120s;
    }

    .no--mb {
        display: flex!important;
    }

    .show--mb, .show--mb--blck {
        display: none!important;
    }

    .tr-navigation{
        gap: var(--tr-g-xxl)!important;
    }

    .tr-logo{
        width:150px;
    }

    .about-us-content{
        flex-direction:row;
        gap:60px;
    }

    .about-us-content > div{
        max-width:calc(var(--tr-content-width) / 2);
    }

    .about-us-textual{
        order:-1;
    }

    .tr-list-item.ui-card{
        letter-spacing:1px;
    }

    .trainer-image, .btn-forward{
        transition:var( --tr-transition-0)
    }

    .trainer-card:hover .trainer-image, .btn-forward:hover{
        transform:scale(1.1);
    }

    .day-container{
        min-width:180px!important;
    }

    .classes-grid >div:not(:last-child){
        border-right:var(--tr-border);
    }

    .contact-content, .footer-content{
        flex-direction:row;
    }
}