.navbar{background-color: transparent;}
.coverImg{filter: invert(0.1) grayscale(0.15) brightness(0.8) hue-rotate(230deg); z-index: -1;}
textarea{max-height: 100px;}
#homeSection{background-color: #1d1d1dee; color: #fff; padding-block-end: 4rem;}
#homeServSec{view-timeline-name: --homeServSec;} #homeServSec .fadeInUp {animation-timeline: --homeServSec}
#domainHomeSec{view-timeline-name: --domainHomeSec;} #domainHomeSec .fadeInUp {animation-timeline: --domainHomeSec}
.topBorder{position: absolute; top: -4rem; background-color: var(--bs-light); height: 8rem; clip-path: ellipse(50% 45% at 50% 50%); left: -4%; right: -4%;}
main{overflow-x: clip;}
main svg.topRound{position: absolute; bottom: calc(100% - 20px);}
.who_we_are_partners > *{min-width: 100px;}
.who_we_are_partners img{display: block;}
#numbers_Speak{view-timeline-name: --numbers_Speak;} #numbers_Speak .fadeInUp {animation-timeline: --numbers_Speak}
#testimonial_sec{view-timeline-name: --testimonial_sec;} #testimonial_sec .fadeInUp {animation-timeline: --testimonial_sec}
.cover_sec{background-image: var(--cover); background-size: cover; background-repeat: no-repeat; filter: brightness(0.7); min-height: 150px;}
.core_service_card, .core_service_card .card-body, .home_count_card{position: relative;}
.core_service_card img {width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: brightness(0.5); border-radius: 0.25rem;}
.core_service_card .card-body {display: grid; grid-template-columns: 50px 1fr 80px; margin-top: 150px; transform-style: preserve-3d;}
.core_service_card .card-body .bi {grid-row: 1 / 4; transform: translateY(-5px);}
.core_service_card .card-body .card-title, .core_service_card .card-body p {grid-column: 2 / 4;}
.core_service_card a { grid-column: 3 / 6;}
.testimonialCard {max-width: 900px; margin-inline: auto;}
.testimonialCard .avatar {width: 100px; height: 100px; margin-inline: auto; --avatar: linear-gradient(45deg, #2e315b, transparent); background-image: var(--avatar); background-repeat: no-repeat; background-size: cover;}
.testimonialCard p{width: 90%; margin-inline: auto; text-wrap-style: pretty;}
#testimonial_sec{background-image: linear-gradient(120deg, #fd7e14 85%, rgb(220, 238, 253) 80%);}
#testimonial_sec .carousel-indicators{margin-bottom: 0;}
#testimonial_sec .carousel-indicators [data-bs-target]{width: 7px; height: 7px; background-color: #7e7e7e; border-radius: 50px; border-top-width: 0; border-bottom-width: 0;}
#testimonial_sec .carousel-indicators .active{background-color: var(--bs-primary); width: 1rem; transition: transform 0.2s ease;}
#caseStudies .swiper-slide{height: initial;}
.caseStudiesCard{ max-width: 600px; margin-inline: auto; height: calc(100% - 3rem); --bs-border-color: #747474;}
.caseStudiesCard .btn-primary-custom{ --bs-btn-hover-border-color: #000; --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1rem; --bs-btn-font-weight: 600;}
.caseStudiesCard span:last-of-type{ color: var(--app-color); font-weight: 600; transition: word-spacing 0.3s ease;}
.caseStudiesCard span:last-of-type:hover{ word-spacing: 2px;}
main .swiper-pagination{position: relative;}
.swiper-slide img{width: 100%; height: 250px; object-fit: cover;}
:root{--swiper-theme-color: var(--app-color) !important;}
body {color: var(--dark-text);
  --bs-link-color: #be5901 !important;
  --bs-link-hover-color: #964906 !important;
  --swiper-navigation-color: var(--app-color);
}
/* Navbar */
.navbar { box-shadow: 0 2px 4px rgba(0,0,0,.1); transition: top 0.3s; backdrop-filter: blur(20px);}

/* Hero Section */
.hero-section {
  background: url('../images/landing_cover_2.webp') no-repeat center center/cover;
  background-color: var(--app-color);
  background-color: #211700;
  color: white;
  padding: 150px 0;
  min-height: 700px;
  display: flex;
  align-items: center;
  background-blend-mode: multiply;
  /* background-blend-mode: overlay; */
}

.hero-headline {font-size: 3rem; font-weight: 700; margin-bottom: 20px;text-shadow: 0 2px 4px rgba(0,0,0,.5);}
.hero-subline { font-size: 1.5rem; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 4px rgba(0,0,0,.5);}
.btn-primary-custom, .btn-app-fill {--bs-btn-bg: var(--app-color); --bs-btn-hover-bg: #000; --bs-btn-active-color: #da6a08; --bs-btn-active-bg: #da6a08; --bs-btn-hover-color: #da6a08;}
.btn-secondary-custom, .btn-app-outline {--bs-btn-bg: transparent; --bs-btn-hover-bg: #da6a08; --bs-btn-color: var(--app-color); --bs-btn-hover-color: #000; --bs-btn-active-color: #da6a08; transition: background-color 0.3s ease, color 0.3s ease; }
.btn-primary-custom, .btn-secondary-custom {--bs-btn-padding-y: 12px; --bs-btn-padding-x: 30px; --bs-btn-font-size: 1.25rem; --bs-btn-font-weight: 600; --bs-btn-border-color: var(--app-color); --bs-btn-border-width: 2px; --bs-btn-hover-border-color: #da6a08; --bs-btn-active-border-color: #da6a08; transition: background-color 0.3s ease, word-spacing 0.3s ease-in-out;}
.btn-primary-custom:hover, .btn-secondary-custom:hover{word-spacing: 2px;}

/* Sections General */
.section-padding {padding: 30px 0;}
h2 { padding-bottom: .5rem; font-weight: 600; }

@keyframes scroll-left {
  0% {transform: translateX(0%);}100% {transform: translateX(-50%);}
  /* Scroll exactly half the combined width */
}
.scroll-content {display: inline-block;animation: scroll-left linear infinite; padding-right: 2rem; font-weight: 600; font-size: 1.5rem;}

/* Services Preview */
.servicesList {list-style: none;}
#services article:not(.card), .servicesList li {position: sticky; top: 100px; z-index: 1; margin-bottom: 2rem;}
.servicesList li:nth-child(2) {top: 116px;} .servicesList li:nth-child(3) {top: 132px;} .servicesList li:nth-child(4) {top: 148px;} .servicesList li:nth-child(5) {top: 164px;}
.servicesList h3 {font-size: 1.35rem; font-weight: 600;}
.servicesList h3 i {color: var(--app-color);}
.service-card {text-align: center; padding: 30px 20px; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%;}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.1);}
.service-card .icon {font-size: 3rem; color: var(--app-color); margin-bottom: 20px; }
.service-card h5 { font-weight: 600; margin-bottom: 15px; }

/* Industries We Serve */
#industryList {scroll-snap-type: mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;}
/* For WebKit browsers (Chrome, Safari) */
/* #industryList::-webkit-scrollbar {display: none;} */
.industry-item {--card-img: ''; flex: 0 0 285px; position: relative; min-height: 25rem; --title-size: 1.35rem; --title-height: calc(1.35rem * 2); background-image: var(--card-img); --bs-card-bg: transparent; color: #fff; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 -150px 68px rgba(0,0,0,0.7);}
.industry-item .card-body{ position: absolute; min-height: 25rem; top: calc(100% - calc(var(--title-size)*5)); left: 0; right: 0; height: 100%; transition: top 0.3s ease, justify-content 0.3s ease; background-color: transparent; justify-content: space-between;}
.industry-item h3{ font-size: 1.35rem; font-weight: 600; min-height: var(--title-height);}
.industry-item:hover{box-shadow: none;}
.industry-item:hover .card-body{ top: 0; text-align: start; justify-content: flex-start; background-color: rgba(0, 0, 0, 0.281); backdrop-filter: blur(20px);}
.industry-item:hover h3{ font-size: 1.5rem;} .industry-item:hover a{ margin-block-start: auto; color: var(--app-color); transition: word-spacing 0.3s ease;}.industry-item a:is(:hover, :focus, :active){word-spacing: 2px;}

/* Technologies */
/* #technologies{background-image: radial-gradient(circle at 50% 50%, #f0ffff, #f0fffe);} */
#technologies a[data-section]:not(.active){color: #858585; transition: background-color 0.3s ease, font-size 0.3s ease, border-color 0.3s ease;}
#technologies nav a[data-section].active{color: #000; --bs-border-color: #000; --bs-border-width: 2px; font-weight: 600; position: relative;}
#technologies nav a .bullet{ bottom: -10px; font-size: small; transform: translate3d(-15px, 5px, 0) scale(0.8); aspect-ratio: 1; display: inline-flex; align-items: center;}
#technologies nav a:not(.active) .bullet{visibility: hidden;}
#technologies aside:not(:target, .active){display: none;}
#technologies aside:target, #technologies aside.active{display: block;}
#technologies .tab-content a[data-section].active{--bs-border-color: #2b2a3d; color: var(--app-color); background-color: #2b2a3d; font-weight: 600;}
#technologies figure{border-radius: 8px; overflow: hidden; padding: 0.5rem 0.25rem; transition: background-color 0.3s ease-in-out box-shadow 0.3s ease;}
/* #technologies figure:hover{box-shadow: 0 10px 15px -5px rgba(0,0,0,0.5);} */
.techList{columns: 2;}
#technologies figcaption{margin-block: 0.5rem 0;}

/* Featured Case Study */
.case-study-content {padding: 2rem; text-wrap: balance;}
.case-study-content h3 {font-weight: 700; color: var(--app-color);}
.case-stats span {display: block; margin-bottom: 10px; font-weight: 500;}

/* Testimonial */
.testimonialSwiper button{position: relative; top: unset; margin: unset; left: unset; width: 40px; height: 40px; --bs-btn-bg: #000;}
.testimonialSwiper {--swiper-navigation-size: 1rem; color: unset;}

/* Why Spundan? */
.whyUsSwiper .card {min-height: 200px; height: calc(100% - 3rem); --bs-card-border-color: #f2f2f2;}
.whyUsSwiper .card .card-title {font-size: 1.25rem; text-wrap: balance;}
.whyUsSwiper .card .card-text {text-wrap: balance; padding-block-start: 1rem;}

/* Testimonial */

/* Footer */
.footer {padding-block-start: 50px;}
/* .footer a { color: var(--app-color); text-decoration: none; transition: color 0.3s ease;} */
.footer a:hover {color: var(--app-color);}
.footer .social-icons a {font-size: 1.5rem; transition: color 0.3s ease;}

@media screen and (min-width: 576px) {
  #homeSection{background-image: linear-gradient(45deg, #1d1d1df6 40%, transparent); color: #fff; min-height: 400px; background-color: transparent;}
  .techList{columns: 3;}
}
@media screen and (min-width: 768px) {
  .scroll-content{font-size: 1.875rem;}
  .industry-item .icon-large {margin-top: 50%;}
  .core_service_card {padding-block-start: 120px; margin-bottom: 50px; height: calc(100% - 50px); width: calc(100% - 1.75rem);}
  .core_service_card .card-body {margin-top: auto; transform: translate3d(1.5rem, 40px, 0);}
  /* #technologies article {display: grid; grid-template-columns: 300px 1fr;}
  #technologies .tab-content {border-left: 1px solid #2e315b;} */
  #technologies a[data-section]:not(.active){font-size: 1.25rem;}
  .techList{columns: 4;}
}
@media screen and (min-width: 992px) {
  .hero-headline {font-size: 4rem;}
  #testimonial_sec{background-image: linear-gradient(120deg, #fd7e14 40%, rgb(220, 238, 253) 40%);}
  #testimonial_sec .container-xl{display: grid; grid-template-columns: 300px 1fr; gap: 1rem;}
  #testimonial_sec .heading{align-self: center;}
  .hero{padding-block: 150px !important;}
  .section-padding {padding: 80px 0;}
  /* .scroll-content { word-spacing: 15px;} */
}
@media screen and (min-width: 1200px) {
  h2 {font-size: 3rem;}
  section h2 + p {font-size: 1.25rem;}
  .servicesList h3 {font-size: 1.5rem;}
  #technologies nav a{font-size: 1.5rem !important;}
  .whyUsSwiper .card .card-title {font-size: 1.5rem;}
  .techList{columns: 6;}
}
@media screen and (max-width: 1199px) {
    .home_count_card img{width: 100%; position: absolute; top: 0; left: 0; bottom: 0; object-fit: cover; opacity: 0.5; filter: brightness(0.25); transition: transform 0.3s ease;}
    .home_count_card .card-body{
      /* backdrop-filter: blur(10px);  */
      background-blend-mode: color; margin-top: 50px; background-image: linear-gradient(to bottom, transparent 0%, #f0f4ffa4, #f0f4ffa4);}
    .home_count_card:hover img{transform: scale(1.1); transition: transform 0.5s ease;}
}