/* ========================
   General Reset & Layout
======================== */
* { /* "*"asterix applies to all elements */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  font-size: 1%vh;
  color: #333;
}

.page-wrapper {
  min-height: 100vh; /* sets the page wrapper to 100% of the displayable hieght of a device, VH = veiwport height, veiwport is the displayable area of a device */
  display: flex; /* display: flex allows children to be aligned in a row or column and spaced easily */
  flex-direction: column;
}
main {
  flex: 1;
}
header .content-container { 
  display: flex;
  justify-content: space-between; /* Aligns items horizontally, like left, center, space-between */
  align-items: center;
  flex-wrap: wrap; /* wrap the content around to the next row instead of going off screen when width is reduced */
}

.content-container {

  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem;
}

/* ========================
   Header & Navigation
======================== */
header {
  position: sticky; /* position property controls how an element is placed in relation to its surroundings, sticky keeps the elemnt in place even when scrolling */
  top: 0; /* positions it at the top of the screen */
  z-index: 100; /* higher number so elemnts with a lower number go underneath and dont obstruct the higher ordered element */
  background-color: #1a1a1a;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  flex-wrap: wrap;
}

.logo-name {
  display: flex;
  align-items: center;
}

.logo {
  height: 20px;
  margin-right: 0.75rem;
}

.site-name {
  font-size: 1.25rem;
  font-weight: bold;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 0rem;
  z-index: 10;
}

.navbar ul li {
  margin: 0;
  padding: 0;
}

.navbar ul li a {/* Style nav links: make them full-width, remove underline, and improve click area */
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  color: white;
  text-decoration: none;
}

.navbar ul li a:hover {
  background-color: red;
}

.hamburger {    
  display: none; /* hidden by default on large screens */
  font-size: 2rem;
  cursor: pointer;
  color: white;
  margin-left: auto;
  margin-right: 0;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}
/* ========================
   Contact page background
   ========================= */
   
.side-stripe { /* contact page */
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 100vh;
  background: url('../assets/images/backgrounds/network.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Blurred copy using ::before */
.side-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/images/backgrounds/network.jpg') no-repeat center center;
  background-size: cover;
  filter: blur(6px);

  /* Gradient fade: left = transparent, right = blurred */
  mask-image: linear-gradient(to left, transparent 20%, black 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 20%, black 100%);
}
/* ========================
    Main Page
   -----------------------	
   Hero Section
======================== */
.hero-section {
  background-image: url("../assets/images/backgrounds/banner1.jpg");
  background-size: cover;
  background-position: center;
  height: 42.5vh; /* VH = veiwport height, veiwport is the displayable area of a device */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  position: relative;
  color: white;
  z-index: 1;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.hero-content {
	margin-left: 3rem;
  /*max-width: 600px;*/
    padding: 0 rem;
    z-index: 2;
}
h1 {
	position: relative;
	
  padding-top: 1em;
  color: white;
  z-index: 3;
   word-wrap: break-word;
  white-space: normal;
  width: 100%; /* or max-width: 100%; */
  font-size: clamp( 1.75rem, 2.5vw, 2.5rem);
}
#subtittle {
	position: relative;
	
  padding-top: 1em;
  color: white;
  z-index: 3;
   word-wrap: break-word;
  white-space: normal;
  width: 100%; /* or max-width: 100%; */
  font-size: clamp( 1.0rem, 1.5vw, 2.0rem);
}
p {
	max-width: 700px;
}

/* ========================
   Intro Section
======================== */
.intro-section {
  background-color: transparent;

  flex: 1;
  position: relative;
  z-index: 1;
}

.intro-section .content-container {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
}

.intro-text {
  flex: 1;
  padding: 4rem 3rem;
  max-width: 600px;
  
  
}

.intro-image {
  position: absolute;
  right: 5rem;
  top: -180px;
  max-width: 250px;
  z-index: 2;
}

.intro-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

.btn {
  display: inline-block;
  margin-top: 2.5em;
  padding: 0.75rem 2.5rem;
  background-color: #1a1a1a;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: 
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    color 0.2s ease;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

.btn:hover {
  background-color: red;
  transform: scale(1.05);
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
}
/* =========================
       About Page
============================ */	   
#about-heading {
  color: black;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  max-width: 700px;
  font-size: clamp( 1.75rem, 2.5vw, 2.5rem);
}

.details {
  padding: 1rem 0;
  line-height: 1.6;
  max-width: 700px;
}

.grid-container {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 2rem;
  align-items: start;
  margin: 1rem 0rem 0rem 0rem;
}

.text-coloumn {
  padding: 0rem;
  text-align: center;
}

.image-coloumn {
  display: flex;
  justify-content: center;
  align-items: start;
}

.image-coloumn .about-photo {
  max-width: 100%;
  height: auto;
  
}
#comlab {
	margin-top: 15rem;
	
}
.bagdes {
	display: block;
	margin-top: 0;
}
.badges-block {
  margin: 0rem 0 1.5rem 0;
  text-align: center;
}

