:root{

    /* Fonts */

    --font-display:'Fraunces', serif;
    --font-body:'Inter', sans-serif;

    /* Main Colors */

    --primary:#0B1F3A;          /* Deep Navy */
    --secondary:#2563EB;        /* Electric Blue */

    /* Accent */

    --brass:#FBBF24;            /* Solar Gold */
    --brass-light:#FCD34D;

    /* Background */

    --cream:#F8FAFC;
    --white:#FFFFFF;

    /* Text */

    --ink:#1E293B;
    --gray:#64748B;

    /* Border */

    --line:#E2E8F0;
    --border:#E2E8F0;

    /* Accent alias (used across about.css / products.css) */
    --accent:#FBBF24;
  }

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.6;}
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  section{padding:100px 8vw;}
  h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;}
  .eyebrow{
    font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--brass);margin-bottom:16px;display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:28px;height:2px;background:var(--brass);display:inline-block;}
  .btn{
    display:inline-block;padding:15px 32px;border-radius:2px;font-weight:600;font-size:15px;
    transition:all .25s ease;border:2px solid transparent;cursor:pointer;
  }
  .btn-primary{background:var(--brass);color:var(--primary);}
  .btn-primary:hover{background:#F59E0B;}
  .btn-outline{border-color:var(--white);color:var(--white);}
  .btn-outline:hover{background:var(--white);color:var(--primary);}
  .btn-outline-dark{border-color:var(--primary);color:var(--primary);}
  .btn-outline-dark:hover{background:var(--primary);color:var(--white);}

  /* NAV */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 8vw;background:rgba(247,244,236,0.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .logo{
    display:flex;
    align-items:center;
    }

    .logo img{
        height:60px;
        width:auto;
        display:block;
    }
  nav ul{display:flex;gap:36px;}
  nav a{font-size:14px;font-weight:600;color:var(--ink);position:relative;}
  nav a::after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--brass);transition:width .25s;}
  nav a:hover::after{width:100%;}
  .nav-cta{display:none;}
  @media(min-width:900px){.nav-cta{display:block;}}
  .menu-toggle{display:block;background:none;border:none;font-size:26px;cursor:pointer;color:var(--primary);}
  @media(min-width:900px){.menu-toggle{display:none;}nav ul{display:flex;}}
  @media(max-width:899px){
    nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;padding:24px 8vw;gap:20px;border-bottom:1px solid var(--line);}
    nav ul.open{display:flex;}
  }

  /* HERO */
  .hero {
  	min-height: 100vh;
  	display: flex;
  	align-items: center;
  	position: relative;
  	overflow: hidden;
  	background: linear-gradient(135deg,
  			#0B1F3A 0%,
  			#12355B 55%,
  			#2563EB 100%);
  	color: var(--white);
  	padding-top: 120px;
  }

  .hero-rings{

		position:absolute;

		right:-15%;

		top:50%;

		transform:translateY(-50%);

		width:850px;

		height:850px;

		border-radius:50%;

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

		opacity:.5;

	}

  .hero-rings::before,
  .hero-rings::after {
  	content: "";
  	position: absolute;
  	border-radius: 50%;
  	border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero-rings::before {
  	inset: 80px;
  }

  .hero-rings::after {
  	inset: 180px;
  }

  /* HERO IMAGE */

	/* ===============================
		PREMIUM HERO IMAGE
================================ */

	.hero-image {

		position: absolute;

		right: -2%;

		top: 50%;

		transform: translateY(-50%);

		width: 760px;

		z-index: 1;

	}



	/* premium glow behind image */

	.hero-image::before {

		content: "";

		position: absolute;

		width: 650px;
		height: 650px;

		right: 80px;
		top: 50%;

		transform: translateY(-50%);


		background:
			radial-gradient(circle,
				rgba(251, 191, 36, .18),
				rgba(37, 99, 235, .12),
				transparent 70%);


		filter: blur(55px);

		z-index: -1;

	}



	/* remove card effect */

	.hero-image img {


		width: 100%;


		display: block;


		border-radius: 0;


		/*
		blend image into hero
		*/

		mask-image:

			linear-gradient(90deg,
				transparent 0%,
				black 12%,
				black 100%);


		filter:

			drop-shadow(0 35px 70px rgba(0, 0, 0, .45));


		animation:
			heroFloat 8s ease-in-out infinite;

	}


	@keyframes heroFloat {


		0% {
			transform: translateY(0);
		}


		50% {
			transform: translateY(-10px);
		}


		100% {
			transform: translateY(0);
		}

	}

  .hero-content{max-width:640px;position:relative;z-index:2;}
  .hero-eyebrow{color:var(--brass-light);}
  .hero-eyebrow::before{background:var(--brass-light);}
  .hero h1{font-size:clamp(38px,5.5vw,64px);line-height:1.05;margin-bottom:24px;}
  .hero h1 em{font-style:italic;color:var(--brass-light);}
  .hero p{font-size:18px;color:rgba(255,255,255,0.78);max-width:480px;margin-bottom:36px;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
  .hero-stats{display:flex;gap:48px;flex-wrap:wrap;}
  .hero-stats div{border-left:2px solid var(--brass);padding-left:16px;}
  .hero-stats strong{display:block;font-family:var(--font-display);font-size:30px;font-weight:600;}
  .hero-stats span{font-size:13px;color:rgba(255,255,255,0.65);}

  /* =========================================
   MOBILE HERO SPACING
  ========================================= */

  @media (max-width: 899px) {

    .hero {
      min-height: auto;
      padding-top: 190px;
      padding-bottom: 70px;
      align-items: flex-start;
    }

    .hero-content {
      width: 100%;
      max-width: 100%;
    }

    .hero-eyebrow {
      margin-top: 40px;
    }

  }

  /* ABOUT */
  .about{display:grid;grid-template-columns:1fr;gap:56px;}
  @media(min-width:900px){.about{grid-template-columns:0.9fr 1.1fr;align-items:center;}}
  .eyebrow a{color: inherit; text-decoration: none; cursor: pointer; transition: 0.3s ease; gap: 10px; display: inline-flex;}
  .eyebrow a:hover{color: var(--secondary); /* your yellow/orange theme color */}
  .eyebrow a i{font-size:18px; transition:.3s;}
  .eyebrow a:hover i{transform:translateX(6px);}

  .about-visual{
    aspect-ratio:4/5;background:linear-gradient(160deg,#0B1F3A,#2563EB);
    border-radius:2px;position:relative;overflow:hidden;
  }
  .about-visual img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .about-visual::after{
    position:absolute;bottom:24px;left:24px;color:var(--white);
    font-family:var(--font-display);font-size:20px;font-style:italic;
    z-index:2;
  }
  .about h2{font-size:clamp(30px,3.5vw,44px);color:var(--primary);margin-bottom:22px;}
  .about p{color:#4A5449;margin-bottom:18px;max-width:560px;}
  .about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px;}
  .about-grid div{border-top:2px solid var(--brass);padding-top:12px;}
  .about-grid strong{display:block;font-family:var(--font-display);font-size:26px;color:var(--primary);}
  .about-grid span{font-size:13px;color:#6B7368;}

  /*=================================WHY FRANCHISE SECTION=================================*/ 
	.why {
	
		background:
			radial-gradient(circle at top right,
				rgba(37, 99, 235, .25),
				transparent 35%),
			linear-gradient(135deg,
				#081A33,
				#0B1F3A);
	
		color: var(--white);
	
		text-align: center;
	
		position: relative;
	
		overflow: hidden;
	
	}
	
	
	/* subtle background ring */
	
	.why::before {
	
		content: "";
	
		position: absolute;
	
		width: 700px;
		height: 700px;
	
		right: -250px;
		top: -250px;
	
		border-radius: 50%;
	
		border: 1px solid rgba(255, 255, 255, .08);
	
	}
	
	
	/* eyebrow */
	
	.why .eyebrow {
	
		color: var(--brass-light);
	
		justify-content: center;
	
	}
	
	
	.why .eyebrow::before {
	
		background: var(--brass-light);
	
	}
	
	
	/* heading */
	
	.why h2 {
	
		font-size: clamp(34px, 4vw, 48px);
	
		max-width: 850px;
	
		margin: 25px auto 20px;
	
		line-height: 1.25;
	
	}
	
	
	/* paragraph */
	
	.why>p {
	
		max-width: 720px;
	
		margin: 0 auto 45px;
	
		color: rgba(255, 255, 255, .72);
	
		font-size: 17px;
	
		line-height: 1.8;
	
	}
	
	
	
	/* =================================
	        IMAGE
	================================= */
	
	
	.why-visual {
	
		width: min(850px, 90%);
	
		aspect-ratio: 16/9;
	
		margin: 40px auto 70px;
	
		border-radius: 28px;
	
		overflow: hidden;
	
		position: relative;
	
	
		border: 1px solid rgba(255, 255, 255, .15);
	
	
		box-shadow:
	
			0 30px 80px rgba(0, 0, 0, .45);
	
	}
	
	
	.why-visual::before {
	
		content: "";
	
		position: absolute;
	
		inset: 0;
	
	
		background:
	
			linear-gradient(180deg,
				transparent,
				rgba(0, 0, 0, .35));
	
	
		z-index: 1;
	
	}
	
	
	.why-visual img {
	
		width: 100%;
	
		height: 100%;
	
		object-fit: cover;
	
		display: block;
	
		transition: .5s;
	
	}
	
	
	
	.why-visual:hover img {
	
		transform: scale(1.05);
	
	}
	
	
	
	
	
	/* =================================
	        HIGHLIGHTS
	================================= */
	
	
	.why-highlights {
	
		display: grid;
	
		grid-template-columns: repeat(4, 1fr);
	
		gap: 22px;
	
		max-width: 1200px;
	
		margin: 0 auto 80px;
	
	}
	
	
	
	.highlight-box {
	
	
		display: flex;
	
		align-items: center;
	
		justify-content: center;
	
		gap: 14px;
	
	
		padding: 22px;
	
	
		background:
	
			rgba(255, 255, 255, .06);
	
	
		border:
	
			1px solid rgba(255, 255, 255, .12);
	
	
		border-radius: 18px;
	
	
		backdrop-filter: blur(12px);
	
	
		transition: .35s;
	
	
	}
	
	
	.highlight-box i {
	
	
		font-size: 24px;
	
		color: var(--brass);
	
	
	}
	
	
	
	.highlight-box span {
	
		color: white;
	
		font-weight: 600;
	
		font-size: 15px;
	
	}
	
	
	
	.highlight-box:hover {
	
	
		transform: translateY(-8px);
	
	
		border-color: var(--brass);
	
	
		box-shadow:
	
			0 15px 35px rgba(0, 0, 0, .25);
	
	
	}
	
	
	
	
	
	/* =================================
	        WHY CARDS
	================================= */
	
	
	.why-grid {
	
	
		max-width: 1200px;
	
		margin: auto;
	
	
		display: grid;
	
		grid-template-columns: repeat(3, 1fr);
	
	
		gap: 25px;
	
	
	}
	
	
	
	.why-card {
	
	
		background:
	
			rgba(255, 255, 255, .04);
	
	
		border:
	
			1px solid rgba(255, 255, 255, .12);
	
	
		border-radius: 22px;
	
	
		padding: 35px;
	
	
		text-align: left;
	
	
		transition: .35s;
	
	
	}
	
	
	
	.why-card:hover {
	
	
		transform: translateY(-10px);
	
	
		background:
	
			rgba(255, 255, 255, .08);
	
	
		box-shadow:
	
			0 25px 60px rgba(0, 0, 0, .3);
	
	
	}
	
	
	
	
	
	.why-icon {
	
	
		width: 65px;
	
		height: 65px;
	
	
		border-radius: 50%;
	
	
		display: flex;
	
		align-items: center;
	
		justify-content: center;
	
	
		background:
	
			rgba(251, 191, 36, .12);
	
	
		border:
	
			2px solid var(--brass);
	
	
		margin-bottom: 20px;
	
	
	}
	
	
	
	.why-icon i {
	
	
		color: var(--brass);
	
		font-size: 28px;
	
	
	}
	
	
	
	.why-card .num {
	
	
		color: var(--brass);
	
		font-size: 13px;
	
		letter-spacing: 2px;
	
		margin-bottom: 15px;
	
	}
	
	
	
	.why-card h3 {
	
	
		font-size: 21px;
	
		margin-bottom: 15px;
	
	
	}
	
	
	
	.why-card p {
	
	
		color: rgba(255, 255, 255, .65);
	
		line-height: 1.7;
	
	}
	
	
	
	
	
	/* RESPONSIVE */
	
	
	@media(max-width:1000px) {
	
	
		.why-highlights {
	
			grid-template-columns: repeat(2, 1fr);
	
		}
	
	
		.why-grid {
	
			grid-template-columns: repeat(2, 1fr);
	
		}
	
	
	}
	
	
	@media(max-width:600px) {
	
	
		.why-highlights,
	
		.why-grid {
	
			grid-template-columns: 1fr;
	
		}
	
	
	}

  /* ==========================
 INVESTMENT / FRANCHISE
===========================*/


.invest{
    background:#f8fafc;
}


.invest h2{

    font-size:clamp(32px,4vw,46px);
    color:var(--primary);
    max-width:750px;
    margin-bottom:18px;

}


.invest .lead{

    color:#5B6675;
    max-width:700px;
    font-size:17px;
    line-height:1.8;
    margin-bottom:60px;

}



.invest-table{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;

}



.plan{

    position:relative;
    background:white;
    border-radius:20px;
    padding:40px 30px;
    overflow:hidden;
    border:1px solid #e8e8e8;

    display:flex;
    flex-direction:column;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.plan:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 50px rgba(0,0,0,.12);

    border-color:#f4b400;

}



.franchise-line{

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:5px;

}


.silver-line{

background:#94a3b8;

}


.gold-line{

background:linear-gradient(90deg,#f4b400,#ffd85a);

}


.platinum-line{

background:linear-gradient(90deg,#0EA5E9,#dbeafe);

}



.franchise-icon{

width:65px;
height:65px;

border-radius:18px;

display:flex;
align-items:center;
justify-content:center;

background:#f1f5f9;

margin-bottom:22px;

}


.franchise-icon i{

font-size:30px;
color:#94a3b8;

}


.franchise-icon.gold{

background:#fff4cc;

}


.franchise-icon.gold i{

color:#f4b400;

}


.franchise-icon.platinum{

background:#E0F2FE;

}


.franchise-icon.platinum i{

color:#0EA5E9;

}


.bronze-line{

background:linear-gradient(90deg,#B45309,#D97706);

}


.diamond-line{

background:linear-gradient(90deg,#2563EB,#60A5FA);

}


.black-diamond-line{

background:linear-gradient(90deg,#0B1F3A,#334155);

}


.franchise-icon.bronze{

background:#FDE8D8;

}


.franchise-icon.bronze i{

color:#B45309;

}


.franchise-icon.diamond{

background:#DBEAFE;

}


.franchise-icon.diamond i{

color:#2563EB;

}


.franchise-icon.black-diamond{

background:#0B1F3A;

}


.franchise-icon.black-diamond i{

color:#FBBF24;

}



.plan h3{

font-size:25px;
color:var(--primary);

margin-bottom:12px;

}



.plan .price{

font-size:32px;
font-weight:700;
color:#f4b400;

}


.plan .price small{

display:block;

font-size:13px;
font-weight:500;
color:#64748b;

}



.plan ul{

margin:30px 0;

}


.plan li{

display:flex;
gap:10px;

padding:12px 0;

border-bottom:1px dashed #ddd;

font-size:14px;

color:#475569;

}



.plan li i{

color:#f4b400;

margin-top:4px;

}



.plan .btn{

margin-top:auto;

}



.plan.featured{

border:2px solid #f4b400;

transform:scale(1.03);

}



.plan.featured:hover{

transform:scale(1.03) translateY(-10px);

}



.plan-tag{

position:absolute;

top:20px;
right:20px;

background:#f4b400;

color:#111827;

padding:6px 14px;

font-size:12px;

font-weight:700;

border-radius:20px;

}



.invest-note{

margin-top:40px;

font-size:14px;

color:#64748b;

}

/* ==========================
   PREMIUM FRANCHISE BANNER
===========================*/

.franchise-banner{

    width:90%;              /* decreased width */

    max-width:1000px;       /* keeps premium size */

    height:auto;

    margin:30px auto 70px;

    border-radius:28px;

    overflow:hidden;

    position:relative;

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

}



.franchise-banner img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    transition:.6s ease;

}



/* light premium overlay */

.franchise-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(11,31,58,.15),
        transparent 60%
    );

    pointer-events:none;

}



.franchise-banner:hover img{

    transform:scale(1.03);

}



@media(max-width:768px){

    .franchise-banner{

        width:100%;

        border-radius:18px;

    }

}

  /* PROCESS */
  .process{

		background:var(--primary);

		color:var(--white);

		overflow:hidden;

		position:relative;

	}
  .process .eyebrow{color:var(--brass-light);}
  .process .eyebrow::before{background:var(--brass-light);}
  .process h2{
    font-size:clamp(30px,3.5vw,44px);
    max-width:700px;
    margin-bottom:18px;
  }
  .process-desc{
    max-width:650px;
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,0.75);
    margin-bottom:55px;
  }

	.process-list{

    display:flex;

    flex-direction:column;

    position:relative;

    z-index:2;

	}
  .process-item{
    display:grid;grid-template-columns:70px 1fr;gap:24px;padding:28px 0;
    border-top:1px solid rgba(255,255,255,0.16);
  }
  .process-item:last-child{border-bottom:1px solid rgba(255,255,255,0.16);}
  .process-item .step-icon{

    width:60px;
    height:60px;

    border-radius:50%;

    background:rgba(251,191,36,.12);

    border:2px solid var(--brass);

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    transition:.35s;

}

.process-item .step-icon i{

    font-size:24px;

    color:var(--brass);

}

.process-item .step-icon span{

    position:absolute;

    top:-8px;
    right:-8px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:var(--brass);

    color:var(--primary);

    font-size:11px;

    font-weight:700;

    display:flex;
    justify-content:center;
    align-items:center;

}
  .process-item h3{font-size:19px;margin-bottom:8px;}
  .process-item:hover .step-icon{

    background:var(--brass);

    transform:rotate(8deg) scale(1.08);

}

.process-item:hover .step-icon i{

    color:var(--primary);

}

/* ===========================
   PROCESS RIGHT VISUAL
=========================== */

.process-wrapper{

    display:grid;
    grid-template-columns:55% 45%;
    align-items:center;
    position:relative;

}


.process-list{

    position:relative;
    z-index:2;

}



/* RIGHT IMAGE */

.process-image{

    position:absolute;

    right:-8vw;

    top:0;

    width:55vw;

    height:100%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    z-index:1;

    pointer-events:none;

}



/* background glow */

.process-image::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:50px;

    background:

    radial-gradient(
        circle,
        rgba(251,191,36,.18),
        transparent 65%
    );


    filter:blur(70px);

}



/* IMAGE */

.process-image img{


    width:800px;

    max-width:none;


    object-fit:contain;


    position:relative;


    filter:

    drop-shadow(
        0 35px 70px rgba(0,0,0,.45)
    );


    /* blend left side with background */

    mask-image:

    linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.7) 20%,
        black 45%,
        black 100%
    );


    animation:processFloat 8s ease-in-out infinite;

}



@keyframes processFloat{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-12px);

    }


    100%{

        transform:translateY(0);

    }

}



/* RESPONSIVE */

@media(max-width:1200px){

.process-wrapper{

    grid-template-columns:1fr 430px;

}


.process-image{

    height:500px;

}


}


@media(max-width:900px){

.process-wrapper{

    grid-template-columns:1fr;

}


.process-image{

    height:auto;

    margin-top:50px;

}

.process-image img{

    width:100%;

}

}

@media(max-width:1000px){

.process-layout{

    grid-template-columns:1fr;

}


.process-image{

    position:relative;

    right:auto;

    top:auto;

    transform:none;

    width:100%;

    height:auto;

    margin-top:50px;

}


.process-image img{

    max-width:100%;

}

}

  /* TESTIMONIALS */
  .testimonials h2{font-size:clamp(30px,3.5vw,44px);color:var(--primary);max-width:600px;margin-bottom:56px;}
  .test-grid{display:grid;grid-template-columns:1fr;gap:28px;}
  @media(min-width:900px){.test-grid{grid-template-columns:repeat(3,1fr);}}
  .test-card{background:var(--white);border:1px solid var(--line);padding:34px 30px;}
  .quote-mark{font-family:var(--font-display);font-style:italic;font-size:42px;color:var(--brass);line-height:1;margin-bottom:10px;}
  .test-card p{color:#3E483F;font-size:15px;margin-bottom:24px;}
  .test-person{display:flex;align-items:center;gap:12px;}
  .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--brass));flex-shrink:0;}
  .test-person strong{display:block;font-size:14px;color:var(--primary);}
  .test-person span{font-size:12.5px;color:#8A9184;}

  /* CONTACT */
  .contact{background:var(--cream);}
  .contact-wrap{display:grid;grid-template-columns:1fr;gap:56px;}
  @media(min-width:900px){.contact-wrap{grid-template-columns:0.9fr 1.1fr;}}
  .contact h2{font-size:clamp(30px,3.5vw,44px);color:var(--primary);margin-bottom:16px;}
  .contact > div > p{color:#4A5449;margin-bottom:32px;max-width:440px;}
  .contact-info{display:flex;flex-direction:column;gap:20px;}
  .contact-info div{border-left:2px solid var(--brass);padding-left:16px;}
  .contact-info strong{display:block;font-size:13px;color:#8A9184;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;}
  .contact-info span{font-size:15px;color:var(--primary);font-weight:600;}

  /* =========================================
   CONTACT MAP
  ========================================= */

  .contact-map {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 25px;
    overflow: hidden;
    border-radius: 12px;
  }

  .contact-map iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 450px;
    border: 0;
  }

  /* =========================================
    MOBILE CONTACT MAP
  ========================================= */

  @media (max-width: 899px) {

    .contact-map {
      width: 100%;
      max-width: 100%;
      margin-top: 25px;
    }

    .contact-map iframe {
      width: 100%;
      max-width: 100%;
      height: 300px;
    }

  }

  form{background:var(--white);border:1px solid var(--line);padding:40px;}
  .form-row{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px;}
  @media(min-width:600px){.form-row.two{grid-template-columns:1fr 1fr;}}
  label{display:block;font-size:13px;font-weight:600;color:var(--primary);margin-bottom:7px;}
  input,select,textarea{
    width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--cream);
    font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  }
  input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;background:var(--white);}
  textarea{resize:vertical;min-height:100px;}
  form .btn{width:100%;margin-top:8px;}

  .form-divider{
    margin:35px 0;
    border:none;
    border-top:1px solid var(--line);
  }

  /* Social */

  .social-section{
      text-align:center;
  }

  .social-section h3{
      font-size:18px;
      color:var(--primary);
      margin-bottom:20px;
  }

  .social-links{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:18px;
  }

  .social-links a{
      width:50px;
      height:50px;
      border-radius:50%;
      border:1px solid var(--line);
      display:flex;
      justify-content:center;
      align-items:center;
      color:var(--primary);
      font-size:22px;
      transition:.3s;
  }

  .social-links a:hover{
      background:var(--brass);
      color:#fff;
      transform:translateY(-4px);
  }

  /* QR */

  .qr-section{
      margin-top:35px;
      text-align:center;
  }

  .qr-section h3{
      color:var(--primary);
      margin-bottom:18px;
      font-size:18px;
  }

  .qr-image{
      width:180px;
      border-radius:12px;
      border:2px solid var(--brass);
      transition:.3s;
      box-shadow:0 10px 25px rgba(0,0,0,.08);
      display:block;
      margin:0 auto;
  }

  .qr-image:hover{
      transform:scale(1.05);
  }

  .qr-section p{
      margin-top:12px;
      color:#666;
      font-size:14px;
  }

  /* =========================================
   MOBILE CONTACT FIX
  ========================================= */

  .contact,
  .contact-wrap,
  .contact-wrap > div,
  .contact form {
    min-width: 0;
    max-width: 100%;
  }

  .contact form {
    width: 100%;
    box-sizing: border-box;
  }

  @media (max-width: 599px) {

    .contact-wrap {
      grid-template-columns: 1fr;
      gap: 36px;
    }

    .contact form {
      padding: 24px 18px;
    }

    .contact h2 {
      font-size: 30px;
      line-height: 1.2;
    }

    .contact > div > p {
      max-width: 100%;
    }

    .contact-info span {
      overflow-wrap: anywhere;
    }

  }

  /* Prevent padding and borders from increasing element width */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

    /* FOOTER */
    footer{background:var(--primary);color:rgba(255,255,255,0.7);padding:72px 8vw 28px;}
    .footer-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:56px;}
    @media(min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
    .footer-logo{font-family:var(--font-display);font-size:22px;color:var(--white);margin-bottom:14px;}
    .footer-logo span{color:var(--brass-light);}
    .footer-grid p{font-size:14px;max-width:280px;margin-bottom:20px;}
    .social{display:flex;gap:14px;}
    .social a{width:36px;height:36px;border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--white);}
    .social a:hover{background:#FBBF24;color:#0B1F3A;border-color:var(--brass);}
    .footer-col h4{color:var(--white);font-size:14px;margin-bottom:18px;letter-spacing:0.04em;}
    .footer-col li{margin-bottom:11px;font-size:14px;}
    .footer-col a:hover{color:var(--brass-light);}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;
      display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:rgba(255,255,255,0.5);
    }
    .footer-bottom a{margin-left:18px;}

    .fine-print{background:#FEF9C3;border:1px dashed var(--brass);border-radius:10px;padding:14px 20px;font-size:13px;color:#92400E;margin-bottom:0;}

    /* Company Name */

  .footer-brand img{
    height:65px;
    width:auto;
    margin-bottom:12px;
  }

  .footer-brand small{
      display:block;
      margin-top:8px;
      color:var(--brass-light);
      font-size:14px;
      font-family:var(--font-body);
      font-weight:500;
  }

  /* Social Icons */

  .footer-social{
      display:flex;
      gap:15px;
      margin-top:25px;
  }

  .footer-social-icon{
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.2);

      display:flex;
      justify-content:center;
      align-items:center;

      color:#fff;

      transition:.3s;
  }

  .footer-social-icon:hover{

    background:#FBBF24;
    color:#0B1F3A;

    border-color:var(--brass);

    transform:translateY(-4px);

}

