/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
    width: 100%;
    height: auto;
}

/*-------------------------------------------Title Animation---------------------------------------------*/
/* Comment if using Slide keyframe */
/* .add-animation-zoom {
    animation: zoomBounce 0.3s ease;
    animation: zoomOut 0.3s ease;
} */

/* Comment all if using Zoomout keyframe */
.add-animation {
    /* animation: frmslideLeft 0.3s ease; */
    animation: frmslideRight 0.8s ease;
}

/* Comment all if using Zoomout keyframe */
.exit-animation {
    /* animation: toslideRight 0.3s ease; */
    animation: toslideLeft 0.8s ease;
}

.text {
    top: 14%;
}

.text img {
    width:90%;
}

/*-------------------------------------------Redirect Button---------------------------------------------*/
.btn1 {
    top: 48%;
}

.btn1 img {
    width:65%;
    animation: pulse 1s  infinite linear;
}


.btn2 {
    top: 90%;
}

.btn2 img {
    width:65%;
    animation: pulse 1s  infinite linear;
}



@media(max-width:320px){

}

.dropdown-class{
    top: 16px;
    right: 16px;
    z-index: 1050;
}

/*-------------------------------------------Language Button---------------------------------------------*/
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(180deg, rgba(20, 50, 160, 0.85), rgba(8, 22, 90, 0.85));
    border: 1.5px solid #f5c84c;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(245, 200, 76, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-btn:hover,
.lang-btn:focus,
.lang-btn.show {
    color: #fff;
    background: linear-gradient(180deg, rgba(30, 70, 200, 0.95), rgba(10, 30, 120, 0.95));
    border-color: #ffe08a;
    box-shadow: 0 0 16px rgba(255, 215, 100, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.lang-btn::after {
    margin-left: 2px;
    color: #f5c84c;
    transition: transform 0.2s ease;
}

.lang-btn.show::after {
    transform: rotate(180deg);
}

.lang-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c84c;
    stroke-width: 1.8;
}

.lang-menu {
    min-width: 120px;
    margin-top: 8px !important;
    padding: 6px;
    background: rgba(8, 22, 90, 0.95);
    border: 1.5px solid #f5c84c;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 12px rgba(245, 200, 76, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lang-menu .dropdown-item {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease;
}

.lang-menu .dropdown-item:hover,
.lang-menu .dropdown-item:focus {
    color: #3a1d00;
    background: linear-gradient(180deg, #ffe08a, #f5b82e);
}
    






/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(0.9);
    }
}




/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #bg {
        height: 100vh;
    }


}

@media (min-width: 1920px) {
    #bg {
        height: 100vh;
    }

}