@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Parkinsans:wght@300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:wght@300&family=Raleway:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap');

body {
  font-family: Poppins;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.bartop {
  width: 100%;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background-color: white;
  z-index: 1000;
  margin-top: -20px;
}

.barin {
  width: 1280px;
  height: 56px;
  padding: 0px 32px 0px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.personal {
  width: 139.91px;
  height: 100%;
  gap: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.personalh1 {
  font-family: Sora;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
}

.ppp {
  width: 39.91px;
  height: 100%;
  padding: 2.64px 8.38px 2.64px 8.38px;
  gap: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(file\ \(3\).png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fortext {
  width: 88px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutmeskillsprojectparent {
  width: 437px;
  height: 24px;
  gap: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutmediv {
  width: 98px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutmeh1 {
  font-family: Sora;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration: none;
  color: black;
}

.aboutmeh1:hover {
  color: #2a94e2;
}

.skillsh1, .projecth1, .conactmeh1 {
  font-family: Sora;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration: none;
}

.conactmeh1 {
  cursor: pointer;
}

.resumediv {
  width: 153px;
  height: 56px;
  gap: 20px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resumebuttom {
  width: 153px;
  height: 56px;
  border: none;
  background-color: black;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resumeh1 {
  color: #FFFFFF;
  font-family: Sora;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-align: left;
}

.search-container {
  padding: 20px;
  border-radius: 5px;
  margin-right: -110px;
}

.search-button {
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-family: "Poppins", serif;
}

.search-input {
  width: 200px;
  padding: 10px;
  border: 0.5px solid #ccc;
  border-radius: 5px;
  font-family: "Poppins", serif;
}

.contactlinkbutton {
  text-decoration: none;
  color: black;
}

.contactlinkbutton:hover {
  color: #2a94e2;
}

.projecth11:hover, .aboutmeh11:hover {
  color: #2a94e2;
}

.projecth11, .aboutmeh11 {
  text-decoration: none;
  color: black;
}

.locations {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  padding-top: 100px;
}

.location {
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  position: relative;
  overflow: hidden;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.location:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  border-radius: 8px;
}

.location h3,
.location p {
  position: relative;
  z-index: 1;
  margin: 5px 0;
}

.location .price {
  font-weight: bold;
  font-size: 16px;
}

.location-1 {
  background-image: url('https://officebanao.com/wp-content/uploads/2024/03/modern-office-room-with-white-walls-1024x683.jpg');
}

.location-2 {
  background-image: url('https://www.arteil.com.au/wp-content/uploads/2024/02/arteil-open-plan-office-min-scaled.jpg');
}

.location-3 {
  background-image: url('https://plus.unsplash.com/premium_photo-1681487178876-a1156952ec60?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2ZmaWNlc3xlbnwwfHwwfHx8MA%3D%3D');
}

.location-4 {
  background-image: url('https://cdn.sanity.io/images/uqxwe2qj/production/62db3c671745e98cb27690dff96f8033d2bb7f35-2048x1010.jpg');
}

footer {

  color: #fff;
  padding: 20px 0;
  text-align: center;
}

footer .footer-container {
  max-width: 800px;
  margin: 0 auto;
}

footer img {
  height: 40px;
  margin-bottom: 20px;
}

footer nav a {
  margin: 0 15px;
  color: #fff;
  text-decoration: none;
}

footer nav a:hover {
  text-decoration: underline;
}

footer hr {
  border: 0;
  border-top: 1px solid #fff;
  margin: 20px 0;
}

.footer-links a {
  margin: 0 10px;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-social a {
  margin: 0 10px;
  font-size: 16px;
  color: #ccc;
  text-decoration: none;
}

.footer-social a:hover {
  color: #fff;
}

footer .footer-copyright {
  margin-top: 20px;
  font-size: 12px;
  color: #aaa;
}

.skillslink{
  text-decoration: none;
  color: black;
}

.skillslink:hover{
  color: #2a94e2;
}

.findlink{
  text-decoration: none;
  color: white;
}

.findlink:hover{
  color: #2a94e2;
}