/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('../fonts/inter/stylesheet.css');

/* #Site Styles
================================================== */
:root {
	--width-base: 1216px;
	--font-size-base: 14px;
	--font-family-base: 'Inter', sans-serif;
	--font-family-icon: 'icomoon';
	--lineheight-base: 1.7;
	--color-white: #fff;
	--color-black: #000;
	--color-blue: #004dff;
	--color-gray: #404466;
	--color-light-gray: #7c80a2;
	--color-light: #f1f3f6;
	--color-light-blue: #e1edff;
	--color-light-blue-100: #ecf3fb;
	--color-light-blue-200: #bed6ff;
	--color-dark-blue: #0012ba;
	--color-orange: #fd8c47;
	--heading-lineheight: 1.4;
	--font-size-h1: 32px;
	--font-size-h2: 24px;
	--font-size-h3: 22px;
	--font-size-h4: 20px;
	--font-size-h5: 18px;
	--font-size-h6: 16px;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--w-100: 100%;
	--h-100: 100%;
	--input-height: 40px;
	--border-radius: 8px;
	--base-duration: all 0.3s;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--lineheight-base); color: var(--color-gray); }
body { background: var(--color-light-blue); }
label { margin-bottom: 2px; display: inline-block; color: var(--color-light-gray); }
label span { color: var(--color-gray); }
input,
select,
textarea { padding: 8px 12px; width: var(--w-100); height: 48px; font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-light-gray); border: 0; border-radius: var(--border-radius); background-color: var(--color-light); }
select { --webkit-appearance: none; appearance: none; cursor: pointer; }
input::placeholder,
textarea::placeholder { color: var(--color-light-gray); }
input[type='password'] { padding-right: 38px; }
img { display: block; max-width: var(--w-100); border: 0; }
ul,
li { list-style: none; }
a { color: var(--color-blue); }
p { margin-bottom: 18px; }
:focus { outline: none; }
h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 16px; font-family: var(--font-family-base); font-weight: var(--font-weight-medium); line-height: var(--heading-lineheight); }
h1 { font-size: 24px; }
h2 { font-size: 21px; }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: 16px; }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }


/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.centered { padding-right: 15px; padding-left: 15px; }
.button { padding: 16px 24px; display: inline-block; font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-decoration: none; color: var(--color-white); border: 0; background-color: var(--color-blue); transition: var(--base-duration); cursor: pointer; }
.button:focus,
.button:hover { background-color: var(--color-dark-blue); }
.button.secondary { color: var(--color-blue); background-color: var(--color-light-blue); }
.button.secondary:focus,
.button.secondary:hover { color: var(--color-white); background-color: var(--color-blue); }
.form-field { margin-bottom: 8px; position: relative; }
.form-field.inner { margin-top: 0; }
.custom-select-arrow { background: var(--color-light) url('../images/select-arrow.svg') no-repeat center right 10px; }
.form-field .icon { position: absolute; top: 11px; right: 12px; }
.shape-1,
.shape-2,
.shape-3,
.shape-4,
.shape-5,
.shape-6,
.shape-7,
.shape-8,
.shape-9,
.shape-10,
.shape-11,
.shape-12 { position: absolute; width: 0; height: 0; border-style: solid; transform: rotate(0deg); pointer-events: none; }
.shape-1 { top: 0; left: 0; border-color: var(--color-light-blue) transparent transparent transparent; border-width: 16px 16px 0 0; }
.shape-2 { top: 0; right: 0; border-color: transparent var(--color-light-blue) transparent transparent; border-width: 0 16px 16px 0; }
.shape-3 { right: 0; bottom: 0; border-color: transparent transparent var(--color-light-blue) transparent; border-width: 0 0 16px 16px; }
.shape-4 { bottom: 0; left: 0; border-color: transparent transparent transparent var(--color-light-blue); border-width: 16px 0 0 16px; }
.shape-5 { top: 0; left: 0; border-color: var(--color-white) transparent transparent transparent; border-width: 16px 16px 0 0; }
.shape-6 { top: 0; right: 0; border-color: transparent var(--color-white) transparent transparent; border-width: 0 16px 16px 0; }
.shape-7 { right: 0; bottom: 0; border-color: transparent transparent var(--color-white) transparent; border-width: 0 0 16px 16px; }
.shape-8 { bottom: 0; left: 0; border-color: transparent transparent transparent var(--color-white); border-width: 16px 0 0 16px; }
.shape-9 { top: 0; left: 0; border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; border-width: 16px 16px 0 0; }
.shape-10 { top: 0; right: 0; border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent; border-width: 0 16px 16px 0; }
.shape-11 { right: 0; bottom: 0; border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent; border-width: 0 0 16px 16px; }
.shape-12 { bottom: 0; left: 0; border-color: transparent transparent transparent rgba(0, 0, 0, 0.9); border-width: 16px 0 0 16px; }

