/* 1a. Containers */





/* 1b. Colors */









/* 1c. Typography */


























































 



















form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
    background-color:;
    color:;
    border-color:;
}

/* 1e. Forms */















form{
    background-color: 

  
  
    
  


  rgba(254, 254, 254, 0.0)

;
}
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
    background-color:

  
  
    
  


  rgba(254, 254, 254, 1.0)

;
    border:px solid ;
    border-radius:px;
    border-color: 

  
  
    
  


  rgba(229, 232, 235, 1.0)

;
    color: 

  
  
    
  


  rgba(122, 122, 122, 1.0)

;
}

form input[type=text]::placeholder,
form input[type=email]::placeholder,
form input[type=password]::placeholder,
form input[type=tel]::placeholder,
form input[type=number]::placeholder,
form input[type=file]::placeholder,
form select::placeholder,
form textarea::placeholder{
    color: #7a7a7a
}

form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
form input[type=file]:focus,
form select:focus,
form textarea:focus {
    color:;
    border: 1px solid 

  
  
    
  


  rgba(88, 37, 220, 1.0)

;
}

.hs-form-booleancheckbox label span{
    color: #7a7a7a;
}


/* 1h. Site footer */
























.content-wrapper, 
.container{
    padding: 0 0px 0px;
}
.custom-container,
.container{
    margin: auto;
    padding: 0 16px;
}
@media screen and (min-width: 768px){
    .content-wrapper,
    .dnd-section > .row-fluid, 
    .container{
        max-width: 750px;
    }
    .custom-container{
        max-width: 750px;
    }
}


@media screen and (min-width: 992px){
    .content-wrapper,
    .dnd-section > .row-fluid, 
    .container{
        max-width: 970px;
    }
    .custom-container{
        max-width: 970px;
    }
}

@media screen and (min-width: 1200px){
    .content-wrapper,
    .dnd-section > .row-fluid, 
    .container{
        max-width: 1170px;
    }
    .custom-container{
        max-width: 1170px;
    }
}

@media screen and (min-width: 1490px){
    .content-wrapper,
    .dnd-section > .row-fluid, 
    .container{
        max-width: 1240px;
    }
    .custom-container{
        max-width: 1240px;
    }
}

.dnd-section,
.content-wrapper--vertical-spacing {
    padding: 100px 0px;
}






mark svg,
mark svg path,
.benefits-home-outer .small-tit h5.sup-title span,
.benefits-home-outer .benefits .benefit .icon svg,
.testimonial-title h5 span,
.custom-card-with-icon .top-content-inner .title-area-inner h5.sub-title span,
.rec-blog-top .subtitle h5 span,
.custom-testimonial-slider .item.testimonial-item .content h4,
.cm-port-topic ul li.active a,
.marquee-outer:after,
.marquee-v3,
.benefits-home-outer .list-style li:after,
.custom-team-mem .content-inner h5 span,
.about-services-v2 .top-sec .top-sec-left h5:before,
.cm-accordion ul.accordionjs li.is-open .acc_head h6,
.cm-port-topic ul li a:hover:before,
.mo-highlight-style2,
header.header .sli-header-menu .hs-menu-wrapper>ul li.active-branch > a,
.marquee-outer .mo-marquee.tpl2 .marquee-title,
.cm-two-col-area li.acc_section.active .acc_head h6,
.cm-pricing .pricing-card-wrapper .pricing-card ul.content li .icon i:before,
.cm-pricing .pricing-card-wrapper .pricing-card .title,
.cm-accordion ul.accordionjs .active .acc_head h6,
.cm-accordion ul.accordionjs li.active>.acc_head span.accordion-icon:before
{
    color: 

  
  
    
  


  rgba(98, 98, 98, 1.0)

 !important;
    fill: 

  
  
    
  


  rgba(98, 98, 98, 1.0)

 !important;
    stroke: 

  
  
    
  


  rgba(98, 98, 98, 1.0)

 !important;
    border-color:  

  
  
    
  


  rgba(98, 98, 98, 1.0)

 !important;
}

.custom-banner-section .banner-populated .banner-content .subtitle h5,
.cm-pricing .content-inner h5.sty1:before{
    border-color: 

  
  
    
  


  rgba(98, 98, 98, 1.0)

 !important
}

