/*
Theme Name: Ultras
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Ultras is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

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

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 About Page
  7.2 Product Detail
    -Quantity
  7.3 Shop Page & Blog Page
    -Sidebar
    -Pagination
  7.4 Shop List Page
  7.5 Single Product
   -Single Product Information
   -Product Tabs
  7.6 Single Post Page
  7.7 Cart Page
  7.8 Wishlist Page
  7.9 Checkout Page
  7.10 Home2 Page
   -Billboard
   -Video Section
   -Categories
  7.11 Coming Soon Page
  7.12 Login Page
  7.13 Error Page
  7.14 Styles Page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
    /* widths for rows and containers
     */
    --header-height       : 160px;
    --header-height-min   : 80px;
}
/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --header-height : 100px;
        --header-height-min   : 80px;
    }
}
/* Theme Colors */
:root {
    --accent-color       : #8d8d8d;
    --dark-color         : #191919;
    --light-color        : #fff;
    --grey-color         : #dbdbdb;
    --light-grey-color   : #fafafa;
    --primary-color      : #6995B1;
    --light-primary-color   : #eef1f3;
}

/* Fonts */
:root {
    --body-font           : "Arial";
    --heading-font        : "Arial";
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 300;
  line-height: 2;
  color: rgba(255, 255, 248, 0.55);
  margin: 0;
  background-color: rgba(50, 50, 50, 1);
}
body.no-scroll {
    overflow: hidden;
}
a {
  color: var(--dark-color);
  text-decoration: none;
  transition: 0.3s color ease-out;
}
p>a {
  color: var(--primary-color);
}
a.light {
  color: var(--light-color);
}
a:hover {
  text-decoration: none;
  color: var(--primary-color);
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 0;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-top: 5px;
  margin-bottom: 0;
}
ul li, ol li {
  margin-bottom: 5px;
  outline: 0;
}
ul li.active a{
  color: var(--dark-color);
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
dl {
  margin-top: 0;
  margin-bottom: 2rem;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: 0;
}
figure {
  margin: 0;
}
img {
  display: inline-block;
  border: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
::selection {
  background: var(--primary-color);
  color: var(--light-color);
  text-shadow: none;
}
::-moz-selection {
  background: var(--primary-color);
  color: var(--light-color);
  text-shadow: none;
}

::-webkit-input-placeholder {
    color: #7A7A7A; /* WebKit browsers */
}
:-ms-input-placeholder {
    color: #7A7A7A;/* Internet Explorer 10+ */
}

/* Typography */
/*----------------------------------------------*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  line-height: 1.2;
}
h1.light, .h1, h2.light, .h2, h3.light, .h3, h4.light, .h4, h5.light, .h5, h6.light, .h6 {
  color: var(--light-color);
}
h1, h2, h3 {
  margin: 25px 0;
  text-transform: capitalize;
}
h5, h6 {
  letter-spacing: 1px;
}
h1, .h1 {
  font-size: 3em;
  line-height: 1.4;
}
h2, .h2 {
  font-size: 2em;
  line-height: 1.4;
}
h3, .h3 {
  font-size: 1.4em;
  line-height: 1.4;
}
h4, .h4 {
  font-size: 1.1em;
  line-height: 1.4;
}
h5, .h5 {
  font-size: .83em;
  line-height: 1.25;
}
h6, .h6 {
  font-size: .67em;
  line-height: 1.1;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}
p {
   font-family: var(--body-font);
   font-size: 18px;
   line-height: 1.8;
   margin: 0 0 20px 0;
}
p.dark {
    color: var(--dark-color);
}
p.light {
    color: var(--light-color);
}
p:empty {
  display: none;
}
small {
  font-size: 85%;
}
mark {
  background-color: var(--grey-color);
  padding: 0.28rem;
}
dfn, cite, em, i {
  font-style: italic;
}
::placeholder {
    color: var(--grey-color);
}

/*----------------------------------------------*/
/* 2.1 Floating & Alignment */
/*----------------------------------------------*/

.align-left {
  float: left;
  text-align: left;
}
.align-right {
  float: right;
  text-align: right;
}
.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/**::after,*/
.row::after,
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/** Text Align
--------------------------------------------------------------*/
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
.text-lead {
  font-size: 120%;
  line-height: 1.7em;
}
.text-lead strong {
  font-size: 115%;
  font-weight: 500;
}
.text-muted {
  color: rgba(255, 255, 248, 0.55);
  font-size: small;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

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

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 130px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--grey-color);
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; 
}
fieldset {
  padding: 0;
  border-width: 0; 
}
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline;
  margin-left: .5rem;
  font-weight: normal; }

/*------------------------------------------------
/* 2.4 Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }

/*------------------------------------------------
/* 2.5 Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  border-radius: 4px; 
  background-color: var(--accent-color);
  color: var(--light-color);
}
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: normal; 
  }

/*------------------------------------------------
/* 2.6 Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
   }
th:first-child,
td:first-child {
  padding-left: 0; 
  }
th:last-child,
td:last-child {
  padding-right: 0; 
  }

/*------------------------------------------------
/* 2.7 Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
form {
  margin-bottom: 2rem; 
}

/*------------------------------------------------
/* 2.8 Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; 
}
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; 
}
.u-pull-right {
  float: right; 
}
.u-pull-left {
  float: left; 
}
.list-icon i {
  margin-right: 10px;
}
.list-unstyled {
  list-style: none;
}
.txt-fx .letter {
  opacity: 0;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.overflow-hidden {
    overflow: hidden;
}
.hide {
    display: none !important;
}

/* display flex utilities */
.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
  color: aliceblue;
}
.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.justify-content-end {
  -ms-flex-pack: justify !important;
  justify-content: end !important;
}
.justify-content-center {
  -ms-flex-pack: justify !important;
  justify-content: center !important;
}
.justify-content-evenly {
  -ms-flex-pack: justify !important;
  justify-content: space-evenly !important;
}
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}
/* disable selction in section title */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/*------------------------------------------------
/* 2.9 Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* -Row Border
------------------------------------------*/
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-width: 0;
  border-top: 1px solid var(--grey-color); 
}

/* -Zoom Effect
------------------------------------------*/
.zoom-effect {
    position: relative;
    overflow: hidden;
}
.zoom-effect img {
    max-width: 100%;
    -webkit-transition: 0.6s ease-out;
    -moz-transition: 0.6s ease-out;
    transition: 0.6s ease-out;
}
.zoom-effect:hover img {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}
.zoom-effect:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(0,0,0,0.3);
    z-index: 2;
    opacity: 0;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}
.zoom-effect:hover:before {
    opacity: 1;
    cursor: pointer;
}


/*--------------------------------------------------------------
/** 2.10 Buttons
--------------------------------------------------------------*/
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"],
button {
  background-image: none;
  background: var(--dark-color);
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  border: 2px solid transparent;
  border-radius: 0;
  padding: 0.75em 1.5em;
  margin-top: 15px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: var(--light-color);
  z-index: 1;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:hover,
.btn:focus,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="file"]:focus,
input[type="file"]:hover,
button:focus,
button:hover {
  text-decoration: none;
  outline: 0;
}
.light .btn:hover {
  color: var(--light-color);
}
.btn:last-child {
  margin-right: 0;
}
.btn:active,
.btn.btn-outline-light:active,
.btn.btn-outline-dark:active,
.btn.btn-outline-accent:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="file"]:active,
button:active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

/* - Button Sizes
------------------------------------------------------------- */
.btn.btn-small {
  padding: 0.8em 1.8em;
  font-size: 0.65em;
}
.btn.btn-medium {
  padding: 1.1em 3.0em;
  font-size: 1.0em;
}
.btn.btn-large {
  padding: 1.5em 5.5em;
  font-size: 1.3em;
}

/* - Button Shapes
------------------------------------------------------------- */
.btn.btn-rounded,
.btn.btn-rounded::after {
  border-radius: 6px;
}
.btn.btn-pill,
.btn.btn-pill::after {
  border-radius: 2em;
}
/* button outline */
.btn.btn-outline-dark,
.btn.btn-outline-light,
.btn.btn-outline-accent {
  background: transparent;
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-outline-dark:hover::after,
.btn.btn-outline-light:hover::after {
  background-color: transparent;
}
.btn.btn-outline-dark {
  border-color: rgba(0,0,0,1);
  color: var(--dark-color);
}
.btn.btn-outline-dark:hover {
  background: var(--dark-color);
  color: var(--light-color);
}
.btn.btn-outline-accent {
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.btn.btn-outline-accent:hover {
  background: var(--accent-color);
  color: var(--light-color);
}
.btn.btn-outline-light {
  border-color: rgba(255,255,255,0.5);
  color: var(--light-color);
}
.btn.btn-outline-light:hover {
  border-color: rgba(0,0,0,0.5);
  color: var(--dark-color);
}
.btn.btn-outline-primary {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--dark-color);
}
.btn.btn-outline-primary:hover {
  border-color: var(--dark-color);
  color: var(--dark-color) !important;
}
.btn.btn-full {
  display: block;
  margin: .85em 0;
  width: 100%;
  text-align: center;
}

/* - Buttons Color Scheme
------------------------------------------------------------- */
.btn.btn-dark {
  background: var(--dark-color);
  color: var(--light-color);
}
.btn.btn-dark:hover {
  background: var(--primary-color);
}
.btn.btn-light {
  background: var(--light-color);
  color: var(--dark-color);
}
.btn.btn-light:hover {
  background: var(--dark-color);
  color: var(--light-color);
}
.btn.btn-grey {
  background: var(--grey-color);
  color: var(--dark-color);
}
.btn.btn-grey:hover {
  background: var(--primary-color);
  color: var(--light-color);
}
.btn.btn-accent {
  color: var(--light-color);
  background-color: var(--accent-color);
}
.btn.btn-accent:hover {
  color: var(--light-color) !important;
  background-color: var(--primary-color);
}
.btn.btn-primary {
  background: var(--primary-color);
  color: var(--light-color);
}
.btn.btn-primary:hover {
  background-color: var(--dark-color);
  color: var(--light-color);
}

/* - Buttons Aligns
------------------------------------------------------------- */
.btn-left{
  text-align: left;
  display: block;
}
.btn-center{
  text-align: center;
  display: block;
}
.btn-right{
  text-align: right;
  display: block;
}

/* - Buttons With Arrow
------------------------------------------------------------- */
.btn-wrap {
  font-weight: 500;
  text-transform: capitalize;
  width: fit-content;
}
.btn-wrap:hover i.icon.icon-arrow-io {
  transform: translate3d(5px,0,0) rotate(-180deg);
}
.btn-wrap i.icon.icon-arrow-io {
  display: inline-block;
  font-size: 1.4em;
  transform: rotate(-180deg);
  transition: transform 0.3s ease-out;
}

/*----------------------------------------------*/
/* 2.11 Images */
/*----------------------------------------------*/

/*--- Image Dimension
-----------------------------------------------*/
img.video-image,
img.post-image,
img.insta-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}
img.large-image {
    width: 100%;
    height: 660px;
    object-fit: cover;
}
img.small-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
}
img.single-image {
    width: 100%;
    height: 810px;
    object-fit: cover;
}
img.brand-image {
    max-width: 100%;
    height: auto;
    margin: 20px;
}

/*--- Image Shape
-----------------------------------------------*/
img.image-rounded {
   border-radius: 10px;
}
img.image-circle {
   border-radius: 50%;
}

/*----------------------------------------------*/
/* 2.12 Section */
/*-----------------------------------------------------------*/

/* site-banner */
/*----------------------------------------------*/
.site-banner{
  text-align: center;
}
.site-banner h1.page-title{
    font-size: 7.2em;
    font-weight: 800;
    line-height: 1em;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: var(--dark-color);
}
.breadcrumbs a:hover{
  color: var(--accent-color);
}
.breadcrumbs{
  color: var(--accent-color);
}
.breadcrumbs .item{
  text-transform: capitalize;
}
@media screen and (max-width: 1099px) {
  .site-banner h1.page-title{
      font-size: 6em;
  }
}
@media screen and (max-width: 768px) {
  .site-banner h1.page-title{
      font-size: 4.6em;
  }
}
@media screen and (max-width: 600px) {
  .site-banner h1.page-title{
      font-size: 3.2em;
  }
}

/* Hero section
/*----------------------------------------------*/
.hero-section {
    position: relative;
}
.hero-section h2 {
    font-size: 1.8em;
    text-transform: none;
}

/*--- Section Title
-----------------------------------------------*/
/*--- Widget Title
-----------------------------------------------*/
h5.widget-title {
    letter-spacing: 0;
    font-size: 1.3em;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 20px;
}

/*--- Product Title
-----------------------------------------------*/
h2.product-title{
    font-size: 2.6em;
    margin: 0;
}

/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}
.padding-2xlarge {
  padding-top: 15em;
  padding-bottom: 15em;
}

/* no padding */
.no-padding-top {
  padding-top: 0 !important;
}
.no-padding-bottom {
  padding-bottom: 0 !important;
}
.no-gutter {
  padding: 0 !important;
}

/* no padding and margin */
.no-padding {
  padding: 0;
}
.no-margin {
  margin: 0;
}
.no-margin-bottom {
  margin-bottom: 0 !important;
}

