/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
@font-face {
    font-family: "Glacial Indifference";
    src: url("GlacialIndifference-Regular.woff2") format("woff2"), url("GlacialIndifference-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Glacial Indifference";
    src: url("GlacialIndifference-Bold.woff2") format("woff2"), url("GlacialIndifference-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Glacial Indifference";
    src: url("GlacialIndifference-Italic.woff2") format("woff2"), url("GlacialIndifference-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: "League Spartan" !important;
    font-optical-sizing: auto;
    font-style: normal;
    color: #000;
    animation: appear 0.5s ease-in forwards;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

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

* {
    --primary-color: #f20a4d;
    --font-color: #000;
}

.container {
    max-width: 80%;
    margin: 0 auto;
}

.logo {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

header {
    background-color: #f9f4f0;
}


/* Navigation Section */

.nav {
    display: flex;
    justify-content: center;
    border-top: 0.05vw solid #999;
    /* 1px */
    border-bottom: 0.05vw solid #999;
    /* 1px */
}

.nav div {
    text-align: center;
    padding: 1.04vw;
    /* 20px */
    border-right: 0.05vw solid #999;
    /* 1px */
    font-weight: 600;
    font-size: 1.6vw;
    width: 12.5vw;
}

.nav div:last-child {
    border-right: none;
}

.logo-section {
    padding: 5vw 0 4.16vw 0;
    /* 80px */
}

.nav div a:hover {
    color: var(--primary-color);
}

.home-banner {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 11.45vw 0;
    /* 220px */
}

.home-banner h1 {
    font-size: 5vw;
    /* 100px */
    color: #fff;
    line-height: 5.21vw;
    font-weight: 600;
    margin-bottom: 2.34vw;
    /* 45px */
}

.home-banner p {
    font-size: 2vw;
    /* 40px */
    color: #fff;
    line-height: 2.6vw;
    /* 50px */
    font-weight: 400;
    margin: 0;
}

.split-section {
    position: relative;
    height: 100%;
}

.split-section .animated-arrow-link {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: block;
    z-index: 3;
    left: 0;
}

.split-section .animated-arrow-link .inside {
    width: 100%;
    height: 5vw;
}

.split-section .animated-arrow-link .bg {
    background-color: rgba(0, 0, 0, 0.7);
}

.split-section .animated-arrow-link .text-inner {
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.4s ease;
}

.split-section .animated-arrow-link .bg {
    transform: translateX(-101%);
    will-change: transform;
    transition: 0.5s;
}

.split-section:hover .animated-arrow-link .bg,
.split-section.active .animated-arrow-link .bg {
    transform: translateX(0%);
    transition: 0.5s 0.3s;
}

.split-section:hover .animated-arrow-link .text-inner {
    opacity: 1;
    transition: opacity 0.4s ease 0.6s;
}

.text-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 4.68vw;
    /* 90px */
    width: 100%;
    font-size: 2vw;
    font-weight: 500;
    color: #fff;
}

.split-section.Small-split-section .animated-arrow-link .text-inner {
    font-size: 24px !important;
    padding: 0 2vw;
}

.text-overlay {
    font-size: 2vw;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1.04vw 4.68vw;
    /* 20px 90px */
    border-radius: inherit;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-with-underline {
    position: relative;
    text-decoration: none !important;
    font-size: 2vw;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 0.5em;
}

.link-with-underline.animated:not(.disabled) .link-text {
    transition: transform 0.3s 0.05s ease-in;
}

.link-with-underline.animated:not(.disabled) .underline {
    width: 0%;
    transition: width 0.3s;
}

.link-with-underline .underline {
    position: absolute;
    left: 0;
    top: 1.55em;
    width: 100%;
    height: 1px;
    background-color: #000;
}

.link-with-underline.cover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #efeeec;
}

.link-with-underline:hover .link-with-underline .underline {
    width: 100% !important;
}

.arrow {
    width: 4vw;
    height: auto;
}

.brand-section {
    padding: 12.33vw 0;
    /* 160px */
}

.brand-section h1 {
    font-size: 5vw;
    /* 80px */
    line-height: 5vw;
    font-weight: 600;
    margin-bottom: 1.5vw;
    /* 20px */
    color: var(--primary-color);
}

.home-brand.brand-section h1 {
    font-size: 3.5vw;
    line-height: 3.5vw;
}

.brand-section p {
    font-size: 1.7vw;
    line-height: 2.5vw;
    font-weight: 400;
    margin: 0;
    color: var(--font-color);
}

.brand-section p.subtext {
    font-size: 1.8vw;
    /* 25px */
}

.read-link {
    font-style: italic;
    color: #666666;
    font-size: 1.4vw;
    /* 33px */
    text-decoration: underline;
    margin-top: 1.04vw;
    /* 20px */
    display: inline-block;
    font-family: "Glacial Indifference";
}


/* Bottom Bar */

.bottom-bar {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 0.9vw;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 3vw;
    display: flex;
    align-items: center;
}

.scrolling-text {
    display: flex;
    animation: scroll-text 20s linear infinite;
    font-size: 1.2vw;
}

@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.circle-section {
    padding: 10vw 0 14vw;
    position: relative;
    background-color: #000;
}


/* Headings */

.circle-section h2 {
    font-size: 2vw;
    font-weight: 600;
    margin-bottom: 1vw;
    color: #fff;
}

.circle-section p {
    font-size: 1.7vw;
    font-weight: 400;
    margin-bottom: 1vw;
    color: #fff;
}

.how-help-link {
    font-size: 1.5vw;
    font-weight: 300;
    color: var(--primary-color);
    text-decoration: underline !important;
    font-family: "Glacial Indifference";
}

.circle-section a {
    color: var(--primary-color);
    font-style: italic;
    text-decoration: none;
}

.circle-section a:hover {
    text-decoration: inherit;
}


/* Circle Container */

.circle-container {
    margin-top: 5vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25vw;
}

.outer-circle,
.inner-circle {
    border: 0.25vw solid var(--primary-color);
    border-radius: 50%;
    position: absolute;
}

.outer-circle {
    width: 30vw;
    height: 30vw;
}

.inner-circle {
    width: 23vw;
    height: 23vw;
}

.circle-center {
    position: absolute;
    text-align: center;
    font-weight: 700;
    font-size: 2.5vw;
    color: #fff;
    max-width: 20vw;
    line-height: 3vw;
}


/* Labels */

.circle-label {
    position: absolute;
    text-align: left;
    width: 21vw;
    color: #fff;
}

.circle-label h5 {
    font-weight: 700;
    font-size: 2.5vw;
}

.circle-label p {
    font-size: 1.4vw;
    line-height: 1.6vw;
    margin: 0;
}


/* Number badge */

.badge-num {
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    width: 3vw;
    height: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.9vw;
    font-weight: 700;
    flex-shrink: 0;
}


/* Positions */

.branding {
    top: -1vw;
    right: 0vw;
}

.strategy {
    bottom: -2vw;
    right: 0vw;
}

.consulting {
    bottom: 7vw;
    left: -5vw;
    text-align: right;
    width: 24vw;
}

.badge-num.num1 {
    position: absolute;
    top: 1.8vw;
    right: 4vw;
}

.badge-num.num2 {
    position: absolute;
    top: inherit;
    right: 2vw;
    bottom: 4vw;
}

.badge-num.num3 {
    position: absolute;
    top: inherit;
    left: -1.3vw;
    bottom: 12.5vw;
}


/* Stats Section */

.stats-section {
    padding: 10vw 0;
    background-color: #fff;
}

.stats {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8vw;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 5.3vw;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 7vw;
}

.stat-text {
    font-size: 2.1vw;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 0;
    line-height: 2.5vw;
    text-align: center;
}

footer {
    background-color: #f5f0ec;
}

.explore-together {
    background-color: #f5f0ec;
    color: #000;
    text-align: center;
    border-top: 0.1vw solid #8f8d8c;
    border-bottom: 0.1vw solid #8f8d8c;
}

.explore-together h5 {
    font-size: 2.5vw;
    font-weight: 700;
    padding: 14vw 0;
    margin: 0;
    border-color: #8f8d8c !important;
    text-transform: uppercase;
}

.join-wild-sheep {
    padding: 6vw 0 3vw;
}

.join-wild-sheep p {
    font-size: 1.6vw;
    font-weight: 500;
    margin: 0;
    color: var(--font-color);
    line-height: 2.1vw;
    margin-bottom: 2vw;
}

.join-wild-sheep .wild-call h5 {
    font-size: 2.3vw;
    font-weight: 700;
}

.join-wild-sheep .wild-call {
    padding: 0 0 0 3vw;
}

.img-container {
    width: 100%;
    /* image box ka size */
}

.img-container img {
    width: 100%;
    transition: transform 0.5s ease;
    /* smooth zoom */
}

.join-wild-sheep .wild-call .input-group {
    position: relative;
}

.join-wild-sheep .wild-call .form-control {
    font-size: 1vw;
    padding: 1vw;
    border: 0.2vw solid var(--primary-color);
    border-radius: 10vw !important;
    width: 100%;
    max-width: 30vw;
    box-sizing: border-box;
    padding-left: 4vw;
}

.join-wild-sheep .wild-call .email-icon {
    position: absolute;
    left: 1vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 2vw;
}

.footer-bottom {
    padding-bottom: 4vw;
}

.footer-bottom h2 {
    font-size: 2.47vw;
    font-weight: bold;
    margin: 0 0 1vw;
    color: var(--font-color);
}

.footer-bottom h2 span {
    color: var(--primary-color);
}

.footer-bottom p {
    font-size: 1.7vw;
    font-weight: 600;
    margin: 0;
    color: var(--font-color);
    line-height: 2.4vw;
}

img.wild-img {
    width: 5vw;
}

.container.text-center.copyright {
    font-size: 1.5vw;
    font-weight: 500;
    color: #535355;
    margin-bottom: 1.5vw;
}

.home-banner.work-banner h1,
.home-banner.work-banner p {
    color: #000;
    font-weight: 400;
}

.home-banner.work-banner h1 {
    font-weight: 600;
}

.case-study-card .card-info {
    height: 100%;
    background-color: #f0b32f;
    padding: 4vw;
}

.case-page-preload {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: #214946;
}

.case-page-preload h2 {
    font-size: 5vw;
    font-weight: 600;
    margin: 0;
    line-height: normal;
}

.case-page-preload h4 {
    font-size: 1.9vw;
    margin: 0;
}

.case-page-preload p {
    font-size: 1.8vw;
    line-height: 2.3vw;
}

.case-study-card.card-bg-2 .card-info,
.case-study-card.card-bg-2 .animated-arrow-link .bg {
    background-color: #050708;
}

.case-study-card.card-bg-2 .case-page-preload {
    color: #ed2123;
}

.case-study-card.card-bg-3 .card-info,
.case-study-card.card-bg-3 .animated-arrow-link .bg {
    background-color: #b1461f;
}

.case-study-card.card-bg-3 .case-page-preload {
    color: #fff;
}

.case-study-card.card-bg-4 .card-info,
.case-study-card.card-bg-4 .animated-arrow-link .bg {
    background-color: #f9b4b8;
}

.case-study-card.card-bg-4 .case-page-preload {
    color: #a42124;
}

.case-study-card.card-bg-5 .card-info,
.case-study-card.card-bg-5 .animated-arrow-link .bg {
    background-color: #2e3824;
}

.case-study-card.card-bg-5 .case-page-preload {
    color: #e2c1a0;
}

.case-study-card.card-bg-6 .card-info,
.case-study-card.card-bg-6 .animated-arrow-link .bg {
    background-color: #ed1b34;
}

.case-study-card.card-bg-6 .case-page-preload {
    color: #fffefa;
}

.case-study-card.card-bg-7 .card-info,
.case-study-card.card-bg-7 .animated-arrow-link .bg {
    background-color: #f6d2af;
}

.case-study-card.card-bg-7 .case-page-preload {
    color: #5e1e22;
}

.case-study-card.card-bg-8 .card-info,
.case-study-card.card-bg-8 .animated-arrow-link .bg {
    background-color: #f2581a;
}

.case-study-card.card-bg-8 .case-page-preload {
    color: #f3eade;
}

.case-study-card.card-bg-9 .card-info,
.case-study-card.card-bg-9 .animated-arrow-link .bg {
    background-color: #7a3e1a;
}

.case-study-card.card-bg-9 .case-page-preload {
    color: #efc69c;
}

.case-study-card.card-bg-10 .card-info,
.case-study-card.card-bg-10 .animated-arrow-link .bg {
    background-color: #38347e;
}

.case-study-card.card-bg-10 .case-page-preload {
    color: #edf6c3;
}

.case-study-card.card-bg-11 .card-info,
.case-study-card.card-bg-11 .animated-arrow-link .bg {
    background-color: #faf2d3;
}

.case-study-card.card-bg-11 .case-page-preload {
    color: #591118;
}

.case-study-card.card-bg-12 .card-info,
.case-study-card.card-bg-12 .animated-arrow-link .bg {
    background-color: #27252c;
}

.case-study-card.card-bg-12 .case-page-preload {
    color: #f9fac9;
}

.case-study-card.card-bg-13 .card-info,
.case-study-card.card-bg-13 .animated-arrow-link .bg {
    background-color: #f5ecc4;
}

.case-study-card.card-bg-13 .case-page-preload {
    color: #415eb4;
}

.case-study-card.card-bg-14 .card-info,
.case-study-card.card-bg-14 .animated-arrow-link .bg {
    background-color: #1a3532;
}

.case-study-card.card-bg-14 .case-page-preload {
    color: #f5f2e8;
}

.card-image {
    position: relative;
}

.animated-arrow-link {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: block;
    z-index: 3;
}

.animated-arrow-link .inside {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.animated-arrow-link .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f0b32f;
    z-index: -1;
}

.case-study-card .animated-arrow-link .arrow {
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.4s ease;
}

.case-study-card .animated-arrow-link .bg {
    transform: translateX(-101%);
    will-change: transform;
    transition: 0.5s;
}

.case-study-card:hover .animated-arrow-link .bg {
    transform: translateX(0%);
    transition: 0.5s 0.3s;
}

.animated-arrow-link .inside {
    width: calc(-10px + 14.5vw);
    height: calc(-10px + 6.5vw);
}

.case-study-card:hover .animated-arrow-link .arrow {
    opacity: 1;
    transition: opacity 0.4s ease 0.5s;
}


/* .case-page-preload .services {
                visibility: hidden;
                opacity: 0;
                overflow: hidden;
                transform: translateY(100%);
                will-change: max-height, transform;
                transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
            } */

.case-study-card:hover .case-page-preload .services {
    visibility: visible;
    opacity: 1;
    transform: translateY(0%);
    transition: visibility 0s, opacity 0.5s, transform 0.5s;
}

.project-title {
    position: relative;
    transform: translateY(0);
    will-change: transform;
    transition: 0.5s all;
}


/* .case-study-card:hover .project-title {
    transform: translateY(-3.5vh);
    transition: 0.5s all;
} */

.case-study-card {
    animation: appear 0.5s ease-in forwards;
}


/* contact-banner */

.home-banner.contact-banner {
    padding: 10vw 0 8vw;
}

.home-banner.contact-banner h1 {
    font-size: 4vw;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.home-banner.contact-banner p {
    color: #000;
    font-weight: 500;
}

.contact-form {
    width: 100%;
    background: #fff;
    padding: 30px;
}

.contact-form label {
    font-weight: bold;
    display: block;
    margin: 10px 0 5px;
    font-size: 1.3vw;
}

.contact-form small {
    font-weight: normal;
    color: #555;
    margin-left: 5px;
}

.contact-form-section .row .field {
    flex: 1;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
    background: #f8f8f8;
    height: 60px;
}

.contact-form textarea {
    resize: none;
    min-height: 100px;
}

.contact-form button {
    display: block;
    margin: 20px auto 0;
    padding: 10px 4vw;
    border: none;
    border-radius: 4vw;
    background: #000;
    color: #fff;
    font-size: 1.8vw;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
}

.contact-form button:hover {
    background: #444;
}

.talent-section {
    padding: 12vw 10px;
    line-height: 1.6;
    font-size: 20px;
    background-color: #000;
    color: #fff;
    margin-top: 4vw;
}

.talent-section p {
    max-width: 75%;
    margin: auto;
    font-size: 3vw;
    line-height: 3.5vw;
}

.talent-section a {
    color: var(--primary-color);
    /* pinkish/red */
    text-decoration: none;
    font-weight: bold;
}

.talent-section a:hover {
    text-decoration: underline;
}

.service-banner {
    max-width: 80%;
    margin: auto;
}

.service-banner p {
    font-weight: 400;
}

.idea-progress h2 {
    font-size: 29vw;
    color: #d3d3d3;
    font-weight: bold;
    text-align: left;
}

.progressNumber {
    position: relative;
}

.progressNumber p {
    position: absolute;
    right: 0;
    top: 2vw;
    font-size: 7vw;
    text-align: right;
    color: #000;
    line-height: normal;
}

.idea-progress {
    margin-bottom: 10vw;
}

.progress-list-box h3 {
    font-size: 3vw;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}

.progress-list-box p {
    font-size: 1.5vw;
    color: #000;
    line-height: 1.8vw;
}

.progress-list-box ul {
    padding-left: 20px;
    padding-top: 0.5vw;
}

.progress-list-box li {
    font-size: 1.5vw;
    color: #666666;
    font-weight: 500;
    margin-bottom: 12px;
}

.real-impact {
    background-color: #000;
    padding: 5vw 0;
    margin-top: 2vw;
}

.impact-text {
    color: #fff;
    font-size: 15vw;
    line-height: normal;
    font-weight: 600;
    margin: auto;
    text-align: center;
    padding: 10vw 0;
}

.impact-text span {
    display: block;
}

.impact-div {
    margin-bottom: 2vw;
}

.text-with-animation {
    transform: translateY(100%);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform .5s, opacity .5s ease-in;
}

.text-with-animation:nth-of-type(2) {
    transition-delay: .2s
}

.text-with-animation:nth-of-type(2)>div {
    transition-delay: .2s
}

.text-with-animation:nth-of-type(3) {
    transition-delay: .4s
}

.text-with-animation:nth-of-type(3)>div {
    transition-delay: .4s
}

.text-with-animation:nth-of-type(4) {
    transition-delay: .6s
}

.text-with-animation:nth-of-type(4)>div {
    transition-delay: .6s
}

.text-with-animation.textProgress {
    transform: translateY(0%);
    opacity: 1
}

.first-progress {
    display: flex;
    color: #fff;
    max-width: 47vw;
    margin-bottom: 12vw;
}

.first-progress .step {
    font-size: 14vw;
    padding-right: 4vw;
    font-weight: 600;
    color: #2D2D2D;
    line-height: normal;
    transform: translateY(75%);
    opacity: 0;
    transition: transform .5s, opacity .5s ease-in;
}

.first-progress .process-label {
    font-size: 6vw;
    color: var(--primary-color);
    line-height: normal;
    font-weight: 600;
    opacity: 0;
    transition: opacity .7s .2s;
}

.first-progress .process-text {
    font-size: 1.8vw;
    color: #fff;
    line-height: 2.4vw;
    margin-top: 1.5vw;
    opacity: 0;
    transition: opacity .7s .4s;
    font-weight: 500;
}

.second-progress {
    margin: 12vw auto;
}

.third-progress {
    margin-left: auto;
}

.drom-logo-work {
    max-width: 300px;
}

.animated.progress-show .step {
    transform: translateY(0%);
    opacity: 1;
}

.animated.first-progress.progress-show .process-label {
    opacity: 1;
    transition-delay: .4s;
}

.animated.first-progress.progress-show .process-text {
    opacity: 1;
    transition-delay: .6s;
}

.column-box .column-content {
    padding: 2vw 6vw 2vw 2vw;
    min-height: 25vw;
    display: flex;
    align-items: end;
    color: #fff;
}

.column-box .column-content h3 {
    font-size: 2vw;
    margin: 0;
    line-height: 2.3vw;
    transform: translateY(75%);
    opacity: 0;
    transition: transform .5s, opacity .5s ease-in;
}

.column-box .column-content h3.anima-show {
    transform: translateY(0%);
    opacity: 1;
}

.bg-column-1 {
    background-color: #f7f7f7;
}

.bg-column-2 {
    background-color: #334fd7;
}

.bg-column-3 {
    background-color: #feead2;
}

.bg-column-4 {
    background-color: #e0e447;
}

.bg-column-5 {
    background-color: #f7f7f7;
}

.bg-column-6 {
    background-color: #c8b1ff;
}

.bg-column-7 {
    background-color: #fff6bf;
}

.bg-column-8 {
    background-color: #fe7144;
}

.bg-column-9 {
    background-color: #f7f7f7;
}

.color-1 {
    color: #33473b;
}

.color-2 {
    color: #3d1ca5;
}

.color-3 {
    color: #776a21;
}

.color-4 {
    color: #fff;
}

.meet-founder {
    background-color: #000;
    padding: 8vw 0;
}

.meet-founder p {
    color: #fff;
    font-size: 1.7vw;
    line-height: 2.1vw;
}

.our-Philosophy {
    padding: 10vw 0 0;
}

.Philosophy-text {
    font-size: 7vw;
    font-weight: 700;
}

.Philosophy-text span {
    color: var(--primary-color);
}

.our-Philosophy .process-text {
    color: #000;
    font-size: 2.4vw;
    line-height: 3vw;
    margin-top: 0.6vw;
    font-weight: 400;
}

.our-Philosophy .first-progress {
    max-width: 100%;
    max-width: 90%;
    margin: 10vw 0;
    gap: 3vw;
}

.our-Philosophy .first-progress .step {
    padding: 0;
    color: #e5e5e5;
    font-size: 15vw;
    font-weight: bold;
}

.our-Philosophy .first-progress.second-progress {
    flex-direction: row-reverse;
    margin-left: auto;
}

.our-Philosophy .first-progress .process-label {
    font-size: 3.5vw;
    font-weight: 700;
}

.our-Philosophy .first-progress .process-label p {
    margin: 0;
}

body:not(.disable-reveals) .anim-brand {
    transition: 0.7s all;
    transform: translateY(1em);
    opacity: 0;
}

body:not(.disable-reveals) .anim-brand.run {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

.sounds-like {
    padding: 8vw 0;
    font-size: 4vw;
    font-weight: 600;
    background: #F1EADF;
    line-height: 5vw;
    color: var(--primary-color);
}

.brand-animation {
    transition: 0.7s all;
    transform: translateY(1em);
    opacity: 0;
}

.brand-animation.anima-show {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

.club-19-absolute {
    position: absolute;
    left: -1.5vw;
    top: -7vw;
    height: auto !important;
}

.bg-club-19 {
    background-color: #F4E8DC;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}

@media (max-width: 768px) {
    .join-wild-sheep .wild-call {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .text-inner,
    .split-section.Small-split-section .animated-arrow-link .text-inner {
        font-size: 18px !important;
    }
    .split-section .animated-arrow-link .inside {
        width: 100%;
        height: 10vw;
    }
    .container {
        max-width: 95%;
        margin: 0 auto;
    }
    .logo {
        max-width: 60%;
    }
    .nav div {
        font-size: 3.7vw;
        width: 24.5vw;
    }
    .home-banner h1 {
        font-size: 7.21vw;
        line-height: 7.21vw;
        margin-bottom: 2.34vw;
    }
    .home-banner p {
        font-size: 19px;
        color: #fff;
        line-height: 20px;
        font-weight: 300;
        margin: 0;
        display: inline-block;
    }
    .text-overlay {
        font-size: 5.3vw;
    }
    .arrow {
        width: 12vw;
        height: auto;
    }
    .link-with-underline {
        font-size: 7.2vw;
        padding: 5vw 0;
        margin: 0;
    }
    .brand-section .row.px-5 {
        padding: 0 !important;
    }
    .brand-section h1 {
        font-size: 34px;
        line-height: 38px;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .brand-section p.subtext {
        font-size: 21px;
        line-height: 26px;
    }
    .brand-section p.subtext br {
        display: none;
    }
    .brand-section p {
        font-size: 19px;
        line-height: 22px;
        font-weight: 400;
        margin: 0;
        color: var(--font-color);
    }
    .read-link {
        font-size: 16px;
        margin-top: 3.04vw;
        font-family: "Glacial Indifference";
    }
    .bottom-bar {
        height: 10vw;
    }
    .scrolling-text {
        font-size: 4.2vw;
        padding-top: 5px;
    }
    .circle-section h2 {
        font-size: 30px;
        margin-bottom: 2vw;
        line-height: 31px;
    }
    .circle-section p {
        font-size: 19px;
        line-height: 23px;
    }
    .how-help-link {
        font-size: 16px;
    }
    .circle-label {
        width: 27vw;
        margin-bottom: -30px;
    }
    .circle-label h5 {
        font-weight: 700;
        font-size: 3vw;
        margin-bottom: 5px;
    }
    .circle-label p {
        font-size: 10px;
        line-height: 10px;
        margin: 0;
    }
    .consulting {
        left: 0;
    }
    .circle-section h2 br {
        display: none;
    }
    .stat-number {
        font-size: 10vw;
        line-height: 15vw;
    }
    .stat-text {
        font-size: 20px;
        line-height: 4.5vw;
    }
    .stat-text br {
        display: none;
    }
    .explore-together h5 {
        font-size: 13px;
        padding: 70px 0;
    }
    .join-wild-sheep p {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        margin-bottom: 2vw;
    }
    .join-wild-sheep p br {
        display: none;
    }
    .join-wild-sheep .wild-call h5 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .join-wild-sheep .wild-call .form-control {
        font-size: 4vw;
        padding: 2vw;
        border: 0.2vw solid var(--primary-color);
        border-radius: 10vw !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 12vw;
    }
    .join-wild-sheep .wild-call .email-icon {
        position: absolute;
        left: 3vw;
        width: 6vw;
    }
    .footer-bottom h2 {
        font-size: 6.6vw;
    }
    .footer-bottom p {
        font-size: 17px;
        line-height: 24px;
    }
    img.wild-img {
        width: 18vw;
        margin-bottom: 3vw;
    }
    .container.text-center.copyright {
        font-size: 4vw;
        font-weight: 500;
        color: #535355;
        margin-bottom: 1.5vw;
    }
    .footer-logo .logo {
        max-width: 100%;
    }
    .container.text-center.copyright p {
        margin-bottom: 8px;
    }
    .join-wild-sheep .wild-call p br {
        display: none;
    }
    .case-study-card .card-info {
        display: none;
    }
    .case-study-card {
        position: relative;
    }
    .case-study-card.active .card-info {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        width: 60%;
        display: block;
    }
    .case-study-card .animated-arrow-link {
        position: absolute;
        right: 0px;
        bottom: 0px;
        display: block;
        z-index: 3;
        width: 40%;
    }
    .case-study-card .animated-arrow-link .inside {
        width: 100%;
        height: 60px;
    }
    .case-study-card .animated-arrow-link .arrow {
        width: 8vw;
        height: auto;
    }
    .case-study-card.active .project-title {
        transform: translateY(-3.5vh);
        transition: 0.5s all;
        font-size: 28px;
    }
    .case-study-card.active .case-page-preload .services {
        visibility: visible;
        opacity: 1;
        transform: translateY(0%);
        transition: visibility 0s, opacity 0.5s, transform 0.5s;
        font-size: 16px;
        line-height: 18px;
    }
    .case-page-preload h4 {
        font-size: 19px;
        margin: 0;
    }
    .case-study-card.active .animated-arrow-link .bg {
        transform: translateX(0%);
        transition: 0.5s 0.3s;
    }
    .case-study-card.active .animated-arrow-link .arrow {
        opacity: 1;
        transition: opacity 0.4s ease 0.5s;
    }
    .case-page-preload p br {
        display: none;
    }
    .home-banner.contact-banner h1 {
        font-size: 8vw;
    }
    .contact-form {
        padding: 0;
    }
    .contact-form input,
    .contact-form textarea {
        height: 48px;
    }
    .talent-section {
        margin-top: 8vw;
        padding: 20vw 2vw;
    }
    .talent-section p {
        max-width: 100%;
        margin: auto;
        font-size: 28px;
        line-height: 32px;
    }
    .drom-logo-work {
        max-width: 120px;
    }
    .service-banner h1 br {
        display: none;
    }
    .home-banner.service-banner h1 {
        font-size: 27px;
        line-height: 26px;
        margin-bottom: 2.34vw;
    }
    .progress-list-box h3 {
        font-size: 24px;
        margin-bottom: 6px;
    }
    .progress-list-box p {
        font-size: 19px;
        line-height: 20px;
        margin-bottom: 0;
    }
    .progress-list-box ul {
        padding-left: 20px;
        margin-top: 18px !important;
    }
    .progress-list-box ul li {
        font-size: 19px;
        margin-bottom: 5px;
    }
    .first-progress {
        max-width: 100%;
        margin-top: 12vw;
    }
    .first-progress .process-text {
        font-size: 14px;
        color: #fff;
        line-height: 16px;
        margin-top: 1.5vw;
    }
    .contact-form label {
        font-size: 14px;
        margin: 5px 0 0px;
    }
    .real-impact {
        padding-top: 30px;
    }
    .footer-logo.text-center {
        padding: 0 20px 20px;
    }
    .first-progress .process-label {
        font-size: 26px;
    }
    .first-progress .process-text {
        font-size: 19px;
        line-height: 20px;
    }
    .first-progress .process-text br {
        display: none;
    }
    .home-banner.work-banner p {
        display: inline;
    }
}

#scrollTop {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: inline-grid;
    place-items: center;
    background: #111;
    /* change as needed */
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}

#scrollTop:focus {
    outline: 3px solid rgba(255, 255, 255, 0.15);
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

#scrollTop.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.gallary-banner .drom-logo {
    max-width: 220px;
    margin: 0 auto 20px;
}

.gallary-banner p {
    font-size: 1.5vw;
    color: #000;
    line-height: 2vw;
    font-weight: 400;
    margin: 0;
}

.gallary-banner-text {
    padding: 5vw 0;
}

.g-image {
    border-radius: 10px;
    height: 100%;
    object-fit: cover;
}

.brand-section.brand-gallery-section p {
    font-size: 1.4vw;
    line-height: 1.7vw;
}

.brand-section.brand-gallery-section h5 {
    font-size: 1.6vw;
    line-height: 1.7vw;
    font-weight: 600;
    margin-bottom: 20px;
}

.drom-title {
    font-size: 4vw;
    font-weight: bold;
    color: #F20A4D;
    letter-spacing: 5px;
}


/* small responsive tweak */

@media (max-width:420px) {
    #scrollTop {
        right: 12px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}


/* Respect reduced motion preference */

@media (prefers-reduced-motion: reduce) {
    #scrollTop {
        transition: none;
    }
}


/* Sirf nav ko animate karenge */

#header {
    transition: transform 0.5s ease-in-out;
    position: relative;
    /* default */
}

.body-height {
    height: 315px;
}


/* Jab show class lagegi tab fixed ho ke visible ho jayega */

#header.hide {
    transform: translateY(-100%);
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
}

#header.show {
    transform: translateY(0);
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
}

#header.show .logo-section {
    padding: 20px;
}

.border-1 {
    border: 1px solid;
}

.border-blue-1 {
    border: 1px solid #007bff;
}

section.gallary-section .row {
    --bs-gutter-x: 20px;
}

section.gallary-section .mb-4 {
    margin-bottom: 20px !important;
}

.inner-wild-ft {
    padding: 0 0 0 3vw;
}


/* Default state: hidden */

@media (max-width: 767px) {
    .inner-wild-ft {
        padding: 0;
    }
    section.gallary-section .row {
        --bs-gutter-x: 8px;
    }
    section.gallary-section .mb-4 {
        margin-bottom: 8px !important;
    }
    .gallary-banner-text {
        padding: 5vw 10px;
    }
    .g-image {
        border-radius: 5px;
    }
    .meet-founder p {
        color: #fff;
        font-size: 19px;
        line-height: 22px;
    }
    .our-Philosophy .first-progress .process-label {
        font-size: 22px;
    }
    .our-Philosophy .process-text {
        color: #000;
        font-size: 14px;
        line-height: 16px;
    }
    .our-Philosophy .first-progress .process-label p {
        margin-bottom: 5px;
    }
    .our-Philosophy .first-progress .step {
        font-size: 70px;
    }
    .Philosophy-text {
        font-size: 8vw;
        font-weight: 700;
    }
    .column-box .column-content {
        padding: 2vw;
        min-height: 140px;
        align-items: start;
        padding-top: 60px;
        height: 100%;
    }
    .column-box .column-content.align-bottom {
        padding-top: 60px;
    }
    .column-box .column-content h3 {
        font-size: 16px;
        margin: 0;
        line-height: 16px;
    }
    .service-banner {
        max-width: 100%;
    }
    .service-banner p {
        display: inline;
    }
    .home-banner p br {
        display: none;
    }
    .contact-form button {
        font-size: 16px;
        padding: 10px 40px;
        border-radius: 30px;
    }
    .column-box .column-content h3 br {
        display: none;
    }
    section.sounds-like {
        font-size: 22px;
        line-height: 26px;
    }
    .home-brand.brand-section h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .brand-section h1 br {
        display: none;
    }
    .signImg {
        max-width: 140px;
    }
    .our-Philosophy .first-progress {
        max-width: 100%;
    }
    .our-Philosophy.abouts-philosophy .process-text br {
        display: none;
    }
    .our-Philosophy.abouts-philosophy .first-progress .process-label p {
        margin-bottom: 8px;
    }
    .our-Philosophy.abouts-philosophy .process-text {
        font-size: 19px;
        line-height: 22px;
    }
    #header.show .logo-section {
        padding: 17px 0;
    }
    .drom-title {
        font-size: 30px;
        font-weight: bold;
        color: #F20A4D;
        letter-spacing: 3px;
    }
    .gallary-banner p {
        font-size: 19px;
        line-height: 20px;
    }
    .gallary-banner p br {
        display: none;
    }
    .brand-section.brand-gallery-section h5 {
        font-size: 26px;
    }
    .brand-section.brand-gallery-section p {
        font-size: 19px;
        line-height: 21px;
    }
    .home-banner.contact-banner p {
        display: inline;
    }
    .brand-gallery-section br {
        display: none;
    }
    .home-banner p {
        display: inline;
    }
}

img {
    pointer-events: none;
    /* disables right-click & drag */
    -webkit-user-drag: none;
    user-select: none;
}

body {
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
    /* Standard */
}