@font-face {
    font-family: 'Optima';
    font-style: normal;
    font-weight: normal;
    src: local('Optima'), url('../optima/OPTIMA.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Optima Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Optima Italic'), url('../optima/Optima_Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Optima Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Optima Medium'), url('../optima/Optima Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Optima Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Optima Bold'), url('../optima/OPTIMA_B.woff') format('woff');
    }
/* Overriding Browser settings */
*, ::after, ::before {
    margin: 0;
      padding: 0;
      border: none;
      outline: none;
      box-sizing: border-box;
}
*:focus {
    border: none;
    outline: none;
    background: none;
}
a {
    text-decoration: none;
    color:var(--black);
}
a:hover {
    text-decoration: none;
    color:var(--dark);
}
body {
    font-family: "PT Sans", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .25px;
    background-color: var(--white);
    color: #0c1316;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
header {
    display: grid; 
    grid-template-columns: 1fr;
}
footer {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-gap: 1rem;
    color: #fff;
    text-align:left;
    padding:1rem;
    margin:0 3.5rem;
}
footer a, .footer a {
    color: #fff;
    text-align: center;
    padding:.125rem;
}
footer a:hover, .footer a:hover {
    color: var(--primary);
}
footer h3 {
    font-size:1.125rem;
}
footer p, footer h3 {
    color:var(--primary);
}
.footerBg {
    width:100%;
    background: #1b4e9b;
    border-top:1px solid #1b4e9b;
}
.footer {
    font-size: .75rem;
}
.footerIcon {
    font-size:1rem;
    padding:.5rem;
    color:inherit;
}
.footerSocio {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap:.5rem;
    padding: 1% 3rem;
}
.footerPay {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap:.5rem;
    padding: 1rem 0;
    justify-content:start;
}
.paymode {
    text-align:center;
}
img {
    justify-self: center;
    align-self: center;
    text-align: center;
}
ul, li {
    list-style: none;
}
button {
  font-size: inherit;
  color:inherit;
  background-color: transparent;
}
h1, h2, h3, h4, h5, h6, .title_new {
    font-family: 'Optima', san-serif;
    color:var(--head);
    font-weight:700;
}
p {
    font-size:1rem;
}
.dGrid {
    display: grid;
}
.title_new {
    font-size: 1.7rem;
    color:var(--dark);
    font-weight: 400; 
    line-height:1.5;
    text-align:center;
    position: relative;
}
/*.title_new:before, .title_new:after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background: #ccc;
  top: 50%;
  position: absolute;
}
.title_new:before {
  left: 1rem;
}
.title_new:after {
  right: 1rem;
}*/
@media (min-width:992px) {
    .title_new:before, .title_new:after {
        width:450px;
    }
    .title_new:before {
      left: 4rem;
    }
    .title_new:after {
      right: 4rem;
    }
}
.success {
    background:var(--success);
}
.danger {
    background:var(--danger);
}
.warning {
    background:var(--warning);
}
#mobile {
  display: block;
}
#lap {
  display: none;
}
.cpad {
    padding:1rem;
}
.txtRight {
  text-align: right;
}
.header {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  background:var(--white);
}
@media (min-width:992px){
  .header {
    grid-template-columns: 1fr;
    grid-gap: 0;
    justify-content: space-around;
    align-items: center;
  }
}
.innerWrap {
  padding:0 1rem;
}
@media (min-width:992px){
    .innerWrap {
      padding:.5rem 5rem;
    }
}
.header-bg {
    background:var(--white);
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}
.logo {
      padding:.25rem;
      text-align:center;
      width: 120px;
  }
  .logo img {
      max-width:100%;
  }