/* - Section margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 3em;
  margin-bottom: 3em;
}
.margin-medium {
  margin-top: 4.5em;
  margin-bottom: 4.5em;
}
.margin-large {
  margin-top: 6em;
  margin-bottom: 6em;
}
.margin-xlarge {
  margin-top: 7.5em;
  margin-bottom: 7.5em;
}

@media only screen and (max-width: 768px) {
  .margin-small,
  .margin-medium,
  .margin-large,
  .margin-xlarge {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

/* - Section Bg Colors
--------------------------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}
.bg-accent {
  background-color: var(--accent-color) !important;
}
.bg-grey {
  background-color: var(--grey-color) !important;
}
.bg-dark-grey {
  background-color: var(--dark-grey-color) !important;
}
.bg-light-grey {
  background-color: var(--light-grey-color) !important;
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
.bg-light-primary {
  background-color: var(--light-primary-color) !important;
}

/* - Content Colors
--------------------------------------------------------------*/
.content-light h1, .content-light h2, .content-light h3, .content-light h4, .content-light h5, .content-light h6 {
  color: var(--light-color);
}
.primary-color h1, .primary-color h2, .primary-color h3, .primary-color h4, .primary-color h5, .primary-color h6 {
  color: var(--primary-color);
}
.content-light a,
.content-light {
  color: var(--light-color);
}
.content-light a:hover {
  color: var(--light-color);
}
.content-dark h1, .content-dark h2, .content-dark h3, .content-dark h4, .content-dark h5, .content-dark h6 {
  color: var(--dark-color);
}
.content-dark a,
.content-dark {
  color: var(--dark-color);
}
.content-dark a:hover {
  color: var(--dark-color);
}

/* - Content Border
--------------------------------------------------------------*/
table.border-bottom tr {
    border-bottom: 1px solid rgba(0,0,0,0.125);
}
.content-light table.border-bottom tr {
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.border-top {
   border-top: 1px solid rgba(0,0,0,0.125);
}
.content-light .border-top {
   border-top: 1px solid rgba(255,255,255,0.3);
}
.border-right {
   border-right: 1px solid rgba(0,0,0,0.125);
}
.content-light .border-right {
   border-bottom: 1px solid rgba(255,255,255,0.3);
}
.border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.125);
}
.content-light .border-bottom {
   border-bottom: 1px solid rgba(255,255,255,0.3);
}
.border-left {
   border-left: 1px solid rgba(0,0,0,0.125);
}
.content-light .border-left {
   border-left: 1px solid rgba(255,255,255,0.3);
}

/* - Content Border None
--------------------------------------------------------------*/
.no-border-top {
   border-top: none !important;
}
.no-border-right {
   border-right: none !important;
}
.no-border-bottom {
   border-bottom: none !important;
}
.no-border-left {
   border-left: none !important;
}

/*====================================================================*/
/* 3. EXTENDED TYPOGRAPHY */
/*====================================================================*/
/*----------------------------------------------*/
/* 3.1 Blockquote /Pullquote */
/*----------------------------------------------*/
.single-post .content p:first-child, 
.quote blockquote, blockquote, 
.single-post .content blockquote p, 
.pullquote-right, 
.pullquote-left {
    font-family: var(--heading-font);
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: 2px;
    font-style: normal;
    margin: 0 0 20px;
    padding: 20px 40px;
}
.pullquote-right, .pullquote-left {
  width: 40%;
} 
blockquote cite {
  display: block;
  font-size: 0.8em;
  margin-top: 20px;
  font-style: italic;
}
.pullquote-left {
  float: left;
  margin: 20px 20px 20px 0;
} 
.pullquote-right {
  float: right;
  margin: 20px 0 20px 20px;
}
  
/*----------------------------------------------*/
/* 3.2 Text Highlights */
/*----------------------------------------------*/
.highlight {
  background: var(--primary-color);
  color: var(--light-color);
  padding: 1px 5px;
}

/*====================================================================*/
/* 4. CONTENT ELEMENTS */
/*====================================================================*/

/*--------------------------------------------------------------
/** 4.1 General Tabs
--------------------------------------------------------------*/
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--accent-color);
}
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link {
  color: #999;
  padding: 10px 30px;
  margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
  isolation: isolate;
}
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: 0.25rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #0d6efd;
}
.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}
.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}
.bootstrap-tabs .tab-content {
  padding: 20px 0;
}
.bootstrap-tabs .tab-content > .tab-pane {
  display: none;
}
.bootstrap-tabs .tab-content > .active {
  display: block;
}

/*--------------------------------------------------------------
/** 4.2 Accordions
--------------------------------------------------------------*/
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 0;
  font-size: 1rem;
  color: var(--dark-color);
  text-align: left;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-anchor: none;
  background-color: var(--light-background-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
/*.accordion-button:not(.collapsed)::after {
  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
  transform: rotate(-180deg);
}*/
.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: none;
}
.accordion-header {
  margin: 0;
}
.accordion-item {
  background-color: var(--light-background-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.accordion-body {
  padding: 1rem 1.25rem;
}
.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button {
  border-radius: 0;
}

/*--- Tooltip
-----------------------------------------------*/
.tooltip .tooltip-text {
    width: 120px;
    background-color: var(--primary-color);
    color: var(--light-color);
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: -49px;
    left: -40px;
    z-index: 1;
    padding: 10px 0;
    visibility: hidden;
    border-radius: 20px;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}


/*====================================================================*/
/* 5. BLOG STYLES */
/*====================================================================*/

/* 5.1 Blog Single Post
------------------------------------------*/
/* breadcrumbs */
.breadcrumbs span {
  display: inline-block;
}

/* 5.2 About Author
------------------------------------------*/
.author-post {
  padding-left: 30px;
}
.author-post h4 {
  margin: 0;
  font-weight: 700;
  text-transform: none;
}

/* 5.3 Comments List
------------------------------------------*/
.comment-list .comment-item {
    display: flex;
}
.comment-item .comment-meta {
    display: flex;
    align-items: baseline;
}
.comment-meta span.meta-date {
    font-size: 13px;
    padding-right: 50px;
}
.comments-wrap .child-comments {
  padding-left: 50px;
}
.commentor-image {
  width: 80px;
  height: 80px;
}
/* 5.4 Comments Form
------------------------------------------*/
.comment-respond .comment-form {
  display: flex;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/

/* 6.1 Header
--------------------------------------------------------------*/

/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em #333;
  }
  40% {
    box-shadow: 0 2em 0 0 #333;
  }
}

/* -- Header Top
--------------------------------------------------------------*/
.secondary-nav,
.secondary-nav p {
    line-height: 2.5em;
 }
.secondary-nav li {
    padding-right: 10px;
}
.secondary-nav li:last-child {
    padding-right: 0;
}
.secondary-nav ul,
.secondary-nav li,
.secondary-nav p {
    margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
    .header-contact, .shipping-purchase{
      display: none;
    }
}

/* submenu */
.stellarnav ul ul {
  background: var(--dark-color);
}
.stellarnav ul ul a {
  color: var(--light-color);
}
.stellarnav.desktop li.has-sub a{
  padding-right: 30px;
}
.menu-list a.item-anchor{
  text-transform: capitalize;
}
.menu-list a.item-anchor.active{
  color: var(--primary-color);
}
.menu-list a.item-anchor:hover{
  color: var(--primary-color);
}
.menu-item.has-sub .submenu a.item-anchor{
  padding-right: 15px;
}
.menu-list .submenu a.item-anchor:hover{
  color: var(--light-color);
  background-color: #343434;
}
.menu-list .submenu a.item-anchor.active{
  color: var(--light-color);
  background-color: #343434;
}

/* Search Bar
------------------------------------------------------------- */

/** Search Form
--------------------------------------------------------------*/
.search-form input[type="search"].search-field {
  width: 100%;
  border: 2px solid var(--grey-color);
  transition: ease-in;
  transition-duration: 0.2s;
  border-radius: 50px;
  padding: 10px 40px;
}
.search-form input[type="search"].search-field:focus {
  border: 2px solid var(--dark-color);
}
.search-form button {
  position: absolute;
  top: 6px;
  right: 9px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/** Search Popup
--------------------------------------------------------------*/
.search-popup {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.search-popup.is-visible {
  opacity: 1;
  visibility: visible;
  cursor: -webkit-image-set(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 2x), pointer;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E"), pointer;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.search-popup-container {
  background-color: transparent;
  position: relative;
  top: 50%;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  text-align: center;
  box-shadow: none;
  cursor: default;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.is-visible .search-popup-container {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.search-popup-form {
  position: relative;
  margin: 0 0 3em 0;
}
.search-popup-form .form-control {
  padding: 0 0 .375em 0;
  font-size: 2em;
}
.search-popup-form #search-popup-submit {
  display: none;
}
.search-popup .search-popup-close {
  display: block;
  position: absolute;
  top: 2em;
  right: 2em;
  margin: -0.5em;
  padding: 0.5em;
  line-height: 0;
}
.search-popup .search-popup-close:hover {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.search-popup .search-popup-close i {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  fill: rgba(0,0,0,0.5);
}
.search-popup .search-popup-close:hover i {
  fill: rgba(0,0,0,1);
}
.search-popup .cat-list-title {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 0.6em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.search-popup .cat-list {
  margin: 0;
  list-style-type: none;
}
.search-popup .cat-list-item {
  display: inline-block;
  margin-bottom: 0;
  letter-spacing: 0.015em;
  font-size: 2em;
}
.search-popup .cat-list-item a:hover::after {
  height: 1px;
  opacity: 1;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
.search-popup .cat-list-item::after {
  content: "/";
  padding: 0 5px;
  line-height: 1;
  vertical-align: text-top;
}
.search-popup .cat-list-item:last-child::after {
  display: none;
}

@media only screen and (max-width: 991px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.425em;
  }
}
@media only screen and (max-width: 767px) {
.search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}
@media only screen and (max-width: 575px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.125em;
  }
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}

.search-popup input[type="search"] {
  font-size: 22px;
  height: 60px;
  padding: 26px;
}
.search-popup .search-form button {
  position: absolute;
  top: 0;
  right: 8px;
  margin: 0;
  padding: 15px;
}
.search-popup .search-form button i {
  font-size: 29px;
}

/* - Main Navigation
------------------------------------------------------------- */
#navbar ul.menu-list a {
    color: var(--dark-color);
    font-weight: 500;
    padding-left: 45px;
}
.main-menu .hamburger {
    display: none;
}
.main-menu.stellarnav>ul>li>a {
    padding: 10px 30px;
    font-weight: 500;
    font-size: 17px;
    color: #191919;
}
.stellarnav li a{  
    color: var(--dark-color);
    font-weight: 500;
}
.stellarnav li.has-sub>a:after {
    content: none;
}
.stellarnav .menu-toggle,
.stellarnav.mobile.right .close-menu{
    font-size: 0;
}
.stellarnav .icon-close {
    width: 30px;
    height: 30px;
}
.stellarnav .menu-toggle span.bars span {
    width: 30px;
    height: 3px;
    background: var(--dark-color);
    margin: 0 0 5px;
    transition: 0.3s ease-in;
}
.stellarnav .menu-toggle:hover span.bars span {
    background: var(--primary-color);
}
.stellarnav.mobile.right>ul {
    z-index: 222;
    background-color: var(--dark-color);
}
.stellarnav.mobile i {
    display: none;
}
.stellarnav.mobile ul{
    color: white;
}
.stellarnav.mobile li a{
    color: var(--light-color);
    border-bottom: 1px solid var(--accent-color);
}
.stellarnav.mobile .submenu li a{
    border-bottom: 1px solid #5e5e5e;
}
.stellarnav.mobile .menu-item.has-sub .submenu{
    background-color: var(--light-color);
}
.stellarnav.mobile .submenu a{
    background-color: #343434;
}
.stellarnav.mobile .submenu a.active{
    color: var(--primary-color);
}
.stellarnav .icon-close:after, .stellarnav .icon-close:before{
    width: 30px;
}
.stellarnav a.dd-toggle .icon-plus:after, .stellarnav a.dd-toggle .icon-plus:before {
    border-bottom: solid 3px var(--light-color);
}

/*----- Billboard
--------------------------------------------------------------*/
#billboard {
    position: relative;
}
#billboard .button-prev,
#billboard .button-next{
    font-size: 24px;
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 12px;
    height: fit-content;
    z-index: 2;
    margin: auto;
    padding: 10px;
    background: rgba(255,255,255,0.4);
    color: #191919;
}
#billboard .button-prev{
    left: 0;
}
#billboard .button-next{
    right: 0;
}
#billboard .button-prev:hover,
#billboard .button-next:hover {
    color: var(--light-color);
    background-color: var(--primary-color);
}
#billboard .image-holder img.banner-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.index-myo {
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: black;
}
.main-logo {
  font-size: xx-large;
  font-weight: bold;
  margin-left: -5vw;
}

.image-holder img{
  height: 150px;
  width: 150px;
}

/* layout */

#index-header {
  top: 1vh;
  align-items: center;
  position: fixed;
  z-index: 1000;
  width: 100vw;
  height: 6vh;
  background-color: rgba(100, 100, 100, 0.25);
  display: flex;
  gap: 5vw;
  padding-left: 1vw;
  padding-right: 1vw;
}

#index-header i {
  color: rgba(167, 87, 57, 0.85);
  margin-bottom: auto;
}

.icon-user {
  color: rgba(167, 87, 57, 0.85); /* Set your initial icon color */
  animation: oscillate-icon-color 3s infinite alternate;
}

@keyframes oscillate-icon-color {
  from {
      color: rgba(167, 87, 57, 0.85); /* The first color */
  }
  to {
      color: rgba(255, 255, 248, 1); /* The second color */
  }
}

.expandable-menu {
  position: relative;
  display: inline-block;
}

.menu-icon {
  width: 25px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  padding: 5px;
}

.menu-icon span {
  display: block;
  height: 2px;
  background-color: rgba(167, 87 , 57, 0.85); /* Adjust color as needed */
  border-radius: 3px;
  transition: 0.3s ease-in-out;
}

