/* * @copyright Copyright (C) 2025 Dynamowebs Private Limited. All rights reserved. * @license Proprietary and Confidential. Unauthorized copying, distribution, or modification * via any medium is strictly prohibited. * @author Faisal mehmood awan | Imran Khan * @file utr-forms-hero-banner.css * @modified 11/28/25, 12:12 PM * @package Dynamowebs * * This file contains proprietary information of Dynamowebs Private Limited. * No part of this file may be reproduced, distributed, or transmitted in any * form or by any means without the express written permission of Dynamowebs. * * @link https://www.dynamowebs.com * @github https://github.com/FaisalCloudEngineer * */ .utr-form-banner-top-ribbon { width: 100%; height: 100%; max-height: 50px; background-color: #fcf0db; } .utr-form-banner-top-ribbon-row { justify-content: center; text-align: center; padding-top: 12px; padding-bottom: 12px; } .utr-form-banner-top-ribbon-title { font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; letter-spacing: -0.08px; text-align: center; color: #0f0f0f; padding-top: 12px; padding-bottom: 12px; } html .utr-form-hero-banner .container { max-width: 1320px;} html .utr-form-hero-banner label.error, p.error { color: #e24646 !important; font-weight: 600 !important; font-size: 12px !important; border: transparent !important; margin: 0px !important; padding: 0px !important; } .module-utr-form-v2-step-1 .phone-label { margin-left: 30px; position: absolute; top: 18px; left: 9px; font-size: 16px; color: #7a757d; font-weight: 600; } .utr-form-hero-banner { background-color: #ddf0ff; position: relative; overflow: visible; /* ensures the form doesn't get hidden */ } .utr-form-hero-banner-inner { padding: 50px 0px 54px 0px; } .need-a-utr-number { margin-top: 0px; font-size: 46px; font-weight: 700; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.15px; text-align: left; color: #1b75bc; margin-bottom: 15px !important; } .get-a-hmrc-utr { font-size: 24px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.42; letter-spacing: -0.13px; text-align: left; color: #040404; } .utr-features li { display: flex; align-items: center; margin-bottom: 15px; font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: -0.08px; text-align: left; color: #040404; } .utr-features li img { width: 25px; height: 25px; margin-right: 10px; } .utr-form-banner-form {display: flex;justify-content: end;position: relative;} .utr-form-box { top: -10px; min-height: 423px; /* Adjust based on your form's content */ position: absolute; z-index: 2; border-radius: 10px; padding: 22px 22px 0px 22px; width: 100%; max-width: 423px; border-radius: 16px; box-shadow: 0 0 24px 0 #abcfea; background-color: #f2f5fb; } .lets-get-started { text-align: center; color: #040404 !important; font-size: 18px; font-weight: 600; letter-spacing: -0.15px; } html .utr-form-box .form-group { margin-bottom: 10px; } html .utr-form-box .form-control, html .utr-form-box .form-select, html .utr-form-box .campaign-modals div input:not([type='submit']):not([type='radio']), html .utr-form-box .infusion-form input:not([type=submit]):not([type=radio]), html .utr-form-box .select2-selection, html .utr-form-box form select, html .utr-form-box form select, html .utr-form-box select.form-control { height: 56px !important; font-size: 16px !important; gap: 10px; padding: 10px 20px !important; border-radius: 8px !important; border: solid 1px #c8d9f1 !important; background-color: #fff !important; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; box-shadow: none !important; margin-bottom: 0px !important; } html form #step-1-form-utr select { appearance: none; -webkit-appearance: none; background: url('../../images/module-utr-form/arrow-down.png') right 10px center !important; background-repeat: no-repeat !important; padding-right: 30px; background-size: 12px; background-color: #ffffff !important; } html form #step-1-form-utr input:focus, html form #step-1-form-utr select:focus { border: solid 1px #37bbf0 !important; } html form #step-1-form-utr select option { } .utr-form-banner-form-Phone { padding: 0px 0px 0px 49px !important; } html .module-utr-form-v2-step-1 .tax2-btn-blue { border-radius: 28px; border: 1px solid #01b0f5; background-color: #00aeef; background-image: none; } .module-utr-form-v2-step-1 .tax2-btn-blue.disabled, .module-utr-form-v2-step-1 .tax2-btn-blue:disabled { background-color: #00aeef8c; opacity: 0.6; } html .module-utr-form-v2-step-1 .text2u-form-btn, .text2u-form-btn:hover { box-shadow: none; height: auto; padding: 16px 0px; width: 100%; max-height: 56px; max-width: 363px !important; font-size: 16px; color: white; } html .utr-form-hero-banner label.error, p.error { position: relative; top: 4px; left: 3%; } .utr-features { padding: 0px; } .self-assessment-forms-button { height: 56px; width: 100%; max-height: 56px; max-width: 390px; font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #fff; align-self: stretch; border-radius: 100px; border: none; box-shadow: none !important; background-color: #00aeef; margin-top: 8px; } .self-assessment-forms-button.disabled, .self-assessment-forms-button:disabled { background-color: #64c9ee; } .cis-forms-button { height: 56px;width: 100%;max-height: 56px;max-width: 390px;font-size: 16px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #fff;align-self: stretch;border-radius: 100px;border: none;box-shadow: none !important;background-color: #00aeef; margin-top: 8px; } .cis-forms-button.disabled,.cis-forms-button:disabled {background-color: #64c9ee;} @media only screen and (max-width: 1200px) { .need-a-utr-number { font-size: 30px; } .get-a-hmrc-utr { font-size: 21px; } } @media only screen and (max-width: 992px) {} @media only screen and (max-width: 768px) { .utr-form-banner-content { text-align: center; } .utr-form-hero-banner-inner { margin-bottom: 20px; padding: 30px 0px 54px 0px; } .utr-form-box { padding: 22px 22px 0px 22px; position: unset; max-width: 100%; } .utr-form-banner-form { padding: 0; } .need-a-utr-number { font-size: 28px; } .get-a-hmrc-utr { font-size: 18px; } .utr-features { padding: 40px; } } @media only screen and (max-width: 580px) { .utr-features { padding-top: 15px; padding-bottom: 15px; } .utr-form-banner-top-ribbon { max-height: 70px; } } @media only screen and (max-width: 480px) { .utr-form-hero-banner-inner { padding: 0px 0px 20px 0px; } .need-a-utr-number { font-size: 28px; text-align: center; } .get-a-hmrc-utr { margin-bottom: 20px; text-align: center; } .utr-features li img { margin-right: 18px; } html .utr-form-hero-banner label.error, p.error { position: relative !important; top: 4px !important; left: 3% !important; } .utr-form-tip-widget { padding-top: 30px; } } @media only screen and (max-width: 420px) {}