* {
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {

            margin: 0;

            background: #F8F3EC;

            color: #241207;

            font-family: 'DM Sans', sans-serif;

            overflow-x: hidden;

        }


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

        .hero-image {

            animation:
                heroImage 1.8s
                cubic-bezier(.22,.61,.36,1)
                forwards;

            transform: scale(1.12);

            opacity: 0;

        }


        @keyframes heroImage {

            0% {

                transform:
                    scale(1.12)
                    translateY(20px);

                opacity: 0;

            }

            100% {

                transform:
                    scale(1)
                    translateY(0);

                opacity: 1;

            }

        }


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

        .hero-content {

            animation:
                heroContent 1.2s
                cubic-bezier(.22,.61,.36,1)
                .25s
                forwards;

            opacity: 0;

            transform:
                translateY(35px);

        }


        @keyframes heroContent {

            to {

                opacity: 1;

                transform:
                    translateY(0);

            }

        }


        /* =========================================
           FLOATING IMAGE
        ========================================= */

        .floating-image {

            animation:
                floatingImage 6s
                ease-in-out
                infinite;

        }


        @keyframes floatingImage {

            0%,
            100% {

                transform:
                    translateY(0px);

            }

            50% {

                transform:
                    translateY(-14px);

            }

        }


        /* =========================================
           ORNAMENT
        ========================================= */

        .rotate-slow {

            animation:
                rotateSlow 30s
                linear
                infinite;

        }


        @keyframes rotateSlow {

            from {

                transform:
                    rotate(0deg);

            }

            to {

                transform:
                    rotate(360deg);

            }

        }


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

        #navbar {

            transition:
                background .4s ease,
                padding .4s ease,
                box-shadow .4s ease;

        }


        #navbar.scrolled {

            background:
                rgba(36,18,7,.94);

            backdrop-filter:
                blur(18px);

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

        }


        /* =========================================
           NAV LINKS
        ========================================= */

        .nav-link {

            position: relative;

        }


        .nav-link::after {

            content: "";

            position: absolute;

            left: 50%;

            bottom: -8px;

            width: 0;

            height: 1px;

            background:
                #E86600;

            transform:
                translateX(-50%);

            transition:
                width .35s ease;

        }


        .nav-link:hover::after {

            width: 100%;

        }


        /* =========================================
           FADE EFFECT
        ========================================= */

        .hero-fade {

            background:

                linear-gradient(
                    90deg,
                    rgba(20,9,2,.96) 0%,
                    rgba(20,9,2,.86) 35%,
                    rgba(20,9,2,.38) 67%,
                    rgba(20,9,2,.12) 100%
                );

        }


        .bottom-fade {

            background:

                linear-gradient(
                    to bottom,
                    transparent 50%,
                    #241207 100%
                );

        }


        /* =========================================
           TEXT REVEAL
        ========================================= */

        .letter-space {

            letter-spacing:
                .28em;

        }


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

        .scroll-line {

            animation:
                scrollLine 2s
                ease-in-out
                infinite;

        }


        @keyframes scrollLine {

            0% {

                height: 0;

                opacity: 0;

            }

            40% {

                height: 45px;

                opacity: 1;

            }

            100% {

                height: 45px;

                opacity: 0;

                transform:
                    translateY(15px);

            }

        }


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

        @media(max-width: 768px) {

            .hero-fade {

                background:

                    linear-gradient(
                        to bottom,
                        rgba(20,9,2,.88),
                        rgba(20,9,2,.72),
                        rgba(20,9,2,.95)
                    );

            }

        }

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

.about-reveal {

    opacity: 0;

    transform:
        translateY(45px);

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

}


.about-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}


/* Stagger */

.about-reveal:nth-child(1) {
    transition-delay: .05s;
}

.about-reveal:nth-child(2) {
    transition-delay: .12s;
}

.about-reveal:nth-child(3) {
    transition-delay: .18s;
}


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

.about-image {

    clip-path:
        inset(0 0 100% 0);

    transition:
        clip-path 1.4s
        cubic-bezier(.77,0,.18,1);

}


.about-image.show {

    clip-path:
        inset(0 0 0 0);

}


.about-image img {

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

}


.about-image.show img {

    transform:
        scale(1);

}


/* =====================================================
   ABOUT ORANGE LINE
===================================================== */

.about-line {

    transition:
        width 1.3s
        cubic-bezier(.77,0,.18,1);

}


.about-line.show {

    width: 100%;

}


/* =====================================================
   PART 3
   EXPERTISE ANIMATIONS
===================================================== */


/* ---------------------------------------------
   Reveal
--------------------------------------------- */

.expertise-reveal {

    opacity: 0;

    transform:
        translateY(45px);

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

}


.expertise-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ---------------------------------------------
   Orange line
--------------------------------------------- */

