/* Big Screen CSS */
@media screen and (min-width: 1600px) {
.greek-text{
		margin:0 auto;
		width:80%;
		padding:20% 0px;
}

 .home-slider .flickity-slider .banner-1{
      padding-top: 650px !important;
    }

  
.ailments-category-slider .slick-slide{
text-align:center;
    font-size: 12px;
    color: #000;
}
.ailments-category-slider .slick-slide img{
padding:15px;

}


#myVideo {
    width: 100%;
    outline: 4px solid white;
    outline-offset: px;
}


.soundToggle {
    position: absolute;
    top: 30px;
    right: 15px;
    background:rgb(218 38 40);
    border: none;
    color: white;
    padding: 0px 13px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
    z-index: 9;
}

   
.uxba__search img.emoji{
      position: relative;
    top: 5px;
    right: 10px;
}

.home-our-legacy .heading h3{
font-size: 1.8rem;
}

    .section-content .unani-section {
        width: 100%;
        min-height: auto; 
        position: relative; 
        overflow: hidden; 
        padding-bottom: 30px; 
        }
                
        /* --- Background Illustration Layer --- */
        .unani-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; 

        /* IMPORTANT: Update the URL to your actual image path */
        background-image: url("/wp-content/uploads/2025/11/History-of-Unani.webp"); 
        background-repeat: no-repeat;

        /* NEW: Set background-size to cover. This ensures the image 
        fills the entire container area, meaning its width will be 100% */
        background-size: cover; 

        /* Adjust position to keep figures at the bottom right */
        background-position: bottom right; 
        }

        /* --- Content Layout --- */
       .unani-section  .unani-content {
        position: relative;
        z-index: 2; 
        max-width: 90%;
        margin: 0 auto; 
        padding: 40px 20px 0;
        }

        /* --- Heading Styling --- */
        .unani-section  .unani-content h2 {
        font-size: 2.5rem;
        font-weight: 800;
        color: #000000;
        margin-bottom: 10px; 
        text-align:center;
        }

       .unani-section  .unani-content h2 span {
        color: #ba2228; 
        }

        /* --- Bold Introduction Paragraph --- */
        .unani-section .intro-paragraph {
        max-width: 1000px;
        margin: 0 auto 25px auto; 
        text-align: center;
        font-size: 1.2em;
        font-weight: 500; 
        line-height: 1.3;		
        }

            /* --- Main Text Column --- */
         .unani-section .text-column {
                margin-left: 6.3rem;
              padding: 60px;
              width: 35%;
              padding-right: 0px;
              line-height: 1.3;
              font-size: 1.2rem;
              color: #000;
              text-align: left;
              min-height: 250px;
            }

            .text-column p {
            margin-bottom: 15px; 
            }




            .unani-container {
            display: flex;
            width: 100%;
            height: 70vh;
            }

           .unani-container .unani-left-panel {
            width: 50%;
            background-color: #d32027;
            color: white;
            padding: 200px 130px;;
            box-sizing: border-box;
            }

           .unani-container .unani-left-panel h2 {
            margin-top: 0;
            font-size: 24px;
            font-weight: bold;
            }

           .unani-container .unani-left-panel p {
            line-height: 1.3;
            font-size: 1.2rem;
            color:white;
            }

          .unani-container  .unani-right-panel {
            width: 50%;
            }

          .unani-container  .unani-right-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }

           .unani-container .unani-left-panel h2 {
            margin-top: 0;
            font-size: 24px;
            font-weight: bold;
            }



            .unani-container .unani-right-panel {
            width: 50%;
            }

           .unani-container .unani-right-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }


           .unani-container .unani-highlight {
            font-size: 2.3rem;
            font-weight: 600;
            color: #000000;

            }
            .unanis-wrap .unanis-title{
            font-size: 2.35rem;
            font-weight: 800;
            text-align:center;
            color: #000000;
            } 

            .unani-highlight span{
            color: #ba2228;
            }

            .unani-subtext p{
            line-height: 1.3;
            font-size: 1.1rem;
            font-weight: 100;
            color: #4a4a4a;

            }

            .unani-subtext {
            /* padding: 1px 0px 0px 140px; */
            font-size: 2.3rem;
            font-weight: 600;

            }

            .unani-layout {
            display: flex;
            margin-top: 40px;
            gap: 40px;
            padding: 0rem 7rem 0rem 3rem;
            }

            .unani-left-side {
            width: 60%;
            padding: 0px 97px 0px 90px;
            font-size: 1.1rem;
            line-height: 1.3;
            }

            .unani-right-side {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 40px;
            }

            .unani-info-card {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            }

            .unani-info-card img {
            width: 30%;
           
            object-fit: cover;
            margin-top: 13px;


            }

            .unani-info-card h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            }

            .unani-info-card p {
            margin: 8px 0px;
            font-size: 15px;
            line-height: 1.4;
            color: #444;
            }

            .unani-read-more {
            color: #d21f2d;
            padding-left: 0px;
            font-size: 14px;
            cursor: pointer;
            }

            .unanis-wrap{
            max-width:100%;
            margin:0px auto;
            padding:30px;
            box-sizing:border-box;
            height: 1000px;

            }

            .unanis-label span{
            font-size: 12px;
            display:block;
            position: relative;
            bottom: 10px;
            }
            .unanis-label  {
            padding-top:20px;
            }
            .unanis-label .desc {
            padding-top:10px;
            }

            /* main circle layout */
            .unanis-main {
            display:flex;
            gap:0px;
            align-items:stretch;
            /* margin-top:24px; */
            position:relative;

            /*   padding-top: 100px;*/


            }

            /* left column (labels) */
            .unanis-col-left, .unanis-col-right{
            width:22%;
            display:flex;
            flex-direction:column;
            gap:26px;
            justify-content:center;
            align-items:flex-start;
            }

            /* center area - big circle */
            .unanis-center {
            width:100%;
            display:flex;
            justify-content:center;
            align-items:center;
            position:relative;
            padding-top: 0px;
            }

            .unanis-big-circle {
            width:100%;
            /*border-radius:50%;*/
            background: url("/wp-content/uploads/2025/11/human-circle-bg.png");
            background-size:contain;
            background-repeat:no-repeat;
            background-position:center center;
            /*  background: radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 60%, rgba(0,0,0,0.02) 100%);
            box-shadow: 0 8px 30px rgba(0,0,0,0.06);*/
            display:flex;
            justify-content:center;
            align-items:center;
            /* border:12px solid rgba(255,255,255,0.9);*/
            position:relative;
            overflow:visible;
            }

            /* central image (wireframe) */
            .unanis-human {
            width:77%;
            position:relative;
            left:47px;
            max-width:320px;
            opacity:0;
            transform:scale(.9);
            mix-blend-mode:multiply;
            }

            /* small circular item used around circle */
            .unanis-node {
            width:80px;
            height:80px;
            border-radius:50%;
            background:#fff;
            display:flex;
            justify-content:center;
            align-items:center;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
            border:6px solid rgba(240,240,240,0.9);
            position:absolute;
            opacity:0; /* start hidden, will animate in */
            transform:scale(.6);
            }

            /* left nodes (positions) */
            .unanis-node.l1{ left:28%; top:10%; }
            .unanis-node.l2{ left:20%; top:40%; }
            .unanis-node.l3{ left:25%; top:73%; }
            .unanis-node.l4{ left:36%; top:90%; transform:scale(.6); } /* lower */

            /* right nodes */
            .unanis-node.r1{ right:28%; top:10%; }
            .unanis-node.r2{ right:20%; top:36%; }
            .unanis-node.r3{ right:24%; top:70%; }
            .unanis-node.r4{ right:6%; top:84%; }

            /* node inner icon/text */
            .unanis-node .unanis-icon{
            text-align:center;
            font-size:22px;
            color:var(--accent);
            font-weight:700;
            pointer-events:none;
            }

            /* label blocks next to nodes (left & right) */
            .unanis-label {
            max-width:170px;

            font-size:30px;
            font-weight:400;

            opacity:0; /* animate in */
            transform:translateX(-30px);
            }
            .unanis-label .unanis-desc {
            display:block;
            font-size:13px;

            }
            .unanis-icon img{
            height: 2rem;
            }
            .unanis-big-circle img{
            height: 100%;
            }

            /* right side labels slide from right */
            .unanis-col-right .unanis-label{ transform:translateX(30px);  }

            /* top small badges */
            .unanis-top-badges{
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            top:-10%;
            display:flex;
            gap:178px;
            cursor:pointer;
            }
            .unanis-badge{
            background: url(/wp-content/uploads/2025/11/unani-circle.webp);
            width:102px;
            height:102px;
            border-radius:50%;
            background-position: center;
            background-size: cover;
            display:flex;
            justify-content:center;
            align-items:center;

            opacity:0;
            transform:translateY(-20px) scale(.8);
            }

            .unanis-badge small {
            font-size:13px;
            color:#8a8a8a;
            line-height:14px;
            text-align:center;
            }


            .unanis-badgess {
            background: url(/wp-content/uploads/2025/11/unani-circle.webp);
            width:150px;
            height:150px;
            border-radius:50%;
            background-position: center;
            background-size: cover;
            position:relative;
            bottom:35px;
            }

    

            .unanis-badgess small {
            font-size: 17px;
            padding: 25px;
            color: red;
            text-align: center;
            }

          .unanis-wrap  .unanis-lead {
                    line-height: 1.3;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
        text-align: center;
        width: 80%;
        padding-bottom: 8rem;
                margin: 0 auto;
            }




            .l-label-1 {
            position: relative;
            top: 140px;
            left: 400px;
            z-index:1;
            color:#ba2228;
            }

            .l-label-2{
            position: relative;
            top: 125px;
            left: 360px;
            color:#ba2228;
            z-index: 9;
            }

            .l-label-3{
            position: relative;
            top: 110px;
            left: 400px;
            z-index:9;
            color:#ba2228;
            }

            .l-label-4{
            position: relative;
            top: 35px;
            left: 550px;
            z-index:1;
            color:#ba2228;
            }


            .r-label-1{
            position: relative;
            top: 0px;
            right: 210px;
            color:#ba2228;
            }



            .r-label-2{
            position: relative;
            top: -30px;
            right: 140px;
            color:#ba2228;
            }


            .r-label-3{
            position: relative;
            top: -30px;
            right: 200px;
            color:#ba2228;
            }


            .r-label-4{
            position: relative;
            top: 28px;
            right: 50px;
            color:#ba2228;
            }



            .unanis-badge:hover {
            transform: scale(3);
            font-size:2rem;
            }
            .unanis-desc,.desc{
            color:#000000;
            }

            /* unani css */
  .unani-home{
    width: 100%;
    margin:0 auto;
    position:relative;
    background:transparent;
    padding:40px 4px 80px;
    background-position: center bottom;
    background-repeat: no-repeat;
     background-size: cover;
    overflow:visible;
    background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
  }


  /* Center round logo area */

  .unani-center-circle{
    width:300px;
    /* height:220px; */

        margin: 40px auto -235px;
    display:flex;
    align-items:center;
    justify-content:center;
   
    position:relative;
    z-index:10;
  
  }


 /* Replace this with your logo image if available */


  .unani-logo-inner{
    text-align:center;
  }
  .unani-logo-inner img{
    width:300px;
    height:auto;
    display:block;
    margin:0 auto;
  }
  .logo-title{
    font-weight:700;
    margin-top:8px;
    color:var(--accent);
    
  }
  .logo-sub{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
  }

  /* Stats positions */
  .unani-stats-wrap{
    position:relative;
    height:500px; /* area around central circle where stats will be placed */
    margin-top:8px;
    margin-bottom:40px;
  }




  .stat{
    position:absolute;
    width:234px;
    text-align:left;
    transform-origin:center;
    opacity:0;
  
 
  }




.stat .num{
    font-size:45px;
    color:#db2528;
    letter-spacing:0.5px;
  }
  .stat .label{
     font-size: 20px;
    color: #ff3737;
    margin-top: 0px;
    font-weight: normal;
  }
.stat .s1{
  text-align: right;
}
.stat .num{
  text-align: left;
}
  /* Clockwise order and approximate positions */
  /* Top-left (117K+) */
  .s1{ top:25px; left:30rem; }
  /* Top-right (450+) */
  .s2{ top:10px; right:25rem;  }
  /* Right middle (25+) */
  .s3{ top:190px; right:30rem; width:234px; }
  /* Bottom center (85%) */
  .s4{ bottom:10px; left:54%; transform:translateX(-50%);  width:234px;
    font-size: 11px;
}
  /* Left middle (100+) */
  .s5{ top:190px; left:35rem; width:235px; }

  /* Below unani-home-hero copy */
  .unani-home-hero{
    text-align:center;
    margin-top:10px;
    padding:24px 20px 0;
  }
  .unani-home-hero h1{
    font-size:32px;
    margin:6px 0;
    font-weight:800;
  }
  .unani-home-hero h1 .accent{ color:#ba2228; }
  /* .unani-home-hero p{
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    line-height:1.6;
    margin-top:12px;
    font-size:15px;
  } */
  .stat p{
    font-size: 11px;
			line-height:15px;
  }
  .cta{
    margin-top:18px;
  }




/* Show paragraph when stat is hovered */
 .unani-label-para p {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease-in-out;
}

/* On hover, show smoothly */
.stat:hover .unani-label-para p {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


  .learnmorebtn{
    background:#d31f27;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 6px 12px rgba(196,58,55,0.15);
			opacity:0 ;
  }
      .disclaimer{
        margin-bottom:0px; 
        text-align:left;
        font-size: 12px;
    }
         /* Content Single Product Page */
            .pp-featured-related{
              width: 1300px;
              margin: 0 auto;
              padding-bottom: 100px;
            }

            /* Layout */
.hamdard-story-section {
  padding: 0px 15px 60px 15px;
  background: #ffffff;
}

.hamdard-story-container {
  max-width: 90%;
  margin: 0 auto;
}

/* Header */
.hamdard-story-header {
  text-align: center;
  margin-bottom: 60px;
color:#000;
}

.hamdard-story-title {
  font-size: 2.5rem;
  margin: 0 0 18px;
  font-weight: 800;
color:#000000;
}

.hamdard-story-title span {
  color: #ba2228; /* Hamdard red */
}

.hamdard-story-intro {
    line-height: 1.3;
    font-size: 1.2rem;
       margin: 1rem 10rem;
    color: #000;
}

/* Content columns */
.hamdard-story-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hamdard-story-image-col {
  flex: 0 0 40%;
  text-align: left;
}

.hamdard-story-image-col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Text column */
.hamdard-story-text-col {
  flex: 0 0 60%;
padding-right: 10rem;

}

.hamdard-story-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 12px;
color:#000;
}

.hamdard-story-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #000;
  margin: 0 0 12px;
}

.hamdard-story-readmore {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #e53935;
}

/* Fade-in animation for product image */
.hamdard-story-products-img {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hamdard-story-products-img.is-visible {
  opacity: 1;
  transform: translateY(0);
}
            
.hamdard-our-history h3, 
.hamdard-our-legacy h3,
.legacy-hamdard-foundation h3
{
		font-size: 2.5rem;
    font-weight: 800; 
				color:#000;
}
.hamdard-our-history p,
.legacy-hamdard-foundation p{
  font-size:1.2rem;
}
.legacy-text{
	   font-size: 1.2em;
    line-height: 1.7;
    color: #333;
    max-width: 80%;
    margin: 0 auto;
      padding: 0px 43px;
    text-align: center;	
}
.hit-detail h3{
  font-size: 1.2rem;
  font-weight: 600;
}

.certifications h3{
		    font-size: 2.5rem;
    font-weight: 800;
			color:#000;
}

.labor h3{
    margin: 3px 0rem;
    font-size: 2.5rem;
color:black;
font-weight:800;
}
.hamdard-commitment{
color:#db2628;
}
.labor p{
    margin: 0rem 30rem 3rem 30rem;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.3;
}
.evs-slider{
  width: 90%;
  margin: 0 auto;
}
.evs-slider .evs-item{
  padding: 0px 60px;
}
.evs-slider .evs-item img{
width: 50%;
padding-bottom: 10px;
}
.evs-slider .evs-item p.short-text{
font-size: 0.8rem;
}
.read-btn {
  color: #d83131;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8rem;
}

.read-btn:hover {
  text-decoration: underline;
}
.img-radius img{
  border-radius: 5px;
}
.hamdard-our-legacy .sec-philosophy{
  height: 340px !important;
}
.section-content .about-impact .col-inner{
    padding: 12rem 25rem 12rem 5rem !important;
  }
  .section-content .career-impact .col-inner{
    padding: 10rem 25rem 9rem 5rem !important;
  }
  .section-content .wellness-center .col-inner{
    padding: 6rem 15rem 6rem 5rem !important;
  } 
  .button.btn-consult{
    color: #000 !important;
  }
  .button.btn-consult:hover{
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
  }
    .cert-para {
      max-width: 47%;
      margin: 0 auto 40px;
      color: #020000;
      font-size:1.2rem;
      line-height: 1.3;
			    transition: transform 0.5s ease, box-shadow 0.5s ease;     
    }
     .unani-home-hero p{
              max-width: 47%;
     }
       .well-text {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 40px;
    color: #fff;
  }

.ailment-icon.is-active img {
    transition: all 0.25s ease;
scale: 1;
}

#products-fixed-bar {
    width: 100%;
    background: #fff;
    padding: 10px 0;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateY(-100%);
    z-index: 999;
    top: 70px;
    height: 85px;
		display: none;
}

#products-fixed-bar.fixed {
    position: fixed;
    top: 0;
    left: 0;
     transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateY(-100%);
z-index: 9999;
top:155px;
		display: block;
}
.products-fixed-bar2{
		display:block !important;
		    height: 60px !important;
}
.products-fixed-bar .fixed-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.products-fixed-bar .fixed-inner .fixed-left ul li{
		display:inline-block;
		list-style:none;
		padding-left:0px;
		position: relative;
    bottom: 6px;
}
.products-fixed-bar .fixed-inner .fixed-left ul li:first-child{
		padding-left:0px;
}
.products-fixed-bar .fixed-inner .fixed-left ul li img{
		width:70px;
}
.products-fixed-bar .fixed-actions ul li{
display:inline-block;
list-style:none;
}
.products-fixed-bar .fixed-actions .product-category-dropdown{
padding-right: 2.4em;
position:relative;
top:-6px;
}
.products-fixed-bar .consult-expert-btn{
    font-weight: 600;
    border-radius: 10px;
		position:relative;
		top:10px;
}
.products-fixed-bar2 .consult-expert-btn{
		top:0px !important;
}
.products-fixed-bar a.all-products-link{
font-size: 1.2rem;
    color: #db2628;
    font-weight: 600;
}

