/* =========================================================
   dvx-icsr-pro.css  (Unique Professional UI - Compact)
   Page: ICSR Management
   ✅ Only affects elements with dvx- classes
   ✅ Keeps existing content/images unchanged
========================================================= */

/* Safety: Some templates hide WOW elements */
.wow { visibility: visible !important; opacity: 1 !important; }

/* Base page tone (does not break existing theme) */
.dvx-page{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------
   HERO (Page Title Area)
-------------------------------- */
/* ------------------------------
   HERO (Page Title Area) with Image Overlay
-------------------------------- */
.dvx-hero-area{
  position: relative;
  overflow: hidden;
  padding: 140px 0 90px !important;
  min-height: 420px !important;
  display: flex !important;
  align-items: center !important;
  background: #061b18;
}

.dvx-hero-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(135deg, 
      rgba(6, 27, 24, 0.85) 0%, 
      rgba(6, 27, 24, 0.95) 100%),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
  z-index: 1;
}

.dvx-hero-area::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(41,184,139,0.25), transparent 55%),
    radial-gradient(760px 360px at 80% 40%, rgba(41,184,139,0.15), transparent 60%),
    linear-gradient(180deg, rgba(3,10,12,0.40), rgba(3,10,12,0.90));
  z-index: 2;
}

.dvx-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.dvx-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.1) brightness(0.7);
  transform: scale(1.03);
}

.dvx-hero-container{
  position: relative;
  z-index: 3;
  width: 100%;
}

.dvx-hero-content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
}

.dvx-hero-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  color:#fff;
  font-weight:600;
  font-size: 14px;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.dvx-hero-pill i{
  color: #29b88b;
}

.dvx-hero-title{
  margin: 0 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.06 !important;
  color: #ffffff !important;
  font-size: clamp(36px, 4vw, 56px) !important;

  width: 100% !important;
  text-align: center !important;
  position: relative;
}

.dvx-hero-title span {
  background: linear-gradient(to right, #ffffff, #f0f0f0, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.dvx-hero-subtitle {
  color: rgba(255,255,255,0.92) !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  max-width: 700px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.dvx-breadcrumb-wrap{
  margin-top: 30px !important;
  width: 100%;
}

.dvx-breadcrumb{
  list-style:none;
  padding: 10px 14px !important;
  margin: 0 auto;
  display: inline-flex;
  gap: 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(15px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.dvx-breadcrumb li{
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 14px;
}

.dvx-breadcrumb li a{
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 2px 0;
  position: relative;
}

.dvx-breadcrumb li a:hover{
  color: #29b88b;
  transform: translateY(-1px);
}

.dvx-breadcrumb li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #29b88b;
  transition: width 0.3s ease;
}

.dvx-breadcrumb li a:hover::after {
  width: 100%;
}

.dvx-breadcrumb li:not(:last-child)::after{
  content:"/";
  margin-left: 14px;
  opacity: 0.4;
  color: rgba(255,255,255,0.7);
}

/* Decorative elements */
.dvx-hero-accent {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.dvx-hero-accent-1 {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,184,139,0.15) 0%, transparent 70%);
  filter: blur(40px);
  top: -150px;
  left: -150px;
}

.dvx-hero-accent-2 {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,184,139,0.12) 0%, transparent 70%);
  filter: blur(35px);
  bottom: -100px;
  right: -100px;
}

/* Image overlay effects */
.dvx-hero-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(600px 300px at 30% 40%, rgba(41,184,139,0.1), transparent 50%),
    radial-gradient(500px 250px at 70% 60%, rgba(66,153,225,0.08), transparent 50%);
  z-index: 1;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 1200px){
  .dvx-hero-area{
    padding: 120px 0 80px !important;
    min-height: 380px !important;
  }
  
  .dvx-hero-title{
    font-size: clamp(34px, 3.5vw, 48px) !important;
  }
}

@media (max-width: 991px){
  .dvx-hero-area{
    padding: 100px 0 70px !important;
    min-height: 340px !important;
  }
  
  .dvx-hero-content{
    gap: 16px !important;
  }
  
  .dvx-hero-title{
    font-size: clamp(32px, 3vw, 42px) !important;
  }
  
  .dvx-breadcrumb{
    padding: 12px 20px;
  }
}

/* =========================================================
   COMPACT SPACING (Reduce space between topics)
========================================================= */
.dvx-page .services-details-content.pt-100 {
  padding-top: 50px !important;
}

.dvx-page .services-details-content.pb-70 {
  padding-bottom: 50px !important;
}