/* Special classes for this project */
.topGrid {
    display:grid;
    grid-template-columns:1fr;
    background-color:var(--primary);
    min-height:1.5rem;
    padding:.5rem 0;
}
@media (min-width:992px){
    .topGrid {
        min-height:2.5rem;
    }
}
/*
.searchtop input {
    border: 1.5px solid #fff;
    border-radius: 2.5rem;
    background-color: transparent;
}
.searchtop .form-control {
    color:#fff;
}
.searchtop input::placeholder {
    color:#fff;
}
*/
.cartGrid {
    display:flex;
    grid-template-columns:1fr;
    padding:0;
    color:var(--dark);
    margin-left:0;
}
.left h5 {
    color:var(--primary);
}
.cartGrid .left {
    display:flex;
    justify-content:flex-start;
    align-self:center;
}
.cartGrid .right {
    display:flex;
    justify-content:center;
    grid-gap:0;
    align-self:center;
}
@media (min-width:992px) {
    .cartGrid {
        display:flex;
        grid-template-columns:1fr;
        padding:8px 0;
        color:var(--dark);
        margin-left:auto;
    }
    .cartGrid .left {
        display:flex;
        justify-content:flex-start;
        align-self:center;
    }
    .cartGrid .right {
        display:flex;
        justify-content:center;
        grid-gap:1rem;
        align-self:center;
    }
}
.badge {
    background-color:var(--primary);
    color:var(--white);
    vertical-align:middle;
    margin-left: .5rem;
    margin-top: -.5rem;
}
.logoGrid {
    display: grid;
    grid-template-columns: 12% 12% 37% 36%;
    align-items: center;
    grid-gap: 1%;
    padding: .5rem 0;
}
@media (min-width:992px) {
  .logoGrid {
    grid-template-columns: 1fr 2fr 1fr;
    align-items:end;
  }
}
.swiper-container {
    margin:1rem;
    padding-top:0;
}
.topPad {
    padding-top:0;
}
@media (min-width:992px) {
    .topPad {
        padding-top:0;
    }
}
/* ends */

/*
.sticky22 {
  top: 0;
  left:3rem;
  width:91vw;
  position:fixed;
  background-color: var(--white);
  z-index:99;
  
  
}

.sticky {
    top: 0;
    width: inherit;
    position: fixed;
    background-color: var(--white);
    z-index: 99;
}
*/

.hamberger, .login, .cart {
  font-size: 1.25rem;
  text-align: center;
}
.hamberger, .login, .cart, .hamberger a, .login a, .cart a {
  color: var(--primary);
}
.login, .cart {
    border-left: 1px solid #dddddd;
    padding: 0 .5rem;
}
.hamberger {
  text-align: center;
  margin:2% 1%;
  border-right: 1px solid #dddddd;
}
/* Off-Canvas Menu */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  background-color: var(--secondary);
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}
.sidenav a {
  padding: .5rem .5rem .5rem 2rem;
  text-decoration: none;
  color: var(--dark);
  display: block;
  transition: 0.3s;
}
.sidenav a:hover {
  color: var(--secondary);
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 1.25rem;
  font-size: 1.5rem;
  margin-left: auto;
}
/* Off-Canvas Cart */
.sideCart {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: var(--primary);
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}
.sideCart a {
  padding: .5rem 2rem .5rem .5rem;
  text-decoration: none;
  color: var(--light);
  display: block;
  transition: 0.3s;
}
.sideCart a:hover {
  color: var(--secondary);
}
.sideCart .closebtn {
  position: absolute;
  top: 0;
  left: 1.25rem;
  font-size: 1.5rem;
  margin-right: auto;
}
#wrapper {
  transition: margin-left .5s;
  width:100%;
  margin:0 auto;
}
/* Menu icon buttons */
.menuBtn, .menuBtnX {
  color: inherit;
  font-size: .5rem !important;
  padding: 0 .5rem;
  font-weight: bolder !important;
}
.menuBtn {
  transform: rotate(0deg);
  transition: all .2s ease;
}
.menuBtnX {
  transform: rotate(90deg);
  transition: all .2s ease;
}
.dropdown:hover .menuBtn, .megaDrop:hover .menuBtn {
  transform: rotate(180deg);
}
.xTended .menuBtnX {
  transform: rotate(270deg);
}
.xTended:hover .menuBtnX {
  transform: rotate(90deg);
}
/* navigation */
.menu {
  display: grid;
  grid-auto-flow: row;
  color: var(--primary);
  background-color: var(--none);
  border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    margin-top: .5rem;
    font-size:1.1rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}
