@media screen and (min-width: 700px) and (max-width: 1170px) {
    .nav-toggle{
        display: block;
        margin-right: 40px;
    }
    .container{
        overflow: hidden;
        max-width: 1180px;
        margin-inline:auto;
        padding-inline: var(--padding-inline-section);
    }
    .nav-links{
        display: none;
    }
    .company-logo img{
        width: 350px;
    }
    .header-left{
        max-width: 45vw ;
    }
    .header-left h1{
        margin-top: 10px;
        font-size: 1.5rem;
     }
     p{
        font-family: 'Roboto','sans-sarif';
        font-size: 1rem;
        color: var(--secondary-text-color);
        line-height: 1.5rem;
    }
    .carousel-inner{
        width: 350px;
        border: .5px solid var(--primary-text-color);
        border-radius: 6px;
        box-shadow:7px 5px 3px  var(--secondary-text-color) ;
    }
    .companies-logo img{
        width: 90px;
        height: 90px;
        border: .5px solid var(--secondary-text-color);
        border-radius: 6px;
        box-shadow:4px 1px 3px  var(--secondary-text-color) ;
    }
    .features-area{
        flex-wrap: wrap;
        justify-content:space-around;
        gap:40px;
      }

    .menu-img img{
        display: none;
        width: 450px;
        height: 350px;
        padding: 0px 0px 0px 0px;
        border: .5px solid var(--primary-text-color);
        border-radius: 40px 0px 40px 0px;
        box-shadow:7px 5px 1px  var(--secondary-text-color) ;
        justify-content:center;
    }
    .menu-right{
        max-width:0%;
        text-align: center;
    }
    .menu-left{
        padding-left: 0px;
        max-width: 100%;
        text-align: center;
        justify-content: center;
    }
    .big-features-section{
        margin-top: 10px;
        margin-bottom: 20px;
        justify-content: center;
    gap: 0px;
    }
    .left{
        display: none;
        max-width: 0vw; 
        border:none;
        height: 250px;
    }
    .Kitchen-King{
        font-weight: 600;
        text-align: center;
        padding: 5px;
        margin: 15px;
        box-shadow:7px 5px 4px  var(--secondary-text-color) ;
        border-bottom: .5px solid var(--primary-text-color);
        border-left: none;
        border-right: none;
        border-top: none;
    }
    .right{
        max-width: 60vw;
        width: 100%;
        text-align: center;
        text-transform: capitalize;
        text-orientation: sideways;
    }
    .part-1{
        width: 20%;
        flex-direction: column;
    }
    .part-1 img{
        width: 200px;
    }
    .part-2{
        height: 400px;
        width:25%;
        border: .5px solid var(--primary-text-color); 
        box-shadow: 10px 10px 3px var(--secondary-text-color);
        flex-direction: column;
        justify-content: center;
        padding-top: 10px;
        gap: 20px;
    }
}


