/* Body Copy - Roboto Light (300) */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
	background-color: #111111E3;
}

/* Headings - Roboto Thin (100) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight:100;
    margin: 0;
}

/* Optional: Better Typography */
p {
    line-height: 1.6;
    margin-bottom: 15px;
}

h1 { font-size: 42px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

/* Smooth fade for mobile menu */
.menu-open { transform: translateY(0%); opacity: 1; pointer-events: auto; }
.menu-closed { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* Default hamburger position */
.line1 { transform: translateY(-6px); }
.line2 { transform: translateY(0); }
.line3 { transform: translateY(6px); }

/* When open → transform to X */
.menu-open-btn .line1 {
  transform: rotate(45deg);
}

.menu-open-btn .line2 {
  opacity: 0;
}

.menu-open-btn .line3 {
  transform: rotate(-45deg);
}

.group:hover .arrow-animate {
	animation: slideArrow 0.6s ease forwards;
}

@keyframes slideArrow {
	0%   { transform: translateX(0); opacity: 1; }
	50%  { transform: translateX(12px); opacity: 0; }
	51%  { transform: translateX(-12px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}