:root{
 --coral:#f0574f;
 --navy:#0b3c66;
 --teal:#2a9db5;
 --mint:#eaf6f7;
 --gold:#c9a24b;
 --ink:#243342;
 --bg:#fff
}

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

html{
 scroll-behavior:smooth;
 scroll-padding-top:88px
}

body{
 font-family:'Poppins',Arial,sans-serif;
 color:var(--ink);
 line-height:1.65;
 background:var(--bg)
}

h1,h2,h3{
 font-family:'Playfair Display',Georgia,serif;
 color:var(--navy)
}

a{color:inherit}

.wrap{
 max-width:1100px;
 margin:auto;
 padding:0 20px
}

section{padding:72px 0}

.alt{background:var(--mint)}

.title{
 text-align:center;
 font-size:2rem;
 margin-bottom:10px
}

.title+.bar{
 width:80px;
 height:3px;
 background:linear-gradient(90deg,var(--coral),var(--gold));
 margin:0 auto 40px
}

/* Header */
header{
 position:sticky;
 top:0;
 z-index:50;
 background:#fff;
 box-shadow:0 2px 12px rgba(11,60,102,.12)
}

.nav{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 height:88px
}

/* Header: Logo Left, Menu + Button Right */
header .wrap{
 max-width:100%;
 padding-left:40px;
 padding-right:40px
}

.nav{
 justify-content:flex-start
}

.nav nav{
 margin-left:auto;
 gap:28px
}

.nav .nav-btn{
 margin-left:10px
}

.brand{
 display:flex;
 align-items:center;
 gap:10px;
 text-decoration:none
}

.brand img{
 height:71px;
 width:auto
}

nav{
 display:flex;
 gap:22px
}

nav a{
 text-decoration:none;
 font-weight:500;
 font-size:.95rem;
 padding:4px 0;
 border-bottom:2px solid transparent;
 transition:color .25s ease,border-color .25s ease
}

nav a:hover{
 color:var(--coral);
 border-color:var(--coral)
}

/* Hero */
.hero img{
 width:100%;
 display:block
}

.cta{
 background:var(--navy);
 text-align:center;
 padding:26px 20px;
 display:flex;
 gap:14px;
 justify-content:center;
 flex-wrap:wrap
}

/* Buttons */
.btn{
 display:inline-block;
 padding:12px 28px;
 border-radius:30px;
 font-weight:600;
 text-decoration:none;
 border:2px solid var(--coral);
 background:var(--coral);
 color:#fff;
 cursor:pointer;
 font-family:inherit;
 font-size:1rem;
 transition:background .25s ease,border-color .25s ease,transform .25s ease
}

.btn:hover{
 background:#d9433b;
 border-color:#d9433b;
 transform:translateY(-2px)
}

.btn.ghost{
 background:transparent;
 border-color:#fff
}

.btn.ghost:hover{
 background:#fff;
 color:var(--navy)
}

/* Header Contact Us Button */
.nav-btn{
 padding:10px 24px;
 font-size:.9rem;
 white-space:nowrap
}

/* Same Width for About and Services */
#about .wrap,
#services .wrap{
 max-width:1400px;
 padding-left:30px;
 padding-right:30px
}

/* About the Founder: Three Columns */
.about{
 display:grid;
 grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,1fr);
 gap:40px;
 align-items:start;
 width:100%
}

.founder-column,
.founder-text,
.timeline{
 min-width:0
}

.about p{margin-bottom:14px}

/* Founder Photo */
.founder{
 display:block;
 width:100%;
 max-width:280px;
 height:auto;
 border-radius:12px;
 border:4px solid var(--gold);
 box-shadow:0 6px 18px rgba(11,60,102,.2);
 margin:0 auto 18px
}

/* Founder Quote */
.quote{
 font-family:'Playfair Display',Georgia,serif;
 font-size:1.1rem;
 color:var(--coral);
 font-style:italic;
 text-align:center
}

/* Credentials and Milestones */
.timeline{
 border-left:3px solid var(--gold);
 padding-left:20px;
 max-height:430px;
 overflow-y:auto;
 min-width:0
}

