.HeaderContanier .lgScreen { display: none; height: 100px; padding: 0px 24px !important; margin-top: 24px !important; justify-content: flex-start; align-items: center; gap: 16px; flex-shrink: 0; align-self: stretch; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } i-checklist label { float: right !important; } .HeaderContanier .lgScreen .logo a { display: flex; width: 166.766px; height: 44.426px; } .HeaderContanier .lgScreen .logo p { color: #000; font-size: 30px; font-style: normal; font-weight: 400; line-height: 30px; /* 100% */ } .HeaderContanier .lgScreen .logo img { width: 49.362px; height: 44.426px; flex-shrink: 0; } .HeaderContanier .lgScreen .governorat .dropdown .dropdown-menu { width: inherit; } .HeaderContanier .lgScreen .governorat .dropdown .dropdown-menu .dropdown-item { padding: 0.25rem 1rem !important; border-bottom: 1px solid #d9d9d94a !important; } .HeaderContanier .lgScreen .searchContanier { display: flex; height: 50px; padding: 0px 8px !important; justify-content: flex-start; align-items: center; gap: 10px; flex: 1 0 0; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } .HeaderContanier .lgScreen .searchContanier .searchInput { border: none; width: -webkit-fill-available; height: 40px; text-align: right; } .HeaderContanier .lgScreen .searchContanier .searchInput:focus-visible { outline: none; } .HeaderContanier .lgScreen .searchContanier .filterButton { width: 23px; height: 23px; background-color: #ffffff00; border: none; } .HeaderContanier .lgScreen .searchContanier .searchButton { width: 50px; height: 39px; background-color: black; color: white; border: none; border-radius: 8px; padding: 8px 16px !important; } .HeaderContanier .lgScreen .orderButton p { color: #fff; font-size: 22px; font-style: normal; font-weight: 400; line-height: 23px; /* 95.833% */ line-height: 0px; margin-bottom: 0px !important; } .HeaderContanier .lgScreen .orderButton svg { width: 27.6px; height: 20.444px; flex-shrink: 0; color: #fff; } .HeaderContanier .lgScreen .nav { display: flex; } .HeaderContanier .lgScreen .nav ul { display: flex; width: fit-content; list-style: none; gap: 8px; margin-bottom: 0px !important; } .HeaderContanier .lgScreen .nav ul li a { color: #000; font-size: 18px; font-style: normal; font-weight: 400; line-height: 30px; /* 166.667% */ margin-bottom: 0px !important; text-decoration: none; } nav .container-fluid #navbarNavDropdown .navbar-nav .dropdown .dropdown-menu li .dropdown-item { padding: 0.25rem 1rem !important; border-bottom: 1px solid #d9d9d94a !important; } .newRegister { color : #2087e7 !important; margin-right : 2px; } .HeaderContanier .lgScreen .userContainer { } .HeaderContanier .lgScreen .userContainer .profile { width: 50px; height: 50px; position: relative; border-radius: 100px; background: #1e1e1e; } .HeaderContanier .lgScreen .userContainer .profile img { width: 51px; height: 51px; position: absolute; left: 0px; top: -17px; border-radius: 100px; } main .mainContent .sidebarContainer { position: sticky; height: 50%; top: 50px; } main .mainContent .sidebarContainer .sidebar { display: flex; flex-direction: column; gap: 16px; margin-top: 20px !important; } main .mainContent .sidebarContainer .sidebar .lawerJoin { width: 100%; padding: 16px !important; text-align: center; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); gap: 16px; } main .mainContent .sidebarContainer .sidebar .lawerJoin p { margin: 0px !important; text-align: center; width: 250px; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis { width: 100%; display: flex; flex-direction: column; align-items: center; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis .numberAndAnalysisTitle { width: 100%; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis .numberAndAnalysisTitle h4 { width: 100%; text-align: center; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis .numberAndAnalysisContaner { width: inherit; background-color: var(--main-background-color2); text-align: center; padding: 16px !important; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis .numberAndAnalysisContaner .numberAndIcon { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px !important; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis .numberAndAnalysisContaner .numberAndIcon p { margin-bottom: 0px !important; text-align: center; } main .mainContent .sidebarContainer .sidebar .numberAndAnalysis .numberAndAnalysisContaner .numberAndIcon i { font-size: 40px !important; text-align: center; color: black; } main .mainContent .sidebarContainer .sidebar .adsBanner { display: flex; flex-direction: column; justify-content: center; align-items: center; } main .mainContent .sidebarContainer .sidebar .adsBanner img { width: 250 px !important; height: 250 px !important; border-radius: 8px; border: 1px solid grey; } main .mainContent .sidebarContainer .sidebar .varafictionConatainer .varafictionStauts .varafictionStaut{ display: flex; flex-direction: row; gap: 8px; align-items: center; padding-bottom: 12px !important; } main .mainContent .sidebarContainer .sidebar .varafictionConatainer .varafictionStauts .varafictionStaut p{ font-size: 24px !important; } main .mainContent .sidebarContainer .sidebar .varafictionConatainer .varafictionStauts .varafictionStautsTitle{ width: 100%; background-color: var(--main-background-color2); padding: 8px !important; border-radius: 8px; } main .mainContent .sidebarContainer .sidebar .varafictionConatainer .varafictionStauts .varafictionStaut img{ width: 32px !important; } main .mainContent .sidebarContainer .sidebar .contactTimeContainer .contactTimeTitle p{ font-size: 24px !important; } main .mainContent .sidebarContainer .sidebar .contactTimeContainer .contactTimeInfo { display: flex; font-size: 18px !important; align-items: center; background-color: var(--main-background-color2); gap: 8px; padding: 8px !important; border-radius: 8px; } main .mainContent .sidebarContainer .sidebar .contactTimeContainer .contactTimeInfo .contactTimeInfoStauts p{ background-color: #0FB820 ; padding: 8px !important; color: var(--main-background-color2); font-size: 18px; border-radius: 8px; } main .mainContent .sidebarContainer .sidebar .askLawerContainer{ width: 100%; padding: 16px !important; text-align: center; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); gap: 16px; } main .mainContent .sidebarContainer .sidebar .askLawerContainer p{ margin: 0px !important; } main .mainContent .sidebarContainer .sidebar .askLawerContainer .lawerName{ font-size: 24px !important; font-weight: 700; } main .mainContent .sidebarContainer .sidebar .followMeContainer .followMeTitle p{ font-size: 24px !important; } main .mainContent .sidebarContainer .sidebar .followMeContainer .followMeChannel .followMeChannelIcon{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px !important; } main .mainContent .sidebarContainer .sidebar .followMeContainer .followMeChannel .followMeChannelIcon .fab{ font-size: 32px !important; color: #2087E7 !important; } main .mainContent .sidebarContainer .sidebar .adsBanner img{ width: 240 px !important; height: 218 px; border-radius: 8px; }main .mainContent .storysContainer .storys .storysAccounts { display: flex; gap: 8px; overflow-x: auto; cursor: grab; padding: 5px; background: #f7f7f7; } main .mainContent .storysContainer .storys .storysAccounts::-webkit-scrollbar { display: none; } main .mainContent .storysContainer .storys .storysAccounts .storyAccount { cursor: pointer; width: 125px !important; height: 125px !important; border-radius: 100% !important; } main .mainContent .storysContainer .storys .storysAccounts .storyAccount img { max-width: 125px !important; max-height: 125px !important; min-width: 125px !important; min-height: 125px !important; border-radius: 50% !important; } main .content .lawSectionsConatiner .lawSectoins .lawSection { display: flex; gap: 8px; overflow-x: auto; cursor: grab; padding: 0px; } main .content .lawSectionsConatiner .lawSectoins .lawSection::-webkit-scrollbar { display: none; } main .content .lawSectionsConatiner .lawSectoins .lawSection .section { position: relative; cursor: pointer; width: 260px; height: 100px; background: #000000cf; border-radius: 5px; } main .content .lawSectionsConatiner .lawSectoins .lawSection .section .sectionImg { width: 100%; height: 100%; object-fit: fill; } main .content .lawSectionsConatiner .lawSectoins .lawSection .section .sectionTitle { text-align: center; position: absolute; top: 25%; width: 100%; margin: 0 auto; color: #ffffff; font-size: 27px; font-style: normal; font-weight: 700; text-shadow: 0 0 8px #000000; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLowersTitle { } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower { display: flex; gap: 8px; flex-wrap: wrap; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer { width: 230px; height: fit-content; background-color: white; border-radius: 8px !important; display: flex; flex-direction: column; align-items: center; position: relative; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer p { text-align: center !important; padding: 5px; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .cover .lawerProfileImage { width: 100%; height: 230px; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerInfo { width: 160px; text-align: center; background-color: white; padding: 16px !important; margin-top: -24px; border-radius: 8px; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerInfo .lawerName { font-size: 14px; font-weight: 600; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerInfo .lawSectionTitle { font-size: 12px; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerInfo .lawerNumberStatic { display: flex; justify-content: center; gap: 8px !important; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerInfo .lawerNumberStatic .consultantInfo .consultantTitle, .followerTitle { color: #b9adad; font-size: 12px; font-style: normal; font-weight: 600; line-height: 141.487%; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerInfo .lawerNumberStatic .consultantInfo .consultantNumber, .followerNumber { color: #1e1e1e; text-align: center; font-size: 15px; font-style: normal; font-weight: 600; line-height: 141.487%; /* 21.223px */ } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerButton { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerButton .btn { border-bottom: 5px solid #1475cf !important; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .lawerButton .second-btn { border-bottom: 2px solid #1475cf !important; } main .content .moreActiveLowersConatiner .moreActiveLowers .moreActiveLower .ActiveLawer .verificationIcon .icon { background-color: white; padding: 8px !important; position: absolute; top: 0px; left: 8px; border-radius: 0px 0px 8px 8px; } main .content .recentlyConsultantsContanier .recentlyConsultant { padding: 16px !important; } main .content .recentlyConsultantsContanier .recentlyConsultant .consultantTitle p { color: #1e1e1e; font-size: 14px; font-style: normal; font-weight: 700; } main .content .recentlyConsultantsContanier .recentlyConsultants { gap: 8px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant { max-width: 316px; height: 300px; flex-shrink: 0; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); position: relative; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .consultantInfo { display: flex; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .consultantInfo p { color: #b9adad; font-size: 10px; font-style: normal; font-weight: 600; line-height: normal; padding: 0px 2px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .separative { width: 100%; height: 2px; flex-shrink: 0; background: linear-gradient( 90deg, rgba(0, 0, 0, 0) -0.09%, rgba(0, 0, 0, 0.2) 50.9%, rgba(0, 0, 0, 0) 99.81% ); margin-top: 8px !important; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer .numbersOfAnswer { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60.855px; height: 60px; flex-shrink: 0; border-radius: 8px; border: 5px solid #1475cf; background: #2087e7; color: var(--main-background-color2); font-size: 14px; font-style: normal; font-weight: 700; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer { display: flex; align-items: center; gap: 8px; margin-top: 8px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer .firstLawer .lawerName { color: #1e1e1e; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer .firstLawer .firstLawerAnswer { color: #b9adad; font-size: 10px; font-style: normal; font-weight: 600; line-height: normal; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .consultantAnswer { max-width: 80ch; padding: 20px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .consultantAnswer p { color: #1e1e1e; font-size: 11px; font-style: normal; font-weight: 500; line-height: 153.668%; /* 16.903px */ margin-top: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer { display: flex; gap: 8px; position: absolute; bottom: 0px; margin-bottom: 8px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer .likeAnswer, .goodAnswer { display: flex; align-items: center; gap: 4px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer svg { width: 12px; height: 12px; flex-shrink: 0; color: #2087e7; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer p { color: #d9d9d9; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; } main .content .recentlyConsultantsContanier .recentlyConsultant{ padding: 16px !important; } main .content .recentlyConsultantsContanier .recentlyConsultant .consultantTitle p{ color: #1E1E1E; font-size: 14px; font-style: normal; font-weight: 700; } main .content .recentlyConsultantsContanier .recentlyConsultants{ gap: 12px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant{ max-width: 316px; height: 300px; flex-shrink: 0; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); position: relative; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .consultantInfo{ display: flex; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .consultantInfo p{ color: #B9ADAD; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; padding: 0px 2px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .separative{ width: 100%; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) -0.09%, rgba(0, 0, 0, 0.20) 50.9%, rgba(0, 0, 0, 0.00) 99.81%); margin-top: 8px !important; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer .numbersOfAnswer{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60.855px; height: 60px; flex-shrink: 0; border-radius: 8px; border: 5px solid #1475CF; background: #2087E7; color: var(--main-background-color2); font-size: 14px; font-style: normal; font-weight: 700; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer{ display: flex; align-items: center; gap: 8px; margin-top: 8px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer .firstLawer .lawerName{ color: #1E1E1E; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .numbersOfAnswerAndLawer .firstLawer .firstLawerAnswer{ color: #B9ADAD; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .consultantAnswer{ max-width: 80ch; padding: 20px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .answerSection .consultantAnswer p{ color: #1E1E1E; font-size: 12px; font-style: normal; font-weight: 500; line-height: 153.668%; /* 16.903px */ margin-top: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer{ display: flex; gap: 8px; position: absolute; bottom: 0px; margin-bottom: 8px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer .likeAnswer, .goodAnswer{ display: flex; align-items: center; gap: 4px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer .fas{ flex-shrink: 0; color: #2087E7; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant .likeAndGoodAnswer p{ color: #D9D9D9; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; }main .mainContent .content .profileInfoContainer { margin-bottom: 36px !important; } main .mainContent .content .profileInfoContainer .profileInfo { display: flex; gap: 35px; } main .mainContent .content .profileInfoContainer .profileInfo .profileImage img { width: 190px; height: 190px; border-radius: 8px; box-shadow: 0px 0 0 0px rgba(0, 0, 0, 0.25); } main .mainContent .content .profileInfoContainer .profileInfo .profileNameAndType { height: fit-content; display: flex; flex-direction: column; justify-content: center; padding-right: 16px !important; gap: 22px; border-right: 8px solid #1475cf; } main .mainContent .content .profileInfoContainer .profileInfo .profileNameAndType .profileName p { color: #1e1e1e; font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; /* 100% */ } main .mainContent .content .profileInfoContainer .profileInfo .profileNameAndType .profileType p { color: #1e1e1e; font-size: 32px; font-style: normal; font-weight: 600; line-height: 32px; /* 100% */ } main .mainContent .content .aboutMeContainer { display: flex; padding: 8px !important; margin-bottom: 36px !important; flex-direction: column; border-radius: 8px; background-color: var(--main-background-color2); gap: 8px; } main .mainContent .content .aboutMeContainer .aboutMeContent p { color: #1e1e1e; font-size: 16px; font-style: normal; font-weight: 500; } main .mainContent .content .lawerServicesContanier { margin-bottom: 36px !important; } .servicePrice { background-color: #0fb820; padding: 8px !important; color:white !important; font-size: 18px; border-radius: 8px; } .serviceNotes { font-size: 15px !important; } main .mainContent .content .lawerServicesContanier .lawerServicesTitle p { font-weight: 400; } main .mainContent .content .lawerServicesContanier .lawerServices .lawerService { margin-bottom: 55px; display: flex; align-items: center; gap: 8px; } main .mainContent .content .lawerServicesContanier .lawerServices .lawerService .fas { font-size: 32px; } main .mainContent .content .lawerServicesContanier .lawerServices .lawerService p { color: #1e1e1e; font-size: 24px; font-style: normal; font-weight: 500; line-height: normal; } main .mainContent .content .contactUsContainer { margin-bottom: 36px !important; } main .mainContent .content .contactUsContainer .contactUsTitle p { font-weight: 400; } main .mainContent .content .contactUsContainer .contactUs .contactUsDatas { background-color: white; padding: 16px 16px 0px 16px !important; border-radius: 0px 8px 8px 0px; } main .mainContent .content .contactUsContainer .contactUs { display: flex; } main .mainContent .content .contactUsContainer .contactUs .contactUsDatas .contactUsData { display: flex; align-items: center; gap: 8px; margin-bottom: 16px !important; } main .mainContent .content .contactUsContainer .contactUs .contactUsDatas .contactUsData { color: #1e1e1e; font-size: 24px; font-style: normal; font-weight: 500; } main .mainContent .content .contactUsContainer .contactUs .contactUsDatas .contactUsData svg { font-size: 32px; color: #1475cf; } main .mainContent .content .contactUsContainer .contactUs .locationMap iframe { width: 100%; height: 100%; border: none; border-radius: 8px 0px 0px 8px; } .tooltipService { position: relative; } .userSelect { user-select: text; } .tooltipService .tooltiptextService { visibility: hidden; width: 300px; top: 100%; background-color: #2087e7 !important; color: #fff !important; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltipService */ position: absolute; z-index: 99999; } .tooltipService .tooltiptextService::after { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltipService:hover .tooltiptextService { visibility: visible; }@media only screen and (max-width: 768px) { body{ padding-right: 12px !important; padding-left: 12px !important; } .container{ } main .mainContent .content { padding-right: 0px !important; padding-left: 0px !important; } .headTitle { font-size: 32px !important; } /*Start Header*/ .HeaderContanier .smScreen{ width: 100%; display: none; flex-direction: column; height: fit-content; padding: 16px !important; margin-top: 24px !important; gap: 16px; border-radius: 8px; background: #FFF; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } .HeaderContanier .smScreen .logoAndNav { max-width: 100% ; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .HeaderContanier .smScreen .logoAndNav .logo{ display: flex !important; justify-content: center; align-items: center; width: fit-content; } .HeaderContanier .smScreen .logoAndNav .logo p{ color: #000; font-size: 30px; font-style: normal; font-weight: 400; line-height: 30px; /* 100% */ } .HeaderContanier .smScreen .logoAndNav .logo img{ width: 49.362px; height: 44.426px; flex-shrink: 0; } .HeaderContanier .smScreen .logoAndNav .burgerMenu{ width: fit-content !important; display: flex !important; justify-content: center; align-items: center; background-color: var( --burgerMenu-background-color); padding: 10px !important; border-radius: 8px; } .HeaderContanier .smScreen .logoAndNav .burgerMenu .fas{ font-size: 26px; color: var( --burgerMenu-icon-color); } .HeaderContanier .smScreen .menuContainer{ max-width: 100% !important; width: 100%; max-height: 110vh; height: 110vh; position: absolute; left: 0; top: 10px; z-index: 9999; background-color: var(--main-background-color1); padding: 16px !important; transform: translateX(770px); transition: transform 0.3s ease; } .HeaderContanier .smScreen .menuContainer.open{ transform: translateX(0px); } .HeaderContanier .smScreen .menuContainer .closeBtn{ font-size: 24px; } .HeaderContanier .smScreen .menuContainer .searchContanier{ display: flex; height: 50px; padding: 0px 8px !important; justify-content: flex-start; align-items: center; gap: 10px; flex: 1 0 0; border-radius: 8px; background: #FFF; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } .HeaderContanier .smScreen .menuContainer .searchContanier .searchInput{ border: none; width: -webkit-fill-available; height: 40px; } .HeaderContanier .smScreen .menuContainer .searchContanier .filterButton{ width: 23px; height: 23px; background-color: #ffffff00; border: none; } .HeaderContanier .smScreen .menuContainer .searchContanier .searchButton{ width: 50px; height: 39px; background-color: black; color: white; border: none; border-radius: 8px; } .HeaderContanier .smScreen .menuContainer .orderButton{ width: 100%; position: relative; bottom: -62vh; } .HeaderContanier .smScreen .menuContainer .orderButton p{ color: #FFF; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 23px; /* 95.833% */ line-height: 0px; margin-bottom: 0px !important; } .HeaderContanier .smScreen .menuContainer .orderButton svg{ width: 27.6px; height: 20.444px; flex-shrink: 0; color: #FFF; } .HeaderContanier .smScreen .menuContainer .logoAndNav nav .container-fluid{ justify-content: end; } .HeaderContanier .smScreen .menuContainer .logoAndNav .nav{ display: flex; } .HeaderContanier .smScreen .menuContainer .logoAndNav .nav ul{ display: flex; width: fit-content; list-style: none; gap: 8px; margin-bottom: 0px !important; } .HeaderContanier .smScreen .menuContainer .logoAndNav .nav ul li a{ color: #000; font-size: 18px; font-style: normal; font-weight: 400; line-height: 30px; /* 166.667% */ margin-bottom: 0px !important; text-decoration: none; } nav .container-fluid #navbarNavDropdown .navbar-nav .dropdown .dropdown-menu li .dropdown-item { padding: 0.25rem 1rem !important; border-bottom: 1px solid #d9d9d94a !important; } .HeaderContanier .smScreen .menuContainer .userContainer { display: flex; justify-content: flex-end !important; } .HeaderContanier .smScreen .menuContainer .userContainer .profile{ width: 50px; height: 50px; position: relative; border-radius: 100px; background: #1E1E1E; } .HeaderContanier .smScreen .menuContainer .userContainer .profile img{ width: 40px; height: 40px; position: absolute; left: 5px; top: 5px; border-radius: 100px; } /*End Header*/ main .mainContent .content .contactUsContainer .contactUs .contactUsDatas .contactUsData { font-size: 18px; } main .mainContent .content .contactUsContainer .contactUs .locationMap iframe { margin-top: 24px; margin-right: 0px; } main .content .recentlyConsultantsContanier .recentlyConsultants .recentlyConsultant { width: 100%; max-width: 100%; } main .mainContent .storysContainer .storys .storysAccounts::-webkit-scrollbar { display: none; } main .content .lawSectionsConatiner .lawSectoins .lawSection::-webkit-scrollbar { display: none; } main .mainContent .sidebarContainer .sidebar { position:relative; overflow-y:unset; } }@media only screen and (min-width: 1024px) and (max-width: 1439px) { .HeaderContanier .lgScreen .governorat .dropdown .btn { padding: 0px 8px !important; width: fit-content; } .HeaderContanier .lgScreen .searchContanier { width: 200px; } .HeaderContanier .lgScreen .searchContanier .searchInput { width: 100px; } main .mainContent .sidebarContainer .sidebar { width: 240px; } main .mainContent .sidebarContainer .sidebar .lawerJoin p { width: 240px; } } main .mainContent .content .cricleConsultantAskConatainer { position: fixed; right: inherit; bottom: 16px; cursor: pointer; z-index: 999 !important; } main .mainContent .content .cricleChangeLangConatainer { margin-right: 110px; } main .mainContent .content .cricleConsultantAskConatainer .cricleConsultantAsk { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 10px; width: 100px; height: 100px; border-radius: 100px; border-bottom: 5px solid var(--button-border-color-0); background: var(--button-backgroundColor-0); color: var(--button-fontColor-0); } main .mainContent .content .cricleConsultantAskConatainer .cricleConsultantAsk svg { font-size: 24px; } main .mainContent .content .cricleConsultantAskConatainer .cricleConsultantAsk p { font-size: 18px; text-align: center; } .payedConsultantConatainer { width: 100%; height: 111.5vh; position: fixed; top: 0; left: 0; overflow: scroll; z-index: 1000 !important; background-color: rgba(0, 0, 0, 0.425); padding: 16px !important; } .payedConsultantConatainer::-webkit-scrollbar { display: none; } .payedConsultantConatainer .payedConsultant { width: 100%; height: fit-content; margin: 0; background-color: white; padding: 16px !important; border-radius: 8px; } .payedConsultantConatainer .payedConsultant .payedConsultantTitle { color: #000; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; padding-bottom: 16px !important; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes { gap: 8px !important; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes .payedConsultantType { max-width: 400px; display: flex; height: fit-content; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 8px; border: 2px solid #b9adad; padding: 16px !important; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes .payedConsultantType .title { color: #1e1e1e; text-align: center; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes .payedConsultantType .description { color: #1e1e1e; text-align: center; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes .payedConsultantType .price { color: #1e1e1e; text-align: center; font-size: 48px; font-style: normal; font-weight: 700; line-height: normal; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes .payedConsultantType .featuer { color: #1e1e1e; text-align: center; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; } .payedConsultantConatainer .payedConsultant .payedConsultantTypes .payedConsultantType .askbutton { } .orderTextConsultingContainer { width: 100%; height: 111.5vh; position: fixed; top: 0; left: 0; overflow: scroll; z-index: 1000 !important; background-color: rgba(0, 0, 0, 0.425); padding: 16px !important; } .orderTextConsultingContainer::-webkit-scrollbar { display: none; } .orderTextConsultingContainer .orderTextConsulting { width: 75%; height: fit-content; margin: 0; background-color: white; padding: 16px !important; border-radius: 8px; } .orderTextConsultingContainer .orderTextConsulting .orderTextConsultingTitle { color: #000; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; padding-bottom: 16px !important; } .orderTextConsultingContainer .orderTextConsulting .orderTextConsultingForm { gap: 8px !important; } .orderTextConsultingContainer .orderTextConsulting .orderTextConsultingForm input, textarea, select { padding: 18px !important; gap: 10px; } .orderTextConsultingContainer .orderTextConsulting .orderTextConsultingForm .submitButton { display: flex; justify-content: center; align-items: center; } .orderTextConsultingContainer .orderTextConsulting .orderTextConsultingForm .submitButton .submit { padding: 0px !important; } .videoStoryContainer { width: 100%; height: 111.5vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1000 !important; background-color: rgba(0, 0, 0, 0.425); padding: 16px !important; } .videoStoryContainer .closeBtn { position: absolute; z-index: 990; margin-top: -43px; background: var(--main-background-color2); padding: 8px !important; border-radius: 8px; } .videoStoryContainer .videoStroy { width: fit-content; height: fit-content; margin: 0; background-color: white; padding: 16px !important; border-radius: 8px; } main .mainContent .content .adsBanner { width: 100%; background-color: gainsboro; height: 257px; } main .mainContent .content .adsBanner img { } .footerContainer { display: flex !important; flex-direction: column; height: fit-content; padding: 16px !important; margin-top: 24px !important; margin-bottom: 24px !important; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; align-self: stretch; border-radius: 8px; background: var(--main-background-color2); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } .footerContainer .logo { display: flex; font-size: 30px; } .footerContainer .footerNav { width: 100%; display: flex; justify-content: center; align-items: center; } .footerContainer .footerNav ul { display: flex; justify-content: center; align-items: center; width: 50%; margin-bottom: 0px !important; } .footerContainer .footerNav ul li { width: fit-content; text-align: center; padding: 0 8px !important; } *{ /*start main color*/ --main-background-color1: #ffffff; --main-background-color2: #ffffff; --main-background-color3: #2087E7; /*end main color*/ /*Start burgerMenu*/ --burgerMenu-background-color: #2087E7; --burgerMenu-icon-color: #ffffff; /*EndburgerMenu*/ /*start button background and font color */ /*button style 0*/ --button-backgroundColor-0: #2087E7; --button-border-color-0: #1475CF; --button-fontColor-0: white; --hover-button-backgroundColor-0: #1475CF; --hover-button-border-color-0: #2087E7; --hover-button-fontColor-0: white; /*button style 1*/ --button-backgroundColor-1: white; --button-border-color-1: #2087E7; --button-fontColor-1: #2087E7; --hover-button-backgroundColor-1: #2087E7; --hover-button-border-color-1: #1475CF; --hover-button-fontColor-1: white; /*end button background and font color*/ } body { background-color: var(--main-background-color1) !important ; margin-bottom: 0px !important; } ul { list-style-type: none; } a { text-decoration-line: none !important; color: black !important; } p { font-family: Arabic !important; margin-bottom: 0px !important; text-align: right; } .row { margin-right: 0px !important; margin-left: 0px !important; --bs-gutter-x: 0px !important; } .display { display: flex !important; } .hidden { display: none !important; } .closeBtn { width: fit-content; cursor: pointer; } .mainContent { margin: 24px 0px !important; z-index: 999 !important; } .mainContent .content { position: relative; } .no-scroll { overflow: hidden; } .mainContent .content { padding-left: 24px !important; } .btn { display: flex !important; justify-content: center; justify-items: center; align-items: center; flex-shrink: 0; border-radius: 8px !important; border-bottom: 5px solid var(--button-border-color-0) !important; background: var(--button-backgroundColor-0) !important; color: var(--button-fontColor-0) !important; gap: 8px; cursor: pointer; } .btn:hover { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); background: var(--hover-button-backgroundColor-0) !important; } .second-btn { display: flex !important; justify-content: center; justify-items: center; align-items: center; flex-shrink: 0; border-radius: 8px !important; background-color: var(--button-backgroundColor-1); border: 3px solid var(--button-border-color-1) !important; color: var(--button-fontColor-1) !important; gap: 8px; cursor: pointer; } .second-btn:hover { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); color: var(--hover-button-fontColor-1) !important; background: var(--hover-button-backgroundColor-1) !important; } .headTitle { color: #1e1e1e; text-align: right; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; }