header.header .sli-bg-header-icon:after,
.cm-logo-slider .logo-section ul.slick-dots li button:before,
.team-card-section .sli-team .team-social span a,
.rec-blog-posts .rec-post .grid-mid-post:hover .format-post .content-post a.cat-name,
.testimonial-content ul.slick-dots li.slick-active button,
.benefits-home-outer .benefits .benefit .icon svg,
.test-bot-support,
.about-services-v2 .top-sec .top-sec-left h5:before,
.about-services-v2 .top-sec .top-sec-left h5:after,
.wwo-outer .list-style.list-style4 li h4:before,
.wwo-outer .list-style.list-style4 li h4:after,
.custom-port-list .project-item.category-31 .content-block h4,
.blog-post-main .blog-post-banner .content-wrapper .tag a,
.blog-post-main .category a,
.about-cards-outer .about-cards-inner .content-inner .sub-title h5,
.card-with-icon-wrapper .card-item .card-item-content:hover,
.blog-list-outer.dnd_area2-module-1 .blog-list-inner .blog-cards .blog-card:hover .tag a,
.blog-pagination a.active,
.blog-list-modern .blogs-modern .list-outs .overlay-post .caption p.cat-name a,
.blog-index__post .grid-post:hover a.cat-name,
.blog-topic-list ul li a:hover,
.card-with-icon-wrapper .card-item .card-item-content .icon-wrapper:before,
.blog-post-main .post-categories-list a.blog-index__post-tag:hover,
a#back-to-top:before,
.cm-two-col-area .accordion-area ul li .acc_head h6:hover:after,
.custom-counter-outer,
.rec-content-items-v2 .rec_post-item-v2 .date-wrapper .date,
.rec-content-items-v2 .rec_post-item-v2 .post.post-list:hover:after,
.related-service .card-number,
.cm-pricing label.switch .slider:before,
.cm-pricing .pricing-card-wrapper .pricing-card.active-ppular a,
.cm-pricing .pricing-card.active-ppular span.popular,
.marquee-v3,
.marquee-outer:after,
.cm-pricing .content-inner h5.sty1:after,
.cm-pricing .content-inner h5.sty1:before{
    background-color: 

  
  
    
  


  rgba(98, 98, 98, 1.0)

!important;
}

.custom-card-with-icon .top-content-inner .title-area-inner h5.sub-title2:before,
.cm-two-col-area .top-content h5:before,
.mo-title-box.title-box-style-3.text-left .header-wrapper h5:before,
.blog-list-outer.dnd_area2-module-1 .blog-list-inner .small-title h5 span:before{
    background: linear-gradient(90deg,

  
  
    
  


  rgba(98, 98, 98, 1.0)

,transparent) !important;
}

.firm-service-container .card:hover .inner-card{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, 

  
  
    
  


  rgba(98, 98, 98, 1.0)

 100%) !important;
}

