/* TABLETS & MOBILE __2023_08_05 */
@media all and (max-width: 900px) {
	/* Optimized background for mobile */
	body {
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #f8f9fa, #ffffff);
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		overflow-x: hidden;
		overflow-y: auto;
		margin: 0;
		padding: 0;
		min-height: 100vh;
	}

	/* Image optimization for mobile */
	img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	/* Optimize background images */
	.main {
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	/* Ensure smooth background rendering */
	* {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Optimize logo for mobile */
	.logo-img {
		max-width: 180px !important;
		height: auto;
		margin: 0 auto;
		display: block;
		transition: transform 0.2s ease;
		-webkit-font-smoothing: antialiased;
		image-rendering: -webkit-optimize-contrast;
	}

	.logo-img.mobile-only {
		max-width: 210px !important;
		margin: 10px auto;
	}

	/* Optimize background images */
	[class*="bg-"] {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Optimize icons */
	[class*="icon-"] {
		width: 24px;
		height: 24px;
		background-size: contain;
		background-repeat: no-repeat;
	}

	/* Optimize images in content */
	.content img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 1em auto;
	}

	/* Optimize images in tables */
	table img {
		max-width: 100%;
		height: auto;
	}

	/* Optimize images in buttons */
	.btn img {
		max-width: 24px;
		height: auto;
		display: inline-block;
		vertical-align: middle;
	}

	/* Optimize images in navigation */
	.nav img {
		max-width: 32px;
		height: auto;
	}

	/* Optimize images in footer */
	#footer img {
		max-width: 100%;
		height: auto;
	}

	/* Hide sliders on mobile */
	#slider-left, #slider-right {
		/* display: none; */
		opacity: 0.8;
	}
	
	/* Hide cookie consent banner on mobile */
	.cc-window {
		display: none !important;
	}
	
	body, html { 
		overflow-x: hidden;
		background-attachment: initial !important;
		height: auto;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	#navbar {
		margin: 0 !important;
		padding: 0 15px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 70px;
		z-index: 999;
		background-color: #222;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	#logo {
		background-color: transparent;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		position: relative;
		box-sizing: border-box;
		z-index: 5; /* Lower than #how to ensure proper layering */
	}

	/* Hide desktop logo on mobile */
	.desktop-only {
		display: none !important;
	}

	/* Show and style mobile logo */
	.mobile-only {
		display: block !important;
	}

	#how {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1000;
	}

	.gradient {
		position: relative;
		top: 0;
		height: 10px;
		margin: 0;
		padding: 0;
	}

	/* Improve mobile content layout */
	.main, .conv, .wrapper {
		margin: 70px 0 15px 0 !important;
		padding: 15px !important;
		box-sizing: border-box;
		border-radius: 0;
	}

	/* Ensure content container is properly positioned */
	#sheader.content-container {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 15px;
		box-sizing: border-box;
	}

	#sheader .content-wrapper {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.wnu, .conv_wnu, .wnp, .conv_wnp {
		margin: 10px 0;
		padding: 15px !important;
		box-sizing: border-box;
		border-radius: 0;
	}

	/* Improve text readability on mobile */
	p, li {
		font-size: 16px !important;
		line-height: 1.5 !important;
		text-align: left !important;
		word-wrap: break-word;
	}

	/* Improve form elements on mobile */
	input, select, textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		margin: 5px 0;
		font-size: 16px !important; /* Prevent zoom on iOS */
	}

	/* Footer improvements */
	#footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 !important;
		box-sizing: border-box;
		text-align: center;
		background-color: #f8f8f8 !important; /* Added !important to override any conflicting styles */
		margin-top: 30px;
		border-top: 1px solid #eee;
	}

	#footer.mob_only {
		display: block !important;
		position: relative;
		bottom: auto;
		left: auto;
		background-color: #222 !important;
		color: #fff;
		padding: 10px 15px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	#footer.mob_only .subtitle {
		color: #fff;
		font-size: 14px;
		margin: 0;
	}

	#footer.mob_only a {
		color: #fff;
		text-decoration: none;
	}

	#footer.mob_only a:hover {
		text-decoration: underline;
	}

	#footer p {
		margin: 10px 0;
		font-size: 14px;
		line-height: 1.4;
	}

	#footer a {
		color: #2a9ed6;
		text-decoration: none;
		word-break: break-word;
		padding: 5px 10px;
		border-radius: 15px;
		transition: background-color 0.2s ease;
	}

	#footer a:hover {
		text-decoration: none;
		background-color: rgba(42, 158, 214, 0.1);
	}

	#footer .subtitle a {
		font-size: 14px;
		font-weight: 500;
	}

	#langswitch {
		position: relative;
		width: 100%;
		right: auto;
		text-align: center;
		margin: 15px 0;
		padding: 10px 0;
		border-top: 1px solid #eee;
	}

	#langswitch a {
		display: inline-block;
		padding: 5px 10px;
		margin: 0 5px;
		color: #2a9ed6;
		text-decoration: none;
	}

	#langswitch a:hover {
		text-decoration: underline;
	}

	/* Ensure footer content doesn't overflow */
	#footer img {
		max-width: 100%;
		height: auto;
	}

	/* Add spacing between footer sections */
	#footer > div {
		margin-bottom: 15px;
	}

	#footer > div:last-child {
		margin-bottom: 0;
	}

	/* Hide desktop-only elements */
	.desktop_only {
		display: none !important;
	}

	/* Show mobile-only elements */
	.mobile_only {
		display: block !important;
	}

	/* Ensure images don't overflow */
	img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Improve table responsiveness */
	table {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto;
		display: block;
	}

	.back-to-top-mobile {
		position: relative;
		right: 0;
		top: 0;
		transform: none;
		background-color: rgba(255, 255, 255, 0.2);
		color: #fff;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		transition: background-color 0.3s ease;
		margin-left: 10px;
	}

	.back-to-top-mobile:hover {
		background-color: rgba(255, 255, 255, 0.3);
		text-decoration: none;
	}
}

