body { font-family: 'Poppins', sans-serif; color: #111827; margin: 0; padding: 0; }
section { position: relative; overflow: hidden; }

.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.counter { font-weight: bold; color: #0d6efd; font-size: 36px; }

.floating { animation: float 6s ease-in-out infinite; }
@keyframes float {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}


.hero { padding: 50px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; background: linear-gradient(135deg, #e0f2ff, #ffffff); align-items: center; }
.hero h1 { font-size: 40px; margin-bottom: 25px; line-height: 1.2; }
.hero p { font-size: 16px; color: #4b5563; line-height: 1.8; margin-bottom: 40px; }
.hero a { display: inline-block; padding: 16px 40px; background: #0d6efd; color: #fff; border-radius: 12px; text-decoration: none; font-weight: 600; transition: 0.3s; }
.hero a:hover { background: #0b5ed7; transform: scale(1.05); }

.hero::before, .hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
}
.hero::before { width: 200px; height: 200px; background: #0d6efd; top: -50px; left: -50px; animation: float 8s ease-in-out infinite; }
.hero::after { width: 300px; height: 300px; background: #06c0ea; bottom: -100px; right: -100px; animation: float 10s ease-in-out infinite; }

.features { display: grid; grid-template-columns: repeat(4,1fr); gap: 35px; padding: 70px 80px; background: #f9fafb; }
.feature-card { background: #ffffff; padding: 30px 30px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.feature-card:hover { transform: translateY(-15px); box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.feature-card img { width: 70px; margin-bottom: 25px; }
.feature-card h3 { font-size: 18px; margin-bottom: 20px; }
.feature-card p { font-size: 15px; color: #6b7280; line-height: 1.7; }

.facts { padding: 70px 80px; background: linear-gradient(135deg, #eef2ff, #f9fafb); display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; text-align: center; }
.fact-card { background: #fff; padding: 40px 30px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); width: 22%;transition: transform 0.3s; }
.fact-card:hover { transform: translateY(-10px); }
.fact-card h2 { font-size: 36px; margin-bottom: 10px; }
.fact-card p { font-size: 16px; color: #6b7280; line-height: 1.5; }

.section { padding: 70px 80px; display: flex; align-items: center; gap: 50px; background: #fff; }
.section:nth-child(even) { flex-direction: row-reverse; background: #f3f4f6; }
.section img { width: 50%; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); transition: transform 0.5s; }
.section img:hover { transform: scale(1.05); }
.section-content { width: 50%; }
.section-content h2 { font-size: 40px; margin-bottom: 25px; }
.section-content p { font-size: 18px; line-height: 2; color: #4b5563; margin-bottom: 30px; }
.section-content a { display: inline-block; margin-top: 20px; padding: 14px 36px; background: #0d6efd; color: #fff; border-radius: 10px; text-decoration: none; font-weight: 600; transition: 0.3s; }
.section-content a:hover { background: #0b5ed7; transform: scale(1.05); }

.steps { padding: 70px 80px; background: #fff; text-align: center; }
.steps h2 { font-size: 38px; margin-bottom: 50px; }
.step-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 35px; }
.step-card { background: #f9fafc; padding: 30px 30px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); transition: transform 0.3s; }
.step-card:hover { transform: translateY(-10px); }
.step-card h3 { font-size: 18px; margin-bottom: 15px; }
.step-card p { font-size: 15px; color: #6b7280; line-height: 1.6; }

.blog-section { padding: 70px 80px; background: #f3f4f6; text-align: center; }
.blog-section h2 { font-size: 38px; margin-bottom: 50px; }
.blog-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.blog-card { background: #fff; padding: 18px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); transition: transform 0.3s; }
.blog-card:hover { transform: translateY(-10px); }
.blog-card h3 { font-size: 18px; margin-bottom: 15px; }
.blog-card p { font-size: 14px; color: #6b7280; line-height: 1.6; }

.partners { padding: 70px 80px; text-align: center; }
.partners h2 { font-size: 38px; margin-bottom: 50px; }
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.partner-logos img { width: 100px;height:100px; filter: grayscale(100%); transition: filter 0.3s, transform 0.3s; border-radius: 50%; cursor: pointer;}
.partner-logos img:hover { filter: grayscale(0); transform: scale(1.1); }

.newsletter { padding: 80px; background: #0d6efd; text-align: center; color: #fff; border-radius: 20px; margin: 80px; }
.newsletter h2 { font-size: 36px; margin-bottom: 25px; }
.newsletter p { font-size: 18px; margin-bottom: 25px; }
.newsletter input { padding: 12px 20px; border-radius: 10px; border: none; margin-right: 10px; width: 300px; max-width: 80%; }
.newsletter button { padding: 12px 24px; border-radius: 10px; background: #fff; color: #0d6efd; border: none; font-weight: 600; cursor: pointer; transition: 0.3s; }
.newsletter button:hover { background: #e2e6ea; }

/* ===========================
   TABLET RESPONSIVE (≤ 991px)
=========================== */
@media (max-width: 991px) {

    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 30px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero p {
        font-size: 15px;
    }

    .features,
    .step-cards,
    .blog-cards {
        grid-template-columns: repeat(2, 1fr);
        padding: 50px 30px;
    }

    .facts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 50px 30px;
    }

    .section {
        flex-direction: column;
        padding: 50px 30px;
        text-align: center;
    }

    .section img,
    .section-content {
        width: 100%;
    }

    .section-content h2 {
        font-size: 32px;
    }

    .steps h2,
    .blog-section h2,
    .partners h2 {
        font-size: 30px;
    }
    .steps {
    padding: 30px 30px;
    
}
.blog-section {
    padding: 30px 30px;
  
}

    .newsletter {
        margin: 40px 20px;
        padding: 50px 30px;
    }
    .fact-card {
   
    width: 100%;
   
}
}


@media (max-width: 991px){
  .step-cards{
    padding:0px;
  }
  .blog-cards{
    padding:0px;
  }
    
}
/* ===========================
   MOBILE RESPONSIVE (≤ 576px)
=========================== */
@media (max-width: 576px) {

    body {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 30px;
        line-height: 1.3;
    }

    .hero a {
        padding: 14px 28px;
        font-size: 14px;
    }

    .features,
    .step-cards,
    .blog-cards,
    .facts {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card,
    .step-card,
    .blog-card,
    .fact-card {
        padding: 25px 20px;
    }

    .feature-card h3,
    .step-card h3,
    .blog-card h3 {
        font-size: 17px;
    }

    .feature-card p,
    .step-card p,
    .blog-card p {
        font-size: 14px;
    }

    .section-content h2 {
        font-size: 26px;
    }

    .partners {
        padding: 40px 20px;
    }

    .partner-logos img {
        width: 80px;
        height: 80px;
    }

    .newsletter input {
    max-width: 100%;  
    width:100%;   
     margin-bottom: 15px;
        
    }

    .newsletter button {
        width: 100%;
    }
    .newsletter h2 {
    font-size: 26px;
}
}