/* Foundation */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #222;
}

h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: #222;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: #222;
}

p {
  margin-bottom: 16px;
  color: #555;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
}
/*######## Foundatoin ###*/

/*######### Hero ##############*/

.hero .container {
    width: 100%;
    max-width: none;
}

.hero {
    position: relative;
    background-color: #F5F6F8;
}

.hero_wrapper {
    position: relative;
    display: flex;
    min-height: 560px;
    overflow: hidden;
    background-color: #031B35;
    padding-bottom: 70px;
}

.hero_content {
    position: relative;
    z-index: 3;
    width: 56%;
    padding: 15px 0 30px 100px;;
}

.hero_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size: 13px;
}

.hero_badge i {
    color: #F4B93A;
}

.hero_text {
    max-width: 580px;
}

.hero_text h1 {
    margin: 0 0 14px;
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
}

.hero_gradient {
    background: linear-gradient(
        90deg,
        #FFFFFF 0%,
        #B9DCFF 35%,
        #65B5FF 70%,
        #FFFFFF 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero_text p {
    max-width: 500px;
    margin: 0 0 24px;
    color: #D3DAE3;
    font-size: 18px;
}

.hero_tabs {
    display: flex;
    max-width: 500px;
    margin-bottom: 28px;
}

.hero_service {
    flex: 1;
}

.hero_service h2 {
    margin: 0;
    padding: 8px 16px;
    font-size: 17px;
    font-weight: 600;
}

.hero_service h2 i {
    margin-right: 8px;
}

.hero_service-repair h2 {
    background-color: #0055AA;
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
}

.hero_service-installation h2 {
    background-color: #FFFFFF;
    color: #253043;
    border-radius: 8px 8px 0 0;
}

.hero_service ul {
    list-style: none;
    margin: 0;
    padding: 12px 18px 16px;
    border: 1px solid #0055AA;
    color: #DEDFE2;
    background: #031B35;
    border-radius: 0 0 8px 8px;
}

.hero_service li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hero_service li i {
    flex-shrink: 0;
}

.hero_service li {
    margin-bottom: 4px;
    font-size: 14px;
}

.hero_service li:last-child {
    margin-bottom: 0;
}

.hero_service li i {
    margin-right: 8px;
}

.hero_service-installation {
    margin-left: -12px;
    margin-top: -1px;
}

/*.hero_actions {
    width: 230px;
    margin-bottom: 30px;
    margin-top: -45px;
}
*/
.hero_actions .button {
  display: none;
    /*display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-radius: 7px;
    background-color: #0055AA;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;*/
}

.hero_availability {
    display: flex;
    align-items: center;
    gap: 30px;
    color: #FFFFFF;
}

.availability_item {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
    font-size: 12px;
}

.availability_item i {
    font-size: 28px;
    margin-top: -5px;
    color: #1689E8;
}

.availability_item:not(:first-child) {
    border-left: 1px solid #174B6B;
    padding-left: 30px;
}

.hero_star-availability {
    color: #F4B93A;
    font-size: 14px;
}

.hero_availability p {
    margin: 0 0 2px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
}

.hero_availability small {
    color: #D3DAE3;
    font-size: 11px;
}

.hero_image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.hero_image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
}


/*------- Contact ------------*/

.contact {
  position:relative;
  z-index: 10;
  margin-top: -90px;
}

.contact > .container {
    border-radius: 10px 10px 0 0;
}

.container {
  background:#F5F6F8;;
}

.contact-heading {
  padding-top: 10px;
  text-align: center;
}

.contact-heading h2 {
  margin-bottom: 0px;
  line-height: 1;
  font-size: 20px;
  font-weight: 600;
  color: #0B2341;
}

.contact-heading p {
  margin-bottom: 0px;
  font-size: 12px;
  color: #6B7280;
}

