*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#020914;
    color:#fff;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.6;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
    color:inherit;
}

button,
input{
    font-family:inherit;
}
/*======================================
        NAVBAR
======================================*/
.navbar{
    border-bottom:1px solid #172238;
    background:#050d18;
    padding: 15px 0;
    top: 0;
    z-index: 1000;
    position: fixed;
    width: 100%;
}
.nav-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    padding: 0 45px;
}
.nav-container h1{
    font-size: 1.8rem;
    font-family: system-ui;
    font-weight: 700;
    letter-spacing: 2px;
    color: white;
}
.nav-container span{
    color:#1677ff;
}
.nav-menu{
    display: flex;
    list-style: none;
    gap: 30px;
}
.nav-menu a{
    text-decoration: none;
    text-transform: capitalize;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition:all 0.3s ease ;
    padding: 8px ;
    letter-spacing: 1px;
    border-radius: 4px;
}
.nav-menu a:hover{
    color:#1680ff;
    border-bottom: 2px solid #1677ff;
    transform: translateY(4px);
    background: #6d7174;
}
.nav-menu a.active{
    color:#1680ff;
   border-bottom: 2px solid #1677ff;
}
.nav-menu a:active{
    font-size: 1.6rem;
}
/*======================================
        SEARCH
======================================*/
.search input{
    width:320px;
    padding:15px 18px;
    border-radius:10px;
    border:2px solid #243247;
    background:#111b2b;
    color:white;
}
.search input:focus{
    border-color:#1677ff;
    box-shadow:0 0 0 3px rgba(22,119,255,.15);
}
/*======================================
      HAMBURGER
======================================*/
.hamburger{
    display:none;
    width:32px;
    cursor:pointer;
}
.bar{
    display:block;
    height:3px;
    margin:6px 0;
    background:#fff;
    border-radius:5px;
    transition:.3s;
}
/* Breadcrumb */
.breadcrumb{
    padding:25px 55px;
    color:#ccd2d6;
    margin-top:90px;
    font-family: system-ui;
    font-weight: 700;
    font-size: 1rem;
}
/* main start */
.main-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    flex-direction: column;
}
.main-heading h1{
    font-size: 2.5rem;
    font-family: system-ui;
    font-weight: 700;
}
.main-heading h1 span{
    color: #1677ff;
    padding: 15px;
    border-radius: 50%;
    border: 2px solid #1677ff;
    box-shadow: 0 4px 20px rgba(11, 133, 255, 0.8);
}
.main-heading p{
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #ccd2d6;
    margin-top: 10px;
}

