/* @view-transition {
  navigation: auto;
}*/

html {
  /*scroll-snap-type: y proximity;*/
}

header {
  border-bottom: 1px solid rgba(51, 51, 51, 0.06);

  scroll-snap-stop: always;
  scroll-snap-align: start;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Open-Sans", "Roboto", Helvetica, Sans-Serif;
  color: #484848;
}

h1 {color:#666;}

  .text-grad-black {
  background: -webkit-linear-gradient(#333, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

  .text-grad-white {
    background: -webkit-linear-gradient(#fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

h1, .h1 {
    font-size: calc(1.4875rem + 2.85vw);
    letter-spacing: -0.1rem;
}

  @media (min-width: 1200px) {
    h1, .h1 {
      font-size: 3.625rem;
    }
  }
  
  h2, .h2 {
    font-size: calc(1.363rem + 1.356vw);
    letter-spacing: -0.1rem;
  }

  @media (min-width: 1200px) {
    h2, .h2 {
        font-size: 2.38rem;
      }
  }
  
  h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
    letter-spacing: -0.05rem; 
    font-weight: 700;
  }
  @media (min-width: 1200px) {
    h3, .h3 {
        font-size: 1.75rem;
      }
  }
  
  h4, .h4 {
    font-size: calc(1.2625rem + 0.15vw);
    font-size: 1.25rem;
    letter-spacing: -0.02rem; 
    font-weight: 500;
  }

  
  @media (min-width: 1200px) {
    h6, .h6 {
        font-size: 1.375rem;

    }
  }
  
  h5, .h5 {
    font-size: 1.15rem;
    font-weight: 500;
  }
  @media (min-width: 1200px) {
    
  }
  
  h6, .h6 {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.0055rem;
  }

  h6.overline, .h6-overline {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6610f2;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
  }

  @media (min-width: 1200px) {
    
  }

/* custom header nav styles */
nav.navbar {
  border-bottom: 1px solid rgba(102, 102, 102, 0.3);
}

li.nav-item div.dropdown-menu {
  margin-top: 0px !important;
  padding-top: 0px !important;
  border: none !important;
}

#subnav-personal-aboutme.active,
#subnav-personal-photography.active,
#subnav-personal-writings.active,
#subnav-work-overview.active,
#subnav-work-skills.active,
#subnav-work-history.active,
#subnav-work-portfolio.active,
#subnav-work-testimonials.active,
#subnav-work-design-process.active {
  background-color: rgba(95, 65, 251, 0.05);
}


/* custom header nav styles */


p {
    letter-spacing: -0.025rem;
}

section {

 scroll-snap-align: start;
}

footer {
  scroll-snap-stop: always;
  scroll-snap-align: end;
}

#section-hero {
  min-height: 100vh;
} 

#section-hero:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

#button-cv {
  border: 1px solid rgba(95, 65, 251, 0.5);
  padding: 5px 15px 4px;
  font-size: 0.7rem;
  color: rgba(95, 65, 251, 0.75);
}

  #button-cv:hover {
    border: 1px solid rgba(95, 65, 251, 1);
    color: rgb(95, 65, 251);
  }

.btn:hover {
  scale: 1.05;
}

p.lead {
    letter-spacing: -0.04rem;
}

p.small, .small {
  letter-spacing: -0.015rem;
}

/* Header navigation menu font overrides */
header p {letter-spacing: -0.02rem;}
header p.text-body.small {letter-spacing: -0.015rem;}
/* Header navigation menu font overrides */





/* additional bg-opacity */

.bg-opacity-76 {
  --bs-bg-opacity: 0.76;
}
.bg-opacity-77 {
  --bs-bg-opacity: 0.77;
}
.bg-opacity-78 {
  --bs-bg-opacity: 0.78;
}
.bg-opacity-79 {
  --bs-bg-opacity: 0.79;
}

.bg-opacity-80 {
  --bs-bg-opacity: 0.8;
}

.bg-opacity-90 {
  --bs-bg-opacity: 0.9;
}

.bg-opacity-95 {
  --bs-bg-opacity: 0.95;
}

.bg-opacity-96 {
  --bs-bg-opacity: 0.96;
}

.bg-opacity-97 {
  --bs-bg-opacity: 0.97;
}

.bg-opacity-98 {
  --bs-bg-opacity: 0.98;
}

.bg-opacity-99 {
  --bs-bg-opacity: 0.99;
}


/* additional bg-opacity */

/* background blur */ 
.bg-blur-5 {
backdrop-filter: blur(5px);
}

.bg-blur-6 {
backdrop-filter: blur(6px);
}

.bg-blur-7 {
backdrop-filter: blur(7px);
}

.bg-blur-8 {
backdrop-filter: blur(8px);
}

.bg-blur-9 {
backdrop-filter: blur(9px);
}

.bg-blur-10 {
backdrop-filter: blur(10px);
}

.bg-blur-11 {
backdrop-filter: blur(11px);
}

.bg-blur-12 {
backdrop-filter: blur(12px);
}

.bg-blur-13 {
backdrop-filter: blur(13px);
}

