* {
  box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Example font */
    /* background-color: #f0f2f5; */
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    color: white;
}
.carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0 4px;
        opacity: 0.7;
        transition: background-color 0.3s, opacity 0.3s;
    }

    .carousel-indicators .active {
        background-color: #333;
        opacity: 1;
    }
     .carousel-item {
        border-radius: 10px;
        overflow: hidden;
    }

    .carousel-inner {
        border-radius: 10px;
    }

    .carousel-item img {
        border-radius: 0; /* no need for radius on the image itself */
        object-fit: cover;
    }

.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
    background-image: url('assets/background/body-background.jpg');
    background-size: cover;
    /* background-repeat: no-repeat; */
    /* background-position: center; */
}

.top-section {
    /* background-color: #1a4d8c; */
    color: white;
    /* padding: 30px 20px 80px 20px; */
    position: relative;
    overflow: hidden; /* For the map background */
    border-bottom-left-radius: 40px; /* Curved bottom-left */
}

.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* opacity: 0.2; */
    z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
}

.overlay-text {
    position: relative;
    z-index: 1;
    text-align: left;
    padding-left: 10px; /* Adjust as needed */
}

.overlay-text h1 {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 0;
}

.content-area {
    background-color: white;
    margin-top: -100px; /* Overlap with the top section for the curved effect */
    /* border-top-left-radius: 40px; */
    border-top-right-radius: 80px;
    padding: 15px;
    flex-grow: 1; /* Allows content area to expand */
    position: relative;
    z-index: 2; /* Ensure it's above the top section's curve */
}
.sumit-signature:disabled{
    color: white;
    background-color: #1a4d8c;
}

/* Form Styles */
.form-control-custom {
    background-color: #f0f2f5; /* Light grey input background */
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-size: 1.1em;
    height: auto; /* Allow content to dictate height */
}

.form-label-custom {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}
.swal2-toast {
    font-size: 14px !important;
}
/* Button Styles */
.btn-primary-custom {
    background-color: #1a4d8c;
    border-color: #1a4d8c;
    color: white;
    /* padding: 15px 20px; */
    border-radius: 18px;
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    margin-top: 20px;
    /* background-image: url('background/btn-bg.jpg') !important;background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
}

.btn-primary-custom:hover {
    background-color: #143d70; /* Slightly darker on hover */
    border-color: #143d70;
}

.btn-outline-custom {
    background-color: transparent;
    border: 2px solid #1a4d8c;
    color: #1a4d8c;
    /* padding: 15px 20px; */
    padding: 0;
    border-radius: 10px;
    font-size: 1em;
    font-weight: bold;
    width: 90%;
}

.btn-outline-custom:hover {
    background-color: #e0e8f0;
    color: #1a4d8c;
}


/* Bottom Navigation Bar */
.bottom-nav {
    background-color: white;
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /* max-width: 500px; */
    margin: 0 auto; /* Center the nav bar */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* Ensure it spans full width of its parent */
}

.bottom-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888; /* Default icon color */
    font-size: 0.8em;
    padding: 5px;
}

.bottom-nav .nav-link.actives {
    color: #1a4d8c; /* Active icon color */
}

.bottom-nav .nav-link i {
    font-size: 1.8em; /* Icon size */
    margin-bottom: 2px;
}

.bottom-nav .nav-text {
    margin-top: 5px;
    font-size: 0.9em;
    font-weight: bold;
}

/* Specific styles for elements shown in images */

/* Card Styles */
.card-custom {
    background-color: #1a4d8c; /* Dark blue card for loan info */
    color: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; /* For card background elements */
}

.card-custom .card-title {
    font-size: 1.1em;
    opacity: 0.8;
}

.card-custom .card-amount {
    font-size: 2.5em;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 0;
}

.card-custom .card-term {
    font-size: 0.9em;
    opacity: 0.7;
}

/* Grid button styles for Account page */
.grid-button-container {
    display: grid;
    width: 100% !important;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 30px; /* Space between buttons */
    margin-top: 20px;
}

.cs-icon{
    width: 40px;margin-right: 10px;
}

.grid-button {
    /* background-color: #1a4d8c; */
    color: white;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none; /* Remove underline for links */
}

.grid-button i {
    font-size: 2em;
    margin-bottom: 10px;
}

/* Loan Application/Information styles */
.loan-info-box {
    /* background-color: #e6f0ff; */
    border-radius: 15px;
    padding: 15px;
    margin-top: 20px;

}

.loan-info-item {
    display: flex;
    justify-content: space-between;
    /* padding: 5px 0; */
    /* border-bottom: 1px dashed #c0c0c0; */
}

.loan-info-item:last-child {
    border-bottom: none;
}

.loan-info-label {
    color: white !important;
    font-size: 14px;
}

.loan-info-value {
    font-weight: bold;
    color: white !important;
    font-size: 14px;
}