.contact_services {
  padding-top: 15px;
  background-color: #FEFEFE;
  border: 1px solid #E5E7EB;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

.contact_tabs {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contact_tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  height: 40px;
  border: none;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0B2341;
  cursor: pointer;
  transition: 0.2s;
}

.contact_tab i {
  font-size: 14px;
}

.contact_tab-active {
  background-color: #005bbb;
  color: #ffffff;
}

.contact_tab:hover:not(.contact_tab-active){
  background-color: #f5f7fa;
}


.contact_form {
  padding: 30px;
  border-radius: 8px;
  padding-top: 5px;
}

.contact_form-content {
  margin: 20px;
  margin-right: 100px;
  margin-top: 10px;
}

.form_group {
  margin-bottom: 20px;
}

.form_group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #0B2341;
}

.form_group input,
.form_group select,
.form_group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    color: #0B2341;
    transition: border-color 0.2s ease;
}

.form_group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.contact_form button {
  border: none;
}

.form_group input:focus,
.form_group select:focus,
.form_group textarea:focus {
    outline: none;
    border-color: #005BBB;
}



.form_group-upload input[type="file"] {
    width: 100%;
    padding: 24px 16px;
    border: 2px dashed #B8C2CC;
    border-radius: 8px;
    background: #F8FAFC;
    cursor: pointer;
    transition: 0.2s ease;
    color: transparent;

}

.form_group-upload input[type="file"]:hover {
    border-color: #005BBB;
    background: #F2F7FD;
}

.form_group-upload input::file-selector-button {
    background: #005BBB;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    margin-right: 12px;
    cursor: pointer;
    display: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 90px;
    border: 2px dashed #C9D1DB;
    border-radius: 8px;
    background: #FBFCFD;
}

.form_group-upload {
    display: flex;
    flex-direction: column;
}

.upload_box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 120px;
    border: 2px dashed #C9D1DB;
    border-radius: 8px;
    background: #FBFCFD;

    overflow: hidden;
}

.upload_box input[type="file"] {
    position: absolute;
    inset: 0;

    opacity: 0;
    cursor: pointer;
}

.upload_box i {
    color: #0B2341;
    font-size: 30px;
    margin-bottom: 6px;
}

.upload_title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0B2341;
    text-align: center;
}

.upload_box small {
    color: #6B7280;
    font-size: 11px;
}
.contact_form .button {
  margin-top: 20px;
}

.contact_form .button:hover {
  background-color: #0056b3;
}

.form_group input::placeholder,
.form_group textarea::placeholder {
  color: #999;
}

.form_group input[type="file"] {
  border: none;
  padding: 8px;
}

.contact_form .button {
  width: 100%;
}

.contact_form .button:hover {
  background-color: #0056b3;
}

.contact_form .button:active {
  transform: scale(0.98);
}

.form_row{
    display:flex;
    gap: 20px;
}

.form_row-contact .form_group{
    flex:1;
}


.form_group-postcode{
    flex:1;
}

.form_group-address{
    flex:2;
}

.form_row-brand .form_group {
  flex: 1;
}

.form_row-error .form_group {
  flex: 1;
}

.contact_help {
    background: #0B2341;
    color: #ffffff;
    padding: 14px 16px;
    border-radius: 8px;
    min-height: 95px;

    display: flex;
    align-items: center;
}

.contact_help p {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
}

.contact_help {
    position: relative;
}

.contact_help::before {
    content: "";
    position: absolute;

    left: -7px;
    top: 50%;

    transform: translateY(-50%) rotate(45deg);

    width: 14px;
    height: 14px;

    background: #0B2341;
}
.contact_info {
    margin-top: 20px;
    padding: 10px 20px;
    background: #EAF3FF;
    border-left: 4px solid #005BBB;
    border-radius: 8px;
}

.contact_info p {
    margin: 0;
    color: #0B2341;
}

.contact_form .button,
.installation_form .button {
    display: block;
    width: 280px;
    height: 48px;

    margin: 24px auto 0;

    border: none;
    border-radius: 8px;

    background: #005BBB;
    color: #FFFFFF;

    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;

    cursor: pointer;
    transition: background 0.2s ease;
}

