/* Add dot pattern background */
.bodypatern {
    background-color: #f8f9fa;
    /* Light background color */
    background-image: radial-gradient(circle, rgba(0, 0, 0, .8) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 20px 20px;
    /* Set the size of the dots */
    background-position: 0 0, 10px 10px;
    /* Offset the second gradient */
}
/* Custom font for the header */
.navbar-brand {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: bold;
}

/* Ensure that the content is properly spaced from the navbar */
.content {
    padding-top: 80px;
    /* Adjust this value if needed */
}

/* Footer styling */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgb(229, 229, 230);
    text-align: center;
    font-size: 14px;
}

/* User Icon Style */
.user-icon {
    font-size: 20px;
}

/* Center the navbar items */
.navbar-nav {
    margin-left: auto;
    margin-right: auto2;
}
.bg-lightcustom{
    background-color: rgb(229, 229, 230)
}

.hdrfont{
    font-family: 'Dancing Script', cursive;
    text-shadow: 3px 3px 3px #ababab; 
}
.bg100{background-color: rgb(0,0,0) !important}
.bg90{background-color: rgb(0,0,0,.9) !important}
.bg80{background-color: rgb(0,0,0,.8) !important}
.bg70{background-color: rgb(0,0,0,.7) !important}
.bg50{background-color: rgb(0,0,0,.5) !important }
.bg30{background-color: rgb(0,0,0,.3) !important }
.bg20{background-color: rgb(0,0,0,.2) !important }
.bgw50{background-color: rgb(255,255,255,.5) !important }
.bgw20{background-color: rgb(255,255,255,.2) !important }
.bgw70{background-color: rgb(255,255,255,.7) !important }
.bgw80{background-color: rgb(255,255,255,.8) !important }
.bgyellow{background-color: rgb(255, 191, 0,.9)!important}
.bgpurple{background-color: #6f42c1!important}
.wsize100{height: 100vh; width:100vw;}
.h78{height: 83vh;}
.h100{height: 93vh;}
.margintop{ margin-top: 10vh; } /*req*/
.paddingtop{ padding-top: 10vh; } /*req*/
.iconsize{height: 30px; width: 30px;}
.profilephotosize{height: 150px; width: 150px;}

.marginbottom{ margin-top: 5vh; height: 5vh !important; } /*req*/

.pointer {cursor: pointer;}
.textunderlink {text-decoration: underline;}
.bgimg1{background-image:url('https://img.freepik.com/free-photo/3d-render-online-freight-order-tracking_1048-5610.jpg?t=st=1735996475~exp=1736000075~hmac=5b4c3762df38bdb7e74a9a1e75127ab7ac03da6081201a827d8686f6e5043ffa&w=1060');background-attachment: fixed;background-repeat: no-repeat;  background-size: 100vw 100vh;}/*req*/
.bgimg2{background-image:url('../images/wh_bg.webp');background-attachment: fixed;background-repeat: no-repeat;  background-size: 100vw 100vh;}/*req*/
.bgimg3{background-image:url('../img/bgimg.jpg');background-attachment: fixed;background-repeat: no-repeat;  background-size: 100vw 100vh;}/*req*/
.bgimg4{background-image:url('../img/bgmasjid2.jpg');background-attachment: fixed;background-repeat: no-repeat;  background-size: 100vw 100vh;}/*req*/

/* Overlay to cover the page */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    z-index: 9999; /* ensures the overlay is on top of other content */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Loading image style */
#loading-image img {
    width: 200px; height: 200px; /* Adjust size of the loading image */
}