.p_23_s173{ .menu_4 { position: fixed; width: 100%; top: 20px; z-index: 99; } .innerContainer { border-radius: 15px; padding: 0px 20px; background-color: white; box-shadow: 0px 0px 10px 0px #e1e1e1; } .barIcon { display: none; } .menuGrid { grid-template-columns: 180px 1fr 300px; align-items: center; justify-content: center; } .innerMenu .logoInner { display: none; } .linksUl { list-style-type: none; } .links { padding: 20px 10px; } .links a { text-decoration: none; color: var(--paragraphColorBlack); font-weight: 500; } .liRelative { position: relative; } .liRelative i { display: none; } .dropdown-content { width: 250px; opacity: 0; border-top: 5px solid var(--themeColor1); border-bottom: 5px solid var(--themeColor1); position: absolute; background-color: var(--themeBg2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; top: 100%; left: 50%; transform: translateX(-50%); transition: 0.3s; display: none; } .dropdown-content ul li { padding: 15px 20px; border-bottom: 1px solid var(--themeColor1); font-size: 15px; } .dropdown-content ul li a { transition: 0.3s; } .innerMenu .social { display: none; } .social { margin-top: 30px; } .socialIcons { width: 40px; height: 40px; border: 1px solid var(--paragraphColorWhite); border-radius: 5px; cursor: pointer; } .socialIcons a { line-height: 0; } .socialIcons i { color: var(--paragraphColorWhite); font-size: 20px; } .rightSec { justify-content: flex-end; } .activeMenu { border-radius: 5px; padding: 8px; background-color: var(--themeColor1); color: var(--paragraphColorWhite); } .menuIcon a { color: var(--anchorColor); font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 5px; font-size: 14px; } .rightSec i { color: var(--paragraphColorBlack); cursor: pointer; transition: 0.3s; margin-right: 10px; } .mainBtnSection { padding: 10px 0px; } .btnSection { padding: 10px 25px; border-radius: 10px; background-color: var(--themeColor1); cursor: pointer; border: 2px solid transparent; transition: 0.3s; } .btnSection button { border: none; background-color: transparent; color: var(--paragraphColorWhite); font-size: 15px; font-weight: 500; cursor: pointer; transition: 0.3s; } .liRelative:hover .dropdown-content { display: block; animation: fadeIn 0.5s ease-in-out; animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @media only screen and (max-width: 900px) { .logoSection { padding: 10px 0px; } .innerContainer { margin-top: 0px; padding: 0px; width: 100%; border-radius: 0px; } .menuGrid { grid-template-columns: 1fr; } .linkSection { position: fixed; top: 0px; width: 100%; height: 100vh; display: flex; left: -100%; } .innerMenu { width: 70%; height: 100vh; background-color: var(--themeBg2); } .innerMenu .logoInner { display: block; padding-top: 10px; } .logoInner a { justify-content: flex-start; } .logoInner img { width: 60%; margin-left: 20px; } .linksUl { flex-direction: column; align-items: flex-start; margin: 20px 0px 30px 20px; } .linksUl .links { width: calc(100% - 40px); } .links { padding: 10px; } .liRelative i { display: block; } .dropdown-content { margin-top: 20px; position: static; transform: none; } .dropdown-content .linksUl { margin: 0px; } .innerMenu .social { margin-top: 0px; margin-left: 20px; display: flex; } .innerMenu .social .socialIcons { background-color: var(--themeColor1); } .blankDiv { width: 30%; background-color: rgba(0, 0, 0, 0.315); } .rightSec { display: none; } .mainBtnSection { display: none; } .logoGrid { display: grid; grid-template-columns: 1fr 60px; gap: 20px; align-items: center; justify-content: center; } .barIcon i { font-size: 20px; } .barIcon { display: block; } .barIcon { display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; } } }.p_23_s173{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }