/*
  ================================================
  MASTER BUTTON REFACTORING STYLES (UNIFIED)
  - Both buttons start transparent with a white border.
  - Both buttons turn solid blue on hover.
  ================================================
*/

/* 
  This selector targets BOTH button containers at the same time.
  Notice the comma separating the two selectors.
*/
.elementor-element-9f62814 a.elementor-button,
.elementor-element-e7eef87 a.elementor-button {
  transition: all 0.3s ease !important; /* Smooth hover effect */
  border-radius: 4px !important;       /* Consistent rounded corners */
}

/* 
  --- Normal State (Transparent) ---
  This rule applies to both buttons when not hovered.
*/
.elementor-element-9f62814 a.elementor-button,
.elementor-element-e7eef87 a.elementor-button {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

/* 
  --- Hover State (Solid Blue) ---
  This rule applies to both buttons when hovered.
*/
.elementor-element-9f62814 a.elementor-button:hover,
.elementor-element-e7eef87 a.elementor-button:hover {
  background-color: #1B5AA7 !important; /* Your primary blue color */
  border-color: #1B5AA7!important;     /* Make border match background on hover */
  color: #FFFFFF !important;
}
/*
  ================================================
  STYLES FOR CAROUSEL ARROWS & BROWSE BUTTON
  - Start solid blue.
  - Become transparent with a border on hover.
  ================================================
*/

/* --- 1. Carousel Arrow Styling --- */

/* This targets BOTH arrow buttons at the same time */
.elementor-15686 .elementor-element-199893f a.carousel-arrow {
  transition: all 0.3s ease !important; /* Smooth hover effect */
  background-color: #1B5AA7 !important; /* Your primary blue color */
  border: 2px solid #1B5AA7 !important; /* Matching border color */
  color: #FFFFFF !important;             /* White arrow icon */
}

/* This is the hover state for BOTH arrows */
.elementor-15686 .elementor-element-199893f a.carousel-arrow:hover {
  background-color: transparent !important;
  border-color: #1B5AA7 !important;      /* Keep the border blue */
  color: #1B5AA7!important;             /* Make the arrow icon blue */
}


/* --- 2. "Browse services" Button Styling --- */

/* This targets the specific "Browse services" button container */
.elementor-element-5b0c52d a.elementor-button {
  transition: all 0.3s ease !important;
  background-color: #1B5AA7 !important;
  border: 2px solid #1B5AA7 !important;
  color: #FFFFFF !important;
}

/* This is the hover state for the button */
.elementor-element-5b0c52d a.elementor-button:hover {
  background-color: transparent !important;
  border-color: #1B5AA7 !important;
  color: #1B5AA7 !important;
}
/*
  ================================================
  STYLES FOR FOOTER CTA BUTTONS
  - Start transparent with a white border.
  - Turn solid white with blue text on hover.
  ================================================
*/

/* --- This targets the container holding BOTH footer buttons --- */
/* You might need to find the specific data-id if this doesn't work */
.elementor-element-be97600 .elementor-button {
  transition: all 0.3s ease !important;
  border-radius: 4px !important;
}

/* --- Normal State (Transparent) --- */
.elementor-element-be97600 a.elementor-button {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

/* --- Hover State (Solid White) --- */
.elementor-element-be97600 a.elementor-button:hover {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #1B5AA7 !important; /* Your primary blue color for the text */
}
/*
  ================================================
  STYLES FOR BLUE BANNER CTA BUTTON
  - Starts transparent with a white border.
  - Turns solid white with blue text on hover.
  ================================================
*/

/* 
  NOTE: Replace '5fc51f2' with the actual data-id you find 
  by inspecting the button's container.
*/
.elementor-element-5fc51f2 a.elementor-button {
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 4px !important;
}

.elementor-element-5fc51f2 a.elementor-button:hover {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #1B5AA7 !important; /* Your primary blue color for the text */
}
/*
  ================================================
  STYLES FOR "ABOUT OUR COMPANY" BUTTON
  - Starts solid blue.
  - Becomes transparent with a border on hover.
  ================================================
*/

/* 
  NOTE: Replace 'd61eab4' with the actual data-id you find 
  by inspecting the button's container.
*/
.elementor-element-d61eab4 a.elementor-button {
  transition: all 0.3s ease !important;
  background-color: #1B5AA7 !important; /* Your primary blue color */
  border: 2px solid #1B5AA7 !important; /* Matching border color */
  color: #FFFFFF !important;             /* White text */
  border-radius: 4px !important;
}

.elementor-element-d61eab4 a.elementor-button:hover {
  background-color: transparent !important;
  border-color: #1B5AA7 !important;      /* Black border on hover */
  color: #1B5AA7!important;             /* Black text on hover */
}
/* --- Custom CSS for the Finance Guide --- */

/* This is the main container for the whole section. */
.finance-guide {
   font-family: "Manrope", Manrope;
    color: #7a7a7a;        /* <-- Change your text COLOR here */
    font-size: 18px;       /* <-- Change your text SIZE here */
    font-weight: 400;      /* <-- Change your text WEIGHT here (400=normal, 600=semi-bold) */
    line-height: 30px; 
    max-width: 800px;  /* Keeps the text from being too wide on big screens */
    margin: 0px auto; /* Adds space above/below and centers the block */
    padding: 20px;
}