@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  list-style: none;
  text-decoration: none;
}
body {
  width: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  min-height: 100vh;
}

header {
  padding: 0px;
  margin: 10px;
 margin-top: 50px;
  position: fixed;
  width: 95%;
  /* background-color: #007542; */
  display: inline;
  align-items: center;
  justify-content: space-between;
}
.logo img {
  float: left;
  max-width: 100%;
  width: 70px;
  height: auto;
  border-radius: 55px;
 background-image:slateblue;
}
.nav-right {
 display: grid;
 grid-template-columns: 50% 50%;
 column-gap: 20px;
}
.nav-right input {
  margin-left: 30px;
  position: relative;
  padding: 20px 55px;
  color: #1d3557;
  font-weight: 400;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 30px;
  outline: none;
  border: 1px solid #ff5a5a;
  transition: all 0.42s;
}
.right-icon {
  margin-left: -380px;
  margin-top: 20px;
}
.right-icon i {
  position: relative;
  right: 32px;
  top: 1px;
  color: #ff5a5a;
  font-size: 20px;
}

.nav1 {
  float: right;
  margin-top: -45px;
}
.nav a {
  position: relative;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  padding: 15px 10px;
  transition: 0.5s;
}
.nav a:hover {
  color: #fd1d1d;
}
.nav a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 3px solid blue;
  border-radius: 15px;
  opacity: 0;
  transition: 0.5s;
}
.nav a:hover span {
  opacity: 1;
}
.nav-icon {
  margin-left: 700px;
  /* padding-left: 80px; */
  margin-top: -45px; 
  float: right;
  display: inline;
}
.nav-icon a {
  position: relative;
  font-size: 15px;
  /* font-family: Georgia, "Times New Roman", Times, serif; */
  color: #fff;
  text-decoration: none;
  padding: 2px 10px;
  transition: 0.5s;
}

.nav-icon a:hover {
  color: #fd1d1d;
}
.nav-icon a i {
  padding: 10px;
  font-size: 30px;
}








/* home section */
#home {
  padding: 0px;
  margin: 0px;
  margin-top: -40px;
}

.home1 {
  padding: 0px;

  width: 100%;
  height: 110vh;
  background-repeat: no-repeat;
  /* background-image: url(images/home.jpg); */
  /* background-position: center;
    background-size: cover; */
  display: grid;
  grid-template-columns: repeat(1, fr);
  align-items: center;
}
.home-text {
  margin-top: -500px;
  margin-left: 80px;
  /* background-color: rgba(0, 0, 0, 0.5); */
}
/* .home-text:hover{
    -webkit-text-stoke:2px aliceblue ;
    color:red;
    background-color: rgba(0, 0, 0, 0.5);
} */
.home-text h4 {
  color: #457b9d;
  font-size: 17px;
  font-weight: 700px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-text h1 {
  color: #1d3557;
  font-size: 65px;
  font-weight: 700px;
  line-height: 80px;
  margin-bottom: 10px;
}
.home-text p {
  max-width: 550px;
  color: #1d3557;
  font-size: 16px;
  font-weight: 500px;
  line-height: 26px;
  margin-bottom: 40px;
}
.home-btn {
  display: block;
  align-items: center;
}
.home-btn a {
  color: #1d3557;
  font-size: 26px;
  font-weight: 600px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #ff5a5a;
  border-radius: 30px;
  margin-right: 20px;
  transition: all.42s;
}
.btn:hover {
  background-color: #ff5a5a;
  color: #fff;
}
.scroll-container {
  height:auto;
  background-color: #800020;
  overflow: auto;
  white-space: nowrap;
  overflow-y: scroll;
  scrollbar-color: red slateblue;
}

.scroll-container img {
  /* padding: 5px; */
  width: 100%;
  height: 110vh;
  padding-top: 40px;
}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255,0,0,0.5);
}


/* The dots/bullets/indicators */
/* .dot {
  background: #451952;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
} */

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

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

