.HeaderContanier .lgScreen { display: none; height: 95px; 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: 55px; background: var(--background1); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } i-checklist label { float: right !important; } .exit-teacher { background: linear-gradient(to bottom, #70b8fb 0%, #1475cf00 100%); color: black !important; padding: 6px 10px 8px 10px; margin: 5px; border-radius: 25px; } .exit-teacher:hover { background: #eceff5; } .login-btn { background: var(--button-background); color: var(--button-color) !important; padding: 6px 10px 8px 10px; margin: 5px; border-radius: 25px; } .login-btn:hover { filter: brightness(1.1); } .HeaderContanier .lgScreen .logo { } .HeaderContanier .lgScreen .logo a { display: flex; width: 166.766px; height: 44.426px; } .HeaderContanier .lgScreen .logo p { color: #000; font-size: 45px; font-style: normal; font-weight: 400; line-height: 30px; padding: 0px 0px 0px 10px; font-family: ui-monospace !important; } .logoImg1 { max-width: 100px; max-height: 90px; flex-shrink: 0; position: relative; bottom: 23px; } .logoImg2 { max-width: 280px; max-height: 90px; flex-shrink: 0; position: absolute; top: 43px; border-radius: 20px; } .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: var(--color1) !important; margin-right: 2px; } .newRegister:hover { filter: brightness(0.9) !important; } .button-screen { margin-inline: auto; } .button-screen a { padding: 15px; font-size: 22px; color: var(--color1) !important; font-family: sans-serif; } .button-screen a:hover { filter: brightness(0.8) !important; } .HeaderContanier .lgScreen .userContainer { } .HeaderContanier .lgScreen .userContainer .profile { width: 64px; height: 64px; position: relative; border-radius: 100px; background: #1e1e1e; } .HeaderContanier .lgScreen .userContainer .profile img { width: 64px; height: 64px; 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: 90%; margin: 5%; padding: 16px !important; display: flex; align-items: center; flex-shrink: 0; border-radius: 8px; background: var(--background3); box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25); gap: 16px; flex-wrap: wrap; flex-direction: column; justify-content: center; } main .mainContent .sidebarContainer .sidebar .lawerJoin p { margin: 0px !important; text-align: center; color: var(--color3); } main .mainContent .sidebarContainer .sidebar .lawerJoin a { text-align: center; } main .mainContent .sidebarContainer .sidebar .lawerJoin button { background: var(--button-background2) !important; color: var(--button-color) !important; border-bottom: unset !important; width: 100%; } 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; } .pulse-button { font-family: "Montserrat"; font-size: 20px; color: #ffffff; cursor: pointer; border-radius: 50%; padding: 15px 15px; border: 0px solid #000; } .pulse-button { animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in; } .pulse-button:hover, .pulse-button:focus { animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in, hoverShine 200ms; } @keyframes colorShift { 0%, 100% { background: #0045e6; } 33% { background: #fb3e3e; } 66%{ background: #0dcc00; } } /* Declare border pulse animation */ @keyframes borderPulse { 0% { box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1); } 100% { box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0); } } .red-dot { height: 25px; width: 25px; background-color: red; border-radius: 50%; display: block; } 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: 0px; } 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; } main .content .lawSectionsConatiner .lawSectoins .lawSection .section .sectionImg { width: 260px; height: 100px; min-width: 260px; min-height: 100px; background: #272727; object-fit: fill; } main .content .lawSectionsConatiner .lawSectoins .lawSection .section .sectionTitle { text-align: center; position: absolute; top: 20px; width: 100%; background: #0000008c; margin: 0 auto; color: #ffffff; font-size: 27px; font-style: normal; font-weight: 700; text-shadow: 0 0 8px #121212; } 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: 345px; 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; display: flex; 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; overflow: hidden; padding: 20px; height: 90px !important; white-space: nowrap; text-overflow: ellipsis; } 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; } .img-recentlyConsultants { height: 59%; width: 100%; border-radius: 1px 0px 10px 10px; } .name-recentlyConsultants { overflow: hidden; width: 60% !important; white-space: nowrap; text-overflow: ellipsis; position: absolute; display: -webkit-box; } .clock-recentlyConsultants { margin-top: 19px; color: #b9adad; font-size: smaller; }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 { font-size: 40px; font-style: normal; font-weight: 700; line-height: 40px; /* 100% */ } main .mainContent .content .profileInfoContainer .profileInfo .profileNameAndType .profileType p { 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 { display: flex; padding: 8px !important; margin-bottom: 36px !important; flex-direction: column; border-radius: 8px; background-color: var(--main-background-color2); gap: 8px; } .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: 10px !important; margin-top: 20px !important; gap: 16px; border-radius: 55px; 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; align-items: center; width: fit-content; } .HeaderContanier .smScreen .logoAndNav .logo span { color: #000; font-size: 28px; font-style: normal; font-family: initial; font-weight: 400; line-height: 30px; } /* .HeaderContanier .smScreen .logoAndNav .logo img { width: 100px !important; height: 55px !important; flex-shrink: 0; position: inherit; 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); background: #eceff5; margin-top: 10px !important; } .HeaderContanier .smScreen .menuContainer .closeBtn { font-size: 24px; color: #1475cf; text-align-last: right; margin-bottom: 5px !important; } .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; } .dropdown-toggle { width: 170px; } .notifacation-icon { margin-top: 10px; } .exit-teacher { background: linear-gradient(to bottom, #70b8fb 0%, #1475cf00 100%); color: black !important; padding: 10px; margin: 5px; font-weight: bold; border-radius: 25px; margin-top: 12px !important; display: inline-block; } .dropdown-menu { width: 170px; } 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: table !important; text-align: -webkit-center; justify-content: flex-end !important; } .HeaderContanier .smScreen .menuContainer .userContainer .profile { width: 64px; height: 64px; position: relative; border-radius: 100px; background: #1e1e1e; } .HeaderContanier .smScreen .menuContainer .userContainer .profile img { width: 64px; height: 64px; position: none; left: 0px; top: 0px; 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; } .button-screen { display: grid; justify-items: right; margin-top: 20px !important; background: white; padding: 10px !important; border-radius: 10px; } .logoImg2 { max-width: 100% !important; max-height: 90px !important; flex-shrink: 0; position: sticky; top: 43px; } .login-btn { padding: 10px 20px 10px 15px; margin: 25px; font-size: larger; } .newRegister { font-size: larger; } .logoImg1 { max-width: 100px !important; max-height: 55px !important; flex-shrink: 0; position: inherit; flex-shrink: 0; } /* .student-parent-main { display: ruby; text-align: center; margin: 0px !important; margin-bottom: 40px !important; } .student-parent { display: -webkit-box; img { border: 0px solid !important; height: 200px !important; width: 100% !important; border-radius: 30px 30px 0px 0px !important; } span { text-align: -webkit-center; position: absolute !important; display: grid; margin: -16px 0px 0px 0px !important; border-radius: 0px 0px 20px 20px !important; width: -webkit-fill-available; top: auto !important; left: 0px !important; } } */ .student-parent-main { margin-bottom: 50px; margin-right: 0px !important; justify-content: center; display: flex; } }@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 { } .nameNotBesidLogoShow { width: 100%; max-height: 300px; object-fit: fill; border-radius: 15px; } .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(--background1); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } .footerContainer .logo { place-content: center; display: flex; font-size: 30px; width: 100%; } .footerContainer .logo p { padding: 0px 0px 0px 10px; font-size: xxx-large; font-family: ui-monospace !important; } .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; } .social-menu { display: -webkit-inline-box; } .social-menu ul { position: relative; display: contents; } .social-menu ul li { list-style: none; margin: 0 10px; } .social-menu ul li .fab { color: white; font-size: 25px; line-height: 25px; transition: 0.5s; padding: 10px; } .social-menu ul li .fab:hover { color: #ffffff; } .social-menu ul li a { position: relative; display: block; width: 50px; height: 50px; border-radius: 50%; /* background-color: var(--button-background); */ text-align: center; transition: 0.5s; transform: translate(0, 0px); box-shadow: 0px 7px 5px rgb(124 175 255 / 50%); } .social-menu ul li a:hover { transform: rotate(0deg) skew(0deg) translate(0, -10px); } .linkedin-icon { background-color: #0077b5; } .facebook-icon { background-color: #0866ff; } .twitter-icon { background-color: #55acee; } .instagram-icon { background-image: linear-gradient(to right top, #405de6, #5851db, #833ab4, #c13584, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80); } .youtube-icon { background-color: red; } .whatsappContact { font-size: xx-large; color: white; left: 10px; top: 5px; position: absolute; } .cbh-phone { display: block; position: fixed; left: -37px; bottom: -40px; visibility: hidden; background-color: transparent; width: 350px; height: 200px; cursor: pointer; z-index: 990; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-transition: visibility 0.5s; -moz-transition: visibility 0.5s; -o-transition: visibility 0.5s; transition: visibility 0.5s; } .cbh-phone.cbh-show { visibility: visible; } .cbh-phone p { font-weight: bold; font-size: large; position: absolute; top: 70px; color: white; font-family: "Droid Arabic Kufi" !important; left: 135px; background: linear-gradient(120deg, rgb(64 245 187) 0%, rgb(46 203 113) 100%); padding: 10px; border-radius: 20px 20px 20px 0px; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } .cbh-phone.cbh-static1 { opacity: 0.6; } .cbh-phone.cbh-hover1 { opacity: 1; } .cbh-ph-circle { width: 110px; height: 110px; top: 40px; left: 40px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: 0.1; -webkit-animation: cbh-circle-anim 1.2s infinite ease-in-out; -moz-animation: cbh-circle-anim 1.2s infinite ease-in-out; -ms-animation: cbh-circle-anim 1.2s infinite ease-in-out; -o-animation: cbh-circle-anim 1.2s infinite ease-in-out; animation: cbh-circle-anim 1.2s infinite ease-in-out; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cbh-phone.cbh-active .cbh-ph-circle1 { -webkit-animation: cbh-circle-anim 1.1s infinite ease-in-out !important; -moz-animation: cbh-circle-anim 1.1s infinite ease-in-out !important; -ms-animation: cbh-circle-anim 1.1s infinite ease-in-out !important; -o-animation: cbh-circle-anim 1.1s infinite ease-in-out !important; animation: cbh-circle-anim 1.1s infinite ease-in-out !important; } .cbh-phone.cbh-static .cbh-ph-circle { -webkit-animation: cbh-circle-anim 2.2s infinite ease-in-out !important; -moz-animation: cbh-circle-anim 2.2s infinite ease-in-out !important; -ms-animation: cbh-circle-anim 2.2s infinite ease-in-out !important; -o-animation: cbh-circle-anim 2.2s infinite ease-in-out !important; animation: cbh-circle-anim 2.2s infinite ease-in-out !important; } .cbh-phone.cbh-hover .cbh-ph-circle { border-color: rgba(0, 175, 242, 1); opacity: 0.5; } .cbh-phone.cbh-green.cbh-hover .cbh-ph-circle { border-color: rgba(117, 235, 80, 1); opacity: 0.5; } .cbh-phone.cbh-green .cbh-ph-circle { border-color: rgba(0, 175, 242, 1); opacity: 0.5; } .cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle { border-color: rgba(204, 204, 204, 1); opacity: 0.5; } .cbh-phone.cbh-gray .cbh-ph-circle { border-color: rgba(117, 235, 80, 1); opacity: 0.5; } .cbh-ph-circle-fill { width: 74px; height: 74px; top: 58px; left: 58px; position: absolute; background-color: #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: 0.1; -webkit-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out; -moz-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out; -ms-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out; -o-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out; animation: cbh-circle-fill-anim 2.3s infinite ease-in-out; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cbh-phone.cbh-active .cbh-ph-circle-fill { -webkit-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important; -moz-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important; -ms-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important; -o-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important; animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important; } .cbh-phone.cbh-static .cbh-ph-circle-fill { -webkit-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important; -moz-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important; -ms-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important; -o-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important; animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important; opacity: 0 !important; } .cbh-phone.cbh-hover .cbh-ph-circle-fill { background-color: rgba(0, 175, 242, 0.5); opacity: 0.75 !important; } .cbh-phone.cbh-green.cbh-hover .cbh-ph-circle-fill { background-color: rgba(117, 235, 80, 0.5); opacity: 0.75 !important; } .cbh-phone.cbh-green .cbh-ph-circle-fill { background-color: rgba(0, 175, 242, 0.5); opacity: 0.75 !important; } .cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle-fill { background-color: rgba(204, 204, 204, 0.5); opacity: 0.75 !important; } .cbh-phone.cbh-gray .cbh-ph-circle-fill { background-color: rgba(117, 235, 80, 0.5); opacity: 1 !important; } .cbh-ph-img-circle1 { width: 50px; height: 50px; top: 70px; left: 70px; position: absolute; background-size: 40px 40px; background-color: rgba(30, 30, 30, 0.1); background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: 1; -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out; -moz-animation: cbh-circle-img-anim 1s infinite ease-in-out; -ms-animation: cbh-circle-img-anim 1s infinite ease-in-out; -o-animation: cbh-circle-img-anim 1s infinite ease-in-out; animation: cbh-circle-img-anim 1s infinite ease-in-out; } .cbh-phone.cbh-active .cbh-ph-img-circle1 { -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out !important; -moz-animation: cbh-circle-img-anim 1s infinite ease-in-out !important; -ms-animation: cbh-circle-img-anim 1s infinite ease-in-out !important; -o-animation: cbh-circle-img-anim 1s infinite ease-in-out !important; animation: cbh-circle-img-anim 1s infinite ease-in-out !important; } .cbh-phone.cbh-static .cbh-ph-img-circle1 { -webkit-animation: cbh-circle-img-anim 0s infinite ease-in-out !important; -moz-animation: cbh-circle-img-anim 0s infinite ease-in-out !important; -ms-animation: cbh-circle-img-anim 0s infinite ease-in-out !important; -o-animation: cbh-circle-img-anim 0s infinite ease-in-out !important; animation: cbh-circle-img-anim 0s infinite ease-in-out !important; } .cbh-phone.cbh-hover .cbh-ph-img-circle1 { background-color: rgba(0, 175, 242, 1); } .cbh-phone.cbh-green.cbh-hover .cbh-ph-img-circle1:hover { background-color: rgba(117, 235, 80, 1); } .cbh-phone.cbh-green .cbh-ph-img-circle1 { background-color: rgba(0, 175, 242, 1); } .cbh-phone.cbh-green .cbh-ph-img-circle1 { background-color: rgba(0, 175, 242, 1); } .cbh-phone.cbh-gray.cbh-hover .cbh-ph-img-circle1 { background-color: rgba(204, 204, 204, 1); } .cbh-phone.cbh-gray .cbh-ph-img-circle1 { background-color: rgba(117, 235, 80, 1); } @-moz-keyframes cbh-circle-anim { 0% { -moz-transform: rotate(0deg) scale(0.5) skew(1deg); opacity: 0.1; -moz-opacity: 0.1; -webkit-opacity: 0.1; -o-opacity: 0.1; } 30% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.5; -moz-opacity: 0.5; -webkit-opacity: 0.5; -o-opacity: 0.5; } 100% { -moz-transform: rotate(0deg) scale(1) skew(1deg); opacity: 0.6; -moz-opacity: 0.6; -webkit-opacity: 0.6; -o-opacity: 0.1; } } @-webkit-keyframes cbh-circle-anim { 0% { -webkit-transform: rotate(0deg) scale(0.5) skew(1deg); -webkit-opacity: 0.1; } 30% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); -webkit-opacity: 0.5; } 100% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); -webkit-opacity: 0.1; } } @-o-keyframes cbh-circle-anim { 0% { -o-transform: rotate(0deg) kscale(0.5) skew(1deg); -o-opacity: 0.1; } 30% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); -o-opacity: 0.5; } 100% { -o-transform: rotate(0deg) scale(1) skew(1deg); -o-opacity: 0.1; } } @keyframes cbh-circle-anim { 0% { transform: rotate(0deg) scale(0.5) skew(1deg); opacity: 0.1; } 30% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.5; } 100% { transform: rotate(0deg) scale(1) skew(1deg); opacity: 0.1; } } @-moz-keyframes cbh-circle-fill-anim { 0% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } 50% { -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg); opacity: 0.2; } 100% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } } @-webkit-keyframes cbh-circle-fill-anim { 0% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } 50% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); opacity: 0.2; } 100% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } } @-o-keyframes cbh-circle-fill-anim { 0% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } 50% { -o-transform: rotate(0deg) scale(1) skew(1deg); opacity: 0.2; } 100% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } } @keyframes cbh-circle-fill-anim { 0% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } 50% { transform: rotate(0deg) scale(1) skew(1deg); opacity: 0.2; } 100% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: 0.2; } } @keyframes cbh-circle-img-anim { 0% { transform: rotate(0deg) scale(1) skew(1deg); } 10% { transform: rotate(-25deg) scale(1) skew(1deg); } 20% { transform: rotate(25deg) scale(1) skew(1deg); } 30% { transform: rotate(-25deg) scale(1) skew(1deg); } 40% { transform: rotate(25deg) scale(1) skew(1deg); } 100%, 50% { transform: rotate(0deg) scale(1) skew(1deg); } } @-moz-keyframes cbh-circle-img-anim { 0% { transform: rotate(0deg) scale(1) skew(1deg); } 10% { -moz-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -moz-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -moz-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -moz-transform: rotate(25deg) scale(1) skew(1deg); } 100%, 50% { -moz-transform: rotate(0deg) scale(1) skew(1deg); } } @-webkit-keyframes cbh-circle-img-anim { 0% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 100%, 50% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); } } @-o-keyframes cbh-circle-img-anim { 0% { -o-transform: rotate(0deg) scale(1) skew(1deg); } 10% { -o-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -o-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -o-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -o-transform: rotate(25deg) scale(1) skew(1deg); } 100%, 50% { -o-transform: rotate(0deg) scale(1) skew(1deg); } } .cbh-ph-img-circle1 { } .cbh-phone.cbh-green .cbh-ph-circle { border-color: rgb(0, 242, 164); } .cbh-phone.cbh-green .cbh-ph-circle-fill { background-color: rgb(0, 242, 164); } .cbh-phone.cbh-green .cbh-ph-img-circle1 { background-color: rgb(46, 203, 113); } .kmacb__manager-border { position: absolute; width: 75px; height: 75px; top: 50%; left: 50%; margin-top: -39.5px; margin-left: -39.5px; border-radius: 100%; border: 2px solid #ffe787; -webkit-animation: kmacb__manager-border-anim 1.5s ease-in-out 0.5s infinite; -moz-animation: kmacb__manager-border-anim 1.5s ease-in-out 0.5s infinite; -ms-animation: kmacb__manager-border-anim 1.5s ease-in-out 0.5s infinite; -o-animation: kmacb__manager-border-anim 1.5s ease-in-out 0.5s infinite; animation: kmacb__manager-border-anim 1.5s ease-in-out 0.5s infinite; opacity: 0.8; transform-origin: center; } .kmacb__manager-fill { background: #52aff7 center bottom no-repeat; position: absolute; width: 75px; height: 75px; top: 50%; left: 50%; margin-top: -37.5px; margin-left: -37.5px; border-radius: 100%; opacity: 0.5; -webkit-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite; -moz-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite; -ms-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite; -o-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite; animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite; transform-origin: center; } .kmacb__manager-circle { background: #52aff7; position: absolute; width: 120px; height: 120px; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; border-radius: 100%; } .copyright { color: var(--color1) !important; } .hover-a { color: var(--color1) !important; } .hover-a:hover { filter: brightness(0.8) !important; text-decoration-line: underline !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*/ } :root { --body-margin-top: 0px; --body-margin-bottom: 0px; --zoom: 100%; --fieldset-border: none; } * { max-width: initial; } .bottom { bottom: 0 !important; top: unset !important; } .mob-login-div { margin-top: 10px !important; margin-bottom: 10px !important; background: var(--button-backgroundColor-1) !important; padding: 15px 0px 15px 0px; border-radius: 55px; } body { background-color: var(--main-background-color1) !important ; margin-bottom: 0px !important; background-image: var(--background-image) !important; background-repeat: round; background-size: cover; } ul { list-style-type: none; } a { text-decoration: none; color: var(--color1); } a:hover { text-decoration: underline; } 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: center; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; } .viewAll { color: #1475cf !important; cursor: pointer; padding: 10px; font-size: larger; } .viewAll:hover { color: #1e14cf !important; font-size: 20px; } .scrollx-menu { padding: 10px !important; overflow-x: auto; flex-direction: column-reverse; height: 37vw !important; scrollbar-color: #2087e7 #e7e7e7; } .notifacation-padge { position: absolute; background: red; color: white; width: 21px; font-size: smaller; padding: 2px; border-radius: 50%; text-align-last: center; bottom: 25px; left: 20px; } .notifacation-icon { font-size: 40px; color: var(--color1) !important; } .notifacation-icon:hover { filter: brightness(0.9) !important; } .color1 { color: var(--color1) !important; } .color2 { color: var(--color2) !important; } .color3 { color: var(--color3) !important; } .color4 { color: var(--color4) !important; } .background1 { background: var(--background1) !important; } .background2 { background: var(--background2) !important; } .background3 { background: var(--background3) !important; } .background4 { background: var(--background4) !important; } .notification-menu { display: none; position: absolute; width: 480px; left: 109px; top: 108px; max-height: 400px; bottom: auto; text-align: center; border-top: none; background: white; border-radius: 13px 13px 13px 13px; box-shadow: 1px 2px 1px 0px #c9c9c9b3; overflow: hidden; border: #f1f1f1 solid; z-index: 9999; overflow: hidden; overflow-y: scroll; } .notifacation-title { font-size: 18px; font-weight: bold; padding: 2px; margin: 1px; overflow: hidden; white-space: nowrap; width: 80%; text-overflow: ellipsis; } .notifacation-logo { height: 100%; border-radius: 50%; padding: 3px; width: 80px; } .gray { color: gray; } .notifacation-content { font-size: 17px; color: #616161; overflow: hidden; width: 90%; white-space: nowrap; text-overflow: ellipsis; } .notification-viewAll { text-align: center; color: #2087e7; font-size: larger; font-family: fantasy !important; } .separative { height: 2px; background: linear-gradient(90deg, rgba(0, 0, 0, 0) -0.09%, rgb(52 94 255 / 79%) 50.9%, rgba(0, 0, 0, 0) 99.81%); margin: 15px !important; } .notifacation-data:hover { background-color: #f2f2f2; } .ul-list { display: inline-table !important; } .alert-green { border: 1px solid; padding: 10px; text-align: center; font-weight: bold; font-size: larger; color: white; background: green; border-radius: 10px; } figure { position: relative; align-items: center; float: inline-start; justify-content: center; width: 300px; margin: 10px; height: 430px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; &:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); h1 { opacity: 0; transform: scale(0.7); } img { transform: scale(1.25); } figcaption { bottom: 0; } } .type { text-align: center; position: absolute; top: 0; margin: 0; padding: 10px; color: black; font-size: 22px; font-weight: 100; opacity: 0.8; z-index: 990; background: #c6c6c6; height: auto; width: 100%; border: 5px solid #c5c5c5; } .name { text-align: center; position: absolute; top: 0; margin: 0; padding: 10px; color: white; font-size: 22px; height: 45px; font-weight: 100; opacity: 0.8; z-index: 990; background: #000000; height: auto; width: 100%; border: 5px solid #000000; } img { height: 100%; width: 100%; transition: 0.25s; } figcaption { position: absolute; bottom: 0%; left: 0; width: 100%; margin: 0; padding: 30px; background-color: rgba(black, 0.85); box-shadow: 0 0 20px rgba(black, 0.4); color: white; line-height: 1; transition: 0.25s; div { background: var(--button-background); color: var(--button-color); border-radius: 13px; } /* h3 { margin: 0 0 20px; padding: 0; } */ .price { text-align: center; font-weight: bold; position: relative; font-size: large; } p { border-radius: 10px; background: rgb(0 0 0 / 45%); font-size: 15px; line-height: 1.8; padding: 10px; text-align: center; max-height: 120px; overflow: hidden; white-space: normal; text-overflow: ellipsis; } button { position: relative; display: flex; align-items: center; justify-content: center; margin: 10px 0 0; padding: 10px 30px; background-color: #1e14cf; border: none; border-radius: 5px; color: white; font-size: 14px; cursor: pointer; } } } .content-right { text-align: -webkit-right; } .schoolYear-buttons { display: ruby; text-align : center; img { width: 265px; height: 175px; cursor: pointer; border: 1px solid black; border-radius: 15px; } } .teacher-main-li { padding: 10px; margin: 10px; height: 480px; width: 270px; transition: all 0.2s ease; a { text-align-last: center; text-decoration: none; } } .teacher-main-li:hover { transform: scale(1.1); } .teacher-main-div { border: 1px solid; background: white; border-radius: 15px; img { max-height: 225px; max-width: 250px !important; padding: 5px; border-radius: 15px 15px 0px 0px; } } .teacher-main-bio { font-size: 13px; line-height: 1.8; padding: 2px 10px 0px 10px; text-align: center; height: 122px !important; overflow: hidden; white-space: normal; text-overflow: ellipsis; color: lightslategray; } .modal { background-color: var(--background2) !important; } .modal-header { background-color: var(--background2) !important; } .price-more-card { margin: 10px 0px 0px 0px !important; padding: 10px !important; } .bg-ad { background-color: var(--background4); border-radius: 13px; color: var(--color4); } .more-card { position: relative; text-align: center; font-weight: bold; font-size: larger; } /* .buy-btn { margin: 15px -5px 20px 0px; text-align-last: center; background: var(--button-background); color: var(--button-color); border-radius: 5px; font-size: x-large; } .btn { background: var(--button-background) !important; color: var(--button-color) !important; border-bottom: none !important; } .btn:hover { filter: brightness(1.1) !important; background-color: var(--button-background) !important; } .buy-btn:hover { filter: brightness(1.1); } */ .links-a { display: block; margin: 10px; background: gainsboro; padding: 10px; max-inline-size: max-content; color: #0000a2 !important; font-weight: bold; font-size: large; border-radius: 10px; } button { margin-bottom: 15px; text-align: -webkit-center; background: transparent; color: var(--button-color) !important; font-size: 22px; text-transform: uppercase; font-weight: 600; border: none; padding: 12px 30px; cursor: pointer; perspective: 10rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308); } button::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 10px; background: linear-gradient(320deg, var(--button-background), rgba(76, 76, 76, 0.308)); z-index: 1; transition: background 3s; } button:hover::before { animation: rotate 1s; transition: all 0.5s; } @keyframes rotate { 0% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); } } .nft { display: inline-block; user-select: none; margin: 15px !important; width: 300px; height: 500px; float: right; border: 1px solid #ffffff22; background: linear-gradient(120deg, rgb(141 194 243) 0%, rgb(18 127 229) 100%); box-shadow: 0 7px 20px 5px #a4adff; border-radius: 10px 0px 0px 10px; border-right: 7px dashed #d6e0ff; backdrop-filter: blur(7px); overflow: hidden; transition: 0.5s all; hr { width: 100%; border: none; border-bottom: 1px solid #88888855; margin-top: 0; } h2 { white-space: inherit; text-overflow: ellipsis; overflow: hidden; height: 32px; text-align: center; font-family: "Font Awesome 5 Free"; color: white; font-size: 1.6rem; } ins { text-decoration: none; } .main { display: flex; flex-direction: column; padding: 1rem; .tokenImage { border-radius: 0.5rem; width: 100%; height: 250px; object-fit: cover; } .description { margin: 0.5rem 0; color: #e6edff; overflow: hidden; height: 130px; white-space: inherit; text-overflow: ellipsis; } .tokenInfo { display: flex; justify-content: space-between; align-items: center; .price { font-size: larger; display: flex; align-items: center; color: #cde7ff; font-weight: 700; ins { margin-left: 0.7rem; margin-right: 0.5rem; } } button { position: relative; display: flex; align-items: center; justify-content: center; margin: 5px 0 0; padding: 8px 30px; background-color: #000cd3; border: none; border-radius: 5px; color: white; font-size: 16px; cursor: pointer; } } } ::before { position: fixed; content: ""; box-shadow: 0 0 100px 40px #ffffff08; top: -10%; left: -100%; transform: rotate(-45deg); height: 60rem; transition: 0.7s all; } &:hover { border: 1px solid #ffffff44; box-shadow: 0 7px 25px 10px #0061bc; transform: scale(1.015); filter: brightness(1.3); ::before { filter: brightness(0.5); top: -100%; left: 200%; } } } label { color: var(--label-color); } .tabs .tabs-header .tab-link.active { background: var(--button-background) !important; color: var(--button-color) !important; border-radius: 15px !important; } .tabs .tabs-header .tab-link:hover { background: var(--button-background) !important; color: var(--button-color) !important; border-radius: 15px !important; } fieldset legend { color: var(--label-color); } .label-color { color: var(--label-color) !important; } .bg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); h1 { font-size: 20rem; filter: opacity(0.5); } } .display-ad-name { font-size: 34px; font-weight: bold; color: var(--color3) !important; margin: 5px; } .content-ad { border-radius: 15px !important; margin-top: 20px !important; padding: 15px !important; background: var(--background3) !important; } .banner-word { padding: 10px; margin: 10px 0px 10px 0px; /* background: white; border: 1px solid #b2b2b2; */ border-radius: 10px; text-align: center; /* color: #1e7cd4; */ font-weight: bold; font-size: 40px; font-family: helvetica, arial, sans-serif; } .banner-word span { font-size: 40px; font-weight: 600; font-family: sans-serif; color: var(--color2); /* text-transform: uppercase; text-shadow: 1px 1px 0px #ffffff, 1px 2px 0px #c4c4c4, 1px 3px 0px #cccccc, 1px 4px 0px #bfbfbf, 1px 5px 0px #9a9a9a, 1px 6px 0px #e4e4e4, 1px 10px 5px rgb(199 199 199 / 64%), 1px 15px 10px rgb(122 122 122 / 40%), 1px 20px 30px rgb(182 182 183 / 30%), 1px 25px 50px rgb(198 198 198 / 20%); */ } .modal-footer { flex-wrap: wrap; } .error { font-size: large; } .banner-viewAll { /* float: left; */ font-size: large; margin-top: 10px; font-family: sans-serif; color: var(--color2) !important; margin: 5px; border: 1px solid; padding: 5px; border-radius: 10px; } .banner-viewAll:hover { border-bottom: 2px solid; border-radius: 3px; filter: brightness(0.8) !important; } .student-parent-main { margin-bottom: 50px; margin-right: 20px; } .student-parent { display: -webkit-box; img { height: 170px; width: 170px; border-radius: 50%; border: 1px solid; } p { font-size: large; position: absolute; display: table-row; background: var(--button-background); color: var(--button-color); padding: 7px; border-radius: 10px; width: 170px; text-align-last: center; } } .black { color: black !important; } .banner-site { width: 100%; max-height: 600px; object-fit: fill; border-radius: 15px; } @media screen and (max-width: 480px) { .notification-menu { left: 0px; top: 125px; } } @media screen and (max-width: 480px) { .schoolYear-buttons { /* text-align-last: center; */ img { width: 325px !important; height: 300px !important; padding: 5px; } } .card-title { width: 0px !important; display: block !important; } .card { width: 100% !important; margin: 15px 0px 5px 0px !important; } figure { width: 100% !important; margin: 10px 0px 10px 10px !important; } .banner-site { height: auto; } .nameNotBesidLogoShow { height: auto; } .nft { margin: 10px 0px 15px 0px !important; width: 100% !important; } .banner-word { text-align: right; font-size: 35px; margin-bottom: 10px !important; } .notifacation-logo { position: sticky !important; } body { /* background-repeat: repeat !important; */ } main .mainContent .sidebarContainer .sidebar .lawerJoin { width: 100% !important; } }