.bg {
    margin: 0;
    overflow: auto;
}

.bg::before {
    content: "";
    background-image: url("./images/food-4k-1pf6px6ryqfjtnyr.jpg");
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(24px); 
}

.topBar {
    background-color: rgba(255, 167, 68, 0.95);
    width: 100vw;
    height: 3.5vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    min-width: 100%;
    max-width: 100%;
}

#logoTop {
    width: 4vw;
    height: auto;
    position: fixed;
    right: 0;
    padding-top:0.2vw
}

.topBarRight {
    width: viewport-width;
    height: 3.5vw;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
}

.contacts {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

#contact {
    width: 3.5vw;
}

#dataSurvey {
    width: 40vw;
    height: auto;
    border-radius: 1vw;
}

#busPlan {
    width: 40vw;
    height: 37.3vw;
    object-fit: cover;
    border-radius: 1vw;
}

#adVid {
    /* display: block; */
    /* margin: auto; */
    /* padding-top: 6vw;  */
    right: 0vw;
    bottom: 0vw;
    position: fixed;
    width: 20vw;
    height: 20.7vh;
    /* border-radius: 1vw; */
    z-index: 3;
    /* border: 0.2vw solid rgba(0, 2, 2, 0.95); */
    /* border-radius: 1vw; */
}

#cardBack {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vw;
}

#premium {
    position: relative;
    padding: 2vw;
    display: block;
    margin: auto;
    z-index: 1;
    width: 40vw;
    margin-top: 5vw; 
}

/* .logo {
    display: block;
    margin: auto;
    width: 27vw;
    height: auto;
    position: relative;
} */

#logoWrite {
    width: 6.5vw;
    height: auto;
}

.bottomBar {
    background-color: rgba(255, 167, 68, 0.95);
    width: viewport-width;
    height: 3.5vw;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    min-width: 100%;
    max-width: 100%;
}

.topBarButtons{
    /* padding: 0.5vw; */
    padding-top: 0.5vw;
    display: flex;
    flex-direction: row;
    gap: 1vw;
    position: fixed;
}
.buttons {
    width: 2vw; /* Set a standard width for all images */
    height: auto; /* Maintain aspect ratio */
    margin-left: 0.5vw;
}

.searchBarBox {
    background-color: rgba(0, 0, 0, 0.5);
    width: 21vw;
    height: 5.5vw;
    margin: auto;
    margin-top:8vw;
    border-radius: 1vw;
}

.exampleBox {
    background-color: rgba(0, 0, 0, 0.5);
    width: 60vw;
    height: 94vw;
    margin: auto;
    margin-top:3vw;
    border-radius: 1vw;
    margin-top: 4vw;
}

.exampleText {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vw;
    color: white;
    font-size: 1.5vw;
    font-family: 'Courier New', Courier, monospace;
    /* margin: 1vw; */
    padding: 0.5vw;
    text-align: center;
    padding-top: 45vw;
}

#exampleText {
    display: flex;
    flex-direction: row;
    /* gap: 0.2vw; */
    color: white;
    font-size: 1.5vw;
    font-family: 'Courier New', Courier, monospace;
    /* margin: 1vw; */
    padding: 1vw;
    text-align: left;
    padding-top: 1vw;
    position: relative;
}

.weirdText {
    color: white;
    font-size: 1vw;
    font-family: 'Courier New', Courier, monospace;
    /* margin: 1vw; */
    padding: 0.5vw;
}

.colum {
    width: 110%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
}

#borger {
    position: relative;
    width:58vw;
    height: auto;
    border-radius: 2.5vw;
    display: block;
    margin: auto;
    }

#exampleB {
    position: relative;
    width: 58vw;
    height: auto;
    padding: 0.5vw;
    border-radius: 2.5vw;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;

}

.createBox {
    display: block;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    width: 20vw;
    height: 23vw;
    /* margin: auto; */
    margin-top:3vw;
    border-radius: 1vw;
}

::placeholder {
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
.searchBar{
    width: 18vw;
    margin: 0 auto;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
    position: relative;
}

.createOrder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
}

#createImg {
    display: none;
}

#createImgLabel {
    width: 18vw;
    height: 1vw;
    margin: 0 auto;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
    text-align: center;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
}

.topAd {
    position: sticky;
    top: 4vw;
    margin-top: 5vw;
    width: 50%;
    z-index: 1;
    margin-left: 25%;
}

#createImgLabel:hover {
    background-color: rgba(255, 188, 112, 0.95);
}

#createName {
    gap: 1vw;
    font-size:75%;
    width: 18vw;
    height: 1.5vw;
    margin-top: 1vw;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
}

#createFood {
    font-size:75%;
    width: 18vw;
    height: 1.5vw;
    margin: 0 auto;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
}

#createIngredients {
    width: 18vw;
    height: 3vw;
    margin: 0 auto;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
}

#createRecipe {
    width: 18vw;
    height: 7vw;
    margin: 0 auto;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
}

#createButton {
    width: 18;
    height: 2vw;
    margin: 0 auto;
    border-radius: 0.3vw;
    background-color: rgba(255, 167, 68, 0.95);
    color: white;
    text-align: center;
    padding-top: 0.5vw;
    padding-bottom: 1.5vw;
}

#createButton:hover {
    background-color: rgba(255, 188, 112, 0.95);
}

.info {
    background-color: rgba(0, 0, 0, 0.5);
    width:50vw;
    height: 100vw;
    margin: auto;
    margin-top: 5vw;
    border-radius: 1vw;
    position: relative;
    z-index: 0;
}

.business {
    background-color: rgba(0, 0, 0, 0.5);
    width:50vw;
    height: 155vw;
    margin: auto;
    margin-top: 5vw;
    border-radius: 1vw;
    position: relative;
    z-index: 0;
}

.aboutTitle {
    color: white;
    text-align: center;
    font-size: 3vw;
    margin-bottom: 2vw;
    padding-top: 1vw;
    font-family: 'Courier New', Courier, monospace;
}

.writing {
    color: white;
    text-align: center;
    font-size: 1vw;
    margin: 1vw;
    padding: 0.5vw;
    font-family: 'Courier New', Courier, monospace;
}

.search-container {
    display: flex;
    justify-content: center;
    padding-top: 1vw;
}

.search-box {
    border-radius: 1vw;
    padding: 1vw;
    font-size: 1vw;
    background-color: rgba(255, 167, 68, 0.95);
    width: 60%;
    height: 20%;
}

.search-box::placeholder {
    color: white;
    font-family:'Courier New', Courier, monospace;
  }

.search-button {
    border-radius: 10px;
    width: 20%;
    height: 6.5vh;
    /* padding: 1vw; */
    cursor: pointer;
    background-color: rgba(255, 167, 68, 0.95);
    color: rgba(84, 45, 0, 0.95);
    font-family: "Times New Roman", Times, serif;
}

.search-button:hover {
    background-color: rgba(255, 188, 112, 0.95);;
}

.search-button img {
    width: 20px;
    height: 20px;
}

.search-button:hover img {
    filter: brightness(0.8);
}

.center_cards {
    display: flex;
    justify-content: center; /* Center horizontally */
    position: relative;
    gap: 1vw;
}

.card {
    width: 23vw;
    border-radius: 1vw;
}

.card-main {
    border-radius: 1vw;
    width: 18vw;
}

.buttonSuit {
        width: 2.5vw; /* Set a standard width for all images */
        height: auto; /* Maintain aspect ratio */
        margin-left: 0.5vw;
}