.backg{
    background:url('../img/hero-banner.webp')no-repeat;
    background-size: 100%;
    background-position: top center;
    height: 760px;
        display: flex;
    align-items: center;
}

/* Height */
.h10{height:10px;}
.h11{height:11px;}
.h12{height:12px;}
.h13{height:13px;}
.h14{height:14px;}
.h15{height:15px;}
.h16{height:16px;}
.h17{height:17px;}
.h18{height:18px;}
.h19{height:19px;}
.h20{height:20px;}
.h21{height:21px;}
.h22{height:22px;}
.h23{height:23px;}
.h24{height:24px;}
.h25{height:25px;}
.h26{height:26px;}
.h27{height:27px;}
.h28{height:28px;}
.h29{height:29px;}
.h30{height:30px;}
.h31{height:31px;}
.h32{height:32px;}
.h33{height:33px;}
.h34{height:34px;}
.h35{height:35px;}
.h36{height:36px;}
.h37{height:37px;}
.h38{height:38px;}
.h39{height:39px;}
.h40{height:40px;}
.h41{height:41px;}
.h42{height:42px;}
.h43{height:43px;}
.h44{height:44px;}
.h45{height:45px;}
.h46{height:46px;}
.h47{height:47px;}
.h48{height:48px;}
.h49{height:49px;}
.h50{height:50px;}
.h51{height:51px;}
.h52{height:52px;}
.h53{height:53px;}
.h54{height:54px;}
.h55{height:55px;}
.h56{height:56px;}
.h57{height:57px;}
.h58{height:58px;}
.h59{height:59px;}
.h60{height:60px;}
.h61{height:61px;}
.h62{height:62px;}
.h63{height:63px;}
.h64{height:64px;}
.h65{height:65px;}
.h66{height:66px;}
.h67{height:67px;}
.h68{height:68px;}
.h69{height:69px;}
.h70{height:70px;}
.h71{height:71px;}
.h72{height:72px;}
.h73{height:73px;}
.h74{height:74px;}
.h75{height:75px;}
.h76{height:76px;}
.h77{height:77px;}
.h78{height:78px;}
.h79{height:79px;}
.h80{height:80px;}
.h81{height:81px;}
.h82{height:82px;}
.h83{height:83px;}
.h84{height:84px;}
.h85{height:85px;}
.h86{height:86px;}
.h87{height:87px;}
.h88{height:88px;}
.h89{height:89px;}
.h90{height:90px;}
.h91{height:91px;}
.h92{height:92px;}
.h93{height:93px;}
.h94{height:94px;}
.h95{height:95px;}
.h96{height:96px;}
.h97{height:97px;}
.h98{height:98px;}
.h99{height:99px;}
.h100{height:100px;}

/* Width */
.w10{width:10px;}
.w11{width:11px;}
.w12{width:12px;}
.w13{width:13px;}
.w14{width:14px;}
.w15{width:15px;}
.w16{width:16px;}
.w17{width:17px;}
.w18{width:18px;}
.w19{width:19px;}
.w20{width:20px;}
.w21{width:21px;}
.w22{width:22px;}
.w23{width:23px;}
.w24{width:24px;}
.w25{width:25px;}
.w26{width:26px;}
.w27{width:27px;}
.w28{width:28px;}
.w29{width:29px;}
.w30{width:30px;}
.w31{width:31px;}
.w32{width:32px;}
.w33{width:33px;}
.w34{width:34px;}
.w35{width:35px;}
.w36{width:36px;}
.w37{width:37px;}
.w38{width:38px;}
.w39{width:39px;}
.w40{width:40px;}
.w41{width:41px;}
.w42{width:42px;}
.w43{width:43px;}
.w44{width:44px;}
.w45{width:45px;}
.w46{width:46px;}
.w47{width:47px;}
.w48{width:48px;}
.w49{width:49px;}
.w50{width:50px;}
.w51{width:51px;}
.w52{width:52px;}
.w53{width:53px;}
.w54{width:54px;}
.w55{width:55px;}
.w56{width:56px;}
.w57{width:57px;}
.w58{width:58px;}
.w59{width:59px;}
.w60{width:60px;}
.w61{width:61px;}
.w62{width:62px;}
.w63{width:63px;}
.w64{width:64px;}
.w65{width:65px;}
.w66{width:66px;}
.w67{width:67px;}
.w68{width:68px;}
.w69{width:69px;}
.w70{width:70px;}
.w71{width:71px;}
.w72{width:72px;}
.w73{width:73px;}
.w74{width:74px;}
.w75{width:75px;}
.w76{width:76px;}
.w77{width:77px;}
.w78{width:78px;}
.w79{width:79px;}
.w80{width:80px;}
.w81{width:81px;}
.w82{width:82px;}
.w83{width:83px;}
.w84{width:84px;}
.w85{width:85px;}
.w86{width:86px;}
.w87{width:87px;}
.w88{width:88px;}
.w89{width:89px;}
.w90{width:90px;}
.w91{width:91px;}
.w92{width:92px;}
.w93{width:93px;}
.w94{width:94px;}
.w95{width:95px;}
.w96{width:96px;}
.w97{width:97px;}
.w98{width:98px;}
.w99{width:99px;}
.w100{width:100px;}

