.contact-hero {
    min-height: 100%;
    background: linear-gradient(180deg, #01E2FD -140.76%, #0D0D0D 37.13%);
    background: -webkit-linear-gradient(270deg, #01E2FD -140.76%, #0D0D0D 37.13%);

    .title {
        background: linear-gradient(248.98deg, #01E2FD 49.77%, #004A9C 86.73%);
        background: -webkit-linear-gradient(248.98deg, #01E2FD 49.77%, #004A9C 86.73%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .company-name {
        color: #01E2FD;
    }

    .cta-desc {
        max-width: 461px !important;
    }

    /* 🔥 Make all 3 equal */
    .contact-item,
    .call-item,
    .email-item {
        flex: 1;
        text-align: center;
    }

    /* 🔥 Divider glow */
    .divider {
        width: 1px;
        height: 50px;
        margin: 0 20px;
        background: #01E2FD;
    }

    .dividerlandscape {
        width: 95px;
        height: 1px;
        margin: 0 20px;
        background: #01E2FD;
    }
}
.success-container{
    max-width: 358px !important;
    width: 100% ;
}
.enquiry-form,.success-section {
    background: #232323;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

/* Input */
.input-field {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #6C6C6C;
  outline: none;
  color: #fff;
}
/* Animated line */
.input-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #01E2FD;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* On focus */
.input-wrapper:focus-within::after {
  transform: scaleX(1);
}
/* ❌ ERROR STATE */
.input-wrapper.error::after {
  transform: scaleX(1);
  background: red;
}

/* Floating placeholder */
.custom-placeholder {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: 18px;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Red star */
.custom-placeholder span {
  color: red;
}

/* On focus OR typing */
.input-field:focus + .custom-placeholder,
.input-field:not(:placeholder-shown) + .custom-placeholder {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #01E2FD;
}
.submit-btn{
    background: #01E2FD ;
}
.select-field {
  color: #9CA3AF;
}

/* When user selects something */
.select-field:valid {
  color: #fff;
}

/* FLOAT LABEL ONLY WHEN USER SELECTS */
.select-field:focus + .custom-placeholder,
.select-field:valid + .custom-placeholder {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #01E2FD;
}
select option {
  background: #232323;
  border: 1px solid #232323;
}

.mobile-wrapper {
  position: relative;
  width: 100%;
}

/* Label */
.mobile-label {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: 18px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.mobile-label span {
  color: red;
}

.mobile-part {
  position: relative;
  border-bottom: 1px solid #6C6C6C; /* default grey line */
}

/* Animated line */
.mobile-part::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* align exactly over border */
  height: 1px;
  width: 100%;
  background-color: #01E2FD;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

/* Animate on focus */
.mobile-input-group2:focus-within .mobile-part::after {
  transform: scaleX(1);
}
.country-code:focus-visible{
    outline: none !important;
}
.country-code{
    max-width: 130px !important;
}
.country-code::placeholder{
    font-size: 18px;
    font-weight: 400;
    font-family: 'Roboto' , sans-serif;
    line-height: 1;
    color: #9CA3AF;
}
.mobile-part ul{
    background: #232323;
}
.error-text {
  color: red;
  font-size: 12px;
  margin-top: 4px;
  /* display: block; */
}

@media (max-width: 575px)  {

    nav,
    .webnav,
    #mainHeader a.contact-btn,
    .divider,
    .dividerlandscape {
        display: none;
    }


    .hamburger {
        display: flex;
    }

    #mainHeader {
        top: 20px;
    }

    .wrapper-1290.pt-72 {
        padding-top: 60px !important;
    }

    .title.fs-56 {
        font-size: 32px !important;
    }

    .subtitle.line-height-1 {
        line-height: 1.5 !important;
    }

    .subtitle,
    .cta-desc {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cta.mt-48 {
        margin-top: 56px !important;
    }

    .cta.fs-32 {
        font-size: 24px !important;
    }

    .cta.mb-3 {
        margin-bottom: 24px !important;
    }

    .contact-box.d-flex {
        display: block !important;
    }

    .contact-item,
    .call-item,
    .email-item {
        margin-bottom: 24px !important;
    }

    .contact-item .text-underline.fs-18,
    .call-item .text-underline.fs-18,
    .email-item .text-underline.fs-18 {
        font-size: 16px !important;
    }

    .content-copy {
        display: none !important;
    }

    .call,
    .email,
    .chat {
        font-size: 20px !important;
    }
    .enquiry-form.py-40{
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .enquiry-form.px-72 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .enquiry-form{
        margin: 0 20px !important;
    }
    .enquiry-form-title.fs-32{
        font-size: 24px !important;
    }
        .enquiry-form-title.mb-32,.your-details.mb-32{
        margin-bottom: 24px !important;
    }
    .your-details.fs-24,.your-requirements.fs-24{
        font-size: 20px !important;
    }
    .input-field.fs-18{
        font-size: 16px !important;
    }
    .mobile-email-input.d-flex,.enquiry-device-input.d-flex{
        display: block !important;
    }
    .mobile-input-group2,.enquiry-device-input .select-wrapper{
        margin-bottom: 24px !important;
    }
    .enquiry-form.mt-48{
        margin-top: 56px !important;
    }
    .your-requirements.my-33{
        margin-top: 24px !important;
        margin-bottom: 20px !important;
    }
    .success-container{
        .check-icon.fs-80{
            font-size: 64px !important;
        }
        .thank-you.fs-24{
            font-size: 20px !important;
        }
        .desc.fs-18{
            font-size: 16px !important;
        }
    }
}
@media (min-width: 576px) and (max-width: 992px) {

    nav,
    .webnav,
    #mainHeader a.contact-btn,
    .divider,
    .dividerlandscape {
        display: none;
    }


    .hamburger {
        display: flex;
    }

    #mainHeader {
        top: 20px;
    }

    .wrapper-1290.pt-72 {
        padding-top: 60px !important;
    }

    .title.fs-56 {
        font-size: 32px !important;
    }

    .subtitle.line-height-1 {
        line-height: 1.5 !important;
    }

    .subtitle,
    .cta-desc {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cta.mt-48 {
        margin-top: 56px !important;
    }

    .cta.fs-32 {
        font-size: 24px !important;
    }

    .cta.mb-3 {
        margin-bottom: 24px !important;
    }

    .contact-box.d-flex {
        display: block !important;
    }

    .contact-item,
    .call-item,
    .email-item {
        margin-bottom: 24px !important;
    }

    .contact-item .text-underline.fs-18,
    .call-item .text-underline.fs-18,
    .email-item .text-underline.fs-18 {
        font-size: 16px !important;
    }

    .content-copy {
        display: none !important;
    }

    .call,
    .email,
    .chat {
        font-size: 20px !important;
    }
    .enquiry-form.py-40{
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .enquiry-form.px-72 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .enquiry-form{
        margin: 0 20px !important;
    }
    .enquiry-form-title.fs-32{
        font-size: 24px !important;
    }
        .enquiry-form-title.mb-32,.your-details.mb-32{
        margin-bottom: 24px !important;
    }
    .your-details.fs-24,.your-requirements.fs-24{
        font-size: 20px !important;
    }
    .input-field.fs-18{
        font-size: 16px !important;
    }
    .mobile-email-input.d-flex,.enquiry-device-input.d-flex{
        display: block !important;
    }
    .mobile-input-group2,.enquiry-device-input .select-wrapper{
        margin-bottom: 24px !important;
    }
    .enquiry-form.mt-48{
        margin-top: 56px !important;
    }
    .your-requirements.my-33{
        margin-top: 24px !important;
        margin-bottom: 20px !important;
    }
    .success-container{
        .check-icon.fs-80{
            font-size: 64px !important;
        }
        .thank-you.fs-24{
            font-size: 20px !important;
        }
        .desc.fs-18{
            font-size: 16px !important;
        }
    }
}