:root {
  /* Colors */
  --black-100: #23252BFF;
  --black-75: #23252BBF;
  --black-50: #23252B80;
  --black-25: #23252B40;
  --black-10: #23252B1A;
  --black-5: #23252B0D;
  --red-error: #D21253;
  --White: #FFFFFF;
  --yellow: #b8b523;
  --green: #00AA39;
  --primary: #3969ED;
  --secondary: #4239ED;
  --tech-items-background: #359881;
  --gradient: linear-gradient(to right, #3969ED 25%, #4239ED 75%);
  --instagram-color: linear-gradient(to right, #ED2450 0%, #8F1C35 100%);

  /* Font Family */
  --font-primary: 'Poppins', sans-serif;

  /* Font Sizes */
  --font-size-normal: 1rem; 

  --font-size-h1: 3.8125rem;
  --font-size-h2: 3.0625rem;
  --font-size-h3: 2.4375rem;
  --font-size-h4: 1.9375rem;
  --font-size-h5: 1.5625rem;
  --font-size-h6: 1.2500rem;

  /* Line Heights */
  --line-height-normal: 1.5000rem;

  --line-height-h1: 4.0000rem;
  --line-height-h2: 4.0000rem;
  --line-height-h3: 3.0000rem;
  --line-height-h4: 2.5000rem;
  --line-height-h5: 2.2500rem;
  --line-height-h6: 1.7500rem;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spaces */
  --space-size-0: 0.0000rem;
  --space-size-2: 0.1250rem;
  --space-size-4: 0.2500rem;
  --space-size-8: 0.5000rem;
  --space-size-12: 0.7500rem;
  --space-size-16: 1.0000rem;
  --space-size-20: 1.2500rem;
  --space-size-24: 1.5000rem;
  --space-size-32: 2.0000rem;
  --space-size-48: 3.000rem;
  --space-size-64: 4.0000rem;
  --space-size-72: 4.5rem;
  --space-size-80: 5rem;
  --space-size-88: 5.5rem;
  --space-size-96: 6.0000rem;
  --space-size-112: 7rem;
  --space-size-128: 8.0000rem;
  --space-size-192: 12.0000rem;

}

* {
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
}

html{
  font-size: 100%; /* This sets the base font --- 16px = 1rem */ 
}


/****** Background with color white ******/

.white-section-background{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--White);
}


/****** Background with color white 95% ******/

.black-5-section-background{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--black-5);
}


/****** Background with secondary color ******/

.secondary-section-background{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary);
}


/* Outside Container for Sections */

.container-outside{
  display: flex;
  flex-direction: column;
  padding: var(--space-size-16) var(--space-size-24) var(--space-size-24) var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

/**************************************************** Home Page Styles ************************************************/

/******************* Navigation Section *********************/


.navigation-section-background{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: var(--White);
}

.container-navigation{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%; 
}

.hamburger-menu{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  border-radius: var(--space-size-8);
  padding: var(--space-size-8);
  box-sizing: border-box;
  cursor: pointer;
}

.hamburger-menu i{
  font-size: var(--font-size-normal);
  color: var(--White);
}

.nav-sidebar-container{
  position: fixed;
  left: -18.75rem;
  top: 0;
  width: 18.75rem;
  height: 100%;
  z-index: 1000;
  background: var(--White);
  padding: var(--space-size-16) var(--space-size-24);
  border-right: var(--space-size-2) var(--black-10) solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  row-gap: var(--space-size-32);
  column-gap: var(--space-size-32);
  transition: left 0.5s ease; 
}

.nav-active{
  left: 0;
  top: 0;
}

.close-button{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  border-radius: var(--space-size-8);
  padding: var(--space-size-8);
  box-sizing: border-box;
  cursor: pointer;
}

.close-button i{
  font-size: var(--font-size-normal);
  color: var(--White);
}


.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: var(--space-size-32);
  row-gap: var(--space-size-32);
  border-radius: var(--space-size-8);
  box-sizing: border-box;
}

.nav-item {
  cursor: pointer;
  position: relative;
  text-align: center;
  color: var(--black-100);         
  transition: color 0.2s ease;  
}

.nav-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}


