/* =========================================
   FINORA STUDIOS
   GLOBAL STYLE SYSTEM
========================================= */


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

:root {

    --ivory: #FAF7F2;
    --cream: #F3E7D3;
    --gold: #C9A227;
    --champagne: #E7D3A8;
    --rose: #D8B7AE;
    --charcoal: #151515;
    --white: #FFFFFF;

    --heading-font: "Cormorant Garamond", serif;
    --body-font: "Inter", sans-serif;

    --transition: .4s ease;

}



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


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    background: var(--ivory);

    color: var(--charcoal);

    font-family: var(--body-font);

    overflow-x: hidden;

}



img,
video {

    max-width: 100%;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}





/* =========================================
   GLOBAL CONTAINER
========================================= */


.container {

    width: min(1400px, 90%);

    margin: auto;

}





/* =========================================
   SECTIONS
========================================= */


.section {

    padding: 150px 0;

}





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


h1,
h2,
h3,
h4 {

    font-family: var(--heading-font);

    font-weight: 400;

    line-height: 1.1;

}



p {

    line-height: 1.8;

    color: rgba(21,21,21,.75);

}





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


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 40px;

    border-radius: 50px;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: var(--transition);

}





.btn-gold {

    background: var(--gold);

    color: var(--white);

}



.btn-gold:hover {

    background: #A98219;

    transform: translateY(-5px);

}





.btn-outline {

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

    color: white;

}



.btn-outline:hover {

    background: white;

    color: var(--charcoal);

}





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


.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    transition: .5s ease;

}





.header.scrolled {

    background: rgba(250,247,242,.9);

    backdrop-filter: blur(15px);

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

}





.navbar {

    width: 90%;

    max-width: 1400px;

    margin: auto;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}





/* LOGO */


.brand {

    display: flex;

    align-items: center;

    gap: 15px;

}



.brand img {

    width: 45px;

}



.brand-text {

    display: flex;

    flex-direction: column;

}



.brand-text span {

    font-family: var(--heading-font);

    font-size: 38px;

    letter-spacing: 6px;

    color: white;

}



.header.scrolled .brand-text span {

    color: var(--charcoal);

}



.brand-text small {

    font-size: 9px;

    letter-spacing: 7px;

    color: var(--gold);

}





/* NAV LINKS */


.nav-menu ul {

    display: flex;

    align-items: center;

    gap: 45px;

}



.nav-menu a {

    color: white;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.header.scrolled .nav-menu a {

    color: var(--charcoal);

}





.nav-menu a:hover {

    color: var(--gold);

}





.nav-cta {

    background: var(--gold);

    color: white;

    padding: 14px 30px;

    border-radius: 50px;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

}





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


.menu-toggle {

    display: none;

    cursor: pointer;

}



.menu-toggle span {

    display: block;

    width: 30px;

    height: 2px;

    background: white;

    margin: 7px 0;

}






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


.hero {

    height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.hero-video {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

}





.hero-overlay {

    position: absolute;

    inset: 0;

    background:

    linear-gradient(

        rgba(0,0,0,.35),

        rgba(0,0,0,.65)

    );

}





.hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    color: white;

    width: min(900px,90%);

}





.hero-tag {

    color: var(--champagne);

    font-size: 13px;

    letter-spacing: 5px;

    margin-bottom: 30px;

}





.hero h1 {

    font-size: clamp(55px,7vw,100px);

    color:white;

    margin-bottom: 30px;

}





.hero-description {

    color:white;

    max-width:650px;

    margin:auto;

    font-size:18px;

}





.hero-buttons {

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:20px;

}





.scroll-indicator {

    position:absolute;

    bottom:40px;

    z-index:2;

    color:white;

    text-align:center;

}



.scroll-indicator span {

    display:block;

    width:1px;

    height:60px;

    background:white;

    margin:auto auto 15px;

}




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


.section-title {

    text-align: center;

    margin-bottom: 80px;

}



.section-title span {

    display: inline-block;

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 5px;

    text-transform: uppercase;

    margin-bottom: 20px;

}



.section-title h2 {

    font-size: clamp(45px, 5vw, 75px);

    margin-bottom: 25px;

}



.section-title p {

    max-width: 700px;

    margin: auto;

    font-size: 17px;

}





/* =========================================
   TRUSTED BRANDS SECTION
========================================= */


.trusted {

    padding: 70px 0;

    background: var(--white);

    border-bottom: 1px solid rgba(0,0,0,.08);

}



.trusted-title {

    text-align: center;

    font-size: 12px;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 40px;

    color: var(--gold);

}



.trusted-list {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

}



.trusted-item {

    font-family: var(--heading-font);

    font-size: 30px;

    color: rgba(21,21,21,.5);

}





/* =========================================
   ABOUT SECTION
========================================= */


.about {

    background: var(--ivory);

}



.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}



