/* =========================
TABLET
========================= */

@media(max-width:992px){

/* HERO */

.hero{

min-height:auto;

padding:
110px 24px 70px;
}

.hero-container{

padding:0;

flex-direction:column;

text-align:center;
}

.hero-left{

max-width:100%;
}

/* TITLE */

.hero h1{

font-size:58px;

line-height:1.1;

margin-bottom:20px;
}

.hero p{

font-size:20px;

line-height:1.6;
}

/* SEARCH */

.hero-search{

max-width:100%;

margin:auto;
}

/* FEATURES */

.hero-features{

justify-content:center;

gap:20px;
}

/* TOOLS */

.tool-grid{

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

.category-grid{

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

}

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

@media(max-width:768px){

/* BODY */

body{
overflow-x:hidden;
}

/* HERO */

.hero{

padding:
95px 18px 60px;

min-height:auto;
}

/* TITLE */

.hero h1{

font-size:46px;

line-height:1.08;

margin-bottom:18px;
}

/* TEXT */

.hero p{

font-size:17px;

line-height:1.7;

margin-bottom:30px;
}

/* BADGE */

.hero-badge{

padding:12px 18px;

font-size:14px;

margin-bottom:28px;
}

/* SEARCH */

.hero-search{

flex-direction:column;

padding:10px;

border-radius:28px;

gap:10px;
}

.hero-search input{

width:100%;

height:56px;

font-size:16px;

padding:0 18px;
}

.hero-search button{

width:100%;

height:56px;

font-size:17px;

justify-content:center;
}

/* FEATURES */

.hero-features{

flex-direction:column;

align-items:center;

gap:16px;

margin-top:28px;
}

.hero-features span{

font-size:16px;
}

/* SECTION */

.popular-section,
.category-section{

padding:
70px 18px;
}

.section-title{

font-size:34px;

margin-bottom:28px;
}

/* GRID */

.tool-grid,
.category-grid{

grid-template-columns:1fr;

gap:20px;
}

/* CARD */

.tool-card,
.category-card{

padding:26px;
}

/* CARD TEXT */

.tool-card h3{

font-size:24px;
}

.tool-card p{

font-size:15px;
}

/* FOOTER */

.footer{

padding:
60px 18px 25px;
}

}

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

@media(max-width:500px){

/* HERO */

.hero{

padding:
90px 14px 55px;
}

/* TITLE */

.hero h1{

font-size:38px;
}

/* TEXT */

.hero p{

font-size:15px;
}

/* SEARCH */

.hero-search{

padding:8px;
}

.hero-search input{

height:52px;

font-size:15px;
}

.hero-search button{

height:52px;

font-size:16px;
}

/* BADGE */

.hero-badge{

font-size:13px;

padding:10px 16px;
}

/* SECTION */

.section-title{

font-size:28px;
}

/* FEATURES */

.hero-features span{

font-size:15px;
}

/* TOOL CARD */

.tool-card{

padding:22px;
}

.tool-card h3{

font-size:22px;
}

.tool-card p{

font-size:14px;
}

}