@import url("https://fonts.googleapis.com/css2?family=Alkatra&family=Poppins&family=Roboto:wght@700&display=swap");

/* setting anymore */
* {
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

/* navbar */
a.nav-item.nav-link.active {
  color: #4b5563;
}

a.nav-item.nav-link.active:hover {
  text-decoration: none;
}

a.nav-item.nav-link:hover {
  text-decoration: underline #000000;
}

a.download {
  background-image: linear-gradient(to right, #111827, #6b7280);
  font-weight: 500;
  transition: background-position 0.3s ease, transform 0.3s ease;
}

a.download:hover {
  transform: scale(0.9);
}

/* home */
p.text-me,
p.description {
  text-align: justify;
}

.wave {
  display: inline-block;
  transform-origin: 70% 70%;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.dot,
i.heart::before {
  animation: pulse 1s infinite;
}

a.navbar-brand {
  color: #111827;
  font-weight: 700;
  line-height: 36px;
  word-wrap: break-word;
}

/* whatsapp */
a.whatsapp {
  outline: 1px solid #27ae60;
  position: relative;
  display: inline-block;
}

a.whatsapp:hover,
a.whatsapp:focus {
  background-color: #27ae60;
}

a.whatsapp:active {
  background-color: #ffffff;
}

i.fa-whatsapp {
  color: #27ae60;
}

i.fa-whatsapp:hover {
  color: #ffffff;
}

a.whatsapp:hover i.fa-whatsapp,
a.whatsapp:focus i.fa-whatsapp {
  color: #ffffff;
}

/* instagram */
a.instagram {
  outline: 1px solid #e1306c;
  position: relative;
  display: inline-block;
}

a.instagram:hover,
a.instagram:focus {
  background-color: #e1306c;
}

a.instagram:active {
  background-color: #ffffff;
}

i.fa-instagram {
  color: #e1306c;
}

a.instagram:hover i.fa-instagram,
a.instagram:focus i.fa-instagram {
  color: #ffffff;
}

/* youtube */
a.youtube {
  outline: 1px solid #c0392b;
  position: relative;
  display: inline-block;
}

a.youtube:hover,
a.youtube:focus {
  background-color: #c0392b;
}

a.youtube:active {
  background-color: #ffffff;
}

i.fa-youtube {
  color: #c0392b;
}

a.youtube:hover i.fa-youtube,
a.youtube:focus i.fa-youtube {
  color: #ffffff;
}

/* linkedin */
a.linkedin {
  outline: 1px solid #3498db;
  position: relative;
  display: inline-block;
}

a.linkedin:hover,
a.linkedin:focus {
  background-color: #3498db;
}

a.linkedin:active {
  background-color: #ffffff;
}

i.fa-linkedin-in {
  color: #3498db;
}

a.linkedin:hover i.fa-linkedin-in,
a.linkedin:focus i.fa-linkedin-in {
  color: #ffffff;
}

.outer-container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  display: inline-flex;
}

.inner-container {
  width: 320px;
  height: 360px;
  position: relative;
  transition: transform 0.9s ease;
}

.inner-container:hover {
  transform: scale(0.8);
  filter: saturate(150%);
}

.background-box {
  width: 280px;
  height: 320px;
  left: 20px;
  top: 20px;
  position: absolute;
  background: #e5e7eb;
  border: 8px #ffffff solid;
}

.image-box {
  width: 280px;
  height: 320px;
  left: 0px;
  top: 0px;
  position: absolute;
  border: 8px #ffffff solid;
  object-fit: cover;
}

/* about */
h2.home,
h2.education,
h2.organization,
h2.skill,
h2.experience,
h2.project,
h2.certificate,
h2.contact,
h2.footer {
  position: relative;
  display: inline-block;
  color: #333;
  font-family: "Roboto", sans-serif;
}

h2.education:before,
h2.organization:before,
h2.skill:before,
h2.experience:before,
h2.project:before,
h2.certificate:before,
h2.contact:before,
h2.footer:before {
  text-align: center;
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  height: 5px;
  width: 0;
  transition: width 0.5s ease;
  border-radius: 70px;
  transform: translateX(-50%);
  background: #808588;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.inner-container {
  transform: translateX(0px);
  animation: float 6s ease-out infinite;
}

/* education */
h2.education:hover::before {
  width: 100%;
}

p.text-edu {
  text-align: justify;
}

.card-body>ul,
li {
  text-align: justify;
}

p.card-text>.date {
  color: #10b981;
  font-family: "Alkatra", sans-serif;
}

/* skill */
p.education,
p.organization,
p.skill,
p.project,
p.certificate,
p.contact,
p.experience,
p.footer {
  color: #4b5563;
}

h2.skill:hover::before {
  width: 100%;
}

@keyframes anim {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(-180deg);
  }
}

.anim:hover {
  animation: anim 1.5s forwards;
}

/* experience */
h2.experience:hover::before {
  width: 100%;
}

p.card-text>small.date {
  color: #10b981;
  font-family: "Alkatra", sans-serif;
}

img.bmc:hover,
img.mob:hover,
img.ina:hover,
img.hack:hover,
img.upb:hover,
img.smk:hover,
img.hima:hover,
img.kartar:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.link-project a {
  display: block;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
}

/* project  */
h2.project:hover::before {
  width: 100%;
}

.project {
  text-align: center;
}

#Streamed-Spotify,
#Mockup-SDN,
#Population-Percentages {
  padding-top: 2rem;
}

