/* ===
  HOME
====== */

@media (min-width:320px) and (max-width:600px){

  body{
    overflow-x:hidden;
  }

  .card:nth-child(n+3) {
    display: none;   /* 3rd aur 4th card hide */
  }

  .card-title{
    font-size:18px;
    text-align: left;
  }

  .card-price{
    font-size:14px !important;
    text-align: left;
  }

  .card .btn{
    width:100px !important;
    height: 60px !important;
  }

  .visible{
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* .card .card-body span{
    display:block;
    text-align:center;
    font-size:10px;
  }*/

  /* ====================
   WHATSAPP ICON SETTING
  ======================= */

  .whatsapp-float, .scroll-float {
        width: 50px !important;
        height: 50px !important;
        right: 15px !important;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* WhatsApp Button Position */
    .whatsapp-float {
        bottom: 95px !important; /* Scroll button se upar */
    }

    /* Scroll Button Position */
    .scroll-float {
        bottom: 35px !important; /* Screen ke bottom ke qareeb */
    }

    /* Icon sizes for Mobile */
    .whatsapp-float img {
        width: 120px !important;
        height: 50px !important;
    }

    .scroll-float img {
        width: 24px !important;
        height: 24px !important;
    }
    
  /* ====================
   MOBILE NAVBAR SETTING
  ======================= */

  .navbar .container-fluid{
    text-align: left;
  }

  .navbar img{
    max-width:150px;
    height: 35px;
    right: 50%;
  }

  .navbar .navbar-toggler .navbar-toggler-icon{
    width: 20px;
  }
  
  .navbar .d-flex .btn{
    display:none !important;
  }

  #basic{
    width: 80% !important; 
  }

  /* #base{
    width: 80% !important; 
  } */

  .product-title{
    font-size:14px !important;
    text-align: left !important;
  }

  .product-item .product-details span{
    font-size: 10px !important;
    text-align: left !important;
  }

  .product-item img{
    margin-left: -2px !important;
    width: 110px !important;
  }

  .product-details{
    margin-left: 2px !important;
  }

  #toggler{
    width: 70% !important; 
  }

  /* ====================
   MOBILE CAROUSEL SETTING
  ======================= */

  .carousel .carousel-inner img{
    height: 200px;
  }

  /* ====================
   MOBILE WHATSAPP SETTING
  ======================= */

  /* .whatsapp-float img {
    width: 100px !important;  
    height: 30px !important; 
    right: -10px !important;  
  }

  .whatsapp-float {
    bottom: 80px !important;  
    background-color: none !important;  
} */

  /* ====================
   MOBILE FOOTER SETTING
  ======================= */

  footer span{
    font-size: 8px;
  }

  footer button{
    padding:4px 6px !important;
    border-width:2px !important;
  }

  footer button i,
  footer button a{
    font-size:12px !important;
    width:13px !important;
  }

  footer img.squared{
    width:75px !important;
    height:30px !important;
  }

  footer img:not(.squared){
    width:30px !important;
    height:30px !important;
  }

  footer .container-fluid{
    text-align:center;
  }

  footer .container-fluid span{
    margin:10px 0 !important;
  }

  footer .container-fluid span {
    display: block;
    padding: 10px 0px !important;
    margin-top: 20px !important; 
    font-size: 10px;
    border-top: 1px solid rgb(52, 43, 128); 
    width: 100%; 
  }

  /* ===============
   ALL PANEL MODELS
  ================== */

  .head{
    padding: 2px 10px !important;
    margin: 2px 10px !important;
    font-size: 20px !important;
  }

  #mechanism{
    max-width: 155px !important;
    max-height: 350px !important;
  }

  .main-btn 
  {
    background-color: grey !important;
    color: white !important; 
  }

  /* #contact{
    text-align: justify !important;
  } */

