/* ----- WebPage Settings ---------*/
/*bordergray not used in webpage settings module*/

.icon-container {
  position: relative;
  display: inline-block;
  width: 100px; /* adjust as needed */
  height: 100px; /* adjust as needed */
}
.icon-image {
  width: 100%;
  height: 100%;
  display: block;
}
.icon-text {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  white-space: nowrap; /* ensures text stays on one line */
  overflow: hidden;
  text-align: center;
  padding: 5px;
  font-size: 14px; /* adjust as needed */
  font-weight: 600;
  /* text-overflow: ellipsis;  optional: adds "..." if text is too long */
}



.imgStyleSettings {
    width: 100px;
    height: 100px;
}
.imgSz{
  height: 180px !important;
}
.imgSzRow{
  height: 150px !important;
}
  .bordergray{
    border-radius: 10px;
    border: 3px solid #636262;
  }
  .radioImg{
      height:100%;
      width: 100%;
      cursor: pointer;
      transition: transform 1s;
      object-fit: contain;
  }
  .radioText{
    color:#000000;
    width: 100%;
    cursor: pointer;
    transition: transform 1s;
    object-fit: contain;
  }
  .radioLabel{ 
      overflow: hidden;
      position: relative;
  }
  .imgbgchk:checked + label>.tick_container{
      opacity: 1;
  }
  /* ANIMATION */
  .imgbgchk:checked + label>img{
      opacity: 0.7;
  }
  .imgbgchk:checked + label>div>img{
      opacity: 0.7;
  }
  .tick_container {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      cursor: pointer;
      text-align: center;
  }
  .tick {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 12px 12px;
      height: 40px;
      width: 40px;
      border-radius: 100%;
  }
  .black-color{
      background-color:#000000;
      color:#000000;
  }
  .dark-grey-color{
      background-color:#5b5b5b;
      color:#5b5b5b;
  }

/*--------------- Website Cards Customization ---------------*/
  .underline{
      width: fit-content;
      border-bottom: 4px solid #FD8F5F;
  }
  /*---- Text and button allignment ----*/
  .leftalign, .leftalign .ratings, .leftalign .buttons{
      text-align: left;
      justify-content: flex-start;
  }
  .centeralign, .centeralign .ratings, .centeralign .buttons{
      text-align: center ;
      justify-content: center ;
  }
.ratings{
  padding-left:15px;
  padding-left:50px;
    padding-right:15px;
}
.cardTitlePadding
{
  /* padding-left:15px;
  padding-right:15px; */
  padding-left:5px;
  padding-right:5px;
}
  /* ---- Buttons ----*/
  .button-square2{
      color: white;
      background: #FD8F5F;
      border: 2px solid #FD8F5F;
      padding: 6px 6px;
      margin-top: 5px;
  }
  .button-square2:hover{
      color: #FD8F5F;
      background-color: white;
      text-decoration: none;
  }
  .button-square3{
      color: white;
      background: #FD8F5F;
      padding: 8px 16px;
      margin-top: 5px; 
  }
  .button-square3:hover{
      color: white;
      background-color: #ff7439;
      text-decoration: none;
  }
  .button-square4{
      color: white;
      background: rgb(17, 17, 17);
      padding: 6px 14px;
      margin-top: 5px; 
      border-radius: 3px;
  }
  .button-square4:hover{
      color: white;
      background-color: rgb(43, 42, 42);
      text-decoration: none; 
  }
  .button-square{
    color: white;
    padding: 6px 14px;
    margin-top: 5px; 
    border-radius: 3px;
}
.button-square:hover{
    color: white;
    text-decoration: none; 
}
  /*----Cards----*/
  .nobordercard{
      border:none !important;
      /*width:235px;
      min-height:370px;*/
  }     
  .nobordercard img{
      /*padding: 2px;       */
  }   
  .graybordercard{
      border: 1px solid rgba(0,0,0,.125);
  }
  .orangebordercard{
      border:2px solid #FD8F5F;
     /* width: 235px;
      min-height:370px;*/
  }
  .orangebordercard img{
      /*padding: 2px;       */
  }
  .graybgcard{
      /*width: 235px;
      min-height:370px;*/
      background-color: #F8F9FA;
  }
  .graybgcard img{
      /*padding: 2px;       */
  }


