/* ==========================================================================
1. Hero Section Layout & Structural Styles
========================================================================== */

@media (max-width:767px){
:root {
/* Typography */
--font-87: 8.7rem;
--font-69: 6.9rem;
--font-53: 5.3rem;
--font-48: 4.8rem;
--font-46: 4.6rem;
--font-42: 4.2rem;
--font-36: 3.6rem;
--font-30: 3rem;

/* Small Fonts */
--font-28: 2.8rem;
--font-26: 2.6rem;
--font-24: 2.4rem;
--font-22: 2.2rem;
--font-21: 2.1rem;
--font-20: 2rem;
--font-18: 1.8rem;
--font-16: 1.6rem;
--font-14: 1.4rem;
--font-13: 1.3rem;
--font-12: 1.2rem;
--font-10: 1rem;
}
html {

font-size: 10px;
}
}


.hero-section {
display: flex;
align-items: center;
padding-block: 20rem;
overflow: hidden;
position: relative;
width: 100%;}

.hero-slider {
width: 100%;
margin-inline: 2rem;
position: relative;}

.hero-grid {
display: grid;
grid-template-columns: 0.9fr 0.9fr;
align-items: center;
gap: clamp(4rem, 2vw, 11rem);
width: 100%;}

.hero-media {
position: relative;
display: grid;
align-items: center;
justify-items: center;}

.hero-media>* {
grid-area: 1 / 1;}

.hero-circle-pattern {
width: 100%;
z-index: 1;}

.hero-circle-pattern img {
max-width: 100%;
height: auto;
display: flex;
margin: auto;
text-align: center;
justify-content: center;
align-items: center; opacity:0;}

.hero-image { position: relative; z-index: 2; margin: 0; width: 100%; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.06)); -webkit-filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.06));}

.hero-image img {
width: 100%;
max-width: 100rem;
height: auto;
display: block;
}

.hero-content {display: flex;align-items: center;}
.hero-content-inner {max-width: 100rem;width: 100%;}
.hero-title {
font-size: var(--font-53);
line-height: 1.25;
font-weight: normal;
margin: 0 0 2rem 0;
}

.hero-title span {
color: var(--primary);
font-weight: 600;
}

.hero-description {
margin: 0;
max-width: 70rem;
color: var(--text-muted);
font-size: var(--font-24);
line-height: 1.6;
font-weight: 400;
}

/* ==========================================================================
2. Premium Premium Transition Engine (State-Based)
========================================================================== */

/* Reset base states for all elements inside un-active slides */
.hero-slider .swiper-slide .hero-title,
.hero-slider .swiper-slide .hero-description,
.hero-slider .swiper-slide .hero-image,
.hero-slider .swiper-slide .hero-circle-pattern {
opacity: 0;
will-change: transform, opacity, clip-path;
}

/* Typography base exit alignments */
.hero-slider .swiper-slide .hero-title {
transform: translateY(40px);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}
.home_casestudies .title_head b>br{display: none;}
.hero-slider .swiper-slide .hero-description {
transform: translateY(30px);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}

/* Hero Image: Sleek scale-down & cinematic left-to-right clip-path mask reveal */

.hero-slider .swiper-slide .hero-image {
opacity: 0;

transform: scale(1.05);

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

filter: blur(6px);

transition:
clip-path 2s cubic-bezier(0.76, 0, 0.24, 1),
transform 2s cubic-bezier(0.16, 1, 0.3, 1),
filter 1.5s ease,
opacity 0.8s ease;
}
/* Background Decorative Circle Pattern */
.hero-slider .swiper-slide .hero-circle-pattern {
transform: scale(0.9) rotate(-4deg);
transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease;
}

/* ==========================================================================
3. Choreographed Active Slide Entry
========================================================================== */

/* Step 1: Main product image reveals first and crisp */


.hero-slider .swiper-slide-active .hero-image {
opacity: 1;

transform: scale(1);

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

filter: blur(0);

transition-delay: 0.1s;
}

/* Step 2: Decorative backdrop visual modernizes underneath */
.hero-slider .swiper-slide-active .hero-circle-pattern {
opacity: 0.35;
/* Lowered opacity keeps layout clean, focus on text/product */
transform: scale(1) rotate(0deg);
transition-delay: 0.25s;
}

/* Step 3: Title smoothly glides up into place */
.hero-slider .swiper-slide-active .hero-title {
opacity: 1;
transform: translateY(0);
transition-delay: 0.45s;
}

/* Step 4: Supporting copy trails delicately at the tail end */
.hero-slider .swiper-slide-active .hero-description {
opacity: 0.85;
/* Softened text contrast delivers high-end editorial feel */
transform: translateY(0);
transition-delay: 0.6s;
}

/* ==========================================================================
4. Refined Navigation Progress Pagination UI
========================================================================== */
.hero-pagination {
position: absolute;
left: 53% !important;
bottom: 15rem !important;
display: flex;
gap: 1.2rem;
z-index: 10;
top: inherit !important;
}