/* Tablet-specific adjustments */
@media all and (min-width: 768px) and (max-width: 900px) {
	body, html {
		max-width: 100% !important;
		width: 100% !important;
	}

	.main, .wnbg_main, .conv, .wrapper {
		margin: 80px 20px 20px 20px !important;
	}

	.logo-img {
		max-width: 240px;
	}
}

/* TABLETS */
@media all and (min-width: 767px) and (max-width: 900px) {
    .mob_only, .mobile_only { display:none !important; }
	.tablet_only, .desktop_only, .desk_only { display:block !important; /* __2023_06_10 */ }
    body, html { 
		width: 800px !important; /* __2023_03_07 */
		background-attachment: initial !important; 
		height: auto; 
	}
}
/* MOBILE */	
@media all and (max-width: 767px) {
    body { 
        background: none; 
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    
    #navbar { 
        width: 100% !important;
        margin: 0 !important;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }

    #logo {
        width: 100% !important;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        position: relative;
        box-sizing: border-box;
        background-color: transparent;
    }

    .logo-img {
        max-width: 180px !important;
        height: auto;
        margin: 0 auto;
        display: block;
        transition: transform 0.2s ease;
        -webkit-font-smoothing: antialiased;
        image-rendering: -webkit-optimize-contrast;
    }

    #how {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
    }

    .main, .wnbg_main, .conv, .wrapper {
        margin: 70px 10px 15px 10px !important;
        padding: 15px !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
  
    table#sheader {
        width: 90% !important;
        margin: 0 auto !important;
        /* display: table !important; */
        text-align: center !important;
    }

    div#sheader, div.sheader, .wnbg_main, .main, h1.intro {
        background-color: #fbfbfb;
        box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
        padding: 5px 10px !important;
        width: 100% !important;
        border-radius: 3px;
        position: relative;
    }

    ::-webkit-scrollbar {
        width: 8px !important;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px !important;
    }

    /* Improve form elements on mobile */
    input, textarea, .textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 5px 0;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    #nav { display: none; }
    #navbar { 
        width: 100% !important;
        margin: 0 !important;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }
#how { position: absolute; right: 30px; bottom: 35px; }
#how a { color: #424242; text-decoration: none; }
#how a:hover { color: #424242; text-decoration: underline; }
p, li p { text-align: left !important; }
.wncloud p { 
		font-size: 18px !important;
		text-align: center !important;
	}
table#sheader {  
        width: 90% !important; /* __2023_09_03 */
		margin-left: 5% !important;
	}
table#tf  {  
        width: 100% !important; /* Updated for full mobile responsiveness */
        max-width: 100% !important;
        min-width: auto !important; /* Override desktop min-width: 650px */
        box-sizing: border-box;
        table-layout: fixed;
        word-wrap: break-word;
	}

/* Fix div#tf mobile overflow issue */
div#tf {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        box-sizing: border-box;
        overflow-x: auto;
        padding: 0 10px;
}

/* Ensure any tables inside div#tf are also responsive */
div#tf table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        word-wrap: break-word;
}

/* Make table cells responsive inside div#tf */
div#tf table td, div#tf table th {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
}

/* Additional fieldset.conv mobile overflow fixes for inc4_* files */

/* Override any inline width styles on inputs inside fieldset.conv */
fieldset.conv input[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
}

/* Fix table width issues in fieldset.conv */
fieldset.conv table[width] {
        width: 100% !important;
        max-width: 100% !important;
}

fieldset.conv tr[width] {
        width: 100% !important;
        max-width: 100% !important;
}

fieldset.conv td[width] {
        width: auto !important;
        max-width: 100% !important;
}

/* Ensure all tables inside fieldset.conv are responsive */
fieldset.conv table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        word-wrap: break-word;
}

/* Enhanced mobile styles for table#tf cells and content */
table#tf td, table#tf th {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
        box-sizing: border-box;
}

/* Override any width attributes on table#tf cells */
table#tf td[width], table#tf th[width] {
        width: auto !important;
        max-width: 100% !important;
}

/* Ensure table#tf rows are responsive */
table#tf tr {
        width: 100% !important;
        max-width: 100% !important;
}

