:root{--primary:#08a8da;--primary-dark:#0699c3;--primary-color:#08a8da;--secondary-color:#e3e6e8;--card-bg:#fff;--border-color:#dee2e6;--text-color:#333;--primary-blue:#08a8da;--dark-blue:#0699c3;--white:#fff;--light-bg:#f5f7ff}
.tools-grid{scroll-margin-top:100px;min-height:500px;position:relative}
.tool-card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;transition:all .3s ease;min-height:180px;height:auto;overflow:hidden;position:relative;display:block}
.tool-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.1);border-color:#08a8da}
.card-body{min-height:120px;position:relative;padding:1.25rem;display:block}
.icon-wrapper{min-height:80px;display:flex;align-items:center;justify-content:center;position:relative}
.icon-wrapper .fas{color:#08a8da!important}
.badge.bg-success{background-color:#198754!important;color:#fff!important}
.section-title{color:#212020!important;font-weight:600;padding-bottom:10px;margin-bottom:2rem}
.feature-icon .fas{color:#08a8da!important}
.bg-primary{background-color:var(--primary-color)!important}
.text-primary{color:var(--primary-color)!important}
main{position:relative;z-index:1}
.container{position:relative;z-index:1}
.hero{background:linear-gradient(135deg,var(--primary-blue)0,#667eea 100%);color:var(--white);padding:3rem 0;margin:0;border-radius:20px;position:relative;overflow:hidden;min-height:auto;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:0}
.hero-content{max-width:900px;margin:0 auto;padding:0 20px}
.hero h1{font-size:2rem;color:var(--white);font-weight:700;margin-bottom:1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.1);line-height:1.3}
.hero .lead{font-size:1.2rem;color:var(--white);font-weight:400;max-width:800px;text-align:center;margin:0;opacity:.95;line-height:1.6}
.btn-hero{padding:.8rem 2rem;border-radius:50px;font-weight:600;font-size:1.1rem;margin:0 .5rem;transition:all .3s ease;border:2px solid transparent;min-height:50px;display:inline-flex;align-items:center;justify-content:center}
.btn-hero-outline{background:transparent;color:var(--white);border:2px solid var(--white)}
.btn-hero-outline:hover{background:var(--white);color:var(--primary-blue);transform:translateY(-2px)}
.hero-buttons{position:relative;margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@media(max-width:768px){
.hero{padding:2.5rem 0;margin-top:0;min-height:auto}
.hero h1{font-size:1.8rem;line-height:1.3;margin-bottom:1.2rem}
.hero .lead{font-size:1.1rem}
.hero-buttons{flex-direction:column;align-items:center;margin-top:1.5rem}
.btn-hero{width:220px;margin:.5rem 0;font-size:1rem;padding:.7rem 1.8rem}
}
@media(max-width:480px){
.hero{padding:2rem 1rem;min-height:200px}
.hero h1{font-size:1.5rem;margin-bottom:1rem}
.hero .lead{display:none}
.hero-buttons{margin-top:1.2rem;gap:.5rem}
.btn-hero{width:200px;margin:.3rem 0;font-size:.95rem;padding:.6rem 1.5rem;min-height:45px}
}
@media(max-width:360px){
.hero{padding:1.5rem .8rem;min-height:180px}
.hero h1{font-size:1.3rem;margin-bottom:.8rem}
.hero-buttons{margin-top:1rem}
.btn-hero{width:180px;font-size:.9rem;padding:.5rem 1.2rem;min-height:42px}
}
@media(min-width:992px){.tools-grid .row{display:flex!important;flex-wrap:wrap!important;margin-left:-12px!important;margin-right:-12px!important}
.tools-grid .row>.col-lg-4{flex:0 0 33.333333%!important;max-width:33.333333%!important;padding-left:12px!important;padding-right:12px!important;margin-bottom:1.5rem!important}
.tool-card{min-height:180px!important;height:auto!important;margin-bottom:0!important}
.card-body{padding:1.25rem!important;display:block!important;min-height:120px!important}
.tool-card .card-text{display:block!important}
.icon-wrapper{min-height:80px!important;margin-bottom:1rem!important}
.icon-wrapper .fas.fa-3x{font-size:3rem!important}
.tool-card .card-title{font-size:1.1rem!important;margin-bottom:.75rem!important;text-align:center!important}
.badge{font-size:.8rem!important;margin-top:.5rem!important}}

@media(max-width:991px) and (min-width:769px){.tools-grid .row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1.5rem!important}
.tools-grid .row>[class*="col-"]{width:100%!important;max-width:100%!important;flex:none!important;padding:0!important}
.tool-card .card-text{display:block!important}
.tool-card{min-height:160px!important;height:auto!important}}

@media(max-width:768px){.tools-grid .row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-left:0!important;margin-right:0!important}
.tools-grid .row>[class*="col-"]{width:100%!important;max-width:100%!important;flex:none!important;padding:0!important}
.tool-card .card-text{display:none!important}
.tool-card{min-height:120px!important;height:120px!important;margin-bottom:0!important}
.card-body{padding:10px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;min-height:100px!important}
.icon-wrapper{min-height:40px!important;margin-bottom:6px!important}
.icon-wrapper .fas.fa-3x{font-size:1.5rem!important}
.icon-wrapper .fas.fa-arrow-right{font-size:.8rem!important;margin:0 4px!important}
.badge{align-self:center;margin-top:3px!important;font-size:.6rem!important;padding:.25em .5em!important}
.tool-card .card-title{font-size:.8rem!important;margin-bottom:4px!important;text-align:center!important;line-height:1.2!important}
.section-title{font-size:1.3rem;margin-bottom:1.2rem}
.hero .display-4{font-size:1.6rem}
.hero .lead{font-size:.9rem}}

@media(max-width:480px){.tools-grid .row{grid-template-columns:1fr 1fr!important;gap:8px!important}
h1 {font-size: 1.3rem;}
.card-header h1 {font-size: 1.3rem;}
.tool-card{min-height:110px!important;height:110px!important}
.card-body{padding:8px!important;min-height:95px!important}
.icon-wrapper{min-height:35px!important;margin-bottom:4px!important}
.icon-wrapper .fas.fa-3x{font-size:1.3rem!important}
.tool-card .card-title{font-size:.75rem!important;margin-bottom:3px!important}
.badge{font-size:.55rem!important;margin-top:2px!important}
.section-title{font-size:1.2rem;margin-bottom:1rem}}

/* Features section mobile optimization for ≤450px */
@media(max-width:450px){
.features .col-md-4 p {display:none!important;}
.features .row {display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:8px!important;margin-left:0!important;margin-right:0!important}
.features .col-md-4 {width:100%!important;max-width:100%!important;flex:none!important;padding:0!important;margin-bottom:0!important}
.features .feature-icon {margin-bottom:8px!important;}
.features .feature-icon .fa-2x {font-size:1.2rem!important;}
.features h3 {font-size:0.75rem!important;margin-bottom:0!important;text-align:center!important;line-height:1.2!important;}

/* Ensure all three feature columns are visible */
.features .col-md-4:nth-child(1),
.features .col-md-4:nth-child(2),
.features .col-md-4:nth-child(3) {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
}
}

/* Footer mobile optimization for ≤450px */
@media(max-width:450px){
/* Hide Useful Tools section completely */
.col-md-4:nth-child(2) {display:none!important;}
p{font-size:0.9rem!important;}
/* Hide Quick Links heading but keep the links section */
.col-md-4:nth-child(3) .footer-heading {display:none!important;}

/* Move Quick Links to copyright section with reduced space */
.border-top.pt-3 {position:relative;padding-top:0.3rem!important;}

/* Add margin to footer logo paragraph and reduce font size */
.col-md-4:first-child p {
    margin-left:15px!important;
    margin-right:15px!important;
    margin-bottom:0.6rem!important;
    font-size:0.8rem!important;
    line-height:1.3!important;
}

/* Show the original quick links in copyright section with slashes and reduced margin */
.col-md-4:nth-child(3) .footer-links {
    display:flex!important;
    justify-content:center!important;
    gap:6px!important;
    flex-wrap:wrap!important;
    margin-bottom:5px!important;
}

.col-md-4:nth-child(3) .footer-links li {
    margin-bottom:0!important;
    display:flex!important;
    align-items:center!important;
}

/* Add slashes between links except for the last one */
.col-md-4:nth-child(3) .footer-links li:not(:last-child)::after {
    content:'|';
    margin-left:6px;
    color:rgba(255,255,255,.6);
}

.col-md-4:nth-child(3) .footer-links a {
    font-size:0.75rem!important;
    color:rgba(255,255,255,.8)!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}

.col-md-4:nth-child(3) .footer-links a:hover {
    color:#08a8da!important;
}

/* Reduce copyright text size and margin */
.copyright {
    font-size:0.75rem!important;
    margin-top:3px!important;
    margin-bottom:0!important;
}
}

@media(max-width:360px){.tools-grid .row{gap:6px!important}
.tool-card{min-height:100px!important;height:100px!important}
.card-body{padding:6px!important;min-height:90px!important}
.tool-card .card-title{font-size:.7rem!important}
.badge{font-size:.5rem!important}
/* Features section for very small screens */
.features h3 {font-size:0.7rem!important;}
.features .feature-icon .fa-2x {font-size:1.1rem!important;}
/* Footer adjustments for very small screens */
.col-md-4:nth-child(3) .footer-links {gap:4px!important;}
.col-md-4:nth-child(3) .footer-links a {font-size:0.7rem!important;}
.col-md-4:first-child p {font-size:0.75rem!important;}
.col-md-4:nth-child(3) .footer-links li:not(:last-child)::after {margin-left:4px;}
.copyright {font-size:0.7rem!important;}
}

footer{background-color:#2c3e50;border-top:2px solid #08a8da;color:#fff;min-height:200px;position:relative;margin-top:3rem;width:100%}
footer .container{max-width:1140px;margin:0 auto;padding:0 15px}
footer .row{align-items:start!important}
.footer-section{margin-bottom:0}
.footer-links li{margin-bottom:12px!important;line-height:1.4}
.footer-links a{color:rgba(255,255,255,.8)!important;text-decoration:none;transition:all .3s ease;display:block;padding:2px 0;font-size:1rem}
.footer-links a:hover{color:#08a8da!important;transform:translateX(5px)}
footer a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .3s ease;display:inline-block}
footer a:hover{color:#08a8da}
.social-links{margin-top:1rem}
.social-links a{font-size:1.5rem;margin-right:1rem;transition:transform .3s ease;color:#fff;min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
.social-links a:hover{transform:translateY(-3px);color:#08a8da}
.footer-heading{color:#08a8da!important;font-weight:600;font-size:1.4rem;margin-bottom:1.5rem!important}
footer .border-top{border-color:rgba(255,255,255,.1)!important}
.footer-logo{height:50px;max-width:100%;border-radius:8px;transition:transform .3s ease;margin-bottom:1rem!important}
.footer-logo:hover{transform:scale(1.05)}

.border-primary{border-color:var(--primary-color)}
.long-article{margin-top:12px;line-height:1.7;color:#0f172a;background:#fff;padding:14px;border-radius:8px;border:1px solid #eef2ff}
.faq-section details summary{cursor:pointer;padding:10px;border:1px solid #eef2ff;border-radius:6px;margin-bottom:8px;background:#fff}
h1{font-size:1.8rem}
h2{font-size:1.6rem;color:#2a2b2b;margin:1rem 0 1rem}
h3{font-size:1.4rem;color:#2a2b2b;margin:1rem 0 1rem}
h4{font-size:1.2rem;color:#2a2b2b;margin:1rem 0 1rem}
p{font-size:1rem;text-align:justify;margin-bottom:1rem;color:#333;line-height:1.6}
ul,ol{font-size:1rem;margin-left:1.5rem;margin-bottom:1rem}
li{margin-bottom:.6rem;line-height:1.45}
.form-control{background-color:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color)}
.form-control:focus{background-color:var(--card-bg);color:var(--text-color);border-color:var(--card-bg);box-shadow:0 0 0 .25rem rgba(8,168,218,.25)}
.alert{border-radius:8px}
.tools-sidebar{position:relative;top:auto;max-height:none;overflow:visible}
.tools-sidebar .list-group-item{border:none;margin:1px 0;display:flex;align-items:center;transition:all .2s ease;position:relative;letter-spacing:.5px}
.tools-sidebar .list-group-item.has-border::after{content:'';position:absolute;bottom:0;left:15px;right:15px;height:1px;background-color:rgba(0,0,0,.1)}
.tools-sidebar .list-group-item.active{background-color:var(--primary-color);border:3px solid #fff;border-radius:10px}
.tools-sidebar .list-group-item:hover:not(.active){transform:translateX(5px)}

@media(max-width:991px){.tools-sidebar{margin-top:2rem;position:relative}}
@media(max-width:768px){footer .col-md-4{margin-bottom:2rem;text-align:center}
.footer-links{display:inline-block;text-align:left}
.footer-links li{margin-bottom:8px!important}
.social-links{margin-top:1.5rem}
.footer-heading{margin-bottom:1rem!important}}
@media(max-width:767px){.footer-logo{display:block;margin:0 auto}
.social-links{display:flex;justify-content:center}
.social-links a{margin-right:.75rem}}
@media(max-width:576px){.form-switch{margin-right:.5rem}
footer .col-md-4{margin-bottom:1.5rem}
footer{padding:2rem 0}
.footer-logo{margin-bottom:.5rem!important}}

.tools-grid .row{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}
.tools-grid .row.g-4{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}