@font-face {
  font-family: 'HP';
  src: url('../public/Hpposter-xxDV.ttf') format('truetype');
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%);
  margin: 0;
}

body > .navbar{
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

nav{
  width: 100%;
}
.navbar{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 15px;
  background-image: linear-gradient(-20deg, #4e295d 0%, #4c1a68 100%);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.navbar a {
  color: #fcfafb;
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid #560d2559; /* Add border style and width */
  width: 80px;
  text-align: center;
  background-color: rgba(179, 29, 87, 0.765);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 4px, rgba(0, 0, 0, 0.23) 0px 3px 4px;
  letter-spacing: 1.5px;
}


.navbar a:hover {
  color: #ffffff; /* Change the color as needed */
}

.email{
  width: 40px;
}

.github, .linkedin{
  width: 40px;
  margin-right: 15px;
  
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath7920%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(207%2c 199%2c 248%2c 1)'%3e%3c/rect%3e%3ccircle r='21.5' cx='294.71' cy='253.37' fill='url(%26quot%3b%23SvgjsLinearGradient7921%26quot%3b)'%3e%3c/circle%3e%3ccircle r='42.04' cx='1309.86' cy='557.5' fill='url(%26quot%3b%23SvgjsLinearGradient7922%26quot%3b)'%3e%3c/circle%3e%3ccircle r='54.355' cx='0.53' cy='333.55' fill='url(%26quot%3b%23SvgjsLinearGradient7923%26quot%3b)'%3e%3c/circle%3e%3ccircle r='31.735' cx='1042.51' cy='458.62' fill='url(%26quot%3b%23SvgjsLinearGradient7924%26quot%3b)'%3e%3c/circle%3e%3ccircle r='47.695' cx='923.38' cy='75.4' fill='url(%26quot%3b%23SvgjsLinearGradient7925%26quot%3b)'%3e%3c/circle%3e%3ccircle r='19.725' cx='1187.84' cy='19.44' fill='url(%26quot%3b%23SvgjsLinearGradient7926%26quot%3b)'%3e%3c/circle%3e%3ccircle r='50.475' cx='664.98' cy='527.13' fill='url(%26quot%3b%23SvgjsLinearGradient7927%26quot%3b)'%3e%3c/circle%3e%3ccircle r='18.795' cx='448.31' cy='150.7' fill='url(%26quot%3b%23SvgjsLinearGradient7928%26quot%3b)'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath7920'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='294.71' y1='296.37' x2='294.71' y2='210.37' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7921'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(143%2c 141%2c 203%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1225.78' y1='557.5' x2='1393.94' y2='557.5' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7922'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(188%2c 191%2c 237%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-108.17999999999999' y1='333.55' x2='109.24' y2='333.55' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7923'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(218%2c 186%2c 227%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='979.04' y1='458.62' x2='1105.98' y2='458.62' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7924'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(188%2c 191%2c 237%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1018.77' y1='-19.989999999999995' x2='827.99' y2='170.79000000000002' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7925'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(199%2c 158%2c 223%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1187.84' y1='58.89' x2='1187.84' y2='-20.01' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7926'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(143%2c 141%2c 203%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='564.03' y1='426.18' x2='765.93' y2='628.08' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7927'%3e%3cstop stop-color='%2332325d' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(240%2c 118%2c 193%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='448.31000000000006' y1='188.29' x2='448.31000000000006' y2='113.10999999999999' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient7928'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='rgba(143%2c 141%2c 203%2c 1)' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
  margin: 0 auto;
}

.left-column {
  flex: 1; /* Take up available space */
  padding: 30px; /* Add spacing around the content */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'HP', sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 2px;
}

.right-column {
  flex: 1; /* Take up available space */
  padding: 30px; /* Add spacing around the content */
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 600;
}

.about{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  
  padding-bottom: 35px;
  padding-top: 30px;
}

.experience-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
}

.experience {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 20px;
  border: 2px black;
  background-image: linear-gradient(-20deg, #77438c 0%, #634376 100%);
  max-width: 980px;
  width: 100%;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.experience .description {
  display: none;
  padding-top: 10px;
  font-family: 'Lora', serif;
  font-size: 15px;
  color: white;
  background-color: #d7a9d753;
  line-height: 22px;
  text-align: center;
  padding: 10px;
  text-shadow: .7px 1px 1px rgba(37, 36, 36, 0.708);
}


.experience .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* Adjust the gap to your preference */
  padding: 10px;
  margin: 5px;
  font-family: 'Lora', serif;
}

.experience .role,
.experience .duration,
.experience .company {
  font-size: 17px;
  text-align: center;
  flex: 1;
  color: white;
  font-family: 'Lora', serif;
  text-shadow: .7px 1px 1px rgba(37, 36, 36, 0.831);
  font-size: 16px;
}

.experience .top-experience {
  display: flex;
  width: 95%;
  align-items: center;
}

.experience .bottom-experience {
  display: flex;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}

.title{
  font-family: 'HP', sans-serif;
  font-size: 55px;
  letter-spacing: 3.5px;
  margin-top: 0;
}


.work > section{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  max-width: 1200px;
  width: 100%;
  padding-bottom: 35px;
  padding-top: 30px;
}

.work h1 {
  text-align: center;
  margin-bottom: 35px;
}

.work p,
.work h3 {
  text-align: center;
}

.contact{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.projectimg {
  max-width: 100%;
  height: auto;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  padding-bottom: 35px;
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* Adjust the gap between cards */
  max-width: 1200px;
}


.card {
  border-radius: 5px;
  position: relative;
  width: 250px;
  height: 400px;
  text-align: left;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  transform-origin: center;
  backface-visibility: hidden;
  border: 1px solid transparent; /* Set the border color to transparent */
  margin: 10px; /* Add margin to create the colored margin */
  padding: 20px;
  font-family: 'Lora', serif;
}


.email{
  width: 40px;
  margin-left: 10px;
}

.github, .linkedin{
  width: 40px;
  margin-right: 15px;
}

.work h1 {
  text-align: center;
  margin-top: 5px;
}

.work p,
.work h3 {
  text-align: center;
}

.skills {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* background-color: #cfc7f8; */
  /* box-shadow: 1px 3px 6px rgba(125, 59, 137, 0.582); */
  margin-bottom: 30px;
  padding-bottom: 35px;
  /* padding-top: 30px; */
}


.icon-list {
  max-width: 1000px;
}

.skills .icon-list {
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center align items horizontally */
  align-items: center; /* Center align items vertically */
  color: #953CA2;
}

.skills .icon-list li {
  margin-bottom: 10px; /* Adjust spacing between items */
  max-width: calc(24% - 10px); /* Set the maximum width to the same value */
  font-size: 22px;
}

.skills .icon-list i {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.skill-card {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.3s;
  transform-style: preserve-3d;
  box-shadow: rgba(13, 10, 15, 0.514) 0px 0px 15px, rgba(81, 75, 80, 0.407) 0px 0px 20px;
}

.skill-icon {
  max-width: 60px; /* Set the maximum width for the image */
  max-height: 60px; /* Set the maximum height for the image */
}
.skill-card i {
  font-size: 48px; /* Adjust the icon size */
  color: rgb(149, 53, 171), 0, 255; /* Icon color */
  margin-bottom: 10px; /* Spacing between icon and text */
}

.skill-description {
  display: none; /* Hide description by default */
  font-size: 18px; /* Adjust description font size */
  color: #2A2A2D; /* Text color */
  position: absolute;
  bottom: 0; /* Adjust the position as needed */
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px;
}

/* Hover effect to show description */
.skill-card:hover {
  transform: rotateY(180deg); /* Flip the card on hover */
}

.skill-card .skill-description {
  display: block; /* Show description on hover */
  color: #fff; /* Text color on the back of the card */
  background: #8e08ac; /* Background color on the back of the card */
  transform: rotateY(180deg); /* Initially hide the description on the front */
  backface-visibility: hidden; /* Hide the backface to prevent flickering */
}


.contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 35px;
  padding-top: 30px;
}

.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* Adjust the gap between cards */
  max-width: 1200px;
}


.card {
  border-radius: 5px;
  position: relative;
  width: 250px;
  height: 400px;
  text-align: left;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  transform-origin: center;
  backface-visibility: hidden;
  border: 1px solid transparent; /* Set the border color to transparent */
  margin: 10px; /* Add margin to create the colored margin */
  padding: 20px;
}


.card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.card li {
  flex: 0 0 calc(33.333% - 20px); /* Set a maximum of 3 items per line */
  display: flex;
  font-weight: bold;
  margin-right: 10px; /* Add margin between items */
  padding-left: 10px;

}

.projects.card {
  border-radius: 5px;
  position: relative;
  width: 260px;
  height: 400px;
  text-align: left;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  transform-origin: center;
  backface-visibility: hidden;
  border: 1px solid transparent;
  margin: 10px;
  padding: 20px;
  box-shadow: rgba(94, 55, 117, 0.7) 0px 0px 16px, rgba(97, 17, 94, 0.412) 0px 0px 20px;
  overflow: hidden; /* Clip overflowing content */
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.projects.card .top-half {
  height: 35%; /* Adjust the height of the top half as needed */
  background-color: transparent; /* Make the background transparent */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden; /* Clip overflowing content */
}

.projects.card .bottom-half {
  height: 65%; /* Adjust the height of the bottom half accordingly */
  background: linear-gradient(to bottom, #d8b1e9cc 0%, rgba(240, 185, 238, 0.86) 100%); /* Pastel green to pastel teal */

  background-blend-mode: multiply;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-family: 'Lora', serif;
  font-size: 15px ;
  
}

.projects.card h1 {
  padding-top: 15px;
  margin-top: 0;
  color: #450657;
  text-shadow: #2a2a2d;
}

.projects.card img.projectimg {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space under the image */
  margin: 0 auto; /* Center the image horizontally */
  padding: 10px 0; /* Add padding for spacing */
}

.projects.card p {
  margin: 15px;
  color: black;
}



.button-github-container {
  display: flex;
  align-items: center; /* Optional: To vertically align the content */
  justify-content: center;
}
.button-container {
  margin-right: 18px;
}


.github-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work .github  {
  width: 28px;
}


.technologies-container {
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

}


.button-86 {
  all: unset;
  width: 80px;
  height: 20px;
  font-size: 15px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 8px;
  font-family: 'Lora', serif;
  font-weight: 500;
  margin-bottom: 12px;
}

.button-86::after,
.button-86::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.button-86::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #2a2a2d;
  border-radius: 10px;
}

.button-86::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #953ca2a8;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button-86:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button-86:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.button-86:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}


.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.github-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.github {
  width: 40px;
  margin-right: 10px; /* Adjust margin as needed */
  box-shadow: 1px 1px 2px 2px rgba(36, 36, 36, 0.47);
  border-radius: 50%;
}


.technologies-container {
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

}


.carla {
  border-radius: 50%;
  width: 240px;
}

p {
  color: black;
}

body, .navbar, .email, .github, .linkedin, .experience, .work, .skills, .contact, .projects.card {
  color: #2A2A2D; /* Dark gray text color */
}

.lottie{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; 
}

.project-title{
  font-family: 'Lora', serif;
  font-size: 20px;
  margin: 0;
}

.logos{
  margin-top: 25px;
  margin-bottom: 30px;
}

.hero2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70%;
  text-align: center;
  margin-top: 20px;
}
.hero2 h1 {
  font-family: 'HP', serif;
  font-size: 50px;
  margin-bottom: 5px;
  margin-top: 10px;
}
.hero,
.hero2 {
  display: flex;
  justify-content: center;
  align-items: center;
}