/* ---------------------------------------------------------------- */
/* 21.Contact
/* ---------------------------------------------------------------- */
.contact-info-item {
padding: 30px;
display: flex;
margin-bottom: 24px;
border-radius: 50px;
background: $color_white;
transition: all 0.5s ease;
box-shadow: 0 15px 30px 0 rgba($color_primary,0.15);
.icon {
padding: 10px;
margin-right: 30px;
border-radius: 50%;
text-align: center;
border: 2px solid $color_primary;
span {
height: 80px;
width: 80px;
font-size: 30px;
border-radius: 50%;
line-height: 80px;
color: $color_white;
align-items: center;
background: $color_primary;
}
}
.body {
h5 {
margin-bottom: 11px;
}
}
}
.contact-form-wrap {
.contact-btn-left {
margin-top: 6px;
}
.contact-form-group {
position: relative;
margin-bottom: 20px;
.form-control {
height: 60px;
color: $color_dark;
outline: none;
border: none;
padding: 0 60px 0 30px;
border-radius: 30px;
transition: all 0.25s ease;
box-shadow: 0 10px 15px 0 rgba($color_primary, 0.1);
&:focus {
outline: none;
color: $color_dark;
}
}
#txtInput {
padding-left: 90px;
}
#txtCaptchaSpan {
position: absolute;
top: 50%;
height: 60px;
padding-left: 14px;
padding-right: 14px;
transform: translateY(-50%);
display: flex;
align-items: center;
background: $color_primary;
color: $color_white;
border-radius: 0;
}
textarea.form-control {
height: auto;
padding-top: 20px;
}
}
.empty-form span, .email-invalid span, .phone-invalid span, .terms-alert span, .subject-alert span, .security-alert span {
display: block;
font-size: 16px;
padding: 15px;
margin-bottom: 20px;
border-radius: 10px;
font-weight: 600;
text-align: center;
color: darken($color_danger,10%);
background: $color_white;
box-shadow: 0 10px 15px 0 rgba($color_primary, 0.1);
}
.form-validate-icons {
top: 0;
right: 14px;
height: 60px;
position: absolute;
line-height: 60px;
span {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
&:before {
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
border-radius: 50%;
color: $color_white;
display: inline-block;
font: {
size: 14px;
family: "Font Awesome 5 Free";
weight: 700;
}
}
&.error {
opacity: 1;
visibility: visible;
&:before {
content: "\f00d";
color: $color_white;
background: $color_primary;
}
}
&.success {
opacity: 1;
visibility: visible;
&:before {
content: "\f00c";
color: $color_white;
background: $color_success;
}
}
}
}
.custom-select-wrapper {
position: relative;
select, .select-hide {
display: none;
}
.select-selected {
outline: none;
padding: 18px 30px;
border: none;
cursor: pointer;
border-radius: 30px;
background: $color_white;
color: $color_black !important;
transition: all 0.25s ease;
box-shadow: 0 10px 15px rgba($color_primary, 0.1);
&:focus {
outline: none;
border: none;
box-shadow: 0px 23px 49px 0px rgba($color_primary,0.1);
}
&:after {
right: 14px;
top: 14px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
content: "\f078";
position: absolute;
pointer-events: none;
display: inline-block;
color: $color_white;
background: $color_primary;
font: {
size: 14px;
family: "Font Awesome 5 Free";
weight: 700;
}
}
&.select-arrow-active:after {
content: "\f077";
}
}
.select-items {
top: 100%;
left: 0;
right: 0;
z-index: 99;
margin-top: 10px;
position: absolute;
border-radius: 10px;
color: $color_black !important;
background-color: $color_white;
box-shadow: 0 10px 15px rgba($color_primary, 0.1);
animation: fadeInDown 0.5s ease forwards;
.same-as-selected {
background-color: $color_primary;
border-bottom-color: $color_primary;
color: $color_white !important;
}
div {
color: $color_black;
outline: none;
width: 100%;
display: block;
padding: 18px 30px;
font-size: 15px;
border: none;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
border-bottom: 1px solid rgba($color_primary, 0.08);
&:focus {
outline: none;
border: none;
box-shadow: 0 23px 49px 0 rgba($color_primary,0.1);
}
&:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
&:first-child {
border-radius: 10px 10px 0 0;
}
&:hover{
background-color: $color_primary;
border-bottom-color: $color_primary;
color: $color_white;
}
}
}
}
}
.google-map {
width: 100%;
line-height: 0;
iframe {
width: 100%;
min-height: 500px;
border: none;
}
}
/* ---------------------------------------------------------------- */
/* Responsive Media Query (992px)
/* ---------------------------------------------------------------- */
@media only screen and (max-width:992px) {
.contact-info-wrap {
margin-bottom: 30px;
}
.contact-btn-left {
text-align: left;
}
.form-alerts {
.text-center {
span {
text-align: left !important;
}
}
}
}
/* ---------------------------------------------------------------- */
/* Responsive Media Query (576px)
/* ---------------------------------------------------------------- */
@media only screen and (max-width:576px) {
.contact-info-item {
display: block;
text-align: left;
.icon {
padding: 10px;
display: inline-block;
margin-right: 0;
margin-bottom: 20px;
}
}
} |