.elementor-kit-6{--e-global-color-primary:#A12B84;--e-global-color-secondary:#671A54;--e-global-color-text:#FFFFFF;--e-global-color-accent:#61CE70;--e-global-color-61c2989:#090010;--e-global-color-7eaaebe:#0F3780;--e-global-color-e315d6e:#FFAD5BCC;--e-global-typography-primary-font-family:"Radikal Trial";--e-global-typography-secondary-font-family:"Darker Grotesque";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Darker Grotesque";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Darker Grotesque";--e-global-typography-accent-font-weight:500;font-family:"Darker Grotesque", Sans-serif;font-size:16px;font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-family:"Radikal Trial", Sans-serif;font-size:76px;font-weight:900;letter-spacing:-2px;}.elementor-kit-6 h2{font-family:"Radikal Trial", Sans-serif;font-size:75px;font-weight:900;letter-spacing:-2px;}.elementor-kit-6 h3{font-family:"Radikal Trial", Sans-serif;font-size:60px;font-weight:900;letter-spacing:-2px;}.elementor-kit-6 h4{font-family:"Darker Grotesque", Sans-serif;font-size:48px;font-weight:700;}.elementor-kit-6 h5{font-family:"Darker Grotesque", Sans-serif;font-size:40px;}.elementor-kit-6 h6{font-family:"Darker Grotesque", Sans-serif;font-size:24px;font-weight:700;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"Darker Grotesque", Sans-serif;font-size:20px;font-weight:700;border-radius:32px 32px 32px 32px;padding:12px 18px 12px 18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1200px){.elementor-kit-6 h1{font-size:56px;}.elementor-kit-6 h3{font-size:50px;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:880px){.elementor-kit-6 h1{font-size:36px;}.elementor-kit-6 h2{font-size:36px;}.elementor-kit-6 h3{font-size:30px;}.elementor-kit-6 h4{font-size:36px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:16px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. BUTTON CONTAINER SETUP */
.custom-motion-btn .elementor-button {
    position: relative;
    z-index: 1;
    overflow: hidden !important; 
    transition: all 0.3s ease;
    border: none; 
}

/* 2. THE SLIDING GRADIENT (Background Wiper) */
.custom-motion-btn .elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* Start hidden */
    
    /* GRADIENT COLOR */
    background: linear-gradient(125.39deg, #EF6F5B 6.33%, #B23869 49.4%, #740077 94.53%);
    
    z-index: -1; 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Trigger Slide on Hover */
.custom-motion-btn .elementor-button:hover::before {
    width: 100%;
}

/* --- 3. ALIGNMENT FIX --- */
.custom-motion-btn .elementor-button-content-wrapper {
    display: flex !important;
    align-items: center !important; /* Forces vertical centering */
    justify-content: center !important; /* Forces horizontal centering */
}

/* Remove default Elementor margins that might push the icon */
.custom-motion-btn .elementor-button .elementor-button-icon {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. ICON STYLING (White Circle + Purple Arrow) */
.custom-motion-btn .elementor-button .elementor-button-icon i,
.custom-motion-btn .elementor-button .elementor-button-icon svg {
    background-color: #ffffff;
    color: #740077 !important;
    
    /* Perfect Circle Setup */
    border-radius: 50%;
    width: 28px;  
    height: 28px;
    
    /* Flex inside the circle to center the arrow character */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-size: 14px;

    /* Animation Default Position */
    transform: rotate(-45deg); 
    transition: transform 0.4s ease;
}

/* 5. ICON HOVER ANIMATION */
.custom-motion-btn .elementor-button:hover .elementor-button-icon i,
.custom-motion-btn .elementor-button:hover .elementor-button-icon svg {
    transform: rotate(0deg);
    color: #EF6F5B !important;
}

/* Tablet and Mobile Menu 8/

/* 1. Force Flexbox Alignment sa Wrapper */
.custom-aligned-icon-box .elementor-icon-box-wrapper {
    display: flex !important;
}

/* 2. Reset Margins of Title/Text */
.custom-aligned-icon-box .elementor-icon-box-title {
    margin-top: 0 !important; !important;
    line-height: 1 !important;
}

/* Hide Default Theme Header and Footer */
#site-header, 
#site-footer {
    display: none !important;
}

/* Custome blur background */
.blur-20 {
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

.blur-8 {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

/* Reomve extra space of text */
.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}

/* Custom Gradient Divider Style */
.gradient-pill-divider .elementor-divider-separator {
    border: none !important;
    height: 6px;
    border-radius: 50px;
    background: linear-gradient(90deg, #FFAD5B 0%, #A12B84 50%, #4B0082 100%) !important;
}

/* Removes extra space below icons */
.remove-icon-space {
    line-height: 0 !important;
}



/* Border gradient color on Cognitive section */
.custom-gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit; 
    padding: 0 5px 0 5px; 
    background: linear-gradient(137.68deg, #0F3780 0%, #A0169B 50%, #DE0060 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

/* Blog Card */
.custom-transparent-gradient {
    background: linear-gradient(105.46deg, rgba(197, 111, 25, 0.5) 5.71%, rgba(161, 43, 132, 0.5) 52.86%, rgba(85, 0, 87, 0.9) 100%) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* UPDATED: CLASS PARA SA PARENT CONTAINER NA MAY STICKY CHILD AT BLUR BG */
.sticky-safe-blur {
    position: relative; 
    /* Gumawa tayo ng sarili niyang layer (10) para hindi lumampas sa header */
    z-index: 10 !important; 
}

/* Ang Blur Background Overlay */
.sticky-safe-blur::before {
    content: '';
    position: absolute;
    inset: 0;
    
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    border-radius: inherit;
    
    /* Nilagay natin sa -1 para laging nasa likod ng content, 
       pero hindi makikialam sa ibang section gaya ng header */
    z-index: -1 !important; 
    pointer-events: none;
}

/* 1. CONTAINER SETUP */
.custom-tool-card {
    cursor: pointer !important; 
    
    /* Ang Blur Effect na ni-request mo */
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    
    /* Setup para gumana ng maayos ang absolute position ng text sa loob */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease-in-out !important; 
}

/* 2. ITAGO AT I-SETUP ANG HEADING (Default State: Nakatago sa Gitna) */
.custom-tool-title {
    position: absolute !important;
    
    /* Magsisimula siya sa pinaka-gitna ng container */
    top: 50% !important;
    left: 50% !important;
    
    /* ANIMATION START: 
       - translate(-50%, -50%) = para exact center
       - scale(0) = sobrang liit kaya hindi makikita
       - rotate(-17.67deg) = yung tilt na gusto mo
    */
    transform: translate(-50%, -50%) scale(0) rotate(-17.67deg) !important; 
    
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* Timing ng paglipad at pag-pop out */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    
    z-index: 5 !important; 
    width: max-content !important; 
}

/* 3. SHOW HEADING KAPAG HINOVER (Lilipad papunta sa settings mo) */
.custom-tool-card:hover .custom-tool-title {
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Dito papasok yung settings mo galing sa screenshot! */
    top: -10px !important;
    left: -14px !important;
    
    /* ANIMATION END: 
       Lalaki siya (scale 1) at lilipad papunta sa -10px at -14px
       habang naka-rotate pa rin ng -17.67deg 
    */
    transform: translate(0, 0) scale(1) rotate(-17.67deg) !important; 
}

/* Bilisan ang Entrance at Exit Animation ng Off-Canvas */
.e-off-canvas,
.e-off-canvas__main,
.e-off-canvas__overlay {
    animation-duration: 0.4s !important; /* Pinapabilis nito ang Fade In Right / Fade Out Right */
    transition-duration: 0.4s !important; /* Pinapabilis nito ang paglabas ng itim na background (overlay) */
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Trial.ttf') format('truetype');
}
@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Black.ttf') format('truetype');
}
@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Trial-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Trial-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Trial-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'Radikal Trial';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://skyrocket.ph/ai/wp-content/uploads/2026/03/Radikal-Trial-UltraThin.ttf') format('truetype');
}
/* End Custom Fonts CSS */