:root {
  --body-background: #fff;
  --text-head: #000;
  --text-medium: rgba(0, 0, 0, 0.5);
  --after-color: #000;
  --primary-color: #fff;
  --main-color: rgb(26, 124, 200);

  --card-bg: #fff;


}

.darkmode {
  --body-background: #000;
  --text-head: #fff;
  --text-medium: rgba(255, 255, 255, 0.5);
  --after-color: rgba(0, 0, 0, 0.5);
  --primary-color: #000;
  --card-bg: #292a2d;

}

.pink-theme {
  --main-color: rgb(255, 92, 142) !important;
}

.blue-theme {
  --main-color: rgb(30, 77, 183) !important;
}

.purple-theme {
  --main-color: purple !important;
}

.lightBlue-theme {
  --main-color: rgb(26, 124, 200) !important;
}

.green-theme {
  --main-color: green !important;
}

.red-theme {
  --main-color: red !important;
}





.colors .pink {
  background-color: pink;
}

.colors .purple {
  background-color: purple;
}

.colors .blue {
  background-color: blue;
}

.colors .lightBlue {
  background-color: rgb(26, 124, 200);
}

.colors .green {
  background-color: green;
}

.colors .red {
  background-color: red;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf');
}

@font-face {
  font-family: 'es';
  src: url('../fonts/EsportGraphRegular-BWPRl.ttf');
}

@font-face {
  font-family: 'test';
  src: url('../fonts/name/Right-m2WL2.ttf');
}



.text-main {
  color: var(--main-color);
}

.btn-animation {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
  transition: 0.8s;

}

.btn-animation::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  background-color: var(--after-color);
  transition: 0.8s;

}

.btn-animation:hover::after {
  width: 100%;
  transition: 0.8s;

}

/* .btn-animation:hover {
  color: #fff;
  transition: 0.8s;

} */

body {
  margin: 0;
  padding: 0;
  background-color: var(--body-background);
  overflow-x: hidden !important;
  font-family: "Montserrat";

  overflow-y: hidden;

}



nav {
  height: 5rem;
  background-color: var(--body-background);
  box-shadow: 4px 4px 4px -2px var(--main-color);

  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.3),
    /* top shadow */
    0 4px 6px rgba(0, 0, 0, 0.3);
  /* bottom shadow */


}

.desktop-navbar .img-logo {
  width: 150px;
}

.desktop-navbar .links a {
  font-size: 18px;
  color: var(--text-head);
}

.desktop-navbar .links .activee {
  color: var(--main-color) !important;
  position: relative;
}

.desktop-navbar .links .activee::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--main-color) !important;
  transition: 0.8s !important;

}

.theme-btn {
  background-color: var(--main-color);
  padding: 10px 12px;
  border: none;
  color: #fff;

  text-wrap: nowrap;

}

.mobile-navbar {
  display: none;
}

.img-logo-mobile {
  width: 150px;
}

.mobile-navbar .open-menu {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  background-color: var(--main-color);
  color: #fff;
  font-size: 20px;
}

.mobile-navbar .close-menu {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  background-color: var(--main-color);
  color: #fff;
  font-size: 20px;
}

.mobile-navbar .nav-menu .head {
  height: 5rem;
  display: flex;
  align-items: center;
}



.mobile-navbar .nav-menu {
  position: fixed;
  height: fit-content !important;
  right: -100%;
  top: 0 !important;

  background-color: var(--body-background);
  width: 250px !important;
  z-index: 999;
  /* box-shadow: -2px 0px 4px 0px var(--main-color); */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 0px 0px 0px 10px;
  /* box-shadow: none !important; */
  border: none !important;
  transition: ease-in-out;
  transition: 0.7s;
  font-size: 22px;
}

.mobile-navbar .nav-menu a {
  color: var(--text-head);
}



.mobile-navbar .nav-menu ul li .activee {
  color: var(--main-color) !important;
  position: relative;
}

.mobile-navbar .nav-menu ul li .activee::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;

  height: 2px;
  background-color: var(--main-color) !important;
}

.w-fit {
  width: fit-content !important;
}






.icons button {
  height: 45px;
  width: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border-radius: 50%;
  border: none;
}

.icons a {
  color: #fff !important;

}

.face {
  background-color: #1877F2;
}

.whats {
  background-color: #25D366;
}

.git {
  background-color: #171515;
}

.linked {
  background-color: #0077B5;
}




@media only screen and (max-width: 1000px) {
  .desktop-navbar {
    display: none;
  }

  .mobile-navbar {
    display: block;
  }
}


@media only screen and (max-width: 600px) {
  .mobile-navbar {
    display: block !important;
  }

  .mobile-navbar .nav-menu {
    width: 250px !important;
  }
}






#loading {
  position: fixed;
  height: 100% !important;
  width: 100% !important;
  top: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  right: 0px !important;
  z-index: 64486489484789789679697;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--body-background);
}

.sk-chase {
  width: 100px;
  height: 100px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: var(--main-color);
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2) {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3) {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4) {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5) {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6) {
  animation-delay: -0.6s;
}