.nav-item::after {
  content: "";
  position: absolute;
  height: var(--space-size-4);
  width: 0%;                   
  background-color: var(--primary);
  left: 0;
  bottom: -5px;
  border-radius: var(--space-size-2);
  transition: width 0.2s ease;  
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active::after {
  width: 100%; 
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  z-index: 999;                   
  opacity: 0;                      
  visibility: hidden;             
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

body.nav-open {
  overflow: hidden;         
  height: 100%;             
  touch-action: none;       
}


/******************* Hero Section *********************/

.container-hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

.image-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin: auto;
  background-color: var(--black-5);
  padding: var(--space-size-4);
  box-sizing: border-box;
  border-radius: var(--space-size-12);
  box-shadow: -0.1250rem var(--space-size-4) var(--space-size-12);
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: var(--space-size-12);
}

.hero-image-container-new {
  position: relative;
  width: 90%;
  aspect-ratio: 5 / 3; /* Pic Size must be 2000 x 1200 */
  border-radius: var(--space-size-16);
  padding: var(--space-size-2);
  overflow: hidden;
  margin-bottom: var(--space-size-8);
  background-color: var(--black-5);
  box-sizing: border-box;
  box-shadow: -0.1250rem var(--space-size-4) var(--space-size-12);
}

.hero-image-container-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--space-size-16);
}

.container-hero-16{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-16);
  column-gap: var(--space-size-16);
  width: 100%;
  box-sizing: border-box;
}

.greetings-name{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.greetings-name p{
  font-size: var(--font-size-normal);
  color: var(--black-75);
  font-weight: var(--font-weight-regular);
  word-wrap: break-word;
  max-width: 100%;
}

.greetings-name h1{
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  word-wrap: break-word;
  max-width: 100%;
}

.title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-align: center;
}

.title p{
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  word-wrap: break-word;
  max-width: 100%;
}

.my-bio{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.my-bio p{
  font-size: var(--font-size-normal);
  color: var(--black-100);
  font-weight: var(--font-weight-regular);
  word-wrap: break-word;
  max-width: 100%;
}

.standard-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  color: var(--White);
  padding: var(--space-size-12) var(--space-size-24);
  column-gap: var(--space-size-8);
  border-radius: var(--space-size-24);
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  border: none;
}

.standard-button p{
  font-size: var(--font-size-normal);
}

.standard-button i{
  font-size: var(--font-size-normal);
}

.green-color{
  background: var(--green);
  color: var(--White);
}


/************ About Me Section ************/

.container-about-24{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

.about-me-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-me-title p{
  font-size: var(--font-size-h3);
  color: var(--black-100);
  font-weight: var(--font-weight-light);
}

.about-me-information{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-12);
}

.about-me-information p{
  font-size: var(--font-size-normal);
  color: var(--black-100);
  font-weight: var(--font-weight-regular);
}

/**************My Skills**************************/

.main-skills-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-16);
}

.main-skills-container h2 {
  text-align: left;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  color: var(--black-100);
}

.my-skill-container {
  padding: var(--space-size-24);
  border-radius: var(--space-size-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-size-8);
  max-width: 500px;
}

.my-skill-container h6 {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--primary);
}

.my-skill-container p {
  font-size: var(--font-size-normal);
  color: var(--black-100);
  text-align: center;
}

.my-specific-skills-list {
  list-style: none;
  padding: 0;
  margin: var(--space-size-8) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-size-8);
}

.my-specific-skills-list li {
  background: var(--tech-items-background);
  padding: var(--space-size-4) var(--space-size-8);
  border-radius: var(--space-size-8);
  font-size: var(--font-size-normal);
  color: var(--White);
}

/************ Testimonial Section ************/

.container-testimonial-24{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

.testimonials-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.testimonials-title p{
  font-size: var(--font-size-h3);
  color: var(--black-100);
  font-weight: var(--font-weight-light);
}

.testimonials-taken-from {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-size-0) var(--space-size-16) var(--space-size-0) var(--space-size-4);
}

.testimonials-taken-from p{
  font-size: var(--font-size-normal);
  color: var(--black-100);
  font-weight: var(--font-weight-regular);
}


/************************** Generic Card Swipper/Slidder *****************************/

/* Swiper shell */
.swiper{
position: relative;
overflow: hidden;
border-radius: var(--space-size-12);
padding: var(--space-size-16);
-webkit-user-select: none; /* User won't be able to select text inside this space */ 
user-select: none; /* User won't be able to select text inside this space */ 
}

