/*==================================================
RESET
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Inter,sans-serif;
background:#f7f7ff;
color:#222;

}

.tm-container{

width:100%;
max-width:1400px;
margin:auto;
padding:0 25px;

}

/*==================================================
HEADER
==================================================*/

.tm-header{

position:sticky;
top:0;
z-index:9999;

background:linear-gradient(90deg,#2b066d,#5c1fff);

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.tm-nav{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

}

.tm-logo{

display:flex;

align-items:center;

gap:16px;

color:#fff;

}

.tm-logo-icon{

width:58px;
height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:18px;

background:rgba(255,255,255,.12);

font-size:30px;

backdrop-filter:blur(15px);

}

.tm-logo h2{

font-size:38px;

font-weight:900;

}

.tm-logo p{

font-size:13px;

opacity:.8;

}

.tm-nav nav{

display:flex;

gap:40px;

}

.tm-nav nav a{

color:#fff;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.tm-nav nav a:hover{

opacity:.7;

}

.tm-right{

display:flex;

align-items:center;

gap:15px;

}

.tm-mini-search{
display:flex;
align-items:center;
overflow:hidden;
background:#fff;
border-radius:16px;
width:280px;   /* pehle 320 tha */
height:50px;
flex-shrink:0;
}

.tm-mini-search input{
flex:1;
border:0;
outline:none;
padding:0 18px;
font-size:15px;
}

.tm-mini-search button{

width:60px;

border:0;

background:#fff;

cursor:pointer;

font-size:22px;

}

.tm-dark{

width:48px;

height:48px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

color:#fff;

cursor:pointer;

}

.tm-right select{

height:48px;

padding:0 20px;

border-radius:14px;

border:none;

}

/*==================================================
HERO
==================================================*/

.tm-hero{

position:relative;

width:100%;

min-height:760px;

padding:120px 0 180px;

background:linear-gradient(135deg,#3d0ca8 0%,#6a2dff 50%,#4b15d8 100%);

overflow:hidden;

}

.tm-hero:before{

content:"";

position:absolute;

left:-300px;

top:-150px;

width:700px;

height:700px;

border-radius:50%;

background:rgba(255,255,255,.05);

}

.tm-hero:after{

content:"";

position:absolute;

right:-200px;

bottom:-220px;

width:550px;

height:550px;

border-radius:50%;

background:rgba(255,255,255,.05);

}

.tm-hero-inner{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:70px;

align-items:center;

position:relative;

z-index:2;

}

.tm-pill{

display:inline-flex;

padding:12px 22px;

border-radius:40px;

background:rgba(255,255,255,.12);

color:#fff;

font-weight:700;

margin-bottom:35px;

backdrop-filter:blur(12px);

}

.tm-left h1{

font-size:82px;

font-weight:900;

line-height:1.05;

color:#fff;

margin-bottom:15px;

}

.tm-left h2{

font-size:42px;

font-weight:700;

color:#f1f1f1;

margin-bottom:45px;

}

.tm-search{

display:flex;

background:#fff;

border-radius:18px;

padding:8px;

box-shadow:0 30px 60px rgba(0,0,0,.20);

}

.tm-search input{

flex:1;

border:0;

outline:none;

padding:22px;

font-size:18px;

}

.tm-search button{

width:66px;

height:66px;

border:none;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#6d36ff,#8f55ff);

cursor:pointer;

box-shadow:

0 15px 35px rgba(108,54,255,.45),

inset 0 1px 2px rgba(255,255,255,.25);

transition:.35s;

}

.tm-search button svg{

width:26px;

height:26px;

}

.tm-search button:hover{

transform:translateY(-3px) scale(1.05);

box-shadow:

0 22px 45px rgba(108,54,255,.55);

}

.tm-tags{

display:flex;

gap:14px;

flex-wrap:wrap;

align-items:center;

margin-top:30px;

}

.tm-tags span{

color:#fff;

font-weight:700;

}

.tm-tags a{

padding:12px 18px;

border-radius:40px;

background:rgba(255,255,255,.10);

text-decoration:none;

color:#fff;

transition:.3s;

}

.tm-tags a:hover{

background:#fff;

color:#5b2eff;

}

.tm-card{

background:#fff;

padding:35px;

border-radius:30px;

box-shadow:0 35px 80px rgba(0,0,0,.22);

}

.tm-card h3{

font-size:32px;

margin-bottom:22px;

}

.tm-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

border-radius:20px;

background:#fafafa;

margin-bottom:18px;

}

.tm-item strong{

display:block;

font-size:19px;

margin-bottom:5px;

}

.tm-item small{

color:#888;

}

.tm-item b{

font-size:30px;

color:#5d2eff;

}

/*==================================================
CATEGORY STRIP
==================================================*/

.tm-category-strip{

margin-top:-90px;

position:relative;

z-index:50;
overflow:hidden;

}

.tm-strip{

background:#fff;

border-radius:28px;

display:grid;

grid-template-columns:repeat(8,1fr);

box-shadow:0 30px 70px rgba(0,0,0,.10);

overflow:hidden;

}

.tm-cat{

padding:38px 20px;

text-align:center;

transition:.3s;

cursor:pointer;

}

.tm-cat:hover{

transform:translateY(-10px);

}

.tm-cat .icon{

width:78px;

height:78px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

font-size:36px;

margin-bottom:20px;

}

.electricity{

background:#ece6ff;
color:#5d2eff;

}

.finance{

background:#f4ebff;
color:#8b5cf6;

}

.health{

background:#ffe6ef;
color:#ff4d7e;

}

.home{

background:#f1e9ff;
color:#7c3aed;

}

.vehicle{

background:#e7fff7;
color:#00a86b;

}

.tax{

background:#fff1e7;
color:#ff6b35;

}

.edu{

background:#edf4ff;
color:#3578ff;

}

.all{

background:#efe8ff;
color:#6d28d9;

}

.tm-cat h4{

font-size:21px;

margin-bottom:8px;

}

.tm-cat p{

color:#777;

font-size:15px;

}
/*==========================================
REMOVE WORDPRESS LAYOUT
==========================================*/

.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-block-template-part,
footer.wp-block-template-part,
header.wp-block-template-part,
.wp-block-post-title,
.wp-block-group.alignfull:first-child,
.wp-block-site-title,
.wp-block-site-logo,
.wp-block-post-content > h1:first-child{
display:none !important;
}

body{

margin:0;
padding:0;
background:#f6f5ff;
overflow-x:hidden;

}

.wp-site-blocks{

padding:0 !important;
margin:0 !important;

}

main{

margin:0 !important;
padding:0 !important;
max-width:100% !important;

}

.tm-header{

position:fixed;

top:32px;

left:0;

right:0;

z-index:99999;

}

.admin-bar .tm-header{

top:32px;

}

.tm-hero{

margin-top:0;

padding-top:170px;

}

.tm-container{

max-width:1450px;

padding-left:40px;

padding-right:40px;

}

/*==========================================
HEADER IMPROVEMENT
==========================================*/

.tm-nav{
display:flex;
align-items:center;
justify-content:space-between;
height:82px;
gap:28px;
}

.tm-nav nav{
display:flex;
align-items:center;
gap:32px;
margin-left:30px;
flex:1;
justify-content:center;
}

.tm-nav nav a{
font-size:17px;
font-weight:700;
white-space:nowrap;
text-decoration:none;
color:#fff;
}

.tm-logo h2{

font-size:44px;

line-height:1;

}

.tm-logo p{

font-size:15px;

margin-top:6px;

}

.tm-right{
display:flex;
align-items:center;
gap:18px;
margin-left:auto;
flex-shrink:0;
}

/*==========================================
CATEGORY CARD
==========================================*/

.tm-category-strip{

margin-top:-75px;

}

.tm-strip{

border-radius:32px;

padding:15px;

box-shadow:

0 25px 70px rgba(59,18,160,.15);

}

.tm-cat{

border-radius:24px;

}

.tm-cat:hover{

background:#faf8ff;

}

/*==========================================
BACKGROUND
==========================================*/

.tm-hero::before{

content:"";

position:absolute;

left:-180px;

top:120px;

width:650px;

height:650px;

border-radius:50%;

background:

rgba(255,255,255,.06);

}

.tm-hero::after{

content:"";

position:absolute;

right:-180px;

bottom:-220px;

width:650px;

height:650px;

border-radius:50%;

background:

rgba(255,255,255,.06);

}
/*==================================
PREMIUM CATEGORY STRIP
==================================*/

.tm-category-section{

margin-top:-82px;

position:relative;

z-index:99;

}

.tm-category-card{

background:#fff;

border-radius:32px;

padding:22px;

display:grid;

grid-template-columns:repeat(8,1fr);

gap:10px;

box-shadow:

0 35px 90px rgba(62,22,170,.12);

}

.tm-category{

text-decoration:none;

padding:26px 14px;

border-radius:24px;

text-align:center;

transition:.35s;

}

.tm-category:hover{

transform:translateY(-10px);

background:#faf8ff;

}

.tm-category-icon{

width:74px;

height:74px;

margin:auto;

margin-bottom:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

border-radius:22px;

}

.tm-category h3{

font-size:24px;

font-weight:700;

margin-bottom:8px;

color:#222;

}

.tm-category p{

font-size:15px;

color:#777;

}

.electricity{

background:#ede7ff;

color:#6c2dff;

}

.finance{

background:#f5ebff;

color:#9b59ff;

}

.health{

background:#ffe8ef;

color:#ff4775;

}

.home{

background:#f4edff;

color:#7b3cff;

}

.vehicle{

background:#eafff5;

color:#13b67d;

}

.tax{

background:#fff2e6;

color:#ff7d3b;

}

.education{

background:#edf4ff;

color:#3b82f6;

}

.all{

background:#efe8ff;

color:#5f2eff;

}


/*==================================================
POPULAR CALCULATORS
==================================================*/

.tm-popular{
    padding:110px 0 90px;
    background:#f8f8ff;
}

.tm-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:50px;
}

.tm-section-head span{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    border-radius:999px;
    background:#efe9ff;
    color:#6b2dff;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.tm-section-head h2{
    font-size:48px;
    line-height:1.1;
    color:#1b1737;
    font-weight:800;
    margin-bottom:14px;
}

.tm-section-head p{
    max-width:560px;
    color:#777;
    line-height:1.8;
}

.tm-view-all{
    color:#6b2dff;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
}

.tm-popular-wrap{
    position:relative;
    padding:0 70px;
}

.tmPopularSlider{
    overflow:hidden;
}

.tmPopularSlider .swiper-slide{
    height:auto;
    display:flex;
}

.tm-tool-card{
    width:100%;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    background:#fff;
    border-radius:26px;
    padding:30px;
    border:1px solid #ece9ff;
    box-shadow:0 18px 55px rgba(63,33,170,.08);
    transition:.35s;
}

.tm-tool-card:hover{
    transform:translateY(-10px);
    box-shadow:0 35px 70px rgba(85,48,220,.18);
}

.tm-tool-icon{
    width:76px;
    height:76px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin-bottom:22px;
}

.tm-tool-card h3{
    font-size:22px;
    line-height:1.35;
    color:#1b1737;
    margin-bottom:14px;
    min-height:62px;
}

.tm-stars{
    color:#ffb400;
    font-size:18px;
    letter-spacing:2px;
    margin-bottom:16px;
}

.tm-tool-card p{
    color:#666;
    line-height:1.8;
    margin-bottom:28px;
    flex:1;
}

.tm-open{
    height:52px;
    border:2px solid #6b2dff;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6b2dff;
    font-weight:700;
    transition:.3s;
}

.tm-tool-card:hover .tm-open{
    background:#6b2dff;
    color:#fff;
}

.tm-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#6b2dff;
    box-shadow:0 18px 40px rgba(80,45,190,.18);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    transition:.3s;
}