.expertise-line {

    transition:
        width 1.5s
        cubic-bezier(.77,0,.18,1);

}


.expertise-line.show {

    width: 100%;

}



/* ---------------------------------------------
   Service hover
--------------------------------------------- */

.service-card {

    transition:
        padding-left .5s ease,
        padding-right .5s ease;

}


.service-card:hover {

    padding-left:
        12px;

}


.service-card:hover
.service-title {

    transform:
        translateX(8px);

    color:
        #E86600;

}



/* ---------------------------------------------
   Hover image
--------------------------------------------- */

.service-card:hover
.service-hover-image {

    opacity: 1;

    scale: 1;

    transform:
        translate(0,-50%);

}



/* ---------------------------------------------
   Decorative circle
--------------------------------------------- */

.expertise-circle {

    animation:
        expertiseRotate
        35s
        linear
        infinite;

}


@keyframes expertiseRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}



/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media(max-width: 768px) {

    .service-card:hover {

        padding-left: 0;

    }


    .service-card:hover
    .service-title {

        transform:
            translateX(0);

    }

}

/* =====================================================
   PART 4
   GALLERY ANIMATIONS
===================================================== */


/* ---------------------------------------------
   Reveal
--------------------------------------------- */

.gallery-reveal {

    opacity: 0;

    transform:
        translateY(45px);

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

}


.gallery-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ---------------------------------------------
   Image hover
--------------------------------------------- */

.gallery-item {

    isolation: isolate;

}


.gallery-image {

    will-change:
        transform;

}



/* ---------------------------------------------
   Modal
--------------------------------------------- */

body.gallery-open {

    overflow: hidden;

}


#galleryModal.open {

    opacity: 1;

}


#galleryModal.open
#modalImage {

    opacity: 1;

    transform:
        scale(1);

}



/* ---------------------------------------------
   Gallery stagger
--------------------------------------------- */

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

    transition-delay:
        .05s;

}


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

    transition-delay:
        .12s;

}


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

    transition-delay:
        .18s;

}


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

    transition-delay:
        .12s;

}


.gallery-item:nth-child(5) {

    transition-delay:
        .18s;

}



/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media(max-width: 768px) {

    .gallery-item {

        min-height:
            380px;

    }

}

 
/* =====================================================
   PART 5
   PHILOSOPHY
===================================================== */


/* ---------------------------------------------
   Reveal animation
--------------------------------------------- */

.philosophy-reveal {

    opacity: 0;

    transform:
        translateY(45px);

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

}


.philosophy-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ---------------------------------------------
   Image reveal
--------------------------------------------- */

.philosophy-image-wrap {

    clip-path:
        inset(8% 8% 8% 8%);

    transition:
        clip-path 1.4s
        cubic-bezier(.77,0,.18,1);

}


.philosophy-image-wrap.show {

    clip-path:
        inset(0 0 0 0);

}


.philosophy-image {

    transform:
        scale(1.08);

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

}


.philosophy-image-wrap:hover
.philosophy-image {

    transform:
        scale(1.03);

}



/* ---------------------------------------------
   Principle hover line
--------------------------------------------- */

.principle-item::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 0;

    height: 1px;

    background:
        #E86600;

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

}


.principle-item:hover::before {

    width: 100%;

}



/* ---------------------------------------------
   Marquee
--------------------------------------------- */

.philosophy-marquee {

    animation:
        philosophyMarquee
        35s
        linear
        infinite;

}


@keyframes philosophyMarquee {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}



/* ---------------------------------------------
   Pause marquee
--------------------------------------------- */

.philosophy-marquee:hover {

    animation-play-state:
        paused;

}



/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media(max-width: 768px) {

    .philosophy-image-wrap {

        clip-path:
            inset(4% 4% 4% 4%);

    }

}

 

/* =====================================================
   PART 6
   PROCESS SECTION
===================================================== */


/* ---------------------------------------------
   Reveal
--------------------------------------------- */

.process-reveal {

    opacity: 0;

    transform:
        translateY(45px);

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

}


.process-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ---------------------------------------------
   Main image
--------------------------------------------- */

.process-main-image {

    transform:
        scale(1.08);

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

}


.process-main-image.show {

    transform:
        scale(1);

}



/* ---------------------------------------------
   Number hover
--------------------------------------------- */

.process-step:hover
.process-number {

    background:
        #E86600;

    border-color:
        #E86600;

    transform:
        scale(1.08);

}


.process-step:hover
.process-number span {

    color:
        #ffffff;

}



/* ---------------------------------------------
   Step stagger
--------------------------------------------- */

.process-step:nth-child(1) {

    transition-delay:
        .05s;

}


.process-step:nth-child(2) {

    transition-delay:
        .12s;

}


.process-step:nth-child(3) {

    transition-delay:
        .19s;

}


.process-step:nth-child(4) {

    transition-delay:
        .26s;

}


