@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing:border-box;
    scroll-behavior: smooth;
}
body{
    background-color: rgb(34,34,34);
    
    
}

/* header styling */
header {
    width: 100%;
    height: fit-content;
    padding: 1%;
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color: rgb(0, 0, 0);
    z-index: 2;
    position: fixed;
    top: 0;
}

nav {
    width: 100%;
    display: flex;
    gap: 70px;
    color: rgb(255, 255, 255);
}

nav > img {
    margin-bottom: 5px;
}

nav > a {
    margin-top: 15px;
    text-decoration: none;
    color: rgb(255, 255, 255);
}

nav > a:hover {
    color: rgb(255, 0, 0);
    transition: 2s ease-in-out;
}
nav> i{
    margin-top: 15px;
}

.menu {
    display: none;
    flex-direction: column;
    gap: 3px;
    margin-top: -15px;
    cursor: pointer;
    position: absolute;
    top: 20px;
}

.bar {
    display: none;
    height: 4px;
    width: 25px;
}
 /* media querry for header */
 @media (max-width: 1200px) {
    
    header{
        width: 1200px;
        height: 150px;
        margin-bottom: 30px;
    }

    nav {
        width: 100%;
        display: flex;
        gap: 60px;
        height: 100px;
        font-size: 18px;
        transform: translateX(50px);
    }
    nav > img {
        height: 80px;
        margin-top: 12px;
    }
    
    nav > a {
       margin-top: 40px;
    }
    nav> i{
        margin-top: 40px;
    }
    .menu{
        height: 20px;
        margin-bottom: 50px;
}
}

@media (max-width: 768px) {
    
    header{
        width: 1200px;
        height: 150px;
        margin-bottom: 30px;
    }

    nav {
        width: 100%;
        display: flex;
        gap: 60px;
        height: 100px;
        font-size: 18px;
        display: none;
    }
    .logo{
        transform: translateX(500px);
    }
    .logo img {
        height: 80px;
        margin-top: 12px;
    }
    
}

#welcome{
    width: 100%;
}


.welcome-container {
    width: 100%;
    padding: 3%;
    margin: 3px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: rgb(25,19,17)
}

.welcome-item {
    margin-top: 20px;
    width: 50%;
    height: 500px;
}

.welcome-item > p {
    padding-bottom: 3%;
    text-align: center;
    font-family: 'Courgette', cursive;
    line-height: 1.3;
    font-size: 70px;
    margin-top: 50px;
    color: rgb(255, 255, 255);
}

.welcome-item > span {
    font-family: 'Poppins';
    justify-content: center;
    text-align: center;
    display: flex;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 11px;
    font-size: 80px;
    color: rgb(255, 255, 255);
}

.welcome-item > button {
    border-radius: 12px;
    border: 0;
    background-color: white;
    color: rgb(255, 0, 0);
    text-align: center;
    display: flex;
    padding: 3% 3% 3% 3%;
    margin: 120px auto;
}

.welcome-item > button:hover {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
}

/* media query for welcome */
@media (max-width: 1200px) {
    #welcome{
     width: 1200px;
    }
     .wecome-container{
         flex-direction: column;
     }
     .welcome-item{
         width: 90%;
     }
     .welcome-item  p{
        margin-top: 100px;
     }
 }

@media (max-width: 768px) {
   #welcome{
    width: 1200px;
   }
    .wecome-container{
        flex-direction: column;
    }
    .welcome-item{
        width: 90%;
    }
    .welcome-item  p{
        margin-top: 100px;
     }
}

@media screen and  (max-width:470px) {
    
    #welcome{
        width: 1200px;
       }
        .wecome-container{
            flex-direction: column;
        }
        .welcome-item{
            width: 90%;
        }
        .welcome-item  p{
            margin-top: 100px;
         }
    }

/* home styling */
#home {
    background-color: rgb(224, 219, 202);
}

.home-container {
    width: 100%;
    padding: 18px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: rgb(224, 219, 202); 
}

.home-item {
    width: 40%;
    height: 500px;
    overflow: hidden;
}

.home-item>h1{
     
        text-align: center;
        line-height: 1.2;
        padding: 3% 0% 3% 0%;
        font-size: 30px;
        font-family: 'Courgette', cursive;
    color: rgb(252, 7, 7);
}

.home-item>h2 {
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 2% 0% 3% 0%;
    font-size: 50px;
    font-family: 'Poppins';
    font-weight: 650;
    letter-spacing: 4px;
}

