/* ================= GLOBAL ================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
color:#333;
line-height:1.6;
background:#f8f9fa;
}

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

a{
text-decoration:none;
transition:all .3s ease;
}

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

.header-section{
background:linear-gradient(135deg,#667eea,#764ba2);
padding:20px 0;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.logo h1{
color:#fff;
font-size:28px;
font-weight:700;
}

.logo span{
color:#ffd700;
font-style:italic;
}

/* SEARCH */

.search-box .input-group{
box-shadow:0 3px 8px rgba(0,0,0,0.15);
border-radius:30px;
overflow:hidden;
}

.search-box input{
border:none;
padding:12px 20px;
font-size:16px;
}

.search-box .btn-primary{
background:#ffd700;
border:none;
color:#333;
font-weight:600;
padding:12px 25px;
}

.search-box .btn-primary:hover{
background:#ffed4e;
transform:translateY(-2px);
}

/* LOGIN BUTTON */

.btn-outline-primary{
color:#fff;
border-color:#fff;
padding:10px 25px;
font-weight:600;
}

.btn-outline-primary:hover{
background:#fff;
color:#667eea;
transform:translateY(-2px);
}

/* ================= ADS ================= */

.adsense-section{
padding:20px 0;
background:#f8f9fa;
}

.adsense-banner{
background:#fff;
border-radius:10px;
padding:15px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
text-align:center;
}

.ad-placeholder,
.ad-placeholder-small{
background:#e9ecef;
border-radius:8px;
overflow:hidden;
}

/* ================= NAVIGATION ================= */

.nav-tabs-section{
background:#fff;
padding:15px 0;
box-shadow:0 4px 8px rgba(0,0,0,0.05);
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(8px);
}

.category-tabs .nav-pills{
gap:10px;
}

.category-tabs .nav-link{
background:#f1f1f1;
padding:10px 20px;
border-radius:30px;
font-weight:600;
color:#333;
}

.category-tabs .nav-link:hover{
background:#e9ecef;
transform:translateY(-2px);
}