.hero-section{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* PHONE CARD */
.phone{
    text-align:center;
    display: flex;
    flex-direction: column;
}
.phone-img{
    height: 340px;
    width: 280px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(11, 133, 255, 0.8);
    border:2px solid #1677ff;
    border-radius:16px;
    margin-bottom:14px;
}
.phone-img img{
    height:100%;
    width: 100%;
    object-fit: cover;
}
.phone h4{
    font-size:20px;
    font-weight:700;
    margin-bottom:6px;
    font-family: system-ui;
}
.stars{
    font-size:15px;
    display:flex;
    gap:4px;
    justify-content:center;
    margin-bottom:12px;
    font-weight: 600;
    font-family: system-ui;
}
.stars span{
    color:#1677ff;
}
.phone p{
    font-size: 1.5rem;
    font-family: system-ui;
    font-weight: 600;
}
.sold{
    color: #28e878;
    font-weight: 600;
    font-size: 1.2rem;
    font-family: system-ui;
}
.btn{
    width:100%;
    background:#2563EB;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 0;
    font-weight:700;
    cursor:pointer;
    display:flex;
    gap:6px;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-family: system-ui;
}
.btn:hover { 
    background:#005fe0;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(22,119,255,.35); 
}
.btn:active{
    transform:scale(.98);
}
.btn:focus{
    outline:2px solid #1677ff;
    outline-offset:3px;
}

/* VERDICT CARD */
.verdict{
    background:#111b2b;
    border:2px solid #243247;
    box-shadow: 0 4px 20px rgba(10,37,64,0.8);
    border-radius:12px;
    padding:20px;
    display:flex;
    gap:16px;
    margin-bottom:24px;
}
.trophy{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#1E3A8A;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size: 40px;
}
.verdict small{
    color:#ccd2d6;
    font-size:16px;
    font-family: system-ui;
}
.verdict h2{
    color:#1677ff;
    font-size:23px;
    margin:4px 0
}
.verdict p{
    color:#ccd2d6;
    font-size:18px;
    line-height:1.5;
    font-weight: 600;
    margin-bottom: 10px;
}
.tabs-section{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}
/* TABS */
.spec-tabs{
    background:#111b2b;
    border:1px solid #243247;
    border-radius:10px;
    padding:15px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.spec-tab{
    padding:8px 14px;
    border-radius:8px;
    color:#ccd2d6;
    font-size:18px;
    font-weight: 600;
    font-family: system-ui;
    cursor:pointer;
    display:flex;
    gap:9px;
    align-items:center;
    transition:0.2s;

}
.spec-tab.active{
    background:#1E293B;
    color:#1677ff;
}
.spec-tab:hover{
    background:#1E293B;
}
.info-section{
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
margin-bottom: 50px;
    gap: 30px;
}


.pros-cons {
    gap: 20px;
    align-items: stretch; /* ye dono ko barabar height dega */
}

.pros {
    flex: 1; /* dono 50% width le lenge */
    border: 2px solid #243247;
    background: #111b2b;
    box-shadow: 0 4px 20px rgba(10,37,64,0.8);
    padding: 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.cons{
    flex: 1; /* dono 50% width le lenge */
    background: #111b2b;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.pros h3 {
    color:#38d36b;
    font-family: system-ui;
}
.cons h3 {
    color:#ff4141;
    font-family: system-ui;
 }

li{
    margin:15px 0;
    color:#ccc;
    list-style: none;
}
.pros li::before {
  content: "✓ ";
  color: #38d36b;
  font-weight: bold;
}
.cons li::before {
  content: "✓ ";
  color: #ff4141;
  font-weight: bold;
}



.tab-content{
    display:none;
}
.tab-content.active{
    display:block;
}
/* center table design */
.spec-table{
    background:#111b2b;
    border:1px solid #243247;
    border-radius:12px;
    overflow:hidden;
    width: 850px;
}
.spec-table table{
    width:100%;
    border-collapse:collapse;
    font-size:13px
}
.spec-table thead{
    background:#1677ff;
}
.spec-table th{
    padding:12px;
    text-align:left;
    font-weight:650;
    color:#ccd2d6;
    font-family: system-ui;
    font-size: 18px;
}
.spec-table td{
    padding:12px;
    border-top:1px solid #243247;
    color:#ccd2d6;
    font-size: 15px;

}
.spec-table .winner{
    color:#1677ff;
    font-weight:600;
    
}
.spec-table span{
    color: #ffff;
    font-weight: 700;
    font-family: system-ui;
    border-radius: 50%;
    border: 2px solid #22c553;
    background: #38d36b;
    filter: drop-shadow(0 0 6px rgba(34,197,94,.45));
    margin-left: 20px;
    padding: 2px;
}
.check{
    width:18px;
    height:18px;
    color:#1677ff;
    display:inline-block;
    margin-left:4px;
}
/* sltder section 4 */
.highlights-section{
    max-width:1200px;
    margin:40px auto;
    padding:0 20px
}
.section-title{
    font-size:22px;
    font-weight:700;
    color:#e2e8f0;
    margin-bottom:20px
}

.slider-wrapper{
    position:relative;
    display:flex;
    align-items:center
}
.slider-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:10px 0;
  -webkit-overflow-scrolling:touch;
}
.slider-track::-webkit-scrollbar{display:none}

.compare-card{
  flex:0 0 100%; /* MOBILE: 1 card */
  scroll-snap-align:start;
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:12px;
  padding:12px;
  transition:0.3s;
}
.compare-card:hover{
    border-color:#3b82f6
}

.card-img{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:12px
}
.card-img img{
    width:150px;
    height:80px;
    object-fit:cover;
    background:#fff;
    border-radius:8px;
}
.card-img span{
    font-size:12px;
    font-weight:700;
    color:#3b82f6;
    background:#1e293b;
    padding:4px 8px;
    border-radius:6px
}

.card-content h4{
    font-size:14px;
    color:#e2e8f0;
    margin-bottom:8px;
    line-height:1.4
}
.card-content h4 span{
    color:#3b82f6;
    font-weight:700
}
.view-btn{
    font-size:12px;
    color:#3b82f6;
    text-decoration:none;
    font-weight:600
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:#2563EB;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(37,99,235,0.4);
}
.slider-btn:hover{background:#1D4ED8}
.prev-btn{left:-20px}
.next-btn{right:-20px}

.price-note{
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:10px;
  padding:14px 16px;
  margin-top:20px;
}
.price-note p{
    font-size:13px;
    color:#94a3b8;
    display:flex;
    gap:8px
}
.check-btn{
    background:#2563EB;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 16px;
    font-size:13px;
    font-weight:600;
    cursor:pointer
}


.copyright{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 30px;
    border-top: 2px solid #1677ff;
}
.copyright p{
    font-size: 1.4rem;
}
/* fade page */
main{
    animation:fadeUp .6s ease;
}
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media (max-width: 992px) {
    .nav-menu {
        gap: 10px;
    }
}
@media(max-width:768px){
    body{
        padding-bottom: 80px;
    }
    /* NAVBAR MOBILE */
    .hamburger{
        display: block;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-container{
        flex-wrap:wrap;
    }
    .search{
        order:3;
        width:100%;
        margin-top:12px;
    }
    .search input{
        max-width:100%;
    }
    .hamburger{
        display:block;
    }
    .nav-menu{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        background:#091321;
        margin-top:15px;
        padding:15px;
        border-radius:10px;
        gap: 0;
    }
    .nav-menu.active{
        display:flex;
        gap: 0;
    }
    .nav-menu a{
        width:100%;
        padding:12px 0;
    }
    /* HERO MOBILE */
    .breadcrumb{
        padding: 20px 25px;
        margin-top: 122px;
        font-size: 0.9rem;
    }
    .pros-cons{
        display: none;
    }
   .main-heading{
        margin-top:20px;
        padding:0 15px;
        flex-direction:column;
        gap:8px;
    }
   .main-heading h1{
        font-size:1.3rem; 
        text-align:center;
        line-height:1.4;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        gap:8px;
    }
   .main-heading h1 span{ /* VS WALA CIRCLE */
        color:#3b82f6;
        padding:6px 10px; 
        border-radius:50%;
        border:2px solid #1d4ed8;
        background:#0b2a6b;
        box-shadow:0 0 15px rgba(59, 130, 246, 0.6);
        font-size:1rem;
        width:38px;
        height:38px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
   .main-heading p{
        font-size:11px;
        letter-spacing:0.5px;
        text-align:center;
        margin-top:5px;
        color:#94a3b8;
        line-height:1.4;
    }

    /* 1. HERO KO 3 ROW GRID BANA DO */
  .hero-section{
        display:grid;
        grid-template-columns:1fr 1fr; /* 2 column */
        gap:12px;
        padding:0 15px;
        margin-top:20px;
    }

    /* 2. LEFT PHONE - ROW 1 COL 1 */
  .phone:nth-of-type(1){
        grid-column:1;
        grid-row:1;
    }

    /* 3. RIGHT PHONE - ROW 1 COL 2 */
  .phone:nth-of-type(2){
        grid-column:2;
        grid-row:1;
    }

    /* 4. CENTER/VERDICT - ROW 2 FULL WIDTH */
  .center{
        grid-column:1 / -1; /* dono column cover */
        grid-row:2;
    }
  .verdict{
        display:flex;
        align-items:flex-start;
        gap:10px;
        padding:12px;
        margin:5px 0 0 0;
        background:#111b2b;
        border:2px solid #1677ff;
        border-radius:10px;
    }
  .trophy{
        width:40px;
        height:40px;
        font-size:20px;
        border-radius:8px;
        flex-shrink:0;
        display:flex;
        align-items:center;
        justify-content:center;
    }
  .verdict small{font-size:10px;text-transform:uppercase}
  .verdict h2{font-size:15px;margin:2px 0}
  .verdict p{font-size:11px;line-height:1.4;font-weight:400}

    /* 5. PHONE CARD CHOTA KARO */
  .phone{
        background:#0f172a;
        border:1px solid #1e293b;
        border-radius:12px;
        padding:10px;
        text-align:center;
    }
  .phone-img{
        width:100%;
        height:160px;
        background:#fff;
        border-radius:8px;
        padding:8px;
        margin-bottom:8px;
        border:none;
        box-shadow:none;
    }
  .phone-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
  .phone h4{
    font-size:12px;
    margin-bottom:4px
}
  .phone p{
    font-size: 1rem;
  }
  .stars{
    font-size:10px;
    margin-bottom:8px;
    gap:2px;
    justify-content:center
}
  .stars span{font-size:9px}
  .btn{
        width:100%;
        font-size:10px;
        padding:8px 0;
        border-radius:6px;
        background:#2563EB;
    }
/* spec tab section */
 .spec-tabs{
        display:flex;
        flex-wrap:wrap;
        justify-content:center; 
        gap:8px;
        padding:12px 15px 0;
        margin-top:10px;
        background:transparent;
        border:none;
        border-radius:0;
        overflow:visible; 
    }
 .spec-tabs::-webkit-scrollbar{display:none}

 .spec-tab{
        font-size:10px; 
        padding:6px 10px; 
        gap:5px;
        border-radius:6px;
        background:#1E293B; 
        color:#ccd2d6;
        border:1px solid #243247;
        white-space:nowrap;
        flex-shrink:0;
    }
 .spec-tab.active{
        background:#1677ff;
        color:#fff;
        border-color:#1677ff;
    }
 .spec-tab:hover{
        background:#1E293B;
    }
 .spec-tab svg,.spec-tab i{ 
        width:14px;
        height:14px;
    }

    /* 1. INFO SECTION KO 1 COLUMN KAR Deya */
 .info-section{
        display:flex;
        flex-direction:column;
        gap:0;
        padding:0 15px;
    }

    /* 2. PROS CONS COMPLETELY HIDE KAR deya */
 .pros-cons{
        display:none;
    }

    /* 3. TAB CONTENT */
 .tab-content{
        width:100%;
        margin-top:15px;
    }
 .tab-content.active{display:block}

    /* 4. TABLE WRAPPER - SIDE SCROLL */
 .spec-table{
        width:100%;
        overflow-x:auto; 
        border-radius:10px;
        border:1px solid #1e293b;
        background:#0f172a;
        -webkit-overflow-scrolling:touch;
    }
 .spec-table::-webkit-scrollbar{height:4px}
 .spec-table::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}

    /* 5. TABLE ITSELF - BILKUL CHOTA */
 .spec-table table{
        width:100%;
        min-width:480px; 
        border-collapse:collapse;
        font-size:11px;
    }
 .spec-table th,
 .spec-table td{
        padding:9px 6px;
        text-align:left;
        border-bottom:1px solid #1e293b;
        vertical-align:top;
        white-space:nowrap; 
    }
 .spec-table th:nth-child(2),
 .spec-table td:nth-child(2),
 .spec-table th:nth-child(3),
 .spec-table td:nth-child(3){
        white-space:normal; 
        min-width:140px;
    }
 .spec-table thead th{
        font-size:15px;
        font-family: system-ui;
        font-weight:700;
        text-transform:uppercase;
        position:sticky;
        top:0;
    }
 .spec-table tbody td{
        font-weight:500;
        line-height:1.4;
    }
 .spec-table td:first-child{ 
        font-weight:600;
        color:#cbd5e1;
        width:120px;
    }
 .spec-table.winner{ 
        color:#4ade80;
        font-weight:600;
    }
 .spec-table.winner span{
        color:#22c55e;
        font-weight:700;
        margin-left:3px;
    }

    /* BOTTOM NAV  */
    .bottom-nav{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #050d18;
        border-top: 1px solid #172238;
        display: flex;
        justify-content: space-around;
        padding: 8px 0;
        z-index: 1000;
    }
    .bottom-nav a{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 11px;
        color: #b8c2d0;
    }
    .bottom-nav a.active{
        color: #1677ff;
    }
    .bottom-nav span{
        font-size: 22px;
        margin-bottom: 3px;
    }
  /* Copyright premium */
  .copyright {
    padding: 20px 15px ;
    text-align: center ;
  }

  .copyright p {
    font-size: 0.95rem ;
    line-height: 22px ;
  }
}
/* Desktop me bottom nav hide */
@media (min-width: 769px){
    .bottom-nav{
        display: none;
    }

}
@media(max-width: 420px){
    .navbar{
        padding-top: 10px;
        padding-bottom: 5px;
    }
    .nav-container h1{
        font-size: 1.3rem;

    }
    .search{
        margin-top: 5px;
    }
    .search input{
        padding: 8px 8px;
    }
    .bar{
        height: 2px;
    }
    .breadcrumb{
        padding: 15px 20px;
        margin-top: 95px;
        font-size: 0.75rem;
    }
   .main-heading h1 span{width:32px;height:32px;font-size:0.9rem;padding:4px 8px}
   .main-heading p{font-size:15px}
   /* hero section */
  .hero-section{gap:30px;padding:0 12px}
  .phone-img{height:150px}
  .verdict{padding:10px}
  .verdict h2{font-size: 16px;}
  /* spec section */
 .spec-tabs{gap:6px;padding:10px 12px 0}
 .spec-tab{font-size:9px;padding:5px 8px}
    /* info section */
 .info-section{padding:0 12px}
 .spec-table table{min-width:450px;font-size:10px}
 .spec-table th,.spec-table td{padding:8px 5px}
 .spec-table td:first-child{width:100px}
 .spec-table th:nth-child(2),
 .spec-table td:nth-child(2),
 .spec-table th:nth-child(3),
 .spec-table td:nth-child(3){min-width:80px;}
 .spec-table td:nth-child(2),
 .spec-table td:nth-child(3){
    font-size: 10px;
 }

 /* slider section */
 .slider-btn{
    display:none
}
 .prev-btn{left:5px}
 .next-btn{
    right:5px
}
 .price-note{
    flex-direction:column;
    gap:10px;
    align-items:flex-start
}
}



/* DESKTOP: 3 CARDS */
@media(min-width: 768px){
 .compare-card{
    flex:0 0 calc(33.333% - 11px)
} /* 3 cards */
 .section-title{
    font-size:26px
}
 .card-img img{
    width:200px;
    height:90px
}
 .card-content h4{
    font-size:15px
}
}