.tm-slider-arrow:hover{
    background:#6b2dff;
    color:#fff;
}

.tm-prev{
    left:0;
}

.tm-next{
    right:0;
}

/* ICON COLORS */

.tm-tool-icon.electricity{
    background:#ece6ff;
    color:#6b2dff;
}

.tm-tool-icon.finance{
    background:#f3ebff;
    color:#8d5cff;
}

.tm-tool-icon.tax{
    background:#fff1e6;
    color:#ff7a30;
}

.tm-tool-icon.health{
    background:#ffe8ef;
    color:#ff4d79;
}

.tm-tool-icon.vehicle{
    background:#e9fff7;
    color:#00b277;
}

.tm-tool-icon.all{
    background:#efe8ff;
    color:#6b2dff;
}

/* Responsive */

@media(max-width:1400px){

.tm-section-head h2{
font-size:42px;
}

}

@media(max-width:1200px){

.tm-popular-wrap{
padding:0 55px;
}

}

@media(max-width:992px){

.tm-section-head{
flex-direction:column;
align-items:flex-start;
}

.tm-popular-wrap{
padding:0;
}

.tm-slider-arrow{
display:none;
}

}

@media(max-width:768px){

.tm-popular{
padding:70px 0;
}

.tm-section-head h2{
font-size:34px;
}

.tm-tool-card{
padding:24px;
}

.tm-tool-card h3{
font-size:20px;
min-height:auto;
}

}