.category-tabs .nav-link.active{
background:linear-gradient(135deg,#667eea,#764ba2);
color:#fff;
}

.category-tabs .nav-link i{
margin-right:6px;
}

/* DROPDOWN */

.category-tabs .dropdown-menu{
border:none;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
padding:10px;
}

.category-tabs .dropdown-item{
padding:10px 15px;
border-radius:8px;
font-weight:500;
}

.category-tabs .dropdown-item:hover{
background:#f5f5f5;
transform:translateX(5px);
}

.category-tabs .dropdown-item i{
margin-right:8px;
color:#667eea;
}

/* ================= SECTIONS ================= */

.product-section{
padding:60px 0;
}

.mobile-section{
background:linear-gradient(135deg,#f5f7fa,#c3cfe2);
}

.laptop-section{
background:#fff;
}

.tv-section{
background:linear-gradient(135deg,#f5f7fa,#c3cfe2);
}

.electronics-section{
background:#f8f9fa;
}

/* ================= TITLES ================= */

.section-title{
text-align:center;
margin-bottom:50px;
}

.section-title h2{
font-size:34px;
font-weight:700;
color:#333;
position:relative;
display:inline-block;
margin-bottom:15px;
}

.section-title h2 i{
margin-right:10px;
color:#667eea;
}

.section-title h2:after{
content:'';
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:80px;
height:3px;
background:linear-gradient(90deg,#667eea,#764ba2);
}

.section-title p{
color:#666;
font-size:17px;
}

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

.product-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:all .3s ease;
margin-bottom:30px;
height:100%;
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* IMAGE */

.product-image{
height:250px;
overflow:hidden;
position:relative;
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .5s;
}

.product-card:hover .product-image img{
transform:scale(1.1);
}

/* BADGE */

.product-badge{
position:absolute;
top:15px;
right:15px;
background:#ffd700;
color:#333;
padding:5px 12px;
border-radius:20px;
font-size:13px;
font-weight:600;
}

/* INFO */

.product-info{
padding:20px;
}

.product-info h4{
font-size:20px;
font-weight:600;
margin-bottom:10px;
}

.product-info .brand{
color:#667eea;
font-weight:600;
display:block;
margin-bottom:10px;
}

.product-info .price{
font-size:22px;
font-weight:700;
color:#28a745;
margin-bottom:15px;
}

.product-info .features{
font-size:14px;
color:#666;
margin-bottom:20px;
}

.product-info .features i{
color:#667eea;
margin-right:5px;
width:20px;
}

/* BUTTON */

.btn-details{
background:linear-gradient(90deg,#667eea,#764ba2);
color:#fff;
border:none;
padding:10px 20px;
border-radius:25px;
font-weight:600;
width:100%;
}

.btn-details:hover{
transform:translateY(-2px);
}

.btn-view-more{
border:2px solid #667eea;
color:#667eea;
padding:12px 35px;
border-radius:30px;
font-weight:600;
}

.btn-view-more:hover{
background:#667eea;
color:#fff;
}

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

.footer-section{
background:#1a1a2e;
color:#fff;
padding-top:60px;
}

.footer-widget h4{
margin-bottom:20px;
position:relative;
padding-bottom:10px;
}

.footer-widget h4:after{
content:'';
position:absolute;
bottom:0;
left:0;
width:50px;
height:2px;
background:#ffd700;
}

.footer-widget p{
color:#b8b8b8;
line-height:1.7;
}

.footer-links{
list-style:none;
padding:0;
}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:#b8b8b8;
}

.footer-links a:hover{
color:#fff;
transform:translateX(5px);
}

.contact-info{
list-style:none;
padding:0;
}

.contact-info li{
margin-bottom:12px;
color:#b8b8b8;
}

.contact-info li i{
margin-right:8px;
color:#ffd700;
}

/* SOCIAL */

.social-links{
margin-top:20px;
}

.social-links a{
display:inline-block;
width:40px;
height:40px;
background:rgba(255,255,255,0.1);
border-radius:50%;
text-align:center;
line-height:40px;
color:#fff;
margin-right:8px;
}

.social-links a:hover{
background:#ffd700;
color:#1a1a2e;
transform:translateY(-3px);
}

.footer-bottom{
background:rgba(0,0,0,0.3);
padding:20px 0;
margin-top:50px;
}

.copyright{
color:#b8b8b8;
font-size:14px;
}

/* ================= MODAL ================= */

.modal-content{
border-radius:15px;
border:none;
}

.modal-header{
background:linear-gradient(135deg,#667eea,#764ba2);
color:#fff;
}

.modal-header .btn-close{
background:#fff;
}

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

button:active,
.btn:active{
transform:scale(.96);
}

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

@media(max-width:768px){

.logo{
text-align:center;
margin-bottom:15px;
}

.search-box{
margin-bottom:15px;
}

.text-end{
text-align:center!important;
}

.product-image{
height:200px;
}

.section-title h2{
font-size:28px;
}

.footer-widget{
margin-bottom:30px;
}

.category-tabs .nav-pills{
flex-wrap:nowrap;
overflow-x:auto;
justify-content:flex-start!important;
}

.category-tabs .nav-link{
white-space:nowrap;
font-size:14px;
padding:8px 15px;
}

}

@media(max-width:576px){

.search-box .input-group{
flex-direction:column;
border-radius:10px;
}

.search-box input{
border-radius:10px 10px 0 0!important;
}

.search-box .btn-primary{
border-radius:0 0 10px 10px!important;
}

}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#667eea;
border-radius:10px;
}

::-webkit-scrollbar-track{
background:#f1f1f1;
}
a{
    color: black;
}
.mobile-brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.mobile-brands span {
    background: #f1f3f6;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: 0.3s;
}

.mobile-brands span:hover {
    background: #007bff;
    color: white;
    cursor: pointer;
}