@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
html {
font-size: 16px !important;
}
:root {
--navy: #09182e;
--navy-2: #102c4e;
--blue: #137b9d;
--cyan: #29b9d1;
--gold: #e8bd70;
--paper: #f5f8fb;
--white: #ffffff;
--ink: #162538;
--muted: #5d6c7c;
--line: #d9e3ec;
--shadow: 0 24px 70px rgba(6, 25, 47, .18);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-size: 16px;
line-height: 1.6;
font-family: "Raleway", sans-serif;
}
a {
color: inherit;
}
.wrap {
width: min(1430px, calc(100% - 40px));
margin: 0 auto;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.brand img {
width: 148px;
height: auto;
filter: brightness(0) invert(1);
opacity: .96;
}
.area-tag {
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
font-size: .76rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
font-size: .92rem;
}
.nav-links a {
text-decoration: none;
color: rgba(255, 255, 255, .82);
}
.nav-links a:hover, .nav-links a:focus-visible {
color: var(--white);
}
.nav-links .patient-link {
color: var(--gold);
}
.hero {
position: relative;
overflow: hidden;
color: var(--white);
background:
radial-gradient(circle at 12% 0%, rgba(41, 185, 209, .24), transparent 34%), linear-gradient(125deg, var(--navy) 0%, #0d2b4b 62%, #114660 100%);
}
.hero::after {
content: "";
position: absolute;
inset: auto -14% -180px auto;
width: 520px;
height: 520px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 50%;
box-shadow: 0 0 0 74px rgba(255, 255, 255, .025), 0 0 0 148px rgba(255, 255, 255, .02);
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
align-items: center;
gap: 72px;
min-height: 500px;
padding:20px 0 20px;
}
.eyebrow {
margin: 0 0 18px;
color: var(--cyan);
font-size: .83rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
h1, h2, h3, p {
margin-top: 0;
}
h1 {
max-width: 720px;
margin-bottom: 22px;
font-size: clamp(3rem, 6vw, 4rem);
font-weight:700;
line-height: .98;
letter-spacing: -.045em;
}
.hero-copy {
max-width: 650px;
margin-bottom: 30px;
color: rgba(255, 255, 255, .8);
font-size: clamp(1.06rem, 2vw, 1.25rem);
line-height: 1.65;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 6px;
text-decoration: none;
font-weight: 750;
letter-spacing: .01em;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover {
transform: translateY(-2px);
}
.button-primary {
background:#fff;
color:#23527c

}
.button-primary:hover {
background: var(--gold);
color: var(--navy);}
.button-secondary {
border-color: rgba(255, 255, 255, .35);
color: var(--white);
}
.button-secondary:hover {
background:#fff;
color:#23527c
}
.hero-photo {
position: relative;
align-self: stretch;
min-height: 455px;
border: 1px solid rgba(255, 255, 255, .22);
background: #142f4a;
box-shadow: var(--shadow);
overflow: hidden; border-radius:10px
}
.hero-photo img {
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(9, 24, 46, .7), transparent 48%);
}
.photo-note {
position: absolute;
z-index: 2;
left: 24px;
right: 24px;
bottom: 22px;
display: flex;
justify-content: space-between;
align-items: end;
gap: 18px;
color: rgba(255, 255, 255, .9);
font-size: .86rem;
}
.photo-note strong {
display: block;
color: var(--white);
font-size: 1.05rem;
}
.experience {
flex: 0 0 auto;
display: grid;
width: 72px;
height: 72px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 50%;
color: var(--gold);
font-size: 1.6rem;
line-height: 1;
}
.proof-strip {
position: relative;
z-index: 3;
margin-top: -38px;
}
.proof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--white);
box-shadow: 0 18px 50px rgba(12, 35, 57, .12);
}
.proof-item {
padding: 25px 30px;
border-right: 1px solid var(--line);
}
.proof-item:last-child {
border-right: 0;
}
.proof-item small {
display: block;
margin-bottom: 3px;
color: var(--blue);
font-size: .75rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.proof-item strong {
font-size: 1.05rem;
}
section {
padding:60px 0;
}
.section-head {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 60px;
margin-bottom: 42px;
}
h2 {
margin-bottom: 0;
color: var(--navy);
font-size: clamp(2rem, 4vw, 2.4rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.035em;
}
.section-intro {
margin-bottom: 4px;
color: var(--muted);
font-size: 1.06rem;
}
.focus-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.focus-card {
min-height: 232px;
padding: 32px 28px;
background: var(--white);
}
.focus-number {
color: var(--cyan);
font-weight: 850;
font-size: 20px;
letter-spacing: .14em;
}
.focus-card h3 {
margin:20px 0 8px;
color: var(--navy);
font-size: 1.3rem;
line-height: 1.2; font-family: "Raleway", sans-serif;
}
.focus-card p {
margin-bottom: 0;
color: var(--muted);
font-size: .94rem;
}
.formats {
background: var(--white);
}
.format-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.format-card {
position: relative;
padding: 44px;
border: 1px solid var(--line);
background: var(--paper);
overflow: hidden; border-radius:10px
}
.format-card.featured {
color: var(--white);
border-color: var(--navy);
background: var(--navy);
}
.format-kicker {
color: var(--blue);
font-size: .78rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.featured .format-kicker {
color: var(--cyan);
}
.format-card h3 {
margin: 15px 0 13px;
font-size: 2.25rem;
font-weight: 700;
line-height: 1.1; font-family: "Raleway", sans-serif;
}
.format-card p {
max-width: 530px;
color: var(--muted);
}
.featured p {
color: rgba(255, 255, 255, .74);
}
.format-card ul {
display: grid;
gap: 12px;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.format-card li {
display: flex;
gap: 12px;
align-items: flex-start;
}
.format-card li::before {
content: "✓";
color: var(--blue);
font-weight: 900;
}
.featured li::before {
color: var(--gold);
}
.ce-note {
margin: 26px 0 0;
padding-top: 20px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: .88rem;
}
.featured .ce-note {
border-color: rgba(255, 255, 255, .16);
color: rgba(255, 255, 255, .66);
}
.approach-grid {
display: grid;
grid-template-columns: .70fr 1.14fr;
gap:15px;
align-items: center;
}
.approach-photo {
position: relative;
min-height:350px;
overflow: hidden;
}
.approach-photo img {
position: absolute;
inset: 0;
height: 100%;
object-fit: cover;   border-radius:10px;
}
.approach-copy p {
color: var(--muted);
font-size: 1.08rem;
}
.timeline {
display: grid;
gap: 0;
margin-top: 30px;
border-top: 1px solid var(--line);
}
.timeline-row {
display: grid;
grid-template-columns:110px 1fr;
gap: 20px;
padding: 19px 0;
border-bottom: 1px solid var(--line);
}
.timeline-row strong {
color: var(--blue);
font-size: .81rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.timeline-row span {
color: var(--ink);
}
.travel {
color: var(--white);
background: linear-gradient(115deg, #0b1d35, #123c56);
}
.travel h2 {
color: var(--white);
}
.travel .section-intro {
color: rgba(255, 255, 255, .72);
}
.travel-grid {
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 26px;
}
.travel-card {
padding: 34px;
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .06);
}
.travel-card h3 {
margin-bottom: 10px;
font-size: 1.25rem;
}
.travel-card p {
margin-bottom: 22px;
color: rgba(255, 255, 255, .7);
}
.text-link {
color: var(--gold);
font-weight: 800;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.text-link:hover {
color:#fff
}
.hotel-list {
display: grid;
gap: 14px;
}
.hotel {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid rgba(255, 255, 255, .14);
text-decoration: none;
}
.hotel:last-child {
border-bottom: 0;
}
.hotel span {
color: rgba(255, 255, 255, .65);
font-size: .88rem;
}
.hotel b {
color: var(--gold);
}
.hotel b:hover {
color:#fff;
}
.contact {
padding: 82px 0;
background: #36a7e3;
}
.contact-grid {
display: grid;
grid-template-columns: 1.2fr .8fr;
align-items: center;
gap: 60px;
}
.contact h2 {
color: #fff;
}
.contact p {
max-width: 670px;
margin: 16px 0 0;
color: #fff;
font-size: 1.08rem;
}
.contact-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 11px;
}
.contact-actions .button {
background: var(--navy);
color: var(--white);
}
.contact-actions .button:hover {
background:var(--white);
color:var(--navy);
}
.contact-actions a:last-child {
text-align: center;
color: var(--navy);
font-weight: 800;
}

/* The new hover state */
.contact-actions a:last-child:hover { 
  color: var(--white); /* Replace with your desired hover color or variable */
}



footer {
padding: 30px 0;
color: rgba(255, 255, 255, .68);
background: #061224;
font-size: .88rem;
}
.footer-grid {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: center;
}
footer a {
color: var(--white);
text-decoration: none;
}
@media (max-width: 900px) {
.nav-links a:not(.patient-link) {
display: none;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 46px;
padding: 64px 0 84px;
}
.hero-photo {
min-height: 390px;
}
.section-head, .approach-grid, .travel-grid, .contact-grid {
grid-template-columns: 1fr;
gap: 34px;
}
.focus-grid {
grid-template-columns: repeat(2, 1fr);
}
.format-grid {
grid-template-columns: 1fr;
}
.contact-actions {
max-width: 420px;
}
}
@media (max-width: 620px) {
.wrap {
width: min(100% - 26px, 1160px);
}
.nav {
min-height: 68px;
}
.brand img {
width: 125px;
}
.area-tag {
font-size: .67rem;
}
.nav-links {
display: none;
}
h1 {
font-size: 3rem;
}
.hero-grid {
min-height: auto;
padding-top: 52px;
}
.hero-photo {
min-height: 330px;
}
.proof-grid {
grid-template-columns: 1fr;
}
.proof-item {
padding: 19px 22px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.proof-item:last-child {
border-bottom: 0;
}
section {
padding: 72px 0;
}
.section-head {
gap: 20px;
margin-bottom: 30px;
}
.focus-grid {
grid-template-columns: 1fr;
}
.focus-card {
min-height: auto;
}
.focus-card h3 {
margin-top: 22px; font-family: "Raleway", sans-serif;
}
.format-card, .travel-card {
padding: 30px 24px;
}
.approach-photo {
min-height: 340px;
}
.timeline-row {
grid-template-columns: 76px 1fr;
}
.footer-grid {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.button {
transition: none;
}
}
.tab-css {
margin:65px auto 0 auto;
padding:0 15px 0 15px;
text-align:right;
max-width:100%;
/* --- overlap fix: sticky right under the real site header --- */
position: sticky;
top: 0; /* JS below sets this to the real header height */
z-index: 15; /* lower than the main header so it never sits on top of it */
transition: top .15s ease;
}
.tab-css-in {
margin:0 auto;
padding:10px 0;
text-align:right;
max-width:1160px;
/* --- overlap fix: sticky right under the real site header --- */
position: sticky;
top: 0; /* JS below sets this to the real header height */
z-index: 15; /* lower than the main header so it never sits on top of it */
}
.tab-css a {
margin:0 5px;
text-decoration:none;
font-weight:600;
padding: 10px 20px;
background:#fff;
color:#09182e;
border-radius: 30px;
display:inline-block; margin-bottom:10px
}
.tab-css a:hover {
background:#4284a7;
color:#fff
}
.tab-css .patient-link {
margin:0;
padding: 10px 20px;
background:#29b9d1;
border-radius: 30px;
color:#fff
}
.tab-css .patient-link:hover {
background:#fff;
color:#4284a7
}
.navbar-fixed-top {
background: rgba(3, 3, 3);
}



.contact-actions i { font-size:20px; vertical-align:middle}
.contact-actions { vertical-align:middle}


@media (max-width:580px) {
.tab-css {
padding:20px auto 0 auto
}
.hero-grid {
padding-top: 20px;
}
section {
padding: 50px 0;
}
.timeline-row {
grid-template-columns:1fr;
padding:19px 0;
}
.tab-css a {
padding:10px 6px;
font-size:13px
}
h1 {
font-size: 2.5rem;
}
.focus-card {
padding:20px
}
h2 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.contact {
padding:30px 0;
}
.hero-grid {padding:34px 0 30px;}

}

@media (max-width:414px) {
.tab-css a {padding: 5px 9px;font-size:13px; margin: 0 2px;}
.tab-css .patient-link {padding: 5px 9px;font-size:13px;}
h1 {font-size: 2rem;}
h2 {font-size: clamp(1.5rem, 4vw, 2.6rem);}
.format-card h3 {font-size:1.5rem}
.approach-photo {
min-height: 250px;
}

}

@media (max-width:360px) {
.tab-css a {
padding: 5px 9px;
font-size: 11px;
 margin: 0 2px;}
}