.hero-pagination .swiper-pagination-bullet {
width: 4.5rem;
height: 2px;
/* Thinner line profiles look sharper and cleaner */
border-radius: 0;
background: #fff;
/* Subtle transparent background trail */
opacity: 1;
margin: 0 !important;
position: relative;
overflow: hidden;
cursor: pointer;
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-pagination .swiper-pagination-bullet-active {
width: 9rem;
/* Expands smoothly when tracking active index */
}

.hero-pagination .swiper-pagination-bullet .pagination-progress {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--secondary, #fff);
transform: scaleX(0);
transform-origin: left center;

}

.hero-pagination .swiper-pagination-bullet-active .pagination-progress {
animation: activeProgressFill var(--autoplay-duration) linear forwards;
}
.hero-slider .swiper-slide {
overflow: hidden;
}

.hero-slider .hero-content {
overflow: hidden;
}

.hero-slider .hero-content > * {
will-change: transform, opacity;
}
@keyframes activeProgressFill {
0% {
transform: scaleX(0);
}

100% {
transform: scaleX(1);
}
}

@media (min-width:2399px) {

.hero-section {
padding-block: 36rem;
}
}

/* ==========================================================================
5. Responsive Media Queries
========================================================================== */
@media (max-width: 1464px) {
.hero-content-inner {
max-width: 100rem;
width: 100%;
padding-inline: 0 5rem;
}
}

@media (max-width: 1362px) {
.hero-content-inner {
max-width: 100rem;
width: 100%;
padding-inline: 0 10rem;
}
}




/*home future panel start here*/
.home_future b {
font-size: var(--font-24);
display: block;
}

.home_future h1 {
font-size: var(--font-260);
color: var(--color-4e);
line-height: 0.83;
font-weight: bold;
margin: 0;
margin-left: -1rem;
}

.home_future p {
font-size: var(--font-24);
font-family: var(--font-zalando);
font-weight: 300;
}

.home_future {
padding-top: 0;
padding-bottom: 5rem;
}

/* =========================
Progress Circle
========================= */

.progress-circle {
width: 75rem;
/* height: 100%; */
border-radius: 50%;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
position: absolute;
top: -45.4rem;
right: -6vw;
/* transform: translateY(-56%); */
/* margin-top: -66rem; */
}


.home_block_common .col-lg-7 {
position: relative;
}

/* =========================
CSS Variables
========================= */

@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}

@property --angle180 {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}

@property --angle270 {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}

/* =========================
Default State (No Animation)
========================= */

.progress-circle img {
width: 100%;
object-fit: cover;

--angle: 0deg;
--angle180: 0deg;
--angle270: 0deg;

animation: none;

transition:
--angle 0.8s ease,
--angle180 0.8s ease,
--angle270 0.8s ease;

border: 0;
background: none;
outline: 0;
box-shadow: none;
padding: 0;
margin: 0;


}

/* =========================
Scroll Trigger Animation
========================= */

.progress-circle.active img {
animation: fill .8s cubic-bezier(.65, 0, .35, 1) forwards;
}



/* =========================
Quadrant Masks
========================= */

.progress-circle img:nth-child(2) {
-webkit-mask: conic-gradient(from 0deg at left bottom,
#000 0deg calc(var(--angle)),
transparent calc(var(--angle)) 360deg);

mask: conic-gradient(from 0deg at left bottom,
#000 0deg calc(var(--angle)),
transparent calc(var(--angle)) 360deg);


}

.progress-circle img:nth-child(3) {
mask: conic-gradient(from 0deg at right top,
#000 0deg calc(var(--angle270)),
transparent calc(var(--angle270)) 360deg);
}

.progress-circle img:nth-child(4) {
mask: conic-gradient(from 0deg at left top,
#000 0deg calc(var(--angle180)),
transparent calc(var(--angle180)) 360deg);
}

/* =========================
Z Index Order
========================= */

.progress-circle img:nth-child(1) {
z-index: 4;
}

.progress-circle img:nth-child(2) {
z-index: 3;
}

.progress-circle img:nth-child(3) {
z-index: 2;
}

.progress-circle img:nth-child(4) {
z-index: 1;
}


/* =========================
Fill Animation
========================= */

@keyframes fill {
from {
--angle: 0deg;
--angle180: 0deg;
--angle270: 0deg;
}


to {
--angle: 90deg;
--angle180: 180deg;
--angle270: 270deg;
}


}

.tp_space {
display: grid;
}

.tp_space>* {
grid-area: 1/1;
}