@media(max-width:900px){

    .hero{
        display:flex;
        flex-direction:column;
        text-align:left;
        padding-bottom:40px;
    }

    /* Flatten hero-content so its children (heading, paragraph,
       actions, stats) become direct flex items of .hero, sitting
       alongside .hero-image — this lets us reorder the image to
       sit between the heading and the paragraph on mobile. */
    .hero-content{
        display:contents;
    }

    .hero-heading{ order:1; }

    .hero-image{
        display:block;
        position:relative;
        right:auto;
        top:auto;
        transform:none;
        width:100%;
        max-width:480px;
        margin:24px auto;
        order:2;
    }

    .hero-content > p{ order:3; max-width:100%; }
    .hero-actions{ order:4; }
    .hero-stats{ order:5; }

    .hero-image::before{
        width:340px;
        height:340px;
        right:auto;
        left:50%;
        transform:translate(-50%,-50%);
    }

    .hero-image img{
        width:100%;
        mask-image:none;
        -webkit-mask-image:none;
        border-radius:20px;
        filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));
    }

}

@media(max-width:480px){

    .hero-image{
        max-width:100%;
        margin:20px 0;
    }

    .hero-image img{
        border-radius:16px;
    }

}

  /*==========================
 BUSINESS VERTICALS PREMIUM
===========================*/

