.scroll-item {
    display: flex;
    /* Use flexbox for alignment */
    flex-direction: column;
    /* Arrange content vertically */
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    background: linear-gradient(to top, #fe7602, #fe760257);
    /* Gradient background */
    color: #fff;
    /* Text color */
    padding: 20px;
    text-align: center;
    /* Align text */
    white-space: nowrap;
    /* Prevent text wrapping */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Shadow effect */
    margin-top: 12px;
}

.scroll-item a {
    text-decoration: none;
    /* Remove underline from links */
    color: #fff;
    /* Link text color */
    display: flex;
    /* Use flexbox inside the link for better alignment */
    flex-direction: column;
    /* Icon and text in a column */
    align-items: center;
    /* Align center horizontally */
    gap: 10px;
    /* Add space between icon and text */
}

.scroll-item i {
    font-size: 2rem;
    /* Adjust icon size */
}


.scroll-container_custom {
    display: flex;
    overflow-x: auto;
    /* Allows horizontal scrolling */
    gap: 20px;
    /* Adds space between items */
    padding: 10px;

}

.scroll-container_custom::-webkit-scrollbar {
    height: 6px;
    /* Height of the scrollbar */
}

.scroll-container_custom::-webkit-scrollbar-thumb {
    background-color: #555;
    /* Color of the scrollbar thumb */
    border-radius: 4px;
    /* Rounded edges */
}

.scroll-item_custom {
    background: linear-gradient(to top, #fe7602, #fe760257);
    /* Blue to red gradient */
    color: #fff;
    padding: 20px;
    text-align: center;
    white-space: nowrap;
    /* Prevents text from wrapping */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Shadow effect */
}


.slider-container {
    width: 100%;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

/*  img {
width: 100%;
height: auto;
display: block;
}
*/
/* Optional: Add styles for navigation buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

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

.scroll_main_div {
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
    padding: 15px;
    height: 680px;
    overflow: auto;
}

.child_scroll_main_div {
    border: 1px solid orange;
    margin-top: 15px;
    border-radius: 10px;
}

#mainimgcenterdiv img {
    max-width: 100%;
    max-height: 600px;
    padding: 10px;

    /*    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);*/

    aspect-ratio: 3 / 2;
    object-fit: contain;
}

.h4msg {
    color: black;
    font-size: 18px;
    line-height: 25px;
    padding-bottom: 18px;

}

@media only screen and (max-width:650px) {

    .h4msg {
        color: black;
        font-size: 14px;
        line-height: 16px;
        text-align: justify;
        padding-bottom: 18px;

    }
}

/* Base background for the scrollbar track */
::-webkit-scrollbar {
    width: 10px;
    /* Adjust width */
    height: 10px;
    /* For horizontal scrollbars */

}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {

    border-radius: 10px;
    /* Rounded corners */
    border: 2px solid #f0f0f0;
    /* Add padding effect */
}


/* Scrollbar corner (optional, for overflow) */
::-webkit-scrollbar-corner {
    background: #f0f0f0;
    /* Same as the track background */
}

/* Firefox support */
* {
    scrollbar-width: thin;
    /* Thin scrollbar */

}


#titleTrack {
    border-left: 4px solid #fe7602;
    border-right: 4px solid #fe7602;
    border-bottom: 1px solid #fe7602;
    padding: 0px 12px;
    border-radius: 10px;
    font-size: 20px;
}

.scrollMain {
    padding: 10px 20px;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 12px;
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29p
}


.scrollMain img {
    width: 160px;
    height: 200px;
    display: block;
    margin: auto;
}

.scrollMain .card {
    padding-top: 10px;
    background: linear-gradient(to top, #fe7602, #fe760257);
    /* Blue to red gradient */
}

/* Styling for the marquee */
.styled-marquee {
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
    transform: rotateX(15deg);
    /* Adds a 3D tilt effect */
}

/* Text inside the marquee */
.styled-marquee p {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 8px;
}

/* Add hover effects */
.styled-marquee:hover {
    background: linear-gradient(to bottom, #e0e0e0, #f5f5f5);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(255, 255, 255, 0.6);
    transform: rotateX(10deg);
}

/* Add animation for a slight glow */
.styled-marquee:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    animation: glow 3s infinite alternate;
    z-index: -1;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    to {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
}


.donation {
    margin: auto;
    margin-top: 10px;
    width: auto;
    height: auto;
    padding: 25px;
    padding-left: 30px;
    /* text-align: center; */
    box-shadow: 0px 0px 5px 2px lightgrey;
    border-radius: 10px;
    background: linear-gradient(176deg, #1c6fac 0%, rgba(10, 0, 92, 1) 100%);
    ;
}

.donation p {
    /* margin-top: 20px; */
    font-size: 20px;
    color: #fff;
}

.qrcode {
    margin: auto;
    margin-top: 20px;
    width: 250px;
    height: auto;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 0px 5px 2px lightgrey;
    border-radius: 10px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* General styling for form sections */
.comman_div {
    margin-bottom: 20px;
    /* Add spacing between comman_divs */
    margin-top: 10px;
}

/* Styling for the labels */
.comman_div label {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 5px;
    display: block;
    color: #000000;
}

/* Styling for the input and select elements */
.comman_div input.form-control,
.comman_div select.form-control {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
        inset -2px -2px 5px rgba(255, 255, 255, 0.7);
    /* 3D effect */
    transition: all 0.3s ease;
}

/* Styling for hover and focus states */
.comman_div input.form-control:focus,
.comman_div select.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
    /* Add glowing effect */
    outline: none;
}

/* Add 3D background effect to each comman_div */
.comman_div {
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    /* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1),
        -5px -5px 15px rgba(255, 255, 255, 0.7); */
    border-radius: 10px;
    padding: 15px;
}

/* Add spacing between the label and the field */
.comman_div .col-md-3 , .col-md-2, .col-md-6 {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .comman_div {
        flex-direction: column;
        /* Stack fields on smaller screens */
        padding: 10px;
    }

    .col-md-3 ,.col-md-2, .col-md-6 {
        margin-bottom: 10px;
    }
}


/* Loader */
.loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    z-index: 9999;
}

.loader.is-active {
    display: block;
}

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

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 0% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    position: relative;
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

#h5formtitle {

text-align: center;

background: linear-gradient(to right, rgb(0 0 139 / 99%), darkblue, rgb(0 0 139));

color: white;

padding: 10px;
}

.help{

    background:#050505;

    /*background-image:
    radial-gradient(circle at top right,
    rgba(212,175,55,.15),
    transparent 40%);*/

    /*background-image: url(../../master/sideabout.png);
    background-size: contain;
    background-repeat: no-repeat;*/
}

.help h2{

color:#fff;

font-size: 26px;

font-weight:800;

/* line-height:65px; */
}

.help p{

color:#CFCFCF;

line-height:32px;

font-size: 16px;

text-align: justify;
}

.help__content-list ul{

    list-style:none;
    padding:0;

}

.help__content-list li{

    color:#E8E8E8;

    margin-bottom:18px;

    font-size:17px;

}

.help__content-list i{

    color:#D4AF37;

    margin-right:12px;

}

.section-tag{

background:rgba(212,175,55,.12);

color:#D4AF37;

border:1px solid rgba(212,175,55,.20);

padding: 10px 22px;

border-radius:50px;

display:inline-block;

font-weight:600;
}

.btn-primary{

    background:linear-gradient(90deg,#D4AF37,#FFD700);

    color:#111;

    border:none;

    border-radius:40px;

    padding:15px 35px;

    font-weight:700;

}

.btn-primary:hover{

    background:#fff;

    color:#000;

}

.btn-outline-light{

    border:1px solid #D4AF37;

    color:#D4AF37;

    border-radius:40px;

    padding:15px 35px;

}

.btn-outline-light:hover{

    background:#D4AF37;

    color:#111;

}

.about-card{

display:flex;

align-items:center;

gap:20px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(15px);

border:1px solid rgba(212,175,55,.18);

border-radius:18px;

padding:20px;

transition:.35s;

height:100%;

margin-top: 15px;
}

.about-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:0 15px 40px rgba(212,175,55,.18);

}

.about-icon{

    width:70px;
    height:70px;

    min-width:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#D4AF37,#FFD700);

    color:#111;

    font-size:28px;

    box-shadow:0 10px 30px rgba(212,175,55,.35);

}

.about-info h5{

    color:#fff;

    font-weight:700;

    margin-bottom:8px;

    font-size:19px;

}

.about-info p{

    color:#cfcfcf;

    margin:0;

    line-height:26px;

    font-size:15px;

}

.product-section{

padding: 40px 0;

background:#050505;
}

.section-title{

/* font-size:55px; */

font-weight:800;

color:#fff;

line-height: 1.6;

padding-top: 15px;
}

.section-title span{

color:#D4AF37;

}

.section-desc{

max-width:750px;

margin:auto;

color:#CFCFCF;

margin-top:20px;

}

.product-card{

background:#111;

border-radius:30px;

overflow:hidden;

border:1px solid rgba(212,175,55,.15);

padding: 12px;

box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.product-image-box{

position:relative;

padding:30px;

}

.product-image{

transition:.5s;

}

.product-card:hover .product-image{

transform:scale(1.08);

}

.offer-badge{

position:absolute;

top:10px;

left:10px;

background:#D4AF37;

padding:8px 20px;

border-radius:40px;

font-weight:bold;

color:#111;

}

.rating{

font-size:20px;

color:#FFD700;

margin-bottom:15px;

}

.rating span{

font-size:15px;

color:#ddd;

margin-left:10px;

}

.product-content h3{

font-size:40px;

font-weight:700;

color:#fff;

margin-bottom:20px;

}

.product-content p{

color:#CFCFCF;

line-height:30px;

}

.feature-list{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin:35px 0;

}

.feature-list div{

background:#181818;

padding:15px;

border-radius:12px;

color:#fff;

}

.feature-list i{

color:#D4AF37;

margin-right:8px;

}

.price-box{

margin-bottom:35px;

}

.old-price{

font-size:25px;

text-decoration:line-through;

color:#999;

margin-right:20px;

}

.new-price{

font-size:42px;

font-weight:800;

color:#FFD700;

}

.product-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.buy-btn{

background:linear-gradient(135deg,#D4AF37,#FFD700);

border:none;

padding:16px 45px;

border-radius:50px;

font-weight:700;

}

.whatsapp-btn{

background:#25D366;

color:#fff;

padding:16px 35px;

border-radius:50px;

text-decoration:none;

font-weight:700;

}

.buy-btn:hover{

transform:translateY(-5px);

}

.whatsapp-btn:hover{

color:#fff;

transform:translateY(-5px);

}

.order-modal{
    background:#111;
    border-radius:20px;
    border:1px solid rgba(212,175,55,.2);
}

.order-modal .modal-header{
    border-bottom:1px solid rgba(212,175,55,.15);
}

.order-modal h4{
    color:#FFD700;
    font-weight:700;
}

.order-modal label{
    color:#fff;
    font-weight:600;
}

.order-modal .form-control,
.order-modal .form-select{
    background:#1a1a1a;
    border:1px solid #333;
    color:#fff;
    height:50px;
}

.order-modal textarea.form-control{
    height:110px;
}

.order-modal .form-control:focus,
.order-modal .form-select:focus{
    background:#1a1a1a;
    color:#fff;
    border-color:#FFD700;
    box-shadow:0 0 12px rgba(255,215,0,.25);
}

.captcha-box{
    height:50px;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#D4AF37,#FFD700);
    font-size:22px;
    font-weight:700;
    color:#111;
}

.submit-btn{
    height:55px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#D4AF37,#FFD700);
    color:#111;
    font-size:18px;
    font-weight: 800;
    padding: 0px 27px;
}

.submit-btn:hover{
    transform:translateY(-2px);
    transition:.3s;
}


/*============================
Benefits Section
=============================*/

.benefits-section{
    position:relative;
    padding: 25px 0;
    background:
    radial-gradient(circle at top left,
    rgba(212,175,55,.12) 0%,
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(255,215,0,.08) 0%,
    transparent 35%),

    linear-gradient(180deg,#0c0c0c 0%,#151515 100%);
    overflow:hidden;
}

.benefits-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:#D4AF37;
    filter:blur(180px);
    opacity:.08;
    top:-180px;
    left:-120px;
}

.benefits-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#FFD700;
    filter:blur(170px);
    opacity:.06;
    bottom:-150px;
    right:-100px;
}

.benefit-card{

background:#111111;

padding:35px;

border-radius:22px;

text-align:center;

height:100%;

border:1px solid rgba(212,175,55,.15);

transition:.4s;

position:relative;

overflow:hidden;

}

.benefit-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#D4AF37,#FFD700);

transform:scaleX(0);

transition:.4s;

}

.benefit-card:hover::before{

transform:scaleX(1);

}

.benefit-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(212,175,55,.15);

border-color:#D4AF37;

}

.benefit-icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#D4AF37,#FFD700);

font-size:32px;

color:#111;

margin-bottom:25px;

}