.contact_form .button:hover,
.installation_form .button:hover 
{
    background: #004A96;
}

.contact_form .button:active {
    transform: scale(0.98);
}
/*################## Contact ###########*/

/*--- Why choose us----*/

.why_choose {
  margin-top: 20px;
}

.why_choose_wrapper {
  text-align: center;
}

.why_choose h2 {
  margin-bottom: 50px;
}

.why_choose_content {
  width: fit-content;
  text-align: center;
}
.why_choose_list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 14px 30px;
  background: #fefefe;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

.why_choose_item i {
    font-size: 28px;
    color: #005BBB;
    margin-bottom: 12px;
}
.why_choose_item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.why_choose_item h3 {
  font-size: 16px;
  margin-bottom: 0px;
  font-weight: 600;
  text-align: center;
  max-width: 110px;
  line-height: 1.6;
}

.why_choose_item.clear_pricing h3 {
    max-width: 60px;
}
.why_choose_item:hover {
  border-color: #bdbdbd;
}


/*############### Why choose us */

/*--------- Reviews -----*/

.reviews {
  padding: 80px 0;
  display: none;
}

.reviews_wrapper {
  text-align: center;
}

.reviews h2 {
  margin-bottom: 50px;
}

.reviews_list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}

.reviews_item:hover {
  border-color: #bdbdbd;
}
.reviews_item {
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.reviews_item p:first-child {
  font-size: 22px;
  margin-bottom: 15px;
}

.reviews_item p:nth-child(2){
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.reviews_item h3 {
  font-size: 18px;
}

/*############# Reviews ###########*/

/*--------- Service Area ----------*/

.service_areas {
  margin-top: 20px;
}

.service_areas_wrapper {
  text-align: center;
  background-color: #fefefe;
  padding-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.service_areas h2 {
  margin-bottom: 0px;
}

.service_areas_wrapper > p:first-of-type {
  color: #666;
  margin-bottom: 40px;
}

.service_areas_list {
  padding: 0px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 35px;
}

.service_area_item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #E5E7EB;
  padding: 18px;
  background: #FEFEFE;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service_area_item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.service_area_item i {
  color: #005BBB;
  font-size: 18px;
}

.service_area_item p {
  margin: 0;
  font-weight: 600;
}

.service_area_note {
  margin: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #D6E4F2;
  border-left: 4px solid #005BBB;
  padding: 18px 20px;
  background: #FEFEFE;
  border-radius: 10px;
}

.service_area_note i {
  color: #005BBB;
  font-size: 18px;
}

.service_area_note p {
  margin: 0;
  color: #666;
}

/*######### Service Area ##########*/

/*------ Brands -------*/

.brands {
  margin-top: 20px;
}

.brands_wrapper {
  text-align: center;
  background-color: #FEFEFE;
  padding-bottom: 20px;
  border-radius: 10px;

}

.brands_heading {
  margin-bottom: 40px;
}

.brands_heading h2,
.brands_heading p {
  margin-bottom: 0;
}

.brands_heading p {
  color: #666;
}

.brands_content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 20px;
}

.brands_left {
  flex: 3;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brands_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 35px;
}

.brand_item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 15px;
  background: #FEFEFE;
  border: 1px solid #E5E7EB;
  border-radius: 10px;

  transition: box-shadow 0.2s ease;
}

.brand_item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.brand_item img {
    display: none;
}

.brand_item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.brand_item span {
  font-size: 15px;
  font-weight: 500;
}

.brands_note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 18px 20px;
  background: #FEFEFE;

  border: 1px solid #D6E4F2;
  border-left: 4px solid #005BBB;
  border-radius: 10px;
}

.brands_note i {
    color: #005BBB;
    font-size: 18px;
}

.brands_note p {
    margin: 0;
    color: #666;
}
.brands_notice {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;

  text-align: left;
  padding: 10px 20px;
  background: #F7FAFF;

  border: 1px solid #E5E7EB;
  border-radius: 10px;
}

