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

@media (max-width:991px){

.hero{
    padding:40px 0;
}

.hero-wrapper{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.hero-right{
    width:100%;
    max-width:100%;
}

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

.hero-buttons{
    justify-content:center;
}

}

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

@media (max-width:768px){

.hero{
    padding:25px 0;
}

.hero .container{
    padding:0 15px;
}

/* Breadcrumb */

.breadcrumb{
    font-size:13px;
    margin-bottom:15px;
    line-height:1.5;
}

/* Badge */

.hero-badge{
    font-size:12px;
    padding:8px 14px;
    margin-bottom:15px;
}

/* Heading */

.hero h1{

display:flex;
align-items:center;
gap:12px;

font-size:30px;
line-height:1.3;

margin-bottom:15px;

}

.logo{
    width:50px;
    height:50px;
    border-radius:14px;
}

/* Description */

.hero-description{

font-size:15px;

line-height:1.7;

margin-bottom:20px;

}

/* Notices */

.hero-notice{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.notice-item{

width:100%;

justify-content:center;

padding:12px;

font-size:14px;

}

/* Stats */

.stats{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin:25px 0;

}

.stats span{

width:100%;

justify-content:center;

padding:14px;

font-size:15px;

}

/* Feature Cards */

.features{

grid-template-columns:1fr;

gap:18px;

}

.feature-card{

padding:20px;

border-radius:18px;

}

.feature-card h4{

font-size:20px;

margin-bottom:18px;

}

.feature-card h4 i{

width:46px;
height:46px;

font-size:18px;

}

.feature-card li{

font-size:15px;

margin-bottom:12px;

}

/* Buttons */

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.main-btn,
.secondary-btn{

width:100%;

padding:16px;

font-size:16px;

}

/* Right Card */

.free-card{

padding:24px;

border-radius:22px;

}

.free-card h3{

font-size:24px;

line-height:1.4;

padding-right:0;

margin-top:20px;

}

.free-content p{

font-size:15px;

padding:12px 0;

}

.trust-points{

flex-direction:column;

gap:10px;

}

.trust-points span{

justify-content:center;

}

}

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

@media (max-width:480px){

.hero .container{
    padding:0 12px;
}

.hero h1{

font-size:24px;

gap:10px;

}

.logo{

width:44px;
height:44px;

}

.hero-description{

font-size:14px;

line-height:1.8;

}

.hero-badge{

font-size:11px;

}

.notice-item{

font-size:13px;

padding:10px;

}

.stats span{

font-size:14px;

padding:12px;

}

.feature-card{

padding:18px;

}

.feature-card h4{

font-size:18px;

}

.feature-card li{

font-size:14px;

}

.free-card{

padding:20px;

}

.free-card h3{

font-size:20px;

}

.main-btn,
.secondary-btn{

font-size:15px;

padding:15px;

}

}

/* =====================================================
   MOBILE OVERRIDE - PLACE AT THE END OF CSS
=====================================================*/

@media only screen and (max-width:768px){

.hero{
    padding:25px 0 !important;
    overflow:hidden !important;
}

.hero .container{
    width:100% !important;
    max-width:100% !important;
    padding:0 15px !important;
    margin:0 auto !important;
}

/* Layout */

.hero-wrapper{
    display:flex !important;
    flex-direction:column !important;
    gap:25px !important;
    align-items:stretch !important;
}

.hero-left,
.hero-right{
    width:100% !important;
    max-width:100% !important;
    flex:unset !important;
}

/* Heading */

.hero h1{

display:flex !important;
align-items:center !important;

gap:12px !important;

font-size:30px !important;

line-height:1.3 !important;

margin-bottom:18px !important;

flex-wrap:wrap !important;

}

.hero h1 span{

display:block !important;

width:100% !important;

}

.logo{

width:50px !important;

height:50px !important;

padding:6px !important;

border-radius:12px !important;

}

/* Description */

.hero-description{

font-size:15px !important;

line-height:1.7 !important;

margin-bottom:20px !important;

}

/* Badge */

.hero-badge{

display:inline-flex !important;

font-size:12px !important;

padding:8px 14px !important;

margin-bottom:15px !important;

}

/* Breadcrumb */

.breadcrumb{

font-size:13px !important;

line-height:1.5 !important;

margin-bottom:15px !important;

}

/* Notice */

.hero-notice{

display:flex !important;

flex-direction:column !important;

gap:12px !important;

}

.notice-item{

width:100% !important;

justify-content:center !important;

padding:12px !important;

font-size:14px !important;

}

/* Stats */

.stats{

display:grid !important;

grid-template-columns:1fr !important;

gap:12px !important;

margin:25px 0 !important;

}

.stats span{

width:100% !important;

justify-content:center !important;

padding:14px !important;

font-size:15px !important;

}

/* Features */

.features{

display:grid !important;

grid-template-columns:1fr !important;

gap:18px !important;

}

.feature-card{

padding:20px !important;

border-radius:18px !important;

}

.feature-card h4{

font-size:20px !important;

margin-bottom:16px !important;

}

.feature-card li{

font-size:15px !important;

margin-bottom:12px !important;

}

/* Buttons */

.hero-buttons{

display:flex !important;

flex-direction:column !important;

gap:15px !important;

}

.main-btn,
.secondary-btn{

width:100% !important;

display:flex !important;

justify-content:center !important;

padding:16px !important;

font-size:16px !important;

}

/* Right Card */

.free-card{

width:100% !important;

padding:24px !important;

border-radius:20px !important;

margin-top:10px !important;

}

.free-card h3{

font-size:22px !important;

line-height:1.4 !important;

padding-right:0 !important;

}

.free-content p{

font-size:15px !important;

}

.trust-points{

display:flex !important;

flex-direction:column !important;

gap:10px !important;

}

.trust-points span{

justify-content:center !important;

width:100% !important;

}

}

/* =======================================
   EXTRA SMALL DEVICES
=======================================*/

@media only screen and (max-width:480px){

.hero{

padding:20px 0 !important;

}

.hero .container{

padding:0 12px !important;

}

.hero h1{

font-size:24px !important;

}

.logo{

width:42px !important;

height:42px !important;

}

.hero-description{

font-size:14px !important;

}

.hero-badge{

font-size:11px !important;

}

.notice-item{

font-size:13px !important;

padding:10px !important;

}

.stats span{

font-size:14px !important;

padding:12px !important;

}

.feature-card{

padding:18px !important;

}

.feature-card h4{

font-size:18px !important;

}

.feature-card li{

font-size:14px !important;

}

.free-card{

padding:18px !important;

}

.free-card h3{

font-size:20px !important;

}

.main-btn,
.secondary-btn{

font-size:15px !important;

padding:14px !important;

}

}
    .feature-card ul{
    list-style:none;
    padding:0;
    margin:22px 0 0;
}

.feature-card li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
    font-size:15px;
    font-weight:500;
    color:#475569;
    line-height:1.6;
    text-align:left;
}

.feature-card li::before{
    content:"";
    width:8px;
    height:8px;
    min-width:8px;
    margin-top:8px;
    border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#22c55e);
}
    /*====================================================
  SSC MOCK TEST HERO
  PREMIUM UI - PART 1
====================================================*/

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#0f172a;

--success:#16a34a;
--success-bg:#dcfce7;

--danger:#ef4444;

--text:#1e293b;
--text-light:#64748b;

--border:#e2e8f0;

--bg:#f8fafc;

--white:#ffffff;

--shadow-sm:0 8px 25px rgba(15,23,42,.05);
--shadow:0 15px 45px rgba(15,23,42,.08);
--shadow-lg:0 25px 70px rgba(15,23,42,.12);

--radius:18px;

--transition:.35s ease;

}

/*===================================*/