/* ### wrapper ### */
.wrapper { position: relative; display: block; width: var(--w-100); min-height: 100%; overflow: hidden; }


/* ### header container ### */
header { padding-top: 15px; padding-bottom: 8px; position: relative; width: var(--w-100); }
.header { display: flex; align-items: center; }
header .left { margin-right: 8px; padding: 11px 25px; position: relative; z-index: 3; display: flex; align-items: center; width: calc(100% - 83px); background-color: var(--color-white););
background-repeat: no-repeat;
background-position: calc(100% - 0px) 2px; /* Adjust 20px and 30px as needed */
 }

 
 
header .logo img { max-width: 133px; height: 44px; }



/* ### mobile menu ### */
.mobileMenu { position: absolute; top: 15px; right: 15px; z-index: 15; display: block; width: 75px; height: 66px; background-color: var(--color-white); transition: 0.2s; cursor: pointer; }
.mobileMenu span { position: absolute; top: 50%; left: 50%; display: block; width: 24px; height: 4px; text-indent: -9999px; background: var(--color-blue); transform: translate(-50%, -50%); transition: 0.2s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 4px; background-color: var(--color-blue); transition-duration: 0.2s, 0.2s; content: ''; }
.mobileMenu span:before { top: -8px; }
.mobileMenu span:after { bottom: -8px; }
.mobileMenu.active span { background: none; }
.mobileMenu.active span:before,
.mobileMenu.active span:after { background-color: var(--color-blue); transition-delay: 0s, 0.2s; }
.mobileMenu.active span:before { top: 0; transform: rotate(45deg); }
.mobileMenu.active span:after { bottom: 0; transform: rotate(-45deg); }

/* ### menu ### */
.menu { padding: 88px 15px 10px; position: fixed; top: 0; left: 0; z-index: 1; opacity: 0; visibility: hidden; width: var(--w-100); height: 100vh; background: transparent; transition: var(--base-duration); }
.menu.active { opacity: 1; visibility: visible; background-color: var(--color-light-blue); }
.menu ul { padding: 31px; position: relative; background-color: var(--color-white); }
.menu ul > li { margin-right: 15px; margin-bottom: 8px; padding-left: 20px; position: relative; }
.menu ul > li .icon { position: absolute; top: 6px; left: 3px; overflow: hidden; display: inline-block; opacity: 0; visibility: hidden; }
.menu ul > li:hover .icon { opacity: 1; visibility: visible; transition: var(--base-duration); }
.menu ul > li:last-of-type { margin-top: 25px; margin-right: 0; }
.menu ul > li:last-of-type .icon { opacity: 1; visibility: visible; }
.menu ul > li a { padding: 0 5px; font-size: 18px; font-weight: var(--font-weight-regular); text-decoration: none; color: var(--color-gray); transition: var(--base-duration); }
.menu ul > li a:hover { color: var(--color-blue); }


/* ### hero ### */
.hero { margin: 0 -4px; display: flex; flex-wrap: wrap; }
.hero-item-left { padding: 0 4px; order: 2; width: var(--w-100); }
.hero-left { padding: 20px; position: relative; display: flex; justify-content: space-between; height: var(--h-100); background-color: var(--color-white); }
.hero-left h1 span { color: var(--color-blue); }
.hero-item-right { margin-bottom: 8px; padding: 0 4px; width: var(--w-100); }
.hero-right { padding: 25px; position: relative; height: var(--h-100); background-color: var(--color-white); }
.hero-content { margin-bottom: 5px; width: var(--w-100); }
.hero-image { display: none; }
.hero-paragraph-large p { font-size: 16px; }
.hero-paragraph-small { margin-bottom: 0; }
.hero-paragraph-small p { font-size: 14px; color: var(--color-light-gray); }
.hero-right h2 { margin-bottom: 6px; color: var(--color-gray); }
.hero-right p { margin-bottom: 7px; color: var(--color-light-gray); }
.hero-right .button { margin-top: 12px; padding: 20px 24px; }


