body {
    font-family: "Oswald", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;

    background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(264,960,459)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23FFF2CE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
header {
    background-image: url('szeles.jpg');
    background-size: cover;
    
    text-align: center;
    
}
section {
    padding: 20px;
    margin: 20px;
    background-color: #ffffffa4;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
footer {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    
}
#nagy1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
    margin-bottom: 20px;
}
#nagy1 section {
    max-width: 400px; /* Adjust as needed */
}
#terkep {
    max-width: 100%;
    
}
#nagy2{
    
    width: 100%;
    
    
}
h1{
    padding: 20px;
    font-size: 3rem;
}
#uzlet{
    
    
    width: 50%;
    
    
    
}
#kozep{
    text-align: center;
}
p{
    font-size: 1.8rem;
}
.topnav {
    overflow: hidden;
    position: fixed;
    width: 350px;
    top: 0;
    background-color: #33333350;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: top 0.3s;
}
.topnav input[type="text"] {
    float: left;
    padding: 10px;
    border: none;
    margin-left: 10px;
    font-size: 20px;
    
}
.topnav button {
    float: left;
    padding: 10px;
    border: none;
    
    font-size: 20px;
    cursor: pointer;
    background-color: transparent;
}
#nagyito{
    padding-left: 20px;
}
#search-results {
    margin-top: 20px;
}

#search-results p {
    font-size: 1.8rem;
    margin: 5px 0;
}
.highlight {
background-color: yellow;
}
#termekek{
    display:flexbox;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    
}
img{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.329); /* Adjust shadow properties as needed */
    border-radius: 8px; /* Optional: Add rounded corners for a nicer look */
}
#mellette{
    display: flex;
    vertical-align: auto;
    
}
.noshadow{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0); /* Adjust shadow properties as needed */
    border-radius: 0px; /* Optional: Add rounded corners for a nicer look */

    
}
#kapcs{
    margin: 20px;

}
#belso{
    text-align: center;
    margin-top: 20px;
}
#logo{
    background-color: #ffffffb9;
}
#rolunk{
   
    
    text-align: justify;
    
}
#hung2{
    text-align: center;
    margin-top: 30px;
}
h1{
    margin: 10px;
}
#koz{
    margin-top: 50px;
}
hr{
    width: 30%;
    border: 0; /* Remove default border */
height: 5px; /* Set the height of the line */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); /* Gradient background for a smooth transition */

}
@media only screen and (max-width: 1000px) {
    #hoszig{
        text-align: center;
    }
    body {
        background-image: none; /* Remove background image on mobile */
    }
    
    section {
        width: 90%; /* Adjust section width for mobile */
        margin: auto; /* Center sections on mobile */
    }
    #nagy1, #nagy2 {
        flex-direction: column; /* Stack elements vertically on mobile */
    }
    #kapcs, #rolunk {
        width: 100%; /* Full width for contact and about sections on mobile */
    }
    #terkep {
        width: 100%; /* Full width for map on mobile */
        height: 300px; /* Set fixed height for map on mobile */
    }
    #termekek {
        flex-direction: column; /* Stack product sections vertically on mobile */
    }
    #termekek img {
        width: 100%; /* Set images to full width on mobile */
        height: auto; /* Maintain aspect ratio */
    }
    #uzlet{
        width: 80%;
    }
    ul{
        margin-left: -30px;
        white-space: nowrap;
    }

    h2{
        margin-left: -15px;
        font-size: 2rem;
    }
    .telosmeret{
        width: 80% !important;
        
    }
    #termekek{
        text-align: right;
    }
    #mellette{
        display: inline;
    }

}

#jobbra{
    text-align: right;
}
#Egyeb3{

    text-align: center;
    margin-top: 50px;
}
ul{
    list-style-type:disc;
    font-size:1.8rem;
    
}
li{
    margin: 5px;
}
#lenti{
font-size: 1.5rem;    
}
.button-container {
text-align: center;
margin-top: 20px; /* Adjust as needed */
}
.button-container .button {
display: inline-block;
margin: 10px; /* Adjust as needed */
padding: 12px 30px;
background-color: #8B4513;
color: #fff;
text-decoration: none;
border: none;
border-radius: 25px;
font-family: "Oswald", sans-serif;
font-size: 3rem;
transition: background-color 0.3s ease;
width: 200px;


}
.button-container .button {
background-color: #a0512da1;
}
.button-container .button:hover {
background-color: #A0522D;
}
.button-container .active {
background-color: #A0522D; /* Change the background color for active page */
}

h2{
    font-size: 2rem;
}
#termekek img{
    max-width: 100%;
}

.ar{
    margin-left: 10px; color: red; text-decoration: underline; font-style: italic; font-weight: 300;
}

.kiemelt{
    margin-top: 70px;
    background-color: white;
    
    text-align: center;
    border: 5px solid rgb(255, 51, 0);
    background-image: url('hatter2.jpg');
    
}
.kiemelt_item img{
    height: 300px;
    
    vertical-align: middle;
}

.kiemelt_item{
    display: inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:70px;
    margin-left: 70px;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    
    /*position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
    
}

html{
    scroll-behavior: smooth;
}
.highlight {
    background-color: yellow;
    font-weight: bold;
}