.brands_notice_item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brands_notice_item i {
  font-size: 18px;
  color: #6B7280;
}

.brands_notice_item p {
  margin: 0;

  font-size: 15px;
  line-height: 1.5;
  color: #444;
}

/*############ Brands ########*/

/*------------- FAQ --------*/

/*------ FAQ -------*/

.faq {
  margin-top: 20px;
}

.faq_wrapper {
  background: #FEFEFE;
  padding-bottom: 20px;
  text-align: center;
  border-radius: 10px;
}

.faq_heading {
  margin-bottom: 40px;
}

.faq_heading h2 {
  margin-bottom: 0;
}

.faq_list {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq_item {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
}

.faq_question {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 30px;
  cursor: pointer;
}

.faq_question h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}

.faq_question i {
  font-size: 18px;
  color: #005BBB;
  flex-shrink: 0;
}

.faq_answer {
  display: none;
  padding: 0 20px 20px;
}

.faq_answer p {
  margin: 0;
  text-align: left;
  color: #666;
  line-height: 1.6;
}

/*############ FAQ ########*/

/*------ Footer -------*/

footer {
  background: #0B2341;
}

footer .container {
  background: #0B2341;
}

.footer_wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  margin-top: 10px;
  padding: 10px 20px;
}

.footer_left h2 {
  margin: 0;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
}

.footer_right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer_right p {
  margin: 0;
  color: #C9D1DB;
}

.footer_right a {
  color: #FFFFFF;
  text-decoration: none;
}

.footer_right a:hover {
  text-decoration: underline;
}

/*############ Footer ########*/



/*==================================================
  Tablet - 913px to 1024px
==================================================*/

@media (min-width: 913px) and (max-width: 1024px) {

    /*------- Contact ------------*/

    .contact_form-content {
        margin-right: 20px;
    }

    .form_row-contact .form_group-name {
        flex: 0.8;
    }

    .form_row-contact .form_group-phone {
        flex: 0.9;
    }

    .form_row-contact .form_group-email {
        flex: 1.3;
    }

    .form_row-error .form_group-error-code {
        flex: 0.9;
    }

    .form_row-error .form_group-fault {
        flex: 1.3;
    }

    .form_row-error .form_group-upload {
        flex: 0.8;
    }

    .upload_title {
        text-align: center;
        line-height: 1.4;
        padding: 0 8px;
    }

    /*################## Contact ###########*/
}

/*================ End Tablet 913px - 1024px ================*/



/*==================================================
  Tablet - 854px to 912px
==================================================*/

@media (min-width: 854px) and (max-width: 912px) {

    /*------- Hero ------------*/

    .hero_content {
        padding-left: 70px;
        padding-top: 20px;
    }

    .hero_text h1 {
        font-size: 40px;
        margin-bottom: 45px;
    }

    .hero_text p {
        display: none;
    }

    .hero_service h2 {
        font-size: 16px;
    }

    .hero_service li {
        font-size: 14px;
    }

    .hero_availability {
        display: none;
    }

    .hero_badge {
        font-size: 14px;
        margin-bottom: 40px;
    }

    /*################## Hero ###########*/


    /*------- Contact ------------*/

    .contact_form-content {
        margin-right: 20px;
    }

    .form_group-email {
        margin-top: -20px;
    }

    .form_row-contact,
    .form_row-brand,
    .form_row-error {
        flex-wrap: wrap;
    }

    .form_row-contact .form_group-email,
    .form_row-brand .form_group-brand,
    .form_row-error .form_group-error-code {
        flex: 0 0 100%;
    }

    .form_row-brand .form_group-model,
    .form_row-brand .form_group-help-note {
        flex: 1;
    }

    .form_row-error .form_group-fault {
        flex: 1.25;
    }

    .form_row-error .form_group-upload {
        flex: 0.75;
    }

    /*################## Contact ###########*/
}

