/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

.our-service-box .elementor-cta__content {
    display: flex !important;
    align-items: center ! IMPORTANT;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
}
.our-service-box h4.elementor-cta__title {
    width: fit-content;
    margin: 0 !important;
}
.our-service-box .elementor-cta__description {
    width: fit-content;
    display: flex;
}
.quick-chat h3.elementor-icon-box-title {
    margin-top: 0px;
}
a.step-form-call {
    color: #1F2937;
}
a.step-form-call:hover {
    color: #F1791A;
}


/*------------ Step 1-----------------------*/
.form-wrapper {
  max-width: 1130px;
  margin: auto;
  text-align: center;
}

/* ===== STEPS ===== */
.steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 40px;
    align-items: center;
    width: 65%;
    margin: 0 auto;
}

/* Grey Line */
.steps::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 7%;
  right: 9%;
  height: 2px;
  background: #d3d7dc;
  z-index: 0;
}

/* Active Progress Line */
.progress-line {
  position: absolute;
  top: 20px;
  left: 7%;
  height: 2px;
  background: #0d3b66;
  width: 84% !important;
  z-index: 1;
  transition: 0.4s;
}

/* Step */
.step {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}
h2.step-form-heading {
    font-size: 34px;
    font-weight: 500;
	margin-top:40px;
	margin-bottom:40px;
    color: #1F2937;
}
/* Circle */
.step .circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  line-height: 40px;
  margin: auto;
  font-weight: bold;
}

/* Label */
.step span {
    display: block;
    font-size: 16px;
    margin-top: 8px;
    color: #6c757d;
    font-weight: 600;
}

/* Active Step */
.step.active .circle {
  background: #123158;
  color: #fff;
	font-size:18px;
  font-weight:500;
}

.step.active span {
  color: #0d3b66;
  font-weight: 600;
}

/* ===== CARDS ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;	
}

.card {
    background: #fff;
   
    border-radius: 24px;
    border: 1px solid #D4DBE4;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}
.card i{
    margin-right: 10%;
	color: #F1791A;
	height: 35px;
	width: 35px;
}
.content{
 padding: 50px 21px;	
}
.card:hover {
  border-color: #ff7a18;
}

.card.active {
  border: 2px solid #ff7a18;
  position: relative;
}

/* .card.active::after {
  content: "✔";
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ff7a18;
}
 */

/* Image */
.card img {
    width: 95px;
    height: 95px;
    margin-bottom: 10px;
}

/* Text */
.card p {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: #1F2937;
}
/* Active Card */
.card.active {
  border: 2px solid #ff7a18;
  background: #FFFCF8; /* your color */
  position: relative;
}

/* Icon color change (for PNG use filter) */
.card.active img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(93%) saturate(749%) hue-rotate(349deg) brightness(101%) contrast(101%);
}

/* Text color */
.card.active p {
  color: #ff7a18;
  font-weight: 600;
}


/* Highlight Card */
.highlight {
    background: linear-gradient(135deg, #FF8D32 0%, #A2258B 100%);
    color: #fff;
    border-radius: 24px;
    border: 1px solid #D4DBE4;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    padding: 50px 21px;
}
p.emergency-calling {
    color: #fff;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
}
/* Button */
.btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
}
button.next-btn, button.submit-btn {
    margin-top: 30px;
    padding: 13px 50px;
    background: #F1791A;
    color: #fff;
    border: 1px solid #F1791A;
    border-radius: 100px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}
button.next-btn:hover, button.submit-btn:hover{
    background: transparent;
    color: #4B5563;
    border: 1px solid #4B5563;
}
button.back-btn {
    margin-top: 30px;
    padding: 13px 50px;
    background: transparent;
    color: #4B5563;
    border: 1px solid #4B5563;
    border-radius: 100px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}
button.back-btn:hover {
     background: #F1791A;
     color: #fff;
	 border-color:#F1791A;
}
.step-content {
  display: none;
}

.step-content.active {
  display: block;
}
/*-----------------------------------------*/
/*----Step 2-------------*/
/* Box Container */
.step2-wrapper {
    max-width: 840px;
    margin: auto;
    text-align: center;
}
.box {
    background: #F5F7FA;
    padding: 30px 30px 30px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}
.box label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
    text-align: justify;
    color: #1F2937;
}

/* Grid */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Option Button */
.option {
    padding: 19px 0;
    text-align: center;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    border: 1px solid #ECEDEF;
    font-weight: 400;
    color: #1F2937;
    font-family: 'Inter';
}

