@charset "utf-8";
/* ------------=====================шрифты===============--------------*/
@font-face 
{font-family: 'SFProDisplay-Light';
src: url(../Fonts/SFProDisplay-Light.woff2);}
@font-face 
{font-family: 'SFProDisplay-Medium';	
src: url(../Fonts/SFProDisplay-Medium.woff2);}
@font-face 
{font-family: 'SFProDisplay-Regular';
src: url(../Fonts/SFProDisplay-Regular.woff2);}
@font-face 
{font-family:'SFProDisplay-Bold';
src: url(../Fonts/SFProDisplay-Bold.woff2);font-weight: 900;}
@font-face 
{font-family: 'SFProDisplay-Semibold';
src: url(../Fonts/SFProDisplay-Semibold.woff2);}

:root
{
/* ================================font-family========================== */
    --font-family-Regular:'SFProDisplay-Regular';    
    --font-family-Medium:'SFProDisplay-Medium';
    --font-family-Bold:'SFProDisplay-Bold';
    --font-family-SemiBold:'SFProDisplay-Semibold';
    --color-text-dark:black;
    --color-text-otang-opacity:#fffbf2;
    --color-text-green-opacity:#f0fbff;
    --color-opacity-purple:#f1edff;
    --color-golden-opacity:#fff8ed;
    --color-black-red-opacity:#fff7f7;
    --color-blue-opacity:#edf9ff;
    --color-red-opacity:#fff4f8;
    --color-text-white:white;
    --color-gray-white:#f5f5f7;
    --color-gray-darck:#6e6e73;
    --color-orang:#e45d50;
    --color-red:#b7283b;
    --color-black-red:#ad1f1f;
    --hover-blue:var(--color-blue);
    --color-blue:#0066cc;
    --color-wh-blue:#0095D0;
    --color-purple:#795af4;
    --color-golden:#c67804;
    --color-whiteBlue:#54b6dd;
    --color-darkBlue:#4a63c6;
    --footer-border-color:#d2d2d7;
    --footer-link-color: #424245;
    --border-color:rgba(0,0,0,0.16);
    --color-text-green:#19998e;
    --color-darck-green:#227f1e;
    --font-width-600:600;
    --font-width-500:500;
    --font-weight-100: 100;
    --border-radius-max-box:30px;
    --border-radius-mini-box:10px;
    --hover-trans:all 300ms;
}
*
{
    padding: 0;
    margin: 0;
    outline: 0;
    border: 0;
    appearance: none;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: var(--font-family-SemiBold);
    /* user-select: none; */
    scroll-behavior: smooth;
    -moz-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;

}





