/*
Theme Name: New Theme
Author: Pawan Designer
Version: 1.0
Description: A lightweight, minimal theme crafted for Elementor. Ambient aesthetics bring clarity and style, ensuring responsive layouts, simple customization, SEO-friendly design, and smooth user experience. Ideal for startups, agencies, and creative websites.
*/

:root {
    --theme-color1: #0f0f0f;
    --theme-color2: #0066cc;
    --theme-color3: #f3f3f3;
    --theme-color4: #2183e6;
    --white: #fff;
    --theme-color5: #f7cf27;
}

/* ==== Global Page Rules ==== */
body.page-template-refinance-page-template .ace-header,
body.page-template-purchage-page-template .ace-header,
body.page-template-refinance-page-template .main-footer,
body.page-template-purchage-page-template .main-footer,
body.page-template-refinance-page-template .copy-right-footer,
body.page-template-purchage-page-template .copy-right-footer {
  display: none;
}

body.page-template-refinance-page-template div#logo,
body.page-template-purchage-page-template div#logo {
  display: flex;
  margin: auto;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #cecece;
}

body.page-template-refinance-page-template div#logo img,
body.page-template-purchage-page-template div#logo img {
  max-height: 70px;
}

/* ==== Common Form Styling (#refinance + #purchase) ==== */
#refinance, 
#purchase {
  background-color: #fff;
  margin: 0 auto;
  padding: 40px 0;
  width: 100%;
  font-family: var(--font-primary);
}

#refinance .field input,
#purchase .field input {
  padding: 24px 8px;
  border-radius: 7px;
  border: 1px solid #808080ba;
}

#refinance .tab h4, 
#purchase .tab h4 {
  font-size: 26px;
  text-align: center;
  font-weight: 600;
  font-family: var(--font-primary);
  margin: 0 auto 20px;
}

#refinance .tab p, 
#purchase .tab p {
  font-size: 16px;
  color: #222;
  text-transform: capitalize;
  text-align: center;
}

/* Input Fields */
#refinance input.label-input,
#purchase input.label-input {
  display: block;
  width: 100%;
  padding: 8px 20px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: #fff;
  line-height: 28px;
  outline: none;
  box-shadow: none !important;
}

/* Radio Buttons */
#refinance input[type="radio"], 
#purchase input[type="radio"] {
  display: none; /* Hide default */
}

#refinance label.radio-label, 
#purchase label.radio-label {
  display: block;
  padding: 15px 20px;
  margin: 14px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  line-height: 28px;
}

#refinance label.radio-label:hover,
#purchase label.radio-label:hover {
  background-color: #f1f1f1;
}

#refinance input[type="radio"]:checked + label.radio-label,
#purchase input[type="radio"]:checked + label.radio-label {
  border-color: #04AA6D;
  background-color: #e6fff2;
  font-weight: bold;
  color: #04AA6D;
}

#refinance label.label-text, 
#purchase label.label-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
  color: #000;
}

/* Validation */
#refinance input.invalid, 
#purchase input.invalid {
  background-color: #ffdddd;
}

/* Hide steps by default */
#refinance .tab, 
#purchase .tab {
  display: none;
}

/* Step Indicators */
#refinance .step, 
#purchase .step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
#refinance .step.active, 
#purchase .step.active {
  opacity: 1;
}

/* Buttons */
#refinance button#nextBtn, 
#purchase button#nextBtn {
  background-color: var(--color-primary);
  color: #fff;
  padding: 12px 25px;
  margin: 10px 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

#refinance button#nextBtn:hover, 
#purchase button#nextBtn:hover {
  background-color: var(--color-secondary);
}

#refinance button#prevBtn, 
#purchase button#prevBtn {
  background-color: #ededed;
  color: #000;
  padding: 12px 25px;
  margin: 10px 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

#refinance button#prevBtn:hover, 
#purchase button#prevBtn:hover {
  background-color: var(--color-secondary);
  color: #fff;
}

