/* ==========================================================
   MOYINNET ENTERTAINMENT & TOURISM
   Global Design System
   Version: 1.0
   ========================================================== */


/* ==========================================================
   GOOGLE FONTS
   ========================================================== */

:root{

    /* Brand Colours */

    --primary:#D4AF37;
    --primary-light:#E8C766;
    --primary-dark:#A88418;

    --black:#070707;
    --dark:#111111;
    --dark-2:#1A1A1A;
    --grey:#BBBBBB;
    --grey-light:#E9E9E9;
    --white:#FFFFFF;

    /* Typography */

    --heading-font:'Cinzel', serif;
    --body-font:'Inter', sans-serif;

    /* Layout */

    --container:1320px;

    --section-space:120px;

    --radius:10px;

    /* Shadows */

    --shadow-sm:0 5px 20px rgba(0,0,0,.15);

    --shadow-md:0 10px 35px rgba(0,0,0,.35);

    --shadow-lg:0 20px 60px rgba(0,0,0,.55);

    /* Animation */

    --transition:.35s ease;

}


/* ==========================================================
   RESET
   ========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:var(--white);

    font-family:var(--body-font);

    font-size:16px;

    line-height:1.8;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,h2,h3,h4,h5,h6{

    font-family:var(--heading-font);

    color:var(--white);

    font-weight:700;

    margin-bottom:20px;

    line-height:1.2;

}

h1{

    font-size:72px;

}

h2{

    font-size:52px;

}

h3{

    font-size:40px;

}

h4{

    font-size:30px;

}

h5{

    font-size:24px;

}

h6{

    font-size:20px;

}

p{

    color:var(--grey);

    margin-bottom:20px;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    max-width:var(--container);

}


/* ==========================================================
   SECTION SPACING
   ========================================================== */

section{

    position:relative;

    padding:var(--section-space) 0;

}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

    transition:var(--transition);

    letter-spacing:.5px;

}

.btn-primary{

    background:var(--primary);

    color:var(--black);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-light);

    transform:translateY(-3px);

    box-shadow:0 10px 35px rgba(212,175,55,.45);

}

.btn-outline{

    color:var(--white);

    border:1px solid rgba(255,255,255,.25);

    background:transparent;

}

.btn-outline:hover{

    background:rgba(255,255,255,.08);

    border-color:var(--primary);

    color:var(--primary);

}


/* ==========================================================
   UTILITIES
   ========================================================== */

.text-gold{

    color:var(--primary);

}

.bg-dark{

    background:var(--black)!important;

}

.bg-dark-2{

    background:var(--dark-2);

}

.rounded-xl{

    border-radius:24px;

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}


/* ==========================================================
   PRELOADER
   ========================================================== */

#preloader{

    position:fixed;

    inset:0;

    background:var(--black);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-wrapper{

    text-align:center;

}

.loader-wrapper img{

    width:110px;

    animation:logoPulse 2s infinite;

}

@keyframes logoPulse{

    0%{

        opacity:.3;

        transform:scale(.95);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:.3;

        transform:scale(.95);

    }

}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}


/* ==========================================================
   TEXT SELECTION
   ========================================================== */

::selection{

    background:var(--primary);

    color:var(--black);

}


/* ==========================================================
   FORMS
   ========================================================== */

.form-control{

    background:#161616;

    border:1px solid #2a2a2a;

    color:#fff;

    border-radius:8px;

    padding:14px;

}

.form-control:focus{

    background:#1b1b1b;

    color:#fff;

    border-color:var(--primary);

    box-shadow:none;

}


/* ==========================================================
   LISTS
   ========================================================== */

ul{

    list-style:none;

    padding:0;

    margin:0;

}


/* ==========================================================
   TABLES
   ========================================================== */

table{

    color:#fff;

}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

::placeholder{

    color:#999 !important;

}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

button,
input,
textarea,
a,
img{

    transition:var(--transition);

}