@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital@0;1&family=Space+Grotesk:wght@300..700&display=swap');
/* DEFAULT STYLE */

*{
  font-family: "Inter", sans-serif;
  padding: 0;
  margin: 0;
  font-weight: 200;
  font-optical-sizing: auto;
  box-sizing: border-box;
}

:root {
  --header-h: 120px;
  --container: 1200px;
  --pad-x: clamp(16px, 4vw, 48px);
  --section-y: clamp(48px, 6vw, 120px);
  --nav-gap: 10px;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(header-h);
}

body {
  padding-top: calc(var(--nav-height) + var(--nav-gap));
}


#approach, #about-me, #projects {     
  width: 100%;
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

#about-me, #approach, #approach-2, #approach-3, #approach-4, #projects {
  min-height: auto;      /* stop forcing 100vh + centering everywhere */
  display: block;
}


#about-me, #approach-4, #projects { 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-h);
}

#languages {     
  min-height: 10vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#about-me {
 background-image: linear-gradient(180deg, #01323d 10%, #000000 80%);
}


#approach {
 background: linear-gradient(to bottom, #000000, #01323d, #ffff, #01323d);
}


#approach-2 {
  background-image: linear-gradient(180deg, #01323d, #000000, #000000 30%, #01323d 55%, #ffff 90%, #ffff 99%);
}

#approach-3 {
  background: linear-gradient(135deg,#000000,#01323d);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 8px 28px #00000047, inset 0 1px 0 #ffffff59;
}

#approach-4 {
    background-image: linear-gradient(180deg, #000000 15%, #01323d 40%, #000000, #01323d 65%, #ffff 99%);
}

#languages {
   background-image: linear-gradient(180deg, #ffff 24%, #01323d 80%, #000000);

}

#projects {
   background-image: linear-gradient(180deg, #000000, #01323d, #000000, #01323d 45%, #01323d 60%, #000000 115%);
}


.approach-img {
  background: white;
}



h1, h2, h3, h4, h5, h6 {
  color: #ffff;
  text-align: left;
  line-height: 1;
  
}


.dashboard__img {
  display: block;
  height: 200px;
  padding: 10px;
  margin: 0 8px;
}

p {
  font-family: "Inter", sans-serif;
  line-height: 1.25;
  font-size: 16px;
  color: white;
}

a {
  text-decoration: none;
  position: relative;
  transition: opacity 300ms ease;
}

a:hover, i:hover {
  opacity: 1;
}


li {
  list-style: none;
}

.flex {
  display: flex;   /** child is also 100% height of the page **/
}

.flex-1 {
  flex: 1; /** entire height of the page **/ 
}

.row {
  width: 100%;
  max-width: var(--container); /** ensures info and image under the row div 
  are not the entire width of the page **/
  margin: 0 auto; /** automatically centers the text based on equal margin values **/
  padding-inline: var(--pad-x);
  box-sizing: border-box;
}

section {
  padding: var(--section-y);
}

.container {
  padding: 20px 0;
}

section:nth-child(even) {    /** section background color - reusable code through inspection tool  **/
}

