:root {
               --light-main-color: rgb(127, 127, 144);
               --light-third-color: #37373f;
               --light-span-color: rgb(255, 26, 26);
               --base-color: #fff;
               --sec-base-color: #eee;
               --third-base-color: #fff;
               --active-hover: black;
           }
           
           .darkmode {
               --light-main-color: #fff;
               --light-third-color: #fff;
               --light-span-color: rgb(207, 108, 15);
               --base-color: hsl(0, 0%, 9%);
               --sec-base-color: #252525;
               --third-base-color: #202020;
               --active-hover: white;
           }
           
           .darkmode .shape {
               filter: brightness(9%);
           }
           
            ::selection {
               color: #fff;
               background-color: rgba(255, 19, 19, 0.705);
           }
           
           * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
           }
           
           html {
               font-size: 62.5%;
               scroll-behavior: smooth;
           }
           
           body {
               background-color: var(--sec-base-color);
           }
           
           nav {
               display: flex;
               width: 100%;
               height: 9rem;
               align-items: center;
               justify-content: space-around;
               background-color: var(--base-color);
               position: fixed;
               z-index: 5;
           }
           
           nav a p {
               font-size: 3rem;
               font-weight: 700;
               color: var(--light-third-color);
           }
           
           .nav-items {
               display: flex;
               gap: 3rem;
               font-size: 1.8rem;
               font-weight: 600;
           }
           
           .nav-items a {
               position: relative;
               transition: 0.5s;
           }
           
           svg {
               width: 2.5rem;
               height: 2.5rem;
           }
           
           nav a {
               list-style: none;
               text-decoration: none;
               color: rgb(127, 127, 144);
           }
           
           .nav-items a:after {
               content: "";
               position: absolute;
               width: 0;
               height: 2px;
               background-color: var(--light-span-color);
               left: 0rem;
               top: 3rem;
               transition: 0.5s;
           }
           
           .nav-items a:hover::after,
           .nav-items a:hover,
           .nav-items .active,
           .nav-items .active::after {
               width: 100%;
               color: var(--active-hover);
           }
           
           nav svg .drp {
               display: none;
           }
           
           nav .dropbtn svg {
               fill: var(--active-hover);
           }
           
           nav #moon,
           nav #sun {
               cursor: pointer;
           }
           
           nav .icons {
               height: 50px;
               width: 50px;
               border-radius: 50%;
               background-color: var(--base-color);
               display: flex;
               justify-content: center;
               align-items: center;
               border: none;
           }
           
           nav .icons svg:last-child {
               display: none;
           }
           
           .darkmode nav .icons svg:first-child {
               display: none;
           }
           
           .darkmode nav .icons svg:last-child {
               display: block;
           }
           
           .dropdown {
               display: none;
           }
           
           header {
               height: fit-content;
               background-color: #eee;
               padding-top: 9rem;
               background-color: var(--sec-base-color);
           }
           
           .container {
               margin: auto;
               padding: 3rem 0 5rem;
               display: flex;
               justify-content: space-around;
           }
           
           header h1 {
               font-family: "Amatic SC", sans-serif;
               font-weight: 800;
               font-size: 7rem;
           }
           
           header .textt {
               width: 35%;
               margin-top: 6rem;
               height: fit-content;
               font-size: 1.8rem;
               color: var(--light-third-color);
           }
           
           header img {
               width: 45rem;
               height: 45rem;
           }
           
           header img:hover {
               animation: shake 0.7s;
               animation-iteration-count: infinite;
           }
           
           @keyframes shake {
               0% {
                   transform: translate(1px, 1px) rotate(0deg);
               }
               10% {
                   transform: translate(-1px, -2px) rotate(-1deg);
               }
               20% {
                   transform: translate(-3px, 0px) rotate(1deg);
               }
               30% {
                   transform: translate(3px, 2px) rotate(0deg);
               }
               40% {
                   transform: translate(1px, -1px) rotate(1deg);
               }
               50% {
                   transform: translate(-1px, 2px) rotate(-1deg);
               }
               60% {
                   transform: translate(-3px, 1px) rotate(0deg);
               }
               70% {
                   transform: translate(3px, 1px) rotate(-1deg);
               }
               80% {
                   transform: translate(-1px, -1px) rotate(1deg);
               }
               90% {
                   transform: translate(1px, 2px) rotate(0deg);
               }
               100% {
                   transform: translate(1px, -2px) rotate(-1deg);
               }
           }
           
           header .btn {
               border: none;
               height: 5rem;
               font-size: 1.6rem;
               cursor: pointer;
               position: relative;
           }
           
           header .btn svg {
               position: absolute;
               top: 0.5rem;
               left: 1rem;
               width: 4rem;
               height: 4rem;
               fill: var(--light-span-color);
           }
           
           header .table {
               border-radius: 0 3rem 3rem 3rem;
               background-color: var(--light-span-color);
               color: #fff;
               width: 15rem;
           }
           
           header .video {
               background-color: transparent;
               width: 22rem;
               height: 5rem;
               color: var(--sec-color);
               font-size: 1.8rem;
           }
           
           header .table:hover {
               background-color: var(--light-span-color);
           }
           
           header a {
               text-decoration: none;
               color: #fff;
           }
           
           header .video:hover {
               color: var(--light-span-color);
           }
           
           section {
               height: fit-content;
               padding-top: 10rem;
               width: 100%;
               justify-content: center;
               background-color: var(--third-base-color);
               padding-bottom: 7rem;
           }
           
           .text {
               text-align: center;
               font-size: 2rem;
               left: 35vw;
               color: var(--light-third-color);
           }
           
           p span,
           h4 span,
           h1 span {
               color: var(--light-span-color);
           }
           
           .text p {
               font-family: "Amatic SC", sans-serif;
               font-size: 5rem;
               color: var(--light-third-color);
           }
           
           section .cards {
               display: flex;
               gap: 4rem;
               justify-content: center;
               width: 90%;
               margin: auto;
               text-align: center;
               background-color: var(--third-base-color);
           }
           
           section .card h2 {
               color: var(--light-third-color);
           }
           
           section .card {
               height: 55rem;
               width: 28%;
               border: none;
               outline: none;
               border-radius: 1rem;
               font-size: 1.4rem;
               transition: 0.5s;
               position: relative;
               background-color: var(--base-color);
               color: #9f9f9f;
           }
           
           section .icons {
               background-color: #ffffff38;
               backdrop-filter: blur(4px);
               width: 3rem;
               height: 14rem;
               gap: 1rem;
               text-align: center;
               position: absolute;
               display: flex;
               flex-direction: column;
               top: 3rem;
               right: -5rem;
               opacity: 0;
           }
           
           section .card svg {
               text-align: center;
               cursor: pointer;
               fill: rgba(56, 56, 56, 0.596);
           }
           
           section .card p {
               font-style: italic;
           }
           
           .card svg:hover {
               fill: var(--light-third-color);
           }
           
           section .card:hover {
               transform: scale(1.1);
           }
           
           section .card:hover .icons {
               right: 0rem;
               opacity: 1;
               transition: 0.5s;
               transition-delay: 0.5s;
           }
           
           section .card img.image {
               height: 60vh;
               width: 100%;
               border-radius: 1rem;
               position: relative;
               top: 0;
               left: 0;
           }
           
           section .card .shape {
               position: absolute;
               width: 100%;
               height: 25rem;
               bottom: 6rem;
               left: 0;
           }
           
           aside {
               height: fit-content;
               background-color: #eee;
               padding-top: 10rem;
               height: fit-content;
               background-color: var(--sec-base-color);
           }
           
           aside .imgscon {
               width: 85%;
               height: fit-content;
               display: grid;
               grid-template-rows: repeat(9, 100px);
               grid-template-columns: repeat(7, 150px);
               margin: auto;
               row-gap: 5rem;
               column-gap: 5rem;
           }
           
           aside .imgscon img {
               width: 100%;
               height: 100%;
               position: relative;
               display: block;
               border: 2px solid white;
           }
           
           aside .imgscon .img {
               position: relative;
               height: 100%;
               z-index: 1;
           }
           
           aside .imgscon .txt {
               position: absolute;
               text-align: center;
               width: 100%;
               font-size: 1.5rem;
               height: 0;
               background: rgba(0, 0, 0, 0.5);
               color: #fff;
               z-index: 2;
               bottom: 0;
               left: 0;
               opacity: 0;
               place-content: center;
               transition: 0.7s ease;
           }
           
           aside .imgscon .img:hover .txt {
               height: 100%;
               opacity: 1;
           }
           
           aside .img1 {
               grid-column: 1/3;
               grid-row: 1/3;
           }
           
           aside .img2 {
               grid-row: 1/6;
               grid-column: 3/5;
           }
           
           aside .img3 {
               grid-row: 1/3;
               grid-column: 5/7;
           }
           
           aside .img4 {
               grid-row: 3/7;
               grid-column: 1/3;
           }
           
           aside .img5 {
               grid-row: 3/5;
               grid-column: 5/7;
           }
           
           aside .img6 {
               grid-row: 5/8;
               grid-column: 5/7;
           }
           
           aside .img7 {
               grid-row: 6/9;
               grid-column: 3/5;
           }
           
           figure {
               height: fit-content;
               padding-top: 10rem;
               position: relative;
               background-color: var(--third-base-color);
           }
           
           figure .infocon {
               display: grid;
               padding-block: 2rem;
               grid-template-columns: repeat(2,1fr);
               gap: 2rem;
           }
           
           figure .information {
               background-color: var(--base-color);
               padding: 1rem;
               height: 9rem;
               color: var(--light-third-color);
           }
           
           figure .information .list1 {
               display: flex;
               gap: 1rem;
           }
           
           figure .information h6 {
               font-weight: 700;
               font-size: 2rem;
               color: #5c5c5c;
           }
           
           figure .information svg {
               width: 5rem;
               height: 5rem;
           }
           
           figure .details {
               justify-content: center;
               width: 80%;
               margin: auto;
               font-size: 1.4rem;
               margin-bottom: 0;
           }
           
           figure .name,
           figure .email {
               width: 50%;
           }
           
           figure .first {
               display: flex;
               gap: 2rem;
           }
           
           figure .subject,
           figure textarea {
               width: 100%;
           }
           
           figure input:focus,
           figure textarea:focus {
               border-color: var(--light-span-color);
           }
           
           figure .name,
           figure .email {
               outline: none;
               border: 2px solid rgb(223, 220, 220);
               height: 5rem;
               padding: 1rem;
           }
           
           figure .subject {
               height: 5rem;
               outline: none;
               border: 2px solid rgb(223, 220, 220);
               padding: 1rem;
           }
           
           figure textarea {
               outline: none;
               border: 2px solid rgb(223, 220, 220);
               padding: 1rem;
           }
           
           figure .btn {
               position: relative;
               width: 80%;
               margin: auto;
           }
           
           figure button {
               border: none;
               background-color: var(--light-span-color);
               color: #fff;
               font-size: 1.4rem;
               height: 5rem;
               width: 12em;
               border-radius: 3rem;
               position: absolute;
           }
           
           footer {
               position: relative;
               background-image: linear-gradient(#0009, #0009), url(https://mohammedattia11.github.io/Mealify/img/textured-metal-background.jpg);
               background-size: contain;
               height: 35rem;
               color: #fff;
           }
           
           footer .container {
               position: absolute;
               display: flex;
               font-size: 3rem;
               gap: 3rem;
               margin-inline: 10rem;
               padding-bottom: 0;
           }
           
           footer img {
               width: 4rem;
               height: 4rem;
               margin-right: 1rem;
           }
           
           footer .title {
               display: flex;
               height: 5rem;
               font-weight: 800;
               padding-bottom: 1rem;
               align-items: center;
           }
           
           footer .about,
           footer .con {
               width: 23%;
           }
           
           footer .sub {
               width: 44%;
           }
           
           footer p {
               font-size: 1.6rem;
           }
           
           footer .iconf {
               text-align: center;
           }
           
           footer .about h6 {
               text-align: center;
           }
           
           footer h6 {
               font-size: 2rem;
           }
           
           footer .iconf svg {
               fill: #fff;
               width: 3.5rem;
               height: 3.5rem;
               margin-right: 1rem;
               cursor: pointer;
           }
           
           footer .sub svg {
               width: 1.7rem;
               height: 1.7rem;
               cursor: pointer;
           }
           
           footer .sub input {
               width: 33rem;
               height: 4rem;
               margin: 0 1rem 2rem 0;
               padding: 1rem;
               font-size: 1.4rem;
           }
           
           footer .sub button {
               width: 15rem;
               height: 4rem;
               background-color: var(--light-span-color);
               border: none;
               color: #fff;
               font-size: 1.7rem;
           }
           
           footer .sub button:hover {
               background-color: var(--light-span-color);
           }
           
           footer .list {
               display: flex;
               list-style: none;
               gap: 15rem;
           }
           
           footer .left {
               width: 20%;
           }
           
           footer .right {
               float: left;
           }
           
           footer li {
               font-size: 1.7rem;
               width: 22rem;
               transition: 0.6s;
           }
           
           footer li:hover {
               transform: translateX(1.5rem);
               background-color: #5c5c5c;
           }
           
           footer .con span {
               display: flex;
               gap: 1rem;
           }
           
           footer a {
               color: #fff;
               text-decoration: none;
           }
           
           footer .sub span {
               width: 7rem;
               margin-right: 4rem;
               background-color: #37373f;
           }
           
           figure svg rect {
               fill: var(--light-span-color);
           }
           
           footer .con svg {
               fill: var(--light-span-color);
           }
           
           @media screen and (max-width: 767px) {
               nav svg {
                   display: block;
                   fill: rgb(0, 0, 0);
                   width: 2rem;
                   height: 2em;
               }
               nav .nav-items {
                   display: none;
               }
               nav {
                   width: 100%;
               }
               .dropbtn {
                   background-color: transparent;
                   color: white;
                   padding: 16px;
                   font-size: 16px;
                   border: none;
                   cursor: pointer;
               }
               .dropdown {
                   position: relative;
                   display: inline-block;
                   margin-left: 0;
               }
               .dropdown-content {
                   display: none;
                   position: absolute;
                   width: 50vw;
                   height: 100vh;
                   overflow: auto;
                   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
                   backdrop-filter: blur(10px);
                   z-index: 6;
                   left: 0rem;
                   justify-content: flex-start;
                   align-items: flex-end;
               }
               .show {
                   display: block;
               }
               .dropdown-content a {
                   color: var(--light-third-color);
                   font-size: 1.8rem;
                   font-weight: 700;
                   padding: 12px 16px;
                   text-decoration: none;
                   display: block;
               }
               header img {
                   width: 100%;
                   height: auto;
               }
               header .container {
                   display: flex;
                   flex-direction: column-reverse;
                   height: fit-content;
                   width: 80%;
                   margin: auto;
               }
               header .container .textt {
                   width: 100%;
                   text-align: center;
               }
               section .cards {
                   display: flex;
                   flex-direction: column;
                   height: fit-content;
                   margin: auto;
                   padding-bottom: 5rem;
                   gap: 7rem;
               }
               section .card .shape {
                   bottom: 9rem;
               }
               section .card {
                   margin: auto;
                   height: 100%;
                   width: 70%;
               }
               aside .imgscon {
                   display: flex;
                   flex-direction: column;
                   height: fit-content;
                   padding-bottom: 5rem;
               }
               aside .imgscon .img {
                   width: 100%;
                   height: auto;
               }
               figure .infocon {
                   display: flex;
                   flex-direction: column;
                   height: fit-content;
                   padding-bottom: 3rem;
               }
               figure .first {
                   display: flex;
                   flex-wrap: wrap;
                   gap: 2rem;
               }
               figure .name,
               figure .email {
                   width: 100%;
               }
               footer {
                   height: 80rem;
               }
               footer .container {
                   display: flex;
                   flex-direction: column;
                   height: fit-content;
                   margin-inline: 10%;
                   width: 80%;
               }
               footer .about,
               footer .con,
               footer .sub {
                   width: 100%;
               }
               footer input[type],
               footer .sub button {
                   width: 100%;
               }
           }