.hero{

position:relative;

overflow:hidden;

padding:70px 0;

background:

radial-gradient(circle at top left,#dbeafe 0%,transparent 30%),

radial-gradient(circle at bottom right,#dcfce7 0%,transparent 30%),

linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);

}

/* Decorative */

.hero::before{

content:"";

position:absolute;

width:550px;
height:550px;

top:-250px;
right:-200px;

border-radius:50%;

background:rgba(37,99,235,.05);

}

.hero::after{

content:"";

position:absolute;

width:350px;
height:350px;

bottom:-180px;
left:-100px;

border-radius:50%;

background:rgba(22,163,74,.05);

}

.hero .container{

max-width:1280px;

margin:auto;

padding:0 20px;

position:relative;

z-index:5;

}

/*===================================*/

.breadcrumb{

display:flex;

align-items:center;

gap:10px;

flex-wrap:wrap;

font-size:14px;

margin-bottom:30px;

}

.breadcrumb a{

text-decoration:none;

color:var(--primary);

font-weight:600;

transition:.3s;

}

.breadcrumb a:hover{

color:var(--primary-dark);

}

.breadcrumb span{

color:#94a3b8;

}

/*===================================*/

.hero-wrapper{

display:grid;

grid-template-columns:1.6fr 420px;

gap:45px;

align-items:center;

}

/*===================================*/

.hero-left{

display:flex;

flex-direction:column;

}

/*===================================*/

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:rgba(37,99,235,.08);

border:1px solid rgba(37,99,235,.15);

border-radius:100px;

font-size:14px;

font-weight:700;

color:var(--primary);

width:fit-content;

margin-bottom:22px;

backdrop-filter:blur(10px);

box-shadow:var(--shadow-sm);

}

.hero-badge i{

font-size:15px;

}

/*===================================*/

.hero h1{

display:flex;

align-items:center;

gap:18px;

font-size:46px;

font-weight:800;

line-height:1.15;

color:var(--secondary);

margin-bottom:20px;

letter-spacing:-1px;

}

.logo{

width:72px;

height:72px;

border-radius:20px;

background:white;

padding:8px;

object-fit:cover;

box-shadow:

0 15px 35px rgba(0,0,0,.08);

}

/*===================================*/

.hero-description{

font-size:18px;

line-height:1.8;

color:var(--text-light);

max-width:760px;

margin-bottom:30px;

}

/*===================================*/

.hero-notice{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:28px;

}

.notice-item{

display:flex;

align-items:center;

gap:10px;

padding:12px 20px;

border-radius:50px;

background:white;

border:1px solid var(--border);

font-weight:700;

color:var(--text);

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.notice-item:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.notice-item.green{

background:var(--success-bg);

border-color:#bbf7d0;

color:var(--success);

}

.notice-item i{

font-size:15px;

}

/*===================================*/

.stats{

display:flex;

flex-wrap:wrap;

gap:15px;

margin:10px 0 35px;

}

.stats span{

display:flex;

align-items:center;

gap:10px;

padding:14px 22px;

background:white;

border-radius:14px;

border:1px solid var(--border);

font-weight:700;

color:var(--text);

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.stats span:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.stats i{

color:var(--primary);

}

.stats .free{

background:linear-gradient(135deg,#16a34a,#22c55e);

color:white;

border:none;

}

.stats .free i{

color:white;

}

/*====================================================
  PREMIUM FEATURE SECTION
====================================================*/

.features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin:40px 0;
}

.feature-card{
    position:relative;
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px 24px;
    box-shadow:var(--shadow-sm);
    transition:all .35s ease;
    overflow:hidden;
}

.feature-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#2563eb,#22c55e);
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:#bfdbfe;
}

.feature-card h4{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    font-weight:700;
    color:var(--secondary);
    margin-bottom:20px;
}

.feature-card h4 i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#eff6ff;
    color:var(--primary);
    font-size:18px;
}

.feature-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.feature-card li{
    position:relative;
    padding-left:28px;
    margin-bottom:14px;
    color:var(--text);
    font-size:15px;
    line-height:1.6;
}

.feature-card li:last-child{
    margin-bottom:0;
}

.feature-card li::before{
    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:2px;
    color:#22c55e;
}

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

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:35px;
}

.main-btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:18px 34px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:17px;
font-weight:700;

border-radius:16px;

text-decoration:none;

box-shadow:
0 20px 45px rgba(37,99,235,.25);

transition:all .35s ease;

}

.main-btn:hover{

transform:translateY(-4px);

box-shadow:
0 30px 60px rgba(37,99,235,.35);

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:18px 30px;

background:#fff;

border:1px solid var(--border);

border-radius:16px;

color:var(--secondary);

font-weight:700;

text-decoration:none;

transition:.35s;

box-shadow:var(--shadow-sm);

}

.secondary-btn:hover{

transform:translateY(-4px);

border-color:var(--primary);

color:var(--primary);

box-shadow:var(--shadow);

}

/*====================================================
 RIGHT SIDE
====================================================*/

.hero-right{

display:flex;

justify-content:center;

}

.free-card{

position:relative;

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

backdrop-filter:blur(20px);

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

border-radius:30px;

padding:38px;

box-shadow:

0 25px 70px rgba(15,23,42,.12);

overflow:hidden;

}

.free-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#2563eb,#22c55e);

}

.free-tag{

position:absolute;

top:18px;

right:18px;

background:#16a34a;

color:#fff;

padding:8px 16px;

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

}

.free-card h3{

font-size:30px;

line-height:1.3;

font-weight:800;

color:var(--secondary);

margin-bottom:30px;

padding-right:60px;

}

/*====================================================
 FREE CONTENT
====================================================*/

.free-content{

margin-bottom:30px;

}

.free-content p{

display:flex;

align-items:center;

gap:14px;

padding:16px 0;

margin:0;

font-size:16px;

font-weight:600;

color:var(--text);

border-bottom:1px solid #edf2f7;

}

.free-content p:last-child{

border:none;

}

.free-content i{

color:#22c55e;

font-size:18px;

}

/*====================================================
 TRUST BADGES
====================================================*/

.trust-points{

display:flex;

justify-content:center;

gap:12px;

margin-top:25px;

flex-wrap:wrap;

}

.trust-points span{

display:flex;

align-items:center;

gap:8px;

padding:10px 18px;

background:#f8fafc;

border-radius:40px;

border:1px solid var(--border);

font-size:14px;

font-weight:700;

color:var(--text);

}

.trust-points i{

color:#2563eb;

}

/*====================================================
 FLOATING EFFECT
====================================================*/

.free-card:hover{

transform:translateY(-8px);

transition:.35s;

box-shadow:

0 35px 80px rgba(37,99,235,.18);

}

/*====================================================
 OPTIONAL ANIMATION
====================================================*/

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0);}

}

.hero-badge{

animation:float 4s ease-in-out infinite;

}

.logo{

animation:float 5s ease-in-out infinite;

}

/*====================================================
  PREMIUM HERO
  RESPONSIVE + FINAL POLISH
====================================================*/

/* Smooth scrolling */

html{
    scroll-behavior:smooth;
}

/* Better text selection */

::selection{
    background:#2563eb;
    color:#fff;
}

/* Better image rendering */

img{
    max-width:100%;
    display:block;
}

/* Links */

.hero a{
    transition:all .3s ease;
}

/*====================================================
  BUTTON ACTIVE STATES
====================================================*/

.main-btn:active,
.secondary-btn:active{
    transform:scale(.98);
}

/*====================================================
  CARD HOVER
====================================================*/

.feature-card,
.free-card,
.stats span,
.notice-item{
    will-change:transform;
}

/*====================================================
  LARGE DESKTOP
====================================================*/

@media (min-width:1500px){

.hero .container{
    max-width:1380px;
}

.hero h1{
    font-size:54px;
}

.hero-description{
    font-size:20px;
}

.hero-wrapper{
    grid-template-columns:1.7fr 440px;
}

}

/*====================================================
  DESKTOP
====================================================*/

@media (max-width:1200px){

.hero-wrapper{
    grid-template-columns:1.4fr 380px;
    gap:35px;
}

.hero h1{
    font-size:40px;
}

.features{
    gap:18px;
}

.feature-card{
    padding:24px;
}

}

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

@media (max-width:992px){

.hero{
    padding:55px 0;
}

.hero-wrapper{

grid-template-columns:1fr;

gap:40px;

}

.hero-right{

max-width:550px;

margin:auto;

width:100%;

}

.hero h1{

font-size:36px;

}

.hero-description{

font-size:17px;

}

.features{

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

}

.hero-buttons{

justify-content:center;

}

}

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

