@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*

@media screen and (max-width: 600px){
    :root{
    --screen_padding: 5dvw;
    --font_family_header: "Fira Sans", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font_family_default: "Fira Sans", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font_size_default: 5dvw;
    --font_line_height_default: 1.5;
    --background_default: #fefefe;
    --border_radius_default: .5dvw;
    --padding_default: 2dvw;
    --background_btn_default: #4aad33;
    --margin_default: 2dvw;
    --text_color_default: #ffffff;
    --text_shadow_default: 1px 1px 1px #444;
    --gap_default: 5dvw;
  }
}
@media screen and (min-width: 601px){
  :root{
    --screen_padding: 5dvw;
    --font_family_header: "Fira Sans", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font_family_default: "Fira Sans", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font_size_default: 5mm;
    --font_line_height_default: 1.5;
    --background_default: #fefefe;
    --border_radius_default: 2px;
    --padding_default: 2mm;
    --background_btn_default: #4aad33;
    --margin_default: 2mm;
    --text_color_default: #ffffff;
    --text_shadow_default: 1px 1px 1px #444;
    --gap_default: 2mm;
  }
}

*/
/* ============================================
   CSS dla KIDE.PL
   ============================================ */

/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: "Fira Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 5dvw;
    line-height: 1.6;
    color: #1f2937;
    background-color: #ffffff;
}

img { max-width: 100%; height: auto; display: block;border-radius: .25rem;}
h1, h2, h3{font-size: 4rem; text-align: center; margin: 3rem .25rem;color: var(--kide-back); }
h2{font-size: 3rem}
h3{font-size: 2rem}
a { text-decoration: none; color: inherit; }
p, li{font-size: 1.30rem; margin-bottom: 1rem; color: var(--kide-back) }
ul { list-style: none; }
ol {margin-left: 1.5rem; list-style-type: decimal}
input, textarea, select, label{padding: 1rem; outline: none;}
hr {  border: none;
  height: 1px;
  background: linear-gradient(to right, 
    rgba(224, 224, 224, 0) 0%,
    rgba(224, 224, 224, 1) 50%,
    rgba(224, 224, 224, 0) 100%
  );
  margin: 30px 0;
    }
