/*=========================================
  NS FURNISHING — STYLE.CSS
  ------------------------------------------
  UI/UX PASS SUMMARY (see inline comments for detail):
  1. Same color palette (navy #0B2D5C + green #22C55E) but
     richer via gradients, layered shadows and better contrast.
  2. Fluid typography with clamp() so headings scale smoothly
     between breakpoints instead of jumping at fixed widths.
  3. Working mobile navigation (hamburger + slide-in panel) —
     previously the nav was just hidden with no way to open it.
  4. Fixed real CSS bugs: hero used `background-size:contain`
     (left gaps) and `.hero-content` declared a grid template
     with no `display:grid`; `.btn-outline`'s white border was
     invisible once reused on light backgrounds.
  5. Consistent spacing scale, card/button/form polish, and
     scroll-reveal + hover micro-interactions, all gated behind
     `prefers-reduced-motion`.
  No selectors, classes, IDs, copy or layout structure were
  removed — only extended and corrected.
==========================================*/

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

html{
    scroll-behavior:smooth;
    overflow-x:hidden; /* CHANGE (bug fix): position:fixed elements (the
        off-canvas mobile nav) are positioned against the viewport, not
        body, so they were escaping body's overflow-x:hidden and adding
        ~8px of horizontal scroll on phones even while fully off-screen */
}

/* Reduced-motion users get instant scrolling instead */
@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--dark);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden; /* guards against any stray element causing horizontal scroll on mobile */
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

button{
    font-family:inherit;
}

.container{
    width:min(92%,1200px);
    margin:auto;
}

.section{
    padding:clamp(60px,8vw,90px) 0;
}

/* Visible keyboard focus for every interactive element (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid var(--secondary);
    outline-offset:3px;
    border-radius:6px;
}

/* Skip link: hidden until focused, lets keyboard users jump past the header */
.skip-link{
    position:absolute;
    top:-60px;
    left:16px;
    background:var(--primary);
    color:#fff;
    padding:12px 20px;
    border-radius:10px;
    z-index:2000;
    font-weight:600;
    transition:top .25s ease;
}

.skip-link:focus{
    top:16px;
}

/*========================
COLORS
CHANGE: same two brand colors kept exactly, but
extended with tonal steps + gradients + a proper
shadow scale so the rest of the file can build
richer depth without inventing new brand hues.
========================*/

:root{

--primary:#0B2D5C;
--primary-light:#123f7a;
--primary-dark:#071d3d;

--secondary:#22C55E;
--secondary-dark:#17A34A;
--secondary-light:#4ade80;

--white:#ffffff;
--dark:#1c2430;
--gray:#5b6472;
--gray-light:#94a3b8;
--light:#f7f8fc;


/* Gradients used across hero, buttons, cards and footer for visual hierarchy */
--gradient-primary:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
--gradient-accent:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-dark) 100%);

/* Layered shadow scale replaces the single flat shadow used everywhere before */
--shadow-sm:0 4px 12px rgba(11,45,92,.06);
--shadow:0 10px 30px rgba(11,45,92,.10);
--shadow-lg:0 20px 45px rgba(11,45,92,.16);
--shadow-hover:0 22px 50px rgba(11,45,92,.22);

--radius:18px;
--radius-sm:12px;
--radius-lg:26px;

--ease:cubic-bezier(.25,.8,.25,1);


}

/*========================
BUTTONS
CHANGE: added gradient fills, a soft glow shadow,
a shine sweep on hover, and fixed `.btn-outline`
so its border/background reads correctly both on
the dark hero and on light sections (was invisible
white-on-white in the contact section before).
========================*/

.btn{

position:relative;
overflow:hidden;
display:inline-flex;

align-items:center;

gap:10px;

padding:15px 30px;

border-radius:50px;

font-weight:600;
font-size:15.5px;
border:none;
cursor:pointer;

transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);

}

