.elementor-8844 .elementor-element.elementor-element-810d8bc{--spacer-size:50px;}/* Start custom CSS for html, class: .elementor-element-7bd31b8 *//* =========================
STICKY HEADER
========================= */

.sticky-header{
position:fixed;
top:0;
left:0;
width:100%;
background:#000000;
z-index:9999;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.sticky-inner{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 30px;
}

.sticky-logo{
font-weight:900;
font-size:18px;
letter-spacing:1px;
color:#ffffff;
}

.sticky-button{
background:#ff3b8d;
color:#ffffff;
padding:12px 30px;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:0.3s ease;
}

.sticky-button:hover{
background:#e63278;
transform:translateY(-2px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c591cfd *//* =========================
HERO SECTION
========================= */

.hero-section{
background:#ffffff;
padding:120px 30px 140px;
text-align:center;
}

/* Headline */

.hero-title{
font-family:Inter, sans-serif;
font-size:clamp(44px,7vw,90px);
font-weight:900;
line-height:0.95;
margin-bottom:50px;
color:#000;
}

/* Image Wrapper */

.hero-image-wrap{
position:relative;
width:100%;
max-width:950px;
height:520px;
margin:0 auto 70px;
border-radius:32px;
overflow:hidden;
background:url("https://www.smoothenglishcompany.com/wp-content/uploads/2026/01/herosectionasia.jpg") center top / cover no-repeat;
box-shadow:0 40px 80px rgba(0,0,0,0.25);
filter:contrast(1.08) saturate(1.05);
}

/* Pain Question */

.hero-subheading{
position:absolute;
left:40px;
top:50%;
transform:translateY(-50%);
max-width:480px;
color:#000000;
font-family:Inter, sans-serif;
font-weight:900;
font-size:clamp(38px,6vw,58px);
line-height:1.05;
letter-spacing:-0.5px;
text-align:left;
opacity:0;
animation:heroSlideIn 1.1s cubic-bezier(.16,1,.3,1) forwards;
animation-delay:0.3s;
}

/* Floating Badges */

.hero-badge{
position:absolute;
background:#ffffff;
padding:12px 20px;
border-radius:40px;
font-weight:700;
font-size:14px;
color:#000;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
animation:heroFloat 6s ease-in-out infinite;
}

.badge-one{
top:30px;
left:30px;
}

.badge-two{
bottom:30px;
right:30px;
animation-delay:1.5s;
}

/* CTA */

.hero-cta{
display:inline-block;
background:#ff3b8d;
color:#ffffff;
padding:16px 44px;
border-radius:50px;
text-decoration:none;
font-weight:700;
font-size:16px;
transition:0.3s ease;
}

.hero-cta:hover{
background:#e63278;
transform:translateY(-3px);
}

/* Animations */

@keyframes heroFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}
}

@keyframes heroSlideIn{
from{
opacity:0;
transform:translate(-40px,-50%);
}
to{
opacity:1;
transform:translate(0,-50%);
}
}

/* Responsive */

@media(max-width:900px){

.hero-image-wrap{
height:420px;
}

.hero-subheading{
font-size:clamp(28px,6vw,40px);
left:30px;
}

}

@media(max-width:600px){

.hero-image-wrap{
height:360px;
}

.hero-subheading{
left:20px;
right:20px;
max-width:100%;
font-size:26px;
}

}/* End custom CSS */
/* Start custom CSS for spacer, class: .elementor-element-810d8bc */section-fade
accent-line/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-90c2c77 *//* =========================
SECTION 2 – SITUATIONS (DARK)
========================= */

.situations-section{
background:#000000;
padding:140px 30px;
}

/* Title */

.situations-title{
max-width:1200px;
margin:0 auto 80px;
font-family:Inter, sans-serif;
font-size:clamp(36px,5vw,56px);
font-weight:900;
color:#ffffff;
}

/* Grid */

.situations-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:36px;
}

/* Card */

.situation-card{
transition:transform 0.4s ease;
}

.situation-card:hover{
transform:translateY(-10px);
}

/* Image */

