body {
      background-color: #F9F7DF;
      font-family: Courier, system-ui, sans-serif;
      color: #2c2c2c;
      margin: 0;
      padding: 0;
    }
    .header {
          position: sticky;
          top: 0;
          background: #F9F7DF;
          z-index: 1000;
         /* border-bottom: 1px solid #000;*/
         -webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
         box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
         -webkit-animation: 0.5s ease-in-out fadeInDown;
         animation: 0.5s ease-in-out fadeInDown;
        -webkit-transition: 0.6s;
         transition: 0.6s;
    }
    .logo {
        max-width:75px;
    }
    .nav-bar {
      padding: 10px 75px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav-left {
      font-weight: bold;
      flex-shrink: 0;
    }
    .nav-center {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
    }
    .nav-links a {
      margin: 0 15px;
      color: #000;
      text-decoration: none;
      position: relative;
    }
    .nav-links a:not(:last-child)::after {
      content: '|';
      position: absolute;
      right: -12px;
      color: #000;
    }
    .nav-right {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .nav-right span {
      margin-left: 15px;
    }
    .nav-right button {
      margin-left: 15px;
    }
    .hero, .footer {
      text-align: center;
      background-image: url('../images/header_bg.png');
      background-size: cover;
      background-position: center;
      color: #fff;
      padding: 25px 0px;
    }
    .hero h1, .footer h1 {
      font-weight: bold;
      text-transform: uppercase;
    }
    .hero_filter{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: inherit; background-size: cover; background-position: center; filter: brightness(0.9); z-index: 1;
    }
    .hero .email-box, .footer .email-box {
        width: 50%;
		padding-left: 30px;
    }
    .beehiiv-embed {
            height: 400px!important;
        }
    .email-box input {
      border-radius: 5px;
      border: 1px solid #ccc;
      padding: 10px;
      width: 240px;
      margin: 10px;
    }
    .email-box button {
      background-color: #2c2c2c;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
    }
    .explore-section {
      padding: 60px 0px;
      display: flex;
	  justify-content: center;
      flex-wrap: wrap;
	  border-bottom: 1px solid #333;
    }
    .explore-section img {
      width: 100%;
      border: 1px solid #333;
    }
    .blog-list {
      margin-left: 30px;
      width: 40%;
      /*background-color: #efe2c4;*/
      border: 1px solid #000;
      border-radius: 10px;
      padding: 20px;
	  max-height: 925px;
	  display: flex;
	  flex-direction: column;
    }
    .blog-list h5 {
      font-weight: bold;
      border-bottom: 1px solid #555;
      padding-bottom: 10px;
	  margin-bottom: 15px;
	  flex-shrink: 0;
    }
	.blog-scroll {
		overflow-y: auto;
		flex-grow: 1;
		padding-right: 10px;
	 }
    .blog-card {
	  font-family : "Trebuchet MS", system-ui, sans-serif;
      /*background: #efe2c4;*/
      border: 1px solid #555;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 10px;
      cursor: pointer;
	  color: inherit;
	  text-decoration: none;
    }
	.blog-card:hover {
		color: inherit;
		text-decoration: none;
	  }
	  
	 .all_blogs_text {
	    color: #000;
        font-weight: 600;
        text-decoration: none;
	 }
	 .all_blogs_text:hover {
	     color: #ff6b35;
         text-decoration: none;
	 }
	 
    .game-section {
      padding: 60px 30px;
      text-align: center;
      border-top: 1px solid #333;
      border-bottom: 1px solid #333;
    }
	
    /*.footer {
      background-image: url('../images/footer_bg.png');
      background-size: cover;
      background-position: center;
      /*padding: 80px 0px;*/
	 /* padding: 0px 0px 40px 0px;*/
     /* text-align: center;
      color: #fff;
    }
    .footer_filter{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: inherit; background-size: cover; background-position: left; background-color: #0c0c0c; filter: brightness(0.9); z-index: 1;
    }
    .footer .email-box{
        display: flex;
        justify-content: end;
        align-items: center;
        position: relative;
    }*/
    
    .blog-content {
        font-family: "Trebuchet MS", system-ui, sans-serif;
    }
    .blog-content .content h2{
    	font-family: "Trebuchet MS", system-ui, sans-serif;
        font-weight: 700;
        --color: #030712;
        --font-size: 42px;
        --mobile-font-size: 32px;
    }
    
    .blog_author_info {
    	display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .blog_author_info .blog_author{
    	display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    	
    }
    
    .blog_author_info .author_img img {
    	border-radius: 50px;
    	width:50px;
    	height: 50px;
    }
    .blog_author_info .author_info{
    	display: flex;
        flex-direction: column;
    }
    .blog_author_info .author_info .author_name{font-weight: bold;}
    .blog-img{max-height:390px;}
    
    /*Maxico Page */
    .blog-list-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s ease;
      height: 350px;
    }
    .blog-list-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .blog-list-img {
      height: 200px;
      object-fit: cover;
      width: 100%;
    }
    .blog-list-body {
      padding: 1.2rem;
    }
    .blog-list-category {
      font-size: 0.8rem;
      text-transform: uppercase;
      font-weight: 600;
      color: #ff6b35;
      margin-bottom: 0.4rem;
      display: block;
    }
    .blog-list-title {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.6rem;
      color: #333;
      line-height: 1.3;
    }
    .blog-list-title:hover {
      color: #ff6b35;
      text-decoration: none;
    }
    .blog-list-meta {
      font-size: 0.85rem;
      color: #888;
    }
    
    

@media(max-width:1200px){
        
        
}

@media(max-width:992px){ 
        
}
    
@media screen and (max-width: 767px) {
      .nav-bar {
         padding: 10px 25px;
      }
      .blog-list {
            margin: 16px;
            width: 100%;
        }
       
        #beehiiv-subscribe-form{
            width: 100%;
        }
        
        .beehiiv-embed {
            height: 500px!important;
        }
}

@media(max-width:767px){ 
	  .hero, .footer {
		  background-position: left;
          padding: 25px 0px;
		}
		.hero_filter{
			background-position: left;
		}
        .hero .email-box, .footer .email-box{
            width: 100%;
			padding: 10px;
        }
        .explore-section {
            gap: 20px;
        }
        .blog-list-img {
            height: 180px;
          }
        
}
    
@media(max-width:520px){
        
}