:root {

--primary-blue: #2E397E;

--secondary-orange: #FF6B35;

--secondary-red: #E63946;

--bg-light: #F8F9FA;

--text-dark: #212529;

--text-muted: #6C757D;

}





body {

font-family: 'Inter', sans-serif;

color: var(--text-dark);

}

.navbar.scrolled {

  background: rgba(255, 255, 255, 0.15); /* transparent */

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

}

.bg-primary-custom {

background-color: var(--primary-blue) !important;

}



.text-primary-custom {

color: var(--primary-blue) !important;

}


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

background-color: var(--primary-blue);

border-color: var(--primary-blue);

color: white;

}



.project-execution-img:hover{

    filter:unset !important;

}

.btn-primary-custom:hover {

background-color: #1e2760;

border-color: #1e2760;

color: white;

}



.text-gradient {

background: linear-gradient(135deg, var(--secondary-orange), var(--secondary-red));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}



.navbar-brand img {

width: 150px;

}

.hero-section {

    position: relative;

    overflow: hidden;

    padding: 5rem 0;

    background-color: #f8f9fa;

}



.hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0.2;

    z-index: 0;

}



.hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero-content {

    position: relative;

    z-index: 10;

}



.text-gradient {

    background: linear-gradient(135deg, #FF6B35, #E63946);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.floating-card {

    animation: float 3s ease-in-out infinite;

}



@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-10px); }

}



.badge-primary {

    background-color: rgba(46, 57, 126, 0.1);

    color: var(--primary-blue);

    padding: 0.25rem 0.75rem;

    border-radius: 50px;

    font-size: 0.75rem;

    font-weight: 600;

}



.avatar-group {

    display: flex;

    margin-left: -0.5rem;

}



.avatar-group img {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 2px solid white;

    margin-left: -0.5rem;

}



.feature-icon {

    width: 60px;

    height: 60px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content:center;

    justify-center;

    font-size: 1.5rem;

    margin-bottom: 1rem;

}

.post-hero {

    background: linear-gradient(135deg, #1e40af, #3b82f6);

    padding: 3rem 0;

    color: white;

    position: relative;

    overflow: hidden;

}



.post-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('{{ asset("images/hero-bg.jpg") }}');

    background-size: cover;

    background-position: center;

    opacity: 0.1;

    mix-blend-mode: overlay;

}



.requirement-type-card {

    cursor: pointer;

    transition: all 0.2s;

    border: 2px solid #dee2e6;

}



.requirement-type-card:hover {

    border-color: var(--primary-blue);

    transform: translateY(-2px);

    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);

}



.requirement-type-card input[type="radio"]:checked + label {

    border-color: var(--primary-blue);

    background-color: rgba(46, 57, 126, 0.05);

}



.requirement-type-icon {

    font-size: 2rem;

    color: var(--primary-blue);

}



.benefits-card {

    background: #f8f9fa;

    border-left: 4px solid var(--primary-blue);

}



.step-item {

    cursor: pointer;

    transition: all 0.3s ease;

}

.step-item:hover {

    background: #fff;

    border-color: var(--primary-blue) !important;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}

.step-item:hover .rounded-circle{

    background: var(--primary-blue) !important;

    color: white;

}

.create-free-profile-btn{

    display: none;

}

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

.step-item:hover h5{

 color: var(--primary-blue);

}

.step-item:hover .create-free-profile-btn{

    display: inline-block;

}

#stepImage {

    transition: opacity 0.3s ease;

}

.fade-out {

    opacity: 0;

}

.post-hero {

    background: linear-gradient(135deg, #1F3D95, #1F3D95);

    padding: 3rem 0;

    color: white;

    position: relative;

    overflow: hidden;

}



.post-hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('../images/hero-bg.jpg');

    background-size: cover;

    background-position: center;

    opacity: 0.1;

    mix-blend-mode: overlay;

}



.requirement-type-card {

    cursor: pointer;

    transition: all 0.2s;

    border: 2px solid #dee2e6;

}



.requirement-type-card:hover {

    border-color: var(--primary-blue);

    transform: translateY(-2px);

    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);

}



.requirement-type-card input[type="radio"]:checked + label {

    border-color: var(--primary-blue);

    background-color: rgba(46, 57, 126, 0.05);

}



.requirement-type-icon {

    font-size: 2rem;

    color: var(--primary-blue);

}



.benefits-card {

    background: #f8f9fa;

    border-left: 4px solid var(--primary-blue);

}

.register-container {

    min-height: 100vh;

}



.register-left {

    background: linear-gradient(135deg, #1e293b, var(--primary-blue));

    color: white;

    position: relative;

    overflow: hidden;

}



.register-left::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('../images/hero-bg.jpg');

    background-size: cover;

    opacity: 0.1;

}



.register-left .content {

    position: relative;

    z-index: 10;

}



.progress-bar-custom {

    height: 4px;

    background-color: #e9ecef;

    border-radius: 2px;

    overflow: hidden;

}



.progress-bar-fill {

    height: 100%;

    background-color: var(--primary-blue);

    transition: width 0.5s ease;

}



.benefit-item {

    display: flex;

    align-items-center;

    gap: 1rem;

    margin-bottom: 1.5rem;

}



.benefit-icon {

    width: 24px;

    height: 24px;

    background-color: rgba(34, 197, 94, 0.2);

    color: #22c55e;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.requirement-type-card {

  border: 2px solid #ddd;

  transition: border-color 0.3s, box-shadow 0.3s;

  cursor: pointer;

}



.btn-check:checked + .requirement-type-card {

  border-color: #0d6efd; /* Bootstrap primary color */

  box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);

}

.btn-check:checked + .requirement-type-card {

  border-color:  var(--primary-blue);

}



.dashboard-container {

display: flex;

min-height: 100vh;

}



.sidebar {

width: 280px;

background-color: white;

border-right: 1px solid #dee2e6;

position: fixed;

height: 100vh;

overflow-y: auto;

}



.main-content {

flex: 1;

padding: 2rem;

}



@media (max-width: 991px) {

.sidebar {

    transform: translateX(-100%);

    transition: transform 0.3s;

    z-index: 1000;

}



.sidebar.show {

    transform: translateX(0);

}



.main-content {

    margin-left: 0;

}

}