/*================ End Tablet 854px - 912px ================*/



/*==================================================
  Tablet - 768px to 853px
==================================================*/

@media (min-width: 768px) and (max-width: 853px) {

    /*------- Hero ------------*/

    .hero_content {
        padding-left: 70px;
        padding-top: 20px;
    }

    .hero_text h1 {
        font-size: 36px;
        margin-bottom: 45px;
    }

    .hero_text p {
        display: none;
    }

    .hero_service h2 {
        font-size: 16px;
    }

    .hero_service li {
        font-size: 14px;
    }

    .hero_availability {
        display: none;
    }

    .hero_badge {
        font-size: 14px;
        margin-bottom: 40px;
    }

    /*################## Hero ###########*/


    /*------- Contact ------------*/

    .contact_form-content {
        margin-right: 20px;
    }

    .form_group-email {
        margin-top: -20px;
    }

    .form_row-contact,
    .form_row-brand,
    .form_row-error {
        flex-wrap: wrap;
    }

    .form_row-contact .form_group-email,
    .form_row-brand .form_group-brand,
    .form_row-error .form_group-error-code {
        flex: 0 0 100%;
    }

    .form_row-brand .form_group-model,
    .form_row-brand .form_group-help-note {
        flex: 1;
    }

    .form_row-error .form_group-fault {
        flex: 1.25;
    }

    .form_row-error .form_group-upload {
        flex: 0.75;
    }

    /*################## Contact ###########*/
}

/*================ End Tablet 768px - 853px ================*/



/*==================================================
  Mobile Base - 767px and below
==================================================*/

