.product-color{
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    margin-right: 5px;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    cursor: pointer;
    vertical-align: middle;
}
.modal-color-input-div{
    height: 25px;
    width: 25px;
    border-radius: 100%;
}
.modal-color-input{
    margin-top: 6px;
    margin-left: 6px;
}
.btn-solid-success{
    padding: 13px 29px;
    color: #ede9e9;
    letter-spacing: 0.05em;
    border: 2px solid #43d39e;
    background-image: linear-gradient(30deg, #43d39e 50%, transparent 50%);
    background-size: 850px;
    background-repeat: no-repeat;
    background-position: 0;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}
.btn-solid-success:hover {
    background-position: 100%;
    color: #000000;
    background-color: #ffffff;
}
.btn-solid-warning{
    padding: 13px 29px;
    color: #ede9e9;
    letter-spacing: 0.05em;
    border: 2px solid #ffcc00;
    background-image: linear-gradient(30deg, #ffcc00 50%, transparent 50%);
    background-size: 850px;
    background-repeat: no-repeat;
    background-position: 0;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}
.btn-solid-warning:hover {
    background-position: 100%;
    color: #000000;
    background-color: #ffffff;
}
.btn:hover {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.btn:hover, .btn:focus {
    text-decoration: none;
}
.c-active{
    color:red;
}
.app-footer{
    background-color: #114b5f;
}
.app-footer-down-bar{
    background-color: #0f4051;
}
.app-footer-powered-by{
    color: #b3a8a8;
    font-weight: bold;
}
.social-icons {
    margin-bottom: 20px; /* Add space between social icons and address */
}

.social-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
    margin: 0 10px; /* Adjust spacing between social icons */
}

.social-icon i {
    font-size: 20px;
}

.address,
.contact-info {
    color: white;
    margin-bottom: 10px; /* Add space between address/contact info and logo */
}

.logo img {
    max-width: 200px; /* Adjust the max width of the logo */
    height: auto;
}
.facebook{
    color: #3b5998;
}
.twitter{
    color: #1da1f2;
}
.instagram{
    color: #c13584;
}
.youtube{
    color: #FF0000;
}
.customer-menu ul li.active {
    background: linear-gradient(30deg, transparent 50%, #ff4c3b 50%);
    border: 1px solid #ff4c3b; /* Maintain border color */
    pointer-events: none; /* Disable hover effect */
}

.customer-menu ul li.active a {
    color: black; /* Maintain text color */
}
.customer-menu ul li{
    background: #ff4c3b;
    border: 1px solid #ff4c3b;
    padding: 8px;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 10px;
}
.customer-menu ul li a{
    color: white;
}
.customer-menu ul li:hover{
    background: linear-gradient(30deg, transparent 50%, #ff4c3b 50%);
}
.customer-menu ul li:hover a{
    color: black;
}