.situation-image{
width:100%;
height:420px;
border-radius:28px;
background-size:cover;
background-position:center;
margin-bottom:22px;
box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

/* Text */

.situation-card h3{
font-size:22px;
font-weight:700;
color:#ffffff;
margin-bottom:6px;
}

.situation-card p{
font-size:16px;
color:#ffffff;
opacity:0.75;
line-height:1.5;
}

/* Highlight colors */

.highlight-yellow{
color:#f5c34b;
font-weight:700;
}

.highlight-red{
color:#e63946;
font-weight:700;
}

/* Responsive */

@media(max-width:1000px){
.situations-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.situations-grid{
grid-template-columns:1fr;
}

.situation-image{
height:340px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-52a17d7 *//* =========================
SECTION 3 – AUTHORITY
========================= */

.authority-section{
background:#ffffff;
padding:160px 30px;
}

/* Grid */

.authority-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

/* Left Content */

.authority-label{
display:block;
font-size:14px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:24px;
color:#000;
}

.authority-title{
font-family:Inter, sans-serif;
font-size:clamp(36px,5vw,60px);
font-weight:900;
line-height:1.05;
margin-bottom:32px;
color:#000;
}

.authority-text{
font-size:18px;
line-height:1.7;
color:#000;
opacity:0.8;
margin-bottom:22px;
max-width:520px;
}

/* CTA */

.authority-cta{
display:inline-block;
margin-top:30px;
background:#ff3b8d;
color:#ffffff;
padding:16px 44px;
border-radius:50px;
text-decoration:none;
font-weight:700;
font-size:16px;
transition:0.3s ease;
}

.authority-cta:hover{
background:#e63278;
transform:translateY(-3px);
}

/* Right Image */

.authority-image{
width:100%;
height:620px;
border-radius:32px;
background:url("https://www.smoothenglishcompany.com/wp-content/uploads/2026/01/webstie-7.jpg") center / cover no-repeat;
box-shadow:0 30px 70px rgba(0,0,0,0.2);
}

/* Responsive */

@media(max-width:900px){

.authority-grid{
grid-template-columns:1fr;
gap:60px;
}

.authority-image{
height:420px;
}

}
/* Authority headline size adjustment */

.authority-title{
font-size:clamp(28px,4vw,46px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d0ac301 *//* =========================
SECTION 4 – OUTCOMES (DARK CARDS)
========================= */

.outcomes-section{
background:#000000;
padding:160px 30px;
}

/* Title */

.outcomes-title{
max-width:1200px;
margin:0 auto 80px;
font-family:Inter, sans-serif;
font-size:clamp(34px,5vw,56px);
font-weight:900;
color:#ffffff;
}

/* Grid */

.outcomes-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
}

/* Card */

.outcome-item{
background:rgba(255,255,255,0.04);
padding:48px 40px;
border-radius:28px;
box-shadow:0 20px 40px rgba(0,0,0,0.4);
transition:all 0.45s cubic-bezier(.16,1,.3,1);
}

.outcome-item:hover{
transform:translateY(-12px) scale(1.04);
background:rgba(255,255,255,0.08);
}

/* Text */

.outcome-item h3{
font-size:22px;
font-weight:700;
margin-bottom:12px;
color:#ffffff;
}

.outcome-item p{
font-size:16px;
line-height:1.6;
color:#ffffff;
opacity:0.75;
max-width:320px;
}

/* Responsive */

@media(max-width:1000px){
.outcomes-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.outcomes-grid{
grid-template-columns:1fr;
}
}
/* =========================
OUTCOMES CARD GLOW ENHANCEMENT
========================= */

.outcome-item{
position:relative;
overflow:hidden;
}

/* Outer glow */
.outcome-item::before{
content:"";
position:absolute;
inset:-1px;
border-radius:28px;
background:linear-gradient(
120deg,
rgba(255,255,255,0.15),
rgba(255,255,255,0.02),
rgba(255,255,255,0.15)
);
opacity:0;
transition:opacity 0.5s ease;
}

/* Inner light sweep */
.outcome-item::after{
content:"";
position:absolute;
top:-100%;
left:-100%;
width:200%;
height:200%;
background:radial-gradient(circle at center,
rgba(255,255,255,0.12),
transparent 60%);
opacity:0;
transition:opacity 0.5s ease;
}

.outcome-item:hover::before,
.outcome-item:hover::after{
opacity:1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1bf11bc *//* =========================
SECTION 5 – METHOD
========================= */

.method-section{
background:#ffffff;
padding:160px 30px;
}

/* Grid */

.method-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
}

/* Left Image */

.method-image{
width:100%;
height:620px;
border-radius:32px;
background:url("https://www.smoothenglishcompany.com/wp-content/uploads/2026/01/website-business-keith.jpg") center / cover no-repeat;
box-shadow:0 30px 70px rgba(0,0,0,0.2);
}

/* Label */

.method-label{
display:block;
font-size:14px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:24px;
color:#000;
}

/* Title */

.method-title{
font-family:Inter, sans-serif;
font-size:clamp(34px,5vw,54px);
font-weight:900;
line-height:1.05;
margin-bottom:30px;
color:#000;
}

/* Text */

.method-text{
font-size:18px;
line-height:1.7;
color:#000;
opacity:0.8;
margin-bottom:22px;
max-width:520px;
}

/* CTA */

.method-cta{
display:inline-block;
margin-top:30px;
background:#ff3b8d;
color:#ffffff;
padding:16px 44px;
border-radius:50px;
text-decoration:none;
font-weight:700;
font-size:16px;
transition:0.3s ease;
}

.method-cta:hover{
background:#e63278;
transform:translateY(-3px);
}

/* Responsive */

@media(max-width:900px){

.method-grid{
grid-template-columns:1fr;
gap:60px;
}

.method-image{
height:420px;
}

}
.method-image{
position:relative;
width:100%;
height:620px;
border-radius:32px;
background:#f3f3f3 url("https://www.smoothenglishcompany.com/wp-content/uploads/2026/01/website-business-keith.jpg") center / contain no-repeat;
box-shadow:
0 30px 70px rgba(0,0,0,0.35),
0 0 0 2px rgba(198,46,73,0.9),
0 0 40px rgba(198,46,73,0.55);
transition:transform 0.5s cubic-bezier(.16,1,.3,1);
overflow:hidden;
}

/* Soft inner vignette */
.method-image::after{
content:"";
position:absolute;
inset:0;
border-radius:32px;
background:radial-gradient(circle at center,
rgba(0,0,0,0),
rgba(0,0,0,0.25));
pointer-events:none;
}

.method-image:hover{
transform:translateY(-10px) scale(1.02);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2ed359a *//* =========================
SECTION 6 – PROCESS (DARK CARDS)
========================= */

.process-section{
background:#000000;
padding:160px 30px;
}

/* Title */

.process-title{
max-width:1200px;
margin:0 auto 100px;
font-family:Inter, sans-serif;
font-size:clamp(34px,5vw,56px);
font-weight:900;
color:#ffffff;
}

/* Grid */

.process-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:80px;
}

/* Card */

.process-step{
background:rgba(255,255,255,0.04);
padding:48px 42px;
border-radius:28px;
box-shadow:0 25px 50px rgba(0,0,0,0.5);
transition:all 0.45s cubic-bezier(.16,1,.3,1);
}

.process-step:hover{
transform:translateY(-12px) scale(1.04);
background:rgba(255,255,255,0.08);
}

/* Number */

.step-number{
display:block;
font-size:13px;
font-weight:800;
letter-spacing:1.5px;
margin-bottom:18px;
color:#ffffff;
}

/* Headings */

.process-step h3{
font-size:22px;
font-weight:700;
margin-bottom:12px;
color:#F7C600;
}

/* Text */

.process-step p{
font-size:16px;
line-height:1.6;
color:#ffffff;
opacity:0.75;
max-width:320px;
}

/* Responsive */

@media(max-width:900px){

.process-grid{
grid-template-columns:1fr;
gap:60px;
}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bc46634 *//* =========================
CONTACT STRIP / FOOTER
========================= */

.contact-strip-section{
background:#ffffff;
padding:140px 30px 160px;
}

/* Image */

.contact-strip-image{
max-width:1200px;
height:420px;
margin:0 auto 100px; /* MORE SPACE BELOW IMAGE */
background:url("https://www.smoothenglishcompany.com/wp-content/uploads/2026/01/ChatGPT-Image-Jan-27-2026-03_01_21-PM.jpg") center / cover no-repeat;
}

/* Bottom Row */

.contact-strip-bottom{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:flex-start;
}

/* Brand */

.contact-brand h2{
font-family:Inter, sans-serif;
font-size:clamp(40px,6vw,80px);
font-weight:900;
letter-spacing:-1px;
margin:0;
color:#000;
}

/* Contact Info */

.contact-details p{
font-size:18px;
margin:6px 0;
color:#000;
}

/* Responsive */

@media(max-width:800px){

.contact-strip-bottom{
flex-direction:column;
gap:30px;
}

}/* End custom CSS */