/* Custom styles for glassmorphism effect */
 .glass-effect {
   backdrop-filter: blur(10px);
   background     : rgba(255, 255, 255, 0.1);
   border         : 1px solid rgba(255, 255, 255, 0.2);
 }

 /* Smooth scrolling */
 html {
   scroll-behavior: smooth;
 }

 /* Hero image styling */
 .hero-image {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   position  : relative;
   overflow  : hidden;
 }

 .hero-image::before {
   content   : '';
   position  : absolute;
   top       : 0;
   left      : 0;
   right     : 0;
   bottom    : 0;
   background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
   z-index   : 1;
 }

 .hero-image img {
   position: relative;
   z-index : 2;
 }

 /* Hover effects */
 .nav-link:hover {
   transform : translateY(-2px);
   transition: all 0.3s ease;
 }

 .cta-button:hover {
   transform : translateY(-3px) scale(1.05);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
 }

 /* Mobile menu animation */
 .mobile-menu {
   transform : translateX(-100%);
   transition: transform 0.3s ease;
 }

 .mobile-menu.active {
   transform: translateX(0);
 }

 .text-gray-600 {
   color: #212121 !important;
 }

 .text-gray-900 {
   color: #263238 !important;
 }

 .text-gray-6000 {
   color: #9e9e9e;
 }

 @keyframes scroll {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 .animate-scroll {
   animation: scroll 20s linear infinite;
 }

 .pause-on-hover:hover .animate-scroll {
   animation-play-state: paused;
 }

 .misc-25 {
   width: 35px;
 }

 @keyframes slideUp {
   from {
     opacity  : 0;
     transform: translateY(30px);
   }

   to {
     opacity  : 1;
     transform: translateY(0);
   }
 }

 .animate-slide-up {
   animation: slideUp 0.6s ease-out forwards;
 }

 .skill-card {
   transition: all 0.3s ease;
 }

 .skill-card:hover {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .flex {
   display: flex !important;
 }

 .custom-toast {
   visibility        : hidden;
   min-width         : 280px;
   max-width         : 400px;
   /* background     : linear-gradient(135deg, #28a745 0%, #20c997 100%); */
   color             : white;
   text-align        : left;
   border-radius     : 12px;
   padding           : 16px 20px;
   position          : fixed;
   top               : 20px;
   right             : 20px;
   z-index           : 1050;
   box-shadow        : 0 8px 25px rgba(232, 24, 64, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1);
   font-size         : 14px;
   font-weight       : 500;
   border            : 1px solid rgba(255, 255, 255, 0.2);
   /* backdrop-filter: blur(10px); */
   transition        : all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   opacity           : 0;
   transform         : translateX(100%) scale(0.8);
 }

 .custom-toast.show {
   visibility: visible;
   opacity   : 1;
   transform : translateX(0) scale(1);
 }

 .custom-toast.hide {
   opacity   : 0;
   transform : translateX(100%) scale(0.8);
   transition: all 0.3s ease-in;
 }

 .toast-content {
   display    : flex;
   align-items: center;
   gap        : 12px;
 }

 .toast-success,
 .toast-error,
 .toast-info {
   background      : none !important;
   backdrop-filter : none !important;
   background-color: unset !important;
 }

 /* Gradient styles */
 .toast-success {
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
 }

 .toast-error {
   background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
 }

 .toast-info {
   background: linear-gradient(135deg, #0487ff 0%, #17a2b8 100%) !important;
 }

 .toast-icon {
   font-size  : 20px;
   flex-shrink: 0;
   animation  : bounce 0.6s ease-out;
 }

 .toast-message {
   flex       : 1;
   line-height: 1.4;
 }

 .toast-close {
   background     : none;
   border         : none;
   color          : rgba(255, 255, 255, 0.8);
   font-size      : 18px;
   cursor         : pointer;
   padding        : 0;
   width          : 24px;
   height         : 24px;
   display        : flex;
   align-items    : center;
   justify-content: center;
   border-radius  : 50%;
   transition     : all 0.2s;
   flex-shrink    : 0;
 }

 .toast-close:hover {
   background: rgba(255, 255, 255, 0.2);
   color     : white;
 }

 .toast-progress {
   position     : absolute;
   bottom       : 0;
   left         : 0;
   height       : 3px;
   background   : rgba(255, 255, 255, 0.3);
   border-radius: 0 0 12px 12px;
   animation    : progressBar 4s linear forwards;
 }

 @keyframes bounce {

   0%,
   20%,
   50%,
   80%,
   100% {
     transform: translateY(0);
   }

   40% {
     transform: translateY(-8px);
   }

   60% {
     transform: translateY(-4px);
   }
 }

 @keyframes progressBar {
   from {
     width: 100%;
   }

   to {
     width: 0%;
   }
 }

 /* Toast contect form style */
 .custom-toast {
   position     : fixed;
   top          : 20px;
   left         : 80%;
   transform    : translateX(-50%);
   min-width    : 280px;
   max-width    : 400px;
   border-radius: 8px;
   color        : white;
   padding      : 12px 16px;
   box-sizing   : border-box;
   font-family  : Arial, sans-serif;
   display      : none;
   z-index      : 9999;
   box-shadow   : 0 8px 25px rgba(0, 0, 0, 0.1);
   transition   : opacity 0.3s ease, transform 0.3s ease;
 }

 .custom-toast.show {
   display  : block;
   opacity  : 1;
   transform: translateX(-50%) translateY(0);
 }

 .toast-content {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
 }

 .toast-icon {
   font-size   : 22px;
   margin-right: 12px;
 }

 .toast-message {
   flex-grow: 1;
   font-size: 15px;
 }

 .toast-close {
   background: transparent;
   border    : none;
   color     : white;
   font-size : 20px;
   cursor    : pointer;
   padding   : 0 6px;
 }

 .toast-progress {
   height: 3px;

   /* default green */
   width        : 0;
   border-radius: 0 0 8px 8px;
   margin-top   : 8px;
   transition   : width 3s linear;
 }

 .custom-toast {
   position     : fixed;
   bottom       : 20px;
   right        : 20px;
   min-width    : 250px;
   border-radius: 6px;
   overflow     : hidden;
   box-shadow   : 0 4px 8px rgba(0, 0, 0, 0.2);
   opacity      : 0;
   transform    : translateY(20px);
   transition   : opacity 0.3s ease, transform 0.3s ease;
   z-index      : 9999;
   height       : 100px;
 }

 .custom-toast.show {
   opacity  : 1;
   transform: translateY(0);
 }

 .toast-content {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   padding        : 12px 15px;
   font-size      : 14px;
   color          : #333;
 }

 .toast-icon {
   margin-right: 10px;
   font-size   : 18px;
   font-weight : bold;
   flex-shrink : 0;
 }

 .toast-message {
   flex: 1;
 }

 .toast-close {
   background: none;
   border    : none;
   font-size : 18px;
   cursor    : pointer;
   color     : inherit;
 }

 .toast-progress {
   height    : 4px;
   width     : 0;
   transition: width 3s linear;
 }

 .custom-toast.success .toast-content {
   background-color: #e6f9e6;
 }

 .custom-toast.success .toast-icon {
   color: green;
 }

 .custom-toast.success .toast-progress {
   background-color: green;
 }

 .custom-toast.error .toast-content {
   background-color: #ffe6e6;
 }

 .custom-toast.error .toast-icon {
   color: red;
 }

 .custom-toast.error .toast-progress {
   background-color: red;
 }

 .custom-toast.info .toast-content {
   background-color: #e6f0ff;
 }

 .custom-toast.info .toast-icon {
   color: blue;
 }

 .custom-toast.info .toast-progress {
   background-color: blue;
 }

 .custom-toast.warning .toast-close {
   color: rgba(33, 37, 41, 0.8);
 }

 .custom-toast.warning .toast-close:hover {
   background: rgba(33, 37, 41, 0.1);
   color     : #212529;
 }

 @media (max-width: 480px) {
   .custom-toast {
     left     : 10px;
     right    : 10px;
     top      : 10px;
     min-width: auto;
     max-width: none;
   }

 }

 
    .blog-details-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1.5rem;
      display: flex;
      gap: 2rem;
    }

    /* Left column (main content) */
    .blog-details-content {
      flex: 3;
      background: white;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    header a {
      text-decoration: none;
      color: #4f46e5;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.95rem;
    }

    header a:hover {
      text-decoration: underline;
    }

    h1 {
      font-size: 2rem;
      font-weight: 800;
      color: #111827;
      margin-top: 1rem;
    }

    .blog-details-meta {
      color: #6b7280;
      font-size: 0.9rem;
      margin-top: 0.3rem;
      margin-bottom: 2rem;
    }

    article p {
      margin-bottom: 1.5rem;
      color: #374151;
    }

    article h2 {
      font-size: 1.25rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: #111827;
    }

    article ul {
      margin-left: 1.5rem;
      list-style: disc;
      color: #374151;
    }

    article ul li {
      margin-bottom: 0.75rem;
    }

    .blog-details-divider {
      border-top: 1px solid #d1d5db;
      margin: 2rem 0;
    }

    footer {
      font-size: 0.9rem;
      color: #6b7280;
      text-align: center;
    }

    /* Right column (sidebar) */
    .blog-details-sidebar {
      flex: 1;
      position: sticky;
      top: 30px;
      align-self: flex-start;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      padding: 1.5rem;
      text-align: center;
    }

    .blog-details-sidebar img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 1rem;
    }

    .blog-details-sidebar h3 {
      font-size: 1.1rem;
      color: #111827;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }

    .blog-details-sidebar p {
      color: #6b7280;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }

    .blog-details-sidebar a {
      display: inline-block;
      margin-top: 0.5rem;
      text-decoration: none;
      background: #4f46e5;
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      font-size: 0.9rem;
      transition: background 0.3s ease;
    }

    .blog-details-sidebar a:hover {
      background: #4338ca;
    }

    @media (max-width: 900px) {
      .blog-details-container {
        flex-direction: column;
      }

      .blog-details-sidebar {
        position: relative;
        top: 0;
        order: -1;
      }
    }