/* ----------------------------------------------------------------------------------------
* FTF Pharma brand overrides for the Labrix template
* Loaded after custom.css
* ---------------------------------------------------------------------------------------- */

:root{
	--primary-color		: #1C2B6B;	/* FTF navy (logo "FTF") */
	--secondary-color	: #BEF1DE;	/* mint panel background */
	--accent-color		: #9FDCEB;	/* light tone of the logo's cyan molecule */
	--text-color		: #4A5770;
	--divider-color		: #1C2B6B1A;
	--ftf-blue			: #0072BC;	/* logo "PHARMA PVT. LTD." blue */
	--ftf-green			: #2E9E4F;	/* logo green molecule */
}

/* Anchored sections clear the sticky header */
[id]{ scroll-margin-top: 110px; }

/* Logo */
.navbar-brand img{ max-height: 52px; width: auto; }
.footer-logo img{ max-width: 210px; }
.sidebar-cta-logo img{ max-width: 190px; }

/* Main menu - slightly tighter so all tabs fit */
.main-menu ul li{ margin: 0 2px; }
.main-menu ul li a{ font-size: 15px; padding: 14px 8px !important; }
.main-menu ul ul{ width: 260px; }
.main-menu ul ul li a{ font-size: 15px; }
.main-menu ul li.active > a{ color: var(--accent-color); }
/* Right-most menus: open third-level flyouts to the left so they stay on screen */
.main-menu #menu > li:nth-last-child(-n+2) > ul{ left: auto; right: 0; }
.main-menu #menu > li:nth-last-child(-n+2) ul ul{ left: auto; right: 100%; }

/* Hero video falls back to an image until the company video is added */
.hero.hero-video{ background: url('../images/hero-bg.jpg') no-repeat center / cover; }
.ftf-global-box{ display: flex; align-items: center; gap: 15px; }
.ftf-global-box .icon-box{
	flex: 0 0 56px; height: 56px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent-color); color: var(--primary-color); font-size: 24px;
}
.ftf-global-box .satisfy-client-content h3{ font-size: 16px; line-height: 1.4em; }

