.elementor-17 .elementor-element.elementor-element-f62e4a3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-13px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-f62e4a3:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-f62e4a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#48D3D1;}.elementor-17 .elementor-element.elementor-element-5040ca7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-5040ca7:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-5040ca7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FEA07A;}.elementor-17 .elementor-element.elementor-element-f5c4758{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--padding-top:10px;--padding-bottom:10px;--padding-left:30px;--padding-right:30px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-87e94a1{text-align:start;}.elementor-17 .elementor-element.elementor-element-87e94a1 .elementor-heading-title{font-family:"Instrument Sans", Sans-serif;font-size:13px;font-weight:600;color:#000000;}.elementor-17 .elementor-element.elementor-element-b1cc1c6{--display:flex;--justify-content:center;--padding-top:10px;--padding-bottom:10px;--padding-left:30px;--padding-right:30px;}.elementor-17 .elementor-element.elementor-element-8e19593{text-align:end;}.elementor-17 .elementor-element.elementor-element-8e19593 .elementor-heading-title{font-family:"Instrument Sans", Sans-serif;font-size:13px;font-weight:600;color:#000000;}.elementor-17 .elementor-element.elementor-element-5378e9e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:15px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-5378e9e:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-5378e9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#48D3D1;}.elementor-17 .elementor-element.elementor-element-9b500e3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-c7c02b3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-17 .elementor-element.elementor-element-88deaf4{text-align:start;}.elementor-17 .elementor-element.elementor-element-88deaf4 img{width:100%;}.elementor-17 .elementor-element.elementor-element-fe0c916{--display:flex;--padding-top:-1px;--padding-bottom:-1px;--padding-left:-1px;--padding-right:-1px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-menu-toggle{margin:0 auto;}.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .elementor-item{font-family:"Sometype Mono", Sans-serif;font-weight:800;}.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;padding-left:21px;padding-right:21px;}.elementor-17 .elementor-element.elementor-element-b1983e6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-b1983e6:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-b1983e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#48D3D1;}.elementor-17 .elementor-element.elementor-element-ed53086{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-0ec671f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-cf1efad{text-align:start;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-17 .elementor-element.elementor-element-f62e4a3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-fe0c916{--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-b1983e6{--padding-top:0px;--padding-bottom:10px;--padding-left:20px;--padding-right:20px;}.elementor-17 .elementor-element.elementor-element-ed53086{--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-5040ca7{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-87e94a1{text-align:center;}.elementor-17 .elementor-element.elementor-element-b1983e6{--padding-top:0px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-17 .elementor-element.elementor-element-ed53086{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-0ec671f{--width:100%;}.elementor-17 .elementor-element.elementor-element-cf1efad{text-align:center;}}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-c7c02b3{--width:20%;}.elementor-17 .elementor-element.elementor-element-fe0c916{--width:80%;}.elementor-17 .elementor-element.elementor-element-0ec671f{--width:20%;}}@media(max-width:1024px) and (min-width:768px){.elementor-17 .elementor-element.elementor-element-c7c02b3{--width:47%;}.elementor-17 .elementor-element.elementor-element-0ec671f{--width:47%;}}/* Start custom CSS for heading, class: .elementor-element-87e94a1 *//* Creates space on the left side of the title to fit the star and the gap */
.elementor-17 .elementor-element.elementor-element-87e94a1 {
    position: relative;
    padding-left: 25px; /* 15px star + 10px gap before the text starts */
    display: inline-block;
}

/* 1. SHADOW OF THE STAR (Background) */
.elementor-17 .elementor-element.elementor-element-87e94a1::before {
    content: "";
    position: absolute;
    
    /* Pushes it slightly right and down for the shadow effect */
    left: 2px; 
    top: 50%;
    transform: translateY(calc(-50% + 2px)); /* Centers vertically then adds 2px down */
    
    width: 15px; 
    height: 15px;
    background-color: #000000; 
    
    /* 4-point diamond star shape */
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    
    z-index: 9; 
}

/* 2. MAIN COLORED STAR (Foreground) */
.elementor-17 .elementor-element.elementor-element-87e94a1::after {
    content: "";
    position: absolute;
    
    /* Anchors the star to the far left of the padded space */
    left: 0; 
    top: 50%;
    transform: translateY(-50%); /* Perfectly centers the star vertically with the text */
    
    width: 15px; 
    height: 15px;
    background-color: #FADF0C; 
    
    /* 4-point diamond star shape */
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    
    z-index: 10; 
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-8e19593 *//* 1. Targets ONLY the title with the specific class */
.purple-circle-title .elementor-heading-title {
    position: relative !important;
    padding-left: 15px !important; 
    display: inline-block !important; 
}

/* 2. SHADOW (Background) */
.purple-circle-title .elementor-heading-title::before {
    content: "" !important;
    position: absolute !important;
    left: 1px !important; 
    top: 50% !important;
    transform: translateY(calc(-50% + 1px)) !important; 
    width: 8px !important; 
    height: 8px !important;
    background-color: #000000 !important; 
    border-radius: 50% !important;
    z-index: 9 !important; 
}

/* 3. MAIN COLORED CIRCLE (Foreground) */
.purple-circle-title .elementor-heading-title::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    width: 8px !important; 
    height: 8px !important;
    background-color: #C4A1FF !important; 
    border-radius: 50% !important;
    z-index: 10 !important; 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5040ca7 *//* Main container styling with subtle neo-brutalism shadow */
.elementor-17 .elementor-element.elementor-element-5040ca7 {
    border: 2px solid #000000; 
    border-radius: 100px; 
    
    /* Adds the neo-brutalism shadow: x-offset, y-offset, blur (0px for solid), color */
    box-shadow: 4px 4px 0px #000000;
    
    animation: floatAnim 3s ease-in-out infinite;
    
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Floating animation keyframes */
@keyframes floatAnim {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px); 
    }
    100% {
        transform: translateY(0px);
    }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-3b2900b *//* 1. NORMAL STATE NG MENU ITEMS */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu > li:not(.menu-btn-contact):not(.menu-btn-linkedin) > a {
    border: 2px solid transparent !important;
    transition: all 0.2s ease-in-out !important;
}

