body{ 
    background-color;
}

.brand_name{
    color:darkslategray;
    text-transform: uppercase;
    letter-spacing: 10px;
}
.subword{
    color: gray;
}
.logo{
    border: 10px solid gray;
    border-radius: 50%;
}
.logo:hover{
    border: 10px solid black;
}
.navigation_lists ul{
    background-color: gray;
    color: white;
    gap: 20%;
}
.navigation_lists ul{
    display: flex;
    align-items: center;
    gap: 15%;
    list-style-type: none;
    font-size: 20px;
    width: 98%;
justify-content: space-between;
}
.navigation_lists ul li a {
    text-decoration: none;
    
    color:white;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    
} 
.navigation_lists ul:hover{
background-color:black;
color: black;


}

.socialmedia:hover{
    border: 2px solid black;
    background-color: gray;
    border-radius: 20%;
}
.address{background-color: white;
}
.address{
    text-decoration: none;color: gray;
}
.address:hover {
    background-color:white;
    color: gray;
}

.shop{
    background-color: darkslategray;
    color: white;
    width: 40%;
    height: 40px;
}
.scroll-wrapper {
  width: 100%;
  overflow: hidden;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  font-weight: bold;
  font-size: 20px;
  animation: moveText 10s linear infinite;
}

@keyframes moveText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-150%);
  }
}
.clea:hover {
    background-color: gray;
    color: white;
    width: 300px;
    height: 40px;

}
.clea{
    background-color: white;
    color:gray;
    font-size: 15px;
}
.productimg{
    border: 10px solid gray;
    border-radius: 10%;
}
.cart{
    background-color: gray;
    color: white;
    width: 40%;
    height: 40px;
}
.box{
    text-align: center;
    color: gray
}
.cart:hover {
    background-color: white;
    color:gray;
    font-size: 15px;
}
.partners_lists ul{
    display: flex;
    align-items: center;
    gap:15%;
    list-style-type: none;
    font-size: 20px;
}
.Subscribe{
    background-color: darkslategrey;
    color: white;
    width: 15%;
    padding: 10px;
    font-size: 20px;
}
.Subscribe_email{
    width: 20%;
    background-color: white;
    color: gray;
    font-size: 20px;
}
.Footer{
    background-color: darkslategray;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}
/*about*/
.about{
    font-size: 30px;
}
.teams_header{
    font-size: 30px;
}
.teamceo{
    background-color: gray;
    color: white;
}
.team{
    background-color:darkslategray;
    color: black;
    
}
.teamceo{
    background-color: gray;
    color: white;
    border-radius: 10px;
}
/*contact*/
.submit_button{
    background-color: darkslategray;
    width: 40%;
    padding: 15px;
    color: white;
    font-size: 20px;
}
.teamce{
background-color:darkslategray;
color: white;

}
.teamc{
    background-color: gray;
    color: black;
}

