/*
Theme Name: Custom Theme
Theme URI: http://skyhawksfusion.com/
Description: .
Version: 1.0.0
Author: skyhawksfusion
Author URI: http://skyhawksfusion.com/
*/

.banner-wrapper {
    position: relative;
    padding: 50px 0px;
    background-position: top center;
    background-size: cover !important;
    margin-top: -90px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    z-index: 1;
}
body:not(.home) section.banner-wrapper:before {
    content: "";
    width: 100%;
    height: 33%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #fff, transparent);
}
.main-heading, .main-heading span {
    color: #000;
    font-weight: 700;
    font-size: 60px;
    line-height: 80px;
}
section.contentArea.blog {
    padding: 60px 0;
    position: relative;
}
.blogwrap {
    padding: 20px;
    box-shadow: 5px 0px 15px #00000066;
    height: 100%;
    position: relative;
    z-index: 9;
    background: #fff;
}
.blogwrap .post-thumb img {
    width: 100%;
    object-fit: cover;
}
.datepo {
    margin-top: 10px;
}
.secondary-btn {
    background: #041f3b;
    border-radius: 60px;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    color: #fff;
    padding: 14px 30px;
    transition: 0.3s allease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    border: 1px solid #041f3b;
}
.secondary-btn svg {
    width: 14px;
    height: auto;
}
.theme-flexbox {
    display: flex;
    flex-wrap: wrap;
}
.list-2 {
    width: 47%;
}
.list-2:nth-child(even) {
    padding-right: 0;
}
.list-2 {
    padding: 0 21px;
    margin-bottom: 80px;
}
.blogwrap a {
    text-decoration: none;
}
section.postsinglepos {
    padding: 60px 0;
}
.single.post-item h2.post-title {
    max-width: 70%;
}
.single.post-item .post-title ul {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    gap: 1rem;
    display: flex
;
}
.single.post-item p {
    margin-top: 20px;
}
.single.post-item img {
    width: 100%;
    margin-bottom: 15px;
}
.postsidebar {
    background: #fba41654;
    padding: 20px;
}
.searchd form {
    border: solid 1px #ffffff;
    padding: 15px 8px;
    background: #fff;
    border-radius: 30px;
    position: relative;
}
.searchd button {
    border: 0;
    background: transparent;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.catlist h2, .recpos h2, .tagsli h2 {
    font-size: 20px;
    margin: 23px 0 11px;
    text-transform: uppercase;
}
.catlist ul, .recpos ul, .tagsli ul {
    list-style: none;
    padding: 0;
}
.catlist ul li {
    border-bottom: solid 1px #c4c4c4;
    padding: 10px 25px 10px;
    position: relative;
}
.catlist ul li a {
    color: #000;
}
.catlist ul li:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 13px;
    left: 0;
    background: url(staticimage/right-arrowlist.png);
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center;
}
.recpos a {
    align-items: center;
    display: flex
;
    gap: 1rem;
    text-decoration: none;
}
.titl {
    color: #000;
    font-size: 14px;
}
.cmtns {
    display: flex
;
    align-items: center;
    gap: 5px;
    color: #5E5E5E;
    font-size: 15px;
}
.cmtns img {
    width: 12px;
}
.cmtns span {
    font-size: 12px;
}
.tagsli ul {
    display: flex
;
    flex-wrap: wrap;
}
.tagsli li {
    width: 42%;
    background: #041F3B;
    margin: 0 5px 11px;
    padding: 10px 0;
}
.tagsli li a {
    color: #fff;
    background: #041F3B;
    font-size: 14px;
    text-align: center;
    width: 100%;
    display: block;
}
h3#reply-title {
    text-transform: uppercase;
}
p.logged-in-as, p.logged-in-as a {
    color: #000;
}
section.commentbox.faq-wrapper form#commentform input, section.commentbox.faq-wrapper form#commentform textarea {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
    border: solid 1px #000;
    padding: 10px;
}
section.commentbox.faq-wrapper form#commentform input#submit {
    background: #041f3b;
    border-radius: 60px;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    color: #fff;
    padding: 14px 30px;
    transition: 0.3s allease;
    align-items: center;
    text-align: center;
    border: 1px solid #041f3b;
    width: auto;
    margin-bottom: 10px;
}
.postsidebar input#search-form- {
    width: 100%;
    border: 0;
}
@media (min-width: 768px) {
    .list-9 {
        flex: 0 0 auto;
        width: 75%;
    }
	.list-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}
