﻿@font-face {
    font-family: 'Lato-Regular';
    src: url(../font/Lato-Regular.woff) format("woff")
}

@font-face {
    font-family: 'Lato-Bold';
    src: url(../font/Lato-Bold.woff) format("woff")
}

@font-face {
    font-family: 'Lato-Italic';
    src: url(../font/lato-italic.woff) format("woff")
}

@font-face {
    font-family: 'Lato-Semibold';
    src: url(../font/lato-semibold.woff) format("woff")
}

@font-face {
    font-family: 'Lato-Heavy';
    src: url(../font/lato-heavy.woff) format("woff")
}

@font-face {
    font-family: 'NotoSans-Black';
    src: url(../font/NotoSans-Black.woff) format("woff")
}

body {
    overflow: auto
}

.thankYouTxt {
    font-family: NotoSans-Black;
    text-align: center;
    z-index: 2;
    font-size: 18px
}

@media screen and (max-width:1600px) {
    .thankYouTxt {
        font-size: 1.125vw
    }
}

.btnWrapper {
    margin: 2em 0;
    display: flex;
    justify-content: center
}

.btnWrapper .submitBtn {
    font-family: 'Lato-Regular';
    display: block;
    text-align: center;
    background-image: linear-gradient(#ff512f, #f09819);
    background-size: auto 200%;
    background-position: 0 100%;
    filter: drop-shadow(0 0 0 #fa6828);
    width: 200px;
    padding: 13px;
    font-size: 18px;
    border-radius: 48px;
    color: #fff;
    border: none;
    box-shadow: 0 4px 8px 4pxrgba 240, 152, 25, .16;
    letter-spacing: .1em
}

.btnWrapper .submitBtn:hover {
    background-position: 0 0
}

.container {
    margin: 9em auto;
    width: 80%
}

.container p {
    letter-spacing: normal
}

.container #heading-bg {
    position: relative
}

.container #heading-bg .left {
    width: 20.8%;
    top: -47%;
    left: -19.5%
}

.container #heading-bg .right {
    width: 54.85%;
    top: 5%;
    left: 80%
}

.container #heading-bg img {
    position: absolute;
    z-index: -1
}

.container #heading-bg .heading .page-title {
    font-family: Lato-Regular;
    font-size: 16px;
    color: #2f2f2f;
    letter-spacing: .1em;
    margin-left: 1.5vw
}

@media screen and (max-width:1024px) {
    .container #heading-bg .heading .page-title {
        margin-left: 0
    }
}

.container #heading-bg .heading .title {
    color: #5f5e5e;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
    font-family: NotoSans-Black;
    font-size: 53px;
    background-image: linear-gradient(180deg, #51d9de, #7ad7f9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0
}

@media screen and (max-width:1024px) {
    .container #heading-bg .heading .title {
        margin: 0
    }
}

.container .form-container {
    position: relative;
    z-index: 1;
    margin: 5rem 0;
    padding: 3vw 2vw 3vw 2vw;
    background-color: #fff;
    border-radius: 45px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / .1)
}

.container .form-container .tape {
    position: absolute;
    top: -2%;
    left: -5%;
    width: 13%;
    min-width: 100px;
    transform: rotate(315deg)
}

.container .form-container .target {
    position: absolute;
    top: -3%;
    left: 96%;
    width: 6.41%;
    min-width: 82px
}

.container .form-container .form-text {
    font-size: 16px;
    font-family: Lato-Regular
}

.container .form-container .form-input-title {
    color: #f27405;
    font-family: Lato-Bold
}

