/* 
--- 01 TYPOGRAPHY SYSTEM

- Font size system (px) :
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 /  98

- Font weights :

Default : 400
Medium: 500
Semi-Medium: 600
Bold: 700


- Line heights: 



- Letter spacing




--- 02 COLORS

Primary : #0c8599;

-Tints : #3d9dad; #9eced6;
-Shades: 
-Accents: 
-Greys: 
#6f6f6f;




#333


--- 05 SHADOWS


--- 06 BORDER RADIUS



--- 07 WHITE SPACE

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

 */

html {
  font-size: 62.5%;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* width: 100vw; */
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
  /* font-family: sans-serif; */
  font-size: 1.8rem;
  color: #05353d;
  background-color: #f8f9fa;
}
.container {
  /* position: relative; */

  flex: 1;
  width: 80%;
  margin: 0 auto;
  background-color: #f8f9fa;
  transition: all 0.5s;
}

/* * EMAIL */
.email-flex {
  display: flex;
  padding: 4rem 8rem;
  gap: 4rem;
}
.email-send-form {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.email-form-text-section {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.email-send-container {
  background-image: linear-gradient(to left, #0c8599, #fff);

  width: 60%;
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  gap: 3rem;
  z-index: 1;
  overlay: auto;
  border-radius: 11px;
  border: none;
  box-shadow: 0 6px 3px rgba(124, 218, 255, 0.2);
  z-index: 2;
}
input:focus {
  border: 2px solid #0c8599;
  outline: none;
}
.email-overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.hidden {
  display: none;
}

.input-email-field,
.send-email-btn {
  font-weight: 500;
  border-radius: 11px;
  border: 2px solid transparent;
  box-shadow: 0 6px 3px rgba(124, 218, 255, 0.2);
  padding: 1rem 2rem;
}
.input-email-field:hover {
  border: 2px solid #0c8599;
}
.close-email-form {
  color: #f4fdfe;
  background-color: transparent;
  position: absolute;
  right: 0;
  font-weight: 600;
  font-size: 2rem;
  border: none;
  padding: 1rem 1rem;
  top: 0;
  right: 0;
  transition: all 0.3s;
}
.close-email-form:hover {
  color: #05353d;
  cursor: pointer;
  font-size: 2.4rem;
}

.input-email-field-message,
.input-email-field-user-info {
  box-sizing: border-box;
  align-self: center;
  line-height: normal;
  width: 100%;
  background-color: #f4fdfe;
  padding: 1rem;
  border: 2px solid #76e2f3;
}
.input-email-field-message {
  height: 15rem;
}
.send-email-btn {
  background-color: #76e2f3;
  align-self: center;
  font-weight: 700;
  transition: all 0.3s;
  border: 2px solid transparent;
}
.send-email-btn:hover {
  cursor: pointer;
  transform: scale(1.2);
  border: 2px solid #0c8599;
}

.has-input-error {
  border: 2px solid red;
}

.section-title-img {
  background-image: linear-gradient(to right, #0c8599, #fff);
  height: 30rem;
}
.grid {
  display: grid;
  height: 12rem;
  grid-template-columns: 200px 1fr;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 15rem);
}
.section-feed {
  margin-bottom: 2.4rem;
}

/* SECTION- PROFILE */

.profile-img-section {
  height: 16rem;
  width: 16rem;

  border: 5px solid #fff;
  border-radius: 50%;
  background-image: url(pics/profile-pic.jpg);
  background-position: center;
  background-size: cover;
  margin-left: 5rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.profile-img-section:hover {
  cursor: pointer;
  height: 40rem;
  width: 40rem;
}

.profile-scale {
}

.profile-flex {
  display: flex;
  justify-content: space-between;
}
.profile-info {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 0;
  margin-left: 2.8rem;
}
.profile-name {
  font-size: 1.8rem;
  font-weight: 600;
}

/* PROFILE BTN */

.profile-btns {
  display: flex;
  gap: 1.4rem;
  padding: 1.2rem 1.2rem 0 0;
}

.follow-btn {
  display: flex;
  gap: 0.5rem;
  border: 2px solid #fff;
  background-color: #0c8599;
  color: #fff;
  padding: 1.2rem 2.4rem;
  border-radius: 11px;
  font-size: 1.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.follow-btn:hover {
  border: 2px solid #0c8599;
  background-color: #fff;
  color: #0c8599;
}
.follow-btn:hover .icons-follow {
  color: #0c8599;
}

.icons {
  width: 2.2rem;
  height: 2.2rem;
  color: #0c8599;
  font-weight: 800;
  text-shadow:
    1px 1px 0 black,
    -1px -1px 0 black;

  transition: all 0.3s;
}
.icons-follow {
  color: #fff;
  height: 2rem;
  width: 2rem;
  transition: all 0.3s;
}
.round-btns {
  border: 2px solid #0c8599;
  background-color: #fff;
  height: 4.7rem;
  width: 4.7rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.round-btns:hover {
  background-color: #0c8599;
}
.round-btns:hover .icons {
  color: #fff;
}

/* ************ PERSONAL INFO ************* */
.personal-info {
  display: flex;
  gap: 3rem;
  margin-bottom: 4.8rem;
}
.bio {
  margin-bottom: 3.8rem;
  font-size: 1.8rem;
  line-height: 1.2;
}
.bio-text {
}
.personal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
}
.icons-bio {
  color: #55aab8;
}

/* ******* POSTS / FOLLOWER SECTION ******* */

.description {
  display: flex;
  flex-direction: column;
  line-height: 1.8;
  margin-bottom: 6.8rem;
}
.title {
  color: #3d9dad;
}
.number {
  font-weight: 600;
  color: #3d9dad;
  font-size: 2.2rem;
}

/* ******* ACCORDION SECTION ************  */
.feed {
  display: none;
}
.feed {
  display: block;
}
.accordion-section {
  margin-bottom: 22rem;
}

.a-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12.8rem;
}

.accordion h3 {
  padding: 1.2rem 0;
}

.accordion-flex {
  display: flex;
  margin-bottom: 2rem;
}

.accordion-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-left: 2rem;
  font-size: 1.4rem;
}

.accordion-img {
  height: 4.8rem;
  width: 4.8rem;
  background-image: url(pics/profile-pic.jpg);
  background-size: cover;
  border-radius: 50%;
}
.accordion-header {
  padding: 1.2rem 2.4rem;
  font-size: 2.2rem;
  font-weight: 600;
  color: #9eced6;
  background-color: #f8f9fa;

  border: none;
  transition: all 0.3s;
}

.accordion-header:hover {
  cursor: pointer;
  color: #0c8599;
  transform: translateY(25%);
  box-shadow: inset 0 -3px 0 #0c8599;
}
.accordion--active {
  font-size: 2.4rem;

  color: #0c8599;
  transform: translateY(25%);
  box-shadow: inset 0 -3px 0 #0c8599;
}

/* ******* FEED SECTION ************  */

.feed-bio {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  margin-bottom: 3.6rem;
}
.feed-img-center {
  width: 80%;
  margin: 0 auto;
}
.feed-img-post {
  height: 60rem;
  background-size: cover;
  margin-bottom: 4.8rem;
  transition: all 0.5s;
  border-radius: 7px;
}
.feed-img-post:hover {
  transform: scale(1.05);
}
.section-1 {
  display: none;
  width: 60%;

  /* border-bottom: 3px solid #fff; */
  /* border-radius: 11px; */
  /* box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2); */
  margin: 0 auto;
  /* background-color: #fff; */
  margin-bottom: 18rem;
}

.post {
  margin-bottom: 12rem;
  border-radius: 11px;
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  padding: 2.4rem;
}

.post-1 {
  background-image: url(pics/20240530_183144396_iOS.jpg);
}
.post-2 {
  background-image: url(pics/20240725_023737826_iOS.jpg);
}
.post-3 {
  background-image: url(pics/IMG_20230226_190125.jpg);
}
.post-4 {
  background-image: url(pics/20211112_163707.jpg);
}
.post-5 {
  background-image: url(pics/20211111_055912.jpg);
}

.post-1,
.post-2,
.post-3,
.post-4,
.post-5 {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.reaction {
  display: flex;
  justify-content: end;
  gap: 1.8rem;
}
.like-btn {
  cursor: pointer;
  /* color: red; */
}
.comment-btn {
  cursor: pointer;
}

a {
  text-decoration: none;
}

.active {
  color: #0c8599 !important;
  box-shadow: inset 0px -3px 0px #0c8599;
}

/* ******* PROJEKTE SECTION ************  */
.section-2 {
  display: none;
  margin-bottom: 18rem;
}

.projects-sections {
  /* position: relative; */
  /* height: 30rem; */
  width: 100%;
  background-color: #9eced6;
  padding: 1.2rem 2.4rem 1.2rem 8.8rem;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 8.8rem;
  box-shadow: 3px 3px 10px #05353d;
}
.projects {
  width: 100%;
  margin-bottom: 10rem;
  padding: 10rem 0rem;
  border-radius: 11px;
}
.feed-bio-projects {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.project-img-post {
  height: 30rem;
  background-size: cover;
  margin-bottom: 4.8rem;
  transition: all 0.5s;
  border-radius: 7px;
}
.project-1-img {
  background-image: url(pics/Portfolio.png);
  background-size: cover;
}
.project-2-img {
  background-image: url(pics/HotelFlow-dashboard.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #0c8599;
}
.project-3-img {
  background-image: url(pics/Portfolio.png);
  background-size: cover;
}

.post-in-progress {
  position: relative;
  overflow: hidden;
}

.project {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 5rem;
}
.reaction-projects {
  display: flex;
  justify-content: space-between;
}
.links-project {
  display: flex;
  flex-direction: column;
}
.links-project a {
  font-size: 1.6rem;
  font-weight: 600;
  color: #0c8599;
  transition: all 0.3s;
}
.links-project a:hover {
  font-size: 1.7rem;
  font-weight: 600;
  color: #05353d;
}
.disabled-link {
  pointer-events: none;
  color: gray !important;
  cursor: not-allowed;
}

.post-in-progress::before {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(28%, 104%) rotate(50deg);
  content: "In Arbeit";
  font-size: 1.8rem;
  font-weight: 500;
  display: block;
  text-align: center;
  width: 20rem;
  height: 3rem;
  background-color: yellow;
  border: 2px solid black;
}

/* * <!-- ******* about me ************ --> */

.section-3 {
  display: none;
  width: 100%;
}
.about-me-container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  color: #05353d;
  font-weight: 500;
  border-radius: 11px;

  width: 100%;
}

.sidebar-about-me {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 20px;
  align-self: start;
  width: 20rem;
  background-color: #9eced6;
  color: #fff;
  padding: 2rem;
  border-radius: 50px;
}
.sidebar-about-me a {
  justify-self: center;
  color: #fff;
  margin-bottom: 0;
}
.sidebar-about-me h4 {
  justify-self: center;
}
.about-me-flex-header h2 {
  font-size: 5rem;
  font-weight: 700;
}
.about-me-flex-header h3 {
  font-size: 2.5rem;
  font-weight: 700;
}

a .ionicon {
  width: 2rem;
  font-weight: 600;
}
.about-me-phone {
  justify-content: start;
  width: 2rem;
  font-weight: 600;
}
.about-me-img-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rem;
  width: 100%;
}

.about-me-profile-img {
  background-image: url(pics/profile-pic.jpg);
  background-position: center;
  background-size: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  justify-self: center;
  margin-bottom: 3rem;
}
.about-me-contact-btn {
  justify-self: center;
  align-items: center;
  border: 2px solid #fff;
  background-color: #0c8599;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 11px;
  font-size: 1.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.about-me-contact-btn:hover {
  transform: scale(1.05);
  box-shadow: 3px 6px 3px rgba(1, 81, 112, 0.2);
}

.pic1,
.pic2,
.pic3 {
  /* position: absolute; */
  border-radius: 10px;
  border: 10px solid #fff;
  box-shadow: 0 6px 3px rgba(124, 218, 255, 0.2);
  width: 300px;
  height: 400px;
  transition: all 0.6s;
  filter: blur(2px);
}
.pic1 {
  object-fit: cover;
  object-position: center;
  transform: translate(10%, -3%) rotate(45deg);
}
.pic2 {
  object-fit: cover;
  object-position: center;
  transform: translate(-7%, 6%) rotate(-29deg);
  z-index: 1;
}
.pic3 {
  object-fit: cover;
  object-position: center;
  transform: translate(-20%, 0%) rotate(15deg);
}
.pic1:hover,
.pic2:hover,
.pic3:hover {
  transform: scale(1.1);
  box-shadow: 3px 6px 3px rgba(124, 218, 255, 0.2);
  filter: none;
}

.about-me-flex-header {
  display: flex;
  flex-direction: column;
  color: #0c8599;
}
.about-me-main-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
}
section {
  margin-bottom: 5rem;
}
section h3 {
  margin-bottom: 2rem;
  font-weight: 700;
  color: #0c8599;
}
.text-content-background-color h3 {
  color: #fff;
}

.text-content-background-color,
.skills-box,
.tech-stack-list {
  background-color: #9eced6;
  border-radius: 50px;
  padding: 1.2rem 2.4rem;
  box-shadow: 3px 6px 3px rgba(124, 218, 255, 0.2);
  border: none;
}
.skills-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.skills-box:last-child {
  grid-column: span 2;
}
.skills-box {
  display: flex;
  flex-direction: column;
  color: #fff;
}
.skills-box strong {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.skills-box svg {
  justify-self: center;
  width: 2rem;
  font-weight: 800rem;
}
.tech-stack-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.2rem 2.4rem;
}
li {
  border: 2px solid #fff;
  border-radius: 8rem;
  padding: 0.6rem 1.2rem;
  color: #fff;
}

/* * <!-- ******* FOOTER ************ --> */

.footer-section {
  display: flex;
  justify-content: center;
  color: #f8f9fa;
  background-image: linear-gradient(to bottom, #05353d, #3d9dad);
}
.footer-container {
  padding: 3.6rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-span {
  margin-bottom: 1.2rem;
}
.footer-h3 {
  letter-spacing: 1px;
}
.social-icons {
  display: flex;
  gap: 1rem;
}
.social-icons {
  display: flex;
  gap: 1rem;
}
.footer-link,
.footer-nav-to-top {
  text-decoration: none;
  color: #f8f9fa;
  transition: all 0.3;
}
.footer-link:hover {
  transform: translateY(-25%);
  transform: scale(1.4);
}

.section--active {
  display: block;
}

/* .sticky {
  position: fixed;
  background-color: red;
  width: 100%;
} */

/* test */

.feed-img-post {
  position: relative;
}
.hidd-img {
  display: none;
}

.img-visible {
  height: 100% !important;

  background-image: url("slika.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

[data-img="0"] {
  background-image: url(pics/Carr1.jpg);
  background-size: cover;
}
[data-img="1"] {
  background-image: url(pics/Carr2.jpg);
  background-size: cover;
}
[data-img="2"] {
  background-image: url(pics/Carr3.jpeg);
  background-size: cover;
}
[data-img="3"] {
  background-image: url(pics/Carr4.jpg);
  background-size: cover;
}
[data-img="4"] {
  background-image: url(pics/Carr5.jpeg);
  background-size: cover;
}

.test-arrow {
  border: none;
  background-color: transparent;
  font-size: 4rem;
  color: #3d9dad;
  position: absolute;
  height: 4rem;
  width: 4rem;
  top: 50%;
}
.arrow-right-test-hidden {
  display: none;
}

.arrow-right-test {
  right: 0;
  transform: translateX(70%);
}

.arrow-left-test {
  display: block;
  left: 0;
  transform: translateX(-70%);
}
.arrow-left-test-hidden {
  display: none;
}
.arrow-hover {
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 0 3px;
}

.following {
  background-image: linear-gradient(to right, #0c8599, #dad8d8);
  border: 2px solid #05353d;
}

@media (max-width: 600px) {
  /* Container full width + padding */
  .container {
    width: 100%;
    /* padding-inline: 1.6rem; */
  }

  /* Sections inside container */
  .section-bio.container,
  .section-followers.container.grid-3,
  .accordion-section.container,
  .section.section-1.section--active,
  .section.section-2,
  .section.section-3 {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Posts */
  .post {
    width: 90%;
    margin: 0 auto;
    padding: 1.6rem;
    margin-bottom: 5rem;
    box-sizing: border-box;
  }
  .post:last-child {
    margin-bottom: 10rem;
  }
  /* Images */
  .feed-img-post,
  .project-img-post {
    height: 30rem; /* mobile-friendly height */
    max-width: 100%;
  }

  /* Grid adjustments */
  .section-followers.container.grid-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Accordion */
  .a-flex {
    gap: 1rem;
  }
  .personal-info {
    flex-direction: column;
    gap: 1rem;
  }
  .profile-info {
    margin: 0;
  }
  .profile-flex {
    display: inline;
  }
  .profile-btns {
    position: absolute;
    right: 2rem;
    padding: 0;
    gap: 0.4rem;
    align-items: center;
  }
  .follow-btn {
    padding: 0.6rem 1.2rem;
  }
  .profile-img-section {
    margin-left: 2rem;
  }
  .profile-img-section:hover {
    height: 22rem;
    width: 22rem;
  }
  .bio {
    padding: 0 1rem;
  }
  .section-followers.container.grid-3 {
    justify-content: center;
    gap: 6rem;
  }

  .about-me-container {
    font-size: 1.2rem;
  }
  .about-me-flex-header {
    padding: 1rem;
    width: 90%;
  }
  .text-content-about-me {
    padding: 1rem;
    width: 90%;
  }
  .about-me-flex-header h2 {
    font-size: 3rem;
  }
  .about-me-flex-header h3 {
    font-size: 1.5rem;
  }
  .section h3 {
    font-size: 2rem;
  }
  .section p {
    font-size: 1.5rem;
  }
  .sidebar-about-me {
    display: none !important;
  }
  .about-me-main-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-me-img-container {
    margin-bottom: 2rem;
  }
  .pic1,
  .pic2,
  .pic3 {
    width: 111px;
    height: 150px;
  }
  .section {
    margin-bottom: 2rem;
  }
  /* // ! EMAIL-CONTACT ME CONTAINER  */
  .email-send-container {
    width: 90%;
  }
  .email-flex {
    padding: 1.2rem 2.4rem;
    gap: 1rem;
  }
  .email-form-text-section {
    padding: 2rem 0;
    width: 50%;
    gap: 3rem;
  }
  .email-form-text-section h2 {
    font-size: 2rem;
  }
  .email-form-text-section h3 {
    font-size: 1.2rem;
  }
  .email-send-form {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
  }
  .input-email-field-message {
    height: 12rem;
  }
}