:root {
    font-size: 1.11vw;
    --tittle-size: 3rem;
    --color-good: rgb(6, 147, 227);
    --colo-wow: #7bdcb5;
    --color-orange: rgb(227, 86, 6);
    --color-white: #fff;
    --color-orange: #FA5D29;
    --color-gray: rgb(184, 184, 184);
    --color-gray-backgraound: #d3d3d3;
    --color-blue: #0426a0;
    --color-black: #000;
    --text-shadow-tittle: 0.2px 5px 2px;


}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    -webkit-text-size-adjust: none;
     font-feature-settings: "kern";
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important ;
    -webkit-font-smoothing:antialiased;
    vertical-align: baseline;
}

body {
    font-family: Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important ;
    padding: 0;
    margin: 0;
    background: var(--color-white);
    z-index: 1;
    box-sizing: border-box;
    overflow-x: hidden;

}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

.popup{
    z-index: 12;
}
.flex-me {
    display: flex;
   }

.flex-me-row {
    display: flex;
    flex-direction: row;
}

.flex-me-column {
    display: flex;
    flex-direction: column;
}

.flex-me-center {
    justify-content: center;
    align-items: center;
}
.flex-justify-start{
    justify-content: flex-start;
    
}
.flex-justify-center{
    justify-content: center;
    
}
.flex-align-center{
    align-items: center;
}
.flex-align-start{
    align-items: flex-start;
}


@media only screen and (max-width: 768px) {

    /* For mobile phones: */
    :root {
        font-size: 16px;
    }
    .home-banner .home-banner-container .bubbles:nth-child(1) {
        padding: 1rem 0 0 1rem;
        justify-content: flex-start;
        align-items: flex-start;
        cursor: pointer;
    }
    
    .home-banner .home-banner-container .bubbles:nth-child(1) .right-header {
  flex-basis: 20%;
  max-height: 40%;
    margin: 0;
  z-index: 4;



    }
    .home-banner .home-banner-container .bubbles:nth-child(1) .right-header::before{
        content: "MENU";
        position: absolute;
        top: 1rem;
        left: 1rem;
        font-size: 1.5rem;
        color: #fff;
     align-self: center;
    }
    .home-banner .home-banner-container .bubbles:nth-child(1) .right-header::before:hover{
        background-color: #000;
        transform: scale(1.1);
        transition: all 1s ease-in-out;
    }

    
  
    .home-banner .home-banner-container .bubbles:nth-child(1) .right-header:hover .list-items{
        display: flex;
        cursor: pointer;
    }

    .home-banner  .home-banner-container .bubbles:nth-child(1) .right-header .list-items {
        flex-direction: column;
        position: absolute;
        align-items: center;
        top: 1rem;
        width: 40%;
        display: none;
        left: 5.5rem;
        opacity: 1;
        height: 30%;
        background-color: #fff;
        border-radius: 5%;
        
    
     }

     .home-banner  .home-banner-container .bubbles:nth-child(1) .right-header .list-items .items{
        color: var(--color-blue);
     }

     .home-banner  .home-banner-container .bubbles:nth-child(1) .right-header .list-items .items:hover{
        color: red;
     }
     

   

   




   
}