.verticals{

    background:#ffffff;
    padding:100px 8vw;

}


.verticals h2{

    font-size:clamp(32px,4vw,46px);
    color:#0B1F3A;
    max-width:750px;
    margin-bottom:18px;

}


.verticals-lead{

    color:#5B6675;
    font-size:17px;
    line-height:1.8;
    max-width:720px;
    margin-bottom:60px;

}



/* GRID */

.vert-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}



@media(max-width:1100px){

.vert-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:650px){

.vert-grid{

grid-template-columns:1fr;

}

}



/* CARD */

.vert-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #e8edf5;

    box-shadow:
    0 15px 40px rgba(11,31,58,.08);

    transition:.4s ease;

    display:flex;

    flex-direction:column;


}



.vert-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(11,31,58,.15);

}



/* GOLD TOP LINE */

.card-top-line{

    height:4px;

    width:100%;

    background:
    linear-gradient(
    90deg,
    #FBBF24,
    #2563EB
    );

}



/* IMAGE */

.vert-thumb{

    height:200px;

    overflow:hidden;

}



.vert-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.vert-card:hover .vert-thumb img{

    transform:scale(1.08);

}



/* ICON FLOATING */

.vert-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;


    margin:

    -32px auto 15px;


    position:relative;

    z-index:2;


    border:4px solid white;


    box-shadow:

    0 10px 30px rgba(0,0,0,.18);


}