.home_block_common {
background: transparent radial-gradient(closest-side at 50% 0%, #94A3B1 0%, #6C7682 100%) 0% 0% no-repeat
padding-box;
padding-block: 7.9rem 14rem;
color: #fff;
position: relative;
}

.home_future_content p {
font-size: var(--font-18);
margin-bottom: 7rem;
font-weight: 300;
line-height: 1.6;
color: #fff;
}

.home_future_panel {
padding-inline: 0rem;
}

.home_future_panel .read_view a {
color: #fff;
align-items: center;
}



.home_future .row {
position: relative;
}

.home_capablities {
padding-block: 30rem 0;
}

.capblities_slide_block {
position: relative;
}

.home_capablities .title_head b {
color: #fff;
display: block;
}

.cap_grid {
position: absolute;
left: -15rem;
}

.home_capablities .title_head blockquote {
color: #fff;
width: 50%;
}

.home_capablities .title_head p {
color: #fff;
font-family: var(--font-zalando);
max-width: 104rem;
}

.capblities_slide_block {
position: relative;
}

.capblities_slide_block:hover h3 {
color: var(--color-ffd);
}

.home_capablities .title_head a {
color: #fff;
border-color: var(--color-ffd);
align-items: center;
}

.home_capablities .title_head {
max-width: 90%;
}

.cicle_num figure {
background: #000000;
border-radius: 0 0 40rem;
}

.cicle_num {
display: grid;
align-items: center;
}

.cicle_num>* {
grid-area: 1/1;
}

.home_future_content2 {
padding: 0rem 9rem 0 4rem;
}

.common_group1 {
display: flex;
gap: 1rem;
margin-top: 1rem;
}

.common_group1 strong {
font-size: var(--font-116);
line-height: 1;
letter-spacing: -7.77px;
font-weight: bold;
}

.home_future_content2 p {
margin-bottom: 0;
}

.common_group1 p b {
display: block;
font-size: var(--font-36);
margin: 0;
line-height: 1;
font-weight: bold;
}

.common_group1 p {
font-size: var(--font-18);
margin: 1rem 0 0;
line-height: 1.22;
font-family: var(--font-zalando);
}

@media (min-width:2099px) {

.progress-circle {
/* top: -52.9rem; */
/* width: 90rem; */
right: -5vw;
}

.home_future_panel {
padding-inline: 0;
}

}

@media (min-width:2399px) {
.progress-circle {
top: -53.9rem;
width: 92rem;
right: -6.7vw;
}


}

@media (max-width:1280px) {
.progress-circle {
right: -2vw;
}
}

/*--------------home capbilities css start here----------*/
.capbilities {
padding-block: 9rem 0;
}

.capbilities .slider-outer-wrapper {
margin-left: calc((100vw - var(--container)) / 2 - 0.5rem);
overflow: hidden;
}

@media (max-width: 768px) {
.capbilities .slider-outer-wrapper {
padding-left: 0;
margin: 0;
}
}

.capbilities-slider {
overflow: visible !important;
width: 100%;
}

.capbilities .swiper-slide {
height: auto;
display: flex;
flex-direction: column;
}

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

.capbilities-image:after {
content: "";
position: absolute;
left: auto;
right: 0;
background-color: #6d7682;
height: 4rem;
width: 4rem;
bottom: 0;
clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.capbilities-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-bottom-right-radius: 30rem;
}

.capbilities-content {
margin-block: 4rem 0;
}

.capbilities-content h3 {
font-size: var(--font-21);
font-weight: bold;
line-height: 1.4;
margin: 0;
overflow: hidden;
color: #ffffff;
}


/*product and service css satrt here*/

.products-services {
padding: 10rem 0;
background: #F0EFEF;
overflow: hidden;
position: relative;
}

/* Slider */

.productSlider {
overflow: visible;
}
@media (min-width:991px) {
    .products-services .prodslide_wrap{margin-left: calc((100vw - var(--container)) / 2 - 0.5rem);overflow: hidden;}
}

.productSlider .read_view a:hover img {
transform: translate(.5rem, 0px);
}

.swiper-slide {
height: auto;
}

.product-card {
transition: .4s;
}

.product-image {
display: flex;
align-items: flex-end;
justify-content: center;
margin-left: -17rem;
}

.product-image img {
max-width: 100%;
object-fit: contain;
transition: 1s ease;

}

@media (min-width: 1899px) and (max-width: 2550px) {
.product-image img {
max-width: 1092px;
object-fit: contain;
transition: 1s ease;
}

}

.product-content {
margin-top: 2.5rem;
}

.product-content b {
font-size: var(--font-20);
margin-bottom: 3rem;
display: block;
}

.product-content p {
color: #000;
font-size: var(--font-16);
line-height: 1.6;
margin: 0;
max-width: 44%;
}

.products-services .title_head p {font-family: var(--font-zalando);}

/* Active Animation */


/* Navigation */

.swiper-nav {
display: flex;
gap: 1rem;
margin-top: 0;
}

.swiper-button-prev,
.swiper-button-next {
position: relative;
top: auto;
left: auto;
right: auto;
width: 50px;
height: 50px;
/* border: 1px solid #ddd; */
border-radius: 50%;
color: #fff;
margin: 0;
}


.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 18px;
}

.product-content .read_view {
position: absolute;
right: 0;
bottom: 0;
}

.product-content b {
position: relative;
}


.swiper-slide-active .product-content b:after {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
z-index: 1;
top: 1.2rem;
background: #E50019;

opacity: 28%;
}

.product-content b:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
/* background: #f5f5f5; */
z-index: 1;
}

.product-content span {
position: relative;
z-index: 22;
background: #f0efef;
padding-right: 2rem;
display: inline-block;
}

.productSlider .read_view a {
color: var(--color-e5);
border-color: var(--color-e5);
font-weight: 500;
}

.products-services .swiper-button-prev {
position: absolute;
top: 50%;
left: 0;
width: 5rem;
height: 5rem;
}

.products-services .swiper-button-next {
position: absolute;
top: 50%;
right: 0;
width: 5rem;
height: 5rem;
}

@media(max-width:991px) {

.section-heading h2 {
font-size: 38px;
}

}

/*home eng css*/

.home_eng {
background: #F0EFEF;
padding-block: 8rem 13rem;
}

.home_eng_box {
display: grid;
margin-top: 5rem;
}
.home_eng_box>figure>img{border-radius: 30rem 0px; }

.home_eng_box>* {
grid-area: 1/1;
}

.home_eng_box p {
color: #fff;
font-size: var(--font-18);
width: 60rem;
margin-top: auto;
padding: 5rem 0rem 5.9rem 5.5rem;
font-weight: 200;
position: relative;
font-family: var(--font-zalando);
}


.home_happeningbox em {
font-family: var(--font-rubik);
font-style: normal;
font-size: var(--font-16);
}



.mobile-img {
display: none;
}

