/*
=========================================================
MATCHING LIFE PARTNER
PREMIUM FRONTEND
VERSION 2.0
=========================================================
*/

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

html{

scroll-behavior:smooth;

}

body{

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

background:#faf8f5;

color:#222;

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:.35s;

}

ul{

list-style:none;

}

.container{

width:92%;

max-width:1240px;

margin:auto;

}

.website-wrapper{

position:relative;

overflow:hidden;

}


/* ===========================
COLORS
=========================== */

:root{

--primary:#b68c52;

--secondary:#1d2330;

--light:#ffffff;

--background:#faf8f5;

--text:#333333;

--border:#ece8e3;

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

--radius:18px;

}


/* ===========================
HEADINGS
=========================== */

h1,
h2,
h3,
h4{

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:var(--secondary);

}

h1{

font-size:64px;

line-height:1.1;

}

h2{

font-size:48px;

}

h3{

font-size:34px;

}

p{

font-size:17px;

color:#666;

}


/* ===========================
SECTION SPACING
=========================== */

section{

padding:110px 0;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

display:inline-block;

padding:10px 20px;

border-radius:40px;

background:#f3ece2;

color:var(--primary);

font-weight:600;

margin-bottom:18px;

}

.section-heading h2{

margin-bottom:18px;

}

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

.main-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

transition:.35s ease;

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

backdrop-filter:blur(18px);

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

border-bottom:1px solid rgba(230,230,230,.5);

}

.main-header.scrolled{

padding:12px 0;

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

}

.header-inner{

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

.logo{

display:flex;

align-items:center;

}

.logo img{

height:60px;

width:auto;

display:block;

}

.logo span{

font-size:34px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:var(--secondary);

}

.desktop-menu ul{

display:flex;

align-items:center;

gap:40px;

}

.desktop-menu a{

font-size:16px;

font-weight:500;

color:var(--secondary);

position:relative;

}

.desktop-menu a::after{

content:'';

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}

.desktop-menu a:hover::after{

width:100%;

}

.desktop-menu a:hover{

color:var(--primary);

}


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

.header-whatsapp{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:12px 20px;

background:#25D366;

color:#ffffff;

font-size:15px;

font-weight:600;

line-height:1;

white-space:nowrap;

border-radius:50px;

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

transition:.35s ease;

}

.header-whatsapp i{

font-size:18px;

}

.header-whatsapp:hover{

transform:translateY(-2px);

background:#1EBE5D;

}

@media(max-width:768px){

.header-whatsapp{

padding:8px 14px;

font-size:13px;

gap:6px;

border-radius:40px;

}

.header-whatsapp i{

font-size:15px;

}

}

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

.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:30px;

height:3px;

background:var(--secondary);

margin:6px 0;

border-radius:50px;

transition:.35s;

}

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

.hero-section{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:140px;

background:linear-gradient(135deg,#faf8f5 0%,#ffffff 45%,#f5eee4 100%);

}

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:radial-gradient(circle at top right,
rgba(182,140,82,.15),
transparent 45%);

pointer-events:none;

}

.hero-section .container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

position:relative;

z-index:2;

}

.hero-content{

max-width:620px;

}

.hero-subtitle{

display:inline-block;

padding:12px 24px;

background:#f3ece2;

color:var(--primary);

border-radius:50px;

font-size:15px;

font-weight:600;

margin-bottom:25px;

letter-spacing:1px;

text-transform:uppercase;

}

.hero-content h1{

margin-bottom:25px;

font-size:68px;

line-height:1.08;

}

.hero-content p{

font-size:18px;

margin-bottom:40px;

max-width:550px;

}

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:#25D366;

color:#fff;

border-radius:60px;

font-size:16px;

font-weight:600;

box-shadow:0 20px 45px rgba(37,211,102,.30);

transition:.35s;

}

.hero-btn:hover{

transform:translateY(-5px);

background:#1EBE5D;

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

}





.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

}

.hero-btn i{

display:inline-block;

font-size:20px;

margin-right:4px;

line-height:1;

}

.hero-btn span{

display:inline-block;

line-height:1;

}





.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:100%;

max-width:520px;

border-radius:35px;

box-shadow:0 35px 80px rgba(0,0,0,.15);