.date-project {
  color: #10b981;
  font-family: "Alkatra", sans-serif;
}

p.figma,
p.corel,
p.mobbin,
p.dribble,
p.chamjo,
p.lottie,
p.android,
p.java,
p.firebase,
p.php,
p.mysql,
p.ci4,
p.bt5,
p.vsc,
p.nb,
p.canva,
p.data,
p.clustering,
p.excel,
p.python,
p.anaconda,
p.regression,
p.tech,
p.framework,
p.database {
  outline: 1px solid #4b5563;
}

p.figma:hover,
p.corel:hover,
p.mobbin:hover,
p.dribble:hover,
p.chamjo:hover,
p.lottie:hover,
p.android:hover,
p.java:hover,
p.firebase:hover,
p.php:hover,
p.mysql:hover,
p.ci4:hover,
p.bt5:hover,
p.vsc:hover,
p.nb:hover,
p.canva:hover,
p.data:hover,
p.clustering:hover,
p.excel:hover,
p.python:hover,
p.anaconda:hover,
p.regression:hover,
p.tech:hover,
p.framework:hover,
p.database:hover {
  background-color: #1f2937;
  color: #ffffff;
}

p.vsc,
p.database,
p.clustering,
p.data,
p.regression {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.description li {
  text-align: justify;
}

/* certificate */
h2.certificate:hover::before {
  width: 100%;
}

.certificate {
  text-align: center;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(100%);
}

/* Contact and Form */
h2.contact:hover::before {
  width: 100%;
}

.contact {
  background-color: #fff;
  color: #999;
  margin: 2;
}

span.txt {
  color: #111827;
  font-size: 1.875rem;
  font-style: normal;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: normal;
}

.content-txt {
  color: #111827;
  font-family: Basic;
  font-size: 5.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 6.875rem;
}

.hear {
  color: #6b7280;
  font-family: Basic;
  font-size: 5.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 6.875rem;
}

.form-control {
  border: none;
  border: 1px solid #d9d9d9;
  border-radius: 0;
}

.form-control.item.error {
  border-color: #d93025;
}

.form-group .error-txt {
  font-size: 14.5px;
  color: #d93025;
  text-align: left;
  margin: 5px 0 10px;
  display: none;
}

.form-group.error .error-txt {
  display: block;
}

.form-control:active,
.form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #000;
}

.col-form-label {
  color: #000;
}

.btn form,
.form-control {
  height: 55px;
}

.btn form:active,
.btn form:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#message {
  resize: vertical;
}

input.btn-contact {
  background-image: linear-gradient(to right, #111827, #6b7280);
  width: 100%;
  transition: all 0.3s ease;
}

input.btn-contact:hover {
  transform: scale(0.98);
  transition-delay: 0.1s;
}

input.btn-contact:not(:hover) {
  transform: scale(1);
  transition-delay: 0.1s;
}

/* Footer */
h2.footer:hover::before {
  width: 100%;
}

a.email,
a.telep {
  text-decoration: none;
}

.text-footer {
  font-size: 12px;
}

a.git:hover,
a.fb:hover {
  opacity: 0.7;
  transform: scale(1.2);
}

.bi-c-circle~span {
  color: #10b981;
}

.gotopbtn {
  position: fixed;
  height: 50px;
  bottom: 50px;
  right: 30px;
}

.bi-copy {
  cursor: pointer;
}

footer {
  margin-top: -20px;
}

#link-github,
#link-fb {
  color: #000000;
}

/* Mode Dark */
[data-bs-theme="dark"] h2.home,
[data-bs-theme="dark"] h2.education,
[data-bs-theme="dark"] h2.organization,
[data-bs-theme="dark"] h2.skill,
[data-bs-theme="dark"] h2.experience,
[data-bs-theme="dark"] h2.project,
[data-bs-theme="dark"] h2.certificate,
[data-bs-theme="dark"] h2.footer,
[data-bs-theme="dark"] h2.contact {
  color: #ffffff;
}

[data-bs-theme="light"] h2.home,
[data-bs-theme="light"] h2.education,
[data-bs-theme="light"] h2.organization,
[data-bs-theme="light"] h2.skill,
[data-bs-theme="light"] h2.experience,
[data-bs-theme="light"] h2.project,
[data-bs-theme="light"] h2.certificate,
[data-bs-theme="light"] h2.footer,
[data-bs-theme="light"] h2.contact {
  color: #333;
}

