/* 
Theme name: Nextlevel | Kulstik
Version: 0.1
Description:
Author: Jan | Kulstik
Author URI: https://kulstik.com/
Requires at least: 6.8
Tested up to: 6.8.3
Requires PHP: 8.3
Text Domain: kulstik
*/


:root {
    --background: #1f1f1f;
    --color: #9E9F9F;

    --link-color: blue;
    --link-color-hover: #BA38C1;

    --button-color: #9E9F9F;
    --button-color-hover: #027AD3;
    --button-bg: transparent;
    --button-bg-hover: transparent;
    --button-border-color: transparent;
    --button-border-thickness: unset;
    --button-fontsize: 18px;
    --button-padding: 13px 0;
    --button-texttransform: uppercase;

    --burger-color: #fff;
    --burger-color-hover: #BA38C1;
    --burger-line-thickness: 3px;
    --burger-line-seperation: 12px;
    --burger-line-width: 30px;

    --header-height: auto;
    --header-height-full: auto;
    --header-background: #1f1f1f;

    --wpcf-padding: 13px 20px;
    --wpcf-border: 1px solid #1bdcac;
    --wpcf-textcolor: #fff;

    --tec-color-accent-primary: #1bdcac;
    --tec-color-accent-primary-background-datepicker: #d2ad624d;

    --swiper-theme-color: #1bdcac !important;
}

body {overflow-x: hidden}


header {position: relative; height: var(--header-height); font-size: 14px; background-color: var(--header-background); z-index: 5; padding-top: 30px; letter-spacing: 2.1px}
.menu-container {position: relative;}
.header-wrap {display: flex; align-items: center; flex-wrap: wrap; gap: 30px;}
.burger-wrap{display: none; z-index: 3; margin-left: auto; width: 32px; height: 32px;}
.burger {display: flex; height: 100%; width: 100%; justify-content: space-between; flex-direction: column; cursor: pointer;}
.burger-line {content: ''; display: block !important; width: 100%; height: 2px; border-radius: 5px; background-color: var(--burger-color)}


