/*
Theme Name: ColonelVPN
Theme URI: https://colonelvpn.com/
Author: ColonelVPN
Description: Custom WordPress theme converted from the ColonelVPN HTML design. Header and footer are handled by the theme, while page bodies can be built as separate HTML content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: colonelvpn
*/

:root {
      --dark: #182514;
      --dark-2: #22351d;
      --green: #3f5f2b;
      --green-2: #5f7f37;
      --yellow: #d8b400;
      --yellow-2: #f0c800;
      --brown: #5b4326;
      --sand: #c7b36a;
      --paper: #ece7d7;
      --white: #ffffff;
      --black: #0c1209;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: var(--dark);
      color: var(--white);
      line-height: 1.45;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .topbar {
      background: var(--black);
      color: var(--sand);
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .02em;
      border-bottom: 3px solid var(--brown);
      text-transform: uppercase;
    }

    .topbar .danger-icon,
    .topbar .danger-text,
    .topbar .detected-ip {
      color: #ff3b30;
    }

    .topbar .detected-location {
      color: var(--white);
    }

    .header {
      background: var(--dark-2);
      height: 78px;
      border-bottom: 4px solid var(--green-2);
    }

    .nav {
      width: min(1280px, calc(100% - 48px));
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      font-weight: 900;
      letter-spacing: .08em;
      font-size: 22px;
      text-transform: uppercase;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      background: var(--yellow);
      color: var(--black);
      display: grid;
      place-items: center;
      font-weight: 900;
      border: 4px solid var(--black);
      clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 34px;
      font-size: 15px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 14px;
    }

    .language-switch {
      height: 40px;
      min-width: 62px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 3px solid var(--green-2);
      background: var(--black);
      color: var(--white);
      font-weight: 900;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 52px;
      padding: 0 28px;
      background: var(--yellow);
      color: var(--black);
      border: 4px solid var(--black);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
      clip-path: polygon(0 0, 100% 0, 100% 76%, 88% 100%, 0 100%);
    }

    .btn.dark {
      background: var(--dark);
      color: var(--white);
      border-color: var(--yellow);
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 720px;
      background:
        linear-gradient(105deg, rgba(24,37,20,.98) 0%, rgba(24,37,20,.92) 46%, rgba(34,53,29,.78) 100%),
        repeating-linear-gradient(135deg, rgba(216,180,0,.10) 0 2px, transparent 2px 22px);
      border-bottom: 8px solid var(--yellow);
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(216,180,0,.12) 1px, transparent 1px),
        linear-gradient(rgba(216,180,0,.08) 1px, transparent 1px);
      background-size: 72px 72px;
      opacity: .25;
      pointer-events: none;
    }

    .military-shapes {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .36;
    }

    .bullet {
      position: absolute;
      width: 210px;
      height: 34px;
      background: var(--brown);
      border: 4px solid rgba(0,0,0,.45);
      transform: rotate(-18deg);
      clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    }

    .bullet.one { top: 120px; right: 80px; }
    .bullet.two { bottom: 120px; left: -70px; transform: rotate(14deg); }

    .tank {
      position: absolute;
      right: 120px;
      bottom: 70px;
      width: 430px;
      height: 160px;
      border: 6px solid rgba(0,0,0,.5);
      background: rgba(91,67,38,.9);
      clip-path: polygon(8% 32%, 58% 32%, 66% 0, 86% 0, 86% 32%, 100% 32%, 92% 100%, 0 100%);
    }

    .tank:before {
      content: "";
      position: absolute;
      width: 230px;
      height: 16px;
      right: -160px;
      top: 28px;
      background: rgba(91,67,38,.95);
      border: 4px solid rgba(0,0,0,.5);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 460px;
      gap: 70px;
      align-items: center;
      min-height: 720px;
      padding: 80px 0;
    }

    .eyebrow {
      display: inline-block;
      background: var(--yellow);
      color: var(--black);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 8px 12px;
      border-left: 8px solid var(--brown);
      margin-bottom: 28px;
    }

    h1 {
      font-size: clamp(54px, 6vw, 92px);
      line-height: .94;
      max-width: 720px;
      letter-spacing: -.06em;
      text-transform: uppercase;
      margin-bottom: 32px;
    }

    .hero p {
      max-width: 610px;
      font-size: 20px;
      color: #f4f0df;
      font-weight: 700;
      margin-bottom: 24px;
    }

    .hero-buttons {
      display: flex;
      gap: 18px;
      margin-top: 36px;
      flex-wrap: wrap;
    }

    .vpn-card {
      background: var(--paper);
      color: var(--black);
      border: 6px solid var(--black);
      transform: rotate(3deg);
      box-shadow: 18px 18px 0 rgba(0,0,0,.35);
    }

    .vpn-card-head {
      background: var(--green-2);
      color: var(--white);
      padding: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 5px solid var(--black);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 22px;
    }

    .vpn-card-body {
      padding: 28px;
      background:
        linear-gradient(rgba(236,231,215,.86), rgba(236,231,215,.86)),
        repeating-linear-gradient(45deg, var(--sand) 0 14px, var(--paper) 14px 28px);
    }

    .status {
      color: #1f7f2e;
      font-weight: 900;
      font-size: 28px;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .location {
      font-size: 24px;
      font-weight: 900;
      margin-bottom: 22px;
    }

    .spec-row {
      display: flex;
      justify-content: space-between;
      border-top: 3px solid var(--black);
      padding: 12px 0;
      font-weight: 900;
      text-transform: uppercase;
    }

    .vpn-card .btn {
      width: 100%;
      margin-top: 22px;
    }

    .section {
      padding: 96px 0;
    }

    .platform-strip {
      background: var(--black);
      color: var(--white);
      border-bottom: 8px solid var(--brown);
      padding: 62px 0;
    }

    .platform-inner {
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 330px 1fr;
      gap: 34px;
      align-items: center;
    }

    .platform-title {
      color: var(--yellow);
      font-size: 18px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 12px;
    }

    .platform-copy {
      color: #f4f0df;
      font-size: 18px;
      font-weight: 800;
    }

    .platform-list {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .platform-item {
      background: var(--dark-2);
      border: 4px solid var(--green-2);
      padding: 18px 10px;
      text-align: center;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 12px;
    }

    .platform-item i {
      display: block;
      color: var(--yellow);
      font-size: 28px;
      margin-bottom: 10px;
    }

    .section.light {
      background: var(--paper);
      color: var(--black);
    }

    .section.dark {
      background: var(--dark-2);
      color: var(--white);
    }

    .wrap {
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 70px;
      align-items: center;
    }

    h2 {
      font-size: clamp(34px, 4vw, 58px);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: -.04em;
      margin-bottom: 22px;
    }

    .lead {
      font-size: 19px;
      max-width: 620px;
      font-weight: 700;
    }

    .pricing-box {
      background: var(--white);
      color: var(--black);
      border: 6px solid var(--black);
      padding: 34px;
      box-shadow: 14px 14px 0 var(--brown);
    }

    .price {
      font-size: 54px;
      font-weight: 900;
      letter-spacing: -.04em;
      margin-bottom: 10px;
    }

    .pricing-box ul {
      list-style: none;
      margin: 24px 0;
    }

    .pricing-box li {
      padding: 11px 0;
      border-top: 3px solid #ded7bf;
      font-weight: 900;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 50px;
    }

    .feature-card {
      background: var(--paper);
      color: var(--black);
      border: 5px solid var(--black);
      padding: 28px;
      min-height: 245px;
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      background: var(--yellow);
      border: 4px solid var(--black);
      margin-bottom: 24px;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .feature-card h3 {
      text-transform: uppercase;
      font-size: 22px;
      line-height: 1.05;
      margin-bottom: 14px;
    }

    .feature-card p {
      font-weight: 700;
      color: #24301f;
    }

    .browser-box {
      background: var(--black);
      color: var(--white);
      border: 6px solid var(--green-2);
      height: 250px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 26px;
      box-shadow: 14px 14px 0 var(--yellow);
      text-transform: uppercase;
      font-weight: 900;
      font-size: 24px;
    }

    .articles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .article-card {
      background: var(--paper);
      color: var(--black);
      border: 5px solid var(--black);
      padding: 24px;
    }

    .tag {
      display: inline-block;
      border: 3px solid var(--black);
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .article-card h3 {
      font-size: 21px;
      line-height: 1.08;
      margin-bottom: 24px;
      text-transform: uppercase;
    }

    .article-card .btn {
      height: 42px;
      width: 100%;
      font-size: 12px;
      background: var(--dark);
      color: var(--white);
      border-color: var(--black);
    }

    .cta {
      background: var(--yellow);
      color: var(--black);
      text-align: center;
      padding: 100px 24px;
      border-top: 8px solid var(--black);
      border-bottom: 8px solid var(--black);
    }

    .cta h2 {
      max-width: 880px;
      margin: 0 auto 34px;
      font-size: clamp(42px, 6vw, 78px);
    }

    .footer {
      background: var(--dark);
      color: var(--white);
      padding: 76px 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 42px;
    }

    .footer h4 {
      color: var(--yellow);
      text-transform: uppercase;
      font-size: 20px;
      margin-bottom: 18px;
    }

    .footer a,
    .footer p {
      display: block;
      color: #f4f0df;
      margin-bottom: 12px;
      font-size: 17px;
      font-weight: 700;
    }

    .footer i {
      width: 24px;
      color: var(--yellow);
      margin-right: 8px;
    }

    .social-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 18px;
    }

    .social-row a {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 3px solid var(--green-2);
      background: var(--black);
      margin: 0;
    }

    .social-row i {
      margin: 0;
      width: auto;
      font-size: 18px;
    }

    @media (max-width: 980px) {
      .menu { display: none; }
      .hero-inner,
      .two-col {
        grid-template-columns: 1fr;
      }
      .features,
      .articles,
      .platform-inner,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .platform-list {
        grid-template-columns: repeat(2, 1fr);
      }
      .vpn-card { transform: none; }
      .tank { opacity: .25; right: -120px; }
    }

/* WordPress content helpers */
.cv-page-content {
  min-height: 420px;
  background: var(--paper);
  color: var(--black);
}
.cv-page-content .wrap {
  padding-top: 70px;
  padding-bottom: 70px;
}
.cv-page-content h1,
.cv-page-content h2,
.cv-page-content h3,
.cv-page-content h4 {
  color: inherit;
}
.cv-page-content p {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}
.admin-bar .header {
  margin-top: 0;
}


.cv-page .cv-wp-posts,
.cv-blog-section .cv-wp-posts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:48px;
}

.cv-post-card{
  display:flex;
  flex-direction:column;
}

.cv-post-image{
  display:block;
  height:160px;
  margin:-24px -24px 22px;
  border-bottom:5px solid var(--black);
  overflow:hidden;
  background:var(--black);
}

.cv-post-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cv-post-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(216,180,0,.16) 0 12px,
      rgba(34,53,29,.9) 12px 24px
    );
  color:var(--yellow);
  font-size:42px;
}

