/* Universal Css Start Here */
			:root {
				/* Typography starts here */

				--font-default: "Open Sans", sans-serif;
				/* Typography ends here */
				/* Colors starts here */
				--body-color: #50a8be;
				--bg-color: #4bb955;
				--extra-color-3: #ed9b2b;
				--content-color: #fff;
				--step-color: #ccc;

				/* Colors starts end */
			}
			
			h1.main-heading-web {
				text-align: center;
				color: #053c52;
				font-size: 38px;
				margin: 0;
			}
			section.main-banner-wrapper {
				padding: 40px;
				background: #f1fbff;
			}
			html {
				overflow-x: hidden !important;
				scroll-behavior: smooth;
			}
			.form-control:focus {
				box-shadow: none;
			}
			ul {
				padding: 0;
				list-style: none;
			}
			.hme-ul ul {
			    list-style: disc;
			    padding: 0px;
			}

			.hme-ul ul li {
			    margin-bottom: 5px;
			}
			a {
				text-decoration: none;
			}
			h1 {
				font-size: 50px;
				margin: 0;
				font-weight: 800;
			}
			h2 {
				font-weight: 600;
			}
			h3 {
				font-size: 34px;
				margin: 0;
			}
			h5 {
				font-size: 20px;
				font-size: 22px;
				font-weight: 500;
				margin: 0;
			}
			h6 {
				font-size: 13px;
				font-size: 16px;
				font-weight: 400;
				color: #000000;
				margin: 0;
			}
			p {
				line-height: 1.2;
				color: #05202b;
				font-size: 15px;
				margin: 0;
			}
			.btn {
				background: #27a9e0;
				border-radius: 5px;
				padding: 13px 40px;
				color: #fff;
				font-weight: 600;
				font-size: 16px;
				position: relative;
				text-decoration: none;
				cursor: pointer;
				text-transform: capitalize;
				border: none;
				overflow: hidden;
			}

			#container {
    box-shadow: 0px 0px 10px rgb(0 0 0 / 82%);
    background: #fff;
    padding: 80px 40px;
}
			section.wizard {
				padding: 20px 0 90px 0;
				position: relative;
			}
			.step-container {
				position: relative;
				text-align: center;
				transform: translateY(-43%);
			}

			.step-circle {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: var(--step-color);
				line-height: 30px;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15px;
				cursor: pointer;
				color: var(--content-color);
				font-size: 16px;
				transition: all 1s ease-in-out;
			}
			.progress-bar {
				background-color: var(--bg-color);
			}
			.step-circle.active {
				background-color: var(--bg-color);
				color: #fff;
				transition: all 1s ease-in-out;
			}
			.step-line {
				position: absolute;
				top: 16px;
				left: 50px;
				width: calc(100% - 100px);
				height: 2px;
				background-color: #007bff;
				z-index: -1;
			}
			.step-content {
				position: relative;
				top: -25px;
			}
			.step-content h6 {
				font-weight: 700;
				color: #212529;
			}
			.padding-wrapper {
				padding: 0px 80px;
			}
			.parent {
				display: grid;
				grid-template-columns: 2fr 0.9fr;
				grid-template-rows: 1fr;
				grid-column-gap: 18px;
				grid-row-gap: 4px;
			}
			.contineous-wrapper {
    background: #4bb955;
    background-image: linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -o-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -moz-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -webkit-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -ms-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, rgb(7 82 14)), color-stop(0.79, rgb(75 185 85)) );
    color: #fff;
    font-size: 1.3em;
    border: 5px solid #2cdd3c;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
}
			.select-the-service {
				background-image: linear-gradient(
					bottom,
					rgb(141, 0, 16) 15%,
					rgb(226, 2, 50) 79%
				);
				background-image: -o-linear-gradient(
					bottom,
					rgb(141, 0, 16) 15%,
					rgb(226, 2, 50) 79%
				);
				background-image: -moz-linear-gradient(
					bottom,
					rgb(141, 0, 16) 15%,
					rgb(226, 2, 50) 79%
				);
				background-image: -webkit-linear-gradient(
					bottom,
					rgb(141, 0, 16) 15%,
					rgb(226, 2, 50) 79%
				);
				background-image: -ms-linear-gradient(
					bottom,
					rgb(141, 0, 16) 15%,
					rgb(226, 2, 50) 79%
				);
				background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, rgb(7 82 14)), color-stop(0.79, rgb(75 185 85)) );
				color: #fff;
				border-radius: 5 px;
				padding: 20px;
			}
			.element-p-wrapper {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
			}
			.element-p-wrapper h4 {
				font-size: 14px;
				font-weight: 700;
				color: #fff;
			}
			.element-p-wrapper h5 {
				font-size: 14px;
				font-weight: 700;
				color: #ffffff;
			}
			.btn-hide{
				display: none;
			}
			.hme-frm form#formSubmit {
			    padding: 20px;
			    box-shadow: 0px 0px 18px #000000b0;
			    border-radius: 10px;
			}
			.element-p-wrapper h5 {
				font-size: 14px;
				font-weight: 500;
			}
			.element-heading-wrapper h2 {
				text-align: center;
				border-bottom: 1px solid #fff;
				padding-bottom: 10px;
				margin-bottom: 20px;
			}
			h5.price-anchor-element {
				background: #fff;
				padding: 10px 10px;
				color: #333;
				clear: both;
				overflow: hidden;
				border-radius: 5px;
				font-weight: bold;
				font-size: 16px;
				text-align: center;
				margin: 20px 0;
			}
			.element-quantity h4 {
				    color: #4bb955;
				margin: 5px 0 3px 0;
				font-weight: bold;
				font-size: 1.3em;
				text-transform: inherit;
				margin-bottom: 10px;
			}
			.change-quality-element {
				border: 5px solid #4bb955;
				border-radius: 5px;
				background: #fff;
				padding: 15px;
				margin-top: 20px;
/*				display: none;*/
			}
			.quantity-select-element {
				background: #4bb955;
				border-radius: 5px;
				padding: 15px;
				margin: 16px 0 0 0;
				color: #fff;
			}
			.quantity-select-element select {
				width: 100%;
				padding: 10px;
			}
			.element-slect-delivery-1 .select-heading .element-quantity {
				display: flex;
				align-items: center;
				gap: 10px;
			}
			.element-slect-delivery-1 {
				border: 5px solid #d2d2bd;
				border-radius: 5px;
				background: #fff;
				padding: 10px;
			}
			.date-element1 {
				padding: 40px;
				background: #eaebe4;
				margin: 0 0 30px 0;
				border-bottom: 1px solid #bbb;
				text-align: unset;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20px;
				position: relative;
				flex-direction: column;
			}
			.date-element1::before {
			    content: "";
			    background-image: url(http://localhost/seammath/wp-content/uploads/2024/03/feature-arrow-rednew.png);
			    position: absolute;
			    width: 100%;
			    height: 100%;
			    background-repeat: no-repeat;
			    left: -18px;
			}
			.calender {
				width: 100px;
				text-align: center;
				padding: 0px;
				float: left;
				width: 80px;
				text-align: center;
				border: 1px solid #bbb;
				border-radius: 5px;
				height: 85px;
			}
			.calender h4 {
				background: #319B3A;
				color: #fff;
				font-size: 18px;
				padding: 7px;
				margin: 0;
			}
			.calender h5 {
				background: #ebebd3;
				width: 100%;
				display: block;
				font-size: 2.1em;
				font-weight: bold;
				padding: 7px 0 7px 0;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				box-shadow: inset 0 0 20px #bbb;
				line-height: 1;
			}
			.f-element-wrapper {
			    display: block;
			    gap: 20px;
			    width: 100%;
			    width: 260px;
			}
			.calender-wrapper-content-element h3 {
				margin: 0 0 3% 0;
				font-size: 1.2em;
				font-weight: bold;
				color: #555;
			}
			.calender-wrapper-content-element h5 {
				color: #4bb955;
				font-weight: bold;
				font-size: 1.4em;
				text-shadow: 1px 1px 1px #fff;
			}
			.calender-wrapper-content-element small {
				display: block;
				color: #222;
				font-size: 0.6em;
				line-height: 1;
			}
			.calender-wrapper-content-element h4 {
				color: #000000;
				font-weight: bold;
				font-size: 1em;
				text-shadow: 1px 1px 1px #fff;
				margin-bottom: 0;
			}
			.delivery-details-sec {
			    border: 5px solid #d2d2bd;
			    border-radius: 5px;
			    background: #fff;
   				padding: 15px;
			}
			.delivery-details-sec h4.del-head {
			    color: #4bb955;
			    margin: 5px 0 3px 0;
			    font-weight: bold;
			    font-size: 1.9em;
			    text-transform: inherit;
			    margin-bottom: 10px;
			}

			.delivery-details-sec .delivery-add-form {
			    padding: 40px;
			    background: #eaebe4;
			    margin: 0 0 30px 0;
			    border-bottom: 1px solid #bbb;
			    text-align: unset;
			    display: flex;
			    align-items: normal;
			    justify-content: normal;
			    margin-top: 20px;
			    position: relative;
			    flex-direction: column;
			}
			.del-form div {
			    width: 45%;
			    display: inline-block;
			    padding: 10px 30px 0 0;
			}

			.del-form .add-div {
			    width: 100%;
			    padding: 0 130px 0px 0;
			    display: block;
			}


			.del-form input[type="submit"] {
			    display: block;
			    margin-top: 25px;
			}
			.success-message {
		        display: none;
		        margin-top: 20px;
		        padding: 20px;
		        background-color: #dff0d8;
		        border-radius: 5px;
		        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		    }
			.colorh4{
				color: #4bb955 !important;
			}
			.para{
				padding: 3px;
			}
		     #shipping-form {
		        display: block;
		    }
		    #shipping-details {
		        display: none;
				padding: 60px;
		    }
			#billing-details {
		        display: none;
				padding: 60px;
		    }
			#order-details {
		        display: none;
				padding: 60px;
		    }
			.postcode-inputs {
				display: flex; /* Use flexbox to align items horizontally */
				align-items: center; /* Align items vertically in the center */
				gap: 5px; /* Adjust the gap between the two inputs */
			}
			#zonecode{
				pointer-events: none;
			}
			.postcode-div{
				margin: 20px 0!important;
				margin-bottom: 35px!important;
			}
		
			.postcode-inputs input {
				width: 50px; /* Adjust the width of each input field */
				padding: 5px; /* Adjust padding for better spacing */
			}
		    .hiddenbtn {
/*		        display: none;*/
				opacity: 0;
		    }
		   a#hiddenButton {color: #fff;}

			.guest-check {
			    width: 30%;
			    font-size: 18px;
			    color: black;
			}

			.guest-check input#showButtonCheckbox {
			    margin-right: 10px;
			}

			h2.grey-block-title-fixed {
				position: absolute;
				bottom: 0;
			}
			h2.grey-block-title-fixed {
				position: absolute;
				bottom: -20px;
				margin: 0 auto;
				width: 220px;
				background: #535151;
				color: #fff;
				font-size: 1.1em;
				text-align: center;
				padding: 10px 0;
				font-weight: bold;
				z-index: 11;
			}
			/*  */
			:root {
				--card-line-height: 1.2em;
				--card-padding: 1em;
				--card-radius: 0.5em;
				--color-green: #558309;
				--color-gray: #e2ebf6;
				--color-dark-gray: #c4d1e1;
				--radio-border-width: 2px;
				--radio-size: 1.5em;
			}
			.grid-wrapper .card {
				background-color: #fff;
				border-radius: var(--card-radius);
				position: relative;
				height: unset !important;
				margin-right: 0 !important;
				border: none;
			}
			.grid-wrapper .card:hover {
				box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
			}

			.grid-wrapper .radio {
				font-size: inherit;
				margin: 0;
				position: absolute;
				right: calc(var(--card-padding) + var(--radio-border-width));
				top: calc(var(--card-padding) + var(--radio-border-width));
			}

			@supports (-webkit-appearance: none) or (-moz-appearance: none) {
				.grid-wrapper .radio {
					-webkit-appearance: none;
					-moz-appearance: none;
					background: #fff;
					border: var(--radio-border-width) solid var(--color-gray);
					border-radius: 50%;
					cursor: pointer;
					height: var(--radio-size);
					outline: none;
					transition: background 0.2s ease-out, border-color 0.2s ease-out;
					width: var(--radio-size);
					display: none;
				}
				.grid-wrapper .radio::after {
					border: var(--radio-border-width) solid #fff;
					border-top: 0;
					border-left: 0;
					content: "";
					display: block;
					height: 0.75rem;
					left: 25%;
					position: absolute;
					top: 50%;
					transform: rotate(45deg) translate(-50%, -50%);
					width: 0.375rem;
				}
				.grid-wrapper .radio:checked {
					background: #662d91;
					border-color: #fff;
				}
				.grid-wrapper .card:hover .radio {
					border-color: var(--color-dark-gray);
				}
				.grid-wrapper .card:hover .radio:checked {
					border-color: var(--color-green);
				}

				.cheapprice .radio {
					-webkit-appearance: none;
					-moz-appearance: none;
					background: #fff;
					border: var(--radio-border-width) solid var(--color-gray);
					border-radius: 50%;
					cursor: pointer;
					height: var(--radio-size);
					outline: none;
					transition: background 0.2s ease-out, border-color 0.2s ease-out;
					width: var(--radio-size);
					display: none;
				}
				.cheapprice .radio::after {
					border: var(--radio-border-width) solid #fff;
					border-top: 0;
					border-left: 0;
					content: "";
					display: block;
					height: 0.75rem;
					left: 25%;
					position: absolute;
					top: 50%;
					transform: rotate(45deg) translate(-50%, -50%);
					width: 0.375rem;
				}
				.cheapprice .radio:checked {
					background: #662d91;
					border-color: #fff;
				}
				.cheapprice .card:hover .radio {
					border-color: var(--color-dark-gray);
				}
				.cheapprice .card:hover .radio:checked {
					border-color: var(--color-green);
				}
			}
			.cheapprice label.card {
			    background: transparent;
			    border: none;
				}
			.grid-wrapper .plan-details {
			    cursor: pointer;
			    display: flex;
			    padding: 10px;
			    transition: border-color 0.2s ease-out;
			    gap: 13px;
			    border: 3px solid #4bb95500;
			    border-radius: 5px;
			}
			.grid-wrapper .card:hover .plan-details {
				border-color: var(--color-dark-gray);
			}

			.grid-wrapper .radio:checked ~ .plan-details {
				border: 3px solid #4bb955;
				border-radius: 5px;
			}
			.grid-wrapper .radio:checked ~ .plan-details .card-imgs {
				background-color: #fff !important;
			}
			.grid-wrapper .radio:focus ~ .plan-details {
				box-shadow: 0 0 0 2px var(--color-dark-gray);
			}

			.grid-wrapper .radio:disabled ~ .plan-details {
				color: var(--color-dark-gray);
				cursor: default;
			}

			.grid-wrapper .radio:disabled ~ .plan-details .plan-type {
				color: var(--color-dark-gray);
			}

			.grid-wrapper .card:hover .radio:disabled ~ .plan-details {
				border-color: var(--color-gray);
				box-shadow: none;
			}

			.grid-wrapper .card:hover .radio:disabled {
				border-color: var(--color-gray);
			}

