style.css

*{ margin: 0; 
   padding: 0;
   
 }
.header{ 
    min-height: 100vh; 
    width: 100%; 
    background-color: #66DDAA; 
    background-position: center;
    background-size: cover;
    position: relative;
}
nav{ 
    display: flex; 
    padding: 3% 5%; 
    justify-content: space-between;
     align-items: center;
     }
     
     .nav-links{ 
        flex: 1;
        text-align: center; 
    } 
    .nav-links ul li{ 
        list-style: none;
        display: inline-block;
        padding: 2px 2px;
        position: relative;
    }
    .nav-links ul li a{
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 27px;
    }
    .nav-links ul li::after{ 
        content: ''; 
        width: 0%; 
        height: 2px; 
        background: #0047AB; 
        display: block; 
        margin: auto; 
        transition: 0.5s;
    }
    .nav-links ul li:hover::after{
        width: 100%;

    }
    .text-box{
        width: 90%;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .text-box h1{
        font-size: 80px;
    }
    .text-box p{
        margin: 10px 0 40px;
        font-size: 27px;
        color: #fff;
    }
.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.727);
    background: #166FC0;
    width: 150px;
    height: 35px;
    border-radius: 10px;

    position: relative;
    cursor: pointer;
}

/*--------Welcome to juice-----*/

.Juice{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
h1{ 
    color: #1f8127;
    font-size: 40px;
    font-weight: 600;
}
.row{
    width: 300;
    margin: left;
    text-align: center;
    padding-top: 100px;

}

.Heading{
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1{ 
color: #1f8127;
font-size: 40px;
font-weight: 600;
}

/*--------Reward of Juice Fast------


.product {
    position: relative;
    overflow: hidden;
    background-color: azure;
    background-size: auto;
  }
  
  .product-category {
    padding: 0 10vw;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 40px;
    text-transform: capitalize;
  }
  
  .product-container {
    padding: 0 10vw;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  
  .product-container::-webkit-scrollbar {
    display: none;
  }
  
  .product-card {
    flex: 0 0 auto;
    width: 250px;
    height: 450px;
    margin-right: 40px;
  }
  
  .product-image {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
  }
  
  .product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  
  .product-info {
    width: 100%;
    height: 100px;
    padding-top: 10px;
  }
  
  .product-brand {
    text-transform: uppercase;
  }
  .pre-btn,
  .nxt-btn {
    border: none;
    width: 10vw;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    cursor: pointer;
    z-index: 8;
  }
  
  .pre-btn {
    left: 0;
    transform: rotate(180deg);
  }
  
  .nxt-btn {
    right: 0;
  }
  
 
  
  .pre-btn:hover img,
  .nxt-btn:hover img {
    opacity: 1;
  }
  
  .collection-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  
  .collection {
    position: relative;
  }
  
  .collection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .collection p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-size: 50px;
    text-transform: capitalize;
  }
  
  .collection:nth-child(3) {
    grid-column: span 2;
    margin-bottom: 10px;
  }------*/

 /*--------Accordion------*/ 


 .FAQ{
    color: #1f8127;
    font-size: 40px;
    font-weight: 600;
    text-align: center;

 }

  .accordion {
    width: 90%;
    max-width: 1000px;
    margin: 2rem auto;
  }
  .accordion-item {
    background-color: #fff;
    color: #111;
    margin: 1rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
  }
  .accordion-item-header {
    padding: 0.5rem 3rem 0.5rem 1rem;
    min-height: 3.5rem;
    line-height: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
  }
  .accordion-item-header::after {
    content: "\002B";
    font-size: 2rem;
    position: absolute;
    right: 1rem;
  }
  .accordion-item-header.active::after {
    content: "\2212";
  }
  .accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
  .accordion-item-body-content {
    padding: 1rem;
    line-height: 1.5rem;
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
  }

  /*.hi-slide{
    position:relative;
    width:754px;
    height:292px;
    margin:115px auto 0}
    .hi-slide .hi-next,
    .hi-slide .hi-prev{
      position:absolute;
      top:50%;
      width:40px;
      height:80px;
      margin-top:-40px;
      border-radius:5px;
      line-height:80px;
      text-align:center;
      cursor:pointer;
      background-color:#666;
      color:#fff;
      opacity:.7;
      transition:all .6s;
      font-size:30px
    }
    .hi-slide .hi-next:hover,
    .hi-slide .hi-prev:hover{
      opacity:1;
      background-color:#444
    }
    .hi-slide .hi-prev{
      left:-60px
    }
    .hi-slide .hi-prev::before{
      content:'<'}
      .hi-slide .hi-next{
        right:-60px
      }
      .hi-slide .hi-next::before{
        content:'>'
      }
      .hi-slide>ul{
        list-style:none;
        position:relative;
        width:754px;
        height:292px;
        margin:0;
        padding:0
      }
      .hi-slide>ul>li{
        overflow:hidden;
        position:absolute;
        z-index:0;
        left:377px;
        top:146px;
        width:0;
        height:0;
        margin:0;
        padding:0;
        border:2px solid #fff;
        border-radius:5px;
        background-color:#333;
        cursor:pointer
      }
      .hi-slide>ul>li>img{
        width:100%;
        height:100%}

        */

        

        .slide-container{
          width: 100%;
          height: 85vh;
          display: flex;
          align-items: center;
          overflow: hidden;
          background: linear-gradient(to right, white);
          
        }

        .image-slider{
          width: 100%;
          height: 600px;
          position: absolute;
          left: 0;
          display: flex;
          justify-content: center; 
          align-items: center; 
          transition: .7s; }

        .slide-div{
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 30px 0 30px;
        }

        .img{
          position: relative;
          width: 240px;
          height: 370px;
          transition: .5s;
          filter: saturate(10%);
        }

        .button{
          position:absolute;
          width: 240px;
          height: 370px;
          transition: .5s;
        }

        .button:hover{
          background-color: rgba(0,0,0.9);
        }

        #slider-span1:target ~ .image-slider #img1,
        #slider-span1:target ~ .image-slider #button-1{
          width: 380px;
          height: 485px;
          background-color: transparent;
          filter: saturate(100%);
        }

        #slider-span2:target ~ .image-slider #img2,
        #slider-span2:target ~ .image-slider #button-2{
          width: 380px;
          height: 485px;
          background-color: transparent;
          filter: saturate(100%);
        }

        #slider-span3:target ~ .image-slider #img3,
        #slider-span3:target ~ .image-slider #button-3{
          width: 380px;
          height: 485px;
          background-color: transparent;
          filter: saturate(100%);
        }

        #slider-span4:target ~ .image-slider #img4,
        #slider-span4:target ~ .image-slider #button-4{
          width: 380px;
          height: 485px;
          background-color: transparent;
          filter: saturate(100%);
        }

        #slider-span5:target ~ .image-slider #img5,
        #slider-span5:target ~ .image-slider #button-5{
          width: 380px;
          height:485px;
          background-color: transparent;
          filter: saturate(100%);
        }

        #slider-span6:target ~ .image-slider #img6,
        #slider-span6:target ~ .image-slider #button-6{
          width: 380px;
          height: 485px;
          background-color: transparent;
          filter: saturate(100%);
        }


        #slider-span1:target ~ .image-slider{ left: 40%;}
        #slider-span2:target ~ .image-slider{ left: 20%;}
        #slider-span3:target ~ .image-slider{ left: 15%;}
        #slider-span5:target ~ .image-slider{ left: -15%;}
        #slider-span6:target ~ .image-slider{ left: -20%;}