@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* custom-variables.css */
:root {
    /* Primary Color */
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --primary-dark: #3730a3;

    /* Secondary Color */
    --secondary: #10b981;
    --secondary-light: #34d399;
    --secondary-dark: #047857;
    --secondary-dark-2: #0b3529;

    /* Neutral Colors */
    --white: #ffffff;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-800: #1f2937;
    --black: #000000;

    /* Background & Text */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-100);
    --text-color: var(--gray-800);
    --text-muted: var(--gray-600);

    /* Radius & Shadow */
    --border-radius-sm: 0.375rem;
    --border-radius: 0.5rem;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


body {
    font-family: "Manrope", sans-serif;
    padding-top: 70px;
}

/* custom-gradiet-bg */
.gradient-primary-horizontal {
    background: linear-gradient(to right, var(--primary-light), var(--primary), var(--primary-dark));
}

.gradient-primary-vertical {
    background: linear-gradient(to top, var(--primary-dark), var(--primary), var(--primary-light));
}

.gradient-primary-diagonal {
    background: linear-gradient(to top right, var(--primary-light), var(--primary-dark));
}

.gradient-secondary-horizontal {
    background: linear-gradient(to right, var(--secondary-light), var(--secondary), var(--secondary-dark));
}

.gradient-secondary-vertical {
    background: linear-gradient(to top, var(--secondary-dark), var(--secondary), var(--secondary-light));
}

.gradient-secondary-diagonal {
    background: linear-gradient(to top right, var(--secondary-light), var(--secondary-dark));
}

.gradient-white-horizontal {
    background: linear-gradient(to right,
            #ffffff,
            #f9fafb);
}

.gradient-white-vertical {
    background: linear-gradient(to bottom,
            #ffffff,
            #f3f4f6);
}

.gradient-diagonal-white {
    background: linear-gradient(to bottom right,
            #ffffff,
            #f1f2f3);
}

.gradient-white-to-green-pastel {
    background: linear-gradient(to right,
            #ffffff,
            #f0fdf4);
}

.gradient-vertical-white-to-green-light {
    background: linear-gradient(to bottom,
            #ffffff,
            #ecfdf5);
}

.gradient-diagonal-white-mint {
    background: linear-gradient(to bottom right,
            #ffffff,
            #e9f5db);
}

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

.text-primary-custom-2 {
    color: var(--primary-dark) !important;
}

.text-secondary-custom {
    color: var(--secondary) !important;
}

.text-secondary-custom-2 {
    color: var(--secondary-dark) !important;
}

.text-secondary-custom-3 {
    color: var(--secondary-dark-2) !important;
}

/* custom-buttons.css */
.btn-custom {
    border: none;
    transition: all 0.2s ease-in-out;
    border-radius: var(--border-radius);
}

.btn-primary-custom {
    background-color: var(--primary);
    /* color: var(--white); */
}

.btn-primary-custom:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary-custom {
    background-color: var(--secondary);
    /* color: var(--white); */
}

.btn-secondary-custom:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

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

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

/* custom-cards.css */
.card-modern {
    border: 1px solid #eee;
    border-radius: 1rem;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.card-modern .card-body {
    color: var(--text-color);
}

/* Shadow Default */
.card-modern-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Hover Effect Primary */
.card-modern-primary:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
    transform: translateY(-5px);
    /* --primary */
}

/* Hover Effect Secondary */
.card-modern-secondary:hover {
    border-color: var(--secondary);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    transform: translateY(-5px);
    /* --secondary */
}

.card-modern .card-body {
    color: var(--text-color);
}

.navbar .navbar-nav .nav-link {
    font-weight: 500;
}

.navbar .navbar-nav .nav-link.active {
    font-weight: 600;
    color: var(--secondary-dark);
}

/* Hover link */
.navbar .navbar-nav .nav-link:hover {
    color: var(--secondary-dark);
}

/* Border Primary */
.border-primary-custom {
    border-color: var(--primary) !important;
}

/* Border Secondary */
.border-secondary-custom {
    border-color: var(--secondary) !important;
}

/* Optional: Ganti warna header saat aktif */
.accordion-button {
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.accordion-button:not(.collapsed) {
    /* background-color: var(--secondary-dark); */
    background-color: transparent;
    color: var(--secondary);
    /* color: var(--gray-100); */
}

.accordion-button:focus {
    box-shadow: none;
    outline: 0;
}

.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url('/assets/fe/images/hero.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: white;
    padding: 140px 0;
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Mobile Phones (Lanscape or Portrait) */
@media screen and (max-width: 767px) {
    .hero-section {
        padding-top: 120px;
        padding-bottom: 70px;
    }
}