.vert-icon i{

    font-size:28px;

    color:#F4B400;

}



/* CONTENT */


.vert-card h3{

    text-align:center;

    font-size:22px;

    color:#0B1F3A;

    margin:10px 20px 15px;

}



.vert-card p{

    padding:0 25px;

    text-align:center;

    color:#5B6675;

    line-height:1.7;

    font-size:14px;

}




/* LIST */

.vert-list{

    padding:20px 28px;

    margin:0;

}



.vert-list li{

    list-style:none;

    display:flex;

    gap:10px;

    font-size:13px;

    margin-bottom:12px;

    color:#455468;

}



.vert-list i{

    color:#FBBF24;

}



/* BUTTON */


.vert-btn{

    margin:auto 25px 25px;


    padding:12px 18px;


    border-radius:30px;


    border:1px solid #0B1F3A;


    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;


    color:#0B1F3A;

    font-weight:600;

    text-decoration:none;


    transition:.3s;

}



.vert-btn:hover{


    background:#0B1F3A;

    color:white;


}


.vert-btn:hover i{

	transform:translateX(5px);

}

  /* ===========================
      HOW WE EARN
=========================== */


.earn{

    background:var(--cream);
    padding:100px 8vw;

}


.earn h2{

    font-size:clamp(32px,4vw,46px);
    color:var(--primary);
    max-width:700px;
    margin-bottom:18px;

}


