@media screen and (max-width : 480px){

  .swiper {
    width: 100%;
  }


  .nav-bar{
    margin:0 2%;
    padding:3px 2px;
  }

  #landing-page nav .header-logo{
    font-size:2.3rem;
    margin:1% 3%;
  }

  #landing-page nav .menu{
    padding:3px;
  }

  #landing-page nav .menu a{
    display: none;
  }

  #search-icon{
    display: block;
  }

  #search-icon:hover{
    cursor: pointer;
  }

  .icon-style{
       margin-left:20px;
       margin-right: 2px;
       font-size:28px;
    }

  .search-form{
        border-radius: 10px;
        display: none;
        position: absolute;
        top:120%;
        right: -100%;
    }
    .search-form-active{
          border-radius: 10px;
          display: block;
          position: absolute;
          top:120%;
          right: 0%;
      }

      .cart-count{
         width:20px;
         font-size:12px;
         top:5px;
         right:0px;
      }

      .search-form input{
        padding: 8px 5px;
        margin:auto 7px;
      }

      .header-carosol{
        width:100%;
        height:40vh;
      }

      .carosol-img{
        width:100%;
        height:100%;
        opacity: 0.6;
        object-fit: fill;
      }

      .custom-caption{
          top:25%;
          left:45%;
          transform: translateX(-45%);
          padding:3px;
          width: 90%;
        }

        .custom-caption h1{
          font-size:2.2rem;
          margin: 3% auto;
        }

        .custom-caption h3{
          font-size:1.8rem;
          margin: 7% auto;
          letter-spacing: 2px;

        }

        .img-indicator{
          position: absolute;
          height:9px;
          width:9px;
          bottom:7%;
          border-radius: 50%;
          background-color: var(--whiteColor);
        }

        .img-indicator{
          height:10px;
          width:10px;
          bottom:7%;
        }

        #ind-one{
          left:45%;
        }

        #ind-two{
          left:50%;
        }

        #ind-three{
          left:55%;
        }

        .left-arrow,.right-arrow{
          font-size:48px;
        }
        .left-arrow{
          left:1%;
        }
        .right-arrow{
          right:1%;
        }
    .cat-container{
        padding:1px 0px;
     }

     #item-section{
       margin:5%;
     }

     .items-container{
       display: grid;
       grid-template-columns: repeat(auto);
       position: relative;
       margin:10% auto;
     }

     .card-style{
        margin:2% auto 5%;
        padding:15px 8px;
        width: 330px;
     }

     .item-heading{
       font-size:2.2rem;
     }

     .section-heading{
       font-size:2.2rem;
       margin-bottom: 5%;
     }

     .cd-title{
       font-size: 1.5rem;
     }

     .cd-text{
       font-size: 1.3rem;
     }

     .btn-cart{
       padding:10px;
       font-size:1rem;
     }

     .footer-section{
       padding:3px;
     }

     .footer-txt{
       font-size: 1.1rem;
       letter-spacing: 1px;
     }

     .footer-link{
       font-size:1.2rem;
       letter-spacing: 1.2px;
     }

     .item-next-arrow{
       display: none;
     }

     #experience-section,#locate-us{
       margin: 3% auto 5%;
       padding: 2px;
     }

     .exp-header{
       font-size:2rem;
       margin-bottom:3%;
       text-align: center;
     }

     .exp-txt{
       font-size:1.2rem;
       text-indent: 2rem;
       margin-top:5%;
     }

     .locate-header{
       font-size:1.7rem;
       margin-bottom:2%;
     }

     .locate-txt{
       font-size:1.3rem;
     }

     #contact-us{
        margin: 5% auto 8%;
     }

     #experience-section img,#locate-us .map-img{
       width:85%;
       margin:3% 7%;
       box-shadow: 1px 1px 10px 1px grey;
     }

     #locate-us .shop-address{
       margin-top:5%;
       margin-left:7%;
     }

     #experience-section .exp-data{
       margin-top: 5%;
       padding:2px 20px;
     }


     .mail-icon{
       font-size:1rem;
       margin-right: 3px;
     }

     .mail-link{
       font-size:1.1rem;
       letter-spacing: 0.4px;
     }


}