/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Labrix - Laboratory & Science Research HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Our Services css
08. Why Choose Us css
09. What We Do css
10. Case Study css
11. Intro Video css
12. How It Work css
13. Our Pricing css
14. Our FAQs css
15. Our Testimonials css
16. Our Blog css
17. Footer css
18. About Us Page css
19. Services Page css
20. Service Single css
21. Blog Archive css
22. Blog Single css
23. Case Study Page css
24. Case Study Single css
25. Team Page css
26. Team Single css
27. Pricing Page css
28. Testimonials Page css
29. Image Gallery css
30. Video Gallery css
31. FAQs Page css
32. Contact Us Page css
33. 404 Error Page css
34. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color				: #045c9c;
	--secondary-color			: #0aa5e1;
	--bg-color					: #F8F8F8;
	--text-color				: #45566A;
	--accent-color				: #0aa5e1;
	--white-color				: #FFFFFF;
	--divider-color				: #172C451A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Manrope", sans-serif;
	--accent-font				: "Sora", sans-serif;
}

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

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

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

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

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

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

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;
}

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

.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;
    background: var(--accent-color);
	border-radius: 10px;
	font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1em;
    text-transform: capitalize;
    color: #FFFFFF;
    border: none;
    padding: 17px 50px 17px 20px;
    overflow: hidden;
	transition: all 0.4s ease-in-out;
    z-index: 0;
}

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

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

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

.btn-default::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0%;
	width: 102%;
	height: 100%;
	background-color: var(--primary-color);
	transition: all 0.5s ease-in-out;
	z-index: -1;
	transform: skewY(9.3deg) scaleY(0);
}

.btn-default:hover::after{
	transform: skewY(0deg) scaleY(2);
}

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

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

.btn-default.btn-highlighted::after{
	background-color: #f1f5fd;
}

.btn-default.btn-border{
	background: transparent;
	color: var(--white-color);
	border: 1px solid var(--white-color);
	padding: 16px 50px 16px 20px;
}

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

.btn-default.btn-border::before{
	background-image: url('../images/arrow-white.svg');
}

.btn-default.btn-border:hover:before{
	filter: brightness(0) invert(0);
}

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

.readmore-btn{
	position: relative;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 26px;
}

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

.readmore-btn:hover::before{
	transform: 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(--accent-color) transparent var(--accent-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: 100px;
	transform: translate(-50%, -50%);
}

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

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

.bg-section{
	width: 100%;
	max-width: 1820px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin: 0 auto;
}

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

.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-title h3{
	position: relative;
	display: inline-block;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	font-size: 14px;
    font-weight: 500;
	text-transform: capitalize;
    color: var(--primary-color);
	padding: 8px 16px 8px 32px;
    margin-bottom: 10px;
}

.section-title h3::before{
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--accent-color);
	border-radius: 50%;
	width: 6px;
	height: 6px;
}

.section-title h1{
	font-size: 60px;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

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

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

.bg-section .section-title h3{
	border-color: var(--primary-color);
}

.bg-section .section-title h3::before{
	background: var(--primary-color);
}

.dark-section .section-title h3,
.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);
}

.dark-section .section-title h3{
	border-color: var(--dark-divider-color);
}

.dark-section .section-title h3::before{
	background: var(--accent-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;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #ffffff00;
    background: linear-gradient(0deg, rgb(255 255 255) -90%, /* Pure white at far left */ rgb(255 255 255 / 70%) 30%, /* Slight fade so it blends */ rgb(255 255 255) 45% /* Your existing dark blue */);
    z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	width: 100%;
	z-index: 100;
}

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

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

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

.navbar-brand{
	padding: 10px;
	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{
	margin: 0 5px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2em;
	padding: 14px 10px !important;
	color: #045c9c;
	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: 12px;
	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: #FFFFFF;
	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(--primary-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{
	top: 0;
	position: relative;
}

.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);
	border-radius: 10px;
}

.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: 500;
	text-transform: capitalize;
	padding: 7px 20px;
	color: #FFFFFF;
	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(--text-color);
}

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

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

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--primary-color);
	position: absolute;
	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(--text-color);
}

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

.hero{
	position: relative;
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 250px 0 190px;
}

.hero::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(23, 44, 69, 0) 0%, /* Fully transparent */ rgb(0 44 93) 100% /* Mostly opaque */);
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

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

.hero.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
	padding: 250px 0 190px;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(23, 44, 69, 0.00) 0%, rgba(23, 44, 69, 0.80) 60.83%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 30px;
	text-align: center;
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--dark-divider-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

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

.hero-content .section-title p{
	max-width: 730px;
}

.hero-btn{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 40px;
}

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

.hero-experience-box{
	width: 24%;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-experience-box h2{
	width: 80px;
	font-size: 46px;
	color: var(--white-color);
}

.hero-experience-box p{
	color: var(--white-color);
	margin: 0;
}

.satisfy-client-box{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

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

.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -18px;
	z-index: 1;
}

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

.satisfy-client-image figure{
	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid var(--white-color);
	border-radius: 50%;
}

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

.satisfy-client-image.add-more{
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	border: 1px solid var(--white-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.satisfy-client-image.add-more p{
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

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

.satisfy-client-content h3{
	font-size: 16px;
	font-weight: 600;
	color: var(--white-color);
}

.hero-video-circle{
	text-align: right;
}

.hero-video-circle a{
	display: inline-block;
	border-radius: 50%;
	cursor: none;
}

.hero-video-circle img{
	width: 100%;
	max-width: 120px;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
    from{
        transform: rotate(0deg);
      }
    to{
        transform: rotate(360deg);
    }
}

.hero-video-circle a:hover img{
	animation-play-state: paused;
}
/* Base video fill (keeps your current behavior) */
.hero.hero-video .hero-bg-video video{
  position: absolute;           /* ensure full cover */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Default: show desktop, hide mobile */
.hero.hero-video .hero-bg-video .hero-video-desktop{ display: block; }
.hero.hero-video .hero-bg-video .hero-video-mobile{ display: none; }

/* Mobile: swap to vertical video */
@media (max-width: 767.98px), (max-aspect-ratio: 3/4) {
  .hero.hero-video .hero-bg-video .hero-video-desktop{ display: none; }
  .hero.hero-video .hero-bg-video .hero-video-mobile{ display: block; }

  /* Optional: reduce big paddings on phones so the hero fits better */
  .hero{ padding: 160px 0 120px; }
}

/* Respect users who prefer reduced motion (optional) */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-video .hero-bg-video video{ display: none; }
  /* Your hero background image will show instead */
}

/************************************/
/***   05. Scrolling Ticker css   ***/
/************************************/

.our-scrolling-ticker{
	position: relative;
	background-color: var(--secondary-color);
	padding: 25px 0;
	z-index: 1;
}

.scrolling-ticker-box{
	--gap: 30px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 40s linear infinite;
}

.scrolling-content span{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2em;
	text-transform: capitalize;
	color: #FFFFFF;
}

.scrolling-content span img{
	width: 100%;
	max-width: 60px;
	margin-right: 30px;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}
/* ============================
   MOBILE-ONLY FIX (<= 768px)
   Keeps your existing HTML
   ============================ */
@media (max-width: 767.98px) {
  .our-scrolling-ticker { overflow: hidden; }

  /* Treat both copies as one long line and animate that line */
  .scrolling-ticker-box{
    --gap: 24px;                 /* smaller spacing on phones */
    --duration: 48s;             /* slightly slower for readability */
    display: inline-flex;        /* make the two .scrolling-content sit inline */
    width: max-content;          /* total width = sum of both copies */
    will-change: transform;
    backface-visibility: hidden;
    animation: marquee var(--duration) linear infinite;
    touch-action: pan-y;         /* avoid horizontal drag on iOS */
  }

  /* Stop per-row animations (the source of desync on mobile) */
  .scrolling-ticker-box .scrolling-content{
    animation: none !important;
    display: inline-flex;
    white-space: nowrap;
    gap: 0;                      /* Safari bug workaround: use margins instead */
  }

  /* Use margins for intra-item spacing */
  .scrolling-ticker-box .scrolling-content span{
    display: inline-flex;
    align-items: center;
    margin-right: var(--gap);
  }
  .scrolling-ticker-box .scrolling-content span:last-child{ margin-right: 0; }

  .scrolling-ticker-box .scrolling-content span img{
    width: 50px; height: auto; margin-right: 12px; flex: 0 0 auto;
  }

  /* Move the whole line by exactly one copy’s width (seamless) */
  @keyframes marquee{
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
  }

  /* Optional: pause if the user is pressing the bar */
  .our-scrolling-ticker:active .scrolling-ticker-box{
    animation-play-state: paused;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .scrolling-ticker-box { animation: none !important; transform: none !important; }
  .scrolling-ticker-box .scrolling-content { animation: none !important; }
}

/************************************/
/*** 	   06. About Us css 	  ***/
/************************************/

.about-us{
	background-image: url('../images/page-header-bg.png');
    background-repeat: no-repeat;
    background-position: right -40px bottom 100px;
    background-size: auto;
	padding: 100px 0;
}

.about-us .section-row .section-title{
	margin-right: 15px;
}

.customer-rating-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 30px;
}

.customer-rating-content{
	border-right: 1px solid var(--divider-color);
	margin-right: 40px;
	padding-right: 40px;
}

.customer-rating-star{
	margin-bottom: 15px;
}

.customer-rating-star i{
	color: var(--accent-color);
	font-size: 16px;
}

.customer-rating-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.customer-rating-content p{
	margin: 0;
}

.customer-rating-images{
	background: var(--white-color);
	box-shadow: 0px 0px 20px 0px rgba(23, 44, 69, 0.10);
	border-radius: 100px;
	padding: 10px;
}

.customer-rating-images .satisfy-client-image{
	margin-left: -10px;
}

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

.customer-rating-images .satisfy-client-image.add-more,
.customer-rating-images .satisfy-client-image figure{
	width: 40px;
	height: 40px;
}

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

.about-image-content-box-1{
	position: relative;
	width: calc(25% - 20px);
}

.about-image{
	position: relative;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.about-image::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(23, 44, 69, 0.00) 39.29%, var(--primary-color) 100%);
	width: 100%;	
	height: 100%;
}

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

.about-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.741;
	object-fit: cover;
}

.about-image-content{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 2;
}

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

.video-play-button a:after,
.video-play-button a:before{
	content: '';
	position: absolute;
	top: -34%;
	left: -34%;
	width: 160%;
	height: 160%;
	border: 50px 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:after{
	animation-delay: .3s;
}

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

.video-play-button a i{
	font-size: 22px;
	color: #ffffff;
}

.about-video-title{
	margin-top: 30px;
}

.about-video-title h3{
	font-size: 20px;
	color: var(--white-color);
}

.about-counter-box{
	width: calc(34% - 20px);
	background: var(--primary-color);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px;
}

.about-counter-title{
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.about-counter-title h2{
	width: 95px;
	font-size: 46px;
	color: var(--white-color);
}

.about-counter-title h3{
	font-size: 18px;
	color: var(--white-color);
}

.about-counter-content ul{
	padding: 0 0 0 20px;
	margin: 0 0 15px 0;
}

.about-counter-content ul li{
	color: var(--white-color);
	margin-bottom: 10px;
}

.about-counter-content ul li:last-child{
	margin-bottom: 0;
}

.about-counter-content p{
	color: var(--white-color);
	margin-bottom: 20px;
}

.about-counter-content .readmore-btn{
	color: var(--white-color);
}

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

.about-image-content-box-2{
	position: relative;
	width: calc(41% - 20px);
}

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

.about-image-content ul li{
	display: inline-block;
	font-size: 14px;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	background: var(--dark-divider-color);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border-radius: 30px;
	padding: 7px 20px;
	transition: all 0.4s ease-in-out;
}

.about-image-content ul li:hover{
	background: var(--accent-color);
	color: var(--primary-color);
}

/************************************/
/*** 	 07. Our Services css	  ***/
/************************************/

.our-services{
	padding: 100px 0;
}

.service-item{
	position: relative;
	background: var(--white-color);
	border-radius: 20px;
	aspect-ratio: 1 / 1.15;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px 35px;
	overflow: hidden;
}

.service-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;
}

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

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

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

.service-image::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(23, 44, 69, 0.00) 39.29%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;	
}

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

.service-body{
	position: relative;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
    z-index: 2;
}

.service-body-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 30px;
}

.service-body .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--accent-color);
	border-radius: 50%;
}

.service-body .icon-box img{
	width: 100%;
	max-width: 24px;
}