.about-image {

    position: relative;

}



.about-image img {

    width: 100%;

    height: 700px;

    object-fit: cover;

    border-radius: 250px 250px 0 0;

}



.about-image::after {

    content:"";

    position:absolute;

    width:180px;

    height:180px;

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

    right:-30px;

    bottom:-30px;

    z-index:-1;

}



.about-content p {

    margin-bottom: 25px;

    font-size:17px;

}





.about-content .btn {

    margin-top:20px;

}





/* =========================================
   SERVICES SECTION
========================================= */


.services {

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #F7EEDF

    );

}



.services-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

}





.service-card {

    position:relative;

    background:white;

    padding:45px 35px;

    border-radius:30px;

    overflow:hidden;

    min-height:350px;

    transition:.5s ease;

    box-shadow:

    0 20px 50px rgba(0,0,0,.06);

}





.service-card:hover {

    transform:translateY(-15px);

    box-shadow:

    0 35px 70px rgba(198,161,91,.2);

}





.service-card::before {

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:

    radial-gradient(

        circle,

        rgba(201,162,39,.25),

        transparent

    );

    top:-80px;

    right:-80px;

    border-radius:50%;

}





.service-icon {

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    rgba(201,162,39,.12);

    color:var(--gold);

    font-size:30px;

    margin-bottom:30px;

}





.service-card h3 {

    font-size:34px;

    margin-bottom:20px;

}





.service-card p {

    font-size:15px;

}





.service-link {

    display:inline-block;

    margin-top:30px;

    color:var(--gold);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

}




/* =========================================
   FEATURED LOVE STORIES
========================================= */


.stories {

    background: var(--ivory);

}



.stories-grid {

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:50px;

}



.story-card {

    position:relative;

    overflow:hidden;

    border-radius:20px;

    height:650px;

}



.story-card img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s ease;

}



.story-card:hover img {

    transform:scale(1.08);

}



.story-overlay {

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.75)

    );



    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:50px;

    color:white;

}



.story-overlay span {

    color:var(--champagne);

    letter-spacing:4px;

    font-size:12px;

    text-transform:uppercase;

}



.story-overlay h3 {

    font-size:55px;

    margin:15px 0;

    color:white;

}



.story-overlay p {

    color:white;

}





/* =========================================
   PORTFOLIO PREVIEW
========================================= */


.portfolio-preview {

    background:white;

}



.portfolio-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;

}



.portfolio-item {

    position:relative;

    overflow:hidden;

    height:500px;

    border-radius:20px;

}



.portfolio-item img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s ease;

}



.portfolio-item:hover img {

    transform:scale(1.1);

}



.portfolio-item::after {

    content:"View Story";

    position:absolute;

    inset:0;

    background:

    rgba(201,162,39,.75);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    opacity:0;

    transition:.5s ease;

}



.portfolio-item:hover::after {

    opacity:1;

}





/* =========================================
   WHY FINORA
========================================= */


.why-finora {

    background:

    linear-gradient(

    135deg,

    #F8F0E4,

    #FFFFFF

    );

}



.why-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:35px;

}





.why-card {

    background:white;

    padding:50px 40px;

    border-radius:35px;

    position:relative;

    overflow:hidden;

    text-align:center;

    box-shadow:

    0 25px 60px rgba(0,0,0,.06);

}





.why-card::before {

    content:"✦";

    position:absolute;

    top:25px;

    right:30px;

    color:

    rgba(201,162,39,.25);

    font-size:40px;

}





