/* General Body Styles */
body {
  background: white !important;
  background-attachment: fixed;
  color: white;
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevents horizontal scrolling for the entire page */
}

/* Navbar Styles */
.custom-navbar {
  width: 90%;
  max-width: 850px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: 1px;
  user-select: none;
}

.navbar-toggler {
  border: none;
  filter: invert(1); /* makes toggle icon white */
}

/* Navigation Links */
.nav-link {
  position: relative;
  color: #56d6d0 !important;
  font-weight: 500;
  padding: 8px 16px;
  transition: color 0.3s ease;
}

/* Underline effect */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(135deg, #113134 0%, #0bf898 74%);
  transition: width 0.4s ease;
  border-radius: 2px;
 }

/* On hover — underline animates in */
.nav-link:hover::after {
  width: 100%;
}

/* Active or focus underline stays */
.nav-link:focus::after,
.nav-link.active::after {
  width: 100%;
}

/* Section styles */
.section {
  min-height: 100vh;
  height: auto;
  display: flex;
  font-size: 3rem;
}

/*HOME*/
 /* The @font-face rule is used to define a custom font that you want to use on your webpage. Here 'TheFont' is a name we give to reference the font later in CSS. The 'src' property specifies the path to the font file, and 'format' specifies the font format. */
 @font-face {
  font-family: 'TheFont';
  
  /* Variable fonts like the one linked below allow for fine-tuned control over various font properties dynamically via CSS, such as weight ('wght'), width ('wdth'), etc. This link is where your web browser will download the font from. */
  /* Insert the link to your custom variable font */
  src: url("https://garet.typeforward.com/assets/fonts/shared/TFMixVF.woff2")
    format('woff2'); }


div.breathe-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Change the Background color of the entire screen */
  background-color: #091c1e;
  /* 'vw' is a viewport-width unit, 'vh' is a viewport-height unit. 1vw equals 1% of the width of the viewport, and 1vh equals 1% of the height of the viewport. This allows the font size to scale dynamically with the window size. */
  height: 100vh;
}

.breathe-animation span {
  font-family: 'TheFont';

  /* The 'clamp()' function sets a flexible font size that will never go below a minimum value and never above a maximum value. The middle value is preferred, but it will shrink or grow based on the viewport dimensions. */
  /* Adjusts font size based on content width and viewport height */
  font-size: clamp(10vw, 20vw, 25vh);

  /* Change this to set the text color */
  color: white;

  /* Center text horizontally */
  text-align: center; 

  /* The 'animation' property applies the 'letter-breathe' keyframes to the element, making it animate over 3 seconds.'ease-in-out' makes the movement start and end slowly, and 'infinite' makes it repeat forever. */
  /* Controls the animation (3s is the duration) */
  animation: letter-breathe 3s ease-in-out infinite;
}

/* Keyframes define the sequence of styles that an element will go through during an animation. */
@keyframes letter-breathe {
 
  /* The 'from' and 'to' keyframes establish the initial and final states of the animation, respectively, using 'font-variation-settings'. This CSS property is used with variable fonts to adjust their weight ('wght'), width ('wdth'), etc., during the animation. */
  from,
  to {
    /* Starting weight; adjust the numbers according to your specific font */
    font-variation-settings: 'wght' 100;
  }

  /* At the midpoint (50%) of the animation, the font weight changes to 900. */
  50% {
    /* Ending weight; adjust the numbers according to your specific font */
    font-variation-settings: 'wght' 900;
  }
}
/*WIGGLE*/
.heading-wiggle {
  animation: wiggle 2.5s infinite;
}

.heading-wiggle:hover {
  animation: none;
}

/*Divider1*/
@keyframes infiniteScroll {
  from {transform: translateX(0)}
  to {transform: translateX(-50%)}
}
.container-divider {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  overflow-x: hidden;
}
.horizontal-scrolling-items {
  display: flex;
  font-size: 40px;
  width: 2600px;
  animation-name: infiniteScroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  color: #113134;
}
.horizontal-scrolling-items__item {
  white-space: nowrap;
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
 80% { transform: rotate(0deg); }
 85% { transform: rotate(5deg); }
 95% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

/*About Me*/
#about{
  background-color: #f3bbc5;
}
/* Avatar styling */
.avatar {
  width: 75%;
  max-width: 250px;
  border-radius: 50%;
  border: 5px solid #f3bbc5;
  background: white;
  animation: wiggle 2.5s infinite;
}
.avatar:hover {
  animation: none;
  }

