/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* *********************HEALTHMAX********************************/
:root {
    --hmp-blue: #005696;
    --hmp-blue-dark: #003a66;
    --hmp-green-dark: #2E7D32;
    --hmp-green-light: #8BC34A;
    --rich-black: #0A1F2C;
    --soft-white: #F4F7F9;
    --white: #ffffff;
    --text-gray: #5E6D77;
    --nav-height: 74px;
    --font-main: 'Montserrat', 'Poppins', sans-serif;
    --font-premium: 'Playfair Display', serif;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --hmp-bg-main: #f4f7fa;
}

/******************************************************** Global Reset **********************************************************/
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body {  overflow-x: clip !important; max-width: 100% !important;  width: 100% !important; position: relative; margin: 0;   padding: 0;}

html { overflow-y: auto; scroll-behavior: smooth;}

body { justify-content: center;  font-family: var(--font-main);   color: var(--rich-black);  overflow-y: auto; line-height: 1.6;  background-color: #ffffff; padding-top: 80px;  font-display: swap;}

/* Ensure text is visible during font load */
body { font-display: swap; }
.fonts-loading body { visibility: visible !important; }

p { color: #5E6D77;   line-height: 1.7; font-size: 15px;}

img {  max-width: 100%; height: auto;}

section, main, header, footer, nav, article, aside, div {   max-width: 100%;}

.carousel, .carousel-inner, .carousel-item { width: 100% !important; max-width: 100% !important; overflow: hidden !important;}

.row {  --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap;  margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(var(--bs-gutter-x) * -0.5); margin-left: calc(var(--bs-gutter-x) * -0.5);}

.row > * { flex-shrink: 0;  max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5);  margin-top: var(--bs-gutter-y);}

/* Fix Bootstrap gutter classes */
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }

img, video, iframe, embed, object {  max-width: 100%; height: auto;}

.container-fluid { padding-left: 15px; padding-right: 15px;   max-width: 100%;  width: 100%;}

.container { width: 100%; padding-right: 15px;  padding-left: 15px; margin-right: auto; margin-left: auto;}

@media (min-width: 576px) { .container { max-width: 540px; }}

@media (min-width: 768px) {.container { max-width: 720px;}}

@media (min-width: 992px) {.container {  max-width: 960px;}}

@media (min-width: 1200px) { .container {
  max-width: 1140px;}}

@media (min-width: 1400px) {.container { max-width: 1320px;}}
.navbar .container {overflow: visible !important;}
/******************************************************** Global Reset **********************************************************/


