body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 5px;
            padding: 10px;
            background-color: #f2f2f2;
            overflow-x: hidden;
        }
        h1 {
            font-size: 2em; 
            font-weight: bold; 
            color: #333; 
            text-transform:uppercase; 
            letter-spacing: 2.5px; 
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
            margin: 15px;
            line-height: 1.2; 
            
        }
        #cardContainer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            padding: 0px;
            max-width: 1200px;
            width: 100%;
        }
        .card {
            background-color: #ffffff;
            /*border-radius: 10px;*/
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 100%;
            min-width: 250px;
            transition: transform 0.3s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /*background-color: hsl(${Math.floor(Math.random() * 360)}, 70%, 80%); */
            /*margin: 15px;*/
             
        }
       
        .card-title {
            font-size: 1.5em;
            font-weight: 600;
            margin: 5px 0 8px 0;
            color: #333;
        }
        .card-author {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 8px;
            max-width: 80%;
            overflow: hidden;
        }
        .card-url, .card-summary {
            font-size: 1.3em;
            font-family: Arial , sans-serif;
            color: #361C26;
            margin-bottom: 8px;
            font-weight: 400;
            line-height: 1.5em;
            word-wrap: break-word;
            text-decoration: none;
        }
        
        .card-summary li{
            max-width: 100%;
            overflow: hidden;
        }
     
        .card-buttons {
            display: flex;
            justify-content: space-between;
            gap: 4px;
            margin-top: 12px;
            width:150px;
        }
        .card-buttons button {
            flex: 1;
            padding: 8px;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            font-size: 0.9em;
            width: 5px;
            transition: background-color 0.3s;
        }
        
        .delete-btn { background-color:  #0661EC; }
        .read-btn { background-color:  #0661EC; }
        .share-btn { background-color:  #0661EC; }
        .delete-btn:hover { background-color: black; color: white; }
        .read-btn:hover { background-color: black; color: white; }
        .share-btn:hover { background-color: black; color: white; }
        	  
	  .navbar {  
	  position: relative;
	  top: 10px;  
	  left: 0; 
	  display: flex; 
	  align-items: center;  
	  padding: 10px;
	  width: 100%;
	  background: #333;
	  
	  color: white;       
	  z-index: 100;     
	  transition: top 0.1s ease, position 0.1s ease;
	  }      
	  
	  .navbar a { 
    	  color: white;  
    	  text-decoration: none; 
    	       
    	  font-size: .8em;     
	  } 	
	  
	   .navbar .menu-item { 
    	  color: white;  
    	  text-decoration: none; 
    	  width: auto; 
    	  font-size: .8em;
    	  padding: 7px;
	  } 
	  
	   .navbar i {
		margin-right: 10px;  
	  }     
	  
	   /* Bottom menu styling */ 
	  .bottom-menu, .backColor { 
		  position: fixed;  
		  bottom: -500px; 
		  left: 50%;      
		  width: 75%;     
		  background-color: #333;
		  color: white;  
		  transition: bottom 0.6s ease;  
		  padding: 20px;   
		  display: flex; 
		  flex-direction: column;   
		  align-items: center; 
		  z-index: 1000;       
		  transform: translateX(-50%);
	  
		  /* Center it horizontally */ 
		  border-radius: 15px 15px 0 0;  
	  }          
	  .menu-item ,.mood-menu { 
		  display: flex; 
		  align-items: center; 
		  padding: 10px 20px;  
		  cursor: pointer;      
		  border-top: 1px solid #555;  
		  width: 100%;
	  }        
	  .menu-item i , .mood-menu i{
		margin-right: 10px;  
	  }         
	  .menu-item:hover, .mood-menu:hover { 
		background-color: #444; 
	  }  
	   
	  
	  .adBox{
        width: 100%;
        height: auto;
        position: relative;
        padding: 8px;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center; /* Horizontally centers the iframe */
        align-items: center; /* Vertically centers the iframe */
        text-align: center;
        margin: 20px 0px 10px 0px;
        
    }
    .adBox::after {
        content: 'ICT Centre Ads';
        position: absolute;
        top: 10px; /* Adjust the position */
        right: 10px; /* Adjust the position */
        color: #333; /* Styling for the text */
        background: rgba(255, 255, 255, 0.8); /* Optional background */
        padding: 5px;
        border-radius: 3px;
}

    
    iframe{
        border: none;
        width: 100%; /* or specify a fixed width like '300px' if necessary */
        height: 88px;
        overflow: auto;
    }
    
    hr{
        width: 100%;
    }

 /* Parallax section */
    .parallax-section {
        position: relative;
       
       
        overflow: hidden;
        align-content: center;
        justify-content: center; /* Horizontally centers */
        
    }
    

   /* Floating thumbnail */
    .floating-thumbnail {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 25%;
    height: auto;
    z-index: 350;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Hidden initially */
    transition: opacity 0.3s ease;
    }
   @media (max-width: 400px) {
    .floating-thumbnail {
        width: 35%;
    }
    .parallax-section {
        width: 100%;
    }
    .navbar .menu-item {
        font-size: .6em;
    }
}

    
    .floating-thumbnail video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the video covers the element without distorting */
    }
    
    .imgBox{
        width: auto;
        height: 350px;
        margin: 0 auto 0 auto;
        position: relative;
        display: inline-block; /* Adjust as necessary */
    }
    .imgBox::after {
        content: 'ICT CENTRE Ads';
        position: absolute;
        top: 10px; /* Adjust the position */
        right: 10px; /* Adjust the position */
        color: #333; /* Styling for the text */
        background: rgba(255, 255, 255, 0.8); /* Optional background */
        padding: 5px;
        border-radius: 3px;
}
    
    .imgBox iframe{
        border: none;
        width: auto; /* or specify a fixed width like '300px' if necessary */
        height: 350px;
    }
    
     .footer {
            background-color: #333;
            color: #f2f2f2;
            padding: 20px 10px;
            text-align: center;
            width: 100%;
            height: 20vh;
            margin: 35px auto 2px auto;
        }

        .footer .social-icons {
            margin-bottom: 10px;
        }

        .footer .social-icons a {
            color: #f2f2f2;
            margin: 0 10px;
            text-decoration: none;
            font-size: 24px;
        }

        .footer-links {
            margin-top: 10px;
        }

        .footer-links a {
            color: #f2f2f2;
            text-decoration: none;
            margin: 0 5px;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            .footer .social-icons a {
                font-size: 20px;
                margin: 0 5px;
            }

            .footer {
                padding: 15px 5px;
            }
        }
        
        #topVideo{
            width:100%;
            margin-bottom: 25px;
        }
        
          /* Loader overlay */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 9999;
    }

    .spinner {
      width: 80px;
      height: 80px;
      border: 10px solid rgba(0, 0, 0, 0.1);
      border-top: 10px solid #007bff;
      border-radius: 50%;
      animation: spin 1.2s linear infinite;
    }

    .loading-text {
      margin-top: 15px;
      font-size: 1.2em;
      color: #333;
      font-weight: bold;
      animation: pulse 2s infinite ease-in-out;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    /* Simulate page content */
    .page-content {
      display: none;
      padding: 40px;
      text-align: center;
    }