.menu-items {
  position: absolute;
  top: 55px;
  left: 0;
  background-color: rgba(255, 255, 248, 0.75); /* Adjust background color */
  z-index: 10;
  display: none; /* Initially hidden */
  width: 33vw; /* Adjust width as needed */
  border-radius: 4px;
}

.menu-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-items li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}

.menu-items li a:hover {
  background-color: #ddd; /* Adjust hover background color */
}

.expandable-menu.open .menu-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.expandable-menu.open .menu-icon span:nth-child(2) {
  opacity: 0;
}

.expandable-menu.open .menu-icon span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.expandable-menu.open .menu-items {
  display: block;
}

.maqeurown-logo {
  height: 69px;
  width: auto;
  max-width: 200%;
  margin-left: 0vw;
}

.index-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 5vw;
  margin-left: auto;
}

.profile-button {
  padding: 0px 5px;
  border: 1.5px solid rgba(167, 87, 57, 0.85);
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  color: rgba(167, 87, 57, 0.85);
  background: transparent;
  font-weight: 300;
}

.privacy-policy-page {
  font-size: 14px;
}

.privacy-policy-page strong{
  font-size: 14px;
  font-weight: 600 ;
}

.messages-container {
  position: absolute;
  top: 10vh;
  width: 90vw;
  right: 5vw;
  z-index: 1050;
  background-color: rgba(255, 255, 248, 0.75);
  border-radius: 10px;
  font-size: 14px;
  justify-content: center;
  display: flex;
  padding: 2vh 3vw;
}

.alert-message {
  color: rgb(100, 100, 100);
}

.whatsapp-button {
    /* Fixed position at the bottom-right of the screen */
    position: fixed;
    bottom: 7%;
    right: 10%;
    z-index: 1000;

    /* Basic styling for the button */
    background-color: rgba(167, 87, 57, 1);
    color: white;
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;

    /* Transition properties for smooth animation */
    transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
    width: 40px;
    height: 40px; /* Initial width for icon only */
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides the text initially */

    display: flex;
    align-items: center;
}

.whatsapp-button.expanded {
  width: 217px; /* Expanded width for text and icon */
  border-radius: 40px; /* Change border-radius on hover/expand */
  color: white;
}

.whatsapp-button:hover {
    color: white;
  }

@media (min-width: 768px) {  
.whatsapp-button:hover {
    width: 217px; /* Expanded width for text and icon */
    border-radius: 40px; /* Change border-radius on hover/expand */
    color: white;
  }
}

.whatsapp-button .whatsapp-icon {
    font-size: 21px;
    margin-right: 10px;
}

/* Hide the text initially */
.whatsapp-button .whatsapp-text {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    transition-delay: 0.2s; /* Delay the text fade-in */
    font-size: 14px;
}

/* Show the text when the button is expanded */
.whatsapp-button:hover .whatsapp-text,
.whatsapp-button.expanded .whatsapp-text {
    opacity: 1;
}

/*}
.create
{
  display: block;  
}
#create_front
{
    position: relative;
    top:10ch;
    left: 10ch;
    container-type: inline-size;
}
#front_collar
{   
    position: absolute;
    height: 10ch;
    left: 12.35ch;
    top: 0ch;
}
#front_front
{
    position: absolute;
    top: 2ch;
    left: 8ch;
    height: 30ch;
}
#front_leftSleeve
{
    position: absolute;
    top: 4.0ch;
    left: 26.15ch;
    height: 8ch;
}
#front_rightSleeve
{
    position: absolute;
    top: 4.53ch;
    left: 6.2ch;
    height: 8ch;
}
#collar_options
{
    display: none;
    top: 8ch;
    position: relative;
    container-type: inline-size;
}
#front_collar_option1
{   
    position: absolute;
    height: 5ch;
    left: 2ch;  
    top: 2ch;
}
#front_collar_option2
{   
    position: absolute;
    height: 5ch;
    left: 2ch;  
    top: 8ch;
}
#front_collar_option3
{   
    position: absolute;
    height: 5ch;
    left: 2ch;  
    top: 14ch;
}
#front_collar_option4
{   
    position: absolute;
    height: 5ch;
    left: 2ch;  
    top: 20ch;
}
#front_collar_option5
{   
    position: absolute;
    height: 5ch;
    left: 2ch;  
    top: 26ch;
}
#front_collar_option6
{   
    position: absolute;
    height: 5ch;
    left: 2ch;  
    top: 32ch;
}
#front_collar_option7
{   
    position: absolute;
    left: 0ch;  
    top: 38ch;
}
#front_options
{
    display: none;
    position: relative;
    container-type: inline-size;
}
#front_front_option1
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 2ch;
}
#front_front_option2
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 15ch;
}
#front_front_option3
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 28ch;
}
#front_front_option4
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 41ch;
}
#front_front_option5
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 54ch;
}
#front_front_option6
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 67ch;
}
#front_leftSleeve_options
{
    display: none;
    position: relative;
    container-type: inline-size;
}
#front_leftSleeve_option1
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 2ch;
}
#front_leftSleeve_option2
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 12ch;
}
#front_leftSleeve_option3
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 22ch;
}
#front_leftSleeve_option4
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 32ch;
}
#front_leftSleeve_option5
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 42ch;
}
#front_leftSleeve_option6
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 52ch;
}
#front_leftSleeve_option7
{   
    position: absolute;
    left: 0ch;  
    top: 62ch;
}
#front_rightSleeve_options
{
    display: none;
    position: relative;
    container-type: inline-size;
}
#front_rightSleeve_option1
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 2ch;
}
#front_rightSleeve_option2
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 12ch;
}
#front_rightSleeve_option3
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 22ch;
}
#front_rightSleeve_option4
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 32ch;
}
#front_rightSleeve_option5
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 42ch;
}
#front_rightSleeve_option6
{   
    position: absolute;
    height: 10ch;
    left: 2ch;  
    top: 52ch;
}
#front_rightSleeve_option7
{   
    position: absolute;
    left: 0ch;  
    top: 62ch;
}*/
.none_option
{
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #373B44;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.none_option:hover,
.none_option:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.none_option:active {
  background: var(--color);
  color: #fff;
}
/*Homepage*/
.index {
    display: block;
    justify-content: space-between;
  }

.info-overlay {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  background-color: rgba(167, 87, 57, 0.85);
  color: rgba(255, 255, 248, 0.85);
  padding: 0px;
  z-index: 10;
  text-align: center;
  animation: oscillate-loginOverlayBG-color 3s infinite alternate;
}

.info-overlay p {
  margin: 0 0 0 0;
  font-size: 14px;
}

@keyframes oscillate-loginOverlayBG-color {
  from {
      background-color: rgba(167, 87, 57, 0.85); /* The first color */
  }
  to {
      background-color: rgba(100, 100, 100, 1); /* The second color */
  }
}

.menu-item {
  margin-top: 0ch;
}

.menu-item a {
  font-size: 12px;
  font-weight: 300;
  color: rgba(167, 87, 57, 0.85);
  text-decoration: none;
  padding: 5px;
}

.menu-list {
  line-height: 2.5;
}

.card {
    width: 100%;
    height: auto;
}

.footer-menu-list p {
  display: flex;
  align-items: flex-end;
}

.background-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent scrollbars if the video doesn't perfectly fit */
  z-index: -1; /* Place the video behind other content */
  background: rgba(50, 50, 50, 1);
}

#background-video {
  /* Make the video fill the container while maintaining aspect ratio */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(14px); /* Optional: add a blur effect to the video */
}

#indexFront {
  width: 100%;
  height: auto;
  max-width: 720px;
  /*
  mask-image: url("/static/furnishings/images/cushions/home/videos/indexFrontMask.543820de9dd7.png");
  mask-size: cover; 
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: url("/static/furnishings/images/cushions/home/videos/indexFrontMask.543820de9dd7.png");
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;*/
}

.index-home-content1 {
  display: flex;
  font-weight: 300;
  padding: 5px; top: 50px; position: absolute;
  background: rgba(200, 200, 200, 0.5);
  color: rgb(100, 100, 100);
  border-radius: 5px;
  margin-top: 50px;
  text-align: center;
  justify-content: center;
  z-index: 150;
  }

  .index-home-content2 {
    display: flex;
    font-weight: 300;
    padding: 5px; top: 50px; position: absolute;
    background: rgba(200, 200, 200, 0.5);
    color: rgb(100, 100, 100);
    border-radius: 5px;
    margin-top: 100px;
    text-align: center;
    justify-content: center;
    z-index: 150;
    }
.card_img {
    height: 400px;
    width: 400px;
}

.createCushion_home {
  height: 360px;
  width: auto;
  border-radius: 10px;
}
td {
    width: 150px;
}

.maqeurown-btn {
  padding: 0px 10px;
  background: rgba(100, 100, 100, 0.25);
  color: rgba(167, 87, 57, 0.85);
  border-radius: 4px;
  text-transform: none;
  font-size: 16px;

}

.index-h2-div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 40px;
  background-color: rgba(100, 100, 100, 0.25);
  margin: 0 0 0 0;
  left: 0;
  right: 0;
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom: 20px;
  margin-top: 40px;
}

#inspiration_container {
  border-radius: 4px;
}

.inspiration-image-holder {
  position: relative;
  margin-right: 2vw;
  margin-left: 2vw;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: rgba(100, 100, 100, 0.25);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;*/
  border-radius: 4px;
  width: 96vw;
  max-width: 720px;
  height: 64vw;
  max-height: 480px;
  overflow: hidden;
  /*animation: oscillateBG 6s infinite;*/
}

@keyframes oscillateBG {
    0% {
      background: rgba(100, 100, 100, 0.25);
    }
    50% {
      background: rgba(100, 100, 100, 1);
    }
    100% {
      background: rgba(100, 100, 100, 0.25);
    }
  }

.inspiration-footer {
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  background-color: rgba(100, 100, 100, 0.5);
}

.inspiration-size-info {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 248, 1);
  text-align: center;
  font-family: sans-serif;
  /*animation: oscillateSizeInfo 6s infinite;*/
  background: transparent;
}

@keyframes oscillateSizeInfo {
    0% {
      color: rgba(100, 100, 100, 1);
    }
    50% {
      color: rgba(255, 255, 248, 0.85);
    }
    100% {
      color: rgba(100, 100, 100, 1);
  }
}

.inspiration_cushion_front {
  display: flex;
  position: relative;
  container-type: inline-size;
  margin: auto auto 0 auto;
  max-width: 100vw;
  max-height: 100vw;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: padding-box;
  animation: inspirationZoomEffect 20s infinite alternate ease-in-out;
}

@keyframes inspirationZoomEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.inspiration_cushion_front img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  padding: 10px;;
  object-fit: cover;
  outline: none;
  border: none;
  font-family: 'Arial';
  text-indent: -9999px;
  z-index: 100;
}

@media only screen and (min-width:961px) {
    .index {
        display: flex;
        justify-content: space-between;
      }
      .card {
        width: 25%;
        height: auto;
    }
}

.customer-slideshow-container {
  position: relative;
  max-width: 720px;
  overflow: hidden;
  margin-top: 0px;
}

#slideshow-text {
  color: rgba(100, 100, 100, 0.85);
  font-style: italic;
}

.star-rating {
  color: #FFD700; /* Gold color for stars */
  font-size: 1.2em; /* Adjust size as needed */
  margin-top: 8px;  /* Space above stars */
  margin-bottom: 5px; /* Space below stars */
}

/* Style for the review text */
.review-text {
  font-style: italic;
  color: rgba(255, 255, 248, 0.75); /* Adjust color as needed */
  font-size: 14px; /* Adjust size as needed */
  max-width: 90%; /* Prevent text from becoming too wide */
  margin: 0 auto 10px auto; /* Center block and add bottom margin */
  line-height: 1.4;
  font-weight: 300;
  justify-content: center;
  justify-self: center;
  align-items: center;
  display: flex;
}

.mySlides {
  position: relative;
}

.customer-image-container {

  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}

.mySlides a img {
  animation: zoomIn 10s infinite; /* 5-second zoom animation, loops infinitely */
  transform-origin: center; /* Zoom from the center of the image */
}

@keyframes zoomIn {
  0% {
      transform: scale(1); /* Start at normal size */
  }
  100% {
      transform: scale(1.2); /* Slightly zoom in */
  }
}

.fade {
  animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
  from {opacity: 0.4}
  to {opacity: 1}
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s;
  user-select: none;
  transform: translateY(-50%);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#slideshow-text {
  text-align: center;
  font-size: 12px;
  margin: 10px 0;
}

.prev, .next {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-decoration: none;
  user-select: none;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.blog-index {
  margin-top: 20px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.blog-index h4 {
  font-weight: 500;
  font-size: 18px;
  color: rgba(255, 255, 248, 0.65);
}

.homePage h2 {
  font-weight: 400;
  color: rgba(255, 255, 248, 0.85);
  font-size: 16px;
}

.blog-index p, li {
  font-weight: 300;
  font-size: 12px;
  color: rgba(255, 255, 248, 0.55);
}

.blog-index img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  max-width: 720px;
}

.blog-list-index {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 00px;
}

.blog-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.blog-item p {
  width: 96vw;
}

/* blogHome */

.blog-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -4vh;
}

.blog-item-details {
  width: 90vw
}

.blog-item-details h4 {
  font-weight: 500;
  color: rgb(100, 100, 100);
  font-size: 18px;
  margin-top: 20px;
}

.blog-item-details p {
  font-weight: 300;
  font-size: 12px;
  color: rgb(100, 100, 100);
}