/*Shopping cart page*/
.shopping{
    background-color:gray;
    font-size: 20px;
    padding: 20px;
    color: white;
    text-transform: uppercase;
}
.products_bar{
    padding-top: 10px;
}
.btncartdelete{
    width: 50px;
    height: 50px;
    font-weight: bold;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
}
.btncartdelete:hover{
    color: white;
    background-color: black;
    border-radius: 20%;
}
.cartbg tr:nth-child(even) {
    background-color:darkslategray;
    color: white;
}
.cart_lists tr {
    background-color: gray;
    color: white;
    text-transform: uppercase;
}
.cartimg{
    width: 50px;
    height: 50px;
}
.checkout_button{
    background-color: darkslategray;
    width: 30%;
    height: 50px;
    font-weight: bold;
    color: white;
    font-size: 20px;
}
/*checkout and contact form*/
label{
    font-weight: bold;
    text-transform: lowercase;
}
input[type="text"],
input[type="email"],
input[type="month"],
input[type="year"],
input[type="password"] {
    width: 300px;
    height: 30px;
    padding-left: 10px;
}
textarea{
    width: 300px;
    padding-left: 10px;
}
input[type="button"] {
    width: 300px;
    height: 50px;
    background-color:gray;
    color: white;
    font-size: 20px;
    border: 2px solid gray;
    
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
input[type="button"]:hover{
    width: 300px;
    height: 50px;
    background-color: gray;
    color: white;
    font-size: 20px;
    border: none;
}
.confirm{
    text-transform: uppercase;
}
/* When user clicks inside */
input:focus {
  border-color: #00aaff;
  box-shadow: 0 0 5px rgba(0,170,255,0.5);
}



/* Placeholder styling */
input::placeholder {
  color: #999;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}
input [type="button"]{
  width: 300px;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.nat{
    width:315px;
    height:40px;
}
/* RESPONSIVE */

@media(max-width:760px){
    brand_name{
    color:darkslategray;
    text-transform: uppercase;
    letter-spacing: 10px;
}
.subword{
    color: gray;
}
.logo{
    border: 10px solid gray;
    border-radius: 50%;
}
.logo:hover{
    border: 10px solid black;
}
.navigation_lists ul{
    background-color: gray;
    color: white;
    gap: 20%;
}
.navigation_lists ul{
    display: flex;
    align-items: center;
    gap: 15%;
    list-style-type: none;
    font-size: 20px;
    width: 98%;
justify-content: space-between;
}
.navigation_lists ul li a {
    text-decoration: none;
    
    color:white;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    
} 
.navigation_lists ul:hover{
background-color:black;
color: black;


}

.socialmedia:hover{
    border: 2px solid black;
    background-color: gray;
    border-radius: 20%;
}
.address{background-color: white;
}
.address{
    text-decoration: none;color: gray;
}
.address:hover {
    background-color:white;
    color: gray;
}

.shop{
    background-color: darkslategray;
    color: white;
    width: 40%;
    height: 40px;
}
.scroll-wrapper {
  width: 100%;
  overflow: hidden;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  font-weight: bold;
  font-size: 20px;
  animation: moveText 10s linear infinite;
}

@keyframes moveText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-150%);
  }
}
.clea:hover {
    background-color: gray;
    color: white;
    width: 300px;
    height: 40px;

}
.clea{
    background-color: white;
    color:gray;
    font-size: 15px;
}
.productimg{
    border: 10px solid gray;
    border-radius: 10%;
}
.cart{
    background-color: gray;
    color: white;
    width: 40%;
    height: 40px;
}
.box{
    text-align: center;
    color: gray
}
.cart:hover {
    background-color: white;
    color:gray;
    font-size: 15px;
}
.partners_lists ul{
    display: flex;
    align-items: center;
    gap:15%;
    list-style-type: none;
    font-size: 20px;
}
.Subscribe{
    background-color: darkslategrey;
    color: white;
    width: 15%;
    padding: 10px;
    font-size: 20px;
}
.Subscribe_email{
    width: 20%;
    background-color: white;
    color: gray;
    font-size: 20px;
}
.Footer{
    background-color: darkslategray;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
}
/*about*/
.about{
    font-size: 30px;
}
.teams_header{
    font-size: 30px;
}
.teamceo{
    background-color: gray;
    color: white;
}
.team{
    background-color:darkslategray;
    color: black;
    
}
.teamceo{
    background-color: gray;
    color: white;
    border-radius: 10px;
}
/*contact*/
.submit_button{
    background-color: darkslategray;
    width: 40%;
    padding: 15px;
    color: white;
    font-size: 20px;
}
.teamce{
background-color:darkslategray;
color: white;

}
.teamc{
    background-color: gray;
    color: black;
}

/*Shopping cart page*/
.shopping{
    background-color:gray;
    font-size: 20px;
    padding: 20px;
    color: white;
    text-transform: uppercase;
}
.products_bar{
    padding-top: 10px;
}
.btncartdelete{
    width: 50px;
    height: 50px;
    font-weight: bold;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
}
.btncartdelete:hover{
    color: white;
    background-color: black;
    border-radius: 20%;
}
.cartbg tr:nth-child(even) {
    background-color:darkslategray;
    color: white;
}
.cart_lists tr {
    background-color: gray;
    color: white;
    text-transform: uppercase;
}
.cartimg{
    width: 50px;
    height: 50px;
}
.checkout_button{
    background-color: darkslategray;
    width: 30%;
    height: 50px;
    font-weight: bold;
    color: white;
    font-size: 20px;
}
/*checkout and contact form*/
label{
    font-weight: bold;
    text-transform: lowercase;
}
input[type="text"],
input[type="email"],
input[type="month"],
input[type="year"],
input[type="password"] {
    width: 300px;
    height: 30px;
    padding-left: 10px;
}
textarea{
    width: 300px;
    padding-left: 10px;
}
input[type="button"] {
    width: 300px;
    height: 50px;
    background-color:gray;
    color: white;
    font-size: 20px;
    border: 2px solid gray;
    
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
input[type="button"]:hover{
    width: 300px;
    height: 50px;
    background-color: gray;
    color: white;
    font-size: 20px;
    border: none;
}
.confirm{
    text-transform: uppercase;
}
/* When user clicks inside */
input:focus {
  border-color: #00aaff;
  box-shadow: 0 0 5px rgba(0,170,255,0.5);
}



/* Placeholder styling */
input::placeholder {
  color: #999;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}
input [type="button"]{
  width: 300px;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.nat{
    width:315px;
    height:40px;
}
}