/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Framex - Windows and Doors HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Work css
08. Our Projects css
09. Intro Video css
10. How It Work css
11. Our Team css
12. Our Testimonials css
13. Our Faqs css
14. Contact Us css
15. Our Blog css
16. Footer css
17. About Us Page css
18. Services Page css
19. Service Single css
20. Blog Archive css
21. Blog Single css
22. Projects Page css
23. Project Single css
24. Team Page css
25. Team Single css
26. Pricing Page css
27. Testimonials Page css
28. Image Gallery css
29. Video Gallery css
30. FAQ's Page css
31. Contact Us Page css
32.	404 Error Page css
33. Responsive css
34. Home - Version 2 css
35. Home - Version 3 css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #181818;
	--secondary-color			: #ffffff;
	--bg-color					: #F6F5ED;
	--text-color				: #83827F;
	--accent-color				: rgb(230, 87, 87);
	--white-color				: #FFFFFF;
	--divider-color				: #1818181A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				:"Plus Jakarta Sans", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

html,
body{
	width: 100%;
	overflow-x: clip;
}

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
	
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

::selection{
	color: var(--primary-color);
	background-color: var(--accent-color);
	filter: invert(1);
}

p{
	line-height: 1.7em;
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-weight: 800;
	line-height: 1.2em;
	color: var(--primary-color);
	margin: 0;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}
.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	text-transform: capitalize;
	color: #ffff;
	background:rgb(230, 87, 87);
	border-radius: 100px;
	padding: 17px 54px 17px 24px;
	border: none;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover{
	color: var(--white-color);
}

.btn-default::before{
	content: '';
	position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../images/arrow-primary.svg');
	color:#ffffff !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	transition: all 0.4s ease-in-out;

}

.btn-default:hover::before{
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(1);
}