@media (max-width:768px){

.hero{

padding:40px 0;

}

.hero .container{

padding:0 16px;

}

.hero h1{

font-size:28px;

gap:12px;

align-items:flex-start;

}

.logo{

width:56px;

height:56px;

border-radius:14px;

}

.hero-description{

font-size:15px;

line-height:1.8;

}

.hero-badge{

font-size:13px;

padding:10px 16px;

}

.notice-item{

width:100%;

justify-content:center;

font-size:14px;

}

.stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

}

.stats span{

justify-content:center;

padding:14px;

font-size:14px;

}

.features{

grid-template-columns:1fr;

}

.feature-card{

padding:22px;

}

.hero-buttons{

flex-direction:column;

}

.main-btn,

.secondary-btn{

width:100%;

padding:16px;

font-size:16px;

}

.free-card{

padding:28px;

border-radius:24px;

}

.free-card h3{

font-size:24px;

padding-right:0;

margin-top:10px;

}

.free-tag{

top:14px;

right:14px;

}

.trust-points{

justify-content:center;

}

}

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

@media (max-width:576px){

.hero{

padding:30px 0;

}

.breadcrumb{

font-size:13px;

gap:6px;

}

.hero h1{

font-size:24px;

}

.logo{

width:48px;

height:48px;

}

.hero-description{

font-size:14px;

}

.stats{

grid-template-columns:1fr;

}

.stats span{

width:100%;

}

.feature-card h4{

font-size:18px;

}

.feature-card li{

font-size:14px;

}

.free-card{

padding:22px;

}

.free-card h3{

font-size:21px;

}

.free-content p{

font-size:14px;

padding:12px 0;

}

.trust-points{

flex-direction:column;

}

.trust-points span{

justify-content:center;

}

}

/*====================================================
 EXTRA SMALL
====================================================*/

@media (max-width:360px){

.hero h1{

font-size:21px;

}

.hero-description{

font-size:13px;

}

.main-btn,

.secondary-btn{

font-size:15px;

padding:15px;

}

.feature-card{

padding:18px;

}

.free-card{

padding:18px;

}

}

/*====================================================
  PREMIUM GRADIENT TEXT
====================================================*/

.hero h1{

background:linear-gradient(
90deg,
#0f172a,
#1d4ed8
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*====================================================
  BUTTON SHINE EFFECT
====================================================*/

.main-btn{

position:relative;

overflow:hidden;

}

.main-btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.main-btn:hover::before{

left:140%;

}

/*====================================================
 FEATURE ICON ANIMATION
====================================================*/

.feature-card h4 i{

transition:.35s;

}

.feature-card:hover h4 i{

transform:rotate(12deg) scale(1.15);

}

/*====================================================
 FREE CARD BUTTON
====================================================*/

.free-card .main-btn{

width:100%;

margin-top:8px;

}

/*====================================================
 GLASS BORDER
====================================================*/

.feature-card,
.free-card{

backdrop-filter:blur(20px);

}

/*====================================================
 LIGHT FADE ANIMATION
====================================================*/

.hero-left{

animation:fadeLeft .7s ease;

}

.hero-right{

animation:fadeRight .8s ease;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:none;

}

}
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #f5f7fb;
  padding-top: 60px; /* prevents content hiding */
}
/* ================= GLOBAL FIX (VERY IMPORTANT) ================= */
* {
  box-sizing: border-box;
}

.hero,
.hero * {
  pointer-events: auto;
}

/* REMOVE ANY OVERLAY BLOCKING */
.hero::before,
.hero::after {
  display: none !important;
}

/* ================= BACKGROUND ================= */
.hero {
  background: #f5f7fb;
  padding: 40px 0;
}

/* ================= CONTAINER ================= */
.container {
  max-width: 1150px;
  margin: auto;
  padding: 0 20px;
}

/* ================= BREADCRUMB ================= */
.breadcrumb {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 20px;
}

.breadcrumb a {
  color: #3b82f6;
  text-decoration: none;
}

/* ================= LAYOUT ================= */
.hero-wrapper {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

/* ================= LEFT ================= */
.hero-left {
  flex: 2.3;
}

/* ================= TITLE ================= */
.hero-left h1 {
  font-size: 32px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 42px;
}

/* ================= UPDATED ================= */
.updated {
  color: #6b7280;
  font-size: 14px;
  margin-top: 10px;
}

/* ================= STATS ================= */
.stats {
  margin-top: 18px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.stats span {
  font-size: 14px;
  color: #374151;
}

.stats .free {
  background: #22c55e;
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 600;
}

/* ================= LINE ================= */
.hero-left hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}

/* ================= FEATURES ================= */
.features {
  display: flex;
  gap: 50px;
}

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

.features li {
  font-size: 14px;
  color: #374151;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ❌ REMOVE THIS BLOCK */
.features li::before {
  content: none;
}

/* ================= BUTTON (MATCH CARD STYLE) ================= */
.main-btn {
  display: inline-block;
  margin-top: 25px;
  background: linear-gradient(90deg, #2f80ed, #56ccf2); /* 🔥 SAME AS CARD */
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  z-index: 10; /* 🔥 FIX CLICK ISSUE */
  cursor: pointer;
  transition: 0.3s;
}

.main-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ================= RIGHT CARD ================= */
.hero-right {
  flex: 1;
  max-width: 340px;
}

.free-card {
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* TITLE */
.free-card h3 {
  font-size: 18px;
  color: #111;
  margin-bottom: 15px;
}

/* TEXT */
.free-card p {
  color: #4b5563;
  font-size: 14px;
}

/* BUTTON FULL WIDTH */
.free-card .main-btn {
  width: 100%;
}

/* USERS */
.users-count {
  margin-top: 15px;
  font-size: 14px;
  color: #6b7280;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .hero-wrapper {
    flex-direction: column;
  }

  .hero-right {
    max-width: 100%;
  }

  .features {
    gap: 25px;
  }

  .hero-left h1 {
    font-size: 24px;
  }
}
/* ================= SECTION ================= */
.test-list {
  background: #f5f7fb;
  padding: 60px 0;
}

/* TITLE */
.test-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #111827;
  text-align: center;
}

/* ================= TABS ================= */
.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
}

.tab {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: 0.25s;
}

.tab:hover {
  background: #f1f5f9;
}

.tab.active {
  background: linear-gradient(90deg, #06b6d4, #22c55e);
  color: #fff;
  border: none;
}

/* ================= FILTER ================= */
.filter-bar {
  display: flex;
  gap: 30px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  margin-bottom: 25px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.filter-bar span {
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: 0.2s;
}

.filter-bar span:hover {
  color: #111;
}

.filter-bar .active {
  color: #06b6d4;
  font-weight: 600;
}

/* ================= LAYOUT ================= */
.main-layout {
  display: flex;
  gap: 35px;
  align-items: flex-start;
}

/* LEFT SIDE */
.left-content {
  flex: 2.5;
}

/* ================= TEST CARD ================= */
.test-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 22px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.25s;
}

.test-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* LEFT CONTENT */
.test-left h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

/* META */
.meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 10px;
}

/* BOTTOM */
.bottom {
  display: flex;
  gap: 18px;
  font-size: 14px;
}

.link {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
}

.link:hover {
  text-decoration: underline;
}

.lang {
  color: #2563eb;
}

/* ================= RIGHT BUTTON BOX ================= */
.test-right {
  background: #f9fafb;
  padding: 25px 35px;
  border-radius: 12px;
}

/* BUTTON */
.start-btn {
  background: linear-gradient(90deg, #2f80ed, #56ccf2);
  color: #fff;
  padding: 12px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s;
  display: inline-block;
}

.start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(47,128,237,0.3);
}

/* ================= RIGHT SIDEBAR ================= */
.right-sidebar {
  flex: 1;
  max-width: 300px;
  position: sticky;
  top: 20px;
}

/* SIDEBAR TITLE */
.right-sidebar h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #111827;
}

/* RELATED CARDS */
.related-card {
  display: block;
  background: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  transition: 0.25s;
}

.related-card:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .main-layout {
    flex-direction: column;
  }

  .right-sidebar {
    max-width: 100%;
  }

  .test-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .test-right {
    width: 100%;
    text-align: center;
  }

  .start-btn {
    width: 100%;
  }
}
/* ================= SIDEBAR BOX ================= */
.sidebar-box {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* TITLE */
.sidebar-box h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #111827;
}