/* career Page */

.healing-section {
  display: grid;
  grid-template-columns: 35% 65%;
  min-height: 620px;
}

.healing-left {
  background: #c53b32;
  color: #fff;
  padding: 120px;
}

.healing-left h2 {
  font-size: 42px;
  line-height: 1.1;
  color: #fff;
}

.healing-cards {
  display: flex;
  height: 660px;
  overflow: hidden;
  color: #fff;
}

.card {
  flex: 1;
  position: relative;
  transform: scaleX(1);
  will-change: transform;
  cursor: pointer;
}

.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.card:nth-child(1) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value1.webp");
}
.card:nth-child(2) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value2.webp");
}
.card:nth-child(3) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value3.webp");
}
.card.active:hover .card-content{
background: #00000045;
transition: opacity 0.3s ease;
}
.card-content {
position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        color: #fff;
        z-index: 2;
        
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
}
.card-content h3{
  color: #fff;
}
.card-content p {
  opacity: 0;
  transform: translateY(10px);
}

.arrow {
  display: inline-block;
  margin-top: 8px;
}

/* understanding Unani */
.u-section {
        position: relative;
        height: 100vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }


    .u-section  .top-nav {
              background: url('/wp-content/uploads/2026/02/timeline-curved-line.png') center / contain no-repeat;
          width: 55%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 60px;
          padding: 10px;
          gap: 21%;
      }

    .u-section  .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

    .u-section  .nav-item {
      color: #000;
          background: #fff;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
  .u-section    .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
    .u-section  .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
              font-size: 16px;
              transition: background-color 0.2s ease-in 0s;
      }
     .u-section .non-active{
              margin-top: 10px;
          font-size: 12px;
          text-align: center;
      }
   .u-section   .panels {
        position: relative;
        height: 100%;
      }

    .u-section  .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

    .u-section  .panel.active {
        opacity: 1;
        pointer-events: auto;
      }
   .u-section   .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

   .u-section   .content {
        position: absolute;
        width: 24%;
        top: 30%;
        transform: translateY(-50%);
      }

     #ancient .content.right { right: 25%; }
     #ancient .content.left { left: 15%; width: 15%;}
     #ancient .content.right h2,
     #ancient .content.left h2,
     #ancient .ailments-header h2,
     #ancient .modes-header h2 
      {
          color: #fde9b6;
          font-size: 1.6rem;
          /* opacity: 0; */
      }
     #ancient .content.right p,
     #ancient .content.left p,
     #ancient .ailments-header p,
     #ancient .modes-header p
      {
          font-size: 1.2rem;
          line-height: 1.3;
          /* opacity: 0; */
      }
     #ancient .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 1.2rem;
          opacity: 0;
          position: relative;
          top:15px;
      }
     #ancient .ancient-circle {
        position: absolute;
        left: 0;
        top: 0;
        width: 550px;
        transform: translateY(12%);
      }

     #ancient .ancient-man
      {
        position: absolute;
        top: 65px;
        bottom: 18%;
        left: 12%;
        width: 380px;
        transform: translateY(-15%);
      }

      #diagnosis .diagnosis-man{
          position: absolute;
        top: 5%;
        right: 40%;
        width: 250px;
      }

     #diagnosis .dot {
        position: absolute;
        width: 45px;
        cursor: pointer;
        z-index: 9;
      }
      #diagnosis .dot.physical{top:2%;left:54%}
      #diagnosis .dot.dietary{top:26%;left:52.5%}
      #diagnosis .dot.symptoms{top:10%;left:52%}
      #diagnosis .dot.sleep{top:6%;left:53%}
      #diagnosis .dot.activity-patterns{top:53%;left:53%}
      #diagnosis .dot.excretions{top:34%;left:52.5%}

      #diagnosis .line.physical{top: 4%;left: 57%;}
      #diagnosis .line.dietary{top:14%;left:54%}
      #diagnosis .line.symptoms{top:12%;left:53%}
      #diagnosis .line.sleep{top:9%;left:54%}
      #diagnosis .line.activity-patterns{top:55%;left:55%}
      #diagnosis .line.excretions{top:37%;left:54%}

      #diagnosis .dot img {
        width: 100%;
      }

      #diagnosis .line {
        position: absolute;
        opacity: 0;
      }
     #diagnosis .info-box h3{color: #fff;}  
     #diagnosis .info-box .physical{top: 2.5%;right: 10%;position: absolute; width: 25%;}
     #diagnosis .info-box .dietary{top:12%;right:10.5%;position: absolute;width: 25%;}
     #diagnosis .info-box .symptoms{top:27%;right:9%;position: absolute;width: 25%;}
     #diagnosis .info-box .sleep{top:39%;right:11%;position: absolute;width: 25%;}
     #diagnosis .info-box .activity-patterns{top:54%;right:12%;position: absolute;width: 25%;}
     #diagnosis .info-box .excretions{top:59.5%;right:10.5%;position: absolute;width: 25%;}

      #diagnosis .info {
        display: none;
      }
      #ailments .ailments-header, #modes .modes-header{text-align: center;width: 50%;margin: 0 auto;padding-top: 20px;}
      #ailments .ailment-man { left: 30%; bottom: 20%; position: absolute; height: 60%;z-index: 9; }
      #ailments .ailment-woman { left: 48%; bottom: 20%; position: absolute; height: 55%; }

      /* .ailment-list {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
      } */

     #ailments .ailment-men{
        position: absolute;
          left: 5%;
          top: 50%;
          transform: translateY(-50%);
          width: 20%;
          text-align: right;
      }
     #ailments .ailment-women{
          position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
          width: 20%;
      }

     #ailments .ailment .body {
        height: 0;
        overflow: hidden;
      font-size: 12px;
      padding-top: 10px;
      font-weight: 100;
      }
    #ailments  .ailment .head{
        font-weight: 600;
        cursor: pointer;
      }
     #ailments .ailment .head span img{
            position: relative;
          top: 0px;
        
          width: 70px;
      }
     #ailments .ailment.active .body{
      height: auto;
        
      }
      
     #modes  .mode-man{
        position: absolute;
        bottom: 28%;
        left: 44%;
        width: 250px;
      }
       #modes .modes-grid-left{
        position: absolute;
        left: 12%;
        top: 20%;
        display: block;
        width: 25%;
        text-align: right;
      }
       #modes .modes-grid-left p{
      padding: 0px 65px 0px 0px;
      }
       #modes .mode-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
    #modes   .mode-item ul li{
        list-style: none;
        display: inline-block;
      }
     #modes  .mode-item ul li img{
      width: 90px;
          position: relative;
          top: -  15px;
      }
      #modes .mode-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: 1.2rem;
        padding: 5px 0px;
        margin: 0;
      }
     #modes  .mode-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: 1.2rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      }
     #modes  .modes-grid-right {
        position: absolute;
        right: 12%;
        top: 20%;
        display: block;
        width: 25%;
      }
     #modes  .modes-grid-right p{
      padding: 0px 0px 0px 95px;
      }

      #modes .int-text{
          width: 20%;
          margin: 0 auto;
          padding: 50px 0px;
          position: relative;
          color: #ead39b;
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          opacity: 0;
      } 
.pp-featured-related .uxb-fp__nav .slick-prev{
                left: 11% !important;
              }
               .pp-featured-related .uxb-fp__nav .slick-next{
                right: 11% !important;
              }

}

@media screen and (min-width: 1350px) {
.u-section{
  height: 120vh;
}

  .unani-container {
            display: flex;
            width: 100%;
            height: 70vh;
            }
   .unanis-title {
        font-size: 2.5rem;
        font-weight: 800;
        text-align: center;
        color: #000000;
    }
            .unani-left-panel {
            width: 50%;
            background-color: #d32027;
            color: white;
            padding: 60px;
            box-sizing: border-box;
            }

            .unani-left-panel h2 {
            margin-top: 0;
            font-size: 24px;
            font-weight: bold;
            }

            .unani-left-panel p {
            line-height: 1.5;
            font-size: 1.1em;
            color:white;
            }

            .unani-right-panel {
            width: 50%;
            }

            .unani-right-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }


            .unani-container {
            display: flex;
            width: 100%;
            height: 70vh;
            }



            .unani-left-panel h2 {
            margin-top: 0;
            font-size: 24px;
            font-weight: bold;
            }



            .unani-right-panel {
            width: 50%;
            }

            .unani-right-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }


}

@media screen and (min-width: 1200px) {

 /* unani css */
            .unani-home{
            width: 100%;
            margin:0 auto;
            position:relative;
            background:transparent;
            padding:1px 4px 80px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:visible;
            background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
            }


            /* Center round logo area */

            .unani-center-circle{
            width:300px;
            /* height:220px; */
            margin: 40px auto -235px;
            display:flex;
            align-items:center;
            justify-content:center;

            position:relative;
            z-index:10;

            }


            /* Replace this with your logo image if available */


            .unani-logo-inner{
            text-align:center;
            }
            .unani-logo-inner img{
            width:300px;
            height:auto;
            display:block;
            margin:0 auto;
            position: relative;
            top: 60px;
            }
            .logo-title{
            font-weight:700;
            margin-top:8px;
            color:var(--accent);

            }
            .logo-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:4px;
            }
            .section.home-our-legacy{
              padding-bottom: 0px !important;
            }
            /* Stats positions */
            .unani-stats-wrap{
            position:relative;
            height:480px; /* area around central circle where stats will be placed */
            margin-top:8px;
            margin-bottom:0px;
            }

            .stat{
            position:absolute;
            width:234px;
            text-align:left;
            transform-origin:center;
            opacity:0;


            }

            .stat .label{
            font-size: 20px;
            color:#db2528;
            margin-top: 0px;
            font-weight: normal;
            }
            .stat .s1{
            text-align: right;
            }
            .stat .num{
            font-size:40px;
            letter-spacing:0.5px;
            text-align: left;
            color: #db2528;
            }
            /* Clockwise order and approximate positions */
            /* Top-left (117K+) */
            .s1{ top:10px; left:10rem; }
            /* Top-right (450+) */
            .s2{ top:0px; right:5rem;  }
            /* Right middle (25+) */
            .s3{ top:190px; right:5rem; width:234px; }
            /* Bottom center (85%) */
            .s4{ top:190px; left:25%; transform:translateX(-50%);  width:234px;
            font-size: 11px;
            }
            /* Left middle (100+) */
            .s5{ top:0px; left:11.5rem; width:235px; }

            /* Below unani-home-hero copy */
            .unani-home-hero{
            text-align:center;
            margin-top:0px;
            padding:0px 20px 0;
            }
            .unani-home-hero h1{
            font-size:32px;
            margin:6px 0;
            font-weight:800;
            }
            .unani-home-hero h1 .accent{ color:#ba2228; }
            .unani-home-hero p{
            max-width:80%;
            margin:0 auto;
            color:var(--muted);
            line-height:1.7;
            margin-top:12px;
            font-size:1.2rem;
            }
            .stat p{
            font-size: 11px;
            line-height:15px;
            }
            .cta{
            margin-top:18px;
            }




            /* Show paragraph when stat is hovered */
            .unani-label-para p {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
            }

            /* On hover, show smoothly */
            .stat:hover .unani-label-para p {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            }


            .learnmorebtn{
            background:#d31f27;
            color:#fff;
            padding:10px 18px;
            border-radius:8px;
            border:none;
            cursor:pointer;
            font-weight:600;
            box-shadow:0 6px 12px rgba(196,58,55,0.15);
            opacity:0 ;
            }
  
}

/* @media screen and (min-width: 1265px) {
.u-section{
  height: 130vh;
}
} */
/* Laptop Screen CSS */
@media screen and (min-width: 1280px) {
  .home-slider .flickity-slider .banner-1{
      padding-top: 650px !important;
    }
.text-u-unani {
  padding-top: 40px;
  text-align: center;
color:#fff
}
.text-u-unani h3,
.text-u-unani p
{
color:#fff;
}
  .video-modal {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 9999;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}

.video-popup {
     position: absolute;
    top: 55%;
    left: 50%;
    width: 80%;
    max-width: 750px;
    transform: translate(-50%, -50%);
    background: #000;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

.video-popup video {
  width: 100%;
  height: auto;
}

.video-close {
  position: absolute;
        top: -10px;
        right: -10px;
        font-size: 23px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        height: 6px;
        width: 30px;
        background: red;
        border-radius: 50%;
        line-height: 1;
        min-height: 30px;
        z-index: 9;
}

  .main-leaders{
 box-shadow: 1.5px 2.598px 14.56px 1.44px rgba(41, 41, 41, 0.1);
         border-radius: 8px;
} 
 .main-leaders img{
    border-radius: 4px;
 }
 .main-leaders h2, .hamdard-leaders h2{
  font-size: 22px;
 }
  .main-leaders h3, .hamdard-leaders h3{
    font-size: 19.2px;font-weight: 600;
  }
.main-leaders h2,
.leader h3
{
margin: 0;
}
 /* .ailments-category-slider .slick-track {
    transform: none !important;
} */
 /* .ailments-category-slider  .slick-slide {
    transform: none !important;
} */
/* Prevent iOS flicker inside slider */
.ailments-category-slider,
.products-fixed-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Each icon must be its own layer */
.ailment-icon {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 12px;
    touch-action: auto !important;
      -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: visible !important;

}

/* REMOVE all animation for stability */
.ailment-icon img {
    width: 100%;
    height: auto;
    display: block;

    /* ❌ REMOVE transitions */
    transition: none !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Active state (NO SCALE for iPhone stability) */
.ailment-icon.is-active img {
    border: 1px solid #db2628;
    background: rgba(219, 38, 40, 0.05);
    border-radius:50%;
}

.ailments-category-slider .slick-slide{
text-align:center;
    font-size: 12px;
    color: #000;
}
.ailments-category-slider .slick-slide .is-active img{
padding:0px;
}
.ailments-category-slider .slick-slide img{
padding:15px;
margin-bottom: 5px;
}
  .ailment-icon img {
    width: 100%;
    height: auto;
    transition: transform 0.25s ease;
}
.ailments-category-slider .slick-slide .dark-icon{
  display: none;
}

.ailment-icon {
    display: inline-block;
    cursor: pointer;
}
.ailment-icon.is-active img {
    transform: scale(1) !important;
    scale: 1 !important;
}


/* .ailment-icon.is-active .light-icon {
    opacity: 0;
} */

.ailment-icon.is-active .dark-icon {
    opacity: 1;
}

/* Hover preview (optional) */
/* .ailment-icon:focus .light-icon {
    opacity: 0;
} */
 /* .ailment-icon:focus .ailment-label {
    opacity: 0;
} */
.ailment-icon:focus .dark-icon {
    opacity: 1;
}


/* Base transition */
/* .ailment-icon {
    transition: transform 0.25s ease;
    position: relative;
}


.ailment-icon.is-active {
    transform: scale(1);
}


.ailment-icon.is-animate::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #d03c30;
    opacity: 0;
    animation: redPulse 0.6s ease forwards;
    pointer-events: none;
}

@keyframes redPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.05);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
} */
.products-fixed-bar2{
  position: relative !important;
  opacity: 1 !important;
  top:110px !important;

}
#products-fixed-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
    transform: translateY(-100%);
    opacity: 0;
   transition: transform 0.45s cubic-bezier(.25,.8,.25,1), opacity 0.3s ease;
   height: 85px;
}

#products-fixed-bar.fixed {
    position: fixed;
    top: 0;
    left: 0;
     transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateY(-100%);
z-index: 9999;
top:70px;
		display: block;
}
.products-fixed-bar2{
		display:block !important;
		    height: 60px !important;
}
.products-fixed-bar .fixed-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 0px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.products-fixed-bar .fixed-inner .fixed-left ul li{
		display:inline-block;
		list-style:none;
		padding-left:0px !important;
		position: relative;
    top: -2px;
}
.products-fixed-bar .fixed-inner .fixed-left ul li:first-child{
		padding-left:0px;
}
.products-fixed-bar .fixed-inner .fixed-left ul li img{
		width:70px;
}
.products-fixed-bar .fixed-actions ul li{
display:inline-block;
list-style:none;
}
.products-fixed-bar .fixed-actions .product-category-dropdown{
padding-right: 2.4em;
position:relative;
top:-6px;
}
.products-fixed-bar .consult-expert-btn{
    font-weight: 600;
    border-radius: 10px;
		position:relative;
		top:10px;
}
.products-fixed-bar2 .consult-expert-btn{
		top:0px !important;
}
.products-fixed-bar a.all-products-link{
font-size: 1.2rem;
    color: #db2628;
    font-weight: 600;
}

  .about-impact .col-inner{
    padding: 8rem 12rem 8rem 5rem !important;
  }
   .career-impact .col-inner{
    padding: 4rem 12rem 4rem 5rem !important;
  }
.wellness-center .col-inner{
    padding: 5rem 5rem 5rem 5rem !important
  }
    .button.btn-consult{
    color: #000 !important;
  }
  .button.btn-consult:hover{
    background-color: #eee !important;
    color: #000 !important;
    border: 1px solid #eee !important;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1), 0 2px 15px rgba(0, 0, 0, 0.1);
  }
.cert-para {
      max-width: 47%;
      margin: 0 auto 40px;
      color: #020000;
      font-size:1.2rem;
      line-height: 1.3;
			    transition: transform 0.5s ease, box-shadow 0.5s ease;     
    }
    .well-text {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 40px;
    color: #fff;
  }
#myVideo {
    width: 100%;
    outline: 4px solid white;
    outline-offset: px;
}


