@font-face {
    font-family: 'inter';
    src: url(../fonts/inter.ttf);
}

@font-face {
    font-family: 'Aqurie';
    font-weight: normal;
    src: url(../fonts/Aquire-BW0ox.otf);
}

@font-face {
    font-family: 'Aqurie';
    font-weight: bold;
    src: url(../fonts/AquireBold-8Ma60.otf);
}

@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/Montserrat-Regular.ttf);
}

/* --- 1. PP Neue Montreal --- */
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 100;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Thin.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Book.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 400;
    font-style:  italic;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Italic.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 500;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 600;
    font-style:  italic;  /* NOTE: hanya tersedia versi italic untuk weight 600 */
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-SemiBoldItalic.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Bold.otf') format('opentype');
}

/* --- 2. Sport Jersey --- */
@font-face {
    font-family: 'SportJersey';
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/sport-jersey/sportsjersey.ttf') format('truetype');
}

/* --- 3. Electrolize --- */
@font-face {
    font-family: 'Electrolize';
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/electrolize/Electrolize-Regular.ttf') format('truetype');
}

body {
    background-color: #04060e;
    /* background-color: #FFFEE6; */
    /* background-color: #1a5f7a; */
    /* background-color: #576cbc; */
    font-family: 'inter';
    background-size: cover;
    color: #fff;
}

.archivo-black {
    font-family: 'Archivo Black', sans-serif;
}

.montserrat{
    font-family: 'Montserrat';
    font-weight: 600;
}

.aqurie-bold{
    font-family: 'Aqurie';
    font-weight: bold;
}

.neue-montreal{
    font-family: 'NeueMontreal', 'Helvetica Neue', 'Arial', sans-serif;
}

.sport-jersey{
    font-family: 'SportJersey', 'Impact', 'Arial Black', sans-serif;
}

.electrolize{
    font-family: 'Electrolize', 'Consolas', 'Courier New', monospace;
}

.line {
    border-top: 1px solid #FAF9FB;
    width: 80%;
    position: absolute;
    left: 0;
    top: 60px;
}

.home {
    padding-top: 80px;
    padding-bottom: 80px;
}

.slider-image .item {
    position: relative;
    height: 100%;
}

.slider-image .item a img {
    width: 100%;
    height: 370px;
    object-fit: cover;
}

.btn-login {
    width: 160px;
    border-radius: 100px;
}

.btn-cyan {
    border-color: #1a5f7a;
    padding: 5px 10px;
    color: #57c5b6;
    background-color: #1a5f7a;
    width: 200px;
}

.btn-cyan:hover {
    border-color: #57c5b6;
    color: #57c5b6;
    background-color: #1a5f7a;
}

.btn-cyan-outline {
    /* border-color: #57c5b6;
    color: #57c5b6; */
    border-color: #030846;
    color: #030846;
    border-width: 2px;
    font-weight: 600;
}

.btn-cyan-outline:hover {
    background-color: #030846;
    color: #fff;
    /* background-color: #57c5b6;
    color: #0B2447; */
    font-weight: 600;
}

.btn-blue-outline {
    border-radius: 50%;
    border-width: 2px;
    border-color: #2E6794;
    color: #2E6794;
    /* border-color: #a5d7e8;
    color: #a5d7e8; */
    font-weight: 600;
}

.btn-blue-outline:hover {
    border-color: #2E6794;
    background-color: #2E6794;
    color: #fff;
    /* border-color: #a5d7e8;
    background-color: #a5d7e8;
    color: #0B2447;*/
    font-weight: 600;
}

.btn-green,
.btn-green:hover {
    background-color: #A1E457;
    color: #3857A7;
    font-weight: 600;
}

.btn-green-outline {
    border-radius: 50%;
    border-width: 2px;
    border-color: #A1E457;
    color: #A1E457;
    font-weight: 600;
}

.btn-green-outline:hover {
    border-color: #A1E457;
    background-color: #A1E457;
    color: #3857A7;
    font-weight: 600;
}

.btn-brown,
.btn-brown:hover {
    background-color: #AD8330;
    color: #2E311A;
    font-weight: 600;
}

.btn-brown-outline {
    border-radius: 50%;
    border-width: 2px;
    border-color: #AD8330;
    color: #AD8330;
    font-weight: 600;
}

.btn-brown-outline:hover {
    border-color: #AD8330;
    background-color: #AD8330;
    color: #2E311A;
    font-weight: 600;
}

.cursor-pointer {
    cursor: pointer;
}

@media (max-width: 767.98px) {
    body {
        background-size: contain;
        background-repeat: no-repeat;
    }

    .home {
        padding-bottom: 20px;
    }

    .slider-image .item a img {
        height: 100%;
    }

    .btn-login {
        width: 100%
    }
}