/* /* style_howtouse.css */ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f5f7fb;
    color:#333;
    padding-top:70px;
}

/* CONTAINER */

.container{
    max-width:950px;
    margin:auto;
    padding:10px;
}
/* HEADER */


.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:#1200ff;
    box-shadow:0 3px 15px rgba(0,0,0,.15);
}

.header-container{
    max-width:1275px;
    margin:auto;
    padding:10px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo-area h2{
    color:#fff;
    font-size:27px;
    font-weight:700;
    margin:0;
}

.logo-area p{
    color:#fff;
    font-size:15px;
    margin-top:4px;
}

.main-nav ul{
    display:flex;
    list-style:none;
    gap:40px;
    margin:0;
    padding:0;
}

.main-nav a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    position:relative;
}

.main-nav a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#fff;
    transition:.3s;
}

.main-nav a:hover::after{
    width:100%;
}

@media(max-width:768px){

    .header-container{
        flex-direction:column;
        gap:15px;
    }

    .main-nav ul{
        gap:18px;
        flex-wrap:wrap;
        justify-content:center;
    }
}

.section-title{
    text-align:center;
    margin-bottom:20px;
}

.section-title h2{
    font-size:30px;
    color:#0d6efd;
}
/* ==========================
   STEP CARD
========================== */

.step{
    background:#fff;
    border-radius:15px;
    margin-bottom:5px;
    padding:5px;
    display:flex;
    align-items:flex-start;
    gap:5px;
    border-left:5px solid #1200ff;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    transition:all .35s ease;
}

/* HOVER EFFECT */

.step:hover{
    background:linear-gradient(135deg,#1200ff,#4a7dff);
    color:#fff;
    transform:translateY(-5px);
     
    border-left:5px solid #ff9800;
}

.step:hover p{
    color:#fff;
}

.step:hover strong{
    color:#fff;
}

/* STEP NUMBER */

.step-number{
    min-width:25px;
    width:25px;
    height:25px;
    background:#1200ff;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
    font-weight:bold;
    transition:.35s;
}

 
/* STEP CONTENT */

.step-content{
    flex:1;
}

.step-content p{
    line-height:1.8;
}

/* ==========================
   IMPORTANT NOTE
========================== */

.note-box{
    background:#fff8e1;
    border-left:6px solid #ff9800;
    border-radius:12px;
    padding:25px;
    margin-top:35px;
}

.note-box h3{
    color:#ff5722;
    margin-bottom:10px;
}

/* ==========================
   SUPPORT BOX
========================== */

.support-box{
    background:#fff;
    margin-top:25px;
    padding:25px;
    border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.support-box h3{
    color:#1200ff;
    margin-bottom:12px;
}

.support-box p{
    margin-bottom:8px;
}

/* ==========================
   FOOTER
========================== */

.footer{
    background:#1200ff;
    color:#fff;
    text-align:center;
    padding:20px;
    margin-top:40px;
}