.container .form-container .error-div {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.container .form-container .error-div .error {
    display: none;
    color: red;
    font-family: Lato-Regular;
    font-size: 14px
}

@media screen and (min-width:1600px) {
    .container .form-container .error-div .error {
        font-size: .875vw
    }
}

.container .form-container .error-div .show {
    display: block
}

.container .form-container .input-field {
    font-size: 14px;
    font-family: Lato-Regular;
    color: #666;
    outline: none;
    width: 100%;
    line-height: 30px;
    padding: 12px 12px 12px 35px;
    border: 1px #cdcdcd solid;
    border-radius: 40px
}

.container .form-container .input-field:focus {
    border: 1px solid #7ad7f9
}

.container .form-container .form-content {
    position: relative;
    display: flex;
    justify-content: space-around
}

.container .form-container .form-content .col-1,
.container .form-container .form-content .col-2 {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.container .form-container .form-content .col-1 .errorMsg {
    margin: .1em 0 .5em 1em
}

.container .form-container .form-content .col-2 .errorMsg {
    margin: .5em 0 .5em 1.5em
}

.container .form-container .form-content .col-2 .dropdown-bar .list {
    width: 100%
}

.container .form-container .form-content .col-2 .nice-select {
    font-size: 14px;
    height: 56px;
    line-height: 56px;
    padding: 0 0 0 2em
}

.container .form-container .form-content .col-2 .nice-select .list li {
    padding-bottom: 1em
}

.container .form-container .form-content .col-2 .nice-select::after {
    width: 15px;
    height: 15px;
    top: 39%;
    right: 40px
}

.container .form-container .form-content .col-2 .project-desc .input-field {
    margin-bottom: 2em
}

.container .form-container .form-content .col-2 .hear-about-dropdown {
    margin-bottom: 1.5em
}

.container .form-container .form-content .col-2 .captcha-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.container .form-container .form-content .col-2 .captcha-wrapper .form-input-title {
    margin: 0;
    margin-bottom: .5em
}

.container .form-container .form-content .col-2 .captcha-wrapper .image-section {
    width: 30%
}

@media screen and (max-width:1024px) {
    .container .form-container .form-content .col-2 .captcha-wrapper .image-section {
        width: 25%
    }
}

@media screen and (max-width:500px) {
    .container .form-container .form-content .col-2 .captcha-wrapper .image-section {
        width: 35%
    }
}

.container .form-container .form-content .col-2 .captcha-wrapper .image-section .captcha-img {
    width: 100%
}

.container .form-container .form-content .col-2 .captcha-wrapper .image-section .captcha-img img {
    width: 100%
}

.container .form-container .form-content .col-2 .captcha-wrapper .image-section .captcha-link {
    font-family: Lato-Regular;
    font-size: 14px;
    display: block;
    color: #c30202
}

.container .form-container .form-content .col-2 .captcha-wrapper .text-section {
    width: 65%
}

.container .form-container .form-content .col-2 .captcha-wrapper .text-section .captcha {
    width: 100%;
    margin: 0
}

.container .form-container .form-content .col-2 .captcha-wrapper .captchaErrorMsg {
    margin: 0 0 .5em 12em
}

.container .form-container .form-content .col-2 .btnWrapper {
    margin-top: 2em;
    display: flex;
    justify-content: end
}

.container .form-container .form-content .col-2 .btnWrapper .submitBtn {
    font-family: 'Lato-Regular';
    display: block;
    text-align: center;
    background-image: linear-gradient(#ff512f, #f09819);
    background-size: auto 200%;
    background-position: 0 100%;
    filter: drop-shadow(0 0 0 #fa6828);
    width: 250px;
    padding: 16px;
    font-size: 18px;
    border-radius: 48px;
    color: #fff;
    border: none;
    box-shadow: 0 4px 8px 4px rgb(240 152 25 / .16);
    letter-spacing: .1em
}

.container .form-container .form-content .col-2 .btnWrapper .submitBtn:hover {
    background-position: 0 0
}

.thankyouContainer {
    margin-bottom: 5em
}

@media screen and (min-width:1600px) {
    .thankyouContainer {
        margin-bottom: 5vw
    }
}

.thankyouContainer .title {
    text-align: center
}

@media (min-width:1600px) {
    .container {
        margin: 9vw auto
    }

    .container #heading-bg .heading .page-title {
        font-size: 1vw
    }

    .container #heading-bg .heading .title {
        font-size: 3.313vw
    }

    .container .form-container {
        margin: 5vw 0
    }

    .container .form-container .form-text {
        font-size: 1vw
    }

    .container .form-container .errorMsg {
        display: block
    }

    .container .form-container .input-field {
        font-size: .875vw;
        line-height: 1.875vw;
        padding: .75vw .75vw .75vw 2.188vw
    }

    .container .form-container .form-content .col-1 .errorMsg {
        margin: .1vw 0 .5vw 1vw
    }

    .container .form-container .form-content .col-1 .services-checkbox input {
        margin-bottom: .75vw;
        width: 1.25vw;
        height: 1.25vw
    }

    .container .form-container .form-content .col-1 .services-checkbox label {
        font-size: 1vw;
        margin-left: .938vw
    }

    .container .form-container .form-content .col-2 .dropdown-bar {
        background-size: 1.875vw
    }

    .container .form-container .form-content .col-2 .dropdown-bar option {
        width: .625vw
    }

    .container .form-container .form-content .col-2 .nice-select {
        font-size: .875vw;
        height: 3.50vw;
        line-height: 3.50vw;
        padding: 0 0 0 2vw
    }

    .container .form-container .form-content .col-2 .nice-select .list li {
        padding-bottom: 1vw
    }

    .container .form-container .form-content .col-2 .nice-select::after {
        width: .938vw;
        height: .938vw;
        right: 2.50vw
    }

    .container .form-container .form-content .col-2 .hear-about-dropdown {
        margin-bottom: 1.5vw
    }

    .container .form-container .form-content .col-2 .captcha-wrapper .form-input-title {
        margin-bottom: .5vw
    }

    .container .form-container .form-content .col-2 .captcha-wrapper .image-section .captcha-img {
        width: 85%
    }

    .container .form-container .form-content .col-2 .captcha-wrapper .image-section .captcha-link {
        font-size: .875vw
    }

    .container .form-container .form-content .col-2 .captchaErrorMsg {
        margin: 0 0 .5vw 12vw
    }

    .container .form-container .form-content .col-2 .btnWrapper {
        margin-top: 2vw
    }

    .container .form-container .form-content .col-2 .btnWrapper .submitBtn {
        width: 15.625vw;
        padding: 1vw;
        font-size: 1.125vw;
        letter-spacing: .1vw;
        border-radius: 3vw;
        box-shadow: 0 .25vw .5vw .25vw rgb(240 152 25 / .16)
    }

    .container .form-container .form-content .col-2 .btnWrapper .submitBtn:hover {
        background-position: 0 0
    }
}

@media (max-width:1024px) {
    .container {
        margin: 10em auto 0
    }

    .container #heading-bg .heading {
        text-align: center
    }

    .container #heading-bg .heading .title {
        font-size: 30px
    }

    .container .form-container .tape {
        top: -1%;
        left: -9%
    }

    .container .form-container .target {
        top: -2%;
        left: 93.2%
    }

    .container .form-container .form-content {
        display: flex;
        flex-direction: column
    }

    .container .form-container .form-content .col-1,
    .container .form-container .form-content .col-2 {
        width: 95%;
        margin: 0 auto
    }

    .container .form-container .form-content .col-2 .captcha-wrapper .text-section {
        width: 55%
    }

    .container .form-container .form-content .col-2 .btnWrapper {
        justify-content: center
    }
}

@media (max-width:500px) {
    .container {
        width: 95%;
        margin: 6em auto 0
    }

    .container .form-container {
        padding: 2rem 1rem 2rem 1rem
    }

    .container .form-container .tape {
        top: -1.5%;
        left: 36%;
        width: 15.65%;
        transform: none
    }

    .container .form-container .target {
        top: -2%;
        left: 80%
    }

    .container .form-container .col-1,
    .container .form-container .col-2 {
        width: 100%
    }
}

.left {
    float: left;
    margin-right: 10px;
  }
  .info-wrapper.address::after {
    content: "";
    display: table;
    clear: both;
  }
  
  