.desktop-img {
display: block;
}




@media (min-width:2352px) {
.home_eng_box p {
width: 64rem;
}
}

.home_eng_box .grid_1 figure>img {
margin-left: 0;
width: 58.0rem;
height: 397px;
}

/*home people css start here*/


.engineering-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
}

.engineering-wrapper {
width: var(--container);
display: grid;
grid-template-columns: 62% 50%;
background: #fff;
position: relative;
}



.engineering-wrapper:before {
content: "";
width: 100%;
position: absolute;
left: -100%;
top: 0;
background: #fff;
height: 100%;
z-index: 99;
}

/* LEFT CONTENT */
.content-side {
padding: 8rem 0;
display: flex;
flex-direction: column;
justify-content: center;
}

.content-side p {
max-width: 60rem;
font-family: var(--font-zalando);
}



.bottom-links {
margin-top: 8rem;
display: flex;
flex-direction: column;
gap: 1.4rem
}

@media (min-width:2399px) {
.content-side p {
max-width: 68rem;
}

.side-pattern {
width: 32rem;
}

.engineering-wrapper {
grid-template-columns: 67% 50%;
}

}

/* RIGHT SIDE */
.visual-side {
display: grid;
grid-template-columns: 1fr 0rem;
}

.image-holder {
background: #d9d9d9;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.image-holder img {
width: 100%;
height: 100%;
object-fit: cover;
}

.side-pattern {
display: flex;
flex-direction: column;
width: 32rem;
}

.red-block {
flex: 1;
background: var(--color-e5);
height: 50%;
}

.black-block {
flex: 1;
background: #000;
}

.bottom-links a {
color: var(--color-e5);
text-decoration: none;
border-bottom: 1.9px dashed;
display: inline-block;
font-weight: 600;
width: fit-content;
font-size: var(--font-16);
font-family: var(--font-rubik);
}

@media(max-width:991px) {

.engineering-wrapper {
grid-template-columns: 1fr;
width: 100%;
}

.visual-side {
order: 1;
min-height: inherit;
grid-template-columns: 78% auto;
}

.content-side {
padding-inline: 2rem;
padding-block: 5rem;
}

.side-pattern {
display: flex;
flex-direction: column;
width: 24rem;
}


}


/*hpme case studies css start here*/

.home_casestudies {
padding-block: 15rem;
}


.box_item {
overflow: hidden;
background: #fff;
}
.home_casestudies .box_item { border-radius:15rem 0;}
.box_item figure {
margin: 0;
}

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

.box_item p {
background: #fff;
padding-block: 4rem;
padding-inline: 3rem;
font-size: var(--font-18);
font-family: var(--font-zalando);
}


.home_casestudies .title_head {
position: relative;
}

.home_casestudies .read_view {
position: absolute;
right: 0;
top: 0;
}

.home_casestudies .title_head blockquote {
width: 85%;
margin-bottom: 5rem;
}
@media (max-width:1950px) {
    .home_casestudies .box_item { border-radius: 10rem 0; }
}
/* Mobile Slider */
@media (max-width: 767px) {

.home_casestudies {
padding-block: 4rem;
}

.home_casestudies .title_head blockquote {
width: 100%;
margin-bottom: 0;
}

.home_casestudies .read_view {
position: static;
margin-top: 4.8rem;
padding-inline: 2rem;
}

.case_studiesbox {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0;
}

.case_studiesbox::-webkit-scrollbar {
display: none;
}

.box_item {
flex: 0 0 85%;
scroll-snap-align: start;
}

.box_item p {
padding: 2.1rem 5.3rem 1.7rem 3.2rem;
font-size: var(--font-14);
line-height: 2.3rem;
font-weight: 300;
}

}

/*home happening css*/
.home_eng .title_head>blockquote>br{
    display: none;

}

.home_happeningbox {
display: grid;
grid-template-columns: 32% 66.5%;
gap: 2rem;
}

.happening_box_item {
display: grid;
}

.happening_box_item>* {
grid-area: 1/1;
}

.happening_box_item {
display: flex;
margin-bottom: 0;
background-color: #f8f8f8;
height: 24.0rem
}
.happening_box_item>figure img{height: 24.0rem;}
.happening_text2 p {
margin-top: 2rem;
font-size: var(--font-18);
font-family: var(--font-zalando);
}

.date {
font-size: var(--font-16);
}

.date b {
position: relative;
}

.date b:after {
content: "-";
margin-inline: .5rem;
font-weight: 100;
font-size: 3.5rem;
align-content: center;
position: relative;
top: .5rem;
color: var(--color-e5);
}

.happening_text2 {
align-content: center;
padding-inline: 8rem;
}

.happening_item {
display: grid;
position: relative;
align-items: flex-end;
}

.happening_item>* {
grid-area: 1/1;
}

.happening_text1 {
padding: 3rem;
height: fit-content;
margin-top: auto;
padding-block: 5rem;
}

.grid_2 {
position: absolute;
left: -12rem;
z-index: -1;
width: 53.7rem;
top: 0;
}

.home_happening {
padding-bottom: 20rem;
}

.home_happening .title_head {
position: relative;
padding-bottom: 5rem;
}

.home_happening .read_view {
position: absolute;
right: 0;
top: 0;
}

.happening_item figure {
height: 100%;
}

.happening_item figure img {
height: 100%;
object-fit: cover;
border-radius: 15rem 0;
}
.happening_item .grid_2 figure img{ border-radius:0;height: 100%;}
.happening_box_item>figure img{
border-radius:0 0 15rem 0;
}
.happening_box_item:last-child {
margin-top: 2rem;
}

