/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

.row {
    display: flex; /* Enable flexbox on the row */
}

.img-container {
    height: 300px; /* Set a fixed height for all images */
    display: flex; /* Enable flexbox for the image container */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    overflow: hidden; /* Hide overflow */
}

.img-container img {
    max-height: 100%; /* Prevent image from exceeding container height */
    width: auto; /* Maintain image aspect ratio */
    height: auto; /* Maintain image aspect ratio */
    object-fit: contain; /* Fit the image inside the container */
}

/* Ensure all columns have the same height */
.col {
    flex: 1; /* Allow columns to grow equally */
    min-width: 0; /* Prevent overflow issues */
}


.plan-box {
    background: linear-gradient(125deg, #8BCF9E, #D5EEDB);
    height: 30vh;
    margin: 10px 40px !important;
    border-radius: 20px;
    border:none;
}


.step-section .row {
    display: flex;
    justify-content: center; /* Centers the cards horizontally */
    flex-wrap: wrap; /* Allows items to wrap into the next line */
    margin-bottom: 30px; /* Space between the rows */
}

.step-section .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: auto;
    border: 0;
    border-radius: 30px;
    overflow: hidden;
}

.plan-box .card-body {
    padding: 30px;
}

.step-section .step-titles, 
.step-section .desc {
    text-align: left; /* Center text alignment */
}

.step-section .step-titles {
    margin-bottom: 1rem; /* Add space below titles */
}

.step-section .desc {
    margin-top: 1rem; /* Add space above description */
}

.step-section h3.Titles, .step-section h4.step, .step-section h5 {
    margin: 0;
    line-height: 1.2;
    color: #004331;
}

.Titles {
    font-weight: 700;
    height: 100%;
    min-height: 67px;
}

.grading {
    width: 100%;
    margin: auto;
    border-radius: 10px;
}

.navbar-scrolled {
    background: #004331;
}

.tncpp {
    text-align: left;
}

td, th {
    font-size: 13px;
}

.section {
    background: rgba(73, 80, 87, 0.04);
}


.modal .modal-dialog {
    width: 100%;
    max-width: 900px;
}

#home {
    height: 75vh;
    background-image: url('../images/new/top_bg.png');
}

.form-row input, .form-row select, .form-row .btn {
    background: #F0F0F0;
}

.phone_grading {
    margin-top: -15%;
    width: 80%;
}

