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


 body{
    background: #fff;
    
} 
    nav{
        background:rgb(143 31 51);
        position: sticky;
        top: 0%;
    }
    nav:after{
        content: '';
        clear: both;
        display: table;
    }
    nav .logo{
        float: left;
        color: white;
        font-size: 25px;
        font-weight: 700;
        line-height: 50px;
        padding-left: 40px;
        
    }
    .logo a{
        color: white;
        text-decoration: none;

    }
    nav .logo a:hover{
        color: cyan;
        border-radius: 5px;
    box-shadow: 0 0 5px #33ffff,
                0 0 5px #66ffff;
    }
    nav ul{
        float: right;
        list-style: none;
        margin-right: 50px;
        position: relative;
    }
    nav ul li{
        float: left;
        display: inline-block;
        background: rgb(143 31 51);
        margin: 0 3px;

    }
    nav ul li a{
        color: white;
        text-decoration: none;
        line-height: 50px;
        font-size: 15px;
        padding: 5px 10px;
    }
    nav ul li a:hover{

        color: cyan;
        border-radius: 5px;
        box-shadow: 0 0 5px #33ffff,
                    0 0 5px #66ffff;
    }
    nav ul ul li a:hover{
        color: cyan;
        
        box-shadow: none;
    }


    nav ul ul{
        width: 250px;
        position: absolute;
        top: 90px;
        border-top: 3px solid cyan;
        opacity: 0;
        visibility: hidden;
        transition: top .3s;

    }
    nav ul ul ul{
        border-top: none;
    }



    nav ul li:hover  ul{
        top: 50px;
        opacity: 1;
        visibility: visible;
    }


    nav ul ul li{
        width: 250px;
        position: relative;
        margin: 0px;

        float: none;
        display: list-item;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    nav ul ul li a{
        line-height: 50px;
    }



    nav ul ul ul li{
        position: relative;
        top: -70px;
        left: 150px;
    }

    .fa-angle-right{
        margin-left: 50px;
        font-size: 20px;
        color: white;
    }
    .fa fa-angle-right:hover{
        color: cyan;
        margin-left: 45px;
    }
    .show,.icon, .click{
        display: none;
    }
/* body css */



@media all and (max-width: 1095px){
 
    

 
    body{
    height: 100%;
    width: 100%;
   }
       nav ul{
           margin-right: 0px;
           float: left;
       }
       nav .logo{
           padding-left: 30px;
           width: 100%;
       }
       nav ul li, nav ul ul li{
           display: block;
           width: 100%;
       
       }
       nav ul ul{
           top: 70px;
           position: static;
           border-top: none;
           float: none;
           display: none;
           opacity: 1;
           visibility: visible;
       }
       nav ul ul ul li{
           position: static;
       }
       nav ul ul li{
           border-bottom: 0px;
       }
   
   
       nav ul ul a{
           padding-left: 40px;
   
       }
       nav ul ul ul a{
           padding-left: 100px;
       }
       .show{
           display: block;
           color: white;
           font-size: 18px;
           padding: 0 20px;
           line-height: 70px;
           cursor: pointer;
       }
       .show:hover{
           color: cyan;
       }
       .icon{
           display: block;
           color: white;
           position: absolute;
           right: 40px;
           line-height: 70px;
           font-size: 25px;
           cursor: pointer;
       }
   
   
   
       nav ul li a:hover{
           box-shadow: none;
       }
   
   .show + a, ul{
       display: none;
   }
   [id^=btn]:checked + ul{
       display: block;
   }
}