.sk-chase-dot:nth-child(1):before {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2):before {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3):before {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4):before {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5):before {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6):before {
  animation-delay: -0.6s;
}

@keyframes sk-chase {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot {

  80%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
  }

  100%,
  0% {
    transform: scale(1.0);
  }
}

/* width */
::-webkit-scrollbar {
  width: 10px;

}

/* Track */
::-webkit-scrollbar-track {
  background: var(--body-background);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main-color);
  height: 5px !important;
  border-radius: 5px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}




.progress-wrap {
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2) !important;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  background-color: var(--body-background);
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: var(--main-color);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.lightScrollIcon::after {
  color: #ecedf3 !important;
}

.progress-wrap:hover::after {
  opacity: 0;
}

.progress-wrap::before {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  opacity: 0;
  background-color: var(--main-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::before {
  opacity: 1;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: var(--main-color);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}





.home h1,
.home .p1,
.home .p2 {
  color: var(--text-head);
}






/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 270px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card:hover {
  cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip {
  transform: rotateY(180deg);
}

.flip-back {
  transform: rotateY(0deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  color: var(--text-head) !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: var(--card-bg);
  color: black;

}

/* Style the back side */
.flip-card-back {
  background-color: var(--card-bg);
  transform: rotateY(180deg);
}

.flip-card .line {
  background-color: var(--main-color);
  height: 3px;
  width: 200px;
}

.bg-main {
  background-color: var(--main-color);
}

.share {
  font-size: 12px;

}


.setting {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  top: calc(50vh - 25px);
  background-color: var(--main-color);
  color: #fff;
  border: none;
  font-size: 25px;
  height: 50px;
  width: 46px;
  border-radius: 0px 8px 8px 0px;
  z-index: 3;
}

.setting:hover {
  cursor: pointer;
}


.side-menu {
  position: fixed;
  left: 0;
  top: calc(50vh - 167.5px);
  width: 250px;
  height: 335px;
  background-color: var(--body-background);
  z-index: 5;
  transition: ease-in-out 0.5s;
  left: -100%;
  border-radius: 0px 15px 15px 0px;
  border: 1px var(--main-color) solid;
  color: var(--text-head);

}

.close-side-menu {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: none;
  background-color: var(--main-color);
  color: #fff;
  font-size: 18px;
}

.close-side-menu:hover {
  cursor: pointer;
}

.flip-card-inner {
  border: 1px var(--main-color) solid;
}

#dark {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background-color: #000;
  color: white;
  /* border: #fff 1px solid; */
  border: #fff 1px solid;

}

#light {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background-color: #000;
  color: #fff;
  border: var(--main-color) 4px solid;
}

.theme-dark-light {
  width: fit-content !important;
}

.colors div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.colors div:hover {
  cursor: pointer;
}


nav .logo h1 {
  font-size: 64px;
  font-weight: 400;
  font-family: "test";
  height: fit-content;
  width: fit-content;
}

body,
nav {
  transition: 0.5s;
}

.home {
  background-image: url("../img/light.png");
  background-repeat: no-repeat;
  background-position: center -80px;
  /* background-attachment: fixed !important; */
  background-size: auto;
  transition: 0.5s;
  min-height: 100vh !important;
}


.darkmode .home {
  background-image: url("../img/dark.png");
  background-repeat: no-repeat;
  background-position: center -60px;
  transition: 0.5s;

}


@media only screen and (max-width: 992px) {
  .home .content {
    margin-top: 100px !important;
  }

  .home {
    background-position: center -65px;
  }

  .darkmode .home {
    background-position: center -15px;
  }
}


.colors .red i {
  opacity: 0;
}

.colors .green i {
  opacity: 0;
}

.colors .purple i {
  opacity: 0;
}

.colors .blue i {
  opacity: 0;
}

.colors .pink i {
  opacity: 0;
}

.hr {
  background-color: var(--main-color);
  height: 1px;
  width: 100%;
}

/* Start skills Section */

.skills h2,
.projects h2 {
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--main-color);
  color: var(--text-head);
  font-weight: bold;
}

.skills h6,
.projects h6 {

  color: var(--text-head);
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card2 {
  background-color: transparent;
  width: 80px;
  height: 80px;
  /* border: 1px solid #f1f1f1; */

  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
  /* overflow: hidden; */
}

/* This container is needed to position the front and back side */
.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card2:hover .flip-card-inner2 {
  transform: rotateY(180deg);

}

/* Position the front and back side */
.flip-card-front2,
.flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  border-radius: 50% !important;
}


.flip-card-front2:hover,
.flip-card-back2:hover {
  cursor: pointer;
}


/* Style the front side (fallback if image is missing) */
.flip-card-front2 {
  background-color: #fff;
  color: black;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.flip-card-front2:hover {
  border: 3px var(--main-color) solid;
}

/* Style the back side */
.flip-card-back2 {
  background-color: #fff;
  color: white;
  transform: rotateY(180deg);
  border: 3px var(--main-color) solid;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.card-layer {
  background-color: #fff;
  opacity: 0.88 !important;
  border-radius: 50%;
}

.card-layer h6 {
  /* background-color: red; */
  margin: auto;
  font-weight: bolder;
  font-size: 12px;
  color: var(--main-color)
}

.swiper-wrapper {
  transition-timing-function: linear !important;

}

.swiper-slide-active .flip-card-inner2 {
  transform: rotateY(180deg);
}

.swiper {
  transition: none !important;
}

.swiper:hover {
  cursor: pointer;
}

.z {
  z-index: 3;
}

/* End skills Section */



/* projects start */
.projects .tabs {
  border: 2px solid var(--main-color);
  width: fit-content;
  overflow: hidden;

}

.projects .nav-link {
  border: none;
  background-color: var(--body-background) !important;
  color: var(--text-head);
  width: fit-content !important;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

.projects .tabs .active {
  border: none;
  background-color: var(--main-color) !important;
  color: #fff;
}


#pills-All-tab {
  border-right: 2px solid var(--main-color);
}

#pills-Brand-tab {
  border-right: 2px solid var(--main-color);
}

.project {
  width: 100%;
  height: 385px;
  background: var(--card-bg);
  /* border: 1px var(--main-color) solid; */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.project-image {
  height: 230px;
  overflow: hidden;

}

.project-image img {
  transition: 0.4s;
}

.project-image:hover img {
  transform: scale(1.1) rotate(-2deg);
  transition: 0.4s;
  cursor: pointer;
}

.project-image .layer {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: 0.5s;

}

.project-image .layer:hover {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: 0.5s;
  cursor: pointer;
}

.project .eye,
.project .code {
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* border: 1px var(--main-color) solid; */
  font-size: 14px;
  text-decoration: none;
  background-color: var(--main-color);
  color: #fff;
  font-weight: normal;
}



.div-new {
  width: 100%;
  position: relative;
  direction: ltr;
}

/* Reset default progress bar styles*/
progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Common progress bar styles */
progress[value] {
  background-color: transparent;
  border-radius: 50px;
  /* border: 1px solid #E5E6E1; */
  width: 100%;
  height: 5px;
}

progress[value]::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 50px;
}

progress[value]::-moz-progress-bar {
  background-color: transparent;
  border-radius: 50px;
}

/* Option 2*/
.progress {
  position: absolute;
}

#green-progress[value]::-webkit-progress-value {
  background: rgb(227, 79, 38);

}

#green-progress[value]::-moz-progress-bar {
  background: rgb(227, 79, 38);

}

