Responsive Mega Menu | CodingNepal

@import url("https://cdn-abjpn.nitrocdn.com/qGazNbEnILKhVbEpkTYfSQjeJBEHVZKF/assets/desktop/source/rev-99bba5a/fonts.googleapis.com/6ae6cf026c888246096bdb1735232bfe.css2");*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif;}nav{position:fixed;z-index:99;width:100%;background:#fff;}nav .wrapper{position:relative;max-width:100% px;padding:0px 30px;height:70px;line-height:70px;margin:auto;display:flex;align-items:center;justify-content:space-between;}.wrapper .logo a{color:#f2f2f2;font-size:30px;font-weight:600;text-decoration:none;}.logo img{vertical-align:middle;}.wrapper .nav-links{display:inline-flex;}.nav-links li{list-style:none;}.nav-links li a{color:#000;text-decoration:none;font-size:18px;font-weight:500;padding:9px 15px;border-radius:5px;transition:all .3s ease;}.nav-links .mobile-item{display:none;}.drop-menu li a{font-size:14px;}.nav-links .drop-menu{position:absolute;background:#fff;width:180px;line-height:45px;top:85px;opacity:0;visibility:hidden;box-shadow:0 6px 10px rgba(0,0,0,.15);padding:10px;}.nav-links li:hover .drop-menu,.nav-links li:hover .mega-box{transition:all .3s ease;top:70px;opacity:1;visibility:visible;}.drop-menu li a{width:100%;display:block;padding:0 0 0 15px;font-weight:400;border-radius:0px;}.mega-box{position:absolute;left:0;width:100%;padding:0 30px;top:85px;opacity:0;visibility:hidden;}.mega-box .content{background:#fff;padding:25px 20px;display:flex;width:100%;justify-content:flex-start;box-shadow:0 6px 10px rgba(0,0,0,.15);max-width:500px;}.mega-box .content .row{line-height:45px;}.mega-box .content .row-one{width:35%;}.mega-box .content .row-two{width:65%;}.content .row img{width:100%;height:100%;object-fit:cover;}.content .row header{color:#000;font-size:16px;font-weight:700;line-height:initial;}.content .row .mega-links{margin-left:-20px;border-left:1px solid rgba(255,255,255,.09);}.row .mega-links li{padding:0 20px;line-height:30px;display:flex;}.row .mega-links li a{padding:0px;color:#000;font-size:14px;display:block;}.row .mega-links li a:hover{color:#a77d54;}.mega-box .content hr{margin:20px 0;}.wrapper .btn{color:#000;font-size:20px;cursor:pointer;display:none;}.wrapper .btn.close-btn{position:absolute;right:30px;top:10px;}@media screen and (max-width: 970px){.wrapper .btn{display:block;}.row.row-two{padding-left:0 !important;border-left:0px solid #9a9a9a !important;}.book_appoint_btn a{display:none;}.wrapper .nav-links{position:fixed;height:100vh;width:100%;max-width:350px;top:0;left:-100%;background:#fff;display:block;padding:50px 10px;line-height:50px;overflow-y:auto;box-shadow:0px 15px 15px rgba(0,0,0,.18);transition:all .3s ease;}::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{background:#242526;}::-webkit-scrollbar-thumb{background:#3a3b3c;}#menu-btn:checked ~ .nav-links{left:0%;}#menu-btn:checked ~ .btn.menu-btn{display:none;}#close-btn:checked ~ .btn.menu-btn{display:block;}.nav-links li{margin:15px 10px;}.nav-links li a{padding:0 20px;display:block;font-size:20px;}.nav-links .drop-menu{position:static;opacity:1;top:65px;visibility:visible;padding-left:20px;width:100%;max-height:0px;overflow:hidden;box-shadow:none;transition:all .3s ease;}#showDrop:checked ~ .drop-menu,#showMega:checked ~ .mega-box{max-height:100%;box-shadow:0 6px 10px rgba(0,0,0,15%);padding:0;}.nav-links .desktop-item{display:none;}.nav-links .mobile-item{display:block;color:#000;font-size:20px;font-weight:500;padding-left:20px;cursor:pointer;border-radius:5px;transition:all .3s ease;}.nav-links .mobile-item:hover{background:#3a3b3c;}.drop-menu li{margin:0;}.drop-menu li a{border-radius:5px;font-size:18px;}.mega-box{position:static;top:65px;opacity:1;visibility:visible;padding:0 20px;max-height:0px;overflow:hidden;transition:all .3s ease;}.mega-box .content{box-shadow:none;flex-direction:column;padding:20px 20px 0 20px;}.mega-box .content .row{width:100%;margin-bottom:15px;border-top:1px solid rgba(255,255,255,.08);}.mega-box .content .row:nth-child(1),.mega-box .content .row:nth-child(2){border-top:0px;}.content .row .mega-links{border-left:0px;padding-left:20px;}.row .mega-links li{margin:0;padding:0;}.content .row header{font-size:19px;}}nav input{display:none;}.body-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;padding:0 30px;}.body-text div{font-size:45px;font-weight:600;}.sub_nav img{width:100%;height:150px;object-fit:cover;display:block;}.sub_nav{width:50%;padding:0 12px;margin-bottom:30px;text-align:center;}.nav-links .drop-menu{padding:20px 5px;}.sub_nav h2{padding:0;margin:0;line-height:initial;}.drop-menu li a{font-weight:500;line-height:30px;font-size:14px;}.sub_nav h2 a{padding:0;margin:0;}.mega-box{background:#fff;}.book_appoint_btn a{background:#a77d54;color:#fff;text-decoration:none;padding:12px 20px;}.row.row-two{padding-left:20px;border-left:1px solid #9a9a9a;}.row .mega-links li strong{margin-right:5px;font-size:14px;color:#a77d54;}.book_appoint_btn a:hover{background:black;}