/**************************************************************Global Utility Classes ************************************************/
.section-padding { padding: 50px 0; }
.bg-light-alt {  background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);}
.bg-white {  background: #ffffff;}
.bg-light {   background: linear-gradient(135deg, #f4f9f4 0%, #e8f5e9 100%);}
.bg-gradient-blue {    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);}
.bg-gradient-green {  background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);}
h1, h2, h3, h4, h5, h6, .heading {  font-family: var(--font-premium);   font-weight: 700; }
.heading {  position: relative;  margin-bottom: 1.5rem; }
.text-muted {    color: #6c757d !important; }
.heading span { color: var(--hmp-green-dark) !important; }
.sub-heading {   display: inline-block;  text-transform: uppercase;   color: var(--hmp-green-light);    font-weight: 700;   letter-spacing: 2px;   font-size: 13px;   margin-bottom: 10px; }
.gradient-heading{color: var(--hmp-blue);} 
/* Specific heading colors - Blue for main text, Green for highlighted spans */
h1 {
    color: var(--hmp-blue) !important;
}

h1 span {
    color: var(--hmp-blue) !important;
}

h2 span, h3 span, h4 span, h5 span, h6 span {
    color: var(--hmp-green-dark) !important;
}
.carousel-caption h1,
.product-card-premium h3,
.product-card-premium h5,
.blog-content h4,
.testi-user h5 {
    color: var(--hmp-blue) !important;
}
.pb-5 {
    padding-bottom: 0rem !important;
}
/**************************************************************Global Utility Classes ************************************************/


/* ************************************************* NAVIGATION BAR************************************************************* */
.navbar {  background: linear-gradient(135deg, #005696 0%, #003a66 100%);   min-height: var(--nav-height); position: fixed; top: 0; left: 0; right: 0; z-index: 9999; box-shadow: 0 4px 20px rgba(0,86,150,0.3); width: 100%;}
.modal { z-index: 10000 !important; }
.modal-backdrop { z-index: 9999 !important; }
#profileDropdown,
#prodDropdown,
.dropdown-toggle,
a.dropdown-toggle,
.nav-link.dropdown-toggle {   border: 0 !important; border-width: 0 !important;   border-style: none !important; border-color: transparent !important; outline: 0 !important;  outline-width: 0 !important;outline-style: none !important; outline-color: transparent !important;    box-shadow: none !important; --bs-btn-focus-box-shadow: none !important;}
#profileDropdown:hover,
#profileDropdown:focus,
#profileDropdown:active,
#profileDropdown:focus-visible,
#profileDropdown[aria-expanded="true"],
#prodDropdown:hover,
#prodDropdown:focus,
#prodDropdown:active,
#prodDropdown:focus-visible,
#prodDropdown[aria-expanded="true"],
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle:focus-visible,
.dropdown-toggle.show,
.nav-link.dropdown-toggle:hover,
.nav-link.dropdown-toggle:focus,
.nav-link.dropdown-toggle:active,
.nav-link.dropdown-toggle:focus-visible {  border: 0 !important;  border-width: 0 !important; border-style: none !important;  border-color: transparent !important;  outline: 0 !important; outline-width: 0 !important; outline-offset: 0 !important;   box-shadow: none !important; background: transparent !important; --bs-btn-focus-box-shadow: none !important;}
.navbar .container {  overflow: visible;}
.nav-link {    font-weight: 600;    color: #ffffff !important;    padding: 10px 20px !important;          position: relative;  transition: all 0.3s ease; font-size: 15px; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: inline-flex !important;  align-items: center !important; gap: 0.3em !important;}
.nav-link:not(.dropdown-toggle)::after {  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%) scaleX(0); width: 70%;height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.3) 20%, rgba(0, 217, 255, 0.8) 50%, rgba(0, 217, 255, 0.3) 80%, transparent 100%); border-radius: 3px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;   opacity: 0; filter: blur(0.5px);  box-shadow: 0 0 8px rgba(0, 217, 255, 0.4);}
.nav-link:not(.dropdown-toggle):hover::after {  transform: translateX(-50%) scaleX(1);   opacity: 1;}
.nav-link:not(.dropdown-toggle):hover {      color: #00D9FF !important;     outline: none !important;   box-shadow: none !important;transform: translateY(-2px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.nav-link:not(.dropdown-toggle).active {    color: #00D9FF !important;            outline: none !important;     font-weight: 700; border-radius: 8px;}
.nav-link:not(.dropdown-toggle).active::after {  content: '';  position: absolute;  bottom: 5px;    left: 50%;  transform: translateX(-50%) scaleX(1);   width: 70%;  height: 3px; 
background: linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.3) 20%, rgba(0, 217, 255, 0.8) 50%, rgba(0, 217, 255, 0.3) 80%, transparent 100%); border-radius: 3px;    opacity: 1;   filter: blur(0.5px); box-shadow: 0 0 8px rgba(0, 217, 255, 0.5);}
.nav-link.dropdown-toggle:hover {      color: #00D9FF !important;   background: rgba(255, 255, 255, 0.1) !important;   border: none !important;   outline: none !important;  box-shadow: none !important; transform: translateY(-2px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.dropdown-toggle {   position: relative;}
.nav-link.dropdown-toggle::before { content: '';   position: absolute;   bottom: 5px; left: 50%;  transform: translateX(-50%) scaleX(0);   width: 70%;  height: 3px;   background: linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.3) 20%, rgba(0, 217, 255, 0.8) 50%, rgba(0, 217, 255, 0.3) 80%, transparent 100%); border-radius: 3px;  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;  filter: blur(0.5px); box-shadow: 0 0 8px rgba(0, 217, 255, 0.4); opacity: 0;  z-index: 0; pointer-events: none;}
.nav-link.dropdown-toggle:hover::before {  transform: translateX(-50%) scaleX(1); opacity: 1;}
.dropdown-toggle.active::before { transform: translateX(-50%) scaleX(1); opacity: 1; box-shadow: 0 2px 8px rgba(0, 217, 255, 0.5);}
.dropdown-toggle.active {     color: #00D9FF !important;  font-weight: 700;}
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle.show {  background: transparent !important;  background-color: transparent !important;    border: none !important; border-color: transparent !important; outline: none !important;   outline-width: 0 !important; box-shadow: none !important;}
.dropdown-toggle:focus-visible {   border: none !important; border-color: transparent !important;  outline: none !important; outline-width: 0 !important; box-shadow: none !important;}
.dropdown-toggle[aria-expanded="true"] {  border: none !important; border-color: transparent !important; outline: none !important; box-shadow: none !important;}
.nav-link:focus,
.nav-link:focus-visible {  border: none !important;border-color: transparent !important; outline: none !important; outline-width: 0 !important; box-shadow: none !important;}
.nav-item.dropdown .nav-link:focus,
.nav-item.dropdown .nav-link:active,
.nav-item.dropdown .nav-link.show {    border: none !important;  border-color: transparent !important; outline: none !important;  box-shadow: none !important;}
.nav-logo {height: 80px; width: auto; object-fit: cover; transition: var(--transition); border-radius: 12px; background: #ffffff; padding: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.brand-text {  font-family: var(--font-premium);  font-weight: 800;   font-size: 24px;  color: var(--hmp-blue);   margin-left: 12px;     line-height: 1;}
.brand-text span {  color: var(--hmp-green-dark);   display: block;  font-size: 14px;  font-family: var(--font-main);   letter-spacing: 2px;  text-transform: uppercase;}
.main-nav {background: linear-gradient(135deg, #005696 0%, #0066a1 15%, #0077b3 30%, #1a8fb8 45%, #33a67a 60%, #3fa865 75%, #2E7D32 100%) !important; box-shadow: 0 4px 20px rgba(0, 86, 150, 0.3); transition: all 0.3s ease;  padding: 10px 0;}
.dropdown-menu { border-radius: 12px;  padding: 15px 0; min-width: 240px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  border: 1px solid rgba(0, 86, 150, 0.1);}
.dropdown-menu.show { display: block !important; }
.dropdown-item { padding: 10px 20px; font-size: 14px; transition: color 0.3s ease;font-weight: 500; color: var(--rich-black); background: transparent !important;}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {   background: transparent !important;  background-color: transparent !important;  color: #00D9FF !important;}
.dropdown-item i {   margin-right: 8px; color: var(--hmp-green-dark);transition: all 0.3s ease;}
.dropdown-item:hover i,
.dropdown-item:focus i,
.dropdown-item.active i { color: #00D9FF;}
.border-start { border-left: 2px solid #e9ecef !important; margin-bottom: 5px;}
.dropdown-toggle::after { content: "\f107" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; position: static !important; border: none !important; margin-left: 0.5em !important; vertical-align: middle !important; color: #00D9FF !important; font-size: 0.65em !important; transition: transform 0.3s ease !important; width: auto !important; height: auto !important; line-height: 1 !important; transform-origin: center !important;}
.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg) !important; color: #00D9FF !important;}
.dropdown-toggle:hover::after {  color: #00D9FF !important;}
.dropdown-toggle.active::after {    color: #00D9FF !important;}
.navbar-toggler {   border: none !important; padding: 0.25rem 0.5rem;}
.navbar-toggler:focus { box-shadow: none !important;  outline: none !important;}
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; width: 1.5em;  height: 1.5em;}

/* Hamburger Menu Icon Styles */
.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1.5px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    position: absolute;
    transition: transform 0.3s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}
.nav-call-btn,
a.nav-call-btn,
button.nav-call-btn {   background: linear-gradient(135deg, #00D9FF 0%, #00B8E6 100%) !important;   color: #ffffff !important; padding: 10px 24px !important;  border-radius: 30px !important;    text-decoration: none !important;  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.3s ease !important;  font-weight: 700 !important;  font-size: 13px !important;  text-transform: uppercase !important;  letter-spacing: 0.8px !important;  box-shadow: 0 4px 15px rgba(0, 217, 255, 0.4) !important; border: 2px solid #00D9FF !important;   position: relative !important; overflow: hidden !important; z-index: 1 !important;}
.nav-call-btn i,
a.nav-call-btn i,
button.nav-call-btn i {   font-size: 14px !important; animation: phoneRing 1.5s ease-in-out infinite !important;}
@keyframes phoneRing { 0%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(-15deg); } 20%, 40% { transform: rotate(15deg); } 50% { transform: rotate(0deg); }}
.nav-call-btn::before,
a.nav-call-btn::before,
button.nav-call-btn::before { content: '' !important;  position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(135deg, #00B8E6 0%, #00D9FF 100%) !important; transition: left 0.3s ease !important;  z-index: -1 !important;}
.nav-call-btn:hover::before,
a.nav-call-btn:hover::before,
button.nav-call-btn:hover::before { left: 0 !important;}
.nav-call-btn:hover,
a.nav-call-btn:hover,
button.nav-call-btn:hover {   transform: translateY(-3px) scale(1.05) !important;  box-shadow: 0 8px 25px rgba(0, 217, 255, 0.6) !important;  color: #ffffff !important; border-color: #00B8E6 !important;}
.nav-call-btn *,
a.nav-call-btn *,
button.nav-call-btn * { position: relative !important;  z-index: 1 !important;}
.nav-btn-primary,
a.nav-btn-primary,
button.nav-btn-primary {   background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%) !important;color: #ffffff !important;  padding: 10px 24px !important;  border-radius: 25px !important;  text-decoration: none !important;  display: inline-block !important;  transition: all 0.3s ease !important;   font-weight: 700 !important;  font-size: 13px !important;  text-transform: uppercase !important;  letter-spacing: 0.8px !important;  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4) !important; border: none !important;  position: relative !important;  overflow: hidden !important;   z-index: 1 !important;}
.nav-btn-primary::before,
a.nav-btn-primary::before,
button.nav-btn-primary::before {   content: '' !important; position: absolute !important;   top: 0 !important;  left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%) !important; transition: left 0.3s ease !important;  z-index: -1 !important;}
.nav-btn-primary:hover::before,
a.nav-btn-primary:hover::before,
button.nav-btn-primary:hover::before { left: 0 !important;}
.nav-btn-primary:hover,
a.nav-btn-primary:hover,
button.nav-btn-primary:hover {   transform: translateY(-3px) !important;  box-shadow: 0 8px 25px rgba(46, 125, 50, 0.6) !important;  color: #ffffff !important;}
.nav-btn-primary *,
a.nav-btn-primary *,
button.nav-btn-primary * { position: relative !important; z-index: 1 !important;}
.animate.slideIn { animation-duration: 0.4s; animation-fill-mode: both;  animation-timing-function: ease-out;}
@keyframes slideIn {0% {  transform: translateY(-10px);  opacity: 0; } 100% {  transform: translateY(0);   opacity: 1;   }}
.slideIn {   animation-name: slideIn; }
.dropdown-menu { animation: dropdownFadeIn 0.3s ease-out;}
@keyframes dropdownFadeIn { 0% { opacity: 0; transform: translateY(-10px); }  100% { opacity: 1;  transform: translateY(0); }}
/* ************************************************* NAVIGATION BAR************************************************************* */



/* **************************************************** BUTTONS - UNIVERSAL *********************************** */
.btn-universal,
a.btn-universal,
button.btn-universal {   background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%) !important;   color: #ffffff !important;    padding: 12px 28px !important;  border-radius: 25px !important;       border: none !important;     font-weight: 600 !important;   font-size: 14px !important;  transition: all 0.3s ease !important;   display: inline-flex !important;   align-items: center !important;   justify-content: center !important;    text-decoration: none !important;   text-transform: uppercase !important;   letter-spacing: 0.8px !important; box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3) !important;position: relative !important;  overflow: hidden !important;  z-index: 1 !important;}
.btn-universal::before,
a.btn-universal::before,
button.btn-universal::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;   width: 100% !important;  height: 100% !important; background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%) !important;  transition: left 0.3s ease !important; z-index: -1 !important;}
.btn-universal:hover::before,
a.btn-universal:hover::before,
button.btn-universal:hover::before { left: 0 !important;}
.btn-universal:hover,
a.btn-universal:hover,
button.btn-universal:hover {   transform: translateY(-3px) !important;   box-shadow: 0 8px 25px rgba(46, 125, 50, 0.5) !important;  color: #ffffff !important;}
.btn-universal *,
a.btn-universal *,
button.btn-universal * { position: relative !important; z-index: 1 !important;}
.btn-universal.ghost {      background: transparent !important;    border: 2px solid var(--hmp-green-dark) !important;   color: var(--hmp-green-dark) !important; box-shadow: none !important;}
.btn-universal.ghost:hover { background: var(--hmp-green-dark) !important; color: #ffffff !important;}
/* **************************************************** BUTTONS - UNIVERSAL *********************************** */


/* ****************************************************HERO BANNER ******************************************* */
.main-banner { position: relative; height: 85vh;  min-height: 500px;background-color: var(--soft-white); overflow: hidden !important; max-width: 100%; width: 100%;}
.hero-full-img { height: 85vh; min-height: 500px; object-fit: cover; width: 100%; max-width: 100%; display: block;}
.carousel-caption { position: absolute; top: 0; left: 0; right: 0; max-width: 100%;  width: 100%; bottom: 0; z-index: 10; padding: 0 15px;   display: flex; align-items: center;  text-align: left !important;}
.carousel-caption .row {  width: 100%; max-width: 100%;   margin: 0 !important;}
.carousel-caption .col-lg-7 { max-width: 100%;}
.hero-overlay { position: absolute; top: 0;    left: 0;  width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 75%); z-index: 1;}
.carousel-caption .container { position: relative; z-index: 2; max-width: 100%;  width: 100%; padding: 0 15px;}
.custom-nav { width: 60px; z-index: 20; opacity: 1 !important;}
.carousel-control-prev-icon,
.carousel-control-next-icon { background-color: var(--hmp-blue) !important;   width: 50px;  height: 50px;   border-radius: 50%; background-size: 40%; border: 3px solid var(--white);transition: var(--transition);box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.custom-nav:hover .carousel-control-prev-icon,
.custom-nav:hover .carousel-control-next-icon { background-color: var(--hmp-green-dark) !important;   transform: scale(1.1);}
/* ****************************************************HERO BANNER ******************************************* */



/* **********************************************ABOUT US SECTION ******************************************* */
.about-section {  overflow: hidden;  position: relative; background: #ffffff;}
.about-section::before { content: ''; position: absolute;  top: 0;  left: 0; width: 100%;  height: 100%;  background-image:  radial-gradient(circle at 20% 30%, rgba(0, 86, 150, 0.03) 0%, transparent 50%),radial-gradient(circle at 80% 70%, rgba(46, 125, 50, 0.03) 0%, transparent 50%); pointer-events: none;}
.about-image-wrapper {  position: relative; padding-bottom: 40px;   padding-right: 40px; z-index: 1;}
.main-img-box img {    width: 100%;     height: 500px;  object-fit: cover; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.secondary-img-box {  position: absolute;   bottom: -20px;    right: -20px;  width: 250px;  z-index: 2;}
.secondary-img-box img {  border: 8px solid var(--white); border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);    width: 100%;}
.exp-badge {   position: absolute;   top: 40px;   left: -30px;  background: var(--hmp-green-dark);   color: var(--white);    padding: 25px;   border-radius: 12px;  text-align: center;    z-index: 3;   min-width: 150px;box-shadow: 0 10px 30px rgba(46, 125, 50, 0.3);}
.exp-badge h2 {  font-size: 2.8rem;  line-height: 1;  font-weight: 800;   margin-bottom: 5px; color: var(--white) !important; }
.exp-badge p { color: var(--white) !important; margin-bottom: 0;}
.exp-badge span { font-size: 0.9rem;  text-transform: uppercase; font-weight: 600; letter-spacing: 1px; color: var(--white);}
.feat-icon-box {    width: 60px;    height: 60px;  background: rgba(0, 86, 150, 0.05);  color: var(--hmp-blue);   display: flex;     align-items: center;  justify-content: center;    border-radius: 12px;  font-size: 1.5rem; flex-shrink: 0;  transition: var(--transition);}
.about-features .d-flex:hover .feat-icon-box {  background: var(--hmp-blue); color: var(--white);  transform: rotateY(180deg);}
.experience-badge {  position: absolute;   bottom: 0;  right: 0;  background: var(--hmp-green-dark);    color: white;   padding: 30px;  border-radius: 15px;   box-shadow: 0 10px 30px rgba(0,0,0,0.15);  text-align: center;}
.experience-badge h2 {  font-size: 3rem;  font-weight: 800; color: var(--white) !important;}
.experience-badge span,
.experience-badge p {  font-size: 12px;  text-transform: uppercase;  letter-spacing: 1px; color: var(--white) !important;}
/* **********************************************ABOUT US SECTION ******************************************* */



/* **********************************************PRODUCT CARDS *********************************************** */
.product-card-premium {   background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);    padding: 20px;   border-radius: 16px;    text-align: center;   height: 100%;   border: 2px solid rgba(0, 86, 150, 0.1);  display: flex;  flex-direction: column;   justify-content: space-between;  box-shadow: 0 6px 20px rgba(0, 86, 150, 0.08);  overflow: hidden;}
.product-img-wrap {     height: 180px;   display: flex;   align-items: center;    justify-content: center;   margin-bottom: 15px;   background: radial-gradient(circle, rgba(240, 247, 255, 1) 0%, rgba(255,255,255,0) 70%);  border-radius: 12px;   padding: 12px;  overflow: hidden; position: relative;}
.product-img-wrap::before { content: '';  position: absolute; top: 0;   left: 0;   right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 86, 150, 0.03) 0%, rgba(46, 125, 50, 0.03) 100%); border-radius: 20px;   z-index: 0;}
.product-img-wrap img {   max-height: 100%;    max-width: 100%;  object-fit: cover;    border-radius: 16px; position: relative;  z-index: 1;}
.product-card-premium h5,
.product-card-premium h3 {  color: var(--hmp-blue);   font-weight: 700;    margin-bottom: 15px; font-family: var(--font-premium); font-size: 1.25rem;}
.product-card-premium p {   font-size: 1rem;  color: var(--text-gray);   margin-bottom: 25px;  line-height: 1.6;}
/* **********************************************PRODUCT CARDS *********************************************** */


/* *********************************************WHY CHOOSE US SECTION ****************************************** */
.why-choose-section { position: relative; background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 50%, #dcedc8 100%); overflow: hidden;}
.why-choose-section::before { content: '';  position: absolute;   top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(139, 195, 74, 0.1) 0%, transparent 70%); border-radius: 50%; transform: translate(30%, -30%);}
.why-choose-section::after { content: ''; position: absolute; bottom: 0;  left: 0;  width: 250px; height: 250px; background: radial-gradient(circle, rgba(0, 86, 150, 0.08) 0%, transparent 70%); border-radius: 50%; transform: translate(-30%, 30%);}
.choose-content-box { background: var(--white); padding: 40px; border-radius: 20px;}
.choose-list .list-item { display: flex; align-items: flex-start;  margin-bottom: 20px;}
.choose-list .list-item i {  color: #ffc107;  font-size: 1.2rem; margin-right: 15px; margin-top: 3px;}
.commitment-box {  background: var(--white);  padding: 50px; border-radius: 20px;  border-top: 5px solid #ffc107;}
.italic-text { font-style: italic; line-height: 1.8;}
.text-success { color: var(--hmp-green-dark) !important;}
.border-success { border-color: var(--hmp-green-dark) !important;}
.list-item i { font-size: 1.2rem;}
/* *********************************************WHY CHOOSE US SECTION ****************************************** */


/* ********************************************BLOG CARDS******************************************************* */
.blog-card {    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);      border-radius: 16px;   overflow: hidden;   border: 2px solid rgba(0, 86, 150, 0.1);      height: 100%;   display: flex;  flex-direction: column;  box-shadow: 0 6px 20px rgba(0, 86, 150, 0.08);}
.blog-img-wrapper,
.blog-img-box {    position: relative;   overflow: visible;    height: auto;   flex-shrink: 0; padding: 15px 15px 0 15px;}
.blog-img-wrapper img,
.blog-img-box img {       width: 100%;    height: 180px;   object-fit: cover;      border-radius: 16px;}
.blog-category {   position: absolute;     top: 30px;    left: 30px;    background: var(--hmp-green-dark);     color: var(--white);      padding: 6px 16px;  border-radius: 50px;     font-size: 11px;    font-weight: 700;  text-transform: uppercase;    z-index: 2; box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);}
.blog-content {   padding: 25px;   display: flex;  flex-direction: column;  flex-grow: 1;}
.blog-content h4 {  font-family: var(--font-premium);   color: var(--hmp-blue);   font-size: 1.1rem;   margin-bottom: 12px;  line-height: 1.4;}
.blog-content p {     font-size: 0.9rem;    color: var(--text-gray);   margin-bottom: 20px;  line-height: 1.6;}
.blog-link {  color: var(--hmp-green-dark);  font-weight: 700;  font-size: 14px;  text-decoration: none;   transition: 0.3s;  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;}
.blog-link:hover {  color: var(--hmp-blue); padding-left: 8px;}
.blog-meta { font-size: 0.85rem;color: var(--text-gray); margin-bottom: 15px;}
.featured-img { padding: 0; min-height: 350px; overflow: hidden; border-radius: 1.5rem 0 0 1.5rem;}
.featured-img-full { width: 100%; height: 100%; object-fit: cover;  display: block; border-top: 6px solid var(--hmp-green-dark); border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem;}
.featured-blog-card { overflow: hidden !important;}
.blog-card-v2 { overflow: hidden;}
.blog-card-v2 img { border-top: 6px solid var(--hmp-green-dark); }
/* ********************************************BLOG CARDS******************************************************* */


/* ****************************************** TESTIMONIAL CAROUSEL******************************************* */
.testimonial-carousel .owl-item {    transition: all 0.3s ease; padding: 15px;}
.testi-card {  background: var(--white);  padding: 30px 25px; border-radius: 16px;  border: 1px solid rgba(0,0,0,0.05); position: relative;   height: 100%;   display: flex;  flex-direction: column;}

/* Natural Testimonial Style */
.testi-card-natural { 
    background: #fafafa; 
    border: 1px solid #e0e0e0; 
    border-left: 4px solid var(--hmp-green-dark);
}
.testi-avatar-natural { 
    width: 50px !important; 
    height: 50px !important; 
    object-fit: cover;
}
.stars-small { 
    font-size: 11px; 
    color: #ffa726;
    letter-spacing: 1px;
}
.stars-small i { 
    margin-right: 1px;
}
.lh-relaxed { 
    line-height: 1.6; 
    font-size: 14px;
    color: #555;
}

.quote-icon { font-size: 2rem; color: var(--hmp-green-light); opacity: 0.3;}
.quote-icon i {  display: inline-block;}
.testi-card p {  font-style: italic;  font-size: 15px;  line-height: 1.7; color: var(--text-gray); margin-bottom: 20px; position: relative;   z-index: 1;}
.testi-user { display: flex;  align-items: center;  gap: 15px; margin-top: auto;}
.testi-user img { width: 60px !important;  height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--soft-white);}
.testi-user h5 { font-size: 16px; font-weight: 700;  color: var(--hmp-blue);   margin: 0;}
.testi-user span { font-size: 13px; color: var(--hmp-green-dark);}
.owl-theme .owl-dots { margin-top: 30px !important;}
.owl-theme .owl-dots .owl-dot span {    width: 12px;   height: 12px; background: #d1d8e0; transition: 0.3s;}
.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {  background: var(--hmp-green-dark) !important; width: 30px;}
.stars { color: var(--hmp-blue);  font-size: 14px;}
.stars i { margin-right: 2px;}
.fa-user:before {
    content: "\f007";
    color: green;
    font-size: 1.4rem;
}
/* ****************************************** TESTIMONIAL CAROUSEL******************************************* */

/* ****************************************** CERTIFICATIONS SECTION ******************************************* */
.certifications-section { position: relative; overflow: hidden; padding: 60px 0;}
#certCarousel {  position: relative; padding: 0 60px;}
.cert-card { background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);  padding: 20px 15px;   border-radius: 12px;   text-align: center; border: 2px solid rgba(0, 86, 150, 0.1);  height: 100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);}
.cert-img-wrapper {   width: 80px;    height: 80px; margin: 0 auto 15px;   border-radius: 50%; overflow: hidden; border: 3px solid var(--hmp-blue); box-shadow: 0 6px 15px rgba(0, 86, 150, 0.2); background: var(--white);  padding: 8px;}
.cert-img { width: 100%;  height: 100%; object-fit: contain;  border-radius: 50%;}
.cert-card h5 { font-family: var(--font-premium);  color: var(--hmp-blue) !important;  font-weight: 700; font-size: 0.95rem; margin-bottom: 6px;}
.cert-card p {  margin: 0; font-size: 0.8rem; line-height: 1.3;}
.cert-nav-prev,
.cert-nav-next {   width: 50px !important; height: 50px !important;   background: var(--hmp-blue) !important;  border-radius: 50% !important; opacity: 1 !important;  transition: all 0.3s ease; top: 50% !important; transform: translateY(-50%);}
.cert-nav-prev .carousel-control-prev-icon,
.cert-nav-next .carousel-control-next-icon { width: 24px;  height: 24px; background-size: 100%;}
.cert-nav-prev {left: 0 !important;}
.cert-nav-next {  right: 0 !important;}
@media (max-width: 767px) {
 #certCarousel { padding: 0 50px;}
.cert-nav-prev,
.cert-nav-next { width: 40px !important; height: 40px !important; }
.cert-img-wrapper { width: 70px;  height: 70px;}
.cert-card { padding: 15px 10px; margin-right: 0;}
.cert-card h5 { font-size: 0.85rem;}
.cert-card p { font-size: 0.75rem; }
}
/* ****************************************** CERTIFICATIONS SECTION ******************************************* */


/* *************************************** CONTACT SECTION & FORMS************************************************* */
.contact-info-wrapper,
.contact-info-wrap { height: 100%; display: flex; flex-direction: column;  gap: 25px;}
.contact-item {  display: flex; align-items: flex-start; gap: 20px; padding: 15px; background: var(--white);  border-radius: 15px; transition: var(--transition);  border: 1px solid rgba(0, 86, 150, 0.05);}
.contact-item:hover { transform: translateX(10px);  border-color: var(--hmp-blue);  box-shadow: 0 10px 20px rgba(0, 86, 150, 0.05);}
.contact-icon { width: 55px;  height: 55px;   background: rgba(0, 86, 150, 0.08); color: var(--hmp-blue); display: flex;   align-items: center;   justify-content: center;    border-radius: 12px;  font-size: 1.4rem; flex-shrink: 0; transition: var(--transition);}
.contact-item:hover .contact-icon {  background: var(--hmp-blue); color: var(--white);}
.social-links-wrap { display: flex;   gap: 12px;  margin-top: 10px;}
.social-circle {  width: 45px;   height: 45px;  background: var(--soft-white);  color: var(--hmp-blue);  display: flex;  align-items: center;  justify-content: center;    border-radius: 50%;  text-decoration: none;  transition: var(--transition); font-size: 1.1rem; border: 1px solid rgba(0, 86, 150, 0.05);}
.social-circle:hover {  background: var(--hmp-blue);  color: var(--white);   transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 86, 150, 0.15);}
.contact-form-card {   background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); padding: 45px; border-radius: 20px; border: 1px solid rgba(0, 86, 150, 0.08);  box-shadow: 0 20px 40px rgba(0, 86, 150, 0.06);}
.custom-input,
.hmp-input {    border: 1px solid rgba(0, 86, 150, 0.1);   padding: 14px 18px;  border-radius: 10px;  font-size: 15px;  transition: var(--transition); width: 100%; background-color: #fafbfc;}
.hmp-input { border: none; border-bottom: 1px solid #ddd; padding: 12px 0;   outline: none; background: transparent; color: var(--rich-black);}
.custom-input:focus,
.hmp-input:focus {   outline: none; background-color: var(--white); box-shadow: 0 0 0 4px rgba(139, 195, 74, 0.15);   border-color: var(--hmp-green-light);}
.hmp-input:focus { border-bottom: 1.5px solid var(--hmp-blue); box-shadow: none;}
label { font-weight: 600; color: var(--rich-black);  margin-bottom: 8px; font-size: 14px;}
.icon-box {   width: 60px;  height: 60px;  display: flex;   align-items: center;  justify-content: center;}
.bg-light-blue {   background-color: rgba(0, 86, 150, 0.05);}
.captcha-display {  background-color: var(--hmp-blue);   color: #fff;  padding: 12px 20px;   border-radius: 4px;  font-weight: 600;  font-size: 18px; box-shadow: 0 4px 10px rgba(0, 86, 150, 0.2);}
.captcha-text {  letter-spacing: 2px; }
.hmp-submit-btn {   width: 100%;     background: linear-gradient(135deg, #2E7D32 0%, #1b5e20 100%);color: #fff;   border: none;    padding: 14px 28px;     font-weight: 700;    border-radius: 25px;    text-transform: uppercase;    letter-spacing: 0.8px;   font-size: 14px;   transition: all 0.3s ease;  margin-top: 10px; box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);  position: relative; overflow: hidden;  z-index: 1;}
.hmp-submit-btn::before { content: ''; position: absolute;  top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #1b5e20 0%, #2E7D32 100%); transition: left 0.3s ease; z-index: -1;}
.hmp-submit-btn:hover::before {  left: 0;}
.hmp-submit-btn:hover {    transform: translateY(-3px);   box-shadow: 0 8px 25px rgba(46, 125, 50, 0.5);}
.hmp-submit-btn * {  position: relative; z-index: 1;}
/* *************************************** CONTACT SECTION & FORMS************************************************* */


/* ****************************************** FOOTER**************************************************************************** */
.footer-section {   background: linear-gradient(135deg, #005696 0%, #0066a1 15%, #0077b3 30%, #1a8fb8 45%, #33a67a 60%, #3fa865 75%, #2E7D32 100%); background-image:  linear-gradient(135deg, #005696 0%, #0066a1 15%, #0077b3 30%, #1a8fb8 45%, #33a67a 60%, #3fa865 75%, #2E7D32 100%), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 100%, 25px 25px;   color: var(--white);    padding: 80px 0 0 0;    border-top: 6px solid #FFD700; box-shadow: 0 -4px 20px rgba(0, 86, 150, 0.3);}
.footer-heading {  font-family: var(--font-premium);  font-weight: 700;  margin-bottom: 25px;  font-size: 1.25rem;  }
.footer-text {  color: rgba(255, 255, 255, 0.7); font-size: 14px;   line-height: 1.8; font-weight: 500;}
.footer-link {  color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: all 0.3s ease; display: inline-block;font-size: 14px;line-height: 1.6; font-weight: 500;}
.footer-link:hover {  color: #FFD700; text-decoration: underline; transform: translateX(3px);}
.footer-contact p { color: rgba(255, 255, 255, 0.8); font-weight: 500;}
.footer-contact .text-white-50 { color: rgba(255, 255, 255, 0.6) !important; font-weight: 500;}
.footer-links { list-style: none;   padding: 0;}
.footer-links li {  margin-bottom: 12px; }
.footer-links a {      color: rgba(255, 255, 255, 0.7);   text-decoration: none;   font-size: 15px;  transition: var(--transition);  display: inline-block; font-weight: 500;}
.footer-links i {   font-size: 14px;     margin-right: 8px;}
.footer-links a:hover {  color: var(--white);   padding-left: 10px;}
.footer-contact {  color: rgba(255, 255, 255, 0.8); font-weight: 500;}
.footer-contact-item { display: flex;  margin-bottom: 20px;}
.footer-icon { font-size: 1.2rem;  margin-right: 15px;   margin-top: 3px;}
.footer-social { display: flex;gap: 10px;}
.footer-social a {   width: 40px;  height: 40px; background: rgba(255, 255, 255, 0.1);   color: var(--white);  display: flex;  align-items: center;  justify-content: center;  border-radius: 50%;  transition: var(--transition);    text-decoration: none;}
.footer-social a:hover {   background: var(--hmp-green-light);  transform: translateY(-5px);}
.copyright-bar {   border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 25px 0; margin-top: 60px;}
.footer-bottom-links a {    color: rgba(255, 255, 255, 0.5);  text-decoration: none;  transition: 0.3s;  margin-left: 20px;}
.footer-bottom-links a:hover {   color: var(--white); }
.footer-logo {height: 80px; margin-bottom: 20px; border-radius: 12px;}
/************************************************ FOOTER********************************************************************* */ 


/* **********************************************SUBPAGE BANNER***************************************************************** */
.page-banner { position: relative;  min-height: 350px; background: url('../img/subpage/subpage\ \(2\).jpg') no-repeat center center;   background-size: cover;  padding-top: 80px; margin-top: 0; display: flex; overflow: hidden;}
.banner-overlay { position: absolute;  top: 0;  left: 0;   width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 51, 102, 0.7), rgba(46, 125, 50, 0.5));   z-index: 1;}
.banner-container { position: relative; z-index: 5;}
.page-title { font-size: 3.5rem; font-weight: 800; color: #ffffff !important; text-transform: uppercase; letter-spacing: 2px;  margin-bottom: 15px; text-shadow: 2px 2px 10px rgba(0,0,0,0.3);}
.breadcrumb { background: transparent; padding: 0; margin: 0;}
.breadcrumb-item a { color: rgba(255, 255, 255, 0.8);  text-decoration: none; transition: 0.3s;}
.breadcrumb-item a:hover { color: #a5d6a7;}
.breadcrumb-item.active {  color: #a5d6a7 !important; font-weight: 600;}
.breadcrumb-item + .breadcrumb-item::before {   color: rgba(255, 255, 255, 0.5); content: "|"; padding: 0 10px;}
/* ***********************************************SUBPAGE BANNER********************************************************************* */

/* Blog Detail Styles */
.blog-main-img { max-height: 400px; object-fit: cover; width: 100%; }
.sidebar-sticky { top: 100px; }
.recent-post-img { object-fit: cover; }
.sidebar-product-img { max-height: 180px; }
/* Contact Page */
.contact-intro-text { max-width: 600px; }
.map-iframe { border: 0; }

/* Certificate Icons */
.cert-icon { font-size: 4rem; }
/* Testimonial Avatar */
.testi-avatar { width: 50px; height: 50px; }
/* Related Product Images */
.related-product-img { height: 250px; object-fit: cover; width: 100%; }
/* Modal Styles */
.modal-rounded { border-radius: 20px; overflow: hidden; }
.modal-header-gradient { background: linear-gradient(135deg, #005696 0%, #0066a1 15%, #0077b3 30%, #1a8fb8 45%, #33a67a 60%, #3fa865 75%, #2E7D32 100%); box-shadow: 0 4px 15px rgba(0, 86, 150, 0.3); }
.modal-logo { height: 45px; border-radius: 8px; margin-bottom: 10px; }
.modal-subtitle { font-size: 11px; }
.modal-close-btn { font-size: 12px; }
.modal-input { padding: 8px 12px; font-size: 14px; }
.modal-textarea { padding: 8px 12px; font-size: 14px; }
.modal-captcha-bg { background-color: #005696; }
.modal-captcha-text { font-size: 13px; }
.modal-captcha-icon { font-size: 14px; }
.modal-submit-btn { padding: 10px; font-size: 13px; }
.commitment-heading { font-size: 1.5rem; }
.commitment-text { font-size: 1.1rem; line-height: 1.8; }

/* ************************************************ WHATSAPP, CALL & SCROLL TO TOP ****************************************************** */
.fixed-actions {  position: fixed;   bottom: 30px;   right: 30px;   display: flex;   flex-direction: column;  gap: 12px;  z-index: 9999;}
.call-fixed {  width: 50px;    height: 50px;  background-color: #007bff;   color: white;   border-radius: 50%;    display: flex;  align-items: center;   justify-content: center;    font-size: 22px;   text-decoration: none;   transition: 0.3s ease; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);}
.call-fixed:hover {   transform: scale(1.1);  color: white; background-color: #0056b3; box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6);}
.whatsapp-fixed {  width: 50px;    height: 50px;  background-color: #25D366;   color: white;   border-radius: 50%;    display: flex;  align-items: center;   justify-content: center;    font-size: 26px;   text-decoration: none;   transition: 0.3s ease; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);}
.whatsapp-fixed:hover {   transform: scale(1.1);  color: white; background-color: #128C7E; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);}
.scroll-top-fixed {  width: 45px;   height: 45px;    background-color: var(--hmp-blue) !important;      color: #ffffff !important;  border: none; border-radius: 50%; display: none;  align-items: center;  justify-content: center;  cursor: pointer;  transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 86, 150, 0.4); font-size: 18px;}
.scroll-top-fixed:hover {   background-color: var(--hmp-green-dark) !important;       color: #ffffff !important;   transform: translateY(-5px); box-shadow: 0 6px 20px rgba(46, 125, 50, 0.6);}
.scroll-top-fixed i { display: block;}
/* ************************************************** WHATSAPP, CALL & SCROLL TO TOP ********************************************************* */

/* ************************************************* ADDITIONAL PAGE STYLES************************************************ */
/* Product Page Specific */
.border-green-top {   border-top: 6px solid var(--hmp-green-dark);}
.border-teal-top {   border-top: 6px solid var(--hmp-green-dark);}
.border-blue-top { border-top: 6px solid var(--hmp-blue);}
.border-blue {  border-color: var(--hmp-blue) !important; }
.product-gallery { overflow: hidden; width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
.main-product-img { border-radius: 16px; max-width: 350px; height: auto; object-fit: contain; display: block; }
/* Blog Detail Page */
.widget-title { font-weight: 700;    color: #003366; border-bottom: 2px solid #2e7d32;  display: inline-block;  padding-bottom: 5px;}
.clinical-quote {  font-size: 1.15rem; font-style: italic; color: #003366; background-color: #f9fbf9;}
.small-title { font-size: 0.9rem; line-height: 1.4; display: block;  transition: 0.3s;}
.small-title:hover {color: #2e7d32 !important;}
/* Pagination */
.pagination .page-link { color: #003366;   border: none; margin: 0 5px; border-radius: 5px;}
.pagination .page-item.active .page-link { background-color: #2e7d32;  color: #fff;}
/* Text Color Utilities */
.text-blue {  color: var(--hmp-blue); }
.text-green-dark {  color: var(--hmp-blue); }
.text-white-50 { color: var(--white) !important;}
/* ************************************************* ADDITIONAL PAGE STYLES************************************************ */



/* ****************************************************RESPONSIVE BREAKPOINTS*********************************************** */
@media (min-width: 1200px) {
h1 {   font-size: 2.5rem; }
h2 {  font-size: 2.5rem; }}
/* p {    font-size: 1.1rem;  }} */

@media (max-width: 1199px) {
.section-padding { padding: 70px 0; }
h1 {   font-size: 2.5rem; }
h2 {  font-size: 2.5rem; }
.nav-link {  padding: 10px 15px !important; }
.main-img-box img {    height: 400px; }
.secondary-img-box {   width: 200px; }
.product-card-premium {  padding: 25px; }
.product-img-wrap {   height: 180px;  } .main-banner,  .hero-full-img {  height: 75vh;  }}

@media (max-width: 991px) {
:root { --nav-height: 65px; }
.container { padding-left: 15px !important; padding-right: 15px !important; }
.section-padding {  padding: 60px 0; }
.brand-text {  font-size: 20px; }
.brand-text span {  font-size: 11px; }
body { font-size: 14px; }
h1 {    font-size: 1.75rem; }
h2 {  font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
p { font-size: 14px; }
.row > * {  margin-bottom: 20px; }    
/* Navigation */
.navbar-collapse {  background: rgba(0, 86, 150, 0.98);    padding: 20px; border-top: 1px solid rgba(255,255,255,0.1);  margin-top: 10px;}
.nav-link {   padding: 6px 0 !important; color: #ffffff !important;}
.nav-link:hover { color: var(--hmp-green-light) !important; }
.nav-link.active { color: var(--hmp-green-light) !important; }
.dropdown-toggle { color: #ffffff !important; }
.dropdown-toggle:hover { color: var(--hmp-green-light) !important; }
.dropdown-toggle.active { color: var(--hmp-green-light) !important; }
.dropdown-toggle::after { border-top-color: #ffffff !important; }
.dropdown-toggle:hover::after,
.dropdown-toggle.active::after { border-top-color: var(--hmp-green-light) !important; }
.navbar-nav {   align-items: flex-start !important; text-align: left !important;}
.nav-item {  width: 100%; margin-bottom: 5px;}
.dropdown-menu { box-shadow: none !important; border: none !important; padding-left: 15px;}
.nav-btn-primary { margin-top: 15px;width: 100%;  text-align: center;}    
/* Banner */
.main-banner, 
.hero-full-img {  height: 70vh;  min-height: 450px;}
.hero-overlay { background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.6) 100%);}
.carousel-caption h1 { font-size: 2.5rem !important;}
.custom-nav {  width: 45px; }    
 /* About Section */
.about-image-wrapper {   margin-bottom: 80px;  padding-right: 20px; max-width: 500px; margin-left: auto; margin-right: auto;}    
.exp-badge {  left: -10px;  padding: 15px;    min-width: 120px; }    
.exp-badge h2 {   font-size: 2rem; color: var(--white) !important;}    
.exp-badge span,
.exp-badge p { color: var(--white) !important;}    
/* Products */
.product-grid [class*="col-"] {   flex: 0 0 50% !important; max-width: 50% !important; margin-bottom: 30px; }    
.product-content, 
.product-details,
.product-info {  text-align: center !important;    }
.product-content h1,
.product-content h2,
.product-content h3,
.product-content p,
.product-content ul {  text-align: center !important;}
.product-content ul {list-style-position: inside;}    
/* Blog */
.blog-img-wrapper,
.blog-img-box {  height: 200px; }    
.blog-grid [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important;margin-bottom: 30px;}    
/* Testimonials */
.testi-card {    padding: 30px 20px; }
.testi-card p {  font-size: 15px; }    
/* Contact */
.contact-form-card {  padding: 20px 15px;  margin-top: 40px;}
.contact-info-wrapper {  text-align: center;  align-items: center; gap: 15px !important;}
.contact-item {  flex-direction: column;  align-items: center; text-align: center;  width: 100%;  max-width: 100%; padding: 15px 10px; gap: 10px;}
.contact-icon { width: 45px; height: 45px; font-size: 1.1rem; }
.contact-item h5 { font-size: 0.95rem !important; margin-bottom: 5px; }
.contact-item p, .contact-item a { font-size: 0.85rem !important; line-height: 1.4; }
.btn-universal { width: 100% !important; padding: 10px 20px !important; font-size: 12px !important; border-radius: 20px !important; margin-top: 10px; }    
/* Footer */
.footer-section {  padding-top: 60px; }   
/* Subpage Banner */
.page-banner { min-height: 280px; margin-top: 0;}
.page-title {   font-size: 2.8rem; }}

@media (max-width: 767px) {
 html, body { overflow-x: hidden !important; width: 100% !important;  max-width: 100% !important; position: relative;}
.container { max-width: 100% !important;  padding-left: 15px !important;  padding-right: 15px !important; overflow-x: hidden; margin: 0 auto !important; width: 100% !important;}
.row { margin-left: 0 !important; margin-right: 0 !important; }
.row > * { padding-left: 0 !important; padding-right: 0 !important; }
* { max-width: 100%; }
section, div, header, footer, main, .carousel, .carousel-inner, .carousel-item {  max-width: 100%;  overflow-x: hidden;}
section { padding-left: 0 !important; padding-right: 0 !important; }
.section-padding { padding: 30px 0; }
.nav-logo { height: 65px !important; }
.brand-text { font-size: 16px; margin-left: 6px; }    
body { font-size: 13px !important; }
h1 { font-size: 1.5rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1.1rem !important; }
h5 { font-size: 1rem !important; }
p { font-size: 13px !important; }
.lead { font-size: 14px !important; }
 .sub-heading { font-size: 11px !important; }
li { font-size: 13px !important; }
a { font-size: 13px !important; }
label { font-size: 13px !important; }
 input, textarea, select { font-size: 13px !important; }
.text-muted, .small { font-size: 12px !important; }    
.nav-link:not(.dropdown-toggle).active {background: none !important;}

/* Compact Buttons */
.btn-universal {  width: 100% !important; padding: 10px 16px !important;  font-size: 12px !important; border-radius: 8px; margin-top: 8px;}
.nav-btn-primary { padding: 6px 16px !important; font-size: 11px !important;}
/* Banner */
.main-banner, .hero-full-img {   height: auto; min-height: 350px;  width: 100%;  overflow: hidden;}
.hero-overlay { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.5)); width: 100%;}
.carousel-caption { padding-top: 30px; align-items: center; text-align: center !important; width: 100%;left: 0; right: 0;}
.carousel-caption h1 {  font-size: 1.4rem !important;   margin-bottom: 10px; line-height: 1.3; padding: 0 10px;}
.carousel-caption p {  font-size: 0.85rem;  padding: 0 10px; line-height: 1.4;}
.carousel-caption .badge { font-size: 9px; padding: 3px 8px !important; }
.carousel-caption .lead { font-size: 0.9rem !important; }
.custom-nav { display: none; }    
/* About Section */
.about-image-wrapper {     margin-bottom: 30px;  padding-right: 10px;  padding-bottom: 20px; max-width: 100%; margin: 0 auto 30px; overflow: hidden;}
.main-img-box img { height: 250px; width: 100%; object-fit: cover; }
.secondary-img-box { width: 100px; bottom: -8px; right: -8px; }
.secondary-img-box img { width: 100%; height: auto; }
.exp-badge {   top: 10px;  left: 0;  padding: 6px 10px;  min-width: 70px; }
.exp-badge h2 {  font-size: 1.2rem; color: var(--white) !important; margin-bottom: 2px;}
.exp-badge span, .exp-badge p {   font-size: 0.55rem;  color: var(--white) !important; line-height: 1.2;}
.about-features { margin-top: 20px; }
.about-features .d-flex {  flex-direction: column;  text-align: center; align-items: center;  margin-bottom: 15px;}
.feat-icon-box {  margin-bottom: 10px;  width: 45px; height: 45px; font-size: 1.1rem;}    
/* Spacing */
.g-4 { gap: 1rem !important; }
.g-5 { gap: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }
/* Typography */
.heading, .sub-heading, .section-head, .hero-content { text-align: center !important;  width: 100%;}
/* Mobile Navbar */
.navbar, .navbar .container { overflow: visible !important; }
.navbar-collapse {  background: rgba(0, 86, 150, 0.98);   padding: 20px;  border-radius: 12px;  margin-top: 12px;  box-shadow: 0 10px 25px rgba(0,0,0,0.08);  border: 1px solid rgba(255,255,255,0.1);}
.nav-link { padding: 10px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 14px; color: #ffffff !important;}
.nav-link:hover { color: var(--hmp-green-light) !important; }
.nav-link.active { color: var(--hmp-green-light) !important; }
.nav-link:last-child { border-bottom: none; }
.dropdown-toggle { color: #ffffff !important; }
.dropdown-toggle:hover { color: var(--hmp-green-light) !important; }
.dropdown-toggle.active { color: var(--hmp-green-light) !important; }
.dropdown-toggle::after { border-top-color: #ffffff !important; }
.dropdown-toggle:hover::after,
.dropdown-toggle.active::after { border-top-color: var(--hmp-green-light) !important; }    
/* Dropdown on mobile */
.dropdown-menu { position: static !important;  transform: none !important;   border: none !important;  box-shadow: none !important; background: transparent !important; margin: 8px 0 8px 15px; padding: 10px 0;}
.dropdown-item { padding: 8px 15px; font-size: 13px; white-space: normal; background: transparent !important; color: rgba(255,255,255,0.9) !important;}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active { background: transparent !important; color: var(--hmp-green-light) !important;}
/* Products */
.product-grid [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
.product-img-wrap { height: 200px; }
.product-card-premium { padding: 20px; }
.product-card-premium h3, .product-card-premium h5 { font-size: 0.95rem; margin-bottom: 8px; }
.product-card-premium p { font-size: 0.8rem; margin-bottom: 15px; line-height: 1.5; }    
.featured-blog-card {  flex-direction: column !important;  overflow: hidden !important;  max-width: 100% !important;  margin: 0 !important;  padding: 0 !important; }
.featured-blog-card .col-md-6 {flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;  padding: 0 !important; margin: 0 !important; }
.featured-img {   width: 100% !important;   min-height: 250px !important;  max-width: 100% !important; border-radius: 1.5rem 1.5rem 0 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important;  flex: 0 0 100% !important;}
.featured-img-full { width: 100% !important; max-width: 100% !important; border-radius: 1.5rem 1.5rem 0 0 !important; object-fit: cover !important;  display: block !important;}
.featured-content {  width: 100% !important;  max-width: 100% !important; padding: 20px 15px !important;  flex: 0 0 100% !important;}
.blog-card-v2 {  max-width: 100% !important; overflow: hidden !important; margin: 0 !important;}
.blog-card-v2 img { width: 100% !important; max-width: 100% !important;display: block !important;}    
.bg-light-alt .container,
.bg-light-alt .row,
.bg-light-alt [class*="col-"] { max-width: 100% !important; overflow-x: hidden !important; padding-left: 15px !important; padding-right: 15px !important; }
.bg-light-alt .row.mb-5 {  margin-left: 0 !important; margin-right: 0 !important;}    
section .row .col-lg-6 { text-align: center !important;}
section .row .col-lg-6 h1,
section .row .col-lg-6 h2,
section .row .col-lg-6 h3,
section .row .col-lg-6 h4,
section .row .col-lg-6 p,
section .row .col-lg-6 span,
section .row .col-lg-6 ul {  text-align: center !important;}
section .row .col-lg-6 ul { list-style-position: inside;padding-left: 0;}
section .row .col-lg-6 .d-flex {justify-content: center !important;}    
/* Blog */
.blog-img-wrapper, .blog-img-box { height: 200px; }
.blog-grid [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
.blog-content { padding: 16px; }
.blog-content h4 { font-size: 1.05rem; margin-bottom: 8px; }
.blog-content p { font-size: 0.85rem; margin-bottom: 12px; }
.blog-meta { font-size: 0.75rem; margin-bottom: 10px; }    
/* Testimonials */
.testi-card { text-align: center; padding: 20px 16px; }
.testi-card p { font-size: 0.9rem; line-height: 1.5; }
.testi-user { flex-direction: column; gap: 8px; }
.testi-card::before { right: 50%; transform: translateX(50%); top: 8px; font-size: 1.5rem; }    
/* Contact */
.contact-form-card { padding: 24px 16px; border-radius: 12px; }
.custom-input, .hmp-input { padding: 10px 12px; font-size: 15px; }
.social-links-wrap { justify-content: center; }
 .contact-icon { width: 45px; height: 45px; font-size: 1.1rem; }
/* Footer */
.footer-section { padding: 50px 0 0 0; }
.footer-brand { text-align: left; }
.footer-brand img { margin-left: 0; }
.footer-heading { margin-top: 25px; font-size: 1.1rem; text-align: left; }
.footer-text { font-size: 13px; text-align: left; }
.footer-links { text-align: left; }
.footer-links li { text-align: left; }
.footer-social { justify-content: flex-start; margin-bottom: 20px; }
.footer-contact { text-align: left; }
.footer-contact-item { flex-direction: row; align-items: flex-start; text-align: left; }
.footer-contact .d-flex { flex-direction: row; align-items: flex-start; text-align: left; }
.footer-icon { margin-right: 15px; margin-bottom: 0; }
.footer-links a:hover { padding-left: 10px; }
.footer-links a { font-size: 14px; }
.footer-bottom-links { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.footer-bottom-links a { margin: 0; font-size: 12px; }
.footer-logo { height: 65px !important; margin-bottom: 15px; }
.footer-brand img { height: 65px !important; width: auto; }
/* Footer text colors */
.footer-text, .footer-contact p, .footer-contact span, .text-white-50 {   color: rgba(255, 255, 255, 0.85) !important; }
.footer-links a { color: rgba(255, 255, 255, 0.8) !important; }
.footer-links a:hover { color: var(--white) !important; }
.copyright-bar { padding: 20px 0; margin-top: 40px; }
.copyright-bar .row { text-align: left; }
.copyright-bar .col-12 { text-align: left !important; }
/* WhatsApp & Call */
.fixed-actions { bottom: 20px; right: 20px; gap: 12px; }
.call-fixed { width: 60px !important; height: 60px !important; font-size: 28px !important; }
.whatsapp-fixed { width: 65px !important; height: 65px !important; font-size: 36px !important; }
.scroll-top-fixed { width: 52px; height: 52px; font-size: 22px; }
/* Subpage Banner */
.page-banner { min-height: 200px; padding-top: 50px; }
.page-title { font-size: 1.8rem; margin-bottom: 10px; }
.breadcrumb-item { font-size: 0.8rem; }
/* Blog Detail */
.article-header h1 { font-size: 1.6rem; }
.article-header .d-flex { flex-direction: column; text-align: center; }
.article-header .text-start { text-align: center !important; margin-top: 8px; }.article-header img { margin-right: 0 !important; }    
/* Why Choose Us */
.choose-content-box { padding: 20px; }
.choose-list .list-item { margin-bottom: 12px; }
.choose-list .list-item i { font-size: 1rem; }
.commitment-box { padding: 24px; }
.commitment-box h3 { font-size: 1.2rem !important; }}

@media (max-width: 575px) {
html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; position: relative; }
.container { max-width: 100% !important; padding: 0 15px; overflow-x: hidden; margin: 0 auto; }
* { max-width: 100%; }
section, div, header, footer, main, .carousel, .carousel-inner, .carousel-item { max-width: 100%; overflow-x: hidden; }
.section-padding { padding: 25px 0; }
.top-bar { display: none; }
.brand-text { font-size: 14px; }
.brand-text span { display: none; }
body { font-size: 13px !important; }
h1 { font-size: 1.3rem !important; }
h2 { font-size: 1.3rem !important; }
h3 { font-size: 1.15rem !important; }
h4 { font-size: 1rem !important; }
h5 { font-size: 0.95rem !important; }
p { font-size: 13px !important; line-height: 1.6; }
.lead { font-size: 13px !important; }
.breadcrumb { font-size: 11px; }
.sub-heading { font-size: 11px !important; }
li { font-size: 13px !important; }
a { font-size: 13px !important; }
label { font-size: 13px !important; }
input, textarea, select { font-size: 13px !important; }
.btn-universal { padding: 9px 18px !important; font-size: 12px !important; border-radius: 20px !important; }
.nav-btn-primary { padding: 8px 18px !important; font-size: 11px !important; border-radius: 20px !important; }
/* Banner */
.main-banner, .hero-full-img { min-height: 320px; }
.carousel-caption { padding-top: 25px; }
.carousel-caption h1 { font-size: 1.2rem !important; line-height: 1.2; }
.carousel-caption p { font-size: 0.8rem; line-height: 1.3; }
.carousel-caption .badge { font-size: 8px; padding: 3px 7px !important; }
.carousel-caption .lead { font-size: 0.85rem !important; }
/* About */
.about-image-wrapper { margin-bottom: 25px; padding-bottom: 15px; }
.main-img-box img { height: 220px; }
.secondary-img-box { display: none; }
.exp-badge { position: relative; top: 0; left: 0; margin-bottom: 12px; display: inline-block; padding: 5px 8px; min-width: 65px; }
.exp-badge h2 { font-size: 1.1rem; color: var(--white) !important; margin-bottom: 2px; }
.exp-badge span, .exp-badge p { font-size: 0.5rem; color: var(--white) !important; line-height: 1.1; }
/* Products */
.product-card-premium { padding: 16px; }
.product-img-wrap { height: 180px; margin-bottom: 15px; }
.product-card-premium h3, .product-card-premium h5 { font-size: 0.9rem; margin-bottom: 6px; }
.product-card-premium p { font-size: 0.75rem; margin-bottom: 12px; line-height: 1.4; }
.heading { font-size: 1.5rem !important; }
.sub-heading { font-size: 11px; letter-spacing: 1px; }
    /* Blog */
.blog-img-wrapper, .blog-img-box { height: 180px; }
.blog-content { padding: 14px; }
.blog-content h4 { font-size: 0.95rem; margin-bottom: 6px; }
.blog-content p { font-size: 0.8rem; margin-bottom: 10px; }
.blog-meta { font-size: 0.7rem; }
.blog-category { font-size: 9px; padding: 4px 12px; }
/* Testimonials */
.testi-card { padding: 16px 12px; }
.testi-card p { font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px; }
.testi-user img { width: 45px !important; height: 45px; }
.testi-user h5 { font-size: 14px; }
.testi-user span { font-size: 11px; }
.testi-card::before { font-size: 1.3rem; }
.contact-icon { width: 40px; height: 40px; font-size: 1rem; }
.contact-form-card { padding: 20px 14px; }
.hmp-submit-btn { padding: 10px; font-size: 12px; }
.footer-section { padding: 40px 0 0 0; }
.footer-heading { font-size: 1rem; margin-top: 20px; text-align: left; }
.footer-text { font-size: 12px; line-height: 1.6; text-align: left; }
.footer-links { text-align: left; }
.footer-links a { font-size: 13px; }
.footer-social { justify-content: flex-start; }
.footer-social a { width: 35px; height: 35px; font-size: 14px; }
.footer-contact { text-align: left; }
.footer-contact .d-flex { flex-direction: row; align-items: flex-start; text-align: left; }
.footer-icon { margin-right: 12px; margin-bottom: 0; }
.footer-logo, .footer-brand img { height: 65px !important; }
.footer-brand img { width: auto; }
.footer-text, .footer-contact p, .footer-contact span, .text-white-50 { color: rgba(255, 255, 255, 0.85) !important; }

.footer-links a { color: rgba(255, 255, 255, 0.8) !important; }
.footer-links a:hover { color: var(--white) !important; }
.copyright-bar { padding: 15px 0; margin-top: 30px; }
.copyright-bar p, .footer-bottom-links a { font-size: 11px; text-align: center; }
.copyright-bar .col-12 { text-align: left !important; }
.fixed-actions { bottom: 15px; right: 15px; gap: 10px; }
.whatsapp-fixed { width: 62px !important; height: 62px !important; font-size: 34px !important; }
.scroll-top-fixed { width: 50px; height: 50px; }
.scroll-top-fixed i { font-size: 22px; }
.page-banner { min-height: 180px; padding-top: 40px; }
.page-title { font-size: 1.5rem; }    
.choose-content-box { padding: 16px; }
.choose-list .list-item { margin-bottom: 10px; }
.choose-list .list-item i { font-size: 0.9rem; margin-right: 10px; }
.choose-list .list-item p { font-size: 0.85rem; }
.commitment-box { padding: 20px; }
.commitment-box h3 { font-size: 1.1rem !important; margin-bottom: 10px; }
.commitment-box p { font-size: 0.85rem }}

@media (max-width: 400px) {
html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; }
.container, section, div, header, footer, main { max-width: 100%; overflow-x: hidden; }    
.section-padding { padding: 25px 0; }
body { font-size: 13px !important; }
h1 { font-size: 1.3rem !important; }
h2 { font-size: 1.3rem !important; }
h3 { font-size: 1.15rem !important; }
h4 { font-size: 1rem !important; }
p { font-size: 13px !important; }
li, a, label { font-size: 13px !important; }
.main-banner, .hero-full-img { min-height: 380px; }
.carousel-caption h1 { font-size: 1.4rem !important; }
.carousel-caption p { font-size: 13px; }    
.product-card-premium { padding: 14px; }
.product-img-wrap { height: 160px; }
.product-card-premium h3, .product-card-premium h5 { font-size: 1rem; }
.product-card-premium p { font-size: 13px; line-height: 1.5; }    
.btn-universal { padding: 9px 18px !important; font-size: 12px !important; border-radius: 20px !important; }
.heading { font-size: 1.5rem !important; }
.sub-heading { font-size: 11px; }    
.blog-img-wrapper, .blog-img-box { height: 160px; }
.blog-content { padding: 12px; }
.blog-content h4 { font-size: 1rem; }
.blog-content p { font-size: 13px; }    
.testi-card { padding: 14px 10px; }
.testi-card p { font-size: 13px; }    
.contact-form-card { padding: 16px 12px; }
/* WhatsApp Icon */
.whatsapp-fixed { width: 65px !important; height: 65px !important; font-size: 36px !important; }
.scroll-top-fixed { width: 52px; height: 52px; font-size: 24px; }    
.footer-section { padding: 35px 0 0 0; }
.footer-logo, .footer-brand img { height: 65px !important; width: auto; }
.footer-heading, .footer-text, .footer-links, .footer-contact, .copyright-bar { text-align: left; }    
.footer-text, .footer-contact p, .footer-contact span, .text-white-50 { color: rgba(255, 255, 255, 0.85) !important; }

.footer-links a { color: rgba(255, 255, 255, 0.8) !important; }
.footer-links a:hover { color: var(--white) !important; }  
.footer-social { justify-content: flex-start; }
.footer-contact .d-flex { flex-direction: row; align-items: flex-start; }
.footer-icon { margin-right: 10px; margin-bottom: 0; }
.copyright-bar .col-12 { text-align: left !important; }    
.whatsapp-fixed { width: 60px !important; height: 60px !important; font-size: 32px !important; }
.scroll-top-fixed { width: 50px; height: 50px; }}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body {  -webkit-font-smoothing: antialiased; }}
@media print {
.navbar,
.footer-section,
.fixed-actions,
.scroll-top-fixed,
.whatsapp-fixed {display: none !important;}    
body { font-size: 12pt; line-height: 1.5;}    
h1, h2, h3 {   page-break-after: avoid; } 
img { max-width: 100% !important;   }}
a:focus,
input:focus,
textarea:focus,
select:focus {  outline: 3px solid var(--hmp-green-light); outline-offset: 2px;}
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible {
 outline: none !important; box-shadow: none !important;border: none !important;}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;  }}
@media (prefers-contrast: high) {:root { --hmp-blue: #003d7a; --hmp-green-dark: #1b5e20;}
.btn-universal,
.nav-btn-primary { border: 2px solid currentColor;}}

/* ****************************************************RESPONSIVE BREAKPOINTS*********************************************** */



/* ===== STICKY SOCIAL BAR ===== */
.sticky-social-bar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sticky-social-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #ffffff;
    font-size: 22px;
    text-decoration: none;
    transition: all 0.3s ease;
    transform: none;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.sticky-social-bar a i {
    color: #ffffff !important;
    display: inline-block;
    line-height: 1;
    font-size: 1.2rem;
}
.sticky-social-bar a::after {
    content: attr(title);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px 0 0 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.sticky-social-bar a:hover::after { opacity: 1; }
.sticky-social-bar a:hover { transform: none; box-shadow: -4px 0 18px rgba(0,0,0,0.2); }
/* Brand colors */
.ss-facebook  { background: #3b5998; border-right: 4px solid #2d4373; }
.ss-twitter   { background: #000000; border-right: 4px solid #222222; }
.ss-linkedin  { background: #0077b5; border-right: 4px solid #00558b; }
.ss-instagram { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); border-right: 4px solid #bc1888; }
.ss-whatsapp  { background: #25D366; border-right: 4px solid #128C7E; }
.ss-call      { background: #005696; border-right: 4px solid #003d6e; }
.scroll-top-fixed.show { display: flex; }

/* Mobile adjustments */
@media (max-width: 767px) {
    .sticky-social-bar a { width: 45px; height: 45px; font-size: 16px; }
}

/* Mobile overflow guard */
@media (max-width: 991px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .container,
    .container-fluid,
    section,
    main,
    header,
    footer,
    .row,
    [class*="col-"] {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .sticky-social-bar {
        display: none !important;
    }

    .fixed-actions {
        right: 10px !important;
    }
}
/* ===== STICKY SOCIAL BAR ===== */