.control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary); /* more visible background */
border-radius: 100%;
border: 1px solid rgba(255, 255, 255, 0.35);
padding: var(--space-size-8);
display: inline-grid;
place-items: center;
width: var(--space-size-48);
height: var(--space-size-48);
cursor: pointer;
backdrop-filter: blur(0.5000rem);
box-shadow: 0 0 0.5000rem rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
color: white;
font-size: var(--space-size-16);
font-weight: bold;
}

.control:hover {
  transform: translateY(-50%) scale(1.05);
}

.control:active {
  transform: translateY(-50%) scale(0.95);
}

.control.left {
  left: var(--space-size-12);
  z-index: 1000;
}

.control.right {
  right: var(--space-size-12);
  z-index: 1000;
}


/* This class is a used by JavaScript */

.viewport{
overflow: hidden;
}

/**************************************/

.track{
display: flex;
flex-direction: row;
gap: var(--space-size-16);
transition: transform 0.5s ease;
padding-bottom: var(--space-size-16);
width: 100%; 
min-width: 0;
}

/*************************************************Testimonial Card************************************************/

.testimonial-card {
  flex: 0 0 calc(100% - var(--space-size-16));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: var(--space-size-16);
  background-color: var(--White);
  padding: var(--space-size-8);
  border-radius: var(--space-size-8);
  border: var(--space-size-2) var(--primary) solid;
  box-sizing: border-box;
}

.testimonial-comment {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}

.testimonial-by{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  position: relative;
}

.testimonial-by-name {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--primary);
}

.testimonial-by-title {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-100);
}

.testimonial-by::after {
  content: "";
  position: absolute;
  height: var(--space-size-2);
  width: 100%;
  background-color: var(--primary);
  left: 0;
  top: -0.2500rem;
  border-radius: var(--space-size-8);
}

/***************************************************************************************************************/

.dots-container{
position: absolute;
left: 0;
right:0;
bottom: var(--space-size-8);
display: flex;
justify-content: center;
pointer-events: none;
}

.dots{
display: flex;
gap: var(--space-size-8);
align-items: center;
justify-content: center;
pointer-events: auto;
}

.dot{
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--black-5);
cursor: pointer;
border: 2px var(--primary) solid;
}

.dot.active{
background: var(--primary);
transform: scale(1.15);
}

.dragging{
cursor: grabbing;
}


/**********************************************************************************************/

/**********************************************************************************************/


/************ My Projects ************/

.container-projects-32{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-32);
}

.my-projects-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.my-projects-title p{
  font-size: var(--font-size-h3);
  color: var(--black-100);
  font-weight: var(--font-weight-light);
  word-wrap: break-word;
  max-width: 100%;
}

.container-projects-16{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-4);
  width: 100%;
}

.projects-category-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.projects-category-title p{
  font-size: var(--font-size-h5);
  color: var(--black-100);
  font-weight: var(--font-weight-regular);
  word-wrap: break-word;
  max-width: 100%;
}


.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
  gap: var(--space-size-20);
  width: 100%;
  margin: auto;
}

.project-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--black-5);
  border-radius: var(--space-size-12);
  padding: var(--space-size-12);
  box-sizing: border-box;
  height: 100%;
  row-gap: var(--space-size-16);
}

.project-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  width: 100%;
  row-gap: var(--space-size-16);
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: var(--space-size-12);
  overflow: hidden;
  margin-bottom: var(--space-size-8);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--space-size-12);
}

.video-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--space-size-12);
  object-fit: cover;
}


.project-status-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--space-size-8);
  row-gap: var(--space-size-4);
  width: 100%;
}

.project-status-container p {
  font-size: var(--font-size-normal);
  /*margin: var(--space-size-0) var(--space-size-0) var(--space-size-2) var(--space-size-0);*/
  padding: var(--space-size-4) var(--space-size-16);
  border-radius: var(--space-size-8);
}

.project-status-container h3 {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
}

.project-status-red{
  /*color: var(--red-error);*/
  color: var(--White);
  background-color: var(--red-error);
}

.project-status-blue{
  /*color: var(--primary);*/
  color: var(--White);
  background-color: var(--yellow);
}

.project-status-green{
  /*color: var(--green);*/
  color: var(--White);
  background-color: var(--green);
}

