* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color: white;
}
html, body{
    height: 100%;
    width: 100%;
}
*::selection{
    background-color: #fff;
    color: #95C11E;
}
body::-webkit-scrollbar{
    display: block;
    width: 5px;
    background-color: #95c11e;
}
body::-webkit-scrollbar-thumb{
    background-color: white;
    border-radius: 50px;
}
#nav{
    height: 150px;
    width:  100%;
    /* background-color: red; */
    display: flex; 
    align-items: center;
    /* used to make center along y axis  */
    justify-content: flex-start;
    gap: 30px;
    padding: 0 120px;
    position: fixed;
    z-index: 999;
}
#nav img{
    height: 80px;
}
#nav h4{
    text-transform: uppercase;
}
#cursor{
    height:25px;
    width: 25px;
    background-color: #95C11E;
    border-radius: 50%;
    position: fixed;
    z-index: 99;
}
#cursor-blur{
    height:300px;
    width: 300px;
    background-color:  #96c11e2b;
    
    border-radius: 50%;
    position: fixed;
    filter: blur(40px);
    z-index: 9;
}

video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* used to fit video */
    position: fixed;
}
#main{
    position: relative;
    background-color: rgba(0, 0, 0, 0.7);
}
#page1{
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    /* The "justify-content: center;" aligns the flex items at the center of the container: it is used with display property mostly */
    align-items: center;
    /* align-items:  ;  is used to make alignment vertically */
    flex-direction: column;
    /* this is used to make column */
    text-align: center;
    z-index: 10;
}
#page1 h1{
     font-size: 100px;
     font-weight: 900; 
     position: relative;
}
/* in  the given website if we see EAT DRINK PLAY then we can clearly there is border on this heading and for this we use PSEDUO ELEMENTS WHICH IS USED TO WRITE WORD BY CSS  */
#page1 h1::before{
    content: "EAT.DRINK.PLAY.";
    /* content is use to write same thing using css  */
    color: black;
    position: absolute;
    top: -4px;
    /* top is use to make shade upper  */
    left: -4px;
    /* left is use to make shade on left side of the text  */
    -webkit-text-stroke: 2px rgb(29, 165, 174);
    /* this is use to make border and color which will make shade  */
    z-index: -1;
    /* The z-index property specifies the stack order of an element */
/* An element with greater stack order is always in front of an element with a lower stack order.  */
/* z-index only works on positioned elements like absolute relative fixed and also for flex  */
/* If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.   */
/* if it have negative value then it will be in back side  */
}
#page1 #arrow {
    height: 150px;
    width: 150px;
    background-color: transparent;
    border: 2px solid #95c11e;
    position: absolute;
    display: flex;
    left: -2%;
    bottom: 0%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all ease 0.5s;
  }
  #page1 #arrow i {
    font-size: 50px;
    font-weight: 100;
  }
  #page1 #arrow:hover {
    scale: 0.4;
    background-color: #95c11e;
  }

