@charset "UTF-8";
/* Menu - - - - - - - - - - - - - - - - - - - - - -*/
body {margin:0;padding:0;}
.header {background-color:transparent;}

* {transition:all 0.8s;-webkit-transition:all 0.8s;font-family: 'Roboto', sans-serif;}
.header-nav {position:relative;float:left;margin-top:20px; auto;z-index: 15; margin-left:50px;} /* menu position L/R */
.header-nav ul {position:absolute;float:left;list-style:none;margin:0;padding:0;}
.header-nav ul li {position:relative;float:left;border-left:0px solid rgba(0,0,0,1.00);} /* menu: lines left */
.header-nav ul li ul {margin-left:-4px;z-index: 20;overflow: visible}
.header-nav > ul {position:relative;}
.header-nav > ul > li:last-child {border-right:0px solid rgba(0,0,0,1.00);} /* menu: line right, omnly of last menu item */

.header-nav > ul > li > .header-nav-link + ul li {width:180px;opacity:0;height:0;margin-top:0px;border-bottom:4px solid rgba(206,206,206,0.00);} /* menu: sublink under line */
.header-nav > ul > li:hover .header-nav-link + ul > li {opacity:1;height:auto;margin-top:0;} /* menu: ?*/
.header-nav .header-nav-link {float:left;text-decoration:none;color:#000000;font-weight:600;font-size:14px; padding:13px;width:80%;z-index: 15;border-radius: 1px} /* menu box BG: all link hover color + size*/
.header-nav .header-nav-link:hover {background-color:rgba(235,234,234,1.00) !important;}/* menu: mainlink hover BG color*/

.header-nav .header-nav-top-link {padding: 25px 15px -25px;} /* menu: padding */
.header-nav ul li:hover .header-nav-link {background-color:#AAA4A4;} /* menu: sublink hover BG color*/
.header-nav ul li:hover .header-nav-top-link {background-color:rgba(214,214,214,0.80);} /* menu: mainlink BG*/

.header-nav > ul > li > .header-nav-top-link + ul {top:49px;}/* menu: sublink drop distance*/
.header-nav > ul > li:hover .header-nav-sub-link {background-color:#AAA4A4;z-index:100;margin-left: 5px;height: 30px;display: flex;align-items: center;} /* menu: sublink BG color*/


@media (max-width: 767px) {
  .header-nav > ul > li {width:100%;border-right:4px solid rgba(224, 52, 106, 1);border-bottom:2px solid rgba(224, 52, 106, 1);}
  .header-nav > ul > li:first-child > a {font-size:18px;font-weight:400;}
  .header-nav > ul > li:last-child {border-bottom:none;}
  .header-nav > ul > li > .header-nav-top-link + ul {position:relative;top:0px;left:4px;width:100%;}
  .header-nav > ul > li > .header-nav-top-link + ul li {position:relative;float:left;border-left:none;width:100%;}
}
/* Layer 2: Alignment adjustments */
.layer-2-index {
    position: fixed;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    background-color: #000;
    z-index: 2;
    overflow: hidden; /* ✨ Removes both scrollbars */
    padding: 3px 3px;
    padding-right: 3px; /* Adjusts right padding */
    box-sizing: border-box; /* Ensures padding doesn’t overflow */
  }

/* Layer 3: Main logo container with animation */
.layer-3 {
    position: absolute;
    width: 50%; /* Cover only half the screen */
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInFromRightHalf 3s ease-in-out forwards; /* Use updated animation */
    animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
}

/* Specific animation for the logo */
.layer-3 .logo {
    width: 400px; /* Adjust logo size */
    animation: fadeInLogo 5s ease-in-out forwards; /* Custom animation for logo */
}
@media screen and (max-width: 768px) {
    .layer-3 {
        width: 100%; /* Full width on smaller screens */
        justify-content: center; /* Center the logo */
    }
    .layer-3 .logo {
        width: 80%; /* Adjust logo size for smaller screens */
    }
    
}

/* Keyframes for sliding animation of layer from the right */
@keyframes slideInFromRightHalf {
    from { transform: translateX(100%); } /* Start from the right */
    to { transform: translateX(0); } /* End in original position */
}

/* Keyframes for logo fade-in effect */
@keyframes fadeInLogo {
    from { opacity: 0; transform: scale(1); } /* Start smaller and transparent */
    to { opacity: 1; transform: scale(1); }     /* Full size and opacity */
}

.image-grid {
    width: 50%;
    height: 100%; /* Matches the height of .layer-2-index */
    margin-top: -20px;
    background-color: black; /* Black frame */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Defines three equal columns */
    grid-template-rows: 1fr 1fr 1fr; /* Defines three equal rows */
    grid-gap: 0; /* Removes extra spacing between images */
    box-sizing: border-box;
}

/* Define specific spans to control layout */
.grid-image:nth-child(1) {
    grid-column: 1 / span 2; /* Spans two columns */
    grid-row: 1 / span 2;    /* Spans two rows */
}

.grid-image:nth-child(2) {
    grid-column: 3; /* Third column */
    grid-row: 1;    /* First row */
}

.grid-image:nth-child(3) {
    grid-column: 1; /* First column */
    grid-row: 3;    /* Third row */
}

.grid-image:nth-child(4) {
    grid-column: 2; /* Second column */
    grid-row: 3;    /* Third row */
}

.grid-image:nth-child(5) {
    grid-column: 3; /* Third column */
    grid-row: 2 / span 2; /* Spans two rows */
}

/* Style images within cells */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 300px;
    gap: 5px;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100vw;
  }
  
  .grid-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 4px solid black;
    animation: fadeIn 2s ease-in-out forwards;
    display: block;
  }
  
  .grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
/* Custom animations for specific images */
.grid-image:nth-child(1) {
    animation: slideInFromRight 2s ease-in-out forwards; /* Slide in from right */
	animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
}

.grid-image:nth-child(2) {
    animation: slideInFromTop 2s ease-in-out forwards; /* Slide in from top */
	animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
}

.grid-image:nth-child(3) {
    animation: slideInFromRight 2s ease-in-out forwards; /* Slide in from right */
	animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
}

.grid-image:nth-child(4) {
    animation: slideInFromTop 2s ease-in-out forwards; /* Slide in from top */
	animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
}

.grid-image:nth-child(5) {
    animation: slideInFromBottom 2s ease-in-out forwards; /* Slide in from bottom */
	animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
}

/* Keyframes for sliding animations */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.grid-image {
    transition: opacity 2s cubic-bezier(0.1, 0.8, 0.1, 1);
    opacity: 1;
}

.grid-image.fade-out {
    opacity: 0; /* Make the image fade out */
}

.layer-4 {
    position: fixed;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 1001; /* Ensure it's above other layers */
    transition: left 1.3s cubic-bezier(0.8, 0.4, 0.1, 1); /* Smooth swipe transition */
}

.layer-4 {
  position: fixed;
  top: 0;
  left: -100%; /* Start off-screen */
  width: 100vw;
  height: 100vh;
  background-color: white; /* White background */
  z-index: 1000; /* Ensure it covers all other layers */
  transition: left 0.7s cubic-bezier(0.1, 0.8, 0.1, 1); /* Smooth swipe transition */
}