﻿/* MAIN WRAPPER */
.H-Our-S-Wrapper {
  max-width:1200px;
  margin:60px auto;
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:40px;
  align-items:start;
  padding:10px;
}

/* LEFT CONTENT */
.H-Our-S-Left {
  opacity:0;
  transform:translateY(30px);
  transition:all .8s ease;
}
.H-Our-S-Left.in-view {
  opacity:1;
  transform:none;
}
.H-Our-S-Eyebrow {
  color:#1e90ff;
  font-size:14px;
  font-weight:600;
  margin-bottom:10px;
  display:block;
  text-transform: uppercase;
}
.H-Our-S-Title {
  font-size:28px;
  margin:0 0 15px;
  font-weight:700;
  line-height:1.3;
}
.H-Our-S-Lead {
 margin-top:20px;
  line-height:1.6;
  margin-bottom:20px;
  font-size:14px;
}
.H-Our-S-Btn {
  background:#0a78d1;
  color:#fff;
  text-decoration:none;
  padding:12px 28px;
  border-radius:30px;
  font-weight:600;
  display:inline-block;
  transition:.4s;
  box-shadow:0 0 0 rgba(10,120,209,0.6);
}
.H-Our-S-Btn:hover {
  background:#085fa7;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 20px rgba(10,120,209,0.4);
}

/* RIGHT SIDE GRID */
.H-Our-S-Cards {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
}

/* SERVICE CARD BASE */
.H-Our-S-Card {
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  position:relative;
  overflow:hidden;
  opacity:0;
  transition:transform .6s ease, background 1.2s ease;
}

/* RIGHT-BOTTOM SHAPE */
.H-Our-S-Card::after {
  content:'';
  position:absolute;
  bottom:-60px;
  right:-60px;
  width:180px;
  height:180px;
  background:linear-gradient(135deg,rgba(10,120,209,0.55),rgba(10,120,209,0.35));
  clip-path: polygon(100% 0, 0 80%, 100% 100%);
  transition: transform 1.2s ease;
}
.H-Our-S-Card:hover::after {
  transform:translate(-130%,-130%) rotate(-50deg);
}

/* LEFT-BOTTOM SHAPE */
.H-Our-S-Card::before {
  content:'';
  position:absolute;
  bottom:-50px;
  left:-50px;
  width:140px;
  height:140px;
  background:linear-gradient(135deg,rgba(0, 180, 200,0.55),rgba(0, 180, 200,0.35));
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: transform 1.2s ease;
}
.H-Our-S-Card:hover::before {
  transform:translate(120%,-120%) rotate(40deg);
}

/* CARD HOVER GRADIENT */
.H-Our-S-Card:hover {
  background:linear-gradient(135deg,#0a78d1 0%,#0b5fa7 50%,#094b82 100%);
  background-size:200% 200%;
  animation:H-Our-S-GradientMove 6s ease infinite;
  transform:translateY(-8px);
  box-shadow:0 14px 28px rgba(0,0,0,0.2);
}
@keyframes H-Our-S-GradientMove {
  0% {background-position:0% 50%;}
  50% {background-position:100% 50%;}
  100% {background-position:0% 50%;}
}

/* ICON STYLING */
.H-Our-S-Icon {
  width:55px;
  height:55px;
  border-radius:12px;
  background:rgba(10,120,209,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  color:#0a78d1;
  transition:.3s;
}
.H-Our-S-Icon svg {
  width:26px;
  height:26px;
}

/* TEXT STYLING */
.H-Our-S-Card h3 {
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
  color:#222;
}
.H-Our-S-Card p {
  margin:0 0 14px;
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* LEARN MORE LINK */
.H-Our-S-Link {
  position:relative;
  display:inline-block;
  font-weight:600;
  color:#0a78d1;
  text-decoration:none;
  transition:.3s;
}
.H-Our-S-Link::after {
  content:'';
  position:absolute;
  left:50%;
  bottom:-2px;
  width:0;
  height:2px;
  background:#0a78d1;
  transition:all .4s ease;
}
.H-Our-S-Link:hover::after {
  width:100%;
  left:0;
  background:#fff;
}
.H-Our-S-Link:hover {
  color:#fff;
}

/* HOVER STATES */
.H-Our-S-Card:hover h3,
.H-Our-S-Card:hover p,
.H-Our-S-Card:hover .H-Our-S-Link,
.H-Our-S-Card:hover .H-Our-S-Icon {
  color:#fff;
}
.H-Our-S-Card:hover .H-Our-S-Icon {
  background:rgba(255,255,255,0.15);
}

/* SLIDE-IN EFFECTS */
.H-Our-S-SlideLeft {transform:translateX(-40px);}
.H-Our-S-SlideRight {transform:translateX(40px);}
.H-Our-S-Card.in-view {opacity:1;transform:translateX(0);}

/* RESPONSIVE */
@media (max-width:991px) {
  .H-Our-S-Wrapper {grid-template-columns:1fr;}
  .H-Our-S-Cards {grid-template-columns:repeat(2,1fr);}
  .H-Our-S-Left {text-align:center;}
  .H-Our-S-Btn {margin:auto;}
}
@media (max-width:600px) {
  .H-Our-S-Cards {grid-template-columns:1fr;}
  .H-Our-S-Title {font-size:24px;}
}

.H-Our-S-Subtitle {
    font-weight: 400; /* Semi-bold */
    font-size: 18px;
    color: #374151;
    margin-top: 0.5rem; /* Optional: spacing below heading */
}

/* ✅ MOBILE FIXES */
@media (max-width: 600px) {
  /* Cards को हमेशा center align रखें */
  .H-Our-S-Cards {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* Slide transform हटाएँ ताकि alignment न बिगड़े */
  .H-Our-S-SlideLeft,
  .H-Our-S-SlideRight {
    transform: none !important;
  }

  /* Card width को responsive बनाएं */
  .H-Our-S-Card {
    width: 100%;
    max-width: 100%;
  }
}

/* ✅ Overflow issue fix */
.H-Our-S-Wrapper {
  overflow-x: hidden;
}

/* ✅ Pseudo elements को safe रखें */
.H-Our-S-Card::before,
.H-Our-S-Card::after {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
