File: /var/www/html/kollect/wp-content/themes/kollect/scss/contact.scss
@import "partials";
.contact-bnr{
width: 100%;
display: flex;
flex-direction: column;
background: url(../images/contact-bnr.png) no-repeat center left;
background-size: cover;
height: 408px;
justify-content: center;
padding-top: 72px;
position: relative;
@media ($sm-767){
padding-top: 62px;
}
&::after{
content: "";
width: 190px;
height: 90px;
background: url(../images/coin.png) no-repeat center;
background-size: contain;
position: absolute;
right: 0px;
bottom: 0px;
@media ($sm-1199){
width: 108px;
height: 50px;
}
}
@media ($sm-1679){
height: 380px;
}
@media ($sm-1441){
height: 340px;
}
@media ($sm-1199){
height: 300px;
}
@media ($sm-991){
height: 280px;
background-position: left bottom;
}
@media ($sm-767){
height: 250px;
}
@media ($sm-579){
height: 200px;
}
.inner-wrp{
display: flex;
align-items: center;
justify-content: center;
}
.title{
color: $primaryColor;
font-size: 55px;
font-weight: 600;
@media ($sm-1679) {
font-size: 40px;
margin-bottom: 15px;
}
@media ($sm-1441) {
font-size: 35px;
}
@media ($sm-1199) {
font-size: 30px;
}
@media ($sm-991) {
font-size: 28px;
}
@media ($sm-767) {
font-size: 24px;
}
@media ($sm-579) {
font-size: 20px;
}
@media ($sm-479) {
font-size: 18px;
line-height: 22px;
}
@media (max-width:380px){
max-width: 150px;
}
}
}
.contact-area{
display: flex;
flex-direction: column;
width: 100%;
padding: 120px 0;
@media ($sm-1679){
padding: 90px 0;
}
@media ($sm-1441){
padding: 80px 0;
}
@media ($sm-1199){
padding: 60px 0;
}
@media ($sm-991){
padding: 40px 0;
}
@media ($sm-767){
padding: 30px 0;
}
.title-blk{
display: flex;
flex-direction: column;
margin-bottom: 60px;
@media ($sm-1679){
margin-bottom: 50px;
}
@media ($sm-1441){
margin-bottom: 40px;
}
@media ($sm-1199){
margin-bottom: 30px;
}
@media ($sm-991){
margin-bottom: 20px;
}
.sub-title{
margin-bottom: 5px;
}
.para{
display: block;
}
}
.contact-info-wrp{
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
margin-bottom: 60px;
@media ($sm-1679){
margin-bottom: 50px;
}
@media ($sm-1441){
margin-bottom: 40px;
gap: 15px;
}
@media ($sm-1199){
gap: 10px;
margin-bottom: 30px;
}
@media ($sm-991){
gap: 10px;
margin-bottom: 20px;
}
.info-blks{
width: calc((100% / 4) - 20px);
flex: 1 0 calc((100% / 4) - 20px);
display: flex;
align-items: center;
@media ($sm-991){
width: calc((100% / 2) - 10px);
flex: 0 0 calc((100% / 2) - 10px);
}
@media ($sm-767){
width: calc((100% / 2) - 10px);
flex: 0 0 calc((100% / 2) - 10px);
}
@media (max-width:470px){
width: 100%;
flex: 0 0 100%;
}
.icon{
width: 66px;
height: 66px;
margin-right: 20px;
border-radius: 6px;
flex-shrink: 0;
@media ($sm-1679){
margin-right: 15px;
width: 55px;
height: 55px;
}
@media ($sm-1199){
margin-right: 10px;
width: 45px;
height: 45px;
}
@media ($sm-991){
width: 40px;
height: 40px;
}
img{
max-width: 100%;
}
}
.txt{
font-size: 18px;
font-weight: 500;
color: $primaryColor;
@media ($sm-1679){
font-size: 16px;
}
@media ($sm-1199){
font-size: 15px;
}
@media ($sm-991){
font-size: 14px;
}
@media ($sm-767){
font-size: 13px;
}
}
}
}
.form-note{
color: $primaryColor;
}
.contact-form-wrp{
background-color: #F3F6F8;
border-radius: 19px;
padding: 95px 90px 85px;
margin-top: 98px;
@media ($sm-1679){
margin-top: 70px;
padding: 80px;
}
@media ($sm-1441){
margin-top: 50px;
padding: 60px;
}
@media ($sm-1199){
margin-top: 30px;
padding: 40px;
}
@media ($sm-991){
margin-top: 20px;
padding: 30px;
}
@media ($sm-767){
padding: 20px;
}
.form-group{
margin-bottom: 45px;
position: relative;
@media ($sm-1679){
margin-bottom: 35px;
}
@media ($sm-1441){
margin-bottom: 30px;
}
@media ($sm-1199){
margin-bottom: 25px;
}
@media ($sm-991){
margin-bottom: 20px;
}
.error-msg{
position: absolute;
font-size: 14px;
color: red;
@media ($sm-1199){
font-size: 13px;
}
}
}
.form-label{
line-height: 1;
margin-bottom: 10px;
color: $primaryColor;
position: relative;
&:not(.no-valid){
&::after{
content: "*";
color: red;
font-size: 14px;
margin-left: 2px;
position: relative;
top: -3px;
}
}
}
.form-control,.form-select{
height: 64px;
border-radius: 39px;
border: 1px solid #FFFFFF;
padding: 20px 36px;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
background-color: #fff;
line-height: 1.6;
color: $primaryColor;
@media ($sm-1679) {
font-size: 18px;
height: 50px;
padding: 15px 30px;
}
@media ($sm-1441) {
font-size: 16px;
height: 48px;
padding: 10px 25px;
}
@media ($sm-1199) {
font-size: 15px;
height: 44px;
padding: 10px 20px;
}
@media ($sm-991) {
font-size: 14px;
height: 40px;
}
@media ($sm-767) {
font-size: 13px;
height: 38px;
}
&::-webkit-input-placeholder{
color: #cad0d2;
font-weight: 300;
}
&:focus{
box-shadow: none;
outline: none;
}
&.txtarea{
border-radius: 20px;
height: 166px;
}
}
.form-select{
line-height: 1;
color: #cad0d2;;
background-image: url(../images/select-arrow-down.svg);
background-size: 12px;
@media ($sm-1679){
background-size: 10px;
}
@media ($sm-991){
background-size: 9px;
}
&.selected{
color: $primaryColor;
}
option{
&:disabled{
color: #cad0d2;
}
}
}
.input-call{
display: flex;
align-items: center;
.form-select{
line-height: 1;
width: 117px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
font-weight: 300;
color: #0C2933;
font-size: 20px;
@media ($sm-1679){
font-size: 18px;
}
@media ($sm-1441){
font-size: 17px;
}
@media ($sm-1199){
width: 100px;
font-size: 16px;
}
@media ($sm-767){
width: 90px;
}
}
.seprator{
width: 1px;
height: 30px;
display: flex;
background-color: #C8D3DB;
margin: 5px 0;
}
.form-control{
// border-left: 1px solid #C8D3DB;
border: none;
width: calc(100% - 117px);
border-bottom-left-radius: 0;
border-top-left-radius: 0;
@media ($sm-1199){
width: calc(100% - 100px);
}
}
}
.btn-blk-contact{
display: flex;
justify-content: flex-end;
.btn-common{
border: none;
&:hover{
border: 1px solid $primaryColor;
}
@media ($sm-479){
width: 100%;
}
}
}
}
}