.conviction-box{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.conviction-title{
    font-size: 30px;
}
.conviction-text{
    font-size: 14px;
    opacity: 0.8;
}
.explanation-text{
    font-size: 10px;
    opacity: 0.8;
}
.conviction-text-box{
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #fff;
    padding: 1rem;
    border-radius: var(--border-radius-mini-box);
}
.conviction-img{
    width: 80px;
}

.left-form-content-box{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.Download-screen-btn{
    text-align: center;
}
.explanation-img{
    width: 100%;
    max-width: 160px;
}
.explanation-screen-titile{
    font-size: 15px;
    text-align: center;
}
.explanation-content.mobile{
    display: none;
}
.explanation-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.explanation-conten-rewiews{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.explanation-text-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}
.form-box {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 100%;
}


h5, span, a, .textFaq,li{
color: inherit;
font-size: inherit;
font-style: inherit;
text-decoration: none;
font-family: inherit;
width: inherit;}
p, input{
font-size: 19px;
line-height: 1.4705882353;
font-weight: 400;
letter-spacing: -0.022em;
font-family: var(--font-family-Regular);}
h1{
font-size: 80px;
line-height: 1.05;
font-weight: 600;
letter-spacing: -0.015em;
text-align: inherit;}
h2{
font-size: 28px;
line-height: 1.2858342857;
font-weight: 600;
letter-spacing: .007em;
color:inherit;}
h3{
font-size: 50px;
line-height: 1.0714285714;
font-weight: 600;
letter-spacing: -0.005em;}
h4{
font-size: 24px;
line-height: 1.1904761905;
font-weight: 600;
letter-spacing: .011em;
color: inherit;
font-family: var(--font-family-Bold);}
label{
font-size: 16px;
line-height: 1.1904761905;
letter-spacing: .011em;
color: var(--color-gray-darck);
font-family: var(--font-family-Regular);}
.labelCostCard{
font-size: 19px;
line-height: 1.2105263158;
font-weight: 600;
letter-spacing: .012em;}
.infoTextCostCard{
font-size: 14px;
line-height: 1.4285914286;
font-weight: 400;
letter-spacing: -0.016em;}
.textULFaq
{font-size: 14px;opacity: 0.7;
line-height: 1.33337;color: var(--color-text-dark);
font-weight: 400;letter-spacing: -.01em;
font-family: var(--font-family-Regular);}
.backgroundGray
{background: var(--color-gray-white);}
.textOpacity
{opacity: 0.66;}
.border-bot
{border-bottom: 1px solid var(--border-color);}
.hover:hover{
    color: var(--color-blue);
}
.cardColorBgBlue
{background: var(--color-blue-opacity)}
.cardColorBgPurple
{background: var(--color-opacity-purple)}
.cardColorBgDarckGreen
{background: var(--color-gray-white);}
.cardColorBgGreen
{background: var(--color-text-green-opacity)}
.cardColorBgOrand
{background: var(--color-text-otang-opacity);}
.cardColorBgRed
{background: var(--color-red-opacity);}
.cardColorBgGold
{background: var(--color-golden-opacity);}
.cardColorBgGray
{background: var(--color-gray-white)!important;}

.cardColorBgDarckGreen .contins
{background: var(--color-darck-green);}
.cardColorBgGreen .contins
{background: var(--color-text-green);}
.cardColorBgGold .contins
{background: var(--color-golden);}
.cardColorBgBlue .contins
{background: var(--color-darkBlue);}
.cardColorBgRed .contins
{background: var(--color-red);}
.cardColorBgOrand .contins
{background: var(--color-orang);}
.cardColorBgPurple .contins
{background: var(--color-purple);}
.cardColorBgGray .contins
{background: var(--color-wh-blue);}

.cardColorBgPurple .textCard .color-accent
{color: var(--color-purple)}
.cardColorBgBlue .textCard .color-accent
{color: var(--color-darkBlue);}
.cardColorBgGreen .textCard .color-accent
{color: var(--color-text-green);}
.cardColorBgDarckGreen .textCard .color-accent
{color: var(--color-darck-green);}
.cardColorBgRed .textCard .color-accent
{color: var(--color-red);}
.cardColorBgOrand .textCard .color-accent
{color: var(--color-orang);}
.cardColorBgGold .textCard .color-accent
{color: var(--color-golden);}
.cardColorBgGray .textCard .color-accent
{color: var(--color-wh-blue);}

.opacity07
{opacity: .7;}
.paddingFront
{padding: 60px;}
.paddingFront40
{padding: 0 40px;}
.paddingTop
{padding-top:60px;}
.paddingbottom
{padding-bottom: 50px;}
.marginTop20
{margin-top:25px;}
.height650
{height: 650px;}
.height700
{height: 700px;}
.height760{height: 760px;}
.justifyCenter
{justify-content: center;}
.pad6015{padding: 60px 15px}



.colwhite{color: var(--color-text-white);}

.pad60{padding: 60px;}

.flRow{display: flex;}
.flCol{display: flex;flex-direction: column;}
.flRowmob{display: flex;}
.alitCent{align-items: center;}
.alitStart{align-items: start;}
.alitEnd{align-items: end;}
.juscontCent{justify-content: center;}
.juscontStart{justify-content: start;}
.jusCcontEnd{justify-content: end;}
.juscotSB{justify-content: space-between;}

.gap10{gap:15px;}
.gap20{gap: 20px;}
.gap40{gap: 40px;}
.gap25{gap: 25px;}
.hei100{height: 100%}
.pad015{padding: 0 15px;}

.wid100{width: 100%;}

.abso{position: absolute;}
.rela{position: relative;}
.cp{cursor: pointer;}

.card{width: 100%; max-width: 1400px; min-width: 345px; margin: 0 auto;}


.br30{border-radius: var(--border-radius-max-box);}
.br10{border-radius: var(--border-radius-mini-box);}
.ovhid{overflow: hidden;}


.z1{z-index: 1;}
.z2{z-index: 2;}



.section.s01{
    width: 100%;
    height: 800px;
    overflow: hidden;
    background: var(--color-text-dark);
}
.s002{
    width: 100%;
    max-width: 1080px;
    min-width: 345px;
    margin: 0 auto;
}
.bgvideo01{
    width: 100%;
    max-width: 1080px;
    -webkit-filter: contrast(112.2%);
    filter: contrast(112.2%);
}
.h1tetx{
    width: 100%;
    height: 100%;
    left: 0;top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.tPgtext {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 90px;
}
.tleft{
    opacity: 0;
    margin-bottom:410px;
    background: linear-gradient(135deg, var(--color-text-white) 65%,var(--color-text-dark) 85%);
    -webkit-background: linear-gradient(135deg, var(--color-text-white) 65%,var(--color-text-dark) 85%);
    -moz-background: linear-gradient(135deg, var(--color-text-white) 65%,var(--color-text-dark) 85%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    transform: translateX(20px);
    animation:textTitle1 1.33s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 4.3s;
}
.tright{
    opacity: 0;
    margin-top: 250px;
    background: linear-gradient(305deg, var(--color-text-white) 70%,var(--color-text-dark) 105%);
    -webkit-background: linear-gradient(305deg, var(--color-text-white) 70%,var(--color-text-dark) 105%);
    -moz-background: linear-gradient(305deg, var(--color-text-white) 70%,var(--color-text-dark) 105%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    transform: translateX(-20px);
    animation:textTitle1 1.33s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 4.3s;
}
.traintext{
    padding-bottom: 60px;
}
.anim{
    opacity: 0;
    transition: opacity 0s
}
.visible .anim{
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)}
.visible .anim.one{
    transition-delay: 0.4s;
}
.visible .anim.twy{
    transition-delay: 0.43s;
}
.visible .anim.three{
    transition-delay: 0.46s;
}













.contins{
    left: 0;top: 0;right: 0;bottom: 0;
    opacity: 0;visibility: hidden;z-index: 1;
    transition: opacity .66s cubic-bezier(0.66,0,0.01,1) .66s,visibility 0s linear 1.32s,z-index .66s cubic-bezier(0.66,0,0.01,1) .66s;
    -webkit-transition: opacity .66s cubic-bezier(0.66,0,0.01,1) .66s,visibility 0s linear 1.32s,z-index .66s cubic-bezier(0.66,0,0.01,1) .66s;
    -moz-transition: opacity .66s cubic-bezier(0.66,0,0.01,1) .66s,visibility 0s linear 1.32s,z-index .66s cubic-bezier(0.66,0,0.01,1) .66s;
}
.flip .contins{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 2;
}


.vidbg02{
    transform: translateX(-50%);
    left: 535px;
    top: -330px;
    width: 975px;
    filter: brightness(107.6%);
    -webkit-filter: brightness(107.6%);
    -moz-filter: brightness(107.6%);
}
.vidbg003{
    display: none;
}
.imgbg02{
    transform: translateX(-50%);
    left: 535px;
    top: -330px;
    width: 975px;
}
@keyframes VideoOff{
    0%{opacity: 1; z-index: 5;pointer-events: auto;}
    100%{opacity: 0;z-index: -1; pointer-events: none;}}
@keyframes textTitle2
{0%{}100%{opacity: 1;}}


.tCentr{
    width: 100%;
    height: 80px;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(180deg, var(--color-text-white) 5%,var(--color-text-dark) 105%);
    -webkit-background: linear-gradient(180deg, var(--color-text-white) 5%,var(--color-text-dark) 105%);
    -moz-background: linear-gradient(180deg, var(--color-text-white) 5%,var(--color-text-dark) 105%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    text-align: center;
    letter-spacing: -1px;
    opacity: 1;font-size: 60px;
    transition:  letter-spacing 1.66s,opacity 1.66s ease;
    transition-delay: 0.8s;}
.tCentr{
    animation:textcent 1.66s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 1.66s;}
@keyframes textcent
{0%{}100%{letter-spacing: 4px;;opacity: 0;}}
.visible .tright, .visible .tleft{
    animation:textTitle1 1.33s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 4.3s;
}
@keyframes textTitle1
{0%{opacity: 0;}100%{transform: translateX(0);opacity: 1;}}

.btnSupport{
    font-size: 0.8em;
    color: var(--color-text-white);
    background: var(--color-blue);
    border-radius: 25px;
    padding: 6px 15px;
    font-weight: 300;cursor: pointer;
    font-family: var(--font-family-Regular);}
.btnSupport:hover{
    background-color: var(--color-wh-blue);}









.cardMiniM .contentInside, .cardMini .contentInside, .cardMax .contentInside{
    position: absolute;
    left: 0; top: 0;
    width: 100%;height: 100%;
    display: flex;
    justify-content: center;
    padding: 60px;flex: 1;
    cursor: pointer;
    z-index: 1;
}
.CardTool.white, .CardTool.darck{
    width: 42px;
    height: 42px;
    color: var(--color-text-dark);
    opacity: .88;
    cursor: pointer;
    position: absolute;
    right:30px;
    bottom: 30px;
    transition: all .66s cubic-bezier(0.66,0,0.2,1);
    transition-delay: .66s;
    z-index: 10;
}
.CardTool.white{color: var(--color-text-white);}

.flip .CardTool.darck .cardToolBody{
    fill: var(--color-text-white);
    stroke:var(--color-text-white);
    transition: all .66s cubic-bezier(0.66,0,0.2,1);
}
.darck .cardToolBody, .white .cardToolBody{
    fill: transparent;
    transition: all .66s cubic-bezier(0.66,0,0.2,1);
}
.flip .CardTool.white.graywhite .cardToolBody{
    stroke:var(--color-text-dark);
    fill: var(--color-text-dark);
}
.flip .CardTool.white .cardToolTitle, .flip .CardTool.white .cardToolBody{
    stroke:var(--color-text-white);
    fill: var(--color-text-white);
    transition: all .66s cubic-bezier(0.66,0,0.2,1);
}
.flip .CardTool .cardToolTitle{
    transition: all .66s cubic-bezier(0.66,0,0.2,1);
}
.flip .CardTool.graywhite .cardToolTitle
{stroke: var(--color-gray-white);}
.flip .CardTool.red .cardToolTitle
{stroke: var(--color-red);}
.flip .CardTool.purple .cardToolTitle
{stroke: var(--color-purple);}
.flip .CardTool.green .cardToolTitle
{stroke: var(--color-text-green);}
.flip .CardTool.darckgreen .cardToolTitle
{stroke: var(--color-darck-green);}
.flip .CardTool.gray .cardToolTitle
{stroke: var(--color-wh-blue);}
.flip .CardTool.blue .cardToolTitle
{stroke: var(--color-darkBlue);}
.flip .CardTool.gold .cardToolTitle
{stroke: var(--color-golden);}
.flip .CardTool.orang .cardToolTitle
{stroke: var(--color-orang)}
.flip .CardTool.Whblue .cardToolTitle
{stroke: var(--color-wh-blue)}
.flip .CardTool .cardToolTitle
{transform: rotate(45deg);transform-origin: center;}


.FlipTextCard
{max-width: 550px;}
.McPlaceBox
{display: flex;
justify-content: center;
width: 100%;
gap: 40px;padding-top: 20px;
align-items: center;}
.darck .cardToolTitle, .white .cardToolTitle
{transition: all .66s cubic-bezier(0.66,0,0.2,1);transform-origin: center;}
.cardMini.flip .contentInside, .cardMax.flip .contentInside, .cardMiniM.flip .contentInside
{opacity: 1;
visibility: visible;
transition-delay: 0s;
z-index: 1;}
.textCenter{text-align: center;}
.textleft{text-align: left;width: 100%;}
.fontSize35 h3
{font-size: 38px !important;}
.linlBoxMKP, .FlipTextCard
{max-width: 550px;
opacity: 0;
transform: translateY(-20px);
transition: all .66s cubic-bezier(0.66,0,0.2,1);
pointer-events: none;}
.flip .linlBoxMKP, .flip .FlipTextCard
{opacity: 1;transform: translateY(0);transition-delay: .66s;
pointer-events: auto;}

.paddingVertical40
{padding:60px 40px;}
.imgBg03{
    width: 90%;
    left: 0px;
    bottom: -30%;
    z-index: 0;}
.imgBg04{
    width: 90%;
    right: 20px;
    bottom: -40px;}
.imgbg004{
    width: 100%;
    max-width: 950px;
    min-width: 400px;
    right: 0;
    bottom: -220px;
}
.imgBg05{
    width: 100%;
    min-width: 400px;
    max-width: 550px;}
.imgBg06{
    width: 140%;
    left: -70px;
    top: -110px;}
.scroll .menu.Borderwhite
{border-color: transparent;}
.bropFillMen{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;right: 0;
    top: 0;bottom: 0;
    pointer-events: none;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    opacity: 0;z-index: 16;
    transition: opacity 0.33s cubic-bezier(0.215, 0.610, 0.355, 1);
    transition-delay: .44s;}
    
.bropFillMen.visbl{
    opacity: 1;pointer-events: auto;
    transition-delay: 0s;
}
.video03
{position: absolute;
top: -180px;width: 520px;
left: 50%;-webkit-filter: brightness(107.7%);
margin-left: -260px;filter: brightness(107.7%);}
.menuNav{
    position: fixed;
    top: 0px;
    margin: 0 auto;
    width: 100%;
    height: 52px;
    display: flex;
    z-index: 120;
    border-bottom: 1px solid;border-color: transparent;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1), 
    background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1) 0.35s,
    height 0.33s cubic-bezier(0.215, 0.610, 0.355, 1) 0.35s,
    backdrop-filter 0.33s cubic-bezier(0.215, 0.610, 0.355, 1) 0.35s;
    }
.menuNav.opMe, .menuNav.opMe.scroll{
    background-color: rgba(255,255,255,0.9);
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1), 
    background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1),
    height 0.33s cubic-bezier(0.215, 0.610, 0.355, 1);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    -moz-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.72);
    height: 280px;}
