/* ===========================
   Google Font
=========================== */
/*=========================
Custom Fonts
=========================*/

@font-face {
    font-family: "Benjola";
    src: url("../assets/fonts/Benjola.woff") format("woff"),
        url("../assets/fonts/Benjola.ttf") format("truetype"),
        url("../assets/fonts/Benjola.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Abygaer";
    src: url("../assets/fonts/Abygaer.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Desirable brush texture";
    src: url("../assets/fonts/Desirable\ Bursh\ Texture.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* ===========================
   Root Variables
=========================== */

:root {

    --primary: #000000;
    --secondary: #f7ebd9fff;

    --heading-color: #111111;
    --text-color: #666666;

    --transition: .35s ease;

}

/* ===========================
   Reset
=========================== */

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

html {
    scroll-behavior: smooth;
    max-width: 100%;
}

html,
body{
    overflow-x:hidden;
    width:100%;
    max-width:100%;
}

body {
    font-family: "Abygaer", sans-serif;
    background: #f7ebd9;
    color: var(--text-color);
    overflow-x: hidden;
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
    transition: var(--transition);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
}

input,
textarea,
select {
    outline: none;
    border: none;
}

section {
    padding: 100px 0;
}

/* .container-fluid {
    max-width: 2000px;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-weight: 600;
    margin-bottom: 0;
}

p {
    margin-bottom: 0;
}




.hero {

    width: 100%;
    height: 100vh;

    background: url("../assets/banner.png") center center/cover no-repeat;

    position: relative;

    overflow: hidden;
    padding: 0;

}

.hero-overlay {

    position: absolute;
    inset: 0;

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

}

.hero-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 45px 60px;
}

.hero-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-logo img {
    width: 250px;
    height: auto;
    display: block;
}

.hero-logo p {
    margin-top: 18px;
    color: #8e8e8e;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.menu-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    cursor: pointer;
}

.menu-btn span {
    height: 2px;
    background: #f7ebd9;
    border-radius: 10px;
    transition: .35s ease;
}

.menu-btn span:nth-child(1) {
    width: 34px;
}

.menu-btn span:nth-child(2) {
    width: 34px;
}

.menu-btn span:nth-child(3) {
    width: 34px;
}

.menu-btn:hover span:nth-child(1) {

    width: 28px;

}

.menu-btn:hover span:nth-child(3) {

    width: 28px;

}

.hero-social {

    position: absolute;

    right: 60px;

    bottom: 50px;

    z-index: 20;

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.hero-social a {

    color: #f7ebd9;

    font-size: 22px;

    transition: .35s;

}

.hero-social a:hover {

    transform: translateY(-4px);

    color: #d5d5d5;

}

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

#preloader{

position:fixed;
inset:0;

z-index:999999;

display:flex;
justify-content:center;
align-items:center;

background:
linear-gradient(
rgba(46,91,57,.80),
rgba(46,91,57,.80));

backdrop-filter:blur(14px);

overflow:hidden;

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

}

#preloader.hide{

opacity:0;
visibility:hidden;
pointer-events:none;

}

.preloader-content{

text-align:center;

}

.preloader-logo{

width:min(500px,75vw);

opacity:0;

transform:
scale(.92);

filter:blur(8px);

animation:

logoReveal 1.4s ease forwards,

shimmer 2.6s ease 1.1s;

}

.preloader-tagline{

margin-top:28px;

color:rgba(248,239,223,.82);

letter-spacing:6px;

font-size:14px;

text-transform:uppercase;

opacity:0;

transform:translateY(20px);

animation:

taglineReveal .8s ease forwards;

animation-delay:1.5s;

}

@keyframes logoReveal{

to{

    opacity:1;

    transform:scale(1);

    filter:blur(0);

}

}

@keyframes taglineReveal{

to{

    opacity:1;

    transform:translateY(0);

}

}

/* moving luxury light */

.preloader-logo{

position:relative;

}

.preloader-logo::after{

content:"";

position:absolute;

inset:0;

}

@media(max-width:768px){

.preloader-logo{

width:90vw;

}

.preloader-tagline{

letter-spacing:3px;

font-size:12px;

margin-top:18px;

}

}

@media(max-width:768px){

    .preloader-logo{

        width:300px;
        max-width:80vw;

    }

}/*=========================================*
* Sidebar
*=========================================*/

.sidebar-overlay {
    position: fixed;
    inset: 0;

    background: linear-gradient(
        rgba(46, 91, 57, .80),
        rgba(46, 91, 57, .80)
    );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .45s ease;

    z-index: 999;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*=========================================*
* Sidebar
*=========================================*/

.sidebar {
    position: fixed;

    top: 0;
    right: 0;

    width: 100%;
    height: 100vh;

    background: linear-gradient(
        rgba(46, 91, 57, .80),
        rgba(46, 91, 57, .80)
    );

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

    padding: 50px 90px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: flex-end;

    z-index: 1000;

    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;

    will-change: transform;

    transition: .6s cubic-bezier(.77, 0, .18, 1);
}

.sidebar.active {
    transform: translateX(0);

    visibility: visible;
    pointer-events: auto;
}


/*=========================================*
* Close Button
*=========================================*/

.close-menu {
    position: absolute;

    top: 32px;
    right: 40px;

    width: 50px;
    height: 50px;

    border: none;
    background: none;

    color: #F7EBD9;

    font-size: 32px;

    cursor: pointer;

    transition: .35s;
}

.close-menu:hover {
    transform: rotate(90deg);
}


/*=========================================*
* Sidebar Navigation
*=========================================*/

.sidebar ul {
    list-style: none;

    margin: 0;
    padding: 0;

    margin-top: 20px;

    text-align: right;
}

.sidebar ul li {
    margin: 18px 0;
}

.sidebar ul li a {
    position: relative;

    text-decoration: none;

    color: #F7EBD9;

    font-family: "Abygaer";

    font-size: 42px;

    font-weight: 400;

    letter-spacing: .5px;

    text-transform: uppercase;

    transition: .35s;
}

.sidebar ul li a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: #F7EBD9;

    transition: .35s;
}

.sidebar ul li a:hover::after {
    width: 100%;
}

.sidebar ul li a:hover {
    color: #D8D8D8;
}


/*=========================================*
* Sidebar Socials
*=========================================*/

.sidebar-social {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    align-self: flex-start;

    width: auto;

    gap: 12px;
}


/* Else Where text */

.sidebar-social > span {
    color: #F7EBD9;

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

    font-size: 14px;

    font-weight: 400;

    letter-spacing: .5px;

    line-height: 1;
    font-style: italic;
    opacity: .85;
}


/* Social icons row */

.social-icons {
    display: flex;

    align-items: center;

    gap: 28px;
}


/* Individual social links */

.sidebar-social a {
    display: flex;

    align-items: center;
    justify-content: center;

    color: #F7EBD9;

    font-size: 20px;

    text-decoration: none;

    transition: .35s;
}

.sidebar-social a:hover {
    transform: translateY(-4px);
}
/*=========================================
STORY SECTION
=========================================*/

.story-section{

    background: #f7ebd9;

    padding:140px 0;

    overflow:hidden;

}

        section.story-section-mb {
    display: none;
}

.story-heading{

    text-align:center;

    margin-bottom:90px;

}

.story-heading h2{

    font-family:"Abygaer";

    font-size:100px;

    line-height:1;

    font-weight:400;

    color:#3E5E48;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*========================
Gallery
========================*/
.story-gallery{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:55px;

    margin-bottom:110px;

}

.story-card{

    overflow:hidden;

    transition:transform .45s ease;

}

.story-card:hover{

    transform:translateY(-12px);

}

.story-image{
    position:relative;
    overflow:hidden;

}

.story-image img{

    width:100%;

    display:block;

    transition:.6s ease;
    /*transform:scale(1.15);*/
}

.story-card:hover img{

    filter:brightness(1.08);

}


/*========================
Image Sizes
========================*/
.story-small{

    width:255px;

    margin-top:70px;

}
.story-large{

    width:300px;

    margin-top:0;

}

.story-medium{

    width:250px;

    margin-top:85px;

}


/*========================
Content
========================*/

.story-content{

    max-width:920px;

    margin:auto;

    text-align:center;

}

.story-content p{

    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.9;
    color: #4d4d4d;
    max-width: 640px;
    margin-bottom: 55px;
    margin: 0 auto 55px;

}


/*========================
Button
========================*/

.story-btn{

    position:relative;

    display:inline-block;

    font-family:"Abygaer";

    font-size:22px;

    color:#2D2D2D;

    letter-spacing:2px;

    text-decoration:none;

    padding-bottom:10px;

}

.story-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#3E5E48;

    transition:.45s;

}

.story-btn:hover::after{

    width:100%;

}

.story-btn:hover{

    color:#3E5E48;

}

/* /*========================
Scroll Reveal Animations
========================*/
/* 
.reveal-heading,
.reveal-img,
.reveal-content,
.reveal-button {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal-heading.in-view {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.story-gallery .story-card.reveal-img.in-view {
    opacity: 1;
    transform: translateY(0);
}

.story-gallery .story-card:nth-child(1).reveal-img.in-view { transition-delay: 0.9s; }
.story-gallery .story-card:nth-child(2).reveal-img.in-view { transition-delay: 1.5s; }
.story-gallery .story-card:nth-child(3).reveal-img.in-view { transition-delay: 2.1s; }
.story-gallery .story-card:nth-child(4).reveal-img.in-view { transition-delay: 2.7s; }


.reveal-content.in-view {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 3.3s;
}


.reveal-button.in-view {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 3.6s;
}  */


/*========================
Initial GSAP State
========================*/

/* .story-heading,
.story-card,
.story-content{

    opacity:0;

} 

/*==============================
Story Reveal Initial State
===============================*/
/* 
.reveal-heading,
.reveal-content,
.reveal-button{
    opacity:0;
    transform:translateY(80px);
}

.reveal-img{
    opacity:0;
    transform:translateY(140px);
} */

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

.services-section{
    padding:10px 0 60px 0;
    /* background:#F7F2E8; */
}

.services-heading{
    margin-bottom:70px;
}

.services-heading h2{

    font-family:"Desirable Brush";
    font-size:68px;
    color:#2F5E48;
    margin-bottom:15px;

}

.services-heading p{

    font-family:"Benjola";
    font-size:20px;
    color:#555;
    max-width:650px;

}


/* Card */

.service-card{

    position:relative;
    display:block;
    overflow:hidden;
    /* border-radius:18px; */
    text-decoration:none;

}


/* Image */

.service-card img{

    width:100%;
    height:100vh;
    object-fit:cover;

    transition:1s ease;

}


/* Overlay */

.service-overlay{

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.70),
        rgba(0,0,0,.18),
        rgba(0,0,0,.05)
    );
    
    backdrop-filter:blur(2px);

    opacity:0;
    transition:.5s ease;

}


/* Title */

.service-overlay h3{

    font-family:"Desirable Brush Texture";
    font-size:40px;
    color:#f7ebd9;
font-weight: 100;
    text-align:center;

    transform:translateY(25px);

    opacity:0;

    transition:.55s ease;

}


/* Subtitle */

.service-overlay p{

    font-family:"Benjola";
    color:#f7ebd9;
    font-size:20px;
    margin-bottom:18px;

}


/* Arrow */

.service-overlay span{

    color:#f7ebd9;
    font-family:"Benjola";
    font-size:18px;

    letter-spacing:2px;

}


/* Hover */

.service-card:hover img{

    transform:scale(1.12);

}

.service-card:hover .service-overlay{

    opacity:1;

}

.service-card:hover .service-overlay h3{

    opacity:1;
    transform:translateY(0);

}

section.services-section .col-lg-6 {
    padding: 0;
}


/*====================================
ABOUT PHOTOGRAPHER
====================================*/

.about-photographer{

    padding:60px 40px;

    /* background:#f7ebd9; */

}

.about-image{

    overflow:hidden;

}

.about-image img{

    width:100%;

    display:block;

}

.about-content{

    padding-left:70px;

}

.about-content h2{

    font-family:"Abygaer";

    font-size:72px;

    font-weight:400;

    line-height:1.05;

    color:#3E5E48;

    margin-bottom:40px;

    text-transform:uppercase;

}

.about-content p{

       font-family: "Inter", sans-serif;
    font-size: 17px;

    line-height:1.9;

    color:#4d4d4d;

    max-width:640px;

    margin-bottom:55px;

}

.about-btn{

    position:relative;

    display:inline-block;

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

    font-size:14px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#3E5E48;

    text-decoration:none;

    padding-bottom:8px;

}

.about-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:#3E5E48;

    transition:.4s ease;

}

.about-btn:hover{

    color:#3E5E48;

}

.about-btn:hover::after{

    width:40%;

}

/*====================================
COUNTER SECTION
====================================*/

.counter-section{

    min-height:100vh;

    background:url("/assets/counters-bg.png") center center/cover no-repeat;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;
        padding: 80px 40px;

}

.counter-section::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.counter-section .container-fluid{

    position:relative;

    z-index:2;

    padding:0 80px;

}

.counter-left{

    display:flex;

    flex-direction:column;

    gap:80px;

}

.counter-item h2{

    font-family:'Benjola';

    font-size:120px;

    font-weight:400;

    color:#f7ebd9;

    line-height:0.9;

    margin-bottom:25px;

}

/* .counter-item h2::after{

    content:"+";

} */

.counter-item p{

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

    font-size:16px;

    line-height:2;

    color:#f7ebd9;

    max-width:470px;

    margin:0;

}

.counter-right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    text-align:right;

    height:100%;

}