/* ================= RELATED CARD ================= */
.related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: 0.25s;
  border: 1px solid transparent;
}

/* HOVER */
.related-card:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
  transform: translateX(3px);
}

/* LEFT IMAGE */
.related-left img {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
}

/* RIGHT CONTENT */
.related-right p {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 3px;
}

.related-right span {
  font-size: 12px;
  color: #6b7280;
}
/* ================= SEO SECTION ================= */
.seo-content {
  background: #f9fafb;
  padding: 60px 0;
}

/* WRAPPER (CARD STYLE) */
.seo-content .container {
  background: #ffffff;
  padding: 35px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* ================= HEADINGS ================= */
.seo-content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #111827;
  line-height: 1.4;
}

.seo-content h3 {
  font-size: 19px;
  margin-top: 30px;
  margin-bottom: 12px;
  color: #111827;
  position: relative;
  padding-left: 12px;
}

/* LEFT BORDER ACCENT */
.seo-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #06b6d4, #22c55e);
  border-radius: 2px;
}

/* ================= TEXT ================= */
.seo-content p {
  font-size: 15px;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ================= LIST ================= */
.seo-content ul,
.seo-content ol {
  margin-top: 10px;
  padding-left: 0;
}

/* REMOVE DEFAULT BULLETS */
.seo-content li {
  list-style: none;
  margin-bottom: 10px;
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* CUSTOM CHECK ICON */
.seo-content ul li::before {
  content: "✔";
  color: #22c55e;
  font-weight: bold;
  font-size: 14px;
  margin-top: 2px;
}

/* NUMBERED LIST STYLE */
.seo-content ol li::before {
  content: counter(item) ".";
  counter-increment: item;
  color: #06b6d4;
  font-weight: 600;
}

.seo-content ol {
  counter-reset: item;
}

/* ================= TABLE ================= */
.exam-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  border-radius: 12px;
  overflow: hidden;
}

/* TABLE HEADER */
.exam-table th {
  background: linear-gradient(90deg, #f1f5f9, #f9fafb);
  color: #111827;
  font-weight: 600;
}

/* CELLS */
.exam-table th,
.exam-table td {
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: left;
  font-size: 14px;
}

/* ROW HOVER */
.exam-table tr:hover {
  background: #f9fafb;
}

/* ================= HIGHLIGHT BOX ================= */
.seo-highlight {
  background: #ecfeff;
  border: 1px solid #cffafe;
  padding: 15px;
  border-radius: 10px;
  margin-top: 15px;
  font-size: 14px;
  color: #0f172a;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .seo-content .container {
    padding: 20px;
  }

  .seo-content h2 {
    font-size: 22px;
  }

  .seo-content h3 {
    font-size: 17px;
  }
}
/* ================= FEATURE TABLE ================= */
.feature-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

/* HEADER */
.feature-table th {
  background: linear-gradient(90deg, #f1f5f9, #f9fafb);
  color: #111827;
  font-weight: 600;
  padding: 14px;
  text-align: left;
  font-size: 14px;
}

/* CELLS */
.feature-table td {
  padding: 14px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #374151;
}

/* ROW HOVER */
.feature-table tr:hover {
  background: #f9fafb;
}

/* FIRST COLUMN HIGHLIGHT */
.feature-table td:first-child {
  font-weight: 600;
  color: #111827;
}
/* ================= FAQ SECTION ================= */
.faq-section {
  background: #f5f7fb;
  padding: 70px 0;
}

/* WRAPPER CARD */
.faq-section .container {
  background: #ffffff;
  padding: 35px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* TITLE */
.faq-section h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #111827;
  text-align: center;
}

/* ================= FAQ ITEM ================= */
.faq-item {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
  position: relative;
  cursor: pointer;
}

/* LEFT ACCENT BAR */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #2f80ed, #56ccf2);
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: 0.3s;
}

/* HOVER EFFECT */
.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.faq-item:hover::before {
  opacity: 1;
}

/* ================= QUESTION ================= */
.faq-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ADD "+" ICON STYLE */
.faq-item h3::after {
  content: "+";
  font-size: 18px;
  color: #6b7280;
  transition: 0.3s;
}

/* ================= ANSWER ================= */
.faq-item p {
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
  margin-top: 8px;
}

/* ================= ACTIVE STATE (OPTIONAL JS) ================= */
.faq-item.active h3::after {
  content: "−";
  color: #2f80ed;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .faq-section .container {
    padding: 20px;
  }

  .faq-section h2 {
    font-size: 22px;
  }
}

/*==================================================
    PREMIUM MOCK TEST CSS - PART 2A
==================================================*/

:root{

--primary:#2563eb;
--primary2:#1d4ed8;
--success:#16a34a;
--warning:#f59e0b;
--danger:#ef4444;

--dark:#0f172a;
--text:#334155;
--light:#64748b;

--border:#e5e7eb;

--bg:#f8fafc;

--radius:22px;

--shadow-sm:0 6px 20px rgba(15,23,42,.05);
--shadow:0 15px 40px rgba(15,23,42,.08);
--shadow-lg:0 30px 70px rgba(15,23,42,.12);

}

/*=====================================*/

.test-series{

padding:70px 0;

background:
radial-gradient(circle at top left,#dbeafe 0%,transparent 30%),
radial-gradient(circle at bottom right,#dcfce7 0%,transparent 35%),
linear-gradient(#f8fbff,#ffffff);

}

.test-series .container{

max-width:1280px;

margin:auto;

padding:0 18px;

}

/*=====================================
FILTER BAR
=====================================*/

.filter-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:35px;

flex-wrap:wrap;

}

.filter-left{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.filter-chip{

display:flex;

align-items:center;

gap:10px;

padding:13px 22px;

background:#fff;

border:1px solid var(--border);

border-radius:100px;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.35s;

box-shadow:var(--shadow-sm);

}

.filter-chip:hover{

transform:translateY(-3px);

color:var(--primary);

border-color:#bfdbfe;

}

.filter-chip.active{

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

border:none;

}

.filter-chip i{

font-size:15px;

}

.filter-right{

font-size:15px;

font-weight:600;

color:var(--light);

}

.filter-right strong{

color:var(--primary);

font-size:18px;

}

/*=====================================
FEATURED
=====================================*/

.featured-box{

display:grid;

grid-template-columns:1.5fr 320px;

gap:35px;

padding:45px;

margin-bottom:45px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

border-radius:28px;

overflow:hidden;

position:relative;

box-shadow:0 25px 60px rgba(37,99,235,.25);

}

.featured-box::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:240px;

height:240px;

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

border-radius:50%;

}

.featured-box::after{

content:"";

position:absolute;

left:-120px;

bottom:-120px;

width:280px;

height:280px;

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

border-radius:50%;

}

.featured-left{

position:relative;

z-index:2;

}

.featured-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

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

border-radius:100px;

color:#fff;

font-size:14px;

font-weight:700;

backdrop-filter:blur(8px);

}

.featured-left h2{

font-size:40px;

font-weight:800;

color:#fff;

margin:22px 0;

line-height:1.2;

}

.featured-left p{

font-size:17px;

line-height:1.8;

color:rgba(255,255,255,.9);

margin-bottom:30px;

}

.featured-meta{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:35px;

}

.featured-meta span{

display:flex;

align-items:center;

gap:8px;

padding:10px 16px;

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

border-radius:50px;

font-size:14px;

font-weight:600;

color:#fff;

backdrop-filter:blur(8px);

}

.featured-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:17px 36px;

background:#fff;

color:#1d4ed8;

font-weight:700;

font-size:16px;

border-radius:16px;

text-decoration:none;

transition:.35s;

}

.featured-btn:hover{

transform:translateY(-4px);

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

}

/*=====================================
RIGHT SCORE
=====================================*/

.featured-right{

display:flex;

align-items:center;

justify-content:center;

position:relative;

z-index:2;

}

.score-card{

width:100%;

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

backdrop-filter:blur(18px);

padding:25px;

border-radius:24px;

display:flex;

flex-direction:column;

gap:18px;

}

.score-card div{

padding:18px;

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

border-radius:18px;

text-align:center;

}