.service-readmore-btn{
	position: absolute;
	top: 5px;
	right: 0px;
	transform: translate(-100%, 100%) rotate(90deg);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-item.active .service-readmore-btn,
.service-item:hover .service-readmore-btn{
	transform: translate(0, 0) rotate(0);
	opacity: 1;
	visibility: visible;
}

.service-readmore-btn a{
	background: var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.service-readmore-btn a img{
	max-width: 20px;
	transition: all 0.4s ease-in-out;
}

.service-readmore-btn a:hover img{
	transform: rotate(45deg);
}

.service-content h3{
	font-size: 20px;
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.service-content h3 a{
	color: inherit;
}

.service-content p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

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

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

.section-footer-text p{
	margin: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	line-height: 1.1em;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 4px;
	padding: 4px 12px;
	margin-right: 10px;
}

.section-footer-text p a{
	font-weight: 600;
	color: var(--white-color);
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: #0aa5e1; 
}

/************************************/
/*** 	 08. Why Choose Us css	  ***/
/************************************/

.why-choose-us{
	
    background-repeat: no-repeat;
    background-position: left -60px bottom 100px;
    background-size: auto;
	padding: 100px 0;
}

.why-choose-image-box{
	position: relative;
	margin-right: 15px;
}

.why-choose-image figure{
	display: block;
	border-radius: 20px;
}

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

.why-choose-image-box .satisfy-client-box{
	position: absolute;
	bottom: 30px;
	left: 30px;
	display: block;
	background: var(--dark-divider-color);
	border: 1px solid var(--dark-divider-color);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	border-radius: 10px;
	padding: 25px;
}

.why-choose-image-box .satisfy-client-box .satisfy-client-content{
	margin-top: 20px;
}

.why-choose-image-box .satisfy-client-box .satisfy-client-content h3{
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
}

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

.why-choose-item-box{
	width: calc(60% - 20px);
}

.why-choose-item{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
}

.why-choose-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.why-choose-item-header{
	width: 50%;
	display: flex;
	align-items: center;
}

.why-choose-item-header .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 50%;
	margin-right: 15px;
}

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

.why-choose-item:hover .why-choose-item-header .icon-box::before{
	transform: scale(1);
}

.why-choose-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 40px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.why-choose-item:hover .why-choose-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.why-choose-item-title{
	width: calc(100% - 65px);
}

.why-choose-item-title h3{
	font-size: 18px;
	line-height: 1.3em;
}

.why-choose-item-content{
	width: calc(50% - 15px);
	border-left: 1px solid var(--divider-color);
	padding-left: 15px;
	margin-left: 15px;
}

.why-choose-item-content p{
	margin-bottom: 0;
}

.why-choose-body-image{
	width: calc(40% - 20px);
}

.why-choose-btn{
	margin-top: 60px;
}

.why-choose-body-image figure{
	display: block;
	border-radius: 20px;
}

.why-choose-body-image img{
	width: 100%; 
	aspect-ratio: 1 / 1.01;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  09. What We Do css	  ***/
/************************************/

.what-we-do{
	
    background-repeat: no-repeat;
    background-position: right -20px bottom -10px;
    background-size: auto;
	padding: 100px 0;
}

.what-we-contant{
	margin-right: 15px;
}

.what-we-counter-box{
	max-width: 300px;
	margin-top: 60px;
}

.what-we-counter-box h2{
	font-size: 80px;
    line-height: 1em;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--accent-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px transparent;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.what-we-counter-box h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 5px;
}

.what-we-counter-box p{
	color: var(--white-color);
	margin: 0;
}

.what-we-item{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.what-we-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.what-we-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border-radius: 50%;
	margin-right: 20px;
}

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

.what-we-item:hover .icon-box::before{
	transform: scale(1);
}

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

.what-we-content{
	width: calc(100% - 70px);
}

.what-we-content h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.what-we-content p{
	color: var(--white-color);
	margin: 0;
}

/************************************/
/*** 	  10. Case Study css	  ***/
/************************************/

.case-study{
    background-repeat: no-repeat;
    background-position: right -20px bottom 120px;
    background-size: auto;
	padding: 40px 0 60px;
}

.case-study-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

.case-study-image{
	position: relative;
	border-radius: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}

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

.case-study-item:hover .case-study-image::before{
	transform: scale(1);
}

.case-study-image figure{
	display: block;
}

.case-study-image figure img{
	width: 100%;
	aspect-ratio: 1 / 0.77;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.4s ease-in-out;
}

.case-study-item:hover .case-study-image figure img{
	transform: scale(1.1);
}

.case-study-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.case-study-item:hover .case-study-btn{
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

.case-study-btn a{
	background: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s ease-in-out;
}

.case-study-btn a:hover{
	background: var(--white-color);
}

.case-study-btn a img{
	width: 100%;
	max-width: 24px;
	transition: 0.4s ease-in-out;
}

.case-study-btn a:hover img{
	transform: rotate(45deg);
}

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

.case-study-content h2 a{
	color: inherit;
}

/************************************/
/*** 	  11. Intro Video css	  ***/
/************************************/

.intro-video{
	position: relative;
	overflow: hidden;
}

.intro-video .container-fluid{
	padding: 0;
}

.intro-video-box{
    position: relative;
	text-align: center;
	align-content: center;
    height: 800px;
}

.intro-video-box{
	position: relative;
}

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

.intro-video-image::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--primary-color);
	opacity: 25%;
	width: 100%;
	height: 100%;
}

.intro-video-image figure{
	width: 100%;
	height: 100%;
	display: block;
    border-radius: 20px;
}

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

.video-play-border-button{
	position: relative;
    z-index: 1;
}

.video-play-border-button a{
	position: relative;
	background: transparent;
	border: 1px solid var(--white-color);
	border-radius: 100%;
	width: 100px;
	height: 100px;
	color: var(--white-color);
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: none;
	transition: all 0.4s ease-in-out;
}

.video-play-border-button a:hover{
	font-size: 20px;
	letter-spacing: 0.05em;
}

/************************************/
/*** 	 12. How It Work css	  ***/
/************************************/

.how-it-work{
    background-repeat: no-repeat;
    background-position: left -30px bottom 100px;
    background-size: auto;
	padding: 100px 0;
}

.how-work-image-box{
	position: relative;
	margin-right: 15px;
}

.how-work-image figure{
	display: block;
	border-radius: 20px;
}

.how-work-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.257;
	object-fit: cover;
	border-radius: 20px;
}

.how-work-image-box .satisfy-client-box{
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: block;
	width: 290px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px;
    padding: 25px;
	z-index: 1;
}

.how-work-image-box .satisfy-client-box .satisfy-client-content{
	margin-top: 40px;
}

.how-work-image-box .satisfy-client-box .satisfy-client-content h3{
	font-size: 20px;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.how-work-image-box .satisfy-client-box .satisfy-client-content p{
	color: var(--primary-color);
}

.work-steps-item{
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

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

.work-step-no{
	display: inline-block;
	background: var(--accent-color);
	border-radius: 6px;
	padding: 7px 16px;
	margin-right: 25px;
	transition: all 0.4s ease-in-out;
}

.work-steps-item:hover .work-step-no{
	background: var(--primary-color);
}

.work-step-no h3{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 500;
	transition: all 0.4s ease-in-out;
}

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

.work-step-content{
	width: calc(100% - 125px);
}

.work-step-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.work-step-content p{
	margin: 0;
}

/************************************/
/*** 	  13. Our Pricing css	  ***/
/************************************/

.our-pricing{
	
	background-repeat: no-repeat;
	background-position: bottom -20px left -20px;
	background-size: auto;
	padding: 100px 0;
}

.our-pricing-content{
	position: sticky;
	top: 50px;
	margin-right: 20px;
}

.our-pricing-btn .btn-default{
	background: var(--white-color);
}

.pricing-item{
	background: var(--white-color);
	border-radius: 20px;
	margin-bottom: 30px;
	padding: 40px;
}

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

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

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

.pricing-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.pricing-content{
	width: calc(55% - 15px);
}

.pricing-list{
	width: calc(45% - 15px);
}

.pricing-price{
	margin-bottom: 40px;
}

.pricing-price h2{
	font-size: 34px;
	margin-bottom: 20px;
}

.pricing-price h2 sub{
	font-size: 20px;
	text-transform: capitalize;
	bottom: 0;
}

.pricing-price p{
	margin-bottom: 0;
}

.pricing-list ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.pricing-list ul li{
	margin-bottom: 20px;
	line-height: 1.5em;
}

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

.pricing-list ul li::marker{
	color: var(--primary-color);
}

/************************************/
/***   15. Our Testimonials css	  ***/
/************************************/

.our-testimonials{
	padding: 100px 0;
}

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

.testimonial-item{
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.author-image{
	position: relative;
	width: 42%;
}

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

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

.author-image figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1.28;
	transition: all 0.4s ease-in-out;
}

.testimonial-item:hover .author-image figure img{
	transform: scale(1.1);
}

.author-image .video-play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.testimonial-content{
	width: 58%;
	background: var(--white-color);
	align-content: center;
	padding: 30px;
}

.testimonial-quote{
	margin-bottom: 30px;
}

.testimonial-quote img{
	width: 100%;
	max-width: 32px;
}

.testimonial-info{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.testimonial-info p{
	margin-bottom: 0;
}

.author-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.author-content p{
	margin-bottom: 0;
}

.testimonial-pagination{
	text-align: center;
	margin-top: 60px;
}

.testimonial-pagination .swiper-pagination-bullet{
	position: relative;
    height: 10px;
    width: 10px;
    background: var(--dark-divider-color);
	border-radius: 100px;
    margin: 0 3px;
    opacity: 1;
    transition: all 0.4s ease-in-out;
}

.testimonial-pagination .swiper-pagination-bullet-active{
    width: 30px;
    background-color: var(--white-color);
}

/************************************/
/*** 	 	16. Our Blog css	  ***/
/************************************/

.our-blog{
	position: relative;
	padding: 100px 0 70px;
	z-index: 1;
}

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

.post-featured-image{
	margin-bottom: 20px;
}

.post-featured-image a{
    cursor: none;
    display: block;
	border-radius: 20px;
    overflow: hidden;
}

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

.post-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 0.71;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.1);
}

.post-item-content{
	margin-bottom: 20px;
}

.post-item-content h2{
    font-size: 18px;
	line-height: 1.4em;
}

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

/*************************************/
/***        17. Footer css         ***/
/*************************************/

.main-footer{
	background-color: var(--primary-color);
	padding: 60px 0 0;
	margin-bottom: 20px;
}

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

.footer-logo{
	margin-bottom: 40px;
}

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

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

.footer-links h3{
	font-size: 20px;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 20px;
}

.footer-links ul{
    list-style: disc;
    margin: 0;
    padding-left: 20px;
}

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

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

.footer-links ul li::marker{
    color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.footer-links ul li:hover::marker{
	color: var(--white-color);
}

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

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

.footer-contact-item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.footer-contact-item:last-child{
	margin-bottom: 0;
}

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

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

.footer-contact-item:hover .icon-box::before{
	transform: scale(1) rotate(180deg);
}

.footer-contact-item .icon-box img{
	position: relative;
	max-width: 50px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

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

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

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

.footer-contact-content p a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

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

.footer-social-link{
	display: flex;
    align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.footer-social-link hr{
	height: 1px;
    width: 45%;
    color: var(--dark-divider-color);
	opacity: 1;
}

.footer-social-link ul{
	display: flex;
    justify-content: center;
	text-align: center;
	list-style: none;
	margin: 0 20px;
	padding: 0;
}

.footer-social-link ul li{
	display: inline-block;
	margin-right: 20px;
}

.footer-social-link ul li:last-child{
	margin: 0;
}

.footer-social-link ul li a{
	position: relative;
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--accent-color);
	border-radius: 10px;
	overflow: hidden;
}

.footer-social-link ul li a::before{
	content: '';
    position: absolute;
    left: 0;
    top: 0;
	right: 0;
    bottom: 0;
    background-color: var(--white-color);
	border-radius: 10px;
	transform: scale(0);
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.footer-social-link ul li:hover a::before{
	transform: scale(1) rotate(180deg);
}

.footer-social-link ul li a i{
	position: relative;
	font-size: 20px;
	color: var(--white-color);
	transition: all 0.3s ease-in-out;	
	z-index: 1;
}

.footer-social-link ul li a:hover i{
	color: var(--primary-color);
}

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

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

.footer-terms-condition ul{
	display: flex;
	justify-content: end;
	gap: 30px;
	list-style: disc;
	margin: 0;
	padding-left: 0;
}

.footer-terms-condition ul li::marker{
	color: var(--accent-color);
}

.footer-terms-condition ul li:first-child::marker{
	font-size: 0;
}

.footer-terms-condition ul li a{
	color: var(--white-color);
	line-height: 1.6em;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.footer-terms-condition ul li:hover a{
	color: var(--accent-color);
}
/* License badge under About footer */
.footer-license-check{
  margin-top: 37px;
  text-align: center;                 /* centers title + image */
}

.footer-license-check h4{
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--white-color);
  letter-spacing: .2px;
}

.footer-license-check a{
  display: inline-block;
  line-height: 0;                     /* removes extra gap around image */
}

.footer-license-check img{
  width: 288px;                       /* requested size */
  height: 73px;                       /* requested size */
  max-width: 100%;                    /* stays responsive on small screens */
  border-radius: 10px;                 /* optional: softens edges slightly */
}


/************************************/
/*** 	 18. About Us Page css	  ***/
/************************************/

.page-header{
    position: relative;
    background: url('../images/page-header-bg-about-us.webp') no-repeat;
    background-position: center center;
    background-size: cover;
	padding: 225px 0 115px;
    overflow: hidden;
}

.page-header::before{
   content: '';
    position: absolute;
    top: 0;
    right: 0;
	bottom: 0;
	left: 0;
    background: linear-gradient(270deg, rgb(23 44 69 / 1%) 0%, rgb(27 44 64 / 38%) 60.83%);
	height: 100%;
	width: 100%;
}

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

.page-header-box h1{
	display: inline-block;
	font-size: 60px;
	font-weight: 700;
	color: var(--white-color);
	cursor: none;
    margin-bottom: 10px;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
	justify-content: center;
}

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

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

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

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

.our-approach{
	padding: 100px 0;
}

.approach-image{
	height: 100%;
	margin-right: 15px;
}

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

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

.approach-content{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
}

.mission-vision-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}

.mission-vision-item{
	width: calc(50% - 15px);
}

.mission-vision-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background-color: #eaeaea;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

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

.mission-vision-item:hover .icon-box:before{
	transform: scale(1);
}

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

.mission-vision-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.mission-vision-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.mission-vision-content p{
	margin: 0;
}

.our-core-value{
	
    background-repeat: no-repeat;
    background-position: right -20px top 100px;
    background-size: auto;
	padding: 100px 0;
}

.value-image-box-1{
	padding-right: 80px;
}

.value-image-box-1 figure{
	display: block;
	border-radius: 20px;
}

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

.value-image-box-2{
	display: flex;
	align-items: end;
}

.about-experience-box{
	width: 220px;
	background-color: var(--primary-color);
	border-radius: 20px;
	padding: 30px;
	margin: 20px 20px 0 0;
}

.about-experience-box .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background-color: #EAEAEA;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.about-experience-box .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.about-experience-box:hover .icon-box:before{
	transform: scale(1);
}

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

.experience-box-content h2{
	color: var(--white-color);
	font-size: 46px;
	margin-bottom: 5px;
}

.experience-box-content p{
	color: var(--white-color);
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}

.value-img-2{
	width: calc(100% - 240px);
	margin-top: -120px;
}

.value-img-2 figure{
	border: 10px solid var(--white-color);
	border-radius: 20px;
}

.value-img-2 img{
    width: 100%;
	aspect-ratio: 1 / 0.905;
    object-fit: cover;
}

.core-value-content{
	margin-left: 15px;
}

.our-experiment-item{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.our-experiment-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.our-experiment-item h3{
	position: relative;
	font-size: 20px;
	text-transform: capitalize;
	padding-left: 30px;
	margin-bottom: 15px;
}

.our-experiment-item h3:before{
	content: '\f058';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    font-weight: 900;
    font-size: 18px;
    color: var(--primary-color);
    top: 0;
    left: 0;
}

.our-experiment-item p{
	margin: 0;
}

.our-team{
	padding: 100px 0 70px;
}

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

.team-image{
	position: relative;
	margin-bottom: 20px;
}

.team-image a,
.team-image figure{
	display: block;
	cursor: none;
	border-radius: 20px;
	overflow: hidden;
}

.team-image img{
    width: 100%;
	aspect-ratio: 1 / 1.356;
    object-fit: cover;
	transition: all 0.4s ease-in-out;
}

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

.team-social-icon{
	position: absolute;
	right: 40px;
	bottom: 0;
	left: 40px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-item:hover .team-social-icon{
	bottom: 40px;
	opacity: 1;
	visibility: visible;
}

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

.team-social-icon ul li a{
	width: 36px;
	height: 36px;
	background: var(--primary-color);
	color: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

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

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

.team-content{
	text-align: center;
}

.team-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

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

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 	 19. Services Page css	  ***/
/************************************/

.page-services{
	padding: 100px 0 70px;
}

/************************************/
/*** 	 20. Service Single css	  ***/
/************************************/

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

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

.page-category-list{
	border-radius: 20px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list h3{
    font-size: 20px;
    color: var(--white-color);
    text-transform: capitalize;
	background: var(--primary-color);
    padding: 25px 40px;
}

.page-category-list ul{
	background: var(--white-color);
    list-style: none;
    margin: 0;
    padding: 30px 40px;
}

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

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

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

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

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

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

.sidebar-cta-box{
	position: relative;
	background: url('../images/sidebar-cta-bg.webp') no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;    
	padding: 40px;
    overflow: hidden;
}

.sidebar-cta-box:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    background: var(--primary-color);
	opacity: 60%;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.sidebar-cta-logo,
.sidebar-cta-content{
	position: relative;
	z-index: 1;
}

.sidebar-cta-logo{
	margin-bottom: 70px;
}

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

.sidebar-cta-content P{
	color: var(--white-color);
	margin-bottom: 20px;
}

.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.581;
    object-fit: cover;
    border-radius: 20px;
}

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

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

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

.service-entry h2{
	font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.02em;
	margin-bottom: 20px;
}

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

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

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

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

.service-discover-box,
.service-result-box,
.service-partnership-box{
	margin-top: 60px;
}

.service-discover-list{
	margin-top: 40px;
}

.service-discover-list ul{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.service-discover-list ul li{
	width: calc(50% - 15px);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 20px 15px 20px 45px;
	margin: 0;
}

.service-discover-list ul li::before{
	top: 20px;
	left: 20px;
}

.service-discover-image-content{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.service-discover-image,
.service-discover-content{
	width: calc(50% - 15px);
}

.service-discover-image figure{
	display: block;
	border-radius: 20px;
}

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

.service-result-box ul{
	margin-top: 40px;
}

.service-result-list{
	background: var(--secondary-color);
	border-radius: 20px;
	margin-top: 40px;
	padding: 40px;
}

.service-result-item{
	display: flex;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}	

.service-result-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.service-result-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.service-result-item:hover .icon-box{
	background: var(--white-color);
}

.service-result-item .icon-box img{
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
}

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

.service-result-content{
	width: calc(100% - 80px);
}

.service-result-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.service-result-content p{
	margin-bottom: 0;
}

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

.service-partnership-content .our-experiment-item{
	margin-bottom: 30px;
	padding: 0;
	border: none;
}

.service-partnership-image{
	margin-top: 40px;
}

.service-partnership-image figure{
	display: block;
	border-radius: 20px;
}

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

.page-single-faqs .faq-accordion{
	margin: 0;
}

/************************************/
/*** 	 21. Blog Archive css	  ***/
/************************************/

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

.page-blog .post-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

.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(--secondary-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(--primary-color);
    color: var(--white-color);
}

/************************************/
/*** 	  22. Blog Single css	  ***/
/************************************/

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

.post-single-meta{
	margin-top: 5px;
}

.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: 20px;
    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: 600;
	line-height: 1.2em;
	margin: 0 0 0.435em;
}

.post-entry h1{
	font-size: 60px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.post-entry h2{
	font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.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 li,
.post-entry ul li{
    position: relative;
	font-size: 16px;
    font-weight: 500;
    line-height: 1.6em;
    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: url('../images/icon-blockquote.svg'), var(--secondary-color);
	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: 700;
	line-height: 1.4em;
	color: #ffffff;
}

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

.tag-links{
	font-family: var(--accent-font);
    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-family: var(--default-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: #ffffff;
	border-radius: 10px;
    padding: 12px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: #ffffff;
	color: var(--accent-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: #ffffff;
	border-radius: 10px;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease-in-out;
}

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

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

/************************************/
/*** 	23. Case Study Page css	  ***/
/************************************/

.page-case-study{
	padding: 100px 0 70px;
}

/************************************/
/***   24. Case Study Single css  ***/
/************************************/

.page-case-study-single{
	padding: 100px 0;
}

.case-study-category-list ul li{
	display: flex;
	width: 100%;
	justify-content: space-between;
	color: var(--primary-color);
	font-weight: 500;
}

.case-study-category-list ul li span{
	width: 68%;
	color: var(--text-color);
	font-weight: 400;
}

.case-study-entry{
    margin-bottom: 60px;
}

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

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

.case-study-entry h2{
	font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.02em;
	margin-bottom: 20px;
}

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

.case-study-entry ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 15px;
}

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

.case-study-entry ul li::before{
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--primary-color);
}

.empowering-agriculture-box,
.field-trials-box,
.shaping-future-box{
	margin-top: 60px;
}

.empowering-box-list{
	margin-top: 40px;
}

.empowering-box{
	background: var(--secondary-color);
	border-radius: 20px;
	margin-bottom: 40px;
	padding: 40px;
}

.empowering-box:last-child{
	margin-bottom: 0;
}

.empowering-item{
	display: flex;
	margin-bottom: 40px;
}

.empowering-item .icon-box{
	margin-right: 20px;
}

.empowering-item .icon-box img{
	width: 100%;
	max-width: 60px;
}

.empowering-item-content{
	width: calc(100% - 80px);
}

.empowering-item-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.field-trials-step-list{
	display: flex;
	flex-wrap: wrap;
	gap: 40px 30px;
	margin-top: 40px;
}

.field-trials-step-item{
	width: calc(50% - 15px);
	display: flex;
}

.field-trials-step-no{
	position: relative;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--secondary-color);
	border-radius: 50%;
	margin-right: 20px;
}

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

.field-trials-step-item:hover .field-trials-step-no::before{
	transform: scale(1);
}

.field-trials-step-no h3{
	position: relative;
	font-size: 24px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.field-trials-step-item:hover .field-trials-step-no h3{
	color: var(--white-color);
}

.field-trials-content{
	width: calc(100% - 80px);
}

.field-trials-content h3{
	font-size: 20px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.shaping-future-image-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 40px;
	margin-top: 40px;
}

.shaping-future-content,
.shaping-future-image{
	width: calc(50% - 15px);
}

.shaping-future-item{
	display: flex;
	margin-top: 30px;
}

.shaping-future-item h3{
	width: calc(48% - 15px);
	font-size: 20px;
	border-right: 1px solid var(--divider-color);
	margin-right: 15px;
	padding-right: 15px;
}

.shaping-future-item p{
	width: 52%;
}

.shaping-future-image figure{
	display: block;
	border-radius: 20px;
}

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

/************************************/
/*** 	   25. Team Page css	  ***/
/************************************/

.page-team{
	padding: 100px 0 70px;
}

/************************************/
/*** 	 26. Team Single css	  ***/
/************************************/

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

.team-about-box,
.team-member-skill-box{
	margin-bottom: 60px;
}

.team-about-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.team-single-image,
.team-about-content{
	width: calc(50% - 30px);
}

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

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

.team-about-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 40px;
}

.member-social-list{
	margin-bottom: 40px;
}

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

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

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

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

.team-contact-item{
	display: flex;
	margin-bottom: 30px;
}

.team-contact-item:last-child{
	margin-bottom: 0;
}

.team-contact-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25px;
}

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

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

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

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

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

.team-contact-content p{
	text-transform: capitalize;
	margin-bottom: 5px;
}

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

.team-member-skill-box,
.team-member-contact-box{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	display: flex;
	flex-wrap: wrap;
	gap: 30px 140px;
	border-radius: 20px;
	padding: 40px;
}

.team-skill-content{
	width: calc(45% - 70px);
}

.team-skill-content .section-title{
	margin-bottom: 0;
}

.team-skill-list{
	width: calc(55% - 70px);
}

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

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

.skills-progress-bar .skill-data{
	display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	line-height: normal;
	font-weight: 500;
	text-transform: capitalize;
}

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

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

.team-member-contact-box{
	gap: 30px;
}

.team-member-contact-info{
	width: calc(42% - 15px);
}

.team-member-contact-info .section-title{
	position: sticky;
	margin-bottom: 0;
	top: 50px;
}

.team-member-contact-box .contact-us-form{
	width: calc(58% - 15px);
	border-radius: 20px;
}

/************************************/
/*** 	 27. Pricing Page css	  ***/
/************************************/

.page-pricing{
	padding: 100px 0 70px;
}

.page-pricing .pricing-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-pricing .pricing-item .pricing-content,
.page-pricing .pricing-item .pricing-list{
	width: 100%;
}

/************************************/
/***   28. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	padding: 100px 0 70px;
}

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

/************************************/
/*** 	 29. Image Gallery css	  ***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
}

.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.829;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	 30. Video Gallery css	  ***/
/************************************/

.page-video-gallery{
	padding: 100px 0 70px;
}

.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: 40%;
    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;
	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.829;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  31. FAQs Page css 	  ***/
/************************************/

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

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

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

/************************************/
/***    32. Contact Us Page css	  ***/
/************************************/

.page-contact-us{
	padding: 10px 0 40px;
}

.contact-us-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
}

.contact-us-content{
	width: calc(50% - 15px);
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
}

.contact-info-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.contact-info-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.contact-info-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25px;
}

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

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

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

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

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

.contact-item-content p{
	text-transform: capitalize;
	margin-bottom: 5px;
}

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

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

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

.contact-us-image{
	position: relative;
	width: calc(50% - 15px);
}

.contact-us-img{
	height: 100%;
}

.contact-us-img figure{
	height: 100%;
	display: block;
	border-radius: 20px;
}

.contact-us-img img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.24;
	object-fit: cover;
	border-radius: 20px;
}

.working-hours-box{
	position: absolute;
	bottom: 30px;
	left: 30px;
	background-color: var(--dark-divider-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	padding: 30px;
	backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
	z-index: 1;
}

.working-hours-header{
	margin-bottom: 30px;
}

.working-hours-header h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
}

.working-hours-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.working-hours-body ul li{
	font-size: 16px;
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 70px;
	margin-bottom: 20px;
}

.working-hours-body ul li:last-child{
	margin-bottom: 0;
}

.contact-form-map{
	padding: 50px 0 100px;
}

.contact-form-box{
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.contact-form-box .contact-us-form,
.google-map{
	width: 50%;
}

.contact-us-form{
	background-color: var(--primary-color);
	padding: 40px;
}

.contact-us-form .section-title h2,
.contact-us-form .section-title p{
	color: var(--white-color);
}

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

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

.contact-form form .btn-default{
    width: 100%;
	padding: 17px;
}

.contact-form form .btn-default::before{
    display: none;
}

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

/************************************/
/*** 	 33. 404 Error Page css	  ***/
/************************************/

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

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

.error-page-image img{
	width: 100%;
	max-width: 100%;
	border-radius: 20px
}

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

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

/************************************/
/***      34. Responsive css      ***/
/************************************/


@media only screen and (max-width: 1820px){
	
	.bg-section{
		max-width: calc(100% - 40px);
		margin: 0 20px;
	}

	.hero-content-box .section-title{
		margin-right: 0;
	}

	.main-footer{
		margin-bottom: 20px;
	}
}


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

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

@media only screen and (max-width: 991px){
	
	.btn-default{
		padding: 15px 40px 15px 15px;
	}
	
	.btn-default::before{
		right: 15px;
		width: 18px;
        height: 18px;
	}

	.btn-default.btn-border{
		padding: 14px 40px 14px 15px;
	}
	
	.navbar{
		padding: 0px 0;
	}
	
	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

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

	.bg-section{
		max-width: 100%;
		border-radius: 0;
		margin: 0;
	}
	
	.section-row{
		margin-bottom: 40px;
	}

	.section-row .section-title.section-title-center{
		max-width: 100%;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title h3{
		padding: 6px 14px 6px 26px;
	}

	.section-title h3::before{
		left: 14px;
	}

	.section-title h1{
		font-size: 45px;
	}

	.section-title h2{
		font-size: 36px;
	}

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

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

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

	.hero{
		padding: 170px 0 80px;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 170px 0 80px;
	}

	.hero-video-circle{
		display: none;
	}

	.hero-body{
		margin-top: 30px;
		padding-top: 30px;
	}

	.hero-experience-box h2{
		width: 65px;
		font-size: 36px;
	}

	.our-scrolling-ticker{
		padding: 20px 0;
	}

	.scrolling-ticker-box{
		--gap: 20px;
	}

	.scrolling-content span{
		font-size: 24px;
	}

	.scrolling-content span img{
		max-width: 26px;
		margin-right: 20px;
	}

	.about-us{
		background-size: 140px auto;
		background-position: right -10px bottom 50px;
		padding: 50px 0;
	}

	.about-us .section-row .section-title{
		margin-right: 0px;
	}

	.customer-rating-content{
		margin-right: 30px;
		padding-right: 30px;
	}

	.about-image-content-box-1{
		width: calc(50% - 15px);
	}

	.about-image-content-box-2{
		width: 100%;
	}

	.about-image-content-box-2 .about-image img{
		aspect-ratio: 1 / 0.5;
	}

	.about-image-content{
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

	.about-counter-box{
		width: calc(50% - 15px);
		padding: 30px;
	}

	.about-counter-title h2{
		width: 85px;
		font-size: 36px;
	}

	.our-services{
		padding: 50px 0;
	}

	.service-item{
		aspect-ratio: 1 / 1.03;
		padding: 30px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.why-choose-us{
		background-size: 140px auto;
		background-position: left -40px bottom 50px;
		padding: 50px 0;
	}

	.why-choose-image-box{
		margin: 0 0 30px;
	}

	.why-choose-image figure img{
		aspect-ratio: 1 / 0.8;
	}

	.why-choose-image-box .satisfy-client-box{
		bottom: 20px;
		left: 20px;
		padding: 20px;
	}

	.what-we-do{
		background-size: 140px auto;
		background-position: right -20px bottom -10px;
		padding: 50px 0;
	}

	.what-we-contant{
		margin: 0 0 30px;
	}

	.what-we-counter-box{
		max-width: 300px;
		margin-top: 30px;
	}

	.what-we-counter-box h2{
		font-size: 60px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.what-we-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.case-study{
		background-size: 140px auto;
		background-position: right -20px bottom 50px;
		padding: 50px 0 20px;
	}

	.case-study-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.case-study-image{
		margin-bottom: 15px;
	}

	.case-study-content h2{
		font-size: 18px;
	}

	.intro-video-box{
		height: 500px;
	}

	.video-play-border-button a{
		width: 80px;
		height: 80px;
	}

	.video-play-border-button a:hover{
		font-size: 18px;
	}

	.how-it-work{
		background-size: 130px auto;
		background-position: left -20px bottom 0;
		padding: 50px 0;
	}

	.how-work-image-box{
		margin: 0 0 30px;
	}

	.how-work-image figure img{
		aspect-ratio: 1 / 0.8;
	}

	.how-work-image-box .satisfy-client-box{
		bottom: 30px;
		left: 30px;
		width: 290px;
		padding: 20px;
	}

	.how-work-image-box .satisfy-client-box .satisfy-client-content{
		margin-top: 30px;
	}

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

	.our-pricing{
		background-size: 140px auto;
		background-position: left -10px bottom -10px;
		padding: 50px 0;
	}

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

	.pricing-item{
		padding: 30px;
	}

	.pricing-header{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.pricing-price{
		margin-bottom: 30px;
	}

	.pricing-price h2{
		font-size: 28px;
		margin-bottom: 15px;
	}

	.pricing-price h2 sub{
		font-size: 18px;
	}

	.pricing-list ul li{
		margin-bottom: 15px;
	}

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

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

	.faq-accordion{
		padding: 30px;
		margin-left: 0;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.faq-accordion .accordion-button:not(.collapsed){
		padding-bottom: 15px;
	}

	.our-testimonials{
		padding: 50px 0;
	}

	.author-image figure img{
		aspect-ratio: 1 / 0.99;
	}

	.testimonial-content{
		padding: 20px;
	}

	.testimonial-quote{
		margin-bottom: 20px;
	}

	.testimonial-pagination{
		margin-top: 20px;
	}

	.our-blog{
		padding: 50px 0 20px;
	}

	.post-featured-image{
		margin-bottom: 15px;
	}

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

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

	.footer-logo{
		margin-bottom: 15px;
	}

	.about-footer-content{
		margin-bottom: 20px;
	}

	.footer-newsletter-form .form-group{
		margin-bottom: 15px;
	}
	
	.footer-links-box{
		margin: 0;
	}

	.footer-links h3{
		margin-bottom: 15px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

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

	.page-header{
		padding: 170px 0 80px;
	}

	.page-header-box h1{
		font-size: 45px;
		margin-bottom: 5px;
	}

	.our-approach{
		padding: 50px 0;
	}

	.approach-image{
		height: auto;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.approach-image img{
		height: auto;
		aspect-ratio: 1 / 0.7;
	}

	.approach-content{
		padding: 30px;
	}

	.mission-vision-list{
		margin-bottom: 30px;
	}

	.mission-vision-item .icon-box{
		margin-bottom: 30px;
	}

	.mission-vision-content h3{
		margin-bottom: 10px;
	}

	.our-core-value{
		background-size: 100px auto;
		background-position: right -10px top 50px;
		padding: 50px 0;
	}

	.core-value-image{
		max-width: 80%;
        margin: 0 auto;
		margin-bottom: 30px;
	}

	.about-experience-box{
		padding: 20px;
	}

	.experience-box-content h2{
		font-size: 36px;
	}

	.core-value-content{
		margin-left: 0px;
	}

	.our-experiment-item{
	    margin-bottom: 30px;
	    padding-bottom: 30px;
	}

	.our-experiment-item h3{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.our-experiment-item h3:before{
		font-size: 16px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.team-image img{
		aspect-ratio: 1 / 1.1;
	}

	.team-social-icon{
    	right: 30px;
    	left: 30px;
	}

	.team-item:hover .team-social-icon{
    	bottom: 30px;
	}

	.team-image{
		margin-bottom: 15px;
	}

	.page-services{
		padding: 50px 0 20px;
	}

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

	.page-single-sidebar{
		position: initial;
		margin: 0 0 30px;
	}

	.page-category-list{
		margin-bottom: 30px;
	}

	.page-category-list h3,
	.page-category-list ul{
		padding: 15px 30px;
	}

	.page-category-list ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.sidebar-cta-box{
		padding: 30px;
	}

	.sidebar-cta-logo{
		margin-bottom: 40px;
	}

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

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

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

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.service-entry ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.service-entry ul li::before{
		font-size: 16px;
	}

	.service-discover-box,
	.service-result-box,
	.service-partnership-box{
		margin-top: 40px;
	}

	.service-discover-list{
		margin-top: 30px;
	}

	.service-discover-list ul{
		gap: 20px;
	}

	.service-discover-list ul li{
		width: calc(50% - 10px);
		font-size: 14px;
		border-radius: 12px;
		padding: 12px 12px 12px 35px;
		margin-bottom: 0;
	}

	.service-discover-list ul li::before{
		top: 14px;
		left: 12px;
	}

	.service-discover-image-content{
		gap: 20px;
		margin-top: 30px;
	}

	.service-discover-image,
	.service-discover-content{
		width: calc(50% - 10px);
	}

	.service-discover-content .why-choose-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

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

	.service-discover-content .why-choose-item .why-choose-item-content p{
		font-size: 14px;
	}

	.service-result-box ul{
		margin-top: 30px;
	}

	.service-result-list{
		margin-top: 30px;
		padding: 30px;
	}

	.service-result-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.service-partnership-content .our-experiment-item{
		margin-bottom: 20px;
	}

	.service-partnership-image{
		margin-top: 30px;
	}

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

	.page-blog .post-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.page-pagination{
		margin-top: 10px;
	}

	.page-single-post{
		padding: 50px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h1,
    .post-entry h2,
    .post-entry h3,
    .post-entry h4,
    .post-entry h5,
    .post-entry h6{
        margin: 0 0 0.42em;
    }
    
    .post-entry h2{
        font-size: 36px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
        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;
    }

	.tag-links{
		gap: 10px;
	}
    
    .post-tags .tag-links a{
        padding: 10px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-case-study{
		padding: 50px 0 20px;
	}

	.page-case-study-single{
		padding: 50px 0;
	}

	.case-study-entry{
		margin-bottom: 40px;
	}

	.case-study-entry p{
		margin-bottom: 15px;
	}

	.case-study-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.case-study-entry ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.case-study-entry ul li::before{
		font-size: 16px;
	}

	.empowering-agriculture-box,
	.field-trials-box,
	.shaping-future-box{
		margin-top: 40px;
	}

	.empowering-box-list{
		margin-top: 30px;
	}

	.empowering-box{
		padding: 30px;
		margin-bottom: 30px;
	}

	.empowering-item{
		margin-bottom: 30px;
	}

	.empowering-item .icon-box{
		margin-right: 15px;
	}

	.empowering-item .icon-box img{
		max-width: 50px;
	}

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

	.field-trials-step-list{
		gap: 30px;
		margin-top: 30px;
	}

	.field-trials-step-no{
		height: 50px;
		width: 50px;
		margin-right: 15px;
	}

	.field-trials-step-no h3{
		font-size: 20px;
	}

	.field-trials-content{
		width: calc(100% - 65px);
	}

	.field-trials-content h3{
		font-size: 18px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.shaping-future-image-content{
		margin-top: 30px;
		padding: 30px;
	}

	.shaping-future-item{
		margin-top: 20px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

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

	.team-about-box,
	.team-member-skill-box{
		margin-bottom: 40px;
	}

	.team-single-image,
	.team-about-content{
		width: 100%;
	}

	.team-single-image img{
		height: auto;
		aspect-ratio: 1 / 0.85;
	}

	.team-about-content{
		padding: 30px;
	}

	.member-social-list{
		margin-bottom: 30px;
	}

	.team-contact-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.team-contact-item .icon-box img{
		max-width: 24px;
	}

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

	.team-member-skill-box,
	.team-member-contact-box{
		gap: 30px;
		padding: 30px;
	}

	.team-skill-content,
	.team-skill-list{
		width: 100%;
	}

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

	.skills-progress-bar .skill-data{
		margin-bottom: 15px;
	}

	.team-member-contact-info,
	.team-member-contact-box .contact-us-form{
		width: 100%;
	}

	.team-member-contact-info .section-title{
		position: initial;
	}

	.page-pricing{
		padding: 50px 0 20px;
	}

	.page-testimonials{
		padding: 50px 0 20px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-video-gallery{
		padding: 50px 0 20px;
	}

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

	.page-faqs .page-faq-accordion{
		margin-bottom: 40px;
	}

	.page-contact-us{
    	padding: 50px 0 25px;
	}

	.contact-us-box{
		padding: 30px;
	}

	.contact-us-content,
	.contact-us-image{
		width: 100%;
	}

	.contact-us-content{
		padding: 30px;
	}

	.contact-info-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.contact-info-item .icon-box{
		margin-right: 15px;
	}

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

	.contact-us-img img{
		aspect-ratio: 1 / 0.9;
	}

	.working-hours-box{
		bottom: 20px;
		left: 20px;
		padding: 20px;
	}

	.working-hours-header{
		margin-bottom: 20px;
	}

	.contact-form-map{
		padding: 25px 0 50px;
	}

	.contact-form-box .contact-us-form,
	.google-map{
		width: 100%;
	}

	.contact-us-form{
		padding: 30px;
	}

	.contact-form form .form-control{
		padding: 12px 15px;
		border-radius: 12px;
	}

	.contact-form form .btn-default{
		padding: 15px;
	}

	.google-map iframe{
		height: 450px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

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

@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-btn{
		gap: 15px;
	}

	.hero-experience-box{
		width: 100%;
	}

	.hero-experience-box h2{
        width: 50px;
        font-size: 26px;
    }

	.satisfy-client-box{
		gap: 10px;
	}

	.satisfy-client-image figure{
		width: 45px;
		height: 45px;
	}

	.our-scrolling-ticker{
		padding: 15px 0;
	}

	.scrolling-ticker-box{
        --gap: 15px;
    }

	.scrolling-content span{
        font-size: 20px;
    }

	.scrolling-content span img{
        max-width: 22px;
        margin-right: 15px;
    }

	.customer-rating-box{
		align-items: start;
		justify-content: space-between;
		gap: 10px;
	}

	.customer-rating-content{
		border-right: none;
        margin-right: 0px;
        padding-right: 0px;
    }

	.customer-rating-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.customer-rating-content p{
		font-size: 14px;
	}

	.customer-rating-images{
		padding: 6px;
	}

	.about-us-boxes{
		gap: 20px;
	}

	.about-image-content-box-1{
        width: 100%;
    }

	.about-image-content{
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

	.about-video-title h3{
		font-size: 18px;
	}

	.about-counter-box{
		width: 100%;
		padding: 20px;
	}

	.about-counter-title{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.about-counter-title h2{
        width: 65px;
        font-size: 26px;
    }

	.about-image-content-box-2 .about-image img{
        aspect-ratio: 1 / 0.741;
    }

	.about-image-content ul{
		gap: 10px;
	}

	.about-image-content ul li{
		font-size: 12px;
		padding: 5px 15px;
	}

	.service-content h3{
		font-size: 18px;
		margin-bottom: 6px;
	}

	.why-choose-image figure img{
        aspect-ratio: 1 / 1.1;
    }

	.why-choose-image-box .satisfy-client-box .satisfy-client-content{
		margin-top: 10px;
	}

	.why-choose-image-box .satisfy-client-box .satisfy-client-content h3{
		font-size: 16px;
	}

	.why-choose-item-box{
		width: 100%;
	}

	.why-choose-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.why-choose-item-header .icon-box{
		width: 45px;
		height: 45px;
		margin-right: 10px;
	}

	.why-choose-item-title{
		width: calc(100% - 55px);
	}

	.why-choose-item-title h3{
		font-size: 16px;
	}

	.why-choose-item-content{
		width: calc(50% - 10px);
		padding-left: 10px;
		margin-left: 10px;
	}

	.why-choose-item-content p{
		font-size: 14px;
	}

	.why-choose-btn{
		margin-top: 30px;
	}

	.why-choose-body-image{
		width: 100%;
	}

	.why-choose-body-image img{
		aspect-ratio: 1 / 0.8;
	}

	.what-we-counter-box{
		max-width: 100%;
	}

	.what-we-counter-box h2{
		font-size: 40px;
	}

	.what-we-counter-box h3{
		font-size: 18px;
	}

	.what-we-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.what-we-item .icon-box{
		margin-right: 10px;
	}

	.what-we-content{
		width: calc(100% - 60px);
	}

	.what-we-content h3{
		font-size: 18px;
	}

	.what-we-content p{
		font-size: 14px;
	}

	.intro-video-box{
        height: 300px;
    }

	.how-work-image figure img{
        aspect-ratio: 1 / 1.1;
    }

	.how-work-image-box .satisfy-client-box{
        bottom: 20px;
        left: 20px;
        padding: 15px;
    }

	.how-work-image-box .satisfy-client-box .satisfy-client-content{
        margin-top: 20px;
    }

	.how-work-image-box .satisfy-client-box .satisfy-client-content h3{
		font-size: 18px;
	}

	.how-work-image-box .satisfy-client-box .satisfy-client-content p{
		font-size: 14px;
	}

	.work-steps-item{
		display: block;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.work-step-no{
		margin: 0 0 15px;
	}

	.work-step-content{
		width: 100%;
	}

	.work-step-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.pricing-item{
		padding: 20px;
	}

	.pricing-header{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.pricing-header h3{
		font-size: 18px;
	}

	.pricing-body{
		gap: 20px;
	}

	.pricing-content,
	.pricing-list{
		width: 100%;
	}

	.pricing-price{
        margin-bottom: 20px;
    }

	.pricing-price h2{
		font-size: 22px;
		margin-bottom: 10px;
	}

	.pricing-price h2 sub{
		font-size: 14px;
	}

	.pricing-list ul li{
		margin-bottom: 10px;
	}

	.faq-accordion{
		padding: 20px;
	}

	.faq-accordion .accordion-button:not(.collapsed){
		padding-bottom: 10px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 0;
	}

	.faq-accordion .accordion-item .accordion-body p{
		font-size: 14px;
	}

	.author-image,
	.testimonial-content{
		width: 100%;
	}

	.author-image figure,
	.author-image figure img{
		height: auto;
	}

	.testimonial-quote{
        margin-bottom: 15px;
    }

	.testimonial-info{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.author-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

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

	.footer-newsletter-box h3{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-links-box{
		gap: 0;
	}

	.footer-links{
		width: 100%;
		margin-bottom: 30px;
	}

	.footer-links h3{
		font-size: 18px;
	}

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

	.page-header-box h1{
		font-size: 28px;
	}

	.approach-image img{
        aspect-ratio: 1 / 0.9;
    }

	.approach-content{
		padding: 30px 20px;
	}

	.mission-vision-item{
		width: 100%;
	}

	.mission-vision-item .icon-box{
        margin-bottom: 20px;
    }

	.mission-vision-content h3{
		font-size: 18px;
        margin-bottom: 5px;
    }

	.core-value-image{
		max-width: 100%;
	}

	.value-image-box-1{
		padding-right: 0;
	}

	.value-image-box-2{
		margin-top: 10px;
		align-items: start;
	}

	.about-experience-box{
		width: 145px;
        padding: 12px;
		margin: 5px 10px 0 0;
    }

	.about-experience-box .icon-box{
		width: 50px;
		height: 50px;
		margin-bottom: 10px;
	}

	.about-experience-box .icon-box img{
		max-width: 26px;
	}

	.experience-box-content h2{
		font-size: 26px;
	}

	.experience-box-content p{
		font-size: 14px;
	}

	.value-img-2{
		width: calc(100% - 155px);
		margin-top: 0px;
	}

	.value-img-2 figure{
		border-width: 5px;
	}

	.our-experiment-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.our-experiment-item h3{
		font-size: 18px;
	}

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

	.page-category-list h3,
	.page-category-list ul,
	.sidebar-cta-box{
        padding: 20px;
    }

	.page-category-list h3{
		font-size: 18px;
	}

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

	.service-entry h2{
		font-size: 26px;
	}

	.service-discover-list ul{
		gap: 10px;
	}

	.service-discover-list ul li{
		width: 100%;
		padding: 8px 12px 8px 35px;
	}
	
	.service-discover-list ul li::before{
		top: 10px;
	}

	.service-discover-image,
	.service-discover-content{
		width: 100%;
	}

	.service-result-list{
		padding: 20px;
	}

	.service-result-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
	
	.service-result-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.service-result-item .icon-box img{
		max-width: 26px;
	}

	.service-result-content{
		width: calc(100% - 65px);
	}

	.service-result-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.service-result-content p{
		font-size: 14px;
	}

	.service-partnership-image{
		margin-top: 20px;
	}

	.service-partnership-image img{
		aspect-ratio: 1 / 0.54;
	}

	.post-single-meta ol li{
        font-size: 16px;
    }
    
    .post-single-meta ol li i{
        font-size: 16px;
    }
    
    .post-image img{
        aspect-ratio: 1 / 0.7;
    }
    
    .post-entry blockquote{
        background-position: 15px 15px;
        padding: 60px 15px 15px 15px;
    }
    
    .post-entry blockquote p{
        font-size: 16px;
    }
    
    .post-entry h2{
        font-size: 26px;
    }

	.tag-links{
		font-size: 18px;
	}

	.case-study-entry h2{
		font-size: 26px;
	}

	.empowering-box{
		padding: 20px;
	}

	.empowering-item{
        margin-bottom: 20px;
    }

	.empowering-item-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.field-trials-step-item{
		width: 100%;
	}

	.shaping-future-image-content{
		padding: 20px;
	}

	.shaping-future-content,
	.shaping-future-image{
		width: 100%;
	}

	.shaping-future-item h3{
		width: calc(45% - 5px);
		font-size: 18px;
		margin-right: 5px;
		padding-right: 5px;
	}

	.shaping-future-item p{
		width: 56%;
	}

	.team-single-image img{
		aspect-ratio: 1 / 1.2;
	}

	.team-about-content{
		padding: 20px;
	}

	.member-social-list{
		margin-bottom: 20px;
	}

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

	.team-member-skill-box,
	.team-member-contact-box{
		padding: 20px;
	}

	.contact-us-box{
        padding: 20px;
    }

	.contact-us-content{
        padding: 20px;
    }

	.contact-info-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.contact-info-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.contact-info-item .icon-box img{
		max-width: 26px;
	}

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

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

	.contact-us-img img{
        aspect-ratio: 1 / 1.1;
    }

	.working-hours-header h3{
		font-size: 18px;
	}

	.working-hours-box{
        bottom: 15px;
        left: 15px;
        padding: 15px;
    }

	.working-hours-body ul li{
		font-size: 14px;
		gap: 10px 20px;
		margin-bottom: 10px;
	}

	.contact-us-form{
        padding: 20px;
    }

	.google-map iframe{
		height: 350px;
	}
	@media (max-width: 768px) {
		.navbar-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
		.navbar-brand img {
			max-height: 40px;
			width: auto;
		}
	}
}
/* Headings: keep sizes sane on phones, despite inline styles */
  .rg-reviews h2 { font-size: clamp(22px, 4.5vw, 32px); font-weight: 800; }
  .rg-reviews h4 { font-size: clamp(15px, 3.6vw, 20px) !important; line-height: 1.4; margin: 0; }
  .rg-reviews h4 strong { font-weight: 800; }
  /* Prevent nested inline 28px from exploding on small screens */
  @media (max-width : 647px ){
    .rg-reviews h4 strong[style] { font-size: inherit !important; }
  }

  /* Viewport with edge fade; enables horizontal dragging */
  .rg-ticker-viewport{
    position:relative; overflow:hidden; touch-action: pan-y; /* allow page to scroll vertically */
    -webkit-mask-image:linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
            mask-image:linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }

  /* Track uses transform; width handled by JS duplication */
  .rg-track{ display:flex; gap:16px; align-items:stretch; will-change: transform; }

  /* Cards */
  .rg-item{
    background:#fff; border-radius:1rem; text-align:center;
    padding:0.9rem 0.9rem 1.1rem; box-shadow:0 6px 18px rgba(0,0,0,.06);
    min-width: 240px; transition:transform .25s ease, box-shadow .25s ease; user-select:none;
  }
  .rg-item:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.10); }

  /* Logos fixed to 177x75 */
  .rg-logo{ width:177px; height:75px; object-fit:contain; display:block; margin:0 auto .45rem; }

  /* Stars + colors */
  .rg-stars{ font-size:1rem; line-height:1; margin:.2rem 0 .45rem; }
  .rg-stars i, .rg-stars .fa, .rg-stars .fas, .rg-stars .fa-solid{ color:#fbbc05 !important; }

  /* Numbers: big + #045c9c */
  .rg-count, .rg-count .counter{ color:#045c9c !important; font-size:2.6rem !important; font-weight:800 !important; line-height:1.1 !important; }

  /* “See All” link: bigger + #045c9c */
  .rg-link{ color:#045c9c !important; font-size:1.125rem !important; font-weight:700 !important; text-decoration:none; }
  .rg-link:hover{ text-decoration:underline; }

  /* Compact on phones */
  @media (max-width : 972px ){
    .rg-item{ min-width: 210px; }
    .rg-count, .rg-count .counter{ font-size:2.2rem !important; }
    .rg-track{ gap:12px; }
    .rg-logo{ width:160px; height:68px; }
  }

	.slicknav_icon .slicknav_icon-bar {
		display: block;
		height: 3px;
		width: 22px;
		background-color: #ffffff;
		border-radius: 6px;
		margin: 4px auto !important;
		transition: all 0.1s ease-in-out;
	}
	/* Reviews / Social Proof — Keep desktop proportions on all devices */
	.rg-reviews.py-5 { 
	  padding-top: 40px !important; 
	}

	.rg-reviews h2 {
	  font-size: 2rem !important; /* keep desktop size */
	  line-height: 1.2;
	}

	.rg-reviews h4 {
	  font-size: 1.25rem !important; /* keep desktop size */
	  line-height: 1.4;
	}

	.rg-reviews h4 strong[style*="font-size"] {
	  font-size: 28px !important; /* keep desktop inline size */
	}

	/* Prevent mobile browsers from shrinking text */
		@media (max-width: 767px) {
		  .rg-reviews h2,
		  .rg-reviews h4,
		  .rg-reviews h4 strong[style*="font-size"] {
			font-size: inherit !important;
		  }
		}
/* Ensure overlay can center inside each thumbnail/link */
.video-gallery-image { position: relative; }
.video-gallery-image a.popup-video { display: block; position: relative; }

/* Centered “Play” ring */
.video-play-border-button{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;            /* clicks go to the link beneath */
}

/* Ring + label */
.video-play-border-button span{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  background: #0aa5e154;           /* requested background color (transparent) */
  color: var(--white-color);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 16px;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

/* Subtle lift on hover (desktop only) */
.rg-item:hover .video-play-border-button span{
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* Smaller on phones */
@media (max-width: 767.98px){
  .video-play-border-button span{ width: 80px; height: 80px; font-size: 14px; }
}

/* Keep mobile interactions natural; no custom cursor overlay */
@media (hover: none), (pointer: coarse){
  html, body, a, button { cursor: auto !important; }
  a.popup-video { touch-action: manipulation; }
}

	/************************************/
/***  Featured Collections (updated) ***/
/************************************/

/* Card */
.featured-collections-item {
  height: calc(100% - 40px);
  margin-bottom: 120px;
}

/* Image wrapper */
.featured-collections-image {
  position: relative;
  border-radius: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

/* Hover tint */
.featured-collections-image::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scale(0);
  background: var(--primary-color);
  border-radius: 20px;
  opacity: 10%;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}
.featured-collections-item:hover .featured-collections-image::before {
  transform: scale(1);
}

/* Optional bottom fade */
.featured-collections-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}

/* Image styling */
.featured-collections-image figure { display: block; }
.featured-collections-image figure img {
  width: 100%;
  aspect-ratio: 1 / 0.77;
  object-fit: cover;
  border-radius: 20px;
  transition: all 0.4s ease-in-out;
}
.featured-collections-item:hover .featured-collections-image figure img {
  transform: scale(1.1);
}

/* ===== Centered Label (blue bg, white text) ===== */
.featured-collections .case-study-label,
.featured-collections .featured-collections-label {
  position: absolute;
  top: 45%; /* slightly above true center to allow btn below */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-block;

  background: rgba(10,165,225,0.92); /* #0aa5e1 with opacity */
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  max-width: 90%;
  word-break: break-word;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

/* ===== Case-study-btn under the text ===== */
.featured-collections-btn {
  position: absolute;
  top: calc(45% + 40px); /* just under the label */
  left: 50%;
  transform: translate(-50%, 0) scale(0);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease-in-out;
  z-index: 3; /* stays in same layer as label */
}
.featured-collections-item:hover .featured-collections-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.featured-collections-btn a {
  background: var(--accent-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.35s ease-in-out;
}
.featured-collections-btn a:hover { background: var(--white-color); }
.featured-collections-btn a img {
  width: 100%;
  max-width: 24px;
  transition: 0.35s ease-in-out;
}
.featured-collections-btn a:hover img { transform: rotate(45deg); }

/* Title below card */
.featured-collections-content h2 {
  font-size: 20px;
  line-height: 1.4em;
}
.featured-collections-content h2 a { color: inherit; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .featured-collections .case-study-label,
  .featured-collections .featured-collections-label {
    font-size: 22px;
    padding: 12px 20px;
  }
  .featured-collections-btn {
    top: calc(45% + 36px);
  }
}
@media (max-width : 972px ){
  .featured-collections { padding: 44px 0 56px; }
  .featured-collections .case-study-label,
  .featured-collections .featured-collections-label {
    font-size: 20px;
    padding: 10px 16px;
    max-width: 92%;
  }
  .featured-collections-btn {
    top: calc(45% + 32px);
  }
}
.featured-collections .col-lg-4:nth-of-type(3) .featured-collections-label {
  min-width: 220px;
  white-space: nowrap;
  text-align: center;
}
/* ===== EXACT screenshot look, joined panels, no gap ===== */
.rgp-joined { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* remove gutters so columns TOUCH */
.rgp-joined .row.g-0 > [class*="col-"]{ padding-left:0; padding-right:0; }

/* LEFT: blue frame */
.rgp-left{
  background:#0aa5e1;
  border-radius:24px 0 0 24px;          /* outer corners only */
  padding:22px;                         /* frame thickness */
  height:100%;
}
@media (max-width: 991.98px){
  .rgp-left{ border-radius:24px; margin-bottom:16px; }
}

/* white inner card */
.rgp-left-inner{
  background:#fff; border-radius:20px;
  padding:28px;
  height:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* badge */
.rgp-badge{ display:inline-flex; align-items:center; gap:10px; 
  background:#f2f7fb; color:#0a3d6d; border-radius:999px; 
  padding:8px 14px; font-weight:700; font-size:14px; margin-bottom:18px; }
.rgp-badge span{ width:6px; height:6px; border-radius:50%; background:#0aa5e1; display:inline-block; }

/* left title + sub */
.rgp-left-title{ color:#0a3d6d; font-weight:800; line-height:1.06;
  font-size: clamp(28px,5.2vw,52px); margin:0 0 14px; }
.rgp-left-sub{ color:#3a5a74; font-size: clamp(15px,2.1vw,18px); margin:0 0 16px; }

/* contact rows */
.rgp-item{ display:flex; align-items:center; gap:18px;
  border-bottom:1px solid #e8eef5; padding:22px 0; }
.rgp-item-first{ padding-top:0; }
.rgp-item-last{ border-bottom:none; padding-bottom:0; }
.rgp-ico{ width:64px; height:64px; border-radius:50%; background:#0aa5e1; 
  display:flex; align-items:center; justify-content:center; flex:0 0 64px; }
.rgp-ico img{ max-width:32px; }
.rgp-label{ margin:0 0 6px; color:#6b86a0; font-size:14px; }
.rgp-item h3{ font-size:20px; margin:0; }
.rgp-item h3 a{ color:#0aa5e1; text-decoration:none; font-weight:800; }

/* RIGHT: deep blue panel */
.rgp-right{
  background:#0a5a9d;
  color:#fff;
  border-radius:0 24px 24px 0;         /* outer corners only */
  padding:28px;
  height:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
@media (max-width: 991.98px){
  .rgp-right{ border-radius:24px; }
}

/* right title + sub */
.rgp-right-title{ color:#fff; font-weight:800; line-height:1.06;
  font-size: clamp(26px,4.4vw,46px); margin:0 0 10px; }
.rgp-right-sub{ color:#e7f0f8; font-size: clamp(14px,1.9vw,18px); margin:0; }

/* inputs */
.rgp-input, .rgp-textarea{
  background:#fff !important; border:none !important; 
  border-radius:18px !important; padding:16px 18px !important;
  font-size:16px; box-shadow:none !important; outline:none !important;
}
.rgp-textarea{ min-height:140px; resize:vertical; }

/* submit button */
.rgp-submit{ background:#06aee0 !important; border:none; border-radius:12px; 
  padding:16px 18px; font-weight:800; letter-spacing:.2px; }
.rgp-submit:hover{ filter:brightness(1.05); }

/* add a subtle seam line at desktop (optional) */
@media (min-width: 992px){
  .rgp-right{ box-shadow: inset 1px 0 0 rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.06); }
}
/* Adjust title width so it stops before hitting image */
.featured-collections .section-title {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .featured-collections .section-title {
    text-align: center;
  }
}

/* Make padding smaller on mobile */
@media screen and (max-width: 768px) {
  .featured-collections {
    padding-top: 50 px !important;
  }
}


/* === Desktop Styles === */
/* ===== RG Why (scoped to #rgWhy only) ===== */
#rgWhy.inspection-coverage{
  position: relative;
  background: url('../images/big-foot.webp') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  display: flex;
  align-items: center;
  min-height: 600px;
}
#rgWhy.inspection-coverage::before{
  content:''; position:absolute; inset:0;
  background: var(--primary-color);
  opacity: .30;
}

/* Video / Play */
#rgWhy .video-certification-box{ text-align:center; margin-right:30px; }
#rgWhy .video-play-button a{ width:74px; height:74px; margin:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#0aa5e1; color:#fff; }
#rgWhy .video-play-button a i{ font-size:30px; color:#fff; }
#rgWhy .video-play-button a:before,
#rgWhy .video-play-button a:after{
  content:''; position:absolute; top:-30%; left:-30%; width:160%; height:160%;
  border:50px solid #fff; opacity:.30; border-radius:50%; transform:scale(.6); z-index:-1;
  animation:border-zooming 1.2s infinite linear;
}
#rgWhy .video-play-button a:after{ animation-delay:.3s; }
@keyframes border-zooming{ 100%{ transform:scale(1); opacity:0; } }

/* --- Certifications (Swiper) --- */
#rgWhy .certification-slider{ margin-top:120px; }
#rgWhy .certification-slider .swiper{ overflow:hidden; }
#rgWhy .certification-slider .swiper-wrapper{ align-items:center; }
#rgWhy .certification-slider .swiper-slide{
  width:auto; padding:8px 18px; display:flex; align-items:center; justify-content:center;
  opacity:.9; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease, transform .2s ease;
}
#rgWhy .certification-slider .swiper-slide img{ height:44px; width:auto; }
#rgWhy .certification-slider .swiper:hover .swiper-slide{ filter:grayscale(0); opacity:1; }

/* Content card */
#rgWhy .inspection-content-box{
  position:relative; background:#fff; border-radius:30px; padding:40px; z-index:1;
}

/* Headings inside the card (your existing sizes are fine) */
#rgWhy .section-title h2{ font-size:36px; line-height:1.2; }
#rgWhy .section-title h3{ font-size:18px; text-transform:capitalize; }

/* ===== Mobile tweaks ===== */
@media (max-width: 767px){
  /* Use vertical background on phones */
  #rgWhy.inspection-coverage{
    background-image: url('../images/big-foot-vertical.webp');
    background-position: center bottom;
    background-size: cover;
    padding: 60px 0;
    min-height: 100vh;
    display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  }

  /* Smaller play button + logos */
  #rgWhy .video-certification-box{ margin-bottom:32px; }
  #rgWhy .video-play-button a{ width:60px; height:60px; }
  #rgWhy .video-play-button a:before, #rgWhy .video-play-button a:after{
    width:140%; height:140%; border:40px solid #fff;
  }
  #rgWhy .certification-slider{ margin-top:40px; }
  #rgWhy .certification-slider .swiper-slide img{ height:36px; }

  /* Scrollable text panel with edge fade + touch momentum */
  #rgWhy .inspection-content-box{
    max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable; padding: 25px 20px; border-radius:20px;
    box-shadow: 0 0 12px rgba(0,0,0,.10); width:100%; margin-top:-6px;
    /* edge fade so users see it's scrollable */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    overscroll-behavior: contain;
  }
  #rgWhy .inspection-content-box h4{ font-size:18px; margin-top:20px; }
  #rgWhy .inspection-content-box p{ font-size:16px; line-height:1.5; }

  /* skinny scrollbar */
  #rgWhy .inspection-content-box::-webkit-scrollbar{ width:6px; }
  #rgWhy .inspection-content-box::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); border-radius:3px; }
  #rgWhy .inspection-content-box{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
}

/* === Latest Projects (scoped) === */
#latestProjects { padding-bottom: 120px ; background: #f9f9f9; overflow: hidden; }

#latestProjects .section-title { text-align: center; margin-bottom: 60px; }

/* Viewport */
#latestProjects .latest-projects-gallery {
  position: relative;
  overflow: hidden;                 /* hide edges; we handle drag ourselves */
  touch-action: pan-y;              /* keep page vertical scroll on touch */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* Hide scrollbars just here (optional) */
#latestProjects .latest-projects-gallery::-webkit-scrollbar { display: none; }
#latestProjects .latest-projects-gallery { -ms-overflow-style: none; scrollbar-width: none; }
#latestProjects .latest-projects-gallery.is-dragging,
#latestProjects .latest-projects-gallery:active { cursor: grabbing; }
#latestProjects .latest-projects-gallery { cursor: grab; }

/* Track (JS-driven; disable any CSS animations here) */
#latestProjects #lpTrack {
  display: flex;
  gap: 30px;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  animation: none !important;       /* kills the old keyframe animation */
  user-select: none;
}

/* Cards (your original sizes) */
#latestProjects .project-image {
  flex: 0 0 auto;
  width: 600px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
}
#latestProjects .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Optional: make cards narrower on small phones (keeps drag comfortable) */
@media (max-width: 576px){
  #latestProjects .project-image { width: 85vw; height: 60vw; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  #latestProjects #lpTrack { transition: none !important; }
}

/* === Cool Projects Hero Section === */
/* === Cool Projects Hero Section === */
.cool-projects-hero {
  background: var(--bg-color);
  padding: 40px 0 100px;
}

.cool-projects-hero .hero-content-body {
  display: flex;
  justify-content: flex-end;
  padding-top: 40px;
  margin-right: 200px; /* Slightly to the left */
  margin-bottom: 40px;
  border-bottom: 1px solid var(--dark-divider-color);
}

/* === Hero Content Footer – Projects Grid === */
.cool-projects-hero .hero-content-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.hero-project-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
}

.hero-project-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
  min-width: 180px;
  text-decoration: none;
  transition: transform 0.3s ease-in-out;
}

.hero-project-box:hover {
  transform: translateY(-4px);
}

.project-logo-box {
  width: 190px;
  height: 56px;
  background-color: var(--dark-divider-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.project-logo-box img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.hero-project-box p {
  color: #045a9d;
  font-weight: 700;
  font-size: 15px;
  margin: 0;
  text-align: center;
}

/* === Hero Images Block === */
.cool-projects-hero .hero-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-left: 15px;
}

.cool-projects-hero .hero-image-box {
  width: calc(33.33% - 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.cool-projects-hero .hero-img-1,
.cool-projects-hero .hero-img-2,
.cool-projects-hero .hero-img-3,
.cool-projects-hero .hero-img-4,
.cool-projects-hero .hero-img-5 {
  width: 100%;
}

.cool-projects-hero figure {
  display: block;
  width: 100%;
  border-radius: 20px;
}

.cool-projects-hero img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.cool-projects-hero .hero-img-1 img,
.cool-projects-hero .hero-img-4 img,
.cool-projects-hero .hero-img-5 img {
  aspect-ratio: 1 / 2.18;
}

.cool-projects-hero .hero-img-2 img,
.cool-projects-hero .hero-img-3 img {
  aspect-ratio: 1 / 1.01;
}

/* === Responsive Design === */
@media (max-width: 992px) {
  .hero-project-box {
    width: 45%;
  }
}

@media (max-width: 576px) {
  .hero-project-box {
    width: 100%;
  }

  .project-logo-box {
    width: 160px;
  }

  .cool-projects-hero .hero-content-body {
    justify-content: center;
    margin-right: 0;
  }
}
/* 2x2 layout only for hero project boxes inside hero-content-footer */
.cool-projects-hero .hero-content-footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two per row */
  gap: 40px 60px; /* spacing between rows and columns */
  justify-content: center;
  max-width: 900px;
  margin: 40px auto 0;
}

.cool-projects-hero .hero-project-box {
  width: 100%; /* Full width inside each column */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: transform 0.3s ease-in-out;
}

.cool-projects-hero .hero-project-box:hover {
  transform: translateY(-4px);
}
@media (max-width: 576px) {
  .cool-projects-hero {
    padding: 50px 0 80px; /* Less padding top and bottom on mobile */
  }

  .cool-projects-hero .hero-content-footer {
    grid-template-columns: repeat(2 fr); /* Two columns instead of stacked */
    gap: 30px 20px; /* Smaller gaps on small screens */
    padding: 0 15px; /* Add side padding */
  }

  .hero-project-box {
    width: 100%;
  }

  .project-logo-box {
    width: 160px;
  }

  .cool-projects-hero .hero-content-body {
    justify-content: center;
    margin-right: 0;
  }
}
/* === Downspouts Styles Section === */
.downspouts-style {
    position: relative;
    background-image: linear-gradient(180deg, transparent 20%, #f8f8f8 70%), url("../images/background-downspouts.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 160px 0;
}

.downspouts-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: stretch; /* ensures equal height on desktop */
}
.downspouts-image {
    display: flex;
    align-items: stretch;
    padding-top: 40px; /* This aligns image better with content */
}

.downspouts-image,
.downspouts-content {
    flex: 1 1 50%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.downspouts-image {
    align-items: stretch;
}

.downspouts-image figure {
    flex: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
}

.downspouts-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    display: block;
}

/* Right Column Content Box */
.downspouts-content {
    background-color: var(--white-color);
    border-radius: 30px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Title */
.downspouts-content .section-title h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #045a9d;
}

.downspouts-content .section-title h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

.downspouts-content .section-title p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

/* Feature List Styles */
.downspouts-feature-list {
    margin-top: 0px;
}

.feature-style-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.feature-style-item .icon-box {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-style-item .icon-box img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 30px;
}

/* Text beside icon */
.feature-style-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.2;
}

.feature-style-content p {
    margin: 0;
    font-size: 15px;
    color: #045a9d;
    line-height: 1.5;
    font-weight: 600;
}

.downspouts-button {
    margin-top: 30px;
}

.downspouts-button .btn-default {
    background-color: #045a9d;
    color: #fff;
    padding: 12px px;
    border-radius: 30px;
    font-weight: 300;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    font-size: 16px;
}

.downspouts-button .btn-default .btn-icon {
    font-size: 18px;
    display: inline-block;
    margin-top: 2px;
}

.downspouts-button .btn-default:hover {
    background-color: #034a82;
    color: #fff;
}

/* Responsive fix to stack on smaller screens */
@media (max-width: 991px) {
    .downspouts-flex {
        flex-wrap: wrap;
    }
}


/****************************************/
/***   Gutter Selection Process CSS   ***/
/****************************************/
.gutter-selection-process {
    background: var(--bg-color);
    padding: 40px 0 50px;
}

.gutter-selection-item {
    position: relative;
    text-align: center;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.gutter-selection-image {
    position: relative;
    max-width: 150px;
    width: 100%;
    margin: 0 auto 30px;
}

.gutter-selection-image figure,
.gutter-selection-image img {
    display: block;
    border-radius: 10%;
}

/* Hide arrows on mobile */
@media (max-width: 991px) {
  .gutter-selection-process .gutter-selection-image::before {
    display: none !important;
  }
}

/* Arrow after Step 1 */
.gutter-selection-process .row > .col-lg-3:nth-of-type(1) .gutter-selection-image::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 135px;
    height: 23px;
    background-image: url('../images/icon-right-up-arrow.svg');
    background-size: 100% auto;
    background-position: right center;
    background-repeat: no-repeat;
    transform: translate(155px, -50%);
    z-index: 1;
    display: block;
}

/* Arrow after Step 2 */
.gutter-selection-process .row > .col-lg-3:nth-of-type(2) .gutter-selection-image::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 135px;
    height: 23px;
    background-image: url('../images/icon-right-down-arrow.svg');
    background-size: 100% auto;
    background-position: right center;
    background-repeat: no-repeat;
    transform: translate(155px, -50%);
    z-index: 1;
    display: block;
}

/* Arrow after Step 3 */
.gutter-selection-process .row > .col-lg-3:nth-of-type(3) .gutter-selection-image::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 135px;
    height: 23px;
    background-image: url('../images/icon-right-up-arrow.svg');
    background-size: 100% auto;
    background-position: right center;
    background-repeat: no-repeat;
    transform: translate(155px, -50%);
    z-index: 1;
    display: block;
}

/* No arrow after Step 4 */
.gutter-selection-process .row > .col-lg-3:nth-of-type(4) .gutter-selection-image::before {
    display: none;
}

.gutter-selection-content {
    margin: 0 1.563vw;
}

.gutter-selection-item .gutter-selection-content h3 {
    font-size: 20px;
    line-height: 1.4em;
    margin-bottom: 15px;
}

.gutter-selection-item .gutter-selection-content p {
    color: #045c9c;
    margin: 0;
}
/****************************************/
/***   when you dont have gutters    ***/
/****************************************/

.video-play-border-button {
	pointer-events: auto; /* Re-enable click on the button */
}
/* Default (for desktop): 16:9 */
.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

/* For tablets & phones (vertical video): 9:16 */
@media screen and (max-width: 1024px) {
  .mfp-iframe-scaler {
    padding-top: 177.77%; /* 9:16 aspect ratio for vertical video */
  }
}
.when-you-dont-have-gutters {
	background-repeat: no-repeat;
	background-position: left -60px bottom 80px;
	background-size: auto;
	padding: 10px 0;
	position: relative;
}

.when-you-dont-have-gutters .why-choose-image {
	position: relative;
}

.when-you-dont-have-gutters .why-choose-image figure {
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.when-you-dont-have-gutters .why-choose-image figure img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	object-fit: cover;
	aspect-ratio: 1 / 1.16;
}

/* UNIQUE <p> STYLING */
.when-you-dont-have-gutters .gutters-warning-text {
	font-size: 18px;
	line-height: 1.6;
	color: #045a9d;
	font-weight: 800;
	margin-top: 30px;
	background-color: #f7f7f7;
	padding: 20px;
	border-left: 5px solid #be2418;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* VIDEO PLAY BUTTON */
.video-play-border-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.video-play-border-button a {
	background: #0aa5e154;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	transition: all 0.3s ease;
}

.video-play-border-button a:hover {
	background: #fff;
	color: #000;
}

.when-you-dont-have-gutters p.wow {
	font-weight: 500;
	color: #034a82;
}
.when-you-dont-have-gutters .why-choose-item-content p {
	font-weight: 600;
	color: #034a82; /* Optional: brand color */
}

@media (max-width: 768px) {
    .video-play-border-button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px; /* Adjust this if needed */
    }
    .video-play-border-button a {
      margin: 0 auto;
    }
  }
.video-play-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	pointer-events: none; /* Allow clicks to pass through */
}
/* ========== Shared viewport styles (scoped by IDs) ========== */

/* Cancel any global .rg-track keyframe animation INSIDE these sections only */
#rgLogos .rg-track,
#rgVideo .rg-track { animation: none !important; }

#rgLogos .rg-ticker-viewport,
#rgVideo .rg-ticker-viewport {
  position: relative;
  overflow: hidden;            /* hide edges; page still scrolls vertically */
  cursor: grab;
  touch-action: pan-y;         /* don't block vertical page scroll */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
#rgLogos .rg-ticker-viewport.is-dragging,
#rgVideo .rg-ticker-viewport.is-dragging,
#rgLogos .rg-ticker-viewport:active,
#rgVideo .rg-ticker-viewport:active { cursor: grabbing; }

#rgLogos .rg-track,
#rgVideo  .rg-track {
  display: flex;
  gap: 20px;                   /* logos use 20px as well; adjust if you want 16px for logos */
  align-items: stretch;
  width: max-content;
  will-change: transform;
}

/* ========== Logos sizing ========== */
#rgLogos .rg-item{
  background:#fff; border-radius:1rem; text-align:center;
  padding:0.9rem 0.9rem 1.1rem; box-shadow:0 6px 18px rgba(0,0,0,.06);
  min-width: 240px; transition:transform .25s ease, box-shadow .25s ease; user-select:none;
}
#rgLogos .rg-item:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
#rgLogos .rg-logo{ width:177px; height:75px; object-fit:contain; display:block; margin:0 auto .45rem; }
#rgLogos .rg-stars{ font-size:1rem; line-height:1; margin:.2rem 0 .45rem; }
#rgLogos .rg-stars i{ color:#fbbc05 !important; }
#rgLogos .rg-count, #rgLogos .rg-count .counter{ color:#045c9c !important; font-size:2.6rem !important; font-weight:800 !important; line-height:1.1 !important; }
#rgLogos .rg-link{ color:#045c9c !important; font-size:1.125rem !important; font-weight:700 !important; text-decoration:none; }
#rgLogos .rg-link:hover{ text-decoration:underline; }

/* ========== Video testimonial original size (locked) ========== */
#rgVideo { --video-item-width: 280px; }   /* set to your original size */
#rgVideo .rg-item{ flex: 0 0 var(--video-item-width); width: var(--video-item-width); max-width: var(--video-item-width); }
#rgVideo .video-gallery-image{ overflow:hidden; border-radius:10px; }
#rgVideo .video-gallery-image img{ display:block; width:100%; height:auto; border-radius:10px; object-fit:cover; }

/* Optional: hide scrollbars inside these viewports only */
#rgLogos .rg-ticker-viewport::-webkit-scrollbar,
#rgVideo .rg-ticker-viewport::-webkit-scrollbar { display:none; }
#rgLogos .rg-ticker-viewport, #rgVideo .rg-ticker-viewport { -ms-overflow-style:none; scrollbar-width:none; }

/* Compact tweaks for logos on phones (optional) */
@media (max-width: 972px){
  #rgLogos .rg-item{ min-width:210px; }
  #rgLogos .rg-count, #rgLogos .rg-count .counter{ font-size:2.2rem !important; }
  #rgLogos .rg-track{ gap:12px; }
  #rgLogos .rg-logo{ width:160px; height:68px; }
}
/*********************************************************
 * A) MOBILE: hide the "Play" cursor text (Video only)
 *    Works whether your cursor plugin uses ::before/::after
 *    or reads the data attribute.
 *********************************************************/
@media (max-width: 767.98px){
  /* If the cursor text is rendered via pseudo-elements */
  #rgVideo [data-cursor-text]::before,
  #rgVideo [data-cursor-text]::after{
    display: none !important;
    content: none !important;
  }
}

/*********************************************************
 * B) Keep titles BIG in BOTH sections (Logos + Video),
 *    overriding any global ".rg-reviews" rules on mobile.
 *    Place AFTER your existing ".rg-reviews" CSS.
 *********************************************************/
#rgLogos.rg-reviews h1,
#rgVideo.rg-reviews h1{
  /* Bigger floor on phones, strong but not huge on desktop */
  font-size: clamp(32px, 6.2vw, 56px) !important;
  line-height: 1.1;
  font-weight: 800;
}

#rgLogos.rg-reviews h2,
#rgVideo.rg-reviews h2{
  font-size: clamp(22px, 4.4vw, 32px) !important;
  line-height: 1.2;
  font-weight: 800;
}

#rgLogos.rg-reviews h4,
#rgVideo.rg-reviews h4{
  font-size: clamp(17px, 3.2vw, 20px) !important;
  line-height: 1.35;
}

/* If your <h4><strong style="font-size:...">...</strong></h4> exists,
   make sure it does NOT shrink below the h4 size on phones. */
@media (max-width: 767.98px){
  #rgLogos.rg-reviews h4 strong[style*="font-size"],
  #rgVideo.rg-reviews h4 strong[style*="font-size"]{
    font-size: inherit !important;
  }
}

/*********************************************************
 * C) Video thumbnails: keep ORIGINAL size (no growing)
 *********************************************************/
#rgVideo { --video-item-width: 280px; } /* ← change if your original is different */
#rgVideo .rg-item{
  flex: 0 0 var(--video-item-width);
  width: var(--video-item-width);
  max-width: var(--video-item-width);
}
#rgVideo .video-gallery-image{ overflow: hidden; border-radius: 10px; }
#rgVideo .video-gallery-image img{
  display: block; width: 100%; height: auto; border-radius: 10px; object-fit: cover;
}
/***************************************
 * Crew Hero — fully scoped (updated)
 * - Background image on .crew-hero__bg layer
 * - Mobile uses vertical image
 * - Gradient overlay now ALSO on mobile
 ***************************************/
.crew-hero{
  position: relative;
  padding: 220px 0 170px;
  background: none; /* moved to bg layer */
  color: #fff;
  overflow: hidden;
}

/* Gradient overlay (desktop/tablet/mobile) */
.crew-hero::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(352deg, rgba(9, 25, 42, 0.00) 0%, #002144d9 60%);
  z-index: 1;
}

/* keep content above overlay */
.crew-hero .container{ position: relative; z-index: 2; }

/* Titles */
.crew-hero__title h3{
  margin: 0 0 8px; font-weight: 700; color: #bfe0ff;
}
.crew-hero__title h1{
  margin: 0 0 12px; font-weight: 800; line-height: 1.05;
  /* keep titles big on all devices */
  font-size: clamp(34px, 6.2vw, 60px);
}
.crew-hero__title p{
  max-width: 740px; margin: 0; color: #e7f0f8;
}

/* Buttons */
.crew-hero__btns{
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  margin-top: 26px;
}

/* Body */
.crew-hero__body{
  display: flex; flex-wrap: wrap; gap: 20px 36px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 36px; padding-top: 32px;
}

/* Stats */
.crew-hero__stat{
  display: flex; align-items: center; gap: 10px;
}
.crew-hero__stat h2{
  width: auto; min-width: 84px;
  margin: 0; font-size: 46px; color: #fff; line-height: 1;
}
.crew-hero__stat p{
  margin: 0; color: #e7f0f8;
}

/* Faces band */
.crew-hero__faces{
  display: inline-flex; align-items: center; gap: 8px;
}
.crew-hero__face{
  position: relative; margin-left: -14px;
}
.crew-hero__face:first-child{ margin-left: 0; }
.crew-hero__face figure{
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid #fff; overflow: hidden; margin: 0;
}
.crew-hero__face img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.crew-hero__faces-copy{
  margin-left: 8px;
}
.crew-hero__faces-copy p{
  margin: 0; color: #e7f0f8; font-size: 14px;
}
.crew-hero__faces-copy h3{
  margin: 0; color: #fff; font-size: 16px; font-weight: 700;
}

/* Video circle (rotating) */
.crew-hero__video{ text-align: right; }
.crew-hero__video a{ display: inline-block; border-radius: 50%; }
.crew-hero__video img{
  width: 100%; max-width: 120px; border-radius: 50%;
  animation: crew-rotate 20s linear infinite;
}
.crew-hero__video a:hover img{ animation-play-state: paused; }

@keyframes crew-rotate{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 991.98px){
  .crew-hero{ padding: 160px 0 120px; }
  .crew-hero__video{ text-align: left; margin-top: 28px; }
}
@media (max-width: 575.98px){
  .crew-hero{ padding: 120px 0 90px; }
  .crew-hero__stat h2{ font-size: 40px; }
  .crew-hero__title h1{ font-size: clamp(30px, 8vw, 46px); }
}

/* Optional: hide custom cursor "Play" on mobile just here */
@media (max-width: 767.98px){
  #crewHero [data-cursor-text]::before,
  #crewHero [data-cursor-text]::after{ display:none !important; content:none !important; }
}

/* === Parallax background layer (scoped) === */
.crew-hero__bg{
  position: absolute;
  inset: -15% 0 -15% 0; /* bleed top/bottom so edges never show during parallax */
  background-image: url('../images/crew-hero-bg.webp'); /* desktop/tablet default */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: translateY(var(--crewParallax, 0px));
  will-change: transform;
  z-index: 0; /* below overlay & content */
  pointer-events: none;
}

/* Keep gradient overlay above the bg */
.crew-hero::before{ z-index: 1; }

/* Accessibility: disable parallax for reduced motion */
@media (prefers-reduced-motion: reduce){
  .crew-hero__bg{ transform: none !important; }
}

/* PHONE: use a vertical image AND KEEP the gradient overlay */
@media (max-width: 575.98px){
  /* ensure the gradient is active on mobile too */
  .crew-hero::before{
    content: '';
    display: block !important;
    position: absolute; inset: 0;
    background: linear-gradient(270deg, rgba(9, 25, 42, 0.00) 0%, rgba(9, 25, 42, 0.85) 60%);
    z-index: 1;
  }
  .crew-hero__bg{
    background-image: url('../images/crew-hero-bg-vertical.webp') !important;
    background-position: center top;
    background-size: cover;
  }
}

/********************************************
 * Virtual Tour section (scoped, no conflicts)
 ********************************************/
.virtual-tour{
  margin-bottom: 70px;             /* moved from inline */
	margin-top: 10px
}

/* Make this container span full width like your inline did */
.virtual-tour .container{
  width: 100%;
  max-width: 100%;
}

/* Title sizes + spacing (keeps your brand heading feel) */
.virtual-tour h2{
  font-size: clamp(22px, 4.5vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 .5rem;
}
.virtual-tour h1{
  font-size: clamp(32px, 6.2vw, 56px);
  line-height: 1.1;
  font-weight: 800;
  margin: .25rem 0 .5rem;
}
.virtual-tour h4{
  font-size: clamp(16px, 3.2vw, 20px);
  line-height: 1.4;
  margin: 0;
}

/* Brand color helpers to mirror your inline styles */
.virtual-tour .brand-accent{ color: #00ade9; }  /* used on the H2 */
.virtual-tour .brand-green{ color: #87a94b; }   /* "The" + outer strong */
.virtual-tour .brand-blue{  color: #045a9d; }   /* inner "Rain Gutter" */

/* Embed (moved from inline) */
.virtual-tour-embed iframe{
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

/* Optional: taller embed on larger screens */
@media (min-width: 768px){
  .virtual-tour-embed iframe{ height: 480px; }
}
@media (min-width: 1200px){
  .virtual-tour-embed iframe{ height: 560px; }
}
/* ===== Mobile hint for the Virtual Tour (CSS-only, no HTML changes) ===== */

/* default: no hint on desktop/tablet */
.virtual-tour-embed{ position: relative; }
.virtual-tour-embed::after{ content: none; }

/* show a small hand + "Tap & drag" chip on touch devices */
@media (hover: none) and (pointer: coarse){
  .virtual-tour-embed::after{
    content: "Tap & drag";
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 8px 12px 8px 36px;   /* left space for the icon */
    font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #002c5d;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    pointer-events: none;         /* never blocks the iframe */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23002c5d'%3E%3Cpath d='M7 11.5V7a1.5 1.5 0 1 1 3 0v3.5h.5V6a1.5 1.5 0 1 1 3 0v5.5H14V6.75a1.5 1.5 0 1 1 3 0V13l1.39.8A3 3 0 0 1 20 16.4V19a3 3 0 0 1-3 3H12a6 6 0 0 1-6-6v-3.5a1.5 1.5 0 1 1 3 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px 50%;
    background-size: 18px 18px;
  }
}

/* fallback for small screens if the device hints aren't supported */
@media (max-width: 767.98px){
  .virtual-tour-embed::after{
    content: "Tap & drag";
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 8px 12px 8px 36px;
    font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #002c5d;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23002c5d'%3E%3Cpath d='M7 11.5V7a1.5 1.5 0 1 1 3 0v3.5h.5V6a1.5 1.5 0 1 1 3 0v5.5H14V6.75a1.5 1.5 0 1 1 3 0V13l1.39.8A3 3 0 0 1 20 16.4V19a3 3 0 0 1-3 3H12a6 6 0 0 1-6-6v-3.5a1.5 1.5 0 1 1 3 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px 50%;
    background-size: 18px 18px;
  }
}

 /* ===== Mobile scroll/drag hints (scoped to #rgWhy) ===== */
/* ===== Mobile scroll/drag hints (scoped to #rgWhy) ===== */
/* ===== Mobile scroll/drag hints (scoped to #rgWhy) ===== */
@media (max-width: 767px){
  /* make sure overlays can position properly */
  #rgWhy .certification-slider .swiper{ position: relative; }
  #rgWhy .inspection-content-box{ position: relative; }

  /* shared hint styles */
  #rgWhy .rg-hint{
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    color: #ffffff;
    background: rgba(0,0,0,.55);
    pointer-events: none;           /* never block taps */
    z-index: 5;
    opacity: 1;
    transform: translateY(0);
    animation: rgHintPulse 1.2s ease-in-out infinite alternate;
  }
  /* horizontal swipe hint — bottom-left on the logo slider */
  #rgWhy .swipe-hint{ bottom: 8px; left: 8px; }

  /* vertical scroll hint — top-right inside the text card */
  #rgWhy .scroll-hint{ top: 8px; right: 8px; }

  /* icon nudge animations */
  #rgWhy .swipe-hint .icon{ display:inline-block; font-size: 14px; animation: rgHintSlideX .9s ease-in-out infinite alternate; }
  #rgWhy .scroll-hint .icon{ display:inline-block; font-size: 14px; animation: rgHintSlideY .9s ease-in-out infinite alternate; }

  /* graceful hide */
  #rgWhy .rg-hint-hide{ opacity: 0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease; animation: none; }
}

/* keyframes */
@keyframes rgHintPulse{ from{ opacity:.9 } to{ opacity:1 } }
@keyframes rgHintSlideX{ from{ transform: translateX(-2px) } to{ transform: translateX(2px) } }
@keyframes rgHintSlideY{ from{ transform: translateY(-2px) } to{ transform: translateY(2px) } }

/*************************************/
/***       Our FAQ's css       ***/
/*************************************/

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

.faqs-images{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 30px;
	margin-right: 20px;
}

.faqs-img-1{
	width: calc(47% - 15px);
}

.faqs-img-2{
	width: calc(53% - 15px);
}

.faqs-img-1 figure,
.faqs-img-2 figure{
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.faqs-img-1 figure img,
.faqs-img-2 figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.faqs-img-1 figure img{
	aspect-ratio: 1 / 1.263;
}

.faqs-img-2 figure img{
	aspect-ratio: 1 / 1.585;
}

.need-help-box{
	position: relative;
	background-color: var(--accent-color);
	border-radius: 20px;
	display: flex;
	align-items: center;
	padding: 20px;
	overflow: hidden;
	margin-top: 30px;
}

.need-help-box::before{
	content: '';
    position: absolute;
    right: 0;
	left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: var(--primary-color);
	z-index: 0;
    transition: all 0.4s ease-in-out;
}

.need-help-box:hover::before{
    height: 100%;
}

.need-help-box .icon-box{
	position: relative;
	margin-right: 15px;
	z-index: 1;
}

.need-help-box .icon-box img{
	width: 100%;
	max-width: 40px;
}

.need-help-content{
	position: relative;
	width: calc(100% - 55px);
	z-index: 1;
}

.need-help-content p{
	line-height: normal;
	color: var(--white-color);
	text-transform: capitalize;
	margin: 0;
}

.faq-accordion .accordion-item{
	position: relative;
    background: var(--white-color);
	border-radius: 20px;
	margin-bottom: 30px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
	background: var(--accent-color);
	border-bottom: 1px solid var(--dark-divider-color);
	color: var(--white-color);
	padding: 20px 50px 20px 20px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button.collapsed{
	color: var(--primary-color);
	background: transparent;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "FontAwesome";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 900;
    color: var(--white-color);
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\2b';
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-body{
	background: var(--accent-color);
	padding: 20px 50px 20px 20px;
}

.faq-accordion .accordion-item .accordion-body p{
    color: var(--white-color);
	margin: 0;
}
.faqs-images{
        gap: 20px;
    }

	.faqs-img-2,
	.faqs-img-1{
		width: calc(50% - 10px);
	}

	.faqs-img-2 figure img{
		aspect-ratio: 1 / 1.86;
	}

	.need-help-box{
		padding: 10px 12px;
		margin-top: 20px;
	}

	.need-help-box .icon-box{
		margin-right: 10px;
	}

	.need-help-box .icon-box img{
		max-width: 30px;
	}

	.need-help-content{
		width: calc(100% - 40px);
	}

	.need-help-content p{
		font-size: 14px;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 18px;
		padding: 12px 40px 12px 15px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
        font-size: 16px;
    }

	.faq-accordion .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.faq-accordion .accordion-item .accordion-body p{
		font-size: 14px;
	}
/************************************************************
  VoyageLA • Guy Ziv — Center image with left/right content
  - Image centered by itself
  - Titles + article text on left & right of the image
  - Normal section height, responsive
  - Keeps your previous colors & sizes
  - NOW: text/titles pulled closer to the center image
************************************************************/

/* --- Three-column stage: left | image | right --- */
.rgs-voyage-stage{
  /* Responsive inward "hug" and tighter center gap */
  --nudge: clamp(8px, 1.6vw, 22px);
  --gap:   clamp(8px, 2vw, 24px);

  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) auto minmax(220px, 0.95fr);
  grid-template-areas: "left figure right";
  align-items: center;
  justify-content: center;
  column-gap: var(--gap);
  row-gap: 10px;

  background: #ffffff !important; /* white card, as requested */
}

/* Center column: the image stays perfectly centered */
.rgs-voyage-figure{
  grid-area: figure;
  margin: 0;
  justify-self: center;      /* keep figure centered in the grid */
}
.rgs-voyage-figure img{
  display: block;
  width: clamp(360px, 42vw, 640px); /* dominant but not huge */
  height: auto;
  transform: translateZ(0);  /* prevents hairlines on some GPUs */
}

/* Side columns */
.rgs-voyage-side{
  max-width: 34ch;           /* a touch narrower so they tuck in nicely */
}
.rgs-voyage-left{
  grid-area: left;
  padding-left: 0;            /* remove the old 100px padding */
  justify-self: end;          /* hug the image’s left edge */
  text-align: right;          /* text edge aligns toward the image */
  transform: translateX(var(--nudge)); /* nudge inward toward center */
}
.rgs-voyage-right{
  grid-area: right;
  justify-self: start;        /* hug the image’s right edge */
  text-align: left;           /* text edge aligns toward the image */
  transform: translateX(calc(-1 * var(--nudge))); /* nudge inward */
}

/* Titles — keep your palette and sizes */
.rgs-voyagela-hero-title{
  margin: 0 0 6px 0;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  color: #045a9d;
}
.rgs-voyagela-hero-subtitle{
  margin: 0 0 10px 0;
  font-size: clamp(20px, 3.2vw, 48px);
  line-height: 1.2;
  font-weight: 800;
  color: #045a9d; /* inner <strong> retains green/blue mix */
}

/* Article blurb on the left; body color you set for this section */
.rgs-voyage-desc{
  margin: 0;
  color: #045c9c;
  line-height: 1.55;
  font-size: 1rem;
}

/* CTA on the right: reuse your button styles, just add spacing */
.rgs-voyage-cta{ display: inline-block; margin-top: 6px; }

/* ---------- Responsive behavior ---------- */
@media (max-width: 991.98px){
  /* Stack neatly: image first, then left text, then right text */
  .rgs-voyage-stage{
    grid-template-columns: 1fr;
    grid-template-areas:
      "figure"
      "left"
      "right";
    justify-items: center;
    --nudge: 0px;            /* no need to nudge when stacked */
    --gap: 16px;
  }
  .rgs-voyage-left,
  .rgs-voyage-right{
    justify-self: center;
    text-align: center;
    max-width: 48ch;
    transform: none;         /* reset the inward nudge on mobile */
  }
  .rgs-voyage-figure img{
    width: clamp(320px, 62vw, 560px);
  }
}

@media (max-width: 575.98px){
  .rgs-voyage-figure img{
    width: clamp(260px, 84vw, 480px);
  }
  .rgs-voyagela-hero-title{ font-size: clamp(24px, 7vw, 32px); }
  .rgs-voyagela-hero-subtitle{ font-size: clamp(18px, 5.2vw, 22px); }
}
.rgs-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: none; z-index: 9999; padding: 5vw; box-sizing: border-box;
}
.rgs-modal-overlay.is-open { display: block; }
.rgs-modal-dialog {
  position: relative; width: 100%; height: 100%; max-width: 1100px;
  margin: 0 auto; background: #000; border-radius: 12px;
  box-shadow: 0 10px 50px rgba(0,0,0,.5); overflow: hidden;
}
.rgs-modal-iframe-wrap { position: relative; padding-top: 56.25%; } /* 16:9 */
.rgs-modal-iframe-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: #000;
}
.rgs-modal-close {
  position: absolute; top: 8px; right: 8px;
  background: #fff; color: #111; border: 0; border-radius: 6px;
  padding: 10px 12px; cursor: pointer; font: 600 14px/1.1 Manrope, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.rgs-modal-close:focus { outline: 2px solid #4285b6; outline-offset: 2px; }
.rgs-modal-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: #fff; background: #111;
}
.rgs-modal-fallback a { color: #43a3e6; font-weight: 700; text-decoration: underline; }
body.rgs-modal-open { overflow: hidden; }

/*********************************************/
/* RGS Header — mobile layout & toggle left  */
/*********************************************/
.rgs-header .navbar .container{
  display: flex;
  flex-direction: column !important;
  align-items: stretch;
}

/* Desktop defaults */
.rgs-header .navbar-brand{ margin-bottom: 8px; }
.rgs-header .navbar-brand img{ max-height: 72px; height: auto; }
.rgs-header .main-menu{ width: 100%; }
.rgs-header .main-menu .nav-menu-wrapper{ text-align: center; } /* menu centered under logo */
.rgs-header .header-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rgs-header .rgs-topmeta{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.rgs-header .navbar-toggle{ display: none; } /* hidden on desktop */

/* Pills (CALL US & LICENSE) */
.rgs-header .rgs-call,
.rgs-header .rgs-license{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #045c9c;
  border-radius: 8px;
  color: #045c9c;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.rgs-header .rgs-call .label,
.rgs-header .rgs-license .label{
  text-transform: uppercase;
  font-size: 12px;
}
.rgs-header .rgs-call:hover,
.rgs-header .rgs-license:hover{
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(4,92,156,.15);
}

/* Nudge CTA on desktop */
.rgs-header .rgs-cta{ margin-left: 28px; }

/* -------------- Mobile (<= 991.98px) -------------- */
@media (max-width: 991.98px){
  .rgs-header .navbar-brand img{ max-height: 44px; height: auto; }

  /* Two-column grid:
     Row 1:  logo | meta
     Row 2:  toggle | meta  (=> toggle sits under logo, left)
  */
  .rgs-header .header-topbar{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo meta"
      "toggle meta";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }
  .rgs-header .navbar-brand{ grid-area: logo; margin-bottom: 0; }
  .rgs-header .navbar-toggle{
    grid-area: toggle;
    display: block;             /* only on mobile */
    justify-self: start;        /* stick to the left under the logo */
    align-self: start;
    margin: 0;
  }
  .rgs-header .rgs-topmeta{
    grid-area: meta;
    display: grid;
    grid-auto-flow: row;
    justify-items: end;         /* pills on the right, stacked */
    gap: 8px;
    width: auto;
  }

  /* Compact pills on mobile */
  .rgs-header .rgs-call,
  .rgs-header .rgs-license{
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
  }

  /* Hide desktop menu & show SlickNav output */
  .rgs-header .main-menu{ display: none; }
  .rgs-header .responsive-menu{ display: block; }

  /* Hide big CTA on mobile (matches your reference) */
  .rgs-header .rgs-cta{ display: none; }

  /* Ensure SlickNav button inside toggle aligns left nicely */
  .rgs-header .navbar-toggle .slicknav_btn{ margin: 0; }
}
/* === FIX: put .navbar-toggle under the logo on mobile (scoped) === */
@media (max-width: 991.98px){
  /* Override Bootstrap's d-flex on this one element */
  .rgs-header .header-topbar{
    display: grid !important;                 /* beat .d-flex { display:flex !important } */
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo   meta"
      "toggle meta";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }

  /* Place children into the grid areas */
  .rgs-header .navbar-brand{ 
    grid-area: logo; 
    margin-bottom: 0; 
  }
  .rgs-header .navbar-toggle{ 
    grid-area: toggle; 
    display: block;               /* visible on mobile */
    justify-self: start;          /* stick left under logo */
    align-self: start;
    margin: 0;
    z-index: 5;                   /* sit above the banner beneath */
  }
  .rgs-header .rgs-topmeta{
    grid-area: meta;
    display: grid;
    grid-auto-flow: row;
    justify-items: end;           /* CALL US + LICENSE stacked on the right */
    gap: 8px;
    width: auto;                  /* avoid full-width expansion */
  }

  /* (Optional) compact the pills slightly on small screens */
  .rgs-header .rgs-call,
  .rgs-header .rgs-license{
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
  }

  /* Keep your theme behavior: desktop menu hidden, slicknav visible */
  .rgs-header .main-menu{ display: none; }
  .rgs-header .responsive-menu{ display: block; }
}
/* --- RGS: make the logo 350px wide on mobile --- */
@media (max-width: 991.98px){
  .rgs-header .navbar-brand img{
    width: 350px !important;                 /* requested width */
    max-width: calc(100vw - 24px) !important;/* safety so it never overflows */
    height: auto !important;                 /* keep aspect ratio */
    max-height: none !important;             /* ignore any earlier height caps */
    display: block;
  }
}
/* --- RGS: keep CALL US & LICENSE visible on mobile with big logo --- */
@media (max-width: 991.98px){
  /* Force grid on the top bar (beats Bootstrap's .d-flex) */
  .rgs-header .header-topbar{
    display: grid !important;
    /* Left col = logo/toggle, Right col = pills; right column always keeps ≥200px */
    grid-template-columns: auto minmax(200px, 1fr);
    grid-template-areas:
      "logo   meta"
      "toggle meta";
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }

  /* Place children into the grid areas */
  .rgs-header .navbar-brand{ grid-area: logo; margin-bottom: 0; }
  .rgs-header .navbar-toggle{ grid-area: toggle; display: block; justify-self: start; }
  .rgs-header .rgs-topmeta{
    grid-area: meta;
    display: grid;
    grid-auto-flow: row;
    justify-items: end;   /* pills on the right, stacked */
    gap: 8px;
    width: auto;          /* avoid full-width expansion */
  }

  /* Make the logo 350px when possible, but shrink just enough to leave 200px for the pills */
  .rgs-header .navbar-brand img{
    width: clamp(200px, calc(100vw - 220px), 350px) !important;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    display: block;
  }

  /* Compact pill styling so both fit nicely on small phones */
  .rgs-header .rgs-call,
  .rgs-header .rgs-license{
    padding: 6px 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Keep your theme behavior: hide desktop menu; show responsive menu */
  .rgs-header .main-menu{ display: none; }
  .rgs-header .responsive-menu{ display: block; }
}

/* Optional: extra safety for ultra‑narrow phones */
@media (max-width : 422px ){
  .rgs-header .navbar-brand img{
    width: clamp(180px, calc(100vw - 200px), 320px) !important;
  }
}
@media (max-width: 991.98px) {
  .rgs-header .header-topbar {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "toggle"
      "meta";
    justify-items: center;
    row-gap: 4px;
    padding: 12px 12px;
    position: relative;
  }

  /* Center logo */
  .rgs-header .navbar-brand {
    grid-area: logo;
    margin: 0 auto;
  }

  .rgs-header .navbar-brand img {
    width: 350px !important;
    max-width: 100%;
    height: auto !important;
    display: block;
  }

  /* Menu toggle under logo, aligned left */
  .rgs-header .navbar-toggle {
    grid-area: toggle;
    display: block;
    justify-self: start;
    align-self: start;
    margin: 0;
  }

  /* Pills (CALL US / LICENSE) below logo, aligned right */
  .rgs-header .rgs-topmeta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 16px;
    margin-top: -10px;
    width: 100%;
  }

  .rgs-header .rgs-call,
  .rgs-header .rgs-license {
    padding: 6px 12px;
    font-size: 8px;
    border: 1px solid #045c9c;
    border-radius: 8px;
    color: #045c9c;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }

  .rgs-header .rgs-call .label,
  .rgs-header .rgs-license .label {
    text-transform: uppercase;
    font-size: 12px;
  }

  /* Hide desktop CTA */
  .rgs-header .rgs-cta {
    display: none !important;
  }

  /* Show slicknav, hide desktop nav */
  .rgs-header .main-menu {
    display: none;
  }

  .rgs-header .responsive-menu {
    display: block;
  }
}
@media (max-width: 991.98px) {
  /* Let .rgs-topmeta float neatly under the top of the logo */
  .rgs-header .rgs-topmeta {
    position: absolute !important;
    top: -50px;                  /* ↓ Lowered from 6px to 24px */
    right: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    z-index: 1000;
    padding-right: 2px;
	 margin-right: -20px;
  }

  /* Optional: if pills touch the logo too tightly, add padding to logo container */
  .rgs-header .header-topbar {
    position: relative;
    padding-top: 20px !important; /* ensures enough vertical space */
	margin-left: -10px
  }

  .rgs-header .rgs-call,
  .rgs-header .rgs-license {
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #045c9c;
    border-radius: 8px;
    color: #045c9c;
    font-weight: 700;
    background: #fff;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }

  .rgs-header .rgs-call .label,
  .rgs-header .rgs-license .label {
    font-size: 12px;
    text-transform: uppercase;
  }

  /* Keep logo centered */
  .rgs-header .navbar-brand {
    margin: -10px;
  }

  .rgs-header .navbar-brand img {
    width: 350px !important;
    max-width: 100%;
    height: auto !important;
    display: block;
  }

  /* Hamburger menu under logo */
  .rgs-header .navbar-toggle {
    display: block;
    justify-self: start;
    margin-top: -12px;
  }

  /* Hide CTA */
  .rgs-header .rgs-cta {
    display: none !important;
  }

  /* Menu behavior */
  .rgs-header .main-menu { display: none; }
  .rgs-header .responsive-menu { display: block; }
}
/* ---------------------------------------------- */
/* Hover effect: sky blue pill + white font/icons */
/* ---------------------------------------------- */
.rgs-header .rgs-call,
.rgs-header .rgs-license {
  transition: all 0.25s ease;
}

.rgs-header .rgs-call:hover,
.rgs-header .rgs-license:hover {
  background-color: #0aa5e1;
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Make icons white on hover */
.rgs-header .rgs-call:hover i,
.rgs-header .rgs-license:hover i {
  color: #ffffff;
}

/* Optional: also make the label white */
.rgs-header .rgs-call:hover .label,
.rgs-header .rgs-license:hover .label {
  color: #ffffff;
}
/* Flip Johnny's specific content box horizontally */
.flipped-johnny {
    width: calc(50% - 15px);
    border-left: none;
    padding-left: 0;
    margin-left: 0;

    border-right: 1px solid var(--divider-color);
    padding-right: 15px;
    margin-right: 15px;
}
@media (max-width: 991.98px) {
  .rgs-header .main-menu {
    display: none;
  }
  .rgs-header .main-menu.menu-open {
    display: block;
  }
}
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #002c5dd6;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0 0 20px 20px;
}

.gallery-overlay .gallery-icon {
    display: block;
    max-width: 50px;
    margin: 0 auto 8px;
}

.photo-gallery figure {
    position: relative;
    overflow: hidden;
}
.gallery-filters {
  margin-bottom: 50px;
}
.gallery-filters .filter-btn {
  background: #0aa5e1;
  color: #FFFFFF;
  border: none;
  padding: 8px 18px;
  margin: 0 5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.gallery-filters .filter-btn.active,
.gallery-filters .filter-btn:hover {
  background: #034a82; /* brand blue */
  color: #fff;
}
.step-number {
  position: absolute;
  top: 60px;
  left: 50px;
  font-size: 62px;
  font-weight: 800;
  color: #fff;
  text-shadow: 4px 9px 9px #002c5d;
  z-index: 2;
}
.gutter-selection-image {
  position: relative;
}
.nbc-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.nbc-video-wrapper > * {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Default horizontal style for desktop */
#nbcModal .nbc-modal-inner {
  width: 90%;
  max-width: 800px;
  background: #000;
  border-radius: 8px;
}

#nbcScriptContainer {
  width: 100%;
  height: 450px;
}

/* ✅ Vertical (portrait-style) layout for small screens */
@media (max-width: 480px) {
  #nbcModal .nbc-modal-inner {
    width: 100%;
    max-width: 320px; /* mobile vertical width */
    aspect-ratio: 9 / 16; /* maintain vertical format */
    padding-top: 0;
  }

  #nbcScriptContainer {
    width: 100%;
    height: 100vh; /* fill vertical screen */
    max-height: 90vh;
  }

  #nbcModal {
    align-items: flex-start;
    padding-top: 5vh;
  }
}
.gallery-pagination .pagination {
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  margin-top: -30px;
}

.gallery-pagination .page-link {
  color: #045a9d;
  border: 1px solid #ccc;
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.gallery-pagination .page-item.active .page-link,
.gallery-pagination .page-link:hover {
  background-color: #045a9d;
  color: #fff;
  border-color: #045a9d;
}
#rainchain-gallery .photo-gallery figure img {
  width: 100%;
  aspect-ratio: 2 / 3;   /* Enforces 2:3 ratio */
  object-fit: cover;     /* Fills the frame without stretching */
  border-radius: 8px;    /* Optional: rounded corners */
  display: block;
}
/* === Rain Chain Gallery Info === */
.gallery-info {
  text-align: center;
  margin-top: 10px;
}

.gallery-info h4 {
  font-size: 18px;
  font-weight: 700;
  color: #045a9d;
  margin-bottom: 5px;
  line-height: 1.4;
}

.gallery-info p {
  font-size: 16px;
  color: #0aa5e1;
  font-weight: 500;
  margin: 0;
}

.gallery-info small {
  color: #045a9d;
  font-size: 14px;
}
.card {
border-radius: 12px;
overflow: hidden;
border: 1px solid #ddd;
}
.product-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 10px;
color: #045c9c;
}
.price {
font-size: 22px;
color: #0aa5e1;
margin-bottom: 10px;
font-weight: 700;
}
.rating .fa-star,
.rating span {
color: #ffc107;
font-size: 18px;
}
.nav-tabs > li > a,
.nav-tabs .nav-link {
padding: 10px 15px;
background: #eef5fa;
margin-right: 5px;
border-radius: 6px;
color: #045c9c;
transition: background 0.3s, color 0.3s;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
background-color: #d6ebfb;
}
.nav-tabs > li.active > a,
.nav-tabs .nav-link.active {
background: #045a9d;
color: #fff;
}
.tab-content {
border: 1px solid #ddd;
padding: 20px;
background: #fff;
margin-top: -1px;
border-radius: 0 0 12px 12px;
}
.preview-thumbnail img {
height: 60px;
object-fit: cover;
margin: 5px;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s;
}
.preview-thumbnail .nav-link.active img,
.preview-thumbnail img:hover {
border-color: #045a9d;
}
.video-container iframe,
.embed-responsive iframe {
border-radius: 10px;
}
.btn-primary {
background-color: #045a9d;
border-color: #045a9d;
border-radius: 6px;
}
.btn-primary:hover {
background-color: #034a82;
border-color: #034a82;
}
.form-control {
border-radius: 6px;
}
/*************************************/
/***    12. Our Specialized css    ***/
/*************************************/

.our-specialized{
	padding: 100px 0;
}

.specialized-content .section-title{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.specialized-list-box{
	margin-bottom: 30px;
}

.specialized-list-box:last-child{
	margin-bottom: 0;
}

.specialized-list-title{
	margin-bottom: 20px;
}

.specialized-list-title h3{
	position: relative;
	font-size: 20px;
	padding-left: 30px;
}

.specialized-list-title h3::before{
	content: '\f058';
	position: absolute;
	font-family: 'FontAwesome';
	left: 0;
	top: 0;
	font-size: 18px;
	color: var(--accent-color);
}

.specialized-list-content p{
	margin: 0;
	font-weight: 600;
}

.specialized-image{
	position: relative;
	background: url('../images/specialized-image-bg.webp') no-repeat;
	background-position: center center;
	background-size: auto;           /* keep your current sizing */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;         /* 'flex-start' is the most compatible value */
	gap: 30px;
}

.specialized-img-1{
	width: calc(50% - 15px);
}

.specialized-img-2{
	padding-top: 165px;
	width: calc(50% - 15px);
}

.specialized-img-1 img figure,
.specialized-img-2 img figure{
	display: block;
	border-radius: 20px;
}

.specialized-img-1 img,
.specialized-img-2 img{
	aspect-ratio: 1 / 1.29;
	object-fit: cover;
	border-radius: 20px;
}

.expert-doctor{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--white-color);
	box-shadow: 10px 0px 36.8px -4px #0000001A;
	border: 1px solid var(--divider-color);
	border-radius: 15px;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 250px;
	padding: 20px;
	animation: doctormoveobject 3s infinite linear alternate;
}

@keyframes doctormoveobject{
	50%{
		left: 40px;
	}
}

.expert-doctor .icon-box{
	background-color: var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: all 0.3s ease-in-out;
}

.expert-doctor:hover .icon-box{
	background-color: var(--primary-color);
}

.expert-doctor .icon-box img{
	max-width: 30px;
}

.expert-doctor-content{
	width: calc(100% - 80px);
}

.expert-doctor-content h3{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 5px;
}

.expert-doctor-content p{
	text-transform: capitalize;
	margin: 0;
}
.page-header {
  position: relative;
  background-image: url('../images/page-header-bg-about-us.webp'); /* Desktop default */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  padding: 225px 0 115px;
  overflow: hidden;
  min-height: 400px;
}

/* Mobile Override */
@media (max-width: 768px) {
  .page-header {
    background-image: url('../images/page-header-bg-about-us-mobile.webp');
    padding: 170px 0 100px; /* Adjust padding if needed for mobile layout */
  }
}