.soundToggle {
    position: absolute;
    top: 20px;
    right: 15px;
    background:rgb(218 38 40);
    border: none;
    color: white;
    padding: 0px 13px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
    z-index: 9;
}

        /* --- Main Content Section --- */
        .unani-section {
        width: 100%;
        min-height: 600px; 
        position: relative; 
        overflow: hidden; 
        padding-bottom: 30px; 
        }
                
        /* --- Background Illustration Layer --- */
        .unani-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; 

        /* IMPORTANT: Update the URL to your actual image path */
        background-image: url("/wp-content/uploads/2025/11/History-of-Unani.webp"); 
        background-repeat: no-repeat;

        /* NEW: Set background-size to cover. This ensures the image 
        fills the entire container area, meaning its width will be 100% */
        background-size: cover; 

        /* Adjust position to keep figures at the bottom right */
        background-position: bottom right; 
        }

        /* --- Content Layout --- */
        .unani-content {
        position: relative;
        z-index: 2; 
        max-width: 1200px;
        margin: 0 auto; 
        padding: 40px 20px 0;
        }

        /* --- Heading Styling --- */
        .unani-content h2 {
        font-size: 32px;
        font-weight: 800;
        color: #000000;
        margin-bottom: 10px; 
        text-align:center;
        }

        .unani-content h2 span {
        color: #ba2228; 
        }

        /* --- Bold Introduction Paragraph --- */
        .intro-paragraph {
        max-width: 90%;
        margin: 0 auto 25px auto; 
        text-align: center;
        font-size: 1.2em;
        font-weight: 600; 
        line-height: 1.7;		
        }

            /* --- Main Text Column --- */
            .text-column {
                  
        padding: 20px;
        width: 45%;
        padding-right: 0px;
        line-height: 1.7;
        font-size: 1.2em;
        color: #000;
        text-align: left;
    
            }

            .text-column p {
            margin-bottom: 15px; 
            }




            .unani-container {
            display: flex;
            width: 100%;
            height: 70vh;
            }
   .unanis-title {
        font-size: 2.5rem;
        font-weight: 800;
        text-align: center;
        color: #000000;
    }
            .unani-left-panel {
                   width: 50%;
        background-color: #d32027;
        color: white;
        padding: 50px 50px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-around;
        align-items: center;
            }

            .unani-left-panel h2 {
            margin-top: 0;
            font-size: 24px;
            font-weight: bold;
            }

            .unani-left-panel p {
            line-height: 1.7;
            font-size: 1.2em;
            color:white;
            }

            .unani-right-panel {
            width: 50%;
            }

            .unani-right-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }


            .unani-container {
            display: flex;
            width: 100%;
            height: 80vh;
            }



            .unani-left-panel h2 {
            margin-top: 0;
            font-size: 24px;
            font-weight: bold;
            }



            .unani-right-panel {
            width: 50%;
            }

            .unani-right-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }


            .unani-highlight {
            font-size: 32px;
            font-weight: 800;
            color: #ba2228;

            }


            .unani-highlight span{
            color: #000;
            }

            .unani-subtext p{
            line-height: 1.7;
            font-size: 1.2rem;
            font-weight: 600;
            color: #000;

            }

            .unani-subtext {
            /* padding: 1px 0px 0px 140px; */
            font-size: 2.3rem;
            font-weight: 600;

            }

            .unani-layout {
            display: flex;
            margin-top: 40px;
            gap: 40px;
            padding: 0rem 7rem 0rem 3rem;
            }

            .unani-left-side {
            width: 60%;
            padding: 0px 97px 0px 90px;
            font-size: 1.1rem;
            line-height: 1.3;
            }

            .unani-right-side {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 40px;
            }

            .unani-info-card {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            }

            .unani-info-card img {
            width: 30%;
            object-fit: cover;
            margin-top: 0px;


            }

            .unani-info-card h3 {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            line-height: 1.2;
            }

            .unani-info-card p {
            margin: 8px 0px;
            font-size: 14px;
            line-height: 1.4;
            color: #000;
            }

            .unani-read-more {
            color: #d21f2d;
            padding-left: 0px;
            font-size: 14px;
            cursor: pointer;
            }

            .unanis-wrap{
            max-width:100%;
            margin:0px auto;
            padding:30px;
            box-sizing:border-box;
            height: 1000px;

            }

            .unanis-label span{
            font-size: 12px;
            display:block;
            position: relative;
            bottom: 10px;
            }
            .unanis-label  {
            padding-top:20px;
            }
            .unanis-label .desc {
            padding-top:10px;
            }

            /* main circle layout */
            .unanis-main {
            display:flex;
            gap:0px;
            align-items:stretch;
            /* margin-top:24px; */
            position:relative;

            /*   padding-top: 100px;*/


            }

            .research-copy p{
              font-size: 14px;
              font-weight: 400;
              line-height: 1.4;
            }

            /* left column (labels) */
            .unanis-col-left, .unanis-col-right{
            width:22%;
            display:flex;
            flex-direction:column;
            gap:26px;
            justify-content:center;
            align-items:flex-start;
            }

            /* center area - big circle */
            .unanis-center {
            width:100%;
            display:flex;
            justify-content:center;
            align-items:center;
            position:relative;
            padding-top: 0px;
            }

            .unanis-big-circle {
            width:100%;
            /*border-radius:50%;*/
            background: url("/wp-content/uploads/2025/11/human-circle-bg.png");
            background-size:contain;
            background-repeat:no-repeat;
            background-position:center center;
            /*  background: radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 60%, rgba(0,0,0,0.02) 100%);
            box-shadow: 0 8px 30px rgba(0,0,0,0.06);*/
            display:flex;
            justify-content:center;
            align-items:center;
            /* border:12px solid rgba(255,255,255,0.9);*/
            position:relative;
            overflow:visible;
            }

            /* central image (wireframe) */
            .unanis-human {
            width:77%;
            position:relative;
            left:47px;
            max-width:320px;
            opacity:0;
            transform:scale(.9);
            mix-blend-mode:multiply;
            }

            /* small circular item used around circle */
            .unanis-node {
            width:80px;
            height:80px;
            border-radius:50%;
            background:#fff;
            display:flex;
            justify-content:center;
            align-items:center;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
            border:6px solid rgba(240,240,240,0.9);
            position:absolute;
            opacity:0; /* start hidden, will animate in */
            transform:scale(.6);
            }

            /* left nodes (positions) */
            .unanis-node.l1{ left:28%; top:10%; }
            .unanis-node.l2{ left:20%; top:40%; }
            .unanis-node.l3{ left:25%; top:73%; }
            .unanis-node.l4{ left:36%; top:90%; transform:scale(.6); } /* lower */

            /* right nodes */
            .unanis-node.r1{ right:28%; top:10%; }
            .unanis-node.r2{ right:20%; top:36%; }
            .unanis-node.r3{ right:24%; top:70%; }
            .unanis-node.r4{ right:6%; top:84%; }

            /* node inner icon/text */
            .unanis-node .unanis-icon{
            text-align:center;
            font-size:22px;
            color:var(--accent);
            font-weight:700;
            pointer-events:none;
            }

            /* label blocks next to nodes (left & right) */
            .unanis-label {
            max-width:170px;

            font-size:30px;
            font-weight:400;

            opacity:0; /* animate in */
            transform:translateX(-30px);
            }
            .unanis-label .unanis-desc {
            display:block;
            font-size:13px;

            }
            .unanis-icon img{
            height: 2rem;
            }
            .unanis-big-circle img{
            height: 100%;
            }

            /* right side labels slide from right */
            .unanis-col-right .unanis-label{ transform:translateX(30px);  }

            /* top small badges */
            .unanis-top-badges{
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            top:-10%;
            display:flex;
            gap:178px;
            cursor:pointer;
            }
            .unanis-badge{
            background: url(/wp-content/uploads/2025/11/unani-circle.webp);
            width:102px;
            height:102px;
            border-radius:50%;
            background-position: center;
            background-size: cover;
            display:flex;
            justify-content:center;
            align-items:center;

            opacity:0;
            transform:translateY(-20px) scale(.8);
            }

            .unanis-badge small {
            font-size:13px;
            color:#8a8a8a;
            line-height:14px;
            text-align:center;
            }


            .unanis-badgess {
            background: url(/wp-content/uploads/2025/11/unani-circle.webp);
            width:150px;
            height:150px;
            border-radius:50%;
            background-position: center;
            background-size: cover;
            position:relative;
            bottom:35px;
            }

            

            .unanis-badgess small {
            font-size: 17px;
            padding: 25px;
            color: red;
            text-align: center;
            }

            .unanis-lead {
            line-height: 1.3;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
        text-align: center;
        width: 50%;
        padding-bottom: 8rem;
                margin: 0 auto;
            }



            .l-label-1 {
            position: relative;
            top: 130px;
            left: 320px;
            z-index:1;
            color:#ba2228;
            }

            .l-label-2{
            position: relative;
            top: 110px;
            left: 270px;
            color:#ba2228;
            z-index: 9;
            }

            .l-label-3{
            position: relative;
            top: 100px;
            left: 290px;
            z-index:9;
            color:#ba2228;
            }

            .l-label-4{
            position: relative;
            top: 20px;
            left: 450px;
            z-index:1;
            color:#ba2228;
            }


            .r-label-1{
            position: relative;
            top: 0px;
            right: 210px;
            color:#ba2228;
            }



            .r-label-2{
            position: relative;
            top: -30px;
            right: 140px;
            color:#ba2228;
            }


            .r-label-3{
            position: relative;
            top: -30px;
            right: 200px;
            color:#ba2228;
            }


            .r-label-4{
            position: relative;
            top: 28px;
            right: 50px;
            color:#ba2228;
            }



            .unanis-badge:hover {
            transform: scale(3);
            font-size:2rem;
            }
            .unanis-desc,.desc{
            color:#000000;
            }

            /* unani css */
            .unani-home{
            width: 100%;
            margin:0 auto;
            position:relative;
            background:transparent;
            padding:1px 4px 80px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:visible;
            background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
            }


            /* Center round logo area */

            .unani-center-circle{
            width:300px;
            /* height:220px; */
            margin: 40px auto -235px;
            display:flex;
            align-items:center;
            justify-content:center;

            position:relative;
            z-index:10;

            }


            /* Replace this with your logo image if available */


            .unani-logo-inner{
            text-align:center;
            }
            .unani-logo-inner img{
            width:300px;
            height:auto;
            display:block;
            margin:0 auto;
            position: relative;
            top: 70px;
            }
            .logo-title{
            font-weight:700;
            margin-top:8px;
            color:var(--accent);

            }
            .logo-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:4px;
            }
            .section.home-our-legacy{
              padding-bottom: 0px !important;
            }
            /* Stats positions */
            .unani-stats-wrap{
            position:relative;
            height:400px; /* area around central circle where stats will be placed */
            margin-top:8px;
            margin-bottom:0px;
            }

            .stat{
            position:absolute;
            width:234px;
            text-align:left;
            transform-origin:center;
            opacity:0;


            }

            .stat .label{
            font-size: 20px;
            color:#db2528;
            margin-top: 0px;
            font-weight: normal;
            }
            .stat .s1{
            text-align: right;
            }
            .stat .num{
            font-size:40px;
            letter-spacing:0.5px;
            text-align: left;
            color: #db2528;
            }
            /* Clockwise order and approximate positions */
            /* Top-left (117K+) */
            .s1{ top:10px; left:15rem; }
            /* Top-right (450+) */
            .s2{ top:10px; right:15rem;  }
            /* Right middle (25+) */
            .s3{ top:190px; right:15rem; width:234px; }
            /* Bottom center (85%) */
            .s4{ top:190px; left:29%; transform:translateX(-50%);  width:234px;
            font-size: 11px;
            }
            /* Left middle (100+) */
            .s5{ top:0px; left:20rem; width:235px; }

            /* Below unani-home-hero copy */
            .unani-home-hero{
            text-align:center;
            margin-top:0px;
            padding:0px 20px 0;
            }
            .unani-home-hero h1{
            font-size:32px;
            margin:6px 0;
            font-weight:800;
            }
            .unani-home-hero h1 .accent{ color:#ba2228; }
            .unani-home-hero p{
            max-width:80%;
            margin:0 auto;
            color:var(--muted);
            line-height:1.7;
            margin-top:12px;
            font-size:1.2rem;
            }
            .stat p{
            font-size: 11px;
            line-height:15px;
            }
            .cta{
            margin-top:18px;
            }




            /* Show paragraph when stat is hovered */
            .unani-label-para p {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
            }

            /* On hover, show smoothly */
            .stat:hover .unani-label-para p {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            }


            .learnmorebtn{
            background:#d31f27;
            color:#fff;
            padding:10px 18px;
            border-radius:8px;
            border:none;
            cursor:pointer;
            font-weight:600;
            box-shadow:0 6px 12px rgba(196,58,55,0.15);
            opacity:0 ;
            }

             /* Content Single Product Page */
            .pp-featured-related{
              width: 1300px;
              margin: 0 auto;
              padding-bottom: 100px;
            }
            .pp-featured-related .uxb-fp__body{
                  height: 230px;
            }
             .pp-featured-related .uxb-fp__product-title{
                  height: 50px;
             }
              .pp-featured-related .uxb-fp__tagline{
                    height: 70px;
              }

            .pp-featured-related .uxb-fp__nav .slick-prev,
            .pp-featured-related .uxb-fp__nav .slick-next{
              position: absolute;
              top:85%;
             }
              .pp-featured-related .uxb-fp__nav .slick-prev{
                left: 1%;
              }
               .pp-featured-related .uxb-fp__nav .slick-next{
                right: 1%;
              }
           /* Layout */
.hamdard-story-section {
  padding: 0px 15px 60px 15px;
  background: #ffffff;
}

.hamdard-story-container {
  max-width: 90%;
  margin: 0 auto;
}

/* Header */
.hamdard-story-header {
  text-align: center;
  margin-bottom: 60px;
color:#000;
}

.hamdard-story-title {
  font-size: 32px;
  margin: 0 0 0px;
  font-weight: 800;
color:#000000;
}

.hamdard-story-title span {
  color: #ba2228; /* Hamdard red */
}

.hamdard-story-intro {
    line-height: 1.7;
    font-size: 1.2rem;
      width: 80%;
    color: #000;
    margin: 0 auto;
}

.uu-intro{
width: 85% !important;
}

/* Content columns */
.hamdard-story-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hamdard-story-image-col {
  flex: 0 0 40%;
  text-align: left;
}

.hamdard-story-image-col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Text column */
.hamdard-story-text-col {
  flex: 0 0 60%;
padding-right: 10rem;

}

.hamdard-story-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 12px;
color:#000;
}

.hamdard-story-text {
  font-size: 14px;

  color: #000;
  margin: 0 0 12px;
}

.hamdard-story-readmore {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #e53935;
}

/* Fade-in animation for product image */
.hamdard-story-products-img {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hamdard-story-products-img.is-visible {
  opacity: 1;
  transform: translateY(0);
}
            
.hamdard-our-history h3, 
.hamdard-our-legacy h3,
.legacy-hamdard-foundation h3
{
		font-size: 32px;
    font-weight: 800; 
				color:#000;
}
.hamdard-our-history p,
.legacy-hamdard-foundation p{
  font-size:1.2rem;
}
.legacy-text{
	   font-size: 1.2rem;
    line-height: 1.7;
    color: #000;
    max-width: 80%;
    margin: 0 auto;
      padding: 0px 43px;
    text-align: center;	
}
.hit-detail h3{
  font-size: 1.2rem;
  font-weight: 600;
}

.certifications h3{
		    font-size: 32px;
    font-weight: 800;
			color:#000;
}

.labor h3{
    margin: 3px 0rem;
    font-size: 32px;
color:black;
font-weight:800;
}
.hamdard-commitment{
color:#ba2228;
}
.labor p{
    /* margin:0rem 15rem 3rem 15rem; */
  width: 80%;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.7;
    margin: 0 auto;
}
.evs-slider{
  width: 90%;
  margin: 0 auto;
}
.evs-slider .evs-item{
  padding: 0px 30px;
}
.evs-slider .evs-item img{
width: 80%;
padding-bottom: 10px;
border-radius: 25px;
}
.evs-slider .evs-item p.short-text{
font-size: 14px;
}
.read-btn {
  color: #d83131;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
}

.read-btn:hover {
  text-decoration: underline;
}
.img-radius img{
  border-radius: 5px;
}

/* career Page */

.healing-section {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 580px;
}

.healing-left {
  background: #c53b32;
  color: #fff;
  padding: 90px;
}

.healing-left h2 {
  font-size: 1.6rem;
  line-height: 1.1;
  color: #fff;
}

.healing-cards {
  display: flex;
  height: 660px;
  overflow: hidden;
  color: #fff;
}

.card {
  flex: 1;
  position: relative;
  transform: scaleX(1);
  will-change: transform;
  cursor: pointer;
}

.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.card:nth-child(1) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value1.webp");
}
.card:nth-child(2) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value2.webp");
}
.card:nth-child(3) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value3.webp");
}
.card.active:hover .card-content{
background: #00000045;
transition: opacity 0.3s ease;
}
.card-content {
position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        color: #fff;
        z-index: 2;
        
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
}
.card-content h3{
  color: #fff;
}
.card-content p {
  opacity: 0;
  transform: translateY(10px);
}

.arrow {
  display: inline-block;
  margin-top: 8px;
}

/* Career New */
.values-section {
  display: flex;
  height: 80vh;
  overflow: hidden;
}

.value-left-content {
  width: 35%;
  background: #d71920;
  color: #fff;
  padding: 60px;
}
.value-left-content h2{
color: #fff;
        font-size: 32px;
        font-weight: 800;
}
.value-left-content p{
  font-size: 1.2rem;
  line-height: 1.7;
}

.value-right-panels {
  width: 65%;
  display: flex;
}

.value-panel {
  flex: 1;
  will-change: flex-grow;
  backface-visibility: hidden;
 background-size: cover;
background-position: center center;
background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  transition: flex-grow 0.5s ease;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  color: #fff;
}