.home_future_panel .read_view a svg {
stroke: currentColor;
color: var(--color-ffd);
width: .6rem;
}

.home_capablities .title_head a svg {
stroke: currentColor;
color: var(--color-ffd);
width: .6rem;
}

@media (max-width:992px) {


.hero-slider {
width: 100%;
margin-inline: 0;
}



.home_future {
padding-top: 8rem;
padding-bottom: 3rem;
}

.home_future p {
font-size: 1.4rem;
display: none;
}

body .home_future_panel {
position: relative;
z-index: 1;
}

.home_capablities {
padding-block: 10rem 0;
padding-inline: 0;
}

.home_capablities .title_head blockquote {
color: #fff;
width: 100%;
}

.home_block_common {
padding-block: 0rem 9rem;
}

.capbilities-content {
margin-block: 2rem 0;
}

.home_block_common:before {
content: "";
background: #ebebeb;
position: absolute;
top: 0;
height: 24rem;
z-index: 1;
left: 0;
width: 100%;
}

.home_future_content p {
color: #000;
margin-bottom: 3rem;
}

.home_future_panel .read_view a {
color: var(--primary);
}

.home_future_panel .read_view a svg {
stroke: currentColor;
}

.home_capablities .title_head {
max-width: 100%;
padding-inline: 2rem 4rem;
}

.capbilities-content h3 {
text-align: center;
}

.capbilities {
padding-block: 4rem 0;
}

.product-content p,
.swiper-slide-active .product-content b:after,
.product-content .read_view {
display: none;
}

.product-content {
margin-top: 2.5rem;
text-align: center;
}

.home_eng {
padding-block: 8rem 0;
overflow: hidden;
}

.grid_1 figure img {
height: 36rem;
transform: translateY(100%);
}

.home_eng_box figure img {
height: 50rem;
object-fit: cover;
position: relative;
z-index: 1;
opacity: 1 !important;
clip-path: inherit;
}

.grid_1 {
position: relative;
z-index: 0;
overflow: hidden;
}

.home_eng .title_head {
padding-inline: 1rem;
}

.products-services {
padding: 5rem 0 0;
}

.home_eng_box p {
position: relative;
z-index: 2;
width: 100%;
padding: 3rem;
}

.grid_1 figure {
margin-left: -6rem;
width: 100%;
}


.engineering-section {
background: #fff;
}

.engineering-wrapper:before {
display: none;
}

.home_casestudies .title_head {
position: relative;
padding-inline: 3rem;
padding-bottom: 5rem;
}

.home_casestudies .container {
margin: 0;
max-width: 100%;
}

.home_happeningbox {
display: grid;
grid-template-columns: 100%;
gap: 2rem;
}

.happening_text2 {
padding-inline: 2rem;
padding-bottom: 2rem;
}

.happening_box_item {
display: block;
}

.home_happening {
padding-bottom: 5rem;
}

.home_casestudies .title_head .read_view {
display: none;
}

.home_casestudies .read_view a {
border-bottom: 1px dotted var(--color-e5);
padding-bottom: .5rem;
color: var(--color-e5);
font-family: var(--font-rubik);
}

.home_happening {
padding-bottom: 8rem;
}

.home_happening .title_head .read_view {
display: none;
}

.home_happening .read_view a {
border-bottom: 1px dotted var(--color-e5);
padding-bottom: .5rem;
color: var(--color-e5);
font-family: var(--font-rubik);
}

.home_happening .title_head {
padding-bottom: 3rem;
position: relative;z-index: 2;
}

.home_happening .read_view {
position: static;
margin-top: 2rem;
}

.home_happeningbox {
grid-template-columns: 1fr;
}


.happening_item {
margin-bottom: 2rem;
}

/* Slider */
.happening_item2 {
display: flex;
gap: 0.6rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0;
}

.happening_item2::-webkit-scrollbar {
display: none;
}

.happening_box_item {
flex: 0 0 60%;
scroll-snap-align: start;
margin-top: 0 !important;
display: flex;
flex-direction: column;
background: #fff;
}

.happening_box_item figure {
width: 100%;
}

.happening_box_item figure img {
width: 100%;
display: block;
}

.happening_text2 {
padding: 2rem;
}

.happening_text2 p {
margin-top: 1rem;
}

.product-image {
margin-left: 0;
}
}





