﻿/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@font-face {
    font-family: "Narin Medium";
    src: url('https://cdn.shopify.com/s/files/1/0108/1013/0495/files/Narin-Medium.woff?v=1688058500') format("woff2"), url('https://cdn.shopify.com/s/files/1/0108/1013/0495/files/Narin-Medium.woff2?v=1688058500') format("woff");
    font-weight: 500;
}

html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Hide horizontal scroll */
    overflow-y: auto;
}

body {
    font-family: Narin Medium;
    font-weight: 400;
    font-style: normal;
    padding: 10px 0 0 !important;
    background: #243842;
    color: #fff;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-header {
    font-family: Narin Medium;
    font-weight: 500;
    font-style: normal;
    color: #fff;
}

p, ul {
    color: #fff;
}

.font-primary {
    font-family: Narin Medium;
}

.center-block {
    margin: 0 auto;
    display: block;
}

a {
    color: #fff;
    text-decoration: none;
}

    a:hover {
        color: #fff;
        text-decoration: none;
    }

.container-fluid {
    padding: 0 50px;
}


.redclr, .textred, .redtext {
    color: #ff9d9d;
}

    .redclr.req {
        font-size: 21px;
        line-height: 1;
    }

/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/

.subheader {
    margin-bottom: 40px;
    text-align: center;
    line-height: 1.5;
    font-size: 18px;
}

.lblfields {
    text-align: center;
    display: block;
    margin-bottom: 30px;
}

.form-block .input-group-text {
    background-color: #fff;
    border: 0;
    border-radius: 50px;
    padding-right: 10px;
    padding-left: 15px
}

    /*.form-block .input-group-text i, .form-block .input-group-text img {
        line-height: 0;
        position: relative;
        top: -2px;
    }*/

.form-block .form-control {
    border: 0;
    border-radius: 50px;
}

    .form-block .form-control.form-multiline {
        border-top-right-radius: 50px !important;
        border-bottom-right-radius: 50px !important;
    }

    .form-block .form-control:focus {
        border-color: #fff;
        outline: 0;
        box-shadow: none;
    }

    .form-block .form-control:-internal-autofill-selected {
        background: transparent !important;
    }

    .form-block .form-control:-webkit-autofill,
    .form-block .form-control:-webkit-autofill:hover,
    .form-block .form-control:-webkit-autofill:focus,
    .form-block .form-control:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; /* force white background */
        box-shadow: 0 0 0px 1000px #fff inset !important; /* fallback */
        -webkit-text-fill-color: #000 !important; /* black text */
        caret-color: #000; /* black cursor */
        transition: background-color 5000s ease-in-out 0s; /* suppress yellow flash */
    }

.form-radio label {
    padding-left: 10px;
    color: #cde7f3 !important;
    FONT-WEIGHT: 400;
    font-family: Narin Medium;
}

.form-block .control-label {
    color: #ffffff !important;
    font-weight: 300;
    margin-bottom: 3px;
    display: block;
}

    .form-block .control-label.control-label-flex {
        display: flex;
        align-items: start;
    }

        .form-block .control-label.control-label-flex p{
            margin: 0;
        }


        textarea {
            width: 100%;
            min-height: 50px;
            resize: none; /* prevent manual resize */
            overflow: hidden; /* hide scrollbars */
        }

.btn-submit, .btn-submit:active, .btn-submit:focus {
    background-color: #ac7c45 !important;
    color: #FFFFFF;
    padding: 0 45px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    font-weight: 600;
    transition: background-position 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
    line-height: 52px;
    text-align: center;
    text-decoration: none;
    border: 0 !important;
}

    .btn-submit:hover {
        background: #fff !important;
        color: #243842 !important;
    }

.error.text-danger {
    display: inline-block;
    color: #000 !important;
    background-color: #f3a5a4;
    font-size: .75rem;
    padding: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.loader {
    color: #79e479;
    font-weight: 600;
    margin: 10px 0;
    font-size: 20px;
}

.notesuccess {
    text-align: center;
}

    .notesuccess i {
        font-size: 40px;
        color: #5ade5a;
    }

    .notesuccess h2 {
        font-weight: 600;
        font-size: 35px;
    }

    .notesuccess h4, .notesuccess h5 {
        font-size: 18px;
    }

.form-horizontal {
    text-align: left
}

.noteerror p {
    padding-top: 15px;
}

.form-date {
    text-align: left !important
}

input.form-control.form-select.required.form-date.flatpickr-input.flatpickr-mobile {
    text-align: left !important;
}

.form-select {
    padding-left: 5px;
    padding-right: 5px;
}

/*File Upload*/
.upload-area {
    width: 100%;
    border: 2px solid rgba(172,124,69,1);
    border-radius: 4px;
    padding: 10px 15px 10px 0;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    background: transparent;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    color: rgba(172,124,69,1);
}

    .upload-area p {
        margin: 0;
        color: rgba(172,124,69,1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .upload-area p i {
            padding: .375rem .75rem;
        }

.preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: start;
    margin-bottom: 15px;
    padding-left: 5px;
    max-width: 100%;
    gap: 10px;
}

    .preview-row > * {
        flex: 0 0 calc(50% - 15px);
        max-width: max-content;
        width: max-content;
    }

.preview-item {
    position: relative;
    padding: 0;
}

.preview-img {
    /* max-height: 120px; */
    width: 120px;
    border: 1px solid #eee;
}

.btn-removeall, .btn-removeall:hover, .btn-removeall:active, .btn-removeall:focus {
    background-color: #ac7c45 !important;
    color: #FFFFFF;
    padding: 0 22px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    font-weight: 600;
    transition: background-position 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
    line-height: 34px;
    text-align: center;
    text-decoration: none;
    border: 0 !important;
}

.remove-btn, .remove-btn:hover, .remove-btn:focus, .remove-btn:active {
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 50%;
    background: #243842;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 10px;
    padding: 0;
    border: 0;
}

@media(max-width: 767px) {
    .notesuccess h2 {
        font-size: 21px;
    }

    .notesuccess h4, .notesuccess h5 {
        font-size: 17px;
    }

    div:has(> div > iframe) {
        top: auto !important;
        bottom: 0 !important;
    }

    div > iframe {
        /* bottom: 0; */
        /* background: #fff; */
        /* position: absolute !important; */
    }

    .container-fluid {
        padding: 0 0px;
    }

    .form-txt, .form-multiline {
        line-height: 1.5;
        padding-bottom: 7px;
        padding-left: 5px;
        padding-right: 25px;
    }

    .form-select {
        padding-left: 5px;
        padding-right: 25px;
    }

    /*.input-group-text {
        padding-bottom: 0;
    }*/
}


@media(max-width: 550px) {
    .form-txt, .form-block .input-group-text {
        padding-bottom: 0px;
    }

        .form-block .input-group-text.input-group-phone {
            padding-bottom: 5px !important;
        }
}