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

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px; /* Very thin vertical scrollbar */
    height: 4px; /* Very thin horizontal scrollbar */
}
  
::-webkit-scrollbar-thumb {
background-color: #000; /* Black color for the scrollbar thumb */
border-radius: 3px; /* Slightly rounded corners */
}

::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Background color for the scrollbar track */
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base-mobile);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background-color: var(--color-white);
    font-size-adjust: 0.35;
    font-feature-settings: "kern";
}

@media (min-width: 1280px) {
    body {
        line-height: var(--line-height-base);
            font-size-adjust: 0.45;

    }
}

/* Typography */
h1 {
    font-size: var(--font-size-h1-mobile);
    font-weight: var(--font-weight-light);
    line-height: 100%;
    font-stretch: condensed;
    transform: scaleX(1.2);
}

@media (min-width: 768px) {
    h1 {
        font-size: var(--font-size-h1);
    }
}

h2 {
    font-size: var(--font-size-h2-mobile);
    font-weight: var(--font-weight-medium);
margin-bottom: -0.3rem    
}

@media (min-width: 1280px) {
    h2 {
        font-size: var(--font-size-h2);
            margin-bottom: 1rem;

    }
}

h3 {
    font-size: var(--font-size-h3-mobile);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-sm);
}

@media (min-width: 1280px) {
    h3 {
        font-size: var(--font-size-h3);
    }
}

a {
    font-family: var(--font-primary);
    color: black;
}

p {
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-medium);
}

img {
    max-width: 100%;
    height: auto;
}





/* Burger Menu */
.burger-menu {
    position: fixed;
    top: 2rem;
    right: 2rem;
}

/* Burger button */
.burger {
    position: relative;
    width: 40px;
    height: 25px;
    cursor: pointer;
    z-index: 1;
    border: none;
    background: transparent;
}
  
.burger span {
    position: absolute;
    height: 1px;
    width: 100%;
    background: black;
    left: 0;
    transition: all 0.3s ease;
}
  
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger span:nth-child(3) { bottom: 0; }

.burger.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 50%;
}

.burger.open span:nth-child(2) {
    opacity: 0;
}

.burger.open span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 50%;
}
  
/* Menu container */
.main-menu {
    position: absolute;
    top: 45px;
    right: 0px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.5rem;
    min-width: 150px;
    opacity: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.main-menu.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.main-menu a {
    color: black;
    text-decoration: none;
    font-size: 1rem;
}

@media (max-width: 768px) {
	.burger-menu {
	    position: fixed;
	    top: 20px;
	    right: 20px;
	}
}

/* Helpers */
.w-100 {
    width: 100%;
}

.header-content h1 img{
		  width:340px;
	}
@media (min-width: 768px) {

	.header-content h2{
		  font-weight: var(--font-weight-light);
		  font-size: 44px;
	}
	
	
	.header-content h1 img{
		  width:600px;height:236px;
	}
}
.visually-hidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
}

@media (max-width: 1279px) {
    .desktop-only, .desktop_carte {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .mobile-only {
        display: none;
    }
}

/* Fade-in for images */
.hidden-img {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.fade-in {
    opacity: 1;
}

/* Header */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50% 0;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

@media (min-width: 768px) {
    header {
        padding: 20% 0;
    }
}

/* Logo */
.logo-to-home {
    position: fixed;
    top: 7px;
    left: 8px;
    opacity: 0;
    visibility: hidden;
    width: 38px;
    height: 40px;
    z-index: 1;
    transition: opacity 0.5s ease, visibility 0s 0.5s; /* Transition for opacity */
}

.show-logo {
  opacity: 1; /* Make the logo fully visible */
  visibility: visible; /* Make the logo interactive */
  transition: opacity 0.5s ease, visibility 0s 0s; /* Apply transition when showing */
}

.logo-to-home svg {
   max-width: 100%;
   height: auto;
}

@media (min-width: 1024px) {
    .logo-to-home {
        top: 20px;
        left: 20px;
        width: 60px;
        height: 60px;
    }
}

/* Galleries */
.unstructured-gallery-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.unstructured-gallery-content.parallax-content {
    padding: 0;
}

.two-items .unstructured-gallery-content:first-child {
    margin-bottom: 4rem;
}

.unstructured-gallery-container.column {
    gap: 1rem;
}

.unstructured-gallery-text {
    margin-bottom: 1rem;
}

.main-img-container,
.small-img-container {
    flex: 1;
}

.main-img-container {
    display: flex;
    align-items: center;
}

.small-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: fit-content;
}

.column .small-img-container {
    flex-wrap: nowrap;
}

.main-img {
    width: 100%;
    object-fit: cover;
}

.small-img img {
    aspect-ratio: 1 / 1;
}

.horizontal-one-row-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .unstructured-gallery-section.two-items  {
        flex-direction: column;
    }

    .two-items .unstructured-gallery-content:first-child {
        margin-bottom: 8rem;
    }

    .unstructured-gallery-container {
        flex-direction: row;
        gap: 0;
    }

    .unstructured-gallery-text {
        margin-bottom: 2.5rem;
    }

    .unstructured-gallery-container.column {
        flex-direction: column;
        gap: 4rem;
    }

    .column .small-img-container {
        gap: 4rem;
    }

    .small-img-container {
        flex-wrap: wrap;
    }

    .small-img {
        max-width: 44%;
    }

    .horizontal-one-row-gallery {
        flex-wrap: nowrap;
        gap: 4rem;
    }
}

/* Animation for fading out the images */
.f-fadeOut {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

/* Animation for fading in the images */
.f-fadeIn {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
}