/* ==========
   SUB CHANGES
  ============= */

  .main-wrapper .tags{
    font-size: 12px !important;
  }

  .side-nav .side-content{ 
    font-size: 12px !important;
  }

  .main-wrapper .side-nav{
    position: static !important;
    /* left: 2px !important;
    top: 500px !important; */
    gap: 12px !important;
  }

  .main-wrapper .main-btn{
    width: 90px !important;
    height: 30px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  .main-wrapper  .side-content{
    top: 0px !important;
    border-radius: 8px !important;
  }

  .side-nav{
    flex-direction: column !important;
  }

  .side-content{
    left: 110px !important; 
  }

  .main-wrapper #changes{
    width: 150px !important;
    height: 170px !important;
  }

  .main-wrapper #changes1{
    width: 180px !important;
    height: 200px !important;
  }

  .main-wrapper #changes2{
    width: 180px !important;
    height: 210px !important;
  }

  .main-wrapper #changes3{
    width: 155px !important;
    height: 220px !important;
  }

  .main-wrapper #changes4{
    width: 160px !important;
    height: 220px !important;
  }

  .main-wrapper #changes5{
    width: 190px !important;
    height: 220px !important;
  }

  .main-wrapper #changes6{
    width: 206px !important;
    height: 230px !important;
  }

  .main-wrapper #changes7{
    width: 215px !important;
    height: 230px !important;
  }

  .main-wrapper #changes8{
    width: 225px !important;
    height: 230px !important;
  }

  .main-wrapper #changes9{
    width: 180px !important;
    height: 220px !important;
  }

  .main-wrapper #changes10{
    width: 180px !important;
    height: 230px !important;
  }

  .main-wrapper #changes11{
    width: 215px !important;
    height: 250px !important;
  }

  .main-wrapper #changes12{
    width: 225px !important;
    height: 250px !important;
  }

  .main-wrapper #changes13{
    width: 160px !important;
    height: 230px !important;
  }

  .main-wrapper .product-card{
    width: 155px !important;
    height: 235px !important;
  }

  .main-wrapper #cards1{
    width: 185px !important;
    height: 275px !important;
  }

  .main-wrapper #cards2{
    width: 185px !important;
    height: 270px !important;
  }

  .main-wrapper #cards3{
    width: 185px !important;
    height: 280px !important;
  }

  .main-wrapper #cards4{
    width: 158px !important;
    height: 285px !important;
  }

  .main-wrapper #cards5{
    width: 195px !important;
    height: 285px !important;
  }

  .main-wrapper #cards6{
    width: 184px !important;
    height: 270px !important;
  }

  .main-wrapper #cards7{
    width: 210px !important;
    height: 295px !important;
  }

  .main-wrapper #cards8{
    width: 220px !important;
    height: 295px !important;
  }

  .main-wrapper #cards9{
    width: 230px !important;
    height: 295px !important;
  }

  .main-wrapper #cards10{
    width: 213px !important;
    height: 295px !important;
  }

  .main-wrapper #cards11{
    width: 185px !important;
    height: 295px !important;
  }

  .main-wrapper #cards12{
    width: 220px !important;
    height: 320px !important;
  }

  .main-wrapper #cards13{
    width: 165px !important;
    height: 295px !important;
  }

  .main-wrapper #cards14{
    width: 185px !important;
    height: 310px !important;
  }

  .hello #heading_{
    font-size: 14px !important;
  }

  .hello #heading_1{
    font-size: 16px !important;
  }

  .main-wrapper .side-nav #first{
    width: 200px !important;
  }

  .main-wrapper .side-nav #first1{
    width: 160px !important;
  }

  .main-wrapper .side-nav #second{
    top: -40px !important;
    width: 185px !important;
  }

  .main-wrapper .side-nav #second1{
    top: -40px !important;
    width: 130px !important;
  }

  .main-wrapper .side-nav #second2{
    top: -40px !important;
    width: 180px !important;
  }

  .main-wrapper .side-nav #second3{
    top: -40px !important;
    width: 190px !important;
  }

  .main-wrapper .side-nav #second4{
    top: -40px !important;
    width: 170px !important;
  }

  .main-wrapper .side-nav #second5{
    top: -40px !important;
    width: 200px !important;
  }

  .main-wrapper .side-nav #third{
    top: -80px !important;
    width: 155px !important;
  }

  .main-wrapper .side-nav #third1{
    top: -80px !important;
    width: 160px !important;
  }

  .main-wrapper .side-nav #third2{
    top: -80px !important;
    width: 190px !important;
  }

  .main-wrapper .side-nav #third3{
    top: -80px !important;
    width: 200px !important;
  }

  .main-wrapper .side-nav #third4{
    top: -80px !important;
    width: 135px !important;
  }

  .main-wrapper .side-nav #third5{
    top: -80px !important;
    width: 170px !important;
  }

  .main-wrapper .side-nav #third6{
    top: -80px !important;
    width: 120px !important;
  }

  .main-wrapper .side-nav #fourth{
    top: -120px !important;
    width: 140px !important;
  }

  .main-wrapper .side-nav #fourth1{
    top: -120px !important;
    width: 210px !important;
  }

  .main-wrapper .side-nav #fourth2{
    top: -120px !important;
    width: 180px !important;
  }

  #first span{
    font-size: 12px !important;
  }

  #first1 span{
    font-size: 12px !important;
  }

  #second span{
    font-size: 12px !important;
  }

  #second1 span{
    font-size: 12px !important;
  }

  #second2 span{
    font-size: 12px !important;
  }

  #second3 span{
    font-size: 12px !important;
  }

  #second4 span{
    font-size: 12px !important;
  }

  #second5 span{
    font-size: 12px !important;
  }

  #third span{
    font-size: 12px !important;
  }

  #third1 span{
    font-size: 12px !important;
  }

  #third2 span{
    font-size: 12px !important;
  }

  #third3 span{
    font-size: 12px !important;
  }

  #third4 span{
    font-size: 12px !important;
  }

  #third5 span{
    font-size: 12px !important;
  }

  #third6 span{
    font-size: 12px !important;
  }

  #fourth span{
    font-size: 12px !important;
  }

  #fourth1 span{
    font-size: 12px !important;
  }

  #fourth2 span{
    font-size: 12px !important;
  }

  #arrangement_{
    margin-top: 520px !important; 
  }

  #arrangement_1{
    margin-top: 460px !important; 
  }

  #arrangement_2{
    margin-top: 120px !important; 
  }

  #arrangement_3{
    margin-top: 200px !important; 
  }

  #arrangement_4{
    margin-top: 35px !important; 
  }

  #arrangement_5{
    margin-top: 195px !important; 
  }

  #arrangement_6{
    margin-top: 170px !important; 
  }

  #arrangement_7{
    margin-top: 280px !important; 
  }

  #arrangement_8{
    margin-top: 75px !important; 
  }

  #arrangement_9{
    margin-top: 80px !important; 
  }

  #arrangement_10{
    margin-top: 45px !important; 
  }

  #arrangement_11{
    margin-top: 65px !important; 
  }

  #arrangement_12{
    margin-top: 100px !important; 
  }

  #arrangement_13{
    margin-top: 155px !important; 
  }

  #arrangement_14{
    margin-top: 105px !important; 
  }

  #arrangement_15{
    margin-top: -40px !important; 
  }

  #arrangement_16{
    margin-top: 330px !important; 
  }

  #arrangement_17{
    margin-top: 290px !important; 
  }

  #arrangement_18{
    margin-top: 250px !important; 
  }

  #arrangement_19{
    margin-top: 365px !important; 
  }

  #arrangement_20{
    margin-top: 950px !important; 
  }

  #arrangement_21{
    margin-top: 835px !important; 
  }

  #arrangement_22{
    margin-top: 1240px !important; 
  }

  #arrangement_23{
    margin-top: 1620px !important; 
  }

  #arrangement_24{
    margin-top: 175px !important; 
  }

  #arrangement_25{
    margin-top: 915px !important; 
  }

  #arrangement_26{
    margin-top: 700px !important; 
  }

  #arrangement_27{
    margin-top: 20px !important; 
  }

  #arrangement_28{
    margin-top: 800px !important; 
  }

  #arrangement_29{
    margin-top: 135px !important; 
  }

  #arrangement_30{
    margin-top: 600px !important; 
  }

  #arrangement_31{
    margin-top: 530px !important; 
  }

  #arrangement_32{
    margin-top: 425px !important; 
  }

  #arrangement_33{
    margin-top: 310px !important; 
  }

  #arrangement_34{
    margin-top: 545px !important; 
  }

  #arrangement_35{
    margin-top: 500px !important; 
  }

  #arrangement_36{
    margin-top: 220px !important; 
  }

  #arrangement_37{
    margin-top: 655px !important; 
  }

  #arrangement_38{
    margin-top: 580px !important; 
  }

  #arrangement_39{
    margin-top: 420px !important; 
  }

  #arrangement_40{
    margin-top: 140px !important; 
  }

  #arrangement_41{
    margin-top: 160px !important; 
  }

  #arrangement_42{
    margin-top: 235px !important; 
  }

  #arrangement_43{
    margin-top: 475px !important; 
  }

  #arrangement_44{
    margin-top: 210px !important; 
  }

  #arrangement_45{
    margin-top: 340px !important; 
  }

  #arrangement_46{
    margin-top: 305px !important; 
  }

  /* Mobile par glass hide kar dein */
  /* .img-magnifier-glass {
    display: none !important; 
  } */
  
  .overlay-content {
    width: 100%;
    padding: 10px;
  }

  /* Image card container fix for mobile */
  /* .product-card div[style*="width: 350px"] {
    width: 100% !important; 
    height: auto !important;
  } */
}

/* @media (min-width:601px) and (max-width:1024px){

  .card{
    width:48% !important;
    margin-bottom:20px;
  }

  .card-title{
    font-size:19px;
  }

  .card span{
    font-size:15px;
  }

} */