.value-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.value-panel-content {
    position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.value-panel.active .value-panel-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.value-panel-content h3{ 
color: #fff;
}

.value-panel.active {
  flex-grow: 2;
}

.value-panel.active .value-panel-content {
  opacity: 1;
}

.career-subhead p{
  text-align: left;
  width: 100%;
  font-size: 1.2em;
  line-height: 1.7;
}

/* understanding Unani */
.u-section {
        position: relative;
        height: 114vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }


      .top-nav {
              background: url(/wp-content/uploads/2026/02/timeline-curved-line.png) center / contain no-repeat;
          width: 65%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 30px;
          padding: 10px;
          gap: 20%;
      }

      .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

      .nav-item {
      color: #000;
          background: #fff;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
      .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
      .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
              font-size: 16px;
              transition: background-color 0.2s ease-in 0s;
      }
      .non-active{
              margin-top: 10px;
          font-size: 12px;
          text-align: center;
      }
      .panels {
        position: relative;
        height: 100%;
      }

      .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }
       .panel1-content{width: 28%;margin: 0 auto;text-align: center;position: relative;top: -10px;}
       .panel1-content img{display: block; }
      .panel.active {
        opacity: 1;
        pointer-events: auto;
      }
  
     
      .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

      .content {
        position: absolute;
        width: 30%;
        top: 35%;
        transform: translateY(-50%);
      }
      
      .content.right { right: 25%; }
      .content.left { left: 15%; width: 20%;}
      .content.right h2,
      .content.left h2,
      .ancient-header h2,
      .ailments-header h2,
      .modes-header h2 
      {
          color: #fde9b6;
          font-size: 1.6rem;
          /* opacity: 0; */
          margin: 0;
        position: relative;
        top: -20px;
      }
      .content.right p,
      .content.left p,
      .ancient-header p,
      .ailments-header p,
      .modes-header p
      {
          font-size: 1.2rem;
          line-height: 1.3;
          position: relative;
          top: -10px;
          /* opacity: 0; */
      }
      .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 1.2rem;
          opacity: 0;
           position: relative;
          top:35px;
      }
      .ancient-circle {
       position: relative;
        left: -3%;
        width: 410px;
        transform: translateY(25%);
    
      }

      .ancient-man
      {
        position: relative;
       
        right: -14%;
        width: 290px;
        transform: translateY(-70%) !important;
      }

      .diagnosis-man{
          position: absolute;
        top: 5%;
        right: 39%;
        width: 220px;
      }

      .dot {
        position: absolute;
        width: 50px;
        cursor: pointer;
        z-index: 9;
      }
      .dot.physical{top:2%;left:53.5%}
      .dot.dietary{top:27%;left:52%}
      .dot.symptoms{top:9.5%;left:52%}
      .dot.sleep{top:5%;left:53.5%}
      .dot.activity-patterns{top:52%;left:52.5%}
      .dot.excretions{top:35%;left:52%}

      .line.physical{top: 4.5%;left: 56.5%;}
      .line.dietary{top:11%;left:54%}
      .line.symptoms{top:12%;left:53.5%}
      .line.sleep{top:9%;left:55.5%}
      .line.activity-patterns{top:55%;left:55%}
      .line.excretions{top:38%;left:54%;width: 120px;}

      .dot img {
        width: 100%;
      }

      .line {
        position: absolute;
        opacity: 0;
      }
      .info-box h3{color: #fff;}
      .info-box .physical{top: 2.4%;right: 9%;position: absolute; width: 25%;}
      .info-box .dietary{top:9.5%;right:8.5%;position: absolute;width: 25%;}
      .info-box .symptoms{top:29%;right:6%;position: absolute;width: 25%;}
      .info-box .sleep{top:44.5%;right:8%;position: absolute;width: 25%;}
      .info-box .activity-patterns{top:53.5%;right:9%;position: absolute;width: 25%;}
      .info-box .excretions{top:50%;right:12%;position: absolute;width: 25%;}

      .info {
        display: none;
      }
      .ancient-header{padding-top: 30px;padding-bottom: 30px;}
      .ailments-header, .modes-header, .ancient-header{text-align: center;width: 60%;margin: 0 auto;padding-top: 20px;}
      .ailment-man { left: 30%; bottom: 20%; position: absolute; height: 60%;z-index: 9; }
      .ailment-woman { left: 48%; bottom: 20%; position: absolute; height: 55%; }

      /* .ailment-list {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
      } */

      .ailment-men{
        position: absolute;
          left: 3%;
          top: 35%;
          transform: translateY(-50%);
          width: 23%;
          text-align: right;
      }
      .ailment-women{
          position: absolute;
        right: 3%;
        top: 35%;
        transform: translateY(-50%);
          width: 23%;
      }

      .ailment .body {
        height: 0;
        overflow: hidden;
      font-size: 12px;
      padding-top: 10px;
      font-weight: 100;
      }
      .ailment .head{
        font-weight: 600;
        cursor: pointer;
      }
      .ailment .head span img{
            position: relative;
          top: 0px;
        
          width: 70px;
      }
      .ailment.active .body{
      height: auto;
        
      }

      .ancient-grid-left{
         position: absolute;
        left: 15%;
        top: 15%;
        display: block;
        width: 25%;
        text-align: left;
      }

      .ancient-grid-left p{
      padding: 5px 55px 0px 96px;
       height: 0;
       overflow: hidden;
      }
       .ancient-grid-left .ancient-item.active p{
        height: auto;
       }

      .ancient-item{
        height: auto;
        padding: 20px 0px;
      }
      .ancient-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
      .ancient-item ul li{
        list-style: none;
        display: inline-block;
        margin-bottom: 0px;
      }
      .ancient-item ul li img{
      width: 50px;
          position: relative;
          top: -15px;
      }
      .ancient-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: .9rem;
        padding: 0px 5px;
        margin: 0;
      }
      .ancient-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: .9rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      }
       .ancient-item p{
        font-size: 12px;
        position: relative;
        /* top: -30px; */
       }
      .ancient-grid-right {
        position: absolute;
        right: 6%;
        top: 15%;
        display: block;
        width: 25%;
      }
      .ancient-grid-right p{
      padding: 5px 0px 0px 96px;
      }
      #ancient .ancient-item .body{
  height:0;
  overflow:hidden;
}

#ancient .ancient-item .head{
  cursor:pointer;
  height: 45px;
}
.ancient-item .head span{
 position: relative;
 top: 1px;
 left: 5px;
}
#ancient .ancient-item.active .body{
  height:auto;
}
    
      .mode-man{
        position: absolute;
        bottom: 28%;
        left: 44%;
        width: 200px;
      }
      .modes-grid-left {
        position: absolute;
        left: 12%;
        top: 22%;
        display: block;
        width: 25%;
        text-align: right;
      }
      .modes-grid-left p{
      padding: 0px 65px 0px 0px;
      }
      .mode-item{
        height: 170px;
      }
      .mode-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
      .mode-item ul li{
        list-style: none;
        display: inline-block;
        margin-left: 0px !important;
      }
      .mode-item ul li img{
      width: 90px;
          position: relative;
          top: -15px;
      }
      .mode-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        padding: 5px 0px;
        margin: 0;
      }
      .mode-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: 1rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      }
       .mode-item p{
        font-size: 12px;
        position: relative;
        top: -30px;
       }
      .modes-grid-right  {
        position: absolute;
        right: 12%;
        top: 22%;
        display: block;
        width: 25%;
      }
      .modes-grid-right p{
      padding: 0px 0px 0px 95px;
      }

      .int-text{
          width: 25%; 
          margin: 0 auto;
          padding: 50px 0px;
          position: relative;
          color: #ead39b;
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          opacity: 0;
      }
      .greek-text{
		margin:0 auto;
		width:80%;
		padding:10% 0px;
}


  }

/* Tablet screen ladscape */
@media (max-width: 1180px) {
.greek-text{
		margin:0 auto;
		width:80%;
		padding:8% 0px;
    font-size: 1rem !important;
}

.ailments-category-slider,
.products-fixed-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Each icon must be its own layer */
.ailment-icon {
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    touch-action: auto !important;
      -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: visible !important;

}

/* REMOVE all animation for stability */
.ailment-icon img {
    width: 100%;
    height: auto;
    display: block;

    /* ❌ REMOVE transitions */
    transition: none !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Active state (NO SCALE for iPhone stability) */
.ailment-icon.is-active img {
    border: 1px solid #db2628;
    background: rgba(219, 38, 40, 0.05);
    border-radius:50%;
}
    .text-u-unani {
  padding-top: 20px;
  text-align: center;
color:#fff
}
.text-u-unani h3,
.text-u-unani p
{
color:#fff;
}
.legacy-text{
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
#myVideo {
    width: 100%;
    outline: 4px solid white;
    outline-offset: px;
}


.soundToggle {
    position: absolute;
    top: 20px;
    right: 15px;
    background:rgb(218 38 40);
    border: none;
    color: white;
    padding: 0px 13px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
    z-index: 9;
}
 .video-modal {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 9999;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}

.video-popup {
     position: absolute;
    top: 55%;
    left: 50%;
    width: 80%;
    max-width: 750px;
    transform: translate(-50%, -50%);
    background: #000;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

.video-popup video {
  width: 100%;
  height: auto;
}

.video-close {
  position: absolute;
        top: -10px;
        right: -10px;
        font-size: 23px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        height: 6px;
        width: 30px;
        background: red;
        border-radius: 50%;
        line-height: 1;
        min-height: 30px;
        z-index: 9;
}
.evs-slider{
  width: 90%;
  margin: 0 auto;
}
.evs-slider .evs-item{
  padding: 0px 30px;
}
.evs-slider .evs-item img{
width: 100%;
padding-bottom: 10px;
border-radius: 25px;
}
.evs-slider .evs-item p.short-text{
font-size: 14px;
}
.read-btn {
  color: #d83131;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
}

.read-btn:hover {
  text-decoration: underline;
}

.impact-sec .about-impact .col-inner

{
  padding: 70px !important;
}
.career-sec .career-impact .col-inner{
  padding: 40px !important;
}
.products-archive-wrapper #products-fixed-bar.fixed {
    transform: translateY(85%);
  }
.section-content .unani-section {
        width: 100%;
        min-height: auto;
        position: relative;
        overflow: hidden;
        padding-bottom: 150px;
    }
    .unani-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -9;
        background-image: url(/wp-content/uploads/2026/02/story-of-uanani-mob-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
    }
        .unani-section .unani-content h2 {
        font-size: 25px;
        font-weight: 800;
        color: #000000;
        padding-top: 20px;
        margin-bottom: 10px;
        text-align: center;
    }
        .unani-section .unani-content h2 span {
        color: #ba2228;
    }
        .unani-section .intro-paragraph {
        max-width: 990px;
        margin: 0 auto 25px auto;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
    }
        .unani-section .text-column {
               margin-left: 0;
        padding: 20px;
        width: 50%;
        padding-right: 0px;
        font-size: 18px;
        color: #000;
        text-align: left;
        min-height: 250px;
    } 
 .section-content .unani-container {
        display: block;
        width: 100%;
        margin-top: 0px;
        height: 100%;
    }
        .section-content .unani-container .unani-left-panel {
        width: 50%;
        background-color: #d32027;
        color: white;
        padding: 30px;
        box-sizing: border-box;
        font-size: 18px;
        float: left; 
        height: 54.5vh;  
      }
    .section-content .unani-container .unani-right-panel {
        width: 50%;
        float: left;
    }

        .hamdard-story-title {
        font-size: 1.8rem;
    }
    .hamdard-story-intro {
        font-size: 1rem;
        margin: 1rem 0rem;
    }

 .u-section {
        position: relative;
        height: 90vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }


      .top-nav {
              background: url(/wp-content/uploads/2026/02/timeline-curved-line.png) center / contain no-repeat;
          width: 85%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 10px;
          padding: 10px;
          gap: 16%;
      }

      .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

      .nav-item {
      color: #000;
          background: #fff;
          width: 100px;
          height: 75px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
      .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
      .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 140px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
          font-size: 14px;
          transition: background-color 0.2s ease-in 0s;
          font-weight: 600;
      }
      .non-active{
              margin-top: 10px;
          font-size: 11px;
          text-align: center;
          font-weight: 600;
      }
      .panels {
        position: relative;
        height: 100%;
      }

      .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

      .panel.active {
        opacity: 1;
        pointer-events: auto;
        text-align: center;
      }
      .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

      .ancient-header{margin: 80px auto 0px;scale: 1.3;width: 60%;}

      .content.right { right: 0%; }
      .content.left { left: 15%; width: 70%;scale: 1.3;top:10%;}
      .content.right h2,
      .content.left h2,
      .ailments-header h2,
      .modes-header h2,
      .ancient-header h2
      {
          color: #fde9b6;
          font-size: 1rem;
          /* opacity: 0; */
          margin: 0;
        position: relative;
        top: -40px;
      }
      .content.right p,
      .content.left p,
      .ailments-header p,
      .modes-header p,
      .ancient-header p
      {
          font-size: 0.8rem;
          line-height: 1.3;
          position: relative;
          top: -30px;
          /* opacity: 0; */
      }
      .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 0.8rem;
          opacity: 0;
           position: relative;
          top:0px;
      }

          .ancient-grid-left {
        position: absolute;
        left: 10%;
        top: 25%;
        display: block;
        width: 30%;
        text-align: left;
        z-index: 9;
        scale: 1.3;
    }
    .ancient-item {
        height: auto;
        padding: 20px 0px;
    }

        #ancient .ancient-item .head {
        cursor: pointer;
        height: 40px;
    }
      .ancient-item ul {
        margin: 0px -30px 0px 0px;
        padding: 0px;
    }
        .ancient-item ul li {
        list-style: none;
        display: inline-block;
        margin-bottom: 0px;
        margin-left: 0px !important;
    }
        .ancient-item ul li img {
        width: 30px;
        position: relative;
        top: -15px;
    }
    .ancient-item h3 {
        color: #fff;
        font-weight: 600;
        font-size: .8rem;
        padding: 0px 5px;
        margin: 0;
    }
    .ancient-item h4 {
        color: #fde9b6;
        font-weight: 400;
        font-size: .8rem;
        font-style: italic;
        padding: 0px;
        margin: 0;
    }
    .ancient-item .head span {
        position: relative;
        top: 1px;
        left: 5px;
    }
    #ancient .ancient-item .body {
        height: 0;
        overflow: hidden;
        width: 160px;
    }
    .ancient-item p {
        font-size: 10px;
        position: relative;
        /* top: -30px; */
        margin-bottom: 0;
    }

        .panel1-content {
        width: 40%;
        margin: 0 auto;
        text-align: center;
        position: relative;
        top: 0px;
    }

    .ancient-grid-right {
        position: absolute;
        right: 5%;
        top: 23%;
        display: block;
        width: 30%;
         scale: 1.3;
    }
    .ancient-grid-right .ancient-item .body{
      position: relative;
        right: -90px;
        text-align: right;
    }

      .ancient-circle {
        position: relative;
         left: 8%;
        top: 55%;
        width: 310px;
        transform: translateY(80%);
      }

      .ancient-man
      {
        position: relative;
        top: -125px;
        right: -9%;
        width: 250px;
      }


  .products-fixed-bar .fixed-inner .fixed-left ul {
        /* scrollbar-color: #db2628 #db2628; */
    }
        .products-fixed-bar .fixed-inner .fixed-left ul {
        overflow-x: auto;
        white-space: nowrap;
        margin: 0 10px;
        padding: 0px 0;
        scrollbar-width: auto;
        -webkit-overflow-scrolling: touch;
    }
     .ailments-category-slider .slick-slide img {
        padding: 15px 70px !important;
    }
     .ailments-category-slider .slick-slide .is-active img {
       padding: 0px 0px !important;
       scale: 1;
     }
    .ailments-category-slider .slick-slide {
        text-align: center;
        font-size: 14px;
        color: #000;
        font-weight: 600;
        margin-bottom: 40px;
    }

