/* header */
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
    overflow-x: hidden !important;
}

.philosopher-regular {
    font-family: "Philosopher", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.philosopher-bold {
    font-family: "Philosopher", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.philosopher-regular-italic {
    font-family: "Philosopher", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.philosopher-bold-italic {
    font-family: "Philosopher", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.main-header,
.second-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.navbar-expand-lg {
    padding: 0px;
    margin: 0px;
}

.two {
    margin-top: -10px;
}

.main-header {
    transform: translateY(0);
    opacity: 1;
    background-color: #FFFDD0;
    /*background-color: #C09B21;*/


}


.second-header {
    transform: translateY(-100%);
    opacity: 0;
    background-color: #FFFDD0;
    /*background-color: #C09B21;*/

}

.sec-logo {
    width: 12%;
    text-align: center;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-icons {
    display: flex;
    width: 45%;
    align-items: center;
    justify-content: end;
}

.second-header .navbar-collapse {
    display: flex !important;

}

.second-header .navbar-collapse ul {
    width: 45%;

}

.sec-logo img {
    width: 70px;
}

.second-header .nav-link {
    margin-left: 0px !important;
    letter-spacing: 1px;

}

.main-header.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.second-header.visible {
    transform: translateY(0);
    opacity: 1;
}

.main-header {
    transform: translateY(0);
    opacity: 1;
}

.main-header.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.second-header {
    transform: translateY(-100%);
    opacity: 0;
}

.second-header.visible {
    transform: translateY(0);
    opacity: 1;
}


.nav-item .dropdown-menu2 {
    position: absolute;
    top: 80%;
    left: 30%;
    right: 0;
    width: 50vw;
    background: white;
    display: none;
    list-style: none;
    padding: 30px 50px;
    margin: 0;
    border-radius: 6px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-item .dropdown-menu4 {
    position: absolute;
    top: 80%;
    left: 0px;
    right: 0;
    width: 50vw;
    background: white;
    display: none;
    list-style: none;
    padding: 30px 50px;
    margin: 0;
    border-radius: 6px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.www-100 {
    width: 800px !important;
    top: 70% !important;

}

.www-100 ul {
    width: 100% !important;
}

.nav-item2 {
    position: relative;
}

.nav-item2 .dropdown-menu3 {
    position: absolute;
    top: 80%;
    left: 0px;
    right: 0;
    width: max-content;
    background: white;
    display: none;
    list-style: none;
    padding: 20px;
    margin: 0;
    border-radius: 6px;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-item:hover .dropdown-menu2 {
    display: block;
    animation: fadeUp 0.4s ease forwards;
}

.nav-item:hover .dropdown-menu4 {
    display: block;
    animation: fadeUp 0.4s ease forwards;
}


.nav-item:hover .dropdown-menu3 {
    display: block;
    animation: fadeUp 0.4s ease forwards;
}

.dropdown-menu2 a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.dropdown-menu3 a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.nav-link {

    color: #035527 !important;
    margin-left: 16px !important;
    letter-spacing: 1px;
    font-weight: 700 !important;
}

.dropdown-menu2 a:hover {
    color: #007bff;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-one {
    transition: all 0.3s ease-in-out;
}

.header-one.hide {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

.top-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-chakra {
    /*background-color: rgba(255, 255, 255, 0.251);*/
    width: max-content;
    padding: 20px;
    border-radius: 0px 0px 30px 30px;


}
.chakra-phone{
     /*background-color: rgba(255, 255, 255, 0.251);*/
     border-radius:  10px;
      padding: 10px;
}

.top-logo img {
    width: 120px;
}



.location-box {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.social-links {
    display: flex;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-item {
    background-color: transparent;
    border: 1px solid #a8cb5e74;
    padding: 3px 10px;
    list-style: none;
    border-radius: 20px;
}

.location-item i {
    margin-right: 4px;
}

.location-item a {
    text-decoration: none;
    color: #3d5c00;
    font-weight: 600;

}

.hr {
    margin: 0px;
    padding: 0px;
    color: #cfcfcf;
}

.social-links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
    color: white;
    text-decoration: none;
    background: #ccc;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(50, 50, 50, 0.07);
}

.social-links li a.facebook {
    background: #3b5998;
}

.social-links li a.instagram {
    background: radial-gradient(circle at 30% 90%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
/* YouTube */
.social-links li a.youtube {
  background: #ff0000; /* YouTube red */
}
.social-links li a.youtube:hover {
  background: #cc0000;
}


.social-links li a.twitter {
    background: #1da1f2;
}

.social-links li a.youtube {
    background: #ff0000;
}

.social-links li a:hover {
    transform: scale(1.13) rotate(-7deg);
    box-shadow: 0 4px 12px rgba(40, 40, 40, 0.16);
    filter: brightness(1.15);
}

.social-links li a.facebook:hover {
    background: #405fa9;
}

.social-links li a.instagram:hover {
    background: radial-gradient(circle at 50% 50%, #d6249f 50%, #fd5949 90%);
}

.social-links li a.twitter:hover {
    background: #0d95e8;
}

.social-links li a.youtube:hover {
    background: #e52d27;
}

.icons {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    list-style: none;
}

.acc {
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0px !important;
    font-size: 16px !important;
    text-align: left !important;
    margin-left: 0px !important;
}

.acc:hover {
    transition: none !important;
}

.icons .list-inline-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6CA41F;
    background: #f5f6fa;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 22px;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.07);
    position: relative;
}

.icons .list-inline-item a:hover {
    color: #476e0f;
    background: #f3ffe3;
    transform: scale(1.10);
}

.icons .list-inline-item.position-relative a {
    position: relative;
}


.icons .list-inline-item.position-relative a span {
    position: absolute;
    top: -8px;
    right: -9px;
    background: #ff2a6d;
    color: white;
    font-size: 13px;
    border-radius: 50%;
    padding: 2px 9px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

.icons .dropdown-toggle {
    background: none;
    color: #555;
    border: none;
    outline: none;
    font-size: 22px;
    padding: 0;
    transition: color 0.19s;
}

.icons .dropdown-toggle:hover {
    color: #3282f7;
}

.dropdown-menu {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.11);
}

.dropdown-menu .dropdown-item {
    font-size: 16px;
    color: #525252;
    transition: background 0.17s, color 0.17s;
}

.dropdown-menu .dropdown-item:hover {
    background: #f1f7ff;
    color: #3282f7;
}

.text-end {
    text-align: right;
}


.icon-with-count {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}

.icon-with-count .count {
    position: absolute;
    top: -13px;
    right: -13px;
    background: red;
    color: white;
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 50%;
}


.top-header {
    background-color: #f3ffe2;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}


.top-header {
    position: sticky;
    width: 100%;
    top: 0px;
    z-index: 9999;
}

.cart {
    display: flex;
    gap: 20px;
    align-items: center;
}

.cart i {
    color: #8f8f8f;

}

.cart-icon {
    position: relative;
    display: inline-block;
    color: #000;
    padding: 1px;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -4px;
    background-color: red;
    color: white;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 50%;
    font-weight: bold;
    line-height: 1;
}

.drop-word {
    display: flex;
    align-items: flex-start;
    gap: 5px;

}

.drop-word i {
    margin-top: 3px;
    font-size: 13px;
}



/* 🔹 Notification Wrapper (Fixed at top-right) */
.notification-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    /* Always on top */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* space between multiple alerts */
}

/* 🔹 Alert Box Styling */
.custom-alert {
    position: relative;
    width: max-content;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 🔹 Error Styling */
.custom-alert.error {
    background: #fcebea;
    border-left: 6px solid #e3342f;
    border-right: 6px solid #e3342f;
    color: #cc1f1a;
}

/* 🔹 Success Styling */
.custom-alert.success {
    background: #e6ffed;
    border-left: 6px solid #38c172;
    border-right: 6px solid #38c172;
    color: #1f9d55;
}

/* 🔹 Close Button */
.custom-alert .btn-close {

    margin-left: 50px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: #555;
    transition: color 0.2s ease;
}

.custom-alert .btn-close:hover {
    color: #000;
}





.popup-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(120deg, #000000cf 40%, #000000c3 100%);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    transition: opacity 10s;
}

.popup-content {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(30, 100, 50, 0.12);
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 320px;
    max-width: 50vw;
}

.popup-banner-img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.popup-offer-text {
    text-align: center;
    margin-top: 0.25rem;
}

.popup-offer-text h2 {
    margin: 0 0 0.6rem 0;
    color: #1a6d3a;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.popup-offer-text p {
    color: #333;
    font-size: 1.06rem;
    font-weight: 500;
}

.offer-code {
    background: #e8f5ef;
    color: #219150;
    font-weight: bold;
    padding: 2px 12px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.popup-close {
    position: absolute;
    top: -18px;
    right: -18px;
    font-size: 2.2rem;
    background: #ff4f4f;
    border: none;
    border-radius: 50%;
    color: white;
    padding: 0 13px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 0.2s;
}


/* Responsive */
@media (max-width:600px) {
    .popup-content {
        padding: 1.3rem 0.7rem;
        min-width: 90vw;
    }

    .popup-banner-img {
        max-width: 90vw;
        max-height: 100%;
    }
}



/* header */

.dropdown {
    position: relative;
    background-color: transparent;

}

.dropdown-header {
    position: absolute !important;
    left: 74%;
    transform: translateX(-24%);
    top: 76px;
    width: 80vw;
    max-width: 100vw;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    z-index: 9999;
    background-color: #f3ffe2;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 0;
    border-radius: 8px;
    color: black;
    pointer-events: none;

}

.dropdown-header a {
    cursor: pointer;
}

.dropdown:hover .dropdown-header {
    height: auto;
    opacity: 1;
    visibility: visible;
    padding: 10px;
    pointer-events: auto;
}

.dropdown:hover .dropdown-header-content {
    animation: fadeInDown 1s both;
}

.drop-down-option {
    width: 100%;
    padding: 20px;
}

.dropdown h5 {
    color: black !important;
}

.row.ddd {
    margin: 0 -8px;
}

.row.ddd .col-lg-3,
.row.ddd .col-lg-2 {
    padding-left: 8px;
    padding-right: 8px;
}

.mb-4 {
    margin-bottom: 2.2rem !important;
}

.ddd .mb-4 {

    border-radius: 18px;
    padding: 20px;
    transition: transform 0.23s cubic-bezier(.35, 1.28, .37, 1.07), box-shadow 0.23s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}


.ddd h5 {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
    color: #0f7f29;
    font-size: 16px;
}

.ddd ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.ddd ul li {
    margin-bottom: 14px;
    border-left: 3px solid #00786e;
    padding-left: 10px;
    transition: border-color 0.25s;
}

.ddd ul li:last-child {
    margin-bottom: 0;
}

.ddd ul li a {
    color: #231557;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.22s;
    display: inline-block;
    position: relative;
}

.ddd ul li a::after {
    content: '';
    display: block;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #00690c, #028931);
    transition: width 0.2s cubic-bezier(.37, 1.32, .63, 1.13);
    position: absolute;
    bottom: -3px;
    left: 0;
}

.ddd ul li a:hover {
    color: #005c39;
}

.ddd ul li a:hover::after {
    width: 100%;
}





.drop-down-option ul {
    list-style: none !important;
    padding-left: 0;
    margin: 0;
}

.drop-down-option a {
    text-decoration: none !important;
    display: block;
    transition: color 0.3s ease;
}

.drop-down-option a {
    padding: 3px !important;
    color: rgb(133, 133, 133) !important;
}

.drop-down-option a:hover {
    color: black !important;

    background-color: rgb(250, 250, 250);
    border-radius: 3px;
}

.drop-down-option ul {
    flex-direction: column !important;
    gap: 0px !important;


}

.drop-down-option li {
    padding-top: 0px !important;
    padding: 5px 0px !important;
}



.link ul {
    display: flex !important;
    list-style: none !important;
    gap: 20px;
}



.top-header ul {
    margin: 0px !important;
    padding: 0px !important;
}

.link li {
    padding: 25px 0px;
}


.nav-icon {

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: right;
}

.top-bar {
    background: #647A2F;

    padding: 0 !important;
    font-family: "Gill Sans", Calibri, sans-serif;
}

.top-bar .item p {
    color: white !important;
    padding: 10px 50px;
    font-weight: 400 !important;
    font-size: 21px;
    margin-bottom: 0px !important;
    /* From https://css.glass */
    background: #647A2F;
    width: 100%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    clip-path: polygon(0 0, 100% 0, 97% 100%, 2% 100%);
}

.quick-link {
    padding-top: 10px;
}

.quick-link ul {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: start;
}

.logo {
    width: 200px;
}

.nav-icon ul {
    padding-top: 10px;
    display: flex;
    gap: 30px;
    list-style: none;
}

.quick-link li {
    list-style: none;
    margin-left: 10px;
}

.quick-link a {
    color: rgba(0, 0, 0, 0.632);
    text-decoration: none;
}

.tab-link {
    display: none;
}

.mobile-toogle {
    display: none;
}

.mobile-icon {
    display: none;
}



.sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #222;
    color: white;
    padding-top: 60px;
    transition: left 0.3s ease;
    z-index: 999900;
}

.sidebar li {
    list-style: none;
}

.close {
    position: absolute;
    top: 15px;
    right: 15px;

}

.close i {

    font-size: 25px;
}


.sidebar.open {
    left: 0 !important;
}

.sidebar a {
    display: block;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.sidebar a:hover {
    background-color: #444;
}


.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;

}

.nav-container .link ul {
    display: flex;
    gap: 30px;
    list-style: none;
    padding-top: 13px;
}

.nav-container .link a {
    text-decoration: none;
    color: black;

}

.nav-icon i {
    font-size: 21px;
    background-color: rgb(245, 245, 245);
    padding: 10px;
    border-radius: 50%;
    color: #4c6517;
}

.carousel-three {
    overflow: hidden;

}


/* hero */
.hero {
    margin: auto;
    margin-top: 200px;
    width: 100%;

}


.hero-carousel .item {
    position: relative;
}

.hero-carousel .item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    height: 600px;
}

.hero-carousel .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    /* optional */
}



.hero-carousel .item {
    position: relative;
}

.hero-carousel img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Default: show desktop image */
.desktop-img {
    display: block;
}

.mobile-img {
    display: none !important;
}


.hero-carousel .item {
    height: auto !important;
    object-fit: cover;
    position: relative;
    object-position: center;
    border-radius: 10px;
}


.hero-carousel .item img {
    width: 100%;
    object-fit: cover;
    height: 100%;


}

.hero-carousel .poster-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    margin: auto;
    text-align: center;
    /* Optional: centers text inside */
    z-index: 9999;
}

.poster-text h1 {
    color: white;
    font-size: 55px;
}

.poster-text p {
    color: rgba(255, 255, 255, 0.675);
}

.poster-text a {
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    color: #4c6517;
    font-weight: 600;
}


.overlay {
    background-color: rgba(0, 0, 0, 0);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    border-radius: 10px;
}

.counter-overlay {
    background-color: #4c64178e;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;

}






.hero-carousel .owl-carousel .center .item {
    transform: scale(1.3);
    opacity: 100%;
}

.hero-carousel .owl-nav button {
    background: #00000042 !important;
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
    padding: 10px;
    border-radius: 50% !important;
    margin: 5px;
}



.overlay-slider {
    height: 300px;
    width: 600px;
    border-radius: 250px;
    position: absolute;
    top: 190px;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.844);
    backdrop-filter: blur(12.9px);
    -webkit-backdrop-filter: blur(12.9px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;

}


/* //other */

.other-section {
    padding-top: 40px;
}


.section-heading {
    text-align: center;
}

.section-heading span {
    padding: 5px 20px;
    font-size: 11px;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    background-color: #4c6517;


}

.section-heading h3 {
    color: #4c6517;

}

.other-section-container {
    padding: 40px 0px;
}


.other-box {
    text-align: center;
}

.other-box h3 {
    color: #4c6517;
    margin-top: 10px;
    font-size: 23px;
}

.other-box span {
    padding: 5px 10px;
    border: 1px solid #4c6517;
    font-size: 11px;
    color: #4c6517;
    font-weight: 600;
    border-radius: 50px;
    background-color: transparent;


}

.other-box p {
    color: rgb(167, 167, 167);
}

.other-box a {
    text-decoration: none;
    color: #4c6517;

}

.other-box a i {
    font-size: 11px;
}

.other-box img {
    width: 200px;
    opacity: 80%;
}


/* //product  */



.discount {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #4c6517;
    color: white;
    padding: 2px 10px;
    border-radius: 2px;
}



.product-btn a {
    background-color: #4c6517;
    padding: 10px 30px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}


.product-context a {
    text-decoration: none;
}

.product-context h5 {
    color: #035527 !important;
}

.product-btn {
    margin-top: 40px;
}



.product-rating {
    font-size: 11px;
    background-color: #fcfff7;
    width: max-content;
    padding: 2px 10px;
    border-radius: 30px;
    color: rgb(232, 197, 0);
    box-shadow: rgba(255, 247, 158, 0.808) 0px 0px 0px 1px;
}

.product-rating .text-muted {
    font-size: 12px;

    font-weight: 800;
}


.product-context h5 {
    color: rgb(35, 35, 35);
}

.product-context p {
    font-size: 14px;
    color: rgba(137, 137, 139, 0.715);
}


.price span:nth-child(1) {
    color: rgb(0, 0, 0);
    font-size: 21px;
}

.price span:nth-child(2) {
    color: rgb(184, 184, 184);
    text-decoration: line-through;
}

.add-to-cart {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: orange;
    width: max-content;

}

.addtocart {
    /* background-color: #4c6517; */
    border: 1px solid #4c6517;
    padding: 12px 14px;
    color: #4c6517;
    border-radius: 50%;
    transition: all ease 0.9s;

}



.addtocart i {
    font-size: 17px;
}

.addtofav {
    /* background-color: #4c6517; */
    border: 1px solid rgb(244, 71, 71);
    padding: 10px 14px;
    color: rgb(244, 71, 71);
    border-radius: 50%;
    transition: all ease 0.9s;

}

.addtofav:hover {
    background-color: rgb(244, 71, 71);
    border: 1px solid transparent;
    color: white;
    border-radius: 50%;

}

.addtofav i {
    font-size: 17px;
}


.product-section {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.product-section a {
    position: relative;
    text-decoration: none;
    color: #4c6517;
    display: inline-block;
}

.product-section a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    /* Slightly below the text */
    width: 100%;
    height: 2px;
    background-color: #4c6517;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.product-section a:hover::after {
    transform: scaleX(1);
}

/* 

/* //Banner */

.gs {
    position: relative;
    border-radius: 14px;
    padding: 60px 48px;
    color: #fff !important;
    overflow: hidden;
    text-align: center;
    height: 450px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 3px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gs:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.15);
}

/* Backgrounds */
.gs-herbal {
    background-image: url('/images/bg.png');
}

.gs-floral {
    background-image: url('/images/bg2.png');
}

/* Overlay for readability */
.gs .overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 40, 10, 0.45);
    z-index: 1;
}

/* Common text styles */
.gs span,
.gs h3,
.gs p,
.gs a {
    position: relative;
    z-index: 2;
}

.gs-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
}

.gs-title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 18px;
    color: #fff;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
    animation: fadeup 1.25s;
}

.gs-desc {
    font-size: 17px;
    margin-bottom: 30px;
    color: #f5fff6;
    line-height: 1.65;
    animation: fadeup 1.85s;
}

/* Button styles */
.gs-btn {
    background: white !important;
    color: #23602a !important;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 32px;
    padding: 12px 34px;
    box-shadow: 0 3px 14px rgba(60, 220, 140, 0.13);
    transition: background 0.25s, color 0.25s, transform 0.2s;
    cursor: pointer;
}

.gs-btn:hover {
    background: linear-gradient(93deg, #3dec7c 0%, #a3ffb7 90%);
    color: #194f25;
    transform: scale(1.1) rotate(-2deg);
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes btnpop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}





.about-section {
    padding: 60px 0;
    background: linear-gradient(110deg, #f8f8fc 65%, #e9ffe9 100%);
    position: relative;
}

.about-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-img-wrap img {
    max-width: 100%;
    border-radius: 22px;
    transition: transform 0.7s;
}

.about-img-wrap img:hover {
    transform: scale(1.04) rotate(-2deg);
}



@keyframes leaffloat {
    to {
        transform: translateY(-16px) scale(1.1) rotate(-11deg);
    }
}

/* Content styling */
.about-content {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 18px rgba(53, 130, 67, 0.07);
    padding: 32px 24px;
    position: relative;
    z-index: 2;
    animation: fadeinup 0.9s;
}

@keyframes fadeinup {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.about-title {
    font-size: 2.5rem;
    color: #328263;
    font-weight: 700;
    margin-bottom: 18px;
}

.about-content p {
    color: #4d4d4d;
    font-size: 18px;
    line-height: 1.68;
    margin-bottom: 16px;
}





.about-image img {
    width: 80%;
    border-radius: 10px;
}



.about-content span {
    padding: 5px 10px;
    border: 1px solid white;
    font-size: 11px;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    background-color: #4c6517;
    ;
}


.about-content h2 {
    margin-top: 10px;
    font-size: 33px;
}



.about-content p {
    color: gray;
    font-size: 19px;
}






/* .reel-carousel-section */

.reel-carousel-section {
    padding: 50px 0;
    color: #fff;
    position: relative;
}

.carousel-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
}



.reel-video {
    width: 100%;
    max-height: 430px;
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.reel-video:hover {
    transform: scale(1.032);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

/* Owl nav/dot tweaks */
.owl-nav button span {
    font-size: 2.5rem;
    color: #fff;
}

.owl-dot.active span,
.owl-dot:hover span {
    background: #f7971e;
}

.owl-carousel .owl-nav button.owl-next {
    background-color: #005c39 !important;
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: absolute !important;
    right: 10px !important;

}

.owl-carousel .owl-nav button.owl-prev {

    background-color: #005c39 !important;
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: absolute !important;
    left: 10px !important;

}



/* term */

.shiping {
    background: linear-gradient(105deg, #eafeee 65%, #e1fce6 100%);
    padding: 55px 0;
    margin-bottom: 15px;
    border-radius: 28px;
    box-shadow: 0 4px 36px rgba(26, 123, 99, 0.07);
    position: relative;
}

.icon-box {
    background: rgba(255, 255, 255, 0.53);
    border-radius: 18px;
    box-shadow: 0 2px 18px rgba(46, 125, 69, 0.08);
    padding: 33px 0;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.28s, transform 0.27s, background 0.19s;
    backdrop-filter: blur(6px);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid #79e08233;
}

.icon-box:hover {

    box-shadow: 0 6px 24px rgba(46, 125, 69, 0.13);
    background: linear-gradient(85deg, #eafeee 60%, #acf1b1 100%);
    transform: translateY(-7px) scale(1.07);
    border-color: #32a55d7c;
}

.icon-box i {
    font-size: 34px;
    margin-bottom: 14px;
    color: #024916;
    height: 40px;
    width: 40px;
    background: linear-gradient(140deg, #329f58 30%, #d2fca3 100%);
    border-radius: 50%;
    padding: 18px;
    box-shadow: 0 2px 14px rgba(53, 130, 67, 0.13);
    transition: color 0.25s, background 0.22s, transform 0.18s;
}

.icon-box:hover i {
    background: linear-gradient(140deg, #43e584 60%, #43c5e5 100%);
    transform: rotate(-11deg) scale(1.14);
}

.icon-box p {
    font-size: 21px;
    font-weight: 700;
    color: #328263;
    margin-bottom: 0;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 9px #ceeecb7a;
    transition: color 0.22s;
}

.icon-box:hover p {
    color: #02270c;
}



/* //blog */
/* Table Styling */

.table-box {
    border-radius: 10px !important;
    background-color: white !important;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

table th,
table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

/* Table Box Styling */
.table-box th,
.table-box td {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap;
    max-width: 200px !important;
    height: 40px !important;
    padding: 10px;
    z-index: 99 !important;
}

table th {
    background: #008cbb;
    color: white;
    font-weight: bold;
}

table tr:hover {
    background: #f5f5f5;
    transition: 0.3s;
}

table td img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

.edit-btn {
    color: rgb(218, 218, 218);
    border: none;
    background-color: transparent;
    font-size: 16px;

}

.edit-btn:hover {
    color: #0687ae;
}

.view-btn {
    color: rgb(218, 218, 218);
    border: none;
    background-color: transparent;
    font-size: 16px;

}

.view-btn:hover {
    color: black;
}

.delete-btn {
    color: rgb(218, 218, 218);
    border: none;
    background-color: transparent;
    font-size: 16px;

}

.delete-btn:hover {
    color: red;
}

.btn-container {
    display: flex;
    gap: 20px;
}

.blog-box {
    padding: 10px;
    /* background-color: rgb(191, 205, 161); */
    /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; */
    border-radius: 10px;
    margin-top: 20px;
}

.blog-box2 {
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    margin-top: 20px;
}

.blog-content {
    margin-top: 14px;

}

.blog-heading {
    text-align: center;
}

.blog-heading h3 {
    color: #4c6517;
}

.blog-heading span {
    padding: 5px 20px;
    border: 1px solid transparent;
    font-size: 11px;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    background-color: #4c6517;
    ;
}

.blog-image {
    height: 280px;
    object-fit: cover
}

.blog-image img {
    border-radius: 10px;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.blog-container {
    padding: 50px 0px;

}

.blog-section {
    /* background: url("/op/h1_bg.png"); */
    padding: 50px 0px;


}

.dated {
    display: flex;
    gap: 10px;
}

.blog-content a {
    text-decoration: none;
    color: rgb(2, 68, 2);
    font-weight: 600;

}

.blog-btn a {
    background-color: #4c6517;
    padding: 12px 24px;
    text-decoration: none;
    color: white;
    border-radius: 5px;
}

.list-unstyled li {
    margin-top: 20px;
}

footer {
    background-color: #415014;
    padding: 100px 0px;
    overflow: hidden;

}



.user-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;

}

.user-dropdown .dropdown-toggle::after {
    display: none;

}


.user-icon {
    color: #000;
    text-decoration: none;
}

.user-icon:hover {
    color: #007bff;
}

.blog-btn {
    margin-top: 40px;
}

.mobile-icon li {
    list-style: none;
}

.mobile-icon a {
    text-decoration: none;
    color: #4c6517;
}

.mobile-icon i {
    font-size: 29px;

}

.top-products-section {
    margin-top: 0px;
    padding-bottom: 60px;
}

.bottom-menu {

    position: fixed;
    bottom: 0px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    z-index: 99999;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.bottom-header {
    display: none;
}

.bottom-menu li {
    list-style: none;

}

.bottom-menu i {
    font-size: 25px;
    color: #5d7032;
}

.social-link {
    display: flex;
    gap: 20px;
    list-style: none;
    margin-top: 10px;
}

.social-link a {
    color: white;
}

.social-link i {
    font-size: 30px;

}

.payment-icons-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    font-size: 24px;

}

.payment-icons-container img {
    width: 60px;
    object-fit: contain;
    aspect-ratio: 3/2;

}

.payment-icon {
    transition: transform 0.2s ease, color 0.3s ease;
    cursor: pointer;
}

.payment-icon:hover {
    transform: scale(1.2);
}

/* Custom colors */
.upi {
    color: #2ecc71;
    /* green */
}

.paytm {
    color: #00baf2;
    /* Paytm blue */
}

.phonepe {
    color: #6f42c1;
    /* purple */
}

.card {
    color: #f39c12;
    /* orange/gold */
}

.netbanking {
    color: #3498db;
    /* blue */
}


.b-logo {
    background-color: white;
    padding: 10px;
    width: max-content;
    border-radius: 10px;
    text-align: center;
}

.breadcrumb {
    background: #f5f5f7 !important;
    padding: 22px 0 10px 0 !important;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 10px rgba(40, 50, 70, 0.06);
    margin-top: 240px;
}

.breadcrumb p {
    font-size: 0.97rem;
    margin-bottom: 6px;
    color: #313131;
    letter-spacing: .02em;
    font-weight: 500;
}

.breadcrumb p a {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    transition: color 0.18s;
    opacity: 0.8;
}

.breadcrumb p a:hover {
    color: #232323;
    opacity: 1;
}

.breadcrumb span {
    color: #b0b0b0;
    font-size: .97rem;
    padding: 0 6px;
    font-weight: 500;
}

.breadcrumb h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #232323;
    margin-bottom: 0;
    margin-top: 2px;
    letter-spacing: .04em;
}




/* .icon-box */
.icon-box {
    text-align: center;

}



.icon-box i {
    font-size: 37px;
    color: #46641a;
    margin: 30px;

}

.shiping {
    background-color: #f4ffda;
    padding: 50px;

}




/* /login page */


.login-box {
    max-width: 400px;
    margin: auto;
    padding: 25px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Toggle Buttons */
.login-toggle {
    display: flex;
    justify-content: space-between;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 4px;
    position: relative;
}

.toggle-btn {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: #555;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
    position: relative;
}

.toggle-btn.active {
    color: #fff;
}

.sactive {


    background: #005c39;
    border-radius: 8px;
    color: white;
    transition: left 0.4s;
    z-index: 0;
}

.login-toggle.active-password::before {
    left: 50% !important;
}



/* Sections animation */
.login-section {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: all 0.4s ease;
    height: 0;
    overflow: hidden;
}

.login-section.active-section {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    height: auto;
    overflow: visible;
}

.main-btn {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 6px;
    transition: 0.3s;
}

.main-btn:hover {
    background: #0056b3;
}

#otpSection {
    /* No max-height or transition here, just hidden/shown by display */
    margin-top: 10px;
    padding-top: 0;
    padding-bottom: 0;
}




.login-poster {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 60px 0px;
}

.login-logo {
    position: absolute;
    top: 100px;
    left: 50%;

}


.review-emojis {
    font-size: 1.5rem;
    display: flex;
    gap: 30px;
    margin: 20px 0px;

}


.review-emojis .label {
    font-size: 0.7rem;
    margin-top: 5px;
}

#otpSection {
    display: none;
    margin-top: 20px;
}

.login-side-poster a {
    text-decoration: none;
    background-color: #4C6417;
    padding: 10px 15px;
    border-radius: 5px;
    color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px;

}

.text-g2 {
    font-size: 44px;
    background: -webkit-linear-gradient(#30410a, #4c6517);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-g {
    font-size: 54px;
    margin: 20px 0px;
    background: -webkit-linear-gradient(#30410a, #4c6517);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#loginForm {
    display: flex;
    align-items: center;
    justify-content: center;
}


.btn-login {
    height: 60px;
    padding: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    width: 400px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin: 0px 0px;
    background-color: #4c6517;
    font-size: 19px;
    color: white;

}



.login-container h1 {
    font-size: 55px;
}


.login-container {

    padding: 40px;
}

.login-main-container {
    background-color: white;
    padding-top: 60px;
    width: 70%;
    margin: auto;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;

}

.review-emojis {
    font-size: 1.5rem;
    display: flex;
    gap: 30px;
    margin: 20px 0px;

}

.review-emojis div {
    text-align: center;
}

.review-emojis .label {
    font-size: 0.7rem;
    margin-top: 5px;
}

.login-side-poster {
    padding: 0px 40px;
    border-right: 1px solid #64841f;
}

#otpSection {
    display: none;
    margin-top: 20px;
}





.login-container input {

    height: 60px;
    padding: 10px;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 10px;
    margin: 20px 0px;
    background-color: rgba(230, 230, 230, 0.329) !important;
}

.btn-login {
    height: 60px;
    padding: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid transparent;
    margin: 0px 0px;
    background: #4C6417;
    background: linear-gradient(90deg, rgba(76, 100, 23, 1) 0%, rgba(33, 51, 0, 1) 76%);
    font-size: 19px;
    color: white;

}

.login-container input:focus {
    outline: none;
}

.login-container h1 {
    font-size: 55px;
}

.login button {
    padding: 10px 15px;
    border: 1px solid transparent;
    background-color: salmon;
    color: white;
    border-radius: 5px;
    font-size: 19px;
    margin: 0px;


}

.login p {
    font-size: 19px;
}

.login i {
    font-size: 23px;
}

/* signup */


.signup {
    padding: 20px 0px;
}

.signup input {

    height: 60px;
    padding: 10px;


    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 10px;
    margin: 20px 0px;
    background-color: rgba(230, 230, 230, 0.329) !important;
}

.signup select {

    height: 60px;
    padding: 10px;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 10px;
    margin: 20px 0px;
    background-color: rgba(230, 230, 230, 0.329) !important;
}

.signup-btn {
    padding: 10px 15px;
    border: 1px solid transparent;
    background: linear-gradient(90deg, rgba(76, 100, 23, 1) 0%, rgba(33, 51, 0, 1) 76%);
    color: white;
    border-radius: 5px;
    font-size: 19px;
    margin: 0px;

}

.singup-box {
    background-color: white;
    padding: 60px 10px;
    width: 80%;
    margin: auto;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}


/* verifyotp */

.verifyotp {
    padding: 30px 0px;

}

.verify-box-section {
    text-align: center;

}

.verify-box {
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.verify-box input {

    height: 60px;
    padding: 10px;

    width: 360px;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 10px;
    margin: 20px 0px;
    background-color: rgba(230, 230, 230, 0.329) !important;

}

.verify-btn {

    background-color: green;
    height: 60px;
    padding: 10px 60px;
    margin: 10px;

    border-radius: 10px;
    border: none;
    color: white;
}

.verify-box p {
    font-size: 21px;
    margin-top: 20px;
}

.verify-box span {
    color: rgb(0, 161, 242);
}


.tooltip-wrapper {
    display: inline-block;
    cursor: pointer;
}


.tooltip-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -40px;
    /* place above the button */
    left: 0px;
    /* transform: translateX(-50%); */
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999999999999999 !important;
}

.tooltip-wrapper:hover::after {
    opacity: 1;
}

/* new css  */

.addtocart-product {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 40px;
    border-bottom: 1px dashed rgb(216, 216, 216);
    padding: 10px;
}

.order-history-card {
    display: flex;
    gap: 20px;
    
}

.order-history-card > div {
    flex: 1; /* Equal width */
}


.order-history-card .order-item {
    margin-top: 10px;
}

.order-item2 {
    display: flex;
    gap: 10px;
    align-items: center;
   box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: 5px;
    border-radius: 5px;
}

.delivery-tag {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 14px;
    width: max-content;
    text-transform: capitalize;
}

/* Delivered */
.delivery-tag.delivered {
    background-color: #ddffdd;
    color: #005c39 !important;
    border: 1px solid #005c39d0;
}

/* Pending */
.delivery-tag.pending {
    background-color: #fff2d6;
    color: #b36a00 !important;
    border: 1px solid #b36a00d0;
}

/* Shipped / Out for Delivery */
.delivery-tag.shipped,
.delivery-tag.out-for-delivery {
    background-color: #d6e8ff;
    color: #004a99 !important;
    border: 1px solid #004a99d0;
}

/* Cancelled */
.delivery-tag.cancelled {
    background-color: #ffd6d6;
    color: #b30000 !important;
    border: 1px solid #b30000d0;
}



.status-tag {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 14px;
    width: max-content;
    text-transform: capitalize;
}

/* Completed → Green */
.status-tag.completed {
    background-color: #ddffdd;
    color: #005c39 !important;
    border: 1px solid #005c39d0;
}

/* Pending → Orange */
.status-tag.pending {
    background-color: #fff2d6;
    color: #b36a00 !important;
    border: 1px solid #b36a00d0;
}

/* Cancelled → Red */
.status-tag.cancelled {
    background-color: #ffd6d6;
    color: #b30000 !important;
    border: 1px solid #b30000d0;
}



.order-history-card .product-img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    max-height: 40px;
}
.singal-card-main{
    display: grid;
    grid-template-columns: 50% 40%;
    gap: 70px;
}
.singal-card{
    display: flex;

border-bottom: 1px dashed rgb(186, 186, 186);
padding:16px 0px;
justify-content: space-between;
}

.singal-card .product-info{
    display: flex;
    gap: 10px;
}
.singal-tag{
    display: flex;
    justify-content: space-between;
}
.singal-card h4{
    font-size: 14px;
    color: black;
    margin: 0px;
}
.singal-card p{
    font-size: 13px !important;
    color: gray;
    margin-bottom: 0px;
}
.singal-product-img{
    width: 100%;
    border-radius: 2px;
    object-fit: cover;
    max-height: 40px;  
}

.order-history-card .product-info h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
}

.order-history-card .product-info p {
    margin: 0;
    font-size: 13px;
    color: #6c757d; 
    margin-bottom: 0px !important;
}

.order-history-card .order-item p {
    color: #6c757d;
    font-size: 15px;
}

.order-history-card .label {
    font-weight: 500;
    color: #212020 !important;
    margin-bottom: 2px;
}

.order-history-card .status {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    display: inline-block;
}

.status.pending {
    background-color: #fff3cd;
    color: #856404;
}

.status.completed {
    background-color: #d4edda;
    color: #155724;
}

.status.cancelled {
    background-color: #f8d7da;
    color: #721c24;
}
.pm-tag {
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

/* Cash / COD */
.pm-tag.cash {
    background: #fff2d6;
    color: #b36a00;
    border: 1px solid #e6b874;
}

/* Online Payment / Prepaid */
.pm-tag.prepaid {
    background: #d6eaff;
    color: #0056b3;
    border: 1px solid #7bb3ff;
}

/* Unknown */
.pm-tag.unknown {
    background: #f0f0f0;
    color: #666;
    border: 1px solid #ccc;
}



.order-name {
    width: 170px;
}

.price-box {

    width: 100px;
}

.body-container {
    max-width: 90%;
    margin: auto;

}

.product-container {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    justify-content: start;
    gap: 15px;

}

.size button {
    font-size: 12px;
}

.product-card {
    border-radius: 15px;
    width: 286px;
    border: 1px solid #2f5d3f6e;
    overflow: hidden;
    /* ensures child borders align perfectly */
}

.product-context {
    padding: 10px;
}

.product-image {
    margin-top: 12px;
    height: 290px;
    position: relative;

}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.6s ease-in-out;
    /* smooth fade effect */
}

.product-card .main-img {
    opacity: 1;
    z-index: 1;
}


.product-card .hover-img {
    opacity: 0;
    z-index: 2;
}


.product-card:hover .main-img {
    opacity: 0;
}

.product-card:hover .hover-img {
    opacity: 1;
}



/* Add to Cart Section */
.add-to-card {
    display: grid;
    grid-template-columns: 80% 20%;
    margin-top: 0;
    /* remove spacing to align with main border */
    border-top: 1px solid #2f5d3f;
    /* only top border needed */

}

/* Add to Cart Button */
.add-cart {
    background-color: #2f5d3f;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 60px;
    text-align: center;
    border: none;
    border-right: 1px solid #2f5d3f;
    /* divider between cart and wishlist */
    display: inline-block;
    transition: 0.5s;
    box-shadow: 0 0 20px #eee;
    cursor: pointer;
}

/* Wishlist Button */
.whislist {
    background-color: white;
    border: none;
    color: rgb(255, 105, 105);
    font-size: 23px;
    height: 60px;
    width: 100%;
    padding: 5px 10px;
}

/* Optional: subtle hover effects */
.add-cart:hover {
    background-color: #3b6e4c;
}

.whislist:hover {
    background-color: #fff5f5;
}


.add-cart:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;

}



.product-increase {
    background-color: #005c39;
    padding: 10px 17px;
    border-radius: 5px;
    border: none;
    color: white;
    ;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;

}

.capsule-tag {
    display: inline-block;
    padding: 2px 16px;
    background-color: transparent;
    color: #005c39;
    font-weight: 600;
    border-radius: 50px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border: 1px solid #0e9241;
    transition: all 0.3s ease;
    cursor: default;
    margin-top: 40px;
}

.ph {
    color: #005c39;
}

.capsule-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 114, 255, 0.4);
}

.product-count {
    background-color: transparent;
    padding: 10px 17px;
    border-radius: 5px;
    border: none;
    color: black;
    border: 1px solid rgb(2, 106, 47);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.social-share {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
}

.social-share a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Platform colors */
.social-share a.facebook {
    background: #3b5998;
}

.social-share a.twitter {
    background: #1da1f2;
}

.social-share a.whatsapp {
    background: #25d366;
}

.social-share a.linkedin {
    background: #0077b5;
}

.social-share a.email {
    background: #dd4b39;
}

.social-share a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.highlight-section {
    margin-top: 30px;
}

.highlight-box {
    padding: 15px;
    border-radius: 16px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid skyblue;
    height: 160px;

}

.highlight-box p {
    font-size: 0.95rem;
    margin-top: 6px;
    color: rgba(156, 156, 156, 0.9);
}


.highlight-box strong {
    color: rgb(117, 117, 117) !important;
}

.highlight-box i {
    color: #024916;
}

.review-stars i {
    font-size: 18px;
}

.review-quote {
    font-style: italic;
    font-size: 15px;
    color: #444;
    margin: 0 0 8px;
}

.review-author {
    font-size: 14px;
    color: #666;
}

.product-share a {
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none !important;

}

.star-rating {
    display: flex;
    gap: 8px;
    cursor: pointer;
}

.star {
    font-size: 2rem;
    color: #ccc;
    transition: color 0.2s;
}

.star.hover,
.star.selected {
    color: gold;
}

.review-card {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

.review-card-header {
    background-color: #fff;
    color: black;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.review-card-body {
    padding: 1.5rem;
}

.review-form-label {
    font-weight: 600;
    color: #035527;
    margin-bottom: 0.5rem;
    display: block;
}

.review-form-textarea,
.review-form-select,
.review-form-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.2s ease;
}

.review-form-textarea:focus,
.review-form-select:focus,
.review-form-input:focus {
    border-color: #980667;
    box-shadow: 0 0 0 2px rgba(83, 145, 79, 0.2);
}

.review-submit-btn {
    background-color: #30410a;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.review-submit-btn:hover {
    background-color: #9600a7;
}

.cetegory-section-page {
    padding: 60px 0px;
}






.search-result-page {
    padding: 40px 0px;

}

.search-result-page .product-container {
    justify-content: start;
}








.search-page-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0 24px 0;
}

.search-page-center h1 {
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 2.1rem;
    letter-spacing: .04em;
}

.search-form {
    display: flex;
    gap: 11px;
    margin-bottom: 20px;
    background: #fafafa;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 8px 28px rgba(30, 40, 70, 0.06);
    align-items: center;
}

.search-form input[type="text"] {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1.09rem;
    width: 230px;
}

.search-form button {
    background: linear-gradient(90deg, #096712, #079372);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 23px;
    border-radius: 6px;
    letter-spacing: .02em;
    transition: background 0.19s;
    cursor: pointer;
}

.search-form button:hover {
    background: linear-gradient(90deg, #054731, #06571d);
}

.search-suggestions {
    margin-top: 20px;
    font-size: .99rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.suggest-label {
    color: #999;
    font-size: .97rem;
    font-weight: 500;
    margin-right: 8px;
}

.suggest-item {
    background: #ececec;
    color: #232323;
    border-radius: 6px;
    padding: 7px 17px;
    margin-right: 2px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.16s, color 0.16s;
    font-size: .99rem;
}

.suggest-item:hover {
    background: #066e23;
    color: #fff;
}


.user-dashboard {
    background-color: rgb(246, 246, 246);
    margin-top: 200px;
    padding: 40px 0px;
}

.overview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 10px;
}


.user-main-dashboard a {
    text-decoration: none;
}

/* Sidebar */
.dashboard-sidebar {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.user-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #4C6720;
    object-fit: cover;
}

.user-name {
    color: #4C6720;
    font-weight: 600;
}

.dashboard-nav h5 {
    color: #4C6720 !;
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

.dashboard-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-nav li {
    margin-bottom: 10px;
}

.dashboard-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dashboard-nav a:hover {
    background-color: #ededed;
    color: black;
}

.dashboard-nav i {
    font-size: 1.1rem;
}

/* Main Dashboard Content */
.dashboard-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.welcome-text-content {
    text-align: center;
}


/* ===============================
   Address Form Section Styles
================================= */


.overview-heading {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.overview-heading h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
}

.back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e6f5ec;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s;
}

.back-icon:hover {
    background: #c8eed8;
    transform: translateX(-3px);
}

/* ===============================
   Address Form Styles
================================= */
.address-form-part {
    margin-top: 10px;
}

.address-form-part label {
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
    display: block;
}

.address-form-part input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 15px;
    font-size: 15px;
    transition: border-color 0.3s ease;
}

.address-form-part input:focus {
    outline: none;
    border-color: #198754;
    /* Bootstrap success color */
    box-shadow: 0 0 0 0.15rem rgba(25, 135, 84, 0.2);
}

/* ===============================
   Button Styles
================================= */
.main-btn {
    background-color: #198754;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;

}

.main-btn2 {
    background-color: #198754;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%;

}

.main-btn:hover {
    background-color: #157347;
    transform: translateY(-2px);
}




/* Each order card container */
.order-card {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
    background: #ffffff;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}



/* Product Info Section */
.order-info {
    display: flex;
    gap: 15px;
    flex: 1.5;
}
.tag{
    background-color: transparent;
    width: max-content;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: 6px 10px;
    margin-bottom: 0px;
    border-radius: 5px;
    font-size: 13px !important;

}

.tag span{
    color:rgb(82, 82, 82);
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    
}
.order-info img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
}

.order-info h6 {
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.order-info .pr-des {
    color: #666;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Info sections (price, date, status) */
.order-card>div {
    flex: 0.8;

}

.order-card strong {
    color: #555;
    font-weight: 600;
}

.order-card p {
    margin: 0;
    color: #333;
    font-size: 15px;
}

/* Status Badge */
.status {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: capitalize;
}

.status.delivered {
    background-color: #e9f9ee;
    color: #198754;
}

.status.pending {
    background-color: #fff3cd;
    color: #856404;
}

.status.cancelled {
    background-color: #f8d7da;
    color: #842029;
}

/* Back Icon and Heading */
.overview-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.overview-heading i {
    transition: 0.3s ease;
}

.overview-heading i:hover {
    transform: translateX(-3px);
    color: #145a32;
}



/* Section base */
.faq-section {
    background-color: #fff;
    margin: 0 auto;
}

/* Heading */
.faq-section h2 {
    font-weight: 700;
    color: #59761F;
    letter-spacing: 0.5px;
    position: relative;
}

.faq-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #59761F;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Each FAQ item */
.faq-item h5 {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.faq-item h5:hover {
    color: #59761F;
}

.faq-item p {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Divider line */
.faq-item {
    border-color: rgba(89, 118, 31, 0.2) !important;
}

/* Subtle animation */
.faq-item {
    transition: background-color 0.3s ease;
}

.faq-item:hover {
    background-color: rgba(89, 118, 31, 0.03);
}

/* Responsive spacing */
@media (max-width: 768px) {
    .faq-section {
        padding: 0 20px;
    }
}




/* ===============================
   Reviews Section Styling
================================== */
.reviews-section {
    background-color: #f8f9fa;
}

.review-card {
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.review-avatar img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #0d6efd;
    padding: 2px;
}

.review-text {
    font-size: 0.95rem;
    color: #555;
    font-style: italic;
}

.review-rating i {
    font-size: 1rem;
}

/* Optional Section Header */
.reviews-section h2 {
    color: #222;
    font-weight: 700;
}

.reviews-section p.text-muted {
    max-width: 500px;
    margin: 0 auto;
}


/* ===============================
   Contact Page Styling
================================== */
.contact-section {
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.contact-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Headings */
.section-title {
    font-weight: 700;
    font-size: 1.6rem;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #005c39;
    margin-top: 10px;
    border-radius: 2px;
}

/* Form Styling */
.contact-form .form-control {
    border-radius: 3px;
    border: 1px solid #dcdcdc;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}




/* Info Box Styling */
.info-box {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.info-box:hover {
    background: #e9f2ff;
    transform: translateY(-4px);
}

.info-icon {
    width: 45px;
    height: 45px;
    background: #005c39;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.info-box h6 {
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
}

.info-box p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Map Styling */
.map-container iframe {
    border-radius: 12px;
    width: 100%;
    height: 250px;
}


.mobile-navbar .nav-right i{
    color: black;
}

/* NAVBAR */
.mob-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: top 0.4s ease, box-shadow 0.3s ease;
}
.mobile-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFDD0;
    padding: 12px 18px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

hr.dotted-light {
    border: none;
    border-top: 1px dashed #494949; /* light grey dotted */
    margin:10px 0;
}



.mob-nav.hidden {
    top: -100px;
}

.logo {
    font-size: 1.3rem;
    font-weight: 700;
    color: #222;
    text-decoration: none;
}

.mobile-navbar i {
    color: white;
}

.logo span {
    color: #007bff;
}

.nav-right i {
    font-size: 20px;
    margin-left: 15px;
    cursor: pointer;
    color: #ffffff;
    transition: color 0.3s ease;
}

.nav-right i:hover {
    color: #007bff;
}

/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
    transition: 0.4s ease;
    z-index: 1100;
    padding: 20px;
}

.sidebar.active {
    left: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h2 {
    font-size: 1.3rem;
    margin: 0;
    color: #007bff;
}

.close-btn {
    font-size: 1.5rem;
    cursor: pointer;
}

.sidebar-links {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.sidebar-links li {
    margin: 18px 0;
}

.sidebar-links a {
    text-decoration: none;
    font-size: 1rem;
    color: #333;
    transition: color 0.3s ease;
}


.mlogo img {
    width: 70px;
}

/* OVERLAY */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 1000;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* DEMO CONTENT */
.content {
    margin-top: 80px;
    padding: 20px;
}



.product-item img {
    width: 70px;
    border: 1px solid rgba(0, 0, 0, 0.296);
    border-radius: 3px;
}

.product-item {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;


}

.product-price span {
    font-size: 19px;
}



.info {
    width: 300px !important;

}

.light-dashed {
    border: none;
    border-top: 1px dashed #dcdcdc;
    opacity: 0.6;
    margin: 0.75rem 0;
    padding: 0px;
}


.user-dashborad {
    padding: 40px 0px;
}

.add-cart-box {
    background-color: white;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    border-radius: 10px;
}

.checkout-section {
    padding: 40px 0px;
}

.total-box {
    text-align: right;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 30px;
}

.form-group input {
    height: 45px;
    margin-top: 20px;
    box-shadow: none !important;
}

.form-group .main-btn {
    margin-top: 20px;
}

.form-group {
    margin-top: 20px;
}

.form-control {
    box-shadow: none !important;
    height: 45px;
}

.ta {
    height: 150px !important;
}


.checkout-wrapper {
    padding: 40px 0;
    background: #ffffff;
}

.checkout-main {
    max-width: 1120px;
    margin: 0 auto;
}

.checkout-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.checkout-left,
.checkout-right {
    flex: 1;
    background-color: white;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    border-radius: 10px;
}

.checkout-right {
    max-width: 340px;
    min-width: 300px;
}

.main-btn {
    padding: 12px 24px;
    background: #637C27;
    color: #ffffff;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    text-align: center;
}

.b-main-btn {
    padding: 10px 24px;
    background: #C09B21;
    color: #ffffff;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    text-align: center;
}

.btn-box {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 400px;
}

.product-action-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}


.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

/* Default radio button styling */
.payment-option input[type="radio"] {
    accent-color: #28a745;
    /* Modern browsers support this */
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Text styling */
.option-text {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

/* Hover effect */
.payment-option:hover {
    background: #f8fff8;
    border-color: #09651f;
}

/* Active (checked) effect */
.payment-option input[type="radio"]:checked+.option-text {
    color: #0f7126;
    font-weight: 600;
}

.accordion-item .accordion-button {
    box-shadow: none !important;
    color: #198754;
}

.accordion-item .accordion-button:not(.collapsed) {
    background-color: #f3f9f5;
    color: #198754;
    font-weight: 600;

    box-shadow: none;
}

/* Rotate arrow icon when open */
.accordion-button::after {
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.main-btn:hover {
    opacity: 0.95;
    background: #4e6020;
}



.go-sowa-faq-section {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 28px rgba(105, 130, 45, 0.07);
    padding: 2.5rem 1.5rem;
    margin-bottom: 2.5rem;
}

.go-sowa-faq-title {
    color: #69822D;
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2.3rem;
}

.go-sowa-faq-accordion .accordion-button {
    background: #fff !important;
    color: #69822D !important;
    font-weight: 500;
    font-size: 1.04rem;
    border: none;
    transition: background 0.4s, color 0.4s;
}

.go-sowa-faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.go-sowa-faq-accordion .accordion-button:not(.collapsed),
.go-sowa-faq-accordion .accordion-button:hover {
    background: #69822D !important;
    color: #fff !important;
    outline: none;
}

.go-sowa-faq-accordion .accordion-item {
    border: 1.3px solid #69822D !important;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(105, 130, 45, 0.07);
    transition: border-color 0.35s;
}

.go-sowa-faq-accordion .accordion-item.active {
    border-color: #a5c376;
}

.go-sowa-faq-answer {
    background: #f7fbe9;
    color: #3f4d21;
    font-size: 1rem;
    padding: 1rem 1.2rem 1.1rem;
    border-top: 1px solid #e5eec3;
    transition: background 0.4s;
}


.review-section {
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

/* Scroll section */
.scroll-container {
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.scroll-content {
    display: inline-flex;
    animation: scrollLeft 35s linear infinite;
}

.scroll-container:hover .scroll-content {
    animation-play-state: paused;
}

.review-card {
    min-width: 300px;
    max-width: 320px;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.8px);
    -webkit-backdrop-filter: blur(10.8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 255, 128, 0.25);
}

/* Animated border */
.review-card .border-animate {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.review-card:hover .border-animate {
    opacity: 1;
    animation: moveBorder 3s linear infinite;
}

@keyframes moveBorder {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Continuous scroll */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Floating balloon background */
.balloon-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.balloon {
    position: absolute;
    bottom: -100px;
    left: var(--left);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 128, 0.7), rgba(0, 255, 128, 0.2));
    border-radius: 50%;
    animation: floatUp 10s linear infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0.4;
    }

    25% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-800px) scale(1.2);
        opacity: 0;
    }
}


.blog-detail-section {
    padding: 60px 0;
    background-color: #f9fafb;
}

.blog-grid {
    display: grid;
    grid-template-columns: 2fr 0.7fr;
    /* main content and sidebar */
    gap: 10px;
    align-items: start;
}

.service-detail-container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.service-page-image {
    border-radius: 10px;
    margin-bottom: 20px;
}

.meta-info {
    font-size: 14px;
    color: #6b7280;
}

.blog-description {
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
}

.blog-sidebar {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 100px;

}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid #198754;
    display: inline-block;
    padding-bottom: 5px;
    color: #111827;
}

.recent-blogs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-blog-item {
    margin-bottom: 12px;
}

.recent-blog-item a {
    text-decoration: none;
    color: #374151;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.recent-blog-item a:hover {
    color: #198754;
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        margin-top: 40px;
    }
}





@media (max-width: 991.98px) {
    .go-sowa-faq-columns {
        flex-direction: column;
    }

    .go-sowa-faq-col {
        margin-bottom: 2rem;
    }
}


@media (max-width: 900px) {
    .checkout-content {
        flex-direction: column;
        gap: 0;
    }

    .checkout-right {
        max-width: 100%;
        margin-top: 22px;
    }
}



/* RESPONSIVE */
@media(min-width: 992px) {
    .mobile-navbar {
        display: none;
    }
}





/* Responsive */
@media (max-width: 991px) {


    .section-title {
        text-align: center;
    }

    .section-title::after {
        margin: 10px auto 0;
    }

    .info-box {
        text-align: left;
    }
}

.mob-nav .top-bar{
    display: none;
}


/* Responsive Design */
@media (max-width: 992px) {
    .order-card {
        flex-wrap: wrap;
        text-align: left;
    }

    .order-card>div {
        flex: 1 1 100%;
        text-align: left;
    }

    .order-info img {
        width: 70px;
        height: 70px;
    }
}



/* General page and container styles */
.about-page-section {
    background: #fff;
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Gradient backgrounds */

.about-page-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e8f5ef 100%);
    color: #333;
}

.py-5.bg-light {
    background: linear-gradient(120deg, #fcf6fc 40%, #2aa46d 100%);
}



/* Optional: Slight gradient for icon-boxes */
.ab-icon-box {
    background: linear-gradient(125deg, #fff 70%, #f4faf8 100%);
    /* rest of your styles... */
}

/* Retain other CSS from previous response for consistency */




/* Headings */
.about-title {
    font-weight: 700;
    font-size: 2.5rem;
    color: #1a6d3a;
    margin-bottom: 2rem;
    text-align: center;
}

/* Paragraph text */
.about-text p {
    line-height: 1.7;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    color: #444;

    margin-left: auto;
    margin-right: auto;
}

/* Why Choose Us section */
.py-5.bg-light {
    background-color: #f9f9f9;
    padding: 3rem 1rem;
}

.text-center h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1a6d3a;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 3rem;
    font-weight: 500;
}

/* Icon boxes */
.ab-icon-box {
    background: #fff;
    border-radius: 10px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
    text-align: center;
    height: 100%;
    transition: box-shadow 0.3s ease;
}

.ab-icon-box:hover {
    box-shadow: 0 8px 25px rgb(0 0 0 / 0.15);
}

.ab-icon-box i {
    font-size: 2.25rem;
    color: #4caf50;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.ab-icon-box:hover i {
    transform: scale(1.2);
}

.ab-icon-box h5 {
    font-weight: 700;
    color: #1a6d3a;
    margin-bottom: 0.75rem;
}

.ab-icon-box p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

/* Difference Section */
.difference-section {
    padding: 5rem 1rem;
}

.section-tag {
    display: inline-block;
    font-weight: 600;
    color: #65a765;
    margin-bottom: 0.5rem;
}

.diff-box {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.06);
    transition: box-shadow 0.3s ease;
}

.diff-box:hover {
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
}

.diff-box .ab-icon-box {
    min-width: 50px;
    margin-right: 1.25rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.diff-box .ab-icon-box i {
    font-size: 2rem;
    color: #3b8d36;
}

.text-box h4 {
    font-weight: 700;
    font-size: 1.25rem;
    color: #2a5c23;
    margin-bottom: 0.5rem;
}

.text-box p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .about-title {
        font-size: 2rem;
    }

    .ab-icon-box h5 {
        font-size: 1.1rem;
    }

    .text-box h4 {
        font-size: 1.15rem;
    }
}




/* ===============================
   Responsive Adjustments
================================= */
@media (max-width: 768px) {
    .add-address-section .container {
        padding: 25px 15px;
    }

    .overview-heading h4 {
        font-size: 1.2rem;
    }
}





/* Heading */
.overview-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;

    border-radius: 10px;
    margin-bottom: 25px;
}

.overview-heading h4 {
    font-size: 1.25rem;
    color: #145a32;
}

/* Add Address Button */
.add-adress {
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}

.main-btn {
    background: #198754;
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.main-btn:hover {
    background: #145a32;
    color: #fff;
    transform: translateY(-2px);
}

/* Address Card */
.address-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.address-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

.address-card-header h6 {
    font-weight: 600;
    color: #145a32;
}

/* Edit/Delete Buttons */
.btn-edit,
.btn-delete {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.btn-edit i {
    color: #0d6efd;
}

.btn-edit:hover i {
    color: #084298;
    transform: scale(1.1);
}

.btn-delete i {
    color: #dc3545;
}

.btn-delete:hover i {
    color: #a71d2a;
    transform: scale(1.1);
}

/* Card Body */
.address-card-body p {
    margin-bottom: 6px;
    font-size: 15px;
    color: #444;
}

.address-card-body strong {
    color: #222;
}

/* Delete Modal */
.modal-content {
    border-radius: 12px;
}

.modal-header {
    border-bottom: none;
    background-color: #198754;
    color: #fff;
}

.modal-footer {
    border-top: none;
}

.modal-title {
    font-weight: 600;
}

/* No Address Text */
.adress-detail-show p {

    color: #6c757d;

}

/* Responsive */
@media (max-width: 768px) {
    .address-card {
        padding: 15px;
    }

    .address-card-body p {
        font-size: 14px;
    }

    .add-adress {
        justify-content: center;
    }
}




/* Responsive tweaks */

.phone {
    padding: 30px;
    background-color: rgb(246, 246, 246);
    display: none;
}

.phone-d {
    margin-top: 80px;

}

.phone-padd {
    padding: 20px;

}

.phone-layout {
    display: none;
}


@media screen and (max-width:576px) {
    .order-history-card{
        flex-wrap: wrap;
    }
    .singal-card-main {
        display: block;
    }
    .top-bar .item p {
        padding: 10px  10px !important;
}
.mob-nav .top-bar{
    display: block;
}

    .sidebar a {
 
    padding: 5px 20px;

}

    footer {
        padding: 40px 0px;
    }

    .payment-icons-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gs {
        height: auto !important;
    }

    .gs-title {
        font-size: 1.4rem;

    }

    .gs-btn {
        font-size: 14px;
    }

    .gs-desc {
        font-size: 15px;
    }

    .order-history-cover {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }


    .product-image {
        margin-top: 0px;
    }

    .search-page-center {
        padding: 10px;
    }

    .search-form input[type="text"] {
        width: 100%;
    }

    .search-form button {
        width: 100%;
    }

    .search-form {
        flex-wrap: wrap;
    }

    .contact-container {
        padding: 1rem .5rem;
    }

    .diff-box {
        flex-wrap: wrap;
    }

    .zoom-image {

        height: 380px !important;

    }

    .product-description p {
        text-align: left !important;
        font-size: 13px !important;
    }

    .product-description span {
        text-align: left !important;
        font-size: 13px !important;
    }

    .product-description h1 {
        text-align: left !important;

        font-size: 13px !important;
    }

    .review-box2 {
        margin: 30px 0px;
    }

    .order-history-card .order-item {
        margin-top: 0px;

    }

    .info {
        width: auto !important;
    }

    .cetegory-section-page {
        padding: 30px 0px;
    }

    .service-detail-container {

        padding: 4px;
        border-radius: 0px;
        box-shadow: none;
    }

    .phone-padd {
        padding: 20px;
        margin-top: 100px;
    }

    .phone {
        display: block;
    }

    .phone-layout {
        display: block;
    }

    .order-card>div {
        flex: none;
        text-align: left;
    }

    .order-card {

        gap: 20px 60px;

    }

    .welcome-box {
        display: none;
    }

    .desktop {
        display: none !important;
    }

    .checkout-left,
    .checkout-right {
        width: 96%;
        margin: auto;
    }

    .product-review-box2 {
        flex-wrap: wrap;

    }

    .product-action-buttons {
        justify-content: center;
    }

    .highlight-box {
        margin-top: 10px;
    }

    .btn-box {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .checkout-section {
        padding: 10px 0px;
    }

    .add-cart-box {
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 90px;
    }

    .user-dashborad {
        padding: 10px 0px;
    }

    .addtocart-product {
        flex-wrap: wrap;
        gap: 10px;
    }

    .product-rating {
        font-size: 9px;
        background-color: #fcfff7;
        width: max-content;
        padding: 2px 3px;
        border-radius: 30px;
        color: rgb(232, 197, 0);
        box-shadow: rgba(255, 247, 158, 0.808) 0px 0px 0px 1px;
    }

    .hero {
        margin-top: 175px;
    }

    .desktop-img {
        display: none !important;
    }

    .mobile-img {
        display: block !important;
    }

    .owl-carousel .owl-item img {
        height: 300px;
    }

    .body-container {
        max-width: 95%;
        padding: 3px;
    }

    .product-context h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .price span:nth-child(1) {
        font-size: 15px;
    }

    .product-card .hover-img {
        display: none;
    }

    .product-card:hover .main-img {
        opacity: 1;
    }

    .product-card {
        width: 50%;
        border: 1px solid #2f5d3f1f;
        position: relative;
        border-radius: 0px;
        height: 489px;
        position: relative;
    }

    .add-cart {
        position: absolute;
        bottom: 0px;
        border: 1px solid #005c39;
    }

    .add-to-card {
        border: 1px solid transparent;
    }


    .whislist {
        position: absolute;
        top: 3px;
        right: 3%;
        z-index: 99;
        width: 44px;
        height: 44px;
        border: 1px solid rgb(255, 155, 155);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 20px;
    }

    .add-cart {
        font-size: 15px;
    }

    .add-to-card {
        grid-template-columns: 100% 0%;
    }

    .product-image {
        width: 100%;
        height: 200px;
    }

    .product-context p {
        display: none !important;
    }

    .main-header,
    .second-header {
        display: none;
    }

    .bottom-header {
        display: none !important;
    }

    .product-container {
        gap: 0px;
    }


    .shiping {
        padding: 10px;
    }



    .verify-box input {
        width: 100%;
    }

    .verify-box {
        padding: 10px;
        box-shadow: none;
    }

    .verifyotp {
        padding: 10px 10px;
    }

    .signup {
        padding: 0px;
    }

    .singup-box {
        width: 100%;
        padding: 20px 10px;
        background-color: white;
        box-shadow: none;
    }

    .nav-container {
        padding: 5px;
    }

    .login-side-poster {
        padding: 40px 10px;
        ;
    }

    .login-main-container {
        width: 100%;
        padding: 0px;
        box-shadow: none;
        background-color: white;
    }


    .login-poster {
        padding: 0px;
    }

    .login-container {
        padding: 1px 1px;
    }

    .login-side-poster {
        border-right: none;
    }

    .login-container input {
        width: 100% !important;

    }

    .btn-login {
        width: 100% !important;
    }

    .bottom-header {
        display: block;
    }

    .hero-carousel .poster-text {
        top: 10%;
    }

    .poster-text h1 {
        color: white;
        font-size: 33px;
    }

    .logo {
        width: auto;
    }

    .tab-link {
        display: none !important;
    }

    .mobile-icon i {
        font-size: 29px;
        display: block;
    }

    .quick-link {
        display: none;
    }

    .link {
        display: none;
    }

    .overlay-slider {
        width: 100%;
    }

    .navbar {

        padding: 0px;
        border-radius: 0px;
        box-shadow: none;
    }




    .hero-box h2 {
        width: 100%;
        font-size: 32px;
    }

    .hero-box p {
        width: 88%;
    }



    .overlay-slider {
        height: 200px;
        top: 105px;

    }

    .hero-section {
        height: 600px;
    }



    .other-section-container {
        padding: 0px;
    }

    .section-heading {
        padding-bottom: 30px;
    }

    .top-products-section {
        margin-top: 40px;
    }

    .banner {
        padding: 40px 0px;
        margin-bottom: 0px;
        height: auto;
        background-image: none;
        background-color: rgb(89, 98, 69) !important;

    }

    .emoji {
        width: 100px;
        position: absolute;
        top: 26px;
        left: 16px;
        transform: rotate(-35deg);
        opacity: 26%;
    }

    .gs {
        padding: 20px;
    }

    .reel-carousel-section {
        padding: 10px 0px;
    }

    .reel-video {
        max-height: 560px;
    }

    .blog-container {
        padding: 10px 0px;
    }

    .about-section {
        padding: 60px 0px;
    }

    .emoji2 {
        width: 100px;
        position: absolute;
        top: 16px;
        right: 25px;
        transform: rotate(35deg);
        opacity: 60%;
    }

    .about-content p {
        font-size: 16px;
    }

    .emoji3 {
        width: 300px;
        position: absolute;
        bottom: 125px;
        right: 54px;
        transform: rotate(-10deg);
        opacity: 11%;
    }

    .emoji4 {
        width: 150px;
        position: absolute;
        bottom: -13px;
        left: 3px;
        transform: rotate(10deg);
        opacity: 20%;
    }

    .blog-box {
        margin-top: 20px;
    }

    .blog-btn {
        margin-top: 40px;
    }



    .top-products-section .owl-nav button.owl-next {
        right: -10px !important;
        position: absolute;
        top: 50% !important;
    }

    .top-products-section .owl-nav button.owl-prev {
        left: -10px !important;
        position: absolute;
        top: 50% !important;
    }



    .top-bar .owl-nav button.owl-next {
        right: -15px !important;
        position: absolute;
        top: 20px !important;
    }

    .top-bar .owl-nav button.owl-prev {
        left: -15px !important;
        position: absolute;
        top: 20px !important;
    }
}


@media screen and (max-width:1024px) {
    .singup-box {
        width: 100%;
        padding: 20px 10px;
        background-color: white;
        box-shadow: none;
    }

    .login-side-poster {
        border: 1px solid transparent;
        padding: 0px;
    }

    .login-container input {
        width: 100% !important;

    }

    .login-poster {
        padding: 10px;
    }

    .login-container {
        padding: 0px;
    }

    .btn-login {
        width: 100% !important;
    }

    .login-main-container {
        width: 100%;
        padding: 0px;
        box-shadow: none;
        background-color: white;
    }

    .nav-icon {
        display: none;
    }

    .mobile-icon {
        display: block;
    }

    .mobile-icon-box {
        display: flex;
        gap: 34px;
    }

    .tab-link ul {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .tab-link {
        display: block;
    }

    .mobile-toogle {
        display: block;
    }


    .quick-link {
        display: none;
    }

    .link {
        display: none;
    }

    .logo {
        width: auto;
    }



    .hero-carousel .poster-text {
        width: 100%;
        padding: 20px;
    }
}