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

body{
background:#f6f7fb;
color:#333;
line-height:1.6;
}

.container{
width:1100px;
margin:auto;
}

header{
background:#111;
color:#fff;
padding:15px 0;
}

header h1{
font-size:26px;
}

nav{
margin-top:10px;
}

nav a{
color:#fff;
margin-right:20px;
text-decoration:none;
font-size:15px;
}

.hero{
background:#0f172a;
color:#fff;
padding:60px 20px;
text-align:center;
}

.hero h2{
font-size:34px;
margin-bottom:10px;
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.card{
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.card img{
width:100%;
}

.card-content{
padding:15px;
}

.card-content h3{
font-size:18px;
margin-bottom:10px;
}

.card-content a{
text-decoration:none;
color:#2563eb;
}

.sidebar{
background:#fff;
padding:20px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.layout{
display:grid;
grid-template-columns:3fr 1fr;
gap:30px;
margin-top:40px;
}

footer{
background:#111;
color:#ccc;
text-align:center;
padding:25px;
margin-top:40px;
}

button{
background:#2563eb;
border:none;
color:#fff;
padding:10px 18px;
border-radius:4px;
cursor:pointer;
}

.review-box{
background:#fff;
padding:25px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
margin-top:30px;
}

.review-box img{
  max-width: 100%;
  height: auto;
  display: block;
}


@media(max-width:900px){

.container{
width:90%;
}

.grid{
grid-template-columns:1fr;
}

.layout{
grid-template-columns:1fr;
}

}

/* FAQ SECTION */

.faq-section{
margin-top:40px;
padding:25px;
background:#ffffff;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

#faq-heading{
font-size:26px;
margin-bottom:20px;
border-bottom:2px solid #eee;
padding-bottom:10px;
}

.faq-item{
margin-bottom:20px;
}

.faq-question{
font-size:18px;
margin-bottom:6px;
color:#222;
}

.faq-answer{
font-size:15px;
line-height:1.7;
color:#444;
}

.faq-question:hover{
color:#2563eb;
}

/* RELATED TOOLS SECTION */

.related-tools{
margin-top:40px;
background:#ffffff;
padding:25px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.related-tools h2{
font-size:24px;
margin-bottom:18px;
border-bottom:2px solid #eee;
padding-bottom:10px;
color:#222;
}

.related-tools ul{
list-style:none;
padding:0;
margin:0;
}

.related-tools li{
padding:10px 0;
border-bottom:1px solid #f0f0f0;
font-size:16px;
}

.related-tools li:last-child{
border-bottom:none;
}

.related-tools a{
text-decoration:none;
color:#2563eb;
font-weight:500;
transition:color 0.2s ease;
}

.related-tools a:hover{
color:#1e40af;
text-decoration:underline;
}

/* Table of Contents Container */
.table-of-contents {
    background: #f6fbf6;
    border: 1px solid #d7ead7;
    border-left: 5px solid #2e7d32;
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
    font-size: 16px;
}

/* Heading */
.table-of-contents h2 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #1b5e20;
}

/* List */
.table-of-contents ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* List items */
.table-of-contents li {
    margin: 8px 0;
}

/* Links */
.table-of-contents a {
    text-decoration: none;
    color: #2e7d32;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Hover effect */
.table-of-contents a:hover {
    color: #1b5e20;
    text-decoration: underline;
}

/* Nested list (if you add H3 items later) */
.table-of-contents ul ul {
    padding-left: 18px;
    margin-top: 5px;
    font-size: 15px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {

    .table-of-contents {
        background: #1f1f1f;
        border-color: #2e7d32;
        border-left-color: #4caf50;
    }

    .table-of-contents h2 {
        color: #81c784;
    }

    .table-of-contents a {
        color: #81c784;
    }

    .table-of-contents a:hover {
        color: #a5d6a7;
    }

}

.related-tools{
background:#1f1f1f;
box-shadow:0 2px 6px rgba(0,0,0,0.5);
}

.related-tools h2{
border-bottom:2px solid #333;
color:#f1f1f1;
}

.related-tools li{
border-bottom:1px solid #333;
}

.related-tools a{
color:#81c784;
}

.related-tools a:hover{
color:#a5d6a7;
}



.breadcrumb{
color:#aaa;
}

.breadcrumb a{
color:#81c784;
}

.breadcrumb a:hover{
color:#a5d6a7;
}

.breadcrumb span{
color:#ddd;
}



/* BREADCRUMB */

.breadcrumb{
margin-top:20px;
margin-bottom:15px;
font-size:14px;
color:#666;
}

.breadcrumb a{
text-decoration:none;
color:#2563eb;
font-weight:500;
transition:color 0.2s ease;
}

.breadcrumb a:hover{
color:#1e40af;
text-decoration:underline;
}

.breadcrumb span{
color:#444;
font-weight:500;
}

/* Review Rating Box */

.review-rating{
display:flex;
align-items:center;
gap:10px;
margin:20px 0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

.rating-score{
font-size:2rem;
font-weight:700;
color:#2e7d32;
}

.rating-stars{
font-size:1.4rem;
color:#f5b301;
letter-spacing:2px;
}

.rating-text{
font-size:0.95rem;
font-weight:600;
color:#555;
background:#f2f2f2;
padding:4px 10px;
border-radius:6px;
}


/* Quick Verdict Section */

.quick-verdict{
background:#f8faf8;
border-left:5px solid #2e7d32;
padding:20px 22px;
margin:25px 0;
border-radius:6px;
}

.quick-verdict h2{
margin-top:0;
font-size:1.4rem;
color:#2e7d32;
}

.quick-verdict p{
margin:10px 0 0;
line-height:1.7;
color:#333;
font-size:1rem;
}

.quick-verdict:hover{
box-shadow:0 4px 14px rgba(0,0,0,0.08);
transition:0.3s ease;
}

@media (max-width:600px){

.review-rating{
flex-wrap:wrap;
gap:6px;
}

.rating-score{
font-size:1.6rem;
}

.rating-stars{
font-size:1.2rem;
}

.quick-verdict{
padding:16px;
}

}


/* Pros and Cons Container */

.pros-cons{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin:30px 0;
}

.pros, .cons{
padding:20px;
border-radius:8px;
}

.pros{
background:#f3faf5;
border-left:5px solid #2e7d32;
}

.cons{
background:#fff6f6;
border-left:5px solid #d32f2f;
}

.pros h3, .cons h3{
margin-top:0;
font-size:1.2rem;
}

.pros ul, .cons ul{
margin:10px 0 0;
padding-left:18px;
line-height:1.7;
}

/* Specifications Table */

.specs{
margin:30px 0;
}

.specs table{
width:100%;
border-collapse:collapse;
font-size:0.95rem;
}

.specs th{
text-align:left;
background:#f4f4f4;
padding:10px;
width:200px;
}

.specs td{
padding:10px;
border-top:1px solid #e5e5e5;
}

.specs tr:nth-child(even){
background:#fafafa;
}

/* Who Should Use Section */

.who-should-buy{
background:#f8faf8;
border-left:5px solid #2e7d32;
padding:20px;
margin:30px 0;
border-radius:6px;
}

.who-should-buy h2{
margin-top:0;
}

.who-should-buy ul{
margin-top:10px;
padding-left:18px;
line-height:1.7;
}

/* Alternatives Table */

.alternatives{
margin:35px 0;
}

.alternatives table{
width:100%;
border-collapse:collapse;
font-size:0.95rem;
}

.alternatives th{
background:#2e7d32;
color:#fff;
text-align:left;
padding:10px;
}

.alternatives td{
padding:10px;
border-top:1px solid #e5e5e5;
}

.alternatives tr:nth-child(even){
background:#f9f9f9;
}

/* How We Tested Section */

.how-we-tested{
background:#f7f9fc;
border-left:5px solid #1976d2;
padding:20px;
margin:30px 0;
border-radius:6px;
}

.how-we-tested h2{
margin-top:0;
}

.how-we-tested p{
margin-top:10px;
line-height:1.7;
}

@media (max-width:700px){

.pros-cons{
grid-template-columns:1fr;
}

.specs th{
width:140px;
}

.alternatives table{
font-size:0.9rem;
}

}