/* Start Our Custom CSS Here */


/* FIX IMAGE SIZE SAME */
.page-title .title {
    color: #fff;
    font-size:50px;
    font-weight:600;
}


/* CENTER IMAGE ZOOM */
.scale-center {
    transform: scale(1.08);
    z-index: 2;
}

.avatar {
    width: 40px;
    height: 40px;
    background: #A61B1F;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.google-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.stars {
    color: #f4b400;
    font-size: 18px;
    margin: 5px 0;
}

.read-more {
    color: gray;
    font-size: 14px;
    cursor: pointer;
}

.gallery-section {
    background-color: var(--Color-1);
    width: 100%;
}


/*Hero Section ka code */

:root {
    --primary: #192A3A;
    --secondary: #323A61;
    --accent: #A31A1E;
    --white: #ffffff;
    --black: #000000;
    --overlay-default: rgba(27, 23, 20, 0.20);
	--overlay-hover: rgba(27, 23, 20, 0.62);
	--text-light: #ffffff;
	--card-radius: 16px;
	--zoom-scale: 1.07;
	--hover-speed: 0.45s;
}



/* HERO SECTION */
.hero {
    width: 100%;
    min-height: 100vh;
    padding: 100px 40px;
    display: flex;
    align-items: center;
    background: #D7E4E9;
}


/* CONTAINER */
.hero-container {
    max-width: 1600px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
}

/* LEFT CONTENT */
.hero-content {
    flex: 1.1;
    animation: fadeUp 0.8s ease forwards;
}

/* BADGE */
.clinic-badge {
    display: inline-block;
    background: rgba(50, 58, 97, 0.08);
    color: var(--secondary);
    padding: 15px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* HEADING */
.hero-heading .main-title {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
}

.hero-heading .clinic-name {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--secondary);
    margin-top: 10px;
    padding-left: 12px;
    border-left: 4px solid var(--accent);
}

/* DESCRIPTION */
.hero-description {
    margin-top: 25px;
    font-size: 17px;
    line-height: 1.7;
    color: #2c3a44;
    max-width: 90%;
}

/* BUTTON */
.btn-appointment {
    display: inline-block;
    margin-top: 30px;
    background: #333A63;
    color: #fff;
    padding: 20px 32px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-appointment:hover {
    background: #7f1518;
    transform: scale(1.05);
}

/* TRUST ITEMS */
.trust-badge {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.trust-item {
    font-size: 18px;
    color: #3a4a5a;
}

/* IMAGE SIDE */
.hero-image {
    flex: 1;
    height: 550px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    transition: 0.4s ease;
}

.hero-image:hover {
    transform: translateY(-8px);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

.hero-image:hover img {
    transform: scale(1.05);
}

/* OVERLAY */
.hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
            rgba(25, 42, 58, 0.02),
            rgba(50, 58, 97, 0.08));
}

/* ANIMATION */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 992px) {
    .hero {
        padding: 70px 25px;
    }

    .hero-container {
        flex-direction: column;
        gap: 3rem;
    }

    .hero-content {
        text-align: left;
    }

    .hero-description {
        max-width: 100%;
    }

    .hero-image {
        width: 100%;
        height: 420px;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 60px 20px;
    }

    .hero-heading .main-title {
        font-size: 28px;
    }

    .hero-heading .clinic-name {
        font-size: 20px;
    }

    .hero-description {
        font-size: 15px;
    }

    .btn-appointment {
        padding: 12px 24px;
        font-size: 14px;
    }

    .hero-image {
        height: 300px;
    }
}






/* SECTION  */
.mental-section {
    background: linear-gradient(135deg,
            #ffffff 0%,
            rgba(25, 42, 58, 0.05) 50%,
            rgba(163, 26, 30, 0.05) 100%);
    padding: 80px 0;
}

/* CARD */
.info-card {
    background: #fff;
    border-radius: 18px;
    padding: 25px;
    height: 100%;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* ICON */
.info-icon {
    font-size: 38px;
    color: var(--secondary);
    min-width: 50px;
    transition: 0.3s;
}

.info-card:hover .info-icon {
    color: var(--accent);
    transform: scale(1.1);
}

/* TEXT */
.info-card h5 {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--primary);
}