.timeline h3{margin-bottom:12px}

.timeline li{
 list-style:none;
 position:relative;
 font-size:.9rem;
 padding:5px 0
}

.timeline li::before{
 content:"";
 position:absolute;
 left:-28px;
 top:13px;
 width:11px;
 height:11px;
 border-radius:50%;
 background:var(--coral);
 border:2px solid #fff
}

.timeline b{
 color:var(--teal);
 margin-right:6px
}

/* Service and Team Cards */
.grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:24px
}

.card{
 background:#fff;
 border-radius:14px;
 padding:30px 24px;
 text-align:center;
 box-shadow:0 6px 20px rgba(11,60,102,.1);
 border-top:4px solid var(--coral)
}

.card .ic{font-size:2.2rem}

.card h3{
 margin:10px 0 8px;
 font-size:1.2rem
}

.card p{
 font-size:.92rem;
 word-break:break-word
}

/* Our Services: Scroll Reveal Animation */
#services .card{
 position:relative;
 overflow:hidden;
 opacity:0;
 transform:translateX(-35px);
 transition:
  opacity .8s ease,
  transform .8s ease,
  box-shadow .3s ease,
  border-color .3s ease
}

/* Alternate Cards Enter from the Right */
#services .card:nth-child(even){
 transform:translateX(35px)
}

/* Cards Become Visible on Scroll */
#services .card.show-card{
 opacity:1;
 transform:translateX(0)
}

/* Services Hover Effect */
#services .card:hover{
 transform:translateY(-5px);
 box-shadow:0 12px 25px rgba(11,60,102,.12);
 border-top-color:var(--gold)
}

#services .card .ic{
 display:inline-block;
 transition:transform .3s ease
}

#services .card:hover .ic{
 transform:scale(1.06)
}

/* Team */
.role{
 color:var(--coral);
 font-weight:600;
 font-size:.85rem;
 text-transform:uppercase;
 letter-spacing:1px
}

/* Meet the Team */
.team .wrap{
 max-width:1500px;
 width:100%;
 padding-left:35px;
 padding-right:35px;
 margin:0 auto
}

/* Four Equal Team Columns */
.team .grid{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:28px;
 width:100%
}

/* Team Cards */
.team .card{
 position:relative;
 overflow:hidden;
 border-top-color:var(--teal);
 padding:28px 18px;
 min-width:0;
 transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease
}

.team .card:hover{
 transform:translateY(-10px);
 box-shadow:0 18px 35px rgba(11,60,102,.18);
 border-top-color:var(--gold)
}

/* Gold Line Animation */
.team .card::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:4px;
 background:var(--gold);
 transform:scaleX(0);
 transform-origin:left;
 transition:transform .35s ease
}

.team .card:hover::before{transform:scaleX(1)}

.team .card h3{
 font-size:1.05rem;
 transition:color .3s ease
}

.team .card:hover h3{color:var(--coral)}

.team .card p{
 font-size:.8rem;
 overflow-wrap:anywhere
}

/* Team Images */
.avatar{
 display:block;
 width:130px;
 height:130px;
 border-radius:50%;
 object-fit:cover;
 border:4px solid var(--gold);
 margin:0 auto 14px;
 transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease
}

.team .card:hover .avatar{
 transform:scale(1.07);
 border-color:var(--coral);
 box-shadow:0 8px 20px rgba(11,60,102,.2)
}

/* Contact Us: Medium Width */
#contact .wrap{
 max-width:1200px;
 width:100%;
 padding-left:25px;
 padding-right:25px;
 margin:0 auto
}

/* Contact Details and Form */
.contact{
 display:grid;
 grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
 gap:26px;
 align-items:start;
 width:100%
}

/* Office Information Cards */
.office{
 background:var(--navy);
 color:#fff;
 border-radius:14px;
 padding:24px;
 margin-bottom:18px;
 overflow-wrap:anywhere
}

.office h3{
 color:var(--gold);
 margin-bottom:6px
}

