.top-menu a, .top-menu i { color: #515151; } .top-menu-search .input-group { text-align: center; margin: 0 auto; } .top-menu-search .search-txt { padding: 14px 15px; font-size: 13px; width: 100%; border: none; outline: none; background: #eee; box-shadow: var(--shadow-md); } .top-menu-search .search-btn { background: transparent; position: absolute; top: 0px; left: 10px; border: none; z-index: 10; } .top-menu-search .search-btn i { color: #333; font-size: 25px; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; margin-top: 3px; } .top-menu-btn ul { display: flex; align-items: center; justify-content: flex-end; } .top-menu-btn .auth-btn-index { display: flex; align-items: center; color: #333; font-weight: bold; border: 1px solid #515151; background: transparent; padding: 12px 7px; outline: none; box-shadow: var(--shadow-md); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .top-menu-btn .auth-btn-index svg { width: 20px; height: 20px; margin-left: 7px; } .top-menu-btn .auth-btn-index-two { display: flex; align-items: center; color: #fff; font-weight: bold; background: #ffc801; border:none; padding: 12px 7px; outline: none; box-shadow: var(--shadow-md); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .top-menu-btn .auth-btn-index-two svg { width: 20px; height: 20px; margin-left: 7px; } .header-box { display: flex; align-items: center; color: #333; font-weight: bold; box-shadow: var(--shadow-md); background: #f6f8fb; padding: 12px 20px; outline: none; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .header-box svg { width: 20px; height: 20px; margin-left: 7px; } .top-menu-btn .auth-icon-responsive { color: #515151; margin-left: 5px; font-size: 14px; } .top-menu-btn .auth-icon-responsive i { vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; font-size: 30px; } .top-menu-btn>ul>li { margin: 0 7px; } .top-menu-btn ul>li>i { font-size: 22px; } .top-menu-btn ul>li>i:hover { color: #F7CB2D; } .top-menu-btn .count-item { background: #A4EBF3; width: 20px; height: 20px; text-align: center; display: flex; justify-content: center; align-items: center; padding: 10px; position: absolute; top: 30px; right: -10px; animation: animateHeart 2.5s infinite; -webkit-animation: animateHeart 2.5s infinite; } .top-menu-menu ul { display: flex; flex-direction: row; padding-right: 0!important; } .top-menu-menu ul li { margin-left: 20px; } .top-menu-menu>ul>li:hover .sub-menu { opacity: 1; visibility: visible; } .top-menu-menu ul>li>a { font-size: 14px; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out; -o-transition: 0.2s all ease-in-out; } .top-menu-menu ul li a i { margin-right: 4px; font-size: 20px; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; transition: 0.3s all ease-in; -webkit-transition: 0.3s all ease-in; -moz-transition: 0.3s all ease-in; -ms-transition: 0.3s all ease-in; -o-transition: 0.3s all ease-in; } .top-menu-menu ul li a i.bi-chevron-down::before { transition: 0.3s all ease-in; -webkit-transition: 0.3s all ease-in; -moz-transition: 0.3s all ease-in; -ms-transition: 0.3s all ease-in; -o-transition: 0.3s all ease-in; } .top-menu-menu ul li a:hover .bi-chevron-down::before { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .top-menu-menu ul>li>a:hover { color: #ffc801; } .top-menu-menu ul>li>ul { position: absolute; top: 98%; right: 0; left: 0; background: #f7f7f7; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; height: 400px; padding: 20px 50px; z-index: 10; opacity: 0; visibility: hidden; transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; -ms-transition: 0.2s all ease-in-out; -o-transition: 0.2s all ease-in-out; } .back-menu { background-position: bottom left !important; background-size: 300px !important; } .top-menu-menu ul>li>ul.back-menu-laptop { background: #fff url("../img/other/labtop.png") no-repeat; background-position: bottom left; background-size: 300px; } .top-menu-menu ul>li>ul>li { display: inline; margin: 0 50px; margin-bottom: 7px; } .top-menu-menu ul>li>ul>li>a { color: #6c757d; display: block; transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; -ms-transition: 0.3s all ease; -o-transition: 0.3s all ease; } .top-menu-menu ul>li>ul>li>a.title { color: #333; font-weight: bold; position: relative; } .top-menu-menu ul>li>ul>li>a.title i { color: #333; font-size: 10px; font-weight: bold; } .top-menu-menu ul>li>ul>li>a.title::before { content: ''; position: absolute; right: -10px; width: 2.5px; height: 100%; background: #ffc801; } .top-menu-menu ul>li>ul>li>a:hover { color: #ffc801; transform: translateX(-5px); -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -ms-transform: translateX(-5px); -o-transform: translateX(-5px); } .top-menu-menu ul>li>ul>li>a.title:hover { color: #ffc801; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } /* ///////////main menu /////////// */ .top-menu-menu ul.main-menu { display: none; background: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); height: auto; /*min-width: 200px;*/ width: 134%; position: absolute; top: 100%; left: 20px; /*right: 20px;*/ right: -355px; opacity: 0; visibility: hidden; padding: 0; transition: 0.4s all ease-in-out; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; } .top-menu-menu ul.main-menu.active { display: flex; } .main-menu-head { color: #ffc801 !important; } .top-menu-menu ul.main-menu li { width: 200px; margin: 0; padding: 15px 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .top-menu-menu ul.main-menu li a { display: block; padding: 0 10px; } .top-menu-menu ul.main-menu li a i { vertical-align: baseline; vertical-align: -webkit-baseline-middle; color: #333; margin-left: 5px; float: none; transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -ms-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; } .top-menu-menu ul.main-menu li:hover { background: #f3f3f3; } .top-menu-menu ul.main-menu li:hover i { color: #ffc801; font-weight: bolder; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub { /* box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */ height: 100%; min-width: 200px; background: #fff; position: absolute; top: 0; right: 200px; opacity: 0; visibility: hidden; padding: 10px; transition: 0.4s all ease-in-out; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li { max-width: 190px; padding: 0; margin-top: 4px; padding: 5px 0; } .top-menu-menu ul.main-menu>li { background-color: #eee; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .main-menu-sub-active-li { background: #fff; border-bottom-left-radius: 50px; border-top-left-radius: 50px; } .top-menu-menu ul.main-menu>li:hover { background: #fff; border-bottom-left-radius: 30px; } .top-menu-menu ul.main-menu>li:hover a { color: #333; } .top-menu-menu ul.main-menu>li a i { float: none; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li>a { font-size: 14px; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li>a:hover { color: #ffc801; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li>a.title { font-size: 16px; font-weight: bold; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li>a.title i { font-weight: bolder; font-size: 14px; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li>a.title::before { content: ''; position: absolute; right: 0; width: 2.5px; height: 100%; background: #ffc801; } .top-menu-menu ul.main-menu>li>ul.main-menu-sub li:hover { background: none; } .top-menu-menu li:hover ul.main-menu { opacity: 1; visibility: visible; } .main-menu-sub-active { opacity: 1 !important; visibility: visible !important; } .main-menu-sub-active-li>a { color: #333 !important; } /* /////////// end main menu /////////// */ .top-menu-menu ul.level-one { background-color: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); height: auto; min-width: 200px; position: absolute; top: 98%; left: auto; right: auto; opacity: 0; visibility: hidden; padding: 0; transition: 0.4s all ease-in-out; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; } .top-menu-menu ul.level-one li { width: 100%; margin: 0; padding: 15px 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .top-menu-menu ul.level-one li a { display: block; padding: 0 10px; } .top-menu-menu ul.level-one li a i { font-size: 14px; vertical-align: middle; color: #333; float: left; transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -ms-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; } .top-menu-menu ul.level-one li:hover { background: #A4EBF3; } .top-menu-menu ul.level-one li:hover i { color: #ffc801; font-weight: bolder; } .top-menu-menu ul.level-one li:hover a { color: #515151; } .top-menu-menu ul.level-one>li>ul.level-two { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); height: auto; min-width: 200px; background: #f7f7f7; position: absolute; top: 0; right: 100%; opacity: 0; visibility: hidden; padding: 0; transition: 0.4s all ease-in-out; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; } .top-menu-menu li:hover ul.level-one { opacity: 1; visibility: visible; } .top-menu-menu li ul li:hover ul.level-two { opacity: 1; visibility: visible; } .top-menu-menu .nav-row { min-width: 550px !important; max-height: 520px !important; } .top-menu-menu .nav-row>li { width: auto !important; } .top-menu-menu .nav-row>li:hover { background: transparent; } .responsive-menu-icon { height: 100%; } .responsive-menu-icon i { vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; font-size: 35px; } .rm-body { position: relative; } .rm-overlay { opacity: 0; visibility: hidden; position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 8888; transition: .8s all ease-in-out; -webkit-transition: .8s all ease-in-out; -moz-transition: .8s all ease-in-out; -ms-transition: .8s all ease-in-out; -o-transition: .8s all ease-in-out; } .rm-overlay.open { opacity: 1; visibility: visible; } .rm-items { overflow-y: scroll; padding: 20px 5px; position: fixed; top: 0; bottom: 0; right: -100%; width: 0; background: #fff; z-index: 99999; transition: .4s; -webkit-transition: .4s all ease-in-out; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; } .rm-items.open { right: 0; width: 320px; } .rm-item-close { position: absolute; top: 5px; right: 5px; } .rm-item-close i { color: #444; font-size: 35px; } .rm-item-img { text-align: center; } .rm-item-img img { height: 70px; max-width: 100%; } .rm-item-search { margin: 10px 0; } .rm-item-search input.search-txt { background: #d8d8d8; } .rm-item-menu ul { height: auto; width: 100%; background: #fff; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } .rm-item-menu li { padding: 10px 0; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .rm-item-menu li > ul{ transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } .rm-item-menu li i { color: #222; font-size: 14px; font-weight: bold; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline; margin-left: 5px; } .rm-item-menu li i::before { transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; -ms-transition: 0.3s all ease; -o-transition: 0.3s all ease; } .rm-item-menu li .showSubMenu.open i::before { transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); } .rm-item-menu li a { display: inline-block; font-size: 14px; padding: 0 10px; color: #333; } .rm-item-menu>li>ul>li { border-bottom: 1px solid #ececec; } .rm-item-menu>li>ul>li:nth-last-child(1) { border: none; margin-bottom: 0; } .rm-item-menu>li>ul>li>a { padding: 0 20px; } .rm-item-menu>li>ul>li>ul>li { border-bottom: 1px solid #ececec; } .rm-item-menu>li>ul>li>ul>li:nth-last-child(1) { border: none; margin-bottom: 0; } .rm-item-menu>li>ul>li>ul>li>a { padding: 0 30px; } .h-0 { height: 0 !important; opacity: 0; visibility: hidden; } ul.show { height: auto !important; opacity: 1; visibility: visible; } .showSubMenu { cursor: pointer; flex-grow: 1; float: left; display: block; text-align: left; } .bg-ul-f7 { background: #f7f7f7 !important; } /* end header */