/*
Custom CSS for TemplateMo 561 Purple Buzz

https://templatemo.com/tm-561-purple-buzz

*/


.h2 {
    font-size: 2rem;
}

.text-justify {
    text-align: justify;
}

.image img {
    max-width: 100%;
}

img, svg {
    vertical-align: unset;
}

a {
    text-decoration: none;
}

.nav-item .nav-link {
    font-weight: 600;
}

.item {
    padding: 30px;
    text-align: center;
    border: 1px solid gray;
    border-radius: 10px;
    margin-bottom: 15px;
}

    .item p {
        font-size: 1.2rem;
        font-weight: 600;
        margin-top: 15px;
    }

    .item .at {
        display: none;
    }

    .item:hover p {
        color: white !important;
    }

.box1:hover .nat {
    display: none !important;
}

.box1:hover .at {
    display: inline-block !important;
}

.box2:hover .nat {
    display: none !important;
}

.box2:hover .at {
    display: inline-block !important;
}

.box3:hover .nat {
    display: none !important;
}

.box3:hover .at {
    display: inline-block !important;
}

/* Custom Premium Modals */
.modal-custom-dialog {
    max-width: 450px;
}

.modal-custom-dialog .modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    overflow: hidden;
    padding: 24px;
    position: relative;
}

/* Modal header overrides */
.modal-custom-dialog .modal-header {
    border: none;
    padding: 0;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-custom-dialog .modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.modal-custom-dialog .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-size: 0.8rem;
    padding: 8px;
    border-radius: 50%;
    background-color: #f4f6f8;
    transition: all 0.2s ease;
    z-index: 10;
    margin: 0;
}

.modal-custom-dialog .btn-close:hover {
    background-color: #e8ebed;
    transform: rotate(90deg);
}

/* Icon container */
.modal-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

.modal-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    animation: modal-icon-pulse 2s infinite ease-in-out;
}

@keyframes modal-icon-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
}

/* Status themes */
/* Success */
.modal-success .modal-icon-circle {
    background-color: #e6f6ee;
    color: #10b981;
}
.modal-success .modal-title {
    color: #10b981;
}

/* Warning */
.modal-warning .modal-icon-circle {
    background-color: #fff9db;
    color: #f59f00;
}
.modal-warning .modal-title {
    color: #f59f00;
}

/* Error */
.modal-error .modal-icon-circle {
    background-color: #ffe3e3;
    color: #fa5252;
}
.modal-error .modal-title {
    color: #fa5252;
}

/* Info */
.modal-info .modal-icon-circle {
    background-color: #e7f5ff;
    color: #228be6;
}
.modal-info .modal-title {
    color: #228be6;
}

/* Modal Body spacing */
.modal-custom-dialog .modal-body {
    padding: 0;
    text-align: center;
}

.modal-custom-dialog #modal-message, 
.modal-custom-dialog #product-modal-message {
    font-size: 1rem;
    line-height: 1.6;
    color: #4f566b;
    margin-bottom: 24px;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
}

/* Actions styling */
.modal-custom-dialog #box-button,
.modal-custom-dialog #product-box-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.modal-custom-dialog #box-button .btn,
.modal-custom-dialog #product-box-button .btn,
.modal-custom-dialog .btn-default-close {
    border-radius: 10px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    border: none;
    font-family: 'Open Sans', sans-serif;
}

/* Custom Success style button */
.modal-success-btn {
    background-color: #10b981;
    color: white;
}
.modal-success-btn:hover {
    background-color: #059669;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Custom Warning style button */
.modal-warning-btn {
    background-color: #f59f00;
    color: white;
}
.modal-warning-btn:hover {
    background-color: #f08c00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 0, 0.2);
}

/* Custom Error style button */
.modal-error-btn {
    background-color: #fa5252;
    color: white;
}
.modal-error-btn:hover {
    background-color: #e03131;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 82, 82, 0.2);
}

/* Custom Info style button */
.modal-info-btn {
    background-color: #228be6;
    color: white;
}
.modal-info-btn:hover {
    background-color: #1c7ed6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.2);
}

/* Entrance Zoom bouncy animation */
.modal.fade .modal-dialog {
    transform: scale(0.9) translate3d(0, 0, 0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.show .modal-dialog {
    transform: scale(1) translate3d(0, 0, 0);
}