html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      line-height: 1.6;
    }

    .font-mono {
      font-family: "JetBrains Mono", monospace;
    }
    .hover\:bg-custom:hover {
        background-color: #A7C4BC;
      }
    
      .bg-custom {
        background-color: #A7C4BC;
      }

    .text-custom { color: #16404D; }
    .bg-custom { background-color: #16404D; }

    /* Improved typography scale */
    .text-hero { font-size: clamp(2.5rem, 5vw, 3.2rem); line-height: 1.1; }
    .text-section-title { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; }
    .text-card-title { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.3; }

    /* Enhanced triangular design element */
    .triangle {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0;
      height: 0;
      border-left: 18vw solid transparent;
      border-top: 18vw solid transparent;
      border-right: 18vw solid #16404D;
      border-bottom: 18vw solid #16404D;
      opacity: 0.95;
    }

    

    @media (max-width: 1024px) {
      .triangle {
        border-left-width: 20vw;
        border-top-width: 20vw;
        border-right-width: 20vw;
        border-bottom-width: 20vw;
      }
    }

    @media (max-width: 768px) {
      .triangle {
        border-left-width: 25vw;
        border-top-width: 25vw;
        border-right-width: 25vw;
        border-bottom-width: 25vw;
      }
    }

    .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .glass-effect {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .image-overlay {
        background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    }
    .tech-tag {
        background: #A7C4BC;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    .section-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    }

    /* Improved image container with better proportions */
    .image-container {
      position: relative;
      display: inline-block;
      margin: 2rem auto;
    }
    
    .image-bg {
      position: absolute;
      top: 1.5rem;
      left: 4rem;
      width: 100%;
      height: 110%;
      background: linear-gradient(135deg, #adacac 0%, #9ca3af 100%);
      border-radius: 2rem;
      z-index: 0;
      transform: rotate(3deg);
    }

    @media (max-width: 768px) {
      .image-bg {
        top: 1rem;
        left: 2.5rem;
        border-radius: 1.5rem;
      }
    }
    

    .image-content {
      position: relative;
      z-index: 1;
      border-radius: 1.5rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    /* Enhanced card hover effects */
    .service-card {
        position: relative; /* Required for absolute positioning of the icon */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #A7C4BC;
        
   
      }
      
      .service-card::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px; 
        z-index: 10;
 
        
      }
      
      .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(22, 64, 77, 0.15);
        border-color: rgba(22, 64, 77, 0.1);
      }

      .icon-top {
        position: absolute;
        top: -20px; /* Adjust to position icon */
        left: 50%;
        transform: translateX(-50%);
        font-size: 24px; /* Icon size */
        color: #16404D; /* Match your color scheme or use text-custom */
        background: white; /* Background to overlap border */
        padding: 8px;
        border-radius: 50%; /* Optional: circular background */
        z-index: 10;
        border: 0.2px solid #16404D;
        background-color: #A7C4BC;
      }
    /* Improved button styles */
    .btn-primary {
      background: linear-gradient(135deg, #16404D 0%, #1e5563 100%);
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(22, 64, 77, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(22, 64, 77, 0.4);
    }

    /* Better spacing utilities */
    .section-padding { padding: 5rem 0; }
    .content-max-width { max-width: 1200px; margin: 0 auto; }

    /* Improved project layout */
    .project-card {
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    /* Enhanced blog section */
    .blog-item {
      transition: all 0.3s ease;
      border-left: 4px solid transparent;
      padding-left: 1.5rem;
    }

    .blog-item:hover {
      border-left-color: #A7C4BC;
      transform: translateX(0.5rem);
    }

    /* Responsive adjustments */
@media (max-width: 640px) {
    .blog-item {
      padding-left: 1rem;
    }
  
    .blog-item:hover {
      transform: none; /* Prevent layout shift on narrow screens */
    }
  }

    /* Better mobile navigation */
    .mobile-menu-enter {
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Improved typography hierarchy */
    .text-body { font-size: 1.125rem; line-height: 1.7; }
    .text-small { font-size: 0.95rem; line-height: 1.6; }