.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.badge img {
	display: block;
  max-width: 150px;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.badge img:hover {
  transform: scale(1.25) tranlateY(-10px);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));

  
}
/* =========================
       Contact Page
============================ */	   
.contact-section {
  background: transparent;
  padding: 4rem 2rem;
}

.contact-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.contact-info,
.contact-form {
  flex: 1;
  min-width: 280px;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.contact-info li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
label {
  display: block;  /* ensures it behaves like a block element */
  margin-bottom: 5px; /* adds spacing below */
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form input,
.contact-form textarea {
  margin-bottom: 1rem;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact-form button {
  background: #1a1a1a;
  color: white;
  border: none;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.5s ease;
}

.contact-form button:hover {
  background: red;
}
/* ========================
        Projects Page
	======================= */
.project-box {
  display: flex;
  flex-direction: column;
  background: transparent;
  margin: 1rem 0;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.project-img {
  display: block;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.project-content {
  padding: 0.5rem 0 0 1.5rem;
}

.project-content h2 {
		font-size: clamp( 1.5rem, 2.5vw, 2.25rem);
  margin: 0.5rem 0 0.3rem;
}

.date {
  font-size: 0.85rem;
  padding-bottom: 0.5rem;
}
.post-style-1 {
	flex-direction: row-reverse; /* Text and image reversed in row-reverse */
	background-color: #fff;
}

.post-style-1 .project-content {
  flex: 1; /* take up all available space left after the image */
  text-align: left; /* aligns the text to the left */
}

.post-style-1 .project-img {
  /* only applies when post-style-1 is used */
  max-width: 300px;
  height: auto; 
}	

.post-style-2 {
	flex-direction: row;
	background-color: #1a1a1a;
	color: white;
}	

.post-style-2 .project-img {
  /* only applies when post-style-2 is used */
  max-width: 300px;
  height: auto;
}

.post-style-3 {
	flex-direction: row-reverse;
}

.post-style-3 .project-content {
  flex: 1; /* take up all available space left after the image */
  text-align: left; /* aligns the text to the left */
}

.post-style-3 .project-img {
  /* only applies when post-style-3 is used */
  max-width: 300px;
  height: auto;
}

.post-style-4 {
	flex-direction: row;
	background-color: #1a1a1a;
	color: white;
}	

.post-style-4 .project-img {
  /* only applies when post-style-4 is used */
  max-width: 300px;
  height: auto;
}
	
/* ========================
   Footer
======================== */
footer {
  background-color: #1a1a1a;
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  bottom: 0;
}
footer p {
	text-align: center;
	margin: 0 auto;
}
/*====================
       Media Query
  ====================*/
/*    Responsive navigation styles activate below 995px to rearrange elements for smaller, portrait-oriented screens. Must be place after already defined classes to override them when set criteria is met */
@media (max-width: 890px) {
  header .content-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .navbar ul {
    display: none; /* hides the nav bar links by default on small screens */
    flex-direction: column;
    position: fixed;
    top: 45px;
    right: 0;
    width: 175px;
    background-color: #1a1a1a;
    padding: 1rem;
    z-index: 100;
  }

  .navbar ul.show {
    display: flex; /* shows links again when the hamburger is clicked */
  }

  .navbar ul li a { /* Style nav links: make them full-width, remove underline, and improve click area */
    display: block; 
    padding: 1rem;
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
  }

  .navbar ul li a:hover { 
    background-color: red;
  }

  .hamburger {
    display: block; /* is displayed only when screen is 768px or smaller */
  }

.hero-content {
	position: relative;
	margin: auto;
	text-align: center;
}
  .intro-image {
	margin: auto;
    position: relative;
    margin-top: 2rem;

    padding: 0 rem;
    max-width: 200px;
    top: 0;
	transform: translateX(5rem);/* moves the image in the x plane using auto margin as start point */
	
	
  }

  .intro-image img {
	display: block;
	width: 100%;
    height: auto;
    
	
  }
  
   .intro-section .content-container {
    flex-direction: column;
    align-items: center;
  }

  .intro-text {
	font-size: 1rem
    padding: 0 rem;
    max-width: 100%;
    text-align: center;
  }


  .contact-container { /* contact page */
    flex-direction: column;
  }

/* =================================
              About Me
	=============================== */		  
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .text-coloumn {
    order: 2;
  }

  .image-coloumn {
    order: 1;
    justify-content: center;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .image-coloumn .about-photo {
    max-width: 80%;
  }
  
  /* On large screens: grid layout = text left, image right.
On small screens: grid disappears (display: block), 
image "jumps" to the top via order: -1.*/

/* ===============================
       Projects Page 
	============================= */
  .project-box {
    flex-direction: column !important; /* change flexbox to coloumn from row for media query !Important makes sure it overides .post-styles*/
    align-items: stretch; /* lets .project-content fill the width naturally  */
  }

  .project-img {
	display: block;  
    width: 100%;
    max-width: 100%;
  }

  .project-content {
    text-align: left;
  }	
}
/* On large screens: grid layout = text left, image right.
On small screens: grid disappears (display: block), 
image "jumps" to the top via order: -1.*/