*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

body {
    background: linear-gradient(#000000, #565353);
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.container::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgb(110, 23, 23);
    position: absolute;
    z-index: -1;
    top: 0px;
    clip-path: circle(43% at right 100%);
}




.container {
    width: 80%;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin: auto;
    margin-bottom: 60px;
    margin-top: 30px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
    padding: 20px 0;
}

nav .logo {
    color: aliceblue;
    text-decoration: none;
    font-size: 31px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgb(0, 0, 0), 0 0 25px rgb(213, 26, 234), 0 0 5px rgb(202, 202, 230);

}

nav ul li {
    display: inline-block;
    margin: 0 5px;
    
}

nav ul li a {
    color: wheat;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

nav ul li a:hover {
    color: aqua;
}
.contant-row{
    width: 80%;
    height: 80%;
    margin: auto;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background-color: rgba(3, 2, 2, 0.721);
    margin-bottom: 20px;
}
.contant-row .text{
    color: #abafb2;
    text-transform: uppercase;
    text-decoration: double;
    font-weight: 700;
    
}
.contant-row .text h2{
    color: #25a578;
    text-align: left;
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgb(0, 0, 0), 0 0 25px rgb(213, 26, 234), 0 0 5px rgb(202, 202, 230);
}

.contant-row .text h2:hover{
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    color: rgb(24, 114, 118);
  
    
}
.contant-row .text p{
    color: #b7c3b8;
    margin-bottom: 20px;
    padding: 0 50px;
    text-align: center;
    letter-spacing: 2px;
    font-size: 20px;
}
.contant-row .text p:hover{
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    color: rgb(26, 26, 25);
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.grid-item {
    overflow: hidden;
    position: relative;
}

.grid-item img {
    width: 80%;
    transition: transform 0.3s ease;
}




 

 .header-row {
    text-align: center;
    color: aliceblue;
    text-transform: uppercase;
    padding: 40px;
    font-weight: 1000;
    border-top: 1px solid rgb(239, 229, 229);
    font-size: 18px;
    font-family: sans-serif;
    letter-spacing: 3px;
}
.header-row p{
    color: #507c9c;
    margin-top: 30px;
    text-shadow: -1px 0 rgb(102, 101, 101), 0 1px rgb(129, 128, 128), 1px 0 rgb(113, 111, 111), 0 -1px rgb(0, 0, 0);   
}
.header-row h1 span {
    color: #49d8c5cd;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(165, 165, 192), 0 0 5px rgb(202, 208, 21);
}
.shoes-showcase {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;
}
.shoes-card {
    background: rgba(235, 237, 243, 0.1);
    border-radius: 10px 50px;
    width: 300px;
    margin: 20px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shoes-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(135, 206, 227, 0.685);
    background: rgba(0, 0, 0, 0.36);
}
.shoes-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
}
.shoes-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.shoes-card:hover .car-image img {
    transform: scale(1.1);
}
.shoes-details {
    color: #d14949;
}
.shoes-details h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #ffdf10cd;
    text-transform: uppercase;
}
.shoes-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;   
}
.shoes-specs span {
    background: rgba(57, 106, 212, 0.1);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    color: #759e78;
}

.shoes-price {
    font-size: 1.8em;
    font-weight: bold;
    color: #45ca0ccd;
    margin: 15px 0;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(165, 165, 192), 0 0 5px rgb(202, 208, 21);
}

.shoes-details p {
    color: #abafb2;
    font-size: 0.9em;
    line-height: 1.5;
}
.buy-shoes{
    display: flex;
    justify-content: center;
    align-items: center;
}
.now-shoes{
    background-color: #ccdb29da;
    justify-content: center;
    position: relative;
    padding: 10px 20px;
    border-radius: 20px;
    text-shadow: 1px 1px 2px rgb(232, 19, 136), 0 0 25px rgb(30, 30, 213), 0 0 5px rgb(22, 152, 74);
    color: #000000;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 5px 10px rgba(123, 119, 119, 0.1);
}
/* ............................... */
.header-mev{
    text-align: center;
    color: aliceblue;
    text-transform: uppercase;
    padding: 40px;
    font-weight: 1000;
    border-top: 1px solid rgb(239, 229, 229);
    font-size: 18px;
    font-family: sans-serif;
    letter-spacing: 3px;
}
.header-mev p{
    color: #89ae7f;
    margin-top: 30px;
}
.header-mev h1{
    color: rgb(255, 255, 255);
    
}
.header-mev  h1 span {
    color: #55f0dbcd;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(165, 165, 192), 0 0 5px rgb(202, 208, 21);
}
.header-mev p{
    text-align: center;
    color: #49a8d8cd;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.T-shirts-gallery{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;
}
.T-shirts-card{
    background: rgba(43, 204, 169, 0.1);
    border-radius: 10px 50px;
    width: 30%;
    height: 100%;
    margin: 20px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.T-shirts-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(98, 190, 55, 0.986);
    background: rgba(32, 46, 33, 0.279);
}
.T-shirts-image{
    width: 100%;
    height: 80%;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
}
.T-shirts-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.T-shirt-card:hover .car-image img{
    transform: scale(1.1);
}
.T-shirts-specs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}
.T-shirts-specs span{
    background: rgba(94, 23, 218, 0.166);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    color: #759e78;
}
.T-shirts-price{
    font-size: 1.8em;
    font-weight: bold;
    color: #29a0dbda;
    margin: 15px 0;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(165, 165, 192), 0 0 5px rgb(202, 208, 21);

}
.butten-buy{
    display: flex;
    justify-content: center;
    align-items: center;
}
.buy-T-shirt {
    background-color: #ccdb29da;
    justify-content: center;
    position: relative;
    padding: 10px 20px;
    border-radius: 20px;
    text-shadow: 1px 1px 2px rgb(232, 19, 136), 0 0 25px rgb(30, 30, 213), 0 0 5px rgb(22, 152, 74);
    color: #000000;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 5px 10px rgba(123, 119, 119, 0.1);
}    
.buy-T-shirt:active{
    transform: scale(0.96);
}