/*blogDetail*/

.blogDetailPage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -4vh;
  width: 100vw;
}

.blogDetailPage h1 {
  font-weight: 500;
  color: rgb(100, 100, 100);
  font-size: 24px;
  width: 96vw;
  text-align: center;
  position: relative;
}

.blogDetailPage h2 {
  font-weight: 500;
  color: rgb(100, 100, 100);
  font-size: 20px;
  width: 96vw;
  text-align: center;
  left: 2vw;
  position: relative;
}

.blogDetailPage p {
  font-weight: 300;
  font-size: 10px;
  color: rgb(100, 100, 100);
  width: 96vw;
  margin-bottom: 0px;
  left: 2vw;
  position: relative;
}

.blog-body {
  width: 96vw;
  margin-top: 20px;
  font-size: 12px;
  color: rgb(100, 100, 100);
  text-align: justify;
  left: 2vw;
}

.blog-sections {
  justify-self: center;
  text-align: center;
  align-items: center;
}

.section-content {
  width: 96vw;
  margin-top: 10px;
  font-size: 12px;
  color: rgb(100, 100, 100);
  left: 2vw;
  margin-bottom: 30px;
  position: relative;
  text-align: justify;
}

/*----- Featured Products Section
--------------------------------------------------------------*/
.product-store .product-item {
    position: relative;
    margin-bottom: 30px;
}
.product-item img.product-image {
    background: var(--light-color);
    border: 1px solid var(--grey-color);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    width: 100%;
}
.product-item .cart-concern {
    background: var(--light-color);
    width: 80%;
    text-align: center;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 300px;
    z-index: 9;
    transition: 0.5s ease-out;
    padding: 20px 30px;
    opacity: 0;
}
.product-item:hover .cart-concern {
    bottom: 280px;
    opacity: 1;
}
i.icon.icon-arrow-io {
    font-size: 12px;
}
.cart-concern .cart-button button {
    background: none;
    color: var(--dark-color);
    height: auto;
    padding: 0;
    margin: 0;
}
.cart-concern .cart-button button i.icon {
    color: var(--dark-color);
}
.product-item .wishlist-btn i.icon.icon-heart {
    font-size: 20px;
    padding-left: 25px;
}
.product-item h3.product-title {
    font-size: 1.4em;
    margin: 0;
}
.product-item .item-price {
    font-size: 1.8em;
}
.swiper.product-swiper {
    position: relative;
    margin-bottom: 30px;
}
.swiper-pagination {
    width: 100%;
    position: inherit;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}
.swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #E0EAF0;
    opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #7CA2BB;
    position: relative;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #CEDDE7;
    border-radius: 50%;
    top: -6px;
    left: -6px;
}

/*----- Latest Collection Section
--------------------------------------------------------------*/
.product-collection .collection-item {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}
.product-collection .product-entry {
    position: absolute;
    bottom: 30px;
}
.product-collection .left-content .product-entry {
    right: 0;
    bottom: 90px;
}
.product-collection .categories {
    text-transform: uppercase;
}
.product-collection .product-entry h3.item-title {    
    font-size: 4.4em;
    line-height: 1;
    font-weight: 900;
    color: aliceblue;
    background-color: rgb(166, 166, 166);
}
.product-collection .product-entry p {
    width: 100%;
    color: aliceblue;
    background-color: rgb(166, 166, 166);
    font-weight: bold;
}
.product-collection .right-content h3.item-title {
    font-size: 3.2em;
    width: 80%;
    margin: 0;
}
.product-collection .right-content .product-entry {
    left: 60px;
}

@media screen and (max-width: 1200px) {
  #latest-collection .right-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
  }
}
@media screen and (max-width: 991px) {
  #latest-collection .right-content {
      flex-wrap: wrap;
  }
  .product-collection .left-content .product-entry,
  .product-collection .right-content .product-entry {
      left: 0;
      right: 0;
      margin: auto;
      width: 75%;
  }
  .product-collection .left-content h3.item-title {
      font-size: 2.2em;
  }
}
@media screen and (max-width: 767px) {
  .product-collection .left-content .product-entry {
      width: 100%;
  }
}

/*----- Subscribe Section
--------------------------------------------------------------*/
#subscribe .block-text {
    width: 50%;
}
#subscribe p {
    font-size: 1em;
}
#subscribe .subscribe-content {
    width: 45%;
    margin-top: 35px;
}
#subscribe .subscribe-content input[type="text"] {
    width: 100%;
    height: 65px;
    background: var(--light-grey-color);
    border: 1px solid var(--grey-color);
    border-radius: 4px 0 0 4px;
    padding-left: 25px;
    margin-bottom: 0;
}
#subscribe .subscribe-content button {
    font-weight: 700;
    margin: 0;    
}
#subscribe .subscribe-content button:hover {
    background: var(--primary-color);
}

@media screen and (max-width: 1599px) {
  #subscribe .block-text {
      width: 80%;
  }
  #subscribe .subscribe-content {
      width: 60%;
  }
}

@media screen and (max-width: 991px) {
  #subscribe .block-text {
      width: 100%;
  }
  #subscribe .subscribe-content {
      width: 100%;
  }  
  #subscribe .subscribe-content button {
      width: 100%;
      margin-top: 20px;
      padding: 24px 0;
  }
  #subscribe .subscribe-content #form {
      flex-wrap: wrap;
  }
}

/*----- Best selling products Section
--------------------------------------------------------------*/
.tab-content {
    position: relative;
}
[data-tab-content] {
    opacity: 0;
    visibility: hidden;
    display: grid;
    transition: cubic-bezier(0.22, 0.78, 0.71, 1.01);
    transition-duration: 0.8s;
}
.active[data-tab-content] {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.tabs .tab {
    font-weight: 500;
    color: var(--dark-grey-color);
    margin-right: 50px;
    cursor: pointer;
    transition: 0.2s all;
}
.tabs .tab.active,
.tabs .tab:hover {
    color: var(--primary-color);
}

@media screen and (max-width: 991px) {
  #selling-products .tabs {
      flex-wrap: unset;
      overflow-x: scroll;
  }
}

/*----- Testimonials Section
--------------------------------------------------------------*/
#testimonials .container {
    max-width: 1400px;
}
#testimonials .reviews-content {
    position: relative;
}
.review-icon i.icon.icon-right-quote {
    font-size: 9em;
    color: var(--grey-color);
}
#testimonials .testimonial-detail {
    padding-left: 20px;
}
#testimonials .testimonial-detail p {
    font-size: 1.3em;
    color: var(--dark-color);
}
.testimonial-detail .author-detail .name {
    font-weight: 700;
    color: var(--primary-color);
}
#testimonials .swiper-arrows {
    position: absolute;
    left: 0;
}
.swiper-arrows button {
    font-size: 1em;
    font-weight: 600;
    color: var(--dark-grey-color);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px;
    left: 23px;
}
.swiper-arrows i.icon:hover {
    color: var(--primary-color);
}

/*----- Sales Offer Section
--------------------------------------------------------------*/
.product-item .item-price del {
    color: var(--grey-color);
    font-size: 0.6em;
    padding-right: 10px;
}
#flash-sales {
    position: relative;
}
#flash-sales .product-item .discount {
    font-weight: 500;
    color: var(--light-color);
    width: 100px;
    text-align: center;
    background: var(--primary-color);
    position: absolute;
    top: 20px;
    left: 20px;
}

/*----- Shoppify section banner Section
--------------------------------------------------------------*/
.shoppify-section-banner img{
  object-position: top;
}
@media screen and (max-width: 1199px) {
  .shoppify-section-banner img {
      opacity: 0.3;
  }
}

/*----- Quotation Section
--------------------------------------------------------------*/
#quotation blockquote {
    width: 50%;
    margin: 0 auto;
    padding: 0;
}
#quotation q {
    display: block;
    padding: 50px 0;
}
#quotation .author-name {
    font-size: 0.7em;
    font-weight: 600;

}

/*----- Latest Blog Section
--------------------------------------------------------------*/
#latest-blog article.post-item,
#latest-blog .image-holder {
    margin-bottom: 30px;
}
#latest-blog .image-holder {
    border-radius: 4px;
}
#latest-blog .meta-date {
    padding-bottom: 20px;
    margin-right: 30px;
    color: var(--dark-grey-color);
}
#latest-blog .meta-date .meta-day {
    font-size: 4em;
    line-height: 1;
    font-weight: 200;
}
#latest-blog .meta-date .meta-month {
    line-height: 1.4;
    font-weight: 600;
    color: var(--dark-grey-color);
}
#latest-blog h3.post-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}
a.blog-categories {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
}
a.blog-categories:hover{
    color: var(--primary-color);
}
@media screen and (max-width: 1599px) {
  #latest-blog .meta-date {
      margin-right: 15px;
  }
  #latest-blog .meta-date .meta-day {
      font-size: 2.4em;
  }
  #latest-blog h3.post-title {
      font-size: 1.3em;
  }
}

@media screen and (max-width: 991px) {
  #latest-blog .meta-date .meta-day {
      font-size: 3em;
  }
  #latest-blog h3.post-title {
      font-size: 1.5em;
  }
}

/*----- Instagram Section
--------------------------------------------------------------*/
#instagram p {
    font-size: 1.1em;
}
#instagram figure {
    border-radius: 8px;
    position: relative;
    cursor: pointer;
}
#instagram figure i.icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: var(--light-color);
    opacity: 0;
    transition: 0.8s all;
}
#instagram figure:hover i.icon {
    opacity: 1;
}

/*----- Icon Box Section
--------------------------------------------------------------*/
#shipping-information {
    padding-bottom: 100px;
}
#shipping-information .icon-box {
    display: flex;
    align-items: baseline;
    border-right: 1px solid #EAEAEA;
    padding-right: 50px;
    margin-right: 50px;
}
#shipping-information .icon-box:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}
#shipping-information .icon-box i.icon {
    font-size: 1.5em;
    color: var(--primary-color);
    padding-right: 15px;
}
.icon-box h4.block-title {
    line-height: 1.2;
    font-weight: 400;
    margin: 20px 0;
}

/*----- Footer Section
--------------------------------------------------------------*/
#footer {
  position: static;
  display: flex;
}

#footer .container {
  background: rgba(100, 100, 100, 0.25);
  position: relative;
  width: 100vw;
  right: 0vw;
  left: 0vw;
  margin-bottom: 00px;
  border-radius: 0px;
  display: flex;
  justify-content: space-between;
}

#footer .footer-menu {
    margin-right: 50px;
}
.footer-menu ul.menu-list a {
    color: var(--accent-color);
    font-size: 12px;
    color: rgba(167, 88, 57, 0.85);
}
.footer-menu ul.menu-list a:hover {
    color: var(--primary-color);
}
.footer-menu a.email {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: 600;
}
.social-links {
  position: relative;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 15px;
    text-align: right;
}

.social-links i {
  color: rgba(167, 88, 57, 0.85);
  font-size: 16px;
}

.social-links p {
  font-size: 16px;
  color: rgba(167, 88, 57, 0.85);
  font-weight: 400;
  margin-bottom: 0px;
}
.social-links a {
  justify-content: right;
  line-height: 0;
}

/*----- Footer Bottom Section
--------------------------------------------------------------*/
.payment-method {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.payment-method img {
    object-fit: contain;
    height: fit-content;
}

/*--------------------------------------------------------------
/* 7. OTHER PAGES 
--------------------------------------------------------------*/

/* 7.1 About Page
--------------------------------------------------------------*/
#about-us .about-image{
    border-radius: 8px;
}
#about-us .detail{
    padding: 0 60px;
}
@media screen and (max-width: 992px) {
  #about-us .detail{
      padding: 0;
  }
}

/* 7.2 Product Detail
--------------------------------------------------------------*/

/* ------ Quantity ------*/
.qty-number .increment-button,
.qty-number .decrement-button{
  background: var(--light-color);
  color: var(--dark-color);
  border: 1px solid var(--grey-color);
  display: flex;
  text-align: center;
  cursor: pointer;
}
.qty-number .increment-button:hover,
.qty-number .decrement-button:hover{
  background: var(--light-grey-color);
}
.qty-number input{
  width: 55px;
  text-align: center;
  margin: 0 10px;
  border-radius: 0;
  border: 1px solid var(--grey-color);
}

/* 7.3 Shop Page & Blog Page
--------------------------------------------------------------*/

/* ------ Sidebar ------*/
.shopify-grid .sidebar .widgets,
.post-grid .sidebar .widgets{
    margin-bottom: 40px;
}
.shopify-grid input[type="text"], 
.post-grid input[type="text"] {
    width: 100%;
    height: 65px;
    background-color: var(--light-grey-color);
    border: 1px solid var(--grey-color);
    border-radius: 4px 0 0 4px;
    padding-left: 25px;
    margin-bottom: 0;
}
.shopify-grid .widget-search-bar .btn,
.post-grid .widget-search-bar .btn{
    margin: 0;
}
.post-grid .card-image{
  margin-bottom: 10px;
}

/* ------ Pagination ------*/
.pagination .page-numbers,
.pagination .pagination-arrow{
  margin: 0 10px;
} 
.pagination .page-numbers {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    color: var(--accent-color);
    padding: 0 10px;
    line-height: 1.4;
    transition: 0.9s all;
    border-radius: 8px;    
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    color: var(--light-color); 
    background-color: var(--primary-color);
}
.pagination i.icon {
    font-size: 1.5em;
}

/** 7.4 Shop List Page
--------------------------------------------------------------*/
.shopify-list .product-detail,
.shopify-list .action-buttons{
  margin-top: 20px;
}
.shopify-list .product-detail p{
  margin-top: 10px;
}