.earn-lead{

    color:#5B6675;
    font-size:16px;
    line-height:1.8;
    max-width:650px;
    margin-bottom:60px;

}



.earn-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;

}



.earn-card{

	position:relative;

	background-size:cover;

	background-position:center;

	background-repeat:no-repeat;

	border:1px solid #e8e8e8;

	border-radius:18px;

	padding:35px 28px;

	overflow:hidden;

	transition:.35s ease;

	box-shadow:
	0 10px 30px rgba(0,0,0,.05);

	min-height:350px;

	color:white;

}



/* Top Gold Line */

.earn-card::before{

	content:"";

	position:absolute;

	top:0;
	left:0;

	width:100%;
	height:5px;

	background:
		linear-gradient(
			90deg,
		#f4b400,
		#ffd65a
	);

	z-index:5;

}



/* Hover */

.earn-card:hover{

    transform:translateY(-12px);

    border-color:#f4b400;

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);

}




/* Icon */

.earn-icon{

    width:70px;
    height:70px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #fff8e6,
    #ffe4a3
    );

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    box-shadow:
    0 10px 25px rgba(244,180,0,.25);

    position: relative;
    z-index: 3;
    backdrop-filter: blur(6px);

}



.earn-icon i{

    font-size:30px;

    color:#f4b400;

}




