/* =========================
VARIABLES
========================= */

:root{
--bg:#ffffff;
--ink:#0b1f1c;
--muted:#5b6f6b;
--brand:#0f473f;
--accent:#2fb36f;

--radius:14px;
--shadow:0 10px 25px rgba(0,0,0,.08);

--maxw:1100px;
}

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

.footer{
background:#0f473f;
color:#fff;
margin-top:60px;
padding-top:40px;
}
.footer {
    background: #0f473f;
    color: #fff;
    margin-top: 60px;
    padding-top: 40px;
    position: relative;
    overflow: hidden;
}

.footer::after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: url("../img/accent.png") no-repeat center;
    background-size: contain;
    opacity: 0.1;
    transform: rotate(-25deg);
    pointer-events: none;
}




.footer-grid{
display:grid;
gap:30px;
}

.footer-title{
font-weight:700;
font-size:18px;
margin-bottom:5px;
}



.footer-muted{
opacity:.8;
font-size:14px;
}

.footer-nav{
display:flex;
flex-direction:column;
gap:8px;
}

.footer-nav a{
color:#fff;
opacity:.9;
font-size:15px;
}

.footer-nav a:hover{
opacity:1;
text-decoration:underline;
}

.footer-bottom{
margin-top:30px;
padding:15px 0;
font-size:14px;
opacity:.85;
}

/* Desktop */

@media(min-width:700px){

.footer-grid{
grid-template-columns:1.5fr 1fr 1fr;
}

.footer-nav{
gap:10px;
}

}
/* =========================
RESET
========================= */

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

html,body{
background:var(--bg);
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
cursor: default;
}

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

a{
color:var(--brand);
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

ul{
list-style:none;
}

svg{
fill:none;
stroke:#fff;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:2;
}

.icon-stroke{
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
}

body ::selection {
	background-color: var(--brand);
	color: #ffffff;
}

/* =========================
LAYOUT
========================= */

.container{
max-width:var(--maxw);
margin:auto;
padding:0 20px;
}

.content-wrapper{
min-height:70vh;
padding:40px 0;
}


/* =========================
TYPOGRAPHY
========================= */

.text-normal{font-size:1rem;}
.text-large{font-size:1.25rem;}
.text-xl{font-size:1.6rem;}
.text-xxl{font-size:2.2rem;}
/* =========================
CONTACT
========================= */

.contact-grid{
display:grid;
gap:30px;
}

.contact-link{
font-size:18px;
font-weight:600;
display:inline-block;
margin-top:4px;
}


form label{
display:block;
font-weight:600;
margin:10px 0 4px;
font-size:14px;
}

form input,
form textarea{
width:100%;
padding:10px 12px;
font-size:15px;
border-radius:8px;
border:1px solid #dcdcdc;
font-family:inherit;
line-height:1.4;
}

form textarea{
min-height:110px;
resize:vertical;
}

form input:focus,
form textarea:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 2px rgba(47,179,111,0.15);
}

input[type="checkbox"]{
  width:18px;
  height:18px;
}
body.menu-open{
overflow:hidden;
}
.success{
background:#e8f7ef;
color:#1b6e45;
padding:12px;
border-radius:10px;
margin-bottom:15px;
}

.error{
background:#ffe9e9;
color:#a52828;
padding:12px;
border-radius:10px;
margin-bottom:15px;
}


/* Desktop */

@media(min-width:800px){

.contact-grid{
grid-template-columns:1fr 2fr;
align-items:start;
}

}
.text-muted{
color:var(--muted);
font-size: 12px;
}

.section{
margin-bottom:50px;
}

.section h2{
font-size:1.6rem;
margin-bottom:14px;
}

.section p{
margin-bottom:16px;
}


/* =========================
DIVIDER
========================= */

.divider{
height:1px;
background:#e6ecea;
margin:40px 0;
}


/* =========================
HEADER
========================= */

.header{
position:sticky;
top:0;
z-index:100;
background:var(--brand);
height: 62px;
}

.header-row{
display:flex;
align-items:center;
gap:20px;
padding: 6px 20px;
}


/* =========================
LOGO
========================= */
.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}
@media (max-width:768px){

.grid-2{
grid-template-columns:1fr;
}

.error-image{
order:-1;
}
}
.error-image img{
max-width:100%;
height:auto;
display:block;
}

.logo{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-weight:700;
}

.logo img{
width: 140px;
}

.logo span{
line-height:1.1;
}


/* =========================
NAVIGATION
========================= */

.nav{
margin-left:auto;
}

.nav-list{
display:flex;
align-items:center;
gap:24px;
}

.nav-list a{
color:#fff;
font-weight:600;
}


/* =========================
MENU BUTTON
========================= */

.menu-toggle{
display:none;
background:none;
border:none;
margin-left:auto;
cursor:pointer;
}