.why-card::after {

    content:"❀";

    position:absolute;

    bottom:20px;

    left:25px;

    color:

    rgba(201,162,39,.18);

    font-size:45px;

}





.why-icon {

    font-size:40px;

    color:var(--gold);

    margin-bottom:25px;

}





.why-card h3 {

    font-size:35px;

    margin-bottom:20px;

}





/* =========================================
   PROCESS SECTION
========================================= */


.process {

    background:var(--charcoal);

    color:white;

}



.process .section-title h2 {

    color:white;

}



.process-grid {

    display:grid;

    grid-template-columns:

    repeat(5,1fr);

    gap:30px;

}



.process-item {

    text-align:center;

    position:relative;

}



.process-number {

    width:80px;

    height:80px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 30px;

    font-family:var(--heading-font);

    font-size:40px;

    color:var(--gold);

}



.process-item h3 {

    color:white;

    font-size:30px;

}



.process-item p {

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

}




/* =========================================
   LOVE NOTES / TESTIMONIALS
========================================= */


.testimonials {

    background:var(--ivory);

}



.testimonial-wrapper {

    max-width:900px;

    margin:auto;

    text-align:center;

}



.testimonial-card {

    background:white;

    padding:70px 60px;

    border-radius:40px;

    box-shadow:

    0 25px 70px rgba(0,0,0,.08);

}



.stars {

    color:var(--gold);

    letter-spacing:8px;

    font-size:20px;

    margin-bottom:30px;

}



.testimonial-card p {

    font-family:var(--heading-font);

    font-size:38px;

    line-height:1.4;

    color:var(--charcoal);

    margin-bottom:40px;

}



.client-info {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}



.client-info img {

    width:70px;

    height:70px;

    object-fit:cover;

    border-radius:50%;

}



.client-info h4 {

    font-size:25px;

}





/* =========================================
   INSTAGRAM SECTION
========================================= */


.instagram {

    background:white;

}



.instagram-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:20px;

}



.instagram-item {

    height:350px;

    overflow:hidden;

    position:relative;

    border-radius:20px;

}



.instagram-item img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}



.instagram-item:hover img {

    transform:scale(1.1);

}



.instagram-overlay {

    position:absolute;

    inset:0;

    background:

    rgba(201,162,39,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.5s ease;

}



.instagram-overlay i {

    color:white;

    font-size:40px;

}



.instagram-item:hover .instagram-overlay {

    opacity:1;

}





/* =========================================
   BOOKING CTA
========================================= */


.booking-cta {

    position:relative;

    min-height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.75)

    ),

    url("../assets/images/cta.jpg");

    background-size:cover;

    background-position:center;

}



.booking-content {

    color:white;

    max-width:800px;

}



.booking-content h2 {

    font-size:80px;

    color:white;

    margin-bottom:30px;

}



.booking-content p {

    color:white;

    font-size:20px;

    margin-bottom:45px;

}





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


.footer {

    background:#111;

    color:white;

    padding:100px 0 40px;

    position:relative;

    overflow:hidden;

}





.footer-grid {

    display:grid;

    grid-template-columns:

    2fr 1fr 1fr 1fr;

    gap:50px;

}





.footer-logo {

    font-family:var(--heading-font);

    font-size:60px;

    letter-spacing:8px;

}



.footer h3 {

    color:white;

    font-size:25px;

    margin-bottom:25px;

}



.footer a {

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

    display:block;

    margin-bottom:15px;

    transition:.3s;

}



.footer a:hover {

    color:var(--gold);

}



.footer-bottom {

    margin-top:70px;

    padding-top:30px;

    border-top:

    1px solid rgba(255,255,255,.15);

    text-align:center;

}





/* =========================================
   FLOATING WEDDING DECORATIONS
========================================= */


.ring {

    position:absolute;

    color:var(--gold);

    font-size:70px;

    opacity:.25;

    animation:

    float 5s infinite ease-in-out;

}



.ring.one {

    top:30px;

    right:10%;

}



.ring.two {

    bottom:40px;

    left:10%;

    animation-delay:2s;

}





