.elementor-14512 .elementor-element.elementor-element-b4cfcee{--display:flex;--min-height:0vh;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14512 .elementor-element.elementor-element-8705c93 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-14512 .elementor-element.elementor-element-8705c93 .elementor-button{font-family:var( --e-global-typography-ab8d798-font-family ), Sans-serif;font-size:var( --e-global-typography-ab8d798-font-size );font-weight:var( --e-global-typography-ab8d798-font-weight );text-transform:var( --e-global-typography-ab8d798-text-transform );line-height:var( --e-global-typography-ab8d798-line-height );letter-spacing:var( --e-global-typography-ab8d798-letter-spacing );}@media(max-width:1024px){.elementor-14512 .elementor-element.elementor-element-8705c93 .elementor-button{font-size:var( --e-global-typography-ab8d798-font-size );line-height:var( --e-global-typography-ab8d798-line-height );letter-spacing:var( --e-global-typography-ab8d798-letter-spacing );}}@media(max-width:767px){.elementor-14512 .elementor-element.elementor-element-8705c93 .elementor-button{font-size:var( --e-global-typography-ab8d798-font-size );line-height:var( --e-global-typography-ab8d798-line-height );letter-spacing:var( --e-global-typography-ab8d798-letter-spacing );}}/* Start custom CSS for button, class: .elementor-element-8705c93 *//* --- Custom Animated Button for Elementor --- */
/* HOW TO USE:
  1. Base Class (Required): .my-custom-hover-btn
  2. Modifier Class (Pick One):
     .btn-style-default  (Transparent bg, orange icon)
     .btn-style-orange   (Orange bg, white circle)
     .btn-style-navy     (White bg, navy circle)
*/

/* --- 1. BASE CLASS (Animation, Layout & Structure) --- */
/* This class controls EVERYTHING *except* the colors. */

.my-custom-hover-btn .elementor-button {
  width: 200px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box; /* Added for more stable border sizing */
}

.my-custom-hover-btn .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

.my-custom-hover-btn .elementor-button-text {
  width: 145px;
  z-index: 1;
  transition-duration: 0.5s;
  white-space: nowrap;
  font-size: 1.04em;
  padding: 16px;
  margin: 0;
  /* NOTE: 'color' property was moved to the modifier classes
    to allow for different text colors.
  */
}

.my-custom-hover-btn .elementor-button-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition-duration: 0.5s;
  margin: 0 !important;
  padding: 0;
}

.my-custom-hover-btn .elementor-button-icon i {
  rotate: 0deg;
  font-size: 18px;
  line-height: 18px;
}

/* --- BASE HOVER & ACTIVE STATES (Shared by all versions) --- */

.my-custom-hover-btn .elementor-button:hover .elementor-button-icon {
  width: 190px;
  transition-duration: 0.5s;
}

.my-custom-hover-btn .elementor-button:hover .elementor-button-text {
  transform: translate(10px);
  width: 0;
  font-size: 0;
  opacity: 0;
  margin: -2px;
  padding: 0;
  transition-duration: 0.5s;
}

.my-custom-hover-btn .elementor-button:active {
  transform: scale(0.95);
  transition-duration: 0.5s;
}

/* --- 2. MODIFIER: .btn-style-default (Original Transparent) --- */

.my-custom-hover-btn.btn-style-default .elementor-button {
  border: 1px solid rgba(255, 255, 255, 0.349);
  background-color: rgba(7, 10, 67, 0); /* Transparent */
}

.my-custom-hover-btn.btn-style-default .elementor-button-text {
  color: white;
}

.my-custom-hover-btn.btn-style-default .elementor-button-icon {
  background: linear-gradient(to bottom, rgb(239, 101, 42), rgb(236, 70, 40));
}

.my-custom-hover-btn.btn-style-default .elementor-button-icon i {
  color: white;
}

/* --- 3. MODIFIER: .btn-style-orange (Inverted Orange) --- */

.my-custom-hover-btn.btn-style-orange .elementor-button {
  background: linear-gradient(to bottom, rgb(239, 101, 42), rgb(236, 70, 40));
  border: none;
}

.my-custom-hover-btn.btn-style-orange .elementor-button-text {
  color: white;
}

.my-custom-hover-btn.btn-style-orange .elementor-button-icon {
  background: white;
}

.my-custom-hover-btn.btn-style-orange .elementor-button-icon i {
  color: rgb(239, 101, 42);
}

/* --- 4. NEW MODIFIER: .btn-style-navy (White Background) --- */

.my-custom-hover-btn.btn-style-navy .elementor-button {
  /* White background with a navy border */
  background: white;
  border: 1px solid rgb(7, 10, 67, 0.10);
}

.my-custom-hover-btn.btn-style-navy .elementor-button-text {
  /* Navy text */
  color: rgb(7, 10, 67);
}

.my-custom-hover-btn.btn-style-navy .elementor-button-icon {
  /* Navy circle */
  background: rgb(7, 10, 67);
}

.my-custom-hover-btn.btn-style-navy .elementor-button-icon i {
  /* White icon */
  color: white;
}

/* --- 5. SIZE MODIFIER: .btn-size-slim (150x40px) --- */
/*
  This block *overrides* the default sizes from section 1.
  It scales down the button, icon, text, and hover effect.
*/

.my-custom-hover-btn.btn-size-slim .elementor-button {
  width: 155px;
  height: 40px;
  border-radius: 40px; /* Match height for pill shape */
}

.my-custom-hover-btn.btn-size-slim .elementor-button-text {
  /* Recalculated for new size: 150px - 30px icon - 10px gap */
  width: 110px; 
  font-size: 0.95em; /* Slightly smaller text */
  padding: 0; /* Remove old padding, rely on flex center */
}

.my-custom-hover-btn.btn-size-slim .elementor-button-icon {
  /* Scaled down from 40px */
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 30px; /* Match size for circle shape */
}

.my-custom-hover-btn.btn-size-slim .elementor-button-icon i {
  /* Scaled down from 18px */
  font-size: 14px; 
  line-height: 14px;
}

/* --- SLIM HOVER STATE --- */
.my-custom-hover-btn.btn-size-slim .elementor-button:hover .elementor-button-icon {
  /* Fill new width, minus 10px buffer: 150px - 10px */
  width: 145px;
}

/* --- 6. OPACITY MODIFIER for .btn-style-default.btn-size-slim --- */
/*
  These rules ONLY apply when a button has BOTH
  .btn-style-default AND .btn-size-slim classes.
  This controls the main button background opacity.
*/

/* --- Standard (non-hover) state opacity --- */
.my-custom-hover-btn.btn-style-default.btn-size-slim .elementor-button {
  /* --- EDIT OPACITY HERE (for standard state background) --- */
  /* This overrides the 'background-color: rgba(7, 10, 67, 0)' from section 2 */
  background-color: rgba(7, 10, 67, 0.80); 
}

/* --- Hover state opacity --- */
.my-custom-hover-btn.btn-style-default.btn-size-slim .elementor-button:hover {
  /* --- EDIT OPACITY HERE (for hover state background) --- */
  /* This adds an explicit control for the hover state background */
  background-color: rgba(7, 10, 67, 0.80);
}/* End custom CSS */