html{ overflow-x:hidden; } :root{ color-scheme:light; --ff-ar:'IBMPlexArabic',sans-serif; --ff-en:'IBMPlexLatin',sans-serif; --primary-white:white; --secondary-white:rgb(255,255,255,0.8); --primary-black:rgb(34,34,34); --secondary-black:rgb(60,52,27); --text-dark:oklch(0.380 0.076 168.7); --gold-dark:oklch(0.434 0.090 165.9); --gold-light:rgb(242,233,222); --header-1:clamp(2rem,7vw,3.5rem); --header-2:clamp(1.5rem,5.9vw,4rem); --header-3:clamp(1.5rem,5vw,1.8rem); --body-1:1.2rem; --body-2:1.2rem; --padding-section:4rem; --padding-hero:3rem; --backdrop-bg:rgb(34,34,34); --hover-light-bg:rgb(255 255 255 / 0.7); --spacing-xs:4.5px; --spacing-s:9px; --spacing-m:18; --spacing-l:27px; --spacing-xl:38px; --gap-s:5.4px; --gap-m:18px; --gap-l:22.5px; --border-standard:1px solid var(--primary-black); --border-thick:2px solid var(--primary-black); --radius-s:6px; --radius-m:12px; --radius-pill:50px; --radius-circle:50%; --fw-semibold:600; --fw-bold:700; --transition-fast:all 0.2s ease; --max-width-container:1200px; --box-shadow:rgba(0,0,0,0.25); --animated:0%; } *:focus{ outline:3px solid var(--gold-dark); outline-offset:3px; } [lang="ar"] *, [lang="ar"]::after, [lang="ar"]::before{ font-family:var(--ff-ar); } [lang="en"] *, [lang="en"]::after, [lang="en"]::before{ font-family:var(--ff-en); } *, ::after, ::before{ box-sizing:border-box; margin:0; padding:0; font:inherit; scroll-behavior:smooth; } button{ background:none; border:none; } html:focus-within{ scroll-behavior:smooth; } body, html{ overflow-x:hidden; overflow-y:visible; height:auto; background-color:var(--secondary-white); padding:0; margin:0; } body{ text-rendering:optimize-speed; line-height:1.5; } html{font-size:16px;transition:font-size 0.1s ease-out;} img, picture{ display:block; min-height:0; } ul,li{ list-style:none; } a{ text-decoration:none; user-select:none; -webkit-user-select:none; } small{ color:grey; } p{ color:var(--secondary-black); } ::selection{ color:var(--gold-light) !important; background-color:var(--gold-dark) !important; } .container,.wrapper, .process .wrapper,.col, div:has(~.contact) h2{ max-width:calc(min(100vw,var(--max-width-container)) - 3rem); margin-inline:auto; } .center{ margin-inline:auto; } .img-cover{ width:100%; height:100%; object-fit:cover; } header{ position:relative; background-color:white; width:calc(min(100%,1200px) - 3rem); margin-inline:auto; border-bottom-left-radius:12px; border-bottom-right-radius:12px; } li{ margin:0; } .header-propper{ background-color:var(--gold-light); position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; border-radius:12px; } .header-propper .wrapper{ display:flex; position:relative; overflow-x:visible; margin-inline:auto; max-width:calc(min(100%,var(--max-width-container)) - 3rem); height:60px; align-items:center; color:var(--primary-white);display:flex;flex-direction:row-reverse; } .header-propper .button,.hero .button,footer .wrapper .button{ font-family:var(--ff); width:fit-content; padding:0.3rem 1rem; height:fit-content; translate:0,50%; background-color:var(--gold-dark); color:var(--gold-light); font-weight:700; border-radius:5px; border:2px solid var(--gold-dark); transition:background-color .3s ease; } .header-propper .button:hover,.hero .button:hover,footer .wrapper .button:hover{ background-color:var(--gold-light); color:var(--gold-dark); } .padder{ fill:var(--gold-light); position:absolute; top:7px; inset-inline-start:10px; z-index:5; transform:scaleX(1.3) scaleY(1.2); } .utilitybar{ color:white; background-color:white; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; border-radius:12px; z-index:3; } .utilitybar .wrapper{ overflow-x:visible; margin-inline:auto; height:40px; padding-block:5px; color:var(--primary-white); display:flex; flex-direction:row-reverse; align-items:center; justify-content:end; gap:10px; } .utilitybar .lang-switch svg{ height:100%; width:27px; transition:all 0.3s ease; } .utilitybar .lang-switch:hover{ fill:var(--gold-dark); } .utilitybar .phone-number{ border-radius:8px; border:1.4px solid black; padding-inline:7px; padding-block:4px; color:black; font-size:12px; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; height:27px; } .utilitybar .phone-number svg{ order:2; display:flex; align-items:center; justify-content:center; height:100%; width:16px; margin-inline-start:5px; fill:white; } .utilitybar .phone-number span{ order:1; display:flex; align-items:center; justify-content:center; height:100%;} .utilitybar *{ display:flex; align-items:center; justify-content:center; } [dir="ltr"] .utilitybar .phone-number span{ order:2; } .utilitybar .text-resizer svg{ width:16px; height:16px; fill:black; stroke-width:1.4px; transition:all 0.3s ease; } .utilitybar .text-resizer{ color:black; display:flex; inset-inline-end:0; align-items:center; border-radius:8px;  padding:0; margin:0; height:fit-content; }  .utilitybar .text-resizer button,.utilitybar .text-resizer span{ width:30px; height:27px; text-align:center; padding:0; margin:0; transition:all 0.3s ease; display:flex; justify-content:center; align-items:center; } .utilitybar .text-resizer button:first-child{ border-end-start-radius:8px; border-start-start-radius:8px; cursor:pointer; border:1.4px solid black; stroke:black; } .utilitybar .text-resizer span:nth-child(2){ border-block:1.4px solid black; } .utilitybar .text-resizer button:last-child{ border-end-end-radius:8px; border-start-end-radius:8px; cursor:pointer; border:1.4px solid black; stroke:black; } .utilitybar button:hover:not(:nth-child(2)), .utilitybar button:hover:not(:nth-child(2)) svg{ background-color:var(--gold-dark); stroke:var(--gold-light); fill:var(--gold-light); }  @media (max-width:430px){ .utilitybar .phone-number span{ display:none; } .utilitybar .phone-number svg{ margin:0; } .header-propper .button{ font-size:16px; } } header{ height:100px; color:var(--primary-white); position:relative; } header .logo{ position:absolute; top:0px; inset-inline-start:0; width:100px; height:100px; z-index:10; display:flex; align-items:center; justify-content:center; } .logo svg{ display:flex; width:92px; height:92px; } .logo path{ fill:var(--gold-dark); }  .hero{ margin-block:2.5rem;  } .hero .wrapper{ position:relative; } .hero .wrapper{ display:flex; } .hero h1{ font-size:clamp(1.5rem,7vw,2.5rem); font-weight:700; line-height:1.2; max-width:70%; }  .secondcont svg{ color:var(--gold-dark); position:absolute; bottom:50px; } .hero .firstcont{ height:clamp(300px,50vw,500px); display:flex; flex-direction:column; justify-content:center; gap:20px; z-index:2; position:relative; } .hero img{ position:absolute; z-index:1; height:100%; max-height:100%;  object-fit:cover; } [dir="rtl"] .hero img{ left:0; } [dir="ltr"] .hero img{ transform:scaleX(-1); right:0; }  .scroller{  border:2px solid var(--gold-dark); padding-block:1.5rem; max-width:1150px; overflow:hidden; margin:1.5rem auto; } .scroller__inner{ display:flex; gap:1rem; flex-wrap:wrap; } [data-animated="true"]{ mask:linear-gradient(90deg,transparent,white 10%,white 90%,transparent); -webkit-mask:linear-gradient(90deg,transparent,white 20%,white 80%,transparent); } [data-animated="true"] .scroller__inner{ flex-wrap:nowrap; flex-shrink:0; gap:0; width:max-content; animation:scroll 45s linear reverse infinite; -webkit-backface-visibility:hidden; backface-visibility:hidden; } [dir="ltr"] [data-animated="true"] .scroller__inner{ animation:scroll-reverse 45s linear reverse infinite; } .rotating{ padding-inline:1.5rem; text-align:center;  display:flex; align-items:center; justify-content:center; } .scroller:hover .scroller__inner{ animation-play-state:paused; } .scroller img{ height:10vw; max-height:70px; margin-inline:auto; } .scroller .rotating{ display:flex; flex-direction:column; } .scroller figcaption{ display:block; font-weight:600; font-size:18px; margin-block-start:1rem; color:var(--text-dark); } @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(calc(50% + 0rem)); } } @keyframes scroll-reverse{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% + 0rem)); } } #contact-header{ font-size:var(--header-1); font-weight:700; color:var(--text-dark); margin-block-start:2rem; border-top-right-radius:12px; border-top-left-radius:12px; padding-block-start:1.5rem; text-align:start; padding-bottom:0.5rem; margin-bottom:0; } .contact{ background-color:var(--gold-light); border-top-right-radius:12px; border-top-left-radius:12px; } .contact .wrapper{ display:grid; grid-template-columns:1fr 1fr; } .contact .first{ padding-block:1.5rem; display:flex; flex-direction:column; gap:0.5rem; min-height:13rem; } .details{ padding-block:1.5rem; width:100%; display:flex; flex-direction:column; gap:0.5rem } .contact .phone-number,.contact .mail{ display:flex; align-items:center; gap:3px; } .contact .phone-number span,.contact .mail span{ order:2; } .contact .second-holder{ position:relative; width:100%; height:100%; } .contact .second{ position:absolute; aspect-ratio:1 / 1; bottom:0; inset-inline-end:0; background-color:var(--gold-light); border:15px solid var(--gold-light); border-radius:27px; } @media (max-width:600px){ .contact .second{ right:0; bottom:auto; top:50%; transform:translateY(-50%); } } .contact .logo svg{ height:100px; width:100px; } .contact .logo{ position:relative; } .contact img{ border:0; height:auto; width:100%; border-radius:12px; max-width:370px; } @media (max-width:500px){ .contact .wrapper{ display:flex;  flex-direction:column;  align-items:center;  padding-block-start:1.5rem; } div:has(#contact-header){ background-color:var(--gold-light); }  #contact-header{ text-align:center; } .contact .first{ text-align:start; order:2; } .contact{ background-color:var(--gold-light); border-top-right-radius:0px; border-top-left-radius:0px;  } .contact .second-holder{position:static;} .contact .second{position:static;transform:translate(0);aspect-ratio:1/ 1;border:0;} .contact img{ position:static; aspect-ratio:1 / 1; margin-inline:auto;  } .hero h1{ max-width:100%; } .contact .logo{ display:flex; align-items:center; justify-content:center; } } .contact svg{ height:20px; } footer{ background-color:var(--gold-light); padding-block:1rem; }  a small:hover{ text-decoration:underline; pointer-events:pointer; }  .col .firstr{ display:flex; flex-direction:row; gap:1rem; order:2; }  .col{ display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding-inline-end:1rem; font-size:12px; } @media (max-width:600px){ .col{ flex-direction:column; padding-inline-end:0; gap:0.5rem; } .col .secondr{ order:2; } } .upscroll{ width:60px; height:60px; position:fixed; opacity:0; bottom:-5px; left:-4px; visibility:hidden; z-index:999; transition:opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; } .upscroll.visible{ visibility:visible; opacity:1; } .upscroll svg #primary{ fill:var(--gold-light); } .upscroll svg .arrow-head{ transform:scale(0.5) translate(15%,80%); fill:var(--gold-dark); }  .services-section{ padding-block:1.5rem; margin-inline:auto; margin-block-start:2rem; background-color:var(--gold-light); border-radius:calc(12px + 1.5rem); } h2,.privacy h1,#services-heading,#reviews-header{ font-size:calc(var(--header-1) * .75); font-weight:700; text-align:center; margin-bottom:1.5rem; color:var(--text-dark); line-height:1.2; } .privacy h2{ margin-top:2.5rem; margin-bottom:0.5rem; font-size:1.5rem; text-align:start; } .privacy h1{ text-align:start; } .privacy .wrapper{ max-width:750px; padding-inline:1.5rem; } .privacy{ margin-block:3rem;  } .services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; align-items:stretch; }  .service-card{ position:relative; color:var(--text-dark); aspect-ratio:1 / 1; min-height:150px; overflow:visible; border:0px solid var(--gold-dark); border-radius:var(--radius-m); background:var(--secondary-white); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; gap:0.6rem; cursor:pointer; z-index:0; overflow:hidden; }  .service-card >*{ position:relative; z-index:2; }  .service-card .icon{ width:25%; min-width:50px; height:auto; display:grid; place-items:center; border-radius:50%; background:transparent; } .service-card .icon svg{ width:100%; height:100%; display:block; fill:var(--gold-dark); stroke:var(--gold-dark); transition:all 0.3s ease; } .service-card .label{ font-size:var(--body-1); font-weight:var(--fw-semibold); color:var(--text-dark); text-align:center; line-height:1.2; padding-inline:.4rem; transition:all 0.3s ease; }  .service-card::after{ content:""; position:absolute; bottom:-8px; inset-inline-end:-8px; width:20px; height:20px; background:var(--gold-dark); border-radius:6px; transform-origin:bottom left; transition:all 0.30s ease-in-out; z-index:1; pointer-events:none; } [dir="ltr"] .service-card::after{ transform-origin:bottom right; }  .service-card:hover, .service-card:focus-within{ color:var(--gold-light); } .service-card:hover::after, .service-card:focus-within::after{ width:180%; height:180%; border-radius:50%; bottom:-80px; inset-inline-end:-80px; }  .service-card:hover .icon svg, .service-card:focus-within .icon svg{ fill:var(--gold-light); stroke:var(--gold-light); } .service-card:hover .label, .service-card:focus-within .label{ color:var(--gold-light); }  .service-card::after{mix-blend-mode:normal;}  .service-card:focus{ outline:3px solid var(--gold-dark); outline-offset:3px; } @media (min-width:900px){ .services-grid{gap:1.25rem;} } @media (max-width:420px){ .service-card{min-height:100px;} } .proof{ padding-block:100px; } .proof .wrapper{ width:min(90%,1200px); margin-inline:auto; } .proof .section-title{ font-size:calc(var(--header-1) * .75); font-weight:700; text-align:center; margin-bottom:1.5rem; color:var(--text-dark); } .proof .proof-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; } @property --animated{ syntax:'<percentage>'; inherits:false; initial-value:0%; } .proof .proof-card{ --animated:0%; position:relative; border-radius:12px; padding:2rem; text-align:center; background: linear-gradient(var(--primary-white),var(--primary-white)) padding-box, linear-gradient(240deg,var(--gold-dark) 0%,var(--gold-dark) var(--animated),transparent calc(var(--animated) + 1%)) border-box; border:2px solid transparent; background-clip:padding-box,border-box; transition:transform 0.2s ease,box-shadow 0.2s ease,--animated 0.6s ease; } [dir="ltr"] .proof .proof-card{ background:linear-gradient(var(--primary-white),var(--primary-white)) padding-box, linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-dark) var(--animated),transparent calc(var(--animated) + 1%)) border-box; } .proof .proof-card:hover{ --animated:100%; } .proof .icon{ width:25%; min-width:50px; height:auto; margin-inline:auto; margin-bottom:1rem; fill:var(--primary-black); } .proof .icon svg{ width:100%; height:100%; } .proof .label{ font-size:var(--body-1); font-weight:var(--fw-semibold); color:var(--primary-black); } @media (max-width:600px){ .proof{ padding-block:70px; } .proof .proof-title{ font-size:1.6rem; } .proof .proof-card{ padding:1.5rem; } } @media (max-width:530px){ .hero img{ z-index:-1; } } .google-reviews{ margin-bottom:8rem; overflow:hidden; } .google-reviews .wrapper{ height:100%; max-width:calc(min(100%,1200px) - 3rem); min-width:80%; }  .secondr img{ min-height:0; height:14px; aspect-ratio:748 / 102 } .secondr span,.secondr small{ white-space:nowrap; } footer .secondr a small{ display:flex; flex-direction:row; align-items:center; gap:.3rem; text-decoration:none; color:rgb(0 0 0 / 0.5); pointer-events:pointer; } .location {color: inherit;}