/* Reset */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial, sans-serif;
    background:#111;
}

/* Top bar */
.top-bar{
    position:fixed;
    top:20px;
    left:90%;
    transform:translateX(-50%);

    z-index:5;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* Country dropdown */
.country-select{
    background:rgba(255, 255, 255, 0.95);
    color:#222;

    border:none;
    outline:none;

    padding:10px 16px;
    /* border-radius:30px; */

    font-size:16px;
    font-family:Arial,sans-serif;

    backdrop-filter:blur(5px);

    cursor:pointer;
}

.country-select option{
    background:#fff;
    color:#222;
}

@media(max-width:768px){

    .top-bar{
        top:12px;
		left:75%;
    }

    .country-select{
        font-size:14px;
        padding:8px 12px;
    }
}

/* Background video */
#myVideo{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    object-fit:cover;
    z-index:0;
}

/* Background overlay image */
.overlay{
    position:fixed;
    inset:0;
    background:url("bg.png") center center repeat;
    background-size:auto; /* keeps actual image size */
    z-index:1;
}

/* Center logo container */
.logo-container{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    padding:20px;
    z-index:2;
}

/* Responsive logo */
.logo-container img{
    width:clamp(180px,35vw,500px);
    max-width:90%;
    height:auto;
}

/* Bottom contact bar */
/* .contact-bar{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:2;

    padding:15px 10px;
    text-align:center;

    background:rgba(255, 255, 255, 0.95);
    color:#222;

    font-family:Arial, sans-serif;
    font-size:14px;
    letter-spacing:.5px;

    backdrop-filter:blur(5px);
}
*/

.contact-bar{
    position:fixed;
    bottom:32px;   /* Leave space for copyright bar */
    left:0;
    width:100%;
    z-index:2;

    padding:15px 10px;
    text-align:center;

    background:rgba(255, 255, 255, 0.95);
    color:#222;

    font-family:Arial,sans-serif;
    font-size:14px;
    letter-spacing:.5px;

    backdrop-filter:blur(5px);
}

/* Contact links */
.contact-bar a{
    color:#222;
    text-decoration:none;
    transition:all .3s ease;
}

/* Hover effect */
.contact-bar a:hover{
    opacity:0.75;
}

.contact-bar i{
    margin-right:0px;
    font-size:14px;
	color: #02afdb;
}

/* Mobile adjustments */
@media(max-width:768px){

    .logo-container img{
        width:65vw;
    }

    .contact-bar{
        font-size:12px;
        padding:12px;
    }
}

/* Option */

.options{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:white;
    border-radius:10px;
    border:1px solid #ddd;
    margin-top:6px;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:1000;

    max-height:170px; /* around 5 options */
}

/* Copyright bar */
.copyright-bar{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:3;

    background:#005a78;
    color:#fff;

    text-align:center;

    padding:8px 10px;

    font-family:Arial,sans-serif;
    font-size:12px;
}