/* Subtle shine sweep across the button on hover (lightweight, GPU-friendly) */
.btn::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.btn:hover::after{
    left:130%;
}

@media (prefers-reduced-motion: reduce){
    .btn::after{ transition:none; content:none; }
}


.btn-primary{

background:var(--gradient-primary);

color:#fff;

box-shadow:0 10px 25px rgba(11,45,92,.28);
 


}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-3px);

box-shadow:0 16px 32px rgba(11,45,92,.35);

}

.btn-primary:active{
    transform:translateY(-1px);
}

.btn-outline{

/* CHANGE (bug fix): border/background now derive from currentColor +
   a translucent white fill so the button stays legible on both the
   dark hero overlay and any future light section, instead of a solid
   white border that vanished on white backgrounds. */
border:2px solid rgba(255,255,255,.85);

color:#fff;

background:linear-gradient(135deg,#25D366,#1fb457);

box-shadow:0 10px 25px rgba(37,211,102,.3);

}

.btn-outline:hover{

background:#fff;

color:var(--primary);
border-color:#fff;

transform:translateY(-3px);
box-shadow:0 16px 32px rgba(0,0,0,.18);
}

.btn-outline:active,
.btn-primary:active{
    box-shadow:none;
}

/* On light sections (contact) the outline button sits on a white card,
   so give it brand-colored text/border instead of white-on-white. */
.contact-buttons .btn-outline{
    color:#fff;
}

/*========================
HEADER
CHANGE: swapped the flat white bar for a subtle
translucent/blurred surface that gains a stronger
shadow once scrolled (state now toggled via JS
class instead of inline styles, so this CSS stays
the single source of truth for header styling).
========================*/

.header{

position:fixed;

top:0;

left:0;

width:100%;

background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

box-shadow:var(--shadow-sm);

z-index:999;

transition:box-shadow .3s ease, background .3s ease;

}

.header.is-scrolled{
    box-shadow:var(--shadow);
    background:rgba(255,255,255,.98);
}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;
gap:20px;

}

.logo{

display:flex;

align-items:center;

gap:16px;

color:#222;

}

.logo img{

width:85px; /* CHANGE (bug fix): was 115px, oversized enough to fight the
               logo text for space and overflow the mobile navbar */
height:auto;
display:block;

}

.logo h2{

font-size:clamp(20px,2.4vw,28px); /* CHANGE (bug fix): was a fixed 40px,
    wildly oversized versus the rest of the nav and a major overflow
    risk on small screens; now scales fluidly */

color:var(--primary);
line-height:1.15;
font-weight:700;

}

.logo span{

font-size:12px;

letter-spacing:1.5px;

color:var(--secondary-dark);

text-transform:uppercase;
font-weight:600;

}

nav ul{

display:flex;

gap:35px;

}

nav a{

position:relative;
color:#333;

font-weight:500;

transition:color .3s ease;
padding:6px 0;

}

/* Animated underline instead of a flat color swap — clearer affordance */
nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    height:2px;
    width:0;
    background:var(--gradient-accent);
    transition:width .3s ease;
}

nav a:hover,
nav a.active{

color:var(--secondary-dark);

}

nav a:hover::after,
nav a.active::after{
    width:100%;
}

.call-btn{

padding:12px 26px;

background:var(--gradient-accent);

color:#fff;

border-radius:40px;

font-weight:600;

box-shadow:0 8px 20px rgba(34,197,94,.32);

transition:transform .3s ease, box-shadow .3s ease;

}

.call-btn:hover{

transform:translateY(-3px);
box-shadow:0 14px 26px rgba(34,197,94,.4);

}

/*========================
MOBILE MENU TOGGLE (new — required for a working
mobile nav; the old CSS only hid the menu with no
way to reopen it)
========================*/

.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:42px;
    height:42px;
    background:none;
    border:none;
    cursor:pointer;
    border-radius:8px;
    z-index:1001;
}

