

@media only screen and (min-width: 320px) and (max-width: 768px) {

	@keyframes grow-progress {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
	
	#progress {
		position: fixed;
		left: 0;
		top: 0px;
		display: none;
		width: 100%;
		height: 3px;
		background: #18568B;
		z-index: 9922998;
		transform-origin: 0 50%;
		animation: grow-progress auto linear;
		animation-timeline: --page-scroll;
	}

	
	

	body {
		/**
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        **/
		padding: 0px !important;
		overflow-x: hidden !important;
		text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
		font-weight: normal;
		overflow: overlay;
		background-color: #f2f4f7 !important;
		font-family: "Funnel Display", sans-serif !important;
		outline: none !important;
		color: #000 !important;
		-webkit-transition: all 0.2s ease-in-out;
		text-decoration: none;
		margin: 0px !important;
		direction: ltr;
		position: relative;
		text-rendering: optimizeLegibility;
		font-feature-settings: "liga" 0;
		-webkit-font-smoothing: antialiased;
		font-optical-sizing: auto !important;
	}

	.logo {
		width: 150px;
		height: 41px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		margin: auto;
		background-image: url(../images/logo.svg);
		cursor: pointer;
	}

	h1 {
		font-size: 15px !important;
		color: #fff !important;
		display: block !important;
		line-height: 30px !important;
		font-weight: 500 !important;
		margin-top: 10px !important;
	}

	h2 {
		font-size: 18px !important;
		color: #1a255b !important;
		display: inline-block !important;
		line-height: 30px !important;
		font-weight: 600 !important;
	}

	h3 {
		position: absolute !important;
		right: 0px !important;
		left: 0px !important;
		bottom: 0px !important;
		margin: auto !important;
		font-size: 13px !important;
		color: #fff !important;
		display: inline-block !important;
		line-height: 20px !important;
		font-weight: 400 !important;
	}

	.dewspace {
		width: 100%;
		height: 20px;
	}

	.dewnav {
		background-color: #fff;
		box-shadow: 0px 20px 40px rgba(0, 0, 0, .1);
		border-radius: 30px;
		width: 100%;
		max-width: 90%;
		height: auto;
		margin: auto auto 20px auto !important;
	}

	.dewline {
		width: 100%;
		height: 1px;
		background-color: rgba(0, 0, 0, .2);
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.left-bg {
		width: 88%;
		margin: 6% auto auto auto;
		height: 200px;
		background-image: url(../images/left-bg-mob.jpg);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		position: relative;
		border-radius: 25px;
		box-shadow: 0px 30px 50px rgba(4, 61, 107, 0.2);
	}

	.left-bg-content {
		width: 95%;
		height: auto;
		position: absolute;
		left: 0px;
		right: 0px;
		margin: auto;
		top: 15px;
		bottom: 40px;
	}


	.main-ico {
		position: relative;
		top: 3px;
		right: 5px;
		display: inline-block !important;
		font-size: 20px;
		color: #e01723;
		font-variation-settings:
			'FILL' 0,
			'wght' 600,
			'GRAD' -25,
			'opsz' 48;
	}

	.dew-label {
		font-size: 12px;
		font-weight: 500;
		color: #1a255b;
		line-height: 17px;
		letter-spacing: 1.5px;
	}


	.dew-select {
		margin-top: 10px;
		position: relative;
		width: 100%;
	}

	.dew-select input {
		width: 100%;
		padding: 15px 25px;
		border: 1px solid #0060ae;
		border-radius: 13px;
		color: #090e26;
		font-size: 15px;
		font-weight: 500;
		box-sizing: border-box;
		transition: 0s ease-in-out;
	}


	.dew-select input:focus {
		transition: 0s ease-in-out;
		border: 1px solid rgb(0, 96, 174, 0.6);
		outline: 3px solid rgb(0, 96, 174, 0.3);
	}

	.dew-select::after {
		content: "";
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%) rotate(0deg);
		width: 16px;
		height: 16px;
		background: url("../images/input-ico.svg") no-repeat center;
		background-size: contain;
		transition: transform 0.3s ease;
	}

	.dew-select.active::after {
		transform: translateY(-50%) rotate(-90deg);
	}

	.dew-select.selected::after {
		background: url("../images/left-bg.jpg") no-repeat center;
		background-size: contain;
		transform: translateY(-50%);
	}

	.options {
		border: 2px solid rgba(24, 131, 225, 1);
		padding: 10px;
		font-size: 15px;
		font-weight: 500;
		color: rgba(0, 0, 0, .7);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0px 30px 30px 30px #fff;
		border-radius: 13px;
		margin-top: 5px;
		max-height: auto;
		overflow-y: auto;
		display: none;
		z-index: 10;
	}

	.options div {
		border-radius: 10px;
		padding: 10px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.options div:hover {
		background: #f0f0f0;
	}

	.dew-select.active .options {
		display: block;
	}

	select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: none;
	}

	.option.disabled {
		color: #999;
		cursor: not-allowed;
		background: #f9f9f9;
	}


	.dew-input {
		text-transform: capitalize;
		margin-top: 10px;
		width: 100%;
		padding: 15px 25px;
		border: 1px solid #0060ae;
		border-radius: 13px;
		color: #090e26;
		font-size: 15px;
		font-weight: 500;
		box-sizing: border-box;
		transition: 0s ease-in-out;
	}

	.dew-input:focus {
		transition: 0s ease-in-out;
		border: 1px solid rgb(0, 96, 174, 0.6);
		outline: 3px solid rgb(0, 96, 174, 0.3);
	}


	.cta {
		height: auto;
		padding: 15px;
		width: 100%;
		font-weight: 500;
		color: #fff;
		background-color: #0060ae;
		font-size: 15px;
		font-weight: 500;
		border-radius: 15px;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-bottom: 10px;
		transition: 0s ease-in-out;
	}

	.cta:hover {
		background-color: #003130;
		transition: 0s ease-in-out;
	}

	.cta:active{
		transform:scale(0.98);
		transition: 0s ease-in-out;
	}

	.cta .material-symbols-rounded {
		transition: 0s ease-in-out;
		font-size: 20px;
		line-height: 1;
	}

	.cta:hover .cta-ico{
		color: #fff;
		font-variation-settings:
			'FILL' 1,
			'wght' 600,
			'GRAD' -25,
			'opsz' 48;
	}

	.cta-ico{
		font-size: 15px;
		color: rgba(255,255,255,0.7);
		font-variation-settings:
			'FILL' 0,
			'wght' 600,
			'GRAD' -25,
			'opsz' 48;
	}

	.final-text1{
		font-size: 17px;
		font-weight: 500;
		color: #0060ae;
		display: block;
	}


	.final-text{
		font-size: 25px;
		font-weight: 800;
		color: #333;
		border-radius: 10px;
		padding: 5px;
		display: inline-block;
	}

	.final-text2{
		font-size: 15px;
		font-weight: 500;
		color: #003130;
		display: block;
	}

	.final-img{
		width: 90px;
		margin-bottom: 10px;
	}

	.responsive-frame{
		width: auto;
		height: auto;
		padding-top: 10px;
		padding-bottom: 0px;
	}

}













