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

/* HEADER */
header {
  position:fixed;top:0;left:0;width:100%;
  padding: 50px 0 0 0;
  z-index:1001;
  background:transparent;
   -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;    
    transition: all 0.3s ease-in-out;
}
header.bgcolor {
  background: var(--bg-color);
background: linear-gradient(188deg, rgb(0 0 0) 0%, rgb(0 0 0 / 77%) 43%, rgb(0 0 0 / 70%) 100%);
    padding: 0 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;    
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 0px 50px #00000015;
    padding: 25px 0;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}
.header-flex {
 display:flex;
 justify-content:space-between;
 align-items:center;
}
.logo{
 
  width: 20%;
}
.logo a {
   color:#fff;
  font-weight:200;
  font-family: var(--font-two);
  font-size: 1.3em;
}
/* HAMBURGER */
.hamburger{
  width: 70px;
  height:13px;
  display:flex;flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  align-items: flex-end;
}
.hamburger span{
  display:block;
  height:2px;
  background: var(--maincolor);
  transition:0.35s ease;
}
.hamburger span:nth-child(2) {
  width: 35px;
}
.hamburger span:nth-child(1) {
  width: 60px;
}
/* Hamburger → X animation */
.hamburger.active span:nth-child(1){
 transform: translateY(11px) rotate(45deg);
    width: 40px;
}
.hamburger.active span:nth-child(2){
 opacity: 1;
     transform:translateY(0) rotate(-45deg);
    width: 40px;
}
.right-sec {
    position: relative;
    z-index: 1;
    width: 80%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    margin: 0 100px 0 0;
}

/* OVERLAY FULLSCREEN MENU */
.overlay{
  position:fixed;inset:0;
  background: #010101;
  transform:translateY(-120%);
  z-index:1000;
  padding: 50px 0;
 display: flex;
    width: 100%;
    align-items: center;
  
}

/* NAV ITEMS */
.nav-item{
  font-size:3.5vw;
  color:#fff;
  position:relative;cursor:pointer;
  display:inline-block;
  padding:5px 0;
  overflow:hidden;
  font-family: var(--font-two)!important;
  line-height: 1.2;
}

/* split text letters */
.char{
  display:inline-block;
  transform:translateY(35px);
  opacity:0;
}

/* background panel */
.bg-panel{
  position:absolute;left:-10%;right:-10%;top:0;bottom:0;
  background:rgba(255,255,255,0.06);
  z-index:-1;
  transform:translateX(-100%);
}

/* underline */
/* .nav-item::after{
  content:"";
  position:absolute;left:0;bottom:0;height:4px;width:100%;
  background:linear-gradient(90deg,#EDA8C4,#fff);
  transform:scaleX(0);
  transform-origin:left;
  transition:0.35s ease;
} */
/* .nav-item:hover::after{
  transform:scaleX(1);
} */

/* magnetic hover */
.nav-item:hover{
  transform:scale(1.03);
}

/* RESPONSIVE */
@media(max-width:768px){
  .nav-item{font-size:20px};
}
.header-contact {
  display: flex;
  align-items: center;
  gap: 50px;
  justify-content: center;
}
.header-contact a {
  font-family: var(--font-two);
  font-size: 1.3em;
   display: flex;
  align-items: center;
    gap: 5px;
    font-weight: 200;
   
}
.menu-split {
  display: flex;
    justify-content: center;
    padding: 0 0;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
.menu-split .left-menu {
  width: 50%;
}
.menu-split .right-sec-menu {
  width: 50%;
  text-align: right;
}
.menu-split .right-sec-menu img {
  height: 75dvh;
}
.menu-split .left-menu a {
  display: block;
}