/*!
Theme Name: Ultradeep Theme
Author: Ultradeep Theme
Version: 1.0.0
*/

@font-face {
    font-display: swap;
    font-family: 'Test Founders Grotesk';
    src: url('fonts/Test Founders Grotesk 400.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'Test Founders Grotesk';
    src: url('fonts/Test Founders Grotesk Medium 500.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'Test Founders Grotesk';
    src: url('fonts/Test Founders Grotesk SmB 600.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'Test Founders Grotesk';
    src: url('fonts/Test Founders Grotesk Bold 700.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --main-color:#43AE28;
    --main-color-hover:#EDC543;
    --margin-bt:130px; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
	display: block;
}

ul, li {
    list-style: none;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.container {
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    position: relative;
}

p {
    margin-bottom: 30px;
}

h1 {
    font-weight: 600;
    font-size: 70px;
    margin-bottom: 40px; 
}

 

h2 { 
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 35px;
    line-height: 1;
}

.btn {
    align-items: center;
    justify-content: space-between;
    color: var(--main-color);
    border-radius: 90px;
    height: 45px;
    font-size: 15px;
    display: inline-flex;
    padding: 0 25px;
    cursor: pointer;
    font-weight: 500;
    transition: all .3s;
    border: 1px solid var(--main-color);
    gap: 10px;
    background: transparent;
    font-family: 'Test Founders Grotesk';
    line-height: 1;
    text-transform: uppercase;
}

.btn:hover {
    background: var(--main-color); 
    color: #fff;
}

.btn svg, .btn svg path  {
    transition: all .3s;
}

.btn:hover svg path {
    fill: #fff;
}

.more-btn {
    border-color: #120609;
    color: #120609;
    width: 100%;
    justify-content: center;
}

.more-btn:hover {
    background: var(--main-color); 
    color: #fff;
    border-color: var(--main-color);
}


*::-webkit-scrollbar {
    -webkit-appearance: none;
    cursor: default;
}

*::-webkit-scrollbar:vertical {
    width: 4px;
    cursor: default;
}

*::-webkit-scrollbar:horizontal {
    height: 4px;
    cursor: default;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    cursor: default;
}

*::-webkit-scrollbar-track {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    background-color: #EFEFEF;
    cursor: default;
}

.breadcrumbs {
    margin-bottom: 50px; 
}

.breadcrumbs a:hover {
    color: var(--main-color); 
}

.breadcrumbs .container>div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

 .swiper-pagination {
    position: relative;  
    margin: 0;
    bottom: auto;
    top: auto;
}
 
.slide-nav .swiper-button-prev, .slide-nav .swiper-button-next {
    left: auto;
    position: relative;
    margin-top: 0;
    top: auto;
    right: auto;
    user-select: none;
}

.swiper-button-next, .swiper-button-prev {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #A5A5A5;
    user-select: none; 
}

.swiper-button-next:hover, .swiper-button-prev:hover { 
    background: var(--main-color);
}

.swiper-button-next:after, .swiper-button-prev:after {
    content: none;
}

.slide-nav {
    display: flex;
    column-gap: 7px;
    margin-left: auto;
    align-items: center;
}

.slide-nav span {
    width: 1px;
    height: 30px;
    background: var(--main-color);
    display: block;
}


html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Test Founders Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.4;    
    font-weight: 400;
    color: #120609;
    overflow-x: hidden;  
}

header {
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 99;
}

header .container {
    display: flex;
    background: #fff;
    padding: 7px 7px 7px 20px;
    border-radius: 90px;
    align-items: center;
    gap: 10px;
}

.header__logo {
    margin-right: auto;
}

header .btn{ 
    background: #120609;
    color: #fff; 
}

header .btn {
    background: #120609;
    border: 1px solid #120609;
    color: #fff;
    height: 36px;
}

header .btn:hover { 
    border: 1px solid var(--main-color);
}

.menu {
    display: flex;
    gap: 30px;
    margin-right: 30px;
}

.menu__two-images {
    background: url(img/menu.jpg) no-repeat;
    background-size: cover;
}

.menu__container {
    width: 490px;
    position: absolute;
    top: calc(100% - 1px);
    left: -195px;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: 0.2s;
    transition: 0.2s; 

}

.menu > li:hover .menu__container {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

.menu > li:has(.menu__container) {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 8px auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: relative;
    z-index: 3;
}

.menu>li>a {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
}

.menu-arrow { 
    display: flex;
}

.menu__two-images img {
    transition: opacity 0.3s ease;
}

.menu__two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    border-radius: 30px;
    overflow: hidden;    
    background: #FFFFFF;
    border-radius: 30px;    
    box-shadow: 0px 0px 30px 0px #00000033;
}

.menu__two-images img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.menu__two-links {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 8px;
}

.menu__two-links a {      
    color: #120609;
    font-size: 15px;
    transition: all .3s;
}

.menu__two-links a:hover {
    color: var(--main-color);
}

.menu__two-links a span {
    width: 0;
    display: inline-block;
    opacity: 0;
    transition: all .3s;
}

.menu__two-links a:hover span {
    width: auto;
    display: inline-block;
    opacity: 1;
    padding-right: 5px; 
}

.menu-top-arrrow {
    text-align: center;
    padding-top: 10px;
}

.menu>li>a:hover {
    color: var(--main-color);
}

.search-form{
    position: relative;
    height: 36px;
}

.search-field {
    border: 1px solid #A6A6A6;
    border-radius: 20px;
    height: 36px;
    width: 100%;
    font-size: 16px;
    font-family: 'Test Founders Grotesk';
    padding: 0 35px;
    position: relative;
    transition: all .5s;
}

.btn-search {
    border: 0;
    background: transparent;
    position: absolute;
    top: 50%;
    right: calc(100% - 25px);
    transform: translateY(-50%);
    transition: all .5s;
    pointer-events: none;
    height: 14px;
}

.search-field:focus ~ .btn-search {    
    right: 16px;
    pointer-events: auto;
}

.search-field:not(:focus) ~ .btn-search svg path {
    fill: #C9C6CE;
}

.search-field:focus {   
    padding: 0 30px 0 16px;
}

header .search {
    width: 210px;
}

.blank-page {
    padding-bottom: var(--margin-bt);
}

.search-items {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.search-item {
    transition: all .3s;
}

.search-item:hover {
    color: var(--main-color);
}

.header__burger {
    display: none;
}

.nav-mob {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    transform: translateX(150%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    padding: 40px;
    max-width: 400px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.nav-mob.open {
    transform: translateX(0);
}
.nav-mob  .btn {
    background: #120609;
    border: 1px solid #120609;
    color: #fff;
    height: 36px;
    width: 140px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    transition: 0.3s ease-in-out;
}

.nav-mob-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.header-search-mob {
    margin-bottom: 40px;
}

.mob-navigation {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    margin-bottom: 25px;
}

.mob-navigation>li>a{
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.mob-navigation>li>.sub-menu {
    position: relative;  
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto; 
    display: none;
    background: #FFFFFF;  
    grid-column: span 2;
    order: 2;
}

.mob-navigation>li>.sub-menu li {
    padding: 5px 0;
}

.submenu-button {
    order: 1;
    width: 8px;
    height: 8px;
    display: flex;
} 

.mob-navigation>li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px;
}

.submenu-button.submenu-opened ~ a {
    color: var(--main-color);
}
.submenu-button.submenu-opened svg path {
    fill: var(--main-color);
}


/* home */

.about-row {
    display: grid;
    grid-template-columns: 525px 1fr;
    gap: 105px;
}

.subtitle {
    margin-bottom: 25px;
}

.subtitle span {
    height: 30px;
    background: #F4F4F4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border-radius: 90px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase; 
}

.about-text>*:last-child {
    margin: 0;
}

.about-text {
    margin-bottom: 20px;
}

.about-text2 {
    color: var(--main-color);
}

.about-text2 span{
    display: block;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 10px;
}

.about-text2 p {
    margin-bottom: 20px;
}

.about-img img {
    border-radius: 30px;
}

.about {
    padding-bottom: var(--margin-bt);
}

.academy-home h2 + p  {
    font-size: 24px;
    margin-bottom: 60px;
}

.card h2 + p {
    font-size: 24px;
    margin-bottom: 45px;
}

.academy-home .core-item {
    display: block;
}

.academy-home .subtitle span, .card .subtitle span {
    background: #fff;
}

.video-slide-box {
    margin-bottom: var(--margin-bt);
    position: relative;
}

.video-slide-nav-box {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: 50px;
    z-index: 9;
    display: flex;
    justify-content: end;
    left: 0;
    right: 0;
}

.video-slide-item {
    height: 700px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding-bottom: 150px;
}

.video-slide-item::before {
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) -3.16%, #000000 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: .5;
}

.main-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.video-slide-container {
    position: relative;
    z-index: 1;
}

.video-slide-title {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1;
}

.video-slide-text {
    color: #fff;
    font-size: 24px;
    margin-bottom: 25px;
}

.video-slide-nav {
    background: #120609;
    width: 420px;
    height: 34px;
    border-radius: 90px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 20px;
}

.video-slide-nav .video-pagination {
    padding: 0;
    margin: 0;
    top: auto;
    gap: 5;
    bottom: auto;
    display: flex;
}

.swiper-pagination-bullet {
    position: relative;
    flex: 1;
    height: 2px;
    background: #212121; 
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
    margin: 0;
    opacity: 1;
}

.swiper-pagination-bullet-progress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: var(--main-color);
    border-radius: 4px;
    transition: width 0.1s linear;
    height: 100%;
    z-index: 1;
}

.video-slide-nav .swiper-button-next, .video-slide-nav .swiper-button-prev {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    user-select: none;
}

.video-slide-nav .swiper-button-next:hover, .video-slide-nav .swiper-button-prev:hover { 
    background: var(--main-color); 
}

.video-slide-btn .btn {
    background: var(--main-color);
    color: #fff;
    justify-content: center;
    width: 200px;
}

.video-slide-btn .btn:hover {
    background: var(--main-color);
    color: #fff;
    justify-content: center;
    width: 200px;
}

.video-slide-btn .btn:hover {
    background: #fff;
    color: #120609;
    border-color: #fff;
}

.video-slide-btn .btn:hover svg path {
    fill: #120609;
}

/* page */

.hero-page {
    height: 700px;
    position: relative;
    padding: 300px 0 50px;
    overflow: hidden;
    margin-bottom: var(--margin-bt);
}

.page-template-cases .hero-page, 
.page-template-news .hero-page { 
    margin-bottom: 50px;
}

.hero-page::before {
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) -3.16%, #000000 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: .5;
}

.hero-fallback {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    user-select: none;
}

.hero-container {
    z-index: 2;
    height: 100%;
    color: #fff;
    font-size: 24px;
}

.hero-page h1 {
    color: #FFFFFF;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 15px;
}

.hero-benefit {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: auto;
}

.benefit-item {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(18, 6, 9, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 30px;
}

.benefit-item p {
    color: #fff;
    font-size: 18px;
    margin: 0;
    padding-right: 30px;
    padding-top: 5px;
}

.benefit-item-top {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 30px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    gap: 15px;
}

.hero-flex { 
    display: flex;
    flex-direction: column;
}

.text-block, .why, .core, .team {
    margin-bottom: var(--margin-bt);
}

.text-block-row {
    display: grid;
    grid-template-columns: 1fr 785px;
    gap: 105px;
}

.text-block-row.two-img {
    grid-template-columns: 1fr 790px;
    gap: 50px;
}

.text-block-row3 {
    display: grid;
    grid-template-columns: 790px 1fr;
    gap: 50px;
}

.text-block-row.row-video {
    grid-template-columns: 1fr 790px;
    gap: 50px;
}

/* .text-block-img {
    display: flex;
    gap: 20px;
} */

.two-img .text-block-img {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}

.container.text-block-row2 {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 50px;
    align-items: center;
}

.text-block-img img {
    border-radius: 30px;
}

.content>*:last-child {
    margin: 0;
}

.content h3 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1;
}

.why-item, .core-item {
    background: #fff;
    padding: 25px;
    border-radius: 30px;
    border: 1px solid rgba(224, 224, 224, 0.88);
}

.core-item {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    align-items: start;
    position: relative;
}

.service-core .core-item {
    display: block;
}

.core-item p {
    margin: 0;
}

.core-item span {
    color: #120609;
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
}

.why-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.core-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.core h2 {
    margin-bottom: 35px;
}

.why-item-top, .core-item-top {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 30px;
    color: #120609;
    font-weight: 600;
    font-size: 18px;
    gap: 15px;
    line-height: 1;
    margin-bottom: 5px;
}

.core-item-top {
    grid-template-columns: 1fr 45px;
}

.core-item-top {
    margin-bottom: 15px;
}

.why-item p { 
    margin-bottom: 0;
}

.team-items { 
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.team-item {
    border: 1px solid #E0E0E0;
    border-radius: 30px;
    padding: 10px;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 50px;
}

.team-item-foto img {
    border-radius: 23px;
}

.team-item-desc {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 15px 0;
}

.team-item-desc h3 {
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}

.team-item-desc p { 
    margin-bottom: 20px;
}

.team-item-desc .linkedin {
    width: 30px;
    height: 30px;
    background: #CFCFCF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .3s;
}

.team-item-desc .linkedin:hover { 
    background: var(--main-color);  
}

.team-item-desc .email {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all .3s;
    color: var(--main-color);
}

.team-item-desc .email:hover {
    text-decoration: underline;
}

.team-item-contact {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.video-container {
    position: relative; 
}

.video-container video {
    width: 100%;
    display: block;
    border-radius: 30px;
    height: 450px;
    object-fit: cover;
}

.video-over {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
}

.video-play {
    position: absolute;
    width: 83px;
    height: 83px;
    margin: auto;
    left: 50%; 
    top: 50%; 
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: all .3s;
}

.video-play svg path {    
    transition: all .3s; 
}

.video-play:hover svg path {    
    fill: var(--main-color); 
}

.video-is-playing .video-play {
    opacity: 0;
    visibility: hidden;
}

.video-is-playing .video-over {
    display: block;
}

.block-video-row {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
}

.block-video-item h3 {
    text-align: center; 
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 30px;
    line-height: 1;
}

.key, .learn {
    padding-bottom: var(--margin-bt);  
}

.key-item {
    padding: 25px;
    border-radius: 30px;
    background: transparent;
    color: #120609;
    border: 1px solid var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 10px;
}


.key .subtitle span {
    background: #fff;
}

.key-item p {
    margin: 0;
}

.key-item h3 {
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 10px;
}

.key-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.key-items2 .key-item:nth-child(1) h3,
.key-items2 .key-item:nth-child(2) h3,
.key-items2 .key-item:nth-child(4) h3 {
    font-size: 64px; 
    color: var(--main-color);
}

.key-items2 .key-item:nth-child(4) h3 span{
    font-size: 30px;  
}

/* .key-items2 .key-item:nth-child(1),
.key-items2 .key-item:nth-child(2),
.key-items2 .key-item:nth-child(4) {
    background: transparent; 
    color: #120609;
    border: 1px solid var(--main-color);
} 
.key-items2 .key-item:nth-child(3)  { 
    background: var(--main-color);
    color: #fff;  
}
*/
.learn h2 {
    margin-bottom: 35px;
}

.learn-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 25px 20px;
}

.learn-item {
    padding-left: 25px;
    position: relative;
}

.learn-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--main-color);
    position: absolute;
    left: 0;
    top: 8px;
}

.training-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.training-img img {
    border-radius: 30px;
}

.training-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.training-item {
    border: 1px solid var(--main-color);
    padding: 25px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: start;
    font-weight: 500;
    line-height: 1;
}

.training h2{
    margin-bottom: 30px;
}

.instructors-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.instructors, .student, .who {
    padding-bottom: var(--margin-bt);
    overflow: hidden;
}

.instructors-item {
    box-shadow: 0px 0px 30px 0px #A7A7A733;
    border-radius: 30px;
    overflow: hidden;
}

.instructors-item-desc {
    padding: 25px;
}

.instructors-item-desc h3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1;
}

.who-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.who-item {
    border-radius: 30px;
    padding: 25px;
    border: 1px solid #E0E0E0;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    align-items: start;
}

.who-item img {
    border-radius: 50%;
}

.who h2 {
    margin-bottom: 25px;
}

.student-item {
    width: 400px;
    box-shadow: 0px 0px 30px 0px #A7A7A733;
    background: #fff;
    padding: 25px;
    border-radius: 30px;
    height: auto;
}

.student-item {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}

.student-item p{
    margin: 0;
}

.student-item-name {
    display: grid;
    grid-template-columns: 1fr 75px;
    gap: 25px;
    margin-top: auto;
    text-align: right;
    align-items: center;
    font-weight: 500;
}
.student-slide {
    overflow: visible;
}

.student-pagination {
    display: none;
}

.color-box {
    padding-bottom: var(--margin-bt);
    position: relative;
    overflow: hidden; 
    background: #F4F4F4;
    border-radius: 100vw / 75px;
    padding: 150px 0;
    margin-bottom: var(--margin-bt);
}

.what-row {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
}

.what .subtitle span {
    background: #fff;
}

.what-text {
    font-size: 24px;
}

.what-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.what-item {
    height: 360px;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 25px;
    display: flex;
    align-items: end;
}

.what-item span {
    background: #120609;
    color: #fff;
    display: inline-flex;
    padding: 15px 25px;
    border-radius: 90px;
    position: relative;
    z-index: 1;
}

.what-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
}

.what-item-back {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--main-color);
    z-index: 1;
    pointer-events: none;
    color: #fff;
    padding: 25px;
    opacity: 0;
    transition: all .3s;
}