/** 7.5 Single Product
--------------------------------------------------------------*/
.single-product .large-swiper{
  padding-left: 0;
}
.product-preview .swiper-slide {
  padding-bottom: 15px;
  padding-right: 15px;
  transition: cubic-bezier(0.22, 0.78, 0.71, 1.01);
}
.single-product .large-swiper .swiper-slide{
  padding-right: 0;
}
.swiper-slide-thumb-active img{
  border: 1px solid var(--accent-color);
}

/*---- Single Product Information ----------*/
.product-info .item-title{
  margin-right: 20px;
}
.rating-container .rating {
    padding-right: 10px;
    color: var(--dark-color);
    font-size: 1em;
}
.product-info .product-price strong {
    font-size: 1.6em;
    color: var(--primary-color);
    padding-right: 10px;
}
.product-info .select-item{
  margin-right: 20px;
}

/*---- Product Tabs ----------*/
.product-tabs .nav-link {
  color: var(--accent-color);
  font-weight: 600;
}
.nav-tabs .nav-link:focus{
  box-shadow: none;
}
.nav-tabs .nav-link {
  padding: 10px 30px;
  margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
}
.product-tabs button.nav-link.active {
    color: var(--dark-color);
}
.tabs-listing .tab-content {
  padding: 40px 0;
  border-bottom: 1px solid #dee2e6;
}
.tabs-listing .tab-content > .tab-pane {
  display: none;
}
.tabs-listing .tab-content > .active {
  display: block;
}
.product-tabs .review-item{
  width: 50%;
  margin-bottom: 20px;
}
.product-tabs .review-item .image-holder{
  margin-right: 10px;
}
.product-tabs .review-header{
  color: var(--dark-color);
  font-weight: 600;
}
@media screen and (max-width: 991px) {
  .product-tabs .review-item{
    width: 100%;
    flex-wrap: wrap;
  }
  .product-tabs .review-item .image-holder{
    margin-bottom: 10px;
  }
}

/** 7.6 Single Post Page
--------------------------------------------------------------*/
.main-content .post-meta{
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--accent-color);
}
.main-content .feature-image{
    margin-bottom: 20px;
}
.main-content .post-tags li{
    margin-right: 10px;
}
.main-content .element-title{
    margin-right: 10px;
}
#single-post-navigation a{
  flex-direction: column;
}
#single-post-navigation a h3{
  margin: 0;
  transition: all 0.3s ease-in;
}
#single-post-navigation a:hover h3.page-nav-title{
  color: var(--primary-color);
}

/** 7.7 Cart Page
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
  .shopify-cart .cart-header{
    display: none;
  }
}

/** 7.8 Wishlist Page
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
  .wishlist .cart-header{
    display: none;
  }
}

/** 7.9 Checkout Page
--------------------------------------------------------------*/
.checkout-wrap .form-group input.form-control,
.checkout-wrap .form-group select,
.checkout-wrap .form-group textarea{
  width: 100%;
}
.checkout-wrap .form-group .list-group-item{
  align-items: baseline;
}
.checkout-wrap .form-group .list-group-item input{
  margin-right: 4px;
}
.checkout-wrap .form-group .list-group-item p{
  font-weight: 400;
}

/** 7.10 Home2 Page
--------------------------------------------------------------*/

/** Billboard
--------------------------------------------------------------*/
#billboard .two-column-swiper {
    position: relative;
}
#billboard .two-column-swiper .banner-content h1.element-title {
    font-size: 3.7em;
    font-weight: 100;
}
#billboard .two-column-swiper .banner-item{
    display: flex;
    align-items: center;
}
#billboard .two-column-swiper .banner-content{
    text-align: center;
}
#billboard .two-column-swiper .banner-content p {
    width: 80%;
    margin: 0 auto 30px;
}
#billboard .two-column-swiper .banner-content .btn-wrap{
    margin: auto;
}
#billboard .two-column-swiper .swiper-slide{
  opacity: 0;
  transition: ease-in-out;
  transition-duration: 0.9s;
}
#billboard .two-column-swiper .swiper-slide.swiper-slide-active{
  opacity: 1;
}
#billboard .two-column-swiper-slider{
  margin-top: 30px;
}
#billboard .two-column-swiper .button-prev, 
#billboard .two-column-swiper .button-next {
    position: unset;
    font-size: 24px;
    padding: 20px;
    height: fit-content;
    background: rgba(255,255,255,0.4);
    color: #191919;
    margin: 0;
    border: 2px solid var(--dark-color);
}
#billboard .two-column-swiper .button-prev:hover, 
#billboard .two-column-swiper .button-next:hover {
    color: var(--light-color);
    background-color: var(--dark-color);
    border: 2px solid var(--dark-color);
}
#billboard .two-column-swiper .button-prev{
    margin-right: 10px;
}
@media screen and (max-width: 991px) {
  #billboard .two-column-swiper .banner-item{
    display: block;
  }
}

/** Video Section
--------------------------------------------------------------*/
.site-banner {
    position: relative;
}
.video .video-player {
    position: absolute;
}
.video .video-player {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video .video-player i.icon {
    color: #fff;
    font-size: 50px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 600px) {
  .video .video-player img.text-pattern {
      width: 60%;
      display: flex;
      margin: 0 auto;
  }
}

/** Categories
--------------------------------------------------------------*/
section.categories .category-content{
    margin-bottom: 30px;
}
section.categories .category-content a{
    font-size: 1.3em;
    font-weight: 800;
}

/** 7.11 Coming Soon Page
--------------------------------------------------------------*/
#countdown-clock{
    margin: 2% 20%;
}
.coming-soon .time{
  font-size: 60px;
  font-weight: 400;
}
.coming-soon .time span{
  color: var(--dark-color);
}
.coming-soon .time small{
  font-size: 30px;
}
.coming-soon .btn-wrap{
  margin: auto;
}
.coming-soon .subscribe-content{
  margin: auto;
}

/** 7.12 Login Page
--------------------------------------------------------------*/
.login-tabs .tab-pane{
    max-width: 600px;
    margin: auto;
}

/** 7.13 Error Page
--------------------------------------------------------------*/
.error-page {
    position: relative;
}
.error-page img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
.error-page .page-content {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.error-page .page-content h1,
.error-page .page-content p {
    color: var(--light-color);
}
.error-page .page-content .btn-wrap {
    margin: auto;
}

/* 7.14 Styles Page
--------------------------------------------------------------*/
.jarallax.min-height300 {
    min-height: 300px;
}
/* Create page */

.create-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loading-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Prevent scrollbars if the video doesn't perfectly fit */
  background-color: black; /* Or any background you prefer */
  display: none; /* Hidden by default */
  z-index: 9999; /* Ensure it's on top */
}

#loading-video {
  /* Style your video as needed */
  width: 100%; /* Ensure it doesn't overflow the viewport */
  height: 100%; /* Maintain aspect ratio */
  object-fit: cover; /* Cover the entire area */
}

#page-content {
  display: none; /* Hidden initially */
}

.create-div {
  top: 0vh;
  position: fixed;
  z-index: 100;
  width: 100vw;
  height: 55vh;
  box-sizing: border-box;
  overflow: visible;
  background: rgba(50, 50, 50, 1);
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
}

@media (min-width: 768px) {
  .create-div {
  top: 12vh;
  left: 0vw;
  position: relative;
  z-index: 100;
  width: 55vw;
  height: 87vh;
  box-sizing: border-box;
  overflow: visible;
  background: rgba(50, 50, 50, 1);
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -17vh;
  }
}

.preview-container {
  position: absolute;
  top: 34vh;
  left: 2vw;
  z-index: 1;
  background: rgba(100, 100, 100, 1);
  width: 7vh;
  height: 7vh;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  border-color: rgba(167, 87, 57, 0.85);
  border-width: 1px;
  border-style: solid;
}

.preview-container p {
  font-size: 1vh;
  margin: 0 0 -9vh 0;
  z-index: 1;
}

.front-back-preview {
  width: 6vh;
  height: 6vh;
  max-height: 15vw;
  max-width: 15vw;
  z-index: 1;
  display: flex;
  position: absolute;
  overflow: hidden;
  background-position: center;
  align-items: center;
  border: rgba(167, 87, 57, 0.85);
  background-color: rgba(100, 100, 100, 1);
}

#frontPreview {
  display: none;
}

.preview-component {
  width: 6vh;
  height: 6vh;
  max-height: 15vw;
  max-width: 15vw;
  position: inherit;
  object-fit: cover;
  outline: none;
  border-width: 0.5px;
  border-color: rgba(167, 87, 57, 0.85);
  z-index: 1;
  /* Common styling */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
    
  /* Webkit compatibility */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
}

.create_cushion_front {
  display: flex;
  position: relative;
  container-type: inline-size;
  margin: 8vh auto 0 auto;
  width: 100vw;
  height: 39vh;
  box-sizing: border-box;
  overflow: hidden;
  background-position: center;
  align-items: center;
  justify-content: center;
  background: rgba(100, 100, 100, 1);
}

@media (min-width: 768px) {
  .create_cushion_front {
    display: flex;
    position: relative;
    container-type: inline-size;
    margin: 8vh auto 0 auto;
    width: 55vw;
    height: 75vh;
    box-sizing: border-box;
    overflow: hidden;
    background-position: center;
    align-items: center;
    justify-content: center;
    background: rgba(100, 100, 100, 1);
    border-radius: 8px;
  }
}

/* Ensure content inside the section is visible and positioned above the overlay */
.create_cushion_front > * {
  position: relative;
  z-index: 1;
}

#csback {
  z-index: 5;
}

#csbo {
  z-index: 10;
}

#csc01, #csc02, #csc03, #csc04, #csc05, #csc06, #csc07, #csc08, #csc09, #csc10, #csc11, #csc12, #csc13, #csc14, #csc15, #csc16, #csntDiv, #csjt, #csnt, #csback, #csbo {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 33vh;
  height: 33vh;
  object-fit: cover;
  outline: none;
  border: none;
  z-index: 0;
  /* Common styling */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
    
  /* Webkit compatibility */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
    
  /* Optional smooth transition */
  transition: all 0.5s ease;
}

@media (min-width: 768px) {
  #csc01, #csc02, #csc03, #csc04, #csc05, #csc06, #csc07, #csc08, #csc09, #csc10, #csc11, #csc12, #csc13, #csc14, #csc15, #csc16, #csntDiv, #csjt, #csnt, #csback, #csbo {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 33vw;
    height: 33vw;
    object-fit: cover;
    outline: none;
    border: none;
    z-index: 0;
    /* Common styling */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
      
    /* Webkit compatibility */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
      
    /* Optional smooth transition */
    transition: all 0.5s ease;
  }
}

#csnttext_cs01, #csnttext_cs06 {
  position: absolute;
  font-family: 'Kalam', cursive;
  font-size: 0.6vh;
  margin-top: 23.2vh;
  margin-left: 7.8vh;
  height: 1vh;
  width: 5vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  scale: 1;
}

#csnttext_cs02 {
  position: absolute;
  font-family: 'Kalam', cursive;
  font-size: 0.5vh;
  margin-top: 23.2vh;
  margin-left: 9.3vh;
  height: 0.8vh;
  width: 4vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  scale: 1;
}

#csnttext_cs03 {
  position: absolute;
  font-family: 'Kalam', cursive;
  font-size: 0.4vh;
  margin-top: 23.4vh;
  margin-left: 9.1vh;
  height: 0.6vh;
  width: 4vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  scale: 1;
}

#csnttext_cs04, #csnttext_cs07, #csnttext_cs08 {
  position: absolute;
  font-family: 'Kalam', cursive;
  font-size: 0.35vh;
  margin-top: 20.5vh;
  margin-left: 8.5vh;
  height: 0.6vh;
  width: 3vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  scale: 1;
}

#csnttext_cs05 {
  position: absolute;
  font-family: 'Kalam', cursive;
  font-size: 0.28vh;
  margin-top: 18.6vh;
  margin-left: 7.2vh;
  height: 0.5vh;
  width: 2.5vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  scale: 1;
}

@media (min-width: 768px) {
  #csnttext_cs01, #csnttext_cs06 {
    position: absolute;
    font-family: 'Kalam', cursive;
    font-size: 0.6vw;
    margin-top: 23.2vw;
    margin-left: 7.8vw;
    height: 1vw;
    width: 5vw;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    scale: 1;
  }

  #csnttext_cs02 {
    position: absolute;
    font-family: 'Kalam', cursive;
    font-size: 0.5vw;
    margin-top: 23.2vw;
    margin-left: 9.3vw;
    height: 0.8vw;
    width: 4vw;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    scale: 1;
  }

  #csnttext_cs03 {
    position: absolute;
    font-family: 'Kalam', cursive;
    font-size: 0.4vw;
    margin-top: 23.4vw;
    margin-left: 9.1vw;
    height: 0.6vw;
    width: 4vw;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    scale: 1;
  }

  #csnttext_cs04, #csnttext_cs07, #csnttext_cs08 {
    position: absolute;
    font-family: 'Kalam', cursive;
    font-size: 0.35vw;
    margin-top: 20.5vw;
    margin-left: 8.5vw;
    height: 0.6vw;
    width: 3vw;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    scale: 1;
  }

  #csnttext_cs05 {
    position: absolute;
    font-family: 'Kalam', cursive;
    font-size: 0.28vw;
    margin-top: 18.6vw;
    margin-left: 7.2vw;
    height: 0.5vw;
    width: 2.5vw;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
    scale: 1;
  }
}

