.page {
    width: 100%;
    min-height: calc(100vh - var(--headerHeight) - 340px);
    display: flex;
    justify-content: center;
}
.page-main {
    width: 100%;
    max-width: var(--rootWidth);
    --page-padding: 50px;
    display: flex;
}
@media only screen and (max-width: 480px) {
    .page-main {
        --page-padding: 20px;
    }
}
.page-main {
    padding: var(--page-padding) var(--padding);
}

.page-box {
    width: 100%;
    display: flex;
}
.page-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.page-h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
    margin-bottom: calc(var(--sectionPadding) / 3);
}
@media only screen and (max-width: 480px) {
    .page-h1 {
        font-size: 18px;
        text-align: center;
    }
}

/* page-grid-box */
.page-grid-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}
.page-grid-box-item {
    border: #DDD 1px solid;
    border-radius: var(--boxRedius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 100px 1fr;
}
.page-grid-box-item-image {
    display: flex;
}
.page-grid-box-item-image-wraper {
    width: 100%;
    height: 0;
    padding-bottom: 110%;
    position: relative;
}
.page-grid-box-item-image-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    inset: 0;
    padding: 10px;
    display: flex;
}
.page-grid-box-item-image-box picture {
    background: unset !important;
}
.page-grid-box-item-info {
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-grid-box-item-heading {
    font-size: 18px;
    font-weight: 600;
    color: #555;
}
.page-grid-box-item:hover {
    border-color: #000;
}
.page-grid-box-item:hover .page-grid-box-item-heading {
    color: #000;
}
@media only screen and (max-width: 480px){
    .page-grid-box {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .page-grid-box-item-heading {
        font-size: 14px;
        color: #000;
    }
}

.page-grid-link {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}
.page-grid-link-item {
    height: 120px;
    border: #DDD 1px solid;
    border-radius: var(--boxRedius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-grid-link-item h2 {
    font-size: 18px;
    font-weight: 600;
    color: #555;
}
.page-grid-link-item:hover {
    border-color: #000;
}
.page-grid-link-item:hover h2 {
    color: #000;
}


/*----contact-us----*/
.contactus-top {
    float: left;
    margin-top: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(33.33333333% - 20px));
    grid-gap: 30px;
}
.contactus-top-item {
    padding: 20px;
    border: #fafafa 1px solid;
    background: #fafafa;
    border-radius: 6px;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.contactus-top-item i {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contactus-form {
    float: left;
    width: 100%;
    margin-top: 30px;
}
.contactus-form h2 {
    font-family: sf-compact-text-bold;
    font-size: 16px;
    font-weight: 600;
}
.contactus-form-title {
    width: 100%;
    font-size: 13px;
    padding-top: 10px;
}
.contactus-form-box {
    width: 100%;
    margin-top: 20px;
}
.contact-input {
	float: left;
	width: 100%;
	display: flex;
    gap: 20px;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.contact-item {
    width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
    flex-wrap: nowrap;
}
.contact-item label, .contact-textarea label {
    font-family: sf-compact-text-bold;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}
.contact-item input, .contact-textarea textarea {
	width: 100%;
	height: 40px;
	border: #fafafa 1px solid;
    background: #fafafa;
    border-radius: 6px;
	outline: none;
	color: #000;
	padding: 10px;
	margin-top: 10px;
}
.contact-item input:focus, .contact-textarea textarea:focus {
	border-color: var(--buttonFocusBorderColor);
    -webkit-box-shadow: var(--buttonFocusShadow);
    box-shadow: var(--buttonFocusShadow);
}
.contact-textarea {
	float: left;
	width: 100%;
	margin-top: 30px;
}
.contact-textarea textarea {
	width: 100% !important;
	height: 150px;
	font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
}
.contact-submit {
	float: left;
	width: 200px;
	background: var(--buttonBackgroundColor);
	color: var(--buttonFontColor);
    border-radius: 6px;
	margin-top: 30px;
}

@media only screen and (max-width: 768px){
    .contactus-top {
        grid-template-columns: repeat(auto-fill, calc(50% - 10px));
        grid-gap: 20px;
    }
	.contact-input {
		flex-direction: column;
	}
	.contact-item {
		margin-bottom: 20px;
	}
	.contact-item:last-child {
		margin: 0;
	}
}
@media only screen and (max-width: 500px){
    .contactus-top {
        grid-template-columns: repeat(auto-fill, 100%);
    }
	.contact-main {
		padding: 25px;
	}
	.contact-submit {
		width: 100%;
	}
}

/*--------------trackorder--------------------------------*/
.trackorder {
    float: left;
    width: 100%;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.trackorder-head {
    width: 100%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trackorder-head i {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.trackorder-head span {
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
}
.trackorder-form {
    width: 100%;
    max-width: 320px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.trackorder-form-item {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.trackorder-form-item input {
    display: inline-block;
    width: 100%;
    height: 46px;
    border: #fafafa 1px solid;
    background: #fafafa;
    border-radius: 6px;
    padding: 0 20px;
    font-size: 14px;
    color: #333;
}
.trackorder-form-item input::-webkit-input-placeholder {
    color: #999;
}
.trackorder-form-item input:focus {
    border: var(--buttonFocusBorderColor) 1px solid;
    box-shadow: var(--buttonFocusShadow);
}
.trackorder-btn {
    display: inline-block;
    width: 100%;
    height: 46px;
    background: var(--buttonBackgroundColor);
    color: var(--buttonFontColor);
    border-radius: 4px;
}
.trackorder-btn:hover {
    box-shadow: var(--buttonFocusShadow);
}
.trackorder-btn .button-text span {
    font-family: 'sf-compact-text-medium';
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
}

.trackorder-return {
    width: 100%;
    padding: 15px;
    background: #EEE;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
    display: none;
}

@media only screen and (max-width: 330px){
    .trackorder {
        padding: 30px 15px;
    }
}

.return {
    float: left;
    width: 100%;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.return-head {
    width: 100%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.return-head i {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.return-head span {
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
}
.return-form {
    width: 100%;
    max-width: 320px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.return-form-item {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.return-form-item input,.return-form-item textarea {
    display: inline-block;
    width: 100%;
    height: 46px;
    border: #fafafa 1px solid;
    background: #fafafa;
    border-radius: 6px;
    padding: 0 20px;
    font-size: 14px;
    color: #333;
}
.return-form-item textarea {
    height: 200px;
    padding: 20px;
}
.return-form-item input::-webkit-input-placeholder, .return-form-item textarea::-webkit-input-placeholder {
    color: #333;
    font-family: sf-compact-text;
    font-size: 14px;
}
.return-form-item input:focus, .return-form-item textarea:focus {
    border: var(--buttonFocusBorderColor) 1px solid;
    box-shadow: var(--buttonFocusShadow);
}
.return-btn {
    display: inline-block;
    width: 100%;
    height: 46px;
    background: var(--buttonBackgroundColor);
    color: var(--buttonFontColor);
    border-radius: 4px;
}
.return-btn:hover {
    box-shadow: var(--buttonFocusShadow);
}
.return-btn .button-text span {
    font-family: 'sf-compact-text-medium';
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
}
.return-return {
    width: 100%;
    padding: 15px;
    background: #EEE;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
    display: none;
}
@media only screen and (max-width: 330px){
    .return {
        padding: 30px 15px;
    }
}

.pointsprogram {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.pointsprogram h1 {
    font-size: 36px;
    font-weight: 600;
    color: #000;
}
.pointsprogram h2 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin-top: 20px;
}
.pointsprogram h3 {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-top: 20px;
}
.pointsprogram p {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-top: 10px;
}