.mobmenu{
    bottom: 20px;
    padding: 0 15px;
    pointer-events: none;
}
.opMe .mobmenu{
    pointer-events: auto;
}
.pk.btnSupport{
    opacity: 1;
    pointer-events: auto;
    transform: translate(0);
}
.mblink{

    font-family: var(--font-family-Regular);
    font-weight: 400;
    color: var(--color-gray-darck);
}
.mblink, .btnSupport{
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: 0.56s;
}
.opMe .mblink, .opMe .btnSupport{
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translateX(0);
    transition-delay: 0.2s;
}
.opMe .mblink.d0{
    transition-delay: 0.2s;
}
.opMe .mblink.d1{
    transition-delay: 0.3s;
}
.opMe .mblink.d2{
    transition-delay: 0.4s;
}
.opMe .mblink.d3{
    transition-delay: 0.5s;
}
.opMe .btnSupport.d4{
    transition-delay: 0.6s;
}
.mblink.d0{
    transition-delay: 0.3s;
}
.mblink.d1{
    transition-delay: 0.25s;
}
.mblink.d2{
    transition-delay: 0.2s;
}
.mblink.d3{
    transition-delay: 0.15s;
}
.btnSupport.d4{
    transition-delay: 0.1s;
}

.scroll .opMe .mblink.d0{
    transition-delay: 0.2s;
}
.scroll .opMe .mblink.d1{
    transition-delay: 0.3s;
}
.scroll .opMe .mblink.d2{
    transition-delay: 0.4s;
}
.scroll .opMe .mblink.d3{
    transition-delay: 0.5s;
}
.scroll .opMe .btnSupport.d4{
    transition-delay: 0.6s;
}

.inpFiil{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    z-index: -1;
}


.opMe .logo.white, .scroll.opMe .logo.white{color: var(--color-text-dark);}
.opMe .menu.Borderwhite, .scroll.opMe .menu.Borderwhite{border-color: var(--border-color) !important;}

.menuNav.scroll{   
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1), 
    background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1),
    height 0.33s cubic-bezier(0.215, 0.610, 0.355, 1) 0.33s;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);border-color: var(--border-color);
    background-color: rgba(255,255,255,0.72);}
.menuNav.scroll .menu{
    border-color: transparent;
    transition: border-color 0.33s cubic-bezier(0.075, 0.82, 0.165, 1);}
    .menuNav.scroll{
        
    }
    .menuNav.scroll.opMe .menu{
        border-color: var(--border-color);
    }
