/******************************************
    File Name: colors.css
/****************************************** */

.customwidget li i,
.navbar-nav span {
    color: #db00ce !important;
}

.lead strong,
.icon-wrapper:hover a,
a:hover,
a:focus {
    color: #2750ff
}


/**************************************
GRADIENTS 
**************************************/

.grd1-trans {
    background: rgb(219, 0, 206);
    background: -moz-linear-gradient(top, rgba(219, 0, 206, 0.6) 0%, rgba(39, 80, 255, 0.6) 100%);
    background: -webkit-linear-gradient(top, rgba(219, 0, 206, 0.6) 0%, rgba(39, 80, 255, 0.6) 100%);
    background: linear-gradient(to bottom, rgba(219, 0, 206, 0.6) 0%, rgba(39, 80, 255, 0.6) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db00ce', endColorstr='#2750ff', GradientType=0);
}

.icon_wrap:hover,
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover,
.icon-wrapper:hover i,
.grd1 {
    color: #ffffff;
    background: #db00ce;
    background: -moz-linear-gradient(left, #db00ce 0%, #2750ff 100%);
    background: -webkit-linear-gradient(left, #db00ce 0%, #2750ff 100%);
    background: linear-gradient(to right, #db00ce 0%, #2750ff 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db00ce', endColorstr='#2750ff', GradientType=1);
}

.icon_wrap,
.dmtop:hover,
.cac:hover,
.features-right li:hover i,
.features-left li:hover i,
.nav-pills > li:hover > a,
.nav-pills > li:focus > a,
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover,
.divider-bar,
.owl-next:hover i,
.owl-prev:hover i,
.icon-wrapper:hover i:hover,
.grd1:hover,
.grd1:focus {
    background-position: 100px;
    color: #ffffff;
    background: #2750ff;
    background: -moz-linear-gradient(left, #2750ff 0%, #db00ce 100%);
    background: -webkit-linear-gradient(left, #2750ff 0%, #db00ce 100%);
    background: linear-gradient(to right, #2750ff 0%, #db00ce 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2750ff', endColorstr='#db00ce', GradientType=1);
}


/* --- STEP-BY-STEP NAV RECOLOR --- */

/* 1. Change the main Blue Bar to Red */
.header-bottom, 
.header-bottom .container,
.navbar-default {
    background-color: #d61b46 !important;
    border: none !important;
}

/* 2. Change the Green "Home" box to a darker Red */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover {
    background-color: #a81537 !important; /* A slightly darker red for contrast */
    color: #ffffff !important;
}

/* 3. Change Menu Hover color (when you point your mouse) */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #a81537 !important;
    color: #ffffff !important;
}


/* 5. Fix any lingering Blue text in the menu */
.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
}

/* --- STATIC BOX COLOR: TEAL CONTRAST --- */

/* 1. This sets the 'Home' box to a Deep Teal in its normal state */
.navbar-nav > li.active,
.navbar-nav > li.active > a,
.navbar-default .navbar-nav > .active > a {
    background-color: #008080 !important; /* Deep Teal - looks great with red */
    background: #008080 !important;
    color: #ffffff !important;
    border-radius: 2px;
}

/* 2. Remove all green from the rest of the buttons */
.navbar-nav > li, 
.navbar-default .navbar-nav > li {
    background-color: transparent !important;
}


/* 3. Hover State: Change the hover to a slightly darker Teal */
.navbar-nav > li > a:hover, 
.navbar-nav > li:hover > a {
    background-color: #006666 !important; 
    color: #ffffff !important;
    transition: background 0.3s ease;
}

/* 4. Ensure the main Nav Bar stays your Red color */
.header-bottom, .navbar-default {
    background-color: #d61b46 !important;
}
.header-bottom nav.main-menu ul.nav.navbar-nav > li a:hover, .header-bottom nav.main-menu ul.nav.navbar-nav > li a:focus, .header-bottom nav.main-menu ul.nav.navbar-nav > li a.active {
    color: #fff;
    background: #008080;
    box-shadow: 5px 5px 0 0px #fff;
}


/* --- WHOLE BOX HOVER MOVEMENT --- */

/* 1. Target the 3 cards at the bottom */
.col-md-4 > div {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; /* Smooth professional motion */
    cursor: pointer;
}

.col-md-4 > div:hover {
    transform: translateY(-15px) !important; /* Lifts the entire white box up */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important; /* Adds a deep shadow for a 3D effect */
    border-color: #0b4091 !important; /* Optional: adds a subtle blue border on hover */
}

/* 2. Make sure the internal elements don't jitter when the box moves */
.col-md-4 > div img, 
.col-md-4 > div h3, 
.col-md-4 > div p, 
.col-md-4 > div a {
    pointer-events: none; /* Helps the hover stay smooth on the whole box */
}

/* 3. Keep the button clickable */
.col-md-4 > div a {
    pointer-events: auto;
}

/* --- FOOTER CUSTOM RED THEME (#d61b46) --- */

/* Aligning Headings with Red Border */
#footer h3 {
    border-left: 3px solid #d61b46 !important;
    padding-left: 15px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Contact Icons Color (Map, Plane, Phone) */
.footer-info p i {
    color: #d61b46 !important;
    width: 20px;
}

/* --- FIXED SOCIAL LINKS: SIDE-BY-SIDE & NO OVERLAP --- */
.social-links-footer {
    display: block !important;
    margin-top: 20px !important;
    clear: both !important;
}

.social-links-footer a {
    display: inline-block !important; /* Forces horizontal row */
    width: 40px !important;           /* Box width for each icon */
    height: 40px !important;          /* Box height for each icon */
    margin-right: 15px !important;    /* Gap between icons to prevent overlap */
    text-align: center !important;
    text-decoration: none !important;
}

.social-links-footer a i {
    color: #d61b46 !important;       /* Brand Red */
    font-size: 26px !important;      /* Size of FB, WA, Insta icons */
    line-height: 40px !important;    /* Centers icon vertically in the box */
    transition: all 0.3s ease;
}

.social-links-footer a:hover i {
    transform: scale(1.2);
    opacity: 0.8;
}

/* --- INNOVATIVE LIST STYLING (WHO, R&D, Patient Care) --- */
.innovative-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.innovative-list li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
}

.innovative-list li i {
    color: #d61b46 !important;
    margin-right: 12px;
    /* CHANGE THIS VALUE TO RESIZE WHO/R&D/PATIENT ICONS */
    font-size: 20px; 
    width: 25px;
    text-align: center;
}

/* Fix for General Alignment */
.padding {
    padding-bottom: 20px;
}

.gmail-container {
    display: block !important;
    width: 100% !important;
    margin-top: 15px !important;
}

.gmail-link {
    display: inline-flex !important;  
    align-items: center !important;   
    text-decoration: none !important;
    white-space: nowrap !important;   
}

.gmail-link i {
    color: #d61b46 !important;        
    font-size: 24px !important;       
    /* --- ADJUST THIS VALUE FOR THE SPACE --- */
    margin-right: 20px !important;    
    display: inline-block !important;
}

.gmail-link span {
    color: #555 !important;           
    font-size: 15px !important;       
    display: inline-block !important;
}

/* --- PRODUCTS BACKGROUND & LAYOUT --- */
.products-section {
    padding: 100px 0;
    background-size: cover;      /* Fills the whole area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: adds a nice scroll effect */
}

.section-header .title {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff; /* White text for background visibility */
}

.section-header .subtitle {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 50px;
}

/* --- WHITE FLOATING CARDS --- */
.product-card {
    background: #ffffff;
    border-radius: 20px;         /* Rounded corners like image */
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    height: 100%;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
}

.card-icon img {
    height: 75px;
    margin-bottom: 20px;
}

.product-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.card-line {
    width: 60px;
    height: 2px;
    background-color: #eee;
    margin: 15px auto;
}

.product-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

/* --- BRAND RED BUTTON (#d61b46) --- */
.view-more-btn {
    background-color: #d61b46;
    color: #ffffff !important;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    display: inline-block;
}

.view-more-btn:hover {
    background-color: #a31435;
}

.products-section {
    padding: 100px 0;
    background-size: cover;         /* This is the most important line */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;               /* Keeps everything contained */
}

/* --- WHY CHOOSE SECTION --- */
.why-choose-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* Light grey background to make cards pop */
    font-family: 'Poppins', sans-serif;
}

.why-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

/* The blue underline seen in your image */
.title-underline {
    width: 350px;
    height: 2px;
    background: linear-gradient(to right, #1c398e, #d61b46);
    margin-bottom: 40px;
}

/* --- FEATURE CARDS --- */
.feature-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-content {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* Space between icon and text */
}

.feature-icon img {
    width: 60px; /* Adjust based on your icon size */
    height: auto;
}

.feature-text h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Match the red/blue title colors from your image */
.feature-card:nth-child(1) h3 { color: #d61b46; } /* Red for Quality */
.feature-card h3 { color: #333; } /* Default */

.feature-text p {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

.why-choose-section {
    padding: 60px 0;
    text-align: center; /* Centers the titles */
}

.feature-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 25px; /* Added more padding for a premium look */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the icon and text horizontally */
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

/* THE IMAGE SIZE FIX */
.feature-icon {
    width: 100%;
    height: 150px; /* Adjust this height to make the image taller/shorter */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.feature-icon img {
    max-width: 140px; /* This forces the icon to be big */
    width: 100%;
    height: auto;
    object-fit: contain;
}

.feature-text h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333; /* You can change this to #d61b46 for red titles */
}

.feature-text p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* Clean, Innovative Clinical Background */
#service {
    background: #f8f9fa; /* Lighter, cleaner professional grey */
    padding: 100px 0;
}

.inner-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Updated Cards */
.serv {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    /* Subtle border instead of heavy red top-bar for a more modern feel */
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.serv:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(214, 27, 70, 0.08);
    border-color: rgba(214, 27, 70, 0.3);
}

/* Icon Styling */
.icon-circle {
    font-size: 40px;
    margin-bottom: 20px;
    background: #fff5f6; /* Very light red tint */
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    transition: 0.3s;
}

.serv:hover .icon-circle {
    background: #d61b46;
    transform: rotateY(360deg);
}

/* Text Styling */
.serv h4 {
    color: #222; /* Darker for readability */
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    transition: 0.3s;
}

.serv:hover h4 {
    color: #d61b46; /* Turns red on hover */
}

.serv p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* Innovative Bottom Accent Line */
.hover-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #d61b46;
    transition: 0.4s;
}

.serv:hover .hover-accent {
    width: 100%;
}

/* ADD THIS TO YOUR EXISTING CSS FOR THE 'SERV' CLASS */

.serv {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    /* Innovative Shadow: Very light and airy */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.serv:hover {
    transform: translateY(-12px);
    /* Brand Red Glow */
    box-shadow: 0 20px 25px -5px rgba(214, 27, 70, 0.1), 0 10px 10px -5px rgba(214, 27, 70, 0.04);
    border-color: #d61b46;
}

.icon-circle {
    font-size: 42px;
    margin-bottom: 25px;
    background: #fdf2f4; /* Very subtle red wash */
    width: 85px;
    height: 85px;
    line-height: 85px;
    border-radius: 20px; /* Modern "Squircle" shape instead of a perfect circle */
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.serv:hover .icon-circle {
    background: #d61b46;
    color: #ffffff;
    border-radius: 50%; /* Shape shifts from square to circle on hover - very innovative */
    box-shadow: 0 0 20px rgba(214, 27, 70, 0.4);
}

/* Unique Lab Section Styling */
.lab-blueprint-box {
    border: 2px dashed #d61b46;
    padding: 60px 40px;
    border-radius: 40px;
    background: #fffafa;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.floating-dna {
    font-size: 90px;
    display: inline-block;
    animation: dna-float 4s ease-in-out infinite;
}

@keyframes dna-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(15deg); }
}

.stats-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.mini-stat {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-bottom: 4px solid #d61b46;
    min-width: 140px;
}

.stat-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #d61b46;
}

.stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
}

.bullet-points {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.point-item {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
}

.point-index {
    background: #fff5f6;
    color: #d61b46;
    font-family: monospace;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #d61b46;
}

.point-text {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

/* 1. Make the Active menu item this specific blue */
.nav.navbar-nav li.active a {
    background-color: #0d319f !important; 
    color: #ffffff !important;
    border-radius: 4px; /* Optional: adds slightly rounded corners */
}

/* 2. Make all buttons blue when you hover over them */
.nav.navbar-nav li a:hover {
    background-color: #0d319f !important;
    color: #ffffff !important;
    transition: 0.3s ease; /* Makes the color change smooth */
}

/* 3. Fix for the 'Home' and other links to ensure they transition nicely */
.nav.navbar-nav li a {
    transition: 0.3s ease;
}

/* Force buttons to be clickable and turn blue on hover */
.hero-buttons {
    position: relative;
    z-index: 999; /* Brings buttons to the very front */
}

.hero-buttons a.btn {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

.hero-buttons a.btn:hover {
    background-color: #0d319f !important;
    border-color: #0d319f !important;
    color: #ffffff !important;
    transition: 0.3s ease;
}