/* Override any width attributes on table#tf rows */
table#tf tr[width] {
        width: 100% !important;
        max-width: 100% !important;
}
#wnl { 
		position: absolute; 
		top: 60px; 
		margin-left: 10%; 
		margin-right: 10%;
	}
	#wnl3 {     
		position: relative;
		margin: 0 auto;
		width: 70% !important;
		text-align: center;
	}
	.center { text-align: center !important;}
	#welcome { 
		margin-left: 15%; 
		margin-right: 15%;	
	}
	#welcome select { width: 210px; }	
	h1.intro  { text-align:center !important;  }
	fieldset { 
		width: 100% !important; 
		max-width: 350px !important;
		min-height: auto;
		}
	li { 
		list-style-type:none;
		text-align: left; 
	}
	input, textarea, .textarea	
	{	
		background-color:#fbfbfb;	
		border-radius: 3px; /* future proofing */
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
		box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
		padding:3px;
		margin: 2px 6px 10px 2px;
		max-width: 250px !important;
		border: solid 1px #ccc;
		}
	.fileUpload input.upload { width: auto; }
	.btn {
		float: none !important;
		margin: 10px auto !important;
		padding: 12px 20px !important;
		font-size: 16px !important;
		width: auto !important;
		height: auto !important;
		min-width: 120px;
		display: inline-block;
	}

	iframe { width: 100% !important; height: auto; }
	.submit {
		color: #f2f2f2 !important;
		font-weight: 800 !important; 
		padding: 8px !important;
		border-radius: 25px !important;
	}
	#wnbar, #wnbar0, #wnbar20, #wnbar40, #wnbar90, #wnbar100 {
		display: none;
	}
	#wnbar img { display: block !important;}
	div#sheader, div.sheader, .wnbg_main, .main, h1.intro {  
		background-color: #fbfbfb;
		-webkit-box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
		box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
		position:fixed;
		padding: 5px 10px !important;
		width: 100%;
		border-radius: 3px; /* future proofing */
  }
	.poup { width: 70%; /* inc_how */ }
	
	/* Mobile popup styles */
	.overlay {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background-color: rgba(0, 0, 0, 0.8) !important;
		z-index: 9999 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 20px !important;
		box-sizing: border-box !important;
	}
	
	.overlay:target {
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	.poup {
		width: 95% !important;
		max-width: 500px !important;
		margin: 0 !important;
		padding: 20px !important;
		background-color: #fff !important;
		border-radius: 15px !important;
		position: relative !important;
		height: auto !important;
		max-height: 90vh !important;
		overflow-y: auto !important;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
	}
	
	.poup .close {
		position: absolute !important;
		top: 10px !important;
		right: 15px !important;
		font-size: 24px !important;
		font-weight: bold !important;
		color: #333 !important;
		text-decoration: none !important;
		background: #f0f0f0 !important;
		width: 30px !important;
		height: 30px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
	}
	
	.poup .close:hover {
		background: #e0e0e0 !important;
		color: #000 !important;
	}
	
	.poup .content {
		min-height: auto !important;
		height: auto !important;
		overflow: visible !important;
		padding-top: 10px !important;
	}
	
	.poup h2 {
		margin-top: 0 !important;
		margin-bottom: 15px !important;
		font-size: 20px !important;
		line-height: 1.3 !important;
	}
	
	.poup p, .poup li {
		font-size: 16px !important;
		line-height: 1.5 !important;
		margin: 10px 0 !important;
	}
	
	span.info { display:none !important; /* tooltips */}
	#conv, .conv { 
		color: #222; 
		-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
		-moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
		box-shadow:  0px 0px 8px rgba(0,0,0,0.3);
		word-wrap: break-word; 
		text-align:center;		
		min-height: 80px !important;
		max-width: 100% !important; /* Updated for full width responsiveness */
        width: 100% !important;
		padding: 15px;
		background: #fff; 
		border-radius: 25px 25px 25px 25px;
		margin-top: 60px; /* __2024_04_27 */
		box-sizing: border-box; /* Added for proper box model */
	}
	
	/* Enhanced responsive styles for fieldset.conv */
	fieldset.conv {
		width: 100% !important;
		max-width: 100% !important;
		min-width: auto !important;
		box-sizing: border-box;
		padding: 15px;
		margin: 10px 0;
		background: #f8f9fa;
		border-radius: 15px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		overflow-x: auto;
	}
	
	/* Ensure all div.conv elements are responsive */
	div.conv {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	
	/* Specific mobile styles for div.conv.wnp and div.conv.wnu */
	div.conv.wnp, div.conv.wnu {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	
	/* Override any potential width constraints on div.conv elements */
	div.conv[style*="width"], div.conv[style*="max-width"] {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Ensure all conv elements in inc* files are responsive */
	.conv {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	fieldset.conv table#tf {
		width: 100% !important;
		font-size: 14px;
	}
	
	fieldset.conv table#tf td {
		padding: 8px 4px;
		word-wrap: break-word;
		display: block;
		width: 100% !important;
		text-align: left;
	}
	
	fieldset.conv table#tf tr {
		display: block;
		margin-bottom: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
	}
	
	fieldset.conv table#tf td:last-child {
		text-align: right;
		font-weight: bold;
	} 
	.wncloud {
		background: #fbfbfb;
		background: linear-gradient(top, #fbfbfb 5%, #f2f2f2 100%);
		background: -webkit-linear-gradient(top, #fbfbfb 5%, #f2f2f2 100%);
		background: -moz-linear-gradient(top, #fbfbfb 5%, #f2f2f2 100%);
		background: -ms-linear-gradient(top, #fbfbfb 5%, #f2f2f2 100%);
		background: -o-linear-gradient(top, #fbfbfb 5%, #f2f2f2 100%);
		border-radius: 20px;
		position: relative;
		margin: 15px auto !important;
		padding: 20px 15px !important;
		width: 90% !important;
		max-width: 320px !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: visible;
		box-sizing: border-box;
	}
	.wncloud h2, .wncloud h3 {
		color: #1d6f97;
		font-weight: 600;
		font-size: 20px;
		margin: 15px 0 10px 0;
		width: 100%;
		text-align: center;
		line-height: 1.3;
	}
	.wncloud h4 {
		margin-top: 15px;
		margin-bottom: 5px !important;
		font-weight: 600;
		font-size: 16px;
		width: 100%;
		text-align: center;
	}
	.wncloud p {
		font-size: 16px !important;
		line-height: 1.6 !important;
		margin: 10px 0 !important;
		width: 100%;
		text-align: center;
		word-wrap: break-word;
		hyphens: auto;
	}
	.wncloud img {
		width: 70px;
		height: auto;
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin: 0 auto 12px auto !important;
		z-index: 2;
		display: block;
	}
	.wncloud:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 70px;
		top: 8px;
		left: 15px;
		border-radius: 70px;
		background: rgba(255,255,255,0.6);
		z-index: 1;
	}
	.wncloud:before {
		content: "";
		position: absolute;
		width: 110px;
		height: 110px;
		top: -15px;
		right: 15px;
		border-radius: 110px;
		background: rgba(255,255,255,0.4);
		z-index: 1;
	}
	.wncloud.mobile_only {
		display: flex !important;
		width: 90% !important;
		max-width: 320px !important;
		margin: 20px auto !important;
		padding: 20px 15px !important;
	}
	
	/* Responsive padding for very small screens */
	@media (max-width: 480px) {
		.wncloud {
			padding: 18px 12px !important;
			width: 95% !important;
			max-width: 300px !important;
		}
		.wncloud.mobile_only {
			padding: 18px 12px !important;
			width: 95% !important;
			max-width: 300px !important;
		}
		.wncloud img {
			width: 65px;
			margin: 0 auto 10px auto !important;
		}
		
		/* Extra small mobile popup adjustments */
		.poup {
			width: 98% !important;
			max-width: 350px !important;
			padding: 15px !important;
			margin: 10px !important;
		}
		
		.poup .close {
			top: 8px !important;
			right: 12px !important;
			width: 28px !important;
			height: 28px !important;
			font-size: 20px !important;
		}
		
		.poup h2 {
			font-size: 18px !important;
			margin-bottom: 12px !important;
		}
		
		.poup p, .poup li {
			font-size: 15px !important;
			margin: 8px 0 !important;
		}
	}
	.desktop_only, .tablet_only { display:none !important; }
	.mob_only, .mobile_only { display:block !important; }

    /* Container for navigation buttons */
    .nav-buttons {
        text-align: center;
        margin: 20px 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Previous button specific styles */
    .btn-prev {
        margin-right: 5px !important;
    }

    /* Next button specific styles */
    .btn-next {
        margin-left: 5px !important;
    }

    /* Navigation buttons - fixed at 20% from bottom */
    #slider-left, #slider-right {
        display: inline-block !important;
        position: fixed !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 20px !important;
        background-color: #fff !important;
        background-image: none !important;
        text-indent: 0 !important;
        font-size: 16px !important;
        border-radius: 25px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        z-index: 999;
        cursor: pointer;
        margin: 0 !important;
        bottom: 10% !important;
    }

    #slider-left {
        left: 5% !important;
        top: auto !important;
    }

    #slider-right {
        right: 5% !important;
        top: auto !important;
    }

    /* Button states */
    #slider-right.disabled, #slider-left.disabled {
        opacity: 0.6;
        cursor: not-allowed !important;
    }

    #slider-right.enabled, #slider-left.enabled {
        opacity: 1;
        cursor: pointer !important;
    }

    /* Button hover effects */
    #slider-left:hover, #slider-right:hover {
        background-color: #f8f8f8 !important;
        transform: translateY(-1px);
        transition: all 0.2s ease;
    }

    /* Ensure buttons are visible on all backgrounds */
    #slider-left, #slider-right {
        color: #333 !important;
        text-shadow: none !important;
    }

    /* Fix for any existing button styles */
    .btn {
        font-size: 16px !important;
        padding: 12px 20px !important;
        margin: 5px !important;
        height: auto !important;
    }

    /* Get Started button next to select dropdown - inspired by desktop design */
    #blinkdiv, .blinkdiv {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-block !important;
        margin: 0 0 0 10px !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        box-sizing: border-box !important;
        z-index: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        vertical-align: middle !important;
    }

    /* Style the select dropdown and button container */
    .mobile-header h1 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .mobile-header .select-business-type {
        margin-bottom: 0 !important;
        font-size: 18px !important;
        padding: 8px 15px !important;
        border-radius: 20px !important;
        border: 2px solid #e0e0e0 !important;
        background: #fff !important;
        transition: all 0.3s ease !important;
    }

    .mobile-header .select-business-type:focus {
        border-color: #2A9ED6 !important;
        box-shadow: 0 0 0 3px rgba(42, 158, 214, 0.1) !important;
        outline: none !important;
    }

    /* Ensure button appears after select even without JavaScript */
    .mobile-header h1 #blinkdiv {
        display: inline-block !important;
        margin-left: 10px !important;
    }

    /* Hover effects for the inline button */
    #blinkdiv:hover, .blinkdiv:hover {
        transform: none !important;
    }

    #blinkdiv input:hover, .blinkdiv input:hover {
        background: linear-gradient(135deg, #1e7bb8 0%, #2A9ED6 100%) !important;
        box-shadow: 0 6px 16px rgba(42, 158, 214, 0.4) !important;
        transform: translateY(-2px) !important;
        color: #fff !important;
    }

    /* Active/touch effects */
    #blinkdiv input:active, .blinkdiv input:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 8px rgba(42, 158, 214, 0.3) !important;
    }

    /* Add a subtle pulse animation inspired by desktop design */
    #blinkdiv input {
        animation: buttonPulse 4s ease-in-out infinite !important;
    }

    @keyframes buttonPulse {
        0%, 100% {
            box-shadow: 0 4px 12px rgba(42, 158, 214, 0.3) !important;
        }
        50% {
            box-shadow: 0 4px 16px rgba(42, 158, 214, 0.4) !important;
        }
    }

    #blinkdiv input, .blinkdiv input {
        position: relative !important;
        display: inline-block !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        font-size: 16px !important;
        font-weight: bold !important;
        padding: 12px 20px !important;
        background: linear-gradient(135deg, #2A9ED6 0%, #1e7bb8 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 12px rgba(42, 158, 214, 0.3) !important;
        text-align: center !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        letter-spacing: 0.5px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: all 0.3s ease !important;
    }


    #why.mob_only {
        width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
        margin: 0 auto;
		margin-top: 20px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Additional mobile-specific footer adjustments */


    #footer p {
        font-size: 13px;
    }

    #langswitch {
        margin: 10px 0;
        padding: 8px 0;
    }

    #langswitch a {
        font-size: 13px;
        padding: 4px 8px;
    }

    /* Specific styles for inc1a.mob_only */
    .inc1a.mob_only {
        width: 95% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 1rem !important;
    }

    /* Enhanced styles for wnp and wnu on mobile */
    .wnu, .conv_wnu {
        background: #f8f8f8;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin: 15px 0 !important;
        padding: 20px !important;
        width: 90% !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative;
        box-sizing: border-box;
    }

    .wnp, .conv_wnp {
        background: #f2f2f2;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin: 15px 0 !important;
        padding: 20px !important;
        width: 90% !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative;
        box-sizing: border-box;
    }

    /* Add subtle hover effects */
    .wnu:hover, .conv_wnu:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: box-shadow 0.3s ease;
    }

    .wnp:hover, .conv_wnp:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: box-shadow 0.3s ease;
    }

    /* Ensure text is readable */
    .wnu p, .conv_wnu p, .wnp p, .conv_wnp p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 10px 0 !important;
        color: #333 !important;
    }

    /* Add subtle border */
    .wnu, .conv_wnu {
        border: 1px solid #eee;
    }

    .wnp, .conv_wnp {
        border: 1px solid #dde8f0;
    }

    /* Specific styles for #why */
    #why {
        width: 95% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 1rem !important;
        box-sizing: border-box;
        position: relative;
    }

    /* Ensure proper alignment for #why content */
    #why > * {
        width: 100% !important;
        max-width: 320px !important;
        box-sizing: border-box;
    }

    #why img {
        max-width: 100% !important;
        height: auto !important;
    }

    #why table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Ensure proper text alignment and spacing */
    #why p, #why li {
        text-align: left !important;
        margin: 10px 0 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Ensure proper heading styles */
    #why h1, #why h2, #why h3, #why h4 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 !important;
        text-align: left !important;
    }

    /* Ensure proper centering for all divs */
    div {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* Specific centering for content divs */
    div.main, div.wrapper, div.content, div.container {
        width: 95% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 15px !important;
    }

    /* Ensure proper text alignment */
    div p, div li, div span {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure proper image alignment within divs */
    div img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Ensure proper table alignment within divs */
    div table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Remove any absolute positioning that might affect centering */
    div * {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* Mobile language switch styles */
    #langSwitch-mobile {
        background: transparent !important;
        color: white !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        padding: 5px 10px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 5px center !important;
        background-size: 20px !important;
        padding-right: 30px !important;
    }

    #langSwitch-mobile:focus {
        outline: none !important;
        border-color: rgba(255,255,255,0.5) !important;
    }

    #langSwitch-mobile option {
        background: #222 !important;
        color: white !important;
    }

    div#inc1a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 100px 0 0 10% !important;
        text-align: center;
    }
   #hello, .hello {
        margin-top: 30% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* Mobile Styles */
