/* CSS Document */
:root {
    --main-color: #ae976d; /* Definícia farby ako CSS premenná */
    --second-color: #95815d; /* Definícia farby ako CSS premenná */
}
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Základná hodnota je 400 */
}
h1,h2,h3,h4,h5,h6{
font-weight:bold;
}
h2.main-title{
font-size:2rem;
font-weight:bold;
}
a{
text-decoration:underline;
color: var(--main-color);
}
a:hover{
text-decoration:none;
color: var(--second-color);
}
/* Vlastné štýly pre hlavičku */
.top-header, .main-header {
    padding: 15px 2vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

.top-header {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #999;
    top: 0;
    height: 50px;
    font-size: 0.8rem;
    
}

.top-header a {
    margin-left: 15px;
    text-decoration: none;
    color: white;
    text-decoration:none;
}
.top-header a:hover {
    text-decoration: underline;
}
    .menu-content a {
     text-decoration:none;
}
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 50px;
    width: 100%;
    height: 90px;
}

.main-header img.logo {
    height: 50px;
    width: 225px;
}

.main-header a {
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    transition: color 0.3s ease;
    text-decoration:none;
    margin-left:2rem;
}

.main-header a:hover {
    color: var(--main-color);
}

/* Ikona pre mobilné menu */
.menu-icon {
    font-size: 2rem;
    cursor: pointer;
    display: none;  /* Skryté na desktop */
    color: white;
    position: absolute;
    right:3vw;
    z-index:1001;
}

/* Skrytie menu na mobilných zariadeniach */
.mobile-menu {
    display: none;
    position: fixed;
    top: 50px; /* Posunutie mobilného menu o 50px nadol */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    margin-top: 40px; /* Priestor na krížik */
}

.mobile-menu a {
    color: white;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: 10px;
    display: block;
    text-align: center;
}

/* Prechod animácie */
.mobile-menu {
    transition: transform 0.3s ease;
    transform: translateY(-100%);
}

.mobile-menu.active {
    display: block;
    transform: translateY(0);
}



/* Štýly pre carousel */
.carousel {
    margin-bottom:2rem;
    height:700px;
}
.carousel-indicators{

}
.carousel-item {
    height: calc(100vh + 100px);
    background-size: cover;
    background-position: center;
    position: relative; /* Umožní carouselu zasahovať pod hlavičku */
    top: -100px; /* Carousel sa posunie pod hlavičku */
}

.carousel-caption {
    left: 100px;
    text-align: left;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.carousel-caption h1 {
    font-size: 4rem;
    font-weight:bold;
}
.carousel-caption h2 {
    font-size:1.5rem;
    font-weight:bold;
}

.btn-primary {
    margin-top: 20px;
    background-color: var(--main-color);
    border:0;
    border-radius:0;
    font-size:1.2rem;
    padding:1rem 2rem;
    text-transform: uppercase;
    font-weight:bold;
    transition: background-color 0.3s ease;
}
.btn-primary.small{
    margin-top: 0px;
    font-size:0.8rem;
    padding:0.5rem 1rem;
    transition: background-color 0.3s ease;
}
.btn-primary.small:hover{
    color:white;
    background-color: var(--second-color);
}
.btn-primary:hover {
    background-color: var(--second-color);
}

.carousel-indicators [data-bs-target] {
    background-color: white;
}

        .container-fluid.info {
            background: #edece8;
            margin-top:1rem;
        }
        .container-fluid.info h1{
            padding-top:2rem;
        }

        .container-fluid.info .block {
            padding: 20px;
            margin:0 1vw 20px;
            flex: 1; /* Rozšíri blok na plnú šírku */
        }
        .container-fluid.info .block h2{
            text-transform: uppercase;
            font-weight: bold;
            color:white;
            background-color: #38ab74;
            font-size:1.5rem;
            margin:0;
            display: inline-block;
            padding:10px;
        }
        
        .container-fluid.info .block h4{
            text-transform: uppercase;
            font-weight: bold;
             color:white;
            background-color: #464447;
            font-size:1rem;
            margin:0;
            display: inline-block;
            padding:10px;
      }
        .container-fluid.info .block p{
            margin-top:10px;
            padding:5px;
            text-align: justify;
        }
        
.box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Dynamické prispôsobenie boxov */
    gap: 1px; /* 1px medzera medzi boxami */
    width: 100%; /* Kontajner na celú šírku obrazovky */
    margin-bottom:2rem;
}

.box {
    position: relative;
    height: 350px;
    overflow: hidden;
    text-decoration: none;
}

.box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.box h2 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin: 0;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Jemný tieň */
    font-size: 1.5rem;
    z-index: 10;
}

/* Stmavenie obrázka pomocou overlay */
.box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    z-index: 5;
}

.box:hover::after {
    background-color: rgba(0, 0, 0, 0.7); /* Stmavnutie na hover */
}


.container-md{
width: 75vw;
}
.custom-list {
    list-style-type: none; /* Odstráni pôvodnú bodku */
    padding: 0;
}

.custom-list li {
    position: relative;
    padding-left: 50px; /* Priestor pre väčšiu bodku */
    margin-bottom: 40px; /* Medzera medzi položkami */
    font-size:1.2rem;
}

.custom-list li::before {
    content: '•'; /* Pridá vlastnú bodku */
    position: absolute;
    left: 0;
    font-size: 5em; /* Väčšia bodka */
    color: var(--main-color); /* Nastaví farbu bodky */
    line-height: 0; /* Upraví vertikálne zarovnanie */
    padding-top:10px;
}
   
   
footer{
background:#4d4d4d;
color:white;
padding-bottom:3rem;
color:#e5e5e5;
margin-top:20px;
}   
footer p{
font-size:0.8rem;
}
.custom-list-footer {
    list-style-type: none; /* Odstráni bodky zoznamu */
    padding: 0;
    margin: 0;
}

.custom-list-footer li {
    margin-bottom: 15px; /* Medzera medzi položkami */
}

.custom-list-footer a {
    text-decoration: none;
    color: #d6d1d1;
    font-size: 0.8rem;
    align-items: center;
    font-weight:normal;
}
.custom-list-footer a:hover {
    text-decoration: underline;
}

.custom-list-footer a i {
text-decoration: none;
    margin-right: 8px; /* Odsadenie ikony od textu */
    color: var(--main-color); /* Farba ikony */
    font-size: 0.8rem;
}
.custom-list-footer a i:hover {
    text-decoration: none;
}

form.news input[type="email"]{
border:1px solid #d6d1d1;
padding:5px 10px;
font-size:1rem;
}
form.news input[type="submit"]{
border:1px solid var(--main-color);
padding:5px 20px;
font-size:1rem;
background:var(--main-color);
color:white;
text-transform:uppercase;
}
form.news{
color: #d6d1d1;
font-size:0.8rem;
}

.main-cont {
padding-top:50px;
}
.main-title {
padding-top:200px;
background-color:#edece8;
margin-top:-30px;
}
header{
margin-top:-25px;
}

      .controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .controls label {
            font-size: 14px;
        }
        .controls input {
            width: 200px;
        }
                canvas {
            //border: 1px solid black;
            background-color: white;
            max-width:90vw;
        }
table#innerWallsTable tr td{
border:1px solid gray;
padding:5px;
}
table#innerWallsTable tr th{
text-align:center;
}
        .note-editor.note-frame.card,
.note-editable.card-block {
  background-color: rgba(255, 255, 255, 0); /* Biele priesvitné pozadie */
}