@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Yesteryear&display=swap');
.outfit {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.yesteryear-regular {
  font-family: "Yesteryear", cursive;
  font-weight: 400;
  font-style: normal;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 15px;
}
.item-shop {

    padding: 35px; height: 450px;
}
/* Column 1: child1 (top), child4 (bottom) */
.item-shop:first-child {
  grid-column: 1;
  grid-row: 1;
}
.item-shop:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}

/* Column 2: child2 alone */
.item-shop:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2; /* take up both rows if needed */
  height: 915px;
}

/* Column 3: child3 (top), child5 (bottom) */
.item-shop:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.item-shop:nth-child(5) {
  grid-column: 3;
  grid-row: 2; 
}
.item-shop h3 {
	font-size: 36px;
letter-spacing: 1px;
line-height: 30px;
text-transform: uppercase;
color: #ffffff;
font-weight: 600;
}
.d:after{
	width: 460px;
height: 452px;
background-image: linear-gradient(0deg, rgba(0,0,0,0.9999999999999999) 0%, rgba(0,0,0,0) 63%);
}

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #86f13e;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

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

            100% {
                transform: rotate(360deg);
            }
        }



 /* 06-06-25 styles starts here */

.check-out-wrap #topUpModal .w-full.max-w-md #confirm-top-up{
   opacity: 1;
    background-color: #f3be19;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #000000;
    font-weight: 600;
    border: 2px solid #f3be19;
    border-radius: 50px;
    font-family: "Outfit", sans-serif;
    align-items: center;
    padding: 18px 30px;
    font-size: 16px;
    line-height: 16px;
}
.check-out-wrap #topUpModal .w-full.max-w-md #confirm-top-up:hover{background-color:#000; color:#fff;}
.check-out-wrap #topUpModal #cancelModalBtn{
    background-color: transparent;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #000000;
    font-weight: 600;
    border: 2px solid #f3be19;
    border-radius: 50px;
    font-family: "Outfit", sans-serif;
    align-items: center;
    padding: 18px 30px;
    font-size: 16px;
    line-height: 16px;
}

.check-out-wrap #topUpModal #cancelModalBtn:hover{background-color:#f3be19; color:#fff;}
 .setting-wrap{text-align:center;}
.setting-wrap label, .setting-wrap .upload-file, .setting-wrap .select2-selection__rendered{text-align:left;}


#topUpModal {padding:15px;}

 /* 06-06-25 styles ends here */

 /* login styles ends here */