.overlay-text-cs{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.h-40vh{
    height: 40vh;
}
.h-30vh{
    height: 30vh;
}
.h-50vh{
    height: 50vh;
}
.h-80vh{
    height: 80vh;
}
.h-20vh{
    height: 20vh;
}
.h-23vh{
    height: 23vh;
}
.h-25vh{
    height: 25vh;
}
.h-10vh{
    height: 10vh;
}
.h-13vh{
    height: 13vh;
}
.no-border-radius {
  border-radius: 0 !important;
}
.font-khmer{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 100;
    letter-spacing: 2px;
}
.bg-secondary-100 {
    background-color: #d3d6dc;
}
.btn-blue{
    background-color: #1a4d8c !important;
}
.no-underline {
  text-decoration: none;
}
.letter-spaced {
  letter-spacing: 1.5px;
  font-weight: 600;
  color: rgb(158, 158, 158) !important;
}
.left-icon{
    font-size: 1.2em;
}
.btn-font{
    font-family:Arial, Helvetica, sans-serif;
    padding-right: 50px;
}
.left-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

.header .back-arrow {
            position: absolute;
            left: 20px;
            color: white;
            font-size: 1.5rem;
        }

        .header h1 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
        }

        .section-title {
            color: #333;
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 25px;
            text-align: center;
        }

        .info-card-container {
            background-color: rgba(0, 64, 117, 0.425); /* White background for the card */
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 400px; /* Max width similar to the image */
        }

        .flatpickr-input {
            /* background-position: right 0.75rem center; */
            background-repeat: no-repeat;
            padding-right: 2.5rem; /* add room for calendar icon if shown */
        }

/* #customDate {
  background: none !important;
  background-image: none !important;
} */

        .info-item:last-child {
            margin-bottom: 0;
        }

        .info-item .icon {
            font-size: 1.5rem;
            margin-right: 15px;
            width: 30px; /* Fixed width for icon to align text */
            text-align: center;
        }

        .info-item .text {
            flex-grow: 1;
            font-size: 1rem;
            font-weight: 500;
        }

        .info-item .status-icon {
            font-size: 1.2rem;
        }

        .loan-term-btn.active {
            background-color: #104485;
            color: white !important;
        }

        .info-item .status-icon.completed {
            color: #4CAF50; /* Green for checkmark */
        }

        .info-item .status-icon.pending {
            color: #FFC107; /* Orange for pencil */
        }

        .confirm-btn {
            background-color: #0b325f;
            color: white;
            border-radius: 50px; /* Very rounded corners */
            /* padding: 12px 40px; */
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 30px;
            width: 80%;
            max-width: 250px; /* Max width for button */
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
            border: 2px solid white;
        }

        .confirm-btn:hover {
            background-color: #1976d2; /* Darker blue on hover */
            color: white;
        }

        /* Responsive Adjustments */
        @media (max-width: 576px) {
            .header {
                padding: 15px 15px;
            }
            .header .back-arrow {
                left: 15px;
            }
            .section-title {
                font-size: 1.2rem;
                margin-bottom: 20px;
            }
            .info-card-container {
                padding: 20px;
            }
            .info-item {
                padding: 12px 15px;
                font-size: 0.95rem;
            }
            .confirm-btn {
                /* padding: 10px 30px; */
                font-size: 1rem;
            }
            .nav-item {
                font-size: 0.7rem;
            }
            .nav-item .icon {
                font-size: 1.3rem;
            }
            .cs-icon , .fs-cs{
                width: 30px !important;
                font-size: 22px !important;
            }
        }

        @media (max-height: 667px) {
            .se-screen {
                margin-top: 1.5rem !important;
            }
            .sm-screen{
                height: 30vh !important;
            }
            .nav-sm{
                height: 13vh !important;
            }
            .container-fluid , .navbar{
                padding: 0 !important;
            }
            .mb-15{
                height: 90vh !important;
            }
            .mb-25{
                height: 100vh !important;
            }
            .overlay-text-cs{
                position: absolute; inset: 0; padding: 1rem;margin-top: 2rem;
            }
            .btn-primary-custom{
                font-size: 14px !important;
                margin-top: 0 !important;
            }
            .cs{
                height: 90vh !important;
            }
            .mb-cs{
                margin-bottom: 0.5rem !important;
                font-size: 14px !important;
            }
            .mb-cs-3{
                margin-bottom: 4em !important;
            }
            .mb-btn{
                margin-bottom: 3em !important;
            }
            .icon-cs{
                font-size: 3.5em;color: white;width: 1.5em;
            }
            .mb-10px{
                margin-bottom: 10px !important;
            }
        }

        @media (min-height: 668px) {
            .sm-screen{
                height: 23vh !important;
            }
            .nav-sm{
                height: 9vh !important;
            }
            .container-fluid , .navbar{
                padding: 0 !important;
            }
            .overlay-text-cs{
                position: absolute; inset: 0; padding: 1rem;margin-top: 1rem;
            }
            .btn-primary-custom{
                font-size: 16px !important;
            }
            .mb-cs{
                font-size: 14px !important;
            }
            .icon-cs{
                font-size: 3.5em;color: white;width: 2em;
            }
        }

        @media (min-width: 569px) and (max-width: 669px) {
            .mb-cs-3{
                margin-top: -200px !important;
            }
        }

        .no-calendar-icon::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
            color: transparent;
        }

a{
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}