/* Card styling */
.card {
  background: white;
  border: 0px, transparent !important;
}

/* Typography */
.card-title {
  font-size: 48px;
  font-weight: 600;
  color: #f4bcc5 !important;
}

.card-text {
  font-size: 18px;
  line-height: 1.6;
  color: #141012;
}

/* Accordion customization */
.accordion{
  background: none !important;
}
.accordion-button.collapsed {
  background-color: #2d6973 !important;
  border: none !important;
  border-radius: 20px !important;
  color: white !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background: #56d6d0 !important;
  color:#141012 !important;
  box-shadow: none;
  border-radius: 20px !important;
}

.accordion-body {
  background: transparent;
  font-size: 16px;
}
.accordion-item{
  border-radius: 20px !important;
  margin-bottom: 10px;
}
.accordion-header{
  border-radius: 20px !important;
}
/* Make sure accordion expansion doesn't shift image */
.row {
  align-items: flex-start;
}

@media (max-width: 768px) {
  .avatar {
    width: 60%;
    margin-bottom: 20px;
  }
}

/* DIVIDER ZIP */
@property --progress-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Optional easing approximations */
@function --ease-out-quart(--value) {
  --value-eased: calc(1 - pow(calc(1 - var(--value)), 4));
  --value-eased-clamped: clamp(0, var(--value-eased), 1);
  result: var(--value-eased-clamped);
}

@function --ease-out-expo(--value) {
  --value-eased: calc(1 - pow(2, calc(-10 * var(--value))));
  --value-eased-clamped: clamp(0, var(--value-eased), 1);
  result: var(--value-eased-clamped);
}

@function --ease-in-cubic(--value) {
  --value-eased: calc(var(--value) * var(--value) * var(--value));
  --value-eased-clamped: clamp(0, var(--value-eased), 1);
  result: var(--value-eased-clamped);
}

/* Container setup */
.container {
  width: 100%;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 50px;
}

/* Text styles with scroll animation */
.text {
  --progress-y: 0;
  --direction: 1;

  --radius-x: 100vw;
  --radius-y: 20vh;

  --rotation-start: -10deg;
  --progress-ease-clamped: --ease-out-expo(var(--progress-y));
  --progress-y-inverted: calc(1 - var(--progress-y));

  --opacity: --ease-out-quart(var(--progress-y));
  --scale: calc(1 + (0.6 * --ease-out-quart(var(--progress-y-inverted))));
  --rotation: calc(
    var(--rotation-start) * var(--direction) *
      --ease-in-cubic(var(--progress-y-inverted))
  );

  --start-x: calc(var(--radius-x) * var(--direction));
  --x: calc(var(--start-x) - (var(--start-x) * var(--progress-ease-clamped)));
  --y: calc(30vh * var(--progress-y-inverted));

  font-size: 10px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 2px;
  opacity: var(--opacity);
  transform: translateX(var(--x)) translateY(var(--y)) scale(var(--scale))
    rotate(var(--rotation));

  border: 3px solid transparent;
  border-radius: 2rem;
  padding: 1rem 2rem;
  transition: border-color 0.4s ease, background 0.4s ease;

  animation: zipper 1ms linear forwards;
  animation-timeline: view(block);
  animation-range: entry 50% contain 100%;
}

/* Alternate directions for every second line */
.text:nth-child(even) {
  --direction: -1;
}

/* Different colors for each line */
.text:nth-child(1) {
  background: white;
  border-color: #1c3d36 ;
  color: #102722;
}
.text:nth-child(2) {
  background: white;
  border-color: #0bf898;
  color: #0ba266;
}
.text:nth-child(3) {
  background: white;
  border-color: #f4bcc5;
  color: #ff77a9;
}
.text:nth-child(4) {
  background: white;
  border-color: #006F4D;
  color: #00432f;
}
.text:nth-child(5) {
  background: white;
  border-color: #2d6973;
  color: #214d55;
}

