:root {
    --bg-color: #060606;
    --text-color: #fff;
    --subbg-color: #1F2128;
    --anchor-color: #A0D7E7;
    --shade-color: #808191;
    --second-bg: #121318;
    --switcher-bg: #36373d;
}

[data-theme="light"] {
    --bg-color: #ffffff;
    --text-color: #000;
    --subbg-color: #f5f4f4;
    --anchor-color: #1F428B;
    --shade-color: #000001;
    --second-bg: #fbfbfb;
    --switcher-bg: #e4e4e4;
}

body {background-color: var(--bg-color); font-family: 'Instrument Sans';}
body * {color: var(--text-color);}
body .main_wrapper {padding: 10px; display: flex; flex-direction: column; justify-content: space-between; min-height: 80vh;}
.logo_wrap img {height: auto; min-width: 280px;}
.top_bar {text-align: end;}
.logo_wrap {text-align: center;}

.main_wrapper h2 {margin-top: 0; text-align: center; font-weight: 500; font-size: 24px;}
.main_wrapper h4 {font-size: 14px; margin-top: 0; font-weight: 500;}
.main_wrapper a {color: var(--anchor-color); text-decoration: none; position: relative;}
.main_wrapper p {margin-top: 0; font-size: 14px; font-weight: 500;}
.main_wrapper a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; transform: scaleX(0); background: var(--anchor-color); }
.main_wrapper a:hover::after {transform: scaleX(1); transition: transform .3s;}

#themeToggle {background-color: var(--switcher-bg); display: inline-flex ; padding: 5px ; border-radius: 25px; gap: 5px; cursor: pointer;}
.dark_theme {padding: 1px; border-radius: 50%; background: var(--bg-color);}
.light_theme {padding: 1px; border-radius: 50%; background: var(--bg-color);}

.toggle-switch.light .dark_theme {visibility: hidden;}
.toggle-switch.dark .light_theme {visibility: hidden;}
 
.container_wrap .box_style {max-width: 600px; margin: auto; padding: 30px; background-color: var(--subbg-color); margin-top: 50px; border-radius: 20px;}

.input_group {display: flex; align-items: center; position: relative;}
.input_group #company_name {width: 100%; padding: 12px 100px 12px 12px; background-color: transparent; border: 0.5px solid #808191; border-radius: 7px; margin: 10px 0; position: relative; outline: unset; z-index: 1;}
.input_group #company_name::placeholder {color: var(--shade-color); font-family: 'Instrument Sans'; font-weight: 500;}
.input_group #company_name::-webkit-input-placeholder {color: var(--shade-color); font-family: 'Instrument Sans'; font-weight: 500;}
.input_group span {text-align: center; color: var(--shade-color); font-size: 14px; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-weight: 500;}

.form_group .submit {display: flex; width: 100%; padding: 10px; border-radius: 7px; background-color: #004EED; color: #fff; border: 1px solid #004EED; margin-top: 10px; position: relative; cursor: pointer; outline: unset; font-size: 14px; text-align: center; justify-content: center; overflow: hidden; transition: transform .3s, opacity .4s;}
.signup_wrap p {margin-bottom: 10px;}
.form_group .kz-btn_cta-title * {color: #ffffff; font-size: 14px;}
.bottom_content_wrap.box_style {margin-top: 25px; position: relative; background-color: var(--second-bg);}
.bottom_content_wrap.box_style::before {content: ''; background-image: url('images/cubes.png'); position: absolute; height: 300px; width: 300px; right: -180px; top: 55px; background-repeat: no-repeat; background-size: contain;}

form#companyForm {margin-bottom: 25px;}

.footer_wrap {text-align: center; margin-top: 100px;}
.footer_wrap img {max-width: 140px; height: auto;}
.form-group label {color: var(--text-color); font-size: 14px; font-weight: 500;}
.signup_wrap a {font-size: 14px; font-weight: 500;}

.bottom_content_wrap.box_style .visit_site {display: inline-flex; align-items: center; gap: 10px;}
.bottom_content_wrap.box_style .visit_site span {color: var(--anchor-color);}
.dark .dark {display: none;} 
.light .light {display: none;} 

#error_msg {margin-top: 15px; font-size: 12px; color: #ff0000;}

.kz-btn_cta:hover { transform: scaleX(1.02); transition: transform .4s cubic-bezier(.34, 4.56, .64, 1); }
.kz-btn_cta-ripple { position: absolute; display: block; top: 50%; left: -5%; width: 110%; padding-top: 100%; z-index: 1; opacity: 0; background: rgba(255, 255, 255, .3); border-radius: 50%; transform: translateY(-50%) scale(0) translateZ(0); transition: transform .7s, opacity .4s;}
.kz-btn_cta:hover .kz-btn_cta-ripple { opacity: 1; transform: translateY(-50%) scale(1) translateZ(0); }
.kz-btn_cta-title span { display: block; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.kz-btn_cta-title span:after { content: attr(data-text); display: block; position: absolute; top: 140%; left: 0; width: 100%;}
.kz-btn_cta:hover .kz-btn_cta-title span { transform: translateY(-140%); }
.kz-btn_cta-title { position: relative; z-index: 2; overflow: hidden; }


@media only screen and (max-width: 1024px){
    .bottom_content_wrap.box_style::before {right: 0; top: 120px; width: 250px; height: 250px;}   
}

@media only screen and (max-width: 767px){
    body .main_wrapper {min-height: 95vh;}
    .bottom_content_wrap.box_style::before {visibility: hidden;}
    .logo_wrap {text-align: start;}
    #themeToggle {position: absolute; top: 25px; right: 20px;}

    .title_wrap.mobile h2 {font-size: 36px;}
    .logo_wrap img {max-width: 280px;}
    .footer_wrap {margin-top: 50px;}
}