.cv-post-card h3{
  flex:1;
}

@media(max-width:1100px){
  .cv-page .cv-wp-posts,
  .cv-blog-section .cv-wp-posts{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .cv-page .cv-wp-posts,
  .cv-blog-section .cv-wp-posts{
    grid-template-columns:1fr;
  }
}

.primary-menu-list{
  display:flex;
  align-items:center;
  gap:34px;
  list-style:none;
  margin:0;
  padding:0;
}

.primary-menu-list li{
  margin:0;
  padding:0;
}

.primary-menu-list a{
  font-size:15px;
  font-weight:900;
  text-transform:uppercase;
  color:inherit;
  text-decoration:none;
}

.primary-menu-list a:hover{
  color:var(--yellow);
}


 /*
header menue
*/
.primary-menu-list li{
  position:relative;
}

.primary-menu-list > li{
  height:78px;
  display:flex;
  align-items:center;
}

.primary-menu-list .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:280px;
  background:var(--paper);
  border:4px solid var(--black);
  border-top:6px solid var(--yellow);
  padding:8px;
  margin:0;
  list-style:none;
  display:none;
  z-index:99999;
  box-shadow:10px 10px 0 rgba(0,0,0,.35);
}

.primary-menu-list li:hover > .sub-menu{
  display:block;
}