object-fit:cover;

}

/*=========================================================
MOBILE MENU
=========================================================*/

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:90%;

height:100vh;

background:#ffffff;

z-index:9999;

padding:30px;

transition:.40s ease;

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

overflow-y:auto;

}

.mobile-menu.active{

right:0;

}

.mobile-menu-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:40px;

}

.mobile-menu-header h2{

font-size:32px;

color:var(--secondary);

}

.mobile-menu-header button{

background:none;

border:none;

font-size:28px;

cursor:pointer;

color:var(--secondary);

}

.mobile-menu ul{

display:flex;

flex-direction:column;

gap:18px;

}

.mobile-menu ul li a{

display:block;

padding:14px 18px;

border-radius:12px;

font-size:17px;

font-weight:500;

color:var(--secondary);

transition:.3s;

}

.mobile-menu ul li a:hover{

background:#f5eee4;

color:var(--primary);

}

.menu-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9998;

}

.menu-overlay.active{

opacity:1;

visibility:visible;

}

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

@media(max-width:991px){

.desktop-menu{

display:none;

}






.header-whatsapp{

display:flex;

padding:10px 18px;

font-size:14px;

}

.header-whatsapp i{

font-size:18px;

}





.menu-toggle{

display:block;

}

.hero-section .container{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.hero-content{

max-width:100%;

margin:auto;

}

.hero-content h1{

font-size:48px;

}

.hero-content p{

margin-left:auto;

margin-right:auto;

}

.hero-image img{

max-width:420px;

margin:auto;

}

}

@media(max-width:576px){

section{

padding:80px 0;

}

.main-header{

padding:14px 0;

}

.logo img{

height:50px;

}

.logo span{

font-size:26px;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.hero-btn{

width:100%;

padding:16px;

}

.hero-image img{

max-width:100%;

border-radius:22px;

}

}

/*=========================================================
SCROLL PROGRESS BAR
=========================================================*/

.scroll-progress{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:linear-gradient(90deg,#c9a46a,#8b6b3f);

z-index:99999;

transition:.15s linear;

}


/*=========================================================
FLOATING WHATSAPP
=========================================================*/

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:30px;

box-shadow:0 20px 40px rgba(37,211,102,.35);

z-index:999;

transition:.35s;

}

.floating-whatsapp:hover{

transform:translateY(-6px) scale(1.05);

}


/*=========================================================
BACK TO TOP
=========================================================*/

/*.back-to-top{*/

/*position:fixed;*/

/*left:25px;*/

/*bottom:25px;*/

/*width:55px;*/

/*height:55px;*/

/*border:none;*/

/*border-radius:50%;*/

/*background:var(--primary);*/

/*color:#fff;*/

/*font-size:18px;*/

/*cursor:pointer;*/

/*opacity:0;*/

/*visibility:hidden;*/

/*transition:.35s;*/

/*box-shadow:0 15px 35px rgba(0,0,0,.15);*/

/*z-index:999;*/

/*}*/

/*.back-to-top.show{*/

/*opacity:1;*/

/*visibility:visible;*/

/*}*/



/*=========================================================
PROFILE SECTION
=========================================================*/

.profile-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.profile-image{

flex:1;

}

.profile-image img{

width:100%;

max-width:500px;

display:block;

border-radius:25px;

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

}

.profile-content{

flex:1;

}

.profile-content h2{

font-size:48px;

margin-bottom:25px;

color:var(--secondary);

}

.profile-content p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:35px;

}

.profile-actions{

margin-top:20px;

}

@media(max-width:991px){

.profile-wrapper{

flex-direction:column;

text-align:center;

}

.profile-image img{

max-width:350px;

margin:auto;

}

.profile-content h2{

font-size:36px;

}

}

@media(max-width:576px){

.profile-content h2{

font-size:30px;

}

.profile-content p{

font-size:16px;

}

.profile-image img{

max-width:100%;

}

}

/*=========================================================
GALLERY
=========================================================*/

.gallery-grid{

display:grid;

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

gap:30px;

}

.gallery-item{

overflow:hidden;

border-radius:24px;

background:#fff;

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

transition:.35s;

}

.gallery-item img{

width:100%;

height:340px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-item:hover{

transform:translateY(-8px);

}


/*=========================================================
SECTION HEADING
=========================================================*/

.section-heading{

text-align:center;

max-width:750px;

margin:0 auto 60px;

}

.section-heading span{

display:inline-block;

padding:8px 18px;

background:#f4ede3;

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

text-transform:uppercase;

letter-spacing:2px;

}

.section-heading h2{

font-size:48px;

margin-bottom:18px;

color:var(--secondary);

}

.section-heading p{

font-size:17px;

line-height:1.9;

color:#666;

}


/*=========================================================
FEATURES
=========================================================*/

.features-grid{

display:grid;

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

gap:30px;

}

.feature-card{

background:#fff;

padding:40px 30px;

border-radius:24px;

text-align:center;

transition:.35s;

box-shadow:0 15px 40px rgba(0,0,0,.06);

border:1px solid #eee;

}

.feature-card:hover{

transform:translateY(-10px);

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

}

.feature-icon{

width:80px;

height:80px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#f4ede3;

font-size:30px;

color:var(--primary);

}

.feature-card h3{

margin-bottom:15px;

font-size:28px;

color:var(--secondary);

}

.feature-card p{

color:#666;

line-height:1.8;

}


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

.contact-section{

    padding:100px 20px;

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

}

.contact-box{

    max-width:760px;

    margin:0 auto;

    text-align:center;

    background:#ffffff;

    padding:70px 45px;

    border-radius:24px;

    border:1px solid #ece5d6;

    box-shadow:0 20px 60px rgba(15,34,56,.08);

}

.contact-box .section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#c7a85a;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.contact-box h2{

    color:#1d2d44;

    font-size:46px;

    line-height:1.25;

    margin-bottom:25px;

    font-family:'Cormorant Garamond',serif;

}

.contact-box p{

    color:#5b6472;

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

    max-width:620px;

    margin-left:auto;

    margin-right:auto;

}

@media(max-width:768px){

    .contact-section{

        padding:70px 18px;

    }

    .contact-box{

        padding:40px 24px;

        border-radius:18px;

    }

    .contact-box h2{

        font-size:34px;

        line-height:1.3;

    }

    .contact-box p{

        font-size:16px;

        line-height:1.8;

    }

}

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

.site-footer{

    background:#12233b;
    padding:45px 20px 25px;
    text-align:center;

}

.footer-brand{

    margin-bottom:28px;

}

.footer-brand h3{

    color:#ffffff;
    font-size:42px;
    font-weight:600;
    font-family:'Cormorant Garamond',serif;
    margin:0 0 15px;

}

.footer-brand p{

    max-width:560px;
    margin:0 auto;
    color:#c8d1dc;
    font-size:17px;
    line-height:1.8;

}

.footer-menu{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    list-style:none;
    gap:28px;
    margin:30px 0;
    padding:0;

}

.footer-menu li{

    margin:0;

}

.footer-menu a{

    color:#d8b36a;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.3s ease;

}

.footer-menu a:hover{

    color:#ffffff;

}

.footer-bottom{

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:20px;

}

.footer-bottom p{

    margin:0;
    width:auto;
    color:#aeb8c5;
    font-size:14px;
    line-height:1.7;
    text-align:center;

}

/*=========================================================
DESKTOP LARGE SCREENS
=========================================================*/

@media(min-width:1400px){

.container{

    max-width:1320px;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){

.site-footer{

    padding:35px 20px 20px;

}

.footer-brand{

    margin-bottom:22px;

}

.footer-brand h3{

    font-size:30px;

}

.footer-brand p{

    font-size:16px;
    line-height:1.7;
    padding:0 10px;

}

.footer-menu{

    gap:20px;
    margin:24px 0;

}

.footer-menu a{

    font-size:15px;

}

.footer-bottom{

    padding-top:18px;

}

.footer-bottom p{

    font-size:13px;

}

}

/*=========================================================
REVEAL ANIMATION
=========================================================*/

.hero-content,
.hero-image,
.journey-content,
.journey-image,
.profile-card,
.gallery-item,
.feature-card,
.contact-box{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.show{

opacity:1 !important;

transform:translateY(0) !important;

}


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

@media(max-width:768px){

.section-heading h2{

font-size:34px;

}

.contact-box{

padding:40px 25px;

}

.contact-box h2{

font-size:34px;

}

.feature-card{

padding:30px 20px;

}

}

/*=========================================================
SECTION SPACING
=========================================================*/

.hero-section,
.journey-section,
.profile-section,
.gallery-section,
.features-section,
.contact-section{

position:relative;

padding:120px 0;

overflow:hidden;

}


/*=========================================================
LUXURY BACKGROUND SHAPES
=========================================================*/

.hero-section::before,
.journey-section::before,
.gallery-section::before,
.features-section::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(rgba(182,140,82,.12),transparent 70%);

top:-180px;

right:-180px;

pointer-events:none;

}

.hero-section::after,
.features-section::after{

content:"";

position:absolute;

width:300px;

height:300px;

border-radius:50%;

background:radial-gradient(rgba(29,35,48,.05),transparent 70%);

left:-120px;

bottom:-120px;

pointer-events:none;

}


/*=========================================================
PREMIUM BUTTON
=========================================================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 38px;

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

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    border-radius:60px;

    border:2px solid rgba(37,211,102,.30);

    box-shadow:0 15px 40px rgba(37,211,102,.30);

    transition:all .35s ease;

}

.primary-btn i{

    font-size:18px;

}

.primary-btn:hover{

    transform:translateY(-4px);

    background:linear-gradient(135deg,#1ebe5d,#169c4a);

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

}

@media(max-width:768px){

.primary-btn{

    width:100%;

    max-width:320px;

    padding:16px 24px;

    font-size:15px;

}

}

/*=========================================================
IMAGE EFFECT
=========================================================*/

.hero-image img,
.journey-image img{

transition:transform .6s ease;

}

.hero-image:hover img,
.journey-image:hover img{

transform:scale(1.05);

}


/*=========================================================
SOFT SECTION DIVIDER
=========================================================*/

.gallery-section,
.features-section{

border-top:1px solid rgba(0,0,0,.05);

}

/*=========================================================
GLASSMORPHISM CARDS
=========================================================*/

.profile-card,
.feature-card,
.gallery-item{

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

backdrop-filter:blur(14px);

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

border:1px solid rgba(255,255,255,.4);

transition:all .4s ease;

}

.profile-card:hover,
.feature-card:hover,
.gallery-item:hover{

transform:translateY(-12px);

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

}


/*=========================================================
PREMIUM IMAGE STYLE
=========================================================*/

.hero-image img,
.journey-image img,
.gallery-item img{

display:block;

width:100%;

border-radius:24px;

}


/*=========================================================
SMOOTH TRANSITIONS
=========================================================*/

*{

transition:

background-color .3s ease,

color .3s ease,

border-color .3s ease,

box-shadow .3s ease,

transform .3s ease;

}


/*=========================================================
SELECTION COLOR
=========================================================*/

::selection{

background:#b68c52;

color:#fff;

}

::-moz-selection{

background:#b68c52;

color:#fff;

}


/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

background:#b68c52;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#8f6b3d;

}


/*=========================================================
FOCUS STATES
=========================================================*/

a:focus,
button:focus{

outline:2px solid #b68c52;

outline-offset:4px;

}


/*=========================================================
MOBILE OPTIMIZATION
=========================================================*/

@media(max-width:576px){

.container{

padding-left:20px;

padding-right:20px;

}

.hero-content h1{

font-size:36px;

line-height:1.2;

}

.hero-content p{

font-size:16px;

}

.primary-btn{

width:100%;

justify-content:center;

}

.profile-grid,
.gallery-grid,
.features-grid{

grid-template-columns:1fr;

gap:20px;

}

.hero-image img,
.journey-image img{

border-radius:18px;

}

.contact-box{

padding:35px 20px;

}

}


/*=========================================================
DESKTOP LARGE SCREENS
=========================================================*/

@media(min-width:1400px){

.container{

max-width:1320px;

}

}

.footer-brand,
.footer-bottom,
.footer-menu{

    text-align:center;

}

.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

}

.footer-bottom p{

    width:100%;

    text-align:center;

    margin:0 auto;

}