/*-----------------Image Aspect Ratio----------------*/
  .imgContainer1by1 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 1/1; 
    background: #dee2e6;

  }
  .imgContainer3by2 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 3/2; 
    background: #dee2e6;

  }
  .imgContainer4by3 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 4/3; 
    background: #dee2e6;

  }
  .imgContainer5by4 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 5/4; 
    background: #dee2e6;

  }
  .imgContainer9by14 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 9/14; 
    background: #dee2e6;

  }.imgContainer10by13 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 10/13; 
    background: #dee2e6;

  }
  .imgContainer16by9 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 16/9; 
    background: #dee2e6;

  }
  .imgContainer9by16 {
    display: block;
    position: relative;
    display: block;
    width: 100%;
    /*padding-bottom: 56.2%;*/
    aspect-ratio: 9/16; 
    background: #dee2e6;

  }
  .image {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
  }


/*--------------- TOP NAV BAR ---------------*/

  #logo {
    height: 35px;
    width: 110px;
  }
  #header .fixed-top{
      box-shadow: 0 0.125rem rgb(0 0 0 / 5%);
  }

  #header .navbar-nav .nav-item .nav-link{
      color: black;
      padding: 0.5rem 1rem;
      text-align: center;
      font-size: 1.15rem;
      font-weight: 400;
  }

  .navtext{
      /* padding-left: 10rem;     */
      display: flex;
	  color: black;
      justify-content: center;
      text-align: center;
  }

  .navhov {
    display: block;
    position: relative;
    padding: 0.2em 0;
  }

  .navhov::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: rgb(0, 0, 141);
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
  }
  
  .navhov:hover::after,
  .navhov:focus::after {
    opacity: 1;
    color: rgb(0, 0, 141);
    transform: translate3d(0, 0.0em, 0);
  }
  
  .l1Text{
  color:#ffffff !important;
  font-size:  20px; /* 22px; */
}
.l1TextBlack{
  color:#000000 !important;
  font-size:  16px; /* 22px; */
padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.l2TextBlack{
  color:#000000 !important;
  font-size:  20px; /* 22px; */
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.navBasketText{
  color:#000000 !important;
  font-size: 16px;
/* color:#ffffff !important;*/
}

  .menu-scroll-bar{
    min-height: 50px !important; 
    max-height: 500px !important; 
    overflow-y: scroll !important;
  }

  .dropdown_menu li {
    position: relative;
  }
  .dropdown_menu .dropdown_submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
  }
  .dropdown_menu > li:hover > .dropdown_submenu {
     display: block;
  }
  .card-text-height{
    min-height: 16px;
  }
  .card-text{
    padding-left:15px;
    padding-right:15px;
  }
  .card-textSettings{
    font-size: 0.6rem;
    color: rgb(90, 88, 88);
      padding-left:5px;
    /* padding-right:15px; */
  }
  #main-image{
    aspect-ratio: 4/3;
  }
  .quantityLabel{
    margin-right: 44px;
  }
  #quantitySelect{
    width: 200px;
    padding: 7px;
    background-color: #e3e3fa;
    border-color: white;
  }
  #echoColours{
    width: 200px;
    padding: 7px;
    background-color: #e3e3fa;
    border-color: white;
  }
  #sizeList{
    width: 200px;
    padding: 7px;
    background-color: #e3e3fa;
    border-color: white;
  }
  .select_width{
    /* width: 200px; */
    padding: 7px ;
    background-color: #e3e3fa;
    border-color: white;
  }
  .totalReviews {
    display: grid;
    grid-template-columns: 80px 110px 50px; /* Fixed width for 1st column */
    align-items: center;
    gap: 10px;
  }
  #product_details{
    font-weight: 500;
    font-size: 1.1rem;
  }
  .invo_btn{
    background-color: #e3e3fa ;
    color: black;
    border:  #b7b7f3;
    font-weight: normal ;
  }
  .invo_btn:focus {
    background: #f9f9fe ;
    box-shadow: none;
    color: black;
  }
  .invo_btn:active{
    background: #f9f9fe!important;
    box-shadow: none;
    color: black;
  }
  .invo_btn:hover{
    background: #f9f9fe!important;
    box-shadow: none;
    color: black;
  }
  .addQuantity{
    font-size: 1.3rem;
    font-weight: 900;
  }
  .addQuantity:active {
    box-shadow: inset 0 0 10px #b7b7f3; /* Green glow inset */
    background-color: #e3e3fa; /* Soft green background */
  }
  .addQuantity:hover {
    box-shadow: inset 0 0 20px #e3e3fa; /* Gentle hover effect */
    cursor:pointer;
  }
  .reduceQuantity{
    padding:0px !important;
    font-size: 2.0rem;
    font-weight: 900;
  }
   .reduceQuantity:active {
    box-shadow: inset 0 0 10px #b7b7f3; /* Green glow inset */
    background-color: #e3e3fa; /* Soft green background */
  }
  .reduceQuantity:hover {
    box-shadow: inset 0 0 20px #e3e3fa; /* Gentle hover effect */
    cursor:pointer;
  }
   .deleteQuantityItem:active {
    box-shadow: inset 0 0 10px #b7b7f3; /* Green glow inset */
    background-color: #e3e3fa; /* Soft green background */
  }
  .deleteQuantityItem:hover {
    box-shadow: inset 0 0 20px #e3e3fa; /* Gentle hover effect */
    cursor:pointer;
  }
  #paypal-button-container{
    margin-left: 170px;
  }
  .card_header_onlineShop
  {
    padding-top: 6px;
    align-content: center;
    background:#e3e3fa ;
    color:black ;
    max-height: 47px!important;
    min-height: 47px!important;
    height: 47px!important;
  }
  .frozen-topmax{
    /* display: block; */
    width: 100%;
    max-height: 80vH;
    overflow: auto;
  
  }
  .frozen-topmax th{
    position: sticky;
    top: 0px;
    background: #e3e3fa !important;
  }
  #shopBasketPage{
    overflow-x: hidden;
  }
  .shopBasketButton {
    padding-left: 25px;
    padding-right: 25px;
    height: 25px;
    max-height: 25px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-weight: bold !important;
}
.input-group-text {
  color: #495057;
  background-color: #e3e3fa;
  border: 1px solid #b7b7f3;
  width: 137px !important;
}
.error{
	color:#E57373;
}
.form-check-label {
  font-size: 18px;
}
.form-check-input {
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    accent-color: #7273d8;
}
.form-check-inline .form-check-input {
  position: static;
  margin-top: -3.4rem;
  margin-right: 0.3125rem;
  margin-left: 0;
}
.hrefMouseHove{
  cursor: pointer;
}

