.p_23_s182{ .myMenuTopBar{ background-color: var(--themeColor); padding: 5px 0; } .myMenuIconsArea{ list-style-type: none; padding: 0; margin: 0; } .myMenuIconsArea li{ display: inline-block; padding-right: 5px; } .myMenuIconsArea li a{ font-size: 12px; color: var(--themeColorText); text-decoration: none; } .text-right .myMenuIconsArea li{ padding-left: 5px; padding-right: 0px; } .cicleIcon{ display: flex; width: 25px; height: 25px; border: 1px solid var(--themeColorText); border-radius: 50%; align-items: center; justify-content: center; } .midTicker{ display: grid; align-items: center; grid-template-columns: 20px 2fr 20px; align-items: center; font-size: 12px; align-items: center; } .tickerMain a{ color: var(--themeColorText); text-align: center; text-decoration: none; } .tickerNav{ cursor: pointer; height: 100%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } }.p_23_s182{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_23_s183{ .myNewMenu{ background-color: #FFFFFF; } .menuGrid{ grid-template-columns: 300px 1fr 400px; gap: 20px; margin: 10px auto; } .newPcLogo { display: block; line-height: 0; } .newPcLogo img{ width: 90%; max-width: 200px; object-fit: contain; line-height: 0; } .newSearcBarCon{ border: 0.01px solid #00000029; border-radius: 5px; display: grid; padding: 3px; grid-template-columns: 1fr 35px; position: relative; } .searchProductListNew{ position: absolute; top: 50px; width: 100%; background-color: #FFFFFF; border-radius: 10px; z-index: 999; max-height: 500px; overflow: auto; box-shadow: 0 0 5px #00000029; display: none; } .searchProductNewList{ padding: 0; margin: 0; list-style-type: none; } .searchProductNewList li{ padding: 0 10px; } .searchProductNewList li a{ display: grid; grid-template-columns: 40px 1fr; gap: 10px; font-size: 14px; padding: 5px 0; border-bottom: 0.1px solid #00000019; align-items: center; } .newSearchIcon { line-height: 0; display: flex; align-items: center; justify-content: center; } .newSearchIcon img{ width: 30px; border-radius: 5px; aspect-ratio: 1/1; object-fit: cover; } .searchProductNewList li a{ font-weight: 600; color: #000000; text-decoration: none; font-size: 14px; } .newSearcBarCon:focus-within .searchProductListNew{ display: block; } .newSearchBtnCon{ height: 35px; background-color: var(--themeColor1); border-radius: 5px; } .newSearchBtnCon button{ border: 0; background-color: transparent; width: 100%; height: 100%; color:var(--paragraphColorBlack); font-size: 14px; } .newSearchInputCon input{ border: 0; padding: 0 10px; width: calc(100% - 20px); height: 100%; } .newMenuList{ list-style-type: none; text-align: right; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; } .newMenuList li ul{ position: relative; } .newMenuList li{ display: inline-block; padding: 10px; display: flex; align-items: center; gap: 5px; } .newMenuList li a{ text-decoration: none; color: #000000; font-size: 14px; display: flex; gap: 5px; align-items: center; } .newMenuIcon{ width: 20px; height: 20px; } .newMenuIcon svg{ width: 100%; height: 100%; } .newMenuList li { transition: 0.5s; cursor: pointer; /*position: relative;*/ } .smallHover{ position: relative; } .newMenuList li span{ white-space: nowrap; /*line-height: 0;*/ } .newMenuHoverEffect li:hover{ background-color: var(--themeColor1); border-radius: 5px; } .newMenuHoverEffect li:hover a{ color: var(--paragraphColorBlack); } .newBelowMenu{ background-color: var(--themeLightColor); } .newMenuIcon img{ aspect-ratio: 1/1; object-fit: contain; width: 100%; } .lighnHover li:hover{ background-color: #00000019; } .lighnHover li.activeMenu:hover{ background-color: var(--themeColor1); } .newBelowBannerCon a{ font-weight: 600; } .newSmallDropDown{ position: absolute; left: 0; background-color: #FFFFFF; z-index: 99; top: 100%; display: none; border: 0.1px solid #00000019; max-height: 800px; overflow-y: auto; width: 100%; min-width:140px; max-height: 400px; } .newSmallDropDown li{ width: calc(100% - 20px); } .newDowpDown{ flex-direction: column; gap: 0; } .smallHover:hover .newSmallDropDown{ display: block; } .bigDropDown{ align-items: flex-start; } .newBigDropDown{ width: 100%; position: absolute; z-index: 99; left: 0; top: 100%; background-color: #FFFFFF; border: 0.1px solid #00000019; display: none; max-height: 500px; overflow-y: auto; } .bigHover:hover .newBigDropDown{ display: block; } .newBelowMenu ul{ position: relative; } .bigDropList{ flex-direction: column; align-items: flex-start; } .bigDropList li{ border-bottom: 0.1px solid #00000019; width: -webkit-fill-available; } .noWeight{ font-weight: normal!important; } .smallHover:hover .newDowpDown a{ color: #000000; } .smallHover:hover .newDowpDown li{ background-color: #FFFFFF; } .smallHover:hover .newDowpDown li:hover{ background-color: #00000019; } .activeMenu{ background-color: var(--themeColor1); border-radius: 5px; } .activeMenu a{ color: var(--paragraphColorBlack)!important; } .WithoutSearch{ border-bottom: 0.1px solid #00000019; } @media only screen and (max-width: 900px) { .mobileMenuGrid{ padding: 10px; background-color: #FFFFFF; display: grid; grid-template-columns: 40px 180px auto; gap: 10px; align-items: center; } .menuIcon{ width: 40px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; transition: 0.5s; border-radius: 5px; &:hover{ background-color: var(--themeColor1); color: #FFFFFF; } } .mobileLogo img{ width: 100%; } .mobileLogo { line-height: 0; } .mobileLogo a{ display: inline-block; overflow: hidden; } .rightMenuIcons{ display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .mobileSearch{ padding: 0 10px 10px 10px; border-bottom: 0.1px solid #00000019; } .mobileSearchGrid{ border: 0.1px solid #00000019; padding: 5px; display: grid; border-radius: 5px; display: grid; grid-template-columns: auto 40px; } .mobileSearchBtn{ width: 40px; border: 0; aspect-ratio: 1/1; border-radius: 5px; background-color: var(--themeColor1); color: #FFFFFF; } .mobileSearchGrid input{ height: 100%; border: 0; margin: 0 10px; width: -webkit-fill-available; } .mobileMenuSidebarGrid{ display: grid; grid-template-columns: auto 80px; background-color: #00000029; } .mobileLeftBar{ background-color: #FFFFFF; padding: 10px; height: calc(100vh - 20px); } .mobileMenuSidebar{ position: fixed; top: 0; /*left: 0;*/ z-index: 99; width: 100%; height: 100vh; left: -100%; animation: rightToLeft 0.5s ease-in-out; animation-fill-mode: forwards; /*display: none;*/ } .leftToRight{ animation: leftToRight 0.5s ease-in-out; } @keyframes leftToRight{ from{ left:-100%; } to{ left:0%; } } @keyframes rightToLeft{ from{ left:-100%; } to{ left:0%; } } .newMenuList{ flex-direction: column; align-items: flex-start; gap: 5px; } .newMenuList li{ border-bottom: 0.1px solid #00000029; } .newMenuList .bigHover { position: relative; } .smallHover, .bigHover { width: -webkit-fill-available; justify-content: space-between; } .mobileInsideLogo{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .mobileInsideLogo img{ width: 200px; margin-bottom: 10px; } .mobileInsideLogo a{ display: inline-block; overflow: hidden; line-height: 0; } .newSmallDropDown{ width: -webkit-fill-available; } .bigHover .dropDownArrow, .bigHover .newBigDropDown{ display: none!important; } } .newMenuList li{ font-weight: 600; } }.p_23_s183{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }