@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
	--orange:#ff7800;
	--dark:#202831;
	--bodydark:#171e25;
	--black:#130f40;
    --light-color:#666;
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
    --border:.2rem solid rgba(0,0,0,.1);
    --outline:.1rem solid rgba(0,0,0,.1);
    --outline-hover:.2rem solid var(-black);
	
}

*{
	font-family: 'poppins' , sans-serif;
	margin: 0; padding: 0;
	box-sizing: border-box;
	outline: none; border: none;
	text-decoration: none;
	text-transform: capitalize;
	transition: all .2s linear;	
}
html{
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}

body{
	background:#171e25;
}

section{
	padding:2rem 9%;
}


.heading{
	text-align: center;
	padding:2rem 0;
	padding-bottom: 3rem;
	font-size: 3.5rem;
	color: #FFFFFF;
}

.pop2 {
	text-align: center;
}
.heading1{
	text-align: left;
	padding: 2rem 2rem;
	padding-bottom: 3rem;
	font-size: 15px;
	color: white;
}

.heading span{
	background: var(--orange);
	color: #FFFFFF;
	display: inline-block;
	padding: .5rem 3rem;
	clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}

.btn{
	margin-top: 1rem;
	display: inline-block;
	padding:.8rem 3rem;
	font-size: 1.7rem;
	border-radius: .5rem;
	border:.2rem solid #FBFAFA;
	color: #FFFFFF;
	cursor: pointer;
	background: none;
	text-align: center;
}

.btn:hover{
	background: var(--orange);
	color: #FFFFFF;
}

.header{
	position: fixed;
	top:0; left:0; right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:2rem 9%;
	background: #202831;
	box-shadow: var(--box-shadow);
}

.header .logo{
	font-size: 2.5rem;
	font-weight: bolder;
	color:#fff;
}

.header .logo-img{
	width: 6.5rem;
	height: 6.5rem;
}

.header .logo i{
	color:var(--orange);
}

.header .navbar a{
	font-size: 1.8rem;
	margin:0 1.5rem;
	color:#fff;
	text-decoration: none;
}

.header .navbar a:hover{
	color:var(--orange);
}

.header .icons div{
	height: 4.5rem;
	width: 4.5rem;
	line-height: 4.5rem;
	border-radius: .5rem;
	background: #eee;
	color:var(--black);
	font-size: 2rem;
	margin-left: .3rem;
	cursor: pointer;
	text-align: center;
}

.header .icons div:hover{
	background: var(--orange);
	color: #FFFFFF;
}

#menu-btn{
	display: none;
}

.header .search-form{
	position: absolute;
	width: 20rem;
	top:110%; right:-110%;
	height:5rem;
	background: #fff;
	border-radius: .5rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-shadow: var(--box-shadow);
}

.header .search-form.active{
	right:2rem;
	transition: .4s linear;
}

.header .search-form input{
	height:100%;
	width:100%;
	background: none;
	text-transform: none;
	font-size: 1.6rem;
	color:var(--black);
	padding:0 1.5rem;
}

.header .search-form label{
	font-size: 2.2rem;
	padding-right: 1.5rem;
	color:var(--black);
	cursor: pointer;
}

.header .search-form label:hover{
	color:var(--orange);
}
/* shoppimg start end */
.header .shopping-cart{
	position: absolute;
	top:110%; right:-110%;
	padding:1rem;
	border-radius: .5rem;
	box-shadow: var(--box-shadow);
	width:35rem;
	background: #000000;
}

.header .shopping-cart.active{
	right:2rem;
	transition: .4s linear;
}

.header .shopping-cart .box{
	display: flex;
	align-items: center;
	gap:1rem;
	position: relative;
	margin:1rem 0;
}

.header .shopping-cart .box img{
	height:10rem;
}