[data-bs-theme="dark"] p.education,
[data-bs-theme="dark"] p.organization,
[data-bs-theme="dark"] p.experience,
[data-bs-theme="dark"] p.skill,
[data-bs-theme="dark"] p.project,
[data-bs-theme="dark"] p.certificate,
[data-bs-theme="dark"] p.contact,
[data-bs-theme="dark"] p.footer {
  color: #d1d5db;
}

[data-bs-theme="light"] p.education,
[data-bs-theme="light"] p.organization,
[data-bs-theme="light"] p.experience,
[data-bs-theme="light"] p.skill,
[data-bs-theme="light"] p.project,
[data-bs-theme="light"] p.certificate,
[data-bs-theme="light"] p.contact,
[data-bs-theme="light"] p.footer {
  color: #4b5563;
}

[data-bs-theme="dark"] span.content-txt,
[data-bs-theme="dark"] span.txt {
  color: #ffffff;
}

[data-bs-theme="light"] span.content-txt,
[data-bs-theme="light"] span.txt {
  color: #111827;
}

[data-bs-theme="dark"] label.col-form-label {
  color: #ffffff;
}

[data-bs-theme="light"] label.col-form-label {
  color: #000000;
}

[data-bs-theme="dark"] #contact {
  background-color: #212529;
}

[data-bs-theme="light"] #contact {
  background-color: #ffffff;
}

h2.contact,
p.contact {
  background-color: inherit;
}

[data-bs-theme="dark"] a.download,
[data-bs-theme="dark"] .btn-contact {
  color: #1f2937;
  background-image: linear-gradient(to right, #f9fafb, #10b981);
}

[data-bs-theme="light"] a.download {
  color: #ffffff;
}

[data-bs-theme="light"] .btn-contact {
  background-image: linear-gradient(to right, #111827, #6b7280);
}

[data-bs-theme="light"] input.btn.form {
  color: #ffffff;
}

[data-bs-theme="dark"] input.btn.form {
  color: #1f2937;
}

[data-bs-theme="dark"] span.hear {
  color: #10b981;
}

[data-bs-theme="dark"] span.email,
[data-bs-theme="dark"] span.telep {
  color: #9ca3af;
}

[data-bs-theme="light"] span.email,
[data-bs-theme="light"] span.telep {
  color: #000000;
}

[data-bs-theme="light"] .gotopbtn i {
  color: #000000;
}

[data-bs-theme="dark"] .gotopbtn i {
  color: #ffffff;
}

[data-bs-theme="dark"] i.git:before,
[data-bs-theme="dark"] i.fb:before {
  color: #ffffff;
}

[data-bs-theme="dark"] .link-project a {
  color: #ffffff;
}

[data-bs-theme="dark"] a.nav-item.nav-link.active:hover {
  text-decoration: none;
}

[data-bs-theme="dark"] a.nav-item.nav-link:hover {
  text-decoration: underline #ffffff;
}

[data-bs-theme="dark"] p.figma:hover,
[data-bs-theme="dark"] p.corel:hover,
[data-bs-theme="dark"] p.mobbin:hover,
[data-bs-theme="dark"] p.dribble:hover,
[data-bs-theme="dark"] p.chamjo:hover,
[data-bs-theme="dark"] p.lottie:hover,
[data-bs-theme="dark"] p.android:hover,
[data-bs-theme="dark"] p.java:hover,
[data-bs-theme="dark"] p.firebase:hover,
[data-bs-theme="dark"] p.php:hover,
[data-bs-theme="dark"] p.mysql:hover,
[data-bs-theme="dark"] p.ci4:hover,
[data-bs-theme="dark"] p.bt5:hover,
[data-bs-theme="dark"] p.vsc:hover,
[data-bs-theme="dark"] p.nb:hover,
[data-bs-theme="dark"] p.canva:hover,
[data-bs-theme="dark"] p.data:hover,
[data-bs-theme="dark"] p.clustering:hover,
[data-bs-theme="dark"] p.regression:hover,
[data-bs-theme="dark"] p.excel:hover,
[data-bs-theme="dark"] p.python:hover,
[data-bs-theme="dark"] p.anaconda:hover,
[data-bs-theme="dark"] p.tech:hover,
[data-bs-theme="dark"] p.framework:hover,
[data-bs-theme="dark"] p.database:hover {
  background-color: #e5e7eb;
  color: #000 !important;
}

/* Responsive Mobile */
@media only screen and (max-width: 390px),
only screen and (max-width: 360px),
only screen and (max-width: 414px) {

  html,
  body {
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  p.chamjo,
  p.regression,
  p.data,
  p.database,
  p.framework,
  p.clustering,
  p.lottie,
  p.excel,
  p.android {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-10px);
    }

    100% {
      transform: translateY(0px);
    }
  }

  .inner-container {
    transform: translateX(0px);
    animation: float 6s ease-out infinite;
  }

  h2.organization:hover::before {
    width: 60%;
  }

  .link-project a {
    margin-bottom: 15px;
  }

  h2.education:hover::before {
    width: 60%;
  }

  .inner-container {
    display: block;
    margin: auto;
  }
}