.w-10{width:10%;}
.w-11{width:11%;}
.w-12{width:12%;}
.w-13{width:13%;}
.w-14{width:14%;}
.w-15{width:15%;}
.w-16{width:16%;}
.w-17{width:17%;}
.w-18{width:18%;}
.w-19{width:19%;}
.w-20{width:20%;}
.w-21{width:21%;}
.w-22{width:22%;}
.w-23{width:23%;}
.w-24{width:24%;}
.w-25{width:25%;}
.w-26{width:26%;}
.w-27{width:27%;}
.w-28{width:28%;}
.w-29{width:29%;}
.w-30{width:30%;}
.w-31{width:31%;}
.w-32{width:32%;}
.w-33{width:33%;}
.w-34{width:34%;}
.w-35{width:35%;}
.w-36{width:36%;}
.w-37{width:37%;}
.w-38{width:38%;}
.w-39{width:39%;}
.w-40{width:40%;}
.w-41{width:41%;}
.w-42{width:42%;}
.w-43{width:43%;}
.w-44{width:44%;}
.w-45{width:45%;}
.w-46{width:46%;}
.w-47{width:47%;}
.w-48{width:48%;}
.w-49{width:49%;}
.w-50{width:50%;}
.w-51{width:51%;}
.w-52{width:52%;}
.w-53{width:53%;}
.w-54{width:54%;}
.w-55{width:55%;}
.w-56{width:56%;}
.w-57{width:57%;}
.w-58{width:58%;}
.w-59{width:59%;}
.w-60{width:60%;}
.w-61{width:61%;}
.w-62{width:62%;}
.w-63{width:63%;}
.w-64{width:64%;}
.w-65{width:65%;}
.w-66{width:66%;}
.w-67{width:67%;}
.w-68{width:68%;}
.w-69{width:69%;}
.w-70{width:70%;}
.w-71{width:71%;}
.w-72{width:72%;}
.w-73{width:73%;}
.w-74{width:74%;}
.w-75{width:75%;}
.w-76{width:76%;}
.w-77{width:77%;}
.w-78{width:78%;}
.w-79{width:79%;}
.w-80{width:80%;}
.w-81{width:81%;}
.w-82{width:82%;}
.w-83{width:83%;}
.w-84{width:84%;}
.w-85{width:85%;}
.w-86{width:86%;}
.w-87{width:87%;}
.w-88{width:88%;}
.w-89{width:89%;}
.w-90{width:90%;}
.w-91{width:91%;}
.w-92{width:92%;}
.w-93{width:93%;}
.w-94{width:94%;}
.w-95{width:95%;}
.w-96{width:96%;}
.w-97{width:97%;}
.w-98{width:98%;}
.w-99{width:99%;}
.w-100{width:100%;}

.radius10{border-radius: 10px;}
.radius15{border-radius: 15px;}
.radius20{border-radius: 20px;}
.radius30{border-radius: 30px;}
.radius50{border-radius: 50px;}
.cardbg{
    background:var(--cardbg);
}
.radiusangle1{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: rgba(60, 64, 67, 0.1) 0px 0px 0px 0px, rgba(60, 64, 67, 0.10) 0px 0px 5px 0px;
}
.radiusangle2{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: rgba(60, 64, 67, 0.1) 0px 0px 0px 0px, rgba(60, 64, 67, 0.10) 0px 0px 5px 0px;
}
.radiusangle3{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 5px;
    box-shadow: rgba(60, 64, 67, 0.1) 0px 0px 0px 0px, rgba(60, 64, 67, 0.10) 0px 0px 5px 0px;
}
.radiusangle4{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 20px;
    box-shadow: rgba(60, 64, 67, 0.1) 0px 0px 0px 0px, rgba(60, 64, 67, 0.10) 0px 0px 5px 0px;
}
.decorplus::after{
    content: "";
    background:url('../img/plus.png');
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: -0.4%;
    left: 12.8%;
    width: 75%;
    height: 75%;
}
.gred{
    background: #FFFFFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 250, 246, 1) 100%);
}
.gredbg{
    background: #FFFFFF;
background: linear-gradient(145deg, rgba(255, 255, 255, 1) 50%, rgba(186, 186, 186, 1) 100%);
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}



/* =========================================================
   PRODUCTS
   ========================================================= */