.home_future_content .futur-shape {
display: none;
}
.home_future_content .circle4-img {
display: block;
}
.product-circle {
display: none;
}
@media (max-width: 991px) {
.hero-section {
padding-block: 10rem;
}
.home_eng .title_head>blockquote>br{
    display: block;

}
.hero-grid {
grid-template-columns: 1fr;
gap: 0;
text-align: center;
}
.home_future {
padding-top: 0;
}
.hero-content {
justify-content: center;
order: 2;
}

.hero-media {
order: 1;
max-width: 55rem;
margin: 0 auto;
}

.hero-content-inner {max-width: 100%;}
.hero-description {margin-inline: auto;}
.product-image img {transition: none;}
.hero-pagination{bottom: 0!important;}
.progress-circle {position: relative;}
.progress-circle {width: 64rem;top: -5rem;right: 0;left: 0;margin: 0 auto;}
.home_block_common .col-lg-7 {margin-top: 11rem;}
.home_block_common:before{height: 48.5rem;}
.hero-slider .hero-content {margin-bottom: 5.9rem;}
.hero-pagination {position: absolute;left: 50% !important;right: auto !important;
top: inherit !important;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 1.2rem;
z-index: 10;
}
.home_future_content .futur-shape {
display: block;
}
.home_future_content .circle4-img {
display: none;
}
/* .home_future_content .cicle_num figure {
display: none;
} */
.cicle_num {background-color: #FF0000;}
.common_group1 strong {
font-size: var(--font-53);
line-height: 1;
letter-spacing: -2.77px;
}
.home_future_content2 {
padding: 0rem 4rem 0 4rem;
display: none;
}
.home_block_common .cap_grid {
right: 0;
display: block;
}

.cap_grid figure img {
max-width: 3.3rem;
height: 16.6rem;
float: right;
}

.capbilities-image img{
border-bottom-right-radius:10rem;}
.home_block_common {
padding-block: 0rem 2.7rem;
}

.product-image {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}


.product-circle {
display: none !important;
}


.product-main-img {
position: relative;
width: 70%;
height: auto;
object-fit: contain;
z-index: 2;
}


/* =========================
ACTIVE SLIDE
========================= */
/* 
.swiper-slide-active .product-image {
background: transparent;
}

.swiper-slide-active .product-circle {
display: block !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto;
z-index: 1;
max-width: 80%;
}

.swiper-slide-active .product-main-img {
width: 100%;
max-width: 70%;
position: relative;
z-index: 2;
} */


/* =========================
UNACTIVE SLIDES
========================= */
/* 
.products-services .swiper-slide:not(.swiper-slide-active) .product-image {
display: flex;
align-items: center;
justify-content: center;
}
.products-services .swiper-slide.swiper-slide-next ,.products-services .swiper-slide.swiper-slide-prev{
background: #fff;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-slide:not(.swiper-slide-active) .product-circle {
display: none !important;
}
.swiper-slide:not(.swiper-slide-active) .product-main-img {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.products-services .productSlider {padding-top: 20rem;}
.products-services .swiper-button-prev{position: relative;} */


/* =========================================
   MOBILE / TABLET ONLY
   MAX 991px
========================================= */

@media (max-width: 61.9375rem) {
.productSlider {
    padding-top: 8rem;
}
    .products-services .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .products-services .product-image {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* CENTER CIRCLE */

    .products-services
    .swiper-slide-active
    .product-circle {
        display: block !important;

        position: absolute;

        top: 50%;
        left: 50%;

        width: 100%;
        max-width: 100%;
        height: auto;

        transform: translate(-50%, -50%);

        z-index: 1;
    }

    /* CENTER PRODUCT */

    .products-services
    .swiper-slide-active
    .product-main-img {
        position: relative;

        width: 100%;
        max-width: 80%;

        height: auto;

        margin: 0 auto;

        object-fit: contain;

        z-index: 2;
    }

    /* HIDE CIRCLE FROM SIDE */

    .products-services
    .swiper-slide:not(.swiper-slide-active)
    .product-circle {
        display: none !important;
    }

    /* SIDE WHITE CIRCLE */

    .products-services
    .swiper-slide-prev .product-image,

    .products-services
    .swiper-slide-next .product-image {
        min-height: 0;

        aspect-ratio: 1 / 1;

        background: #fff;

        border-radius: 50%;

        overflow: hidden;

        display: flex;

        align-items: center;

        justify-content: center;
    }

    /* SIDE PRODUCT */

    .products-services
    .swiper-slide-prev
    .product-main-img,

    .products-services
    .swiper-slide-next
    .product-main-img {
        width: 100%;
        max-width: 100%;

        height: auto;

        object-fit: contain;
    }

    /* SIDE CONTENT HIDE */

    .products-services
    .swiper-slide-prev
    .product-content,

    .products-services
    .swiper-slide-next
    .product-content {
        display: none !important;
    }
}


/* =========================================
   767px
========================================= */

@media (max-width: 47.9375rem) {


    .products-services
    .swiper-slide-active
    .product-circle {
        width: 100%;
        max-width: none;
    }

    .products-services
    .swiper-slide-active
    .product-main-img {
        max-width: 90%;
    }
}


/* =========================================
   575px
========================================= */

@media (max-width: 35.9375rem) {


    .products-services
    .swiper-slide-active
    .product-circle {
        width: 100%;
    }

    .products-services
    .swiper-slide-active
    .product-main-img {
        max-width: 90%;
    }
}


/* =========================================
   375px
========================================= */

@media (max-width: 23.4375rem) {

    .products-services
    .swiper-slide-active
    .product-circle {
        width: 100%;
    }

    .products-services
    .swiper-slide-active
    .product-main-img {
        max-width: 90%;
    }
}


/* =========================================
   350px
========================================= */

@media (max-width: 21.875rem) {

    .products-services
    .swiper-slide-active
    .product-circle {
        width: 100%;
    }

    .products-services
    .swiper-slide-active
    .product-main-img {
        max-width: 90%;
    }
}




.home_eng_box>figure>img{ border-radius:0 ;}
.title_head blockquote {
line-height: 1;
}
.home_casestudies .box_item {
border-radius: 0 0 12rem 0;}
.box_item.swiper-slide:after {
content: "";
position: absolute;
left: auto;
right: 0;
background-color: #EBEBEB;
height: 4rem;
width: 4rem;
bottom: 0;
clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
.happening_item figure img {
border-radius: 0 0 12rem 0;}
.happening_item .right_curve2 {
position: relative;
display: block;
margin: 0;
line-height: 0;
overflow: visible;
}

.happening_item .right_curve2 img {
display: block;
width: 100%;
height: auto;

}

.happening_item .right_curve2::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 4rem;
height: 4rem;
background-color: #EBEBEB;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 10;
pointer-events: none;}
.happening_box_item {
height:auto;}
.happening_box_item>figure img{ border-radius:0 ;}
.happening_box_item {
height: 100%;}
.happening_box_item>figure img{height: auto;}
.happening_box_item {
position: relative;
background: rgb(255 255 255 / 30%);
overflow: hidden;
margin: 0;
border-radius: 0 0 0rem 0;
}
.happening_box_item::after {
content: "";
position: absolute;
right: -1px;
bottom: -1px;
width: 6.2rem;
height:6.2rem;
background: #EBEBEB;
/* clip-path: polygon(100% 0, 100% 100%, 0 100%); */
clip-path: polygon(130% 0, 100% 100%, 0 140%);
pointer-events: none;}
.home_casestudies {
padding-block: 8rem;}



.desktop-img {
display: none;
}

.mobile-img {
display: block;
}
.box_fixed .cicle_num {
position: relative;
}

.box_fixed .cicle_num figure {
position: relative;
margin: 0;
}

.box_fixed .cicle_num figure::after {
content: "";
position: absolute;
inset: 0;
background:rgb(255 15 0 / 49%);
z-index: 1;
pointer-events: none;
}

.box_fixed .cicle_num figure img {
display: block;
width: 100%;
}

}

@media (max-width: 767px) {
.hero-section {
padding-block: 10.3rem 7.9rem;
padding-inline: 0;
}

.hero-grid {
gap: 4rem;
}

.hero-circle-pattern {
width: min(85vw, 45rem);
}

.hero-title {
line-height: 1.15;
text-align: left;
font-size:var(--font-30);
}

.hero-description {
max-width: 100%;
text-align: left;
font-size: 1.5rem;
}

.hero-pagination {
text-align: left;
display: block
}
.hero-content-inner {
padding-inline: 0 6rem;
}
.home_future b {
font-size: var(--font-30);
line-height: 3rem;
}
.home_future h1 {
font-size: var(--font-87);
line-height: 1;
margin: 0;
}
.home_block_common .col-lg-7 {
margin-top: 10rem;
}
.home_future {
padding-bottom: 1.5rem;
}
.home_future_content p{ font-size: var(--font-14);line-height: 2.1rem;font-weight: normal;}
.home_future_content p {
margin-bottom: 0.8rem;
}
.common_group1 {display: block;margin-top: 0rem;}
.home_future_panel .read_view a svg {
stroke: rgb(228 35 36);
}
.read_view a {
border-bottom: 1px dotted #E50019;
padding-bottom: .5rem;
color: #E50019;
font-size: var(--font-14);
font-weight: 500;
line-height: 2.1rem;
}
.home_block_common:before {
height: 40rem;
}
.home_future_content2 {padding: 0rem 2rem 0 2rem;}
.home_capablities {
padding-block: 4rem 0;

}
.home_capablities .title_head b {
font-size: var(--font-16);
line-height: 3rem;
}
.title_head blockquote{
font-size: var(--font-30);
line-height: 3rem;
margin-bottom: 2.6rem;
}
.home_capablities .title_head p{
font-size: var(--font-16);
line-height: 2.5rem;
margin-bottom: 4.3rem;
}
.capbilities {
padding-block: 2rem 0;
}
.capbilities-content h3 {
font-size: var(--font-14);
line-height: 2.6rem;
}
.products-services {
padding: 3.5rem 0 0;
}
.title_head b {
font-size: var(--font-16);
line-height: 3rem;

}
.home_happening .title_head b {
font-size: var(--font-16);
line-height: 2.1rem;

}

.title_head p {
font-size: var(--font-16);
margin-bottom: 2.6rem;
line-height: 2.5rem;
}
.product-content b {
font-size: var(--font-12);
line-height: 1.6rem
}
.product-content span{padding: 0;}

.engineering-section .title_head p {font-size: var(--font-14);line-height: 2.1rem;}
.bottom-links {margin-top: 5rem;}
.bottom-links a {font-size: var(--font-14);line-height: 2.4rem;font-weight: normal;}
.home_casestudies {padding-block: 4rem;position: relative;z-index: 2;}
.home_casestudies .title_head b>br{display: block;}
.home_casestudies .title_head blockquote {font-size: var(--font-22);line-height: 2.5rem;margin-bottom: 0.8rem;}
.happening_text2 p{font-size: var(--font-12);line-height: 1.8rem;font-weight: 300;}
.home_happeningbox em {font-size: var(--font-10);line-height: 1.5rem;}
.home_happening {padding-bottom: 4rem;}
.progress-circle {width: 51rem;}
.common_group1 strong {font-size: var(--font-42);letter-spacing: -1.77px;}
}


@media (max-width:575px){
.container,
.container-inner {
--bs-gutter-x: 0;
padding-inline: 3.2rem;
margin-inline: 0;
margin: auto;
max-width: 100%;
}

.container,
.container-inner,
.inner-container {
--bs-gutter-x: 0;
padding-inline: 3.2rem;
margin-inline: 0;
margin: auto;
max-width: 100%;
}
.container-lg{ padding-inline: 3.2rem; margin: auto;
max-width: 100%;}
.home_capablities .title_head {
padding-inline: 0;
}
.home_eng .title_head {
padding-inline: 0;
}
.content-side {
padding-inline: 3.2rem;
padding-block: 4rem;
}
.home_casestudies .title_head {
padding-inline: 0;
padding-bottom: 5.8rem;
}
.home_casestudies .read_view {
padding-inline: 0;
}
.products-services .productSlider {
padding-top: 6rem;
}
.swiper-slide-active .product-main-img {
width: 100%;
max-width: 100%;

}
.swiper-slide-active .product-circle {
max-width: 100%;
}
.home_casestudies .container{padding-right: 0;}
.home_happening .container{padding-right: 0;}
.home_eng .container{padding-right: 0;}
.happening_item .right_curve2 {
padding-right: 3.3rem;
}
.progress-circle {
width: 43rem;
}
.home_block_common:before {
height: 42.3rem;
}
.common_group1 {
display: none;
}
.home_future_content p {
margin-bottom: 4.8rem;
}
.home_future_content2 {
padding: 0rem 5rem 0 2rem;
}
.hero-content-inner{padding-inline: 0;}
.home_eng .title_head blockquote{
font-size: var(--font-28);
}
}
@media (max-width:480px){
.hero-grid {
gap: 0rem;
}
.hero-slider .hero-content {
margin-bottom: 3.9rem;
}
.home_future_panel>p>b{font-weight: bold;}
.home_block_common .col-lg-7 {
margin-top: 8.5rem;
}
.progress-circle {
width: 40rem;
}
.home_future_content2 p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-bottom: 1.5;
display: none;
}

.home_block_common:before {
height: 39.3rem;
}
.home_capablities {
padding-block: 3rem 0;
}
.home_capablities .title_head blockquote {
max-width: 92%;
}
.home_capablities .title_head blockquote{
margin-bottom: 3.6rem;
}
.home_capablities .title_head p{padding-right: 2rem;}
.products-services .title_head p>br{display: none;}
.products-services .title_head p {padding-right: 3rem;}
.home_eng .title_head blockquote{max-width: 100%;}
.home_eng_box .grid_1 {
overflow: visible;
}
.home_eng_box .grid_1 figure>img {
margin-left: -3.5rem;
height: 50rem;
}
.grid_1 figure img{ transform:translateY(0);}
.home_eng_box p {
font-size: var(--font-16);
padding: 0 2.6rem 8rem 2.6rem;
font-weight: 200;
}
.engineering-section .title_head>blockquote>br{display: none;}
.engineering-wrapper .visual-side .image-holder {display: block;}
.engineering-wrapper .visual-side .image-holder>img {height: 24.1rem;}
.side-pattern {
display: flex;
flex-direction: row;
width: 19rem;
background: #000;
}

.home_casestudies .title_head blockquote {
max-width: 85%;
}
}


@media (max-width:450px){
.happening_item .grid_2 {
    left: -4rem;
    right: 0;
    width: 100%;
}
    .progress-circle {
        width: 36rem;
    }

}

@media (max-width:420px){
.progress-circle {
width: 32rem;
}
.home_block_common:before {height: 37.3rem;}
.home_capablities .title_head p {padding-right: 0rem;}
.products-services .title_head p {padding-right: 0rem;}
.home_eng .title_head blockquote {max-width: 90%;}
.home_eng_box figure img {height: 39.2rem;}
.home_eng_box .grid_1 figure>img {height: 39.2rem;}
.home_casestudies .title_head blockquote{max-width: 100%;}
.happening_box_item { border-radius: 0 0 0rem 0;}
.home_future .col-lg-8{padding: 0;}
.grid_2 {position: absolute;left: -4rem;width: 31.7rem;top: 0;}

}
@media (max-width:375px){
.progress-circle {width: 31rem;}

.home_future_content .col-lg-5{padding: 0;}
.home_block_common:before {height: 36.8rem;}
}
@media (max-width:350px){
.progress-circle {
width: 29rem;
}
.home_block_common:before {
height: 36.8rem;
}
.home_eng .title_head blockquote {
max-width: 96%;
}
.container,
.container-inner {
padding-inline: 1.5rem;
}

.container,
.container-inner,
.inner-container {
padding-inline: 1.5rem;
}
.container-lg{ padding-inline: 1.5rem;}
.content-side {
padding-inline: 1.5rem;

}

}


@media (min-width:768px) {
.caseStudiesSlider .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}

@media (max-width:1670px) {

.cap_grid {
left: -25rem;
}

}

@media (max-width:1499px) {

.cap_grid {
left: -35rem;
}

}

@media (max-width:1899px) {

.home_future_panel {
padding-inline: 0;
}

}



.home_happeningbox em span {
color: var(--color-e5);
}

@media (max-width:1879px) {

.footer-grid {
gap: 5rem;
}

}


.title_head .read_view a,
.productSlider .read_view a,
.home_future_panel .read_view a,
.home_capablities .title_head a {
    transition: all 0.3s ease-in-out;
}

.title_head .read_view a:hover,
.productSlider .read_view a:hover,
.home_future_panel .read_view a:hover {
    color: inherit;
    text-decoration: none;
}

.home_capablities .title_head a:hover {
    color: #000;
    text-decoration: none;
}
.home_future_panel .read_view a:hover {
    color: #000;
    text-decoration: none;
}
.bottom-links a {
    transition: color 0.3s ease-in-out;
}

.bottom-links a:hover {
    color: #000;
    text-decoration: none;
}