.counter-right img{

    width:250px;

    margin-bottom:280px;

}

.counter-right h5{

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

    font-size:16px;

    letter-spacing:2px;

    font-weight:600;

    color:#f7ebd9;

    margin-bottom:35px;

}

.counter-right p{

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

    font-size:18px;

    line-height:2;

    color:#f7ebd9;

    max-width:520px;

    margin-bottom:70px;

}

.counter-right a{

    color:#f7ebd9;

    text-decoration:none;

    text-transform:uppercase;

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

    letter-spacing:2px;

    font-size:15px;

    position:relative;

    padding-bottom:8px;

}

.counter-right a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:#f7ebd9;

}

/*====================================
CTA SECTION
====================================*/

.cta-section{

    padding:60px 100px 100px;

    background:#f7ebd9;

    overflow:hidden;

}

.cta-content{

    text-align:center;

}

.cta-content h2{

    font-family:"Abygaer";

    font-size:92px;

    font-weight:400;

    line-height:1.15;

    color:#3E5E48;

    margin-bottom:60px;

    text-transform:uppercase;

}

.cta-btn{

    position:relative;

    display:inline-block;

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

    font-size:15px;

    font-weight:500;

    letter-spacing:2px;

    color:#3E5E48;

    text-transform:uppercase;

    text-decoration:none;

    padding-bottom:10px;

}