.earn-card h3{

    font-size:22px;

    color:#ffffff;

    margin-bottom:15px;

    text-shadow:
    0 2px 8px rgba(0,0,0,.45);

}



.earn-card p{

    color:rgba(255,255,255,.92);

    font-size:15px;

    line-height:1.8;

    text-shadow:
    0 2px 6px rgba(0,0,0,.45);

}
/* ==========================
   EARN CARD BACKGROUND IMAGES
=========================== */


.earn-card{

    background-size:cover;

    background-position:center;

    color:white;

		min-height:350px;

}


/* IMAGE OVERLAY */

.earn-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(11,31,58,.75),
        rgba(11,31,58,.88)
    );

    z-index:1;

}



/* Keep content above image */

.earn-card > *{

    position:relative;

    z-index:3;

}



/* Background Images */


.product-margin{

	background-image:url("../images/product-margin.png");

}



.installation-service{

	background-image:url("../images/installation-service.png");

}



.amc-contracts{

	background-image:url("../images/amc-contracts.png");

}



.government-projects{

	background-image:url("../images/government-projects.png");

}

  /* BENEFITS */
  .benefits{background:var(--white);}
  .benefits h2{font-size:clamp(30px,3.5vw,44px);color:var(--primary);max-width:640px;margin-bottom:16px;}
  .benefits-lead{color:#4A5449;max-width:600px;margin-bottom:50px;font-size:16px;}

  .trust-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    margin-bottom:44px;
  }
  @media(min-width:700px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
  @media(min-width:1100px){ .trust-grid{grid-template-columns:repeat(3,1fr);} }

  .trust-card{

    position:relative;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    border-radius:18px;

    padding:34px 28px;

    overflow:hidden;

    min-height:300px;

    color:white;

    transition:.35s;

}


/* Image Overlay */

.trust-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(11,31,58,.55),
        rgba(11,31,58,.90)
    );

    z-index:1;

}



