/* Primary Colors */
:root {
  --primary-green: #307932;
  --primary-black: #000000;
  --primary-white: #ffffff;
}

/* Green-Black Palette */
:root {
    --primary: #307932;
  --primary-dark: #043b07;
  --primary-light: rgba(255, 255, 255, 0.03);
  --primary-transparent: rgba(48, 121, 50, 0);
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #94a3b8;
  --light-gray: #e5e7eb;
  --card-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --success: #307932;
  --error: #ef4444;
  --dark-green: #1a3a1a;
  --medium-green: #2a5a2a;
  --light-green: #3a7a3a;
  --pale-green: #e8f5e9;
  --black-90: #111111;
  --black-80: #222222;
  --black-70: #333333;
}
.tab-pane{
  background-color: transparent !important;
}
      .site-header {
        /*z-index: 1030;*/
        /*position: sticky !important;*/
        top: 0;
        /*background-color: #fff;*/
        /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
      }

    body {
        font-family: 'Poppins', sans-serif;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
        min-height: 100vh;
        /*display: flex;*/
        /*align-items: center;*/
        /*color: var(--dark);*/
      text-align: justify !important;
    }
.text-justify {
  text-align: justify;
  text-justify: inter-word;
}
    /* Auth Card - Base Styles */
    .auth-card {
        background: var(--card-bg);
        border-radius: 16px;
        box-shadow: var(--shadow);
        width: 100%;
        max-width: 480px;
        overflow: hidden;
        border: none;
        transform: translateY(0);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        margin: 2rem auto;
    }

    .auth-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }

    /* Auth Header */
    .auth-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .auth-header::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: rotate 15s linear infinite;
    }

    .auth-title {
        font-weight: 700;
        font-size: 1.75rem;
        margin: 0;
        position: relative;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .auth-subtitle {
        font-weight: 400;
        opacity: 0.9;
        margin-top: 0.75rem;
        position: relative;
        font-size: 1rem;
    }

    /* Auth Body */
    .auth-body {
        padding: 2rem;
    }

    /* Form Elements */
    .form-control {
        height: 50px;
        border-radius: 10px;
        border: 1px solid var(--light-gray);
        transition: all 0.3s;
        padding-left: 15px;
    }

    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.3s;
        cursor: pointer;
        border: none;
        text-decoration: none;
    }

    .btn-block {
        display: block;
        width: 100%;
    }

    .btn-primary {
        background: linear-gradient(to right, var(--primary), var(--primary-dark));
        color: white;
        position: relative;
        overflow: hidden;
    }

    .btn-primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: all 0.5s;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        color: white;
    }

    .btn-primary:hover::after {
        left: 100%;
    }

    .btn-outline {
        background: transparent;
        border: 2px solid var(--primary);
        color: var(--primary);
    }

    .btn-outline:hover {
        background: var(--primary);
        color: white;
        transform: translateY(-2px);
    }

    /* Divider */
    .divider {
        display: flex;
        align-items: center;
        margin: 1.5rem 0;
        color: var(--gray);
        font-size: 0.9rem;
    }

    .divider::before, .divider::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid var(--light-gray);
    }

    .divider::before {
        margin-right: 1rem;
    }

    .divider::after {
        margin-left: 1rem;
    }

    /* Footer Links */
    .auth-footer {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.95rem;
        color: var(--gray);
    }

    .auth-footer a {
        color: var(--primary);
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
        position: relative;
    }

    .auth-footer a::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -2px;
        left: 0;
        background: var(--primary);
        transform: scaleX(0);
        transition: transform 0.3s;
    }

    .auth-footer a:hover::after {
        transform: scaleX(1);
    }

    /* Social Buttons */
    .social-buttons {
        display: flex;
        gap: 12px;
        flex-direction: column;
    }

    /* Utility Classes */
    .text-primary {
        color: var(--primary) !important;
    }

    .animate-delay-1 { animation-delay: 0.1s; }
    .animate-delay-2 { animation-delay: 0.2s; }
    .animate-delay-3 { animation-delay: 0.3s; }

    .floating {
        animation: float 4s ease-in-out infinite;
    }

    /* Error Messages */
    .alert-error {
        background-color: rgba(239, 68, 68, 0.1);
        border-left: 4px solid var(--error);
        padding: 1rem;
        margin-bottom: 1.5rem;
        border-radius: 4px;
    }

    .errorlist {
        color: var(--error);
        padding-left: 0;
        list-style: none;
        margin-bottom: 1.5rem;
    }

    /* Animations */
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    /* Responsive Adjustments */
    @media (max-width: 576px) {
        .auth-card {
            margin: 1rem;
            border-radius: 12px;
        }
        .auth-header {
            padding: 1.5rem;
        }
        .auth-body {
            padding: 1.5rem;
        }
    }


/* Updated Alert Styles */
.alert-debug {
  color: var(--primary-black);
  background-color: var(--primary-white);
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Filter Navigation */
.filterable-nav a.filter-link.current {
  background-color: var(--primary-green);
  color: var(--primary-white);
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.filterable-nav a.filter-link:hover {
  background-color: var(--dark-green);
  color: var(--primary-white);
}

/* Mobile Filter */
.mobile-filter {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Spacing */
.filterable-nav a {
  margin: 0 5px 5px 0;
  display: inline-block;
}

/* Background Classes */
.bg-primary {
  background-color: var(--primary-green) !important;
}

.bg-black {
  background-color: var(--primary-black) !important;
}

.bg-white {
  background-color: var(--primary-white) !important;
}

/* Text Colors */
.text-primary {
  color: var(--primary-green) !important;
}

.text-black {
  color: var(--primary-black) !important;
}

.text-white {
  color: var(--primary-white) !important;
}

/* Additional Green Shades */
.bg-dark-green {
  background-color: var(--dark-green) !important;
}

.bg-medium-green {
  background-color: var(--medium-green) !important;
}

.bg-light-green {
  background-color: var(--light-green) !important;
}
 /* Video Slide Styles */
    .video-slide {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
    }

    .video-container iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }

    /* Make sure caption appears over video */
    .video-slide .slide-caption {
        position: relative;
        z-index: 10;
        /*background: rgb(255, 255, 255);*/
        padding: 20px;
        border-radius: 5px;
        /*color: white;*/
    }

    .video-slide .slide-title {
        /*color: white;*/
    }
.active {
  display: block;
  opacity: 1;
  /*background-color: rgba(48, 121, 50, 0.6) !important;*/
  border-color: rgb(48, 121, 50) !important;
  color: #1a3a1a;
  font-weight: bold;
}
.btn-outline-primary {
  border-color: #0e9e00 !important;
}
.confirmation-card {
            max-width: 500px;
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            background: white;
            text-align: center;
        }

        .confirmation-icon {
            font-size: 3.5rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

        .confirmation-success {
            color: var(--success);
        }

        .confirmation-error {
            color: var(--error);
        }

        .confirmation-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 500;
            margin-top: 1.5rem;
            transition: all 0.3s;
        }

        .confirmation-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .confirmation-email {
            font-weight: 500;
            color: var(--primary);
        }