.cta-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:#3E5E48;

}

.cta-image{

    display:flex;

    justify-content:center;

}

.cta-image img{

    width:230px;

    height:280px;

    object-fit:cover;

    display:block;

}

.cta-left{

    justify-content:flex-start;

    margin-top:120px;

}

.cta-right{

    justify-content:flex-end;

    margin-top:120px;

}

/*====================================
PORTFOLIO SECTION
====================================*/

.portfolio-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.portfolio-content {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 90%;
    text-align: center;
    /* remove max-width: 700px; entirely — it's too narrow for a 190px heading */
}

.portfolio-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.portfolio-overlay{

    position:absolute;

    inset:0;

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

}

/* .portfolio-content{

    position:absolute;

    top:40px;

    left:23%;

    z-index:2;

} */

.portfolio-content h2 {
    font-family: 'Benjola';
    font-size: 190px;
    line-height: .9;
    font-weight: 400;
    color: #f7ebd9;
    margin-top: 50px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-right: -2px; /* cancels trailing letter-spacing so text optically centers */
}

.portfolio-content p{

    margin-top:45px;

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

    font-size:14px;

    line-height:2;

    letter-spacing:1px;

    color:#f7ebd9;

    text-transform:uppercase;
        font-weight: 200;

}

.portfolio-btn{

    position:absolute;

    right:80px;

    bottom:70px;

    z-index:2;

    display:flex;

    align-items:center;

    gap:12px;

    color:#f7ebd9;

    text-decoration:none;

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

    font-size:18px;

    letter-spacing:1px;

    text-transform:uppercase;
    font-weight: 300;

}

.portfolio-btn span{

    font-size:34px;
height: 60px;
    transition:.35s;

}

.portfolio-btn:hover span{

    transform:translateX(8px);

}

/*====================================
TESTIMONIAL SECTION
====================================*/

.testimonial-section{

    background:#f7ebd9;

    padding: 100px 80px;

}

.testimonial-title{

    font-family:"Abygaer";

    font-size:70px;

    font-weight:400;

    color:#355E48;

    margin-bottom:25px;

    text-transform:uppercase;

    line-height:1;

}

/* .testimonial-wrapper{

    display:grid;

    grid-template-columns:60% 36%;

    align-items:center;

    gap:50px;

} */

.testimonial-image{

    overflow:hidden;

}

.testimonial-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    display:block;

}

.testimonial-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

 

}

.testimonial-content h3{
font-family: 'Benjola';
    font-size: 30px;
    font-weight: 400;
    color: #355E48;
    margin-bottom: 70px;

}

.testimonial-content p{

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

    font-size:15px;

    line-height:2;

    color:#2E2E2E;

    text-align:justify;

    margin-bottom:auto;
    /* max-width:540px; */
    margin-top: 100px;


}

.testimonial-nav{

    display:flex;

    justify-content:flex-end;

    gap:35px;

    margin-top:120px;

}

.testimonial-nav button{

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:42px;

    color:#355E48;

    transition:.35s;

    padding:0;

    line-height:1;

}

.testimonial-nav button{

    transition:.35s ease;

}

.testimonial-nav button:hover{

    color:#000;

}

.testimonial-nav button:first-child:hover{

    transform:translateX(-6px);

}

.testimonial-nav button:last-child:hover{

    transform:translateX(6px);

}

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

.faq-section{

    /* background:#F8EFDF; */
    padding:20px 0 60px;

}

.faq-title{

    /* font-family:'Cormorant Garamond', serif; */
    font-size:82px;
    font-weight:300;
    color:#2F6245;
    text-align:center;
    margin-bottom:70px;
    line-height:1;

}

.faq-wrapper{

    width:100%;
    max-width:760px;
    margin:0 auto;

}

.faq-item{

    border-bottom:1px solid #1F1F1F;

}

.faq-question{

    width:100%;
    border:none;
    background:none;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:24px 0;

    cursor:pointer;

    font-family:"Inter", sans-serif;
    font-size:16px;
    font-weight:500;
    color:#1F1F1F;

    text-align:left;

}

.faq-question span{

    flex:1;
    padding-right:25px;
    letter-spacing:.4px;

}

.faq-question i{

    font-size:26px;
    color:#2F6245;

    transition:.35s ease;

}

.faq-answer{

    max-height:0;
    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    font-family:"Inter", sans-serif;
    font-size:17px;
    line-height:1.9;
    color:#444;

    padding:0 0 24px;

}

.faq-item.active .faq-answer{

    max-height:220px;

}

.faq-item.active .faq-question i{

    transform:rotate(180deg);

}


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

@media(max-width:992px){

    .faq-title{

        font-size:62px;

    }

    .faq-question{

        font-size:21px;

    }

}

@media(max-width:768px){

    .faq-section{

        padding:90px 20px;

    }

    .faq-title{

        font-size:50px;
        margin-bottom:50px;

    }

    .faq-question{

        font-size:18px;
        padding:22px 0;

    }

    .faq-question i{

        font-size:22px;

    }

    .faq-answer p{

        font-size:15px;

    }

}

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

.footer-section{

    /* background:#F8EFDF; */
    padding:70px 70px 35px;

}



/*==========================
        Gallery
===========================*/

.footer-gallery{

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;

}

.footer-gallery img{

    width:100%;
    aspect-ratio:1/1;

    object-fit:cover;
    display:block;

    cursor:pointer;

    transition:.45s ease;

}

.footer-gallery img:hover{

    transform:scale(1.05);

}


/*==========================
        Right Side
===========================*/

.footer-links-wrapper{

    display:flex;
    align-items:flex-start;
    justify-content:flex-start;

    gap:55px;

    margin-left:45px;

}


/*==========================
        Quick Links
===========================*/

.footer-links{

    display:flex;
    align-items:flex-start;

    gap:65px;

}