.home-item>p{
    color: #605f5f;
        padding: 5% 4% 6% 5%;
        text-decoration: none;
        text-align: center;
        font-family: Montserrat;
        font-weight: 500;
        font-size: 17px;
        line-height: 1.5;
    }
   
    .stori {
        text-decoration: none;
        display: flex;
        justify-content: center;
        margin: auto;
        font-weight: 400;
        font-size: 15px;
        color: rgb(0, 0, 0);
        text-align: center;
        font-family: 'Montserrat';
         
    }
    .story {
        color: rgb(0, 0, 0);
        text-decoration: none;
        font-family: 'Montserrat';
        font-weight: 500;
        font-size: 15px;
        
    
    }
    .story:hover{
        color: rgb(252, 3, 3);
    }
    .home-item:last-child{
        overflow: hidden;
        border-radius: 20px;
    }
    .image>img{
        width: fit-content;
        height: fit-content;
        
    }
    .image:hover{
        transition: 7s ease-in-out;
        transform: scale(3);
    }
    
    
    .fa-arrow-right {
       padding: 0.4%;
    }

/* media query for welcome */
@media (max-width: 1200px) {
    #home{
     width: 1200px;
    }
     .home-container{
        display: flex;
     }
     .home-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #home{
    width: 1200px;
   }
    .home-container{
        flex-direction: column;
    }
    .home-item{
        width: 60%;
    }
    .home-item p{
        font-size: 30px;
    }
}

@media screen and  (max-width:470px) {
    
    #home{
        width: 1200px;
       }
        .home-container{
            flex-direction: column;
        }
        .home-item{
            width: 60%;
        }
        .home-item p{
            font-size: 30px;
        }
    }

     /* discover styling */
     #discover {
        background-image: url('Discovery.jpg');
        background-color: rgb(189, 45, 45);
        margin-top: -20px;
        height: fit-content;
        
    }
    
    .discover-container {
        width: 97%;
        padding: 3%;
        margin:  auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    
    .discover-item {
        width: 50%;
        height: 400px;
    }
    .discover-item>h1 {
        font-family: 'Courgette', cursive;
        color: rgb(187, 21, 26);
        text-align: center;
        padding-top: 10%;
        font-size: 40px;
        line-height: 1.8;
       
    }
    .discover-item>h2 {
        text-align: center;
        margin-top: 10px;
        font-family: "Poppins";
        font-weight: 800;
        font-size: 60px;
        line-height: 1.5;
        color: rgb(255, 254, 254);
        letter-spacing: 8px;
        word-spacing: 8px;
    }
/* media query for discover */
@media (max-width: 1200px) {
    #discover{
     width: 1200px;
    }
     .discover-container{
        display: flex;
     }
     .discover-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #discover{
    width: 1200px;
   }
    .discover-container{
        flex-direction: column;
    }
    .discover-item{
        width: 60%;
    }
}

@media screen and  (max-width:470px) {
    
    #discover{
        width: 1200px;
       }
        .discover-container{
            flex-direction: column;
        }
        .discover-item{
            width: 60%;
        }
    }

    /* restaurant styling */

    #restaurant{
       background-color:  rgb(255,251,251);
       border-bottom: 1.2px solid rgb(85, 83, 83);
       margin-top: -30px;
       
    }
    .restaurant-container{
        width: 100%;
        margin: 15px auto;
        padding: 6%;
        justify-content: center;
        align-items: center;
        display: flex;
        gap: 50px;
    }
    .restaurant-item{
        width: 40%;
        height: 420px;
        overflow: hidden;
    }

    .restaurant-item>img{
        width: 100%;
        height: fit-content;
        border-radius: 20px 20px 10px 10px;
        overflow: hidden;
    }
    .restaurant-item>a{
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        margin-top: 60px; 
        font-family: "Poppins";
        font-weight: 500;
        color: rgb(51, 51, 51);
        letter-spacing: 4px;
    }
    .restaurant-item > a:hover{
        color: rgb(252, 1, 1);
    }
    .restaurant-item>p{
         text-align: center;
         display: flex;
         justify-content: center;
         font-family: "Montserrat";
         font-weight: 400;
         font-size: 15px;
         line-height: 1.5;
         padding-left: 3%;
         color: rgb(102, 102, 102); 
    }
    .learn{
        text-decoration: none;
        font-family: "Poppins";
        font-weight: 500;
        text-transform: uppercase;
        justify-content: center;
        display: flex;
        margin: 20px auto;
        align-items: center;
    }
    .learn:hover{
        color: rgb(255, 0, 0);
    }
    .learn > a{
        color: rgb(51, 51, 51);
        font-weight: 500;
        letter-spacing: 3px;
        text-decoration: none;
    }
   /* media query for restaurant */