/* Placeholder marker for content still to be supplied */
.ftf-placeholder{
	display: flex; gap: 12px; align-items: flex-start;
	border: 2px dashed #E0A100; background: #FFF8E6; color: #6B5200;
	border-radius: 12px; padding: 14px 18px; margin: 15px 0 25px;
}
.ftf-placeholder i{ font-size: 18px; margin-top: 3px; }
.ftf-placeholder p{ margin: 0; color: #6B5200; font-size: 15px; }
.dark-section .ftf-placeholder p{ color: #6B5200; }

/* Check lists */
.ftf-check-list h3{ font-size: 20px; margin-bottom: 20px; }
.ftf-check-list ul{ list-style: none; padding: 0; margin: 0; }
.ftf-check-list ul li{ position: relative; padding-left: 30px; margin-bottom: 14px; line-height: 1.6em; }
.ftf-check-list ul li:before{
	content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
	position: absolute; left: 0; top: 1px; color: var(--ftf-blue);
}

/* Two-column list inside the dark "Why partner" section */
.what-we-item-list.ftf-two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }

/* Stats */
.ftf-stats-section{ padding: 100px 0; }
.ftf-stat-item{
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 20px; padding: 30px; text-align: center; height: calc(100% - 30px); margin-bottom: 30px;
}
.bg-section .ftf-stat-item{ background: var(--white-color); }
.ftf-stat-item h2{ font-size: 46px; color: var(--primary-color); margin-bottom: 10px; }
.ftf-stat-item p{ margin: 0; }

/* CTA */
.ftf-cta-section, .ftf-cta-section.bg-section.dark-section{ padding: 90px 0; background: linear-gradient(120deg, var(--ftf-blue) 0%, #0A4E8A 100%); margin-bottom: 30px; }
.ftf-cta-section .section-title{ margin-bottom: 0; }
.ftf-cta-btn{ text-align: right; }

/* Timeline */
.ftf-timeline-section{ padding: 100px 0; }
.ftf-timeline{ position: relative; padding-left: 130px; }
.ftf-timeline:before{ content: ''; position: absolute; left: 100px; top: 0; bottom: 0; width: 2px; background: var(--divider-color); }
.ftf-timeline-item{ position: relative; margin-bottom: 40px; }
.ftf-timeline-item:last-child{ margin-bottom: 0; }
.ftf-timeline-year{
	position: absolute; left: -130px; top: 0; width: 80px; text-align: right;
	font-family: var(--accent-font); font-weight: 700; font-size: 22px; color: var(--primary-color);
}
.ftf-timeline-item:before{
	content: ''; position: absolute; left: -36px; top: 8px; width: 14px; height: 14px;
	border-radius: 50%; background: var(--ftf-blue); box-shadow: 0 0 0 5px var(--secondary-color);
}
.ftf-timeline-content{ background: var(--bg-color); border-radius: 16px; padding: 25px 30px; }
.ftf-timeline-content h3{ font-size: 20px; margin-bottom: 10px; }
.ftf-timeline-content p{ margin: 0; }
.ftf-timeline-content .ftf-placeholder{ margin-bottom: 0; }

/* Pillars / cards */
.ftf-pillars-section{ padding: 100px 0; }
.ftf-pillar-item, .ftf-route-card{
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 20px; padding: 35px 30px; height: calc(100% - 30px); margin-bottom: 30px;
}
.ftf-pillar-item .icon-box, .ftf-route-card .icon-box{
	width: 60px; height: 60px; border-radius: 50%; background: var(--secondary-color);
	display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.ftf-pillar-item .icon-box img, .ftf-route-card .icon-box img{ max-width: 30px; }
.ftf-pillar-item h3, .ftf-route-card h3{ font-size: 22px; margin-bottom: 12px; }
.ftf-pillar-item ul{ list-style: none; padding: 0; margin: 15px 0 0; }
.ftf-pillar-item ul li{ position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 15px; }
.ftf-pillar-item ul li:before{ content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ftf-blue); }
.ftf-value-item{ border-top: 4px solid var(--ftf-blue); }
.ftf-route-card .btn-default{ margin-top: 10px; }
.ftf-mt{ margin-top: 60px; }

/* Offices */
.ftf-offices{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 10px; }
.ftf-office{ background: var(--primary-color); border-radius: 20px; padding: 30px; }
.ftf-office h3{ color: var(--accent-color); font-size: 20px; margin-bottom: 10px; }
.ftf-office p{ color: var(--white-color); margin: 0; }
.ftf-office-mini{ list-style: none; padding: 0; margin: 0; }
.ftf-office-mini li{ display: block !important; margin-bottom: 12px; }
.ftf-office-mini li strong{ display: block; }

/* Leadership */
.ftf-leader-card{ text-align: center; background: var(--bg-color); border-radius: 20px; padding: 30px 20px; margin-bottom: 30px; }
.ftf-leader-photo{
	width: 140px; height: 140px; margin: 0 auto 20px; border-radius: 50%;
	background: var(--secondary-color); color: var(--primary-color);
	display: flex; align-items: center; justify-content: center; font-size: 56px;
}
.ftf-leader-card h3{ font-size: 20px; margin-bottom: 5px; }
.ftf-leader-card p{ margin: 0; }
.ftf-org-expertise{ background: var(--primary-color); border-radius: 20px; padding: 40px; }
.ftf-org-expertise > h3{ color: var(--white-color); font-size: 26px; margin-bottom: 25px; }

/* Service pages */
.page-category-list ul li.active a{ color: var(--ftf-blue); font-weight: 700; }
.ftf-dosage-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.ftf-dosage-item{ background: var(--bg-color); border-radius: 16px; padding: 25px; border-left: 0; }
.ftf-dosage-item h3{ font-size: 20px; margin-bottom: 10px; color: var(--primary-color); }
.ftf-dosage-item p{ margin: 0; font-size: 15px; }
.ftf-cert-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; }
.ftf-cert-item{ text-align: center; background: var(--bg-color); border-radius: 16px; padding: 25px 15px; }
.ftf-cert-item i{ font-size: 36px; color: var(--ftf-blue); margin-bottom: 12px; }
.ftf-cert-item h3{ font-size: 18px; margin-bottom: 5px; }
.ftf-cert-item p{ margin: 0; font-size: 14px; }

/* Forms */
.contact-form .form-select{ color: var(--text-color); }
.contact-us-form .section-title p a{ color: var(--accent-color); text-decoration: underline; }
.ftf-apply-box .ftf-file-label{ color: var(--white-color); }
.ftf-file-label{ display: block; margin-bottom: 8px; font-weight: 600; color: var(--primary-color); }
.ftf-apply-box{ grid-template-columns: 1fr; }
.ftf-apply-box .contact-us-form{ width: 100%; }
.ftf-job-meta{ margin-left: auto; margin-right: 30px; font-size: 15px; font-weight: 500; opacity: .75; }
.ftf-job-details{ display: grid; grid-template-columns: 1fr 1fr; gap: 5px 30px; margin-bottom: 10px; }
.ftf-job-details p{ margin: 0; }

/* Footer */
.footer-cin{ font-size: 14px; opacity: .8; }
.footer-contact-list p{ display: flex; gap: 12px; color: var(--white-color); margin-bottom: 12px; }
.footer-contact-list i{ color: var(--accent-color); margin-top: 5px; }
.footer-contact-list a{ color: var(--white-color); }
.footer-office-list li{ color: var(--white-color); }
.footer-office-list li strong{ display: block; color: var(--accent-color); font-weight: 600; }

@media only screen and (max-width: 1199px){
	.main-menu ul li a{ font-size: 14px; padding: 14px 6px !important; }
}

@media only screen and (max-width: 991px){
	.navbar-brand img{ max-height: 42px; }
	.what-we-item-list.ftf-two-col{ grid-template-columns: 1fr; }
	.ftf-cta-btn{ text-align: left; margin-top: 30px; }
	.ftf-offices, .ftf-cert-grid{ grid-template-columns: 1fr; }
	.ftf-stats-section, .ftf-pillars-section, .ftf-timeline-section{ padding: 50px 0; }
	.ftf-cta-section{ padding: 50px 0; }
}

@media only screen and (max-width: 767px){
	.ftf-dosage-grid, .ftf-job-details{ grid-template-columns: 1fr; }
	.ftf-timeline{ padding-left: 30px; }
	.ftf-timeline:before{ left: 6px; }
	.ftf-timeline-year{ position: static; width: auto; text-align: left; margin-bottom: 8px; }
	.ftf-timeline-item:before{ left: -30px; }
	.ftf-job-meta{ display: block; margin: 5px 0 0; }
}

/* Preloader - FTF molecule mark instead of the template atom */
#loading-icon{ max-width: none; width: 70px; height: 70px; }
#loading-icon img{ width: 70px; height: 70px; padding: 12px; background: var(--white-color); border-radius: 50%; display: block; object-fit: contain; max-width: none; }


/* Home: keep the Quality & Compliance and Capabilities panels visually separate */
.our-services.bg-section{ background-color: #DDF1F8; margin-bottom: 30px; }	/* soft tint of the logo cyan, so it doesn't repeat the mint Quality & Compliance panel */

/* Mint accent on dark backgrounds (header, hero, Why Partner, CTA); mint panels keep the cyan so buttons stay visible */
.main-header .btn-default.btn-highlighted,
.dark-section .btn-default.btn-highlighted,
.what-we-do .what-we-item .icon-box{ background-color: var(--secondary-color); }

/* Dropdowns: keep items aligned on hover (template nudges the hovered item 3px right)
   and keep the menu labels' own capitalisation ("Life at FTF Pharma", "Beyond the Workplace") */
.main-menu ul ul li a,
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{ padding: 8px 20px !important; text-transform: none; }
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{ background-color: rgba(28, 43, 107, 0.08); }
.main-menu ul ul li.submenu > a:after{ margin-left: 10px; }

/* Flyout (3rd level) menus: align first item with the parent item, leave an 8px gap,
   and bridge the gap so the menu stays open while the mouse crosses it */
.main-menu ul ul ul{ top: -1px; left: calc(100% + 8px); }
.main-menu ul ul ul:before{ content: ''; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; }
.main-menu #menu > li:nth-last-child(-n+2) ul ul{ left: auto; right: calc(100% + 8px); }
.main-menu #menu > li:nth-last-child(-n+2) ul ul:before{ left: auto; right: -8px; }

/* Hero "60+" box: let the number size to its content and give the label room */
.hero-experience-box{ width: auto; gap: 15px; }
.hero-experience-box h2{ width: auto; flex-shrink: 0; white-space: nowrap; }
.hero-experience-box p{ max-width: 190px; line-height: 1.4em; }
@media only screen and (max-width: 767px){
	.hero-experience-box{ width: 100%; }
	.hero-experience-box h2{ width: auto; }
	.hero-experience-box p{ max-width: none; }
}

/* ---------------- Visual / icon-based capability lists ---------------- */
.ftf-feature-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 25px 0 10px; }
.ftf-feature-item{
	display: flex; align-items: center; gap: 14px;
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 14px; padding: 14px 16px;
}
.ftf-feature-icon{
	flex: 0 0 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--secondary-color); color: var(--primary-color); font-size: 18px;
}
.ftf-feature-item p{ margin: 0; font-size: 15px; line-height: 1.45em; color: var(--primary-color); font-weight: 500; }

/* ---------------- Ratings ---------------- */
.ftf-ratings-section{ padding: 100px 0; margin-bottom: 30px; }
.ftf-ratings-section{ display: none; }	/* hidden until Google rating is connected - delete this line to show it again */
.ftf-rating-card, .ftf-rate-form-box{ background: var(--white-color); border-radius: 20px; padding: 35px; height: 100%; }
.ftf-rating-card{ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ftf-rating-source{ font-weight: 600; color: var(--primary-color); }
.ftf-rating-source i{ color: #4285F4; margin-right: 6px; }
.ftf-rating-score{ font-family: var(--accent-font); font-size: 64px; font-weight: 700; line-height: 1; color: var(--primary-color); }
.ftf-stars{ color: #F5B301; font-size: 22px; letter-spacing: 4px; }
.ftf-rating-count{ margin: 0 0 10px; }
.ftf-rate-form-box h3{ font-size: 22px; margin-bottom: 15px; }
.ftf-star-input{ display: inline-flex; flex-direction: row-reverse; gap: 6px; margin-bottom: 18px; }
.ftf-star-input input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.ftf-star-input label{ font-size: 32px; color: #D5DAE3; cursor: pointer; transition: color .15s; }
.ftf-star-input label:hover, .ftf-star-input label:hover ~ label,
.ftf-star-input input:checked ~ label{ color: #F5B301; }
.ftf-star-input input:focus-visible + label{ outline: 2px solid var(--ftf-blue); border-radius: 4px; }
.ftf-rate-form-box .form-control{ border: 1px solid var(--divider-color); border-radius: 10px; padding: 12px 15px; }
.ftf-rate-msg{ margin-left: 15px; font-weight: 600; }
.ftf-rate-msg.ok{ color: var(--ftf-green); }
.ftf-rate-msg.err{ color: var(--error-color); }

/* ---------------- QR codes (visiting cards) ---------------- */
.ftf-qr-section{ padding: 100px 0; }
.ftf-qr-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.ftf-qr-card{ background: var(--white-color); border: 1px solid var(--divider-color); border-radius: 20px; padding: 30px; text-align: center; }
.ftf-qr-card img{ width: 170px; height: 170px; margin-bottom: 15px; }
.ftf-qr-card h3{ font-size: 20px; margin-bottom: 8px; }
.ftf-qr-card a{ color: var(--ftf-blue); font-weight: 600; text-decoration: underline; }
.ftf-footer-qr{ display: flex; align-items: center; gap: 15px; margin-top: 25px; }
.ftf-footer-qr img{ width: 88px; height: 88px; border-radius: 8px; background: #fff; padding: 4px; }
.ftf-footer-qr p{ color: var(--white-color); margin: 0 0 4px; font-size: 14px; }
.ftf-footer-qr a{ color: var(--accent-color); font-size: 14px; text-decoration: underline; }

/* ---------------- Parent company slot ---------------- */
.ftf-copyright-row{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ftf-parent-company a{ color: var(--accent-color); font-weight: 600; }
.ftf-inline-placeholder{
	display: inline-block; border: 1px dashed #E0A100; background: #FFF8E6; color: #6B5200;
	border-radius: 6px; padding: 1px 8px; font-size: 14px; font-weight: 600;
}

@media only screen and (max-width: 991px){
	.ftf-ratings-section, .ftf-qr-section{ padding: 50px 0; }
	.ftf-rate-form-box{ margin-top: 30px; }
}
@media only screen and (max-width: 767px){
	.ftf-feature-grid, .ftf-qr-cards{ grid-template-columns: 1fr; }
	.ftf-rating-score{ font-size: 48px; }
	.ftf-copyright-row{ justify-content: center; text-align: center; }
}