.what-item-back h3 {
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 15px;
}

.what-item:hover .what-item-back  {
    opacity: 1;
}

.what {
    padding-bottom: 30px;
}

.bonus-box {
    padding: 55px;
    border-radius: 30px;
    background: url(img/bonus-bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
}

.bonus-book {
    position: absolute;
    right: 0;
    bottom: 0;
}

.bonus .subtitle span { 
    background: transparent; 
    color: #fff;
    border: 1px solid;
}

.bonus-title {
    font-size: 35px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.bonus-row {
    display: grid;
    grid-template-columns: 365px 310px;
    gap: 25px;
    margin-bottom: 5px;
}
.bonus-row2 {
    display: grid;
    grid-template-columns: 280px 280px;
    gap: 35px; 
    align-items: center;
}

.bonus-text span {
    display: block;
    padding-top: 15px;
    color: var(--main-color);
}

.bonus-btn-code span.bonus-code:hover {
  color: var(--main-color);
}

.bonus-btn-code span.bonus-code.copied {
  color: var(--main-color);
  text-decoration: none;
}

.bonus-btn-code span.bonus-code.copied::after {
  content: ' ✓';
  color: var(--main-color);
  font-weight: bold;
}

.bonus-text {
    color: #fff;
}

.bonus-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
}

.bonus-btn-sale {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
}

.bonus-btn-code {
    color: #fff;
}

.bonus-btn-code span{
    text-decoration: underline;
    cursor: pointer;
}

.bonus-btn2 {
    padding-top: 10px;
}

.bonus-btn2 .btn {
    background: #fff;
    color: #120609;
    border-color: #fff;
}

.bonus-btn .btn {
    background: var(--main-color);
    color: #fff;
} 

.bonus-btn2 .btn:hover {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
} 

.bonus-btn .btn:hover  {
    background: transparent;
    color: var(--main-color);
}

.bonus-btn .btn:hover svg path {
    fill: var(--main-color);
}

.bonus {
    padding-bottom: var(--margin-bt);
}

.bonus-row3 {
    display: grid;
    grid-template-columns: 120px 540px;
    gap: 45px;
    padding: 50px 0;
}

.bonus-row3 .bonus-text span {
    display: block;
    padding-top: 15px;
    color: #fff;
    font-weight: 500;
}

.bonus-book.book-sm { 
    max-width: 375px;
}

.design, .integrity, .applications {
    padding-bottom: var(--margin-bt);
}

.design h2 + span {
    color: var(--main-color);
    display: block;
    margin-bottom: 15px;
}

.design h2 + span + p {
    font-size: 24px;
}

.design-imgs {
    display: grid;
    gap: 30px;
    margin-bottom: 30px;
    grid-template-columns: 1fr 1fr;
}

.design-imgs + p {
    font-size: 24px;
}

.integrity h2 {
    margin-bottom: 30px;
}

.integrity-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; 
}