@media (max-width: 991.98px) { /* Bootstrap's breakpoint for large screens */

    #home {
        background-image: url('../images/new/Brightness_Contrast 2.jpg');
    }

    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030; /* Ensure the navbar is above other elements */
    }

    .navbar-transparent {
        background: transparent;
    }

    .section {
        padding-top: 80px; /* Add padding to the top to prevent content from being hidden behind the navbar */
    }

    .navbar-toggler .mdi-menu {
        color: #ffffff;
    }

    .navbar-collapse {
        background: #004331;
        padding: 30px 15px;
    }

    .tncpp {
        text-align: center;
    }

    .phone_grading {
        margin-top: 30px;
        display: none;
    }

    .grad-desc {
        text-align: center;
        padding: 20px;
    }

    .grad-desc .btn {
        margin: 15px 0;
    }

    .grad-image .phone_grading {
        display: none !important;
    }

    .kosong{
        display: none !important;
    }

}


   .bg-overlay-pattern {
        background-image: url('');
        /* background-color: #000000; */
        background-position: center;
        background-size: cover;
        /* opacity: 200; */
    }

    .accordion-button:not(.collapsed) {
        color: #6cda7f;
    }

    .open-button {
        background-color: #6cda7f;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        position: fixed;
        bottom: 23px;
        right: 28px;
    }

    .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
    }

    .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
    }

    .form-container textarea {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
        resize: none;
        min-height: 50px;
    }

    .form-container .chatbox {
        width: 100%;
        padding: 5px;
        background: #f1f1f1;
    }

    .form-container textarea:focus {
        background-color: #ddd;
        outline: none;
    }

    .form-container .btn {
        background-color: #04AA6D;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    .form-container .cancel {
        display: block;
        float: right;
        margin-right: 3px;
        cursor: pointer;
    }

    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
        background-color: #6cda7f;
    }
        

    .benefits .align-items-stretch {
        height: 375px;
    }
    .s-box {
        height: 35%;
    }

    .l-box {
        height: 60%;
    }


    .s2-box {
        height: 25%;
    }

    .l2-box {
        height: 70%;
    }

    .benefits .card {
        border-radius: 25px;
    }

    #usp-1 h1 {
        font-size: 72px;
    }


    .green-card {
        background: linear-gradient(45deg, #8BCF9E, #D5EEDB);
        border: 0;
    }

    .green-card h4 {
        color: #004331;
    }

    #usp-2 {
        background: url("{{ asset('landing/assets/images/new/USP 2_bg_edited.png') }}");
        background-size: cover;
        background-position: right;
    }


    #usp-6 {
        background: url("{{ asset('landing/assets/images/new/USP 6_bg_edited.png') }}");
        background-size: cover;
        background-position: bottom;
    }

    .bg-overlay-pattern {
        background-image: url('');
        /* background-color: #000000; */
        background-position: center;
        background-size: cover;
        /* opacity: 200; */
    }

    .accordion-button:not(.collapsed) {
        color: #6cda7f;
    }

    .open-button {
        background-color: #6cda7f;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        position: fixed;
        bottom: 23px;
        right: 28px;
    }

    .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
    }

    .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
    }

    .form-container textarea {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
        resize: none;
        min-height: 50px;
    }

    .form-container .chatbox {
        width: 100%;
        padding: 5px;
        background: #f1f1f1;
    }

    .form-container textarea:focus {
        background-color: #ddd;
        outline: none;
    }

    .form-container .btn {
        background-color: #04AA6D;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    .form-container .cancel {
        display: block;
        float: right;
        margin-right: 3px;
        cursor: pointer;
    }

    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
        background-color: #6cda7f;
    }
    

    .benefits .align-items-stretch {
        height: 375px;
    }
    .s-box {
        height: 35%;
    }

    .l-box {
        height: 60%;
    }


    .s2-box {
        height: 25%;
    }

    .l2-box {
        height: 70%;
    }

    .benefits .card {
        border-radius: 25px;
    }

    #usp-1 h1 {
        font-size: 72px;
    }


    .green-card {
        background: linear-gradient(45deg, #8BCF9E, #D5EEDB);
        border: 0;
    }

    .green-card h4 {
        color: #004331;
    }

    #usp-2 {
        background: url("{{ asset('landing/assets/images/new/USP 2_bg_edited.png') }}");
        background-size: cover;
        background-position: right;
    }


    #usp-6 {
        background: url("{{ asset('landing/assets/images/new/USP 6_bg_edited.png') }}");
        background-size: cover;
        background-position: bottom;
    }


    .bg-overlay-pattern {
        background-image: url('');
        /* background-color: #000000; */
        background-position: center;
        background-size: cover;
        /* opacity: 200; */
    }

    .accordion-button:not(.collapsed) {
        color: #6cda7f;
    }

    .open-button {
        background-color: #6cda7f;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        position: fixed;
        bottom: 23px;
        right: 28px;
    }

    .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
    }

    .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
    }

    .form-container textarea {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
        resize: none;
        min-height: 50px;
    }

    .form-container .chatbox {
        width: 100%;
        padding: 5px;
        background: #f1f1f1;
    }

    .form-container textarea:focus {
        background-color: #ddd;
        outline: none;
    }

    .form-container .btn {
        background-color: #04AA6D;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    .form-container .cancel {
        display: block;
        float: right;
        margin-right: 3px;
        cursor: pointer;
    }

    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
        background-color: #6cda7f;
    }
    

    .benefits .align-items-stretch {
        height: 375px;
    }
    .s-box {
        height: 35%;
    }

    .l-box {
        height: 60%;
    }


    .s2-box {
        height: 25%;
    }

    .l2-box {
        height: 70%;
    }

    .benefits .card {
        border-radius: 25px;
    }

    #usp-1 h1 {
        font-size: 72px;
    }


    .green-card {
        background: linear-gradient(45deg, #8BCF9E, #D5EEDB);
        border: 0;
    }

    .green-card h4 {
        color: #004331;
    }

    #usp-2 {
        background: url("{{ asset('landing/assets/images/new/USP 2_bg_edited.png') }}");
        background-size: cover;
        background-position: right;
    }


    #usp-6 {
        background: url("{{ asset('landing/assets/images/new/USP 6_bg_edited.png') }}");
        background-size: cover;
        background-position: bottom;
    }