body{
	background-size: auto;
	font-size:14px; 
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #515151;
	overflow-x: hidden;
	overflow-y: scroll;	 
} 
div{
    overflow: visible;
}
p{
font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}
.line{
	width: 20%;
	margin-left: 40%;
	margin-top: 20px;
	margin-bottom:  20px;
	height: 1px; 
	border-bottom: 1px solid lightgray;
} 
.y1990s{ 
	bottom: 0px;
	width: 100%; 
	font-size: 12px;
} 
.picturectn {
    width: 100%;
    overflow-y: hidden;
}
.mySlides {  
	height: 70vh;
	width: 100%;
	position: relative;
} 
 #img1{  
	height: 70vh;
	width: 100%;
}
.bg img{
	width: 100%;
	height: 70vh;
	object-fit: cover;
	filter: opacity(80%) grayscale(60%) brightness(80%);
}
   .nav1 {  
        position: fixed;   
        width: 100%;  
        height: 85px;  
        background: inherit;
   	 z-index: 1000;   
    }    
    body.scrolled .nav1 {  
        background: white;   
    }  
    body.scrolled .nav1 a{ 
   	color: #494545;
    } 
   .bg {
	   background-size: 100% 100%;
	   background-repeat: no-repeat;  
			height:100%;
            width: 100%;
            text-align: center;
            position: relative;
   		 font-size: 26px; 
   		 color: white; 
		 z-index: -1;
          }
		  .bg .text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60%;
			text-align: center;
			z-index: 1;
		}
		.bg .text h1 {
			color: #fff;
			font-size: 48px;
			margin-bottom: 20px;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		}
		.bg .text h2 {
			color: #fff;
			font-size: 24px;
			font-weight: normal;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		}

.y1990s .menu{
 	width: 100%;
 	margin: 0; 
 	color: black;
 	text-align: left; 
 	font-size: 20px;
 	font-weight: 400;
 }
 .y1990s .menu .home{
 	 width: auto;
 	float: left ;
 	margin-right: 30px;
 }
 .y1990s .menu .home a{
 	 text-decoration: none;
	color: #494545;
}
.y1990s .menu .home a:hover{
 	 color: #eec900;
    transition: all 0.3s ease;
 }
 .y1990s .menu .Intro{
 	 width: auto;
 	 color: #eec900;
	float: left ;
}

.app-section-wrap {
    width: 70%;
    margin: 0 15%;
}

.app-hero-section {
    /* background: #f8f9fa; */
    background: #2c3e50;
    color: #eeca00d2;
    padding: 60px 40px;
    text-align: center;
    /* color: #333; */
    margin-bottom: 40px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.app-hero-section h2 {
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 600;
}

.app-hero-section p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    color: rgba(255,255,255,0.9);
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    color: white;
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.apk-btn {
    /* background: #6c757d; */
    background: #eeca00d3;
}

.github-btn {
    background: #495057;
}

.app-content-section {
    margin-bottom: 40px;
}

.app-content-section h3 {
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #2c3e50;
}

.app-content-section p {
    color: #505965;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.app-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.app-feature-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.08); */
    /* transition: transform 0.2s, box-shadow 0.2s; */
    /* border-left: 4px solid #4facfe; */
}

.app-feature-card:hover {
    /* transform: translateY(-3px); */
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.12); */
}

.app-feature-card h4 {
    color: #2c3e50;
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-feature-card h4::before {
    content: "✓";
    /* color: #4facfe; */
    font-weight: bold;
    font-size: 18px;
}

.app-feature-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.app-screenshots-section {
    margin-bottom: 40px;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
}

.app-screenshots-section h3 {
    text-align: center;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
}

.app-screenshots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.app-screenshot-item {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
}

.app-screenshot-item img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.app-screenshot-item p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.app-specs-section {
    margin-bottom: 40px;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
}

.app-specs-section h3 {
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
}

.app-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.app-specs-table td {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
}

.app-specs-table td:first-child {
    font-weight: 600;
    color: #333;
    width: 35%;
}

.app-specs-table td:last-child {
    color: #666;
}

.app-faq-section {
    margin-bottom: 40px;
}

.app-faq-section h3 {
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}

.app-faq-item {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.app-faq-question {
    background: #f8f9fa;
    padding: 18px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    font-size: 15px;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-faq-question:hover {
    background: #f0f0f0;
}

.app-faq-question::after {
    content: "+";
    font-size: 20px;
    transition: transform 0.3s;
}

.app-faq-item.active .app-faq-question::after {
    transform: rotate(45deg);
}

.app-faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}

.app-faq-item.active .app-faq-answer {
    padding: 20px;
    max-height: 200px;
}

.app-faq-answer p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.app-cta-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 60px 40px;
    text-align: center;
    color: white;
    border-radius: 10px;
}

.app-live-demo {
    width: 40%;
    margin-left: 30%;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}
.app-live-demo-header {
    background: #f8f9fa;
    padding: 16px 30px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}
.app-live-demo-header h3 {
    color: #2c3e50;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.app-live-demo-header p {
    color: #888;
    font-size: 13px;
    margin: 0;
}
.app-live-demo-frame {
    width: 100%;
    height: 620px;
    background: #f5f5f5;
}
.app-live-demo-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* @media screen and (max-width: 768px) - app live demo frame moved to media.css */

/* .app-energy {
    width: 40%;
    margin-left: 30%;
    margin-top: 20px;
    clear: both;
} */

.app-cta-section h2 {
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 600;
}

.app-cta-section p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    color: rgba(255,255,255,0.9);
}



/* Video Player Styles */
.video-container {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto 20px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.video-thumbnail {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
}

.video-thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-icon-large {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background: rgba(255,0,0,0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	transition: transform 0.2s, background 0.2s;
}

.play-icon-large:hover {
	transform: translate(-50%, -50%) scale(1.1);
	background: #ff0000;
}

.video-player-wrapper {
	display: none;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.video-player-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.close-video-btn {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	background: rgba(0,0,0,0.7);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	z-index: 10;
}

.video-youtube-link {
	text-align: center;
	margin-top: -10px;
	margin-bottom: 20px;
}

.video-youtube-link a {
	color: #666;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px dashed #ccc;
	transition: color 0.2s;
}

.video-youtube-link a:hover {
	color: #ff0000;
	border-color: #ff0000;
}



/* @media screen and (max-width: 768px) - app section wrap moved to media.css */
/* @media screen and (max-width: 480px) - app small screens moved to media.css */