.info-card p {
    margin: 0;
    color: #444;
    font-size: 18px;
}

/* HIGHLIGHT BOX */
.highlight-box {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    font-size: 18px;
    line-height: 1.7;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-left: 5px solid var(--accent);
}

/* BUTTON */
.cta-btn {
    background: var(--secondary);
    color: #fff;
    padding: 16px 30px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(163, 26, 30, 0.3);
}

/* IMAGE */
.profile-img {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 5px solid #fff;
    transition: 0.4s;
}

.profile-img:hover {
    transform: scale(1.05);
}

/* TEXT */
.description-text {
    font-size: 18px;
    line-height: 1.8;
    color: #2c3a44;
}

/* RESPONSIVE */
@media(max-width:992px) {

    .highlight-box {
        font-size: 16px;
    }

    .description-text {
        font-size: 16px;
    }

    .profile-img {
        width: 200px;
        height: 200px;
    }

}

@media(max-width:576px) {

    .mental-section {
        padding: 6px 0;
    }

    .info-card {
        padding: 20px;
    }

    .highlight-box {
        padding: 20px;
        font-size: 15px;
    }

    .cta-btn {
        width: 100%;
    }

    .profile-img {
        width: 160px;
        height: 160px;
    }

}


.home-page .sub-heading-style ul li p {
    font-weight: 300;
    font-size: 17px;
    line-height: 24px;
}


/* Emergency Banner */
.emergency-banner {
    background: linear-gradient(135deg, #192A3A, #323A61);
    color: #fff;
    padding: 30px 0;
}

.call-btn {
    background: #A31A1E;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}



/* Heading */
.heading-icon {
    font-size: 40px;
    color: #323A61;
    margin-bottom: 10px;
}

/* Cards */
.price-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 35px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    margin: 10px;
}

.price-card i {
    font-size: 35px;
    color: #323A61;
    margin-bottom: 15px;
}

.price-card h5 {
    font-weight: 600;
    color: #192A3A;
}

.price-card span {
    display: block;
    margin-top: 10px;
    font-weight: 600;
}

/* Hover Effect */
.price-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #323A61, #192A3A);
    color: #fff;
}

.price-card:hover i,
.price-card:hover h4,
.price-card:hover span {
    color: #fff;
}

.emergency-banner h3 {
    color: white;
}

.pricing-section {
    margin-top: 20px;
}


/*Location part ke css*/

/* Section */
.location-section {
    margin-top: 60px;
}

/* Map Background */
.map-bg iframe {
    width: 100%;
    height: 500px;
    filter: grayscale(20%);
}

/* Floating Card */
.location-overlay-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    margin-top: -150px;
    /* overlap effect */
    position: relative;
    z-index: 2;
}

/* Hover subtle */
.location-overlay-card:hover {
    transform: translateY(-5px);
    transition: 0.3s;
}

/* List */
.home-page .location-overlay-card ul li {
    margin-bottom: 6px;
    font-weight: 500;
}


.small-text {
    max-width: 400px;
    /* width control */

}



.trust-badge .trust-item span {
    
    color: #333;
}

.counter-box p {
    font-size: 18px;
    color: #323A61;
    margin-top: 8px;
}

p.counter {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #323A61 !important;
}

#footer p{
    color:black;
    line-height:40px;
    font-size:18px;
}
#footer li a {
    color:black;
}

 #footer .tf-social li a{
     background-color:#323A61;
     color:white;
 } 

.section-book-appointment img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    /*margin-top:95px;*/
    margin-right:70px;
}

.services-section {
	padding: 3.5rem 0;
	font-family: "DM Sans", sans-serif;
}

.service-card {
	position: relative;
	border: 0;
	border-radius: var(--card-radius);
	overflow: hidden;
	min-height: 360px;
	isolation: isolate;
}

.service-image {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--hover-speed) ease;
}

.service-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--text-light);
	background: var(--overlay-default);
	padding: 1.5rem;
	transition: background var(--hover-speed) ease;
}

