:root{
		  --navy:#050a44;
		  --navy2:#0c2b63;
		  --blue:#1267e8;
		  --blue2:#2d8cff;
		  --sky:#eaf4ff;
		  --ink:#101f3d;
		  --muted:#5c6b85;
		  --line:#dce7f5;
		  --white:#fff;
		  --soft:#f6f9fd;
		  --green:#22a477;
		  --purple:#7659d8;
		  --orange:#ef8a32;
		  --radius:24px;
		  --shadow:0 18px 55px rgba(10,40,90,.10);
		  --max:1220px;
		}
		
		/* =========================================================
		   MAIN BACKGROUND IMAGE / SECTION
		   ========================================================= */
		#bgfirst {
            background-image: url('images/LivingroomPanelb1.png');
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important; 
            background-position: center center !important;
            color: #ffffff;
            padding: 20px 15px;
        }
		
		
		/* ==============================================================
		   BOTTOM-RIGHT CLICKABLE HOTSPOT AREA - Switch Panel on the wall
		   ============================================================== */
		/* Setting clickable area at the bottom right corner - on Switch Panel*/
		.bottom-right-hotspot {
		  position: absolute;
		  bottom: 17%;   /* Leaves an unclickable 5% gap at the very bottom */
		  right: 14%;    /* Leaves an unclickable 5% gap at the very right */
		  width: 11%;  /* Adjust width of the clickable region */
		  height: 12%; /* Adjust height of the clickable region */
		  cursor: pointer;
		  z-index: 10;
		  /* background: rgba(255, 0, 0, 0.3); Uncomment temporarily to see the click area */
		}
		
		
		
		
		/* ================================================================================
		   GALLERY CONTAINER / VIEWING WINDOW - Defines area where the images will roll out
		   ================================================================================= */
			#gallery {
				position: absolute;
				right: 14%;
				bottom: 17%;

				width: 0;
				height: 100px;

				overflow: hidden;
				opacity: 0;
				transition: width .5s, opacity .3s;

				z-index: 20;
			}


		/* ==============================================================
		   OPEN GALLERY - Defines the length and width of the rolling strip
		   ============================================================== */
			#gallery.open {
				width: 80vw;
				max-width: 800px;
				opacity: 1;
			}

		/* =====================================================================
		   ROLLING IMAGE STRIP - scrolls out the images from the switch panel area
		   ===================================================================== */
			#track {
				display: flex;
				gap: 10px;

				width: max-content;
				height: 100%;

				animation: roll 30s linear infinite;
			}

		/* =========================================================
		   THUMBNAIL IMAGE SIZE AND APPEARANCE
		   ========================================================= */
			#track img {
				/*width: 12vw;
				height: 8vw;*/
				max-width: 130px;
				max-height: 90px;
				object-fit: contain;
				border-radius: 3px;			
				display: block;
				background: #fff;
				
				/*flex-shrink: 0;*/
				/*flex: 0 0 130px;*/
				/*object-position: center;*/
			}
	
		/* =========================================================
		   PAUSE IMAGE ROLL WHEN MOUSE HOVERS
		   ========================================================= */
			#gallery:hover #track {
				animation-play-state: paused;
			}

		/* =========================================================
		   HORIZONTAL ROLLING ANIMATION
		   ========================================================= */
			@keyframes roll {
				to {
					transform: translateX(-50%);
				}
			}

	
		
		
		/* CSS for the text content that overrlays on the background image */
        .centered {
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            margin: 0 !important;			
        }

        #text {
            top: 15% !important;
        }

        #text1 {
            top: 32% !important; 
			color: #222  !important;
			background-color: rgba(255, 255, 255, 0.25)  !important;
			border-radius: 8px;
			transition: font-size 0.2s ease, padding 0.2s ease;	
        }

        /* Banner positioned between text1 and the setup appointment button */
        .banner101 {
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: auto !important;
            max-width: 95% !important;
            margin-top: 0 !important;
            z-index: 10;
        }

        .banner-inner-box {
            background: #0066AA; 
            color: yellow; 
            opacity: 0.9; 
            border-radius: 6px; 
            padding: 1px 9px; 
            display: inline-flex;
            align-items: center;
            flex-wrap: nowrap;
            white-space: nowrap !important;
            font-size: clamp(0.7rem, 1.6vw, 1rem) !important;
        }

        /* Square black background close button positioned on the right of text */
        .banner-close {
            background-color: #000000 !important;
            color: #ffffff !important;
            width: 20px;
            height: 20px;
            border-radius: 0px !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            opacity: 1 !important;
            margin-left: 10px;
            margin-right: 0;
            padding: 0;
            border: none;
            outline: none;
            text-shadow: none;
            cursor: pointer;
        }

        .bottomcentered {
            position: absolute !important;
            top: 75% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            margin: 0 !important;
            z-index: 10;
        }

        /* Responsive button scaling that prevents text wrapping */
        #setapt button {
            white-space: nowrap !important;
            font-size: clamp(0.75rem, 1.8vw, 1.1rem) !important;
            padding: clamp(5px, 1.2vw, 10px) clamp(10px, 2vw, 20px) !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #setapt img {
            height: clamp(12px, 1.8vw, 18px);
            width: auto;
        }

        #bgfirst + .container-fluid {
            margin-top: 0 !important;
            padding-top: 10px;
        }
		
		
		/* Banner strip below Terms and Conditions and Privacy Notice */
		.trust-strip{margin-top:-1px;background:var(--navy);color:#fff;}
		.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
		.trust-item{padding:19px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.12);}
		.trust-item:last-child{border:0}.trust-item strong{display:block}.trust-item span{font-size:.78rem;color:#b9c9e7;}
		
		
		/* Container "See it for yourself" which holds Udhant video*/
		.section{padding:0px 0; background-color: #0A192F !important;}
		.section-head{text-align:center;max-width:750px;margin:0 auto 15px;}
		.kicker{font-size:.72rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}

		.morph-card {
		  display: grid;
		  grid-template-columns: 1fr 1.5fr 1fr !important; /* Center video column is slightly wider */
		  /*grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important;*/
		  gap: 24px;
		  align-items: center;
		  padding: 30px;
		  border-radius: 24px; /* Rounded corners */
		  
		  /* Glassmorphism / Morph effect */
		  background: rgba(255, 255, 255, 0.05);
		  backdrop-filter: blur(12px);
		  -webkit-backdrop-filter: blur(12px);
		  border: 1px solid rgba(255, 255, 255, 0.1);
		  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
		  
		  max-width: 1000px;
		  margin: 40px auto;
		  color: #fff;
		  box-sizing: border-box;
		  
		}

		.morph-col {
		  display: flex;
		  flex-direction: column;
		}

		.morph-col h3 {
		  margin-bottom: 8px;
		  font-size: 1.2rem;
		}

		.morph-col p {
		  font-size: 0.9rem;
		  color: #b9c9e7;
		  line-height: 1.4;
		}

		.morph-col ul {
		  list-style: none;
		  padding-left: 0;
		  margin-top: 8px;
		}

		/* Style each list item with a checkmark */
		.morph-col ul li {
		  position: relative;
		  padding-left: 24px; /* Space for the checkmark */
		  margin-bottom: 6px;
		  font-size: 0.9rem;
		}

		/* Add the checkmark using a pseudo-element */
		.morph-col ul li::before {
		  content: "✓"; /* Checkmark symbol */
		  position: absolute;
		  left: 0;
		  top: 0;
		  color: var(--blue); /* Matches your title color */
		  font-weight: bold;
		}

		/* Video Styling */
		.video-col video {
		  width: 100%;
		  height: auto;
		  border-radius: 12px; /* Rounded corners for the video itself */
		  object-fit: cover;
		  display: block;
		}
		
		
		/* Cards, Card and icon css classes used by "End-to-End Solutions" and "The vIGNAN IoT ecosystem"  */
		
		.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} /*Used in End to End section */		
		.card{border:1px solid var(--line);border-radius:20px;padding:25px;background:#fff;transition:.2s;box-shadow:0 8px 30px rgba(10,40,90,.04);display: flex; flex-direction: column;}	/*Setting card as display:flex and flex-direction:column helps ets the text "Learn more" in every card to all align in one line and it works in conjuction of CSS ".link" */
		.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
		.icon{width:48px;height:48px;border-radius:15px;background:#edf5ff;color:var(--blue);display:grid;place-items:center;font-size:1.35rem;margin-bottom:18px;}
		.card:nth-child(2) 
		.icon{background:#eaf9f4;color:var(--green) !important;}
		.card:nth-child(3) 
		.icon{background:#f1edff;color:var(--purple) !important;}
		.card:nth-child(4) 
		.icon{background:#fff3e8;color:var(--orange) !importnat;}
		.card h3{margin:0 0 7px;}
		.card p{font-size:.88rem;color:var(--muted);margin:0 0 18px;}
		.link{color:var(--blue);font-weight:800;font-size:.82rem; margin-top: auto;}  /*margin-top:auto sets the text "Learn more" in every card to all align in one line*/
		
		
		/* css classes used by "The vIGNAN IoT ecosystem" */
		/*.ecosystem{background:var(--soft);}*/
		.ecosystem{background:#eaf4ff;}
		.eco{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;align-items:stretch;}
		.eco .card{position:relative;}
		.eco .card:not(:last-child):after{content:"↔";position:absolute;right:-24px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:1.8rem;z-index:2;}
		.features{display:grid;grid-template-columns:repeat(5,1fr);margin-top:15px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;}
		.feature{text-align:center;padding:16px 8px;border-right:1px solid var(--line);font-size:.78rem;font-weight:750;}
		.feature:last-child{border:0;}
		.feature b{display:block;color:var(--blue);font-size:1.1rem;margin-bottom:4px;}
		
		
		/* CSS classes for "footer" */
		footer {background: #071321; color: #fff; padding: 45px 0 25px;}

		.footer-grid {display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 35px;}

		/* First frame / brand section spans the entire top row */
		.footer-grid > div:first-child {grid-column: 1 / -1;}

		/* The three sections below */
		.footer-grid > div:not(:first-child) {grid-column: auto;}

		footer .brand {color: #fff;}

		footer .brand small {color: #b9c9e7;}

		footer h4 {margin: 0 0 13px;}

		/*footer a, p ==> The comma between a and p means "OR" function.  So the variable setting after footer p {...} applies to both a and p */
		footer a,
		footer p {
			color: #aab9d1;
			font-size: .84rem;
			display: block;
			margin: 7px 0;
		}

		.copy {
			border-top: 1px solid rgba(255,255,255,.1);
			margin-top: 30px;
			padding-top: 18px;
			color: #71819b;
			font-size: .75rem;
		}

		/* CSS to address the formatting of footer content when viewed on Mobile */
		@media (max-width: 600px) {
			footer {
				padding: 35px 0 20px;
			}

			.footer-grid {
				grid-template-columns: repeat(3, minmax(0, 1fr));
				gap: 15px;
			}

			.footer-grid > div:first-child {
				grid-column: 1 / -1;
			}

			footer h4 {
				font-size: .85rem;
				margin-bottom: 10px;
			}

			footer a,
			footer p {
				font-size: .72rem;
			}

			footer .brand {
				font-size: 1rem;
			}

			.copy {
				font-size: .68rem;
			}
		}
		/* End of CSS for Footer */
		
		
		
		@media (max-width: 1000px) {
		  .morph-card {
			grid-template-columns: 1fr !important; /* Switches from 3 columns to 1 stacked column */
		  }
		  .cards {
			grid-template-columns: repeat(2, 1fr);
		  }
		  .eco {
				grid-template-columns: 1fr;
				gap: 35px;
		   }

		  .eco .card:not(:last-child):after {
				content: "↕";
				right: 50%;
				top: auto;
				bottom: -35px;
				transform: translateX(50%);
				font-size: 1.8rem;
		  }
		}

		/* CSS media query that moves the cards in "End-to-End Solutions" and "vIGNAN IoT Eco System" sections from a grid with single row - 3 fractions/columns
           to 1 stacked fraction/column */
		@media (max-width: 560px) {
		  .cards {
			grid-template-columns: 1fr !important;
		  }
		}
		

		
		/* CSS that drops open bullet items listed on right of Udhant's video - opens/closes on touch or click */
		/* built-in HTML elements/tags "Details" and "Summary"  are designed specifically for this kind of expand/collapse interactions setup for each of this bulet items.*/
		.drop-feature {
			
		  }
		.drop-feature summary {
			cursor: pointer;
			color: var(--muted);
			/*padding: 4px 0;		*/
			list-style: none;		/* To remove default arrow/triangle that some browsers add to "summary" tag */			
		  }	
		
		/* To remove default arrow/triangle that Safari and Chrome browsers add in front of every bullet items for every HTML element/tage "Summary" */
		.drop-feature summary::-webkit-details-marker {		/*  */
		  display: none;
		}
		.drop-feature p {
			/*margin: 3px 0 0 3px;*/
			color: var(--ink);
			font-size: 13px !important;
			line-height: 1.4;
		  }
		
		
		/* CSS to increase the height of the background image when mobile or tablet is rotated in landscape mode */
		@media (orientation: landscape) {
		  #bgfirst {
			/* Gives a flexible height that scales nicely between mobile and tablet landscape */
			height: 70vh; 
			
			/* Fallback/safety constraint so it never gets too squished or too massive */
			min-height: 300px;
			max-height: 900px;
		  }
		}
		
		
		
		
	/* Overlay */
		#overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.45);
			opacity: 0;
			visibility: hidden;
			transition: 0.3s ease;
			z-index: 900;
		}

		/* Slide-in Panel */
		#slidePanel {
			position: fixed;
			top: 0;
			right: -420px;
			width: 400px;
			height: 100%;
			background: #ffffff;
			box-shadow: -4px 0 12px rgba(0,0,0,0.15);
			transition: right 0.35s ease;
			z-index: 1000;
			display: flex;
			flex-direction: column;
		}

		.panel-header {
			padding: 20px;
			background: #f5f5f5;
			border-bottom: 1px solid #ddd;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.close-btn {
			font-size: 28px;
			cursor: pointer;
		}

		.panel-content {
			padding: 20px;
			overflow-y: auto;
			opacity: 0;
			transform: translateY(10px);
			transition: opacity .3s ease, transform .3s ease;
		}

		/* Active states */
		#overlay.active {
			opacity: 1;
			visibility: visible;
		}

		#slidePanel.active {
			right: 0;
		}
			
		#slidePanel.active .panel-content {
			opacity: 1;
			transform: translateY(0);
		}

		
 /*============================
   Mobile Phones (less then/equal to 480px)
   ============================ */
@media (max-width: 480px) {

    /* Panel becomes full width */
    #slidePanel {
        width: 100%;
        right: -100%; /* fully hidden off-screen */
    }

    #slidePanel.active {
        right: 0; /* slide fully into view */
    }

    /* More breathing room for text */
    .panel-content {
        padding: 24px;
        font-size: 0.95rem;
        line-height: 1.45;
        word-break: break-word;
    }

    /* Header spacing */
    .panel-header {
        padding: 18px;
    }

    /* Touch-friendly close zone */
    #overlay.active {
        padding-left: 20px; /* invisible tap zone */
    }
}

/* ============================
   Tablets (less than equal to 768px)
   ============================ */
@media (max-width: 768px) {

    #slidePanel {
        width: 85%; /* not full width, but comfortable */
        right: -85%;
    }

    #slidePanel.active {
        right: 0;
    }

    .panel-content {
        padding: 28px;
    }
}