:root {
 --bg-primary: #1E1E1E;

 --text-primary: rgb(255, 255, 255);
 --text-secondary: rgb(150, 150, 150);

 --border-light: rgba(150, 150, 150, .2);
 --bg-light: rgba(150, 150, 150, .1);
 --nav-bg: rgba(45, 45, 45, .7);
 --border-glass: rgba(255, 255, 255, .1);
 --status-color: 77, 184, 171;
 }

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

 html {
 scroll-behavior: smooth;
 }

 body {
 font-family: 'Figtree', sans-serif;
 font-size: 12px;
 background-color: var(--bg-primary);
 color: var(--text-primary);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 overflow-x: hidden;
 }

 body,
 .nav-menu,
 .menu-container,
 .modal,
 .project-card,
 .skill-card,
 section {
 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 .hero-title {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 line-height: 130%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 max-width: 80%;
 }

 .hero-title .highlight {
 color: var(--text-primary);
 }

 .hero-title .muted {
 color: var(--text-secondary);
 }

 .text-small {
 font-family: 'Figtree', sans-serif;
 font-size: 15px;
 font-weight: 600;
 line-height: 110%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 }

 .text-body {
 font-family: 'Figtree', sans-serif;
 font-size: 16px;
 font-weight: 500;
 line-height: 170%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 }

 .text-label {
 font-family: 'Figtree', sans-serif;
 font-size: 14px;
 font-weight: 500;
 line-height: 140%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 }

 .text-heading {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 line-height: 130%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 }

 .text-section-title {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 line-height: 140%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 }

 .nav-menu {
 position: fixed;
 bottom: 40px;
 bottom: calc(40px + env(safe-area-inset-bottom, 0px));
 left: 50%;
 transform: translateX(-50%);
 z-index: 9;
 }

 .menu-container {
 display: flex;
 gap: 0;
 background-color: var(--nav-bg);
 border-radius: 27px;
 padding: 6px 12px;
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 border: 1px solid var(--border-glass);
 }

 .nav-item {
 position: relative;
 width: 42px;
 height: 46px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 border-radius: 6px;
 overflow: visible;
 }

 .nav-icon {
 width: 26px;
 height: 26px;
 fill: white;
 stroke: white;
 stroke-width: 6;
 transition: all 0.3s ease;
 }

 /* barres pleines dans un viewBox plus petit : le stroke commun de 6 les
 rendrait trop épaisses, 3 leur donne le même poids optique que les autres */
 .nav-icon-faq {
 stroke-width: 3;
 }

 .nav-item:hover .nav-icon {
 transform: translateY(-8px);
 }

 /* le bas réserve la hauteur du menu flottant (40px + 60px) pour que le
 footer et les réseaux sociaux ne passent jamais dessous */
 .main-container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 150px 0 120px;
 display: flex;
 flex-direction: column;
 gap: 128px;
 }

 .section {
 display: flex;
 gap: 0;
 width: 100%;
 max-width: 880px;
 margin: 0 auto;
 scroll-margin-top: 50px;
 align-items: center;
 }

 /* l'état masqué est réservé aux navigateurs qui exécutent le script :
 sans ce garde-fou, une erreur js laisserait la page entièrement vide */
 .js .section {
 opacity: 0;
 transform: translateY(40px);
 transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .section.visible {
 opacity: 1;
 transform: translateY(0);
 }

 .section-title {
 flex: 1;
 max-width: 80%;
 position: static;
 height: fit-content;
 align-self: center;
 }

 .section-content {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 25px;
 }

 #techstack .section-content {
 overflow: hidden;
 }

 /* même apparition que les autres sections, mais en animation css lancée au
 chargement : le hero est déjà à l'écran, l'observateur le laisserait
 invisible en attendant le script et retarderait l'affichage du contenu */
 .hero-section {
 display: flex;
 gap: 0;
 max-width: 880px;
 margin: 0 auto;
 width: 100%;
 scroll-margin-top: 200px;
 opacity: 0;
 animation: heroReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }

 @keyframes heroReveal {
 from {
 opacity: 0;
 transform: translateY(40px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }

 .hero-left {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 25px;
 }

 .logo-section {
 display: flex;
 align-items: center;
 gap: 10px;
 position: relative;
 }

 .logo {
 width: 130px;
 height: auto;
 position: relative;
 z-index: 50;
 cursor: grab;
 touch-action: none;
 }

 .logo:active {
 cursor: grabbing;
 }

 .logo.snap-back {
 transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .hero-info {
 display: flex;
 flex-direction: column;
 gap: 5px;
 }

 .hero-right {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 40px;
 position: relative;
 }

 .hero-image {
 width: 182px;
 height: 260px;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 }

 .profile-image {
 width: 100%;
 height: 100%;
 border-radius: 32px;
 object-fit: cover;
 transition: transform 0.4s ease;
 transform-style: preserve-3d;
 }

 .profile-image:hover {
 transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
 }

 a {
 color: var(--text-primary);
 text-decoration: underline;
 }

 a:hover {
 color: var(--text-secondary);
 }

 .projects-content {
 display: flex;
 flex-direction: column;
 gap: 16px;
 max-width: 440px;
 }

 .projects-main-layout {
 display: flex;
 gap: 16px;
 height: 440px;
 width: 100%;
 }

 .projects-left-column,
 .projects-right-column {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 16px;
 }

 .project-card {
 border-radius: 32px;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 }

 .project-card.horizontal,
 .project-card.vertical,
 .project-card.bottom-single {
 height: 212px;
 }

 .project-card.bottom-single {
 width: 100%;
 }

 .project-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .project-card:hover .project-image {
 transform: scale(1.08);
 }

 .animated-scrolling-container {
 width: 100%;
 overflow: hidden;
 position: relative;
 }

 .animated-scrolling-row {
 display: flex;
 width: 100%;
 height: 30px;
 margin-bottom: 10px;
 position: relative;
 -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
 mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
 }

 .animated-scrolling-content {
 display: flex;
 align-items: center;
 white-space: nowrap;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 }

 .animated-scrolling-content.scroll-left {
 animation-name: scrollLeftSeamless;
 animation-duration: 40s;
 }

 .animated-scrolling-content.scroll-right {
 animation-name: scrollRightSeamless;
 animation-duration: 35s;
 }

 .animated-scrolling-content:hover {
 animation-play-state: paused;
 }

 .tech-item-animated {
 display: flex;
 align-items: center;
 gap: 22px;
 flex-shrink: 0;
 padding-right: 22px;
 }

 .tech-text {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 letter-spacing: -0.02em;
 line-height: 1.3;
 color: var(--text-primary);
 white-space: nowrap;
 }

 .tech-text.gray {
 color: var(--text-secondary);
 }

 .tech-separator-animated {
 width: 12px;
 height: 12px;
 flex-shrink: 0;
 fill: var(--border-light);
 }

 @keyframes scrollLeftSeamless {
 0% {
 transform: translateX(0%);
 }
 100% {
 transform: translateX(calc(-100% / 3));
 }
 }

 @keyframes scrollRightSeamless {
 0% {
 transform: translateX(calc(-100% / 3));
 }
 100% {
 transform: translateX(0%);
 }
 }

 @media (prefers-reduced-motion: reduce) {
 .animated-scrolling-content {
 animation: none;
 }

 .hero-section {
 opacity: 1;
 animation: none;
 }

 .js .section {
 opacity: 1;
 transform: none;
 transition: none;
 }
 }

 .skills-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 width: 100%;
 }

 .skill-card {
 flex: 1;
 background-color: var(--text-primary);
 border-radius: 32px;
 padding: 22px;
 display: flex;
 flex-direction: column;
 gap: 20px;
 color: var(--bg-primary);
 height: 144px;
 transition: transform 0.5s ease;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 backface-visibility: hidden;
 transform: translateZ(0);
 will-change: transform;
 }

 .skill-card:hover {
 transform: rotate(5deg) scale(1.05) translateZ(0);
 }

 .skill-number {
 font-family: 'Figtree', sans-serif;
 font-size: 32px;
 font-weight: 600;
 line-height: 110%;
 letter-spacing: -0.02em;
 }

 .skill-label {
 font-family: 'Figtree', sans-serif;
 font-size: 14px;
 font-weight: 500;
 line-height: 140%;
 letter-spacing: -0.02em;
 width: 90px;
 }

 .timeline-item {
 display: flex;
 flex-direction: column;
 gap: 30px;
 width: 100%;
 }

 .timeline-header {
 display: flex;
 flex-direction: column;
 gap: 5px;
 }

 .timeline-content {
 display: flex;
 flex-direction: column;
 gap: 10px;
 }

 .separator {
 width: 100%;
 height: 1px;
 background-color: var(--border-light);
 margin: 22px 0;
 }

 .faq-list {
 display: flex;
 flex-direction: column;
 }

 .faq-item {
 border-bottom: 1px solid var(--border-light);
 padding: 20px 0;
 }

 .faq-item:first-child {
 padding-top: 0;
 }

 .faq-item:last-child {
 border-bottom: none;
 padding-bottom: 0;
 }

 .faq-item summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 cursor: pointer;
 list-style: none;
 }

 .faq-item summary::-webkit-details-marker {
 display: none;
 }

 .faq-item summary::after {
 content: '+';
 flex-shrink: 0;
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 400;
 color: var(--text-secondary);
 transition: transform 0.3s ease;
 }

 .faq-item[open] summary::after {
 transform: rotate(45deg);
 }

 .faq-answer {
 height: 0;
 overflow: hidden;
 transition: height 0.3s ease;
 }

 .faq-item[open] .faq-answer {
 height: auto;
 }

 .faq-answer .text-body {
 margin-top: 12px;
 }

 .contact-info {
 display: flex;
 flex-direction: column;
 gap: 30px;
 }

 .contact-header {
 display: flex;
 flex-direction: column;
 gap: 5px;
 }

 .contact-details {
 display: flex;
 flex-direction: column;
 gap: 5px;
 }

 .availability {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 0px;
 }

 .status-dot {
 width: 12px;
 height: 12px;
 background-color: rgb(var(--status-color));
 border-radius: 50%;
 animation: pulse 2s infinite;
 box-shadow: 0 0 0 0 rgba(var(--status-color), 0.7);
 }

 @keyframes pulse {
 0% {
 box-shadow: 0 0 0 0 rgba(var(--status-color), 0.7);
 }
 50% {
 box-shadow: 0 0 0 8px rgba(var(--status-color), 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(var(--status-color), 0);
 }
 }

 .social-links {
 display: flex;
 gap: 8px;
 }

 .social-link {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid var(--border-glass);
 background-color: var(--nav-bg);
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 text-decoration: none;
 transition: all 0.3s ease;
 }

 .social-link:hover {
 transform: translateY(-8px);
 }

 .social-link svg {
 width: 22px;
 height: 22px;
 fill: var(--text-primary);
 transition: all 0.3s ease;
 }

 .booking-btn {
 background-color: var(--text-primary);
 color: var(--bg-primary);
 border: none;
 border-radius: 32px;
 padding: 12px 16px;
 font-family: 'Figtree', sans-serif;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: -0.02em;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-top: 20px;
 width: fit-content;
 text-decoration: none;
 }

 .booking-btn svg {
 width: 16px;
 height: 16px;
 }

 /* le footer reprend la grille des sections pour tomber dans la colonne de
 droite ; le conteneur espace ses enfants de 128px, on remonte donc le
 footer pour retrouver les 30px qui séparent "disponible" des icônes */
 .footer {
 margin-top: -98px;
 }

 .footer .text-label {
 color: var(--text-secondary);
 }

 .modal {
 position: fixed;
 inset: 0;
 background: var(--nav-bg);
 backdrop-filter: blur(24px);
 -webkit-backdrop-filter: blur(24px);
 display: none;
 z-index: 1000;
 opacity: 0;
 transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .modal.active {
 display: flex;
 opacity: 1;
 }

 .modal-layout {
 display: flex;
 width: 100%;
 height: 100vh;
 height: 100dvh;
 }

 .modal-images-section {
 flex: 1;
 overflow-y: hidden;
 overflow-x: hidden;
 padding: 150px 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 opacity: 0;
 transform: scale(0.97);
 transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 cursor: grab;
 }

 .modal-images-section:active {
 cursor: grabbing;
 }

 .modal.active .modal-images-section {
 opacity: 1;
 transform: scale(1);
 }

 .carousel-wrap {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 42px;
 width: 100%;
 }

 .image-carousel {
 width: 100%;
 overflow: hidden;
 padding: 78px 0;
 -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
 mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
 }

 .image-carousel-track {
 display: flex;
 align-items: center;
 gap: 36px;
 width: max-content;
 will-change: transform;
 }

 .carousel-progress {
 position: relative;
 width: 330px;
 height: 4px;
 background: var(--border-light);
 border-radius: 2px;
 overflow: hidden;
 opacity: 0;
 transition: opacity 0.4s ease 0.5s;
 }

 .modal.active .carousel-progress {
 opacity: 1;
 }

 .carousel-progress-thumb {
 position: absolute;
 top: 50%;
 left: 0;
 width: 66px;
 height: 4px;
 background: var(--text-primary);
 border-radius: 2px;
 transform: translate(-100%, -50%);
 }

 .carousel-item {
 position: relative;
 flex-shrink: 0;
 width: 420px;
 opacity: 0;
 transform: scale(1.1);
 filter: blur(16px);
 transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .modal.active .carousel-item {
 opacity: 1;
 transform: scale(1);
 filter: blur(0);
 }

 .carousel-item:nth-child(1) { transition-delay: 0.18s; }
 .carousel-item:nth-child(2) { transition-delay: 0.24s; }
 .carousel-item:nth-child(3) { transition-delay: 0.3s; }
 .carousel-item:nth-child(4) { transition-delay: 0.36s; }
 .carousel-item:nth-child(n+5) { transition-delay: 0.42s; }

 .carousel-item-frame {
 width: 100%;
 height: 420px;
 perspective: 1000px;
 transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .carousel-item:hover .carousel-item-frame {
 transform: scale(1.03);
 }

 #projectModal3 .carousel-item {
 width: 330px;
 }

 #projectModal3 .carousel-item-frame {
 height: 495px;
 }

 .carousel-item-flip {
 position: relative;
 width: 100%;
 height: 100%;
 cursor: pointer;
 transform-style: preserve-3d;
 transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .carousel-item.flipped .carousel-item-flip {
 transform: rotateY(180deg);
 }

 .carousel-item-face {
 position: absolute;
 inset: 0;
 backface-visibility: hidden;
 border-radius: 32px;
 overflow: hidden;
 }

 .carousel-item-face-front img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 -webkit-user-drag: none;
 user-select: none;
 }

 .carousel-item-face-back {
 transform: rotateY(180deg);
 background: var(--text-primary);
 color: var(--bg-primary);
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 gap: 9px;
 padding: 30px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }

 .carousel-item-back-title {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 line-height: 130%;
 letter-spacing: -0.02em;
 }

 .carousel-item-back-specs {
 font-family: 'Figtree', sans-serif;
 font-size: 14px;
 font-weight: 500;
 line-height: 140%;
 letter-spacing: -0.02em;
 opacity: 0.7;
 text-transform: lowercase;
 }

 .carousel-item-back-desc {
 font-family: 'Figtree', sans-serif;
 font-size: 16px;
 font-weight: 500;
 line-height: 170%;
 letter-spacing: -0.02em;
 opacity: 0.85;
 }

 .carousel-item-caption {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 margin-top: 21px;
 display: flex;
 flex-direction: column;
 gap: 2px;
 opacity: 0;
 transform: translateY(-6px);
 transition: opacity 0.3s ease, transform 0.3s ease;
 }

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

 .carousel-item-title {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 line-height: 130%;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 }

 .carousel-item-desc {
 font-family: 'Figtree', sans-serif;
 font-size: 14px;
 font-weight: 500;
 line-height: 140%;
 letter-spacing: -0.02em;
 color: var(--text-secondary);
 }

 .modal-close {
 position: absolute;
 top: 40px;
 right: 40px;
 width: 50px;
 height: 50px;
 background: var(--nav-bg);
 border: 1px solid var(--border-glass);
 border-radius: 25px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 z-index: 10;
 opacity: 0;
 transform: scale(0.9);
 }

 .modal.active .modal-close {
 opacity: 1;
 transform: scale(1);
 transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
 }

 .modal.active .modal-close:hover {
 transform: translateY(-8px);
 }

 .modal-close svg {
 width: 20px;
 height: 20px;
 fill: var(--text-primary);
 }

 .modal-title {
 font-family: 'Figtree', sans-serif;
 font-size: 20px;
 font-weight: 600;
 letter-spacing: -0.02em;
 color: var(--text-primary);
 text-align: center;
 opacity: 0;
 filter: blur(8px);
 transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, filter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
 }

 .modal.active .modal-title {
 opacity: 1;
 filter: blur(0);
 }

 @media (max-width: 1199px) and (min-width: 810px) {
 .main-container {
 max-width: 750px;
 }

 .hero-section,
 .section {
 gap: 25px;
 }

 .section-content {
 max-width: 440px;
 }

 .hero-title {
 font-size: 18px;
 }

 .text-heading {
 font-size: 18px;
 }

 .text-section-title {
 font-size: 18px;
 }

 .modal-title {
 font-size: 18px;
 }

 .carousel-item-title,
 .carousel-item-back-title {
 font-size: 18px;
 }

 .tech-text {
 font-size: 18px;
 }
 }

 @media (max-width: 809px) {
 .main-container {
 width: 390px;
 padding: 30px 30px 100px;
 gap: 100px;
 }

 .hero-section {
 flex-direction: column;
 gap: 50px;
 }

 .hero-left,
 .hero-right {
 width: 100%;
 }

 .section {
 flex-direction: column;
 gap: 20px;
 align-items: flex-start;
 }

 .section-title,
 .section-content {
 width: 100%;
 position: static;
 align-self: flex-start;
 }

 .projects-main-layout {
 flex-direction: column;
 height: auto;
 width: 100%;
 }

 .projects-left-column,
 .projects-right-column {
 width: 100%;
 }

 .project-card.horizontal,
 .project-card.vertical,
 .project-card.bottom-single {
 height: 330px;
 }

 .skills-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
 }

 .skill-card {
 height: 110px;
 padding: 16px;
 gap: 12px;
 }

 .skill-number {
 font-size: 24px;
 }

 .skill-label {
 font-size: 11px;
 width: 100%;
 }

 .hero-title {
 font-size: 16px;
 }

 .text-heading {
 font-size: 16px;
 }

 .text-section-title {
 font-size: 16px;
 }

 .text-body {
 font-size: 14px;
 }

 .text-small {
 font-size: 13px;
 }

 .carousel-item-caption {
 opacity: 1;
 transform: translateY(0);
 }

 .nav-menu {
 bottom: 16px;
 bottom: calc(16px + env(safe-area-inset-bottom, 0px));
 }

 .modal-close {
 top: 20px;
 top: calc(16px + env(safe-area-inset-top, 0px));
 right: 20px;
 right: calc(16px + env(safe-area-inset-right, 0px));
 width: 42px;
 height: 42px;
 }

 .modal-title {
 font-size: 16px;
 }

 .modal-images-section {
 padding: 56px 20px;
 }

 .carousel-wrap {
 gap: 24px;
 }

 .image-carousel {
 padding: 36px 0;
 }

 .carousel-item {
 width: 230px;
 }

 .carousel-item-frame {
 height: 230px;
 }

 #projectModal3 .carousel-item {
 width: 200px;
 }

 #projectModal3 .carousel-item-frame {
 height: 300px;
 }

 .carousel-progress {
 width: 180px;
 }

 .carousel-progress-thumb {
 width: 36px;
 }

 .carousel-item-title,
 .carousel-item-back-title {
 font-size: 16px;
 }

 .carousel-item-back-desc {
 font-size: 14px;
 }

 .tech-text {
 font-size: 16px;
 }

 .animated-scrolling-content.scroll-left {
 animation-duration: 30s;
 }

 .animated-scrolling-content.scroll-right {
 animation-duration: 25s;
 }

 .footer {
 margin-top: -70px;
 }

 .footer .section-title {
 display: none;
 }

 }