.section-panel
{
    .card:nth-child(1) { background-color: #1976d2 !important;}
    .card:nth-child(2) { background-color: #d81b60 !important;}
    .card:nth-child(3) { background-color: #388e3c !important;}
    .card:nth-child(4) { background-color: #f9a825 !important;}
    .card:nth-child(5) { background-color: #00838f !important;}
    .card:nth-child(6) { background-color: #6a1b9a !important;}
    .card *
    {
        color: #fff;
    }
}
.SlideDown { animation: SlideDown 1s ease-out; } .SlideDownInfinite { animation: SlideDown 1s linear infinite; } @keyframes SlideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } .SlideUp { animation: SlideUp 1s ease-out; } .SlideUpInfinite { animation: SlideUp 1s linear infinite; } @keyframes SlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .SlideLeft { animation: SlideLeft 1s ease-out; } .SlideLeftIninfinite { animation: SlideLeftIn 1s linear infinite; } @keyframes SlideLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .SlideRight { animation: SlideRight 1s ease-out; } .SlideRightInfinite { animation: SlideRight 1s linear infinite; } @keyframes SlideRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .Pulse { animation: Pulse 2s ease-out; } .PulseInfinite { animation: Pulse 2s linear infinite; } @keyframes Pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .Rubber { animation: Rubber 2s ease-out; } .RubberInfinite { animation: Rubber 2s linear infinite; } @keyframes Rubber { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } .Rotate { animation: Rotate 2s ease-out; } .RotateInfinite { animation: Rotate 2s linear infinite; } @keyframes Rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .Flip { animation: Flip 1s ease-out; } .FlipInfinite { animation: Flip 2s linear infinite; } @keyframes Flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .Bounce { animation: Bounce 1s ease-out; } .BounceInfinite { animation: Bounce 2s linear infinite; } @keyframes Bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .Shake { animation: Shake 0.5s ease-out; } .ShakeInfinite { animation: Shake 0.5s linear infinite; } @keyframes Shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .BounceIn { animation: BounceIn 0.8s ease-out; } .BounceInInfinite { animation: BounceIn 0.8s infinite; } @keyframes BounceIn { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } .ZoomIn { animation: ZoomIn 1s ease-out; } .ZoomInInfinite { animation: ZoomIn 1s linear infinite; } @keyframes ZoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .Opacity { animation: Opacity 0.6s ease-out; } .OpacityInfinite { animation: Opacity 0.6s linear infinite; } @keyframes Opacity { from { opacity: 0; } to { opacity: 1; } } .Flash { animation: f 2s linear ease-out; } .FlashInfinite { animation: f 2s linear infinite; } @keyframes Flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }:root { --color-primary: rgb(75 51 51); --color-text: #7b7b7b; --color-link: #ff8716; --color-link-hover: #e51a1a; --color-white: #fff; --color-blue: #4665f0; --color-red: #ff3f3f; --color-green: #75ad58; --color-orange: orange; --color-gold: rgb(243, 195, 0); --background-body: #fff; --background-header: #fff; --background-footer: #222; --background-feature: #e9e9e9; --background-hide: rgb(71 71 71 / 64%); --border-header: 1px solid rgba(0, 0, 0, 0.1); --border-primary: 1px solid #dddddd9c; --border-link: 1px solid var(--color-link); --box-shadow-small: 0px 1px 5px rgba(0, 0, 0, 0.1); --box-shadow-big: 0px 1px 10px rgba(0, 0, 0, 0.1); --box-shadow-big-hover: 0px 1px 10px var(--color-link-hover); --kufi: "Reem Kufi", sans-serif; --ruqaa: "Aref Ruqaa", serif; --tajawal: "Tajawal", sans-serif; --notonaskh: "Noto Naskh Arabic", serif; --notoKufi: "Noto Kufi Arabic", sans-serif; --playpen: "Playpen Sans Arabic", cursive; --marhey: "Marhey", sans-serif; --rubik: "Rubik", sans-serif; --pacifico : "Pacifico", cursive; --montecarlo: "MonteCarlo", cursive; --font-primary: var(--tajawal); --size-h1: 2rem; --size-h2: 1.55rem; --size-h3: 1.45rem; --size-h4: 1.3rem; --size-h5: 1.2rem; --size-h6: 1.06rem; --size-p: 0.95rem; --weight-h1: 600; --weight-h2: 600; --weight-h3: 500; --weight-h4: 500; --weight-h5: 500; --weight-h6: 500; --weight-p: 500; --radius-primary: 0.4rem; --radius-secondary: 0.2rem; --margin-header: 13rem; --gap-primary: 2rem; --gap-secondary: 1rem; --gap-tertiary: 0.6rem; --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: rtl; --direction-2: ltr; --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: 1.7rem; --size-h2: 1.55rem; --size-h3: 1.45rem; --size-h4: 1.25rem; --size-h5: 1.2rem; --none-2000: flex; --none-2000-1280: none; --none-1280-768: none; --none-768: flex; } @media(max-width:768px) { --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) transparent !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-1); } ::placeholder { opacity: 0.8; } div:has(> section) { width: 100%; } * { line-height: 23px; } h1, h2, h3, h4, h5:not(.copyright), h6:not(.copyright) { line-height: 40px; } body, header, footer, section, nav, article, aside, form, label, 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; li { overflow-y: unset; } } body { background: var(--background-body); width: 100vw; flex-direction: column; gap: unset; 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; } div:has(> strong) { align-items: start; } section > h1 { width: 100%; height: max-content !important; align-items: start; } a, .a, p { gap: var(--gap-tertiary); } i { font-size: 1.5rem; } a:not(.logo, .button).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:not(.logo, .button):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; } iframe { width: 100%; height: -webkit-fill-available; } img { width: 100%; } i { font-size: 1.7rem; } iframe { box-shadow: var(--box-shadow-small); border-radius: var(--radius-primary); } details { summary { color: var(--color-link); width: -webkit-fill-available; height: -webkit-fill-available; font-size: var(--size-h6); font-weight: var(--weight-h6); justify-content: start; cursor: pointer; white-space: nowrap; * { color: var(--color-link); } } } details { summary { gap: var(--gap-tertiary); i { font-size: 0.9rem; } } } summary:hover { @media (min-width: 768px) { color: var(--color-link-hover); i { color: var(--color-link-hover); rotate: 180deg; } } } details[open] { summary { color: var(--color-link-hover); i { color: var(--color-link-hover); rotate: 180deg; } } } aside { background: var(--background-header); flex-direction: column; justify-content: start; align-items: start; overflow-y: auto; a, li { font-size: var(--size-h6); font-weight: var(--weight-h6); text-transform: capitalize; width: 100%; height: max-content; justify-content: start; } } article { background: var(--background-body); width: -webkit-fill-available; flex-direction: column; header { position: relative !important; } } aside { padding: 1rem; gap: var(--gap-tertiary); a:not(.logo), li { border-radius: var(--radius-primary); border-right: 3px solid transparent !important; padding: 1rem; } } article { gap: var(--gap-primary); header, section { box-shadow: var(--box-shadow-big); } } aside { @media (min-width: 768px) { a:not(.logo):hover, li:hover { color: var(--color-white) !important; background: var(--color-link-hover); border-right-color: var(--color-white) !important; * { color: var(--color-white) !important; } } } a:not(.logo).active, li.active { color: var(--color-white) !important; background: var(--color-link-hover); border-right-color: var(--color-white) !important; * { color: var(--color-white) !important; } } } div:has(> ul), table 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; } } table ul { li { list-style: auto; } } div:has(> ul), table ul { gap: var(--gap-tertiary); p { margin-top: var(--gap-secondary); } p:first-child { margin-top: unset; } li { margin-right: 2rem; } }:root { --background-0: url('../../file/image/background-0.jpg'); --background-1: url('../../file/image/background-1.jpg'); --background-2: url('../../file/image/background-2.jpg'); --background-3: url('../../file/image/background-3.jpg'); @media (max-width: 768px) { } }.background { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; width: 100%; height: auto; position: absolute; top: 0; @media (max-width: 768px) { width: 100%; height: auto; } } .avatar { border: var(--border-header); border-radius: 50%; } .avatar { width: 3rem; } .logo { color: var(--color-link-hover); * { color: var(--color-link-hover); } } .title-small { color: var(--color-primary); font-size: var(--size-h4); font-weight: bold; } .name { color: var(--color-primary); font-size: var(--size-h6); font-weight: var(--weight-h6); white-space: nowrap; * { color: var(--color-primary); font-size: var(--size-h6); } } .alert { color: var(--color-white); background: var(--color-red); font-size: var(--size-h6); font-weight: var(--weight-h6); width: 100%; justify-content: start; * { color: var(--color-white); } } .notification { color: var(--color-white); background: var(--color-link); border-radius: 50%; justify-content: center; align-items: center; position: absolute; } .light { color: var(--color-link-hover) !important; } .logo { font-size: 1.45rem; font-weight: 600; i { font-size: 2rem; } img { width: 8rem; } } .alert { border-radius: var(--radius-primary); padding: 0.7rem 1rem; gap: var(--gap-tertiary); } .notification { width: 1.5rem; height: 1.5rem; top: -0.8rem; left: -0.8rem; } @media (min-width: 768px) { a:hover { .notification { color: var(--color-white); background: var(--color-link-hover); } } } a.active { .notification { color: var(--color-white); background: var(--color-link-hover); } } .price { color: var(--color-primary); font-size: var(--size-h6); font-weight: var(--weight-h6); white-space: nowrap; * { color: var(--color-primary); font-size: var(--size-h6); } } .number { font-family: "Poppins", sans-serif; font-weight: 700; } .discount { color: var(--color-white) !important; background: var(--color-red); position: absolute; z-index: var(--z-index-1); } .price { gap: var(--gap-tertiary); } .discount { border-radius: var(--radius-primary); padding: 0.2rem 0.6rem; } hr { background: linear-gradient(90deg, var(--color-link-hover), var(--color-white), var(--color-link)); } hr { border-radius: 2px; width: 100%; height: 3px; } 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; } } .alert-red { background: var(--color-red); } .alert-green { background: var(--color-green); } .alert-blue { background: var(--color-blue); } .alert-notification { max-width: max-content; position: fixed; z-index: var(--z-index-5); }.container, .title, .wrap, .content, .double, .scroll, .box-shadow, .buttons { width: -webkit-fill-available; height: -webkit-fill-available; } .title { flex-direction: column; justify-content: space-between; align-items: start; } .container { flex-direction: column; justify-content: space-between; align-items: center; } .wrap { display: grid; justify-content: space-between; align-items: unset; } .content { flex-direction: column; justify-content: start; align-items: start; } .double { flex-direction: row; justify-content: space-between; align-items: center; } .box-shadow { background: var(--background-body); box-shadow: var(--box-shadow-big); } .scroll { flex-direction: row; justify-content: start; align-items: start; overflow-x: auto; } .buttons { height: max-content; flex-direction: row; justify-content: space-between; align-items: center; } .icons { a { padding: unset; align-items: center; justify-content: center; } } .stars { gap: var(--gap-tertiary); i { font-size: var(--size-h5) !important; font-weight: bold; } input { display: none; } label { cursor: pointer; } } .stars { label:hover i, label:hover ~ label i, input:checked ~ label i { color: var(--color-gold); } } .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; } } .title { gap: var(--gap-tertiary); align-items: start; } .wrap { grid-template-columns: repeat(auto-fit, minmax(calc(19rem - var(--gap-primary)), 19rem)); gap: var(--gap-primary); @media (max-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } } .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); a { width: 2rem; height: 2rem; } } .stars { label:hover i, label:hover ~ label i, input:checked ~ label i { color: var(--color-gold); } } .icons-circle { a { border: var(--border-link); border-radius: 50%; width: 3rem; height: 3rem; } } .icons-circle { a { border-radius: 50%; width: 2.5rem; height: 2.5rem; } }.none-2000 { display: var(--none-2000) !important; } .none-2000-1280 { display: var(--none-2000-1280) !important; } .none-1280-768 { display: var(--none-1280-768) !important; } .none-768 { display: var(--none-768) !important; } .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .bbody { 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; } } } .bbody { 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; } } .alert-notification { transform: translateY(80px); opacity: 1; } .alert-notification.active { transform: translateY(0px); opacity: 0; z-index: var(--z-index--1); } .section-hide.active form { rotate: 720deg; transition: var(--transition-2); } .section-hide, .package .double, #tabView .item { scale: 0; opacity: 0; transition: var(--transition-2); } .section-hide.active, .package:hover .double, #tabView .item.active { scale: 1; opacity: 1; } .product:hover { .image { img { transform: scale(1.19); } } } .curve { content: ""; color: var(--color-white) !important; background: var(--color-primary); * { color: var(--color-white) !important; } } .curve::before { content: ""; background: transparent; width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: var(--z-index-1); } .curve { padding: 0.2rem 0.4rem 0.2rem 1rem; i { font-size: 1.6rem; } } .curve::before { border-left: 12px solid transparent; border-bottom: 12px solid rgb(136, 95, 95); } .card:not(.section-panel .card, .card-comment), #formWhatsapp { z-index: var(--z-index-1) !important; overflow: hidden; } .card:not(.section-panel .card, .card-comment)::before, #formWhatsapp::before { content: ""; background: var(--color-primary); width: 20%; height: 300%; position: absolute; top: -100%; right: 50%; z-index: var(--z-index--1); animation: border 6s linear infinite; } .card:not(.section-panel .card, .card-comment)::after, #formWhatsapp::after { content: ""; background: var(--background-body); position: absolute; z-index: var(--z-index--1); inset: 0.2rem; } @keyframes border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card:not(.section-panel .card, .card-comment):hover::before , #formWhatsapp:hover::before { animation-play-state: paused; } .progress { content: ""; background: var(--background-footer); height: 3px; width: 100%; } .progress::after { content: ""; background: var(--color-primary); height: 3px; width: 0; } @media (min-width: 768px) { } .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%; } .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; }.section-loader { background: var(--background-header); 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 transparent; 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); } .section-loader-point { .loader { gap: 0.5rem; } span { background: var(--color-primary); border-radius: 50%; width: 12px; height: 12px; animation: point 0.6s infinite alternate; } span:nth-child(2) { background: var(--color-link); animation-delay: 0.2s; } span:nth-child(3) { background: var(--color-link-hover); animation-delay: 0.4s; } } @keyframes point { 0% { transform: translateY(0); opacity: 0.5; } 100% { transform: translateY(-10px); opacity: 1; } } .section-loader-wave { .loader { align-items: flex-end; gap: 6px; } span { background: linear-gradient(180deg, var(--color-link) 0%, var(--color-link-hover) 100%); border-radius: 4px; width: 8px; height: 20px; animation: wave 1s ease-in-out infinite; } span:nth-child(2) { animation-delay: 0.1s; } span:nth-child(3) { animation-delay: 0.2s; } span:nth-child(4) { animation-delay: 0.3s; } span:nth-child(5) { animation-delay: 0.4s; } } @keyframes wave { 0%, 100% { height: 20px; } 50% { height: 50px; } } .section-loader-pointt { .loader { gap: 12px; } span { box-shadow: 0 0 10px var(--color-link-hover), inset 0 0 5px var(--color-link-hover); border: 3px solid var(--color-link); border-radius: 50%; width: 18px; height: 18px; animation: pointt 1.2s ease-in-out infinite; } span:nth-child(1) { animation-delay: 0s; } span:nth-child(2) { animation-delay: 0.1s; } span:nth-child(3) { animation-delay: 0.2s; } span:nth-child(4) { animation-delay: 0.3s; } span:nth-child(5) { animation-delay: 0.4s; } } @keyframes pointt { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.3) translateY(-15px); border-color: var(--color-link-hover); box-shadow: 0 0 20px var(--color-link-hover), inset 0 0 8px var(--color-link); } }header { background: var(--background-header); width: 100%; flex-direction: column; z-index: var(--z-index-3); .container { flex-direction: row; } nav { width: -webkit-fill-available; height: -webkit-fill-available; justify-content: space-between; } a, .a, summary { font-size: var(--size-h6); font-weight: var(--weight-h6); white-space: nowrap; } .buttons { width: max-content; } .drop { height: 100%; button { border-radius: unset; } } @media (min-width: 768px) { details { aside { position: absolute; right: 0; } } #navOpen, #navClose { display: none; } } @media (max-width: 768px) { nav { background: var(--background-header); flex-direction: column; justify-content: start; align-items: start; position: fixed; top: 0; right: 0; } } } header { border-bottom: var(--border-header); .container { padding-top: 1rem; padding-bottom: 1rem; } details { aside { border-radius: var(--radius-primary); padding: 0.5rem 1rem; } } .button-icon { i { font-size: 2rem; } } @media (min-width: 768px) { details { a,.a { padding: 0.8rem; padding-left: 2rem; } } } @media (max-width: 768px) { nav { a, .a, summary { padding: 1rem 0.5rem; } } } } header { position: fixed; top: 0; right: 0; } header:has(.buttons) { @media (min-width: 768px) { nav { justify-content: space-evenly; } } } .header-float { border: var(--border-primary); justify-content: space-evenly; align-items: center; top: unset !important; right: 50%; bottom: 1rem; transform: translateX(50%); a, .a { justify-content: center; } } .header-float { border-radius: 50px; width: 26rem; padding: 0.9rem 0; @media (max-width: 768px) { width: 90%; } } .header-float { a, .a { border-radius: 50%; width: 2.7rem; height: 2.7rem; } @media (min-width: 768px) { a:hover, .a:hover { background: var(--color-white) !important; } } a.active, .a.active { background: var(--color-white) !important; } } .header-double { border-bottom: unset; box-shadow: var(--box-shadow-big); @media (min-width: 768px) { nav { justify-content: space-around; } } .container:last-child { border-top: var(--border-header); padding-top: unset; padding-bottom: unset; } } .header-double { .container:last-child { height: 3rem; } } header { @media (max-width: 768px) { .nav-right { border-left: var(--border-header); box-shadow: var(--box-shadow-small); width: 60%; height: 100vh; padding: 5rem 1rem 2rem; transform: translateX(100%); #navClose { position: absolute; top: 1.1rem; left: 2rem; } } .nav-right.active { transform: translateX(0%); } } } header { @media (max-width: 768px) { .nav-up { width: 100%; height: auto; padding: 4rem 0 0; transform: translateY(-100%); position: absolute; opacity: 0; a, .a { width: 100%; justify-content: center; } #navClose { position: absolute; top: 1.1rem; right: 2rem; } } .nav-up.active { opacity: 1; transform: translateY(0%); } } }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; } } .name, h6, h5, p, p i { color: var(--color-white); } } footer { .container { padding-top: 3rem; padding-bottom: 3rem; } .container:has(.copyright) { border-top: var(--border-header); 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: 3rem 0; gap: var(--gap-primary); } section:nth-child(3):not(.section-background-text, .section-panel section, .section-hide) { padding-top: var(--margin-header); } section:nth-child(odd):not(.section-panel, .section-panel section, .section-hide) { background: var(--background-body); } section:nth-child(even):not(.section-panel, .section-panel section, .section-hide) { background: var(--background-header); }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; cursor: pointer; * { 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-primary-2 { border-radius: 50px; } 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, .button-primary-2 ):hover, :is( .button-primary-1, .button-primary-2 ).active { color: var(--color-white); border-color: var(--color-link-hover) !important; } .button-icon.active { color: var(--color-link-hover) !important; * { color: var(--color-link-hover) !important; } } @media (min-width: 768px) { .button-icon:hover { color: var(--color-link-hover) !important; * { color: var(--color-link-hover) !important; } } } .button-delete, .button-edit { background: unset !important; padding: 0 !important; } .button-delete { * { color: var(--color-red); } } .button-edit { * { color: var(--color-blue); } } .button-delete, .button-edit { i { font-size: 1.8rem; } } .button-delete:hover, .button-edit:hover { background: unset !important; * { color: var(--color-link-hover) !important; } } #up { background: var(--color-link); padding: unset; position: fixed; z-index: var(--z-index-4); } #up { width: 2.3rem; height: 2.3rem; right: 1rem; bottom: 1rem; i { font-size: 1.1rem; } } #up:hover { transition: background var(--transition-1) !important; background: var(--color-link-hover); } 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; } }.drop { .drop { border: var(--border-header); border-top: unset; aside, .content { top: 0%; left: 100%; } } aside, .content { width: 100%; height: auto; gap: unset; position: absolute; top: 100%; scale: 0; opacity: 0; } .content { a { border: var(--border-header); border-top: unset; width: 100%; } a:first-child { border-top: var(--border-header); } } .a { border-radius: unset; height: 100%; } button { height: 100%; } } .drop { height: auto; aside, .content { background: var(--background-header); } .a, button { i { font-size: 1rem; } } a { padding: 0.5rem 1rem; } } .drop:hover { > aside, > .content { scale: 1; opacity: 1; z-index: var(--z-index-1); } > button { background: var(--color-link-hover); i { rotate: 180deg; } } > .a { color: var(--color-link-hover); i { rotate: 180deg; color: var(--color-link-hover); } } @media (min-width: 768px) { aside, .content { a:hover { color: var(--color-white); background: var(--color-link-hover); } } .content { a:hover { padding-right: 25%; } } } aside, .content { a.active { color: var(--color-white); background: var(--color-link-hover); } } .content { a.active { padding-right: 25%; } } } .drop.fixed { position: fixed; height: auto; } .drop.fixed { bottom: 1rem; right: 1rem; .content { padding-bottom: var(--gap-secondary); gap: var(--gap-secondary); top: unset; bottom: 100%; } .a { 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) { } }.section-about { .container { flex-direction: column; } .content { box-shadow: var(--box-shadow-big); .name { white-space: wrap; } } } .section-about { .content { border-radius: var(--radius-primary); padding: 2rem 3rem; .name { font-size: var(--size-h4); font-weight: var(--weight-h4); margin-bottom: var(--gap-tertiary); } } }.section-background-text { height: 100vh; margin: 0; padding: 0; .content:not(form .content) { height: max-content; h1 { font-weight: 800; * { font-weight: 800; } } } * { color: var(--color-white); } form { background: var(--background-feature); height: max-content; width: max-content; position: absolute; bottom: 0; input, select { border: var(--border-primary); } } .button-primary-1, .button-primary-2 { backdrop-filter: blur(5px); } @media (max-width: 768px) { form { position: relative; > .double { width: 100%; flex-direction: column; } } } } .section-background-text { background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-image: var(--background-1) !important; .content:not(form .content) { margin-top: 30vh; align-items: center; gap: var(--gap-secondary); h1 { font-size: 3rem; margin-bottom: var(--gap-secondary); * { font-size: 3rem; } } p { max-width: 75ch; } } form { padding: 2.5rem 4rem; .content { gap: var(--gap-secondary); } } .buttons { justify-content: center; } @media (max-width: 768px) { height: 75rem; > .content { h1 { font-size: 2rem; text-align-last: center; text-wrap-style: balance; width: 17ch; margin-bottom: unset; * { font-size: 2rem; } } .h3 { font-size: 1.2rem; font-weight: 500; } } form { padding: 1rem 2rem; .double { gap: var(--gap-secondary); } select { height: 3.5rem; } } } } .section-image-text { .container { flex-direction: row; align-items: start; } .image { flex-wrap: wrap; img { border: var(--border-primary); justify-content: start; } } .h5 { flex-direction: column; align-items: start; } @media (max-width: 768px) { .container { flex-direction: column-reverse; } > img { width: auto; height: 100%; } } } .section-image-text { .image { border-radius: var(--radius-primary); border-width: 0.4rem; row-gap: var(--gap-secondary); img { border-radius: var(--radius-primary); } img:nth-child(1), img:nth-child(4) { width: 40%; } img:nth-child(2), img:nth-child(3) { width: 50%; } } .content { gap: var(--gap-primary); .h5 { gap: var(--gap-tertiary); } } @media (min-width: 1440px) { .image { width: 40rem; } } @media (max-width: 1440px) { .image { width: -webkit-fill-available; } } @media (max-width: 768px) { .container { gap: 3rem; } .image, .content { width: -webkit-fill-available; gap: var(--gap-secondary); } } } .section-image-text { .image { img:hover { scale: 1.039; } } }#tabButton { justify-content: space-between; li { color: var(--color-link); font-size: var(--size-h6); font-weight: var(--weight-h6); cursor: pointer; } } #tabView { background: unset; 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; } } .section-tab-group { #tabButton { width: 100%; gap: unset; li { border-bottom: var(--border-link); flex: 1; } } #tabView { width: 100%; } } .section-tab-group { #tabButton { li:hover, li.active { color: var(--color-link-hover); border-color: var(--color-link-hover); } } } .section-tab-element { .container { flex-direction: row; align-items: start; } #tabView { .item { flex-wrap: nowrap; } } @media (max-width: 768px) { .container { flex-direction: column; } #tabButton, #tabView { width: 100% !important; } .item { flex-direction: column-reverse; align-items: center !important; } } } .section-tab-element { #tabButton { width: 30%; max-height: 12.5rem; } #tabView { width: 70%; .item { gap: var(--gap-secondary); img { border-radius: 50%; width: 8rem; } } } } .section-tab-element { .item { p { color: var(--color-text) !important; } .name { color: var(--color-link) !important; } img { border: var(--border-link); border-width: 5px; } } .item:hover { p { color: var(--color-link-hover) !important; } .name { color: var(--color-link-hover) !important; } img { border-color: var(--color-link-hover); } } }.card { flex-direction: column; overflow: hidden; > .double { direction: var(--direction-2); } .background { height: 100%; } > i { color: var(--color-primary); width: -webkit-fill-available; justify-content: center; } @media (max-width: 768px) { flex: 1 0 100% !important; } } section:not(.section-login):has(> .background) { * { color: var(--color-white); } .card { background: #00000026; border: var(--border-primary); i { color: var(--color-primary); } } } .card { border-radius: var(--radius-primary); padding: 1.5rem 1.2rem; gap: var(--gap-secondary); img:not(.image img, .background) { width: 5rem; } .name { font-size: var(--size-h4); font-weight: var(--weight-h4); } i { font-size: 3rem; } } .card:has(.image) { box-shadow: var(--box-shadow-big); padding: unset; } .card-counter { border: var(--border-primary); outline: var(--border-primary); .content { align-items: center; } .name { font-size: var(--size-h6); } } .card-counter { outline-offset: 0.15rem; border-radius: var(--radius-secondary); padding: 1rem; gap: var(--gap-tertiary); .content { gap: var(--gap-tertiary); } .number { font-size: 1.6rem; } } .card-staff { .content { align-items: center; } .icons { position: absolute; } } .card-staff { .content { padding: 1rem 1.5rem; } .icons { top: -2.35rem; } } .card-comment { .double { justify-content: start; align-items: start; } .name { font-size: var(--size-h6); } } .card-comment { padding: unset; @media (min-width: 768px) { margin-left: 3%; } flex: 1 0 calc(47%); > .content, .double { gap: var(--gap-secondary); } > .content { padding: 1rem 1.5rem; } img:not(.background) { width: 4rem !important; } }.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%; } } .blog { flex-direction: column; justify-content: center; align-items: center; } .wrap:has(.blog) { min-height: 34vh; gap: calc(var(--gap-primary) * 2); .blog { width: 22rem; } @media (max-width: 768px) { .blog { flex: 1 50%; } } }.section-product-view { .container >.double { flex-direction: row-reverse; .double { height: max-content; justify-content: start; flex-wrap: wrap; } } p { justify-content: start; } @media (max-width: 768px) { .container >.double { flex-direction: column; } } } .product { display: flex; flex-direction: column; align-items: center !important; .double { flex-wrap: wrap; height: max-content; } .image { width: 100%; overflow: hidden; } .name, .price { white-space: wrap; font-size: var(--size-p); } .number { font-weight: var(--size-h6); } } .section-product-view { .content:not(.product .content) { gap: var(--gap-secondary); .double { gap: var(--gap-secondary); } } img { border-radius: var(--radius-primary); width: 12rem; } @media (max-width: 768px) { img { width: 55%; } } } .product { .double { gap: var(--gap-tertiary); } } .wrap:has(.product-food) { @media (min-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--gap-primary)), 1fr)); } } .product-food { flex-direction: row; .content { justify-content: center; .name, hr { width: 80%; } .name { justify-content: space-between; } } img { border-radius: 50%; } } .product-food { gap: var(--gap-secondary); img { width: 5rem; } } .product-food { img { border: var(--border-link); border-width: 4px; } } .product-food:hover { img { border-color: var(--border-link-hover); } } .wrap:has(.product-store) { grid-template-columns: repeat(auto-fit, minmax(calc(14rem - var(--gap-primary)), 16rem)); @media (max-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--gap-tertiary)), 1fr)); gap: var(--gap-tertiary); } } .product-store { border: var(--border-primary) !important; box-shadow: var(--box-shadow-big); } .product-store { border-radius: var(--radius-primary); padding: 1.5rem; gap: var(--gap-secondary) !important; .discount { top: 1rem; left: 1rem; } img { width: 9rem; } @media (max-width: 768px) { padding: 1.5rem 1rem; img { width: 8rem; } } } .product-store:hover { border: var(--border-primary) !important; box-shadow: var(--box-shadow-big-hover); } .product-room { box-shadow: var(--box-shadow-big); border-radius: var(--radius-secondary); .double { .double { width: max-content; } } .name { font-size: var(--size-h4); } } .product-room { > .content { padding: 1rem 1.5rem; gap: var(--gap-secondary); } .image { height: 13rem; } }.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: 32rem; } .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-big { height: 34rem; } } }form { flex-direction: column; align-items: center; .content:not(:has(textarea)) { height: max-content; } input, textarea, select, button, .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); flex-direction: column; align-items: start; img { background: var(--color-primary); border: var(--border-link); border-width: 4px; border-radius: 50%; width: 5rem; cursor: pointer; } } button, .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, .button { outline-width: 0.2rem; border-radius: var(--radius-primary); height: 3rem; padding: 0.4rem 1rem; } .head { padding: 1.5rem 0 0; } img { width: 5rem; } @media (max-width: 768px) { input, textarea, select, button, .button { padding: 0.4rem 1rem; height: 3rem; } } } :is( input, textarea, select ):focus { outline-color: var(--color-primary); } label { img:hover { border-color: var(--color-link-hover); } } .form-single { width: max-content !important; button { width: max-content !important; } } .form-filter { width: 100%; flex-direction: row; flex-wrap: wrap; .content:has(.button) { align-self: end; .button { width: 100%; } } } .form-filter { gap: var(--gap-primary); .content { gap: var(--gap-tertiary) !important; } } .form-big { width: -webkit-fill-available; height: -webkit-fill-available; .head { position: relative; background: unset; } } .form-big { gap: var(--gap-secondary); } .form-small { box-shadow: var(--box-shadow-big); border: var(--border-primary); overflow-y: auto; } .form-small { border-radius: var(--radius-primary); width: 23rem; max-height: 32rem; padding: 4rem 2rem 1.5rem; gap: var(--gap-primary); } form { .head { background: var(--color-primary); } } form { .head { border-radius: var(--radius-primary); padding: 0.5rem 1rem; } }.section-profile { align-items: start; .container, .title { width: 70%; } form:has(.button-delete) { width: max-content !important; } @media (max-width: 768px) { .container, .title { width: 100%; } } }section:has(.cart) { @media (min-width: 768px) { .container { flex-direction: row; } } .cart { box-shadow: var(--box-shadow-big); border: var(--border-primary); flex-direction: column; justify-content: start; overflow-y: auto; > .double, h1 { border-bottom: var(--border-primary); height: max-content; } } .content { .double { flex-wrap: wrap; } } .cart, form { height: 100%; max-height: 100%; } @media (max-width: 768px) { .cart, form:not(.cart form) { width: 100% !important; } .cart { > .double { gap: unset !important; } } } } section:has(.cart) { @media (min-width: 768px) { .container { height: 32rem; } } .cart, form { width: 45%; } .cart { border-radius: var(--radius-primary); padding: 1rem; gap: 2rem; > .double, h1 { border-width: 3px; img { width: 5rem; } .double { gap: var(--gap-tertiary); } } } @media (max-width: 768px) { .container { height: unset; } .cart { max-height: 30rem; .content { width: 66%; .double { width: 100%; gap: unset; } } } } }table { width: 100%; height: 100%; border-collapse: collapse; thead { background: var(--color-primary); } tr { th, td { border: var(--border-header); align-content: center; } th { color: var(--background-header); font-size: var(--size-h6); font-weight: var(--weight-h6); white-space: nowrap; } td { font-size: var(--size-p); font-weight: var(--weight-p); min-width: 5rem; max-width: 12rem; word-wrap: break-word; form { flex-direction: row; } .buttons { form { width: max-content !important; } } } } @media (max-width: 768px) { tr { td { min-width: 11rem; } } } } table { tr { th, td { border-width: 2px; padding: 0.5rem; img { width: 5rem; } } } } tbody { tr:nth-child(even) { background: var(--background-header); } }.container:has(.mySwiper) { flex-direction: row; .mySwiper { width: 100%; margin: 0; flex-direction: column; align-items: start; overflow: hidden; .swiper-wrapper { width: 100%; justify-content: start; align-items: start; gap: unset; cursor: grab; } .swiper-pagination { justify-content: center; z-index: var(--z-index-2); span { border-radius: 10px; width: 28px; height: 8px; opacity: 1; } .swiper-pagination-bullet { background: var(--color-link); } .swiper-pagination-bullet-active { background: var(--color-link-hover); } } .buttons-next-previous { position: absolute; } .button-next, .button-previous { color: var(--color-white); font-weight: bold; z-index: var(--z-index-2); } } img:not(.mySwiper img) { height: -webkit-fill-available; } } .container:has(.mySwiper) { img:not(.mySwiper img) { width: 23%; } .mySwiper { .swiper-pagination span { border-radius: 10px; width: 28px; height: 8px; opacity: 1; } .buttons-next-previous { width: 5.5rem; top: 1.7rem; left: -0.7rem; } .button-next, .button-previous { width: 0.7rem; height: 0.7rem; padding: 0.9rem; } .button-next::after, .button-previous::after { font-size: 0.8rem; } } } .swiper-wrapper { .product-store { flex: 1 0 22%; margin-left: 3%; } @media (max-width: 768px) { .product-store { flex: 1 0 48%; margin-left: 2%; } } } .pika-single { * { direction: ltr; } } .pika-lendar { display: block; } #cke_description { width: calc(100% - 10px) !important; border: unset !important; .cke_inner { width: 100% !important; #cke_1_top, #cke_1_contents, iframe { width: 100% !important; padding: unset !important; } } } .cke_notification.cke_notification_warning { display: none !important; } .cke_chrome { padding: unset !important; } nav { justify-content: end; align-self: end; ul { background: var(--color-link) !important; display: flex; flex-direction: row; } li { a, span { color: var(--color-white) !important; width: 100% !important; height: 100% !important; display: flex; align-items: center; justify-content: center; } } } nav { li { width: 2rem !important; height: 2rem !important; line-height: 22px; } } nav { @media (min-width: 768px) { li:hover { background: var(--color-link-hover); a { color: var(--color-white) !important; } } } li:has(span) { background: var(--color-link-hover); span { color: var(--color-white) !important; } } }.avatar { border: var(--border-header); border-radius: 50%; } a:has(.avatar) { .avatar { border-color: var(--color-link); } } .avatar { border-width: 2px; width: 4rem; height: 4rem; } a:has(.avatar) { .avatar:hover { border-color: var(--color-link-hover); } }.section-panel { padding: 0; margin: 0; flex-direction: row; align-items: start; gap: unset; overflow-y: hidden; aside { border-left: var(--border-header); box-shadow: var(--box-shadow-big); min-height: 100vh; height: -webkit-fill-available; z-index: var(--z-index-1); } article { header, section { width: 100%; .container { flex-direction: row; } } section:nth-child(2) { .container { justify-content: center; } } section:has(table) { .container { flex-direction: column; } } } } .section-panel { .container, .title { padding-left: 3rem; padding-right: 3rem; } aside { width: 15%; padding: 2rem 1rem 2rem 2rem; hr { margin-bottom: 1rem; } } article { width: 85%; header { padding: 0.5rem 0; } section { padding: 1.5rem 0; } .content { gap: var(--gap-secondary); .price { font-size: 2rem; } } } aside { hr { margin-bottom: 1rem; } } article { header { padding: 0.5rem 0; } section { padding: 1.5rem 0; } .content { gap: var(--gap-secondary); .price { font-size: 2rem; } } } .title { align-items: start; } .wrap { @media (min-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(calc(30% - var(--gap-primary)), 1fr)); gap: var(--gap-primary); } } } .section-panel { aside { width: 15%; padding: 2rem 1rem 2rem 2rem; } article { width: 85%; } @media (max-width: 1350px) { aside { width: 18%; } article { width: 82%; } } @media (max-width: 1280px) { aside { width: 20%; } article { width: 80%; } } @media (max-width: 1024px) { aside { width: 27%; } article { width: 73%; } } @media (max-width: 768px) { .container, .title { padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 768px) { aside.active { width: 0; padding: 0; opacity: 0; * { display: none; } } article.active { width: 100%; } } @media (max-width: 768px) { aside { width: 0; padding: 0; opacity: 0; * { display: none; } } article { width: 100%; } aside.active { width: 65%; padding: 2rem 1rem 2rem 2rem; opacity: 1; * { display: flex; } } article.active { width: 35%; } } }.section-login { height: 100vh; margin: 0; padding: 0; .container { justify-content: center; } }