.office a{
 color:#fff;
 overflow-wrap:anywhere
}

/* Contact Form: Medium Size */
#contactForm{
 width:100%;
 max-width:none;
 min-width:0;
 padding:22px;
 gap:12px;
 background:#fff;
 border-radius:14px;
 box-shadow:0 6px 20px rgba(11,60,102,.1);
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr))
}

#contactForm h3{
 grid-column:1/-1;
 font-size:1.2rem;
 margin-bottom:2px
}

#contactForm label{
 min-width:0;
 font-size:.82rem;
 font-weight:500;
 display:flex;
 flex-direction:column;
 gap:4px
}

#contactForm input,
#contactForm select,
#contactForm textarea{
 width:100%;
 min-width:0;
 padding:9px 11px;
 border:1px solid #c5d3dc;
 border-radius:8px;
 font:inherit;
 font-size:.88rem;
 background:#fff
}

#contactForm textarea{
 resize:vertical;
 min-height:100px
}

#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus{
 outline:2px solid var(--teal);
 outline-offset:1px
}

#contactForm .full{
 grid-column:1/-1
}

#contactForm .btn{
 justify-self:start;
 padding:10px 24px;
 font-size:.9rem
}


/* Footer */
footer{
 background:#0b7fab;
 color:#fff;
 padding:45px 0 0;
 font-size:.9rem;
 width:100%;
}

/* Footer Content Width */
footer .wrap{
 width:100%;
 max-width:1500px;
 margin:0 auto;
 padding-left:12px;
 padding-right:12px;
 box-sizing:border-box;
}

/* Footer Columns */
.fgrid{
 display:grid;
 grid-template-columns:1.2fr .8fr 1fr 1fr;
 gap:18px;
 align-items:start;
 width:100%;
}

/* Footer Headings */
footer h4{
 color:#e0b43a;
 font-family:'Poppins',Arial,sans-serif;
 font-weight:500;
 text-transform:uppercase;
 font-size:1.1rem;
 margin-bottom:18px;
}

/* Footer Text */
footer p{
 margin-bottom:14px;
 line-height:1.8;
}

footer a{text-decoration:none}
footer a:hover{color:#e0b43a}

.flinks{list-style:none}
.flinks li{margin-bottom:14px}
.fi{line-height:1.6}

/* Footer Information Rows */
.hr{
 display:flex;
 justify-content:space-between;
 gap:8px;
 padding:10px 0;
 border-bottom:1px solid rgba(255,255,255,.2);
}

.hr:last-child{border-bottom:0}

/* Footer Bottom Bar */
.fbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:10px;
 margin-top:28px;
 padding:18px 0;
 border-top:1px solid rgba(255,255,255,.25);
}

.fbar a{margin-left:12px}

/* Footer Responsive */
@media(max-width:800px){
 footer .wrap{
  padding-left:20px;
  padding-right:20px;
 }

 .fgrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 18px;
 }
}

@media(max-width:520px){
 .fgrid{
  grid-template-columns:1fr;
  gap:20px;
 }

 .fbar{
  flex-direction:column;
  align-items:flex-start;
 }

 .fbar a:first-child{margin-left:0}
}


/* Back to Top */
.totop{
 position:fixed;
 right:20px;
 bottom:20px;
 width:44px;
 height:44px;
 line-height:44px;
 text-align:center;
 background:var(--navy);
 color:#fff;
 border-radius:8px;
 text-decoration:none;
 box-shadow:0 4px 12px rgba(0,0,0,.3);
 z-index:60
}

.totop:hover{background:var(--coral)}

/* Tablet */
@media(max-width:900px){
 .team .grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
 }

 .about{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);
  gap:24px
 }

 .timeline{grid-column:1/-1}

 .contact{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:20px
 }

 #contactForm{padding:18px}
}

