/*--================== 
    #Common
==================--*/
:root {
    --blue: #009FE3;
    --orange :#FC4100;
    --light-gray:#F7FAFC;
    --text-color:#1F2937;
    --secondary-text:#6B7280;
}

*{ -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body {position: relative;  font-family: "Poppins", sans-serif !important; margin: 0; padding: 0; background: #fff;} 
html, div, img, ul, li, a, p, ol, body, h1, h2, h3, h4, h5, h6,textarea{color:#404040;font-weight:400;}
ul, a, input,textarea{text-decoration: none;list-style: none;text-decoration: none;outline:none;}
:focus {outline: 0;}
.clear{ clear: both;}
a:hover{ text-decoration: none;}
p,li{font-size: 16px;line-height: 26px;color: var(--text-color);font-weight: 400;}

.containers-lg{width: 100%; margin: auto;padding: 0 2%;}
.containers{width: 1250px; margin: auto;padding: 0 15px;}
.flex{display: flex;flex-wrap:wrap;}
.clear {float:left;width:100%;clear:both;}
.flex{display: flex;flex-wrap: wrap;}

.solid-blue-btn{
      display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border-radius: 50px;
    background: var(--blue);
    border: 2px solid var(--blue);
    transition: all 0.4s ease;
    cursor: pointer;
}
.solid-blue-btn:hover,.solid-blue-btn:focus{
      box-shadow: 0 0 18px rgb(0 0 0 / 30%);
    border-radius: 10px;cursor: pointer;
}

.border-blue-btn{
      display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: var(--blue);
    border-radius: 50px;
    background: transparent;
    border: 2px solid var(--blue);
    transition: all 0.4s ease;
    cursor: pointer;
}
.border-blue-btn:hover,.solid-blue-btn:focus{
      box-shadow: 0 0 18px rgb(0 0 0 / 30%);
    border-radius: 10px;cursor: pointer;
}


.solid-orange-btn{
      display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border-radius: 50px;
    background: var(--orange);
    border: 2px solid var(--orange);
    transition: all 0.4s ease;cursor: pointer;
}
.solid-orange-btn:hover,.solid-orange-btn:focus{
      box-shadow: 0 0 18px rgb(0 0 0 / 30%);
    border-radius: 10px;cursor: pointer;
}

.border-orange-btn{
      display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: var(--orange);
    border-radius: 50px;
    background: transparent;
    border: 2px solid var(--orange);
    transition: all 0.4s ease;cursor: pointer;
}
.border-orange-btn:hover,.solid-orange-btn:focus{
      box-shadow: 0 0 18px rgb(0 0 0 / 30%);
    border-radius: 10px;cursor: pointer;
}
/*-------*/



/*--================== 
    #Header 
==================--*/



.menu-toggle{display: none;}

.header-block{background: #fff;float: left;width: 100%;clear: both; z-index: 11;}
.header-block .flex{justify-content: space-between;align-items: center;}
#navbar {position: relative;top: 0;width: 100%;padding:0;transition: all 0.3s ease;}
#navbar.scrolled {background: #fff;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 0;transition: all 0.6s ease;position: fixed;}
.logo{float: left;position: relative;}
.logo a{display: inline-block;}
.logo img{width:355px;    vertical-align: bottom;}
.logo a span{font-size: 50px;font-weight: 600; position: relative; top: 0;}
#navbar.scrolled .hdr-top,
#navbar.scrolled .hdr-center{display: none;}
.hdr-center { padding: 15px 0;}
.hdr-bottom {background: var(--blue);width: 100%;clear: both;padding: 5px; border-top: 6px solid var(--orange);}
.hdr-top {background:var(--blue);width: 100%;clear: both;padding: 5px;}
.hdr-top p{ margin: 0;font-size: 18px;text-align: center;color: #fff;}
.hdr-top .hdr-info a,
.hdr-top .hdr-info label{display: inline-block;color: #fff;font-size: 14px;font-weight: 500;margin-left: 20px;transition: 0.3s;}
.hdr-top .hdr-info a:hover{text-decoration: underline;}
.hdr-social{display: flex;gap:20px;}
.hdr-social a{display: flex;align-items: center;justify-content: center; border: 2px solid #fff;color: #fff;border-radius: 100%;width: 30px; height: 30px;transition: 0.3s;}
.hdr-social a svg{fill: #fff;}
.hdr-social a:hover{border-radius: 6px;}

@media (min-width:769px){
    .quick-links-toggle .fa{display: none;}
}


@media (min-width:1200px){

.primary-menu ul {
  list-style: none;
}

.primary-menu > ul {
  display: flex;
  align-items: center;
  margin: 0;        justify-content: space-between;padding: 0;
}

.primary-menu > ul  li{
    position: relative;
          width: 100%;
        border-left: 1px solid #ffffff;
        text-align: center;
}

.primary-menu > ul li:first-child{border-left: none;}

.primary-menu a {
  display: block;
  padding: 5px 20px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;font-size: 16px;font-weight: 600;
}

.primary-menu a:hover,
.current-menu-item > a  {
color: var(--text-color);
}

/* SUBMENU */
/*.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  top: 45px;
  background: var(--light-gray);
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
  padding: 0;

}*/
/*
.submenu{
 position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
   /* display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 10px;
    width: 600px;*/
    /*padding: 15px;
    background: #fff;
     opacity: 0;
  visibility: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    z-index: 999;
            grid-auto-rows: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, auto);
        grid-auto-flow: column;
        gap: 5px 30px;
     width: max-content;

}


.primary-menu .submenu a:hover{color: var(--solidbtnlabel);}
.submenu li:last-child a{border-bottom:none;}

/* SUB-SUB MENU */
/*.submenu .submenu {
  left: 100%;
  top: 0;
}

/* SHOW ON HOVER */
/*.primary-menu li:hover > .submenu {
  opacity: 1;
  visibility: visible;
  /*transform: translateY(0);*/
/*}/*


    /*.primary-menu .listmenu > .submenu li a {
        padding:0;
        border-bottom: none;
        border-radius: 6px;
        line-height: 1.35;
        white-space: nowrap;
        transition: background 0.2s ease;
        color: var(--text-color);
        font-size: 15px;
        font-weight: 400;
    }

.primary-menu .submenu li{border-left: none;text-align: left;}




*/

/*submenu-new-CSS - desktop hover drop-down*/
.listmenu {
    position: relative;
}

/* Submenu: floats over the page and opens on hover (desktop only) */
.primary-menu .listmenu > .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    min-width: 260px;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border-top: 3px solid var(--orange);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 1000;
}

/* Open on hover, on keyboard focus, and for the .active class used on mobile */
.primary-menu .listmenu:hover > .submenu,
.primary-menu .listmenu:focus-within > .submenu,
.primary-menu .listmenu.active > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Submenu items */
.primary-menu .submenu li {
    display: block;
    width: 100%;
    border-left: none;
    text-align: left;
}

.primary-menu .listmenu .submenu li a {
    display: block;
    padding: 8px 18px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Link hover */
.primary-menu .listmenu .submenu li a:hover {
    background: #f5f5f5;
    color: var(--orange);
}

.primary-menu .listmenu .submenu-all a {
    font-weight: 600;
}

.primary-menu ul .listmenu > a:after{
  content:"\f107";
  font-family: 'fontawesome';
        position: relative;
        right: -10px;
        display: inline-block;
        transition: transform .25s ease;
}
.primary-menu ul .listmenu:hover > a:after{ transform: rotate(180deg); }
.primary-menu ul .listmenu .submenu a:after{content: none;}

}



/* Responsive / Mobile */
@media (max-width: 1200px) {
  .primary-menu{display: none;}
.primary-menu ul{width: 100%;float: left;margin: 0;padding: 0;}
   .listmenu > a::after {
        content: "\f107";
          font-family: 'fontawesome';
        font-weight: 900;
       /* position: absolute;*/
        position: relative;
        right: 0;
        top: 50%;
        /*transform: translateY(-50%);*/
        width: 30px;
        text-align: center;
        cursor: pointer;
        float: right;
    }

    /* Submenu */
    .listmenu .submenu {
        position: static;
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        padding: 0;
        margin: 0;
        transition: max-height 0.4s ease,
                    opacity 0.3s ease;
    }

    /* Open */
    .listmenu.active .submenu {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
        padding: 10px 0;
    }

    /* Arrow rotate */
    .listmenu.active > a::after {
       /* transform: translateY(-50%) rotate(180deg);*/
               transform: rotate(180deg);
    }
}



.search-cart{
    display: flex;
    align-items: center;
    gap: 20px;
}

/* SEARCH BOX */
.search-box{
    position: relative;
    height: 42px;
    background: #fff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
}

/* INPUT */
.search-box input{
    width: 0;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0;
    transition: 0.4s ease;
}

/* SEARCH ICON */
.search-btn{
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100px;
}

.search-cart img{
    width: 24px;
}

.search-cart a{
      width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* HOVER / FOCUS EFFECT */
.search-box:hover input,
.search-box input:focus{
    width: 480px;
    padding: 0 15px;
}

/* OPTIONAL SHADOW */
.search-box:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.15);}

/* CART */
.cart-hdr{position: relative;}
.cart-hdr sup{position: absolute;top: 0px; right: -8px;background: red;color: #fff; font-size: 11px;padding: 0;border-radius: 100%;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;}

/*----- Hero-CSS ------*/
.hero-block{float: left;width: 100%;clear: both;position: relative;}
.hero-block img{width: 100%;vertical-align: bottom;}
.hero-block .caption {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.hero-block .caption .table1 {width: 100%;height: 100%;display: table;}
.hero-block .caption .table2 {width: 100%;height: 100%;display: table-cell;vertical-align: middle;    background: rgb(0, 0, 0, 0.6);}
.hero-block .caption .content {z-index: 1;text-align: left;width:600px;height: auto; background:transparent;float: left;padding:0;position: relative;display: inline-table;margin-top: 0;}
.hero-block .caption .content h1 { font-size: 50px;font-weight: 700;color: var(--text-color);margin: 0;    line-height: 55px;}
.hero-block .caption .content h1 span{display: block;font-size: 22px;} 
#hero.owl-theme .owl-nav{    margin-top: 0;}
#hero.owl-theme .owl-nav button {position: absolute; margin: 10px; border-radius: 100px;background: #ffffff;border: 2px solid #000;width: 40px;height: 40px; top: 50%;}
#hero.owl-theme .owl-nav .owl-prev {left: 30px;}
#hero.owl-theme .owl-nav .owl-next { right: 30px;}
#hero.owl-theme .owl-nav button span {font-size: 40px;position: relative; top: -9px;font-family: auto;}
#hero.owl-theme .owl-nav button:hover{color: var(--solidbtn);background: #fff;}

.inner-hero.hero-block .caption .table2{    background: transparent;}

.inner-hero.hero-block .item img{height: 80px;}
.inner-hero.hero-block .caption .content h1{display: none;}

/* mobile-hero only - the desktop hero keeps its original composition */
.hero-block .caption .content .hero-copy-sm{ display: none; }
#hero.owl-theme .owl-dots{ display: none; }

/*----- home-feature-CSS ----- */
.feature-bar{display: flex;justify-content: space-between; gap: 20px;background: #fff;padding: 18px 25px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, .08);margin-bottom: 20px;flex-wrap: wrap;    margin-top: -40px;
    z-index: 1;position: relative;}
.feature-bar .feature {display: flex;align-items: center;gap: 12px;}
.feature-bar .feature i {color:var(--blue);font-size: 40px;}
.feature-bar .feature h4 { font-size: 15px;margin: 0;padding: 0;color: #000;font-weight: bold;}
.feature-bar .feature p {color: #666;font-size: 14px;margin: 0;padding: 0;}

/*----- home-categories-CSS ----- */
.home-categories{background: #fff; padding: 30px 0;}
.home-categories .heading {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.home-categories .heading h2 {font-size: 28px;color: #000;font-weight: bold;}
.home-categories .heading a {text-decoration: none;color: var(--orange); font-weight: 600;}
.home-categories .products{display:grid;grid-template-columns:repeat(8,1fr); gap:15px;}
.home-categories .products .card{background:#fff;border:1px solid #e6e6e6;text-align:center;padding:18px;border-radius:8px;transition:.3s;cursor:pointer;min-height: 190px;}
.home-categories .products .card:hover{transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.08);}
.home-categories .products .card img{width:70px;height:70px;object-fit:contain;margin-bottom:10px;}
.home-categories .products .card p{font-size: 15px;padding: 0;margin: 0;line-height: 24px;font-weight: 500;}
.home-categories .products .more{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.home-categories .products .more i{font-size:35px;color:var(--blue);margin-bottom:12px;}

/*----- home-about-CSS ----- */
.home-about{background:#fff;padding: 60px 0;}
.home-about .flex{margin:auto;display:grid;grid-template-columns:2fr 1.2fr;gap:25px;}
.home-about .about-left{background:#fff;padding:35px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.08);animation:fadeUp .8s ease;}
.home-about .about-left h2{margin-bottom:35px;color:#000;font-size: 30px;font-weight: bold;}
.home-about .cta-card{background:linear-gradient(135deg,#FC4100,#ff6b00);border-radius:15px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 25px 0;color:#fff;animation:fadeLeft .8s ease;}
.home-about .cta-card::before{content:"";position:absolute;width:300px;height:300px;background:rgba(255,255,255,.08);border-radius:50%;right:-100px;bottom:-120px;}
.home-about .cta-card .content{max-width:60%;z-index:2;}
.home-about .cta-card .content h2{font-size:28px;margin-bottom:15px;line-height:1.3;color: #fff;}
.home-about .cta-card .content p{margin-bottom:25px;line-height:1.6;opacity:.9;color: #fff;}
.home-about .cta-card .content a{display: inline-block;padding: 15px;background:var(--blue);color:#fff;text-decoration: none;border-radius: 30px;font-weight: bold;transition: .4s;font-size: 14px;}
.home-about .cta-card .content a:hover{background:#fff;color:#1565c0;transform:translateY(-4px);}
.home-about .cta-card img{width:210px;align-self:flex-end;z-index:2;transition:.5s;}
.home-about .cta-card:hover img{transform:scale(1.08);}


.home-about .about-right {
  background: #fff;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
   /* color: #fff;
    animation: fadeLeft .8s ease*/
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.home-about .about-right figure { padding: 0;margin: 0;}



/* Animation */
@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}
@keyframes fadeLeft{

from{
opacity:0;
transform:translateX(40px);
}
to{
opacity:1;
transform:translateX(0);
}
}
/* Responsive */
@media(max-width:992px){
.home-about .flex{grid-template-columns:1fr;}
.home-about .cta-card .content{max-width:100%;}
.home-about .cta-card{flex-direction:column;text-align:center;}
.home-about .cta-card img{margin-top:20px;}
}

/*----- home-professionals-CSS -----*/

.home-professionals{padding: 30px 0;}

.home-professionals .professionals{
    display:flex;
    gap:50px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

/* Left Card */
.professionals .card{
    width:670px;
    border-radius:15px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.professionals .content{
    display:flex;
}

.professionals .text-box{
    width:40%;
    background:#0a2b63;
    color:#fff;
    padding:35px 25px;
}

.professionals .text-box h2{
    font-size:28px;
    margin-bottom:20px;
    color: #fff;font-weight: 500;
}

.professionals .text-box p{
    font-size:14px;
    line-height:1.8;
    margin-bottom:30px;    color: #fff;
}

.professionals .text-box a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}
.professionals .text-box a:hover{color: var(--orange);}

.professionals .image-box{
    width:60%;position: relative;
}

.professionals .image-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Right Section */

.professionals .trust{
    width:500px;
}

.professionals .trust h2{
    font-size: 30px;
    margin-bottom: 35px;
    color: #000;
    font-weight: bold;
}

.professionals .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.professionals .item{
   
    display:flex;
    align-items:center;
    gap:15px;
    font-size:17px;
    padding:15px;
    border-radius:12px;
    transition:all .3s ease;
    cursor:pointer;
    font-weight: 500;

}

.professionals .item:hover{
    background:#0a2b63;
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(10,43,99,.25);
}

.professionals .item:hover img{
    background:#fff;
    color:#0a2b63;
    border-color:#fff;
    transform:rotate(10deg) scale(1.1);
}

.professionals .item img{
    width:45px;
    height:45px;
    border:2px solid #d7e5ff;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#2d6cdf;
    font-size:20px;
     transition:all .3s ease;
}


.popup-overlay {position: fixed;top: 0;left: 0;width: 100%; height: 100%; background: rgba(0,0,0,0.6);display: flex;justify-content: center;align-items: center;opacity: 0;visibility: hidden; transition: 0.3s ease; z-index: 999;}
.popup-overlay.active {opacity: 1;visibility: visible;}
.popup {background: #fff; padding: 0;width: 900px;border-radius: 0;position: relative;transform: scale(0.8); transition: 0.3s ease;}
#utube-popup .popup iframe{width: 100%;height:500px;vertical-align: bottom;}
.popup-overlay.active .popup { transform: scale(1);}
.close-popup {position: absolute;top: -10px;right: -10px;font-size: 22px;cursor: pointer;background: var(--orange);border-radius: 100%;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center; color: #fff;}
.home-trust  .flex{  margin:auto;background:#fff;border-radius:16px;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);animation:fadeUp .8s ease;}
.home-trust  .video-side{width: 600px;    position: relative; justify-content: space-between;display: flex;flex-wrap: wrap;}
.home-trust  .video-side figure img{width: 100%;}
.home-trust  .video-side figure{width: 270px;margin: 15px;}
.home-trust  .content-side{    width: 580px;}
.play-btn {position: absolute; top: 0;left: 0; right: 0;bottom: 0; display: flex;align-items: center; justify-content: center;z-index: 1;}
.play-btn button {width: 95px;height: 95px;border-radius: 50%; border: none;background: #ff3d00;color: #fff;font-size: 24px;cursor: pointer;position: relative;outline: none;}
.play-btn button::before {content: ""; position: absolute;width: 100%;height: 100%; border-radius: 50%; background: rgba(255, 61, 0, 0.6);animation: pulse 1.5s infinite;top: 0;left: 0; z-index: -1;}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Responsive */

@media (min-width: 991px) and (max-width: 1450px){
.home-professionals .professionals {gap:20px;}
 .professionals .card, .professionals .trust{
        width:48%;
    }
  .professionals .text-box{width: 50%;padding: 15px;}
  .professionals .image-box{width: 50%;}

}

@media(max-width:991px){

    .professionals .content{
        flex-direction:column;
    }

    .professionals .text-box,
    .professionals .image-box{
        width:100%;
    }

    .professionals .card, .professionals .trust{
        width:100%;
    }

    .professionals .grid{
        grid-template-columns:1fr;
    }
}



/*----- home-trust-CSS ----- */


/*------ home-relationship-CSS ------*/
.sec-title{display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap;}
.sec-title h2{font-size: 30px; color:var(--text-color);font-weight: bold; line-height: 50px;    margin: 0 0 30px;}
.sec-title h2 span{display: block;font-size: 16px; color: var(--secondary-text);font-weight: 500;    margin: 0 0 -10px;}
.home-relationship{padding: 30px 0;}
.home-relationship .sec-title{justify-content: center;}
.home-relationship figure{margin: 0; padding: 0;width: 100%;}
.home-relationship figure img{ height: 100%;object-fit: contain;}


.itembox {
    width: 100%;
    height: 320px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.itembox:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
 /*   justify-content: center;
    align-items: center;*/
    background: #fff;
}



.flip-card-front img {
    width: 100%;
    display: block;
}

.itembox h6 {
    margin: 15px 0;font-size: 18px; color: #fff;font-weight: 500;
}

.flip-card-back {
    background: var(--blue);
    color: #fff;
    transform: rotateY(180deg);
    padding: 15px;
    text-align: center;
}

.flip-card-back a {
    display: inline-block;
  
}

.flip-card-inner table {width: 100% !important;}
.flip-card-inner table td{font-size: 12px;text-align: left;}
p.fs14.m_moq{
      font-weight: 500;
    font-style: italic;
    color: #fff;
    font-size: 14px;
}

/*----- testimonials-CSS ------*/
.home-testimonials{      padding: 30px 0; }
.home-testimonials .sec-title{justify-content: center;text-align: center;}
.home-testimonials h2{  margin: 0; }
.home-testimonials .overall-rating span{ color: var(--solidbtn);font-weight: 700;    padding: 0 5px;}
.home-testimonials .overall-rating {    border-radius: 100px;
    font-size: 14px;
    text-align: center;
    background: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 405px;
    margin: auto;
    color: #fff;
    padding: 3px;
    line-height: 20px;
}
.home-testimonials .stars {color: #ffb400;font-size: 20px;    margin-right: 10px;}
.testimonial-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 20px;}
.testimonial-card {border: 1px solid #eee;border-radius: 14px; padding: 20px;text-align: left;box-shadow: 0 4px 10px rgba(0,0,0,0.05);    background: #fff;}
.testimonial-card .stars {font-size: 16px;margin-bottom: 10px;}
.testimonial-text {font-size: 15px; color: #222;font-weight: 500;}
.testimonial-card .customer-name {margin-top: 12px; font-size: 15px;  color: var(--orange);font-weight: 600; }
/*------*/
#testimonials .owl-item,
.arrow-owl .owl-item{padding:15px;}
#testimonials.owl-theme .owl-nav,
#relationship.owl-theme .owl-nav,
.arrow-owl.owl-theme .owl-nav {    margin-top: 0;width: 100%;text-align: center;position: relative;right: 20px;}
#testimonials.owl-theme .owl-nav button,
#relationship.owl-theme .owl-nav button,
.arrow-owl.owl-theme .owl-nav button {       position: relative;margin: 10px;border-radius: 100px;background: var(--blue); border: 2px solid var(--blue);width: 40px;height: 40px;color: #fff;}
#testimonials.owl-theme .owl-nav .owl-prev,
#relationship.owl-theme .owl-nav .owl-prev,
.arrow-owl.owl-theme .owl-nav .owl-prev {left: 0;}
#testimonials.owl-theme .owl-nav .owl-next,
#relationship.owl-theme .owl-nav .owl-next,
.arrow-owl.owl-theme .owl-nav .owl-next{ right: 0;}
#testimonials.owl-theme .owl-nav button span,
#relationship.owl-theme .owl-nav button span,
.arrow-owl.owl-theme .owl-nav button span{     font-size: 40px;position: relative;top: -9px;font-family: auto;}
#testimonials.owl-theme .owl-nav [class*=owl-]:hover,
#relationship.owl-theme .owl-nav [class*=owl-]:hover,
.arrow-owl.owl-theme .owl-nav [class*=owl-]:hover {    color: var(--solidbtn) !important;background: #fff !important;}

/* These sliders run with nav:true so the prev/next arrows exist, but they are a
   mobile-only affordance - desktop shows several items at once and stays as it
   was. */
#relationship.owl-theme .owl-nav,
#testimonials.owl-theme .owl-nav{ display: none; }


/*------ Home-FAQ-CSS ------*/
.home-faq {padding: 30px 0 60px;}
.home-faq .sec-title{    justify-content: center;}
.home-faq .containers{
     background:#fff;
    border-radius:10px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
}


.faq-item{
    border-bottom:1px solid #ddd;
}
.faq-item.active .faq-question{color: var(--orange);}

.faq-question{
    width:100%;
    border:none;
    background:none;
    padding:18px;
    font-size:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.faq-question span{
    font-size:24px;
    transition:.3s;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    padding:0 18px;
}

.faq-answer p{
    padding-bottom:15px;
    color:#555;
}

.faq-item.active .faq-answer{
    max-height:150px;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}

/*--================== 
    #Footer 
==================--*/

.footer{width: 100%;float: left;clear: both;background: var(--blue);padding-top: 35px;}
.ft-menu ul{display: inline-block;padding: 0;margin: 0;justify-content: center;flex-wrap: wrap;}
.ft-menu ul li{margin: 10px;}
.ft-menu ul li a{color: #fff;}
.ft-menu ul li a:hover,
.ft-menu ul li a:focus,
.ft-info a:hover,
.copyright p a:hover{color: var(--orange);}
.footer .flex{justify-content: space-between;text-align: center;}
.footer h3{    font-size: 24px;margin: 0;font-weight: 500; color: #fff;}
.ft-box{width: 330px;}
.ft-info a {color: #fff;display: block;margin: 10px 0;}
.ft-info .hdr-social{justify-content: center;}
.ft-info .hdr-social a{display: flex;}
.ft-info .ft-logo img{width: 300px;background: transparent;padding: 10px;border-radius: 8px;}
.ft-info .hdr-social a:hover svg{fill: var(--orange);}
.ft-info .hdr-social a:hover {border: 2px solid var(--orange);}
.copyright{float: left;width: 100%;clear: both;    text-align: center;border-top: 1px solid #ffffff;    margin-top:30px;}
.copyright p{color: #fff;font-size: 14px;}
.copyright p a{color: #fff;}


/*--================== 
    #product-page 
==================--*/

.products-categories{    padding: 60px 0;}

.products-categories .card{
  background: #ffffff;
    text-align: left;
    width: 100%;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ccc;
    margin-bottom: 50px;
}

.product-cards .card{
width: 285px;margin: 10px;
}

.product-cards .card img{width: 100%;}

.products-categories .flex{justify-content: space-between;align-items: flex-start;}
.products-categories .left-side {
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: #0000003d 0 3px 8px;
    width: 350px;
    position: sticky;
    top: 0;
    height: auto;
}

.products-categories .right-side {
    width: 830px;
}



.card .cad-box{
  display: flex;
    flex-wrap: wrap;
}
.card .cad-box .cad-img{
      width: 300px;
}
.card .cad-box .cad-content{    width: 528px;}
.products-categories .right-side .flex-card{display: flex;flex-wrap: wrap;}
.products-categories .right-side .subcard-cat img{
      width: 100%;
    vertical-align: bottom;
    height: 160px;
    object-fit: contain;
        background: #fff;
}


.products-categories .left-side h2{
  margin: 0 0 15px;
    font-size: 24px;
    font-weight: 600;
    color: #000;
}
.products-categories .left-side ul {padding: 0;margin: 0;}
.products-categories .left-side ul li {
    display: block;
    position: relative;
    padding-right: 10px;
    line-height: 22px;
    margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.products-categories .left-side ul li:last-child{border-bottom: none;}

.products-categories .left-side ul li:before {
    content: ">";
    position: absolute;
    right: 0px;
}

.products-categories .left-side ul li a{color: var(--text-color);font-size: 15px;    width: 100%;
    display: inline-block;}
.products-categories .left-side ul li:hover a,
.products-categories .left-side ul li:hover:before{color: var(--orange);}

.breadcrumb {
     margin-top: 0;
  font-size: 14px;
}

.breadcrumb a {
  text-decoration: none;
      color: var(--secondary-text);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  margin: 0 5px;
  color: #555;
}

.breadcrumb .current {
  color: #000;
  font-weight: bold;
}


/*-----*/
.card.card-categories{padding: 30px;}
.card.card-categories img{width: 100%;vertical-align: bottom;}
.card.card-categories h1{
      margin: 0 0 25px;
    font-size: 30px;
    color: #000;
    font-weight: 600;
}

.flex-subcard{display: flex;flex-wrap: wrap;justify-content: left;}
.card.card-categories p a{color: var(--orange);}
.card.card-categories p a:hover{text-decoration: underline;}

.subcard-cat {
  width: 246px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 15px 30px;
    transition: all .3s ease;
}

.subcard-cat:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.subcard-cat .border-blue-btn,
.related-product .border-blue-btn {
    padding: 8px 15px;
    font-size: 15px;
}
.subcard-cat h3{
  font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-color);
}


.single-products-categories .subcard-cat{    width: 226px;    margin: 15px;}

.our-categories .subcard-cat{    width: 236px;    margin: 10px;} 


/*------*/
.sub-categories-sec .flex{    flex-wrap: wrap-reverse;}
.sub-categories-sec.products-categories .left-side,
.sub-categories-sec.products-categories .right-side{width: 100%;} 
.sub-categories-sec.products-categories .subcard-cat{width: 269px;}

.sub-categories-sec.products-categories .left-side ul {
    padding: 0;
    column-count: 3;
    gap: 50px;
}


/* ------ single-products-CSS ------*/
.product {
     display: flex;
    gap: 40px;
    background: #fff;
    padding: 0;
    border-radius: 15px;
}




/* Details */
.product-details {
  flex: 1;
}

.product-details h1 {
     font-size: 40px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.product-details .price {
  font-size: 24px;
     color: var(--orange);
  margin: 10px 0;
}

.product-details .description {
  margin: 15px 0;
  color: #555;
}

/* Quantity */
.quantity {
  display: flex;
  align-items: center;
}

.product-details .quantity button {
  padding: 5px;
  font-size: 16px;
    cursor: pointer;
    height: 30px;
    width: 30px;
    background-color: transparent;
    border: 1px solid;
}

.product-details .quantity input {
     width: 50px;
    text-align: center;
    margin: 0;
    height: 30px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: none;
    border-right: none;
    font-size: 18px;
}

.quantity-size {
    display: flex;
    align-items: center;
    flex-wrap: wrap;    margin-bottom: 20px;
}
.quantity-size .quantity-box label,
.quantity-size .size-box label {
    display: block;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--text-color);
    font-weight: 600;
}

.quantity-size .size-box select{
      height: 30px;
    border: 1px solid #000;
    padding: 0 5px;
    width: 200px;
}
.quantity-size .size-box{    padding-left: 20px;}

.quantity-size .size-box .single-model{
    height: 30px;
    line-height: 33px;
    border: 1px solid #000;
    padding: 0 12px;
    width: 120px;
    font-size: 16px;
    background: #fff;
    color: #000;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.needhelp{margin-top: 15px;}
.needhelp label{font-size: 14px;    display: block;}
.needhelp label a{color: var(--blue);
    font-weight: 500;
    display: inline-block;    text-decoration: underline;
    transition: 0.3s;}
  .needhelp label a:hover{text-decoration: none;}



.product-images {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
    border-radius: 15px;
}

/* Image container */
.image-wrapper {
  width: 100%;
/*  max-width: 400px;*/
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  position: relative;
}

/* Main image */
.main-image {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.5s ease;
}

/* Zoom on hover */
.image-wrapper:hover .main-image {
  transform: scale(1.2);
}

/* Shine effect */
.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transform: skewX(-25deg);
}

.image-wrapper:hover::after {
  left: 125%;
  transition: 0.7s;
}



.tabs {
  position: relative;
  display: flex;
  gap: 20px;
  border-bottom: 2px solid #ddd;
}

.tab-btn {
  background: none;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 18px;
  color: #555;
  transition: color 0.3s ease;
}

.tab-btn.active {
  color: var(--orange);
}

/* Sliding underline */
.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--orange);
  transition: all 0.3s ease;
}

/* Content animation */
.tab-content-wrapper {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
}

.tab-content {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.4s ease;
}

.tab-content.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
}

#tab2 ul{
  margin: 0;
    padding: 0;
    list-style-type: none;
}
#tab2 ul li {
    color: #69696c;
    font-size: 14px;
    list-style: outside none none;
    margin: 0 0 13px;
    display: block;
}

#tab2 ul li span {
    color: #1d1d1d;
    display: inline-block;
    font-weight: 500;
    margin: 0 26px 0 0;
    min-width: 125px;
}

.tabs-container .tabs button[data-tab="tab3"],
.tabs-container #tab3{display: none;}



.review-card .single-review {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 50px;
}

.review-card .single-review .review-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 90px;
    flex: 0 0 90px;
    margin: 0 15px 0 0;
}
.review-card .single-review .review-img img{
      width: 100%;
    vertical-align: middle;
    border-radius: 100px;
    border: 2px solid;
}
.review-card .single-review .review-top-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 0 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.review-card .single-review .review-top-wrap .review-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.review-card .single-review .review-top-wrap .review-left h4{
      margin: 0;
    padding-right: 20px;
}

.review-card .single-review .review-top-wrap .review-left a {
        color: var(--orange);;
}
.review-card .single-review .review-bottom p {
    margin: 0;
    width: 93%;
}

.review-card .single-review.child-review {
    margin-left: 70px;
    margin-bottom: 0;
}

.review-card .single-review .review-top-wrap .review-left .rating-product i,
.add-reviews h4 i {
    overflow: hidden;
    font-size: 18px;
    color: #fdd835;
}

.add-reviews{
      border-top: 1px solid #ccc;
    margin-top: 50px;
}

.add-reviews .review-input{
      display: flex;
    flex-wrap: wrap;
}

.add-reviews .review-input input,.add-reviews .review-input textarea{
      border: 1px solid #a1a1a1;
    height: 50px;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: #000;
    border-radius: 6px;
    font-family: 'Poppins';    margin: 1%;
}
.add-reviews .review-input textarea{
  height: 150px;
    resize: vertical;
}

.add-reviews .review-input input[type="text"],
.add-reviews .review-input input[type="email"]{width: 48%;}

.add-reviews .review-input input[type="submit"]{
  cursor: pointer;
    width: 200px;
    display: inline-block;
    text-transform: capitalize;
    font-size: 20px;
    padding: 0;
    background: var(--orange);
    color: #fff;
    border: 2px solid var(--orange);
    text-align: center;
    float: right;
}
.add-reviews .review-input input[type="submit"]:hover{
  background: #fff;color: var(--orange);
}

.add-reviews h4{
      margin: 0 0 20px;
    padding: 0;
    display: flex;
    align-items: center;
}
.add-reviews h4 span{padding-left: 10px;position: relative;
    top: 3px;}

.add-reviews h2{
      margin: 30px 0 0;
    font-size: 30px;
    font-weight: 600;
}

.related-product{padding: 60px 0;}

.related-product h2{font-size: 40px;
    font-weight: 600;
    color: #000;
    margin: 0;
    border-left: 8px solid var(--blue);
    padding: 0 0 0 15px;}

.related-product .subcard-cat{width: 100%;    display: inline-block; margin: 0;border: none;}
.related-product .subcard-cat:hover{    box-shadow: none;}
.related-product .subcard-cat img {
    width: 100%;
    vertical-align: bottom;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.related-product .owl-carousel .owl-item{padding: 8px;}

.related-product .subcard-cat h3{
  font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-color);
}

.related-product .subcard-cat .border-blue-btn {
    padding: 8px 15px;
    font-size: 15px;
}
/*------*/
.enquirycart-one{padding: 60px 0;}

  .enquirycart-one .success-txt{
        background: green;
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 5px 10px
  }

 .enquirycart-one table{width: 100%;    border: 1px solid #ccc;    border-collapse: collapse;}
 .enquirycart-one table th,
 .enquirycart-one table td{ border: 1px solid #ccc;    padding: 10px;}
 .enquirycart-one table .quantity button {
    padding: 8px 12px;
    font-size: 18px;
    cursor: pointer;
    height: 40px;
    width: 50px;
    background-color: transparent;
    border: 1px solid;
}


.enquirycart-one .checkout-btn{text-align: right;margin-top: 20px;}

.enquirycart-one table .quantity input {
    width: 50px;
    text-align: center;
    margin: 0;
    height: 40px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: none;
    border-right: none;
    font-size: 18px;
}
.enquirycart-one table th{    background: #ffebe3;    text-align: left;}
.enquirycart-one h2{
      font-weight: 600;
    color: #000;    font-size: 40px;
}

.contact-info-form{
        border: 1px solid #ccc;
    margin-top: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 30px;
    width: 720px;
}
.contact-info-form#checkout-form{width: 100% !important;}
.col1{ width: 100%;padding: 1%;}
.col2{ width: 50%; padding: 1%;}
.contact-info-flex{
      display: flex;
    flex-wrap: wrap;
}
.contact-info-form label{display: block;    font-weight: 500;
    color: #000;
    font-size: 16px;}
.contact-info-form .col2 input,
.contact-info-form .col1 textarea {
    width: 100%;
    height: 45px;
    border: 1px solid #737373;
    padding: 10px;
    font-size: 16px;
}
.contact-info-form .col1 textarea{height: 150px;resize: vertical;}
.contact-info-form .col2 sup{color: red;}
.enquirycart-one .contact-info-form h2{margin: 0;}

.contact-info-form input[type="submit"]{
      width: 200px;
    padding: 14px 36px;
    display: inline-block;
    border-radius: 100px;
    background: var(--blue);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

 .contact-info-form .cta-button2{padding: 0;    width: 100%;
    display: flex;
    justify-content: center;}
.contact-info-form .submit-btn{
      text-align: center;
    width: 100%;
}


/*--- new CSS ---*/

#query-form form{display: flex;flex-wrap: wrap;width: 100%;}


/*------*/

.contact-section {
  /*display: flex;
  gap: 20px;*/
  padding:20px 0 60px;
}
.contact-section h2{
      font-size: 28px;
    color: #000;
    font-weight: bold;
}

.contact-section .flex{justify-content: space-between;}

/* LEFT SIDE */
.contact-section .contact-info {
/*  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: 8px;*/
      background: #fff;
    border-radius: 8px;
    width: 450px;
}

.contact-section .contact-info .info-grid{height: 100%;}



.contact-section .contact-info h2  {
    background: #000000;
    color: #fff;
    padding: 15px;
    border-radius: 0;
    margin: 0;
    text-align: center;
    font-weight: 600;
}

/*.contact-section .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}*/

.contact-section .info-box {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: left;
    margin-top: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-radius: 10px;

    height: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-section .info-box iframe{
       width: 100%;
    flex: 1;
    min-height: 0;
    display: block;
    border: none;
    padding: 0;
    margin-top: 15px;
    box-sizing: border-box;
    
}

.contact-section .info-box a:hover {
  color: var(--orange);
}

.contact-section .info-box p {
      color: var(--text-color);
    display: flex;
    align-items: start;
    line-height: 16px;
}

.contact-section .info-box .fa{
padding-right: 10px;
    color: var(--orange);
}

.map-block iframe{width: 100%;vertical-align: bottom;height: 500px;border: none;}



/*-------*/
.about-section{padding-top: 60px;}
.about-section .about-content img{width: 100%;}
.about-section .about-content h2{
      font-size: 20px;
    font-weight: 500;
    margin: 0;
    color: var(--orange);
    position: relative;padding-left: 50px;
}
.about-section .about-content h2:after{content: "";
    width: 40px;
    height: 2px;
    background: var(--orange);
    display: block;
    position: absolute;
    left: 0px;
    top: 14px;}

.about-section .about-content h3{
    font-size: 30px;
    color: var(--text-color);
    font-weight: bold;
    line-height: 50px;
    margin: 0;
}

.about-section .about-content hr{
      width: 30px;
    height: 3px;
    margin: 0 0 30px;
    display: inline-block;
    background: red;
    border: none;
}
.exp-txt{
      font-weight: 600;
    color: var(--orange);}
 

.about-product{    padding: 30px 0 60px;}

.about-product .card {
    width: 275px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    margin: 15px;
        transition: all .3s ease;
}
.about-product .card .cardicon img{width: 100%;    height: 180px;
    object-fit: contain;}
.about-product .card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.about-product .card .border-blue-btn{
padding: 8px 15px;
    font-size: 15px;
}

.about-product .card h3{
      font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-color);
}


p.search-summary {
    width: 100%;
    padding: 0 15px;
}


.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.pagination-bar .page-link {
    text-decoration: none;
    padding: 8px 12px;
}

/* Page number ko exact center mein */
.pagination-bar .active {
       background: var(--blue);
    color: #fff;
    border-radius: 4px;
}

/* Disabled Next */
.pagination-bar .disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* single-product-details-CSS*/
.single-products-details {
    padding: 0 0 60px;
}
.tab-content-wrapper ul li{list-style: disc;}

.tab-content-wrapper table{    border-collapse: collapse;}
.tab-content-wrapper table th,
.tab-content-wrapper table tr, 
.tab-content-wrapper table td{border: 1px solid #ccc;    padding: 12px;
    text-align: left;}
.tab-content-wrapper h3{
          margin: 10px 0;
    font-weight: 500;
    color: var(--text-color);
    }





   
/*--================== 
    #responsive
==================--*/

@media (max-width:1450px){
   
  .containers,
  .containers-lg{width: 96%;padding: 0;}
  .about-product .card{width: 23%;margin: 1%;}
  .products-categories .left-side{width: 30%;}
  .products-categories .right-side{width: 67%;}
  .subcard-cat,.our-categories .subcard-cat{    width: 29%;    margin: 0 2% 2%;}
  .single-products-categories .subcard-cat{    width: 31.33339%;    margin: 1%;}
  .contact-section .contact-info{width: 35%;}
.contact-info-form{width: 60%;}

}

@media (max-width:1200px){

  /*toggle*/
.menu-toggle{width:auto;float:left;position: relative;top: 0;z-index: 9; left: 0;display:block;margin-top: 0;}
.menu-toggle-icon{display: inline-block;height:40px;float: right;background: #fff;border-radius: 0;}
.toggle-open .menu-toggle-icon{background: #ededed;}
.close-bars{display: none;}
.toggle-open .close-bars{display: block;}
.toggle-open .bars{display: none;}
.sticky-header .menu-toggle{margin-top: 30px;top: 0;}
.toggle-open .sticky-header .primary-menu{margin-top: 0 !important;}
.toggle-open .primary-menu {display: block;position: absolute;top: 100%;width: 100%;background: #fff;z-index: 99;left: 0;margin-top: 0;padding: 15px;}
.toggle-open #navbar.scrolled .primary-menu{margin-top: 0;top: 0;}
.sub{ right: 15px;position: absolute;padding: 15px; }
.hdr-bottom{    border-top: 1px solid var(--orange);background: var(--orange);padding: 1px;}

/*menu*/
/*.primary-menu{display: none;}
.primary-menu ul{width: 100%;float: left;margin: 0;padding: 0;}
.primary-menu ul li{display: block;}
.primary-menu ul li a{padding: 5px;margin-left: 0;width: 100%;}
ul.submenu{position: relative;        padding-left: 10px;}
.primary-menu ul li:hover .submenu {display: none;}
.primary-menu ul li .submenu a:before{content: '-';}*/

.home-categories .products{grid-template-columns:repeat(4,1fr);}

.about-product .card{width: 31.33339%;margin: 1%;}
.subcard-cat,.our-categories .subcard-cat{    width: 46%;    margin: 0 2% 2%;}
#query-form .col2{width: 100%;}
}


@media (max-width:991px){

}

@media (max-width:768px){
  .col2{width: 100%;}
/* ------------------------------------------------------------------
   Mobile hero - copy left, instruments top-right, in a rounded tinted
   panel. The art is FLOATED rather than a flex column: the heading and
   paragraph wrap beside it, and once the copy clears its bottom edge the
   buttons get the panel's full width, which is the only way they fit
   side by side on a phone. Desktop keeps its own hero untouched.
   ------------------------------------------------------------------ */
.hero-block:not(.inner-hero){
    display: block;
    float: none;
    clear: both;
    width: auto;
    margin: 12px;
    padding: 20px 16px 34px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbfd 0%, #e9f2f9 100%);
    overflow: hidden;          /* contains the float */
}

/* instruments: floated top-right, bleeding to the panel edge */
.hero-block:not(.inner-hero) #hero{
    position: static;
    float: right;
    width: 48%;
    max-width: 260px;
    min-width: 0;
    margin: 0 -16px 8px 14px;
    z-index: 0;
}
.hero-block:not(.inner-hero) #hero .item img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 86% center;
    /* The disc sits at 50%/46.4% of that square and its radius is 44.4% of the
       side, so this fades the banner's tinted corners out just past its edge
       and the instruments read as floating on the panel. Browsers without mask
       support simply keep the square, which is still correct. */
    -webkit-mask-image: radial-gradient(circle farthest-side at 50% 46.4%, #000 83%, rgba(0,0,0,0) 89%);
            mask-image: radial-gradient(circle farthest-side at 50% 46.4%, #000 83%, rgba(0,0,0,0) 89%);
}

/* copy */
.hero-block:not(.inner-hero) .caption{ position: static; width: auto; height: auto; }
.hero-block:not(.inner-hero) .caption .table1,
.hero-block:not(.inner-hero) .caption .table2{
    display: block;
    height: auto;
    background: transparent;
}
.hero-block:not(.inner-hero) .caption .containers{ width: 100%; padding: 0; }
.hero-block:not(.inner-hero) .caption .content{
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    background: transparent;
}
.hero-block:not(.inner-hero) .caption .content h1{
    font-size: clamp(18px, 5.6vw, 30px);
    line-height: 1.14;
    font-weight: 700;
    margin: 0;
}
.hero-block:not(.inner-hero) .caption .content h1 span{
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 7px;
}
.hero-block:not(.inner-hero) .caption .content .hero-copy-lg{ display: none; }
.hero-block:not(.inner-hero) .caption .content .hero-copy-sm{ display: block; }
.hero-block:not(.inner-hero) .caption .content p{
    font-size: clamp(11.5px, 3vw, 14px);
    line-height: 1.55;
    color: var(--secondary-text);
    margin: 10px 0 0;
}

/* buttons clear the float, so they get the panel's full width */
.hero-block:not(.inner-hero) .caption .buttons{
    clear: right;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.hero-block:not(.inner-hero) .caption .buttons a{
    padding: 9px 12px;
    font-size: clamp(11px, 2.9vw, 14px);
    gap: 6px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}
.hero-block:not(.inner-hero) .caption .buttons a:after{
    content: "\f178";
    font-family: 'fontawesome';
    font-size: .85em;
    line-height: 1;
}
.hero-block:not(.inner-hero) .caption .buttons .solid-blue-btn:after{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font-size: .8em;
}

/* slide dots, pinned bottom-left of the panel. #hero is floated but not
   positioned, so these resolve against .hero-block:not(.inner-hero). */
#hero.owl-theme .owl-dots{
    display: block;
    position: absolute;
    left: 16px;
    bottom: 12px;
    margin: 0;
    line-height: 0;
}
#hero.owl-theme .owl-dots .owl-dot{ display: inline-block; }
#hero.owl-theme .owl-dots .owl-dot span{
    width: 8px;
    height: 8px;
    margin: 0 5px 0 0;
    background: #c7d7e2;
    border-radius: 50%;
    transition: background .25s ease, width .25s ease;
}
#hero.owl-theme .owl-dots .owl-dot.active span{ background: var(--blue); width: 20px; border-radius: 4px; }

/* Inner-page hero (category / about / contact): a plain 80px banner strip with
   the breadcrumb over it. It must NOT pick up the home hero's panel above. */
.hero-block.inner-hero .caption .content{
    width: 100%;
    padding: 12px 15px;
    text-align: center;
}
.hero-block.inner-hero .breadcrumb{
    font-size: 13px;
    line-height: 1.4;
}
/* Long category names wrapped the trail mid-phrase inside an 80px strip, which
   is what read as broken. Keep it to one line - the full name is repeated in
   the <h1> directly below, so trimming the tail costs nothing. */
.hero-block.inner-hero .breadcrumb .containers-lg{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.header-block .hdr-top .flex{justify-content: center;}
.hdr-top .hdr-info{text-align: center;}
.header-block .logo{text-align: center;width: 100%;border-bottom: 1px solid #efefef; padding-bottom: 10px;}
.hdr-center {padding: 5px 0;}
.cart-hdr sup{right: 0;}
#hero.owl-theme .owl-nav button{display: none;}
.hero-block.inner-hero .caption{position: absolute;}
.hero-block.inner-hero .caption .content{background: transparent;}

.header-block .hdr-social,
.header-block .hdr-info label{display: none;}
#testimonials.owl-theme .owl-nav, #relationship.owl-theme .owl-nav, .arrow-owl.owl-theme .owl-nav{right: 0;}

.home-product .card{width: 100%;margin:2% 0;}
.sec-title{text-align: center;}
/* testimonials read a touch small on a phone - the "Testimonials" label and the
   quote copy both come up a step */
.home-testimonials .sec-title h2 span{ font-size: 18px; }
.home-testimonials .testimonial-text{ font-size: 16px; line-height: 1.6; }
.home-testimonials .testimonial-card .customer-name{ font-size: 15.5px; }
.home-testimonials .testimonial-card .stars{ font-size: 17px; }
.ft-box {width: 100%;}

.home-testimonials .overall-rating{display: block;width: 100%;}
/* Category cards: the 190px min-height and 18px padding are sized for a
   desktop 8-across row; on a phone they left each card mostly empty and made
   the section scroll for pages. Two across, sized to their content. */
/* slider prev/next arrows, mobile only - sat either side of the slide.
   .owl-nav carries position:relative from the desktop rule, which would make
   it the containing block for the buttons, so it is reset to static and the
   buttons resolve against #relationship (position:relative via .owl-carousel). */
#relationship.owl-theme .owl-nav,
#testimonials.owl-theme .owl-nav{
    display: block;
    position: static;
    width: auto;
    right: auto;
    margin: 0;
}
#relationship.owl-theme .owl-nav button,
#testimonials.owl-theme .owl-nav button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    right: auto;
    margin: 0;
    width: 36px;
    height: 36px;
    z-index: 5;
    background: var(--blue);
    border: 0;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
/* The shared rule forces a white background with !important AND out-specifies a
   plain button:hover (it uses [class*="owl-"]), so match its shape and add the
   element selector to win outright - otherwise a tap can leave the arrow white. */
#relationship.owl-theme .owl-nav button[class*="owl-"]:hover,
#relationship.owl-theme .owl-nav button[class*="owl-"]:focus,
#relationship.owl-theme .owl-nav button[class*="owl-"]:active,
#testimonials.owl-theme .owl-nav button[class*="owl-"]:hover,
#testimonials.owl-theme .owl-nav button[class*="owl-"]:focus,
#testimonials.owl-theme .owl-nav button[class*="owl-"]:active{
    background: var(--blue) !important;
    color: #fff !important;
}
#relationship.owl-theme .owl-nav .owl-prev,
#testimonials.owl-theme .owl-nav .owl-prev{ left: 0; }
#relationship.owl-theme .owl-nav .owl-next,
#testimonials.owl-theme .owl-nav .owl-next{ right: 0; }
#relationship.owl-theme .owl-nav button span,
#testimonials.owl-theme .owl-nav button span{ font-size: 30px; top: -6px; color: #fff; }

.home-categories{ padding: 26px 0; }
/* Title left, "View All" right, on one row - both scale with the screen so
   the pair always fits without wrapping. */
.home-categories .heading{
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.home-categories .heading h2{
    text-align: left;
    font-size: clamp(13.5px, 4vw, 20px);
    line-height: 1.25;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}
.home-categories .heading a{
    font-size: clamp(10.5px, 3.2vw, 14px);
    white-space: nowrap;
    flex: 0 0 auto;
}
/* mobile shortens the link to "View All ->"; desktop keeps the full wording */
.home-categories .heading a .cat-word{ display: none; }
.home-categories .products{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.home-categories .products .card{
    min-height: 0;
    height: 100%;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.home-categories .products .card img{ width: 64px; height: 64px; margin: 0; }
.home-categories .products .card p{ font-size: 13.5px; line-height: 18px; }
.home-categories .products .more i{ font-size: 28px; margin: 0; }
.home-about .about-left{text-align: center;padding: 15px;}
.home-about .cta-card .content h2{font-size:22px;}
.home-about .cta-card img{width:100%;}
/* Trust bar: even card grid instead of one tall stack.
   Two per row at every mobile size, so the row count never goes ragged;
   a lone trailing card stretches across instead of sitting half-empty. */
.feature-bar{
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
}
.feature-bar .feature{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 12px;
    background: var(--light-gray);
    border: 1px solid #eef2f5;
    border-radius: 10px;
}
.feature-bar .feature:last-child:nth-child(odd){ grid-column: 1 / -1; }
.feature-bar .feature i{ font-size: 30px; line-height: 1; }
.feature-bar .feature h4{ font-size: 15px; line-height: 1.3; }
.feature-bar .feature p{ font-size: 13px; line-height: 1.35; }

.about-product .card{width: 48%;margin: 1%;}
.contact-section .contact-info{padding: 0;}
.contact-section .info-grid{    grid-template-columns: 1fr;}
.products-categories .left-side{width: 100%;position: relative;}
.products-categories .right-side {width: 100%; margin-top: 30px;}
/* On a single category page the sidebar repeats the whole category list above
   the products, costing a full screen of scroll before you see anything you
   came for. Hide it there and lead with the products; the all-categories page
   (products.php, no .our-categories) keeps its list. */
.our-categories.products-categories .left-side{ display: none; }
.our-categories.products-categories .right-side{ margin-top: 0; }
.subcard-cat{width: 48%;margin: 0 1% 1%;}
.our-categories .subcard-cat{    width: 48%;    margin: 0 1% 1%;} 
.contact-section .contact-info{width: 100%;margin-bottom: 15px;}
.contact-info-form{width: 100%;}

.single-products-categories .product{    flex-wrap: wrap;gap:0;}
.single-products-categories .product .product-images,
.single-products-categories .product .product-details{width: 100%;flex: auto;}
.product-details h1{font-size: 30px;line-height: 36px;}
.copyright{    padding-bottom:50px;}

.footer{padding-top: 10px;}
.ft-info.ft-box .email-ft,
.ft-info.ft-box .phone-ft,
.ft-info.ft-box .add-ft{display: none;}
.footer .flex{position: relative;}
.ft-info.ft-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.ft-menu.ft-box {margin-top: 180px;}
.ft-menu.ft-product.ft-box{margin-top: 20px;}

.footer h3{font-size: 18px;}
.ft-menu .quick-links-toggle { cursor: pointer;}
.ft-menu .quick-links-menu { display: none;margin: 0; padding: 0;}
.quick-links-toggle.active + .quick-links-menu { display: block;}
.quick-links-toggle.active .fa{    transform: rotate(180deg);}


}

@media (max-width:565px){
.logo img{width: 100%;}

/* Phones: too narrow to sit the icon beside the text, so stack it on top */
.feature-bar{ gap: 8px; padding: 10px; }
.feature-bar .feature{
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 12px 6px;
}
.feature-bar .feature i{ font-size: 26px; }
.feature-bar .feature h4{ font-size: 13px; }
.feature-bar .feature p{ font-size: 12px; }
.home-categories .products{ gap: 10px; }
.home-categories .products .card{ padding: 14px 8px; }
.home-categories .products .card img{ width: 58px; height: 58px; }
.home-categories .products .card p{ font-size: 13px; }
.home-about .about-left .buttons a{margin: 5px;}
.about-product .card{width: 100%;margin: 1% 0;}
.subcard-cat,.single-products-categories .subcard-cat{width: 100%;margin: 0 0 2%;}
.our-categories .subcard-cat{    width: 100%;    margin: 1%;} 
.quantity-size .quantity-box, .quantity-size .size-box{width: 100%;padding-left: 0;}
.hero-block .caption .content p{ font-size: 12.5px; }
.hero-block .caption .buttons a{ padding: 11px 6px; font-size: 12.5px; }

.enquirycart-one input.qty-input{width: 40px !important;}
.enquirycart-one button.remove-btn{    margin-left: -10px !important;}
.enquirycart-one .checkout-btn{text-align: center;}

     
}



@media (min-width: 1201px) and (max-width: 1450px){
  .hero-block .caption .content{width: 50%;padding: 0 0 0 80px;} 
.home-product .card,.ft-box{width: 32%;}
}


@media (min-width: 769px) and (max-width: 1200px){
  
.header-block .flex{    flex-wrap: unset;}
.hdr-top .hdr-info a, .hdr-top .hdr-info label{    font-size: 13px;margin-left: 12px;}
.search-cart{margin-right: 80px;}
.menu-toggle{left: unset;right: 15px; top: 70px;position: absolute;}

#navbar.scrolled .hdr-top, #navbar.scrolled .hdr-center {
    display: block;
}
.hero-block .caption .content{width: 50%;top: 0;}
#hero.owl-theme .owl-nav button{position: relative;}
#hero.owl-theme .owl-nav .owl-prev{left: 0;}
#hero.owl-theme .owl-nav .owl-next{right: 0;}
.hero-block .caption .table2{background: rgb(255 255 255 / 60%);}
.hero-block .caption .content h1{font-size: 40px;line-height: 35px;}
 .hero-block .caption .content p{font-size: 14px;        line-height: 22px;}  

.home-product .card{width: 32%;}
.ft-box { width: 32%;}
.feature-bar{gap:10px;    margin-top: -20px;}
.quantity-size .quantity-box, .quantity-size .size-box{width: 100%;padding-left: 0;}
}





/*--==================
    #Enquiry cart / Checkout
==================--*/

/* "Proceed to Checkout" / "Edit Cart" links */
.enquirycart-one .checkout-btn .checkout-link{
    display: inline-block;
    padding: 14px 36px;
    border-radius: 100px;
    background: var(--blue);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.enquirycart-one .checkout-btn .checkout-link:hover{opacity: .9;}

/* Two-column layout for the checkout form (same as the contact-us form) */
#checkout-form form{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Brief confirmation after a quantity is saved automatically */
.enquirycart-one .qty-input.qty-saved{
    border: 1px solid #1e8b3a;
    outline: none;
}

/* Form error message (checkout + contact us) */
.error-txt{
    background: #c0392b;
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 5px 10px;
    margin-bottom: 10px;
}


/*--==================
    #Product gallery + lightbox
==================--*/

/* Main image and thumbnail strip sit side by side */
.product-images{
    align-items: flex-start;
    gap: 15px;
}
.product-images .image-wrapper{
    flex: 1 1 auto;
    min-width: 0;
}
.main-image{cursor: zoom-in;}

/* Thumbnail strip - sits to the LEFT of the main image */
.thumb-strip{
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 110px;
    padding: 15px 0 15px 15px;
    max-height: 480px;
    overflow-y: auto;
}
.thumb-item{
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color .3s ease;
}
.thumb-item img{
    width: 100%;
    display: block;
}
.thumb-item:hover,
.thumb-item.active{
    border-color: var(--blue);
}

/* Lightbox - hidden until JS adds .active */
.lightbox-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lightbox-overlay.active{display: flex;}

#lightboxImage{
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-close{
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    color: #fff;
    font-size: 45px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}
.lightbox-arrow:hover{background: rgba(255, 255, 255, 0.3);}
.lightbox-arrow.prev{left: 25px;}
.lightbox-arrow.next{right: 25px;}

@media (max-width: 767px){
    .product-images{flex-wrap: wrap;}
    .thumb-strip{
        order: 0;               /* back below the main image on small screens */
        flex-direction: row;
        flex: 1 1 100%;
        max-height: none;
        padding: 0 15px 15px;
    }
    .thumb-item{flex: 0 0 80px;}
    .lightbox-overlay{padding: 15px;}
    .lightbox-close{top: 12px; right: 16px; font-size: 36px;}
    .lightbox-arrow{width: 40px; height: 40px; font-size: 22px;}
    .lightbox-arrow.prev{left: 10px;}
    .lightbox-arrow.next{right: 10px;}
}
/*----- relationship flip cards: uniform image size + full spec on flip -----*/
.home-relationship .itembox{ height: 450px; }

/* front: square image box matching the 500x500 uploads — never stretched or cropped */
.home-relationship .flip-card-front{
    padding: 12px;
    align-items: center;
    justify-content: center;
}
.home-relationship .flip-card-front figure{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 100%;
    margin: 0;
    display: block;
}
.home-relationship .flip-card-front img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* back: fit the whole spec table */
.home-relationship .flip-card-back{
    padding: 14px 12px;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.home-relationship .itembox h6{
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
}
.home-relationship .flip-card-back p{ margin: 0; }

/* strip the empty headings / spacer paragraphs the editor leaves behind */
.home-relationship .flip-card-back h3,
.home-relationship .flip-card-back h4,
.home-relationship .flip-card-back h5,
.home-relationship .flip-card-back p:empty,
.home-relationship .flip-card-back br,
.home-relationship .flip-card-inner table thead{ display: none; }

.home-relationship .flip-card-inner table{
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
}
.home-relationship .flip-card-inner table td{
    width: auto !important;
    font-size: 12px;
    line-height: 1.25;
    padding: 2px 5px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    border-bottom: 1px solid rgba(255,255,255,.25);
}
.home-relationship .flip-card-back::-webkit-scrollbar{ width: 5px; }
.home-relationship .flip-card-back::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.5);
    border-radius: 5px;
}
@media (max-width: 767px){
    .home-relationship .itembox{ height: 420px; }
}

/*--==================
    #mobile off-canvas menu drawer
==================--*/

/* injected by custom.js, so keep them out of the way on desktop */
.drawer-head,
.primary-menu .sub-toggle,
.menu-overlay{ display: none; }

@media (max-width: 1200px){

  .menu-overlay{
      display: block;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.5);
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
  }
  body.toggle-open .menu-overlay{ opacity: 1; visibility: visible; }
  body.toggle-open{ overflow: hidden; }
    /* #navbar is position:relative with z-index:11, so it traps the drawer in its
     own stacking context and the body-level overlay paints over the drawer.
     Dropping it to auto lets the drawer's z-index win against the overlay. */
  body.toggle-open #navbar{ z-index: auto; }

  /* the drawer itself */
  .header-block .primary-menu{
      display: block;
      position: fixed;
      top: 0;
      left: -100%;
      width: 86%;
      max-width: 340px;
      height: 100%;
      margin: 0;
      padding: 0;
      background: #fff;
      z-index: 10000;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 0 30px rgba(0,0,0,.25);
      transition: left .35s ease;
  }
  body.toggle-open .header-block .primary-menu{
      left: 0;
      top: 0;
      margin-top: 0;
      padding: 0;
  }

  .header-block .primary-menu .drawer-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: var(--blue);
  }
  .header-block .primary-menu .drawer-title{
      color: #fff;
      font-size: 18px;
      font-weight: 600;
  }
  .header-block .primary-menu .drawer-close{
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 30px;
      line-height: 1;
      padding: 0 4px;
      cursor: pointer;
  }

  /* top level items */
  .header-block .primary-menu > ul{
      width: 100%;
      float: none;
      overflow: hidden;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  .header-block .primary-menu li{
      display: block;
      float: none;
      position: relative;
      width: 100%;
      text-align: left;
      border-bottom: 1px solid #eee;
  }
  .header-block .primary-menu a{
      display: block;
      width: auto;
      padding: 13px 48px 13px 18px;
      margin: 0;
      line-height: 22px;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color);
      text-decoration: none;
  }

  /* arrow that opens a sub-menu */
  .header-block .primary-menu .sub-toggle{
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
      height: 48px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
  }
  .header-block .primary-menu .sub-toggle:before{
      content: '';
      display: block;
      width: 9px;
      height: 9px;
      margin: -3px auto 0;
      border-right: 2px solid var(--text-color);
      border-bottom: 2px solid var(--text-color);
      transform: rotate(45deg);
      transition: transform .25s ease;
  }
  .header-block .primary-menu li.sub-open > .sub-toggle:before{
      transform: rotate(-135deg);
      margin-top: 3px;
  }

  /* sub-menu, collapsed until its arrow is tapped */
  .header-block .primary-menu ul.submenu{
      display: none;
      position: static;
      float: none;
      overflow: hidden;
      height: auto;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0 0 6px;
      background: #f7f7f7;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      max-height: none;      /* <-- add this line */
  }
  .header-block .primary-menu li.sub-open > ul.submenu{ display: block;  max-height: none; }
  .header-block .primary-menu .submenu li{ border-bottom: 0; }
  .header-block .primary-menu .submenu a{
      padding: 9px 18px 9px 30px;
      font-size: 14px;
      font-weight: 500;
  }
  .header-block .primary-menu ul li .submenu a:before{ content: ''; }
    .header-block .primary-menu .submenu-all a{ font-weight: 600; }

  /* the desktop drop-down caret would otherwise double up with the arrow button */
  .header-block .primary-menu ul .listmenu a:after{ content: none; }
}
/*--==================
    #mobile header row: logo left, search / cart / hamburger right
==================--*/

@media (max-width: 1200px){

  .hdr-center{ padding: 10px 0; }
  .header-block .hdr-center .flex{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 10px;
  }

  .header-block .logo{
      order: 1;
      float: none;
      width: auto;
      max-width: 55%;
      text-align: left;
      border-bottom: 0;
      padding-bottom: 0;
  }
  .header-block .logo img{
      width: 100%;
      max-width: 260px;
      height: auto;
  }

  .header-block .search-cart{
      order: 2;
      flex: 0 0 auto;
      margin: 0 0 0 auto;
      gap: 6px;
  }
  .header-block .search-cart a{ width: 36px; height: 36px; }
  .header-block .search-cart img{ width: 21px; }
  .header-block .search-box{ height: 36px; }
  .header-block .search-btn{ width: 36px; height: 36px; }
  .header-block .search-box:hover input,
  .header-block .search-box input:focus{ width: 140px; padding: 0 10px; }
  .header-block .cart-hdr sup{
      top: -2px;
      right: -2px;
      width: 18px;
      height: 18px;
      font-size: 10px;
  }

  .header-block .menu-toggle{
      order: 3;
      position: static;
      float: none;
      width: auto;
      margin: 0;
      top: auto;
      left: auto;
      right: auto;
  }
  .header-block .menu-toggle-icon{
      float: none;
      display: flex;
      align-items: center;
      height: auto;
      background: transparent;
  }
  .header-block .menu-toggle-icon img{
      width: 26px;
      height: auto;
      display: block;
  }
  .toggle-open .header-block .menu-toggle-icon{ background: transparent; }
  #navbar.scrolled .header-block .menu-toggle,
  .sticky-header .header-block .menu-toggle{ margin-top: 0; }
}

@media (max-width: 600px){
  .header-block .logo img{ max-width: 180px; }
}

.whatsapp-float {
    position: fixed;
    width: 55px;
    height: 55px;
    right: 25px;
    bottom: 25px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    line-height: 55px;
    z-index: 9999;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: 0.3s;
}

.whatsapp-float:hover {
    color: #fff;
    transform: scale(1.1);
    text-decoration: none;
}

@media (max-width: 767px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        right: 15px;
        bottom: 15px;
        font-size: 27px;
        line-height: 50px;
    }
}