/* .option:hover {
  background: #F1791A;
} */

/* Active State (Orange like design) */
.option.active {
  background: #fff;
  border: 2px solid #ff6a00;
  color: #ff6a00;
}

/* Two Column Layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Select */
select {
    width: 100%;
    padding: 19px 20px;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    border: 1px solid #ECEDEF;
    font-weight: 400;
    color: #1F2937;
    font-family: 'Inter';
	margin-bottom:20px;
}
/*-------------------*/

/*-------- Step3-----*/
.option-grid-service {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.option-Urgent {
    padding: 19px 20px;
    text-align: left;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    border: 1px solid #ECEDEF;
    font-weight: 400;
    color: #1F2937;
    font-family: 'Inter';
}
img.urgency-img {
    margin-right: 10px;
}
.box-new {
    margin-top: 40px;
}
textarea.custom-placeholder {
    border: 1px solid #ECEDEF;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Inter';
    padding: 20px 20px 50px 20px;
}
label.upload-label {
    border: 1px solid #DEE1E8;
    background-color: #fff;
    border-radius: 14px;
    padding: 44px 45px;
    font-size: 16px;
    font-weight: 400;
    color: #4B5563;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
/*-------------------*/
/*------------Step 4-----*/
input.input-text {
    width: 100%;
    padding: 19px 20px;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    border: 1px solid #ECEDEF;
    font-weight: 400;
    color: #1F2937;
    font-family: 'Inter';
    margin-bottom: 20px;
}
input.input-eircode {
    width: 50%;
    padding: 19px 20px;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    border: 1px solid #ECEDEF;
    font-weight: 400;
    color: #1F2937;
    font-family: 'Inter';
    margin-bottom: 20px;
    display: block;
}
.option-grid-access {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
/*-------------*/
/*---Step5---*/
/* Phone field */


/* Pills */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
    padding: 16px 40px;
    border-radius: 100px;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    border: 1px solid #ECEDEF;
    font-weight: 500;
    color: #1F2937;
    margin-top: 5px;
}

/* Active pill */
.pill.active {
  background: #fff;
  border: 2px solid #ff6a00;
  color: #ff6a00;
}
/*--------------*/

/*--- Step6 ----*/
.step6-box {
    background: #F5F7FA;
    border-radius: 20px;
    padding: 25px 25px;
    margin-bottom: 16px;
}
.step6-box label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
    text-align: justify;
    color: #1F2937;
}
.review-step {
  max-width: 650px;
  margin: auto;
}

/* Base box */
.review-box {
    background: #fff;
    border-radius: 14px;
    padding: 10px 25px;
    margin-bottom: 16px;
    border: 1px solid #ECEDEF;
}
span.product-type {
    font-size: 14px;
    font-weight: 500;
    color: #4B5563;
    max-width: 110px;
    width: 100%;
    text-align: left;
}
h5.propwety-dearails {
    font-size: 16px;
    text-align: -webkit-auto;
    color: #1F2937;
    font-weight: 600;
}

/* Service */
.service-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-icon {
  width: 60px;
}

.service-name {
  color: #ff6a00;
  font-weight: 600;
}

.check-icon {
  color: #22c55e;
  font-size: 18px;
}

/* Grid */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Titles */
.review-box h5 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #374151;
}

/* Row */
.review-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  color: #6b7280;
}


/* Header boxes (dark strip) */
.header-box {
  padding-top: 0;
}

