/*******************************************************************************************************/
/*******************************************************************************************************/
/*Navigation*/
/*******************************************************************************************************/


/* Tablet and Mobile Styles */
@media (max-width: 1199px) {
    header .components {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;

            position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: +9999999999999999;
    box-sizing: border-box;
    }
    header .components #logotype {
        max-width: 200px;
        
    }
    header .components #logotype a {
        display: flex;
        align-items: center;
        justify-content: center;
 
    }
     header .top-buttons {
        display: none;

    }
     .top-bottom-buttons  {
   transform: scale(.9);
}
    .top-bottom-buttons .left .gold-btn,
      .top-bottom-buttons .right .gold-btn {
    justify-content: center;
}
    /* Mobile Menu Toggle - Modified for 2 lines */
    .menu-toggle {
        display: block;
background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
        position: fixed;
        top: 17px;
        right: 10px;
    }

    .hamburger {
        display: block;
        position: relative;
        width: 18px;
        height: 2px;
        background-color: var(--ocn-black);
        transition: all 0.3s ease;
        margin: 6px 0;
    }

    .hamburger::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 2px;
            background-color: var(--ocn-black);
        top: -6px;
        left: 0;
        transition: all 0.3s ease;
    }

    /* Menu Toggle Active State - Modified for 2 to 1 line collapse */
    .menu-toggle[aria-expanded="true"] .hamburger {
        transform: rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .hamburger::before {
        transform: rotate(-90deg);
        top: 0;
    }


    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color:var(--ocn-off-white);
        flex-direction: column;
        justify-content: flex-start;
        padding: 60px 40px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: +11;
      
        padding: 50px 20px 20px 20px; 
        box-sizing: border-box;
    }

    .main-nav.active {
        transform: translateX(0);
    }

    header .menu-item {
        width: 100%;
        margin-bottom: 15px;
        list-style: none;
 text-align: center;
    }

    header .menu-item a {
        letter-spacing: 3.2px;
        font-size: 1.5rem;
        color: var(--ocn-black);
        text-decoration: none;
        font-family: "EngraversGothicFS-Regular", sans-serif;
    font-size: 1.06667rem;
    letter-spacing: 1.5px;
   
    text-transform: uppercase;
    }

    .nav-link {
        padding: 12px 0;
        height: auto;
        line-height: normal;
        font-size: 1rem;
    }

header .components #menus #desk-socials {

  display: none;
    }
        header .components #menus #mob-socials {
display: flex;
align-items: center;
justify-content: center;
gap:20px;
padding-top: 30px;
    }
    header .components #menus #mob-socials .facebook{
background-image: url("../img/facebook.png");
display: block;
height: 20px;
width: 20px;

        background-position: center;
        background-size: contain;
    }
        header .components #menus #mob-socials .instagram{
background-image: url("../img/instagram.png");
display: block;
height: 18px;
width: 18px;

        background-position: center;
        background-size: contain;
    }
 
.top-bottom-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    flex-direction: column;
    gap: 20px;
}
.top-bottom-buttons .left {
    width: 200px;
}
.top-bottom-buttons .right {
    width: 200px;
}

    header .top-buttons #header-tel {
display: none;
    }
    /*
    .sub-menu-toggle {
        display: inline;
 
        right: 0;
        top: 12px;
        padding: 0 10px;
        transform: translateY(-4px);
    }

    .sub-menu {
        position: static;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
    }

    .sub-menu.active {
        max-height: 500px;
    }

    .sub-menu a {
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 10px 20px;
    }

    .sub-menu a:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .sub-menu-toggle.active {
        transform: rotate(180deg);
    }
        */
}


/* Desktop Styles */
@media (min-width: 1200px) {
    header .top-buttons {
        display: flex;
justify-content: space-between; 
max-width: 1400px;
margin: 0 auto;
padding: 20px;
    }
    .top-bottom-buttons {
    display: none;
}

    header .top-buttons #header-tel {
        text-align: center;
        display: block;
        width: 100%;
        margin-top: 10px;
                font-family: "EngraversGothicFS-Regular", sans-serif;
                text-transform: uppercase;
                text-decoration: none;
    }
        header .top-buttons #header-tel:hover {
      text-decoration: underline;
    }
    header .components {
   
        padding: 20px 0 0 0;
    width: 100%;


    box-sizing: border-box;
    }
    header .components #logotype {
        max-width: 300px;
     margin: 0 auto;   
    }
    header .components #logotype a {
        display: flex;
        align-items: center;
        justify-content: center;
 
    }
      header .components #menus  {
   
       
       border-top: 1px solid var(--ocn-grey);
             border-bottom: 1px solid var(--ocn-grey);
    margin-top: 50px;
    }
     header .components #menus .main-nav {
     max-width: 1400px;
     margin: 0 auto;
        display: flex;
       
     
 
    }
    header .components #menus #desk-socials {

    width: 100px;
       align-self: flex-start;
     padding: 25px 0;
 display: flex;
align-items: center;
justify-content: center;
gap: 10px;
    }



  
    header .components #menus #desk-socials .facebook{
background-image: url("../img/facebook.png");
display: block;
height: 20px;
width: 20px;

        background-position: center;
        background-size: contain;
    }
        header .components #menus #desk-socials .instagram{
background-image: url("../img/instagram.png");
display: block;
height: 18px;
width: 18px;

        background-position: center;
        background-size: contain;
    }








     header .components #menus #mob-socials {
display: none;
 
    }
    header .components .primary-menu {
           max-width: 1400px;
       margin: 0 auto;
        display: flex;
        list-style: none;
        justify-content: center;
        gap: 40px;
 
    }
     header .components .primary-menu li a  {
        display: block;
          padding: 25px 0;
          transition: all .2s ease;
    border-top: 1.5px solid var(--ocn-grey);
    transform: translateY(-1.5px);
    }
    header .components .primary-menu li a:hover {
    border-top: 1.5px solid var(--ocn-black-black);
}
header .components .primary-menu li.current-menu-item a {
    border-top: 1.5px solid var(--ocn-black-black);
}

    /* Mobile Menu Toggle - Modified for 2 lines */
    .menu-toggle {
      display: none;
    }

.primary-menu {

}

    header .menu-item {
        
    }

    header .menu-item a {
        letter-spacing: 3.2px;
        font-size: 1.5rem;
        color: var(--ocn-black);
        text-decoration: none;
        font-family: "EngraversGothicFS-Regular", sans-serif;
    font-size: 1.06667rem;
    letter-spacing: 1.5px;
   
    text-transform: uppercase;
    }

   

    /*
    .sub-menu-toggle {
        display: inline;
 
        right: 0;
        top: 12px;
        padding: 0 10px;
        transform: translateY(-4px);
    }

    .sub-menu {
        position: static;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
    }

    .sub-menu.active {
        max-height: 500px;
    }

    .sub-menu a {
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 10px 20px;
    }

    .sub-menu a:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .sub-menu-toggle.active {
        transform: rotate(180deg);
    }
        */
}