:root {
    --color-font: #212121;
    --color-primary: #22B6F1 !important;
    --color-secondary: #0D73BE !important;
    --color-accsent: #EF6911;
    /*Oren*/
    --color-link: #1090ee;
    --color-link-hover: #0D73BE;
    --color-gradient-start: #22b6f1;
    --color-gradient-stop: #5ad8ff;
    --color-img-holder: #22B6F1;
}

/* === Font ===  */
.text-secondary {
    color: var(--color-secondary) !important;
}
.text-accsent {
    color: var(--color-accsent) !important;
}
/* === Font === ./end */


/* === Background === */
.bg-banner-general {
    background-image: url('/images/headbanner-ayimun-general.jpg') !important;
}
.bg-banner-bod {
    background-image: url('/images/headbanner-ayimun-bod.jpg') !important;
}
.bg-banner-delegate {
    background-image: url('/images/headbanner-ayimun-delegate.jpg') !important;
}
/* === Background === ./end */



/* === Border === */
.border-ayimun {
    border-color: var(--color-primary) !important;
}
.border-ayimun {
    border-color: var(--color-secondary) !important;
}
/* === Border === ./end */


/* === Button === */
.btn-join > .btn-text {
    font-weight: 600 !important;
}
/* === Button === ./end */




/** ============ General Mobile $ Tablet Sizing Agustus 2024 ============ 
 
    1. urutan ukuran. ikutin bootstrap col
        - Extra small: < 576px (no media query needed as this is the default)
        - Small (sm): ≥ 576px
        - Medium (md): ≥ 768px
        - Large (lg): ≥ 992px
        - Extra large (xl): ≥ 1200px
        - XXL (xxl): ≥ 1400px (added in Bootstrap 5)

*/

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* .vh-lg-100 { height: 100vh !important; }
    .vh-lg-80 { height: 80vh !important; }
    .vh-lg-50 { height: 50vh !important; } */

    .vh-xl-100 { height: 100vh !important; }
    .vh-xl-80 { height: 80vh !important; }
    .vh-xl-50 { height: 50vh !important; }
    .vh-xl-30 { height: 30vh !important; }


    /* === Background === */
    .bg-banner-1-jpg {
        background-image: url('/images/bg-banner-1.jpg') !important;
    }    
    .bg-banner-2-jpg {
        background-image: url('/images/bg-banner-2.jpg') !important;
    }    
    /* === Background === ./end */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* .vh-md-100 { height: 100vh !important; }
    .vh-md-80 { height: 80vh !important; }
    .vh-md-50 { height: 50vh !important; } */

    .vh-lg-100 { height: 100vh !important; }
    .vh-lg-80 { height: 80vh !important; }
    .vh-lg-50 { height: 50vh !important; }
    .vh-lg-30 { height: 30vh !important; }


    /* === Background === */
    .bg-banner-1-jpg {
        background-image: url('/images/bg-banner-1.jpg') !important;
    }
    .bg-banner-2-jpg {
        background-image: url('/images/bg-banner-2.jpg') !important;
    }
    /* === Background === ./end */    


    /* === Counter === */
    .counter {
        background-color: grey;
        padding: 20px 0;
        border-radius: 5px;
    }
    .counter > .counter-number {
        font-size: 68px !important;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 0em;
        text-align: center;
    }
    .counter > .counter-text {
        font-size: 18px !important;
        font-weight: 700;
        margin-top: 0.5em;
        margin-bottom: 0px;
        text-align: center;
    }
    /* === Counter === ./end */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /* .vh-sm-100 { height: 100vh !important; }
    .vh-sm-80 { height: 80vh !important; }
    .vh-sm-50 { height: 50vh !important; } */

    .vh-md-100 { height: 100vh !important; }
    .vh-md-80 { height: 80vh !important; }
    .vh-md-50 { height: 50vh !important; }
    .vh-md-30 { height: 30vh !important; }

    .event-opt .text-event-desc {
        font-size: 1.125rem !important;
    }
}

/* Small devices (576px and up) */
@media only screen and (min-width: 576px) {
    /* .vh-sm-100 { height: 100vh !important; }
    .vh-sm-80 { height: 80vh !important; }
    .vh-sm-50 { height: 50vh !important; } */

    .vh-sm-100 { height: 100vh !important; }
    .vh-sm-80 { height: 80vh !important; }
    .vh-sm-50 { height: 50vh !important; }
    .vh-sm-30 { height: 30vh !important; }

    .event-opt .text-event-desc {
        font-size: 1.125rem !important;
    }
}

/* Extra small devices (phones, 576px and down) */
@media only screen and (max-width: 576px) {
    .vh-xs-100 { height: 100vh !important; }
    .vh-xs-80 { height: 80vh !important; }
    .vh-xs-50 { height: 50vh !important; }
    .vh-xs-30 { height: 30vh !important; }

    /* === Background === */
    .bg-awmun-general {
        background-image: url('/images/headbanner-ayimun-mobile-general.jpg') !important;
    }
    .bg-banner-bod {
        background-image: url('/images/headbanner-ayimun-mobile-bod.jpg') !important;
    }
    .bg-banner-delegate {
        background-image: url('/images/headbanner-ayimun-mobile-delegate.jpg') !important;
    }    
    .bg-banner-1-jpg {
        background-image: url('/images/bg-banner-1.jpg') !important;
    }
    .bg-banner-2-jpg {
        background-image: url('/images/bg-banner-2.jpg') !important;
    }
    /* === Background === ./end */    

    .counter > .counter-number {
        font-size: 45px !important;
    }

    .counter > .counter-text {
        font-size: 18px !important;
        margin-top: 0.1em;
        line-height: 1.2em !important;
    }
}


/* ============ General Mobile $ Tablet Sizing Agustus 2024 ./end ============ */