table :where(td, th){padding: 1rem; border: solid 1px #ccc}
table label{display: none;}
table th{background-color: green; color: #fff}
.round{
    display: flex; flex-direction: column; 
    align-content: center; justify-content: center; 
    background-color: #666; 
    font-weight: bold; font-size: 2rem; 
    width: 6rem; height: 6rem; border: solid 1px #666; border-radius: calc(infinity * 1px); 
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px; 
    margin: auto; color: #fff}
.paginator{display: flex; align-content: center; justify-content: center; padding: 3rem 1rem; gap: 2rem}
.paginator :where(a, span, div){font-size: 1.25rem}
.paginator span{color: #fff; background-color: var(--kide-primary); padding:  .1rem .75rem; border-radius: 50%}
.paginator a:not(.prev):not(.next){color: #fff; background-color: #ccc; padding:  .1rem .75rem; border-radius: 50%}
.paginator :where(.prev, .next){color: var(--kide-primary)}

.separator{display: block; width: 100%; height: 3rem}
.txt_center{text-align: center !important; }
.txt_left{text-align: left !important; }
.flex_center{justify-content: center; align-content: center; justify-items: center; align-items: center;}
/*FLEX - COLUMN*/
.column{flex-direction: column;}

/* === VARIABLES === */
:root {
    --kide-primary: #22c55e;
    --kide-primary-dark: #16a34a;
    --kide-dark: #1f2937;
    --kide-gray: #6b7280;
    --kide-light: #f9fafb;
    --kide-white: #ffffff;
    --kide-spacing: 1rem;
    --kide-back: #444;
    --kide-background-blue: #0060df;
}

/* === CONTAINER === */
.kide_container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; font-size: 1.4rem;}

/* === HEADER === */
.kide_header { display: flex; gap: 3rem; background-color: var(--kide-white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000; padding: .5rem calc( (100dvw - 1360px) / 2 ); align-items: center;}

.kide_header_wrapper { display: grid; align-items: center; justify-content: space-between; height: 70px; }

.kide_logo { display: flex; font-weight: bold; /*! color: var(--kide-primary); */ /*! border: solid; */ width: 12rem; height: 100%;position: relative;}
.kide_logo_text { display: inline-block; }

/* Desktop Navigation */
.kide_nav { display: inline-flex; gap: 2rem; width: 100%;/*! border: solid; */ flex-direction: column;align-content: center;align-items: center;justify-content: center;}
.kide_nav :where(ul, li, a, span){font-size: 1.2rem; display: flex; gap: 2rem; align-content: end; justify-content: flex-end; justify-items: end; justify-content: end; align-self: end; margin: 0}
.kide_nav_link { color: var(--kide-dark); font-weight: 500; transition: color 0.3s; }
.kide_nav_link:hover { color: var(--kide-primary); }

/* Mobile Navigation */
.kide_nav_mobile { display: none; flex-direction: column; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid #e5e7eb; }
.kide_nav_mobile.kide_active { display: flex; }

/* Hamburger Menu */
.kide_hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.kide_hamburger span { width: 25px; height: 3px; background-color: var(--kide-dark); transition: all 0.3s; border-radius: 2px; }
.kide_hamburger.kide_active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.kide_hamburger.kide_active span:nth-child(2) { opacity: 0; }
.kide_hamburger.kide_active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* === BUTTONS === */
.kide_btn { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 0.25rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; text-align: center; font-weight: normal; width: fit-content;}

.kide_btn_primary { background-color: var(--kide-background-blue); color: var(--kide-white) !important; }

.kide_btn_primary:hover { background-color: var(); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }

.kide_btn_large { padding: 1rem 2rem; font-size: 1.125rem; }

.kide_btn_block, .kide_btn_block:hover { display: block; width: 100%; margin: 2rem auto; width: fit-content; }

.kide_btn_header { white-space: nowrap; }

/* === HERO SECTION === */
.kide_hero {
    position: relative;
    height: 80dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('/wp-content/uploads/2025/10/factory-production-line-interior.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    color: var(--kide-white);
}
.kide_hero:has(.light) *{color: #222; }
.kide_hero:has(.light) p{font-size: 1.75rem;line-height: 1.6;}
.kide_hero_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.85), rgba(31, 41, 55, 0.7));
}
.kide_hero_overlay.light{
        position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0, rgba(255, 255, 255, 1), rgba(255, 255, 255, .7));
}

.kide_hero .kide_container {
    position: relative;
    z-index: 1;
}

.kide_hero_title {
    font-size: 4.5rem;
    font-weight: bold;
    margin-bottom: 4rem;
    line-height: 1.2;
    color: #fff;
}

.kide_hero_subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    color: #fff;
}

/* === SECTIONS === */
.kide_section {
    padding: 1rem 0;
    margin: 0;
}

.kide_section_title {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--kide-dark);
}

.kide_section_subtitle {
    font-size: 1.125rem;
    text-align: center;
    /*! margin-bottom: 3rem; */
    color: var(--kide-gray);
}

.kide_section_title_light,
.kide_section_subtitle_light {
    color: var(--kide-white);
}

/* === STATISTICS === */
.kide_stats {
    background-color: var(--kide-light);
    text-align: center
}

.kide_stats_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.kide_stat_card {
    background-color: var(--kide-white);
    padding: 2rem;
    border-radius: .25rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-top: 5rem
}
.kide_stat_card h3{font-size: 1.25rem; line-height: 1.2; margin-bottom: 2rem}
.kide_stat_card h2{font-size: 3rem; line-height: 1.2; margin-bottom: 2rem; color: #444}
.kide_stat_icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    min-height: 10rem;
    display: flex;
    justify-content: space-around;
}

.kide_stat_value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--kide-primary);
    margin-bottom: 0.5rem;
}

.kide_stat_label {
    color: var(--kide-gray);
    font-size: 0.9375rem;
}

.kide_stat_chart {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
}

.kide_circle_chart {
    transform: rotate(0deg);
}

/* === TEXT WITH BACKGROUND === */
.kide_text_bg {
    background-image: url('/wp-content/uploads/2025/10/factory-production-line-interior.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    color: var(--kide-white);
}

.kide_text_bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*     background-color: rgba(255, 255, 255, 0.85); */
    background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
}

.kide_text_bg .kide_container {
    position: relative;
    z-index: 1;
}

.kide_text_content {
    max-width: 800px;
    margin: 0 auto;
}

.kide_text_content p {
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.8;
}

/* === CARDS === */
.kide_cards_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.kide_card {
    background-color: var(--kide-white);
    border-radius: .25rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 0rem;
    position: relative;
    display: flex; flex-direction: column; 
}

.kide_card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.kide_card_image {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
}

.kide_card_title {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 1.5rem 1.5rem 1rem;
}

.kide_card p, .kide_card ul {
    margin: 0 1.5rem 1.5rem;
    color: var(--kide-gray);
}

/* === SERVICES === */
.kide_services {
    background-color: var(--kide-light);
}

.kide_services_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.kide_service_box {
    background-color: var(--kide-white);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.kide_service_title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--kide-dark);
}

.kide_service_intro {
    margin-bottom: 1.5rem;
    color: var(--kide-gray);
}

.kide_service_list {
    margin-bottom: 1rem;
}

.kide_service_list li {
    padding: 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--kide-dark);
}

.kide_service_list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--kide-primary);
    font-weight: bold;
}

