:root { --color-primary: #7c7b74; --color-text: #fff; --color-link: #8a150a; --color-link-hover: #ef1905; --color-white: #fff; --color-red: #ff3f3f; --color-orange: orange; --color-blue: #4665f0; --color-green: #75ad58; --background-body: #111110; --background-header: #1c1c1c; --background-footer: var(--background-body); --background-feature: #31312e; --background-hide: rgb(71 71 71 / 64%); --border-header: 1px solid var(--color-primary); --border-primary: 2px solid var(--color-primary); --border-link: 2px solid var(--color-link); --box-shadow-small: 0px 1px 5px rgba(0, 0, 0, 0.7); --box-shadow-big: 0px 1px 10px rgba(0, 0, 0, 0.7); --tajawal: "Tajawal", sans-serif; --notonaskh: "Noto Naskh Arabic", serif; --messiri: "El Messiri", sans-serif; --notoKufi: "Noto Kufi Arabic", sans-serif; --ruqaa: "Aref Ruqaa", serif; --kufi: "Reem Kufi", sans-serif; --rubik: "Rubik", sans-serif; --poppins: "Poppins", sans-serif; --playwrite: "Playwrite ES Deco Guides", cursive; --font-primary: var(--rubik); --size-h1: 2.5rem; --size-h2: 2rem; --size-h3: 1.75rem; --size-h4: 1.5rem; --size-h5: 1.25rem; --size-h6: 1.1rem; --size-p: 1rem; --weight-h1: 700; --weight-h2: 600; --weight-h3: 600; --weight-h4: 600; --weight-h5: 600; --weight-h6: 600; --weight-p: 400; --radius-primary: 0.4rem; --radius-secondary: 0.2rem; --margin-header: 5rem; --gap-primary: 2rem; --gap-secondary: 1rem; --gap-tertiary: 0.3rem; --none-2000: none; --none-2000-1280: none; --none-1280-768: flex; --none-768: flex; --z-index--1: -1; --z-index--2: -2; --z-index--3: -3; --z-index-1: 1; --z-index-2: 2; --z-index-3: 3; --z-index-4: 4; --z-index-5: 5; --direction-1: ltr; --direction-2: rtl; --transition-1: all 0.3s ease-out; --transition-2: all 0.7s ease-out; --transition-3: all 1.4s ease-out; @media(max-width:1280px) { --size-h1: 2.2rem; --none-2000: flex; --none-2000-1280: none; --none-1280-768: none; --none-768: flex; } @media(max-width:768px) { --size-h1: 2.2rem; --size-h2: 1.9rem; --size-h3: 1.7rem; --size-h4: 1.5rem; --size-h5: 1.3rem; --size-h6: 1.1rem; --size-p: 0.95rem; --none-2000: flex; --none-2000-1280: flex; --none-1280-768: none; --none-768: none; } }@font-face { font-family: 'Tajawal'; src: url('/public/library/font.css') format('woff2'); font-display: swap; } html { scrollbar-color: var(--color-link) var(--background-header) !important; scroll-behavior: smooth; overflow-x: hidden; } * { direction: var(--direction-1); color: var(--color-text); outline: none; border: none; font-family: var(--font-primary); font-size: var(--size-p); font-weight: var(--weight-p); list-style: none; text-decoration: none; padding: 0; margin: 0; position: relative; transition: var(--transition-1); box-sizing: border-box; del { color: var(--color-red) !important; text-decoration: revert; } } ::after, ::before { transition: var(--transition-3); } ::placeholder { color: var(--color-primary); } * { line-height: 23px; } h1 { line-height: 40px; } body, header, footer, section, nav, article, aside, form, datalist, summary, div, button, h1, h2, h3, h4, h5, h6, p, a, i { display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-align: start; gap: var(--gap-tertiary); } form.form-small, div, aside { scrollbar-color: var(--color-link) transparent !important; scrollbar-width: thin !important; } body { background: var(--background-body); width: 100vw; flex-direction: column; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { color: var(--color-primary); *:not(i, a) { color: var(--color-primary); } } h1, .h1 { font-size: var(--size-h1); font-weight: var(--weight-h1); *:not(i) { font-size: var(--size-h1); font-weight: var(--weight-h1); } } h2, .h2 { font-size: var(--size-h2); font-weight: var(--weight-h2); *:not(i) { font-size: var(--size-h2); font-weight: var(--weight-h2); } } h3, .h3 { font-size: var(--size-h3); font-weight: var(--weight-h3); *:not(i) { font-size: var(--size-h3); font-weight: var(--weight-h3); } } h4, .h4 { font-size: var(--size-h4); font-weight: var(--weight-h4); *:not(i) { font-size: var(--size-h4); font-weight: var(--weight-h4); } } h5, .h5 { font-size: var(--size-h5); font-weight: var(--weight-h5); *:not(i) { font-size: var(--size-h5); font-weight: var(--weight-h5); } } h6, .h6 { font-size: var(--size-h6); font-weight: var(--weight-h6); *:not(i) { font-size: var(--size-h6); font-weight: var(--weight-h6); } } p { align-items: start; } a, .a { color: var(--color-link); border-color: var(--color-link) !important; cursor: pointer; * { color: var(--color-link); } } strong { color: var(--color-primary) !important; -webkit-text-stroke: unset !important; font-weight: bold; } section > h1 { width: 100%; height: max-content !important; align-items: start; } a, .a, p { gap: var(--gap-tertiary); } i { font-size: 1.5rem; } a.active, .a.active { color: var(--color-link-hover); border-color: var(--color-link-hover) !important; * { color: var(--color-link-hover); stroke: var(--color-link-hover); } } a:hover, .a:hover { @media (min-width: 768px) { color: var(--color-link-hover); border-color: var(--color-link-hover) !important; * { color: var(--color-link-hover); stroke: var(--color-link-hover); } } } i { display: flex !important; font-size: 2rem; justify-content: center; } iframe { width: 100%; height: -webkit-fill-available; } img { width: 100%; } iframe { box-shadow: var(--box-shadow-small); border-radius: var(--radius-primary); } div:has(> ul) { flex-direction: column; align-items: start; > p { color: var(--color-primary); font-size: var(--size-h6); font-weight: var(--weight-h6); * { color: var(--color-primary); font-size: var(--size-h6); font-weight: var(--weight-h6); } } li { list-style: disc; } } div:has(> ul) { gap: var(--gap-tertiary); p { margin-top: var(--gap-secondary); } p:first-child { margin-top: unset; } li { margin-left: 2rem; } }:root { --background-5: url('../../file/image/restaurant.png'); --background-6: url('../../file/image/ecommerce.png'); } .background-5, .background-6 { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; top: 0; right: 50%; transform: translateX(50%); } .background-5 { background-image: var(--background-5); } .background-6 { background-image: var(--background-6); }.name, .price { color: var(--color-primary); font-size: var(--size-h6); font-weight: var(--weight-h6); white-space: nowrap; * { color: var(--color-primary); } }.container, .title, .wrap, .content, .double, .scroll, .box-shadow, .buttons { width: -webkit-fill-available; height: -webkit-fill-available; } .container { flex-direction: column; justify-content: space-between; align-items: center; } .title { flex-direction: column; justify-content: space-between; align-items: start; } .wrap { flex-direction: row; justify-content: space-between; align-items: start; flex-wrap: wrap; } .content { flex-direction: column; justify-content: start; align-items: start; } .box-shadow { background: var(--background-body); box-shadow: var(--box-shadow-big); } .double { flex-direction: row; justify-content: space-between; align-items: center; } .buttons { height: max-content; flex-direction: row; justify-content: space-between; align-items: center; } .container, .title { padding-right: 18rem; padding-left: 18rem; gap: var(--gap-primary); @media (max-width: 1440px) { padding-right: 14rem; padding-left: 14rem; } @media (max-width: 1280px) { padding-right: 10rem; padding-left: 10rem; } @media (max-width: 1280px) { padding-right: 8rem; padding-left: 8rem; } @media (max-width: 1024px) { padding-right: 5rem; padding-left: 5rem; } @media (max-width: 768px) { padding-right: 1rem; padding-left: 1rem; } } .wrap { gap: var(--gap-primary); } .content { gap: var(--gap-tertiary); } .double { gap: var(--gap-primary); } .box-shadow { border-radius: var(--radius-primary); padding: 2rem; @media (max-width: 768px) { padding: 1rem; } } .buttons { gap: var(--gap-secondary); } .icons { gap: var(--gap-secondary); }.container, .title, .wrap, .content, .double, .scroll, .box-shadow, .buttons { width: -webkit-fill-available; height: -webkit-fill-available; } .container { flex-direction: column; justify-content: space-between; align-items: center; } .title { flex-direction: column; justify-content: space-between; align-items: start; } .wrap { flex-direction: row; justify-content: space-between; align-items: start; flex-wrap: wrap; } .content { flex-direction: column; justify-content: start; align-items: start; } .box-shadow { background: var(--background-body); box-shadow: var(--box-shadow-big); } .double { flex-direction: row; justify-content: space-between; align-items: center; } .buttons { height: max-content; flex-direction: row; justify-content: space-between; align-items: center; } .container, .title { padding-right: 18rem; padding-left: 18rem; gap: var(--gap-primary); @media (max-width: 1440px) { padding-right: 14rem; padding-left: 14rem; } @media (max-width: 1280px) { padding-right: 10rem; padding-left: 10rem; } @media (max-width: 1280px) { padding-right: 8rem; padding-left: 8rem; } @media (max-width: 1024px) { padding-right: 5rem; padding-left: 5rem; } @media (max-width: 768px) { padding-right: 1rem; padding-left: 1rem; } } .wrap { gap: var(--gap-primary); } .content { gap: var(--gap-tertiary); } .double { gap: var(--gap-primary); } .box-shadow { border-radius: var(--radius-primary); padding: 2rem; @media (max-width: 768px) { padding: 1rem; } } .buttons { gap: var(--gap-secondary); } .icons { gap: var(--gap-secondary); } .section-loader { background: var(--background-body); width: 100%; height: 100vh; margin: unset; padding: unset; position: fixed; top: 0; left: 0; z-index: 9999; overflow-y: hidden; .loader { display: flex; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; } } .section-loader-circle { .loader { border: 8px solid var(--color-link-hover); border-top: 8px solid var(--color-link); border-radius: 50%; width: 60px; height: 60px; animation: circle 1s linear infinite; } } @keyframes circle { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .section-loader.active { opacity: 0; visibility: none; z-index: var(--z-index--1); }header { background: var(--background-header); width: 100%; z-index: var(--z-index-3); .container { flex-direction: row; } } header { .container { padding-top: 1rem; padding-bottom: 1rem; } } header { position: fixed; top: 0; right: 0; } .header-float { border: var(--border-primary); justify-content: space-evenly; align-items: center; top: unset !important; right: 50%; bottom: 1rem; transform: translateX(50%); a { justify-content: center; } } .header-float { border-radius: 50px; width: 26rem; padding: 0.9rem 0; @media (max-width: 768px) { width: 90%; } } .header-float { a { border-radius: 50%; width: 2.7rem; height: 2.7rem; } @media (min-width: 768px) { a:hover { background: var(--color-white) !important; } } a.active { background: var(--color-white) !important; } }footer { background: var(--background-footer); border-top: var(--border-header); width: 100%; flex-direction: column; .container { flex-direction: row; } .container:has(.copyright) { flex-direction: column; align-items: center; gap: 0; .copyright { direction: rtl; * { direction: rtl; } } } .content { width: max-content; } @media (max-width: 768px) { .container { flex-direction: column; } .content { width: 100% !important; } } } footer { .container { padding-top: 3rem; padding-bottom: 3rem; } .container:has(.copyright) { width: max-content; padding-top: 1rem; padding-bottom: 1rem; gap: unset; } .content:first-child { width: 30%; gap: var(--gap-secondary); } .copyright { i { font-size: 1.7rem; } } }section { width: 100%; flex-direction: column; overflow: hidden; } section { padding: 4rem 0; gap: var(--gap-primary); } body { section:nth-child(odd) { background: var(--background-header) !important; } section:nth-child(even) { background: var(--background-body) !important; } }button, .button { color: var(--color-white); background: var(--color-link); font-size: var(--size-h6); font-weight: var(--weight-h6); text-transform: capitalize; white-space: nowrap; justify-content: center; cursor: pointer; * { color: var(--color-white); } } .button-primary-1, .button-primary-2 { color: var(--color-link); background: transparent; border: var(--border-primary); border-color: var(--color-link); * { color: var(--color-link); } } .button-icon { color: var(--color-link) !important; background: unset !important; padding: unset !important; * { color: var(--color-link) !important; } } button, .button { border-radius: var(--radius-primary); padding: 0.5rem 1.2rem; gap: calc(var(--gap-tertiary) * 2); i { font-size: 1.6rem; } @media (max-width: 768px) { padding: 0.5rem 1.15rem; } } button:not(#up, .button-icon).active, .button:not(#up, .button-icon).active { box-shadow: 0px 1px 9px var(--color-link-hover); color: var(--color-white); background: var(--color-link-hover); * { color: var(--color-white); } } :is( button, .button ):hover { color: var(--color-white); background: var(--color-link-hover); box-shadow: unset !important; * { color: var(--color-white); } } :is( .button-primary-1 ):hover, :is( .button-primary-1 ).active { border-color: var(--color-link-hover); } .button-icon.active { color: var(--color-link-hover) !important; * { color: var(--color-link-hover) !important; } } body.but-box { button:not(#up).active { box-shadow: var(--box-shadow-big); background: var(--color-link-hover); } button:not(#up).active:hover { box-shadow: unset; } }.section-background-text { height: 100vh; margin: 0; padding: 0; .content { height: max-content; } } .section-background-text { .content { gap: var(--gap-secondary); margin-top: 30vh; h1 { font-size: 3rem; font-weight: 500; margin-bottom: var(--gap-secondary); } } .buttons { justify-content: start; } @media (max-width: 768px) { .content { margin-top: 15vh; h1 { font-size: 2rem; text-align-last: center; text-wrap-style: balance; width: 17ch; margin-bottom: unset; } .h3 { font-size: 1.2rem; font-weight: 500; } } } }.section-contact { @media (min-width: 768px) { .container { flex-direction: row; } } .double:has(iframe) { height: -webkit-fill-available; } .double { height: max-content; justify-content: start; .content { width: max-content; } i { color: var(--color-primary); background: var(--background-feature); justify-content: center; } } } .section-contact { .container { height: 30rem; } .content { gap: var(--gap-secondary); } .double:has(iframe) { margin-top: var(--gap-secondary); } .double { gap: var(--gap-secondary); .content { gap: unset; } i { border-radius: var(--radius-primary); width: 3rem; height: 3rem; } } @media (max-width: 768px) { .container { height: 53rem; } } }form { flex-direction: column; align-items: center; .content:not(:has(textarea)) { height: max-content; } input, textarea, select, button { color: var(--color-primary); background: var(--background-feature); outline: solid transparent; font-size: var(--size-p); font-weight: var(--weight-p); width: 100%; height: 100%; } label { color: var(--color-primary); font-size: var(--size-h6); font-weight: var(--weight-h6); } button { color: var(--color-white); background: var(--color-link); outline: unset !important; } textarea { height: -webkit-fill-available !important; } input[type="checkbox"] { width: max-content; outline: unset !important; } .head { color: var(--background-feature) !important; font-size: var(--size-h5); font-weight: var(--weight-h5); position: absolute; top: 0; } @media (max-width: 768px) { width: 100% !important; } } form { input, textarea, select, button { outline-width: 0.2rem; border-radius: var(--radius-primary); padding: 0.7rem 1rem; } .head { padding: 1.5rem 0 0; } img { width: 5rem; } } :is( input, textarea, select ):focus { outline-color: var(--color-primary); } .form-big { width: -webkit-fill-available; height: -webkit-fill-available; } .form-big { gap: var(--gap-secondary); }.card { background: var(--background-feature); flex-direction: column; > i { width: -webkit-fill-available; justify-content: center; } > .double { direction: var(--direction-2); } i { color: var(--color-primary); } @media (max-width: 768px) { flex: 1 100% !important; } } .card { border-radius: var(--radius-primary); padding: 1.5rem 1.2rem; gap: var(--gap-secondary); flex: 1 1 calc(33% - var(--gap-primary)); .name { font-size: var(--size-h4); font-weight: var(--weight-h4); } i { font-size: 3.5rem; } }.package { width: 25rem; height: 15rem; align-items: end; .double { height: max-content; justify-content: space-evenly; } } .package { border-radius: var(--radius-primary); width: 22rem; height: 12.375rem; div:first-child { border-radius: var(--radius-primary); } .double { background: rgba(0, 0, 0, 0.4); border-radius: var(--radius-primary); padding: 1.3rem 0; } @media (max-width: 768px) { width: 100%; } }.drop { height: 100%; .drop { border: var(--border-header); border-top: unset; .content { top: 0%; left: 100%; } } button { border-radius: unset; height: 100%; } .content { width: 100%; height: auto; gap: unset; position: absolute; top: 100%; scale: 0; opacity: 0; a { border: var(--border-header); border-top: unset; width: 100%; } a:first-child { border-top: var(--border-header); } } } .drop { button { i { font-size: 1rem; } } .content { backdrop-filter: blur(45px); a { padding: 0.5rem 1rem; } } } .drop:hover { > .content { scale: 1; opacity: 1; } > button { background: var(--color-link-hover); i { rotate: 180deg; } } @media (min-width: 768px) { a:hover { color: var(--color-white); background: var(--color-link-hover); padding-right: 25%; } } a.active { color: var(--color-white); background: var(--color-link-hover); } } .drop.fixed { position: fixed; height: auto; .content { background: unset; backdrop-filter: unset; } } .drop.fixed { bottom: 1rem; right: 1rem; .content { padding-bottom: var(--gap-secondary); gap: var(--gap-secondary); top: unset; bottom: 100%; } button { border-radius: 50%; width: 3rem; height: 3rem; i { font-size: 2rem; } } @media (max-width: 768px) { position: absolute; top: 1rem; bottom: unset; .content { padding-top: var(--gap-secondary); top: 100%; bottom: unset; } } } .drop.fixed { @media (max-width: 768px) { button:hover { background: var(--color-link); } } }#tabButton { justify-content: space-between; li { color: var(--color-link); font-size: var(--size-h6); font-weight: var(--weight-h6); cursor: pointer; } } #tabView { justify-content: space-between; align-items: start; flex-wrap: wrap; .item { width: 100%; height: 100%; justify-content: space-between; align-items: start; flex-wrap: wrap; } } #tabView { .item { gap: var(--gap-primary); } } #tabView { .item { position: absolute; } .item.active { position: relative; } } #tabButton { width: 100%; gap: unset; li { border-bottom: var(--border-link); flex: 1; } } #tabView { width: 100%; } #tabButton { li:hover, li.active { color: var(--color-link-hover); border-color: var(--color-link-hover); } }body { footer, .container, .content:has(p, h6, input), .box-shadow, .card, .name, p { opacity: 0 !important; transition: var(--transition-3); } .container, .content:has(p, h6, input), .box-shadow, .card, .name, p { transform: translateY(80px) !important; } .section-contact { .box-shadow:first-child { transform: translateX(-50%) !important; } .box-shadow:last-child { transform: translateX(50%) !important; } } } body { footer.active, .container.active, .content.active, .box-shadow.active, .card.active, .name.active, p.active { opacity: 1 !important; transform: translateY(0) !important; } .box-shadow:first-child.active, .box-shadow:last-child.active { transform: translateX(0) !important; } } .package .double, #tabView .item { scale: 0; opacity: 0; transition: var(--transition-2); } .package:hover .double, #tabView .item.active { scale: 1; opacity: 1; } .card:hover { scale: 1.03 !important; } .card, #formWhatsapp { z-index: var(--z-index-1) !important; overflow: hidden; } .card::before, #formWhatsapp::before { content: ""; background: var(--color-primary); width: 20%; height: 300%; position: absolute; top: -100%; z-index: var(--z-index--1); animation: borderMove 6s linear infinite; } .card::after, #formWhatsapp::after { content: ""; background: var(--background-footer); position: absolute; z-index: var(--z-index--1); inset: 0.2rem; } @keyframes borderMove { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card:hover::before , #formWhatsapp:hover::before { animation-play-state: paused; } .line-after::after, h1::after, h2::after { content: ""; background: var(--color-link-hover); height: 2px; width: 0; position: absolute; left: 0; bottom: -0.16rem; } .progress { content: ""; background: var(--background-feature); height: 3px; width: 100%; } .progress::after { content: ""; background: var(--color-primary); height: 3px; width: 0; } .line-after.active::after, h1::after, h2::after { width: 50%; } @media (min-width: 768px) { .line-after:hover::after, h2::after { width: 50%; } } .progress-1.active::after { width: 100%; } .progress-2.active::after { width: 95%; } .progress-3.active::after { width: 75%; } .progress-4.active::after { width: 80%; } .progress-5.active::after { width: 80%; } .progress-6.active::after { width: 60%; } .card { background: var(--background-body) !important; } form button { background: linear-gradient(45deg, var(--color-primary), transparent, var(--color-link-hover)) !important; } form button, .card { background-size: 200% auto !important; transition: var(--transition-2) !important; } form button:hover, .card:hover { background-position: right center !important; } .button-primary-1:hover { color: var(--color-white) !important; background: var(--color-link-hover) !important; border-color: var(--color-link-hover) !important; text-shadow: 0 0 5px var(--color-white), 0 0 10px var(--color-white), 0 0 20px var(--color-white) !important; box-shadow: 0 0 5px var(--color-link-hover), 0 0 10px var(--color-link-hover), 0 0 40px var(--color-link-hover), 0 0 100px var(--color-link-hover) !important; } h1, h2, .card .name { color: transparent !important; -webkit-text-stroke: 1px var(--color-link-hover) !important; font-weight: bold !important; }