.related-service .card:hover .inner-cards::after{
    background: -webkit-linear-gradient(0, 

  
  
    
  


  rgba(98, 98, 98, 1.0)

 0, #e6eaef 77%);
}

body {
    font-size: 16px;
    color: 

  
  
    
  


  rgba(30, 30, 30, 1.0)

;
    font-weight: 400;
    font-family: Jost;
    background-color: 

  
  
    
  


  rgba(254, 254, 254, 0.0)

;
}

body.active-dark {
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
    color: #ffffff !important;
}

body.active-dark p,
body.active-dark h1,
body.active-dark h2, 
body.active-dark h3, 
body.active-dark h4,
body.active-dark h5,
body.active-dark h6 {
    color: #fff !important;
}
body.active-dark .content {
    color: #fff;
}
.active-dark .custom-card-with-icon .card-item-content {
    background: #fffFFF12;
    border-color: rgba(255,255,255,.1);
}

.active-dark .custom-card-with-icon .bottom-c a {
    color: #fff;
}

.active-dark .custom-card-with-icon .service-v2-box .content-inner {
    background: #fffFFF12;
    border: 1px solid rgba(255, 255, 255, .1);
}
.active-dark .cm-service-section .sli-serv-image-box,
.active-dark .custom-counter-outer{
    background: #fffFFF12 !important;
}


@media (max-width: 767px){
    body{
        font-size: 14px
    }
}

.mainHeaderMiddle .header__menu .hs-menu-wrapper > ul > li > a,
.mainHeaderMiddle li.hs-menu-item a,
.header__mobileMenu .hs-menu-wrapper > ul li a{
    color:  #FFFFFF;
}
.header--wrapper .mainHeader{
    background-color: #000000;
}
/* Paragraphs */

body .body-wrapper p {
    font-size: 16px;
    color: #1e1e1e;
    font-weight: 400;
    font-family: Jost;
    line-height: 1.5;
}


body.darkModeOn .body-wrapper p {
    color: 

  
  
    
  


  rgba(#null, 1)


}

@media screen and (max-width: 767px){
    body .body-wrapper p {
        font-size: 14px;
        line-height: 1.5    
    }
}
/* Anchors */

a {
    color: 

  
  
    
  


  rgba(98, 98, 98, 1)

;
}

a:hover,
a:focus,
a:active {
    color: 

  
  
    
  


  rgba(135, 206, 235, 1)

;
}

/* Headings */

.h1, h1 {
    font-family: Jost;
    font-size: 54px;
    color: #14133b;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    text-decoration: none;
}
@media (max-width: 1200px){
    .h1, h1{
       font-size: 32px;
    }
}
@media (max-width: 767px){
    .h1, h1{
        font-size: 25px;
        line-height: 1.5;

    }
}

.h2 ,h2 {
    font-family: Jost;
    font-size: 42px;
    color: #14133b;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    text-decoration: none;
}

@media (max-width: 767px){
    .h2 ,h2{
        font-size: 24px;
        line-height: px
    }
}


.h3, h3 {
    font-family: Jost;
    font-size: 30px;
    color: #14133b;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    text-decoration: none;
}

@media (max-width: 767px){
    .h3, h3{
        font-size: 14px;
        line-height: px
    }
}


.h4, h4 {
    font-family: Jost;
    font-size: 24px;
    color: #14133b;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    text-decoration: none;
}

@media (max-width: 767px){
    .h4, h4{
        font-size: 14px;
        line-height: px
    }
}


.h5, h5 {
    font-family: Jost;
    font-size: 20px;
    color: #14133b;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    text-decoration: none;
}

@media (max-width: 767px){
    .h5, h5{
        font-size: 14px;
        line-height: px
    }
}


.h6, h6 {
    font-family: Jost;
    font-size: 18px;
    color: #14133b;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    text-decoration: none;
}

@media (max-width: 767px){
    .h6, h6{
        font-size: 14px;
        line-height: px
    }
}


/* Blockquote */

blockquote {
    border-left-color: 

  
  
    
  


  rgba(20, 19, 59, 1.0)

;
}






/* 1d. Buttons */














/* 1d. Secondary Buttons */














.primary-btn,
.primary,.hs-btn,
.hs-primary-btn{
    background-color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    border: 0px solid 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    border-radius: 10px;
    color: 

  
  
    
  


  rgba(254, 254, 254, 1.0)

;
    padding: 12px 24px;
    display: inline-block;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: .3s ease;
    font-weight: 600;
}
.primary-btn .button-icon svg path{  
    fill: #ffffff;
}

.primary:hover,
.hs-btn:hover,
.primary-btn:hover,
.hs-primary-btn:hover,
.primary-btn:focus,
.hs-primary-btn:focus{
    background-color: 

  
  
    
  


  rgba(210, 239, 154, 1.0)

;
    border-color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
}
.primary-btn:hover .button-icon svg path{  
    fill: #000000;
}
button:active,
.button:active {
    background-color: rgba(71, 71, 71, 0.0);
    border-color: ;
    color: 

  
  
    
  


  rgba(254, 254, 254, 1.0)

;
}


.secondary-btn,
.hs-sec-button,
.secondary-button,
.hs-secondary-btn{
    background-color: 

  
  
    
  


  rgba(254, 254, 254, 0.0)

;
    border: 1px solid 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    border-radius: 10px;
    color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    padding: 12px 24px;
    font-size: 18px;
    line-height: 1.5;
    text-decoration: none;
    transition: .3s ease;
    font-weight: 600;
}
.secondary-btn .button-icon svg path{  
    fill: #000000;
}
.secondary-btn:hover,
.hs-sec-button:hover,
.secondary-btn:hover,
.hs-secondary-btn:hover{
    background-color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    border-color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}
.secondary-btn:hover .button-icon svg path{  
    fill: #ffffff;
}





form,
.submitted-message {
    font-size: 16px;
    color: #1e1e1e;
    font-weight: 400
}

/* Form title */

h3.form-title {
    background-color: 

  
  
    
  


  rgba(254, 254, 254, 0.0)

;
    color: 

  
  
    
  


  rgba(9, 17, 32, 1.0)

;
}

/* Form label */

form label {
    color: 

  
  
    
  


  rgba(122, 122, 122, 1.0)

;
}

/* Form help text */

form legend {
    color: 

  
  
    
  


  rgba(58, 58, 58, 1.0)

;
}


/* Form placeholder text */

::-webkit-input-placeholder {
    color: #1e1e1e;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
::placeholder,
.hs-fieldtype-date .input .hs-dateinput:before {
    color: #1e1e1e;
}

/* Date picker */

.fn-date-picker td.is-selected .pika-button {
    background: 

  
  
    
  


  rgba(30, 30, 30, 1.0)

;
}

.fn-date-picker td .pika-button:hover {
    background-color: 

  
  
    
  


  rgba(30, 30, 30, 1.0)

 !important;
}

.fn-date-picker td.is-today .pika-button {
    color: 

  
  
    
  


  rgba(30, 30, 30, 1.0)

;
}

/* Submit button */

form input[type=submit],
form .hs-button {
    background-color: 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    border: 0px solid 

  
  
    
  


  rgba(31, 31, 31, 1.0)

;
    border-radius: 10px;
    color: 

  
  
    
  


  rgba(254, 254, 254, 1.0)

;
    padding: 12px 24px;
}

form input[type=submit]:active,
form .hs-button:active {
    background-color: rgba(#null, 0.0);
    border-color: ;
    color: 

  
  
    
  


  rgba(254, 254, 254, 1.0)

;
}





table {
    background-color: ;
    border-color: ;
}

th,
td {
    border-color: ;
    color: ;
}

thead th,
thead td {
    background-color: ;
    border-bottom-color: ;
    color: ;
}

tfoot td {
    background-color: ;
    color: ;
}
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select{
    min-height: 50px;
    outline: none;
}
form textarea{
   min-height: 120px;
}


















header.header,
.sil-header,
header.header .sil-header-inner{
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

header.header .sli-header-menu .hs-menu-wrapper>ul>li>a{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

header.header .sli-header-menu .hs-menu-wrapper>ul>li:hover>a{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header-menu .hs-menu-wrapper>ul>li>a:hover{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header-menu .hs-menu-wrapper ul ul li a{
    color: 

  
  
    
  


  rgba(#null, 1)


}

.header-menu .hs-menu-wrapper ul ul li a:hover{
    color: 

  
  
    
  


  rgba(#null, 1)


}

header.header .sli-header-menu .hs-menu-wrapper>ul>li>ul{
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header-menu .hs-menu-wrapper ul ul li:hover{
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header-text h6{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header-text h6 span a,
header.header .sli-menu-others .cont-us-sec span{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

header.header .sli-header-menu .hs-menu-wrapper>ul>li span.l-dropdown-icon{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

header.header .sli-header-menu .hs-menu-wrapper>ul>li> ul >li > a {
    color:

  
  
    
  


  rgba(#null, 1)


}

header.header .sli-header-menu .hs-menu-wrapper>ul>li> ul >li > a:hover {
    color:

  
  
    
  


  rgba(#null, 1)


}

header.header .sli-header-menu .hs-menu-wrapper>ul>li> ul >li:hover {
    background-color:

  
  
    
  


  rgba(#null, 1)


}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover>.hs-menu-children-wrapper{
   z-index: 10;
    pointer-events: auto;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children>.hs-menu-children-wrapper{
   z-index: 0;
    pointer-events: none;
}
.mainHeaderRight .searchIcon i,
.mainHeaderRight .actionList i{
    color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}







footer.footer,
footer.footer.sty1 .footer-bottom:before{
    background-color: 

  
  
    
  


  rgba(0, 0, 0, 1.0)

;
}
.footer .social-circle-style .mo-svg-circle circle:first-child{
    stroke: 

  
  
    
  


  rgba(#null, 1)

;
}
.footer ul.social-circle-style li a:hover circle:first-child{
    stroke: 

  
  
    
  


  rgba(#null, 1)

;
}

.footer .social-circle-style .mo-svg-circle circle{
    fill: 

  
  
    
  


  rgba(#null, 1)

;
}
.footer ul.social-circle-style li a:hover circle{
    fill: 

  
  
    
  


  rgba(#null, 1)

;
}
.footer ul.social-circle-style li a i{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
.footer ul.social-circle-style li a:hover i{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

footer.footer a{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
footer .col-lg-6.sec-2 .hs-menu-wrapper > ul > li > a:first-child,
footer .col-lg-6 .footer-widget-2 h4,
footer .support-sec h4{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
footer.footer .footer-bottom .privacy-menu ul li a,
footer .col-lg-6.sec-2 .hs-menu-wrapper > ul ul li a{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
footer.footer .footer-bottom .privacy-menu ul li a:hover,
footer .col-lg-6.sec-2 .hs-menu-wrapper > ul ul li a:hover{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
footer.footer .footer-bottom a:hover{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

footer.footer a:hover{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

body .body-wrapper .footer p{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
footer.footer .footer-bottom a{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
.middle-footer p{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}
.footer-top p{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

.bottom-footer p{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

.bottom-footer p a{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

.bottom-footer p a:hover{
    color: 

  
  
    
  


  rgba(#null, 1)

;
}

footer .footer-button a{
    background-color: ;
    color: ;
}

footer .footer-button a:hover{
    background-color: ;
    color: ;
}

footer .footer-social a{
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
    border-color: 

  
  
    
  


  rgba(#null, 1)


}

footer .footer-social a:hover{
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
    border-color: 

  
  
    
  


  rgba(#null, 1)


}









.blog-tag-filter__menu-link,
.blog-post__tag-link,
.blog-card__tag-link,
.blog-post__author-name,
.blog-card__title a {
    color: #1e1e1e;
}

.blog-card__tag-link:hover,
.blog-card__title a:hover,
.blog-tag-filter__menu-link:hover,
.blog-post__tag-link:hover,
.blog-post__author-name:hover,
.blog-card__tag-link:focus,
.blog-card__title a:focus,
.blog-tag-filter__menu-link:focus,
.blog-post__tag-link:focus,
.blog-post__author-name:focus {
    color: 

  
  
    
  


  rgba(135, 206, 235, 1)

;
}

.blog-card__tag-link:active,
.blog-card__title a:active,
.blog-tag-filter__menu-link:active,
.blog-post__tag-link:active,
.blog-post__author-name:active {
    color: 

  
  
    
  


  rgba(135, 206, 235, 1)

;
}

.blog-tag-filter__menu-link--active-item:after {
    background-color: #1e1e1e;
}

.blog-pagination__link {
    color: #1e1e1e;
}

.blog-pagination__link--active:after,
.blog-pagination__prev-link:after,
.blog-pagination__next-link:after {
    background-color: #1e1e1e;
}

.blog-post__title {
    color: #14133b;
    font-family:Jost;
    font-size: 54px;
    font-weight: 700;
}

.blog-post__author {
    background-color: #14133b;
}











body.stop-scrolling{
  overflow-y:hidden;
}
.card__price {
    font-family: Jost
        font-size: 30px;
    color: #14133b;
    font-weight: 700
}
.product-cards .card:hover .hover-img{
   opacity: 1;
   pointer-events: auto;
}
.product-cards .card .product-price{
   display: flex;
   grid-gap: 12px;
   flex-wrap: wrap;
   align-items: center;
   transition: .5s ease;
   transform: translateY(0px);
}

.product-cards .product-img{
   width: 100%;
   height: auto;
}
.product-cards .img-figure{
   margin: 0px;
   display: flex;
   overflow: hidden;
   position: relative;
   border-radius: 16px;
}
.product-cards .section-title{
   text-align: center;
}
.product-cards .hover-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: auto;
    transition: .5s ease;
}
.product-cards .title-swatches{
   margin-top: 12px;
   position: relative;
}
 .product-cards .title-swatches .product-name,
 .product-cards .product-price .price,
 .product-cards .product-price .strike-price
{
   margin-bottom: 8px;
}
 .product-cards .card .product-price{
   display: flex;
   grid-gap: 12px;
   flex-wrap: wrap;
   align-items: center;
   transition: .5s ease;
   transform: translateY(0px);
}
 .product-cards .card:hover .product-price{
   transform: translateY(20px);
}
 .product-cards .card .product-name{
   opacity: 1;
   pointer-events: auto;
   transition: .5s ease;
}
 .product-cards .card:hover .product-name{
   opacity: 0;
   pointer-events: none;
}
 .product-cards .swatches-color{
   display: flex;
   grid-gap: 12px;
   flex-wrap: wrap;
   position: absolute;
   top: 0;
    left: 0;
   opacity: 0;
    pointer-events: none;
    transition: .5s ease;
}
.product-cards .card:hover .swatches-color{
    opacity: 1;
    pointer-events: auto;
}
 .product-cards .swatches-color .color{
   width: 24px;
   height: 24px;
   border: none;
   outline: 1px solid gray;
   border-radius: 50%;
    position: relative;
}
 .product-cards .swatches-color .color.active::before{
    background: #333;
    bottom: -8px;
    content: "";
    height: 4px;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    width: 60%;
}
 .product-cards .card-body{
   padding: 8px 12px 8px 8px;
}
 .product-cards .card .add-to-cart{
    position: absolute;
    right: -40px;
    top: 14px;
    transition: .5s ease;
    width: 38px;
    height: 38px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
 .product-cards .add-to-cart .cart-button > span{ display: flex; }

 .product-cards .card:hover .add-to-cart{
   right: 8px;
} 
 .product-cards .add-to-cart svg{
    width: 20px
}
 .product-cards .add-to-cart svg fill{
  fill: #222222;
}
 .product-cards .add-to-cart button{
    background: transparent;
    border: none;
}
 .product-cards .card .shop-and-view{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: .5s ease;
    transform: translateY(50px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 12px;
}
 .product-cards .card:hover .shop-and-view{
    transform: translateY(-26px);
}
 .product-cards .shop-and-view button{
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    filter: drop-shadow(1px 2px 2px #00000020);
    padding: 8px 24px;
}
.product-cards .card-wrapper{
    padding-bottom: 20px;
}
.global__swatche{
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 20px;
   min-height: 20px;
   outline-offset: 3px;
   border-radius: 50%;
   border: none;
   outline: 1px solid #22222235;
   cursor: pointer;
}
.global__swatche:active{
   outline: 1px solid #222222;
}
.global__swatche:hover{
   outline: 1px solid #22222250;
}
.global__sizes{
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 38px;
   min-height: 38px;
   outline-offset: 3px;
   border-radius: 50%;
   outline: 1px solid #22222235;
   cursor: pointer;
}
.global__sizes:active{
   background: black;
   color: white;
}
.global__sizes:hover{
   background: black;
   color: white;
}
.product-cards .featured-image img{
   width: 100%;
}
.product-cards .card p,
.product-cards .card .stars,
.product-cards .card .price
{
   margin-bottom: 6px; 
}
.product-cards .card h4,
.product-cards .card h5,
.product-cards .card h6
{
  margin-bottom: 12px;
}
.product-cards .card .swatches{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
}
form input.hs-input,
form textarea.hs-input
{
  width: 100% !important;
}
@media screen and (min-width: 1280px){
    .product-cards .product-img{
    width: 100%;
    height: 380px;
    object-fit: cover;
  }
  .product-cards .product-slide-show{
     padding: 0 20px;  
  }
}
.blog-pagination, .pagination{
    display: flex;
    background: transparent;
    border: 1px solid #f7f7f7;
    border-radius: 16px;
    flex-wrap: wrap;
    margin: 40px auto;
    padding: 18px 12px;
    width: fit-content;
}
.blog-pagination a, .pagination button{
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    height: 40px;
    transition: .5s ease;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222222;
    text-decoration: none;
}
.blog-pagination a.active, .pagination button.active{
    background: #222222 !important; 
    color: #fefefe;
}
.blog-pagination a:hover, 
.pagination button:hover{
    background: #222222; 
    color: #fefefe;
}
.pagination,
.blog-pagination,
.blog-pagination > div{
  grid-gap: 14px;
}
.blog-pagination > div {
    display: flex;
}




  

/* Observer css */
.row-fluid-wrapper{
    transition: transform .8s ease, opacity .8s cubic-bezier(0.65, 0.05, 0.36, 1);
    
       transform: translateY(32px);
    
}

.row-fluid-wrapper.in-view{
    transform: translateY(0px);
}

.hs-search-field__bar .fa-magnifying-glass{
    display: none;
}