/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#020617;
    color:#ffffff;
    overflow-x:hidden;
    line-height:1.8;
    min-height:100vh;
    position:relative;

}

/* ===========================
   BACKGROUND EFFECTS
=========================== */

body::before{

    content:'';
    position:fixed;

    width:550px;
    height:550px;

    background:
    radial-gradient(circle,#ec489950,transparent 70%);

    top:-180px;
    right:-180px;

    z-index:-2;

}

body::after{

    content:'';
    position:fixed;

    width:550px;
    height:550px;

    background:
    radial-gradient(circle,#06b6d450,transparent 70%);

    bottom:-180px;
    left:-180px;

    z-index:-2;

}

/* ===========================
   HEADER
=========================== */

header{

    width:100%;

    padding:22px 8%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    position:sticky;
    top:0;

    backdrop-filter:blur(15px);

    background:rgba(2,6,23,.75);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:1000;

}

.logo{

    display:flex;
    align-items:center;
    gap:15px;

}

.logo img{

    width:60px;
    height:60px;

}

.logo h2{

    font-size:28px;
    color:#ffffff;
    font-weight:700;

}

.homeBtn{

    color:white;
    text-decoration:none;

    background:#2563eb;

    padding:12px 24px;

    border-radius:12px;

    transition:.3s;

    font-weight:600;

}

.homeBtn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

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

.hero{

    max-width:900px;

    margin:70px auto 50px;

    text-align:center;

    padding:0 20px;

}

.hero h1 {

    font-size: 58px;
    font-weight: 800;
    margin-bottom: 18px;

    background: linear-gradient(90deg, #22d3ee, #ec4899);

    background-clip: text;          /* Standard property */
    -webkit-background-clip: text;  /* Chrome, Edge, Safari */

    color: transparent;             /* Standard */
    -webkit-text-fill-color: transparent;

}

.hero p{

    color:#cbd5e1;

    font-size:18px;

    margin-bottom:40px;

}

/* ===========================
   SEARCH BOX
=========================== */

#searchBox{

    width:100%;

    max-width:700px;

    padding:18px 22px;

    border:none;

    outline:none;

    border-radius:18px;

    font-size:17px;

    color:white;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

}

#searchBox::placeholder{

    color:#94a3b8;

}

#searchBox:focus{

    border-color:#22d3ee;

    box-shadow:0 0 18px rgba(34,211,238,.25);

}

/* ===========================
   CATEGORY
=========================== */

.category{

    width:90%;

    max-width:1100px;

    margin:60px auto;

}

.category h2{

    font-size:34px;

    margin-bottom:25px;

    color:#22d3ee;

    border-left:5px solid #ec4899;

    padding-left:18px;

}

/* ===========================
   ACCORDION
=========================== */

.accordion{

    margin-bottom:18px;

    border-radius:18px;

    overflow:hidden;

    background:rgba(15,23,42,.85);

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

}

.accordion:hover{

    border-color:#22d3ee;

    transform:translateY(-2px);

}

.accordion-btn{

    width:100%;

    padding:22px 28px;

    background:none;

    border:none;

    color:white;

    font-size:20px;

    font-weight:600;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:.3s;

}

.accordion-btn:hover{

    color:#22d3ee;

}

/* Plus Icon */

.accordion-btn::after{

    content:"+";

    font-size:30px;

    color:#22d3ee;

    transition:.35s;

}

/* When Active */

.accordion.active .accordion-btn::after{

    transform:rotate(45deg);

}

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

.accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

    padding:0 30px;

}

.accordion-content img{

    width:100%;

    max-width:700px;

    display:block;

    margin:30px auto;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

}

.accordion-content p{

    color:#cbd5e1;

    margin-bottom:20px;

    font-size:16px;

}

/* ======================================
   TIP BOX
====================================== */

