/* Basic font usage */
    body, html {
      margin: 0;
      padding: 0;
      min-height: 200%;
      overflow-x: hidden;
      font-family: 'Roboto', sans-serif; /* Default text font */
	  font-size: 16px;
    }
    h1, h2, h3, h4 {
      font-family: 'Cinzel', serif; /* Headings use Cinzel */
	  color: #222;
    }

	p {
	  color: #222;
	}

	.max1200 {
		max-width: 1200px;	
		margin: 0 auto;
		min-height: 500px;
	}

	.padh {
		max-width: 1200px;	
		margin: 0 auto;
	}

    /* LOADER */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* SPLASH (Full-Screen) */
    #splash {
      position: relative; /* Allows negative z-index children */
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      overflow: hidden;
    }

	#splash h1, #splash h2, #splash h3, #splash h4 {
		color: white;
	}

    /* Locally hosted video (lowest) */
    #bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Fill entire area */
      z-index: -10;      /* Behind everything else */
    }

    /* Dark overlay (above video, behind the logo container) */
    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      opacity: 0.8;
      z-index: -5;
    }

    /* Cover image container (logo + text) */
    .cover-image {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      display: flex;
      flex-direction: column;
      align-items: center; 
      justify-content: center;
      opacity: 0.5;
    }
    /* Initially hidden elements (logo, text) */
    .cover-image img,
    .cover-image .text-above,
    .cover-image .text-below {
      display: none;
    }
    .cover-image img {
      width: 40%;
      height: auto;
    }
    .cover-image .text-above,
    .cover-image .text-below {
      font-size: 1.5em;
    }

    /* Down Arrow Button */
    /* 
       "wow animate__animated animate__pulse animate__infinite"
       - The WOW + Animate.css classes for a pulsating loop
    */
    #downButton {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: none;      /* We reveal it via jQuery fadeIn */
      background: none;
      border: none;
      color: #fff;
      font-size: 2em;
      cursor: pointer;
    }
    #downButton:hover {
      color: #ccc;
    }

    /* 4-column content section */
    .content-section {
      padding: 20px;
      max-width: 1800px;  /* Limit section width to 1200px */
      margin: 0 auto;     /* Center it horizontally */
    }
    .content-section h2 {
      text-align: center;
    }
    .placeholder {
      padding: 20px;
      background: #eee;
      margin: 0 20px;
      border: 1px solid #ccc;
    }
    .placeholder p {
      margin-bottom: 1em;
    }
	
    /* pod_grid_01 */
	  .pod_grid_01 img {
		  width: 100%; 
		  height: auto;
		  min-height: 300px;
		  background: #666;
	  }

    /* PARALLAX SECTION (reusable) */
    .parallax-section {
      position: relative;
      background-size: cover; 
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed; /* The key for simple parallax */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
      overflow: hidden;
	  padding: 75px 0;
    }

	.parallax-section h1, .parallax-section h2, .parallax-section h3, .parallax-section h4, .parallax-section p {
		color: white;
	}

    /* Optional overlay for better contrast */
    .parallax-section::before {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1;
    }
    .parallax-text {
      position: relative;
      z-index: 2; /* Above overlay */
      padding: 0 20px;
      width: 80%;
      margin: 0 auto;
    }
    /* Slides hidden by default */
    .slide {
      display: none;
    }

	  
	  
	  
	.parallax-div {
	  background-attachment: fixed;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	}
	  
    .wide_footer {
      padding: 18px 20px;
      background: #f4f4f4;
      border-top: 1px solid #ddd;
    }
	  
	#footer_content {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  /* no explicit height so it can be dynamic */
	  background-color: #fff;
	  z-index: 9999;
	}

	#main {
	  padding-bottom: 0; /* Start at 0, then update via JS */
	}
	  
	#tavla { width:96%; margin: auto auto; border: 1px solid #bbb; }

	#top-menu {
	  background: rgba(0, 0, 0, 0.4); /* 20% black opacity */
	  z-index: 999;                  /* ensure it stays on top */
	  height: 50px;
	  overflow: visible;
	}
	  
	#top-menu a {
	  color: #fff; /* or any color that stands out against the background/video */
	  opacity: .7;
	  font-family: 'Cinzel', serif; /* or 'Roboto', etc. */
	  font-size: 1.2em;
	  transition: background-color 0.8s ease; opacity 0.8s ease;
	}
	#top-menu a:hover {
	  background-color: rgba(0, 0, 0, 0.8);
	  opacity: 1;
	}
	#top-menu li ul li a {
	  color: #333;
	  font-size: .9em;
	}
	/* Always start by resetting the default "display" of the dropdown-menu */
	.navbar-nav .dropdown-menu {
	  display: none;
	  position: absolute;
	  top: 100%;
	  left: 0;
	  margin-top: 0;
	  min-width: 200px; /* Feel free to adjust width as needed */
	  z-index: 1000;    /* Ensure the submenu appears above other elements */
	}

	/* When the dropdown is open (triggered by Bootstrap JS), show the menu */
	.navbar-nav .open .dropdown-menu {
	  display: block;
	}






	.visually-hidden {
		display:none;
	}

    /**
     *  Responsive Adjustments for iPhone (small screens)
     */
    @media (max-width: 575px) {
      .cover-image img {
        width: 60% !important;  /* iPhone: logo -> 60% */
      }
      .cover-image .text-above {
        font-size: 2.5em !important;
      }
      #upper_right_logo img {
        width: 60px;
      }
		
    }



/*. For Image Vault */
.helper > .img-responsive-smart {  /*for the vault*/
	clear:both;
    padding: 5px;
    height:120px;
}
#admin_menu a {
	color: #222;
	font-size: 1em;
	font-family: arial;
}