/** @format */

* {
  margin: 0;
}

body {
  background-color: rgb(0, 0, 33);
  color: white;
}

/* ! header section */
header nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  height: 80px;
  background-color: rgb(17, 5, 37);
}

header nav .left {
  font-size: 1.5rem;
}

header nav ul {
  display: flex;
  justify-content: center;
}

header nav ul li {
  list-style-type: none;
  margin: 0 23px;
}

header nav ul li a {
  text-decoration: none;
  color: white;
}

header nav ul li a {
  color: grey;
}

/* ! main section or home section */
/* ?================================================================================== */
/* !home section */
.home-section {
  margin: 110px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.home-section .home-heading {
  width: 40%;
  align-items: center;
  font-size: 3rem;
}

/* .home-section .home-image {
  perspective: 200px;
} */
.home-section .home-image img {
  width: 100%;
  height: 300px;
  border-radius: 40% 25%;
  /* transform: perspective(300px) rotateX(45deg); */
  transform: perspective(300px) rotateY(30deg);
  /* transform: perspective(300px) rotateX(200px); */
  /* transform: rotateY("200px"); */
}

.home-section .element {
  color: purple;
  font-weight: bolder;
}

/* ?================================================================================== */
/* ! about section */
.aboutsection {
  /* padding-top: 50px; */
  padding-left: 120px;
  width: 100%;
}

.aboutsection .intro {
  color: grey;
}

.aboutsection .about-section {
  display: flex;
  padding-top: 40px;
  padding-bottom: 100px;
  align-items: center; /* Align items vertically */
}

.aboutsection .image {
  flex: 0 0 30%; /* Set image column width */
}

.aboutsection .image img {
  width: 100; /* Make the image fill its container */
  border-radius: 10%; /* Make the image circular */
  padding-left: 30px;
  margin-left: 50px;
}

/* .aboutsection .content { */
/* flex: 0 0 50%; Set content column width */
/* padding-left: 20px; Add left padding for spacing */
/* padding-right: 30px;
  margin-left: 40px;
  margin-right: 40px;
} */

.aboutsection .content {
  flex: 0 0 60%; /* Set content column width */
  padding-left: 20px; /* Adjust left padding for spacing */
  padding-right: 30px;
  margin: 0 auto; /* Center content horizontally */
  text-align: justify; /* Justify text content */
  line-height: 1.5; /* Increase line spacing for readability */
}

.aboutsection .content p {
  font-size: 18px; /* Set font size for paragraph text */
  color: #e6d6d6; /* Set text color */
}

.aboutsection .about-section h2 {
  margin-bottom: 10px;
}

.aboutsection .about-section h5 {
  margin-bottom: 20px;
}

.aboutsection .btn-primary {
  background-color: #007bff; /* Blue primary button color */
  color: #fff; /* White button text color */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  text-decoration: none; /* Remove default button underline */
}

.aboutsection .btn-primary:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

.aboutsection .download-cv {
  margin-top: 20px;
  text-align: center;
}

.aboutsection {
  opacity: 0;
  transform: translateX(-100%); /* Move 100% to the left */
  transition: all 0.5s ease-in-out; /* Set transition for smooth animation */
}

/* ?================================================================================== */
/* ! work section */
.work-experience {
  max-width: 80vw;
  margin: auto;
  height: 80vh;

  h1 {
    font-size: 1.9rem;
  }
}

.work-experience .text-gray {
  color: gray;
}

.work-experience .box {
  background: white;
  width: 30vw;
  height: 2px;
  margin: 56px 0;
  display: flex;
}

.work-experience .box .vertical {
  height: 93px;
  width: 1px;
  background-color: white;
  margin: 0 140px;
}

main hr {
  border: 0;
  background-color: red;
  height: 4px;
  margin: 3px;
  margin: 14px 18px;
}

.image-top {
  width: 23px;
  position: relative;
  top: -32px;
  left: -9px;
}

.vertical-title {
  /* provides the image */
  position: relative;
  top: 75px;
  width: 250px;
  font-size: 20px;
}
.vertical-desc {
  position: relative;
  top: 85px;
  color: gray;
  font-size: 11px;
  width: 700px;
}

hr {
  border: 0;
  background-color: red;
  height: 4px;
  /* margin: 3px; */
  margin: 14px 18px;
}

/* ?================================================================================== */
/* ! skills section */
/* Style for the skills section */
.skills-section {
  /* margin-top: 30px; */
  padding-left: 120px;
  padding-bottom: 50px;
}

/* Style for skill categories */
.skill-category {
  margin-bottom: 20px;
}

.skill-category h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Style for skill badges */
.skill-badge {
  display: inline-block;
  background-color: #3498db; /* Badge background color */
  color: #ffffff; /* Text color */
  padding: 8px 12px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  font-size: 14px;
}

/* Style for skill levels */
.skill-level {
  font-weight: bold;
  margin-left: 5px;
}

/* ?================================================================================== */
/* ! projects section */
.projects {
  margin-top: 30px;
  margin-bottom: 70px;
  padding-left: 120px;
  padding-bottom: 50px;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.project {
  width: 300px;
  margin: 10px;
  position: relative; /* Needed for hover effects */
}

.project img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Scales image to fit container */
}

.project-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  color: white;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth opacity transition */
}

.project:hover .project-info {
  opacity: 1; /* Show project info on hover */
}

.project h3,
.project p {
  padding: 20px;
  margin: 0;
}

/* ?================================================================================== */
/* ! footer section */
footer {
  background-color: rgb(31, 29, 31);
  color: white;
}

footer .footer {
  display: flex;
  padding: 20px 60px;
  justify-content: space-evenly;
}

footer .footer a {
  text-decoration: none;
  color: yellow;
}

footer ul {
  list-style: none;
}

footer .footer-rights {
  text-align: center;
  color: gray;
  padding: 12px 0;
}

.footer > div {
  width: 80px;
}

/* !------------------------------------------------------------------ */
/* ! arrow section */
#scroll-top-button {
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(
    143,
    126,
    126,
    0.5
  ); /* Semi-transparent black background */
  color: white; /* Text color for the icon */
  display: flex; /* Allow centering the icon */
  justify-content: center; /* Center the icon horizontally */
  align-items: center; /* Center the icon vertically */
  opacity: 0; /* Initially hide the button */
  transition: opacity 0.5s ease; /* Smooth fade-in animation */
}
#scroll-top-button.show {
  /* Add a class for showing the button */
  opacity: 1;
}

#go-to-top-text:hover {
  padding-right: 70px; /* Space between arrow and text on hover */
  color: white;
  opacity: 1; /* Make text fully opaque on hover */
  transition: all 0.2s ease; /* Combine transitions for smoother effect */
}

/* !--------------------------contact----------------------------------- */
.contact {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 50px;
  background-color: rgb(0, 0, 33);
  color: white;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #0c052c;
  color: whitesmoke;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.contact-form h2 {
  margin-bottom: 20px;
  text-align: center;
}
.contact-form label {
  display: block;
  margin-bottom: 5px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}
.contact-form button {
  padding: 10px 20px;
  text-align: center;
  border: none;
  background-color: #28a745;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.contact-form button:hover {
  background-color: #218838;
}