@media screen and (max-width:875px) {
  .nav-container {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 0rem 2rem -1rem -3rem;
}
.nav_logo {
  display:flex;
  column-gap:1rem;
  align-items:center;
  margin: 0rem 0rem 0rem -0.5rem;
  z-index: 10;
}
.logo_icon {
  width:var(--fluid-logoIcon);
}

/* ======== HEADER NAV ======== */
@media screen and (max-width:560px) {
  .container{
    margin: 0 auto;
    padding: 0rem 3rem 0rem 3rem;
  }

  /* ========== NAVIGATION ========= */
  /* Hamburger Menu Toggle */
.menu.open .hamburger-bar-1 {
  transform: translateY(7px) rotate(45deg);
}

.menu.open .hamburger-bar-2 {
  opacity: 0;
}

.menu.open .hamburger-bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navigation Background Scaling */
.navigation__background.open {
  transform: scale(250);
}

/* Navigation Visibility When Open */
.navigation__nav.open {
  opacity: 1;
  width: 100%;
}

/* Menu Overlay for Full-Screen Effect */
.menu-overlay {
  background-color: #000000;
  color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Ensure the Hamburger Icon and Bars Transform Properly */
.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000000;
  background-color: #f0f2f5;
  border-radius: 50%;
}

.hamburger-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
  z-index: 1000000;
}

.hamburger-bar {
  background-color: #202020;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}

.hamburger-bar-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.hamburger-bar-3 {
  bottom: 0;
}

  .menu {
    position: absolute;
    top: 42px;
    right: -34px;
    height: 46px;
    width: 46px;
  }
  
  .menu-link {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000000;
    background-color: #f0f2f5;
    border-radius: 50%;
  }
  
  .hamburger-icon {
    position: absolute;
    width: 20px;
    height: 14px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 1px;
    z-index: 1000000;
  }
  
  .hamburger-bar {
    background-color: #202020;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all 0.25s ease-in-out;
  }
  
  .hamburger-bar-2 {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  
  .hamburger-bar-3 {
    bottom: 0;
  }
  
  nav {
    position: relative;
    /* height: 80%; */
    /* top: 100%; */
    /* transform: translateY(50%); */
    /* font-size: 50px; */
    /* font-family: "Poppins", serif; */
    /* font-weight: 400; */
    /* text-align: center; */
  }
  
  ul {
    list-style: none;
    padding: 0;
    display: inline-block;
    position: relative;
  }
  
  li {
    /* display: block;
    padding: 5px;
    position: relative;
    opacity: 1;
    margin: 5px; */
  }
  
  a {
    display: block;
    position: relative;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
  }
  
  .navigation__background {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    position: absolute;
    top: 52px;
    right: -24px;
    background-image: radial-gradient(#131313, #131313);
    z-index: 1000;
    transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .navigation__nav {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    opacity: 0;
    width: 0;
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .navigation__list {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    align-items: center;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    list-style: none;
    text-align: center;
    width: 100%;
    z-index: 10;
  }
  
  .navigation__list2{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    align-items: center;
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    list-style: none;
    text-align: center;
    width: 100%;
  }
  
  /* ===== MAIN NAV1 ==== */
  .navigation__link:link,
  .navigation__link:visited {
    display: inline-block;
    font-family: 'Epilogue', sans-serif;
    font-size: var(--fluid-LrgMenuTxt);
    font-weight: 100;
    margin: 2rem 0rem 2rem 0rem;
    color: #F0F2F5;
    text-decoration: none;
    /* text-transform: uppercase; */
    background-image: linear-gradient( 120deg, transparent 0%, transparent 50%, #fff 50% );
    background-size: 230%;
    transition: all 0.4s;
  }
  .navigation__link:link span,
  .navigation__link:visited span {
    margin-right: 1rem;
    display: inline-block;
  }
  .navigation__link:hover,
  .navigation__link:active {
    background-position: 100%;
    color: #131313;
    transform: translateX(1rem);
  }
  
  .navigation__item {
    margin: -1rem;
  }

/* ===== MAIN NAV1 ==== */
.navigation__link2:link,
.navigation__link2:visited {
  display: inline-block;
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fluid-SmlMenuTxt);
  font-weight: 100;
  margin: 2rem 0rem 1rem 0rem ;
  /* padding: 1rem 1rem 1rem 0rem; */
  color: #F0F2F5;
  text-decoration: none;
  /* text-transform: uppercase; */
  background-image: linear-gradient( 120deg, transparent 0%, transparent 50%, #fff 50% );
  background-size: 230%;
  transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
  margin-right: 1rem;
  display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #131313;
  transform: translateX(1rem);
}

.navigation__item {
  margin: -1rem;
}

.topHeaderGap{
  margin: 2rem 0rem 0rem 0rem;
}

.footer{
  position: relative; /* Changed from absolute to relative */
  width: 100%;
  left: 0;
  background-color: #131313;
  display: flex;
  justify-content: center; /* Ensure footer contents are centered */
  align-items: center; /* Align items vertically in the center */
  flex-direction: column; /* Stack the children vertically */
  padding: 1rem; /* Adjust padding as needed */
}

.footer_logo{
  width: 6rem; /* Adjust logo size as needed */
  /* margin: 0 auto; Center the logo */
}

.footer_text, .footer_icons{
  text-align: center; /* Center the text and icons */
  width: 100%; /* Ensure they take the full width */
  margin: 1rem 0; /* Add some space around them */
}

.footer_icons i{
  margin: 0 10px; /* Space out the icons */
}

.footer_col1, .footer_col2, .footer_col3{
  width: 100%; /* Make each column take the full width */
  display: block; /* Stack them vertically */
}

.footer_col2 .footer_text{
  margin-left: 0; /* Remove any left margin that might push it to the right */
}

}

.name_outline {
  color:#f0f2f5;
  -webkit-text-stroke:0 #f0f2f5;
  text-shadow:0 1px 4px #131313;
}

.introGretting{
display: flex;
margin: 2rem 0rem 0rem 0rem;
}

.about_pageTitle1 {
  font-family:Epilogue,sans-serif;
  font-weight:200;
}

.about_pageTitle1v1{
  font-family: "IBM Plex Sans Arabic", sans-serif;
  /* font-family: "Noto Sans Arabic", sans-serif;  */
  font-weight: 250;
}

.about_pageTitle2 {
  font-family:Epilogue,sans-serif;
  font-weight:400;
}

.topHeaderGap::before{
  content:'';
  /* background-image: url("/assests/imgs/circleOutline.svg"); */
  background-size: cover;
  display: block;
  border-radius: 100%;
  height: 400px;
  width: 400px;
  border: 1px solid #131313;
  position: absolute;
  left: -34px;
  top: -66px;
  transform: translate(-50%, -50%);
}

.blackstar::before{
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 46.5px;
  position: absolute;
  left: -25.5px;
  top: -3.6px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

.about_pageTitle2::before{
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 206px;
  position: absolute;
  left: 21px;
  top: 100.5px;
  border-radius: 5rem;
}


#dynamicBlackLine {
  content: '';
  display: block;
  background: #131313;
  height: 1px;
  position: absolute;
  left: 112px; 
  top: 27.5px;
  border-radius: 5rem;

}


.blackstar2::before{
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 46.5px;
  position: absolute;
  right: -19.5px;
  top: 28px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

.rightBlackStroke::before{
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 158px;
  position: absolute;
  right: 26.5px;
  top: 38.5px;
  border-radius: 5rem;
}


.home_headerTitle {
  margin:-1.5px;
}


.home_headerBodyText{
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fluid-prjtag);
  font-weight: 700;
}


/* ======== BODY CONTENT ======== */

.paprikaImgContainer{
  display: flex;
  justify-content: center;
}

.PaprikaPics{
  width: 100%;
  /* padding: 0rem 0.5rem 0rem 0rem; */
  /* height: 24vh; */
  /* margin: 0rem 0rem 1rem 0rem; */
}

.project_infomartion {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}





/* ======== PROJECTS DETAIL ======== */

.project1_D1{
  font-weight: 600;
}

.project_comInfo1{
display: flex;
margin-top: 1rem;
margin-bottom: 1rem;
flex-direction: column;
align-items: flex-start;
}

/* ======== VIDEO PROTOTYPE ======== */
.mockup_preview{
display: flex;
justify-content: space-evenly;
}

.video_Prototype{
height: 540px;
margin: 5rem 0rem 5rem 0rem;
}

/* ======== PROJECT CONTENT ======== */
.content_subHeader{
font-size: var(--fluid-li);
}

.project_Imgs{
width: 100%;
margin: 2rem 0rem 2rem 0rem;
}

.analysis_Logos{
width: 10%;
margin: 1rem 0rem 1rem 0rem;
}

.keyTakeaways_list {
font-family: 'Zen Maru Gothic', serif;
font-size: var(--fluid-p);
font-weight: 400;
line-height: 2rem;
list-style-type: disc;
margin: 0rem 0rem 2rem 2rem;
}

.project_imgContainer{
display: flex;
justify-content: space-evenly;
}


.project_Buttons{
position: relative;
font-size: var(--fluid-b);
font-weight: 550;
border: solid 2px var(--black);
color: var(--black);
padding: 12px 33px;
/* border-radius: 3px; */
/* box-shadow: 5px 10px; */
text-align: center;
transition: all .2s ease-in-out;
line-height: 1;
margin: 1rem 0rem 2rem 0rem;
}


.project_Buttons:hover{
color: #F0F2F5;
background-color: #131313;
border-radius: 3px;
transform: scale(0.9);
}

/* ====== TITLE TEXT REVEAL ======= */

.appear1{
animation: type1 3s steps(75);
white-space:nowrap;
overflow:hidden;
}

.appear2{
animation: type2 3s steps(75);
white-space:nowrap;
overflow:hidden;
}

.appear3{
animation: type3 4s steps(75);
white-space:nowrap;
overflow:hidden;
}

@keyframes type1{
0%{
  width:0ch;
}

100%{
  width:27ch;
}
}

@keyframes type2{
0%{
  width:0ch;
}

100%{
  width:37ch;
}
}

@keyframes type3{
0%{
  width:0ch;
}

100%{
  width:37ch;
}
}

/* ====== TEXT REVEAL ======= */
.reveal p, .reveal img {
position: relative;
transform: translateY(150px);
opacity: 0;
/* transition: all ease 1s; */
}


/* ============ Body Content: About Me ============ */



h1 {
  position:relative;
  box-sizing:border-box;
}
/* Rotating Circle Links */
.rotatingArrow{
  display: flex;
  justify-content: flex-end;
  margin: 0rem -2rem 0rem 0rem;
}

.link {
  width: 10rem;
  height: 10rem;
  display: inline-block;
  font: 300 1.55rem/1.4 'Epilogue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1175em;
  word-spacing: 0.3em;
  text-decoration: none;
  font-weight: 600;
}
.link__svg {
  width: 70%;
  height: auto;
  transform-box: fill-box;
  fill: #131313;
  stroke: #131313;
  stroke-width: 0.05em;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.link__arrow {
  stroke-width: 0.075em;
  transform-origin: 50% 50%;
  transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}
.link:hover .link__arrow {
  transform: scale(1.1);
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.link__text {
  transform-origin: 50% 50%;
  animation: rotateReverse normal infinite 20s linear;
}

.link__text2 {
  transform-origin: 50% 50%;
  animation: rotate normal infinite 20s linear;
}

.link:hover .link__text {
  animation-play-state: paused;
}
@keyframes rotateReverse {
  to {
      transform: rotate(-360deg);
  }
}

.link__text2 {
  transform-origin: 50% 50%;
  animation: rotate normal infinite 20s linear;
}

.link:hover .link__text2 {
  animation-play-state: paused;
}

@keyframes rotate{
  to {
      transform: rotate(360deg);
  }
}

/* ======== PROJECT SECTION ======== */


  a {
    display: block;
    position: relative;
    color: #f0f2f5  ;
    /* background-color: #F0F2F5; */
    text-decoration: none;
    overflow: hidden;
  }

  a:active{
    color: #131313;
    background-color: rgba(	240, 242, 245, 0.9);
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    /* border-radius: 5rem; */
    transition: all 100ms ease;
    box-shadow: 0 12px 16px 0 rgba(19,19,19,0.24),0 17px 50px 0 rgba(19,19,19,0.19);
  };

*, *:before, *:after {
  box-sizing: border-box;
}

/* ======== FOOTER ======== */
.footer{
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
background-color: #131313;
padding: 2rem 0rem 2rem 0rem;
/* justify-content: space-around; */
}

.footer_col1 {
/* margin: 0rem 3rem 0rem 2rem; */
/* display: flex; */
}

.footer_col2{
margin: 1rem 0rem 0rem 0rem;
}

.footer_logo{
width: 5rem;
margin: 0rem 0rem 0rem 2.5rem;
}

.footer_text{
font-size: var(--fluid-p);
color: #F0F2F5;
font-family: 'Epilogue', sans-serif;
font-weight: 400;
margin: 0rem 0rem 1rem 2rem;
}

.footer_col3 a{ 
text-decoration: none;
color: #F0F2F5;
}

.footer_icons{
display: flex;
flex-direction: row;
padding: 0rem 0rem 0rem 2rem;
}

.footer_icons i{
color: #F0F2F5;
font-size: var(--fluid-menuIcons);
margin: 1rem 2rem 1rem 1rem;
padding: 0.5rem 0rem 0rem 0rem;
cursor: pointer;
}

.iconsSpc{
margin: 3rem 0rem 0rem 0rem;
}
  /* ====== Footer Design ======= */
  .whiteLineLeft::before{
  content: '';
  display: block;
  background: #F0F2F5;
  width: 1px;
  height: 192px;
  position: absolute;
  left: 21px;
  top: 38.5px;
  border-radius: 5rem;
  }
  
  .whiteStar1::before {
  content: '';
  background-image: url(/assests/imgs/whitestar.svg);
  color: #F0F2F5;
  background-size: cover;
  display: block;
  width: 35.5px;
  position: absolute;
  left: 21px;
  top: 241px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
  }
  
  .whiteLineRight::before{
  content: '';
  display: block;
  background: #F0F2F5;
  width: 1px;
  height: 192px;
  position: absolute;
  right: 26px;
  top: 38.5px;
  border-radius: 5rem;
  }
  
  .whiteStar2::before {
  content: '';
  background-image: url(/assests/imgs/whitestar.svg);
  color: #F0F2F5;
  background-size: cover;
  display: block;
  width: 35.5px;
  position: absolute;
  right: -9px;
  top: 241px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
  }
  
  .whiteLineBottomRight::before{
  content: '';
  display: block;
  background: #F0F2F5;
  width: 150px;
  height: 1px;
  position: absolute;
  right: 17px;
  top: 241.5px;
  border-radius: 5rem;
  }
  
  .whiteLineBottomLeft::before{
  content: '';
  display: block;
  background: #F0F2F5;
  width: 150px;
  height: 1px;
  position: absolute;
  left: 20px;
  top: 241.5px;
  border-radius: 5rem;
  }
  
  .whiteCircleBottomLeft::before{
  content: '';
  background-size: cover;
  display: block;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  border: 1px solid #F0F2F5;
  position: absolute;
  left: 182px;
  top: 241px;
  transform: translate(-50%, -50%);
  }
  
  .whiteCircleBottomRight::before{
  content: '';
  background-size: cover;
  display: block;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  border: 1px solid #F0F2F5;
  position: absolute;
  right: 154px;
  top: 241px;
  transform: translate(-50%, -50%);
  }
  
  
  
  
  /* @media screen and (max-width:960px){
  .projectTagsBox {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  } */


/* ======== NAVIGATION FOR DESKTOP AT 561 PX AND UP ========  */


}

/* ===== IMG CURSOR HOVER ===== */

.cursor {
top: -100px;
width: 50px;
height: 50px;
border: 1px solid #131313;
border-radius: 50%;
position: fixed;
box-shadow: 1px -2px 11px -1px #131313;
pointer-events: none;
transition: all 0.1s linear, top 0ms linear, left 0ms ease-in-out;
z-index: 15;
}
h1 {
  position:relative;
  box-sizing:border-box
} 


/* ======== NAVIGATION FOR DESKTOP AT 875 PX AND UP ========  */
@media screen and (max-width:875px) {

  /* ===== IMG CURSOR HOVER ===== */

.cursor {
  top: -100px;
  width: 50px;
  height: 50px;
  border: 1px solid #131313;
  border-radius: 50%;
  position: fixed;
  box-shadow: 2px -3px 11px -1px #131313;
  pointer-events: none;
  transition: all 0.1s linear, top 0ms linear, left 0ms ease-in-out;
  z-index: 15;
}

/* ======= FOOTER ======= */


/* .project__intro1 {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
} */



}


@media screen and (min-width:562px) {
.grid > div {
  width: 100%;
  aspect-ratio: 2;
  /* outline: 0.15rem solid #131313; */
}
  /* Rotating Circle Links */
  .rotatingArrow{
    display: flex;
    justify-content: flex-end;
    margin: 3rem 0rem 0rem 0rem;
  }
  
  .link {
    width: 10rem;
    height: 10rem;
    display: inline-block;
    font: 300 1.55rem/1.4 'Epilogue', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1175em;
    word-spacing: 0.3em;
    text-decoration: none;
    font-weight: 600;
  }
  .link__svg {
    width: 70%;
    height: auto;
    transform-box: fill-box;
    fill: #131313;
    stroke: #131313;
    stroke-width: 0.05em;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .link__arrow {
    stroke-width: 0.075em;
    transform-origin: 50% 50%;
    transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
  }
  .link:hover .link__arrow {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .link__text {
    transform-origin: 50% 50%;
    animation: rotateReverse normal infinite 20s linear;
  }
  
  .link__text2 {
    transform-origin: 50% 50%;
    animation: rotate normal infinite 20s linear;
  }
  
  .link:hover .link__text {
    animation-play-state: paused;
  }
  @keyframes rotateReverse {
    to {
        transform: rotate(-360deg);
    }
  }
  
  .link__text2 {
    transform-origin: 50% 50%;
    animation: rotate normal infinite 20s linear;
  }
  
  .link:hover .link__text2 {
    animation-play-state: paused;
  }
  
  @keyframes rotate{
    to {
        transform: rotate(360deg);
    }
  }

  .logo_icon{
    width:var(--fluid-logoIcon);
}


/* ========== NAVIGATION ========= */
/* Hamburger Menu Toggle */
.menu.open .hamburger-bar-1 {
  transform: translateY(7px) rotate(45deg);
}

.menu.open .hamburger-bar-2 {
  opacity: 0;
}

.menu.open .hamburger-bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navigation Background Scaling */
.navigation__background.open {
  transform: scale(250);
}

/* Navigation Visibility When Open */
.navigation__nav.open {
  opacity: 1;
  width: 100%;
}

/* Menu Overlay for Full-Screen Effect */
.menu-overlay {
  background-color: #000000;
  color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Ensure the Hamburger Icon and Bars Transform Properly */
.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000000;
  background-color: #f0f2f5;
  border-radius: 50%;
}

.hamburger-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
  z-index: 1000000;
}

.hamburger-bar {
  background-color: #202020;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}

.hamburger-bar-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.hamburger-bar-3 {
  bottom: 0;
}

.menu {
    position: absolute;
    top: 43px;
    right: -30px;  
    height: 46px;
    width: 46px;
  }
  
  .menu-link {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000000;
    background-color: #f0f2f5;
    border-radius: 50%;
  }
  
  .hamburger-icon {
    position: absolute;
    width: 20px;
    height: 14px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 1px;
    z-index: 1000000;
  }
  
  .hamburger-bar {
    background-color: #202020;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all 0.25s ease-in-out;
  }
  
  .hamburger-bar-2 {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  
  .hamburger-bar-3 {
    bottom: 0;
  }
  
  nav {
    position: relative;
    /* height: 80%; */
    /* top: 100%; */
    /* transform: translateY(50%); */
    /* font-size: 50px; */
    /* font-family: "Poppins", serif; */
    /* font-weight: 400; */
    /* text-align: center; */
  }
  
  ul {
    list-style: none;
    padding: 0;
    display: inline-block;
    position: relative;
    /* margin: 25px; */
  }
  
  /* li {
    display: block;
    padding: 5px;
    position: relative;
    opacity: 1;
    margin: 5px;
  } */
  
  a {
    display: block;
    position: relative;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
  }
  
  .navigation__background {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    position: absolute;
    top: 53px;
    right: -20px;
    background-image: radial-gradient(#131313, #131313);
    z-index: 1000;
    transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .navigation__nav {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    opacity: 0;
    width: 0;
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  .navigation__list {
    position: absolute;
    top: 107%;
    left: 35%;
    transform: translate(5%, -175%);
    list-style: none;
    text-align: justify;
    width: 100%;
    z-index: 10;
  }

  .navigation__list2{
    position: absolute;
    top: 106.5%;
    left: 42%;
    transform: translate(-33%, -347%);
    list-style: none;
    text-align: justify;
    width: 100%;
  }
  
  /* ===== MAIN NAV1 ==== */
  .navigation__link:link,
  .navigation__link:visited {
    display: inline-block;
    font-family: 'Epilogue', sans-serif;
    font-size: var(--fluid-LrgMenuTxt);
    font-weight: 100;
    margin: 4rem 0rem 0rem 0rem;
    padding: 1rem 1rem 1rem 0rem;
    color: #F0F2F5;
    text-decoration: none;
    /* text-transform: uppercase; */
    background-image: linear-gradient( 120deg, transparent 0%, transparent 50%, #fff 50% );
    background-size: 230%;
    transition: all 0.4s;
  }
  .navigation__link:link span,
  .navigation__link:visited span {
    margin-right: 1rem;
    display: inline-block;
  }
  .navigation__link:hover,
  .navigation__link:active {
    background-position: 100%;
    color: #131313;
    transform: translateX(1rem);
  }
  
  .navigation__item {
    margin: -1rem;
  }

/* ===== MAIN NAV1 ==== */
.navigation__link2:link,
.navigation__link2:visited {
  display: inline-block;
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fluid-SmlMenuTxt);
  font-weight: 100;
  margin: 2rem 0rem 0rem 0rem;
  /* padding: 1rem 1rem 1rem 0rem; */
  color: #F0F2F5;
  text-decoration: none;
  /* text-transform: uppercase; */
  background-image: linear-gradient( 120deg, transparent 0%, transparent 50%, #fff 50% );
  background-size: 230%;
  transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
  margin-right: 1rem;
  display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #131313;
  transform: translateX(1rem);
}

.navigation__item {
  margin: -1rem;
}

  /* ===== IMG CURSOR HOVER ===== */

  .cursor {
    top: -100px;
    width: 50px;
    height: 50px;
    border: 1px solid #131313;
    border-radius: 50%;
    position: fixed;
    box-shadow: 2px -3px 11px -1px #131313;
    pointer-events: none;
    transition: all 0.1s linear, top 0ms linear, left 0ms ease-in-out;
    z-index: 15;
  }

/* .fetPrj1:hover .project_tags {
  color: #f0f2f5;
  position:relative;
  margin:0 0 0 1rem;
  background-color:#131313;
  border:.15rem solid #f0f2f5;
  display:flex;
  border-radius:2rem;
  justify-content:space-evenly;
}
 */



/* if i hover over the fetPrj1 then the image inside project-image 1 dissplays nothing
.fetPrj1:hover .project-image1 > img{
  display: none;
  opacity: 0;
} */


/* @media screen and (min-width:876px){
  .project-image1 img {
    display: flex;
    position: absolute;
    opacity: 1;
    transition: opacity 350ms ease-out; 
  }

  #catPic{
    display: none;
  }
  
} */

/* Rotating Circle Links */


  /* ======== FOOTER ======== */
  .footer{
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    background-color: #131313;
    padding: 2rem 0rem 2rem 0rem;
    justify-content: space-around;
    align-items: center;
  }

  .footer_col1,.footer_col2,.footer_col3{
    /* margin: 1rem 0rem 0rem 1rem; */
    /* display: flex; */
  }

.footer_logo{
    width: 6rem;
    margin: 0rem 0rem 2rem 0rem;
}

.footer_text{
  display: flex;
  font-size: var(--fluid-p);
  color: #F0F2F5;
  font-family: 'Epilogue', sans-serif;
  font-weight: 400;
  margin-bottom: 2rem;
  flex-direction: column;
  align-items: center;
}

.footer_copy{
  font-size: var(--fluid-p);
  font-weight: 200;
}

.footer_col3 a{ 
    text-decoration: none;
    color: #F0F2F5;
}

.footer_icons{
  display: flex;
  flex-direction: row;
  padding: 0rem 0rem 2rem 0rem;;
}

.footer_icons i{
  color: #F0F2F5;
  font-size: var(--fluid-menuIcons);
  margin: 1rem 2rem 1rem 1rem;
  padding: 1rem 0rem 2rem 0rem;
  cursor: pointer;
}

.iconsSpc{
  margin: 3rem 0rem 0rem 0rem;

}
/* ====== Footer Design ======= */
.whiteLineLeft::before{
content: '';
display: block;
background: #F0F2F5;
width: 1px;
height: 300px;
position: absolute;
left: 21px;
top: 38.5px;
border-radius: 5rem;
}

.whiteStar1::before {
content: '';
background-image: url(/assests/imgs/whitestar.svg);
color: #F0F2F5;
background-size: cover;
display: block;
width: 35.5px;
position: absolute;
left: 21px;
top: 333px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

.whiteLineRight::before{
content: '';
display: block;
background: #F0F2F5;
width: 1px;
height: 300px;
position: absolute;
right: 26px;
top: 38.5px;
border-radius: 5rem;
}

.whiteStar2::before {
content: '';
background-image: url(/assests/imgs/whitestar.svg);
color: #F0F2F5;
background-size: cover;
display: block;
width: 35.5px;
position: absolute;
right: -9px;
top: 333px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

.whiteLineBottomRight::before{
content: '';
display: block;
background: #F0F2F5;
width: 150px;
height: 1px;
position: absolute;
right: 29px;
top:333px;
border-radius: 5rem;
}

.whiteLineBottomLeft::before{
content: '';
display: block;
background: #F0F2F5;
width: 150px;
height: 1px;
position: absolute;
left: 29px;
top: 333px;
border-radius: 5rem;
}

.whiteCircleBottomLeft::before{
content: '';
background-size: cover;
display: block;
border-radius: 100%;
height: 25px;
width: 25px;
border: 1px solid #F0F2F5;
position: absolute;
left: 192px;
top: 333px;
transform: translate(-50%, -50%);
}

.whiteCircleBottomRight::before{
content: '';
background-size: cover;
display: block;
border-radius: 100%;
height: 25px;
width: 25px;
border: 1px solid #F0F2F5;
position: absolute;
right: 166px;
top: 333px;
transform: translate(-50%, -50%);
}


}

@media screen and (min-width:876px) {


.container {
  margin: 0 auto;
  padding: 0rem 0rem 0rem 0rem;
  overflow: hidden;
}

.menu{
position: absolute;
top: 43px;
right: 74px;
height: 46px;
width: 46px;
}

  .nav-container {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem;
}
.nav_logo {
  display:flex;
  column-gap:1rem;
  align-items:center;
  z-index: 10;
}
.logo_icon {
  width:var(--fluid-logoIcon);
}

.menu{
  position: absolute;
  top: 54px;
  right: 71px;
  height: 46px;
  width: 46px;
}

.navigation__background {
  top: 66px;
  right: 82px;
}

/* ======== HEADER CONTENT ======== */
.grid>div {
  width:100%;
  aspect-ratio:3;
}
.about_pageTitle1 {
  font-family:Epilogue,sans-serif;
  font-weight:200;
}
.introGretting{
  display: flex;
  margin: 2rem 0rem 0rem 0rem;
}

  .about_pageTitle1 {
    font-family:Epilogue,sans-serif;
    font-weight:200;
  }

  .about_pageTitle1v1{
    font-family: "IBM Plex Sans Arabic", sans-serif;
    /* font-family: "Noto Sans Arabic", sans-serif;  */
    font-weight: 250;
  }
.about_pageTitle2 {
  font-family:Epilogue,sans-serif;
  font-weight:300;
}
/* .home_headerContent h4::before {
  content:'';
  display:block;
  background:#131313;
  width:2px;
  height:15rem;
  position:absolute;
  left:-60.5px;
  top:-.5rem;
} */

.home_headerTitle {
  margin:0;
}

.home_headerBodyText{
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fluid-prjtag);
  font-weight: 700;
}

.name_outline {
  color:#f0f2f5;
  -webkit-text-stroke:0 #f0f2f5;
  text-shadow:0 1px 4px #131313;
}

.home_headerContent{
  position: relative;
  margin: 0 8rem 0 8rem;
  padding: 1rem;

}

.blackstar {
  position:relative;
}
.blackstar::before {
  content:'';
  background-image:url(  /imgs/BLACKSTAR.png);
  background-size:cover;
  display:block;
  width:7%;
  position:absolute;
  left:-74px;
  top:.4em;
  aspect-ratio:745/970;
  transform:translate(-50%,-50%);
}

.topHeaderGap::before{
  content: '';
  /* background-image: url(/assests/imgs/circleOutline.svg); */
  background-size: cover;
  display: block;
  border-radius: 100%;
  height: 500px;
  width: 500px;
  border: 1px solid #131313;
  position: absolute;
  left: -119px;
  top: -198px;
  transform: translate(-50%, -50%);
}

.blackstar::before{
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 54px;
  position: absolute;
  left: -25px;
  top: -3.6px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

.about_pageTitle2::before{
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 398px;
  position: absolute;
  left: -38px;
  top: 3.5px;
  border-radius: 5rem;
}

/* .about_pageTitle1::before{
  content: '';
  display: block;
  background: #131313;
  width: 250px;
  height: 2px;
  position: absolute;
  left: 106px;
  top: 27.5px;
  border-radius: 5rem;
} */

#dynamicBlackLine {
  content: '';
  display: block;
  background: #131313;
  height: 1px;
  position: absolute;
  left: 50px;
  top: -98.5px;
  border-radius: 5rem;
}


.blackstar2::before{
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 65.5px;
  position: absolute;
  right: -112.5px;
  top: -98.5px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

.rightBlackStroke::before{
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 213px;
  position: absolute;
  right: -47.5px;
  top: -95px;
  border-radius: 5rem;
}





/* ======== BODY CONTENT ======== */

.paprikaImgContainer{
  display: flex;
  justify-content: center;
}

.PaprikaPics{
  width: 100%;
  /* padding: 0rem 0.5rem 0rem 0rem; */
  /* height: 24vh; */
  /* margin: 0rem 0rem 1rem 0rem; */
}

.project_infomartion {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}



.project1_D1{
  font-weight: 700;
  /* text-decoration: underline 1px #131313; */
}

.project_comInfo1{
  display: flex;
  margin: 0rem 0rem 0.5rem 0rem;
  /* margin-top: 1rem; */
  /* margin-bottom: 1rem; */
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.video_Prototype{
width: 820px;
height: 740px;
}


.mockup_preview{
display: flex;
justify-content: space-around;
}

.emptyBlock{
  margin: 5rem 0rem 0rem 0rem;
}

.project_bodyContent{
margin: 2rem 3rem 2rem 3rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}

.project_infomartion {
margin: 2rem 0rem 2rem 0rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}

.analysis_Logos {
width: 7%;
margin: 1rem 0rem 1rem 0rem;
}


.project_contentWrapper{
  margin: 0rem 0rem 0rem 0rem;
}

.content_spacing{
margin: 0rem 0rem 5rem 0rem;
}

.content_subHeader{
font-size: var(--fluid-li);
}


.project_imgContainer{
  display: flex;
  justify-content: space-evenly;
}

.project_Imgs{
  width: 100%;
  margin: 2rem 0rem 2rem 0rem;
}

.analysis_Logos{
width: 7%;
margin: 1rem 0rem 1rem 0rem;
}

.keyTakeaways_list{
font-family: 'Zen Maru Gothic', serif;
font-size: var(--fluid-p);
font-weight: 400;
line-height: 2rem;
list-style-type: disc;
margin: 0rem 0rem 2rem 2rem;
}

.project_contentInfo{
  /* margin: 10rem 2rem 10rem 1rem; */
}


/* ======== PROJECTS DETAIL ======== */
/* .project_content{
background-color: #F0F2F5;
margin: 4rem 1rem 0rem 1rem;
z-index: 5;
position: relative;
border-radius: 1rem;
} */

.project_Buttons{
position: relative;
font-size: var(--fluid-b);
font-weight: 550;
border: solid 2px var(--black);
color: var(--black);
padding: 12px 33px;
/* border-radius: 3px; */
/* box-shadow: 5px 10px; */
text-align: center;
transition: all .2s ease-in-out;
line-height: 1;
margin: 1rem 0rem 2rem 0rem;
}


.project_Buttons:hover{
color: #F0F2F5;
background-color: #131313;
border-radius: 3px;
transform: scale(0.9);
}




/* ============ Body Content: About Me ============ */

/* ======== HEADER CONTENT ======== */
.grid>div {
  width:100%;
  aspect-ratio:3;
}

/* .align_Content {
  position: relative;
  left: 7%;
} */


/* .home_headerContent h4::before {
  content:'';
  display:block;
  background:#131313;
  width:2px;
  height:15rem;
  position:absolute;
  left:-60.5px;
  top:-.5rem;
} */
.home_headerTitle {
  margin:0;
}

.home_headerBodyText{
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fluid-prjtag);
  font-weight: 700;
}
.name_outline {
  color:#f0f2f5;
  -webkit-text-stroke:0 #f0f2f5;
  text-shadow:0 1px 4px #131313;
}

.home_headerContent{
  position: relative;
  margin: -2rem 5rem 0rem 5rem;
  padding: 1rem;
}

.blackstar {
  position:relative;
}
.blackstar::before {
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 65.5px;
  position: absolute;
  left: -54px;
  top: 0.4em;
  aspect-ratio: 745/970;
  transform: translate(-50%,-50%);
}





/* ======== BODY CONTENT ======== */

/* ====== PROJECT FILTER ======= */

*, *:before, *:after {
  box-sizing: border-box;
}

/* .nav-item:hover{
color: #F0F2F5;
border: solid 1px #131313;
background-color: #131313;
border-radius: 5px;
transition: .5s ease-in-out;
} */

/* ====== Footer Design ======= */
.whiteLineLeft::before{
content: '';
display: block;
background: #F0F2F5;
width: 1px;
height: 140px;
position: absolute;
left: 21px;
top: 25.5px;
border-radius: 5rem;
}

.whiteStar1::before {
content: '';
background-image: url(/assests/imgs/whitestar.svg);
color: #F0F2F5;
background-size: cover;
display: block;
width: 45.5px;
position: absolute;
left: 21px;
top: 150px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

.whiteLineRight::before{
content: '';
display: block;
background: #F0F2F5;
width: 1px;
height: 140px;
position: absolute;
right: 26px;
top: 25.5px;
border-radius: 5rem;
}

.whiteStar2::before {
content: '';
background-image: url(/assests/imgs/whitestar.svg);
color: #F0F2F5;
background-size: cover;
display: block;
width: 45.5px;
position: absolute;
right: -19px;
top: 150px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

.whiteLineBottomRight::before{
content: '';
display: block;
background: #F0F2F5;
width: 381px;
height: 1px;
position: absolute;
right: 29px;
top: 150px;
border-radius: 5rem;
}

.whiteLineBottomLeft::before{
content: '';
display: block;
background: #F0F2F5;
width: 380px;
height: 1px;
position: absolute;
left: 29px;
top: 150px;
border-radius: 5rem;
}

.whiteCircleBottomLeft::before{
content: '';
background-size: cover;
display: block;
border-radius: 100%;
height: 25px;
width: 25px;
border: 1px solid #F0F2F5;
position: absolute;
left: 420px;
top: 150px;
transform: translate(-50%, -50%);
}

.whiteCircleBottomRight::before{
content: '';
background-size: cover;
display: block;
border-radius: 100%;
height: 25px;
width: 25px;
border: 1px solid #F0F2F5;
position: absolute;
right: 398px;
top: 150px;
transform: translate(-50%, -50%);
}

}

/* ======== NAVIGATION FOR DESKTOP AT 1250 PX AND UP ========  */
@media screen and (min-width:1250px) {


/* ========== NAVIGATION ========= */
.nav-container{
position: relative;
display: flex;
justify-content:space-between;
align-items: center;
padding: .75rem;
}

.nav_logo{
display: flex;
column-gap: 1rem;
align-items: center;
margin: 0rem 0rem 0rem -1.5rem;
z-index: 10;
}

/* ========= TOP LEFT CORNER CIRCLE BORDER DESIGN ========= */
/* .home_headerContent h2::before{
content:'';
background-image: url("/assests/BorderDesignElements/3x/LargeWideCircle.png");
background-size: cover;
display: block;
width: 57%;
position: absolute;
left: 0px;
top: 0.4em;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
} */

.logo_icon{
width:var(--fluid-logoIcon);
}

/* ====== TITLE TEXT REVEAL ======= */

.appear1{
animation: type1 3s steps(75);
white-space:nowrap;
overflow:hidden;
}

.appear2{
animation: type2 3s steps(75);
white-space:nowrap;
overflow:hidden;
}

.appear3{
animation: type3 4s steps(75);
white-space:nowrap;
overflow:hidden;
}


@keyframes type1{
0%{
  width:0ch;
}

100%{
  width:27ch;
}
}

@keyframes type2{
0%{
  width:0ch;
}

100%{
  width:37ch;
}
}

@keyframes type3{
0%{
  width:0ch;
}

100%{
  width:37ch;
}
}

/* ====== TEXT REVEAL ======= */
.reveal p, .reveal img {
position: relative;
transform: translateY(150px);
opacity: 0;
/* transition: all ease 1s; */
}

/* ========== NAVIGATION ========= */
/* Hamburger Menu Toggle */
.menu.open .hamburger-bar-1 {
  transform: translateY(7px) rotate(45deg);
}

.menu.open .hamburger-bar-2 {
  opacity: 0;
}

.menu.open .hamburger-bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navigation Background Scaling */
.navigation__background.open {
  transform: scale(250);
}

/* Navigation Visibility When Open */
.navigation__nav.open {
  opacity: 1;
  width: 100%;
}

/* Menu Overlay for Full-Screen Effect */
.menu-overlay {
  background-color: #000000;
  color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Ensure the Hamburger Icon and Bars Transform Properly */
.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000000;
  background-color: #f0f2f5;
  border-radius: 50%;
}

.hamburger-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
  z-index: 1000000;
}

.hamburger-bar {
  background-color: #202020;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}

.hamburger-bar-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.hamburger-bar-3 {
  bottom: 0;
}


.menu {
position: absolute;
top: 64px;
right: 58px;
height: 46px;
width: 46px;
}

.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1000000;
background-color: #f0f2f5;
border-radius: 50%;
}

.hamburger-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
z-index: 1000000;
}

.hamburger-bar {
background-color: #202020;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}

.hamburger-bar-2 {
top: 0;
bottom: 0;
margin: auto;
}

.hamburger-bar-3 {
bottom: 0;
}

nav {
position: relative;
/* height: 80%; */
/* top: 100%; */
/* transform: translateY(50%); */
/* font-size: 50px; */
/* font-family: "Poppins", serif; */
/* font-weight: 400; */
/* text-align: center; */
}

ul {
list-style: none;
padding: 0;
display: inline-block;
position: relative;
/* margin: 25px; */
}

li {
/* display: block;
padding: 5px;
position: relative;
opacity: 1; */
/* font-weight: 500; */
/* list-style: square;
margin: 2rem 0rem 1rem 2rem; */

}

a {
display: block;
position: relative;
color: #ffffff;
text-decoration: none;
overflow: hidden;
}

.navigation__background {
height: 25px;
width: 25px;
border-radius: 50%;
position: absolute;
top: 62px;
right: 56px;
background-image: radial-gradient(#131313, #131313);
z-index: 1000;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.navigation__nav {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.navigation__list {
position: absolute;
top: 46%;
left: 96%;
transform: translateX(-50%) translateY(-50%);
list-style: none;
text-align: justify;
width: 100%;
z-index: 10;
}

.navigation__list2{
position: absolute;
top: 62%;
left: 67%;
transform: translateX(-50%) translateY(-50%);
list-style: none;
text-align: justify;
width: 100%;
}

/* ===== MAIN NAV1 ==== */
.navigation__link:link,
.navigation__link:visited {
display: inline-block;
font-family: 'Epilogue', sans-serif;
font-size: 100px;
font-weight: 100;
margin: 4rem 0rem 0rem 0rem;
padding: 1rem 1rem 1rem 0rem;
color: #F0F2F5;
text-decoration: none;
/* text-transform: uppercase; */
background-image: linear-gradient( 120deg, transparent 0%, transparent 50%, #fff 50% );
background-size: 230%;
transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
margin-right: 1rem;
display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
background-position: 100%;
color: #131313;
transform: translateX(1rem);
}

.navigation__item {
margin: -1rem;
}

/* ===== MAIN NAV1 ==== */
.navigation__link2:link,
.navigation__link2:visited {
display: inline-block;
font-family: 'Epilogue', sans-serif;
font-size: 35px;
font-weight: 100;
margin: 2rem 0rem 0rem 0rem;
padding: 0rem 0rem 0rem 0rem;
color: #F0F2F5;
text-decoration: none;
/* text-transform: uppercase; */
background-image: linear-gradient( 120deg, transparent 0%, transparent 50%, #fff 50% );
background-size: 230%;
transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
margin-right: 1rem;
display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
background-position: 100%;
color: #131313;
transform: translateX(1rem);
}

.navigation__item {
margin: -1rem;
}

/* ======= HEADER CONTENT ======= */

h1 {
position:relative;
box-sizing:border-box;
}


/* ====== BODY CONTENT ======= */

/* ===== IMG CURSOR HOVER ===== */

.cursor {
top: -100px;
width: 50px;
height: 50px;
border: 1px solid #131313;
border-radius: 50%;
position: fixed;
box-shadow: 1px -2px 11px -1px #131313;
pointer-events: none;
transition: all 0.1s linear, top 0ms linear, left 0ms ease-in-out;
z-index: 15;
}

/* .fetPrj1:hover .project_tags {
color: #f0f2f5;
position:relative;
margin:0 0 0 1rem;
background-color:#131313;
border:.15rem solid #f0f2f5;
display:flex;
border-radius:2rem;
justify-content:space-evenly;
}
*/



/* if i hover over the fetPrj1 then the image inside project-image 1 dissplays nothing
.fetPrj1:hover .project-image1 > img{
display: none;
opacity: 0;
} */

/* #catPic{
display: none;
} */




/* ======== FOOTER ======== */
.footer{
  display: flex;
  position: absolute;
  width: 100%;
  left: 0;
  background-color: #131313;
  padding: 2rem 0rem 2rem 0rem;
  justify-content: space-around;
  align-items: center;
}

.footer_col1,.footer_col2,.footer_col3{
  margin: 1rem 0rem 0rem 1rem;
  /* display: flex; */
}

.footer_logo{
  width: 8rem;
  margin: -2rem 0rem 0rem 0rem;
}

.footer_text{
display: flex;
font-size: var(--fluid-p);
color: #F0F2F5;
font-family: 'Epilogue', sans-serif;
font-weight: 400;
margin-bottom: 2rem;
flex-direction: column;
align-items: center;
}

.footer_copy{
font-size: var(--fluid-p);
font-weight: 200;
}

.footer_col3 a{ 
  text-decoration: none;
  color: #F0F2F5;
}

.footer_icons{
display: flex;
flex-direction: row;
padding: 0rem 0rem 2rem 0rem;;
}

.footer_icons i{
color: #F0F2F5;
font-size: var(--fluid-menuIcons);
margin: 1rem 2rem 1rem 1rem;
padding: 1rem 0rem 2rem 0rem;
cursor: pointer;
}

.iconsSpc{
margin: 3rem 0rem 0rem 0rem;
}

/* ====== Footer Design ======= */
.whiteLineLeft::before{
content: '';
display: block;
background: #F0F2F5;
width: 1px;
height: 140px;
position: absolute;
left: 21px;
top: 38.5px;
border-radius: 5rem;
}

.whiteStar1::before {
content: '';
background-image: url(/assests/imgs/whitestar.svg);
color: #F0F2F5;
background-size: cover;
display: block;
width: 50.5px;
position: absolute;
left: 21px;
top: 161px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

.whiteLineRight::before{
content: '';
display: block;
background: #F0F2F5;
width: 1px;
height: 140px;
position: absolute;
right: 26px;
top: 38.5px;
border-radius: 5rem;
}

.whiteStar2::before {
content: '';
background-image: url(/assests/imgs/whitestar.svg);
color: #F0F2F5;
background-size: cover;
display: block;
width: 50.5px ;
position: absolute;
right: -23px;
top: 161px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

.whiteLineBottomRight::before{
content: '';
display: block;
background: #F0F2F5;
width: 381px;
height: 1px;
position: absolute;
right: 29px;
top: 161px;
border-radius: 5rem;
}

.whiteLineBottomLeft::before{
content: '';
display: block;
background: #F0F2F5;
width: 380px;
height: 1px;
position: absolute;
left: 29px;
top: 161px;
border-radius: 5rem;
}

.whiteCircleBottomLeft::before{
content: '';
background-size: cover;
display: block;
border-radius: 100%;
height: 25px;
width: 25px;
border: 1px solid #F0F2F5;
position: absolute;
left: 420px;
top: 161px;
transform: translate(-50%, -50%);
}

.whiteCircleBottomRight::before{
content: '';
background-size: cover;
display: block;
border-radius: 100%;
height: 25px;
width: 25px;
border: 1px solid #F0F2F5;
position: absolute;
right: 398px;
top: 161px;
transform: translate(-50%, -50%);
}

}

@media screen and (min-width: 550px){
.project_infomartion {
  margin: 2rem 0rem 2rem 0rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
}
}

@media screen and (min-width: 600px){
.grid > div {
    width: 100%;
    aspect-ratio: 2;
}
}

@media screen and (min-width: 700px){
.grid > div {
    width: 100%;
    aspect-ratio: 2.3;
}
}

@media screen and (min-width: 800px){

.project_infomartion {
margin: 2rem 0rem 2rem 0rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}
}

@media screen and (min-width: 880px){
.grid > div {
width: 100%;
aspect-ratio: 2.5;
}

.menu {
position: absolute;
top: 53px;
right: 51px;
}

.navigation__background {
top: 63px;
right: 61px;
}

}

@media screen and (min-width: 900px){
.grid > div {
    width: 100%;
    aspect-ratio: 2.5;
}


}

@media screen and (min-width: 1000px){
.grid > div {
  width: 100%;
  aspect-ratio: 2.5;
}

.menu {
position: absolute;
top: 79px;
right: 72px;
}

.navigation__background {
top: 89px;
right: 82px;
}

}

@media screen and (min-width: 1080px){
.grid > div {
  width: 100%;
  aspect-ratio: 2.5;
}

.project_bodyContent{
margin: 2rem 10rem 2rem 10rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}

.project_infomartion {
margin: 2rem 10rem 2rem 10rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}

.menu {
position: absolute;
top: 78px;
right: 72px;
}

.navigation__background {
top: 88px;
right: 82px;
}

}


@media screen and (min-width: 1200px){
.grid > div {
    width: 100%;
    aspect-ratio: 3;
}
}

@media screen and (min-width: 1280px){
.grid > div {
    width: 100%;  
    aspect-ratio: 3.5;
}


.blackstar2::before {
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 65.5px;
  position: absolute;
  right: -112.5px;
  top: -106.5px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

#dynamicBlackLine {
  content: '';
  display: block;
  background: #131313;
  height: 1px;
  position: absolute;
  left: 50px;
  top: -106.5px;
  border-radius: 5rem;
}

.rightBlackStroke::before {
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 300px;
  position: absolute;
  right: -47.5px;
  top: -106px;
  border-radius: 5rem;
}

}

@media screen and (min-width: 1500px){
.grid > div {
    width: 100%;
    aspect-ratio: 3.5;
}

.blackstar2::before {
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 65.5px;
  position: absolute;
  right: -112.5px;
  top: -106.5px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

#dynamicBlackLine {
  content: '';
  display: block;
  background: #131313;
  height: 1px;
  position: absolute;
  left: 50px;
  top: -106.5px;
  border-radius: 5rem;
}

.rightBlackStroke::before {
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 300px;
  position: absolute;
  right: -47.5px;
  top: -106px;
  border-radius: 5rem;
}

.menu {
  position: absolute;
  top: 74px;
  right: 67px;
}

.navigation__background {
  top: 84px;
  right: 77px;
}

.project_Imgs {
  width: 80%;
  margin: 2rem 0rem 2rem 0rem;
}
}

@media screen and (min-width: 1680px){
.grid > div {
    width: 100%;
    aspect-ratio: 3.5;
}

.blackstar2::before {
  content: '';
  background-image: url(/assests/imgs/blackstar.svg);
  background-size: cover;
  display: block;
  width: 65.5px;
  position: absolute;
  right: -110.5px;
  top: -130.5px;
  aspect-ratio: 745/970;
  transform: translate(-50%, -50%);
}

#dynamicBlackLine {
  content: '';
  display: block;
  background: #131313;
  height: 1px;
  position: absolute;
  left: 50px;
  top: -130.5px;
  border-radius: 5rem;
}

.rightBlackStroke::before {
  content: '';
  display: block;
  background: #131313;
  width: 1px;
  height: 300px;
  position: absolute;
  right: -45.5px;
  top: -106px;
  border-radius: 5rem;
}

.menu {
position: absolute;
top: 74px;
right: 82px;
}
.navigation__background {
top: 84px;
right: 92px;
}


}

@media screen and (min-width: 1850px){
.grid > div {
  width: 100%;
  aspect-ratio: 3.5;
}

.blackstar2::before {
content: '';
background-image: url(/assests/imgs/blackstar.svg);
background-size: cover;
display: block;
width: 65.5px;
position: absolute;
right: -112.5px;
top: -106.5px;
aspect-ratio: 745/970;
transform: translate(-50%, -50%);
}

#dynamicBlackLine {
content: '';
display: block;
background: #131313;
height: 1px;
position: absolute;
left: 50px;
top: -106.5px;
border-radius: 5rem;
}

.rightBlackStroke::before {
content: '';
display: block;
background: #131313;
width: 1px;
height: 300px;
position: absolute;
right: -47.5px;
top: -106px;
border-radius: 5rem;
}

.menu {
position: absolute;
top: 95px;
right: 80px;
}

.navigation__background {
top: 105px;
right: 90px;
}

}