.menu a{
  color: var(--dark);
  padding: .5rem;
  display: block;
  margin: auto;
  text-align: left;
  width: 100%;
}
.menu a:hover, .dropdown a:hover, .megaItems a:hover {
  background-color: var(--hover);
  color: var(--head);
}
.dropdown, .xTended {
  position: relative;
  z-index:9;
}
.dropdown a, .xTended {
  color: var(--dark);
  display: block;
  width:100%;
  white-space:break-spaces;
}
.xTended {
  background-color: var(--secondary);
}
.dropdown-content, .xTended-content {
  display: none;
  background-color: var(--secondary);
  color: var(--secondary);
  white-space: nowrap;
  width: 10rem;
  position: absolute;
  box-shadow: var(--shadow);
  z-index: 1;
}
.dropdown-content {
  left: 1rem;
}
.xTended-content {
  left: 2rem;
}
.dropdown:hover .dropdown-content, .xTended:hover .xTended-content {
  display: block;
  min-width:100%;
  width:auto!important;
}
.megaDrop {
  float: left;
  overflow: hidden;
}
.megaMenu {
  display: none;
  position: absolute;
  background-color: var(--secondary);
  width: inherit;
  left: 0;
  margin:0 .5rem;
  color: white;
  box-shadow: var(--shadow);
  white-space: nowrap;
  z-index: 9;
}
.sticky .megaMenu {
    left:0;
}
.megaMenu h3, megaMenu img {
  padding: .5rem 0;
}
.megaDrop:hover .megaMenu {
  display: block;
}
.megaItems {
  float: left;
  flex:1;
  padding: .5rem;
  height: auto;
  border-right: 0 dashed var(--lighter);
}
.megaItems a {
  float: none;
  color: var(--light);
  font-size: .85rem;
  padding: .5rem;
  text-decoration: none;
  display: block;
  text-align: left;
}
.megaItems h2 {
    font-size:1.125rem;
    font-weight:normal;
}
.megaItems h5 {
    text-transform:none;
    font-weight:normal;
    text-align:left
}
.row:after {
  content: "";
  display: flex;
  background-color: var(--secondary);
  clear: both;
}