@media(max-width:480px){

.tm-section-head h2{
font-size:30px;
}

.tm-tool-card{
padding:20px;
}

.tm-tool-icon{
width:66px;
height:66px;
font-size:30px;
}

.tm-open{
height:46px;
}

}

/*=========================================
PURPLE STATS BAR
=========================================*/

.tm-stats{

padding:20px 0 70px;

background:#f8f7ff;

}

.tm-stats-box{

background:linear-gradient(90deg,#4714d8,#7b32ff);

border-radius:22px;

padding:38px 10px;

display:grid;

grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;

align-items:center;

box-shadow:0 35px 80px rgba(91,45,255,.25);

}

.tm-divider{

width:1px;

height:70px;

background:rgba(255,255,255,.25);

justify-self:center;

}

.tm-stat{

display:flex;

align-items:center;

justify-content:center;

gap:22px;

color:#fff;

}

.tm-stat-icon{

width:72px;

height:72px;

border-radius:18px;

background:rgba(255,255,255,.12);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

backdrop-filter:blur(10px);

}

.tm-stat h3{

font-size:48px;

font-weight:800;

margin:0;

line-height:1;

}

.tm-stat p{

margin:8px 0 0;

font-size:18px;

opacity:.92;

}
/*==================================
ELECTRICITY
==================================*/

.tm-electricity{

padding:100px 0;

background:#fff;

}

.tm-electricity-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.tm-electric-card{

background:#fff;

border-radius:24px;

padding:32px;

text-decoration:none;

box-shadow:0 18px 55px rgba(0,0,0,.08);

transition:.35s;

}

.tm-electric-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 80px rgba(88,42,220,.18);

}