/* 2. HOVER AT ACTIVE STATE SA STANDARD MENU ITEMS */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu > li:not(.menu-btn-contact):not(.menu-btn-linkedin) > a:hover,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu > li.current-menu-item:not(.menu-btn-contact):not(.menu-btn-linkedin) > a,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu > li.current-menu-ancestor:not(.menu-btn-contact):not(.menu-btn-linkedin) > a,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu > li > a.elementor-item-active:not(.menu-btn-contact):not(.menu-btn-linkedin) {
    background-color: #FDE047 !important; /* Yellow background */
    border: 2px solid #000000 !important; /* Black border */
    box-shadow: 3px 3px 0px #000000 !important; /* Shadow */
    color: #000000 !important;
    border-radius: 0px !important;
    transform: translateY(-2px) !important; /* Slight lift */
}

/* 3. GET IN TOUCH BUTTON STYLE (Normal State) */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-contact > a {
    background-color: #FFD1FC !important;
    border: 2px solid #000000 !important;
    border-radius: 50px !important;
    color: #000000 !important;
    padding: 12px 24px 12px 45px !important; /* Extra left padding para sa asterisk */
    margin-left: 15px !important;
    font-weight: 900 !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important; 
    display: inline-flex !important;
    align-items: center !important;
}

/* GET IN TOUCH - Asterisk Icon (Walang highlight at pantay na) */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-contact > a::before {
    content: "*" !important;
    position: absolute !important;
    left: 18px !important; 
    top: 50% !important;
    transform: translateY(-35%) !important; /* Pinapantay sa text */
    font-size: 28px !important; 
    color: #000000 !important; 
    background: transparent !important; 
    -webkit-user-select: none !important;
    user-select: none !important;
    display: block !important; 
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 0 !important; 
}

/* GET IN TOUCH - Hover at Active State */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-contact > a:hover,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu li.menu-btn-contact.current-menu-item > a,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-contact > a.elementor-item-active {
    box-shadow: 4px 4px 0px #000000 !important;
    transform: translateY(-2px) !important;
}

/* 4. LINKEDIN ICON STYLE (Normal State) */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-linkedin > a {
    background-color: #E8F59B !important;
    border: 2px solid #000000 !important;
    border-radius: 50% !important;
    color: #000000 !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    margin-left: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    transition: all 0.2s ease-in-out !important;
}

/* LINKEDIN - Hover at Active State */
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-linkedin > a:hover,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu li.menu-btn-linkedin.current-menu-item > a,
.elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu .menu-btn-linkedin > a.elementor-item-active {
    box-shadow: 4px 4px 0px #000000 !important;
    transform: translateY(-2px) !important;
}

/* 5. MOBILE COMPLIANCE */
@media (max-width: 767px) {
    .elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu--dropdown .menu-btn-contact > a {
        width: max-content !important;
        margin: 15px auto !important;
    }
    
    .elementor-17 .elementor-element.elementor-element-3b2900b .elementor-nav-menu--dropdown .menu-btn-linkedin > a {
        margin: 10px auto 20px auto !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5378e9e *//* Sinesiguro na full width yung container */

.elementor-17 .elementor-element.elementor-element-5378e9e {

    width: 100%;

    position: relative;

    /* Optional: Dagdag space sa ilalim para hindi dumikit yung text sa border */

    padding-bottom: 20px; 

}



/* Ito yung gumagawa ng stitch border sa bottom */

.elementor-17 .elementor-element.elementor-element-5378e9e::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px; /* Kapal ng stitch */

    

    /* Palitan ang #333333 kung anong kulay ang gusto mo */

    /* Ang 60% ay yung dash, 40% ay yung gap */

    background-image: linear-gradient(to right, #333333 60%, transparent 40%);

    

    /* 12px ang total width ng isang dash+gap combo. Pwede mo liitan (e.g., 8px 1px) */

    background-size: 12px 1px; 

    background-repeat: repeat-x;

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b1983e6 *//* Sinesiguro na full width yung container */
.elementor-17 .elementor-element.elementor-element-b1983e6 {
    width: 100%;
    position: relative;
    /* Optional: Dagdag space sa ilalim para hindi dumikit yung text sa border */
    padding-bottom: 20px; 
}

/* Ito yung gumagawa ng stitch border sa bottom */
.elementor-17 .elementor-element.elementor-element-b1983e6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px; /* Kapal ng stitch */
    
    /* Palitan ang #333333 kung anong kulay ang gusto mo */
    /* Ang 60% ay yung dash, 40% ay yung gap */
    background-image: linear-gradient(to right, #333333 60%, transparent 40%);
    
    /* 12px ang total width ng isang dash+gap combo. Pwede mo liitan (e.g., 8px 1px) */
    background-size: 12px 1px; 
    background-repeat: repeat-x;
}/* End custom CSS */