.elementor-kit-315{--e-global-color-primary:#010E37;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#1268FB;--e-global-color-3bdb37c7:#000;--e-global-color-696e0345:#FFF;--e-global-color-4ecaa8f:#FFFFFF00;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:500;font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:400;line-height:26px;}.elementor-kit-315 e-page-transition{background-color:#FFBC7D;}.elementor-kit-315 h1{font-family:"Open Sans", Sans-serif;font-size:47px;font-weight:800;line-height:57px;}.elementor-kit-315 h2{font-family:"Open Sans", Sans-serif;font-size:40px;font-weight:600;line-height:54px;}.elementor-kit-315 h3{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:600;}.elementor-kit-315 button,.elementor-kit-315 input[type="button"],.elementor-kit-315 input[type="submit"],.elementor-kit-315 .elementor-button{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;line-height:20px;color:var( --e-global-color-696e0345 );border-radius:15px 15px 15px 15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}{}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-315 h1{font-size:35px;line-height:45px;}.elementor-kit-315 h2{font-size:25px;line-height:35px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* -----------------------------
   BUTTON ICON STYLING
   Adds padding, background, and rounded corners to the icon container
------------------------------ */
#bt-hg .elementor-button-icon {
  padding: 14px;
  background: #010E37;
  border-radius: 12px;
}

/* -----------------------------
   BUTTON TEXT STYLING
   Centers the text content vertically
------------------------------ */
#bt-hg .elementor-button-text {
  align-content: center;
}

/* -----------------------------
   BUTTON BASE STYLING
   Sets background gradient, size, position, padding, and flex alignment
   Enables smooth transition for gradient and text color
------------------------------ */
#bt-hg {
  background-color: transparent;
  color: var(--e-global-color-696e0345);
  background-image: linear-gradient(90deg, #1268FB 0%, #2745A9 100%);
  background-size: 200%;               /* enlarge background for smooth animation */
  background-position: left center;    /* initial gradient position */
  padding: 8px 8px 8px 25px;
  transition: background-position 0.5s ease, color 0.5s ease; /* smooth hover transition */
  text-align: center;
  display: inline-flex;                /* enable flex for vertical and horizontal alignment */
  align-items: center;
  justify-content: center;
}

/* -----------------------------
   BUTTON HOVER & FOCUS STATE
   Reverse gradient direction and shift background position
------------------------------ */
#bt-hg:hover,
#bt-hg:focus {
  background-image: linear-gradient(90deg, #2745A9 0%, #1268FB 100%);
  background-position: right center;   /* animate gradient to the other side */
}

/* -----------------------------
   SVG ICON STYLING
   Ensures icon is inline, sets transition for transform and opacity
------------------------------ */
#bt-hg .elementor-button-icon svg {
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: center center;
}

/* -----------------------------
   ICON ANIMATION ON HOVER
   Triggers flyArrow animation when hovering or focusing the button
------------------------------ */
#bt-hg:hover .elementor-button-icon svg {
  animation: flyArrow 0.4s forwards;
}

/* -----------------------------
   FLY ARROW KEYFRAMES
   0%   - icon in original position
   50%  - icon flies up-right and disappears
   51%  - icon reappears below-left offscreen
   100% - icon returns to original position
------------------------------ */
@keyframes flyArrow {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(20px, -20px) scale(0) rotate(45deg); /* flies up-right */
    opacity: 0;
  }
  51% {
    transform: translate(-20px, 20px) scale(0) rotate(45deg); /* instantly reappears below-left */
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg); /* back to original position */
    opacity: 1;
  }
}


/* -----------------------------
   BUTTON ICON STYLING
   Adds padding, background gradient, and rounded corners to the icon container
------------------------------ */
#bt-hg-dark .elementor-button-icon {
  padding: 14px;
  border-radius: 12px;
  background-image: linear-gradient(90deg, #1268FB 0%, #2745A9 100%);
}

/* -----------------------------
   BUTTON TEXT STYLING
   Centers the text content vertically
------------------------------ */
#bt-hg-dark .elementor-button-text {
  align-content: center;
}

/* -----------------------------
   SVG ICON STYLING
   Ensures icon is inline and sets transform origin
------------------------------ */
#bt-hg-dark .elementor-button-icon svg {
  display: inline-block;
  transform-origin: center center;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* -----------------------------
   ICON ANIMATION ON HOVER
   Triggers flyArrow animation when hovering or focusing the button
------------------------------ */
#bt-hg-dark:hover .elementor-button-icon svg,
#bt-hg-dark:focus .elementor-button-icon svg {
  animation: flyArrow 0.4s forwards;
}

/* -----------------------------
   FLY ARROW KEYFRAMES
   0%   - icon in original position
   50%  - icon flies up-right and disappears
   51%  - icon reappears below-left offscreen
   100% - icon returns to original position
------------------------------ */
@keyframes flyArrow {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(20px, -20px) scale(0) rotate(45deg); /* flies up-right */
    opacity: 0;
  }
  51% {
    transform: translate(-20px, 20px) scale(0) rotate(45deg); /* instantly reappears below-left */
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg); /* back to original position */
    opacity: 1;
  }
}

/* -----------------------------
   HOVER / FOCUS ICON BACKGROUND
   Changes background color of icon container when hovering/focusing the button
------------------------------ */
#bt-hg-dark:hover .elementor-button-icon,
#bt-hg-dark:focus .elementor-button-icon {
  background: #010E37;
}

/* Main menu */
.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before, .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after {
background-image: linear-gradient(90deg, #1268FB 0%, #2745A9 100%);
}
.header-menu {
backdrop-filter: blur(5px);
}

.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item-active::before, .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item-active::after {
  background-image: unset !important;
  background-color: unset !important;
}

/* Blog pagi */
.blogs .elementor-pagination .page-numbers {
  padding: 12px 20px;
  border: 1px solid #1268FB;
  border-radius: 15px;
}
.blogs .elementor-pagination .page-numbers.current {
  background-image: linear-gradient(180deg, #1268FB 0%, #2745A9 100%);
}
.blogs .elementor-pagination a.page-numbers:hover {
  background-image: linear-gradient(180deg, #1268FB 0%, #2745A9 100%);
}/* End custom CSS */