homestyle.css

/* {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ONHOVER}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} */

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.2s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 10px 20px;
  text-align: center;
  background-color: rgb(143, 143, 143);
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  opacity: 1;
}
/* {{{{{{{{{{{{{{{{{{{{{{{{{{{{ONHOVER CLOSE}}}}}}}}}}}}}}}}}}}}}}}}}}}} */
#Blacknav {
  margin-top: -8px;
  /* border: 1px solid red; */
  height: 40px;
  width: 101%;

  background-color: rgb(22, 21, 21);
  color: white;
  display: flex;
  justify-content: flex-end;
  font-size: 17px;
  font-family: "Open Sans Condensed", sans-serif;
}
.sign {
  text-decoration: none;
}
.navf {
  /* font-weight:500; */
  color: white;
  line-height: 30px;
  word-spacing: 7px;
  /* margin: auto; */
  /* border: 1px solid red; */
  margin-left: 5px;
  margin-right: 10px;
}

.navf:hover {
  text-decoration: underline;
}

.nav {
  /* border: 1px solid red; */
  height: 110px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.logo {
  /* border: 1px solid red; */
  cursor: pointer;
}

input {
  border: 1px solid black;
  padding: 10px 30px;
  border-radius: 5px;
  font-size: 17px;
}

input:hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.a2 > a > p:hover {
  color: white;
  transition: 0.1s;
  background-color: black;
  border: 2px solid black;
}
.a2 > a:hover {
  cursor: pointer;
  text-decoration: underline;
  background-color: rgb(31, 28, 28);
  transition: 0.1s;
  /* padding-right: 1.5px; */
  /* padding-left: .5px; */
  color: white;
}
.a2 > a {
  text-decoration-line: none;
  color: black;
  /* padding: 2.5px; */
  /* background-color: white; */
}
#navDiv2 {
  border: 1px solid rgb(204, 201, 201);
  width: 100%;
  height: 40px;
  margin: auto;
  display: flex;
  flex-direction: row;
  margin-left: 30px;
}
#navDiv2 > a > img {
  width: 70px;
  height: 47px;
  padding: 16px;
}
#fav {
  /* border: 2px solid red; */
  display: flex;
  flex: wrap;
  justify-content: flex-start;
  flex-direction: row;
  gap: 45px;
  transition: top 0.1s;
}

#bag2 {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
/* 
#bag1 {
  margin-top: 5px;
} */
#bag2 {
  margin-top: 20px;
}
#mainContent {
  /* margin-top: 300px; */
  padding-top: 200px;
  width: 20%;
}
#secNav {
  position: fixed;
  border: 0px solid red;
  height: 300px;
  margin-left: 25px;
  width: 90%;
  position: fixed;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
  display: none;
  display: block;
  transition: top 0.8s;
}
#navdiva {
  padding: 30px;
  grid-area: a;
  border: rgb(235, 235, 235) solid 0.5px;
  padding-left: 150px;
  background-color: white;
}
#navdivb {
  padding: 30px;
  grid-area: b;
  display: flex;
  gap: 140px;
  border: rgb(228, 228, 228) solid 0.5px;
  padding-left: 100px;
  background-color: white;
}

#navdivd {
  grid-area: d;
  border: rgb(231, 231, 231) solid 0.5px;
  padding-left: 96px;
  display: flex;
  gap: 175px;
  background-color: white;
  row-gap: 40px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

#secNav {
  display: grid;
  grid-template-areas: "a b b b b" "a b b b b" "a b b b b" "a b b b b" "c d d d d";
  display: none;
}
.navhighlight {
  font-weight: bolder;
  margin-left: 0;
}
a {
  text-decoration: underline;
  text-decoration: none;
  color: black;
}
#navdiva > div {
  padding: 4px;
}
#navdivb > div > div {
  padding: 4px;
}

input {
  vertical-align: top;
}

/* //////////////////////////////////////////////// */
/* .mySlides {
  display: none;
} */

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 99%;
  padding: 15px 5px;

  margin: auto;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.category {
  /* border: 1px solid green; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#catimg {
  width: 400px;
  height: 500px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-image: url("https://bit.ly/31XEXIl");
  /* border: 1px solid red; */
}

