/*!
Theme Name: vritechinc
Theme URI: vritechinc
Author: vritechinc
Author URI: vritechinc
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vritechinc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

*/


    :root {
      --primary: #C8782A;
      --primary-green: #C8782A;
      --navy: #002663;
      --brand-dark: #0A1A3A;
      --brand-text: #374151;
      --brand-muted: #6B7280;
      --secondary-bg: #F8FAFC;
      --blue-light: #EFF6FF;
      --blue-green: #F0FDF4;
      --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
      --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.15);
      --btn-radius: 8px;
    }

    * { box-sizing: border-box; }
    
    html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    img {
      max-width: 100%;
    }

    body {
      font-family: 'Lato', sans-serif;
      color: var(--brand-text);
      margin: 0;
    }
    
    a { text-decoration: none !important; }

    .font-poppins { font-family: 'Poppins', sans-serif; }
    .font-lato { font-family: 'Lato', sans-serif; }
    
    /* ── Header ── */
    header.site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1050;
      background: #fff;
      transition: all .3s;
    }
    header.site-header .inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }
    @media(min-width:992px){ header.site-header .inner{ height:80px; } }

    .logo-icon {
      width:40px; height:40px;
      background: var(--primary);
      border-radius: 8px;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .logo-name {
      font-family:'Poppins',sans-serif;
      font-weight:700; font-size:18px;
      color: var(--navy); line-height:1.2;
    }
    .logo-tagline {
      font-family:'Lato',sans-serif;
      font-size:10px; color:var(--brand-muted);
      letter-spacing:.12em; text-transform:uppercase; line-height:1.2;
    }

    .nav-link-custom {
      font-family:'Poppins',sans-serif;
      font-weight:500; font-size:15px;
      background:none; border:none; cursor:pointer;
      padding:4px 0;
      transition:color .2s;
      color: var(--brand-text);
      text-decoration: none !important;
    }
    .nav-link-custom.active, .nav-link-custom:hover { color: var(--primary); }
    .nav-link-custom.active { color: var(--primary); }

    /* ── Buttons ── */
    .btn-primary-custom {
      background: var(--primary);
      color: #fff;
      font-family:'Poppins',sans-serif;
      font-weight:500;
      border:none;
      border-radius: var(--btn-radius);
      padding: 12px 28px;
      display:inline-flex; align-items:center; gap:8px;
      cursor:pointer;
      transition: all .3s;
      text-decoration:none;
    }
    .btn-primary-custom:hover { background:#0a4aa3; color:#fff; transform:translateY(-1px); }

    .btn-outline-white {
      border:2px solid rgba(255,255,255,.3);
      color:#fff;
      font-family:'Poppins',sans-serif;
      font-weight:500;
      border-radius: var(--btn-radius);
      padding:12px 28px;
      background:transparent;
      display:inline-flex; align-items:center; gap:8px;
      cursor:pointer;
      transition:all .3s;
      text-decoration:none;
    }
    .btn-outline-white:hover { border-color:var(--primary); color:var(--primary); }

    /* ── Hero ── */
    #home {
      min-height:100vh;
      background-color:#020817;
      position:relative;
      display:flex;
      align-items:center;
      overflow:hidden;
    }
    #home .hero-bg {
      position:absolute; inset:0;
      background-image:url('assets/banner.png');
      background-size:cover; background-position:center;
      opacity:.15;
    }
    #home .hero-orb-1 {
      position:absolute; top:80px; right:40px;
      width:256px; height:256px; border-radius:50%;
      background:radial-gradient(circle,#6EBC56,transparent);
      opacity:.05;
    }
    #home .hero-orb-2 {
      position:absolute; bottom:80px; left:40px;
      width:192px; height:192px; border-radius:50%;
      background:radial-gradient(circle,#115BC0,transparent);
      opacity:.05;
    }
    .badge-pill {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(17,91,192,.2);
      border:1px solid rgba(17,91,192,.3);
      border-radius:999px;
      padding:8px 16px;
    }
    .badge-pill .dot {
      width:8px; height:8px; background:var(--primary);
      border-radius:50%; animation:pulse 2s infinite;
    }
    @keyframes pulse{
      0%,100%{opacity:1} 50%{opacity:.4}
    }

    .hero-stat-value {
      font-family:'Poppins',sans-serif; font-weight:700;
      font-size:24px; color:var(--primary);
    }
    .hero-stat-label {
      font-family:'Lato',sans-serif; font-size:14px; color:#9CA3AF;
    }

    .hero-card {
      background:rgba(255,255,255,.10);
      backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      padding:20px;
      transition:all .3s;
    }
    .hero-card:hover {
      background:rgba(255,255,255,.15);
      transform:translateY(-4px);
    }

    .scroll-down {
      position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:8px;
      animation:bounce 2s infinite;
    }
    @keyframes bounce{
      0%,100%{transform:translateX(-50%) translateY(0)}
      50%{transform:translateX(-50%) translateY(-8px)}
    }

    /* ── Section Commons ── */
    .section-title {
      font-family:'Poppins',sans-serif;
      font-weight:700; font-size:36px;
      color: var(--navy);
      margin-bottom:12px;
    }
    .section-subtitle {
      font-family:'Lato',sans-serif;
      color: var(--brand-muted); font-size:17px;
    }
    .divider-green {
      width:60px; height:4px;
      background:var(--primary-green);
      border-radius:2px;
      margin: 0 auto 20px;
    }
    .divider-green-left {
      width:60px; height:4px;
      background:var(--primary-green);
      border-radius:2px;
      margin: 0 0 20px;
    }

    /* ── About ── */
    #about { background:#fff; padding:80px 0; }
    .mission-card {
      border-radius:12px; padding:20px;
    }
    .mission-card h4 { font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; color:var(--brand-dark); margin-bottom:8px; }
    .mission-card p { font-family:'Lato',sans-serif; font-size:14px; color:var(--brand-muted); line-height:1.6; margin:0; }

    .badge-tag {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(17,91,192,.10);
      color:var(--primary);
      font-family:'Poppins',sans-serif; font-weight:500; font-size:12px;
      padding:6px 12px; border-radius:999px;
    }

    .about-img-wrap { position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card-hover); }
    .about-img-wrap img { width:100%; height:320px; object-fit:cover; }
    .about-img-overlay {
      position:absolute; inset:0;
      background:linear-gradient(to top, rgba(0,38,99,.6), transparent);
    }
    .about-badge-years {
      position:absolute; bottom:-24px; left:-24px;
      background:var(--primary); border-radius:16px; padding:24px;
      box-shadow:var(--shadow-card-hover);
    }
    .about-badge-cert {
      position:absolute; top:-16px; right:-16px;
      background:#fff; border-radius:12px; padding:16px;
      box-shadow:var(--shadow-card);
    }

    .stat-card {
      text-align:center; background:var(--secondary-bg);
      border-radius:12px; padding:24px;
    }
    .stat-card .value {
      font-family:'Poppins',sans-serif; font-weight:700;
      font-size:36px; color:var(--primary); margin-bottom:8px;
    }
    .stat-card .label {
      font-family:'Lato',sans-serif; font-size:14px; color:var(--brand-muted);
    }

    /* ── Services ── */
    #services { background:#fff; padding:80px 0; }
    .tab-toggle {
      display:inline-flex;
      background:var(--secondary-bg);
      border-radius:10px; padding:4px; gap:4px;
    }
    .tab-btn {
      font-family:'Poppins',sans-serif; font-weight:500; font-size:14px;
      border:none; border-radius:8px; padding:10px 24px;
      cursor:pointer; transition:all .3s;
      background:transparent; color:var(--brand-muted);
    }
    .tab-btn.active { background:#fff; color:var(--primary); box-shadow:0 1px 4px rgba(0,0,0,.1); }

    .service-card {
      background:#fff;
      border:1px solid #E5E7EB;
      border-radius:16px;
      padding:24px;
      transition:all .3s;
      height:100%;
    }
    .service-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
    .service-card .icon-wrap {
      width:48px; height:48px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:24px; margin-bottom:16px;
      transition:transform .3s;
    }
    .service-card:hover .icon-wrap { transform:scale(1.1); }
    .service-card h3 { font-family:'Poppins',sans-serif; font-weight:600; font-size:18px; color:var(--navy); margin-bottom:4px; }
    .service-card .sub { font-family:'Lato',sans-serif; font-size:12px; font-weight:700; margin-bottom:12px; }
    .service-card p { font-family:'Lato',sans-serif; font-size:14px; color:var(--brand-muted); line-height:1.6; margin-bottom:16px; }
    .service-card ul { list-style:none; padding:0; margin:0; }
    .service-card ul li { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; font-family:'Lato',sans-serif; font-size:12px; color:var(--brand-text); }

    /* ── Frameworks Marquee ── */
    .frameworks-section { background:var(--secondary-bg); padding:80px 0; }
    .marquee-wrap { overflow:hidden; position:relative; }
    .marquee-track {
      display:flex; gap:24px;
      animation:marquee 30s linear infinite;
      width:max-content;
    }
    @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .fw-chip {
      flex-shrink:0; min-width:160px;
      background:#fff; border-radius:12px;
      padding:16px 24px;
      display:flex; align-items:center; gap:12px;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
      transition:all .3s; cursor:default;
    }
    .fw-chip:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); }
    .fw-chip span { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; }

    .client-name {
      font-family:'Poppins',sans-serif; font-weight:700; font-size:18px;
      color:#D1D5DB; transition:color .3s; cursor:default;
    }
    .client-name:hover { color:var(--primary); }

    /* ── Approach ── */
    #approach { background:var(--secondary-bg); padding:80px 0; }
    .phase-num {
      width:56px; height:56px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-family:'Poppins',sans-serif; font-weight:700;
      font-size:18px; color:#fff;
      box-shadow:var(--shadow-card);
      margin:0 auto 24px; position:relative; z-index:1;
    }
    .phase-card {
      background:#fff; border-radius:12px; padding:20px;
      box-shadow:var(--shadow-card); height:100%;
      transition:all .3s;
    }
    .phase-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
    .phase-card h3 { font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--brand-dark); margin-bottom:4px; }
    .phase-card .sub { font-family:'Lato',sans-serif; font-size:12px; font-weight:700; margin-bottom:12px; }
    .phase-card p { font-family:'Lato',sans-serif; font-size:12px; color:var(--brand-muted); line-height:1.6; margin-bottom:16px; }
    .phase-card ul { list-style:none; padding:0; margin:0; }
    .phase-card ul li { display:flex; align-items:flex-start; gap:6px; margin-bottom:6px; font-family:'Lato',sans-serif; font-size:12px; color:var(--brand-text); }

    .timeline-box {
      background:#fff; border-radius:16px; padding:32px;
      box-shadow:var(--shadow-card);
    }
    .timeline-month {
      background:var(--secondary-bg); border-radius:8px; padding:12px;
    }
    .timeline-month .month { font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; color:var(--primary); margin-bottom:4px; }
    .timeline-month p { font-family:'Lato',sans-serif; font-size:12px; color:var(--brand-muted); line-height:1.5; margin:0; }

    /* ── Why Us ── */
    #why-us { background:#fff; padding:80px 0; }
    .why-card {
      background:#fff; border:1px solid #E5E7EB;
      border-radius:16px; padding:24px;
      transition:all .3s; height:100%;
    }
    .why-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
    .why-card .icon-wrap {
      width:56px; height:56px; border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:24px; margin-bottom:16px;
      transition:transform .3s;
    }
    .why-card:hover .icon-wrap { transform:scale(1.1); }
    .why-card h3 { font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; color:var(--brand-dark); margin-bottom:12px; }
    .why-card p { font-family:'Lato',sans-serif; font-size:14px; color:var(--brand-muted); line-height:1.6; margin:0; }

    .dual-path-box {
      border-radius:16px; padding:48px;
      background:linear-gradient(135deg,#020817 0%,#0A1A3A 100%);
    }
    .dual-card {
      background:rgba(255,255,255,.10);
      border-radius:12px; padding:20px; text-align:center;
    }
    .dual-card h4 { font-family:'Poppins',sans-serif; font-weight:600; color:#fff; font-size:15px; margin-bottom:8px; }
    .dual-card p { font-family:'Lato',sans-serif; font-size:14px; color:#D1D5DB; margin:0; }

    .testimonial-card {
      background:var(--secondary-bg); border-radius:12px; padding:24px;
      transition:all .3s; height:100%;
    }
    .testimonial-card:hover { box-shadow:var(--shadow-card); }
    .testimonial-card .quote-mark {
      font-size:40px; font-family:Georgia,serif;
      line-height:1; margin-bottom:16px;
    }
    .testimonial-card p { font-family:'Lato',sans-serif; font-size:14px; color:var(--brand-muted); font-style:italic; line-height:1.6; margin-bottom:24px; }
    .testimonial-card .avatar {
      width:40px; height:40px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:#fff;
    }
    .testimonial-card .name { font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--brand-dark); }
    .testimonial-card .role { font-family:'Lato',sans-serif; font-size:12px; color:var(--brand-muted); }
    .star { color:#FBBF24; font-size:14px; }

    /* ── CTA Dark ── */
    .cta-dark {
      background-color:#020817;
      position:relative; overflow:hidden;
      padding:80px 0;
    }
    .cta-dark .orb1 {
      position:absolute; top:0; left:0;
      width:384px; height:384px; border-radius:50%;
      background:radial-gradient(circle,#6EBC56,transparent);
      opacity:.05; transform:translate(-50%,-50%);
    }
    .cta-dark .orb2 {
      position:absolute; bottom:0; right:0;
      width:384px; height:384px; border-radius:50%;
      background:radial-gradient(circle,#115BC0,transparent);
      opacity:.05; transform:translate(50%,50%);
    }
    .cta-step {
      background:rgba(255,255,255,.10);
      border-radius:12px; padding:24px; text-align:left;
    }
    .cta-step .num {
      font-family:'Poppins',sans-serif; font-weight:700;
      font-size:36px; color:var(--primary);
      margin-bottom:12px;
    }
    .cta-step h4 { font-family:'Poppins',sans-serif; font-weight:600; color:#fff; font-size:15px; margin-bottom:8px; }
    .cta-step p { font-family:'Lato',sans-serif; font-size:14px; color:#D1D5DB; line-height:1.5; margin:0; }

    /* ── Contact ── */
    #contact { background:var(--secondary-bg); padding:80px 0; }
    .contact-icon-link {
      display:flex; align-items:center; gap:16px;
      text-decoration:none; color:inherit;
    }
    .contact-icon-wrap {
      width:48px; height:48px; border-radius:12px;
      background:rgba(17,91,192,.10);
      display:flex; align-items:center; justify-content:center;
      color:var(--primary); flex-shrink:0;
      transition:all .3s;
    }
    .contact-icon-link:hover .contact-icon-wrap { background:var(--primary); color:#fff; }
    .contact-icon-link:hover .contact-label { color:var(--primary); }
    .contact-meta { font-family:'Poppins',sans-serif; font-size:11px; color:var(--brand-muted); text-transform:uppercase; letter-spacing:.05em; }
    .contact-label { font-family:'Poppins',sans-serif; font-weight:500; color:var(--brand-dark); font-size:15px; transition:color .2s; }

    .services-tag {
      display:inline-block;
      font-family:'Poppins',sans-serif; font-size:12px; font-weight:500;
      background:rgba(17,91,192,.10); color:var(--primary);
      padding:6px 12px; border-radius:999px; margin:4px;
    }

    .social-btn {
      width:40px; height:40px; border-radius:8px;
      display:inline-flex; align-items:center; justify-content:center;
      font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:#fff;
      border:none; cursor:pointer; transition:all .3s;
    }
    .social-btn:hover { transform:scale(1.1); box-shadow:var(--shadow-card); }

    /* ── Contact Form ── */
    .contact-form-wrap {
      background:#fff; border-radius:16px; padding:32px;
      box-shadow:var(--shadow-card);
    }
    .contact-form-wrap label {
      font-family:'Poppins',sans-serif; font-size:11px; font-weight:500;
      color:var(--brand-dark); text-transform:uppercase; letter-spacing:.05em;
      display:block; margin-bottom:6px;
    }
    .contact-form-wrap input,
    .contact-form-wrap select,
    .contact-form-wrap textarea {
      width:100%;
      border:1px solid #E5E7EB; border-radius:8px;
      padding:12px 16px;
      font-family:'Lato',sans-serif; font-size:14px; color:var(--brand-text);
      transition:border-color .2s;
      outline:none;
    }
    .contact-form-wrap input::placeholder,
    .contact-form-wrap textarea::placeholder { color:#9CA3AF; }
    .contact-form-wrap input:focus,
    .contact-form-wrap select:focus,
    .contact-form-wrap textarea:focus {
      border-color:var(--primary);
      box-shadow:0 0 0 2px rgba(17,91,192,.1);
    }
    .contact-form-wrap textarea { resize:none; }

    /* ── Footer ── */
    footer { background-color:#020817; }
    .footer-body { padding:64px 0; }
    .footer-logo-name { font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:#fff; line-height:1.2; }
    .footer-logo-tag { font-family:'Lato',sans-serif; font-size:10px; color:#9CA3AF; letter-spacing:.12em; text-transform:uppercase; }
    .footer-desc { font-family:'Lato',sans-serif; font-size:14px; color:#9CA3AF; line-height:1.7; max-width:340px; }
    .footer-heading { font-family:'Poppins',sans-serif; font-weight:600; color:#fff; font-size:15px; margin-bottom:20px; }
    .footer-link {
      font-family:'Lato',sans-serif; font-size:14px; color:#9CA3AF;
      background:none; border:none; cursor:pointer; padding:0;
      display:flex; align-items:center; gap:8px;
      transition:color .2s; margin-bottom:12px;
    }
    .footer-link svg { opacity:0; transition:opacity .2s; }
    .footer-link:hover { color:var(--primary); }
    .footer-link:hover svg { opacity:1; }

    .footer-contact-link {
      display:flex; align-items:flex-start; gap:12px;
      text-decoration:none; margin-bottom:16px;
    }
    .footer-contact-link .ic {
      width:32px; height:32px; border-radius:8px;
      background:rgba(255,255,255,.10);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; margin-top:2px;
      transition:background .2s;
    }
    .footer-contact-link:hover .ic { background:var(--primary); }
    .footer-contact-link .ic svg { color:#9CA3AF; transition:color .2s; }
    .footer-contact-link:hover .ic svg { color:#fff; }
    .footer-contact-link span { font-family:'Lato',sans-serif; font-size:14px; color:#9CA3AF; transition:color .2s; }
    .footer-contact-link:hover span { color:var(--primary); }

    .footer-bottom { border-top:1px solid rgba(255,255,255,.10); padding:20px 0; }
    .footer-bottom p { font-family:'Lato',sans-serif; font-size:14px; color:#6B7280; margin:0; }
    .footer-bottom .policy-link {
      font-family:'Lato',sans-serif; font-size:14px; color:#6B7280;
      background:none; border:none; cursor:pointer; padding:0;
      transition:color .2s;
    }
    .footer-bottom .policy-link:hover { color:var(--primary); }

    /* ── Phase connector line ── */
    @media(min-width:992px){
      .phase-connector {
        display:block;
        position:absolute; top:64px; left:0; right:0;
        height:2px; background:#E5E7EB; z-index:0;
      }
    }

    /* Hamburger */
    .navbar-toggler-custom {
      background:none; border:none; cursor:pointer;
      padding:8px; border-radius:6px;
      color:var(--brand-text);
      transition:color .2s;
    }
    
    .timeline-box {
        margin-top: 120px;
    }
    .navbar-toggler-custom:hover { color:var(--primary); }
    

/* DESKTOP */
.desktop-nav{
  display:flex;
  gap:24px;
  align-items:center;
}

.navbar-toggler-custom{
  display:none;
  border:none;
  background:none;
  font-size:30px;
  cursor:pointer;
}

/* MOBILE MENU */
.mobile-menu{
  position:fixed;
  top:0;
  right:-100%;
  width:280px;
  height:100vh;
  background:#fff;
  box-shadow:-5px 0 20px rgba(0,0,0,.08);
  transition:.35s ease;
  z-index:1100;
}

.mobile-menu.show{
  right:0;
}

.mobile-menu-inner{
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.mobile-menu a{
  text-decoration:none;
  color:#111;
  font-size:18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.close-menu{
  border:none;
  background:none;
  font-size:30px;
  align-self:flex-end;
  cursor:pointer;
}

.mobile-btn{
  margin-top:10px;
}

/* MOBILE */
@media(max-width:991px){

  .desktop-nav{
    display:none;
  }

  .navbar-toggler-custom{
    display:block;
  }

}

.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.wpcf7-spinner {
    display: none;
}

.contact-form-wrap p {
    margin: 0;
}