@keyframes float {


    0%,
    100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-25px);

    }


}





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


.reveal {

    opacity:0;

    transform:translateY(50px);

}


.reveal.active {

    opacity:1;

    transform:translateY(0);

}





/* =========================================
   PREMIUM LOADING SCREEN
========================================= */


.loader {

    position:fixed;

    inset:0;

    background:#111;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:1s ease;

}



.loader.hide{

    opacity:0;

    visibility:hidden;

}





.loader-logo{

    color:white;

    font-family:var(--heading-font);

    font-size:70px;

    letter-spacing:15px;

    animation:pulseLogo 2s infinite;

}





@keyframes pulseLogo{


0%,100%{

opacity:.5;

}



50%{

opacity:1;

}


}









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


.menu-toggle.active span:nth-child(1){

transform:rotate(45deg) translate(7px,7px);

}



.menu-toggle.active span:nth-child(2){

opacity:0;

}



.menu-toggle.active span:nth-child(3){

transform:rotate(-45deg) translate(7px,-7px);

}





.menu-toggle span{

transition:.4s ease;

}









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


.about-image img,
.story-card img,
.portfolio-item img{


transform:scale(1.15);

transition:

1.5s cubic-bezier(.2,.8,.2,1);


}





.show-image{


transform:scale(1) !important;


}








/* =========================================
   PORTFOLIO PAGE
========================================= */


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


