/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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 */
/* ---------- CSC INJURY THEME TOKENS (1rem = 10px for screens <= 2500px) ----------
   Use: paste into Elementor -> Site Settings -> Custom CSS (or Additional CSS)
   Conversion: rem = px / 10 (because html { font-size: 62.5% } -> 1rem ≈ 10px)
   Applied only for viewports up to 2500px wide below.
*/

/* Apply 1rem = 10px for screens up to 2500px */
@media screen and (max-width: 2500px) {
  html { font-size: 62.5%; } /* ~10px base (62.5% of default 16px) */
}

/* Root tokens (useable anywhere) */
:root{
  /* Font family */
  --csc-injury-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* ---------------- TYPOGRAPHY (px -> rem with 10px base) ---------------- */

  /* ---------------- SPACING & RADII (px -> rem with 10px base) ---------------- */
  --csc-injury-space-between-sections: 8rem;          /* 80px */
  --csc-injury-space-between-card-heading: 3rem;      /* 30px */
  --csc-injury-radius-button: 0.5rem;                 /* 5px */
  --csc-injury-radius-card: 2.3rem;                   /* 23px */
  --csc-injury-cta-strip-card: 3.3rem;                /* 33px */
  --csc-injury-image-round: 1.8rem;                   /* 18px */
}

/* ---------- example base usage (apply these in Site Settings or Additional CSS) ---------- */

