*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: 'kumbh Sans',sans-serif;
  

}
.navbar {
    background: hsl(0, 0%, 0%);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    opacity: 0.6;
}
.navbar_Container{
    display:flex;
    justify-content:space-between;
    height:80px;
    z-index:1;
    width:100%;
    max-width:1300px;
    margin:0 auto;
    padding:0 50px;

}
#navbar_logo {
    background-color: #ff8177;
    background-image: linear-gradient(to top,#ff0844 0%,#ffb1 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    display:flex;
    align-items:center;
    cursor:pointer;
    text-decoration:none;
    font-size:2rem;
}
.fa-burger {
    margin: 0.5rem;
    
}
.navbar_menu{
    display:flex;
    align-items:center;
    list-style:none;
    text-align:center;
}
.navbar_item{
    height:80px;
}
.navbar_links{
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    padding:0 1rem;
    height:100%;
   
}
.button{
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    padding:10px 20px;
    height:100%;
    width:100%;
    border:none;
    outline:none;
    border-radius:4px;
    background-color:black;
    color:white;
}
.button:hover{
    background:#ff8177;
    transition:all 0.3s ease;


}
.navbar_links:hover {
    color: #f77062;
    transition: all 0.3s ease;
}
@media screen and (max-width:960px){
    .navbar_Container {
        display: flex;
        justify-content: space-between;
        height: 100%;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;
        box-sizing: border-box;
    }
    .navbar_menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 0;
        transition: all 0.5s ease;
        height: 50vh;
        z-index: -1;
        background: black;
        box-sizing: border-box;
    }
    .navbar_menu.active{
        background:#131313;
        top:100%;
        opacity:1;
        transition:all 0.5s ease;
        z-index:99;
        height:50vh;
        font-size:1.6rem;

    }
    #navbar_logo{
        padding-left:25px;

    }
    .navbar_toggle .bar{
       width:25px;
       height:3px;
       margin:5px auto;
       transition: all 0.3s ease;
       background:#fff;
       box-sizing:border-box;
    }
   .navbar_item{
       width:100%;
    }
   .navbar_links{
       text-align:center;
       padding:2rem;
       width:100%;
       display:table;
   }
   #mobile_menu{
       position:absolute;
       top:20%;
       right:5%;
       transform:translate(5%,20%);
   }
   .button{
       display:flex;
       justify-content:center;
       align-items:center;
       width:80%;
       height:80px;
       margin:0;
   }
    .navbar_toggle .bar {
        display: block;
        cursor: pointer;
        box-sizing: border-box;
    }
   #mobile_menu.is_active .bar:nth-child(2){
       opacity:0;

   }
    #mobile_menu.is_active .bar:nth-child(1) {
        transform:translateY(8px) rotate(45deg)
    }
    #mobile_menu.is_active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg)
    }
}
.main {
   background-color:#141414;

}
main_Container{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    justify-self:center;
    margin:0 auto;
    height:90vh;
    background-color:#141414;
    z-index:1;
    width:100%;
    max-width:1300px;
    padding: 0 50px;
}
.main_Content h1{
    font-size:2rem;
    background-color:#ff8177;
    background-image: linear-gradient(to top,#ff084 0%,#ffb14 100%);
    background-size:100%;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    -webkit-text-fill-color:transparent;
    
}
.main_Content h2 {
    font-size: 2rem;
    background-color: #ff8177;
    background-image: linear-gradient(to top,#21d4fd 0%,#ffb14 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}
.main_Content p{
    margin-top:1rem;
    font-size:2rem;
    font-weight:700;
    color:#fff;
}
.main_btn{
    font-size:1rem;
    background-image:linear-gradient(to top, #f77062 0%, #fe5196 100%);
    padding:14px 32px;
    border:none;
    border-radius:4px;
    color:#fff;
    margin-top:2rem;
    cursor: pointer;
    position:relative;
    transition:all 0.35s;
    outline:none;
}
.main_btn a{
    position:relative;
    z-index:2;
    color:#fff;
    text-decoration:none;
}
.main_btn:after{
    position:absolute;
    content:'';
    top:0;
    left:0;
    width:0;
    height:100%;
    background:#21d4fd;
    transition:all 0.35s;
    border-radius:4px;
}
.main_btn:hover{
    color:#fff;

}
.main_btn:hover:after{
    width:100%;
}
.main_img_Container {
    text-align: center;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,0.6) 100%),url("HomeImage.jpg");
    height: 80%;
    width: 100%;
    padding: 5rem 0;
    box-sizing:border-box;
}
#mian_img{
    height:80%;
    width:80%;
}

/*Mobile Responsive*/
@media screen and (max-width:768px){
    .main_Container {
        display: grid;
        grid-template-columns: auto;
        align-items: center;
        justify-self: center;
        width: 100%;
        margin: 0 auto;
        height: 90vh;
        box-sizing: border-box;
    }
    .main_Content{
        text-align:center;
        margin-bottom:4rem;

    }
    .main_Content h1{
        font-size:2.5rem;
        margin-top:2rem;
    }
        .main_Content h2 {
            font-size: 3rem;
           
        }
        .main_Content p {
            
            margin-top: 1rem;
            font-size:1.5rem;
        }
}

@media screen and (max-width:480px) {
    .main_Container {
        display: grid;
        grid-template-columns: auto;
        align-items: center;
        justify-self: center;
        width: 100%;
        margin: 0 auto;
        height: 80vh;
        box-sizing: border-box;
    }

        .main_Content h1 {
            font-size: 2rem;
            margin-top: 3rem;
        }

        .main_Content h2 {
            font-size: 2rem;
        }

        .main_Content p {
            margin-top: 2rem;
            font-size: 1.5rem;
        }
        .main_btn{
            padding:12px 36px;
            margin:2.5rem 0;
        }

        

}
.services {
    background: #141414;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding: 10rem 0;
    
}
    .services h1 {
        background-color: #ff8177;
        background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%,#ff8c7f 21%,#f99185 52%,#cf556c 78%, #b12a5b 100%);
        background-size: 100%;
        margin-bottom: 1rem;
        font-size: 2.5rem;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
  .services_Container{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;

  }
.services_card {
    margin: 1rem;
    height: 525px;
    width: 400px;
    border-radius: 4px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,0.6) 100%),url("Food.jpg");
    background-size: cover;
    position: relative;
    color: #fff;
}
    .services_card:nth-child(2) {
        background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,0.6) 100%),url("component.jpg");
        background-size: cover;
        position: relative;
        color: #fff;
        justify-content: right;
    }
    .services h2{
        position:absolute;
        top:350px;
        left:30px;
    }
