/* ==========================================================================
   KRAMORA AI TECHNOLOGY — MODERN TEAL, SAGE, CHARCOAL & YELLOW PALETTE
   Strictly Preserves 100% Existing UI Layout, Geometries & Components
   
   Color System:
   - Primary Teal:       #1E8A8A (Accents, navigation highlights, icons, links)
   - Soft Sage Teal:     #D8E5E5 (Hero background, soft feature sections)
   - Light Gray:         #ECF0F0 (Alternate light sections, secondary content)
   - Pure White:         #FFFFFF (Cards, content panels, form fields, dropdowns)
   - Deep Charcoal:      #17282B (Headings, body text, dark surfaces)
   - Soft Teal Border:   #C6D9D9 (Card borders, dividers, subtle outlines)
   - Primary CTA Yellow: #F7D451 (Buttons, action highlights, high contrast)
     * Button Text:      #000000
     * Arrow Container:  #000000
     * Arrow Icon:       #F7D451
     * Hover:            #E5C33E
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global CSS Variable Tokens
   -------------------------------------------------------------------------- */
:root,
body,
body.home-index,
.home-index {
  --theme: #1E8A8A !important;
  --theme2: #1E8A8A !important;
  --theme3: #1E8A8A !important;
  --theme4: #1E8A8A !important;
  --theme5: #F7D451 !important;
  --theme6: #D8E5E5 !important;
  --header: #17282B !important;
  --header2: #17282B !important;
  --header3: #17282B !important;
  --header4: #17282B !important;
  --text: #17282B !important;
  --border: #C6D9D9 !important;
  --bg: #ECF0F0 !important;
  --bg2: #17282B !important;
  --bg3: #ECF0F0 !important;
  --bg4: #D8E5E5 !important;
  --bg5: #D8E5E5 !important;
  --bg6: #D8E5E5 !important;
  --white: #FFFFFF !important;
  --black: #000000 !important;
}

/* --------------------------------------------------------------------------
   1. Typography & Global Text
   -------------------------------------------------------------------------- */
body {
  color: #17282B !important;
  background-color: #FFFFFF !important;
}

h1, h2, h3, h4, h5, h6,
.tx-title, .sec_title, .tz-itm-title {
  color: #17282B !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #17282B !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: #1E8A8A !important;
}

p, span, li {
  color: inherit;
}

.text-muted {
  color: #17282B !important;
  opacity: 0.85;
}

.text-teal,
.text-anim span,
h2 span,
h1 span,
.sub-title span {
  color: #1E8A8A !important;
}

a {
  color: #17282B;
  transition: all 0.3s ease;
}

