* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--index: calc(1vw + 1vh);
	--transition: 1.25s cubic-bezier(.2, .6, 0, 1);
    --red: #F26419;
    --orange: #F6AE2D;
    --dark-blue: #33658A;
    --light-blue: #86BBD8;
    --dark: #2F4858;
}
.container__center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
}
#landing__area{
    width: 100%;
    height: 10vh;
}

#landing__area nav{
    height: 20%;
    width: 90%;
}
a{text-decoration: none;}

ul li{list-style: none;}
.center__row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .logo{
    color: var(--orange);
    cursor: pointer;
    z-index: 999;
}

nav a{
    color: var(--light-blue);
    font-size: 20px;
    position: relative;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    letter-spacing: .5px;
    margin: 0 15px;
    padding: 0 5px;
}
nav a:after{
    content: "";
    position: absolute;
    background-color: var(--orange);
    height: 3px;
    width: 0%;
    left: 0;
    bottom: -10px;
    transition: .3s;
}
nav a:hover:after{
    width: 100%;
}
nav a:hover{color: var(--orange);}

html, body {
	height: 100%;
	overflow: hidden;
    	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/bg.jpeg");

	background-size: cover;
	background-position: center;
}
.main-wrapper {
	height: 100%;
	display: flex;
	gap: var(--index);
}
.slider {
	transform: rotate(12.5deg);
	overflow: visible;
}
.slider:nth-child(odd) {
	transform: rotate(192.5deg);
}
.slider .slider__wrapper {
	transition: var(--transition)!important;
	will-change: transform;
}
.slider__item {
	width: 21vw;
	margin-bottom: calc(var(--index) * 2.6);
	cursor: pointer;
	transition: transform var(--transition);
	will-change: transform;
	box-shadow: rgb(0 0 0 / .15) 0 0 30px 10px;
}
.slider__item:hover {
	transform: scale(1.04);
}
.slider__img {
	width: 100%;
	height: 100%;
	background-size: cover;
	border-radius: 8px;
}
.slider:nth-child(odd) .slider__img {
	transform: rotate(-180deg);
}
