/* ========================
   Main Menu
======================== */
.main-menu ul > li {
    margin-inline-end: 25px;
}

/* Category Menu */
.category-menu.category-menu-off {
    display: none;
}

/* Justify Content Adjustment */
.justify-content-xl-end {
    justify-content: center !important;
}

/* ========================
   Margins & Padding
======================== */
.mb-40 { margin-bottom: 10px; }
.mb-30 { margin-bottom: 15px; }
.pb-20 { padding-bottom: 0; }
.pb-45 { padding-bottom: 5px; }
.pb-50 { padding-bottom: 5px; }
.pb-60 { padding-bottom: 6px; }
.pb-70 { padding-bottom: 5px; }
.pb-80 { padding-bottom: 8px; }
.pt-30 { padding-top: 5px; }
.pt-60 { padding-top: 6px; }
.pt-65 { padding-top: 5px; }
.pt-70 { padding-top: 5px; }
.pt-80 { padding-top: 8px; }

/* ========================
   Category Icons
======================== */
.tpcategory__icon {
    margin: auto auto -2px;
}
.tpcategory .tpcategory__icon img {
    max-width: 100px;
}
.tpcategory__title {
    font-size: 20px;
}

/* ========================
   Icon Box Container
======================== */
.icon-box {
    display: flex;
    flex-direction: column;       /* Stack icons vertically */
    justify-content: flex-end;    /* Align at bottom */
    align-items: flex-end;        /* Align to right */
    position: fixed;
    bottom: 100px;                /* Raised higher */
    right: 20px;
    gap: 15px;                    /* Space between icons */
    z-index: 9999;                /* Ensure on top */
}

/* ========================
   Individual Icon Boxes
======================== */
.icon-box .box {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s;
    cursor: pointer;
    background: transparent;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Hover rotation for all icons */
.icon-box .box:hover {
    transform: rotate(360deg);
}

/* ========================
   WhatsApp Icon (Above) - Red
======================== */
.icon-box .box:nth-child(1) {
    border: 2px solid red;           
    animation: pulse 1.2s ease-in-out infinite;
    animation-delay: 0.7s;
}
.icon-box .box:nth-child(1) i {
    color: red;                      
    font-size: 32px;                 /* Reduced size */
}

/* ========================
   Messenger Icon (Below) - Green
======================== */
.icon-box .box:nth-child(2) {
    border: 2px solid #25D366;       
    animation: pulse 1.2s ease-in-out infinite;
    animation-delay: 0.5s;
}
.icon-box .box:nth-child(2) i {
    color: #25D366;                  
    font-size: 32px;                 /* Reduced size */
}

/* ========================
   Additional Icons (Optional)
======================== */
.icon-box .box:nth-child(3),
.icon-box .box:nth-child(4),
.icon-box .box:nth-child(5),
.icon-box .box:nth-child(6) {
    border: 2px solid red;
    background: transparent;
}
.icon-box .box:nth-child(3) i,
.icon-box .box:nth-child(4) i,
.icon-box .box:nth-child(5) i,
.icon-box .box:nth-child(6) i {
    color: red;
    font-size: 32px;                 /* Reduced size for consistency */
}