/* Hero banner (1280 x 514) */
    /*
	.hero { margin: 0; padding: 0; background: #222; text-align: center; }
    .hero img { width: 100%; max-width: 1280px; height: auto; aspect-ratio: 1280 / 314; margin: 0 auto; display: block; }
	*/
	
	.hero { margin: 0; padding: 0; background: #222; }
    .hero-inner { position: relative; max-width: 1280px; margin: 0 auto; }
    .hero-inner img { width: 100%; height: auto; aspect-ratio: 1280 / 300; display: block; }

    /* Dark overlay so the text stays readable on any photo */
    .hero-inner:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;  }

    /* The text, centered over the image */
    .hero-text { position: absolute; z-index: 2; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: left; color: #000; padding: 0px 0px 0px 25px; }
    .hero-text h2 { margin: 0 0 10px; font-size: 24px; }
    .hero-text p  { margin: 0; font-size: 32px;font-weight: 700; }

    /* Menu bar sits directly under the hero */
    .navbar { margin-bottom: 0; border-radius: 0; }
	
	/*Own Rules*/
	.dropdown-submenu{width: 200px;}
    .nav .dropdown.open .caret {border-top: none;border-bottom: 5px solid #9d9d9d;}
	.blog-main-padding{padding-left:0px;}
	.navbar-inverse .navbar-nav > li > a {color:#000}
	.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav>.open>a:focus {color:#fff;background-color: #176DA9;}
	.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {color: #000;}
	/*Own Rules*/
	
	/* Hover dropdowns: parent > child > sub-child (desktop) */
    @media (min-width: 768px) {
      /* Level 1 -> children: only the hovered parent opens */
      .navbar-nav > li.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
      .navbar-nav > li.dropdown:hover > .dropdown-toggle { background: #176DA9; color: #fff; }

      /* Level 2 -> sub-children: hidden by default, always */
      .navbar-nav .dropdown-menu .dropdown-submenu { position: relative; }
      .navbar-nav .dropdown-menu .dropdown-submenu > .dropdown-menu {
        display: none;
        top: 0; left: 100%;
        margin-top: -6px; margin-left: -1px;
        border-radius: 0 6px 6px 6px;
      }
      /* ...and only the hovered child shows its own sub-menu */
      .navbar-nav .dropdown-menu .dropdown-submenu:hover > .dropdown-menu { display: block; }
      .dropdown-submenu > a:after { content: "\25B8"; float: right; margin-top: 0; margin-right: -5px; color: #999; }
      .dropdown-submenu:hover > a:after { color: #333; }
	  
    }
    /* Mobile: submenus stack and open on tap */
    @media (max-width: 767px) {
      .dropdown-submenu > .dropdown-menu { position: static; float: none; display: none; box-shadow: none; border: 0; background: transparent; padding-left: 15px; }
      .dropdown-submenu.open > .dropdown-menu { display: block; }
      .dropdown-submenu > .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #000; }
	  .blog-main-padding{padding:15px 5px 0px 5px;}
	  .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > li > a {padding-left:30px;}
	  
	  .hero-text h2 { font-size: 20px; margin-bottom: 4px; }
	  .hero-text p  { font-size: 24px; }
    }

    /* ---- Override for a site-wide ".dropdown:hover .dropdown-menu {display:block}" rule ----
       Scoped with #main-nav so it beats that rule without touching or removing it. */
    #main-nav .dropdown:hover .dropdown-menu { display: none; }               /* reset everything in the navbar */
    #main-nav .navbar-nav .dropdown.open > .dropdown-menu { display: block; } /* click/tap opens a parent */
    #main-nav .navbar-nav .dropdown-submenu.open > .dropdown-menu { display: block; } /* tap opens a sub-menu */

    @media (min-width: 768px) {
      /* Desktop: hover opens one level at a time */
      #main-nav .navbar-nav > li.dropdown:hover > .dropdown-menu { display: block; }
      #main-nav .navbar-nav .dropdown-submenu:hover > .dropdown-menu { display: block; }
	  .navbar-inverse .navbar-nav > li > a:hover{ color: #000; }
    }
	
    .blog-section { padding: 30px 0px 30px 0px; }
    .blog-section h2 { margin: 0 0 25px; }
    .blog-section-h1 { margin: 0 0 25px;font-size: 30px; }

    /* Post cards */
    .post-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; margin-bottom: 30px; overflow: hidden; transition: box-shadow .2s; }
    .post-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
    .post-card img { width: 100%; height: auto; display: block; }
    .post-card:hover img { transform: scale(1.10);transition: transform 0.4s ease; }
    .post-card .caption { padding: 25px 18px 20px; }
    .post-card h3 { margin: 0 0 10px; font-size: 20px; }
    .post-card ul { padding-left: 18px; margin-bottom: 12px; color: #555; }