.footer-links h5,
.footer-social h5{

    font-family:"Inter", sans-serif;
    font-size:15px;
    font-weight:700;

    color:#2F6245;

    margin-bottom:28px;

    letter-spacing:.4px;

    white-space:nowrap;

}

.footer-links ul,
.footer-social ul{

    list-style:none;
    padding:0;
    margin:0;

}

.footer-links li,
.footer-social li{

    margin-bottom:14px;

}

.footer-links a,
.footer-social a{

    font-family:"Inter", sans-serif;
    font-size:17px;
    font-weight:400;

    color:#2B2B2B;

    text-decoration:none;

    transition:.35s;

}

.footer-links a:hover,
.footer-social a:hover{

    color:#2F6245;

}


/*==========================
        Divider
===========================*/

.footer-divider{

    width:1px;
    height:165px;

    border-left:2px dashed #666;

    opacity:.75;

}


/*==========================
        Social
===========================*/

.footer-social{

    min-width:150px;

}


/*==========================
        Bottom
===========================*/

.footer-bottom{

    margin-top:38px;
    padding-top:28px;

    border-top:1px solid #2B2B2B;

    text-align:center;

}

.footer-bottom p{

    margin:0;

    font-family:"Inter", sans-serif;
    font-size:15px;

    color:#222;

    letter-spacing:.3px;

}

.footer-bottom a{

    color:#2F6245;

    text-decoration:underline;

    transition:.3s;

}

.footer-bottom a:hover{

    opacity:.7;

}


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

@media(max-width:991px){

    .footer-gallery{

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

        margin-bottom:50px;

    }

    .footer-links-wrapper{

        margin-left:0;

        gap:40px;

        flex-wrap:wrap;

    }

    .footer-links{

        gap:40px;

    }

    .footer-divider{

        display:none;

    }

}


@media(max-width:768px){

    .footer-section{

        padding:60px 20px 30px;

    }

    .footer-gallery{

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

        gap:12px;

    }

    /* .footer-links-wrapper{

        flex-direction:column;

        gap:30px;

    } */

    .footer-links{

        gap:35px;

    }

    .footer-bottom p{

        font-size:13px;
        line-height:1.8;

    }

}

/* end home pager */
/* about us */
/*====================================
            ABOUT HERO
====================================*/
.hero-header.about-us{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 35px 60px;
    background: transparent;
}

.about-hero{

    /* background:#F8EFDF; */

    padding:120px 70px 90px;

    overflow:hidden;

}


/*==============================
        Heading
==============================*/

.about-hero-heading{

    text-align:center;

    margin-bottom:20px;

}

.artist-script{

   display: block;
    font-family: "Beau Rivage", cursive;
    font-size: 115px;
    font-weight: 400;
    color: #232323;
    line-height: .8;
    letter-spacing: 5px;

}

.about-hero-heading h1{

    margin: 0;
    /* font-family: 'Cormorant Garamond', serif; */
    font-size: 96px;
    font-weight: 300;
    color: #2F6245;
    line-height: 1.2;
    letter-spacing: 2px;

}

.about-hero-heading p{

    /* margin-top:12px; */

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

    font-size:14px;

    font-weight:500;

    letter-spacing:4px;

    color:#333;

}


/*==============================
        Content
==============================*/

.about-hero-content{

    margin-top:10px;

}


/*==============================
        Left
==============================*/

.about-left{

    display:flex;

    justify-content:center;

}

.about-left p{

    /* max-width:250px; */

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

    font-size:19px;

    line-height:2;

    color:#2f2f2f;

    text-align:left;

}


/*==============================
        Image
==============================*/

.about-image{

    display:flex;

    justify-content:center;

}

.about-image img{

    width:100%;

    max-width:450px;

    height:600px;

    object-fit:cover;

}


/*==============================
        Right
==============================*/

.about-right{

    display:flex;

    justify-content:center;

}

.about-right p{

    /* max-width:260px; */

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

    font-size:19px;

    line-height:2;

    color:#333;

    text-align:left;

}


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

@media(max-width:991px){

    .about-hero{

        padding:80px 20px;

    }

    .artist-script{

        font-size:58px;

    }

    .about-hero-heading h1{

        font-size:72px;

    }

    .about-left,
    .about-right{

        margin-bottom:40px;

    }

    .about-left p,
    .about-right p{

        max-width:100%;

        text-align:center;

    }

    .about-image{

        margin-bottom:40px;

    }

}

@media(max-width:768px){

    .artist-script{

        font-size:46px;

    }

    .about-hero-heading h1{

        font-size:58px;

    }

    .about-image img{

        max-width:320px;

        height:auto;

    }

    .about-left p,
    .about-right p{

        font-size:16px;

        line-height:1.8;

    }

}
/* end */

/* about 2nd section */
/*==========================
    MEET CHIRAG
==========================*/

.meet-chirag-section{
    padding:120px 0;
    /* background:#F6ECD9; */
}

.meet-chirag-wrapper{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:70px;
    align-items:start;
}

/* LEFT */

.meet-images{
    width:90%;
    margin: 0 auto;
}

.meet-main-img{
    width:100%;
    height:380px;
    object-fit:cover;
    display:block;
}

.meet-bottom-images{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
}

.meet-bottom-images img{
    width:100%;
    height:380px;
    object-fit:cover;
    display:block;
}

/* RIGHT */

.meet-content{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
        width: 90%;
        margin: 0 auto;
}

.meet-label{
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.08em;
    color:#000;
    margin-bottom:18px;
    text-transform:uppercase;
}

.meet-content h2{
    /* font-family:'Cormorant Garamond',serif; */
    font-size:50px;
    line-height:1.2;
    font-weight:300;
    color:#2E5B39;
    text-transform:uppercase;
    margin:0 0 35px;
}

.meet-content p{
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 2;
    color: #4C4C4C;
    margin-bottom: 16px;
    text-align: justify;
    width: 80%;
}

.meet-signature{
    margin-top:35px;
}

.meet-signature img{
    width:180px;
    display:block;
}

.meet-signature span{
    display:block;
    margin-top:8px;

    font-family:'Cormorant Garamond',serif;
    font-size:26px;
    letter-spacing:.12em;
    color:#8A8A8A;
}

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

@media(max-width:991px){

.meet-chirag-wrapper{
    grid-template-columns:1fr;
    gap:60px;
}

.meet-content h2{
    font-size:48px;
}

.meet-main-img{
    height:420px;
}

.meet-bottom-images img{
    height:240px;
}

}

@media(max-width:767px){

.meet-chirag-section{
    padding:80px 0;
}

.meet-content h2{
    font-size:38px;
}

.meet-content p{
    font-size:15px;
    line-height:1.9;
}

.meet-main-img{
    height:330px;
}

.meet-bottom-images{
    gap:8px;
}

.meet-bottom-images img{
    height:170px;
}

.meet-signature img{
    width:150px;
}

.meet-signature span{
    font-size:20px;
}

}

/* end about us page */

/* cta page */
/*=========================
CONTACT HERO
=========================*/