.score-card strong{

display:block;

font-size:28px;

font-weight:800;

color:#fff;

margin-bottom:8px;

}

.score-card span{

font-size:14px;

color:#fff;

opacity:.9;

}

/*=====================================
SECTION HEADER
=====================================*/

.list-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:30px;

}

.list-header h3{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:800;

color:var(--dark);

margin-bottom:8px;

}

.list-header p{

color:var(--light);

font-size:15px;

}

.list-header select{

height:52px;

padding:0 18px;

border-radius:14px;

border:1px solid var(--border);

background:#fff;

font-size:15px;

font-weight:600;

outline:none;

cursor:pointer;

transition:.3s;

}

.list-header select:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(37,99,235,.08);

}

/*=====================================
TEST LIST WRAPPER
=====================================*/

.test-list-wrapper{

display:flex;

flex-direction:column;

gap:22px;

}

/*==================================================
    PREMIUM TEST CARDS
==================================================*/

.test-card{

display:flex;
align-items:center;
justify-content:space-between;
gap:30px;

background:#fff;

border:1px solid #e8edf5;

border-radius:24px;

padding:28px;

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:0 8px 30px rgba(15,23,42,.05);

}

.test-card::before{

content:"";

position:absolute;

left:0;
top:0;

width:5px;
height:100%;

background:linear-gradient(180deg,#2563eb,#22c55e);

}

.test-card:hover{

transform:translateY(-6px);

box-shadow:
0 20px 50px rgba(37,99,235,.12);

border-color:#bfdbfe;

}

/*=================================
NUMBER
=================================*/

.test-number{

width:70px;
height:70px;

min-width:70px;

display:flex;

align-items:center;
justify-content:center;

border-radius:20px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:24px;

font-weight:800;

box-shadow:
0 15px 35px rgba(37,99,235,.25);

}

/*=================================
INFO
=================================*/

.test-info{

flex:1;

}

.test-info h3{

font-size:26px;

font-weight:700;

margin:18px 0;

color:#0f172a;

line-height:1.4;

}

/*=================================
BADGES
=================================*/

.test-top{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:7px 16px;

border-radius:50px;

font-size:13px;

font-weight:700;

}

.badge.latest{

background:#dbeafe;

color:#2563eb;

}

.badge.free{

background:#dcfce7;

color:#15803d;

}

.badge.easy{

background:#ecfdf5;

color:#15803d;

}

.badge.medium{

background:#fef3c7;

color:#b45309;

}

.badge.hard{

background:#fee2e2;

color:#b91c1c;

}

/*=================================
META
=================================*/

.test-meta{

display:flex;

gap:22px;

flex-wrap:wrap;

margin:18px 0;

}

.test-meta span{

display:flex;

align-items:center;

gap:8px;

font-size:15px;

font-weight:600;

color:#64748b;

}

.test-meta i{

color:#2563eb;

}

/*=================================
FEATURES
=================================*/

.test-features{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:18px;

}

.test-features span{

padding:10px 16px;

border-radius:50px;

background:#f8fafc;

border:1px solid #e2e8f0;

font-size:14px;

font-weight:600;

color:#334155;

transition:.3s;

}

.test-features span:hover{

background:#2563eb;

border-color:#2563eb;

color:#fff;

}

/*=================================
ACTION
=================================*/

.test-action{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:15px;

min-width:220px;

}

.start-btn{

display:flex;

align-items:center;

justify-content:center;

width:190px;

height:56px;

border-radius:16px;

background:
linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:16px;

font-weight:700;

text-decoration:none;

transition:.35s;

position:relative;

overflow:hidden;

box-shadow:
0 15px 35px rgba(37,99,235,.25);

}

.start-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transform:skewX(-20deg);

transition:.8s;

}

.start-btn:hover::before{

left:150%;

}

.start-btn:hover{

transform:translateY(-3px);

box-shadow:
0 25px 45px rgba(37,99,235,.35);

}

/*=================================
ATTEMPTS
=================================*/

.test-attempt{

font-size:13px;

font-weight:600;

color:#64748b;

}

/*=================================
STATUS
=================================*/

.test-status{

display:flex;

gap:10px;

margin-top:18px;

flex-wrap:wrap;

}

.status{

padding:8px 14px;

border-radius:50px;

font-size:12px;

font-weight:700;

}

.status.new{

background:#ecfeff;

color:#0891b2;

}

.status.updated{

background:#eef2ff;

color:#4338ca;

}

.status.popular{

background:#fff7ed;

color:#ea580c;

}

/*=================================
HOVER EFFECT
=================================*/

.test-card:hover .test-number{

transform:rotate(-8deg) scale(1.05);

transition:.35s;

}

.test-card:hover h3{

color:#2563eb;

transition:.3s;

}

/*=================================
LOAD MORE
=================================*/

.load-more-wrapper{

margin-top:35px;

text-align:center;

}

.load-more{

padding:16px 40px;

border:none;

border-radius:14px;

background:#fff;

border:2px solid #2563eb;

color:#2563eb;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.load-more:hover{

background:#2563eb;

color:#fff;

transform:translateY(-3px);

box-shadow:
0 15px 35px rgba(37,99,235,.2);

}

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

@media (max-width:1200px){

.featured-box{

grid-template-columns:1fr;

}

.featured-right{

justify-content:flex-start;

}

.score-card{

max-width:420px;

}

}

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

@media (max-width:992px){

.test-series{

padding:50px 0;

}

.filter-wrapper{

flex-direction:column;

align-items:flex-start;

}

.filter-left{

overflow:auto;

width:100%;

padding-bottom:8px;

scrollbar-width:none;

}

.filter-left::-webkit-scrollbar{

display:none;

}

.filter-chip{

white-space:nowrap;

}

.list-header{

flex-direction:column;

align-items:flex-start;

}

.list-header select{

width:100%;

}

.test-card{

flex-direction:column;

align-items:flex-start;

}

.test-number{

width:65px;

height:65px;

font-size:22px;

}

.test-action{

width:100%;

}

.start-btn{

width:100%;

}

}

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

@media (max-width:768px){

.test-series{

padding:35px 0;

}

.test-series .container{

padding:0 15px;

}

/* Featured */

.featured-box{

padding:25px;

border-radius:22px;

}

.featured-left h2{

font-size:30px;

}

.featured-left p{

font-size:15px;

}

.featured-meta{

gap:10px;

}

.featured-meta span{

font-size:13px;

padding:8px 12px;

}

.featured-btn{

width:100%;

}

/* Score */

.score-card{

padding:20px;

}

.score-card strong{

font-size:24px;

}

/* Filter */

.filter-wrapper{

margin-bottom:25px;

}

.filter-left{

display:flex;

flex-wrap:nowrap;

overflow:auto;

}

.filter-chip{

padding:12px 18px;

font-size:13px;

}

/* Heading */

.list-header h3{

font-size:24px;

}

.list-header p{

font-size:14px;

}

/* Cards */

.test-card{

padding:20px;

gap:20px;

}

.test-info h3{

font-size:20px;

}

.test-meta{

display:grid;

grid-template-columns:1fr;

gap:10px;

}

.test-features{

display:grid;

grid-template-columns:1fr;

gap:10px;

}

.test-features span{

justify-content:center;

text-align:center;

}

.test-number{

width:55px;

height:55px;

font-size:20px;

border-radius:16px;

}

.start-btn{

height:52px;

font-size:15px;

}

}

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

@media (max-width:480px){

.featured-left h2{

font-size:25px;

}

.featured-left p{

font-size:14px;

line-height:1.7;

}

.featured-meta{

display:grid;

grid-template-columns:1fr;

}

.score-card{

width:100%;

}

.filter-chip{

padding:11px 16px;

font-size:12px;

}

.list-header h3{

font-size:21px;

}

.list-header select{

height:48px;

font-size:14px;

}

.test-card{

padding:18px;

}

.test-info h3{

font-size:18px;

}

.test-number{

width:48px;

height:48px;

font-size:18px;

}

.start-btn{

height:50px;

font-size:14px;

}

.load-more{

width:100%;

}

}

/*==========================================
 GLASS EFFECT
==========================================*/

.featured-box,
.test-card{

backdrop-filter:blur(12px);

}