.tm-electric-icon{

width:74px;

height:74px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:#efe8ff;

font-size:34px;

color:#6a2dff;

margin-bottom:22px;

}

.tm-electric-card h3{

font-size:24px;

margin-bottom:14px;

color:#222;

}

.tm-electric-card p{

line-height:1.8;

color:#666;

margin-bottom:26px;

}

.tm-btn-outline{

height:54px;

display:flex;

align-items:center;

justify-content:center;

border:2px solid #6b2dff;

border-radius:16px;

font-weight:700;

color:#6b2dff;

transition:.3s;

}

.tm-electric-card:hover .tm-btn-outline{

background:#6b2dff;

color:#fff;

}

/*==================================
RECENT
==================================*/

.tm-recent{

padding:110px 0;

background:#f8f7ff;

}

.tm-recent-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

}

.tm-recent-card{

background:#fff;

padding:30px;

border-radius:24px;

text-decoration:none;

box-shadow:0 18px 60px rgba(0,0,0,.07);

transition:.35s;

}

.tm-recent-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 80px rgba(98,52,255,.18);

}

.tm-recent-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:22px;

}

.tm-recent-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

background:#efe8ff;

border-radius:20px;

font-size:34px;

color:#6b2dff;

}

.tm-badge-new{

padding:8px 16px;

background:#22c55e;

color:#fff;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.tm-recent-card h3{

font-size:24px;

margin-bottom:14px;

color:#222;

line-height:1.4;

}