#orange-progress[value]::-webkit-progress-value {
  background-color: rgb(41, 101, 241);
}

#orange-progress[value]::-moz-progress-bar {
  background-color: rgb(41, 101, 241);
}

#red-progress[value]::-webkit-progress-value {
  background-color: rgb(247, 223, 30)
}

#red-progress[value]::-moz-progress-bar {

  background-color: rgb(247, 223, 30)
}


.html {
  background: rgb(227, 79, 38);
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.css {
  background-color: rgb(41, 101, 241);
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.js {
  background-color: rgb(247, 223, 30);
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.text-html {
  color: var(--text-head);
}

.project .icons i {
  color: var(--text-head);
  transition: 0.4s;
  font-size: 20px;

}

.project .icons i:hover {
  color: var(--main-color);
  transition: 0.4s;
  cursor: pointer;
}

/* projects end */



@media only screen and (max-width: 992px) {
  .progress-wrap {
    position: fixed;
    right: 10px;
    bottom: 10px;
  }
}



/* contact */

.contact h2 {
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--main-color);
  color: var(--text-head);
  font-weight: bold;
}

.contact h6 {
  color: var(--text-head);

}

.contact input {
  height: 45px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--main-color);
}

.contact textarea {
  height: 150px;
  resize: none;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--main-color);

}

.contact textarea:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid green;

}

.contact input:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid green;

}

.contact button {

  border-radius: 8px;
  padding: 10px 20px;
  background-color: var(--main-color);
  color: #fff;
  border: none;

}

/* ******** */

footer {

  height: 50px;
  color: var(--text-head);
}

footer p {
  width: fit-content;
  height: fit-content;
}

::selection {
  color: #fff;
  background: var(--main-color);
}











.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50% !important;
}

.box {
  background-image: url('../img/me2.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 380px;
  width: 380px;
  border-radius: 50% !important;
  border: 8px solid var(--main-color);
  /* box-shadow: 10px 15px 10px 10px var(--main-color) !important; */
  /* animation: floatUpDown 2s ease-in-out infinite; */

}

/* 
@keyframes animate {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }

  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
} */
.down-arrow {
  color: var(--main-color);
  font-size: 35px;
  animation: floatUpDown 2s ease-in-out infinite;

}

.down-arrow:hover {
  cursor: pointer !important;
}

.floating-image {
  animation: floatUpDown 5s ease-in-out infinite;
}

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

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

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