.header .shopping-cart .box .fa-trash{
	font-size: 2rem;
	position: absolute;
	top: 50%; right:2rem;
	cursor: pointer;
	color:var(--light-color);
	transform: translateY(-50%);
}

.header .shopping-cart .box .fa-trash:hover{
	color:var(--orange);
}

.header .shopping-cart .box .content h3{
	color: #FFFFFF;
	font-size: 1.7rem;
	padding-bottom: 1rem;
}

.header .shopping-cart .box .content span{
	color: var(--light-color);
	font-size: 1.6rem;
}

.header .shopping-cart .box .content .quantity{
	padding-left: 1rem;
}

.header .shopping-cart .total{
	font-size: 2.5rem;
	padding:1rem 0;
	text-align: center;
	color: #FFFFFF;
}

.header .shopping-cart .btn{
	display:block;
	text-align: center;
	margin: 1rem;
}
/* shoppimg cart end */
.header .login-form{
	position: absolute;
	top:110%; right:-110%;
	width:30rem;
	box-shadow: var(--box-shadow);
	padding:2rem;
	border-radius: .5rem;
	background: #000000;
	text-align: center;
}

.header .login-form.active{
	right:2rem;
	transition: .4s linear;
}

.header .login-form h3{
	font-size: 2.5rem;
	text-transform: uppercase;
	color: #FFFFFF;
}

.header .login-form .box{
	width: 100%;
	margin: .7rem 0;
	background: #fff;
	border-radius: .5rem;
	padding:1rem;
	font-size: 1.6rem;
	color:var(--black);
	text-transform: none;
}

.header .login-form p{
	font-size: 1.4rem;
	padding:.5rem 0;
	color:var(--light-color);
}

.header .login-form p a{
	color:var(--orange);
	text-decoration: underline;
}

.home{
	display: flex;
	align-items: center;
	justify-content: center;
	background:url("images/bit.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 17rem;
	padding-bottom: 17rem;
}

.home .content{
	text-align: center;
	width:60rem;
}

.home .content h3{
	color:var(--black);
	font-size: 3rem;
}

.home .content h3 span{
	color:var(--orange);
}

.home .content p{
	color:#FFFFFF;
	font-size: 1.7rem;
	padding:1rem 0;
	line-height: 1.8;
}

.features .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap:1.5rem;
}

.features .box-container .box{
	padding:3rem 2rem;
	background: #000000;
	outline: var(--outline);
	outline-offset: -1rem;
	text-align: center;
	box-shadow: var(--box-shadow);
}

.features .box-container .box:hover{
	outline: var(--outline-hover);
	outline-offset: 0rem;
}

.features .box-container .box img{
	margin: 1rem;
	height: 30rem;
	width: 20rem
}

.features .box-container .box h3{
	font-size: 2.5rem;
	line-height: 1.8;
	color:#FFFFFF;
}

.features .box-container .box p{
	font-size: 2.5rem;
	line-height: 1.8;
	color: var(--light-color);
	padding:1rem 0;
}
/* product section */
.products .product-slider{
	padding:1rem;
}

.products .product-slide:first-child  {
	margin-bottom: 2rem;
}

.products .product-slider .box{
	background: #000000;
	border-radius: .5rem;
	text-align: center;
	padding:.5rem .5rem;
	outline-offset: -1rem;
	outline: var(--outline);
	box-shadow: var(--box-shadow);
	transition: .2s linear;
}

.products .product-slider .box:hover{
	outline-offset: 0rem;
	outline: var(--outline-hover);
}

.products .product-slider .box img{
	height: 30rem;
	width: 20rem;
}

.products .product-slider .box h3{
	font-size: 2.5rem;
	color: #FFFFFF;
}

.products .product-slider .box .price{
	font-size: 2rem;
	color: var(--orange);
	padding: .5rem 0;
}

.products .product-slider .box .stars i{
	font-size: 1.7rem;
	color: var(--orange);
	padding: .5rem 0;
}

.categories .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
	gap:1.5rem;
}

