/*
Author: benwerimo
Theme: Allsporty
Version: 1.0
*/
/*Css for all*/
*{
	margin: 0 0;
	padding: 0 0;
	font-family: Arial,helvetica,sans-serif;
}
body{
	/*background-color: rgb(241, 242, 246);*/
	aspect-ratio: 1;
	border: 1px solid;
	font-size: clamp(14px, 2vw, 18px);
	background: conic-gradient(at 75% -75%, rgb(206, 214, 224), rgb(241, 242, 246), rgb(236, 204, 104));
}
.container{
	background-color: rgb(255, 255, 255);
	width: 90%;
	margin: 1% auto;
}
a{
	text-decoration: none;
	color: orange;
}
a:hover{
	text-decoration: underline;
}
.error{
	color: red;
}
.success{
	color: green;
}
.clearfix{
	clear: both;
	float: none;
}
.font-weight{
	font-weight: bold;
	font-family: Georgia;
}
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.image-responsive{
	width: 100%;
}
.image-curve{
	border-radius: 10px;
}
.btn{
	padding: 1%;
	border: none;
	font-size: 1rem;
	border-radius: 5px;
}
.btn-primary{
	background-color: #fd79a8;
	color: white;
	cursor: pointer;
}
.btn-primary:hover{
	background-color: #e84393;
	color: white;
}
.tbl-full{
	width: 100%;
}


/*Css for menu section*/
.sell-on-allsporty{
	background-color: rgb(206, 214, 224);
	padding: 1%;
	padding-left: 5%;
	font-family: Georgia;
	font-size: 0.8em;
}
.menu{
	background-color: rgb(223, 228, 234);
	padding-left: 2%;
}
.logo{
	width: 5%;
	margin: 1% 0;
	margin-left: 2%;
	padding-left: 2%;
	float: left;
}
.search-and-menu{
	width: 85%;
	margin: 1% 0;
	float: right;
}
.search-and-menu table{
	width: 70%;
}
.search{
	width: 33%;
	margin: 1%;
	float: left;
}
.menu-buttons{
	width: 62%;
	margin: 1% auto;
	float: right;
}
.menu-buttons table{
	width: 80%;
}
.menu-buttons td{
	width: 25%;
}
.menu-buttons button{
	border: none;
	font-size: 1rem;
	background-color: rgb(223, 228, 234);
}
.menu-buttons button:hover{
	color: #fd79a8;
	text-decoration: underline;
}
.menu-buttons a{
	color: black;
	padding: 1%;
	font-size: 1rem;
}
.menu-buttons a:hover{
	color: #fd79a8;
	border-radius: 5px;
	text-decoration: underline;
	padding: 2%;
}

.menu-buttons1:hover .hide100 {display: block;}
.menu-buttons2:hover .hide101 {display: block;}
.hide100{
	position: absolute;
	background-color: rgb(241, 242, 246);
	left: 59%;
	top: 15%;
	line-height: 3rem;
	width: 15%;
	padding: 1%;
	z-index: 999;
	display: none;
}
.hide101{
	position: absolute;
	background-color: rgb(241, 242, 246);
	left: 70%;
	top: 15%;
	line-height: 3em;
	width: 15%;
	padding: 1%;
	z-index: 999;
	display: none;
}
.category-list {
    list-style: none;
    padding-left: 20px;
    display: none; /* Hidden until a sport is clicked */
}

.category-list li {
    margin: 5px 0;
}

.category-list a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

