html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.splitter {
    width: 100%; 
    position: relative;
    overflow: hidden;
}

.top-section {
    flex: 80;
}

.bottom-section {
    flex: 20;
    background-color: #000000 !important;
}

.nav-color {
    background: linear-gradient(
        to bottom,
        rgb(0, 0, 0) 0%,
        rgba(0, 0, 0, 0.9) 30%,
        rgba(0, 0, 0, 0.8) 40%,
        rgba(0, 0, 0, 0.7) 70%,
        rgba(0, 0, 0, 0.6) 80%,
        rgba(0, 0, 0, 0.4) 90%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.nav-link {
    font-family: "Bebas Neue", sans-serif; 
    font-size: 1.3rem !important;         
    letter-spacing: 1px;
    margin: 0 15px;                       
}

.navbar-brand.img-fluid {
    width: 110px !important; 
    height: auto;
}

.bg-grey {
    background-color: #2a2c2e; 
}

.font-color {
    color: #ffffff
}

.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgb(0, 0, 1));
}

.btn-foglalas {
    display: inline-block;
    position: absolute; 
    z-index: 5;
    bottom: 5%;
    
    padding: 12px 0;
    width: 100%;
    max-width: 400px; 
    
    background-color: rgb(38, 3, 166);
    color: white;
    font-family: 'Copperplate', 'Impact', fantasy; 
    font-size: 1.3rem;
    text-align: center;
    border: none;
    border-radius: 8px; 
    
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-foglalas:hover {
    background-color: rgb(60, 10, 200);
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.btn-foglalas:active {
    background-color: rgb(30, 2, 130);
    transform: translateY(0); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); 
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.berber-text {
    color:#1e1e1e;
    position: absolute;
    bottom: 39%;
    font-size: 9rem;
}

.gallery-img {
    height: 300px;
    width: 100%;
    object-fit: fill;
}