index.css

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

body {
  background-color: #1f1f38;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
  scroll-behavior: smooth;
}

#navbar {
  line-height: 4rem;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  border-bottom: 0.5px solid #ffffff52;
  border-width: 80%;
  margin-bottom: 1rem;
}

#navbar ul {
  list-style: none;
}

#navbar ul li {
  margin: 0px 1rem;
}

#navbar ul li a {
  text-decoration: none;
  padding: 0.5rem 0.9rem;
}

.right {
  display: none;
}

.checkBtn {
  display: none;
}

#check {
  display: none;
}

.nav-col a:hover {
  border-radius: 0.4rem;
  color: #1f1f38;
  background-color: #fff;
}

/* Home Section */
.home-left,
.home-right {
  width: 48%;
  padding: 2rem;
}

.home-right {
  padding: 0;
}

.home-left h6,
h4 {
  color: hsl(240deg 8% 43%);
  margin: 1rem 0;
  margin-left: 3px;
  font-size: 1.2rem;
}

.home-left h1 {
  font-size: 2.5rem;
}

.home-right {
  position: relative;
}

.home-right img {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  border-radius: 62%;
  height: 100%;
}

.circle {
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  padding: 0.5rem;
  position: relative;
}

/* About Section */
.about-left,
.about-right {
  width: 48%;
}

.about-right {
  padding-right: 4rem;
}

.aboout-left {
  position: relative;
}

.about-left img {
  width: 90%;
  border-radius: 1rem;
}

.about-content p {
  margin-bottom: 2rem;
}

/* Skills */
#skills {
  margin-top: 3rem;
}

.skills-left {
  width: 50%;
}

.skills-left img {
  width: 70%;
}

.skills-right {
  width: 50%;
}

.skillss-container {
  width: 100%;
}

.html {
  width: 90%;
  height: 0.5rem;
  background-color: #e54c21;
  margin: 1rem 0;
  border-radius: 12px;
}

.css {
  width: 80%;
  height: 0.5rem;
  background-color: #00a0e4;
  margin: 1rem 0;
  border-radius: 12px;
}

.js {
  width: 65%;
  height: 0.5rem;
  background-color: yellow;
  margin: 1rem 0;
  border-radius: 12px;
}

.bootstrap {
  width: 50%;
  height: 0.5rem;
  background-color: #7952b3;
  margin: 1rem 0;
  border-radius: 12px;
}

.reactjs {
  width: 85%;
  height: 0.5rem;
  background-color: #61dafb;
  margin: 1rem 0;
  border-radius: 12px;
}

.learning {
  width: 100%;
  height: 0.5rem;
  background-color: #61dbfb;
  margin: 1rem 0;
  border-radius: 12px;
}

.bar {
  margin: 2rem 0;
}

.bar-content {
  position: absolute;
  bottom: 10px;
}

.left {
  left: 0;
}

.right-skills {
  right: 0;
}

/* Services Container */
.services-container {
  margin: auto;
  overflow: hidden;
  width: 80%;
}

.test-item {
  width: 20rem;
  margin: 0 2rem;
  background: #2c2c6c;
  border: 0.5px solid #2c2c6c;
  border-radius: 1.5rem;
  padding: 2rem 1rem;
  text-align: center;
  transition: all 0.5s;
  perspective: 1000px;
}

.test-item img {
  margin-bottom: 1.3rem;
  width: 80%;
}

.test-item h1 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.services li .fa-solid {
  font-size: 2rem;
  color: white;
  margin-bottom: 1.3rem;
}