#page1 h2{
    font-size: 25px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 16px;   
}
#page1 p{
    font-size: 15px;
    font-weight: 500;
    width: 40%;
}
#page2{
   min-height: 100vh;
    width: 100%;  
    z-index: 10;
}
#scroller{
    /* background-color: red; */
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    z-index: 10;
}
#scroller::-webkit-scrollbar{
    display: none;
}
#scroller-in{
    display: inline-block;
    white-space: nowrap;
    animation-name: scroll;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#scroller h4{
    display: inline-block;
    font-size: 100px;
    font-weight: 900;
    margin-right: 10px;
    color: transparent;
    transition: all linear 0.8s;
    -webkit-text-stroke: 2px #95C11E;   
}
#scroller h4:hover{
    color: #95C11E;
} 
@keyframes scroll {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }   
}
#img{
    height: 50px;
    width: 50px;
}
#about-us{
    height: 40vh;
    width: 100%;
    display: flex;
    /* background-color: red; */
    align-items: center;
    justify-content: space-around;
    padding: 0 50px;
}
#about-us img{
    height: 220px;
    width: 220px;
    border-radius: 10px;
    object-fit: cover;
    position: relative;
    z-index: 10;
}
#about-us-in{
    width: 50%;
    text-align: center;
}
#about-us-in h3{
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: 700;  
}
#about-us-in p{
    font-size: 18px;
    line-height: 22px;
}
#card-container{
    /* background-color: rgb(243, 7, 7); */
    height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 10;
}
.card{
    height: 80%;
    width: 20%;
    /* background-color: blue; */
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: all ease 0.7s;
}
#card1{
        background-image: url(card3.jpg);
}
#card2{
    background-image: url(card1.jpg);
}
#card3{
    background-image: url(card2.jpg);
}
.overlay{
    height: 100%;
    width: 100%;
    background-color: #95C11E;
    border-radius: 5px;
    padding-top: 160px;
    padding: 30px;
    opacity: 0;
    transition: all ease 0.7s;
}
.overlay h4{
    color: black;
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 10px;
    /* white-space: nowrap; */
    font-weight: 800;
}
.overlay p{
    color: black;
    font-size: 15px;
    padding-bottom: 8px;
}
.card:hover .overlay{
    opacity: 1;
}
.card:hover{
    transform: rotate3d(-1,0,-1,10deg);
}
#green-div{
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: red; */
    background: linear-gradient( to left bottom, #119f3a, #ace022);
    /* linar gradient is used to mix color comination */
}
#green-div h4{
    width: 45%;
    line-height: 30px;
    text-align: center;
    color: black;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 800;
}
#green-div img{
    height: 100%;
    object-fit: cover;
    width: 15%;
}
#page3{
    height: 100vh;
    width: 100%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;  
}
#page3>p{
    font-size: 25px;
    font-weight: 800;
    width: 50%;
    text-align: center;
    line-height: 40px;
}
#page3 img{
    position: absolute;
    height: 45px;
}
#page3 #colon1{
    left: 15%;
    top: 25%;
}
#page3 #colon2{
    bottom: 30%;
    right: 15%;
}
#page4{
    height: 50vh;
    width: 100%;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    position: relative;
}
#elem{
    height: 60%;
    width: 25%;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}
#elem h2{
    height: 100%;
    width:100%;
    background-color: #95C11E;
    display: flex;
    align-items: center;
    color: black;
    justify-content: center;
    /* text-align: center; */
    font-size: 25px;
    transition: all ease 0.5s;
    font-weight: 900;
    position: absolute;
    z-index: 10;
}
#elem img{
    height: 100%;
    width:100%;
    object-fit: cover;
    scale: 1.1;
}
#elem:hover h2{
    color: #fff;
    background-color: transparent;
}
.elem:hover img {
    scale: 1;
  }
#page4 h1{
    font-size: 60px;
    position: absolute;
    top:0%;
    font-weight: 900;
    color: black;
    -webkit-text-stroke: 2px rgba(237, 235, 235, 0.906);
    font-family:sans-serif;
  }
#footer{
    height: 35vh;
    width: 100%;
    background: linear-gradient( to left bottom, #119f3a, #ace022);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 6.5vw;
    padding: 0 100px;
}
#footer > img {
    position: absolute;
    left: 0;
    height: 100%;
    z-index: 0;
  }
  #f1 img {
    height: 100px;
  }
  #f1,
  #f2,
  #f3,
  #f4 {
    width: fit-content;
    position: relative;
    z-index: 99;
    /* background-color: red; */
  }
  #f2 h3 {
    font-size: 1.6vw;
    white-space: nowrap;
    text-transform: uppercase;
    color: #000;
    font-weight: 900;
    margin-bottom: 8px;
  }
  
  #f3 h3 {
    font-size: 1.6vw;
    white-space: nowrap;
    text-transform: uppercase;
    color: #000;
    font-weight: 800;
    margin-bottom: 8px;
  }
  #f4 h4 {
    font-size: 1vw;
    white-space: nowrap;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 8px;
  }