.process-step:nth-child(5) {

    transition-delay:
        .33s;

}



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

#process a:hover span {

    box-shadow:
        0 0 0 8px
        rgba(232,102,0,.10);

}



/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media(max-width: 1024px) {

    .process-step {

        border-bottom:
            1px solid
            rgba(36,29,7,.10);

    }

}

 

/* =====================================================
   PART 7
   CONTACT
===================================================== */


/* ---------------------------------------------
   Reveal
--------------------------------------------- */

.contact-reveal {

    opacity: 0;

    transform:
        translateY(45px);

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

}


.contact-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ---------------------------------------------
   Stagger
--------------------------------------------- */

.contact-reveal:nth-child(2) {

    transition-delay:
        .12s;

}



/* ---------------------------------------------
   Orbit
--------------------------------------------- */

.contact-orbit {

    animation:
        contactOrbit
        25s
        linear
        infinite;

}


@keyframes contactOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}



/* ---------------------------------------------
   Glow
--------------------------------------------- */

.contact-glow {

    animation:
        contactGlow
        7s
        ease-in-out
        infinite;

}


@keyframes contactGlow {

    0%,
    100% {

        opacity:
            .35;

        transform:
            scale(1);

    }

    50% {

        opacity:
            .7;

        transform:
            scale(1.15);

    }

}



/* ---------------------------------------------
   Contact info
--------------------------------------------- */

.contact-info {

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

}


.contact-info:hover {

    padding-left:
        8px;

}



/* ---------------------------------------------
   Input animated underline
--------------------------------------------- */

.contact-field input,
.contact-field textarea,
.contact-field select {

    transition:
        border-color .35s ease,
        padding-left .35s ease;

}


.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {

    border-bottom-width:
        1px;

}



/* ---------------------------------------------
   Submit button
--------------------------------------------- */

.contact-submit {

    box-shadow:
        0 12px 30px
        rgba(232,102,0,.18);

}


.contact-submit:hover {

    box-shadow:
        0 16px 40px
        rgba(232,102,0,.28);

}



/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media(max-width:768px) {

    .contact-orbit {

        right:
            -280px;

        top:
            18%;

        opacity:
            .5;

    }

}

 
/* =====================================================
   PART 8
   PREMIUM FOOTER
===================================================== */


/* ---------------------------------------------
   Reveal
--------------------------------------------- */

.footer-reveal {

    opacity: 0;

    transform:
        translateY(35px);

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

}


.footer-reveal.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ---------------------------------------------
   Watermark
--------------------------------------------- */

.footer-watermark {

    animation:
        footerWatermark
        8s
        ease-in-out
        infinite;

}


@keyframes footerWatermark {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}



/* ---------------------------------------------
   Footer orbit
--------------------------------------------- */

#footer .absolute.right-\[-220px\] {

    animation:
        footerOrbit
        28s
        linear
        infinite;

}


@keyframes footerOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}



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

.footer-cta {

    color:
        white;

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

}


.footer-cta:hover {

    transform:
        translateX(5px);

}



/* ---------------------------------------------
   Navigation
--------------------------------------------- */

.footer-nav-link {

    position:
        relative;

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

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        color .3s ease,
        padding-left .3s ease;

}


.footer-nav-link::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        50%;

    width:
        0;

    height:
        1px;

    background:
        #E86600;

    transform:
        translateY(-50%);

    transition:
        width .35s ease;

}


.footer-nav-link:hover {

    color:
        white;

    padding-left:
        18px;

}


.footer-nav-link:hover::before {

    width:
        10px;

}



/* ---------------------------------------------
   Contact links
--------------------------------------------- */

.footer-contact-link {

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

    font-size:
        14px;

    transition:
        color .3s ease,
        padding-left .3s ease;

}


.footer-contact-link:hover {

    color:
        #E86600;

    padding-left:
        5px;

}



/* ---------------------------------------------
   Social
--------------------------------------------- */

.footer-social {

    width:
        40px;

    height:
        40px;

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

    border-radius:
        999px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    transition:
        all .3s ease;

}


.footer-social:hover {

    background:
        #E86600;

    border-color:
        #E86600;

    color:
        white;

    transform:
        translateY(-3px);

}



/* ---------------------------------------------
   Animated line
--------------------------------------------- */

.footer-line span {

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

}


@keyframes footerLine {

    0% {

        width:
            0%;

        left:
            0;

    }

    45% {

        width:
            65%;

    }

    70% {

        width:
            30%;

        left:
            65%;

    }

    100% {

        width:
            0%;

        left:
            100%;

    }

}



/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media(max-width:768px) {

    .footer-watermark {

        font-size:
            38vw;

    }

}

 /* =========================================================
   HARMYAM ABOUT IMAGE - FIX
========================================================= */

.about-image-wrap {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
}

.about-image {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.about-image img {
    display: block !important;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
}