.service-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 3rem);
	/*font-size: 2rem;*/
	/*font-weight: 500;*/
	/*line-height: 1.2;*/
	
	color:white;    
	margin: 0;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-desc {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 12px));
	width: calc(100% - 3rem);
	max-width: 31ch;
	margin: 0;
	/*font-size: 1.75rem;*/
	/*line-height: 1.45;*/
	/*font-weight: 500;*/
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.service-card:hover .service-image {
	transform: scale(var(--zoom-scale));
}

.service-card:hover .service-overlay {
	background: var(--overlay-hover);
}

.service-card:hover .service-title {
	opacity: 0;
	transform: translate(-50%, calc(-50% - 10px));
}

.service-card:hover .service-desc {
	opacity: 1;
	transform: translate(-50%, -50%);
}

@media (max-width: 991.98px) {
	.service-card,
	.service-image {
		min-height: 320px;
	}

	.service-title,
	.service-desc {
		font-size: 1.85rem;
	}
}

@media (max-width: 575.98px) {
	.service-card,
	.service-image {
		min-height: 300px;
	}

	.service-title,
	.service-desc {
		font-size: 1.25rem;
	}
}
	
.map-section ul {
    padding-left: 20px;
}

.map-section ul li {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
    list-style-type: disc;
}

.psychiatrist-pages p a,
.psychiatrist-pages span a {
    color: red;
} 
.psychiatrist-pages ul li a{
    color: red;
}

.psychiatrist-pages ul li {  
    padding:5px;
    list-style-type: disc;
    line-height:25px;
}
.psychiatrist-pages ul{
    margin:10px;
    padding:10px;
}



.accordion-button {
    font-size: 18px;
    font-weight: 600;
    padding: 18px 20px;
}

.accordion-body {
    font-size: 16px;
    line-height: 1.7;
    padding: 18px 20px;
}

.accordion-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-button::after {
    transform: scale(1.3); /* icon bada */
}


.psychiatrist-pages div img {
    height:320px;
}   

@media (min-width: 992px) {
  .certificate-Slider-arrow-start {
    margin-left: -90px;
  }

  .certificate-Slider-arrow-end {
    margin-right: -90px;
  }
}

/*New*/

.review-box {
    background: #f3f4f7;
    border-radius: 16px;
    height: 100%;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}

