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

html{
scroll-behavior:smooth;
}

/*================ PRELOADER ================*/

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:24px;

z-index:9999;

transition:opacity .5s ease,visibility .5s ease;

}

#preloader.hidden{

opacity:0;

visibility:hidden;

}

.preloader-logo img{

height:90px;

width:auto;

animation:pulse 1.6s ease-in-out infinite;

}

@keyframes pulse{

0%,100%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.06);

opacity:.75;

}

}

body{

font-family:'Inter',sans-serif;
background:#ffffff;
color:#222;
overflow-x:hidden;

-webkit-text-size-adjust:100%;

}

a{

text-decoration:none;

}

.container{

width:1200px;
max-width:92%;
margin:auto;

}

/*================ HAMBURGER & MOBILE MENU ================*/

.hamburger{

display:none;

flex-direction:column;

gap:5px;

background:none;

border:none;

cursor:pointer;

padding:10px;

z-index:110;

}

.hamburger span{

display:block;

width:24px;

height:2.5px;

background:#215a48;

border-radius:2px;

transition:.3s;

}

.hamburger.active span:nth-child(1){

transform:translateY(7.5px) rotate(45deg);

}

.hamburger.active span:nth-child(2){

opacity:0;

}

.hamburger.active span:nth-child(3){

transform:translateY(-7.5px) rotate(-45deg);

}

