p{
  color: black;
 }
 .styled-text {
      font-size: 30px;
      font-weight: 700;
    }
    .pink { color: #ff5bb8; }    /* Pink for "Amit(" */
    .purple { color: #3711b3; }  /* Purple for "freelancer)" */

   .navbar {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .navbar-brand span {
      font-size: 26px;
      font-weight: 700;
    }

    .navbar-brand .pink {
      color: #ff4da6;
    }

    .navbar-brand .purple {
      color: #a76eff;
    }

    .navbar-nav .nav-link {
      font-weight: 500;
      padding: 8px 15px;
      transition: color 0.3s;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: #ff4da6 !important;
    }

    .dropdown-menu {
      min-width: 180px;
    }

    .dropdown-item:hover {
      background-color: #ffe6f0;
      color: #ff4da6;
    }

    /* Mobile spacing tweak */
    @media (max-width: 991.98px) {
      .navbar-nav .nav-link {
        padding: 10px 0;
      }
    }

      #section1 {
            background-image: url(assets/images/blog-left-dec.jpg);
            color: white;
            padding: 60px 0;
        }
        #section1 h2 {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30px;
        }
        #section1 .card {
            border: none;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 15px;
            transition: transform 0.3s;
        }
        #section1 .card:hover {
            transform: translateY(-10px);
        }
        /* Section 2: Your Website is the Face */
        #section2 {
            background-color: #e6f0fa;
            padding: 60px 0;
        }
        #section2 h2 {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            color: #1a3c6d;
            margin-bottom: 30px;
        }
        #section2 .feature-box {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: box-shadow 0.3s;
        }
        #section2 .feature-box:hover {
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
       
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            #section1 h2, #section2 h2, #section3 h2 {
                font-size: 1.8rem;
            }
            #section1 .card, #section2 .feature-box {
                margin-bottom: 20px;
            }
        }





        /* prodcuts pages  */


        .highlight-pink { color: #ff5bb8; }
    .highlight-purple { color: #3711b3; }
    .feature-card {
      transition: all 0.3s ease;
      border: 2px solid #f1f1f1;
      border-radius: 15px;
      padding: 25px;
      background-color: #fff;
    }
    .feature-card:hover {
      border-color: #ff5bb8;
      background-color: #fff0f7;
      box-shadow: 0 4px 20px rgba(255, 91, 184, 0.2);
    }
    .icon-box {
      font-size: 2rem;
      color: #3711b3;
      margin-bottom: 10px;
    }







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

    /* Hover Effect for Pink Border Cards */
    .card.border-3[style*="#f86ebc"]:hover {
        background-color: #ffe6f3; /* light pink background */
        border-color: #d94ca2 !important; /* darker pink border */
        transform: scale(1.03); /* slight zoom */
        box-shadow: 0 4px 20px rgba(248, 110, 188, 0.3); /* pink glow */
    }

    /* Hover Effect for Purple Border Cards */
    .card.border-3[style*="#8a6ee8"]:hover {
        background-color: #f1ecff; /* light purple background */
        border-color: #6d52d1 !important; /* darker purple border */
        transform: scale(1.03); /* slight zoom */
        box-shadow: 0 4px 20px rgba(138, 110, 232, 0.3); /* purple glow */
    }



    /* Common transition and effect for all cards */
  .card.border-0.shadow-sm {
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* Hover for pink bottom border cards (#ff66b2) */
  .card[style*="#ff66b2"]:hover {
    background-color: #ffe6f0;
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(255, 102, 178, 0.3);
    border-bottom: 4px solid #e2559f !important;
  }

  /* Hover for purple bottom border cards (#7d6bff) */
  .card[style*="#7d6bff"]:hover {
    background-color: #f0edff;
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(125, 107, 255, 0.3);
    border-bottom: 4px solid #5e4dd9 !important;
  }


   /* Smooth animation */
  .card.shadow-sm.border-0 {
    transition: all 0.3s ease;
  }

  /* Hover effect for expertise section cards */
  .card.shadow-sm.border-0:hover {
    transform: translateY(-6px);
    background: linear-gradient(135deg, #ffffff, #fff0f7);
    box-shadow: 0 6px 25px rgba(248, 110, 188, 0.2);
  }

  /* Highlight title on hover */
  .card.shadow-sm.border-0:hover .card-title {
    color: #f86ebc;
  }


  .hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

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