/* ===== BASE STYLES ===== */
:root{
 --primary:#0052cc;
 --primary-dark:#003d99;
 --primary-light:#e6f0ff;
 --secondary:#00a651;
 --secondary-dark:#008c44;
 --accent:#ff6b35;
 --text:#1a1a2e;
 --text-light:#555;
 --text-muted:#888;
 --bg:#f5f7fa;
 --white:#fff;
 --border:#e0e0e0;
 --shadow:0 4px 20px rgba(0,0,0,0.08);
 --shadow-lg:0 10px 40px rgba(0,0,0,0.12);
 --radius:12px;
 --radius-lg:20px;
}
 
 *{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
 
 html{
 scroll-behavior:smooth;
}
 
 body{
 font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 line-height:1.6;
 color:var(--text);
 background:var(--white);
}
 
 .container{
 max-width:1200px;
 margin:0 auto;
 padding:0 24px;
}
 
 img{
 max-width:100%;
 height:auto;
}
 
 a{
 text-decoration:none;
 color:inherit;
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 /* ===== HEADER & NAVBAR ===== */
 header{
 position:sticky;
 top:0;
 z-index:1000;
 background:var(--white);
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
 
 header .header-top{
 background:var(--primary);
 color:var(--white);
 padding:8px 0;
 font-size:14px;
}
 
 header .header-top .container{
 display:flex;
 justify-content:space-between;
 align-items:center;
}
 
 header .header-top a{
 color:var(--white);
 font-weight:600;
 background:rgba(255,255,255,0.15);
 padding:6px 16px;
 border-radius:6px;
 border:1px solid rgba(255,255,255,0.3);
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 header .header-top a:hover{
 background:var(--white);
 color:var(--primary);
 transform:translateY(-1px);
 box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
 
 header nav{
 background:var(--white);
 padding:16px 0;
}
 
 header nav .container{
 display:flex;
 align-items:center;
 justify-content:space-between;
}
 
 header nav .nav-links{
 display:flex;
 list-style:none;
 gap:32px;
}
 
 header nav .nav-links a{
 color:var(--text);
 font-weight:500;
 font-size:15px;
}
 
 header nav .nav-links a:hover{
 color:var(--primary);
}
 
 header nav .cta-button{
 background:var(--secondary);
 color:var(--white);
 padding:10px 20px;
 border-radius:8px;
 font-weight:600;
 font-size:14px;
}
 
 header nav .cta-button:hover{
 background:var(--secondary-dark);
}
 
 .navbar{
 background:var(--white);
 min-height:70px;/* Reserve space to prevent CLS */
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:1000;
 padding:16px 0;
}
 
 .navbar-container{
 display:flex;
 align-items:center;
 justify-content:space-between;
}
 
 .logo{
 display:flex;
 align-items:center;
 gap:10px;
 font-size:18px;
 color:var(--text);
}
 
 .logo-icon{
 background:var(--primary);
 color:var(--white);
 padding:6px 10px;
 border-radius:8px;
 font-weight:700;
 font-size:14px;
}
 
 .logo-text strong{
 color:var(--primary);
}
 
 .nav-menu{
 display:flex;
 gap:32px;
}
 
 .nav-menu a{
 color:var(--text);
 font-weight:500;
 font-size:15px;
}
 
 .nav-menu a:hover{
 color:var(--primary);
}
 
 .nav-cta{
 display:flex;
 align-items:center;
 gap:8px;
 background:var(--secondary);
 color:var(--white);
 padding:10px 20px;
 border-radius:8px;
 font-weight:600;
 font-size:14px;
}
 
 .nav-cta:hover{
 background:var(--secondary-dark);
}
 
 .whatsapp-icon{
 display:flex;
 align-items:center;
}
 
 /* ===== BUTTONS ===== */
 .btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding:14px 28px;
 border-radius:10px;
 font-weight:600;
 font-size:16px;
 cursor:pointer;
 border:none;
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .btn-primary{
 background:var(--secondary);
 color:var(--white);
}
 
 .btn-primary:hover{
 background:var(--secondary-dark);
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(0,166,81,0.3);
}
 
 .btn-outline{
 background:transparent;
 color:var(--primary);
 border:2px solid var(--primary);
 min-height:48px;
 padding:12px 24px;
}
 
 .btn-outline:hover{
 background:var(--primary);
 color:var(--white);
}
 
 .btn-white{
 background:var(--white);
 color:var(--primary);
}
 
 .btn-white:hover{
 background:var(--primary-light);
}
 
 .btn-outline-white{
 background:transparent;
 color:var(--white);
 border:2px solid var(--white);
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .btn-outline-white:hover{
 background:var(--white);
 color:var(--primary);
 transform:translateY(-2px);
 box-shadow:0 4px 15px rgba(255,255,255,0.3);
}
 
 .btn-secondary{
 background:transparent;
 color:var(--white);
 border:2px solid var(--white);
 padding:14px 28px;
 border-radius:10px;
 font-weight:600;
 font-size:16px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .btn-secondary:hover{
 background:var(--white);
 color:var(--primary);
 transform:translateY(-2px);
 box-shadow:0 4px 15px rgba(255,255,255,0.3);
}
 
 .btn-lg{
 padding:16px 32px;
 font-size:17px;
}
 
 .btn-block{
 width:100%;
}
 
 /* ===== HERO ===== */
 .hero{
 background:url('../images/Backgroud Colour.webp') center center / cover no-repeat;
 color:var(--white);
 padding:40px 0 60px;
 position:relative;
}
 
 .hero-content{
 display:grid;
 grid-template-columns:minmax(280px, 1fr) minmax(350px, 1.2fr) minmax(200px, 1fr);
 gap:20px;
 align-items:center;
 max-width:1200px;
 margin:0 auto;
 margin-top:30px;
 contain:layout style;
}
 
 .hero-left{
 text-align:left;
 margin-left:120px;
 min-width:280px;
 min-height:200px;
}
 
 .hero-badge-wrapper{
 text-align:center;
 margin-top:0;
 margin-bottom:15px;
}
 
 .hero-text{
 text-align:left;
}
 
 .hero-image{
 display:flex;
 align-items:flex-end;
 justify-content:center;
 padding-top:40px;
}
 
 .hero-image img{
 max-width:100%;
 height:auto;
 max-height:340px;
 object-fit:contain;
 filter:drop-shadow(0 10px 30px rgba(0,0,0,0.25));
}
 
 .hero-right{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:20px;
 min-width:200px;
 min-height:250px;
}
 
 .hero-trust-badge{
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 min-height:80px;
}
 
 .hero-trust-badge img{
 width:120px;
 height:37px;
 aspect-ratio:120 / 37;
 margin-bottom:10px;
 filter:drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}
 
 .hero-trust-badge .trust-text{
 font-size:12px;
 font-weight:700;
 color:var(--white);
 text-transform:uppercase;
 letter-spacing:0.8px;
 line-height:1.5;
 margin:0;
 text-shadow:0 2px 4px rgba(0,0,0,0.2);
}
 
 /* Hero Center - Product Image */
 .hero-center{
 display:flex;
 align-items:center;
 justify-content:center;
}
 
 .hero-center img{
 width:400px;
 height:auto;
 object-fit:contain;
 filter:drop-shadow(0 15px 40px rgba(0,0,0,0.3));
}
 
 /* Hero CTA Buttons */
 .btn-whatsapp{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 background:var(--secondary);
 color:var(--white);
 padding:14px 28px;
 border-radius:50px;
 font-weight:600;
 font-size:15px;
 transition:transform 0.25s ease, opacity 0.25s ease;
 box-shadow:0 4px 15px rgba(0,166,81,0.3);
 border:2px solid var(--secondary);
 min-width:220px;
}
 
 .btn-whatsapp:hover{
 background:var(--secondary-dark);
 border-color:var(--secondary-dark);
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(0,166,81,0.4);
}
 
 .btn-phone{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 background:#0047b3;
 color:var(--white);
 padding:14px 28px;
 border-radius:50px;
 font-weight:600;
 font-size:15px;
 transition:transform 0.25s ease, opacity 0.25s ease;
 box-shadow:0 4px 15px rgba(0,71,179,0.3);
 border:2px solid var(--white);
 min-width:220px;
}
 
 .btn-phone:hover{
 background:var(--white);
 color:#0047b3;
 border-color:var(--white);
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(255,255,255,0.3);
}
 
 .btn-phone:hover svg{
 stroke:#0047b3;
}
 
 .hero-badge{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--white);
 color:#0047b3;
 height:34px;
 padding:0 32px;
 border-radius:50px;
 font-size:14px;
 font-weight:600;
 font-style:italic;
 margin-bottom:15px;
 box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
 
 .hero-title{
 font-size:54px;
 font-weight:700;
 line-height:1.2;
 margin-bottom:15px;
 text-align:center;
 color:var(--white);
}
 
 .hero-title .highlight{
 color:#99fbff;
}
 
 .hero-subtitle{
 font-size:16px;
 opacity:0.95;
 margin-bottom:28px;
 line-height:1.7;
 font-style:italic;
 text-align:left;
 max-width:340px;
}
 
 .text-certified{
 color:#99fbff;
 font-weight:600;
 font-style:italic;
}
 
 .text-highlight{
 color:#99fbff;
 font-weight:700;
 font-style:italic;
}
 
 .hero-prices{
 display:flex;
 flex-direction:column;
 gap:10px;
 width:100%;
 max-width:240px;
}
 
 .price-card{
 background:var(--white);
 padding:8px 20px;
 border-radius:8px;
 display:flex;
 align-items:baseline;
 justify-content:center;
 gap:5px;
 border:none;
 box-shadow:0 4px 15px rgba(0,0,0,0.1);
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .price-card:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
 
 .price-label{
 font-size:16px;
 color:#0047b3;
 font-weight:600;
}
 
 .price-amount{
 font-size:16px;
 color:#0047b3;
}
 
 .price-amount strong{
 font-size:28px;
 font-weight:700;
 color:#0047b3;
}
 
 .hero-cta{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:14px;
}
 
 /* New Mobile Hero Styles */
 .hero-tagline{
 display:none;
}
 
 .hero-product{
 display:none;
}
 
 .hero-price-tagline{
 display:none;
}
 
 .hero-price-combined{
 display:none;
}
 
 .hero-cta-stack{
 display:none;
}
 
 .hero-desktop-only{
 display:grid;
}
 
 /* ===== FEATURES BAR ===== */
 .features-bar{
 position:relative;
 padding:0;
 margin-top:-60px;
 z-index:10;
}
 
 .features-bar::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:60px;
 background:transparent;
 z-index:-1;
}
 
 .features-bar::after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:calc(100% - 60px);
 background:var(--bg);
 z-index:-1;
}
 
 .features-grid{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:12px;
 background:#043c92;
 padding:14px 24px;
 border-radius:var(--radius-lg);
 box-shadow:0 8px 30px rgba(0,0,0,0.15);
}
 
 .feature-item{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 padding:8px 6px;
 background:transparent;
 border-radius:var(--radius);
 transition:transform 0.25s ease, opacity 0.25s ease;
}
 
 .feature-item:hover{
 background:rgba(255,255,255,0.1);
}
 
 .feature-icon{
 color:var(--white);
 margin-bottom:4px;
}
 
 .feature-icon svg{
 width:28px;
 height:28px;
}
 
 .feature-text{
 display:flex;
 flex-direction:column;
 gap:2px;
}
 
 .feature-text strong{
 font-size:14px;
 font-weight:800;
 color:#ffbd59;
 letter-spacing:0.5px;
 text-transform:uppercase;
 font-style:italic;
}
 
 .feature-text span{
 font-size:11px;
 color:var(--white);
 line-height:1.5;
}
 
 /* ===== RECOMMEND SECTION ===== */
 .recommend-section{
 padding:70px 0;
 background:#f5f5f5;
}
 
 .recommend-layout{
 display:grid;
 grid-template-columns:1fr 2fr;
 gap:40px;
 align-items:center;
 margin-bottom:40px;
}
 
 .recommend-image{
 display:flex;
 align-items:center;
 justify-content:center;
 position:relative;
}
 
 .recommend-badge{
 position:absolute;
 top:10px;
 left:10px;
 background:linear-gradient(135deg, #00a651 0%, #00875a 100%);
 color:var(--white);
 padding:8px 16px;
 border-radius:8px;
 font-size:13px;
 font-weight:700;
 font-style:italic;
 box-shadow:0 4px 12px rgba(0,166,81,0.3);
 z-index:5;
}
 
 .recommend-image img{
 max-width:100%;
 max-height:450px;
 object-fit:contain;
 filter:drop-shadow(0 10px 30px rgba(0,0,0,0.15));
}
 
 .recommend-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:16px;
}
 
 .recommend-card{
 background:linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
 border:1px solid #e8eef3;
 border-radius:16px;
 padding:28px 24px;
 text-align:center;
 transition:transform 0.3s ease, opacity 0.3s ease;
}
 
 .recommend-card:hover{
 transform:translateY(-5px);
 box-shadow:0 12px 30px rgba(4, 60, 146, 0.12);
 border-color:#043c92;
}
 
 .recommend-img{
 width:100px;
 height:100px;
 margin:0 auto 16px;
 border-radius:50%;
 overflow:hidden;
 border:3px solid #043c92;
 box-shadow:0 4px 15px rgba(4, 60, 146, 0.2);
}
 
 .recommend-img img{
 width:100%;
 height:100%;
 object-fit:cover;
}
 
 .recommend-card h3{
 font-size:18px;
 font-weight:700;
 color:#043c92;
 margin-bottom:10px;
}
 
 .recommend-card p{
 font-size:14px;
 color:#5a6978;
 line-height:1.6;
}
 
 .recommend-cta{
 text-align:center;
 padding-top:20px;
}
 
 .recommend-cta p{
 font-size:16px;
 color:var(--text-light);
 margin-bottom:16px;
}
 
 .recommend-cta .btn-primary{
 background:linear-gradient(135deg, #00a651 0%, #00875a 100%);
 padding:14px 28px;
 font-size:16px;
}
 
 /* New Recommend Section Styles */
 .recommend-product-box{
 background:transparent;
 border-radius:0;
 padding:20px 0;
 margin-bottom:24px;
 position:relative;
 text-align:center;
}
 
 .recommend-product-content{
 display:inline-flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
 text-align:center;
}
 
 .recommend-product-image{
 flex:0 0 auto;
 display:flex;
 flex-direction:column;
 align-items:center;
}
 
 .recommend-product-image .recommend-badge{
 position:relative;
 top:auto;
 left:auto;
 display:inline-block;
 margin-bottom:12px;
}
 
 .recommend-product-image img{
 max-width:320px;
 height:auto;
 filter:drop-shadow(0 8px 20px rgba(0,0,0,0.15));
 margin-top:-15px;
}
 
 .recommend-product-info{
 flex:1;
}
 
 .product-label-green{
 display:inline-block;
 color:#007a3d;
 font-size:22px;
 font-weight:800;
 margin-bottom:4px;
}
 
 .recommend-product-info h3{
 font-size:28px;
 font-weight:800;
 color:#043c92;
 line-height:1.2;
 margin-bottom:16px;
}
 
 .recommend-product-info p{
 font-size:15px;
 color:#5a6978;
 line-height:1.6;
}
 
 .recommend-product-info p strong{
 color:#00a651;
 font-weight:700;
}
 
 /* Main Layout - Product left, Cards right */
 .recommend-main-layout{
 display:flex;
 flex-direction:row;
 align-items:flex-start;
 gap:40px;
 margin-bottom:32px;
}
 
 .recommend-main-layout .recommend-product-box{
 flex:0 0 auto;
 margin-bottom:0;
}
 
 .recommend-main-layout .recommend-cards{
 flex:1;
 margin-bottom:0;
}
 
 /* Patient Cards */
 .recommend-cards{
 display:flex;
 flex-direction:column;
 gap:12px;
 margin-bottom:32px;
}
 
 .recommend-card-new{
 display:flex;
 align-items:center;
 gap:20px;
 background:var(--white);
 border-radius:16px;
 padding:20px 24px;
 box-shadow:0 2px 12px rgba(0,0,0,0.06);
 transition:transform 0.3s ease, opacity 0.3s ease;
 min-height:100px;
}
 
 .recommend-card-new:hover{
 box-shadow:0 6px 20px rgba(4, 60, 146, 0.12);
 transform:translateX(5px);
}
 
 .recommend-card-img{
 width:80px;
 height:80px;
 flex-shrink:0;
 border-radius:50%;
 overflow:hidden;
 border:3px solid #043c92;
 box-shadow:0 4px 12px rgba(4, 60, 146, 0.2);
}
 
 .recommend-card-img img{
 width:100%;
 height:100%;
 object-fit:cover;
}
 
 .recommend-card-text{
 flex:1;
}
 
 .recommend-card-text h4{
 font-size:18px;
 font-weight:700;
 color:#043c92;
 margin-bottom:6px;
 line-height:1.3;
}
 
 .recommend-card-text p{
 font-size:14px;
 color:#5a6978;
 line-height:1.5;
 margin:0;
}
 
 /* ===== SECTION HEADER ===== */
 .section-header{
 text-align:center;
 margin-bottom:50px;
}
 
 .section-header h2{
 font-size:36px;
 font-weight:700;
 color:#043c92;
 margin-bottom:12px;
}
 
 .section-header p{
 font-size:18px;
 color:var(--text-light);
}
 
 /* ===== PRODUCTS SECTION ===== */
 .products-section{
 padding:60px 0 80px;
 background:var(--bg);
}
 
 .products-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:24px;
 max-width:800px;
 margin:0 auto;
}
 
 .product-card{
 background:var(--white);
 border-radius:16px;
 overflow:hidden;
 box-shadow:0 4px 20px rgba(0,0,0,0.08);
 position:relative;
 transition:transform 0.3s ease;
 border:1px solid #e8eef3;
}
 
 .product-card:hover{
 transform:translateY(-6px);
 box-shadow:0 12px 40px rgba(0,0,0,0.12);
}
 
 .product-badge{
 position:absolute;
 top:14px;
 left:14px;
 background:linear-gradient(135deg, #00a651 0%, #00875a 100%);
 color:var(--white);
 padding:6px 14px;
 border-radius:6px;
 font-size:13px;
 font-weight:600;
 font-style:italic;
 z-index:5;
}
 
 .badge-pro{
 background:linear-gradient(135deg, #043c92 0%, #032d6d 100%);
}
 
 .badge-travel{
 background:linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
}
 
 .product-image{
 height:280px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(180deg, #f0f4f8 0%, #e8eef3 100%);
 padding:10px;
 position:relative;
}
 
 .product-image img{
 max-height:260px;
 max-width:100%;
 object-fit:contain;
 filter:drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
 
 .product-specs{
 display:flex;
 gap:8px;
 justify-content:center;
 padding:12px 16px;
 background:linear-gradient(180deg, #e8eef3 0%, #f0f4f8 100%);
}
 
 .product-specs span{
 background:var(--white);
 color:#043c92;
 padding:5px 12px;
 border-radius:20px;
 font-size:12px;
 font-weight:600;
 border:1px solid #e0e7ef;
 flex:1;
 text-align:center;
}
 
 .product-content{
 padding:20px;
}
 
 .product-content h3{
 font-size:20px;
 font-weight:700;
 margin-bottom:6px;
 color:#043c92;
}
 
 .product-desc{
 font-size:13px;
 color:#4a5568;
 margin-bottom:20px;
 line-height:1.5;
}
 
 .product-pricing{
 margin-bottom:16px;
}
 
 .price-row{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:10px 0;
 border-bottom:1px solid #f0f4f8;
}
 
 .price-row:last-child{
 border-bottom:none;
}
 
 .price-row span{
 color:#5a6978;
 font-size:15px;
 font-weight:500;
}
 
 .price-row strong{
 font-size:20px;
 font-weight:700;
 color:#0047b3;
}
 
 .price-highlight{
 color:#00a651 !important;
}
 
 .price-row:first-child .price-highlight{
 color:#00a651 !important;
}
 
 .price-row strong small{
 font-size:14px;
 font-weight:500;
}
 
 .product-card .btn-primary{
 background:linear-gradient(135deg, #00a651 0%, #00875a 100%);
 border-radius:10px;
 padding:14px 20px;
 font-size:15px;
 font-weight:600;
 border:none;
 box-shadow:0 4px 15px rgba(0,166,81,0.3);
}
 
 .product-card .btn-primary:hover{
 background:linear-gradient(135deg, #00875a 0%, #006644 100%);
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(0,166,81,0.4);
}
 
 /* ===== WHY US SECTION ===== */
 .why-us-section{
 padding:80px 0;
 background:#0047b3;
}
 
 .why-us-section .section-header h2{
 color:var(--white);
 font-size:40px;
 font-weight:800;
}
 
 .why-us-section .section-header p{
 color:var(--white);
 font-style:italic;
 font-size:16px;
 line-height:1.6;
 max-width:600px;
 margin:0 auto;
}
 
 .why-us-section .section-header .text-highlight{
 color:#99fbff;
 font-weight:600;
}
 
 .why-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:20px;
}
 
 .why-card{
 text-align:center;
 padding:30px 24px;
 background:rgba(255,255,255,0.15);
 border-radius:16px;
 border:1px solid rgba(255,255,255,0.2);
 transition:transform 0.3s ease, opacity 0.3s ease;
}
 
 .why-card:hover{
 background:rgba(255,255,255,0.2);
 transform:translateY(-4px);
}
 
 .why-icon{
 margin-bottom:16px;
 color:var(--white);
}
 
 .why-icon svg{
 width:48px;
 height:48px;
}
 
 .why-card h3{
 font-size:16px;
 font-weight:800;
 margin-bottom:12px;
 color:#ffd700;
 text-transform:uppercase;
 font-style:italic;
 letter-spacing:0.5px;
}
 
 .why-card p{
 font-size:14px;
 color:var(--white);
 line-height:1.6;
}
 
 .why-card p strong{
 color:#99fbff;
}
 
 /* Why Us CTA Buttons */
 .why-cta{
 display:flex;
 flex-direction:row;
 justify-content:center;
 align-items:center;
 gap:16px;
 margin-top:50px;
}
 
 .btn-whatsapp-large{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
 color:var(--white);
 padding:18px 48px;
 border-radius:50px;
 font-weight:700;
 font-size:18px;
 min-width:320px;
 box-shadow:0 6px 20px rgba(37,211,102,0.35);
 transition:transform 0.25s ease, opacity 0.25s ease;
}
 
 .btn-whatsapp-large:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 25px rgba(37,211,102,0.45);
}
 
 .btn-phone-large{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 background:#0047b3;
 color:var(--white);
 padding:18px 48px;
 border-radius:50px;
 font-weight:700;
 font-size:18px;
 min-width:320px;
 border:2px solid var(--white);
 transition:transform 0.25s ease, opacity 0.25s ease;
}
 
 .btn-phone-large svg{
 stroke:var(--white);
}
 
 .btn-phone-large:hover{
 background:#003d99;
 color:var(--white);
 transform:translateY(-3px);
}
 
 .btn-phone-large:hover svg{
 stroke:var(--white);
}
 
 /* ===== GALLERY SECTION ===== */
 .gallery-section{
 padding:80px 0;
 background:var(--white);
}
 
 .gallery-grid{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:16px;
 margin-bottom:50px;
}
 
 .gallery-item{
 position:relative;
 border-radius:var(--radius);
 overflow:hidden;
 aspect-ratio:1;
 cursor:pointer;
}
 
 .gallery-item img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.3s ease;
}
 
 .gallery-item:hover img{
 transform:scale(1.05);
}
 
 .gallery-caption{
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 background:linear-gradient(transparent, rgba(0,0,0,0.8));
 color:var(--white);
 padding:40px 16px 16px;
 font-size:14px;
 font-weight:600;
}
 
 .gallery-trust{
 display:flex;
 justify-content:center;
 gap:60px;
 flex-wrap:wrap;
}
 
 .trust-stat{
 text-align:center;
}
 
 .stat-number{
 display:block;
 font-size:42px;
 font-weight:700;
 color:var(--primary);
 line-height:1;
 margin-bottom:8px;
}
 
 .stat-label{
 font-size:14px;
 color:#555;
}
 
 /* ===== AREAS SECTION ===== */
 .areas-section{
 padding:80px 0;
 background:#0047b3;
 color:var(--white);
}
 
 .areas-section .section-header h2{
 color:var(--white);
}
 
 .areas-section .section-header p{
 color:rgba(255,255,255,0.9);
}
 
 .areas-grid{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:20px;
 margin-bottom:40px;
}
 
 .area-card{
 background:var(--white);
 padding:24px;
 border-radius:var(--radius);
 text-align:center;
 transition:transform 0.2s ease, opacity 0.2s ease;
 border:1px solid var(--border);
 box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
 
 .area-card:hover{
 border-color:var(--primary);
 transform:translateY(-4px);
 box-shadow:var(--shadow);
}
 
 .area-card h3{
 font-size:18px;
 font-weight:700;
 margin-bottom:8px;
 color:#043c92;
}
 
 .delivery-time{
 font-size:14px;
 color:#555;
}
 
 .area-featured{
 background:var(--primary);
 color:var(--white);
}
 
 .area-featured h3{
 color:var(--white);
}
 
 .area-featured .delivery-time{
 color:#fff;
}
 
 .area-featured:hover{
 background:var(--primary-dark);
 border-color:var(--primary-dark);
}
 
 .areas-cta{
 text-align:center;
}
 
 .areas-section .btn-outline{
 background:transparent;
 color:var(--white);
 border:2px solid var(--white);
}
 
 .areas-section .btn-outline:hover{
 background:var(--white);
 color:#0047b3;
}
 
 /* ===== FAQ SECTION ===== */
 .faq-section{
 padding:80px 0;
 background:var(--white);
}
 
 .faq-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:30px;
 max-width:1000px;
 margin:0 auto;
}
 
 .faq-item{
 background:var(--bg);
 padding:28px;
 border-radius:var(--radius);
}
 
 .faq-item h3{
 font-size:18px;
 font-weight:700;
 margin-bottom:12px;
 color:#043c92;
}
 
 .faq-item p{
 font-size:15px;
 color:var(--text-light);
 line-height:1.7;
}
 
 /* ===== CTA SECTION ===== */
 .cta-section{
 padding:80px 0;
 background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
 color:var(--white);
}
 
 .cta-content{
 text-align:center;
 max-width:700px;
 margin:0 auto;
}
 
 .cta-content h2{
 font-size:36px;
 font-weight:700;
 margin-bottom:16px;
}
 
 .cta-content > p{
 font-size:18px;
 opacity:0.9;
 margin-bottom:32px;
}
 
 .cta-buttons{
 display:flex;
 justify-content:center;
 gap:16px;
 margin-bottom:24px;
 flex-wrap:wrap;
}
 
 .cta-hours p{
 font-size:14px;
 opacity:0.8;
}
 
 /* ===== FOOTER ===== */
 .footer{
 background:#1a1a2e;
 color:var(--white);
 padding:60px 0 30px;
}
 
 .footer-grid{
 display:grid;
 grid-template-columns:2fr 1fr 1fr 1fr;
 gap:40px;
 margin-bottom:40px;
}
 
 .footer-col h3{
 font-size:16px;
 font-weight:700;
 margin-bottom:20px;
}
 
 .footer-col p{
 font-size:14px;
 color:#aaa;
 line-height:1.7;
}
 
 .footer-col ul{
 list-style:none;
}
 
 .footer-col li{
 margin-bottom:12px;
}
 
 .footer-col a{
 color:#aaa;
 font-size:14px;
 display:inline-block;
 padding:8px 0;
 min-height:44px;
 line-height:1.5;
}
 
 .footer-col a:hover{
 color:var(--white);
}
 
 .footer-bottom{
 text-align:center;
 padding-top:30px;
 border-top:1px solid #333;
}
 
 .footer-bottom p{
 font-size:14px;
 color:#888;
}
 
 /* ===== MOBILE MENU ===== */
 .mobile-menu-toggle{
 display:none;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 width:44px;
 height:44px;
 background:transparent;
 border:none;
 cursor:pointer;
 padding:8px;
 z-index:1001;
}
 
 .mobile-menu-toggle span{
 display:block;
 width:24px;
 height:3px;
 background:var(--primary);
 border-radius:2px;
 transition:transform 0.3s ease, opacity 0.3s ease;
 margin:3px 0;
}
 
 .mobile-menu-toggle.active span:nth-child(1){
 transform:rotate(45deg) translate(5px, 5px);
}
 
 .mobile-menu-toggle.active span:nth-child(2){
 opacity:0;
}
 
 .mobile-menu-toggle.active span:nth-child(3){
 transform:rotate(-45deg) translate(5px, -5px);
}
 
 .mobile-nav-overlay{
 display:none;
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(0,0,0,0.5);
 z-index:999;
 opacity:0;
 transition:opacity 0.3s ease;
}
 
 .mobile-nav-overlay.active{
 display:block;
 opacity:1;
}
 
 .mobile-nav{
 display:none;
 position:fixed;
 top:0;
 right:0;
 width:280px;
 height:100vh;
 background:var(--white);
 z-index:1000;
 padding:80px 24px 24px;
 box-shadow:-4px 0 20px rgba(0,0,0,0.15);
 transform:translateX(100%);
 transition:transform 0.3s ease;
 overflow-y:auto;
 will-change:transform;
}
 
 .mobile-nav.active{
 transform:translateX(0);
}
 
 .mobile-nav a{
 display:block;
 padding:16px 0;
 font-size:16px;
 font-weight:500;
 color:var(--text);
 border-bottom:1px solid var(--border);
}
 
 .mobile-nav a:hover{
 color:var(--primary);
}
 
 .mobile-nav .mobile-cta{
 margin-top:24px;
 background:var(--secondary);
 color:var(--white);
 text-align:center;
 border-radius:10px;
 padding:16px;
 font-weight:600;
}
 
 /* ===== RESPONSIVE ===== */
 
 /* Large Tablets & Small Desktops */
 @media (max-width:1200px){
 .hero-content{
 grid-template-columns:1fr 1fr;
 gap:30px;
}
 
 .hero-right{
 display:none;
}
 
 .hero-text{
 order:1;
}
 
 .hero-image{
 order:2;
}
 
 .features-grid{
 grid-template-columns:repeat(3, 1fr);
}
}
 
 @media (max-width:1024px){
 .hero-content{
 gap:20px;
}
 
 .hero-image img{
 max-height:350px;
}
 
 .features-grid{
 grid-template-columns:repeat(3, 1fr);
}
 
 .recommend-grid{
 grid-template-columns:repeat(2, 1fr);
}
 
 .products-grid{
 grid-template-columns:repeat(2, 1fr);
}
 
 .why-grid{
 grid-template-columns:repeat(2, 1fr);
}
 
 .gallery-grid{
 grid-template-columns:repeat(3, 1fr);
}
 
 .footer-grid{
 grid-template-columns:repeat(2, 1fr);
}
}
 
 /* Tablets */
 @media (max-width:768px){
 /* Show mobile menu toggle, hide desktop nav */
 .mobile-menu-toggle{
 display:flex;
}
 
 .mobile-nav{
 display:block;
}
 
 .nav-menu{
 display:none;
}
 
 .nav-cta{
 display:none;
}
 
 header nav .cta-button{
 display:none;
}
 
 header nav .nav-links{
 display:none;
}
 
 /* Header improvements */
 header .header-top{
 padding:6px 0;
 font-size:12px;
}
 
 header .header-top .container{
 flex-direction:column;
 gap:4px;
 text-align:center;
}
 
 header nav{
 padding:12px 0;
}
 
 .container{
 padding:0 16px;
}
 
 /* Hide navbar on mobile to prevent CLS */
 .navbar{
 display:none;
}
 
 /* Hero section - Mobile layout - New Canva Design */
 .hero{
 padding:24px 0 40px;
 min-height:700px;/* Reserve space to prevent CLS */
 contain:layout style;
}
 
 .hero-badge-center{
 margin-bottom:16px;
}
 
 .location-badge{
 font-size:12px;
 padding:8px 20px;
 background:rgba(255,189,89,0.95);
 color:#1a1a2e;
 font-weight:600;
 border:none;
}
 
 /* Hide desktop layout on mobile */
 .hero-desktop-only{
 display:none !important;
}
 
 /* Show mobile-specific elements */
 .hero-tagline{
 display:block;
 font-size:14px;
 color:var(--white);
 text-align:center;
 font-style:italic;
 line-height:1.6;
 margin-bottom:24px;
 padding:0 10px;
}
 
 .hero-tagline .text-highlight{
 color:#99fbff;
 font-weight:600;
}
 
 .hero-product{
 display:block;
 position:relative;
 text-align:center;
 margin-bottom:6px;
}
 
 .hero-product-img{
 width:320px;
 height:365px;
 aspect-ratio:320 / 365;
 object-fit:cover;
 display:block;
 margin:0 auto;
 filter:drop-shadow(0 10px 30px rgba(0,0,0,0.25));
}
 
 .hero-product-badges{
 position:absolute;
 left:8%;
 top:50%;
 transform:translateY(-50%);
 z-index:10;
}
 
 .kkm-badge-left{
 display:flex;
 flex-direction:column;
 align-items:center;
}
 
 .kkm-badge-left img{
 width:70px;
 height:22px;
 aspect-ratio:120 / 37;
 margin-bottom:6px;
 filter:drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
 
 .kkm-badge-left p{
 font-size:7px;
 font-weight:700;
 color:var(--white);
 text-align:center;
 line-height:1.3;
 text-transform:uppercase;
 text-shadow:0 1px 3px rgba(0,0,0,0.3);
}
 
 .hero-price-tagline{
 display:block;
 font-size:16px;
 color:var(--white);
 text-align:center;
 font-style:italic;
 margin-bottom:10px;
}
 
 .hero-price-combined{
 display:flex;
 background:var(--white);
 border-radius:10px;
 overflow:hidden;
 max-width:340px;
 margin:0 auto 28px;
 box-shadow:0 6px 20px rgba(0,0,0,0.18);
}
 
 .price-side{
 flex:1;
 padding:10px 20px;
 text-align:center;
}
 
 .price-side .price-label{
 display:block;
 font-size:12px;
 font-weight:600;
 margin-bottom:0;
}
 
 .price-side .price-value{
 font-size:12px;
 font-weight:600;
}
 
 .price-side .price-value strong{
 font-size:22px;
 font-weight:800;
}
 
 .price-sewa .price-label,
 .price-sewa .price-value,
 .price-sewa .price-value strong{
 color:#00a651;
}
 
 .price-beli .price-label,
 .price-beli .price-value,
 .price-beli .price-value strong{
 color:#0047b3;
}
 
 .price-divider{
 width:1px;
 background:#e0e0e0;
}
 
 .hero-cta-stack{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:12px;
 margin-bottom:20px;
}
 
 .btn-whatsapp-hero{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 width:100%;
 max-width:340px;
 padding:18px 32px;
 background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
 color:var(--white);
 border-radius:50px;
 font-size:17px;
 font-weight:700;
 box-shadow:0 6px 20px rgba(37,211,102,0.35);
 transition:transform 0.25s ease, opacity 0.25s ease;
}
 
 .btn-whatsapp-hero:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(37,211,102,0.45);
}
 
 .btn-phone-hero{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 width:100%;
 max-width:340px;
 padding:18px 32px;
 background:#0047b3;
 color:var(--white);
 border-radius:50px;
 font-size:17px;
 font-weight:700;
 border:none;
 box-shadow:0 6px 20px rgba(0,71,179,0.35);
 transition:transform 0.25s ease, opacity 0.25s ease;
}
 
 .btn-phone-hero:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(0,71,179,0.45);
}
 
 .hero-title{
 font-size:28px;
 line-height:1.2;
 margin-bottom:16px;
 font-weight:800;
}
 
 .hero h1{
 font-size:28px;
 font-weight:800;
}
 
 .hero-badge{
 font-size:12px;
 padding:0 20px;
 height:30px;
}
 
 .btn{
 padding:14px 24px;
 font-size:15px;
 min-height:48px;
}
 
 .btn-lg{
 padding:16px 28px;
 font-size:16px;
}
 
 /* Features bar - 2x2 grid, white section, blue cards */
 .features-bar{
 margin-top:-40px;
 background:var(--white);
 padding:20px 16px;
 border-radius:var(--radius-lg);
 box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
 
 .features-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:12px;
 padding:0;
 background:transparent;
 border-radius:0;
 box-shadow:none;
}
 
 .feature-item{
 padding:16px 12px;
 background:#043c92;
 border-radius:12px;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
}
 
 .feature-item:hover{
 background:#03347d;
}
 
 .feature-icon{
 margin-bottom:8px;
 color:var(--white);
}
 
 .feature-icon svg{
 width:28px;
 height:28px;
}
 
 .feature-text{
 display:flex;
 flex-direction:column;
 gap:4px;
}
 
 .feature-text strong{
 font-size:11px;
 color:#ffbd59;
 letter-spacing:0.3px;
 display:block;
 line-height:1.3;
 text-transform:uppercase;
 font-style:italic;
 font-weight:800;
}
 
 .feature-text span{
 display:block;
 font-size:10px;
 line-height:1.3;
 color:var(--white);
}
 
 /* Sections */
 .recommend-section{
 padding:60px 0;
}
 
 .recommend-layout{
 grid-template-columns:1fr;
 gap:30px;
}
 
 .recommend-image{
 order:-1;
}
 
 .recommend-image img{
 max-height:260px;
}
 
 .recommend-badge{
 top:5px;
 left:5px;
 padding:6px 12px;
 font-size:11px;
}
 
 .recommend-product-image .recommend-badge{
 position:relative;
 top:auto;
 left:auto;
 display:block;
 margin:0 auto 16px auto;
 width:fit-content;
}
 
 .recommend-grid{
 grid-template-columns:repeat(2, 1fr);
 gap:12px;
}
 
 .recommend-card{
 padding:18px 14px;
 border-radius:12px;
}
 
 .recommend-img{
 width:70px;
 height:70px;
 margin-bottom:12px;
 border-width:2px;
}
 
 .recommend-card h3{
 font-size:14px;
 margin-bottom:6px;
}
 
 .recommend-card p{
 font-size:12px;
 line-height:1.5;
}
 
 .recommend-cta{
 padding-top:24px;
}
 
 .recommend-cta p{
 font-size:14px;
}
 
 /* New Recommend Section Mobile */
 .recommend-product-box{
 padding:16px 0;
 border-radius:0;
 margin-bottom:16px;
}
 
 .recommend-product-content{
 flex-direction:row;
 gap:16px;
 align-items:center;
 text-align:left;
}
 
 .recommend-product-image img{
 max-width:180px;
}
 
 .product-label-green{
 font-size:16px;
}
 
 .recommend-product-info h3{
 font-size:18px;
 margin-bottom:8px;
}
 
 .recommend-product-info p{
 font-size:13px;
 line-height:1.5;
 max-width:160px;
}
 
 .recommend-main-layout{
 flex-direction:column;
 gap:24px;
}
 
 .recommend-cards{
 gap:10px;
 margin-bottom:24px;
}
 
 .recommend-card-new{
 padding:16px;
 gap:14px;
 border-radius:12px;
}
 
 .recommend-card-img{
 width:65px;
 height:65px;
 border-width:2px;
}
 
 .recommend-card-text h4{
 font-size:15px;
 margin-bottom:4px;
}
 
 .recommend-card-text p{
 font-size:12px;
}
 
 /* Products - Full width cards */
 .products-section{
 padding:50px 0 60px;
}
 
 .products-grid{
 grid-template-columns:1fr;
 gap:20px;
}
 
 /* Mobile horizontal slider for other products section */
 .other-products-slider{
 display:flex !important;
 overflow-x:auto;
 scroll-snap-type:x mandatory;
 -webkit-overflow-scrolling:touch;
 gap:16px;
 padding:10px 0 20px;
 scrollbar-width:none;
 -ms-overflow-style:none;
}
 
 .other-products-slider::-webkit-scrollbar{
 display:none;
}
 
 .other-products-slider .product-card{
 flex:0 0 85%;
 min-width:85%;
 scroll-snap-align:center;
}
 
 .product-card{
 max-width:100%;
 margin:0;
 display:flex;
 flex-direction:column;
 border-radius:16px;
 box-shadow:0 6px 25px rgba(0,0,0,0.1);
}
 
 .product-badge{
 top:14px;
 left:14px;
 padding:6px 14px;
 font-size:12px;
 font-weight:700;
 box-shadow:0 3px 10px rgba(0,0,0,0.15);
}
 
 .product-image{
 height:240px;
}
 
 .product-image img{
 max-height:220px;
}
 
 .product-specs{
 padding:10px 12px;
 gap:6px;
}
 
 .product-specs span{
 padding:4px 10px;
 font-size:11px;
}
 
 .product-content{
 padding:18px;
}
 
 .product-content h3{
 font-size:20px;
 margin-bottom:8px;
}
 
 .product-desc{
 font-size:14px;
 margin-bottom:16px;
}
 
 .price-row{
 padding:12px 0;
 border-bottom:1px solid #e8eef3;
}
 
 .price-row:last-child{
 border-bottom:none;
}
 
 .price-row span{
 font-size:14px;
 font-weight:600;
 color:#5a6978;
}
 
 .price-row strong{
 font-size:24px;
 font-weight:800;
}
 
 .price-row strong small{
 font-size:13px;
 font-weight:500;
}
 
 .product-card .btn-primary{
 padding:16px 20px;
 font-size:15px;
 font-weight:700;
 border-radius:12px;
 box-shadow:0 4px 15px rgba(0,166,81,0.3);
}
 
 /* Why us */
 .why-us-section{
 padding:50px 0;
}
 
 .why-us-section .section-header h2{
 font-size:28px;
}
 
 .why-us-section .section-header p{
 font-size:14px;
 line-height:1.5;
}
 
 .why-grid{
 grid-template-columns:repeat(2, 1fr) !important;
 gap:14px;
}
 
 .why-card{
 padding:24px 16px;
}
 
 .why-icon{
 margin-bottom:14px;
}
 
 .why-icon svg{
 width:40px;
 height:40px;
}
 
 .why-card h3{
 font-size:13px;
 margin-bottom:10px;
 line-height:1.3;
}
 
 .why-card p{
 font-size:12px;
 line-height:1.5;
}
 
 .why-cta{
 flex-direction:column !important;
 margin-top:40px;
 gap:14px;
}
 
 .btn-whatsapp-large,
 .btn-phone-large{
 width:100%;
 max-width:320px;
 min-width:auto;
 padding:16px 32px;
 font-size:16px;
}
 
 /* Gallery */
 .gallery-section{
 padding:60px 0;
}
 
 .gallery-grid{
 grid-template-columns:repeat(2, 1fr);
 gap:10px;
 margin-bottom:40px;
}
 
 .gallery-item{
 border-radius:10px;
}
 
 .gallery-caption{
 padding:30px 12px 12px;
 font-size:12px;
}
 
 .gallery-trust{
 gap:30px;
 flex-wrap:wrap;
 justify-content:center;
}
 
 .trust-stat{
 min-width:100px;
}
 
 .stat-number{
 font-size:36px;
}
 
 .stat-label{
 font-size:12px;
}
 
 /* Areas */
 .areas-section{
 padding:60px 0;
}
 
 .areas-grid{
 grid-template-columns:repeat(2, 1fr);
 gap:10px;
}
 
 .area-card{
 padding:18px 14px;
 border-radius:10px;
}
 
 .area-card h3{
 font-size:15px;
 margin-bottom:4px;
}
 
 .delivery-time{
 font-size:12px;
}
 
 .areas-cta{
 margin-top:24px;
}
 
 .areas-section .btn-outline{
 padding:14px 28px;
 font-size:14px;
}
 
 /* FAQ - Accordion style */
 .faq-section{
 padding:60px 0;
}
 
 .faq-grid{
 grid-template-columns:1fr;
 gap:12px;
}
 
 .faq-item{
 padding:18px;
 border-radius:10px;
}
 
 .faq-item h3{
 font-size:15px;
 margin-bottom:10px;
 line-height:1.4;
}
 
 .faq-item p{
 font-size:13px;
 line-height:1.6;
}
 
 /* Section headers */
 .section-header{
 margin-bottom:32px;
 padding:0 8px;
}
 
 .section-header h2{
 font-size:24px;
 line-height:1.25;
 font-weight:800;
 color:#043c92;
}
 
 .section-header p{
 font-size:14px;
 margin-top:8px;
 color:#5a6978;
}
 
 /* CTA Section */
 .cta-section{
 padding:50px 0;
 background:linear-gradient(135deg, #0052cc 0%, #003d99 100%);
}
 
 .cta-content h2{
 font-size:24px;
 line-height:1.25;
 font-weight:800;
}
 
 .cta-content > p{
 font-size:15px;
 margin-bottom:28px;
 opacity:0.95;
}
 
 .cta-buttons{
 flex-direction:column;
 align-items:center;
 gap:14px;
}
 
 .cta-buttons .btn-white,
 .cta-buttons .btn-outline-white{
 width:100%;
 max-width:320px;
 justify-content:center;
 padding:16px 24px;
 font-size:15px;
 font-weight:700;
 min-height:54px;
 border-radius:50px;
}
 
 .cta-buttons .btn-white{
 box-shadow:0 6px 20px rgba(0,0,0,0.2);
}
 
 .cta-hours p{
 font-size:12px;
 margin-top:20px;
}
 
 /* Footer */
 .footer{
 padding:40px 0 24px;
}
 
 .footer-grid{
 grid-template-columns:1fr;
 gap:28px;
 text-align:center;
}
 
 .footer-col h3{
 margin-bottom:14px;
 font-size:15px;
}
 
 .footer-col p{
 font-size:13px;
}
 
 .footer-col ul{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:8px 16px;
}
 
 .footer-col li{
 margin-bottom:0;
}
 
 .footer-col a{
 font-size:13px;
}
 
 .footer-bottom{
 padding-top:20px;
}
 
 .footer-bottom p{
 font-size:12px;
}
}
 
 /* Mobile Phones */
 @media (max-width:480px){
 .container{
 padding:0 12px;
}
 
 /* Header */
 header .header-top{
 padding:5px 0;
 font-size:11px;
}
 
 header .header-top a{
 padding:5px 12px;
 font-size:11px;
}
 
 .navbar{
 padding:12px 0;
 min-height:56px;/* Fixed height for mobile navbar */
 height:56px;
}
 
 .logo{
 font-size:15px;
}
 
 .logo-icon{
 padding:5px 8px;
 font-size:12px;
}
 
 /* Hero - Small phones */
 .hero{
 padding:20px 0 36px;
}
 
 .hero-badge-center{
 margin-bottom:12px;
}
 
 .location-badge{
 font-size:11px;
 padding:6px 16px;
}
 
 .hero-title{
 font-size:24px;
 line-height:1.2;
 margin-bottom:12px;
 font-weight:800;
}
 
 .hero h1{
 font-size:24px;
 font-weight:800;
}
 
 .hero-tagline{
 font-size:13px;
 margin-bottom:20px;
}
 
 .hero-product-img{
 width:280px;
 height:320px;
 aspect-ratio:280 / 320;
 object-fit:cover;
}
 
 .hero-product-badges{
 left:5%;
}
 
 .kkm-badge-left img{
 max-width:60px;
}
 
 .kkm-badge-left p{
 font-size:6px;
}
 
 .hero-price-tagline{
 font-size:14px;
 margin-bottom:14px;
}
 
 .hero-price-combined{
 max-width:280px;
 margin-bottom:24px;
}
 
 .price-side{
 padding:8px 14px;
}
 
 .price-side .price-label{
 font-size:11px;
}
 
 .price-side .price-value{
 font-size:11px;
}
 
 .price-side .price-value strong{
 font-size:18px;
}
 
 .hero-cta-stack{
 gap:10px;
}
 
 .btn-whatsapp-hero,
 .btn-phone-hero{
 max-width:300px;
 padding:16px 28px;
 font-size:15px;
}
 
 .hero-badge{
 font-size:10px;
 padding:0 14px;
 height:26px;
}
 
 /* Features bar - 2x3 grid on small phones */
 .features-bar{
 margin-top:-30px;
 padding:16px 12px;
}
 
 .features-grid{
 gap:10px;
}
 
 .feature-item{
 padding:12px 10px;
}
 
 .feature-icon{
 margin-bottom:6px;
}
 
 .feature-icon svg{
 width:24px;
 height:24px;
}
 
 .feature-text strong{
 font-size:10px;
 color:#ffbd59;
 text-transform:uppercase;
 font-style:italic;
 font-weight:800;
}
 
 .feature-text span{
 font-size:9px;
 color:var(--white);
}
 
 /* Recommend */
 .recommend-section{
 padding:40px 0;
}
 
 .recommend-image img{
 max-height:200px;
}
 
 .recommend-badge{
 padding:5px 10px;
 font-size:10px;
}
 
 .recommend-product-image .recommend-badge{
 position:relative;
 top:auto;
 left:auto;
 display:block;
 margin:0 auto 12px auto;
 width:fit-content;
}
 
 .recommend-grid{
 grid-template-columns:1fr;
 gap:10px;
}
 
 .recommend-card{
 padding:16px 14px;
 display:flex;
 flex-direction:row;
 align-items:center;
 gap:14px;
 text-align:left;
}
 
 .recommend-img{
 width:60px;
 height:60px;
 margin:0;
 flex-shrink:0;
}
 
 .recommend-card h3{
 font-size:14px;
 margin-bottom:4px;
}
 
 .recommend-card p{
 font-size:11px;
 line-height:1.4;
}
 
 .recommend-cta p{
 font-size:13px;
}
 
 .recommend-cta .btn-primary{
 padding:14px 24px;
 font-size:14px;
}
 
 /* New Recommend Section 480px */
 .recommend-product-box{
 padding:12px;
 border-radius:12px;
}
 
 .recommend-product-content{
 gap:12px;
 text-align:left;
}
 
 .recommend-product-image img{
 max-width:150px;
}
 
 .product-label-green{
 font-size:14px;
}
 
 .recommend-product-info h3{
 font-size:16px;
 margin-bottom:6px;
}
 
 .recommend-product-info p{
 font-size:12px;
 line-height:1.4;
 max-width:130px;
}
 
 .recommend-cards{
 gap:8px;
 margin-bottom:20px;
}
 
 .recommend-card-new{
 padding:14px;
 gap:12px;
 border-radius:10px;
}
 
 .recommend-card-img{
 width:55px;
 height:55px;
}
 
 .recommend-card-text h4{
 font-size:13px;
}
 
 .recommend-card-text p{
 font-size:11px;
 line-height:1.4;
}
 
 /* Products */
 .products-section{
 padding:40px 0 50px;
}
 
 .products-grid{
 gap:16px;
}
 
 .product-badge{
 top:10px;
 left:10px;
 padding:4px 10px;
 font-size:11px;
}
 
 .product-image{
 height:220px;
}
 
 .product-image img{
 max-height:200px;
}
 
 .product-specs{
 padding:8px 10px;
 gap:4px;
 flex-wrap:wrap;
 justify-content:center;
}
 
 .product-specs span{
 padding:3px 8px;
 font-size:10px;
}
 
 .product-content{
 padding:16px;
}
 
 .product-content h3{
 font-size:18px;
}
 
 .product-desc{
 font-size:13px;
 margin-bottom:14px;
}
 
 .price-row{
 padding:10px 0;
}
 
 .price-row span{
 font-size:13px;
}
 
 .price-row strong{
 font-size:20px;
}
 
 .price-row strong small{
 font-size:12px;
}
 
 .product-card .btn-primary{
 padding:14px 18px;
 font-size:14px;
}
 
 /* Why us - keep 2 column on small phones */
 .why-us-section{
 padding:40px 0;
}
 
 .why-us-section .section-header h2{
 font-size:24px;
}
 
 .why-us-section .section-header p{
 font-size:13px;
}
 
 .why-grid{
 grid-template-columns:repeat(2, 1fr) !important;
 gap:10px;
}
 
 .why-card{
 padding:20px 12px;
 text-align:center;
}
 
 .why-icon{
 margin-bottom:12px;
}
 
 .why-icon svg{
 width:36px;
 height:36px;
}
 
 .why-card h3{
 font-size:11px;
 margin-bottom:8px;
 line-height:1.3;
}
 
 .why-card p{
 font-size:11px;
 line-height:1.4;
}
 
 .why-cta{
 flex-direction:column !important;
 margin-top:32px;
 gap:12px;
}
 
 .btn-whatsapp-large,
 .btn-phone-large{
 padding:14px 28px;
 font-size:15px;
}
 
 /* Gallery */
 .gallery-section{
 padding:40px 0;
}
 
 .gallery-grid{
 gap:8px;
 margin-bottom:32px;
}
 
 .gallery-item{
 border-radius:8px;
}
 
 .gallery-caption{
 padding:25px 10px 10px;
 font-size:11px;
}
 
 .gallery-trust{
 gap:16px;
 flex-direction:row;
 flex-wrap:wrap;
}
 
 .trust-stat{
 min-width:80px;
}
 
 .stat-number{
 font-size:28px;
 margin-bottom:4px;
}
 
 .stat-label{
 font-size:11px;
}
 
 /* Areas */
 .areas-section{
 padding:40px 0;
}
 
 .areas-grid{
 grid-template-columns:1fr;
 gap:8px;
}
 
 .area-card{
 padding:14px 16px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}
 
 .area-card h3{
 font-size:14px;
 margin-bottom:0;
}
 
 .delivery-time{
 font-size:11px;
}
 
 .areas-section .btn-outline{
 padding:12px 24px;
 font-size:13px;
}
 
 /* FAQ */
 .faq-section{
 padding:40px 0;
}
 
 .faq-grid{
 gap:10px;
}
 
 .faq-item{
 padding:16px;
 border-radius:8px;
}
 
 .faq-item h3{
 font-size:14px;
 margin-bottom:8px;
 line-height:1.4;
}
 
 .faq-item p{
 font-size:12px;
 line-height:1.6;
}
 
 /* Section headers */
 .section-header{
 margin-bottom:28px;
 padding:0 4px;
}
 
 .section-header h2{
 font-size:22px;
 line-height:1.25;
 font-weight:800;
 color:#043c92;
}
 
 .section-header p{
 font-size:13px;
 margin-top:6px;
 color:#5a6978;
}
 
 /* CTA */
 .cta-section{
 padding:40px 0;
}
 
 .cta-content h2{
 font-size:22px;
 line-height:1.25;
 font-weight:800;
}
 
 .cta-content > p{
 font-size:14px;
 margin-bottom:24px;
}
 
 .cta-buttons{
 gap:12px;
}
 
 .cta-buttons .btn-white,
 .cta-buttons .btn-outline-white{
 padding:14px 24px;
 font-size:14px;
 font-weight:700;
 border-radius:50px;
 min-height:50px;
}
 
 .cta-hours p{
 font-size:11px;
 margin-top:16px;
}
 
 /* Footer */
 .footer{
 padding:32px 0 20px;
}
 
 .footer-grid{
 gap:24px;
}
 
 .footer-col h3{
 font-size:14px;
 margin-bottom:12px;
}
 
 .footer-col p{
 font-size:12px;
}
 
 .footer-col ul{
 gap:6px 14px;
}
 
 .footer-col a{
 font-size:12px;
}
 
 .footer-bottom{
 padding-top:16px;
}
 
 .footer-bottom p{
 font-size:11px;
}
}
 
 /* ===== STICKY MOBILE CTA - Floating Circles ===== */
 .mobile-sticky-cta{
 display:none;
}
 
 @media (max-width:768px){
 .mobile-sticky-cta{
 display:flex;
 flex-direction:column;
 position:fixed;
 bottom:24px;
 right:18px;
 z-index:998;
 gap:14px;
}
 
 .mobile-sticky-cta a{
 display:flex;
 align-items:center;
 justify-content:center;
 width:60px;
 height:60px;
 border-radius:50%;
 box-shadow:0 6px 20px rgba(0,0,0,0.3);
 transition:transform 0.2s ease;
}
 
 .mobile-sticky-cta a:hover{
 transform:scale(1.05);
 box-shadow:0 8px 25px rgba(0,0,0,0.35);
}
 
 .mobile-sticky-cta a:active{
 transform:scale(0.95);
}
 
 .mobile-sticky-cta .sticky-whatsapp{
 background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
 color:var(--white);
}
 
 .mobile-sticky-cta .sticky-call{
 background:linear-gradient(135deg, #0052cc 0%, #003d99 100%);
 color:var(--white);
 border:none;
}
 
 .mobile-sticky-cta svg{
 width:28px;
 height:28px;
 flex-shrink:0;
}
 
 /* Hide text labels on mobile floating buttons */
 .mobile-sticky-cta .cta-label{
 display:none;
}
 
 /* No extra body padding needed for floating buttons */
 body{
 padding-bottom:0;
}
}
 
 @media (max-width:480px){
 .mobile-sticky-cta{
 bottom:18px;
 right:14px;
 gap:12px;
}
 
 .mobile-sticky-cta a{
 width:56px;
 height:56px;
 box-shadow:0 5px 18px rgba(0,0,0,0.28);
}
 
 .mobile-sticky-cta svg{
 width:26px;
 height:26px;
}
}
 
 /* ===== EXPANDED LOCATIONS VIEW ===== */
 .locations-expanded{
 display:none;
}
 
 .locations-header{
 text-align:center;
 padding:30px 0;
 background:#043c92;
 border-radius:16px 16px 0 0;
 margin:0 -24px;
}
 
 .locations-header h2{
 color:#fff;
 font-size:1.8rem;
 margin-bottom:8px;
}
 
 .locations-header p{
 color:rgba(255,255,255,0.9);
 font-style:italic;
}
 
 .locations-grid-full{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:10px;
 padding:16px;
 background:#0047b3;
 margin:0 -24px;
}
 
 .loc-state{
 background:rgba(255,255,255,0.2);
 border-radius:10px;
 padding:12px;
 border:1px solid rgba(255,255,255,0.3);
}
 
 .loc-state h4{
 margin-bottom:8px;
}
 
 .loc-state h4 a{
 color:var(--white);
 font-size:1rem;
 font-weight:700;
 text-decoration:underline;
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .loc-state h4 a:hover{
 font-size:1.15rem;
}
 
 .loc-cities{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:2px 8px;
}
 
 .loc-cities a{
 display:flex;
 align-items:center;
 color:var(--white);
 text-decoration:underline;
 font-size:0.8rem;
 padding:2px 0;
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .loc-cities a:hover{
 font-size:0.9rem;
}
 
 /* Pin icon via::before - no need for span elements */
 .loc-cities a::before{
 content:'';
 display:inline-block;
 width:14px;
 height:14px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53935'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
 background-size:contain;
 background-repeat:no-repeat;
 margin-right:6px;
 flex-shrink:0;
}
 
 .loc-cities a:hover::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c62828'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}
 
 /* Legacy support for existing .pin spans */
 .loc-cities a .pin{
 display:none;
}
 
 .locations-cta{
 text-align:center;
 padding:24px;
 background:#0047b3;
 margin:0 -24px;
}
 
 .locations-cta .btn-primary{
 background:transparent;
 color:#fff;
 padding:12px 32px;
 border-radius:30px;
 font-weight:600;
 border:2px solid #fff;
 cursor:pointer;
 transition:transform 0.2s, opacity 0.2s;
}
 
 .locations-cta .btn-primary:hover{
 background:rgba(255,255,255,0.1);
}
 
 #toggleLocationsBtn{
 display:inline-flex;
 align-items:center;
}
 
 /* Responsive for expanded locations */
 @media (max-width:1024px){
 .locations-grid-full{
 grid-template-columns:repeat(2, 1fr);
}
 
 .loc-cities{
 grid-template-columns:repeat(2, 1fr);
}
}
 
 @media (max-width:768px){
 .locations-grid-full{
 grid-template-columns:repeat(2, 1fr);
 padding:16px;
}
 
 .locations-header h2{
 font-size:1.4rem;
}
 
 .loc-state{
 padding:12px;
}
 
 .loc-cities{
 grid-template-columns:repeat(2, 1fr);
}
}
 
 @media (max-width:480px){
 .locations-grid-full{
 grid-template-columns:repeat(2, 1fr);
 gap:6px;
 padding:10px;
}
 
 .loc-state{
 padding:8px;
}
 
 .loc-state h4{
 margin-bottom:6px;
}
 
 .loc-state h4 a{
 font-size:0.75rem;
}
 
 .loc-cities{
 grid-template-columns:repeat(2, 1fr);
 gap:1px 4px;
}
 
 .loc-cities a{
 font-size:9px;
}
}
 
 /* ===== LOCATIONS PAGE STYLES ===== */
 .page-header{
 background:url('../images/Backgroud Colour.webp') center center / cover no-repeat;
 color:var(--white);
 padding:40px 0 60px;
 text-align:center;
}
 
 .page-header h1{
 font-size:54px;
 font-weight:700;
 line-height:1.2;
 margin-bottom:15px;
}
 
 .page-header h1 .highlight{
 color:#99fbff;
}
 
 .page-header p{
 font-size:18px;
 opacity:0.95;
 max-width:600px;
 margin:0 auto 30px;
}
 
 .search-box{
 max-width:500px;
 margin:0 auto;
 position:relative;
}
 
 .search-box svg{
 position:absolute;
 left:20px;
 top:50%;
 transform:translateY(-50%);
 color:#666;
}
 
 .search-box input{
 width:100%;
 padding:16px 20px 16px 50px;
 border:none;
 border-radius:50px;
 font-size:16px;
 box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
 
 .search-box input:focus{
 outline:none;
 box-shadow:0 4px 25px rgba(0,0,0,0.2);
}
 
 .locations-section{
 padding:60px 0;
 background:var(--bg);
}
 
 .state-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:24px;
}
 
 .state-card{
 background:var(--white);
 border-radius:16px;
 padding:24px;
 box-shadow:0 4px 15px rgba(0,0,0,0.06);
 transition:transform 0.3s ease, opacity 0.3s ease;
 border:2px solid transparent;
}
 
 .state-card:hover{
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
 border-color:var(--primary);
}
 
 .state-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:16px;
 padding-bottom:12px;
 border-bottom:2px solid #e8eef3;
}
 
 .state-card h3{
 font-size:20px;
 font-weight:700;
 color:#043c92;
 margin:0;
}
 
 .state-count{
 background:#e6f0ff;
 color:#043c92;
 padding:4px 12px;
 border-radius:20px;
 font-size:12px;
 font-weight:600;
}
 
 .city-list{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}
 
 .city-link{
 background:#f5f7fa;
 padding:6px 14px;
 border-radius:20px;
 font-size:13px;
 color:#333;
 text-decoration:none;
 transition:transform 0.2s ease, opacity 0.2s ease;
 border:1px solid #e0e7ef;
}
 
 .city-link:hover,
 .city-link.highlighted{
 background:var(--secondary);
 color:var(--white);
 border-color:var(--secondary);
}
 
 @media (max-width:1024px){
 .state-grid{
 grid-template-columns:repeat(2, 1fr);
}
}
 
 @media (max-width:768px){
 .page-header{
 padding:40px 0 60px;
}
 
 .page-header h1{
 font-size:36px;
}
 
 .state-grid{
 grid-template-columns:1fr;
}
}
 
 @media (max-width:480px){
 .page-header h1{
 font-size:28px;
}
 
 .search-box input{
 font-size:14px;
 padding:14px 16px 14px 45px;
}
}
 
 /* ===== CITY PAGE STYLES ===== */
 .breadcrumb{
 background:var(--bg);
 padding:14px 0;
 font-size:14px;
}
 
 .breadcrumb a{
 color:var(--text-light);
}
 
 .breadcrumb a:hover{
 color:var(--primary);
}
 
 .breadcrumb .separator{
 margin:0 8px;
 color:var(--text-muted);
}
 
 .breadcrumb .current{
 color:var(--primary);
 font-weight:600;
}
 
 /* Hide breadcrumb on location pages */
 .breadcrumb{
 display:none;
}
 
 .location-badge{
 display:inline-block;
 background:rgba(255,255,255,0.2);
 color:var(--white);
 padding:6px 16px;
 border-radius:20px;
 font-size:13px;
 font-weight:600;
 margin-bottom:12px;
 border:1px solid rgba(255,255,255,0.3);
}
 
 .hero-badge-center{
 text-align:center;
 margin-bottom:8px;
}
 
 /* Location Page Hero - 3-Column Layout (matches main page) */
 .page-header .hero-content{
 margin-top:30px;
}
 
 .page-header .hero-left{
 margin-left:0;
}
 
 .page-header .hero-subtitle{
 color:var(--white);
}
 
 @media (max-width:992px){
 .page-header .hero-content{
 grid-template-columns:1fr;
 gap:30px;
 text-align:center;
}
 
 .page-header .hero-left{
 order:2;
}
 
 .page-header .hero-center{
 order:1;
}
 
 .page-header .hero-right{
 order:3;
}
 
 .page-header .hero-subtitle{
 max-width:100%;
 text-align:center;
}
 
 .page-header .hero-cta{
 align-items:center;
}
}
 
 .coverage-section{
 padding:60px 0;
 background:var(--white);
}
 
 .coverage-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:20px;
}
 
 .coverage-card{
 background:var(--bg);
 border-radius:12px;
 padding:24px;
 text-align:center;
 transition:transform 0.3s ease, opacity 0.3s ease;
 border:2px solid transparent;
}
 
 .coverage-card:hover{
 border-color:var(--primary);
 transform:translateY(-3px);
 box-shadow:0 8px 25px rgba(0,0,0,0.1);
}
 
 .coverage-icon{
 width:50px;
 height:50px;
 background:var(--primary);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 12px;
}
 
 .coverage-icon svg{
 color:var(--white);
}
 
 .coverage-card h3{
 font-size:16px;
 font-weight:700;
 color:#043c92;
 margin-bottom:6px;
}
 
 .coverage-status{
 font-size:13px;
 color:var(--secondary);
 font-weight:600;
}
 
 .hospitals-section{
 padding:60px 0;
 background:var(--white);
}
 
 .hospitals-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:24px;
 max-width:700px;
 margin:0 auto;
}
 
 .hospital-card{
 background:var(--bg);
 border-radius:12px;
 padding:30px;
 text-align:center;
 transition:transform 0.3s ease, opacity 0.3s ease;
}
 
 .hospital-card:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 25px rgba(0,0,0,0.08);
}
 
 .hospital-card svg{
 color:var(--primary);
 margin-bottom:12px;
}
 
 .hospital-card h3{
 font-size:18px;
 font-weight:700;
 color:#043c92;
 margin-bottom:6px;
}
 
 .hospital-card p{
 font-size:14px;
 color:var(--text-light);
}
 
 @media (max-width:768px){
 .coverage-grid{
 grid-template-columns:repeat(2, 1fr);
}
 
 .hospitals-grid{
 grid-template-columns:1fr;
}
}
 
 @media (max-width:480px){
 .coverage-grid{
 grid-template-columns:1fr;
}
}
 
 /* ===== STATE PAGES STYLES (KL, Selangor, Penang, Johor) ===== */
 .feature-card{
 background:var(--white);
 border-radius:12px;
 padding:24px 20px;
 text-align:center;
 box-shadow:0 2px 12px rgba(0,0,0,0.08);
 transition:transform 0.3s ease, opacity 0.3s ease;
}
 
 .feature-card:hover{
 transform:translateY(-3px);
 box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
 
 .feature-card h3,
 .feature-card h4{
 font-size:16px;
 font-weight:700;
 color:#043c92;
 margin-bottom:8px;
}
 
 .feature-card p{
 font-size:13px;
 color:#5a6978;
 line-height:1.5;
 margin:0;
}
 
 .feature-card .feature-icon{
 font-size:32px;
 margin-bottom:12px;
}
 
 .hero-buttons{
 display:flex;
 gap:16px;
 justify-content:center;
 flex-wrap:wrap;
 margin-top:24px;
}
 
 .hero-buttons .btn-primary{
 background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
 color:var(--white);
 padding:16px 32px;
 border-radius:50px;
 font-weight:700;
 font-size:16px;
 display:inline-flex;
 align-items:center;
 gap:10px;
 box-shadow:0 4px 15px rgba(37,211,102,0.3);
 transition:transform 0.3s ease, opacity 0.3s ease;
}
 
 .hero-buttons .btn-primary:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(37,211,102,0.4);
}
 
 /* Testimonials Section - Review Style */
 .testimonials-section{
 padding:60px 0;
 background:var(--bg);
}
 
 .testimonials-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:24px;
}
 
 .testimonial-card{
 background:var(--white);
 border-radius:16px;
 padding:24px;
 box-shadow:0 2px 12px rgba(0,0,0,0.08);
 border:1px solid var(--border);
}
 
 .testimonial-header{
 display:flex;
 align-items:center;
 gap:12px;
 margin-bottom:12px;
}
 
 .testimonial-avatar{
 width:48px;
 height:48px;
 border-radius:50%;
 background:linear-gradient(135deg, var(--primary), var(--primary-dark));
 color:var(--white);
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:16px;
}
 
 .testimonial-info{
 flex:1;
}
 
 .testimonial-author{
 font-weight:700;
 color:var(--text);
 font-size:15px;
}
 
 .testimonial-location{
 font-size:13px;
 color:var(--text-muted);
}
 
 .testimonial-stars{
 color:#ffc107;
 font-size:18px;
 letter-spacing:2px;
 margin-bottom:12px;
}
 
 .testimonial-card p{
 font-size:15px;
 line-height:1.6;
 color:var(--text);
 margin-bottom:16px;
 font-style:italic;
}
 
 .testimonial-verified{
 font-size:12px;
 color:var(--secondary);
 font-weight:600;
}
 
 @media (max-width:768px){
 .testimonials-grid{
 grid-template-columns:1fr;
 gap:16px;
}
 
 .testimonial-card{
 padding:20px;
}
}
 
 /* Delivery Proof Section */
 .delivery-proof-section{
 padding:60px 0;
 background:var(--white);
}
 
 .delivery-gallery{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:16px;
}
 
 .delivery-item{
 position:relative;
 border-radius:12px;
 overflow:hidden;
 aspect-ratio:1;
 box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
 
 .delivery-item img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.3s ease;
}
 
 .delivery-item:hover img{
 transform:scale(1.05);
}
 
 .delivery-logo{
 position:absolute;
 bottom:10px;
 right:10px;
 background:var(--primary);
 color:var(--white);
 width:36px;
 height:36px;
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:14px;
 font-weight:700;
 box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
 
 @media (max-width:768px){
 .delivery-gallery{
 grid-template-columns:repeat(3, 1fr);
 gap:10px;
}
 
 .delivery-logo{
 width:28px;
 height:28px;
 font-size:11px;
 border-radius:6px;
 bottom:6px;
 right:6px;
}
}
 
 @media (max-width:480px){
 .delivery-gallery{
 grid-template-columns:repeat(3, 1fr);
}
 
 .delivery-logo{
 width:24px;
 height:24px;
 font-size:10px;
 border-radius:5px;
 bottom:5px;
 right:5px;
}
}
 
 /* FAQ Accordion */
 .faq-accordion{
 max-width:800px;
 margin:0 auto;
}
 
 .faq-item-accordion{
 background:var(--white);
 border:1px solid var(--border);
 border-radius:var(--radius);
 margin-bottom:12px;
 overflow:hidden;
}
 
 .faq-question-btn{
 width:100%;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:20px 24px;
 background:none;
 border:none;
 cursor:pointer;
 text-align:left;
 font-size:16px;
 font-weight:600;
 color:var(--text);
 /* Removed non-composited transition */
}
 
 .faq-question-btn:hover{
 background:var(--bg);
}
 
 .faq-question-btn span{
 flex:1;
 padding-right:16px;
}
 
 .faq-icon{
 transition:transform 0.3s ease;
 color:var(--primary);
 flex-shrink:0;
}
 
 .faq-item-accordion.active .faq-icon{
 transform:rotate(180deg);
}
 
 .faq-answer-content{
 max-height:0;
 overflow:hidden;
 transition:max-height 0.3s ease;
}
 
 .faq-item-accordion.active .faq-answer-content{
 max-height:300px;
}
 
 .faq-answer-content p{
 padding:0 24px 20px;
 margin:0;
 color:var(--text-light);
 line-height:1.7;
}
 
 /* State pages - Service areas grid */
 .service-areas{
 padding:60px 0;
 background:#0047b3;
}
 
 .service-areas .section-header h2{
 color:var(--white);
}
 
 .service-areas .section-header p{
 color:rgba(255,255,255,0.85);
}
 
 .service-areas .area-card{
 background:rgba(255,255,255,0.1);
 border:1px solid rgba(255,255,255,0.3);
}
 
 .service-areas .area-card h4{
 color:var(--white);
}
 
 .service-areas .area-card p{
 color:rgba(255,255,255,0.8);
}
 
 .service-areas .area-card:hover{
 background:rgba(255,255,255,0.2);
 border-color:rgba(255,255,255,0.5);
}
 
 .service-areas .areas-cta{
 text-align:center;
 margin-top:32px;
}
 
 .btn-outline-white{
 display:inline-block;
 padding:14px 32px;
 background:transparent;
 color:var(--white);
 border:2px solid var(--white);
 border-radius:8px;
 font-weight:600;
 font-size:15px;
 text-decoration:none;
 transition:transform 0.2s ease, opacity 0.2s ease;
}
 
 .btn-outline-white:hover{
 background:var(--white);
 color:var(--primary);
}
 
 /* Locations grid white version for blue background */
 .locations-grid-white .loc-state h4,
 .locations-grid-white .loc-state h4 a{
 color:var(--white);
}
 
 .locations-grid-white .loc-cities a{
 color:rgba(255,255,255,0.9);
}
 
 .locations-grid-white .loc-cities a:hover{
 color:var(--white);
}
 
 .locations-grid-white .loc-cities .pin::before{
 color:rgba(255,255,255,0.7);
}
 
 .service-areas .locations-cta{
 text-align:center;
 margin-top:24px;
}
 
 .service-areas .locations-grid-full{
 background:transparent;
 margin:0;
 padding:0;
 gap:16px;
}
 
 .service-areas .loc-state{
 background:rgba(255,255,255,0.1);
 border:1px solid rgba(255,255,255,0.3);
}
 
 .service-areas .features-grid,
 .features .features-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:16px;
 background:transparent;
 padding:0;
}
 
 /* State pages mobile */
 @media (max-width:768px){
 .feature-card{
 padding:18px 16px;
}
 
 .feature-card h3,
 .feature-card h4{
 font-size:14px;
}
 
 .feature-card p{
 font-size:12px;
}
 
 .feature-card .feature-icon{
 font-size:28px;
 margin-bottom:10px;
}
 
 .hero-buttons{
 flex-direction:column;
 align-items:center;
 gap:12px;
}
 
 .hero-buttons .btn-primary,
 .hero-buttons .btn{
 width:100%;
 max-width:300px;
 justify-content:center;
 padding:14px 24px;
 font-size:15px;
}
 
 .service-areas .features-grid,
 .features .features-grid{
 grid-template-columns:repeat(2, 1fr);
 gap:12px;
}
}
 
 @media (max-width:480px){
 .feature-card{
 padding:14px 12px;
}
 
 .feature-card h3,
 .feature-card h4{
 font-size:13px;
}
 
 .feature-card p{
 font-size:11px;
}
 
 .service-areas .features-grid,
 .features .features-grid{
 grid-template-columns:repeat(2, 1fr);
 gap:10px;
}
}
 
 /* ===== CLS FIX:Reserve space for hero section ===== */
 
 /* Desktop hero - reserve minimum height */
 .hero{
 min-height:500px;
 contain:layout style paint;
 contain-intrinsic-size:auto 500px;
}
 
 /* Prevent layout shift from font loading */
 .hero-title,
 .hero-tagline,
 .location-badge{
 font-synthesis:none;
 text-rendering:optimizeSpeed;
}
 
 /* Critical CLS prevention - reserve exact space for hero elements */
 .hero .container{
 contain:layout style;
}
 
 /* Mobile nav overlay - hidden by default, no layout impact */
 .mobile-nav-overlay,
 .mobile-nav{
 position:fixed;
 contain:layout style paint;
}
 
 /* Reserve space for hero badge */
 .hero-badge-center{
 min-height:34px;
}
 
 .location-badge{
 min-height:34px;
 display:inline-flex;
 align-items:center;
}
 
 /* Reserve space for hero title */
 .hero-title{
 min-height:65px;
}
 
 /* Hero product image - explicit dimensions to prevent CLS */
 .hero-product-img{
 width:320px;
 height:365px;
 aspect-ratio:320 / 365;
 object-fit:contain;
}
 
 /* Hero center image - desktop */
 .hero-center img,
 .hero-image img{
 width:400px;
 height:auto;
 object-fit:contain;
}
 
 /* KKM badge - explicit dimensions to prevent shifts */
 .kkm-badge-left img{
 aspect-ratio:120 / 37;
 width:120px;
 height:37px;
 object-fit:contain;
}
 
 /* Recommend card images - prevent layout shift */
 .recommend-card-img img,
 .recommend-card-new img{
 aspect-ratio:1 / 1;
 width:80px;
 height:80px;
 object-fit:cover;
 contain-intrinsic-size:80px 80px;
}
 
 /* Lazy loaded images - intrinsic size hint */
 img[loading="lazy"]{
 content-visibility:auto;
}
 
 /* Mobile hero adjustments */
 @media (max-width:768px){
 .hero{
 min-height:700px;
 contain-intrinsic-size:auto 700px;
}
 
 .hero-title{
 min-height:70px;
}
 
 .hero-tagline{
 min-height:60px;
}
 
 .hero-product{
 min-height:300px;
}
 
 .hero-product-img{
 width:320px;
 height:365px;
 aspect-ratio:320 / 365;
 object-fit:cover;
}
 
 .hero-price-combined{
 min-height:50px;
}
 
 .hero-cta-stack{
 min-height:120px;
}
 
 .kkm-badge-left{
 min-width:70px;
 min-height:30px;
}
 
 .kkm-badge-left img{
 width:70px;
 height:22px;
}
}
 
 @media (max-width:480px){
 .hero{
 min-height:650px;
 contain-intrinsic-size:auto 650px;
}
 
 .hero-title{
 min-height:60px;
}
 
 .hero-tagline{
 min-height:50px;
}
 
 .hero-product{
 min-height:260px;
}
 
 .hero-product-img{
 width:280px;
 height:320px;
 aspect-ratio:280 / 320;
 object-fit:cover;
}
 
 .kkm-badge-left img{
 width:60px;
 height:19px;
}
}
 
 /* ===== PERFORMANCE:Skip rendering work for below-the-fold content ===== */
 
 /* Sections below the fold - browser can skip rendering until visible */
 .products-section,
 .why-us-section,
 .gallery-section,
 .areas-section,
 .faq-section,
 .cta-section,
 .reviews-section,
 .footer{
 content-visibility:auto;
 contain-intrinsic-size:auto 500px;
}
 
 /* Locations expanded is hidden, skip rendering completely */
 .locations-expanded{
 content-visibility:auto;
 contain-intrinsic-size:auto 800px;
}
 
 /* Skip rendering for hidden elements */
 [style*="display:none"],
 [style*="display:none"]{
 content-visibility:hidden;
}