.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 345px;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 1085px;
    border-bottom: 1px solid;
    height: 52px;
    border-color: var(--border-color);
    padding: 10px 0px;
    margin: 0 auto;
    transition: border-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
.logo
{font-size: 19px;opacity: .88;transition: all 0.5s;}
.itemmenuBoxes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;}
.navItem
{font-family: var(--font-family-Regular) !important;
font-weight: 300;font-size: 13px;
color: var(--color-gray-darck);
transition: var(--hover-trans);display: flex;
flex-direction: row;align-items: center;gap: 20px;}

.secMaxMin{
    min-width: 320px;
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;}


.Bg
{width:1000px;position: relative;
top: -70px;z-index: -1;margin: 0 auto;
left: 50%;transform: translate(-50%)}

.SectionTitle h2
{color: var(--color-gray-darck);}
.SectionTitleLogo
{width: 325px;opacity: 0.8;}

.phoneVideo5{
    position: absolute;
    width: 170%;
    left: 50%;
    max-width: 1170px;
    min-width: 1000px;
    transform: translateX(-50%);
    bottom: -44%;
    filter: brightness(105.5%);
    -webkit-filter: brightness(105.5%);
    pointer-events: none;}
.phoneVideo
{position: absolute;width: 1000px;
-webkit-filter: brightness(108.5%);
top: -70px;left: 50%;margin-left: -500px;
z-index: -1;animation: none;}
@keyframes bgfirst
{0%{opacity: 1;pointer-events: auto;}
100%{opacity: 0; pointer-events: none;}}
.backgroundFirst
{position: relative;}
.backgroundFirst.visible .phoneVideo
{animation: bgfirst 0.5s forwards;
animation-delay: 4.5s;}
@keyframes TextOff
{0%{opacity:1;transform: translateY(0);}
100%{opacity:0;transform: translateY(20px);}}
@keyframes TextOn
{0%{opacity:0;transform: translateY(20px);}
100%{opacity:1;transform: translateY(0);}}
.TitleCardAnim, .title-privacy
{opacity: 0;transform: translateY(20px);transition: all .66s}
.visible .TitleCardAnim,  .title-privacy.visible
{opacity: 1;transform: translateY(0);
transition-delay: .22s;}


.cardMax .contout
{position: relative;display: flex;
flex-direction: row;align-items: center;
justify-content: flex-start;gap: 40px;width: 100%;}
.cardMiniM .contout, .cardMini .contout 
{display: flex;flex-direction: column;
align-items: flex-start;width: 100%;gap: 20px;
pointer-events: inherit;}
.whatYouTakeBox
{display: flex;flex-direction: row;
gap: 25px;width: 100%;}
.cardMiniM.width30
{width: 50%;}
.cardMiniM.width70
{width: 50%;}
.SectionTitle2
{color: var(--color-text-dark);
font-size: 50px;
padding-bottom: 70px;}
.SectionTitle2
{padding-top: 100px;
text-align: center;}
.sectionBody
{width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
gap: 40px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 50px;}
.infoCostCard,
.costCard
{width: 100%;
display: flex;
flex-direction: column;
align-items: center;}
.costCard .labelCostProduck
{width: 300px;
margin: 0 auto 30px;
border-radius: var(--border-radius-mini-box);}
.labelColorBox
{position: relative;}
.labelColorBox.complect::before,
.labelColorBox::after
{  content: '';
position: absolute;
right: -25px;
top: 4px;
width: 13px;
height: 13px;
border-radius: 50%;}
.labelColorBox.complect::before
{right: -20px;background: var(--color-gray-darck);}
.labelColorBox.complect::after
{background: var(--color-text-dark);
right: -40px;}
.labelColorBox.black::after
{background: var(--color-text-dark);}
.labelColorBox.gray::after
{background: var(--color-gray-darck);}
.priceCostTitle{font-size: 48px;
line-height: 1.0834933333;
font-weight: 600;
letter-spacing: -0.003em;}

.height55{height: 55px;}
.costCard h4
{padding: 15px 0;}
.beforPrice
{font-size: inherit;
color: var(--color-red);
text-decoration: line-through;
font-family: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
padding-left: 10px;}
.CostPrice
{font-size: 17px;
width: 100%;
font-family: var(--font-family-Regular) sans-serif;
color: var(--color-darck-green);}
.iconInfoCard{
    width: 45px;
margin-bottom: 20px;}
.iconInfoCard.mini{
    width: 35px;}
.imgBoxCardCost 
{width: 100%;
height: 100%;
position: relative;}

.labelHoverProdukt
{position: absolute;
z-index: -1;
visibility: hidden;
width: 300px;
left: 50%;
border-radius: var(--border-radius-mini-box);
transform: translateX(-50%);}
.linlBoxMKPBot
{width: 100%;
height: 100%;
display: flex;align-items: center;
justify-content: center;gap: 40px;}
img.imgMkPlaceBot 
{width: 50px;
cursor: pointer;
margin: 20px 0;
transition: transform 0.66s cubic-bezier(0.075, 0.82, 0.165, 1);}

.labelHoverProdukt
{opacity: 0;visibility: hidden;
transition: opacity .33s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 1s linear}
.imgBoxCardCost:hover .labelHoverProdukt
{opacity: 1;visibility: visible;
transition:opacity .33s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 1s linear ;}

.costCard .labelCostProduck
{opacity: 1;visibility: visible;
transition:opacity .33s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 1s linear ;}
.imgBoxCardCost:hover .labelCostProduck
{opacity: 0;visibility: hidden;
transition: opacity .33s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 1s linear}