/*==========================================
 STICKY FILTER
==========================================*/

.filter-wrapper{

position:sticky;

top:80px;

z-index:100;

padding:14px;

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

backdrop-filter:blur(18px);

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

/*==========================================
 CARD ANIMATION
==========================================*/

.test-card{

animation:fadeUp .5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}

/*==========================================
 FLOATING FEATURED
==========================================*/

.featured-box{

animation:floatCard 6s ease-in-out infinite;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

/*==========================================
 BUTTON RIPPLE
==========================================*/

.start-btn{

position:relative;

overflow:hidden;

}

.start-btn::after{

content:"";

position:absolute;

width:20px;

height:20px;

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

border-radius:50%;

transform:scale(0);

opacity:0;

transition:.5s;

}

.start-btn:active::after{

transform:scale(12);

opacity:1;

transition:0s;

}

/*==========================================
 CARD BORDER
==========================================*/

.test-card{

border:1px solid transparent;

background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#dbeafe,#dcfce7) border-box;

}

/*==========================================
 PREMIUM SHADOW
==========================================*/

.test-card:hover{

box-shadow:

0 30px 60px rgba(37,99,235,.12),

0 10px 20px rgba(0,0,0,.05);

}

/*==========================================
 FEATURED GLOW
==========================================*/

.featured-box{

box-shadow:

0 30px 70px rgba(37,99,235,.25);

}

/*==========================================
 FILTER ACTIVE
==========================================*/

.filter-chip.active{

box-shadow:

0 10px 25px rgba(37,99,235,.3);

}

/*==========================================
 SMOOTH
==========================================*/

html{

scroll-behavior:smooth;

}

*{

box-sizing:border-box;

}

img{

max-width:100%;

display:block;

}

/*=========================================
 PREMIUM SEARCH
=========================================*/

.series-search{
    position:relative;
    margin:35px 0;
}

.series-search input{

width:100%;

height:65px;

padding:0 70px 0 58px;

border-radius:18px;

border:2px solid #edf2f7;

background:#fff;

font-size:16px;

font-weight:500;

transition:.35s;

box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.series-search input:focus{

outline:none;

border-color:#2563eb;

box-shadow:
0 0 0 5px rgba(37,99,235,.08);

}

.series-search i{

position:absolute;

left:22px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:#94a3b8;

}

/*=========================================
 RESULT BAR
=========================================*/

.result-bar{

display:flex;

justify-content:space-between;

align-items:center;

margin:25px 0;

padding:18px 22px;

background:#fff;

border-radius:18px;

border:1px solid #edf2f7;

box-shadow:0 6px 18px rgba(0,0,0,.04);

}

.result-left{

font-size:15px;

font-weight:600;

color:#64748b;

}

.result-left strong{

color:#2563eb;

font-size:18px;

}

.result-right{

display:flex;

gap:10px;

flex-wrap:wrap;

}

/*=========================================
 FILTER BADGES
=========================================*/

.result-right span{

padding:8px 14px;

border-radius:40px;

background:#eff6ff;

color:#2563eb;

font-size:13px;

font-weight:700;

}

/*=========================================
 CARD FOOTER
=========================================*/

.card-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

padding-top:18px;

border-top:1px solid #edf2f7;

}

.students{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

font-weight:600;

color:#64748b;

}

.students i{

color:#2563eb;

}

.rating{

display:flex;

align-items:center;

gap:6px;

font-size:14px;

font-weight:700;

color:#f59e0b;

}

/*=========================================
 EXAM TAG
=========================================*/

.exam-tag{

display:inline-flex;

align-items:center;

gap:8px;

padding:9px 16px;

background:#ecfeff;

border-radius:50px;

font-size:13px;

font-weight:700;

color:#0891b2;

margin-bottom:15px;

}

/*=========================================
 SHINE CARD
=========================================*/

.test-card{

overflow:hidden;

}

.test-card::after{

content:"";

position:absolute;

top:0;

left:-150%;

width:80px;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent);

transform:skewX(-20deg);

transition:1.1s;

}

.test-card:hover::after{

left:130%;

}

/*=========================================
 PULSE
=========================================*/

.badge.latest{

animation:pulseBadge 2s infinite;

}

@keyframes pulseBadge{

0%{

box-shadow:0 0 0 0 rgba(37,99,235,.35);

}

70%{

box-shadow:0 0 0 12px rgba(37,99,235,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,99,235,0);

}

}

/*=========================================
 FEATURED LABEL
=========================================*/

.featured-label{

position:absolute;

right:-42px;

top:24px;

transform:rotate(45deg);

background:#22c55e;

padding:10px 55px;

color:#fff;

font-size:12px;

font-weight:700;

letter-spacing:.8px;

}

/*=========================================
 EMPTY STATE
=========================================*/

.no-result{

display:none;

padding:70px 20px;

text-align:center;

background:#fff;

border-radius:24px;

border:2px dashed #dbeafe;

}

.no-result i{

font-size:60px;

color:#94a3b8;

margin-bottom:20px;

}

.no-result h3{

font-size:26px;

margin-bottom:10px;

color:#0f172a;

}

.no-result p{

font-size:15px;

color:#64748b;

}

/*=========================================
 QUICK STATS
=========================================*/

.quick-stats{

display:grid;

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

gap:18px;

margin:35px 0;

}

.quick-box{

background:#fff;

padding:24px;

border-radius:20px;

text-align:center;

border:1px solid #edf2f7;

transition:.35s;

}

.quick-box:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(37,99,235,.08);

}

.quick-box strong{

display:block;

font-size:28px;

color:#2563eb;

margin-bottom:10px;

}

.quick-box span{

font-size:14px;

font-weight:600;

color:#64748b;

}

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

@media(max-width:768px){

.quick-stats{

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

}

.result-bar{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.card-footer{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

}

@media(max-width:480px){

.quick-stats{

grid-template-columns:1fr;

}

}

/*====================================
Continue
====================================*/

.continue-box{

display:flex;

justify-content:space-between;

align-items:center;

padding:28px;

margin:35px 0;

border-radius:24px;

background:linear-gradient(135deg,#eff6ff,#fff);

border:1px solid #dbeafe;

}

.continue-left span{

font-size:13px;

font-weight:700;

color:#2563eb;

text-transform:uppercase;

}

.continue-left h3{

margin:8px 0;

font-size:24px;

}

.continue-left p{

color:#64748b;

}

/*====================================
Bookmark
====================================*/

.card-actions{

position:absolute;

right:22px;

top:22px;

}

.bookmark-btn{

width:42px;

height:42px;

border:none;

cursor:pointer;

border-radius:50%;

background:#f8fafc;

transition:.3s;

}

.bookmark-btn:hover{

background:#2563eb;

color:#fff;

}

.bookmark-btn.saved{

background:#2563eb;

color:#fff;

}

/*====================================
Toast
====================================*/

#toast{

position:fixed;

bottom:35px;

right:35px;

padding:16px 28px;

background:#111827;

color:#fff;

border-radius:14px;

font-weight:600;

opacity:0;

pointer-events:none;

transition:.4s;

z-index:9999;

}

#toast.show{

opacity:1;

}

/*==========================================
RECENT SECTION
==========================================*/

.recent-section{

margin:45px 0;

}

.section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.section-tag{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 15px;

background:#eff6ff;

color:#2563eb;

border-radius:50px;

font-size:13px;

font-weight:700;

margin-bottom:12px;

}

.section-header h2{

font-size:32px;

font-weight:800;

color:#0f172a;

}

.view-all{

font-weight:700;

text-decoration:none;

color:#2563eb;

}

/*==========================================
CAROUSEL
==========================================*/

.recent-carousel{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:20px;

}

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

.recent-card{

background:#fff;

border:1px solid #e5e7eb;

border-radius:22px;

padding:25px;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}

.recent-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(37,99,235,.12);

}

.recent-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#2563eb,#22c55e);

}

.recent-card h3{

font-size:20px;

margin:18px 0;

line-height:1.5;

color:#0f172a;

}

.recent-meta{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:20px;

}

.recent-meta span{

padding:8px 14px;

background:#f8fafc;

border-radius:50px;

font-size:13px;

font-weight:600;

}