@media(max-width:768px){
	.list-2{
		width:100%;
		padding: 0;
	}
	section.postsinglepos {
    padding: 25px 0;
}
}

  :root{
    --orange: #F0A93E;
    --orange-strong: #F3871E;
    --orange-deep: #E8791A;
    --green: #4FAE8B;
    --green-dark: #3B8F70;
    --bg-dark: #241D19;
    --bg-dark-2: #1B1512;
    --bg-darker: #17110F;
    --text-light: #F3EFEB;
    --text-muted: #B5AAA1;
    --text-faint: #8A7F77;
    --border-dark: #3A2F29;
    --page-bg: #FBF8F5;
    --card-bg: #FFFFFF;
    --ink: #241D19;
    --ink-soft: #5A5049;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    font-family:'Inter', sans-serif;
    background: var(--page-bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3,h4{ font-family:'Orbitron', sans-serif; margin:0; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; margin:0; padding:0; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; cursor:pointer; }

  .container{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ===== Skip link ===== */
  .skip-link{
    position:absolute; left:-9999px; top:0; background:var(--orange-strong); color:#fff;
    padding:10px 16px; z-index:200; border-radius:0 0 6px 0;
  }
  .skip-link:focus{ left:0; }

  /* ===== Maintenance banner ===== */
  .maintenance-banner{
    background: linear-gradient(90deg, #F0A93E, #EFAF4C);
    color: #241D19;
    text-align:center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
  }
  .maintenance-banner .icon{ margin-right:6px; }

  /* ===== Header / Nav ===== */
  header{
    background: linear-gradient(180deg, #2C2420 0%, #1F1916 100%);
    position: sticky;
    top:0;
    z-index:100;
    border-bottom: 1px solid var(--border-dark);
  }
  .navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding: 14px 24px;
    max-width: 1320px;
    margin:0 auto;
  }
  .logo{
    display:flex;
    flex-direction:column;
    line-height:1;
  }
  .logo .wordmark{
    font-family:'Poppins', sans-serif;
    font-weight:800;
    font-style:italic;
    font-size: 26px;
    letter-spacing: 0.5px;
    transform: skewX(-2deg);
  }
  .logo .wordmark .tra{ color: var(--orange); }
  .logo .wordmark .zam{ color: var(--green); }
  .logo .tagline{
    font-size: 10px;
    font-weight:600;
    letter-spacing: 3px;
    color: var(--text-faint);
    margin-top: 4px;
  }

  .nav-right{
    display:flex;
    align-items:center;
    gap: 22px;
  }
  .nav-link{
    display:flex;
    align-items:center;
    gap:7px;
    font-weight:600;
    font-size: 14.5px;
    color: var(--text-light);
    white-space:nowrap;
  }
  .nav-link.zamtrack{ color: var(--green); }
  .nav-link .dot-icon{
    width:16px; height:16px; flex:none;
  }

  .select-pill{
    display:flex;
    align-items:center;
    gap:6px;
    background: transparent;
    border: 1px solid var(--border-dark);
    color: var(--text-light);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight:600;
  }
  .select-pill svg{ width:14px; height:14px; opacity:.8; }

  .btn-signin{
    background: linear-gradient(180deg, var(--orange-strong), var(--orange-deep));
    color:#fff;
    font-weight:700;
    font-size:14.5px;
    padding: 10px 22px;
    border-radius: 8px;
    border:none;
    box-shadow: 0 2px 0 rgba(0,0,0,.15);
  }
  .btn-signin:hover{ filter: brightness(1.05); }

  .nav-toggle{
    display:none;
    background:none;
    border:none;
    width: 30px; height: 24px;
    position:relative;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:"";
    position:absolute; left:0; right:0; height:2px; background: var(--text-light);
  }
  .nav-toggle span{ top:11px; }
  .nav-toggle::before{ top:2px; }
  .nav-toggle::after{ top:20px; }

  /* ===== Hero ===== */
  .blog-hero{
    background:
      radial-gradient(700px 300px at 85% -10%, rgba(79,174,139,0.12), transparent 60%),
      radial-gradient(600px 260px at 5% -20%, rgba(240,169,62,0.18), transparent 60%),
      var(--page-bg);
    padding: 64px 0 40px;
    border-bottom: 1px solid #EFE7DE;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color: var(--green-dark);
    background: rgba(79,174,139,0.1);
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:18px;
  }
  .blog-hero h1{
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    max-width: 720px;
    line-height:1.1;
    color: var(--ink);
  }
  .blog-hero h1 span{ color: var(--orange-deep); }
  .blog-hero p{
    margin-top:16px;
    font-size:17px;
    color: var(--ink-soft);
    max-width: 560px;
    line-height:1.6;
  }

  .search-row{
    margin-top:32px;
    display:flex;
    gap:12px;
    max-width: 480px;
    flex-wrap:wrap;
  }
  .search-box{
    flex:1;
    min-width:220px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #E7DFD6;
    border-radius:10px;
    padding: 12px 16px;
  }
  .search-box svg{ width:18px; height:18px; color: var(--text-faint); flex:none; }
  .search-box input{
    border:none; outline:none; width:100%; font-size:14.5px; font-family:'Inter';
    background:transparent;
  }
  .search-btn{
    background: var(--ink);
    color:#fff;
    border:none;
    padding: 0 22px;
    border-radius:10px;
    font-weight:700;
    font-size:14.5px;
  }

  /* ===== Categories ===== */
  .categories{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    padding: 28px 0 0;
  }
  .cat-pill{
    padding: 9px 18px;
    border-radius: 24px;
    font-size: 13.5px;
    font-weight:700;
    border:1px solid #E7DFD6;
    color: var(--ink-soft);
    background:#fff;
  }
  .cat-pill.active{
    background: var(--ink);
    border-color: var(--ink);
    color:#fff;
  }

  /* ===== Featured post ===== */
  .featured{
    margin: 36px 0 48px;
    background: linear-gradient(120deg, #241D19, #1B1512);
    border-radius: 20px;
    overflow:hidden;
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    align-items:stretch;
  }
  .featured-img{
    background: #000 url('https://placehold.co/900x600/2c241f/8a7f77?text=TraZam') center/cover no-repeat;
    min-height: 280px;
  }
  .featured-body{
    padding: 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .tag{
    display:inline-flex;
    width:fit-content;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color: var(--green);
    background: rgba(79,174,139,0.12);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom:16px;
  }
  .featured-body h2{
    color:#fff;
    font-size: clamp(22px, 3vw, 30px);
    line-height:1.25;
    font-weight:700;
  }
  .featured-body p{
    color: var(--text-muted);
    margin-top:14px;
    font-size:15px;
    line-height:1.65;
    max-width:480px;
  }
  .meta-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:24px;
    font-size:13px;
    color: var(--text-faint);
  }
  .meta-row .dot{ width:4px;height:4px;border-radius:50%;background:var(--text-faint); }
  .read-more{
    margin-top:26px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color: var(--orange);
    font-weight:700;
    font-size:14.5px;
  }

  /* ===== Blog grid ===== */
  .blog-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding-bottom: 20px;
  }
  .post-card{
    background: var(--card-bg);
    border: 1px solid #EFE7DE;
    border-radius: 16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .post-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(36,29,25,0.08);
  }
  .post-thumb{
    aspect-ratio: 16/10;
    background: #eee url('https://placehold.co/600x375/EFE7DE/8a7f77?text=TraZam+Blog') center/cover no-repeat;
  }
  .post-body{
    padding: 22px 22px 24px;
    display:flex;
    flex-direction:column;
    flex:1;
  }
  .post-body .tag{
    color: var(--orange-deep);
    background: rgba(240,169,62,0.14);
  }
  .post-body h3{
    font-size:18px;
    font-weight:700;
    line-height:1.35;
    margin-top:14px;
    color: var(--ink);
  }
  .post-body p{
    font-size:14px;
    color: var(--ink-soft);
    line-height:1.6;
    margin-top:10px;
    flex:1;
  }
  .post-meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    font-size:12.5px;
    color: var(--text-faint);
  }
  .post-meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--text-faint); }

  /* ===== Newsletter ===== */
  .newsletter{
    margin: 60px 0;
    background: linear-gradient(120deg, var(--green-dark), var(--green));
    border-radius: 20px;
    padding: 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
  }
  .newsletter h2{
    color:#fff;
    font-size: clamp(22px,3vw,28px);
    max-width: 420px;
  }
  .newsletter p{
    color: rgba(255,255,255,0.85);
    margin-top:10px;
    font-size:14.5px;
    max-width: 420px;
  }
  .newsletter-form{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    flex:1;
    max-width: 420px;
  }
  .newsletter-form input{
    flex:1;
    min-width:200px;
    padding: 13px 16px;
    border-radius:10px;
    border:none;
    outline:none;
    font-size:14.5px;
    font-family:'Inter';
  }
  .newsletter-form button{
    background: var(--ink);
    color:#fff;
    border:none;
    padding: 0 24px;
    border-radius:10px;
    font-weight:700;
    font-size:14.5px;
  }

  /* ===== Pagination ===== */
  .pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding: 12px 0 64px;
  }
  .page-btn{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    border:1px solid #E7DFD6;
    background:#fff;
    font-weight:700;
    font-size:14px;
    color: var(--ink-soft);
  }
  .page-btn.active{
    background: var(--ink);
    border-color: var(--ink);
    color:#fff;
  }
  .page-btn.nav{ font-size:12px; }

  /* ===== Footer ===== */
  footer{
    background: var(--bg-darker);
    padding: 64px 0 0;
    border-top: 1px solid var(--border-dark);
  }
  .footer-top{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 44px;
  }
  .footer-brand .wordmark{
    font-family:'Poppins', sans-serif;
    font-weight:800;
    font-style:italic;
    font-size:26px;
    transform: skewX(-2deg);
    display:inline-block;
  }
  .footer-brand .wordmark .tra{ color:#fff; }
  .footer-brand .wordmark .zam{ color: var(--green); }
  .footer-brand .tagline{
    font-size:10px;
    font-weight:600;
    letter-spacing:3px;
    color: var(--text-faint);
    margin-top:6px;
  }
  .footer-brand p{
    color: var(--text-muted);
    font-size:14px;
    line-height:1.6;
    margin-top:18px;
    max-width: 260px;
  }
  .footer-col h4{
    color:#fff;
    font-size:15px;
    font-weight:700;
    margin-bottom: 18px;
  }
  .footer-col ul li{ margin-bottom:12px; }
  .footer-col ul li a{
    color: var(--text-muted);
    font-size:14px;
  }
  .footer-col ul li a:hover{ color:#fff; }

  .footer-bottom{
    border-top: 1px solid var(--border-dark);
    padding: 24px 0;
    text-align:center;
    color: var(--text-faint);
    font-size:13px;
  }
article.contentArea.blog {
    padding-right: 30px;
}
section.commentbox.faq-wrapper form#commentform input#submit {
    border: 1px solid #e8791a;
    background: linear-gradient(180deg, var(--orange-strong), #e8791a);
}
  /* ===== Responsive ===== */
  @media (max-width: 992px){
    .blog-grid{ grid-template-columns: repeat(2, 1fr); }
    .featured{ grid-template-columns: 1fr; }
    .featured-img{ min-height: 220px; }
    .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; row-gap:36px; }
  }

  @media (max-width: 760px){
	  article.contentArea.blog {
    padding-right: 0px;
}
    .nav-right > .nav-link, .nav-right > .select-pill{ display:none; }
    .nav-toggle{ display:block; }
    .navbar{ padding: 12px 20px; }
    .blog-hero{ padding: 44px 0 30px; }
    .blog-grid{ grid-template-columns: 1fr; }
    .newsletter{ padding: 32px 24px; flex-direction:column; align-items:flex-start; }
    .newsletter-form{ max-width:100%; width:100%; }
    .footer-top{ grid-template-columns: 1fr 1fr; }
    .footer-brand{ grid-column: 1 / -1; }
  }

  @media (max-width: 480px){
    .footer-top{ grid-template-columns: 1fr 1fr; gap:28px; }
    .search-row{ max-width:100%; }
  }

  :focus-visible{
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }
  a.nav-link.zamtrack {
    display: flex;
    font-style: italic;
}
a.nav-link.zamtrack span {
    color: #df8749;
}