.contact-hero{

    background:url("/assets/contact-banner.png") center center/cover no-repeat;
min-height: 100svh;
    overflow: hidden;
    position: relative;
}

.contact-hero .hero-overlay{

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

}

.contact-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* was: padding-top: 300px; */
    padding-top: clamp(80px, 20vh, 300px);
}

.contact-center-image {
    /* was: width: 350px; */
    width: clamp(180px, 30vw, 350px);
    margin-top: -30px;
    z-index: 5;
}

.contact-title {
    margin-top: 28px;
    /* font-family: 'Cormorant Garamond', serif; */
    /* was: font-size: 150px; */
    font-size: clamp(48px, 12vw, 150px);
    font-weight: 300;
    letter-spacing: .02em;
    color: #F7EFD9;
    line-height: 1;
}

.contact-center-image img{

    width:100%;

    display:block;

}

/* .contact-title{

    margin-top:28px;


    font-size:150px;

    font-weight:300;

    letter-spacing:.02em;

    color:#F7EFD9;

    line-height:1;

} */

/*==========================
CONTACT FORM SECTION
==========================*/

.contact-form-section{
    background:#F6ECD9;
    padding:100px 50px 120px;
}

/*------------------
TOP INFO
------------------*/

.contact-info-grid{
    display:grid;
    grid-template-columns:1fr 1.6fr 1fr;
    gap:40px;
    align-items:start;
    margin-bottom:110px;
}

.contact-info-item span{
    display:block;
    margin-bottom:18px;

    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:.12em;
    color:#2E5B39;
}

.contact-info-item a,
.contact-info-item p{
    margin:0;

    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:500;
    color:#3B3B3B;
    line-height:1.8;
    text-decoration:none;
}

.contact-info-item.center{
    text-align:center;
}

.contact-info-item.right{
    text-align:right;
}

/*------------------
HEADING
------------------*/

.contact-heading{

    margin:0 0 90px;

    text-align:center;

    /* font-family:'Cormorant Garamond',serif; */
    font-size:74px;
    font-weight:300;
    line-height:0.95;

    color:#2E5B39;

    text-transform:uppercase;

}

/*------------------
FORM
------------------*/

.contact-form{

    width:1280px;
    margin:0 auto;

}

.form-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:32px;

}

.form-group{

    display:flex;
    flex-direction:column;

}

.form-group.full{

    margin-bottom:32px;

}

.form-group label{

    margin-bottom:10px;

    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;

    color:#222;

}

.form-group input{

    border:none;
    border-bottom:1px solid #3C3C3C;

    background:transparent;

    height:42px;

    font-family:'Inter',sans-serif;
    font-size:15px;

    padding:0;

    outline:none;

}

.form-group textarea{

    resize:none;

    border:none;

    border-bottom:1px solid #3C3C3C;

    background:transparent;

    height:130px;

    padding:0;

    outline:none;

    font-family:'Inter',sans-serif;
    font-size:15px;

}

/* ======================================
SUCCESS POPUP
====================================== */

.success-popup {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);

display: flex;
justify-content: center;
align-items: center;

opacity: 0;
visibility: hidden;

transition: all 0.35s ease;
z-index: 99999;
}

.success-popup.show {
opacity: 1;
visibility: visible;
}

.success-popup-content {
width: min(92%, 480px);
background: #F7F0E3;
border-radius: 18px;
padding: 55px 45px;
text-align: center;
box-shadow: 0 30px 80px rgba(0,0,0,.25);

transform: translateY(30px) scale(.95);
transition: all .35s ease;
}

.success-popup.show .success-popup-content {
transform: translateY(0) scale(1);
}

.success-icon {
width: 82px;
height: 82px;
margin: 0 auto 25px;

border-radius: 50%;
background: #2F5D50;

display: flex;
justify-content: center;
align-items: center;

color: #fff;
font-size: 40px;
font-weight: 600;
}

.success-popup-content h3 {
font-size: 34px;
margin-bottom: 18px;
color: #2F5D50;
}

.success-popup-content p {
font-size: 17px;
line-height: 1.8;
color: #555;
margin-bottom: 35px;
}

.popup-btn {
background: #2F5D50;
color: #fff;

border: none;
padding: 14px 42px;
border-radius: 40px;

cursor: pointer;
font-size: 15px;
letter-spacing: 1px;
text-transform: uppercase;

transition: .3s;
}

.popup-btn:hover {
background: #21463C;
transform: translateY(-2px);
}


/*------------------
BUTTON
------------------*/

.submit-wrap{

    display:flex;
    justify-content:flex-end;
    margin-top:25px;

}

.submit-btn{

    border:none;

    background:none;

    color:#2E5B39;

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

    font-size:14px;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

    position:relative;

    cursor:pointer;

    padding:0 0 10px;

}

.submit-btn::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:#2E5B39;

}

/*------------------
FOCUS
------------------*/

.form-group input:focus,
.form-group textarea:focus{

    border-bottom:1px solid #2E5B39;

}

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

@media(max-width:991px){

.contact-info-grid{

    grid-template-columns:1fr;
    text-align:center;
    gap:45px;

}

.contact-info-item.center,
.contact-info-item.right{

    text-align:center;

}

.contact-heading{

    font-size:56px;

}

.contact-form{

    width:100%;

}

}

@media(max-width:767px){

.contact-form-section{

    padding:70px 0;

}

.contact-heading{

    font-size:40px;
    margin-bottom:60px;

}

.form-row{

    grid-template-columns:1fr;
    gap:30px;

}

.contact-info-grid{

    margin-bottom:70px;

}

}

/* end */

    /*=========================================
FILMS SECTION
=========================================*/

section.hero.stories {
    background: url(https://res.cloudinary.com/dl4qgihed/image/upload/v1786372532/STORIES_PAGE_BANNER__17_11zon_quzl6a.webp) center center / cover no-repeat;
}

.films-section{

    padding:120px 0;

    background:#f7ebd9;

}

.film-heading{

    text-align:center;

    margin-bottom:40px;

}

.film-heading span{

    display:block;

    font-size:16px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#333;

    margin-bottom:30px;
    font-family: "Inter";

}

.film-heading h2{

    font-size:72px;

    font-weight:400;

    color:#2E5B39;

    line-height:1;

}

.films-grid{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:60px;

}

.film-card{

    width:100%;

    max-width:1050px;

}

.film-thumbnail{

    position:relative;

    overflow:hidden;

    cursor:pointer;

}

.film-thumbnail img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:.5s;
        height: 560px;

}

.film-thumbnail:hover img{

    transform:scale(1.05);

}

.play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:2;
}

.play-btn img{
    width:70px;   /* adjust as needed */
    height:70px;
    display:block;
}

.play-btn:hover{
    transform:translate(-50%,-50%) scale(1.08);
}

.film-video{

    width:100%;

    display:none;

}

.film-details{

    text-align:center;

    margin-top:28px;

}

.film-details h3{

    font-family:"Beau Rivage", cursive;

    font-size:65px;

    color:#2E5B39;

    font-weight:400;

    margin-bottom:5px;

}