.unani-right-side {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .unani-info-card {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    .unani-info-card img {
        width: 100%;
        object-fit: cover;
        margin-top: 13px;
    }

        .unani-highlight {
        font-size: 2.5rem;
        font-weight: 800;
        color: #ba2228;
    }
        .unani-highlight span {
        color: #000;
    }

    .products-fixed-bar .fixed-inner .fixed-left ul li img{
      scale: .9;
      width: 70px;
    }
    .products-fixed-bar .fixed-inner .fixed-left ul li{
      bottom: 0px;
    }
    .products-fixed-bar .consult-expert-btn{
          width: 200px;
    }
    .products  .product-grid-item{width: 32%;}
 .unani-home{
            width: 100%;
            margin:0 auto;
            position:relative;
            background:transparent;
            padding:40px 4px 80px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:visible;
            background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
            }


            /* Center round logo area */

            .unani-center-circle{
            width:300px;
            /* height:220px; */
            margin: 40px auto -235px;
            display:flex;
            align-items:center;
            justify-content:center;

            position:relative;
            z-index:10;

            }


            /* Replace this with your logo image if available */


            .unani-logo-inner{
            text-align:center;
            }
            .unani-logo-inner img{
            width:300px;
            height:auto;
            display:block;
            margin:0 auto;
            position: relative;
            top: 65px;
            left: 20px;
            }
            .logo-title{
            font-weight:700;
            margin-top:8px;
            color:var(--accent);

            }
            .logo-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:4px;
            }

            /* Stats positions */
            .unani-stats-wrap{
            position:relative;
            height:500px; /* area around central circle where stats will be placed */
            margin-top:8px;
            margin-bottom:0px;
            }




            .stat{
            position:absolute;
            width:234px;
            text-align:left;
            transform-origin:center;
            opacity:0;


            }

            .stat .label{
            font-size: 20px;
            color:#db2528;
            margin-top: 0px;
            font-weight: normal;
            text-align: center;
            }
            .stat .s1{
            text-align: right;
            }
            .stat .num{
            font-size:40px;
            letter-spacing:0.5px;
            text-align: center;
            color: #db2528;
            }
            /* Clockwise order and approximate positions */
            /* Top-left (117K+) */
            .s1{ top:10px; left:10rem; }
            /* Top-right (450+) */
            .s2{ top:0px; right:5rem;  }
            /* Right middle (25+) */
            .s3{ top:190px; right:5rem; width:234px; }
            /* Bottom center (85%) */
            .s4{ top:190px; left:18%; transform:translateX(-50%);  width:234px;
            font-size: 11px;
            }
            /* Left middle (100+) */
            .s5{ top:0px; left:6rem; width:235px; }

            /* Below unani-home-hero copy */
            .unani-home-hero{
            text-align:center;
            margin-top:10px;
            padding:0px 20px 0;
            }
            .unani-home-hero h1{
            font-size:32px;
            margin:6px 0;
            font-weight:800;
            }
            .unani-home-hero h1 .accent{ color:#ba2228; }
            .unani-home-hero p{
            max-width:100%;
            margin:0 auto;
            color:var(--muted);
            line-height:1.6;
            margin-top:12px;
            font-size:1.2rem;
            }
            .stat p{
            font-size: 11px;
            line-height:15px;
            }
            .cta{
            margin-top:18px;
            }




            /* Show paragraph when stat is hovered */
            .unani-label-para p {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
            text-align: center;
            font-size: 13px;
            }

            /* On hover, show smoothly */
            .stat:hover .unani-label-para p {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            }


            .learnmorebtn{
            background:#d31f27;
            color:#fff;
            padding:10px 18px;
            border-radius:8px;
            border:none;
            cursor:pointer;
            font-weight:600;
            box-shadow:0 6px 12px rgba(196,58,55,0.15);
            opacity:0 ;
            }
            .wellness-center .col-inner{
                padding: 2rem 2rem 2rem 2rem !important;
            }
            .well-btn{
              padding: 3px 30px;
            }

            .u-section {
        position: relative;
        height: 112vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }

      #diagnosis .content{
        text-align: left;
      }

      .top-nav {
              background: url(/wp-content/uploads/2026/02/timeline-curved-line.png) center / contain no-repeat;
          width: 85%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 60px;
          padding: 10px;
          gap: 20%;
      }

      .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

      .nav-item {
      color: #000;
          background: #fff;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
      .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
      .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
              font-size: 16px;
              transition: background-color 0.2s ease-in 0s;
      }
      .non-active{
              margin-top: 10px;
          font-size: 12px;
          text-align: center;
      }
      .panels {
        position: relative;
        height: 100%;
      }

      .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

      .panel.active {
        opacity: 1;
        pointer-events: auto;
      }
      .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

      .content {
        position: absolute;
        width: 40%;
        top: 35%;
        transform: translateY(-50%);
      }

      .content.right { right: 10%; }
      .content.left { left: 10%; width: 25%;top: 30%;scale: 1;}
      .content.right h2,
      .content.left h2,
      .ailments-header h2,
      .modes-header h2 
      {
          color: #fde9b6;
          font-size: 1.6rem;
          /* opacity: 0; */
          margin: 0;
        position: relative;
        top: -20px;
      }
      .content.right p,
      .content.left p,
      .ailments-header p,
      .modes-header p
      {
          font-size: 1.2rem;
          line-height: 1.3;
          position: relative;
          top: -10px;
          /* opacity: 0; */
      }
      .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 1.2rem;
          opacity: 0;
           position: relative;
          top:35px;
      }
      .ancient-circle {
                position: relative;
        left: 0%;
        top: 245px;
        width: 320px;
        transform: translateY(-50%);
      }

      .ancient-man
      {
                position: relative;
        top: -295px;
        right: 0%;
        width: 250px;
      }

      .diagnosis-man{
          position: absolute;
        top: 5%;
        right: 40%;
        width: 180px;
      }

      .dot {
        position: absolute;
        width: 50px;
        cursor: pointer;
        z-index: 9;
      }
      .dot.physical{top:1%;left:53%}
      .dot.dietary{top:19%;left:51%}
      .dot.symptoms{top:9%;left:51%}
      .dot.sleep{top:5%;left:53%}
      .dot.activity-patterns{top:41%;left:52%}
      .dot.excretions{top:26%;left:51%}

      .line.physical{top: 3%;left: 57%;}
      .line.dietary{top:7%;left:53%}
      .line.symptoms{top:12%;left:53%}
      .line.sleep{top:8%;left:55%}
      .line.activity-patterns{top:43.5%;left:55%}
      .line.excretions{top:29%;left:53%}

      .dot img {
        width: 100%;
      }

      .line {
        position: absolute;
        opacity: 0;
      }
      .info-box {text-align: left;}
      .info-box h3{color: #fff;}
      .info-box .physical{top: 2%;right: 5%;position: absolute; width: 25%;}
      .info-box .dietary{top:6%;right:6%;position: absolute;width: 25%;}
      .info-box .symptoms{top:28%;right:3%;position: absolute;width: 25%;}
      .info-box .sleep{top:40%;right:5%;position: absolute;width: 25%;}
      .info-box .activity-patterns{top:42%;right:8%;position: absolute;width: 25%;}
      .info-box .excretions{top:53%;right:6%;position: absolute;width: 25%;}

      .info {
        display: none;
      }
      .ailments-header, .modes-header{text-align: center;width: 60%;margin: 0 auto;}
      .ailment-man { left: 30%; bottom: 23%; position: absolute; height: 40%;z-index: 9; }
      .ailment-woman { left: 48%; bottom: 23%; position: absolute; height: 36%; }
     .ailment-women .ailment {
        text-align: left;
      }
      /* .ailment-list {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
      } */

      .ailment-men{
        position: absolute;
          left: 3%;
          top: 42%;
          transform: translateY(-50%);
          width: 29%;
          text-align: right;
      }
      .ailment-women{
          position: absolute;
        right: 3%;
        top: 42%;
        transform: translateY(-50%);
          width: 25%;
      }

      .ailment .body {
        height: 0;
        overflow: hidden;
      font-size: 12px;
      padding-top: 0px;
      font-weight: 100;
      /* position: relative;
        right: 20px; */
      }
      .ailment .head{
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
      }
      .ailment .head span img{
            position: relative;
          top: 0px;
        
          width: 70px;
      }
      .ailment.active .body{
      height: auto;
        
      }
      .mode-man{
        position: absolute;
        bottom: 36%;
        left: 41%;
        width: 200px;
      }
      .modes-grid-left{
        position: absolute;
        left: 5%;
        top: 22%;
        display: block;
        width: 30%;
        text-align: right;
      }
      .modes-grid-left p{
      padding: 0px 65px 0px 0px;
      }
      .mode-item{
        height: 170px;
      }
      .mode-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
      .mode-item ul li{
        list-style: none;
        display: inline-block;
        margin-left: 0px !important;
      }
      .mode-item ul li img{
      width: 90px;
          position: relative;
          top: -15px;
      }
      .mode-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        padding: 5px 0px;
        margin: 0;
      }
      .mode-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: 1rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      }
       .mode-item p{
        font-size: 14px;
        position: relative;
        top: -30px;
       }
      .modes-grid-right {
        position: absolute;
        right: 8%;
        top: 22%;
        display: block;
        width: 30%;
      }
      .modes-grid-right .mode-item{
        text-align: left;
      }
      .modes-grid-right p{
      padding: 0px 0px 0px 95px;
      }

      .int-text{
          width: 50%;
          margin: 0 auto;
          padding: 50px 0px;
          position: relative;
          color: #ead39b;
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          opacity: 0;
      }

        .unani-highlight {
        font-size: 2.5rem;
        font-weight: 800;
        color: #ba2228;
    }
        .unani-highlight span {
        color: #000;
    }
    .values-section {
  display: flex;
  height: 32vh;
  overflow: hidden;
}

.value-left-content {
  width: 100%;
  background: #d71920;
  color: #fff;
  padding: 60px;
}
.value-left-content h2{
color: #fff;
        font-size: 32px;
        font-weight: 800;
}
.value-left-content p{
  font-size: 1.2rem;
  line-height: 1.7;
}

.value-right-panels {
  width: 65%;
  display: none;
}

.value-panel {
  flex: 1;
  will-change: flex-grow;
  backface-visibility: hidden;
 background-size: cover;
background-position: center center;
background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  transition: flex-grow 0.5s ease;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  color: #fff;
}

.value-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.value-panel-content {
    position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.value-panel.active .value-panel-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.value-panel-content h3{ 
color: #fff;
}

.value-panel.active {
  flex-grow: 2;
}

.value-panel.active .value-panel-content {
  opacity: 1;
}

.career-subhead p{
  text-align: left;
  width: 100%;
  font-size: 1.2em;
  line-height: 1.7;
}
}
@media screen and (min-width: 850px){
  .flickity-slider .banner-1{
      padding-top: 400px !important;
    }
}

/* Tablet screen ladscape */
@media (max-width: 1024px) {

  
 .unani-home{
            width: 100%;
            margin:0 auto;
            position:relative;
            background:transparent;
            padding:40px 4px 80px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:visible;
            background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
            }


            /* Center round logo area */

            .unani-center-circle{
            width:300px;
            /* height:220px; */
            margin: 40px auto -235px;
            display:flex;
            align-items:center;
            justify-content:center;

            position:relative;
            z-index:10;

            }


            /* Replace this with your logo image if available */


            .unani-logo-inner{
            text-align:center;
            }
            .unani-logo-inner img{
            width:300px;
            height:auto;
            display:block;
            margin:0 auto;
            }
            .logo-title{
            font-weight:700;
            margin-top:8px;
            color:var(--accent);

            }
            .logo-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:4px;
            }

            /* Stats positions */
            .unani-stats-wrap{
            position:relative;
            height:500px; /* area around central circle where stats will be placed */
            margin-top:8px;
            margin-bottom:0px;
            }




            .stat{
            position:absolute;
            width:234px;
            text-align:left;
            transform-origin:center;
            opacity:0;


            }

            .stat .label{
            font-size: 20px;
            color:#db2528;
            margin-top: 0px;
            font-weight: normal;
            text-align: center;
            }
            .stat .s1{
            text-align: right;
            }
            .stat .num{
            font-size:40px;
            letter-spacing:0.5px;
            text-align: center;
            color: #db2528;
            }
            /* Clockwise order and approximate positions */
            /* Top-left (117K+) */
            .s1{ top:-15%; left:1rem; }
            /* Top-right (450+) */
            .s2{ top:-15%; right:1rem;  }
            /* Right middle (25+) */
            .s3{ top:190px; left:2rem; width:234px; }
            /* Bottom center (85%) */
            .s4{ bottom:10%; left:50%; transform:translateX(-50%);  width:234px;
            font-size: 11px;
            }
            /* Left middle (100+) */
            .s5{ top:190px; right:2rem; width:235px; }

            /* Below unani-home-hero copy */
            .unani-home-hero{
            text-align:center;
            margin-top:10px;
            padding:0px 20px 0;
            }
            .unani-home-hero h1{
            font-size:32px;
            margin:6px 0;
            font-weight:800;
            }
            .unani-home-hero h1 .accent{ color:#ba2228; }
            .unani-home-hero p{
            max-width:100%;
            margin:0 auto;
            color:var(--muted);
            line-height:1.6;
            margin-top:12px;
            font-size:1.2rem;
            }
            .stat p{
            font-size: 11px;
            line-height:15px;
            }
            .cta{
            margin-top:18px;
            }




            /* Show paragraph when stat is hovered */
            .unani-label-para p {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
            text-align: center;
            font-size: 13px;
            }

            /* On hover, show smoothly */
            .stat:hover .unani-label-para p {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            }


            .learnmorebtn{
            background:#d31f27;
            color:#fff;
            padding:10px 18px;
            border-radius:8px;
            border:none;
            cursor:pointer;
            font-weight:600;
            box-shadow:0 6px 12px rgba(196,58,55,0.15);
            opacity:0 ;
            }
             .wellness-center .col-inner{
                padding: 1rem 1rem 0rem 1rem !important;
            }
            .well-btn{
              padding: 3px 30px;
            }
            .products-fixed-bar .fixed-inner .fixed-left ul {
        /* scrollbar-color: #db2628 #db2628; */
    }
        .products-fixed-bar .fixed-inner .fixed-left ul {
        overflow-x: auto;
        white-space: nowrap;
        margin: 0 10px;
        padding: 0px 0;
        scrollbar-width: auto;
        -webkit-overflow-scrolling: touch;
    }
           .products .product-grid-item{
                  width: 32%;
            }
            .products-fixed-bar .fixed-actions ul li{
                  width: 220px;
            }
            .products-fixed-bar .fixed-inner .fixed-left ul li img{
               scale: .8;
              }
              .ailments-category-slider .slick-slide img {
        padding: 15px 40px !important;
    }
    .ailments-category-slider .slick-slide {
        text-align: center;
        font-size: 14px;
        color: #000;
        font-weight: 600;
        margin-bottom: 40px;
    }

    .unani-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url(/wp-content/uploads/2025/11/History-of-Unani.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
    }
        .unani-section .unani-content {
        position: relative;
        z-index: 2;
        max-width: 90%;
        margin: 0 auto;
        padding: 40px 20px 0;
    }
        .unani-section .unani-content h2 span {
        color: #ba2228;
    }
    .unani-section .unani-content h2 {
        font-size: 32px;
        font-weight: 800;
        color: #000000;
        margin-bottom: 10px;
        text-align: center;
    }

    .unani-section .intro-paragraph {
        max-width: 1000px;
        margin: 0 auto 25px auto;
        text-align: center;
        font-size: 1.2em;
        font-weight: 500;
        line-height: 1.3;
    }

        .unani-section .text-column {
        margin-left: 0rem;
        padding: 30px 0px;
        width: 75%;
        padding-right: 0px;
        line-height: 1.3;
        font-size: 1.2rem;
        color: #000;
        text-align: left;
        min-height: 250px;
    }

    .unani-container {
        display: flex;
        width: 100%;
        height: 70vh;
    }

  .unani-container .unani-left-panel {
        width: 50%;
        background-color: #d32027;
        color: white;
        padding: 40px 40px;
        box-sizing: border-box;
    }

    .unani-container .unani-right-panel {
        width: 50%;
    }
    .unani-container .unani-left-panel p {
        line-height: 1.3;
        font-size: 1.2rem;
        color: white;
    }
    .unani-container .unani-right-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

       .hamdard-story-title {
        font-size: 32px;
        margin: 0px 0px 18px;
        font-weight: 800;
        color: rgb(0, 0, 0);
    }

    .hamdard-story-intro {
        line-height: 1.3;
        font-size: 1.2rem;
        margin: 1rem 10rem;
        color: rgb(0, 0, 0);
    }
       .u-section {
        position: relative;
        height: 100vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }


      .top-nav {
              background: url(/wp-content/uploads/2026/02/timeline-curved-line.png) center / contain no-repeat;
          width: 85%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 60px;
          padding: 10px;
          gap: 20%;
      }

      .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

      .nav-item {
      color: #000;
          background: #fff;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
      .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
      .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
              font-size: 16px;
              transition: background-color 0.2s ease-in 0s;
      }
      .non-active{
              margin-top: 10px;
          font-size: 12px;
          text-align: center;
      }
      .panels {
        position: relative;
        height: 100%;
      }

      .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

      .panel.active {
        opacity: 1;
        pointer-events: auto;
      }
      .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

      .content {
        position: absolute;
        width: 40%;
        top: 35%;
        transform: translateY(-50%);
      }

      .content.right { right: 10%; }
      .content.left { left: 10%; width: 25%;}
      .content.right h2,
      .content.left h2,
      .ailments-header h2,
      .modes-header h2 
      {
          color: #fde9b6;
          font-size: 1.6rem;
          /* opacity: 0; */
          margin: 0;
        position: relative;
        top: -20px;
      }
      .content.right p,
      .content.left p,
      .ailments-header p,
      .modes-header p
      {
          font-size: 1.2rem;
          line-height: 1.3;
          position: relative;
          top: -10px;
          /* opacity: 0; */
      }
      .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 1.2rem;
          opacity: 0;
           position: relative;
          top:35px;
      }
      .ancient-circle {
        position: relative;
        left: 8%;
        top: 300px;
        width: 400px;
        transform: translateY(-50%);
      }

      .ancient-man
      {
        position: relative;
        top: 75px;
        right: 25%;
        width: 280px;
      }

      .diagnosis-man{
          position: absolute;
        top: 5%;
        right: 40%;
        width: 180px;
      }

      .dot {
        position: absolute;
        width: 50px;
        cursor: pointer;
        z-index: 9;
      }
      .dot.physical{top:1%;left:52%}
      .dot.dietary{top:24%;left:50%}
      .dot.symptoms{top:8%;left:48%}
      .dot.sleep{top:5%;left:51%}
      .dot.activity-patterns{top:15%;left:50%}
      .dot.excretions{top:30%;left:50%}

      .line.physical{top: 4%;left: 57%;}
      .line.dietary{top:7%;left:53%}
      .line.symptoms{top:11%;left:50%}
      .line.sleep{top:8%;left:53%}
      .line.activity-patterns{top:19%;left:53%}
      .line.excretions{top:32%;left:52%}

      .dot img {
        width: 100%;
      }

      .line {
        position: absolute;
        opacity: 0;
      }
      .info-box h3{color: #fff;}
      .info-box .physical{top: 2.4%;right: 3%;position: absolute; width: 25%;}
      .info-box .dietary{top:5%;right:4%;position: absolute;width: 25%;}
      .info-box .symptoms{top:29.5%;right:4%;position: absolute;width: 25%;}
      .info-box .sleep{top:46%;right:5%;position: absolute;width: 25%;}
      .info-box .activity-patterns{top:57%;right:4%;position: absolute;width: 25%;}
      .info-box .excretions{top:58%;right:4%;position: absolute;width: 25%;}

      .info {
        display: none;
      }
      .ailments-header, .modes-header{text-align: center;width: 60%;margin: 0 auto;}
      .ailment-man { left: 30%; bottom: 24%; position: absolute; height: 40%;z-index: 9; }
      .ailment-woman { left: 48%; bottom: 24%; position: absolute; height: 36%; }

      /* .ailment-list {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
      } */

      .ailment-men{
        position: absolute;
          left: 3%;
          top: 42%;
          transform: translateY(-50%);
          width: 29%;
          text-align: right;
      }
      .ailment-women{
          position: absolute;
        right: 3%;
        top: 42%;
        transform: translateY(-50%);
          width: 25%;
      }

      .ailment .body {
        height: 0;
        overflow: hidden;
      font-size: 12px;
      padding-top: 0px;
      font-weight: 100;
      }
      .ailment .head{
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
      }
      .ailment .head span img{
            position: relative;
          top: 0px;
        
          width: 70px;
      }
      .ailment.active .body{
      height: auto;
        
      }
      .mode-man{
        position: absolute;
        bottom: 28%;
        left: 40%;
        width: 185px;
      }
      .modes-grid-left{
        position: absolute;
        left: 5%;
        top: 22%;
        display: block;
        width: 30%;
        text-align: right;
      }
      .modes-grid-left p{
      padding: 0px 65px 0px 0px;
      }
      .mode-item{
        height: 170px;
      }
      .mode-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
      .mode-item ul li{
        list-style: none;
        display: inline-block;
      }
      .mode-item ul li img{
      width: 90px;
          position: relative;
          top: -15px;
      }
      .mode-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        padding: 5px 0px;
        margin: 0;
      }
      .mode-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: 1rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      }
       .mode-item p{
        font-size: 14px;
        position: relative;
        top: -30px;
       }
      .modes-grid-right {
        position: absolute;
        right: 8%;
        top: 22%;
        display: block;
        width: 30%;
      }
      .modes-grid-right p{
      padding: 0px 0px 0px 95px;
      }

      .int-text{
          width: 50%;
          margin: 0 auto;
          padding: 50px 0px;
          position: relative;
          color: #ead39b;
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          opacity: 0;
      }

        .unani-highlight {
        font-size: 32px;
        font-weight: 800;
        color: #ba2228;
    }
        .unani-highlight span {
        color: #000;
    }
    .ailments-category-slider,
.products-fixed-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Each icon must be its own layer */
.ailment-icon {
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    touch-action: auto !important;
      -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: visible !important;

}

/* REMOVE all animation for stability */
.ailment-icon img {
    width: 100%;
    height: auto;
    display: block;

    /* ❌ REMOVE transitions */
    transition: none !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Active state (NO SCALE for iPhone stability) */
.ailment-icon.is-active img {
    border: 1px solid #db2628;
    background: rgba(219, 38, 40, 0.05);
    border-radius:50%;
}
    
}