.bg-purple { background: #8e44ad; }
.bg-orange { background: #f4511e; }
.bg-green { background: #2e7d32; }
.bg-red { background: #c62828; }

.g-icon {
    width: 20px;
}

.stars {
    color: #fbbc04;
    font-size: 18px;
}

.verify {
    color: #1a73e8;
    font-size: 14px;
}

.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.carousel-control-prev {
    left: -20px;
}

.carousel-control-next {
    right: -20px;
}

@media (max-width: 768px) {
    .carousel-item .col-md-6,
    .carousel-item .col-lg-4 {
        display: none;
    }

    .carousel-item .col-12:first-child {
        display: block;
    }
    

 /* LEFT ARROW */
    .arrow-left-mobile {
        left: -5px !important;
    }

    /* RIGHT ARROW */
    .arrow-right-mobile {
        right: -5px !important;
    }
}
.service-link .wrap-service .service-item-list:hover h6 a {
    color: #fff !important;
}


.review-card {
    background: #F4F4F4;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    height: 100%;
}


.tf-social li a:hover svg {
    fill: #fff !important;
}

@media (max-width: 768px) {
  .main-content {
    margin-top: 0px !important;
  }

  .tf-spacing-1 {
    margin-top: 0px !important;
  }
}

.call-btn:hover {
  color: #f5f5f5; /* pure white se thoda soft */  
}

.breadcrumbs li a {
  font-size: 20px;
}

.list-info li a {
  font-size: 19px;
  margin-bottom:18px;
}

/*Contact Page Card*/

.contact-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 40px 25px;
  border: 1px solid #dfe6ee;
  transition: 0.3s ease;
}

/* colored border effect */
.col-md-4:nth-child(1) .contact-box {
  box-shadow: 0 0 0 1px #bde0fe;
}
.col-md-4:nth-child(2) .contact-box {
  box-shadow: 0 0 0 1px #d0bfff;
}
.col-md-4:nth-child(3) .contact-box {
  box-shadow: 0 0 0 1px #bde0fe;
}

/* icon */
.contact-box i {
  font-size: 40px;
  color: #2f3a5a;
}

/* title */
.contact-box h3 {
  font-size: 32px;
  font-weight: 600;
  color: #2f3a5a;
}

.contact-box p a {
  font-size: 17px;
  font-weight: 600;
  color: #2f3a5a;
}

/* hover */
.contact-box:hover {
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .page-title .title {
    font-size: 26px;      /* readable size */
    line-height: 1.3;     /* proper spacing */
    font-weight: 600;     /* balanced bold */
  }
}

.why-consult-sitapur span{
    font-size:18px;
    font-weight:600;
    margin-left:20px;
}

.about-sitapur ul li {
    font-size:18px;
    margin-left:20px;
    
}
.about-sitapur p {
    font-size:18px;
}
.about-sitapur ul {
  line-height: 2;
  list-style-type: disc !important;
  padding-left: 20px; /* ← yeh add karo */
}

.sultanpur-page p{
    font-size:20px;
    line-height:2;
}

.about-sultanpur{
    overflow: hidden;
}

.about-sultanpur::after{
    content: "";
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    background: url('../images/section/Sultanpur_district-scaled.png') no-repeat center;
    background-size: contain;
    opacity: 0.15; /* watermark look */
    pointer-events: none;
}


 
   
    .submenu-popup {
      max-width: 600px;          /* slightly wider to fit 2 columns comfortably */
      width: 100%;
      background: #7b392a4d;
      border-radius: 28px;
      box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease;
      border: 1px solid rgba(110, 142, 210, 0.25);
      position: relative;
      backdrop-filter: blur(2px);
      overflow: visible;
    }

    /* subtle floating effect */
    .submenu-popup:hover {
      transform: translateY(-3px);
      box-shadow: 0 28px 40px -14px rgba(48, 72, 130, 0.3);
    }

    /* inner container */
    .popup-inner {
      padding: 1.5rem 1.4rem 1.8rem 1.4rem;
      position: relative;
      z-index: 2;
     overflow: hidden; /* 🔥 main fix */
     
    }

    /* header section - compact but creative */
    .popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
      gap: 0.5rem;
      border-bottom: 1px solid #eef2fc;
      padding-bottom: 0.75rem;
    }

    .title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .title-wrap i {
      font-size: 1.5rem;
      background: linear-gradient(145deg, #4f7df3, #2f54b0);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .popup-title {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.3px;
      background: linear-gradient(135deg, #1f2b5c, #2f4b8f);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .badge-popup {
      background: #eff3fe;
      padding: 0.2rem 0.7rem;
      border-radius: 40px;
      font-size: 0.7rem;
      font-weight: 600;
      color: #2e4a8e;
    }

    /* SERVICES GRID - NO SCROLL, AUTO HEIGHT, ALL ITEMS VISIBLE */
    .services-compact-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.7rem;
      margin-top: 0.5rem;
      /* NO max-height, NO overflow-y — scroll hata diya */
    }

    /* service item card - small, modern, glassy */
    .service-compact-item {
      background: #ffffff;
      border-radius: 18px;
      transition: all 0.2s;
      border: 1px solid #eef2fc;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }

    .service-compact-item:hover {
      background: #fafdff;
      border-color: #cddcff;
      transform: translateX(3px);
      box-shadow: 0 6px 12px -8px rgba(79, 125, 243, 0.2);
    }

    .service-link-compact {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0.7rem 0.8rem;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.8rem;
      color: #1f2d4e;
      transition: all 0.2s;
    }

    /* unique icons per disorder (small but creative) */
    .service-link-compact .item-icon {
      width: 28px;
      height: 28px;
      background: #f5f9ff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      flex-shrink: 0;
      transition: 0.2s;
    }

    .service-compact-item:hover .item-icon {
      transform: scale(1.05);
      background: #eef3ff;
    }

    .service-text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 15px;
      font-weight: 500;
    }

    /* small arrow */
    .arrow-icon {
      font-size: 0.7rem;
      color: #adc3f0;
      transition: 0.2s;
      opacity: 0.6;
    }

    .service-compact-item:hover .arrow-icon {
      opacity: 1;
      color: #4f7df3;
      transform: translateX(2px);
    }

    /* creative individual icon colors (each service different) */
    .service-compact-item:nth-child(1) .item-icon { background: #eef2ff; color: #3b5bdb; }
    .service-compact-item:nth-child(2) .item-icon { background: #fff0e6; color: #e67e22; }
    .service-compact-item:nth-child(3) .item-icon { background: #ede7ff; color: #8855ff; }
    .service-compact-item:nth-child(4) .item-icon { background: #e0f7ef; color: #0e9f6e; }
    .service-compact-item:nth-child(5) .item-icon { background: #ffe4ed; color: #e83e8c; }
    .service-compact-item:nth-child(6) .item-icon { background: #eef2fa; color: #4b556b; }
    .service-compact-item:nth-child(7) .item-icon { background: #ffe8e6; color: #e6492d; }
    .service-compact-item:nth-child(8) .item-icon { background: #faeaff; color: #be5e9c; }
    .service-compact-item:nth-child(9) .item-icon { background: #fff0da; color: #f39c12; }
    .service-compact-item:nth-child(10) .item-icon { background: #e3f0ff; color: #2c7be5; }
    .service-compact-item:nth-child(11) .item-icon { background: #f0e9ff; color: #a461ff; }
    .service-compact-item:nth-child(12) .item-icon { background: #e0f4fa; color: #1396b9; }
    .service-compact-item:nth-child(13) .item-icon { background: #ffefcf; color: #e68a2e; }
    .service-compact-item:nth-child(14) .item-icon { background: #f0f2f5; color: #6c757d; }
    .service-compact-item:nth-child(15) .item-icon { background: #e6e9ff; color: #6f42c1; }
    .service-compact-item:nth-child(16) .item-icon { background: #e2f0fe; color: #0d8fba; }
    .service-compact-item:nth-child(17) .item-icon { background: #fff5dd; color: #e1ad01; }

    /* small footer / hint */
    .popup-footer {
      margin-top: 1rem;
      text-align: right;
      font-size: 0.65rem;
      color: #8b9acf;
      border-top: 1px solid #eff3fc;
      padding-top: 0.7rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
    }

    /* responsive: on smaller screens, single column but still NO SCROLL */
    @media (max-width: 550px) {
      body {
        padding: 1rem;
      }
      .submenu-popup {
        max-width: 100%;
      }
      .services-compact-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
      }
      .popup-inner {
        padding: 1.2rem 1rem;
      }
      .service-link-compact {
        padding: 0.65rem 0.7rem;
      }
    }

    /* floating animation on load */
    @keyframes gentlePop {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .submenu-popup {
      animation: gentlePop 0.25s ease-out;
    }

    /* optional decorative glow */
    .submenu-popup::before {
      content: '';
      position: absolute;
      top: -15%;
      right: -10%;
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, rgba(79,125,243,0.05) 0%, rgba(255,255,255,0) 80%);
      border-radius: 50%;
      pointer-events: none;
    }
  
  
  .section-service .service-item .sub-heading-style ul li a {
    color: black;
}

.emergency-banner .container {
    gap: 90px;
}
.emergency-banner .container h2{
    color:white;
}

.font23{
    font-size:23px !important;
}
@media (max-width: 767.98px) {
    .emergency-banner .container {
        gap: 23px;
    }
}


/* ==================== SERVICE CARD IMAGE ==================== */

.service-item.style-2 {
    overflow: hidden;
}

.service-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-item.style-2:hover .service-img {
    transform: scale(1.05);
}

/* Image ke baad content me padding adjust */
.service-item.style-2 .content {
    padding-top: 20px;
}

/* Agar card ki fixed height h-280 hai to usse auto karna hoga */
.service-item.style-2.h-280 {
    height: auto;
   
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 991px) {
    .service-img-wrap {
        height: 180px;
    }
}

@media (max-width: 767px) {
    .service-img-wrap {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .service-img-wrap {
        height: 180px;
    }
}








/*New Css*/


/* ==================== TOP BAR ==================== */

.topbar {
    padding: 12px 0;
    background-color: #0D3F4A;
}

.topbar .container {
    max-width: 1320px;
    padding: 0 25px;
    margin: 0 auto;
}

.topbar .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ---------- Contact Info (Left Side) ---------- */
.topbar-contact-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.topbar-contact-info ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 400;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.topbar-contact-info ul li a:hover {
    color: #A31B1E;
}

.topbar-contact-info ul li a img {
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.topbar-contact-info ul li a i {
    font-size: 15px;
    flex-shrink: 0;
}

/* ---------- Social Links + Button (Right Side) ---------- */
.topbar-social-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

.topbar-social-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-social-links ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.topbar-social-links ul li a:hover {
    background: #A31B1F;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(97, 158, 144, 0.35);
}

/* ---------- Book Appointment Button (NEW CLASS) ---------- */
.btn-book-appointment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    background: #A31B1F;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.btn-book-appointment:hover {
    background: #ffffff;
    color: #0D3F4A;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.25);
}

.btn-book-appointment span {
    display: inline-block;
}

/* ==================== RESPONSIVE ==================== */

/* Tablet: Hide topbar */
@media (max-width: 991px) {
    .topbar {
        display: none;
    }
}

/* Desktop: Show topbar */
@media (min-width: 992px) {
    .topbar.d-md-block {
        display: block !important;
    }
}

/* Small Desktop: Reduce gap */
@media (max-width: 1199px) {
    .topbar-contact-info ul {
        gap: 20px;
    }
    
    .topbar-contact-info ul li a {
        font-size: 13px;
    }
    
    .topbar-social-links ul li a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    .topbar-social-links {
        gap: 10px;
    }
    
    .btn-book-appointment {
        padding: 8px 16px;
        font-size: 13px;
    }
}

#header-main .header-inner{
    transition: all 0.3s ease;
}

/* Scroll hone ke baad */
#header-main .header-inner.scrolled{
    background-color: #b5d9f6;
}

.custom-border{
    border: 1px solid #090949;
}

@media (max-width: 767px){
    .box-about h2{
        margin-top: 30px;
    }
}


/*About Page */

  .about-redesign-wrap {
    padding: 54px 0 70px;
    background:
      radial-gradient(640px circle at 8% 2%, rgba(207, 241, 254, 0.78), transparent 62%),
      radial-gradient(580px circle at 100% 36%, rgba(50, 58, 97, 0.1), transparent 68%),
      #f7fbff;
  }

  .about-orbit {
    display: grid;
    grid-template-columns: 1.2fr 0.85fr;
    gap: 28px;
    align-items: center;
  }

  .about-copy {
    position: relative;
    padding-right: 10px;
  }

  .about-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f4ff;
    border: 1px solid #cde5fa;
    border-radius: 999px;
    padding: 8px 14px;
    margin-bottom: 14px;
    color: #323a61;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .about-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #323a61;
  }

  .about-copy h2,
  .about-flow-card h3,
  .about-spectrum h2 {
    color: #323a61;
    margin-bottom: 14px;
  }

  .about-image-orbit {
    position: relative;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(155deg, #d9eeff 0%, #f4faff 100%);
    box-shadow: 0 16px 32px rgba(35, 50, 87, 0.16);
    transition: transform 0.95s ease, box-shadow 0.45s ease;
  }

  .about-image-orbit:hover {
    transform: translateY(-5px) rotate(0deg);
    box-shadow: 0 24px 38px rgba(35, 50, 87, 0.24);
  }

  .about-image-orbit img {
    width: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
  }   
  
  .about-metric-rail {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cde5fa;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  .about-metric-rail div {
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid #e0eefb;
  }

  .about-metric-rail div:last-child {
    border-right: 0;
  }

  .about-metric-rail strong {
    display: block;
    color: #323a61;
    font-size: 1.2rem;
    line-height: 1.1;
  }

  .about-metric-rail span {
    color: #41517c;
    font-size: 0.88rem;
  }

  .about-flow {
    margin-top: 26px;
    display: grid;
    gap: 16px;
  }

  .about-flow-card {
    position: relative;
    padding: 24px 24px 24px 28px;
    border-left: 5px solid #323a61;
    border-radius: 18px;
    background: linear-gradient(95deg, #ffffff 0%, #eef7ff 100%);
    box-shadow: 0 10px 24px rgba(35, 50, 87, 0.12);
    transition: transform 0.38s ease, box-shadow 0.38s ease;
  }


  .about-flow-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 34px rgba(35, 50, 87, 0.18);
  }

  .about-flow-list {
    margin: 0;
    padding-left: 18px;
  }

  .about-flow-list li {  
    margin-bottom: 10px;
  }

  .about-spectrum {
    margin-top: 24px;
    border-radius: 20px;
    padding: 26px;
    
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .about-spectrum:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 36px rgba(35, 50, 87, 0.28);
  }
  .about-spectrum-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }

  .about-spectrum-pills span {
    border: 1px solid rgba(207, 241, 254, 0.48);
    background: rgba(255, 255, 255, 0.08);
    color: #e7f6ff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
  }

  @media (max-width: 991.98px) {
    .about-redesign-wrap {
      padding: 42px 0 58px;
    }

    .about-orbit {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .about-image-orbit {
      transform: none;
    }

    .about-image-orbit img {
      min-height: 310px;
    }

    .about-flow-card:nth-child(2) {
      margin-left: 0;
    }

    .about-metric-rail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-metric-rail div:nth-child(2) {
      border-right: 0;
    }

    .about-metric-rail div:nth-child(-n + 2) {
      border-bottom: 1px solid #e0eefb;
    }
  }

  @media (max-width: 575.98px) {
    .about-redesign-wrap {
      padding: 32px 0 44px;
    }

    .about-image-orbit {
      padding: 12px;
      border-radius: 18px;
    }

    .about-image-orbit img {
      min-height: 250px;
      border-radius: 12px;
    }

    .about-flow-card,
    .about-spectrum {
      padding: 18px;
      border-radius: 14px;
    }

    .about-metric-rail strong {
      font-size: 1.05rem;
    }
  }

/*Sheduled Of Charges

    	/* Charges section */
		.charges-section {
			padding: 0 0 4rem;
			font-family: "DM Sans", sans-serif;
		}

		.charge-card {
			background: #cff1fe;
			border: 1px solid #323a61;
			border-radius: 14px;
			overflow: hidden;
			text-align: center;
			box-shadow: 0 10px 24px rgba(50, 58, 97, 0.18);
			transition: transform 0.35s ease, box-shadow 0.35s ease;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.charge-card:hover {
			transform: translateY(-8px);
			box-shadow: 0 18px 30px rgba(50, 58, 97, 0.28);
		}

		.charge-card-top {
			padding: 1.3rem 1.1rem 1.2rem;
			background: #323a61;
			color: #fff;
		}

		.charge-card-bottom {
			padding: 1.25rem 1.1rem;
			background: #cff1fe;
			color: #323a61;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.charge-icon {
			margin-bottom: 0.7rem;
			line-height: 1;
		}

		.charge-icon img {
			width: 64px;
			height: 86px;
			object-fit: contain;
				filter: brightness(0) invert(1);
			opacity: 0.95;
		}

		.charge-title {
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 0;
			color: inherit;
		}

		.charge-price {
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.1;
			margin-bottom: 0.2rem;
			color: inherit;
		}

	

		.charge-validity {
			/*font-size: 0.98rem;*/
			margin: 0.35rem 0 0;
			color: inherit;
		}

		.charge-note {
			background: #fff;
			color: #323a61;
			border: 1px solid #d6e9f8;
			border-left: 6px solid #323a61;
			border-top-left-radius: 18px;
			border-bottom-left-radius: 18px;
			border-top-right-radius: 12px;
			border-bottom-right-radius: 12px;
			padding: 1rem 1.1rem;
			margin-top: 1.25rem;
			box-shadow: 0 8px 20px rgba(50, 58, 97, 0.12);
			transition: transform 0.35s ease, box-shadow 0.35s ease;
		}

		.charge-note:hover {
			transform: translateX(-6px);
			box-shadow: 0 14px 24px rgba(50, 58, 97, 0.18);
		}
		
		.heading-section h2{
    font-weight: 700;
}

@media (max-width: 767.98px) {
    #footer .footer-bottom .content-right li a {
        font-size: 9px;
    }
    
    #footer .footer-bottom .content-right {
        gap:12px;
    }
}