.tm-recent-card p{

line-height:1.8;

color:#666;

margin-bottom:24px;

}

.tm-open-btn{

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:#6b2dff;

color:#fff;

font-weight:700;

transition:.3s;

}

.tm-recent-card:hover .tm-open-btn{

background:#4b14d8;

}

/*=========================================
CTA
=========================================*/

.tm-cta{

padding:90px 0 0;

background:#f8f7ff;

}

.tm-cta-box{

position:relative;

overflow:hidden;

padding:95px;

border-radius:34px;

background:linear-gradient(135deg,#4b14d8,#7f36ff);

text-align:center;

color:#fff;

box-shadow:0 35px 90px rgba(80,30,220,.28);

}

.tm-cta h2{

font-size:64px;

font-weight:800;

margin:0 0 20px;

}

.tm-cta p{

font-size:22px;

opacity:.92;

margin-bottom:40px;

}

.tm-cta-btn{

display:inline-flex;

align-items:center;

justify-content:center;

height:64px;

padding:0 42px;

border-radius:18px;

background:#fff;

color:#5d2dff;

font-size:18px;

font-weight:700;

text-decoration:none;

transition:.3s;

box-shadow:0 15px 40px rgba(255,255,255,.18);

}

.tm-cta-btn:hover{

transform:translateY(-5px);

}

.tm-cta-shape{

position:absolute;

border-radius:50%;

background:rgba(255,255,255,.06);

}

.shape1{

width:420px;

height:420px;

left:-180px;

bottom:-220px;

}

.shape2{

width:320px;

height:320px;

right:-120px;

top:-120px;

}

.shape3{

width:160px;

height:160px;

left:50%;

bottom:-80px;

transform:translateX(-50%);

}

.tm-floating{

position:absolute;

font-size:42px;

opacity:.14;

font-weight:bold;

animation:floatY 6s ease-in-out infinite;

}

.f1{

left:80px;

top:70px;

}

.f2{

right:140px;

top:90px;

}

.f3{

left:260px;

bottom:80px;

}

.f4{

right:260px;

bottom:90px;

}

@keyframes floatY{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}
/*=========================================
FOOTER
=========================================*/

.tm-footer{

background:#131728;

color:#fff;

padding:80px 0 30px;

position:relative;

overflow:hidden;

}

.tm-footer::before{

content:"";

position:absolute;

right:-120px;

bottom:-120px;

width:320px;

height:320px;

border-radius:50%;

background:rgba(255,255,255,.04);

}

.tm-footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

padding-bottom:50px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.tm-footer h3{

font-size:42px;

margin-bottom:18px;

font-weight:800;

}

.tm-footer h4{

font-size:22px;

margin-bottom:22px;

font-weight:700;

}

.tm-footer p{

color:#c8ccdd;

line-height:1.9;

font-size:17px;

}

.tm-footer ul{

margin:0;

padding:0;

list-style:none;

}

.tm-footer li{

margin-bottom:14px;

color:#c8ccdd;

}

.tm-footer a{

color:#c8ccdd;

text-decoration:none;

transition:.3s;

}

.tm-footer a:hover{

color:#fff;

padding-left:6px;

}

.tm-footer-bottom{

padding-top:28px;

text-align:center;

color:#9aa0b6;

font-size:15px;

}

/*=========================================
RESPONSIVE + PREMIUM POLISH
=========================================*/

html{

scroll-behavior:smooth;

}

img{

max-width:100%;

display:block;

}

.tm-tool-card,
.tm-electric-card,
.tm-recent-card,
.tm-category{

cursor:pointer;

}

.tm-tool-card,
.tm-electric-card,
.tm-recent-card,
.tm-category,
.tm-stat,
.tm-live-card{

transition:all .35s ease;

}

.tm-tool-card:hover,
.tm-electric-card:hover,
.tm-recent-card:hover{

transform:translateY(-12px) scale(1.02);

}

.tm-category:hover .tm-category-icon{

transform:rotate(-8deg) scale(1.12);

}

.tm-category-icon{

transition:.35s;

}

.tm-live-card{

backdrop-filter:blur(15px);

}

.tm-search input:focus{

outline:none;

box-shadow:0 0 0 5px rgba(122,67,255,.18);

}

.tm-search button:hover{

transform:scale(1.06);

}

.tm-btn-outline,
.tm-open,
.tm-open-btn,
.tm-cta-btn{

transition:.3s;

}

.tm-btn-outline:hover,
.tm-open:hover,
.tm-open-btn:hover{

transform:translateY(-3px);

}

.tm-header{

backdrop-filter:blur(18px);

}

.tm-hero{

overflow:hidden;

}

.tm-hero::before{

animation:float1 10s ease-in-out infinite;

}

.tm-hero::after{

animation:float2 12s ease-in-out infinite;

}

@keyframes float1{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

}

@keyframes float2{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(35px);

}

}

