/* =====================================
   9NAGA LUXURY STYLE CSS
   ===================================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Cinzel", "Times New Roman", serif;
}


html{
    scroll-behavior:smooth;
}


body{

    min-height:100vh;

    color:white;

    background:
    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.85)
    ),
    url("https://i.pinimg.com/1200x/b9/88/50/b98850728b7d53a21db364f250b13c18.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}





/* =====================================
 HEADER
 ===================================== */


.luxury-header{


    width:100%;

    height:90px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:10px 35px;


    position:sticky;

    top:0;

    z-index:999;



    background:

    linear-gradient(
        145deg,
        rgba(30,20,5,0.95),
        rgba(0,0,0,0.95)
    );


    border-bottom:

    2px solid #d4af37;



    box-shadow:

    0 0 25px #d4af37,
    inset 0 0 15px rgba(255,215,0,.4);


}





/* HEADER LEFT */


.header-left{

    display:flex;

    gap:15px;

}



.social-btn{


    width:48px;

    height:48px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    color:#ffd700;


    font-size:24px;



    background:

    linear-gradient(
        145deg,
        #3a2a00,
        #111
    );



    border:

    2px solid #d4af37;



    box-shadow:

    5px 5px 12px #000,
    -3px -3px 8px rgba(255,215,0,.4),
    0 0 20px rgba(255,215,0,.6);


    transition:.3s;

}




.social-btn:hover{

    transform:
    translateY(-8px)
    scale(1.08);


    box-shadow:

    0 0 35px gold;


}




.social-btn:active{

    transform:
    scale(.85);

}






/* LOGO */


.header-logo img{


    width:230px;

    max-height:70px;


    object-fit:contain;



    filter:

    drop-shadow(
        0 0 15px gold
    );


}







/* MENU BUTTON */


.menu-button{


    padding:

    14px 30px;


    border-radius:15px;


    color:#ffd700;


    font-weight:bold;


    background:

    linear-gradient(
        145deg,
        #4a3500,
        #111
    );



    border:

    2px solid gold;



    cursor:pointer;



    box-shadow:

    5px 5px 15px #000,
    inset 0 0 15px rgba(255,215,0,.5),
    0 0 20px gold;


}




.menu-button:active{


    transform:

    scale(.9);


}








/* =====================================
 SIDEBAR
 ===================================== */



.sidebar{


    position:fixed;


    top:0;

    right:-350px;


    width:300px;


    height:100vh;


    z-index:2000;



    background:

    rgba(10,10,10,.95);



    backdrop-filter:blur(15px);


    border-left:

    2px solid gold;


    box-shadow:

    -10px 0 30px gold;


    transition:.5s;



}



.sidebar.active{

    right:0;

}



.close-menu{


    position:absolute;


    right:20px;

    top:20px;


    background:none;

    border:0;


    color:gold;


    font-size:30px;

    cursor:pointer;

}



.sidebar nav{


    margin-top:100px;


    display:flex;


    flex-direction:column;


}



.sidebar a{


    padding:20px;


    color:white;


    text-decoration:none;


    font-size:18px;


    border-bottom:

    1px solid rgba(255,215,0,.3);



    transition:.3s;


}



.sidebar a:hover{


    background:#d4af37;

    color:black;


}







/* =====================================
 SLIDER
 ===================================== */



.hero-slider{


    width:90%;


    margin:40px auto;


    position:relative;


    overflow:hidden;


    border-radius:25px;


    border:3px solid gold;



    box-shadow:

    0 0 35px gold;


}



.hero-slider img,
.hero-slider video{


    width:100%;


    height:500px;


    object-fit:cover;


}





.slider-prev,
.slider-next{


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:45px;

    height:45px;


    border-radius:50%;


    border:2px solid gold;


    background:#111;


    color:gold;


    font-size:25px;


    cursor:pointer;


}



.slider-prev{

    left:20px;

}



.slider-next{

    right:20px;

}






/* =====================================
 ABOUT
 ===================================== */


.about{


    width:85%;


    margin:auto;


    padding:40px;


    background:

    rgba(0,0,0,.65);



    border:

    2px solid gold;



    border-radius:25px;



    box-shadow:

    0 0 30px rgba(255,215,0,.5);


}



.luxury-title{


    text-align:center;


    font-size:45px;


    color:#ffd700;


    text-transform:uppercase;



    text-shadow:


    3px 3px 0 #7a5b00,

    0 0 20px gold;


    margin-bottom:30px;


}



.about-text{

    line-height:1.9;

    font-size:17px;

}




.about-text li{

    list-style:none;

    margin:10px 0;

}








/* =====================================
 PARTNER BOX
 ===================================== */


.partner-section{


    width:90%;


    margin:50px auto;


    display:flex;


    gap:40px;


    justify-content:center;


}



.partner-box{


    width:45%;


    text-align:center;


}




.partner-image{


    position:relative;


    overflow:hidden;


    border-radius:25px;


    border:3px solid gold;



    box-shadow:

    0 0 35px gold;


}




.partner-image img{

    width:100%;

    height:450px;

    object-fit:contain;

    object-position:center;

    background:#000;

    transition:.5s;

}




.partner-name{


    position:absolute;


    bottom:15px;


    left:50%;


    transform:translateX(-50%);


    padding:10px 30px;


    background:#111;


    border:2px solid gold;


    border-radius:15px;


    color:gold;


    font-size:22px;


}







.luxury-button{


    display:inline-block;


    margin-top:25px;


    padding:15px 45px;


    color:#111;


    background:

    linear-gradient(
        145deg,
        #fff2a8,
        #d4af37
    );


    border-radius:20px;


    text-decoration:none;


    font-weight:bold;


    box-shadow:

    5px 5px 15px black,
    0 0 25px gold;


}







/* =====================================
 BANNER
 ===================================== */


.bottom-banner{


    width:90%;


    margin:50px auto;


}



.bottom-banner img{


    width:100%;


    border-radius:2px;


    border:3px solid gold;


    box-shadow:

    0 0 40px gold;


}








/* FOOTER */


footer{


    text-align:center;


    padding:30px;


    color:gold;


    border-top:1px solid gold;


    background:#050505;


}