.products-section{background:var(--color-cream);}
.product-tabs{display:flex; justify-content:center;}

.sup{
     gap:12px; margin:30px 0 36px;
    border: 1px solid #F0F0F0;
    width: fit-content;
    border-radius: 50px;
}

.tab-btn{
  background:var(--color-white); border:2px solid var(--color-border);
  padding:10px 35px; border-radius:100px; font-weight:500; cursor:pointer;
  font-family:var(--font-display); color:var(--primary);
}
.tab-btn.active{background: var(--primary);
    border-color: var(--primary);color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.product-card{
  background:#F6F6F6; border-radius:10px;
  padding:20px; text-align:center;  
  box-shadow:0 10px 30px rgba(27,42,65,.05);
  position:relative;
      max-height: 350px;
      min-height: 350px;
      height: 350px;
}
.badge-tag{
      position: absolute;
    top: 70px;
    right: -15px;
    transform: rotate(270deg);
    color: var(--primary);
    font-size: 12px;
}
}
.product-thumb{margin:20px 0;}
.product-card h6{font-size:16px; margin-bottom:6px;}
.product-card .price{ font-size:20px; font-weight:600; color:var(--primary); margin:0;}

.shadimg::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100px;
    height: 146px;
    transform: rotate(10deg);
    filter: blur(6px);
    background: #0000002e;
    background-size: 100%;
    right: 29px;
    top: 56px;
}

.z1{
    z-index: 1;
}
.z0{
    z-index: 0;
}
.z-1{
    z-index: -1;
}

.ctabtn{
    height: 0;
    overflow-y: hidden; 
}

.pro-wraper{
    transition: 0.35s ease-in-out;
}

.product-card:hover .pro-wraper{
    scale:0.9;
    transition: 0.35s ease-in-out;
    object-position: top;
    margin-top: -20px;
}
/*.product-card:hover .ctabtn{  
    transition: all 0.35s linear 0.3s;
    height: 30px;  
}*/


.product-card:hover .scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 
            height: 30px; 
}
 
/* ----------------------------------------------
 * Generated by Animista on 2026-7-9 15:37:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

.share-button {
    width: 130px;
    height: 30px;
    background: #ffffff;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: .1s linear;
}
 

.share-button span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #4B4B4D;
    color: #f1f1f1;
    text-align: center;
    line-height: 30px;
    z-index: 999;
    transition: .6s linear;
    border-radius: 40px;
    font-size: 12px;
    font-family: 'Aeonik';
}

.share-button:hover span {
  transform: translateX(-100%);
   
}

.share-button a {
  flex: 1; /* flex-grow | flex shrink | flex basis */
  font-size: 14px;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: 0.3s linear;
}

.share-button:hover a {
  opacity: 1;
  transform: translateX(0);
}

.share-button a:nth-of-type(1) {
  transition-delay: 1s;
}

.share-button a:nth-of-type(2) {
  transition-delay: 0.8s;
}

.share-button a:nth-of-type(3) {
  transition-delay: 0.6s;
}

.share-button a:nth-of-type(4) {
  transition-delay: 0.4s;
}


 .whyback{
    background: url('../img/whyus.webp');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: #EFEFEF;

 }
 .bgdark{
    background: #00000040;
 }
/* .glass{
    background: #fff7;
    filter: blur(11px);
    width: 52%;
    height: 47%;
    border-radius: 10px;
    border: 1px solid #fff3;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 12%;
 }*/

.glass{
    position: absolute;
    left: 0;
    top: 12%;
    width: 52%;
    height: 47%;
    overflow: hidden;

    /* Glass Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0 12px 12px 0;

    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        inset 0 1px 1px rgba(255,255,255,0.35);

    z-index: 1;
}
 .stats-strip {
    grid-template-columns: 1fr 1fr 1fr 1fr;
 }
  .stats-strip span{
    color:var(--primary);
    font-size: 40px;
 }

 .z1{
    z-index: 1;
 }
  .z2{
    z-index: 2;
 }
.teer::before{
    content: "";
    background: url(../img/teer.svg) no-repeat;
    background-size: 100%;
    width: 60px;
    height: 30px;
    position: absolute;
    left: -8%;
    top: 46%;
}
.teer2::before{
    content: "";
    background: url(../img/teer.svg) no-repeat;
    background-size: 100%;
    width: 60px;
    height: 30px;
    position: absolute;
    left: -8%;
    top: 48%;
    transform: rotateX(180deg);
}



/*-----------logo slider-----------*/
@keyframes slides {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.logos {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.logo_items{
  display: inline-flex;
  align-items: center;
  min-width: 100%;
  gap: 6rem;
  padding: 0 10px;
  justify-content: space-around;
  animation: 100s slides linear infinite;
}

.logos--reverse .logo_items {
  animation-direction: reverse;
  margin-top: 15px;
}

.logo_items img{ height: 100px; }

/*-----------logo slider-----------*/




.logos{
    position: relative;
    overflow: hidden;
}

.logos::before,
.logos::after{
    content: "";
    position: absolute;
    top: 0;
    width: 120px;       /* Fade width */
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.logos::before{
    left: 0;
    background: linear-gradient(
        to right,
        #fdf2ec 0%,
        rgba(253,242,236,1) 20%,
        rgba(253,242,236,0) 100%
    );
}

.logos::after{
    right: 0;
    background: linear-gradient(
        to left,
        #fdf2ec 0%,
        rgba(253,242,236,1) 20%,
        rgba(253,242,236,0) 100%
    );
}





/*----------marquee slides----------*/
#marquee {
    margin: -25px 0 -50px;
    width: 100%;
}

#marquee .container {
    overflow: hidden;
    width: 100%;
}

#marquee .pic-container {
    display: flex;
    animation: marquee 10s infinite linear;
}

/* #marquee:hover {
    animation-play-state: paused;
} */

#marquee .pic-container .pic {
    flex-basis: 20%;
    flex-shrink: 0;
}

