/* ==========================================================
NEW Services Detail
========================================================== */

/* ---------- Global Page & Layout ---------- */
body {
overflow-x: hidden;
}

.project-details__top {
text-align: justify;
}

.padding-control-for-service-detail,
.padding-control-for-service-detail > div {
padding: 0;
}

.services-details {
margin-bottom: 100px;
}

.services-details .auto-container {
margin-bottom: 100px;
}

/* ---------- Service Detail Images ---------- */
.service-details-second-section-image-container img {
min-width: 100%;
height: 500px;
object-fit: cover;
border-radius: 10px;
}

/* ---------- Sticky Sidebar ---------- */
.our-services-details {
position: sticky;
top: 94px;
}

/* ---------- Service Process Section ---------- */
#service-detail-our-process-placeholder .row .col-lg-6 {
padding-right: 40px;
}

/* ---------- Contact Us Section ---------- */
#service-detail-contact-us-section-placeholder .address {
padding-left: 0 !important;
padding-right: 0;
}

#contact-us-section-placeholder {
margin-top: 50px;
}

.contact-item {
display: flex;
align-items: baseline;
gap: 15px;
transition: all 2s ease;
}

.contact-item:hover span {
background: var(--cpc-gradient-reverse);
}

.contact-address a,
.contact-address a:hover,
.contact-address a:focus,
.contact-address a:visited,
.contact-address a:active {
text-decoration: none;
}

.contact-address p {
color: var(--navy-blue);
display: block;
font-family: var(--text-font);
font-size: 16px;
font-weight: 500;
line-height: 32px;
position: relative;
transition: all 0.5s ease;
}

.contact-item span {
height: 30px;
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cpc-gradient);
border-radius: 50%;
}

.contact-item span i {
font-size: 12px;
}

/* ---------- Sidebar Navigation ---------- */
.our-services-detail-sidebar-item-1 li {
padding: 8px 4px;
background: var(--platinum-gray);
transition: all 0.4s ease;
}

.our-services-detail-sidebar-item-1 li.services-nav-active-item {
background: var(--navy-blue);
color: var(--theme-color-white);
}

.our-services-detail-sidebar-item-1 li.services-nav-active-item a,
.our-services-detail-sidebar-item-1 li.services-nav-active-item i {
color: var(--theme-color-white);
}

/* Hover Effect for Sidebar Items */
.our-services-detail-sidebar-item-1 li:not(.services-nav-active-item):hover {
background: var(--cpc-gradient);
color: var(--navy-blue);
}

.our-services-detail-sidebar-item-1 li:not(.services-nav-active-item):hover a,
.our-services-detail-sidebar-item-1 li:not(.services-nav-active-item):hover i {
color: var(--navy-blue);
}

.our-services-detail-sidebar-item-1 li:hover i {
transform: translateY(-50%);
}

/* Sidebar Link Styling */
.our-services-detail-sidebar-item-1 li a {
position: static;
padding-left: 38px;
font-family: var(--text-font);
font-size: 16px;
font-weight: 400;
}

.our-services-detail-sidebar-item-1 li a i {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 32px;
font-size: 12px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 15px;
color: var(--navy-blue);
transition: all 0.5s ease;
}

/* Sidebar General Styling */
.sidebar-service-list {
box-shadow: var(--cpc-box-shadow);
background: var(--theme-color-white);
}

.sidebar-service-list .title {
font-size: var(--section-sub-heading);
text-transform: capitalize;
}

.sidebar-service-list li {
position: relative;
font-family: var(--navy-blue);
}

.sidebar-service-list li a {
width: fit-content;
font-size: 16px;
color: var(--navy-blue);
}

#service-detail-contact-us-section-placeholder .sidebar-service-list li a:hover {
color: var(--gold-yellow);
}

#contact-us-section-placeholder .sidebar-service-list li a:hover {
color: var(--gold-yellow) !important;
}

.sidebar-service-list li a {
text-decoration:none !important;
}

.sidebar-service-list .form-control:focus {
border: none;
outline: none;
}

.our-services-detail-sidebar {
display: flex;
flex-direction: column;
gap: 40px;
}

/* ---------- Lists & Typography ---------- */
.outcome-list li {
color: var(--charcoal-gray);
font-size: 16px;
}

.our-services-form-cta {
font-size: 14px;
}

.nr-list .title {
font-size: var(--section-sub-heading);
}

.nr-list .title span {
font-family: var(--poppins-font);
-webkit-text-stroke: 1px var(--gold-yellow);
}

