/* ==========================================
   WebToolRush - category.css
   Category Pages Only
========================================== */

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Body */

body{
    background:#0f172a;
    color:#fff;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

/* Container */

.container{
    max-width:1280px;
    margin:auto;
    padding:0 20px;
}

/* ==========================================
   CATEGORY HERO / BANNER
========================================== */

.about-banner{
    margin-top:120px;
    margin-bottom:60px;
}

.about-banner img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
}

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

.page-content{

    max-width:1180px;

    margin:auto;

    padding-bottom:80px;

}

.page-content h1{

    font-size:52px;

    line-height:1.2;

    text-align:center;

    margin-bottom:25px;

}

.page-content>p{

    max-width:900px;

    margin:0 auto 25px;

    text-align:center;

    color:#cbd5e1;

    line-height:2;

    font-size:17px;

}

.page-content h2{

    font-size:36px;

    margin-top:70px;

    margin-bottom:18px;

    text-align:center;

}

.page-content h3{

    font-size:24px;

    margin-bottom:12px;

}

.page-content p{

    color:#cbd5e1;

    line-height:1.9;

}

.page-content ul{

    margin:25px 0;

    padding-left:22px;

}

.page-content li{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:10px;

}

/* ==========================================
   SECTION SPACING
========================================== */

.page-content section{

    margin-top:70px;

}

.section-title{

    text-align:center;

    margin-bottom:45px;

}

.section-title h2{

    margin-top:0;

}

.section-title p{

    max-width:760px;

    margin:auto;

    color:#94a3b8;

}

/* ==========================================
   RESPONSIVE TYPOGRAPHY
========================================== */

@media(max-width:991px){

.page-content h1{

    font-size:42px;

}

.page-content h2{

    font-size:30px;

}

}

@media(max-width:768px){

.about-banner{

    margin-top:95px;

}

.page-content{

    padding-bottom:60px;

}

.page-content h1{

    font-size:34px;

}

.page-content h2{

    font-size:28px;

    margin-top:55px;

}

.page-content>p{

    font-size:16px;

}

}
/* ==========================================
   CATEGORY TOOL CARDS
========================================== */

.offer-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:28px;

    margin:45px 0 60px;

}

/* ================= TOOL CARD ================= */

.offer-grid .tool-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    text-decoration:none;

    background:#1e293b;

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

    border-radius:22px;

    padding:35px 28px;

    transition:.35s ease;

    overflow:hidden;

    color:#fff;

}

.offer-grid .tool-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#60a5fa,#8b5cf6);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.offer-grid .tool-card:hover{

    transform:translateY(-8px);

    border-color:#8b5cf6;

    box-shadow:0 18px 40px rgba(139,92,246,.18);

}

.offer-grid .tool-card:hover::before{

    transform:scaleX(1);

}

/* ================= ICON ================= */

.offer-grid .tool-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(139,92,246,.12);

    font-size:34px;

    margin-bottom:22px;

}

.offer-grid .tool-card h3{

    font-size:24px;

    margin-bottom:12px;

    color:#fff;

}

.offer-grid .tool-card p{

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;

}

/* ==========================================
   OFFER / FEATURE CARDS
========================================== */

.offer-card{

    background:#1e293b;

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

    border-radius:22px;

    padding:32px;

    text-align:center;

    transition:.35s ease;

}

.offer-card:hover{

    transform:translateY(-8px);

    border-color:#8b5cf6;

    box-shadow:0 18px 40px rgba(139,92,246,.18);

}

.offer-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 22px;

    border-radius:18px;

    background:rgba(139,92,246,.12);

    font-size:34px;

}

.offer-card h3{

    color:#fff;

    font-size:23px;

    margin-bottom:12px;

}

.offer-card p{

    color:#94a3b8;

    line-height:1.8;

}

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

@media(max-width:991px){

.offer-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.offer-grid{

    grid-template-columns:1fr;

}

.offer-grid .tool-card{

    padding:28px;

}

.offer-card{

    padding:28px;

}

.offer-grid .tool-icon,
.offer-icon{

    width:60px;

    height:60px;

    font-size:28px;

}

.offer-grid .tool-card h3,
.offer-card h3{

    font-size:21px;

}

}

/* ==========================================
   FAQ SECTION
========================================== */