.category-list a:hover {
    color: red;
}
/* CSS for changing images */
        #image-navigation {
            text-align: center;
            margin-top: 10px;
            font-size: 24px;
            overflow: hidden; /* Hide overflow */
        }
        .nav-dash {
            text-decoration: none;
            color: black;
            margin: 0 5px;
            font-weight: bold;
            font-size: 90%;
            cursor: pointer;
        }
        .nav-dash:hover {
            color: gray;
        }

        /* Transitions */
        .fade {
            animation: fadeIn 1s ease-in-out;
        }

        .slide-left {
            animation: slideLeft 1s ease-in-out;
        }

        .slide-right {
            animation: slideRight 1s ease-in-out;
        }

        .zoom-in {
            animation: zoomIn 1s ease-in-out;
        }

        .zoom-out {
            animation: zoomOut 1s ease-in-out;
        }


        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideLeft {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideRight {
            from { transform: translateX(-100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes zoomIn {
            from { transform: scale(0.5); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        @keyframes zoomOut {
            from { transform: scale(1.5); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

/* CSS for changing images ends here*/








.cart{
	width: 100%;
}
.cart1{
	width: 37%;
	padding: 2% 1%;
	float: left;
}
.cart_content{
	position: absolute;
	background-color: rgb(241, 242, 246);
	font-size: 0.9em;
	left: 78%;
	top: 15%;
	line-height: 1.3em;
	width: 20%;
	padding: 1%;
	z-index: 999;
	display: none;
}
.cart1:hover .cart_content {display: block;}
.cart_content button{
	background-color: #fd79a8;
	color: white;
	cursor: pointer;
}
.cart_content button:hover{
	background-color: #e84393;
	color: white;
}
.cart-icon{
	width: 16%;
	float: left;
}


/*Css for categories section*/
.cat-and-image-change{
	width: 75%;
	height: 500px;
	float: left;
  	position: relative;
}
.cat-and-image-change img{
	height: 80%;
	width: auto;
	object-fit: contain; /* This ensures the image covers the area */
	display: block;
}

.categories{
	width: 30%;
	height: 85%;
	margin: 1%;
	padding: 2%;
	float: left;
	overflow: auto;
}
.categories button{
	color: gray;
	border: none;
	background-color: white;
	font-size: 1rem;
}
.categories button:hover{
	color: #fd79a8;
	font-weight: bold;
}
.categories button:hover .hide3 {display: none;}

.hide3{
	position: absolute;
	background-color: rgb(241, 242, 246);
	left: 20%;
	top: 20%;
	line-height: 2em;
	width: 75%;
	padding: 2%;
	display: block;
}
.sub3_boxes{
	width: 21%;
	float: left;
	padding: 1%;
	margin: 1%;
}
.sub3_boxes ul{
	list-style-type: none;
}
.sub3_boxes a{
	color: gray;
	text-decoration: none;
}
.sub3_boxes a:hover{
	text-decoration: underline;
	color: rgb(255, 127, 80);
	font-weight: bold;
	background-color: rgb(206, 214, 224);
}
.image-change{
	width: 60%;
	float: left;
	margin: 1%;
}
.image-change img{
width: 400px;
height: 400px;
margin: auto;
z-index: 1;
}
.featured-image{
	width: 90%;
	padding: 1%;
}
.visible{
	display: block;
}
.hidden{
	display: none;
}
.featured-image-details{
	width: 100%;
}
.featured-products{
	width: 20%;
	height: 500px;
	margin: 1,auto;
	padding: 2%;
	float: right;
	z-index: 100;
	background-color: rgb(241, 242, 220);
}

/*Css for Jersey section*/
.see-all{
	background-image: linear-gradient(to right, rgb(164, 176, 190) , rgb(241, 242, 246));
	background-repeat: no-repeat;
	border-bottom: 1px solid lightgray;
	width: 98%;
	padding: 1%;
}
.see-all ul{
	list-style-type: none;
}
.see-all ul li{
	display: inline;
}
.see-all a{
	color: #fd79a8;
}
.see-all a:hover{
	color: #e84393;
}
.see-all-cart-product{
	width: 98%;
}
.see-all-cart-product table{
	width: 70%;
	font-size: 1rem; 
	margin: auto;
}
.see-all-cart-product th{
	width: 18%; 
	padding: 1%; 
	border: 1px solid lightgray;
}
.see-all-cart-product img{
	width: 100px;
}
.box-6{
	width: 12%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.brand-image{
	height: 120px;
	width: 100%;
	overflow: hidden; /* Hide overflow */
  	position: relative;
}
.brand-image img {
  height: 100%;
  width: auto;
  object-fit: contain; /* This ensures the image covers the area */
  display: block;
}
.brand-details{
	width: 100%;
	font-size: 0.95em;
}


/*Css for join us section*/
.join-us1{
	width: 90%;
	margin: 1% 3%;
	padding: 1% 2%;
}
.join-us{
	width: 50%;
	margin: 0 auto;
	color: black;
}
.j1{
	border: 1px solid black;
	width: 35%;
	border-radius: 50px;
	margin: 2%;
	padding: 5%;
	float: left;
}
.j1 a{
	color: #fd79a8;
}
.j1 a:hover{
	color: #e84393;
}

/*Css for about us section*/
.box-2{
	width: 45%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.box-2 input{
	width: 80%;
	height: 30px;
}
.box-2 textarea{
	width: 80%;
	height: 150px;
}
.box-2 a{
	color: black;
}
.box-2 a:hover{
	text-decoration: underline;
	color: #e84393;
}

/*Css for social media section*/
.follow{
	width: 20%;
	margin: auto;
}
.social-media{
	width: 30%;
	padding: 1%;
	float: left;
}
.social1{
	width: 10%;
	margin: 1%;
	padding-top: 2%;
	padding: 1%;
	float: right;
}

.help-centre{
	width: 98%;
	margin: 1% auto;
	float: right;
}

.help-centre1{
	width: 28%;
	height: 220px;
	margin: 1% auto;
	padding: 1%;
	float: left;
}
.help-centre1 p{
	font-size: 0.9em;
	line-height: 2rem;
}
.box3{
	width: 90%;
	margin: 3% auto;
	padding: 1%;
	font-size: 0.9em;

}
.box3 a{
	color: black;
	font-family: Georgia;
}
.box3 a:hover{
	color: #fd79a8;
}
.help-centre2{
	color: black;
	border-radius: 5px;
	width: 95%;
	margin: 1%;
	margin-top: 15%;
	padding: 22% 3%;
}

/*Css for rights reserved section*/










/*Css for Jersey page*/
.specifications{
	background-image: linear-gradient(rgb(164, 176, 190) , rgb(241, 242, 246));
	background-repeat: no-repeat;
	border-radius: 5px;
	width: 15%;
	margin-right: 1%;
	padding: 2%;
	line-height: 2em;
	float: left;
}
.specifications a{
	color: black;
	font-weight: lighter;
}
.specifications a:hover{
	color: rgb(255, 71, 87);
	font-weight: bold;
	background-color: rgb(164, 176, 190);
	padding: 4%;
}
.product-info{
	border-radius: 5px;
	width: 80%;
	float: left;
}
.see-all-product{
	background-image: linear-gradient(to right, rgb(164, 176, 190) , rgb(241, 242, 246));
	background-repeat: no-repeat;
	border-radius: 5px;
	width: 98%;
	padding: 1%;
}
.available-product{
	border-bottom: 0.5px solid lightgray;
	color: gray;
	width: 98%;
	padding: 1%;
}

.products{
	background-color: rgb(255, 255, 255);
	width: 98%;
	padding: 1%;
}
.product-box{
	width: 21%;
	border-radius: 10%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.product-box img{
	height: 100%;
	width: auto;
    object-fit: contain; /* This ensures the image covers the area */
    display: block;
}
.product-box a:hover{
	padding: 1%;
}
.product-box-image{
	width: 98%;
	height: 160px;
	overflow: hidden; /* Hide overflow */
  	position: relative;
}

.product-box-details{
	width: 98%;
	color: black;
	padding: 1%;
}
.add-to-cart{
	width: 94%;
	font-size: 0.8em;
	padding: 3%;
}
.add-to-cart a{
	width: 90%;
	color: white;
	padding: 5%;
	border-radius: 5px;
	background-color: rgb(255, 107, 129);
}
.add-to-cart a:hover{
	width: 90%;
	border-radius: 5px;
	background-color: rgb(255, 71, 87);
	padding: 5% 15%;
}




/*Css for Jersey-details page*/
.product-image{
	background-color: rgb(241, 242, 246);
	border-radius: 5px;
	margin: 1%;
	width: 58%;
	float: left;
}
.product-image input{
	width: 70%;
}
.image-box{
	width: 38%;
	padding: 1%;
	float: left;
}
.details-box{
	background-color: white;
	width: 56%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.product-title{
	border-bottom: 1px solid lightgray;
	width: 96%;
	padding: 2%;
	margin-bottom: 4%;
}
.product-specs{
	border-bottom: 1px solid lightgray;
	width: 96%;
	padding: 2%;
	margin-bottom: 4%;
	
}
.related-product{
	width: 98%;
	padding: 1%;
}


/*Css for customer login page*/
.customer-login{
	color: white;
	width: 46%;
	padding: 2%;
	float: left;
	font-family: Georgia;

}
.customer-login label{
	font-size: 1.5rem;
	line-height: 4rem;
	font-weight: bold;
}
.customer-login input{
	width: 75%;
	margin: auto;
	padding: 1.5%;
	border: none;
	border-radius: 3px;
}




/*Css for checkout page*/
.billing-details{
	color: white;
	width: 96%;
	padding: 2%;
	font-family: Georgia;
}
.billing-details table{
	width: 100%;
}
.billing-details input{
	width: 75%;
	margin: auto;
	padding: 1.5%;
	border: none;
	border-radius: 3px;
}
.billing-details label{
	font-size: 1.5rem;
	line-height: 4rem;
	font-weight: bold;
}
.your-order{
	color: white;
	width: 96%;
	padding: 2%;
	font-family: Georgia;
}
.your-order label{
	font-size: 1.5rem;
	line-height: 4rem;
	font-weight: bold;
}
.your-order table{
	color: black;
	width: 100%;
	background-color: white;
}
.your-order td{
	border: 1px solid lightgray;
	padding: 1%;
}
.payment-method{
	color: white;
	width: 96%;
	padding: 2%;
	font-family: Georgia;
}
.payment-method label{
	font-size: 1.5rem;
	line-height: 4rem;
	font-weight: bold;
}
.payment-box{
	line-height: 1.5rem;
	width: 100%;
	padding: 2% 0;
}
.payment-box td{
	padding: 1%;
	text-align: justify;
}


/*Css for designer page*/
.designer{
	background-color: rgb(255, 255, 255);
	width: 40%;
	margin: 1% auto;
	padding: 2%;
}
.designer input{
	width: 95%;
	height: 30px;
}
.designer textarea{
	width: 95%;
}






/*Css for mobiile devices*/
@media only screen and (max-width:768px){

.logo{
	width: 10%;
	margin: 1% 0;
	margin-left: 2%;
	padding-left: 2%;
	float: left;
}
.search-and-menu{
	width: 85%;
	margin: 1% 0;
	float: right;
}
.search{
	width: 40%;
	margin: 1%;
	float: left;
}
.menu-buttons{
	width: 100%;
	margin: 1% auto;
	float: right;
}
.menu-buttons table{
	width: 100%;
}
.menu-buttons button{
	border: none;
	font-size: 1rem;
	background-color: rgb(223, 228, 234);
}
.menu-buttons a{
	color: black;
	padding: 1%;
	font-size: 1rem;
}

.hide100{
	position: absolute;
	background-color: rgb(241, 242, 246);
	left: 49%;
	top: 14%;
	line-height: 3rem;
	width: 35%;
	padding: 1%;
	display: none;
}
.hide101{
	position: absolute;
	background-color: rgb(241, 242, 246);
	left: 60%;
	top: 14%;
	line-height: 3em;
	width: 35%;
	padding: 1%;
	display: none;
}
.cart_content{
	position: absolute;
	background-color: rgb(241, 242, 246);
	font-size: 0.9em;
	left: 48%;
	top: 14%;
	line-height: 1.3em;
	width: 50%;
	padding: 1%;
	display: none;
}
.cat-and-image-change{
	width: 100%;
	height: 300px;
  	position: relative;
}
.image-change img{
	width: 170px;
	height: 150px;
	margin: auto;
}
.categories{
	width: 25%;
	height: 85%;
	margin: 1%;
	padding: 1%;
	font-size: 0.7rem;
	float: left;
	overflow: auto;
}
.categories button{
	font-size: 0.8rem;
}
.categories a{
	font-size: 0.8rem;
}
.image-change{
	width: 64%;
	float: left;
	margin: 1%;
}
.featured-products{
	width: 90%;
	height: 85%;
	margin: 1,0;
	padding: 2%;
	float: right;
	background-color: rgb(241, 242, 220);
}
.nav-dash {
    text-decoration: none;
    color: black;
    margin: 0 5px;
    font-weight: bold;
    font-size: 50%;
    cursor: pointer;
}
.box-6{
	width: 45%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.box-2{
	width: 95%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.j1{
	border: 1px solid black;
	width: 70%;
	border-radius: 40px;
	margin: 2%;
	padding: 5%;
	float: left;
}
.help-centre1{
	width: 95%;
	height: 220px;
	margin: 1% auto;
	padding: 1%;
	float: left;
}
.follow{
	width: 50%;
	margin: auto;
}
.social-media{
	width: 30%;
	padding: 1%;
	float: left;
}
.social1{
	width: 10%;
	margin: 1%;
	padding-top: 2%;
	padding: 1%;
	float: right;
}
.product-image{
	background-color: rgb(241, 242, 246);
	border-radius: 5px;
	margin: 1%;
	width: 92%;
	float: left;
}
.specifications{
	background-image: linear-gradient(rgb(164, 176, 190) , rgb(241, 242, 246));
	background-repeat: no-repeat;
	border-radius: 5px;
	width: 30%;
	margin-right: 1%;
	padding: 2%;
	line-height: 2em;
	float: left;
}
.product-info{
	border-radius: 5px;
	width: 65%;
	float: left;
}
.product-box{
	width: 42%;
	border-radius: 10%;
	margin: 1%;
	padding: 1%;
	float: left;
}
.product-box-image{
	width: 98%;
	height: 100px;
	overflow: hidden; /* Hide overflow */
  	position: relative;
}
.see-all-cart-product table{
	width: 99%;
	font-size: 0.7rem; 
	margin: auto;
}
.see-all-cart-product th{
	width: 15%; 
	padding: 1%; 
	border: 1px solid lightgray;
}
.see-all-cart-product img{
	width: 60px;
}
.customer-login{
	color: white;
	width: 80%;
	padding: 2%;
	float: left;
	font-family: Georgia;

}

}





@media (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets only */
	.cat-and-image-change{
		width: 70%;
		height: 300px;
	  	position: relative;
	}
	.image-change img{
		margin: auto;
		width: 220px;
		height: 200px;
	}
	.featured-products{
		width: 25%;
		height: 85%;
		margin: 1,0;
		padding: 2%;
		float: right;
		background-color: rgb(241, 242, 220);
	}
}