header {position: sticky;}
.requiredText {color: #fff !important; font-size: 10px !important; margin-top: 5px; padding: 6px 0 0 0 !important; margin: 0 !important; line-height: 10px !important;}

/**** contactBannerWrapper ****/
#contactBannerWrapper {margin: 0; padding: 0; height: 500px; background: url(../images/contact-banner.jpg) no-repeat top center; background-size: cover; position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#contactBannerWrapper:before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.6);}
#contactBannerWrapper h1 {margin: 0; padding: 0 30px; display: inline-flex; color: #fff; font-size: 51px; font-weight: 700; position: relative; z-index: 1;}

/**** contactContentPart ****/
#contactContentPart {margin: 0; padding: 100px 0;}
#contactContentPart canvas.vanta-canvas {opacity: 0.2;}
.contactContent {margin: 0; padding: 50px 50px 0 0;}
.contactContent h2 {margin: 0; padding: 0 0 15px 0; font-size: 38px; font-weight: 700; color: #000;}
.contactContent h2 span {font-weight: 800; animation: advantagesHeadingText 6s ease-in-out infinite;}
.contactContent p {margin: 0; padding: 0 0 20px 0; font-size: 18px; font-weight: 400; color: #000;}
.contactContent h3 {margin: 0; padding: 20px 0 15px 0; font-size: 28px; font-weight: 700; color: #000;}
.contactContent ul {margin: 0 0 0 20px; padding: 0 0 15px 0;}
.contactContent ul li {list-style: disc !important; font-size: 18px; font-weight: 400; color: #000;}
.contactFormWrapper {margin: 0; padding: 30px 30px 30px 180px; background: linear-gradient(144.75deg, #274DAE 1.87%, #7717AF 64.91%, #7717AF 100%); border-radius: 30px; position: relative;}
.contactFormWrapper:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/contact-maisy.png) no-repeat 20px 20px; background-size: contain;}
.contactFormWrapper form {position: relative; z-index: 1;}
.contactFormWrapper h4 {margin: 0; padding: 0 0 10px 0; font-size: 36px; font-weight: 700; color: #fff; /* animation: advantagesHeadingText 6s ease-in-out infinite; */}
.contactFormWrapper p {margin: 0; padding: 0 0 24px 0; font-size: 16px; font-weight: 400; color: #fff;}
.contactFormWrapper ul {margin: 0 -15px; padding: 0; display: flex; align-items: flex-start; flex-wrap: wrap;}
.contactFormWrapper ul li .elementWrapper {width: 100%;}
.contactFormWrapper ul li {width: 50%; margin: 0; padding: 0 15px 30px 15px; display: inline-flex; align-items: center; flex-wrap: wrap;}
.contactFormWrapper ul li input, .contactFormWrapper ul li select, .contactFormWrapper ul li textarea {border-radius: 4px; background: #fff; padding: 10px 12px; width: 100%; border: none;}
.contactFormWrapper ul li.textarea {width: 100%; padding: 0 15px 20px 15px;}
.contactFormWrapper ul li.textarea textarea {resize: none;}
.contactFormWrapper ul li.textarea .md-outline-field label {top: 20px;}
.contactFormWrapper ul li.textarea .md-outline-field.focused label, .contactFormWrapper ul li.textarea .md-outline-field.filled label {top: 0; font-size: 14px; color: #2c52b4;}
.contactFormWrapper ul li input[type="submit"] {background: #ffbc25; font-size: 18px; font-weight: 600; color: #000; border: none; width: auto; padding: 10px 40px; border-radius: 4px;}

@keyframes advantagesHeadingText {
    0% {color: blue;}
    25% {color: purple;}
    50% {color: #0bc3c3;}
    75% {color: purple;}
    100% {color: blue;}
}

@keyframes gradientMove {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/**** form feilds ****/
.md-outline-field {position: relative; display: inline-block; width: 100%;}
.md-outline-field input, .md-outline-field select, .md-outline-field textarea {width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; background-color: transparent; outline: none; appearance: none; resize: vertical; min-height: 40px; font-family: inherit;}
.md-outline-field.select-field::after {content: ""; position: absolute; top: 50%; right: 12px; width: 0; height: 0; pointer-events: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(0, 0, 0, 0.6); transform: translateY(-50%);}
.md-outline-field label {position: absolute; top: 50%; left: 12px; background-color: #fff; padding: 0 6px; color: rgba(0, 0, 0, 0.6); font-size: 16px; pointer-events: none; transform: translateY(-50%); transition: all 0.2s ease;}
.md-outline-field.focused label, .md-outline-field.filled label {top: 0; font-size: 14px; color: #2c52b4;}
.md-outline-field.focused input, .md-outline-field.focused select, .md-outline-field.focused textarea {border: 1px solid #2c52b4;}

@media only screen and (min-width: 0px) and (max-width: 575px) {
    #contactBannerWrapper {height: 300px;}
    #contactBannerWrapper h1 {font-size: 32px;}
    #contactContentPart {padding: 60px 0;}
    #contactContentPart .contactContent {padding: 0;}
    .contactContent h2 {font-size: 30px;}
    .contactContent p {font-size: 16px;}
    .contactContent h3 {font-size: 24px;}
    .contactContent ul li {font-size: 16px; padding-bottom: 4px;}
    .contactFormWrapper {padding: 30px; border-radius: 20px;}
    .contactFormWrapper:before {display: none;}
    .contactFormWrapper h4 {font-size: 26px;}
    .contactFormWrapper p {font-size: 14px;}
    .contactFormWrapper ul li {width: 100%; padding-bottom: 15px;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #contactBannerWrapper {height: 320px;}
    #contactBannerWrapper h1 {font-size: 38px;}
    #contactContentPart {padding: 80px 0;}
    .contactContent {padding: 0 0 40px 0;}
    .contactContent h2 {font-size: 31px;}
    .contactContent p {font-size: 16px;}
    .contactContent h3 {font-size: 26px;}
    .contactContent ul li {font-size: 16px; padding-bottom: 4px;}
    .contactFormWrapper {padding: 30px; border-radius: 20px;}
    .contactFormWrapper:before {display: none;}
    .contactFormWrapper h4 {font-size: 28px;}
    .contactFormWrapper p {font-size: 16px;}
    .contactFormWrapper ul li {width: 50%; padding-bottom: 15px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #contactBannerWrapper {height: 360px;}
    #contactBannerWrapper h1 {font-size: 40px;}
    .contactContent {padding: 0 0 40px 0;}
    .contactContent h2{font-size: 32px;}
    .contactContent p {font-size: 16px;}
    .contactContent ul li {font-size: 16px; padding-bottom: 4px;}
    .contactFormWrapper {padding: 20px 20px 20px 160px;}
    .contactFormWrapper h4 {font-size: 30px;}
    .contactFormWrapper p {font-size: 14px;}
    .contactFormWrapper ul {padding: 0 5px;}
    .contactFormWrapper ul li, .contactFormWrapper ul li.textarea {padding: 0 10px 20px 10px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #contactBannerWrapper {height: 380px;}
    #contactBannerWrapper h1 {font-size: 42px;}
    .contactContent {padding: 0;}
    .contactContent h2 {font-size: 30px;}
    .contactContent h3 {font-size: 26px;}
    .contactContent p, .contactContent ul li {font-size: 16px;}
    .contactFormWrapper {margin-left: 15px; padding: 30px 30px 30px 170px;}
    .contactFormWrapper h4 {font-size: 28px;}
    .contactFormWrapper p {font-size: 14px; padding-bottom: 15px;}
    .contactFormWrapper ul li {padding: 0 10px 20px 10px;}
    .contactFormWrapper ul li input, .contactFormWrapper ul li select, .contactFormWrapper ul li textarea {font-size: 14px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #contactBannerWrapper {height: 440px;}
    .contactContent h2 {font-size: 34px;}
    .contactFormWrapper {margin-left: 30px;}
    .contactFormWrapper h4 {font-size: 32px;}
    .contactFormWrapper p {font-size: 14px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .contactContent {padding-right: 0;}
}