/* Facebook Font Family */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GLOBAL STYLES */
.type-div {
  /* background: #333; */
  /* padding-top: 5em; */
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  /* color: #fff; */
  /* font-family: monospace; */
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(30, end) infinite,
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

/* Navbar */
.navbar-custom {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 45%, #6d28d9 100%) !important;
  padding: 10px 0;
  box-shadow: 0 4px 24px rgba(55, 48, 163, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 1050;
  overflow: visible;
}

.navbar-custom .container {
  position: relative;
  overflow: visible;
}

.navbar-custom .navbar-collapse {
  overflow: visible;
}

.navbar-custom .navbar-brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.navbar-custom .navbar-brand:hover {
  color: #e0e7ff !important;
  opacity: 0.95;
}

.navbar-custom .navbar-brand img {
  border-radius: 8px;
}

.navbar-custom .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 12px !important;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin: 0 2px;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus,
.navbar-custom .nav-link.show {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.navbar-custom .nav-ico {
  width: 18px;
  margin-right: 7px;
  text-align: center;
  font-size: 0.95rem;
}

.navbar-custom .nav-ico--home { color: #fbbf24; }
.navbar-custom .nav-ico--tools { color: #67e8f9; }

.tool-card-icon {
  font-size: 50px;
}

.nav-ico--gift, .tool-card-icon.nav-ico--gift { color: #ef4444; }
.nav-ico--sms, .tool-card-icon.nav-ico--sms { color: #22c55e; }
.nav-ico--instagram, .tool-card-icon.nav-ico--instagram { color: #e1306c; }
.nav-ico--saver, .tool-card-icon.nav-ico--saver { color: #0891b2; }
.nav-ico--youtube, .tool-card-icon.nav-ico--youtube { color: #ff0000; }
.nav-ico--image, .tool-card-icon.nav-ico--image { color: #8b5cf6; }
.nav-ico--tags, .tool-card-icon.nav-ico--tags { color: #0ea5e9; }
.nav-ico--calc, .tool-card-icon.nav-ico--calc { color: #6366f1; }
.nav-ico--word, .tool-card-icon.nav-ico--word { color: #2563eb; }
.nav-ico--chat, .tool-card-icon.nav-ico--chat { color: #64748b; }
.nav-ico--chart, .tool-card-icon.nav-ico--chart { color: #10b981; }
.nav-ico--scroll, .tool-card-icon.nav-ico--scroll { color: #d97706; }
.nav-ico--convert, .tool-card-icon.nav-ico--convert { color: #06b6d4; }
.nav-ico--qr, .tool-card-icon.nav-ico--qr { color: #334155; }
.nav-ico--heart, .tool-card-icon.nav-ico--heart { color: #e11d48; }
.nav-ico--code, .tool-card-icon.nav-ico--code { color: #7c3aed; }

.navbar-custom .nav-ico--about { color: #3b82f6; }
.navbar-custom .nav-ico--privacy { color: #14b8a6; }
.navbar-custom .nav-ico--contact { color: #ec4899; }
.navbar-custom .nav-ico--terms { color: #f59e0b; }

/* Tool cards — themed headers & buttons (homepage) */
.tool-crd-h {
  border: none;
  position: relative;
  overflow: hidden;
}

.tool-crd-h h2 {
  color: #1e293b !important;
  text-shadow: none !important;
}

.tool-btn {
  border: none;
  color: #ffffff !important;
  font-weight: 600;
}

.tool-btn:hover,
.tool-btn:focus {
  color: #ffffff !important;
  transform: translateY(-2px);
}

.tool-crd-h--instagram { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 55%, #fbcfe8 100%) !important; }
.tool-crd--instagram { box-shadow: 0 4px 14px rgba(225, 48, 108, 0.14); }
.tool-btn--instagram { background: linear-gradient(135deg, #db2777 0%, #e1306c 100%) !important; box-shadow: 0 4px 12px rgba(225, 48, 108, 0.35); }
.tool-btn--instagram:hover { background: linear-gradient(135deg, #be185d 0%, #db2777 100%) !important; box-shadow: 0 6px 16px rgba(225, 48, 108, 0.4); }

.tool-crd-h--saver { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 55%, #a5f3fc 100%) !important; }
.tool-crd--saver { box-shadow: 0 4px 14px rgba(8, 145, 178, 0.14); }
.tool-btn--saver { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important; box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35); }
.tool-btn--saver:hover { background: linear-gradient(135deg, #155e75 0%, #0e7490 100%) !important; box-shadow: 0 6px 16px rgba(8, 145, 178, 0.4); }

.tool-crd-h--youtube { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 55%, #fecaca 100%) !important; }
.tool-crd--youtube { box-shadow: 0 4px 14px rgba(255, 0, 0, 0.12); }
.tool-btn--youtube { background: linear-gradient(135deg, #dc2626 0%, #ff0000 100%) !important; box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3); }
.tool-btn--youtube:hover { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important; }

.tool-crd-h--image { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 55%, #ddd6fe 100%) !important; }
.tool-crd--image { box-shadow: 0 4px 14px rgba(139, 92, 246, 0.14); }
.tool-btn--image { background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35); }
.tool-btn--image:hover { background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important; }

.tool-crd-h--tags { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 55%, #a5f3fc 100%) !important; }
.tool-crd--tags { box-shadow: 0 4px 14px rgba(14, 165, 233, 0.14); }
.tool-btn--tags { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35); }
.tool-btn--tags:hover { background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important; }

.tool-crd-h--sms { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 55%, #bbf7d0 100%) !important; }
.tool-crd--sms { box-shadow: 0 4px 14px rgba(34, 197, 94, 0.14); }
.tool-btn--sms { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35); }
.tool-btn--sms:hover { background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important; }

.tool-crd-h--chat { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 55%, #e2e8f0 100%) !important; }
.tool-crd--chat { box-shadow: 0 4px 14px rgba(100, 116, 139, 0.14); }
.tool-btn--chat { background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important; box-shadow: 0 4px 12px rgba(100, 116, 139, 0.35); }
.tool-btn--chat:hover { background: linear-gradient(135deg, #334155 0%, #475569 100%) !important; }

.tool-crd-h--gift { background: linear-gradient(135deg, #fef2f2 0%, #fecaca 55%, #fca5a5 100%) !important; }
.tool-crd--gift { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.14); }
.tool-btn--gift { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); }
.tool-btn--gift:hover { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important; }

.tool-crd-h--scroll { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%) !important; }
.tool-crd--scroll { box-shadow: 0 4px 14px rgba(217, 119, 6, 0.14); }
.tool-btn--scroll { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35); }
.tool-btn--scroll:hover { background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important; }

.tool-crd-h--heart { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 55%, #fecdd3 100%) !important; }
.tool-crd--heart { box-shadow: 0 4px 14px rgba(225, 29, 72, 0.14); }
.tool-btn--heart { background: linear-gradient(135deg, #be123c 0%, #e11d48 100%) !important; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35); }
.tool-btn--heart:hover { background: linear-gradient(135deg, #9f1239 0%, #be123c 100%) !important; }

.tool-crd-h--calc { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 55%, #c7d2fe 100%) !important; }
.tool-crd--calc { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.14); }
.tool-btn--calc { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.tool-btn--calc:hover { background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important; }

.tool-crd-h--word { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 55%, #bfdbfe 100%) !important; }
.tool-crd--word { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14); }
.tool-btn--word { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); }
.tool-btn--word:hover { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important; }

.tool-crd-h--chart { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 55%, #a7f3d0 100%) !important; }
.tool-crd--chart { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.14); }
.tool-btn--chart { background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); }
.tool-btn--chart:hover { background: linear-gradient(135deg, #047857 0%, #059669 100%) !important; }

.tool-crd-h--code { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 55%, #ddd6fe 100%) !important; }
.tool-crd--code { box-shadow: 0 4px 14px rgba(124, 58, 237, 0.14); }
.tool-btn--code { background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35); }
.tool-btn--code:hover { background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%) !important; }

.tool-crd-h--convert { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 55%, #a5f3fc 100%) !important; }
.tool-crd--convert { box-shadow: 0 4px 14px rgba(6, 182, 212, 0.14); }
.tool-btn--convert { background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35); }
.tool-btn--convert:hover { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important; }

.tool-crd-h--qr { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 55%, #e2e8f0 100%) !important; }
.tool-crd--qr { box-shadow: 0 4px 14px rgba(51, 65, 85, 0.14); }
.tool-btn--qr { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; box-shadow: 0 4px 12px rgba(51, 65, 85, 0.35); }
.tool-btn--qr:hover { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; }

.navbar-custom .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.12);
  padding: 6px 10px;
  border-radius: 6px;
}

.navbar-custom .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown */
.navbar-custom .dropdown-menu,
.navbar-custom .tools-dropdown-menu {
  z-index: 1051;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
  border-radius: 8px;
  padding: 6px;
  margin-top: 8px;
  min-width: 240px;
}

.tools-search-wrap {
  position: relative;
  padding: 4px 4px 8px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 4px;
}

.tools-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-65%);
  color: #94a3b8;
  font-size: 0.8rem;
  pointer-events: none;
}

.tools-search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #334155;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tools-search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: #ffffff;
}

.tools-search-input::placeholder {
  color: #94a3b8;
}

.tools-dropdown-scroll {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c7d2fe transparent;
}

.tools-dropdown-scroll::-webkit-scrollbar {
  width: 5px;
}

.tools-dropdown-scroll::-webkit-scrollbar-thumb {
  background: #c7d2fe;
  border-radius: 4px;
}

.tools-no-results {
  padding: 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Transparent backdrop — closes dropdown on outside click (fixes ad iframe blocking) */
.nav-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1049;
  background: transparent;
}

/* Keep ads below navbar dropdown overlays */
ins.adsbygoogle,
.adsbygoogle,
.ad-below-nav {
  position: relative !important;
  z-index: 0 !important;
}

.navbar-custom .dropdown-item {
  color: #334155 !important;
  padding: 9px 12px;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

.navbar-custom .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: 0.15em;
  border-top-color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse {
    background: rgba(30, 27, 75, 0.95);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar-custom .nav-item.dropdown {
    position: relative;
  }

  .navbar-custom .tools-dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    box-shadow: none;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
  }

  .tools-dropdown-scroll {
    max-height: 45vh;
  }
}