/* Mobile and Small Tablets */
@media(max-width:800px){
 .nav{
  height:auto;
  flex-direction:column;
  padding:10px 0
 }

 nav{
  gap:14px;
  flex-wrap:wrap;
  justify-content:center
 }

 .nav nav{margin-left:0}
 .nav .nav-btn{margin-left:0}
 header .wrap{
  padding-left:20px;
  padding-right:20px
 }

 html{scroll-padding-top:150px}

 #about .wrap,
 #services .wrap{
  padding-left:20px;
  padding-right:20px
 }

 #contact .wrap{
  padding-left:20px;
  padding-right:20px
 }

 .team .wrap{
  padding-left:20px;
  padding-right:20px
 }

 .about,
 .contact{
  grid-template-columns:1fr
 }

 .founder{max-width:280px}

 .timeline{grid-column:auto}

 #contactForm{
  width:100%;
  max-width:none;
  padding:20px;
  grid-template-columns:repeat(2,minmax(0,1fr))
 }

 section{padding:50px 0}

 .fgrid{grid-template-columns:1fr}
}

/* Mobile */
@media(max-width:520px){
 .team .grid{grid-template-columns:1fr}

 #contactForm{
  grid-template-columns:1fr;
  padding:18px;
  gap:12px
 }

 #contactForm h3,
 #contactForm .full{
  grid-column:1
 }

 #contactForm .btn{
  width:100%;
  justify-self:stretch
 }
}

/* Reduced Motion Accessibility */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}

 #services .card,
 #services .card .ic,
 .team .card,
 .team .card::before,
 .team .card h3,
 .avatar,
 .btn,
 nav a{
  transition:none
 }

 #services .card,
 #services .card:nth-child(even),
 #services .card.show-card{
  opacity:1;
  transform:none;
  animation:none
 }

 #services .card:hover,
 #services .card:hover .ic,
 .team .card:hover,
 .team .card:hover .avatar{
  transform:none
 }
}

/* Remove Dots and Underlines from Both Contact Numbers */
#contact .office ul,
#contact .office ol{
 list-style:none !important;
 padding-left:0 !important;
}

#contact .office li{
 list-style:none !important;
 padding-left:0 !important;
}

#contact .office li::before{
 content:none !important;
 display:none !important;
}

#contact .office a,
#contact .office a:link,
#contact .office a:visited,
#contact .office a:hover{
 text-decoration:none !important;
 border-bottom:none !important;
 box-shadow:none !important;
}

/* Increase Footer Height */
footer{
 padding-top:65px;
 padding-bottom:20px;
}

footer .fgrid{
 row-gap:30px;
}

footer h4{
 margin-bottom:24px;
}

footer .fbar{
 margin-top:40px;
 padding-top:24px;
 padding-bottom:24px;
}

/* Footer Bottom Links: keep clear of Back to Top button */
footer .fbar{
 padding-right:75px;
}

/* Footer Text Size */
footer{
 font-size:1rem;
}

footer h4{
 font-size:1.2rem;
}

/* About the Founder: Center Paragraph Text Vertically */
.founder-text{
 align-self:center;
}

/* Icons (SVG): size and colors */
.icon{
 width:1.1em;
 height:1.1em;
 fill:none;
 stroke:currentColor;
 stroke-width:2.4;
 stroke-linecap:round;
 stroke-linejoin:round;
 vertical-align:-.2em;
}

/* Services icons */
#services .card .ic .icon{
 width:1em;
 height:1em;
 stroke-width:2;
 color:#b8860b;
}

/* Team icons */
.team .card p .icon{color:#b8860b}

/* Contact icons */
.office .icon{color:#d4a017}
#contact p .icon{color:#b8860b}

/* Footer icons */
footer .fi .icon{color:#d4a017}


/* Footer Social Icons - Facebook and LinkedIn */
.social{
 display:flex;
 align-items:center;
 gap:14px;
 margin-top:6px;
}

.social a{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:40px;
 height:40px;
 color:#d4a017;
 text-decoration:none !important;
 border:none !important;
 line-height:1;
 transition:color .25s ease,transform .25s ease;
}

.social a:hover{
 color:#fff;
 transform:translateY(-3px);
}

.social .icon{
 display:block;
 width:32px;
 height:32px;
 fill:currentColor;
 stroke:none;
 vertical-align:middle;
}