.project-title{
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  color: var(--black-100);
}

.project-brief{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-4);
}

.project-brief h2{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
  color: var(--black-100);
}

.project-brief p{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}

.project-brief-direction {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}

.project-information{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}

.list-title {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-100);
}

ul.list {
  list-style-type: disc;
  padding-left: var(--space-size-24);
}

ul.list li {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}

.container-project-16{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-16);
}

.container-projects-8{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-8);
  column-gap: var(--space-size-8);
  width: 100%;
  box-sizing: border-box;
}

/************ Contact Me ************/

.container-contact-32{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-32);
  column-gap: var(--space-size-32);
  padding-top: var(--space-size-32);
  padding-bottom: var(--space-size-64);
  width: 100%;
  box-sizing: border-box;
}

.contact-me-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.contact-me-title p{
  font-size: var(--font-size-h3);
  color: var(--black-100);
  font-weight: var(--font-weight-light);
  word-wrap: break-word;
  max-width: 100%;
  text-align: center;
}

.contact-me-title span{
  font-size: var(--font-size-h3);
  color: var(--black-100);
  font-weight: var(--font-weight-light);
  word-wrap: break-word;
  max-width: 100%;
  text-align: center;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

.container-contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

.container-contact-24{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
  max-width: 27.5rem;
}

.contact-me-directives{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contact-me-directives p{
  font-size: var(--font-size-normal);
  color: var(--black-100);
  font-weight: var(--font-weight-regular);
  word-wrap: break-word;
  max-width: 100%;
}

.container-contact-me-icons{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  column-gap: var(--space-size-4);
  width: 100%;
}

.icon{
  padding: var(--space-size-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.icon p{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
}

.icon i{
  border-radius: var(--space-size-4);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.instagram-color{
  background: var(--instagram-color);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

.linked-in-color{
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

.whatsapp-color{
  background: var(--green);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

.email-me-directly{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  padding: var(--space-size-12) var(--space-size-24);
  column-gap: var(--space-size-8);
  border-radius: var(--space-size-24);
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  border: none;
}

.email-me-directly p{
  font-size: var(--font-size-normal);
  color: var(--White);
}

.email-me-directly i{
  font-size: var(--font-size-h6);
}

/************ Footer Section ************/

.container-footer-inside-32{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-32);
  column-gap: var(--space-size-32);
  width: 100%;
  box-sizing: border-box;
}


.footer-top{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-32);
  column-gap: var(--space-size-32);
  width: 100%;
  box-sizing: border-box;
}

.container-footer-profile{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-16);
  width: 100%;
  box-sizing: border-box;
}

.container-footer-profile-image{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.footer-profile-image{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1250rem;
  margin: auto;
  background-color: var(--black-5);
  padding: var(--space-size-2);
  box-sizing: border-box;
  border-radius: 100%;
  box-shadow: -0.1250rem var(--space-size-4) var(--space-size-12);
}

.footer-profile-image img{
  width: 100%;
  height: 2.5000rem;
  border-radius: 100%;
}

.container-footer-profile-details{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-16);
  width: 100%;
  padding: var(--space-size-4) 0px;
  box-sizing: border-box;
}

.container-footer-profile-details h2{
  color: var(--White);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
}

.container-footer-profile-details p{
  color: var(--White);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
}

.container-footer-contact-me{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--space-size-16);
  width: 100%;
  box-sizing: border-box;
}

.container-footer-contact-me h3{
  color: var(--White);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
}

.footer-contact-me-icon{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-size-8);
  width: 100%;
  padding: var(--space-size-2);
  box-sizing: border-box;
  text-decoration: none;
}

.footer-contact-me-icon i{
  color: var(--green);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
}

.footer-contact-me-icon p{
  color: var(--White);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
}

.sitemap-links {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
}

ul.sitemap-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-4);
  padding-left: var(--space-size-24);
  list-style-type: disc;
  box-sizing: border-box;
}

ul.sitemap-list li {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--White);
  cursor: pointer;
}

ul.sitemap-list li a {
  color: inherit;
  text-decoration: none;
}

/*** Copyright Section ***/

.container-inside-8-32-16{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-size-8);
  column-gap: var(--space-size-4);
  width: 100%;
  padding: var(--space-size-64) var(--space-size-16) var(--space-size-0) var(--space-size-16);
  box-sizing: border-box;
  color: var(--White);
}