.categories .box-container .box{
	padding:3rem 2rem;
	border-radius: .5rem;
	background: #000000;
	box-shadow: var(--box-shadow);
	outline:var(--outline);
	outline-offset: -1rem;
	text-align: center;
}

.categories .box-container .box:hover{
	outline:var(--outline-hover);
	outline-offset: 0rem;
}

.categories .box-container .box img{
	margin: 1rem 0;
	height: 30rem;
	width: 20rem
}

.categories .box-container .box h3{
	font-size: 2rem;
	color:#FFFFFF;
	line-height: 1.8;
}

.categories .box-container .box p{
	font-size: 1.7rem;
	color:var(--light-color);
	line-height: 1.8;
	padding:1rem 0;
}

.review .review-slider{
	padding:1rem;
}

.review .review-slider .box{
	background: #000000;
	border-radius: .5rem;
	text-align: center;
	padding:3rem 2rem;
	outline-offset: -1rem;
	outline: var(--outline);
	box-shadow: var(--box-shadow);
	transition: .2s linear;
}

.review .review-slider .box:hover{
	outline-offset: 0rem;
	outline: var(--outline-hover);
}

.review .review-slider .box img{
	height:10rem;
	width:10rem;
	border-radius: 50%;
}

.review .review-slider .box p{
	padding:1rem 0;
	line-height: 1.8;
	color:var(--light-color);
	font-size: 1.5rem;
}

.review .review-slider .box h3{
	padding-bottom: .5rem;
	color: #FFFFFF;
	font-size: 2.2rem;
}

.review .review-slider .box .stars i{
	color:var(--orange);
	font-size: 1.7rem;
}

.footer{
	background: #202831;
	text-align: center;
}

.footer .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	gap:1.5rem;
}

.footer .box-container .box h3{
	font-size: 2.5rem;
	color:var(--orange);
	padding:1rem 0;
}

.footer .box-container .box h3 i{
	color:var(--orange);
}

.footer .box-container .box .links{
	display: block;
	font-size: 1.5rem;
	color: #FFFFFF;
	padding:1rem 0;
}

.footer .box-container .box .links i{
	color:var(--orange);
	padding-right: .5rem;
}

.footer .box-container .box a:hover{
	padding-right: 2rem;
}

.footer .box-container .box p{
	line-height: 1.8;
	font-size: 1.5rem;
	color: #FFFFFF;
	padding:1rem 0;
}

.footer .box-container .box .share a{
	height:4rem;
	width:4rem;
	line-height:4rem;
	border-radius: .5rem;
	font-size: 2rem;
	color:var(--black);
	margin-left: .2rem;
	background: #eee;
	text-align: center;
}

.footer .box-container .box .share a:hover{
	background: #990407;
	color: #fff;
}

.footer .box-container .box .email{
	width: 100%;
	margin:.7rem 0;
	padding:1rem;
	border-radius: .5rem;
	background: #eee;
	font-size: 1.6rem;
	color: var(--black);
	text-transform: none;
}

.footer .box-container .box .payment-img{
	margin-right: 10rem;
	height: 6rem;
}

.footer .credit{
	text-align: center;
	margin-top: 2rem;
	padding:1rem;
	padding-top: 2.5rem;
	font-size: 1.5rem;
	color: #FFFFFF;
}

.footer .sub{
	text-align: center;
	margin-top: 1rem;
	padding:1rem;
	padding-top: 2.5rem;
	font-size: 1.5rem;
	color: #FFFFFF;
}

.footer .nub{
	text-align: center;
	margin-top: 1rem;
	padding:1rem;
	padding-top: 2.5rem;
	font-size: 1.5rem;
	color: #FFFFFF;
	border-top: .2rem solid rgba(0,0,0,.1);
	text-decoration: none;
}

.footer .credit span{
	color: var(--orange);
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}
/* The Modal (background) end */

