*{

  margin:0;

  padding:0;

  box-sizing:border-box;

  font-family:'Poppins',sans-serif;

}



html,body{

  width:100%;

  max-width:100%;

  overflow-x:hidden;

  background:#f4f6f9;

}







.navbar{

  position:sticky;

  top:0;

  z-index:1000;

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(10px);

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

}



.nav-top{

  max-width:1300px;

  margin:auto;

  padding:15px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;

}



.logo{

  font-size:28px;

  font-weight:700;

  color:#0d6efd;

  cursor:pointer;

}



.search-box{

  flex:1;

  max-width:100%;

  display:flex;

  background:#eef1f5;

  border-radius:30px;

  overflow:hidden;

}



.search-box select,

.search-box input{

  border:none;

  outline:none;

  padding:12px 15px;

  background:transparent;

  min-width:0;

}



.search-box input{flex:1}



.search-box button{

  border:none;

  padding:0 20px;

  background:linear-gradient(135deg,#0d6efd,#084298);

  color:#fff;

}



.nav-right{

  display:flex;

  align-items:center;

}



.icons{

  display:flex;

  gap:18px;

}



.icons i{

  font-size:20px;

  cursor:pointer;

}



.cart{

  position:relative;

  color:#000;

  text-decoration:none;

}



.cart .badge{

  position:absolute;

  top:-6px;

  right:-10px;

  background:#dc3545;

  color:#fff;

  font-size:10px;

  padding:2px 6px;

  border-radius:50%;

}







.menu{

  position:sticky;

  top:78px;

  z-index:999;

  width:100%;

  display:flex;

  justify-content:center;

  gap:30px;

  padding:12px 15px;

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(6px);

  border-top:1px solid #eee;

}



.menu a{

  text-decoration:none;

  font-size:14px;

  font-weight:500;

  color:#333;

  position:relative;

}



.menu a::after{

  content:"";

  position:absolute;

  width:0;

  height:3px;

  background:linear-gradient(135deg,#0d6efd,#6610f2);

  left:50%;

  bottom:-6px;

  transform:translateX(-50%);

  transition:.4s;

}



.menu a:hover::after{width:100%}

.menu a:hover{color:#0d6efd}







.user-icon{

  width:38px;

  height:38px;

  border-radius:50%;

  background:#f1f3f7;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

}



.user-icon:hover{

  background:#0d6efd;

}



.user-icon:hover i{

  color:#fff;

}





@media(max-width:992px){

  .search-box{display:none}

  .menu{

    top:64px;

    flex-wrap:wrap;

    gap:15px;

  }

}



@media(max-width:576px){

  .logo{font-size:22px}

}









.slider-box {

  background: #232d4b;

  border-radius: 22px;

  min-height: 260px;

  padding: 30px 0;

}



/* Text */

.slider-top-text {

  font-size: 14px;

  opacity: 0.85;

  margin-bottom: 10px;

}



.slider-title {

  font-size: 46px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 10px;

}



.slider-title span {

  color: #ff4d4f;

}



.slider-offer {

  font-size: 18px;

  opacity: 0.9;

}



/* Watch image */

.slider-watch {

  max-width: 210px;

}





.slider-dots {

  justify-content: flex-start;

  margin-left: 40px;

  bottom: 18px;

}



.slider-dots button {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background-color: #fff;

  opacity: 0.4;

}



.slider-dots .active {

  opacity: 1;

}





.slider-arrow {

  width: 42px;

  height: 42px;

  top: 50%;

  transform: translateY(-50%);

  background: #fff;

  border-radius: 50%;

  opacity: 1;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

  filter: invert(1);

}





@media (max-width: 992px) {

  .slider-box {

    text-align: center;

    min-height: auto;

    padding: 25px 20px 50px;

  }



  .slider-title {

    font-size: 32px;

  }



  .slider-watch {

    margin-top: 20px;

  }



  .slider-dots {

    justify-content: center;

    margin-left: 0;

  }

}



.deal-title {

  font-weight: 600;

}



.deal-title span {

  color: #0d6efd;

  border-bottom: 2px solid #0d6efd;

  padding-bottom: 2px;

}



.view-all {

  text-decoration: none;

  font-size: 14px;

  color: #555;

}



.view-all i {

  font-size: 12px;

}





.smartphone-section {

  padding: 60px 0;

  background: #f4f6f9;

}



.section-title {

  font-size: 26px;

  font-weight: 600;

}



.section-title span {

  color: #0d6efd;

  border-bottom: 3px solid #0d6efd;

  padding-bottom: 3px;

}







.smartphone-card {

  border: none;

  border-radius: 18px;

  overflow: hidden;

  background: #fff;

  position: relative;

  transition: all 0.4s ease;

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

}



.smartphone-card:hover {

  transform: translateY(-12px);

  box-shadow: 0 28px 60px rgba(13,110,253,0.25);

}





.deal-badge {

  position: absolute;

  top: 14px;

  left: 14px;

  background: linear-gradient(135deg, #ff512f, #dd2476);

  color: #fff;

  font-size: 12px;

  font-weight: 600;

  padding: 6px 12px;

  border-radius: 20px;

  z-index: 2;

  animation: pulse 1.5s infinite;

}



@keyframes pulse {

  0% { box-shadow: 0 0 0 0 rgba(255,81,47,0.6); }

  70% { box-shadow: 0 0 0 10px rgba(255,81,47,0); }

  100% { box-shadow: 0 0 0 0 rgba(255,81,47,0); }

}





.img-box {

  height: 200px;

  background: linear-gradient(145deg, #f8f9fc, #eef1f7);

  display: flex;

  align-items: center;

  justify-content: center;

}



.img-box img {

  max-height: 160px;

  transition: transform 0.5s ease;

}



.smartphone-card:hover img {

  transform: scale(1.15) rotate(-3deg);

}





.phone-title {

  font-size: 15px;

  font-weight: 600;

  margin-bottom: 8px;

  color: #222;

}



.price-box {

  margin-bottom: 12px;

}



.new-price {

  font-size: 16px;

  font-weight: 700;

  color: #0d6efd;

  margin-right: 8px;

}



.old-price {

  font-size: 13px;

  color: #999;

  text-decoration: line-through;

}





.add-cart-btn {

  background: linear-gradient(135deg, #0d6efd, #6610f2);

  color: #fff;

  border-radius: 30px;

  padding: 8px 20px;

  font-size: 14px;

  transition: 0.4s;

}



.add-cart-btn:hover {

  background: linear-gradient(135deg, #6610f2, #0d6efd);

  transform: scale(1.08);

}





@media (max-width: 576px) {

  .img-box { height: 170px; }

  .img-box img { max-height: 140px; }

}





.top-categories-section {

  background: #fff;

  padding: 55px 0;

}



.category-title {

  font-size: 22px;

  font-weight: 600;

}



.category-title span {

  color: #0d6efd;

}





.category-card {

  text-align: center;

  cursor: pointer;

}




.category-circle {

  width: 110px;

  height: 110px;

  border-radius: 50%;

  margin: auto;

  background: #f8f9fc;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}





.category-circle img {

  max-width: 100px;

  max-height: 50px;

  z-index: 2;

  border-radius: 20%;

}





.orbit-ring {

  position: absolute;

  inset: -6px;

  border-radius: 50%;

  border: 2px dashed rgba(13,110,253,0.6);

  opacity: 0;

}





.category-card.active .orbit-ring {

  opacity: 1;

  animation: orbitRotate 6s linear infinite;

}





.category-card:hover .orbit-ring {

  opacity: 1;

  animation: orbitRotate 4s linear infinite;

}





@keyframes orbitRotate {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}





.category-circle::after {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  background: rgba(13,110,253,0.2);

  border-radius: 50%;

  opacity: 0;

}



.category-card:hover .category-circle::after {

  animation: ripple 0.8s ease-out;

}



@keyframes ripple {

  0% {

    transform: scale(1);

    opacity: 0.5;

  }

  100% {

    transform: scale(8);

    opacity: 0;

  }

}





.category-card p {

  margin-top: 12px;

  font-size: 14px;

  font-weight: 500;

  color: #333;

}





@media (max-width: 576px) {

  .category-circle {

    width: 95px;

    height: 95px;

  }



  .category-circle img {

    max-width: 42px;

    border-radius: 10%;

  }

}





.brand-owl-section{

  padding:60px 0;

  background:#fff;

}





.brand-title{

  font-size:22px;

  font-weight:600;

}



.brand-title span{

  color:#0d6efd;

}





.brand-carousel .owl-stage {

  padding: 20px 0;

}





.brand-item {

  height: 180px;

  border-radius: 18px;

  padding: 20px;

  position: relative;

  box-sizing: border-box;

  transition: 0.5s ease;

  transform: scale(0.9);

  opacity: 0.6;

  box-shadow: 0 18px 35px rgba(0,0,0,0.15);

}





.owl-item.active.center .brand-item {

  transform: scale(0.97);

  opacity: 1;

  box-shadow: 0 35px 70px rgba(13,110,253,0.3);

}







.brand-item.dark{

  background:linear-gradient(135deg,#2b2b2b,#111);

  color:#fff;

}



.brand-item.yellow{

  background:linear-gradient(135deg,#ffeaa7,#fdcb6e);

}



.brand-item.orange{

  background:linear-gradient(135deg,#ffd8b5,#ff9f43);

}



.brand-item.blue{

  background:linear-gradient(135deg,#c7ecee,#74b9ff);

}







.brand-tag{

  position:absolute;

  top:14px;

  left:14px;

  z-index:6;

  background:rgba(255,255,255,0.95);

  padding:4px 12px;

  font-size:11px;

  font-weight:600;

  border-radius:20px;

  color:#111;

}







.brand-inner{

  position:relative;

  z-index:5;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

}





.brand-inner h6{

  font-size:15px;

  font-weight:600;

  margin:0;

  white-space:nowrap;

  z-index:6;

}





.brand-inner img{

  max-height:140px;

  position:relative;

  z-index:1;

  transition:transform 0.5s ease;

 border-radius:18px;

}





.owl-item.active.center .brand-inner img{

  transform: translateY(-6px) scale(1.08);

}







.brand-carousel .owl-dots{

  margin-top:20px;

}



.brand-carousel .owl-dot span{

  width:8px;

  height:8px;

  background:#ccc;

  transition:0.3s;

}



.brand-carousel .owl-dot.active span{

  width:18px;

  background:#0d6efd;

  border-radius:10px;

}







@media (max-width:768px){

  .brand-item{

    height:160px;

  }



  .brand-inner img{

    max-height:120px;

  }

}





.new-arrival-section{

  padding:70px 0;

  background:#fff;

}



.arrival-title{

  font-size:22px;

  font-weight:600;

}





.arrival-card{

  position:relative;

  overflow:hidden;

  border-radius:18px;

  height:100%;

  background:#000;

  cursor:pointer;

}




.arrival-card img{

  width:100%;

  height:100%;

  object-fit:cover;

  filter:brightness(0.85);

  transition:filter 0.5s ease;

}





.arrival-card.large{height:83%;}

.arrival-card.wide{height:250px;}

.arrival-card.small{height:190px;}





.arrival-overlay{

  position:absolute;

  inset:0;

  padding:30px;

  color:#fff;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85));

  transform:translateY(40px);

  opacity:0;

  transition:0.6s cubic-bezier(.4,0,.2,1);

}





.arrival-overlay.slide-left{

  transform:translateX(40px);

}



.arrival-overlay.slide-up{

  transform:translateY(40px);

}





.arrival-overlay h5,

.arrival-overlay h6{

  font-weight:600;

}



.arrival-overlay p{

  font-size:13px;

  opacity:0.85;

  max-width:85%;

}





.arrival-overlay a{

  margin-top:10px;

  font-size:13px;

  color:#fff;

  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,0.6);

  width:fit-content;

}




.arrival-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(

    120deg,

    transparent 30%,

    rgba(255,255,255,0.15),

    transparent 70%

  );

  transform:translateX(-100%);

  transition:0.8s ease;

}





.arrival-card:hover::before{

  transform:translateX(100%);

}



.arrival-card:hover img{

  filter:brightness(1);

}



.arrival-card:hover .arrival-overlay{

  transform:translate(0);

  opacity:1;

}







@media(max-width:768px){

  .arrival-card.wide{height:220px;}

  .arrival-card.small{height:170px;}

}









.daily-essentials-section{

  padding:65px 0;

  background:#fff;

}



.essentials-title{

  font-size:22px;

  font-weight:600;

}



.essentials-title span{

  color:#0d6efd;

}





.essentials-row{

  display:flex;

  gap:22px;

  flex-wrap:wrap;

}





.essential-card{

  width:160px;

  padding:18px 14px;

  border-radius:16px;

  background:#f9fafc;

  text-align:center;

  position:relative;

  cursor:pointer;

  transition:0.4s ease;

}





.essential-card::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:18px;

  background:linear-gradient(

    135deg,

    rgba(13,110,253,0.6),

    rgba(102,16,242,0.4),

    rgba(13,110,253,0.6)

  );

  opacity:0;

  filter:blur(12px);

  transition:0.4s ease;

  z-index:-1;

}





.essential-img{

  height:80px;

  display:flex;

  align-items:center;

  justify-content:center;

}



.essential-img img{

  max-height:70px;

  transition:transform 0.6s ease;

}





.essential-card p{

  margin:8px 0 2px;

  font-size:14px;

  font-weight:500;

}



.essential-card span{

  font-size:12px;

  color:#777;

  opacity:0;

  transform:translateY(6px);

  transition:0.4s ease;

}




.essential-img img{

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

}




.essential-card:hover .essential-img img{

  animation: floatStrong 2.8s ease-in-out infinite;

}





@keyframes floatSoft{

  0%{ transform: translateY(0); }

  50%{ transform: translateY(-4px); }

  100%{ transform: translateY(0); }

}





@keyframes floatStrong{

  0%{ transform: translateY(0); }

  50%{ transform: translateY(-8px); }

  100%{ transform: translateY(0); }

}





.essential-card:hover::before{

  opacity:1;

}



.essential-card:hover img{

  transform:translateY(-6px);

}



.essential-card:hover span{

  opacity:1;

  transform:translateY(0);

}





@keyframes float{

  0%{transform:translateY(0);}

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

  100%{transform:translateY(0);}

}






@media(max-width:768px){

  .essentials-row{

    justify-content:center;

  }



  .essential-card{

    width:140px;

  }

}







.browse-category-section{

  padding:60px 0;

  background:#fff;

}





.browse-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:25px;

}



.browse-header h4{

  font-size:22px;

  font-weight:600;

}





.browse-arrows span{

  width:34px;

  height:34px;

  border-radius:50%;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:#f1f3f7;

  margin-left:8px;

  cursor:pointer;

  transition:0.3s;

}



.browse-arrows span:hover{

  background:#0d6efd;

  color:#fff;

}





.browse-row{

  display:flex;

  gap:20px;

  align-items:center;

}





.browse-card{

  width:150px;

  height:120px;

  border-radius:14px;

  border:1px solid #e5e7eb;

  background:#fff;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  position:relative;

  transition:0.45s cubic-bezier(.4,0,.2,1);

}





.browse-card i{

  font-size:28px;

  color:#333;

  transition:0.45s ease;

}





.browse-card p{

  margin-top:8px;

  font-size:14px;

  font-weight:500;

}





.browse-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(135deg,#0d6efd,#6610f2);

  opacity:0;

  border-radius:14px;

  transition:0.45s ease;

  z-index:-1;

}





.browse-card:hover{

  transform:translateY(-10px);

}



.browse-card:hover::before{

  opacity:1;

}



.browse-card:hover i,

.browse-card:hover p{

  color:#fff;

}





.browse-card.active{

  background:#e53935;

  border-color:#e53935;

  

}



.browse-card.active i,

.browse-card.active p{

  color:#fff;

}




.browse-card:hover ~ .browse-card{

  transform:translateY(4px);

  opacity:0.85;

}






@media(max-width:768px){

  .browse-row{

    overflow-x:auto;

    padding-bottom:10px;

  }



  .browse-card{

    min-width:140px;

  }

}







.trust-section{

  padding:60px 0;

  background:#fff;

}



.trust-row{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:40px;

}




.trust-item{

  text-align:center;

  max-width:260px;

}





.trust-icon{

  width:60px;

  height:60px;

  margin:0 auto 14px;

  border-radius:50%;

  background:#f5f6f8;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

}





.trust-icon i{

  font-size:26px;

  color:#111;

  

}





.trust-item:nth-child(1) i{ animation-delay:0s; }

.trust-item:nth-child(3) i{ animation-delay:1s; }

.trust-item:nth-child(5) i{ animation-delay:2s; }



@keyframes iconPulse{

  0%,100%{ transform:scale(1); }

  50%{ transform:scale(1.08); }

}





.trust-item h6{

  font-size:13px;

  font-weight:700;

  letter-spacing:0.5px;

  margin-bottom:6px;

}





.trust-item p{

  font-size:13px;

  color:#777;

  margin:0;

}





.trust-divider{

  width:1px;

  height:70px;

  background:#e5e7eb;

  position:relative;

  overflow:hidden;

}





.trust-divider::after{

  content:"";

  position:absolute;

  top:0;

  left:0;

  width:100%;

  height:100%;

  background:#0d6efd;

  transform:translateY(-100%);

  animation:dividerReveal 3s ease-in-out infinite;

}



@keyframes dividerReveal{

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

  50%{ transform:translateY(0); }

  100%{ transform:translateY(100%); }

}







@media(max-width:768px){

  .trust-row{

    flex-direction:column;

    gap:30px;

  }



  .trust-divider{

    width:60px;

    height:1px;

  }



  .trust-divider::after{

    width:100%;

    height:100%;

  }

}


.review-section{

  padding:70px 0;

  background:#f8f9fb;

}



.review-card{

  background:#fff;

  padding:30px 22px;

  border-radius:14px;

  text-align:center;

  box-shadow:0 10px 25px rgba(0,0,0,.08);

}





.client-img{

  width:60px;

  height:60px;

  border-radius:50%;

  object-fit:cover;

  margin:0 auto 15px;

  border:2px solid #0d6efd;

}





.owl-dots{

  margin-top:25px;

}



.owl-dot span{

  width:8px;

  height:8px;

  background:#d1d5db;

  transition:.4s;

}



.owl-dot.active span{

  width:22px;

  background:linear-gradient(135deg,#0d6efd,#6610f2);

  border-radius:10px;

  box-shadow:0 0 12px rgba(13,110,253,.6);

}





.footer-section{

  background:#0a8fc9;

  color:#fff;

  padding:60px 0 20px;

  position:relative;

  overflow:hidden;

}




.footer-section::after{

  content:"";

  position:absolute;

  width:300px;

  height:300px;

  background:rgba(255,255,255,0.08);

  border-radius:50%;

  top:-80px;

  right:-80px;

}





.footer-logo{

  font-size:28px;

  font-weight:700;

  margin-bottom:20px;

}





.footer-title{

  font-size:14px;

  font-weight:600;

  margin-bottom:10px;

}





.footer-contact{

  list-style:none;

  padding:0;

}



.footer-contact li{

  display:flex;

  gap:10px;

  margin-bottom:12px;

  font-size:14px;

}



.footer-contact i{

  font-size:18px;

}



.footer-contact span{

  font-weight:600;

}




.app-buttons img{

  height:42px;

  margin-right:10px;

  cursor:pointer;

}





.footer-heading{

  font-size:16px;

  font-weight:600;

  margin-bottom:15px;

  border-bottom:2px solid rgba(255,255,255,0.5);

  display:inline-block;

  padding-bottom:4px;

}





.footer-links{

  list-style:none;

  padding:0;

}



.footer-links li{

  margin-bottom:8px;

}



.footer-links a{

  text-decoration:none;

  color:#fff;

  font-size:14px;

  opacity:0.9;

  transition:0.3s;

}



.footer-links a:hover{

  opacity:1;

  text-decoration:none;

}





.footer-bottom{

  border-top:1px solid rgba(255,255,255,0.3);

  margin-top:20px;

  padding-top:15px;

  text-align:center;

  font-size:13px;

}






@media(max-width:768px){

  .footer-section{

    text-align:center;

  }



  .footer-contact li{

    justify-content:center;

  }



  .app-buttons img{

    margin:5px;

  }

}



.about-hero{

  padding:90px 0;

  background:linear-gradient(135deg,#f4f6f9,#ffffff);

}



.about-hero h1{

  font-size:42px;

  font-weight:700;

}



.about-hero h1 span{

  color:#0d6efd;

}



.about-hero p{

  margin-top:15px;

  font-size:16px;

  color:#555;

}



.about-hero-card{

  background:#fff;

  border-radius:20px;

  padding:30px;

  display:flex;

  justify-content:space-between;

  box-shadow:0 30px 70px rgba(0,0,0,0.12);

}



.about-hero-card .stat{

  text-align:center;

}



.about-hero-card h3{

  color:#0d6efd;

  font-weight:700;

}





.about-story{

  padding:80px 0;

}



.about-story h2{

  font-weight:700;

}



.about-story .highlight{

  font-size:18px;

  font-weight:500;

  color:#0d6efd;

}





.about-values{

  padding:80px 0;

  background:#f8f9fb;

}



.value-card{

  background:#fff;

  padding:30px;

  border-radius:18px;

  text-align:center;

  transition:.4s;

  box-shadow:0 15px 35px rgba(0,0,0,.1);

}



.value-card i{

  font-size:32px;

  color:#0d6efd;

  margin-bottom:12px;

}



.value-card:hover{

  transform:translateY(-10px);

}





.about-why{

  padding:80px 0;

}



.why-list{

  list-style:none;

  padding:0;

}



.why-list li{

  margin-bottom:12px;

  font-size:15px;

}



.why-list i{

  color:#0d6efd;

  margin-right:8px;

}



.why-box{

  background:linear-gradient(135deg,#0d6efd,#6610f2);

  color:#fff;

  padding:40px;

  border-radius:20px;

  font-size:18px;

}




.about-cta{

  padding:80px 0;

  background:#0d6efd;

  color:#fff;

}



.about-cta .btn{

  margin-top:15px;

  padding:12px 30px;

}




.user-icon{

  width:38px;

  height:38px;

  border-radius:50%;

  background:#f1f3f7;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  transition:0.3s;

}



.user-icon i{

  font-size:18px;

  color:#333;

}



.user-icon:hover{

  background:#0d6efd;

}



.user-icon:hover i{

  color:#fff;

}





.auth-modal{

  border-radius:18px;

  padding:10px;

  box-shadow:0 25px 60px rgba(0,0,0,0.2);

}



.auth-modal .modal-title{

  font-weight:700;

}



.auth-modal label{

  font-size:13px;

  font-weight:600;

  margin-bottom:4px;

}



.auth-modal .form-control{

  border-radius:10px;

  padding:10px 14px;

  font-size:14px;

}



.auth-btn{

  background:linear-gradient(135deg,#0d6efd,#6610f2);

  color:#fff;

  border-radius:30px;

  padding:10px;

  font-weight:600;

  transition:0.3s;

}



.auth-btn:hover{

  transform:scale(1.03);

  color:#fff;

}



.switch-text{

  text-align:center;

  font-size:13px;

  margin-top:15px;

}



.switch-text span{

  color:#0d6efd;

  cursor:pointer;

  font-weight:600;

}



.auth-switch{

  display:flex;

  background:#f1f3f7;

  border-radius:30px;

  margin-bottom:20px;

  overflow:hidden;

}



.auth-switch button{

  flex:1;

  padding:8px 0;

  border:none;

  background:none;

  font-weight:600;

  cursor:pointer;

  transition:.3s;

}



.auth-switch button.active{

  background:linear-gradient(135deg,#0d6efd,#6610f2);

  color:#fff;

  border-radius:30px;

}





.contact-section {

  background: linear-gradient(135deg, #f8f9ff, #eef2ff);

}



.contact-title {

  font-size: 32px;

  font-weight: 700;

}



.contact-title span {

  color: #4f46e5;

}



.contact-desc {

  color: #555;

  margin: 15px 0 25px;

}



.contact-info .info-item {

  display: flex;

  align-items: center;

  margin-bottom: 15px;

  font-weight: 500;

}



.contact-info i {

  font-size: 20px;

  color: #4f46e5;

  margin-right: 12px;

}



.contact-card {

  background: #fff;

  padding: 30px;

  border-radius: 16px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.08);

}



.contact-card label {

  font-weight: 600;

  margin-bottom: 5px;

}



.contact-card .form-control {

  border-radius: 10px;

  padding: 10px 14px;

}



.contact-btn {

  background: linear-gradient(135deg, #4f46e5, #6366f1);

  color: #fff;

  padding: 12px 30px;

  border-radius: 50px;

  font-weight: 600;

  transition: 0.3s;

}



.contact-btn:hover {

  background: linear-gradient(135deg, #4338ca, #4f46e5);

  transform: translateY(-2px);

}

.navbar{

  background:#fff;

  padding:12px 30px;

  border-bottom:1px solid #eee;

}



.nav-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

}



.logo{

  font-size:22px;

  font-weight:700;

}



.search-box{

  display:flex;

  align-items:center;

  gap:6px;

}



.search-box select,

.search-box input{

  padding:6px 10px;

}



.search-box button{

  padding:6px 12px;

}



.nav-right{

  display:flex;

  align-items:center;

}



.icons{

  display:flex;

  align-items:center;

  gap:18px;

}



.cart{

  display:flex;

  align-items:center;

  position:relative;

  text-decoration:none;

  color:#000;

}



.cart i{

  font-size:20px;

}



.cart .badge{

  position:absolute;

  top:-6px;

  right:-10px;

  background:#ff5252;

  color:#fff;

  font-size:11px;

  padding:2px 6px;

  border-radius:50%;

}



.user-icon{

  font-size:20px;

  cursor:pointer;

}



.menu{

  display:flex;

  gap:20px;

  padding:10px 30px;

  background:#f8f9fa;

}



.menu a{

  text-decoration:none;

  color:#000;

  font-weight:500;

}