.menu-toggle span{
    display:block;
    width:24px;
    height:2.5px;
    background:var(--primary);
    border-radius:2px;
    transition:transform .3s var(--ease), opacity .2s ease;
}

.menu-toggle.is-active span:nth-child(1){
    transform:translateY(7.5px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2){
    opacity:0;
}

.menu-toggle.is-active span:nth-child(3){
    transform:translateY(-7.5px) rotate(-45deg);
}

.nav-backdrop{
    display:none;
}

/*========================
HERO
CHANGE (bug fix): `background-size:contain` with
no-repeat left uncovered gaps around the artwork;
switched to `cover` so the image always fills the
hero on every screen size. Overlay strengthened
into a two-tone gradient for better text contrast
and a bit of visual depth.
========================*/

.hero{

position:relative;

min-height:90vh;

display:flex;

align-items:center;

background:

linear-gradient(120deg,rgba(7,29,61,.92) 0%,rgba(11,45,92,.82) 55%,rgba(11,45,92,.7) 100%),

url("../assets/images/hero-bg.png");


background-size:cover;
background-repeat:no-repeat;

background-position:center;
background-attachment:scroll; /* fixed backgrounds can jank on mobile Safari; scroll keeps it smooth */


padding-top:125px;
padding-bottom:25px;

}

.hero-content{

display:grid; /* CHANGE (bug fix): grid-template-columns was declared with
                 no `display:grid`, so the rule silently did nothing */

grid-template-columns:minmax(0,1fr) minmax(0,1fr);

gap:60px;

align-items:center;

}

/* Since hero-image is currently commented out in the markup, let the
   text column take the full width gracefully instead of leaving a
   phantom empty column. */
.hero-content:has(.hero-text:only-child){
    grid-template-columns:minmax(0,1fr);
}

.hero-tag{

display:inline-block;

padding:8px 18px;

background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);

border-radius:30px;

color:#fff;

margin-bottom:20px;

}

.hero h1{

font-size:clamp(30px,4.6vw,52px); /* CHANGE: fluid scaling replaces
    hard breakpoint jumps (50px → 42px → 34px) with a smooth curve */

line-height:1.2;

color:#fff;

margin-bottom:22px;

font-weight:700;

max-width:22ch;

}

.hero p{

color:#e6ecf5;

font-size:clamp(15px,1.6vw,18px);

margin-bottom:35px;

max-width:56ch;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.hero-image img{

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.3);

animation:float 4s ease-in-out infinite;

}

@media (prefers-reduced-motion: reduce){
    .hero-image img{
        animation:none;
    }
}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*========================
SECTION TITLE
========================*/

.section-title{

text-align:center;

margin-bottom:56px;
max-width:760px;
margin-inline:auto;

}

.section-subtitle{

display:inline-flex;
align-items:center;
gap:8px;

color:var(--secondary-dark);

font-weight:700;

letter-spacing:2px;
font-size:13.5px;
text-transform:uppercase;

margin-bottom:12px;

}

/* Small accent dash before the eyebrow label — a light structural cue,
   not decoration for its own sake, echoing the underline motif in nav */
.section-subtitle::before{
    content:"";
    width:22px;
    height:3px;
    border-radius:3px;
    background:var(--gradient-accent);
    display:inline-block;
}

.section-title h2{

font-size:clamp(28px,3.6vw,40px);

color:var(--primary);

margin-bottom:16px;
font-weight:700;
line-height:1.25;

}

.section-title p{

max-width:700px;

margin:auto;

color:var(--gray);

}

/*========================
ABOUT
========================*/

.about-grid{

display:grid;

grid-template-columns:minmax(0,1fr) minmax(0,1fr);

gap:60px;

align-items:center;

}

.about-image{
    position:relative;
}

/* Soft accent glow behind the photo for depth, without altering the image itself */
.about-image::before{
    content:"";
    position:absolute;
    inset:18px -18px -18px 18px;
    background:var(--gradient-accent);
    border-radius:var(--radius-lg);
    opacity:.15;
    z-index:0;
}