/* Add subtle glow on scroll-in */
.text {
  box-shadow: 0 0 10px rgba(255,255,255, calc(var(--progress-y) * 0.4));
}

/* Scroll progress animation */
@keyframes zipper {
  from {
    --progress-y: 0;
  }
  to {
    --progress-y: 1;
  }
}

/*WORKS*/
.col-md-6 img {
  width: 100%;
  height: 100%;
}
.bw-image {
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.3s ease;
  border-radius: 10px;
}

.bw-image:hover {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.top-image {
  height: 300px !important; /* adjust as needed */
  object-fit: cover !important;
  width: 100%;
  border-radius: 8px;
}
/* --- Shine Hover Effect --- */
.shadow-img {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.shadow-img:hover {
  transform: scale(1.03);
}

.shadow-img::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.1) 100%
  );
  transform: rotate(25deg);
  transition: all 0.6s ease;
}

.shadow-img:hover::after {
  top: 100%;
  left: 100%;
}

/* --- Lightbox Overlay (Zoom on Click) --- */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 10px;
  animation: fadeIn 0.25s ease;
}

.close-lightbox {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Thumbnails consistent height */
.thumb-img {
  height: 200px;
  width: 100%;
  object-fit: contain;
}

/* Flip Card Container */
.flip-card {
  width: 100%;
  max-width: 600px;
  height: 280px;   /* fixed landscape height */
}

/* Inner container that rotates */
.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

/* Hover flip trigger */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Both sides */
.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 8px 18px rgba(0,0,0,0.25);
}

/* Front side styling */
.flip-card-front {
  background: #ffffff;
}

/* Back side flips */
.flip-card-back {
  background: #f4bcc5;
  transform: rotateY(180deg);
}

/* Optional: style images */
.flip-card-front img,
.flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Center Carousel --- */
#works .carousel {
  margin-inline: auto;
}

/* --- Wrap image & caption --- */
.carousel-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

/* --- Black & white → color on hover --- */
.carousel-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.carousel-img-wrapper:hover img {
  filter: grayscale(0%);
}

/* --- Caption appears on hover --- */
.carousel-img-wrapper .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5rem 0;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: 0.4s ease;
}

.carousel-img-wrapper:hover .caption {
  opacity: 1;
  transform: translateY(0);
}

/* --- Remove titles/descriptions in original layout --- */
.carousel > article {
  display: block !important;
  grid-template-rows: none !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

@layer base, demo;
@import url(https://fonts.bunny.net/css?family=abel:400);

@layer demo {
	.carousel {
		--items: 5;
		--carousel-duration: 40s;
		@media (width > 600px) {
			--carousel-duration: 30s;
		}
		--carousel-width: min(
			80vw,
			1200px
		); /* note - it will "break" if it gets too wide and there aren't enough items */
		--carousel-item-width: 500px;
		--carousel-item-height: 350px;
		--carousel-item-gap: 1rem;

		--clr-cta: rgb(0, 132, 209);

		position: relative;
		width: var(--carousel-width);
		height: var(--carousel-item-height);
		overflow: clip;

		&[mask] {
			/* fade out on sides */
			mask-image: linear-gradient(
				to right,
				transparent,
				black 10% 90%,
				transparent
			);
		}

		&[reverse] > article {
			animation-direction: reverse;
		}
		/* hover pauses animation */
		&:hover > article {
			animation-play-state: paused;
		}
	}
	.carousel > article {
		position: absolute;
		top: 0;
		left: calc(100% + var(--carousel-item-gap));
		width: var(--carousel-item-width);
		height: var(--carousel-item-height);
		display: grid;
		grid-template-rows: 200px auto 1fr auto;
		gap: 0.25rem;
		border: 1px solid light-dark(rgba(0 0 0 / 0.25), rgba(255 255 255 / 0.15));

		padding-block-end: 1rem;
		border-radius: 10px;
		background: light-dark(white, rgba(255 255 255 / 0.05));
		color: light-dark(rgb(49, 65, 88), white);

		/* animation */
		will-change: transform;
		animation-name: marquee;
		animation-duration: var(--carousel-duration);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-delay: calc(
			var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
		);
		&:nth-child(1) {
			--i: 0;
		}
		&:nth-child(2) {
			--i: 1;
		}
		&:nth-child(3) {
			--i: 2;
		}
		&:nth-child(4) {
			--i: 3;
		}
		&:nth-child(5) {
			--i: 4;
		}

	}
	.carousel img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 10px 10px 0 0;
	}
	.carousel > article > *:not(img) {
	}
	.carousel > article > div {
		grid-row: span 2;
		display: grid;
		grid-template-rows: subgrid;
		font-size: 0.8rem;
	}
	.carousel > article h2 {
		font-size: 1.2rem;
		font-weight: 300;
		padding-block: 0.75rem 0.25rem;
		margin: 0;
	}
	.carousel > article p {
		margin: 0;
	}
	.carousel > article a {
		text-decoration: none;
		text-transform: lowercase;
		border: 1px solid var(--clr-cta);
		color: light-dark(var(--clr-cta), white);
		border-radius: 3px;
		padding: 0.25rem 0.5rem;
		place-self: start;
		transition: 150ms ease-in-out;
		&:hover,
		&:focus-visible {
			background-color: var(--clr-cta);
			color: white;
			outline: none;
		}
	}

	@keyframes marquee {
		100% {
			transform: translateX(
				calc(
					(var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) *
						-1
				)
			);
		}
	}
}

/* general styling */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;

		--bg-dark: rgb(2, 6, 24);
		--bg-light: rgb(229, 229, 229);
		--txt-light: rgb(10, 10, 10);
		--txt-dark: rgb(245, 245, 245);
	}
}