/*			-----------*/

			.cheapprice .plan-details {
			    cursor: pointer;
			    display: flex;
			    padding: 10px;
			    transition: border-color 0.2s ease-out;
			    gap: 13px;
			    border: 3px solid #4bb95500;
			    border-radius: 5px;
			}
			.cheapprice .card:hover .plan-details {
				border-color: var(--color-dark-gray);
				box-shadow: 0px 0px 10px #000;
			}
			.cheapprice .radio:checked ~ .plan-details {
				border: 3px solid #4bb955;
				border-radius: 5px;
			}
			.cheapprice .radio:checked ~ .plan-details .card-imgs {
				background-color: #fff !important;
			}
			.cheapprice .radio:focus ~ .plan-details {
				box-shadow: 0 0 0 2px var(--color-dark-gray);
			}

			.cheapprice .radio:disabled ~ .plan-details {
				color: var(--color-dark-gray);
				cursor: default;
			}

			.cheapprice .radio:disabled ~ .plan-details .plan-type {
				color: var(--color-dark-gray);
			}

			.cheapprice .card:hover .radio:disabled ~ .plan-details {
				border-color: var(--color-gray);
				box-shadow: none;
			}

			.cheapprice .card:hover .radio:disabled {
				border-color: var(--color-gray);
			}