a:hover {
  color: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   2. Special Button Style — Yellow CTA (#F7D451)
   -------------------------------------------------------------------------- */
/* Style 5 Button (.gt-theme-btn-main.style-5) */
.gt-theme-btn-main.style-5 .gt-theme-btn,
.gt-theme-btn-main .gt-theme-btn,
.gt-theme-btn-main.style-2 .gt-theme-btn {
  background-color: #F7D451 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(247, 212, 81, 0.25) !important;
}

.gt-theme-btn-main.style-5 .gt-theme-btn-arrow-right,
.gt-theme-btn-main.style-5 .gt-theme-btn-arrow-left,
.gt-theme-btn-main .gt-theme-btn-arrow-right,
.gt-theme-btn-main .gt-theme-btn-arrow-left,
.gt-theme-btn-main.style-2 .gt-theme-btn-arrow-right,
.gt-theme-btn-main.style-2 .gt-theme-btn-arrow-left {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

.gt-theme-btn-main.style-5:hover .gt-theme-btn,
.gt-theme-btn-main:hover .gt-theme-btn,
.gt-theme-btn-main.style-2:hover .gt-theme-btn {
  background-color: #E5C33E !important;
  color: #000000 !important;
}

.gt-theme-btn-main.style-5:hover .gt-theme-btn-arrow-right,
.gt-theme-btn-main.style-5:hover .gt-theme-btn-arrow-left,
.gt-theme-btn-main:hover .gt-theme-btn-arrow-right,
.gt-theme-btn-main:hover .gt-theme-btn-arrow-left {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

/* Standard .theme-btn Component */
.theme-btn {
  background-color: #F7D451 !important;
  color: #000000 !important;
  border-radius: 50px !important;
}

.theme-btn .btn_inner .btn_text,
.theme-btn .btn_inner .btn_text span {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.theme-btn .btn_inner::before {
  background-color: #000000 !important;
}

.theme-btn .btn_inner .btn_icon,
.theme-btn .btn_inner .btn_icon i {
  color: #F7D451 !important;
}

.theme-btn:hover {
  background-color: #E5C33E !important;
}

.theme-btn:hover .btn_inner::before {
  width: 45px !important;
  background-color: #000000 !important;
}

.theme-btn:hover .btn_inner .btn_text,
.theme-btn:hover .btn_inner .btn_text span {
  color: #000000 !important;
}

.theme-btn:hover .btn_inner .btn_icon i {
  color: #F7D451 !important;
}

/* Contact / Form Submit Button */
.contact-submit-btn,
button.theme-btn,
.submit-btn {
  background: #F7D451 !important;
  color: #000000 !important;
  border: none !important;
}

.contact-submit-btn .btn-text,
button.theme-btn .btn_text span {
  color: #000000 !important;
  font-weight: 700 !important;
}

.contact-submit-btn .btn-icon,
button.theme-btn .btn_icon {
  background: #000000 !important;
  color: #F7D451 !important;
}

.contact-submit-btn:hover,
button.theme-btn:hover {
  background: #E5C33E !important;
  box-shadow: 0 8px 24px rgba(247, 212, 81, 0.4) !important;
}

.contact-submit-btn:hover .btn-icon,
button.theme-btn:hover .btn_icon i {
  background: #000000 !important;
  color: #F7D451 !important;
}

/* Footer Button */
.footer-btn {
  background-color: #F7D451 !important;
  color: #000000 !important;
  border-color: #F7D451 !important;
  font-weight: 700 !important;
}

.footer-btn .icon {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

.footer-btn:hover {
  background-color: #E5C33E !important;
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   3. Header & Navigation (Navbar)
   -------------------------------------------------------------------------- */
/* Header 1 (Inner Pages: Services, About, Projects, Blog, Contact, Team, Pricing, FAQ)
   High-contrast Pure White text on dark header background */
.header-1 .mean__menu-wrapper {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(14px) !important;
  border-radius: 70px !important;
}

.header-1 .main-menu ul li a,
.header-1 .mean__menu-wrapper .main-menu ul li a {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
  transition: color 0.3s ease !important;
}

.header-1 .main-menu ul li a:hover,
.header-1 .main-menu ul li.active > a,
.header-1 .main-menu ul li.has-dropdown.active > a,
.header-1 .mean__menu-wrapper .main-menu ul li a:hover,
.header-1 .mean__menu-wrapper .main-menu ul li.active > a {
  color: #1E8A8A !important;
  opacity: 1 !important;
}

.header-1 .mean__menu-wrapper .search-toggler {
  color: #FFFFFF !important;
  transition: color 0.3s ease !important;
}

.header-1 .mean__menu-wrapper .search-toggler:hover {
  color: #1E8A8A !important;
}

/* Sticky Header 1 on scroll */
.sticky.header-1,
header.header-1.sticky {
  background-color: #17282B !important; /* Deep Charcoal solid background */
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
}

.sticky.header-1 .main-menu ul li a,
header.header-1.sticky .main-menu ul li a {
  color: #FFFFFF !important;
}

.sticky.header-1 .main-menu ul li a:hover,
.sticky.header-1 .main-menu ul li.active > a,
header.header-1.sticky .main-menu ul li a:hover,
header.header-1.sticky .main-menu ul li.active > a {
  color: #1E8A8A !important;
}

.sticky.header-1 .mean__menu-wrapper .search-toggler,
header.header-1.sticky .mean__menu-wrapper .search-toggler {
  color: #FFFFFF !important;
}

/* Header 5 (Homepage on light sage hero) */
.header-5 {
  background-color: transparent !important;
}

.header-5.sticky,
.header-section.sticky {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(23, 40, 43, 0.08) !important;
}

.header-5 .main-menu ul li a,
.header-5 .mean__menu-wrapper .main-menu ul li a {
  color: #17282B !important;
  font-weight: 600 !important;
}

.header-5 .main-menu ul li a:hover,
.header-5 .main-menu ul li.active > a,
.header-5 .main-menu ul li.has-dropdown.active > a {
  color: #1E8A8A !important;
}

/* Dropdown Sub-menus (Always crisp pure white card with dark charcoal text) */
.main-menu ul li .submenu,
.main-menu ul li ul.submenu,
.header-1 .main-menu ul li .submenu,
.header-1 .main-menu ul li ul.submenu,
.header-5 .main-menu ul li .submenu,
.header-5 .main-menu ul li ul.submenu {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  box-shadow: 0 10px 30px rgba(23, 40, 43, 0.12) !important;
  border-radius: 8px !important;
}

.main-menu ul li .submenu li a,
.header-1 .main-menu ul li .submenu li a,
.header-5 .main-menu ul li .submenu li a {
  color: #17282B !important;
  font-weight: 500 !important;
}

.main-menu ul li .submenu li a:hover,
.header-1 .main-menu ul li .submenu li a:hover,
.header-5 .main-menu ul li .submenu li a:hover {
  color: #1E8A8A !important;
  background-color: #ECF0F0 !important;
}

/* Header Contact Info & Toggles */
.header-right .contact-info .icon {
  background-color: #D8E5E5 !important;
  color: #1E8A8A !important;
}

.header-right .contact-info .text {
  color: #17282B !important;
}

.header__hamburger .sidebar__toggle {
  color: #FFFFFF !important;
}

.header-5 .header__hamburger .sidebar__toggle {
  color: #17282B !important;
}

/* Mobile Offcanvas Navigation */
.offcanvas__info {
  background: #FFFFFF !important;
}

.offcanvas__info .mobile-menu li a,
.mean-container .mean-nav ul li a {
  color: #17282B !important;
  font-weight: 600 !important;
}

.offcanvas__info .mobile-menu li a:hover,
.offcanvas__info .mobile-menu li.active > a,
.mean-container .mean-nav ul li a:hover,
.mean-container .mean-nav ul li a.mean-clicked {
  color: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   4. Hero Section
   -------------------------------------------------------------------------- */
.hero-section-5,
.hero-5,
.hero-slider-wrapper,
.hero-5-slide {
  background-color: #D8E5E5 !important; /* Soft Sage Teal */
}

.hero-5-slide .hero-content .sub-title {
  color: #17282B !important;
  font-weight: 700 !important;
}

.hero-5-slide .hero-content .sub-title img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(51%) saturate(545%) hue-rotate(133deg) brightness(91%) contrast(89%); /* Teal */
}

.hero-5-slide .hero-content h1 {
  color: #17282B !important;
}

.hero-5-slide .hero-content p {
  color: #17282B !important;
  opacity: 0.9;
}

.hero-5-slide .hero-content .gt-theme-btn-main.style-5 .gt-theme-btn {
  background-color: #F7D451 !important;
  color: #000000 !important;
}

.hero-5-slide .hero-content .gt-theme-btn-main.style-5 .gt-theme-btn-arrow-right,
.hero-5-slide .hero-content .gt-theme-btn-main.style-5 .gt-theme-btn-arrow-left {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

/* --------------------------------------------------------------------------
   5. Brand & Marquee Sections
   -------------------------------------------------------------------------- */
.brand-section-5,
.brand-wrapper {
  background-color: #ECF0F0 !important; /* Light Gray */
  border-top: 1px solid #C6D9D9 !important;
  border-bottom: 1px solid #C6D9D9 !important;
}

.marquee-section3 .marquee,
.marquee-group,
.marquee-wrapper {
  background-color: #ECF0F0 !important;
}

.marquee-section3 .marquee .text,
.marquee-wrapper .text {
  color: #17282B !important;
}

/* --------------------------------------------------------------------------
   6. Service Section ("Built for Real-World Complexity")
   -------------------------------------------------------------------------- */
.service-section,
.service-box-items,
.service-card {
  background-color: #FFFFFF !important;
}

.section-title .sub-title {
  color: #1E8A8A !important;
  font-weight: 700 !important;
}

.service-box-items {
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  transition: all 0.35s ease !important;
}

.service-box-items:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 12px 30px rgba(30, 138, 138, 0.1) !important;
}

.service-box-items .content h3 a {
  color: #17282B !important;
}

.service-box-items .content h3 a:hover {
  color: #1E8A8A !important;
}

.service-box-items .content p {
  color: #17282B !important;
}

.service-box-items .icon {
  color: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   7. About Section ("Driven by Curiosity. Grounded in Engineering.")
   -------------------------------------------------------------------------- */
.about-section-5,
.about-section-5.section-bg-5 {
  background-color: #D8E5E5 !important; /* Soft Sage Teal */
}

.about-wrapper-5 .about-left-items .about-bottom-content {
  background: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
}

.about-counter {
  background-color: #F7D451 !important;
  color: #000000 !important;
  border-radius: 12px !important;
}

.about-counter .count,
.about-counter .sub-text,
.about-counter p,
.about-counter h2 {
  color: #000000 !important;
}

.about-wrapper-5 .about-left-items .about-bottom-content .content p {
  color: #17282B !important;
}

.about-icon-item {
  background: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
}

.about-icon-item .icon {
  background: #ECF0F0 !important;
  color: #1E8A8A !important;
}

.about-icon-item .content h3 {
  color: #17282B !important;
}

.about-icon-item .content p {
  color: #17282B !important;
}

.award-items-box {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  color: #17282B !important;
}

.award-items-box p {
  color: #17282B !important;
}

/* --------------------------------------------------------------------------
   8. Capabilities / Feature Slider ("One Technology Partner")
   -------------------------------------------------------------------------- */
.feature-section {
  background-color: #FFFFFF !important;
}

/* Equal height containers in Swiper & Grid */
.feature-box-slider .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.feature-box-slider .swiper-slide .feature-box-items {
  width: 100% !important;
}

.feature-section .row > div {
  display: flex !important;
}

.feature-section .row > div .feature-box-items {
  width: 100% !important;
}

/* Service Card Box */
.feature-box-items {
  background: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 16px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  margin-top: 0 !important;
  box-shadow: 0 4px 20px rgba(23, 40, 43, 0.04) !important;
  transition: all 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.feature-box-items:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 14px 35px rgba(30, 138, 138, 0.12) !important;
  transform: translateY(-4px) !important;
}

/* Fixed Image Container (Images on Top) */
.feature-box-items .service-thumb {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: 20px !important;
  background-color: #ECF0F0 !important;
}

.feature-box-items .service-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
  transition: transform 0.5s ease-in-out !important;
}

.feature-box-items:hover .service-thumb img {
  transform: scale(1.06) !important;
}

/* Card Body Content */
.feature-box-items .service-content-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

.feature-box-items h6 {
  color: #1E8A8A !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
}

.feature-box-items h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}

.feature-box-items h3 a {
  color: #17282B !important;
  transition: color 0.3s ease !important;
}

.feature-box-items h3 a:hover {
  color: #1E8A8A !important;
}

.feature-box-items p {
  color: #17282B !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  opacity: 0.85 !important;
  flex-grow: 1 !important;
}

/* Bottom capability tags and circular arrow icon */
.feature-box-items .feature-info-box {
  background: transparent !important;
  padding: 0 !important;
  border-top: 1px solid #C6D9D9 !important;
  padding-top: 18px !important;
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.feature-box-items .feature-info-box ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.feature-box-items .feature-info-box ul li {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  background: #ECF0F0 !important;
  color: #17282B !important;
  border: 1px solid #C6D9D9 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.feature-box-items .feature-info-box .icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background-color: #F7D451 !important;
  color: #000000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  margin-left: auto !important;
}

.feature-box-items:hover .feature-info-box .icon {
  background-color: #000000 !important;
  color: #F7D451 !important;
  transform: rotate(45deg) !important;
}

.array-button button {
  background: #ECF0F0 !important;
  border: 1px solid #C6D9D9 !important;
  color: #17282B !important;
}

.array-button button:hover {
  background: #1E8A8A !important;
  color: #FFFFFF !important;
  border-color: #1E8A8A !important;
}

.swiper-dot .dot {
  background: #C6D9D9 !important;
}

.swiper-dot .dot.swiper-pagination-bullet-active {
  background: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   9. Selected Solution Architectures (Project Section)
   -------------------------------------------------------------------------- */
.project-section,
.tp-project-5-2-area,
.section-bg-2 {
  background-color: #ECF0F0 !important; /* Light Gray */
}

.project-box-items,
.des-portfolio-panel {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  opacity: 1 !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(23, 40, 43, 0.05) !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

.project-box-area.des-portfolio-wrap {
  position: relative;
  border-radius: 14px;
}

.project-box-items:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 15px 35px rgba(30, 138, 138, 0.12) !important;
}

.project-box-items .content span.d-block {
  color: #1E8A8A !important;
  font-weight: 700 !important;
}

.project-box-items .content h3 a {
  color: #17282B !important;
}

.project-box-items .content h3 a:hover {
  color: #1E8A8A !important;
}

.project-box-items .content p {
  color: #17282B !important;
}

.project-box-items .icon {
  background-color: #F7D451 !important;
  color: #000000 !important;
}

.project-box-items .icon:hover {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

.project-box-items .number {
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(30, 138, 138, 0.35) !important;
}

/* --------------------------------------------------------------------------
   10. Choose Us / Delivery Approach ("From Discovery to Delivery")
   -------------------------------------------------------------------------- */
.choose-us-section-2 {
  background-color: #FFFFFF !important;
}

.choose-us-wrap-item .choose-us-content {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 20px rgba(23, 40, 43, 0.04) !important;
}

.choose-us-wrap-item .choose-us-content h3 {
  color: #17282B !important;
}

.choose-us-wrap-item .choose-us-content p {
  color: #17282B !important;
}

.choose-us-wrap-item .choose-us-content small {
  color: #1E8A8A !important;
  font-weight: 600 !important;
}

.choose-us-wrap-item:hover .choose-us-content {
  border-color: #1E8A8A !important;
}

.choose-us-wrap-item .left .number {
  color: #17282B !important;
  font-weight: 700 !important;
}

.choose-us-wrap-item .number-line {
  background-color: #C6D9D9 !important;
}

.choose-us-wrap-item .number-line-fill {
  background-color: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   11. Testimonials ("Clients Feedback")
   -------------------------------------------------------------------------- */
.testimonial-feedback-section {
  background-color: #D8E5E5 !important; /* Soft Sage Teal */
}

.feedback-badge {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #C6D9D9 !important;
}

.feedback-badge span {
  color: #17282B !important;
}

.feedback-title {
  color: #17282B !important;
}

.feedback-title .text-teal {
  color: #1E8A8A !important;
}

.feedback-nav-btn {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #C6D9D9 !important;
  color: #17282B !important;
}

.feedback-nav-btn:hover {
  background: #1E8A8A !important;
  border-color: #1E8A8A !important;
  color: #FFFFFF !important;
}

.feedback-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 2px solid transparent !important;
  box-shadow: 0 10px 30px rgba(23, 40, 43, 0.04) !important;
}

.feedback-card.active-border,
.feedback-card:hover {
  border-color: #1E8A8A !important;
}

.feedback-card .quote-icon svg path {
  fill: #1E8A8A !important;
}

.feedback-text {
  color: #17282B !important;
}

.feedback-divider {
  border-top: 1px dotted #C6D9D9 !important;
}

.author-info .author-name {
  color: #17282B !important;
}

.author-info .author-role {
  color: #1E8A8A !important;
}

.feedback-pagination .swiper-pagination-bullet {
  background: rgba(30, 138, 138, 0.35) !important;
}

.feedback-pagination .swiper-pagination-bullet-active {
  background: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   12. Global Contact & Worldwide Map
   -------------------------------------------------------------------------- */
.global-contact-section {
  background-color: #ECF0F0 !important; /* Light Gray */
}

.contact-badge {
  border: 1px solid #1E8A8A !important;
  background: rgba(30, 138, 138, 0.08) !important;
  color: #17282B !important;
}

.contact-badge span {
  color: #17282B !important;
}

.global-contact-form {
  background: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(23, 40, 43, 0.06) !important;
}

.global-contact-form input,
.global-contact-form textarea,
.global-contact-form select,
.contact-form input,
.contact-form textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  color: #17282B !important;
  border-radius: 8px !important;
}

.global-contact-form input:focus,
.global-contact-form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #1E8A8A !important;
  box-shadow: 0 0 0 3px rgba(30, 138, 138, 0.15) !important;
}

/* --------------------------------------------------------------------------
   13. Insights / News Articles
   -------------------------------------------------------------------------- */
.news-section {
  background-color: #FFFFFF !important;
}

.news-box-items {
  background: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 20px rgba(23, 40, 43, 0.04) !important;
  transition: all 0.35s ease !important;
}

.news-box-items:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 15px 35px rgba(30, 138, 138, 0.1) !important;
}

.news-box-items .content ul li a {
  color: #1E8A8A !important;
  font-weight: 600 !important;
}

.news-box-items .content ul li span {
  color: #17282B !important;
  opacity: 0.7;
}

.news-box-items .content h3 a {
  color: #17282B !important;
}

.news-box-items .content h3 a:hover {
  color: #1E8A8A !important;
}

.news-box-items .content p {
  color: #17282B !important;
}

.news-box-items .news-bottom .link-btn .content-wrap .default-content i,
.news-box-items .news-bottom .link-btn .content-wrap .hover-content i {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

.news-box-items .news-bottom .link-btn .content-wrap span {
  color: #17282B !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   14. CTA Newsletter Banner
   -------------------------------------------------------------------------- */
.cta-newsletter-section {
  background-color: #D8E5E5 !important; /* Soft Sage Teal */
}

.cta-newsletter-wrapper h2 {
  color: #17282B !important;
}

.cta-newsletter-wrapper h2 span {
  color: #1E8A8A !important;
}

.cta-newsletter-wrapper p {
  color: #17282B !important;
}

.cta-newsletter-wrapper .newsletter-form form input {
  background: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  color: #17282B !important;
}

.cta-newsletter-wrapper .newsletter-form form .email-btn {
  background: #F7D451 !important;
  color: #000000 !important;
}

.cta-newsletter-wrapper .newsletter-form form .email-btn:hover {
  background: #E5C33E !important;
}

/* --------------------------------------------------------------------------
   15. Full-Width Footer Section (Edge-to-Edge Deep Charcoal #17282B)
   -------------------------------------------------------------------------- */
.cta-newsletter-section,
body.home-index .cta-newsletter-section {
  position: relative;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.footer-section,
body.home-index .footer-section {
  padding-bottom: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background-color: #17282B !important; /* Deep Charcoal */
}

.footer-area,
body.home-index .footer-area {
  background-color: #17282B !important; /* Deep Charcoal */
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 1399px) {
  .cta-newsletter-section,
  body.home-index .cta-newsletter-section,
  .footer-area,
  body.home-index .footer-area {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.footer-widget-items .widget-head h3 {
  color: #FFFFFF !important;
}

.footer-widget-items .footer-content p {
  color: #ECF0F0 !important;
  opacity: 0.85;
}

.footer-widget-items .gt-list-area li a {
  color: #ECF0F0 !important;
  opacity: 0.85;
}

.footer-widget-items .gt-list-area li a:hover {
  color: #F7D451 !important;
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid rgba(198, 217, 217, 0.2) !important;
  background-color: transparent !important;
}

.footer-bottom p {
  color: rgba(236, 240, 240, 0.75) !important;
}

.footer-bottom p b,
.footer-bottom p a {
  color: #F7D451 !important;
}

.footer-bottom .social-icon a {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

.footer-bottom .social-icon a:hover {
  background-color: #1E8A8A !important;
  color: #FFFFFF !important;
}

.footer-bottom .footer-list li a {
  color: rgba(236, 240, 240, 0.75) !important;
}

.footer-bottom .footer-list li a:hover {
  color: #F7D451 !important;
}

/* --------------------------------------------------------------------------
   16. Inner Pages Design System (About, Services, Projects, Blog, Contact, etc.)
   -------------------------------------------------------------------------- */
/* Breadcrumb Banner */
.breadcrumb-wrapper {
  background-color: #D8E5E5 !important;
}

.breadcrumb-wrapper .page-heading h1 {
  color: #17282B !important;
}

.breadcrumb-wrapper .breadcrumb-items li {
  color: #17282B !important;
}

.breadcrumb-wrapper .breadcrumb-items li a {
  color: #17282B !important;
}

.breadcrumb-wrapper .breadcrumb-items li a:hover,
.breadcrumb-wrapper .breadcrumb-items li.active {
  color: #1E8A8A !important;
}

/* Inner Page Cards & Sections */
.about-inner-section,
.about-text-inner {
  background-color: #FFFFFF !important;
}

.about-counter-item {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
}

.about-counter-item h6 {
  color: #17282B !important;
}

.about-counter-item h2 .count {
  color: #1E8A8A !important;
}

.about-counter-item p {
  color: #17282B !important;
}

/* Team / Leadership Cards */
.team-box-item-3 {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
  transition: all 0.35s ease !important;
}

.team-box-item-3:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 12px 30px rgba(30, 138, 138, 0.1) !important;
}

.team-box-item-3 .content h3 {
  color: #17282B !important;
}

.team-box-item-3 .content .designation {
  color: #1E8A8A !important;
}

.team-box-item-3 .content .experience-line {
  color: #17282B !important;
  border-bottom-color: #C6D9D9 !important;
}

.team-box-item-3 .content .bio {
  color: #17282B !important;
}

.team-box-item-3 .thumb .social-icon a {
  background-color: #F7D451 !important;
  color: #000000 !important;
}

.team-box-item-3 .thumb .social-icon a:hover {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

/* Why Kramora (Choose Us 3) */
.choose-us-section-3 {
  background-color: #FFFFFF !important;
}

.choose-list li {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 12px !important;
}

.choose-list li.active,
.choose-list li:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 8px 24px rgba(30, 138, 138, 0.08) !important;
}

.choose-list li .icon {
  background-color: #ECF0F0 !important;
  color: #1E8A8A !important;
}

.choose-list li .content h3 {
  color: #17282B !important;
}

.choose-list li .content p {
  color: #17282B !important;
}

/* Inner Project Box Items (Approach / Solution Architecture Cards) */
.project-box-items-3 li {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  box-shadow: 0 4px 20px rgba(23, 40, 43, 0.04) !important;
}

.project-box-items-3 li:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 12px 30px rgba(30, 138, 138, 0.1) !important;
}

.project-box-items-3 li .content span {
  color: #1E8A8A !important;
  font-weight: 600 !important;
}

.project-box-items-3 li .content h3 a {
  color: #17282B !important;
}

.project-box-items-3 li .content h3 a:hover {
  color: #1E8A8A !important;
}

.project-box-items-3 li .content p {
  color: #17282B !important;
}

.project-box-items-3 li .content .icon {
  background-color: #F7D451 !important;
  color: #000000 !important;
}

.project-box-items-3 li .content .icon:hover {
  background-color: #000000 !important;
  color: #F7D451 !important;
}

/* FAQ Accordion */
.faq-section,
.faq-section-3 {
  background-color: #ECF0F0 !important;
}

.accordion-item {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 12px !important;
}

.accordion-header .accordion-button {
  background-color: #FFFFFF !important;
  color: #17282B !important;
  font-weight: 600 !important;
}

.accordion-header .accordion-button:not(.collapsed) {
  color: #1E8A8A !important;
  background-color: #FFFFFF !important;
}

.accordion-body {
  color: #17282B !important;
}

/* Pricing Section */
.pricing-section {
  background-color: #FFFFFF !important;
}

.pricing-box-items {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
}

.pricing-box-items.active,
.pricing-box-items:hover {
  border-color: #1E8A8A !important;
  box-shadow: 0 15px 35px rgba(30, 138, 138, 0.12) !important;
}

.pricing-box-items .pricing-header h2 {
  color: #1E8A8A !important;
}

.pricing-box-items .pricing-header h3 {
  color: #17282B !important;
}

.pricing-box-items .pricing-list ul li {
  color: #17282B !important;
}

.pricing-box-items .pricing-list ul li i {
  color: #1E8A8A !important;
}

/* Contact Page */
.contact-section {
  background-color: #FFFFFF !important;
}

.contact-box-items {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
}

.contact-box-items .icon {
  background-color: #D8E5E5 !important;
  color: #1E8A8A !important;
}

.contact-box-items .content h3 {
  color: #17282B !important;
}

.contact-box-items .content p,
.contact-box-items .content a {
  color: #17282B !important;
}

.contact-box-items .content a:hover {
  color: #1E8A8A !important;
}

/* Pagination across news / inner pages */
.page-nav-wrap ul li a {
  background: #ECF0F0 !important;
  border: 1px solid #C6D9D9 !important;
  color: #17282B !important;
}

.page-nav-wrap ul li a:hover,
.page-nav-wrap ul li a.active {
  background: #1E8A8A !important;
  border-color: #1E8A8A !important;
  color: #FFFFFF !important;
}

/* Sidebar Widgets across blog / service details */
.main-sidebar .single-sidebar-widget {
  background-color: #FFFFFF !important;
  border: 1px solid #C6D9D9 !important;
  border-radius: 14px !important;
}

.main-sidebar .single-sidebar-widget .widget-title h3 {
  color: #17282B !important;
}

.main-sidebar .single-sidebar-widget ul li a {
  color: #17282B !important;
}

.main-sidebar .single-sidebar-widget ul li a:hover,
.main-sidebar .single-sidebar-widget ul li.active a {
  color: #1E8A8A !important;
}

/* --------------------------------------------------------------------------
   17. FIXED IMAGE CONTAINER BOUNDS & AUTO-ADJUSTMENT RULES (PRESERVED)
   -------------------------------------------------------------------------- */
/* Service Card Thumbnails (Fixed Bounds across Homepage Slider & Services Page) */
.feature-box-items .service-thumb {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.feature-box-items .service-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

@media (max-width: 767px) {
  .feature-box-items .service-thumb {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
}

/* Homepage About Images */
.about-wrapper-5 .about-left-items .about-thumb {
  height: 488px !important;
  max-height: 488px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

.about-wrapper-5 .about-left-items .about-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 14px !important;
}

.about-wrapper-5 .about-content .about-small-image {
  height: 100% !important;
  min-height: 231px !important;
  max-height: 250px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
}

.about-wrapper-5 .about-content .about-small-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

@media (max-width: 767px) {
  .about-wrapper-5 .about-left-items .about-thumb {
    height: 320px !important;
  }
}

/* Homepage Project Box Items */
.project-box-items {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  min-height: 520px !important;
}

.project-box-items .content {
  flex: 0 0 52% !important;
  max-width: 52% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.project-box-items .thumb {
  flex: 0 0 48% !important;
  max-width: 48% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
}

.project-box-items .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 14px 14px 0 !important;
}

@media (max-width: 1199px) {
  .project-box-items {
    display: block !important;
    min-height: auto !important;
  }
  .project-box-items .content {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .project-box-items .thumb {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
    border-radius: 0 0 14px 14px !important;
  }
  .project-box-items .thumb img {
    border-radius: 0 0 14px 14px !important;
  }
}

@media (max-width: 575px) {
  .project-box-items .thumb {
    height: 260px !important;
    min-height: 260px !important;
  }
}

/* Homepage Choose Us Image */
.choose-us-wrapper-2 .choose-us-image {
  height: 680px !important;
  max-height: 680px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}

.choose-us-wrapper-2 .choose-us-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
  display: block !important;
}

@media (max-width: 991px) {
  .choose-us-wrapper-2 .choose-us-image {
    height: 450px !important;
    margin-top: 30px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 575px) {
  .choose-us-wrapper-2 .choose-us-image {
    height: 320px !important;
  }
}

/* Homepage News Thumb */
.news-box-items {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.news-box-items .thumb {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 14px 14px 0 0 !important;
}

.news-box-items .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 14px 14px 0 0 !important;
}

.news-box-items .content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.news-box-items .content .news-bottom {
  margin-top: auto !important;
}

/* About Page Hero Image */
.about-inner-image {
  margin-top: 50px;
}

.about-inner-image .fix {
  height: 580px !important;
  max-height: 630px !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

.about-inner-image .fix img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 14px !important;
}

@media (max-width: 991px) {
  .about-inner-image .fix {
    height: 420px !important;
  }
}

@media (max-width: 575px) {
  .about-inner-image .fix {
    height: 250px !important;
  }
}

/* About Page Info Avatar */
.about-info .client-image img {
  width: 143px !important;
  height: 63px !important;
  max-width: 143px !important;
  max-height: 63px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* About Page Team Cards */
.team-box-item-3 {
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.team-box-item-3 .thumb {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 14px !important;
  margin: 0 !important;
}

.team-box-item-3 .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border-radius: 14px !important;
}

.team-box-item-3 .content {
  flex: 1 1 auto !important;
}

@media (max-width: 575px) {
  .team-box-item-3 .thumb {
    height: 320px !important;
    min-height: 320px !important;
  }
}

/* About Page Choose Us 3 */
.choose-us-wrapper-3 .choose-us-image {
  height: 640px !important;
  max-height: 722px !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
}

.choose-us-wrapper-3 .choose-us-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 14px !important;
}

.choose-us-wrapper-3 .choose-us-image .grap-shape {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 5;
}

@media (max-width: 991px) {
  .choose-us-wrapper-3 .choose-us-image {
    height: 420px !important;
    margin-bottom: 30px !important;
  }
}

@media (max-width: 575px) {
  .choose-us-wrapper-3 .choose-us-image {
    height: 280px !important;
  }
}

/* About Page Project Items */
.project-box-items-3 li {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

.project-box-items-3 li .thumb {
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

.project-box-items-3 li .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

.project-box-items-3 li .content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 991px) {
  .project-box-items-3 li {
    display: block !important;
  }
  .project-box-items-3 li .thumb {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 575px) {
  .project-box-items-3 li .thumb {
    height: 200px !important;
    min-height: 200px !important;
  }
}


/* ==========================================================================
   Interactive Expanding Work Accordion Section (Homepage)
   Matches Reference UI with Kramora Color Palette
   ========================================================================== */
.kramora-work-section {
  position: relative !important;
  background-color: #ECF0F0 !important;
  padding: 100px 0 110px !important;
  overflow: hidden !important;
}

.kramora-work-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 40px !important;
  gap: 24px !important;
}

.kramora-work-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: rgba(30, 138, 138, 0.12) !important;
  border: 1px solid rgba(30, 138, 138, 0.3) !important;
  color: #1E8A8A !important;
  padding: 6px 18px !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.kramora-work-title {
  color: #17282B !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
}

@media (max-width: 767px) {
  .kramora-work-title {
    font-size: 30px !important;
  }
}

/* Yellow CTA button in header */
.kramora-work-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  background-color: #F7D451 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 8px 10px 8px 24px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(247, 212, 81, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  white-space: nowrap !important;
}

.kramora-work-cta-btn:hover {
  background-color: #eec93e !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(247, 212, 81, 0.42) !important;
}

.kramora-work-cta-btn .cta-arrow-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #000000 !important;
  color: #F7D451 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: transform 0.35s ease !important;
}

.kramora-work-cta-btn:hover .cta-arrow-circle {
  transform: rotate(45deg) !important;
}

/* Accordion Gallery Container */
.kramora-work-accordion {
  display: flex !important;
  gap: 16px !important;
  height: 540px !important;
  width: 100% !important;
  position: relative !important;
}

/* Individual Work Panel */
.kramora-work-panel {
  position: relative !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: block !important;
  /* Smooth, calm ease-in-out transition - silky smooth, zero sudden boom or jerk */
  transition: flex 0.65s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  will-change: flex !important;
}

/* Active / Expanded Panel on Desktop */
@media (min-width: 992px) {
  .kramora-work-panel.active {
    flex: 4.2 1 0% !important;
  }
}

/* Card Image & Background */
.kramora-work-panel .panel-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.kramora-work-panel .panel-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: scale(1) !important;
  /* Gentle, calm zoom matching panel expansion */
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.kramora-work-panel.active .panel-img {
  transform: scale(1.05) !important;
}

/* Gradients and Overlays */
.kramora-work-panel .panel-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(23, 40, 43, 0.05) 0%, rgba(23, 40, 43, 0.35) 50%, rgba(23, 40, 43, 0.92) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0.65 !important;
  transition: opacity 0.65s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.kramora-work-panel.active .panel-overlay {
  opacity: 1 !important;
}

/* Content Area inside Card */
.kramora-work-panel .panel-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 32px 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
  z-index: 3 !important;
  white-space: normal !important;
  min-width: 320px !important;
  max-width: 100% !important;
}

/* Category Pill inside Card */
.kramora-work-panel .panel-category {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 5px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.4px !important;
}

/* Title inside Card */
.kramora-work-panel .panel-title {
  color: #FFFFFF !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Arrow Circle inside Card */
.kramora-work-panel .panel-arrow-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-color: #F7D451 !important;
  border: 1px solid #F7D451 !important;
  color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 0.35s ease, background-color 0.35s ease !important;
}

.kramora-work-panel.active:hover .panel-arrow-btn,
.kramora-work-panel .panel-arrow-btn:hover {
  transform: scale(1.08) rotate(45deg) !important;
  background-color: #f5cb32 !important;
}

/* Silky-Smooth Content Entrance on Desktop */
@media (min-width: 992px) {
  /* Collapsed state: instantly dissolve out softly in 0.2s, so it never clips awkwardly */
  .kramora-work-panel .panel-content {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity 0.2s ease-out 0s, transform 0.2s ease-out 0s, visibility 0.2s 0s !important;
  }

  /* Active/Expanded state: blooms gently into view after card has begun expanding */
  .kramora-work-panel.active .panel-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.45s ease-out 0.2s, transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s !important;
  }
}


/* Mobile & Tablet Responsiveness (< 992px) */
@media (max-width: 991px) {
  .kramora-work-section {
    padding: 70px 0 80px !important;
  }

  .kramora-work-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .kramora-work-accordion {
    flex-direction: column !important;
    height: auto !important;
    gap: 16px !important;
  }

  .kramora-work-panel {
    height: 220px !important;
    flex: none !important;
    width: 100% !important;
    border-radius: 16px !important;
  }

  .kramora-work-panel .panel-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 22px 20px !important;
    white-space: normal !important;
  }

  .kramora-work-panel .panel-title {
    font-size: 20px !important;
  }

  .kramora-work-panel .panel-arrow-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
  }
}