.about-image img{

position:relative;
z-index:1;
border-radius:var(--radius-lg);

box-shadow:var(--shadow-lg);
transition:transform .5s var(--ease);

}

.about-image:hover img{
    transform:translateY(-6px);
}

.about-content h2{

font-size:clamp(26px,3.2vw,38px);

color:var(--primary);

margin:15px 0 25px;
font-weight:700;

}

.about-content p{

color:var(--gray);

margin-bottom:20px;

}

.about-points{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

margin-top:30px;

}

.about-points div{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

padding:12px 14px;
background:#fff;
border-radius:var(--radius-sm);
box-shadow:var(--shadow-sm);
transition:transform .3s var(--ease), box-shadow .3s var(--ease);

}

.about-points div:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
}

.about-points i{

color:var(--secondary);

font-size:18px;

}

/*========================
SERVICES
CHANGE: cards gained a top accent bar, icon
badges, and a smoother lift + shadow-grow on
hover instead of translate-only.
========================*/

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.service-card{

position:relative;
overflow:hidden;

background:#fff;

padding:44px 32px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

transition:transform .35s var(--ease), box-shadow .35s var(--ease);

}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--gradient-accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s var(--ease);
}

.service-card:hover{

transform:translateY(-10px);
box-shadow:var(--shadow-hover);

}

.service-card:hover::before{
    transform:scaleX(1);
}

.service-card i{

font-size:42px;

color:var(--secondary);

margin-bottom:22px;

width:88px;
height:88px;
line-height:88px;
border-radius:50%;
background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(11,45,92,.08));
display:inline-block;
transition:transform .35s var(--ease);

}

.service-card:hover i{
    transform:scale(1.08) rotate(-4deg);
}

.service-card h3{

font-size:22px;

margin-bottom:14px;

color:var(--primary);
font-weight:700;

}

.service-card p{

color:var(--gray);

}

/*========================
WHY CHOOSE US
========================*/

.why{

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.why-card{

padding:38px 30px;

border-radius:var(--radius);

background:var(--light);
border:1px solid rgba(11,45,92,.06);

text-align:center;

transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);

}

.why-card:hover{

background:var(--gradient-primary);

color:#fff;

transform:translateY(-8px);
box-shadow:var(--shadow-hover);
border-color:transparent;

}

.why-card:hover h3,

.why-card:hover p,

.why-card:hover i{

color:#fff;

}

.why-card i{

font-size:42px;

color:var(--secondary);

margin-bottom:20px;
transition:transform .35s var(--ease);

}

.why-card:hover i{
    transform:scale(1.1);
}

.why-card h3{

margin-bottom:15px;

color:var(--primary);
font-weight:700;
transition:color .35s ease;

}

.why-card p{

color:var(--gray);
transition:color .35s ease;

}

/*========================
GALLERY PREVIEW
CHANGE: images get a hover zoom + gradient
overlay handled purely in CSS (no markup change)
so they read as tappable cards, plus a graceful
placeholder look if a linked image fails to load.
========================*/

.gallery-preview{

background:#f5f7fb;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-bottom:40px;

}

.gallery-grid a,
.gallery-grid > *{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
}