/*			------------*/

			.grid-wrapper .plan-type {
				color: var(--color-green);
				font-size: 1.5rem;
				font-weight: bold;
				line-height: 1em;
			}

			.grid-wrapper .plan-cost {
				font-size: 2.5rem;
				font-weight: bold;
				padding: 0.5rem 0;
			}

			.grid-wrapper .slash {
				font-weight: normal;
			}

			.grid-wrapper .plan-cycle {
				font-size: 2rem;
				font-variant: none;
				border-bottom: none;
				cursor: inherit;
				text-decoration: none;
			}

			.grid-wrapper .hidden-visually {
				border: 0;
				clip: rect(0, 0, 0, 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				white-space: nowrap;
				width: 1px;
			}
			.grid-wrapper {
				margin-top: 69px;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(2, 1fr);
				grid-column-gap: 8px;
				grid-row-gap: 12px;
				margin-bottom: 30px;
			}
			.calender-wrapper-content-element1 h3 {
				margin: 0 0 3% 0;
				font-size: 14px;
				font-weight: bold;
				color: #555;
			}
			.calender-wrapper-content-element1 h5 {
				color: #4bb955;
				font-weight: bold;
				font-size: 14px;
				text-shadow: 1px 1px 1px #fff;
			}
			.calender-wrapper-content-element1 small {
				display: block;
				color: #222;
				font-size: 0.6em;
			}
			.calender-wrapper-content-element1 h4 {
				color: #000000;
				font-weight: bold;
				font-size: 14px;
				text-shadow: 1px 1px 1px #fff;
				margin-bottom: 0;
			}
			.calender1 {
				width: 100px;
				text-align: center;
				padding: 0px;
				float: left;
				width: 80px;
				text-align: center;
				border: 1px solid #bbb;
				border-radius: 5px;
				height: 65px;
			}
			.calender1 h4 {
				background: #319B3A;
				color: #fff;
				font-size: 15px;
				padding: 7px;
				margin: 0;
			}
			.calender1 h5 {
				background: #ebebd3;
				width: 100%;
				display: block;
				font-size: 1.1em;
				font-weight: bold;
				padding: 7px 0 7px 0;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				box-shadow: inset 0 0 20px #bbb;
				line-height: 1;
			}
			.para-element-head h3 {
				font-weight: 700;
				font-size: 25px;
				margin-bottom: 10px;
				margin-top: 20px;
			    color: #4bb955;
			}
			.para-element-head {
				border-top: 1px solid black;
				margin-top: 30px;
			}
			/*  */
			.form-control1 input {
				padding: 6px;
				border-radius: 5px;
				border: 3px solid #ddd;
				background: #ffffff;
				width: 100%;
				max-width: 250px;
			}
			.log-in-now {
				padding: 40px;
				background: #eaebe4;
				margin: 0 0 30px 0;
				border-bottom: 1px solid #bbb;
				text-align: unset;
				display: flex;
				align-items: normal;
				justify-content: normal;
				margin-top: 20px;
				position: relative;
				flex-direction: column;
			}
			.form-control1 label {
				font-size: 14px;
				font-weight: 700;
			}
			.log-in-now h2 {
    color: #4bb955;
    font-size: 25px;
    margin-bottom: 20px;
}
		a.login-anchor-element {
    padding: 10px 30px;
    /* margin: 10px 0 0 0; */
    text-transform: uppercase;
    font-size: 1em;
    background: #4bb955;
    background-image: linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -o-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -moz-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -webkit-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -ms-linear-gradient( bottom, rgb(141, 0, 16) 15%, rgb(226, 2, 50) 79% );
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, rgb(7 82 14)), color-stop(0.79, rgb(75 185 85)) );
    color: #fff !important;
    border: 3px solid #2cdd3c;
    border-radius: 10px;
}
			.forget-element {
				margin-top: 20px;
			}
			a.forget-element-anchor {
				color: #fb0022;
				text-decoration: underline;
				font-weight: 700;
			}
			.element-quantity1 h4 {
    color: #4bb955;
    margin: 5px 0 3px 0;
    font-weight: bold;
    font-size: 1.9em;
    text-transform: inherit;
    margin-bottom: 10px;
}
			.element-slect-delivery-1 .select-heading .element-quantity1 {
				display: flex;
				align-items: center;
				gap: 10px;
			}
			.yellow-content h4 {
				color: #4bb955 !important;
			}
			.yellow-content {
				color: #4bb955 !important;
			}
			.register-button {
    padding: 10px 30px;
    margin: 10px 0 0 0;
    text-transform: uppercase;
    font-size: 1em;
    background: #ed9b2b;
    background-image: linear-gradient( bottom, rgb(197, 91, 12) 15%, rgb(237, 155, 43) 79% );
    background-image: -o-linear-gradient( bottom, rgb(197, 91, 12) 15%, rgb(237, 155, 43) 79% );
    background-image: -moz-linear-gradient( bottom, rgb(197, 91, 12) 15%, rgb(237, 155, 43) 79% );
    background-image: -webkit-linear-gradient( bottom, rgb(197, 91, 12) 15%, rgb(237, 155, 43) 79% );
    background-image: -ms-linear-gradient( bottom, rgb(197, 91, 12) 15%, rgb(237, 155, 43) 79% );
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, rgb(7 82 14)), color-stop(0.79, rgb(75 185 85)) );
    color: #fff !important;
    border: 3px solid #2cdd3c;
    border-radius: 10px;
}
			.select-heading.cont-element {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.select-heading.cont-element a.btn {
   				width: 177px !important;
    			color: #fff !important;
			}
			@media (max-width: 1281px) {
				.parent {
					grid-template-columns: 1fr; /* Change to a single column layout for smaller screens */
					grid-template-rows: auto; /* Adjust as needed based on your content */
					grid-column-gap: 0; /* No gap between columns on smaller screens */
					grid-row-gap: 10px; /* Adjust as needed based on your design */
				}
			}