#catimg2 {
  width: 400px;
  height: 500px;
  height: 500px;
  cursor: pointer;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-image: url("https://bit.ly/30obw1n");
  /* border: 1px solid red; */
}
#catimg3 {
  width: 400px;
  height: 500px;

  height: 500px;
  cursor: pointer;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-image: url("https://bit.ly/31RNJYt");
  /* border: 1px solid red; */
}
#ser {
  /* border: 1px solid red; */
  word-spacing: 10px;
  text-align: center;
  margin-bottom: 50px;
  color: darkslategray;
}
.chead > #img {
  width: 700px;
  height: 450px;
  background-size: cover;
  background-image: url("https://bit.ly/3DSX1An");
}
.chead {
  /* border: 1px solid red; */
  height: 520px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#BADMINTON {
  /* border: 1px solid red; */
  margin-top: 20px;
  margin-left: 50px;
  line-height: 30px;
  word-spacing: 3px;
  letter-spacing: 1px;
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  height: 400px;
}
#BADMINTON > button {
  cursor: pointer;
  padding: 13px 45px;
  background-color: transparent;
}
.victor {
  /* border: 1px solid red; */
  height: 440px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#vone {
  /* border: 1px solid red; */
  width: 47%;
  background-image: url("https://bit.ly/30tGO7a");
  background-size: auto;
  cursor: pointer;
}
#vtwo {
  width: 47%;
  /* border: 1px solid red; */
  background-image: url("https://bit.ly/3s28M5j");
  background-size: cover;
}
.victorshop {
  height: 50px;
  width: 100%;
  font: 1em sans-serif;
  margin-top: 20px;
  font-size: 21px;
  display: flex;
  justify-content: space-around;
}
.yonex {
  /* border: 1px solid red; */
  height: 520px;
}
#smlslider {
  /* border: 1px solid red; */
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
}
.sliderimg {
  margin-top: 10px;
  /* border: 2px solid greenyellow; */
  height: 150px;
  width: 200px;
}
.sliderimg:hover {
  /* border-radius: 10px; */
  /* border: 1px solid rgb(114, 114, 114); */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.about {
  /* border: 1px solid red; */

  height: 420px;
  width: 100%;
  display: flex;
  /* flex-wrap: wrap; */
  word-wrap: break-word;
  overflow: hidden;
}
.about > #one {
  /* border: 1px solid red; */
  width: 695px;
}
#two {
  margin-left: 25px;
  /* border: 1px solid red; */
  width: auto;
  font-size: 17px;
  color: rgb(24, 23, 23);
  word-spacing: 5px;
  line-height: 30px;
}
#two > button {
  padding: 13px 50px;
  margin-top: 30px;
  font-weight: bolder;
  background-color: black;
  color: aliceblue;
  background-color: black;
  position: relative;
}
#two > button:hover {
  zoom: 110%;
  transition: ease-in-out;
  transition-duration: 1s;
  background-color: orangered;
}
.testimonials {
  /* border: 1px solid red; */
  text-align: center;
  flex-wrap: wrap;
  margin: auto;
  width: 90%;
  height: 220px;
}
.testimonials > a > button {
  padding: 6px 70px;
  font-family: "Open Sans Condensed", sans-serif;
  /* background-color: transparent; */
  font-size: 23px;
  margin-top: 10px;
  cursor: pointer;
}
.testimonials > a > button:hover {
  color: black;

  border: 1px solid orangered;
}
.service {
  /* border: 12px solid maroon; */
  background-color: rgb(228, 228, 224);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 230px;
  width: 100%;
  align-items: center;
  text-decoration: underline;
}
.xxx {
  margin-left: 20px;
}
.xxx:hover {
  margin-left: 50px;
  color: orangered;
}
footer {
  background-color: rgb(12, 15, 15);
  color: white;
  border: 1px solid red;
  height: 480px;
  display: flex;
  justify-content: space-around;
}
.ftaboutus {
  line-height: 30px;
  cursor: pointer;
}
#AA:hover {
  text-decoration: dashed;
  color: orangered;
}
/*#asa{
    height: 250px;
    border: 1px solid rebeccapurple;
} */
.newsletter {
  /* border: 1px solid red; */
  height: 250px;
  width: 320px;
  margin-top: 180px;
  margin-right: 70px;
}