.gallery-grid img{

height:260px;
width:100%;

object-fit:cover;

border-radius:var(--radius);

cursor:pointer;

transition:transform .5s var(--ease), filter .4s ease;

box-shadow:var(--shadow);

background:linear-gradient(135deg,#e2e8f0,#f1f5f9); /* placeholder tone if the file 404s */

}

.gallery-grid img:hover{

transform:scale(1.06);
filter:brightness(1.03);

}

/* If an image fails to load, avoid the ugly browser "broken image" icon
   and show a neutral tile instead — a UI fix, not a content change. */
.gallery-grid img::before,
.gallery-item img::before{
    content:"";
}

.center-btn{

text-align:center;

}

/*========================
HOVER EFFECTS (shared transition base)
========================*/

.service-card,

.why-card,

.gallery-grid img,

.btn,

.call-btn{

transition:all .35s var(--ease);

}


/*========================
SCROLL-REVEAL ANIMATION
CHANGE: replaced the old blanket
`.section { animation: fadeUp .8s ease; }` — which
fired for every section immediately on page load
regardless of scroll position — with a genuine
scroll-triggered reveal driven by the `.reveal` /
`.in-view` classes added in script.js via
IntersectionObserver. Sections no longer "jump" in
before the user has scrolled anywhere near them.
========================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.in-view{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}


/*========================
TESTIMONIALS
========================*/

.testimonials{

background:#fff;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:transform .35s var(--ease), box-shadow .35s var(--ease);

border-top:4px solid var(--secondary);

}

.testimonial-card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-hover);

}

.stars{

font-size:20px;

margin-bottom:18px;

color:#f5b301;
letter-spacing:2px;

}

.testimonial-card p{

color:var(--gray);

margin-bottom:20px;

}

.testimonial-card h4{

color:var(--primary);
font-weight:700;

}

/* The review CTA + embedded iframe sit directly in .testimonials; give
   them breathing room and a consistent card treatment without touching
   the markup or the embed itself. */
.testimonials .container > a.btn{
    margin:10px auto 30px;
}

.testimonials .container > iframe{
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/*========================
CONTACT
========================*/

.contact{

background:var(--light);

}

.contact-grid{

display:grid;

grid-template-columns:minmax(0,1fr) minmax(0,1fr);

gap:50px;

margin-bottom:50px;
align-items:start;

}

.contact-info{

display:flex;

flex-direction:column;

gap:20px;

min-width:0; /* CHANGE (bug fix): grid items default to an automatic
    min-width of their content's max-content size, which let the
    long address/phone text and select box push this column wider
    than its grid track and overflow the page horizontally on mobile */

}

.info-box{

display:flex;

gap:20px;

align-items:flex-start;

background:#fff;

padding:26px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:transform .3s var(--ease), box-shadow .3s var(--ease);

}

.info-box:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.info-box i{

font-size:24px;

color:#fff;
background:var(--gradient-accent);
width:48px;
height:48px;
min-width:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

margin-top:0;

}

.info-box h3{

color:var(--primary);

margin-bottom:5px;
font-weight:700;

}

.info-box p{

color:var(--gray);

}

.contact-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:15px;

}

/* Give the buttons in this light section their own readable treatment
   without touching the shared .btn-primary/.btn-outline classes used
   elsewhere on a dark background. */
.contact-buttons .btn-outline{
    background:var(--gradient-accent);
    border-color:transparent;
    box-shadow:0 10px 25px rgba(34,197,94,.28);
}

.contact-buttons .btn-outline:hover{
    background:var(--secondary-dark);
    color:#fff;
}

/*========================
FORM
CHANGE: inputs gained a light background + inner
shadow-on-focus treatment and an error state class
(`.field-error`) used by script.js so a missing
name/phone is visually obvious, not just alert()-based.
========================*/