@media (max-width: 768px){
  .dvx-hero-area{
    padding: 90px 0 60px !important;
    min-height: 300px !important;
  }
  
  .dvx-hero-title{
    font-size: clamp(28px, 2.5vw, 36px) !important;
  }
  
  .dvx-hero-subtitle{
    font-size: clamp(15px, 1.5vw, 18px) !important;
  }
  
  .dvx-breadcrumb{
    padding: 10px 16px;
    gap: 12px;
  }
  
  .dvx-breadcrumb li{
    font-size: 13px;
  }
}

@media (max-width: 576px){
  .dvx-hero-area{
    padding: 80px 0 50px !important;
    min-height: 280px !important;
  }
  
  .dvx-hero-title{
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  
  .dvx-hero-subtitle{
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  
  .dvx-breadcrumb{
    padding: 8px 14px;
    gap: 10px;
  }
  
  .dvx-breadcrumb li{
    font-size: 12px;
  }
}



/* ------------------------------
   SECTION SPACING (Compact)
-------------------------------- */
.dvx-section{
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}

.dvx-section-sm{
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

.dvx-section-lg{
  padding-top: 100px !important;
  padding-bottom: 80px !important;
}

/* remove old huge paddings if any */
.dvx-service-wrap{
  row-gap: 24px;
}

/* ------------------------------
   CONTENT BLOCKS
-------------------------------- */
.dvx-content-block{
  margin-bottom: 50px;
}

.dvx-content-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 991px) {
  .dvx-content-inner{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ------------------------------
   MEDIA CARD (Image)
-------------------------------- */
.dvx-media-card{
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.12),
    0 2px 0 rgba(41,184,139,0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dvx-media-card:hover{
  transform: translateY(-5px);
  box-shadow:
    0 25px 70px rgba(0,0,0,0.15),
    0 2px 0 rgba(41,184,139,0.15);
}

.dvx-media-img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* ------------------------------
   CONTENT CARD (Text)
-------------------------------- */
.dvx-content-card{
  padding: 32px 28px;
  border-radius: 20px;
  
  

}

.dvx-card-title{
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  color: #0a1a20 !important;
  font-size: 1.8rem !important;
}

.dvx-card-subtitle{
  font-weight: 600 !important;
  color: #29b88b !important;
  margin-bottom: 20px !important;
  font-size: 1.1rem !important;
}

.dvx-card-text{
  margin-bottom: 16px;
  color: #2d3a38;
  line-height: 1.75;
  font-size: 1rem;
}

.dvx-card-text strong{
  color: #122523;
  font-weight: 600;
}

/* Button refinement */
.dvx-btn{
  display: inline-flex !important;
  align-items:center !important;
  gap: 10px !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 25px rgba(41,184,139,0.25) !important;
  background: linear-gradient(135deg, #29b88b, #1f8b6e) !important;
  border: none !important;
  color: white !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.dvx-btn:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(41,184,139,0.35) !important;
  background: linear-gradient(135deg, #1f8b6e, #29b88b) !important;
}

.dvx-btn i{
  font-size: 16px;
  transition: transform 0.3s ease;
}

.dvx-btn:hover i{
  transform: translateX(4px);
}

/* mini highlights (nice professional detail) */
.dvx-mini-highlights{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.dvx-mini-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(41,184,139,0.08);
  border: 1px solid rgba(41,184,139,0.22);
  color:#15312b;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
}

.dvx-mini-item:hover{
  background: rgba(41,184,139,0.12);
  border-color: rgba(41,184,139,0.3);
  transform: translateY(-2px);
}

.dvx-mini-item i{
  color: #29b88b;
  font-size: 16px;
}

/* ------------------------------
   FEATURE GRID
-------------------------------- */
.dvx-feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.dvx-feature-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 28px 24px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.dvx-feature-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  border-color: rgba(41,184,139,0.2);
}

.dvx-feature-icon{
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(41,184,139,0.1), rgba(41,184,139,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(41,184,139,0.2);
  transition: all 0.3s ease;
}

.dvx-feature-card:hover .dvx-feature-icon{
  background: linear-gradient(135deg, #29b88b, #1f8b6e);
  border-color: #29b88b;
}

.dvx-feature-icon i{
  font-size: 24px;
  color: #29b88b;
  transition: all 0.3s ease;
}

.dvx-feature-card:hover .dvx-feature-icon i{
  color: white;
}

.dvx-feature-title{
  font-weight: 700 !important;
  color: #0a1a20 !important;
  margin-bottom: 12px !important;
  font-size: 1.2rem !important;
}

.dvx-feature-text{
  color: #4a5a60;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

/* ------------------------------
   CTA SECTION
-------------------------------- */
.dvx-cta-section{
  padding: 100px 0 !important;
}

.dvx-cta-container{
  position: relative;
  overflow:hidden;
  border-radius: 24px;
  padding: 48px 40px !important;
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(800px 400px at 80% 40%, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, #0d3a31, #132a27);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

.dvx-cta-content{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.dvx-cta-title{
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  margin-bottom: 16px !important;
  color: white !important;
  font-size: clamp(24px, 2.5vw, 36px) !important;
}

.dvx-cta-text{
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 32px !important;
}

.dvx-cta-btn{
  width: auto !important;
  min-width: 200px;
  justify-content: center !important;
  border-radius: 16px !important;
  padding: 16px 32px !important;
  font-size: 1.1rem !important;
  background: linear-gradient(135deg, #29b88b, #1f8b6e) !important;
}

.dvx-cta-btn:hover{
  background: linear-gradient(135deg, #1f8b6e, #29b88b) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(41,184,139,0.4) !important;
}

.dvx-cta-shape{
  position: absolute;
  opacity: 0.12;
  filter: saturate(1.1);
  pointer-events: none;
}

/* ------------------------------
   UTILITY CLASSES
-------------------------------- */
.dvx-text-center{
  text-align: center !important;
}

.dvx-text-left{
  text-align: left !important;
}

.dvx-text-right{
  text-align: right !important;
}

.dvx-mb-0{
  margin-bottom: 0 !important;
}

.dvx-mt-0{
  margin-top: 0 !important;
}

.dvx-mb-20{
  margin-bottom: 20px !important;
}

.dvx-mt-20{
  margin-top: 20px !important;
}

.dvx-mb-40{
  margin-bottom: 40px !important;
}

.dvx-mt-40{
  margin-top: 40px !important;
}

.dvx-color-primary{
  color: #29b88b !important;
}

.dvx-bg-light{
  background: #f8fafc !important;
}

.dvx-bg-dark{
  background: #0a1a20 !important;
}

/* ------------------------------
   Responsive
-------------------------------- */
@media (max-width: 1200px){
  .dvx-hero-area{
    padding: 120px 0 80px !important;
    min-height: 380px !important;
  }
  
  .dvx-hero-title{
    font-size: clamp(30px, 3.5vw, 44px) !important;
  }
  
  .dvx-content-inner{
    gap: 30px;
  }
}

@media (max-width: 991px){
  .dvx-hero-area{
    padding: 110px 0 70px !important;
    min-height: 350px !important;
  }
  
  .dvx-section{
    padding-top: 60px !important;
    padding-bottom: 50px !important;
  }
  
  .dvx-section-lg{
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
  
  .dvx-media-img{
    height: 350px;
  }
  
  .dvx-mini-highlights{
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dvx-cta-container{
    padding: 40px 30px !important;
  }
}

@media (max-width: 768px){
  .dvx-hero-area{
    padding: 100px 0 60px !important;
    min-height: 320px !important;
  }
  
  .dvx-hero-title{
    font-size: clamp(28px, 3vw, 36px) !important;
  }
  
  .dvx-hero-pill{
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .dvx-breadcrumb{
    padding: 10px 16px;
    gap: 8px;
  }
  
  .dvx-breadcrumb li{
    font-size: 13px;
  }
  
  .dvx-content-card{
    padding: 24px 20px;
  }
  
  .dvx-media-img{
    height: 300px;
  }
  
  .dvx-mini-highlights{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .dvx-feature-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .dvx-cta-section{
    padding: 80px 0 !important;
  }
  
  .dvx-cta-container{
    padding: 32px 24px !important;
  }
  
  .dvx-cta-title{
    font-size: clamp(22px, 2vw, 28px) !important;
  }
}

@media (max-width: 576px){
  .dvx-hero-area{
    padding: 90px 0 50px !important;
    min-height: 300px !important;
  }
  
  .dvx-hero-title{
    font-size: 26px !important;
  }
  
  .dvx-content-inner{
    gap: 24px;
  }
  
  .dvx-content-card{
    padding: 20px 16px;
  }
  
  .dvx-card-title{
    font-size: 1.5rem !important;
  }
  
  .dvx-media-img{
    height: 250px;
  }
  
  .dvx-btn{
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }
  
  .dvx-cta-btn{
    min-width: 180px;
    padding: 14px 24px !important;
  }
}