.integrity { 
    font-size: 24px;
}

.applications h2 {
    margin-bottom: 25px;
}

.applications-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.applications-item {
    padding: 25px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.applications-item-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.applications-item-top {
    position: relative; 
    display: grid;
    grid-template-columns: 1fr 45px;
}

.applications-item-top  h3{
    font-size: 25px;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.applications-item p {
    position: relative;
    color: #fff;
    margin: 0;
}

/* case, news */

.case-items, .news-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.case-item {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 30px 0px #A7A7A733;
    border-radius: 30px;
    gap: 25px;
    background: #fff;
}

.case-item.swiper-slide {
    width: 400px;
    height: auto;
}

.title-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    align-items: center;
}

.title-row .subtitle {
    margin: 0;
}

.case-item-desc {
    padding: 0 25px 25px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.case-item-desc h3, .news-item h3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1;
    transition: all .3s;
}

.case-item-desc span, .news-item span {
    margin-top: auto;
    color: #120609;
    text-transform: uppercase;
    font-size: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    transition: all .3s;
}

.case-item-img {
    position: relative;
    overflow: hidden;
}

.case-item-img img {
    border-radius: 30px 30px 0 0;
    transition: all .3s;
}

.case-item:hover img {
    transform: scale(1.025);
}

.case-item:hover .case-item-desc span, .news-item:hover span {
    color: var(--main-color);
}

.case-item .case-item-desc span svg path, .news-item span svg path{
    transition: all .3s;
}
.case-item:hover .case-item-desc span svg path, .news-item:hover span svg path{
    fill: var(--main-color);
}

.case-item:hover h3, .news-item:hover h3 {
    color: var(--main-color);
}

.case-archive, .case-box, .news-box   {
    padding-bottom: var(--margin-bt);
    overflow: hidden;
}

.btn-more {
    text-align: center;
}

.case-slide {
    overflow: visible;
}

.news-item {
    border: 1px solid #E0E0E0;
    padding: 25px;
    border-radius: 30px;
    display: flex; 
    flex-direction: column;
}

.news-box h2 + p {
    font-size: 24px;
}

.case-hero {
    height: 440px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    display: flex;
    align-items: end;
    padding: 150px 0 70px;
}

.case-hero img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.case-hero::before {
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) -3.16%, #000000 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: .5;
}

