@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap'); 
  

	/* scroll bar */
	::-webkit-scrollbar { width: 0px; height: 0px; }
 
  
	/* RESET + BASE */
	*{    
		margin: 0;        
		padding: 0;
		box-sizing: border-box;
		letter-spacing: normal !important;
		touch-action: manipulation !important;   

		-webkit-touch-callout: none !important;              /* prevent callout to copy image, etc when tap to hold */
		-webkit-text-size-adjust: none !important;             /* prevent webkit from resizing text to fit */
		-webkit-user-select: auto !important;                  /* prevent copy paste, to allow, change 'none' to 'text' */


		/* no select */
		-moz-user-select: none !important;
		-khtml-user-select: none !important;  
		-webkit-user-select: auto  !important;  
		-ms-user-select: none !important;  
		user-select: none !important;
	}
    
      
	html, body {  
		margin: 0;
		padding: 0;  
		height: 100%; 
		/* font-family: 'Montserrat', sans-serif; */
		 font-family: 'Montserrat', sans-serif !important;
		background-color: #f9fafb;    
  
		/* prevent pull refresh on mobile */   
		overflow: scroll;       
		overscroll-behavior: none;   
		
		  -webkit-user-select: none;  /* Safari */
         -moz-user-select: none;     /* Firefox */
        -ms-user-select: none;      /* IE10+/Edge */
        user-select: none;          /* Standard */
		
		
		overflow: hidden; /* Prevent whole-page scroll */  
	}  

/* Optional: prevent dragging of images or links */
img, a {
    -webkit-user-drag: none;
    user-drag: none;
}   
       
         
	/* APP CONTAINER */
	.app{
		width: 100%;
		max-width: 405px;  height: 900px; margin: 0;  /* height:740px;*/
		padding: 0; 
		align-items:center; 
		position: absolute; 
		top: 50%; 
		left: 50%; 
		transform:translate(-50%,-50%);  
		display: flex;
		flex-direction: column; 
		
		overflow: hidden;  
	}   
   
	@media screen and (max-height: 900px){  
    
		.app {
			height: 100% !important;
		} 
	}
        
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;  
		}
	}

	body {
		animation: fadeIn 1s ease-in;
	}

     