.bg-blur-14 {
backdrop-filter: blur(14px);
}

.bg-blur-15 {
backdrop-filter: blur(15px);
}

.bg-saturate-110 {
  backdrop-filter: saturate(110%);
}

.bg-saturate-120 {
  backdrop-filter: saturate(120%);
}

.bg-saturate-130 {
  backdrop-filter: saturate(130%);
}

.bg-saturate-140 {
  backdrop-filter: saturate(140%);
}

.bg-saturate-150 {
  backdrop-filter: saturate(150%);
}

/* used for toggle buttons on work history and design process */

.btn {
  letter-spacing: 0.015rem;
}

  .btn.active a {
    color: #fff;
  }

.btn:not(.active):hover a {
  color: #fff;
}
/* used for toggle buttons on work history and design process */



#download-cv {
  background-color: rgba(20, 23, 39, 0.11);
  border-top: 1px solid rgba(20, 23, 39, 0.15);
}

  #download-cv #cv-docs {
    display: block;
    opacity: 0.15;
    transition: scale 1s ease-in-out, opacity 1s ease-in;
  }

  #download-cv:hover #cv-docs {
    opacity: 0.5;
    scale 1.15;
  }





#section-featured-recognition-lseg #featured-recognition-quote p.h4 {
  line-height: 1.8rem;
}

#section-industries-clients {
}

#summarise-with-ai p {
  color: #999;
}
  #summarise-with-ai a {
    color: #999;
  }
    #summarise-with-ai a:hover {
    color: rgb(95, 65, 251);
  }

#section-testimonials-list {
  border-top: 1px solid rgb(206, 212, 241);
  background-color:rgba(235, 238, 255, 0.1);
}

#section-testimonials-quotes-scroller .swiper-slide .card {
  border: 1px solid rgba(108, 59, 240, 0.08);
}

#section-timeline-horizontal-scroller .swiper-slide .card {
  border: 1px solid rgba(108, 59, 240, 0.1);
}


/* Styles for case studies */
#project-overview .card {
  background-color: rgba(30, 41, 59, 0.9); /* midnight blue */
  border: 1px solid rgba(51, 65, 85, 1);
  padding: 2rem 1.5rem 1.2rem;
  color:rgba(226, 232, 240, 0.6);
  min-height: 14rem;
}

#project-overview h4 {
  color: #fff;
}

.keywords {margin-top: 1rem; margin-bottom: 1rem;}
  .keyword-pill {
        display: inline-block;
        border-radius: 16px; padding: 4px 10px 5px; border: 1px solid #999; margin-bottom: 12px; margin-right: 10px;
      }
        .keyword-pill + .keyword-pill { }

/* Styles for case studies */


/* Cambridge Uni Course Badge */
#cambridge-uni-course-badge {
   width: 120px; 
   filter: grayscale(100%); 
   filter: opacity(15%);
   transition: opacity 1.5s ease-in, scale 0.7s ease-in, filter 1.5s ease-in-out;

}
  #cambridge-uni-course-badge:hover {
   scale: 1.15;
   filter: opacity(60%);
   
  }




/* Text grey colours */
.text-gray-1 {
  color: var(--bs-gray-100);
}

.text-gray-2 {
  color: var(--bs-gray-200);
}

.text-gray-3 {
  color: var(--bs-gray-300);
}

.text-gray-4 {
  color: var(--bs-gray-400);
}

.text-gray-5 {
  color: var(--bs-gray-500);
}

.text-gray-6 {
  color: var(--bs-gray-600);
}

.text-gray-7 {
  color: var(--bs-gray-700);
}

.text-gray-8 {
  color: var(--bs-gray-800);
}

.text-gray-9 {
  color: var(--bs-gray-900);
}


/* Case Studies */
#project-overview .card {
  padding: 1.5rem 0.9rem 1.5rem 1.5rem;;
}

/* Case Studies */


/*Cursor for Contact / Get in Touch */
.cursor-alias {cursor: alias;
}

/* Styles for site logo wobble */
@keyframes wobble {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(15deg); }
  33%  { transform: rotate(-15deg); }
  50%  { transform: rotate(15deg); }
  66%  { transform: rotate(-15deg); }
  83%  { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}

.wobble-logo {
  display: inline-block;
  
  transform-origin: center center;
}

  .wobble-logo:hover {
    animation: wobble 0.5s ease-in-out 1;
  }
/* Styles for site logo wobble */


/* Availability Badge */

#badge-availability {
  border-radius: 4px;
  border: 1px solid rgba(40, 180, 70, 0.8);
  background-color: rgba(40, 180, 70, 0.05);
  /*background-color: rgba(23, 162, 184, 0.8);*/
  color: rgba(40, 180, 70, 0.8);
  padding: 3px 8px 4px;
  font-size: 0.65rem;
  margin-right: 1rem;
  text-align: center;
  transition: scale 1s ease-in, background-color 1s ease-in, color 0.8s ease-in;
}

  #badge-availability:hover {
    background-color: rgba(40, 180, 70, 0.8);
    /*background-color: rgba(23, 162, 184, 0.8);*/
    color: #fff;

    /*scale: 1.15;*/
  }
