.elementor-kit-6{--e-global-color-primary:#2658A8;--e-global-color-secondary:#231F20;--e-global-color-text:#414042;--e-global-color-accent:#2658A8;--e-global-color-aa10307:#E0F4F7;--e-global-color-f1c91af:#FFFFFF;--e-global-color-f469a55:#E6E7E8;--e-global-color-2377c03:#2658A852;--e-global-typography-primary-font-family:"Quicksand";--e-global-typography-primary-font-size:45px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Quicksand";--e-global-typography-secondary-font-size:25px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Quicksand";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Quicksand";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-176e3c2-font-family:"Quicksand";--e-global-typography-176e3c2-font-size:18px;--e-global-typography-176e3c2-font-weight:600;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* -----------------------------
   Base hover animation (shared)
   ----------------------------- */
.hover-animate {
  display: inline-block; /* make scale visible */
  transform-origin: center center; /* scale from center */
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.4s ease;
}

.hover-animate:hover {
  transform: scale(1.05) !important; /* force scale */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.hover-animate:active {
  transform: scale(0.98) !important; /* press down effect */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}


/* -----------------------------
   Gradient background container
   ----------------------------- */
.hover-gradient {
  background: linear-gradient(
    90deg,
    #44B0DC 10%,   /* Blue */
    #6BC6A7 70%,   /* Teal green */
    #8CC875 100%   /* Green */
  ) !important;
  color: #ffffff;
}

.hover-gradient:hover {
  background: linear-gradient(
    90deg,
    #A2D9F0 10%,   /* Lighter blue */
    #B6E7D3 70%,   /* Lighter teal */
    #C8EAB8 100%   /* Lighter green */
  ) !important;
  color: #414042;
}

.hover-gradient:active {
  background: linear-gradient(
    90deg,
    #2E8FB3 10%,   /* Darker blue */
    #4DA387 70%,   /* Darker teal */
    #6DA557 100%   /* Darker green */
  ) !important;
  color: #414042;
}

/* -----------------------------
   White background container
   ----------------------------- */
.hover-white {
  background: #ffffff !important;
  color: #414042;
}

.hover-white:hover {
  background: #ffffff !important; /* stays white */
}

.hover-white:active {
  background: #ffffff !important; /* stays white */
}

/* -----------------------------
   Gradient Button Base
   ----------------------------- */
.gradient-btn {
  overflow: hidden;
  border-width: 0;
  border-radius: .85em;
  background: linear-gradient(
    90deg,
    #44B0DC 10%,   /* blue */
    #6BC6A7 70%,   /* teal green */
    #8CC875 100%   /* green */
  ) !important;
  color: #ffffff !important;
  transition: 
    background 0.4s ease, 
    color 0.4s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover state: lighter gradient + text black + zoom + shadow */
.gradient-btn:hover {
  background: linear-gradient(
    90deg,
    #A2D9F0 10%,   /* lighter blue */
    #B6E7D3 70%,   /* lighter teal */
    #C8EAB8 100%   /* lighter green */
  ) !important;
  color: #414042 !important;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Active state: darker gradient + text black + press effect */
.gradient-btn:active {
  background: linear-gradient(
    90deg,
    #2E8FB3 10%,   /* darker blue */
    #4DA387 70%,   /* darker green-teal */
    #6DA557 100%   /* darker green */
  ) !important;
  color: #414042 !important;
  transform: scale(0.97);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/*icon box*/
/* -----------------------------
   Gradient IconBox Style
   Usage: Add class "gradient-icon" in Elementor
   ----------------------------- */

/* 🔵 Normal state: gradient background */
.gradient-icon .ha-infobox-figure--icon {
  font-size: 36px;
  border-radius: 6%;
  color: #ffffff; /* icon stays white */
  background: linear-gradient(
    90deg,
    #44B0DC 10%,   /* blue */
    #6BC6A7 70%,   /* teal green */
    #8CC875 100%   /* green */
  ) !important;
  transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* 🟢 Hover state: lighter gradient + zoom + shadow */
.gradient-icon .ha-infobox-figure--icon:hover {
  background: linear-gradient(
    90deg,
    #A2D9F0 10%,   /* lighter blue */
    #B6E7D3 70%,   /* lighter teal */
    #C8EAB8 100%   /* lighter green */
  ) !important;
  color: #414042; /* icon dark grey */
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 🔴 Active state: darker gradient + press effect */
.gradient-icon .ha-infobox-figure--icon:active {
  background: linear-gradient(
    90deg,
    #2E8FB3 10%,   /* darker blue */
    #4DA387 70%,   /* darker teal */
    #6DA557 100%   /* darker green */
  ) !important;
  color: #414042;
  transform: scale(0.97);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Divider */
/* 🔵 Gradient divider reusable class */
.gradient-divider .elementor-divider-separator {
  border-top: 5px solid transparent;
  border-image: linear-gradient(
    90deg,
    #44B0DC 0%,   /* blue */
    #6BC6A7 50%,  /* teal green */
    #8CC875 100%  /* green */
  );
  border-image-slice: 1;
  border-radius: 10px; /* optional for softer edges */
}


/* Tab Active & Hover Background*/
/* 🌈 Gradient Tabs reusable class for Nested Tabs */
.gradient-tabs .e-n-tab-title {
  background: #f1f2f3; /* default background */
  color: #414042;
  transition: 
    background 0.3s ease, 
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border: none !important;
  padding: 10px 25px;
}

/* Hover state: lighter gradient (≈50% lighter) + text black */
.gradient-tabs .e-n-tab-title:hover {
  background: linear-gradient(
    90deg,
    #A2D9F0 0%,   /* lighter blue */
    #B6E7D3 50%,  /* lighter teal */
    #C8EAB8 100%  /* lighter green */
  ) !important;
  color: #414042 !important;  /* 保持和按钮 hover 一样黑字 */
  transform: scale(1.05); /* slight zoom */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* soft shadow */
}

/* Active state: gradient stays (original colors) + text white */
.gradient-tabs .e-n-tab-title[aria-selected="true"] {
  background: linear-gradient(
    90deg,
    #44B0DC 0%,   /* blue */
    #6BC6A7 50%,  /* teal green */
    #8CC875 100%  /* green */
  ) !important;
  color: #ffffff !important;
  transform: scale(1.05); /* keep zoom effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Click/Pressed state: darker gradient + press down effect */
.gradient-tabs .e-n-tab-title:active {
  background: linear-gradient(
    90deg,
    #2E8FB3 0%,   /* darker blue */
    #4DA387 50%,  /* darker teal */
    #6DA557 100%  /* darker green */
  ) !important;
  transform: scale(0.97); /* press down */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}


/*card button*/
/* Normal state: 3-color gradient background (only buttons inside the card) */
.card-gradient-card .ha-btn {
  padding: 10px 25px;
  border: none !important;
  border-radius: 20px;
  font-family: "Quicksand", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff; /* text white by default */
  background: linear-gradient(
    90deg,
    #44B0DC 10%,   /* blue */
    #6BC6A7 70%,   /* teal green */
    #8CC875 100%   /* green */
  ) !important;
  transition: 
    background 0.4s ease,
    color 0.4s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover state: lighter gradient + text black + zoom + shadow */
.card-gradient-card .ha-btn:hover {
  background: linear-gradient(
    90deg,
    #A2D9F0 10%,   /* lighter blue */
    #B6E7D3 70%,   /* lighter teal */
    #C8EAB8 100%   /* lighter green */
  ) !important;
  color: #414042 !important; /* text black */
  transform: scale(1.05); /* slight zoom */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* soft shadow */
}

/* Active state: darker gradient + text black + press down */
.card-gradient-card .ha-btn:active {
  background: linear-gradient(
    90deg,
    #2E8FB3 10%,   /* darker blue */
    #4DA387 70%,   /* darker teal */
    #6DA557 100%   /* darker green */
  ) !important;
  color: #414042 !important; /* text black */
  transform: scale(0.98); /* press down effect */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* smaller shadow */
}


/* Post Grid buttons*/

/*Post Grid Read More */
.pg-gradient-btn .ha-pg-readmore a {
    padding: 5px 25px;
    border: none !important;  
    border-radius: 20px;
    font-family: "Quicksand", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff; /* text white by default */
    background: linear-gradient(
        90deg,
        #44B0DC 10%,   /* blue */
        #6BC6A7 70%,   /* teal green */
        #8CC875 100%   /* green */
    ) !important;
    transition: 
        background 0.4s ease,
        color 0.4s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Hover state: lighter gradient (≈50% lighter) */
.pg-gradient-btn .ha-pg-readmore a:hover {
    background: linear-gradient(
        90deg,
        #A2D9F0 10%,   /* lighter blue */
        #B6E7D3 70%,   /* lighter teal */
        #C8EAB8 100%   /* lighter green */
    ) !important;
    color: #414042 !important; /* text black */
    transform: scale(1.05); /* slight zoom */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* soft shadow */
}

/* Active state: darker gradient (≈30% darker) */
.pg-gradient-btn .ha-pg-readmore a:active {
    background: linear-gradient(
        90deg,
        #2E8FB3 10%,   /* darker blue */
        #4DA387 70%,   /* darker teal */
        #6DA557 100%   /* darker green */
    ) !important;
    color: #414042 !important; /* text black */
    transform: scale(0.98); /* press down effect */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* slightly smaller shadow */
}


/* form button css*/
/* -----------------------------
   Gradient style for Form Submit Button
   Works only inside a form with class "form-gradient-btn"
----------------------------- */

/* Normal state */
.form-gradient-btn .elementor-button[type="submit"] {
  border: none !important;
  color: #ffffff;
  background: linear-gradient(
    90deg,
    #44B0DC 10%,   /* blue */
    #6BC6A7 70%,   /* teal green */
    #8CC875 100%   /* green */
  ) !important;
  transition: 
    background 0.4s ease,
    color 0.4s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover state */
.form-gradient-btn .elementor-button[type="submit"]:hover {
  background: linear-gradient(
    90deg,
    #A2D9F0 10%,   /* lighter blue */
    #B6E7D3 70%,   /* lighter teal */
    #C8EAB8 100%   /* lighter green */
  ) !important;
  color: #414042 !important;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Active state */
.form-gradient-btn .elementor-button[type="submit"]:active {
  background: linear-gradient(
    90deg,
    #2E8FB3 10%,   /* darker blue */
    #4DA387 70%,   /* darker teal */
    #6DA557 100%   /* darker green */
  ) !important;
  color: #414042 !important;
  transform: scale(0.98);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}/* End custom CSS */