@media (max-width: 1200px) {
    #restaurant{
     width: 1200px;
    }
     .discover-container{
        display: flex;
     }
     .discover-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #restaurant{
    width: 1200px;
   }
    .restaurant-container{
        flex-direction: column;
    }
    .restaurant-item{
        width: 60%;
        height: fit-content;
    }
}

@media screen and  (max-width:470px) {
    
    #restaurant{
        width: 1200px;
       }
        .restaurant-container{
            flex-direction: column;
        }
        .restaurant-item{
            width: 60%;
            height: fit-content;
        }
    }

    /* menu styling */

    #menu{
        background-color: rgb(255,255,255);
        margin-top: -15px;
    }
    .menu-container{
         width: 100%;
         margin: 15px auto;
         padding: 5%;
         justify-content: center;
         display: flex;
         align-items: center;
         gap: 20px;
    }
    .menu-item{
        width: 40%;
        height: 400px;
        position: relative;
       
    }
    .menu-item > button{
        justify-content: center;
        border-radius: 15px;
        border: 0;
        color: rgb(102, 102, 102);
        position: absolute;
        display: flex;
        align-items: center;
        padding: 10px 20px 10px 20px;  
     }
     .menu-item > button:hover{
        background-color: rgb(255, 0, 0);
        color: rgb(255, 255, 255);  
     }

    .menu-item>img{
            width: 100%;
            height: inherit;
            border-radius: 20px;
    }
    .menu-item:last-child{
        display: flex;
        border-radius: 20px;
        height: fit-content;
        gap: 10px;
        flex-direction: column;
    }
    .menu-last > button{
        align-items: center;
        color: rgb(102, 102, 102);
        justify-content: center;
        position: absolute;
        display: flex;
        padding: 10px 20px 10px 20px;
        border-radius: 15px;
        border: 0;
    }
    .menu-last > button:hover{
        background-color: rgb(255, 0, 0);
        color: rgb(253, 252, 252);  
    }

    .menu-last{
        width: 100%;
        height: 200px;
        position: relative;
    }
    .menu-last>img{
        width: 100%;
        height: inherit;
        border-radius: 20px;
    }

    .menu-container1{
        width: 100%;
        margin: 15px auto;
        padding: 5%;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 20px;
   }
   .menu-item1 {
    width: 80%;
    height: fit-content;
    position: relative;
}
.menu-item1 {
   
    width: 30%;
    height: fit-content;
}
    .menu-item1>button{
        align-items: center;
        color: rgb(102, 102, 102);
        justify-content: center;
        position: absolute;
        display: flex;
        padding: 10px 20px 10px 20px;
        border-radius: 15px;
        border: 0;
     }
     .menu-item1>button:hover{
        background-color: rgb(255, 0, 0);
        color: rgb(255, 255, 255);
     }
     .menu-item1>img{
        width: 100%;
        height: inherit;
        border-radius: 20px;
    }
    .menu-item1:first-child{
        width: 60%;
        position: relative;
    }
      /* media query for menu */
@media (max-width: 1200px) {
    #menu{
     width: 1200px;
    }
     .menu-container{
        display: flex;
     }
     .menu-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #menu{
    width: 1200px;
   }
    .menu-container{
        flex-direction: column;
    }
    .menu-item{
        width: 60%;
        height: fit-content;
    }
}

@media screen and  (max-width:470px) {
    
    #menu{
        width: 1200px;
       }
        .menu-container{
            flex-direction: column;
        }
        .menu-item{
            width: 60%;
            height: fit-content;
        }
    }
    /*eventstyling */

    #event{
        background-image: url(img1.jpg);
        background-size: cover;
        margin-top: -20px;
        background-blend-mode: hard-light;
    }

    #event>h1{
    color: rgb(214, 28, 34);
    text-align: center;
    font-family: 'Courgette', cursive;
    font-size: 30px;
    line-height: 1.2;
    padding-top: 10%;
    }
    #event>h2{
    text-align: center;
    font-family: "Poppins";
    margin-top: 9px;
    color: rgb(255, 255, 255);
    line-height: 1.2;
    letter-spacing: 10px;
    font-weight: 900;
    font-size: 50px;
    }
    .event-container{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5%;
        margin: 15px auto;
        
        
    }
    .event-item{
        width: 45%;
        height: 400px;
        margin-top: 40px;
    }
    .event-item>img{
        width: 100%;
        height: inherit;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .event-item>h1{
        text-align: center;
        font-family: "Poppins";
        color: rgb(34, 34, 34);
        margin-top: 50px;
        font-weight: 500;
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: 2.0px;
       
    }
    .event-item>p{
        text-align: center;
        color: rgb(102, 102, 102);
        font-family: Montserrat;
        margin: 0;
        padding: 16%;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.7;
        
    }
    .event-item:last-child{
        background-color: rgb(255, 255, 255);
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 50%;
    }
    
    .event-item>.view{
        text-align: center;
        font-family: Montserrat;
        font-weight: 400;
        font-size: 12px;
        color: rgb(34, 34, 34);
        letter-spacing: 1px;
    }
    .view>a{
        text-decoration: none;
        color: rgb(102, 102, 102);
    }
    .event-item>.view:hover{
        color: rgb(255, 0, 0);
    }
    /* media query for event */
@media (max-width: 1200px) {
    #event{
     width: 1200px;
    }
     .event-container{
        display: flex;
     }
     .event-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #event{
    width: 1200px;
   }
    .event-container{
        display: flex;
    }
    .event-item{
        width: 60%;
    }
}