body.menu-active {overflow: hidden; margin-top: 50vh;}
.menu-active .menu-mobile-container {top: 0;}
#menu-header {list-style: none; padding: 0; margin: 0; width: 100%; display: block; color: #000;}
/*#menu-header li {border-bottom: 1px solid #ededed;}*/
#menu-header li a {text-decoration: none; display: inline-block; padding: 0 10px;}
.menu-header-container li a {color: #fff; transition: all 400ms;}
#menu-header > li > a:hover {color: var(--link-color-hover);}
#menu-header .current-menu-item > a {color: var(--link-color-hover);}
#menu-header .menu-item-has-children, #menu-header .sub-menu {list-style: none;}
/*#menu-header .menu-item-has-children > a:after {content: "\e903"; font-family: 'icomoon';}*/
#menu-header .menu-item-has-children .sub-menu {display: none}
#menu-header .menu-item-has-children li a:hover {transform: translatex(20px); color: var(--link-color-hover);}

.menu-mobile-container {font-family: "PP Telegraf Ultrabold"; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 9999; top: -100%; padding: 30px 20px; background-color: #027ad3; text-align: left; background-image: url('assets/img/simboli.webp'); background-size: 500px; transition: all 0.5s; overflow-y: auto;}
.menu-mobile-container-top {margin-bottom: 56px; display: flex; flex-wrap: wrap; gap: 30px;}
.header-close-wrap {width: 30px; height: 30px; display: block; margin-left: auto;}
.header-close {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;}
.header-close-line {content: ''; display: block !important; width: 42px; height: 3px; border-radius: 5px; background-color: var(--burger-color); position: absolute;}
.header-close-line:first-child {transform: rotate(-45deg);}
.header-close-line:last-child {transform: rotate(45deg);}
.menu-mobile-container .sub-menu {padding-left: 0;}
.menu-mobile-container .sub-menu li a{font-family: "PP Telegraf"; font-size: 14px !important; text-transform: uppercase;}
.menu-mobile-container li a {color: #fff; padding: 10px 20px 10px 0 !important; font-size: 40px;}
.menu-mobile-container > li {padding-right: 30px;}
.menu-mobile-container .menu-item-has-children {position: relative;}
.menu-mobile-container .menu-item-has-children::before {content: "\e910"; font-size: 30px; font-family: 'icomoon'; position: absolute; right: 0; top: 20px; color: #fff; transform: rotate(45deg); transition: all 400ms;}
.menu-mobile-container .menu-item-has-children.sub-menu-active::before {transform: rotate(-45deg);}


footer {font-size: 16px; background-color: #1B1B1B;}
footer #logo {padding-top: 100px; margin-bottom: 100px; z-index: 1;}

.footer-menu {list-style: none; font-size: 16px; padding: 0;}
.footer-menu li a {text-decoration: none; color: #fff; padding: 12px 0; display: block;}

.copy-tos {margin-top: 100px !important;}
.copyright, .tos-menu li a{color: #9F9F9F; font-size: 12px;}
.tos-menu {list-style: none; padding: 0;}
.tos-menu li {display: inline; padding: 0;}
.tos-menu li:nth-child(1)::after {content: '/'; display: inline-block; margin: 0 8px 0 10px; color: #9F9F9F;}
.tos-menu li a {text-decoration: none;}

.button-gradient, .wpcf7 input[type="submit"].button-gradient {font-size: 18px; line-height: 22px; color: #ffffff; text-decoration: none; padding: 9px 30px; display: inline-block; border-radius: 25px; background: #BA38C1; background: linear-gradient(200deg,rgba(186, 56, 193, 1) 0%, rgba(136, 93, 253, 1) 50%, rgba(1, 122, 211, 1) 100%); text-transform: unset; transition: all 0.3s;}
.button-gradient:hover, .button-gradient:focus, .button-gradient:active,
.wpcf7 input[type="submit"].button-gradient:hover, .wpcf7 input[type="submit"].button-gradient:focus, .wpcf7 input[type="submit"].button-gradient:active {color: #ffffff; text-decoration: none; background: #BA38C1; background: linear-gradient(222deg,rgba(186, 56, 193, 1) 0%, rgba(136, 93, 253, 1) 50%, rgba(1, 122, 211, 1) 100%); text-transform: unset;}



@media screen and (max-width: 1199px) {
    .burger-wrap {display: block;}
    .mobile-hidden {display: none !important;}

    .menu-header-container {display: none;}
}

@media screen and (min-width: 1200px) {
    footer {font-size: 20px;}
    .footer-menu {font-size: 20px;}

    header {height: var(--header-height-full); padding-top: 65px; text-transform: uppercase;}

    #logo {display: flex; justify-content: left;}

    #menu-header {position: relative; top: unset; display: block;}
    #menu-header > li {display: inline-block;}
    .menu-header-container {display: inline-block; margin-left: auto;}

    #menu-header .menu-item-has-children {position: relative;}
    #menu-header .menu-item-has-children .sub-menu {padding: 0;}
    header:has(.menu-item-has-children:hover) {background: #1b1b1b;}
    #menu-header .menu-item-has-children:hover > .sub-menu {display: block;}
    #menu-header .menu-item-has-children > .sub-menu:before {content: ''; position: absolute; display: block; top: 0; left: -100vw; width: 100vw; height: 100%; background-color: #1b1b1b; box-shadow:   0 4px 2px -2px #00000059;}
    #menu-header .menu-item-has-children > .sub-menu:after {content: ''; position: absolute; display: block; top: 0; right: -100vw; width: 100vw; height: 100%; background-color: #1b1b1b; box-shadow:   0 4px 2px -2px #00000059;}

    #menu-header .menu-item-has-children > .sub-menu {display: none; position: absolute; white-space: nowrap; left: 0; z-index: 9999; padding-top: 10px; padding-bottom: 50px; background-color: #1b1b1b; box-shadow:  0 4px 2px -2px #00000059;}
    #menu-header .menu-item-has-children .menu-item-has-children:hover > .sub-menu {display: block;}
    #menu-header .menu-item-has-children .menu-item-has-children > .sub-menu {display: none; position: absolute;right: 0; top: 50px; background-color: #fff; white-space: nowrap;}
    #menu-header li a {display: block; padding: 20px 30px; height: 100%;}
    #menu-header .sub-menu li a {padding: 10px 30px;}

    .menu-mobile-container #menu-header {text-align: right;}

    .menu-mobile-container {display: none;}

    header .container {display: flex; justify-content: space-between; align-content: center;}

    .button-menu a {background: transparent linear-gradient(195deg, #BA38C1 0%, #885DFD 53%, #017AD3 100%) 0% 0% no-repeat padding-box; border-radius: 35px; border: 3px solid transparent; transition: all 400ms;}
    .button-menu a:hover {color: #fff !important; border: 3px solid #BA38C1; background: unset;}

}