@charset "utf-8";
/* General styles (unchanged) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  overflow-x: hidden !important;
    overflow-y: hidden;
}

body, html {
    height: 100%;
font-family: "Ubuntu", system-ui;
}


p {
    margin: 0;

}


h1 {
    font-size: 57px;
    font-family: "Ubuntu", system-ui;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
	line-height: 50px;
}

h6 {
    font-size: 35px;
    color: #fff;
    text-transform: uppercase;
    margin-top: 50px;line-height: 50px;
}

p {
    line-height: 1.6;
    color: #fff;
    margin-bottom: 15px;	font-size: 16px !important
}




.container {
    display: flex;
    flex-direction: column; /* Change layout for smaller screens */
    height: 100vh;
    background-image: url('landing-page-UpdatedV3.png');
    background-size: cover;
    background-position: center;
}

.left-section {
    width: 70%;
    padding: 40px;
}

.logo img {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}


.frame {
    border: 0px solid black;
    height: 450px;
    padding-right: 20px;
    line-height: 1em;
    overflow: auto;
	scrollbar-width: 14px !important;
	padding-bottom: 100px;

	
	
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 14px !important;
}

::-webkit-scrollbar-thumb:vertical {
    border-radius: 50px;
    background-color: rgba(179,26,115,1) !important;
    box-shadow: 0 0 1px rgba(255,255,255,.2) !important;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.2);
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}



	.help-support {
		position: absolute;
		top: 58px;
		right: 20px;
		cursor: pointer;
		font-size: 18px;
		color: #fff;
		height: 50px;
		padding: 10px 20px;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}

	.help-support .img {
		margin-top: 0px;
	}

	.tt {
		bottom: -1px;
		position: relative;
	}

	/* Sliding content matching the height of the .help-support */
	.slide-content {
		position: fixed; /* Changed to fixed to stay at a consistent place relative to the viewport */
		top: 58px;
		right: -100%; /* Hidden initially (off-screen) */
		width: 600px; /* Adjust width */
		height: auto;
		background-color: #fff;
		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
		padding: 10px 20px;
		transition: right 0.4s ease; /* Sliding transition */
		border-radius: 5px;
		align-items: center;
		display: flex;
	}

	/* Active state (slide in) */
	.slide-content.active {
		right: 20px; /* Visible position when active */
	}

	.slide-content p {
		margin: 0;
		font-size: 16px;
		color: #000;
	}

	.a {
		width: 15px !important;
		height: 15px !important;
	}
#horz-list{display: none}


	/* Media queries for responsive behavior */
	@media (max-width: 768px) {
		/* Make the sliding content occupy more space on smaller screens */
		.slide-content {
			width: 80%; /* Adjusted width for smaller screens */
			right: -100%; /* Hidden initially */
		}

		/* Active state for smaller screens */
		.slide-content.active {
			right: 10px; /* Slide into view when active */
		}
	
		
		
@media (max-width: 480px) {

	

	
	
	.container {
		flex-direction: column;
        justify-content: flex-start;
    	height: 100% !important;
    	background-image: url('landing-page-UpdatedV3.png');
    	background-size: cover;
   		background-position: center;
		}

	.left-section {
    	width: 100% !important;
    	padding: 10px;
	}	

	
	h6 {
		font-size: 15px;
		text-align: left;
	}
	
    h1 {
        font-size: 24px;
        text-align: left;
    }
	
	
.frame {
    border: 0px solid black;
    height:550px !important;
    padding-right: 20px;
    line-height: 1em;
    overflow: auto;
}

	.mobilescreen{ width: 100%; background-color: #fff; 
    display: flex; font-size: 13px; text-align: center}	
	
	#horz-list{display: flex;
		background-color: #fff; 
		padding: 0px 0px 10px 0px;	
	 position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */	
	}
	
	
	
	.help-support {
		top: 30px;
	}
	
/* Sliding content matching the height of the .help-support */
	.slide-content {
		top: 32px;
	}	
	
#horz-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
	
	
}

#horz-list ul li {
  display: inline;
}

#horz-list ul li a {
  text-decoration: none;
  padding: 0.2em 1.1em;
  border-right: 1px solid rgba(255, 255, 255, 0.8);
  margin: 0 0 0 -6px;color: #000; text-decoration: none;
}

#horz-list ul li:last-child a {
  border: none;
	color: #000
}

#horz-list ul li a:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #1a1a1a;
}

	
			/* Further adjustments for very small screens */
		.slide-content {
			width: 100%;
			right: -100%;
		}

		.slide-content.active {
			right: 0;
		}

		.help-support {
			font-size: 14px;
			padding: 5px 10px;
		}
	
	

	
	
/*	.mobilescreen p { text-align: center}
	
 Sliding content matching the height of the .help-support 
.slide-content {display: none}
.help-support {display: none}*/

	
	
	
	
	
  
}