.test-item p {
  line-height: 20px;
  font-size: 0.9rem;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.test-item:hover{
    background-color: transparent;

}

.test-item:hover .card-inner {
    transform: rotateY(180deg);
  }

.card-front,
.card-back {
    /* position: absolute; */
    display: flex;
    flex-direction: column;
    justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* .card-front {
  background: linear-gradient(160deg, #ff0055, #4337e7 30%, transparent);
  color: #fff;
} */
.card-back {
  /* background: linear-gradient(160deg, #ff0055, #4337e7 30%, transparent);
  color: #fff; */
  transform: rotateY(180deg);
}
/* Projects Section */
.projects-container {
  justify-content: center;
  align-items: center;
  margin: auto;
  flex-wrap: wrap;
}

.image-container {
    width: 100%;
    height: 10rem;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}
.image-container .p-two {
  width: 200px;
}

.p-three {
  background: url("project.png");
}

.p-four {
  background: url("project.png");
}

.projects-item {
  overflow: hidden;
  width: 20rem;
  margin: 1rem;
  background: #2c2c6c;
  border-radius: 1.5rem;
  padding: 2rem 1rem;
  text-align: center;
}

.projects-item h1 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.projects-item p {
  line-height: 20px;
  font-size: 0.9rem;
}

/* Contact me Section */
.form {
  display: flex;
  width: 80%;
  padding: 0 2rem;
  margin: auto;
  justify-content: center;
  align-items: center;
}

.form-div input,
textarea {
  border: 2px solid rgba(77, 181, 255, 0.4);
  border-radius: 0.5rem;
  width: 100%;
  margin: 0.5rem 0rem;
  font-size: 0.9rem;
  background: transparent;
  margin: 0.5rem 0rem;
  padding: 0.5rem 1rem;
  color: white;
  resize: none;
}

/* Footer Section  */
#footer {
  background-color: #4db5ff;
  padding: 2rem;
  padding-bottom: 4rem;
}

ul li {
  list-style: none;
  margin: 0 1rem;
}

ul li a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #1f1f38;
  transition: all 0.5s;
}

ul li a:hover {
  color: #fff;
}

.font-awesome {
  margin: 1.1rem auto;
}

.font-awesome li i {
  background-color: #1f1f38;
  padding: 0.6rem;
  border: 1px solid #1f1f38;
  color: #fff;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.font-awesome li i:hover {
  border: 1px solid #1f1f38;
  border-radius: 0.5rem;
  background: transparent;
  color: #1f1f38;
}

#footer p {
  color: #1f1f38;
  font-size: 0.9srem;
}

/* Scroll Top */
#scroll-top {
  background-color: #4db5ff;
  color: #151527;
  padding: 9px;
  border-radius: 9px;
  width: 35px;
  height: 35px;
  position: fixed;
  bottom: 1rem;
  right: 4%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2000;
}

/* Bottom Navigator */
#bottom {
  position: fixed;
  width: 100%;
  height: 6rem;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  bottom: 0rem;
}

#bottom .bottom-nav {
  height: 4rem;
  padding: 0 2rem;
  background-color: #151527;
  border-radius: 3rem;
  z-index: 1000;
  display: -webkit-inline-box;
}

#bottom .bottom-nav li {
  color: #fff;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  padding: 1rem;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
}

#bottom .bottom-nav ul a {
  text-decoration: none;
}

#bottom .bottom-nav li:hover {
  background-color: #4db5ff;
}

#bottom .bottom-nav li:active {
  background-color: #4db5ff;
}

.cpy-white {
  color: white;
}

/* Utility Classes */
.poppins {
  font-family: "Poppins", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

.flex {
  display: flex;
}

.s-between {
  justify-content: space-between;
}

.s-around {
  justify-content: space-around;
}

.s-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.f-col {
  flex-direction: column;
}

.p-relative {
  position: relative;
}

.t-white {
  color: #fff;
}

.bg-color {
  background-color: #1f1f38;
}

.t-center {
  text-align: center;
}

.my-2 {
  margin: 2rem 0;
}

.f-2 {
  font-size: 2rem;
}

.m-b-1 {
  margin-bottom: 1rem;
}

.w-50 {
  width: 50%;
}

.w-80 {
  width: 80%;
}

.h-50 {
  height: 50vh;
}

.mx-1 {
  margin: 0 1rem;
}

.m-top {
  margin-top: 1rem;
}

.m-auto {
  margin: auto;
}

.btn {
  margin-left: 0 0.5rem;
  font-size: 1rem;
  color: #4db5ff;
  cursor: pointer;
  padding: 0.75rem 1.2rem;
  border: 1px solid #4db5ff;
  border-radius: 0.4rem;
  background: transparent;
  font-family: "Poppins", sans-serif;
}

.buttons a,
#hireme {
  text-decoration: none;
}

.btn:hover {
  color: #1f1f38;
  border-color: #fff;
  background-color: #fff;
}

.live {
  color: #1f1f38;
  background-color: #4db5ff;
}