@import url("https://fonts.googleapis.com/css2?family=Anton&family=Mona+Sans:wght@400;600&display=swap");
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

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

    body {
        overflow-x: hidden;
    }

    .navbar {
        width: 100%;
        z-index: 9999;
        padding: 40px 70px;
    }

    .navbar .menu-bar {
        display: flex;
        justify-content: end;
        align-items: center;
        background-color: #1A1A1A;
        padding: 10px 20px;
        border-radius: 34px;
        column-gap: 10px;
        height: 38px;
        width: 121px;
        cursor: pointer;
        box-shadow: 0px -1px 0px 0px #303030;
    }

    #menu-toggle {
        width: 44px;
        height: 44px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 7px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        cursor: pointer;
        span {
            width: 32px;
            height: 3px;
            background: #fff;
        }
    }

    .menu-overlay {
        position: fixed;
        inset: 0;
        height: 100vh;
        width: 100vw;
        z-index: 9999;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    .menu-overlay__bg-container {
        background-color: #1A1A1A;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .menu-overlay__bg-img img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
    }

    .menu-overlay__content {
        width: 100%;
        height: 100%;
    }

    .menu-overlay__links {
        background: #000000;
        backdrop-filter: blur(67px);
        width: 50%;
        height: 100%;
        padding: 44px 30px;
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    [data-text-anim] {
        /*  hide animated words first to avoid FOUC */
        visibility: hidden;
    }

    .duplicate-char {
        position: absolute;
        inset: 0;
        transform: translateY(100%);
    }

    .menu-overlay__main {
        color: #fff;
        font-family: "Inter", sans-serif;
        font-size: clamp(2rem, 4.862vw + 0.936rem, 5.313rem);
        line-height: 90%;
        letter-spacing: -1.2px;
        ul {
            list-style-type: none;
            margin-bottom: 0px;
            padding-left: 0px;
        }
        li {
            margin-bottom: 10px;
            transition: opacity 0.3s ease;
            width: fit-content;
            margin-inline: auto;
            a {
                line-height:112%;
            }
        }
    }

    .menu-overlay__main:has(li:hover) li:not(:hover) {
        opacity: 0.5;
    }

    .menu-bar.menu-active {
        box-shadow: 0px 0px 0px 0px;
        width: fit-content;
    }

    .menu-bar.menu-active .menu-text {
        display: none;
    }

    .menu-overlay__socials ul {
        display: flex;
        gap: 14px;
        color: #FFF7E8;
        font-size: clamp(1rem, 0.55vw + 0.88rem, 1.375rem);
        font-weight: 600;
        line-height: normal;
        letter-spacing: -0.44px;
    }

    .navbar .menu-text {
        color: #fff;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 15px;
        text-transform: capitalize;
        transition-delay: 6s;
    }

    .navbar__btn {
        color: #2F2411;
    }

    .page-content {
        height: 100%;
        will-change: transform;
    }
    /* #hero-section {
    background-color: #000;
    height: 100vh;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: 36px;
} */

    #hero-section .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        gap: 20px;
    }

    .hero__header {
        font-family: Anton, sans-serif;
        /*  font-size: 130px; */
        font-size: clamp(2.75rem, 7.89vw + 1.024rem, 8.125rem);
        line-height: 99%;
        letter-spacing: -2.6px;
        text-transform: uppercase;
        max-width: 751px;
        background: linear-gradient(0deg, #FFD08E 0%, #FFF9EE 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hero__cta {
        border-radius: 20px;
        background: linear-gradient( 180deg, rgba(23, 20, 14, 0.59) 0%, rgba(106, 63, 2, 0.59) 80.77%);
        backdrop-filter: blur(10px);
        z-index: 0;
        max-width: 385px;
        padding: 22px 18px;
        .cta__txt {
            margin-block: 12px 14px;
        }
        .cta__btn {
            background: #FFAD3B;
            font-size: 22px;
        }
    }
    /* #spacer-section {
    height: 100vh;
} */

    .banner-area {
        width: 100%;
        position: relative;
        display: flex;
        background-color: #000000;
    }

    .banner-image {
        width: 100%;
        position: relative;
        /* height: 1086px; */
    }

    @media screen and (max-width: 992px) {
        .menu-overlay__main ul a,
        .menu-overlay__main ul li {
            font-size: 36px;
            line-height: 40px;
        }
    }

    @media screen and (max-width: 575px) {
        .menu-overlay__main ul a,
        .menu-overlay__main ul li {
            font-size: 30px;
            line-height: 35px;
        }
        .menu-overlay__bg-img img {
            display: none;
        }
        .menu-overlay__links {
            width: 100%;
        }
    }

    @media screen and (max-width: 420px) {
        .menu-overlay__main ul a,
        .menu-overlay__main ul li {
            font-size: 26px;
            line-height: 30px;
        }
    }

    .banner-bottom-content {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 0px 85px 165px 85px;
        justify-content: space-between;
    }

    .line-img {
        width: 112px;
        padding-top: 15px;
    }

    .img-width {
        width: 100%;
    }

    .first-content {
        width: 10%;
        position: relative;
        display: flex;
        font-size: 15px;
        font-weight: 600;
        font-family: "Inter", sans-serif;
        color: #B7B7B7;
        text-align: left;
    }

    .bannner-main-head-area {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: center;
    }

    .baker-small-head {
        display: flex;
        font-size: 25px;
        line-height: 20px;
        font-weight: 600;
        font-family: "Inter", sans-serif;
        color: #FFFFFF;
        justify-content: center;
        padding-bottom: 20px;
    }

    .baker-main-head {
        font-family: "Gilda Display", serif;
        font-size: 82px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        position: relative;
        line-height: 70px;
    }

    .baker-main-head-about {
        font-family: "Gilda Display", serif;
        font-size: 62px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        position: relative;
        line-height: 70px;
        padding-top: 10px;
    }

    .scroll-to-explore {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        font-family: "Inter", sans-serif;
        color: #ffffff;
        margin: auto 0 0;
    }
    /* Arrow Icon */

    .scroll-to-explore .arrow {
        display: inline-block;
        animation: moveDown 1.5s ease-in-out infinite;
        font-size: 18px;
        font-weight: 400;
    }

    @keyframes moveDown {
        0%,
        100% {
            transform: translateY(0);
            opacity: 1;
        }
        50% {
            transform: translateY(8px);
            opacity: 0.6;
        }
    }
    /* award-section----------------------------------------------------------------------------------- */

    .award-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #000000;
        overflow: hidden;
        padding-bottom: 20px;
    }

    .award-head {
        font-family: "Gilda Display", serif;
        font-size: 42px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        position: relative;
        justify-content: center;
        text-align: center;
        line-height: 40px;
    }

    .award-animate {
        opacity: 0;
        transform: translateY(80px);
        transition: transform 1s ease-out, opacity 1s ease-out;
        will-change: transform, opacity;
    }
    /* .award-animate.show-anim {
        opacity: 1;
        transform: translateY(0);
    } */
    /* When active */

    .award-animate.animate-up {
        opacity: 1;
        transform: translateY(0);
    }
    /* Common animation base */

    .scroll-animate {
        opacity: 0;
        transform: translateY(80px);
        transition: transform 0.8s ease-out, opacity 0.8s ease-out;
        will-change: transform, opacity;
    }

    .scroll-animate.show-anim {
        opacity: 1;
        transform: translateY(0);
    }

    .pad-top-sec {
        padding-top: 200px;
    }

    .award-slider-wrapper {
        overflow: hidden;
        width: 100%;
        padding: 55px 0 0px;
        position: relative;
    }

    .award-slider {
        display: flex;
        width: max-content;
        animation: scrollLeft 30s linear infinite;
    }

    .award-slider.reverse {
        animation: scrollRight 30s linear infinite;
    }
    /* Hover pause */

    .award-slider:hover {
        animation-play-state: paused;
    }
    /* Card */

    .award-grid {
        width: 330px;
        flex-shrink: 0;
        margin-right: 20px;
        background-color: #141414;
        border-radius: 12px;
        border: 1px solid #222222;
        padding: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transform: translateY(0);
        transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    }

    .award-grid:hover {
        transform: translateY(-15px);
        box-shadow: 0 12px 30px rgba(255, 255, 255, 0.08);
    }

    .award-img {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .award-img img {
        height: auto;
        object-fit: contain;
    }

    .grid-inner-box {
        width: 100%;
        border: 1px solid #222222;
        background: linear-gradient(176deg, rgba(20, 20, 20, 1) 0%, rgba(33, 33, 33, 1) 100%);
        padding: 20px 15px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .grids-header,
    .grids-big-header,
    .grids-btm-header {
        font-family: "Inter", sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .grids-header {
        font-size: 15px;
        font-weight: 400;
        color: #B3B3B3;
    }

    .grids-big-header {
        font-size: 17px;
        font-weight: 600;
        color: #DDDDDD;
        padding-bottom: 15px;
    }

    .grids-btm-header {
        font-size: 15px;
        font-weight: 400;
        color: #DDDDDD;
    }
    /* Keyframes */

    @keyframes scrollLeft {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }

    @keyframes scrollRight {
        from {
            transform: translateX(-50%);
        }
        to {
            transform: translateX(0);
        }
    }
    /* Responsive */

    @media (max-width: 992px) {
        .award-grid {
            width: 280px;
        }
    }

    @media (max-width: 768px) {
        .award-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20;
        }
        .award-slider-wrapper {
            padding: 20px 0;
        }
        .second-slider {
            margin-top: -40px;
        }
        .award-slider {
            animation: scrollLeft 25s linear infinite;
        }
        .award-slider.reverse {
            animation: scrollRight 25s linear infinite;
        }
        .award-grid {
            width: 240px;
        }
        .pad-top-sec {
            padding-bottom: 50px;
        }
    }

    @media (max-width: 480px) {
        .award-grid {
            width: 280px;
        }
    }
    /* two-slider-section============================================================================ */

    .two-slider-sec {
        width: 100%;
        position: relative;
        display: flex;
        overflow: hidden;
        background-color: #000000;
    }

    .pad-btm {
        padding-top: 100px;
    }

    .legacy-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        background: #000;
        padding: 70px 50px;
        color: #fff;
        gap: 50px;
    }

    .text-area {
        width: 40%;
        display: flex;
        flex-direction: column;
        position: sticky;
        height: fit-content;
        top: 170px;
    }

    .image-area {
        width: 55%;
        display: flex;
        gap: 20px;
    }

    .image-slider {
        display: flex;
        width: 100%;
        gap: 20px;
    }

    .slide {
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow: hidden;
        /* important for visual reverse effect */
        position: relative;
    }

    .slide img {
        width: 100%;
        object-fit: cover;
        border-radius: 15px;
        border: 1px solid #282828;
        filter: grayscale(100%);
        transition: all 0.5s ease-out;
        transform: scale(0.95);
    }

    .slide img:hover {
        transform: scale(1);
        filter: grayscale(0%);
    }

    .sticky-head {
        font-family: "Inter", sans-serif;
        font-size: 37px;
        line-height: 40px;
        font-weight: 600;
        color: #ffffff;
        padding-bottom: 30px;
        width: 90%;
    }

    .sticky-content {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 30px;
        font-weight: 500;
        color: #B7B7B7;
    }

    .text-transition {
        position: relative;
        overflow: hidden;
    }

    .slide-up {
        opacity: 0;
        transform: translateY(-30px);
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    }

    .slide-down {
        opacity: 0;
        transform: translateY(30px);
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    }

    .active {
        opacity: 1;
        transform: translateY(0);
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    }
    /* brand-area-section----------------------------------------------------------------------------------- */

    .brand-area-section {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 60px 50px;
        background-color: #000000;
    }

    .section-title-j {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
        color: #FFFFFF;
    }

    .dot-title-j {
        position: relative;
        padding-left: 12px;
    }

    .dot-title-j::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all ease-in-out .5s;
    }

    .brands-big-heads {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding-top: 10px;
    }

    .brand-heads {
        font-family: "Inter", sans-serif;
        font-style: italic;
        font-weight: 500;
        font-size: 42px;
        color: #ffffff;
    }

    .created-heads {
        font-family: "Gilda Display", serif;
        font-weight: 400;
        font-size: 42px;
        color: #4C4C4C;
    }

    .brand-grid {
        display: flex;
        flex-direction: row;
        padding: 30px 0;
        gap: 15px;
    }

    .col5_col4lg_col3-brand {
        grid-auto-flow: row;
        gap: 20px 20px;
        grid-template-columns: repeat(3, 1fr);
        .spanItem {
            grid-column: span 2;
        }
    }

    .brand-box {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 30px 50px;
        border: 1px solid #1F1F1F;
        border-radius: 8px;
        gap: 20px;
        background-color: #141414;
        justify-content: center;
        align-items: center;
    }

    .logo-img {
        flex: 1;
    }

    .brnd-box-content {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #C3C3C3;
        flex: 1;
    }

    .logo-img img {
        width: 100%;
        opacity: 0.5;
        filter: grayscale(100%);
        transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .brand-box:hover .logo-img img {
        filter: grayscale(0%);
        opacity: 1;
        /* Use 1 instead of 100% */
    }

    .brands-area-big {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .brand-container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .brand-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 30px;
        padding-bottom: 30px;
        border-top: 1px solid #2c2c2c9c;
        border-bottom: 1px solid #2c2c2c9c;
        transition: padding 0.5s ease-in-out;
        /* Smooth padding transition */
    }
    /* On hover — increase padding smoothly */

    .brand-row:hover {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 50px;
        flex: 1;
        min-width: 400px;
        justify-content: space-between;
    }

    .brand-details {
        display: flex;
        flex-direction: column;
    }

    .num {
        color: #4C4C4C;
        font-weight: 400;
        font-size: 22px;
        font-family: "Inter", sans-serif;
        display: flex;
        margin: auto;
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: translateY(0) translateZ(0);
        transform-style: preserve-3d;
        opacity: 1;
    }
    /* On hover of parent .brand-row */

    .brand-row:hover .num {
        transform: translateY(-10px) translateZ(-20px);
        opacity: 1;
        /* optional, in case you want fade effect */
    }

    .name {
        font-weight: 600;
        color: #ffffff;
        font-size: 22px;
        font-family: "Inter", sans-serif;
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 1;
        transform: translateY(0) translateZ(0);
        /* Set initial 3D transform */
        transform-style: preserve-3d;
    }
    /* Container for 3D perspective */

    .brand-row {
        perspective: 800px;
        /* gives depth for the 3D effect */
    }

    .brand-row:hover .name {
        opacity: 1;
        transform: translateY(-10px) translateZ(-20px);
        /* Moves up and backward smoothly */
    }

    .band-value-content {
        font-weight: 400;
        color: #8f8f8f;
        font-size: 16px;
        font-family: "Inter", sans-serif;
    }

    .brand img {
        height: auto;
        border-radius: 8px;
        padding: 10px;
    }

    .comn-area-same {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    .mob-brand-container {
        display: none;
    }

    .pad-right-cmn {
        padding-right: 30px;
    }

    .clr-change {
        filter: grayscale(100%);
    }

    .band-value-content {
        display: none;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    /* Smooth grayscale transition for logo */

    .clr-change {
        filter: grayscale(100%);
        transition: filter 0.4s ease;
    }
    /* On hover — show hidden content smoothly and adjust padding */

    /* Remove grayscale on hover */

    .brand-row:hover .clr-change {
        filter: grayscale(0%);
    }

    .band-value-content {
        display: block;
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.5s ease;
        height: 0;
        overflow: hidden;
    }
    /* Hover effect — reveal text with upward motion */

    .brand-row:hover .band-value-content {
        opacity: 1;
        transform: translateY(0);
        height: auto;
    }

    .clr-change {
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: translateY(0) translateZ(0);
        transform-style: preserve-3d;
        display: block;
        /* ensures proper transform behavior */
    }
    /* Apply 3D movement on hover of parent (.brand-row) */

    .brand-row:hover .clr-change {
        transform: translateY(-10px) translateZ(-20px);
        /* moves image up and backward smoothly */
    }

    .width-ones {
        width: 53%;
    }
    /* trendsetter-area------------------------------------------------------------------------------------------ */

    .trendsetter-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #000000;
        padding-top: 140px;
    }

    .trend-letter-sec {
        width: 100%;
        position: relative;
        display: flex;
    }

    .res-heading {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }

    .res-head-first {
        font-weight: 700;
        font-size: 27px;
        font-family: "Inter", sans-serif;
        color: #ffffff;
        display: flex;
        margin: auto 0;
    }

    .res-head-second {
        font-family: "Gilda Display", serif;
        font-size: 43px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        margin: auto 0;
    }

    .trend-content {
        width: 63%;
        display: flex;
        justify-content: center;
        text-align: center;
        font-weight: 600;
        color: #AEAEAE;
        font-size: 22px;
        font-family: "Inter", sans-serif;
        margin: auto;
    }

    .anim-first-trend,
    .anim-second-trend,
    .anim-res-heading,
    .anim-trend-content {
        opacity: 0;
        transform: translateY(60px);
        transition: all 1s ease;
    }
    /* Active state (when visible) */

    .show-anim {
        opacity: 1;
        transform: translateY(0);
    }
    /* team-area------------------------------------------------------------------------------------------------------ */

    .team-wrapper {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #000000;
        padding-bottom: 60px;
    }

    .team-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-top: 130px;
        background-color: #000000;
        background-image: url(../images/black-white.webp);
        /* First image */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 769px;
        overflow: hidden;
    }
    /* Overlay image for fade effect */

    .team-area::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url(../images/colour.webp);
        /* Second image */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0;
        transition: opacity .9s ease-in-out;
        z-index: 1;
    }
    /* When in view */

    .scroll-up-section {
        transform: translateY(30px);
        transition: transform 1s ease-in-out;
    }
    /* New custom class added on scroll */

    .scroll-up-animate {
        transform: translateY(0);
    }

    .team-area.active::after {
        opacity: 1;
    }

    .bake-mart-text {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        font-size: 46px;
        font-weight: 700;
        color: #ffffff;
        margin-top: -25px;
        z-index: 100;
    }
    /* footer--------------------------------------------------------------------- */

    .footer-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #000000;
        border-top: 1px solid #1A1A1A;
        padding-top: 30px;
        overflow: hidden;
    }

    .fade-top-bottom {
        opacity: 0;
        transform: translateY(-50px);
        transition: all 1s ease-in-out;
    }

    .fade-top-bottom.active {
        opacity: 1;
        transform: translateY(0);
    }

    .ftr-content-area {
        padding-left: 100px;
        padding-right: 100px;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .ftr-head {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .stars-head {
        display: flex;
        flex-direction: row;
        gap: 5px;
    }

    .name-ftr {
        font-family: "Gilda Display", serif;
        font-size: 30px;
        font-weight: 400;
        color: #ffffff;
    }

    .contact-ftr-text {
        font-weight: 600;
        color: #ffffff;
        font-size: 20px;
        font-family: "Inter", sans-serif;
    }

    .ftr-num {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-end;
        font-weight: 600;
        color: #ffffff;
        font-size: 20px;
        font-family: "Inter", sans-serif;
        text-decoration: none;
    }

    .copy-right {
        font-size: 14px;
        font-family: "Inter", sans-serif;
        color: #696969;
        font-weight: 600;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        text-align: right;
        padding-top: 25px;
    }

    .ftr-big-head {
        width: 100%;
        position: relative;
        display: flex;
        font-size: 382px;
        font-family: "Inter", sans-serif;
        line-height: 382px;
        font-weight: 700;
        letter-spacing: -7px;
        color: #191919;
        justify-content: center;
        padding-top: 45px;
        margin-bottom: -125px;
    }
    /* style-css------------------------------------------------------------ */

    .story-section-j {
        background-color: #000;
        padding: 114px 0px 62px;
        position: relative;
        width: 100%;
    }

    .section-container-j {
        padding-left: 100px;
        padding-right: 100px;
    }

    .left-piller-j {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .section-content-j {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        column-gap: 113px;
    }

    .left-content-j {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .left-content-j.visible {
        opacity: 1;
        transform: translateY(0);
        /* move to normal position */
    }

    .section-title-j {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
        color: #ffffff;
    }

    .dot-title-j {
        position: relative;
        padding-left: 12px;
    }

    .dot-title-j::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all ease-in-out .5s;
    }

    .story-profile-j {
        padding-top: 22px;
    }

    .ml3-j {
        width: 100%;
        margin: auto;
        color: #3b3b3b;
        /* start faded */
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 27px;
    }

    .bright-j {
        color: #fff;
        /* full bright white */
    }

    .fade-j {
        color: rgba(255, 255, 255, 0.3);
        /* faded white */
        display: inline-block;
        transition: color 0.3s ease;
    }

    .section-description-j {
        padding-top: 40px;
    }

    .marquee-j {
        position: absolute;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        font-family: "Gilda Display", serif;
        font-weight: 400;
        font-size: 60px;
        color: #999999;
        padding: 10px 0px;
        background-color: #141414;
        z-index: 99;
    }

    .marquee-track-j {
        display: inline-flex;
        width: max-content;
        animation: scroll 30s linear infinite;
    }

    .marquee-track-j .content-j {
        display: flex;
    }

    .marquee-track-j span {
        margin-right: 1rem;
        background-color: #141414;
    }

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

    .video-wrapper {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: #000000;
    }

    .video-iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        height: 10vw;
    }

    .video-iframe iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 12px;
    }

    .ytp-title-text {
        display: none !important;
    }

    .video-iframe iframe {
        transform-origin: center center;
    }

    .video-iframe::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 15%;
        background: black;
        z-index: 3;
    }

    .video-iframe::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 17%;
        /* covers title area */
        background: black;
        z-index: 3;
        animation: hideOverlay 0.1s ease 4.5s forwards;
    }

    @keyframes hideOverlay {
        to {
            opacity: 0;
            visibility: hidden;
        }
    }

    .video-iframe::before {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 130px;
        height: 50px;
        background: black;
        z-index: 3;
        pointer-events: none;
        animation: hiderightOverlay 0.1s ease 4.5s forwards;
    }

    @keyframes hiderightOverlay {
        to {
            opacity: 0;
            visibility: hidden;
        }
    }

    .creator-section-j {
        background-color: #000;
        padding: 0px 0px 108px;
    }

    .creator-title-j {
        font-family: "Inter", sans-serif;
        font-size: 100px;
        font-weight: 600;
        color: #fff;
        width: 920px;
        line-height: 98px;
        text-transform: uppercase;
        text-align: center;
        margin: auto;
        padding-bottom: 105px;
        letter-spacing: -3%;
    }

    .creator-sub-title-j {
        font-family: "Inter", sans-serif;
        font-size: 24px;
        font-weight: 400;
        color: #fff;
        font-style: italic;
        padding-bottom: 20px;
    }

    .rotate-line {
        font-family: "Inter", sans-serif;
        font-size: 100px;
        font-weight: 600;
        letter-spacing: -3%;
        color: #fff;
        display: flex;
        gap: 10px;
    }

    .rotate-line span {
        font-family: "Gilda Display", serif;
        font-size: 110px;
        min-width: 574px;
        font-weight: 400;
        background: linear-gradient(to right, #B780FF 0%, #EDDFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        display: flex;
    }

    .creator-content-section-j {
        max-width: 1212px;
        text-align: left;
        margin: auto;
    }

    .animating-text-j {
        color: #3b3b3b;
        text-align: justify;
        font-family: "Inter", sans-serif;
        font-size: 27px;
        font-weight: 600;
    }

    .animating-text-j div {
        margin-bottom: 15px;
    }

    .animating-text-j span {
        display: inline-block;
        color: #3b3b3b;
        transition: color 0.3s linear;
    }

    .animating-text-j .auto-white {
        color: #fff !important;
    }

    .pad-top-custom {
        padding-top: 120px;
    }
    /* style-new-css--------------------------------------------------------- */

    #fluid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .profile-img-row {
        width: 723px;
        margin: auto;
    }

    .profile-img-row-about {
        width: 600px;
        margin: auto;
    }

    .profile-img {
        width: 100%;
    }

    .banner-image {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .banner-bottom-content {
        margin-top: -220px;
    }

    .bottom-content-about {
        margin-top: -160px !important;
    }

    .story-section-j {
        padding: 0px 0px 62px;
    }

    .tile {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    /* Track pointing device position */

    .tile__pd-tracker {
        z-index: 1;
    }
    /* Grid positioning */

    .tile__pd-tracker:nth-of-type(3n - 2) {
        grid-column: 1 / 2;
    }

    .tile__pd-tracker:nth-of-type(3n - 1) {
        grid-column: 2 / 3;
    }

    .tile__pd-tracker:nth-of-type(3n) {
        grid-column: 3 / 4;
    }

    .tile__pd-tracker:nth-of-type(n+1):nth-of-type(-n+3) {
        grid-row: 1 / 2;
    }

    .tile__pd-tracker:nth-of-type(n+4):nth-of-type(-n+6) {
        grid-row: 2 / 3;
    }

    .tile__pd-tracker:nth-of-type(n+7):nth-of-type(-n+9) {
        grid-row: 3 / 4;
    }
    /* Hover effects for rotation */

    .tile__pd-tracker:nth-of-type(1):hover~.tile__layout {
        --rotate-x: var(--angle);
        --rotate-y: calc(var(--angle) * -1);
    }

    .tile__pd-tracker:nth-of-type(2):hover~.tile__layout {
        --rotate-x: var(--angle);
    }

    .tile__pd-tracker:nth-of-type(3):hover~.tile__layout {
        --rotate-x: var(--angle);
        --rotate-y: var(--angle);
    }

    .tile__pd-tracker:nth-of-type(4):hover~.tile__layout {
        --rotate-y: calc(var(--angle) * -1);
    }

    .tile__pd-tracker:nth-of-type(6):hover~.tile__layout {
        --rotate-y: var(--angle);
    }

    .tile__pd-tracker:nth-of-type(7):hover~.tile__layout {
        --rotate-x: calc(var(--angle) * -1);
        --rotate-y: calc(var(--angle) * -1);
    }

    .tile__pd-tracker:nth-of-type(8):hover~.tile__layout {
        --rotate-x: calc(var(--angle) * -1);
    }

    .tile__pd-tracker:nth-of-type(9):hover~.tile__layout {
        --rotate-x: calc(var(--angle) * -1);
        --rotate-y: var(--angle);
    }
    /* Main tile layout */

    .tile__layout {
        --perspective: 723px;
        --rotate-x: 0;
        --rotate-y: 0;
        --angle: 1deg;
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        transform: perspective(var(--perspective)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
        transition: transform 400ms ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .banner-area {
        width: 100%;
        position: relative;
        display: flex;
        background-color: #000000;
        background-image: url(../images/Banner-shadow.png);
        background-repeat: no-repeat;
        background-position: top right;
    }

    .menu-overlay {
        overflow-x: hidden;
    }

    .banner-bottom-content {
        justify-content: center;
    }

    .first-content {
        position: absolute;
        top: 30px;
        left: 85px;
        width: 383px;
        text-transform: capitalize;
    }

    .scroll-to-explore {
        position: absolute;
        top: 70px;
        right: 85px;
    }

    .menu-overlay,
    .menu-overlay__bg-container {
        background-color: #000;
    }

    .video {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        transition: all 0.5s ease;
    }

    .social-icons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        column-gap: 20px;
        padding-top: 25px;
    }

    .social-icons a {
        display: block;
    }

    .social-icons a img {
        transition: transform 0.5s;
    }

    .social-icons a:hover img {
        transform: translateY(-5px);
    }

    .brnd-box-content a {
        display: block;
        position: relative;
        width: fit-content;
        margin-top: 20px;
        font-family: "Inter", sans-serif;
        color: #C3C3C3;
        font-size: 13px;
        font-weight: 600;
    }

    .brnd-box-content a::after {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url(../images/arrow.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 3px;
        right: -25px;
        transition: rotate 0.5s ease;
    }

    .brnd-box-content a:hover {
        color: #fff;
    }

    .brnd-box-content a:hover::after {
        rotate: 45deg;
    }

    .video-wrapper {
        position: relative;
    }

    .video-link {
        position: absolute;
        bottom: 50px;
        left: 100px;
        z-index: 2;
        color: #fff;
        display: flex;
        align-items: center;
        column-gap: 20px;
        font-size: 18px;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.5s ease;
        text-shadow: 1px 0px 4px rgb(0 0 0 / 74%);
    }

    .video-link img {
        transition: rotate 0.5s ease;
    }

    .video-link:hover img {
        rotate: 45deg;
    }

    .mobile-video-wrapper {
        position: relative;
    }

    .mob-video-link {
        position: absolute;
        bottom: 20px;
        left: 30px;
        z-index: 2;
        color: #fff;
        display: flex;
        align-items: center;
        column-gap: 20px;
        font-size: 16px;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        text-shadow: 1px 0px 4px rgb(0 0 0 / 74%);
    }

    .mob-video-link img {
        transition: rotate 0.5s ease;
    }

    .mob-video-link:hover img {
        rotate: 45deg;
    }

    .quotes-content {
        color: #B7B7B7;
        text-align: center;
        margin: auto;
    }

    .round-news {
        position: relative;
    }

    .circle-after-abt {
        position: relative;
        display: inline-block;
    }

    .circle-after-abt::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-color: #fff;
        border-radius: 50%;
    }

    @media screen and (max-width: 1500px) {
        .baker-small-head {
            font-size: 20px;
        }
        .baker-main-head {
            font-size: 70px;
        }
        .baker-main-head-about {
            font-size: 50px;
        }
        .creator-title-j {
            font-size: 77px;
            line-height: 87px;
        }
        .rotate-line {
            font-size: 77px;
            justify-content: center;
        }
        .rotate-line span {
            font-family: "Gilda Display", serif;
            font-size: 77px;
        }
    }

    @media screen and (max-width: 1400px) {
        .banner-bottom-content {
            padding: 0px 50px 100px 50px;
        }
        .navbar {
            padding: 40px 50px;
        }
        .first-content {
            left: 50px;
        }
        .scroll-to-explore {
            right: 50px;
        }
        .profile-img-row {
            width: 600px;
        }
        .profile-img-row-about {
            width: 600px;
            margin: auto;
        }
        .baker-small-head {
            font-size: 20px;
        }
        .baker-main-head {
            font-size: 64px;
        }
        .baker-main-head-about {
            font-size: 48px;
        }
        .first-content {
            width: 340px;
        }
        .banner-bottom-content {
            margin-top: -170px;
        }
        .bottom-content-about {
            margin-top: -140px !important;
        }
        .creator-title-j {
            width: 100%;
        }
    }

    @media screen and (max-width: 1300px) {
        .profile-img-row {
            width: 500px;
        }
        .profile-img-row-about {
            width: 500px;
            margin: auto;
        }
        .baker-small-head {
            font-size: 18px;
        }
        .baker-main-head {
            font-size: 56px;
        }
        .baker-main-head-about {
            font-size: 40px;
        }
        .banner-bottom-content {
            padding: 0px 30px 100px 30px;
        }
        .navbar {
            padding: 30px 30px;
        }
        .first-content {
            left: 30px;
            top: 10px;
        }
        .scroll-to-explore {
            right: 30px;
            top: 50px;
        }
        .banner-bottom-content {
            margin-top: -140px;
        }
        .bottom-content-about {
            margin-top: -100px !important;
        }
    }

    @media screen and (max-width: 1200px) {
        .baker-main-head {
            font-size: 60px;
            line-height: 50px;
        }
        .first-content {
            width: 290px;
        }
        .menu-overlay__bg-img img {
            left: -100px;
        }
        .rotate-line {
            font-size: 55px;
            justify-content: right;
        }
        .rotate-line span {
            font-family: "Gilda Display", serif;
            font-size: 55px;
        }
        .creator-title-j {
            font-size: 55px;
            line-height: 65px;
        }
        .video-link {
            bottom: 35px;
            left: 50px;
        }
    }

    @media screen and (max-width: 1024px) {
        .scroll-to-explore {
            display: none;
        }
        .banner-bottom-content {
            flex-wrap: wrap;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
            margin-top: -90px;
        }
        .first-content {
            width: 60%;
            margin: auto;
            text-align: center;
            margin-top: 15px;
            position: initial;
        }
        .desktop-menu-profile {
            display: none;
        }
        .menu-overlay__links {
            width: 100%;
        }
    }

    @media screen and (max-width: 992px) {
        .first-content {
            width: 80%;
        }
        .menu-text {
            display: none;
        }
        .navbar .menu-bar {
            width: fit-content;
            padding: 10px 20px;
        }
        .menu-overlay__main ul a,
        .menu-overlay__main ul li {
            font-size: 70px;
            line-height: 82px;
        }
        .banner-bottom-content {
            padding: 0px 30px 80px 30px;
        }
        .rotate-line span {
            min-width: 500px;
        }
        .creator-title-j {
            padding-bottom: 40px;
        }
    }

    @media screen and (max-width: 850px) {
        .creator-title-j {
            font-size: 40px;
            line-height: 55px;
        }
        .rotate-line {
            font-size: 40px;
            justify-content: right;
        }
        .rotate-line span {
            font-family: "Gilda Display", serif;
            font-size: 40px;
        }
        .rotate-line span {
            min-width: 430px;
        }
        .animating-text-j {
            font-size: 19px;
        }
    }

    @media screen and (max-width: 800px) {
        .rotate-line span {
            min-width: 380px;
        }
    }

    @media screen and (max-width: 767px) {
        .first-content {
            width: 100%;
        }
        .menu-overlay__main ul a,
        .menu-overlay__main ul li {
            font-size: 58px;
            line-height: 50px;
        }
        .banner-bottom-content {
            padding: 0px 30px 60px 30px;
        }
    }

    @media screen and (max-width: 575px) {
        .profile-img-row {
            width: 90%;
            margin: auto;
        }
        .profile-img-row-about {
            width: 90%;
            margin: auto;
        }
        .baker-small-head {
            font-size: 16px;
        }
        .baker-main-head {
            font-size: 46px;
            line-height: 40px;
        }
        .baker-main-head-about {
            font-size: 40px;
            line-height: 38px;
        }
        .menu-overlay__main ul a,
        .menu-overlay__main ul li {
            font-size: 35px;
            line-height: 45px;
        }
        .name-ftr {
            font-size: 22px;
        }
        #menu-toggle {
            width: 25px;
            height: 25px;
        }
        #menu-toggle {
            span {
                width: 25px;
                height: 2px;
            }
        }
        .banner-bottom-content {
            padding: 0px 20px 50px 20px;
        }
        .navbar {
            padding: 30px 20px;
        }
        .rotate-line span {
            min-width: 300px;
        }
        .creator-section-j {
            background-color: #000;
            padding: 0px 0px 30px;
        }
        .marquee-j {
            position: relative;
            font-size: 26px;
        }
        .award-head {
            font-family: "Gilda Display", serif;
            font-size: 33px;
            font-weight: 400;
            line-height: 37px;
        }
    }

    @media screen and (max-width: 520px) {
        .rotate-line span {
            min-width: 250px;
        }
        .creator-sub-title-j {
            font-family: "Inter", sans-serif;
            font-size: 22px;
        }
    }

    @media screen and (max-width: 415px) {
        .rotate-line span {
            min-width: 200px;
        }
        .rotate-line {
            font-size: 35px;
            justify-content: right;
        }
        .rotate-line span {
            font-family: "Gilda Display", serif;
            font-size: 35px;
        }
        .creator-title-j {
            font-size: 35px;
            line-height: 45px;
        }
        .social-icons {
            padding-top: 15px;
            column-gap: 10px;
        }
        .copy-right {
            padding-top: 15px;
        }
        .social-icons a img {
            width: 100%;
        }
        .social-icons a {
            width: 22px;
            height: 22px;
        }
    }
    /* vysakh-section-css--------------------------------------------------------------------------------------------------------- */

    .mobile-video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio */
        overflow: hidden;
        background: #000;
    }

    .mobile-video-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        pointer-events: none;
        /* disables clicking (no pause/play possible) */
    }
    /* --- Animation classes --- */

    .animate-on-scroll {
        transform: translateY(50px);
        transition: transform 1s ease;
    }

    .animate-on-scroll.active {
        transform: translateY(0);
    }

    @media (max-width:1920px) {}

    @media (max-width:1915px) {
        .ftr-big-head {
            font-size: 340px;
        }
    }

    @media (max-width:1700px) {
        .ftr-big-head {
            font-size: 275px;
            line-height: 300px;
        }
    }

    @media (max-width:1650px) {
        .ml3-j {
            font-size: 22px;
        }
        .section-content-j {
            column-gap: 20px;
        }
    }

    @media (max-width:1600px) {
        .section-container-j {
            padding-left: 80px;
            padding-right: 80px;
        }
        .ftr-content-area {
            padding-left: 80px;
            padding-right: 80px;
        }
    }

    @media (max-width:1500px) {
        .team-area {
            height: 600px;
        }
    }

    @media (max-width:1450px) {
        .ml3-j {
            font-size: 18px;
        }
        .pad-top-sec {
            padding-top: 100px;
        }
        .trendsetter-area {
            padding-top: 70px;
        }
    }

    @media (max-width:1366px) {
        .section-container-j {
            padding-left: 50px;
            padding-right: 50px;
        }
        .ftr-content-area {
            padding-left: 50px;
            padding-right: 50px;
        }
    }

    @media (max-width:1360px) {
        .ftr-big-head {
            font-size: 210px;
        }
    }

    @media (max-width:1250px) {
        .section-content-j {
            flex-direction: column;
        }
        .ml3-j {
            font-size: 23px;
        }
        .section-description-j {
            padding-top: 10px;
        }
        .profile-img-width {
            width: 100%;
        }
        .team-area {
            height: 500px;
        }
    }

    @media (max-width:1100px) {
        .trend-content {
            width: 85%;
        }
    }

    @media (max-width:1024px) {
        .pad-top-sec {
            padding-top: 50px;
        }
        .ftr-big-head {
            font-size: 163px;
        }
        .ftr-big-head {
            margin-bottom: -101px;
        }
    }

    @media (max-width:991px) {
        .team-area {
            height: 320px;
        }
    }

    @media (max-width:767px) {
        .first-trend {
            display: none;
        }
        .second-trend {
            display: flex;
        }
        .name-ftr {
            font-size: 20px;
        }
        .contact-ftr-text {
            font-size: 16px;
        }
        .ftr-num {
            font-size: 16px;
        }
        .copy-right {
            padding-top: 25px;
        }
        .ftr-big-head {
            padding-top: 0px;
        }
        .team-area {
            height: 280px;
        }
    }

    @media (min-width:767px) {
        .first-trend {
            display: flex;
        }
        .second-trend {
            display: none;
        }
    }

    @media (max-width:770px) {
        .ftr-big-head {
            font-size: 110px;
        }
        .ftr-big-head {
            margin-bottom: -126px;
        }
        .ftr-big-head {
            line-height: 200px;
        }
        .ftr-big-head {
            margin-bottom: -70px;
            letter-spacing: 0px;
        }
    }

    @media (max-width:767px) {
        .section-container-j {
            padding-left: 20px;
            padding-right: 20px;
        }
        .ftr-content-area {
            padding-left: 20px;
            padding-right: 20px;
        }
        .award-slider-wrapper {
            margin-bottom: 20px !important;
        }
        .trend-content {
            font-size: 18px;
        }
        .bake-mart-text {
            font-size: 25px;
            margin-top: 0px;
        }
        .main-vid-sec {
            display: none;
        }
        .mob-vid-sec {
            display: flex;
        }
        .pad-top-custom {
            padding-top: 90px;
        }
    }

    @media (min-width:767px) {
        .main-vid-sec {
            display: block;
        }
        .mob-vid-sec {
            display: none;
        }
    }

    @media (max-width:620px) {
        .team-area {
            height: 250px;
        }
    }

    @media (max-width:590px) {
        .ftr-big-head {
            font-size: 77px;
        }
        .ftr-big-head {
            margin-bottom: -86px;
        }
        .team-area {
            height: 210px;
        }
    }

    @media (max-width:575px) {
        .ml3-j {
            font-size: 21px;
        }
        .section-container-j {
            padding-left: 15px;
            padding-right: 15px;
        }
        .ftr-content-area {
            padding-left: 15px;
            padding-right: 15px;
        }
        .res-heading {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0px;
        }
        .res-head-second {
            line-height: 38px;
        }
        .trend-content {
            padding-top: 20px;
        }
        .trend-content {
            text-align: left;
        }
        .trend-content {
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
        }
        .res-head-first {
            justify-content: center;
        }
        .res-head-second {
            justify-content: center;
        }
        .team-area {
            height: 185px;
        }
        .pad-top-custom {
            padding-top: 70px;
        }
    }

    @media (max-width:410px) {
        .ftr-big-head {
            font-size: 66px;
        }
        .res-head-first {
            font-size: 25px;
        }
        .name-ftr {
            font-size: 18px;
        }
        .stars-head {
            align-items: center;
        }
        .ftr-head {
            align-items: center;
        }
        .team-area {
            height: 140px;
        }
    }
    /* jithin-css-jc--------------------------------------------------------- */

    @media (min-width: 1300px) {
        .legacy-section {
            gap: 80px;
        }
        .brand-box {
            flex-direction: row;
        }
        .brnd-box-content {
            flex: 2.5;
        }
    }

    @media (min-width: 1500px) {
        .brand-box {
            padding: 40px 35px;
        }
    }

    @media (min-width: 1600px) {
        .legacy-section {
            padding: 70px 130px 70px 70px;
        }
        .brand-area-section {
            padding: 80px 80px;
        }
        .pad-right-cmn {
            padding-right: 50px;
        }
        .comn-area-same {
            gap: 50px;
        }
        .brand {
            gap: 30px;
        }
    }

    @media (min-width: 1900px) {
        .brand-area-section {
            padding: 80px 100px;
        }
        .brand-box {
            padding: 44px 50px;
        }
        .pad-right-cmn {
            padding-right: 100px;
        }
        .comn-area-same {
            gap: 80px;
        }
        .brand {
            gap: 50px;
        }
    }

    @media (max-width: 1023px) {
        .text-area {
            width: 60%;
        }
        .image-area {
            width: 40%;
        }
        .image-slider {
            flex-direction: column;
        }
        .legacy-section {
            gap: 30px;
        }
        .sticky-head {
            font-size: 30px;
            width: 100%;
        }
        .image-slider .slide.pad-btm {
            padding-top: 0;
        }
        .brand-grid {
            flex-wrap: wrap;
        }
        .brand-box {
            width: 300px;
        }
        .brand-container {
            display: none;
        }
        .mob-brand-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        .mob-brand {
            background-color: rgba(20, 20, 20, 1);
            border-radius: 8px;
            padding: 30px;
            display: flex;
            gap: 30px;
            justify-content: center;
            align-items: center;
        }
        .mob-num {
            color: #4C4C4C;
            font-weight: 400;
            font-size: 22px;
            font-family: "Inter", sans-serif;
            display: flex;
            margin: auto;
            opacity: 1;
        }
        .mob-brand-details {
            display: flex;
            flex-direction: column;
        }
        .mob-brand-name {
            font-weight: 600;
            color: #ffffff;
            font-size: 22px;
            font-family: "Inter", sans-serif;
            opacity: 1;
            transition: all 0.4s ease;
        }
        /* .mob-band-value-content {font-weight:400; color:#8f8f8f; font-size:16px; font-family:"Inter", sans-serif; opacity:0; max-height:0; overflow:hidden; transition:all 0.4s ease;} */
        .mob-band-value-content {
            font-weight: 400;
            color: #8f8f8f;
            font-size: 16px;
            font-family: "Inter", sans-serif;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            line-height: 1.5;
            transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease 0.1s;
        }
        .mob-brand.active .mob-band-value-content {
            opacity: 1;
            max-height: 500px;
        }
        .mob-brand-img {
            width: 350px;
            filter: grayscale(100%);
            transition: all 0.4s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .mob-brand.active .mob-brand-img {
            filter: grayscale(0);
        }
    }

    @media (max-width: 767px) {
        .image-slider {
            flex-direction: row;
            gap: 5px;
        }
        .legacy-section {
            flex-direction: column-reverse;
            padding: 40px 20px;
        }
        .text-area {
            width: 100%;
        }
        .image-area {
            width: 100%;
        }
        .image-slider .slide.pad-btm {
            padding-top: 30px;
        }
        .slide {
            gap: 5px;
        }
        .img-hdn-sm {
            display: none;
        }
        .brand-area-section {
            padding: 40px 20px;
        }
        .brand-box {
            width: 100%;
            flex-direction: row;
        }
        .brnd-box-content {
            flex: 2.5;
        }
    }

    @media (max-width: 575px) {
        .legacy-section {
            padding: 30px 15px;
        }
        .sticky-head {
            font-size: 20px;
            line-height: 30px;
            padding-bottom: 15px;
        }
        .brand-area-section {
            padding: 30px 15px;
        }
        .brand-box {
            flex-direction: column;
            padding: 20px;
        }
        .brnd-box-content {
            flex: 1;
        }
        .brand-heads,
        .created-heads {
            font-size: 32px;
        }
        .mob-brand {
            padding: 15px;
            gap: 20px;
            min-height: 100px;
        }
        .mob-num {
            font-size: 16px;
        }
        .mob-brand-name {
            font-size: 17px;
            font-weight: 500;
        }
        .mob-band-value-content {
            font-size: 14px;
        }
    }

    @media (max-width: 575px) {
        .res-heading {
            display: flex;
        }
    }

    @media (min-width: 575px) {
        .res-heading {
            display: none;
        }
    }

    .copy-right {
        text-decoration: none;
    }
    /* about0area---------------------- */

    .banner-area-about {
        width: 100%;
        position: relative;
        display: flex;
        background-color: #000000;
        background-repeat: no-repeat;
    }

    .baker-small-head-about {
        font-weight: 500;
        color: #ffffff;
        font-size: 14px;
        font-family: "Inter", sans-serif;
    }

    .bg-black-abt {
        background-color: #000000;
    }

    .about-big-head {
        font-weight: 700;
        color: #2f2f2f;
        font-size: 180px;
        line-height: 180px;
        font-family: "Inter", sans-serif;
        padding-bottom: 40px;
        display: flex;
        justify-content: center;
    }

    .journy-section-v {
        padding-top: 70px;
        padding-bottom: 70px;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .journy-area-v {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 300px;
    }

    .journy-img-sec-v {
        width: 35%;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .journy-img-head {
        font-weight: 600;
        color: #ffffff;
        font-size: 28px;
        font-family: "Inter", sans-serif;
        padding-left: 25px;
        line-height: 30px;
        /* Space for the circle */
    }

    .journy-img-head::after {
        content: "";
        position: absolute;
        left: 0;
        top: 4%;
        width: 12px;
        height: 12px;
        background-color: #ffffff;
        border-radius: 50%;
        transform: translateY(-50%);
    }

    .journy-content-area {
        width: 65%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .journy-content-head {
        font-weight: 600;
        color: #ffffff;
        font-size: 22px;
        font-family: "Inter", sans-serif;
        padding-bottom: 10px;
    }

    .journy-content-content {
        font-weight: 600;
        color: #B7B7B7;
        font-size: 18px;
        font-family: "Inter", sans-serif;
    }

    .line-clr {
        background-color: #000000;
        color: #1c1c1c;
        margin: 0px;
        opacity: 1;
    }

    .journy-content-list {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .content-img-same {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .points-v {
        font-weight: 500;
        color: #B7B7B7;
        font-size: 20px;
        font-family: "Inter", sans-serif;
        display: flex;
        align-items: center;
    }

    .pad-threes {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .pad-ones {
        padding-top: 20px;
        padding-bottom: 8px;
    }

    .pad-twos {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .btm-line-common-v {
        border-bottom: 1px solid #414141;
    }

    .achievement-head {
        font-weight: 700;
        color: #2F2F2F;
        font-size: 246px;
        font-family: "Inter", sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .first-achievement {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 145px;
        padding-bottom: 100px;
        overflow: hidden;
    }
    /* LEFT to RIGHT animation (already used) */

    .fade-left-animation {
        opacity: 0;
        transform: translateX(-80px);
        transition: all 1.2s ease-out;
    }

    .fade-left-active {
        opacity: 1;
        transform: translateX(0);
    }
    /* RIGHT to LEFT animation (for second-achieve) */

    .fade-right-animation {
        opacity: 0;
        transform: translateX(80px);
        transition: all 1.2s ease-out;
    }

    .fade-right-active {
        opacity: 1;
        transform: translateX(0);
    }

    .second-achieve {
        justify-content: end;
    }

    .first-achievment-contents {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 29%;
    }

    .first-achievment-contents-head {
        font-weight: 600;
        color: #ffffff;
        font-size: 32px;
        line-height: 35px;
        font-family: "Inter", sans-serif;
        display: flex;
    }

    .first-achievment-contents-des {
        font-weight: 500;
        color: #ffffff;
        font-size: 18px;
        line-height: 25px;
        font-family: "Inter", sans-serif;
        display: flex;
    }

    .pad-eightee {
        padding-top: 80px;
    }

    .jus-lef {
        text-align: left !important;
    }
    /* grid-image-area------ */

    .grid-img {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        padding-top: 80px;
    }

    .col5_col4lg_col3-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, 1fr);
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width: 1366px) {
            grid-template-columns: repeat(4, 1fr);
        }
        @media (max-width: 1200px) {
            grid-template-columns: repeat(4, 1fr);
            .spanItem {
                grid-column: span 2;
            }
        }
        @media (max-width: 991px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 575px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .gallery-grids {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        border: 1px solid rgb(24, 24, 24);
    }

    .img-pad {
        padding: 30px 0px;
    }

    .show-case-area {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .date-clr {
        color: #B7B7B7;
    }

    .banner-one-abs,
    .banner-two-abs,
    .banner-three-abs,
    .banner-four-abs,
    .banner-five-abs,
    .banner-six-abs {
        position: absolute;
        opacity: 0;
        transform: translateY(50px);
        animation: fadeUp 1.5s ease-out forwards, floatUp 6s ease-in-out infinite;
    }
    /* Fade-in + bottom-to-top animation (runs once) */

    @keyframes fadeUp {
        0% {
            opacity: 0;
            transform: translateY(50px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Infinite smooth floating animation */

    @keyframes floatUp {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-25px);
        }
        100% {
            transform: translateY(0);
        }
    }
    /* Individual positions + staggered fade delays */

    .banner-one-abs {
        left: 0px;
        top: 200px;
        animation-delay: 0s, 1.5s;
        /* fadeUp first, then floatUp starts */
    }

    .banner-two-abs {
        left: 270px;
        top: 480px;
        animation-delay: 0.3s, 1.8s;
    }

    .banner-three-abs {
        left: 0px;
        bottom: 80px;
        animation-delay: 0.6s, 2.1s;
    }

    .banner-four-abs {
        right: 0px;
        top: 178px;
        animation-delay: 0.9s, 2.4s;
    }

    .banner-five-abs {
        right: 370px;
        top: 440px;
        animation-delay: 1.2s, 2.7s;
    }

    .banner-six-abs {
        right: 0px;
        bottom: 80px;
        animation-delay: 1.5s, 3s;
    }
    /* animation-section----------- */
    /* Initial state */
    /* Animation base */

    .fade-up-anim {
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.8s ease-out;
    }
    /* Active animation state */

    .fade-up-anim.active {
        opacity: 1;
        transform: translateY(0);
    }

    .fade-journy {
        opacity: 0;
        transform: translateY(40px);
        transition: all 1s ease-out;
    }

    .fade-journy.show-journy {
        opacity: 1;
        transform: translateY(0);
    }
    /* sdetail-page-------------------------------------- */

    .detail-page-container {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 370px;
        padding-right: 370px;
    }

    .date-sahpe {
        width: fit-content;
        background-color: #1A1A1A;
        border-radius: 50px;
        padding: 6px 16px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
    }

    .description-clr {
        color: #B7B7B7;
    }

    .related-section {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
        padding-top: 20px;
    }

    .col5_col4lg_col3-related {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        gap: 58px;
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width: 1366px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        @media (max-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
            .spanItem {
                grid-column: span 2;
            }
        }
        @media (max-width: 991px) {
            grid-template-columns: repeat(3, 1fr);
        }
        @media (max-width: 700px) {
            grid-template-columns: repeat(1, 1fr);
            gap: 40px;
        }
        @media (max-width: 575px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .related-content {
        color: #B7B7B7;
    }

    .read-more-main {
        align-items: center;
        cursor: pointer;
    }

    .read-more-main .read-arrow {
        margin-left: 8px;
        transition: transform 0.4s ease;
    }

    .read-more-main:hover .read-arrow {
        transform: translateX(10px);
    }

    .news-banner-head {
        font-size: 72px;
        font-family: "Gilda Display", serif;
    }

    .bg-shade-area {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: -50px;
    }

    .bg-shade {
        width: 900px;
    }

    .banner-pading {
        padding-bottom: 200px;
        padding-top: 200px;
    }

    .name_truncats {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .para_truncats {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .main-news-area {
        justify-content: space-between;
    }

    .news-line {
        color: #b1b1b1;
        margin-bottom: 40px;
        margin-top: 40px;
        background-color: #000000 !important;
    }

    .new-small-sec-gap {
        gap: 40px;
    }

    .line-for-sep {
        border-bottom: 1px solid #2c2c2c;
    }

    @media (max-width:1850px) {
        .about-big-head {
            font-size: 140px;
        }
        .achievement-head {
            font-size: 185px;
        }
        .journy-area-v {
            gap: 200px;
        }
    }

    @media (max-width:1600px) {
        .banner-two-abs {
            left: 229px;
        }
        .banner-five-abs {
            right: 269px;
        }
        .banner-one-abs {
            width: 100px;
        }
        .banner-two-abs {
            width: 150px;
        }
        .banner-three-abs {
            width: 250px;
            bottom: 184px;
        }
        .banner-four-abs {
            width: 200px;
        }
        .banner-five-abs {
            width: 130px;
        }
        .banner-six-abs {
            width: 250px;
            bottom: 184px;
        }
        .detail-page-container {
            padding-left: 250px;
            padding-right: 250px;
        }
        .banner-pading {
            padding-bottom: 150px;
            padding-top: 150px;
        }
    }

    @media (max-width:1500px) {
        .profile-img-row-about {
            width: 550px;
            margin: auto;
        }
        .banner-two-abs {
            top: 407px;
        }
        .banner-five-abs {
            right: 212px;
        }
        .banner-five-abs {
            top: 387px;
        }
        .journy-area-v {
            gap: 100px;
        }
        .about-big-head {
            font-size: 100px;
        }
        .achievement-head {
            font-size: 146px;
            line-height: 160px;
            padding-bottom: 50px;
        }
        .journy-img-head {
            font-size: 23px;
        }
        .first-achievment-contents {
            width: 70%;
        }
        .second-achieve {
            justify-content: start;
        }
        .awrd-img {
            width: 300px;
        }
        .detail-page-container {
            padding-left: 150px;
            padding-right: 150px;
        }
    }

    @media (max-width:1366px) {
        .first-achievment-contents {
            width: 60%;
        }
        .first-achievement {
            gap: 0px;
        }
        .first-achievement {
            justify-content: space-between;
        }
        .awrd-img {
            width: 100%;
        }
        .detail-page-container {
            padding-left: 50px;
            padding-right: 50px;
        }
    }

    @media (max-width:1200px) {
        .banner-two-abs {
            width: 120px;
        }
        .profile-img-row-about {
            width: 490px;
            margin: auto;
        }
        .banner-two-abs {
            top: 365px;
        }
        .banner-two-abs {
            left: 190px;
        }
        .banner-five-abs {
            top: 348px;
            width: 110px;
        }
        .journy-area-v {
            gap: 52px;
        }
        .pad-eightee {
            padding-top: 40px;
        }
        .grid-img {
            padding-top: 0px;
        }
        .first-achievement {
            padding-bottom: 50px;
        }
        .about-big-head {
            line-height: 75px;
        }
        .bg-shade {
            width: 650px;
        }
        .news-banner-head {
            font-size: 50px;
            font-family: "Gilda Display", serif;
        }
    }

    @media (max-width:1100px) {
        .first-achievement {
            gap: 50px;
        }
    }

    @media (max-width:1050px) {
        .banner-one-abs {
            display: none;
        }
        .banner-two-abs {
            display: none;
        }
        .banner-three-abs {
            display: none;
        }
        .banner-four-abs {
            display: none;
        }
        .banner-five-abs {
            display: none;
        }
        .banner-six-abs {
            display: none;
        }
        .about-big-head {
            font-size: 72px;
        }
        .achievement-head {
            font-size: 97px;
            line-height: 160px;
            padding-bottom: 50px;
        }
        .first-achievment-contents-des {
            font-size: 16px;
            line-height: 22px;
        }
    }

    @media (max-width:991px) {
        .first-achievment-contents-head {
            font-size: 25px;
            line-height: 24px;
        }
        .banner-pading {
            padding-bottom: 100px;
            padding-top: 100px;
        }
    }

    @media (max-width:767px) {
        .journy-area-v {
            flex-direction: column;
        }
        .journy-img-sec-v {
            width: 100%;
        }
        .journy-content-area {
            width: 100%;
        }
        .first-achievement {
            flex-direction: column;
        }
        .first-achievment-contents {
            width: 100%;
        }
        .about-big-head {
            font-size: 55px;
        }
        .achievement-head {
            font-size: 70px;
            line-height: 100px;
            padding-bottom: 20px;
        }
        .profile-img-row-about {
            width: 385px;
            margin: auto;
        }
        .first-achievment-contents-des {
            font-size: 15px;
            line-height: 26px;
        }
        .detail-page-container {
            padding-left: 20px;
            padding-right: 20px;
        }
        .bg-shade {
            width: 515px;
        }
        .bg-shade-area {
            margin-top: -20px;
        }
    }

    @media (max-width:575px) {
        .awrd-img {
            width: 100%;
        }
        .img-pad {
            height: 150px;
            width: fit-content;
            max-width: 100%;
            padding: 15px 10px;
        }
        .profile-img-row-about {
            width: 323px;
            margin: auto;
        }
        .journy-section-v {
            padding-top: 30px;
            padding-bottom: 30px;
        }
        .about-big-head {
            line-height: 28px;
        }
        .journy-img-head {
            font-size: 19px;
        }
        .points-v {
            font-size: 16px;
        }
        .journy-content-content {
            font-size: 16px;
        }
        .achievement-head {
            font-size: 60px;
            line-height: 75px;
            padding-bottom: 0px;
            padding-bottom: 20px;
        }
        .first-achievement {
            gap: 20px;
        }
        .first-achievment-contents-head {
            padding-bottom: 20px;
        }
        .about-big-head {
            font-family: "Inter", sans-serif;
            padding-bottom: 10px;
        }
        .journy-img-head::after {
            top: 4%;
        }
        .journy-img-head {
            line-height: 21px;
        }
        .content-img-same {
            flex-direction: column-reverse;
            gap: 10px;
        }
        .icon-img {
            width: 60px;
        }
        .pad-twos {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .pad-threes {
            padding-top: 12px;
            padding-bottom: 12px;
        }
        .bg-shade {
            width: 358px;
        }
        .news-banner-head {
            font-size: 36px;
            font-family: "Gilda Display", serif;
        }
        .banner-pading {
            padding-bottom: 100px;
            padding-top: 60px;
        }
        .about-big-head {
            font-size: 40px;
        }
    }

    @media (max-width:450px) {
        .news-banner-head {
            font-size: 30px;
            padding-top: 10px;
        }
        .bg-shade {
            width: 320px;
        }
        .achievement-head {
            font-size: 50px;
            line-height: 60px;
        }
    }

    @media (max-width:400px) {
        .about-big-head {
            font-size: 35px;
        }
    }
    /******************Gallery-page********************/

    .banner-center-content .section-title-j {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    .banner-content {
        color: #B7B7B7;
        font-weight: 600;
        font-size: 18px;
        font-family: "Inter", sans-serif;
        width: 45%;
        margin-left: auto;
        margin-right: auto;
    }

    .banner-main-head {
        font-family: "Gilda Display", serif;
        font-size: 72px;
        font-weight: 400;
        color: #ffffff;
        line-height: 60px;
    }

    .banner-center-content {
        padding-top: 238px;
        padding-bottom: 140px;
    }

    .gallery-section {
        background-color: #000000;
        padding-top: 125px;
        padding-bottom: 225px;
    }
    /* Style the tab */

    .tab-button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 15px;
        column-gap: 12px;
        padding-bottom: 56px;
    }
    /* Change background color of buttons on hover */

    .tab-button button:hover {
        background-color: #2B2B2B;
    }
    /* Create an active/current tablink class */

    .tab-button button.active {
        background-color: #2B2B2B;
    }
    /* Style the tab content */

    .tabcontent {
        display: none;
    }

    .tablinks {
        background-color: transparent;
        border: 1px solid #525252;
        border-radius: 40px;
        color: #FFF;
        font-weight: 600;
        font-size: 18px;
        font-family: "Inter", sans-serif;
        padding: 7px 20px;
    }

    .tablinks.active {
        background-color: #2B2B2B;
    }

    .gallery-content-sec {
        display: flex;
        flex-direction: row;
        display: grid;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
    }

    .gallery-col5_col4lg_col3sm {
        grid-auto-flow: row;
        gap: 16px 16px;
        grid-template-columns: repeat(4, 1fr);
        .spanItem {
            grid-column: span 2;
        }
        @media (max-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
            .spanItem {
                grid-column: span 2;
            }
        }
        @media (max-width: 991px) {
            grid-template-columns: repeat(3, 1fr);
        }
        @media (max-width: 820px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 575px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .tabcontent .gallery-content-sec img {
        width: 100%;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .tabcontent .gallery-content-sec .img-box {
        width: 100%;
        overflow: hidden;
        border-radius: 6px;
    }

    .tabcontent .gallery-content-sec .img-box:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .gallery-pg .banner-area {
        background-image: url(../images/gallery/shadow.png);
    }

    @media (max-width: 1366px) {
        .banner-main-head {
            font-size: 64px;
            line-height: 50px;
            letter-spacing: -0.5px;
        }
        .banner-center-content .section-title-j {
            margin-bottom: 15px;
        }
        .banner-content {
            width: 62%;
        }
        .gallery-section {
            padding-top: 100px;
            padding-bottom: 200px;
        }
    }

    @media (max-width: 1200px) {
        .banner-main-head {
            font-size: 54px;
            line-height: 40px;
            padding-left: 10px;
            padding-right: 10px;
        }
        .banner-content {
            width: 68%;
        }
        .banner-center-content {
            padding-top: 190px;
            padding-bottom: 100px;
        }
        .gallery-section {
            padding-top: 80px;
            padding-bottom: 170px;
        }
    }

    @media (max-width: 992px) {
        .banner-main-head {
            font-size: 44px;
            line-height: 30px;
        }
        .banner-content {
            width: 68%;
        }
        .banner-center-content {
            padding-top: 170px;
            padding-bottom: 80px;
        }
        .gallery-section {
            padding-top: 70px;
            padding-bottom: 150px;
        }
    }

    @media (max-width: 840px) {
        .banner-main-head {
            font-size: 40px;
            line-height: 45px;
        }
        .banner-content {
            width: 80%;
        }
        .banner-center-content {
            padding-top: 130px;
            padding-bottom: 80px;
        }
        .gallery-section {
            padding-top: 60px;
            padding-bottom: 140px;
        }
    }

    @media (max-width: 767px) {
        .banner-content {
            width: 90%;
        }
        .banner-center-content {
            padding-top: 70px;
            padding-bottom: 80px;
        }
        .gallery-section {
            padding-bottom: 100px;
        }
    }

    @media (max-width: 620px) {
        .banner-center-content {
            padding-top: 60px;
            padding-bottom: 70px;
        }
        .banner-content {
            font-size: 16px;
        }
        .gallery-section {
            padding-bottom: 80px;
        }
    }

    @media (max-width: 575px) {
        .gallery-section {
            padding-top: 40px;
            padding-bottom: 70px;
        }
    }

    @media (max-width: 420px) {
        .banner-main-head {
            font-size: 36px;
            line-height: 40px;
        }
        .banner-center-content {
            padding-top: 60px;
            padding-bottom: 60px;
        }
        .banner-content {
            width: 85%;
        }
        .banner-main-head {
            padding-left: 15px;
            padding-right: 15px;
        }
        .tab-button {
            row-gap: 10px;
            column-gap: 5px;
            padding-bottom: 40px;
        }
        .tablinks {
            font-size: 16px;
            padding: 7px 14px;
        }
    }
    /******************Gallery-page********************/
    /******************ventures-pg********************/

    .ventures-pg .banner-area {
        background-image: none;
    }

    .light-banner {
        width: 100%;
    }

    .banner-light-section {
        position: relative;
        margin-top: 50px;
    }

    .banner-light-section .banner-center-content {
        position: absolute;
        top: 25%;
        left: 0px;
        right: 0px;
        margin: auto;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    @keyframes slides {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }

    .logos {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        background-color: #000000;
    }

    .logo_items {
        display: inline-block;
        animation: 35s slides infinite linear;
    }

    .logos:hover .logo_items {
        animation-play-state: paused;
    }

    .logo_items img {
        margin-left: 50px;
        margin-right: 50px;
    }

    .accordion-section {
        padding-top: 138px;
        padding-bottom: 38px;
        background-color: #000;
    }

    .accordion-section .sub-title {
        color: #FFF;
        font-weight: 600;
        font-size: 32px;
        font-family: "Inter", sans-serif;
        padding-bottom: 42px;
    }

    .accordion-row .accordion-item,
    .accordion-row .accordion-button {
        background-color: transparent;
        border: 0px;
    }

    .accordion-row .accordion-item {
        padding: 54px 0px 54px;
        border-top: 1px solid #2C2C2C;
    }

    .accordion-row .accordion-collapse,
    .accordion-row .accordion-body,
    .accordion-row .accordion-button:not(.collapsed) {
        border: 0px;
        outline: 0px;
        box-shadow: none;
    }

    .accordion-row .accordion-flush>.accordion-item:first-child {
        border-top: 1px solid #2C2C2C;
    }

    .accordion-row .accordion-button {
        padding: 0px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 100px;
    }

    .accordion-row .accordion-button .discover-btn img {
        transition: transform 0.3s ease;
    }

    /* .accordion-row .accordion-button:hover .discover-btn img {
        transform: translateX(6px);
    } */

    .accordion-row .accordion-button::after {
        display: none;
    }

    .accordion-row .accordion-button:focus {
        box-shadow: 0px 0px 0px 0px;
    }

    .accordion-row .accordion-button:focus-visible {
        outline: 0px;
    }

    .accordion-btn-title {
        color: #FFF;
        font-weight: 600;
        font-size: 20px;
        font-family: "Inter", sans-serif;
        padding-bottom: 10px;
    }

    .accordion-btn-detail {
        color: #B7B7B7;
        font-weight: 500;
        font-size: 15px;
        font-family: "Inter", sans-serif;
        width: 88%;
    }

    .discover-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 10px;
        color: #FFF;
        font-weight: 600;
        font-size: 20px;
        font-family: "Inter", sans-serif;
    }

    .accordion-row .accordion-body {
        padding: 42px 0px 0px;
        color: #B7B7B7;
        font-weight: 500;
        font-size: 15px;
        font-family: "Inter", sans-serif;
    }

    .inside-title {
        font-weight: 600;
        font-size: 20px;
        font-family: "Inter", sans-serif;
    }

    .accordion-section.bottom-accordion {
        padding-bottom: 205px;
        padding-top: 22px;
    }

    .bottom-accordion .accordion-item:last-child {
        padding-bottom: 0px;
    }

    .accordion-collapse {
        transition: height 0.6s ease;
        overflow: hidden;
    }

    .accordion-collapse.collapsing {
        height: 0;
        opacity: 1;
    }

    .accordion-collapse.collapse.show {
        height: auto;
        opacity: 1;
        transition: height 0.6s ease;
    }

    .accordion-body {
        transition: opacity 0.4s ease;
    }
     .accordion-button .discover-btn img {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }

    .accordion-button.collapsed .discover-btn img {
        transform: rotate(0deg);
    }
    @media (max-width: 1200px) {
        .banner-light-section {
            margin-top: 10px;
        }
        .accordion-section.bottom-accordion {
            padding-bottom: 160px;
        }
        .accordion-btn-detail {
            width: 100%;
        }
        .accordion-section {
            padding-top: 100px;
        }
    }

    @media (max-width:992px) {
        .banner-light-section {
            margin-top: 0px;
        }
        .logo_items img {
            max-width: 120px;
        }
        .accordion-section.bottom-accordion {
            padding-bottom: 130px;
        }
        .accordion-row .accordion-button {
            column-gap: 50px;
        }
        .accordion-row .accordion-item {
            padding: 34px 0px 34px;
        }
        .accordion-row .accordion-body {
            padding: 32px 0px 0px;
        }
    }

    @media (max-width: 880px) {
        .accordion-row .accordion-button {
            column-gap: 20px;
        }
        .accordion-btn-title,
        .discover-btn,
        .inside-title {
            font-size: 18px;
        }
    }

    @media (max-width:767px) {
        .banner-light-section {
            padding-bottom: 100px;
        }
        .logo_items img {
            margin-left: 40px;
            margin-right: 40px;
            max-width: 100px;
        }
        .accordion-section.bottom-accordion {
            padding-bottom: 90px;
        }
        .accordion-row .accordion-button {
            flex-wrap: wrap;
            row-gap: 25px;
        }
        .accordion-section .sub-title {
            font-size: 28px;
        }
    }

    @media (max-width:575px) {
        .banner-light-section {
            padding-bottom: 150px;
        }
        .logo_items img {
            margin-left: 30px;
            margin-right: 30px;
        }
        .accordion-section.bottom-accordion {
            padding-bottom: 70px;
        }
        .accordion-section .sub-title {
            font-size: 26px;
        }
        .journy-area-v {
            gap: 25px;
        }
    }

    @media (max-width:420px) {
        .banner-light-section {
            padding-bottom: 180px;
        }
        .banner-light-section .banner-center-content {
            top: 15%;
        }
        .accordion-section.bottom-accordion {
            padding-bottom: 60px;
        }
        .accordion-btn-detail {
            font-size: 14px;
        }
        .accordion-section .sub-title {
            font-size: 24px;
        }
        .contact-ftr-text {
            font-size: 15px;
        }
        .baker-main-head-about {
            font-size: 33px;
            line-height: 38px;
            text-align: center;
        }
    }
    /******************ventures-pg********************/
/******************back-to-top********************/
    #button {
  display: inline-block;
  background-color: #000000;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border-radius: 50%;
  border: 1px solid #191919;
}
#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: 200;
    font-style: normal;
    font-size: 16px;
    color: #fff;
    position: absolute;
    top: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    left: 0px;
    right: 0px;
    color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #121212;
}
#button:active {
  background-color: #121212;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
/******************back-to-top********************/
.video-section {
  position: relative;
  height: 400vh; /* enough space for smooth scroll before/after pin */
}

.video-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}