@media screen and  (max-width:470px) {
    
    #event{
        width: 1200px;
       }
        .event-container{
            display: flex;
        }
        .event-item{
            width: 60%;
        }
    }

    /* reserve styling */

    #reserve{
       background-color:  rgb(255,255,255);
       margin-top: -20px;
       border-bottom: 2px solid rgb(85, 83, 83);
    }
    .reserve-container{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5%;
        margin: 15px auto;
    }
    .reserve-item{
        width: 45%;
        height: 400px;
    }

    .reserve-item>h1 {
        color: rgb(214, 28, 34);
        margin-top: 40px;
        font-family: 'Courgette', cursive;
        font-size: 30px;
        line-height: 1.2;
    }
   
    
form > .input-cont{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}
.input-cont > input{
    border-radius: 10px;
    padding: 10px 30px 10px 30px;
    border: 0;
    outline-color: red;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
button{
color: rgb(255, 255, 255);
background-color:black; 
margin-top: 12px; 
display: flex;
justify-content: center;
text-align: center;
margin: 20px auto;
padding: 10px 20px; 
border-radius: 10px;
border: 0;
font-weight: 500;
}
.reserve-item>img{
    width: 100%;
    height: inherit;
    border-radius: 20px;
}
   /* media query for reserve */
@media (max-width: 1200px) {
    #reserve{
     width: 1200px;
    }
     .reserve-container{
        display: flex;
     }
     .reserve-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #reserve{
    width: 1200px;
   }
    .reserve-container{
        flex-direction: column;
    }
    .reserve-item{
        width: 60%;
        
    }
}

@media screen and  (max-width:470px) {
    
    #reserve{
        width: 1200px;
       }
        .reserve-container{
            flex-direction: column;
        }
        .reserve-item{
            width: 60%;
        }
    }


/* review styling */

#review{
    
    background-image: url(Discovery.jpg);
    margin-top: -15px;
    object-fit: cover;
    background-blend-mode: hard-light;
}

.review-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    margin: 15px auto;
}
.review-item{
    width: 45%;
    height: 400px;
}
.review-item>h1 {
    font-family: 'Courgette', cursive;
    color: rgb(214, 28, 34);
    text-align: center;
    font-size: 30px;
    line-height: 1.1;
    margin-top: 40px;
}
.review-item>h2 {
    text-align: center;
    font-family: "Poppins";
    color: rgb(255, 255, 255);
    margin-top: 10px;
    font-weight: 900;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 10px;
    word-spacing: 6px;
} 
.review-item>img{
    width: 100px;
    height: fit-content;
   border-radius: 100%;
   display: flex;
   margin: 20px auto;
}
 /* media query for review */
 @media (max-width: 1200px) {
    #review{
     width: 1200px;
    }
     .review-container{
        display: flex;
     }
     .review-item{
         width: 90%;
     }
 }

@media (max-width: 768px) {
   #review{
    width: 1200px;
   }
    .review-container{
        flex-direction: column;
    }
    .review-item{
        width: 60%;
    }
}

@media screen and  (max-width:470px) {
    
    #review{
        width: 1200px;
       }
        .review-container{
            flex-direction: column;
        }
        .review-item{
            width: 60%;
        }
    }

  /* blog styling */

  #blog{
    background-color:  rgb(255,251,251);
    margin-top: -15px; 
 }
 #blog>h1{
    text-align: center; 
    font-family: 'Courgette', cursive;
    color: rgb(214, 28, 34); 
    padding-top:8%;
    font-size: 35px; 
     line-height: 1.2;
 }
 #blog>h2{
    text-align: center; 
    margin-top: 9px; 
    font-weight: 900;  
    font-family: cursive;
 }
 .blog-container {
    width: 100%;
    margin: 15px auto;
    padding: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.blog-item {
    width: 45%;
    height: 420px;
    overflow: hidden;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
}

.blog-item > img {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 10px 10px;
    overflow: hidden;
    
}

.blog-item > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-top: 20px; 
    font-family: "Poppins";
    font-weight: 500;
    color: rgb(51, 51, 51);
    letter-spacing: 4px;
}

