/* =========================================================
   HELP HERO SECTION
========================================================= */

.help-hero{

    min-height: 70vh;

    padding: 140px 8% 80px;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e1b4b,
    #581c87
    );

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;
}



/* =========================
   HERO GLOW EFFECTS
========================= */

.help-hero::before{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    background:
    rgba(124,58,237,0.18);

    filter: blur(120px);

    top: -120px;

    left: -120px;
}


.help-hero::after{

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    background:
    rgba(59,130,246,0.16);

    filter: blur(120px);

    bottom: -150px;

    right: -120px;
}



/* =========================
   HERO CONTENT
========================= */

.help-hero-content{

    position: relative;

    z-index: 1;

    max-width: 900px;
}


.help-hero-content h1{

    font-size: 72px;

    margin-bottom: 25px;

    color: white;
}


.help-hero-content p{

    font-size: 22px;

    line-height: 1.8;

    color:
    rgba(255,255,255,0.85);
}






/* =========================================================
   COMMON SECTIONS
========================================================= */

.faq-section,
.guidelines-section,
.safety-section,
.contact-section{

    padding: 90px 8%;

    background: #050816;
}



/* =========================
   SECTION TITLE
========================= */

.section-title{

    text-align: center;

    margin-bottom: 60px;
}


.section-title h2{

    font-size: 46px;

    color: white;
}






/* =========================================================
   FAQ GRID
========================================================= */

.faq-grid{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap: 30px;
}



/* =========================
   FAQ CARD
========================= */

.faq-card{

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 24px;

    padding: 35px;

    backdrop-filter: blur(12px);

    transition: 0.3s;
}



/* =========================
   FAQ CARD HOVER
========================= */

.faq-card:hover{

    transform: translateY(-8px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.25);
}



/* =========================
   FAQ TITLE
========================= */

.faq-card h3{

    font-size: 26px;

    margin-bottom: 20px;

    color: #c084fc;
}



/* =========================
   FAQ TEXT
========================= */

.faq-card p{

    line-height: 1.9;

    color: #d1d5db;

    font-size: 17px;
}






/* =========================================================
   GUIDELINES SECTION
========================================================= */

.guidelines-container{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap: 30px;
}



/* =========================
   GUIDELINE CARD
========================= */

.guideline-card{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 24px;

    padding: 35px;

    transition: 0.3s;
}



/* =========================
   GUIDELINE HOVER
========================= */

.guideline-card:hover{

    transform: translateY(-8px);

    background:
    rgba(139,92,246,0.12);
}



/* =========================
   GUIDELINE TITLE
========================= */

.guideline-card h3{

    color: #f9fafb;

    font-size: 24px;

    margin-bottom: 18px;
}



/* =========================
   GUIDELINE TEXT
========================= */

.guideline-card p{

    color: #cbd5e1;

    line-height: 1.8;
}






/* =========================================================
   SAFETY SECTION
========================================================= */

.safety-container{

    max-width: 1000px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 25px;
}



/* =========================
   SAFETY TIP
========================= */

.safety-tip{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    padding: 24px 28px;

    border-radius: 18px;

    font-size: 18px;

    color: #e5e7eb;

    line-height: 1.8;

    transition: 0.3s;
}



/* =========================
   SAFETY HOVER
========================= */

.safety-tip:hover{

    transform: translateX(8px);

    background:
    rgba(139,92,246,0.12);
}






/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-card{

    max-width: 750px;

    margin: auto;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 28px;

    padding: 50px;

    text-align: center;

    backdrop-filter: blur(12px);
}



/* =========================
   CONTACT TEXT
========================= */

.contact-card p{

    font-size: 20px;

    color: #e5e7eb;

    line-height: 1.8;
}



/* =========================
   CONTACT INFO
========================= */

.contact-info{

    margin-top: 30px;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.contact-info p{

    color: #c084fc;

    font-size: 18px;
}






/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media(max-width:768px){



    /* =========================
       HERO
    ========================= */

    .help-hero{

        padding: 120px 20px 70px;
    }


    .help-hero-content h1{

        font-size: 48px;
    }


    .help-hero-content p{

        font-size: 18px;
    }



    /* =========================
       SECTION TITLE
    ========================= */

    .section-title h2{

        font-size: 34px;
    }



    /* =========================
       FAQ CARD
    ========================= */

    .faq-card{

        padding: 28px;
    }


    .faq-card h3{

        font-size: 22px;
    }



    /* =========================
       CONTACT CARD
    ========================= */

    .contact-card{

        padding: 35px 22px;
    }


    .contact-card p{

        font-size: 17px;
    }

}