/* Prevent text selection */
.no-select_ {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
	-webkit-tap-highlight-color: transparent;  

	padding: 7px;  
}  
      
		
       
	/* HEADER */
	.app-header {     
		background: inherit;
		border-bottom: 1px solid #e5e7eb;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		padding: 0; width: 100%;
	}
  
	.header-comments {
 
		cursor: pointer;
		padding: 10px;   font-size: 1.2em;      
    }

 
	.header-icon {
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		text-decoration: none; top: 10px;
	}  

	.header-title {
		flex-grow: 1;
		text-align: center;
		font-weight: bold;
		color: #121212;
		font-weight: 900;
		letter-spacing: 5px;
		font-size: 0.93em;
	}  
 
    
 
 
	/* Fixed bottom */
	.fixed-bottom {
	  	position: fixed;
		bottom: 0;
		left: 50%;
		width: 100%;
		max-width: 405px;
		transform: translateX(-50%);
		background: #f9fafb;
		padding: 10px 0;
		text-align: center;
		border-top: 1px solid #e5e7eb;
		display: flex;
		justify-content: space-around;
		gap: 10px;
		/*box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);  */  
		
		height: 7%;
	}
     
   
   .fixed-bottom-home {
	  	position: fixed;
		bottom: 10px;
		width: 100%;
		max-width: 405px;
		background: #f9fafb;
		padding: 15px 0 10px 0;
		/*border-top: 1px solid #e5e7eb;*/  
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);  
	}
   
	/* Container for each icon and text */
	.icon-container {
 		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	/* Style for the icons */
	.fixed-bottom .icon {
		color: #222;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;   
	}
  
	/* Hover effect for icons */  
	.fixed-bottom .icon:hover {
		color: #0056b3; /* Example hover color */
	}
	  
   
	/* Style for text under icons */
	.fixed-bottom .icon p {
		margin: 0; /* Add margin to separate text from icon */
		color: #222; /* Lighter color for the text */
		text-transform: capitalize; /* Capitalizes the first letter of the text */ 
		zoom: 0.87;   
		text-align: center;
	}  
 
	/*fixed footer icon */	
	.icon.active i, .icon.active p {
		color: #0056b3; /* Highlight color */
		font-weight: bold;
	}
  

	/* SCROLLABLE MAIN CONTENT */
	.app-main {
		flex: 1;
		overflow-y: auto;
		padding: 12px;   
		width: 100%;
	}
       
	
	
	/* Control the fonts */
	@media only screen and (max-width: 600px) {
		.both-font {    
			color: #121212;
			font-size: 0.875em !important;  
			line-height: 1.6 !important;   font-weight: 500;  
		}

		input::placeholder{  
			color: #121212;
			font-size:0.93em !important;  
			line-height: 1.6 !important;    color: #555;
			/*font-family: 'Montserrat', sans-serif !important; */ 
			 font-family: 'Montserrat', sans-serif !important;
			
		}
	}                  
        
	@media only screen and (min-width: 601px) {
		.both-font { 
			font-size: 0.8em !important; 
			line-height: 1.6 !important; 
			color: #121212;  font-weight: 500;   
		}
		
		input::placeholder{  
			color: #121212;
			font-size:0.93em !important;  
			line-height: 1.6 !important;   color: #555;
			/*font-family: 'Montserrat', sans-serif !important; */ 
			 font-family: 'Montserrat', sans-serif !important;
		}
	}    

	.d-header-font-weight {
		font-weight: 900;
		text-transform: uppercase; 
		width: 100%;
	}
 
         
	@font-face {
		font-family: 'Sacramento';
		src: url('Sacramento-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;    
	}           
	 .watermark-text  {     
		margin: 0; 
		line-height: 1;
		opacity: 1; 
		letter-spacing: 0.5px;     
		font-size: 1.3em !important;  
		font-family: 'Sacramento', cursive !important; 
		
		color: #121212; zoom: 0.87;  
		font-weight: 600 !important;     
		letter-spacing: 2px !important;    
	}     
	     
	
	/* INDEX PAGE */
 
	 
	
	
	
	
	
	
	
	
	
	
	
	

	/* HOME PAGE*/
	/* Content */
	.tagline {
		margin: 10px 0 !important;
		font-weight: 600;
		line-height: 1.2;
	}

	.description {
		margin: 10px auto;
		width: 100%;
	}

	.cta-buttons {
		margin: 2rem 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		width: 90%;		
	}
	
	.d-header-font-weight {
		color: #0056b3 !important; 
		zoom: 1;
		text-transform: capitalize !important;    
				
	}            
	              
	.cta-buttons a { 
		text-decoration: none;
		padding: 0.65rem 2rem;
		background-color: #0056b3;
		color: white;
		border-radius: 5px;
		font-weight: bold; 
		width: 100%;
		text-align: center;
		transition: background-color 0.3s ease;
	}

	.cta-buttons a:hover {
		background-color: #0056b3;
	}

	.learn-more {
		margin-top: 1rem;
		font-size: 0.9rem;
		color: #0056b3 !important;
		cursor: pointer;
	}  

	/* Modal */
	#modal {
		display: none;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		overflow-y: scroll;
		background-color: rgba(0, 0, 0, 0.5);
	}

	#modal-content {
		background-color: #fff;
		margin: 10% auto;
		padding: 2rem;
		width: 90%;
		max-width: 500px;  
		border-radius: 8px;
		text-align: left;
	}

	.close-modal {
		float: right;
		font-size: 1.2rem;
		cursor: pointer;
	}

	/* Centering content in .landing-data */
	.landing-data {
		display: flex;
		flex-direction: column;
		align-items: center; /* Centers horizontally */
		justify-content: center; /* Centers vertically */
		height: 90%;
		text-align: center; /* Centers the text inside the div */
	}

	.landing-data .cta-buttons {
		margin-top: 10px;
	}  

	.landing-data .learn-more {
		margin-top: 5px;
		cursor: pointer;
	}
   
	/* ==========================   END OF HOME PAGE ===================================*/
 
	 
	
	 
	
	/*LOGIN PAGE */
	.terms-and-conditions {
		position: absolute; 
		right: 10px; 
		bottom: 10px; 
		font-size: 14px; 
		text-decoration: none; 
		color: #333;
	}
	.login-container {
        width: 100%;
        background: inherit;
        padding: 0 20px;
        border-radius: 12px;
        /*box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);*/
        text-align: center;
		margin: auto; display: flex; justify-content:  center; 
		align-items: center;
		flex-direction: column; height: 100%;
	}

    .login-title {
        font-size: 1.5em;
        font-weight: 800;
        color: #121212;
        text-transform: uppercase;
        margin-bottom: 25px;
    }

    .d-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
  
    .d-form input {
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        width: 100%;
    }  

    .login-button {
        background-color: #0056b3;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 6px;
        font-weight: bold; letter-spacing: 2px;  
        cursor: pointer;
        transition: background 0.3s ease;
		width: 100%;
    }

    .login-button:hover {
        background-color: #66A3FF;
    }

    .login-links {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px; width: 100%;
    }

    .login-link {  
        color: #0056b3;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .login-link:hover {
        color: #0056b3;
    }
 
	/* Chrome, Safari, Edge, Opera */
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button, input[type=text]::-webkit-inner-spin-button,
	input[type=text]::-webkit-outer-spin-button  {
		-webkit-appearance: none;
		margin: 0;

		/*font-family: 'Montserrat', sans-serif !important; */ 
		 font-family: 'Montserrat', sans-serif !important;
	}
  
	/* Firefox */
	input[type=number], input[type=text] {
		-moz-appearance: textfield;
		/*font-family: 'Montserrat', sans-serif !important; */ 
		 font-family: 'Montserrat', sans-serif !important;
	}
	
	      
	#user-entered-phone-number {
		font-weight: 600; 
		zoom: 0.93; 
		margin: 5px 0 3px 0;
		text-align: right;  
		letter-spacing: 1.5;
		display: none; 
		color: red;
	}
	  	
	#phone_no::placeholder, #password::placeholder{
		padding-left: 10px;
	}	
	 
	.iti { 
		width: 100% !important;
	} 
	.iti-mobile .iti__country-list  { 
		height: auto !important;
		margin: auto; width: 90% !important; 
		/*background: #1a191f !important;*/
		background: #eee !important;
	} 

	.iti__country-list  { 
		/*background: #1a191f !important;*/
		background: #eee !important;
		color: #111  !important;   
		width: auto !important; 
	   }
	 
	/* Target the li elements within the country list */
	.iti__country-list li {
	  height: 70px; /* Set your custom height */
	  line-height: 70px; /* Ensure text is vertically centered */
	  padding: 0; /* Adjust padding if necessary */
	  color: #111  !important;
	}  

	.iti__country-list li .iti__country-name {
		color: #111  !important; /* Dark color for country name */
	   opacity: 1 !important;
	}

	.iti__country-list li .iti__country-code {
		color: #111  !important; /* Lighter color for country code */
		font-weight: 900 !important;  opacity: 1 !important;
	}
	  


	/* Optional: Adjust other styling properties */
	.iti__country-list li:hover {
		color: #111  !important;  
	}  

	.iti__flag-container {
	  
	} 

	.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
	 
		margin-left: 0px !important;
	}  

	 .iti__flag {
	 /* display: none !important;*/
		zoom: 2.5 !important;  
	}

	.iti__country-name {
	  padding-left: 33px; /* Optional: add padding to the country name */
	}


	/* Target the country code within the dropdown list */
	.iti__country .iti__country-name {
	  color: #000;  /* Default text color */
	 font-weight: 500;
	}

	.iti__country .iti__dial-code {
	  color: #111 !important;  /* Change country code color to red */
	  font-weight: 900;
	}
	
	.scriptInfo-center {
		display: none;
		color: red;
	}

	.link-to-lostLogin {
		
	}
	 
		
    
	
	/* LOST-LOGIN PAGE */
	.input-icon-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}

	.email-icon {
		position: absolute;
		left: 10px;
		color: #aaa;
		pointer-events: none;
	}

	.input-icon-wrapper input[type="email"] {
		padding-left: 35px; /* make space for the icon */
	}
 
 
 
  




	/* audio LIST ITEMS  -  TIPS PAGE */
	#audio-player {
		margin-top: 40px;
		width: 100%;
		border-radius: 4px;
	}
	   
	a:-webkit-any-link {
	  color: -webkit-link;
	  cursor: pointer;
	  text-decoration: none; /* Removes the underline */
	  color: #121212;  
	}
	 
	.audio-list {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	  gap: 12px;
	}
	  
	/* Audio Item */
	.audio-item {
	  background: #fff;
	  border-radius: 12px;
	  overflow: hidden;
	  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);  
	  cursor: pointer;
	  transition: transform 0.3s ease, box-shadow 0.3s ease;
	  border-top: 1px solid #0056b3; /* 2px solid black border */
	  padding: 20px;
	}
		
	.audio-item:hover {
	  transform: translateY(-8px);
	  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
	}

	/* Thumbnail */
	.audio-thumb {
	  width: 100%;
	  height: 180px;
	  object-fit: cover;
	}

	/* Audio Details */
	.audio-details {
	  padding: 8px;
	}

	.audio-title {
	  font-weight: 600;
	  color: #111;
	  margin-bottom: 8px;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis; font-weight: 600;
	}

	.audio-description {
	  white-space: normal;
	  overflow: hidden; 
	  text-overflow: ellipsis;
	}

	/* Audio Footer */
	.audio-footer {
	  padding: 10px;
	  background: #eee;  
	  border-top: 1px solid #e5e7eb;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	  
	.audio-date {
		width: 50%;
	}

	.audio-listen-now {
	  background-color: #0056b3;
	  color: #fff !important;
	  padding: 8px 16px;
	  border-radius: 30px;
	  text-decoration: none;
	  transition: background-color 0.3s;
	}

	.audio-listen-now:hover {
	  background-color: #0056b3 ;
	}
	 

	/* Responsive Styles */
	@media (max-width: 768px) {
	  .audio-item {
		flex-direction: column;
	  }

	  .audio-thumb {
		height: 140px;
	  }
	}

	@media (max-width: 480px) {
	  .app-header {
		padding: 0 3px;
	  }

	  .audio-item {
		flex-direction: column;
	  }
	 
	  .audio-footer {
		flex-direction: row;
		align-items: center;
	  }

	  .audio-listen-now {
		padding: 8px 20px;
		color: #fff !important;
		background: #0056b3;
	  }
	}

	 /*Load more link */
	.load-more-container {
	  text-align: center;
	  margin-top: 20px;
	  display: none;
	}
	  
	.load-more-btn {
	  padding: 10px 30px;
	  background-color: #3498db;
	  color: white;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer; font-family: inherit;
	}

	.load-more-btn:hover {
	  background-color: #2980b9;
	}

	.tips-loading {
		margin-top: 70px; 
		text-align: center;
	}   

	 
	
 
	 
	/* PLAYER PAGE FOR TIPS*/
	.comment-modal {
	  position: fixed;
	  top: 0; left: 0;
	  width: 100%; height: 100%;
	  background: rgba(0, 0, 0, 0.7);
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity 1s ease;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 9999;
	}

	.comment-modal.active {
	  opacity: 1;
	  visibility: visible;
	}

	.modal-content {
	  background: white;
	  padding: 20px;
	  border-radius: 8px;
	}

	.comment-modal-content {
	  width: 100%;
	  max-width: 405px;
	  height: 900px;
	  background: #fff;
	  border-radius: 8px;
	  overflow: hidden;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  display: flex;
	  flex-direction: column;
	  padding: 0;
	}

	@media screen and (max-height: 900px) {
	  .comment-modal-content {
		height: 100% !important;
	  }
	}
	   
	.comment-header {
	  padding: 15px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 1px solid #ddd;
	}

	.comment-header h4 {
	  margin: 0;
	}

	.close-btn {
	  font-size: 24px;
	  cursor: pointer;
	  zoom: 2;
	}

	.comment-list {
	  flex: 1;
	  overflow-y: auto;
	  padding: 15px;
	  background: #f9f9f9;
	}

	.comment-item {  
	  padding: 20px;
	  margin-bottom: 10px;
	  background: #fff;
	  border-radius: 5px;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.05);   
	  border: 1px solid #eee; 
	  border-radius: 20px;
	}
	 
	 .comment-input-area {
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  border-top: 1px solid #ccc;
	  background: #fff;
	}

	.comment-input-area textarea {
	  flex: 1;
	  resize: none;
	  border: 1px solid #ccc;
	  padding: 10px;
	  border-radius: 5px;
	  max-height: 120px;
	  overflow-y: auto;
	  transition: all 0.2s ease;
	}

	.comment-input-area button {
	  background: #2563eb;
	  border: none;
	  color: white;
	  margin-left: 10px;
	  padding: 10px 12px;
	  border-radius: 50%;
	  font-size: 16px;
	  cursor: pointer;
	  transition: background 0.2s ease;
	}

	.comment-input-area button:hover {
	  background: #1e4fc3;
	}
 
	/* Highlight Element on Click */
	.mClick:active {  
	  background: #ddd;
	  outline: none;
	  user-select: none;
	}    

	/* Remove the blue outline on click (focus) */
	:focus {
	  outline: none;
	} 

	   
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	    




 
   
   
   
   
   /*  NEWS Item* /
.news-item {
      background: #fff;
      border-radius: 8px;
     
    }
  
    .news-item:hover {
       
    }
 
 
 

 
.modal-content {
  background-color: white;
  border-radius: 10px;
  width: 96%;
  max-width: 395px;  
  padding: 20px 10px;
  position: relative;
  margin: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

 
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;  
  font-size: 30px;
  color: #333;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 1010;  
}

 
.modal-header {
  padding: 15px 15px 0px 15px;
  margin: 20px auto 0px auto;
}
 
 

 
.modal-body {
  color: #121212;
  line-height: 1.5;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
}

 
.close-btn-popup {
 
  cursor: pointer; 
	font-weight: bold;   
	border: 1px solid #aaa ; 
	border-radius: 10px; 
	-webkit-tap-highlight-color: #111;
	background: transparent;
    height: 20px; width: 20px; 
    font-weight: 30px;
	 padding: 10px;
	color: #000;
	font-size: 30px;
    vertical-align: bottom; margin: 10px 0 0 0; padding-top: 7px;
}

  */  
      
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  .news-item {
      background: #fff;
      border-radius: 8px;
     
    }
        
	  
