* {
	box-sizing: border-box;
}

body {
  font-family: "montserrat-alternates", sans-serif;
  font-weight: 10;
  font-style: normal;
  margin: 0;
  padding: 0;
}

.tab-navigation {
    position: fixed;
    top: 20px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure perfect center */
    display: flex;
	flex-direction: row; /* Ensure horizontal layout */
    justify-content: center; /* Center images horizontally */
    align-items: center; /* Vertically align images */
    gap: 20px;
    z-index: 1000;
	width: auto;
}

.tab-button {
    width: 70px;
    height: 70px;
	object-fit: contain; 
    cursor: pointer;
    transition: transform 0.3s ease;
}

.tab-button:hover {
    transform: scale(1.05);
}

.tab-button.active {
    /* Optional: Add a style to indicate the active button */
    opacity: 1;
}

.boxvideo1 {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent any overflow */
}

.boxvideo1 video {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    object-fit: cover; /* Cover the entire box while maintaining aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
}

.box {
	width:100%;
	height: 100vh;
	top: 0;
    left: 0;
	background-image: url('me1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: fixed;
	background-position-y: 40%;
}
.box2 {
	width:100%;
	height: 100vh;
	background-image: url('mountain.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-position-y: 70%;
	background-color: rgb(10, 10, 10);
}
.box3 {
	width:100%;
	height: 50vh;
	background-image: url('sea.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: absolute;
	background-position-y: 95%;
	background-color: rgb(10, 10, 10);
}
.box4 {
	width:100%;
	height: 100vh;
	background-image: url('greentrees.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: absolute;
	background-blend-mode: difference;
	background-position-y: 10%;
	background-color: rgb(214, 96, 49);
}
.box5 {
	width:100%;
	height: 100vh;
	background-image: url('paraglide.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: absolute;
	background-blend-mode: difference;
	background-position-y: 50%;
	background-color: rgb(214, 96, 49);
}
.box6 {
	width:100%;
	height: 100vh;
	background-image: url('surfbw.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: absolute;
	background-blend-mode: difference;
	background-position-y: 15%;
	background-color: rgb(20, 140, 161);
}