.contact-form{

background:#fff;

padding:36px;

border-radius:var(--radius);

box-shadow:var(--shadow);

min-width:0; /* CHANGE (bug fix): same overflow issue as .contact-info above */

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,

.contact-form select,

.contact-form textarea{

width:100%; /* CHANGE (bug fix): selects/inputs had no explicit width and
    were sizing to their own content (e.g. the longest <option> text),
    which is what triggered the grid/flex overflow above */

padding:15px 16px;

border:1.5px solid #e3e7ef;

border-radius:var(--radius-sm);

font-size:15px;

font-family:Poppins,sans-serif;

outline:none;

background:var(--light);

color:var(--dark);

transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:var(--gray-light);
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{
    border-color:#c8d0dd;
}

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus{

border-color:var(--secondary);
background:#fff;
box-shadow:0 0 0 4px rgba(34,197,94,.14);

}

.contact-form input.field-error,
.contact-form textarea.field-error{
    border-color:#e5484d;
    box-shadow:0 0 0 4px rgba(229,72,77,.14);
}

.contact-form textarea{

resize:vertical;
min-height:120px;

}

.contact-form select{
    cursor:pointer;
}

.contact-form button.btn{
    justify-content:center;
    margin-top:6px;
}

/*========================
MAP
========================*/

.map{

margin-top:50px;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);
border:1px solid rgba(11,45,92,.08);

}

.map iframe{

width:100%;

height:400px;

border:none;
display:block;

}

/*========================
FOOTER
========================*/

footer{

background:var(--gradient-primary);

color:#fff;

padding:70px 0 24px;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:40px;

margin-bottom:40px;

}

.footer-grid h3{

margin-bottom:20px;
font-weight:700;
position:relative;
padding-bottom:12px;

}

/* Small underline accent so footer column headings read as headings,
   matching the underline motif used in the nav */
.footer-grid h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:34px;
    height:3px;
    border-radius:3px;
    background:var(--gradient-accent);
}

.footer-grid p{

color:#d7e0f0;

margin-bottom:10px;

}

.footer-grid a{

display:block;

color:#d7e0f0;

margin-bottom:12px;

transition:color .3s ease, transform .3s ease, padding-left .3s ease;

}

.footer-grid a:hover{

color:#fff;

padding-left:6px;

}

.copyright{

text-align:center;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

font-size:14px;

color:#c9d4e6;

}

/*========================
FLOATING BUTTONS
========================*/

.floating-buttons{

position:fixed;

right:20px;

bottom:20px;

display:flex;

flex-direction:column;

gap:15px;

z-index:999;

}

.float-btn{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

text-decoration:none;

border:none;

cursor:pointer;

box-shadow:0 10px 24px rgba(0,0,0,.25);

transition:transform .3s var(--ease), box-shadow .3s ease;

}

.float-btn:hover{

transform:scale(1.1) translateY(-2px);
box-shadow:0 14px 28px rgba(0,0,0,.3);

}

.gallery-btn{

background:var(--gradient-primary);

}

