/* Resetting VAlues */
body{
    padding: 0%;
    margin: 0%;
    background: grey;
/* height: 1000rem; */
transition: all 2s;
}
html{
  scroll-behavior: smooth;
}
/* A)NAvigation Menu */
.navbar ul,.navbar{
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
  }
  .navbar{
  background: rgb(70, 69, 69);
    position: sticky;
    top: 0px;
    z-index: 3;
   
}
#navigat{
  position:sticky;
  top: 0;
}
.login img{
    width: 3rem;
    height: 3rem;
    margin: 3rem
}
.login.loginn_2{
    margin: 2rem 4rem;
}
#cart{
    height: 3rem;
}
.navbar li{
    margin: 2rem 1rem;
    font-size: 18px;
    list-style: none;
    cursor: pointer;
    transition-property:color ;
    transition-duration: 1s;
    /* transition: all 0s; */
    color: rgb(158, 157, 157);
    
}
.navbar li:hover{
    border-bottom: solid rgb(141, 137, 137) 4px;
    color: rgb(219, 219, 219);
}
#logo_main{
    height: 5rem;
    width: 5rem;
    margin: 29px 8px;
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0rem 9rem;
    font-family: 'Original Surfer', cursive;
    cursor: pointer;
}
.logo span{
    font-size: 2rem;
    color: #5b96ee;
    cursor: pointer;
    transition: all 0s;
}
.logo span:hover{
    border-bottom: solid rgb(14, 122, 247) 5px;
}
.navbar ul{
    margin: 2rem 0rem;
}
/* B)Section SLiding */

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
.slideshow-container img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
#img_slide_2{
  height: 525px;
}
/* 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 {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

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

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
.slideshow-container{
    margin-top: 3rem;
    /* margin-bottom: 3rem; */
}
/* C)COntent OF Website */
.content h3{
  color: white;
  vertical-align: middle;
  font-size: 3rem;
  border: solid;
  padding: 2rem 2rem;
  background: cadetblue;
  border-bottom: solid white;
}
#cart-{
  height: 2rem;
  width: 2rem;
}
#span_op{
  display: block;
  padding: 1rem 0rem;
  background: white;
  border: solid;
  width: 20rem;
  transition: all 1s;
  text-align: center;
}
#span_op:hover{
  background: #717171;
  cursor: pointer;
}
.first,.first2,.first3{
  border: solid white;
  /* width: 23%; */
  padding: 2r;
  height: -20%;
  margin-left: 3rem;
  padding: 0rem 1rem;
  display: inline-block;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-bottom: 3rem;
  cursor: pointer;
}
#img_tshirt_1{
  border-radius: 33px;
  margin-bottom: 1rem;
  border: solid;
}
.price_name{
  color: rgb(0, 0, 0);
}
#price{
  color: rgb(163, 5, 5);
}

.tshirt {
  margin: 0rem 8%;
  display: flex;
  align-content: space-between;
  justify-content: space-between;
}
#h3_nike{
  background-color: black;
}
#hr_op{
  height: 3rem;
  color: black;
}




/* C)FORM */

input{
padding: 0.5rem 1.1rem;
text-align: center;
margin-bottom: 2rem;
background: #313840;
/* border-radius: 10px; */
border-top: solid #313840;
border-right: solid #313840;
border-left: solid #313840;
}
.contact{
  background-color: #313840;
  border: solid #3a3a3a 10px;
}
.only_email_name{
  display: inline-block;
}
.only_email_name input{
  width: 10rem;
  font-size:15px;
}
#sub{
  width: 31rem;
  font-size: 21px;
}
#mub{
  padding: 0.5rem 1.1rem;
  text-align: center;
  margin-bottom: 2rem;
  background: #313840;
  /* border-radius: 10px; */
  /* border-top: solid #313840; */
  /* border-right: solid #313840; */
  /* border-left: solid #313840; */
  border: solid;
  background: black;
  color: #aea1a1;
  transition: all 1s;
}
#mub:hover{
  border-radius: 40px;
  background-color: #1f1e1e;
}
#touch{
  color: white;
  font-size: 4rem;
  font-family: 'Original Surfer';
}
footer span{
  display: inline-block;
}
footer{
  display: flex;
  flex-direction: column;
}


/* D)Media QUeries */

@media  (max-width:500px) {
#loge{
    display: none; }
  .navbar{
    display: flex;
    flex-direction: column-reverse; }
    .navbar ul{
      display: flex;
      justify-content: center;
      justify-content: flex-start;
  overflow: hidden;
margin: 1rem -2rem;}
  

.navbar li {
    margin: 0rem 1rem;
    font-size: 18px;
    list-style: none;
    cursor: pointer;
    transition-property: color;
    transition-duration: 1s;
    /* transition: all 0s; */
    color: rgb(158, 157, 157);
    margin-bottom: 2rem;
}
.logo span{
  font-size: 1.5rem;
}
#cont{
  display: none;
}
#img_slide_2{
  height: 72%;
}
.logo{
  justify-content: space-around;
}
/* body{
  overflow: hidden;
} */
a{
  margin: 0rem 0rem;
}
.content h3{
  color: white;
    vertical-align: middle;
    font-size: 2rem;
    border: solid;
    padding: 2rem 2rem;
    background: cadetblue;
    width: 22rem;
    border-bottom: solid white;
}
/* .flex-container{
  display: flex;
  flex-direction: row;
} */
}