HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux spn-python 5.15.0-89-generic #99-Ubuntu SMP Mon Oct 30 20:42:41 UTC 2023 x86_64
User: arjun (1000)
PHP: 8.1.2-1ubuntu2.20
Disabled: NONE
Upload Files
File: /var/www/html/kollect/wp-content/themes/kollect/css/contact.css
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");
/*** all Mobile Screen (iphone 6,7,8) ***/
/*** mobile Landscape Size ***/
/*** medium devices (tablets, less than 992px) ***/
/*** iPad in landscape ***/
/**** smaller than desktop 1200 (devices and browsers) ***/
/*** laptop with MDPI (medium density per inch) resolution ***/
/*** laptop with HiDPI (High Dots Per Inch) resolution ***/
/*** WSXGA (Wide Super Extended Graphics Array) resolution ***/
/*** all Mobile Screen (iphone 6,7,8) ***/
/*** mobile Landscape Size ***/
/*** medium devices (tablets, less than 992px) ***/
/*** iPad in landscape ***/
/**** smaller than desktop 1200 (devices and browsers) ***/
/*** laptop with MDPI (medium density per inch) resolution ***/
/*** laptop with HiDPI (High Dots Per Inch) resolution ***/
/*** WSXGA (Wide Super Extended Graphics Array) resolution ***/
.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 (max-width: 767px) {
  .contact-bnr {
    padding-top: 62px;
  }
}
.contact-bnr::after {
  content: "";
  width: 190px;
  height: 90px;
  background: url(../images/coin.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
@media (max-width: 1199px) {
  .contact-bnr::after {
    width: 108px;
    height: 50px;
  }
}
@media (max-width: 1679px) {
  .contact-bnr {
    height: 380px;
  }
}
@media (max-width: 1441px) {
  .contact-bnr {
    height: 340px;
  }
}
@media (max-width: 1199px) {
  .contact-bnr {
    height: 300px;
  }
}
@media (max-width: 991px) {
  .contact-bnr {
    height: 280px;
    background-position: left bottom;
  }
}
@media (max-width: 767px) {
  .contact-bnr {
    height: 250px;
  }
}
@media (max-width: 579px) {
  .contact-bnr {
    height: 200px;
  }
}
.contact-bnr .inner-wrp {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-bnr .title {
  color: #00506B;
  font-size: 55px;
  font-weight: 600;
}
@media (max-width: 1679px) {
  .contact-bnr .title {
    font-size: 40px;
    margin-bottom: 15px;
  }
}
@media (max-width: 1441px) {
  .contact-bnr .title {
    font-size: 35px;
  }
}
@media (max-width: 1199px) {
  .contact-bnr .title {
    font-size: 30px;
  }
}
@media (max-width: 991px) {
  .contact-bnr .title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .contact-bnr .title {
    font-size: 24px;
  }
}
@media (max-width: 579px) {
  .contact-bnr .title {
    font-size: 20px;
  }
}
@media (max-width: 479px) {
  .contact-bnr .title {
    font-size: 18px;
    line-height: 22px;
  }
}
@media (max-width: 380px) {
  .contact-bnr .title {
    max-width: 150px;
  }
}

.contact-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 120px 0;
}
@media (max-width: 1679px) {
  .contact-area {
    padding: 90px 0;
  }
}
@media (max-width: 1441px) {
  .contact-area {
    padding: 80px 0;
  }
}
@media (max-width: 1199px) {
  .contact-area {
    padding: 60px 0;
  }
}
@media (max-width: 991px) {
  .contact-area {
    padding: 40px 0;
  }
}
@media (max-width: 767px) {
  .contact-area {
    padding: 30px 0;
  }
}
.contact-area .title-blk {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}
@media (max-width: 1679px) {
  .contact-area .title-blk {
    margin-bottom: 50px;
  }
}
@media (max-width: 1441px) {
  .contact-area .title-blk {
    margin-bottom: 40px;
  }
}
@media (max-width: 1199px) {
  .contact-area .title-blk {
    margin-bottom: 30px;
  }
}
@media (max-width: 991px) {
  .contact-area .title-blk {
    margin-bottom: 20px;
  }
}
.contact-area .title-blk .sub-title {
  margin-bottom: 5px;
}
.contact-area .title-blk .para {
  display: block;
}
.contact-area .contact-info-wrp {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  margin-bottom: 60px;
}
@media (max-width: 1679px) {
  .contact-area .contact-info-wrp {
    margin-bottom: 50px;
  }
}
@media (max-width: 1441px) {
  .contact-area .contact-info-wrp {
    margin-bottom: 40px;
    gap: 15px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-info-wrp {
    gap: 10px;
    margin-bottom: 30px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-info-wrp {
    gap: 10px;
    margin-bottom: 20px;
  }
}
.contact-area .contact-info-wrp .info-blks {
  width: calc(25% - 20px);
  flex: 1 0 calc(25% - 20px);
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .contact-area .contact-info-wrp .info-blks {
    width: calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
  }
}
@media (max-width: 767px) {
  .contact-area .contact-info-wrp .info-blks {
    width: calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
  }
}
@media (max-width: 470px) {
  .contact-area .contact-info-wrp .info-blks {
    width: 100%;
    flex: 0 0 100%;
  }
}
.contact-area .contact-info-wrp .info-blks .icon {
  width: 66px;
  height: 66px;
  margin-right: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
@media (max-width: 1679px) {
  .contact-area .contact-info-wrp .info-blks .icon {
    margin-right: 15px;
    width: 55px;
    height: 55px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-info-wrp .info-blks .icon {
    margin-right: 10px;
    width: 45px;
    height: 45px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-info-wrp .info-blks .icon {
    width: 40px;
    height: 40px;
  }
}
.contact-area .contact-info-wrp .info-blks .icon img {
  max-width: 100%;
}
.contact-area .contact-info-wrp .info-blks .txt {
  font-size: 18px;
  font-weight: 500;
  color: #00506B;
}
@media (max-width: 1679px) {
  .contact-area .contact-info-wrp .info-blks .txt {
    font-size: 16px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-info-wrp .info-blks .txt {
    font-size: 15px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-info-wrp .info-blks .txt {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .contact-area .contact-info-wrp .info-blks .txt {
    font-size: 13px;
  }
}
.contact-area .form-note {
  color: #00506B;
}
.contact-area .contact-form-wrp {
  background-color: #F3F6F8;
  border-radius: 19px;
  padding: 95px 90px 85px;
  margin-top: 98px;
}
@media (max-width: 1679px) {
  .contact-area .contact-form-wrp {
    margin-top: 70px;
    padding: 80px;
  }
}
@media (max-width: 1441px) {
  .contact-area .contact-form-wrp {
    margin-top: 50px;
    padding: 60px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-form-wrp {
    margin-top: 30px;
    padding: 40px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-form-wrp {
    margin-top: 20px;
    padding: 30px;
  }
}
@media (max-width: 767px) {
  .contact-area .contact-form-wrp {
    padding: 20px;
  }
}
.contact-area .contact-form-wrp .form-group {
  margin-bottom: 45px;
  position: relative;
}
@media (max-width: 1679px) {
  .contact-area .contact-form-wrp .form-group {
    margin-bottom: 35px;
  }
}
@media (max-width: 1441px) {
  .contact-area .contact-form-wrp .form-group {
    margin-bottom: 30px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-form-wrp .form-group {
    margin-bottom: 25px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-form-wrp .form-group {
    margin-bottom: 20px;
  }
}
.contact-area .contact-form-wrp .form-group .error-msg {
  position: absolute;
  font-size: 14px;
  color: red;
}
@media (max-width: 1199px) {
  .contact-area .contact-form-wrp .form-group .error-msg {
    font-size: 13px;
  }
}
.contact-area .contact-form-wrp .form-label {
  line-height: 1;
  margin-bottom: 10px;
  color: #00506B;
  position: relative;
}
.contact-area .contact-form-wrp .form-label:not(.no-valid)::after {
  content: "*";
  color: red;
  font-size: 14px;
  margin-left: 2px;
  position: relative;
  top: -3px;
}
.contact-area .contact-form-wrp .form-control, .contact-area .contact-form-wrp .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: #00506B;
}
@media (max-width: 1679px) {
  .contact-area .contact-form-wrp .form-control, .contact-area .contact-form-wrp .form-select {
    font-size: 18px;
    height: 50px;
    padding: 15px 30px;
  }
}
@media (max-width: 1441px) {
  .contact-area .contact-form-wrp .form-control, .contact-area .contact-form-wrp .form-select {
    font-size: 16px;
    height: 48px;
    padding: 10px 25px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-form-wrp .form-control, .contact-area .contact-form-wrp .form-select {
    font-size: 15px;
    height: 44px;
    padding: 10px 20px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-form-wrp .form-control, .contact-area .contact-form-wrp .form-select {
    font-size: 14px;
    height: 40px;
  }
}
@media (max-width: 767px) {
  .contact-area .contact-form-wrp .form-control, .contact-area .contact-form-wrp .form-select {
    font-size: 13px;
    height: 38px;
  }
}
.contact-area .contact-form-wrp .form-control::-webkit-input-placeholder, .contact-area .contact-form-wrp .form-select::-webkit-input-placeholder {
  color: #cad0d2;
  font-weight: 300;
}
.contact-area .contact-form-wrp .form-control:focus, .contact-area .contact-form-wrp .form-select:focus {
  box-shadow: none;
  outline: none;
}
.contact-area .contact-form-wrp .form-control.txtarea, .contact-area .contact-form-wrp .form-select.txtarea {
  border-radius: 20px;
  height: 166px;
}
.contact-area .contact-form-wrp .form-select {
  line-height: 1;
  color: #cad0d2;
  background-image: url(../images/select-arrow-down.svg);
  background-size: 12px;
}
@media (max-width: 1679px) {
  .contact-area .contact-form-wrp .form-select {
    background-size: 10px;
  }
}
@media (max-width: 991px) {
  .contact-area .contact-form-wrp .form-select {
    background-size: 9px;
  }
}
.contact-area .contact-form-wrp .form-select.selected {
  color: #00506B;
}
.contact-area .contact-form-wrp .form-select option:disabled {
  color: #cad0d2;
}
.contact-area .contact-form-wrp .input-call {
  display: flex;
  align-items: center;
}
.contact-area .contact-form-wrp .input-call .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 (max-width: 1679px) {
  .contact-area .contact-form-wrp .input-call .form-select {
    font-size: 18px;
  }
}
@media (max-width: 1441px) {
  .contact-area .contact-form-wrp .input-call .form-select {
    font-size: 17px;
  }
}
@media (max-width: 1199px) {
  .contact-area .contact-form-wrp .input-call .form-select {
    width: 100px;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .contact-area .contact-form-wrp .input-call .form-select {
    width: 90px;
  }
}
.contact-area .contact-form-wrp .input-call .seprator {
  width: 1px;
  height: 30px;
  display: flex;
  background-color: #C8D3DB;
  margin: 5px 0;
}
.contact-area .contact-form-wrp .input-call .form-control {
  border: none;
  width: calc(100% - 117px);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
@media (max-width: 1199px) {
  .contact-area .contact-form-wrp .input-call .form-control {
    width: calc(100% - 100px);
  }
}
.contact-area .contact-form-wrp .btn-blk-contact {
  display: flex;
  justify-content: flex-end;
}
.contact-area .contact-form-wrp .btn-blk-contact .btn-common {
  border: none;
}
.contact-area .contact-form-wrp .btn-blk-contact .btn-common:hover {
  border: 1px solid #00506B;
}
@media (max-width: 479px) {
  .contact-area .contact-form-wrp .btn-blk-contact .btn-common {
    width: 100%;
  }
}