/* Contact */
a.no-underline {
  text-decoration: none !important;
}

a.no-underline:hover {
  text-decoration: none !important;
}
        .spectacledcoder-card1
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            border-radius: 15px;
            transition: all 2s;
            align-items: start;
            justify-content: right;      
        }
        .spectacledcoder-card2
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            border-radius: 15px;
            transition: all 2s;
            align-items: start;
            justify-content: center;
                    }
        .spectacledcoder-card3
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            border-radius: 15px;
            transition: all 2s;
            align-items: end;
            justify-content: left;
        }
        .circle1
        {
            position: absolute;
            margin: auto;
            margin-right: 0px;
            width: 50px;
            height: 50px;
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
            border-radius: 0px 15px 0px 50px;
            transition: all 0.5s;
            
        }
        .spectacledcoder-card1:hover .circle1
        {

            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .spectacledcoder-card1:hover .content
        {
            color: white;
        }
        .circle2
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            width: 50px;
            height: 50px;
            background-color: rgb(42, 42, 42);
            border-radius: 50%;
            transition: all 0.5s;
            
        }
        .spectacledcoder-card2:hover .circle2
        {
            margin-top: 0px;
            background-color: rgb(42, 42, 42);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .spectacledcoder-card2:hover .content
        {
            color: white;
        }
        .circle3
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            width: 50px;
            height: 50px;
            background-color: rgb(26, 132, 218);
            border-radius: 0px 50px 0px 15px;
            transition: all 0.5s;
            
        }
        .spectacledcoder-card3:hover .circle3
        {
            margin-top: 0px;
            background-color: rgb(26, 132, 218);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .spectacledcoder-card3:hover .content
        {
            color: white;
        }
        .content
        {
            margin: auto;
            z-index: 100;
            color: black;
            font-weight: 500;
        }
        @media only screen and (max-width: 600px) 
        {
            body
            {
                flex-direction: column;
            }
        }
        .spectacledcoder-card1 img
        {
            position: absolute;
            margin: auto;
            padding-top: 8px;
            padding-right: 8px;
        }
        .spectacledcoder-card2 img
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            padding-top: 12px;
        }
        .spectacledcoder-card3 img
        {
            position: absolute;
            margin: auto;
            padding-left: 8px;
            padding-bottom: 8px;
        }
        .disclaimer
        {
            position: absolute;
            bottom: 0px; 
            left: 0; 
            margin-left: auto; 
            right: 0; 
            margin-right: auto; 
            width: fit-content;
            color: rgb(0, 0, 0);
            text-align: center;
        }
        .disclaimer a
        {
            text-decoration: none;
            color: #202020;
            font-weight: 900;
        }
        .disclaimer a:hover
        {
            text-decoration: overline;
        }