/*
Theme Name: ServicesOne
Theme URI: https://example.com/servicesone
Author: Your Name/Team
Author URI: https://example.com
Description: Home-services Elementor + Redux starter theme with one-click page generator, ACF support, and CF7 form setup. Includes Services & Locations CPT, shortcodes, and fallback header/footer.
Version: 0.5.0
Tested up to: 6.5
Requires PHP: 8.1
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: servicesone
*/

/* 1) Base CSS variables (will be overwritten by inline CSS from Redux) */
:root {
/*   --color-primary: #0E78F9;
  --color-secondary: #00B894;
  --color-accent: #FFB20F;
  --color-text: #1f2933;
  --color-muted: #6b7b8f; */
  --container: 1200px;
  --radius-md: 10px;
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* 2) Poppins as primary font */
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #fff !important;
  color: var(--color-text);
  line-height: 1.6;
}
body {
    margin: 0 !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 3) Container */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* 4) Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: .15s ease-in-out;
}
a:hover {
  text-decoration: none;
  color: var(--color-secondary);
}

/* 5) Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary) !important;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}
h1 { font-size: clamp(2.2rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.8rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.4rem; }

/* Elementor headings inherit theme color */
.elementor-widget-heading .elementor-heading-title {
  color: var(--color-primary) !important;
}
h1.elementor-heading-title.elementor-size-default
h2.elementor-heading-title.elementor-size-default,
h3.elementor-heading-title.elementor-size-default,
h4.elementor-heading-title.elementor-size-default{
    color: var(--color-secondary) !important;
}


/* 6) Buttons – uses primary, hover uses secondary */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.servicesone-btn,
.wp-block-button__link {
  background: var(--color-secondary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  text-decoration: none;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.servicesone-btn:hover,
.wp-block-button__link:hover {
  background: var(--color-secondary);
  color: #fff;
  text-decoration: none;
}

/* 7) Header */
.site-header {
/*   border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff; */
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.site-header .primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}
.site-header .primary-nav a {
  color: #0f172a;
  font-weight: 500;
}
.site-header .primary-nav a:hover,
.site-header .primary-nav .current-menu-item > a {
  color: var(--color-primary);
}

/* 8) Footer */
.site-footer {
  background: #fff;
}
.site-footer .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer a {
  color: var(--color-primary)!important;
}
.site-footer a:hover {
  color: var(--color-secondary) !important;
}

/* 9) Cards / sections – so colors flow into Elementor empty areas */
.so-section {
  background: #fff !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 20px;
}
.so-badge {
  display: inline-block;
  background: rgba(14, 120, 249, .12);
  color: var(--color-primary) !important;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

/* 10) Elementor overrides (optional safe defaults) */
.elementor-widget-button .elementor-button,
.elementor-button {
  background: var(--color-secondary) !important;
  border-radius: 999px;
  border: none;
}
.elementor-widget-button .elementor-button:hover,
.elementor-button:hover {
  background: var(--color-secondary) !important;
}
.elementor-heading-title a {
  color: inherit;
}
.elementor-54 .elementor-element.elementor-element-7ba0992a .menu-item.current-menu-item a.hfe-menu-item, .elementor-54 .elementor-element.elementor-element-7ba0992a .menu-item.current-menu-ancestor a.hfe-menu-item{
	color: var(--color-secondary) !important;
}


/* 11) Forms (CF7 etc.) */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
}
.wpcf7 form input[type="submit"] {
  width: auto;
}

/* 12) Utility */
.text-primary { color: var(--color-primary) !important; }
.text-primary-white { color: #FFF !important;}
.text-primary-white h2  {
	color: #FFF !important;
}
.text-secondary { color: var(--color-secondary) !important; }
.bg-primary { background: var(--color-primary) !important; color: #fff; !important}
.bg-secondary { background: var(--color-secondary) !important; color: #fff; !important}
.bg-accent { background: var(--color-accent) !important; color: #fff; !important}


/* Style for Contact Form */
.Contact-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
	justify-content: space-between;
}
.Contact-form .col-50 {
    width: calc(50% - 10px);
}
.Contact-form .col-100 {
    width: 100%;
}
.Contact-form textarea#eventMessage {
    height: 100px !important;
}
.col-50 p {
    margin: 0 !important;
}
.Contact-form input, .Contact-form select, .Contact-form textarea {
    min-height: 36px;
    height: 40px;
    border: 1px solid #231F2029 !important;
    border-radius: 6px !important;
    line-height: 1.4em !important;
    font-size: 14px;
    padding: 8px !important;
	width: 100%;
}
.Contact-form input:focus-visible, .Contact-form select:focus-visible, .Contact-form textarea:focus-visible{
	outline: none;
}
.Contact-form label {
    margin-bottom: 5px !important;
	font-family: "Poppins", Sans-serif;
    font-size: 14px;
	color: var(--color-secondary) !important;
}
.submit-btn-link p {
    display: flex;
    justify-content: center;
    align-items: center;
}

input#submit-btn {
    background-color: var(--color-secondary) !important;
    font-family: "Poppins", Sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2em !important;
    color: #FFFFFF !important;
    transition-duration: 0.5s;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #CF9C74;
    border-radius: 30px 30px 30px 30px !important;
    padding: 10px 25px 10px 25px !important;
	margin-top: 5px !important;
	width: 160px;
}
input#submit-btn:hover {
    transform:translate(0, -5px);
}
.submit-btn-div p {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-100 p {
    margin: 0;
}
span.wpcf7-spinner {
    position: absolute;
    right: 40px;
}
span.wpcf7-not-valid-tip {
    position: absolute;
    font-size: 10px;
}
.wpcf7-response-output {
    display: none;
}

/* Style for all Icons */
.dollar-svg{
	fill: #FFF;
}
.elementor-icon svg path, .elementor-widget-icon-list .elementor-icon-list-icon svg {
    fill: var(--color-secondary) !important;
}
.elementor-54 .elementor-element.elementor-element-7ba0992a .hfe-nav-menu-layout:not(.hfe-pointer__framed) .menu-item.parent a.hfe-menu-item:after{
	background-color: var(--color-secondary) !important;
}
.how-it-work-icon span.elementor-icon {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.how-it-work-icon{
	position: relative;
}

/* Style for menu button */

li#menu-item-60 a:hover, li#menu-item-60 a:active {
    color: #FFF !important;
}
li#menu-item-60.menu-item.current-menu-item a.hfe-menu-item{
	color: #FFF !important;
}
li#menu-item-60.menu-item.current-menu-item a.hfe-menu-item::after{
	display:none !important;
}

/* Style for Services Cards */
.areas-we-serve-card {
    animation: fadeInUp .6s ease-out;
}
.areas-we-serve-card:hover {
    transform: translateY(-8px) !important;
}
/* Style for Background color */
.brand-bg-color{
	background-color: var(--color-bg) !important;
}
.brand-bg-color {
    background: var(--color-bg);
}

/* Style for Our sliders */

/* style for testimonial slider */
.testimonial-slider ul.slick-dots {
	display: flex;
	justify-content: center;
	align-items: center;
}
.testimonial-slider ul.slick-dots li button{
	display: none;
}
.testimonial-slider ul.slick-dots li{
	color: #231f20 !important;
	width: 30px;
	height: 25px;
}
.testimonial-slider ul.slick-dots li.slick-active{
	color: #00505B !important;
	border-radius: 50px;
}
.testimonial-slider .slick-track {
    display: flex;
    gap: 10px;
}
.testimonial-slider .testimonial-slider-card {
    height: 310px;
}
.testimonial-slider .slick-arrow {
    font-size: 0;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    position: absolute;
    top: 150px;
    right: 30px;
    border-color: #04A79E !important;
    outline: none !important;
    background: #fff !important;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	box-shadow: rgb(12 12 12 / 30%) 0px 2px 8px 0px;
}
.testimonial-slider .slick-prev.slick-arrow {
    left: 30px;
    top: 150px;
}
.testimonial-slider .slick-prev.slick-arrow:after {
    content: "";
    width: 13px;
    height: 13px;
    border-left: 1px solid #04A79E;
    border-bottom: 1px solid #04A79E;
    transform: rotate(45deg);
    position: absolute;
    left: 15px;
}
.testimonial-slider .slick-next.slick-arrow:after {
    content: "";
    width: 13px;
    height: 13px;
    border-right: 1px solid #04A79E;
    border-bottom: 1px solid #04A79E;
    transform: rotate(-45deg);
    position: absolute;
    right: 15px;
}

/* Style for Service Cards in Main Service Page */
/* wrapper becomes flex */
.so-services-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  margin-top:1.5rem;
}