.container {
  position: relative;
  font-family: Arial;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

/* slider */
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1450px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width : 1063px ){
  .prev, .next,.text {font-size: 11px}
}

/* fixed image */
.container {
  position: relative;
  font-family: Arial;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
/* accordation start */
.accordion {
  background-color: #202831;
  color: #FFFFFF;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #000000;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  font-size: 20px;
  transition: max-height 0.2s ease-out;
}
/* accordation end */
/* New slider start */
h4{
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
  color: goldenrod;
  background:#000000;
}
/* New slider end */
.containers {
	display: flex; /* Enables side-by-side layout */
	align-items: center; /* Aligns items vertically */
	width: 1440px; /* Adjust width */
	height:400px;
	background-color: #202831; /* Background color */
	padding: 20px;
	border-radius: 20px; /* Rounded corners */
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

/* Image Styling */
.containers img {
	width: 400px; /* Adjust image size */
	height: auto;
	border-radius: 10px; /* Optional: Rounded image */
	margin-right: 20px; /* Space between image and text */
}

/* Text Styling */
.text-box {
	flex: 1; /* Allows text to fill available space */
	font-family: Arial, sans-serif;
	color: white;
	font-size: medium;
	font-weight: 500;
}
/* Style the tab content */
    /* Box Container */
	.container1 {
		display: flex;
		align-items: center; /* Aligns items vertically */
		width: 1440px; /* Adjust width */
		height:400px;
		background-color: #171717; /* Box background */
		padding: 20px;
		border-radius: 20px; /* Rounded corners */
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
		margin: 20px auto; /* Centers the box */
	}

	/* Text Styling */
	.text-box1 {
		flex: 1; /* Fills available space */
		font-family: Arial, sans-serif;
		color: #333;
	}

	/* Image Styling */
	.container1 img {
		width: 600px; /* Adjust image size */
		height: 300px;
		border-radius: 20px;
		margin-left: 20px; /* Space between text and image */
	}



































/* media queries */
@media (max-width : 298px ){
	
	html{
		font-size: 55%;
	}
	
    #menu-btn{
	display: inline-block;
}
	.header{
		padding:2rem;
	}
	
	.header .icons {
        gap: 8px; /* Reduces space between icons */
    }
    .header .icons div {
        font-size: 18px; /* Decrease size for smaller screens */
        padding: 2px;
    }
	
	section{
	padding:2rem 9%;
}
	
	footer{
	text-align: center;
}
}

@media (max-width : 1066px ){
	
	.header .navbar{
		position: absolute;
		top:110%; right:-110%;
		width:30rem;
		box-shadow: var(--box-shadow);
		border-radius: .5rem;
		background: #202831;
	}
	
	.header .navbar.active{
		right:2rem;
		transition: .4s linear;
	}
	
	#menu-btn{
	display: inline-block;
}
	
	.header .navbar a{
		font-size: 2rem;
		margin:2rem 2.5rem;
		display: block;
	}
}

@media (max-width : 471px ){
	
	html{
		font-size: 55%;
	}
	
	#menu-btn{
	display: inline-block;
}
	
	.header .icons {
        gap: 1px; /* Reduces space between icons */
		width: 150%;
		margin-right: -60px;
		
    }
	
    .header .icons div {
        font-size: 2rem; /* Decrease size for smaller screens */
        padding: 1px;
    }
	
	.header .logo{
		width:100%;
		font-size: 20px;
	}
	
	.header{
		padding:1.5rem;
	}
	
	.heading{
		width: 100%;
		font-size: 20px;
	}	

.footer{
	text-align: center;
}
	
.header .search-form{
	width: 90%;
}
}
/* Responsive Design */
@media (max-width: 600px) {
	.containers {
		flex-direction: column; /* Stack image and text on small screens */
		text-align: center;
	}
	.containers img {
		margin-right: 0;
		margin-bottom: 10px;
	}
}