@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

/* FONTS-START */
@font-face {
  font-family: sticka-text;
  src: url("/assets/fonts/sitka-small.ttf") format("truetype");
}
@font-face {
  font-family: "SegoeUI";
  src: url("/assets/fonts/Segoe\ UI.woff") format("woff");
}
/* FONTS-END */

/* INTRO-START */
.introduction {
  min-height: 100vh;
  position: relative;
}
#welcome-img {
  width: 100%;
  height: 100vh;
  vertical-align: middle;
  pointer-events: none;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  /* ANIM */
  animation: ease-in 1.25s opacity;
  animation-fill-mode: forwards;
  opacity: 0;
  filter: blur(3px);
}
.link--icon:hover {
  transition: 0.25s ease;
  transform: scale(1.2);
}
.link--icon {
  transition: 0.25s ease;
  font-size: 25px;
  color: #000;
  text-decoration: none;
}
.social-link:nth-last-child(1) {
  margin-right: 0px;
}
.last-update {
  font-family: "SegoeUI";
  font-size: 1rem;
  font-weight: bold;
  color: #261d1d;
  cursor: pointer;
}
.social-link {
  text-decoration: none;
  margin-right: 15px;
}
.social-links {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  animation: ease-in 0.5s top-bottom;
  animation-fill-mode: forwards;
  animation-delay: 3.2s;
  transform: translateY(-150px);
  opacity: 0;
}
.my-intro {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 55vh;
}
.welcome-message {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

  position: absolute;
  top: 50%;
  transform: translateY(-65%);
}
#w__message {
  font-size: calc(8vw + 25px);
  font-family: Noto Sans JP;
  padding-bottom: 20px;
  /* ANIM */
  animation: ease-in 0.75s top-bottom;
  animation-fill-mode: forwards;
  animation-delay: 1.25s;
  transform: translateY(-150px);
  opacity: 0;
}
#w_descpition {
  /* ANIM */
  animation: ease-in 0.75s bottom-top;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  transform: translateY(150px);
  opacity: 0;
  font-family: "Quicksand";
  font-size: 2.75rem;
  color: #000;
}
@keyframes opacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.75;
  }
}
@keyframes top-bottom {
  from {
    transform: translateY(-150px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes bottom-top {
  from {
    transform: translateY(150px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes left-right {
  0% {
    transform: translateY(50px);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
    color: #fff;
  }
}
/* INTRO-END */

#bottom-section {
  display: none;
  position: relative;
  background: radial-gradient(
    circle,
    rgba(69, 85, 93, 0.1) 0%,
    rgba(98, 121, 152, 0.1) 90%
  );
}
/* NAV-START */
.nav-fixed {
  position: fixed;
  top: 0;
  opacity: 1;
  z-index: 2;
  /* ANIM */
  transform: transformY(-50px);
  animation: ease-in 1s nav-f-top-bottom;
  animation-fill-mode: forwards;
}
@keyframes nav-f-top-bottom {
  from {
    opacity: 0;
    transform: transformY(-50px);
  }
  to {
    transform: transformY(0);
    opacity: 1;
  }
}
.navbar-section {
  flex-direction: revert;
  width: 100%;
  font-size: 16.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: rgb(9 12 46 / 89%);
}
.navbar-section > a:hover {
  cursor: pointer;
  background-color: #00000028;
}
.nav-item__selected,
.nav-item__selected:hover {
  color: #000 !important;
  background-color: #fff !important;
}
.nav-item:hover {
  transition: all 0.45s ease;
  color: #000;
  background-color: #fff !important;
}
.home-nav {
  background-color: #fff !important;
  color: #000 !important;
  font-weight: bold;
}
.nav-item {
  padding: 15px;
  font-family: SegoeUI;
  color: #fff;
}
.nav-toggle-mob {
  position: absolute;
  right: 10px;
  display: none;
  top: 17px;
}
.navbar-section-response {
  flex-direction: column;
  background-color: rgb(9 12 46 / 89%) !important;
  backdrop-filter: blur(5px);
  /* height: 10vh; */
  animation: nav-tb 0.35s;
}
.nav-item-response {
  display: block;
  padding: 15px 0px !important;
  visibility: visible !important;
  pointer-events: all !important;
  width: 80% !important;
  /* ANIM */
  animation: navitem-tb 0.35s;
  animation-fill-mode: forwards;
}
@keyframes navitem-tb {
  from {
    font-size: 0px;
  }
  to {
    font-size: 16.5px;
  }
}
@keyframes nav-tb {
  from {
    height: 100px;
  }
  to {
    height: 100%;
  }
}
.nav-item-response:hover {
  background-color: transparent !important;
  color: #fff;
}
.contact-nav {
  padding-left: 10px;
}
/* NAV-END */

/* PROJECT-START */
.project {
  padding: 2rem 3rem 4.5rem 4rem;
  background-color: #1c1c1c1f;
  background: linear-gradient(to top, #00000042, #bfd0ff1f);
}
.project-header > h3 {
  padding-bottom: 10px;
  /* ANIM-project-header-h3*/
  animation: ease-in 0.25s project-header-h3;
  animation-fill-mode: forwards;
  transform: translateY(-100px);
  opacity: 0;
}
@keyframes project-header-h3 {
  from {
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-header {
  display: flex;
  justify-content: center;
  /* width: 50vh; */
  width: 25vw;
  margin: auto;
  padding: 10px 0;
  font-family: SegoeUI;
  font-size: 2.5rem;
  letter-spacing: 5px;
  /* border-bottom: 5px solid rgb(16 13 13 / .100); */
  /* ANIM-project-header */
  animation: ease-in 0.6s project-header;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes project-header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.project-card-nav {
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80%;
  margin: auto;
}
.card-nav__selected {
  background-color: #0000003d !important;
}
.card-nav:hover {
  transition: all ease 0.25s;
  background-color: #0000000a;
}
#project-bg-nav {
  transition: 0.3s ease-in transform;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0000003d;
  transform: translateX(0px);
  top: 0;
}
.card-nav {
  position: relative;
  font-size: 1.2rem;
  transition: all ease 0.25s;
  background-color: rgba(255, 255, 255, 0.205);
  padding: 10px 15px;
  color: #000;
  cursor: pointer;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: center;
  width: 100%;
  /* ANIM */
}
@keyframes card-nav {
  from {
    /* transform: translateY(50px); */
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.project-card {
  color: #fff !important;
  background-color: #0039a6e6 !important;
  transition: 0.5s ease-in box-shadow;
  padding: 0px 2px 10px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #8193b382;
  border-radius: 5px;
  animation: ease-in 0.5s card-nav;
  animation-fill-mode: forwards;
  opacity: 0;
  flex-direction: column;
  color: #000;
  cursor: pointer;
  border: 1px solid #0000003b;
}
.project-cards {
  justify-content: center;
  gap: 10px;
  display: grid;
  grid-template-columns: 235px repeat(auto-fill, 235px);
}
#project-des > div {
  text-align: center;
}
#project-des {
  width: calc(100% - 23px);
  font-family: "SegoeUI";
  font-size: 18px;
  position: absolute;
  top: 20px;
  left: 10px;
  font-weight: bold;
  opacity: 0;
  transition: 0.2s ease-in;
  z-index: 0;
  text-align: left;
}
#tag {
  box-shadow: 0px 2px 3px 0px #000;
  transition: 0.5s ease-in;
  transition-property: opacity, transform;
  position: absolute;
  top: 0;
  right: 0;
  color: #000;
  padding: 5px;
  background: #fff;
  border-radius: 35px;
  margin: 10px;
  border: 1px solid #0000006b;
  font-family: fangsong;
  text-transform: capitalize;
}
/* card-hover-start */
.project-card:hover > .project-detail > #card-img {
  transition: 0.5s ease-in;
  transform: scale(1.05);
  opacity: 0.075;
  border-radius: 10px;
}
.project-card:hover > .project-detail > #tag {
  transition: 0.5s ease-in;
  opacity: 0;
}
.project-card:hover > .project-detail > #project-des {
  font-weight: bold;
  top: 50%;
  transform: translateY(-70%);
  transition: 0.5s ease-in;
  opacity: 1;
}
/* card-hover-end */
#read-more {
  transition: 0.5s ease-in;
  opacity: 0;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  animation: ease-in read-more-tb 0.5s;
}
@keyframes read-more-tb {
  from {
    top: 5px;
  }
  to {
    top: 50px;
  }
}
.project-card:hover > .project-name > #read-more {
  opacity: 1;
  animation: ease-in read-more-bt 0.5s;
}
@keyframes read-more-bt {
  from {
    top: 50px;
  }
  to {
    top: 5px;
  }
}
#project-name {
  transition: 0.5s ease-in;
  opacity: 1;
}
.project-card:hover > .project-name > #project-name {
  transition: 0.5s ease-in;
  opacity: 0;
}
.project-card:hover {
  transition: 0.5s ease-in;
  box-shadow: 0px 0px 10px 4px #00000085;
}
.project-name {
  position: relative;
  transition: 0.5s ease-in;
  display: block;
  width: 100%;
  margin-top: 5px;
  font-size: 1rem;
  border-radius: 5px;
  padding: 5px 0;
  font-family: "system-ui";
  font-weight: 500;
}

