body {
    margin: 0;
    background: url('./background.jpg') no-repeat center center fixed;
    background-size: cover;            
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.background-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(12 18 0 / 79%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    z-index: 0;
}

.main{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: absolute;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    overflow-x: hidden;
}

.container {
    z-index: 1;
    width: 90%;
    text-align: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-between;
    padding: 15px 0 15px 0;
    overflow-x: hidden;
}

h1 {
    color: #f5b818;
    font-family: "Open Sans Hebrew", Sans-serif;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 30px;
    animation: fadeInDown 1s ease-out;
}

p {
    text-align: center;
    color: #ffffff;
    font-family: "Open Sans Hebrew", Sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 10px 0;
    animation: fadeInUp 1.2s ease-out;
}

p .fa-solid{
    color: #f5b818;
}

.button {
    margin-top: 20px;
    transition: background-color 0.3s ease;
    animation: fadeInUp 1.5s ease-out;
    background-color: rgb(245, 184, 24);
    border-bottom-left-radius: 42px;
  /*  border-bottom-right-radius: 42px;
    border-top-left-radius: 42px; */
    border-top-right-radius: 42px;
    box-shadow: none;
    box-sizing: border-box;
    color: rgb(12, 18, 0);
    cursor: pointer;
    display: inline-block;
    fill: rgb(12, 18, 0);
    font-family: Roboto, sans-serif;
    font-size: 26px;
    font-weight: 500;
    height: 60px;
    hyphens: manual;
    line-height: 20px;
    padding: 17px 30px;
    text-align: center;
    text-decoration-color: rgb(12, 18, 0);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-size-adjust: 100%;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    width: 280px;
    -webkit-font-smoothing: antialiased;
}


.button:hover {
    background: #0088cc;
}



.taxi-image {
    margin-top: 30px;
    max-width: 35%;
    height: auto;
    display: block;
    animation: fadeInRight 1s ease-out;
    -webkit-animation: fadeInRight 1s ease-out;
}

.fa-hand-point-down{
    -webkit-animation-duration: 2s;
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
    animation-iteration-count: infinite; 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}

.fa-phone{
    -webkit-animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
    animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
}

@-webkit-keyframes bounce { 
    0%, 40%, 50%, 60%, 100% {-webkit-transform: translateY(0);} 
    20% {-webkit-transform: translateY(30px);} 
    80% {-webkit-transform: translateY(40px);} 
 } 
 
 @keyframes bounce { 
    0%, 40%, 50%, 60%, 100% {transform: translateY(0);} 
    20% {transform: translateY(30px);} 
    60% {transform: translateY(40px);} 
 }
 
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
}
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
}
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
}
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
}
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(400px);
        -webkit-transform: translateX(400px);
        -moz-transform: translateX(400px);
        -ms-transform: translateX(400px);
        -o-transform: translateX(400px);
}
    to {
        opacity: 1;
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}
}


@keyframes vibrate {
    0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18% {
              -webkit-transform: translate3d(-2px, 0, 0);
              transform: translate3d(-2px, 0, 0);
              -moz-transform: translate3d(-2px, 0, 0);
              -ms-transform: translate3d(-2px, 0, 0);
              -o-transform: translate3d(-2px, 0, 0);
}
    1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% {
              -webkit-transform: translate3d(2px, 0, 0);
              transform: translate3d(2px, 0, 0);
              -moz-transform: translate3d(2px, 0, 0);
              -ms-transform: translate3d(2px, 0, 0);
              -o-transform: translate3d(2px, 0, 0);
}
    20%, 100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  

@media (max-width: 768px) {
    h1 {
        font-size: 45px;
    }

    p{
        font-size: 20px;
    }

    .taxi-image{
        max-width: 90%;
        margin-top: 25px;
    }


    .button {
        margin-top: 10px;
        font-size: 24px;
        height: 50px;
        padding: 13px 35px;
        width: 250px;
    }
}


footer {
    position: relative;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background: #32373c;
    color: #fff;
    width: 100%;
   
}