/* each card gets a base width */
.so-service-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.03);
  /* 3-in-a-row-ish on desktop */
  flex:1 1 calc(33.333% - 1.5rem);
  max-width:calc(33.333% - 1.5rem);
}

/* breakpoints */
@media (max-width: 992px){
  .so-service-card{
    flex:1 1 calc(50% - 1.5rem);
    max-width:calc(50% - 1.5rem);
  }
}
@media (max-width: 600px){
  .so-service-card{
    flex:1 1 100%;
    max-width:100%;
  }
}

.so-service-card__thumb{
    width:100%;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: top center;
    vertical-align: middle;
}
.so-service-card__thumb--empty{
  background:#f1f1f1;
}

.so-service-card__body{
  padding:1.25rem 1.25rem 0.5rem;
  flex:1 1 auto;
}

.so-service-card__title{
  margin:0 0 .5rem;
  font-size:1.05rem;
}
.so-service-card__title a{
  color:var(--color-primary);
  text-decoration:none;
}

.so-service-card__text{
  margin:0 0 1rem;
  color:#545454;
  font-size:.9rem;
  line-height:1.5;
}

.so-service-card__actions{
  display:flex;
  gap:.75rem;
  padding:0 1.25rem 1.25rem;
  flex-wrap:wrap;
}

.so-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem 1rem;
  border-radius:999px;
  font-weight:500;
  font-size:.85rem;
  text-decoration:none;
  border:1px solid transparent;
}

.so-btn--primary{
  background:var(--color-primary);
  color:#fff;
}
.so-btn--ghost{
  background:transparent;
  border-color:rgba(0,0,0,.08);
  color:var(--color-secondary) !important;
}

/* Style for Single Service Page */
.single .content-main {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
}
.single .service-page-content {
    width: 58% !important;
    height: 100vh;
}
.single .form-content {
    width: 40%;
}
.single .form-content div#wpcf7-f252-p688-o1 {
    position: sticky;
    top: 100px;
    background: var(--color-bg);
    padding: 20px;
    border-radius: 16px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget-shortcode a.so-call-btn {
		font-size: 14px;
	}
	
}

@media only screen and (max-width: 767px) {
	.Contact-form .col-50 {
		width: 100% !important;
	}
	span.wpcf7-spinner {
		right: 10px;
	}
	.elementor-widget-shortcode a.so-call-btn {
		font-size: 14px;
	}
	
}