@charset "UTF-8";
@font-face {
  font-family: "Ebrima";
  src: url("../fonts/ebrima/ebrima.ttf") format("truetype");
}
@font-face {
  font-family: "Gabriola";
  src: url("../fonts/gabriola/gabriola.ttf") format("truetype");
}
@font-face {
  font-family: "Adobe Arabic";
  src: url("../fonts/adobe_arabic/AdobeArabicRegular.otf") format("opentype");
}
html {
  height: 100%;
  color: #fff;
  overflow-x: hidden;
  max-width: 100%;
}
html, html body, html h1, html h2, html h3, html p, html nav, html a, html section {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
html body {
  font-family: Arial, sans-serif;
  color: #1e1610;
  background-color: #f3ede8;
  transition: background-color 0.3s ease, color 0.3s ease;
}
html body.dark-theme {
  background-color: #17110c;
  color: #efe7e1;
}

#home {
  background: black;
  z-index: -15;
}

.bgimage {
  height: 100vh;
  background-size: cover;
  position: relative;
}

#resume {
  background: #17110c;
  z-index: 100;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.navbar {
  position: fixed;
  width: 100%;
  background-color: rgba(15, 10, 10, 0.5);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 0;
  height: 70px;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(250, 150, 50, 0.92);
}
.navbar a, .navbar span {
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
}
@media (prefers-reduced-motion: no-preference) {
  .navbar .name {
    animation: move-bg 10s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: 400% 0;
    }
  }
}
.navbar .name {
  font-weight: bold;
  font-size: 34px;
  background: linear-gradient(90deg, #e27f39, #a58eb1, #e27f39) 0 0/400% 10%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.navbar .left-nav {
  display: flex;
  align-items: center;
}
.navbar .tagline {
  font-size: 14px;
}
.navbar .role {
  font-size: 18px;
  font-weight: bold;
}

.hire-me {
  z-index: 1001;
  position: fixed;
  left: 50%;
  background-color: #e27f39;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  top: -70px;
  transform: translateX(-50%);
  transition: background-color 0.3s ease, top 0.3s ease;
}
.hire-me:hover {
  background-color: #a58eb1;
  top: -30px;
}

table, td, th {
  border-collapse: collapse;
  transition: 0.4s;
}

td {
  width: 40px;
  text-align: center;
  background-color: #222;
}
td:not(:last-child) {
  border-right: 1px solid black;
}

th {
  background-color: #FFF;
  color: #fff;
}

iframe, video {
  display: block;
  margin: auto;
}

video {
  height: 50px;
}

footer {
  background-color: #a8b2c3;
  height: 37px;
  width: 100%;
  color: #fff;
  bottom: 0;
  left: 0;
  padding-top: 23px;
  text-align: center;
}
footer p {
  margin-left: 200px;
  font-size: 17px;
}

/* services section css */
.servicesText.card {
  height: 280px;
  cursor: pointer;
}

.servicesIcon {
  font-size: 36px;
  text-align: center;
  width: 100%;
}

.card-title {
  text-align: center;
}

.card:hover .servicesIcon {
  color: #008000;
}

.servicesText:hover {
  border: 1px solid #008000;
}

@media only screen and (max-width: 700px) {
  .bannerTitle img {
    position: relative;
    margin-left: 0;
  }
  aside {
    height: 41px;
    width: 100%;
    border: 0;
    border-bottom: 3px solid #4db8ff;
  }
  aside a {
    display: inline;
    padding-top: 10px;
    line-height: 42px;
  }
  section {
    margin-left: 0;
  }
  section .bannerTitle {
    padding-top: 60px;
  }
  td {
    width: 20px;
  }
  .navigation {
    display: none;
  }
  footer p {
    margin-left: 0;
    font-size: 15px;
  }
}
section {
  margin-bottom: 40px;
  padding: 20px;
}
section h2 {
  color: #e27f39;
  margin-bottom: 20px;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
}
.project-container .project {
  flex-basis: calc(33.333% - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #f8f9fa;
  border-radius: 5px;
  overflow: hidden;
}
.project-container .project:nth-child(3n) {
  margin-right: 0;
}
.project-container .project .project-img {
  width: 100%;
  height: auto;
}
.project-container .project h3 {
  color: #a58eb1;
}
.project-container .project p {
  padding: 0 15px;
}
.project-container .project .project-link {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: #e27f39;
  color: white;
  text-decoration: none;
  border-top: 1px solid #f8f9fa;
}
.project-container .project .project-link:hover {
  background-color: #ca651e;
}

.portrait {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

.skills-list {
  list-style: none;
  padding: 0;
}
.skills-list li {
  margin-bottom: 5px;
}
.skills-list li:before {
  content: "→ ";
  color: #a58eb1;
}

form {
  display: flex;
  flex-direction: column;
}
form input, form textarea {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
}
form button {
  padding: 10px;
  background-color: #e27f39;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
form button:hover {
  background-color: #ca651e;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    translate: 0px 0px;
  }
  50% {
    transform: rotate(360deg);
    translate: 400px 400px;
  }
  100% {
    transform: rotate(720deg);
    translate: 0px 0px;
  }
}
.gradient-4 {
  left: 5%;
  top: -40%;
  z-index: -12;
  --size: 1200px;
  --speed: 45s;
  --easing: cubic-bezier(0.8, 0.4, 0.4, 0.6);
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 10));
  background-image: linear-gradient(hsla(20, 82%, 5%, 0.5), hsl(252, 82%, 5%));
  animation: rotate var(--speed) var(--easing) infinite;
  border-radius: 70%;
  position: absolute;
}

.gradient-3 {
  top: 42%;
  left: 37%;
  z-index: -9;
  --size: 400px;
  width: 500px;
  height: 200px;
  filter: blur(83.3333333333px);
  background-image: linear-gradient(hsla(45, 85%, 25%, 0.9), hsla(252, 85%, 25%, 0.9));
  border-radius: 70% 70% 70% 70%/90% 90% 70% 70%;
  position: absolute;
}

.gradient-2 {
  bottom: 10%;
  right: 0;
  z-index: -9;
  --size: 400px;
  --speed: 45s;
  --easing: cubic-bezier(0.6, 0.2, 0.2, 0.6);
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(hsla(158, 82%, 57%, 0.85), hsl(252, 82%, 50%));
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  position: absolute;
}

.gradient-1 {
  --size: 300px;
  --speed: 120s;
  --easing: cubic-bezier(0.6, 0.4, 0.2, 0.8);
  z-index: -9;
  top: 12%;
  left: -10%;
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(hsla(170, 82%, 50%, 0.85), hsl(260, 82%, 57%));
  animation: rotate var(--speed) var(--easing) infinite;
  border-radius: 60% 70% 70% 60%/50% 10% 70% 70%;
  position: absolute;
}

@media (min-width: 720px) {
  .gradient {
    --size: 500px;
  }
}

/*# sourceMappingURL=style.css.map */