/* ### card-tab ### */
.card-tab .nav-tab { display: flex; flex-wrap: wrap; justify-content: space-between; }
.card-tab .nav-tab > li { padding-bottom: 9px; position: relative; display: block; width: 50%; font-size: 14px; text-align: center; list-style: none; border-bottom: 3px solid var(--color-light-blue-200); transition: var(--base-duration); cursor: pointer; }
.card-tab .nav-tab > li span { display: none; }
.card-tab.inner .nav-tab > li { display: flex; justify-content: center; width: 33.33%; }
.card-tab .nav-tab > li.active { font-weight: var(--font-weight-medium); color: var(--color-blue); border-bottom: 3px solid var(--color-blue); }
.card-tab .tab-item .tab_content { padding-top: 23px; display: none; }
.card-tab .tab-item.first .tab_content { display: block; }
.card-tab.inner ul { width: var(--w-100); overflow: auto; }
.card-tab .tab-info h4 { margin-bottom: 8px; }
.card-tab .tab-info p { margin-bottom: 23px; }
.card-tab .tab-wrap { margin-bottom: 30px; }
.card-tab .tab-field { margin-bottom: 15px; }
.card-tab .tab-info button { padding: 19px 25px; }

.card-tab .nav-tab > li span { margin-left: 5px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--color-white); border-radius: 50%; background-color: var(--color-orange); }

/* ### Feature ### */
.feature { margin-top: 8px; }
.feature-item { margin-bottom: 8px; padding: 15px 30px; position: relative; display: flex; gap: 25px; align-items: center; background-color: var(--color-white); }
.feature-item-image { width: 42px; }
.feature-item-image img { width: 100%; }
.feature-item-content p { margin-bottom: 0; color: var(--color-light-gray); }
.feature-item-content span { font-weight: var(--font-weight-semibold); color: var(--color-gray); }

/* ### Intro ### */
.intro-left { margin-bottom: 10px; position: relative; line-height: 1.7; background-color: var(--color-white); }
.intro-left-image img { width: 100%; height: 207px; object-fit: cover; }
.intro-image-content { padding: 25px; }
.intro-image-content p { margin-bottom: 15px; }
.intro-right { padding: 25px; position: relative; line-height: 1.7; background-color: var(--color-white); }
.intro-right h2 { margin-bottom: 12px; }
.intro-right p a { text-decoration: none; }
.intro-right p { margin-bottom: 8px; padding: 8px 16px; border-radius: 4px; background-color: var(--color-light-blue); }
.intro-right p span { font-weight: var(--font-weight-semibold); }


/* ### content ### */
.content { margin-bottom: 8px; }
.content-wrap { position: relative; background-color: var(--color-white); }
.content-holder { margin: 0 auto; padding: 28px 25px 14px; max-width: 1012px; }

/* ### info ### */
.info { margin: 0 auto 27px; }
.info-column { margin-bottom: 11px; line-height: 1.7; }
.info-column h2 { margin-bottom: 12px; }
.info.inner { margin-bottom: 0; }
.info.inner .info-column { margin-bottom: 32px; font-size: 14px; }
.info.inner .info-column:last-child { margin-bottom: 0; }
.info.inner .info-column p { margin-bottom: 10px; }
.info-column a:hover { text-decoration: none; color: var(--color-gray); }
.info.show { display: none; }
.info.second { margin-bottom: 25px; }