/* typography base */
body {
  font-family: var(--csc-injury-font-family);
  font-size: var(--csc-injury-body);
  color: var(--csc-injury-body-color);
}
html,body{
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,p{
	margin:0;
}
.btn-secondary a.elementor-button {
    background: transparent;
    border-color: #fff;
}
/* -----------Sections Css-------*/
/*Main Banner Section*/
.mainbannerreviews.elementor-widget-rating{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.mainbannerreviews:before{
    content: "Our Patients  Rate Us 4.8 Out of 5";
    display: inline;
      font-family: var( --e-global-typography-a1a61ec-font-family ), Sans-serif;
    font-size: var( --e-global-typography-a1a61ec-font-size );
    font-weight: var( --e-global-typography-a1a61ec-font-weight );
    line-height: var( --e-global-typography-a1a61ec-line-height );
    color: var( --e-global-color-34247f2 );
}
.mainbannerreviews:after{
    content: "Based on 150+ Reviews";
    display: inline;
      font-family: var( --e-global-typography-a1a61ec-font-family ), Sans-serif;
    font-size: var( --e-global-typography-a1a61ec-font-size );
    font-weight: var( --e-global-typography-a1a61ec-font-weight );
    line-height: var( --e-global-typography-a1a61ec-line-height );
    color: var( --e-global-color-34247f2 );
}
.bannerbottomsection{
	backdrop-filter: blur(40px);
}
.explore-other-section strong{
	font-weight:700 !important;
}
.inpage-contactform form label{
    color:var(--e-global-color-5d44df3) !important;
    font-weight:500 !important;
    font-size:1.4rem !important;
}
.inpage-contactform form input, .inpage-contactform form textarea{
    border:0.9px solid var(--e-global-color-ff64e9a) !important;
    border-radius:8px !important;
	    font-size: 1.6rem !important;
}
.inpage-contactform textarea[name="textarea-1"]{
	min-height:9rem !important;
	padding:1rem !important;
}
.inpage-contactform form input:focus-within,.inpage-contactform form textarea:focus-within{
    outline:0;
}

.inpage-contactform .forminator-description {
    display: none !important;
}

.inpage-contactform .forminator-col {
    margin-bottom: 0 !important;
}
.inpage-contactform .forminator-row{
     margin-bottom:1.6rem !important;
}
.inpage-contactform .forminator-row.forminator-no-margin{
    margin-bottom:0 !important
}

.inpage-contactform button.forminator-button-submit {
    width: 100% !important;
    background: var(--e-global-color-secondary) !important;
    font-size: 1.6rem !important;
	border-radius:5px !important;
	font-weight:600 !important;
}
.inpagecontactv2 .inpage-contactform button.forminator-button-submit{
	background:#2EA3F2 !important;
}
.inpagecontactv2 .inpage-contactform a{
	color:#2EA3F2 !important;
}
.inpage-contactform a{
	 color: var(--e-global-color-secondary) !important;
}
.inpage-contactform button.forminator-button-submit:hover{
	box-shadow:none !important;
}
/* .inpage-contactform form:after {
    content:"";
    background:red;
    position:absolute !important;
    bottom:10rem;
    left:-15rem;
    width:27.9rem;
    height:22.3rem;
    background:url("https://qa.dallasspine.com/wp-content/uploads/2025/09/emailbg.svg");
    transform:rotate(-35deg);
    --z-index: -1;
}
.inpage-contactform{
    position:relative;
    --z-index: 2;
} */
#ntx-head h3{
    font-family: var( --e-global-typography-e6d3e89-font-family ), Sans-serif;
    font-size: var( --e-global-typography-e6d3e89-font-size );
    font-weight: var( --e-global-typography-e6d3e89-font-weight );
    line-height: var( --e-global-typography-e6d3e89-line-height );
    color: var( --e-global-color-primary );
    padding-bottom: 1rem;
}
.condition_section_item {
  position: relative;
  z-index: 1;
    border-radius:20px;
}

.condition_section_item::after {
  content: "";
  position: absolute;

  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit; /* keep corners consistent */
  padding: 1px; /* border thickness */
  background: linear-gradient(180deg, rgba(38, 91, 179, 0.1) 0%, #898F99 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
.condition_section_item .elementor-image-box-img img{
	width:100%;
}
/* Text-List Style Css Start */
.text-li ul {
  list-style: none;
  padding-left: 0;  
}

.text-li ul li {
  position: relative;
  padding-left: 28px;
}
.text-li ul li:not(:last-child) {
  margin-bottom: 10px;
}

.text-li ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: url("/wp-content/uploads/2025/09/tick-li.svg") no-repeat center;
  background-size: contain;
}
/* Text-List Style Css End */
.grid-5 {
  align-items: start;
}
.grid-5 > .elementor-element {
  grid-column: span 2 !important;
}
.grid-5 > .elementor-element:nth-child(4) { grid-column: 2 / span 2 !important; }
.grid-5 > .elementor-element:nth-child(5) { grid-column: 4 / span 2 !important; }

.number {
  display: inline-block;
  line-height: 5rem;
  text-align: center;
	    width: 5rem;
    height: 5rem;
    border: 1px solid #1A345F;
  border-radius: 0.6rem; 
  font-weight: bold;
  font-size: 3.6rem;
  color: #1A345F;            
  background: #fff;
}

.prodecureloopitem {
  position: relative;
  z-index: 1;
  border-radius: 20px;
}
.prodecureloopitem::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background:  linear-gradient(180deg, #000000 0%, rgba(102, 102, 102, 0) 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
.prodecureloopitem.revertedone::after {
  background:linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, #000000 100%);
}
html,body{
    overflow-x:hidden;
}
.prodecures_new_gradient:after{
    content:"";
    width:90rem;
    height:90rem;
    position:absolute;
    border-radius:50%;
    top:0;
    right: -50%;
    outline:1px solid #000;
    transform: translateX(-60%);
    background: linear-gradient(180deg, rgba(180, 225, 255, 0.83) 0%, rgba(251, 253, 254, 0.83) 100%);
    filter: blur(236px);
}
.arfe_repeater_faqs_list a {
    font-size: inherit !important;
    color: var(--e-global-color-secondary) !important;
    text-decoration:underline !important;
	text-underline-offset: 5px;
}
.arfe_repeater_faqs_list a:hover {
    color: var(--e-global-color-primary) !important;
}
.bannerbottomsection-container > .e-con-inner{
    position:relative;
}
.bannerbottomsection-container > .e-con-inner:after {
    content:"";
    background:url("/wp-content/uploads/2025/09/bottombannerv-2.svg") center no-repeat;
    background-size:contain;
    width:4.9rem;
    height:4.9rem;
    position:absolute;
    z-index:1;
    bottom:0.5rem;
    left:-1.2rem;
}
.bannerbottomsection{
    position:relative;
    z-index:2;
}
.bannerbottomcontainv2 .bannerbottomsection {
	border-radius:3.2rem !important;
}

/* CSS Button-before Icons Start */
.csc-button {
  position: relative; /* Make parent container positioning context */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
}
/* Absolutely positioned decorative element */
.csc-button::before {
  content: "";
  position: absolute;
    top: -3.6rem;
    left: -11rem;
    width: 10rem;
    height: 10rem;
  background-image: url("https://qa.dallasspine.com/wp-content/uploads/2025/09/csc-buttons-before-1.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: -1; /* keeps it behind button content */
}
/* CSS Button-before Icons End */

/* CSS Banner-Bottom-Section Start */
.bannerbottomsection-containerv-2 > .e-con-inner{
    position:relative;
}
.hide-icon .bannerbottomsection-containerv-2 > .e-con-inner:after, .hide-icon .bannerbottomsection-container > .e-con-inner:after{
	content:none;
}
.bannerbottomsection-containerv-2 > .e-con-inner:after {
    content:"";
    background:url("/wp-content/uploads/2025/09/bottombannerv-2.svg") center no-repeat;
    background-size:contain;
    width:4.9rem;
    height:4.9rem;
    position:absolute;
    z-index:1;
    bottom:0.5rem;
    left:-1.2rem;
}
.bannerbottomsectionv-2{
    position:relative;
    z-index:2;
}
.bannerbottomsectionv-2.e-flex.e-con.e-child {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* CSS Banner-Bottom-Section End */


/* CSS New-Button Start */
.csc-injury-button {
  background-color: #26A6FF;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
/* CSS New-Button End */
.ccf-bro-number {
    width: 5rem;
    height: 5rem;
    display: flex;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 0.6rem;
    justify-content: center;
    align-items: center;
    font-size: 3.6rem;
    font-weight: 600;
    box-shadow: 0px 4px 112.8px 0px #00000024;
}
.prodecureloopitem.withboxshadow{
	box-shadow: 0px 20px 33.9px 0px #00000008;
}
.pinchednerveoverview h3 {
      font-family: var( --e-global-typography-e6d3e89-font-family ), Sans-serif;
    font-size: var( --e-global-typography-e6d3e89-font-size );
    font-weight: var( --e-global-typography-e6d3e89-font-weight );
    line-height: var( --e-global-typography-e6d3e89-line-height );
    color: var( --e-global-color-primary );
  padding:2rem 0;
}
.pinchednerveoverview ul{
list-style:none;
  padding:0;
}
.pinchednerveoverview ul li{
  margin-bottom:1rem;
}
.pinchednerveoverview ul li:before{
   content: "";
  display:inline-block;
  width:19px; height:18px;
  background-image: url('/wp-content/uploads/2025/09/Vector.svg');
  margin-right:10px !important;
  background-size: contain;
  background-repeat: no-repeat;
  
}

.pinchednerveoverview .elementor-widget-button {
  padding-left:5rem !important;
    padding-top:1rem !important;
}
.pinchednerveoverview .elementor-widget-button:before{
  content:url("/wp-content/uploads/2025/09/marking.svg");
  position:absolute;
  bottom:-5px;
  left:0;
  z-index:-1;
}
.actionfig{
  position: relative;
  overflow: hidden; /* allow the pseudo element to be visible outside the box if needed */
}

/* use the double-colon :: for modern CSS, add -webkit- prefixed properties,
   avoid fit-content on pseudo-elements, and ensure it has a display so size works */
.actionfig::after{
  content: attr(data-number);
  position: absolute;
  top: 40%;
  right: 0;
  transform: translateY(-100%) rotate(-20deg); /* better vertical centering */
  display: inline-block;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  /* make the text transparent so the background shows through */
  color: transparent;

  /* gradient background */
  background: linear-gradient(180deg,
              rgba(0, 184, 212, 0.84) 0%,
              rgba(255, 255, 255, 0) 100%);

  /* crucial: enable clipping the background to the text (with -webkit fallback)
     and make sure the text fill is transparent (for WebKit browsers) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  pointer-events: none; /* prevents it from intercepting mouse events */
  z-index: 0; /* raise or lower as necessary relative to card content */
}
.elementor-testimonial--skin-default .elementor-swiper-button{
 font-size:2.5rem !important;
     width: 4.7rem !important;
    height: 4.7rem !important;
}
/*Tab View*/
@media (max-width:1024px){
	.bannerbottomsection-container > .e-con-inner:after{
		display:none;
	}
	.prodecureloopitem.revertedone::after {
  background:  linear-gradient(180deg, #000000 0%, rgba(102, 102, 102, 0) 100%) !important;
}
	 .prodecures_new_gradient:after{
        display:none;
    }
}

@media (min-width: 768px) {
  .slider-bullets {
    display: none;
  }
}
/*Mobile View*/
@media (max-width:767px){
	/* CSC-Buttons CSC Before Style Start */
	.csc-button::before {
 content:none;
    }
/* CSC-Buttons CSC Before Style End */
	
		/* Cards-Design For MObile Start */
	
 /* Hide horizontal scrollbar but keep scrolling functional */
#custom-slider-section .slider-container {
  /* Firefox */
  scrollbar-width: none !important;
  /* IE 10+ */
  -ms-overflow-style: none !important;
}

/* WebKit (Chrome, Safari, Edge Chromium) */
#custom-slider-section .slider-container::-webkit-scrollbar {
  height: 0 !important;               /* remove horizontal bar height */
  background: transparent !important; /* remove any track background */
}
#custom-slider-section .slider-container::-webkit-scrollbar-track {
  background: transparent !important;
}
#custom-slider-section .slider-container::-webkit-scrollbar-thumb {
  background: transparent !important;
  opacity: 0 !important;
}

/* Fallback: if a faint track still appears (rare), make it fully transparent */
#custom-slider-section .slider-container,
#custom-slider-section .slider-container * {
  background-clip: padding-box;
}
/*   #custom-slider-section {
    position: relative;
    padding-bottom: 56px;
  } */
	.slider-bullets {
		padding-top: 1rem !important;
        position: relative !important;
	}
  #custom-slider-section .slider-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 8px;
    padding: 10px 8px 10px;
    -webkit-overflow-scrolling: touch;
  }

  #custom-slider-section .slider-item {
    min-width: calc(100% - 36px);
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 14px;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(11,53,80,0.06);
  }
#custom-slider-section .Injury-2 {
  border: 2px solid #2EA3F2;
}

  /* Icon / text / button classes (match your HTML structure) */
  .slider-item .icon { width:44px; height:44px; border-radius:10px; background:#e6f7fb; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
  .slider-item .title { font-size:20px; font-weight:700; color:#083047; margin:6px 0 4px; }
  .slider-item .desc { font-size:15px; color:#4b6b73; margin-bottom:12px; }
  .slider-item .learn-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:#dff4f9; color:#06364a; font-weight:600; font-size:14px; border:none; cursor:pointer; text-decoration:none; }

  /* Bullets container (absolute, centered at bottom) */
  #custom-slider-section .slider-bullets {
/*     position: absolute;
    left: 50%;
    transform: translateX(-50%); */
    bottom: 9%;
    display: flex;
    gap: 10px;
    z-index: 40;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  /* Buttons for bullets (reset native button styles) */
  #custom-slider-section .slider-bullets .bullet {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 8px;
    border-radius: 6px;
    background: #e6e6e6; /* inactive */
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: transform .22s ease, background .22s ease;
  }

  #custom-slider-section .slider-bullets .bullet.active {
    background: #06273a; /* active dark */
    transform: scale(1.06);
  }

  #custom-slider-section .slider-bullets .bullet:focus {
    outline: 2px solid rgba(6,39,58,0.16);
    outline-offset: 3px;
  }

/* Cards-Design For MObile End */
	
	.actionfig::after{
		font-size:13rem !important;
		top: 36% !important;
	}
	.pinchednerveoverview .elementor-widget-button {
  padding-left:0rem !important;
    padding-top:0rem !important;
}
	.pinchednerveoverview ul{
		text-align:start;
	}
	.pinchednerveoverview .elementor-widget-button:before{
		display:none;
	}
	.bannerbottomsection {
    background-image: none !important;
    background-color: #1A345F33 !important;
    backdrop-filter: blur(130px) !important;
}
    .mainbannerreviews{
        flex-wrap:wrap;
        justify-content:start !important;
    }
	.bannerbottomsection-container > .e-con-inner:after{
        display:block;
        bottom:15px;
    }
}
 @media (max-width: 400px){
    #custom-slider-section .slider-bullets .bullet { 
		width: 28px;
	 }
  }
/*Small Mobile*/
@media (max-width:370px){
    .bannerbottomsection{
        padding-right:1rem !important;
         padding-left:1rem !important;
    }
}