.container-copyright{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: var(--space-size-4);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-normal);
  box-sizing: border-box;
}

.container-copyright p, i{
  text-wrap: nowrap;
}

.container-copyright-developed{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-normal);
  box-sizing: border-box;
  flex-wrap: nowrap;
}

.container-copyright-developed p, i{
  text-wrap: nowrap;
}


/**************************************************** About Page Styles ************************************************/

.about-me-title-page{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-me-title-page p{
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

.about-me-category{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.about-me-category p{
  font-size: var(--font-size-h3);
  color: var(--black-100);
  font-weight: var(--font-weight-light);
}

.container-timeline-inside-32{
  display: flex;
  flex-direction: column;
  row-gap: var(--space-size-32);
  column-gap: var(--space-size-16);
  box-sizing: border-box;
}

.category-button {
  flex: 0 0 18.75rem;
  min-width: 18.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--White);
  color: var(--black-75);
  border: var(--space-size-2) var(--black-100) solid;
  padding: var(--space-size-12) var(--space-size-8);
  column-gap: var(--space-size-8);
  border-radius: var(--space-size-32);
  cursor: pointer;
  box-sizing: border-box;
  scroll-snap-align: start;
}

.category-button p {
  font-size: var(--font-size-normal);
}

.category-button i {
  font-size: var(--font-size-normal);
}

.active-category-button{
  background: var(--black-75);
  color: var(--White);
}

.container-timeline-content{
  display: flex;
  flex-direction: column;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  box-sizing: border-box;
}

.each-timeline-content{
  display: flex;
  flex-direction: column;
  row-gap: var(--space-size-16);
  column-gap: var(--space-size-16);
  box-sizing: border-box;
}


.timeline-content-main{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-12);
  width: 100%;
  box-sizing: border-box;
}

.timeline-point{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-size-8) var(--space-size-0);
}

.timeline-point i{
  color: var(--black-100);
  font-size: var(--font-size-h6);
}

.timeline-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-8);
  width: 100%;
  box-sizing: border-box;
}

.timeline-content h2{
  color: var(--black-100);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
}

.timeline-content-inside-8{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-8);
  width: 100%;
  box-sizing: border-box;
}

.timeline-content-inside-16{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-16);
  width: 100%;
  box-sizing: border-box;
}

.timeline-content-inside-24{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-24);
  column-gap: var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

.timeline-content-category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-8);
}

.each-timeline-content-category-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--White);
  border: 2px var(--black-75) solid;
  padding: var(--space-size-8) var(--space-size-16);
  column-gap: var(--space-size-8);
  border-radius: var(--space-size-24);
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--font-size-normal);
  color: var(--White);
}

.each-timeline-content-category-button p{
  font-size: var(--font-size-normal);
  color: var(--black-75);
}

.each-timeline-content-category-button i{
  font-size: var(--font-size-normal);
  color: var(--black-75);
}

.each-timeline-content-category-button-active{
  background: var(--black-75);
}

.each-timeline-content-category-button-active p{
  color: var(--White);
}

.each-timeline-content-category-button-active i{
  color: var(--White);
}

.timeline-content-sub{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-8);
  width: 100%;
  box-sizing: border-box;
}

.timeline-content-sub h2{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
  color: var(--black-100);
}

.timeline-content-sub ul{
  list-style-type: disc;
  padding-left: var(--space-size-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: var(--space-size-4);
}

.timeline-content-sub ul li{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}

.timeline-label-details{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: var(--space-size-4);
  row-gap: var(--space-size-2);
}

.timeline-label-details span{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
  color: var(--black-100);
  white-space: nowrap;
}

.timeline-label-details p{
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-regular);
  color: var(--black-75);
}


/***********************************************************************************************************************/



/**************************************************** Projects Page Styles ************************************************/