@media (max-width: 767px) {

    /*------- Hero ------------*/

    .hero_wrapper {
        display: block;
        min-height: auto;
        padding-bottom: 0;
    }

    .hero_content {
        width: 100%;
        padding: 30px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .hero_image {
        display: none;
    }

    .hero_text {
        max-width: none;
        order: 1;
    }

    .hero_text p {
        display: none;
    }

    .hero_text h1 {
        font-size: 36px;
        padding: 0;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
    }

    .hero_tabs {
        width: 90%;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        order: 2;
    }

    .hero_service h2 {
        padding: 10px 12px;
        font-size: 16px;
    }

    .hero_service ul {
        padding: 12px 10px 16px;
    }

    .hero_badge {
        padding: 6px 12px;
        font-size: 12px;
        margin-top: 30px;
        margin-bottom: 0;
        align-self: center;
        order: 3;
    }

    .hero_availability {
        display: none;
    }

    /*################## Hero ###########*/


    /*------- Contact ------------*/

    .contact {
        margin-top: 0;
    }

    .contact > .container {
        width: 100%;
        border-radius: 0;
    }

    .contact_services {
        padding-top: 15px;
        border-radius: 0;
    }

    .contact_tabs {
        width: calc(100% - 40px);
    }

    .contact_tab {
        flex: 1;
        min-width: 0;
        height: 44px;
    }

    .contact_form,
    .installation_form {
        padding: 20px;
    }

    .contact_form-content {
        margin: 0;
    }

    .form_row {
        flex-direction: column;
        gap: 0;
    }

    .form_group {
        width: 100%;
        margin-bottom: 16px;
    }

    .form_group label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .form_group input,
    .form_group select,
    .form_group textarea {
        box-sizing: border-box;
        font-size: 14px;
    }

    .form_group-postcode,
    .form_group-address {
        flex: none;
    }

    .form_row-brand .form_group,
    .form_row-error .form_group {
        flex: none;
    }

    .contact_help {
        min-height: auto;
    }

    /* Arrow points up toward Model Number */
.contact_help::before {
    width: 16px;
    display: block;
    left: 50px;
    top: -5px;
    transform: rotate(45deg);
}

    .contact_info {
        margin-top: 0;
        padding: 12px 14px;
    }

    .contact_form .button,
    .installation_form .button {
        width: 100%;
        height: 48px;
        margin-top: 20px;
    }

    /*################## Contact ###########*/


    /*------- Service Areas ------------*/

    .service_areas_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .service_area_item {
        padding: 14px 8px;
    }

    /*################## Service Areas ###########*/


    /*------- Brands ------------*/

    .brands_content {
        flex-direction: column;
    }

    .brands_left {
        width: 100%;
    }

    .brands_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .brands_notice {
        width: 100%;
        box-sizing: border-box;
    }

    /*################## Brands ###########*/
}

/*================ End Mobile Base - 767px and below ================*/



/*==================================================
  Mobile - 519px and below
==================================================*/

@media (max-width: 519px) {

    /*------- Hero ------------*/

    .hero_content {
        padding: 20px 20px 30px;
    }

    .hero_text h1 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .hero_tabs {
        width: 90%;
        max-width: 380px;
    }

    .hero_service-repair ul {
        padding-right: 20px;
    }

    .hero_service li {
        margin-bottom: 8px;
    }

    /*################## Hero ###########*/


    /*------- Why Choose Us ------------*/

    .why_choose {
        margin-top: 20px;
    }

    .why_choose_list {
        justify-content: center;
        gap: 40px 20px;
        padding: 20px;
    }

    .why_choose_item {
        flex: 0 0 calc(33.333% - 14px);
    }

    .why_choose_item:nth-child(4),
    .why_choose_item:nth-child(5) {
        flex-basis: calc(50% - 10px);
    }

    /*################## Why Choose Us ###########*/


    /*------- Footer ------------*/

    .footer_wrapper {
        justify-content: space-around;
        font-size: 12px;
    }

    /*################## Footer ###########*/
}

/*================ End Mobile - 519px and below ================*/



/*==================================================
  Small Mobile - 389px and below
==================================================*/

@media (max-width: 389px) {

    /*------- Hero ------------*/

    .hero_tabs {
        width: 95%;
    }

    /*################## Hero ###########*/
}

/*================ End Small Mobile - 389px and below ================*/



/*==================================================
  Very Small Mobile - 344px and below
==================================================*/

@media (max-width: 344px) {

    /*------- Hero ------------*/

    .hero_text h1 {
        font-size: 28px;
    }

    .hero_service li {
        margin-bottom: 5px;
    }

    /*################## Hero ###########*/
}

/*================ End Very Small Mobile - 344px and below ================*/


.form_error {
    display: block;
    color: #DC2626;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

/* ---------- Invalid Form Field ---------- */

.input_error {
    border-color: #DC2626 !important;
}


/* Hide the real file input */
.upload_click_area input[type="file"] {
    display: none;
}

/* Only this area opens the file picker */
.upload_click_area {
    cursor: pointer;
}

.photo_preview button {
    cursor: pointer;
}

#brand-suggestions div,
#model-suggestions div,
#error-suggestions div {
    cursor: pointer;
}

#brand-suggestions div.active,
#model-suggestions div.active,
#error-suggestions div.active {
    background: #e5e7eb;
}

#brand-suggestions div:hover,
#model-suggestions div:hover,
#error-suggestions div:hover {
    background: #e5e7eb;
}



/* ---------- Thank You Page ---------- */

.thank_you {
    min-height: 100vh;
    background: #F5F6F8;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.thank_you_card {
    width: 100%;
    max-width: 650px;
    background: #FEFEFE;
    padding: 80px 150px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.thank_you_icon {
    font-size: 36px;
    margin-bottom: 20px;
}

.thank_you_card h1 {
    color: #0B2341;
    margin-bottom: 15px;
}

.thank_you_card p {
    color: #6B7280;
    margin-bottom: 30px;
}

.thank_you_button {
    display: inline-block;
    background: #005BBB;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
}

@media (max-width: 600px) {

    .thank_you {
        padding: 20px;
    }

    .thank_you_card {
        padding: 60px 25px;
    }

    .thank_you_card h1 {
        font-size: 26px;
    }
}