@media all and (max-width: calc(var(--breakpoint-tablet) - 1px)) {
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 70px;
        width: 100%;
        z-index: var(--z-index-navbar);
        background-color: var(--color-dark-background);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    /* Ensure content doesn't overlap with fixed navbar */
    .main, .wnbg_main {
        margin-top: 70px;
        padding: var(--spacing-md);
        min-height: calc(100vh - 70px);
        position: relative;
    }

    #logo {
        height: 70px;
        padding: var(--spacing-sm) var(--spacing-md);
        display: flex;
        align-items: center;
        position: relative;
        box-sizing: border-box;
    }

    .logo-img {
        max-height: 70px;
        width: auto;
        transition: transform 0.2s ease;
        -webkit-font-smoothing: antialiased;
        image-rendering: -webkit-optimize-contrast;
    }

    /* Mobile forms */
    input, select, textarea {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    /* Mobile footer - use relative positioning to allow scrolling */
    #footer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        height: auto;
        background-color: var(--color-dark-background);
        color: var(--color-white);
        padding: var(--spacing-sm);
        z-index: auto;
        margin-top: 20px;
    }

    /* Mobile navigation buttons */
    .nav-buttons {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 var(--spacing-md);
        z-index: var(--z-index-navbar);
    }

    .btn-prev, .btn-next {
        padding: var(--spacing-sm) var(--spacing-md);
        background-color: var(--color-secondary);
        color: var(--color-white);
        border-radius: 4px;
        text-decoration: none;
    }
	#hello, .hello {
        margin-top: 30% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* Tablet Styles */
@media all and (min-width: var(--breakpoint-mobile)) and (max-width: var(--breakpoint-tablet)) {
    .tablet_only, .desktop_only { 
        display: block !important;
    }
    
    .mobile_only { 
        display: none !important;
    }
    
    body, html { 
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }
}

/* Mobile layout container for poster - only on mobile */
@media (max-width: 767px) {
    .mobile-poster-button-container {
        display: block;
        margin: 1rem 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Video container styles for mobile */
@media (max-width: 767px) {
    .video-container {
        margin: 0 auto;
        background: #f5f5f5;
        padding: 15px;
        height: auto;
        position: relative;
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
        overflow: hidden;
    }
}

.video-container img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

#wnv_mobile {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 500px;
}

/* Mobile-specific container styles */
#inc1a.mob_only {
    width: 95% !important;
    max-width: 400px !important;
    margin: 30% auto 20px !important;
    padding: 15px !important;
}