.case-hero h1 {
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    max-width: 750px;
    position: relative;
    z-index: 1;
    margin: 0;
}

.text {
    margin-bottom: 50px;
}

.text>*:last-child {
    margin-bottom: 0px;
}

.text h2 {
    font-size: 30px;
}

.text ul, .text ol { 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 40px;
    margin-bottom: 30px;
    padding-left: 20px;
}

.text ol li {
    list-style: auto;
}

.text ul li { 
    position: relative;
}

.text ul li::before {
    content: '';
    position: absolute;
    left: -20px;
    background: var(--main-color); 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 8px;
}
 

.text ol li::marker {
    color: var(--main-color); 
} 

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 30px;
    overflow: hidden; 
    margin-bottom: 50px;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 0;
    outline-width: 0;
}

.carusel-item img {
    border-radius: 30px;
}

.carusel-slide {
    overflow: visible;
}

.carusel {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.carusel-nav {
    justify-content: center;
    padding-top: 20px;
}

.carusel-box {
    width: 368px;
}

.carusel  {
    margin-bottom: 50px;
}

.carusel-item:not(.swiper-slide-active) {
    opacity: .5;
    pointer-events: none;
    display: flex;
    align-items: center;
    height: auto;
}

.carusel-item:not(.swiper-slide-active) img {
    max-width: 236px;
    transition: all .3s;
}

.carusel-item.swiper-slide-prev{ 
    justify-content: end; 
    padding-right: 20px;
}

.carusel-item.swiper-slide-next{ 
    justify-content: start;    
    padding-left: 20px;
}

.carusel-item  {
    width: 368px;
    transition: all .3s;
    min-height: 236px;
}

.slider {
    width: 100%;
    position: relative;
}

.slider-item img{
    border-radius: 30px;
}

.container.row-content {
    display: grid;
    grid-template-columns: 910px 1fr;
}

.page-content {
    padding-bottom: var(--margin-bt);
}

.main {
    padding-right: 30px;
    position: relative;
}

.main>*:last-child {
    margin: 0;
}

aside {
    padding-left: 30px;
    border-left: 1px solid #F4F4F4;
}

aside .subtitle {
    text-align: right;
}

aside .case-item {
    box-shadow: none;
    border: 1px solid #E0E0E0;
    margin-bottom: 30px;
}

.date {
    color: #fff;
    font-size: 24px;
    position: relative;
    z-index: 1;
}

.aside-date {
    color: #A5A5A5;
    margin-bottom: 10px;
    display: none;
}

.single-news .aside-date { 
    display: block;
}


/* contact */

.page-template-contact .hero-page h1 {
    max-width: 560px;
}

.map {
    border-radius: 30px;
    overflow: hidden;
}

.map-box {
    padding-bottom: var(--margin-bt);
}

.map-box h2 + p {
    font-size: 24px;
}

/* cta */

.cta {
    padding-bottom: var(--margin-bt);
}

.cta h2 + p {
    font-size: 24px;
}

.mb50 {
    margin-bottom: 50px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.form-group {
    position: relative;
}

.form-textarea {
    grid-column: span 2;
}

.form__field {
    font-size: 18px; 
    height: 35px;
    width: 100%; 
    padding: 0;
    color: #000;
    background: transparent;
    border: none;
    border-bottom: 1px solid #A6A6A6; 
    font-family: 'Test Founders Grotesk';
}

textarea.form__field {
    height: 45px;
}

.form-btn .btn {
    background: var(--main-color);
    color: #fff;
    justify-content: center;
}

.form-btn .btn:hover {
    background: transparent;
    color: var(--main-color);
}

.form-btn .btn svg path {
    transition: all .3s;
}
.form-btn .btn:hover svg path {
    fill: var(--main-color);
}

::-webkit-input-placeholder {color: #C8C8C8;font-family: 'Test Founders Grotesk';}
::-moz-placeholder          {color: #C8C8C8;font-family: 'Test Founders Grotesk';}
:-moz-placeholder           {color: #C8C8C8;font-family: 'Test Founders Grotesk';}
:-ms-input-placeholder      {color: #C8C8C8;font-family: 'Test Founders Grotesk';}

.form__field.error { 
    border-color: red!important;
}
   
.form__field:focus, .form__field:hover {
    border-color: var(--main-color)
}
 
.modal:not(.fancybox-content) {
    display: none;
}

label.error {
    display: none!important;
}

.form-group.form-btn {
    display: grid;
    grid-template-columns: 189px 1fr;
    gap: 20px;
}

.g-recaptcha {
    transform: scale(0.62);
    transform-origin: left top;
}
.form-recaptcha {
    max-width: 189px;
    position: relative;
}

#recaptchaError {
    position: absolute;
    top: -20px;
    font-size: 10px;
    color: red;
}

/* footer */

.footer__bottom {
    padding: 30px 0;
}

.footer__logo {
    margin-bottom: 20px;
}

.footer__cont {
    display: flex;
    align-items: center;
}

.footer__mess {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.footer__mess a {
    background: #120609;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transition: all .3s;
}

.footer__mess a:hover {
    background: var(--main-color); 
}

.footer__mess span {
    padding-right: 10px;
}

.footer__cont a {
    margin-left: 3px;
    transition: all .3s;
}

.footer__cont a:hover {
    color: var(--main-color);
}

.footer-navigation {
    background: #120609;
    padding: 50px 0;
}

.footer-nav span {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    display: block;
    margin-bottom: 20px;
    line-height: 1;
    text-transform: uppercase;
    opacity: .35;
}

.footer-row {
    display: grid;
    grid-template-columns: max-content max-content max-content 1fr;
    gap: 126px;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.footer-menu a {
    color: #fff;
    font-size: 15px;
    text-decoration: underline;
    transition: all .3s;
}

.footer-link {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    transition: all .3s;
    line-height: 1;
    display: block;
}

.footer-menu a:hover, .footer-link:hover {
    color: var(--main-color); 
    text-decoration: none; 
}

.footer-link-btn {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    transition: all .3s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid #fff;
    margin-left: auto;
    max-width: 138px;
    border-radius: 90px;
}

.footer-link-btn:hover { 
    color: #120609;
    background: #fff;
}

/* card */

.card {
    padding-bottom: 100px;
    overflow: hidden;
}


.servicesCardsContainer {
    display: flex;
    justify-content: center;
    align-items: end;
    min-height: 450px;
    gap: 20px;
    position: relative;
}

.ServiceCard {
    background: #fff;
    border-radius: 30px; 
    overflow: hidden;
    display: grid;
    grid-template-columns: 315px 295px;
    cursor: pointer;
    transition: 
        width 0.5s cubic-bezier(.4,0,.2,1),
        min-width 0.5s cubic-bezier(.4,0,.2,1),
        max-width 0.5s cubic-bezier(.4,0,.2,1);
    position: relative;
    min-width: 295px; max-width: 295px; width: 295px;
    height: 360px; 
}

 .ServiceCard.active {
    min-width: 610px;
    max-width: 610px;
    width: 610px;
    opacity: 1;
    height: 450px;
    z-index: 3; 
    cursor: inherit;
}

.ServiceCard .card-text-part h3 {
    margin-bottom: 15px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
}

.ServiceCard .action_button {
    margin-top: auto;
}

#scrollRange {
    flex: 1; 
    max-width: 100%; 
    height: 1px; 
    -webkit-appearance: none; 
    background: #A5A5A5;
    border-radius: 1px; 
    outline: none;
}

#scrollRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 136px; 
    height: 28px;
    background: url(img/range.png) no-repeat; 
    cursor: pointer;
}

.scroll-controls span { 
    background: var(--main-color); 
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 50%;
}

.ServiceCard:not(.active) .card-text-part {
    display: none !important;
}
.ServiceCard:not(.active) .imageTextBox { 
    height: 360px;
}

.ServiceCard .image-box {
    width: 100%; height: 100%;
    position: relative;
}        .ServiceCard .imageTextBox {
    width: 100%; height: 100%;
    position: relative;
}

.ServiceCard img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: filter 0.4s;
}

.tagbox {
    position: absolute;
    bottom: 25px;
    left: 25px;
    background: #120609;
    color: #fff;
    display: inline-flex;
    padding: 15px 25px;
    border-radius: 90px; 
    z-index: 1; 
}

.ServiceCard.active .tagbox {
    display: none;
}

.ServiceCard.active .card-text-part { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    background: #fff;
    position: relative;
    animation: fadeInDesc 0.5s;
}

@keyframes fadeInDesc {
    from { opacity: 0; transform: translateY(16px);}
    to   { opacity: 1; transform: translateY(0);}
}

.scroll-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    position: relative;
}

.ServiceCard:not(.active) .desc,
.ServiceCard:not(.active) .action_button,
.ServiceCard:not(.active) h3 {
    display: none !important;
}
    
#scrollRange:active::-moz-range-thumb { 
    transform: scale(1.2);
}
      
.card-item {
    width: 270px;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    height: auto;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.card-item-text {
    padding: 20px;
}

.card-item-img {
    height: 260px;
    position: relative;
    overflow: hidden;
}

.card-item-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}

.card-item-text p {
    margin-bottom: 0;
}

.card-slide {
    overflow: visible;
}

.card-nav.slide-nav {
    padding-top: 30px;
    justify-content: center;
}

.card-box {
    display: none;
}

.btn-up {
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #A5A5A5;
    z-index: 15; 
}
 

.btn-up_hide {
    display: none;
}