:root {
    --primary-gradient: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
    --bg-primary-soft: rgba(13, 110, 253, 0.08);
    --bg-purple-soft: rgba(102, 16, 242, 0.08);
    --bg-warning-soft: rgba(255, 193, 7, 0.08);
    --yellow-brand: #ffd700; /* Justwords golden yellow */
    --black-brand: #000000;
}

body {
    font-family: 'Inter', sans-serif;
    color: #111827;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Poppins', sans-serif;
}

.bg-yellow { background-color: var(--yellow-brand) !important; }
.btn-yellow { background-color: var(--yellow-brand) !important; color: black !important; border: none !important; }
.btn-yellow:hover { background-color: #f0d000 !important; }
.btn-black { background-color: var(--black-brand) !important; color: white !important; border: none !important; }
.btn-black:hover { background-color: #333 !important; }
.text-yellow { color: var(--yellow-brand); }
.bg-black { background-color: #000 !important; }

.shadow-2xl {
    box-shadow: 0 40px 80px -15px rgba(0,0,0,0.1);
}

/* Glassmorphism Badge */
.glass {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Portfolio Hover Effects */
.portfolio-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.12) !important;
}

.hover-zoom {
    transition: transform 0.7s ease;
}
.portfolio-card:hover .hover-zoom {
    transform: scale(1.05);
}

/* Contact Image */
.contact-image-container {
    width: 350px;
    height: 350px;
    position: relative;
    overflow: hidden;
}
.contact-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Award Banner Strip */
.award-banner-inner {
    background-image: radial-gradient(rgba(0,0,0,0.15) 1px, transparent 1px);
    background-size: 25px 25px;
}

.dot-pattern {
    width: 120px;
    height: 80px;
    background-image: radial-gradient(#000 2px, transparent 2px);
    background-size: 10px 10px;
    z-index: 0;
}

.banner-laptop-decoration {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35%;
    overflow: hidden;
    z-index: 0;
}

.banner-laptop-decoration img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.z-index-1 { z-index: 1; }

/* Navbar Styling */
.navbar {
    background: white;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Footer Styling */
.social-icon-btn {
    width: 38px;
    height: 38px;
    background: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}
.social-icon-btn:hover {
    background: var(--yellow-brand);
    color: #000;
}

.newsletter-form-footer input {
    border-color: #ddd !important;
}

/* WhatsApp Floating */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    z-index: 1000;
}

/* Custom Hover Effect for Bootstrap Cards */
.hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    cursor: pointer;
}

.hover-lift:hover {
    transform: translateY(-10px) !important; /* Moves the box up */
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; /* Deep Bootstrap-style shadow */
    border-color: #0d6efd !important; /* Changes border to Bootstrap Blue */
}

/* Optional: Makes the icon grow too */
.hover-lift:hover i {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}
.feature-card {
  border: 1px solid #eef1f4;
  border-radius: 16px;
  padding: 32px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(13,110,253,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}


@media (max-width: 991px) {
    .banner-laptop-decoration { display: none; }
    .award-banner-inner { background-image: none; }
    .contact-image-container { width: 280px; height: 280px; }
}