html,body{
    overflow: hidden!important;
    width: 100vw;
    height: 100vh;
}



/* main image  */

img {
    width: 92vh;
    z-index: 5;
    position: relative;
    bottom: 0;
    pointer-events: none;
    transform: translateX(-100vw); 
    
}
img.animate{
    animation: slideInImg 0.5s ease forwards;
}

/* main content  */
.content{
    
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    /* padding-left: 17rem; */
    text-align: right;
    font-family: futurabkbold;
    margin-top: 3rem;
    
    color: white;
    text-shadow: 9px 11px 12px rgba(0, 0, 0, 0.3);
    /* overflow-x: hidden; */

}
.content h2{
    position: relative;
    top:-12vh;
    
    right: 10vw;
    transform: rotate(-4.5deg);
    font-size: clamp(2rem, 13vh, 10vw);
    animation: slideIn 1.5s ease-in-out forwards;
    /* line-height: 7.5rem; */
}

@keyframes slideIn {
    0% {
      transform: translateX(100vw)
    }
    60% {
      transform: translateX(-3vw) rotate(-4.5deg);
    }
    100% {
      transform: translateX(0) rotate(-4.5deg);
    }
  }
  
  @keyframes slideInImg {
    0% {
        transform: translateX(-100vw); /* Fully outside the viewport */
    }
    100% {
        transform: translateX(3vw); /* Final position */
    }
}
.content h2 span{
    font-size: clamp(2rem, 15vh, 10vw);
}
.content a{
    position: relative;
    background-color: #59A757;
    color: white;
    text-decoration: none;
    text-shadow: none;
    padding: 0.8rem 1.3rem;
    border-radius: 2rem;
    padding-top: 0.4rem;
    z-index: 9;
    box-shadow: 9px 11px 12px rgba(0, 0, 0, 0.3);
    transition: 0.2s all ease;
}
.content a:hover{
    background: white;
    color: #59A757;
    box-shadow: 12px 14px 12px rgba(0, 0, 0, 0.3);
}

.navContainer li, .menu-links li, .mob-menu ul li {
    color: #FFFBDE !important;
}

footer {
  background-color: #4682A9;
}

.footer {
  background-color: #4682A9;
}

.footer input {
  background-color: white;
}


@media screen and (max-width: 1150px) {
    .content h2{
        font-size: 8vw;
    }
    .content h2 span{
        font-size: 9vw;
    }
    img{
        width: 55vw;
    }
    .content h2{
        top: -14vh;
    }
  }
@media screen and (max-width: 1026px) {
    .content h2{
      right: 23vw;
    }
  }

@media screen and (max-width: 768px) {
    img{
        position: absolute;
   
        bottom: 0;
    }
.content{
    height: 73vh;
    margin-top: 0;
    align-items: start;
    overflow: hidden;
}
.content h2{
top: auto;
right: 0;
font-size: 3rem;
line-height: 4.1rem;
font-weight:500;

}

.content h2 span{
    font-size: 3.4rem;
}
img{
    width: 20rem;
}




}