.mobile-menu{

display:none;

position:absolute;

top:78px;

left:0;

width:100%;

background:#fff;

border-bottom:1px solid #eee;

padding:20px;

flex-direction:column;

gap:4px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.mobile-menu.open{

display:flex;

}

.mobile-menu a{

color:#444;

font-size:18px;

font-weight:500;

padding:14px 0;

border-bottom:1px solid #f0f0f0;

transition:.2s;

}

.mobile-menu a:hover{

color:#215a48;

}

.mobile-menu .btn{

border:none;

text-align:center;

margin-top:14px;

padding:15px;

}

/*================ FALLING FLOWERS ================*/

.falling-flowers{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.hero-grid{

position:relative;

z-index:2;

}

.falling-flowers img{

position:absolute;

top:0;

left:0;

width:36px;

height:36px;

object-fit:contain;

opacity:.65;

animation:flower-fall linear infinite;

}

.falling-flowers img:nth-child(1){

left:8%;

animation-duration:15s;

animation-delay:0s;

}

.falling-flowers img:nth-child(2){

left:22%;

width:28px;

height:28px;

animation-duration:19s;

animation-delay:3s;

}

.falling-flowers img:nth-child(3){

left:38%;

animation-duration:16s;

animation-delay:6s;

}

.falling-flowers img:nth-child(4){

left:55%;

width:30px;

height:30px;

animation-duration:21s;

animation-delay:1.5s;

}

.falling-flowers img:nth-child(5){

left:70%;

animation-duration:17s;

animation-delay:4.5s;

}

.falling-flowers img:nth-child(6){

left:85%;

width:26px;

height:26px;

animation-duration:20s;

animation-delay:2s;

}

@keyframes flower-fall{

0%{

top:0;

transform:translateX(0) rotate(0deg);

opacity:0;

}

6%{

opacity:.65;

}

100%{

top:100%;

transform:translateX(-45px) rotate(320deg);

opacity:.55;

}

}

@media(max-width:600px){

.falling-flowers img{

width:24px;

height:24px;

opacity:.45;

}

.falling-flowers img:nth-child(2),

.falling-flowers img:nth-child(4),

.falling-flowers img:nth-child(6){

width:20px;

height:20px;

}

}

/*================ NAVBAR ================*/

header{

position:sticky;
top:0;
background:#fff;
z-index:100;
border-bottom:1px solid #eee;

}

.nav{

height:78px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

}

.logo img{

height:56px;

width:auto;

}

nav{

display:flex;

gap:40px;

}

nav a{

color:#666;

font-size:15px;

transition:.3s;

}

nav a:hover{

color:#215a48;

}

.btn{

padding:14px 28px;

border-radius:999px;

background:#215a48;

color:#fff;

font-weight:600;

display:inline-flex;

align-items:center;

justify-content:center;

transition:.35s;

}

.btn:hover{

transform:translateY(-2px);

box-shadow:0 12px 35px rgba(33,90,72,.25);

}

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

.hero{

position:relative;

padding:0 0 20px;

overflow:hidden;

}

/* RIGHT GREEN GLOW */

.hero-gradient{

position:absolute;

right:-250px;

top:-180px;

width:900px;

height:900px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(96,201,165,.40) 0%,

rgba(96,201,165,.18) 35%,

rgba(96,201,165,.08) 55%,

rgba(255,255,255,0) 75%);

filter:blur(30px);

pointer-events:none;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.tag{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#edf8f4;

color:#2f7d5f;

font-size:14px;

font-weight:600;

margin-bottom:22px;

}

.hero h1{

font-size:clamp(34px,5.5vw,54px);

font-family:'Sora',sans-serif;

font-weight:600;

line-height:1.12;

letter-spacing:-1.5px;

margin-bottom:24px;

color:#202020;

}

.hero p{

font-size:18px;

line-height:1.8;

color:#666;

max-width:560px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.outline{

padding:14px 28px;

border-radius:999px;

border:1px solid #215a48;

background:#215a48;

color:#fff;

transition:.3s;

}

.outline:hover{

background:#1a4a3a;

border-color:#1a4a3a;

color:#fff;

}

/*================ IMAGE SIDE ================*/

.hero-images{

position:relative;

height:470px;

}

.card{

position:absolute;

left:57%;

top:50%;

transform:translate(-50%,-50%);

width:330px;

height:470px;

border-radius:28px;

overflow:hidden;

animation:floaty 5s ease-in-out infinite;

}

@keyframes floaty{

0%,100%{

transform:translate(-50%,-50%);

}

50%{

transform:translate(-50%,calc(-50% - 6px));

}

}

.card img{

width:100%;

height:100%;

object-fit:cover;

border-radius:inherit;

}

/*================ Responsive ================*/

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

gap:40px;

}

.hero{

padding-top:20px;

}

.hero-images{

height:480px;

margin-top:20px;

}

.card{

left:50%;

}

nav{

display:none;

}

.hamburger{

display:flex;

}

}

@media(max-width:600px){

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn,
.hero-buttons .outline{

width:100%;

}

.hero-buttons .outline{

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}

.card{

width:240px;

height:340px;

}

.hero-images{

height:360px;

}

.tag{

font-size:12px;

padding:8px 14px;

}

.hero p{

font-size:16px;

}

.section-title{

margin-bottom:50px;

}

.section-title p{

font-size:16px;

}

}
/*========================
WHY SECTION
========================*/

.why{

padding:40px 0;

position:relative;

}

.section-title{

text-align:center;

max-width:720px;

margin:auto auto 70px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:#eef8f4;

color:#2e8b68;

border-radius:999px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.why .section-title h2{

font-size:clamp(32px,5vw,50px);

font-family:'Outfit',sans-serif;

font-weight:500;

line-height:1.2;

margin-bottom:18px;

color:#222;

}

.templates .section-title h2{

font-size:clamp(32px,5vw,50px);

font-family:'Outfit',sans-serif;

font-weight:500;

line-height:1.2;

margin-bottom:18px;

color:#222;

}

.section-title p{

font-size:18px;

line-height:1.8;

color:#777;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

background:linear-gradient(180deg,#ffffff 0%,#f6fcf9 100%);

border-radius:24px;

padding:48px 36px;

box-shadow:0 20px 60px rgba(23,74,58,.08);

transition:.4s cubic-bezier(.22,.61,.36,1);

border:1px solid rgba(33,90,72,.08);

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:-70px;

right:-70px;

width:180px;

height:180px;

border-radius:50%;

background:radial-gradient(circle,rgba(96,201,165,.18),transparent 70%);

pointer-events:none;

}

.feature-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 70px rgba(33,90,72,.16);

border-color:rgba(33,90,72,.15);

}

.icon{

width:76px;

height:76px;

border-radius:22px;

background:linear-gradient(135deg,#e8f8f2,#d3efe5);

border:1px solid rgba(33,90,72,.08);

display:flex;

align-items:center;

justify-content:center;

margin-bottom:28px;

box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 25px rgba(33,90,72,.08);

}

.icon img{

width:54px;

height:54px;

object-fit:contain;

}

.feature-card:nth-child(3) .icon img{

width:44px;

height:44px;

}

.feature-card h3{

font-size:24px;

margin-bottom:15px;

font-weight:700;

font-family:'Outfit',sans-serif;

letter-spacing:-.3px;

}

.feature-card p{

color:#6b7b76;

line-height:1.8;

font-size:16px;

}

/* Responsive */

@media(max-width:1100px){

.feature-grid{

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

}

}

@media(max-width:700px){

.feature-grid{

grid-template-columns:1fr;

}

.feature-card{

padding:38px 28px;

}

}

@media(max-width:480px){

.feature-card{

padding:32px 24px;

}

}
/*==================================
TEMPLATE SECTION
==================================*/

.templates{

padding:50px 0;

background:#fcfcfc;

position:relative;

overflow:hidden;

}

.templates::before{

content:"";

position:absolute;

width:700px;

height:700px;

right:-250px;

top:-180px;

background:radial-gradient(circle,
rgba(89,194,155,.15),
transparent 70%);

filter:blur(25px);

}

.templates .section-title{

margin:auto auto 30px;

}

.template-filter{

display:flex;

justify-content:center;

gap:18px;

margin-bottom:70px;

flex-wrap:wrap;

}

.template-filter button{

padding:13px 28px;

border:none;

background:#fff;

border-radius:999px;

box-shadow:0 8px 20px rgba(0,0,0,.06);

font-size:15px;

cursor:pointer;

transition:.3s;

}

.template-filter button.active{

background:#245c4a;

color:#fff;

}

.template-filter button:hover{

background:#245c4a;

color:#fff;

}

.template-grid{

display:grid;

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

gap:40px;

}

.template-card{

background:#fff;

border-radius:34px;

overflow:hidden;

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

transition:.35s;

}

.template-card:hover{

transform:translateY(-10px);

box-shadow:0 40px 80px rgba(0,0,0,.12);

}

.template-image{

height:470px;

display:flex;

align-items:center;

justify-content:center;

border-bottom:1px solid #eee;

background:#f4f4f4;

border:2px dashed #d6d6d6;

font-size:18px;

font-weight:600;

color:#999;

position:relative;

overflow:hidden;

}

.template-image.with-image{

border:none;

background:#fff;

}

.template-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.mrp-tag{

position:absolute;

top:18px;

left:18px;

background:#215a48;

color:#fff;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

z-index:2;

box-shadow:0 8px 20px rgba(33,90,72,.25);

}

.preview-overlay{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(33,90,72,.55);

color:#fff;

font-size:16px;

font-weight:600;

letter-spacing:.5px;

opacity:0;

transition:.35s;

z-index:2;

}

.template-card:hover .preview-overlay{

opacity:1;

}

.template-actions{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:22px;

}

.price{

font-size:24px;

font-weight:700;

color:#215a48;

font-family:'Outfit',sans-serif;

}

.preview-btn{

padding:12px 26px;

font-size:14px;

}

.phone-preview{

height:560px;

}

.template-content{

padding:30px;

}

.template-content h3{

font-size:26px;

font-family:'Sora',sans-serif;

font-weight:600;

letter-spacing:-.3px;

margin-bottom:10px;

}

.template-content p{

color:#777;

font-size:16px;

}

.coming-soon{

grid-column:1 / -1;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:24px;

padding:60px 20px;

text-align:center;

}

.coming-soon img{

width:260px;

height:auto;

opacity:.85;

}

.coming-soon p{

font-family:'Outfit',sans-serif;

font-weight:300;

font-size:20px;

letter-spacing:.5px;

color:#9a9a9a;

max-width:480px;

line-height:1.7;

}

@media(max-width:1100px){

.template-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.template-grid{

grid-template-columns:1fr 1fr;

gap:20px;

}

.template-image{

height:300px;

}

.phone-preview{

height:500px;

}

}

@media(max-width:480px){

.template-filter{

gap:10px;

}

.template-filter button{

padding:10px 18px;

font-size:14px;

}

.template-image{

height:220px;

}

.template-content{

padding:18px;

}

.template-content h3{

font-size:16px;

}

.template-content p{

font-size:12px;

}

.price{

display:none;

}

.template-actions{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.preview-btn{

width:100%;

}

.coming-soon img{

width:200px;

}

.coming-soon p{

font-size:17px;

}

.coming-soon{

padding:40px 12px;

}

}

@media(max-width:400px){

.nav .btn{

display:none;

}

.mobile-menu .btn{

display:flex;

}

.nav{

height:68px;

}

.mobile-menu{

top:68px;

}

.logo img{

height:46px;

}

.hamburger span{

width:22px;

}

}

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

.coming-soon-page{

min-height:calc(100vh - 78px);

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:60px 20px;

background:linear-gradient(180deg,#f4f8f6,#fff);

}

.coming-soon-page h1{

font-family:'Playfair Display',serif;

font-size:56px;

font-weight:600;

color:#1b1b1b;

margin:18px 0 14px;

letter-spacing:-0.5px;

}

.coming-soon-page p{

font-size:17px;

color:#555;

max-width:480px;

margin:0 auto 30px;

line-height:1.7;

}

nav a.active{

color:#215a48;

font-weight:600;

}

.about-hero{

padding:110px 0 70px;

background:linear-gradient(180deg,#f4f8f6,#fff);

text-align:center;

}

.about-hero h1{

font-family:'Playfair Display',serif;

font-size:52px;

font-weight:600;

font-style:italic;

color:#1b1b1b;

margin:16px 0;

line-height:1.15;

letter-spacing:-0.5px;

text-shadow:0 2px 18px rgba(33,90,72,.08);

}

.about-hero p{

font-size:17px;

color:#555;

max-width:640px;

margin:0 auto;

line-height:1.7;

}

.about-story{

padding:90px 0;

background:#fff;

}

.about-story .section-title{

text-align:center;

}

.about-story .section-title span{

color:#b8963e;

font-size:12px;

letter-spacing:3px;

font-weight:600;

}

.about-story .section-title h2{

font-family:'Playfair Display',serif;

font-size:34px;

color:#1b1b1b;

margin-top:10px;

}

.about-grid{

display:grid;

grid-template-columns:1.4fr 1fr;

gap:50px;

align-items:start;

max-width:1000px;

margin:0 auto;

}

.about-text p{

font-size:16px;

color:#555;

line-height:1.8;

margin-bottom:18px;

}

.about-card{

background:#f4f8f6;

border:1px solid #e3ece8;

border-radius:20px;

padding:34px;

}

.about-card h3{

font-size:20px;

color:#215a48;

margin-bottom:18px;

font-weight:600;

}

.about-card ul{

list-style:none;

}

.about-card li{

position:relative;

padding:9px 0 9px 28px;

color:#444;

font-size:15px;

}

.about-card li::before{

content:'';

position:absolute;

left:4px;

top:15px;

width:9px;

height:9px;

border-radius:50%;

background:#b8963e;

}

.about-cta{

padding:80px 0;

background:linear-gradient(135deg,#215a48,#2f7a62);

text-align:center;

}

.about-cta h2{

font-family:'Playfair Display',serif;

font-size:34px;

color:#fff;

margin-bottom:12px;

}

.about-cta p{

font-size:16px;

color:rgba(255,255,255,.85);

margin-bottom:28px;

}

@media(max-width:900px){

.about-hero h1{

font-size:34px;

}

.about-hero{

padding:80px 0 50px;

}

.about-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

body{

display:flex;

flex-direction:column;

}

.templates{

order:2;

}

.why{

order:3;

}

}