.elementor-28339 .elementor-element.elementor-element-4f559099:not(.elementor-motion-effects-element-type-background), .elementor-28339 .elementor-element.elementor-element-4f559099 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#061F52;}.elementor-28339 .elementor-element.elementor-element-4f559099{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:40px 40px 40px 40px;}.elementor-28339 .elementor-element.elementor-element-4f559099 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.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-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS *//* =========================================================
   LOCLshop Hero Section - Refined Final CSS
========================================================= */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================
MAIN HERO
========================= */


.locl-ai-hero{

position:relative;
overflow:hidden;
min-height:100vh;

font-family:'Inter',Arial,sans-serif;

background:
radial-gradient(circle at 50% 15%,rgba(0,174,238,.35),transparent 32%),
radial-gradient(circle at 0% 50%,rgba(0,120,255,.25),transparent 35%),
linear-gradient(180deg,#063B85 0%,#031B46 100%);

color:white;

}



.locl-ai-hero *{

font-family:'Inter',Arial,sans-serif;

}





/* Glow */

.locl-ai-hero:before{

content:"";

position:absolute;

width:900px;
height:900px;

top:-400px;
left:-300px;

border-radius:50%;

background:rgba(0,174,238,.18);

filter:blur(100px);

}



.locl-ai-hero:after{

content:"";

position:absolute;

width:700px;
height:700px;

right:-300px;
bottom:-250px;

border-radius:50%;

background:rgba(0,100,255,.20);

filter:blur(100px);

}





/* =========================
HEADER
========================= */


.locl-nav{

position:relative;

z-index:5;

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 40px;

}



.locl-logo img{

width:150px;

height:auto;

display:block;

}




.menu{

position:absolute;

left:55%;

transform:translateX(-50%);

display:flex;

align-items:center;

gap:45px;

}



.menu a{

color:white;

font-size:15px;

font-weight:500;

text-decoration:none;

transition:.3s ease;

}



.menu a:hover{

color:#00AEEE;

}





/* =========================
HERO TITLE
========================= */


.locl-ai-hero h1{

position:relative;

z-index:2;

margin-top:60px;

text-align:center;

color:white!important;

font-size:60px;

line-height:1.08;

font-weight:700;

letter-spacing:-2px;

}



.locl-ai-hero h1 span{

color:#00AEEE!important;

}




.locl-ai-hero .elementor-text-editor{

position:relative;

z-index:2;

max-width:850px;

margin:25px auto;

text-align:center;

font-size:19px;

line-height:1.6;

color:#D8E9FF;

}




/* =========================
CARDS
========================= */


.locl-cards{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 1.05fr 1fr;

align-items:center;

gap:35px;

margin-top:55px;

}





/* =========================
SIDE CARDS
========================= */


.locl-card{

text-align:center;

position:relative;

}



.image-placeholder{

width:330px;

height:330px;

margin:auto;

border-radius:50%;

overflow:hidden;

border:7px solid #00AEEE;

box-shadow:

0 0 40px rgba(0,174,238,.55);

}



.image-placeholder img{

width:100%;

height:100%;

object-fit:cover;

}





/* Labels */


.role-pill{

display:inline-block;

margin-top:25px;

padding:8px 28px;

border-radius:30px;

font-size:14px;

font-weight:700;

letter-spacing:2px;

}



.brand-pill{

background:#155BB8;

color:white;

}



.shopper-pill{

background:#35E3B1;

color:#003B46;

}







/* Side Text */


.locl-card h3{

font-size:34px;

line-height:1.15;

font-weight:700;

color:white;

margin:18px 0;

}



.locl-card p{

font-size:18px;

line-height:1.6;

color:#D8E9FF;

margin-bottom:25px;

}





/* =========================
BUTTONS
========================= */


.locl-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border-radius:40px;

font-size:18px;

font-weight:600;

text-decoration:none;

transition:.3s;

}



.brand-btn{

background:#3478FF;

color:white;

}