.header {
    background: #1f3a5f;
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 600;
}
.review-row-contact {
    display: flex;
    font-size: 13px;
    padding: 6px 0;
    color: #6b7280;
    gap: 10rem;
}
label.agree-text {
    font-size: 14px;
    color: #1F2937;
    font-weight: 400;
    line-height: 20px;
    width: 85%;
    margin-left: 7px;
}
input#agree {
    width: 19px;
    height: 19px;
}
strong.product-details {
    color: #1F2937;
    font-size: 14px;
    font-weight: 700;
}
.review-box-details {
    background: #fff;
    border-radius: 14px 14px 0px 0px;
    margin-bottom: 16px;
    border: 1px solid #ECEDEF;
}
.contact-box {
    background: #fff;
    border-radius: 14px;
    padding: 10px 25px;
}
/* Agreement */
.agree {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.agree input {
  margin-top: 3px;
}
/*----------*/
/* thanku page*/
/* Full screen center */
.success-screen {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2.thanku-heading {
    font-size: 40px;
    font-weight: 600;
    color: #1F2937;
    font-family: 'Inter';
}
p.thanku-text {
    font-size: 24px;
    color: #4B5563;
    font-weight: 400;
    line-height: 34px;
    width: 55%;
    margin: 0 auto;
}
.thanku-btnnew {
    margin-top: 59px;
}
/* Icon */
.success-icon {
  width: 236px;
  margin-bottom: 20px;
}


/* Reference ID */
.ref-id {
    display: inline-block;
    padding: 8px 48px;
    border-radius: 10px;
    background: #D9EAFF;
    font-weight: 600;
    margin-bottom: 40px;
    border: 2px solid #123158;
    font-size: 30px;
    color: #123158;
    margin-top: 30px;
}
a.continue-beowsing {
    padding: 13px 50px;
    background: #F1791A;
    color: #fff;
    border: 1px solid #F1791A;
    border-radius: 100px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}
a.continue-beowsing:hoer {
   background: transparent;
    color: #4B5563;
    border: 1px solid #4B5563;
}
.preview-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.preview-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
}
.preview-wrapper {
  position: relative;
}

.remove-img {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
  cursor: pointer;
}
.service-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.service-row-img {
  width: 40px;
  margin-right: 10px;
}

.service-row-name {
  flex: 1;
  font-weight: 500;
}

.service-row-tick {
  width: 18px;
}
/*----*/
.booking-box-active i.fa-solid.fa-circle-check.selected-icon {
    position: absolute;
    right: -16px;
    top: 12px;
    font-size: 27px;
    color: #F1791A;
}
.card.highlight img {
    margin-top: 40px;
}

.error-msg-service, .error-msg-property, .error-msg-roof, .error-msg{
	color: red;
	font-size: 14px;
margin: 10px 0px 0px 0px;
	border: 1px solid red;
	padding: 10px 5px;
	border-radius: 8px;
}
.option-Urgent.active {
    background: #fff;
    border: 2px solid #ff6a00 !important;
    color: #ff6a00 !important;
}
.box-new.uplaods {
    display: block;
    font-weight: 600;
    font-size: 16px;
    text-align: justify;
    color: #1F2937;
    background: #F5F7FA;
    padding: 30px 30px 30px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}
.box-new.uplaods label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    text-align: justify;
    color: #1F2937;
    margin-bottom: 15px;
}
.upload-box label {
    text-align: center !important;
}
.box-new.urgency {
    display: block;
    font-weight: 600;
    font-size: 16px;
    text-align: justify;
    color: #1F2937;
    background: #F5F7FA;
    padding: 30px 30px 30px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}
.box-new.urgency label {
    margin-bottom: 15px;
}
.box-new.budget {
    display: block;
    font-weight: 600;
    font-size: 16px;
    text-align: justify;
    color: #1F2937;
    background: #F5F7FA;
    padding: 30px 30px 30px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}
.box-new.budget label {
    margin-bottom: 15px;
}
.iti {
    display: flex;
}
button.submit-btn {
    margin-top: 30px;
    padding: 13px 50px;
    background: #F1791A;
    color: #fff;
    border: 1px solid #F1791A;
    border-radius: 100px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}
select:focus {
    border-color: #ff6a00;
}
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
	.content {
    padding: 20px 20px;
}
	.card img {
    width: 70px;
    height: 70px;
}
	.card p {
    font-size: 15px;
}
	.steps {
    width: 100%;
}
	.step span {
    font-size: 12px;
}
	.card.highlight img {
    margin-top: 20px;
}
	.option-grid {;
    grid-template-columns: repeat(1, 1fr);
}
	.two-col {
    grid-template-columns: auto;
}
	.option-grid-service {
    grid-template-columns: auto;
}
	input.input-eircode {
    width: 100%;
}
	.option-grid-access {
    grid-template-columns: auto;
}
	.pill {
    width: 100%;
}
	.review-grid {
    grid-template-columns: auto;
}
	.review-row-contact {
    gap: 0rem;
}

	.success-icon {
    width: 100px;
    margin-bottom: 20px;
}
	h2.thanku-heading {
    font-size: 20px;
}
	p.thanku-text {
    font-size: 16px;
    color: #4B5563;
    font-weight: 400;
    line-height: 25px;
    width: 100%;
    margin: 0 auto;
}
	.success-screen {
    height: 75vh;
}
	button.submit-btn {
    padding: 13px 21px;
    font-size: 14px;
}
	.highlight {
    padding: 20px;
}
.highlight img {
    width: 70px;
}
	p.emergency-calling {
    font-size: 13px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
}
}