* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: Arial, Helvetica, sans-serif;

    --color-text-yellow: #d6b047;
    --color-yellow: #dcbb66;
    --gradient-yellow: linear-gradient(4deg, #c4983e 0%, #f2d882 100%);
    --color-black: black;
    --gradient-black: linear-gradient(
            0deg,
            rgba(38, 48, 60, 1) 0%,
            rgba(65, 65, 65, 1) 100%
    );
    --gradient-gold: -webkit-linear-gradient(right, #b88215, #372d00, #b88215);
    --gradient-bg-1: linear-gradient(
            to left top,
            rgb(0 6 6 / 0%) 0%,
                /* bottom-right color */ rgb(0 0 0 / 0%) 50%,
                /* middle color */ rgb(84 44 0) 100% /* top-left color */
    ),
    linear-gradient(
            to right top,
            rgb(0 0 0) 0%,
                /* bottom-right color */ rgb(0 0 0) 50%,
                /* middle color */ rgb(0 89 125) 100% /* top-left color */
    ),
    linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    background: var(--color-black);
    min-height: 100 svh;
    overflow-x: hidden;
}

button {
    border: none;
    outline: transparent;
}

.highlight {
    color: var(--color-text-yellow);
}

.button-gold {
    cursor: pointer;
    color: #fff !important;
    background: linear-gradient(4deg, #c4983e 0%, #f2d882 100%);
    border: 0px solid #dcbb66;
    border-radius: 5px;
    padding: 0.25rem 1rem;
    font-size: 14px;
    min-width: 110px;
    text-align: center;
}

.border-glow {
    height: 3px;
    margin-top: 0;
    background: linear-gradient(
            90deg,
            transparent,
            #ecbd7b 30%,
            #ecbd7b 70%,
            transparent
    );
    width: 100%;
    text-align: center;
}

.x-hr-border-glow {
    height: 4px !important;
    margin-top: 0;
    background: linear-gradient(
            90deg,
            transparent,
            #f3ce9b 30%,
            #fdecd3 70%,
            transparent
    );
    width: 100%;
    text-align: center;
}

.custom-container {
    max-width: 1140px;
    margin-inline: auto;
}

/* TOP NAV */
.top-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*gap: 1rem;*/
}

.top-nav form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.top-nav input {
    border: 1px solid #615200;
    border-radius: 0;
    background: white !important;
    color: #000 !important;
    height: 30px;
    font-size: 12px;
    padding: 0.25rem 1rem;
    min-width: 225px;
}

/* Lanuage Dropdown */

.language-trigger {
    position: relative;
}

.language-trigger button {
    background-color: transparent;
}

.dropdown {
    position: absolute;
    top: 40px;
    padding: 10px 4px;
    border-radius: 6px;
    background-color: var(--black);
    inset-inline: auto;
    z-index: 50;
}

.dropdown > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dropdown:hover img {
    filter: grayscale(100);
}

.language-option img {
    width: 30px !important;
    height: 30px !important;

    object-fit: cover;
    border-radius: 50%;
    transition: all 0.1s ease;
}

button.language-option {padding: 2px 10px;cursor: pointer;}

button.language-option:hover > img {
    filter: grayscale(0);
}

.bottom-nav-wrapper {
    background: var(--gradient-gold);
}

.bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.logo img {
    width: 90px;
    height: 90px;
}

.bottom-nav li {
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 16px;
}

.slider {
    background: var(--gradient-bg-1);
}

.slider img {
    max-height: 380px;
    margin-inline: auto;
    display: block;
    aspect-ratio: 1 / 1;
    /*width: auto !important;*/
}

.owl-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid white !important;
}

.owl-dot.active {
    background: white !important;
}

.owl-prev,
.owl-next {
    position: absolute;
    top: calc(40% - 40px);
    width: 40px;
    height: 40px;
    color: #ffffffa1 !important;
    font-size: 100px !important;

    right: 30px;
}

.owl-prev:hover,
.owl-next:hover {
    color: white !important;
}

.owl-prev {
    left: 30px;
}

/* BANNER # 2 */

.banner_2_wrapper {
    background: var(--gradient-bg-1);
}

.banner-2 h3 {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 400;
    color: var(--color-text-yellow);
}

.banner-2 p {
    color: white;
}

.banner_2_image_container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.banner_2_image_container img {
    width: 100%;
    object-fit: contain;
}

/* BANNER # 3 */
.banner_3 {
    background: var(--gradient-bg-1);
}

.banner_3 img {
    width: 100%;
}

.banner_3 h3 {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 400;
    color: var(--color-text-yellow);
}

.banner_3 p {
    color: white;
}

/* BANNER # 4  */
.banner_4 h3 {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 400;
    color: var(--color-text-yellow);
}

.banner_4 p {
    color: white;
}

.banner_4 img {
    width: 90px;
    object-fit: contain;
}

.banner_4 .image_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* BANNER # 5 */
.banner_5 {
    background: var(--gradient-bg-1);
    min-height: 50 svh;
    display: grid;
    place-content: center;
}

.banner_5 h3 {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 400;
    color: var(--color-text-yellow);
}

.banner_5 p {
    color: white;
}

/* FOOTER STYLES */

footer {
    color: white;
    background: var(--gradient-bg-1);
}

footer img {
    width: 125px;
    height: 125px;
}

.footer_menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.footer_menu div,
.footer_menu ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer_menu li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer_menu i.fa { margin-right: 5px; }
.footer_menu a { text-decoration: none; color: #FFFFFF; cursor: pointer; }

/* HELPlINE BUTTON */

.support_section {
    background: rgba(18, 18, 18, 0.7);

    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 27px 120px 0;
}

.support_section ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support_section a {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    text-decoration: none;

    display: grid;
    place-content: center;

    transition: all 0.3s ease-in-out;
}

.support_section a:hover {
    background: blue;
    color: white;
}

.support_button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    font-size: 2rem;
    cursor: pointer;

    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-text-yellow);
    color: white;
}

/* REGISTRATION FORM */

.registration_form {
    width: 100 svw;
    min-height: 80 svh;
    background: var(--gradient-bg-1);
    padding: 2rem;
}

.registration_form form {
    max-width: 600px;
    margin-inline: auto;
    padding: 4rem 2rem;
    border-radius: 9px;
    color: white;
    text-align: center;
    background: #c0c0c047;

    display: grid;
    gap: 1rem;
    border: 2px solid var(--purple);
}

.registration_form label {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--color-text-yellow);

    border-radius: 12px;
    overflow: hidden;
}

.registration_form label i {
    font-size: 2rem;
    padding: 0.5rem;
    width: 60px;
    height: 60px;
    color: white;
    background: var(--purple);

    display: grid;
    place-content: center;
}

.registration_form label > div {
    padding: 0.5rem;
    color: black;
    background: white;
    display: grid;
    place-content: center;
}

.registration_form label input,
.registration_form label select {
    width: 100%;
    padding: 0.5rem;
}

.registration_form label input:focus,
.registration_form label select:focus {
    outline: transparent;
}

.registration_form .second_section {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--purple);
    border-radius: 12px;
}

.registration_form .security_code {
    width: auto;
    margin-inline: auto;
}

@media (max-width: 992px) {
    .top-nav {
        display: grid;
        justify-content: center;
    }

    .top-nav > form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    .top-nav input {
        grid-column: span 2;
    }

    .menu_list {
        background: var(--gradient-gold);
        position: absolute;
        top: 42px;
        z-index: 40;
        inset-inline: 0;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .owl-prev,
    .owl-next {
        font-size: 40px;
    }
}