/* middle1 */
.mid {
  /* width: 100%;
  height: 50vh;
  background: linear-gradient(to right, #c1e8ff ),#7da0ca ,#5483b3  ,#052659 ,#021024 );
  background: linear-gradient(
    to right,
    #007542,
    #1e8c45,
    #3aa346,
    #58bb43,
    #78d23d,
    #9be931,
    #c1ff1c
  ); */
  /* margin-top: -30px; */
  width: 100%;
  height: 45vh;
  animation: example 10s linear infinite;
  place-items: center;
}
@keyframes example {
  0%   {background-color: #340815;}
  20%  {background-color: #5e0813;}
  40%  {background-color: #f66159;} 
  60% {background-color: #6f2f48;}
  /* 80% {background-color: #512d49;} */
  100% {background-color: #fdb741;} 

  /* 0%   {background-color: #78d23d;}
  20%  {background-color: #1e8c45;}
  40%  {background-color: #58bb43;}
  60% {background-color: #c1ff1c;}
  80% {background-color:  #3aa346;}
  100% {background-color:   #3aa346;} */
}
.midrap {
  width: 80%;
  
}
.container {
  width: 100%;
  height: 3%;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 25px;
  padding-top: 30px;
  /* margin-left: -30px; */
}
.container a {
  text-decoration: none;
}
/* .bestseller {
  font-size: 40px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  color:#fff;
  margin-left: 190px;
  
} */
.box {
  width: 30vb;
  height: 40vh;
  /* border: 2px solid #451952; */
  border-radius: 120px;
  background-color: rgba(70, 28, 53, 0);
}
.box h1 {
  /* padding: -50px; */
  margin: 10px;
  padding: 10px;
  border-radius: 100px;
  text-align: center;
  font-family: sans-serif;
  display: block;
  font-size: 20px;
  color: #ffff;
}
.box img {
  width: 100%;
  height: 180px;
  border-radius: 100px;
  transition:  all .42s;
}
.box img:hover {
  transform: scale(1.1);
}
.box h1 a {
  color: white;
}

/* .price-tag{
    text-align: center;
    padding: 10px;
    border-top: 2px solid rgb(10, 18, 101);
    border-bottom: 2px solid rgb(18, 37, 111);
    
    padding: 10px 10px;
    border-radius: 15px;
    text-transform: none;
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.price-tag a{
    color:red;
} */

/* banner1 */
.ban111 {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.ban111 img {
  width: 100%;
  height: auto;
}

/* product section */
.pro-center {
  text-align: center;
}
.pro-center h1 {
  color: #800020;
  font-size: 45px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
}
.pro-center p {
  max-width: 530px;
  color: #1d3557;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  margin: 0px auto 60px;
}
.main-product {
  padding: 20px;
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-column-gap: 60px;
  grid-row-gap: 50px;
}
.row {
  width: 90%;
  height: auto;
  position: relative;
  transition: all.42s;
  cursor: pointer;
}
.row img {
  max-width: 90%;
  width: 100%;
  height: auto;
  border: 2px solid red;
  padding: 25px 30px 120px;
  border-radius: 60px;
}
.top-text {
  position: absolute;
  top: 10%;
  left: 12%;
}
.top-text h5 {
  display: inline-block;
  background: #ff5a5a;
  padding: 8px 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 15px;
  cursor: pointer;
}
.bottom-text {
  position: absolute;
  bottom: 10%;
  left: 9%;
}
.bottom-text {
  color: #800020;
  font-size: 22px;
  font-weight: 700;
  text-transform: capitalize;
}
.bottom-text h5 {
  color: #1d3557;
  font-size: 18px;
  margin-top: 10px;
}

.right-icon1 i {
  color: #fff;
  font-size: 30px;
  background: red;
  width: 55px;
  height: 55px;
  justify-content: center;
  display: inline;
  align-items: center;
  border: 8px solid red;
  border-radius: 50px;
  transition: all.42s;
}
.right-icon1 {
  position: absolute;
  right: 15%;
  bottom: 10%;
}

.hover-icon {
  position: absolute;
  top: 12%;
  right: 12%;
}
.row .hover-icon i {
  display: block;
  margin: 10px;
  background: red;
  padding: 12px;
  color: #fff;
  border-radius: 30px;
  transition: all.42s;
  opacity: 0;
}
.row:hover .hover-icon i {
  opacity: 1;
}
.row .hover-icon i:hover {
  background: #1d3557;
}

/* middle2 */

.midrap2 {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;

}
.midrap2 img{
  height:90vh;
  margin-top: -60px;
  padding-bottom: 150px;
}


/* section */
.section2 {
  width: 90%;
  height: 50vh;
  min-height: 100vh;
  display: grid;
  /* justify-content: space-between; */
  text-align: center;
  padding: 20px;
  margin: 10px;
  padding-left: 120px;
}
.sec1 {

  width: 90%;
  height: 76vh;
  padding: 10px;
  margin: 10px;
  margin-top: -20px;
  background: #800020;
}
/* .rap{
   margin-bottom: 20px;
} */
.sec1rap {
  max-width: 1080px;
  width: 80%;
  margin-top: -160px;
  /* padding: 1px 2px 2px 2px; */
  background: #ff5a5a;
  border-radius: 5px 70px;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.sec1rap h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 500;
}

.wrapper1 {
  position: relative;
  /* max-width: 300px; */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  row-gap: 0px;
  column-gap: 0px;
  gap: 8px;
  grid-auto-rows: 100px;
  background-size: cover;
}
/* .wrapper1 img {
  width: 100%;
  height: 50vh;
} */
.four{
  margin-top: -270px;
}
.six{
  margin-top: -270px;
  height: 30vh;
}

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

/* The overlay effect - lays on top of the container and over the image */
.overlay1 {
  position:absolute;
  top: 0px;
  background: rgb(0, 0, 0);
  background: rgba(230, 60, 30, 0.61); /* Black see-through */
  color: #f1f1f1;
  width: 29.5%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 25px;
  padding: 20px;
  text-align: center;
}
 .wrapper1:hover .overlay1{
  opacity: 1;
}
.overlay2 {
  position:absolute;
  bottom: 250px;
  background: rgb(0, 0, 0);
  background: rgba(198, 26, 81, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 29.7%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 25px;
  padding: 20px;
  text-align: center;
}
 .wrapper1:hover .overlay2{
  opacity: 1;
}
.overlay3{
  position:absolute;
  top: 0px;
  background: rgb(0, 0, 0);
  background: rgba(12, 12, 12, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 29.7%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 25px;
  padding: 20px;
  text-align: center;
}
 .wrapper1:hover .overlay3{
  opacity: 1;
}
.overlay4{
  position:absolute;
  bottom: 100px;
  background: rgb(0, 0, 0);
  background: rgba(30, 215, 55, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 29.7%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 25px;
  padding: 20px;
  text-align: center;
}
 .wrapper1:hover .overlay4{
  opacity: 1;
}
.overlay5 {
  position:absolute;
  bottom: 100px;
  background: rgb(0, 0, 0);
  background: rgba(5, 165, 240, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 29.5%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 25px;
  padding: 20px;
  text-align: center;
}
 .wrapper1:hover .overlay5{
  opacity: 1;
}

/* product2 */
.main-product1 {
  padding: 10px;
  margin: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-column-gap: 40px;
  /* grid-row-gap: 20px; */
}
.row1 {
  margin-top: -180px;
  width: 90%;
  height: auto;
  position: relative;
  transition: all.42s;
  cursor: pointer;
}
.row1 img {
  max-width: 90%;
  width: 100%;
  height: auto;
  border: 2px solid red;
  padding: 25px 30px 120px;
  border-radius: 60px;
}
.top-text1 {
  position: absolute;
  top: 10%;
  left: 12%;
}
.top-text1 h5 {
  display: inline-block;
  background: #ff5a5a;
  padding: 8px 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 15px;
  cursor: pointer;
}
.bottom-text1 {
  position: absolute;
  bottom: 10%;
  left: 9%;
}
.bottom-text1 {
  color: #800020;
  font-size: 22px;
  font-weight: 700;
  text-transform: capitalize;
}
.bottom-text1 h5 {
  color: #1d3557;
  font-size: 18px;
  margin-top: 10px;
}
/* .bottom-text1 span{
    color:#451952;
    font-size: small;
    text-decoration: overline;
} */

.right-icon2 i {
  color: #fff;
  font-size: 30px;
  background: red;
  width: 55px;
  height: 55px;
  justify-content: center;
  display: inline;
  align-items: center;
  border: 8px solid red;
  border-radius: 50px;
  transition: all.42s;
}
.right-icon2 {
  position: absolute;
  right: 15%;
  bottom: 10%;
}

.hover-icon1 {
  position: absolute;
  top: 12%;
  right: 12%;
}
.row1 .hover-icon1 i {
  display: block;
  margin: 10px;
  background: red;
  padding: 12px;
  color: #fff;
  border-radius: 30px;
  transition: all.42s;
  opacity: 0;
}
.row1:hover .hover-icon1 i {
  opacity: 1;
}
.row1 .hover-icon1 i:hover {
  background: #1d3557;
}




/* middle3 */

.mid3 {
  width: 100%;
  height: 50vh;
  /* background: linear-gradient(to right, #c1e8ff ,#7da0ca ,#5483b3  ,#052659 ,#021024 ); */
  background: linear-gradient(
    to right,
    #007542,
    #1e8c45,
    #3aa346,
    #58bb43,
    #78d23d,
    #9be931,
    #c1ff1c
  );
}
  /* width: 100%;
  height: 50vh;
  animation: example 10s linear infinite;
  place-items: center; */

/* @keyframes example {
  0%   {background-color: #340815;}
  20%  {background-color: #5e0813;}
  40%  {background-color: #f66159;} 
  60% {background-color: #6f2f48;}
  80% {background-color: #512d49;}
  100% {background-color: #fdb741;} 

  /* 0%   {background-color: #78d23d;}
  20%  {background-color: #1e8c45;}
  40%  {background-color: #58bb43;}
  60% {background-color: #c1ff1c;}
  80% {background-color:  #3aa346;}
  100% {background-color:   #3aa346;} */
 
.midrap3 {
  width: 80%;
  
}
.container3 {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 25px;
  /* padding-top: 10px; */
  /* margin-left: -30px; */
}
.container3 a {
  text-decoration: none;
}
.bestseller3 {
  font-size: 35px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  text-align: center;
  color:slateblue;
  margin-left: 250px;
}
.box3 {
  width: 30vb;
  height: 30vh;
  /* border: 2px solid #451952; */
  border-radius: 100px;
  background-color: rgba(70, 28, 53, 0);
}
.box3 h1 {
  /* margin-left: 150px; */
  margin: 10px;
  padding: 10px;

  text-align: center;
  font-family: sans-serif;
  display: block;
  font-size: 20px;
  color: #ffff;
}
.box3 img {
  width: 100%;
  height: 25vh;
  border-radius: 100px;
  transition:  all .42s;
}
.box3 img:hover {
  transform: scale(1.1);
}
.box3 h1 a {
  color: white;
}

/* grid pattern */
.grid {
  width: 100%;
  height: auto;
  /* background: linear-gradient(to right,#9d4edd,#7b2cbf,#5a189a,#3c096c,#240046); */
  background: linear-gradient(
    to right,
    #9ccc65,
    #8bc34a,
    #7cb342,
    #689f38,
    #558b2f,
    #33691e
  );
}
.gridrap {
  padding: 5px;
  margin: 5px;
  width: 70%;
  height: 100vh;
  display: grid;
  grid-template-columns: 49% 50%;
  grid-column-gap: 250px;
  grid-row-gap: 0px;
  /* grid-row-gap: 10px; */
  margin-top: -30px;
  

}
.gridrap img{
  border-radius: 20px;
  border: 7px solid green;
}
.g-box {
  
  display: grid;
  grid-template-columns: 47% 48%;
  
  row-gap: 0px;
  column-gap: 80px;
}
.g-box img {
  padding: 1px;
  margin: 1px;
  border-radius: 20px;
  
}

/* banner2 */
.ban2 {
  padding-bottom: 150px;
}
.ban2 img{
  height: 30vh;

}
/* sectiion2 */
.section3 {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  justify-content: space-between;
  align-items: center;
}
.sec2 {
  width: 100%;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}
.sec2rap {
  max-width: 1080px;
  width: 80%;
  /* padding: 30px 20px 25px 20px; */
  margin-top: -120px;
  padding: 30px 20px 25px 80px;
  padding-bottom: 5px;
  padding-top: 2px;
  background: #7cb342;
  border-radius: 75px 5px;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  /* bottom: -42px; */
}
.sec2rap h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 500;
}

.home-btn1 {
  display: block;
  align-items: center;
}
.home-btn1 a {
  color: #1d3557;
  font-size: 20px;
  font-weight: 300px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn1 {
  display: inline-block;
  padding: 5px 20px;
  border: 2px solid #ff5a5a;
  border-radius: 30px;
  margin-right: 20px;
  transition: all.42s;
}
.btn1:hover {
  background-color: #ff5a5a;
  color: #fff;
}

/* last banner */
.lastban img {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

/* footer */
.foot {
  background-color: #800020;
  padding: 60px 0px;
}
/* .footrap{
    padding: 10px;
    margin: auto;
    
}  */
.row102 {
  width: auto;
  padding: 20px;
  box-sizing: border-box;
  /* margin: 30px; */
  /* margin-left: -80px; */
  display: grid;
  grid-template-columns: 20% 13% 20% 13% 16%;
  grid-column-gap: 70px;
  grid-row-gap: 10px;
}
.row102 img {
  width: 100%;
  height: 30vh;
  border-radius: 50%;
}

.container2 {
  max-width: 1170px;
  margin: 20px;
}
ul {
  list-style: none;
}
.footer-col {
  width: 40%;
  padding: 10px 15px;
}
.footer-col h4 {
  font-size: 18px;
  color: #ffff;
  text-transform: capitalize;
  margin-bottom: 30px;
  position: relative;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul li a {
  font-size: 16px;
  text-transform: capitalize;
  color: #ffff;
  text-decoration: none;
  display: block;
  font-weight: 300;
  transition: all 0.3s;
}
.footer-col ul li a:hover {
  padding-left: 8px;
  color: #ffff;
}
.footer-col .social-links a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0, 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffff;
}
.footer-map iframe {
  border-radius: 20%;
}