.faq-item{

    background:#1e293b;

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

    border-radius:20px;

    padding:28px;

    margin-bottom:20px;

    transition:.35s ease;

}

.faq-item:hover{

    transform:translateY(-5px);

    border-color:#8b5cf6;

    box-shadow:0 15px 35px rgba(139,92,246,.15);

}

.faq-item h3{

    color:#fff;

    font-size:22px;

    margin-bottom:12px;

}

.faq-item p{

    color:#cbd5e1;

    line-height:1.9;

    margin:0;

}

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

.page-content p{

    color:#cbd5e1;

    line-height:2;

    margin-bottom:22px;

}

.page-content strong{

    color:#fff;

    font-weight:700;

}

.page-content a{

    color:#60a5fa;

    text-decoration:none;

}

.page-content a:hover{

    color:#8b5cf6;

}

.page-content ul{

    margin:25px 0;

    padding-left:25px;

}

.page-content ul li{

    color:#cbd5e1;

    margin-bottom:12px;

    line-height:1.8;

}

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

.page-content img{

    max-width:100%;

    border-radius:20px;

    margin:35px auto;

    display:block;

}

/* ==========================================
   TABLE
========================================== */

.page-content table{

    width:100%;

    border-collapse:collapse;

    margin:35px 0;

}

.page-content table th{

    background:#8b5cf6;

    color:#fff;

    padding:14px;

}

.page-content table td{

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

    padding:14px;

    color:#cbd5e1;

}

.page-content table tr:nth-child(even){

    background:#1e293b;

}

/* ==========================================
   BLOCKQUOTE
========================================== */

.page-content blockquote{

    border-left:4px solid #8b5cf6;

    background:#1e293b;

    padding:20px 25px;

    margin:30px 0;

    color:#cbd5e1;

    font-style:italic;

    border-radius:12px;

}

/* ==========================================
   HORIZONTAL LINE
========================================== */

.page-content hr{

    border:none;

    height:1px;

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

    margin:45px 0;

}

/* ==========================================
   BUTTONS
========================================== */

.page-content .primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:14px;

    background:linear-gradient(135deg,#4f46e5,#9333ea);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.page-content .primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(139,92,246,.25);

}

/* ==========================================
   SPACING
========================================== */

.page-content > *:first-child{

    margin-top:0;

}

.page-content > *:last-child{

    margin-bottom:0;

}

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

@media(max-width:768px){

.page-content{

    padding-bottom:60px;

}

.page-content h1{

    font-size:34px;

}

.page-content h2{

    font-size:28px;

}

.page-content p{

    font-size:16px;

}

.faq-item{

    padding:22px;

}

.faq-item h3{

    font-size:20px;

}

.page-content table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

}
/* ==========================================
   CONTACT PAGE
========================================== */

.contact-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    margin:45px 0 70px;

}

.contact-card{

    background:#1e293b;

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

    border-radius:22px;

    padding:35px 30px;

    text-align:center;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:#8b5cf6;

    box-shadow:0 18px 40px rgba(139,92,246,.18);

}

.contact-icon{

    width:72px;

    height:72px;

    margin:0 auto 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    border-radius:18px;

    background:rgba(139,92,246,.12);

}

.contact-card h3{

    margin-bottom:12px;

    font-size:24px;

}

.contact-card p{

    color:#94a3b8;

    line-height:1.8;

    margin-bottom:15px;

}

.contact-card a{

    color:#8b5cf6;

    text-decoration:none;

    font-weight:600;

}

/* ==========================================
   CONTACT FORM
========================================== */

.contact-form{

    max-width:900px;

    margin:45px auto 70px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 20px;

    background:#1e293b;

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

    border-radius:16px;

    color:#fff;

    font-size:16px;

    outline:none;

    transition:.3s;

    font-family:inherit;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#8b5cf6;

    box-shadow:0 0 0 4px rgba(139,92,246,.15);

}

.contact-form textarea{

    grid-column:1 / -1;

    resize:vertical;

    min-height:180px;

}

.contact-form button{

    grid-column:1 / -1;

    padding:18px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#4f46e5,#9333ea);

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.contact-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(139,92,246,.25);

}

@media(max-width:991px){

.contact-grid{

    grid-template-columns:1fr;

}

.contact-form{

    grid-template-columns:1fr;

}

}

/* ==========================================
   END OF CATEGORY CSS
========================================== */