.paddingArrowBtns{
  margin-left:-10px;
  margin-right:-10px;
}
.zoomed_result_margin{
  margin-left:139px;
  margin-bottom:10px;
  margin-top:-30px;
}
.searchBar{
  min-width: 200px !important;
  border:2px solid black;
  border-right:1px solid black;
  border-radius: 16px;
}
.btnSearch{
  margin-left : 10px;
  color:white;
  border-radius: 16px;
  /* background-color: #9a9afb; */
}
.categoriesListArr{
  width:150px;
  border:2px solid black;
  border-left:1px solid black;
  border-radius: 16px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
/* Main Image */
/* Container needed to position the button. Adjust the width as needed */
.containerImage {
  position: relative;
  width: 100%;  
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Make the image responsive */
.containerImage img {
  width: 100%;
  height: 650px;
  opacity: 0.2;	
}
/* LEFT SIDE TEXT ON IMAGE */
 .leftBtnShopNow {
  position: absolute;
  bottom: 0%;
  left:10%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
   background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 40px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
  margin-top: inherit;
}
.containerImage .leftSecondBtnShopNow {
  position: absolute;
  top: 61%;
  left: 19%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.leftBottomTagLineText{
  position: absolute;
  top: 50%;
  left: 52%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black;
  font-size: 24px;
  padding: 6px 24px;
  width: 100%;	
}
.leftTopTagLineText{
  position: absolute;
  top: 30%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black;
  font-size: 32px;
  padding: 6px 24px;
  width: 100%;
}
@media (max-width: 991px) {
  .leftTopTagLineText{
    position: absolute;
    top: 42%;
    left: 60%; 
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: black;
    font-size: 32px;
    padding: 6px 24px;
    width: 100%;
  }
  .leftBottomTagLineText{
    position: absolute;
    top: 50%;
    left: 65%; 
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: black;
    font-size: 24px;
    padding: 6px 24px;
    width: 100%;	
  }
}
/*END LEFT SIDE TEXT ON IMAGE */

/*START RIGHT SIDE TEXT ON IMAGE */
.containerImage .rightBtnShopNow {
  position: absolute;
  /* top: 55%; */
  bottom:0%;
  right: -3%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-weight: 600;
  font-size: 16px;
  padding: 6px 40px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
  margin-top: inherit;
}
.containerImage .rightSecondBtnShopNow {
  position: absolute;
  top: 61%;
  right: 1%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.rightBottomTagLineText{
  position: absolute;
  top: 50%;
  right: 0%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  padding: 6px 0px;
  float : right;
  text-align: right;
}
.rightTopTagLineText{
  position: absolute;
  top: 30%;
  right: 0%; 
  -ms-transform: translate(-65%, -50%);
  transform: translate(-65%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 0px;
}
/*END RIGHT SIDE TEXT ON IMAGE */

/*START TOP SIDE TEXT ON IMAGE */
.containerImage .topBtnShopNow {
  position: absolute;
  bottom: 0%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.containerImage .topSecondBtnShopNow {
  position: absolute;
  top: 97%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.topBottomTagLineText{
  position: absolute;
  bottom: 12%;
  left: 51%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  padding: 6px 24px;
}
.topTopTagLineText{
  position: absolute;
  bottom: 20%;
  left: 49%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 24px;
}
/*END TOP SIDE TEXT ON IMAGE */

/*START BOTTOM SIDE TEXT ON IMAGE */
.containerImage .bottomBtnShopNow {
  position: absolute;
  top: 50%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.containerImage .bottomSecondBtnShopNow {
  position: absolute;
  top: 35%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.bottomBottomTagLineText{
  position: absolute;
  top: 25%;
  left: 51%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  padding: 6px 24px;
}
.bottomTopTagLineText{
  position: absolute;
  top: 8%;
  left: 49%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 24px;
}
/*END BOTTOM SIDE TEXT ON IMAGE */

/*START CENTRE SIDE TEXT ON IMAGE */
.centreBtnShopNow {
  position: absolute;
  Bottom:0%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
  margin-top: inherit;
}
.centreSecondBtnShopNow {
  position: absolute;
  top: 90%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.centreBottomTagLineText{
  position: absolute;
  top: 55%;
  left: 51%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  padding: 6px 24px;
}
.centreTopTagLineText{
  position: absolute;
  top: 30%;
  left: 49%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 24px;
}
/*END CENTRE SIDE TEXT ON IMAGE */
/* #headerPart{
  position: relative;
  top: 300px;
  z-index: 1;
} */
.topRowNavSaleRounded{
  background-color: #d1b392; /*  #be9364;   #b9b6ac;*/
  font-size: 1.15rem;
  color:white;
  justify-content: center;
  text-align: center;
  padding:10px 20px;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
}
.topRowNavSale{
  background-color: #13c110;
  color:white;
  justify-content: center;
  text-align: center;
  padding:8px 20px;
}
.iconBelowTopImage{
  max-height: 100px;
  height: 100px;
  min-height: 100px;
  width : 100px;
}

/* 2 large square imgs + button + text+opacity ontop of the img  */

.bannerContainerImage {
  position: relative;
  width: 60%;
  margin-left: 20px;
  /* margin-right: 20px; */
}
.bannerContainerImage img {
  width: 100%;
  height: 400px;
  opacity: 0.5;
}
/* LEFT SIDE TEXT ON IMAGE */
.bannerContainerImage .bannerLargeImgOpacityBannersBtnShopNow {
  position: absolute;
  top: 80%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ebe7e3; /*#ebe7e3;  #F6F6F4;*/
  color: black;
  font-size: 20px;
  padding: 6px 50px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.bannerContainerImage .leftSecondBtnShopNow {
  position: absolute;
  top: 61%;
  left: 19%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.bannerLargeImgOpacityBannersBottomTagLineText{
  position: absolute;
  top: 50%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black;
  font-size: 20px;
  padding: 6px 24px;
}
.bannerLargeImgOpacityBannersTopTagLineText{
  position: absolute;
  top: 25%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black;
  font-size: 40px;
  padding: 6px 15px;
}
/* .rightCirclebannerLargeImgOpacityBannersBottomTagLineText{
  position: absolute;
  top: 50%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black;
  font-size: 20px;
  padding: 6px 24px;
} */

.circleBottomRight{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100px;
  height:100px;
  position: absolute;
  top: 86%;
  left: 88%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffe100;
  font-size: 16px;
  border-radius: 50%;
  border: 2px solid #ff0000;
  text-align: center;
  background-color: red;
}
.squareTopRight{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100px;
  height:100px;
  position: absolute;
  top: 16%;
  left: 88%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffe100;
  font-size: 16px;
  border: 2px solid #ff0000;
  text-align: center;
  background-color: red;
}
.squareBottomRight{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100px;
  height:100px;
  position: absolute;
  top: 86%;
  left: 88%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffe100;
  font-size: 16px;
  border: 2px solid #ff0000;
  text-align: center;
  background-color: red;
}
.circleLeft{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:110px;
  height:110px;
  position: absolute;
  top: 16%;
  left: 13%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #000000;
  font-size: 20px;
  border-radius: 50%;
  border: 1px solid #817f78;
  text-align: center;
  background-color: #ebe7e3; /* #949189;*/
}
.circleRight{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:110px;
  height:110px;
  position: absolute;
  top: 16%;
  left: 60%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #000000;
  font-size: 20px;
  border-radius: 50%;
  border: 1px solid #817f78;
  text-align: center;
  background-color: #ebe7e3;
}
.circleBottomLeft{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100px;
  height:100px;
  position: absolute;
  top: 86%;
  left: 12%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffe100;
  font-size: 16px;
  border-radius: 50%;
  border: 2px solid #ff0000;
  text-align: center;
  background-color: red;
}
.squareTopLeft{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100px;
  height:100px;
  position: absolute;
  top: 16%;
  left: 12%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffe100;
  font-size: 16px;
  border: 2px solid #ff0000;
  text-align: center;
  background-color: red;
}
.squareBottomLeft{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100px;
  height:100px;
  position: absolute;
  top: 86%;
  left: 12%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffe100;
  font-size: 16px;
  border: 2px solid #ff0000;
  text-align: center;
  background-color: red;
}
.bannerLargeImgOpacityBanners{
  width:360px;
  height: 300px;
  margin:7px 7px;
}
.bannerLargeImgOpacityBannersText{
  position: absolute;
  color: white;
  font-size: 20px;
  padding: 6px 24px;
  width:360px;
  top: 33.5%;
  left: 50%;
}
.bannerLargeImgOpacityBannersImage{
  position: relative;
  width:360px;
  height: 200px;
  /* top: 33.5%; */
}

/* Banner Simple  */
.bannerSimple{
  width:300px;
  height: 300px;
  margin:7px 7px;
}
.bannerSimpleBGColor1{
  background: #ac4dff;
}
.bannerSimpleBGColor2{
  background: #ff385d;
}
.bannerSimpleBGColor3{
  background: #5d04ac;
}
.bannerSimpleHeadingText{
  position: relative;
  color: white;
  font-size: 32px;
  padding: 6px 24px;
}
.bannerSimpleText{
  position: relative;
  color: white;
  font-size: 20px;
  padding: 6px 24px;
}

.rightArrow{
  font-size: 1.5em;
  position:relative;
  float: right;
  margin-right:7px;
  bottom: 5%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color:#fbfbf8;
  
}
/* Occasional square banners full row  */
.bannerOccasionalSquareBanners{
  width:360px;
  height: 180px;
  margin:20px 7px;
  background: #f6f1ee;
}
.bannerOccasionalSquareBannersText{
  position: absolute;
  text-align: center;
  color: black;
  font-size: 20px;
  padding: 20px 30px;
  width:360px;
}
.bannerOccasionalSquareBannersImage{
  position: relative;
  width:360px;
  height: 200px;
  top: 33.5%;
}

/*   full row img + article for blogs/articles  */
.bannerArticles{
  width:600px;
  height: 150px;
  margin:7px 7px 20px 7px;
/*  background: #f3f5f7;*/
  background: #f7f6f5
;
}
.bannerArticlesImage{
  width:230px;
  height: 150px;
  max-height: 150px;
  min-height: 150px;
}
.bannerArticlesHeading{
  margin-left:10px;
  font-size: 24px;
}
.bannerArticlesText{
  margin-left:10px;
  font-size: 16px;
}
@media (max-width: 991px) {
  .mobileClass{
    display: block !important;
  }
  .bannerArticlesLarge{
    width: auto !important;
  }
}
/*   full row img + article for blogs/articles  twice the img size*/
.bannerArticlesLarge{
  width:600px;
  height: 350px;
  margin:7px 7px 25px 7px;
 /*  background: #f3f5f7;  #eeebe0;*/
  background: #f0f6fb; 
  
}
  
.bannerArticlesImageLarge{
  width:280px;
  height: 350px;
  max-height: 350px;
  min-height: 350px;
}

.bannerArticlesHeadingLarge{
  margin-left:10px;
  font-size: 24px;
}
.bannerArticlesTextLarge{
  margin-left:10px;
  font-size: 16px;
}

/*  full row img + text eg clothes, shoes to lead to clothes page and act as menu  */
.bannerMenu{
  width:280px;
  height: 300px;
  margin:7px 7px;
  background: #807887;   
 /* background: #f1efe6; */
}
.bannerMenuPaleBackground{
  width:280px;
  height: 200px;
  margin:7px 7px;
  background: #ffffff;
}
.bannerMenuTextPaleBackground{
  position: absolute;
  color: black;
  text-align: center;
  font-size: 26px;
  padding: 6px 24px;
  width:280px;
}
.bannerMenuText{
  position: absolute;
  color: white;
  font-size: 20px;
  padding: 6px 24px;
  width:280px;
}
.bannerMenuImage{
  position: relative;
  width:280px;
  height: 200px;
}
/* Banner img only */
.bannerImgOnly{
  width:280px;
  height: 300px;
  margin:7px 7px;
}
.bannerImgOnlyImage{
  position: relative;
  width:280px;
  height: 200px;
}
.bannerImgOnlyText{
  position: absolute;
  color: black;
  font-size: 26px;
  padding: 16px 24px;
  width:280px;
}
/* Banner img only */
.bannerRounded{
  width:280px;
  height: 300px;
  margin:7px 7px;
}
.bannerRoundedImage{
  position: relative;
  width:200px;
  height: 200px;
  border-radius: 50%; /* this means rounds */
}
.bannerRoundedText{
  position: absolute;
  color: black;
  font-size: 20px;
  padding: 6px 5px;
  width:200px;
  text-align:center;
}
.centerText100 {
  position :relative;
  top: 42.5%;
}

/* Main banner */
.bannerMain{
  height: 150px;
  padding:10px 24px;
  margin-bottom:10px;
}
.bannerMainHeading{
 font-size: 34px;
 text-transform: uppercase;
 text-align: center;
 margin-bottom:0;
 font-weight: 600;
}
.bannerMainText{
  font-size: 22px;
  white-space: pre-line;
  /* max-width :900px; */
  text-align: center;
  font-weight: 600;
}
.bannerMainTextCenter{
  position :relative;
  top: 12.5%;
}

/* ****************** */
/* .sideImageWithBackground {
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("../img/cap1.jpg");
  background-position: right center;
  grid-row: 2; 
  grid-column: 2; 
  background-color: red;
}
article {
  display: grid; 
  grid-template: 1fr 200px 1fr / 1fr 300px 1fr; 
  background: #30353b; 
  height: 100vh;
} */

/* ****************** */
.imgHeight50{
  height: 125px !important;
}
.noImgHeight50{
  height: 125px !important;
}
.imgHeight100{
  height: 200px !important;
}
.noImgHeight100{
  height: 200px !important;
}
/* Banner background red with img at right side with text over the red background */
.bannerRedBackgroundSideImage10000 {
  position: relative;
  width: 100%;
  margin-left: 20px;
  margin-right: 5px;	
  height: 258px;
  background-color: #ff385d; /* rgb(255, 0, 0); */
  background-size: contain;
  background-size: 20% 50%;
  background-repeat: no-repeat;
  background-image: url("../img/perfume7.png");
  background-position: right center;
  /* opacity: 0.3;
   background-color: rgba(255, 0, 0, 0.5); */
  /* background-color:transparent;  removes the red bg */
}
.bannerRedBackgroundSideImage100 {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  background-size: cover; /* fills the container */
  background-repeat: no-repeat;
  background-position: center center;
}

.bannerRedBackgroundSideImage {
  position: relative;
  width: 450px;
  margin-left: 20px;
  margin-right: 5px;	
  height: 258px;
  background-color: #ff385d; /* rgb(255, 0, 0); */
  background-size: contain;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("../img/perfume7.png");
  background-position: right center;
  /* opacity: 0.3;
   background-color: rgba(255, 0, 0, 0.5); */
  /* background-color:transparent;  removes the red bg */
}
.bannerRedBackgroundSideWithoutImage {
  position: relative;
  width: 450px;
  margin-left: 20px;
  margin-right: 5px;	
  height: 258px;
  background-color: #ff385d; /* rgb(255, 0, 0); */
  background-size: contain;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: right center;
  /* opacity: 0.3;
   background-color: rgba(255, 0, 0, 0.5); */
  /* background-color:transparent;  removes the red bg */
}
.bannerRedBackgroundSideImage2 {
  position: relative;
  width: 450px;
  margin-left: 20px;
  height: 258px;
  background-color: #ac4dff; 
  background-size: contain;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("../img/cap112.png");
  background-position: right center;

}
.bannerRedBackgroundSideImage3a {
  position: relative;
  width: 450px;
  margin-left: 20px;
  height: 125px;
  background-color: #ac4dff;
  background-size: contain;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("../img/cap114.png");
  background-position: right center;

}
.bannerRedBackgroundSideImage3 {
  position: relative;
  width: 450px;
  margin-left: 20px;
  height: 125px;
  background-color: #5d04ac;
  background-size: contain;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("../img/cap114.png");
  background-position: right center;

}
 .bannerRedBackgroundSideImageBtnShopNowMain {
  position: absolute;
  top: 80%;
  left: 21%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #5d04ac;
  color: black;
  font-size: 16px;
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.bannerRedBackgroundSideImageBtnShopNow {
  position: absolute;
  top: 80%;
  left: 21%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.bannerRedBackgroundSideImageTopTagLineText{
  position: absolute;
  top: 25%;
  left: 20%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  padding: 6px 24px;
}
.bannerRedBackgroundSideImageTopTagLineText3{
  position: absolute;
  top: 15%;
  left: 20%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  padding: 6px 24px;
}
.bannerRedBackgroundSideImageBottomTagLineText{
  position: relative;
  top: 45%;
  left: 50%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  padding: 6px 24px;
}

.bannerBottomMenu{
  width:280px;
  height: 300px;
  margin:7px 7px;
  border-radius: 15px;
  text-align: center;
}
.bannerBottomMenuColor1{
  background: #f6f1ee;
}
.bannerBottomMenuColor2{
  background: #f6f1ee;
}
.bannerBottomMenuColor3{
  background: #f6f1ee;
;
}
.bannerBottomMenuColor4{
  background: #f6f1ee;
;
}
.bannerBottomMenuText{
  position: absolute;
  color: black;
  font-size: 20px;
  padding: 6px 24px;
  width:280px;
}
.bannerBottomMenuMargin{
  margin-bottom: 100px;
}
.bannerMenuText{
  position: absolute;
  color: white;
  font-size: 20px;
  padding: 6px 24px;
  width:280px;
}
.bannerMenuTextWhiteBG{
  position: absolute;
  color: black;
  font-size: 20px;
  padding: 6px 24px;
  width:280px;
  background: white;
  text-align:left;

}
.bannerBottomMenuImage{
  position: relative;
  width:280px;
  height: 200px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
/* Header CSS */
.headerBackgroundImage{
 /* background-image: url("../img/beige1-bg.png");
 background-image: url("../img/balcony7.png"); */
 background-image: url("../img/pharmacy_stock5.png");
 opacity: 0.7;	
}
.home .home-banner-1{ 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% center;
  height: 650px; /* 760px; */  	
  position: relative;
}
/* header right img */
.headerLeftBtnShopNow {
  position: absolute;
  top: 64%;
  left: 69%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 20px;
  padding: 6px 50px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.headerLeftBottomTagLineText{
  position: absolute;
  top: 54%;
  left: 68%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
  padding: 6px 24px;
}
.headerLeftTopTagLineText{
  position: absolute;
  top: 45%;
  /*left: 10%; */
  left: 96%;
  width: 100%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
 /* font-size: 32px; */
  font-size: 50px;
 /* padding: 6px 24px; 6px =top bottom 24=left right not same as bootstrap */ 
  padding: 15px 24px;
}
/* header left img */
.headerRightBtnShopNow {
  position: absolute;
  top: 110%;
  right: 1%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.headerRightBottomTagLineText{
  position: absolute;
  top: 90%;
  right: 0%; 
  color: white;
  font-size: 20px;
  padding: 6px 0px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  float : right;
  text-align: right;
}
.headerRightTopTagLineText{
  position: absolute;
  top: 70%;
  right: 0%; 
  -ms-transform: translate(-65%, -50%);
  transform: translate(-65%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 0px;
}
/* header top img */
.headerBottomBtnShopNow {
  position: absolute;
  top: 130%;
  left: 49%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.headerBottomBottomTagLineText{
  position: absolute;
  top: 120%;
  left: 50%; 
  color: white;
  font-size: 20px;
  padding: 6px 0px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.headerBottomTopTagLineText{
  position: absolute;
  top: 100%;
  left: 50%; 
  -ms-transform: translate(-65%, -50%);
  transform: translate(-65%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 0px;
}

/* header bottom img */
.headerTopBtnShopNow {
  position: absolute;
  top: 60%;
  left: 49%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.headerTopBottomTagLineText{
  position: absolute;
  top: 50%;
  left: 50%; 
  color: white;
  font-size: 20px;
  padding: 6px 0px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.headerTopTopTagLineText{
  position: absolute;
  top: 30%;
  left: 50%; 
  -ms-transform: translate(-65%, -50%);
  transform: translate(-65%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 0px;
}
/* header center img */
.headerCenterBtnShopNow {
  position: absolute;
  top: 100%;
  left: 49%; 
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  color: black;
  font-size: 16px;
  padding: 6px 60px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
}
.headerCenterBottomTagLineText{
  position: absolute;
  top: 80%;
  left: 50%; 
  color: white;
  font-size: 20px;
  padding: 6px 0px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.headerCenterTopTagLineText{
  position: absolute;
  top: 60%;
  left: 50%; 
  -ms-transform: translate(-65%, -50%);
  transform: translate(-65%, -50%);
  color: white;
  font-size: 32px;
  padding: 6px 0px;
}
/* To remove arrows from top menu headers */
/* .dropdown-toggle::after {
  content: none !important;
} */

.success-msg{
	width: 250px;
	margin:auto;
	border-radius: 4px;
  background-color: #e3e3fa ;
  color: black;
  border:  #b7b7f3;
  font-weight: normal ;
}

.dropdown:hover .dropdownl2 {display: block;}
.dropdownl2{
  top:97% !important;
}
.rating{
  height: 18px;
}
.productFont{
  font-size: 1.0rem;
  font-weight: 600;
}
.productFontSettings{
  font-family: sans-serif;
  font-size: 0.4rem;
  font-weight: 600;
  color: black;
  padding-left:5px;
  /* padding-right:15px; */
}
.ratingsSettings{
  padding-left:5px;
  /* padding-right:15px; */
  font-size: 0.6rem;
}
.btnSettings{
  padding-left:5px;
  padding-right:5px;
  background-color: #FD8F5F;
  color: white;
  height: 20px;
  text-align: center;
  padding-top: 7px;
  border-radius: 2px;
  font-size: 0.4rem;
}
.dropdownSpecial{
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  margin-right: 10px;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-group>.select_dropdown {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
   border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.minWidthClass{
  width: 1px;
  height: 1px;
}
.maxWidthClass{
  max-width: 500px;
  max-height: 100px;
}
.thumbnailDimensions {
   /* width: 75%; */
  /* max-width: 280px;
  height: auto; */

  max-width: 100%;
  height: 200px;

}
.cursorPointer{
  cursor: pointer;
}