/* Remove unwanted label styles */
#refinance label:before,
#refinance label:after,
#purchase label:before,
#purchase label:after {
  display: none !important;
}

/* Progress Bars */
.refinance-progressbar, 
.purchase-progressbar {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 0;
  overflow: hidden;
}

.refinance-progressbar-fill, 
.purchase-progressbar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #28a745, #218838);
  transition: width 0.3s ease-in-out;
}

.box{
	background-color:black;

}
#opac{
	opacity:0.1;
}
.new{
  color:#191c1f; 
}
.video-banner .up-section .banner-heading h1 {
    font-size: 45px;
}
.info-box-2{
	background-color:white;
}
.elementor-967 .elementor-element.elementor-element-0b65920:not(.elementor-motion-effects-element-type-background){
	background-color:none;
}


/* laststep css */
/* ==== Summary Tab Styling ==== */
#purchase .summary-container {
  background-color: #f9f9f9;
  border-radius: 7px;
  padding: 25px;
  margin-top: 20px;
  border: 1px solid #ccc;
}

#purchase .summary-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
  display: flex; /* Use flexbox for two-column layout */
  align-items: center; /* Vertically center content */
}

#purchase .summary-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#purchase .summary-item h5 {
  margin-bottom: 0;
  color: var(--theme-color1);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-primary);
  width: 40%; /* Set width for label column */
  text-align: left; /* Keep label text aligned left */
  padding-right: 15px; /* Add space between columns */
}

#purchase .summary-item p {
  margin: 0;
  font-size: 16px;
  color: #222;
  line-height: 1.5;
  width: 60%; /* Set width for value column */
  text-align: center; /* Center value text */
}

/* Contact Information Specific Styling */
#purchase #summary-contact {
  width: 60%; /* Match the value column width */
  text-align: center; /* Center the entire contact block */
}

#purchase .contact-row {
  display: flex;
  margin-bottom: 8px;
  width: 100%;
}

#purchase .contact-row:last-child {
  margin-bottom: 0;
}

#purchase .contact-label {
  width: 40%; /* Label column width */
  font-weight: 600;
  text-align: right; /* Right-align labels */
  padding-right: 15px;
}

#purchase .contact-value {
  width: 60%; /* Value column width */
  text-align: center; /* Center values */
}

/* ==== Booking Section Styling ==== */
#purchase .booking-section {
  background-color: rgb(249, 249, 249);
  border-radius: 7px;
  padding: 25px;
  margin-top: 30px;
  text-align: center;
  border: 1px solid #ccc;
}

#purchase .booking-section h4 {
  margin-bottom: 12px;
  color: #0f0f0f;
  font-size: 22px;
  font-weight: 600;
  font-family: 'Monsterrat';
  text-align: center;
}

#purchase .booking-section p {
  margin-bottom: 20px;
  font-size: 16px;
  color: #222;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#purchase #bookCallBtn {
  background-color: #9b0505;
  color: #fff;
  padding: 12px 25px;
  margin: 10px 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block; /* Helps with centering */
}

#purchase #bookCallBtn:hover {
  background-color: #9b0505;
}

/* Responsive adjustments for summary tab */
@media (max-width: 768px) {
  #purchase .booking-section p {
    max-width: 100%;
  }
  
  #purchase .summary-item {
    flex-direction: column; /* Stack columns on mobile */
    align-items: flex-start; /* Align to left on mobile */
  }
  
  #purchase .summary-item h5,
  #purchase .summary-item p,
  #purchase #summary-contact {
    width: 100%; /* Full width on mobile */
    text-align: left; /* Left align on mobile */
  }
  
  #purchase .summary-item h5 {
    margin-bottom: 8px; /* Add space between label and value on mobile */
    padding-right: 0;
  }
  
  #purchase .summary-item p {
    margin-bottom: 0;
  }
  
  /* Contact rows on mobile */
  #purchase .contact-row {
    flex-direction: column; /* Stack label and value on mobile */
  }
  
  #purchase .contact-label,
  #purchase .contact-value {
    width: 100%; /* Full width on mobile */
    text-align: left; /* Left align on mobile */
  }
  
  #purchase .contact-label {
    margin-bottom: 5px; /* Add space between label and value on mobile */
    padding-right: 0;
  }
  
  #purchase .booking-section h4 {
    font-size: 20px;
  }
}

