html,
 body {
     margin: 0;
     padding: 0;
     scroll-behavior: auto !important;
 }

 body.lenis.lenis-smooth {
     overflow-x: hidden;
 }


 html,
 body {
     margin: 0;
     font-family: 'raleway-regular', sans-serif !important;
     background: #ffffff;
     color: rgb(0, 0, 0);
     overflow-x: clip;
     min-height: 100vh;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding: 0;
 }

 /* font family */

 @font-face {
     font-family: 'raleway-regular';
     src: url('../fonts/Raleway-Regular.ttf');


 }

 @font-face {
     font-family: 'manrope-medium';
     src: url('../fonts/Manrope-Medium.ttf');

 }

 @font-face {
     font-family: 'manrope-bold';
     src: url('../fonts/Manrope-Bold.ttf');

 }

 @font-face {
     font-family: 'manrope-semibold';
     src: url('../fonts/Manrope-SemiBold.ttf');

 }

 @font-face {
     font-family: 'Oswald-Regular';
     src: url('../fonts/Oswald-Regular.ttf');
 }

 .oswald-font {
     font-family: 'Oswald-Regular', sans-serif !important;
 }

 #menu-button {
     position: fixed;
     z-index: 999;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 100px;
     box-sizing: border-box;
     background-color: #ffffff;
     width: 100%;


 }



 .menu-text {
     position: relative;
     display: inline-block;
     font-size: 18px;
     color: #000000;
     cursor: pointer;

 }

 .menu-text::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 2px;
     height: 2px;
     width: 0%;
     background-color: #000000;
     /* bottom border color */
     transition: width 0.4s ease-in-out;
 }

 .menu-text:hover::after {
     width: 100%;
 }




 /* Hide hamburger icon on desktop */


 .hamburger-icon {
     display: block;
 }

 .menu-text {
     font-size: 10px;
     display: none;
 }



 .hamburger-icon {
     width: 50px;
     height: auto;
     display: block;
 }

 .hamburger-icon span {
     display: block;
     height: 0.1rem;
     background-color: #000000;
     margin: 0.5rem 0;
 }


 #menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background-color: #000;
     /* background-image: url('./../img/menu-bg-home-img.jpg'); */
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     overflow: hidden;
     transform: translateY(-100%);
     z-index: 998;
     /* padding: 40px; */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
     transition: transform 0.5s ease;
 }

 .menu-bg-layer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('./img/menu-bg-home-img.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     transition: transform 0.5s ease-in-out;
     z-index: -1;
     opacity: 1;
 }

 .menu-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 24px;
     color: black;
     margin-top: -25px;
 }

 .menu-top .logo {
     font-weight: 500;


 }

 #close-btn {
     cursor: pointer;
     transition: color 0.3s ease;
     font-size: 20px;
     position: relative;
     color: #000000;
     padding-bottom: 4px;
 }



 #close-btn::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     width: 100%;
     background-color: rgb(0, 0, 0);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
     display: none;
 }

 #close-btn:hover::after {
     transform: scaleX(1);
     display: none;
 }

 #ABOUT {
     color: white;
 }

 .nav-links {
     list-style: none;
     padding: 0;
     margin: 0px auto 0 auto;
     font-size: 48px;
     text-align: start;
     display: flex;
     flex-direction: column;
     align-items: start;
     width: 100%;
     padding-left: 200px;

 }

 .nav-links li a {
     display: inline-block;
     transform: scaleY(0);
     transform-origin: bottom;
     opacity: 0;
 }

 .nav-links li span {
     position: relative;
     display: inline-block;
     color: transparent;
     background: linear-gradient(to top, #ffffff 50%, #70C39C 50%);
     background-size: 100% 200%;
     background-position: bottom;
     -webkit-background-clip: text;
     background-clip: text;
     transition: background-position 0.4s ease;
     font-family: 'Oswald-Regular', sans-serif !important;
 }

 .nav-links li:hover span {
     background-position: top;
 }

 .nav-links a::before {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background: #000;
     transform-origin: bottom;
     transform: scaleY(0);
     z-index: 0;
     transition: none;
 }


 .menu-bottom {
     display: flex;
     justify-content: space-between;
     align-items: end;
     justify-content: end;
     gap: 40px;
     padding: 30px 0 0 0;
 }


 .info-row-container {
     display: flex;
     gap: 5px;
     flex-direction: row;

 }

 .column {
     flex: 1;
     min-width: 180px;
 }

 .right-video {
     position: relative;
     z-index: 1;
     margin-top: -80px;
 }

 .video-preview {
     width: 100%;
     overflow: hidden;


 }

 .video-preview video {
     width: 100%;
     height: auto;


 }

 #videoCloseBtn {
     position: fixed;
     background: rgba(255, 255, 255, 0.3);
     border: none;
     padding: 8px 12px;
     border-radius: 4px;
     font-size: 14px;
     color: #000;
     cursor: pointer;
     z-index: 10000;
     display: none;
     user-select: none;
     backdrop-filter: blur(5px);
 }

 .social-heading {
     font-size: 14px;
     font-weight: 500;
     color: #000000;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .socials-column a {
     display: block;
     text-decoration: none;
     color: #000000;
     font-size: 14px;
     margin-bottom: 4px;
     transition: color 0.3s ease;

 }

 .socials-column a:hover {
     color: #ffffff;
 }

 .contact-info,
 .address-info {
     display: flex;
     flex-direction: column;
     gap: 8px;
     font-weight: 500;
     color: #000000;
 }

 .contact-info h4,
 .address-info h4 {

     font-size: 14px;
     font-weight: 700;
     color: #000000;
     text-transform: uppercase;
     letter-spacing: 1.2px;
 }

 .address-info {
     line-height: 25px;
 }

 .contact-info span,
 .address-info span {
     display: block;
     font-weight: 500;
     color: #000000;
 }

 .social-heading,
 .contact-info h4,
 .address-info h4 {
     margin-bottom: 4px;
 }



 #menuVideo {
     width: 320px;
     height: 180px;
     object-fit: cover;
     cursor: pointer;
     position: relative;
     z-index: 1;
 }



 .video-fullscreen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 9999;
     background: black;
     display: none;
     align-items: center;
     justify-content: center;
 }

 .video-fullscreen video {
     max-width: 100%;
     max-height: 100%;
 }

 .cursor-close {
     position: absolute;
     top: 20px;
     right: 30px;
     color: white;
     cursor: pointer;
     font-size: 18px;
     z-index: 10000;
 }

 .right-video video {
     width: 100%;
     height: auto;
     object-fit: cover;
     cursor: pointer;
 }




 .video-preview {
     position: relative;
     display: inline-block;
 }

 #menuVideo {
     width: 100%;
     height: auto;
     display: block;
 }


 .play-reel-btn {
     margin-top: 8px;
 }


 .play-reel-btn button {
     display: flex;
     align-items: start;
     gap: 10px;
     cursor: pointer;
     border: none;
     background: none;
     padding: 0;
     color: inherit;
     font-size: inherit;
 }

 .play-icon {
     width: 28px;
     height: 28px;
     border: 1.5px solid #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-family: none;
 }

 .play-icon .triangle {
     font-size: 12px;
     margin-left: 2px;
     display: inline-block;
     transform: translateX(1px);
     color: #fff;
 }

 .play-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     line-height: 1.3;
 }

 .play-text .main-text {
     font-weight: 500;
     font-size: 14px;
     text-transform: uppercase;
     color: #fff;
 }

 .play-text .sub-text {
     font-size: 12px;
     color: #fff;
     padding-right: 50px;

 }


 .index {
     background-color: #B15C2F;
     height: 100vh;
     width: 100%;
 }

 .home-banner-section {
     /* background-image: url(../img/Banner-Image.png); */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 100vh;
     text-align: center;
     color: white;
 }

 .common-heading {
     color: #000;
 }

 @font-face {
     font-family: 'Manrope-Bold';
     src: url('../fonts/Manrope-Bold.ttf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }

 /* Container setup */
 .branding-marquee {
     overflow: hidden;
     width: 100%;
     background-color: #ffffff;
     padding: 20px 0;
     /* height: 350px; */
 }

 /* Track area */
 .marquee-track {
     display: flex;
     overflow: hidden;
     margin-top: 3rem;
     margin-bottom: 2rem;
 }

 /* Moving content */
 .marquee-content {
     display: flex;
     animation: marqueeScroll 165s linear infinite;
 }

 /* Single marquee item */
 .marquee-item {
     display: flex;
     align-items: center;
     gap: 2vw;
     margin-right: 5vw;
 }


 .marquee-item h1 {
     font-family: 'CellofyBold', sans-serif;
     font-size: clamp(24px, 6vw, 180px);
     line-height: 1;
     color: #000000;
     margin: 0;
     white-space: nowrap;
 }

 /* Logo */
 .marquee-logo {
     width: clamp(32px, 6vw, 160px);
     height: auto;
     display: block;
 }

 /* Animation keyframes */
 @keyframes marqueeScroll {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 .marquee-item span {
     display: block;
     white-space: nowrap;
 }


 /* clients section video and image section */


 .case-studies-section {
     max-width: 1920px;
     margin: 0 auto;
     padding-left: 1.25rem;
     padding-right: 1.25rem;
     padding-top: 0rem;
     padding-bottom: 4rem;

 }

 /* Visually Hidden Heading for Accessibility */
 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
 }

 .case-studies-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.75rem;
     list-style: none;
     padding: 0;
     margin: 0;
 }


 .case-studies-row {
     display: grid;
     grid-template-columns: 1fr;
     gap: 0;
     list-style: none;
     padding: 0;
     margin: 0;
 }

 /* Responsive Grid for Larger Screens (apply to .case-studies-row) */


 .case-study-item {
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease;
     background-color: transparent;
 }

 .case-study-item:hover {
     transform: translateY(-5px);
 }


 .case-study-image-wrapper {
     position: relative;
     width: 100%;

     height: 350px;
     overflow: hidden;
 }

 /* Ensuring consistent fixed height for mobile */

 .case-study-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 2;
     transition: opacity 0.3s ease;
     background-color: transparent;
 }

 /* Video Overlay Styles */
 .case-study-video-overlay {
     width: calc(100% + 1px);
     height: 115%;
     position: absolute;
     top: 50%;
     opacity: 0;
     pointer-events: none;
     transform: translate(0%, -50%);
     transition: opacity 0.3s ease;
     z-index: 1;
     background-color: transparent;
 }

 /* Hide video overlay on medium and smaller screens */


 .case-study-video {
     width: 100%;
     height: 100%;
     max-width: none;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(1.15);
     object-fit: cover;
     transition: transform 0.3s ease;
     z-index: -1;
     background-color: transparent;
 }

 /* Hover effects for the case study item */
 .case-study-item:hover .case-study-video-overlay {
     opacity: 1;
     pointer-events: auto;
     z-index: 3;
 }

 .case-study-item:hover .case-study-video {
     transform: translate(-50%, -50%) scale(1);
     z-index: 2;
 }

 /* Fade out the image on hover to reveal video */
 .case-study-item:hover .case-study-img {
     opacity: 0;
     z-index: 1;
 }

 /* Case Study Title */
 .case-study-title {
     color: #1a202c;
     font-size: 1.125rem;
     margin-top: 0.75rem;
     font-weight: 600;
 }

 .case-study-title a {
     text-decoration: none;
     color: inherit;
     position: relative;
     display: block;
     transition: color 0.2s ease;
 }



 .case-study-title a::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 2;
 }

 /* Case Study Tags Container */
 .case-study-tags-container {
     margin-top: 0.25rem;
     flex-grow: 1;
 }



 .tag-list {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
     padding: 0;
     margin: 0;
     color: #4a5568;
     font-size: 0.875rem;
 }

 .tag-list li {
     white-space: nowrap;
 }

 .tag-list .tag-separator {
     display: inline-block;
     margin-left: 0.25rem;
     margin-right: 0.25rem;
     color: #a0aec0;
 }

 /* Hide the last separator */
 .tag-list li:last-child .tag-separator {
     display: none;
 }

 /* More Work Button */
 .more-work-container {
     display: flex;
     justify-content: center;
     margin-top: 2rem;
     padding-top: 2rem;
 }

 .more-work-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     border-radius: 9999px;
     transition: background-color 0.2s ease, color 0.2s ease;
     background-color: #000000;
     color: #ffffff;
     padding: 0 1.5rem;
     height: 60px;
     min-width: 150px;
     font-size: 1.125rem;
     font-weight: 500;
     text-decoration: none;
     border: none;
     cursor: pointer;
 }

 .more-work-button:hover {
     background-color: #1a202c;
     color: #ffffff;
 }



 /* work section starts*/


 .pt-3 {
     padding-top: 0.75rem;
     /* 12px */
 }

 .sm\:pt-8 {
     @media (min-width: 640px) {
         padding-top: 2rem;
         /* 32px */
     }
 }

 .pb-8\/10 {
     padding-bottom: 0.8rem;

 }

 /* Container Styles */
 .mx-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .px-3\/5 {
     padding-left: 0.6rem;

     padding-right: 0.6rem;

 }

 .max-w-\[1920px\] {
     max-width: 1920px;
 }


 .pt-\[\.1em\] {
     padding-top: 0.1em;
 }

 .text-4xl {
     font-size: 2.25rem;

     text-align: center;
     line-height: 2.5rem;

 }


 .text-ink {
     /* color: #333;
     font-family: 'CellofyMedium'; */

 }

 .text-base {
     font-size: 1rem;
     /* 16px */
     line-height: 1.5rem;

 }

 .mr-8\/10 {
     margin-right: 0.8rem;

 }

 .float-left {
     float: left;
 }

 .tracking-normal {
     letter-spacing: 0;
 }

 /* Paragraph Styles */
 .text-3xl {
     font-size: 2rem;
     line-height: normal;
     width: 75%;
     margin: 0 auto;
 }

 .mt-\[-0\.1em\] {
     margin-top: -0.1em;
 }

 /* Responsive Adjustments */
 @media (min-width: 640px) {
     .sm\:pt-8 {
         padding-top: 2rem;
     }

     .px-3\/5 {
         padding-left: 1.2rem;

         padding-right: 1.2rem;
     }
 }


 .clearfix::after {
     content: "";
     display: table;
     clear: both;
 }



 .bg-primary {
     background-color: var(--primary);
 }

 .text-text-dark {
     color: var(--text-dark);
 }


 /* what our client says */
 :root {
     --card-height: auto;
 }



 .staggered-card h2 {
     font-family: 'CellofyBold';
 }

 .staggered-card {
     background-color: #fceb72;
     color: #000;
     padding: 50px;
     margin-bottom: 100px;
     position: sticky;
     top: calc(50vh - var(--card-height) / 2);
     transform-origin: center top;
     will-change: transform;
     z-index: 1;
     transition: transform 0.2s ease;
 }

 .staggered-card:nth-child(even) {
     background-color: #fceb72;
     color: #000;
 }

 .card-content {
     font-size: 1.1rem;
     line-height: 1.6;
 }

 .flex-items-center-justify-between {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 4rem;
 }

 .flex-items-center {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .What-Our-Client-Says-heading {
     text-align: center;
     font-size: 2.8rem;
     font-weight: 500;
     margin-bottom: 40px;

 }

 .request-quote-wrapper {
     text-align: center;
     margin-top: 40px;

 }

 .request-quote-button {
     padding: 14px 32px;
     font-size: 1.2rem;
     font-weight: 600;
     border: none;
     background-color: rgb(0, 0, 0);
     color: rgb(255, 255, 255);
     border-radius: 999px;
     cursor: pointer;
     transition: all 0.3s ease;


 }

 .request-quote-button a {
     text-decoration: none;
     list-style: none;
     color: rgb(255, 255, 255);
 }

 .request-quote-button:hover {

     background-color: #000;
     color: #eceae5;
 }

 /*  */

 /* our clients logo */


 .our-clients-logo-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0px 20px 60px 20px;
 }

 .grid-section {
     backdrop-filter: blur(10px);
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     padding: 40px;
 }

 .logo-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
 }

 .brand_hover {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     border-radius: 0px;
     aspect-ratio: 1;
     overflow: hidden;
     padding: 20px;
     border: 0.1px solid #bfbfbf26;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     transition-duration: .5s;

 }

 .brand_hover img {
     max-width: 100%;
     max-height: 150px;
     transition: all 0.4s ease;
     /* filter: grayscale(100%) brightness(1.6); */
 }

 /* .brand_hover:hover img {
     filter: none;
 } */
 .black {
     color: #000;
 }

 .brand_hover:hover {
     background-color: #4b5563;
 }

 .logo-wrapper:hover {
     background-color: #2B3847;

 }

 .logo-wrapper-two:hover {
     background-color: #043A27;
 }

 .logo-wrapper-three:hover {
     background-color: #E82B2E;
 }

 .logo-wrapper-four:hover {
     background-color: #231F20;
 }

 .logo-wrapper-five:hover {
     background-color: #0C193A;
 }

 .logo-wrapper-six:hover {
     background-color: #BC9850;
 }

 .logo-wrapper-seven:hover {
     background-color: #EC1C3C;
 }

 .logo-wrapper-eight:hover {
     background-color: #2B64B0;
 }

 .logo-wrapper-nine:hover {
     background-color: #EDBD4C;
 }

 .logo-wrapper-ten:hover {
     background-color: #52725F;
 }

 .logo-wrapper-eleven:hover {
     background-color: #49AA42;
 }

 .logo-wrapper-twelve:hover {
     background-color: #FACF30;
 }

 .logo-wrapper-thirteen:hover {
     background-color: #F4BA17;
 }

 .logo-wrapper-fourteen:hover {
     background-color: #0B5B8F;
 }

 .logo-wrapper-fifteen:hover {
     background-color: #7C8B9C;
 }

 .logo-wrapper-sixteen:hover {
     background-color: #24B2E7;
 }

 .logo-wrapper-seventeen:hover {
     background-color: #EDBC3C;
 }

 .logo-wrapper-eighteen:hover {
     background-color: #2D2E74;
 }

 .logo-wrapper-nineteen:hover {
     background-color: #A6A4A3;
 }

 .logo-wrapper-twenty:hover {
     background-color: #3498A0;
 }

 .logo-wrapper-twentyone:hover {
     background-color: #0095CE;
 }

 .logo-wrapper-twentytwo:hover {
     background-color: #262642;
 }

 .logo-wrapper-twentythree:hover {
     background-color: #BA9C61;
 }

 .logo-wrapper-twentyfour:hover {
     background-color: #FFE9CF;
 }


 /* .logo-wrapper {


    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.05);


} */

 /* Banner Video Section Style Divya 26-6-25 */
 .home-banner-section video {
     width: 100vw;
     height: 100vh;
     max-height: 100%;
     object-fit: cover;
 }

 /* what we do section */
 .what-we-do-sec {
     position: relative;
     padding: 100px 100px;
     background-color: #000000;
     color: #ffffff;
 }

 .card-service {
     position: relative;
     padding-top: 3rem;
     padding-bottom: 3rem;
     cursor: pointer;
 }

 @media (min-width: 1200px) {
     .card-service {
         padding-top: 3rem;
         padding-bottom: 3rem;
     }
 }

 .card-service::after {
     content: '';
     width: 0;
     height: 0.55px;
     background: #fff;
     position: absolute;
     bottom: 0;
     left: 0;
     transition: width 1s ease;
 }

 .card-service .service-row {
     position: relative;
     align-items: center;
     color: #ffffff;
     text-align: center;
     display: flex;
     flex-wrap: wrap;

 }

 @media (min-width: 768px) {
     .card-service .service-row {
         text-align: left;
     }
 }

 .card-service .service-row .icon-col {
     text-align: center;
 }

 .card-service .service-row .icon-col img,
 .card-service .service-row .icon-col svg {
     width: 100%;
     height: 100%;
     display: inline-block;
 }

 .card-service .service-row .title-col {
     margin-top: 1.875rem;
     flex: 1;
 }

 @media (min-width: 768px) {
     .card-service .service-row .title-col {
         margin-top: 0;
         padding-right: 5%;
         padding-left: 5%;
     }
 }

 .card-service .service-row .title-col h3 {
     margin-bottom: 1rem;
 }

 .card-service .service-row .title-col .description-container {
     overflow: hidden;
     position: relative;
 }

 .card-service .service-row .title-col .description-container .description {
     position: relative;
     transition: all 0.4s ease;
     transform: translateY(0);
 }

 @media (min-width: 1200px) {
     .card-service .service-row .title-col .description-container .description {
         transform: translateY(100%);
     }

     .card-service .service-row .title-col .description-container .description.has-projects {
         transform: translateY(0);
     }
 }

 .card-service .service-row .description-col {
     font-size: 1.0625rem;
     opacity: 0.7;
     display: none;
 }

 @media (min-width: 1200px) {
     .card-service .service-row .description-col {
         display: block;
     }
 }

 .card-service .related-projects-row {
     margin-top: 2.5rem;
 }

 @media (min-width: 1200px) {
     .card-service .related-projects-row {
         margin-top: 4.75rem;
     }
 }

 .card-service hr {
     background: #fff;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1px;
     border: none;
     transition: width 1.4s linear;
 }

 .card-service hr.in-screen {
     width: 100%;
 }

 /* hover animation */
 @media (hover: hover) and (pointer: fine) {
     .card-service:hover::after {
         width: 100%;
     }

     .card-service:hover .title-col .description-container .description {
         transform: translateY(0);
     }
 }


 /* Base style for the image container */
 .featured-animate-wrapper {
     position: relative;
     width: 100%;
     height: auto;
     overflow: hidden;
 }

 /* Apply animation to each image */

 .top-0 {
     top: 0
 }

 .left-0 {
     left: 0
 }

 .w-full {
     width: 100%;
 }

 .inset-0 {
     inset: 0;
 }

 .absolute {
     position: absolute;
 }

 .relative {
     position: relative
 }

 .custom-reset *,
 .custom-reset ::backdrop,
 .custom-reset :after,
 .custom-reset :before {
     border-spacing: 0;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* Scale utilities (without vars) */
 .scale-60 {
     transform: scale(0.6);
 }

 .scale-70 {
     transform: scale(0.7);
 }

 .scale-80 {
     transform: scale(0.8);
 }

 .scale-90 {
     transform: scale(0.9);
 }

 .featured-animate-wrapper .feature-image-2 {
     animation: sequentialImages1 3s infinite
 }

 .featured-animate-wrapper .feature-image-3 {
     animation: sequentialImages2 3s infinite
 }

 .featured-animate-wrapper .feature-image-4 {
     animation: sequentialImages3 3s infinite
 }

 .featured-animate-wrapper .feature-image-5 {
     animation: sequentialImages4 3s infinite
 }



 @keyframes sequentialImages1 {
     0% {
         opacity: 0
     }

     18% {
         opacity: 0;
         scale: .9
     }

     20% {
         opacity: 100%;
         scale: 1
     }
 }

 @keyframes sequentialImages2 {
     0% {
         opacity: 0
     }

     20% {
         opacity: 0
     }

     38% {
         opacity: 0;
         scale: .9
     }

     40% {
         opacity: 100%;
         scale: 1
     }
 }

 @keyframes sequentialImages3 {
     0% {
         opacity: 0
     }

     40% {
         opacity: 0
     }

     58% {
         opacity: 0;
         scale: .9
     }

     60% {
         opacity: 100%;
         scale: 1
     }
 }

 @keyframes sequentialImages4 {
     0% {
         opacity: 0
     }

     60% {
         opacity: 0
     }

     78% {
         opacity: 0;
         scale: .9
     }

     80% {
         opacity: 100%;
         scale: 1
     }
 }


 .what-we-do-new-section {
     position: relative;
     background-color: #000000;
     color: #ffffff;
     padding: 100px 100px;
 }

 .what-we-do-new-section .staggered-card {
     padding: 2rem;
     border-radius: 1rem;
 }

 .what-we-do-new-section .card-service {
     color: #000;
     padding: 0;
 }

 .what-we-do-new-section .card-service .service-row {
     color: #000;
 }

 .what-we-do-new-section .card-service:hover::after {
     display: none;
 }

 .home-feature-card-right-line {
     background-color: #000000;
     height: 1px;
     margin-top: 1rem;
     margin-bottom: 1rem;
 }

 .home-feature-card-right-content-list {
     grid-column-gap: 1rem;
     grid-row-gap: 1rem;
     flex-flow: column;
     display: flex;
 }

 .home-card-feature-list-item {
     grid-column-gap: 1rem;
     grid-row-gap: 1rem;
     justify-content: flex-start;
     align-items: center;
     display: flex;
     box-sizing: border-box;
     border: none;
     padding: 0;
     margin: 0;
     background: none;
     outline: none;

 }

 .home-feature-card-right-list-item-icon {
     width: 100%;
     max-width: 1.2rem;
 }

 .what-we-do-new-section .card-service .service-row .title-col h3 {
     margin-bottom: 1rem;
     font-size: 2rem;
     font-weight: 500;
 }

 .what-we-do-new-section .card-service .service-row .title-col {
     margin-top: 0;
     padding-right: 1rem;
     padding-left: 1rem;
 }

 .title-flex-end-row {
     display: flex;
     align-items: center;
 }

 .what-we-do-new-section .staggered-card:nth-child(even) {
     background-color: #ffffff;
 }

 .what-we-do-new-section .staggered-card:nth-child(odd) {
     background-color: #ffffff;
 }

 .what-we-do-new-section .staggered-card {
     background-color: #ffffff;
 }



 /* TN new website Button Stle */

 .btn-div-bottom {
     position: relative;
     padding-top: 1.5rem;
 }

 :root {
     --easeOutQuart: cubic-bezier(.165, .84, .44, 1)
 }

 .btn-primary {
     display: inline-flex;
     gap: 0.2rem;
     color: #ffffff;
     cursor: pointer;
     border-radius: 32rem;
     overflow: hidden;
     text-decoration: none;
 }

 .btn-primary-inner {
     display: flex;
     align-items: center;
     gap: 0.2rem;
     position: relative;
     background-color: transparent;
     transition: transform 0.4s var(--easeOutQuart) 25ms;
 }

 .btn-primary-content {
     background-color: #000;
     border-radius: 4rem;
     padding: 0.75rem 1.5rem;
     display: flex;
     align-items: center;
     white-space: nowrap;
 }

 .btn-primary-ic {
     background-color: #000;
     border-radius: 9999px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.75rem;
     transition: transform 0.25s var(--easeOutQuart);
 }

 .btn-primary-ef {
     position: absolute;
     left: -3rem;
     transform: scale(0);
 }

 .btn-primary-ic:not(.btn-primary-ef) {
     transform: scale(1);
 }

 .ic-16 {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .ic-16 svg {
     width: 1rem;
     height: 1rem;
 }

 /* Hover animation */
 .btn-primary:not([btn-type=default]):hover .btn-primary-inner {
     transform: translateX(3rem);
 }

 .btn-primary:not([btn-type=default]):hover .btn-primary-inner .btn-primary-ef {
     transform: scale(1);
 }

 .btn-primary:not([btn-type=default]):hover .btn-primary-inner .btn-primary-ic:not(.btn-primary-ef) {
     transform: scale(0);
 }

 /* Touch fallback (optional) */
 .btn-primary:not([btn-type=default]).hover .btn-primary-inner {
     transform: translateX(3rem);
 }

 .btn-primary:not([btn-type=default]).hover .btn-primary-inner .btn-primary-ef {
     transform: scale(1);
 }

 .btn-primary:not([btn-type=default]).hover .btn-primary-inner .btn-primary-ic:not(.btn-primary-ef) {
     transform: scale(0);
 }

 /* White btn secondary */
 .btn-secondary {
     display: inline-flex;
     gap: 0.2rem;
     color: #000;
     cursor: pointer;
     border-radius: 32rem;
     overflow: hidden;
     text-decoration: none;
 }

 .btn-secondary-inner {
     display: flex;
     align-items: center;
     gap: 0.2rem;
     position: relative;
     background-color: transparent;
     transition: transform 0.4s var(--easeOutQuart) 25ms;
 }

 .btn-secondary-content {
     background-color: #fff;
     border-radius: 4rem;
     padding: 0.75rem 1.5rem;
     display: flex;
     align-items: center;
     white-space: nowrap;
 }

 .btn-secondary-ic {
     background-color: #fff;
     border-radius: 9999px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.75rem;
     transition: transform 0.25s var(--easeOutQuart);
 }

 .btn-secondary-ef {
     position: absolute;
     left: -3rem;
     transform: scale(0);
 }

 .btn-secondary-ic:not(.btn-secondary-ef) {
     transform: scale(1);
 }

 /* Hover animation */
 .btn-secondary:not([btn-type=default]):hover .btn-secondary-inner {
     transform: translateX(3rem);
 }

 .btn-secondary:not([btn-type=default]):hover .btn-secondary-inner .btn-secondary-ef {
     transform: scale(1);
 }

 .btn-secondary:not([btn-type=default]):hover .btn-secondary-inner .btn-secondary-ic:not(.btn-secondary-ef) {
     transform: scale(0);
 }

 /* Touch fallback (optional) */
 .btn-secondary:not([btn-type=default]).hover .btn-secondary-inner {
     transform: translateX(3rem);
 }

 .btn-secondary:not([btn-type=default]).hover .btn-secondary-inner .btn-secondary-ef {
     transform: scale(1);
 }

 .btn-secondary:not([btn-type=default]).hover .btn-secondary-inner .btn-secondary-ic:not(.btn-secondary-ef) {
     transform: scale(0);
 }


 .common-tn-para {
     font-size: 1.2rem;
     margin-bottom: 1rem;
 }

 .common-tn-head {
     font-size: 2.8rem;
     font-weight: 500;
     margin-bottom: 1.5rem
 }


 /* capabliities section style */
 .capablities-sec {
     position: relative;
     padding: 100px 100px;
 }

 .capabilities-image-div {
     position: relative;
     width: 100%;
     height: 100%;
     min-height: 100%;
     overflow: hidden;
 }

 .hover-effect:hover {
     transform: scale(1);
     font-weight: 500;
 }

 .capablities-sec .bg-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transition: opacity 0.6s ease;
     pointer-events: none;
     z-index: 1;
     border-radius: 2rem;
 }

 .bg-video.active {
     opacity: 1;
     z-index: 2;
 }

 .capabliities-content-div {
     position: relative;
     padding: 0rem 3rem;
 }

 .capabliities-content-div ul {

     width: 100%;
     list-style: none;
     padding-right: 0;
     padding-left: 0;
 }

 .capabliities-content-div ul li {
     margin-top: 2rem;
     margin-top: 2rem;
     display: flex;
     gap: 15px;
     cursor: pointer;
     font-size: 1.23rem;
     position: relative;
     padding-bottom: 1rem;
     margin-bottom: 1rem;
     transition: transform 0.3s ease;

 }



 .capabliities-content-div ul li::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 95%;
     height: 1px;
     background-color: #ddd;
 }

 .more-work-container-view {
     display: flex;
     justify-content: left;
     margin-top: 2rem;
     padding-top: 2rem;
 }


 /* style for contact page 30-06-2025 */




 .contact-banner-section {
     background-color: #fff;
     padding: 80px 20px;
     text-align: center;
     height: 400px;
 }

 .contact-icon,
 .element_svg {
     height: 100px;
     width: auto;
     vertical-align: text-bottom;
     animation: fadeInLeft 1s ease-out both;
     margin-top: 40px;
 }

 .contact-label {
     font-size: 0.9rem;
     letter-spacing: 1px;
     color: #333;
     margin-bottom: 20px;
     text-transform: uppercase;
     animation: fadeInUp 1s ease-out both;
 }

 .contact-heading {
     font-size: 2.5rem;
     font-weight: 500;
     color: #000;
     animation: fadeInUp 1.2s ease-out both;
 }

 .contact-heading i {
     font-style: italic;
     color: #000000;
     font-weight: 500;
 }

 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-100px);

     }

     to {
         opacity: 1;
         transform: translateX(0);

     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 /* img section contact us img */
 .container-fluid {
     width: 100%;

 }

 .img-responsive {
     width: 100%;
     height: auto;
     display: block;
 }

 .animatedParent {
     overflow: hidden;
 }

 .animated {
     opacity: 0;
     transform: translateY(30px);
     transition: all 1s ease;
 }

 .animated.go {
     opacity: 1;
     transform: translateY(0);
 }

 .fadeIn {
     /* handled via transform + opacity above */
 }

 .slower {
     transition-duration: 1.5s !important;
 }


 /* .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 40px;
} */

 .contact_us_links_big_wrapper {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     text-align: center;

 }

 .contact_us_links_wrapper {
     width: 23%;
     margin-bottom: 40px;
     display: flex;
     /* flex-wrap: wrap; */
     justify-content: space-between;
     text-align: center;
     align-items: center;
     flex-direction: column;



 }

 .contact_us_links h1 {
     font-style: italic;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .contact_us_links h4 {
     font-size: 18px;
     color: #444;
     line-height: 1.3;
     margin-bottom: 16px;
 }

 .contact_link_btn {
     display: inline-block;
     font-size: 15px;
     font-weight: 600;
     color: #000000;
     text-decoration: none;
     border: 2px solid #000000;
     padding: 10px 22px;
     border-radius: 30px;
     transition: all 0.3s ease;
     background-color: transparent;
 }

 .contact_link_btn img {
     width: 14px;
     height: 14px;
     margin-left: 8px;
     vertical-align: middle;
     transition: transform 0.3s ease;
 }

 .contact_link_btn:hover {
     background-color: #000000;
     color: #fff;
 }

 .contact_link_btn:hover img {
     transform: translateX(4px);
     filter: brightness(10);
 }



 /* form section */


 .contact-form-section {
     /* max-width: 900px; */
     width: 1170px;
     margin: auto;
     padding: 10px 10px;
 }

 .form-group h3 {
     color: #000000;
     margin-bottom: 10px;
     font-size: 24px;
     font-family: sans-serif;
 }

 .form-group {
     margin-bottom: 30px;
 }

 .form-inline {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 15px;

 }

 .form-control {
     flex: 1;
     padding: 12px 16px;
     border: 1px solid #72c29b;
     font-size: 16px;
     width: 100%;

 }

 .contact-form-section .form-control:focus {
     outline: none !important;
     border: none !important;
 }

 textarea.form-control {
     width: 100%;
     margin-top: 10px;
     min-height: 100px;
 }

 .checkbox-group {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     justify-content: space-between;
 }

 .left-checkboxes,
 .right-other {
     flex: 1;
     min-width: 280px;
 }

 .checkbox-group label {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 15px;
     margin-bottom: 12px;
     cursor: pointer;
 }

 .checkbox-group input[type="checkbox"] {
     width: 20px;
     height: 20px;
     accent-color: #67b38c;
     cursor: pointer;
 }

 textarea#otherText {
     margin-top: 10px;
     background-color: #f0f0f0;
 }

 textarea#otherText:enabled {
     background-color: #ffffff;
 }

 .center {
     text-align: center;
 }

 .submit-btn {
     margin-top: 20px;
     padding: 12px 30px;
     border: 2px solid #000000;
     /* background: #fff;
    color: #000; */
     cursor: pointer;
     font-weight: 500;
     transition: 0.3s;
 }

 /* .submit-btn:hover {
    background-color: #67b38c;
    color: #fff;
} */


 /* careers page  30-06-2025 */

 .container-careers {
     width: 1170px;
     padding: 0;
     margin: 0 auto;

 }

 .home_second_section-careers {
     padding: 90px 20px 40px;
 }

 .home_second_section-careers .col-md-10 {
     width: 83.3333%;
     margin: 0 auto;
 }

 .element_svg {
     height: 100px;
     width: auto;
     vertical-align: bottom;
     margin-bottom: 20px;
     display: inline-block;
     animation: fadeInLeftcareers 1s ease-out both;
 }

 .element_heading {
     display: inline-block;
     font-size: 2.5em;
     font-weight: 400;
     color: #000;

 }

 /* .element_heading i {
    font-style: italic;
    color: #67b38c;

} */

 .text-left {
     text-align: left;
     display: block;
 }

 .text-right {
     text-align: right;
     display: block;
     animation: fadeInrightcareers 1s ease-out both;
 }

 @keyframes fadeInLeftcareers {
     from {
         opacity: 0;
         transform: translateX(-100px);

     }

     to {
         opacity: 1;
         transform: translateX(0);

     }
 }

 @keyframes fadeInrightcareers {
     from {
         opacity: 0;
         transform: translateX(100px);

     }

     to {
         opacity: 1;
         transform: translateX(0);

     }
 }

 /* Work Page Design Divya 2-7-25 */
 .first-section {
     padding-top: 150px;
 }

 .container-wrapper {
     max-width: 1500px;
     width: 100%;
 }

 .work-banner-section {
     position: relative;
     padding: 150px 100px 100px 100px;
 }

 .work-banner-heading h6 {
     font-size: 1.2rem;
     margin-bottom: 1rem;
 }

 .work-banner-heading h1 {
     font-size: 3.5rem;
     margin-bottom: 2rem;
     font-weight: 500;
 }

 .work-banner-row {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .work-banner-logo-col {
     display: flex;
     justify-content: flex-end;
 }

 .work-video-section {
     position: relative;
     width: 100%;
     height: 100vh;
 }

 .work-video-iframe {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     pointer-events: none;
 }

 .work-descriptions-section {
     position: relative;
     padding: 100px 100px;
 }

 .work-description-head-col h4 {
     font-size: 2.75rem;
     font-weight: 500;
     margin-bottom: 2rem;
 }

 .work-descriptions-col h6 {
     font-size: 1.75rem;
     font-weight: 500;
     margin-bottom: 1rem;
 }

 .work-descriptions-col p {
     font-size: 1.1rem;
     margin-bottom: 1rem;
 }

 .work-services-div h6 {
     font-size: 1.05rem;
     text-transform: uppercase;
     letter-spacing: 0.25rem;
     margin-bottom: 1rem;
 }

 .services-flex-div {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     margin-bottom: 1rem;
 }

 .border-rect {
     border: 1px solid #ddd;
     padding: 0.5rem 2rem;
     font-size: 1rem;
     text-transform: uppercase;
 }

 .border-round {
     border: 1px solid #ddd;
     padding: 0.5rem 2rem;
     font-size: 1rem;
     text-transform: uppercase;
     border-radius: 50px;
 }

 .work-full-width-img-sec {
     position: relative;
 }

 .work-center-image-sec {
     position: relative;
     padding: 100px 100px 0px 100px;
 }

 .work-center-image-row {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .nav-links {

     gap: 1rem;
 }



 /* Industries section */
 .v2-section-team {
     background-image: url('./../img/industires-sec-bg.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
     height: 300vh;
     position: relative;
     z-index: 9;
 }


 .flex-block-38 {
     z-index: auto;
     justify-content: center;
     align-self: stretch;
     align-items: flex-start;
     margin-top: 100px;
     position: relative;
     padding-left: 100px;
 }

 .w-layout-vflex {
     flex-direction: column;
     align-items: flex-start;
     display: flex;
 }

 .v2-heading-1-team {
     color: #ffffff;
     text-align: left;
     align-self: stretch;
     width: 570px;
     font-size: 2rem;
 }

 .v2-heading-1-team {
     width: 770px;
 }

 .heading-smll---white--left {
     color: #fff;
     text-align: left;
     align-self: flex-start;
     margin-top: 10px;
     font-size: 1.25rem;
     width: 570px;
 }

 .flex-block-39 {
     margin-top: 200px;
     display: block;
 }

 .click-through {
     pointer-events: none;
 }

 .click-through {
     z-index: 1;
     max-width: none;
     height: 100vh;
     margin-top: -100vh;
     position: sticky;
     top: 0;
     overflow: hidden;
 }

 .w-layout-blockcontainer {
     margin-left: auto;
     margin-right: auto;
     display: block;
 }

 .w-container {
     margin-left: auto;
     margin-right: auto;
 }

 .flex-block-40 {
     z-index: 3;
     justify-content: flex-end;
     align-items: flex-end;
     height: 100vh;
     position: relative;
     inset: 0% 0% 0% 264px;
     left: 0;
 }

 .image-32 {
     height: 85vh;
 }

 .div-block-37 {
     z-index: 1;
     height: 100vh;
     margin-top: -100vh;
     position: relative;
 }

 .wrap {
     width: 100%;
     height: 100vh;
     position: relative;
 }

 .w-layout-vflex {
     flex-direction: column;
     align-items: flex-start;
     display: flex;
 }

 .wb-video-styles-controller {
     object-fit: cover;
     object-position: 50% 50%;
     width: 100%;
     height: 100%;
     position: absolute;
     inset: 0%;
 }

 .horizontal-section-through {
     pointer-events: none;
 }

 .horizontal-section-through {
     /* background-color: #000000; */
     height: 300vh;
     margin-top: -100vh;
     display: block;
 }

 .sticky {
     z-index: 3;
     width: 100%;
     position: sticky;
     top: 0;
     overflow: hidden;
 }

 .container.sticky-container {
     width: 100%;
     height: 100vh;
 }

 .list1 {
     grid-column-gap: 40px;
     grid-row-gap: 40px;
     align-self: center;
     width: 100%;
     display: flex;
 }

 .horizontal-item {
     flex: none;
 }

 .w-layout-vflex {
     flex-direction: column;
     align-items: flex-start;
     display: flex;
 }

 .div-block---card {
     border-radius: 25px;
     flex-flow: column;
     justify-content: space-between;
     align-items: flex-start;
     width: 300px;
     height: 380px;
     padding: 30px;
     display: flex;
     color: #000;
     background-color: #ffffff;
 }

 .div-block---card-1,
 .div-block---card-4,
 .div-block---card-5,
 .div-block---card-8,
 .div-block---card-9,
 .div-block---card-12 {
     background-color: #72c29b;
 }

 .div-icon-1 {
     background-image: url('./../img/industry-card-icon-img.png');
     background-position: 50%;
     background-repeat: no-repeat;
     background-size: 100%;
     align-self: flex-start;
     width: 64px;
     height: 64px;
 }

 .flex-block-41 {
     grid-column-gap: 12px;
     grid-row-gap: 12px;
 }

 .w-layout-vflex {
     flex-direction: column;
     align-items: flex-start;
     display: flex;
 }

 .heading-smll---white---cards {
     text-align: left;
     justify-content: flex-start;
     align-self: flex-start;
     font-size: 2rem;
     font-weight: 500;
     display: block;
 }

 .paragraph-card {
     text-align: left;
     align-self: stretch;
     font-size: 1rem;
 }

 .container.sticky-container {
     padding-left: 50%;
     display: flex;
     align-items: center;
 }

 .v2-container-normal {
     z-index: 2;
     flex-flow: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     display: flex;
     position: sticky;
     top: 0;
 }


 /* About Us Page Style Divya 14-7-25 */
 .about-banner-section {
     position: relative;
     padding: 150px 100px 30px 100px;
 }

 .about-contents-sec {
     position: relative;
     padding: 100px 100px;
 }

 .about-contents-row {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .about-journey-sec {
     position: relative;
     padding: 0px 100px;
 }

 .about-journey-row {
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     flex-direction: row;
     gap: 1rem;
 }

 .journey-img-item img {
     position: relative;
     border-radius: 1.5rem;
 }

 .journey-img-item:nth-child(odd) img {
     height: 28.125rem;
     min-width: 20rem;
 }

 .journey-img-item:nth-child(even) img {
     height: 21.125rem;
     min-width: 20rem;
 }

 .about-journey-container {
     position: relative;
     margin-top: 1rem;
     margin-bottom: 1rem;
 }

 .about-contents-div {
     position: relative;
     padding: 0rem 2rem;
 }

 .about-contents-row:nth-child(odd) {
     margin-top: 0px;
 }

 .about-contents-row:nth-child(even) {
     margin-top: 100px;
 }

 .about-clients-sec {
     position: relative;
     background-color: #f2f2f2;
     padding: 100px 100px;
 }

 .about-clients-sub-head {
     position: absolute;
 }

 .about-clients-sub-head h6 {
     font-size: 2rem;
     margin-bottom: 1rem;
 }


 .clients-log-flip-container {
    position: relative;
    margin-top: 7rem;
 }
 .clients-log-flip-div.grid {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     max-width: 1400px;
     width: 100%;
 }

 .clients-log-flip-div .card,
 .clients-log-flip-div .flip-card,
 .clients-log-flip-div .empty {
     width: 100%;
     aspect-ratio: 1 / 1;
 }

 .clients-log-flip-div .card {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 10px;
     border-radius: 0;
     border: none;
     background-color: #f2f2f2;
 }
 .clients-log-flip-div a {
    text-decoration: none;
 }
 .clients-log-flip-div .flip-card ,   .clients-log-flip-div .card {
    transition: 0.2s all ease;
 }
  .clients-log-flip-div .card:hover, .clients-log-flip-div .flip-card:hover {
    background-color: #000000;
    color: #ffffff;
  }
.clients-log-flip-div .card h6,  .clients-log-flip-div .flip-card h6{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.clients-log-flip-div .card p,  .clients-log-flip-div .flip-card p{
    font-size: 1rem;
}
 .clients-log-flip-div .green {
     background: #67b38c;
     color: #000;
 }

 .clients-log-flip-div .black {
     background: #000;
     color: #67b38c;
 }

 .clients-log-flip-div .white {
     background: #f2f2f2;
     color: #000;
 }

 .clients-log-flip-div .card img {
     max-width: 80%;
     height: auto;
 }

 .clients-log-flip-div .empty {
     background: transparent;
 }

 /* Flip card */
 .clients-log-flip-div .flip-card {
     perspective: 1000px;
 }

 .clients-log-flip-div .flip-inner {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
 }

 .clients-log-flip-div .flip-front,
 .clients-log-flip-div .flip-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 10px;
     text-align: center;
 }

 .clients-log-flip-div .flip-front {
     background: #000;
     color: #fff;
 }

 .clients-log-flip-div .flip-back {
     background: #f2f2f2;
     color: #000;
     transform: rotateY(180deg);
 }

 /* Odd/even flip direction */
 .clients-log-flip-div .flip-card:nth-child(odd) .flip-inner {
     animation: flip-left 8s infinite ease-in-out;
 }

 .clients-log-flip-div .flip-card:nth-child(even) .flip-inner {
     animation: flip-right 8s infinite ease-in-out;
 }

 @keyframes flip-left {
     0% {
         transform: rotateY(0deg);
     }

     20% {
         transform: rotateY(-180deg);
     }

     50% {
         transform: rotateY(-180deg);
     }

     70% {
         transform: rotateY(-360deg);
     }

     100% {
         transform: rotateY(-360deg);
     }
 }

 @keyframes flip-right {
     0% {
         transform: rotateY(0deg);
     }

     20% {
         transform: rotateY(180deg);
     }

     50% {
         transform: rotateY(180deg);
     }

     70% {
         transform: rotateY(360deg);
     }

     100% {
         transform: rotateY(360deg);
     }
 }

 .about-contents-sec.black-bg.white {
    background-color: #000000;
    color: #ffffff;

 }

     .accordion-item {
         border: none!important;
      border-bottom: 1px solid #ddd!important;
      padding-bottom: 24px;
      margin-bottom: 24px;
     
    }

    .accordion-btn {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .icon-wrapper {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eee;
      transition: background-color 0.3s ease;
    }

    .accordion-btn[aria-expanded="true"] .icon-wrapper {
      background-color: #eee;
    }

    .icon-svg {
      width: 16px;
      height: 16px;
    }

    .icon-svg line {
      stroke: black;
      stroke-width: 2;
      transition: all 0.3s ease;
    }

    .accordion-btn[aria-expanded="true"] .icon-svg .vertical {
      transform: translateY(-6px);
      opacity: 0;
    }

    .accordion-title {
      font-size: 1.45rem; 
      font-weight: bold;
    }

    .accordion-content {
      margin-left: 56px;
      margin-top: 12px; 
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    .accordion-btn[aria-expanded="true"] + .accordion-content {
      max-height: 500px;  
    }

    .what-we-do-page-sec {
        position: relative;
        padding: 0px 100px 100px 100px;
    }


    .brand-descriptions-section {
        position: relative;
        padding: 50px 100px 0px 100px;
    }

   .case-studies-section.work-page-section {
    position: relative;
    padding: 0px 100px 100px 100px;
    }











 /* What We Do Page New Design Divya - 17-7-25 */
 .what-we-do-banner-sec {
     position: relative;
     height: 100vh;
     overflow: hidden;
 }

 .what-we-do-banner-video {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     min-width: 100%;
     min-height: 100%;
     object-fit: cover;
     will-change: transform;
 }

 .what-we-do-second-sec {
     position: relative;
     padding: 100px 100px;
 }


 .tags-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     max-width: 700px;
     margin-bottom: 2rem;
 }

 .tag {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 6px 16px;
     border: 1px solid #000;
     border-radius: 9999px;
     text-decoration: none;
     color: #000;
     font-weight: 500;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 .tag:hover {
     background-color: #000;
     color: #fff;
 }

 .tag:active {
     background-color: #000;
     color: #fff;
 }

 .what-we-do-video-div video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .what-we-do-second-row {
     position: relative;
     display: flex;
     justify-content: space-between;
 }

 .what-we-do-content {
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: space-evenly;
 }

 .stats-wrapper {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
 }

 .stat-block {
     display: flex;
     flex-direction: column;
     gap: 4px;
     white-space: nowrap;
 }

 .stat-number {
     font-size: 2.5rem;
     font-weight: bold;
     color: #1a1a1a;
     letter-spacing: -2px;
 }

 .stat-label {
     font-size: 1rem;
     color: #1a1a1a;
     font-weight: 400;
 }


 .stats-wrapper {
     flex-direction: row;
     gap: 20px;
 }

 .what-we-do-content h4 {
     font-size: 3rem;
 }

 .case-card {
     position: relative;
 }



 .case-media {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 16;
     overflow: hidden;
     border-radius: 20px;
 }

 .case-image,
 .case-video {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 0.5s ease;
 }

 .case-image {
     opacity: 1;
     z-index: 1;
 }

 .case-video {
     opacity: 0;
     z-index: 2;
     pointer-events: none;
 }

 .case-card:hover .case-image {
     opacity: 0;
 }

 .case-card:hover .case-video {
     opacity: 1;
 }

 .case-description {
     font-size: 2.5rem;
     padding: 1rem 0px;

 }

 .what-we-do-page-list-sec {
     position: relative;
     padding: 0px 100px 100px 100px;
 }

 .what-we-do-page-list-sec a {
     text-decoration: none;
     color: #000000;
 }

 .what-we-do-page-list-col {
     display: flex;
     flex-direction: column;
     row-gap: 160px;
 }

 .padding-top-space {
     padding-top: 400px;
 }

 .what-we-do-page-list-row {
     display: flex;
     justify-content: space-between;
 }

 .what-we-do-page-list-row .what-we-do-page-list-col.col-md-6 {
     flex: 0 0 auto;
     width: 45%;
 }

  /* What We Do Page New Design Divya - 17-7-25 */



 


/* About Us Page Meet the founders sections style Divya 24-7-25 */
.founders-container-sec {
    position: relative;
    margin-top: 5rem;
}
.founders {
    padding: 10vh 10vw
}

.founders,
.founders-content {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content
}

.founders-content {
    display: flex;
    flex-direction: column;
    gap: 5vh
}

.founders-container {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.founders-container-item {
    width: 39.5vw;
    height: 39.5vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative
}

.founders-container-item-content {
    width: 39.5vw;
    height: 39.5vw;
    pointer-events: all;
    perspective: 5000px;
    cursor: pointer
}

.founders-container-item-content.flipped .founders-container-item-content-inside {
    transform: rotateX(180deg)
}

.founders-container-item-content-inside {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s ease;
    transform-style: preserve-3d
}

.founders-container-item-content-inside-back,
.founders-container-item-content-inside-front {
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5vw;
    background-color: #0f1011;
    box-shadow: inset 0 0 0 calc(1px + 0px) hsla(0, 0%, 100%, .05); 
    transition: .5s ease;
    background-image: radial-gradient(140% 107.13% at 50% 10%, transparent 40%, hsla(0, 0%, 100%, .05) 75%, hsla(0, 0%, 100%, .075) 100%);
    overflow: hidden
}

.founders-container-item-content-inside-front-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain
}

.founders-container-item-content-inside-front:hover {
    filter: brightness(1.1)
}

.founders-container-item-content-inside-front-content {
    position: relative;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: .5vh
}

.founders-container-item-content-inside-front-content-box {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 100%;
    border: 1px solid hsla(0, 0%, 100%, .05);
    background-color: hsla(0, 0%, 100%, .1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s ease
}

.founders-container-item-content-inside-front-content-box-icon {
    width: 1.25vw;
    height: 1.25vw;
    color: #fff;
    transition: .5s ease
}

.founders-container-item-content-inside-back {
    justify-content: flex-start
}

.founders-container-item-content-inside-back-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.founders-container-item-content-inside-back {
    transform: rotateX(180deg)
}

.founders-container-item-content-inside-back-grid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 39.5vw;
    height: 39.5vw;
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .05) 1px, transparent 0), linear-gradient(180deg, hsla(0, 0%, 100%, .05) 1px, transparent 0);
    background-size: 4vw 4vw;
    background-position: 50%;
    z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #010101 20%, #010101 80%, transparent), linear-gradient(180deg, transparent, #010101 20%, #010101 80%, transparent);
    -webkit-mask-composite: destination-in;
    mask-image: linear-gradient(90deg, transparent, #010101 20%, #010101 80%, transparent), linear-gradient(180deg, transparent, #010101 20%, #010101 80%, transparent);
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect
}

.founders-container-item-content-inside-front:hover .founders-container-item-content-inside-front-content-box {
    background-color: #fff
}

.founders-container-item-content-inside-front:hover .founders-container-item-content-inside-front-content-box-icon {
    transform: rotate(90deg);
    color: #000
}
.white {
    color: #fff;
}

.founders-container-item-content-inside {
  transition: transform 1s ease;
  transform-style: preserve-3d;
}

.founders-container-item-content.flipped .founders-container-item-content-inside {
  transform: rotateX(180deg);
}
.meet-team-section {
    position: relative;
    padding: 0px 100px 40px 100px;
    background-color: #ffffff;
    color: #000000;
}
.meet-team-card {
    position: relative;
    margin-bottom: 2rem;
}
.meet-team-card h6 {
    font-size: 1.75rem;
    font-weight: bold;
}
.meet-team-card img {
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
}
/* About Us Page Meet the founders sections style End Divya 24-7-25 */