.frontBackInfo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.tap-info {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 248, 0.85);
  margin-bottom: 0vh;
  position: absolute;
  top: 1vh;
}

.frontBackInfo {
  display: flex;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 248, 0.85);
  position: absolute;
  bottom: 1vh;
  margin: 0 0 0 0;
}

#disclaimerIcon {
  position: absolute;
  bottom: 3vh;
  margin: 0 0 0 108px;
  background-color: rgba(0, 0, 0, 0.35);
  color: rgba(255,255,248,0.55);
  border-radius: 50%;
  padding: 5px;
  font-size: 8px;
  font-style:normal; /* Makes the text italic */
  font-family: 'Georgia', 'Times New Roman', serif; /* Elegant font family */
  cursor: pointer;
  z-index: 10;
  text-align: center;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 12px; /* Adjust the size of the circle */
  height: 12px; /* Adjust the size of the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adds a slight shadow for elegance */
  transition: all 0.3s ease-in-out; /* Smooth hover transition */
}


#disclaimerText {
  display: none; /* Hidden initially */
  position: absolute;
  bottom: 4.5vh;
  width: auto;
  font-size: 9px;
  background-color: rgba(255, 255, 255, 0.25);
  color: rgba(50, 50, 50, 1);
  border-radius: 4px;
  padding-right: 5px;
  padding-left: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 10; /* Ensure it appears above other elements */
}

#disclaimerText::after {
  position: absolute;
  bottom: 3vh;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

    /* The class that makes the info box visible */
#disclaimerText.show {
  display: block;
}

.createPrice {
  margin-top: 0vh;
  text-align: right;
  margin: 0 0 0 0;
  justify-content: right;
  position: absolute;
  bottom: 1vh;
  right: 5vw;
}

#displayPrice {
  font-size: 20px;
  font-weight: 400;
  text-align: right;
  margin-bottom: 0vh;
  color: rgba(255, 255, 248, 0.75);
  position: relative;
}

.cartbuttonscreate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 11vh;
  margin-top: 0vh;
}

#quantity-control button {
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 2vh;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 700;
}

#quantity-control span {
  font-size: 2vh;
  margin: 0 10px;
  font-weight: 700;
}

#decreaseQty {
  background-color: rgba(100, 100, 100, 1);
  padding: 0 1vh;
  height: 4vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#increaseQty {
  padding: 0 1vh;
  height: 4vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a75839;
  opacity: 0.85;
}

.atc_button {
  border: none;
  cursor: pointer;
  padding: 0 1vh;
  height: 4vh;
  background-color: #a75839;
  opacity: 0.85;
  border-radius: 4px;
  font-size: 1.5vh;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.goToCart-btn {
  border: none;
  cursor: pointer;
  padding: 0 1vh;
  height: 4vh;
  background-color: rgba(100, 100, 100, 1);
  opacity: 0.85;
  border-radius: 4px;
  font-size: 1.5vh;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

#goToCart {
  display: none;
}

.component_options {
  display: flex;
  flex-direction: column;
  margin-top: 55vh;
  overflow-y: scroll;
}

@media (min-width: 768px) {
  .component_options {
    display: flex;
    flex-direction: column;
    margin-top: -10vh;
    margin-left: 0vw;
    margin-bottom: 0vh;
    position: relative;
    top: 12vh;
    overflow-y: hidden;
  }
}

@media (min-width: 768px) {
  .comp_options_container {
    display: flex;
    flex-direction: column;
    margin-top: -77vh;
    overflow-y: scroll;
    margin-left: 55vw;
    min-height: 75vh;
    max-height: 100vh;
    height: auto;
    position: sticky;
    margin-bottom: 15vh;
  }
}

.expandable_section {
  position: relative;
  background-color: rgba(100, 100, 100, 1);
  padding: 15px 20px; /* Increase padding for touch */
  border: 1px solid rgba(167, 87, 57, 0.85);
  border-radius: 4px;
  cursor: pointer;
  width: 90%;
  margin: 5% auto; /* Center with auto margins */
  text-align: center;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1.1em; /* Slightly larger font */
  max-height: 30px; /* Collapsed height */
  transition: max-height 0.5s ease;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 00px;
}

@media (min-width: 768px) {
  .expandable_section {
    position: relative;
    background-color: rgba(100, 100, 100, 1);
    padding: 15px 20px; /* Increase padding for touch */
    border: 1px solid rgba(167, 87, 57, 0.85);
    border-radius: 4px;
    cursor: pointer;
    width: 90%;
    margin: 5% auto; /* Center with auto margins */
    text-align: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.4em; /* Slightly larger font */
    max-height: 7.5vh; /* Collapsed height */
    transition: max-height 0.5s ease;
    overflow: hidden;
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
}

.filler-section {
  position: relative;
  background-color: rgba(100, 100, 100, 1);
  border: 1px solid rgba(167, 87, 57, 0.85);
  border-radius: 4px;
  cursor: pointer;
  width: 90%;
  height: auto;
  margin: 5% auto; /* Center with auto margins */
  text-align: center;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1.1em; /* Slightly larger font */
  overflow: visible;
  margin-top: 20px;
  margin-bottom: 00px;
}

#fillerRate {
  font-size: 12px;
  margin: 0 0 10px 0;
}

.expandable_section .scroll-container { /* Hide sub-divs when collapsed */
  display: none;
}

.expandable_section .scroll-container1 { /* Hide sub-divs when collapsed */
  display: none;
}

.expandable_section.expanded {
  max-height: 100vh; /* Expanded height (adjust as needed) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.expandable_section.expanded .scroll-container { /* Show sub-divs when expanded */
  display: flex;
  overflow-x: auto; /* Allows horizontal scrolling */
  gap: 20px; /* Adds spacing between images */
  padding: 10px; /* Adds padding around the container */
  max-height: 200px;
  margin-top: -20px;
}

.section-header {
  width: 100%;
  padding-bottom: 0px;
  height: 20px;
}

@media (min-width: 768px) {
  .section-header {
    width: 100%;
    padding-bottom: 8px;
    height: 2vh;
  }

  .expandable_section.expanded {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
  }

.expandable_section.expanded .scroll-container { /* Show sub-divs when expanded */
  display: flex;
  overflow-x: auto; /* Allows horizontal scrolling */
  gap: 20px; /* Adds spacing between images */
  padding: 10px; /* Adds padding around the container */
  max-height: 100%;
  margin-top: -20px;
  height: 100%;
  align-items: center;
}
}

#customSize-overlay h2 {
  color: rgba(100, 100, 100, 1);
  font-size: 18px;
  margin: 10px 0 10px 0;
}

#customSize-overlay label {
  color: rgba(100, 100, 100, 1);
  font-size: 14px;
  font-weight: 400;
  margin: 30px 0 10px 0;
}

#customSize-overlay input {
  color: rgba(100, 100, 100, 1);
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 10px 0;
}

.error-text {
  color: rgba(136, 29, 52, 0.6);
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 0 0;
}

#customSize-overlay input::placeholder{
  color: rgba(141, 36, 36, 0.6);
  font-size: 12px;
  font-weight: 400;
}

#customSize-btn {
  padding: 3px 8px;
  border-radius: 4px;
  background-color: rgb(221, 193, 180);
  color: rgba(167, 88, 57, 0.85);
  font-weight:bold;
  font-size: 13px;
}

.sort_options {
  gap: 2vw;
  display: flex;
  flex-direction: row;
  color: rgba(255, 255, 248, 0.85);
  font-size: 10px;
  align-items: center;
  height: 24px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.sort_btn {
  height: 20px;
  font-size: 10px;
  border-radius: 4px;
  background-color: rgba(255, 255, 248, 0.55);
  color: rgba(167, 87, 57, 0.85);
  padding: 0 2px;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
}

.sort_btn.selected {
  color: rgba(255, 255, 248, 0.55);
  background-color: rgba(167, 87, 57, 0.85);
}

.bordSort_btn {
  height: 20px;
  font-size: 10px;
  border-radius: 4px;
  background-color: rgba(255, 255, 248, 0.55);
  color: rgba(167, 87, 57, 0.85);
  padding: 0 2px;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
}

.bordSort_btn.selected {
  color: rgba(255, 255, 248, 0.55);
  background-color: rgba(167, 87, 57, 0.85);
}

.sortOrder_btn {
  height: 20px;
  font-size: 10px;
  background-color: rgba(255, 255, 248, 0.55);
  color: rgba(167, 87, 57, 0.85);
  font-weight: bolder;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
  padding: 0 2px;
  border-radius: 4px;
}

.sortOrder_btn.selected {
  color: rgba(255, 255, 248, 0.55);
  background-color: rgba(167, 87, 57, 0.85);
}

#cushion_options {
  gap: 10px;
}

#cs01fs_options {
  gap: 40px;
}

#border_options {
  margin-top: -20px;
  gap: 30px;
}

@media (min-width: 768px) {
  #border_options {
    margin-top: 0px;
    gap: 30px;
    max-height: 30px;
    height: 30px;
}
}

#fabric_options {
  margin-top: -20px;
  gap: 30px;
}

.expandable_section .sort_options {
  display: none;
}

.bordSort_options {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: auto;
  width: auto;
  font-size: 10px;
  align-items: center;
  margin: -5px 0 12px 0;
  overflow-x: auto;
  overflow-wrap: normal;
}

.expandable_section .bordSort_options {
  display: none;
}

.expandable_section.expanded .sort_options {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: auto;
  width: auto;
  font-size: 10px;
  align-items: center;
  margin: -5px 0 12px 0;
  overflow-x: auto;
  overflow-wrap: normal;
}

.scroll-container1 { /* Show sub-divs when expanded */
  display: none;
  overflow-x: auto; /* Allows horizontal scrolling */
  gap: 20px; /* Adds spacing between images */
  padding: 10px; /* Adds padding around the container */
  max-height: 200px;
  margin-top: -20px;

}

.section-title {
  position: absolute;
  left: 5px;
  top: -7px;
  font-size: 0.6em; /* Larger font size */
  font-weight: 500; /* Medium font weight */
  margin: 0; /* Remove default margin */
  padding: 10px 0; /* Add padding for spacing */
  color: rgba(255, 255, 248, 0.55); /* Darker text color */
}

.expand-icon {
  position: absolute;
  top: -6px;
  right: 10px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  user-select: none; /* Prevent text selection */
  z-index: 10;
  color: rgba(255, 255, 248, 0.55);
}

.scroll-container-border {
  display: flex;
  overflow-x: auto; /* Allows horizontal scrolling */
  gap: 50px; /* Adds spacing between images */
  padding: 10px; /* Adds padding around the container */
  align-items: center;
  justify-content: center;
}

.comp-image-container {
  position: relative;
  flex: 0 0 auto; /* Ensures items stay in a row and don't shrink */
  display: inline-block; /* Keeps the images in a horizontal layout */
  max-height: 200px; /* Adjust the height for larger images */
  max-width: 200px; /* Adjust the width for larger images */
}

@media (min-width: 768px) {
  .comp-image-container {
    position: relative;
    flex: 0 0 auto; /* Ensures items stay in a row and don't shrink */
    display: inline-table; /* Keeps the images in a horizontal layout */
    height: 150px; /* Adjust the height for larger images */
    width: 150px; /* Adjust the width for larger images */
  }
}

.csc_option {
  max-width: 150px; /* Adjust the width for larger images */
  width: 100%;
  height: auto; /* Maintains aspect ratio */
  transition: transform 0.3s; /* Smooth hover effect */
  margin-top: 18px;
}

.csc_option:hover {
  transform: scale(1.2); /* Slightly enlarge on hover */
}

/*#cs01fs_options .csc_option {
  max-width: 80px;
}

#cs02fs_options .csc_option {
  max-width: 100px;
}

#cs03fs_options .csc_option {
  max-width: 120px;
}*/

#border_options .csc_option {
  max-width: 60px;

}

.info-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.35);
  color: rgba(255,255,248,0.55);
  border-radius: 50%;
  padding: 5px;
  font-size: 14px;
  font-style:normal; /* Makes the text italic */
  font-family: 'Georgia', 'Times New Roman', serif; /* Elegant font family */
  cursor: pointer;
  z-index: 10;
  text-align: center;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 24px; /* Adjust the size of the circle */
  height: 24px; /* Adjust the size of the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adds a slight shadow for elegance */
  transition: all 0.3s ease-in-out; /* Smooth hover transition */
}

.info-text {
  position: absolute;
  bottom: 15px;
  left: 30px;
  text-align: center;
  color: rgb(255, 255, 248);
  border-radius: 4px;
  padding: 10px;
  font-size: 10px;
  font-style:normal;
  cursor: pointer;
  z-index: 10;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 90px; /* Adjust the size of the circle */
  height: 20px; /* Adjust the size of the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out; /* Smooth hover transition */
}

.nt-text {
  position: absolute;
  bottom: 55px;
  left: 9.5px;
  text-align: center;
  color: rgb(255, 255, 248);
  border-radius: 4px;
  padding: 10px;
  font-size: 18px;
  font-family: 'Kalam', cursive;
  font-style:normal;
  cursor: pointer;
  z-index: 10;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 130px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .nt-text {
    bottom: 57px;
    left: 11px;
  }
}

