:root {
			--brown: #4a2616;
			--gold: #d79b3a;
			--cream: #fffaf6;
			--muted: #6b6b6b;
			--radius: 14px;
            
		}

		* {
			box-sizing: border-box
		}
		html{
		    overflow-x: hidden;
		}

		body {
			font-family: Inter, system-ui, Arial;
			background: #f3f3f3;
			margin: 0;
			color: #222;
			-webkit-font-smoothing: antialiased
		}

		a {
			color: inherit
		}

		.wrap {
			background: #fff;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08)
		}
		.section-title{
		    color: #5d2a16;
		}
        .unique_font{
            color: #f8b707;
        }
		/* HERO image large like PDF */
		.hero {
			position: relative;
			height: 680px;
			background: #000;
			display: flex;
			align-items: flex-start;
			justify-content: center;
		}

		.hero img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;

		}

		.hero .logo-text {
			position: absolute;
			top: 36px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 4;
			color: #fff;
			font-family: 'Playfair Display', serif;
			font-size: 44px;
			letter-spacing: 6px;
			text-align: center;
		}

		/* white band with centered small logo and underside brown band */
		.brand-band {
			background: #ffffff00;
			padding: 0.5rem 0;
			text-align: center;
			border-top: 4px solid rgba(0, 0, 0, 0.04);
		    position: absolute;
            width: 100vw;
            top: 0;
            z-index: 9;
            
		}
	
/* Default: show normal image */
.img-default { 
    display: inline-block;  
    
}
.img-hover { 
    display: none; 
    
}

/* On hover: switch images */
.brand-band:hover .img-default { display: none; }
.brand-band:hover .img-hover { display: inline-block; }

