* {
          padding: 0;
          box-sizing: border-box;
      }
      html, body {
          margin: 0;
          padding: 0;
          
          font-family: Arial, Helvetica, sans-serif;
      }
      body {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 100vw;
		min-height: 100vh;
		justify-content: flex-start;
		background: linear-gradient(to bottom, #eef7ff, #ffffff);
      }
      .header, .footer {
        padding: 1vh .55vw 1vh .55vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: gray;
        color: white;
        height:	8%;
        position: relative;
      }
      .header-image{
        position: absolute;
        left: 5vw;
        height: 6vh;
      }
      .main-image{
        height: 15vw;
		margin-left: 5vw;
      }
      .header-text {
        flex: 1;
        text-align: center;
        font-size: 2vw;
		font-weight: bold;
      }
      h3 {
        font-size: 1.5vw;
        margin-bottom: 4vh;
      }
      .main {
          flex: 1;
          text-align:center;
		  display: flex;
		  flex-direction: rows;
          align-items: center;
		  justify-content: center;
		  
      }
      
      .tabcontent {
        flex: 1;
		width: 80vw;
        padding: 4.9vh 1.36vw 2.17vh 4.1vw;
        overflow-y: auto;
        font-size: 1.2vw;
		background-color: Transparent;
        display: none;
      }
	  .main-text{
		  position: relative;
		  font-size: 2.2vw;
		  text-align: left;
		  width: 60vw;
	  }
      
      .footer {
        
        padding: 1.36vh 2.17vw 1.36vh 2.17vw;
        text-align: center;
        width: 100vw;
        display: flex;    
        flex-wrap: wrap;
      }
      .txt {
        text-align:center;
		font-family: Arial, sans-serif;
        font-size: 2vw;
        margin: 1.8vh;
		
      }
	  .list {
		font-family: Noto Nastaliq Urdu, Jameel Noori Nastaleeq;
        font-size: clamp(20px, 2vw, 30px);
        margin: 1vw;
		line-height: 5.5vh;
		
      }
	  
	  .list_header{
		  font-size: clamp(20px, 2vw, 30px);
		  font-weight: bold;
		  
		}
      .input-container {
          display: flex;
		  flex-direction: rows;
          align-items: center;
          margin-bottom: 6vh;
          gap: 10px;
        }
        .error-message {
          font-size: 2.5vh;
          color: red;
          padding-top: 1vh;
        }
        
        a {
          text-decoration: none;
          color: blue;
        }
		ul ul{
			margin-left: 2vw;
		}
		.container {
            display: flex;
            height: 69vh;
        }
		.half {
			background: white;
			border-radius: 18px;
			box-shadow: 0 2px 20px rgba(0,0,0,0.18);
			margin: 1vw;
            width: 50%;
            padding: 40px;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .issues {
			
			font-size: 1.7vw;
			color: red;
			background: rgba(255,255,255,0.75);
			border-radius: 20px;
			backdrop-filter: blur(2px);			
        }
		
		/* Urdu */
		html[dir="rtl"] .issues {
			text-align: right;
		}

		/* English */
		html[dir="ltr"] .issues {
			text-align: left;
		}
		
		.corner-image{
			position: absolute;
			top: 13vh;
			width: 10vw;
			opacity: 0.7;
			pointer-events: none;
		}
		/* Urdu page (right side) */
		html[dir="rtl"] .corner-image {
			left: 2vw;
			top: 13vh;
		}

		/* English page (left side) */
		html[dir="ltr"] .corner-image {
			right:0vw;
			top: 10vh;
		}
		.relaxing-image{
			position: absolute;
			bottom: 5vh;
			left: 3vw;
			width: 10vw;
			opacity: 0.7;
			pointer-events: none;
		}
		.device-image{
			position: absolute;
			top: 1vh;
			
			width: 15vw;
			opacity: 0.7;
			pointer-events: none;
		}
		
		/* Urdu page (right side) */
		html[dir="rtl"] .device-image {
			left: 0vw;
		}

		/* English page (left side) */
		html[dir="ltr"] .device-image {
			right: 2vw;
		}

        .solutions {
            
			font-size: 1.7vw;
			color: green;
			background: rgba(255,255,255,0.75);
			border-radius: 20px;
			backdrop-filter: blur(2px);
        }
		
		
		.solutions > div:first-child,
		.issues > div:first-child{
			font-size: 2.2vw;
			font-weight: bold;
		}
				
		.whatsapp-btn,
		.youtube-btn{
			position: fixed;
			right: 20px;

			width: 65px;
			height: 65px;

			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			box-shadow: 0 4px 10px rgba(0,0,0,0.3);

			z-index: 999;
			transition: transform 0.3s ease;
		}

		.whatsapp-btn:hover,
		.youtube-btn:hover{
			transform: scale(1.08);
		}

		/* WhatsApp */
		.whatsapp-btn{
			bottom: 20px;
			background: #25D366;
		}

		.whatsapp-btn img{
			width: 38px;
			height: 38px;
		}

		/* YouTube */
		.youtube-btn{
			bottom: 100px; /* sits above WhatsApp */
			background: #FF0000;
		}

		.youtube-btn svg{
			width: 40px;
			height: 40px;
		}
		
		.top-buttons{
			position: absolute;
			top: 2%;
			right: 1.5%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			gap: 1vw;
			z-index: 1000;
		}
		

		.manual-btn,
		.lang-btn{
			height: clamp(35px, 4vh, 60px);
			min-width: clamp(80px, 10vw, 160px);

			padding: 0 1.5vw;

			display: flex;
			align-items: center;
			justify-content: center;

			border-radius: 2vw;
			text-decoration: none;
			font-size: clamp(12px, 1vw, 18px);
			font-weight: bold;

			color: white;
			white-space: nowrap;
		}

		.manual-btn{
			background: #007BFF;
		}
		
		/* language button */
		.lang-btn{
			background: #25D366;
			color: white;
			border: none;
			cursor: pointer;
		}

		/* dropdown wrapper */
		.lang-dropdown{
			position: relative;
		}

		/* dropdown menu */
		.lang-menu{
			display: none;
			position: absolute;

			top: 103%;
			right: 0;
			z-index: 99999;
			background: white;
			min-width: 140px;

			border-radius: 10px;
			overflow: hidden;

			box-shadow: 0 5px 15px rgba(0,0,0,0.2);
		}

		.lang-menu a{
			display: block;
			padding: 10px;
			text-decoration: none;
			color: black;
		}

		.lang-menu a:hover{
			background: #f2f2f2;
		}

		/* show dropdown */
		.lang-dropdown:hover .lang-menu{
			display: block;
		}
        
        
      @media (max-width: 768px) {
      }