#marquee img {
    width: 100%;
    object-fit: cover;
    border: 1px solid rgba(238, 231, 231, 0.9);
}

@media (max-width: 1024px) {
    #marquee .pic-container .pic {
        flex-basis: 25%;
    }
}

@media (max-width: 768px) {
    #marquee .pic-container .pic {
        flex-basis: 33.33%;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 1024px) {
    @keyframes marquee {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-125%);
        }
    }
}

@media (max-width: 768px) {
    @keyframes marquee {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-186.65%);
        }
    }
}

.revs{
    transform: rotateX(180deg);
}


/*----------marquee slides----------*/


.testi{
    padding: 7px 15px;
    background: #F8F8F8;
    border-radius: 50px;
    width: fit-content;
}
.topmar{
    margin-top: -230px;
}


/* =========================================================
   INSIGHTS / BLOG
   ========================================================= */
 
.blog-card{background:var(--white); border-radius:20px; overflow:hidden; height:100%; box-shadow:0 10px 30px rgba(27,42,65,.05);}
.blog-thumb{aspect-ratio:5/3; overflow:hidden;}
.blog-thumb svg{width:100%; height:100%;}
.blog-body{padding:22px;}
.blog-body h6{font-size:16px; font-weight: 700}
.blog-body p{font-size:13px; color: #8f8f8f;}
.blog-meta{display:flex; align-items:center; justify-content:space-between; margin-top:16px;}
.blog-meta a{color:var(--primary); font-weight:500; font-size:14px; text-decoration: none;}
.blog-meta span{font-size:12px; color:#72787E;}
.insight-btn{
        border: 2px solid #F9F9F9;
    color: var(--primary);
    padding: 7px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
}
.insight-btn:hover{
        border: 2px solid var(--primary);
        background: var(--primary);
    color: #fff;
    padding: 7px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
}
.ctaract{
    background: url('../img/ctaract.webp')no-repeat;
    background-color: #fff;
    background-size: 58%;
    background-position: left center;
    height: 100px;
    width: 100%;
    border-left: 0px !important;
    border-bottom: 0px !important;
    border: 1px solid #f5f5f5;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 5px;
}
.socialicons i{
    font-size: 28px;
    color: var(--black);
    opacity: 0.8;
    margin: 0 15px;
}
.socialicons i:hover{
    opacity: 1;
    transition: 0.3s ease;
    color:var(--primary);
}

.circlecta span{
    border: 1px dashed var(--black);
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50px;
}

.circlecta i{
    transform: rotate(235deg); 
    position: absolute;
}
.circlecta{
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s ease;
}
 
.fotcta:hover .circlecta{
    scale: 1.1; 
}
.fotcta:hover .circlecta span{
    border-color: var(--primary);
}
.fotcta:hover .circlecta i{
    scale: 1.1;
    color: var(--primary);
}
.fotcta:hover p{
    color: var(--primary);
}
.fotcta{
    cursor: pointer;
}
.rotate-center {
    -webkit-animation: rotate-center 4s linear infinite reverse ;
            animation: rotate-center 4s linear infinite reverse ;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-7-10 13:14:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.bboth::before{
    content: "";
    background: url('../img/liner.png')no-repeat;
    position: absolute;
    top: 0; 
    left: 8%;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.bboth::after{
    content: "";
    background: url('../img/liner.png')no-repeat;
    position: absolute;
    top: 0; 
    right: -80%;
    width: 100%;
    height: 100%;
    z-index: -1;
}


.bggrey{
    background: #F4F4F4;
}
.shad{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}