/* ==========================================================
   style.css
   Life Spiritual Coach
   Version 2026
========================================================== */

:root{

--primary:#0B5FA5;

--primary-dark:#08497F;

--secondary:#C89A42;

--accent:#EEF6FB;

--background:#FFFFFF;

--surface:#F7FAFC;

--text:#1E293B;

--text-light:#64748B;

--border:#E2E8F0;

--success:#2E8B57;

--radius:18px;

--shadow:
0 18px 50px rgba(15,23,42,.08);

--transition:.35s ease;

--container:1240px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}

body{

font-family:"Inter",sans-serif;

background:var(--background);

color:var(--text);

line-height:1.75;

font-size:17px;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--container));

margin:auto;

}

section{

padding:110px 0;

position:relative;

}

.section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-tag{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:#E8F4FD;

color:var(--primary);

font-weight:700;

letter-spacing:.08em;

font-size:.82rem;

margin-bottom:18px;

text-transform:uppercase;

}

.section-heading h2{

font-size:clamp(2rem,5vw,3.5rem);

font-weight:800;

line-height:1.15;

margin-bottom:22px;

}

.section-description{

color:var(--text-light);

font-size:1.12rem;

line-height:1.9;

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

background:rgba(255,255,255,.82);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(226,232,240,.7);

transition:var(--transition);

}

header.scrolled{

box-shadow:0 12px 40px rgba(15,23,42,.08);

background:rgba(255,255,255,.94);

}

header .container{

height:84px;

display:flex;

align-items:center;

justify-content:space-between;

gap:32px;

}

.logo img{

height:56px;

width:auto;

}

.desktop-nav ul{

display:flex;

align-items:center;

gap:34px;

}

.desktop-nav a{

font-weight:600;

color:var(--text);

position:relative;

padding:6px 0;

}

.desktop-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.desktop-nav a:hover::after,

.desktop-nav a.active::after{

width:100%;

}

.header-actions{

display:flex;

align-items:center;

gap:16px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 30px;

border-radius:999px;

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#fff;

font-weight:700;

box-shadow:0 15px 35px rgba(11,95,165,.28);

transition:var(--transition);

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 22px 48px rgba(11,95,165,.35);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 30px;

border:2px solid var(--primary);

border-radius:999px;

font-weight:700;

color:var(--primary);

background:#fff;

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

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

#hero,
.page-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:84px;

}

.hero-image{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(90deg,
rgba(6,20,35,.72),
rgba(6,20,35,.46));

}

.hero-container{

position:relative;

z-index:2;

}

.hero-content{

max-width:760px;

color:#fff;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:rgba(255,255,255,.14);

backdrop-filter:blur(10px);

font-weight:700;

margin-bottom:26px;

}

.hero-content h1{

font-size:clamp(3rem,7vw,5.6rem);

line-height:1.05;

font-weight:800;

margin-bottom:28px;

}

.hero-subtitle{

font-size:1.25rem;

line-height:1.9;

max-width:700px;

opacity:.96;

margin-bottom:42px;

}

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:18px;

}

.hero-trust{

display:flex;

flex-wrap:wrap;

gap:26px;

margin-top:55px;

font-weight:600;

color:#fff;

}
/* ==========================================================
   CARDS
========================================================== */

.about-grid,
.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.services-grid,
.features-grid,
.why-grid,
.intro-grid,
.quotes-grid{

display:grid;

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

gap:32px;

}

.service-card,
.feature-card,
.why-card,
.intro-card,
.quote-card,
.contact-card,
.value-box{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

border:1px solid var(--border);

}

.service-card:hover,
.feature-card:hover,
.why-card:hover,
.intro-card:hover,
.quote-card:hover{

transform:translateY(-8px);

}

.service-content{

padding:28px;

}

.service-content h3{

margin-bottom:16px;

font-size:1.45rem;

}

.service-content p{

color:var(--text-light);

}

/* ==========================================================
   FORM
========================================================== */

.contact-form{

display:flex;

flex-direction:column;

gap:22px;

}

.form-group{

display:flex;

flex-direction:column;

gap:10px;

}

input,
textarea{

padding:16px 18px;

border-radius:14px;

border:1px solid var(--border);

font:inherit;

}

textarea{

resize:vertical;

min-height:170px;

}

input:focus,
textarea:focus{

outline:none;

border-color:var(--primary);

}

/* ==========================================================
   FAQ
========================================================== */

.faq-item{

margin-bottom:18px;

border-radius:16px;

overflow:hidden;

border:1px solid var(--border);

}

.faq-question{

width:100%;

padding:22px;

border:none;

background:#fff;

text-align:left;

font-size:1.08rem;

font-weight:700;

cursor:pointer;

}

.faq-answer{

padding:22px;

border-top:1px solid var(--border);

}

/* ==========================================================
   COOKIE
========================================================== */

#cookie-banner{

position:fixed;

left:24px;

right:24px;

bottom:24px;

padding:22px;

background:#fff;

border-radius:18px;

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

z-index:9999;

display:none;

}

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

footer{

background:#0F172A;

color:#fff;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

}

.footer-logo{

width:170px;

margin-bottom:24px;

}

.footer-column h3{

margin-bottom:20px;

}

.footer-column li{

margin-bottom:12px;

}

.footer-column a:hover{

color:#7CC6FF;

}

.footer-bottom{

margin-top:60px;

padding-top:24px;

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

text-align:center;

}

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

@media (max-width:991px){

.desktop-nav{

display:none;

}

.about-grid,
.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:3rem;

}

section{

padding:80px 0;

}

}

@media (max-width:768px){

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.container{

width:94%;

}

.hero-trust{

flex-direction:column;

gap:12px;

}

}

/* ==========================================================
   END
========================================================== */