/* Keep Content Above Image */

.trust-card>* {

    position: relative;

    z-index: 2;

}

  .trust-card::before{
    content:"";
    position:absolute; top:0; left:0;
    width:100%; height:4px;
    background:linear-gradient(90deg,var(--secondary),var(--brass));
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease;
  }
  .trust-card:hover::before{ transform:scaleX(1); }
  .trust-card:hover{
    transform:translateY(-10px);
    border-color:var(--brass);
    box-shadow:
    0 25px 50px rgba(11,31,58,.18);
  }
  .trust-card:hover::after{

    background:
    linear-gradient(
        180deg,
        rgba(11,31,58,.45),
        rgba(11,31,58,.82)
    );

}
  .trust-icon{

    width:60px;
    height:60px;

    border-radius:16px;

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

    backdrop-filter:blur(8px);

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

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}


.trust-icon i{

    font-size:24px;

    color:#FBBF24;

}
  .trust-card h3{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    text-shadow:
    0 2px 8px rgba(0,0,0,.5);

}
  .trust-card p{

    color:rgba(255,255,255,.92);

    text-shadow:
    0 2px 6px rgba(0,0,0,.5);

}
  .dcr-panel{

    background-image:url("../images/benifits/dcr-panel.jpg");

}


.warranty{

    background-image:url("../images/benifits/warranty.jpg");

}


.installation{

    background-image:url("../images/benifits/installation.jpg");

}


.home-service{

    background-image:url("../images/benifits/home-service.jpg");

}


.support{

    background-image:url("../images/benifits/support.jpg");

}

  /* CTA BAND */
  .cta-band{background:var(--primary);text-align:center;padding:90px 8vw;}
  .cta-band h2{font-size:clamp(28px,4vw,42px);color:var(--white);margin-bottom:14px;}
  .cta-band p{color:rgba(255,255,255,0.75);font-size:17px;margin-bottom:30px;}

/* ============================================================
   SITE-WIDE FLOATING ACTION BUTTONS — WhatsApp + Call Now
   Used across every page.
============================================================ */
.float-whatsapp,
.float-call{
  position:fixed;
  bottom:26px;
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  color:var(--white);
  text-decoration:none;
  z-index:999;
}

.float-whatsapp{
  right:26px;
  background:#25D366;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  animation:floatPulseGreen 2.4s infinite;
}
.float-whatsapp:hover{ transform:scale(1.08); }

.float-call{
  left:26px;
  background:var(--secondary);
  box-shadow:0 10px 26px rgba(37,99,235,.45);
  animation:floatPulseBlue 2.4s infinite;
}
.float-call:hover{ transform:scale(1.08); }

.float-tooltip{
  position:absolute;
  background:var(--primary);
  color:var(--white);
  padding:8px 14px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:.25s;
}
.float-whatsapp .float-tooltip{ right:70px; transform:translateX(8px); }
.float-call .float-tooltip{ left:70px; transform:translateX(-8px); }
.float-whatsapp:hover .float-tooltip,
.float-call:hover .float-tooltip{ opacity:1; visibility:visible; transform:translateX(0); }