.nt-text-input {
  position: relative;
  top: 10px;
  line-height: 1;
  height: 30px;
  width: 130px;
  font-size: 18px;
  font-family: 'Kalam', cursive;
  font-style:normal;
  cursor: pointer;
  display: none;
  border-width: 0.1px;
  border-color: rgba(167, 88, 57, 0.85);
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.nt-text-input.expanded {
  display: flex;
}

.boSi2-span {
  position: absolute;
  bottom: 20px;
  left: 35px;
  text-align: center;
  color: rgb(255, 255, 248);
  border-radius: 50% / 100%;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adds a slight shadow for elegance */
  font-size: 12px;
  font-style:normal;
  cursor: pointer;
  z-index: 10;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 80px; /* Adjust the size of the circle */
  height: 30px; /* Adjust the size of the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out; /* Smooth hover transition */
}

.boSi4-span {
  position: absolute;
  top: 45px;
  left: 35px;
  text-align: center;
  color: rgb(255, 255, 248);
  border-radius: 50% / 100%;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adds a slight shadow for elegance */
  font-size: 12px;
  font-style:normal;
  cursor: pointer;
  z-index: 10;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 80px; /* Adjust the size of the circle */
  height: 30px; /* Adjust the size of the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out; /* Smooth hover transition */
}


.rotate-icon {
  position: absolute;
  top: 10px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.35);
  color: rgba(255,255,248,0.55);
  border-radius: 50%;
  padding: 5px;
  font-size: 14px;
  font-style:normal; /* Makes the text italic */
  font-family: 'Georgia', 'Times New Roman', serif; /* Elegant font family */
  cursor: pointer;
  z-index: 10;
  text-align: center;
  line-height: 1; /* Ensures proper vertical alignment */
  width: 24px; /* Adjust the size of the circle */
  height: 24px; /* Adjust the size of the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adds a slight shadow for elegance */
  transition: all 0.3s ease-in-out; /* Smooth hover transition */

}

.info-icon:hover, .rotate-icon:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  transform: scale(1.1); /* Slightly enlarge on hover */
}

.close-button {
  position: absolute;
  top: -20px;
  right: -20px;
  background: transparent;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: rgb(125, 125, 125);
  cursor: pointer;
  z-index: 1001;
  line-height: 1;
}

.close-button:hover {
  color: #000;
  transform: scale(1.2);
}

.createInfo {
  position: absolute;
  margin-top: 00px;
  text-align: center;
  font-size: 12px;
}

#description-overlay, #customSize-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 100000; /* Ensures it's above other content */
}

#outOfStock-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 100000; /* Ensures it's above other content */
}

#wait-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 100000; /* Ensures it's above other content */
}

#tryOn-overlay {
  position: absolute;
  top: 0vh;
  left: 0;
  width: 100%;
  min-height: 100vh;
  height: auto;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 100000; /* Ensures it's above other content */
  flex-direction: column;
  overflow-y: scroll;
}

/* Content inside the overlay */
.overlay-content {
  background: white;
  padding: 20px;
  border-radius: 20px;
  width: 80%;
  max-width: 80%;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out; /* Add fade-in animation */
}

#tryOn-overlay h3{
  color: rgba(167, 87, 57, 0.85);
  line-height: 0.4;
  margin: 15px 0 25px 0;
}

#object-preview-container {
  max-height: 300px;
  max-width: 300px;
}


#description-text {
  margin-bottom: 20px;
  font-size: 12px;
  color: #333;
}

#avlStatus-text {
  margin-bottom: 20px;
  font-size: 12px;
  color: #333;
}

#outOfStock-text {
  margin-bottom: 20px;
  font-size: 1rem;
  color: #333;
}

.close-description {
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  height: 3ch;
  width: auto;
  background-color: rgba(100, 100, 100, 0.25);
  color: rgb(100, 100, 100);
  opacity: 0.85;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;  
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

#tryOnInfo {
  font-size: 12px;
  color: rgba(167, 87, 57, 0.85);
}

#vision-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 1em auto;
  border: 2px dashed #ccc;
  background-color: #fff;
}

#processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: none; /* Hidden by default */
  z-index: 10;
  animation: oscillateOverlayColor 4s linear infinite;
  justify-content: center;
  align-items: center;
  color: rgba(167, 87, 57, 0.85);
  font-size: 14px;
  flex-direction: column;
  font-weight: 400;
  }

 @keyframes oscillateOverlayColor {
  0%, 100%   { background-color: rgba(167, 87, 57, 0.25); color: rgba(167, 87, 57, 1);}
  50%  { background-color: rgba(255, 255, 248, 0.25); color: rgba(255, 255, 248, 1);}
 }

#video, #canvas {
  width: 100%;
  height: auto;
  display: block;
  }

#canvas {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  }

.controls {
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex-direction: column;
  }

.tryOnSrc-div {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-evenly;
  align-items: baseline;
}

.controls button {
    padding: 5px 10px;
    border: none;
    background-color: rgba(167, 87, 57, 0.85);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    text-transform: capitalize;
    height: auto;
    font-weight: 300;
}

@media (min-width: 768px) {
  .controls button {
    font-size: 0.8rem;
  }
}

.label-btn {
    padding: 5px 10px;
    border: none;
    background-color: rgba(167, 87, 57, 0.85);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    text-transform: capitalize;
    height: auto;
}

.label-btn label {
    font-weight: 300;
    display: inline-flex;
    margin: 0 0 0 0;
}

.controls button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

@keyframes oscillateButtonColor {
  0%, 100%   { background-color: rgba(167, 87, 57, 0.25); color: rgba(167, 87, 57, 1);}
  50%  { background-color: rgba(100, 100, 100, 0.25); color: rgba(100, 100, 100, 1);}
}

.imagining-animation {
  animation: oscillateButtonColor 4s linear infinite;
}

#resultContainer {
    margin-top: 20px;
    text-align: center;
}

#resultImage {
    max-width: 100%;
    border: 1px solid #ddd;
    margin-top: 10px;
}

.ar-try-on-button {
    --glow-color: rgba(255, 255, 248, 1); /* Starting color */
    
    background: none;
    border: 2px solid var(--glow-color);
    padding: 12px;
    border-radius: 50%; /* Makes it circular */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* The animation call */
    animation: oscillateColor 3s linear infinite;
    
    /* A subtle shadow that also uses the animated color */
    box-shadow: 0 0 15px var(--glow-color);
    transition: transform 0.3s ease-in-out;
}

.ar-try-on-button:hover {
    transform: scale(1.1);
}

/* The SVG icon itself */
.ar-try-on-button svg {
    width: 12px;
    height: 12px;
    stroke: var(--glow-color); /* The icon's stroke color will animate */
}

/* * The @keyframes animation defines the color oscillation.
 * It smoothly transitions the --glow-color variable through a spectrum of colors.
*/
@keyframes oscillateColor {
  0%, 100%  { --glow-color: rgba(255, 255, 248, 1); }
  5%, 95%  { --glow-color: rgba(255, 255, 248, 0.95); }
  10%, 90%  { --glow-color: rgba(255, 255, 248, 0.9); }
  15%, 80%  { --glow-color: rgba(255, 255, 248, 0.85); }
  20%, 80%  { --glow-color: rgba(255, 255, 248, 0.8); }
  25%, 75%  { --glow-color: rgba(255, 255, 248, 0.75); }
  30%, 70%  { --glow-color: rgba(255, 255, 248, 0.7); }
  35%, 65%  { --glow-color: rgba(255, 255, 248, 0.65); }
  40%, 60%  { --glow-color: rgba(255, 255, 248, 0.6); }
  45%, 55%  { --glow-color: rgba(255, 255, 248, 0.55); }
  50%  { --glow-color: rgba(255, 255, 248, 0.5); }
}

#tryOn-btn {
  position: absolute;
  right: 2vw;
  top: 0vh;
}


.none_option
{
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #373B44;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.none_option:hover,
.none_option:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.none_option:active {
  background: var(--color);
  color: #fff;
}

/*cart*/

/* Loading overlay styles */

.cart-page {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 13vh;
}
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 248, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  visibility: hidden; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.visible {
  visibility: visible;
  opacity: 1;
}

/* Spinner styling (optional) */
.loading-spinner {
  border: 4px solid #f3f3f3; /* Light gray */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.createMore_button {
  margin-left: -1ch;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  background-color: rgba(100, 100, 100, 0.25);
  color: rgba(100, 100, 100, 1);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}
.selectAdd_button {
  white-space: nowrap;
  margin-left: 2.5ch;
  margin-right: -1ch;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  background-color: rgba(167, 87 , 57, 0.85);
  color: rgba(255, 255, 248, 0.85);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}

.cart-item {
  display: flex; /* Arrange items in a horizontal row */
  position: relative;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  justify-content: center;
  justify-items: center;
  background: rgba(100, 100, 100, 1);
  width: 96vw;
  left: 2vw;
  border-radius: 4px;
}

.cart-image-container {
  position: relative;
  width: 200px; /* Adjust to fit the image size */
  height: 200px; /* Adjust to fit the image size */
}

.cart-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure images fit the container */
}

.icon-hover-primary:hover {
  border-color: #3b71ca !important;
  background-color: white !important;
}

.icon-hover-primary:hover i {
  color: #3b71ca !important;
}
.icon-hover-danger:hover {
  border-color: #dc4c64 !important;
  background-color: white !important;
}

.icon-hover-danger:hover i {
  color: #dc4c64 !important;
}

#cart-items {
  display: flex;
  flex-direction: column; /* Arrange items in a vertical column */
  position: relative;
  container-type: inline-size;
  margin-top: -1ch;
  margin-left: 0ch;
  height: auto;
  width: auto;
}

.front-back-text {
  position: relative;
  font-size: 12px;
  text-align: center;
  font-style:normal;
  font-weight: 400;
  margin-top: 120px;
}

