/*
Theme Name: Sabbir Hossain Portfolio
Theme URI: https://sabbir-hossain.xyz
Author: Sabbir Hossain
Author URI: https://sabbir-hossain.xyz
Description: A high-end, performance-optimized WordPress portfolio theme tailored for digital architects and full-stack developers. Fully compatible with Elementor Pro, it features custom-built granular widgets, a Tailwind-inspired design system, and professional typography for a pixel-perfect user experience.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sabbir-hossain-portfolio
Tags: portfolio, elementor, dark-mode, clean-code, translation-ready, full-width-template, theme-options, modern, performance-optimized, one-column
*/

/* 
   Consolidated Premium Design System 
*/

   * {
      scroll-behavior: smooth
    }

    body {
      background: #0F0F1A;
      color: #E2E8F0;
      font-family: 'Inter', sans-serif
    }

    .gradient-text {
      background: linear-gradient(135deg, #A78BFA, #06B6D4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .glow {
      box-shadow: 0 0 40px rgba(124, 58, 237, .25)
    }

    .card-hover {
      transition: all .3s ease
    }

    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(124, 58, 237, .2)
    }

    .skill-bar {
      height: 6px;
      border-radius: 99px;
      background: #2A2A4A;
      overflow: hidden
    }

    .skill-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, #7C3AED, #06B6D4);
      transition: width 1.5s ease
    }

    .nav-link {
      position: relative
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #7C3AED, #06B6D4);
      transition: width .3s
    }

    .nav-link:hover::after {
      width: 100%
    }

    .hero-bg {
      background: linear-gradient(rgba(15, 15, 26, 0.8), rgba(15, 15, 26, 0.8)), url('assets/hero-bg.png');
      background-size: cover;
      background-position: center
    }

    .section-divider {
      width: 60px;
      height: 4px;
      border-radius: 99px;
      background: linear-gradient(90deg, #7C3AED, #06B6D4);
      margin: 0 auto 1rem
    }

    .portfolio-overlay {
      opacity: 0;
      transition: opacity .3s ease
    }

    .portfolio-card:hover .portfolio-overlay {
      opacity: 1
    }

    .testimonial-card {
      border: 1px solid #2A2A4A;
      background: linear-gradient(135deg, #16162A, #1e1e35)
    }

    .floating {
      animation: float 6s ease-in-out infinite
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    .btn-primary, 
    .btn-outline, 
    #wpforms-61 button.wpforms-submit {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 12px !important; /* Fixed gap for icon and text */
      font-weight: 600;
      padding: 0.9rem 2.5rem;
      border-radius: 99px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      text-decoration: none !important;
      font-size: 0.9375rem; /* 15px */
      line-height: 1.5 !important; /* Balanced line-height for better vertical centering */
      white-space: nowrap !important; /* CRITICAL: Prevent text wrapping */
      flex-shrink: 0 !important;
      border: 2px solid transparent;
      box-sizing: border-box;
      outline: none;
      width: max-content !important; /* FORCE: Prevent squeezing */
    }

    /* Target the text span to ensure it's vertically centered with icons */
    .btn-primary span, 
    .btn-outline span {
      display: inline-block;
      line-height: 1;
    }

    /* Ensure SVG icons and i-tags are perfectly centered within buttons */
    .btn-primary svg, 
    .btn-primary i,
    .btn-outline svg,
    .btn-outline i,
    .portfolio-overlay span {
      display: inline-block !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
      width: auto !important;
      white-space: nowrap !important;
    }

    .portfolio-overlay a {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      white-space: nowrap !important;
      min-width: max-content !important;
      padding: 0.75rem 1.5rem !important;
    }

    .btn-primary, 
    #wpforms-61 button.wpforms-submit {
      background: linear-gradient(135deg, #7C3AED, #06B6D4);
      color: #fff !important;
      box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    }

    .btn-primary:hover, 
    #wpforms-61 button.wpforms-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(124, 58, 237, 0.6);
    }

    .btn-outline {
      border: 2px solid #7C3AED;
      color: #A78BFA !important;
      background: transparent !important;
    }

    .btn-outline:hover {
      background: #7C3AED !important;
      color: #fff !important;
      transform: translateY(-2px);
    }


    #wpforms-61 button.wpforms-submit {
      width: 100%;
    }


    nav.scrolled {
      background: rgba(15, 15, 26, .95);
      backdrop-filter: blur(20px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, .4)
    }

    .star {
      color: #FBBF24
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: .25rem .75rem;
      border-radius: 99px;
      font-size: .75rem;
      font-weight: 600;
      border: 1px solid #2A2A4A;
      background: #16162A;
      color: #A78BFA
    }

    .input-field {
      background: #16162A;
      border: 1px solid #2A2A4A;
      border-radius: .5rem;
      padding: .75rem 1rem;
      color: #E2E8F0;
      width: 100%;
      transition: border-color .3s;
      outline: none
    }

    .input-field:focus {
      border-color: #7C3AED;
      box-shadow: 0 0 0 3px rgba(124, 58, 237, .15)
    }

    .services-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(124, 58, 237, .2), rgba(6, 182, 212, .2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1rem;
      border: 1px solid rgba(124, 58, 237, .3)
    }
/* Wrapper */
#wpforms-61 {
  width: 100%;
}

/* Remove unwanted spacing from WPForms output */
#wpforms-61 p,
#wpforms-61 br {
  display: none;
}

#wpforms-61 .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Labels */
#wpforms-61 .wpforms-field-label {
  display: inline-block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* Required mark */
#wpforms-61 .wpforms-required-label {
  color: #f87171;
  margin-left: 4px;
}

/* Input + textarea */
#wpforms-61 input[type="text"],
#wpforms-61 input[type="email"],
#wpforms-61 textarea {
  width: 100%;
  background: #111827;
  border: 1px solid #2a3441;
  color: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* Placeholder */
#wpforms-61 input::placeholder,
#wpforms-61 textarea::placeholder {
  color: #94a3b8;
}

/* Focus state */
#wpforms-61 input[type="text"]:focus,
#wpforms-61 input[type="email"]:focus,
#wpforms-61 textarea:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
  background: #0f172a;
}

/* Textarea */
#wpforms-61 textarea {
  min-height: 140px;
  resize: vertical;
}

/* Field block */
#wpforms-61 .wpforms-field {
  margin: 0;
  padding: 0;
}

/* Submit area */
#wpforms-61 .wpforms-submit-container {
  margin-top: 24px;
  padding: 0;
}

/* Validation error */
#wpforms-61 .wpforms-error {
  color: #fca5a5;
  font-size: 13px;
  margin-top: 6px;
}

/* Error input */
#wpforms-61 input.wpforms-error,
#wpforms-61 textarea.wpforms-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Responsive */
@media (max-width: 768px) {
  #wpforms-61 .wpforms-field-label {
    font-size: 14px;
  }

  #wpforms-61 input[type="text"],
  #wpforms-61 input[type="email"],
  #wpforms-61 textarea {
    font-size: 14px;
    padding: 13px 14px;
  }

  #wpforms-61 button.wpforms-submit {
    height: 48px;
    font-size: 15px;
  }
}