/* Set global font size */
html {
font-size: 16px; /* You can adjust this value */
}

/* Basic Reset */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, img {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {

}
.iframe-container {
width: 100%; /* Ensures the container takes the full width of the parent */
max-width: 500px; /* Optional: set a maximum width if desired */
overflow: hidden;
}

#iframe.faceBook {
width: 100%; /* Sets iframe to 100% width of its container */
height: 100%; /* Adjust height to make it responsive */
border: none;
}


.newspaper-style {
column-count: 2; /* Two columns for large screens and above */
column-gap: 20px; /* Gap between columns */
text-align: justify; /* Justify text for newspaper feel */
font-size: 0.6rem;
}

.newspaper-style img {
max-width: 100%; /* Ensure images fit within their container */
width: 100%; /* Make sure images scale with their container */
height: auto; /* Maintain aspect ratio */
break-inside: avoid; /* Prevent images from being split across columns */
margin-bottom: 0.4rem; /* Add space below images */
/* opacity: 0.75; 50% transparent */
}

.transparent-list-group {
background-color: transparent !important; /* Makes the background transparent */
border: none; /* Remove borders if desired */
}

.watermark {
position: absolute; /* Position it absolutely */
top: 50%; /* Center it vertically */
left: 50%; /* Center it horizontally */
transform: translate(-50%, -50%) rotate(-45deg); /* Center and rotate diagonally */
color: rgba(173, 165, 165, 0.3); /* Darker color for better visibility */
font-size: 14vw; /* Use viewport width for responsive font size */
font-weight: bold; /* Make the text bold */
white-space: nowrap; /* Prevent wrapping */
pointer-events: none; /* Ensure it doesn't interfere with clicking */
z-index: 0; /* Place it behind other content */
}
  
#ADS_IMAGE_L {
width: 33.33vw;  /* Full width on extra small devices */
height: 4rem;  
}

#ADS_IMAGE_R {
width: 33.33vw;  /* Full width on extra small devices */
height: 4rem;
}

#WEBSITE_LOGO {
width: 33.33vw;
height: 4rem;
}

#DEVELOPER_NAME{
font-size: 0.4rem;
}

#DEVELOPER_MOB{
font-size: 0.4rem;
}

#liveDateTime{
font-size: 0.4rem;
}

#WEBSITE_URL{
font-size: 0.4rem;
}

#WEBSITE_SLOGAN{
font-size: 0.4rem;
}

#REGISTRATION_ID{
font-size: 0.4rem;
}

#loadingSpinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; /* Ensure it's above other content */
background-color: rgba(255, 255, 255, 0.7); /* Optional: A background overlay */
padding: 20px;
border-radius: 10px;
}
h1 {
font-size: 1.5rem; /* Increase font size for smaller screens */
text-align: justify;
}

.clickable{ cursor: pointer; };


/* Custom Media Queries */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Add styles for extra small devices */
   
    iframe {
        height: 200px; /* Set a smaller height for small screens */
        }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Add styles for small devices */

    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Add styles for medium devices */
    .newspaper-style {
        column-count: 3;
        font-size: 1rem;
    }
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Add styles for large devices */
    .newspaper-style {
        column-count: 3;
        font-size: 1rem;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Add styles for extra large devices */
    .newspaper-style {
        column-count: 3;
        font-size: 1rem;
    }
    #ADS_IMAGE_L {
        width: 13.33%;  /* Full width on extra small devices */
        height: 4rem;  
        }
        
        #ADS_IMAGE_R {
        width: 13.33%;  /* Full width on extra small devices */
        height: 4rem;
        }
        
        #WEBSITE_LOGO {
        width: 33.33%;
        height: 4rem;
        }
        h1 {
            font-size: 2.5rem; /* Increase font size for smaller screens */
            text-align: justify;
            }
}

/* Extra-extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    /* Add styles for extra-extra large devices */
    .newspaper-style {
        column-count: 3;
        font-size: 1rem;
    }
}