.menu-icon{
transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s;
}

.menu-toggle.active .menu-icon{
transform:rotate(180deg) scale(.8);
}


/* =========================
ICONS
========================= */

.icon{
width:26px;
height:26px;
fill:#fff;
}


/* =========================
SIDEBAR
========================= */

.sidebar{
position:fixed;
top:62px;
right:-320px;
width:320px;
max-width:100%;
height:calc(100% - 62px);

background:#fff;

padding:30px;

display:flex;
flex-direction:column;
gap:30px;

transition:right .35s cubic-bezier(.4,0,.2,1);

z-index:90;
}
.sidebar::after {
    content: "";
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 240px;
    height: 240px;
    background: url(../img/accent.png) no-repeat bottom right;
    background-size: contain;
    opacity: 0.1;
    transform: rotate(-20deg);
    pointer-events: none;
}


.dot{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
}
.media{
display:grid;
gap:30px;
align-items:center;
margin-bottom:40px;
}

.media-img{
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
}

.media-img img{
width:100%;
height:100%;
object-fit:cover;
}

@media(min-width:800px){

.media{
grid-template-columns:1fr 1fr;
}

}
.sidebar.open{
right:0;
}

.sidebar-menu{
display:flex;
flex-direction:column;
gap:20px;
}

.sidebar-menu a{
font-size:22px;
color:var(--ink);
font-weight:600;
}


/* =========================
OVERLAY
========================= */

.overlay{
position:fixed;

top:62px;
left:0;
right:0;
bottom:0;

background:rgba(0,0,0,.50);

opacity:0;
pointer-events:none;

transition:opacity .3s;

z-index:80;

backdrop-filter:blur(3px);
}

.overlay.active{
opacity:1;
pointer-events:auto;
}


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

.btn{
display:inline-block;

padding:12px 20px;

border-radius:10px;

font-weight:600;

background:var(--brand);
color:#fff;

text-decoration:none;
}

.btn:hover{
opacity:.9;
text-decoration:none;
}

.btn-secondary{
background:var(--accent);
}

.cta{
background:var(--accent);
color:#fff!important;
padding:10px 16px;
border-radius:10px;
font-weight:700;
}


/* =========================
GRID
========================= */

.grid-3{
display:grid;
gap:20px;
}

.card{
background:#fff;
padding:22px;
border-radius:var(--radius);
box-shadow:var(--shadow);
height: 100%;
}

.card h3{
margin-bottom:8px;
}

.success{
background:#e8f7ef;
color:#1b6e45;
padding:10px;
border-radius:8px;
margin-bottom:15px;
}

.error{
background:#ffe9e9;
color:#a52828;
padding:10px;
border-radius:8px;
margin-bottom:15px;
}
/* =========================
ICON CARDS
========================= */

.icon-card{
display:flex;
gap:16px;
align-items: center;
padding:20px;

background:#fff;

border-radius:var(--radius);

box-shadow:var(--shadow);

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

}

.icon-card:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.icon-circle{
width: 30px;
height:30px;

border-radius:50%;

background:var(--accent);

display:flex;
align-items:center;
justify-content:center;

flex-shrink:0;
}

.icon-circle svg{
width:22px;
height:22px;
stroke:#fff;
}


/* =========================
HERO
========================= */

.hero{
position:relative;
overflow:hidden;
border-radius:var(--radius);
margin-bottom:50px;
}

.hero-image{
width:100%;
height:340px;
object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;

background:linear-gradient(
rgba(0,0,0,.35),
rgba(0,0,0,.35)
);

display:flex;
align-items:center;
}

.hero-content{
color:#fff;
padding:30px;
max-width:700px;
}

.hero-content h1{
font-size:1.8rem;
margin-bottom:10px;
}

.hero-content p{
font-size:1.1rem;
opacity:.95;
}


/* =========================
MICRO ANIMATION
========================= */

.fade-in{
opacity:0;
transform:translateY(12px);
animation:fadeIn .6s ease forwards;
}

@keyframes fadeIn{

to{
opacity:1;
transform:none;
}

}


/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

.nav{
display:none;
}

.menu-toggle{
display:block;
}

.logo{
display:flex;
align-items:center;
}

}


@media(min-width:700px){

.hero-image{
height:460px;
}

.hero-content h1{
font-size:2.6rem;
}

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

}
/* =========================
MEDIA BLOCK
========================= */

.media{
display:grid;
gap:30px;
align-items:center;
margin-bottom:40px;
}

.media-img{
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
}

.media-img img{
width:100%;
height:100%;
object-fit:cover;
}

@media(min-width:800px){

.media{
grid-template-columns:1fr 1fr;
}

.media.reverse{
grid-template-columns:1fr 1fr;
}

.media.reverse .media-img{
order:-1;
}

}