/* ===== NAV ===== */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(90deg,#1A0604,#3B0000,#5C0000);
  backdrop-filter: blur(12px);
  border-bottom: 0.1px solid #D4A017;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

/* HEADER LOGO */
.header-logo-img{
  width:55px;
  height:55px;
  object-fit:contain;
  border-radius:50%;
  display:block;
}

.header-logo-text{
  color:#ffffff;
  font-weight:700;
  line-height:1.2;
  font-size:15px;
  font-family:'Cinzel', serif;
}

.header-logo-text span{
  display:block;
  font-size:12px;
  letter-spacing:1px;
  color:#D4A017;
}

.nav-links {
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
}

.nav-links a {
  font-family:'Cinzel', serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#ffffff;
  text-decoration:none;
  transition:color 0.3s;
}

.nav-links a:hover {
  color:var(--gold);
}

.cta-btn.primary {

  background: linear-gradient(
    135deg,
    #C00000,
    #7A0000
  );

  color: #ffffff !important;

  padding: 8px 20px;

  border-radius: 4px;

  font-weight: 700 !important;

  transition:
  background 0.3s,
  transform 0.2s !important;

}
.cta-btn.primary:hover {

  background: #2a0602 !important;

  box-shadow:
  0 8px 32px rgba(167,128,20,0.5);

  transform: translateY(-1px);

}


/* ========================================= */
/* MOBILE NAVBAR */
/* ========================================= */

.menu-toggle{

    display:none;

    font-size:24px;

    color:#ffffff;

    cursor:pointer;
}

/* ========================================= */
/* TABLET */
/* ========================================= */

@media screen and (max-width:1024px){

    .main-nav{

        padding:0 20px;
    }

    .nav-links{

        gap:18px;
    }

    .nav-links a{

        font-size:10px;
    }

}

/* ========================================= */
/* MOBILE */
/* ========================================= */

@media screen and (max-width:768px){

    .main-nav{

        height:70px;

        padding:0 18px;
    }

    /* LOGO */

    .header-logo-img{

        width:48px;
        height:48px;
    }

    .header-logo-text{

        font-size:12px;
    }

    .header-logo-text span{

        font-size:9px;

        letter-spacing:0.5px;
    }

    /* MENU BUTTON */

    .menu-toggle{

        display:block;

        z-index:9999;
    }

    /* MOBILE MENU */

    .nav-links{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:linear-gradient(
        180deg,
        #1A0604,
        #3B0000,
        #5C0000
        );

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        padding:100px 30px;

        gap:26px;

        transition:0.4s ease;

        z-index:999;
    }

    .nav-links.active{

        right:0;
    }

    .nav-links li{

        width:100%;
    }

    .nav-links a{

        font-size:13px;

        width:100%;

        display:block;
    }

    /* BUTTON */

    .cta-btn.primary{

        width:100%;

        justify-content:center;

        text-align:center;
    }

}