.benefit-card h4{

color:#fff;

font-weight:700;

margin-bottom:15px;

}

.benefit-card p{

color:#cfcfcf;

line-height:28px;

margin:0;

}

/*=========================
INGREDIENTS
=========================*/

.ingredients-section{

padding: 25px 0;

position:relative;

background:
linear-gradient(180deg,#0d0d0d,#161616);

overflow:hidden;
}

.ingredients-section::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#D4AF37;

filter:blur(180px);

opacity:.07;

right:-120px;

top:-100px;

}

.ingredient-image{

text-align:center;

}

.floating-product{

max-width:370px;

animation:float 4s ease-in-out infinite;

filter:drop-shadow(0 30px 40px rgba(212,175,55,.25));

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-15px);}

100%{transform:translateY(0);}

}

.ingredient-card{

background:rgba(255,255,255,.03);

border:1px solid rgba(212,175,55,.15);

border-radius:20px;

padding:25px;

height:100%;

transition:.35s;

backdrop-filter:blur(10px);

}

.ingredient-card:hover{

transform:translateY(-8px);

border-color:#FFD700;

box-shadow:0 20px 35px rgba(212,175,55,.12);

}

.ingredient-card i{

width:70px;

height:70px;

line-height:70px;

text-align:center;

border-radius:50%;

background:linear-gradient(135deg,#D4AF37,#FFD700);

color:#111;

font-size:28px;

margin-bottom:20px;

}

.ingredient-card h4{

color:#fff;

font-weight:700;

margin-bottom:12px;

}

.ingredient-card p{

color:#cfcfcf;

line-height:28px;

margin:0;

}

/*==========================
REVIEWS
==========================*/

.reviews-section{

padding: 25px 0;

background:
linear-gradient(180deg,#111,#050505);

overflow:hidden;
}

.review-slider{

overflow:hidden;

margin-top:50px;

}

.review-track{

display:flex;

gap:30px;

width:max-content;

animation:reviewScroll 35s linear infinite;

}

.review-slider:hover .review-track{

animation-play-state:paused;

}

.review-card{

width:360px;

background:#171717;

border-radius:20px;

padding:30px;

border:1px solid rgba(212,175,55,.15);

transition:.35s;

flex-shrink:0;

}

.review-card:hover{

transform:translateY(-8px);

border-color:#D4AF37;

box-shadow:0 15px 35px rgba(212,175,55,.15);

}

.review-top{

display:flex;

align-items:center;

margin-bottom:20px;

}

.review-top img{

width:65px;

height:65px;

border-radius:50%;

margin-right:15px;

border:3px solid #D4AF37;

object-fit:cover;

}

.review-top h5{

color:#fff;

margin:0;

font-weight:700;

}

.review-top small{

color:#aaa;

}

.stars{

color:#FFD700;

font-size:22px;

margin-bottom:15px;

letter-spacing:3px;

}

.review-card p{

color:#d0d0d0;

line-height:28px;

margin:0;

}

@keyframes reviewScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.floating-buttons{

position:fixed;

right:20px;

bottom:20px;

display:flex;

flex-direction:column;

gap:15px;

z-index:99999;

}

.floating-buttons a{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

text-decoration:none;

color:#fff;

box-shadow:0 10px 25px rgba(0,0,0,.35);

transition:.35s;

position:relative;

}

.call-btn{

background:#D4AF37;

color:#111 !important;

}

.whatsapp-btn-float{

background:#25D366;

}

.floating-buttons a:hover{

transform:scale(1.1);

}

.floating-buttons span{

display:none;

}

@media(max-width:768px){

.floating-buttons{

right:15px;

bottom:15px;

}

.floating-buttons a{

width:55px;

height:55px;

font-size:22px;

}

}

/*=========================
FAQ
=========================*/

.faq-section{

padding: 25px 0;

background:
linear-gradient(180deg,#050505,#111111);
}

.faq-section .accordion-item{

background:#171717;

border:1px solid rgba(212,175,55,.15);

border-radius:15px;

margin-bottom:20px;

overflow:hidden;

}

.faq-section .accordion-button{

background:#171717;

color:#fff;

font-size:18px;

font-weight:600;

padding:22px;

box-shadow:none;

}

.faq-section .accordion-button:not(.collapsed){

background:#D4AF37;

color:#111;

}

.faq-section .accordion-button:focus{

box-shadow:none;

}

.faq-section .accordion-button::after{

filter:brightness(0) invert(1);

}

.faq-section .accordion-button:not(.collapsed)::after{

filter:none;

}

.faq-section .accordion-body{

background:#111;

color:#d0d0d0;

line-height:30px;

padding:22px;

}

/*==========================
Floating Contact Buttons
===========================*/

.floating-contact{

    position:fixed;

    left:20px;

    bottom:25px;

    z-index:9999;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.floating-contact a{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:12px 18px;

    border-radius:50px;

    color:#fff;

    font-weight:600;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    transition:.35s;

}

.call-float{

    background:linear-gradient(135deg,#D4AF37,#FFD700);

    color:#111 !important;

}

.whatsapp-float{

    background:#25D366;

}

.floating-contact a:hover{

    transform:translateX(8px);

}

.floating-contact i{

    font-size:22px;

}

@media(max-width:768px){

    .floating-contact{

        left:12px;

        bottom:15px;

        gap:10px;

    }

    .floating-contact a{

        width:55px;

        height:55px;

        justify-content:center;

        padding:0;

        border-radius:50%;

    }

    .floating-contact span{

        display:none;

    }

    .floating-contact i{

        font-size:22px;

    }