.recent-progress{

margin:20px 0;

}

.progress-bar{

height:8px;

background:#e2e8f0;

border-radius:20px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:linear-gradient(90deg,#2563eb,#22c55e);

border-radius:20px;

}

.progress-text{

margin-top:8px;

font-size:13px;

font-weight:700;

color:#2563eb;

}

.continue-test{

display:flex;

justify-content:center;

align-items:center;

height:48px;

border-radius:14px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.continue-test:hover{

transform:translateY(-3px);

}

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

@media(max-width:768px){

.recent-carousel{

grid-template-columns:1fr;

}

.section-header{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

.section-header h2{

font-size:26px;

}

}

/*=========================================
FEATURED
=========================================*/

.featured-box{

display:grid;

grid-template-columns:1.7fr 340px;

gap:35px;

padding:45px;

border-radius:30px;

background:

linear-gradient(135deg,#2563eb,#1d4ed8);

position:relative;

overflow:hidden;

box-shadow:

0 25px 60px rgba(37,99,235,.25);

}

.featured-box::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:280px;

height:280px;

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

border-radius:50%;

}

.featured-box::after{

content:"";

position:absolute;

left:-150px;

bottom:-150px;

width:320px;

height:320px;

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

border-radius:50%;

}

/*=====================*/

.featured-left{

position:relative;

z-index:2;

}

.featured-top{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-bottom:20px;

}

.featured-tag,

.featured-rating{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:100px;

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

backdrop-filter:blur(10px);

font-size:14px;

font-weight:700;

color:#fff;

}

.featured-rating i{

color:#FFD54A;

}

.featured-left h2{

font-size:42px;

font-weight:800;

line-height:1.2;

color:#fff;

margin-bottom:20px;

}

.featured-left p{

font-size:17px;

line-height:1.8;

color:rgba(255,255,255,.92);

margin-bottom:30px;

}

/*=====================*/

.featured-meta{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:35px;

}

.featured-meta span{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

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

border-radius:50px;

font-size:14px;

font-weight:600;

color:#fff;

backdrop-filter:blur(10px);

}

/*=====================*/

.featured-bottom{

display:flex;

align-items:center;

gap:25px;

flex-wrap:wrap;

}

.featured-btn{

display:flex;

align-items:center;

gap:12px;

padding:18px 34px;

background:#fff;

color:#1d4ed8;

font-size:16px;

font-weight:700;

border-radius:16px;

text-decoration:none;

transition:.35s;

box-shadow:

0 15px 35px rgba(0,0,0,.15);

}

.featured-btn:hover{

transform:translateY(-4px);

}

.attempt-info{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:700;

color:#fff;

}

/*=====================*/

.score-card{

display:grid;

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

gap:15px;

}

.score-item{

padding:22px;

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

backdrop-filter:blur(12px);

border-radius:18px;

text-align:center;

transition:.35s;

}

.score-item:hover{

transform:translateY(-4px);

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

}

.score-item strong{

display:block;

font-size:24px;

font-weight:800;

color:#fff;

margin-bottom:8px;

}

.score-item span{

font-size:13px;

font-weight:600;

color:rgba(255,255,255,.9);

}

/*=====================
Mobile
=====================*/

@media(max-width:992px){

.featured-box{

grid-template-columns:1fr;

padding:30px;

}

.featured-left h2{

font-size:34px;

}

}

@media(max-width:768px){

.featured-left h2{

font-size:28px;

}

.featured-bottom{

flex-direction:column;

align-items:flex-start;

}

.score-card{

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

}

}

@media(max-width:480px){

.featured-box{

padding:22px;

}

.featured-left h2{

font-size:24px;

}

.score-card{

grid-template-columns:1fr;

}

.featured-meta{

display:grid;

grid-template-columns:1fr;

}

.featured-btn{

width:100%;

justify-content:center;

}

}

/*============================*/

.explore-series{

padding:80px 0;

background:#fff;

}

.section-title{

text-align:center;

max-width:700px;

margin:auto auto 50px;

}

.section-title span{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:50px;

background:#eff6ff;

color:#2563eb;

font-size:14px;

font-weight:700;

margin-bottom:20px;

}

.section-title h2{

font-size:42px;

font-weight:800;

margin-bottom:18px;

color:#0f172a;

}

.section-title p{

font-size:17px;

color:#64748b;

line-height:1.8;

}

.series-grid{

display:grid;

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

gap:25px;

}

.series-card{

display:flex;

align-items:center;

gap:20px;

padding:25px;

background:#fff;

border-radius:24px;

text-decoration:none;

border:1px solid #e5e7eb;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}

.series-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:linear-gradient(#2563eb,#22c55e);

}

.series-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 45px rgba(37,99,235,.12);

border-color:#bfdbfe;

}

.series-icon{

width:72px;

height:72px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:#f8fafc;

border:1px solid #e5e7eb;

}

.series-icon img{

width:48px;

height:48px;

object-fit:contain;

}

.series-body{

flex:1;

}

.series-body h3{

font-size:22px;

margin-bottom:8px;

color:#0f172a;

}

.series-body p{

font-size:15px;

color:#64748b;

margin-bottom:15px;

}

.series-meta{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.series-meta span{

font-size:13px;

font-weight:700;

color:#2563eb;

display:flex;

align-items:center;

gap:6px;

}

.series-card .fa-arrow-right{

font-size:20px;

color:#94a3b8;

transition:.3s;

}

.series-card:hover .fa-arrow-right{

transform:translateX(6px);

color:#2563eb;

}

@media(max-width:992px){

.series-grid{

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

}

}

@media(max-width:768px){

.section-title h2{

font-size:30px;

}

.series-grid{

grid-template-columns:1fr;

}

.series-card{

padding:20px;

}

}
/* ==========================================================
   MOBILE FIX OVERRIDE
   Put this at the END of your CSS
========================================================== */

@media only screen and (max-width:991px){

.test-list,
.test-list *{
box-sizing:border-box !important;
}

/* Layout */

.main-layout,
.series-left,
.right-sidebar,
.explore-series,
.test-list .container{

display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;

}

.test-list .container{

padding:0 15px !important;

}

/* ===================================
FILTER BAR
=================================== */

.filter-wrapper{

display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:15px !important;

padding:16px !important;

}

.filter-left{

display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
overflow-y:hidden !important;

width:100% !important;

gap:10px !important;

padding-bottom:8px !important;

scrollbar-width:none !important;

}

.filter-left::-webkit-scrollbar{

display:none !important;

}

.filter-chip{

white-space:nowrap !important;

flex:0 0 auto !important;

padding:12px 18px !important;

font-size:13px !important;

}

/* ===================================
FEATURED
=================================== */

.featured-box{

display:flex !important;

flex-direction:column !important;

padding:22px !important;

gap:25px !important;

border-radius:22px !important;

}

.featured-left{

width:100% !important;

}

.featured-right{

width:100% !important;

}

.featured-left h2{

font-size:28px !important;

line-height:1.3 !important;

}

.featured-left p{

font-size:15px !important;

}

.featured-meta{

display:grid !important;

grid-template-columns:1fr 1fr !important;

gap:10px !important;

}

.featured-meta span{

justify-content:center !important;

text-align:center !important;

padding:10px !important;

font-size:13px !important;

}

.featured-bottom{

display:flex !important;

flex-direction:column !important;

align-items:stretch !important;

gap:15px !important;

}

.featured-btn{

width:100% !important;

justify-content:center !important;

}

.attempt-info{

justify-content:center !important;

}

/* ===================================
SCORE CARD
=================================== */

.score-card{

display:grid !important;

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

gap:12px !important;

width:100% !important;

}

.score-item{

padding:18px !important;

}

.score-item strong{

font-size:20px !important;

}

/* ===================================
HEADER
=================================== */

.list-header{

display:flex !important;

flex-direction:column !important;

align-items:flex-start !important;

gap:18px !important;

}

.list-header select{

width:100% !important;

}

/* ===================================
TEST CARD
=================================== */

.test-card{

display:flex !important;

flex-direction:column !important;

align-items:flex-start !important;

gap:18px !important;

padding:20px !important;

position:relative !important;

}

.test-number{

width:56px !important;

height:56px !important;

min-width:56px !important;

font-size:18px !important;

}

.test-info{

width:100% !important;

}

.test-info h3{

font-size:20px !important;

line-height:1.4 !important;

}

.test-top{

display:flex !important;

flex-wrap:wrap !important;

gap:8px !important;

}

.test-meta{

display:grid !important;

grid-template-columns:1fr !important;

gap:10px !important;

}

.test-features{

display:grid !important;

grid-template-columns:1fr !important;

gap:10px !important;

}

.test-features span{

justify-content:center !important;

text-align:center !important;

}

.test-action{

width:100% !important;

}

.start-btn{

width:100% !important;

justify-content:center !important;

}

.card-actions{

position:absolute !important;

top:16px !important;

right:16px !important;

}

/* ===================================
EXPLORE SECTION
=================================== */

.section-title{

text-align:center !important;

margin-bottom:30px !important;

}

.section-title h2{

font-size:28px !important;

}

.section-title p{

font-size:15px !important;

}

.series-grid{

display:grid !important;

grid-template-columns:1fr !important;

gap:18px !important;

}

.series-card{

display:flex !important;

align-items:center !important;

padding:18px !important;

gap:15px !important;

}

.series-icon{

width:60px !important;

height:60px !important;

}

.series-icon img{

width:40px !important;

height:40px !important;

}

.series-body h3{

font-size:18px !important;

}

.series-body p{

font-size:14px !important;

}

.series-meta{

display:flex !important;

flex-wrap:wrap !important;

gap:10px !important;

}

}

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

@media only screen and (max-width:480px){

.featured-left h2{

font-size:23px !important;

}

.featured-meta{

grid-template-columns:1fr !important;

}

.score-card{

grid-template-columns:1fr !important;

}

.test-title{

font-size:26px !important;

}

.list-header h3{

font-size:22px !important;

}

.test-info h3{

font-size:18px !important;

}

.series-card{

padding:16px !important;

}

.filter-chip{

font-size:12px !important;

padding:10px 14px !important;

}

}
/*==================================================
 WHY CHOOSE SECTION
==================================================*/

.why-mock{

padding:90px 0;

background:#fff;

}

.why-mock .container{

max-width:1280px;

margin:auto;

padding:0 20px;

}

/*========================*/

.why-wrapper{

display:grid;

grid-template-columns:480px 1fr;

gap:70px;

align-items:start;

}

/*========================
LEFT
========================*/

.section-tag{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:40px;

background:#eef5ff;

color:#2563eb;

font-size:14px;

font-weight:700;

margin-bottom:20px;

}

.section-tag i{

font-size:14px;

}

.why-left h2{

font-size:46px;

font-weight:800;

line-height:1.2;

color:#111827;

margin-bottom:22px;

}

.why-left p{

font-size:17px;

line-height:1.9;

color:#6b7280;

margin-bottom:35px;

}

/*========================
STATS
========================*/

.why-stats{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.why-stats div{

background:#f8fafc;

padding:22px;

border-radius:18px;

border:1px solid #edf2f7;

transition:.3s;

}

.why-stats div:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(37,99,235,.08);

}

.why-stats strong{

display:block;

font-size:30px;

font-weight:800;

color:#2563eb;

margin-bottom:8px;

}

.why-stats span{

font-size:14px;

font-weight:600;

color:#64748b;

}

/*========================
BUTTON
========================*/

.why-btn{

display:inline-flex;

align-items:center;

justify-content:center;

height:58px;

padding:0 32px;

border-radius:16px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:16px;

font-weight:700;

text-decoration:none;

transition:.35s;

box-shadow:0 15px 35px rgba(37,99,235,.18);

}

.why-btn:hover{

transform:translateY(-4px);

box-shadow:0 22px 40px rgba(37,99,235,.28);

}

/*========================
RIGHT
========================*/

.why-right{

display:grid;

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

gap:22px;

}

/*========================
FEATURE
========================*/

.feature-box{

display:flex;

gap:18px;

padding:24px;

border-radius:20px;

background:#fff;

border:1px solid #edf2f7;

transition:.35s;

}

.feature-box:hover{

transform:translateY(-5px);

border-color:#bfdbfe;

box-shadow:0 18px 40px rgba(37,99,235,.08);

}

.feature-box i{

width:56px;

height:56px;

min-width:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:#eff6ff;

color:#2563eb;

font-size:22px;

transition:.3s;

}

.feature-box:hover i{

background:#2563eb;

color:#fff;

transform:rotate(-8deg);

}

.feature-box h3{

font-size:20px;

font-weight:700;

color:#111827;

margin:0 0 10px;

line-height:1.3;

}

.feature-box p{

font-size:15px;

line-height:1.8;

color:#6b7280;

margin:0;

}

/*========================
ANIMATION
========================*/

.feature-box{

animation:fadeUp .5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}

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

@media(max-width:1100px){

.why-wrapper{

grid-template-columns:1fr;

gap:50px;

}

}

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

@media(max-width:768px){

.why-mock{

padding:60px 0;

}

.why-mock .container{

padding:0 15px;

}

.why-left{

text-align:center;

}

.section-tag{

margin:auto auto 18px;

}

.why-left h2{

font-size:32px;

}

.why-left p{

font-size:15px;

}

.why-stats{

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

}

.why-right{

grid-template-columns:1fr;

}

.feature-box{

padding:20px;

}

.feature-box h3{

font-size:18px;

}

.feature-box p{

font-size:14px;

}

.why-btn{

width:100%;

}

}

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

@media(max-width:480px){

.why-left h2{

font-size:28px;

}

.why-stats{

grid-template-columns:1fr;

}

.feature-box{

gap:14px;

padding:18px;

}

.feature-box i{

width:48px;

height:48px;

min-width:48px;

font-size:18px;

border-radius:14px;

}

.feature-box h3{

font-size:17px;

}

.feature-box p{

font-size:13px;

line-height:1.7;

}

}
/*====================================
CTA
====================================*/

.hero-buttons{

margin:35px 0 18px;

}

.main-btn{

position:relative;

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

width:100%;

max-width:520px;

padding:18px 22px;

border-radius:20px;

background:
linear-gradient(135deg,#2563eb,#1d4ed8);

text-decoration:none;

color:#fff;

overflow:hidden;

transition:.35s;

box-shadow:
0 20px 50px rgba(37,99,235,.28);

}

.main-btn:hover{

transform:translateY(-5px);

box-shadow:
0 30px 70px rgba(37,99,235,.38);

}

.main-btn::before{

content:"";

position:absolute;

left:-140%;

top:0;

width:60%;

height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transform:skewX(-20deg);

transition:1s;

}

.main-btn:hover::before{

left:150%;

}

/*================*/

.btn-icon{

width:58px;

height:58px;

min-width:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

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

font-size:20px;

backdrop-filter:blur(10px);

}

/*================*/

.btn-content{

flex:1;

display:flex;

flex-direction:column;

gap:5px;

}

.btn-title{

font-size:19px;

font-weight:800;

line-height:1.2;

}

.btn-subtitle{

font-size:13px;

opacity:.9;

font-weight:500;

}

/*================*/

.btn-badge{

padding:8px 12px;

border-radius:50px;

background:#22c55e;

font-size:11px;

font-weight:800;

letter-spacing:.6px;

box-shadow:
0 5px 15px rgba(34,197,94,.35);

}

/*====================================
TRUST
====================================*/

.hero-proof{

display:flex;

flex-wrap:wrap;

gap:20px;

margin-top:20px;

}

.proof-item{

display:flex;

align-items:center;

gap:8px;

font-size:15px;

font-weight:600;

color:#475569;

}

.proof-item i{

color:#2563eb;

}

.hero-note{

margin-top:18px;

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 18px;

background:#eff6ff;

border-radius:50px;

font-size:14px;

font-weight:600;

color:#2563eb;

}

.hero-note i{

color:#16a34a;

}

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

@media(max-width:768px){

.main-btn{

max-width:100%;

padding:16px;

}

.btn-title{

font-size:17px;

}

.btn-subtitle{

font-size:12px;

}

.hero-proof{

display:grid;

grid-template-columns:1fr;

gap:10px;

}

.hero-note{

width:100%;

justify-content:center;

text-align:center;

border-radius:14px;

}

}