.herobanner-section {
height: calc(100vh - 86px);
position: relative;
padding: 133px 0;
z-index: 1;
display: flex;
align-items: end
}
.herobanner-section .video-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2
}
.hero-content h1 {
font-weight: 400
}
.herobanner-section .video-wrapper iframe, .herobanner-section .video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover
}
.herobanner-section.without-overlay .hero-overlay {
display: none;
}
.herobanner-section.without-overlay .hero-content h1, .herobanner-section.without-overlay .hero-decriprion p {
color: #fff;
}
.hero-overlay {
background: rgba(22, 37, 56, .5);
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: -1
}
.herobanner-section .column-row {
align-items: end
}
.herobanner-section .column-row .column-left {
width: 43.25%
}
.herobanner-section .column-row .column-right {
width: 32.5%
}
.hero-decriprion p {
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 29.7px
}
.hero-content .btn {
margin-top: 30px
}
.herobanner-section .column-row .column-right .btn {
margin-top: 40px
}
.herobanner-section.enable_features {
height: auto;
min-height: 665px;
padding: 133px 0
}
.herobanner-section.enable_features + .Whyhire-us-cards-section {
position: relative;
z-index: 1;
margin-top: -60px
}
.herobanner-section.enable_features + .Whyhire-us-cards-section .Whyhire-us-cards-box:nth-child(2) .Whyhire-us-cards {
padding: 185px 40px 40px 40px
}
.herobanner-section.enable_features + .Whyhire-us-cards-section .Whyhire-us-cards-box:nth-child(2) .Whyhire-us-cards::before {
top: 60px;
bottom: auto
}
.contact-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover
}
.contact-popup .contact-form-main {
position: fixed;
right: 0;
bottom: 0
}
.contact-popup .contact-form-main {
background-color: #fff;
max-width: 860px;
padding: 50px;
max-height: 790px;
overflow-y: auto;
animation: popupSlideIn .3s ease-out
}
.contact-popup .left-col .contact-details {
max-width: 382px
}
.contact-popup .left-col .contact-details h2 {
color: #fff;
margin-bottom: 35px
}
.contact-popup .left-col .contact-details ul {
list-style-type: none;
margin: 0;
padding: 0
}
.contact-popup .left-col .contact-details ul li, .contact-popup .left-col .contact-details ul li a {
color: rgb(255 255 255 / 50%);
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 135%
}
.contact-popup .left-col .contact-details ul li a {
color: #fff
}
.contact-popup .left-col .contact-details ul li:not(:last-child) {
margin-bottom: 18px
}
.contact-popup #closePopup {
background-color: transparent;
border: 0;
padding: 0;
position: absolute;
top: 50px;
cursor: pointer
}
.contact-popup .left-col .contact-details ul li a:hover {
color: #f4c04a
}
.contact-popup:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: -1
}
.contact-form-title {
display: flex;
align-items: flex-end;
margin-bottom: 30px
}
.contact-form-title h3 {
max-width: 495px;
font-weight: 300;
letter-spacing: -.34px;
margin: 0 20px 0 0;
}
.contact-form-sec .left-column, .contact-form-sec .right-column {
width: 50%;
padding: 0 12px
}
.contact-form-sec .column-row {
margin: 0 -12px
}
.contact-details-main {
background-color: #ebebeb;
height: 100%;
padding: 40px
}
.contact-popup .contact-form-main {
background-color: #ebebeb;
padding: 40px
}
.contact-form-sec {
margin: 160px 0
}
.contact-banner + .contact-form-sec {
margin-top: -100px
}
.contact-details-main .schedule-call span, .contact-details-main .section-title span, .contact-details-main .social-links span {
display: block;
margin-bottom: 10px;
color: #0c0d0e;
font-size: 18px;
font-weight: 500;
line-height: 21.6px;
text-transform: uppercase
}
.contact-details-main p {
font-weight: 400;
font-size: 16px;
line-height: 23.2px;
opacity: .7
}
.contact-details-main .section-title {
margin-bottom: 32px
}
.contact-details-main .contact- details ul {
margin: 0;
list-style-type: none;
padding: 0
}
.contact-details-main .contact- details ul li {
list-style-type: none
}
.contact-details-main .contact-details ul {
list-style-type: none;
padding: 0;
margin: 0
}
.contact-details-main .contact-details ul li a, .contact-details-main .contact-details ul li span {
font-size: 22px;
line-height: 29.7px;
font-weight: 600
}
.contact-details-main .contact-details ul li span p {
margin-top: 5px
}
.contact-details-main .contact-details ul li {
display: flex
}
.contact-details-main .contact-details ul li span:not(:last-child) {
margin-right: 12px;
font-weight: 400
}
.contact-details-main .contact-details ul li {
padding: 0;
margin: 0
}
.contact-details-main .contact-details ul li:not(:last-child) {
margin-bottom: 40px
}
.contact-details-main .contact-details, .contact-details-main .schedule-call {
padding-bottom: 40px;
border-bottom: 1px solid rgba(12, 13, 14, .14);
margin-bottom: 40px
}
.contact-details-main .schedule-call .btn {
display: inline-flex;
align-items: center
}
.contact-form-title .btn svg {
margin-left: 12px;
}
.schedule-call .btn span {
margin: 0 12px 0 0
}
.contact-details-main .social-links ul {
margin-top: 24px
}
.contact-details-main .social-links ul li a svg path {
fill: #701E46
}
.contact-details-main .social-links ul li a:hover svg path {
fill: rgba(12, 13, 14, 1)
}
.contact-details-main .social-links ul li a {
opacity: 1
}
.contact-details-main .social-links li:not(:last-child) {
margin-right: 35px
}
.contact-popup .contact-form-main h2 {
font-weight: 300
}
body img.gform_ajax_spinner {
width: 40px;
padding-left: 15px;
background: #fff;
flex-shrink: 0
}
.gform_wrapper.gravity-theme .gform_footer input + input {
margin-left: 0 !important
}
body .gform_wrapper.gravity-theme .gfield_label {
color: #243746;
display: block;
letter-spacing: 0;
margin: 0 0 15px;
font-family: var(--font-myriad);
text-transform: capitalize;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px
}
body .gform_wrapper.gravity-theme .gfield_required {
color: var(--font-black);
font-family: var(--font-fightree);
font-size: 13px;
font-style: normal !important
}
body .gform_wrapper .gfield select, body .gform_wrapper input:not([type=checkbox]), body .gform_wrapper textarea {
background-color: transparent !important;
border-radius: 0 !important;
border: 0 !important;
color: #0c0d0e !important;
font-size: 18px !important;
border-bottom: solid 1px rgba(12, 13, 14, .18) !important;
box-shadow: none !important;
padding: 0 0 24px 0 !important;
outline: 0 !important
}
body .gform_wrapper .gfield select {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-image: url(//www.tosifirm.com/wp-content/themes/tosilow/assets/images/arrow-down.svg);
background-repeat: no-repeat;
outline: 0;
background-position: right;
padding: 12px 33px 12px 23px !important;
width: 100%;
background-size: 15px;
opacity: .6
}
body .gform_wrapper .gfield select {
padding-bottom: 10px !important;
height: auto;
padding-left: 0 !important;
padding-right: 20px !important;
cursor: pointer !important;
padding-top: 0 !important
}
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single {
padding: 6px 20px !important;
box-shadow: none !important;
background: #fff !important;
height: 50px !important
}
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single div b, .gform_wrapper.gravity-theme .gfield select {
background: url(//www.tosifirm.com/wp-content/themes/tosilow/blocks/images/icons/select-arrow.svg) no-repeat !important;
background-position: calc(100% - 20px) 50% !important
}
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single div {
width: 40px !important
}
body .gform_wrapper.gravity-theme .gfield textarea.large {
height: 136px;
resize: none
}
body .gform_wrapper.gravity-theme .gform_fields {
grid-column-gap: 25px;
grid-row-gap: 35px
}
body .gform_wrapper .gform_footer input[type=submit]:focus {
outline: 0 !important
}
body .gform_wrapper .gform_footer {
margin-top: 34px;
position: relative;
cursor: pointer
}
body .gfield_html {
color: rgba(33, 44, 51, .8);
font-size: 13px;
letter-spacing: 0;
line-height: 22px;
margin-bottom: 20px
}
body .gfield_html a {
color: var(--blue)
}
body .gfield_html a:hover {
color: var(--font-black)
}
.resource-download .gform_wrapper.gravity-theme .gform_footer {
margin-top: -10px !important
}
.contact-form .gform_wrapper.gravity-theme .gform_footer {
margin-top: 35px !important
}
.gform_wrapper.gravity-theme .gform_footer {
margin: 0 !important;
padding: 0 !important;
position: relative
}
body .gform_wrapper input:focus, body .gform_wrapper textarea:focus {
outline: 0;
border-radius: 3px;
border: 0;
box-shadow: 0 4px 14px 0 rgba(16, 122, 151, .2)
}
body .gform_wrapper.gravity-theme .isvalue .gfield_label {
color: var(--blue) !important
}
body .gform_wrapper.gravity-theme .isvalue .gfield_label .gfield_required {
color: var(--blue)
}
.ginput_container.ginput_container_multiselect {
display: grid;
position: relative;
width: 100%
}
.ginput_container_checkbox .gfield_checkbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
.gform_wrapper.gravity-theme .ginput_container_checkbox .gfield-choice-input {
display: none
}
.resource-download .privacy_terms {
margin-top: -25px;
margin-bottom: 0
}
.gform_wrapper .gform_validation_errors {
display: none
}
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message {
background: 0 0 !important;
border: none !important;
font-size: 14px !important;
margin-top: 0 !important;
padding: 10px 0 0 0 !important
}
.gform_body .ginput_container_phone .instruction {
display: none
}
.gform_confirmation_message_2 {
color: var(--font-black);
font-size: 20px;
font-weight: 500
}
.gform_required_legend {
display: none
}
ul.chosen-results li:before {
content: none
}
.gform_wrapper.gravity-theme .chosen-container .chosen-results li {
padding: 8px 20px !important
}
.gform_wrapper.gravity-theme .chosen-container .chosen-results li.highlighted {
background-color: #243746 !important;
color: #fff !important;
background-image: none !important
}
.gform_wrapper.gravity-theme .chosen-container .chosen-results li {
color: #243746 !important
}
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single {
color: #243746 !important;
font-size: 18px !important;
font-weight: 400 !important
}
.gform_wrapper.gravity-theme .gfield textarea {
height: 150px !important;
resize: none
}
body .gform_wrapper .gform_footer .gform_button {
width: 100%;
cursor: pointer !important;
background-color: var(--dark) !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--white) !important;
text-align: center !important;
text-decoration: none !important;
transition: all .2s ease !important;
display: inline-block !important;
border: 0 !important;
padding: 18px 30px !important;
cursor: pointer
}
body .gform_wrapper .gform_footer .gform_button:hover {
background-color: #f4c04a !important;
color: #0c0d0e !important
}
body .gform_wrapper .gform_footer .gform_button:hover {
color: var(--blue);
background-color: var(--primary-blue)
}
.gform_wrapper.gravity-theme .chosen-container-single .chosen-search input[type=text] {
background: 0 0 !important
}
.contact-popup .contact-form-main h2.gform_title {
display: none
}
body .gform_wrapper input::placeholder, body textarea::placeholder {
opacity: .7
}
.gform-theme--foundation .gform_fields {
column-gap: 24px !important;
row-gap: 34px !important
}
.gform_wrapper .gfield select {
padding-bottom: 0 !important
}
body .gform_wrapper label.gfield_label {
color: #0c0d0e;
font-size: 13px;
font-weight: 500;
line-height: 18.85px;
text-transform: uppercase;
opacity: .4;
margin-bottom: 18px
}
body .gform_wrapper textarea {
min-block-size: unset !important;
resize: none;
height: 95px
}
body .gform_wrapper input[type=checkbox] {
background-color: transparent !important;
border: 1px solid rgba(12, 13, 14, .7) !important;
box-shadow: none !important;
margin: 2px 0 0 0;
cursor: pointer
}
.gform-theme--framework .gform-field-label--type-inline {
font-size: 16px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 23.2px !important;
opacity: .7
}
.gform-theme--framework .gform-field-label--type-inline a {
text-decoration: underline
}
.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):checked::before {
color: rgba(26, 27, 29, .9) !important
}
label.gform-field-label.gform-field-label--type-inline.gfield_consent_label span.gfield_required {
display: none
}
@keyframes popupSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(.95)
}
to {
opacity: 1;
transform: translateY(0) scale(1)
}
}
@media only screen and (max-width: 1699px) {
.herobanner-section {
padding: 133px 0 70px
}
.herobanner-section .column-row .column-right {
width: 40.5%
}
.herobanner-section .column-row .column-left {
width: 54%
}
}
@media only screen and (max-width: 1399px) {
.contact-popup .left-col .contact-details {
max-width: 370px
}
.contact-popup .contact-form-main {
max-height: 620px;
}
}
@media only screen and (max-width: 1199px) {
.herobanner-section {
height: calc(100vh - 79px);
}
.hero-decriprion p {
font-size: 20px
}
.herobanner-section .column-row .column-left {
width: 50%
}
.herobanner-section .column-row .column-right {
width: 45%
}
.contact-form-sec {
margin: 80px 0
}
.contact-banner + .contact-form-sec {
margin-bottom: 80px
}
.contact-details-main .contact-details, .contact-details-main .schedule-call {
padding-bottom: 40px;
margin-bottom: 40px
}
.contact-details-main .contact-details ul li:not(:last-child) {
margin-bottom: 20px
}
.contact-popup .contact-form-main {
padding: 30px
}
.contact-details-main {
padding: 30px
}
.contact-details-main .contact-details ul li a, .contact-details-main .contact-details ul li span {
font-size: 20px;
line-height: 27px
}
.contact-details-main .schedule-call span, .contact-details-main .section-title span, .contact-details-main .social-links span {
font-size: 16px;
line-height: 20px
}
.contact-popup .contact-form-main h2 {
font-size: 26px;
line-height: 34px
}
.contact-details-main .section-title {
margin-bottom: 40px
}
.contact-details-main p, .gform-theme--framework .gform-field-label--type-inline {
font-size: 15px !important;
line-height: 22px !important
}
.gform-theme--foundation .gform_fields {
column-gap: 24px !important;
row-gap: 24px !important
}
.contact-popup .contact-form-main {
max-width: 680px;
padding: 40px;
}
.contact-popup .left-col .contact-details {
max-width: 270px
}
.contact-form-title h3 {
max-width: 390px
}
.contact-form-title .btn {
padding: 17px 14px 13.25px 14px;
}
}
@media only screen and (max-width: 991px) {
.herobanner-section {
height: calc(100vh - 52px);
}
.herobanner-section .column-row .column-left {
width: 100%
}
.home .herobanner-section .column-row .column-right {
display: none
}
.herobanner-section .column-row .column-right {
width: 100%;
margin-top: 0
}
.contact-form-sec .left-column, .contact-form-sec .right-column {
width: 100%
}
.contact-form-sec .left-column {
margin-top: 30px
}
.contact-form-sec .column-row {
flex-direction: column-reverse
}
.contact-details-main .contact-details, .contact-details-main .schedule-call {
padding-bottom: 20px;
margin-bottom: 20px
}
.contact-details-main .section-title {
margin-bottom: 20px
}
.contact-form-sec {
margin: 60px 0
}
.contact-banner + .contact-form-sec {
margin-bottom: 60px
}
body .gform_wrapper label.gfield_label {
margin-bottom: 10px
}
.contact-popup .contact-form-main {
max-width: 680px;
padding: 40px;
height: 695px
}
.contact-popup .left-col .contact-details {
display: none
}
.contact-popup #closePopup {
top: 20px;
left: 20px
}
.contact-popup #closePopup svg {
width: 30px
}
}
@media only screen and (max-width: 767px) {
.herobanner-section {
height: auto;
min-height: 650px
}
.hero-content h1 br {
display: none
}
.contact-form-sec {
margin: 40px 0
}
.contact-banner + .contact-form-sec {
margin-bottom: 40px;
margin-top: -70px
}
.contact-popup .contact-form-main {
padding: 30px 20px
}
.contact-details-main {
padding: 30px 20px
}
body .gform_wrapper .gfield select, body .gform_wrapper input:not([type=checkbox]), body .gform_wrapper textarea {
font-size: 16px !important;
line-height: normal !important;
padding: 0 0 10px 0 !important
}
.contact-details-main p, .gform-theme--framework .gform-field-label--type-inline {
font-size: 14px !important;
line-height: 20px !important
}
.contact-popup .contact-form-main {
max-width: 680px;
padding: 20px;
height: 600px
}
.contact-form-title {
flex-direction: column
}
.contact-form-title h3 {
margin-bottom: 15px
}
}