/* MOBILE */

@media(max-width:1200px){

.tm-category-card{

grid-template-columns:repeat(4,1fr);

}

.tm-popular-grid{

grid-template-columns:repeat(3,1fr);

}

.tm-electricity-grid{

grid-template-columns:repeat(2,1fr);

}

.tm-recent-grid{

grid-template-columns:repeat(2,1fr);

}

.tm-stats-box{

grid-template-columns:1fr 1fr;

gap:30px;

}

.tm-divider{

display:none;

}

}

@media(max-width:768px){

.tm-container{

padding:0 18px;

}

.tm-nav{

flex-wrap:wrap;

height:auto;

padding:15px 0;

}

.tm-nav nav{

display:none;

}

.tm-hero-grid{

grid-template-columns:1fr;

}

.tm-category-card{

grid-template-columns:repeat(2,1fr);

}

.tm-popular-grid{

grid-template-columns:1fr;

}

.tm-electricity-grid{

grid-template-columns:1fr;

}

.tm-recent-grid{

grid-template-columns:1fr;

}

.tm-footer-grid{

grid-template-columns:1fr;

}

.tm-section-head{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.tm-cta h2{

font-size:42px;

}

.tm-hero h1{

font-size:58px;

}

.tm-live-card{

margin-top:40px;

}

}
/*==================================
RESPONSIVE HEADER
==================================*/

.tm-menu-toggle{
display:none;
width:46px;
height:46px;
border:0;
border-radius:12px;
background:#6b2dff;
color:#fff;
font-size:24px;
cursor:pointer;
}

.tm-mobile-overlay{
display:none;
}

@media(max-width:1200px){

.tm-nav{

gap:18px;

}

.tm-nav nav{

gap:22px;

}

.tm-mini-search{

width:240px;

}

}

@media(max-width:992px){

.tm-nav{

height:76px;

}

.tm-menu-toggle{

display:flex;
align-items:center;
justify-content:center;

}

.tm-nav nav{

position:fixed;

top:0;
left:-320px;

width:300px;
height:100vh;

background:#24005f;

padding:110px 35px;

display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;

gap:28px;

transition:.35s;

z-index:9999;

}

.tm-nav nav.active{

left:0;

}

.tm-nav nav a{

font-size:19px;

width:100%;

}

.tm-mobile-overlay{

display:block;

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.tm-mobile-overlay.active{

opacity:1;

visibility:visible;

}

.tm-mini-search{

display:none;

}

.tm-language{

display:none;

}

}

@media(max-width:768px){

.tm-logo-text h2{

font-size:34px;

}

.tm-logo-text p{

font-size:14px;

}

.tm-nav{

padding:0 20px;

}

}

@media(max-width:480px){

.tm-logo-text h2{

font-size:28px;

}

.tm-logo-text p{

display:none;

}

.tm-logo img{

width:52px;

height:52px;

}

}


/*==================================
HERO RESPONSIVE
==================================*/

.tm-hero{

overflow:hidden;

}

.tm-hero-inner{

display:grid;
grid-template-columns:1.15fr .85fr;
align-items:center;
gap:90px;

}

.tm-hero-left{

position:relative;
z-index:2;

}

.tm-hero-right{

display:flex;
justify-content:flex-end;

}

.tm-live-card{

width:420px;
max-width:100%;

}

.tm-search-wrap{

display:flex;
align-items:center;

width:100%;

max-width:640px;

}

.tm-search-wrap input{

flex:1;
min-width:0;

}

.tm-search-btn{

width:74px;
height:74px;

flex-shrink:0;

}

.tm-search-tags{

display:flex;
flex-wrap:wrap;

gap:14px;

}

.tm-search-tag{

white-space:nowrap;

}

@media(max-width:1200px){

.tm-hero{

padding:90px 0 130px;

}

.tm-hero-inner{

grid-template-columns:1fr 420px;

gap:50px;

}

.tm-hero-title{

font-size:68px;

line-height:1.05;

}

.tm-search-wrap{

max-width:100%;

}

}

@media(max-width:992px){

.tm-hero{

padding:70px 0 110px;

}

.tm-hero-inner{

grid-template-columns:1fr;

gap:50px;

text-align:center;

}

.tm-hero-left{

display:flex;

flex-direction:column;

align-items:center;

}

.tm-hero-right{

justify-content:center;

}

.tm-live-card{

width:100%;
max-width:520px;

}

.tm-hero-title{

font-size:58px;

}

.tm-hero-sub{

max-width:650px;

}

.tm-search-wrap{

max-width:700px;

}

.tm-search-tags{

justify-content:center;

}

}

@media(max-width:768px){

.tm-hero{

padding:55px 0 95px;

}

.tm-hero-title{

font-size:46px;

line-height:1.08;

}

.tm-hero-sub{

font-size:18px;

line-height:1.7;

}

.tm-search-wrap{

height:64px;

}

.tm-search-wrap input{

font-size:16px;

padding:0 20px;

}

.tm-search-btn{

width:64px;
height:64px;

}

.tm-live-card{

padding:28px;

}

}

@media(max-width:576px){

.tm-hero{

padding:40px 0 80px;

}

.tm-hero-title{

font-size:34px;

}

.tm-hero-sub{

font-size:16px;

}

.tm-search-wrap{

height:56px;

border-radius:16px;

}

.tm-search-wrap input{

font-size:15px;

padding:0 16px;

}

.tm-search-btn{

width:56px;
height:56px;

border-radius:14px;

}

.tm-search-tags{

gap:10px;

}

.tm-search-tag{

font-size:13px;

padding:10px 16px;

}

.tm-live-card{

padding:20px;

border-radius:24px;

}

.tm-live-item{

padding:16px;

}

.tm-live-price{

font-size:32px;

}

}

@media(max-width:420px){

.tm-hero-title{

font-size:30px;

}

.tm-hero-badge{

font-size:13px;

padding:12px 18px;

}

.tm-search-tags{

justify-content:center;

}

.tm-live-card{

padding:18px;

}

}

/*==================================
CATEGORY STRIP RESPONSIVE
==================================*/

.tm-strip{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:20px;
}

@media(max-width:1200px){

.tm-strip{
grid-template-columns:repeat(4,1fr);
}

}

@media(max-width:768px){

.tm-strip{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.tm-cat{
padding:22px 15px;
}

}

@media(max-width:480px){

.tm-strip{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.tm-cat{
padding:18px 12px;
}

.tm-cat h4{
font-size:18px;
}

.tm-cat p{
font-size:13px;
}

.tm-cat .icon{
width:58px;
height:58px;
font-size:28px;
}

}

/* ---------- Mobile Header Fix ---------- */

@media (max-width:768px){

.tm-nav{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
}

.tm-logo{
    flex:1;
}

.tm-menu-toggle{
    position:static !important;
    order:2;
    margin-left:auto;
}

.tm-language{
    position:static !important;
    order:3;
    margin-left:12px;
    display:block !important;
}

.tm-right{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.tm-mini-search{
    display:none !important;
}

}

/*======================
RESPONSIVE
======================*/

@media(max-width:1400px){

.tm-popular-track{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:992px){

.tm-popular-track{
grid-template-columns:repeat(2,1fr);
}

.tm-section-head{
flex-direction:column;
gap:12px;
align-items:flex-start;
}

}

@media(max-width:640px){

.tm-popular{
padding:50px 0;
}

.tm-popular-track{
grid-template-columns:1fr;
}

.tm-arrow{
display:none;
}

.tm-pop-card{
padding:24px 18px;
}

.tm-section-head h2{
font-size:28px;
}

}