.blog-item > a:hover {
    color: rgb(252, 1, 1);
}

.blog-item > p {
    text-align: center;
    font-family: "Montserrat";
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    padding: 0 3%;
    color: rgb(102, 102, 102); 
}

.read {
    text-align: center;
    justify-content: center;
    margin: 20px auto;
    font-family: "Poppins";
    font-weight: 500;
}

.read > a {
    color: rgb(51, 51, 51);
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
}

.read > a:hover {
    color: rgb(255, 0, 0);
}
.read>i{
    color: rgb(255, 0, 0);
}
.read> i:hover{
    color: rgb(0, 0, 0);
}
 /* media query for blog */
@media (max-width: 1200px) {
   #blog{
    width: 1200px;
   }
    .blog-container{
       display: flex;
    }
    .blog-item{
        width: 90%;
    }
}

@media (max-width: 768px) {
  #blog{
   width: 1200px;
  }
   .blog-container{
       flex-direction: column;
   }
   .blog-item{
       width: 60%;
   }
}

@media screen and  (max-width:470px) {
   
   #blog{
       width: 1200px;
      }
       .blog-container{
           flex-direction: column;
       }
       .blog-item{
           width: 60%;
       }
   }
/* sign up styling */
#sign{
    background-color: rgb(255,255,255);
    margin-top: -17px;
    
}
.sign-container {
    width: 100%;
    margin: 15px auto;
    padding: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.sign-item {
    width: 30%;
    height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
}
.sign-item >p{
    text-align: center;
    color: rgb(51, 51, 51);
    font-family: Poppins;
    /* margin-top: 30px; */
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 3px; 
}

form > input{
    display: flex;
    border-radius: 10px;
    padding: 10px 20px 10px 20px;
    outline-color: rgb(255, 0, 0);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    margin: 30px auto;
    border: 0;
}
.sign-item >button{
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 10px 20px ;
    border-radius: 10px;
    display: flex;
    margin: 30px auto;
    border: 0;
    
}
.sign-item >button:hover{
    color: rgb(0, 0, 0);
    background-color: rgb(73, 66, 66);
}
/* media query for sign */
@media (max-width: 1200px) {
    #sign{
     width: 1200px;
    }
     .sign-container{
        display: flex;
     }
     .sign-item{
         width: 90%;
     }
 }
 
 @media (max-width: 768px) {
   #sign{
    width: 1200px;
   }
    .sign-container{
        display: flex;
    }
    .sign-item{
        width: 60%;
    }
 }
 
 @media screen and  (max-width:470px) {
    
    #sign{
        width: 1200px;
       }
        .sign-container{
            display: flex;
        }
        .sign-item{
            width: 60%;
        }
    }
/* footer styling */
#footer{
    background-color: rgb(34,34,34);
    margin-top: -15px; 
    height: 700x;
    
}
.footer-container{
    width: 100%;
    margin: 15px auto;
    padding: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.footer-item{
    width: 40%;
    height: 500px;
}
.footer-item >h3{
    color: rgb(255, 255, 255);
    font-family: Poppins;
    margin-top: 40px;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
span{
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
span>p:hover{
    color: rgb(255, 0, 0);
}
span >p{
    color: rgb(153, 153, 153);
    font-family: "Montserrat";
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
}
span>i{
    color: rgb(153, 153, 153);
}
.footer-item-last {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px;
    margin: auto;
}
.footer-last{
    width: 30%;
    height: 100px;
}
.footer-last>img{
    width: 100%;
    height: inherit;
}
/* media query for sign */
@media (max-width: 1200px) {
    #footer{
     width: 1200px;
    }
     .footer-container{
        display: flex;
     }
     .footer-item{
         width: 90%;
     }
 }
 
 @media (max-width: 768px) {
   #footer{
    width: 1200px;
   }
    .footer-container{
        flex-direction: column;
    }
    .footer-item{
        width: 40%;
        line-height: 3;
    }
 }
 
 @media screen and  (max-width:470px) {
    
    #footer{
        width: 1200px;
       }
        .footer-container{
            flex-direction: column;
        }
        .footer-item{
            width: 50%;
            line-height: 3;
        }
    }