.my-projects-title-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.my-projects-title-page p{
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  word-wrap: break-word;
  max-width: 100%;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

/***********************************************************************************************************************/


/**************************************************** Contact Page Styles ************************************************/

.contact-me-title-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.contact-me-title-page p{
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  word-wrap: break-word;
  max-width: 100%;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari */
  color: transparent;
}

/***********************************************************************************************************************/


/**************************************************** Project Case Study Container Styles ************************************************/

/********************Popup for the Project Case Study****************/

.case-study-popup {
  position: fixed;
  inset: 0;
  transform: translate(120%, -120%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 9999;
  overflow: auto;
}

.case-study-popup.case-study-popup-show {
  transform: translate(0, 0);
  opacity: 1;
}

.no-scroll {
  overflow: hidden;
}

/********************Popup for the Project Case Study****************/


.white-section-background{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--White);
}

.project-case-study-container-outside{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-size-16) var(--space-size-24) var(--space-size-24) var(--space-size-24);
  width: 100%;
  box-sizing: border-box;
}

.container-case-study-navigation{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-size-16) var(--space-size-0);
  column-gap: var(--space-size-16);
  row-gap: var(--space-size-16);
  box-sizing: border-box;
}

.case-study-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  color: var(--White);
  padding: var(--space-size-12) var(--space-size-24);
  column-gap: var(--space-size-8);
  border-radius: var(--space-size-24);
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
}

.case-study-button p{
  font-size: var(--font-size-normal);
}

.case-study-button i{
  font-size: var(--font-size-normal);
}

.green-color{
  background: var(--green);
  color: var(--White);
}

.container-project-case-study{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-32);
  row-gap: var(--space-size-32);
  width: 100%;
  min-width: 0;
  max-width: 46.875rem;
}

.project-case-study-title{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-8);
  row-gap: var(--space-size-8);
  box-sizing: border-box;
}

.project-case-study-title p{
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--primary);
}

.container-project-case-study-details{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-24);
  row-gap: var(--space-size-24);
  width: 100%;
}

.project-case-study-information-pods{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-4);
  row-gap: var(--space-size-4);
  width: 100%;
}

.project-case-study-information-pods p {
  font-size: var(--font-size-normal);
  margin: var(--space-size-4) var(--space-size-0);
}

.project-case-study-information-pods h3 {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
}

.project-case-study-information-pods ul {
  list-style: disc;
  padding-left: var(--space-size-24);
  margin: 0;
}

.project-case-study-information-pods li {
  font-size: var(--font-size-normal);
  margin: var(--space-size-2) var(--space-size-0);
}

.container-tech-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-16);
  row-gap: var(--space-size-16);
  width: 100%;
}

.tech-stack-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-8);
  row-gap: var(--space-size-8);
  width: 100%;
  margin: var(--space-size-12) var(--space-size-0);
}

.tech-stack-wrapper h3 {
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-semibold);
}

.stack-infinite-slider{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--space-size-8);
  row-gap: var(--space-size-8);
  width: 100%;
  flex-wrap: wrap;
}

.tech-stack-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--tech-items-background);
  color: var(--White);
  padding: var(--space-size-4) var(--space-size-8);
  column-gap: var(--space-size-8);
  border-radius: var(--space-size-12);
  box-sizing: border-box;
  text-decoration: none;
}

.tech-stack-item p{
  font-size: var(--font-size-normal);
}




/***********************************************************************************************************************/


/* Phone */
@media (min-width: 440px) {

  /**************************************************** Home Page Styles ************************************************/
  .container-outside{
  padding: var(--space-size-24) var(--space-size-32) var(--space-size-32) var(--space-size-32);
  }

  .container-projects-8{
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  }

  .projects-grid {
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  }

  .nav-sidebar-container{
  padding: var(--space-size-24) var(--space-size-32);
  }

  /************************************************************************************************************************/

}

/* Hide or fade controls on mobile */
@media (max-width:640px){
  .control{
  opacity:0;
  pointer-events: none;
  }
  .swiper:hover .control{
  opacity:0;
  }
}