.call-btn-float{

background:linear-gradient(135deg,#0b7dda,#0a63ad);

}

.whatsapp-btn{

background:linear-gradient(135deg,#25D366,#1da851);

}

.top-btn{

background:linear-gradient(135deg,#444,#2b2b2b);

/* CHANGE (bug fix): visibility used to be toggled via inline
   `style.display`, fighting with `display:flex` set here; now a class
   toggled in JS handles both showing and the entrance animation. */
opacity:0;
visibility:hidden;
transform:translateY(10px) scale(.9);

}

.top-btn.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
    .top-btn{ transition:opacity .2s ease; }
}

/*========================
RESPONSIVE
CHANGE: added a working mobile nav panel, an extra
576px breakpoint for small phones, and fluid type
via clamp() above means fewer manual overrides are
needed at each breakpoint than before.
========================*/

@media(max-width:992px){

.hero-content,

.about-grid,

.contact-grid{

grid-template-columns:minmax(0,1fr);

}

.hero{

text-align:center;

}

.hero p{
    margin-inline:auto;
}

.hero-buttons{

justify-content:center;

}

.about-points{

grid-template-columns:minmax(0,1fr);

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

/* CHANGE (bug fix): previously `nav{ display:none; }` with no way to
   reopen it. Now the nav becomes an off-canvas panel controlled by
   the hamburger button, and the toggle itself only shows here. */
.menu-toggle{
    display:flex;
}

nav{

position:fixed;
top:0;
right:0;
height:100vh;
width:min(78vw,320px);
background:#fff;
box-shadow:-10px 0 40px rgba(0,0,0,.15);
display:flex;
align-items:center;
padding:100px 32px 40px;
transform:translateX(100%);
transition:transform .4s var(--ease);
z-index:1000;

}

nav.nav-open{
    transform:translateX(0);
}

nav ul{

flex-direction:column;
gap:8px;
width:100%;

}

nav ul li a{
    display:block;
    padding:14px 16px;
    border-radius:var(--radius-sm);
    font-size:17px;
}

nav ul li a:hover,
nav ul li a.active{
    background:var(--light);
}

nav a::after{
    display:none; /* underline affordance doesn't apply to the stacked mobile menu */
}

.nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(7,15,30,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:998;
}

.nav-backdrop.is-visible{
    opacity:1;
    pointer-events:auto;
}

/* Prevent the page from scrolling behind the open mobile menu */
body.nav-locked{
    overflow:hidden;
}

}

@media(max-width:768px){

.section{

padding:56px 0;

}

.gallery-grid{

grid-template-columns:minmax(0,1fr);

}

.service-grid,

.why-grid,

.testimonial-grid{

grid-template-columns:minmax(0,1fr);

}

.call-btn{

display:none;

}

.float-btn{

width:48px;

height:48px;

font-size:18px;

}

.floating-buttons{
    right:14px;
    bottom:14px;
    gap:12px;
}

.contact-form{
    padding:26px;
}

.footer-grid{
    text-align:center;
}

.footer-grid h3::after{
    left:50%;
    transform:translateX(-50%);
}

.info-box{
    flex-direction:column;
    text-align:center;
    align-items:center;
}

}

/* Extra breakpoint for small phones — the previous stylesheet stopped
   tuning at 768px, leaving 320–420px devices with slightly cramped
   spacing and oversized buttons. */
@media(max-width:576px){

.container{
    width:min(94%,1200px);
}

.hero{
    padding-top:100px;
    min-height:auto;
    padding-bottom:70px;
}

.hero-buttons{
    flex-direction:column;
    align-items:stretch;
}

.hero-buttons .btn{
    justify-content:center;
}

.section-title{
    margin-bottom:40px;
}

.about-points{
    grid-template-columns:minmax(0,1fr);
}

.service-card,
.why-card{
    padding:32px 24px;
}

.logo span{
    display:none; /* tagline gives way to the primary wordmark on very small screens */
}

.logo img{
    width:52px;
}

nav{
    width:100vw;
}

}

/*========================
CROSS-BROWSER / PRINT NICETIES
========================*/

/* Firefox-specific focus ring cleanup so the custom focus-visible style
   above is the only one shown, avoiding a doubled outline. */
::-moz-focus-inner{
    border:0;
}

/* Consistent selection color that matches the brand instead of the
   browser default blue clashing with the navy/green palette. */
::selection{
    background:var(--secondary);
    color:#fff;
}



.review-card{
    max-width:480px;
    margin:10px auto 0;
    padding:32px 36px 40px;
    text-align:center;
    background:#fff;
    border:1px solid rgba(11,45,92,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.review-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-top:24px;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,
        rgba(10,34,70,.92) 0%,
        rgba(10,34,70,.82) 45%,
        rgba(10,34,70,.55) 100%);
}
/* Hero Animation */
.hero-logo,

.hero-text,
.hero-buttons,
.hero-scroll {
    opacity: 0;
    transform: translateY(20px);
}



/* Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Active State */
.animate {
    animation: fadeUp 700ms ease forwards;
}

.gallery-item{
    text-align:center;
}

.gallery-item img{
    width:100%;
    display:block;
	object-fit:cover;
    border-radius:12px;
}

.gallery-item h4{
    margin-top:16px;
    font-size:1rem;
    font-weight:600;
    color:#1f2937;
    letter-spacing:.5px;
}
@media (max-width: 992px){
    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 576px){
    .gallery-grid{
        grid-template-columns:1fr;
    }
}