.nr-list:hover span {
background: var(--cpc-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}

ul.with-bullets.our-service-list {
margin-left: 25px;
}

.with-bullets li {
list-style-type: disc;
position: relative;
}

.with-bullets li:before {
content: "";
position: absolute;
left: -24px;
top: 6px;
width: 16px;
height: 16px;
background-image: url(/images/icons/orange-bullet-icon.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.our-services-ul-list p {
margin-bottom: 10px;
}

.our-services-ul-list strong {
color: #6B7280;
font-weight: 500;
}

/* ---------- Boxes & Shapes ---------- */
.our-serivices-section {
margin-top: 60px;
}

.box-with-border {
border: 1px solid #DADADA;
padding: 30px;
position: relative;
overflow: hidden;
}

.box-with-border .arrow-shape-2 img {
min-width: 100%;
}

.box-with-border .arrow-shape-2 {
min-width: 200px;
height: auto;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}

/* ---------- Curved Images ---------- */
#why-choose-image-1, #why-choose-image-2{
    border-radius: 10px;
}



/* ---------- FAQ Section ---------- */
.faq-content-1 .accordion-box .block .acc-btn {
font-weight: 500;
padding-right: 50px;
}

.faq-content-1 .accordion-box .block .acc-btn:hover,
.faq-content-1 .accordion-box .block .acc-btn:hover .icon {
color: var(--gold-yellow);
}

.faq-content-1 .accordion-box .block .acc-btn .icon {
font-size: 14px;
}


/* ==========================================================
Global Overview Section
========================================================== */
#overview-title {
font-size: var(--main-heading) !important;
color: var(--navy-blue) !important;
}

#overview-text {
font-size: 16px;
color: var(--charcoal-gray);
line-height: 32px;
font-family: var(--text-font);
margin-bottom: 30px;
}

/* ==========================================================
Global Why Choose Us Section
========================================================== */
#why-choose-title {
font-size: var(--main-heading) !important;
color: var(--navy-blue) !important;
margin-bottom: 16px; /* matches old spacing */
}

#why-choose-list li {
font-size: 16px;
color: var(--charcoal-gray);
margin-bottom: 10px;
list-style-type: disc;
position: relative;
}

#why-choose-list li:before {
content: "";
position: absolute;
left: -24px;
top: 6px;
width: 16px;
height: 16px;
background-image: url(/images/icons/orange-bullet-icon.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}


/* ==========================================================
Global FAQs Section
========================================================== */
#faqs-title {
font-size: var(--main-heading) !important;
color: var(--navy-blue) !important;
margin-bottom: 16px;
}

#faqs-list li .acc-btn {
font-weight: 500;
font-size: 20px;
color: var(--navy-blue);
}

#faqs-list li .acc-btn:hover,
#faqs-list li .acc-btn:hover .icon {
color: var(--gold-yellow);
}

#faqs-list li .acc-btn .icon {
font-size: 16px;
}

/* ---------- Section Headings ---------- */
#service-detail-overview-placeholder h3,
.our-serivices-section h3,
#service-detail-faqs-placeholder h3 {
font-size: var(--main-heading); 
color: var(--navy-blue);
}

/* Specific Override */
.services-details .auto-container #service-detail-overview-placeholder h3 {
font-size: var(--main-heading);
}

/* ---------- Additional Custom Adjustments ---------- */
/* Padding Above Why Choose Us */
#why-choose-section-placeholder {
padding-top: 60px !important;
}

/* Contact Us Left Alignment */
#contact-us-section-placeholder,
#contact-us-section-placeholder .sidebar-service-list,
#contact-us-section-placeholder ul.address {
text-align: left !important;
}
#contact-us-section-placeholder ul.address{
padding-left: 0 !important;
}


/* Overview Section 1 Custom Heading */
#overview-title {
font-size: var(--main-heading) !important;
color: var(--navy-blue) !important;
}

/* ==========================================================
Media Queries
========================================================== */
@media (max-width: 350px) {
.sidebar-service-list {
padding: 45px 10px 30px;
}
.theme-btn.btn-style-one {
font-size: 12px;
}
}

@media (max-width: 540px) {
.faq-content-1 .accordion-box .block .acc-btn {
padding-right: 50px;
}
#service-detail-intro-section-placeholder .service-details-second-section-image-container img {
max-height: 170px;
}
.mb-40 {
margin-bottom: 40px;
}
}

@media (max-width: 768px) {
.faq-content-1 .accordion-box .block .acc-btn{
padding-right: 30px;
}
}

@media (max-width: 991px) {
.service-sidebar {
min-width: 100%;
}
.flex-column-reverse-below-tab {
flex-direction: column-reverse;
}
.services-details .auto-container {
padding-left: 40px;
padding-right: 40px;
}
}

@media (max-width: 1024px) {
.sidebar-service-list {
padding: 45px 15px 30px 15px;
}
#service-detail-our-process-placeholder .row .col-lg-6 {
padding-right: calc(var(--bs-gutter-x) * 0.5);
}
.service-details-second-section-image-container img {
max-height: 380px;
}
}