.T-shirt-details h3{
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #b7ec3bfe;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgb(110, 23, 23);
}
/* ...........hode.............. */
.header-hode{
    text-align: center;
    color: aliceblue;
    text-transform: uppercase;
    padding: 40px;
    font-weight: 1000;
    border-top: 1px solid rgb(239, 229, 229);
    font-size: 18px;
    font-family: sans-serif;
    letter-spacing: 3px;
}
.header-hode p{
    color: #89c778;
    margin-top: 30px;
}
.header-hode h1{
    color: rgb(255, 255, 255);
    
}
.header-hode h1 span {
    color: #0862d8dd;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(165, 165, 192), 0 0 5px rgb(202, 208, 21);
}
.header-hode p{
    text-align: center;
    color:rgb(128, 194, 201);
}
.hode-swet-gallery{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;

}
.hode-card{
    background: rgba(43, 204, 169, 0.1);
    border-radius: 10px 50px;
    width: 30%;

    margin: 20px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hode-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(98, 190, 55, 0.986);
    background: rgba(98, 188, 106, 0.279);
} 
.hode-image{
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
}
.hode-image img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.hode-detailes h3{
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #b7ec3bfe;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgb(110, 23, 23);
}
.hode-card:hover .car-image img{
    transform: scale(1.1);
}
.hode-specs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}
.hode-specs span{
    background: rgba(94, 23, 218, 0.166);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    color: #759e78;
}
.hode-price{
    font-size: 1.8em;
    font-weight: bold;
    color: #29a0dbda;
    margin: 15px 0;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(165, 165, 192), 0 0 5px rgb(202, 208, 21);

}
.butten-buy{
    display: flex;
    justify-content: center;
    align-items: center;
}
.buy-hode {
    background-color: #ccdb29da;
    justify-content: center;
    position: relative;
    padding: 10px 20px;
    border-radius: 20px;
    text-shadow: 1px 1px 2px rgb(232, 19, 136), 0 0 25px rgb(30, 30, 213), 0 0 5px rgb(22, 152, 74);
    color: #000000;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 5px 10px rgba(123, 119, 119, 0.1);
}    
.buy-hode:active{
    transform: scale(0.96);
}
 

.model-image{
    width: 50%;

}
.model-image img{
    width: 80%;
    border-radius: 30px;
    margin-left: 20px;
}
.model-image img:hover{
    transform: scale(1.1);
}
.new-model{
    display: flex;
    align-items: center;
}
.text-model{
    width: 50%;
    display: inline-block;
    padding: 0  20px;
    margin-right: 30px;
    font-size: 28px;
    text-align: center;
    font-weight: 500;
    color: #6ec6ef83;
    margin-left: 30px;
}
.text-model:hover{
    transform: scale(1.2);
    color: #fffffff9;
}
.end-pro{
    background-color: #000000;
    padding: 10px;
    margin-top: 70px;

}
.end-pro h4{
    color: white;
    text-align: center;
}
.Page-summary{
width: 80%;
height: 80%;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
position: relative;
margin: auto;
margin-bottom: 60px;
margin-top: 30px;
border :1px solid #1678a2b1;
}
.text-page{
    text-align: center;
    font-size: 32px;
    margin-top: 60px;
    margin-bottom: 60px;
    color: wheat;
    padding:  0 20px;

}





@media ( max-width: 920px ) {
	
	.shoes-card {
		flex: 1 21%;
	}
	
	.products .shoes-card:first-child, 
	.products .shoes-card:nth-child(2) {
		flex: 2 46%;
	}
	
}

@media ( max-width: 600px ) {
	
	.shoes-card {
		flex: 1 46%;
	}
	
}

@media ( max-width: 480px ) {
	
	h1 {
		margin-bottom: 20px;
	}
	
	.shoes-filter {
		flex-direction: column;
	}
	
	.sort {
		align-self: flex-start;
	}
	
}