/* Tablet screen portrait */
@media (max-width: 991px) {

.values-section {
  display: flex;
  height: 32vh;
  overflow: hidden;
}

.value-left-content {
  width: 100%;
  background: #d71920;
  color: #fff;
  padding: 60px;
}
.value-left-content h2{
color: #fff;
        font-size: 32px;
        font-weight: 800;
}
.value-left-content p{
  font-size: 1.2rem;
  line-height: 1.7;
}

.value-right-panels {
  width: 65%;
  display: none;
}

.value-panel {
  flex: 1;
  will-change: flex-grow;
  backface-visibility: hidden;
 background-size: cover;
background-position: center center;
background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  transition: flex-grow 0.5s ease;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  color: #fff;
}

.value-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.value-panel-content {
    position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.value-panel.active .value-panel-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.value-panel-content h3{ 
color: #fff;
}

.value-panel.active {
  flex-grow: 2;
}

.value-panel.active .value-panel-content {
  opacity: 1;
}

.career-subhead p{
  text-align: left;
  width: 100%;
  font-size: 1.2em;
  line-height: 1.7;
}


  .products-fixed-bar .fixed-inner .fixed-left ul li img{
    scale: .8;
  }
   .products .product-grid-item{
                  width: 48%;
            }
  /* unani css */
            .unani-home{
            width: 100%;
            margin:0 auto;
            position:relative;
            background:transparent;
            padding:40px 4px 80px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:visible;
            background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
            }


            /* Center round logo area */

            .unani-center-circle{
            width:300px;
            /* height:220px; */
            margin: 40px auto -235px;
            display:flex;
            align-items:center;
            justify-content:center;

            position:relative;
            z-index:10;

            }


            /* Replace this with your logo image if available */


            .unani-logo-inner{
            text-align:center;
            }
            .unani-logo-inner img{
            width:300px;
            height:auto;
            display:block;
            margin:0 auto;
            }
            .logo-title{
            font-weight:700;
            margin-top:8px;
            color:var(--accent);

            }
            .logo-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:4px;
            }

            /* Stats positions */
            .unani-stats-wrap{
            position:relative;
            height:500px; /* area around central circle where stats will be placed */
            margin-top:8px;
            margin-bottom:0px;
            }




            .stat{
            position:absolute;
            width:234px;
            text-align:left;
            transform-origin:center;
            opacity:0;


            }

            .stat .label{
            font-size: 20px;
            color:#db2528;
            margin-top: 0px;
            font-weight: normal;
            text-align: center;
            }
            .stat .s1{
            text-align: right;
            }
            .stat .num{
            font-size:40px;
            letter-spacing:0.5px;
            text-align: center;
            color: #db2528;
            }
            /* Clockwise order and approximate positions */
            /* Top-left (117K+) */
            .s1{ top:10px; left:10rem; }
            /* Top-right (450+) */
            .s2{ top:0px; right:1rem;  }
            /* Right middle (25+) */
            .s3{ top:190px; right:0px;left: 69%; width:234px; }
            /* Bottom center (85%) */
            .s4{ top:190px; left:18%; transform:translateX(-50%);  width:234px;
            font-size: 11px;
            }
            /* Left middle (100+) */
            .s5{ top:0px; left:2rem; width:235px; }

            /* Below unani-home-hero copy */
            .unani-home-hero{
            text-align:center;
            margin-top:10px;
            padding:0px 20px 0;
            }
            .unani-home-hero h1{
            font-size:32px;
            margin:6px 0;
            font-weight:800;
            }
            .unani-home-hero h1 .accent{ color:#ba2228; }
            .unani-home-hero p{
            max-width:100%;
            margin:0 auto;
            color:var(--muted);
            line-height:1.6;
            margin-top:12px;
            font-size:1.2rem;
            }
            .stat p{
            font-size: 11px;
            line-height:15px;
            }
            .cta{
            margin-top:18px;
            }




            /* Show paragraph when stat is hovered */
            .unani-label-para p {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
            text-align: center;
            font-size: 13px;
            }

            /* On hover, show smoothly */
            .stat:hover .unani-label-para p {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            }


            .learnmorebtn{
            background:#d31f27;
            color:#fff;
            padding:10px 18px;
            border-radius:8px;
            border:none;
            cursor:pointer;
            font-weight:600;
            box-shadow:0 6px 12px rgba(196,58,55,0.15);
            opacity:0 ;
            }
                .wellness-center .col-inner {
        padding: 1rem 1rem 1rem 1rem !important;
    }
          .well-btn-group  .well-btn {
        padding: 3px 30px;
    }
.ailments-category-slider .slick-slide img{
padding:15px 40px !important;

}
.ailments-category-slider .slick-slide .is-active img{
padding:0px 0px !important;
scale: 1;
}
.ailments-category-slider .slick-slide{
text-align:center;
    font-size: 14px;
    color: #000;
font-weight:600;
margin-bottom:40px;
}
 .section-content .unani-section {
        width: 100%;
        min-height: auto;
        position: relative;
        overflow: hidden;
        padding-bottom: 150px;
    }
    .unani-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -9;
        background-image: url(/wp-content/uploads/2026/02/story-of-uanani-mob-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
    }
        .unani-section .unani-content h2 {
        font-size: 25px;
        font-weight: 800;
        color: #000000;
        padding-top: 20px;
        margin-bottom: 10px;
        text-align: center;
    }
        .unani-section .unani-content h2 span {
        color: #ba2228;
    }
        .unani-section .intro-paragraph {
        max-width: 990px;
        margin: 0 auto 25px auto;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
    }
        .unani-section .text-column {
               margin-left: 0;
        padding: 20px;
        width: 80%;
        padding-right: 0px;
        font-size: 18px;
        color: #000;
        text-align: left;
        min-height: 250px;
    } 
 .section-content .unani-container {
        display: block;
        width: 100%;
        margin-top: 0px;
        
    }
        .section-content .unani-container .unani-left-panel {
        width: 100%;
        background-color: #d32027;
        color: white;
        padding: 20px;
        box-sizing: border-box;
        font-size: 18px;
    }
    .section-content .unani-container .unani-right-panel {
        width: 100%;
    }

        .hamdard-story-title {
        font-size: 1.8rem;
    }
    .hamdard-story-intro {
        font-size: 1rem;
        margin: 1rem 0rem;
    }
       .u-section {
        position: relative;
        height: 90vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }


      .top-nav {
              background: url(/wp-content/uploads/2026/02/timeline-curved-line.png) center / contain no-repeat;
          width: 85%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 10px;
          padding: 10px;
          gap: 16%;
      }

      .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

      .nav-item {
      color: #000;
          background: #fff;
          width: 100px;
          height: 75px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
      .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
      .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 140px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
          font-size: 14px;
          transition: background-color 0.2s ease-in 0s;
          font-weight: 600;
      }
      .non-active{
              margin-top: 10px;
          font-size: 11px;
          text-align: center;
          font-weight: 600;
      }
      .panels {
        position: relative;
        height: 100%;
      }

      .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

      .panel.active {
        opacity: 1;
        pointer-events: auto;
        text-align: center;
      }
      .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

      .ancient-header{margin: 80px auto 0px;scale: 1.3;width: 80%;}

      .content.right { right: 0%; }
      .content.left { left: 15%; width: 70%;scale: 1.3;top:10%;}
      .content.right h2,
      .content.left h2,
      .ailments-header h2,
      .modes-header h2,
      .ancient-header h2
      {
          color: #fde9b6;
          font-size: 1rem;
          /* opacity: 0; */
          margin: 0;
        position: relative;
        top: -40px;
      }
      .content.right p,
      .content.left p,
      .ailments-header p,
      .modes-header p,
      .ancient-header p
      {
          font-size: 0.8rem;
          line-height: 1.3;
          position: relative;
          top: -30px;
          /* opacity: 0; */
      }
      .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 0.8rem;
          opacity: 0;
           position: relative;
          top:0px;
      }

          .ancient-grid-left {
        position: absolute;
        left: 10%;
        top: 25%;
        display: block;
        width: 30%;
        text-align: left;
        z-index: 9;
        scale: 1.3;
    }
    .ancient-item {
        height: auto;
        padding: 20px 0px;
    }

        #ancient .ancient-item .head {
        cursor: pointer;
        height: 40px;
    }
      .ancient-item ul {
        margin: 0px -30px 0px 0px;
        padding: 0px;
    }
        .ancient-item ul li {
        list-style: none;
        display: inline-block;
        margin-bottom: 0px;
        margin-left: 0px !important;
    }
        .ancient-item ul li img {
        width: 30px;
        position: relative;
        top: -15px;
    }
    .ancient-item h3 {
        color: #fff;
        font-weight: 600;
        font-size: .8rem;
        padding: 0px 5px;
        margin: 0;
    }
    .ancient-item h4 {
        color: #fde9b6;
        font-weight: 400;
        font-size: .8rem;
        font-style: italic;
        padding: 0px;
        margin: 0;
    }
    .ancient-item .head span {
        position: relative;
        top: 1px;
        left: 5px;
    }
    #ancient .ancient-item .body {
        height: 0;
        overflow: hidden;
        width: 160px;
    }
    .ancient-item p {
        font-size: 10px;
        position: relative;
        /* top: -30px; */
        margin-bottom: 0;
    }

        .panel1-content {
        width: 40%;
        margin: 0 auto;
        text-align: center;
        position: relative;
        top: 0px;
    }

    .ancient-grid-right {
        position: absolute;
        right: 5%;
        top: 23%;
        display: block;
        width: 30%;
         scale: 1.3;
    }
    .ancient-grid-right .ancient-item .body{
      position: relative;
        right: -30px;
        text-align: right;
    }

      .ancient-circle {
        position: relative;
         left: 8%;
        top: 55%;
        width: 310px;
        transform: translateY(80%);
      }

      .ancient-man
      {
        position: relative;
        top: -125px;
        right: -9%;
        width: 250px;
      }

      .diagnosis-man{
          position: relative;
        top: -100px;
        right: 30%;
        width: 210px;
      }

      .dot {
        position: absolute;
        width: 60px;
        cursor: pointer;
        z-index: 9;
      }
      .dot.physical{top:19%;left:22%}
      .dot.dietary{top:41%;left:18%}
      .dot.symptoms{top:28%;left:18%}
      .dot.sleep{top:23%;left:20%}
      .dot.activity-patterns{top:65%;left:19%}
      .dot.excretions{top:47%;left:18%}

      .line.physical{top: 22%;left: 30%;}
      .line.dietary{top:30%;left:21%;}
      .line.symptoms{top:32%;left:23%;}
      .line.sleep{top:26%;left:24%}
      .line.activity-patterns{top:68%;left:25%;}
      .line.excretions{top:50%;left:22%;}

      .dot img {
        width: 100%;
      }

      .line {
        position: absolute;
        opacity: 0;
        width: auto;
      }
      .info-box{text-align: left;}
      .info-box h3{color: #fff;font-size: 20px;}
      .info-box p{font-size: 15px;}
      .info-box .physical{top: 190px;right: 3%;position: absolute; width: 50%;padding: 0px 25px;}
      .info-box .dietary{top:28.5%;right:8%;position: absolute;width: 50%;padding: 0px 25px;}
      .info-box .symptoms{top:47%;right:2%;position: absolute;width: 50%;padding: 0px 25px;}
      .info-box .sleep{top:58%;right:3%;position: absolute;width: 50%;padding: 0px 10px;}
      .info-box .activity-patterns{top:67%;right:8%;position: absolute;width: 50%;padding: 0px 25px;}
      .info-box .excretions{top:74%;right:6%;position: absolute;width: 50%;padding: 0px 25px;}

      .info {
        display: none;
      }
      .ailments-header, .modes-header{text-align: center;width: 70%;margin: 20px auto;scale: 1.3;}
      .ailment-man { left: 20%;
        bottom: 15%;
        position: absolute;
        height: 35%;
        z-index: 9; }
      .ailment-woman { left: 42%;
        bottom: 15%;
        position: absolute;
        height: 33%; }

      /* .ailment-list {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
      } */

      .ailment-men{
        position: absolute;
          left: 0%;
          top: 32%;
          transform: translateY(-50%);
          width: 40%;
          text-align: right;
      }
      .ailment-women{
          position: absolute;
        right: 0%;
        top: 31.5%;
        transform: translateY(-50%);
          width: 40%;
          text-align: left;
      }
      .men-ailment, women-ailment{
        padding-bottom: 10px;
      }
        .ailment.women-ailment .body {
        padding: 0px 0px 5px 0px;
        }
      .ailment .body {
        height: 0;
        overflow: hidden;
      font-size: 14px;
      padding: 0px 0px 0px 5px;
      font-weight: 100;
      }
      .ailment .head{
        font-weight: 600;
        cursor: pointer;
        font-size: 18px;
        padding-bottom: 10px;
      }
      .ailment .head span img{
            position: relative;
          top: 0px;
          width: 30px;
      }
      .ailment.active .body{
      height: auto;
        
      }
      .mode-man{
        position: absolute;
        bottom: 25%;
        left: 37%;
        width: 210px;
      }
      .modes-grid-left{
        position: absolute;
        left: 2%;
        top: 28%;
        display: block;
        width: 32%;
        text-align: right;
      }
      .modes-grid-left p{
      padding:10px 15px 0px 0px;
      }
      .mode-item{
        height: 170px;
      }
      .mode-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
      .mode-item ul li{
        list-style: none;
        display: inline-block;
      }
      .mode-item ul li img{
      width: 70px;
          position: relative;
          top: -15px;
      }
      .mode-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        padding: 5px 0px;
        margin: 0;
      }
      .mode-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: 1rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      } 
       .mode-item p{
        font-size: 12px;
        position: relative;
        top: -30px;
       }
      .modes-grid-right {
        position: absolute;
        right:7%;
        top: 28%;
        display: block;
        width: 35%;
        text-align: right;
      }
      .modes-grid-right p{
      padding: 10px 0px 0px 50px;
      }
      .modes-grid-right .mode-item p{
        right:-30px;
      }

      .int-text{
          width: 90%;
          margin: 40px auto;
          padding: 100px 0px;
          position: relative;
          color: #ead39b;
          font-size: 12px;
          font-weight: 600;
          text-align: right;
          opacity: 0;
      }
      .info-box{
          text-align: left;
      }


      .unani-right-side {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .unani-info-card {
        display: block;
        gap: 20px;
        align-items: flex-start;
    }
    .unani-info-card img {
        width: 100%;
        object-fit: cover;
        margin-top: 13px;
    }

        .unani-highlight {
        font-size: 2.5rem;
        font-weight: 800;
        color: #ba2228;
    }
        .unani-highlight span {
        color: #000;
    }

    .text-u-unani {
  padding-top: 20px;
  text-align: center;
color:#fff
}
.text-u-unani h3,
.text-u-unani p
{
color:#fff;
}

#diagnosis{
      height: 80vh;
}
#modes{
          height: 70vh;
}
.ailments-category-slider,
.products-fixed-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Each icon must be its own layer */
.ailment-icon {
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    touch-action: auto !important;
      -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: visible !important;

}

/* REMOVE all animation for stability */
.ailment-icon img {
    width: 100%;
    height: auto;
    display: block;

    /* ❌ REMOVE transitions */
    transition: none !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Active state (NO SCALE for iPhone stability) */
.ailment-icon.is-active img {
    border: 1px solid #db2628;
    background: rgba(219, 38, 40, 0.05);
    border-radius:50%;
}
}
/* Mobile screen landscape */
@media (max-width: 768px) {
  .u-section{
            height: 100vh;
  }
    #diagnosis {
        height: 90vh;
    }
        #modes {
        height: 80vh;
    }

}
/* Mobile screen portrait */
@media (max-width: 600px) {
/* .ailments-category-slider .slick-track {
    transform: none !important;
}
 .ailments-category-slider  .slick-slide {
    transform: none !important;
} */
/* Prevent iOS flicker inside slider */
.ailments-category-slider,
.products-fixed-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Each icon must be its own layer */
.ailment-icon {
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    touch-action: auto !important;
      -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: visible !important;

}

/* REMOVE all animation for stability */
.ailment-icon img {
    width: 100%;
    height: auto;
    display: block;

    /* ❌ REMOVE transitions */
    transition: none !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Active state (NO SCALE for iPhone stability) */
.ailment-icon.is-active img {
    border: 1px solid #db2628;
    background: rgba(219, 38, 40, 0.05);
    border-radius:50%;
}
.text-u-unani {
  padding-top: 20px;
  text-align: center;
color:#fff
}
.text-u-unani h3,
.text-u-unani p
{
color:#fff;
}

.certifications{
  margin-top: 0px !important;
}
.hamdard-story-title {
        font-size: 20px;
    }
    .products-archive-wrapper .products-fixed-bar2{
  position: relative !important;
  top: 0px !important;
}

  .video-modal {
        position: absolute;
        inset: 0;
        display: none;
        z-index: 9999;
    }
.video-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
    }
.video-popup {
        position: absolute;
        top: 55%;
        left: 50%;
        width: 80%;
        max-width: 750px;
        transform: translate(-50%, -50%);
        background: #000;
        padding: 10px;
        border-radius: 8px;
        box-sizing: border-box;
    }

.video-close {
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 23px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        height: 6px;
        width: 30px;
        background: red;
        border-radius: 50%;
        line-height: 1;
        min-height: 30px;
        z-index: 9;
    }

.video-popup video {
        width: 100%;
        height: auto;
    }

  .ailments-category-slider .slick-slide img{
padding:0px 0px !important;

}
.ailments-category-slider .slick-slide{
text-align:center;
    font-size: 12px;
    color: #000;
font-weight:400;
margin-bottom:40px;
}
.ailments-category-slider .slick-prev,  
.ailments-category-slider .slick-next{
      top: 25%;
      width: 35px;
    height: 35px;
    position: absolute;
}

  .ailment-icon img {
    transition: opacity 0.2s ease;
}

/* Hover state */
.ailment-icon:hover img {
    content: attr(data-icon-dark);
}

/* Active category */
.ailment-icon.is-active img {
    filter: none;
}

/* Optional visual cue */
.ailment-icon.is-active {
    /* border-bottom: 2px solid #d03c30; */
}



  .ailment-icon.is-active img {
    transition: all 0.25s ease;
/* scale: 1; */
}
.ailments-category-slider .slick-slide{
  font-size: 14px;
}

#products-fixed-bar {
    width: 100%;
    background: #fff;
    padding: 10px 0;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateY(-100%);
    z-index: 999;
    top:140px;
    height: 85px;
		display: none;
}

#products-fixed-bar.fixed {
    position: fixed;
    top: 0;
    left: 0;
     transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateY(-100%);