.film-details p{

    font-size:14px;

    letter-spacing:3px;

    color:#2E5B39;
font-weight: 600;
    text-transform:uppercase;
    font-family: "Inter", sans-serif;

}

/* end */

/* portfolio page */

section.hero.portfolio {
    background: url(https://res.cloudinary.com/dl4qgihed/image/upload/v1786372531/PORTFOLIO_PAGE_BANNER_14_11zon_vhmuyn.webp) center center / cover no-repeat;
}

     section.films-section.portfolio-imgs .portfolio-img img {
            width: 100%;
            height: 630px;
            object-fit: cover;
        }

        section.films-section.portfolio-imgs .portfolio-img.f-w img {
            width: 100%;
            height: 100%;
        }

        section.films-section.portfolio-imgs .col-md-4,
        section.films-section.portfolio-imgs .col-md-8,
        section.films-section.portfolio-imgs .col-md-12,
        section.films-section.portfolio-imgs .col-md-6 {
            padding: 0;
        }

        section.films-section.portfolio-imgs .portfolio-img {
            padding: 4px;
        }
        /* end */

        /* service pages */

/*=========================================
STORY CONTENT
=========================================*/
/* pre wedding banner */
.hero.pre-wedding-page {
    background: url("https://res.cloudinary.com/dl4qgihed/image/upload/v1786429071/pre-wedding-banner_ugaope.webp") center center/cover no-repeat;

}

/* wedding banner */
.hero.wedding-page {
    background: url("https://res.cloudinary.com/dl4qgihed/image/upload/v1786429713/wedding-banner_d6a2ej.webp") center center/cover no-repeat;

}

section.story-content-services{

    background:#F8EEDB;
    
    padding:140px 0;
    
    }
    
    section.story-content-services-inner{
    
    max-width:950px;
    
    margin:0 auto;
    
    text-align:center;
    
    }
    
    section.story-content-services h2{
    
    /* font-family:"Cormorant Garamond", serif; */
    
    font-size:68px;
    
    line-height:1.4;
    
    font-weight:400;
    
    color:#2E5B39;
    
    margin-bottom:55px;
    letter-spacing: 5px;
    }
    
    section.story-content-services span {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #343434;
        font-family: "Inter", sans-serif;
        font-weight: 300;
    }
    
    
    section.story-content-services .story-divider{
    
    width:1px;
    
    height:90px;
    
    background:#3d3d3d;
    
    margin:35px auto 45px;
    
    }
    
    
    section.story-content-services p {
        max-width: 930px;
        margin: 0 auto;
        font-size: 15px;
        line-height: 2;
        color: #343434;
        font-family: "Inter", sans-serif;
        font-weight: 300;
    }
    
    section.story-content-services .story-btn {
        display: inline-block;
        margin-top: 45px;
        color: #2E5B39;
        text-decoration: none;
        font-size: 13px;
        letter-spacing: 1px;
        position: relative;
        padding-bottom: 12px;
        font-family: "Inter", sans-serif;
    }
    
    section.story-content-services .story-btn::after
     {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px;
        width: 100%;
        height: 1px;
        background: #2E5B39;
        transition: .35s;
    }
    
    section.story-content-services .story-btn:hover::after{
    
    width:70%;
    
    left:15%;
    
    }
    
    section.story-content-services .story-content-inner {
        text-align: center;
    }
        
        /*=========================================
    PROCESS
    =========================================*/
    
    section.process-section{
    
    padding:40px 75px;
    
    background:#F8EEDB;
    
    }
    
    section.process-section .process-overlay{
    
    position:relative;
    
    background:
        linear-gradient(rgba(46,91,57,.80),rgba(46,91,57,.80)),
        url("https://res.cloudinary.com/dl4qgihed/image/upload/v1786110157/wedding-services-inside-img_56_11zon_xj08yz.webp");
    
    background-size:cover;
    
    background-position:center;
    
    min-height:726px;
    
    padding:70px 60px;
    
    }
    
    section.process-section .process-title{
    
    /* font-family:"Cormorant Garamond", serif; */
    
    font-size:55px;
    
    font-weight:400;
    
    color:#FBF5DD;
    letter-spacing: 3px;
    margin-bottom:40px;
    
    }
    
    section.process-section .process-image{
    
    width:250px;
    
    margin:0 auto 70px;
    
    border:2px solid rgba(255,255,255,.7);
    
    }
    
    section.process-section .process-image img{
    
    width:100%;
    
    display:block;
    
    }
    
    section.process-section .process-steps{
    
    margin-top:20px;
    
    }
    
    section.process-section .process-box{
    
    text-align:center;
    
    color:#fff;
    
    padding:0 20px;
    
    }
    
    section.process-section .process-box h3{
    
    /* font-family:"Cormorant Garamond", serif;  */
    
    font-size:40px;
    
    font-weight:400;
    
    margin-bottom:10px;
    color: #fff;
    
    }
    
    section.process-section .process-box h4 {
        font-size: 14px;
        letter-spacing: 2px;
        font-weight: 300;
        margin-bottom: 30px;
        font-family: "Inter", sans-serif;
        color: #FBF5DD;
    }
    
    section.process-section .process-box p
     {
        font-size: 13px;
        line-height: 1.8;
        color: rgba(255, 255, 255, .92);
        font-family: "Inter", sans-serif;
        color: #FBF5DD;
        font-weight: 300;
        letter-spacing: 0.2px;
    }
    
        section.wedding-gallery .col-md-4, section.wedding-gallery .col-md-8 {
        margin: 0;
        padding: 0;
    }
    
    section.wedding-gallery  .wed-gallery-img img {
        width: 100%;
        height: 610px;
        object-fit: cover;
    }
    
    section.wedding-gallery  .wed-gallery-img {
        padding: 4px;
    }

    /* end */
    
    
    /* =========================================================
   ANIMATIONS CSS
   ========================================================= */


/* =========================================================
   ABOUT REVEAL
   ========================================================= */

section.about-photographer .reveal-left,
section.about-photographer .reveal-right {

    opacity: 0;

    transition: opacity 1s ease,
                transform 1s ease;

}

section.about-photographer .reveal-left {

    transform: translateX(-100px);

}

section.about-photographer .reveal-right {

    transform: translateX(100px);

}

section.about-photographer .reveal-left.active,
section.about-photographer .reveal-right.active {

    opacity: 1;

    transform: translateX(0);

}


/* =========================================================
   COUNTER ANIMATIONS
   ========================================================= */

section.counter-section .counter-item {

    opacity: 0;

    transform: translateY(70px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}

section.counter-section .counter-item.counter-show {

    opacity: 1;

    transform: translateY(0);

}


section.counter-section .counter-right {

    opacity: 0;

    transform: translateX(80px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}

section.counter-section .counter-right.counter-show {

    opacity: 1;

    transform: translateX(0);

}


/* Portfolio button */

section.counter-section .counter-right a {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease .4s,
        transform .8s ease .4s;

}

section.counter-section .counter-right.counter-show a {

    opacity: 1;

    transform: translateY(0);

}


/* Background cinematic zoom */

section.counter-section .counter-section {

    background-size: 108%;

    transition: background-size 7s linear;

}

section.counter-section .counter-section.counter-show {

    background-size: 100%;

}


/* =========================================================
   CTA ANIMATION
   ========================================================= */

section.cta-section .cta-left,
section.cta-section .cta-right {

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1s ease;

}

section.cta-section .cta-left {

    transform: translateX(-120px);

}

section.cta-section .cta-right {

    transform: translateX(120px);

}


section.cta-section .cta-content {

    opacity: 0;

    transform: translateY(70px);

    filter: blur(8px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease,
        filter 1.2s ease;

}


section.cta-section .cta-btn {

    opacity: 0;

    transform: translateY(30px) scale(.9);

    transition:
        opacity .8s ease .45s,
        transform .8s ease .45s;

}


/* Active */

section.cta-section .cta-left.show {

    opacity: 1;

    transform: translateX(0);

}

section.cta-section .cta-right.show {

    opacity: 1;

    transform: translateX(0);

}

section.cta-section .cta-content.show {

    opacity: 1;

    transform: translateY(0);

    filter: blur(0);

}

section.cta-section .cta-content.show .cta-btn {

    opacity: 1;

    transform: translateY(0) scale(1);

}


/* Hover */

section.cta-section .cta-image {

    overflow: hidden;

}

section.cta-section .cta-image img {

    transition: transform 1.2s ease;

}

section.cta-section .cta-image:hover img {

    transform: scale(1.08);

}


/* =========================================================
   PORTFOLIO ANIMATION
   ========================================================= */

.portfolio-bg {

    transform: scale(1.12);

    transition: transform 4s ease;

}

.portfolio-overlay {

    opacity: 0;

    transition: opacity 1.2s ease;

}

.portfolio-content h2 {

    opacity: 0;

    transform: translateY(-80px);

    transition:
        opacity 1s ease,
        transform 1s ease;

}

.portfolio-content p {

    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity 1s ease .25s,
        transform 1s ease .25s;

}

.portfolio-btn {

    opacity: 0;

    transform: translateX(80px);

    transition:
        opacity 1s ease .5s,
        transform 1s ease .5s;

}


/* Active */

.portfolio-section.show .portfolio-bg {

    transform: scale(1);

}

.portfolio-section.show .portfolio-overlay {

    opacity: 1;

}

.portfolio-section.show .portfolio-content h2 {

    opacity: 1;

    transform: translateY(0);

}

.portfolio-section.show .portfolio-content p {

    opacity: 1;

    transform: translateY(0);

}

.portfolio-section.show .portfolio-btn {

    opacity: 1;

    transform: translateX(0);

}


/* Hover */

.portfolio-btn span {

    display: inline-block;

    transition: transform .35s ease;

}

.portfolio-btn:hover span {

    transform: translateX(10px);

}


/* =========================================================
   TESTIMONIAL INTRO
   ========================================================= */

.testimonial-title,
.testimonial-image,
.testimonial-content h3,
.testimonial-content p,
.testimonial-nav {

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1s ease;

}

.testimonial-title {

    transform: translateY(-60px);

}

.testimonial-image {

    transform: translateX(-80px);

}

.testimonial-content h3 {

    transform: translateX(80px);

    transition-delay: .2s;

}

.testimonial-content p {

    transform: translateY(40px);

    transition-delay: .35s;

}

.testimonial-nav {

    transform: translateY(30px);

    transition-delay: .5s;

}


/* Active */

.testimonial-section.show .testimonial-title {

    opacity: 1;

    transform: translateY(0);

}

.testimonial-section.show .testimonial-image {

    opacity: 1;

    transform: translateX(0);

}

.testimonial-section.show .testimonial-content h3 {

    opacity: 1;

    transform: translateX(0);

}

.testimonial-section.show .testimonial-content p {

    opacity: 1;

    transform: translateY(0);

}

.testimonial-section.show .testimonial-nav {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   FAQ INTRO ANIMATION
   ========================================================= */

.faq-title,
.faq-item {

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1s ease;

}

.faq-title {

    transform: translateY(-60px);

}

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

    transform: translateX(-80px);

}

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

    transform: translateX(80px);

}


/* Active */

.faq-section.show .faq-title {

    opacity: 1;

    transform: translateY(0);

}

.faq-section.show .faq-item {

    opacity: 1;

    transform: translateX(0);

}


/* Stagger */

.faq-item:nth-child(1) {

    transition-delay: .15s;

}

.faq-item:nth-child(2) {

    transition-delay: .3s;

}

.faq-item:nth-child(3) {

    transition-delay: .45s;

}

.faq-item:nth-child(4) {

    transition-delay: .6s;

}


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

.footer-gallery img,
.footer-links,
.footer-divider,
.footer-social,
.footer-bottom {

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1s ease;

}


/* Gallery */

.footer-gallery img {

    transform: translateY(70px) scale(.92);

}


/* Links */

.footer-links {

    transform: translateX(-50px);

}


/* Divider */

.footer-divider {

    transform: scaleY(0);

    transform-origin: top;

}


/* Social */

.footer-social {

    transform: translateX(50px);

}


/* Bottom */

.footer-bottom {

    transform: translateY(35px);

}


/* Active */

.footer-section.show .footer-gallery img {

    opacity: 1;

    transform: translateY(0) scale(1);

}

.footer-section.show .footer-links {

    opacity: 1;

    transform: translateX(0);

}

.footer-section.show .footer-divider {

    opacity: 1;

    transform: scaleY(1);

}

.footer-section.show .footer-social {

    opacity: 1;

    transform: translateX(0);

}

.footer-section.show .footer-bottom {

    opacity: 1;

    transform: translateY(0);

}


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

.footer-gallery img:nth-child(1) {

    transition-delay: .05s;

}

.footer-gallery img:nth-child(2) {

    transition-delay: .12s;

}

.footer-gallery img:nth-child(3) {

    transition-delay: .19s;

}

.footer-gallery img:nth-child(4) {

    transition-delay: .26s;

}

.footer-gallery img:nth-child(5) {

    transition-delay: .33s;

}

.footer-gallery img:nth-child(6) {

    transition-delay: .40s;

}

.footer-links {

    transition-delay: .45s;

}

.footer-divider {

    transition-delay: .6s;

}

.footer-social {

    transition-delay: .7s;

}

.footer-bottom {

    transition-delay: .9s;

}


/* =========================================================
   FOOTER HOVER EFFECTS
   ========================================================= */

.footer-gallery img {

    transition:
        transform .45s ease,
        filter .45s ease,
        opacity 1s ease;

}

.footer-gallery img:hover {

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

}

.footer-links a,
.footer-social a {

    transition: .35s ease;

}

.footer-links a:hover,
.footer-social a:hover {

    color: #2F6245;

    padding-left: 8px;

}


/* =========================================================
   PAGE HEADER INTRO
   ========================================================= */

.hero-logo,
.menu-btn {

    opacity: 0;

}

.hero-logo {

    transform: translateX(-50px);

}

.menu-btn {

    transform: translateX(50px);

}


/* =========================================================
   STORY CONTENT
   ========================================================= */

.story-content-inner h2,
.story-content-inner span,
.story-divider,
.story-content-inner p,
.story-btn {

    opacity: 0;

}

.story-content-inner h2 {

    transform: translateY(60px);

}

.story-content-inner span {

    transform: translateY(30px);

}

.story-divider {

    transform: scaleY(0);

    transform-origin: top center;

}

.story-content-inner p {

    transform: translateY(40px);

}

.story-btn {

    transform: translateY(25px);

}


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

.process-title,
.process-image,
.process-box {

    opacity: 0;

}

.process-title {

    transform: translateY(-50px);

}

.process-image {

    transform: scale(.82);

}

.process-box {

    transform: translateY(60px);

}


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

.wed-gallery-img {

    overflow: hidden;

    opacity: 0;

    transform: translateY(80px);

}

.wed-gallery-img img {

    transform: scale(1.08);

    transition: transform .8s ease;

}

.wed-gallery-img:hover img {

    transform: scale(1.05);

}


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

.portfolio-img {

    overflow: hidden;

    opacity: 0;

    transform: translateY(80px);

}

.portfolio-img img {

    transform: scale(1.08);

    transition: transform .8s ease;

}

.portfolio-img:hover img {

    transform: scale(1.05);

}

.film-heading {

    opacity: 0;

    transform: translateY(40px);

}


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

.hero-logo,
.menu-btn,
.artist-script,
.about-hero-heading h1,
.about-hero-heading p,
.about-left,
.about-right {

    opacity: 0;

}


/* Header */

.hero-logo {

    transform: translateX(-50px);

}

.menu-btn {

    transform: translateX(50px);

}


/* Heading */

.artist-script {

    display: block;

    transform: translateY(-40px);

}

.about-hero-heading h1 {

    transform: translateY(60px);

}

.about-hero-heading p {

    transform: translateY(25px);

    letter-spacing: 4px;

}


/* Content */

.about-left {

    transform: translateX(-80px);

}

.about-right {

    transform: translateX(80px);

}

.about-image {

    transform: scale(.88);

}


/* =========================================================
   MEET CHIRAG ANIMATION
   ========================================================= */

.meet-main-img,
.meet-bottom-images img,
.meet-label,
.meet-content h2,
.meet-content p,
.meet-signature {

    opacity: 0;

}

.meet-main-img {

    transform: scale(.92);

}

.meet-bottom-images img:nth-child(1) {

    transform: translateY(70px);

}

.meet-bottom-images img:nth-child(2) {

    transform: translateY(70px);

}

.meet-label {

    transform: translateX(30px);

}

.meet-content h2 {

    transform: translateX(60px);

}

.meet-content p {

    transform: translateX(40px);

}

.meet-signature {

    transform: translateY(30px);

}


/* =========================================================
   CONTACT FORM ANIMATION
   ========================================================= */

.contact-info-item,
.contact-heading,
.contact-form .form-row,
.contact-form .form-group.full,
.submit-wrap {

    opacity: 0;

}


/* =========================================================
   FILMS GRID
   ========================================================= */

.film-heading {

    opacity: 0;

    transform: translateY(40px);

}

.film-card {

    overflow: hidden;

}

.film-thumbnail {

    overflow: hidden;

}

.film-thumbnail img {

    transform: scale(1.08);

    transition: transform .8s ease;

}

.film-card:hover .film-thumbnail img {

    transform: scale(1.05);

}


/* =========================================================
   MOBILE-SAFE ANIMATIONS
   =========================================================
   
   IMPORTANT:
   Do NOT use horizontal translateX() entrance animations
   on mobile. They can create horizontal layout/scroll
   calculations on mobile browsers.

   Instead, mobile uses vertical movement.
   ========================================================= */

@media (max-width: 767px) {


    /* -----------------------------------------
       ABOUT REVEAL
       ----------------------------------------- */

    section.about-photographer .reveal-left,
    section.about-photographer .reveal-right {

        transform: translateY(50px);

        opacity: 0;

    }

    section.about-photographer .reveal-left.active,
    section.about-photographer .reveal-right.active {

        transform: translateY(0);

        opacity: 1;

    }


    /* -----------------------------------------
       COUNTER
       ----------------------------------------- */

    section.counter-section .counter-right {

        transform: translateY(50px);

    }

    section.counter-section .counter-right.counter-show {

        transform: translateY(0);

    }


    /* -----------------------------------------
       CTA
       ----------------------------------------- */

    section.cta-section .cta-left,
    section.cta-section .cta-right {

        transform: translateY(50px);

    }

    section.cta-section .cta-left.show,
    section.cta-section .cta-right.show {

        transform: translateY(0);

    }


    /* -----------------------------------------
       PORTFOLIO
       ----------------------------------------- */

    .portfolio-btn {

        transform: translateY(40px);

    }

    .portfolio-section.show .portfolio-btn {

        transform: translateY(0);

    }


    /* -----------------------------------------
       TESTIMONIAL
       ----------------------------------------- */

    .testimonial-image {

        transform: translateY(50px);

    }

    .testimonial-content h3 {

        transform: translateY(50px);

    }

    .testimonial-section.show .testimonial-image,
    .testimonial-section.show .testimonial-content h3 {

        transform: translateY(0);

    }


    /* -----------------------------------------
       FAQ
       ----------------------------------------- */

    .faq-item:nth-child(odd),
    .faq-item:nth-child(even) {

        transform: translateY(40px);

    }

    .faq-section.show .faq-item {

        transform: translateY(0);

    }


    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */

    .footer-links {

        transform: translateY(40px);

    }

    .footer-social {

        transform: translateY(40px);

    }

    .footer-section.show .footer-links,
    .footer-section.show .footer-social {

        transform: translateY(0);

    }


    /* -----------------------------------------
       PAGE HEADER
       ----------------------------------------- */

    .hero-logo {

        transform: translateY(-30px);

    }

    .menu-btn {

        transform: translateY(-30px);

    }


    /* -----------------------------------------
       ABOUT HERO
       ----------------------------------------- */

    .about-left,
    .about-right {

        transform: translateY(40px);

    }


    /* -----------------------------------------
       MEET CHIRAG
       ----------------------------------------- */

    .meet-label {

        transform: translateY(30px);

    }

    .meet-content h2 {

        transform: translateY(40px);

    }

    .meet-content p {

        transform: translateY(30px);

    }


    /* -----------------------------------------
       ABOUT IMAGE
       ----------------------------------------- */

    .about-image {

        transform: scale(.94);

    }


    /* -----------------------------------------
       EXTRA MOBILE SAFETY
       ----------------------------------------- */

    html,
    body {

        max-width: 100%;

        overflow-x: clip;

    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;

    }

}