.info.second .info-column ul > li,
.intro ul > li { margin-bottom: 8px; padding-left: 16px; position: relative; }
.info.second .info-column ul li:before,
.intro ul li:before { position: absolute; top: 4px; left: 0; width: 2px; height: 16px; background-color: #bed6ff; content: ''; }
.info.second .info-column ol { padding-left: 15px; }
.info.second .info-column ol li { margin-bottom: 8px; list-style: unset; }

.info.third { margin-bottom: 25px; }


/* ### image-block ### */
.image-block { margin: 0 auto; position: relative; }
.image-block img {  object-fit: cover; }
.image-text { padding-top: 9px; padding-bottom: 12px; padding-left: 16px; position: relative; font-size: 12px; }
.image-text:before { position: absolute; top: 10px; left: 0; width: 2px; height: 16px; background-color: var(--color-light-blue-200); content: ''; }

/* ### purchase ### */
.purchase { display: none; }

/* ### transaction ### */

/* ### information ### */
.information { margin-bottom: 8px; }
.information-wrap { width: var(--w-100); }
.information-column { padding: 25px 25px 17px; position: relative; background-color: var(--color-white); }


/* .information-column.show { display: none; } */
.information-column.show { margin-top: 7px; }


.information-block { display: flex; flex-wrap: wrap; column-gap: 40px; }
.information-details { padding-top: 2px; }
.information-details span { margin-bottom: 5px; display: block; font-weight: var(--font-weight-medium); }
.information-details address { display: block; font-style: normal; line-height: 1.9; }
.information-links p { margin-bottom: 8px; }
.information-links ul > li { margin-bottom: 4px; }
.information-links ul > li > a { text-decoration: none; }
.information-links ul > li > a:hover { color: var(--color-black); }
.information-block strong { margin-bottom: 11px; display: block; font-weight: var(--font-weight-medium); }
.information-details ul > li { margin-bottom: 11px; }

/* ### faq ### */
.faq { margin-bottom: 8px; }
.faq-wrap { position: relative; background-color: var(--color-white); }
.faq-holder { margin: 0 auto; padding: 24px 25px 18px; width: var(--w-100); max-width: 1012px; }

/* ### card-accordion ## */
.card-accordion h2 { margin-bottom: 7px; padding-bottom: 22px; border-bottom: 2px solid var(--color-light-blue-200); }
.card-accordion-content { padding: 5px 15px  15px 0; display: none; }
.card-accordion-content p { margin-bottom: 11px; }
.card-accordion-title { cursor: pointer; position: relative; }
.card-accordion-title:after { position: absolute; top: 53%; left: 4px; font-family: var(--font-family-icon); font-size: 16px; transform: translateY(-50%); transition: all 0.3s ease; content: '\e906'; }
.card-accordion-title.active:after { content: '\e903'; }
.card-accordion-item { margin-bottom: 6px; padding-bottom: 5px; border-bottom: 2px solid var(--color-light-blue-200); }
.card-accordion-title h4 { margin: 0; padding: 9px 15px 6px 32px; }
.card-accordion-title h6 { margin: 0; padding: 9px 15px 6px 32px; }

/* ### welcome ## */
.welcome { margin-bottom: 8px; }
.welcome-left { margin-bottom: 7px; padding: 26px 25px 25px; position: relative; line-height: 1.7; background-color: var(--color-white); }
.welcome-left p a { font-weight: var(--font-weight-medium); text-decoration: none; }
.welcome-left p a:hover { color: var(--color-black); }
.welcome-btn a:not(:last-of-type) { margin-bottom: 16px; }
.welcome-right { padding: 23px 25px 14px; position: relative; background-color: var(--color-white); }
.welcome-right h2 { margin-bottom: 13px; }
.welcome-right ul > li { margin-bottom: 9px; padding-left: 16px; position: relative; }
.welcome-right ul > li:not(:first-child):before { position: absolute; top: 3px; left: 0; width: 2px; height: 16px; background-color: var(--color-light-blue-200); content: ''; }
.welcome-color { padding: 8px 16px; border-radius: 4px; background-color: var(--color-light-blue); }
.welcome-block { display: flex; }
.welcome-block span { position: absolute; left: 62%; }

/* ### orders ### */
.orders { margin-bottom: 8px; }
.orders-holder { padding: 25px 16px 26px; position: relative; background-color: var(--color-white); }
.orders-table table { width: var(--w-100); overflow: hidden; border-collapse: collapse; border:1px solid #c8c8c8;}
.orders-table table > thead { background-color: var(--color-light-blue); border-bottom: 1px solid #808080;}
.orders-table table > tbody { padding: 50px; text-align: center; background-color: #eff3fc; }
.orders-table table > thead > tr > th { padding: 15px 10px 16px; font-size: 12px; font-weight: var(--font-weight-semibold); text-align: left; border-right: var(--color-light-blue-200) 1px solid; }
.orders-table table > thead > tr > th:last-of-type { border-right: none; }
.orders-table table > tbody > tr:not(:last-of-type) { border-bottom: var(--color-light-blue-200) 1px solid; }
.orders-table table > tbody > tr > td { padding: 15px 10px 16px; font-size: 12px; text-align: left; border-right: var(--color-light-blue-200) 1px solid; }
.orders-table table > tbody > tr > td:last-of-type { border-right: none; }
.orders-table table > tbody > tr > td i { margin-right: 5px; font-size: 15px; color: var(--color-blue); vertical-align: middle; }
.orders-table table > tbody > tr > td a { display: flex; text-decoration: none; }
.orders-table table > tbody > tr > td a:hover { color: var(--color-black); }
.orders-table table > tbody > tr > td a i { font-size: 20px; }
.orders-table .icon-out-icon,
.orders-table .icon-in-icon { font-size: 20px; }
.orders-space { padding: 31px; }
.orders-space p { text-align: center; }
.orders-link { padding-top: 14px; display: flex; space-between; width: 100%;}



.orders-link a { font-weight: var(--font-weight-medium); text-decoration: none; }
.orders-link a:hover { color: var(--color-black); }
.orders-link i { margin-right: 11px; font-size: 18px; vertical-align: middle; }
/* ###  .orders-table span { display: none; } ### */
.order-list-scroll { width: var(--w-100); overflow: auto; }
.order-list-scroll em { display: none; }
.order-scroll { width: var(--w-100); overflow: auto; }
.order-tab-scroll { width: var(--w-100); overflow: auto; }


/* ### footer container ### */
footer { overflow: hidden; margin-top: 8px; margin-bottom: 30px; }
.footer { padding: 27px 25px 29px; position: relative; display: block; background-color: var(--color-white); }
.footer address { margin-bottom: 25px; font-style: normal; }
.footer-item ul { margin: 0 -5px; display: flex; }
.footer-item ul > li { padding: 0 5px; position: relative; }
.footer-item ul > li:after { position: absolute; top: 5px; right: -1px; width: 2px; height: 15px; background-color: var(--color-light-gray); content: ''; }

.footer-item ul > li:last-child:after { display: none; }
.footer-item ul > li a { text-decoration: none; }
.footer p { margin-bottom: 0; }

/* ### popup-btn ### */
.popup { margin-bottom: 8px; }
.popup-wrap { position: relative; background-color: var(--color-white); }
.popup-holder { margin: 0 auto; padding: 24px 25px 18px; display: flex; flex-wrap: wrap; justify-content: center; }
.popup-holder a { margin-bottom: 15px; width: var(--w-100); text-align: center; }

/* ### popup ### */
.lity-container { margin: 0 auto; padding: 100px 0; position: relative; max-width: 604px; }
.lity-content:after { display: none; }
.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited { position: absolute; top: 110px; right: 20px; font-size: 30px; text-transform: uppercase; color: var(--color-gray); text-shadow: unset; }
.dashboard-popup { position: relative; }
.dashboard-holder { padding: 30px; position: relative; background-color: var(--color-white); }
.dashboard-wrap { display: block; }
.dashboard-wrap .button { margin-bottom: 10px; }
.purchase-popup { margin-bottom: 100px; }
.purchase-popup-holder { margin: 0 auto; padding: 22px 24px; position: relative; width: var(--w-100); max-width: 604px; background-color: var(--color-white); }
.purchase-popup h2 { margin-bottom: 14px; }
.purchase-popup-list { margin-bottom: 25px; display: flex; justify-content: space-between; }
.purchase-popup-list li { position: relative; display: flex; align-items: center; font-size: 12px; color: var(--color-light-gray); }
.purchase-popup-list li:not(:last-of-type):after { position: absolute; top: 11px; right: -17px; width: 8px; height: 1px; background-color: var(--color-light-gray); content: ''; }
.purchase-popup-list li span { margin-right: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 12px; font-weight: var(--font-weight-medium); color: var(--color-light-gray); border: 1px solid var(--color-light-gray); border-radius: 50%; }
.purchase-popup-list .active { color: var(--color-black); }
.purchase-popup-list .active span { color: var(--color-blue); border: 1px solid var(--color-blue); }
.purchase-popup-list .activated { color: var(--color-white); border: 1px solid var(--color-gray); background-color: var(--color-gray); }
.purchase-popup h4 { margin-bottom: 8px; }
.purchase-popup p { margin-bottom: 16px; color: var(--color-light-gray); }
.purchase-popup-price { margin-bottom: 18px; padding: 8px 10px 8px 16px; display: flex; border-radius: 4px; background-color: #eff4fc; }
.purchase-popup-price strong { width: 69%; font-weight: var(--font-weight-semibold); }
.purchase-popup form input { margin-bottom: 15px; }
.purchase-popup-bill { margin-bottom: 8px; padding: 16px 10px 8px 16px; border-radius: 4px; background-color: #eff4fc; }
.purchase-popup-bill strong { width: 66.5%; font-weight: var(--font-weight-regular); }
.purchase-popup-bill .color { font-weight: var(--font-weight-semibold); color: var(--color-blue); }
.purchase-popup-total { margin-bottom: 10px; display: flex; }
.purchase-popup-bill em { font-size: 12px; font-style: normal; color: var(--color-light-gray); }
.purchase-popup-total.border { padding-top: 10px; border-top: 1px solid var(--color-light-blue); }
.purchase-popup-total.border strong,
.purchase-popup-total.border span { font-weight: var(--font-weight-semibold); }
.purchase-confirm { padding-top: 8px; }
.purchase-confirm button { margin-bottom: 15px; }
.purchase-confirm.inner p { margin-bottom: 20px; }

/* #Media Queries
================================================== */

@media only screen and (min-width: 479px) {
	.image-block img { width: var(--w-100); height: auto; object-fit: unset; }

	/* .lity-close { top: 30%; right: 12%; transform: translate(-30% , -26.3%); } */
	
	
	
	
}

@media only screen and (min-width: 768px) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 { margin-bottom: 16px; font-family: var(--font-family-base); font-weight: var(--font-weight-medium); line-height: var(--heading-lineheight); }
	h1 { font-size: var(--font-size-h1); }
	h2 { font-size: var(--font-size-h2); }
	h3 { font-size: var(--font-size-h3); }
	h4 { font-size: var(--font-size-h4); }
	h5 { font-size: var(--font-size-h5); }
	h6 { font-size: var(--font-size-h6); }
	input,
	select,
	textarea { height: var(--input-height); }
	.form-field { margin-bottom: 12px; }
	.form-field.inner { margin-top: 16px; }
	.form-field .icon { position: absolute; top: 8px; }








	.hero-left { padding: 20px; }
	.hero-item-left { order: unset; width: 60%; }
	.hero-item-right { margin-bottom: 0; order: unset; width: 40%; }
	.hero-content { margin-bottom: 35px; }
	.hero-paragraph-small { margin-bottom: 60px; }
	.hero-right { padding: 24px 31px 20px 32px; }
	.card-tab.inner { width: var(--w-100); overflow: unset; }
	.card-tab .nav-tab > li span { margin-left: 10px;  }

	.card-tab .tab-wrap { margin-bottom: 16px; display: flex; column-gap: 34px; }
	.card-tab .tab-column { width: 50%; }
	.card-tab .tab-field { margin-bottom: 8px; display: flex; align-items: center; width: var(--w-100); }
	.card-tab .tab-field label { margin-bottom: 0; width: 174px; }
	.card-tab.inner ul { width: auto; }
	.feature-holder { display: grid; grid-template-columns: auto auto; column-gap: 10px; }
	
	
	.intro-left { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.intro-left-image { width: 49.5%; height: 100%; }
	.intro-left-image img { height: 100%; }
	.intro-image-content { padding: 30px; width: 49.5%; }
	.content-holder { padding: 53px 35px; }
	.info { margin: 0 auto 22px; }
	.info-holder { display: grid; grid-template-columns: auto auto; line-height: 1.7; column-gap: 25px; }
	.info-column { margin-bottom: 0; }
	.info-column h2 { margin-bottom: 16px; }
	.info.inner { margin-bottom: 22px; }
	.info.inner .info-holder { column-gap: 25px; }
	.info.inner .info-column { margin-bottom: 0; }
	.info.show { display: block; }
	.info.second .info-holder { grid-template-columns: 48% 48%; column-gap: 40px; }
	.info.third .info-holder { grid-template-columns: 82%; column-gap: 40px; }
	.image-text { padding-top: 17px; }
	.image-text:before { top: 18px; }
	.purchase { margin: 0 auto 69px; padding-top: 37px; position: relative; display: block; width: var(--w-100); max-width: 1012px; background-color: var(--color-light-blue-100); }
	.purchase-image { padding-right: 25px; padding-left: 25px; display: flex; justify-content: center; }
	.purchase-text { padding-top: 17px; padding-left: 16px; position: absolute; font-size: 12px; }
	.purchase-text:before { position: absolute; top: 18px; left: 0; width: 2px; height: 16px; background-color: var(--color-light-blue-200); content: ''; }
	.transaction { margin: 0 auto 69px; position: relative; display: block; width: var(--w-100); max-width: 1012px; }
	.transaction-image { display: flex; justify-content: center; }
	.transaction-text { padding-top: 17px; padding-left: 16px; position: absolute; font-size: 12px; }
	.transaction-text:before { position: absolute; top: 18px; left: 0; width: 2px; height: 16px; background-color: var(--color-light-blue-200); content: ''; }
	.information-holder { display: grid; grid-template-columns: 49% 49%; column-gap: 10px; }
	.information-column { margin-bottom: 10px; padding: 33px 32px 21px; }
	.information-column.show { display: block; margin-top: 0px;}
	.information-block { column-gap: 40px; }
	.card-accordion h2 { padding-bottom: 30px; }
	.card-accordion-content { padding: 5px 15px  15px 43px; }
	.card-accordion-item { margin-bottom: 7px; }
	.card-accordion-title:after { top: 50%; left: 3px; }
	.card-accordion-title h4 { padding: 10px 15px 10px 43px; }
	.card-accordion-title h6 { padding: 10px 15px 10px 43px; }

	.welcome-holder { display: flex; flex-wrap: wrap; justify-content: space-between; }
	.welcome-left { margin-bottom: 0; width: 55%; }
	.welcome-btn a:not(:last-of-type) { margin-right: 15px; }
	.welcome-btn { padding-top: 5px; }
	.welcome-right { width: 44%; }
	.welcome-block span { left: 67%; }
	.orders-holder { padding: 25px 25px 33px; }
	.orders-table table > thead > tr > th { font-size: 14px; }
	.orders-table table > tbody > tr > td { padding: 15px 10px 16px 15px; font-size: 14px; }
	.orders-table .icon-out-icon,
	.orders-table .icon-in-icon { font-size: 28px; }
	.orders-table table > tbody > tr > td i { font-size: 19px; }
	.order-list-scroll em { padding-left: 4px; display: block; font-style: normal; }
	.dashboard-wrap { display: flex; gap: 20px; }
	.footer-item ul > li:nth-child(2):after { display: block; }
	.footer-item ul > li:last-child { display: block; }
	.purchase-popup-holder { padding: 29px 33px; }
	.purchase-popup-list { margin-bottom: 31px; justify-content: unset; }
	.purchase-popup-list li { margin-right: 73px; font-weight: var(--font-weight-medium); }
	.purchase-popup-list li:not(:last-of-type):after { right: -58px; width: 40px; }
	.purchase-popup-list li span { margin-right: 12px; width: 32px; height: 32px; font-size: var(--font-size-base); }
	.purchase-popup-price { margin-bottom: 24px; }
	.purchase-popup-price strong { width: 60%; }
	.purchase-popup form input { margin-bottom: 25px; }
	.purchase-popup p { margin-bottom: 8px; margin-top: 10px;}
	.purchase-popup-bill strong { width: 60%; }
	.purchase-confirm { padding-top: 17px; display: flex; align-items: center; }
	.purchase-confirm button { margin-right: 25px; margin-bottom: 0; }
	.purchase-confirm.inner { padding-top: 8px; display: block; }
	.popup-holder { display: flex; flex-wrap: wrap; justify-content: center; }
	.popup-holder a { margin-right: 15px; margin-bottom: 0; width: auto; text-align: unset; }
 

	.faq-holder { margin: 0 auto; padding: 53px 35px; width: var(--w-100); }
}

@media only screen and (min-width: 992px) {
	.hero-image { display: flex; align-items: end; justify-content: end; width: 50%; }
	.hero-item-left { width: 66.8%; }
	.hero-item-right { width: 33.2%; }
	.hero-content { width: 49%; }
	.hero-left { padding: 33px 0 0 32px; }
	.feature-item { margin-bottom: 8px; padding: 27px 32px; gap: 30px; }
	.intro-holder { display: flex; flex-wrap: wrap; justify-content: space-between; }
	.intro-left { margin-bottom: 0; order: 2; width: 66.25%; }
	.intro-image-content { padding: 25px 20px 5px 32px; }
	.intro-image-content p { margin-bottom: 25px; }
	.intro-right { padding: 31px 33px 25px; order: 1; width: 33%; }
	.info-holder { column-gap: 38px; }
	.info.inner .info-holder { column-gap: 80px; }
	.information-holder { grid-template-columns: 33% 33% 33%; column-gap: 6px; }
	.information-column { margin-bottom: 0; padding: 33px 22px 21px; }
	.information-block { column-gap: 19px; }
	.welcome-left { margin-bottom: 0; padding: 32px 31px 20px; width: 66.4%; }
	.welcome-btn a:not(:last-of-type) { margin-right: 21px; margin-bottom: 0; }
	.welcome-right { padding: 31px 31px 30px; width: 32.9%; }
	.welcome-right ul > li { padding-left: 16px; }
	.orders-table span { display: block; }
	.orders-holder { padding: 25px 31px 33px; }
	
	.orders-table table > tbody > tr > td { padding: 15px 10px 16px 27px; }
	.orders-table table > thead > tr > th { padding: 15px 10px 16px 27px; }

	
	.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.footer address { margin-bottom: 0; }


	.mobileMenu { display: none; }
	.menu { padding: 28px 0; position: relative; display: flex; align-items: center; justify-content: end; opacity: 1; visibility: visible; width: 75%; height: var(--h-100); background-color: var(--color-white); }
	.menu ul { margin-right: 26px; padding: 0; position: unset; display: flex; flex-wrap: wrap; }
	.menu ul > li { margin-bottom: 0; padding-left: 0; }
	.menu ul > li a { font-size: unset; font-weight: var(--font-weight-medium); }
	.menu ul > li:last-of-type { margin-top: 0; margin-right: 0; }
	.menu ul > li .icon { display: none; }
	header { padding-top: 25px; }
	header .left { padding: 12px 0; justify-content: center; width: 25%; background-image: url('../images/blank.png');background-repeat: no-repeat; }
	header .logo img { max-width: 169px; height: 56px; }

}

@media only screen and (min-width: 1199px) {
	.content-holder { padding: 53px 0 47px; }
	.information-column { padding: 33px 32px 21px; }
	.information-block { column-gap: 60px; }
	.welcome-block strong { width: 50%; }
	.welcome-block span { left: 57%; }



}

@media only screen and (min-width: 1024px) {
	header .left { width: 18%; }
	.menu { position: relative; width: 82%; }
}

@media only screen and (min-width: 1280px) {
	.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
	.feature-holder { display: grid; grid-template-columns: auto auto auto auto; column-gap: 10px; }
}


@media only screen and (min-width: 1694px) {
	:root {
		--width-base: 1664px;
	}
	.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
	header .left { padding: 12px 0; }

	.menu { padding: 29px 0; }
	.menu ul { margin-right: 250px; }
}

@media only screen and (max-width: 991px) {
  .intro-holder {
    display: flex;
    flex-direction: column;
  }

  .intro-left {
    order: 2; /* show second */
    margin-bottom: 0;
  }

  .intro-right {
    order: 1; /* show first */
    margin-bottom: 10px; /* preserve spacing under it */
  }
  
  .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000; /* Make sure it stays on top */
      background-color: #e1edff; /* Optional: to prevent transparency */
      width: 100%;
  }

  .wrapper {
      padding-top: 89px; /* Adjust this to match the header height */
  }
}