.services_card p {
    position: absolute;
    top: 400px;
    left: 30px;
}
.services_card button{
    color:#fff;
    padding:10px 20px;
    border:none;
    outline:none;
    border-radius:4px;
    background:#f77062;
    position:absolute;
    top:440px;
    left:30px;
    font-size:1rem;
    cursor:pointer;
}
.services_card:hover{
    transform:scale(1.075);
    transition:0.2s ease-in;
    cursor:pointer;

}
@media screen and (max-width: 960px){
    .services{
        height: 1600px;

    }
    .services h1{
        font-size:2rem;
        margin-top:12rem;
    }
    .services_card{
        width:300px;
    }
}
/*
footer CSS*/
.footer_Container {
    background-color: #141414;
    padding: 10rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
   
}
#footer_logo{
    color:#fff;
    display:flex;
    align-items:center;
    cursor:pointer;
    text-decoration:none;
    font-size:2rem;
}
.footer_link{
    width:100%;
    max-width:1000px;
    display:flex;
    justify-content:center;
}
.footer_link_wrapper {
    display: flex;
}
.footer_link_items{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:16px;
    text-align:left;
    width:160px;
    box-sizing:border-box;
}
.footer_link_items h2{
    margin-bottom:16px;

}
.footer_link_items > h2{
    color:#fff;
}
.footer_link_items a{
    color:#fff;
    text-decoration:none;
    margin-bottom:0.5rem;
}
.footer_link_items a:hover{
    color:#e9e9e9;
    transition:0.3s ease-out
}
.social_icon_link{
    color:#fff;
    font-size:24px;
}
.social_media{
    max-width:1000px;
    width:100%;
}
.social_media_wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:90%;
    max-width:1000px;
    margin:40px auto 0 auto;
}
social_icons{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:240px;
}
.social_logo{
    color:#fff;
    justify-self:flex-start;
    margin-left:20px;
    cursor:pointer;
    text-decoration:none;
    font-size:2rem;
    display:flex;
    align-items:center;
    margin-bottom:16px;
}
.website_right{
     color:#fff;
 }
@media screen and (max-width:820px){
    .footer_links{
        padding-top:2rem;
    }
    #footer_logo{
        margin-bottom:2rem;
    }
    .website_right {
        margin-bottom: 2rem;
    }
    .footer_link_wrapper{
        flex-direction:column;
    }
    .social_media_wrap {
        flex-direction: column;
    }
}
@media screen and (max-width:480px) {
    .footer_links_items {
        margin: 0;
        padding: 10px;
        width: 100% ;
        box-sizing: border-box;
    }
}
.column {
    float: left;
    width: 33.33%;
    padding:2rem;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    
}
.AboutUs h3{
    margin-top: 1rem;
    flex-wrap:wrap;
    box-sizing:border-box;
}
.AboutImage {
    height: 120px;
    width: 120px;
    flex-wrap: wrap;
    /*//border-radius: 60%;*/
    align-items: center;
    border:solid;
    border-color:white;
}
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}
.column-data {
    float: left;
    width: 50%;
}
@media screen and (max-width: 600px) {
    .column-data {
        width: 100%;
    }
}
.box{
   
    width:100%;
    height:50vh;
    width:100%;
    justify-content:center;
    display:flex;
    align-content:center;
    
}
    .box .search-box {
        position:relative;
        height: 50px;
        max-width: 380px;
        
        margin:auto;
        box-shadow: 0 5px 10px rgba(0,0,0,0.25);
        border-radius:25px;
    }
.search-box{
    position:absolute;
    height:100%;
    width:100%;
    border-radius:25px;
    background:#fff;
    outline:none;
    border:none;
    padding-left: 20px;
    font-size:18px;
}
.search-box input{
    position:absolute;
    height:100%;
    width:100%;
    border-radius:25px;
    background:#fff;
    outline:none;
    border:none;
    padding-left:20px;
    font-size:18px;
}
    .search-box .icon {
        position: absolute;
        right: -20px;
        top: 1px;
        width: 50px;
        background: #ff8177;
        height: 100%;
        border-radius:0 25px 25px 0;
        text-align:center;
        line-height:50px;
        font-size:20px;
        
    }
@media screen and (max-width: 600px) {
    .search-box {
        width: 100%;
    }
}
table, th, td {
    font: 17px Calibri;
    border: solid 1px #DDD;
    border-collapse: collapse;
    padding: 2px 3px;
    text-align: center;
   
    align-content: center;
    padding: 2rem;
}

th {
    font-weight: bold;
    color: white;
    padding: 2rem;
}