/* PROJECT-END */

/* CONTACT-START */
#contact-start {
  color: #fff;
  background-color: #00021be8;
  padding: 20px;
  min-height: calc(100vh - 100px);
  /* ANIM */
  animation: ease-in 0.25s contact-start;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes contact-start {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#contact-start {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-header {
  display: flex;
  justify-content: center;
  width: 35vw;
  margin: auto;
  padding: 10px 0;
  /* border-bottom: 5px solid rgb(16 13 13 / .100); */
}
.contact-header > h3 {
  text-align: center;
  font-family: SegoeUI;
  font-size: 2.5rem;
  letter-spacing: 5px;
}
.contact-form {
  padding: 10px;
}
.form-inp:focus,
.contact-form > form > input:nth-last-child(1):focus {
  outline: transparent;
}
.form-inp {
  color: #fff;
  font-family: SegoeUI;
  display: flex;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  font-size: 1rem;
  border: none;
  background-color: rgb(112 112 112 / 26%);
}
#submit-btn:hover {
  transition: 0.25s ease-in;
  color: #000;
  background-color: #fff;
}
#submit-btn:active {
  transform: translateY(5px);
}
#submit-btn {
  font-weight: bold;
  transition: 0.25s ease-in;
  font-size: 20px;
  border-radius: 5px;
  width: 15vh;
  padding: 10px 15px;
  margin: 10px 0;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  cursor: pointer;
  color: #fff;
  background-color: #707070;
  background: transparent;
  font-size: 18px;
  border-radius: 5px;
  border: 1px solid #ffffff5c;
}
.contact-form > form {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  width: 45vw;
}
/* CONTACT-END */

