@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@500&display=swap');
:root {
  --primary-color: rgba(20, 15, 60, 0.85);
  /* --primary-color: #26505e; */
  --text-on-primary: #ffffff;
  --primary-hover: rgb(81, 77, 110);
  --btn-border:2px solid rgb(238, 9, 9);
  
}
.bg-custom-primary {
  background-color: var(--primary-color) !important;
  color: var(--text-on-primary) !important; /* optional for contrast */
}
.text-md-bold {
  font-weight: 600 !important;
  font-size: 18px !important;
}
.heading-lg-bold {
  font-size: clamp(1.2rem, 2vw + 1rem, 2rem);
  font-weight: bold;
}

.text-p {
font-size: 1.1rem !important;
}
@media (max-width: 991px) { /* Tablets */
  .text-p {
    font-size: 1rem !important;
  }
}

@media (max-width: 767px) { /* Phones */
  .text-p {
    font-size: 0.95rem !important;
  }
}
.text-sp {
font-size: 0.9rem !important;
}
.btn-custom {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  border: var(--btn-border);
  padding: 8px 13px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn-custom:hover {
  background-color: var(--primary-hover);
}


@media (max-width: 768px) {
  .btn-custom {
    /* width: 100%; */
    padding: 10px;
    font-size: 13px;
  }
}















html, body {
  margin: 0;
  padding: 0;
  padding-top: 50px;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  width: 100%;
  box-sizing: border-box;

 
}

body.modal-open {
  padding-right: 0 !important;
}

/* Body styling */
/* body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  padding-top: 120px; 
} */
@media (max-width: 991px) {
  body {
    padding-top: 18px; /* Remove padding for small screens */
  }
}
/* for top button */
.stt {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;  /* Reduced size */
  height: 3rem; /* Reduced size */
  border-radius: 50%;
  background: rgb(255, 231, 154) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
  background-size: 60%; /* Make the icon smaller inside the button */
  box-shadow: 0 0.15rem 0.3rem 0 gray; /* Adjust shadow */
  opacity: 0.7;
  display: none;
  transition: opacity 0.3s, display 0.3s;
  z-index: 10; /* Ensure it's above other elements */
}

.stt:hover {
  opacity: 0.8;
}

.stt:focus {
  opacity: 0.9;
}

.stt:active {
  opacity: 1;
}



/************************** for slider *****************************/
  /*************** for about us *******************/
  .abt-us .container {
    /* background-color: rgba(0, 0, 0, 0.6); Black with 80% transparency */
    background-color:var(--primary-color); /* Black with 80% transparency */
    
    padding: 2rem;

    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(109, 97, 97, 0.5);
  }
  
  /* Text color set to white */
  .abt-us .container .row,
  .abt-us .container h2,
  .abt-us .container p,
  .abt-us .container h4 {
    color: #ffffff;
  }
  
  /* Image shadow and hover effect */
  .abt-us .container img {
    box-shadow: 0 4px 15px rgba(83, 79, 79, 0.3); /* White shadow */
    transition: transform 0.3s ease-in-out;
  }
  
  .abt-us .container img:hover {
    transform: scale(1.05); /* Slightly enlarge image on hover */
  }


/* Event Container Specific Styles */
.event-container {
  width: 100%;
  overflow: hidden;
  background-color: var(--primary-color);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
  /* Ensure no styles here affect the carousel */
   /* Add top rounded corners */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.event-container marquee {
  display: flex;
  align-items: center;
  /* Ensure marquee does not affect layout elsewhere */
}

.image_1 {
  padding: 0; /* Remove extra padding */
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.image_1 img {
  width: auto; /* Auto width to maintain aspect ratio */
  height: 100px; /* Fixed height to ensure consistent display */
}

.image_1:hover {
  transform: scale(1.1); /* Adjust scale to avoid overlap */
}

/* Customizing the SweetAlert2 modal */
.custom-swal-size {
  width: 500px !important; /* Adjust width */
  min-height: 150px !important;
  max-height: 320px !important; /* Optional max height */
  overflow: hidden !important; /* Prevent content from shrinking */
  padding: 10px 20px !important; /* Slight padding to balance layout */
}

/* Reduce space above the icon */
.swal2-icon {
  margin-top: 5px !important; /* Reduce top margin */
  margin-bottom: 5px !important; /* Reduce space below icon */
}

/* Reduce space between title and message */
.swal2-title {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  font-size: 20px !important; /* Adjust title size if needed */
}

/* Reduce space between message and button */
.swal2-html-container {
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  font-size: 14px !important; /* Adjust message text size */
}

/* Adjust button position */
.swal2-actions {
  margin-top: 5px !important; /* Reduce space before button */
}

/* Customizing the "OK" button */
.custom-swal-button {
  background-color: #007BFF !important; /* Blue color */
  color: white !important; /* Text color */
  font-size: 16px !important; /* Adjust font size */
  padding: 8px 18px !important; /* Adjust padding */
  border-radius: 5px !important; /* Rounded corners */
  border: none !important; /* Remove border */
  width: 180px !important; /* Adjust button width */
  text-align: center !important; /* Center text */
}

/* Reduce extra margin around the button */
.swal2-actions .swal2-confirm {
  margin: 5px auto !important; /* Center button & reduce spacing */
}

/* Change button color on hover */
.custom-swal-button:hover {
  background-color: #0056b3 !important; /* Darker blue on hover */
}


/* Custom styling for the cancel button */
.custom-swal-cancel-button {
  background-color: #dc3545 !important; /* Red color */
  color: white !important;
  font-size: 16px !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  border: none !important;
  width: 180px !important;
  text-align: center !important;
}

/* Change cancel button color on hover */
.custom-swal-cancel-button:hover {
  background-color: #a71d2a !important; /* Darker red on hover */
}
/* dashbord section */
#dashboard-section {
            padding: 20px;
        }

        #dashboard-section .card {
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        #dashboard-section .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #007bff, #0056b3);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        #dashboard-section .card:hover::before {
            transform: scaleX(1);
        }

        #dashboard-section .card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
        }

        #dashboard-section .card-body {
            padding: 1.25rem;
            position: relative;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.75rem;
            font-size: 1.2rem;
            color: white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .blog-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .group-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .profile-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .activity-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
        .views-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
        .engagement-icon { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

        .metric-number {
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e50;
            margin: 0.25rem 0;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .metric-label {
            color: #7f8c8d;
            font-weight: 500;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
        }

        .metric-sublabel {
            color: #95a5a6;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }

        .circular-chart {
            display: block;
            margin: 28px auto;
            max-width: 100px;
            max-height: 100px;
        }

        .circle-bg {
            fill: none;
            stroke: #eee;
            stroke-width: 3;
        }

        .circle {
            fill: none;
            stroke-width: 4;
            stroke-linecap: round;
            animation: progress 2s ease-out forwards;
        }

        .green .circle {
            stroke: #007bff;
        }

        .percentage {
            fill: #007bff;
            font-size: 0.6em;
            text-anchor: middle;
            font-weight: bold;
        }

        @keyframes progress {
            0% {
                stroke-dasharray: 0 100;
            }
        }

        .recent-activity-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #f8f9fa;
        }

        .recent-activity-item:last-child {
            border-bottom: none;
        }

        .activity-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #007bff;
            margin-right: 0.75rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .progress-modern {
            height: 8px;
            border-radius: 10px;
            background: #f8f9fa;
            overflow: hidden;
            margin: 1rem 0;
        }

        .progress-bar-modern {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #0056b3);
            border-radius: 10px;
            transition: width 2s ease-in-out;
            position: relative;
        }

        .progress-bar-modern::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            #dashboard-section {
                padding: 10px;
            }

            #dashboard-section .card-body {
                padding: 1rem;
            }

            .metric-number {
                font-size: 1.75rem;
            }

            .card-icon {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }

            .circular-chart {
                max-width: 70px;
                max-height: 70px;
            }
        }

        @media (max-width: 576px) {
            .metric-number {
                font-size: 1.5rem;
            }

            #dashboard-section .card-body {
                padding: 0.875rem;
            }

            .card-icon {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }

        .trend-indicator {
            font-size: 0.7rem;
            padding: 0.15rem 0.4rem;
            border-radius: 10px;
            margin-top: 0.25rem;
            display: inline-block;
        }

        .trend-up {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
        }

        .trend-down {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }

        .loading-skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }



    /*.btn-create {*/
        /* Same width for create buttons */
    /*    width: 55%;*/
    /*}*/

    /*.btn-see {*/
        /* Same width for see buttons */
    /*    width: 40%;*/
    /*}*/
    
    
    .btn-create {
        /* Same width for create buttons */
        width: 50%;
        padding: 5px !important;
    }

    .btn-see {
        /* Same width for see buttons */
        width: 48%;
        padding: 5px !important;
    }
    
    
    
    /*spinnner*/
    .submit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-container {
  text-align: center;
  color: white;
  font-size: 1.2em;
}

.spinner-load {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

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