:root {
	
  --prim-akcent: #3e9cff;
  --prim-akcent-darker-1: #2a71bc;
  --prim-akcent-lighter-1: #63aefd;

  --text-over-prim-akcent: #ffffff;
  --text-default-color : #3c3c3c;
  --text-heading-color : #212121;

  /* padding global var */


  /* border radius */


}

:root {

    --cx-site-main-color            : #556984;
    --cx-site-main-color-compliment : white;

    --cx-site-icons-color           : #566984;

    --cx-primary                    : #212121;
    --cx-primary-10                 : #212121;
    --cx-primary-15                 : #1D1537;

    --cx-secondary                  : #505050;
    --cx-text                       : #7A7A7A;
    --cx-white                      : #ffffff;

    --cx-error-400                  : #F97066;
    --cx-sucess                     : #32D583;

    --cx-color-positive             : #70ce70;
    --cx-color-negative             : #f2b701;

    --cx-primary-gradient           : linear-gradient(90deg, var(--e-primary-dark), var(--e-primary));


    /**
     * 
     * border radius
     * 
     * */
    --cx-box-grid-item-radius       : 3px;
    /**/
    --card-radius                   : 15px;
    --card-radius-lg                : 15px;
    --card-radius-md                : 10px;
    --card-radius-sm                : 8px;
    --card-radius-xs                : 5px;
    /**/
    --cx-btn-radius                 : 5px;
    
    --cx-radius-xs                  : 3px;
    --cx-radius-sm                  : 5px;
    --cx-radius-md                  : 8px;
    --cx-radius-lg                  : 10px;
    --cx-radius-xl                  : 15px;

    /**
     * paddings
     * */

    --p1 : 10px;
    --p2 : 20px;
    --p3 : 30px;
    --p4 : 40px;
    --p5 : 50px;
    --spacer-p : 50px;


    /**
     * shadows
     * 
     * */
    --shadow-primary                   : 0 0 5px #0000001f;
    --shadow-primary-hover             : 0 0 10px #c1c1c1;

    --shadow-secondary                 : 0 0 5px #0000001f;
    --shadow-secondary-hover           : 0 0 10px #c1c1c1;
    
    --shadow-tertiary                  : 0 0 5px #0000001f;
    --shadow-tertiary-hover            : 0 0 10px #c1c1c1;

    /**
     * gradients
     * 
     * */
    --gradient-main                     : linear-gradient(90deg, var(--e-primary-dark), var(--e-primary));




    --box-coomingsoon-img-size      : 300px;
    --box-list-item-image-size      : 100px;
    --box-full-item-image-size      : 220px;

    --progress-bar-height           : 10px;
    --progress-bar-height-sc        : 14px;
    --progress-bar-bg               : #efeaff;


    --card-shadow                   : 0 0 5px #0000001f;
    --card-shadow-hover             : 0 0 10px #c1c1c1;

    --card-transition               : all .15s ease-in;
    
    /*-------------------
    
        for woocomerence

    ------------------------*/
    /*special case*/
    --woocomerenece-margin-top-bottom               : 30px;
    --woocomerenece-margin-right-left               : 20px;

    /*-------------------
    
        fixed mysterybox stats header

    ------------------------*/
    /*test*/
    /*--fixmystbox-stats          : background: green;color: #fff;*/

}

/*color gradient*/

.pastel-gradient-bg {
    position: relative;

}

/*.pastel-gradient-bg::before {
    content: "";
    inset: 0;
    position: absolute;
    background: linear-gradient(135deg,
      #ffe8cc 0%,
      #ffdcdc 15%,
      #ffb6e6 35%,
      #f7c2ff 50%,
      #d7e3ff 70%,
      #c9f0ff 85%,
      #ffffff 100%
    );
}*/

.pastel-gradient-bg::before {
    content: "";
    inset: 0;
    position: absolute;
    background-image: linear-gradient(135deg,
      #ffe8cc 0%,
      #ffdcdc 15%,
      #ffb6e6 35%,
      #f7c2ff 50%,
      #d7e3ff 70%,
      #c9f0ff 85%,
      #ffffff 100%
    );
    background-blend-mode: overlay; 
}

.pastel-gradient-bg-2::before {
    content: "";
    inset: 0;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%),
        linear-gradient(135deg,
          #ffe8cc 0%,
          #ffdcdc 15%,
          #ffb6e6 35%,
          #f7c2ff 50%,
          #d7e3ff 70%,
          #c9f0ff 85%,
          #ffffff 100%
    );
    background-blend-mode: overlay;
}

.border-black-50-opa-12 {
  --border-color: color-mix(in srgb, var(--black-50) 12%, transparent 88%) !important;
  border-color: var(--border-color) !important;
}