/* === CLIENTS GALLERY === */
.kide_clients {
    background-color: var(--kide-light);
}

.kide_clients_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.kide_client_item {
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.kide_client_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, .0));
    color: var(--kide-white);
    padding: 1.7rem 0 0 1rem;
    font-weight: 600;
    height: 4rem;
}
.kide_client_overlay{font-size: 1rem}

/* === FEATURES === */
.kide_features_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.kide_feature_card {
    text-align: center;
    padding: 2rem;
}

.kide_feature_icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.kide_feature_title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.kide_feature_card p {
    color: var(--kide-gray);
}

/* === TESTIMONIALS === */
.kide_testimonials {
    background-color: var(--kide-light);
}

.kide_testimonial {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
}

.kide_testimonial_text {
    font-size: 1.25rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--kide-dark);
}

.kide_testimonial_author {
    color: var(--kide-gray);
}

/* === CTA === */
.kide_cta {
    background-color: var(--kide-primary);
    color: var(--kide-white);
    text-align: center;
}

.kide_cta_title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.kide_cta_text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* === CONTACT FORM === */
.kide_contact {
    background-color: var(--kide-dark);
    color: var(--kide-white);
}

form{
    display: grid; 
    background-color: var(--kide-dark);
    border-radius: .25rem;
}
form :where(label, input, textarea, span){font-size: 1.25rem; width: 100%; margin: 0;padding: 0; color: var(--kide-light); background-color: var(--kide-dark); 
    border: none; border-bottom: solid 1px  var(--kide-gray); border-radius: 0 ;
}
form>div{
    display: grid; grid-gap: 1rem;
    padding: .5rem;
    position: relative;
}
form>div div{ }
form>div div *{display: block; padding: 1rem 0; border-bottom: solid 1px  var(--kide-gray); border-radius: 0 }
form>div div :where(input, textarea){padding: 1rem; border-bottom: solid 1px var(--kide-gray); border-radius: 0 }
.kide_form_checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--kide-dark);
}

form .kide_btn_primary{width: fit-content; margin: 1rem auto}
form label{border: none !important}
.kide-form-message{font-size: 1rem}
.kide_form_checkbox{border: none}
.kide_form_checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: none;
}
.kide_form_checkbox span{border: none;}

/* === FOOTER === */
.kide_footer {
    /*background-color: var(--kide-dark);*/
    background-color: #222;
    color: var(--kide-white);
    padding: 3rem 0 1rem;
}

.kide_footer_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.kide_footer_title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.kide_footer_text {
    color: #9ca3af;
    line-height: 1.6;
}

.kide_footer_list li {
    margin-bottom: 0.5rem;
}

.kide_footer_list a {
    color: #9ca3af;
    transition: color 0.3s;
}

.kide_footer_list a:hover {
    color: var(--kide-primary);
}

.kide_footer_bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    color: #9ca3af;
}
.kide_footer * {color: #dedede !important;}
/*  ===WTYCZKI===  */
.progress-bar {
  width: 100%;
  height: 2rem;
  background-color: #e0e0e0;
  border-radius: .25rem;
  overflow: hidden;
    
}
.progress-bar.vertical{
    position: relative;
    width: 2rem;
    height: 10rem;
    display: inline-block; 
}
.progress-fill {
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

.progress-bar.vertical .progress-fill{
  width: 100%;  
    bottom:0; position: absolute
}


/*

CIASTECZKA

*/

.cookie-consent-banner{background-color: #fefefe; font-size: 1rem; box-shadow: -1px 0 2px #222;
display: block; position: fixed; bottom: 0; left: 0; width: 100dvw; height: fit-content; z-index: 1; text-align: center;
padding: 1rem;
}
.cookie-consent-banner :where(p){text-align: left; font-size: .5rem !important;}
.cookie-consent-buttons button{
    padding: .5rem 2rem; background-color: var(--kide-background-blue); border: solid 1px var(--kide-background-blue); border-radius: .15rem; color: #fff; margin:.5rem;
}


/** 
CONTROL CENTER
**/

.kide_control_center{
    display: flex; flex-direction: column;
    position: fixed; bottom: 1rem; right: 1rem; z-index: 5
}
.kide_control_center *{font-size: 1rem;}
.kide_control_center>div>a{display: flex; justify-content: end; align-items: center;gap: 0rem; padding: .6rem;}
.kide_control_center>div>a>span, .kide_control_center>div>a>img{background-color: var(--kide-background-blue)}
.kide_control_center>div>a>span{padding: .5rem; border-radius: .15rem; margin-right: -2rem; padding-right: 2rem;color: #fff}
.kide_control_center>div>a>img{border-radius: 50%; padding: 1rem; height: 4rem; width: 4rem}

.msg.info, .msg.error{display: block; position: relative; background-color: green; padding: 1rem}
.msg.error{background-color: red; padding: 1rem}