/* FOOTER-START */
.footer > p::first-letter {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 22px;
}
.footer {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  background-color: #2b2b2b;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
}
/* FOOTER-END */

/* PROJECT-MODAL-START */
.overlay__transparent {
  transition: 1s ease-in;
  backdrop-filter: blur(1.5px);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: #000000a3;
}
.overlay-prop {
  display: none;
}
.p-abs-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-modal {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  width: calc(50vw + 100px);
  opacity: 0;
  /* ANIM */
  animation: project-modal-tb 0.5s;
  animation-fill-mode: forwards;
}
.project-modal-hide {
  opacity: 0;
  animation: project-modal-tb 0.5s;
  animation-fill-mode: forwards;
}
@keyframes project-modal-bt {
  from {
    top: 50%;
  }
  to {
    top: 25%;
    opacity: 1;
  }
}
@keyframes project-modal-tb {
  from {
    opacity: 0;
    top: 25%;
  }
  to {
    opacity: 1;
    top: 50%;
  }
}
.bd-14 {
  border: 1px solid #00000014;
}
.project-modal__nav {
  display: flex;
  font-size: 20px;
  font-family: "Times New Roman", Times, serif;
}
.demo-nav-btm {
  transition: 0.25s ease-in;
  transform: translateX(100%);
}
.project-m-nav:hover {
  cursor: pointer;
  background-color: aliceblue;
}
.project-m-nav {
  width: 50%;
  text-align: center;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#p-nav-anim {
  transition: 0.25s ease-in;
  padding-bottom: 10px;
  width: 50%;
  border-top: 2px solid #000000cf;
}
.project-details,
.project-demo {
  transition: 1s ease;
  background-color: rgb(0 0 0 / 4%);
  border-radius: 5px;
  opacity: 1;
  padding: 10px;
}
.project-demo {
  text-align: center;
}
.project-demo > img {
  max-height: calc(20vw + 100px);
  max-width: calc(47vw + 100px);
}
.project-hide {
  transition: 0.5s ease;
  opacity: 0;
  display: none;
}
.p-tabs {
  padding: 10px 0;
}
.link-area > a:hover {
  text-decoration: underline;
}
.link-area > a {
  text-decoration: none;
  color: #000;
}
.link-area {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-tabs > div {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-family: "SegoeUI";
  font-weight: 600;
}
.p-tabs > p {
  font-size: 14px;
  padding: 0px 0px 10px 5px;
  font-family: sans-serif;
  font-weight: bold;
  color: #0000009c;
}
.description-area {
  max-height: 30vh;
  overflow: auto;
}
.project-modal > button:focus {
  outline: transparent;
}
.project-modal > button {
  float: right;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 15px;
  border: 1px solid #0001;
  margin: 10px 0px 0px 0px;
  border-radius: 5px;
  cursor: pointer;
}
/* PROJECT-MODAL-END */

.mukul {
  background-color: #fff;
}

/* Experience-start */
.word-exp__title > h3 {
  text-align: center;
  letter-spacing: 5px;
  padding: 10px 0;
  font-family: SegoeUI;
  font-size: 2.5rem;
  letter-spacing: 5px;
  /* border-bottom: 5px solid rgb(16 13 13 / .100); */
  width: 40vw;
}
#work-experience {
  display: flex;
  min-height: calc(100vh - 400px);
  padding: 2rem;
  flex-direction: column;
  justify-content: center;
  justify-content: center;
  align-items: center;
  color: #000;
  background-color: #bfd0ff1f;
}
.work-exp {
  display: flex;
}
.experience:not(:last-child) {
  margin-bottom: 3%;
}
.dark-mode:not(img) {
  transition: 0.5s ease-in;
  filter: invert(0.95) hue-rotate(180deg);
}
.experience:hover {
  transition: all 0.25s;
  box-shadow: 5px 5px 5px 0px #999;
}
.experience {
  transition: box-shadow 0.25s;
  display: grid;
  grid-template-columns: 150px 2fr;
  grid-gap: 10px;
  background-color: #e3e3e354;
  padding: 20px 10px;
  border-radius: 5px;
  border: 1px solid #88888817;
  margin: 10px;
  box-shadow: 1px 1px 5px 0px #999;
  border-bottom: 1px solid #8888885e;
}
.year {
  font-size: 16px;
  grid-row: 1/4;
}
.new-year {
  margin-top: 4%;
  font-size: 13px;
  background: #fff9;
  height: 30px;
  text-align: center;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #00000033;
  position: relative;
  font-family: "Quicksand";
  font-weight: bold;
}
.timeline {
  border-left: 5px solid #02027b;
  border-radius: 10px;
  grid-template-columns: 0px 1fr;
  border-left-style: double;
}
#work-experience,
#about-section {
  border-bottom: 1px solid #d8d8d873;
}
.work-data {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.work-exp {
  display: grid;
  grid-template-columns: 0px 1fr;
  width: 70%;
  margin: auto;
  padding: 30px 10px;
}
.experince-projects > ul {
  padding-left: 2rem;
}
.experince-projects > ul > li {
  list-style-type: circle;
  color: #010000b8;
}
.experince-projects > ul > li:nth-child(1) {
  list-style-type: none;
  color: #000;
  text-decoration: underline;
  line-height: 1rem;
}
.experince-projects {
  width: 100%;
}
.company > h2 {
  /* text-decoration: underline; */
  line-height: 50px;
  padding-bottom: 10px;
  text-align: center;
  font-family: "Quicksand";
  font-size: 1.7rem;
}
.description {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #7593a705;
  background-color: #7593a70a;
  font-family: SegoeUI;
  font-size: 1rem;
  font-weight: bold;
}
#about-section {
  padding: 4vw;
  background-color: #1c1c1c1f;
  background: linear-gradient(to bottom, #0705053a, #bfd0ff1f);
}
.about-description {
  display: flex;
  height: 25rem;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 0;
  max-width: 75%;
  margin: auto;
}
.word-exp__title > h3:first-child {
  margin: auto;
}
.about-d__img {
  height: 100%;
  padding: 1rem;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-d__img > img {
  width: 80%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 5px 5px 12px 0px #888;
}
.about-data {
  padding: 1rem;
  flex: 1;
  font-family: "Noto Sans JP";
  font-size: 1.15rem;
  font-weight: bold;
}
/* Experience-end */
.start-icon > svg {
  transition: 0.25s ease-in;
}
.start-icon:hover > svg {
  transition: 0.25s ease-in;
  transform: rotateZ(90deg);
}
.start-icon {
  transition: 1s ease-in;
  cursor: pointer;
  position: absolute;
  bottom: 100px;
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(-200px);
  animation: start-icon 1.5s;
  animation-fill-mode: forwards;
  animation-delay: 2.75s;
}
#project-demo {
  cursor: pointer;
}
.demo-fullscreen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw !important;
  max-width: none !important;
  max-height: none !important;
  height: 70vh !important;
  cursor: pointer !important;
}
iframe #rc-anchor-container {
  max-width: 300px;
  background: #00021be8;
  color: #fff;
  border: none;
}
@keyframes start-icon {
  from {
    transform: translateY(-200px);
  }
  to {
    transform: translateY(0px);
    opacity: 1;
    transform: rotateZ(270deg);
  }
}
/* MEDIA-QUERIES */
@media only screen and (max-width: 500px) {
  .navbar-section {
    font-size: 13px;
  }
  .navbar-section > a {
    flex: 1;
    text-align: center;
  }
  .project-nav {
    width: 100%;
    text-align: center;
  }
  #rc-anchor-container {
    max-width: 240px;
  }

  .card-img > img {
    height: 200px !important;
  }
}
@media only screen and (max-width: 700px) {
  .experince-projects {
    font-size: 0.8rem;
  }
  .card-nav {
    font-size: 1.1rem;
  }
  /* INTRO-START */
  .social__linkedin,
  #twitter-link {
    font-size: 21.5px;
    width: 34px;
    height: 34px;
  }
  /* INTRO-START-END */

  /* CONTACT-START */
  .contact-form form {
    width: 15rem;
  }
  .contact-form > form > input:nth-last-child(1) {
    font-size: 25px;
    width: 15vh;
  }
  /* CONTACT-END */

  .new-year {
    height: 50px;
    grid-row: 1/1;
  }
  .experience {
    grid-template-columns: 80px 2fr;
  }
  .company > h2 {
    line-height: 30px;
    font-size: 1.2rem;
  }
  .work-exp {
    width: 90%;
  }
  h3 {
    font-size: 1.2rem !important;
    width: 200px;
    text-align: center;
  }
  #w_descpition {
    font-size: 1.5rem;
  }

  /* ABOUT */
  .about-description {
    display: block;
    padding: 1.7rem 0;
    height: auto;
  }
  .description {
    grid-column: 1/3;
  }
  .about-data {
    font-size: 0.95rem;
    text-align: left;
    padding: 5px 1rem;
  }
  .about-d__img > img {
    width: 100%;
  }
  /* ABOUT_END */
}
/*  */

.card {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
  border-radius: 3.5px;
  transition: 0.3s ease-in all;
}
.card:hover > .card-title {
  color: #000;
  font-weight: bold;
  transition: 0.2s ease-in all;
}
.card:hover {
  box-shadow: 1px 1px 7px 5px #888;
  background-color: #fff;
  transition: 0.2s ease-in all;
}
.card-img > img {
  width: 100% !important;
  border-radius: 3.5px 3.5px 0 0;
  height: 250px;
}
.card-img {
  max-width: 235px;
  display: flex;
  flex: 0.8;
}
.card-category {
  position: absolute;
  left: 5px;
  background: #fff;
  top: 5px;
  padding: 5px;
  border-radius: 17px;
  font-size: 13px;
  font-family: sans-serif;
  box-shadow: 1px 1px 6px 1px #777;
}
.card-title {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
  border-top: 1px solid #88888878;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex: 0.2;
}
@media only screen and (max-width: 550px) {
  .project-cards {
    display: flex;
    flex-direction: column;
  }
  .card {
    display: block;
  }
  .card-img {
    max-width: initial;
    max-height: 200px;
  }
}
/* MEDIA-QUERIES-END */