.registr{background-image: url(https://moniciapoole.com/assets/front-end/images/login-bg.webp); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.registr h2, .login-inner h2{font-size: 72px; letter-spacing: 1px; line-height: 82px; color: #000000;  font-weight: 400; font-family: "Yesteryear";}
.registr img{margin: 0 auto;}
.registr p, .login-inner p{font-size: 24px; letter-spacing: 0px; line-height: 34px; color: #000000; font-weight: 400; font-family: "Outfit";}
.registr form input, .registr form select{height: 65px; border-radius: 33px; background-color: #e1e1e1;}
.registr form label{font-size: 18px; letter-spacing: 0px; line-height: 28px; color: #000000; font-weight: 300; font-family: "Outfit";}
.registr .max-w-lg{border-radius: 20px; background-color: #ffffff;}

 /* login styles ends here */

  /* product list styles starts here */

.outer-sec .rounded-lg img{object-fit:cover;}
.outer-sec .rounded-lg h3{font-size: 20px; letter-spacing: 0px; line-height: 30px; color: #000000; font-weight: 500; font-family: "Outfit"; min-height: 90px; text-align: center; margin-top: 10px; min-height: 120px; }
.outer-sec .rounded-lg  p{font-size: 24px; line-height: 30px; color: #d71f26; font-weight: 700; font-family: "Outfit"; text-align: center; margin-top: 10px; margin-bottom: 35px;}
.outer-sec  .rounded-lg.shadow-md{box-shadow: none; text-align: center; background-color: #fff; border: 1px solid #c2c2c2; border-radius: 0; padding: 35px 30px 35px 30px;}
.outer-sec  .rounded-lg button{font-size: 18px; letter-spacing: 0px; line-height: 28px; color: #000000; font-weight: 600; font-family: "Outfit"; text-align: center; border-radius: 31px; background-color: #f3be19; width: auto; padding: 13px 41px;}
.outer-sec .rounded-lg button:hover{background-color:#b7151a; color:#fff;}
.outer-sec .grid{gap:23px;}
.outer-sec .inner-sec{display:flex; width: 100%;}
.outer-sec .inner-sec .sec1{width:20%; padding-right: 10px;}
.outer-sec .inner-sec .sec2{width:80%;}
.outer-sec .container, .footer .container{margin:0 auto;}
.outer-sec #categoryFilterForm{flex-direction: column; display: flex;}
.outer-sec .sec1 .card-header h6{font-size: 24px; letter-spacing: 0px; line-height: 34px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-family: "Outfit"; text-align: left; background-color: #000; padding: 20px 40px; margin-bottom: 30px;}
.outer-sec #categoryFilterForm label{font-size: 18px; letter-spacing: 0px; line-height: 28px; color: #000000; font-weight: 400; font-family: "Outfit"; margin-bottom: 20px;}
.outer-sec #categoryFilterForm .form-check-input{margin-right:10px}
.outer-sec .pagination nav .hidden{font-size: 16px; letter-spacing: 0px; line-height: 26px; color: #000000; font-weight: 300; font-family: "Outfit";}
.outer-sec .pagination nav .hidden .relative{gap: 10px; border-radius: 50px;}
.outer-sec .pagination nav .hidden .relative a{ box-shadow: none; background-color:#e1e1e1; color:#000;}
.outer-sec .pagination nav .hidden .relative span a{background-color:#e1e1e1 !important;}
.outer-sec .search input{font-size: 16px; letter-spacing: 0px; line-height: 61px; color: #000000; font-weight: 250; font-family: "Outfit"; border-radius: 0;}
.outer-sec .search input:focus{border-color:#e1e1e1 !important;}
.outer-sec .pagination nav .hidden p{font-size: 16px; letter-spacing: 0px; line-height: 26px; color: #000000; font-weight: 300; font-family: "Outfit";}
.banner-sec{padding: 170px 10px 160px 10px; background-repeat: no-repeat; background-size: cover;}
.banner-sec h1{font-size: 100px; letter-spacing: 2px; line-height: 110px; color: #ffffff; font-weight: 400; font-family: "Yesteryear";}  
.outer-sec {padding: 150px 0px 120px 0px;}
#addItemsModal {z-index: 9 }
#addItemsModal { padding: 15px; }
#addItemsModal #productsList button, #addItemsModal > div > div > button { background-color: #f3be19;
  font-size: 18px;
  letter-spacing: 0px;
  display: inline-block;
  line-height: 0;
  text-transform: uppercase;
  color: #000000;
  font-weight: 600;
  padding: 32px 50px;
  border: 2px solid #f3be19;
  border-radius: 50px;
  font-family: "Outfit", sans-serif;
  display: inline-flex;
  align-items: center; padding: 10px 25px;
  font-size: 16px;
  line-height: 16px; }
#addItemsModal #productsList button:hover { background-color: #ffffff; color: #000000; }
#addItemsModal > div > div > button {
  background-color: #d42127;
  border-color: #d42127;
  color: #ffffff;
  /* product list styles ends here */
}
#addItemsModal > div > div > button:hover { background-color: #ffffff; color: #000000; }

/* footer styles starts here */

.footer ul li{display: inline-block; margin-right: 5px;}
.footer{text-align:center;}
.footer{padding:120px 10px 50px 10px; background-repeat: no-repeat; background-size: cover; background-image: url(/../../assets/front-end/images/footer-bg.webp); }
.footer img{margin: 0 auto;}
.footer p{font-size: 18px; letter-spacing: 0px; line-height: 28px; color: #000000; font-weight: 300; font-family: "Outfit"; padding: 20px 0px;}  
.footer ul li a{font-size: 14px; letter-spacing: 0px; line-height: 24px; color: #000000; font-weight: 300; font-family: "Outfit";}   
.footer ul li a:hover{color:#b7151a;}  
 
 /* footer styles ends here */



 /*Cart*/
 .cart-wrap { margin-top:80px; margin-bottom: 80px; }

 /*Register*/
 .register-form form input, .register-form form select {
    height: 44px;
    padding: 0 20px;
}
.register-form form > div { margin-top: 10px !important; }
.register-form form label {
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 21px; }
.register-form {
          padding-top: 50px;
    padding-bottom: 70px;
    }
.register-form form button {     border-radius: 31px;
    background-color: #f3be19;
    font-size: 18px;
    letter-spacing: 0px;
    line-height: 0;
    text-transform: uppercase;
    color: #000000;
    font-weight: 600; margin:0 auto;
    padding: 30px 50px;
    border: 0; }
.register-form form label a { color: #d71f26; text-decoration: none; }
.register-form form button:hover { background-color: #d9a70d; }

.field-flex { display: flex; gap:15px; }


/*Cart*/

.cart-tab-wrap > nav > button, .cart-bottom button, .cart-bottom a, .theme-btn, .payment-btn, .order-list-order tbody tr td button, .cancel-btn, .default-btn, .border-btn {     border-radius: 0;
    background-color: #f3be19;
    font-size: 18px;
    letter-spacing: 0px;     display: inline-block;
    line-height: 0;
    text-transform: uppercase;
    color: #000000;
    font-weight: 600;
    padding: 32px 50px;
    border: 2px solid #f3be19; border-radius: 50px;
    font-family: "Outfit", sans-serif;     display: inline-flex;
    align-items: center; }
.payment-btn, .cancel-btn, .default-btn, .border-btn { padding: 18px 30px; font-size: 16px; line-height: 16px; }
.back-btn { padding: 14px 20px; }
.order-list-order tbody tr td button { display: flex; padding: 8px 20px; font-size: 16px; text-transform: capitalize; line-height: 16px;  }
.cart-tab-wrap > nav > button { border: 0; border-radius: 0; }
.cart-bottom button:hover, .cart-tab-wrap > nav > button:hover, .cart-bottom a:hover, .theme-btn:hover, .payment-btn:hover, .order-list-order tbody tr td button:hover,
.default-btn:hover, .border-btn:hover { background-color: #d9a70d; border-color: #d9a70d; }
.cart-bottom a, .border-btn { background-color: transparent; }
.cancel-btn { background-color: #d42127; border-color: #d42127; }
.cancel-btn:hover { background-color: #c31e24; border-color: #c31e24; }

 

.cart-tab-wrap > nav > button.active-tab { background-color: #d71f26; color: #ffffff; }
.cart-tab-wrap > nav > button span {
  position: absolute;
    top: 15px; color: #ffffff;
    width: 30px;
    height: 30px;
    background: #333;
    font-size: 16px;
    line-height: 30px;
    border-radius: 50px;
    right: -13px;
}
#payment-form { text-align: center; }
.flex-grow { background-color: #f8faff; }
.cart-wrap .tab-content h3, .cart-wrap .tab-content .font-medium { font-size: 22px;
    letter-spacing: 0px;
    line-height: 32px;
    color: #000000;
    font-weight: 600;
    font-family: "Outfit", sans-serif; }
.cart-wrap .tab-content p { font-size: 18px;
letter-spacing: 0px; font-family: "Outfit", sans-serif;
line-height: 30px;
color: #000000;
font-weight: 400; }
.cart-wrap .tab-content .bg-white.rounded-lg, .check-out-inner{
  border-radius: 20px;
filter: drop-shadow(0 0 25.5px rgba(2,3,3,0.07));
background-color: #ffffff; padding: 20px;
}
.check-out-inner-payment, .order-list-order, .border-radius-shadow { border-radius: 20px; filter: drop-shadow(0 0 25.5px rgba(2,3,3,0.07)); background-color: #ffffff; padding: 40px 30px; margin-bottom: 50px !important; }
/*checkout*/
.total-summery {     padding: 30px;
    border: solid 1px #c2c2c2; }
.total-summery > div { padding-bottom: 10px; padding-top:10px;
    border-bottom: solid 1px #c2c2c2; }
    .total-summery > div:first-child { padding-top:0; }
.total-summery > div:last-child { padding-bottom: 0px; border-bottom: solid 0px #c2c2c2;  }
.check-out-wrap > *, .check-out-wrap, .Label, .Input, .p-FauxInput, .min-w-full > *, .min-w-full, .order-details, .order-details * { font-family: "Outfit", sans-serif; }
.order-list > .items-center { background-color: #ffffff; padding: 5px 10px; }
.order-list > .items-center:nth-child(odd) { background-color: #f5f5f5; }
.check-out-wrap, .order-wrap { padding-top: 120px; padding-bottom: 70px; padding-left: 15px; padding-right: 15px; }
.order-wrap { background-color: #f8faff; }
.next-wrap {margin-top: 60px;}
.check-out-wrap h1, .check-out-wrap h2 { font-size: 30px;
letter-spacing: 1px;
line-height: 30px;
color: #000000;
font-weight: 700; }
.order-list-order tbody tr td, .order-list-order thead tr th { padding: 8px !important; }
.order-list-order thead tr th { font-size: 18px; text-align: left;
letter-spacing: 0px;
line-height: 30px;
color: #ffffff; background: #515151;
font-weight: 700; }

.order-details { padding-top: 150px; padding-bottom: 20px; }
.check-out-inner .order-list h3 { font-size: 18px; line-height: 22px; }
.setting-wrap { background-image:none; background-color: #f8faff; padding-top: 70px; padding-bottom: 70px;  }
.upload-file p { font-size: 16px; line-height: 20px; }

.select2-container--bootstrap4 .select2-selection, .multiple-select .select2-container--bootstrap4 .select2-selection--single { border-radius: 33px !important; 
  background-color: #e1e1e1 !important; padding: 0 20px; height: 44px !important;  }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 43px;
    color: #495057;
    height: 43px;
}
p#cart-count { margin-bottom: 0px; }
.setting-wrap h4 {
  font-family: "Outfit", sans-serif; font-size: 22px; line-height: 32px;
}
.peer:focus ~ .peer-focus\:ring-4 {
    --tw-ring-offset-shadow: inherit;
    --tw-ring-shadow: inherit;
    box-shadow: inherit;
}
.peer:focus ~ .peer-focus\:outline-none { outline: none; }
.peer:checked ~ .peer-checked\:bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 190 25 / var(--tw-bg-opacity, 1)) !important;
}
.peer:focus ~ .peer-focus\:ring-green-300, .peer:focus ~ .peer-focus\:ring-green-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
}


/*header*/
header { background-color: #ffffff; position: relative; }
  header .logo { margin-bottom: -120px; }
    header > .container { align-items: flex-start; }
    header > .container nav { padding: 50px 0; }
    header a.register, .user-name { border-radius: 30px; background-color: #d71f26; padding:10px 30px; font-size: 18px;
letter-spacing: 0px;
line-height: 30px;
text-transform: uppercase;
color: #ffffff !important;
font-weight: 700;
font-family: "Outfit", sans-serif; }
header a.register:hover { background-color: #000000; }
.cart { display: flex;
  align-items: center; text-decoration: none;
  gap: 10px;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 30px;
  color: #424242; font-family: "Outfit", sans-serif;
  font-weight: 300; }
.circle-progress {
  position: relative;
  width: 80px;
  height: 80px;
}

.log-in-wrap { min-height: 100vh !important; padding-top: 320px; }
.progress-ring {
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 8;
}

.ring-progress {
  fill: none;
  stroke: #f9b716;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 226.19;         /* 2 * π * 36 */
  stroke-dashoffset: 226.19;        /* Start empty */
  animation: rotateProgress 1800s linear forwards; /* ⏱️ 1800 seconds */
}

.progress-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 24px;
  color: #f9b716;
  font-family: sans-serif;
}

/* Nandan Doss added */
.subcategory-wrapper {
    padding-left: 1.5rem; /* Keep your existing indent */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-left: 1px solid #e2e8f0;
    margin-top: 0.5rem;
    /* Optional: If there's a title, ensure it's block-level */
    /* .subcategory-title should already be block or have margin-bottom */
}

/* This is the key change: Make each label (or form-check div) a block-level element */
.subcategory-wrapper .form-check { /* Assuming each subcategory is wrapped in .form-check or directly a label */
    display: block; /* This forces each subcategory to take its own line */
    margin-bottom: 0.5rem; /* Add some vertical spacing between subcategories */
}

/* If your subcategories are direct labels without a .form-check wrapper, use this instead: */
/*
.subcategory-wrapper label {
    display: block;
    margin-bottom: 0.5rem;
}
*/

/* Ensure the checkbox and text are aligned */
.subcategory-wrapper .form-check input[type="checkbox"] {
    margin-right: 0.5rem; /* Space between checkbox and text */
}

/* You might also have a subcategory title. Ensure it behaves correctly. */
.subcategory-wrapper .subcategory-title {
    font-weight: 600;
    margin-bottom: 0.8rem; /* Slightly more space below the title */
    color: #4a5568;
    display: block; /* Ensure the title is also on its own line */
}
/* Nandan Doss added end */

@keyframes rotateProgress {
  to {
    stroke-dashoffset: 0;  /* End at full circle */
  }
}

/*pagination*/
.pagination span.shadow-sm.rounded-md { gap:20px; font-family: "Outfit", sans-serif; }
.pagination span.shadow-sm.rounded-md > *, .pagination span.shadow-sm.rounded-md > span > span { border-radius: 50px; }
.pagination .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: #e1e1e1;
  }
.pagination .dark\:border-gray-600 { border-color: #e1e1e1; }
.pagination .text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(0, 0, 0);
}
.pagination span.shadow-sm.rounded-md > span[aria-current="page"] span { background-color: #d71f26; color: #ffffff; border-color: #d71f26; font-family: "Outfit", sans-serif; }
.pagination span.shadow-sm.rounded-md > a { color: #000000; }
.pagination span.shadow-sm.rounded-md > a:hover { background-color: #d71f26; color: #ffffff; border-color: #d71f26; }
.pagination nav .hidden p { color: #000000; font-family: "Outfit", sans-serif; }

.header-drop a.block { font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000; }
#topUpModal .modal-dialog { border-radius: 20px; }
.btn-default, #topUpModal .modal-footer button, .swal2-actions .swal2-confirm, .swal2-actions .swal2-cancel { font-size: 16px;
  letter-spacing: 0px;
  line-height: 52px;
  color: #000000;
  font-weight: 600;
  font-family: "Outfit", sans-serif;
  text-align: center;
  text-transform: uppercase; border:solid 2px #f3be19;
  padding: 1px 30px;
  border-radius: 31px;
  background-color: #f3be19;
  position: relative; display: flex; align-items: center; gap:5px;
  z-index: 2; }
.btn-default svg { width: 22px; }
.btn-default:hover svg { fill: #ffffff; }
.btn-default:hover, #topUpModal .modal-footer button#confirm-top-up:hover, .swal2-actions .swal2-confirm:hover {
  color: #ffffff;
  background-color: #000000;
}
.default-border, #topUpModal .modal-footer button.btn-secondary, .swal2-actions .swal2-cancel { border:solid 2px #f3be19; background-color: transparent; }
.default-border:hover, #topUpModal .modal-footer button.btn-secondary:hover, .swal2-actions .swal2-cancel:hover { border:solid 2px #f3be19; background-color: #f3be19; }
#listModal, .check-out-inner, .rounded-lg.shadow-md, #card-panel label, .swal2-icon-success { font-family: "Outfit", sans-serif;  }
.item-list-cart { font-family: "Outfit", sans-serif; border-radius: 20px; box-shadow: 0px 0px 10px 0px rgba(145,145,145,0.75); -webkit-box-shadow: 0px 0px 10px 0px rgba(145,145,145,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(145,145,145,0.75); }
.inner-item { background-color: #eaeaeacc; padding: 15px; margin-bottom: 30px; border-radius: 5px; }
.item-list-cart h3 { text-transform: capitalize; }
.add-to-cart-wrap { margin-top: 50px; margin-bottom: 50px; }
#listModal { z-index: 999; }


.header-drop a.block:hover{background-color:#f3be19;}
.header-drop{border-radius:0;}
.register-form form button{padding: 25px 45px;}
.order-wrap .order-list-order{margin-bottom: 0px !important;}

.removeProductOrder svg { width: 18px; fill:#d71f26; }
#listModal  {padding: 15px; }
.outer-sec .rounded-lg.shadow-md { padding: 35px 20px 35px 20px !important; }


/* Plus minus button style */

.control-minus-plus-btn-wrap{
padding: 10px;
  margin-bottom: 15px !important;
  border-radius: 50px !important;
  justify-content: space-between;
  width: 199px;
  margin: auto;
}
.control-minus-plus-btn-wrap .control-btn-new{
padding: 5px !important;
  height: 40px;
  width: 40px !important;
  border: solid 1px #f3be19;
  background-color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-minus-plus-btn-wrap .control-btn-new:hover{
  background-color: #b7151a !important;
  color: #fff;
  border: solid 1px #b7151a;
}


/* Banner register */


#hero-sec-wrap.hero-section img{
width: 100%;
}
#hero-sec-wrap .hero-overlay {
  position: absolute;
  top: 50%;
  right: 230px;
  width: 450px;
  transform: translateY(-50%);
  height: 440px;
  border-radius: 180%;
  background: #f2bd1987;
  display: flex;
  align-items: center;
  padding: 44px;
  text-align: center;
  justify-content: center;
  border: solid 8px #f2bd19;
}

#hero-sec-wrap .hero-overlay .hero-content {
  display: flex;
  flex-direction: column;
  gap: 47px;
  color: #fff;
  align-items: center;
}
#hero-sec-wrap.hero-section{
position: relative;
z-index: 1;
}
#hero-sec-wrap .hero-overlay .hero-content a.register{
border-radius: 30px;
  background-color: #d71f26;
  padding: 10px 30px;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 30px;
  text-transform: uppercase;
  color: #ffffff !important;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  width: max-content;
}

header {
  z-index: 2;
}
#hero-sec-wrap .hero-overlay .hero-content a.register:hover{
background-color: #000000;
}
#hero-sec-wrap .hero-overlay .hero-content p{
font-size: 20px;
  font-weight: bold;
}

/* Verification notice */

.verification-notice-wrap{
  padding: 120px 0;
      background-image: url(https://moniciapoole.com/assets/front-end/images/login-bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.verification-notice-wrap .verification-notice-header{  
    background: #d71f26;
}

.verification-notice-wrap .verification-notice-header .verification-notice-header-round{  
    background: #edb514;
    border: solid 4px #ffffff8a;
}
.verification-notice-wrap .verification-notice-header .verification-notice-header-round svg{  
        color: #000;
}


.variification-notice-actions button, .variification-notice-actions a {
  border-radius: 31px;
  background-color: #f3be19;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 0;
  text-transform: uppercase;
  color: #000000;
  font-weight: 600;
  margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
  padding: 25px 0;
  border: 0;
      box-shadow: none;
       border: solid 2px #f3be19;
       margin-top: 25px;
       text-align: center;
}

.variification-notice-actions button:hover, .variification-notice-actions a:hover {
  background-color: #000000;
  color: #ffffff;
  border: solid 2px #f3be19;
}

.variification-notice-actions a{
    width: 100%;
}
.variification-notice-actions form {
  width: 100%;
}

.variification-notice-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}


@media(max-width: 1500px){
  #hero-sec-wrap .hero-overlay{
    right: 130px;
  }
}

@media(max-width: 1220px){
  #hero-sec-wrap .hero-overlay{
    right: 80px;
    width: 380px;
  height: 380px;
  }
}

@media(max-width: 1024px){
  #hero-sec-wrap .hero-overlay{
right: 40px;
  }
}

@media(max-width: 991px){
  #hero-sec-wrap .hero-overlay{
width: 100%;
  border-radius: 0;
  height: auto;
  transform: unset;
  position: unset;
  background: #edb314;
  padding: 25px 44px;
  }

  #hero-sec-wrap .hero-overlay .hero-content p{
    color: #000;
    font-size: 18px;
  }

  #hero-sec-wrap .hero-overlay .hero-content{
    text-align: left;
  flex-direction: row;
  }

  #hero-sec-wrap .hero-overlay .hero-content a.register{
    font-size: 12px;
  }

  .resp-width-90{
    width: 90% !important;
  }
}

@media (max-width: 614px) {
  #hero-sec-wrap .hero-overlay .hero-content {
    flex-direction: column;
    gap: 15px;
  }

  #hero-sec-wrap .hero-overlay .hero-content{
    gap: 15px;
  }

  #hero-sec-wrap .hero-overlay{
    padding: 10px 44px;
  }

  #hero-sec-wrap .hero-overlay .hero-content a.register{
    padding: 5px 30px;
  }


  #hero-sec-wrap .hero-overlay .hero-content p{
    text-align: center;
    font-size: 16px;
  }
  .variification-notice-actions {
    display: grid !important;
    grid-template-columns: none;
    gap: 0 !important;
}

  .variification-notice-actions button, .variification-notice-actions a {
    padding: 20px 0;
        margin-top: 11px;
            font-size: 14px;
  }

  .verification-notice-wrap{
    padding: 60px 0;
  }
  
}








@media(max-width:1399px) and  (min-width:1300px){
.outer-sec .rounded-lg.shadow-md {padding: 20px !important;}
.outer-sec .rounded-lg button{padding: 13px 35px;}
}

@media(max-width:1299px) and  (min-width:1200px){
 .step-inner{max-width: 100% !important; gap: 20px !important;}
.how-it-work .step-item{padding: 20px 60px 30px 60px !important;}
.outer-sec .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
.outer-sec .rounded-lg button{padding: 11px 30px;}
.outer-sec .pagination nav .hidden{flex-direction: column !important;}
.outer-sec .pagination nav .hidden p{margin-bottom:10px;}
.outer-sec .sec1 .card-header h6{padding: 20px 20px;}
}

@media(max-width:1199px) and  (min-width:1025px){
 .step-inner{max-width: 100% !important; gap: 20px !important;}
.how-it-work .step-item{padding: 20px 60px 30px 60px !important;}
.how-it-work .step-item h6 {font-size: 24px !important;}
.item-shop h3 {font-size: 32px !important; letter-spacing: 1px; line-height: 30px;}
 header .logo img{width: 85%;}
.outer-sec .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
.outer-sec .rounded-lg button{padding: 11px 30px;}
.outer-sec .pagination nav .hidden{flex-direction: column !important;}
.outer-sec .pagination nav .hidden p{margin-bottom:10px;}
.outer-sec .sec1 .card-header h6{padding: 20px 20px;}
.outer-sec {padding: 110px 10px 110px 10px;}

}

@media(max-width:1024px) and  (min-width:768px){
.shop-category-wrap h1, .how-it-work h2 {font-size: 52px; letter-spacing: 1px; line-height: 75px;}
.item-shop h3 {font-size: 26px !important; letter-spacing: 0px !important;}
.banner-sec h1 {font-size: 75px; letter-spacing: 1px; line-height: 90px;}
.registr h2 {font-size: 60px; letter-spacing: 1px; line-height: 70px;}
 header .logo{width:36%;}
 header > .container nav {padding: 30px 0; padding-right: 10px;}
 .step-inner{max-width: 100%; gap: 20px; flex-direction: column;}
.shop-category-wrap .grid-container{grid-template-columns: repeat(2, 1fr) !important;}
.item-shop:nth-child(2) {height: 820px !important;}
.item-shop {padding: 20px !important; height: 400px !important;}
.item-shop .btn-default {line-height: 50px !important; padding: 1px 38px !important;}
.shop-category-wrap, .how-it-work {padding: 90px 20px 100px 20px !important;}
.step-inner{gap: 80px !important;}
.footer {padding: 90px 10px 50px 10px;}
.outer-sec .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.outer-sec .rounded-lg button{padding: 11px 30px;}
.outer-sec .pagination nav .hidden{flex-direction: column !important;}
.outer-sec .pagination nav .hidden p{margin-bottom:10px;}
.outer-sec .sec1 .card-header h6{padding: 20px 20px;}
.outer-sec {padding: 90px 10px 90px 10px;}
.outer-sec .inner-sec .sec1 {width: 30%;}
.outer-sec .inner-sec .sec2 {width: 70%;}
.banner-sec {padding: 140px 10px 120px 10px;}
.outer-sec .pagination nav .hidden .relative{display: inline-table; margin: 0px 5px;}
.outer-sec .sec1 .card-header h6 {font-size: 20px; line-height: 30px;}
.btn-default, #topUpModal .modal-footer button, .swal2-actions .swal2-confirm, .swal2-actions .swal2-cancel{font-size: 14px; line-height: 26px; padding: 10px 23px;}
.setting-wrap .border-radius-shadow{margin-bottom: 0px !important;}
.cart-wrap{padding-left: 10px; padding-right: 10px;}
.order-details {
  padding-top: 70px;
  padding-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
}
.order-details table .divide-y td { padding: 5px !important; }
.order-wrap > div, .order-details .listing-order { overflow-x: auto !important;   -webkit-overflow-scrolling: touch; }
.user-name-wrap {
  width: 40px !important;
  height: 40px !important; }
  .item-shop .btn-default { line-height: 30px !important; padding: 0 30px; }
  .cart-tab-wrap nav { padding-bottom: 20px; }
  .cart-wrap .tab-content .bg-white.rounded-lg, .cart-wrap .tab-content .bg-white.rounded-lg { overflow-x: auto !important; }
  .admin-logo {display: none !important; }
  .log-in-wrap { align-items: center; padding: 15px; }

}

@media(max-width: 767px){
.shop-category-wrap h1, .how-it-work h2 {font-size: 40px !important; letter-spacing: 0px !important; line-height: 50px !important;}
.item-shop h3 {font-size: 24px !important; letter-spacing: 0px !important; line-height: 30px !important;}
.how-it-work .step-item h6 {font-size: 25px !important; letter-spacing: 0px !important; line-height: 30px !important;}
.registr h2 {font-size: 45px; letter-spacing: 0px; line-height: 55px;}
.registr p {font-size: 20px; letter-spacing: 0px; line-height: 30px;}

.check-out-wrap, .order-wrap { padding-top: 60px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; }
.step-inner {gap: 80px !important; flex-direction: column;}
.shop-category-wrap .grid-container {display: block;}
.shop-category-wrap .item-shop{margin-bottom:15px; background-repeat: no-repeat; background-size: cover;}
header .logo {margin-bottom: -30px; width: 35%;}
.shop-category-wrap {padding: 50px 10px 65px 10px !important;}

.how-it-work{padding: 50px 20px 65px 20px !important;}
.shop-category-wrap .item-shop {padding: 20px; height: 370px !important; gap: 20px;}
.item-shop .btn-default {line-height: 50px !important;}
.how-it-work .step-item:before {top: -40px !important; height: 150px !important; font-size: 20px !important; line-height: 20px !important;}
.footer {padding: 70px 10px 50px 10px;}
.footer img{width:50%;}
.banner-sec {padding: 100px 10px 100px 10px;}
.banner-sec h1 {font-size: 55px; letter-spacing: 0px; line-height: 65px;}
.outer-sec .inner-sec {display: block;}
.outer-sec .inner-sec .sec1 {width: 100%; padding-right: 0px;}
.outer-sec .inner-sec .sec2 {width: 100%;}
.outer-sec {padding: 60px 20px 35px 20px;}
.outer-sec .sec1 .card-header h6{font-size: 20px; letter-spacing: 0px; line-height: 30px; padding: 20px;}
.outer-sec .inner-sec .sec2 .ajax-hidden .px-4{padding-left: 0px; padding-right: 0px;}
.outer-sec .rounded-lg button{padding: 11px 30px !important;}
.outer-sec .rounded-lg h3{min-height: auto;}
#registerForm .field-flex{display: block;}
.btn-default, #topUpModal .modal-footer button, .swal2-actions .swal2-confirm, .swal2-actions .swal2-cancel{font-size: 14px; line-height: 26px; padding: 10px 23px;}
.setting-wrap .border-radius-shadow{margin-bottom: 0px !important;}
.cart-wrap .tab-content .bg-white.rounded-lg.shadow-md .flex.justify-between.items-center.border-b { padding-top: 5px; padding-bottom: 5px;}
.cart-wrap{padding-left: 20px; padding-right: 20px;}
header > .container nav  {display: flex; }
header > .container nav img { width: 30px; }
header a.register, .user-name {
    
    padding: 4px 16px;
    font-size: 14px; }
    header > .container nav {
    padding: 22px 10px;
    display: flex;}
header > .container nav a { margin-left: 0px !important; }
header > .container nav a.cart { font-size: 0; position: relative; margin-right: -20px !important; }
 header > .container nav a.cart #cart-count {
    background-color: #d71f26;
    font-size: 12px;
    border-radius: 50px;
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    top: -5px;
    right: 20px;
    color: #fff;
  }
  header > .container nav .relative.group, header > .container nav .logut-timer { margin-left: 10px !important; }
  .cart-tab-wrap > nav > button, .cart-bottom button, .cart-bottom a, .theme-btn, .payment-btn, .order-list-order tbody tr td button, .cancel-btn, .default-btn, .border-btn {
  border-radius: 0;
  background-color: #f3be19;
  font-size: 14px;
  letter-spacing: 0px;
  display: inline-block;
  line-height: 0;
  text-transform: uppercase;
  color: #000000;
  font-weight: 600;
  padding: 20px 22px;
  border: 2px solid #f3be19;
  border-radius: 50px;
  font-family: "Outfit", sans-serif;
  display: inline-flex;
  align-items: center;
}
.cart-tab-wrap > nav > button span {top:5px;}
.cart-wrap .tab-content h3, .cart-wrap .tab-content .font-medium {
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 26px; }

  .order-details {
  padding-top: 70px;
  padding-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
}
.order-details table .divide-y td { padding: 5px !important; }
.order-wrap > div, .order-details .listing-order { overflow-x: auto !important;   -webkit-overflow-scrolling: touch; }
.order-list-order tbody tr td button {
  display: flex;
  padding: 8px 20px;
  font-size: 16px;
  text-transform: capitalize;
  line-height: 16px;
}
.user-name-wrap {
  width: 40px !important;
  height: 40px !important; }
  .item-shop .btn-default { line-height: 40px !important; padding: 0 30px !important; }
  .cart-tab-wrap nav { padding-bottom: 15px; }

.cart-wrap{overflow-x: auto;}
.order-details .flex.justify-between.items-center.mb-6{flex-direction: column; align-items: end;}
.order-details .flex.justify-between.items-center.mb-6 div{text-align: left; width: 100%;}
.setting-wrap button{padding: 20px 22px !important; font-size: 14px !important;}
header > .container nav .relative.group{margin-left:0 !important;}
header .user-name-wrap{width: 40px !important; height: 40px !important; padding: 16px; font-size: 15px;}
header > .container nav { padding: 6px 10px !important; }
.cart-wrap .tab-content .bg-white.rounded-lg { overflow-x: auto !important; }
.cart-wrap .tab-content h3 {
        font-size: 15px;
        letter-spacing: 0px;
        line-height: 19px;
        width: 175px;
        padding-right: 15px;
    }
    .admin-logo {display: none !important; }
    .log-in-wrap { align-items: center; padding: 15px; }
}

.edit-icon-profile { width: 36px; display: flex; justify-content: center;  align-items: center;}
.membership-plans-css .bg-red-50 p.text-sm, .membership-plans-css .bg-blue-50 p.text-sm { min-height: 60px;}
.upgrade-plans-class .bg-white { position: relative;}
.upgrade-plans-class form { position: absolute; bottom: 20px;  left: 20px; width: 84%; }
.upgrade-plans-class .space-y-3 { padding-bottom: 50px;}
.membership-plan-card .membership-plan-card-inner { min-height: 157px; }
.membership-plan-card .membership-plan-list { min-height: 192px; }


@media (min-width: 1200px) and (max-width: 1299px) {

header > .container { width: 100%; max-width: 100%; padding: 0 30px;} 
header a.register, .user-name { padding: 10px 15px; font-size: 14px;}
 
} 

@media (min-width: 1100px) and (max-width: 1199px) {

header > .container { width: 100%; max-width: 100%; padding: 0 30px;} 
header a.register, .user-name { padding: 10px 15px; font-size: 14px;}
.header-wrap .logo { width: 35%;}
.header-wrap .logo img { width: auto;}


} 

@media (min-width: 992px) and (max-width: 1099px) {

.membership-plans-css .bg-red-50 p.text-sm, .membership-plans-css .bg-blue-50 p.text-sm, .membership-plans-css .bg-yellow-50 p.text-sm { min-height: 80px; }
header > .container { width: 100%; max-width: 100%; padding: 0 30px;} 
header a.register, .user-name { padding: 10px 15px; font-size: 14px;}
.header-wrap .logo { width: 25%;}
.header-wrap .logo img { width: auto;}


}

@media (min-width: 768px) and (max-width: 991px) {

.membership-plans-css .bg-red-50 p.text-sm, .membership-plans-css .bg-blue-50 p.text-sm, .membership-plans-css .bg-yellow-50 p.text-sm { min-height: 80px; }
header > .container { width: 100%; max-width: 100%; padding: 0 10px;}
header .cart { font-size: 12px;}
header .cart img { width: 32px;}
.user-warning { font-size: 12px;}
header a.register, .user-name { padding: 10px; font-size: 12px;}
.header-wrap .logo { width: 25%;}
.header-wrap .logo img { width: auto;}
.header-wrap .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 10px;}



}

@media (max-width: 767px) {

header > .container nav { width: 100%; display: flex; align-items: center;  justify-content: space-between;}
.header-wrap .container { display: flex; flex-direction: column; align-content: center; justify-content: center;  align-items: center; gap: 20px;}
header .cart { font-size: 12px;}
header .cart img { width: 32px;}
.user-warning { font-size: 12px;}
header a.register, .user-name { padding: 10px; font-size: 12px;}
.header-wrap .logo { width: 40%;}
.header-wrap .logo img { width: auto;}
.header-wrap .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 10px;}
.thankyoucontainer { padding: 20px !important;}


}

@media (max-width: 480px) {

header > .container nav  { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px;}
.header-wrap .logo { margin-bottom: 0;}


}
@media (max-width: 320px) {

.setting-wrap .upload-file { display: flex; flex-direction: column; align-items: flex-start;}
.setting-wrap .upload-file .flex-1 { margin: 0 !important;}


}