/* Your hover background */
.brand-band:hover {
    background: white; 
}
		.login__wrapper{ 
            text-align: left; 
            margin-right: 1rem;
		}
		.login__wrapper a{
		    font-size: 1.2rem;
    background: #f8b707;
    padding: 0.5rem;
    border-radius: 5px;
    font-weight: 600;
    color: white;
		}

		.brand-band .tag {
			margin-top: 10px;
			font-size: 12px;
			color: var(--muted);
			letter-spacing: 2px
		}

		.brown-bar {
			background: var(--brown);
			color: #fff;
			padding: 28px 20px;
			text-align: center;
			font-weight: 700;
			letter-spacing: 2px;
			line-height: 22px;
			margin-top: 1.5rem;
		}

		.brown-bar small {
			display: block;
			margin-top: 6px;
			font-weight: 400;
			opacity: 0.95
		}

		.images__collage {
			text-align: center;
		}

		.images__collage img {
			width: 100%;
			margin: 0 auto;
		}

		.collage-wrapper {
			margin: 0 10rem;
		}

		.collage-wrapper p {
			margin: 0 5rem;
			word-spacing: 10px;
			font-weight: 600;
			line-height: 25px;
		}

		.collection-section {
			margin: 50px 0;
			background: #ffffff;
			text-align: center;
			font-family: 'Inter', sans-serif;
			border-top: 6px solid;
		}

		.section-title {
			font-size: 32px;
			font-weight: 700;
			letter-spacing: 2px;
			margin-bottom: 10px;
		}

		.section-subtitle {
			font-size: 17px;
			max-width: 850px;
			margin: auto;
			color: #444;
			margin-bottom: 40px;
		}

		/* FIX: Slide images correct row me ayengi */
		.slide-box {
			position: relative;
			overflow: hidden;
			border-radius: 10px;
			height: 550px;
		}

		.slide-box img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.swiper-slide {
			display: flex;
			justify-content: center;
		}

		/* Caption Style */
		.caption {
			position: absolute;
			bottom: 25px;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 25px;
			font-weight: 700;
			letter-spacing: 2px;
			text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6);
			width: 100%; 
		}

		

		.highlight__content__wrapper {
			/*margin: 50px 0;*/
			background: #ffffff;
			text-align: center;
			font-family: 'Inter', sans-serif;
			/*border-top: 6px solid;*/
		}

		/* White cards container under image */
		.highlight-content {
			/*position: absolute;*/
			bottom: -180px;
			/* card ko image ke bilkul neeche touch karata hai */
			left: 50%;
			/*transform: translateX(-50%);*/
			width: 100%;
			/*display: flex;*/
			/*flex-direction: column;*/
			/*align-items: center;*/
		}

		/* Highlights card */
		.highlight-card {
			width: max-content;
			background: #ffffff;
			border: 2px solid #5d2a16;
			padding: 40px 40px;
			border-radius: 15px;
			text-align: center;
			box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
			margin: 0 auto;
			margin-top: 3rem;
			position: relative;
		}

		/* badge title (NOT fixed!) */
		.card-title {
			background: #5d2a16;
			color: #fff;
			padding: 8px 25px;
			border-radius: 30px;
			display: inline-block;
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20px;
			position: absolute;
			top: -2rem;
			transform: translateX(-50%);
		}

		/* 3-column text grid */
		.card-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			font-size: 16px;
			font-weight: 600;
			color: #3a2a24;
		}

		/* 2nd description card */
		.empower__your__business_section {
			/*width: 80%;*/
			padding: 35px 40px;
			border-radius: 15px;
			text-align: center;
			margin: 0 22%;
		}

		.empower__your__business_section p {
			text-align: center;
			line-height: 30px;
		}

		/* ----------- DARK BROWN SECTION ------------- */

		.b2b-section {
			width: 100%;
			background: #3b1205;
			/* dark brown like screenshot */
			padding: 50px 0;
		}

		.b2b-container {
			width: 90%;
			max-width: 1300px;
			margin: auto;
			display: flex;
			justify-content: space-between;
			gap: 50px;
			color: white;
		}

		/* ----- LEFT SIDE TEXT ------ */

		.b2b-left h2 {
			font-size: 28px;
			font-weight: 700;
			margin-bottom: 25px;
			line-height: 1.4;
		}

		.b2b-left .big {
			font-size: 18px;
			margin-bottom: 25px;
		}

		.b2b-left .small {
			font-size: 17px;
			margin-bottom: 30px;
		}

		.b2b-left .tiny {
			font-size: 15px;
			line-height: 1.5;
		}

		/* --------- RIGHT SIDE FORM OUTLINE ---------- */

		.b2b-right {
			width: 40%;
			border: 2px solid white;
			/* white with opacity */
			border-radius: 10px;
			padding: 30px;
		}

		.b2b-right ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.b2b-right ul li {
			font-size: 16px;
			margin-bottom: 18px;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		.b2b-form {
			width: 100%;
		}

		.b2b-right ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.b2b-right ul li {
			margin-bottom: 15px;
			display: flex;
			flex-direction: column;
		}

		.b2b-right label {
			font-weight: 600;
			margin-bottom: 5px;
			font-size: 14px;
		}

		.b2b-right input,
		.b2b-right select {
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 14px;
		}

		.submit-btn {
			background: #b17b1c;
			color: #fff;
			padding: 12px 20px;
			border: none;
			margin-top: 10px;
			cursor: pointer;
			font-size: 15px;
			border-radius: 4px;
		}

		.submit-btn:hover {
			background: #a3743f;
		}

		.b2b-right input::placeholder,
		.b2b-right select::placeholder,
		.b2b-right textarea::placeholder {
			color: #b58a52;
			/* Apna color yaha dalna */
			opacity: 1;
			/* Firefox ke liye */
		}

		/* ------------------ MAIN LARGE HERO IMAGE ------------------ */
		.hero-3layer {
			position: relative;
			width: 100%;
		}

		.hero-image img {
			width: 100%;
			display: block;
			object-fit: cover;
		}

		/* ------------- CENTER BOTTOM 2 ICONS OVER THE IMAGE ------------- */

		.hero-icons {
			position: absolute;
			bottom: -60px;
			/* image ke neeche overlap karega */
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
		}

		.hero-icons .icon-badge {
			width: 130px;
			margin-bottom: 10px;
		}

		.hero-icons .icon-lion {
			width: 100px;
		}

		/* ------------------ TRUST WHITE SECTION ------------------ */

		.trust-section {
			background: white;
			padding-top: 100px;
			/* because icons overlap from top */
			padding-bottom: 60px;
			text-align: center;
		}

		.trust-container {
			width: 80%;
			margin: auto;
		}

		.trust-container h2 {
			font-size: 24px;
			font-weight: 700;
			margin: 20px 0;
			letter-spacing: 1px;
		}
		

		.trust-container p {
			font-size: 16px;
			line-height: 1.7;
			color: #333;
		}

		.trust-lion {
			width: 80px;
		}

		.logo-icon {
			width: 45px;
		}

		.footer {
			background: #3a1204;
			padding: 60px 40px;
			color: #fff;
			font-family: Arial;
			    padding-bottom: 15px;
		}

		.footer-inner {
			display: flex;
			justify-content: space-between;
			max-width: 1100px;
			margin: auto;
		}

		.footer-col h3 {
			font-size: 18px;
			letter-spacing: 1px;
			margin-bottom: 20px;
			color: #f8b707;
		}

		.footer-col p {
			font-size: 14px;
			margin: 6px 0;
			line-height: 30px;
		}

		.copyright {
			text-align: center;
			padding-top: 30px;
			font-size: 14px;
			letter-spacing: 1px;
			border-top: 1px solid white;
		}
		.footer-col a{
		    text-decoration: none;
		}



		/* ----------- RESPONSIVE FIX ----------- */

		@media(max-width: 900px) {
			.b2b-container {
				flex-direction: column;
			}

			.b2b-right {
				width: 100%;
			}
		}



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

			.collage-wrapper {
				margin: 0;
			}

			.collage-wrapper p {
				margin: 0 1rem;

			}

			.section-title {
				letter-spacing: 0;
			}

			.slide-box img {
				object-fit: contain
			}

			.center_image_section {
				height: 17rem!important;
			}

			.highlight-card {
				width: auto;
				padding: 20px;
				margin: 3rem 1rem;
			}

			.card-grid {
				gap: 0;
				font-size: 13px;
			}

			.card-title {
				font-size: 0.9rem;
			}

			.empower__your__business_section {
				margin: 0;
				padding: 10px 20px;
			}

			.b2b-left h2 {
				text-align: center;
			}

			.hero-icons .icon-badge {
				width: 75px;
			}

			.footer-col h3 {
				font-size: 13px;
			}

			.footer-col p {
				font-size: 11px;
			}

			.footer {
				padding: 20px 25px;
			}
		}



		/* responsive */
		@media (max-width:1000px) {
			.hero {
				height: 520px
			}

		}

		@media (max-width:600px) {
			.hero {
				height: 300px
			}
            
		} 
		.whatsapp-blink {
    color: #f8b707;        /* WhatsApp green */
    font-weight: 700;
    animation: blink 1.1s infinite ease-in-out;
    display: inline-block;
    text-decoration: none;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}