.portfolio-hero {

    height:75vh;

    background:

    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.65)
    ),

    url("../assets/images/portfolio-bg.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}



.portfolio-hero-content span {

    color:var(--champagne);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:12px;

}



.portfolio-hero-content h1 {

    color:white;

    font-size:90px;

    margin:30px 0;

}



.portfolio-hero-content p {

    color:white;

    font-size:20px;

    max-width:650px;

    margin:auto;

}







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


.portfolio-filter {

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:80px;

}





.filter-btn {

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

    background:transparent;

    padding:15px 35px;

    border-radius:50px;

    cursor:pointer;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:12px;

    transition:.4s ease;

}





.filter-btn:hover,

.filter-btn.active {

    background:var(--gold);

    color:white;

}









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



.portfolio-gallery {


columns:3;

column-gap:30px;


}





.gallery-item {


break-inside:avoid;

margin-bottom:30px;

position:relative;

overflow:hidden;

border-radius:25px;

cursor:pointer;


}





.gallery-item img {


width:100%;

display:block;

transition:.8s ease;


}





.gallery-item:hover img {


transform:scale(1.08);


}








.gallery-info {


position:absolute;

bottom:0;

left:0;

right:0;

padding:40px 30px;

background:

linear-gradient(

transparent,

rgba(0,0,0,.8)

);


color:white;

transform:translateY(100px);

opacity:0;

transition:.5s ease;


}





.gallery-item:hover .gallery-info {


transform:translateY(0);

opacity:1;


}





.gallery-info h3 {


font-size:35px;

color:white;

margin-bottom:10px;


}





.gallery-info p {


color:white;

font-size:14px;


}









/* =========================================
   PROJECT MODAL
========================================= */


.project-modal {


position:fixed;

inset:0;

background:

rgba(0,0,0,.85);

z-index:2000;

display:flex;

align-items:center;

justify-content:center;

padding:30px;

opacity:0;

visibility:hidden;

transition:.5s ease;


}





.project-modal.show {


opacity:1;

visibility:visible;


}





.modal-content {


background:white;

max-width:1000px;

width:100%;

border-radius:30px;

overflow:hidden;

position:relative;

transform:scale(.8);

transition:.5s ease;


}





.project-modal.show .modal-content {


transform:scale(1);


}





.modal-image {


width:100%;

height:600px;

object-fit:cover;


}





.modal-details {


padding:40px;


}





.modal-details h2 {


font-size:50px;

margin-bottom:20px;


}





.modal-close {


position:absolute;

top:20px;

right:25px;

z-index:5;

background:white;

border:none;

width:50px;

height:50px;

border-radius:50%;

font-size:30px;

cursor:pointer;


}







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



@media(max-width:900px){


.portfolio-gallery{

columns:2;

}


.portfolio-hero-content h1{

font-size:60px;

}


}




@media(max-width:600px){


.portfolio-gallery{

columns:1;

}



.portfolio-hero{

height:70vh;

}



.portfolio-hero-content h1{

font-size:45px;

}



.modal-image{

height:350px;

}



}







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



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


.about-hero {

    height:80vh;

    background:

    linear-gradient(

    rgba(0,0,0,.45),

    rgba(0,0,0,.7)

    ),

    url("../assets/images/about-bg.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}





.about-hero-content {

    max-width:900px;

    width:90%;

}



.about-hero-content span {

    color:var(--champagne);

    font-size:12px;

    letter-spacing:6px;

    text-transform:uppercase;

}



.about-hero-content h1 {

    color:white;

    font-size:100px;

    margin:30px 0;

}



.about-hero-content p {

    color:white;

    font-size:20px;

    max-width:700px;

    margin:auto;

}









/* =========================================
   ABOUT STORY
========================================= */


.about-story {

    background:var(--ivory);

}



.gold-text {

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:12px;

    display:block;

    margin-bottom:25px;

}





.about-content h2 {

    font-size:65px;

    margin-bottom:35px;

}











/* =========================================
   PHILOSOPHY
========================================= */


.philosophy {

    background:white;

}



.philosophy-grid {

    display:grid;

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

    gap:35px;

}





.philosophy-card {

    background:var(--ivory);

    padding:60px 40px;

    text-align:center;

    border-radius:35px;

    position:relative;

    transition:.5s ease;

}





.philosophy-card:hover {

    transform:translateY(-15px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.08);

}





.philosophy-card i {

    color:var(--gold);

    font-size:45px;

    margin-bottom:30px;

}





.philosophy-card h3 {

    font-size:35px;

    margin-bottom:20px;

}









/* =========================================
   TEAM SECTION
========================================= */


.team {

    background:

    linear-gradient(

    135deg,

    #F7EEDF,

    #FFFFFF

    );

}





.team-grid {

    display:grid;

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

    gap:40px;

}





.team-card {

    overflow:hidden;

    border-radius:30px;

    background:white;

}



.team-card img {

    width:100%;

    height:500px;

    object-fit:cover;

    transition:.7s ease;

}



.team-card:hover img {

    transform:scale(1.08);

}



.team-card div {

    padding:30px;

}



.team-card h3 {

    font-size:35px;

}



.team-card p {

    color:var(--gold);

    margin-top:10px;

}









/* =========================================
   TIMELINE
========================================= */


.timeline {

    background:var(--charcoal);

}



.timeline .section-title h2 {

    color:white;

}





.timeline-wrapper {

    max-width:900px;

    margin:auto;

    position:relative;

}



.timeline-wrapper::before {

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:1px;

    height:100%;

    background:var(--gold);

}





.timeline-item {

    width:50%;

    padding:40px;

    position:relative;

}



.timeline-item:nth-child(odd){

    text-align:right;

}





.timeline-item:nth-child(even){

    margin-left:50%;

}





.timeline-item h3 {

    color:var(--gold);

    font-size:50px;

}



.timeline-item p {

    color:white;

}









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


@media(max-width:900px){


.about-hero-content h1{

font-size:65px;

}



.philosophy-grid{

grid-template-columns:1fr;

}



.team-grid{

grid-template-columns:1fr;

}



.timeline-wrapper::before{

left:20px;

}



.timeline-item{

width:100%;

padding-left:60px;

text-align:left!important;

}



.timeline-item:nth-child(even){

margin-left:0;

}



}




@media(max-width:600px){


.about-hero{

height:70vh;

}



.about-hero-content h1{

font-size:45px;

}



.about-content h2{

font-size:45px;

}



.team-card img{

height:400px;

}



}







/* =========================================
   SERVICES PAGE
========================================= */



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


.services-hero {

    height:80vh;

    background:

    linear-gradient(

    rgba(0,0,0,.45),

    rgba(0,0,0,.7)

    ),

    url("../assets/images/services-bg.jpg");


    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}





.services-hero-content {

    width:min(900px,90%);

}





.services-hero-content span {


    color:var(--champagne);

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:12px;


}





.services-hero-content h1 {


    color:white;

    font-size:100px;

    margin:30px 0;


}





.services-hero-content p {


    color:white;

    font-size:20px;

    max-width:700px;

    margin:auto;


}









/* =========================================
   SERVICE FEATURE SECTIONS
========================================= */


.service-list {

    background:var(--ivory);

}






.service-feature {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-bottom:150px;


}






.service-feature.reverse {


    direction:rtl;


}



.service-feature.reverse .service-feature-content{


    direction:ltr;


}





.service-feature-image img,
.service-feature-image video {


width:100%;

height:700px;

object-fit:cover;

transition:.8s ease;

border-radius:40px;


}


.video-box{

overflow:hidden;

border-radius:40px;

position:relative;

}





.video-box video{


display:block;

}




.service-feature:hover video{


transform:scale(1.08);


}



@media(max-width:900px){


.service-feature-image video{


height:550px;


}



}


@media(max-width:600px){


.service-feature-image video{


height:400px;


}


}



.service-feature:hover img {


    transform:scale(1.08);


}







.service-feature-content span {


    color:var(--gold);

    font-size:20px;

    letter-spacing:4px;


}





.service-feature-content h2 {


    font-size:75px;

    margin:25px 0;


}







.service-feature-content p {


    font-size:18px;

    margin-bottom:35px;


}







.service-feature-content ul {


    margin-bottom:40px;


}







.service-feature-content li {


    padding:15px 0;

    border-bottom:

    1px solid rgba(0,0,0,.1);

    font-size:16px;


}







.service-feature-content li::before {


    content:"✦";

    color:var(--gold);

    margin-right:15px;


}









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


@media(max-width:900px){


.services-hero-content h1{


font-size:65px;


}





.service-feature{


grid-template-columns:1fr;

gap:50px;

margin-bottom:100px;


}





.service-feature.reverse{


direction:ltr;


}





.service-feature-image img{


height:550px;


}





.service-feature-content h2{


font-size:55px;


}




}





@media(max-width:600px){



.services-hero{


height:70vh;


}





.services-hero-content h1{


font-size:45px;


}




.service-feature-content h2{


font-size:42px;


}




.service-feature-image img{


height:400px;


}




}





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



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


.contact-hero {

    height:80vh;

    background:

    linear-gradient(

    rgba(0,0,0,.5),

    rgba(0,0,0,.75)

    ),

    url("../assets/images/contact-bg.jpg");


    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

}





.contact-hero-content {

    width:min(900px,90%);

}





.contact-hero-content span {


    color:var(--champagne);

    letter-spacing:6px;

    font-size:12px;

    text-transform:uppercase;


}





.contact-hero-content h1 {


    color:white;

    font-size:100px;

    margin:30px 0;


}





.contact-hero-content p {


    color:white;

    font-size:20px;

    max-width:650px;

    margin:auto;


}









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



.contact-section {


    background:var(--ivory);


}





.contact-grid {


    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:start;


}









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



.contact-form {


    background:white;

    padding:60px;

    border-radius:40px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.08);


}




.contact-form h2 {


    font-size:60px;

    margin-bottom:40px;


}







.input-group {


    margin-bottom:30px;


}





.input-group label {


    display:block;

    margin-bottom:10px;

    font-size:14px;

    letter-spacing:1px;


}





.input-group input,

.input-group textarea,

.input-group select {


    width:100%;

    padding:18px 20px;

    border:none;

    border-bottom:

    1px solid #ddd;

    background:transparent;

    outline:none;

    font-size:16px;


}





.input-group input:focus,

.input-group textarea:focus,

.input-group select:focus {


    border-color:var(--gold);


}









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


.contact-details {


    padding-top:40px;


}





.contact-details h2 {


    font-size:65px;

    margin-bottom:30px;


}





.contact-details > p {


    font-size:18px;

    margin-bottom:50px;


}






.contact-item {


    display:flex;

    gap:25px;

    align-items:center;

    margin-bottom:35px;


}





.contact-item i {


    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    var(--gold);

    color:white;

    border-radius:50%;

    font-size:25px;


}





.contact-item h3 {


    margin-bottom:8px;

    font-size:22px;


}





.whatsapp-btn {


    display:inline-flex;

    gap:15px;

    align-items:center;

    padding:18px 35px;

    background:#25D366;

    color:white;

    border-radius:50px;

    margin-top:20px;

    transition:.4s ease;


}





.whatsapp-btn:hover {


    transform:translateY(-5px);


}









/* =========================================
   MAP
========================================= */



.map-section {


    height:450px;

    background:#eee;

}





.map-placeholder {


    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;


}





.map-placeholder i {


    font-size:60px;

    color:var(--gold);

    margin-bottom:20px;


}





.map-placeholder h2 {


    font-size:50px;


}









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



@media(max-width:900px){



.contact-grid{


grid-template-columns:1fr;


}




.contact-form{


padding:40px;


}




.contact-hero-content h1{


font-size:65px;


}



.contact-details h2{


font-size:50px;


}




}





@media(max-width:600px){



.contact-hero{


height:70vh;


}





.contact-hero-content h1{


font-size:45px;


}




.contact-form{


padding:25px;

border-radius:25px;


}




.contact-form h2{


font-size:40px;


}




}







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


.footer {

    background:#111;

    color:white;

    padding:120px 0 40px;

    position:relative;

    overflow:hidden;

}



.footer-grid {


display:grid;

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

gap:60px;


}





.footer-logo {


font-family:var(--heading-font);

font-size:70px;

letter-spacing:10px;

color:white;

display:block;

margin-bottom:25px;


}





.footer-brand p {


max-width:350px;

color:#ccc;

line-height:1.8;


}





.footer-column {


display:flex;

flex-direction:column;

gap:18px;


}





.footer-column h3 {


color:var(--gold);

font-size:20px;

margin-bottom:15px;


}





.footer-column a {


color:#ddd;

transition:.3s ease;

cursor:pointer;


}





.footer-column a:hover {


color:var(--gold);

transform:translateX(8px);


}







.footer-line {


height:1px;

background:

rgba(255,255,255,.15);

margin:70px 0 30px;


}





.footer-bottom {


display:flex;

justify-content:space-between;

color:#aaa;

font-size:14px;


}









/* WEDDING RINGS */


.floating-rings {


position:absolute;

right:80px;

top:40px;


}





.ring {


position:absolute;

border:3px solid var(--gold);

border-radius:50%;


}




.ring-one {


width:100px;

height:100px;

animation:bounceRing 4s infinite;


}





.ring-two {


width:100px;

height:100px;

margin-left:60px;

margin-top:20px;

animation:bounceRing 4s infinite .5s;


}






@keyframes bounceRing {


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}









@media(max-width:900px){


.footer-grid{


grid-template-columns:1fr 1fr;


}



.footer-bottom{


flex-direction:column;

gap:15px;


}



}





@media(max-width:600px){


.footer-grid{


grid-template-columns:1fr;


}




.footer-logo{


font-size:50px;


}



.floating-rings{


right:20px;

opacity:.4;


}


}







/* =========================================
   LOVE NOTES TESTIMONIAL CAROUSEL
========================================= */


.love-notes{

background:#fff;

overflow:hidden;

}





.testimonial-wrapper{

overflow:hidden;

position:relative;

margin-top:70px;

}





.testimonial-track{

display:flex;

transition:1s ease;

}





.testimonial-card{

min-width:100%;

text-align:center;

padding:60px;

}





.couple-image{

width:130px;

height:130px;

margin:auto;

border-radius:50%;

overflow:hidden;

margin-bottom:30px;

border:4px solid var(--gold);

}





.couple-image img{

width:100%;

height:100%;

object-fit:cover;

}





.stars{

color:var(--gold);

font-size:25px;

letter-spacing:5px;

margin-bottom:25px;

}





.testimonial-card p{

max-width:750px;

margin:auto;

font-size:25px;

line-height:1.7;

font-family:var(--heading-font);

}





.testimonial-card h3{

margin-top:35px;

font-size:35px;

}





.testimonial-card span{

color:var(--gold);

letter-spacing:2px;

font-size:14px;

}






@media(max-width:600px){


.testimonial-card{

padding:30px;

}



.testimonial-card p{

font-size:20px;

}



.testimonial-card h3{

font-size:28px;

}



}







/* =========================================
   WHY FINORA LUXURY CARDS
========================================= */


.why-finora{


background:

linear-gradient(

135deg,

#fff,

#f7eee1

);


}





.why-grid{


display:grid;

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

gap:35px;

margin-top:70px;


}





.why-card{


background:white;

padding:60px 35px;

text-align:center;

border-radius:40px;

position:relative;

overflow:hidden;

border:

1px solid rgba(198,161,91,.35);


transition:.6s ease;


}





.why-card:hover{


transform:translateY(-15px);


box-shadow:

0 40px 80px rgba(0,0,0,.12);


}







.why-card::before{


content:"";


position:absolute;

inset:15px;

border:

1px solid rgba(198,161,91,.2);

border-radius:30px;


pointer-events:none;


}







.why-card i{


font-size:45px;

color:var(--gold);

margin-bottom:25px;


}





.why-card h3{


font-size:32px;

margin-bottom:20px;


}





.why-card p{


line-height:1.8;


}








/* DECORATIONS */


.decor{


position:absolute;

color:var(--gold);

font-size:45px;

opacity:.35;


}





.flower-one{


top:15px;

left:20px;


}



.flower-two{


top:15px;

right:20px;


}



.flower-three{


bottom:15px;

left:20px;


}



.flower-four{


bottom:15px;

right:20px;


}








@media(max-width:1100px){


.why-grid{


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


}


}





@media(max-width:600px){


.why-grid{


grid-template-columns:1fr;


}



}





/* =========================================
   HERO SCROLL INDICATOR
========================================= */


.scroll-indicator{


position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

color:white;

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;


}




.scroll-indicator i{


font-size:30px;

color:var(--gold);

animation:bounceScroll 2s infinite;


}





@keyframes bounceScroll{


0%,100%{


transform:translateY(0);


}



50%{


transform:translateY(15px);


}


}






/* =========================================
   FINORA STATS SECTION
========================================= */


.stats-section{

    display:grid;

    grid-template-columns:repeat(3, minmax(200px, 280px));

    justify-content:center;

    gap:35px;

    margin-top:60px;

}




.stat-card{

    background:white;

    padding:35px 25px;

    text-align:center;

    border-radius:25px;

    border:1px solid rgba(198,161,91,.35);

    position:relative;

    overflow:hidden;

    transition:.4s ease;

}





.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 25px 50px rgba(0,0,0,.1);

}





.stat-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#C6A15B;

}