/* Availability Badge */





/* Verify Course Button */

#verify-course {
  border-radius: 4px;
  border: 1px solid rgba(23, 162, 184, 0.8);
  background-color: rgba(23, 162, 184, 0.03);
  /*background-color: rgba(23, 162, 184, 0.8);*/
  color: rgba(23, 162, 184, 0.9);
  padding: 3px 8px 4px;
  font-size: 0.65rem;
  margin-right: 1rem;
  text-align: center;
  transition: scale 1s ease-in, background-color 1s ease-in, color 0.8s ease-in;
}

  #verify-course:hover {
    background-color: rgba(23, 162, 184, 0.08);
    font-weight: 700;
    color: rgba(23, 162, 184, 1);
    scale: 1.25;
    
  }
/* Verify Course Button */


/* Recently completed course Badge */
.badge-green {
  border-radius: 4px;
  border: 1px solid rgba(40, 180, 70, 0.8);
  background-color: rgba(40, 180, 70, 0.05);
  /*background-color: rgba(23, 162, 184, 0.8);*/
  color: rgba(40, 180, 70, 0.8);
  padding: 3px 8px 4px;
  font-size: 0.8rem;
  margin-right: 1rem;
  text-align: center;
  /*transition: scale 1s ease-in, background-color 1s ease-in, color 0.8s ease-in;*/
}
/* Recently completed course Badge */


/* Styles for pulsing opacity image */
@keyframes pulse-opacity {
  0%   { opacity: 0.9; }
  50%  { opacity: 0.4; }
  100% { opacity: 0.9; }
}

.pulse-image {
  animation: pulse-opacity 2s ease-in-out infinite;
}
/* Styles for pulsing opacity image */



/* Styles for pulse rotate image */
@keyframes pulse-rotate {
  0% {
    opacity: 0.3;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.6;
    transform: rotate(180deg);
  }
  100% {
    opacity: 0.3;
    transform: rotate(360deg);
  }
}

.pulse-rotate-image {
  animation: pulse-rotate 5s linear infinite;
  display: inline-block; /* Required for transform to work properly on inline elements */
}
/* Styles for pulse rotate image */



/* Styles for pulse rotate image 2 */
 @keyframes pulse-rotate-2 {
  0% {
    opacity: 0.6;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.4;
    transform: rotate(180deg);
  }
  100% {
    opacity: 0.6;
    transform: rotate(360deg);
  }
}

.pulse-rotate-image-2 {
  animation: pulse-rotate 7s linear infinite;
  display: inline-block; /* Required for transform to work properly on inline elements */
}
/* Styles for pulse rotate image 2 */



/* Styles for pulse rotate image 3 */
 @keyframes pulse-rotate-3 {
  0% {
    opacity: 0.4;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.6;
    transform: rotate(180deg);
  }
  100% {
    opacity: 0.4;
    transform: rotate(360deg);
  }
}

.pulse-rotate-image-3 {
  animation: pulse-rotate 13s linear infinite;
  display: inline-block; /* Required for transform to work properly on inline elements */
}
/* Styles for pulse rotate image 3 */


/* Styles for avatar image neon flicker */
@keyframes neonFlicker {
  0%, 100% {
    border-color: transparent;
  }
  10% {
    border-color: rgba(128, 222, 241, 1);
  }
  20% {
    border-color: transparent;
  }
  30% {
    border-color: rgba(128, 222, 241, 1);
  }
  40% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(128, 222, 241, 1);
  }
  60%, 100% {
    border-color: transparent;
  }
}

.neon-flicker {
  border: 5px solid transparent;
  animation: neonFlicker 13s infinite;
}
/* Styles for avatar image neon flicker */



/* Styles for bouncing up-down arrow */
@keyframes bounce-arrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.bounce-arrow {
  display: inline-block;
  position: relative;
  top: -3px;
  animation: bounce-arrow 1.5s ease-in-out infinite;
  
}

/*.bounce-btn {
  border-radius: 50%;
  padding: 0.75rem 1rem;
}/*
/* Styles for bouncing up-down arrow */





/* Styles for the laurel trophy */
#laurel-trophy {
  opacity: 0.07;
  transition: opacity .5s ease-in, scale 1s ease-in;;
}

  #laurel-trophy:hover {
    opacity: 0.15;
    scale: 1.10;
  }

.shimmer {
  color: grey;
  display: inline-block;
  mask: linear-gradient(-60deg, #000 40%, #0005, #000 55%) right/350% 100%;
  animation: shimmer 4s infinite;
  font-size: 50px;
  max-width: 600px;
}

.shimmer-cv {
  
  display: inline-block;
  mask: linear-gradient(-60deg, #000 40%, #0009, #000 55%) right/350% 100%;
  animation: shimmer 8s infinite;
  font-size: 50px;
  max-width: 300px;
}


@keyframes shimmer {
  100% {
    mask-position: left
  }
}
/* Styles for the laurel trophy */