/*!
Theme Name: D1 Defend
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
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: d1-defend
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.

D1 Defend is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --purple: #7B2FFF;
      --purple-mid: #9B59F5;
      --purple-deep: #5C1FCC;
      --dark: #0A0A0F;
      --dark2: #110D1E;
      --dark3: #1A1030;
      --light: #F8F7FF;
      --white: #FFFFFF;
      --text-muted: #A0A0B0;
      --text-dark: #555555;

	    --vertical-padding: 64px;
      --header-size: 107px;

      @media(width<668px){
        --header-size: 101px;
      }
    }

    html { scroll-behavior: smooth; font-size: 16px; }
    body { background: var(--dark); color: var(--white); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
    h1,h2,h3,h4 { font-family: 'Poppins', sans-serif; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
    @keyframes gradShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes particleFloat {
      0%,100% { transform: translateY(0px) translateX(0px); opacity:.6; }
      33%     { transform: translateY(-20px) translateX(10px); opacity:1; }
      66%     { transform: translateY(10px) translateX(-8px); opacity:.7; }
    }
    @keyframes connectorDraw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
    @keyframes countUp { from { opacity:0; } to { opacity:1; } }

    .animate-in { animation: fadeUp .6s ease-out both; }
    .animate-in-delay-1 { animation: fadeUp .6s .15s ease-out both; }
    .animate-in-delay-2 { animation: fadeUp .6s .3s ease-out both; }
    .animate-in-delay-3 { animation: fadeUp .6s .45s ease-out both; }
    .animate-in-delay-4 { animation: fadeUp .6s .6s ease-out both; }

    /* Observer-triggered */
    .obs { opacity: 0; transform: translateY(28px); transition: opacity .6s ease-out, transform .6s ease-out; }
    .obs.visible { opacity: 1; transform: translateY(0); }
    .obs-left { opacity:0; transform: translateX(-40px); transition: opacity .55s ease-out, transform .55s ease-out; }
    .obs-left.visible { opacity:1; transform: translateX(0); }
    .obs-right { opacity:0; transform: translateX(40px); transition: opacity .55s ease-out, transform .55s ease-out; }
    .obs-right.visible { opacity:1; transform: translateX(0); }

    /* stagger children */
    .stagger > * { opacity:0; transform:translateY(20px); transition: opacity .5s ease-out, transform .5s ease-out; }
    .stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.05s; }
    .stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.15s; }
    .stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.25s; }
    .stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:.35s; }
    .stagger.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:.45s; }
    .stagger.visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:.55s; }

    /* ── LAYOUT ── */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 0px; 
	
		@media(width<1380px){
			padding-inline: 16px !important;
		}
	}
    section { position: relative; overflow: hidden; }
    .section-pad { padding: 64px 0; }
    .section-pad-sm { padding: 48px 0; }

    /* ── PARALLAX ── */
    .parallax-section { position: relative; }
    .parallax-bg {
      position: absolute; inset: -20%;
      background-size: cover; background-position: center;
      will-change: transform; pointer-events: none;
    }
    .parallax-overlay { position: absolute; inset: 0; pointer-events: none; }

    /* ── BUTTONS ── */
    @keyframes btnGlow {
      0%,100% { box-shadow: 0 0 16px rgba(123,47,255,.5), 0 4px 20px rgba(0,0,0,.4); }
      50%      { box-shadow: 0 0 32px rgba(123,47,255,.9), 0 4px 20px rgba(0,0,0,.4); }
    }
    @keyframes btnGlowWhite {
      0%,100% { box-shadow: 0 0 16px rgba(255,255,255,.25), 0 4px 20px rgba(0,0,0,.5); }
      50%      { box-shadow: 0 0 32px rgba(255,255,255,.5), 0 4px 20px rgba(0,0,0,.5); }
    }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 17px 36px; border-radius: 999px;
      background: var(--white); color: #110D1E;
      font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px;
      border: none; cursor: pointer; text-decoration: none;
      box-shadow: 0 0 20px rgba(255,255,255,.2), 0 6px 24px rgba(0,0,0,.5);
      transition: box-shadow .25s, transform .2s, background .2s;
      letter-spacing: .02em;
      animation: btnGlowWhite 3s ease-in-out infinite;
      @media(width<520px){
        width: 100%;
        max-width: 285px;
        justify-content: center;
      }
    }
    .btn-primary:hover {
      box-shadow: 0 0 40px rgba(255,255,255,.45), 0 8px 32px rgba(0,0,0,.5);
      transform: translateY(-3px) scale(1.02);
      animation: none;
    }
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 17px 36px; border-radius: 999px;
      background: rgba(123,47,255,.15); color: var(--white);
      font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
      border: 2px solid rgba(123,47,255,.7); cursor: pointer;
      transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
      text-decoration: none; letter-spacing: .02em;
      @media(width<520px){
        width: 100%;
        max-width: 285px;
        justify-content: center;
      }
    }
    .btn-secondary:hover {
      border-color: var(--purple);
      background: rgba(123,47,255,.28);
      transform: translateY(-3px);
      box-shadow: 0 0 24px rgba(123,47,255,.4);
    }
    .btn-purple {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 17px 36px; border-radius: 999px;
      background: linear-gradient(135deg, #9B3FFF 0%, #6B1FEF 100%);
      color: var(--white);
      font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px;
      border: none; cursor: pointer; text-decoration: none;
      box-shadow: 0 0 20px rgba(123,47,255,.45), 0 6px 24px rgba(0,0,0,.3);
      transition: box-shadow .25s, transform .2s;
      letter-spacing: .02em;
      animation: btnGlow 3s ease-in-out infinite;
    }
    .btn-purple:hover {
      box-shadow: 0 0 40px rgba(123,47,255,.8), 0 8px 32px rgba(0,0,0,.35);
      transform: translateY(-3px) scale(1.02);
      animation: none;
    }

    /* ── CARDS ── */
    .card-dark {
      background: linear-gradient(145deg, #1A1030 0%, #0A0A0F 100%);
      border: 1px solid rgba(123,47,255,.4);
      border-radius: 22px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .card-dark:hover { border-color: rgba(123,47,255,.7); box-shadow: 0 8px 32px rgba(123,47,255,.15); transform: translateY(-4px); }
    .card-light {
      background: var(--white);
      border: 1px solid rgba(123,47,255,.2);
      border-radius: 22px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .card-light:hover { border-color: rgba(123,47,255,.5); box-shadow: 0 8px 40px rgba(123,47,255,.18); transform: translateY(-4px); }

    /* ── PILL TAGS ── */
    .pill-purple { display:inline-block; padding:6px 16px; border-radius:999px; background:var(--purple); color:var(--white); font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
    .pill-outline { display:inline-block; padding:6px 16px; border-radius:999px; background:rgba(123,47,255,.1); border:1px solid rgba(123,47,255,.3); color:var(--purple-mid); font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
    .pill-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; background:#F0EAFF; border:1px solid var(--purple); color:var(--purple); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; transition: background .2s, color .2s; cursor:default; @media(width<768px){width: 100%;})}
    .pill-chip:hover { background:var(--purple); color:var(--white); }

    /* ── SECTION DIVIDER ── */
    .divider { height:1px; background: linear-gradient(90deg, transparent, rgba(123,47,255,.4), transparent); }

    /* ── PARTICLES ── */
    #particle-canvas { position:absolute; inset:0; pointer-events:none; z-index:2; }

    /* ── CAROUSEL ── */
    .carousel-wrap { position:relative; }
    .carousel-viewport {overflow-x: hidden;   user-select: none;   cursor: grab; padding-top: 10px;}
    .carousel-track { display:flex; gap:20px; transition: transform .45s cubic-bezier(.25,.1,.25,1); will-change:transform; }
    .carousel-track .carousel-slide { flex:0 0 calc((100% - 40px)/3); min-width:0; }
    @media(min-width:900px){ #testimonials .carousel-track .carousel-slide { flex:0 0 calc((100% - 20px)/2); } }
    @media(max-width:900px){ .carousel-track .carousel-slide { flex:0 0 calc((100% - 20px)/2); } }
    @media(max-width:580px){ .carousel-track .carousel-slide { flex:0 0 100%; } }
    .carousel-controls { display:flex; align-items:center; justify-content:space-between; margin-top:28px; @media(width<768px){ flex-direction: column;gap: 2rem;} }
    .carousel-dots { display:flex; gap:8px; }
    .carousel-dot { width:8px; height:8px; border-radius:999px; border:none; cursor:pointer; transition: all .3s; background:rgba(255,255,255,.25); padding:0; }
    .carousel-dot.active { width:28px; background:var(--purple); }
    .carousel-arrows { display:flex; gap:10px; }
    .carousel-arrow { width:44px; height:44px; border-radius:50%; border:1px solid rgba(123,47,255,.4); background:rgba(123,47,255,.1); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .2s; }
    .carousel-arrow:hover:not(:disabled) { border-color:var(--purple); background:rgba(123,47,255,.3); }
    .carousel-arrow:disabled { opacity:.3; cursor:default; }
    .carousel-arrow svg { width:18px; height:18px; }
    /* light bg carousel uses dark controls */
    .carousel-light .carousel-dot { background:rgba(123,47,255,.2); }
    .carousel-light .carousel-dot.active { background:var(--purple); }
    .carousel-light .carousel-arrow { border-color:rgba(123,47,255,.4); background:rgba(123,47,255,.08); color:var(--purple); }
    .carousel-light .carousel-arrow:hover:not(:disabled) { background:rgba(123,47,255,.15); }

    /* ══════════════════════════════════════════
       TOP BAR
    ══════════════════════════════════════════ */
    #topbar {
      background: var(--dark); border-bottom: 1px solid rgba(123,47,255,.3);
      padding: 8px 16px; text-align: center; position: sticky; z-index: 60; top: 0;
      animation: fadeIn .5s ease-out both;
      
      .descrip-top-bar{
        font-size: 15px;
      }

      @media(width<862px){
      .descrip-top-bar{
        display: none;
      }
	  }
    }
    #topbar p { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing:.04em; }
    #topbar a { color: #C4A0FF; text-decoration:none; transition: color .2s; }
    #topbar a:hover { color: var(--white); }

    /* ══════════════════════════════════════════
       NAVIGATION
    ══════════════════════════════════════════ */
    #nav {
      position: sticky; top: 33px; z-index: 50;
      padding: 16px 24px;
      transition: background .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s;
      animation: fadeIn .5s .1s ease-out both;
    }
    #nav.scrolled {
      background: rgba(10,10,15,.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(123,47,255,.4);
      box-shadow: 0 4px 30px rgba(0,0,0,.5);
    }
    #nav .nav-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; @media(width<768px){justify-content: center} }
    #nav .nav-logo { display:flex; align-items:center; gap:10px; }
    #nav .nav-logo svg { height:36px; width:auto; }
    #nav .nav-logo span { font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; letter-spacing:.02em; }
    #nav .nav-actions { display:flex; align-items:center; gap:16px; }
    .btn-nav-phone {
      display:flex; align-items:center; gap:6px;
      padding:10px 20px; border-radius:999px;
      border:1px solid rgba(255,255,255,.3); color:var(--white);
      background:transparent; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
      cursor:pointer; transition: border-color .2s, background .2s; text-decoration:none;
    }
    .btn-nav-phone:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); }
    .btn-nav-cta {
      padding: 11px 26px; border-radius: 999px;
      background: linear-gradient(135deg, #9B3FFF 0%, #6B1FEF 100%);
      color: var(--white);
      font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700;
      border: none; cursor: pointer;
      box-shadow: 0 0 16px rgba(123,47,255,.5);
      transition: box-shadow .2s, transform .2s;
      letter-spacing: .02em;

	  @media(width<=668px){
		  display: none;
	  }
    }
    .btn-nav-cta:hover {
      box-shadow: 0 0 32px rgba(123,47,255,.8);
      transform: translateY(-2px);
    }
    @media(max-width:640px) { .btn-nav-phone { display:none; } }

    
    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    #footer { background:#000; border-top:1px solid rgba(255,255,255,.1); padding:48px 0 0; }
    #footer .footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:40px; align-items:start; }
    @media(max-width:640px){ #footer .footer-grid { grid-template-columns:1fr; } }
    #footer .footer-brand .footer-logo { display:block; margin-bottom:28px; @media(width<768px){display: flex; justify-content: center; align-items: center;}}
    #footer .footer-brand .footer-logo svg { height:52px; width:auto; }
    #footer .footer-certs-label { color:var(--white); font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px; }
    #footer .footer-certs-line { color:rgba(255,255,255,.7); font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:.02em; margin-bottom:28px; }
    #footer .socials { display:flex; gap:10px; @media(width<768px){justify-content: center;}}
    .social-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; transition: all .2s; cursor:pointer; text-decoration:none; color:rgba(255,255,255,.7); }
    .social-btn:hover { border-color:var(--white); color:var(--white); background:rgba(255,255,255,.1); }
    .social-btn svg { width:16px; height:16px; }
    #footer .contact-col{
      justify-content: end;
      display: flex;
      @media(width<768px){
        justify-content: center;
      }
      .pp{
        display: inline-flex;
        flex-direction: column;
      }
    }
    #footer .contact-col h4 { color:var(--white); font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; margin-bottom:24px; @media(width<768px){text-align: center;}}
    #footer .contact-row { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; @media(width<768px){justify-content: center;}}
    #footer .contact-row-icon { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0;@media(width<768px){display: none;} }
    #footer .contact-row-icon svg { width:16px; height:16px; color:rgba(255,255,255,.8); }
    #footer .contact-row-text { color:rgba(255,255,255,.8); font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.5; padding-top:7px;@media(width<768px){text-align: center;} }
    #footer .contact-row-text a { color:rgba(255,255,255,.8); text-decoration:none; transition:color .2s; }
    #footer .contact-row-text a:hover { color:var(--white); }
    #footer .footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding:20px 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; @media(width<768px){justify-content: center; flex-direction: column-reverse;}}
    #footer .footer-bottom .copy { color:rgba(255,255,255,.45); font-size:16px; font-family:'DM Sans',sans-serif; @media(width<768px){text-align: center;}}
    #footer .footer-bottom .copy a{
      color:rgba(255, 255, 255, 0.5); font-size:16px; font-family:'DM Sans',sans-serif; text-decoration: none; transition: all .3s;
      &:hover{
        color: white;
      }
    }
    #footer .footer-bottom .legal { display:flex; gap:24px; }
    #footer .footer-bottom .legal span { color:rgba(255,255,255,.45); font-size:16px; font-family:'DM Sans',sans-serif; cursor:pointer; transition:color .2s; }
    #footer .footer-bottom .legal span:hover { color:rgba(255,255,255,.7); }
    #footer .footer-brand p { color:rgba(255,255,255,.5); font-size:16px; line-height:1.7; margin:20px 0; @media(width<768px){text-align: center;}}
    #footer .socials { display:flex; gap:10px; }
    .social-btn { width:32px; height:32px; border-radius:50%; border:1px solid rgba(123,47,255,.4); display:flex; align-items:center; justify-content:center; transition: all .2s; cursor:pointer; text-decoration:none; color:rgba(255,255,255,.5); }
    .social-btn:hover { border-color:var(--purple); background:rgba(123,47,255,.2); color:var(--white); }
    .social-btn svg { width:14px; height:14px; }
    #footer .col-title { color:var(--white); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-family:'DM Sans',sans-serif; margin-bottom:16px; }
    #footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
    #footer ul li { color:rgba(255,255,255,.5); font-size:13px; font-family:'DM Sans',sans-serif; cursor:default; transition:color .2s; }
    #footer ul li:hover { color:rgba(255,255,255,.8); }
    #footer ul li a { color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s; font-family:'DM Sans',sans-serif; font-size:13px; }
    #footer ul li a:hover { color:rgba(255,255,255,.8); }
    #footer ul li .contact-icon { color:var(--purple-mid); margin-right:6px; }
    #footer .certs { border-top:1px solid rgba(123,47,255,.3); padding:32px 0 24px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
    .cert-badge { padding:6px 14px; border-radius:999px; border:1px solid rgba(123,47,255,.4); color:var(--text-muted); font-size:11px; font-family:'DM Sans',sans-serif; }
    #footer .copyright { border-top:1px solid rgba(123,47,255,.2); padding:24px 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
    #footer .copyright p { color:rgba(255,255,255,.3); font-size:12px; font-family:'DM Sans',sans-serif; }
    #footer .copyright .legal-links { display:flex; gap:24px; }
    #footer .copyright .legal-links span { color:rgba(255,255,255,.3); font-size:12px; font-family:'DM Sans',sans-serif; cursor:pointer; transition:color .2s; }
    #footer .copyright .legal-links span:hover { color:rgba(255,255,255,.6); }

    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    @media(max-width:640px){
      .btn-primary,.btn-secondary,.btn-purple { padding:14px 24px; font-size:14px; }
      #hero .bullets { gap:16px; }
      #hero .bullet-text { white-space:normal; }
    }

    .wpcf7 form .wpcf7-response-output{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(123, 47, 255, .2);
      border: 1px solid rgba(123, 47, 255, .3);
      border-radius: 999px;
      padding: 8px 16px;
      margin-bottom: 32px;
      animation: fadeUp .5s ease-out;
      color: var(--purple-mid);
      font-size: 13px;
      font-weight: 500;
      width: 100%;
      border-color: rgba(123, 47, 255, .3) !important;
    }

.carousel-track {
  will-change: transform;
}

.custom-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #ccc;
  user-select: none;
  margin: 1rem 0;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
}

.custom-check br{
  display: none;
}

.custom-check input {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--purple-mid);
  border-radius: 5px;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 0 8px rgba(123, 47, 255, 0.3);
}

.checkmark::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  top: 1px;
  left: 5px;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s ease;
}

.custom-check input:checked + .checkmark {
  background: var(--purple-mid);
  box-shadow: 0 0 12px rgba(123, 47, 255, 0.7);
}

.custom-check input:checked ~ .checkmark::after {
  transform: rotate(45deg) scale(1);
}

.custom-check:hover .checkmark {
  border-color: var(--purple-mid);
}

.custom-check a {
  color: var(--purple-mid);
  text-decoration: none;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
}

.custom-check a:hover {
  text-decoration: none;
}