.blog-section{
      position:relative;
      overflow:hidden;
      padding:200px 20px;
      background:
      linear-gradient(
        to bottom,
        #fefce8,
        #f0fdf4,
        #eff6ff
      );
    }

    /* Floating Emojis */

    .floating-emoji{
      position:absolute;
      opacity:.08;
      animation:floatY 6s ease-in-out infinite;
      user-select:none;
      pointer-events:none;
    }

    .emoji-1{
      top:60px;
      right:70px;
      font-size:90px;
      animation-delay:0s;
    }

    .emoji-2{
      bottom:100px;
      left:60px;
      font-size:80px;
      animation-delay:2s;
    }

    @keyframes floatY{
      0%{
        transform:translateY(0px) rotate(0deg);
      }
      50%{
        transform:translateY(-20px) rotate(8deg);
      }
      100%{
        transform:translateY(0px) rotate(0deg);
      }
    }

    /* Header */

    .section-header{
      text-align:center;
      margin-bottom:70px;
      animation:fadeUp 1s ease;
    }
.blog-head{
  display: flex;
  align-items: center;
  justify-content: center;
}
    .section-header .icon{
      font-size:40px;
      margin-bottom:20px;
      display:inline-block;
      animation:bounce 3s infinite;
    }

    .section-header h2{
      font-size:clamp(2.5rem,5vw,2rem);
      line-height:1.2;
      margin-bottom:18px;
      background:linear-gradient(to right,#ea580c,#dc2626);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-weight:400;
    }

    .section-header p{
      font-size:1.2rem;
      color:#4b5563;
      max-width:700px;
      margin:auto;
    }

    @keyframes bounce{
      0%,100%{
        transform:translateY(0);
      }
      50%{
        transform:translateY(-10px);
      }
    }

    @keyframes fadeUp{
      from{
        opacity:0;
        transform:translateY(50px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    /* Blog Grid */

    .blog-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:35px;
    }

    .blog-card{
      background:#fff;
      border-radius:30px;
      overflow:hidden;
      position:relative;
      box-shadow:
      0 15px 40px rgba(0,0,0,.08);
      transition:.5s;
      animation:fadeUp .8s ease forwards;
    }

    .blog-card:hover{
      transform:translateY(-12px);
      box-shadow:
      0 20px 50px rgba(0,0,0,.15);
    }

    .card-image{
      height:250px;
      width:100%;
      overflow:hidden;
      position:relative;
    }

    .card-image img{
      height:100%;
      width: 100%;
      object-fit:cover;
      transition:1s;
    }

    .blog-card:hover img{
      transform:scale(1.1);
    }

    .badge{
      position:absolute;
      top:18px;
      left:18px;
      color:#fff;
      padding:10px 18px;
      border-radius:50px;
      font-size:.9rem;
      font-weight:600;
      box-shadow:0 10px 20px rgba(0,0,0,.15);
    }

    .emoji{
      position:absolute;
      top:15px;
      right:15px;
      font-size:52px;
      animation:rotateFloat 5s ease-in-out infinite;
    }

    @keyframes rotateFloat{
      0%,100%{
        transform:rotate(0deg) translateY(0);
      }
      50%{
        transform:rotate(10deg) translateY(-8px);
      }
    }

    .card-content{
      padding:28px;
      position:relative;
      z-index:2;
    }

    .meta{
      display:flex;
      align-items:center;
      gap:20px;
      margin-bottom:18px;
      flex-wrap:wrap;
      color:#6b7280;
      font-size:.95rem;
    }

    .meta span{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .card-content h3{
      font-size:1.6rem;
      margin-bottom:15px;
      color:#1f2937;
      transition:.3s;
    }

    .blog-card:hover h3{
      color:#2563eb;
    }

    .card-content p{
      color:#6b7280;
      line-height:1.7;
      margin-bottom:25px;
    }

    .read-more{
      border:none;
      background:none;
      color:#2563eb;
      font-size:1rem;
      font-weight:700;
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      transition:.4s;
    }

    .blog-card:hover .read-more{
      gap:18px;
    }

    .circle-glow{
      position:absolute;
      width:180px;
      height:180px;
      border-radius:50%;
      bottom:-80px;
      right:-80px;
      opacity:0;
      transition:.5s;
    }

    .blog-card:hover .circle-glow{
      opacity:.12;
    }

    /* Newsletter */

    .newsletter{
      margin-top:110px;
      position:relative;
      overflow:hidden;
      border-radius:40px;
      padding:20px 40px;
      background:
      linear-gradient(
        to right,
        #a855f7,
        #ec4899,
        #ef4444
      );

      box-shadow:
      0 20px 50px rgba(0,0,0,.15);
    }

    .newsletter::before{
      content:"";
      position:absolute;
      width:300px;
      height:300px;
      background:rgba(255,255,255,.08);
      border-radius:50%;
      top:-100px;
      left:-100px;
    }

    .newsletter::after{
      content:"";
      position:absolute;
      width:250px;
      height:250px;
      background:rgba(255,255,255,.08);
      border-radius:50%;
      bottom:-80px;
      right:-80px;
    }

    .newsletter-content{
      position:relative;
      z-index:2;
      text-align:center;
      max-width:850px;
      margin:auto;
    }

    .newsletter-icon{
      font-size:30px;
      margin-bottom:25px;
      animation:bounce 3s infinite;
    }

    .newsletter h3{
   font-size: clamp(2rem, 4vw, 2rem);
    color: #fff;
    /* margin-bottom: 15px; */
    font-weight: 400;
    }

    .newsletter p{
      color:rgba(255,255,255,.9);
      font-size:1.2rem;
      margin-bottom:25px;
    }

    .newsletter-form-1{
      display:flex;
      gap:15px;
      align-items:center;
      justify-content:center;
      margin:auto;
      flex-wrap:wrap;
    }

    .newsletter-form-1 input{
      /* flex:1; */
      /* min-width:250px; */
      padding:14px 25px;
      border:none;
      border-radius:60px;
      outline:none;
      font-size:1rem;
    }

    .newsletter-form-1 button{
      border:none;
      padding:18px 35px;
      border-radius:60px;
      background:#fff;
      color:#9333ea;
      font-size:1rem;
      font-weight:700;
      cursor:pointer;
      transition:.4s;
      box-shadow:0 10px 25px rgba(0,0,0,.2);
    }

    .newsletter-form-1 button:hover{
      transform:translateY(-4px) scale(1.05);
    }

    /* Topics */

    .topics{
      margin-top:80px;
      text-align:center;
    }

    .topics h3{
      font-size:clamp(2rem,4vw,2rem);
      margin-bottom:40px;
      color:#1f2937;
    }

    .topic-list{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:10px;
    }

    .topic-btn{
      border:none;
      color:#fff;
      padding:10px 10px;
      border-radius:60px;
      display:flex;
      align-items:center;
      gap:12px;
      font-size:13px;
      font-weight:400;
      cursor:pointer;
      box-shadow:0 12px 30px rgba(0,0,0,.12);
      transition:.4s;
    }

    .topic-btn span{
      font-size:20px;
    }

    .topic-btn:hover{
      transform:translateY(-8px) scale(1.05);
    }

    /* Gradients */

    .blue{
      background:linear-gradient(to right,#60a5fa,#06b6d4);
    }

    .pink{
      background:linear-gradient(to right,#f472b6,#ef4444);
    }

    .green{
      background:linear-gradient(to right,#4ade80,#10b981);
    }

    .orange{
      background:linear-gradient(to right,#facc15,#f97316);
    }

    .purple{
      background:linear-gradient(to right,#c084fc,#ec4899);
    }

    .indigo{
      background:linear-gradient(to right,#818cf8,#3b82f6);
    }

    /* Responsive */

    @media(max-width:768px){

      .blog-section{
        padding:70px 15px;
      }

      .card-image{
        height:220px;
      }

      .newsletter{
        padding:50px 25px;
      }

      .newsletter-form{
        flex-direction:column;
      }

      .newsletter-form button{
        width:100%;
      }

      .topic-btn{
        width:100%;
        justify-content:center;
      }
    }