*{box-sizing:border-box}
html{margin:0;padding:0;scroll-behavior:smooth}
body{margin:0;padding:0;overflow-x:hidden;background:#f6f0e8;color:#092f39;font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
:root{--cream:#f6f0e8;--teal:#07333d;--orange:#f06e42;--green:#00e46d;--white:#fffaf2}
/* HEADER */
.site-header{position:sticky;top:0;z-index:1000;background:var(--cream);border-bottom:1px solid rgba(7,51,61,.10)}
.header-inner{width:100%;max-width:1540px;min-height:104px;margin:0 auto;padding:0 46px;display:flex;align-items:center;gap:28px}
.site-logo{flex:0 0 auto;white-space:nowrap;color:#092f39;font:700 26px/1 Georgia,"Times New Roman",serif;letter-spacing:-.45px}
.desktop-navigation{margin-left:auto;display:flex;align-items:center;gap:30px}
.desktop-navigation a{font-size:10px;font-weight:800;letter-spacing:2.2px;color:#213940}
.header-action{display:flex;align-items:center;gap:13px;margin-left:13px;flex:0 0 auto}
/* HEADER POINTING HAND — points toward CONNECT */
.header-hand{
width:39px;
height:32px;
object-fit:contain;
flex:0 0 39px;
transform:translateX(0);
transform-origin:center right;
animation:headerHandPoint 1.8s ease-in-out infinite;
}
@keyframes headerHandPoint{
0%,100%{transform:translateX(0)}
35%{transform:translateX(3px)}
55%{transform:translateX(7px)}
72%{transform:translateX(3px)}
}
.connect-button{position:relative;width:126px;height:45px;border:1px solid rgba(0,228,109,.85);border-radius:999px;background:#082f39;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;font-weight:900;letter-spacing:1.6px;box-shadow:0 0 0 2px rgba(0,228,109,.08),0 0 17px rgba(0,228,109,.28);animation:connectGlow 2.5s ease-in-out infinite}
.connect-button:before{content:"";position:absolute;inset:-4px;border:1px solid rgba(0,228,109,.22);border-radius:inherit;animation:connectRing 2.5s ease-out infinite;pointer-events:none}
@keyframes connectGlow{50%{box-shadow:0 0 0 3px rgba(0,228,109,.12),0 0 25px rgba(0,228,109,.42)}}
@keyframes connectRing{0%{opacity:.55;transform:scale(.98)}70%{opacity:0;transform:scale(1.08)}100%{opacity:0}}
.connect-whatsapp,.connect-whatsapp svg{width:18px;height:18px;display:block}
.connect-whatsapp svg>path:first-child{fill:var(--green)}
.connect-whatsapp .whatsapp-phone{fill:#082f39}
.mobile-menu-button{display:none;border:0;background:transparent;padding:0}
/* MOBILE NAV */
.mobile-navigation{display:none}
/* HERO */
.hero-section{position:relative;min-height:calc(100vh - 104px);padding:54px 4.2vw 100px;background:var(--teal);color:#fff;display:grid;grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr);align-items:center;gap:3.2vw;overflow:hidden}
.hero-section:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-74px;height:125px;background:var(--cream);border-radius:50% 50% 0 0/70% 70% 0 0;pointer-events:none}
.hero-content{position:relative;z-index:3;max-width:630px;order:1}
.hero-subtitle-row{display:flex;align-items:center;gap:16px;margin:0 0 23px}
.hero-subtitle-line{width:47px;height:1px;background:var(--orange);flex:0 0 47px}
.hero-subtitle{color:var(--orange);font-size:10px;line-height:1.3;font-weight:800;letter-spacing:2.5px;white-space:nowrap}
.hero-title{margin:0 0 24px;color:#fff9f1;font:700 clamp(48px,4.4vw,70px)/.95 Georgia,"Times New Roman",serif;letter-spacing:-2px;max-width:670px}
.hero-description{max-width:575px;margin:0 0 29px;color:rgba(255,250,242,.87);font-size:14px;line-height:1.55}
.hero-whatsapp-button{position:relative;width:330px;min-height:58px;border-radius:999px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:11px;font-size:12px;font-weight:900;letter-spacing:1.25px;box-shadow:0 0 0 2px rgba(0,228,109,.18),0 0 22px rgba(0,228,109,.33);animation:messageGlow 2.3s ease-in-out infinite}
.hero-whatsapp-button:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(0,228,109,.25);border-radius:inherit;animation:messageRing 2.3s ease-out infinite}
@keyframes messageGlow{50%{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(0,228,109,.12),0 0 31px rgba(0,228,109,.47)}}
@keyframes messageRing{0%{opacity:.5;transform:scale(.98)}70%{opacity:0;transform:scale(1.07)}100%{opacity:0}}
.hero-whatsapp-icon,.hero-whatsapp-icon svg{width:21px;height:21px;display:block}
.hero-whatsapp-icon svg>path:first-child{fill:#fff}
.hero-whatsapp-icon .whatsapp-phone{fill:var(--green)}
/* HERO IMAGE + CORNERS + CALL NOW */
.hero-visual{position:relative;width:100%;max-width:700px;margin:0 auto;z-index:2;order:2}
.hero-stage{position:relative;width:100%;padding:18px 0 23px}
.hero-image-frame{position:relative;z-index:2;width:86%;margin:0 auto;padding:15px;background:#f4eee6;box-shadow:0 5px 20px rgba(0,0,0,.08)}
.hero-image{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero-corner{position:absolute;z-index:5;width:52px;height:52px;border:3px solid var(--orange)}
/* Deliberate breathing space between corner and image */
.hero-corner-top-left{left:3.2%;top:0;border-right:0;border-bottom:0}
.hero-corner-top-right{right:3.2%;top:0;border-left:0;border-bottom:0}
.hero-corner-bottom-left{left:3.2%;bottom:0;border-right:0;border-top:0}
.hero-corner-bottom-right{right:3.2%;bottom:0;border-left:0;border-top:0}
.hero-call-area{position:relative;z-index:7;width:100%;display:flex;flex-direction:column;align-items:center;margin-top:16px}
.hero-call-hand{width:42px;height:39px;object-fit:contain;margin-bottom:5px;transform:rotate(90deg);filter:brightness(0) saturate(100%) invert(54%) sepia(72%) saturate(1860%) hue-rotate(332deg) brightness(100%) contrast(93%);animation:callHand 1.7s ease-in-out infinite}
@keyframes callHand{0%,100%{transform:translateY(0) rotate(90deg)}45%{transform:translateY(5px) rotate(90deg)}70%{transform:translateY(1px) rotate(90deg)}}
.hero-call-button{width:245px;height:58px;border:2px solid var(--orange);border-radius:999px;background:#082f39;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;font-weight:900;letter-spacing:1.8px;box-shadow:0 0 0 1px rgba(240,110,66,.18),0 0 19px rgba(240,110,66,.42);animation:callGlow 2.2s ease-in-out infinite}
@keyframes callGlow{50%{transform:scale(1.025);box-shadow:0 0 0 3px rgba(240,110,66,.18),0 0 30px rgba(240,110,66,.56)}}
.call-icon,.call-icon svg{width:18px;height:18px;display:block}.call-icon svg{fill:#fff}
/* FLOATING WHATSAPP */
.floating-whatsapp{position:fixed;right:25px;bottom:24px;z-index:1200;width:124px;height:82px;display:flex;align-items:center;justify-content:flex-end}
.floating-whatsapp-circle{position:relative;width:70px;height:70px;flex:0 0 70px;border-radius:50%;background:var(--green);display:grid;place-items:center;border:2px solid rgba(255,255,255,.35);box-shadow:0 0 0 7px rgba(0,228,109,.09),0 0 0 13px rgba(0,228,109,.03),0 0 28px rgba(0,228,109,.48);animation:floatingPulse 2.3s ease-in-out infinite}
.floating-whatsapp-circle svg{width:39px;height:39px}.floating-whatsapp-circle svg>path:first-child{fill:#fff}.floating-whatsapp-circle .whatsapp-phone{fill:var(--green)}
.floating-whatsapp-ripple{position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(0,228,109,.40);animation:floatingRing 2.3s ease-out infinite}
@keyframes floatingPulse{50%{transform:scale(1.045)}}
@keyframes floatingRing{0%{opacity:.58;transform:scale(.88)}70%{opacity:0;transform:scale(1.16)}100%{opacity:0}}
.floating-hand{position:absolute;right:76px;top:50%;width:40px;height:33px;transform:translateY(-50%) scaleX(-1);z-index:2;display:block}
.floating-hand img{width:100%;height:100%;object-fit:contain;filter:brightness(0) saturate(100%) invert(86%) sepia(95%) saturate(1290%) hue-rotate(7deg) brightness(104%) contrast(104%);animation:floatingHand 1.5s ease-in-out infinite}
@keyframes floatingHand{0%,100%{transform:translateX(0) scaleX(-1)}45%{transform:translateX(6px) scaleX(-1)}70%{transform:translateX(1px) scaleX(-1)}}
.placeholder-section{min-height:1px;background:var(--cream)}
/* TABLET */
@media(max-width:1050px){.header-inner{padding:0 30px}.desktop-navigation{gap:20px}.header-action{gap:11px;margin-left:8px}.hero-section{grid-template-columns:minmax(0,1fr) minmax(450px,1fr);padding-left:3.5vw;padding-right:3.5vw}.hero-title{font-size:clamp(44px,5vw,62px)}}
/* MOBILE */
@media(max-width:760px){
.site-header{height:94px}.header-inner{min-height:94px;padding:0 15px 0 22px;gap:0}.site-logo{font-size:23px;letter-spacing:-.5px}.desktop-navigation{display:none}.header-action{margin-left:auto;gap:10px}.header-hand{width:31px;height:27px;flex:0 0 31px;transform:translateX(0);animation:headerHandPointMobile 1.7s ease-in-out infinite}
@keyframes headerHandPointMobile{
0%,100%{transform:translateX(0)}
35%{transform:translateX(3px)}
55%{transform:translateX(6px)}
72%{transform:translateX(2px)}
}
.connect-button{width:108px;min-width:108px;height:41px;padding:0 11px;gap:6px;font-size:8px;letter-spacing:1.25px}.connect-whatsapp,.connect-whatsapp svg{width:17px;height:17px}.mobile-menu-button{width:31px;height:38px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}.mobile-menu-button span{width:25px;height:3px;border-radius:4px;background:#092f39;transition:transform .25s ease,opacity .2s ease}.mobile-menu-open .mobile-menu-button span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-open .mobile-menu-button span:nth-child(2){opacity:0}.mobile-menu-open .mobile-menu-button span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-navigation{position:fixed;top:94px;left:0;right:0;z-index:999;display:flex;flex-direction:column;gap:22px;padding:25px 28px 29px;background:var(--cream);box-shadow:0 14px 30px rgba(9,47,58,.14);transform:translateY(-120%);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.75,.25,1),opacity .2s ease}.mobile-menu-open .mobile-navigation{transform:translateY(0);opacity:1;pointer-events:auto}.mobile-navigation a{font-size:13px;font-weight:800;letter-spacing:2.3px;color:#092f39}
.hero-section{min-height:0;padding:27px 0 75px;display:flex;flex-direction:column;gap:0;background:var(--teal)}.hero-section:after{bottom:-42px;height:78px}.hero-visual{width:100%;max-width:none;order:1}.hero-stage{padding:8px 0 17px}.hero-image-frame{width:90%;padding:9px;margin:0 auto}.hero-image{aspect-ratio:1/1;object-fit:cover}.hero-corner{width:46px;height:46px;border-width:3px}.hero-corner-top-left{left:3%;top:0}.hero-corner-top-right{right:3%;top:0}.hero-corner-bottom-left{left:3%;bottom:0}.hero-corner-bottom-right{right:3%;bottom:0}.hero-call-area{margin-top:13px}.hero-call-hand{width:39px;height:35px;margin-bottom:5px}.hero-call-button{width:218px;height:54px;font-size:10px;letter-spacing:1.7px}
.hero-content{width:100%;max-width:none;padding:31px 27px 20px;order:2}.hero-subtitle-row{gap:10px;margin-bottom:19px}.hero-subtitle-line{width:40px;flex-basis:40px}.hero-subtitle{font-size:7.5px;letter-spacing:1.9px;white-space:nowrap}.hero-title{margin-bottom:22px;font-size:clamp(40px,11.5vw,55px);line-height:.94;letter-spacing:-1.2px}.hero-description{margin-bottom:27px;font-size:13px;line-height:1.55}.hero-whatsapp-button{width:calc(100% - 10px);margin-left:5px;min-height:58px;font-size:10px;letter-spacing:1px}.hero-whatsapp-icon,.hero-whatsapp-icon svg{width:20px;height:20px}
.floating-whatsapp{right:12px;bottom:14px;width:110px;height:75px}.floating-whatsapp-circle{width:65px;height:65px;flex-basis:65px}.floating-whatsapp-circle svg{width:37px;height:37px}.floating-hand{right:70px;width:37px;height:31px}
}
@media(max-width:390px){.header-inner{padding-left:17px;padding-right:10px}.site-logo{font-size:21px}.header-action{gap:7px}.header-hand{width:28px;height:24px}.connect-button{width:100px;min-width:100px;height:39px;padding:0 9px;font-size:7.5px}.mobile-menu-button{width:29px}.hero-stage{padding-top:7px}.hero-image-frame{width:91%;padding:8px}.hero-corner{width:42px;height:42px}.hero-corner-top-left{left:2.5%}.hero-corner-top-right{right:2.5%}.hero-corner-bottom-left{left:2.5%}.hero-corner-bottom-right{right:2.5%}.hero-content{padding-left:22px;padding-right:22px}.hero-title{font-size:39px}.hero-whatsapp-button{width:96%;margin-left:2%}.floating-whatsapp{right:8px;bottom:12px}}
/* =========================================================
CHAPTER 01 — THE JOURNEY
PREMIUM RESPONSIVE VERSION
========================================================= */
.chapter-01-section {
width: 100%;
padding: 115px 0 125px;
background: #f4f7f3;
overflow: hidden;
}
.chapter-01-container {
width: min(1120px, calc(100% - 80px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 450px);
align-items: center;
column-gap: 85px;
position: relative;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.chapter-01-content {
width: 100%;
max-width: 570px;
margin: 0 auto;
}
.chapter-01-label {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
font-size: 11px;
line-height: 1;
letter-spacing: 4px;
font-weight: 700;
color: #71847a;
}
.chapter-01-label span {
display: block;
width: 34px;
height: 1px;
background: #71847a;
}
.chapter-01-title {
margin: 0 0 25px;
font-size: clamp(40px, 4vw, 57px);
line-height: 1.05;
font-weight: 500;
letter-spacing: -1.2px;
color: #173b38;
}
.chapter-01-text {
max-width: 560px;
margin: 0 0 17px;
font-size: 15.5px;
line-height: 1.85;
color: #5c6963;
}
/* =========================================================
INFORMATION CARD
========================================================= */
.chapter-01-info {
width: 100%;
margin-top: 34px;
padding: 22px 27px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(44, 76, 69, 0.13);
border-radius: 14px;
box-shadow:
0 16px 40px rgba(28, 57, 51, 0.07);
position: relative;
}
.chapter-01-info::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 2px;
background: #718b7d;
border-radius: 2px;
}
.chapter-01-info-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
align-items: center;
gap: 20px;
padding: 13px 0;
border-bottom: 1px solid rgba(44, 76, 69, 0.09);
}
.chapter-01-info-row:first-child {
padding-top: 0;
}
.chapter-01-info-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.chapter-01-info-row span {
font-size: 9px;
letter-spacing: 2px;
font-weight: 700;
color: #89958f;
}
.chapter-01-info-row strong {
font-size: 13.5px;
line-height: 1.5;
font-weight: 600;
color: #23443f;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.chapter-01-image-wrap {
position: relative;
width: 100%;
max-width: 450px;
margin: 0 auto;
padding: 12px;
background: #ffffff;
border: 1px solid rgba(44, 76, 69, 0.18);
box-shadow:
0 25px 60px rgba(28, 58, 51, 0.13);
animation: chapter01Float 6s ease-in-out infinite;
isolation: isolate;
}
/* Inner elegant frame */
.chapter-01-image-wrap::before {
content: "";
position: absolute;
inset: 7px;
border: 1px solid rgba(44, 76, 69, 0.18);
pointer-events: none;
z-index: 3;
}
/* Decorative corner */
.chapter-01-image-wrap::after {
content: "";
position: absolute;
right: -11px;
bottom: -11px;
width: 58px;
height: 58px;
border-right: 2px solid #718b7d;
border-bottom: 2px solid #718b7d;
pointer-events: none;
z-index: 4;
}
.chapter-01-image {
display: block;
width: 100%;
height: 510px;
object-fit: cover;
object-position: center;
position: relative;
z-index: 2;
transition:
transform 0.65s ease,
filter 0.65s ease;
}
.chapter-01-image-wrap:hover .chapter-01-image {
transform: scale(1.018);
filter: brightness(1.025);
}
/* =========================================================
IMAGE FLOAT
========================================================= */
@keyframes chapter01Float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.chapter-01-section {
padding: 90px 0 100px;
}
.chapter-01-container {
width: min(720px, calc(100% - 50px));
grid-template-columns: 1fr;
gap: 55px;
}
/*
* Image first on tablet/mobile
*/
.chapter-01-image-wrap {
order: 1;
width: min(100%, 430px);
margin: 0 auto;
}
.chapter-01-content {
order: 2;
max-width: 650px;
margin: 0 auto;
}
.chapter-01-image {
height: 490px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.chapter-01-section {
padding: 65px 0 75px;
}
.chapter-01-container {
width: calc(100% - 32px);
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
/* IMAGE FIRST */
.chapter-01-image-wrap {
order: 1;
width: calc(100% - 12px);
max-width: 390px;
margin: 0 auto;
padding: 9px;
}
.chapter-01-image {
width: 100%;
height: 430px;
}
/* CONTENT BELOW IMAGE */
.chapter-01-content {
order: 2;
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: left;
}
.chapter-01-label {
gap: 9px;
margin-bottom: 15px;
font-size: 9px;
letter-spacing: 3px;
}
.chapter-01-label span {
width: 25px;
}
.chapter-01-title {
margin-bottom: 18px;
font-size: 38px;
line-height: 1.08;
}
.chapter-01-text {
font-size: 14px;
line-height: 1.78;
margin-bottom: 15px;
}
/* MOBILE INFO CARD */
.chapter-01-info {
margin-top: 25px;
padding: 18px 18px;
border-radius: 12px;
}
.chapter-01-info-row {
grid-template-columns: 90px minmax(0, 1fr);
gap: 12px;
padding: 12px 0;
}
.chapter-01-info-row span {
font-size: 8.5px;
letter-spacing: 1.5px;
}
.chapter-01-info-row strong {
font-size: 12.5px;
}
.chapter-01-info::before {
top: 15px;
bottom: 15px;
}
.chapter-01-image-wrap::after {
right: -7px;
bottom: -7px;
width: 42px;
height: 42px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.chapter-01-container {
width: calc(100% - 24px);
gap: 34px;
}
.chapter-01-image-wrap {
width: calc(100% - 8px);
}
.chapter-01-image {
height: 390px;
}
.chapter-01-title {
font-size: 34px;
}
.chapter-01-info-row {
grid-template-columns: 82px minmax(0, 1fr);
gap: 10px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.chapter-01-image-wrap {
animation: none;
}
.chapter-01-image {
transition: none;
}
}
/* =========================================================
CHAPTER 02
VALUES & ROOTS
========================================================= */
.chapter-02-section {
position: relative;
width: 100%;
overflow: hidden;
background: #10242d;
color: #f7efe6;
padding: 90px 24px 80px;
}
.chapter-02-container {
width: min(1120px, 100%);
margin: 0 auto;
}
/* =========================================================
INTRO
========================================================= */
.chapter-02-intro {
max-width: 720px;
margin: 0 auto 42px;
}
.chapter-02-label {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.chapter-02-label-line {
width: 38px;
height: 2px;
flex: 0 0 auto;
background: #d86b3d;
}
.chapter-02-label-text {
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1;
letter-spacing: 3px;
font-weight: 600;
color: #d86b3d;
text-transform: uppercase;
}
.chapter-02-title {
margin: 0;
color: #f6eee5;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(38px, 5vw, 62px);
line-height: 1.05;
font-weight: 600;
}
.chapter-02-description {
max-width: 620px;
margin: 22px 0 0;
color: rgba(247, 239, 230, 0.68);
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.75;
}
/* =========================================================
CARDS
========================================================= */
.chapter-02-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
max-width: 980px;
margin: 0 auto;
}
.chapter-02-card {
position: relative;
min-height: 260px;
padding: 34px 32px 32px;
background: #1c3540;
border: 1px solid rgba(255, 255, 255, 0.025);
box-sizing: border-box;
overflow: hidden;
}
.chapter-02-card-top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: #c9653b;
}
.chapter-02-card-icon {
width: 25px;
height: 25px;
margin-bottom: 18px;
}
.chapter-02-card-icon svg {
display: block;
width: 100%;
height: 100%;
fill: #d96b3d;
}
.chapter-02-roots-icon svg {
fill: none;
stroke: #d96b3d;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.chapter-02-card-title {
margin: 0 0 16px;
color: #f7efe6;
font-family: Georgia, "Times New Roman", serif;
font-size: 25px;
line-height: 1.2;
font-weight: 600;
}
.chapter-02-card-text {
margin: 0;
color: rgba(247, 239, 230, 0.70);
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
WHATSAPP CONNECT AREA
========================================================= */
.chapter-02-connect {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 245px;
margin-top: 65px;
padding-top: 52px;
box-sizing: border-box;
}
/* =========================================================
CHAPTER 02 - DOWNWARD POINTING HAND
FIXED DIRECTION + UP/DOWN ANIMATION
========================================================= */
.chapter-02-connect-hand {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: auto;
object-fit: contain;
z-index: 5;
pointer-events: none;
/* DIRECTION FIXED - TOP TO BOTTOM */
transform: translateX(-50%) rotate(90deg);
transform-origin: 50% 50%;
/* ONLY UP / DOWN */
animation:
chapter02HandPoint
1.8s
ease-in-out
infinite;
}
/* =========================================================
HAND ANIMATION
ONLY UP / DOWN
NO LEFT / RIGHT
NO ROTATION
========================================================= */
@keyframes chapter02HandPoint {
0%,
100% {
top: 0;
}
50% {
top: 8px;
}
}
/* =========================================================
WHATSAPP RING
========================================================= */
.chapter-02-whatsapp-ring {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 112px;
height: 112px;
border: 1px dotted #d96b3d;
border-radius: 50%;
box-sizing: border-box;
z-index: 2;
animation: chapter02RingPulse 2.4s ease-in-out infinite;
}
@keyframes chapter02RingPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.035);
}
}
/* =========================================================
WHATSAPP BUTTON
========================================================= */
.chapter-02-whatsapp-button {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
border-radius: 50%;
background: #25d366;
box-shadow:
0 0 0 7px rgba(37, 211, 102, 0.08),
0 8px 28px rgba(0, 0, 0, 0.25);
text-decoration: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.chapter-02-whatsapp-button:hover {
transform: scale(1.07);
box-shadow:
0 0 0 9px rgba(37, 211, 102, 0.10),
0 12px 34px rgba(0, 0, 0, 0.30);
}
.chapter-02-whatsapp-button svg {
width: 38px;
height: 38px;
display: block;
fill: #ffffff;
}
.chapter-02-whatsapp-button .whatsapp-phone {
fill: #25d366;
}
/* =========================================================
LET'S CONNECT
========================================================= */
.chapter-02-connect-text {
margin-top: 17px;
color: #d96b3d;
font-family: "Brush Script MT", "Segoe Script", cursive;
font-size: 18px;
line-height: 1;
font-style: italic;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.chapter-02-section {
padding:
75px
22px
70px;
}
.chapter-02-cards {
gap: 22px;
}
.chapter-02-card {
padding: 30px 26px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.chapter-02-section {
padding:
52px
18px
48px;
}
.chapter-02-container {
width: 100%;
}
/* INTRO */
.chapter-02-intro {
width: 100%;
margin-bottom: 30px;
}
.chapter-02-label {
gap: 11px;
margin-bottom: 18px;
}
.chapter-02-label-line {
width: 25px;
}
.chapter-02-label-text {
font-size: 8px;
letter-spacing: 2.4px;
}
.chapter-02-title {
font-size: 34px;
line-height: 1.08;
}
.chapter-02-description {
margin-top: 16px;
font-size: 12px;
line-height: 1.65;
max-width: 330px;
}
/* CARDS */
.chapter-02-cards {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.chapter-02-card {
width: 100%;
min-height: auto;
padding:
27px
20px
25px;
}
.chapter-02-card-icon {
width: 21px;
height: 21px;
margin-bottom: 13px;
}
.chapter-02-card-title {
margin-bottom: 12px;
font-size: 20px;
}
.chapter-02-card-text {
font-size: 11px;
line-height: 1.65;
}
/* CTA */
.chapter-02-connect {
min-height: 225px;
margin-top: 34px;
padding-top: 48px;
}
.chapter-02-connect-hand {
width: 39px;
top: 0;
}
.chapter-02-whatsapp-ring {
width: 104px;
height: 104px;
}
.chapter-02-whatsapp-button {
width: 70px;
height: 70px;
}
.chapter-02-whatsapp-button svg {
width: 34px;
height: 34px;
}
.chapter-02-connect-text {
margin-top: 15px;
font-size: 16px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.chapter-02-section {
padding-left: 15px;
padding-right: 15px;
}
.chapter-02-title {
font-size: 31px;
}
.chapter-02-card {
padding-left: 18px;
padding-right: 18px;
}
}
/* =========================================================
CHAPTER 02 - MOBILE ENTRANCE ANIMATIONS
========================================================= */
@keyframes chapter02FadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes chapter02FadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 700px) {
.chapter-02-intro {
animation:
chapter02FadeUp
0.8s
ease-out
both;
}
.chapter-02-card:nth-child(1) {
animation:
chapter02FadeUp
0.8s
0.15s
ease-out
both;
}
.chapter-02-card:nth-child(2) {
animation:
chapter02FadeUp
0.8s
0.30s
ease-out
both;
}
.chapter-02-connect {
animation:
chapter02FadeUp
0.8s
0.45s
ease-out
both;
}
.chapter-02-whatsapp-ring {
animation:
chapter02RingPulse
2.4s
ease-in-out
infinite;
}
}
/* =========================================================
CHAPTER 03 - LIFE & FUTURE
PREMIUM RESPONSIVE SECTION
========================================================= */
.chapter-03-section {
position: relative;
width: 100%;
padding: 110px 20px 120px;
overflow: hidden;
box-sizing: border-box;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.chapter-03-container {
width: min(1120px, 100%);
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================================
INTRO
========================================================= */
.chapter-03-intro {
width: 100%;
max-width: 820px;
margin: 0 auto 65px;
text-align: center;
}
.chapter-03-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
.chapter-03-label-line {
display: block;
width: 34px;
height: 1px;
background: currentColor;
}
.chapter-03-title {
margin: 0 0 20px;
font-size: clamp(38px, 5vw, 64px);
line-height: 1.05;
font-weight: 600;
letter-spacing: -1.5px;
}
.chapter-03-description {
max-width: 690px;
margin: 0 auto;
font-size: 17px;
line-height: 1.8;
font-weight: 400;
}
/* =========================================================
PREMIUM TWO COLUMN GRID
========================================================= */
.chapter-03-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 32px;
width: 100%;
box-sizing: border-box;
}
/* =========================================================
PREMIUM CARD
========================================================= */
.chapter-03-card {
position: relative;
min-width: 0;
padding: 34px 32px 32px;
box-sizing: border-box;
border: 1px solid rgba(6, 63, 61, 0.14);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow:
0 10px 35px rgba(0, 0, 0, 0.07);
overflow: hidden;
transition:
transform 0.45s ease,
box-shadow 0.45s ease,
border-color 0.45s ease;
}
/* =========================================================
PREMIUM CARD TOP ACCENT
========================================================= */
.chapter-03-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #063f3d;
opacity: 0.95;
}
/* =========================================================
CARD HOVER
========================================================= */
.chapter-03-card:hover {
transform: translateY(-7px);
border-color:
rgba(6, 63, 61, 0.25);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.11);
}
/* =========================================================
TOP LINE
========================================================= */
.chapter-03-card-line {
width: 100%;
height: 1px;
margin-bottom: 28px;
background: currentColor;
opacity: 0.14;
}
/* =========================================================
ICON
========================================================= */
.chapter-03-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
margin-bottom: 20px;
border:
1px solid rgba(6, 63, 61, 0.25);
border-radius: 50%;
box-sizing: border-box;
font-size: 22px;
background:
rgba(6, 63, 61, 0.035);
opacity: 0.95;
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
background 0.4s ease;
}
.chapter-03-card:hover .chapter-03-card-icon {
transform:
translateY(-3px)
scale(1.04);
background:
rgba(6, 63, 61, 0.07);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.09);
}
.chapter-03-icon-arrow {
display: block;
font-size: 22px;
line-height: 1;
}
.chapter-03-icon-person {
display: block;
font-size: 22px;
line-height: 1;
}
/* =========================================================
CARD TITLE
========================================================= */
.chapter-03-card-title {
margin: 0 0 16px;
font-size: 27px;
line-height: 1.25;
font-weight: 600;
letter-spacing: -0.3px;
}
/* =========================================================
CARD TEXT
========================================================= */
.chapter-03-card-text {
max-width: 470px;
margin: 0;
font-size: 16px;
line-height: 1.85;
font-weight: 400;
}
/* =========================================================
WHATSAPP CONNECT AREA
========================================================= */
.chapter-03-connect {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 65px;
min-height: 115px;
box-sizing: border-box;
}
/* =========================================================
WHATSAPP BUTTON
========================================================= */
.chapter-03-whatsapp {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 190px;
min-height: 58px;
padding: 12px 25px;
box-sizing: border-box;
border-radius: 999px;
text-decoration: none;
color: #ffffff;
background: #063f3d;
border:
1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 0 0 rgba(37, 211, 102, 0);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* =========================================================
WHATSAPP BUTTON HOVER
========================================================= */
.chapter-03-whatsapp:hover {
transform:
translateY(-3px);
box-shadow:
0 0 0 5px rgba(37, 211, 102, 0.08),
0 12px 35px rgba(0, 0, 0, 0.16);
}
/* =========================================================
WHATSAPP BUTTON ACTIVE
========================================================= */
.chapter-03-whatsapp:active {
transform:
translateY(0)
scale(0.98);
}
/* =========================================================
WHATSAPP ICON
========================================================= */
.chapter-03-whatsapp-circle {
display: flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
flex: 0 0 29px;
}
.chapter-03-whatsapp-circle svg {
display: block;
width: 29px;
height: 29px;
fill: #25D366;
}
.chapter-03-whatsapp-circle .whatsapp-phone {
fill: #25D366;
}
/* =========================================================
WHATSAPP TEXT
========================================================= */
.chapter-03-connect-text {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: #ffffff;
white-space: nowrap;
}
/* =========================================================
HAND
TOP -> DOWN DIRECTION
UP/DOWN ANIMATION ONLY
========================================================= */
.chapter-03-connect-hand {
position: absolute;
width: 46px;
height: auto;
/*
* Hand button ke upar centered position mein rahega.
*/
left: 50%;
top: -2px;
z-index: 5;
pointer-events: none;
object-fit: contain;
transform-origin: 50% 50%;
animation:
chapter03HandPoint
1.8s
ease-in-out
infinite;
}
/* =========================================================
HAND ANIMATION
ONLY UP / DOWN
NO LEFT / RIGHT
========================================================= */
@keyframes chapter03HandPoint {
0%,
100% {
transform:
translateX(-50%)
translateY(0);
}
50% {
transform:
translateX(-50%)
translateY(9px);
}
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1050px) {
.chapter-03-section {
padding-left: 28px;
padding-right: 28px;
}
.chapter-03-grid {
gap: 24px;
}
.chapter-03-card {
padding:
30px
26px
30px;
}
.chapter-03-card-title {
font-size: 25px;
}
.chapter-03-card-text {
font-size: 15px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.chapter-03-section {
padding:
75px
18px
90px;
box-sizing: border-box;
}
.chapter-03-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
/* -----------------------------------------------------
INTRO
----------------------------------------------------- */
.chapter-03-intro {
width: 100%;
margin:
0 auto
45px;
}
.chapter-03-label {
gap: 9px;
margin-bottom: 15px;
font-size: 10px;
letter-spacing: 2.2px;
}
.chapter-03-label-line {
width: 25px;
}
.chapter-03-title {
margin-bottom: 16px;
font-size: 40px;
letter-spacing: -0.8px;
}
.chapter-03-description {
width: 100%;
font-size: 15px;
line-height: 1.75;
}
/* -----------------------------------------------------
MOBILE CARDS
----------------------------------------------------- */
.chapter-03-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
width: 100%;
padding:
0 4px;
box-sizing: border-box;
}
.chapter-03-card {
width: 100%;
margin: 0;
padding:
28px
24px
30px;
border:
1px solid rgba(6, 63, 61, 0.16);
border-radius: 17px;
background:
rgba(255, 255, 255, 0.98);
box-shadow:
0 9px 28px rgba(0, 0, 0, 0.075);
}
.chapter-03-card:hover {
transform:
translateY(-3px);
box-shadow:
0 13px 32px rgba(0, 0, 0, 0.10);
}
.chapter-03-card-line {
margin-bottom: 22px;
}
.chapter-03-card-icon {
width: 45px;
height: 45px;
margin-bottom: 17px;
font-size: 20px;
}
.chapter-03-icon-arrow,
.chapter-03-icon-person {
font-size: 20px;
}
.chapter-03-card-title {
margin-bottom: 12px;
font-size: 24px;
line-height: 1.3;
}
.chapter-03-card-text {
width: 100%;
max-width: none;
font-size: 15px;
line-height: 1.8;
}
/* -----------------------------------------------------
MOBILE WHATSAPP
----------------------------------------------------- */
.chapter-03-connect {
width: 100%;
margin-top: 40px;
min-height: 105px;
box-sizing: border-box;
}
.chapter-03-whatsapp {
min-width: 175px;
min-height: 54px;
padding:
10px
22px;
}
.chapter-03-whatsapp-circle {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.chapter-03-whatsapp-circle svg {
width: 28px;
height: 28px;
}
.chapter-03-connect-text {
font-size: 11px;
letter-spacing: 1.7px;
}
/* -----------------------------------------------------
MOBILE HAND
----------------------------------------------------- */
.chapter-03-connect-hand {
width: 42px;
left: 50%;
top: -1px;
animation:
chapter03HandPoint
1.8s
ease-in-out
infinite;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.chapter-03-section {
padding-left: 16px;
padding-right: 16px;
}
.chapter-03-title {
font-size: 35px;
}
.chapter-03-description {
font-size: 14px;
}
/* -----------------------------------------------------
SMALL MOBILE CARD
----------------------------------------------------- */
.chapter-03-grid {
padding-left: 3px;
padding-right: 3px;
gap: 20px;
}
.chapter-03-card {
padding:
25px
20px
28px;
border-radius: 16px;
}
.chapter-03-card-title {
font-size: 22px;
}
.chapter-03-card-text {
font-size: 14px;
line-height: 1.8;
}
/* -----------------------------------------------------
SMALL MOBILE WHATSAPP
----------------------------------------------------- */
.chapter-03-whatsapp {
min-width: 165px;
}
.chapter-03-connect-hand {
width: 38px;
left: 50%;
top: 0;
}
}
/* =========================================================
GALLERY - PREMIUM RESPONSIVE
========================================================= */
.gallery-section {
width: 100%;
padding: 90px 20px 110px;
box-sizing: border-box;
overflow: hidden;
}
.gallery-container {
width: min(1180px, 100%);
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================================
GALLERY GRID
PC = 4 COLUMNS
TOTAL = MAXIMUM 8 IMAGES
========================================================= */
.gallery-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 28px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================================
IMAGE CARD
FIXED UNIFORM SIZE
========================================================= */
.gallery-item {
position: relative;
width: 100%;
/*
* Har image ka frontend frame
* exactly same proportion mein rahega.
*/
aspect-ratio: 4 / 5;
min-width: 0;
padding: 9px;
box-sizing: border-box;
background: #ffffff;
border:
1px solid
rgba(6, 63, 61, 0.12);
border-radius: 2px;
overflow: hidden;
opacity: 0;
transform:
translateY(35px)
scale(0.97);
box-shadow:
0 8px 25px
rgba(0, 0, 0, 0.06);
animation:
galleryImageReveal
0.9s
cubic-bezier(0.22, 1, 0.36, 1)
forwards;
transition:
transform 0.5s ease,
box-shadow 0.5s ease;
}
/* =========================================================
IMAGE FRAME
========================================================= */
.gallery-image-frame {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
box-sizing: border-box;
}
/* =========================================================
PREMIUM INNER FRAME
========================================================= */
.gallery-item::before {
content: "";
position: absolute;
top: 9px;
right: 9px;
bottom: 9px;
left: 9px;
border:
1px solid
rgba(6, 63, 61, 0.18);
box-sizing: border-box;
pointer-events: none;
z-index: 3;
transition:
border-color 0.45s ease,
box-shadow 0.45s ease;
}
/* =========================================================
SUBTLE INNER LIGHT
========================================================= */
.gallery-item::after {
content: "";
position: absolute;
top: 9px;
right: 9px;
bottom: 9px;
left: 9px;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.10),
transparent 35%,
transparent 65%,
rgba(255,255,255,0.06)
);
pointer-events: none;
z-index: 2;
opacity: 0;
transition:
opacity 0.5s ease;
}
/* =========================================================
IMAGE
FIXED DISPLAY SIZE
========================================================= */
.gallery-item img {
display: block;
/*
* Important:
* Original image ka width/height kuch bhi ho,
* frontend frame ko follow karegi.
*/
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
/*
* Image stretch nahi hogi.
* Zarurat par edges crop hongi.
*/
object-fit: cover;
object-position: center center;
position: relative;
z-index: 1;
box-sizing: border-box;
transition:
transform 0.8s
cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s ease;
}
/* =========================================================
HOVER - PC
========================================================= */
.gallery-item:hover {
transform:
translateY(-6px)
scale(1.008);
box-shadow:
0 18px 42px
rgba(0, 0, 0, 0.11);
}
.gallery-item:hover img {
transform: scale(1.045);
filter:
saturate(1.03)
contrast(1.01);
}
.gallery-item:hover::before {
border-color:
rgba(6, 63, 61, 0.38);
box-shadow:
inset 0 0 0 1px
rgba(255,255,255,0.35);
}
.gallery-item:hover::after {
opacity: 1;
}
/* =========================================================
STAGGER ANIMATION
========================================================= */
.gallery-item:nth-child(1) {
animation-delay: 0.05s;
}
.gallery-item:nth-child(2) {
animation-delay: 0.12s;
}
.gallery-item:nth-child(3) {
animation-delay: 0.19s;
}
.gallery-item:nth-child(4) {
animation-delay: 0.26s;
}
.gallery-item:nth-child(5) {
animation-delay: 0.33s;
}
.gallery-item:nth-child(6) {
animation-delay: 0.40s;
}
.gallery-item:nth-child(7) {
animation-delay: 0.47s;
}
.gallery-item:nth-child(8) {
animation-delay: 0.54s;
}
/* =========================================================
IMAGE REVEAL
========================================================= */
@keyframes galleryImageReveal {
0% {
opacity: 0;
transform:
translateY(35px)
scale(0.97);
}
60% {
opacity: 1;
}
100% {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.gallery-section {
width: 100%;
padding:
70px
24px
90px;
box-sizing: border-box;
}
.gallery-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.gallery-grid {
display: grid;
grid-template-columns: 1fr;
width: 100%;
gap: 34px;
margin: 0 auto;
justify-items: center;
}
/* =====================================================
MOBILE FIXED IMAGE CARD
===================================================== */
.gallery-item {
width: 100%;
max-width: 360px;
/*
* Mobile par bhi sab cards
* exactly same proportion.
*/
aspect-ratio: 4 / 5;
height: auto;
margin:
0 auto;
padding: 9px;
box-sizing: border-box;
transform:
translateY(35px)
scale(0.965);
box-shadow:
0 10px 28px
rgba(0, 0, 0, 0.07);
}
/* =====================================================
MOBILE IMAGE FRAME
===================================================== */
.gallery-image-frame {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
box-sizing: border-box;
}
/* =====================================================
MOBILE FRAME
===================================================== */
.gallery-item::before {
top: 9px;
right: 9px;
bottom: 9px;
left: 9px;
border:
1px solid
rgba(6, 63, 61, 0.20);
}
.gallery-item::after {
top: 9px;
right: 9px;
bottom: 9px;
left: 9px;
}
/* =====================================================
MOBILE IMAGE
===================================================== */
.gallery-item img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: cover;
object-position: center center;
}
/* =====================================================
MOBILE TOUCH EFFECT
===================================================== */
.gallery-item:active {
transform:
translateY(-2px)
scale(0.992);
box-shadow:
0 14px 32px
rgba(0, 0, 0, 0.10);
}
.gallery-item:active img {
transform: scale(1.018);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.gallery-section {
padding-left: 22px;
padding-right: 22px;
}
.gallery-grid {
gap: 28px;
}
.gallery-item {
width: 100%;
max-width: 340px;
aspect-ratio: 4 / 5;
padding: 8px;
}
.gallery-image-frame {
width: 100%;
height: 100%;
}
.gallery-item::before {
top: 8px;
right: 8px;
bottom: 8px;
left: 8px;
}
.gallery-item::after {
top: 8px;
right: 8px;
bottom: 8px;
left: 8px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 350px) {
.gallery-section {
padding-left: 18px;
padding-right: 18px;
}
.gallery-item {
max-width: 100%;
aspect-ratio: 4 / 5;
padding: 7px;
}
.gallery-image-frame {
width: 100%;
height: 100%;
}
.gallery-item::before {
top: 7px;
right: 7px;
bottom: 7px;
left: 7px;
}
.gallery-item::after {
top: 7px;
right: 7px;
bottom: 7px;
left: 7px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.gallery-item {
animation: none;
opacity: 1;
transform: none;
transition: none;
}
.gallery-item img {
transition: none;
}
}
/* =========================================================
CHAPTER 05 - PREMIUM CONNECT CARD
MATCHING LIFE PARTNER
========================================================= */
.chapter-05-section {
position: relative;
width: 100%;
padding: 78px 20px 90px;
box-sizing: border-box;
overflow: hidden;
background:
linear-gradient(
180deg,
#faf5ee 0%,
#f7f1e9 100%
);
}
/* =========================================================
CONTAINER
========================================================= */
.chapter-05-container {
width: min(1120px, 100%);
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================================
CHAPTER LABEL
========================================================= */
.chapter-05-label-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 26px;
}
.chapter-05-label {
font-size: 11px;
line-height: 1;
font-weight: 700;
letter-spacing: 3px;
color: #063f3d;
white-space: nowrap;
}
.chapter-05-label-line {
display: block;
width: 38px;
height: 1px;
background: #063f3d;
opacity: 0.55;
}
/* =========================================================
MAIN CARD
========================================================= */
.chapter-05-card {
position: relative;
width: min(760px, 100%);
margin: 0 auto;
padding: 0;
box-sizing: border-box;
background: #ffffff;
border: 1px solid rgba(6, 63, 61, 0.12);
border-radius: 22px;
overflow: hidden;
box-shadow:
0 14px 40px rgba(6, 63, 61, 0.07);
opacity: 0;
transform:
translateY(30px)
scale(0.98);
animation:
chapter05CardReveal
0.9s
cubic-bezier(0.22, 1, 0.36, 1)
forwards;
}
/* =========================================================
TOP GREEN LINE
SAME PREMIUM STYLE AS OTHER CARDS
========================================================= */
.chapter-05-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #063f3d;
z-index: 5;
}
/* =========================================================
CARD INNER
========================================================= */
.chapter-05-card-inner {
position: relative;
padding:
52px
55px
46px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
/* =========================================================
PREMIUM CORNER - TOP LEFT
========================================================= */
.chapter-05-card-inner::before {
content: "";
position: absolute;
top: 22px;
left: 22px;
width: 38px;
height: 38px;
border-top:
1px solid
rgba(6, 63, 61, 0.22);
border-left:
1px solid
rgba(6, 63, 61, 0.22);
pointer-events: none;
}
/* =========================================================
PREMIUM CORNER - BOTTOM RIGHT
========================================================= */
.chapter-05-card-inner::after {
content: "";
position: absolute;
right: 22px;
bottom: 22px;
width: 38px;
height: 38px;
border-right:
1px solid
rgba(6, 63, 61, 0.22);
border-bottom:
1px solid
rgba(6, 63, 61, 0.22);
pointer-events: none;
}
/* =========================================================
TITLE
========================================================= */
.chapter-05-title {
position: relative;
z-index: 2;
width: 100%;
max-width: 580px;
margin:
0 auto
20px;
font-size:
clamp(34px, 4.5vw, 54px);
line-height: 1.12;
font-weight: 500;
letter-spacing: -1.3px;
color: #063f3d;
}
/* =========================================================
DESCRIPTION
========================================================= */
.chapter-05-description {
position: relative;
z-index: 2;
width: min(590px, 100%);
margin: 0 auto;
font-size: 15px;
line-height: 1.75;
font-weight: 400;
color: #666666;
}
/* =========================================================
CONNECT AREA
========================================================= */
.chapter-05-connect-area {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 190px;
margin-top: 25px;
padding-top: 58px;
box-sizing: border-box;
}
/* =========================================================
REMOVE OLD ARROW/HAND
========================================================= */
.chapter-05-hand {
position: absolute;
left: 50%;
top: 8px;
width: 45px;
height: 48px;
z-index: 10;
margin: 0;
font-size: 0;
line-height: 0;
color: transparent;
transform:
translateX(-50%);
pointer-events: none;
filter:
drop-shadow(
0 4px 7px
rgba(37, 211, 102, 0.18)
);
animation:
chapter05HandPoint
1.8s
ease-in-out
infinite;
}
/* =========================================================
NEW PREMIUM POINTING HAND
========================================================= */
.chapter-05-hand::before {
content: "☟";
position: absolute;
left: 50%;
top: 0;
transform:
translateX(-50%);
font-size: 42px;
line-height: 1;
font-family:
"Segoe UI Symbol",
"Arial Unicode MS",
sans-serif;
font-weight: 400;
color: #25D366;
text-shadow:
0 0 8px
rgba(37, 211, 102, 0.18);
}
/* =========================================================
WHATSAPP BUTTON
PERFECT CIRCLE
========================================================= */
.chapter-05-whatsapp {
position: relative;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
width: 82px;
height: 82px;
min-width: 82px;
min-height: 82px;
padding: 0;
box-sizing: border-box;
border-radius: 50%;
text-decoration: none;
background:
linear-gradient(
145deg,
#20e56d,
#08c957
);
border:
3px solid
rgba(255, 255, 255, 0.95);
box-shadow:
0 0 0 5px rgba(37, 211, 102, 0.10),
0 0 0 11px rgba(37, 211, 102, 0.055),
0 12px 30px rgba(6, 63, 61, 0.13);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* =========================================================
OUTER ANIMATED RING
========================================================= */
.chapter-05-whatsapp::before {
content: "";
position: absolute;
inset: -10px;
border:
1px solid
rgba(37, 211, 102, 0.35);
border-radius: 50%;
pointer-events: none;
animation:
chapter05WhatsAppRing
2.2s
ease-out
infinite;
}
/* =========================================================
SECOND SOFT RING
========================================================= */
.chapter-05-whatsapp::after {
content: "";
position: absolute;
inset: -17px;
border:
1px solid
rgba(37, 211, 102, 0.16);
border-radius: 50%;
pointer-events: none;
animation:
chapter05WhatsAppRingOuter
2.2s
ease-out
infinite;
}
/* =========================================================
WHATSAPP ICON
========================================================= */
.chapter-05-whatsapp-icon {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex: 0 0 48px;
}
.chapter-05-whatsapp-icon svg {
display: block;
width: 48px;
height: 48px;
fill: #ffffff;
}
/* =========================================================
REMOVE "CONNECT ON WHATSAPP" TEXT
========================================================= */
.chapter-05-button-text {
display: none !important;
}
/* =========================================================
HOVER
========================================================= */
.chapter-05-whatsapp:hover {
transform:
translateY(-4px)
scale(1.04);
box-shadow:
0 0 0 6px rgba(37, 211, 102, 0.12),
0 0 0 13px rgba(37, 211, 102, 0.055),
0 18px 38px rgba(6, 63, 61, 0.18);
}
/* =========================================================
CARD REVEAL
========================================================= */
@keyframes chapter05CardReveal {
0% {
opacity: 0;
transform:
translateY(30px)
scale(0.98);
}
100% {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
HAND POINT ANIMATION
========================================================= */
@keyframes chapter05HandPoint {
0%,
100% {
transform:
translateX(-50%)
translateY(0);
}
50% {
transform:
translateX(-50%)
translateY(7px);
}
}
/* =========================================================
WHATSAPP RING
========================================================= */
@keyframes chapter05WhatsAppRing {
0% {
opacity: 0.75;
transform:
scale(0.88);
}
70% {
opacity: 0;
transform:
scale(1.18);
}
100% {
opacity: 0;
transform:
scale(1.18);
}
}
/* =========================================================
OUTER RING
========================================================= */
@keyframes chapter05WhatsAppRingOuter {
0% {
opacity: 0;
transform:
scale(0.90);
}
25% {
opacity: 0.45;
}
80% {
opacity: 0;
transform:
scale(1.22);
}
100% {
opacity: 0;
transform:
scale(1.22);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.chapter-05-section {
padding:
58px
18px
70px;
}
.chapter-05-container {
width: 100%;
}
/* -----------------------------------------------------
LABEL
----------------------------------------------------- */
.chapter-05-label-wrap {
gap: 9px;
margin-bottom: 20px;
}
.chapter-05-label {
font-size: 10px;
letter-spacing: 2.6px;
}
.chapter-05-label-line {
width: 28px;
}
/* -----------------------------------------------------
CARD
----------------------------------------------------- */
.chapter-05-card {
width: 100%;
max-width: 390px;
border-radius: 18px;
box-shadow:
0 12px 32px
rgba(6, 63, 61, 0.075);
}
.chapter-05-card::before {
height: 3px;
}
.chapter-05-card-inner {
padding:
38px
22px
34px;
}
/* -----------------------------------------------------
CORNERS
----------------------------------------------------- */
.chapter-05-card-inner::before {
top: 17px;
left: 17px;
width: 27px;
height: 27px;
}
.chapter-05-card-inner::after {
right: 17px;
bottom: 17px;
width: 27px;
height: 27px;
}
/* -----------------------------------------------------
TITLE
----------------------------------------------------- */
.chapter-05-title {
max-width: 320px;
margin:
0 auto
16px;
font-size: 31px;
line-height: 1.16;
letter-spacing: -0.8px;
}
/* -----------------------------------------------------
DESCRIPTION
----------------------------------------------------- */
.chapter-05-description {
max-width: 320px;
font-size: 13.5px;
line-height: 1.72;
}
/* -----------------------------------------------------
CONNECT AREA
----------------------------------------------------- */
.chapter-05-connect-area {
min-height: 145px;
margin-top: 19px;
padding-top: 52px;
}
/* -----------------------------------------------------
HAND
----------------------------------------------------- */
.chapter-05-hand {
top: 1px;
width: 38px;
height: 43px;
}
.chapter-05-hand::before {
font-size: 36px;
}
/* -----------------------------------------------------
WHATSAPP CIRCLE
----------------------------------------------------- */
.chapter-05-whatsapp {
width: 72px;
height: 72px;
min-width: 72px;
min-height: 72px;
border-width: 3px;
box-shadow:
0 0 0 4px rgba(37, 211, 102, 0.10),
0 0 0 9px rgba(37, 211, 102, 0.055),
0 10px 25px rgba(6, 63, 61, 0.13);
}
.chapter-05-whatsapp-icon {
width: 43px;
height: 43px;
flex-basis: 43px;
}
.chapter-05-whatsapp-icon svg {
width: 43px;
height: 43px;
}
.chapter-05-whatsapp::before {
inset: -9px;
}
.chapter-05-whatsapp::after {
inset: -15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.chapter-05-section {
padding:
52px
15px
62px;
}
.chapter-05-label-wrap {
margin-bottom: 18px;
}
.chapter-05-card {
max-width: 355px;
border-radius: 17px;
}
.chapter-05-card-inner {
padding:
34px
18px
31px;
}
.chapter-05-card-inner::before {
top: 15px;
left: 15px;
width: 24px;
height: 24px;
}
.chapter-05-card-inner::after {
right: 15px;
bottom: 15px;
width: 24px;
height: 24px;
}
.chapter-05-title {
max-width: 290px;
font-size: 28px;
line-height: 1.17;
}
.chapter-05-description {
max-width: 290px;
font-size: 13px;
line-height: 1.68;
}
.chapter-05-connect-area {
min-height: 137px;
margin-top: 16px;
padding-top: 49px;
}
.chapter-05-hand::before {
font-size: 34px;
}
.chapter-05-whatsapp {
width: 68px;
height: 68px;
min-width: 68px;
min-height: 68px;
}
.chapter-05-whatsapp-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.chapter-05-whatsapp-icon svg {
width: 40px;
height: 40px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 350px) {
.chapter-05-section {
padding-left: 12px;
padding-right: 12px;
}
.chapter-05-card-inner {
padding:
31px
15px
29px;
}
.chapter-05-title {
font-size: 26px;
}
.chapter-05-description {
font-size: 12.5px;
}
.chapter-05-connect-area {
min-height: 130px;
padding-top: 47px;
}
.chapter-05-whatsapp {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
}
.chapter-05-whatsapp-icon,
.chapter-05-whatsapp-icon svg {
width: 37px;
height: 37px;
}
.chapter-05-hand::before {
font-size: 31px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.chapter-05-card,
.chapter-05-hand,
.chapter-05-whatsapp::before,
.chapter-05-whatsapp::after {
animation: none !important;
}
.chapter-05-card {
opacity: 1;
transform: none;
}
}
/* =========================================================
FOOTER - REFERENCE PREMIUM SINGLE PAGE
========================================================= */
.site-footer {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =========================================================
FOOTER CTA AREA
========================================================= */
.footer-cta-area {
width: 100%;
padding: 0 20px 120px;
box-sizing: border-box;
background: #f8f1e9;
}
.footer-cta-card {
width: min(510px, 100%);
min-height: 155px;
margin: 0 auto;
padding: 18px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid rgba(6, 63, 61, 0.10);
box-shadow:
0 12px 35px rgba(6, 63, 61, 0.06);
}
.footer-cta-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
width: min(390px, 100%);
min-height: 78px;
padding: 15px 30px;
box-sizing: border-box;
border-radius: 999px;
background: #25d366;
color: #ffffff;
text-decoration: none;
box-shadow:
0 0 0 9px rgba(37, 211, 102, 0.08),
0 12px 30px rgba(37, 211, 102, 0.16);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.footer-cta-button:hover {
transform: translateY(-3px);
box-shadow:
0 0 0 11px rgba(37, 211, 102, 0.10),
0 18px 38px rgba(37, 211, 102, 0.22);
}
.footer-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.footer-cta-icon svg {
display: block;
width: 32px;
height: 32px;
fill: #ffffff;
}
.footer-cta-text {
font-size: 15px;
line-height: 1.3;
font-weight: 700;
letter-spacing: 2px;
color: #ffffff;
text-align: center;
}
/* =========================================================
DARK FOOTER
========================================================= */
.footer-main {
width: 100%;
padding:
78px
20px
68px;
box-sizing: border-box;
background: #12232b;
color: #ffffff;
}
.footer-inner {
width: min(1120px, 100%);
margin: 0 auto;
text-align: center;
}
/* =========================================================
FOOTER BRAND
========================================================= */
.footer-brand {
margin: 0 auto 42px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.5px;
color: #ffffff;
}
/* =========================================================
FOOTER NAVIGATION
========================================================= */
.footer-navigation {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 38px;
margin: 0 auto 40px;
}
.footer-navigation a {
display: inline-block;
color: rgba(255,255,255,0.62);
text-decoration: none;
font-size: 11px;
line-height: 1.5;
font-weight: 600;
letter-spacing: 2px;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.footer-navigation a:hover {
color: #25d366;
transform: translateY(-2px);
}
/* =========================================================
FOOTER META
========================================================= */
.footer-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
color: rgba(255,255,255,0.38);
font-size: 10px;
line-height: 1.7;
font-weight: 500;
letter-spacing: 1.7px;
text-transform: uppercase;
}
.footer-meta-dot {
opacity: 0.45;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.footer-cta-area {
padding:
0
18px
85px;
}
.footer-cta-card {
width: 100%;
min-height: 145px;
padding: 15px;
}
.footer-cta-button {
width: 100%;
min-height: 72px;
padding:
14px
20px;
gap: 12px;
}
.footer-cta-icon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.footer-cta-icon svg {
width: 28px;
height: 28px;
}
.footer-cta-text {
font-size: 13px;
letter-spacing: 1.5px;
}
.footer-main {
padding:
70px
22px
62px;
}
.footer-brand {
margin-bottom: 38px;
font-size: 34px;
}
.footer-navigation {
display: flex;
flex-direction: row;
gap:
20px
28px;
margin-bottom: 36px;
}
.footer-navigation a {
font-size: 10px;
letter-spacing: 1.7px;
}
.footer-meta {
gap: 7px;
font-size: 9px;
letter-spacing: 1.25px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.footer-cta-area {
padding-left: 15px;
padding-right: 15px;
}
.footer-cta-card {
min-height: 135px;
padding: 12px;
}
.footer-cta-button {
min-height: 66px;
padding:
12px
15px;
}
.footer-cta-text {
font-size: 11px;
letter-spacing: 1.2px;
}
.footer-main {
padding:
62px
16px
55px;
}
.footer-brand {
font-size: 30px;
margin-bottom: 32px;
}
.footer-navigation {
gap:
18px
20px;
}
.footer-navigation a {
font-size: 9px;
letter-spacing: 1.4px;
}
.footer-meta {
font-size: 8px;
letter-spacing: 1px;
line-height: 1.9;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.footer-cta-button,
.footer-navigation a {
transition: none;
}
}