.vidbg06{
position: absolute;
width: 1400px;
left: 0px;
top: -120px;
-webkit-filter: brightness(105%);
filter: brightness(105%);
}
.linlBoxMKP
{display: flex;align-items: center;
justify-content: center;gap: 30px;}
.linlBoxMKPBot
{display: flex;align-items: center;
justify-content: center;gap: 30px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 30px;}
.imgMkPlace
{width: 200px;
transition: transform 0.66s cubic-bezier(0.075, 0.82, 0.165, 1);}
img.imgMkPlaceBot:hover,
.imgMkPlace:hover
{transform: scale(1.13);}
.faqBox
{max-width: 1085px;position: relative;cursor: pointer;
max-height: 70px;background: transparent;overflow: hidden;
margin: 0 auto;border-bottom: 1px solid var(--border-color);
transition: max-height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: max-height 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);}
.flip .CardTool.faq
{opacity: 0.45;}
.CardTool.faq
{position: absolute;
top: 17px;right: 9px;opacity: 0.77;
transition: transform .33s cubic-bezier(0.175, 0.885, 0.32, 1.275),
color 0.33s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.faqTitle
{font-size: 18px;line-height: 1.21053;
font-weight: 600;letter-spacing: .012em;
color: var(--color-text-dark);
font-family: var(--font-family-Regular);
opacity: 0.88;}
.contout.faq
{width: 100%;height: 70px;cursor: pointer;
display: flex;align-items: center;}
.faqTitleBlock
{max-width:1080px;margin: 0 auto;border-bottom: 1px solid var(--border-color);
padding:100px 0 60px 0;opacity: 0.88;}
.section.winth100{max-width: 100%;}
.faqBox.flip
{max-height: 320px;
transition: max-height 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: max-height 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
.contentInside.faq 
{display: flex;padding-bottom: 40px;
flex-direction: column;
align-items: start;gap: 10px;}
footer
{width: 100%; background: var(--color-gray-white);
padding:40px 15px;}
.legalCopirat , .legalSity, .footerLinkItem
{font-size: inherit;color: inherit;line-height: inherit;
font-weight: inherit;font-family: inherit;letter-spacing: inherit;}
.titleFooter
{width: 100%; display: flex;max-width: 1085px;margin: 0 auto;
flex-direction: row;align-items: center;justify-content: space-between;
font-size: 0.83rem;line-height: 1.33337;font-family: var(--font-family-Regular);
font-weight: 400;letter-spacing: -.01em;opacity: 0.5;}
.BottomFooter
{max-width: 1085px;display: flex;align-items: center;justify-content: flex-start;padding-top: 10px;
margin: 0 auto;font-weight: 300;font-family: var(--font-family-Regular);gap: 20px;font-size: 0.85rem;}
.footerLinkItem
{padding-right: 20px;  border-right: 1px solid var(--border-color);transition: var(--hover-trans);}

/* ========Политика конфиденциальности======= */
.title-privacy, .textPrivacy{
    max-width: 1080px;
    min-width: 320px;
    width: 100%;
    padding: 100px 15px 50px 15px;
    margin: 0 auto;
}

.titleBox
{background: linear-gradient(58deg, var(--color-darck-green) 30%,var(--color-text-dark) 60%);
-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: var(--color-text-dark);
background-size: 1400px;background-position: -506px;animation:BgPosition 5s cubic-bezier(0.075, 0.82, 0.165, 1) .66s forwards;}
@keyframes BgPosition
{0%{background-position: -506px;}
100%{background-position: 66px;}}
.textPrivacy
{font-size: 18px;font-family: var(--font-family-Regular);
line-height: 1.33337;padding: 0 15px 20px 15px;
letter-spacing: -.01em; opacity: 0.7;color: var(--color-text-dark);}
.textPrivacy span
{color: var(--color-darck-green);font-weight: 600;}
.textPrivacy:last-child
{padding-bottom: 50px;}
/*========== кнопка назад =========*/
.LinkBackBtn
{position: fixed;cursor: pointer;
left: 40px; bottom: 40px;}
.BtnBackBox
{width: 40px;height: 40px;background: linear-gradient(58deg, var(--color-darck-green) 10%,var(--color-text-dark) 60%);
border-radius: 50%;cursor: pointer;transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
background-size: 200px;
background-position: -60px;}
.BtnBackBox:hover
{background-position: 0px;transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1)}
.BackBtnicon
{width: 40px;height: 40px;padding: 12px 12px 12px 10px;
color: var(--color-text-white);}

/*========== Галерея до после =========*/
.galleriBox
{width: 540px;margin: 0 auto;position: relative;left: 0;}

/* как накачать скулы */
.colortetx{
    color: var(--color-text-green);
}



.titleFirscScreen h1, .logo.white
{color: var(--color-text-white);}
.titleFirscScreen h2, .navItem.white
{color: var(--color-gray-white);}
.menu.Borderwhite
{border-color: var(--footer-border-color);
display: flex;justify-content: center;}
.scroll .logo.white{
    color: var(--color-text-dark);
}
.scroll .navItem.white
{color: var(--color-gray-darck);}

.textBlockBox
{display: flex;gap: 40px;max-width: 600px;
margin: 0 auto;
flex-direction: column;align-items: center;}

.TitleContentPage{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.ContentPageBody{
    width: 100%;
    height: 100%;
    display: flex;
    margin: 0 auto;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.miniCardcontent
{width: 348px;height: 280px;
position: relative;display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;padding: 30px;
border-radius: var(--border-radius-max-box);
overflow: hidden;background: #00000088;
cursor: pointer;}
.miniCardcontent.max
{height: 375px;
background: #00000015;}
.TitleMiniCard, .FooterMiniCard
{width: 100%;display: flex;
align-items: flex-start;
justify-content: space-between;
color: var(--color-text-white);}
.miniCardTool
{width: 35px;height: 35px;
padding: 5px;opacity: 0.66;
cursor: pointer;transition: var(--hover-trans);}
.miniCardBG.im6
{bottom: 0;left: -35px;width: 445px;}

.miniCardBG
{position: absolute;left: 0;
bottom: -60px;width: 375px;
z-index: -1;transform: scale(1);
transition: transform .66s cubic-bezier(0.075, 0.82, 0.165, 1);}
.miniCardBG.Max
{width: 460px;left: -59px;top: 0;}
.imgBoxGymTool
{padding: 20px 0;}
.miniCardcontent:hover .miniCardBG
{transform: scale(1.1);}
.FlipTextCard.Flex
{display: flex;align-items: center;
gap: 30px;color: var(--color-blue);
opacity: 1;transform: translateY(0);}
.textBlockPage{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: 30px;
}
.blue .color-accent{color: var(--color-blue);}
.DarckGreen .color-accent{color: var(--color-darck-green);}
.red .color-accent{color: var(--color-red);}
.orang .color-accent{color: var(--color-orang);}
.blue .labelCardTextBlockPage{
    background-color: var(--color-blue-opacity);
    right: 0px;
    width: 440px;
    padding: 39px;
    height: 220px;
}
.imgFirsScreen{
    width: 100%;
    filter: brightness(40%);
}
.contentBox {
    width: 100%;
}
.titleFirscScreen{
    width: 100%;
    transform: translateX(-50%);
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
    bottom: 30%;
}
.imagesBoxContent{
    max-width: 1920px;
    min-width: 365px;
    margin: 0px auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.white.t{
    color: var(--color-text-white);
}
.DarckGreen .labelCardTextBlockPage{background-color: var(--color-gray-white);}
.red .labelCardTextBlockPage{background-color: var(--color-red-opacity);}
.textBlockPage .miniTextBlockPage{max-width: 620px;}
.labelCardTextBlockPage{
    width: 480px;
    height: 240px;
    border-radius: var(--border-radius-max-box);
    padding: 50px;
    position: absolute;
    right: 10px;
    top: 18px;
}
.labelCardTextBlockPage.max{
    height: 300px;
    width: 420px;
    padding: 49px;
}
.labelCardTextBlockPage.bot0{
    padding: 0;
    height: 300px;
    width: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.anatimiImg.man{width: 422px;}
.labelCardTextBlockPage.anatomi{
    height: 500px;
    width: 410px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    right: 10px;
}
.anatimiImg{width: 320px;}

.videoCobtainerBody
{display: flex;
align-items: center;
justify-content: center;
flex-direction: row;gap: 20px;}
.section.orang
{background: var(--color-golden-opacity);}
.imgBoxGymTool
{display: flex;
flex-direction: row;gap: 20px;
align-items: center;justify-content: center;}
.anatimiImg.max
{width: 370px;}
.labelCardTextBlockPage .preText
{position: absolute;
top: 10px;}
.colorBlue
{color: var(--color-blue);}

/* как тренироваться */
/* главная страница */






.width140
{width: 140px;
height:60px ;
white-space:unset;}

/* форма отправки */
.contoutform
{background: var(--color-text-white);
margin: 0 40px;padding: 60px;
border-radius: var(--border-radius-max-box);
display: flex;flex-direction: row;width: calc(100% - 80px);
align-items: center;margin-bottom: 50px;}
.blue{width: 100%;}
.blue .color-accent
{color: var(--color-blue);}
.formFightItem
{display: flex;flex-direction: column;gap: 30px;
align-items: flex-start;width: 100%;}
.form
{gap: 10px;width: 100%;
display: flex;flex-direction: column;
align-items: flex-start;}
input
{width: 100%;border-bottom: 1px solid var(--border-color);
height: 45px;display: block;padding-left: 10px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;margin: 0;}
.BtnFormBox
{display: flex;flex-direction: row;gap: 20px;width: 100%;}
.loadBtn
{width: 50%;height: auto;
padding: 30px;display: flex;
flex-direction: column;
align-items: center;
justify-content: center;gap: 10px;
border-radius: var(--border-radius-mini-box);
background: var(--color-opacity-purple);
cursor: pointer;}
.loadBtn:hover .iconDownload{transform: scale(1.2);}
.iconDownload
{width: 50px;height: 50px;
padding: 10px;color: var(--color-blue);
transform: scale(1);
transition: transform 0.33s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.submitBtnForm
{width: 100%;height: 100%;min-height: 60px;
border-radius: var(--border-radius-mini-box);
background: var(--color-blue);max-height: 80px;
color: var(--color-text-white);font-size: 18px;
font-family: var(--font-family-Regular);
cursor: pointer;}
.infoBox{   
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    justify-content: flex-end;}
.Moneysubmited
{display: flex;flex-direction: column;
align-items: flex-start;gap: 10px;
width: 100%;}
.cursorOff
{cursor: auto;}

/* Как это работат */
.red.color-accent
{color: var(--color-black-red);}
.orang.color-accent
{color: var(--color-orang);}
.green .color-accent
{color: var(--color-text-green);}
.darckgreen .color-accent
{color: var(--color-darck-green);}
.widthContentCard{
    max-width: 1084px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
}
.widthContentCard.sw{
    max-width: 1084px;
}
.flexBoxContent
{display: flex;
gap: 40px;
align-items: center;
width: 100%;
height: 100%;
flex-direction: row;}
.textBoxContent, .flexBoxTextContent, .flexBoxOnlyTextInfo
{display: flex;
flex-direction: column;align-items: start;
gap: 30px;width: 100%;height: 100%;}
.imgBoxContent
{display: flex;right: 20px;
flex-direction: column;
align-items: flex-end;
position: relative;gap: 20px;
justify-content: center;
width: 100%;height: 100%;}
.ContentImages
{width: 300px;position: relative;
border-radius: var(--border-radius-mini-box);}
.imgBoxContent::before
{content: '';
width: 300px;
height: 533.33px;
position: absolute;
right: -20px;
top: -20px;
border-radius: var(--border-radius-mini-box);}
.red .imgBoxContent::before
{background: var(--color-gray-darck);}
.imgBoxContent.minHeight::before
{height: 395.33px;}
.FlexCardOnlytText
{display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 110px;width: 100%;height: 100%;}
.flexBoxOnlyTextContent
{display: flex;flex-direction: column;
gap: 40px;width: 100%;}
.flexBoxOnlyTextInfo
{gap: 20px;}
.infoTextCostCard.relative
{position: relative;
left: -60px;}
.FlexCardBg{
    max-width: 497px;
    min-width: 320px;
    width: 100%;
    position: relative;
    height: 220px;
    max-height:220px;
    height: 100%;
    padding: 25px;
    border-radius: var(--border-radius-mini-box);
    background: var(--color-gray-white);
}
.titleFlexCardWrapper
{display: flex;flex-direction: column;
gap: 15px;max-width: 270px;margin-left: 35px;}
.imgFlexCardWrapper
{display: flex;
flex-direction: row;
width: 100%;
justify-content: flex-end;}
.imgWrapper
{width: 90px;border-radius: 10px;}
.FlexNameStepText
{position: absolute;
top: 25px;
left: 25px;
font-size: 14px;
opacity: 0.7;
font-weight: 600;}
.FlexNameStepText::after
{content: '';
width: 1px;
height: 80px;
background: var(--border-color);
position: absolute;
left: 9px;
top: 31px;}
.FlexWrapperCard{
    display: flex;
    flex-wrap: wrap;
    gap: 90px;
    width: 100%;
    height: 100%;
    justify-content: center;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: all 0.66s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: .30s;
}
.flip .FlexWrapperCard{
    opacity: 0;
    pointer-events: none;
    transform: translateY(40px);
    transition-delay: 0s;
}
.FlexWrapperCard.lite{
    left: 0;
    top: 0;
    height: 526px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(40px);
    transition-delay: 0s;
}
.flip .FlexWrapperCard.lite{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.30s;
    
}
.toolgym{
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-blue);
    margin-bottom: 30px;
}
.toolg001{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.tollg002 h6{
    font-size: 18px;
    padding: 6px 35px;
    background-color: var(--color-blue);
    border-radius: var(--border-radius-mini-box);
    color: var(--color-text-white);
    cursor: pointer;
}
.tollg002.l02 h6{
    background-color: var(--color-gray-white);
    color: var(--color-gray-darck);
}
.flip .tollg002 h6{
    background-color: var(--color-gray-white);
    color: var(--color-gray-darck);
}
.flip .tollg002.l02 h6{
    background-color: var(--color-blue);
    color: var(--color-text-white);
}
.anim.one.blue{color: var(--color-blue);}
.menu .mobilemenu {
    flex-direction: row;}
.mobmenbtn{
    width: 30px;
    height: 30px;
    background: transparent;
    position: relative;
    border-radius: 50%;
    transition: all 0.66s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.mobmenbtn::before, .mobmenbtn::after{
    content: '';
    width: 11px;
    height: 1px;
    background: var(--color-text-white);
    position: absolute;
    top: 51%;
    transform-origin: center;
    transform: translate(center);
    transition: all 0.66s cubic-bezier(0.19, 1, 0.22, 1)}
.mobmenbtn::before{
    transform: rotate(45deg);
    left: 6px;}
.mobmenbtn::after{
    transform: rotate(-45deg);
    right: 5px;}
.opMe .mobmenbtn::before{
    transform: rotate(-45deg);
    left: 6px;
    background-color: var(--color-gray-darck);}
.opMe .mobmenbtn::after{
    transform: rotate(45deg);
    right: 5px;
    background-color: var(--color-gray-darck);}
.scroll .mobmenbtn::before, .scroll .mobmenbtn::after{
    background-color: var(--color-text-dark);}
.mobmenbtn.darck::before, .mobmenbtn.darck::after{
    background-color: var(--color-text-dark);
}
.preTitleHowTrain{
    padding: 15px 15px 40px 15px;
    color: var(--color-gray-darck);
    font-family: var(--font-family-Regular);
    font-weight: 400;
}
.menu .mobilemenu, .galletyIcon, .bgmob003{
    display: none;
}
/* попап контакты */
.popUPContacts{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;
    left: 0;right: 0;
    bottom: 0;top: 0;
    backdrop-filter: blur(7px);
    justify-content: flex-end;
    padding: 30px 20px;
}
.closBtnContacts{
    width: 100%;
    max-width: 400px;
    min-width: 320px;
    min-height: 60px;
    background: var(--color-text-white);
    border-radius: 15px;
    color: var(--color-blue);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.ContactsBody{
    width: 100%;
    max-width: 1020px;
    min-width: 320px;
    background: linear-gradient( #e2e2e4, #e2e2e2);height: 200px;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1);
}
.titleContacts{
    width: 100%;
    font-size: 1.6em;
    padding: 15px;
    font-family: var(--font-family-Medium), sans-serif;
    border-bottom: 1px solid #8d8d8f;
    gap: 5px;
}
.textGray{
    color: var(--color-gray-darck);
}
.iconContact{
    display: flex;
    align-items: center;
    gap: 20px;
}
.iconContacts{
    width: 50px;
    height: auto;
}
.overhidden{
    overflow: hidden;
}
.animPopUp{transform: scale(0);opacity: 0;z-index: -5;
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.2s;}
    .flip .animPopUp{transform: scale(1);opacity: 1;z-index: 5;
    transition: transform 0.23s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0.33s;}
    .popUPContacts, .infoPopupBg{opacity: 0;z-index: -20;pointer-events: none;
    transition:backdrop-filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.3s, z-index 0.3s;}
    .popUPContacts.flip, .infoPopupBg.flip {opacity: 1;z-index: 120;pointer-events: auto;
    transition:backdrop-filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.3s;}
    
/* попап контакты */
.section.Form{
    background: var(--color-text-white);
    border-radius: var(--border-radius-max-box);
    height: 100%;
}
.contentOutsideform{
    display: flex;
    gap: 10px;
    align-items: center;
}
.titleImgHowTrain{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: -100px;
    display: flex;
    flex-direction: column;
    align-items:  center;
    justify-content: center;
}
.images01{
    min-width: 425px;
    -webkit-filter: contrast(105%) brightness(108%);
    filter: contrast(105%) brightness(108%);
}
.collitem{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.formFightItem label.focus {	
    outline: 1px solid #0078d7;
    -webkit-outline: 1px solid #0078d7;
    outline: -webkit-focus-ring-color auto 5px;
}
#upload-container.dragover {
    background-color: #fafafa;
    outline-offset: -17px;
}


.bgmob003{
    left: 0;
    top: 0;
    z-index: 10;
}
.bgmob003.s003, .bgmob003.s004,.bgmob003.s005{
    z-index: -1;
}
.animhid{
    animation: scriingallery 3s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
    animation-delay: 7s;
}
@keyframes scriingallery
{
    0%{opacity: 0;z-index: -1;}30%{z-index: 1;opacity: 1;}
    70%{z-index: 1;opacity: 1;}100%{opacity: 0;z-index: -1;}
}

.formFightItems.preloader_active .formFightItem{
    filter: brightness(120%) blur(15px);
    pointer-events: none;
}
.formFightItems.preloader_active::before{
    content: '';
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    left: 45%;
    box-sizing: border-box;
    top: 50%;
    transform-origin: center;
    border: 5px solid blue;
    border-bottom-color: var(--color-blue-opacity);
    animation:circleload 1s linear infinite ;
    z-index: 5;
}
@keyframes circleload {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.formFightItems.success .sucessBox{
    z-index: 100;
    opacity: 1;
    transition: all 0.66s cubic-bezier(0.075, 0.82, 0.165, 1);
    pointer-events: auto;
    animation: successOff 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 5s;
}
@keyframes successOff {
    0%{}100%{opacity: 0;z-index: -2;pointer-events: none;}
}
.sucessBox{
    position: absolute;
    left: 0;top: 0;
    background: var(--color-text-white);
    z-index: -2;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;pointer-events: none;
    transition: all 0.66s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.imgSuccess{
    width: 105px;
    height: auto;
    margin-bottom: 45px;
}




@media only screen and (max-width: 1131px){
    .FlexWrapperCard
    {
        gap: 40px;
    }
}
@media only screen and (max-width: 1024px){

    .form-box{
        flex-direction: column !important;
    }

    .sectionBody{
        flex-wrap: wrap;
    }
    .titleImgHowTrain{
        top: 20px;
    }
    .bgvideo01, .s002{
        max-width: 900px;
        min-width: 600px;
    }
    .tPgtext{
        min-width: 900px;
        gap: 65px;
    }
    h1{
        font-size: 70px;
    }
    .tleft{
        margin-bottom: 400px;
    }
    .flexBoxContent{
        flex-direction: column;
    }
    .imgBoxContent{
        align-items: center;
    }
    .infoTextCostCard.relative{
        left: 0;
    }
    .imgBoxContent::before{
        left: 52.5%;
        transform: translateX(-50%);
    }
    .videoCobtainerBody, .imgBoxGymTool{
        margin: 0 auto;
        flex-direction: column;
    }
    iframe{
        width: 100%;
    }
    .labelCardTextBlockPage, .labelCardTextBlockPage.bot0, .labelCardTextBlockPage.anatomi, .labelCardTextBlockPage.max,.blue .labelCardTextBlockPage{
        position: relative;
        left: 0;
        right: 0;
        max-width: 600px;
        min-width: 320px;
        width: 100%;
        padding: 30px;
    }
    .blue .labelCardTextBlockPage, .labelCardTextBlockPage.max{
        height: 100%;
    }
}
@media only screen and (max-width: 800px){
    h1{
        font-size: 60px;
    }
    .tleft {
        margin-bottom: 310px;
    }
    .tright {
        margin-top: 160px;
    }
    .traintext {
        padding-bottom: 0px;
        padding-top: 60px;
    }
}
@media only screen and (max-width: 720px){

    .img-hero-item {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    .explanation-conten-rewiews{
        flex-direction: column !important;
        align-items: center;
    }
    .explanation-content.non-mob{
        display: none;
    }
    .explanation-content.mobile{
        display: flex;
    }

    .CardTool.white, .CardTool.darck{
        bottom: 20px;
        right: 20px;
        color: var(--color-text-dark);
    }
    .bgvideo01 {
        display: none;
    }
    .bgvideo001{
        display: flex;
        width: 100%;
        min-width: 585px;
        max-width: 1080px;
        -webkit-filter: contrast(95.2%);
        filter: contrast(95.2%);
    }
    .phoneVideo5{
        -webkit-filter: brightness(99.5%) contrast(95%);
    }

    .images01 {
        -webkit-filter: contrast(95%) brightness(103%);
        filter: contrast(95%) brightness(103%);
    }
    .LinkBackBtn{
        bottom: 25px;
        left: 25px;
    }
    .bgvideo01 {
        min-width: 590px;
    }
    .s002{
        min-width:345px;
    }
    .tPgtext{
        gap: 40px;
    }
    .tright {
        margin-top: 120px;
    }
    .pad015{
        padding: 0;
    }
    .ContentImages.cs005{
        width: 200px;
    }
    .imgBoxContent{
        right: 0;
    }
    .FlexWrapperCard{
        gap: 40px;
    }
    .FlexCardOnlytText{
        flex-direction: column;
        gap: 40px;
    }
    .contentOutsideform{
        flex-direction: column;
        gap: 40px;
    }

    .tollg002 h6{
        font-size: 15px;
        padding: 6px 25px;
    }
    .mobHidden, .bgmob003{
        display: none;
    }
    .flcolmob{flex-direction: column;}
    .card{max-width: 345px;}
    .pad60{padding:50px 30px;}
    h3{font-size: 40px;}
    h4{font-size: 19px;}
    p{font-size: 17px;
        line-height: 1.2941176471;
        font-weight: 400;
        letter-spacing: -0.022em;
    }
    .cpalitcenmob{flex-direction: column;align-items: start;}
    .height700{height: 620px;}
    .height650{height: 620px!important;}
    .vidbg06{width: 1017px; left: -320px;top: 0px;}
    .imgMkPlace{width: 120px;}
    .imgBg06{
        width: 200%;
        left: -164px;
        top: -27px;
    }
    .phoneVideo5 {
        min-width: 710px;
        bottom: -25%;
    }
    .imgBg05{min-width: 320px;}
    .flRow {display: flex;flex-direction: column;}
    .h3mini{font-size: 28px;}
    .height760{height: 540px;}
    .imgBg04 {
        width: 110%;
        right: -16px;
        bottom: 0px;
    }
    .imgbg004{
        right: -95px;
        bottom: -70px;
        width: 150%;
    }
    .galletyIcon{
        display: block;
    }
    .imgBg03 {
        width: 100%;
        left: 0px;
        bottom: -10%;
        z-index: 0;
    }
    .hei520mob{height: 520px;}
    .vidbg02{
        display: none;
    }
    .vidbg003{
        display: flex;
        width: 140%;
        top: -280px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-filter: contrast(85%) brightness(104%);
        filter: contrast(85%) brightness(104%);
    }
    .gap25 {gap: 15px;}
    .CardTool.whmob{color: var(--color-text-white);}
    .imageBeforAfter, .gellary-slide{width: 320px !important;}
    .galleriBox {
        width: 320px;
        margin: 0 auto;
        position: relative;
        left: -18px;
    }
    .gap40{gap:33px}
    .slide{width: 100%;}
    .ovismob{overflow: visible;}
    .priceCostTitle{font-size: 37px;}
    .sectionBody{    
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: 345px;
        gap: 40px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .paddingFront{padding: 25px;}
    .iconInfoCard{width: 40px;}
    .iconInfoCard.mini{width: 30px;}
    .footerBox{max-width: 345px;margin: 0 auto;}
    .CardTool.faq {
        position: absolute;
        top: 10px;
        right: 0px;
        opacity: 0.77;
        transition: transform .33s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.33s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        width: 20px;
    }
    .contout.faq, .faqBox{max-height: 50px;}
    .faqTitle{font-size: 12px;opacity: 1;color: var(--color-gray-darck);font-weight: 400;}
    .faqBox.flip{max-height: 500px;}
    .contentInside.faq{padding-bottom: 15px;}

    h1{font-size: 35px;}
    .navItem{display: none;}
    .menu{margin: 0 15px;}
    .tCentr{font-size: 35px;top:42%}
    .vidbg01{width: 152%;}
    h2{font-size: 21px;}
    .btnSupport{font-size: 0.6em;}
    .faqTitleBlock{
        padding: 40px 0 60px 0;
    }
    .btnSupport{
        font-size: 1em;
        padding: 8px 30px;
    }
    .menu .mobilemenu{
        display: block;
    }
    .menu{
        margin: 0 15px;
    }
    .btnBoxSupport {
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }

    .galletyIcon{
        width: 30px;
        height: 30px;
        color: var(--color-text-dark);
        transform: rotate(45deg);
        bottom: 270px;
        left: 250px;
        background: var(--color-text-white);
        border-radius: 50%;
        padding: 4px;
        opacity: 0.6;
        pointer-events: none;}
}
@media only screen and (max-width: 500px){

    .textsit{
        font-size: 33px;
    }
    .contentBoxHowTrainFirstScreen{
        height: 680px;
    }
    .fromText {
        font-size: 35px;
    }
    .imgSuccess {
        width: 75px;
        height: auto;
        margin-bottom: 35px;
    }
    .contentBox{
        height: 100%;
    }
    .section.s01{
        height: 100vh;
    }
    .bgmob003{
        display: block;
        width: 100%;
        filter: brightness(20%);
        animation: braitnes 15s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
        animation-delay: 1.3s;
    }
    @keyframes braitnes {
        0%{}100%{filter: brightness(80%);}
    }
    .imgFirsScreen{
        display: none;
    }
    .titleFirscScreen {
        bottom: 65px;
    }
    .textligt01{
        font-family: var(--font-family-Regular);
        font-weight: 400;
        font-size: 15px;
        opacity: 0.7;
    }
}
@media only screen and (max-width: 380px){
    .tPgtext {
        gap: 20px;
    }
    .tright {
        margin-top: 90px;
    }
    .tleft {
        margin-bottom: 330px;
    }
    .tCentr {
        top: 45%;
    }
    .anim{
        opacity: 0;
        transition: opacity 0s
    }
    .visible .anim{
        opacity: 1;
        transition: opacity 1.8s cubic-bezier(0.165, 0.84, 0.44, 1)}
    .visible .anim.one{
        transition-delay: 4.4s;
    }
    .visible .anim.twy{
        transition-delay: 4.43s;
    }
    .visible .anim.three{
        transition-delay: 4.46s;
    }
    .visible .anim.m{
        opacity: 1;
        transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)}
    .visible .anim.one.m{
        transition-delay: 0.4s;
    }
    .visible .anim.twy.m{
        transition-delay: 0.43s;
    }
    .visible .anim.three.m{
        transition-delay: 0.46s;
    }
    .flexBoxContent{
        gap: 60px;
    }
    .imgWrapper {
        width: 70px;
        border-radius: 6px;
    }
    .FlexWrapperCard{
        gap: 20px;
    }
    .McPlaceBox{
        gap: 25px;
    }
    .BtnFormBox{
        flex-direction: column;
        align-items: center;
    }
    .loadBtn, .infoBox{
        width: 100%;
    }
    @keyframes BgPosition
    {0%{}
    100%{background-position:-440px;}}
    .miniCardcontent{
        max-width: 375px;
        min-width: 346px;
        width: 100%;
    }
    .miniCardBG.Max{
        width: 400px;
    }
    .miniCardcontent.max{height: 335px;
    }

}

@media only screen and (max-width: 360px){
    .menu, .card{
        min-width: 320px;
    }
}