z-index: 9999;
top:155px;
		display: block;
}
.products-fixed-bar2{
	        display: block !important;
        height: 180px !important;
        margin-top: 70px;
                padding: 10px 0 20px 0px;
}
.products-fixed-bar .fixed-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 0px;
    display: block;
    justify-content: space-between;
    align-items: flex-start;
}
.products-fixed-bar .fixed-inner .fixed-left{
         width: 95%;
        text-align: left;
}
.products-fixed-bar .fixed-inner .fixed-actions{
  display: none;
}
.products-fixed-bar2 .fixed-inner .fixed-actions{
 display: block;
        width: 100%;
}
/* .products-fixed-bar .fixed-inner .fixed-left ul {
overflow-x: scroll;
        white-space: nowrap;
        margin: 0px 10px;
} */
.products-fixed-bar .fixed-inner .fixed-left ul {
    overflow-x: auto; /* Better than scroll */
    white-space: nowrap;
    margin: 0 10px;
    padding: 0px 0; /* Prevent scroll jump */
    
    /* FORCE SCROLLBAR VISIBILITY - MOBILE */
    scrollbar-width: auto; /* Firefox */
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    
    /* iOS Safari - Show scrollbar track */
    -webkit-scrollbar {
        height: 6px;
        background: #db2628;
    }
    -webkit-scrollbar-thumb {
        height: 6px;
        background: #db2628;
        border-radius: 3px;
    }
    -webkit-scrollbar-thumb:hover {
        background: #db2628;
    }
    
    /* Android Chrome */
    /* scrollbar-color:#db2628 #db2628; */
    

}
.uxba__right{
       width: 100%;
}

    .hamdard-timeline-slider .slick-prev {
        left: 0px;
    } 
      .hamdard-timeline-slider  .slick-next {
        right: 0px;
    }
    .uxba{
          padding: 0px 0px !important;
    margin-top: -30px;
            display: flex !important;
        flex-direction: column-reverse;
    }
    .products-archive-wrapper #products-fixed-bar.fixed {
        transform: translateY(0%);
    }
.products-archive-wrapper #products-fixed-bar{
      top: 70px;
}
.products-grid-wrap .ailment-category-section{
      padding: 50px 0px;
}

.products-grid-wrap #ailment-cardiovascular-system{
  padding: 0px 0px 45px 0px;
}
.products-fixed-bar .fixed-inner .fixed-left ul li{
		display:inline-block;
		list-style:none;
		padding-left:10px;
		position: relative;
    top: -5px;
}
.products-fixed-bar .fixed-inner .fixed-left ul li:first-child{
		padding-left:0px;
}
.products-archive-wrapper .products-fixed-bar .fixed-inner .fixed-left ul li img{
		width:75px;
    padding: 0px;
}
.products-fixed-bar .fixed-actions ul li{
        display: block;
        list-style: none;
        width: 100%;
        float: left;
}
.products-fixed-bar .fixed-actions ul li:last-child{
display: none;
}
.products-fixed-bar .fixed-actions .product-category-dropdown{
        padding-right: 2.4em;
        position: relative;
        top: -4px;
        width: 100%;
        border-radius: 10px;
}
.products-fixed-bar .consult-expert-btn{
        top: -6px !important;
        width: 100%;
        font-size: 14px;
                border-radius: 10px;
}
.products-fixed-bar2 .consult-expert-btn{
		top:0px !important;
}
.products-fixed-bar a.all-products-link{
font-size: 1.2rem;
    color: #db2628;
    font-weight: 600;
}

.products-archive-top .archive-title{
font-size: 25px;
}
.products-archive-top .archive-sub{
  font-size: 16px;
  color: #000;
}
.ailments-category-slider .slick-slide{
      font-size: 14px;
}
.products-grid-wrap{
 margin-top: 0px;
}

h3.heading-cat{
      margin-top: 0px;
      font-size: 25px;
}
.products-archive-wrapper .products-fixed-bar2 .fixed-inner{
    padding: 0 0px
}

.products .product-grid-item{
width: 100%;
}
.products .product-grid-item .product-thumb img{
    height: 420px;
}
.products .product-grid-item .product-body{
  height: auto;
}
.products .product-grid-item .product-body .product-title {
      font-size: 20px;
      line-height: 1.4;
      min-height: auto;
}

.products .product-grid-item .product-excerpt{
min-height: auto;
}

.pp-faqs{
      width: 85%;
}
.faqs-wrapper .faq-item{
      margin: 12px 0px;
}

#myVideo {
    width: 100%;
    outline: 4px solid white;
    outline-offset: 0px;
}


.soundToggle {
    position: absolute;
    top: 5px;
    right: -5px;
    background:rgb(218 38 40);
    border: none;
    color: white;
    padding: 0px 5px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    transition: background 0.3s;
    z-index: 9;
}
.pp-featured-related .uxb-featured-products {
                padding: 25px 0px !important;
        margin: 0px 0 0px !important;
    }
    
.uxba__left .uxba__title{
  font-size: 20px;
}
.uxba__left .uxba__subtitle{
    font-size: 16px;
    color: #000;
    font-weight: 600;
}
.uxba__left .uxba__chip{
      padding: 5px 10px;    
      font-size: 12px;
    font-weight: 500;
}

.uxba__right .uxba__search-title{
  font-size: 20px;
  font-weight: 800;
}

.home-our-legacy .heading h3{
font-size: 1.8rem;
}

.uxb-fp__card .uxb-fp__body{
  height: 180px;
  padding: 10px 10px 10px;
}
.uxb-fp__cta{
    margin-top: 0; 
}
.uxb-fp__cta .button.btn-buy-now{
      font-size: 14px;
}
.uxba__chips{
      gap: 10px 10px;
}
.pp-featured-related{
  width:90%;
  margin:0 auto;
  padding-bottom: 60px;
}
.uxb-fp__head .uxb-fp__kicker{
      width: 40% !important;
      font-size: 20px;
}
.uxb-fp__head .uxb-fp__browse{
             font-size: 11px;
        padding: 3px 10px;
}
.uxb-fp__browse .uxb-fp__arrow{
      transform: translateY(1px);
}

.uxb-fp__card .uxb-fp__product-title{
      font-size: 16px;
}
.uxb-fp__card .uxb-fp__tagline{
  font-size: 14px;
}
.uxb-featured-products .uxb-fp__nav .slick-prev, .uxb-featured-products .uxb-fp__nav .slick-next{
top:50%;
}
.pp-ingredients .ingredients-wrapper .slick-prev, 
.pp-benefits .benefits-wrapper .slick-prev
{
          left: -20px;
}
.pp-ingredients .ingredients-wrapper .slick-next,
.pp-benefits .benefits-wrapper .slick-next
{
          right: -20px;
}
.pp-featured-related .uxb-featured-products .uxb-fp__nav .slick-prev, .pp-featured-related .uxb-featured-products .uxb-fp__nav .slick-next{
        position: relative;
        top: 320px;
} 
.pp-featured-related .uxb-featured-products .uxb-fp__nav .slick-prev{
  left:-30px;
}
.pp-featured-related .uxb-featured-products .uxb-fp__nav .slick-next{
  right:-30px;
}

.uxb-featured-products .uxb-fp__nav .slick-prev{left: -15px;}
.uxb-featured-products .uxb-fp__nav .slick-next{right: -15px;}
.fixed-actions .button.btn-buy-now,
.fixed-actions .button.btn-consult{
  font-size: 12px;
}
.uxba__search img.emoji{
      position: relative;
    top: 7px;
    right: 10px;
}

.hamdard-our-history h3, 
.hamdard-our-legacy h3, 
.legacy-hamdard-foundation h3 {
        font-size: 20px;
        font-weight: 800;
        color: #000;
    }
.legacy-text{
  margin-bottom: 0px;
  padding-bottom: 0px;
  width: 100%;
}
.box-text{
          font-size: 70%;
}
.hamdard-timeline-slider .slick-prev, 
.hamdard-timeline-slider .slick-next{
  top: 40%;
}


.cert-slider {
width: 95%;
}
.cert-slider .slick-prev,
.cert-slider .slick-next
{
display: block !important;
}
.cert-slider .slick-dots{
      bottom: 15px !important;
}
.slick-prev,
.slick-next {
display: block !important;
}
.slick-prev,
.slick-next {
position: relative;
transform: none;
margin: 20px 10px;
}
.timeline-slider {
text-align: center;
}
.legacy-container::before,
.legacy-container::after {
  /* Hide vertical lines on smaller screens if they become too restrictive */
  display: none;
}
.content-wrapper {
  max-width: 95%;
}

.pp-hero .disclaimer{
        font-size: 12px;
        margin-top: 20px;
    }

    .legacy-hero{
min-height: 30vh;
    background: url(/wp-content/uploads/2025/11/unani-video-bg.webp) left / cover no-repeat;
}
.legacy-play-btn{
width:60px;
height:60px;
}
.video-legacy-title{
margin-top: 16px;
    font-size: 20px;
}
.hamdard-story-intro{
    font-size: 1rem;
    margin: 1rem 0rem;
}
.hamdard-story-text-col{
padding-right: 0rem;
}
.hhs-title{
  font-size: 20px;
}

.legacy-hamdard-foundation h3, 
.hamdard-our-history h3{
font-size:20px;
}
.legacy-hamdard-foundation p{
font-size:1rem;
color:#000;
}
.hamdard-our-history p{
color:#000;
  font-size: 1rem;
}
.hamdard-history-slider .slick-slide.slick-current.slick-active{
    width: 300px !important;
}
.hh-next {
    right: -40px;
    top: -75px;
 }
.hh-prev {
    top: -75px;
}
.hamdard-history-wrapper{
        padding: 0px 0;
}
.hamdard-history-slider .slick-slide{
    padding: 20px 10px;
}
.home-our-legacy .heading .legacy-text{
font-size: 1.1em;
    line-height: 1.7;
    color: #333;
    text-align: justify;
    max-width: 90%;
    margin: 0 auto;
    padding: 0px;
    text-align: center;
}
.hamdard-our-legacy h1{
font-size:1.8rem;
}
.hit-wrapper{
padding: 0px 0;
}
.hit-slider-track{
  text-align: center;
      max-width: 100%;
}
.hit-slider-track .slick-track{ 
height: 450px;
}