.cart-item-container {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cart-front-back-container {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.filler-btn {
  position: relative;
  line-height: 1;
  align-items: center;
  justify-content: center;
  justify-items: center;
  display: flex;
  flex-direction: column;
  z-index: 50;
  width: auto;
}

.cart-modify-link {
  margin-top: -90px;
  margin-bottom: 60px;
  height: auto;
  width: auto;
  align-items: center;
  background-color: rgba(255, 255, 248, 0.55);
  color: rgb(100, 100, 100);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-size: 8px;
  font-weight: bold;
}

.filler-qty-change-div {
  display: flex;
  align-items: center; /* Center content vertically within the container */
  font-size: 12px;
  gap: 10px;
  font-weight: 500;
  justify-content: center;
  width: auto;
}

.filler-btn p {
  font-size: 12px;
  text-align: center;
  line-height: 0.1;
}

.cart-details {
  width: 33vw;
  display: block;
  align-items: center;
  justify-content: center;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cart-item-details p {
  margin: 0; /* Ensure no extra margin is added by the child elements */
  line-height: 2; /* Adjust the line height for text spacing */
  font-size: 12px;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.qty-change-div {
  display: flex;
  align-items: center; /* Center content vertically within the container */
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}

.rmv-item-btn {
  border: none;
  cursor: pointer;
  padding: 0 auto;
  height: 20px;
  width: 80px;
  background-color: rgba(255, 255, 248, 0.55);
  color: rgb(100, 100, 100);
  opacity: 0.85;
  border-radius: 4px;
  font-size: 8px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
}

.qty-change-btn-rdc {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding: 0.2vh 10px;
  background-color:rgba(50, 50, 50, 0.5); /* Background color for the button */
  color: white;       /* Text color */
  font-size: 15px;    /* Adjust the font size as needed */
  border: none;       /* Remove default border */
  border-radius: 4px; /* Optional: add rounded corners */
  cursor: pointer;
}

.qty-change-btn-inc {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding: 0.2vh 10px;
  background-color:#a75839; /* Background color for the button */
  opacity: 0.85;
  color: white;       /* Text color */
  font-size: 15px;    /* Adjust the font size as needed */
  border: none;       /* Remove default border */
  border-radius: 4px; /* Optional: add rounded corners */
  cursor: pointer;
}

.item_description {
  margin-top: -1ch;
  margin-left: 2ch;
}
.order_details {
  color: #3d3939;
  margin-left: 4ch;
  font-weight: bold;
}

.update_cart {
  margin-left: 4ch;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 10px;
  background-color: #57a58b;
}
.hr_cart {
  margin-top: -1ch;
}

.cart-buttons {
  display: flex;
  justify-content: center; /* Places buttons side by side with space between */
  gap: 30vw; /* Adds space between buttons */
  align-items: center; /* Vertically centers the buttons */
  padding: 0 1ch; /* Adds 1ch padding to the left and right sides */
  box-sizing: border-box;
  margin-top: -50px;
  margin-right: 2ch;
  margin-left: 2ch;
  margin-bottom: 10px;
}

.gtc_form {
  margin: 0; /* Removes any default margin from the forms */
}

.gtc_button {
  padding: 10px 20px; /* Adjust padding as needed */
  font-size: 16px; /* Adjust font size as needed */
  cursor: pointer;
}

/*address page*/

.address-page {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 13vh;
}

.addressList {
  justify-content: center;
}

.selected-address-list {
  display: flex;
  flex-direction: column;
  gap: 1ch;
  justify-content: center;
}

.saved-add-container {
  display: flex;
  flex-direction: column;
  gap: 1ch;
  justify-content: center;
  margin-top: 20px;
}

.address-item {
  font-size: 15px;
  border-width: 1px;
  border-color: rgba(100, 100, 100, 0.25);
  border-radius: 4px;
  padding: 5px;
  border-style: solid;
  margin-left: 4vw;
  width: 91vw;
}
.newAddress_input {
  height: 50px;
  width: 80%;
}
.selectAddress-btn {
  border: none;
  cursor: pointer;
  padding: 0 5px;
  height: 3ch;
  width: auto;
  background-color: rgba(100, 100, 100, 0.5);
  color: rgba(255,255,248,0.55);
  opacity: 0.85;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.changeAddress-btn {
  border: none;
  cursor: pointer;
  padding: 0 5px;
  height: 3ch;
  width: auto;
  background-color: rgba(100, 100, 100, 0.5);
  color: rgba(255,255,248,0.55);
  opacity: 0.85;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.addAddress_button {
  white-space: nowrap;
  margin-left: 0ch;
  margin-right: -1ch;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 10px;
  background-color: #5e5e5e;
  color: var(--light-grey-color);

}

.goToPayment-btn {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: rgb(221, 193, 180);
  color: rgba(167, 88, 57, 0.85);
  font-weight:bold;
  font-size: 16px;
}

.address-form-container {
  width: 100%;
  max-width: 600px;
  margin-right: 1ch;
  margin-left: 1ch;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#add-address-form {
  margin-left: 1ch;
}

#add-address-form label {
  margin-left: 1ch;
  font-size: 14px;
  color: rgb(100, 100, 100);
  font-weight: 500;
  margin-bottom: -10px;
}

#add-address-form input {
  opacity: 0.25;
  border-radius: 4px;
  border-width: 1px;
  border-color: rgba(200, 200, 200, 0.8);
  width: 90vw;
  height: 30px;
  font-size: 15px;
  
}

.address-form-container h3 {
  color: #0073e6;
}

.address-form .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.address-form .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.address-form .form-group.full-width {
  flex: 1 1 100%;
}

.address-form label {
  font-size: 14px;
  margin-bottom: 5px;
  color: #555;
}

.form-group label {
  font-weight: bold;
  font-size: 14px;
}

.address-form input[type="text"],
.address-form input[type="tel"],
.address-form select {
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

.address-form input:focus,
.address-form select:focus {
  border-color: #0073e6;
  outline: none;
}

.address-type {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.address-type label {
  font-weight: bold;
}

.form-actions {
  display: flex;
  justify-content: space-between;
}

.addressSubmit-btn {
  background-color: rgba(100, 100, 100, 0.5);
  color: rgba(255,255,248,0.55);
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.submit-btn:hover {
  background-color: #e55c00;
}

.addressCancel-btn {
  background-color: transparent;
  color: #0073e1;
}


/*payment page*/

.payment-page {
  margin-left: 1ch;
  margin-top: 10px;
}

#paymentPageDetails {
  margin-top: 0ch;
}

.paymentPage_buttons {
  display: flex;
  justify-content: center; /* Centers the buttons horizontally */
  align-items: center; /* Vertically centers the buttons */
  gap: 1ch; /* Adds space between the buttons */
  padding: 1ch 0; /* Adds padding above and below the buttons */
  margin-top: 1ch;
}

.payNow_button {
  padding: 5px 15px;
  border-radius: 10px;
  background-color:#a75839; /* Background color for the button */
  opacity: 0.85;
  justify-content: center; /* Centers the buttons horizontally */
  align-items: center; /* Vertically centers the buttons */
  color: var(--light-grey-color);
  font-weight: bold;
  font-size: large;
  border: none; /* Removes default border */
  cursor: pointer; /* Adds a pointer cursor on hover */
}

.payNow_button:hover {
  background-color: #776502; /* Darkens background on hover */
}

.modifyItems_button {
  background-color: rgba(100, 100, 100, 0.25);
  color: rgb(100, 100, 100);
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

/*orderCompletion*/
/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.order-complete-msg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  margin-top: -4ch;
}

.order-complete {
  text-align: center;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.orderCompletionStatus-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  gap: 0.1rem;
  line-height: 0.1rem;
}

.animation-container {
  margin-bottom: 1rem;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle {
  width: 80px;
  height: 80px;
  border: 5px solid #4CAF50;
  border-radius: 50%;
  position: relative; /* Allows the check to align relative to the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  animation: circleExpand 0.6s ease-out forwards;
}

.check {
  width: 25px;
  height: 50px;
  border: solid #4CAF50;
  border-width: 0 5px 5px 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg); /* Centers the check within the circle */
  opacity: 0;
  animation: checkAppear 0.4s 0.6s forwards ease-in;
}

.animation-container.failure .circle {
  border-color: #ff4d4f; /* Red color for failure */
}

.emoji {
  font-size: 50px;
  color: #ff4d4f; /* Red for failure */
  z-index: 1;
  animation: bounce 1s infinite;
}

.message {
  color: #ff4d4f;
  font-size: 16px;
  font-weight: bold;
  margin-top: 110px;
}

@keyframes circleExpand {
  from {
      transform: scale(0);
      opacity: 0;
  }
  to {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes checkAppear {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
}

.order-complete-msg h1 {
  color: #4CAF50;
  margin: 1rem 0;
}

.order-complete-msg p {
  color: #666;
  margin-bottom: 0.1rem;
  margin-top: 2rem;
}

.order-complete-msg button {
  padding: 0.5rem 0.5rem;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s;
  background-color: rgba(28, 105, 73, 0.2);
  color: rgb(28, 105, 73);
  font-size: 14px;
  margin-top: 2rem;
}

.order-complete-msg button:hover {
  background-color: #45a049;
}

.retry-button {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

.retry-button:hover {
  background-color: #e04343;
}

/*order list page*/

.order-list-page {
  margin-left: 1ch;
  margin-top: -4ch;
  margin-right: 1ch;
}

/*order details page*/

#order-total {
  height: 40px;
  margin-left: 1vw;
  font-size: 10px;
  margin-top: -40px;
}

#order-total p {
  font-size: 15px;
}

.order-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1vw;
  padding: 10px;
  border: 0.5px solid rgba(167, 87, 57, 0.85);
  border-radius: 5px;
  justify-content: center;
  justify-items: center;
}

.order-item-container {
  display: flex; /* Arrange items in a horizontal row */
  gap: 10px;
  margin-bottom: 20px;
  border: none;
  justify-content: center;
  justify-items: center;
}

.item-details {
  width: 33vw;
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.order-image-container {
  position: relative;
  width: 200px; /* Adjust to fit the image size */
  height: 200px; /* Adjust to fit the image size */
}

.order-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure images fit the container */
}

#order-items {
  display: flex;
  flex-direction: column; /* Arrange items in a vertical column */
  gap: 20px;
  position: relative;
  container-type: inline-size;
  margin-top: -1ch;
  margin-left: 0ch;
  height: auto;
  width: auto;
}

.order-item-img {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.order-front-back-container {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.order-item-details {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.order-item-details p {
  margin: 0; /* Ensure no extra margin is added by the child elements */
  line-height: 2; /* Adjust the line height for text spacing */
  font-size: 12px;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.item-review {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.review-box {
  width: 90vw;
  background-color: rgba(255, 255, 248, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 248, 0.75);
  font-size: 12px;
  font-style: italic;
}

.muted-text {
  color: rgba(255, 255, 248, 0.55);
  font-size: small;
}

.submit-review-btn {
  padding: 2px 5px;
  border-radius: 4px;
  background-color: rgba(167, 87, 57, 0.85);
  text-transform: capitalize;
  font-size: 12px;
  margin: 0 0;
}

.cancel-edit-btn {
  padding: 2px 5px;
  border-radius: 4px;
  background-color: rgba(255, 255, 248, 0.65);
  color: rgba(100, 100, 100, 1);
  text-transform: capitalize;
  font-size: 12px;
  margin: 0 0;

}

.star-rating-container {
    display: inline-block; /* Or flex for more control */
}

.star-rating-container .star {
    font-size: 1.8em;   /* Adjust size - slightly smaller than screenshot for balance */
    color: #555;       /* Color for empty/unselected star (darker grey) */
    cursor: pointer;
    transition: color 0.1s ease-in-out;
    margin-right: 4px; /* Spacing between stars */
    line-height: 1;    /* Ensure stars align well if font size causes issues */
}

.star-rating-container .star:hover, /* Hovered, not yet selected */
.star-rating-container .star.hovered-state { /* Explicit class for JS hover handling */
    color: #D4AF37; /* Brighter gold for hover - can be same as selected */
}

.star-rating-container .star.selected-state { /* Explicit class for JS selected handling */
    color: #FFD700;   /* Gold color for selected/filled star */
}

.display-review-area {
    margin-bottom: 15px; /* Space between displayed review and form if it appears */
    width: 100%;
    justify-content: center;
    align-items: center;
    justify-items: center;
    justify-self: center;
}

.display-review-area h6 {
  color: rgba(255, 255, 248, 0.65);
  font-size: 12px;
}

.static-star-rating .static-star {
    font-size: 1.5em; /* Adjust to match your interactive stars or as desired */
    color: #555;      /* Empty static star color */
    margin-right: 3px;
    display: inline-block; /* Ensures they sit on one line */
}

.static-star-rating .static-star.filled {
    color: #FFD700;   /* Gold color for filled static star */
}

/* Styling for cancel button if needed */
.cancel-edit-btn {
    margin-left: 10px;
    color: #aaa; /* Example color */
    background-color: transparent;
    border: none;
}
.cancel-edit-btn:hover {
    color: #fff;
    text-decoration: underline;
}

/*reviews page*/

.reviews-page {
  padding: 2vw;
  margin-top: -5vh;
}

.reviews-page h1 {
  font-size: 18px;
  color: rgba(255, 255, 248, 0.75);
  font-weight: 400;
}

.static-star-rating .static-star {
  font-size: 1.3em; /* Adjust size as needed */
  color: #ccc;      /* Empty static star color */
  margin-right: 2px;
  display: inline-block;
}
.static-star-rating .static-star.filled {
  color: #FFD700;   /* Gold color for filled static star */
}
.review-text-display {
  white-space: pre-wrap; /* Preserves line breaks from user input */
  background-color: #f9f9f9; /* Light background for the review text */
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #eee;
}
.card-title a {
  text-decoration: none;
  color: inherit;
}
.card-title a:hover {
  text-decoration: underline;
}

.review-info {
  color: rgba(255, 255, 248, 0.35);
  font-size: 14px;
}

.pagination .page-item.disabled .page-link {
  color: rgba(255, 255, 248, 0.35);
  pointer-events: none;
  background-color: rgb(100, 100, 100);
  border-color: rgba(167, 87, 57, 0.85);
}
.pagination .page-item.active .page-link {
  z-index: 3;
  color: rgba(255, 255, 248, 0.85);
  background-color: rgba(167, 87, 57, 0.85);/* Example primary color */
  border-color: rgba(255, 255, 248, 0.85);
}
.pagination .page-link {
  color: rgba(167, 87, 57, 0.85); /* Example primary color */
}
.pagination .page-link:hover {
  color: rgba(167, 87, 57, 0.85);
}

/*profile page*/

.profile-page {
  justify-content: center;
  margin-top: -4ch;
}

.orderList-btn {
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  height: auto;
  width: 80vw;
  margin-left: 10vw;
  background-color: rgba(100, 100, 100, 0.5);
  color: rgba(255,255,248,0.55);
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.logout-btn {
  border: none;
  cursor: pointer;
  padding: 0 auto;
  width: 80vw;
  margin-left: 10vw;
  background-color: rgba(100, 100, 100, 0.5);
  color: rgba(255,255,248,0.55);
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/*login page*/

.btn-google {
  background-color: transparent !important;  /* Force background to be transparent */
  border: none !important;                   /* Force no border */
  padding: 0 !important;                     /* Force no padding */
}

.custom-sign-in-btn {
  padding: 10px auto;
  border-radius: 4px;
  color: rgba(255, 255, 248, 0.85);
  background-color: rgba(167, 88, 57, 0.85);
  font-weight: 400;
  font-size: 16px;
  margin-top: 00px;
  text-transform: none;
  width: 50vw;
  max-width: 300px;
  border-width: 0.4px;
  border-color: rgba(255, 255, 248, 1);
}

.loginPage {
margin-left: 2ch;
margin-top: 5ch;
position: relative;
}
.registerPage {
  margin-left: 2ch;
  }

  /*verify OTP page*/
.verifyOTP_page .card {
  background-color: rgb(100, 100, 100);
}

.verifyOTP_page h2 {
  color: rgba(255, 255, 248, 0.65);
  font-size: 18px
}

.verifyOTP_page .form-label {
  color: rgba(255, 255, 248, 0.65);
  font-size: 14px
}

.verifyOTP_page .verifyOTP_text {
  display: flex;
  flex-wrap: wrap;
  color: rgba(255, 255, 248, 0.65);
  font-size: 14px;
  justify-content: center;
}

#id_otp {
  font-size: 12px;
  font-weight: 400;
  padding-left: 1ch;
  width: 50vw;
  margin: 0 0 0 0;
  border-radius: 4px;
}

.verifyOTP-btn {
  background-color: rgba(167, 87, 57, 0.85);
  font-size: 14px;
  padding: 4px 4px;
  border-radius: 4px;
  width: auto;
  text-transform: capitalize;
}

.verifyOTP_page a {
  color: rgba(255, 255, 248, 0.65);
}

/*signup page*/
/* Style the help text container */
.helptext {
  font-size: 4px;          /* Adjust font size */
  color: #555;              /* Customize text color */
  margin-top: 8px;          /* Add spacing above the help text */
  padding-left: 20px;       /* Indent to align with bullets */
}

.helptext a {
  display: block;  /* This forces the link onto a new line */
  margin-top: 5px; /* Optional: Adds space above the link */
}

/* Style for the list items */
.helptext ul {
  list-style-type: disc;    /* Set bullet style to disc */
  padding-left: 20px;       /* Ensure bullets align */
  margin-top: 0;
}

.helptext li {
  margin-bottom: 6px;       /* Space between each rule */
}

/*admin-page*/

.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-controls button {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
}

.pagination-controls .active {
  font-weight: bold;
  background-color: #007bff;
  color: white;
}