/* Phone -> Tablet  */
@media (min-width: 640px) {

  /**************************************************** Home Page Styles ************************************************/
  .container-outside{
  padding: var(--space-size-24) var(--space-size-64) var(--space-size-32) var(--space-size-64);
  }

  .container-navigation{
  justify-content: flex-end;
  }

 .container-inside-8-32-16{
  flex-direction: row;
  }

  .container-hero{
  align-items: flex-start;
  justify-content: flex-start;
  }

  .hero-image-container-new {
  width: 100%;
  }

  .greetings-name{
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  }

  .titles{
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  }

  .standard-button{
  max-width: 15.625rem;
  }

  .close-button,
  .hamburger-menu {
  display: none;
  }

  .nav-sidebar-container{
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  z-index: 0;
  padding: var(--space-size-0) var(--space-size-0);
  border-right: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  }

  .nav-active{
  left: auto;
  top: auto;
  }

  .nav-list {
  flex-direction: row;
  }

/* Show overlay */
  .nav-overlay.active {
  opacity: 0;                      /* start hidden */
  visibility: hidden;              /* hide from layout */
  }

  /* Disable scrolling when nav is open */
  body.nav-open {
  overflow: auto;         /* disables scroll on desktop */
  height: auto;             /* prevent scrolling via content */
  touch-action: auto;       /* optional: disables touch scroll on mobile */
  }

  .container-about-24{
  justify-content: flex-start;
  align-items: flex-start;
  }

  .about-me-title{
  align-items: flex-start;
  justify-content: flex-start;
  }

  .container-testimonial-24{
  align-items: flex-start;
  justify-content: flex-start;
  }

  .testimonials-title {
  align-items: flex-start;
  justify-content: flex-start;
  }

  .testimonials-taken-from {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  }

  .container-hero-16{
  align-items: flex-start;
  justify-content: flex-start;
  }

  .greetings-name{
  align-items: flex-start;
  justify-content: flex-start;
  }

  .title{
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  }

  .my-bio{
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  }

  .image-container{
  width: 100%;
  }

  .testimonial-card {
  flex:0 0 calc(50% - var(--space-size-16));
  }

  /*************************************************************************************************************************/

}

/* Tablet -> Small Laptop */
@media (min-width: 740px) {

  /**************************************************** Home Page Styles ************************************************/

  .container-outside{
  padding: var(--space-size-32) var(--space-size-96) var(--space-size-48) var(--space-size-96);
  }

  .projects-grid {
  grid-template-columns: repeat(auto-fit, minmax(21.875rem, 1fr));
  }

  /***********************************************************************************************************************/

}


/* Small Laptop -> Medium Laptop */
@media (min-width: 840px) {

  /**************************************************** Home Page Styles ************************************************/

  .container-outside{
  padding: var(--space-size-32) var(--space-size-32) var(--space-size-48) var(--space-size-32);
  }

  .container-hero{
  flex-direction: row-reverse;
  column-gap: var(--space-size-24);
  align-items: center;
  justify-content: center;
  }

  .container-contact{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: var(--space-size-32);
  }

  .container-contact-32{
  row-gap: var(--space-size-48);
  }

  .container-footer-inside-32{
  row-gap: var(--space-size-96);
  }

  .footer-top{
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 90%;
  }

  /********************************************************************************************************************/

  .timeline-content-inside-24{
  flex-direction: row;
  }

}

/* Medium Laptop -> Large Laptop */
@media (min-width: 940px) {

  /**************************************************** Home Page Styles ************************************************/

  .container-outside{
  padding: var(--space-size-32) var(--space-size-96) var(--space-size-48) var(--space-size-96);
  }

  .testimonial-card {
  flex:0 0 calc(33.333% - var(--space-size-16));
  }

  /**************************************************************************************************************************/

}

/* Large Laptop -> Small Desktop */
@media (min-width: 1040px) {

  /**************************************************** Home Page Styles ************************************************/

  .container-outside{
  padding: var(--space-size-48) var(--space-size-128) var(--space-size-48) var(--space-size-128);
  }

  .footer-top{
  max-width: 75%;
  }

  /**********************************************************************************************************************/

}

/* Small Desktop -> Medium Desktop */
@media (min-width: 1240px) {

  /**************************************************** Home Page Styles ************************************************/

  .container-outside{
  padding: var(--space-size-48) var(--space-size-128) var(--space-size-48) var(--space-size-128);
  }

  .projects-grid {
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  }

  .image-container{
  width: 90%;
  }

  /*********************************************************************************************************************/
  .timeline-label-details{
  flex-direction: row;
  }

}

/* Medium Desktop -> Large Desktop */
@media (min-width: 1440px) {

  /**************************************************** Home Page Styles ************************************************/

  .container-outside{
  padding: var(--space-size-48) var(--space-size-192) var(--space-size-48) var(--space-size-192);
  }

  .projects-grid {
  grid-template-columns: repeat(auto-fit, minmax(31.25rem, 1fr));
  }

  /************************************************************************************************************************/

}