/* refinace form last step */
/* ==== Summary Tab Styling for Refinance Form ==== */
#refinance .summary-container {
  background-color: #f9f9f9;
  border-radius: 7px;
  padding: 25px;
  margin-top: 20px;
  border: 1px solid #ccc;
}

#refinance .summary-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
  display: flex; /* Use flexbox for two-column layout */
  align-items: center; /* Vertically center content */
}

#refinance .summary-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#refinance .summary-item h5 {
  margin-bottom: 0;
  color: var(--theme-color1);
  font-size: 18px;
  font-weight: 600;
  font-family: 'Monsterrat';
  width: 40%; /* Set width for label column */
  text-align: left; /* Keep label text aligned left */
  padding-right: 15px; /* Add space between columns */
}

#refinance .summary-item p {
  margin: 0;
  font-size: 16px;
  color: #222;
  line-height: 1.5;
  width: 60%; /* Set width for value column */
  text-align: center; /* Center value text */
}

/* Contact Information Specific Styling */
#refinance #summary-contact {
  width: 60%; /* Match the value column width */
  text-align: center; /* Center the entire contact block */
}

#refinance .contact-row {
  display: flex;
  margin-bottom: 8px;
  width: 100%;
}

#refinance .contact-row:last-child {
  margin-bottom: 0;
}

#refinance .contact-label {
  width: 40%; /* Label column width */
  font-weight: 600;
  text-align: right; /* Right-align labels */
  padding-right: 15px;
}

#refinance .contact-value {
  width: 60%; /* Value column width */
  text-align: center; /* Center values */
}

/* ==== Booking Section Styling for Refinance Form ==== */
#refinance .booking-section {
  background-color: #f9f9f9;
  border-radius: 7px;
  padding: 25px;
  margin-top: 30px;
  text-align: center;
  border: 1px solid #ccc;
}

#refinance .booking-section h4 {
  margin-bottom: 12px;
  color: #0f0f0f;
  font-size: 22px;
  font-weight: 600;
  font-family: 'Monsterrat';
  text-align: center;
}

#refinance .booking-section p {
  margin-bottom: 20px;
  font-size: 16px;
  color: #222;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#refinance #bookCallBtn {
  background-color: #9b0505;
  color: #fff;
  padding: 12px 25px;
  margin: 10px 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block; /* Helps with centering */
}

#refinance #bookCallBtn:hover {
  background-color:#9b0505;
}

/* Responsive adjustments for refinance summary tab */
@media (max-width: 768px) {
  #refinance .booking-section p {
    max-width: 100%;
  }
  
  #refinance .summary-item {
    flex-direction: column; /* Stack columns on mobile */
    align-items: flex-start; /* Align to left on mobile */
  }
  
  #refinance .summary-item h5,
  #refinance .summary-item p,
  #refinance #summary-contact {
    width: 100%; /* Full width on mobile */
    text-align: left; /* Left align on mobile */
  }
  
  #refinance .summary-item h5 {
    margin-bottom: 8px; /* Add space between label and value on mobile */
    padding-right: 0;
  }
  
  #refinance .summary-item p {
    margin-bottom: 0;
  }
  
  /* Contact rows on mobile */
  #refinance .contact-row {
    flex-direction: column; /* Stack label and value on mobile */
  }
  
  #refinance .contact-label,
  #refinance .contact-value {
    width: 100%; /* Full width on mobile */
    text-align: left; /* Left align on mobile */
  }
  
  #refinance .contact-label {
    margin-bottom: 5px; /* Add space between label and value on mobile */
    padding-right: 0;
  }
  
  #refinance .booking-section h4 {
    font-size: 20px;
  }
}