.btn-default::after{ 
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default:hover:after{
	right: auto;
	left: 0;
    width: 100%;
}

.btn-default.btn-highlighted:hover{
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover:before{
	filter: none;
}

.btn-default.btn-highlighted::after{
	background-color: var(--white-color);
}

.readmore-btn{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25em;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 28px;
	transition: all 0.4s ease-in-out;
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
	background-image: url('../images/arrow-primary.svg');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	width: 20px;
	height: 20px;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.light-section{
	width: 100%;
	background-color: var(--secondary-color);
}

.light-section .container-fluid{
	padding: 0;
}

.dark-section{
	background-color: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0; 
}

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

.section-title-content p{
	margin-bottom: 20px;
}

.section-title-content p:last-child{
	margin-bottom: 0;	
}

.section-title{
	margin-bottom: 40px;
}

.section-sub-heading .section-sub-title,
.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;
	line-height: normal;
    color: var(--primary-color);
	background-color: var(--secondary-color);
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
    margin-bottom: 15px;
}

.section-sub-heading .section-sub-title::before,
.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(230, 87, 87);
	border-radius: 50%;
    width: 5px;
    height: 5px;
}

.section-sub-heading .section-sub-title,
.section-title.section-sub-heading .section-sub-title{
	margin-bottom: 0;
}

.section-title h1{
	font-size: 58px;
	line-height: 1.2em;
	font-weight: 500;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 46px;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.light-section .section-sub-heading .section-sub-title,
.light-section .section-title .section-sub-title{
	background-color: var(--bg-color);
}

.dark-section .section-sub-heading .section-sub-title,
.dark-section .section-title .section-sub-title{
	background: var(--dark-divider-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.dark-section .section-sub-heading .section-sub-title,
.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	    03. Header css		 ****/
/************************************/

header.main-header{
	position: absolute;
    left: 0px;
    right: 0px;
	z-index: 100;
}

header.main-header .header-sticky{
    position: fixed;
	top: 0;
	background: transparent;
	border-radius: 0;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
	width:100%;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
}

header.main-header .header-sticky.active{
	position: fixed ;
	top: 0;
	left: 0;
	right: 0;
    transform: translateY(0);
	background: var(--primary-color);
	border-bottom: 1px solid var(--dark-divider-color);
}

.navbar{
	padding: 20px 0px;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	position: relative;
	margin: 0 10px;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2em;
	padding: 12px 10px !important;
	color: var(--white-color);
	background: transparent;
	border-radius: 0px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scale(1,0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--accent-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--primary-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--white-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	position: relative;
	top: 0;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--primary-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--accent-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	padding: 7px 20px;
	color: var(--primary-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--white-color);
}

.slicknav_menu ul ul li a{
    padding: 7px 20px 7px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--primary-color);
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--white-color);
}

/************************************/
/*** 	    04. Hero css	      ***/
/************************************/

.hero{
	position: relative;
	background-image: url('../images/hero-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    padding: 250px 0 120px;
	height: auto;
	min-height: 100vh;
	align-content: center;
}

.hero::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background: linear-gradient(90deg, rgba(24, 24, 24, 0.8) 0%, rgba(24, 24, 24, 0.72) 36.01%, transparent 63.02%), linear-gradient(180deg, rgba(24, 24, 24, 0.8) 0%, transparent 18.18%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero .container{
	position: relative;
    z-index: 2;
}

.hero-content-list ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero-content-list ul li{
	position: relative;
	width: calc(50% - 10px);
	color: var(--white-color);
    line-height: 1.5em;
    padding-left: 25px;
}

.hero-content-list ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.hero-content-body{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 50px;
	padding-top: 50px;
}

.video-play-button{
	display: inline-flex;
    align-items: center;
}

.video-play-button a{
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: none;
	gap: 10px;
}

.video-play-button a span{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-play-button a span.bg-effect:before,
.video-play-button a span.bg-effect:after{
	content: '';
	position: absolute;
    width: 160%;
    height: 160%;
	border: 35px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a span.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a span i{
	font-size: 16px;
	color: var(--primary-color);
	margin-left: 2px;
}

.video-play-button p{
	font-weight: 500;
	color: var(--white-color);
	margin: 0;
}

/************************************/
/*** 	   05. About-Us css	      ***/
/************************************/

.about-us{
	padding: 120px 0;
}

.about-us-image-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 100%;
	margin-right: 15px;
}

.about-us-image-box-1{
	position: relative;
	width: 73%;
	height: 100%;
}

.about-us-image-box-1 .about-us-image,
.about-us-image-box-1 .about-us-image figure,
.about-us-image-box-1 .about-us-image img{
	height: 100%;
}

.about-us-image figure{
    display: block;
    border-radius: 20px;
}

.about-us-image img{
    width: 100%;
    aspect-ratio: 1 / 1.36;
    object-fit: cover;
    border-radius: 20px;
}

.about-us-image-box-2{
	position: relative;
	width: 27%;
	z-index: 1;
}

.about-us-image-box-2 .about-us-image figure{
    border: 10px solid var(--bg-color);
	margin-left: -137px;
	border-radius: 30px 20px 20px 30px;
	border-right: none;
}

.about-us-image-box-2 .about-us-image figure img{
	aspect-ratio: 1 / 1.21;
}

.about-us-counter-box{
	position: absolute;
	bottom: 55px;
	right: -70px;
	background-color: rgb(230, 87, 87);
	border-radius: 20px;
	padding: 20px 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	transition: all 0.4s ease-in-out;
	animation: experienceboxmove 3s infinite linear alternate;
	z-index: 2;
}

.about-us-counter-box:hover{
	background-color: var(--white-color);
}

@keyframes experienceboxmove{
	50%{
		transform: translateX(30px);
	}
}

.about-us-counter-box .icon-box img{
	width: 100%;
	max-width: 50px;
}

.about-us-counter-content{
	width: calc(100% - 65px);
}

.about-us-counter-content h2{
	font-size: 40px;
	line-height: 1em;
}

.about-us-counter-content p{
	color: var(--primary-color);
	margin: 5px 0 0;
}

.about-us-content{
	height: 100%;
	align-content: center;
}

.about-us-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.about-us-body-content{
	width: calc(65% - 30px);
}

.about-us-body-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-us-body-list ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
	margin-bottom: 15px;
}

.about-us-body-list ul li:last-child{
	margin-bottom: 0px;
}

.about-us-body-list ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: rgb(230, 87, 87);
    top: 0;
    left: 0;
}

.about-us-btn{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}

.about-us-counter-list{
	width: calc(35% - 30px);
}

.about-us-counter-item{
	text-align: center;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.about-us-counter-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.about-us-counter-item h2{
	font-size: 46px;
	line-height: 1em;
}

.about-us-counter-item p{
	margin: 5px 0 0;
}

/************************************/
/***     06. Our Services css     ***/
/************************************/

.our-services{
	background-image: url('../images/service-bg-image.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto;
	padding: 120px 0;
}

.service-item{
    position: relative;
    background: var(--bg-color);
    border-radius: 20px;
    min-height: 450px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-item:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-color);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.service-item.active::before,
.service-item:hover::before{
	transform: translate(100%, -100%);
}

.service-item-image{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
	height: 100%;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-image,
.service-item:hover .service-item-image{
	opacity: 1;
}

.service-item-image a{
	position: relative;
	display: block;
	height: 100%;
	cursor: none;
}

.service-item-image a::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	opacity: 50%;
	width: 100%;
	height: 100%;	
}

.service-item-image figure{
	display: block;
    height: 100%;
}

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

.service-item-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: 100%;
}

.service-item-body .icon-box{
    position: relative;
    width: 80px;
    height: 80px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
	overflow: hidden;
	z-index: 1;
}

.service-item-body .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item.active .service-item-body .icon-box::before,
.service-item:hover .service-item-body .icon-box::before{
    transform: rotate(0) scale(1);
}

.service-item-body .icon-box img{ 
    position: relative;
    width: 100%;
    max-width: 40px; 
    z-index: 1;
}

.service-item-content-box{
	position: relative;
	z-index: 1;
}

.service-item-content{
	max-width: 240px;
}

.service-item-content h2{
	font-size: 20px;
	line-height: 1.4em;
	transition: all 0.4s ease-in-out;
}

.service-item-content h2 a{
	color: inherit;
}

.service-item.active .service-item-content h2,
.service-item:hover .service-item-content h2{
	color: var(--white-color);
}

.service-item-btn{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
	transition: all 0.3s ease-in-out;
}

.service-item.active .service-item-btn,
.service-item.hover .service-item-btn{
	border-color: var(--dark-divider-color);
}

.service-item.active .service-item-btn a.readmore-btn,
.service-item:hover .service-item-btn a.readmore-btn{
    color: var(--white-color);
}

.service-item.active .service-item-btn a.readmore-btn::before,
.service-item:hover .service-item-btn a.readmore-btn::before{
	filter: brightness(0) invert(1);
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	background: var(--accent-color);
	color: var(--primary-color);
	line-height: 1em;
	padding: 5px 14px;
	border-radius: 20px;
	margin-right: 10px;
}

.section-footer-text p a{
	display: inline-block;
	font-weight: 700;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--primary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text ul li:last-child{
	margin: 0;
}

.section-footer-text ul li i{
	font-size: 16px;
	background: var(--accent-color);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

.dark-section .section-footer-text p a{
	color: var(--accent-color);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

.section-footer-text.section-footer-contact{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
}

.section-footer-text.section-footer-contact span{
	width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
	align-items: center;
    margin-right: 10px;
}

.section-footer-text.section-footer-contact span img{
	width: 100%;
	max-width: 16px;
}

.satisfy-client-images{
	display: inline-flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -10px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.satisfy-client-image:first-child{
	margin-left: 0;
}

.satisfy-client-image figure{
	display: block;
	border-radius: 50%;
}

.satisfy-client-image figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

.satisfy-client-image.add-more{
	width: 42px;
    height: 42px;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.satisfy-client-image.add-more i{
	font-size: 14px;
	color: var(--primary-color);
}

.satisfy-client-image.add-more h3{
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 500;
	line-height: 1em;
	margin: 0;
} 

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image{
	margin-left: -10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image:first-child{
	margin-left: 0;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	width: 100%;
	max-width: 16px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

/************************************/
/***   	   07. Our Work css       ***/
/************************************/

.our-works{
	padding: 120px 0;
}

.our-work-item-list{
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.our-work-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    width: calc(50% - 15px);
    gap: 15px;
}

.our-work-item .icon-box{
	position: relative;
    background: var(--accent-color);
    border-radius: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.our-work-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.our-work-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.our-work-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.our-work-item:hover .icon-box img{
	filter: brightness(0) invert(1)
}

.our-work-item-content{
	width: calc(100% - 65px);
}

.our-work-item-content h3{
	font-size: 20px;
	line-height: 1.4em;
}

.work-content-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	margin-top: 40px;
}

.work-contact-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.work-contact-box .icon-box{
	position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.work-contact-box .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.work-contact-box:hover .icon-box::before{
	transform: scale(1)
}

.work-contact-box .icon-box i,
.work-contact-box .icon-box img{
	position: relative;
    z-index: 1;
	transition: all 0.4s ease-in-out;
}

.work-contact-box .icon-box i{
    font-size: 22px;
	color: var(--primary-color);
}

.work-contact-box:hover .icon-box i{
	color: var(--white-color);
}

.work-contact-box .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.work-contact-box:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.work-contact-box-content{
	width: calc(100% - 65px);
}

.work-contact-box-content p{
	margin: 0px;
}

.work-contact-box-content h3{
	font-size: 20px;
	margin-top: 5px;
}

.work-contact-box-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.work-contact-box-content h3 a:hover{
	color: var(--accent-color);
}

.our-work-image{
	margin-left: 15px;
}

.our-work-image figure{
	position: relative;
    display: block;
    mask-image: url('../images/our-work-image-bg-shape.svg');
    background-image: url('../images/our-work-image-bg-shape.svg');
    mask-size: cover;
    mask-position: center center;
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.our-work-image figure img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 0.958;
	border-radius: 10px;
}

/************************************/
/***      08. Our Project css    ***/
/************************************/

.our-project{
	background: url('../images/dark-section-bg-image.png'), linear-gradient(180deg, var(--primary-color) 70%, var(--bg-color) 30%);
	background-size: 100% 70%, 100%;
	background-position: top center;
	background-repeat: no-repeat;
	padding: 120px 0 0;
}

.project-item{
	position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.project-item-image figure{
	display: block;	
	border-radius: 1000px 1000px 0 0;
	overflow: hidden;
}

.project-item-image figure a{
	position: relative;
    display: block;
	border-radius: 1000px 1000px 0 0;
	cursor: none;
}

.project-item-image figure a::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 39.2%, rgba(24, 24, 24, 0.8) 100%);
	border-radius: 1000px 1000px 0 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.project-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.22;
	object-fit: cover;
	border-radius: 1000px 1000px 0 0;
	transition: all 0.6s ease-in-out;
}

.project-item:hover .project-item-image figure img{
	transform: scale(1.06);
}

.project-item-body{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
    z-index: 1;
}

.project-item-content h2{
	font-size: 20px;
	color: var(--white-color);
	line-height: 1.4em;
}

.project-item-content h2 a{
	color: inherit;
}

.project-item-btn{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 20px;
	margin-top: 20px;
}

.project-item-btn .readmore-btn{
	color: var(--white-color);
}

.project-item-btn .readmore-btn::before{
	background-image: url('../images/arrow-white.svg');
}

.our-project .section-footer-text p,
.our-project .section-footer-text ul li{
	color: var(--primary-color);
}

.our-project .section-footer-text p a:hover{
	color: var(--primary-color);
}

/************************************/
/***     09. intro video css      ***/
/************************************/

.intro-video{
	padding: 120px 0;
}

.intro-video-title .intro-video-btn{
	margin-top: 40px;
} 

.intro-video-content p:last-child{
	margin: 0;
}

.intro-video-counter-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.intro-video-counter-item{
	width: calc(33.33% - 20px);
}

.intro-video-counter-item h2{
	font-size: 46px;
	
	line-height: 1em;
}

.intro-video-counter-item p{
	margin: 5px 0 0;
}

.intro-video-content-box{
	position: relative;
    min-height: 600px;
    border-radius: 20px;
    align-content: end;
    padding: 40px;
    overflow: hidden;
}

.intro-video-content-box::before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(180deg, transparent 50.75%, rgba(24, 24, 24, 0.8) 100%); */
    width: 100%;
    height: 100%;
    z-index: 1;
}

.intro-video-bg-video{
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.intro-video-bg-video video{
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-video-item-list{
	position: relative;
	z-index: 1;
}

.intro-video-item-list ul{
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 15px 50px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.intro-video-item-list ul li{
    position: relative;
    line-height: 1.5em;
    color: var(--white-color);
    padding-left: 25px;
}

.intro-video-item-list ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

/************************************/
/***      10. How It Work css     ***/
/************************************/

.how-it-work{
	padding: 120px 0;
}

.how-it-work-item{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.how-it-work-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.how-it-work-item-no{
	position: relative;
	background-color: var(--accent-color);
	border-radius: 10px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.how-it-work-item-no::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 20px;
    transform: scale(0) rotate(180deg);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.how-it-work-item:hover .how-it-work-item-no::before{
	border-radius: 0;
	transform: scale(1);
}

.how-it-work-item-no h3{
	position: relative;
	font-size: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.how-it-work-item:hover .how-it-work-item-no h3{
	color: var(--white-color);
}

.how-it-work-item-content{
	width: calc(100% - 65px);
}

.how-it-work-item-content h3{
	font-size: 20px;
}

.how-it-work-item-content p{
	margin: 10px 0 0;
}

.how-it-work-image-box{
	margin-left: 65px;
}

.how-work-image-list{
	margin-top: 20px;
}

.how-work-image-slider .swiper-wrapper,
.how-work-image-list .swiper-slide{
	cursor: none;
}

.how-work-image-slider .swiper-slide figure,
.how-work-image-list .swiper-slide figure{
	display: block;
}

.how-work-image-slider .swiper-slide img,
.how-work-image-list .swiper-slide img{
	width: 100%;
    object-fit: cover;
}

.how-work-image-slider .swiper-slide figure,
.how-work-image-slider .swiper-slide img{
	border-radius: 999px 999px 0 0;
	overflow: hidden;
}

.how-work-image-slider .swiper-wrapper .swiper-slide img{
    aspect-ratio: 1 / 0.974;
}

.how-work-image-list .swiper-wrapper .swiper-slide img{
    aspect-ratio: 1 / 0.673;
}

/************************************/
/***       11. Our Team css       ***/
/************************************/

.our-team{
	padding: 120px 0;
}

.team-item{
	display: flex;
    flex-direction: column;
	text-align: center;
	background-color: var(--secondary-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
	transition: all 0.5s ease-in-out;
}

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

.team-item-content-box{
	padding: 50px;
	flex: 1;
}

.team-item-image a{
	display: inline-block;
	border-radius: 50%;
	cursor: none;
}

.team-item-image figure{
	display: block;
	max-width: 192px;
	margin: 0 auto;
	border-radius: 50%;
}

.team-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	transition: all 0.5s ease-in-out;
}

.team-item:hover .team-item-image figure img{
	transform: scale(1.04);
}

.team-item-content{
	margin-top: 30px;
}

.team-item-content h2{
	font-size: 20px;
}

.team-item-content a{
	color: inherit;
}

.team-item-content p{
	margin: 5px 0 0;
}

.team-item-btn .readmore-btn{
	font-weight: 500;
	width: 100%;
	background-color: var(--accent-color);
	padding: 20px;
}

.team-item-btn .readmore-btn:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.team-item-btn .readmore-btn::before{
	display: none;
}

/************************************/
/***   12. Our Testimonials css   ***/
/************************************/

.our-testimonial{
	background-image: url('../images/testimonial-bg-image.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	padding: 120px 0;
}

.testimonial-slider,
.testimonial-slider .swiper,
.testimonial-slider .swiper-wrapper,
.testimonial-slider .swiper-slide,
.testimonial-item{
	height: 100%;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 430px;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	padding: 10px;
	border-radius: 20px;
}

.testimonial-slider .swiper-slide .testimonial-item{
	transform: scale(0.95);
	transition: all 0.6s ease-in-out;
}

.testimonial-slider .swiper-slide.swiper-slide-next .testimonial-item{
	transform: scale(1);
}

.testimonial-item-header{
	padding: 30px;
}

.testimonial-item-rating{
	margin-bottom: 20px;
}

.testimonial-item-rating i{
	font-size: 20px;
	color: var(--accent-color);
}

.testimonial-item-content p{
	font-size: 20px;
	color: var(--white-color);
}

.testimonial-item-content p:last-child{
	margin-bottom: 0;
}

.testimonial-item-author{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	background-color: var(--dark-divider-color);
	border-radius: 10px;
	padding: 30px;
}

.testimonial-author-image figure{
	display: block;
	border-radius: 50%;
}

.testimonial-author-image figure img{
	width: 100%;
	max-width: 60px;
	border-radius: 50%;
}

.testimonial-author-content{
	width: calc(100% - 75px);
}

.testimonial-author-content h2{
	font-size: 20px;
	color: var(--white-color);
}

.testimonial-author-content p{
	color: var(--white-color);
	margin: 5px 0 0;
}

.our-testimonial .section-footer-text{
	margin-top: 60px;
}

/************************************/
/***      13. Our Faqs css       ***/
/************************************/

.our-faqs{
	padding: 120px 0;
}

.our-faq-content{
	position: sticky;
    top: 30px;
	margin-right: 15px;
}

.faq-cta-box{
	max-width: 550px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	background-color: var(--primary-color);
	border-radius: 20px;
	padding: 10px;
}

.faq-cta-client-box{
	display: flex;
	max-width: 64%;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.faq-cta-client-image figure{
	display: block;
	border-radius: 50%;
}

.faq-cta-client-image img{
	width: 100%;
	max-width: 60px;
	border-radius: 50%;
}

.faq-cta-client-content-box{
	width: calc(100% - 75px);
}

.faq-cta-client-content-header{
	display: flex;
	align-items: center;
    flex-wrap: wrap;
	gap: 10px;
}

.faq-cta-client-content-header h3{
	font-size: 16px;
	color: var(--white-color);
	min-width: 25px;
}

.faq-cta-client-content-header{
	margin-bottom: 0px;
}

.faq-cta-client-content-header i{
	font-size: 16px;
	color: var(--accent-color);
}

.faq-cta-client-content{
	margin-top: 5px;
}

.faq-cta-client-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.faq-cta-btn .btn-default::before{
	content: '\f095';
	font-family: 'FontAwesome';
	font-size: 18px;
	color: var(--primary-color);
	background: transparent;
	line-height: normal;
}

.faq-cta-btn .btn-default:hover::before{
	transform: translateY(-50%);
}

.faq-accordion .accordion-item{
    position: relative;
    background: var(--secondary-color);
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
}

.faq-accordion .accordion-item:last-child{
    margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
    font-weight: 400;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 22px 55px 22px 22px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed){
	background-color: var(--primary-color);
	color: var(--white-color);
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'Font Awesome 7 Free';
    position: absolute;
    right: 22px;
    top: 50%;
    font-size: 24px;
    font-weight: 600;
    transform: translateY(-50%);
    color: var(--accent-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
}

.faq-accordion .accordion-item .accordion-body{  
	background: var(--primary-color);
	border-top: 1px solid var(--dark-divider-color);
    padding: 22px;
}

.faq-accordion .accordion-item .accordion-body p{
	color: var(--white-color);
}

.faq-accordion .accordion-item .accordion-body p:last-child{
    margin: 0;
}

/************************************/
/***      14. Contact Us css      ***/
/************************************/

.contact-us-box{
	position: relative;
	background-image: url('../images/contact-us-box-bg-image.jpg');
	background-position: center center;
	overflow: hidden;
	padding: 120px 0;
}

.contact-us-box::before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270deg, transparent -5%, rgba(24, 24, 24, 0.9) 100%);
    width: 100%;
    height: 100%;
}

.contact-us-box .container{
	position: relative;
	z-index: 1;
}

.contact-us-content-box{
	min-height: 590px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.contact-us-info-box{
	border-top: 1px solid var(--divider-color);
	padding-top: 60px;
}

.contact-us-info-box .contact-us-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
}

.dark-section .contact-us-info-box{
	border-color: var(--dark-divider-color);
}

.dark-section .contact-us-info-box .work-contact-box .icon-box::before{
	background: var(--white-color);
}

.dark-section .contact-us-info-box .work-contact-box:hover .icon-box img{
	filter: none;
}

.dark-section .contact-us-info-content p,
.dark-section .contact-us-info-box .work-contact-box .work-contact-box-content p,
.dark-section .contact-us-info-box .work-contact-box .work-contact-box-content h3{
	color: var(--white-color);
}

.contact-us-info-content{
	max-width: 394px;
	margin-top: 30px;
}

.contact-us-info-content p:last-child{
	margin-bottom: 0;
}

.contact-box-form{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 50px;
}

.contact-box-form .section-title h2{
	color: var(--primary-color);
}

.contact-box-form .section-title p{
	color: var(--text-color);
}

.contact-form .form-control{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background-color: var(--bg-color);
    border: none;
    border-radius: 10px;
    padding: 18px 20px;
    outline: none;
    box-shadow: none;
}

.contact-form .form-control::placeholder{
    color: var(--text-color);
}

/************************************/
/***       15. Our Blog css       ***/
/************************************/

.our-blog{
	padding: 120px 0 90px;
}

.post-item{
    position: relative;
    min-height: 450px;
    background: var(--secondary-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
    overflow: hidden;
}

.post-item::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--secondary-color);
    transition: 0.5s ease-in-out;
}

.post-item.active::before,
.post-item:hover::before{
	transform: translate(100%, -100%);
}

.post-featured-image{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.post-item.active .post-featured-image,
.post-item:hover .post-featured-image{
	opacity: 1;
}

.post-featured-image a{
	position: relative;
	display: block;
	height: 100%;
	cursor: none;
}

.post-featured-image a::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	opacity: 50%;
	width: 100%;
	height: 100%;	
}

.post-featured-image figure{
	display: block;
    height: 100%;
}

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

.post-item-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: 100%;
}

.post-item-tag,
.post-item-content-box{
	position: relative;
	z-index: 1;
}

.post-item-tag{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-item-tag a{
    display: inline-block;
	font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--primary-color);
    background: var(--bg-color);
    border-radius: 100px;
    padding: 6px 16px;
    transition: all 0.4s ease-in-out;
}

.post-item.active .post-item-tag a,
.post-item:hover .post-item-tag a{
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--white-color);
}

.post-item .post-item-tag a:hover{
	background-color: var(--accent-color);
	color: var(--primary-color);
}

.post-item-content h2{
	font-size: 20px;
	line-height: 1.4em;
	transition: all 0.4s ease-in-out;
}

.post-item-content h2 a{
	color: inherit;
}

.post-item.active .post-item-content h2,
.post-item:hover .post-item-content h2{
	color: var(--white-color);
}

.post-item-btn{
	border-top: 1px solid var(--divider-color);
	padding-top: 25px;
	margin-top: 25px;
	transition: all 0.4s ease-in-out;
}

.post-item.active .post-item-btn,
.post-item.hover .post-item-btn{
	border-color: var(--dark-divider-color);
}

.post-item.active .post-item-btn a.readmore-btn,
.post-item:hover .post-item-btn a.readmore-btn{
    color: var(--white-color);
}

.post-item.active .post-item-btn a.readmore-btn::before,
.post-item:hover .post-item-btn a.readmore-btn::before{
    background-image: url('../images/arrow-white.svg');
}

/************************************/
/***         16. Footer css       ***/
/************************************/

.main-footer{
	padding: 120px 0 0;
}

.footer-logo img{
	width: 100%;
	max-width: 152px;
}

.about-footer-content{
	margin-top: 30px;
}

.about-footer-content p{
    color: var(--white-color);
    margin-bottom: 0;
}

.footer-social-links{
    margin-top: 40px;
}

.footer-social-links ul{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-social-links ul li a{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    border: 1px solid var(--dark-divider-color);
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

.footer-social-links ul li:hover a{
	background-color: var(--accent-color);
	color: var(--primary-color);
}

.footer-social-links ul li a i{
    font-size: 18px;
    color: inherit;
}

.footer-links-box{
    display: flex;
    flex-wrap: wrap;
    gap: 30px 4.167vw;
	margin-left: 40px;
}

.footer-quick-links{
    width: calc(23% - 2.778vw);
}

.footer-links{
    position: relative;
}

.footer-links::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2.083vw;
    background: var(--dark-divider-color);
    width: 1px;
    height: 100%;
}

.footer-links:last-child::before{
	display: none;
}

.footer-links h2{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li{
	line-height: 1.4em;
    color: var(--white-color);
    margin-bottom: 15px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.footer-links ul li a:hover{
	color: var(--accent-color);
}

.footer-service-links{
	width: calc(36% - 2.778vw);
}

.footer-newsletter-box{
	width: calc(41% - 2.778vw);
}

.footer-newsletter-form .form-group .form-control{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em;
    background-color: var(--dark-divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
    color: var(--white-color);
    border-radius: 100px;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 15px 24px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form .form-group .btn-default{
	width: 100%;
	padding: 17px;
	text-align: center;
	margin-top: 20px;
}

.footer-newsletter-form .form-group .btn-default::before{
	display: none;
}

.footer-cta-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 80px;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	padding: 30px 40px;
	border-radius: 20px;
}

.footer-cta-content{
	width: calc(40% - 10px);
}

.footer-cta-content h2{
	font-size: 26px;
	color: var(--white-color);
}

.footer-cta-contact-list{
	max-width: calc(60% - 10px);
    display: flex;
    flex-wrap: wrap;
    gap: 30px 4.167vw;
}

.footer-cta-contact-item{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.footer-cta-contact-item::before{
    content: '';
    position: absolute;
    top: 0;
    right: -2.083vw;
    background: var(--dark-divider-color);
    width: 1px;
    height: 100%;
}

.footer-cta-contact-item:nth-child(2n + 2):before,
.footer-cta-contact-item:last-child:before{
	display: none;
}

.footer-cta-contact-item .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.footer-cta-contact-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.footer-cta-contact-item:hover .icon-box::before{
	transform: scale(1)
}

.footer-cta-contact-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.footer-cta-contact-item-content{
	width: calc(100% - 65px);
}

.footer-cta-contact-item-content p{
	margin: 0 0 5px;
	color: var(--white-color);
}

.footer-cta-contact-item-content h3{
	color: var(--white-color);
	font-size: 20px;
}

.footer-cta-contact-item-content h3 a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.footer-cta-contact-item-content h3 a:hover{
	color: var(--accent-color);
}

.footer-copyright-text{
    text-align: center;
    padding: 60px 0;
}

.footer-copyright-text p{
	color: var(--white-color);
    margin-bottom: 0;
}

/************************************/
/*** 	17. About Us Page css     ***/
/************************************/

.page-header{
	position: relative;
    background: url('../images/page-header-bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 270px 0 160px;
    overflow: hidden;
}

.page-header:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(24, 24, 24, 0.8) 0%, rgba(24, 24, 24, 0.72) 36.01%, transparent 63.02%), linear-gradient(180deg, rgba(24, 24, 24, 0.8) 0%, transparent 18.18%);
    z-index: 1;
}

.page-header-box{
    position: relative;
    z-index: 2;
}

.page-header-box h1{
    display: inline-block;
    font-size: 58px;
	font-weight: 500;
    line-height: 1.2em;
    color: var(--white-color);
    margin-bottom: 15px;
    cursor: none;
}

.page-header-box ol{
    display: inline-flex;
    margin: 0;
}

.page-header-box ol li.breadcrumb-item{
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
	line-height: 1.3em;
    color: var(--white-color);
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.our-apporach{
	padding: 120px 0;
}

.approach-content{
	height: 100%;
	align-content: center;
}

.approach-accordion .accordion-item{
    margin-bottom: 30px;
}

.approach-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.approach-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4em;
	border-bottom: 1px solid var(--divider-color);
    padding: 0 30px 30px 0;
	transition: all 0.3s ease-in-out;
}

.approach-accordion .accordion-item:last-child .accordion-header .accordion-button.collapsed{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.approach-accordion .accordion-item .accordion-button::after,
.approach-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\2b';
    font-family: 'Font Awesome 7 Free';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--accent-color);
    transition: all 0.4s ease-in-out;
}

.approach-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
}

.approach-accordion .accordion-item .accordion-body{
	padding: 30px 30px 0 0;
}

.approach-accordion .accordion-item .accordion-body p{
	margin: 0;
}

.our-approach-image-box{
	position: relative;
	height: 100%;
	margin-left: 15px;
}

.our-approach-image{
	height: 100%;
}

.our-approach-image figure{
	display: block;
	height: 100%;
    border-radius: 20px;
}

.our-approach-image figure img{
	width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.99;
    object-fit: cover;
    border-radius: 20px;
}

.our-approach-cta-box{
	max-width: 260px;
    position: absolute;
    bottom: 25px;
    left: 25px;
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 25px;
	animation: experienceboxmove 3s infinite linear alternate;
    z-index: 1;
}

.our-approach-cta-box .satisfy-client-image figure img{
	max-width: 40px;
}

.our-approach-cta-footer{
	margin-top: 25px;
}

.our-approach-cta-footer-counter{
	display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.our-approach-cta-footer-counter h2{
	font-size: 16px;
	font-weight: 400;
}

.our-approach-cta-footer-counter p{
	margin-bottom: 0;
}

.our-approach-cta-footer-counter p i{
	font-size: 16px;
    color: var(--accent-color);
}

.our-approach-cta-footer-content p{
	margin: 5px 0 0;
}

.key-fact{
	padding: 120px 0;
}

.key-fact-content{
	height: 100%;
	align-content: center;
}

.skills-progress-bar .skillbar{
	margin-bottom: 30px;
}

.skills-progress-bar .skillbar:last-child{
	margin-bottom: 0;
}

.skills-progress-bar .skill-data{
    display: flex;
	align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	font-size: 18px;
	font-weight: 400;
    line-height: normal;
	color: var(--primary-color);
}

.skills-progress-bar .skillbar .skill-progress{
    position: relative;
    width: 100%;
    height: 14px;
    background: var(--secondary-color);
    border-radius: 10px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent-color);
    border-radius: 10px;
}

.key-fact-btn{
	margin-top: 40px;
}

.key-fact-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.key-fact-item{
	position: relative;
	width: calc(50% - 15px);
	min-height: 265px;
	background: var(--white-color);
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}

.key-fact-item::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--white-color);
	border-radius: 20px;
	width: 100%;
	height: 100%;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.key-fact-item.active::before,
.key-fact-item:hover::before{
	transform: translate(100%, -100%);
}

.key-fact-item-image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: all 0.4s ease-in-out;
}

.key-fact-item.active .key-fact-item-image,
.key-fact-item:hover .key-fact-item-image{
	opacity: 1;
}

.key-fact-item-image figure{
	position: relative;
	display: block;
	height: 100%;
}

.key-fact-item-image figure::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;	
	background-color: var(--primary-color);
	opacity: 40%;
}

.key-fact-item-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.key-fact-item-body{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: 100%;
    z-index: 2;
}

.key-fact-item-header p{
	margin: 0 0 10px;
	transition: all 0.4s ease-in-out;
}

.key-fact-item.active .key-fact-item-header p,
.key-fact-item:hover .key-fact-item-header p{
	color: var(--white-color);
}

.key-fact-item-header h2{
	font-size: 46px;
	font-weight: 400;
	line-height: 1em;
	transition: all 0.4s ease-in-out;
}

.key-fact-item.active .key-fact-item-header h2,
.key-fact-item:hover .key-fact-item-header h2{
	color: var(--white-color);
}

.key-fact-item-footer{
	border-top: 1px solid var(--divider-color);
	padding-top: 25px;
	transition: all 0.4s ease-in-out;
}

.key-fact-item.active .key-fact-item-footer,
.key-fact-item:hover .key-fact-item-footer{
	border-color: var(--dark-divider-color);
}

.key-fact-item-footer p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out
}

.key-fact-item.active .key-fact-item-footer p,
.key-fact-item:hover .key-fact-item-footer p{
	color: var(--white-color);
}

.premium-quality{
	padding: 120px 0;
}

.premium-quality-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 80px;
}

.premium-quality-item{
	position: relative;
	width: calc(33.33% - 53.33px);
	text-align: center;
}

.premium-quality-item::before{
	content: '';
    position: absolute;
    top: 0;
	right: -40px;
    bottom: 0;
    height: 100%;
    width: 1px;
    background: var(--dark-divider-color)
}


.premium-quality-item:nth-child(3n + 3):before,
.premium-quality-item:last-child:before{
	display: none;
}

.premium-quality-item-image figure{
	display: block;
	max-width: 200px;
    border-radius: 50%;
	margin: 0 auto;
}

.premium-quality-item-image img{
	width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.premium-quality-item:hover .premium-quality-item-image img{
	transform: scale(1.06);
}

.premium-quality-item-content{
	margin: 40px auto 0;
	max-width: 334px;
}

.premium-quality-item-content h3{
	font-size: 20px;
	color: var(--white-color);
}

.premium-quality-item-content p{
	margin: 10px 0 0;
	color: var(--white-color);
}

.premium-quality .section-footer-text{
	margin-top: 60px;
}

.cta-box{
	position: relative;
	padding: 120px 0;
	overflow: hidden;
}

.cta-box::before{
	content: '';
    position: absolute;
    top: -85px;
    left: 5px;
    background: url(../images/cta-box-section-bg-img-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 375px;
    height: 275px;
    z-index: 1;
}

.cta-box::after{
	content: '';
    position: absolute;
    bottom: -85px;
    right: 5px;
    background: url(../images/cta-box-section-bg-img-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 440px;
    height: 360px;
    z-index: 1;
}

.cta-content{
	position: relative;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	z-index: 2;
}

.cta-content .section-title p{
	max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.cta-btn{
	position: relative;
	display: inline-block;
	margin-top: 50px;
}

.cta-btn::before{
	content: '';
    position: absolute;
    left: auto;
	bottom: 10px;
    right: -160px;
    background: url('../images/cta-box-arrow.svg');
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 84px;
    height: 50px;
    animation: arrowmove 3s infinite linear alternate;
}

@keyframes arrowmove{
    50%{
		transform: translateX(-20px);
	}
}

/************************************/
/*** 	18. Services Pgae css     ***/
/************************************/

.page-services{
    padding: 120px 0 90px;
}

.page-services .service-item{
	background: var(--secondary-color);
}

.page-services .service-item:before{
	background: var(--secondary-color);
}

/************************************/
/*** 	19. Service Single css    ***/
/************************************/

.page-service-single{
	padding: 120px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.page-category-list{
	background: var(--secondary-color);
	border-radius: 20px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list .page-category-list-title{
	font-size: 20px;
	background: var(--accent-color);
	padding: 20px 30px;
}

.page-category-list ul{
	list-style: none;
    margin: 0;
	padding: 30px;
}

.page-category-list ul li{
	line-height: 1.5em;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.page-category-list ul li:last-child{
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
	color: inherit;
    padding-right: 25px;
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover{
    color: var(--primary-color);
}

.page-category-list ul li a::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 18px;
    height: 18px;
	transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.sidebar-cta-box{
    background-color: var(--secondary-color);
    border-radius: 20px;
	padding: 10px;
}

.sidebar-cta-content-box{
	text-align: center;
	padding: 20px 20px 30px;
}

.sidebar-cta-logo img{
	width: 100%;
	max-width: 152px;
}

.sidebar-cta-content{
	margin-top: 30px;
}

.sidebar-cta-content h2{
	font-size: 20px;
	line-height: 1.4em;
}

.sidebar-cta-contact-btn{
	margin-top: 30px;
}

.sidebar-cta-contact-btn .btn-default{
	padding: 17px 24px 17px 54px;
}

.sidebar-cta-contact-btn .btn-default::before{
	content: '\f095';
	font-family: 'FontAwesome';
	left: 24px;
	top: 50%;
	right: auto;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--primary-color);
	background: transparent;
	width: auto;
	height: auto;
}

.sidebar-cta-contact-btn .btn-default:hover:before{
	transform: translateY(-50%);
	filter: none;
	color: var(--white-color);
}

.sidebar-cta-image-box figure{
	display: block;
	border-radius: 10px;
}

.sidebar-cta-image-box figure img{
	width: 100%;
	aspect-ratio: 1 / 0.49;
	object-fit: cover;
	border-radius: 10px;
}

.page-single-image{
	margin-bottom: 40px;
}

.page-single-image figure{
	display: block;
	border-radius: 20px;
}

.page-single-image img{
	width: 100%;
	aspect-ratio: 1 / 0.598;
	object-fit: cover;
	border-radius: 20px;
}

.service-entry{
    margin-bottom: 60px;
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry h2{
	font-size: 46px;
	font-weight: 500;
	margin-bottom: 20px;
}

.service-entry h3{
    font-size: 20px;
    line-height: 1.4em;
    margin-bottom: 10px;
}

.service-entry p:last-child,
.service-entry h2:last-child,
.service-entry h3:last-child{
    margin: 0;
}

.service-entry ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.service-entry ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 20px;
}

.service-entry ul li:last-child{
	margin-bottom: 0;
}

.service-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3em;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.service-entry .section-footer-text{
    margin-top: 40px;
}

.service-why-choose-box,
.service-features-box,
.service-window-box{
    margin-top: 60px;
}

.service-why-choose-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.service-why-choose-item-list-box,
.service-why-choose-image-box{
	width: calc(50% - 15px);
}

.service-why-choose-item{
	background-color: var(--secondary-color);
	border-radius: 10px;
	margin-bottom: 30px;
	padding: 20px;
}

.service-why-choose-item:last-child{
	margin-bottom: 0;
}

.service-why-choose-item span{
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--primary-color);
    background: var(--bg-color);
    border-radius: 100px;
    padding: 6px 15px;
	margin-bottom: 30px;
}

.service-why-choose-image-box figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.service-why-choose-image-box figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	aspect-ratio: 1 / 1.025;
}

.service-feature-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.service-feature-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.service-feature-item .icon-box{
	position: relative;
    background: var(--accent-color);
    border-radius: 100px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.service-feature-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 100px;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-feature-item:hover .icon-box::before{
	transform: scale(1)
}

.service-feature-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-feature-item:hover .icon-box img{
	filter: brightness(0) invert(1)
}

.service-feature-item-content{
	width: calc(100% - 75px);
}

.service-feature-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}

.service-feature-body-list,
.service-feature-body-image{
	width: calc(50% - 15px);
	align-content: center;
}

.service-feature-body-image figure{
	height: 100%;
	display: block;
	border-radius: 20px;
}

.service-feature-body-image figure img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.40;
	object-fit: cover;
	border-radius: 20px;
}

.service-window-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 40px 0;
}

.service-window-item{
	width: calc(33.33% - 20px);
	background-color: var(--secondary-color);
	border-radius: 20px;
	text-align: center;
	padding: 40px 25px;
}

.service-window-item .icon-box{
	position: relative;
    background: var(--accent-color);
    border-radius: 100px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
	margin: 0 auto;
}

.service-window-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 100px;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-window-item:hover .icon-box::before{
	transform: scale(1)
}

.service-window-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-window-item:hover .icon-box img{
	filter: brightness(0) invert(1)
}

.service-window-item-content{
	margin-top: 40px;
}

.service-window-item-content h3{
	font-size: 20px;
}

/************************************/
/*** 	20. Blog Archive css      ***/
/************************************/

.page-blog{
    padding: 120px 0;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--white-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
}

/************************************/
/*** 	 21. Blog Single css      ***/
/************************************/

.page-single-post{
	padding: 120px 0;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 20px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 20px;
}


.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 400;
	line-height: 1.2em;
	margin: 0 0 0.44em;
}

.post-entry h1{
	font-size: 58px;
	font-weight: 500;
}

.post-entry h2{
	font-size: 46px;
	font-weight: 500;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 20px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}


.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol:last-child,
.post-entry ul:last-child{
	margin-bottom: 0;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--accent-color) url('../images/icon-blockquote.svg');
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 20px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--primary-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
    font-size: 20px;
	font-weight: 500;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--primary-color);
	border-radius: 100px;
    padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: var(--accent-color);
    color: var(--primary-color);
	border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: all 0.4s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--primary-color);
	color: var(--white-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/*** 	22. Projects Page css     ***/
/************************************/

.page-projects{
	padding: 120px 0 90px;
}

.page-projects .project-item-image figure,
.page-projects .project-item-image a,
.page-projects .project-item-image figure a::before,
.page-projects .project-item-image figure img{
	border-radius: 20px;
}

/************************************/
/*** 	23. Project Single css    ***/
/************************************/

.page-project-single{
	padding: 120px 0;
}

.project-category-item-list{
    padding: 30px;
}

.project-category-item{
    display: flex;
    flex-wrap: wrap;
	align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.project-category-item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.project-category-item .icon-box img{
    width: 100%;
    max-width: 20px;
}

.project-category-item-content{
    width: calc(100% - 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.project-category-item-content h3,
.project-category-social-links h3{
    font-size: 16px;
    line-height: normal;
}

.project-category-item-content p{
    margin-bottom: 0;
}

.project-category-social-links{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	justify-content: space-between;
	width: 100%;
}

.page-category-list .project-category-social-links ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 0;
}

.page-category-list .project-category-social-links ul li{
	margin: 0;
	padding: 0;
	border: none;
}

.page-category-list .project-category-social-links ul li a{
	width: 30px;
	height: 30px;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.page-category-list .project-category-social-links ul li a:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.page-category-list .project-category-social-links ul li a::before{
	display: none;
}

.page-category-list .project-category-social-links ul li a i{
	font-size: 16px;
}

.project-entry{
    margin-bottom: 60px;
}

.project-entry p{
    margin-bottom: 20px;
}

.project-entry h2{
    font-size: 46px;
    margin-bottom: 20px;
}

.project-entry h3{
    font-size: 20px;
	margin-bottom: 10px;
}

.project-entry p:last-child,
.project-entry h2:last-child,
.project-entry h3:last-child{
    margin-bottom: 0;
}

.project-entry ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
    margin: 0;
    padding: 0;
}

.project-entry ul li{
	position: relative;
    width: calc(50% - 10px);
	line-height: 1.5em;
	padding-left: 25px;
}

.project-entry ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3em;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.project-client-requirement-box,
.project-solution-box,
.project-feedback-box{
    margin-top: 60px;
}

.project-client-requirement-list,
.project-solution-item-list-box{
	margin-top: 40px;
}

.project-solution-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.project-solution-item-list:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.project-solution-item{
	width: calc(50% - 15px);
}

.project-feedback-body{
	border-left: 4px solid var(--accent-color);
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin-top: 40px;
	padding: 30px;
}

.project-feedback-body-content{
	margin-bottom: 20px;
}

.project-feedback-body-content p{
	color: var(--primary-color);
}

/************************************/
/***    	24. Team Page css     ***/
/************************************/

.page-team{
	padding: 120px 0 90px;
}

/************************************/
/***  	25. Team Single css       ***/
/************************************/

.page-team-single{
	padding: 120px 0;
}

.team-member-about{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 10px;
	display: flex;
    flex-wrap: wrap;
    gap: 30px 10px;
	margin-bottom: 80px;
}

.team-single-image{
    width: calc(48% - 5px);
}

.team-single-image figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.team-single-image img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.07;
    object-fit: cover;
    border-radius: 20px;
}

.team-about-content{
	width: calc(52% - 5px);
    padding: 40px;
}

.team-contact-info-title{
	margin-bottom: 30px;
}

.team-contact-info-title h3{
	font-size: 24px;
}

.team-contact-list{
	display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.team-contact-item{
	width: calc(50% - 15px);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    display: flex;
	flex-wrap: wrap;
	gap: 15px;
    padding: 20px;
}

.team-contact-item .icon-box img{
	width: 100%;
	max-width: 30px;
}

.team-contact-content{
	width: calc(100% - 45px);
}

.team-contact-content h3{
	font-size: 20px;
}

.team-contact-content p{
	margin: 5px 0 0;
}

.team-member-social-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	align-items: center;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.team-member-social-list h3{
	font-size: 20px;
}

.team-member-social-list ul{
	display: flex;
    align-items: center;
    gap: 15px;
	list-style: none;
    padding: 0;
    margin: 0;
}

.team-member-social-list ul li a{
	color: var(--primary-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.team-member-social-list ul li:hover a{
	background: var(--accent-color);
}

.team-member-social-list ul li a i{
	font-size: 20px;
    color: inherit;
}

.team-experience-info{
	margin-bottom: 80px;
}

.team-experience-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.team-experience-item{
	width: calc(33.33% - 20px);
}

.team-experience-item h3{
	position: relative;
	font-size: 20px;
	line-height: 1.4em;
	padding-left: 30px;
}

.team-experience-item h3::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 20px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.team-experience-item p{
	margin: 20px 0 0;
}

.team-slills-form{
	display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
}

.contact-box-form.team-contact-form{
    width: calc(50% - 30px);
}

.team-skills-box{
    width: calc(50% - 30px);
    align-content: center;
}

.team-skills-list .skills-progress-bar{
	margin-bottom: 40px;
}

.team-skills-list .skills-progress-bar:last-child{
	margin-bottom: 0px;
}

.team-skills-image{
	margin-top: 40px;
}

.team-skills-image figure{
	display: block;
	border-radius: 20px;
}

.team-skills-image figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
	aspect-ratio: 1 / 0.46;
}

/************************************/
/*** 	26. Pricing Page css      ***/
/************************************/

.page-pricing{
	padding: 120px 0;
}

.pricing-item{
    background-color: var(--white-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
}

.pricing-item-header-box{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.pricing-item-header-image{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pricing-item-header-image figure{
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
}

.pricing-item-header-image figure::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    opacity: 55%;
    z-index: 1;
}

.pricing-item-header-image figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.pricing-item:hover .pricing-item-header-image figure img{
	transform: scale(1.04);
}

.pricing-item-content{
    position: relative;
    padding: 30px;
    z-index: 2;
}

.pricing-item-content span{
    font-size: 20px;
	font-weight: 400;
	line-height: 1.2em;
    color: var(--white-color);
}

.pricing-item-content p{
    color: var(--white-color);
    margin: 15px 0 0;
}

.pricing-item-content h2{
    font-size: 40px;
    color: var(--white-color);
    font-weight: 400;
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 20px;
    padding-top: 20px;
}

.pricing-item-content h2 sub{
    bottom: 0;
    font-size: 16px;
    font-weight: 400;
}

.pricing-item-body{
    padding: 30px;
}

.pricing-item-list h3{
    font-size: 20px;
}

.pricing-item-list ul{
    list-style: none;
    border-top: 1px solid var(--divider-color);
    padding: 20px 0 0;
    margin: 20px 0 0;
}

.pricing-item-list ul li{
    position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;
}

.pricing-item-list ul li:last-child{
    margin-bottom: 0;
}

.pricing-item-list ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.pricing-item-btn{
    margin-top: 30px;
}

.pricing-benefit-list{
	margin-top: 30px;
}

.pricing-benefit-list ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 20px 50px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pricing-benefit-list ul li{
    display: inline-flex;
    align-items: center;
}

.pricing-benefit-list ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

/************************************/
/***  27. Testimonials Page css   ***/
/************************************/

.page-testimonials{
	padding: 120px 0 90px;
}

.page-testimonials .testimonial-item{
	background-color: var(--secondary-color);
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-testimonials .testimonial-item-content p,
.page-testimonials .testimonial-author-content p{
	color: var(--text-color);
}

.page-testimonials .testimonial-item-author{
	background-color: var(--bg-color);
}

.page-testimonials .testimonial-author-content h2{
	color: var(--primary-color);
}

/************************************/
/*** 	28. Image Gallery css     ***/
/************************************/

.page-gallery{
	padding: 120px 0 90px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.87;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	29.  Video Gallery css    ***/
/************************************/

.page-video-gallery{
	padding: 120px 0 90px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 50%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-color);
	color: var(--primary-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.87;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  30. FAQ's Page css      ***/
/************************************/

.page-faqs{
    padding: 120px 0;
}

.page-faqs .page-single-faqs{
    margin-bottom: 60px;
}

.page-faqs .page-single-faqs:last-child{
    margin-bottom: 0px;
}

/************************************/
/***   31. Contact Us Page css    ***/
/************************************/

.page-contact-us{
    padding: 120px 0 60px;
}

.google-map{
    padding: 60px 0 120px;
}

.google-map-iframe{
	width: 100%;
	height: 600px;
	border-radius: 20px;
	overflow: hidden;
}

.google-map-iframe iframe{
	width: 100%;
	height: 100%;
}

/************************************/
/***   32. 404 Error Page css    ***/
/************************************/

.error-page{
	padding: 120px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 830px;
}

.error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      33. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1024px){

	.main-menu ul li{
		margin: 0;
	}

	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}

	.section-row .section-sub-heading,
	.section-title .section-sub-title{
		margin-bottom: 10px;
	}

	.hero:before{
		background: var(--primary-color);
		opacity: 55%;
	}

	.about-us-image-box{
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.about-us-image-box,
	.about-us-image-box-1,
	.about-us-image,
	.about-us-image figure,
	.about-us-image img,
	.about-us-content{
		height: auto;
	}

	.about-us-image img{
		aspect-ratio: 1 / 1.2;
	}

	.our-work-content{
		margin-bottom: 30px;
	}

	.our-work-image{
		max-width: 600px;
		margin: 0 auto;
	}

	.project-item-image figure,
	.project-item-image figure a,
	.project-item-image figure a::before,
	.project-item-image figure img{
		border-radius: 20px;
	}

	.project-item-image figure img{
		aspect-ratio: 1 / 1.1;
	}

	.project-item-body{
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

	.intro-video-title{
		margin-bottom: 30px;
	}

	.intro-video-title .intro-video-btn{
    	margin-top: 20px;
	}

	.intro-video-counter-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.intro-video-content-box{
		padding: 30px;
	}

	.intro-video-item-list ul{
		gap: 10px 30px;
	}

	.how-it-work-content{
		margin-bottom: 30px;
	}

	.how-it-work-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.how-it-work-image-box{
		max-width: 640px;
		margin: 0 auto;
	}

	.testimonial-slider .swiper-slide .testimonial-item{
		transform: scale(1);
	}

	.our-faq-content{
		position: initial;
		margin: 0 0 30px;
	}

	.contact-us-content-box{
		min-height: initial;
		margin-bottom: 40px;
	}

	.contact-us-info-box{
		padding-top: 40px;
	}

	.contact-us-info-content{
		max-width: 100%;
	}

	.post-item{
		min-height: 380px;
	}

	.about-footer{
		margin: 0 0 30px;
	}

	.about-footer-content,
	.footer-social-links{
    	margin-top: 20px;
	}

	.footer-links-box{
		margin-left: 0;
	}

	.footer-links h2{
		margin-bottom: 20px;
	}

	.footer-cta-box{
		padding: 30px;
		margin-top: 30px;
	}

	.footer-cta-contact-item-content h3{
		font-size: 18px;
	}

	.footer-copyright-text{
		padding: 30px 0;
	}

	.approach-content{
		margin-bottom: 30px;
		height: auto;
	}

	.our-approach-image-box,
	.our-approach-image,
	.our-approach-image figure,
	.our-approach-image figure img{
		height: auto;
	}

	.our-approach-image-box{
		margin-left: 0;
	}

	.our-approach-image figure img{
		aspect-ratio: 1 / 0.7;
	}

	.key-fact-content{
		height: auto;
		margin-bottom: 30px;
	}

	.premium-quality-item-list{
		gap: 30px;
	}

	.premium-quality-item{
		width: calc(33.33% - 20px);
	}

	.premium-quality-item::before{
		right: -15px;
	}

	.premium-quality-item-content{
		margin: 30px auto 0;
	}

	.cta-box::before{
		opacity: 30%;
		width: 275px;
    	height: 200px;
	}

	.cta-box::after{
		opacity: 30%;
		width: 340px;
    	height: 260px;
	}

	.page-single-sidebar{
        margin: 0;
    }

	.page-category-list .page-category-list-title{
        padding: 15px 20px;
    }

	.page-category-list ul{
        padding: 20px;
    }

	.page-category-list ul li{
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

	.sidebar-cta-content-box{
		padding: 10px 10px 20px;
	}

	.sidebar-cta-content,
	.sidebar-cta-contact-btn{
    	margin-top: 20px;
	}

	.page-single-image{
        margin-bottom: 30px;
    }

	.service-entry{
        margin-bottom: 40px;
    }

	.service-entry .section-footer-text{
        margin-top: 30px;
    }

	.service-why-choose-box, 
	.service-features-box, 
	.service-window-box{
    	margin-top: 40px;
	}

	.service-why-choose-body,
	.service-feature-item-list{
		margin-top: 30px;
	}

	.service-why-choose-body{
		gap: 30px 20px;
	}

	.service-why-choose-item-list-box,
	.service-why-choose-image-box{
    	width: calc(50% - 10px);
	}

	.service-why-choose-item{
		margin-bottom: 20px;
	}

	.service-feature-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.service-feature-item .icon-box img{
		max-width: 24px;
	}

	.service-feature-item-content{
        width: calc(100% - 65px);
    }

	.service-feature-body{
		padding-top: 30px;
		margin-top: 30px;
		gap: 20px;
	}

	.service-feature-body-list, 
	.service-feature-body-image{
    	width: calc(50% - 10px);
	}

	.service-feature-body-image figure img{
		aspect-ratio: 1 / 0.5;
	}

	.service-window-item-list{
		margin: 30px 0;
	}

	.service-window-item{
		padding: 30px 25px;
	}

	.service-window-item-content{
    	margin-top: 30px;
	}

	.project-category-item-list{
    	padding: 20px;
	}

	.project-category-item{
		margin-bottom: 15px;
        padding-bottom: 15px;
	}

	.page-category-list .project-category-social-links ul{
		gap: 10px;
	}
	
	.project-entry{
        margin-bottom: 40px;
    }

	.project-client-requirement-box,
	.project-solution-box,
	.project-feedback-box{
    	margin-top: 40px;
	}

	.project-client-requirement-list,
	.project-solution-item-list-box,
	.project-feedback-body{
    	margin-top: 30px;
	}

	.team-member-about{
		margin-bottom: 40px;
	}

	.team-single-image,
	.team-about-content{
		width: 100%;
	}

	.team-single-image figure{
		height: auto;
	}

	.team-single-image img{
		height: auto;
		aspect-ratio: 1 / 0.7;
		object-position: top center;
	}

	.team-about-content{
		padding: 0 20px 20px;
	}

	.team-experience-info{
		margin-bottom: 40px;
	}

	.team-experience-item{
        width: calc(50% - 15px);
    }

	.team-skills-box,
	.contact-box-form.team-contact-form{
        width: 100%;
    }

	.team-skills-list .skills-progress-bar{
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 991px){

	.btn-default{
		padding: 15px 46px 15px 18px;
	}

	.btn-default::before{
		right: 18px;
	}

	header.main-header .header-sticky{
		width: 100%;
	}
	
	header.main-header .header-sticky.active{
        width: 100%;
	}

	.navbar{
		padding: 20px 0;
	}

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.section-row{
		margin-bottom: 40px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-sub-heading .section-sub-title,
	.section-title .section-sub-title{
		padding: 6px 12px 6px 24px;
	}

	.section-sub-heading .section-sub-title::before,
	.section-title .section-sub-title::before{
		left: 12px;
	}

	.section-title h1{
		font-size: 42px;
	}

	.section-title h2{
		font-size: 36px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.hero{
		min-height: 800px;
		padding: 150px 0 60px;
	}

	.hero-content-list ul li::before{
		font-size: 16px;
	}

	.hero-content-body{
		margin-top: 30px;
		padding-top: 30px;
	}

	.video-play-button a span{
		width: 46px;
    	height: 46px;
	}

	.video-play-button a span i{
		font-size: 16px;
	}

	.about-us{
		padding: 60px 0;
	}

	.about-us-counter-box{
		padding: 20px;
	}

	.about-us-counter-box .icon-box img{
		max-width: 40px;
	}

	.about-us-counter-content{
    	width: calc(100% - 55px);
	}

	.about-us-counter-content h2{
		font-size: 32px;
	}

	.about-us-body-list ul li{
        margin-bottom: 10px;
    }

	.about-us-body-list ul li::before{
		font-size: 16px;
	}

	.about-us-btn{
		padding-top: 30px;
		margin-top: 30px;
	}

	.about-us-counter-item{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.about-us-counter-item h2{
		font-size: 38px;
	}

	.our-services{
		background-size: 100% auto;
		padding: 60px 0;
	}

	.service-item{
        min-height: 380px;
        padding: 30px;
    }

	.service-item-body .icon-box{
		width: 50px;
		height: 50px;
	}

	.service-item-body .icon-box img{
		max-width: 24px;
	}

	.service-item-content{
		max-width: 100%;
	}

	.service-item-btn{
		margin-top: 20px;
		padding-top: 20px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.section-footer-text p span{
		padding: 3px 10px;
	}

	.section-footer-text ul{
		margin-top: 10px;
	}

	.section-footer-text ul li{
		margin-right: 5px;
	}

	.our-works{
		padding: 60px 0;
	}

	.our-work-item-list{
        padding: 30px;
    }

	.work-content-footer{
		margin-top: 30px;
	}

	.work-content-footer .work-contact-box{
		gap: 10px;
	}

	.work-content-footer .work-contact-box .icon-box{
		width: 44px;
		height: 44px;
	}

	.work-content-footer .work-contact-box .icon-box i{
		font-size: 20px;
	}

	.work-content-footer .work-contact-box .icon-box img{
		font-size: 20px;
	}

	.work-content-footer .work-contact-box-content{
		width: calc(100% - 54px);
	}

	.work-content-footer .work-contact-box-content p{
		font-size: 14px;
	}

	.work-contact-box-content h3{
		font-size: 18px;
	}

	.our-project{
		padding: 60px 0 0;
	}

	.intro-video{
		padding: 60px 0;
	}

	.intro-video-counter-item h2{
		font-size: 38px;
	}

	.intro-video-content-box{
		min-height: 480px;
	}

	.intro-video-item-list ul li::before{
		font-size: 16px;
	}

	.how-it-work{
    	padding: 60px 0;
	}

	.our-team{
    	padding: 60px 0;
	}

	.team-item-content-box{
		padding: 30px;
	}

	.team-item-image figure{
		max-width: 165px;
	}

	.team-item-content{
		margin-top: 20px;
	}

	.team-item-btn .readmore-btn{
		padding: 13px;
	}

	.our-testimonial{
		padding: 60px 0;
	}

	.testimonial-item{
		min-height: 380px;
	}

   .testimonial-item-header,
   .testimonial-item-author{
        padding: 20px;
    }

	.testimonial-item-rating i,
	.testimonial-item-content p{
		font-size: 18px;
	}

	.testimonial-author-image figure img{
		max-width: 50px;
	}

	.testimonial-author-content{
		width: calc(100% - 65px);
	}

	.our-testimonial .section-footer-text{
    	margin-top: 40px;
	}

	.our-faqs{
    	padding: 60px 0;
	}

	.faq-cta-client-image img{
		max-width: 50px;
	}

	.faq-cta-client-content-box{
		width: calc(100% - 65px);
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion .accordion-header .accordion-button{
		padding: 15px 45px 15px 20px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 20px;
		font-size: 18px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 15px 20px;
	}

	.contact-us-box{
		padding: 60px 0;
	}

	.contact-us-content-box{
		margin-bottom: 30px;
	}

	.contact-us-info-box{
        padding-top: 30px;
    }

	.contact-us-info-content{
		margin-top: 20px;
	}

	.contact-box-form{
		padding: 30px;
	}

	.contact-form .form-control{
		padding: 13px 15px;
	}

	.our-blog{
		padding: 60px 0 30px;
	}

	.main-footer{
    	padding: 60px 0 0;
	}

	.footer-links::before{
		display: none;
	}

	.footer-newsletter-form .form-group .form-control{
		padding: 13px 20px;
	}

	.footer-newsletter-form .form-group .btn-default{
		padding: 15px;
		margin-top: 15px;
	}

	.footer-cta-content{
		width: 100%;
	}

	.footer-cta-content h2{
		font-size: 24px;	
	}

	.footer-cta-contact-list{
		max-width: 100%;
		gap: 30px 40px;
	}

	.footer-cta-contact-item::before{
		right: -20px;
	}

	.page-header{
		padding: 170px 0 80px;
	}

	.page-header-box h1{
		font-size: 42px;
		margin-bottom: 10px;
	}

	.our-apporach{
    	padding: 60px 0;
	}

	.approach-accordion .accordion-item{
		margin-bottom: 20px;
	}

	.approach-accordion .accordion-header .accordion-button{
		font-size: 18px;
		padding: 0 30px 20px 0;
	}

	.approach-accordion .accordion-item .accordion-body{
		padding: 20px 30px 0 0;	
	}

	.key-fact{
    	padding: 60px 0;
	}

	.skills-progress-bar .skillbar{
    	margin-bottom: 20px;
	}

	.skills-progress-bar .skillbar .skill-progress{
		height: 10px;
	}

	.key-fact-btn{
		margin-top: 30px;
	}

	.key-fact-item-header h2{
		font-size: 38px;
	}

	.key-fact-item-footer{
		padding-top: 20px;
	}

	.premium-quality{
	    padding: 60px 0;
	}

	.premium-quality-item{
		width: calc(50% - 15px);
	}

	.premium-quality-item::before{
		right: -15px;
	}

	.premium-quality-item:nth-child(3n + 3)::before{
		display: block;
	}

	.premium-quality-item:last-child:before,
	.premium-quality-item:nth-child(2n + 2)::before{
		display: none;
	}

	.premium-quality-item-image figure{
        max-width: 160px;
    }

	.premium-quality .section-footer-text{
		margin-top: 40px;
	}

	.cta-box{
    	padding: 60px 0;
	}

	.cta-btn{
		margin-top: 30px;
	}
	
	.page-services{
    	padding: 60px 0 30px;
	}

	.page-service-single{
        padding: 60px 0;
    }

	.page-single-sidebar,
    .page-category-list{
        margin-bottom: 30px;
    }

	.sidebar-cta-contact-btn .btn-default{
    	padding: 15px 18px 15px 45px;
	}

	.sidebar-cta-contact-btn .btn-default::before{
		left: 18px;
	}

	.service-entry p{
        margin-bottom: 15px;
    }

	.service-entry h2{
        font-size: 38px;
        margin-bottom: 15px;
    }

	.service-entry ul li{
		margin-bottom: 15px;
	}

	.service-entry ul li::before{
        font-size: 16px;
    }

	.service-why-choose-item span{
		margin-bottom: 20px;
	}

	.page-blog{
    	padding: 60px 0;
	}

	.page-pagination{
        margin-top: 10px;
    }

	.page-single-post{
        padding: 60px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 38px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-projects{
		padding: 60px 0 30px;
	}

	.page-project-single{
    	padding: 60px 0;
	}

	.project-entry p{
        margin-bottom: 15px;
    }

	.project-entry h2{
        font-size: 38px;
        margin-bottom: 15px;
    }

	.project-entry ul li::before{
        font-size: 16px;
    }

	.project-solution-item-list{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.project-feedback-body{
		padding: 20px;
	}

	.project-feedback-body-content{
		margin-bottom: 10px;
	}

	.page-team{
		padding: 60px 0 30px;
	}

	.page-team-single{
		padding: 60px 0;
	}

	.team-contact-info-title{
		margin-bottom: 20px;
	}

	.team-contact-info-title h3{
		font-size: 20px;
	}

	.team-member-social-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.team-experience-item h3{
		font-size: 18px;
		padding-left: 25px;
	}

	.team-experience-item h3::before{
		font-size: 18px;
	}

	.team-experience-item p{
    	margin: 10px 0 0;
	}

	.team-skills-image{
    	margin-top: 30px;
	}

	.page-pricing{
		padding: 60px 0;
	}

	.pricing-item-content{
        padding: 20px;
    }

	.pricing-item-content h2{
		font-size: 34px;
	}

	.pricing-item-body{
		padding: 20px 10px 10px;
	}

	.pricing-item-list ul{
		margin-top: 15px;
		padding-top: 15px;
	}

	.pricing-item-list ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list ul li::before{
		font-size: 16px;
	}

	.pricing-benefit-list{
		margin-top: 10px;
	}

	.pricing-benefit-list ul{
		gap: 20px 30px;
	}

	.pricing-benefit-list ul li img{
		max-width: 18px;
	}

	.page-testimonials{
		padding: 60px 0 30px;
	}

	.page-gallery{
        padding: 60px 0 30px;
    }

	.page-video-gallery{
        padding: 60px 0 30px;
    }

	.page-faqs{
        padding: 60px 0;
    }

	.page-faqs .page-single-faqs{
        margin-bottom: 40px;
    }

	.page-contact-us{
        padding: 60px 0 30px;
    }

	.google-map{
        padding: 30px 0 60px;
    }

    .google-map-iframe{
        height: 450px;
    }

	.error-page{
		padding: 60px 0px;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 767px){

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 28px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-content-list ul{
		gap: 10px;
	}

	.hero-content-list ul li{
		width: 100%;
	}

	.hero-content-body{
        gap: 20px;
    }

	.video-play-button p{
		font-size: 14px;
	}

	.about-us-image img{
        aspect-ratio: 1 / 1.36;
    }

	.about-us-counter-box{
		padding: 12px;
		bottom: 35px;
		right: -50px;
		gap: 10px;
		border-radius: 14px;
	}

	.about-us-counter-box .icon-box img{
		max-width: 30px;
	}

	.about-us-counter-content{
        width: calc(100% - 40px);
    }

	.about-us-counter-content h2{
        font-size: 24px;
    }

	.about-us-counter-content p{
		font-size: 14px;
	}

	.about-us-image-box-2{
		margin-bottom: 30px;
	}

	.about-us-image-box-2 .about-us-image figure{
		border-width: 5px;
		border-radius: 24px 20px 20px 24px;
    	margin-left: -80px;
	}

	.about-us-body-content,
	.about-us-counter-list{
		width: 100%;
	}

	.about-us-counter-item{
		text-align: left;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.about-us-counter-item h2{
		font-size: 26px;
	}

	.service-item{
		padding: 20px;
		min-height: 300px;
	}

	.service-item-content h2{
		font-size: 18px;
	}

	.our-work-item-list{
		gap: 20px;
		padding: 20px;
	}

	.our-work-item{
		width: 100%;
	}

	.our-work-item-content h3{
		font-size: 18px
	}

	.work-content-footer{
		gap: 20px;
	}

	.project-item-body{
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

	.project-item-content h2{
		font-size: 18px;
	}

	.project-item-btn{
		padding-top: 15px;
		margin-top: 15px;
	}

	.intro-video-counter-list{
		gap: 20px;
	}

	.intro-video-counter-item{
    	width: calc(33.33% - 13.33px);
	}

	.intro-video-counter-item h2{
		font-size: 26px;
		font-weight: 400px !important;
	}

	.intro-video-counter-item p{
		font-size: 14px;
	}

	.intro-video-content-box{
		min-height: 380px;
		padding: 20px;
	}

	.intro-video-item-list ul{
		justify-content: start;
	}

	.how-it-work-item{
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

	.how-it-work-item-no{
		width: 42px;
		height: 42px;
	}

	.how-it-work-item-content{
		width: calc(100% - 57px);
	}

	.how-it-work-item-no h3{
		font-size: 20px;
	}

	.how-it-work-item-content h3{
		font-size: 18px;
	}

	.team-item-content-box{
        padding: 20px;
    }

	.team-item-content h2{
    	font-size: 18px;
	}

	.testimonial-item{
		min-height: 300px;
	}

	.testimonial-item-header{
		padding: 10px;
		margin-bottom: 10px;
	}

	.testimonial-item-rating i,
	.testimonial-item-content p{
        font-size: 16px;
    }

	.testimonial-item-author{
		padding: 15px;
	}

	.testimonial-author-content h2{
		font-size: 18px;
	}

	.faq-cta-client-box{
		max-width: 100%;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 16px;
        padding: 12px 40px 12px 15px;
    }

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 15px;
	}

	.faq-accordion .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.contact-box-form{
        padding: 20px;
    }

	.post-item{
        padding: 20px;
        min-height: 320px;
    }

	.post-item-content h2{
        font-size: 18px;
    }

	.post-item-btn{
        margin-top: 15px;
        padding-top: 15px;
    }

	.footer-links-box{
		justify-content: space-between;
	}

	.footer-quick-links,
	.footer-service-links,
	.footer-newsletter-box{
		width: auto;
	}

	.footer-newsletter-box{
		width: 100%;
	}

	.footer-links h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

    .footer-cta-box{
        padding: 20px;
	}

	.footer-cta-content h2{
    	font-size: 22px;
	}

	.footer-cta-contact-list{
		gap: 20px;
	}

	.footer-cta-contact-item::before{
		display: none;
	}

	.footer-cta-contact-item-content h3{
		font-size: 18px;
	}

	.footer-copyright-text{
        padding: 15px 0;
    }

	.page-header-box h1{
		font-size: 28px;
	}

	.approach-accordion .accordion-header .accordion-button{
		font-size: 16px;
		padding: 0 25px 15px 0;
	}

	.approach-accordion .accordion-item .accordion-button::after, 
	.approach-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
	}

	.approach-accordion .accordion-item .accordion-body{
        padding: 15px 0 0 0;
    }

	.approach-accordion .accordion-item .accordion-body p{
		font-size: 14px;
	}

	.our-approach-image figure img{
        aspect-ratio: 1 / 0.99;
    }

	.our-approach-cta-box{
		bottom: 15px;
		left: 15px;
		padding: 15px;
	}

	.our-approach-cta-footer{
    	margin-top: 15px;
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 10px;
	}

	.skills-progress-bar .skill-data .skill-title, 
	.skills-progress-bar .skill-data .skill-no{
		font-size: 16px;
	}

	.key-fact-item{
		width: 100%;
		padding: 20px;
		min-height: auto;
	}

	.key-fact-item-body{
		gap: 20px;
	}

	.key-fact-item-header p{
		margin: 0 0 5px;
	}

	.key-fact-item-header h2{
        font-size: 26px;
    }

	.premium-quality-item{
		width: 100%;
	}

	.premium-quality-item::before{
		display: none;
	}

	.premium-quality-item-content{
        margin: 20px 0 0;
    }

	.premium-quality-item-content h3{
		font-size: 18px;
	}

	.cta-btn::before{
		display: none;
	}

	.cta-box::before{
		left: -30px;
		width: 205px;
        height: 150px;
	}

	.cta-box::after{
		right: -30px;
		width: 280px;
        height: 200px;
	}

	.page-category-list .page-category-list-title,
	 .sidebar-cta-content h2{
        font-size: 18px;
    }

	.page-single-image{
        margin-bottom: 20px;
    }

	.page-single-image img{
        aspect-ratio: 1 / 0.65;
    }

	.service-entry h2{
        font-size: 26px;
    }

    .service-entry h3{
        font-size: 18px;
    }

	.service-entry ul li{
		margin-bottom: 10px;
	}

	.service-why-choose-item-list-box, 
	.service-why-choose-image-box{
		width: 100%;
	}

	.service-why-choose-image-box figure,
	.service-why-choose-image-box figure img{
		height: auto;
	}

	.service-why-choose-image-box figure img{
		aspect-ratio: 1 / 0.9;
	}

	.service-feature-item{
		width: 100%;
	}

	.service-feature-body-list,
	 .service-feature-body-image{
		width: 100%;
	}

	.service-feature-body-image figure,
	.service-feature-body-image figure img{
		height: auto;
	}

	.service-window-item{
		width: 100%;
	}

	.service-window-item-list{
		gap: 20px;
	}

	.service-window-item{
		width: calc(50% - 10px);
        padding: 15px;
	}

	.service-window-item-content{
        margin-top: 20px;
    }

	.post-single-meta ol li,
	.post-single-meta ol li i{
		font-size: 16px;
	}

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote{
		Background-size: 30px;
        padding: 60px 20px 20px 20px;
	}

	.post-entry blockquote p{
		font-size: 16px;
	}

	.post-entry h2{
		font-size: 26px;
	}
	
	.tag-links{
		font-size: 18px;
	}

	.project-entry h2{
        font-size: 26px;
    }

    .project-entry h3{
        font-size: 18px;
    }

	.project-entry ul{
		gap: 10px;
	}

	.project-entry ul li{
		width: 100%;
	}

	.project-solution-item-list{
		border-bottom: none;
		padding-bottom: 0;
		gap: 20px;
	}

	.project-solution-item{
		width: 100%;
	}
	
	.page-team{
		padding: 60px 0 30px;
	}

	.team-single-image img{
        aspect-ratio: 1 / 1;
        object-position: center center;
    }

	.team-about-content{
        padding: 0 10px 10px;
    }

	.team-contact-info-title h3{
    	font-size: 20px;
	}

	.team-contact-list{
		gap: 20px;
	}

	.team-contact-item{
		width: 100%;
		padding: 15px;
	}

	.team-contact-content h3,
	.team-member-social-list h3{
		font-size: 18px;
	}

	.team-member-social-list{
		gap: 20px;
	}

	.team-experience-item{
		width: 100%;
	}

	.team-experience-item h3{
		font-size: 18px;
	}

	.team-skills-list .skills-progress-bar{
        margin-bottom: 20px;
    }

	.skills-progress-bar .skill-data{
        margin-bottom: 10px;
    }

	.pricing-item-content span,
	.pricing-item-list h3{
		font-size: 18px;
	}

	.pricing-item-content p{
		margin: 10px 0 0;
	}

	.pricing-item-content h2{
		font-size: 28px;
		margin-top: 15px;
		padding-top: 15px;
	}

	.pricing-item-content h2 sub{
		font-size: 14px;
	}

	.pricing-item-list ul{
		padding: 15px 0 0;
		margin: 15px 0 0;
	}

	.pricing-benefit-list ul{
		gap: 10px 20px;
	}

	.pricing-benefit-list ul li{
		font-size: 14px;
	}

	.pricing-benefit-list ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.google-map-iframe{
        height: 350px;
    }
}
	
/************************************/
/***  34. Home - Version 2 css    ***/
/************************************/

.topbar-metal{
	background:#373737;
	padding: 15px 0;
}

.topbar-contact-info-metal p{
	line-height: 1.25em;
	color: #ffffff;
	margin-bottom: 0;
}

.topbar-contact-info-metal p a{
	color: inherit;
	text-decoration: underline;
	transition: all 0.4s ease-in-out;
}

.topbar-contact-info-metal p a:hover{
	color: var(--white-color);
}

.topbar-link-box-metal{
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
	align-items: center;
}

.topbar-contact-info-list-metal{
	border-right: 1px solid var(--divider-color);
	margin-right: 20px;
	padding-right: 20px;
}

.topbar-contact-info-list-metal ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.topbar-contact-info-list-metal ul li{
	position: relative;
	color: #ffff;
	text-transform: capitalize;
}

.topbar-contact-info-list-metal ul li::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -10px;
	background: #ffffff;
	width: 2px;
	height: 100%;
	transform: rotate(8deg);
}

.topbar-contact-info-list-metal ul li:last-child:before{
	display: none;
}

.topbar-contact-info-list-metal ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.topbar-contact-info-list-metal ul li a:hover{
	color: rgb(230, 87, 87);
}

.topbar-social-links-metal ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.topbar-social-links-metal ul li a{
	font-size: 18px;
	color: #ffffff;
    transition: all 0.3s ease-in-out;
}

.topbar-social-links-metal ul li a:hover{
	color: #E41E2F;
}

.topbar-social-links-metal ul li a i{
	color: inherit;
}

header.main-header-metal{
	position: initial;
}

header.main-header-metal .header-sticky{
	background: var(--secondary-color);
	border: none;
}

header.main-header-metal .main-menu ul li a{
	color: var(--primary-color);
}

header.main-header-metal .main-menu ul li a:hover,
header.main-header-metal .main-menu ul li a:focus{
	color: var(--accent-color);
}

header.main-header-metal .main-menu ul ul li a:hover,
header.main-header-metal .main-menu ul ul li a:focus{
	color: var(--white-color);
}

header.main-header-metal .header-sticky.active{
	background: var(--white-color);
	border-color: var(--divider-color);
}

.hero-metal{
	position: relative;
	min-height: 100vh;
	padding: 140px 0;
	align-content: center;
}

.hero-content-metal{
	position: relative;
	margin-right: 20px;
	z-index: 2;
}

.hero-content-footer-metal{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
	gap: 30px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 7.813vw;
	padding-top: 40px;
}

.google-review-box-metal{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	border-right: 1px solid var(--dark-divider-color);
    gap: 15px;
	padding-right: 30px;
}

.google-review-box-metal .icon-box img{
	width: 100%;
    max-width: 50px;
}

.google-review-box-content-metal{
	width: calc(100% - 65px);
}

.google-rating-star-metal i{
	font-size: 14px;
    color: var(--white-color);	
}

.google-review-box-content-metal p{
	font-size: 20px;
	font-weight: 500;
	line-height: normal;
	color: var(--white-color);
	margin: 8px 0 0;
}

.hero-footer-content-metal{
	max-width: 55%;
}

.hero-footer-content-metal p{
	color: var(--white-color);
	margin: 0;
}

.hero-image-slider-metal{
	height: 100%;
	align-content: end;
}

.hero-image-slider-metal .swiper-slide{
	cursor: none;
} 

.hero-img-slider-metal{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.hero-img-slider-metal:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(24, 24, 24, 0.80) 16.17%, transparent 100%);
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-img-slider-metal .swiper{
	height: 100%;
}

.hero-img-slider-metal .swiper-slide,
.hero-img-slider-metal .slide-image{
	height: 100%;
}

.hero-img-slider-metal .slide-image figure{
	display: block;
	height: 100%;
}

.hero-img-slider-metal .swiper-slide img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.hero-img-item-metal{
	text-align: right;
	width: 270px;
	margin: 0 0 0 auto;
}

.hero-img-item-metal .swiper-slide{
	border: 2px solid var(--dark-divider-color);
    border-radius: 10px;
	transition: all 0.4s ease-in-out;
}

.hero-img-item-metal .swiper-slide.swiper-slide-thumb-active{
	border-color: var(--white-color);
}

.hero-img-item-metal figure{
	display: block;
}

.hero-img-item-metal img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}

.about-us-metal{
	padding: 120px 0;
}

.about-us-metal .section-title h2 img{
	width: 100%;
    max-width: 120px;
	height: 40px;
    border-radius: 100px;
}

.about-us-item-metal{
	background-color: var(--secondary-color);
	border-radius: 20px;
	min-height: 425px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.about-us-item-header-metal .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 30px;
}

.about-us-item-header-metal .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-item-metal:hover .about-us-item-header-metal .icon-box::before{
	transform: scale(1);
}

.about-us-item-header-metal .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-item-metal:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-item-header-content-metal h3{
	font-size: 20px;
}

.about-us-item-header-content-metal p,
.about-us-item-counter-metal p{
	margin: 10px 0 0;
}

.about-us-item-counter-metal{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
}

.about-us-item-counter-metal h2{
	font-size: 40px;
}

.about-us-image-metal{
	height: calc(100% - 30px);
    margin-bottom: 30px;
}

.about-us-image-metal figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.about-us-image-metal img{
	width: 100%;
    height: 100%;
	aspect-ratio: 1 / 1.054;
    object-fit: cover;
    border-radius: 20px;
}

.about-us-item-image-metal figure{
	display: block;
	background-image: url('../images/about-us-item-image-shape-metal.svg');
    mask-image: url('../images/about-us-item-image-shape-metal.svg');
	mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: cover;
	width: 200px;
    height: 100px;
    overflow: hidden;
}

.about-us-item-image-metal img{
	width: 100%;
	object-fit: cover;
}

.about-us-item-Content-metal h3{
	font-size: 20px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
}

.about-us-item-Content-metal p{
	margin: 20px 0 0;
}

.company-supports-slider-box-metal{
	margin-top: 30px;
}

.company-supports-content-metal{
	display: flex;
	align-items: center;
	justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.company-supports-content-metal hr{
	height: 1px;
    flex-grow: 1;
    color: var(--divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content-metal p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.company-supports-slider-metal{
	margin: 0 3.125vw;
	text-align: center;
}

.company-supports-logo-metal img{
	width: 100%;
	max-width: 165px;
    height: 40px;
}

.our-services-metal{
	background-image: url('../images/service-bg-image-metal.png');
	background-position: bottom -60px center;
	background-repeat: no-repeat;
	background-size: auto;
	padding: 120px 0;
}

.service-item-metal{
	background-color: var(--bg-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	min-height: 400px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.service-item-metal .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.service-item-metal .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item-metal:hover .icon-box::before{
	transform: scale(1);
}

.service-item-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-item-metal:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-item-contant-metal h2{
	font-size: 20px;
}

.service-item-contant-metal h2 a{
	color: inherit;
}

.service-item-contant-metal p{
	margin: 15px 0 0;
}

.service-item-btn-metal{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.service-cta-box-metal{
	position: relative;
    border-radius: 20px;
	min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	gap: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-cta-box-metal .service-cta-image-metal{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.service-cta-box-metal .service-cta-image-metal figure{
	position: relative;
    display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.service-cta-box-metal .service-cta-image-metal figure::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--primary-color);
	opacity: 60%;
    z-index: 1;
}

.service-cta-box-metal .service-cta-image-metal figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.6s ease-in-out;
}

.service-cta-box-content-metal{
    position: relative;
	z-index: 2;
}

.service-cta-box-content-metal h3{
    font-size: 20px;
	line-height: 1.4em;
    color: var(--white-color);
}

.service-cta-box-content-metal p{
    color: var(--white-color);
    border-top: 1px solid var(--dark-divider-color);
    margin: 20px 0 0;
    padding: 20px 0 0;
}

.why-choose-us-metal{
	padding: 120px 0;
}

.why-choose-body-metal{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
}

.why-choose-item-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.why-choose-item-metal .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.why-choose-item-metal .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.why-choose-item-metal:hover .icon-box::before{
	transform: scale(1);
}

.why-choose-item-metal .icon-box img{
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
}

.why-choose-item-metal:hover .icon-box img{
    filter: brightness(0) invert(1);
}

.why-choose-item-Content-metal{
	width: calc(100% - 65px);
}

.why-choose-item-Content-metal h3{
	font-size: 20px;
}

.why-choose-item-Content-metal p{
	margin: 10px 0 0;
}

.why-choose-image-list-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.why-choose-body-image-metal{
	max-width: 200px;
}

.why-choose-body-image-metal figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.why-choose-body-image-metal img{
	height: 100%;
	width: 100%;
	aspect-ratio: 1 / 0.86;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-body-list-metal{
	width: calc(100% - 230px);
	align-content: center;
}

.why-choose-body-list-metal ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-choose-body-list-metal ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 20px;
}

.why-choose-body-list-metal ul li::before{
	content: '\f058';
	position: absolute;
	font-family: 'Font Awesome 7 Free';
	font-size: 18px;
    font-weight: 900;
	color: var(--accent-color);
	top: 0;
	left: 0;
}

.why-choose-body-list-metal ul li:last-child{
	margin-bottom: 0;
}

.why-choose-image-box-metal{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	margin-left: 15px;
	padding-right: 15px;
}

.why-choose-image-1-metal{
	width: 67%;
	padding-bottom: 190px;
}

.why-choose-image-box-metal figure{
	display: block;
	border-radius: 20px;
}

.why-choose-image-box-metal figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-image-1-metal figure img{
	aspect-ratio: 1 / 1.265;
}

.why-choose-image-2-metal{
	position: relative;
	width: 33%;
	z-index: 1;
	transform: rotate(6deg);
}

.why-choose-image-2-metal figure{
	border: 6px solid var(--bg-color);
	margin-left: -189px;
	border-radius: 26px;
}

.why-choose-image-2-metal figure img{
	aspect-ratio: 1 / 1.0977;
}

.our-feature-metal{
    padding: 90px 0;
}

.feature-item-metal{
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: space-between;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
	border-radius: 20px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
	padding: 40px 40px 0;
	overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.feature-item-metal:hover{
    transform: translateY(-5px);
}

.feature-item-body-metal .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: rgb(230, 87, 87);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	margin: 0 auto 20px;
    overflow: hidden;
}

.feature-item-body-metal .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.feature-item-metal:hover .feature-item-body-metal .icon-box:before{
	transform: scale(1);
}

.feature-item-body-metal .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.feature-item-content-metal{
	text-align: center;
}

.feature-item-content-metal h3{
	font-size: 20px;
	font-weight: 400;
	color: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.feature-item-content-metal p{
	color: var(--white-color);
	margin: 0;
}

.feature-item-image-metal{
	margin: 0 auto -35px;
}

.feature-item-image-metal figure{
    display: block;
    max-width: 280px;
    border-radius: 20px;
}

.feature-item-image-metal img{
    width: 100%;
    aspect-ratio: 1 / 0.9;
    object-fit: cover;
    border-radius: 20px;
}

.feature-item-metal.box-2{
	background-color: var(--accent-color);
    backdrop-filter:none;
}

.feature-item-metal.box-2 .feature-item-content-metal{
	text-align: start;
}

.feature-item-metal.box-2 .feature-item-content-metal h3{
 	color: var(--primary-color);
 	border-bottom: 1px solid var(--divider-color);
}

.feature-item-metal.box-2 .feature-item-content-metal p{
	color: var(--primary-color);
}

.feature-item-image-box-metal{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	align-items: end;
}

.feature-item-image-1-metal{
	width: calc(50% - 10px);
}

.feature-item-image-1-metal figure{
	display: block;
	border-radius: 20px 20px 0 0;
	margin-left: -30px;
}

.feature-item-image-1-metal figure img{
	width: 100%;
	max-width: 170px;
	border-radius: 20px 20px 0 0;
}

.feature-item-image-2-metal{
	width: calc(50% - 10px);
	text-align: right;
}

.feature-item-image-2-metal figure{
	display: block;
	border-radius: 20px 20px 0 0;
	margin: 0 -50px -20px 0;
}

.feature-item-image-2-metal figure img{
	width: 100%;
	max-width: 210px;
	border-radius: 20px 20px 0 0;
}

.our-feature-metal .satisfy-client-image{
    border-color:var(--primary-color);
}

.our-commitments-metal{
	padding: 120px 0;
}

.our-commitments-image-box-metal{
	position: relative;
	margin-right: 15px;
}

.our-commitments-image-metal figure{
	position: relative;
    display: block;
    border-radius: 20px;
}

.our-commitments-image-metal figure::before{
	content: '';
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 0%, var(--bg-color) 88.75%);
	height: 130px;
	width: 100%;
	z-index: 1;
}

.our-commitments-image-metal img{
	width: 100%;
	aspect-ratio: 1 / 1.172;
	object-fit: cover;
    border-radius: 20px;
}

.commiments-review-box-metal{
	position: absolute;
	bottom: 95px;
	left: 0;
	max-width: 230px;
	background-color: var(--secondary-color);
	border-radius: 14px;
	padding: 30px;
    animation: heroboxmove1 3s infinite linear alternate;
	z-index: 2;
}

@keyframes heroboxmove1{
	50%{
		transform: translateX(20px);
	}
}

.commiments-review-box-metal h2{
	font-size: 24px;
	font-weight: 500;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.commiments-review-box-metal h2 sub{
	font-size: 16px;
	bottom: 0;
}	

.commiments-review-box-metal h2 i{
	font-size: 20px;
	color: var(--accent-color);
	margin-left: 5px;
}

.commiments-review-box-metal h3{
	font-size: 20px;
	line-height: 1.4em;
}

.commitments-counter-items-list-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 5.208vw;
}

.commitments-counter-item-metal{
	position: relative;
	width: calc(50% - 2.604vw);
}

.commitments-counter-item-metal::before{
	content: '';
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	right: -2.604vw;
	width: 1px;
	height: 80%;
	background: var(--divider-color);
}

.commitments-counter-item-metal:last-child:before,
.commitments-counter-item-metal:nth-child(2n + 2):before{
	display: none;
}

.commitments-counter-item-metal h2{
	font-size: 46px;
}

.commitments-counter-item-metal p{
	margin: 10px 0 0;
}

.commitments-items-list-metal{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}

.commitments-item-metal{
	width: calc(50% - 15px);
	background-color: var(--secondary-color);
	border-radius: 20px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
}

.commitments-item-metal .icon-box{
	position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.commitments-item-metal .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.commitments-item-metal:hover .icon-box::before{
	transform: scale(1);
}

.commitments-item-metal .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.commitments-item-metal:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.commitments-item-metal h3{
	font-size: 20px;
}

.commitments-item-metal p{
	margin: 10px 0 0;
}

.our-commitments-metal .section-footer-text{
	margin-top: 60px;
}

.intro-video-box-metal{
    position: relative;
}

.intro-video-box-metal .container-fluid{
    padding: 0;
}

.intro-video-image-metal{
    position: relative;
    overflow: hidden;
}

.intro-video-image-metal figure{
    display: block;
}

.intro-video-image-metal figure:before{
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    opacity: 30%;
    z-index: 1;
}

.intro-video-image-metal img{
    width: 100%;
    aspect-ratio: 1 / 0.42;
    object-fit: cover;
    transition: all 1s ease-in-out;
}

.intro-video-metal:hover .intro-video-image-metal img{
	transform: scale(1.03);
}

.intro-video-metal .video-play-button-metal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.intro-video-metal .video-play-button-metal a{
    display: inline-block;
    border: 1px solid var(--dark-divider-color);
    padding: 10px;
    border-radius: 50%;
}

.video-play-button-metal a span{
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--white-color);
    background-color: var(--divider-color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50%;
    cursor: none;
    transition: all 0.4s ease-in-out;
}

.intro-video-metal .video-play-button-metal a:hover span{
    color: var(--primary-color);
	background-color: var(--accent-color);
}

.our-pricing{
    padding: 120px 0;
}

.cta-box-metal{
    position: relative;
    background-image: url('../images/cta-box-bg-image-metal.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 170px 0;
}

.cta-box-metal::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(24, 24, 24, 0.90) 30.93%, transparent 75.22%);
    z-index: 1;
}

.cta-box-metal .container{
    position: relative;
    z-index: 2;
}

.our-faqs-metal{
    padding: 120px 0;
}

.our-faq-content-metal{
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

.faq-accordion-metal .accordion-item{
    background: var(--accent-color);
    border-radius: 10px;
    margin-bottom: 25px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.faq-accordion-metal .accordion-item:last-child{
    margin-bottom: 0;
}

.faq-accordion-metal .accordion-header .accordion-button{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.333em;
    color: var(--primary-color);
    background: var(--white-color);
    padding: 22px 70px 22px 20px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion-metal .accordion-item .accordion-button:not(.collapsed){
    background: transparent;
}

.faq-accordion-metal .accordion-item .accordion-button::after,
.faq-accordion-metal .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
    height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	font-size: 24px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion-metal .accordion-button:not(.collapsed)::after{
    content: '\f068';
	background-color: var(--white-color);
}

.faq-accordion-metal .accordion-item .accordion-body{
    background: var(--accent-color);
    border-top: 1px solid var(--divider-color);
    padding: 22px 20px;
}

.faq-accordion-metal .accordion-item .accordion-body p{
    color: var(--primary-color);
	margin: 0;
}

.our-testimonial-metal{
    background-image: url('../images/testimonial-bg-image-metal.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 120px 0;
}

.testimonial-content-btn-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    align-items: center;
    margin-top: 30px;
}

.our-testimonial-metal .section-content-btn .section-btn{
    margin-top: 0;
}

.testimonial-client-box-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    max-width: 62%;
}

.testimonial-client-box-metal .satisfy-client-image{
    border: 1px solid var(--white-color);
}

.satisfy-client-content-metal{
    width: calc(100% - 151px);
}

.satisfy-client-content-metal p{
    margin-bottom: 0;
}

.testimonial-slider-metal,
.testimonial-slider-metal .swiper{
	height: 100%;
}

.testimonial-slider-metal .swiper-wrapper{
	cursor: none;
}

.testimonial-item-metal{
    min-height: 510px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    background-color: var(--bg-color);
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    transition: all 0.4s ease-in-out;
}

.testimonial-slider-metal .swiper-slide .testimonial-item-metal{
	transform: scale(0.95);
}

.testimonial-slider-metal .swiper-slide.swiper-slide-next .testimonial-item-metal{
	transform: scale(1);
}

.testimonial-item-logo-metal img{
    width: 100%;
    max-width: 150px;
}

.testimonial-item-content-metal p{
    color: var(--primary-color);
    font-size: 20px;
    margin-bottom: 0;
}

.testimonial-author-content-metal{
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.testimonial-author-content-metal h2{
    font-size: 20px;
}

.testimonial-author-content-metal p{
    margin: 5px 0 0;
}

.our-testimonial-metal .section-footer-text{
    margin-top: 60px;
}

.main-footer-metal{
    padding: 120px 0 0;
}

.footer-header-metal{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 30px;
    align-items: center;
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 60px;
    margin-bottom: 60px;
}

.footer-logo-metal img{
    width: 100%;
    max-width: 152px;
}

.footer-contact-info-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px 50px;
}

.footer-contact-item-metal{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.footer-contact-item-metal::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -25px;
    background: var(--dark-divider-color);
    width: 1px;
    height: 100%;
}

.footer-contact-item-metal:last-child:before{
    display: none;
}
    
.footer-contact-item-metal .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.footer-contact-item-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--white-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.footer-contact-item-metal:hover .icon-box:before{
	transform: scale(1);
}

.footer-contact-item-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.footer-contact-item-content-metal{
    width: calc(100% - 65px);
}

.footer-contact-item-content-metal p{
    color: var(--white-color);
    margin-bottom: 5px;
}

.footer-contact-item-content-metal h2{
    font-size: 20px;
    color: var(--white-color);
}

.footer-contact-item-content-metal h2 a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.footer-contact-item-content-metal h2 a:hover{
	color: var(--accent-color);
}

.about-footer-content-metal p{
    color: var(--white-color);
    margin-bottom: 0;
}

.footer-social-links-metal{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.footer-social-links-metal h2{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 20px;
}

.footer-social-links-metal ul{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.footer-social-links-metal ul li a{
	width: 40px;
	height: 40px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.footer-social-links-metal ul li a:hover{
	background-color: var(--accent-color);
    color: var(--primary-color);
}

.footer-social-links-metal ul li a i{
	font-size: 18px;
	color: inherit;
}

.footer-links-box-metal{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-left: 60px;
}

.footer-links-metal{
    max-width: 26%;
}

.footer-links-metal h2{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-links-metal ul{
    list-style: disc;
    margin: 0;
    padding: 0 0 0 20px;
}

.footer-links-metal ul li{
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 15px;
}

.footer-links-metal ul li:last-child{
    margin-bottom: 0;
}

.footer-links-metal ul li::marker{
    color: var(--accent-color);
}

.footer-links-metal ul li a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.footer-links-metal ul li a:hover{
	color: var(--accent-color);
}

.footer-working-hour-box-metal{
    width: 100%;
    max-width: 40%;
}

.footer-working-hour-box-metal ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-working-hour-box-metal ul li{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-transform: capitalize;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.footer-copyright-metal{
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    text-align: center;
    padding: 25px 0;
    margin-top: 120px;
}

.footer-copyright-text-metal p{
    color: var(--white-color);
    margin-bottom: 0;
}

@media only screen and (max-width: 1024px){
	
	.topbar-contact-info-list-metal{
		display: none;
	}

	.hero-metal{
		min-height: 780px;
	}

	.hero-content-metal{
		max-width: 100%;
        margin: 0;
	}

    .hero-content-footer-metal{
        margin-top: 40px;
    }

	.hero-img-item-metal{
		margin: 30px 0 0 0;
	}

	.about-us-image-metal img{
		aspect-ratio: 1 / 0.85;
	}

	.company-supports-content-metal{
		margin-bottom: 30px;
	}

	.why-choose-us-content-metal{
        height: auto;
		margin-bottom: 30px;
	}

	.why-choose-image-box-metal{
		max-width: 740px;
		margin: 0 auto;
	}

    .why-choose-image-1-metal figure img{
        aspect-ratio: 1 / 1.2;
    }

	.our-commitments-image-box-metal{
		max-width: 615px;
        margin: 0 auto 30px;
	}

    .intro-video-image-metal img{
        aspect-ratio: 1 / 0.6;
    }

    .cta-box-metal::before{
        background: var(--primary-color);
        opacity: 60%;
    }

    .our-faq-content-metal{
        position: initial;
        margin: 0 0 30px;
    }

    .testimonial-content-btn-metal{
        margin-top: 20px;
    }

    .testimonial-slider-metal .swiper-slide .testimonial-item-metal{
		transform: scale(1);
	}

    .testimonial-item-metal{
        padding: 30px;
        min-height: 410px;
    }

    .testimonial-author-content-metal{
        margin-top: 30px;
        padding-top: 30px;
    }

    .footer-header-metal{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .about-footer-metal{
        margin-bottom: 30px;
    }

    .footer-social-links-metal h2{
        margin-bottom: 15px;
    }

    .footer-links-box-metal{
        margin-left: 0;
    }

    .footer-links-metal h2{
        margin-bottom: 20px;
    }

    .footer-links-metal ul li{
        margin-bottom: 10px;
    }

    .footer-copyright-metal{
        margin-top: 30px;
        padding: 15px 0;
    }
}

@media only screen and (max-width: 991px){

	.hero-metal{
		padding: 60px 0;
	}

	.hero-content-footer-metal{
		margin-top: 30px;
		padding-top: 30px;
	}

	.hero-img-item-metal{
		max-width: 230px;
	}

	.hero-img-item-metal .swiper-slide{
		max-width: 100px;
	}

	.about-us-metal{
		padding: 60px 0;
	}

    .about-us-metal .section-title h2 img{
		max-width: 100px;
	}

	.about-us-item-metal{
		min-height: 370px;
		padding: 30px;
	}

	.about-us-item-counter-metal{
		padding-top: 30px;
	}

	.about-us-item-counter-metal h2{
		font-size: 34px;
	}

    .company-supports-slider-metal{
        margin: 0;
    }

    .company-supports-logo-metal img{
        max-width: 145px;
        height: 34px;
    }

    .our-services-metal{
        background-position: bottom -20px center;
        background-size: 100% auto;
		padding: 60px 0;
	}

	.service-item-metal,
	.service-cta-box-metal{
		min-height: 350px;
		padding: 30px;
	}

    .why-choose-us-metal{
		padding: 60px 0;
	}

	.why-choose-body-metal{
        padding: 30px;
    }

	.why-choose-body-list-metal ul li{
        margin-bottom: 15px;
    }

	.why-choose-body-list-metal ul li::before{
		font-size: 16px;
	}

    .our-feature-metal{
    	padding: 60px 0;
	}

    .feature-item-metal{
		padding: 30px 30px 0;
        gap: 30px;
    }

	.feature-item-image-1-metal figure{
		margin-left: -20px;
	}

	.our-commitments-metal{
		padding: 60px 0;
	}

    .commiments-review-box-metal{
        padding: 20px;
    }

	.commiments-review-box-metal h2{
		font-size: 22px;
	}

	.commitments-counter-item-metal h2{
		font-size: 38px;
	}

	.commitments-items-list-metal{
		padding-top: 30px;
		margin-top: 30px;
	}

	.commitments-item-metal{
		min-height: auto;
        padding: 20px;
	}

    .commitments-item-metal .icon-box{
        height: 50px;
        width: 50px;
    }

    .commitments-item-metal .icon-box img{
        max-width: 24px;
    }

	.commiments-review-box-metal h2 i{
		font-size: 18px;
	}

	.our-commitments-metal .section-footer-text{
		margin-top: 40px;
	}

    .our-pricing{
        padding: 60px 0;
    }

    .cta-box-metal{
        padding: 90px 0;
    }

    .our-faqs-metal{
        padding: 60px 0;
    }

    .faq-accordion-metal .accordion-item{
        margin-bottom: 20px;
    }

    .faq-accordion-metal .accordion-header .accordion-button{
        padding: 18px 60px 18px 18px;
    }

    .faq-accordion-metal .accordion-item .accordion-button::after,
    .faq-accordion-metal .accordion-item .accordion-button.collapsed::after{
        height: 40px;
		width: 40px;
		font-size: 20px;
    }

    .faq-accordion-metal .accordion-item .accordion-body{
        padding: 18px;
    }

    .our-testimonial-metal{
        padding: 60px 0;
    }

    .satisfy-client-image figure img{
        max-width: 40px;
    }

    .testimonial-item-content-metal p{
        font-size: 18px;
    }

    .our-testimonial-metal .section-footer-text{
        margin-top: 40px;
    }

    .main-footer-metal{
        padding: 60px 0 0;
    }

    .footer-contact-item-content-metal h2{
        font-size: 18px;
    }
}	

@media only screen and (max-width: 767px){

	.topbar-metal{
		padding: 10px 0;
	}

	.topbar-contact-info-metal{
		text-align: center;
	}

	.topbar-contact-info-metal p{
		font-size: 14px;
	}

	.topbar-link-box-metal{
		display: none;
	}

    .hero-content-footer-metal{
        gap: 15px;
        margin-top: 20px;
        padding-top: 20px;
    }

	.google-review-box-metal{
		width: 100%;
		padding: 0;
		border-right: none;
	}

	.hero-footer-content-metal{
		max-width: 100%;
	}

	.google-review-box-metal .icon-box img{
		max-width: 40px;
	}

	.google-review-box-content-metal{
		width: calc(100% - 55px);
	}

	.google-review-box-content-metal p{
		font-size: 18px;
	}

	.hero-img-item-metal{
		max-width: 175px;
	}

	.hero-img-item-metal .swiper-slide{
        max-width: 80px;
    }

    .about-us-metal .section-title h2 img{
        max-width: 80px;
        height: 30px;
    }

	.about-us-item-metal{
		min-height: auto;
		gap: 20px;
		padding: 20px;
	}

	.about-us-item-header-metal .icon-box{
		margin-bottom: 20px;
	}

	.about-us-item-header-content-metal h3{
		font-size: 18px;
	}

	.about-us-item-counter-metal{
		padding-top: 20px;
	}

	.about-us-item-counter-metal h2{
		font-size: 28px;
	}

	.about-us-item-Content-metal h3{
		font-size: 18px;
	}

	.about-us-image-metal figure,
	.about-us-image-metal img{
		height: auto;
	}

	.company-supports-slider-box-metal{
		margin-top: 10px;
	}
	
	.company-supports-content-metal{
		margin-bottom: 20px;
		gap: 10px;
	}

	.company-supports-content-metal p{
		font-size: 14px;
	}

    .service-item-metal,
	.service-cta-box-metal{
		min-height: auto;
		padding: 20px;
	}

	.service-item-contant-metal h2,
	.service-cta-box-content-metal h3{
		font-size: 18px;
	}

	.service-item-btn-metal{
		padding-top: 20px;
		margin-top: 20px;
	}

    .why-choose-body-metal{
		padding: 20px;
	}

	.why-choose-item-metal{
		margin-bottom: 20px;
    	padding-bottom: 20px;
	}

    .why-choose-item-Content-metal{
        width: 100%;
    }

	.why-choose-item-Content-metal h3{
		font-size: 18px;
	}

	.why-choose-image-list-metal{
		gap: 20px;
	}

	.why-choose-body-image-metal,
	.why-choose-body-list-metal{
		width: 100%;
		max-width: 100%;
	}

	.why-choose-body-list-metal ul li{
		margin-bottom: 10px;
	}

	.why-choose-image-box-metal{
		padding-right: 5px;
	}

	.why-choose-image-1-metal{
		padding-bottom: 100px;
	}

	.why-choose-image-2-metal figure{
		margin-left: -100px;
	}

	.feature-item-metal{
		padding: 20px 20px 0;
        gap: 20px;
    }

    .feature-item-content-metal h3{
    	font-size: 18px;
        padding-bottom: 15px;
    	margin-bottom: 15px;
	}

	.commiments-review-box-metal{
		bottom: 55px;
		max-width: 155px;
		padding: 15px;
	}

	.commiments-review-box-metal h2{
        font-size: 20px;
		padding-bottom: 10px;
    	margin-bottom: 10px;
    }

	.commiments-review-box-metal h2 sub{
		font-size: 14px;
	}

	.commiments-review-box-metal h2 i{
		font-size: 16px;
	}

	.commiments-review-box-metal h3{
		font-size: 16px;
	}

    .commitments-counter-items-list-metal{
        gap: 30px;
    }

    .commitments-counter-item-metal{
        width: calc(50% - 15px);
    }

    .commitments-counter-item-metal::before{
        right: -15px;
    }

	.commitments-counter-item-metal h2{
        font-size: 26px;
    }

	.commitments-counter-item-metal p{
		margin: 5px 0 0;
	}

    .commitments-items-list-metal{
        gap: 20px;
    }

	.commitments-item-metal{
		width: 100%;
		gap: 20px;
		padding: 20px;
	}

	.commitments-item-metal h3{
		font-size: 18px;
	}

	.commitments-item-metal p{
		margin: 5px 0 0;
	}

    .intro-video-image-metal img{
        aspect-ratio: 1 / 0.8;
    }

    .intro-video-metal .video-play-button-metal a{
        padding: 5px;
    }

    .intro-video-metal .video-play-button-metal a span{
        font-size: 18px;
        width: 80px;
        height: 80px;
    }

    .faq-accordion-metal .accordion-header .accordion-button{
		font-size: 16px;
        padding: 12px 50px 12px 15px;
    }

    .faq-accordion-metal .accordion-item .accordion-button::after,
    .faq-accordion-metal .accordion-item .accordion-button.collapsed::after{
        height: 30px;
        width: 30px;
        font-size: 18px;
    }

    .faq-accordion-metal .accordion-item .accordion-body{
        padding: 12px 15px;
    }

    .testimonial-client-box-metal{
        max-width: 100%;
    }

    .testimonial-item-metal{
        min-height: auto;
        gap: 20px;
        padding: 20px;
    }

    .testimonial-item-logo-metal img{
        max-width: 135px;
    }

    .testimonial-item-content-metal p{
        font-size: 16px;
    }

    .testimonial-author-content-metal{
        margin-top: 20px;
        padding-top: 20px;
    }

    .testimonial-author-content-metal h2{
        font-size: 18px;
    }

    .footer-header-metal{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .footer-contact-info-metal{
        gap: 20px;
    }

    .footer-contact-item-metal{
        width: 100%;
    }

    .footer-contact-item-metal::before{
        display: none;
    }

    .footer-contact-item-metal .icon-box{
        width: 44px;
        height: 44px;
    }

    .footer-contact-item-metal .icon-box img{
        max-width: 22px;
    }

    .footer-contact-item-content-metal{
        width: calc(100% - 59px);
    }

    .footer-contact-item-content-metal h2{
        font-size: 16px;
    }

    .footer-social-links-metal{
        margin-top: 20px;
        padding-top: 20px;
    }

    .footer-social-links-metal h2{
        font-size: 18px;
    }

    .footer-links-metal{
        max-width: 100%;
    }

    .footer-links-metal h2{
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-working-hour-box-metal{
        width: 100%;
    }

    .footer-copyright-metal{
        padding: 10px 0;
    }
}

/************************************/
/***   35. Home - Version 3 css   ***/
/************************************/

.hero-stone{
	position: relative;
	background-image: url('../images/hero-bg-image-stone.jpg');
	padding: 250px 0 80px;
}

.hero-stone::before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
	opacity: 60%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-stone .container{
	position: relative;
	z-index: 2;
}

.hero-content-stone{
	max-width: 760px;
}

.hero-content-body-stone{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}

.video-play-button-stone a{
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: none;
	gap: 10px;
}

.video-play-button-stone a span{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
}

.video-play-button-stone a span.bg-effect:before,
.video-play-button-stone a span.bg-effect:after{
	content: '';
	position: absolute;
    width: 160%;
    height: 160%;
	border: 25px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button-stone a span.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button-stone a span i{
	position: relative;
	font-size: 16px;
	color: var(--primary-color);
	margin-left: 2px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.video-play-button-stone p{
	font-weight: 500;
	color: var(--white-color);
	margin: 0;
}

.contact-us-circle-stone{
	text-align: end;
}

.contact-us-circle-stone a{
	display: inline-block;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
}

.contact-us-circle-stone a img{
	width: 100%;
    max-width: 130px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

.contact-us-circle-stone a:hover img{
    animation-play-state: paused;
}

.hero-info-list-stone{
	border-top: 1px solid var(--dark-divider-color);
    padding-top: 60px;
    margin-top: 10.417vw;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.hero-info-item-stone{
	width: calc(33.33% - 20px);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.hero-info-item-stone .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--accent-color);
    overflow: hidden;
}

.hero-info-item-stone .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.hero-info-item-stone:hover .icon-box:before{
	transform: scale(1);
}

.hero-info-item-stone .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.hero-info-item-content-stone{
	width: calc(100% - 65px);
}

.hero-info-item-content-stone h2{
	font-size: 20px;
	color: var(--white-color);
}

.hero-info-item-content-stone p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.about-us-stone{
    padding: 120px 0;
}

.about-us-image-box-stone{
    display: flex;
    flex-wrap: wrap;
    margin-right: 15px;
}

.about-us-image-box-1-stone{
    width: 38%;
    padding-bottom: 120px;
}

.about-us-image-box-1-stone .about-us-image-stone figure{
    margin-right: -230px;
}

.about-us-image-stone figure{
    display: block;
    border-radius: 20px;
}

.about-us-image-stone figure img{
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.about-us-image-box-1-stone .about-us-image-stone figure img{
    aspect-ratio: 1 / 1.36;
}

.about-us-image-box-2-stone .about-us-image-stone figure img{
    aspect-ratio: 1 / 1.14;
}

.about-us-image-box-2-stone{
    position: relative;
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    z-index: 1;
}

.about-experience-box-stone{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    background-color: var(--white-color);
    border-radius: 10px;
    padding: 25px;
    max-width: 280px;
    margin: 70px 30px 0 auto;
    animation: Movestylestone 2s infinite alternate linear;
}

@keyframes Movestylestone{
	50%{
		transform: translateX(-15px);
	}
}

.about-experience-box-stone .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.about-experience-box-stone .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-experience-box-stone:hover .icon-box::before{
    transform: scale(1);
}

.about-experience-box-stone .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-experience-box-stone:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-experience-box-content-stone{
    width: calc(100% - 65px);
}

.about-experience-box-content-stone h2{
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
}

.about-experience-box-content-stone p{
    color: var(--primary-color);
	line-height: normal;
    margin: 5px 0 0;
}

.about-us-image-box-2-stone .about-us-image-stone figure{
    border: 6px solid var(--bg-color);
    border-radius: 27px;
}

.about-us-item-box-stone{
    background-color: var(--white-color);
    border-radius: 20px;
    margin-bottom: 40px;
    padding: 25px;
}

.about-us-item-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.about-us-item-stone .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.about-us-item-stone .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-item-box-stone:hover .icon-box::before{
    transform: scale(1);
}

.about-us-item-stone .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-item-box-stone:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-item-content-stone{
    width: calc(100% - 70px);
}

.about-us-item-content-stone h3{
    font-size: 20px;
}

.about-us-item-content-stone p{
    margin: 10px 0 0;
}

.about-us-item-list-stone ul{
    list-style: disc;
    padding: 0 0 0 20px;
    margin: 0;
}

.about-us-item-list-stone ul li{
    line-height: 1.5em;
    margin-bottom: 10px;
}

.about-us-item-list-stone ul li:last-child{
    margin-bottom: 0;
}

.about-us-item-list-stone ul li::marker{
    color: var(--accent-color);
}

.about-us-body-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.about-us-body-content-stone{
    width: calc(50% - 15px);
    align-content: center;
}

.about-us-list-stone ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-us-list-stone ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.about-us-list-stone ul li:last-child{
	margin-bottom: 0;
}

.about-us-list-stone ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.about-us-btn-stone{
	margin-top: 40px;
}

.about-us-body-image-stone{
    width: calc(50% - 15px);
}

.about-us-body-image-stone figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.about-us-body-image-stone figure img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 0.67;
    object-fit: cover;
    border-radius: 20px;
}

.our-service-stone{
	background-image: url("../images/service-bg-image-metal.png");
    background-position: bottom -60px center;
    background-repeat: no-repeat;
    background-size: auto;
    padding: 120px 0;
}

.service-item-stone{
	background: var(--bg-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
    transition: all 0.4s ease-in-out;
}

.service-item-stone:hover{ 
    transform: translateY(-5px);
}

.servce-item-image-box-stone{
    position: relative;
    margin-bottom: 10px;
}

.servce-item-image-box-stone figure{
    display: block;
    border-radius: 10px;
}

.servce-item-image-box-stone figure img{
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1.045;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.service-item-stone:hover .servce-item-image-box-stone figure img{
    transform: scale(1.06);
}

.service-btn-stone{
    position: absolute;
    top: 50%;
    left: 50%;    
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-stone:hover .service-btn-stone{
    transform: translate(-50%, -50%) scale(1);
}

.service-btn-stone a{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

.service-btn-stone a:hover{
    background-color: var(--primary-color);
}

.service-btn-stone img{
	width: 100%;
    max-width: 20px;
    transition: all 0.4s ease-in-out;
}

.service-btn-stone a:hover img{
    filter: brightness(0) invert(1);
}

.service-btn-stone:hover img{
    transform: rotate(45deg);
}

.service-item-content-stone{
    padding: 20px;
    text-align: center;
}

.service-item-content-stone h2{ 
    font-size: 20px;
}

.service-item-content-stone h2 a{ 
    color: inherit;
}

.our-values-stone{
    padding: 120px 0;
}

.values-image-box-stone{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.values-image-box-stone::before{
    content: "";
    position: absolute;
    top: 85px;
    right: 35px;
    background: url("../images/our-values-bg-image-stone.png") no-repeat;
	background-position: center center;
    background-size: cover;
    width: 155px;
    height: 234px;
    transform: rotate(15deg);
}

.values-image-box-1-stone{
    width: 40%;
    padding-bottom: 225px;
}

.values-image-box-1-stone figure{
    display: block;
    border-radius: 200px 200px 0 0;
    margin-right: -165px;
}  

.values-image-box-1-stone figure img{
    width: 100%;
    border-radius: 200px 200px 0 0;
    aspect-ratio: 1 / 1.16;
    object-fit: cover;
}

.values-image-box-2-stone{
    position: relative;
    width: 60%;
    align-content: end;
    z-index: 1;
}

.values-image-stone figure{
    display: block;
    border-radius: 0 0 200px 200px;
    border: 6px solid var(--bg-color);
}

.values-image-stone figure img{
    width: 100%;
    border-radius: 0 0 200px 200px;
    aspect-ratio: 1 / 1.243;
    object-fit: cover;
}

.values-contact-circle-stone{
    position: absolute;
    left: -65px;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 1;
}

.values-contact-circle-stone a{
    display: block;
    border-radius: 50%;
}

.values-contact-circle-stone a img{   
    max-width: 130px;
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    animation: infiniterotate 20s infinite linear;
}

.values-contact-circle-stone a:hover img{
	animation-play-state: paused;
}

.values-item-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.values-item-stone:last-child{
    margin-bottom: 0;
}

.values-item-stone .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.values-item-stone .icon-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
    z-index: -1;
}

.values-item-stone:hover .icon-box::before{
    transform: scale(1);
}

.values-item-stone .icon-box img{
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
}

.values-item-stone:hover .icon-box img{
    filter: brightness(0) invert(1);
}

.values-item-content-stone{
    width: calc(100% - 65px);
}

.values-item-content-stone h3{
    font-size: 20px;
}

.values-item-content-stone p{
    margin: 10px 0 0;
}

.values-content-list-stone{
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
    margin-top: 30px;
}

.values-content-list-stone ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px 30px;
    flex-wrap: wrap;
}

.values-content-list-stone ul li{
    width: calc(50% - 15px);
    position: relative;
    line-height: 1.5em;
    color: var(--primary-color);
    padding: 20px 20px 20px 45px;
    background-color: var(--white-color);
    border-radius: 10px;
    transition: all 0.4s ease-in-out;
}

.values-content-list-stone ul li:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}

.values-content-list-stone ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    top: 20px;
    left: 20px;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.values-btn-stone{
    margin-top: 40px;
}

.our-core-features-stone{
	padding: 120px 0;
}

.core-features-item-stone{
	border-radius: 20px;
	min-height: 450px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
	overflow: hidden;
}

.core-features-item-stone.box-1{
    background-color: var(--accent-color);
}

.core-features-item-stone.box-1 .core-features-item-image-stone,
.core-features-item-stone.box-3 .core-features-item-image-stone{
	max-width: 330px;
	margin: 0 auto;
}

.core-features-item-stone.box-1 .core-features-item-image-stone img,
.core-features-item-stone.box-3 .core-features-item-image-stone img{
	width: 100%;
	border-radius: 20px 20px 0 0;
	margin-bottom: -70px;
}

.core-features-item-stone h3{
	font-size: 20px;
}

.core-features-item-stone p{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	margin: 20px 0 0;
}

.core-features-item-stone.box-1 p{
	color: var(--primary-color);
}

.core-features-item-stone.box-2{
	position: relative;
	justify-content: end;
}

.core-features-item-stone.box-2 .core-features-item-image-stone{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.core-features-item-stone.box-2 .core-features-item-image-stone figure{
	position: relative;
	height: 100%;
	overflow: hidden;
}

.core-features-item-stone.box-2 .core-features-item-image-stone figure::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(24, 24, 24, 0.80) 82.5%);
	height: 100%;
	width: 100%;
}

.core-features-item-stone.box-2 .core-features-item-image-stone img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.core-features-item-stone.box-2 .core-features-item-content-stone{
	position: relative;
	z-index: 1;
}

.core-features-item-stone.box-2 .core-features-item-content-stone h3,
.core-features-item-stone.box-3 .core-features-item-content-stone h3{
	color: var(--white-color);
}

.core-features-item-stone.box-2 .core-features-item-content-stone p{
	color: var(--white-color);
	border: none;
    padding-top: 0;
}

.core-features-item-stone.box-3{
	background-color: var(--primary-color);
}

.core-features-item-stone.box-3 .core-features-item-content-stone p{
	color: var(--white-color);
	border-color: var(--dark-divider-color);
}

.cta-box-stone{
    padding: 120px 0;
}

.cta-image-box-stone{
    display: flex;
    flex-direction: column;
    gap: 30px;
    height: 100%;
    margin-right: 35px;
}

.cta-image-stone{
    height: 100%;
}

.cta-image-stone figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.cta-image-stone figure img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.9;
    object-fit: cover;
    border-radius: 20px;
}

.cta-contact-box-stone{
    background-color: var(--primary-color);
    border-radius: 20px;
    padding: 40px;
}

.cta-contact-item-stone{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
}

.cta-contact-item-stone .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--accent-color);
    overflow: hidden;
}

.cta-contact-item-stone .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.cta-contact-box-stone:hover .icon-box:before{
	transform: scale(1);
}

.cta-contact-item-stone .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.cta-contact-item-content-stone p{
    color: var(--white-color);
    margin-bottom: 5px;
}

.cta-contact-item-content-stone h3{
    font-size: 26px;
    color: var(--white-color);
}

.cta-contact-item-content-stone h3 a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.cta-contact-item-content-stone h3 a:hover{
	color: var(--accent-color);
}

.cta-contact-box-content-stone p{
    color: var(--white-color);
    margin: 0;
}

.cta-content-stone{
    height: 100%;
    align-content: center;
}

.cta-content-stone .contact-form .form-control{
    background: var(--white-color);
    border: none;
    padding: 18px 20px;
    line-height: 1.5em;
}

.intro-video-box-stone{
    position: relative;
}

.intro-video-box-stone .container-fluid{
    padding: 0;
}

.intro-video-image-stone{
    position: relative;
    overflow: hidden;
}

.intro-video-image-stone figure{
    display: block;
}

.intro-video-image-stone figure:before{
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    opacity: 30%;
    z-index: 1;
}

.intro-video-image-stone img{
    width: 100%;
    aspect-ratio: 1 / 0.42;
    object-fit: cover;
    transition: all 1s ease-in-out;
}

.intro-video-stone:hover .intro-video-image-stone img{
	transform: scale(1.03);
}

.intro-video-stone .video-play-button-stone{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.intro-video-stone .video-play-button-stone a{
    display: inline-block;
    border: 1px solid var(--dark-divider-color);
    padding: 10px;
    border-radius: 50%;
}

.intro-video-stone .video-play-button-stone a span{
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--white-color);
    background: var(--divider-color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50%;
    cursor: none;
    transition: all 0.4s ease-in-out;
}

.intro-video-stone .video-play-button-stone a:hover span{
    color: var(--primary-color);
	background-color: var(--accent-color);
}

.our-team-stone{
    padding: 120px 0;
}

.team-item-stone{
	position: relative;
	height: calc(100% - 30px);
	border-radius: 20px;
	margin-bottom: 30px;
	overflow: hidden;
}

.team-item-image-stone a{
	cursor: none;
}

.team-item-image-stone figure{
	position: relative;
	display: block;
}

.team-item-image-stone figure::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	border-radius: 20px;
	background: linear-gradient(180deg, transparent 50%, rgba(24, 24, 24, 0.80) 90%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.team-item-image-stone figure img{
	width: 100%;
	aspect-ratio: 1 / 1.24;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.team-item-stone:hover .team-item-image-stone figure img{
	transform: scale(1.06);
}

.team-item-body-stone{
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 40px;
    text-align: center;
	z-index: 2;
}

.team-item-content-stone h2{
	font-size: 20px;
	color: var(--white-color);
}

.team-item-content-stone h2 a{
	color: inherit;
}

.team-item-content-stone p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.team-social-list-stone{
	opacity: 0;
	visibility: hidden;
	height: 0;
	border-top: 1px solid var(--dark-divider-color);
	transition: all 0.4s ease-in-out;
}

.team-item-stone:hover .team-social-list-stone{
	opacity: 1;
	visibility: visible;
	padding-top: 20px;
	margin-top: 20px;
	height: 60px;
}

.team-social-list-stone ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.team-social-list-stone ul li a{
	width: 40px;
	height: 40px;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
}

.team-social-list-stone ul li a:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.team-social-list-stone ul li a i{
	font-size: 18px;
	color: var(--white-color);
	transition: all 0.4s ease-in-out;
}

.team-social-list-stone ul li a:hover i{
	color: var(--primary-color);
}

.our-pricing-plan-stone{
	padding: 120px 0;
}

.pricing-item-stone{
	background-color: var(--bg-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.pricing-item-header-stone .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 30px;
}

.pricing-item-header-stone .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.pricing-item-stone:hover .pricing-item-header-stone .icon-box::before{
    transform: scale(1);
}

.pricing-item-header-stone .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.pricing-item-stone:hover .pricing-item-header-stone .icon-box img{
    filter: brightness(0) invert(1);
}

.pricing-item-content-stone .pricing-item-title-stone{
    display: block;
    font-size: 20px;
    line-height: 1.2em;
    color: var(--primary-color);
}

.pricing-item-content-stone p{
    margin: 10px 0 0;
}

.pricing-item-price-stone{
    background-color: var(--white-color);
    border-radius: 10px;
    padding: 20px 30px;
    margin: 30px 0;
}

.pricing-item-price-stone h2{
	font-size: 40px;
    line-height: normal;
}

.pricing-item-price-stone h2 sub{
    font-size: 16px;
    bottom: 0;
}

.pricing-item-list-stone h3{
    font-size: 20px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.pricing-item-list-stone ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.pricing-item-list-stone ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

.pricing-item-list-stone ul li:last-child{
	margin-bottom: 0;
}

.pricing-item-list-stone ul li:before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
    top: 0;
    left: 0;
}

.pricing-item-btn-stone{
	margin-top: 30px;
}

.pricing-benefit-list-stone{
	margin-top: 30px;
}

.pricing-benefit-list-stone ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 20px 40px;
}

.pricing-benefit-list-stone ul li{
    display: inline-flex;
    align-items: center;
	color: var(--primary-color);
}

.pricing-benefit-list-stone ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

.our-faqs-stone{
	padding: 120px 0;
}

.faqs-content-stone{
    display: flex;
    flex-direction: column;
    gap: 30px;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 10px;
    height: 100%;
}

.faq-image-stone{
    height: 100%;
}

.faq-image-stone figure{
	display: block;
    height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.faq-image-stone img{
    height: 100%;
	width: 100%;
	aspect-ratio: 1 / 0.437;
	object-fit: cover;
	border-radius: 10px;
}

.faq-body-stone{
	padding: 0 20px 20px;
}

.faq-body-content-stone h3{
	font-size: 24px;
}

.faq-body-content-stone p{
	margin: 20px 0 0;
}

.faq-contact-item-list-stone{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.faq-contact-item-stone{
	position: relative;
	width: calc(50% - 15px);
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.faq-contact-item-stone::before{
	content: '';
	position: absolute;
	top: 0;
	right: -15px;
	height: 100%;
	width: 1px;
	background-color: var(--divider-color);
}

.faq-contact-item-stone:last-child:before{
	display: none;
}

.faq-contact-item-stone .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.faq-contact-item-stone .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.faq-contact-item-stone:hover .icon-box:before{
	transform: scale(1);
}

.faq-contact-item-stone .icon-box img{
	transition: all 0.4s ease-in-out;
}

.faq-contact-item-stone:hover .icon-box img{
    filter: brightness(0) invert(1);
}

.faq-contact-item-content-stone{
    width: calc(100% - 65px);
}

.faq-contact-item-content-stone p{
    line-height: normal;
	margin-bottom: 5px;
}

.faq-contact-item-content-stone h3{
	font-size: 20px;
	font-weight: 400;
}

.faq-contact-item-content-stone h3 a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.faq-contact-item-content-stone h3 a:hover{
	color: var(--accent-color);
}

.faq-accordion-stone .accordion-item{
	background: var(--white-color);
	border-radius: 10px;
	margin-bottom: 30px;
    padding: 0;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.faq-accordion-stone .accordion-item:last-child{
	margin-bottom: 0;
}

.faq-accordion-stone .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 400;
	line-height: 1.333em;
    background-color: var(--white-color);
    color: var(--primary-color);
    padding: 22px 55px 22px 22px;
	transition: all 0.4s ease-in-out;
}

.faq-accordion-stone .accordion-header .accordion-button:not(.collapsed){
	background-color: var(--accent-color);
}

.faq-accordion-stone .accordion-item .accordion-button::after, 
.faq-accordion-stone .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'Font Awesome 7 Free';
    position: absolute;
    right: 22px;
    top: 50%;
    font-size: 24px;
    font-weight: 600;
    transform: translateY(-50%);
    color: var(--accent-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion-stone .accordion-button:not(.collapsed)::after{
    content: '\f068';
	color: var(--primary-color);
}

.faq-accordion-stone .accordion-item .accordion-body{
	background-color: var(--accent-color);
	border-top: 1px solid var(--divider-color);
	padding: 22px;
}

.faq-accordion-stone .accordion-item .accordion-body p{
	color: var(--primary-color);
	margin: 0;
}

.our-faqs-stone .section-footer-text{
	margin-top: 60px;
}

.our-testimonials-stone{
	background-image: url('../images/testimonials-bg-stone.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	padding: 120px 0;
	background-color: var(--bg-color) !important;
}

.testimonial-slider-stone{
	height: 100%;
}

.testimonial-slider-stone .swiper{
	padding-bottom: 60px;
	height: 100%;
}

.testimonial-slider-stone .swiper-wrapper{
	height: 100%;
	cursor: none;
}

.testimonial-slider-stone .swiper-wrapper .swiper-slide .testimonial-item-stone{
	transform: scale(0.95);
	transition: all 0.6s ease-in-out;
}

.testimonial-slider-stone .swiper-wrapper .swiper-slide.swiper-slide-next .testimonial-item-stone{
	transform: scale(1);
}

.testimonial-item-stone{
	position: relative;
	min-height: 455px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--secondary-color) !important;
	border-radius: 20px;
	padding: 40px;
    height: 100%;
	overflow: hidden;
}

.testimonial-item-rating-stone i{
	font-size: 18px;
	color: #EDC701;
}

.testimonial-item-content-stone p{
	font-size: 20px;
	font-weight: 400;
	color: var(--primary-color);
	margin-bottom: 0;
}

.testimonial-item-author-stone{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}

.testimonial-author-image-stone figure{
	display: block;
	border-radius: 50%;
}

.testimonial-author-image-stone figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

.testimonial-author-content-stone{
	width: calc(100% - 65px);
}

.testimonial-author-content-stone h2{
	font-size: 20px;
	font-weight: 400;;
}

.testimonial-author-content-stone p{
	margin: 5px 0 0;
}

.testimonial-slider-stone .testimonial-pagination-stone{
	position: absolute;
	bottom: 0px;
	text-align: center;
}

.testimonial-slider-stone .testimonial-pagination-stone .swiper-pagination-bullet{
	border-radius: 40px;
	height: 10px;
	width: 10px;
	background: var(--divider-color);
	opacity: 1;
	margin: 0 3px;
	transition: all 0.3s ease-in-out;
}

.testimonial-slider-stone .testimonial-pagination-stone .swiper-pagination-bullet-active{
	width: 30px;
	background: rgb(230, 87, 87);
	opacity: 1;
}

.our-testimonials-stone .section-footer-text.section-satisfy-img ul{
    margin: 0;
}

.main-footer-stone{
	padding: 100px 0 0;
}

.footer-header-stone{
	border-bottom: 1px solid var(--dark-divider-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 60px;
	margin-bottom: 60px;
}

.footer-header-stone .section-title{
	max-width: 700px;
	margin-bottom: 0;
}

.footer-newsletter-form-stone{
	width: 100%;
	max-width: 440px;
}

.footer-newsletter-form-stone .form-group{
	display: flex;
	background-color: var(--dark-divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 10px;
	padding: 5px;
}

.footer-newsletter-form-stone .form-group .form-control{
	width: calc(100% - 50px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 15px;
}

.footer-newsletter-form-stone .form-group .form-control::placeholder{
	color: var(--text-color);
}

.footer-newsletter-form-stone .form-group .newsletter-btn{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border: none;
	border-radius: 5px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form-stone .newsletter-btn:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form-stone .newsletter-btn img{
	width: 100%;
	max-width: 24px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-stone .newsletter-btn:hover img{
    transform: rotate(45deg);
}

.about-footer-stone{
	max-width: 300px;
}

.footer-logo-stone img{
	width: 100%;
	max-width: 152px;
}

.about-footer-content-stone{
	margin-top: 20px;
}

.about-footer-content-stone p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-contact-lists-stone{
	border-top: 1px solid var(--dark-divider-color);
    padding-top: 30px;
	margin-top: 30px;
}

.footer-contact-lists-stone ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-contact-lists-stone ul li{
    color: var(--white-color);
	font-size: 20px;
    line-height: normal;
    margin-bottom: 15px;
}

.footer-contact-lists-stone ul li:last-child{
    margin-bottom: 0;
}

.footer-contact-lists-stone ul li a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.footer-contact-lists-stone ul li a:hover{
    color: var(--accent-color);
}

.footer-links-box-stone{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
}

.footer-links-stone{
	max-width: 27%;
}

.footer-links-stone h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 25px;
}

.footer-links-stone ul{
	list-style: disc;
	padding: 0 0 0 20px;
	margin: 0;
}

.footer-links-stone ul li{
	line-height: 1.5em;
	color: var(--white-color);
	margin-bottom: 15px;
}

.footer-links-stone ul li:last-child{
	margin-bottom: 0;
}

.footer-links-stone ul li::marker{
	color: var(--accent-color);
}

.footer-links-stone ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.footer-links-stone ul li a:hover{
	color: var(--accent-color);
}

.footer-working-hours-stone{
	width: 100%;
	max-width: 38%;
}

.footer-working-hours-stone ul{
	list-style: none;
	padding: 0;
}

.footer-working-hours-stone ul li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.footer-social-links-stone{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.footer-social-links-stone ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 0;
}

.footer-social-links-stone ul li{
	margin-bottom: 0;
}

.footer-social-links-stone ul li a{
	width: 40px;
	height: 40px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
    color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.footer-social-links-stone ul li a:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
    color: var(--primary-color);
}

.footer-social-links-stone ul li a i{
	font-size: 18px;
    color: inherit;
}

.footer-copyright-text-stone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--dark-divider-color);
    padding: 30px 0;
    margin: 60px 0 0;
}

.footer-copyright-text-stone p.footer-left-meta {
    color: var(--white-color);
    margin-bottom: 0;
    font-size: 14px;
}

/* Developer Label & Logo Container Alignment */
.footer-right-dev {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.footer-right-dev span {
    display: inline-block;
}

.acculer-logo-link {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.acculer-logo-link:hover {
    transform: translateY(-2px);
}

.acculer-footer-logo {
    height: 40px; /* Increased from 24px to make it noticeably bigger */
    width: auto;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
}

/* Optional: Add a slight brightness or opacity shift on hover if you want to make it interactive */
.acculer-logo-link:hover .acculer-footer-logo {
    filter: brightness(1.2);
}

@media only screen and (max-width: 1024px){

    .hero-img-slider-metal:before{
        background: var(--primary-color);
        opacity: 50%;
    }

    .about-us-image-box-stone{
        max-width: 650px;
        margin: 0 auto 30px;
    }

    .about-us-btn-stone{
        margin-top: 30px;
    }

    .about-us-body-image-stone figure img{
        aspect-ratio: 1 / 0.55;
    }

    .servce-item-image-box-stone figure img{
        aspect-ratio: 1 / 1;
    }

    .values-image-box-stone{
        max-width: 635px;
        margin: 0 auto 30px;
    }

    .cta-image-box-stone{
        height: auto;
        margin: 0 0 30px;
    }

    .cta-image-stone,
    .cta-image-stone figure,
    .cta-image-stone img{
        height: auto;
    }

    .cta-image-stone figure img{
        aspect-ratio: 1 / 0.7;
    }

    .cta-contact-box-stone{
        padding: 30px;
    }

    .intro-video-image-stone img{
        aspect-ratio: 1 / 0.6;
    }

    .team-item-image-stone figure img{
        aspect-ratio: 1 / 1.1;
    }

    .faqs-content-stone{
        height: auto;
    	margin-bottom: 30px;
	}

    .faq-image-stone,
    .faq-image-stone figure,
    .faq-image-stone img{
        height: auto;
    }

    .testimonial-slider-stone .swiper-wrapper .swiper-slide .testimonial-item-stone{
		transform: scale(1);
	}

    .testimonial-item-stone{
        padding: 30px;
        min-height: 380px;
    }

    .testimonial-item-author-stone{
        margin-top: 30px;
        padding-top: 30px;
    }
    
    .footer-header-stone{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .footer-newsletter-form-stone,
    .footer-header-stone .section-title{
        max-width: 100%;
    }

    .about-footer-content-stone{
        margin-top: 15px;
    }

    .about-footer-stone{
		max-width: 100%;
		margin-bottom: 30px;
	}

    .footer-contact-lists-stone ul li{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .footer-links-stone h2{
        margin-bottom: 20px;
    }

    .footer-links-stone ul li{
        margin-bottom: 10px;
    }

	@media (max-width: 991px) {
    .footer-copyright-text-stone {
        margin-top: 30px;
        padding: 25px 0;
    }
}
}

@media only screen and (max-width: 991px){

    .hero-stone{
        padding: 150px 0 60px;
    }

    .contact-us-circle-stone{
        display: none;
    }

    .video-play-button-stone a span{
        width: 46px;
        height: 46px;
    }

    .hero-info-list-stone{
        margin-top: 30px;
        padding-top: 30px;
    }

    .hero-info-item-stone{
        width: calc(50% - 15px);
    }

    .about-us-stone{
        padding: 60px 0;
    }

    .about-us-image-box-1-stone .about-us-image-stone figure img{
        aspect-ratio: 1 / 1.2;
    }

    .about-us-image-box-2-stone .about-us-image-stone figure img{
        aspect-ratio: 1 / 1.05;
    }

    .about-experience-box-content-stone h2{
        font-size: 34px;
    }

    .about-us-item-box-stone{
        margin-bottom: 30px;
    }

    .about-us-list-stone ul li{
        margin-bottom: 10px;
    }

    .about-us-list-stone ul li::before{
        font-size: 16px;
    }

    .our-service-stone{
        background-position: bottom -30px center;
        background-size: 100% auto;
        padding: 60px 0;
    }

    .service-item-content-stone{
        padding: 10px;
    }

    .our-values-stone{
        padding: 60px 0;
    }

    .values-contact-circle-stone a img{
        max-width: 110px;
    }

    .values-content-list-stone ul li{
        padding: 15px 15px 15px 40px;
    }

    .values-content-list-stone ul li::before{
        top: 15px;
        left: 15px;
        font-size: 16px;
    }

    .values-btn-stone{
        margin-top: 30px;
    }

    .our-core-features-stone{
		padding: 60px 0;
	}

	.core-features-item-stone{
		min-height: auto;
		padding: 30px;
	}

	.core-features-item-stone p{
		padding-top: 15px;
		margin: 15px 0 0;
	}

    .cta-box-stone{
        padding: 60px 0;
    }

    .cta-contact-item-content-stone h3{
        font-size: 22px;
    }

    .cta-content-stone .contact-form .form-control{
        padding: 13px 15px;
    }

    .our-team-stone{
        padding: 60px 0;
    }

	.team-item-body-stone{
		left: 30px;
		right: 30px;
		bottom: 30px;
	}

    .our-pricing-plan-stone{
        padding: 60px 0;
    }

    .pricing-item-stone{
        padding: 30px;
    }

    .pricing-item-header-stone .icon-box{
        margin-bottom: 20px;
    }

    .pricing-item-price-stone{
        padding: 15px 20px;
        margin: 20px 0;
    }

	.pricing-item-price-stone h2{
		font-size: 34px;
	}

    .pricing-item-list-stone h3{
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.pricing-item-list-stone ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list-stone ul li::before{
   		font-size: 16px;
	}

	.pricing-benefit-list-stone{
        margin-top: 10px;
    }

    .pricing-benefit-list-stone ul{
        gap: 20px 30px;
    }

    .pricing-benefit-list-stone ul li img{
        max-width: 18px;
    }

    .our-faqs-stone{
    	padding: 60px 0;
	}

	.faq-body-content-stone h3{
    	font-size: 22px;
	}

    .faq-body-content-stone p{
    	margin: 10px 0 0;
	}

	.faq-contact-item-list-stone{
    	padding-top: 20px;
    	margin-top: 20px;
	}

    .faq-accordion-stone .accordion-item{
        margin-bottom: 20px;
    }

	.faq-accordion-stone .accordion-header .accordion-button{
		padding: 15px 45px 15px 20px;
	}

	.faq-accordion-stone .accordion-item .accordion-button::after,
	.faq-accordion-stone .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
		right: 20px;
	}

	.faq-accordion-stone .accordion-item .accordion-body{
		padding: 15px 20px;
	}

	.our-faqs-stone .section-footer-text{
    	margin-top: 40px;
	}

    .our-testimonials-stone{
		padding: 60px 0;
	}

    .testimonial-slider-stone .swiper{
        padding-bottom: 50px;
    }

	.testimonial-item-content-stone p{
		font-size: 18px;
	}    

	.our-testimonials-stone .section-footer-text{
		margin-top: 20px;
	}

    .main-footer-stone{
        padding: 60px 0 0;
        margin-bottom: 0;
    }

	.footer-links-stone h2{
        margin-bottom: 20px;
    }

    .footer-links-stone{
        max-width: 32%;
    }

    .footer-working-hours-stone{
        max-width: 40%;
    }

	.footer-social-links-stone{
    	padding-top: 20px;
    	margin-top: 20px;
	}

    .footer-social-links-stone ul li{
        margin: 0;
    }
}

@media only screen and (max-width: 767px){
    
    .hero-content-body-stone{
        gap: 20px;
    }

    .video-play-button-stone p{
        font-size: 14px;
    }

    .hero-info-list-stone{
        gap: 20px;
        margin-top: 30px;
        padding-top: 30px;
    }

    .hero-info-item-stone{
        width: 100%;
    }

    .hero-info-item-content-stone h2{
        font-size: 18px;
    }

    .hero-info-item-content-stone p{
        margin: 5px 0 0;
    }

    .about-us-image-box-1-stone{
        padding-bottom: 70px;
    }

    .about-us-image-box-1-stone .about-us-image-stone figure{
        margin-right: -140px;
    }

    .about-experience-box-stone{
        gap: 10px;
        padding: 10px;
        margin: 40px 0px 0 auto;
    }

    .about-experience-box-stone .icon-box{
        height: 40px;
        width: 40px;
    }

    .about-experience-box-stone .icon-box img{
        max-width: 20px;
    }

    .about-experience-box-content-stone{
        width: calc(100% - 50px);
    }

    .about-experience-box-content-stone h2{
        font-size: 28px;
    }

    .about-experience-box-content-stone p{
        font-size: 14px;
    }

    .about-us-item-box-stone{
        padding: 20px;
    }

    .about-us-item-content-stone h3{
        font-size: 18px;
    }

    .about-us-item-content-stone{
        width: 100%;
    }

    .about-us-body-content-stone,
    .about-us-body-image-stone{
        width: 100%;
    }

    .about-us-btn-stone{
        margin-top: 30px;
    }
    
    .about-us-body-image-stone figure,
    .about-us-body-image-stone figure img{
        height: auto;
    }

    .service-item-content-stone h2{
        font-size: 18px;
    }

    .values-image-box-stone::before{
        top: 30px;
        right: 25px;
        width: 95px;
        height: 155px;
    }

    .values-image-box-1-stone{
        padding-bottom: 120px;
    }

    .values-image-box-1-stone figure{
        margin-right: -80px;
    }
    
    .values-contact-circle-stone{
        left: -45px;
    }

    .values-contact-circle-stone a img{
        max-width: 90px;
    }

    .values-item-stone{
        width: 100%;
    }

    .values-item-content-stone h3{
        font-size: 18px;
    }

    .values-content-list-stone ul{
        gap: 15px;
    }

    .values-content-list-stone ul li{
        width: 100%;
        padding: 10px 10px 10px 35px;
    }

    .values-content-list-stone ul li::before{
        top: 10px;
        left: 10px;
    }

    .core-features-item-stone{
		gap: 20px;
		padding: 20px;
	}

	.core-features-item-stone h3{
		font-size: 18px;
	}

	.core-features-item-stone.box-2{
		min-height: 380px;
	}

    .cta-image-stone figure img{
        aspect-ratio: 1 / 0.9;
    }

    .cta-contact-box-stone{
        padding: 20px;
    }

    .cta-contact-item-stone{
        margin-bottom: 20px;
    }

    .cta-contact-item-content-stone h3{
        font-size: 18px;
    }

    .intro-video-image-stone img{
        aspect-ratio: 1 / 0.8;
    }

    .intro-video-stone .video-play-button-stone a{
        padding: 5px;
    }
	
	.intro-video-stone .video-play-button-stone a span{
        font-size: 18px;
        width: 80px;
        height: 80px;
    }

    .team-item-body-stone{
		left: 20px;
		right: 20px;
		bottom: 20px;
	}

	.team-item-content-stone h2{
		font-size: 18px;
	}
	
	.team-item-stone:hover .team-social-list-stone{
		padding-top: 15px;
		margin-top: 15px;
		height: 55px;
	}

    .team-social-list-stone ul{
        gap: 10px;
    }

    .pricing-item-stone{
		padding: 20px;
	}

	.pricing-item-content-stone .pricing-item-title-stone{
		font-size: 18px;
	}

	.pricing-item-price-stone h2{
		font-size: 28px;
	}

    .pricing-item-price-stone h2 sub{
        font-size: 14px;
    }

    .pricing-benefit-list-stone{
        margin-top: 5px;
    }

	.pricing-benefit-list-stone ul{
        gap: 10px 20px;
    }

    .pricing-benefit-list-stone ul li{
        font-size: 14px;
    }

    .pricing-benefit-list-stone ul li img{
        max-width: 16px;
        margin-right: 5px;
    }

    .faq-image-stone img{
		aspect-ratio: 1 / 0.65;
	}

	.faq-body-stone{
		padding: 0px 10px 10px;
	}

	.faq-body-content-stone h3{
        font-size: 20px;
    }

	.faq-contact-item-list-stone{
		gap: 40px;
	}

	.faq-contact-item-stone{
		width: 100%;
	}

    .faq-contact-item-stone::before{
        top: auto;
        right: 0;
        bottom: -20px;
        left: 0;
        height: 1px;
        width: 100%;
	}

	.faq-contact-item-content-stone h3{
    	font-size: 18px;
	}

    .faq-accordion-stone .accordion-header .accordion-button{
        padding: 12px 40px 12px 15px;
        font-size: 16px;
    }

    .faq-accordion-stone .accordion-item .accordion-button::after,
    .faq-accordion-stone .accordion-item .accordion-button.collapsed::after{
        right: 15px;
    }

    .faq-accordion-stone .accordion-item .accordion-body{
        padding: 12px 15px;
    }

    .testimonial-item-stone{
		min-height: 300px;
		padding: 20px;
        gap: 20px;
	}

	.testimonial-item-content-stone p{
        font-size: 16px;
    }

	.testimonial-item-author-stone{
		padding-top: 20px;
		margin-top: 20px;
	}

	.testimonial-author-content-stone h2{
		font-size: 18px;
	}

    .footer-header-stone{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .footer-newsletter-form-stone .form-group .form-control{
        width: calc(100% - 40px);
    }

    .footer-newsletter-form-stone .form-group .newsletter-btn{
        height: 40px;
        width: 40px;
    }

    .footer-newsletter-form-stone .newsletter-btn img{
        max-width: 20px;
    }

    .footer-contact-lists-stone{
        margin-top: 20px;
        padding-top: 20px;
    }

	.footer-contact-lists-stone ul li{
        font-size: 16px;
        margin-bottom: 10px;
    }

	.footer-links-stone{
        max-width: 100%;
    }

	.footer-links-stone h2{
		font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-social-links-stone ul{
        justify-content: center;
    }

	@media (max-width: 767px) {
    .footer-copyright-text-stone {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        margin-top: 20px;
        padding: 20px 0;
    }
    
    .footer-right-dev {
        flex-direction: column;
        gap: 8px;
    }
}
}


/*************************************************************************/
/*********************** Shrinath Expertise Slider ************************************/
/*********************** Shrinath Expertise Slider ************************************/
.srinath-exp-partnership-section {
  padding: 80px 20px;
  text-align: center;
  background-color: #ffffff;
  overflow: hidden;
}

/* Scoped and configured for word-by-word fade & lift animation */
h2.srinath-exp-section-title {
  font-size: 42px!important; 
  font-weight: 800!important;
  line-height: 1.2;     
  letter-spacing: -1px; 
  color: #000000;
  margin-bottom: 60px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px; /* Spaces out the animated words cleanly */
}

/* Individual word base styling before scroll trigger */
h2.srinath-exp-section-title .srinath-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Trigger state when visible on scroll */
h2.srinath-exp-section-title.srinath-visible .srinath-word {
  opacity: 1;
  transform: translateY(0);
}

/* Creates the slow-mo sequential staging delay for each word */
h2.srinath-exp-section-title.srinath-visible .srinath-word:nth-child(1) { transition-delay: 0.1s; }
h2.srinath-exp-section-title.srinath-visible .srinath-word:nth-child(2) { transition-delay: 0.25s; }
h2.srinath-exp-section-title.srinath-visible .srinath-word:nth-child(3) { transition-delay: 0.4s; }
h2.srinath-exp-section-title.srinath-visible .srinath-word:nth-child(4) { transition-delay: 0.55s; }
h2.srinath-exp-section-title.srinath-visible .srinath-word:nth-child(5) { transition-delay: 0.7s; }

/* Line break helper wrapper */
.srinath-break {
  width: 100%;
  height: 0;
}

/* Slider Container Framework */
.srinath-exp-logo-slider {
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: 30px; /* Space between the two scrolling rows */
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.srinath-exp-logo-slider.srinath-row-secondary {
  margin-bottom: 0; /* Clear bottom margin on the final row */
}

/* The structural moving track base */
.srinath-exp-logo-track {
  display: flex;
  align-items: center;
  gap: 80px; /* Refined spacing for balanced density layout */
  width: max-content;
}

/* Direct Motion Controls for Horizontal Alignment Planes */
.srinath-track-left {
  animation: srinathMarqueeLeft 45s linear infinite;
}

.srinath-track-right {
  animation: srinathMarqueeRight 45s linear infinite;
}

/* PERFORMANCE & DESIGN FIX: Configured for precise 148x100 branding specs */
.srinath-exp-logo-track img {
  width: 148px;
  height: 100px; /* Updated height parameter to meet your 148x100 requirement */
  object-fit: contain; /* Keeps logos visually natural without layout stretching distortions */
  transition: transform 0.3s ease;
}

/* Subtle upscale hover interactive layout */
.srinath-exp-logo-track img:hover {
  transform: scale(1.05);
}

/* DIRECTION ONE: Continuous Left-ward Scrolling Cycle */
@keyframes srinathMarqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* DIRECTION TWO: Continuous Right-ward Scrolling Cycle */
@keyframes srinathMarqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
  h2.srinath-exp-section-title {
    font-size: 32px!important;
  }
  .srinath-exp-logo-track {
    gap: 45px; /* Tighter gaps on smaller devices */
  }
  .srinath-exp-logo-track img {
    width: 110px;
    height: 74px; /* Proportionally scales your 148x100 images down on small viewports */
  }
}

.switch-box {
  display:none!important;
}

@media (max-width: 991px) {
    .header-top-area { display: none; }
    .header-contact-area { display: none; }
}

.buy-now-btn {
  display: none;
}

@media only screen and (max-width: 767px) {
    .mean-container .mean-bar {
        background-color: #183883!important;
    }
}

@media (min-width: 1200px) {
    h2.srinath-exp-section-title {
        font-size: 42px!important;
        font-weight: 600!important;
    }
}

/*********************** Shrinath Stacked Product Cards product section ************************************/
.srinath-stack-section {
  background-color: #ffffff;
  padding: 100px 0;
  position: relative;
}

.srinath-stack-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Area Styles */
.srinath-stack-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
  gap: 40px;
}

.srinath-stack-title-wrap {
  flex: 1;
}

.srinath-stack-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(230, 87, 87);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.srinath-stack-subtitle::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: rgb(230, 87, 87);
  border-radius: 50%;
}

.srinath-stack-main-title {
  font-size: 46px!important;
  font-weight: 600!important;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: #0d0d0d;
  margin: 0;
}

.srinath-stack-header-desc {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  margin-top: 35px;
  max-width: 500px;
}

/* Cards Wrapper and Sticky Setup */
.srinath-stack-cards-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

.srinath-stack-card {
  position: sticky;
  top: 80px; 
  width: 100%;
  min-height: 480px;
  border-radius: 32px;
  margin-bottom: 80px; 
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.03), 0 30px 60px rgba(0, 0, 0, 0.08);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 0.1s linear, opacity 0.1s linear;
}

/* Gradients for each product card */
.srinath-stack-card:nth-child(1) { background: linear-gradient(135deg, #e8eaf6 0%, #b2ebf2 100%); }
.srinath-stack-card:nth-child(2) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); }
.srinath-stack-card:nth-child(3) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); }
.srinath-stack-card:nth-child(4) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); }
.srinath-stack-card:nth-child(5) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); }
.srinath-stack-card:nth-child(6) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); }
.srinath-stack-card:nth-child(7) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); }
.srinath-stack-card:nth-child(8) { background: linear-gradient(135deg, #e8eaf6 0%, #b2dfdb 100%); } 

/* Card Inner Layout */
.srinath-stack-card-inner {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 50px;
  gap: 40px;
}

.srinath-stack-card-info {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Animated Card Icon Design Container */
.srinath-stack-card-icon {
  font-size: 28px;
  color: rgb(230, 87, 87);
  margin-bottom: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(24, 56, 131, 0.08);
}

.srinath-stack-card-icon i {
  display: inline-block;
  animation: srinathIconPulse 3.5s ease-in-out infinite;
}

@keyframes srinathIconPulse {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.12) rotate(8deg); color: rgb(230, 87, 87); }
  100% { transform: scale(1) rotate(0deg); }
}

.srinath-stack-card-info h3 {
  font-size: 32px!important;
  font-weight: 600!important;
  color: #0d0d0d;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.srinath-stack-card-info p {
  font-size: 15px;
  line-height: 1.6;
  color: #444444;
  margin-bottom: 25px;
}

/* NEW UNIQUE ANIMATED "KNOW MORE" BUTTON STYLE */
.srinath-stack-card-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background-color: transparent;
  color: rgb(230, 87, 87)!important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgb(230, 87, 87);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-bottom: 25px;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s;
}

/* Liquid fluid slide background effect on hover */
.srinath-stack-card-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #183883;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.srinath-stack-card-btn i {
  font-size: 12px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Button Hover State */
.srinath-stack-card-btn:hover {
  color: #ffffff!important;
  border-color: #183883;
}

.srinath-stack-card-btn:hover::before {
  transform: scaleX(1);
}

.srinath-stack-card-btn:hover i {
  transform: translateX(4px);
}

/* SEO Metadata List within Card */
.srinath-stack-seo-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srinath-stack-seo-meta li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.srinath-stack-seo-meta li i {
  color: rgb(230, 87, 87);
  width: 16px;
  text-align: center;
}

/* Card Visual/Image Container */
.srinath-stack-card-visual {
  flex: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.srinath-stack-image-box {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.srinath-stack-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.srinath-stack-card:hover .srinath-stack-image-box img {
  transform: scale(1.04);
}

/* Footer Section Button Elements */
.srinath-stack-footer {
  text-align: center;
  margin-top: 40px;
}

.srinath-stack-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: rgb(230, 87, 87);
  color: #ffffff!important;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
}

.srinath-stack-btn:hover {
  background-color: #11275c;
  transform: translateY(-2px);
}

/* ==========================================================================
   PRODUCTION RESPONSIVE OVERSIGHT PATCH (Add to bottom of CSS file)
   ========================================================================== */

/* 1. Ultrawide Monitors & 4K Workstation Safeguards (1400px and up) */
@media (min-width: 1400px) {
  .srinath-stack-container {
    max-width: 1300px; /* Gently expands content frame utility bounds */
  }
  .srinath-stack-card-inner {
    padding: 60px; /* Relaxes whitespace frames inside luxury cards */
    gap: 60px;
  }
}

/* 2. Compact Laptop & Standard Workspace Display Tuning (992px to 1200px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .srinath-stack-main-title {
    font-size: 40px !important;
  }
  .srinath-stack-card {
    min-height: 440px; /* Slightly compresses base heights to maintain structural integrity */
  }
  .srinath-stack-card-inner {
    padding: 40px;
    gap: 30px;
  }
  .srinath-stack-image-box {
    height: 300px; /* Scales down image frame height proportionally */
  }
}

/* 3. Landscape Tablets & Medium Sized Devices (768px to 991px) */
@media (max-width: 991px) {
  .srinath-stack-section {
    padding: 80px 0; /* Drops outer section padding frames */
  }
  .srinath-stack-header-row {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 45px;
  }
  .srinath-stack-header-desc {
    margin-top: 0;
    max-width: 100%;
  }
  .srinath-stack-card {
    position: sticky;
    top: 90px; /* Clear space allocation for standard tablet navigation bars */
    min-height: auto; /* Dissolves strict vertical limits to allow natural data growth */
    margin-bottom: 40px; /* Tighter margins to ensure text reads beautifully */
  }
  .srinath-stack-card-inner {
    flex-direction: column !important; /* Forces layout to stack cleanly in vertical alignment */
    padding: 35px;
    gap: 25px;
  }
  .srinath-stack-card-info,
  .srinath-stack-card-visual {
    flex: none;
    width: 100%;
  }
  .srinath-stack-card-info h3 {
    font-size: 26px !important;
  }
  .srinath-stack-image-box {
    height: 280px;
  }
}

/* 4. Portrait Smartphones & Phablets (Max-width: 767px) */
@media (max-width: 767px) {
  .srinath-stack-section {
    padding: 60px 0;
  }
  .srinath-stack-main-title {
    font-size: 30px !important;
    letter-spacing: -1px;
  }
  .srinath-stack-header-desc {
    font-size: 15px;
  }
  .srinath-stack-card {
    top: 70px; /* Balanced mobile viewport alignment offset */
    border-radius: 24px; /* Tighter card border styling arrays */
    margin-bottom: 30px;
  }
  .srinath-stack-card-inner {
    padding: 28px 20px;
    gap: 20px;
  }
  .srinath-stack-card-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
    margin-bottom: 15px;
    border-radius: 12px;
  }
  .srinath-stack-card-info h3 {
    font-size: 22px !important;
    margin-bottom: 12px;
  }
  .srinath-stack-card-info p {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .srinath-stack-card-btn {
    width: 100%; /* Expands tap field boundaries globally across mobile displays */
    justify-content: center;
    padding: 12px 20px;
    margin-bottom: 20px;
  }
  .srinath-stack-image-box {
    height: 200px; /* Tighter aspect frame for mobile screen spaces */
    border-radius: 14px;
  }
  .srinath-stack-seo-meta li {
    font-size: 13px;
    gap: 10px;
  }
}

/* 5. Micro Screen Engines & Compact Foldables (Below 360px) */
@media (max-width: 359px) {
  .srinath-stack-main-title {
    font-size: 26px !important;
  }
  .srinath-stack-card-inner {
    padding: 20px 15px;
  }
  .srinath-stack-card-info h3 {
    font-size: 19px !important;
  }
  .srinath-stack-image-box {
    height: 170px;
  }
}

/*********************** Shrinath Cinematic Full-Width 3D Ribbon ************************************/
.srinath-cine-ribbon-section {
  width: 100%;
  padding: 0px 0;
  background-color: #ffffff; 
  overflow: hidden;
}

/* Full-width container breakout override */
.srinath-cine-ribbon-container {
  width: 100%;
  max-width: 100%!important;
  padding: 0;
}

/* Full Bleed Cinematic Ribbon Module */
.srinath-cine-ribbon-box {
  background-color: #000000; /* Rich Absolute Pitch Black #000000*/
  width: 100%;
  padding: 45px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Hyper-Attraction Ambient Corner Glows */
.srinath-cine-ribbon-box::before {
  content: '';
  position: absolute;
  top: -50%; left: -10%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(230, 87, 87, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.srinath-cine-ribbon-box::after {
  content: '';
  position: absolute;
  bottom: -50%; right: -10%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(24, 56, 131, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Left Panel Content Matrix */
.srinath-cine-ribbon-content {
  flex: 1;
  max-width: 45%;
  z-index: 2;
}

.srinath-cine-ribbon-title {
  font-size: 28px!important;
  font-weight: 700!important;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 10px 0;
  letter-spacing: -0.5px;
}

.srinath-cine-ribbon-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Center Panel: ADVANCED 3D KINETIC GRAPHIC STAGE */
.srinath-cine-ribbon-graphic-zone {
  flex: 0 0 300px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin: 0 40px;
  /* Deep perspective environment for realistic 3D pop */
  perspective: 400px;
}

.srinath-cine-vector-canvas {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateX(16deg) rotateY(-12deg);
}

/* Theme Variant Classes */
.srinath-cine-vector-accent { fill: rgb(230, 87, 87); }
.srinath-cine-vector-light { fill: rgba(255, 255, 255, 0.08); }
.srinath-cine-vector-line { stroke: rgba(255, 255, 255, 0.15); stroke-width: 2; stroke-dasharray: 6 6; }

/* DEEP SPATIAL MACHINERY ANIMATION LOOPS */
.srinath-cine-3d-node-left {
  transform-origin: 50px 60px;
  animation: srinathCineSpatialLeft 10s linear infinite;
}

.srinath-cine-3d-node-right {
  transform-origin: 250px 60px;
  animation: srinathCineSpatialRight 8s linear infinite;
}

.srinath-cine-anim-dash {
  animation: srinathCineDashMove 15s linear infinite;
}

/* Layered depth shadow mechanics */
.srinath-cine-3d-shadow {
  transform-origin: center;
  animation: srinathCineShadowPulse 2.5s ease-in-out infinite alternate;
}

@keyframes srinathCineSpatialLeft {
  0% { transform: rotateY(0deg) rotateX(15deg) translateZ(10px); }
  50% { transform: rotateY(180deg) rotateX(-15deg) translateZ(25px); }
  100% { transform: rotateY(360deg) rotateX(15deg) translateZ(10px); }
}

@keyframes srinathCineSpatialRight {
  0% { transform: rotateX(-10deg) rotateY(360deg) rotateZ(0deg); }
  100% { transform: rotateX(-10deg) rotateY(0deg) rotateZ(-360deg); }
}

@keyframes srinathCineDashMove {
  100% { stroke-dashoffset: -120px; }
}

@keyframes srinathCineShadowPulse {
  0% { opacity: 0.15; transform: scale(0.88) translateY(5px); }
  100% { opacity: 0.4; transform: scale(1.05) translateY(5px); }
}

/* Right Panel Unique Button Setup */
.srinath-cine-ribbon-action {
  z-index: 2;
}

/* LIQUID MAGNETIC CUSTOM INDUSTRIAL BUTTON */
.srinath-cine-ribbon-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 38px;
  background-color: transparent;
  color: #ffffff!important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: border-color 0.4s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Liquid Color Explosion Core */
.srinath-cine-ribbon-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgb(230, 87, 87) 0%, #b83737 100%);
  border-radius: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Clean, Floating Arrow Container transparent*/
.srinath-cine-btn-icon-box {
  width: 26px;
  height: 26px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.srinath-cine-btn-icon-box i {
  font-size: 11px;
  color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interactive Hover Mechanics */
.srinath-cine-ribbon-btn:hover {
  border-color: rgb(230, 87, 87);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(230, 87, 87, 0.35);
}

.srinath-cine-ribbon-btn:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
}

.srinath-cine-ribbon-btn:hover .srinath-cine-btn-icon-box {
  background-color: #ffffff;
}

.srinath-cine-ribbon-btn:hover .srinath-cine-btn-icon-box i {
  color: rgb(230, 87, 87);
  transform: translateX(2px) rotate(-45deg);
}

/* ==========================================================================
   PRODUCTION RESPONSIVE OVERSIGHT PATCH (Add to bottom of CSS file)
   ========================================================================== */

/* 1. Ultrawide & 4K Monitor Structural Alignment Constraints (1400px and up) */
@media (min-width: 1400px) {
  .srinath-cine-ribbon-box {
    padding: 50px 120px; /* Expands horizontal layout depth safely */
    justify-content: center; /* Keeps components tight and centered on massive widths */
    gap: 8%; /* Creates fluid structural spacing between the 3 elements */
  }
}

/* 2. Standard Laptop & Workspace Display Tuning (992px to 1200px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .srinath-cine-ribbon-title {
    font-size: 25px !important; /* Slightly reduces font size to protect the structure */
  }
  .srinath-cine-ribbon-content {
    max-width: 40%; /* Adjusts text area width to account for the graphic zone width */
  }
  .srinath-cine-ribbon-graphic-zone {
    margin: 0 20px; /* Reduces inner margins to prevent content crowding */
  }
}

/* 3. Landscape Tablets & Squeezed Screens (768px to 991px) */
@media (max-width: 991px) {
  .srinath-cine-ribbon-box {
    flex-direction: column;
    text-align: center;
    padding: 60px 40px;
    gap: 30px;
  }
  
  .srinath-cine-ribbon-content {
    max-width: 80%; /* Centers content neatly on tablets */
    margin: 0 auto;
  }
  
  .srinath-cine-ribbon-title {
    font-size: 28px !important;
  }
}

/* 4. Portrait Smartphones & Phablet Engine Adjustments (Max-width: 767px) */
@media (max-width: 767px) {
  .srinath-cine-ribbon-box {
    padding: 50px 24px;
    gap: 25px;
  }
  
  .srinath-cine-ribbon-content {
    max-width: 100%;
  }
  
  .srinath-cine-ribbon-title {
    font-size: 23px !important; /* Keeps headers clean and legible on phones */
    line-height: 1.4;
  }
  
  .srinath-cine-ribbon-desc {
    font-size: 13.5px;
    padding: 0 10px; /* Introduces a touch of edge padding for cleaner text blocking */
  }
  
  .srinath-cine-ribbon-graphic-zone {
    flex: 0 0 260px; /* Scales back the graphic zone framework width to fit mobile screens */
    height: 100px;
    margin: 10px 0;
  }
  
  .srinath-cine-ribbon-btn {
    padding: 16px 32px; /* Scales down button dimensions slightly for mobile fingers */
    font-size: 14px;
    width: 100%; /* Makes button fluid-width inside mobile viewports */
    justify-content: center;
  }
}

/* 5. Micro-Screen Devices & Mini Foldables (Below 360px - e.g., Fold outer screens) */
@media (max-width: 359px) {
  .srinath-cine-ribbon-box {
    padding: 40px 16px;
  }
  
  .srinath-cine-ribbon-title {
    font-size: 20px !important;
  }
  
  .srinath-cine-ribbon-graphic-zone {
    display: none; /* Hides complex 3D graphic layers on tiny screens to avoid breaking layout flow */
  }
}

/*********************** Srinath Asymmetrical Showcase Layout why choose us ************************************/
.srinath-wcu-section {
  padding: 130px 0;
  background-color: #ffffff; /* Premium Absolute White Canvas */
  overflow: hidden;
  perspective: 1600px;
}

.srinath-wcu-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Stack Component */
.srinath-wcu-header-zone {
  margin-bottom: 70px;
  max-width: 750px;
}

.srinath-wcu-section-title {
  font-size: 46px!important;
  font-weight: 600!important;
  line-height: 1.2;
  color: #0b111e;
  margin-bottom: 18px;
  letter-spacing: -1.5px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.srinath-wcu-section-title span {
  color: rgb(230, 87, 87);
}

.srinath-wcu-section-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: #606877;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  will-change: opacity, transform;
}

/* Master 3-Column Split Framework Layout */
.srinath-wcu-split-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 35px;
  align-items: center;
}

/* Column Base Groups */
.srinath-wcu-side-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Interactive Card System Blueprint */
.srinath-wcu-card {
  background: #fbfbfa; 
  border: 1px solid #eae9e4;
  border-radius: 24px;
  padding: 40px 35px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, box-shadow;
}

/* Balance sizing for the single item right card */
.srinath-wcu-tall-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Content Placement Positioning Layers */
.srinath-wcu-card-content {
  position: relative;
  z-index: 3;
  transform: translateZ(30px);
}

/* Spotlight Track Mesh */
.srinath-wcu-spotlight {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(500px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(230, 87, 87, 0.04), transparent 50%);
  z-index: 1;
  pointer-events: none;
}

/* Vector Branding Frames */
.srinath-wcu-icon-frame {
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
}

.srinath-wcu-icon-frame svg {
  width: 100%; height: 100%; object-fit: contain;
}

.srinath-wcu-card-title {
  font-size: 22px!important;
  font-weight: 700!important;
  color: #0b111e;
  margin: 0 0 12px 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.srinath-wcu-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #606877;
  margin: 0 0 20px 0;
}

/* Spec Checkpoint Metrics */
.srinath-wcu-specs-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.srinath-wcu-specs-item {
  font-size: 13.5px; font-weight: 600; color: #3a414e;
  display: flex; align-items: center; gap: 10px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.srinath-wcu-specs-item::before {
  content: '✦'; color: rgba(11, 17, 30, 0.2); font-size: 9px;
  transition: color 0.4s ease, transform 0.4s ease;
}

/* Abstract Mechanical Blueprint Pseudo Elements */
.srinath-wcu-card::after {
  content: ''; position: absolute; bottom: -30px; right: -30px;
  width: 160px; height: 160px; z-index: 2;
  opacity: 0.12; pointer-events: none;
  transform: translateZ(10px) scale(0.9);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  background-repeat: no-repeat; background-size: contain;
}

.srinath-wcu-card[data-bg-type="circle"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Ccircle cx='50' cy='50' r='40' stroke='rgb(230, 87, 87)' stroke-width='1.5' stroke-dasharray='4 4'/%3E%3C/svg%3E");
}
.srinath-wcu-card[data-bg-type="rect"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Crect x='15' y='15' width='70' height='70' stroke='%230b111e' stroke-width='1.2' stroke-dasharray='5 4'/%3E%3C/svg%3E");
}
.srinath-wcu-card[data-bg-type="triangle"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 15 L85 75 H15 Z' stroke='rgb(230, 87, 87)' stroke-width='1.5' stroke-dasharray='4 4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   CENTER CORES: SHIELD SHOWCASE HARDWARE LAYERS
   ========================================================================== */
.srinath-wcu-center-showcase {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.srinath-wcu-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.srinath-wcu-showcase-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(11, 17, 30, 0.08));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animated Subtle Industrial Geometric Compass Overlay Loop */
.srinath-wcu-tech-ring {
  position: absolute;
  width: 380px; height: 380px;
  border: 1px dashed rgba(230, 87, 87, 0.15);
  border-radius: 50%;
  z-index: 1;
  animation: srinathRotationLoop 35s linear infinite;
  pointer-events: none;
}

.srinath-wcu-tech-ring::before {
  content: ''; position: absolute; top: -5px; left: 50%;
  width: 10px; height: 10px; background: rgb(230, 87, 87);
  border-radius: 50%;
}

@keyframes srinathRotationLoop {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   LATERAL SCROLL REVEAL WING INITIAL INITIALIZATIONS
   ========================================================================== */
.srinath-wcu-left-wing .srinath-wcu-card {
  opacity: 0; transform: translateX(-80px) rotateY(15deg);
}
.srinath-wcu-right-wing .srinath-wcu-card {
  opacity: 0; transform: translateX(80px) rotateY(-15deg);
}

/* ==========================================================================
   INTERACTIVE HOVER DYNAMICS
   ========================================================================== */
.srinath-wcu-card:hover {
  background: #ffffff;
  border-color: rgba(230, 87, 87, 0.3);
  box-shadow: 0 25px 50px rgba(11, 17, 30, 0.05);
}
.srinath-wcu-card:hover .srinath-wcu-card-title { color: rgb(230, 87, 87); }
.srinath-wcu-card:hover .srinath-wcu-specs-item { color: #0b111e; transform: translateX(4px); }
.srinath-wcu-card:hover .srinath-wcu-specs-item::before { color: rgb(230, 87, 87); transform: rotate(90deg); }
.srinath-wcu-card:hover::after { opacity: 0.3; transform: translateZ(25px) scale(1.12) rotate(8deg); }

/* Center Image Float Hover Interaction Effect */
.srinath-wcu-center-showcase:hover .srinath-wcu-showcase-img {
  transform: translateY(-8px) scale(1.03);
}

/* ==========================================================================
   SCROLL OVERFLOW TRIGGERED SUCCESS LIFECYCLES
   ========================================================================== */
.srinath-wcu-triggered .srinath-wcu-section-title,
.srinath-wcu-triggered .srinath-wcu-section-subtitle,
.srinath-wcu-triggered .srinath-wcu-center-showcase {
  opacity: 1; transform: translateY(0) scale(1);
}

.srinath-wcu-triggered .srinath-wcu-side-col .srinath-wcu-card {
  opacity: 1; transform: translateX(0) rotateY(0deg);
}

/* Custom Ordered Stagger Chains across Lateral Wings */
.srinath-wcu-triggered .srinath-wcu-left-wing .srinath-wcu-card:nth-child(1) { transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.srinath-wcu-triggered .srinath-wcu-left-wing .srinath-wcu-card:nth-child(2) { transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.srinath-wcu-triggered .srinath-wcu-right-wing .srinath-wcu-card { transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }

/* ==========================================================================
   PRODUCTION RESPONSIVE OVERSIGHT PATCH (Add to bottom of CSS file)
   ========================================================================== */

/* 1. Ultrawide & 4K Monitor Safeguards (1400px and up) */
@media (min-width: 1400px) {
  .srinath-wcu-container {
    max-width: 1320px; /* Expands cleanly on large displays */
  }
  .srinath-wcu-split-grid {
    gap: 50px; /* Relaxes grid spacing on roomy viewports */
  }
  .srinath-wcu-tall-card {
    min-height: 560px; /* Maintains balanced asymmetry next to taller displays */
  }
}

/* 2. Medium/Small Laptop & Large Tablet Tuning (768px to 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .srinath-wcu-section-title {
    font-size: 40px !important; /* Prevents title text clipping */
  }
  
  .srinath-wcu-split-grid {
    gap: 24px; /* Tightens grid gutters to protect text sizing rules */
  }
  
  .srinath-wcu-card {
    padding: 35px 25px; /* Saves internal breathing room */
  }
  
  .srinath-wcu-tall-card {
    min-height: 460px;
  }
  
  .srinath-wcu-tech-ring {
    width: 320px; /* Scales back background canvas elements slightly */
    height: 320px;
  }
}

/* 3. Phablet & Portrait Tablet Optimization Intersections (576px to 1024px) */
@media (max-width: 1024px) {
  /* Smoothly transitions the middle image asset to a central hero spotlight banner */
  .srinath-wcu-split-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .srinath-wcu-center-showcase {
    grid-column: span 2;
    order: -1; /* Ensures image sits at the top on tablets/mobiles for intuitive user processing */
    margin: 0 auto 40px auto;
  }
  
  .srinath-wcu-left-wing, 
  .srinath-wcu-right-wing {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
  }
  
  .srinath-wcu-tall-card {
    min-height: auto; /* Allow height to adjust dynamically when stacked side-by-side */
    height: 100%;
  }
}

/* 4. Compact Mobile Display Engine Updates (Max-width: 767px) */
@media (max-width: 767px) {
  .srinath-wcu-section {
    padding: 70px 0; /* Drops vertical section padding for quick scroll interaction loops */
  }
  
  .srinath-wcu-header-zone {
    margin-bottom: 45px;
    text-align: left; /* Maintains natural reading hierarchy on small screens */
  }
  
  .srinath-wcu-section-title {
    font-size: 32px !important;
    letter-spacing: -1px;
  }
  
  .srinath-wcu-split-grid {
    grid-template-columns: 1fr !important; /* Enforces a single responsive block layout stream */
    gap: 20px;
  }
  
  .srinath-wcu-center-showcase {
    grid-column: span 1;
    margin-bottom: 20px;
  }
  
  .srinath-wcu-image-wrapper {
    max-width: 260px; /* Prevents overflow clipping on extra small devices */
  }
  
  .srinath-wcu-tech-ring {
    width: 290px;
    height: 290px;
  }
  
  .srinath-wcu-card {
    padding: 30px 24px;
    border-radius: 20px; /* Slightly tighter corner curves on mobile card boundaries */
  }
  
  /* Kill complex 3D rotation transforms on low-power mobile viewports to keep scrolling buttery smooth */
  .srinath-wcu-left-wing .srinath-wcu-card,
  .srinath-wcu-right-wing .srinath-wcu-card {
    transform: translateY(25px) !important; 
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  /* Triggers traditional top-down block slide-ins when user scrolls past on mobile phone */
  .srinath-wcu-triggered .srinath-wcu-side-col .srinath-wcu-card {
    transform: translateY(0) !important;
    opacity: 1;
  }
}

/* 5. Micro-Screen Devices (Below 360px - e.g., Galaxy Fold Cover screen) */
@media (max-width: 359px) {
  .srinath-wcu-section-title {
    font-size: 28px !important;
  }
  .srinath-wcu-card-title {
    font-size: 19px !important;
  }
  .srinath-wcu-image-wrapper {
    max-width: 200px;
  }
  .srinath-wcu-tech-ring {
    display: none; /* Hide decorative background rings on tiny screens to avoid layout breaks */
  }
}
/******************* INDIVIDUAL BANNER DESIGN (ALL-DEVICE RESPONSIVE) **********************/
/******************* INDIVIDUAL BANNER DESIGN (ALL-DEVICE RESPONSIVE) **********************/

/* Unique Banner Container */
.dynamic-banner-area {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 460px;
    background-attachment: fixed;
    display: table;
    width: 100%;
}

/* Overlay to make text readable against any image */
.banner-overlay {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Table layout for vertical centering */
.d-table {
    display: table;
    width: 100%;
    height: 100%;
}

.d-table-cell {
    display: table-cell;
    vertical-align: middle;
}

/* Content styling */
.banner-content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 5%; /* Safety padding for all screens */
}

/* UPDATED: Target h1 instead of h2 since internal page headers must lead with h1 tags for clear index prioritization */
.banner-content h1 {
    color: #ffffff;
    font-weight: 650;
    font-size: clamp(28px, 5vw, 64px); 
    margin-bottom: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    text-transform: uppercase; 
    line-height: 1.1;
    margin-top: 0;
}

.breadcrumb-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.breadcrumb-list li {
    display: inline-block;
    color: #ffffff;
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 16px);
}

/* Specific styling for text wrapped inside the anchor elements for Schema validation */
.breadcrumb-list li a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb-list li a span {
    color: #ffffff;
    transition: 0.3s;
}

.breadcrumb-list li a:hover span {
    color: #f1f1f1;
}

.breadcrumb-separator span {
    margin: 0 5px;
}


/* ==========================================================================
   CROSS-DEVICE RESPONSIVE OPTIMIZATIONS
   ========================================================================== */

/* 1. Large Screen & Ultra-Wide Monitors (Safeguarding visual sharpness) */
@media (min-width: 1400px) {
    .dynamic-banner-area {
        height: 500px; /* Slightly taller aspect block for high-res premium presence */
    }
}

/* 2. Medium Laptops & Small Desktops (992px to 1200px) */
@media (max-width: 1200px) {
    .dynamic-banner-area {
        height: 420px; /* Snugger layout fitting for typical notebook displays */
    }
}

/* 3. Landscape Tablets & iPads (768px to 991px) */
@media (max-width: 991px) {
    .dynamic-banner-area {
        height: 380px;
        background-attachment: scroll; /* Disables fixed parallax to prevent lagging on mobile touch displays */
    }
    
    .banner-content {
        padding: 0 8%; /* Increased side safety boundaries for tablet frames */
    }
}

/* 4. Portrait Tablets & Large Mobiles (481px to 767px) */
@media (max-width: 767px) {
    /* Enforces dynamic flex centering to override table layout alignment offsets */
    .dynamic-banner-area {
        height: 320px;
        background-attachment: scroll; 
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .d-table, .d-table-cell {
        display: flex !important;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .banner-content h1 {
        margin-bottom: 12px;
        letter-spacing: -0.5px; /* Slight tracking tightening to prevent awkward text breaking */
    }
}

/* 5. Compact Mobile Screens & Foldables (Up to 480px) */
@media (max-width: 480px) {
    .dynamic-banner-area {
        height: auto; 
        min-height: 280px; /* Sets concrete base baseline limits */
        padding: 0; /* Let flexbox handle vertical centering completely instead of padding */
        background-attachment: scroll;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .d-table, .d-table-cell {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .banner-content {
        padding: 0 20px; /* Fixed crisp padding boundary maps */
        width: 100%;
    }
    
    .banner-content h1 {
        margin-bottom: 14px;
        line-height: 1.2; /* Extra space to prevent overlapping if title extends past 3 lines */
    }
    
    .breadcrumb-list li {
        font-size: 13px; /* Prevents multiple crumbs from stacking aggressively on tiny viewports */
    }
    
    .breadcrumb-separator span {
        margin: 0 3px; /* Brings links tighter together structurally */
    }
}

/*******************************about us first section*********************************************/
.shrinath-signature-intro-section {
    position: relative;
    background-color: #ffffff !important; /* Updated for clean contrast */
    padding: clamp(60px, 7vw, 90px) 0;
    overflow: hidden;
    width: 100%;
    contain: content;
}

.shrinath-real3d-hardware-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.shrinath-3d-hardware-group {
    position: absolute;
    width: 340px;
    height: 340px;
    opacity: 0.85; 
    display: block;
    backface-visibility: hidden;
    contain: strict;
}

.shrinath-hardware-left {
    top: -20px;
    left: -80px;
}

.shrinath-hardware-right {
    bottom: -40px;
    right: -80px;
}

.shrinath-gpu-accelerator-layer {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.shrinath-real3d-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.shrinath-left-sub-cog {
    width: 190px;
    height: 190px;
    position: absolute;
    top: 195px;
    left: 140px;
}

/* --- PRESENTATION DESIGN MATRIX --- */
.shrinath-meta-ribbon-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(26, 29, 32, 0.08);
}
.shrinath-meta-tag {
    font-family: 'Plus Jakarta Sans', monospace !important;
    font-size: 11px;
    font-weight: 700;
    color: rgba(26, 29, 32, 0.4);
    letter-spacing: 2px;
}

.shrinath-meta-dots {
    flex-grow: 1;
    height: 1px;
    border-top: 1px dashed rgba(26, 29, 32, 0.1);
    margin: 0 20px;
}
.shrinath-custom-grid-container {
    position: relative;
    z-index: 10;
}

.shrinath-brand-sticky-block {
    position: sticky;
    top: 100px;
}

.shrinath-badge-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.shrinath-square-marker {
    width: 6px;
    height: 6px;
    background-color: rgb(230, 87, 87);
    display: inline-block;
}

.shrinath-marquee-badge {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: rgb(230, 87, 87);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0;
}

.shrinath-split-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1a1d20;
    font-weight: 700;
    font-size: clamp(32px, 3.2vw, 44px);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 12px;
}

.shrinath-split-heading span {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    will-change: transform, opacity;
    animation: shrinathWordReveal 1.1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: calc(var(--word-idx) * 0.09s);
}

.shrinath-editorial-content-pillar {
    padding-left: clamp(0px, 5vw, 60px);
}
.shrinath-editorial-para-lead {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.75;
    color: #1a1d20;
    margin-bottom: 28px;
    text-align: left;
    font-weight: 400;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity;
    animation: shrinathContentFadeIn 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: 0.7s;
}
.shrinath-editorial-para-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(15px, 1.1vw, 16px);
    line-height: 1.85;
    color: #495057;
    margin-bottom: 45px;
    text-align: left;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity;
    animation: shrinathContentFadeIn 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: 0.85s;
}

.shrinath-brand-accent {
    color: rgb(230, 87, 87);
    font-weight: 700;
}

.shrinath-trust-metric {
    background-color: #ffffff;
    border: 1px solid rgba(26, 29, 32, 0.07);
    padding: 24px 30px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(26, 29, 32, 0.04); /* Adjusted shadow for white background */
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity;
    animation: shrinathContentFadeIn 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: 1s;
}

.shrinath-metric-inner-grid {
    display: flex;
    align-items: center;
    gap: 24px;
}

.shrinath-metric-number {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(40px, 3.5vw, 48px);
    font-weight: 800;
    color: rgb(230, 87, 87);
    line-height: 1;
    letter-spacing: -1px;
}

.shrinath-metric-label-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.shrinath-metric-pill {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 10px;
    font-weight: 800;
    background-color: rgba(25, 135, 84, 0.1);
    color: rgb(230, 87, 87);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.shrinath-metric-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
}

@keyframes shrinathWordReveal {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes shrinathContentFadeIn {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 1200px) {
    .shrinath-hardware-left { left: -120px; }
    .shrinath-hardware-right { right: -120px; }
}

@media (max-width: 992px) {
    .shrinath-3d-hardware-group { transform: scale(0.7); }
    .shrinath-hardware-left { left: -140px; top: -40px; }
    .shrinath-hardware-right { right: -140px; bottom: -60px; }
    .shrinath-editorial-content-pillar { padding-left: 0; }
    .shrinath-brand-sticky-block { position: relative; top: 0; }
    .shrinath-geo-coords { display: none; }
}

@media (max-width: 768px) {
    .shrinath-3d-hardware-group { transform: scale(0.55); opacity: 0.4; }
    .shrinath-hardware-left { left: -150px; top: -30px; }
    .shrinath-hardware-right { right: -150px; bottom: -50px; }
    .shrinath-metric-inner-grid { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/***************************************about clientele********************************************************/
/* Isolated Structural Framework Module Container Base */
/* Isolated Structural Framework Module Container Base */
.shrinath-cl-clients-section {
    position: relative;
    background-color: #FFFFFF !important; /* Chosen background color matrix */
    padding: clamp(55px, 6vw, 95px) 0; /* Reduced vertical padding for tighter fit */
    width: 100%;
    overflow: hidden;
}

.shrinath-cl-grid-container {
    position: relative;
    z-index: 5;
}

/* --- TYPOGRAPHY HEADER ALIGNMENTS --- */
.shrinath-cl-header-row {
    margin-bottom: clamp(35px, 4.5vw, 50px); /* Reduced space between header and video */
    align-items: flex-start;
}

.shrinath-cl-badge-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shrinath-cl-square-dot {
    width: 6px;
    height: 6px;
    background-color: rgb(230, 87, 87);
    display: inline-block;
}

.shrinath-cl-section-tag {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: rgb(230, 87, 87);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0;
}

/* Premium Generation Slow Cinematic Splitting Text Narrative Effect */
.shrinath-cl-narrative-text {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1a1d20;
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.45;
    letter-spacing: -0.5px;
    margin: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 10px;
}

.shrinath-cl-narrative-text span {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 25px, 0);
    will-change: transform, opacity;
    animation: shrinathClTextReveal 1.1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: calc(var(--cl-word-idx) * 0.05s); /* Linear distribution stagger pacing */
}

/* --- PERFECTLY SIMPLE PRODUCTION VIDEO FRAMEWORK --- 
   Enforced explicitly to exactly 1270x400 aspect ratio structure.
*/
.shrinath-cl-video-wrapper-frame {
    width: 100%;
    max-width: 1270px;
    height: auto;
    aspect-ratio: 1270 / 400; /* Maintained strict engineering specs */
    margin: 0 auto;
    background-color: transparent;
    border-radius: 0px; /* Kept completely flat and borderless to seamlessly blend the animation graphics */
    overflow: hidden;
    will-change: transform;
    transform: translate3d(0, 0, 0); /* GPU acceleration injection safeguard */
    opacity: 0;
    animation: shrinathClVideoFadeIn 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: 0.9s;
}

.shrinath-cl-native-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Assures the circular orbit graphics are fully visible without getting clipped or cropped */
    display: block;
}

/* Hidden container kept specifically readable for Web Crawlers */
.shrinath-cl-seo-fallback-data {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- ANIMATION MATHEMATICAL CORE SEQUENCING --- */
@keyframes shrinathClTextReveal {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes shrinathClVideoFadeIn {
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   PRECISION RESPONSIVE BREAKPOINTS (ALL DEVICES MAP)
   ========================================================================== */

/* 1. Ultra Large Displays & Desktops (Safeguard alignment framework) */
@media (min-width: 1400px) {
    .shrinath-cl-grid-container {
        max-width: 1320px; /* Aligns with Bootstrap container bounds perfectly */
    }
}

/* 2. Laptops & Small Desktops (1024px to 1200px) */
@media (max-width: 1200px) {
    .shrinath-cl-video-wrapper-frame {
        max-width: 100%;
        padding: 0 15px; /* Side breathing room on smaller laptop monitors */
    }
}

/* 3. Landscape Tablets & Ipads (768px to 992px) */
@media (max-width: 992px) {
    .shrinath-cl-header-row { 
        margin-bottom: 30px; 
    }
    .shrinath-cl-video-wrapper-frame {
        aspect-ratio: 1270 / 480; /* Slightly taller aspect block to handle shrinking width without squeezing assets */
        padding: 0 10px;
    }
}

/* 4. Portrait Tablets & Large Mobiles (481px to 768px) */
@media (max-width: 768px) {
    .shrinath-cl-video-wrapper-frame {
        aspect-ratio: 16 / 9; /* Standard responsive mobile handling ratio */
        padding: 0;
    }
    .shrinath-cl-native-video {
        object-fit: cover; /* Optional tweak: switch to cover if orbit circles get tiny, otherwise leave as contain */
    }
}

/* 5. Compact Mobiles & Mini-Screens (Up to 480px) */
@media (max-width: 480px) {
    .shrinath-cl-clients-section {
        padding: clamp(40px, 8vw, 55px) 0; /* Snug vertical alignment padding for modern viewports */
    }
    .shrinath-cl-header-row {
        margin-bottom: 24px;
    }
    .shrinath-cl-narrative-text {
        font-size: 20px; /* Highly crisp reading scale on compact displays */
        line-height: 1.4;
        gap: 2px 6px; /* Tighter word tracking setup */
    }
    .shrinath-cl-video-wrapper-frame {
        aspect-ratio: 4 / 3; /* Optimized square-leaning frame behavior for mobile scrolling visibility */
    }
}


/********************************************about ceo*********************************************/
/* --- STRUCTURAL BASE CANVAS --- */
/* --- STRUCTURAL BASE CANVAS --- */
.shrinath-exec-profile-section {
    position: relative;
    background-color: #F6F5ED !important; /* Perfect Screen Match */
    padding: clamp(60px, 8vw, 140px) 24px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.shrinath-exec-profile-section *,
.shrinath-exec-profile-section *::before,
.shrinath-exec-profile-section *::after {
    box-sizing: border-box;
}

.shrinath-exec-grid-canvas {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Clean fluid 2-column desk/laptop mix that cascades naturally */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    gap: clamp(40px, 5vw, 100px);
    align-items: start;
}

/* --- COLUMN 1: VISUAL PEDESTAL & HEADER ARCHITECTURE --- */
.shrinath-exec-portrait-block {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 50px);
    width: 100%;
}

/* Precise Word-by-Word Clip Reveal */
.shrinath-exec-kinetic-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 700;
    color: #1a1d20;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.shrinath-exec-reveal-frame {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 4px;
}

.shrinath-exec-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 110%, 0);
    will-change: transform, opacity;
    animation: shrinathWordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--word-idx) * 0.08s);
}

.shrinath-exec-media-frame {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto; /* Keeps image centered on mobile/tablet screens */
    aspect-ratio: 1 / 1.18;
    border-radius: 20px;
}

.shrinath-exec-geometry-backing {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80px;
    height: 80px;
    border-top: 3px solid rgb(230, 87, 87);
    border-left: 3px solid rgb(230, 87, 87);
    z-index: 1;
    transition: transform 0.5s ease;
}

.shrinath-exec-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    position: relative;
    z-index: 2;
    filter: contrast(1.03) grayscale(0.1);
    box-shadow: 0 30px 60px -20px rgba(26, 29, 32, 0.12);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Absolute Floating Premium Identity Plate */
.shrinath-exec-identity-plate {
    position: absolute;
    bottom: -25px;
    right: -20px;
    background: #ffffff;
    border: 1px solid rgba(26, 29, 32, 0.06);
    box-shadow: 0 15px 35px rgba(26, 29, 32, 0.05);
    border-radius: 12px;
    padding: clamp(16px, 2vw, 24px) clamp(20px, 2.5vw, 32px);
    z-index: 10;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.shrinath-exec-role {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 10px;
    font-weight: 800;
    color: rgb(230, 87, 87);
    letter-spacing: 3px;
    display: block;
    margin-bottom: 4px;
}

.shrinath-exec-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: #1a1d20;
    margin: 0;
    white-space: nowrap;
}

/* --- COLUMN 2: FLOATING BIOGRAPHY PANELS --- */
.shrinath-exec-biography-pillar {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    padding-top: 0; /* Handled programmatically via CSS Grid now */
    width: 100%;
}

/* Dynamic Entrance Scroll Panels */
.shrinath-exec-scroll-panel {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(26, 29, 32, 0.04);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 10px 30px -10px rgba(26, 29, 32, 0.04);
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    will-change: transform, opacity;
    animation: shrinathParaReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.45s ease;
}

.shrinath-exec-panel-accent {
    position: absolute;
    top: clamp(24px, 3vw, 36px);
    left: 0;
    width: 3px;
    height: 24px;
    background-color: #cbd5e1;
    transition: background-color 0.4s ease, height 0.4s ease;
}

.shrinath-exec-prose {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.75;
    color: #4a5568;
    margin: 0;
    font-weight: 400;
    text-align: left;
}

/* Paragraph Animation Stagger Intervals */
.shrinath-exec-panel-delay-1 { animation-delay: 0.4s; }
.shrinath-exec-panel-delay-2 { animation-delay: 0.55s; }
.shrinath-exec-panel-delay-3 { animation-delay: 0.7s; }

/* --- INTERACTIVE ENRICHMENT CONTROLS --- */
.shrinath-exec-scroll-panel:hover {
    border-color: rgba(230, 87, 87, 0.22);
    box-shadow: 0 20px 45px -15px rgba(230, 87, 87, 0.06), 
                0 4px 12px rgba(0, 0, 0, 0.01);
    transform: translate3d(0, -4px, 0);
}

.shrinath-exec-scroll-panel:hover .shrinath-exec-panel-accent {
    background-color: rgb(230, 87, 87);
    height: 40px;
}

.shrinath-exec-profile-section:hover .shrinath-exec-geometry-backing {
    transform: translate3d(-6px, -6px, 0);
}

.shrinath-exec-profile-section:hover .shrinath-exec-portrait {
    transform: scale(1.02);
}

.shrinath-exec-profile-section:hover .shrinath-exec-identity-plate {
    transform: translate3d(-4px, -2px, 0);
    border-color: rgba(230, 87, 87, 0.15);
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes shrinathWordReveal {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes shrinathParaReveal {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* --- PRECISION MEDIA BREAKPOINTS --- */

/* Laptops & Tablets (Handles Landscape iPads and Smaller Notebooks smoothly) */
@media (max-width: 1024px) {
    .shrinath-exec-grid-canvas {
        gap: 40px;
    }
    .shrinath-exec-biography-pillar {
        padding-top: 20px;
    }
}

/* Mid-Range Tablets & Large Mobiles (Stacked Layout Transition) */
@media (max-width: 991px) {
    .shrinath-exec-grid-canvas {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .shrinath-exec-portrait-block {
        max-width: 550px;
        margin: 0 auto;
    }
    .shrinath-exec-biography-pillar {
        max-width: 650px;
        margin: 0 auto;
        padding-top: 0;
    }
    .shrinath-exec-identity-plate {
        right: -10px;
        bottom: -15px;
    }
}

/* Compact Mobile Screens & Foldables (iPhone SE, Galaxy Fold Portrait, etc) */
@media (max-width: 480px) {
    .shrinath-exec-profile-section {
        padding: clamp(40px, 6vw, 60px) 16px;
    }
    .shrinath-exec-kinetic-title {
        gap: 4px 8px;
    }
    .shrinath-exec-scroll-panel {
        padding: 24px 20px 24px 24px;
    }
    .shrinath-exec-identity-plate {
        position: relative;
        bottom: 0;
        right: 0;
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }
    .shrinath-exec-name {
        white-space: normal;
    }
    .shrinath-exec-geometry-backing {
        display: none;
    }
}
/**************************************service section 2***********************************/

/*****************************service section 3***************************************************/
/* --- STYLING AREA CONTAINMENT --- */
.srinath-radar-suite-section {
    position: relative;
    width: 100%;
    background-color: #F6F5ED; /* Explicitly forced white background */
    padding: clamp(100px, 12vw, 160px) 0;
    overflow: hidden;
}

.srinath-radar-suite-section *,
.srinath-radar-suite-section *::before,
.srinath-radar-suite-section *::after {
    box-sizing: border-box;
}

.srinath-radar-suite-workspace {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- ASYMMETRIC RADAR GRID CONTROLLER --- */
.srinath-radar-suite-grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
}

/* --- LEFT WING: GRAPHIC CARD ENGINE --- */
.srinath-radar-suite-visual-wing {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    perspective: 1000px;
}

.srinath-radar-suite-card {
    position: relative;
    background: #fdfdfd;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 30px 70px -30px rgba(18, 20, 22, 0.08),
                0 0 0 1px rgba(18, 20, 22, 0.03);
    max-width: 481px; /* Buffers your 401px map beautifully with layout padding offsets */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    /* Reveal card gracefully into layout flow */
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
    animation: srinathCardReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.srinath-radar-suite-figure {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.srinath-radar-suite-map {
    width: 100%;
    max-width: 401px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.02));
    will-change: transform, filter;
    
    /* NEW: Continuous elegant hover floating loop animation */
    animation: srinathMapFloat 6s ease-in-out infinite;
    
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.4s ease;
}

/* Radar Tech Accents */
.srinath-radar-suite-scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(230, 87, 87, 0) 0%, rgb(230, 87, 87) 50%, rgba(230, 87, 87, 0) 100%);
    opacity: 0.4;
    transform: translateY(-10px);
    animation: srinathRadarScan 4s linear infinite;
}

.srinath-radar-suite-corner-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(230, 87, 87, 0.25);
    transition: all 0.4s ease;
}
.srinath-radar-suite-corner-bracket.top-left { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.srinath-radar-suite-corner-bracket.bottom-right { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

/* --- CENTER WING: STRUCTURAL ARCHITECTURAL DIVIDER --- */
.srinath-radar-suite-divider-wing {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.srinath-radar-suite-backbone-line {
    position: relative;
    width: 1px;
    height: 240px;
    background: linear-gradient(180deg, rgba(18,20,22,0.02) 0%, rgba(18,20,22,1) 30%, rgba(18,20,22,1) 70%, rgba(18,20,22,0.02) 100%);
    
    /* Line grows vertically on entry */
    transform: scaleY(0);
    transform-origin: top;
    animation: srinathLineGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.srinath-radar-suite-pulse-node {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background: rgb(230, 87, 87);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(230, 87, 87, 0.6);
    animation: srinathRadarPulse 2.5s infinite;
}

/* --- RIGHT WING: KINETIC CONTENT SUITE --- */
.srinath-radar-suite-content-wing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 10px;
    text-align: left;
}

.srinath-radar-suite-header-block {
    margin-bottom: 24px;
}

/* Dynamic Tag Reveal */
.srinath-radar-mask-tag {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.srinath-radar-animated-tag {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    color: rgb(230, 87, 87);
    letter-spacing: -0.5px;
    transform: translateX(-105%);
    animation: srinathRadarTagSlide 0.9s cubic-bezier(0.15, 0.85, 0.2, 1) forwards;
}

/* Kinetic Slit Heading Reveal Engine */
.srinath-radar-suite-kinetic-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(32px, 3.5vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: #121416;
    margin: 0;
}

.srinath-radar-title-row {
    display: block;
    position: relative;
    overflow: hidden;
    height: 1.3em;
    margin-bottom: -0.1em;
}

.srinath-radar-title-word {
    display: inline-block;
    transform: translate3d(0, 105%, 0);
    will-change: transform;
    animation: srinathRadarTitleSlide 1.1s cubic-bezier(0.15, 0.85, 0.2, 1) forwards;
    animation-delay: var(--radar-delay);
}

.srinath-radar-suite-prose {
    font-family: 'Inter', sans-serif !important;
    font-size: 15.5px;
    line-height: 1.75;
    color: #51575e;
    max-width: 460px;
    margin: 0;
    font-weight: 300;
    opacity: 0;
    transform: translateY(15px);
    animation: srinathRadarProseFade 0.8s ease forwards;
    animation-delay: 0.6s;
}

/* --- PREMIUM INTERACTION HOVERS --- */
.srinath-radar-suite-card:hover {
    transform: translate3d(-6px, -2px, 0) rotateY(-3deg);
    box-shadow: 0 40px 90px -25px rgba(18, 20, 22, 0.12),
                0 0 0 1px rgba(230, 87, 87, 0.15);
}

/* Interlocks hover state smoothly over the active loop */
.srinath-radar-suite-card:hover .srinath-radar-suite-map {
    filter: drop-shadow(0 15px 25px rgba(230, 87, 87, 0.1));
}

.srinath-radar-suite-card:hover .srinath-radar-suite-corner-bracket {
    width: 20px;
    height: 20px;
    border-color: rgba(230, 87, 87, 0.8);
}

/* --- KEYFRAME ANIMATION ENGINE --- */
@keyframes srinathCardReveal {
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes srinathLineGrow {
    100% { transform: scaleY(1); }
}

/* Continuous Floating Mechanics for Map Vector Asset */
@keyframes srinathMapFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

@keyframes srinathRadarScan {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(220px); opacity: 0; }
}

@keyframes srinathRadarPulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 87, 87, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(230, 87, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 87, 87, 0); }
}

@keyframes srinathRadarTagSlide {
    100% { transform: translateX(0); }
}

@keyframes srinathRadarTitleSlide {
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes srinathRadarProseFade {
    100% { opacity: 1; transform: translateY(0); }
}

/* --- MOBILE RESPONSIVE MEDIA DECK --- */
@media (max-width: 1024px) {
    .srinath-radar-suite-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .srinath-radar-suite-visual-wing {
        justify-content: center;
        order: 2;
    }
    .srinath-radar-suite-content-wing {
        align-items: center;
        text-align: center;
        padding-left: 0;
        order: 1;
    }
    .srinath-radar-suite-prose {
        max-width: 600px;
    }
    .srinath-radar-suite-divider-wing {
        display: none; /* Safely completely pulls layout divider out of viewport on smaller scales */
    }
    .srinath-radar-suite-card {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .srinath-radar-suite-card:hover {
        transform: translate3d(0, -4px, 0) !important;
    }
}

@media (max-width: 768px) {
    .srinath-radar-suite-section {
        padding: clamp(70px, 10vw, 110px) 0;
    }
    .srinath-radar-suite-card {
        padding: 24px;
    }
    .srinath-radar-suite-map {
        animation: none !important; /* Disables loops on mobile processors to protect scrolling refresh rate */
    }
    .srinath-radar-title-row {
        height: auto;
        overflow: visible;
    }
    .srinath-radar-title-word, 
    .srinath-radar-animated-tag {
        transform: none !important;
        animation: none !important;
    }
    .srinath-radar-suite-prose {
        opacity: 1;
        transform: none;
    }
}
/***************************product 1 firsst design***************************************************/
/* ==========================================================================
   SRINATH MACHINERY ASYMMETRIC LARGE-IMAGE CORES
   ========================================================================== */

.srinath-machinery-canvas-section {
    position: relative;
    background-color: #FFFFFF !important; /* Strictly white background enforced */
    padding: clamp(60px, 7vw, 110px) 0 clamp(80px, 9vw, 140px) 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.srinath-machinery-canvas-section *,
.srinath-machinery-canvas-section *::before,
.srinath-machinery-canvas-section *::after {
    box-sizing: border-box;
}

.srinath-machinery-canvas-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- UPPER HALF: LARGE IMAGE ENGINEERING PEDESTAL --- */
.srinath-machinery-image-deck {
    position: relative;
    width: 100%;
    background: #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 32px;
    padding: clamp(40px, 6vw, 90px) 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(50px, 6vw, 90px);
}

.srinath-machinery-blueprint-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 32px;
    background-image: 
        linear-gradient(rgba(26, 29, 32, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 29, 32, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}

.srinath-machinery-display-wrapper {
    position: relative;
    width: 100%;
    max-width: 1060px;
    z-index: 2;
}

.srinath-machinery-hero-asset {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interactive Engineering Hotspots */
.srinath-machinery-hotspot {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.srinath-machinery-hotspot-1 { top: 25%; left: 30%; transition-delay: 0.5s; }
.srinath-machinery-hotspot-2 { bottom: 35%; right: 25%; transition-delay: 0.7s; }

.srinath-machinery-radar-ping {
    width: 12px;
    height: 12px;
    background-color: rgb(230, 87, 87);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.srinath-machinery-radar-ping::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: rgb(230, 87, 87);
    animation: srinathRadarPulseLoop 2.5s infinite ease-out;
}

.srinath-machinery-hotspot-label {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1d20;
    background: #FFFFFF;
    padding: 6px 14px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    white-space: nowrap;
}

/* --- BOTTOM HALF: TYPOGRAPHIC INTEL ROW --- */
.srinath-machinery-intel-deck {
    width: 100%;
}

.srinath-machinery-layout-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 5vw, 100px);
    align-items: start;
}

.srinath-machinery-micro-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: rgb(230, 87, 87);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.srinath-machinery-tag-dash {
    width: 20px;
    height: 2px;
    background-color: rgb(230, 87, 87);
}

/* --- NEW: COMPACT WORD ANIMATION CORE --- */
.srinath-machinery-heading-reveal {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(32px, 3.5vw, 46px);
    font-weight: 700;
    color: #1a1d20;
    line-height: 1.18;
    margin: 0;
    letter-spacing: -0.025em;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 10px;
}

/* CSS hook targeting split words safely */
.srinath-machinery-heading-reveal .srinath-word-span {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 25px, 0);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.8s ease;
    transition-delay: calc(var(--srinath-word-idx) * 0.08s);
}

/* Triggers word transitions sequentially when scrolled into view */
.srinath-machinery-intersected .srinath-machinery-heading-reveal .srinath-word-span {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.srinath-machinery-body-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.srinath-machinery-prose-text {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(15px, 1.2vw, 16px);
    line-height: 1.8;
    color: #4a5568;
    margin: 0;
    text-align: left;
}

.srinath-machinery-prose-text strong {
    color: #1a1d20;
    font-weight: 600;
}

.srinath-machinery-action-frame {
    margin-top: 15px;
}

.srinath-machinery-action-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #1a1d20;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px;
    font-weight: 700;
    position: relative;
    padding-bottom: 6px;
}

.srinath-machinery-action-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #1a1d20;
    transform: scaleX(0.25);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.srinath-machinery-arrow-icon {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}

/* --- SYSTEM INTERACTIVE ACTIVE STATE HOVERS --- */
.srinath-machinery-image-deck:hover .srinath-machinery-hero-asset {
    transform: scale(1.015) translate3d(0, -3px, 0);
}

.srinath-machinery-action-link:hover {
    color: rgb(230, 87, 87);
}

.srinath-machinery-action-link:hover::after {
    background-color: rgb(230, 87, 87);
    transform: scaleX(1);
}

.srinath-machinery-action-link:hover .srinath-machinery-arrow-icon {
    transform: translate3d(6px, 0, 0);
    color: rgb(230, 87, 87);
}

/* ==========================================================================
   PRODUCTION ENGINE ANIMATIONS (SEO SPECIFIC HOOKS)
   ========================================================================== */

@keyframes srinathRadarPulseLoop {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(2.8); opacity: 0; }
}

.srinath-machinery-reveal-fade-up {
    opacity: 0;
    transform: translate3d(0, 45px, 0);
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 1.2s ease;
}

.srinath-machinery-reveal-stagger {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 1s ease;
}

/* Content block text stagger timing setups */
.srinath-machinery-body-column .srinath-machinery-reveal-stagger:nth-child(1) { transition-delay: 0.25s; }
.srinath-machinery-body-column .srinath-machinery-reveal-stagger:nth-child(2) { transition-delay: 0.4s; }
.srinath-machinery-body-column .srinath-machinery-reveal-stagger:nth-child(3) { transition-delay: 0.55s; }

.srinath-machinery-intersected .srinath-machinery-reveal-fade-up,
.srinath-machinery-intersected .srinath-machinery-reveal-stagger {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.srinath-machinery-intersected .srinath-machinery-hotspot {
    opacity: 1;
    transform: scale(1);
}


/* ==========================================================================
   CROSS-DEVICE FULL RESPONSIVE MAP ARCHITECTURE
   ========================================================================== */

@media (max-width: 991px) {
    .srinath-machinery-layout-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .srinath-machinery-image-deck {
        padding: clamp(30px, 5vw, 60px) 16px;
        margin-bottom: 40px;
    }
    .srinath-machinery-hotspot-1 { left: 15%; }
    .srinath-machinery-hotspot-2 { right: 15%; }
}

@media (max-width: 576px) {
    .srinath-machinery-canvas-section { padding: 50px 0 80px 0; }
    .srinath-machinery-image-deck { border-radius: 20px; }
    .srinath-machinery-blueprint-backdrop { border-radius: 20px; }
    .srinath-machinery-hotspot { display: none !important; }
    
    .srinath-machinery-action-link {
        width: 100%;
        justify-content: space-between;
        background-color: #1a1d20;
        color: #FFFFFF !important;
        padding: 16px 24px;
        border-radius: 12px;
    }
    .srinath-machinery-action-link::after { display: none; }
}
/************************************features************************************************/
/* ==========================================================================
   SRINATH MACHINERY SPECS MATRIX DESIGN SYSTEM
   ========================================================================== */

.srinath-specs-matrix-section {
    position: relative;
    background-color: #F6F5ED !important; /* Enforced Premium Off-White Cream Canvas */
    padding: clamp(60px, 8vw, 120px) 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.srinath-specs-matrix-section *,
.srinath-specs-matrix-section *::before,
.srinath-specs-matrix-section *::after {
    box-sizing: border-box;
}

.srinath-specs-matrix-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- SECTION HEADER --- */
.srinath-specs-header-row {
    margin-bottom: clamp(40px, 6vw, 64px);
    text-align: left;
}

.srinath-specs-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgb(230, 87, 87);
    display: block;
    margin-bottom: 8px;
}

.srinath-specs-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: #1a1d20;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

/* --- GRID FORMAT ARCHITECTURE --- */
.srinath-specs-grid-display {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Premium 4-column minimal block structure */
    gap: 24px;
}

/* --- CREATIVE SPEC CARD --- */
.srinath-specs-item-card {
    position: relative;
    background: #FFFFFF; /* Crisp contrast pop against #F6F5ED canvas */
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 280px; /* Locked geometric uniform bounding frames */
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Top Block Element Arrangement */
.srinath-specs-card-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.srinath-specs-index {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    color: rgba(26, 29, 32, 0.2);
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

/* Adaptive Container for your 168x68 icons */
.srinath-specs-icon-wrapper {
    width: 100%;
    max-width: 140px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.srinath-specs-asset-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(1) opacity(0.85); /* Architectural clean blueprint tone balance */
    transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bottom Block Typography Elements */
.srinath-specs-card-bottom {
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.srinath-specs-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 800;
    color: #1a1d20;
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.srinath-specs-tech-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px;
    font-weight: 500;
    color: #718096;
    display: inline-block;
}

/* Base Bottom Edge Accent Reveal Feature */
.srinath-specs-card-hover-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgb(230, 87, 87);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- INTERACTIVE DESIGN STATE HOVERS --- */
.srinath-specs-item-card:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 24px 48px -20px rgba(26, 29, 32, 0.08);
}

.srinath-specs-item-card:hover .srinath-specs-index {
    color: rgb(230, 87, 87);
}

.srinath-specs-item-card:hover .srinath-specs-asset-img {
    filter: grayscale(0) opacity(1); /* Activates rich colorful iconography instantly */
    transform: scale(1.04);
}

.srinath-specs-item-card:hover .srinath-specs-card-hover-line {
    transform: scaleX(1);
}


/* ==========================================================================
   SEO COMPLIANT ANIMATION SYSTEM SETUP
   ========================================================================== */

.srinath-specs-observe-fade {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}

.srinath-specs-observe-stagger {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    will-change: transform, opacity;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

/* Linear staggered layout timing chains */
.srinath-specs-grid-display .srinath-specs-observe-stagger:nth-child(1) { transition-delay: 0.05s; }
.srinath-specs-grid-display .srinath-specs-observe-stagger:nth-child(2) { transition-delay: 0.12s; }
.srinath-specs-grid-display .srinath-specs-observe-stagger:nth-child(3) { transition-delay: 0.19s; }
.srinath-specs-grid-display .srinath-specs-observe-stagger:nth-child(4) { transition-delay: 0.26s; }

.srinath-specs-matrix-section.srinath-specs-triggered .srinath-specs-observe-fade,
.srinath-specs-matrix-section.srinath-specs-triggered .srinath-specs-observe-stagger {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   CROSS-DEVICE RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Medium Screens & Laptops */
@media (max-width: 1199px) {
    .srinath-specs-grid-display {
        grid-template-columns: repeat(2, 1fr); /* Shifts fluidly to a balanced 2x2 grid */
        gap: 20px;
    }
    .srinath-specs-item-card {
        height: 260px;
    }
}

/* Tablets & Mobile Environments */
@media (max-width: 767px) {
    .srinath-specs-matrix-section {
        padding: 50px 0;
    }
    .srinath-specs-grid-display {
        grid-template-columns: 1fr; /* Stacked layout for clear vertical readability */
        gap: 16px;
    }
    .srinath-specs-item-card {
        height: auto;
        min-height: 210px;
        padding: 24px;
    }
    .srinath-specs-observe-stagger {
        transform: translate3d(0, 20px, 0); /* Softer displacement vectors optimized for handheld devices */
    }
}
/****************************product description types**************************/
/* ==========================================================================
   SRINATH MACHINERY INDUSTRIAL PORTFOLIO DESIGN LABS
   ========================================================================= */

.srinath-dashboard-console-section {
    position: relative;
    background-color: #FFFFFF !important;
    padding: clamp(60px, 8vw, 80px) 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.srinath-dashboard-console-section *,
.srinath-dashboard-console-section *::before,
.srinath-dashboard-console-section *::after {
    box-sizing: border-box;
}

.srinath-dashboard-console-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- TYPOGRAPHIC HEADERS --- */
.srinath-dashboard-header-block {
    margin-bottom: clamp(40px, 5vw, 64px);
    text-align: left;
}

.srinath-dashboard-micro-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgb(230, 87, 87);
    display: block;
    margin-bottom: 10px;
}

.srinath-dashboard-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    color: #1a1d20;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.02em;
}

/* --- SPLIT GRID INTERFACE ASSEMBLY --- */
.srinath-dashboard-interface-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
    align-items: start;
}

/* --- LEFT NAVIGATION DECK (MODERN BUTTON CARDS) --- */
.srinath-dashboard-navigation-deck {
    position: relative;
    width: 100%;
}

.srinath-dashboard-nav-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.srinath-dashboard-interactive-node {
    position: relative;
    width: 100%;
}

/* Snake timeline backing layout line */
.srinath-dashboard-progress-line {
    position: absolute;
    left: 24px;
    top: 25px;
    width: 2px;
    height: calc(100% - 50px);
    background-color: rgba(26, 29, 32, 0.05);
    z-index: 1;
}

/* Premium Industrial Button Tab Cards */
.srinath-dashboard-nav-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #F8F9FA;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 20px 24px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    z-index: 2;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.4s ease, 
                border-color 0.4s ease, 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Button Timeline Indicator Node */
.srinath-dashboard-nav-indicator {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid rgba(26, 29, 32, 0.2);
    flex-shrink: 0;
    transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.srinath-dashboard-nav-label-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.srinath-dashboard-nav-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.srinath-dashboard-nav-index {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #718096;
    transition: color 0.3s ease;
}

/* Explicit UX Interactive User Hint */
.srinath-dashboard-click-hint {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(230, 87, 87);
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.srinath-dashboard-nav-text {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 700;
    color: #2D3748;
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* --- BUTTON INTERACTIVE TRANSITION STATES --- */
.srinath-dashboard-nav-button:hover {
    transform: translate3d(4px, -2px, 0);
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

.srinath-dashboard-nav-button:hover .srinath-dashboard-click-hint {
    opacity: 1;
    transform: translate3d(-2px, 0, 0);
}

.srinath-dashboard-nav-button.srinath-dashboard-active-tab {
    background-color: #FFFFFF;
    border-color: rgb(230, 87, 87);
    box-shadow: 0 12px 24px rgba(230, 87, 87, 0.06);
    transform: translate3d(4px, 0, 0);
}

.srinath-dashboard-nav-button.srinath-dashboard-active-tab .srinath-dashboard-nav-indicator {
    background-color: rgb(230, 87, 87);
    border-color: rgb(230, 87, 87);
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(230, 87, 87, 0.15);
}

.srinath-dashboard-nav-button.srinath-dashboard-active-tab .srinath-dashboard-nav-index {
    color: rgb(230, 87, 87);
}

.srinath-dashboard-nav-button.srinath-dashboard-active-tab .srinath-dashboard-nav-text {
    color: #1a1d20;
    font-weight: 800;
}

.srinath-dashboard-nav-button.srinath-dashboard-active-tab .srinath-dashboard-click-hint {
    display: none;
}

/* --- MOBILE CARRIER CONTAINERS --- */
.srinath-dashboard-mobile-portal-carrier {
    display: none;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- RIGHT CONTENT DISPLAY CONSOLE --- */
.srinath-dashboard-content-deck {
    position: relative;
    background: #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 32px;
    min-height: 670px;
    display: grid;
    align-items: start;
    overflow: hidden;
    width: 100%;
}
.srinath-dashboard-panel {
    position: relative;
    width: 100%;
    padding: clamp(24px, 4vw, 44px);
    display: none;
    opacity: 0;
    background: #FAFAFA;
    will-change: opacity, transform;
}

.srinath-dashboard-panel.srinath-dashboard-active-panel {
    display: block;
    animation: srinathShutterRevealAnimation 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.srinath-dashboard-panel-vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* MEDIA FRAME DISPLAY WINDOW */
.srinath-dashboard-panel-media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.srinath-dashboard-image-pedestal {
    width: 100%;
    max-width: 510px;
    height: 381px;
    background-color: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.015);
    overflow: hidden;
    margin: 0 auto;
}

.srinath-dashboard-machinery-asset {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.srinath-dashboard-active-panel .srinath-dashboard-machinery-asset {
    animation: srinathImagePop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* INFOMATION CONTAINER TEXT LAYOUT */
.srinath-dashboard-panel-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
}

.srinath-dashboard-panel-tag {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #718096;
    background-color: #FFFFFF;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 14px;
}

.srinath-dashboard-panel-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(22px, 2vw, 26px);
    font-weight: 800;
    color: #1a1d20;
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.srinath-dashboard-panel-description {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 20px 0;
}

.srinath-dashboard-spec-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.srinath-dashboard-spec-metric {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: #1a1d20;
    border-bottom: 2px solid rgba(230, 87, 87, 0.4);
    padding-bottom: 2px;
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes srinathShutterRevealAnimation {
    0% { 
        opacity: 0; 
        transform: scale(0.99) translate3d(0, 10px, 0); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translate3d(0, 0, 0); 
    }
}

@keyframes srinathImagePop {
    0% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.srinath-dashboard-reveal {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    will-change: transform, opacity;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
}
.srinath-dashboard-console-section.srinath-dashboard-triggered .srinath-dashboard-reveal:nth-child(1) { transition-delay: 0s; }
.srinath-dashboard-console-section.srinath-dashboard-triggered .srinath-dashboard-reveal:nth-child(2) { transition-delay: 0.1s; }

.srinath-dashboard-console-section.srinath-dashboard-triggered .srinath-dashboard-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   CROSS-DEVICE ULTRA-RESPONSIVE ADAPTATIONS (UNIVERSAL BREAKPOINTS)
   ========================================================================= */

@media (max-width: 1200px) and (min-width: 1025px) {
    .srinath-dashboard-interface-layout {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 30px;
    }
    .srinath-dashboard-image-pedestal {
        height: 340px;
    }
    .srinath-dashboard-content-deck {
        min-height: 620px;
    }
}

/* 3. Responsive Accordion Transformation (For Tablets & Mobile Devices) */
@media (max-width: 1024px) {
    .srinath-dashboard-interface-layout {
        grid-template-columns: 1fr;
        gap: 0px;
    }
    
    .srinath-dashboard-content-deck {
        display: none !important; /* Hide the right desktop view container */
    }

    .srinath-dashboard-progress-line {
        display: none !important;
    }
    
    .srinath-dashboard-mobile-portal-carrier {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .srinath-dashboard-mobile-portal-carrier .srinath-dashboard-panel {
        padding: 24px 16px;
        background-color: #FAFAFA;
        border-radius: 16px;
        margin-top: 12px;
        margin-bottom: 20px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.01);
    }
    
    .srinath-dashboard-nav-button {
        transform: none !important;
        background: #F8F9FA;
        border-color: rgba(0,0,0,0.06);
    }
    
    .srinath-dashboard-nav-button.srinath-dashboard-active-tab {
        background-color: #FFFFFF;
        border-color: rgb(230, 87, 87);
        box-shadow: 0 4px 12px rgba(230, 87, 87, 0.08);
        transform: none !important;
    }

    .srinath-dashboard-nav-button:hover {
        transform: none !important;
    }

    .srinath-dashboard-click-hint {
        display: none !important;
    }
    
    .srinath-dashboard-image-pedestal {
        height: 330px;
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width: 480px) {
    .srinath-dashboard-console-container {
        padding: 0 16px;
    }

    .srinath-dashboard-nav-button {
        padding: 16px;
        gap: 12px;
    }

    .srinath-dashboard-mobile-portal-carrier .srinath-dashboard-panel {
        padding: 16px 12px;
    }
    
    .srinath-dashboard-image-pedestal {
        height: auto;
        aspect-ratio: 4 / 3;
        padding: 12px;
        border-radius: 16px;
    }

    .srinath-dashboard-spec-footer {
        gap: 10px 8px;
    }
}
/****************************************************faq section******************************************/
/* ==========================================================================
   SRINATH MACHINERY ASYMMETRIC DECK & ENHANCED WORD ANIMATION ENGINE
   ========================================================================= */

.srinath-asymmetric-faq-section {
    /* Isolated styling tokens to avoid mutating global scopes */
    --srinath-brand-accent: rgb(230, 87, 87);
    --srinath-dark-solid: #1a1d20;
    --srinath-text-muted: #4a5568;
    --srinath-bg-soft: #FAFAFA;
    --srinath-border-color: rgba(26, 29, 32, 0.08);
    --srinath-elastic-curve: cubic-bezier(0.16, 1, 0.3, 1);
    
    position: relative;
    background-color: #FFFFFF !important;
    padding: clamp(80px, 10vw, 140px) 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.srinath-asymmetric-faq-section *,
.srinath-asymmetric-faq-section *::before,
.srinath-asymmetric-faq-section *::after {
    box-sizing: border-box;
}

.srinath-asymmetric-faq-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- CINEMATIC WORD-BY-WORD HEADER ANIMATION ENGINE --- */
.srinath-asymmetric-faq-header {
    margin-bottom: clamp(50px, 7vw, 84px);
    text-align: left;
}

.srinath-asymmetric-micro-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--srinath-brand-accent);
    display: block;
    margin-bottom: 16px;
}

.srinath-asymmetric-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    color: var(--srinath-dark-solid);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.03em;
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}

/* Base state for word masking transitions */
.srinath-asymmetric-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 35px, 0) scale(0.96);
    will-change: transform, opacity;
    transition: transform 0.9s var(--srinath-elastic-curve), 
                opacity 0.9s ease;
}

/* Step-stagger cascades */
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-word:nth-child(1) { transition-delay: 0.05s; }
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-word:nth-child(2) { transition-delay: 0.15s; }
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-word:nth-child(3) { transition-delay: 0.25s; }
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-word:nth-child(4) { transition-delay: 0.35s; }

/* Trigger action via entry observer */
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-word {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* --- ENHANCED DECK ACCORDION STACK --- */
.srinath-asymmetric-faq-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--srinath-border-color);
}

.srinath-asymmetric-faq-item {
    position: relative;
    border-bottom: 1px solid var(--srinath-border-color);
    background-color: #FFFFFF;
    transition: background-color 0.5s var(--srinath-elastic-curve);
}

.srinath-asymmetric-faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(28px, 3.5vw, 40px) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    gap: 32px;
}

.srinath-asymmetric-trigger-left {
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 5vw, 64px);
    position: relative;
}

.srinath-asymmetric-item-number {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 800;
    color: rgba(26, 29, 32, 0.25);
    line-height: 1.4;
    transition: color 0.4s ease, transform 0.4s var(--srinath-elastic-curve);
}

.srinath-asymmetric-item-question {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 700;
    color: var(--srinath-dark-solid);
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.015em;
    position: relative;
    transition: color 0.4s ease, transform 0.4s var(--srinath-elastic-curve);
}

/* Premium micro-line animation under active question panels */
.srinath-asymmetric-item-question::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 40px;
    height: 2px;
    background-color: var(--srinath-brand-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--srinath-elastic-curve);
}

/* Custom Minimal Toggle Element */
.srinath-asymmetric-toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(26, 29, 32, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--srinath-dark-solid);
    flex-shrink: 0;
    background-color: transparent;
    transition: transform 0.6s var(--srinath-elastic-curve), 
                background-color 0.4s ease, 
                border-color 0.4s ease, 
                color 0.4s ease;
}

.srinath-asymmetric-toggle-icon svg {
    width: 14px;
    height: 14px;
    transition: transform 0.6s var(--srinath-elastic-curve);
}

/* --- DYNAMIC INTERACTION STATES --- */

/* Hover state responses */
.srinath-asymmetric-faq-item:hover .srinath-asymmetric-item-question {
    color: var(--srinath-brand-accent);
    transform: translate3d(6px, 0, 0);
}

.srinath-asymmetric-faq-item:hover .srinath-asymmetric-item-number {
    color: var(--srinath-brand-accent);
    transform: translate3d(2px, 0, 0);
}

.srinath-asymmetric-faq-item:hover .srinath-asymmetric-toggle-icon {
    border-color: var(--srinath-brand-accent);
    color: var(--srinath-brand-accent);
    transform: scale(1.05);
}

/* Enhanced active deck state shifts */
.srinath-asymmetric-faq-item.srinath-asymmetric-faq-active {
    background-color: var(--srinath-bg-soft);
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 16px;
    border-bottom-color: transparent;
}

/* Dynamic line reveal under active query title paths */
.srinath-asymmetric-faq-item.srinath-asymmetric-faq-active .srinath-asymmetric-item-question::after {
    transform: scaleX(1);
}

.srinath-asymmetric-faq-item.srinath-asymmetric-faq-active .srinath-asymmetric-faq-trigger {
    padding-bottom: 20px;
}

.srinath-asymmetric-faq-item.srinath-asymmetric-faq-active .srinath-asymmetric-item-number {
    color: var(--srinath-brand-accent);
    font-weight: 800;
}

.srinath-asymmetric-faq-item.srinath-asymmetric-faq-active .srinath-asymmetric-item-question {
    color: var(--srinath-dark-solid);
    font-weight: 800;
    transform: none;
}

.srinath-asymmetric-faq-item.srinath-asymmetric-faq-active .srinath-asymmetric-toggle-icon {
    transform: rotate(135deg) scale(1);
    background-color: var(--srinath-brand-accent);
    border-color: var(--srinath-brand-accent);
    color: #FFFFFF;
}

/* --- EXPANDABLE TRANSITION CONTENT PANEL DECK --- */
.srinath-asymmetric-faq-content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.28, 1);
}

.srinath-asymmetric-content-inner {
    padding: 0 0 clamp(28px, 3.5vw, 40px) clamp(48px, 6vw, 80px);
    max-width: 860px;
}

.srinath-asymmetric-content-tag {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #718096;
    background-color: #FFFFFF;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: inline-block;
    margin-bottom: 14px;
}

.srinath-asymmetric-content-text {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: 1.8;
    color: var(--srinath-text-muted);
    margin: 0;
}

.srinath-asymmetric-content-text strong {
    color: var(--srinath-dark-solid);
    font-weight: 700;
}

/* --- ACCORDION LIST SCROLL ENTRY ENTRIES --- */
.srinath-asymmetric-faq-item {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
    will-change: transform, opacity;
    transition: transform 0.9s var(--srinath-elastic-curve), 
                opacity 0.9s ease, 
                background-color 0.4s ease,
                padding 0.4s var(--srinath-elastic-curve);
}

.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-faq-item:nth-child(1) { transition-delay: 0.35s; }
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-faq-item:nth-child(2) { transition-delay: 0.45s; }
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-faq-item:nth-child(3) { transition-delay: 0.55s; }
.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-faq-item:nth-child(4) { transition-delay: 0.65s; }

.srinath-asymmetric-faq-section.srinath-asymmetric-triggered .srinath-asymmetric-faq-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* --- PACKED CROSS-DEVICE SCREEN MODIFICATIONS --- */
@media (max-width: 767px) {
    .srinath-asymmetric-trigger-left {
        gap: 20px;
    }
    
    .srinath-asymmetric-content-inner {
        padding-left: 36px;
    }
    
    .srinath-asymmetric-faq-item.srinath-asymmetric-faq-active {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/***************************************plant automation*******************************************************/
.srinath-approach-matrix-section {
    width: 100%;
    padding: 100px 20px;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.srinath-approach-matrix-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: flex-start;
}

/* LEFT SIDE: FEATURE INTERFACE ELEMENTS */
.srinath-approach-intel-wrapper {
    display: flex;
    flex-direction: column;
}

.srinath-approach-main-title {
    font-size: 42px;
    font-weight: 700;
    color: #e32626;
    margin: 0 0 45px 0;
    letter-spacing: -0.5px;
}

.srinath-approach-feature-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
    column-gap: 40px;
}

.srinath-approach-grid-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.3s ease;
}

.srinath-approach-grid-item:hover {
    transform: translateX(6px);
}

.srinath-approach-bullet-square {
    display: block;
    width: 5px;
    height: 5px;
    background-color: #1a1a1a;
    margin-top: 9px;
    flex-shrink: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.srinath-approach-grid-item:hover .srinath-approach-bullet-square {
    background-color: #e32626;
    transform: rotate(45deg);
}

.srinath-approach-feature-text {
    font-size: 16px;
    font-weight: 500;
    color: #2b2b2b;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.srinath-approach-grid-item:hover .srinath-approach-feature-text {
    color: #e32626;
}

/* PROGRESS TRACKER COMPONENT */
.srinath-approach-tracker-frame {
    width: 100%;
    margin-bottom: 45px;
}

.srinath-approach-tracker-track {
    width: 280px;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.srinath-approach-tracker-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    background-color: #111111;
    border-radius: 2px;
    animation: srinathPulseWidth 3.5s ease-in-out infinite alternate;
}

/* RED BRANDED ACTION CTA BUTTON */
.srinath-approach-action-frame {
    display: flex;
}

.srinath-approach-btn-prime {
    display: inline-flex;
    align-items: center;
    background-color: #e32626;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 2px;
    gap: 14px;
    transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(227, 38, 38, 0.15);
}

.srinath-approach-btn-prime:hover {
    background-color: #111111;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 17, 17, 0.15);
}

.srinath-approach-btn-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.srinath-approach-btn-prime:hover .srinath-approach-btn-arrow {
    transform: translateX(5px);
}

/* RIGHT SIDE: EDITORIAL NARRATIVE COPY */
.srinath-approach-editorial-wrapper {
    border-left: 1px solid #e5e5e5;
    padding-left: 65px;
    margin-top: 10px;
}

.srinath-approach-editorial-subheading {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.45;
    color: #111111;
    margin: 0 0 25px 0;
}

.srinath-approach-prose {
    font-size: 16px;
    line-height: 1.75;
    color: #666666;
    margin: 0;
}

/* CSS ANIMATION PARAMETERS */
@keyframes srinathPulseWidth {
    0% {
        width: 15%;
        transform: translateX(0%);
    }
    100% {
        width: 45%;
        transform: translateX(120%);
    }
}

/* RESPONSIVE LAYOUT BREAKPOINTS */
@media (max-width: 991px) {
    .srinath-approach-matrix-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .srinath-approach-editorial-wrapper {
        border-left: none;
        border-top: 1px solid #e5e5e5;
        padding-left: 0;
        padding-top: 45px;
    }
}

@media (max-width: 575px) {
    .srinath-approach-matrix-section {
        padding: 60px 15px;
    }
    .srinath-approach-main-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    .srinath-approach-feature-grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .srinath-approach-editorial-subheading {
        font-size: 20px;
    }
}
/****************************8about us gallery section****************************************************/
 /* --- UNIQUE SCOPED GALLERY CSS --- */

    .gal-gallery-section {
        background-color: #F6F5ED;
        /* Premium light SEO aesthetic */
        padding: 100px 0;
        overflow: hidden;
    }

    .gal-container {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    /* Header Section Style */
    .gal-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .gal-subtitle {
        color: #E65757;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 700;
        display: inline-block;
        margin-bottom: 12px;
        font-family: sans-serif;
    }

    .gal-title {
        color: #1a1a1a;
        font-size: 3rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.5px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* WORD-BY-WORD ENTRANCE ANIMATION */
    .gal-word {
        display: inline-block;
        opacity: 0;
        transform: translateY(20px);
        animation: galWordFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    .gal-word:nth-child(1) {
        animation-delay: 0.1s;
    }

    .gal-word:nth-child(2) {
        animation-delay: 0.3s;
    }

    .gal-word:nth-child(3) {
        animation-delay: 0.5s;
    }

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

    /* Modern Bento Grid Mapping */
    .gal-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Grid Box Item Base Architecture */
    .gal-item {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        background-color: #e2e1d9;
        box-sizing: border-box;
        opacity: 0;
        transform: translateY(30px);
        animation: galGridFadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
            box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

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

    /* Balanced Card Grid Layout Constraints */
    .gal-item-square {
        grid-column: span 1;
        aspect-ratio: 1 / 1;
    }

    .gal-item-wide {
        grid-column: span 2;
        aspect-ratio: 21 / 10;
    }

    /* Inner Layout Frame Wrapper to safe-protect overflow scales */
    .gal-image-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .gal-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Dark Velvet Mask Overlay Layer for High Readability Text Contrast */
    .gal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 32px;
        box-sizing: border-box;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease,
            transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 2;
    }

    .gal-item-title {
        color: #ffffff;
        font-size: 22px;
        margin: 0 0 6px 0;
        font-weight: 600;
        font-family: sans-serif;
    }

    .gal-item-category {
        color: #d0d0d0;
        font-size: 14px;
        margin: 0;
        letter-spacing: 0.5px;
        font-family: sans-serif;
    }
  /* HOVER INTERACTION STATES */
    .gal-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(27, 26, 23, 0.12);
    }

    .gal-item:hover .gal-img {
        transform: scale(1.05);
    }

    .gal-item:hover .gal-overlay {
        opacity: 1;
        transform: translateY(0);
    }

    /* ==========================================================================
   COMPREHENSIVE RESPONSIVE BREAKPOINTS (NO OVERLAPS)
   ========================================================================== */

    /* --- 1. SMALL MOBILE DEVICES (Max-width: 480px) --- */
    @media screen and (max-width: 480px) {
        .gal-gallery-section {
            padding: 60px 0;
            /* Tighter padding for small screens */
        }

        .gal-title {
            font-size: 1.6rem;
            /* Compact header size */
            gap: 8px;
        }

        .gal-grid {
            grid-template-columns: 1fr;
            /* Pure linear stack */
            gap: 16px;
        }

        .gal-item-square,
        .gal-item-wide {
            grid-column: span 1 !important;
            aspect-ratio: 1 / 1;
            /* Force all shapes into uniform squares for single column feed consistency */
        }

        .gal-overlay {
            padding: 16px;
            /* Save text workspace territory */
        }

        .gal-item-title {
            font-size: 18px;
        }
    }

    /* --- 2. LARGE PHONES / MINI TABLETS (481px to 767px) --- */
    @media screen and (min-width: 481px) and (max-width: 767px) {
        .gal-gallery-section {
            padding: 80px 0;
        }

        .gal-title {
            font-size: 2rem;
        }

        .gal-grid {
            grid-template-columns: repeat(2, 1fr);
            /* 2 Column split matrix */
            gap: 16px;
        }

        /* Convert row flows to balanced landscape modules on larger phones */
        .gal-item-square,
        .gal-item-wide {
            grid-column: span 1 !important;
            aspect-ratio: 4 / 3;
        }
    }

    /* --- 3. DEDICATED TABLETS / IPADS (768px to 1024px) --- */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .gal-container {
            padding: 0 32px;
        }

        .gal-title {
            font-size: 2.5rem;
        }

        .gal-grid {
            grid-template-columns: repeat(2, 1fr);
            /* Maintains 2-column workspace balance */
            gap: 20px;
        }

        /* Distribute sizes elegantly so wide items fill rows where needed */
        .gal-item-square {
            grid-column: span 1;
            aspect-ratio: 1 / 1;
        }

        .gal-item-wide {
            grid-column: span 2;
            /* Spans across both columns beautifully */
            aspect-ratio: 16 / 7;
        }

        .gal-overlay {
            padding: 24px;
        }
    }

    /* --- 4. STANDARD LAPTOPS / SMALL DESKTOPS (1025px to 1200px) --- */
    @media screen and (min-width: 1025px) and (max-width: 1200px) {
        .gal-container {
            max-width: 960px;
            /* Safe container nesting */
        }

        .gal-title {
            font-size: 2.8rem;
        }

        .gal-grid {
            grid-template-columns: repeat(3, 1fr);
            /* Switches back safely to full 3-column layout */
            gap: 20px;
        }

        .gal-item-square {
            aspect-ratio: 1 / 1;
        }

        .gal-item-wide {
            aspect-ratio: 21 / 10;
        }
    }

    /* --- 5. HIGH-RESOLUTION LARGE DESKTOPS (1201px and Up) --- */
    @media screen and (min-width: 1201px) {

        /* Inherits your base desktop layout automatically */
        .gal-container {
            max-width: 1240px;
        }
    }
/*****************************services first section**********************************/
 /* --- SHRINATH PLANT PROFILE SECTION SCRAMBLE LOCK --- */

.ind-profile-section {
    background-color: #ffffff; /* Explicitly forced clean white canvas background */
    padding: 120px 0;
   
    overflow: hidden;
}

.ind-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Master Asymmetric Structure Framework Layout mapping */
.ind-main-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Left side slightly wider for comfortable copy distribution */
    gap: 64px;
    align-items: start;
}

/* --- LEFT PANEL ELEMENTS --- */
.ind-section-header {
    margin-bottom: 36px;
}

.ind-pretitle {
    color: #E65757; /* Consistent primary branding accent */
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}

.ind-main-title {
    color: #0f172a; /* Slate 900 for modern corporate tech focus */
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -1px;
}

/* Vision Segment Board Element Design */
.ind-vision-card {
    background-color: #f8fafc;
    border-left: 4px solid #E65757;
    border-radius: 4px 16px 16px 4px;
    padding: 24px;
    display: flex;
    gap: 20px;
    margin-bottom: 44px;
    opacity: 0;
    transform: translateY(25px);
    animation: indLoadSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.2s;
}

.ind-vision-icon {
    width: 44px;
    height: 44px;
    color: #E65757;
    flex-shrink: 0;
}

.ind-vision-text h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.ind-vision-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

/* Core Capabilities Interactive Custom List System */
.ind-strengths-wrapper {
    opacity: 0;
    transform: translateY(25px);
    animation: indLoadSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s;
}

.ind-list-heading {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.ind-strengths-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ind-strengths-list li {
    display: flex;
    align-items: start;
    gap: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: #334155;
}

.ind-list-bullet {
    width: 8px;
    height: 8px;
    background-color: #E65757;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ind-strengths-list li:hover .ind-list-bullet {
    transform: scale(1.5);
}

.ind-strengths-list strong {
    color: #0f172a;
    font-weight: 600;
}

/* --- RIGHT PANEL ELEMENTS (THE CUSTOMIZATION DISPLAY) --- */
.ind-right-panel {
    opacity: 0;
    transform: translateY(25px);
    animation: indLoadSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.6s;
}

.ind-custom-showcase {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ind-custom-showcase:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
}

/* Image Container Area with Soft Auto-Float Animation */
.ind-image-frame {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background-color: #0f172a;
}

.ind-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ind-custom-showcase:hover .ind-showcase-img {
    transform: scale(1.04) rotate(0.5deg);
}

.ind-image-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: #0f172a;
    color: #ffffff;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Custom Block Text Container Base styling */
.ind-custom-body {
    padding: 40px;
}

.ind-custom-body h3 {
    margin: 0 0 16px 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.ind-custom-body p {
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
}

.ind-custom-body p:last-of-type {
    margin-bottom: 32px;
}

/* Badge Rows System for Search Crawlers Visibility */
.ind-badge-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ind-mini-badge {
    background-color: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: monospace; /* Gives engineered blueprints style character */
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes indLoadSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE ENGINE (LAPTOP, DESKTOP, TAB, MOBILE)
   ========================================================================== */

/* --- 1. LARGE DESKTOPS & HIGH-RES SCREENS (1281px and up) --- */
@media screen and (min-width: 1281px) {
    .ind-container {
        max-width: 1240px;
    }
    .ind-main-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 64px;
    }
}

/* --- 2. STANDARD LAPTOPS & WORKSTATIONS (1025px to 1280px) --- */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .ind-profile-section {
        padding: 100px 0; /* Slightly tighter top/bottom breathing room */
    }
    .ind-container {
        max-width: 1140px;
        padding: 0 32px;
    }
    .ind-main-grid {
        grid-template-columns: 1.05fr 0.95fr; /* Soften balance for laptop screens */
        gap: 44px; /* Pull elements together so no awkward empty gaps form */
    }
    .ind-main-title {
        font-size: 2.5rem;
    }
    .ind-custom-body {
        padding: 32px; /* Optimize interior padding spacing */
    }
}

/* --- 3. TABLETS & IPADS - PORTRAIT/LANDSCAPE (768px to 1024px) --- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .ind-profile-section {
        padding: 80px 0;
    }
    .ind-container {
        padding: 0 40px;
    }
    .ind-main-grid {
        grid-template-columns: 1fr; /* Stack panels vertically to support structural elements safely */
        gap: 48px;
    }
    .ind-main-title {
        font-size: 2.4rem;
    }
    /* Turn the right-side custom card layout into an elegant horizontal showcase for tablet proportions */
    .ind-custom-showcase {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    .ind-image-frame {
        height: 100%; /* Auto stretches block height matching the sibling description grid */
        min-height: 340px;
    }
    .ind-custom-body {
        padding: 36px;
    }
}

/* --- 4. LARGE PHONES / MINI TABLETS (481px to 767px) --- */
@media screen and (min-width: 481px) and (max-width: 767px) {
    .ind-profile-section {
        padding: 70px 0;
    }
    .ind-container {
        padding: 0 24px;
    }
    .ind-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ind-main-title {
        font-size: 2rem;
    }
    .ind-image-frame {
        height: 280px;
    }
    .ind-custom-body {
        padding: 30px;
    }
}

/* --- 5. SMALL MOBILE DEVICES (Max-width: 480px) --- */
@media screen and (max-width: 480px) {
    .ind-profile-section {
        padding: 50px 0; /* Compact design setup optimized for mobile viewport speed scaling */
    }
    .ind-container {
        padding: 0 20px;
    }
    .ind-main-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .ind-main-title {
        font-size: 1.75rem;
        letter-spacing: -0.5px;
    }
    .ind-vision-card {
        flex-direction: column; /* Icon stacks on top of the copy */
        gap: 12px;
        padding: 20px;
    }
    .ind-vision-icon {
        width: 36px;
        height: 36px;
    }
    .ind-image-frame {
        height: 220px;
    }
    .ind-custom-body {
        padding: 20px;
    }
    .ind-badge-row {
        gap: 8px; /* Snugger layout wrap boundaries */
    }
    .ind-mini-badge {
        font-size: 11px;
        padding: 5px 10px;
    }
}
/***********************************servic page two*******************************************/
/* --- SHRINATH DESIGN CUSTOMIZATION COMPONENT ENGINE --- */

.dsn-custom-section {
    background-color: #F6F5ED; /* Seamless execution on target organic cream canvas */
    padding: 120px 0;
    
    overflow: hidden;
}

.dsn-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Primary Split Screen Core Framework Grid */
.dsn-split-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr; /* Left visual column balanced cleanly with right content workspace */
    gap: 80px;
    align-items: center;
}

/* --- LEFT VISUAL MODULE FRAMEWORK --- */
.dsn-left-visual {
    position: relative;
    opacity: 0;
    transform: translateX(-40px);
    animation: dsnFadeInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.2s;
}

.dsn-image-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(27, 26, 23, 0.12);
}

.dsn-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.dsn-image-wrapper:hover .dsn-featured-img {
    transform: scale(1.04);
}

/* Engineering Micro Badge overlay asset */
.dsn-floating-card {
    position: absolute;
    bottom: 32px;
    right: 32px;
    background-color: #0f172a;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: dsnFloat 4s ease-in-out infinite;
}

.dsn-stat-num {
    color: #E65757; /* Core brand aesthetic match accent color */
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.dsn-stat-lbl {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- RIGHT SIDE PARAGRAPH CONTENT ELEMENT BLUEPRINTS --- */
.dsn-right-content {
    opacity: 0;
    transform: translateX(40px);
    animation: dsnFadeInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s;
}

.dsn-meta-tag {
    color: #E65757;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 12px;
}

.dsn-section-title {
    color: #0f172a;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 28px 0;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.dsn-paragraph-group {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 36px;
}

.dsn-lead-text {
    font-size: 17px;
    line-height: 1.6;
    color: #1e293b;
    font-weight: 600;
}

.dsn-body-text {
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
}

/* Performance Feature Metrics Spec Grid */
.dsn-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.dsn-spec-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dsn-spec-dot {
    width: 6px;
    height: 6px;
    background-color: #E65757;
    border-radius: 50%;
    flex-shrink: 0;
}

.dsn-spec-item span {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* --- ANIMATION ENGINE KEYFRAMES --- */
@keyframes dsnFadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dsnFadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dsnFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE LAYOUT MATRIX
   ========================================================================== */

/* --- LAPTOP ECO ENGINE VIEWPORT (1025px to 1280px) --- */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .dsn-custom-section {
        padding: 100px 0;
    }
    .dsn-split-grid {
        gap: 50px;
    }
    .dsn-section-title {
        font-size: 2.5rem;
    }
    .dsn-image-wrapper {
        height: 460px;
    }
}

/* --- TABLETS VIEWPORT MATRIX (768px to 1024px) --- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .dsn-custom-section {
        padding: 80px 0;
    }
    .dsn-split-grid {
        grid-template-columns: 1fr; /* Safe stacked configuration fallback */
        gap: 56px;
    }
    .dsn-image-wrapper {
        height: 440px;
    }
    .dsn-section-title {
        font-size: 2.4rem;
    }
}

/* --- PHONES / SMALL CONSOLES VIEWPORT (Max-width: 767px) --- */
@media screen and (max-width: 767px) {
    .dsn-custom-section {
        padding: 60px 0;
    }
    .dsn-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .dsn-image-wrapper {
        height: 300px;
        border-radius: 20px;
    }
    .dsn-floating-card {
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
    }
    .dsn-stat-num {
        font-size: 22px;
    }
    .dsn-section-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    .dsn-spec-grid {
        grid-template-columns: 1fr; /* Stack check points for immediate smartphone scanning reads */
        gap: 12px;
    }
    .dsn-lead-text {
        font-size: 15px;
    }
}
/*******************************************service 3rd section*******************************************************/
/* --- SHRINATH MINIMAL CONSULTATION SYSTEM --- */

.smp-consult-section {
    background-color: #ffffff; /* Explicitly forced white backdrop */
    padding: 120px 0;
  
    overflow: hidden;
}

.smp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Open, clean workspace grid layout mapping */
.smp-workspace-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 96px; /* High spacing for a spacious architectural layout look */
    align-items: center;
}

/* --- LEFT SIDE CONTENT ELEMENTS --- */
.smp-text-block {
    opacity: 0;
    transform: translateY(20px);
    animation: smpSimpleFadeUp 0.7s ease-out forwards;
}

.smp-meta-label {
    color: #E65757; /* Core Shrinath brand green highlight */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
}

.smp-headline {
    color: #0f172a;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 24px 0;
    letter-spacing: -1px;
}

.smp-description {
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 44px 0;
}

/* Borderless Architectural Timeline List Layout */
.smp-timeline {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.smp-time-item {
    display: flex;
    gap: 24px;
    align-items: start;
}

.smp-item-num {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #E65757;
    background-color: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    margin-top: 4px;
}

.smp-item-body h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.3s ease;
}

.smp-time-item:hover h3 {
    color: #E65757; /* Interactive color transition on text hover */
}

.smp-item-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #64748b;
}

/* --- RIGHT SIDE PILL GRAPHIC FRAMEWORK --- */
.smp-image-block {
    opacity: 0;
    transform: scale(0.97) translateX(20px);
    animation: smpGraphicReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.2s;
}

/* Unique structural vertical pill mask framework */
.smp-pill-mask {
    position: relative;
    width: 100%;
    height: 560px;
    border-radius: 200px 200px 32px 32px; /* Curves top dynamically while maintaining flat baseline anchor */
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.1);
}

.smp-src-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.smp-pill-mask:hover .smp-src-img {
    transform: scale(1.05);
}

.smp-floating-tag {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 40px;
    white-space: nowrap;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- SMOOTH CSS ANIMATIONS --- */
@keyframes smpSimpleFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes smpGraphicReveal {
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

/* ==========================================================================
   MINIMAL RESPONSIVE BREAKPOINT GRID ENGINE
   ========================================================================== */

/* --- LAPTOP SYSTEMS (1025px to 1280px) --- */
@media screen and (max-width: 1280px) {
    .smp-workspace-grid {
        gap: 56px;
    }
    .smp-headline {
        font-size: 2.4rem;
    }
    .smp-pill-mask {
        height: 480px;
    }
}

/* --- TABLETS PORTRAIT/LANDSCAPE (768px to 1024px) --- */
@media screen and (max-width: 1024px) {
    .smp-consult-section {
        padding: 80px 0;
    }
    .smp-workspace-grid {
        grid-template-columns: 1fr; /* Drop asymmetric grid splits for stack safety */
        gap: 64px;
    }
    .smp-image-block {
        max-width: 440px;
        margin: 0 auto; /* Beautifully centers modern pill shape graphic on tablets */
    }
    .smp-pill-mask {
        height: 500px;
    }
}

/* --- MOBILES & HANDSETS (Max-width: 767px) --- */
@media screen and (max-width: 767px) {
    .smp-consult-section {
        padding: 60px 0;
    }
    .smp-workspace-grid {
        gap: 44px;
    }
    .smp-headline {
        font-size: 1.85rem;
        margin-bottom: 16px;
    }
    .smp-description {
        font-size: 15px;
        margin-bottom: 32px;
    }
    .smp-timeline {
        gap: 24px;
    }
    .smp-time-item {
        gap: 16px;
    }
    .smp-item-body h3 {
        font-size: 16px;
    }
    .smp-item-body p {
        font-size: 13.5px;
    }
    .smp-pill-mask {
        height: 380px;
        border-radius: 140px 140px 24px 24px; /* Scaled down corner radius proportions for phone viewports */
    }
    .smp-floating-tag {
        bottom: 24px;
        padding: 8px 16px;
        font-size: 11px;
    }
}

/**********************************************4 services********************************************************/
/* --- SHRINATH FACTORY LAYOUT CLEAN STRIP COMPONENT --- */

  /* ==========================================================================
   1. Base Core Canvas Framework (Mobile First Layout Architecture)
   ========================================================================== */
.lay-scrollover-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #0c0f0d;
  overflow: hidden;
  padding: 60px 0;
}

/* Fixed Multi-Layer Viewport Canvas Image Engine */
.lay-scroll-bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://demo.acculermedia.com/shrinath_fabrications/images/services/section_4.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* Default mobile view scroll state */
  z-index: 1;
}

/* Atmospheric Full-Canvas Darkness Matte to Ensure Crisp White Typography Visibility */
.lay-scroll-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 15, 13, 0.82); /* Balanced transparency across the whole viewport frame */
  z-index: 2;
}

/* ==========================================================================
   2. Full-Width Container Layout Framework
   ========================================================================== */
.lay-fluid-container {
  position: relative;
  width: 100%;
  max-width: 1000px; /* Restricts the content line length slightly so it doesn't look stretched on large displays */
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  z-index: 3;
}

.lay-fluid-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Reconfigured Content Track spans 100% of the layout container */
.lay-fluid-content-col-full {
  width: 100%;
  box-sizing: border-box;
  text-align: center; /* Aligns typography components down the center axis */
}

/* ==========================================================================
   3. Fluid Typography & Content Polish
   ========================================================================== */
.lay-fluid-header {
  margin-bottom: 24px;
}

.lay-fluid-badge {
  display: inline-block;
  color: #00b05d; /* Brand Industrial Green */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.lay-fluid-title {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.lay-fluid-lead-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #cbd5e1; /* Soft slate white text color */
  margin: 0 auto 40px auto;
  max-width: 800px; /* Centers and cleans up text paragraph blocks on wider viewports */
}

/* Processing Sequence Array Structure */
.lay-fluid-zones-list {
  display: flex;
  flex-direction: column;
}

.lay-fluid-zone-card {
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Clean horizontal separator lines */
  padding-top: 24px;
  padding-bottom: 24px;
  text-align: left; /* Restores traditional left-alignment inside individual description boxes */
}

.lay-fluid-zone-card:last-child {
  padding-bottom: 0;
}

.lay-fluid-zone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Structural Layout Text Indicators */
.lay-fluid-indicator {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(230, 87, 87, 0.15);
  color: #e65757; /* Accent red indicator match rules */
}

.lay-fluid-zone-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.lay-fluid-zone-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #94a3b8; /* Balanced gray copy layout */
}

/* ==========================================================================
   4. Scaled Desktop Breakpoints (Enables Background Parallax Matrix)
   ========================================================================== */

/* --- TABLETS & LAPTOPS (768px and up) --- */
@media screen and (min-width: 768px) {
  .lay-fluid-container {
    padding-right: 40px;
    padding-left: 40px;
  }

  .lay-fluid-title {
    font-size: 42px;
  }

  .lay-fluid-lead-text {
    font-size: 16px;
  }
  
  /* Indents the subtext description beautifully underneath the headline badge element */
  .lay-fluid-zone-desc {
    padding-left: 42px;
  }
}

/* --- DESKTOPS, WIDESCREENS & HIGH-RES WORKSTATIONS (1024px and up) --- */
@media screen and (min-width: 1024px) {
  .lay-scrollover-section {
    padding: 120px 0;
  }

  /* Locks the background canvas image safely inline for real-time foreground scrollover flow */
  .lay-scroll-bg-canvas {
    background-attachment: fixed;
    background-position: center center;
  }

  .lay-fluid-title {
    font-size: 48px;
  }
}
/****************************service 5************************************************************/
/* --- SHRINATH INDUSTRIAL MANUFACTURING COMPONENT MATRIX --- */

.mfg-production-section {
    background-color: #ffffff; /* Explicitly forced white canvas background */
    padding: 120px 0;
   
    position: relative;
}

.mfg-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Parallax Overlay Dual Columns Controller Base Mapping */
.mfg-parallax-matrix {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Text heavy left side, sticky graphic framework right side */
    gap: 80px;
    align-items: start;
}

/* --- LEFT SIDE: TEXT NARRATIVE LAYOUT --- */
.mfg-text-column {
    opacity: 0;
    transform: translateY(30px);
    animation: mfgGlanceUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}

.mfg-meta-anchor {
    color: #E65757; /* Core brand green signature accent */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
}

.mfg-section-title {
    color: #0f172a;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 24px 0;
    letter-spacing: -1px;
}

.mfg-lead-desc {
    font-size: 16px;
    line-height: 1.65;
    color: #1e293b;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.mfg-body-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 40px 0;
}

/* Simplified Minimal Grid Lists Pack */
.mfg-capabilities-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 44px;
}

.mfg-cap-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mfg-cap-pill:hover {
    background-color: #ffffff;
    border-color: #E65757;
}

.mfg-cap-dot {
    width: 6px;
    height: 6px;
    background-color: #E65757;
    border-radius: 50%;
    flex-shrink: 0;
}

.mfg-cap-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.mfg-footer-statement {
    font-size: 14px;
    color: #64748b;
    border-left: 2px solid #E65757;
    padding-left: 14px;
    font-style: italic;
}

/* --- RIGHT SIDE: PARALLAX STICKY OVERLAY SCROLL CONTROLLER --- */
.mfg-image-column {
    height: 100%;
}

.mfg-sticky-viewport {
    position: sticky;
    top: 60px; /* Locks frame securely in vertical position during user page scroll */
    z-index: 10;
}

.mfg-image-overlay-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08);
}

.mfg-parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pure CSS Hover Overlay Tint Shift Effect */
.mfg-scrolling-tint-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.4) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mfg-image-overlay-wrapper:hover .mfg-parallax-img {
    transform: scale(1.05); /* Interactive zoom-in overlay response trigger */
}

/* Monolithic Overlay Info Box */
.mfg-floating-spec-tag {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    padding: 20px 24px;
    border-radius: 12px;
    border-left: 4px solid #E65757;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mfg-image-overlay-wrapper:hover .mfg-floating-spec-tag {
    transform: translateY(-4px); /* Shifts overlay up slightly when hovering over the frame */
}

.mfg-floating-spec-tag h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.mfg-floating-spec-tag p {
    margin: 0;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.4;
}

/* --- CSS ANIMATION ENTRY --- */
@keyframes mfgGlanceUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FLUID RESPONSIVE SYSTEM
   ========================================================================== */

/* --- LAPTOPS & MID-RES MONITOR VIEWPORTS (1025px to 1280px) --- */
@media screen and (max-width: 1280px) {
    .mfg-parallax-matrix {
        gap: 48px;
    }
    .mfg-section-title {
        font-size: 2.3rem;
    }
    .mfg-image-overlay-wrapper {
        height: 460px;
    }
}

/* --- TABLETS & WORKPAD PORTRAIT BREAKPOINTS (768px to 1024px) --- */
@media screen and (max-width: 1024px) {
    .mfg-production-section {
        padding: 80px 0;
    }
    .mfg-parallax-matrix {
        grid-template-columns: 1fr; /* Relinquish multi-column tracking, stack components naturally */
        gap: 48px;
    }
    .mfg-sticky-viewport {
        position: relative; /* Release sticky constraints for seamless linear page flow on tablets */
        top: 0;
    }
    .mfg-image-overlay-wrapper {
        height: 400px;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* --- MOBILE PHONES & SMARTPHONES (Max-width: 767px) --- */
@media screen and (max-width: 767px) {
    .mfg-production-section {
        padding: 60px 0;
    }
    .mfg-section-title {
        font-size: 1.85rem;
        margin-bottom: 16px;
    }
    .mfg-lead-desc {
        font-size: 15px;
    }
    .mfg-body-desc {
        font-size: 14px;
        margin-bottom: 28px;
    }
    .mfg-capabilities-box {
        grid-template-columns: 1fr; /* Collapses capabilities array down into a comfortable 1-column layout */
        gap: 12px;
    }
    .mfg-cap-pill {
        padding: 10px 14px;
    }
    .mfg-image-overlay-wrapper {
        height: 300px;
    }
    .mfg-floating-spec-tag {
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 16px;
    }
}
/*******************************************service no 6*****************************************/
/* --- SHRINATH INDUSTRIAL PLANT AUTOMATION MONITOR COMPONENT --- */

.aut-systems-section {
    background-color: #F6F5ED; /* Target organic cream workspace backdrop */
    padding: 120px 0;
   
    position: relative;
}

.aut-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Master Grid split mapping image cleanly on Left, text narrative on Right */
.aut-automation-matrix {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

/* --- LEFT SIDE: PARALLAX STICKY TECH EYEWAY FRAMEWORK --- */
.aut-image-column {
    height: 100%;
}

.aut-sticky-viewport {
    position: sticky;
    top: 80px; /* Securely fixes mechanical window in view during user page scroll tracking */
    z-index: 10;
}

.aut-image-overlay-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #0f172a;
    box-shadow: 0 25px 50px -12px rgba(27, 26, 23, 0.15);
}

.aut-scroll-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    /*filter: contrast(105%) brightness(95%);*/
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.aut-image-overlay-wrapper:hover .aut-scroll-img {
    transform: scale(1.07); /* Smooth overlay zoom factor adjustment on hover */
}

/* --- MANDATORY SCROLL / INTERACTIVE OVERLAY EFFECTS --- */
/* Automated glowing horizontal scanner line overlay mechanism */
.aut-matrix-scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(0, 176, 93, 0) 0%, #00b05d 50%, rgba(0, 176, 93, 0) 100%);
    box-shadow: 0 0 12px #E65757;
    pointer-events: none;
    animation: autRadarScan 4s linear infinite;
}

/* HUD Architectural Layout Target Corners */
.aut-hud-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 176, 93, 0.4);
    pointer-events: none;
    z-index: 15;
}
.aut-top-left { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.aut-bottom-right { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }

/* Micro Floating Overlay Diagnostic Hub Asset */
.aut-floating-status-card {
    position: absolute;
    bottom: 32px;
    left: 32px;
    background-color: #0f172a;
    padding: 12px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.aut-floating-status-card span {
    color: #f1f5f9;
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.aut-pulse-indicator {
    width: 8px;
    height: 8px;
    background-color: #E65757;
    border-radius: 50%;
    position: relative;
}

.aut-pulse-indicator::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #E65757;
    border-radius: 50%;
    animation: autPing 1.5s ease-in-out infinite;
}

/* --- RIGHT SIDE: DIGITAL CONTROL TEXT ZONE --- */
.aut-text-column {
    opacity: 0;
    transform: translateY(30px);
    animation: autGlanceIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

.aut-meta-label {
    color: #E65757;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
}

.aut-section-title {
    color: #0f172a;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 24px 0;
    letter-spacing: -1px;
}

.aut-lead-desc {
    font-size: 16px;
    line-height: 1.65;
    color: #1e293b;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.aut-body-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 44px 0;
}

/* Minimal Electronic Dashboard Stack System */
.aut-dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aut-dash-cell {
    background-color: rgba(255, 255, 255, 0.65);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.aut-dash-cell:hover {
    background-color: #ffffff;
    border-color: #E65757;
}

.aut-cell-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.aut-cell-id {
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.aut-dash-cell h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.aut-dash-cell p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
}

/* --- LIGHT PURE CSS KEYFRAMES --- */
@keyframes autGlanceIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes autRadarScan {
    0% { top: 0%; opacity: 0.3; }
    50% { top: 100%; opacity: 1; }
    100% { top: 0%; opacity: 0.3; }
}

@keyframes autPing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* ==========================================================================
   FLUID MONITOR RESPONSIBILITY MATRIX
   ========================================================================== */

/* --- LAPTOPS VIEWPADS (1025px to 1280px) --- */
@media screen and (max-width: 1280px) {
    .aut-automation-matrix {
        gap: 48px;
    }
    .aut-section-title {
        font-size: 2.3rem;
    }
    .aut-image-overlay-wrapper {
        height: 460px;
    }
}

/* --- PORTRAIT/LANDSCAPE TABLETS (768px to 1024px) --- */
@media screen and (max-width: 1024px) {
    .aut-systems-section {
        padding: 80px 0;
    }
    .aut-automation-matrix {
        grid-template-columns: 1fr; /* Drop tracking, slide seamlessly down into stacks */
        gap: 48px;
    }
    .aut-sticky-viewport {
        position: relative; /* Release sticky layout properties for linear device feeds */
        top: 0;
    }
    .aut-image-overlay-wrapper {
        height: 400px;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* --- SMARTPHONES & TOUCH SCREENS (Max-width: 767px) --- */
@media screen and (max-width: 767px) {
    .aut-systems-section {
        padding: 60px 0;
    }
    .aut-section-title {
        font-size: 1.85rem;
        margin-bottom: 16px;
    }
    .aut-lead-desc {
        font-size: 15px;
    }
    .aut-body-desc {
        font-size: 14px;
        margin-bottom: 28px;
    }
    .aut-image-overlay-wrapper {
        height: 280px;
    }
    .aut-hud-corner {
        display: none; /* Strip decorative assets on mobile scales to maximize rendering canvas */
    }
    .aut-floating-status-card {
        bottom: 20px;
        left: 20px;
        padding: 8px 14px;
    }
    .aut-dash-cell {
        padding: 16px;
    }
}
/****************************************8service no 7*********************************************/
/* --- SHRINATH FIELD INSTALLATION & COMMISSIONING ENGINE --- */

.ins-setup-section {
    background-color: #ffffff; /* Explicitly forced clean white background canvas */
    padding: 120px 0;
   
    position: relative;
}

.ins-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Master Asymmetric Split Setup Grid (Text Left / Graphic Right) */
.ins-split-layout {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 84px;
    align-items: start;
}

/* --- LEFT PANEL ELEMENTS --- */
.ins-text-block {
    opacity: 0;
    transform: translateY(25px);
    animation: insSlideUpEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ins-meta-header {
    color: #E65757; /* Core brand corporate green identity accent */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
}

.ins-main-headline {
    color: #0f172a;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 24px 0;
    letter-spacing: -1px;
}

.ins-intro-text {
    font-size: 16px;
    line-height: 1.65;
    color: #1e293b;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.ins-body-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 44px 0;
}

/* Minimal Architectural Matrix Lists Row Configuration */
.ins-matrix-stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ins-matrix-row {
    display: flex;
    gap: 20px;
    align-items: start;
    transition: transform 0.3s ease;
}

.ins-matrix-row:hover {
    transform: translateX(4px); /* Interactive row nudge movement on text element focus */
}

.ins-row-index {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #E65757;
    margin-top: 2px;
}

.ins-row-copy h4 {
    margin: 0 0 4px 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.3s ease;
}

.ins-matrix-row:hover h4 {
    color: #E65757;
}

.ins-row-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
} underside matrix lines */

/* --- RIGHT PANEL ELEMENTS (STICKY SLIDING OVERLAY FRAMEWORK) --- */
.ins-graphic-block {
    height: 100%;
}

.ins-sticky-anchor {
    position: sticky;
    top: 80px; /* Locks graphic frame securely inside view workspace during user page scrolls */
    z-index: 10;
}

.ins-viewport-frame {
    position: relative;
    width: 100%;
    height: 520px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0f172a;
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.12);
}

.ins-field-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.05);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- MANDATORY CSS HOVER / SCROLL OVERLAY EFFECT --- */
/* Sliding tint sheet layer that masks the workspace image and retreats on container focus */
.ins-sliding-mask-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(0, 176, 93, 0.3) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On section container viewport hover, image zooms in slightly and the mask slides away cleanly */
.ins-viewport-frame:hover .ins-field-img {
    transform: scale(1);
}

.ins-viewport-frame:hover .ins-sliding-mask-overlay {
    transform: translateX(101%); /* Flips tint cover entirely out of frame revealing high-res detail image */
}

/* Premium Information Overlay Badge Asset */
.ins-floating-metric-badge {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    background-color: #0f172a;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ins-badge-metric {
    color: #E65757;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ins-floating-metric-badge p {
    margin: 0;
    color: #f1f5f9;
    font-size: 13.5px;
    font-weight: 500;
}

/* --- LIGHT INTRO KEYFRAMES --- */
@keyframes insSlideUpEntrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FLUID MONITOR RESPONSIVE CONFIGURATION MATRIX
   ========================================================================== */

/* --- LAPTOP SYSTEMS (1025px to 1280px) --- */
@media screen and (max-width: 1280px) {
    .ins-split-layout {
        gap: 48px;
    }
    .ins-main-headline {
        font-size: 2.3rem;
    }
    .ins-viewport-frame {
        height: 460px;
    }
}

/* --- TABLETS PORTRAIT & LANDSCAPE SCALES (768px to 1024px) --- */
@media screen and (max-width: 1024px) {
    .ins-setup-section {
        padding: 80px 0;
    }
    .ins-split-layout {
        grid-template-columns: 1fr; /* Retract multi-column splits, drop panels down linearly */
        gap: 52px;
    }
    .ins-sticky-anchor {
        position: relative; /* Unlock vertical scroll anchoring for fluid medium device page movement */
        top: 0;
    }
    .ins-viewport-frame {
        height: 400px;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* --- PHONES & COMPACT MOBILE SMARTPHONES (Max-width: 767px) --- */
@media screen and (max-width: 767px) {
    .ins-setup-section {
        padding: 60px 0;
    }
    .ins-main-headline {
        font-size: 1.85rem;
        margin-bottom: 16px;
    }
    .ins-intro-text {
        font-size: 15px;
    }
    .ins-body-text {
        font-size: 14px;
        margin-bottom: 32px;
    }
    .ins-matrix-stack {
        gap: 20px;
    }
    .ins-matrix-row {
        gap: 14px;
    }
    .ins-row-copy h4 {
        font-size: 15px;
    }
    .ins-row-copy p {
        font-size: 13px;
    }
    .ins-viewport-frame {
        height: 280px;
    }
    .ins-floating-metric-badge {
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 14px;
    }
}

/***********************************************service 8*******************************************************/
/* Section Wrapper Base Layout */
.snf-scroll-wrapper {
  background-color: #F6F5ED;
  padding: 40px 16px;
  width: 100%;
  box-sizing: border-box;
  
}

.snf-support-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ------------------------------------------------------------- */
/* Left Column - Sticky Viewport Pinning                         */
/* ------------------------------------------------------------- */
.snf-support-visual-pane {
  width: 100%;
  position: relative;
}

.snf-image-sticky-box {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.snf-display-img {
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

/* Interactive Floating Overlay Box */
.snf-visual-overlay-box {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #1c352d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.snf-overlay-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1c352d;
  margin-bottom: 4px;
}

.snf-overlay-text {
  font-size: 12px;
  color: #4a534f;
  line-height: 1.4;
  margin: 0;
}

/* ------------------------------------------------------------- */
/* Right Column - Scrolling Content Block                         */
/* ------------------------------------------------------------- */
.snf-support-content-pane {
  width: 100%;
  z-index: 2;
}

.snf-content-scroll-card {
  background: transparent;
  padding: 10px 0;
}

.snf-support-header {
  margin-bottom: 20px;
}

.snf-pre-heading {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #6e7a74;
  margin-bottom: 4px;
}

.snf-main-heading {
  font-size: 26px;
  font-weight: 700;
  color: #121c17;
  margin: 0 0 10px 0;
}

.snf-heading-divider {
  width: 50px;
  height: 3px;
  background-color: #1c352d;
}

.snf-intro-paragraph {
  font-size: 14.5px;
  color: #424c47;
  line-height: 1.55;
  margin: 0 0 14px 0;
}

.snf-emphasis-text {
  font-weight: 500;
  color: #23332b;
}

.snf-list-title {
  font-size: 15px;
  font-weight: 600;
  color: #121c17;
  margin: 16px 0 12px 0;
}

.snf-services-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.snf-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.snf-item-icon {
  color: #1c352d;
  font-weight: bold;
  font-size: 14px;
}

.snf-item-text {
  font-size: 14px;
  color: #38423d;
  line-height: 1.4;
}

.snf-support-footer {
  border-top: 1px solid rgba(28, 53, 45, 0.1);
  padding-top: 14px;
}

.snf-footer-note {
  font-size: 13.5px;
  font-weight: 600;
  font-style: italic;
  color: #1c352d;
  margin: 0;
}

/* ------------------------------------------------------------- */
/* Laptop, Desktop, and Tablet Breakpoints (Scroll-Over Effect)   */
/* ------------------------------------------------------------- */

@media (min-width: 768px) {
  .snf-scroll-wrapper {
    padding: 60px 32px;
  }
  .snf-main-heading { font-size: 32px; }
  .snf-services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
  }
}

/* Active Scroll-Over Engine (Laptops/Desktops 1024px+) */
@media (min-width: 1024px) {
  .snf-scroll-wrapper {
    padding: 100px 40px 140px 40px; /* Provides extra scrolling runway room */
  }

  .snf-support-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 5%;
  }

  /* Pins the left area securely in place within the viewport */
  .snf-support-visual-pane {
    width: 45%;
    position: sticky;
    top: 80px; 
    z-index: 1;
  }

  .snf-image-sticky-box {
    max-width: 100%;
  }

  .snf-display-img {
    height: 75vh;
    min-height: 480px;
    max-height: 580px;
  }

  /* The Right content card handles the physical scroll overlay depth */
  .snf-support-content-pane {
    width: 50%;
    position: relative;
    z-index: 3;
    margin-top: 40px; /* Staggered starting alignment */
  }

  /* Elevated, solid scroll-over card styling */
  .snf-content-scroll-card {
    background-color: #F6F5ED; /* Matches background to mask the image seamlessly */
    padding: 20px 0 40px 20px;
    position: relative;
  }
}

@media (min-width: 1400px) {
  .snf-support-container { gap: 8%; }
}
/***********************************************about us home****************************************/
/* ==========================================================================
   Premium Visual Infrastructure Layout
   ========================================================================== */

.acculer-offerings-wrapper {
  background-color: #000000;
  background-image: radial-gradient(circle at 50% -20%, rgba(230, 87, 87, 0.12) 0%, transparent 60%);
  padding: 120px 24px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.acculer-offerings-wrapper *,
.acculer-offerings-wrapper *::before,
.acculer-offerings-wrapper *::after {
  box-sizing: border-box;
}

.acculer-offerings-container {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* ==========================================================================
   SEO Header Typographic Treatment
   ========================================================================== */
.acculer-offerings-header {
  text-align: center;
  margin-bottom: 70px;
}

.acculer-offerings-heading {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px 0;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.acculer-offerings-subheading {
  font-size: 1.15rem;
  color: #ffffff;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ==========================================================================
   Carousel Track Viewport Architecture
   ========================================================================== */
.acculer-offerings-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 25px 5px 45px 5px; 
  cursor: grab; /* Shows grabbable cursor for desktop swipe interaction */
}

.acculer-offerings-carousel-viewport:active {
  cursor: grabbing;
}

.acculer-offerings-track {
  display: flex;
  gap: 30px;
  width: max-content;
  will-change: transform;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none; /* Prevents text highlighting during slide drag execution */
  -webkit-user-drag: none;
}

/* ==========================================================================
   Luxury Minimal Card Blueprint & Hover Mechanics
   ========================================================================== */
.acculer-offerings-card {
  width: 393px; 
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.acculer-offerings-media-frame {
  width: 100%;
  height: 290px; 
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.acculer-offerings-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  /*filter: grayscale(40%) contrast(95%) brightness(90%);*/
  -webkit-user-drag: none;
}

.acculer-offerings-body {
  padding: 36px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.acculer-card-index {
  font-family: monospace;
  font-size: 0.85rem;
  color: #E65757;
  opacity: 0.7;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}

.acculer-offerings-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.acculer-offerings-card-text {
  font-size: 0.98rem;
  color: #94a3b8;
  line-height: 1.7;
  margin: 0;
}

/* --- Premium Interactive Hover States --- */
.acculer-offerings-card:hover {
  transform: translateY(-12px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(230, 87, 87, 0.45);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(230, 87, 87, 0.05);
}

.acculer-offerings-card:hover .acculer-offerings-img {
  transform: scale(1.08);
  filter: grayscale(0%) contrast(100%) brightness(100%);
}

.acculer-offerings-card:hover .acculer-offerings-card-title {
  color: #E65757;
}
/* ==========================================================================
   Navigation Controls & View All Button Interface
   ========================================================================== */
.acculer-offerings-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 45px;
}

.acculer-offerings-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.acculer-btn-vector-shape {
  color: #94a3b8;
  font-size: 2.4rem;
  line-height: 1;
  transition: color 0.3s ease, transform 0.3s ease;
}

.acculer-offerings-prev .acculer-btn-vector-shape { transform: translateY(-3px) translateX(-1px); }
.acculer-offerings-next .acculer-btn-vector-shape { transform: translateY(-3px) translateX(1px); }

.acculer-offerings-btn:hover {
  background: #E65757;
  border-color: #E65757;
  box-shadow: 0 10px 25px rgba(230, 87, 87, 0.4);
}

.acculer-offerings-btn:hover .acculer-btn-vector-shape {
  color: #ffffff;
}

.acculer-offerings-prev:hover .acculer-btn-vector-shape { transform: translateY(-3px) translateX(-5px); }
.acculer-offerings-next:hover .acculer-btn-vector-shape { transform: translateY(-3px) translateX(5px); }

.acculer-offerings-btn:active {
  transform: scale(0.92);
}

/* --- Elegant Premium "View All" Button Design --- */
.acculer-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.acculer-link-arrow {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.acculer-view-all-link:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
}

.acculer-view-all-link:hover .acculer-link-arrow {
  transform: translateX(5px);
}

/* ==========================================================================
   Responsive Adaptation Breakpoints
   ========================================================================== */

@media (max-width: 1200px) {
  .acculer-offerings-container { max-width: 960px; }
  .acculer-offerings-card { width: 300px; }
  .acculer-offerings-media-frame { height: 230px; } 
  .acculer-offerings-body { padding: 28px; }
  .acculer-offerings-heading { font-size: 2.6rem; }
}

@media (max-width: 991px) {
  .acculer-offerings-wrapper { padding: 90px 20px; }
  .acculer-offerings-container { max-width: 720px; }
  .acculer-offerings-card { width: 345px; }
  .acculer-offerings-media-frame { height: 250px; }
  .acculer-offerings-heading { font-size: 2.25rem; }
}

@media (max-width: 768px) {
  .acculer-offerings-wrapper { padding: 70px 16px; }
  .acculer-offerings-heading { font-size: 2rem; }
  
  .acculer-offerings-carousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 30px;
  }
  
  .acculer-offerings-carousel-viewport::-webkit-scrollbar { display: none; }
  .acculer-offerings-carousel-viewport { -ms-overflow-style: none; scrollbar-width: none; }
  .acculer-offerings-track { gap: 20px; }
  .acculer-offerings-card { width: 295px; scroll-snap-align: start; }
  .acculer-offerings-media-frame { height: 210px; }
  .acculer-offerings-card:hover { transform: none; box-shadow: none; }
  
  .acculer-offerings-btn { display: none; }
  .acculer-offerings-controls { margin-top: 25px; }
}

@media (max-width: 480px) {
  .acculer-offerings-heading { font-size: 1.75rem; }
  .acculer-offerings-card { width: 270px; }
  .acculer-offerings-media-frame { height: 195px; }
  .acculer-offerings-body { padding: 24px; }
}
/******************************product_8*****************************************************/
/* ==========================================================================
   Editorial Flow Block — Pure White Canvas Styles
   ========================================================================== */
.srinath-editorial-flow-block {
  background-color: #ffffff;
  padding: 140px 24px;
  overflow: hidden;
  position: relative;
  
}

.srinath-editorial-flow-block *,
.srinath-editorial-flow-block *::before,
.srinath-editorial-flow-block *::after {
  box-sizing: border-box;
}

.srinath-editorial-flow-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Header Text Styles */
.srinath-editorial-flow-header {
  text-align: center;
  margin-bottom: 110px;
  animation: srinathEditorialReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.srinath-editorial-flow-badge {
  display: inline-block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #E65757;
  font-weight: 700;
  margin-bottom: 16px;
}

.srinath-editorial-flow-main-heading {
  font-size: 3rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 24px 0;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.srinath-editorial-flow-divider {
  width: 60px;
  height: 4px;
  background-color: #0f172a;
  margin: 0 auto;
}

/* ==========================================================================
   Alternating Row Mechanics
   ========================================================================== */
.srinath-editorial-flow-row {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
  animation: srinathEditorialReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.srinath-editorial-flow-row-reverse {
  flex-direction: row-reverse;
}

.srinath-editorial-flow-row:last-of-type {
  margin-bottom: 0;
}

/* Content Columns */
.srinath-editorial-flow-content {
  flex: 1;
}

.srinath-editorial-flow-step {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #E65757;
  margin-bottom: 12px;
}

.srinath-editorial-flow-row-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
}

.srinath-editorial-flow-prose {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.75;
  margin: 0 0 32px 0;
}

/* Visual Column Box Elements */
.srinath-editorial-flow-visual {
  flex: 1;
}

.srinath-editorial-flow-img-wrapper {
  width: 100%;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
  position: relative;
}

.srinath-editorial-flow-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover Image Scale Micro-interaction */
.srinath-editorial-flow-row:hover .srinath-editorial-flow-img {
  transform: scale(1.04);
}
/* ==========================================================================
   Inner Content Styling Layout Modules (Metrics, Pills, Bullets)
   ========================================================================== */
/* Technical Metrics Grid */
.srinath-editorial-flow-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid #e2e8f0;
  padding-top: 28px;
}

.srinath-editorial-flow-metric-item strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.srinath-editorial-flow-metric-item span {
  font-size: 0.85rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bullet Configuration Layout */
.srinath-editorial-flow-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #e2e8f0;
  padding-top: 28px;
}

.srinath-editorial-flow-bullets li {
  font-size: 0.98rem;
  color: #475569;
  margin-bottom: 12px;
  position: relative;
  padding-left: 24px;
  line-height: 1.5;
}

.srinath-editorial-flow-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #E65757;
  font-weight: bold;
}

.srinath-editorial-flow-bullets li:last-child {
  margin-bottom: 0;
}

/* Capabilities Pill Groups */
.srinath-editorial-flow-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #e2e8f0;
  padding-top: 28px;
}

.srinath-editorial-flow-pill {
  background-color: #f1f5f9;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

/* ==========================================================================
   Section Main CTA Footer Row
   ========================================================================== */
.srinath-editorial-flow-footer {
  text-align: center;
  margin-top: 100px;
  animation: srinathEditorialReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.srinath-editorial-flow-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px;
  background-color: #0f172a;
  border-radius: 34px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
}

.srinath-editorial-flow-cta svg {
  transition: transform 0.3s ease;
}

.srinath-editorial-flow-cta:hover {
  background-color: #E65757;
  box-shadow: 0 10px 30px -5px rgba(230, 87, 87, 0.35);
}

.srinath-editorial-flow-cta:hover svg {
  transform: translateX(6px);
}

/* ==========================================================================
   CSS Native Keyframe Accelerations (AOS Style, CSS Only)
   ========================================================================== */
@keyframes srinathEditorialReveal {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Responsive Adaptation Breakpoints
   ========================================================================== */
@media (max-width: 991px) {
  .srinath-editorial-flow-block {
    padding: 90px 20px;
  }
  .srinath-editorial-flow-row {
    flex-direction: column !important; /* Forces layout stacked orientation */
    gap: 40px;
    margin-bottom: 80px;
  }
  .srinath-editorial-flow-main-heading {
    font-size: 2.35rem;
  }
  .srinath-editorial-flow-row-heading {
    font-size: 1.75rem;
  }
  .srinath-editorial-flow-img-wrapper {
    height: 320px;
  }
  .srinath-editorial-flow-header {
    margin-bottom: 70px;
  }
}

@media (max-width: 600px) {
  .srinath-editorial-flow-block {
    padding: 70px 16px;
  }
  .srinath-editorial-flow-main-heading {
    font-size: 1.85rem;
  }
  .srinath-editorial-flow-metrics {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}