.stat-card i{

    font-size:35px;

    color:#C6A15B;

    margin-bottom:15px;

}





.stat-card h2{

    font-family:var(--heading-font);

    font-size:55px;

    font-weight:600;

    margin:10px 0;

}





.stat-card p{

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#555;
}

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


@media(max-width:900px){


    .stats-section{

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

        gap:25px;

        padding:0 20px;

    }



    .stat-card{

        padding:30px 20px;

    }



    .stat-card h2{

        font-size:45px;

    }


}






@media(max-width:600px){


    .stats-section{


        grid-template-columns:1fr;

        width:100%;

        gap:20px;

        padding:0 15px;


    }





    .stat-card{


        width:100%;

        max-width:350px;

        margin:auto;

        padding:30px 20px;


    }




    .stat-card i{


        font-size:32px;


    }




    .stat-card h2{


        font-size:42px;


    }



    .stat-card p{


        font-size:12px;

        letter-spacing:1.5px;


    }


}





/* =========================================
   LUXURY CURSOR FOLLOWER
========================================= */


.cursor-circle{


width:25px;

height:25px;

border-radius:50%;

background:

rgba(198,161,91,.8);

position:fixed;

pointer-events:none;

z-index:99999;

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

transition:

transform .15s ease;


mix-blend-mode:multiply;


}



@media(max-width:900px){


.cursor-circle{

display:none;

}


}