:root{
  --sidebar-width:260px;
  --sidebar-compact:80px;
  --brand:#ec0e76;
  --muted:#fff;
  --bg:#fff;
color: yellow ;
  --shadow:0 6px 18px rgba(15,23,42,0.08);
  --radius:12px;
  --footer-bg: rgb(238, 111, 7); /* Dark color for professionalism */
  --footer-text: #f0f4f8;
  --footer-link: #000;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,Arial;
  font-family:'Poppins', sans-serif;
    /* BACKGROUND IMG */
    background-image:url("../img/eb.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  color:#0b1220;height:100%}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:64px;background: orange;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #eef2f6;z-index:50}
.top-left{display:flex;align-items:center;gap:12px}
.people-icon{width:44px;height:44px;border-radius:10px;background:#fcfbf9;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--brand)}
.comlogo{
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.company-name{font-weight:700;font-size:16px;color:var(--brand)}
 
.toggle-btn{width:44px;height:44px;border-radius:10px;border:1px solid #fff;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--brand)}
.search-wrap{flex:1;display:flex;justify-content:center}
.search{width:360px;max-width:100%;display:flex;align-items:center;background:#faf8f8;border-radius:10px;padding:8px 12px;box-shadow:0 6px 18px rgba(15,23,42,0.08);border:1px solid #eef2f6}
.search input{border:0;outline:0;font-size:14px;width:100%}
.top-right{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#fff;color: var(--brand); border:1px solid #eef2f6;cursor:pointer;font-size:16px; font-weight: 700;}
.profile-btn img{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* Mobile search dropdown */
.mobile-search{position:fixed;top:64px;left:0;right:0; background:#fff;padding:10px 12px;border-bottom:1px solid #eef2f6;display:none;z-index:45}
.mobile-search.open{display:block;animation:slide .25s ease}
.mobile-search .search{width:100%}
.mobile-search .close-btn{margin-left:8px;font-size:18px;cursor:pointer;color:#555}
@keyframes slide{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Sidebar */
.sidebar{position:fixed;top:64px;left:0;bottom:0;width:var(--sidebar-width);background:#d2691e;border-right:1px solid #eef2f6;padding:18px;overflow-y:auto;overflow-x:hidden;z-index:30;transition:width .4s ease,padding .4s ease;}
.sidebar.compact{width:var(--sidebar-compact);padding:18px 8px;}
.sidebar .profile{display:flex;align-items:center;gap:12px;margin-bottom:20px;transition:all .4s;}
.sidebar .profile img{width:56px;height:56px;border-radius:10px;transition:all .4s;}
.sidebar.compact .profile .meta{display:none;opacity:0;}
.nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none; font-weight: 600; color:#0f0f0f;transition:all .3s;}
.nav a i{width:18px;text-align:center}
.sidebar.compact .nav a span{display:none;}
.nav a:hover{background:#f1f7f8}
.nav .section-title{margin:18px 8px 8px;font-size:12px; font-weight: 600; color:var(--muted);text-transform:uppercase;transition:opacity .3s;}
.sidebar.compact .section-title{opacity:0;pointer-events:none;}  
/* Sidebar  */
 

/* Scrollbar style */
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius:3px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }

/* Main */
.main{margin-top:64px;margin-left:var(--sidebar-width);padding:20px;transition:margin-left .4s,width .4s; min-height: calc(100vh - 64px - 280px);} /* Added min-height to push footer down */
.main.sidebar-compact{margin-left:var(--sidebar-compact);width:calc(100% - var(--sidebar-compact))}

/* Mobile */
@media(max-width:900px){
  .sidebar{transform:translateX(-110%);transition:.3s;box-shadow:0 10px 28px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)}
   .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px;
    transition: all 0.3s ease;}

  .search-wrap{display:none}
  #mobileSearchBtn{display:inline-flex}
  .company-name{display:none;}

  /* FIX: Footer adjustment for screens under 900px */
  .footer-content { 
      grid-template-columns: 1fr !important; /* All columns stack into one */
      gap: 30px !important; 
  }
  .footer-wrapper { margin-left: 0 !important; }
}
@media(min-width:901px){#mobileSearchBtn{display:none}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}


/* ================= MAIN ================= */
.main { margin-top:64px; margin-left:var(--sidebar-width); padding:20px; transition:margin-left .4s,width .4s; }
.main.sidebar-compact { margin-left:var(--sidebar-compact); width:calc(100% - var(--sidebar-compact)); }

/* ================= CAROUSEL BASE STYLES ================= */
.product-carousel-container { position:relative; margin-top:20px; }
.product-carousel {
  display:flex;
  gap:15px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:10px 0;
  scrollbar-width:none;
}
.product-carousel::-webkit-scrollbar { display:none; }

/* Scroll Buttons */
.scroll-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.5);
  color:#fff;
  border:none;
  padding:10px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
}
.scroll-btn.left { left:0; }
.scroll-btn.right { right:0; }
.scroll-btn:hover { background:rgba(0,0,0,0.8); }

.an{
  text-decoration: none;
  display: block;
  color: inherit;
}
.an .title:hover{
  color: #244363;
  text-decoration:underline ;

}
/* MAIN PRODUCT CARD */
/* ========== PRODUCT GRID – CENTER + 10PX GAP RESPONSIVE ========== */


/* ========== CARD – DESKTOP VIEW (Normal Vertical) ========== */

.card{
    width:100%;
    max-width:230px;
    border-radius: 18px;
    overflow: hidden;
    background:#fff;
    border:2px solid #fff;
    box-shadow:0 0 18px rgba(0,0,0,0.25);
    display:flex;
    flex-direction:column;
    margin:auto;
}

/* PRODUCT IMAGE */
.top-img{
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:0;
}

/* DETAIL (GLASS LAYER) */
.glass{
    padding:12px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* TEXT STYLING */
.title{
    font-size:15px;
    font-weight:700;
    color:#222;
    margin-bottom:2px;
}

.sub{
    font-size:11px;
    color:#444;
    margin-bottom:5px;
}

.star{
    font-size:13px;
    color:#ffaa00;
    margin-bottom:6px;
}

.spec{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    margin-bottom:8px;
}

.left{
    color:#444;
    line-height:15px;
}
.right{
    text-align:right;
    color:#111;
    font-weight:600;
    line-height:15px;
}

.price-row{
    margin:6px 0;
}

.price{
    font-size:18px;
    font-weight:700;
    color:#000;
    margin-bottom:3px;
}

.mrp{
    text-decoration:line-through;
    color:#444;
    font-size:11px;
}

.save{
    color:#007b00;
    font-size:11px;
    font-weight:600;
}


/* BUTTONS */
.btn-row{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
}

.btn1, .btn2{
    width:48%;
    padding:7px 0;
    font-size:11px;
    color: #000;
    text-decoration: none;
    border-radius:20px;
    text-align:center;
    font-weight:700;
    cursor:pointer;
}

.btn1{ background:#ffcc55; }
.btn2{ background:#ffffffaa; }



/* ========== MOBILE LANDSCAPE VIEW (Image Left + Details Right) ========== */

/* ========== MOBILE LANDSCAPE PERFECT FIXED LAYOUT ========== */
@media (max-width: 689px) {

    .card {
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        margin: 10px 0;
        padding: 0;
        height: auto;              /* FIXED HEIGHT हटाया — अब content कटेगा नहीं */
        min-height: 170px;         /* थोड़ा minimum height ताकि layout natural लगे */
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    }

    /* IMAGE LEFT */
    .top-img {
        width: 50%;                /* image space थोड़ा कम किया ताकि details को जगह मिले */
        height: auto;
        max-height: 170px;
        object-fit: cover;
        border-radius: 0;
    }

    /* DETAILS RIGHT */
    .glass {
        width: 65%;
        padding: 8px;
        background: white;         /* readability बढ़ी */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 3px;                  /* elements spaced */
    }

    .title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
        line-height: 1.2;
        max-height: 35px;
        overflow: hidden;          /* Title दो line तक दिखेगा */
    }

    .sub, .spec, .mrp, .save {
        font-size: 10px;
        line-height: 1.2;
    }

    .spec {
        margin-bottom: 2px;
    }

    .price-row {
        margin: 4px 0;
    }

    .price {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 1px;
    }

    /* BUTTON ROW नीचे स्थिर */
    .btn-row {
        margin-top: auto;
        display: flex;
        gap: 5px;
    }

    .btn1, .btn2 {
        padding: 6px 0;
        font-size: 10px;
        border-radius: 12px;
    }
}

/* ================= EMPLOYEE PROFILE CARD STYLES ================= */
.profile-card-employee {
  flex:0 0 auto;
  width:200px;
  min-width:200px;
  background: #fff;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 8px 10px rgba(0,0,0,0.2);
  position: relative; 
}

.profile-card-employee .header {
  height:80px; 
  background:linear-gradient(135deg, #007bff, #0056b3); 
  position:relative;
  z-index:1;
  border-radius:28px 28px 0 0;
}

.profile-card-employee .avatar-wrap {
  width:100px;
  height:100px;
  border-radius:50%;
  border:4px solid white;
  background:#f8f9fa;
  position:absolute;
  top:30px; 
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  z-index:10;
  overflow:hidden;
}

.profile-card-employee .avatar-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-card-employee .details {
  padding:65px 16px 16px 16px; 
  text-align:center;
}

.profile-card-employee .name {
  font-weight:500;
  font-size:13px;
  color:#0b1220;
  margin-bottom:2px;
}

.profile-card-employee .profession {
  font-size:13px;
  color:#007bff;
  font-weight:600;
  margin-bottom:12px;
}

.profile-card-employee .info-row {
  display:flex;
  justify-content:space-between;
  gap:5px;
  font-size:12px;
  color:#555;
  margin-bottom:4px;
  border-top:1px dashed #eee;
  padding-top:4px;
}

.profile-card-employee .info-row strong {
  font-weight:600;
  color:#333;
}

.profile-card-employee .contact-actions {
  display:flex;
  justify-content:space-around;
  padding-top:10px;
  border-top:1px solid #eee;
  margin-top:10px;
}

.profile-card-employee .contact-actions .icon-box {
    width:36px; 
    height:36px;
    font-size:16px; 
    color:white;
    background-color:#007bff; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
}
.profile-card-employee .contact-actions .icon-box.phone { background-color:#28a745; }
.profile-card-employee .contact-actions .icon-box.email { background-color:#dc3545; }
/* End of Card Styles */

.content_term {
  width: 100%;
  background: #0056b3;
  border-radius: 5px;
}
.content_term h1{
  height: 60px;
  line-height: 60px;
  text-align: center;
  text-transform: capitalize;
  background: #35051d;
  color: #4d4c4c;
  border-radius: 5px;

}
@media(max-width:640px){
  .content_term h1{
  line-height: normal;
  font-size: 20px;
  padding: 5px;
}
}
  
.term{
  width: 100%;
  height: 100%;
  margin-top: 20px;
  margin-left: 10px;
}
.term h2{
  color: #35051d;
}
.term p{
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  margin-left: 20px;
  margin-right: 10px;
  color: #999999;
}
.termb{
  width: 100%;
  height: 100%;
  margin-top: 20px;
  margin-left: 10px;
}
.termb h2{
  color: #35051d;
}
.termb p{
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  margin-left: 20px;
  margin-right: 10px;
  padding: 10px;
  color: #999999;
}
 





.product-grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 10px;
    padding: 10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

.doctor-card{
    position:relative;
    width:100%;
    max-width:300px;
    height:160px;       /* SAME FIXED HEIGHT */
    display:flex; 
    gap:15px;
    padding:15px;
    margin:auto;
    margin-bottom:20px;
    border-radius:20px;
    /* PURE GLASS EFFECT */
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.35);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    
    box-shadow:0 8px 25px rgba(0,0,0,0.35);
    z-index:5;
}

.doctor-img{
    width:90px;
    height:90px;
    border-radius:12px;
    overflow:hidden;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
}

.doctor-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CONTENT SAME */
.doc-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.doc-title{
    font-size:17px;
    font-weight:700;
    color:#fff;
}

.doc-spec{
    font-size:13px;
    color:#f1f1f1;
}

.doc-info{
    font-size:12px;
    font-weight: 500;
    color:hsl(344, 25%, 88%);
    line-height:18px;
}

.rating{
    font-size:13px;
    color:#ffd85e;
    font-weight:600;
}

/* CONTACT BUTTON FIX SAME POSITION */
.btn{
    position:absolute;
    text-align: center;
    text-decoration: none;
    bottom:10px;
    width:80px;
    height:28px;
    line-height:28px;
    border-radius:10px;
    background:rgba(200,0,120,0.65);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.35);
    color:#fff;
    font-size:13px;
    font-weight:700;
}

/* SOCIAL ICONS – GLASS STYLE */
.sosal{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}
.sosal a{
    text-decoration: none;
}
.sosal a i{
    width:25px;
    height:25px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height:25px;
    margin:2px;
    background:rgba(255,255,255,0.22);
    backdrop-filter:blur(10px);
    border-radius:10px;
    color:#fff;
    border:1px solid rgba(255,255,255,0.28);
}

/* ================= FOOTER STYLES (NEW) ================= */
.footer-wrapper {
    margin-left: var(--sidebar-width);
    transition: margin-left .4s;
    background: var(--footer-bg);
    color: var(--footer-text);
    padding-top: 30px;
    border-top: 5px solid var(--brand); /* Accent color border */
}

.footer-wrapper.sidebar-compact {
    margin-left: var(--sidebar-compact);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 20px;
    padding: 0 20px 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-section h4 {
    color: var(--footer-text);
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.footer-section p {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--footer-link);
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul a {
    text-decoration: none;
    color: var(--footer-link);
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}
.footer-section ul li a i {
     font-size: 20px;
     
     
}

.footer-section ul a:hover {
    color: var(--brand);
}

.footer-section ul a i {
    margin-right: 8px;
    font-size: 12px;
    color: var(--brand);
    width: 16px;
    text-align: center;
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    
}

.social-icons a {
    color: var(--footer-text);
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0056b3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

.social-icons a:hover {
    background: var(--brand);
    color: #fff;
}

.footer-bottom {
    background: #141b25;
    text-align: center;
    padding: 15px 20px;
    font-size: 12px;
    color: var(--footer-link);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-bottom a {
    color: var(--footer-link);
    text-decoration: none;
    margin: 0 8px;
}
.footer-bottom a:hover {
    color: var(--brand);
    text-decoration: underline;
}
/* ================= END FOOTER STYLES ================= */

/* ================= RESPONSIVE (Footer Fix Included) ================= */

.product-carousel-container { position: relative; padding: 0 20px; }
        .product-carousel { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; padding: 20px 0; }
        .product-carousel::-webkit-scrollbar { display: none; } /* Scrollbar छुपाएँ */
        .card { flex: 0 0 auto; width: 250px; margin-right: 15px; scroll-snap-align: start; }
        .scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 10; border-radius: 50%; }
        .scroll-btn.left { left: 0; }
        .scroll-btn.right { right: 0; }