.tip{

    margin:25px 0;

    padding:18px 22px;

    background:rgba(34,211,238,.10);

    border-left:5px solid #22d3ee;

    border-radius:12px;

    color:#dbeafe;

    font-size:15px;

}

/* ======================================
   NOTE BOX
====================================== */

.note{

    margin:25px 0;

    padding:18px 22px;

    background:rgba(236,72,153,.10);

    border-left:5px solid #ec4899;

    border-radius:12px;

    color:#f8fafc;

    font-size:15px;

}

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

footer{

    margin-top:80px;

    padding:50px 20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(15,23,42,.55);

}

footer img{

    width:70px;

    margin-bottom:15px;

}

footer h3{

    font-size:28px;

    margin-bottom:10px;

    color:#22d3ee;

}

footer p{

    color:#94a3b8;

    font-size:15px;

}

/* ======================================
   IMAGE EFFECT
====================================== */

.accordion-content img{

    transition:.35s;

}

.accordion-content img:hover{

    transform:scale(1.02);

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

}

/* ======================================
   LINKS
====================================== */

.accordion-content a{

    color:#38bdf8;

    text-decoration:none;

    font-weight:600;

}

.accordion-content a:hover{

    text-decoration:underline;

}

/* ======================================
   TEXT SELECTION
====================================== */

::selection{

    background:#22d3ee;

    color:#020617;

}

/* ======================================
   SCROLLBAR
====================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0f172a;

}

::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#475569;

}

/* ======================================
   SMOOTH OPEN ANIMATION
====================================== */

.accordion.active{

    box-shadow:0 0 18px rgba(34,211,238,.12);

}

.accordion.active .accordion-btn{

    color:#22d3ee;

}

/* ======================================
   SEARCH HIGHLIGHT
====================================== */

.highlight{

    border:2px solid #22d3ee !important;

    box-shadow:0 0 20px rgba(34,211,238,.25);

}

.help-table{

    width:100%;
    border-collapse:collapse;
    margin:25px 0;

    background:rgba(255,255,255,.04);

    border-radius:12px;
    overflow:hidden;

}

.help-table th{

    background:#2563eb;

    color:white;

    padding:14px;

    text-align:left;

    font-size:16px;

}

.help-table td{

    padding:14px;

    border-bottom:1px solid rgba(255,255,255,.08);

    color:#e2e8f0;

}

.help-table tr:hover{

    background:rgba(255,255,255,.06);

}

.help-table tr:last-child td{

    border-bottom:none;

}

@media(max-width:768px){

    .help-table{

        display:block;
        overflow-x:auto;
        white-space:nowrap;

    }

}

/* ======================================
   MOBILE
====================================== */

@media(max-width:900px){

    header{

        padding:18px 5%;

    }

    .logo h2{

        font-size:22px;

    }

    .logo img{

        width:50px;
        height:50px;

    }

    .homeBtn{

        padding:10px 18px;

        font-size:14px;

    }

    .hero{

        margin-top:50px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

    .category{

        width:95%;

    }

    .category h2{

        font-size:28px;

    }

    .accordion-btn{

        font-size:18px;

        padding:18px 22px;

    }

}

@media(max-width:600px){

    header{

        flex-direction:column;

        gap:15px;

    }

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:15px;

    }

    #searchBox{

        padding:15px 18px;

        font-size:15px;

    }

    .category h2{

        font-size:24px;

    }

    .accordion-btn{

        font-size:16px;

        text-align:left;

    }

    .accordion-content{

        padding:0 18px;

    }

    .accordion-content img{

        margin:20px auto;

    }

    .tip,
    .note{

        padding:15px;

        font-size:14px;

    }

    footer{

        padding:40px 15px;

    }

    footer h3{

        font-size:22px;

    }

}

/* ======================================
   LARGE SCREENS
====================================== */

@media(min-width:1400px){

    .hero{

        max-width:1100px;

    }

    .category{

        max-width:1250px;

    }

}