@keyframes floatPulseGreen{
  0%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes floatPulseBlue{
  0%{ box-shadow:0 10px 26px rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,.5); }
  70%{ box-shadow:0 10px 26px rgba(37,99,235,.45), 0 0 0 16px rgba(37,99,235,0); }
  100%{ box-shadow:0 10px 26px rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,0); }
}

@media(max-width:600px){
  .float-tooltip{ display:none; }
  .float-whatsapp, .float-call{ width:52px; height:52px; font-size:23px; bottom:18px; }
  .float-whatsapp{ right:18px; }
  .float-call{ left:18px; }
}

/* ==========================================================
   GLOBAL MOBILE RESPONSIVENESS PASS
   Applies site-wide (all pages load style.css)
========================================================== */

/* Prevent any accidental horizontal scroll from wide/absolute elements */
html, body{ overflow-x:hidden; width:100%; }

@media(max-width:900px){
  section{ padding:70px 6vw; }
  .cta-band{ padding:60px 6vw; }
}

@media(max-width:600px){
  section{ padding:56px 6vw; }
  .cta-band{ padding:50px 6vw; }

  /* Header/logo tighten up on phones */
  header{ padding:16px 5vw; }
  .logo img{ height:44px; }
  .menu-toggle{ font-size:24px; }

  /* Hero: avoid 100vh trapping content behind mobile browser chrome */
  .hero{ min-height:auto; padding-top:110px; padding-bottom:60px; }
  .hero-content h1{ font-size:clamp(28px,8vw,38px); }
  .hero-stats{ gap:20px; }

  /* Button rows stack full-width on narrow phones instead of wrapping awkwardly */
  .hero-actions, .cn-hero-actions, .tier-cta, .card-actions{
    flex-direction:column;
  }
  .hero-actions .btn, .cn-hero-actions .btn, .tier-cta a{
    width:100%; text-align:center;
  }
  .card-actions a{ width:100%; }

  /* Section headings read better slightly smaller on phones */
  h1{ font-size:clamp(26px,8vw,36px); }
  h2{ font-size:clamp(22px,7vw,30px); }

  /* Tables/rows that use space-between can get cramped; allow wrap */
  .tier-customer-banner{ flex-direction:column; align-items:flex-start; gap:6px; }
  .margin-row{ flex-wrap:wrap; gap:10px; }
  .scooter-price-row{ flex-wrap:wrap; gap:10px; }

  /* Footer bottom row stacks cleanly */
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
}

@media(max-width:420px){
  .eyebrow{ font-size:11.5px; }
  .btn{ padding:13px 24px; font-size:14px; }
  .logo img{ height:38px; }
}

/* ============================================
   IMAGE PLACEHOLDERS (added — no existing rules changed)
   ============================================ */

/* Vertical cards (Solar / Scooters / LED / Appliances) thumbnail */
.vert-thumb{
  width:100%;
  aspect-ratio:16/10;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:20px;
  background:#eef1ec;
}
.vert-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Testimonial avatar photo (sits inside existing .avatar circle) */
.avatar{overflow:hidden;}
.avatar img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}

/* Benefits/Trust section supporting photo */
.benefits-visual{
  width:100%;
  aspect-ratio:21/9;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:40px;
  background:#eef1ec;
}
.benefits-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
}


/* ===============================
   PRODUCTS NAV DROPDOWN
================================ */

.nav-dropdown{
  position:relative;
}

.nav-dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.nav-chevron{
  font-size:9px;
  transition:transform .25s ease;
}

.nav-dropdown:hover > a .nav-chevron{
  transform:rotate(180deg);
}

.product-dropdown{

  position:absolute;

  /* FIX: Remove the gap between Products and dropdown */
  top:calc(100% - 1px);

  left:50%;

  transform:translateX(-50%) translateY(8px);

  min-width:210px;

  display:flex;

  flex-direction:column;

  gap:0;

  padding:10px 0;

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

  border:1px solid var(--line);

  border-radius:12px;

  box-shadow:0 18px 40px rgba(11,31,58,.16);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;

  z-index:200;

}

.nav-dropdown:hover .product-dropdown{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:translateX(-50%) translateY(0);

}

.product-dropdown::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  width:12px;
  height:12px;
  background:#fff;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);
}

.product-dropdown li{
  width:100%;
}

.product-dropdown li a{
  display:flex;
  align-items:center;
  padding:12px 18px;
  color:var(--primary);
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  transition:.25s ease;
}

.product-dropdown li a::after{
  display:none;
}

.product-dropdown li a:hover{
  background:rgba(251,191,36,.12);
  color:var(--secondary);
  padding-left:23px;
}

/* Mobile dropdown */
@media(max-width:899px){

  .nav-dropdown{
    width:100%;
  }

  .nav-dropdown > a{
    width:100%;
  }

  .product-dropdown{
    position:static;
    transform:none;
    min-width:0;
    width:100%;
    margin-top:6px;
    padding:5px 0 5px 18px;
    background:rgba(11,31,58,.04);
    border:none;
    border-left:2px solid var(--brass);
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:flex;
  }

  .product-dropdown::before{
    display:none;
  }

  .product-dropdown li a{
    padding:9px 12px;
  }

  .product-dropdown li a:hover{
    padding-left:16px;
  }

  .nav-chevron{
    margin-left:4px;
  }
}