.hit-slider-track::before{
display:none;
}
.hamdard-timeline-slider .slick-current .hit-node,
.hamdard-timeline-slider .slick-slide .hit-node
{
 margin: 0 auto;
float:none;
}
.hamdard-timeline-slider .slick-center .hit-detail,
.hamdard-timeline-slider .slick-slide .hit-detail
{
float:none;
    margin-top: 15px;
    display: block;
    max-width: 370px;
    background: #fff;
    padding: 10px;
}
.hamdard-timeline-slider .slick-center,
.hamdard-timeline-slider .slick-slide
{
    height: 400px;
}
.hamdard-timeline-slider .slick-slide .hit-meta{
display:none;
}
.hamdard-timeline-slider .slick-center .hit-circle,
.hamdard-timeline-slider .slick-slide .hit-circle
 {
    transform: scale(1.3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    width: 140px;
    height: 141px;
}

.hit-detail-year {
    font-weight: 600;
    color: #ba2228;
    margin-bottom: 4px;
    font-size: 1.2rem;
}
.hamdard-timeline-slider .slick-slide{
    opacity: 1;
    background: #fff;
width:400px !important;
}
.hit-next{
right:0px;
}
.hit-prev{
left:10px;
}
.hit-arrow{
      top: 35% ;  
      width: 35px;
    height: 35px;
}
.hit-detail-title{
        font-size: 1.2rem;
        line-height: 1.2;
        font-weight: 800;
}
.hit-detail-text {
    font-size: 14px;
    line-height: inherit;
    color: #000;
}
.hamdard-timeline-slider .slick-list{
    padding: 40px 10px 0px 10px !important;
}
.irv-media { 
  width: 85%;
}

.values-section {
  display: flex;
  height: 53vh;
  overflow: hidden;
          flex-direction: column;
}

.value-left-content {
  width: 100%;
  background: #d71920;
  color: #fff;
  padding: 20px;
}
.value-left-content h2{
color: #fff;
        font-size: 25px;
        font-weight: 800;
}
.value-left-content p{
  font-size: 16px;
  line-height: 1.7;
}

.value-right-panels {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.value-panel {
  flex: 1;
  will-change: flex-grow;
  backface-visibility: hidden;
 background-size: cover;
/* background-position: center center; */
        padding: 60px 30px;
background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  transition: flex-grow 0.5s ease;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  color: #fff;
}

.value-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.value-panel-content {
    position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.value-panel.active .value-panel-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.value-panel-content h3{ 
color: #fff;
}

.value-panel.active {
  flex-grow: 2;
}

.value-panel.active .value-panel-content {
  opacity: 1;
}

.career-subhead p{
  text-align: left;
  width: 100%;
  font-size: 1.2em;
  line-height: 1.7;
}

.career-popup {
       width: 90%;
    background: #fff;
    margin: 30% auto;
    padding: 10px 20px;
    border-radius: 10px;
    animation: popupFade .25s ease;
    height: 600px;
    overflow: hidden;
}

 .career-popup-inner{
            height: auto;
             height: 500px;
    }
    .close-popup{
            right: 8%;
    top: 16%;
    }


 /* unani css */
            .unani-home{
            width: 100%;
            margin:0 auto;
            position:relative;
            background:transparent;
            padding:40px 4px 80px;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            overflow:visible;
            background-image: url(/wp-content/uploads/2025/11/unani-bg.webp);
            }


            /* Center round logo area */

            .unani-center-circle{
            width:160px;
            /* height:220px; */
            margin: 40px auto -200px;
            display:flex;
            align-items:center;
            justify-content:center;

            position:relative;
            z-index:10;

            }


            /* Replace this with your logo image if available */


            .unani-logo-inner{
            text-align:center;
            }
            .unani-logo-inner img{
            width:140px;
            height:auto;
            display:block;
            margin:0 auto;
                    position: relative;
        top: 20px;
        left: 0px;
            }
            .logo-title{
            font-weight:700;
            margin-top:8px;
            color:var(--accent);

            }
            .logo-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:4px;
            }

            /* Stats positions */
            .unani-stats-wrap{
            position:relative;
            height:400px; /* area around central circle where stats will be placed */
            margin-top:8px;
            margin-bottom:0px;
            }




            .stat{
            position:absolute;
            width:210px;
            text-align:left;
            transform-origin:center;
            opacity:0;
            }

            .stat .label{
            font-size: 14px;
            color:#db2528;
            margin-top: 0px;
            font-weight: normal;
            text-align: center;
            }
            .stat .s1{
            text-align: right;
            }
            .stat .num{
            font-size:20px;
            letter-spacing:0.5px;
            text-align: center;
            color: #db2528;
            font-weight: 600;
            }
            /* Clockwise order and approximate positions */
            /* Top-left (117K+) */
             .s1{ top:10px; left:10rem; }
            /* Top-right (450+) */
            .s2{ top:0px; right:1rem; width:160px; }
            /* Right middle (25+) */
            .s3{ top:190px; right:0px;left: 62%; width:160px; }
            /* Bottom center (85%) */
            .s4{ top:190px; left:18%; transform:translateX(-50%);  width:160px;
            font-size: 11px;
            }
            /* Left middle (100+) */
            .s5{ top:0px; left:0rem; width:160px; }

            /* Below unani-home-hero copy */
            .unani-home-hero{
            text-align:center;
            margin-top:0px;
            padding:0px 20px 0;
            }
            .unani-home-hero h1{
            font-size:20px;
            margin:6px 0;
            font-weight:800;
            }
            .unani-home-hero h1 .accent{ color:#ba2228; }
            .unani-home-hero p{
            max-width:100%;
            margin:0 auto;
            color:var(--muted);
            line-height:1.6;
            margin-top:12px;
            font-size:1rem;
            }
            .stat p{
            font-size: 11px;
            line-height:15px;
            }
            .cta{
            margin-top:18px;
            }

.slider-wrapper .flickity-prev-next-button{
  display: block !important;
}


            /* Show paragraph when stat is hovered */
            .unani-label-para p {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
            }

            /* On hover, show smoothly */
            .stat:hover .unani-label-para p {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            }


            .learnmorebtn{
            background:#d31f27;
            color:#fff;
            padding:10px 18px;
            border-radius:8px;
            border:none;
            cursor:pointer;
            font-weight:600;
            box-shadow:0 6px 12px rgba(196,58,55,0.15);
            opacity:0 ;
            }
                .unani-section .unani-content {
                  padding: 0px 0px 0;
                }
.evs-slider{
  width: 90%;
    margin: 0 auto;
    /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    border-radius: 24px;
    border: 2px solid #eee; */
    padding: 12px;
    height: auto;
  
}
.evs-slider .evs-item {
  padding: 0px 0px;
}
.evs-slider .slick-list{
  overflow: visible;
}
.evs-slider .evs-item img{
width: 80%;
border-radius: 25px;
}
.evs-slider .evs-item .read-box h4{
  font-size: 18px;
}
.evs-slider .evs-item .read-box {
  margin:8px;

}
.evs-slider .evs-item .read-box .read-btn{
  color: #ba2228;
}
.evs-slider .evs-item .read-box h3{
			color:#000;	
}
.evs-slider .slick-prev{
   left: -30px;
}
.evs-slider .slick-next{
   right: -30px;
}

.hamdard-commitment {
        color: #ba2228;
    }

.certifications h3{
line-height:1.3;
}
.hamdard-story-section{
  padding: 0px 0px;
}
    .hamdard-story-title {
        font-size: 20px;
    }

   .hamdard-story-text-col h3{
      font-size: 16px;
   } 
.labor{
padding:20px;
}


.labor h3
{
font-size:20px;
		line-height:1.2;
    font-weight: 800;
}
.labor p{
margin:0px;
}
.wellness-center .well-subtitle{
  font-size: 1rem;
}
.cert-item img{
		width: 153px;
    height: 153px;
}


.cert-item{
		font-weight: 600;
}
.certifications h3{
font-size:20px;
font-weight: 800;
}
.certifications .cert-para{
  font-size: 16px;
}
.wellness-center .col-inner{
    padding: 2rem 2rem 2rem 1rem !important
  }
.value-philosophy .section-bg img{
      object-position: 47% 50%;
}
.section-content .about-impact .col-inner{
    padding: 2rem 2rem 1rem 2rem !important;
  }
.section-content .career-impact  .col-inner{
    padding: 2rem 2rem 1rem 2rem !important;
  }
  .button.btn-consult{
        color: #000 !important;
        display: block;
  }
   .button.btn-consult:hover{
      background: #000 !important;
        color: #fff !important;
        border: 1px solid #000 !important;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0);
  }


  
  /* Right content area */
  .well-content {
    flex: 1;
    min-width: 350px;
    background-color: #d62828;
    color: #fff;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .news-thumb{
    height: 210px;
  }
  .latest-news-slider .slick-prev {
    left: -15px;
}
 .latest-news-slider .slick-next {
    right: -15px;
}
.well-text {
    font-size: 1rem;
  }
.well-btn {
    padding: 10px 25px;
  }
  .well-heading {
    font-size: 25px;
  }
  .well-subtitle {
    font-size: 1.3rem;
  }
.well-btn-group .well-btn {
    padding: 5px 15px;
        font-size: 14px;
  }
  .well-btn-group .well-btn span{
    position: relative;
    top: -4px;
  }
.unani-content h2{
        font-size: 1.8rem;
}

.unanis-title{
       font-size: 1.8rem;
}


.intro-paragraph {
 font-size: 1rem;
}



.text-column{
margin-left:0;
    padding-right: 0;
}

.unani-container{
    flex-direction: column-reverse;
    margin-top: 30px;
            height: 95vh;
}

.unani-left-panel{
 padding: 10px;
width:100%;
}
.unani-right-panel{
width:100%;
}


.unani-left-panel p {
    font-size: 1rem;
}

.unanis-lead{
padding:0;
}

.unanis-title{
        font-size: 1rem;

}


.unani-subtext {
    font-size: 1.8rem;
        padding: 0px 0px;

}
.unani-highlight{
        font-size: 20px;
        text-align: left;
        font-weight: 800;
                color: #ba2228;
}
    .unani-highlight span {
        color: rgb(0, 0, 0);
    }
.unani-subtext p {
   font-size: 1rem;
   margin-bottom: 0px;
   font-weight: 600;
}


.unani-right-side {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .unani-info-card {
        display: block;
        gap: 20px;
        align-items: flex-start;
    }

    .unani-info-card h3{
      font-size: 20px;
    line-height: 1.2;
    padding-top: 10px;
  }
    .unani-info-card p, .unani-read-more{
        font-size: 14px;
    }
    .unani-read-more{
      color: #ba2228;
      margin-top: -10px;
    }
    .unani-info-card img {
        width: 100%;
        object-fit: cover;
        margin-top: 13px;
    }

.unani-layout{
    flex-direction: column;
padding:0;
}

.unani-left-side {
        padding: 0px 24px;
width:100%;
}

.unani-right-side{
    width: 100%;
}

    .section-content .unani-section {
        width: 100%;
        min-height: auto;
        position: relative;
        overflow: hidden;
        padding-bottom: 150px;
    }
    .unani-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -9;
        background-image: url(/wp-content/uploads/2026/02/story-of-uanani-mob-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
    }
        .unani-section .unani-content h2 {
        font-size: 20px;
        font-weight: 800;
        color: #000000;
        padding-top: 20px;
        margin-bottom: 10px;
        text-align: center;
    }
        .unani-section .unani-content h2 span {
        color: #ba2228;
    }
        .unani-section .intro-paragraph {
        max-width: 990px;
        margin: 0 auto 25px auto;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
    }
        .unani-section .text-column {
        margin-left: 0;
        padding: 10px;
        width: 100%;
        padding-right: 0px;
        line-height: 1.3;
        font-size: 16px;
        color: #000;
        text-align: left;
        min-height: 250px;
    } 

       .section-content .unani-container {
        display: block;
        width: 100%;
        margin-top: 0px;
        
    }
    .unani-container .unani-left-panel p{
              font-size: 1rem;
    }
        .section-content .unani-container .unani-left-panel {
        width: 100%;
        background-color: #d32027;
        color: white;
        padding: 20;
        box-sizing: border-box;
    }
    .section-content .unani-container .unani-right-panel {
        width: 100%;
    }
    .section-content .unanis-wrap {
        max-width: 100%;
        margin: 0px auto;
        padding: 0px;
        box-sizing: border-box;
        height: 1000px;
    }
     .section-content   .unanis-wrap .unanis-title {
        font-size: 25px;
        font-weight: 800;
        text-align: center;
        color: #000000;
    }

     .section-content   .unanis-wrap .unanis-lead {
        line-height: 1.3;
        font-size: 16px;
        font-weight: 600;
        color: #000;
        text-align: center;
        width: 95%;
        padding-bottom: 8rem;
        margin: 0 auto;
    }

     .section-content   .unanis-main {
        display: flex;
        gap: 0px;
        align-items: stretch;
        /* margin-top: 24px; */
        position: relative;
        /* padding-top: 100px; */
    }

.section-content    .unanis-col-left, .unanis-col-right {
        width: 22%;
        display: flex;
        flex-direction: column;
        gap: 26px;
        justify-content: center;
        align-items: flex-start;
    }

  .section-content  .unanis-label .desc {
        padding-top: 10px;
    }
    .section-content    .unanis-label span {
        font-size: 12px;
        display: block;
        position: relative;
        bottom: 10px;
    }

     .unanis-label   .l-label-1 {
        position: relative;
        top: 130px;
        left: 320px;
        z-index: 1;
        color: #ba2228;
    }

    .unanis-label      .l-label-2 {
        position: relative;
        top: 110px;
        left: 270px;
        color: #ba2228;
        z-index: 9;
    }

    .unanis-label      .l-label-3 {
        position: relative;
        top: 100px;
        left: 290px;
        z-index: 9;
        color: #ba2228;
    }

      .unanis-label    .l-label-4 {
        position: relative;
        top: 20px;
        left: 450px;
        z-index: 1;
        color: #ba2228;
    }

  .section-content    .unanis-center {
        width: 100%;
        display: block;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-top: 0px;
      text-align: center;  
      }

   .section-content    .unanis-big-circle {
            width:100%;
            /*border-radius:50%;*/
            background: url("/wp-content/uploads/2025/11/human-circle-bg.png");
            background-size:contain;
            background-repeat:no-repeat;
            /* background-position:center center; */
            /*  background: radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 60%, rgba(0,0,0,0.02) 100%);
            box-shadow: 0 8px 30px rgba(0,0,0,0.06);*/
            display:flex;
            justify-content:center;
            align-items:center;
            /* border:12px solid rgba(255,255,255,0.9);*/
            position:relative;
            overflow:visible;
        }
        .section-content .unanis-big-circle img.unanis-human{
              width: 49%;
              padding: 10px 5px 5px 5px;
        }

         .section-content  .unanis-node {
            width:80px;
            height:80px;
            border-radius:50%;
            background:#fff;
            display:flex;
            justify-content:center;
            align-items:center;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
            border:6px solid rgba(240,240,240,0.9);
            position:absolute;
            opacity:0; /* start hidden, will animate in */
            transform:scale(.6);
            }

            /* left nodes (positions) */
             .unanis-node.l1{ left:28%; top:10%; }
            .unanis-node.l2{ left:20%; top:40%; }
          .unanis-node.l3{ left:25%; top:73%; }
            .unanis-node.l4{ left:36%; top:90%; transform:scale(.6); } /* lower */

            /* right nodes */
        .unanis-node.r1{ right:28%; top:10%; }
 .unanis-node.r2{ right:20%; top:36%; }
            .unanis-node.r3{ right:24%; top:70%; }
          .unanis-node.r4{ right:6%; top:84%; }
     /* right side labels slide from right */
           .section-content .unanis-col-right .unanis-label{ transform:translateX(30px);  }

            /* top small badges */
          .section-content  .unanis-top-badges{
            position:absolute;
            left:46%;
            transform:translateX(-50%);
            top:-10%;
            display:flex;
            gap:5px;
            cursor:pointer;
            }
          .section-content  .unanis-badge{
            background: url(/wp-content/uploads/2025/11/unani-circle.webp);
            width:85px;
            height:85px;
            border-radius:50%;
            background-position: center;
            background-size: cover;
            display:flex;
            justify-content:center;
            align-items:center;

            opacity:0;
            transform:translateY(-20px) scale(.8);
            }

          .section-content  .unanis-badge small {
            font-size:11px;
            color:#000;
            padding:10px;            
            line-height:14px;
            text-align:center;
            font-weight: 600;
            }


          .section-content  .unanis-badgess {
            background: url(/wp-content/uploads/2025/11/unani-circle.webp);
            width:150px;
            height:150px;
            border-radius:50%;
            background-position: center;
            background-size: cover;
            position:relative;
            bottom:35px;
            }

            

           .section-content .unanis-badgess small {
            font-size: 17px;
            padding: 25px;
            color: red;
            text-align: center;
            }

         .section-content   .unanis-lead {
            line-height: 1.3;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
        text-align: center;
        width: 50%;
        padding-bottom: 8rem;
                margin: 0 auto;
            }


            /* career Page */

.healing-section {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 580px;
}

.healing-left {
  background: #c53b32;
  color: #fff;
  padding: 100px;
}

.healing-left h2 {
  font-size: 42px;
  line-height: 1.1;
  color: #fff;
}

.healing-cards {
  display: flex;
  height: 660px;
  overflow: hidden;
  color: #fff;
}

.card {
  flex: 1;
  position: relative;
  transform: scaleX(1);
  will-change: transform;
  cursor: pointer;
}

.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.card:nth-child(1) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value1.webp");
}
.card:nth-child(2) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value2.webp");
}
.card:nth-child(3) .card-bg {
  background-image: url("/wp-content/uploads/2026/02/value3.webp");
}
.card.active:hover .card-content{
background: #00000045;
transition: opacity 0.3s ease;
}
.card-content {
position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        color: #fff;
        z-index: 2;
        
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
}
.card-content h3{
  color: #fff;
}
.card-content p {
  opacity: 0;
  transform: translateY(10px);
}

.arrow {
  display: inline-block;
  margin-top: 8px;
}

.u-section {
        position: relative;
        height: 85vh;
        overflow: hidden;
        color: #fff;
        background: url('/wp-content/uploads/2026/02/understanding-unani-bg-1.webp') center/cover no-repeat;
      }


      .top-nav {
              background: url(/wp-content/uploads/2026/02/timeline-curved-line.png) center / contain no-repeat;
          width: 95%;
          text-align: center;
          z-index: 10;
          margin: 0 auto;
          display: flex;
          position: relative;
          margin-top: 10px;
          padding: 10px;
          gap: 10%;
      }

      .timeline-line {
        width: 70%;
        margin-bottom: 20px;
      }

      .nav-item {
      color: #000;
          background: #fff;
          width: 70px;
          height: 55px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
      }
      .nav-item:hover {
      background: #ba2228;
      color: #fff;
        /* width: 100px;
          height: 100px; */
            box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
            transition: background-color 0.2s ease-in 0s;
      }
      .nav-item.active {
          opacity: 1;
          color: #fff;
          background: #ba2228;
          width: 90px;
          height: 70px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          box-shadow: 0px 0px 0px 8px rgb(186, 34, 40, 0.4);
              font-size: 10px;
              transition: background-color 0.2s ease-in 0s;
      }
      .non-active{
              margin-top: 10px;
          font-size: 9px;
          text-align: center;
      }
      .panels {
        position: relative;
        height: 100%;
      }

      .panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
      }

      .panel.active {
        opacity: 1;
        pointer-events: auto;
        text-align: center;
      }
      .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(40px);
      }

      .content {
        position: absolute;
        width: 100%;
        top: 10%;
        transform: translateY(-50%);
        padding:0px 10px;
      }
      .ancient-header{margin-top: 40px;scale: 1;}

      .content.right { right: 0%; }
      .content.left { left: 0%; width: 100%;scale: 1;text-align: center !important;padding-top: 50px;}
      .content.right h2,
      .content.left h2,
      .ailments-header h2,
      .modes-header h2,
      .ancient-header h2
      {
          color: #fde9b6;
          font-size: 1rem;
          /* opacity: 0; */
          margin: 0;
        position: relative;
        top: -40px;
      }
      .content.right p,
      .content.left p,
      .ailments-header p,
      .modes-header p,
      .ancient-header p
      {
          font-size: 0.8rem;
          line-height: 1.3;
          position: relative;
          top: -30px;
          /* opacity: 0; */
      }
      .content.right a{
          color: #fde9b6;
          text-decoration: none;
          font-size: 0.8rem;
          opacity: 0;
           position: relative;
          top:0px;
      }

          .ancient-grid-left {
        position: absolute;
        left: 5%;
        top: 16%;
        display: block;
        width: 35%;
        text-align: left;
                z-index: 9;
                scale: 1;
    }
    .ancient-item {
        height: auto;
        padding: 5px 0px;
    }

        #ancient .ancient-item .head {
        cursor: pointer;
        height: 40px;
    }
      .ancient-item ul {
        margin: 0px -30px 0px 0px;
        padding: 0px;
    }
        .ancient-item ul li {
        list-style: none;
        display: inline-block;
        margin-bottom: 0px;
        margin-left: 0px !important;
    }
        .ancient-item ul li img {
        width: 30px;
        position: relative;
        top: -15px;
    }
    .ancient-item h3 {
        color: #fff;
        font-weight: 600;
        font-size: .8rem;
        padding: 0px 5px;
        margin: 0;
    }
    .ancient-item h4 {
        color: #fde9b6;
        font-weight: 400;
        font-size: .8rem;
        font-style: italic;
        padding: 0px;
        margin: 0;
    }
    .ancient-item .head span {
        position: relative;
        top: 1px;
        left: 5px;
    }
    #ancient .ancient-item .body {
        height: 0;
        overflow: hidden;
    }
    .ancient-item p {
        font-size: 10px;
        position: relative;
        /* top: -30px; */
        margin-bottom: 0;
    }

        .panel1-content {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: relative;
        top: 0px;
    }

    .ancient-grid-right {
        position: absolute;
        right: 5%;
        top: 15%;
        display: block;
        width: 35%;
        scale: 1;
    }
    .ancient-grid-right .ancient-item{
text-align: left;
}
.ancient-grid-right .ancient-item .head{
position: relative;
        left: 25px;
}
.ancient-grid-right .ancient-item .body{
          right: 25px;
}
      .ancient-circle {
        position: relative;
         left: 8%;
        top: 55%;
        width: 240px;
        transform: translateY(54%);
      }

      .ancient-man
      {
        position: relative;
        top: -120px;
        right: -9%;
        width: 150px;
      }

      .diagnosis-man{
          position: relative;
        top: -80px;
        right: 22%;
        width: 120px;
      }

      .dot {
        position: absolute;
        width: 30px;
        cursor: pointer;
        z-index: 9;
      }
      .dot.physical{top:21%;left:30%}
      .dot.dietary{top:40%;left:26%}
      .dot.symptoms{top:28.5%;left:25%}
      .dot.sleep{top:25%;left:29%}
      .dot.activity-patterns{top:62%;left:27%}
      .dot.excretions{top:47%;left:25%}

      .line.physical{top: 23%;left: 38%;}
      .line.dietary{top:30%;left:33%;width: 80px;}
      .line.symptoms{top:31%;left:29%;width: 80px;}
      .line.sleep{top:28%;left:34%}
      .line.activity-patterns{top:64.5%;left:34%;width: 65px;}
      .line.excretions{top:50%;left:30%;width: 60px;}

      .dot img {
        width: 100%;
      }

      .line {
        position: absolute;
        opacity: 0;
        width: 50px;
      }
      .info-box{text-align: left;}
      .info-box h3{color: #fff;font-size: 11px;}
      .info-box p{font-size: 10px;}
      .info-box .physical{top: 140px;right: 3%;position: absolute; width: 50%;padding: 0px 25px;}
      .info-box .dietary{top:29%;right:0%;position: absolute;width: 50%;padding: 0px 25px;}
      .info-box .symptoms{top:40%;right:3%;position: absolute;width: 50%;padding: 0px 25px;}
      .info-box .sleep{top:43.5%;right:3%;position: absolute;width: 50%;padding: 0px 10px;}
      .info-box .activity-patterns{top:63%;right:3%;position: absolute;width: 50%;padding: 0px 25px;}
      .info-box .excretions{top:62%;right:8%;position: absolute;width: 50%;padding: 0px 25px;}

      .info {
        display: none;
      }
      .ailments-header, .modes-header{text-align: center;width: 90%;margin: 0 auto;scale: 1;padding-top: 45px;}
      .ailment-man { left: 15%; bottom: 30%; position: absolute; height: 25%;z-index: 9; }
      .ailment-woman { left: 45%; bottom: 31%; position: absolute; height: 23%; }

      /* .ailment-list {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
      } */

      .ailment-men{
        position: absolute;
          left: 0%;
          top: 30%;
          transform: translateY(-50%);
          width: 40%;
          text-align: right;
      }
      .ailment-women{
          position: absolute;
        right: 0%;
        top: 27%;
        transform: translateY(-50%);
          width: 51%;
          text-align: left;
      }
        .ailment.women-ailment .body {
        padding: 0px 0px 0px 0px;
        }
      .ailment .body {
        height: 0;
        overflow: hidden;
      font-size: 10px;
      padding: 0px 0px 0px 5px;
      font-weight: 100;
      }
      .ailment .head{
        font-weight: 600;
        cursor: pointer;
        font-size: 12px;
      }
      .ailment .head span img{
            position: relative;
          top: 0px;
          width: 30px;
      }
      .ailment.active .body{
      height: auto;
        
      }
      .mode-man{
        position: absolute;
        bottom: 25%;
        left: 28%;
        width: 150px;
      }
      .modes-grid-left{
        position: absolute;
        left: 2%;
        top: 21%;
        display: block;
        width: 25%;
        text-align: right;
      }
      .modes-grid-left p{
      padding:10px 15px 0px 0px;
      }
      .mode-item{
        height: 170px;
      }
      .mode-item ul{
            margin: 0px -30px 0px 0px;
          padding: 0px;
      }
      .mode-item ul li{
        list-style: none;
        display: inline-block;
        margin-left: 0px !important;
      }
      .mode-item ul li img{
      width: 40px;
          position: relative;
          top: -15px;
      }
      .mode-item  h3{
        color: #fff;
        font-weight: 600;
        font-size: .6rem;
        padding: 5px 0px;
        margin: 0;
      }
      .mode-item  h4{
        color: #fde9b6;
        font-weight: 400;
        font-size: .6rem;
        font-style: italic;
        padding:  0px;
        margin: 0;
      } 
       .mode-item p{
        font-size: 8px;
        position: relative;
        top: -30px;
       }
      .modes-grid-right {
        position: absolute;
        right:11%;
        top: 21%;
        display: block;
        width: 40%;
        text-align: right;
      }
      .modes-grid-right .mode-item{
        text-align: right;
      }
      .modes-grid-right p{
      padding: 10px 0px 0px 50px;
      }
      .modes-grid-right .mode-item p{
        right:-30px;
      }

      .int-text{
          width: 90%;
          margin: 0 auto;
          padding: 100px 0px;
          position: relative;
          color: #ead39b;
          font-size: 9px;
          font-weight: 600;
          text-align: left;
          opacity: 0;
      }
      .info-box{
          text-align: left;
      }

      .research-copy{
        padding-top: 0px;
      font-size: .9rem;
      }

      #diagnosis{
        height: 80vh;
      }


}


@media (max-width: 767px) {
.u-section{
  height: 100vh;
}

  .ancient-circle{
  top: 0%;
}
.ancient-man{
  top:-135px;
}

}