*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Nunito", serif;

}



.m-content{

    max-width: 2000px;

    margin: 0 auto;

}



.h-image{

    width: 100%;

    /*height: 100vh;*/

}



.flex-wrapper{

    display: flex;

    flex-direction: row;

    width: 80%;

    margin: 3rem auto 0;

    gap: 1vw;

    justify-content: space-between;

}



.left-side,

.right-side{

    height: fit-content;

}



.left-side{

    width: 55%;

    padding: 1rem;

}



.p-header{

    font-size: 24px !important;

    font-weight: 600;

    margin: 1.5rem 0 1rem;

}



.right-side{

    width: 40%;

    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;

    border-radius: 20px;

    padding: 1.5rem;

}



.basic-text{

    font-size: 18px;

}



.left-side ul{

    margin: 0 0 0 30px;

}



.li-space{

    margin-bottom: 12px;

}



.price-container{

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.divide-line{

    width: 100%;

    height: 1px;

    background-color: #666;

    margin: 1.2rem 0;

}



.row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    padding: 10px;

    border-radius: 8px;

}



.highlight{

    background-color: #ffbc20;

}



.left-highlight{

    position: relative;

}



.left-highlight::after{

    content: "Nejvýhodnější!";

    position: absolute;

    margin-left: 10px;

    font-size: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #666;

}



.hour-svg{

    width: 20px;

}



.row .left {

    font-weight: bold;

    color: #333;

}



.row .right {

    font-weight: bold;

    color: #666;

}



.left-inner{

    display: flex;

    flex-direction: row;

    gap: 8px;

    justify-content: center;

}



label {

    display: block;

    margin-bottom: 8px;

    font-weight: bold;

    color: #333;

}



input[type="text"],

input[type="tel"],

input[type="datetime-local"],

input[type="email"],

textarea {

    width: 100%;

    padding: 10px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 16px;

    box-sizing: border-box;

}



input[type="text"]:focus,

input[type="tel"]:focus,

input[type="datetime-local"]:focus,

input[type="email"]:focus,

textarea:focus {

    border-color: #D9AE74;

    outline: none;

    box-shadow: 0 0 5px rgba(217, 174, 116, 0.5);

}



button {

    width: 30%;

    padding: 10px;

    background-color: #D9AE74;

    color: #fff;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.3s;

}



button:hover {

    background-color: #c98f49;

}



.call-container{

    margin: 1rem 0 0;

}



.call-container p{

    font-size: 18px;

    font-weight: 600;

}

.call-container a{

    color: #c98f49;

}



@media (max-width: 1200px) {

    .flex-wrapper {

        width: 90%;

        gap: 2vw;

    }

    

    .left-side {

        width: 60%;

    }



    .right-side {

        width: 35%;

    }

}



@media (min-width: 1021px) {

    .call-phone{

        display: none;

    }

}

@media (max-width: 1020px) {

    .flex-wrapper {

        flex-direction: column;

        width: 95%;

        gap: 2rem;

    }



    .left-side,

    .right-side {

        width: 100%;

    }

    

    .price-container {

        gap: 10px;

    }

    

    button {

        width: 100%;

    }

    .form-container{

        width: 100%;

    }

    .price-container{

        width: 70%;

    }

    .right-side{

        display: flex;

        flex-direction: row;

        justify-content: space-between;

        gap: 3rem;

    }

    .divide-line{

        display: none;

    }

    .call-container{

        display: none;

    }

    .call-container-line{

        display: block;

    }

}





@media (max-width: 768px) {

    .flex-wrapper {

        gap: 1rem;

    }

    

    .left-side {

        width: 100%;

    }



    .right-side {

        width: 100%;

        margin-bottom: 1rem;

        gap: 1rem;

    }



    .p-header {

        font-size: 20px;

    }

    .form-container{

       width: 70%;

     }

}



@media (max-width: 540px) {

    .hour-svg{

        display: none;

    }

}



@media (min-width: 1020px) {

    .call-container-line{

        display: none;

    }

}

@media (max-width: 400px) {

    .hour-svg {

        display: block;

    }

    .call-phone{display: none}

    .right-side{

        flex-direction: column;

    }

    .price-container{

        width: 100%;

    }

    .form-container{

       padding: 10px;

       width: 100%;

    }

    .t1{

        display: block;

    }

    .call-container{

        display: block;

    }



}



@media (max-width: 480px) {

    .p-header {

        font-size: 18px;

    }

    

    input[type="text"],

    input[type="tel"],

    input[type="datetime-local"],

    input[type="email"],

    textarea {

        font-size: 14px;

    }



    .basic-text {

        font-size: 16px;

    }

}



@media (max-width: 350px) {

    .left-highlight::after{

        display: none;

    }

}









.row {

    cursor: pointer;

    transition: border 0.3s ease;

    border: 2px solid #fff;

}

.row.selected {

    border: 2px solid limegreen;

    border-radius: 9px;

}





.row svg .cls-1 {

    transition: fill 0.3s ease;

    fill: #101820; /* Default fill color */

}



.row.selected .cls-1 {



    fill: limegreen; /* Fill color when selected */

}



.call-phone{

    font-size: 20px;

    font-weight: bold;

}

.call-phone a{

    color: #c98f49;

}

.header img{

    filter: brightness(0.6);

}



li::marker{

    color: #c98f49;

}