.section__title--teck-stack {
  text-align: center;
  font-size: 44px;
  font-weight: 400;
  background-image: linear-gradient(to top, #ffffffa0, #ffffff);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent; 
}

.section__title--projects {
  text-align: center;
  font-size: 44px;
  font-weight: 400;
  background-image: linear-gradient(to top, #ffffff, #acacac);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent; 
}

.section__title--alt {
  font-size: 44px;
  font-weight: 400;
  color: #ffff;
}

.section__title--alt-black {
  font-size: 44px;
  font-weight: 400;
  background-image: linear-gradient(to top, #0f0f0f15, #000000);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent; 
}


.section__subtitle {
  padding-top: 24px;
  line-height: 1.25;
  font-weight: 300;
  font-size: 16px;
}

.section__subtitle-black {
  padding-top: 24px;
  line-height: 1.25;
  color: #000000;
  font-weight: 300;
  font-size: 16px;
}


.section__subtitle--pitch {
  display: inline-flex;     /* key: shrink-wrap to content + lets align-items work */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  color: #cdcdcd;
  padding: 8px 16px;        /* giving it vertical and horizontal padding */
  margin-top: 20px;
  white-space: nowrap;
  border-radius: 50px;

  background: linear-gradient(135deg,#ffffff24,#ffffff0a);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 8px 28px #00000047, inset 0 1px 0 #ffffff59;
}

.section__subtitle--pitch-black {
  display: inline-flex;     /* key: shrink-wrap to content + lets align-items work */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  color: #0000003f;
  padding: 8px 16px;        /* giving it vertical and horizontal padding */
  margin-top: 20px;
  white-space: nowrap;
  border-radius: 50px;

  background: linear-gradient(135deg,#ffffff24,#ffffff0a);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 8px 28px #00000047, inset 0 1px 0 #ffffff59;
}

.text--name {
  color: white;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  opacity: 1;
  font-size: 44px;
  background-image: linear-gradient(to top, #ffffff, #c4c4c425);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent; 
  
}

.text__cursive {
  color:#ffff;
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
  background-image: linear-gradient(to right, #ffffff, #d7d7d768);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent; 
}

.text__cursive--black {
  color:#ffff;
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
  background-image: linear-gradient(to top, #4a4a4a15, #373737cf);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent; 
}

.text__bold {
  font-weight: 500;
  background-image: linear-gradient(to top, #0000005a, #ffffff);
  background-clip: text;    /* 3. Clip the background to the text area */
  -webkit-background-clip: text;
  color: transparent;      /* 4. Make the text transparent so the background shows through */
  -webkit-text-till-color: transparent;
}



.box-icon__thinking {
  color: white;
  transition: transform 450ms ease-in;
 
}

.box-icon__thinking:hover {
  transform: rotate(180deg);
}


@keyframes fade-in{
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in__abt-links{
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 0.65;
    transform: translateY(0);
  }
}


/* NAVIGATION BAR */

.dashboard {   /** NAVIGATION DASHBOARD  **/
  position: fixed;
  max-width: 100%;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px;
  background: rgba(20, 20, 25, 0.47);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(60px) saturate(100%);
  border-bottom: solid 1px #cdcdcd09;

  transition: all 0.3s ease;
  z-index: 999;


}

nav {
  height: 100px;
  width: 100%;     /* set width to 100% to make page responsive */
  max-width: 1000px;
  margin: 0 auto;   /* centers the nav text */
  display: flex;    /* display flex and justify content will center the nav bar to both sides of the page */
  justify-content: space-between;  
  align-items: center;   /* center nav text vertically */
  padding: 0 12px;
}

.nav__link--list {
  display: flex;   /* puts the links side-by-side */
}


.nav__link {
  opacity: 0.65;
  transition: opacity 1s ease;

}

.nav__link:hover {
  opacity: 1;
}

.link__hover-effect:hover {
  color: #ffff;
  
}

.nav__link--anchor {
  margin: 0 12px; 
  color: #ffff;
  font-weight: 300;
}

.nav__link--anchor-primary {
  padding: 8px 20px;
  border-radius: 15px;
  color: #ffff;
  background-color: #635b7b;
  text-decoration: none;
  transition: background-color 1s ease, opacity 10s ease-in;
}

.nav__link--anchor-primary:hover {
  background-color: #4208f3;
  
}

.link__hover-effect:after {
  content: "";
  position: absolute;
  height: 3px;
  background-color: black;
  width: 0;       /** to animate the entire item **/
  bottom: -5px;
  right: 0;
  transition: all 450ms ease
}

.link__hover-effect--white:after {      /** : -- pseudo elements **/
  background-color: #6b39ff;
}

.link__hover-effect:hover:after {
  width: 100%;       /** to animate the entire item **/
  left: 0;
}

.personal__logo {
  font-size: 24px;
  color: #1abc9c;
  margin: 0 12px;
  font-weight: bold;
}


/* ABOUT ME */

#about-me {
  min-height: 100vh; /** so you can see it is the entire height of the page **/
  display: flex;
  flex-direction: column;
  text-align: center;
}

.about-me__info {
  display: flex;
  flex-direction: column;
}

.about-me__info--container {
  display: flex;
  flex-direction: column; /** ensures text info and image are not side by side **/
  align-items: center;  /** entire height of the page **/
  max-width: 800px;
  margin: 0 auto;
  text-align: center;

}

.about-me__picture--mask {
  width: 150px;    
  height: 150px;
  border-radius: 50%;   /** border edges **/
  overflow: hidden;     /** overflow: hidden; no image overflow past the circular border **/
  box-shadow: 0 0 24px #597e76af;
  border-color: #ffffff;
  border-style: solid;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: -30px;
  animation: fade-in 2000ms 0.7s backwards;
}



.about-me__picture {
  width: 100%;    /** needs to be 100% of its parent - .about-me__picture--mask to maintain correct sizing **/
  /** Improving my own picture **/
  transform: scale(1.7);
  padding-top: 16px;
  
} 

.about-me__info--title {
  font-size: 40px;
  margin-top: 70px;
  margin-bottom: 15px;
  animation: fade-in 1200ms 650ms backwards;
}

.about-me__info--para {
  font-family: "Inter", sans-serif;  
  font-weight: 200;
  font-size: 35px;
  color: #cdcdcd;
  margin-bottom: 30px;
  animation: fade-in 1200ms 600ms backwards;
}

.text__teal--transition {
  animation: teal-transition 10s cubic-bezier(0.39, 0.575, 0.565, 1) 2s infinite;     /* forwards locks in the final color */
}

.text__teal--transition-1 {
  animation: teal-transition-alt 8s ease-in-out 450ms infinite;     /* will prevent the snapback to white */
}
.text__teal--transition-2 {
  animation: teal-transition-alt 10s ease-in-out 450ms infinite;     /* will prevent the snapback to white */
}
.text__teal--transition-3 {
  animation: teal-transition-alt 12s ease-in-out 450ms infinite;     /* will prevent the snapback to white */
}


@keyframes teal-transition {
  0%, 100%{
    color: #cdcdcd;
  }

  50% {
    color: #80ffcac9;
  }
}

@keyframes teal-transition-alt {
  0%, 100% {
    color: #cdcdcd;
  }

  50% {
    color: #80ffcac9;
  }
}

.abt-me__para--pitch {
  animation: fade-in 1200ms 450ms backwards;
  font-size: 14px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


box-icon, .box-icon__thinking{
  animation: fade-in 1400ms 450ms backwards;  
}

box-icon {
  padding: 0 5px;
}


.cta-button__container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.cta-button__style {
  display: inline-flex;
  position: relative;
  font-weight: 200;
  
  padding: 8px 16px;
  border-radius: 50px;

  justify-content: center;
  align-items: center;
  
  background: linear-gradient(135deg,#ffffff24,#ffffff0a);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  color: #ffff;
  opacity: 0.65;
  border-bottom: solid 1px #ffffff2e ;

  animation: fade-in-logo 3s 1200ms backwards;
  transition: opacity 650ms ease;

}

.cta-button-1 {
  top: 125px;
}

.cta-button-2 {
  bottom: 16px;
}

.cta-button-3 {
  top: 56px;
  background: linear-gradient(135deg,#02506162,#0250616a);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.cta-button-4 {
  top: 56px;
}

 .cta-button__style .fa-angle-down {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 250ms ease, transform 150ms ease-in-out;
}

.fa-angle-down {
  opacity: 0;
  transform: scale(0.4);

}

.cta-button__text {
  opacity: 0.65;
  transform: scale(1);
  transform-origin: center;
  transition: opacity 450ms ease, transform 150ms ease-in-out;
}

 

.cta-button__style:hover {
  opacity: 1;
  filter: drop-shadow(0px 0px 50px #ffffff82); /* Horizontal offset, Vertical offset, Blur radius, Color */
  -webkit-filter: drop-shadow(0px 0px 10px #ffffff82);
  
}

.cta-button__style:hover .cta-button__text {
  opacity: 0;
  transform: scale(0);
}

.cta-button__style:hover .fa-angle-down {
  opacity: 1;
  transform: scale(1);
  display: inline-flex;
  
}


.cta-button__style:active {
  animation: shrink 1s ease-in
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}


@keyframes fade-in-logo{
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 0.65;
    transform: translateY(0);
  }
}

.about-me__link {
  font-size: 20px;
  color: white;
  padding: 0 16px;
  opacity: 0.65;
  top: 30px;
  animation: fade-in__abt-links 1100ms 900ms backwards;
  transition: opacity 0.65s ease-in;
}


.about-me__link:hover {
  opacity: 1;
}


.about-me__img {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  max-width: 500px;
  justify-content: center;
  align-items: center;
  animation: fade-in 1200ms 950ms backwards;
}


.about-me__img--container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 auto;
}

.about-me__img--container {
  width: 100%;
}

 /** APPROACH  **/



/* SECTION GRID: cards on left, image on right */
.approach__grid {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}


/* CARD LIST: structured grid of cards */
.approach__card--list {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  position: relative; /* needed for ::before overlay */
  margin-top: 20px;
}

.approach__list-3 {
  display: flex;
  flex-direction: column; /* ← stack vertically */
  gap: 24px;              /* spacing between cards */
  max-width: 500px;
}

/*  soft “sheen” overlay across the whole list */
.approach__card--list::before {
  content: "";
  position: absolute;
  opacity: 0.35;
}


/* CARD: responsive sizing + refined glass */
.approach__card {
  display: grid;
  gap: 16px;
  

  min-height: 200px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 8px;

  background: linear-gradient(135deg,#ffffff24,#ffffff0a);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 8px 28px #00000047, inset 0 1px 0 #ffffff59;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.approach__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.approach__card:hover .bx-community, 
.approach__card:hover .bx-psychology,
.approach__card:hover .fa-triangle-exclamation,
.approach__card:hover .fa-eye-low-vision,
.approach__card:hover .bx-cube-inside,
.approach__card:hover .bx-user-voice,
.approach__card:hover .bx-network-chart,
.approach__card:hover .bx-brain-circuit,
.approach__card:hover .bx-sapling,
.approach__card:hover .bx-chess-knight,
.approach__card:hover .bx-law, 
.approach__card:hover .bx-compass,
.approach__card:hover .bx-search,
.approach__card:hover .bx-package,
.approach__card:hover .bx-circle-dashed-half,
.approach__card:hover .bx-timeline,
.approach__card:hover .bx-bolt {
  opacity: 1;
  transition: opacity 550ms ease-in-out ;
}

.bx-community, .bx-user-voice {
  font-size: 70px;
  color: #ffff;
  opacity: 0.25;
  transition: opacity 550ms ease-in-out ;

}

.bx-bolt {
  font-size: 70px;
  background-image: linear-gradient(60deg, #cdcdcdb8, #fae037, #c3a900);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;
}

.bx-timeline {
  font-size: 70px;
  background-image: linear-gradient(60deg, #cdcdcdb8, #aa8cff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;
}

.bx-cube-inside {
  font-size: 70px;
  background-image: linear-gradient(60deg, #cdcdcdb8, #80ffcae4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;
}

.bx-package {
  font-size: 70px;
  background-image: linear-gradient(30deg, #ffffffad, #6F7F9A, #666b8e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.25;
  transition: opacity 550ms ease-in-out ;
}

.bx-compass {
  font-size: 70px;
  background-image: linear-gradient(30deg, #ffffff80, #54a77c, #66748E);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.25;
  transition: opacity 550ms ease-in-out ;
}

.bx-law {
  font-size: 70px;
  background-image: linear-gradient(30deg, #ffffffa4, #667085, #5F6B7A);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.25;
  transition: opacity 550ms ease-in-out ;
}

.bx-search {
  font-size: 70px;
  background-image: linear-gradient(135deg, #6fafb1b5 0%, #6c6746db 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;
}

.bx-chess-knight {
  font-size: 70px;
  background-image: linear-gradient(135deg, #6fafb181 0%, #3f4a5287 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;
}

.bx-network-chart, .bx-circle-dashed-half {
  font-size: 70px;
  background-image: linear-gradient(30deg, #ffffff, #68fcff, #169b16);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;

}

.bx-brain-circuit {
  font-size: 70px;
  background-image: linear-gradient(1100deg, #ad4fa8, #169b16, #169b16);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;

}

.bx-sapling {
  font-size: 70px;
  background-image: linear-gradient(30deg, #ffff, #169b16, #169b16);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  transition: opacity 550ms ease-in-out ;

}




/* TEXT INSIDE CARD */
.approach__description--title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

.approach__description--sub-heading {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 10px;
  
}

.approach__description--para {
  font-size: 16px;
  font-weight: 300;
  opacity: 0.85;
  margin-top: 10px;

}

/* IMAGE WRAP (NOT the img itself) */
.approach__img-wrap {
  display: block;
  justify-content: center;
  align-items: center;
}

.approach__img-wrap--computer{
  display: flex;
  grid-column: 2;  /* right/empty column */
  justify-self: end;  /* right side */
  align-self: start;  /* top align */
  margin: 0;
}

/* IMAGE ITSELF */


.approach__grid-3{
  display: grid;
  grid-template-columns: 1fr ; /* left = cards, right = image */
  gap: 16px;
}


.approach-section__img--computer{
  height: 550px;
  width: auto;
  display: block;     /* not flex */
}

.approach-section__img--phone {
  height: 620px;
  width: auto;
  display: flex;
  margin: 0 auto;

      
}

.approach-section__img--ipad {
  height: 650px;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
}


 /** TECHNOLOGY STACK DASHBOARD  **/

.dashboard--tech-stack {  
  max-width: 100%;
  margin: 0 auto;
  padding: 50px;
  width: 100%;
  
  background: linear-gradient(to bottom,#00000024,#01323d14);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 8px 28px #00000047, inset 0 1px 0 #ffffff59;


  border-radius: 40px;
  transition: all 0.3s ease;

}

.language {
  width: 25%;          /** THIS IS THE PARENT to .language__img 
  25% of the width of the container (100% width of the page) **/
  display: flex;
  justify-content: center;     /** flex-->jcc centers the text at the top of the language image **/ 
  position: relative;          /** moves to the closest relative parent **/ 
   
}


.language:hover .glow__img--orange {
  filter: brightness(80%) drop-shadow(0px 0px 20px #ff9d00);
  -webkit-filter: drop-shadow(0px 0px 20px #ff9d00);
}

.language:hover .glow__img--blue {
  filter: brightness(80%) drop-shadow(0px 0px 20px #001aff);
  -webkit-filter: drop-shadow(0px 0px 20px #001aff);
}

.language:hover .glow__img--gold {
  filter: brightness(80%) drop-shadow(0px 0px 20px #ecd000);
  -webkit-filter: drop-shadow(0px 0px 20px #ecd000);
}

.language:hover .glow__img--neon {
  filter: brightness(80%) drop-shadow(0px 0px 20px #80ffcac9);
  -webkit-filter: drop-shadow(0px 0px 20px #80ffcac9);
}



.language__img {
  width: 100%;          /** % makes image responsive **/    /** % makes image responsive **/
  max-width: 100px;
  transition: all 350ms ease-in-out;       /** % makes the hover effect smooth **/ 
  transform: scale(1);
}

.language__img--wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 16px;
}

.language__list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;  /** squeezes the language icons, forcing them onto another row -- add padding to the wrapper create spacing **/ 
}

.language__name {
  position: absolute;  /** not affecting the parent (language) icon flex boxes **/ 
  bottom: 0;            /** moves to the bottom of the closest relative parent **/ 
  margin: -18px;        /** creating space between the img and the text **/
  transform: scale(0);
  transition: all 300ms ease-out;
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
  color: white;
}

.language:hover .language__name {
  transform: scale(0.8);
  opacity: 1;           /** subtle fade in 0 --> 1 for the language text when it appears **/
}

.language:hover .language__img {
  opacity: 0.85;
  transform: scale(1.3);
  transition: filter 0.4s ease-in-out, transform 0.8s ease; 
}



/** PROJECTS **/

.project {
  margin-bottom: 135px;
}

.project:last-child {
  margin-bottom: 40px;   /** :last-child targets the last item and
  closes the gap between it and the end of the page (shortening the gap) **/
}

.project__img {
  width: 100%;   /** matches the .row width to correctly fit **/
  transition: all 350ms ease;  /** added so you do not instantly receive the blurred zoom on hover **/
}

.project__wrapper {
  display: flex;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.44);
  border-radius: 30px;     /** will not show for the wrapper if overflow is not hidden (image leaking out the wrapper) **/
  overflow: hidden;     /** prevent image overflowing the border radius **/
  position: relative;
}

.project__wrapper:before {
  content: "";
  position: absolute;     /** positioned at absolute to avoid affecting the position of other aspects of the page **/
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #1c1d25;
  opacity: 0;
  transition: opacity 450ms ease;   /** state what you are transitioning **/
  z-index: 2;
}

.project:hover .project__wrapper:before {
  opacity: 0.55;
}

.project:hover .project__img {
  transform: scale(1.075) translateY(18px);
  filter: blur(5px);
}

.project:hover .project__description {
  opacity: 1;
  transform: translateY(-50%);   /** centering the text description 
  after transition when hovering **/
}

.project__list {
  padding-top: 40px;
}

.project__description {
  position: absolute;
  top: 50%;
  left: 90px;
  transform: translateY(100%);   /** starting point for the text description **/
  max-width: 550px;
  z-index: 3;
  opacity: 0;
  transition: transform 450ms, opacity 300ms ease-in;    /** transform needs to be added for effect and use a comma for 2 separate transitions. **/
}

.project__description--title {
  font-size: 40px;
  font-weight: 400;
}

.project__description--para, .ul-project__description--para {
  margin: 16px 0;
  font-size: 16px;
}

.project__description--link {
  font-size: 20px;
  margin-right: 16px;
  text-decoration: none;
}

.project__description--title, .project__description--sub-title, 
.project__description--para, 
.project__description--link, .ul-project__description--para{
  text-align: left;
  color: white;
}

.project__description--sub-title {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 300;
}



/** FOOTER **/

footer{
  background: linear-gradient(to right,#000000c5,#000000df);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 8px 28px #00000047, inset 0 1px 0 #ffffff59;
  
}

.footer__logo--img {
  width: 100px;
  
}

.footer__social--list {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: space-around;     /** even, wide spacing -- add max width if you want to make text closer **/ 
  align-content: center;
 
}

.footer__row {
  display: flex;  /** align content next to each other **/
  padding: 20px;
  outline: solid 2px gray;
  flex-direction: row;
  align-items: center;        /** centers it vertically by default without flex direction coloumn**/
  justify-content: center;   /** centers it horizontally by default flex direction coloumn **/
  align-content: center;
  text-align: center;
  max-width: 100%;
  
}



.footer__social--link {
padding: 8px;
opacity: 0.65;
}

.footer__copyright {
  opacity: 0.65;
  font-size: 10px;
  white-space: nowrap;
}

.footer__social--link, 
.footer__copyright, 
.footer__logo--popup {
  color: #ffffff;
}


.footer__logo--popup {
  position: absolute;
  padding: 10px;
  top: 60px;
  left: 33px;
  border-radius: 50px;
  font-weight: 200;
  opacity: 0;
  transition: all 300ms ease;
}

.footer__logo--popup {
  opacity: 0;
}

.fa-angle-up {
  opacity: 0;
}

.footer__anchor {
  position: relative;
}






/** small phones, tablets, and  **/
@media (max-width: 768px){
  nav {
    height: 68px
  }

  h1 {
    font-size: 32px;
  }

  p {
    font-size: 24px;
  }

  .nav__link--list {
    display: none;

  }

  .about-me__info--para {
    font-size: 24px;
  }

 .approach__grid{
    grid-template-columns: 1fr;
  }

  .language {
    width: calc(100% / 3);   /** how many language icons you want on each row **/
  }

  .project__description--title {
    font-size: 24px;
  }

  .project__description--para {
    font-size: 12px;
  }

  .ul-project__description--para {
    font-size: 12px;
  }

   .project__description--para {
     left: 30px;
     padding-right: 30px;
  }

  .footer__row {
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .footer__social--list {
    flex-wrap: wrap;          /* prevents overflow */
    gap: 10px;
    padding: 0 12px;
  }

  .footer__copyright {
    white-space: nowrap;       /* forces single line */
    font-size: 14px;           /* helps it fit */
  }

  .footer__logo--img {
    width: 100px;
}

  .footer__anchor {
      top: 40px;

  }

  .footer__social--link {
    bottom: 10px;
}


 .footer__logo--popup, .fa-angle-up{
  background-color: transparent;
  opacity: 0;
 }

 .footer__logo--popup {
    border: solid 2px gray;

 }


.footer__anchor:hover .footer__logo--popup {
  transform: translateY(-80px);
  opacity: 1;
  animation: fade-in__arrow 650ms ease-in;

}
 .footer__anchor:hover .fa-angle-up {
  opacity: 1;
  animation: fade-in__arrow 1s ease-in;
 }


  @keyframes fade-in__arrow {
    0% {
      opacity: 0;
    }
    100% {
     opacity: 1;
    }
  }

  .row {
  max-width: 800px; /** ensures info and image under the row div **/

  }
  
}






/** small phones **/
@media (max-width: 480px) {
  .nav__link:not(:last-child) {        /** links that are not last in width **/
    display: none;
  }        
  
  .project__description {             /** because it is position absolute push it all the way to the left**/
    padding: 0;
    left: 0;
    width: 100%;
    
  }

  .project__description--para {
    display: none;
  }

  .project__description--links {
    display: flex;
    justify-content: center;
  }

  .project__description--title {
    font-size: 32px;
    line-height: 1.25;
    text-align: center;
  }

  .project__description--sub-title {
    text-align: center;
    margin: 12px 0;
  }

}