.viewCart {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
.cartCount {
    cursor:pointer;
}
.viewCart .items {
  grid-template-columns: 1fr;
  grid-gap: .5rem;
  color: var(--light);
  text-align: center;
  place-items: center;
  padding: 1rem;
}
.viewCart h4 {
  color: var(--white);
  padding: 1rem;
}
.cartProducts {
  background-color: var(--head);
  color:var(--secondary);
  padding: 1rem;
}
.cartValue {
  background-color: var(--head);
  color:var(--secondary);
  padding: 1rem;
}
/* Carousel */
.carousel-container {
  max-width: 100vw;
  position: relative;
  margin: auto;
}
.carouselItems {
  display: none;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.caption {
  position: absolute;
  top: 50%;
  left:2%;
  width: 100%;
  text-align: left;
}
.caption h1, .caption p {
  color: var(--dark);
  text-align: left;
  line-height: 1.5;
}
.dot {
  cursor: pointer;
  height: .5rem;
  width: 2rem;
  margin: 0 .125rem;
  background-color: var(--light);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: var(--primary);
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
section {
  display: grid;
  grid-template-columns:  1fr;
  padding: 1rem;
}
.btn-dark {
    color: var(--white);
    background-color: var(--dark);
    border:1px solid var(--dark);
}
.btn-dark:hover {
    color: var(--lighter);
    background-color: var(--primary);
    border:1px solid var(--primary);
}
.btn-theme {
    color: var(--white);
    background-color: var(--primary);
    border:1px solid var(--primary);
}
.btn-theme:hover {
    color: var(--lighter);
    background-color: var(--secondary);
    border:1px solid var(--secondary);
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin: .5rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}
.owl-carousel {
    padding:0 1rem;
}
.owl-wrapper {
    border-bottom:1px solid #ccc;
    padding:0 0 1rem 0;
    margin: 0 -.75rem;
}
.pcat {
    z-index: 5;
    position: absolute;
    right: 10%;
    background: var(--white);
    color:var(--dark);
    border-radius: 50px;
    padding: 2px;
    font-size:.8rem;
    top: 5%;
    display:none;
    }
.exzoom .exzoom_preview {
    left:0 !important;
    z-index: unset !important;
}
.productPacking {
    display:flex;
    flex-wrap:wrap;
    width: fit-content;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: var(--corner);
}
.priceHead {
    display: grid;
    grid-template-columns: 7rem 4rem 4rem;
    grid-gap: .75rem;
}
.productPacking legend, .productPacking .inr, .productPacking .dollar {
    padding: .25rem .5rem;
    border-radius: var(--corner);
}
legend {
    background-color:transparent;
}
.inr {
    background-color:var(--primary);
}
.dollar {
    background-color:var(--dark);
}
.productPacking legend h5 {
   color: var(--dark);
   font-size:1rem;
}
.productPacking .inr h5, .productPacking .dollar h5 {
    color: var(--white);
    font-size:1rem;
    text-align:center;
}
.priceColumn {
    background: #f9f9f9;
    margin: .375rem 0;
    display: grid;
    grid-template-columns: 6.5rem 4rem 4rem;
    grid-gap: .75rem;
    padding: .25rem .5rem;
    text-align:center;
}
#highlights li {
    list-style-image: url(../images/tick.png);
}
.packQty {
    margin-right:.5rem;
    align-self:center;
    color:white;
}
.packQty:hover {
    color:var(--dark);
}
.describe p {
    margin-bottom: 0;
    padding: .5rem;
    color:var(--black);
    border-bottom: 1px solid #ccc;
}
.describe li {
    list-style-type: disc;
    margin-left:2rem;
    font-size:1.75rem;
    color:#ccc;
}
.cartBtns {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    margin: 1rem 0;
    width: 100%;
}
/* Media queries */
@media (min-width: 768px) {
  .caption {
    top: 50%;
    left:2%;
    width: 37%;
    text-align: left;
  }
  .caption h1, .caption p {
    color: var(--dark);
    text-align: left;
    line-height: 1.5;
  }
}
@media (min-width: 992px) {
  #mobile {
    display: none;
  }
  #lap {
    display: block;
  }
  footer {
      grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .footer {
      grid-column: span 4;
      text-align: center;
  }
  .logo {
      padding:0;
      grid-column: span 3;
      text-align:center;
      width: 150px;
      margin: 0 auto;
  }
  .cartGrid {
      grid-template-columns:repeat(2, 1fr);
  }
  .menu {
    grid-auto-flow: column;
    letter-spacing:.055rem;
  }
  .menu a {
      text-align:center;
  }
  .dropdown-content {
    left: 0;
  }
  .xTended-content {
    left: 100%;
    top:0;
  }
  .megaDrop:hover .megaMenu {
    display: flex;
    flex-direction:column;
    width:90%;
    margin-left:6%;
    padding:1%;
  }
  .megaMenu {
     /* left:2vw;
      margin:0 3.5rem;*/
  }
  .megaItems {
    height: auto;
    padding: 0 1rem;
    column-count:2;
  }
  .megaItems:nth-child(1) {
    border-right: 1px solid var(--dark);
    }
  .cpad {
    padding:.5rem 2.75rem;
  }
  .swiper-container {
    margin:1rem 3.5rem;
    padding-top:0;
  }
  .breadcrumb {
      margin:2.75rem 3.5rem;
  }
  .cartBtns {
    grid-template-columns:repeat(2,1fr);
  }
  .title_new {
      /*padding:0 3.5rem;*/
      margin-bottom: 1.25rem;
  }
  .owl-carousel {
    padding:0 56px;
  }
  .pcat {
      right:15%;
      padding:2px 10px;
      font-size:inherit;
  }
  .megaDrop .xMargin {
        width: 100%;
        margin: 0 1rem;
    }
}
@media (min-width: 1360px) {
    #wrapper {
        width:95vw;
    }
}
#toTop1{
    position: fixed;
    bottom: 10px;
    right: 30px;
    cursor: pointer;
    display: none;
}
.float{
    width:3rem;
    height:3rem;
    background-color:var(--primary);
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:1.5rem;
    box-shadow: 2px 2px 3px #0004;
    z-index:100;
}