@media screen and (max-width: 450px) {
    :root{
        --primary-text-color:#183b56;
        --secondary-text-color:#577592;
        --accent-color:#2294ed;
        --accent-color-dark: #1d69a3;
        --padding-inline-section: 5px;
    }
    .nav-toggle{
        display: block;
        margin-right: 40px;
    }
    h1{
        font-size: 1rem;
    }
    
    h2{
        font-size: 1rem;
    }
    h3{
        font-size: 1rem;
    }
    p{
        font-family: 'Roboto','sans-sarif';
        font-size: .8rem;
        color: var(--secondary-text-color);
        line-height: 1.2rem;
    }
    .flex{
        display:flex; 
        flex-wrap: wrap;
         align-items: center; 
    }
    .container{
        /* overflow: hidden; */
        max-width: 480px;
        margin-inline:auto;
        padding-inline: var(--padding-inline-section);
    }

    .banner-text{
        padding-top: 10px;
    padding-bottom: 10px;
        color: white;
        font-size: medium;
        text-align: center;
    }
    .nav-links{
        display: none;
    }
    .company-logo img{
        width: 200px;
    }
    .header-section{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .header-left{
        text-align: center;
        max-width: 100vw ;
    }
    .header-left h1{
        box-shadow: 3px 3px 3px;
        margin-top: 10px;
        padding: 5px;
        font-size: 1.5rem;
        margin-bottom: 20px;
     }
     p{
        font-family: 'Roboto','sans-sarif';
        font-size: 1rem;
        color: var(--secondary-text-color);
        line-height: 1.5rem;
    }
    .Connected{
        width:50%;
        margin-top: 20px;
      }
      .carousel-inner{
        width: 100vw;
        border: .5px solid var(--primary-text-color);
        border-radius: 6px;
        box-shadow:7px 5px 3px  var(--secondary-text-color) ;
    }
    header{
        padding:30px var(--padding-inline-section) 0 ;
     }
     .header-section{
         justify-content: center;
         gap: 30px;
     }
     .companies-section{
        margin-top: 40px;
        text-align: center;
    }
    .companies{
        text-decoration: none;
        color: var(--accent-color-dark);
    }
    .companies-logo{
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 30px;
    }
    .companies-logo img{
        width: 70px;
        height: 70px;
        border: .5px solid var(--secondary-text-color);
        border-radius: 6px;
        box-shadow:4px 1px 3px  var(--secondary-text-color) ;
    }
    .menu-img img{
        width: 350px;
        height: 250px;
        border: .5px solid var(--primary-text-color);
        border-radius: 10px;
        box-shadow:7px 5px 1px  var(--secondary-text-color) ;
        justify-content:center;
    }
    .big-features-section{
        margin-top: 5px;
        margin-bottom: 5px;
        justify-content: center;
    gap: 10px;
    }
    .menu-right{
        max-width:100vw;
        text-align: center;
    }
    .menu-left{
        display: none;
        padding-left: 0px;
        max-width: 0vw;
        text-align: center;
        justify-content: center;
    }
    .menu-table table,tr,td{
        border: .4px solid var(--primary-text-color);
        text-align:center;
        font-size:x-small;
        
    }
    .menu-table table{
        height:400px;
        width: 350px;
        margin-bottom: 10px;
        border-radius: 6px;
        box-shadow:7px 5px 3px  var(--secondary-text-color) ;
    }
    .left{
        display: none;
        max-width: 0vw; 
        border:none;
        height: 250px;
    }
    .Kitchen-King{
        font-weight: 600;
        text-align: center;
        padding: 5px;
        margin: 15px;
        box-shadow:7px 5px 4px  var(--secondary-text-color) ;
        border-bottom: .5px solid var(--primary-text-color);
        border-left: none;
        border-right: none;
        border-top: none;
    }
    .right{
        max-width: 100vw;
        width: 100%;
        text-align: center;
        text-transform: capitalize;
        text-orientation: sideways;
    }
    .example-cards .card-1{
        flex-direction: column;
        row-gap: 60px;
        justify-content:center;
        margin-top: 30px;
        margin-bottom: 50px;
       }
    .card-1{
        /* position: relative; */
        
        margin:10px;
        width:300px;
        border: 1px solid var(--primary-text-color); 
        border-radius: 90px 0px 0px 0px;
        box-shadow: 10px 10px 3px var(--secondary-text-color);
        height: 400px;
    }
    .card-1 p{
        display: none;
    }

    .footer{
        /* background-image: url(assets/asset\ 34.svg);
        background-repeat: no-repeat;
        background-position: 80%;
        background-size: 40%; */
        background-color:whitesmoke ;
        margin-top: 10px;
        margin-bottom: 10px;
        justify-content:center;
        gap: 35px;
    }
    .part-1{
        width: 100vw;
    }
    .part-1 img{
        align-items: center;
        width: 300px;
    }
    .part-2{
        flex-wrap: wrap;
        margin-top:5px ;
        height: 250px;
        width:40%;
        border: none;
        box-shadow: none;
        /* border: .5px solid var(--primary-text-color); 
        box-shadow: 10px 10px 3px var(--secondary-text-color); */
        flex-direction:column;
        align-content: space-around;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0px;
        gap: 10px;
    }
    .part-2>ul{
        list-style: none;
    }
}