.elementor-kit-7{--e-global-color-primary:#B52126;--e-global-color-secondary:#54595F;--e-global-color-text:#000000;--e-global-color-accent:#61CE70;--e-global-color-a2a3e9d:#FFFFFF;--e-global-color-6f1f92e:#641215;--e-global-color-29edd16:#FFE6E7;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-73d3770-font-size:40px;font-family:"Poppins", Sans-serif;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h2{font-family:"Outfit", Sans-serif;line-height:1.2em;}.elementor-kit-7 h3{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h4{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h5{font-family:"Outfit", Sans-serif;}.elementor-kit-7 h6{font-family:"Outfit", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-73d3770-font-size:36px;--e-global-typography-73d3770-line-height:1.3em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Original Filled Button */
.button-style {
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0.5rem 0.7rem;
  margin: 0;
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: #641215;
  color: white;
  border-radius: 200px;
  border: solid 2px #b52126;
}

.button-style:hover {
  border-color: #641215;
}

.button-style span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
}

.button-style:hover span {
  color: white;
}

.button-style::before,
.button-style::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.button-style::before {
  content: "";
  background: #b52126;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.button-style:hover::before {
  transform: translate3d(100%, 0, 0);
}


/* -------------------------------------------- */
/* NEW: Transparent Border Button */
/* -------------------------------------------- */

.button-style-border {
  outline: none;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: transparent;
  color: #b52126;           /* Red text */
  border-radius: 200px;
  border: solid 2px #b52126; /* Red outline */
  transition: color 0.4s, border-color 0.4s;
}

/* Text style (same as original) */
.button-style-border span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
    color: #b52126;  
}

/* Hover: text becomes white */
.button-style-border:hover span {
  color: white;
}

/* Psuedo-element for animated fill */
.button-style-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: #b52126;      /* Fill color */
  transform: skew(30deg) translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: 0;
}

/* Hover: animate red background fill */
.button-style-border:hover::before {
  transform: skew(30deg) translateX(0);
}

/* Keep border same on hover */
.button-style-border:hover {
  border-color: #b52126;
}




/* Improved Animations Stylesheet */

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-100px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-100px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(100px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,100px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp
}/* End custom CSS */