:root {
    --main-color: #1486b5;
    --secondary-color: #626262;
    --secondary-bg-color: #F8F8F8;
}

html {
    scroll-behavior: smooth;
    background: linear-gradient(
        to bottom,
        rgba(234, 244, 255, 0.15) 0%,     /* velmi světlá modrá nahoře */ rgba(188, 220, 255, 0.18) 40%,    /* střed */ rgba(111, 168, 220, 0.17) 100%    /* tmavší modrá dole */
    );
    min-height: 100%;
}


* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    /*background-color: #FBFBFB;*/
background: transparent;


    font-family: "PT Sans", serif;
}

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

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

a.link, a.link:visited, a.link:active {
    color: var(--main-color);
    text-decoration: underline;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}
a.link:hover {
    color: #4cc6f6; text-decoration: none;
}


.header {
    background-color: var(--secondary-bg-color);
}

.transition-opacity {
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

.logo em {
    color: rgb(190, 190, 190);
}

.logo img {
    filter: drop-shadow(2px 4px 6px gray);
}

p {
    color: rgb(98, 98, 98);
    font-size: 16px;
    line-height: 28px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cairo", serif;
    color: black;
}

.size--1-5 {
    width: 1.5rem;
    height: 1.5rem;
}

.size--3 {
    width: 3rem;
    height: 3rem;
}

.product-card .icon {
    color: white;
    padding: 0.5rem;
    background-color: #424242;
    width: 3.5rem;
    height: 3.5rem;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}

.product-card h5 {
    font-size: 1.1rem;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}

.product-card:hover {


    .icon {
        background-color: var(--main-color);
    }
    h5 {
        color: var(--main-color);
    }
}


.contact-icon {
    color: white;
    padding: 0.8rem;
    background-color: var(--main-color);
    width: 4.0rem;
    height: 4.0rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}


section>h2 {
    font-family: "Encode", serif;
    font-size: 3rem;
    display: flex;
    gap: 2rem;
}

@media(max-width:960px){
    section>h2{
        font-size:2rem;
    }
}

section>h2::after {
    content: "";
    flex: 1;
    position: relative;
    top: -0.5rem;
    border-bottom: 2px solid #EEEEEE;
}

ul.social {
    margin: 0;
    padding: 0;
    background-color: var(--main-color);
}

ul.social li a {
    display: block;
    padding: 14px;
    text-align: center;
    color: white;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}
ul.social li a:hover {
    color: var(--main-color);
    background-color: white;
}

.social-icon {
    padding: 0;
    width: 20px;
    height: 20px;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.main-content {
    background-color: white;
    box-shadow: 0 4px 4px #BEBEBE;
    padding-bottom: 5rem;
    margin-bottom: 2rem;
}

.about-quote {
    position: relative;
}

.about-quote::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
    border-top:2px solid #424242;
    border-left:2px solid #424242;
}
.about-quote::after{
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    width:40px;
    height:40px;
    border-bottom:2px solid #424242;
    border-right:2px solid #424242;
}

.definition-about dt, .definition-about dd {
    color: var(--secondary-color);
    display: inline-block;
}
.definition-about dt::after {
    content: ":";
    padding-right: 0.5rem;
}

.reference-link {
    position: relative;
    background-color: var(--secondary-bg-color);
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}
.reference-link img {
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}

.reference-link:hover {
    box-shadow: 0 4px 4px #BEBEBE;
    img {
        filter: brightness(80%);
    }

}

.formfield-input {
    display: block;
    width: 100%;
    background: #FBFBFB;
    border: 0;
    padding-left: 1rem;
}

.formfield-input:focus {
    background: #F8F8F8;
    border: 0;
    outline: none;
}

.contact-field:focus-within {
    border-color: transparent; /* zmizí původní šedá */
}

.contact-field:focus-within::after {
    width: 100%; /* čára se rozjede animovaně */
}


.contact-field:focus-within .formfield-icon{
    background: var(--main-color);
    color: white;
    /*transform: translateY(-15%);*/

}


.contact-field:focus-within label{
    background-color: var(--main-color);
    transform: translateY(-4px);
}


.contact-field {
    position: relative;
    padding-bottom: 2px; /* trochu místa pro čáru */
    border-bottom: 2px solid #ccc;
    transition: border-color 0.3s ease;
}

.contact-field label {
    background-color: #F2F2F2;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;

}

.contact-field::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: var(--main-color);
    transition: width 0.3s ease;
}

.formfield-icon {
    color: var(--secondary-color);
    padding: 10px 0;
    background-color: #F2F2F2;
    width: 40px;
    height: 40px;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.submit-button {
    background-color: var(--main-color);
    color: white;
    border: 2px solid white;
    padding: 10px 40px;
    transition: all 0.3s ease;
}

.submit-button:hover {
    background-color: white;
    color: var(--main-color);
    border: 2px solid var(--main-color);
}

.submit-button:active {
    background-color: #333333;
    color: white;
    border: 2px solid #555555;

}

.menu-icon {
    display: block;
    color: white;
    padding: 0.5rem;
    background-color: var(--main-color);
    width: 3.5rem;
    height: 3.5rem;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
    cursor: pointer;
}


.menu-box {
    position: fixed;
    z-index: 1001;
    display: flex;
    left: -200px;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
}



.menu-content {
    overflow: unset;
    width: 200px;
    background-color: white;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    box-shadow: 0 0 10px #BEBEBE;
    font-family: "Cairo", serif;
}

.menu-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-content ul li {
    padding: 0;
    margin: 0;
}
.menu-content ul li a {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #424242;
    transition:ease all 0.3s;
    -webkit-transition:ease all 0.3s;
    text-transform: uppercase;
}

.menu-content ul li a:hover {
    color: white;
    background-color: var(--main-color);
}

p.copyright {
    font-size: 13px;
}

.reference-link .zoom-box {

    position:absolute;
    z-index: 20;
    top:0;
    left:0;
    width:40px;
    height:40px;
    padding:5px 3px 5px 8px;
    background: var(--main-color);
    color:#FFFFFF;
    border-radius:0 0 50% 0;
}

.zoom-icon {
    width: 22px;
    height: 22px;

}

.form-control-form, .control-label-form {
    position:absolute; left:-10000px; top:auto;  overflow:hidden;
}