/* Custom Styles for TechNivesh Premium Theme */
html {
  scroll-behavior: smooth;
}
.animate-fadeInUp {
  animation: fadeInUp 1s ease forwards;
}
@keyframes fadeInUp {
  0% {opacity:0; transform: translateY(30px);}
  100% {opacity:1; transform: translateY(0);}
}

.animated-bg {
  background: linear-gradient(-45deg, #1a237e, #4a148c, #880e4f, #f50057);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* Gradients */
.bg-gradient-1 { background: linear-gradient(45deg, #ff7e5f, #feb47b); }
.bg-gradient-2 { background: linear-gradient(90deg, #6a11cb, #2575fc); }
.bg-gradient-3 { background: linear-gradient(135deg, #f7971e, #ffd200); }

/* Animated Gradient */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.bg-animated {
  background: linear-gradient(-45deg, #ff4e50, #0637be, #24c6dc, #514a9d);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

/* Pattern Background */
.bg-pattern {
  background-image: url('..assets/images/pattern.jpg');
  background-size: cover;
}

/* Image Background */
/*.bg-image {
  background-image: url('../images/bg1.jpg');
  background-size: cover;
  background-position: center;
}

/* --- Blog Premium UI --- */
.blog-card { transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }

.sticky-filter { position: sticky; top: 80px; z-index: 40; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border-radius: 11px; }

.badge { font-size:.75rem; padding:.25rem .5rem; border-radius:999px; background: #EEF2FF; color:#3730A3; font-weight:600; }
.chip { padding:.35rem .7rem; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; cursor:pointer; font-size:.85rem; }
.chip:hover { background:#cae3fc; }

.share-icons a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:#4876a1; transition:.25s; }
.share-icons a:hover{ transform:translateY(-2px); background:#7a6ca0; }


/* Navigation links ko thoda upar shift karne ke liye */
#navbar nav {
  position: relative;
  top: -60px; /* yahan px ka value badha-ghata ke adjust karo */
}

/* Navigation link underline animation */
#navbar nav a {
  position: relative;
  text-decoration: none;
}

#navbar nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* text ke niche ka gap */
  width: 0;
  height: 2px;
  background-color: #fffb00; /* Yellow-400 color */
  transition: width 0.3s ease;
}

#navbar nav a:hover::after {
  width: 100%;
}

/* Social Icon Styles */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;               /* button size */
  height: 48px;
  border-radius: 50%; /* circular shape */
  padding: 8px;        
  color: white;              /* icon color */
  font-size: 24px;           /* icon size */
  transition: transform 0.3s ease, filter 0.3s ease;
  text-decoration: none;     /* remove underline */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.social-icon.instagram {
  background-color: #E1306C;
}

.social-icon.whatsapp {
  background-color: #25D366;
}

.social-icon.gmail img {
  width: 34px;
  height: 34px;
}

.social-icon.portfolio {
  background-color: #117de2;
}

.social-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Map container */
.map-container {
  overflow: hidden;
  border-radius: 12px;
  margin-top: 20px;
}

/* Image hover zoom effect */
img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Button hover glow effect */
button:hover {
  background: linear-gradient(45deg, #4CAF50, #81C784);
  color: white;
  box-shadow: 0px 0px 20px rgba(76, 175, 80, 0.6);
  transition: all 0.3s ease-in-out;
}

/* Heading text animation */
h1, h2, h3 {
  position: relative;
  display: inline-block;
}
h1::after, h2::after, h3::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #4CAF50;
  position: absolute;
  left: 0;
  bottom: -5px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: right;
}
h1:hover::after, h2:hover::after, h3:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 3D Tilt Hover Effect */
.tilt-card {
  perspective: 1000px;
}
.tilt-card:hover img,
.tilt-card:hover .content {
  transform: rotateY(15deg) rotateX(10deg);
  transition: transform 0.5s ease;
}
.tilt-card img,
.tilt-card .content {
  transition: transform 0.5s ease;
}

/* Dark Mode */
body.light-mode {
  background: #fff;
  color: #000;
}
body.dark-mode {
  background: #111;
  color: #fff;
}
.toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  cursor: pointer;
  background: #222;
  color: #fff;
  border-radius: 8px;
}



/* === Final Polish Pack === */

/* Universal smooth transition */
* {
  transition: all 0.25s ease-in-out;
}

/* Buttons */
button, .btn {
  background: linear-gradient(45deg, #2563eb, #3b82f6);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
button:hover, .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  background: linear-gradient(45deg, #1d4ed8, #2563eb);
}

/* Blog Cards */
.blog-card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.blog-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 28px rgba(0,0,0,0.15);
}

/* Images */
img {
  border-radius: 6px;
}
img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Headings */
h1, h2, h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}
h1:hover, h2:hover, h3:hover {
  color: #2563eb;
}

/* Navbar links */
#navbar nav a {
  font-weight: 600;
  color: inherit;
}
#navbar nav a:hover {
  color: #2563eb;
}

/* Footer polish */
footer {
  padding: 20px;
  text-align: center;
  background: #111827;
  color: #e5e7eb;
  font-size: 14px;
}
footer a {
  color: #60a5fa;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Hero Section adjust */
section.hero-fix {
  padding-top: 110px;  /* default 80-100px hota hai, ise thoda badha do */
}
.hero-fix h2 {
  font-size: 2.9rem;   /* default ~2.5rem hota hai Tailwind me */
}