@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

:root {
    --red: #dc3545;
    --orange: #fd7e14;
    --green: #28a745;
    --teal: #20c997;
    --info: #17a2ba;
    --blue: #007bff;
    --primary: #ff253a;
    --background: linear-gradient(135deg, #0cc5b7 0%, #2bd891 100%);
    --background-btn: linear-gradient(135deg, #ff934b 0%, #ff5e62 100%);

}

      *
      {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        outline: none;
        border: none;
        text-decoration: none;
        text-transform: capitalize;
        transition: all .3s linear;
      }



      /* LINKS */
      a {
        text-decoration: none;
        color: inherit;
      }

      *::selection{
        background: var(--teal) ;
        color: #fff;
      }

      html{
        font-size: 62.5%;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-padding-top: 6.5rem;
      }

      html::-webkit-scrollbar{
        width: .8rem;
      }

      html::-webkit-scrollbar-track{
        background: transparent;
      }

      html::-webkit-scrollbar-thumb{
        background: var(--green);
        border-radius: 5rem;
      }

      body {
        font-family: "Poppins", sans-serif;
        background-color: #eef7fa;
        color: #888;
        line-height: 1.6;
      }

      .section{
        padding : 3rem 9%;
      }


      /* FONT UTILITY CLASSES */
      .poppins-light {
          font-family: "Poppins", sans-serif; font-weight: 300;
          }
      .poppins-regular {
          font-family: "Poppins", sans-serif; font-weight: 400; 
          }
      .poppins-semibold { 
          font-family: "Poppins", sans-serif; font-weight: 600; 
          }
      .poppins-bold {
          font-family: "Poppins", sans-serif; font-weight: 700;
          }
      .poppins-extrabold { font-family: "Poppins", sans-serif; font-weight: 800; 
          }

     

     /*---------------header section start--------*/
      .header-1 {
        background: var(--background);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 7%;
      }
      .header-1 .search-box-container{
        display: flex;
        width: 50rem;
        height: 4rem;
        background: #fff;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        font-size: 2.5rem; /* size ko yahan badhao */
        color: orange;   /* yahan color set karo */
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        line-height: 4rem;
      }
      .header-1 .search-box-container label {
        background: orange;
        color: #fff;
        font-size: 2rem;
        cursor: pointer;
      }

      .header-1 .search-box-container input#search-box{
        width: 100%;
        height: 100%;
        padding: 1rem;
        font-size: 1.5rem;
        color: #333;
        font-style: italic;
        background: none;
        text-transform: none;
        border-radius: .5rem;
        border: none;
      }
      .header-1 .search-box-contatiner label{
        width: 8rem;
        height: 100%;
        line-height: 4rem;
        text-align: center;
        background: var(--background-btn);
        color:#fff;
        font-size:1.5rem;
        cursor: pointer;
      }
      .header-1 a{
        font-size: 3rem;
        color: #0b0808;
        padding: 1.5rem;
        font-weight: bold;
        /* margin: 0 .1rem; */
        font-family: Cormorant Garamond, serif;
      }
      .header-2 {
        background: #fff;
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 7%;
        height: 5rem;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        position: relative;
      }
      .header-2 .navbar a{
        font-size: 1.5rem;
        color: #000;
        padding: 1.5rem;
        font-weight: normal;
        margin: 0 .1rem;
      }
      .header-2 .navbar a:hover{
        color: #fff;
        background: var(--background-btn);
        transition: .2s linear;
      }
      .header-2 .shop-bar .active{
        background: var(--background-btn);
        color:#fff;
      }
      .header-2 .icons a{
        font-size: 1.5rem;
        color: #888;
        padding-left: 1rem;
        font-weight: normal;
      }
      .header-2 .icons a i{
        color: var(--orange);
        margin-right: .5rem;
      }
      .header-2 .icons a:hover{
        color: var(--red);
      }
      .header-2 #menu-bar{
        font-size: 2rem;
        border-radius: .5rem;
        padding: .8rem 1.5rem;
        color: #fff;
        background: var(--orange);
        cursor: pointer;
        display:none;
      }
      
      /*-----------header section end-------------*/

      /* ----------home section starts---------- */
      .box-container{
          display: grid;
          grid-template-columns: .8fr 2.5fr;
          gap: 1.5rem;
      }
      .box-container .left-col .title{
          padding: 1.5rem;
          font-size: 2rem;
          color: #fff;
          background: var(--background-btn);
          text-transform: capitalize;
      }
      .box-container .left-col .box{
          padding: 0;
          background: #fff;
          box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
      }
      .box-container .left-col .box a{
          padding: .5rem;
          font-size: 1.3rem;
          color: #000;
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgba(0,0,0,.1);
      }
      .box-container .left-col .box a p{
          margin-left: .8rem;
      }
      .box-container .left-col .box a span{
          margin-left: 13rem;
          color: #808080;
          background:rgba(0,0,0,.1);
          padding: .5rem;
      }
      .box-container .left-col .box img{
          width: 30px;
      }
      .box-container .left-col .box a:hover{
          border-left: .3rem solid var(--green);
          background: #eff7fa;
          border-right: .1rem solid var(--green);
      }
      .box-container .left-col .box a:hover span{
          background: var(--orange);
          color:#fff;
        
      }

      .box-container .right-col img{
          width: 100%;
          height: 45rem;
      }



      /* ----------home section ends------------ */
      /*----------product section starts---------------*/
      .heading{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .heading h2{
        color:#333;
        font-weight: bold;
        font-size: 1.8rem;
        letter-spacing: 1px;
      }

      .heading h2 span{
        margin-left: .5rem;
        text-transform: uppercase;
        background: var(--red);
        color: #fff;
        font-size: 1.3rem;
        padding: .5rem 1rem;
      }
      .heading a{
        font-size: 1.7rem;
        color: var(--blue);
        font-family: sans-serif;
      }
       
      .heading a:hover{
        color: #000;
      }
       
       #eight-box .box-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-template-rows: repeat(8, auto);   /* 8 rows */
        gap: 1.5rem; /* spacing between boxes */
        margin: 3rem;
      }
      #eight-box .box-container .box{
       text-align: center;
       padding: 1.5rem;
       background: #fff;
       border-radius: .3rem;
       position: relative;
       box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
       
      }
      .product .box-container .box{
        flex: 1 1 23rem;
        text-align: center;
        padding: 1.5rem;
        background: #fff;
        border-radius: .3rem;
        position: relative;
        box-shadow: 0 2px 8px 0 rgba(0 0 0 / 6%);
      }
      /* .product .box-container .box:hover img{
        transform: scale(1.1);
        transition: .2s linear; 
      } */
      .product .box-container .box .discount{
        position: absolute;
        top: 2rem;
        left: 2rem;
        background: rgba(0, 255, 0, .1);
        color: var(--green);
        padding: .7rem 1rem;
        font-size: 1.2rem;
        /* z-index: 1000; */
        margin-top: 2rem;
      }
      .product .box-container .box h3{
        color: var(--green);
        font-size: 1.5rem;
        margin-bottom: .5rem;
        margin-top: .5rem;
      }
      .product .box-container .box p{
        font-size: 1.3rem;
        color: #808080;
        font-weight: bold;
        letter-spacing: .1rem;
      }
      .product .box-container .box p span{
        margin-right: .3rem;
      }
      .product .box-container .box .price{
        font-size: 1.5rem;
        color: #000;
        font-weight: bold;
        padding: 1rem 0;
        margin-bottom: 1rem;
      }
      .product .box-container .box .price span{
        font-size: 1.3rem;
        color: #999;
        margin-right: .5rem;
        text-decoration: line-through;
      }
      .product .box-container .box .btn{
        font-size: 1.3rem;
        padding: .5rem 1.5rem;
        background: var(--background-btn);
        color: #fff;
        font-weight: bold;
        border-radius: 5rem;
        outline: none;
        cursor: pointer;
        border: none;
      }
      .product .box-container .box .corner-box{
        position: absolute;
        top: 2rem;
        right: 1.5rem;
        width: 2.5rem;
        height: 2.5rem;
        border: .1rem solid var(--green);
        z-index: 1000;
      }
      .product .box-container .box .corner-box span{
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: .6rem;
        right: .6rem;
        border-radius: 50%;
        background: var(--green);
      }


      /*----------product section ends-----------------*/
      
     
     .container #banner{
      width: 100%;
      position: relative;
     }

     .last-product .box-container {
      flex: 1 1 20rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

     /* ------------footer section starts----------- */

     .footer{
      background: #fff;
      margin-top: 3rem;
     }

     .footer .wrapper{
      padding-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      padding-bottom: 5rem;
      border-bottom: .1rem solid rgba(0,0,0,.1);
     }

     .footer .wrapper .feature-box{
      flex: 1 1 30rem;
      display: flex;
      align-items: center;
     }
     
     .footer .wrapper .feature-box i{
      width: 7rem;
      height: 7rem;
      border: .1rem solid var(--blue);
      text-align: center;
      line-height: 7rem;
      font-size: 2rem;
      border-radius: 50%;
      color: var(--blue);
      margin-right: 1.5rem;
     }
     .footer .wrapper .feature-box .content h3{
      font-size: 1.5rem;
      color: var(--blue);
      padding-bottom: -5rem;
      font-weight: bold;
     }
     .footer .wrapper .feature-box .contentp{
      font-size: 1.3rem;
      color: #333;
      font-weight: 500;

     }







     /* ------------footer section starts----------- */


  