@charset "utf-8";

/* CSS Document */



/* =========================================================

   WEBSITEDEVELOP.IN

   HOME PAGE CSS

========================================================= */





/* =========================

   HERO

========================= */



.hero{

    position:relative;

    overflow:hidden;

    padding:110px 0 100px;

    background:

        radial-gradient(

            circle at 90% 20%,

            rgba(37,99,235,.12),

            transparent 30%

        ),

        radial-gradient(

            circle at 10% 80%,

            rgba(99,102,241,.08),

            transparent 30%

        ),

        #f8fafc;

}



.hero-content{

    position:relative;

    z-index:2;

}



.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#e6f7f1;

    border: 1px solid #BFE9D9;

    color:green;

    padding:8px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:400;

    margin-bottom:22px;

}



.hero-badge span{
width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(0,168,118,0.16);
   

}



.hero h1{

    font-size:58px;

    line-height:1.12;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:24px;

}



.hero h1 span{

    color:var(--primary);

}



.hero-description{

    max-width:650px;

    font-size:18px;

    color:var(--text);

    margin-bottom:32px;

}



.hero-buttons{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}





/* =========================

   HERO CODE CARD

========================= */



.hero-card{

    position:relative;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:22px;

    padding:28px;

    box-shadow:0 25px 70px rgba(15,23,42,.12);

}



.code-window{

    overflow:hidden;

    border-radius:15px;

    background:#0f172a;

}



.code-header{

    display:flex;

    align-items:center;

    gap:7px;

    padding:14px 17px;

    background:#1e293b;

}



.code-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#64748b;

}



.code-content{

    padding:25px;

    color:#cbd5e1;

    font-family:monospace;

    font-size:14px;

    line-height:2;

}



.code-blue{

    color:#60a5fa;

}



.code-green{

    color:#4ade80;

}



.code-purple{

    color:#c084fc;

}





/* =========================

   FLOATING HERO CARDS

========================= */



.floating-card{

    position:absolute;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:0 15px 40px rgba(0,0,0,.1);

    border-radius:12px;

    padding:15px 18px;

    display:flex;

    align-items:center;

    gap:12px;

}



.floating-card i{

    color:var(--primary);

    font-size:24px;

}



.floating-card strong{

    display:block;

    font-size:14px;

}



.floating-card small{

    color:#64748b;

}



.card-one{

    left:-30px;

    bottom:40px;

}



.card-two{

    right:-25px;

    top:35px;

}





/* =========================

   TRUST

========================= */



.trust{

    padding:28px 0;

    border-bottom:1px solid var(--border);

}



.trust-text{

    text-align:center;

    color:#64748b;

    font-size:13px;

    font-weight:600;

}





/* =========================

   HOME RESPONSIVE

========================= */



@media(max-width:991px){



    .hero{

        padding:80px 0;

    }



    .hero h1{

        font-size:43px;

    }



    .hero-card{

        margin-top:50px;

    }



    .card-one{

        left:5px;

    }



    .card-two{

        right:5px;

    }



}



@media(max-width:767px){



    .hero h1{

        font-size:36px;

        letter-spacing:-1px;

    }



    .hero-description{

        font-size:16px;

    }



    .floating-card{

        display:none;

    }







}