.news-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin: 12px 0;
    letter-spacing: 0.3px;
    text-align: justify;
}
 

   
/* Copy Section */
.copy-section {
    margin: 15px auto;
    background: linear-gradient(to right, #fdfdfd, #f2f2f2);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	border: 1px solid #eee;
}  
 
.copy-btn {
    background-color: #0066cc;
    color: #fff;
    padding: 12px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;  margin-top: 10px;
    transition: background-color 0.3s ease;
	width: auto; 
}

.copy-btn:hover {
    background-color: #004a99;
}

/* Modal */
.modal-content {
    background: #fff;
    border-radius: 12px;
    width: 95%;
    max-width: 420px;
    padding: 25px 20px;
    margin: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-close {
   
    top: 12px;
    right: 18px;
    font-size: 35px;
    color: #222;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1010;
}  

     
.modal-header {
    padding: 15px 15px 0;
    margin-bottom: 5px;
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: #222;
}
  
.modal-body {
    color: #222;
    font-size: 1rem;
    line-height: 1.6;
    max-height: 65vh;
    overflow-y: auto;
    padding: 10px;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

/* Close Button Popup */
.close-btn-popup {
	
	 display: flex;
    justify-content: center;
    align-items: center;
  	
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #bbb;
    border-radius: 50%;
    background: transparent;
    height: 50px;
    width: 50px;
    font-size: 36px;
    color: #000;
    float: right;
    transition: background 0.3s ease;
}
    
.close-btn-popup:hover {
    background: #f0f0f0;
}
.popup {
	display: none;
}