.brand-btn:hover{

background:#2465e5;

color:white;

}



.shopper-btn{

background:#35E3B1;

color:#003B46;

}



.shopper-btn:hover{

background:#22c99a;

color:#003B46;

}





/* =========================
CENTER CARD
========================= */


.locl-center{

background:rgba(255,255,255,.10);

border:1px solid rgba(255,255,255,.25);

backdrop-filter:blur(20px);

border-radius:35px;

padding:45px 35px;

text-align:center;

box-shadow:

0 25px 70px rgba(0,0,0,.35);

}





.ai-icon{

width:85px;

height:85px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#00AEEE;

color:white;

font-size:40px;

font-weight:600;

}





.ai-label{

margin-top:25px;

font-size:13px;

letter-spacing:4px;

color:#D8E9FF;

}



.locl-center h2{

font-size:42px;

line-height:1.15;

margin-top:20px;

color:white;

}



.locl-center span{

color:#00AEEE;

}



.locl-center p{

font-size:20px;

color:white;

}





/* =========================
FEATURE PILL
========================= */


.pill{

display:flex;

justify-content:space-around;

align-items:center;

gap:35px;

background:transparent;

padding:20px 10px;

border-radius:0;

}




.pill-item{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:12px;

text-align:center;

font-size:15px;

color:white;

}



.pill-icon{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

}



.pill-icon svg{

width:38px;

height:38px;

fill:none;

stroke:#00AEEE;

stroke-width:3;

stroke-linecap:round;

stroke-linejoin:round;

}



.pill-item:nth-child(2) .pill-icon svg rect{

fill:#00AEEE;

stroke:none;

}



.pill-item:nth-child(3) .pill-icon svg{

stroke:#35E3B1;

}




/* =========================
BADGES
========================= */


.floating-badge{

position:absolute;

background:white;

color:#063B85;

padding:14px 22px;

border-radius:30px;

font-size:14px;

font-weight:600;

box-shadow:0 15px 40px rgba(0,0,0,.25);

}





/* =========================
FOOTER
========================= */


.locl-ai-hero .elementor-widget-text-editor:last-child{

position:relative;

z-index:2;

text-align:center;

margin-top:50px;

color:#B9D7FF;

letter-spacing:2px;

}





/* =========================
TABLET
========================= */


@media(max-width:1024px){


.locl-ai-hero h1{

font-size:42px;

}


.locl-cards{

grid-template-columns:1fr;

}


.image-placeholder{

width:280px;

height:280px;

}


}





/* =========================
MOBILE
========================= */


@media(max-width:600px){


.locl-ai-hero{

padding:20px!important;

}



.locl-nav{

flex-direction:column;

gap:25px;

padding:20px;

}



.locl-logo img{

width:130px;

}



.menu{

position:static;

transform:none;

gap:20px;

}



.locl-ai-hero h1{

font-size:34px;

}



.locl-center h2{

font-size:30px;

}



.locl-card h3{

font-size:28px;

}



.pill{

flex-direction:column;

}



.locl-btn{

font-size:16px;

padding:14px 30px;

}


}


/* =====================================
   HEADER MENU IMPROVEMENT
===================================== */


.locl-nav{
    position:relative;
    padding:20px 50px;
}



/* Center menu correctly */

.menu{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:55px;

}



/* Menu links */

.menu a{

    position:relative;

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    letter-spacing:.2px;

    padding:8px 0;

    transition:.3s ease;

}



/* Hover effect */

.menu a:hover{

    color:#00AEEE;

}



/* Animated underline */

.menu a:after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0%;

    height:2px;

    background:#00AEEE;

    border-radius:10px;

    transition:.3s ease;

}



.menu a:hover:after{

    width:100%;

}





/* Slight glass hover */

.menu a:hover{

    text-shadow:

    0 0 15px rgba(0,174,238,.6);

}





/* Mobile */

@media(max-width:768px){

.menu{

    position:static;

    transform:none;

    gap:25px;

}

}/* End custom CSS */