/*
Theme Name: Besst Theme
Theme URI: www.besst-inc.com
description: Child theme for the Genesis theme
Author: Redjing Calma
Author URI: www.jhingrhed.com
Template: genesis
Version: 1.0
*/

body{margin:0px; overflow-x: hidden;}
p{margin: auto;}
 
  .glass-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius:0px;
    cursor: pointer;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.03) 100%
    );
    backdrop-filter: url(#glass);
    -webkit-backdrop-filter: url(#glass);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 2.2);
  }
  
  .glass-button:hover {
    transform: scale(1);
  }
  
  .glass-button::before {
    content: ""; 
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noise)'/></svg>");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
  }

  #headerp{
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 70%,
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0.49) 100%
      );
  }
      
  .curvebox {
    position: relative;
    z-index: 1;
  }
  


  .headshape {
    position: relative;
    z-index: 1;
  }
  
  .headshape::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fafaf5;
    border-radius: 0px 0px 20px 20px;
    transform: perspective(100px) rotateX(-3deg);
    z-index: -1; /* Puts the shape behind the text */
  }



  .curvebox::before {
    --r: 15px;
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fafaf5;
    transform: perspective(100px) rotateX(10deg);
    z-index: -1; /* Puts the shape behind the text */
    border-inline: var(--r) solid #fff;
    border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
    mask: 
    radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
    calc(-1*var(--r)) 100%/100% var(--r) repeat-x,
    conic-gradient(#000 0 0) padding-box;
  }



  .curvebox-title {
    position: relative;
    z-index: 1;
  }
  .curvebox-title::before{
    --r: 20px;
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0; bottom: 0;
    background: #fafaf5 border-box; /* border-box is needed for a gradient coloration */
    transform: perspective(100px) rotateX(173deg);
    border-inline: var(--r) solid #0000;
    border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
    mask: 
    radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
    calc(-1*var(--r)) 96%/100% var(--r) repeat-x,
  conic-gradient(#000 0 0) padding-box;

}


.curvebox-title::after {
    width: 30px;
    height: 30px;
    --r: 20px;
    content: "";
    position: absolute; 
    top: auto;
    left: 31px;
    right: auto;
    bottom: -24px;
    background: #fafaf5;
    transform: perspective(100px) rotateX(156deg);
    z-index: -1;
    border-inline: var(--r) solid #fafaf5;
    border-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0 / var(--r);
    mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000 101%) calc(-1 * var(--r)) 100% / 100% var(--r) repeat-x, conic-gradient(#000 0 0) padding-box;
}


  .curvebox-left {
    position: relative;
    z-index: 1;
  }
  .curvebox-left::before{
    --r: 15px;
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fafaf5;
    transform: perspective(100px) rotateX(25deg);
    z-index: -1; /* Puts the shape behind the text */
    border-inline: var(--r) solid #fafaf5;
    border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
    mask: 
    radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
    calc(-1*var(--r)) 100%/100% var(--r) repeat-x,
    conic-gradient(#000 0 0) padding-box;
}

.curvebox-left::after {
    --r: 23px;
    content: ""; 
    position: absolute; 
    top: -43px;
    left: 13px;
    right: auto;
    bottom: 47px;
    background: #fafaf5;
    transform: perspective(100px) rotateX(10deg);
    z-index: -1;
    border-inline: var(--r) solid #fafaf5;
    border-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0 / var(--r);
    mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000 101%) calc(-1 * var(--r)) 100% / 100% var(--r) repeat-x, conic-gradient(#000 0 0) padding-box;
}

.curvebox-product { 
    z-index: 1;
    justify-content: center;
    min-height: 64px;
  }
  .curvebox-product::before{
    --r: 15px;
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fefefd border-box; /* border-box is needed for a gradient coloration */
    transform: perspective(100px) rotateX(18deg);
    border-inline: var(--r) solid #0000;
    border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
    mask: 
    radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
    calc(-1*var(--r)) 96%/100% var(--r) repeat-x,
  conic-gradient(#000 0 0) padding-box;
}
.curvebox-product::after {
    width: 30px;
    height: 30px;
    --r: 20px;
    content: "";
    position: absolute; 
    top: -25px;
    left: 34px;
    right: auto;
    bottom: 0px;
    background: #fefefd;
    transform: perspective(100px) rotateX(0deg);
    z-index: -1;
    border-inline: var(--r) solid #fafaf5;
    border-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0 / var(--r);
    mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000 101%) calc(-1 * var(--r)) 100% / 100% var(--r) repeat-x, conic-gradient(#000 0 0) padding-box;
}

.curvebox-product.boxc::before{ background: #fafaf5;}
.curvebox-product.boxc::after{ background: #fafaf5; top: -19px; display: none;}
.curvebox-product.boxc .tite_cont{
    height: 96px;
    display: flex;
    justify-content: end;
}

.curve-alt::before,
.curve-alt::after {background: #fafaf5 !important ;}

.curve-white::before,
.curve-white::after {background: #ffffff !important ;}



.carou_prod .swiper {
    border-radius: 20px;
    overflow: hidden;
}
.carou_prod .elementor-swiper-button-prev{left: -25px !important;}
.carou_prod .elementor-swiper-button-next{right: -25px !important;}

.prod_cardwrap .subpages-list.minimal{
    padding: 0;
    list-style: none;
    margin: 0px;
}
.prod_cardwrap .subpages-list.minimal li{
    position: relative;
    padding: 1px 2px 1px 14px;
}
.prod_cardwrap .subpages-list.minimal li::before{
    content:"";
    background: url('/wp-content/themes/besst/images/angle-right.svg');
    width: 10px;
    height: 10px;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    left: 0px;
    filter: invert(1);
}
.prod_cardwrap, .prod_cardwrap div{transition: 0.5s ease-in-out }
.prod_cardwrap .subpages-list.minimal li a{font-size: 13px; color: #dfa3a3;}
.prod_cardwrap .subpages-list.minimal li a:hover{color:#cccceb;}
.prod_card:hover .card_feat{opacity: .5;}
.prod_card:hover .subcard_menu{bottom: 100px !important;}
.curvebox-product:hover h3{color: #8f1800 !important;}

.darkbg p{color: #c1c1d3 !important;}
.darkbg p a{color: #d8735f !important;}

#breadco a{color: #708ac8; font-size: 13px;}
#breadco a:hover{color: #cb6753;}
#breadco .aioseo-breadcrumb{font-size: 13px; color:#a79595;}
#breadco span.aioseo-breadcrumb-separator {margin: 0px 8px; color:#a79595;}

.elementor-sticky--active .headshape{padding-top: 10px !important;}
.elementor-sticky--active .headshape::before{box-shadow: 0px 0px 23px #0000002b;}
/*.elementor-sticky--active .e-n-menu:not([data-layout=dropdown]) .e-n-menu-content{margin-top: -20px;}*/

a#testiup{transition: 0.5s ease-in-out}
a#testiup .compa{margin: 0px 0px 0px -15px; transition: 0.5s ease-in-out}
a#testiup:hover .compa{margin: 0px 3px;}

#mobilemenu nav{background: transparent !important; padding: 0px 35px 30px !important;}
#mobilemenu nav ul.elementor-nav-menu {background: #F6F6F6 !important; border-radius: 15px !important; overflow: hidden; box-shadow: 0px 0px 23px #0000002b;;}
#mobilemenu nav ul.elementor-nav-menu > li.menu-item{    border-bottom: 1px solid #d6dde8 !important;}
#mobilemenu nav ul.elementor-nav-menu > li.menu-item:last-child{border-bottom: 0px !important;}
#mobilemenu nav .sub-arrow .e-font-icon-svg {height: .8em; width: .8em; opacity: .5;}
#mobilemenu .sub-menu{    background: #ccd3e6;}
#mobilemenu .sub-menu > li.menu-item{border-bottom: 1px solid #bcc4d6;}
#mobilemenu .sub-menu > li.menu-item:last-child{border-bottom: 0px !important;}
#mobilemenu .sub-menu > li.menu-item a:hover{ background: #c6ccdc;}
#mobilemenu .sub-menu li.menu-item .sub-menu {background: #d5dae7;}





@media (max-width: 767px) {

    .headshape::before{border-radius: 0px 0px 10px 10px;}
    .curvebox::before {--r: 10px;}
    .curvebox-title::before{--r: 10px;} 
    .curvebox-left::before{--r: 10px;}
    .curvebox-left::after{--r: 15px; top: -43px; left: 21px;}
    .curvebox-product::before{--r: 10px;}
    .curvebox-product::after{--r: 15px; left: 39px;}

    #mobilemenu nav ul.elementor-nav-menu{    border-radius: 10px !important;}
}