.primary-menu-list .sub-menu li{
  margin:0;
  padding:0;
  width:100%;
}

.primary-menu-list .sub-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:0 14px;
  color:var(--black);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-bottom:2px solid rgba(12,18,9,.12);
  background:transparent;
}

.primary-menu-list .sub-menu li:last-child > a{
  border-bottom:0;
}

.primary-menu-list .sub-menu a:hover{
  background:var(--yellow);
  color:var(--black);
  padding-left:20px;
}

.primary-menu-list > .menu-item-has-children > a:after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:8px;
  border-right:2px solid var(--yellow);
  border-bottom:2px solid var(--yellow);
  transform:rotate(45deg);
  position:relative;
  top:-3px;
}

.primary-menu-list .sub-menu .menu-item-has-children > a:after{
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:6px solid var(--black);
  border-right:0;
  margin-left:auto;
}

.primary-menu-list .sub-menu .sub-menu{
  top:-8px;
  left:100%;
}

 /*
transpsh
*/
.language-dropdown{
  position:relative;
}

.language-switch{
  display:flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 14px;
  background:transparent;
  border:2px solid rgba(216,180,0,.35);
  color:var(--white);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.language-switch:hover{
  border-color:var(--yellow);
}

.language-dropdown-box{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  width:760px;
  max-height:440px;
  overflow-y:auto;
  background:#ffffff;
  border:1px solid #e5e7eb;
  padding:22px;
  display:none;
  z-index:999999;
  box-shadow:0 18px 55px rgba(0,0,0,.25);
}

.language-dropdown-box.active{
  display:block;
}

.language-dropdown-box > div,
.language-dropdown-box .no_translate,
.language-dropdown-box .transposh_flags,
.language-dropdown-box .tpw_flags,
.language-dropdown-box .tpw_list,
.language-dropdown-box .tpw_list_with_flags_css{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px 22px !important;
}

.language-dropdown-box a{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#4b5b73 !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-decoration:none !important;
  line-height:1.2 !important;
  padding:4px 2px !important;
  white-space:nowrap !important;
}

.language-dropdown-box a:hover{
  color:#111827 !important;
}

.language-dropdown-box img{
  width:18px !important;
  height:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

.language-dropdown-box br{
  display:none !important;
}

.language-dropdown-box *{
  float:none !important;
  clear:none !important;
}

.language-dropdown-box::-webkit-scrollbar{
  width:8px;
}

.language-dropdown-box::-webkit-scrollbar-thumb{
  background:#c7ccd7;
  border-radius:20px;
}

@media(max-width:900px){

  .language-dropdown-box{
    width:520px;
  }

  .language-dropdown-box > div,
  .language-dropdown-box .no_translate,
  .language-dropdown-box .transposh_flags,
  .language-dropdown-box .tpw_flags,
  .language-dropdown-box .tpw_list,
  .language-dropdown-box .tpw_list_with_flags_css{
    grid-template-columns:repeat(2,1fr) !important;
  }

}

@media(max-width:640px){

  .language-dropdown-box{
    width:320px;
    right:-80px;
  }

  .language-dropdown-box > div,
  .language-dropdown-box .no_translate,
  .language-dropdown-box .transposh_flags,
  .language-dropdown-box .tpw_flags,
  .language-dropdown-box .tpw_list,
  .language-dropdown-box .tpw_list_with_flags_css{
    grid-template-columns:1fr !important;
  }

}




 /*
sticky header
*/
.topbar{
  position:sticky;
  top:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:38px;
  padding:0 18px;
  background:#0b0f08;
  border-bottom:1px solid rgba(216,180,0,.18);
  color:#d7dbc9;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.detected-ip{
  color:#31d158;
  font-weight:900;
}

.header{
  position:sticky;
  top:38px;
  z-index:9997;
}

.admin-bar .topbar{
  top:32px;
}

.admin-bar .header{
  top:70px;
}

@media(max-width:782px){

  .admin-bar .topbar{
    top:46px;
  }

  .admin-bar .header{
    top:84px;
  }

}
.topbar .detected-ip{
  color:#32d74b !important;
  font-weight:900 !important;
  text-shadow:0 0 10px rgba(50,215,75,.45);
}


 /*
style footer
*/

.footer{
  background:#0b0f08;
  border-top:6px solid var(--yellow);
  padding:80px 0 60px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:50px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:var(--white);
  font-size:28px;
  font-weight:900;
  letter-spacing:.04em;
}

.footer-about p{
  max-width:320px;
  color:#cfd5c0;
  font-size:15px;
  line-height:1.7;
}

.footer-links h4{
  margin:0 0 22px;
  color:var(--yellow);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.footer-menu{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-menu li{
  margin:0 0 12px;
}

.footer-menu a{
  color:#d9ddcf;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

.footer-menu a:hover{
  color:var(--yellow);
}

.social-row{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.social-row a{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(216,180,0,.25);
  color:var(--white);
  font-size:16px;
}

.social-row a:hover{
  background:var(--yellow);
  color:var(--black);
  border-color:var(--yellow);
}

@media(max-width:980px){

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:640px){

  .footer-grid{
    grid-template-columns:1fr;
  }

}


 /*
social media
*/
.footer .social-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-top:24px !important;
}

.footer .social-row a{
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid rgba(216,180,0,.45) !important;
  background:rgba(216,180,0,.04) !important;
  color:var(--yellow) !important;
  margin:0 !important;
  padding:0 !important;
}

.footer .social-row a i{
  display:inline-block !important;
  width:auto !important;
  margin:0 !important;
  color:var(--yellow) !important;
  font-size:18px !important;
  line-height:1 !important;
}

.footer .social-row a:hover{
  background:var(--yellow) !important;
  color:var(--black) !important;
}

.footer .social-row a:hover i{
  color:var(--black) !important;
}

.footer-bottom{
  margin-top:60px;
  padding-top:24px;
  border-top:1px solid rgba(216,180,0,.14);
  text-align:center;
  color:#98a08b;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}