/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Seore - SEO And Digital Marketing Agency HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Strategy css
08. Company Feature css
09. How It Work css
10. Our Pricing css
11. Our Projects
12. Our Testimonial css
13. Our Blog css
14. Footer css
15. About us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Team Page css  
23. Contact us Page css
24. FAQs Page css
25. 404 Page css
26. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color			: #0E0D1B;
	--secondary-color: #fffada;
	--text-color			: #757575;
	--accent-color: #ffbd07;
		--gradient-color: #faf600;
	--box-shadow-color		: #585B631A;
	--white-color			: #FFFFFF;
	--divider-color			: #FFDCC8;
	--dark-divider-color	: #E6E6E6;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "DM Sans", sans-serif;
}

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

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

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

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

figure{
	display: block;
	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;
}

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

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

#magic-cursor{
	position: absolute;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
    z-index: 1000000;
}

#ball{
	position: fixed;
	display: block;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 8px !important;
	height: 8px !important;
	background: var(--accent-color);
	margin: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity:1 !important;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--secondary-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: 66px;
	transform: translate(-50%, -50%);
}

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

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

.btn-default{
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	text-transform: capitalize;
	/* background-image: linear-gradient(to right, var(--accent-color) 0%, var(--gradient-color) 50%, var(--accent-color) 100%); */
	background-color: #ffbd07;
	background-size: 200% auto;
	padding: 20px 30px;
	border-radius: 10px;
	border: none;
	transition: 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.btn-default:hover{
	background-position: right center;
}

.btn-large{
	font-size: 20px;
	padding: 20px 65px 20px 20px;
}

.btn-default.btn-large::before{
	width: 40px;
	height: 40px;
	background-size: 15px;
}

.section-row{
	text-align: center;
	margin-bottom: 60px;
}

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

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

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

.section-title h3{
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: 1.3em;
	color: var(--accent-color);
	margin-bottom: 20px;
}

.section-title h1,
.section-title h2{
    font-size: 46px;
	letter-spacing: -0.02em;
	color: var(--primary-color);
	cursor: none;
}

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

.section-title p{
    color: var(--text-color);
    margin-top: 20px;
	margin-bottom: 0;
}

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

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

.topbar-contact-info{
	padding: 10px 0;
	text-align: left;
}

.topbar-contact-info ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.topbar-contact-info ul li{
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: var(--white-color);
	/* text-transform: capitalize; */
	margin-right: 4px;
	padding-right: 13px;
}

.topbar-contact-info ul li:last-child{
	margin-right: 0;
	padding-right: 0;
}

.topbar-contact-info ul li::after{
	content: '/';
	position: absolute;
	right: 0;
	top: 0;
	color: var(--white-color);
}

.topbar-contact-info ul li:last-child:after{
	display: none;
}

.topbar-contact-info ul li a{
	color: var(--white-color);
}

.topbar-social-links{
	padding: 10px 0;
}

.topbar-social-links ul{
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: end;
}

.topbar-social-links ul li{
	display: inline-block;
	margin-right: 12px;
	transition: all 0.3s ease-in-out;
}

.topbar-social-links ul li a{
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

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

.topbar-social-links ul li:last-child{
	margin-right: 0;
}

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

header.main-header{
	background-color: var(--white-color);
	position: relative;
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	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(--secondary-color);
	border-bottom: 1px solid var(--divider-color);
	backdrop-filter: blur(30px);
}

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

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

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
}

.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: 500;
	padding: 15px 15px !important;
	color: var(--primary-color);
	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: scaleY(0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 210px;
	border-radius: 10px;
	position: absolute;
	left: 0;
	top: 100%;
	overflow: hidden;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

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

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

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

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

.main-menu ul ul li a:hover{
	color: var(--primary-color);
	background-color: transparent;
}

.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: 6px 0 0;
	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(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

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

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

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

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

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

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

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

.slicknav_menu ul ul li a{
    padding: 10px 20px 10px 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(--white-color);
	position: absolute;
	right: 15px;
    top: 15px;
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
	color: var(--primary-color);
}

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

.hero{
	background-color: var(--secondary-color);
	padding: 100px 0;
}

.hero-content{
	padding-right: 80px;
}

.hero-content .section-title.hero-content-title h1{
	font-size: 56px;
}

.hero-image{
	text-align: center;
}

.hero-content-footer{
	display: flex;
	align-items: center;
}

.wide-client{
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.wide-client-image{
	margin-right: 10px;
}

.wide-client-image img{
	width: 136px;
}

.wide-client-content{
	width: calc(100% - 146px);
}

.wide-client-content p{
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	text-transform: capitalize;
	max-width: 100px;
	margin: 0;
}

.hero-image{
	position: relative;
}

.company-sales{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 17px;
	padding: 15px 25px 15px 15px;
	animation: salesmoveobject 3s infinite linear alternate;
}

@keyframes salesmoveobject{
	50%{
		left: 50px;
	}
}

.company-sales .icon-box{
	margin-right: 15px;
}

.company-sales .icon-box img{
	width: 50px;
}

.company-sales-content{
	width: calc(100% - 65px);
	text-align: left;
}

.company-sales-content h3{
	font-size: 18px;
	font-weight: 500;
}

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

.company-visit{
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(50%);
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 17px;
	padding: 15px 25px 15px 15px;
	animation: visitmoveobject 3s infinite linear alternate;
}

@keyframes visitmoveobject{
	50%{
		right: 30px;
	}
}

.company-visit .icon-box{
	margin-right: 15px;
}

.company-visit .icon-box img{
	width: 50px;
}

.company-visit-content{
	width: calc(100% - 65px);
	text-align: left;
}

.company-visit-content h3{
	font-size: 18px;
	font-weight: 500;
}

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

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

.about-us{
	position: relative;
	background: url('../images/section-bg-img-1.png') no-repeat;
	background-position: right -100px bottom -100px;
	padding: 100px 0;
}

.about-image{
	position: relative;
}

.about-img{
	text-align: center;
}

.company-experience{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 17px;
	padding: 15px 25px 15px 15px;
	animation: expmoveobject 3s infinite linear alternate;
}

@keyframes expmoveobject{
	50%{
		right: 50px;
	}
}

.company-experience .icon-box{
	margin-right: 15px;
}

.company-experience .icon-box img{
	width: 50px;
}

.company-experience-content{
	width: calc(100% - 65px);
	text-align: left;
}

.company-experience-content h3{
	font-size: 18px;
	font-weight: 500;
}

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

.about-content{
	padding-left: 80px;
}

.about-content-body{
	margin-bottom: 30px;
}

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

.about-content-body ul li{
	position: relative;
	width: calc(50% - 10px);
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	padding-left: 30px;
}

.about-content-body ul li:before{
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
}

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

.our-services{
	background: var(--secondary-color) url('../images/section-bg-img-2.png') no-repeat;
	background-position: left -100px bottom -250px;
	padding: 100px 0 70px;
}

.our-service-content{
	position: sticky;
	top: 20px;
	margin-bottom: 30px;
}

.our-services .section-btn{
	text-align: left;
}

.service-item{
	position: relative;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border-radius: 16px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
    overflow: hidden;
	cursor: none;
}

.service-item:hover{
    transform: translateY(-10px);
    box-shadow: 5px 28px 95px 8px var(--box-shadow-color);
}

.service-item .icon-box{
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
}

.service-item .icon-box img{
	transition: all 0.4s ease-in-out;
}

.service-body{
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
}

.service-body h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
	transition: all 0.3s ease-in-out;
}

.service-body p{
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.service-footer{
	position: relative;
	z-index: 2;
}

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

.service-footer a img{
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	transform: rotate(-45deg);
}

.service-item:hover .service-footer a img{
	transform: rotate(0deg);
}

/************************************/
/***     07. Our Strategy css	  ***/
/************************************/

.our-strategy{
	background: url('../images/section-bg-img-3.png') no-repeat;
	background-position: top right;
	padding: 100px 0;
}

.strategy-image{
	display: flex;
	align-items: start;
	text-align: left;
	position: relative;
}

.strategy-image::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/strategy.png') no-repeat;
	background-position: center top;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.strategy-img-1{
	margin-right: 30px;
}

.strategy-img-2{
	padding-top: 80px;
}

.strategy-img-2 figure,
.strategy-img-1 figure{
	display: block;
}

.strategy-img-2 img,
.strategy-img-1 img{
	border-radius: 16px;
}

.our-strategy-box{
	padding-left: 80px;
}

.strategy-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border-radius: 16px;
	display: flex;
	align-items: center;
	padding: 30px;
	margin-bottom: 30px;
}

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

.strategy-item .icon-box{
	position: relative;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.strategy-item:hover .icon-box{
	border-color: transparent;
}

.strategy-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
    border-radius: 50px;
}

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

.strategy-item .icon-box img{
	position: relative;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

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

.strategy-progress-bar{
	width: calc(100% - 95px);
}

.skillbar .skill-data{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.skillbar .skill-data .skill-title{	
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	text-transform: capitalize;
}

.skillbar .skill-data .skill-no{
	font-size: 16px;
	font-weight: 600;
	color: var(--accent-color);
}

.skillbar .skill-progress{
	width: 100%;
	height: 12px;
	background: var(--dark-divider-color);
	border-radius: 16px;
	position: relative;
}

.skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	border-radius: 16px;
}

/************************************/
/***    08. Company Feature css   ***/
/************************************/

.company-feature{
	background: var(--secondary-color) url('../images/section-bg-img-1.png') no-repeat;
    background-position: right -100px bottom -100px;
	padding: 100px 0;
}

.company-feature-item{
	background-color: var(--white-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	display: flex;
	align-items: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 15px 20px;
}

.company-feature-item .icon-box{
	position: relative;
	border: 1px solid;
	border-radius: 50%;
	width: 75px;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
	border-color: transparent;
}

.company-feature-item:hover .icon-box{
	border-color: transparent;
}

.company-feature-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
    border-radius: 50px;
}


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

.company-feature-item .icon-box img{
	position: relative;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

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

.feature-item-content{
	width: calc(100% - 90px);
	text-align: left;
}

.feature-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.feature-item-content p{
	margin: 0;
}

.company-feature-image{
	text-align: center;
}

/************************************/
/***     09. How It Work css      ***/
/************************************/

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

.how-work-item{
	position: relative;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
    overflow: hidden;
    cursor: none;
}

.how-work-item::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
    transition: all 0.4s ease-in-out;
    height: 100%;
    z-index: 1;
}

.how-work-item:hover:before{
    top: 0;
}

.how-work-item .icon-box{
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.how-work-item .icon-box img{
	width: 55px;
    transition: all 0.4s ease-in-out;
}

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

.how-work-content{
	position: relative;
	z-index: 2;
}

.how-work-content h3{
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

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

.how-work-content p{
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.how-work-item:hover .how-work-content p{
    color: var(--white-color);
}

/************************************/
/***     10. Our Pricing css	  ***/
/************************************/

.our-pricing{
	background-color: var(--secondary-color);
	padding: 100px 0 70px;
}

.pricing-item{
	background-color: var(--white-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border-radius: 16px;
	height: calc(100% - 30px);
	padding: 40px 30px;
	margin-bottom: 30px;
}

.pricing-header{
	border-bottom: 1px solid var(--dark-divider-color);
	text-align: center;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.pricing-header h3{
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.pricing-header h2{
	font-size: 48px;
	margin-bottom: 15px;
}

.pricing-header p{
	margin: 0;
}

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

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

.pricing-body ul li{
	position: relative;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 15px;
}

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

.pricing-body ul li i{
	position: absolute;
	top: 2px;
	right: 0;
	font-size: 18px;
	color:#3BC13B;
}

.pricing-body ul li i.fa-solid.fa-xmark{
	color: var(--error-color);
}

.pricing-footer{
	text-align: center;
}

.pricing-item.highlighted-box{
	position: relative;
	background-color: var(--primary-color);
	overflow: hidden;
}

.pricing-item.highlighted-box::before{
	content: '';
	display: block;
	position: absolute;
	top: -40px;
	right: -60px;
	transform: rotate(45deg);
	background: url('../images/icon-star.svg') no-repeat, linear-gradient(to right, var(--accent-color) 35%, var(--gradient-color) 2.05%, var(--accent-color) 99.13%);
	background-position: right 50px top 60px;
	width: 140px;
	height: 100px;
	z-index: 1;
}

.pricing-item.highlighted-box .pricing-body ul li,
.pricing-item.highlighted-box .pricing-header p,
.pricing-item.highlighted-box .pricing-header h2,
.pricing-item.highlighted-box .pricing-header h3{
	color: var(--white-color);
}

/************************************/
/***     11. Our Projects css	  ***/
/************************************/

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

.our-projects-nav{
	margin-bottom: 30px;
}

.our-projects-nav ul{
	list-style: none;
	text-align: center;
	padding: 0;margin: 0;
}

.our-projects-nav ul li{
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 10px;
}

.our-projects-nav ul li:last-child{
	margin-right: 0;
}

.our-projects-nav ul li a{
	position: relative;
	display: inline-block;
	background-color: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	color: var(--text-color);
	font-weight: 600;
	padding: 8px 20px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.our-projects-nav ul li a:hover{
	color: var(--white-color);
}

.our-projects-nav ul li a::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
    transition: all 0.3s ease-in-out;
    height: 100%;
    z-index: -1;
}

.our-projects-nav ul li a:hover:before{
    top: 0;
}

.our-projects-nav ul li a.active-btn{
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	color: var(--white-color);
}

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

.project-item{
	position: relative;
	overflow: hidden;
	cursor: none;
}

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

.project-image img{
	width: 100%;
	border-radius: 16px;
	aspect-ratio: 1/1.1;
	object-fit: cover;
}

.project-body{
	position: absolute;
	bottom: 20px;
	right: 20px;
	left: 20px;
	transform: translateY(100%);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	opacity: 0;
	border-radius: 10px;
	padding: 20px;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}

.project-body::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--primary-color);
	border-radius: 10px;
	opacity: 90%;
	z-index: -1;
}

.project-item:hover .project-body{
	opacity: 1;
	transform: translateY(0px);
}

.project-content{
	text-align: left;
}

.project-content h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 5px;
}

.project-content p{
	color: var(--white-color);
	text-transform: capitalize;
	margin: 0;
}

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

.project-readmore-btn a img{
	max-width: 20px;
	transform: rotate(-45deg);
	transition: all 0.4s ease-in-out;
}

.project-body:hover .project-readmore-btn a img{
	transform: rotate(0deg);
}

/************************************/
/***    12. Our Testimonial css	  ***/
/************************************/

.our-testimonial{
	padding: 100px 0;
	background: var(--secondary-color) url('../images/section-bg-img-3.png') no-repeat;
	background-position: top right;
}

.our-testimonial .section-title{
	text-align: center;
}

.testimonial-slider .testimonial-item{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
}

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

.testimonial-header{
	margin-bottom: 15px;
}

.testimonial-header .author-image{
	margin-bottom: 15px;
}

.testimonial-header .author-image figure,
.testimonial-header .author-image img{
	height: 78px;
	width: 78px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 100%;
}

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

.testimonial-body{
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--dark-divider-color);
}

.testimonial-body p{
	margin: 0;
}

.testimonial-footer .author-content h3{
	font-size: 20px;
	text-transform: capitalize;
}

.testimonial-footer .author-content p{
	margin: 0;
	text-transform: capitalize;
}

.testimonial-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-next{
	margin-left: 15px;
}

.testimonial-slider .testimonial-button-prev{
	margin-right: 15px;
}

.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover{
	background-color: var(--primary-color);
}

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url('../images/icon-arrow.svg') no-repeat center center;
	background-size: 15px auto;
	transform: rotate(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-next::before{
	content: '';
	background: url('../images/icon-arrow.svg') no-repeat center center;
	background-size: 15px auto;
	transform: rotate(0deg);
}

/************************************/
/***      13. Our Blog css	      ***/
/************************************/

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

.our-blog .section-title{
	text-align: center;
}

.blog-item{
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	overflow: hidden;
	margin-bottom: 30px;
	height: calc(100% - 30px);
}

.blog-item .post-item-content{
	padding: 30px;
}

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

.blog-item .post-featured-image img{
	aspect-ratio: 1 / 0.6;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

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

.post-item-body h2{
	font-size: 20px;
	color: var(--primary-color);
	line-height: 1.4em;
	margin-bottom: 20px;
}

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

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

.post-item-footer a{
	background-color: var(--accent-color);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-item-footer a img{
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	transform: rotate(-45deg);
}

.blog-item:hover .post-item-footer a img{
	transform: rotate(0deg);
}

/************************************/
/***    	14. Footer css		  ***/
/************************************/

.main-footer{
	background: var(--primary-color);
	padding: 100px 0 0;
}

.about-footer{
	padding-right: 25px;
}

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

.footer-specialized p{
	color: var(--white-color);
	font-size: 15px;
	margin-bottom: 8px;
}

.footer-specialized-icons{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
}

.footer-specialized-icons img{
	display: block;
	height: 42px;
	width: auto;
	max-width: 100%;
}

.footer-contact-box .footer-info-box{
	position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
}

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

.footer-info-box .icon-box{
	position: absolute;
    top: 2px;
    left: 0;
}

.footer-info-box .icon-box i{
	color: var(--white-color);
	font-size: 20px;
}

.footer-info-box p{
	color: var(--white-color);
	margin: 0;
}

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

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

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

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

.footer-links ul li a{
	font-size: 16px;
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

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

.footer-copyright{
	margin-top: 80px;
	padding: 20px 0;
	border-top: 1px solid #FFFFFF26;
}

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

.footer-copyright .footer-social-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: end;
}

.footer-copyright .footer-social-links ul li{
	display: inline-block;
	margin-right: 10px;
}

.footer-copyright .footer-social-links ul li:last-child{
	margin-right: 0;
}

.footer-copyright .footer-social-links ul li a{
	background-color: var(--white-color);
	color: var(--primary-color);
    height: 36px;
    width: 36px;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

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

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

/************************************/
/***     15. About us Page css    ***/
/************************************/

.page-header{
	position: relative;
	padding: 175px 0px;
	background: linear-gradient(179.5deg, var(--primary-color) 0.06%, var(--box-shadow-color) 90.6%), url('../images/page-header-bg.jpg') no-repeat center center;
	background-size: cover;
}

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

.page-header-box h1{
	color: var(--white-color);
	font-size: 56px;
	letter-spacing: -0.02em;
    margin-bottom: 20px;
	cursor: none;
}

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

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

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

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

.page-about{
	padding: 100px 0;
	background: var(--secondary-color) url('../images/section-bg-img-1.png') no-repeat;
    background-position: right -100px bottom -100px;
}

.page-about .row.section-row{
	max-width: 100%;
	text-align: left;
}

.page-about .section-row .section-title{
	margin-bottom: 30px;
}

.about-us-image{
	position: relative;
	margin-right: 40px;
}

.about-img-1{
	position: relative;
	width: 380px;
}

.about-img-2{
	position: absolute;
	bottom: 0;
	right: 0;
}

.about-img-2 figure,
.about-img-1 figure{
	display: block;
}

.about-img-1 img{
	aspect-ratio: 1 /1.32;
	object-fit: cover;
	border-radius: 219px 219px 0 0;
}

.about-img-2 figure{
	border-radius: 219px 219px 0 0;
}

.about-img-2 img{
	aspect-ratio: 1 /1.26;
	object-fit: cover;
	border-width: 10px 0 0 10px;
	border-style: solid;
	border-color: var(--secondary-color);
	border-radius: 219px 219px 0 0;
}

.experience-counter-item{
	position: absolute;
	top: 50px;
	right: 0;
	display: flex;
	align-items: center;
	width: 250px;
	padding: 15px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	animation: moveobject 3s infinite linear alternate;
}

@keyframes moveobject{
	50%{
		right: 50px;
	}
}

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

.experience-counter-item .icon-box img{
	width: 50px;
}

.experience-counter-item .experience-counter-content{
	width: calc(100% - 60px);
}

.experience-counter-item .experience-counter-content h3{
	font-size: 18px;
	font-weight: 500;
}

.experience-counter-item .experience-counter-content p{
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}

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

.about-us-content-body ul li{
	position: relative;
	width: calc(50% - 10px);
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	padding-left: 30px;
}

.about-us-content-body ul li:before{
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
}

.trusted-company{
	margin-top: 60px;
}

.trusted-companies-title h3{
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
}

.why-choose-us{
	padding: 100px 0;
	background: var(--secondary-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -120px bottom -300px;
}

.why-choose-us .section-title{
	text-align: center;
}

.faq-accordion.why-choose-accordion .accordion-item{
	position: relative;
	background: none;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 25px;
	margin-bottom: 25px;
}

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

.faq-accordion.why-choose-accordion .accordion-header{
	position: relative;
}

.faq-accordion.why-choose-accordion .accordion-header .icon-box{
	position: absolute;
	left: 0;
	top: 4px;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-button{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	border: none;
	box-shadow: none;
	padding: 5px 35px 5px 55px;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-button.collapsed::after,
.faq-accordion.why-choose-accordion .accordion-item .accordion-button:after{
	display: none;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-button span{
	position: absolute;
	right: 0;
	top: 0;
	bottom: auto;
	transform: translateY(50%);
	font-size: 26px;
	line-height: 1em;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-body{
	padding: 5px 30px 5px 55px;
}

.faq-accordion.why-choose-accordion .accordion-item.accordion-body p{
	margin: 0;
}

.why-choose-image{
	display: flex;
	align-items: start;
	justify-content: end;
	position: relative;
	margin-left: 60px;
}

.why-choose-image::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/why-choose-image-bg.png') no-repeat;
	background-position: center top;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.why-choose-img-1{
	margin-right: 30px;
}

.why-choose-img-2{
	padding-top: 80px;
}

.wwhy-choose-img-1 figure,
.why-choose-img-2 figure{
	display: block;
}

.why-choose-img-1 img,
.why-choose-img-2 img{
	border-radius: 16px;
}

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

.our-team .section-row{
	width: 100%;
	max-width: 100%;
	text-align: left;
}

.team-member-item{
	margin-bottom: 30px;
}

.team-image{
    position: relative;
    overflow: hidden;
	border-radius: 16px;
	margin-bottom: 15px;
}

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

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

.team-social-icon{
	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
	text-align: center;
    transition: all 0.4s ease-in-out;
	opacity: 0;
    z-index: 1;
}

.team-member-item:hover .team-social-icon{
	opacity: 1;
	bottom: 20px;
}

.team-social-icon ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.team-social-icon ul li{
	display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.team-social-icon ul li:last-child{
	margin-right: 0;
}

.team-social-icon ul li a{
    display: block;
}

.team-social-icon ul li a i{
	background-color: var(--accent-color);
	width: 40px;
    height: 40px;
	border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s ease-out;
    color: var(--white-color);
    font-size: 18px;
}

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

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

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

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

.about-company-counter{
	background: linear-gradient(180deg, var(--white-color) 50%, var(--secondary-color) 50%);
}

.about-company-counter .company-counter-box{
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	border-radius: 16px;
	padding: 40px 0;
}

.company-counter-item{
	text-align: center;
}

.company-counter-item .company-counter-content h3{
	font-size: 40px;
	color: var(--white-color);
	margin-bottom: 5px;
}

.company-counter-item .company-counter-content p{
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	text-transform: capitalize;
	margin: 0;
}

.our-faq{
	padding: 100px 0;
	background: var(--white-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -100px bottom -250px;
}

.faq-image{
	position: relative;
	padding-bottom: 110px;
	margin-right: 20px;
}

.faq-img-2{
	position: absolute;
	bottom: 0;
	right: 0;
}

.faq-img-1{
	position: relative;
	width: 450px;
}

.faq-img-2 figure,
.faq-img-1 figure{
	display: block;
}

.faq-img-1 img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 16px;
}

.faq-img-2 img{
	aspect-ratio: 1 /1.25;
	object-fit: cover;
	border: 10px solid var(--secondary-color);
	border-radius: 16px;
}

.faq-accordion .accordion-item{
	position: relative;
	background: none;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 25px;
	margin-bottom: 25px;
}

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

.faq-accordion .accordion-item .accordion-button{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	border: none;
	box-shadow: none;
	padding: 5px 30px 5px 0px;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 0px;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -10px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 5px;
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f067';
	color: var(--primary-color);
}

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

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

/************************************/
/***     16. Services Page css    ***/
/************************************/

.page-services{
	background: var(--secondary-color) url('../images/section-bg-img-1.png') no-repeat;
    background-position: right -100px bottom -100px;
    padding: 100px 0 70px;
}

.our-pricing.service-pricing{
	background: var(--secondary-color) url(../images/section-bg-img-2.png) no-repeat;
    background-position: left -100px bottom -250px;
}

/************************************/
/***   17. Service Single css	  ***/
/************************************/

.page-service-single{
	padding: 100px 0;
	background: var(--secondary-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -100px bottom -250px;
}

.service-sidebar{
	position: sticky;
	top: 20px;
}

.service-list{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 30px;
}

.service-list h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

.service-list ul li{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

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

.service-list ul li a{
	display: block;
    position: relative;
	color: var(--text-color);
	font-size: 16px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.service-list ul li a:after{
	content: '\f105';
    font-family: "Font Awesome 6 Free";
	font-weight: 700;
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    color: var(--accent-color);
}

.service-list ul li a:hover{
	color: var(--accent-color);
}

.sidebar-cta-box{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
}

.sidebar-cta-box .icon-box{
	margin-bottom: 20px;
}

.sidebar-cta-box .cta-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.sidebar-cta-box .cta-content p{
	margin-bottom: 20px;
}

.service-featured-image{
	margin-bottom: 30px;
}

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

.service-featured-image img{
	aspect-ratio: 1 / 0.6;
	object-fit: cover;
	border-radius: 16px;
	height: 500px;
}

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

.service-entry h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.company-growth .company-growth-img figure{
	display: block;
}

.company-growth .company-growth-img img{
	border-radius: 16px;
}

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

.company-growth-content p{
	margin-bottom: 20px;
}

.company-growth-content ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.company-growth-content ul li{
	position: relative;
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	padding-left: 25px;
	margin-bottom: 12px;
}

.company-growth-content ul li:last-child{
	margin-bottom: 0;
}

.company-growth-content ul li:before{
	content: '';
	position: absolute;
	background: url('../images/icon-check.svg') no-repeat center center;
	background-size: 100% auto;
	height: 16px;
	width: 16px;
    top: 5px;
    left: 0;
}

.about-company-growth-content{
	margin-top: 20px;
}

.about-company-growth-content p{
	margin: 0;
}

.our-solution-faq{
	padding: 100px 0;
}

.our-solution-faq .solution-faqs{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

/************************************/
/***    18. Blog Archive css  	  ***/
/************************************/

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

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

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

.post-pagination ul li a,
.post-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 4px;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
}

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

/************************************/
/***    19. Blog Single css  	  ***/
/************************************/

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

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

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

.post-image figure{
	display: block;
}

.post-image figure,
.post-image img{
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 16px;
}

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

.post-entry{
	border-bottom: 1px solid var(--dark-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{
	margin: 0 0 0.6em;
}

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

.post-entry h2{
	font-size: 50px;
}

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

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

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

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

.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: 700;
}

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

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}

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

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    margin-bottom: 18px;
}

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

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

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

.post-entry blockquote{
	background: var(--secondary-color) url('../images/icon-blockquote.svg') no-repeat 40px 46px;
	background-size: 45px;
	border-radius: 16px;
	padding: 40px 40px 40px 110px;
	margin-bottom: 30px;
}

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

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

.tag-links{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-block;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    background-color: var(--accent-color);
    color: var(--white-color);
	border-radius: 10px;
    padding: 8px 20px;
    margin-left: 10px;
    margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-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;
    border-radius: 50%;
    text-align: center;
	background-color: var(--accent-color);
    color: var(--white-color);
    width: 38px;
    height: 38px;
    transition: all 0.3s ease-in-out;
}

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

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a i{
    color: var(--secondry-color);
}

/************************************/
/***    20. Project Page css  	  ***/
/************************************/

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

/************************************/
/***   21. Project Single css    ***/
/************************************/

.page-project-single{
	padding: 100px 0;
	background: var(--secondary-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -100px bottom -250px;
}

.project-featured-image{
	margin-bottom: 30px;
}

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

.project-featured-image img{
	border-radius: 16px;
	aspect-ratio: 1/ 0.6;
	object-fit: cover;
}

.project-single-content .project-section-title h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.project-detail,
.project-values-content,
.project-about-image{
	margin-bottom: 30px;
}

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

.project-values-content ul li{
	position: relative;
	width: calc(50% - 10px);
	text-transform: capitalize;
	padding-left: 30px;
}

.project-values-content ul li:before{
    content: '';
    position: absolute;
    background: url('../images/icon-check.svg') no-repeat center center;
    background-size: 100% auto;
    height: 16px;
    width: 16px;
    top: 5px;
    left: 0;
}

.project-about-image .project-about-img-2 figure,
.project-about-image .project-about-img-1 figure{
	display: block;
}

.project-about-image .project-about-img-1 img,

.project-about-image .project-about-img-2 img{
	aspect-ratio: 1 / 0.8;
    object-fit: cover;
	border-radius: 16px;
}

.project-result-content p{
	margin: 0;
}

.project-sidebar{
	position: sticky;
	top: 20px;
}

.portfolio-info-box{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 30px;
}

.portfolio-info-box-title{
	margin-bottom: 30px;
}

.portfolio-info-box-title h3{
	font-size: 20px;
	text-transform: capitalize;
}

.portfolio-info-item{
	display: flex;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

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

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

.portfolio-info-content{
	width: calc(100% - 65px);
}

.portfolio-info-content h3{
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
	text-transform: capitalize;
	margin-bottom: 3px;
}

.portfolio-info-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***	  22. Team Page css       ***/
/************************************/

.page-team{
	background: var(--white-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -120px bottom -300px;
	padding: 100px 0 70px;
}

/************************************/
/***   23. Contact us Page css    ***/
/************************************/

.page-contact-us{
	padding: 100px 0;
	background: var(--secondary-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -100px bottom -250px;
}

.contact-info .contact-info-box{
	margin-bottom: 40px;
}

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

.contact-info-box .contact-info-title{
	margin-bottom: 20px;
}

.contact-info-box .contact-info-title h2{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.contact-info-box .contact-info-title p{
	margin: 0;
}

.contact-info-item{
	position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
}

.contact-info-item a{
	text-decoration: underline;
	color: var(--primary-color);
}

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

.contact-info-item .icon-box{
    position: absolute;
    top: 0px;
    left: 0px;
}

.contact-info-item .contact-info-content p{
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

.contact-form{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 40px;
}

.contact-form-content p{
	margin-bottom: 20px;
}

.contact-form .form-control{
	padding: 15px 20px;
	background-color: var(--secondary-color);
	color: var(--primary-color);
	box-shadow: none;
	border: none;
	border-radius: 10px;
}

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

.contact-form button.btn-default{
	width: 100%;
}

.help-block.with-errors ul{
	margin-bottom: 0;
}

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

.google-map .container-fluid{
	padding: 0;
}

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

/************************************/
/***  	   24. FAQs Page css      ***/
/************************************/

.page-faqs{
	padding: 100px 0;
	background: var(--white-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -120px bottom -300px;
}

.faq-sidebar{
	position: sticky;
	top: 20px;
}

.faq-category-box{
	padding: 30px;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
}

.faq-category-box ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-category-box ul li{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.faq-category-box ul li:last-child{
	border: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.faq-category-box ul li a{
	display: block;
    position: relative;
	color: var(--text-color);
	font-size: 16px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.faq-category-box ul li a:after{
	content: '\f105';
    font-family: "Font Awesome 6 Free";
	font-weight: 900;
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    color: var(--accent-color);
}

.faq-category-box ul li a:hover{
	color: var(--accent-color);
}

.faq-section{
	margin-bottom: 60px;
}

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

/************************************/
/***	  25. 404 Page css        ***/
/************************************/

.error-page{
	padding: 100px 0;
	background: var(--secondary-color);
}

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

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

.error-page-content-heading{
	margin-bottom: 30px;
}

.error-page-content-heading h2{
	font-size: 46px;
}

.error-page-content-heading h2 span{
	color: var(--accent-color);
}

/************************************/
/***      26. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1024px){
	
	.main-menu ul li{
		margin-left: 0;
	}
}

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

    #magic-cursor{
        display: none !important;
    }

    .slicknav_nav li, .slicknav_nav ul{
        display: block;
    }

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

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

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

	.section-title h1,
	.section-title h2{
		font-size: 38px;
	}

	.section-title-content{
		text-align: left;
		margin-left: 0;
		margin-top: 15px;
	}

	.hero{
		padding: 50px 0;
	}

	.hero-content{
		padding-right: 0px;
		margin-bottom: 30px;
	}

	.hero-content .section-title.hero-content-title h1{
		font-size: 46px;
	}

	.about-us{
		background-position: right -200px bottom -200px;
		padding: 50px 0;
	}

	.about-image{
		margin-bottom: 30px;
	}

	.about-content{
		padding-left: 0px;
	}

	.our-services{
		background-position: left -100px bottom -250px;
		padding: 50px 0 20px;
	}

	.service-item{		
		padding: 20px;
	}

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

	.strategy-image{
		justify-content: center;
		margin-bottom: 30px;
	}

	.our-strategy-box{
		padding-left: 0px;
	}

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

	.company-feature{
		background-position: right -200px bottom -200px;
		padding: 50px 0;
	}

	.company-feature-content{
		margin-bottom: 10px;
	}

	.company-feature-item .icon-box{
		width: 60px;
		height: 60px;
	}

	.company-feature-item .icon-box img{
		width: 35px;
	}

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

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

	.how-work-item{
		padding: 20px;
	}

	.how-work-content h3{
		margin-bottom: 15px;
	}

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

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

	.pricing-header h2{
		font-size: 38px;
		margin-bottom: 10px;
	}

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

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

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

	.project-body{
		padding: 15px;
	}

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

	.testimonial-item{
		padding: 20px;
	}

	.testimonial-header .author-image figure,
	.testimonial-header .author-image img{
		height: 65px;
		width: 65px;
	}

	.testimonial-btn{
		margin-top: 30px;
	}

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

	.blog-item .post-item-content{
		padding: 25px;
	}

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

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

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

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

	.footer-copyright{
		margin-top: 60px;
		padding: 15px 0;
	}

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

	.page-header-box h1{
		font-size: 46px;
	}

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

	.about-us-image{
		width: 100%;
		max-width: 580px;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.about-us-content-body ul li{
		font-size: 16px;
	}

	.trusted-company{
		margin-top: 40px;
	}

	.trusted-companies-title{
		margin-bottom: 20px;
	}

	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-image{
		justify-content: center;
	}

	.faq-accordion.why-choose-accordion{
		margin-bottom: 30px;
	}

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

	.faq-accordion.why-choose-accordion .accordion-item .accordion-button span{
		font-size: 22px;
	}

	.why-choose-image{
		margin-left: 0;
	}

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

	.about-company-counter .company-counter-box{
		padding: 30px;
	}

	.company-counter-item .company-counter-content h3{
		font-size: 32px;
	}

	.company-counter-item .company-counter-content p{
		font-size: 18px;
	}

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

	.faq-image{
		max-width: 650px;
		margin: 0 auto;
		margin-bottom: 30px;
	}

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

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

	.service-sidebar{
		margin-bottom: 30px;
	}

	.service-list{
		padding: 20px;
	}

	.service-list h3{
		margin-bottom: 20px;
	}

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

	.sidebar-cta-box .icon-box{
		margin-bottom: 15px;
	}

	.sidebar-cta-box .icon-box img{
		width: 50px;
	}

	.sidebar-cta-box .cta-content h3{
		margin-bottom: 15px;
	}

	.company-growth-content ul li{
		font-size: 16px;
	}

	.our-solution-faq{
		padding: 50px 0;
	}

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

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

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

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

	.post-entry blockquote p{
		font-size: 18px;
	}

	.post-entry h2{
		font-size: 36px;
	}

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

	.post-tag-links{
		padding: 0 0px;
	}

	.post-tags{
		margin-bottom: 10px;
	}

	.post-social-sharing ul{
		text-align: left;
	}

	.post-tags .tag-links a{
		padding: 8px 15px;
	}

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

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

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

	.project-sidebar{
		margin-top: 30px;
	}

	.portfolio-info-box{
		padding: 20px;
	}

	.portfolio-info-item .icon-box img{
		width: 40px;
	}
	
	.portfolio-info-content{
		width: calc(100% - 55px);
	}

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

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

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

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

	.contact-form{
		padding: 20px;
	}

	.contact-info-box .contact-info-title{
		margin-bottom: 15px;
	}

	.contact-info-item{
		margin-bottom: 15px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 500px;
	}

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

	.faq-sidebar{
		margin-bottom: 30px;
	}

	.faq-category-box{
		padding: 20px;
	}

	.faq-section{
		margin-bottom: 30px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 30px;
	}

	.error-page-content-heading{
		margin-bottom: 20px;
	}
	
	.error-page-content-heading h2{
		font-size: 38px;
	}
}

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

	.btn-default{
		font-size: 16px;
		padding: 15px 25px;
	}

	.section-title h1,
	.section-title h2{
		font-size: 30px;
	}

	.topbar-contact-info{
		text-align: center;
	}

	.topbar-contact-info ul li{
		margin-right: 0;
		padding-right: 10px;
	}

	.topbar-social-links {
        text-align: left;
        display: flex;
        justify-content: center;
        border-top: 1px solid gray;
    }

	footer.main-footer {
		margin-bottom: 48px !important;
	}

	.hero-content .section-title.hero-content-title h1{
        font-size: 36px;
    }

	.hero-content-footer{
		display: block;
	}

	.wide-client{
		margin-left: 0px;
		margin-top: 15px;
	}

	.hero-image{
		padding-bottom: 30px;
	}

	.company-sales{
		transform: translateY(0%);
		padding: 10px 15px 10px 10px;
	}

	.company-sales .icon-box img{
		width: 40px;
	}

	.company-sales-content{
		width: calc(100% - 55px);
	}

	.company-visit{
		top: 50%;
		transform: translateY(-50%);
		padding: 10px 15px 10px 10px;
	}

	.company-visit .icon-box img{
		width: 40px;
	}

	.company-visit-content{
		width: calc(100% - 55px);
	}

	.about-image{
		padding-bottom: 30px;
	}

	.company-experience{
		top: auto;
		bottom: 0%;
		right: 0;
		transform: translateY(0%);
		padding: 10px 15px 10px 10px;
	}

	.company-experience .icon-box img{
		width: 40px;
	}

	.company-experience-content{
		width: calc(100% - 55px);
	}

	.about-content-body ul{
		display: block;
	}

	.about-content-body ul li{
		width: 100%;
		font-size: 16px;
		margin-bottom: 15px;
	}

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

	.about-content-body ul li:before{
		font-size: 18px;
	}

	.service-body h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.strategy-image::before{
		left: 50%;
		transform: translateX(-50%);
		background-size: contain;
		width: 150px;
		height: 200px;
		z-index: -1;
	}

	.strategy-img-1{
		margin-right: 20px;
	}

	.strategy-img-2{
		padding-top: 60px;
	}

	.strategy-item .icon-box{
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.strategy-item .icon-box img{
		width: 30px;
	}

	.strategy-progress-bar{
		width: calc(100% - 70px);
	}

	.skillbar .skill-data{
		margin-bottom: 5px;
	}

	.skillbar .skill-data .skill-title{
		font-size: 18px;
	}

	.feature-item-content h3{
		font-size: 18px;
	}

	.how-work-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

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

	.pricing-header h2{
        font-size: 28px;
    }

	.pricing-body ul li{
		font-size: 16px;
	}

	.our-projects-nav ul li{
		margin-right: 10px;
	}

	.our-projects-nav ul li a{
		padding: 8px 15px;
	}

	.project-content h3{
		font-size: 18px;
	}

	.testimonial-footer .author-content h3{
		font-size: 18px;
	}

	.post-item-body h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.post-item-body p{
		margin-bottom: 15px;
	}

	.footer-info-box .icon-box i{
		font-size: 18px;
	}

	.footer-links{
		margin-bottom: 30px;
	}

	.main-footer .col-12:last-child .footer-links{
		margin-bottom: 0;
	}

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

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

	.footer-copyright-text{
		text-align: center;
		margin-bottom: 15px;
	}

	.footer-copyright .footer-social-links ul{
		text-align: center;
	}

	.page-header{
		padding: 60px 0px;
	}

	.page-header-box h1{
		font-size: 36px;
	}

	.about-img-1{
		width: 250px;
	}

	.about-img-2 img{
		width: 175px;
	}

	.experience-counter-item{
		padding: 10px 15px 10px 10px;
		width: 240px;
		top: 0;
	}

	.experience-counter-item .icon-box img{
		width: 40px;
	}

	.about-us-content-body ul li{
		width: 100%;
	}

	.trusted-companies-title h3{
		font-size: 16px;
	}

	.why-choose-image::before{
		left: 50%;
		transform: translateX(-50%);
		background-size: contain;
		width: 150px;
		height: 200px;
	}

	.faq-accordion.why-choose-accordion .accordion-header .icon-box{
		top: 0;
	}

	.faq-accordion.why-choose-accordion .accordion-item .accordion-button span{
		font-size: 18px;
	}

	.faq-accordion.why-choose-accordion .accordion-item .accordion-button{
        font-size: 18px;
    }

	.why-choose-img-1{
		margin-right: 20px;
	}

	.why-choose-img-2{
		padding-top: 60px;
	}

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

	.about-company-counter .company-counter-box{
		padding: 30px 30px 0;
	}

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

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

	.company-counter-item .company-counter-content h3{
		font-size: 24px;
	}

	.company-counter-item .company-counter-content p{
		font-size: 16px;
	}

	.faq-img-1{
		width: 250px;
	}

	.faq-img-2 img{
		width: 175px;
		border-width: 6px;
	}
	
	.faq-accordion .accordion-item .accordion-button{
		font-size: 18px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
	}

	.service-list h3{
		font-size: 18px;
	}

	.sidebar-cta-box .cta-content h3{
		font-size: 18px;
	}

	.service-entry h3{
		font-size: 18px;
	}

	.company-growth-content h3{
		font-size: 18px;
	}

	.company-growth-img{
		margin-bottom: 30px;
	}

	.post-entry blockquote{
		background: var(--secondary-color) url('../images/icon-blockquote.svg') no-repeat 20px 20px;
		background-size: 35px;
		padding: 55px 20px 20px 20px;
	}
	
	.post-entry h2{
		font-size: 30px;
	}

	.tag-links{
		font-size: 18px;
	}

	.project-single-content .project-section-title h3{
		font-size: 18px;
	}

	.project-values-content ul{
		gap: 10px;
	}

	.project-values-content ul li{
		width: 100%;
		padding-left: 25px;
	}

	.project-values-content ul li:before{
		height: 14px;
		width: 14px;
		top: 6px;
	}

	.project-about-image .project-about-img-1{
		margin-bottom: 20px;
	}

	.portfolio-info-box-title h3{
		font-size: 18px;
	}

	.contact-info-box .contact-info-title h2{
		font-size: 18px;
	}

	.contact-form .form-control{
		padding: 12px 15px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 350px;
	}

	.error-page-content-heading h2{
		font-size: 30px;
	}

	.dropdown-item{
		width: 100% !important;
	}
}

/* Custom Header Styling */
.custom-header {
    background-color: #fff;
    padding: 10px 0;
}

.custom-menu {
    position: relative;
}

.custom-menu .nav-link {
	font-size: 16px;
	font-weight: 500;
		padding: 15px 15px !important;
		color: var(--primary-color);
		text-transform: capitalize;
		transition: all 0.3s ease-in-out;
		position: relative;
}

.mega-menu-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    padding: 20px;
    z-index: 999;
}

.mega-menu:hover .mega-menu-content {
    visibility: visible;
	display: block;
    opacity: 1;
}

.mega-menu-content .row {
    display: flex;
    justify-content: space-between;
}

.mega-menu-content .col-lg-4 {
    width: 32%;
}

.mega-menu-content h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.mega-menu-content ul {
    list-style: none;
    padding: 0;
}

.mega-menu-content ul li {
    margin-bottom: 5px;
}

.mega-menu-content ul li a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mega-menu-content ul li a:hover {
    color: #007bff;
}


.close-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.nav-item.dropdown:hover .dropdown-menu {
	display: block;
	opacity: 1;
	visibility: visible;
}

.dropdown-menu {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out;
}

/* 
/* Mobile Responsive Styling */
@media (max-width: 991px) {
    .mega-menu-content {
        position: relative;
        top: 0;
        width: 100%;
        padding: 10px;
    }

    .mega-menu-content .row {
        flex-direction: column;
    }

    .mega-menu-content .col-lg-4 {
        width: 100%;
        margin-bottom: 20px;
    }
}


@media (max-width:767px){
	.custom-menu {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 9999;
		overflow-y: auto;
		padding: 20px;
	}

	.nav-menu-wrapper {
		margin-top: 50px;
	}
	
}
/* ====================== NEW BLACK BUTTON STYLE ====================== */
.btn-black {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1em;
    color: var(--white-color); /* White text */
    text-transform: capitalize;
    background-color: var(--primary-color); /* Black background from --primary-color: #0E0D1B */
    padding: 20px 30px;
    border-radius: 10px;
    border: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-black:hover {
    background-color: #1a1a2e; /* Slightly lighter black for hover effect */
    color: var(--white-color);
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Premium shadow */
}

/* Add Custom New CSS */

.blog-icon {
    text-align: center; /* Icon ko center mein rakhega */
}

.blog-icon img {
    transition: all 0.3s ease; /* Hover pe smooth zoom */
}

.blog-item:hover .blog-icon img {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Company Feature Image - Professional Overlay Card */
.company-feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Rounded corners for premium feel */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.company-feature-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Smooth zoom on hover */
}

.company-feature-image:hover img {
    transform: scale(1.05); /* Subtle zoom effect */
}

/* Company Feature Image - Professional Overlay Card */
.company-feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.company-feature-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Smooth zoom */
}

.company-feature-image:hover img {
    transform: scale(1.05); /* Subtle zoom */
}

/* Overlay Card */
.overlay-card {
    position: absolute;
    bottom: 10%; /* Positioned lower, near waist/bottom */
    right: 10%; /* Adjusted for better alignment */
    background-color: #ffffff;
    border-radius: 18px;
    padding: 25px 30px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    width: 320px;
    transform: translateY(100%); /* Start from below */
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.6s ease; /* Bounce animation */
    opacity: 0;
}

.company-feature-image:hover .overlay-card {
    transform: translateY(0); /* Slide up on hover */
    opacity: 1;
}

.card-content h4 {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}

/* Google Partners Badge */
.google-partners-badge {
    margin-top: 15px;
    text-align: center;
}

.google-partners-badge img {
    width: 120px;
    height: auto;
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .overlay-card {
        bottom: 5%;
        right: 5%;
        width: 280px;
        padding: 20px 25px;
    }
}

@media (max-width: 767px) {
    .company-feature-image {
        margin-bottom: 30px;
    }
    .overlay-card {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        transform: translateY(0);
        opacity: 1;
        margin-top: -40px; /* Slight overlap on mobile */
    }
}

/* Company Feature Image - Professional Overlay Card */
.company-feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.company-feature-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Smooth zoom */
}

.company-feature-image:hover img {
    transform: scale(1.05); /* Subtle zoom */
}

/* Company Feature Image - Fresh Overlay Card */
.company-feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.company-feature-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Smooth zoom */
}

.company-feature-image:hover img {
    transform: scale(1.05); /* Subtle zoom */
}

/* Overlay Card - New Animation: Fade + Scale with Glow */
.overlay-card {
    position: absolute;
    bottom: 5%; /* Lower position, near bottom/waist */
    right: 5%; /* Adjusted for alignment */
    background-color: #ffffff;
    border-radius: 18px;
    padding: 25px 30px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    width: 320px;
    opacity: 0;
    transform: scale(0.8); /* Start small */
    transition: opacity 0.6s ease-in-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce scale animation */
}

.company-feature-image:hover .overlay-card {
    opacity: 1;
    transform: scale(1); /* Scale to normal with bounce */
    animation: glow-pulse 1.5s ease-in-out infinite; /* New glow pulse to draw attention */
}

/* New Glow Pulse Animation */
@keyframes glow-pulse {
    0% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); }
    50% { box-shadow: 0 12px 35px rgba(255, 189, 7, 0.5); } /* Yellow glow */
    100% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); }
}

/* Card Content - 4-5 Lines */
.card-content h4 {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}

/* Google Partners Badge */
.google-partners-badge {
    margin-top: 15px;
    text-align: center; /* Always center the badge */
}

.google-partners-badge img {
    width: 120px;
    height: auto;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .overlay-card {
        bottom: 0%;
        right: 0;
        width: 280px;
        padding: 20px 25px;
    }
}

@media (max-width: 767px) {
    .company-feature-image {
        margin-bottom: 30px;
    }
    .overlay-card {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        transform: scale(1);
        opacity: 1;
        margin-top: -40px; /* Slight overlap on mobile */
        animation: none; /* No animation on mobile for simplicity */
    }
    .google-partners-badge {
        text-align: center; /* Center badge on mobile */
    }
}

/* Button Styles */
.custom-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px; /* Rounded corners for better look */
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition without disruptive animation */
    cursor: pointer;
    margin-right: 10px; /* Space between buttons */
}

.yellow-btn {
    background-color: #FFD700; /* Vibrant yellow */
    color: #000000;
}

.yellow-btn:hover {
    background-color: #FFC700; /* Slightly darker on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow lift */
}

.red-btn {
    background-color: #FF4500; /* Bright red */
    color: #FFFFFF;
}

.red-btn:hover {
    background-color: #FF3500; /* Slightly darker on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow lift */
}

/* Override any existing disruptive animations */
.btn:hover {
    transform: none !important; /* Prevent any scale or translate on hover if theme has it */
    animation: none !important; /* Disable any hover animations from WOW or theme */
}
/* What We Offer Section */
.what-we-offer {
    padding: 100px 0 70px;
    background: var(--secondary-color) url('../images/section-bg-img-2.png') no-repeat;
    background-position: left -100px bottom -250px;
}

.offer-section-title h3 {
    color: var(--accent-color);
    text-transform: capitalize;
    letter-spacing: 0;
}

.offer-section-title h2 {
    margin-bottom: 0;
}

.offer-section-title h2::after {
    display: none;
}

.offer-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
    border-radius: 16px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    cursor: none;
}

.offer-item:hover {
    transform: translateY(-10px);
    box-shadow: 5px 28px 95px 8px var(--box-shadow-color);
}

.offer-icon {
    position: relative;
    min-width: 72px;
    width: 72px;
    height: 72px;
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.offer-icon::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
    border-radius: 50px;
}

.offer-item:hover .offer-icon {
    border-color: transparent;
}

.offer-item:hover .offer-icon::before {
    transform: scale(1);
}

.offer-icon img {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: all 0.4s ease-in-out;
}

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

.offer-content h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
    margin-bottom: 12px;
}

.offer-content p {
    margin: 0;
    color: var(--text-color);
    font-style: normal;
}

@media only screen and (max-width: 991px) {
    .what-we-offer {
        padding: 80px 0 50px;
    }

    .offer-item {
        gap: 16px;
        padding: 24px;
    }

    .offer-icon {
        min-width: 64px;
        width: 64px;
        height: 64px;
    }

    .offer-icon img {
        width: 36px;
        height: 36px;
    }

    .offer-content h3 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .offer-item {
        margin-bottom: 25px;
        padding: 20px;
    }

    .offer-icon {
        min-width: 58px;
        width: 58px;
        height: 58px;
    }

    .offer-icon img {
        width: 32px;
        height: 32px;
    }
}

/* Proven Results Section */
.proven-results {
    padding: 100px 0;
    background: var(--secondary-color) url('../images/section-bg-img-1.png') no-repeat;
    background-position: left -120px top -100px;
}

.proven-results-row {
    row-gap: 40px;
}

.proven-visual {
    position: relative;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
    padding: 28px;
}

.proven-visual-badge {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white-color);
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
    border-radius: 30px;
    margin-bottom: 18px;
}

.proven-visual figure {
    display: block;
    margin: 0 0 20px;
}

.proven-visual figure img {
    width: 100%;
    border-radius: 12px;
}

.proven-visual-points p {
    position: relative;
    margin: 0 0 10px;
    padding-left: 26px;
    color: var(--primary-color);
}

.proven-visual-points p:last-child {
    margin-bottom: 0;
}

.proven-visual-points p::before {
    content: '\f058';
    position: absolute;
    top: 2px;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color);
    font-size: 16px;
}

.proven-content .section-title {
    margin-bottom: 18px;
}

.proven-content .section-title h3 {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.proven-content .section-title h2 {
    font-size: 42px;
    line-height: 1.15em;
}

.proven-intro {
    margin: 0 0 26px;
    color: var(--text-color);
}

.proven-results-list {
    border-top: 1px solid var(--dark-divider-color);
}

.result-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--dark-divider-color);
}

.result-item h3 {
    font-size: 24px;
    line-height: 1.25em;
    margin-bottom: 8px;
    color: var(--primary-color);
}

.result-item p {
    margin: 0;
    color: var(--text-color);
}

@media only screen and (max-width: 991px) {
    .proven-results {
        padding: 80px 0;
        background-position: left -180px top -140px;
    }

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

@media only screen and (max-width: 767px) {
    .proven-results {
        padding: 60px 0;
    }

    .proven-visual {
        padding: 20px;
    }

    .proven-content .section-title h2 {
        font-size: 30px;
    }

    .result-item h3 {
        font-size: 21px;
    }
}

/* ====================== NEW CLEAN FREELANCER VS AGENCY ====================== */
.freelancer-vs-agency-new {
    background: var(--white-color);
    padding: 100px 0 80px;
}

.freelancer-vs-agency-new .vs-agency {
    color: var(--accent-color);
}

.comparison-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.comparison-col {
    flex: 1;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 45px 35px;
    box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
    transition: all 0.4s ease;
}

.comparison-col:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.comparison-header {
    text-align: center;
    margin-bottom: 35px;
}

.comparison-header .label {
    display: inline-block;
    padding: 6px 22px;
    background: #f1f1f1;
    color: #666;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 10px;
}

.freelancer-col .label { background: #22c55e; color: #fff; }
.agency-col .label    { background: #ef4444; color: #fff; }

.comparison-col h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    padding: 13px 0;
    border-bottom: 1px solid var(--dark-divider-color);
    font-size: 17px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.comparison-list li:last-child { border-bottom: none; }

.comparison-list i {
    font-size: 21px;
    width: 26px;
    margin-top: 2px;
}

.comparison-list .fa-circle-check { color: #22c55e; }
.comparison-list .fa-triangle-exclamation { color: #ef4444; }

/* Big VS Circle */
.vs-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: #111;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 2;
}

/* Responsive */
@media (max-width: 991px) {
    .comparison-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .vs-circle {
        position: relative;
        margin: 20px auto;
        top: auto;
        left: auto;
        transform: none;
    }
}

/* ====================== FINAL PREMIUM CONSULTATION SECTION ====================== */
.free-consultation-section {
    background: #ffffff;
    padding: 70px 0 60px;
}

.consultation-form-box,
.services-box {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    padding: 38px 32px;
    height: 100%;
}

/* Form Styling */
.consultation-form-box h3 {
    font-size: 27px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 30px;
}

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

.form-group label {
    display: block;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 8px;
    font-size: 15px;
}

.form-group label span {
    color: #ef4444;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    background: #ffffff;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 5px rgba(255, 189, 7, 0.18);
    outline: none;
}

/* Green Tick on Focus */
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    color: #22c55e;
}

/* Button */
.consultation-form-box button.btn-default {
    padding: 16px 40px;
    font-size: 17.5px;
    font-weight: 700;
    border-radius: 12px;
    margin-top: 10px;
    background: linear-gradient(90deg, #facc15, #fbbf24);
}

/* Right Side Services */
.action-content h2 {
    font-size: 31px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.action-content h4 {
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 24px;
    position: relative;
}

.action-content h4:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 68px;
    height: 3px;
    background: var(--accent-color);
}

.services-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-box li {
    padding: 11px 0;
    font-size: 16.2px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f5f5f5;
}

.services-box li:last-child {
    border-bottom: none;
}

.services-box i {
    color: #22c55e;        /* Green Tick */
    font-size: 21px;
    min-width: 22px;
}

/* Perfect Alignment Fix */
.row.g-4 > div {
    display: flex;
    flex-direction: column;
}

/* Responsive */
@media (max-width: 991px) {
    .free-consultation-section {
        padding: 60px 0 50px;
    }
    .consultation-form-box,
    .services-box {
        padding: 32px 25px;
    }
}

/* ==================== SELECT YOUR BUDGET - FIXED CSS ==================== */
.form-group select {
    width: 100%;
    padding: 15px 20px;
    background: #ffffff;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    appearance: none;                    /* default arrow hatane ke liye */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 1.2em;
}

.form-group select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 5px rgba(255, 189, 7, 0.18);
    outline: none;
}

/* ====================== Mission Vision + Scale Section (White Background + Logo Colors) ====================== */
.mission-vision-scale {
    background: #ffffff;           /* Pure White Background */
    padding: 100px 0 120px;
}

.mission-vision-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 50px 40px;
    height: 100%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
    transition: all 0.4s ease;
    border: 1px solid #f1f1f1;
}

.mission-vision-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(255, 204, 0, 0.20); /* Yellow shadow */
}

.icon-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
    font-size: 48px;
    transition: all 0.4s ease;
}

/* Mission - Red */
.mission-card .icon-wrapper { 
    background: #fee2e2; 
    color: #ef4444; 
}

/* Vision - Logo Yellow */
.vision-card .icon-wrapper { 
    background: #FFFBEB; 
    color: #FFCC00; 
}

.mission-vision-card:hover .icon-wrapper {
    transform: scale(1.08);
}

.mission-vision-card h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}
.mission-card h3 { color: #ef4444; }
.vision-card h3  { color: #FFCC00; }   /* Logo Yellow */

.mission-vision-card p {
    color: #4b5563;
    line-height: 1.75;
    font-size: 17px;
}

/* Section Title Colors */
.mission-title { color: #ef4444; }
.vision-title  { color: #FFCC00; }

/* Scale Business Section */
.scale-business .subtitle {
    color: #FFCC00;                    /* Logo Yellow */
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
}

.scale-business h2 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.scale-business p {
    font-size: 17.5px;
    color: #374151;
    line-height: 1.8;
}

/* Google Partner Badge (Image) */
.google-partner-badge {
    display: inline-block;
    padding: 20px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    max-width: 280px;
}

.google-partner-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px rgba(255, 204, 0, 0.25);
}

.google-partner-badge img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 767px) {
    .mission-vision-scale {
        padding: 80px 0;
    }
    .mission-vision-card {
        padding: 40px 30px;
    }
}

/* ====================== Best Experience + Our Values ====================== */
.best-experience .experience-header {
    background: #0f172a;
    padding: 130px 0 100px;
    position: relative;
    overflow: hidden;
}

/* Circuit Pattern */
.best-experience .experience-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.experience-header h2 {
    font-size: 52px;
    line-height: 1.15;
    margin-bottom: 15px;
}

.highlight {
    color: #FFCC00;
}

.experience-line {
    width: 120px;
    height: 3px;
    background: #FF2D55;
    margin: 20px 0;
}

.experience-header p {
    font-size: 19px;
    max-width: 520px;
}

.big-ads-logo img {
    max-width: 380px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

/* Our Values */
.our-values {
    background: #ffffff;
    padding: 100px 0;
}

.value-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 45px 35px;
    height: 100%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border: 1px solid #f1f5f9;
}

.value-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(255, 204, 0, 0.18);
}

.value-icon {
    width: 78px;
    height: 78px;
    background: #FFFBEB;
    color: #FFCC00;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
}

.value-card h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1e2937;
}

.value-card p {
    color: #475569;
    line-height: 1.75;
    font-size: 16.5px;
}

/* Responsive */
@media (max-width: 991px) {
    .experience-header h2 { font-size: 42px; }
    .big-ads-logo img { max-width: 300px; }
}

@media (max-width: 767px) {
    .experience-header { padding: 100px 0 80px; }
    .our-values { padding: 80px 0; }
}

/* ==================== HIRE GOOGLE ADS FREELANCER SECTION ==================== */
.hire-google-ads-section {
    position: relative;
}

.hire-google-ads-section .profile-card {
    background: #fff;
    transition: all 0.3s ease;
}

.hire-google-ads-section .profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.hire-google-ads-section .btn-default.btn-lg {
    font-size: 1.25rem;
    padding: 18px 42px;
    border-radius: 50px;
    background: #1DBF73;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hire-google-ads-section .btn-default.btn-lg:hover {
    background: #19a563;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(29, 191, 115, 0.35);
}

/* Responsive */
@media (max-width: 991px) {
    .hire-google-ads-section .profile-card {
        margin-bottom: 30px;
    }
}

/* ==================== GOOGLE ADS MANAGEMENT SECTION ==================== */
.google-ads-management {
    position: relative;
}

.management-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.management-services-list li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 1.1rem;
    color: #333;
}

.management-services-list li:last-child {
    border-bottom: none;
}

.management-services-list li i {
    font-size: 1.8rem;
    color: #1DBF73;
    width: 40px;
}

.management-services-list li span {
    font-weight: 500;
    position: relative;
}

.management-services-list li span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #1DBF73;
    bottom: -2px;
    left: 0;
    opacity: 0.2;
}

/* Illustration Container */
.management-illustration {
    position: relative;
    display: inline-block;
}

.management-illustration img {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Floating Badges */
.illustration-badge {
    position: absolute;
    background: white;
    padding: 12px;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.target-badge {
    top: 15%;
    left: -10%;
}

.gears-badge {
    bottom: 12%;
    right: -8%;
}

/* Yellow Button Style (already in your theme, just ensuring) */
.btn.custom-btn.yellow-btn {
    background: #F5A623;
    color: #fff;
    font-weight: 600;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

.btn.custom-btn.yellow-btn:hover {
    background: #e6951a;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(245, 166, 35, 0.4);
}

/* Responsive */
@media (max-width: 991px) {
    .management-services-list li {
        font-size: 1rem;
    }
    
    .target-badge, .gears-badge {
        display: none;
    }
}

/* ==================== ALL-IN-ONE PPC STRATEGY SECTION (No Green) ==================== */
.ppc-strategy-section {
    position: relative;
}

.ppc-card {
    background: #fff;
    border: 2px solid #f1f3f5;
    border-radius: 20px;
    padding: 40px 25px 35px;
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.ppc-card:hover {
    border-color: #F5A623;
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(245, 166, 35, 0.15);
}

.ppc-card .icon-box {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: #333;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.ppc-card:hover .icon-box {
    background: #F5A623;
    color: #fff;
    transform: scale(1.1);
}

.ppc-card h4 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

.ppc-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

/* Last row centering */
@media (min-width: 992px) {
    .ppc-strategy-section .row.g-4 > div:nth-child(10),
    .ppc-strategy-section .row.g-4 > div:nth-child(11) {
        margin-left: auto;
        margin-right: auto;
    }
}

.accordion-button {
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: #ffbd07; 
    color: #fff;
}

.accordion-body {
    background: #f8f9fa;
}

 

/* ====================== FREE TRIAL BANNER ====================== */
.free-trial-banner {
    background: #0f172a;
    color: #ffffff;
    padding: 70px 0 60px;
}

.free-trial-banner h2 {
    font-size: 40px;
    margin-bottom: 20px;
    color: #ffffff; /* White color for visibility */
    font-weight: 800;
    letter-spacing: -0.5px;
}

.free-trial-banner p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto 30px;
    color: #f3f4f6; /* Light gray for better readability */
    font-weight: 500;
}

/* ====================== DOUBTS SECTION ====================== */
.doubts-section {
    background: #ffffff;
    padding: 50px 0;
}

.doubts-section h2 {
    font-size: 36px;
    margin-bottom: 15px;
    color: var(--accent-color);
    font-weight: 800;
}

.doubts-section p {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #1f2937;
}

.doubts-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-whatsapp {
    display: inline-block;
    background: #22c55e;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background: #16a34a;
    color: #ffffff;
}

/* ====================== HIRE SPECIALIST SECTION ====================== */
.hire-specialist-section {
    background: #ffffff;
    padding: 40px 0 60px;
}

.hire-specialist-section h2 {
    font-size: 48px;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.hire-specialist-section h3 {
    font-size: 32px;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-weight: 800;
}

.hire-specialist-section p {
    font-size: 18px;
    color: #4b5563;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 991px) {
    .free-trial-banner h2,
    .doubts-section h2,
    .hire-specialist-section h2 {
        font-size: 32px;
    }
    .doubts-buttons {
        flex-direction: column;
        gap: 15px;
    }
}

/* sticky button  */
.sticky-contact-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 9999
}

.call-btn
 {
    background-color: #f3a127
}

.sticky-contact-buttons a {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none
}

.whatsapp-btn {
    background-color: green
}

@media (min-width:768px) {
    .m-md-n1 {
        margin: -.25rem !important
    }
    .mt-md-n1,
    .my-md-n1 {
        margin-top: -.25rem !important
    }
    .me-md-n1,
    .mx-md-n1 {
        margin-right: -.25rem !important
    }
    .mb-md-n1,
    .my-md-n1 {
        margin-bottom: -.25rem !important
    }
    .ms-md-n1,
    .mx-md-n1 {
        margin-left: -.25rem !important
    }
    .m-md-n2 {
        margin: -.5rem !important
    }
    .mt-md-n2,
    .my-md-n2 {
        margin-top: -.5rem !important
    }
    .me-md-n2,
    .mx-md-n2 {
        margin-right: -.5rem !important
    }
    .mb-md-n2,
    .my-md-n2 {
        margin-bottom: -.5rem !important
    }
    .ms-md-n2,
    .mx-md-n2 {
        margin-left: -.5rem !important
    }
    .m-md-n3 {
        margin: -1rem !important
    }
    .mt-md-n3,
    .my-md-n3 {
        margin-top: -1rem !important
    }
    .me-md-n3,
    .mx-md-n3 {
        margin-right: -1rem !important
    }
    .mb-md-n3,
    .my-md-n3 {
        margin-bottom: -1rem !important
    }
    .ms-md-n3,
    .mx-md-n3 {
        margin-left: -1rem !important
    }
    .m-md-n4 {
        margin: -1.5rem !important
    }
    .mt-md-n4,
    .my-md-n4 {
        margin-top: -1.5rem !important
    }
    .me-md-n4,
    .mx-md-n4 {
        margin-right: -1.5rem !important
    }
    .mb-md-n4,
    .my-md-n4 {
        margin-bottom: -1.5rem !important
    }
    .ms-md-n4,
    .mx-md-n4 {
        margin-left: -1.5rem !important
    }
    .m-md-n5 {
        margin: -3rem !important
    }
    .mt-md-n5,
    .my-md-n5 {
        margin-top: -3rem !important
    }
    .me-md-n5,
    .mx-md-n5 {
        margin-right: -3rem !important
    }
    .mb-md-n5,
    .my-md-n5 {
        margin-bottom: -3rem !important
    }
    .ms-md-n5,
    .mx-md-n5 {
        margin-left: -3rem !important
    }
    .m-md-n6 {
        margin: -5rem !important
    }
    .mt-md-n6,
    .my-md-n6 {
        margin-top: -5rem !important
    }
    .me-md-n6,
    .mx-md-n6 {
        margin-right: -5rem !important
    }
    .mb-md-n6,
    .my-md-n6 {
        margin-bottom: -5rem !important
    }
    .ms-md-n6,
    .mx-md-n6 {
        margin-left: -5rem !important
    }
    .m-md-n7 {
        margin: -7rem !important
    }
    .mt-md-n7,
    .my-md-n7 {
        margin-top: -7rem !important
    }
    .me-md-n7,
    .mx-md-n7 {
        margin-right: -7rem !important
    }
    .mb-md-n7,
    .my-md-n7 {
        margin-bottom: -7rem !important
    }
    .ms-md-n7,
    .mx-md-n7 {
        margin-left: -7rem !important
    }
    .m-md-n8 {
        margin: -10rem !important
    }
    .mt-md-n8,
    .my-md-n8 {
        margin-top: -10rem !important
    }
    .me-md-n8,
    .mx-md-n8 {
        margin-right: -10rem !important
    }
    .mb-md-n8,
    .my-md-n8 {
        margin-bottom: -10rem !important
    }
    .ms-md-n8,
    .mx-md-n8 {
        margin-left: -10rem !important
    }
    .m-md-n10,
    .m-md-n9 {
        margin: -12rem !important
    }
    .mt-md-n10,
    .mt-md-n9,
    .my-md-n10,
    .my-md-n9 {
        margin-top: -12rem !important
    }
    .me-md-n10,
    .me-md-n9,
    .mx-md-n10,
    .mx-md-n9 {
        margin-right: -12rem !important
    }
    .mb-md-n10,
    .mb-md-n9,
    .my-md-n10,
    .my-md-n9 {
        margin-bottom: -12rem !important
    }
    .ms-md-n10,
    .ms-md-n9,
    .mx-md-n10,
    .mx-md-n9 {
        margin-left: -12rem !important
    }
    .sticky-contact-buttons {
        display: none
    }
}

.badge-pill {
    display: inline-block;
    background: #fcc735;
    color: #ffffff;
    padding: 10px 22px;
    margin: 6px 8px 6px 0;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
}

/* ====================== WHAT WE OFFER SECTION - #ffbd07 THEME ====================== */
.what-we-offer {
    background: linear-gradient(135deg, #fffaf0 0%, #fff3e0 100%);
}

.offer-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px 35px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #ffe8b3;
}

.offer-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(255, 189, 7, 0.25);
    border-color: #ffbd07;
}

.card-number {
    position: absolute;
    top: -20px;
    right: 25px;
    font-size: 6rem;
    font-weight: 900;
    color: rgba(255, 189, 7, 0.10);
    line-height: 1;
}

.card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ffbd07, #ff9e00);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(255, 189, 7, 0.4);
}

.card-title {
    font-size: 1.35rem;
    margin-bottom: 20px;
    color: #212529;
}

.offer-list li {
    padding: 8px 0;
    font-size: 0.98rem;
    color: #555;
}

.offer-list i {
    color: #ffbd07;           /* Exact color code */
    width: 20px;
}

/* Industry Cards */
.industry-card {
    background: white;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    height: 100%;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    border: 1px solid #ffe8b3;
}

.industry-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(255, 189, 7, 0.25);
    border-color: #ffbd07;
}

.industry-card i {
    font-size: 3rem;
    color: #ffbd07;
    margin-bottom: 18px;
}

.industry-card h5 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #212529;
}

.industry-card p {
    font-size: 0.95rem;
    color: #666;
}

/* Responsive */
@media (max-width: 992px) {
    .offer-card {
        margin-bottom: 25px;
    }
}

/* ====================== PREMIUM GALLERY SLIDER ====================== */
.gallery-section {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.gallery-swiper .swiper-slide img {
    width: 100%;
    height: 250px;                /* 1920×1080 ke liye perfect aspect ratio */
	padding: 15px 15px;
    object-fit: cover;
	border:1px solid #f1f1f1;
    border-radius: 16px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.gallery-swiper .swiper-slide img:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    color: #f59e0b !important;
    background: rgba(255,255,255,0.9) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.5rem !important;
}

/* Pagination Dots */
.swiper-pagination-bullet {
    background: #cbd5e1 !important;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #f59e0b !important;
    opacity: 1;
}

/* Lightbox Customization (optional) */
.lightbox .lb-image {
    border-radius: 12px;
}



.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
}

/* 🔥 WHAT'S INCLUDED SECTION - UNIQUE CSS (head mein ya apni CSS file mein paste karo) */
.whats-included-unique {
  padding: 80px 20px;
  background: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.inner-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

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

.meeting-image {
  width: 100%;
  border-radius: 16px;
  box-shadow: 30px 30px 60px -20px rgba(0, 0, 0, 0.15);
}

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

/* .section-title {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
} */

.title-highlight {
  color: #1e40af;
}

.section-subtitle {
  font-size: 18px;
  color: #4b5563;
  margin-bottom: 40px;
  line-height: 1.5;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 15px;
	}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.green-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #10b981;
  color: white;
  border-radius: 50%;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.feature-title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.feature-desc {
  color: #4b5563;
  font-size: 16px;
}

.ready-message {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d97706;
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 24px;
}

.sparkle {
  font-size: 28px;
}

.audit-button {
  background-color: #facc15;
  color: #111827;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 20px -5px rgb(250 204 21);
  transition: all 0.3s ease;
}

.audit-button:hover {
  background-color: #eab308;
  transform: translateY(-4px);
  box-shadow: 0 15px 25px -5px rgb(250 204 21);
}

.arrow {
  font-size: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .inner-container {
    gap: 40px;
  }
  .section-title {
    font-size: 16px;
  }
}

/* ===================================
   Google Ads Experts Section CSS
   custom.css mein paste karo
=================================== */

.experts-section {
    background-color: #fffdf5;
    padding: 70px 0;
}

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

.experts-section-title h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 16px;
}

.experts-section-title h2 span {
    color: #f5a623;
}

.experts-section-title p {
    font-size: 15px;
    color: #555;
    line-height: 1.75;
    max-width: 650px;
    margin: 0 auto;
}

.experts-label {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-top: 20px;
}

.experts-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.experts-checklist li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #ebebeb !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.6 !important;
    list-style: none !important;
}

.experts-checklist li:last-child {
    border-bottom: none !important;
}

.experts-checklist li i {
    color: #1D9E75 !important;
    font-size: 13px !important;
    margin-top: 3px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
}

/* ===================================
   What We Fix Section CSS
   custom.css mein paste karo
=================================== */

/* ===================================
   What We Fix Section CSS
   custom.css mein paste karo
=================================== */

/*
   Orange Color Variants Used:
   #f5a623  — base orange
   #f7b84b  — light orange
   #f3911a  — dark orange
   #f9c96e  — soft golden
   #e8861a  — deep orange
   #fad28c  — pale gold (icon bg tints)
*/

.what-we-fix {
    background-color: #ffffff;
    padding: 70px 0;
}

.fix-section-title {
    margin-bottom: 50px;
}

.fix-section-title h2 {
    font-size: 34px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
}

.fix-section-title h2 span {
    color: #f5a623;
}

.fix-section-title p {
    font-size: 15px;
    color: #999;
    margin: 0;
}

/* Base Card */
.fix-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fffaf2;
    border-radius: 18px;
    padding: 30px 14px 22px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.fix-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(245, 166, 35, 0.15);
}

/* Icon Box */
.fix-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.fix-icon-box i {
    font-size: 24px;
}

.fix-card p {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin: 0;
    line-height: 1.4;
}

/* ---- Card 1 — #f5a623 base orange ---- */
.fix-1 .fix-icon-box {
    background: #fff1d6;
}
.fix-1 .fix-icon-box i {
    color: #f5a623;
}
.fix-1:hover,
.fix-1.active {
    border-color: #f5a623;
    background: #fff8ec;
}
.fix-1:hover p,
.fix-1.active p {
    color: #f5a623;
}

/* ---- Card 2 — #f3911a dark orange ---- */
.fix-2 .fix-icon-box {
    background: #fde8c8;
}
.fix-2 .fix-icon-box i {
    color: #f3911a;
}
.fix-2:hover,
.fix-2.active {
    border-color: #f3911a;
    background: #fef3e4;
}
.fix-2:hover p,
.fix-2.active p {
    color: #f3911a;
}

/* ---- Card 3 — #f7b84b light orange ---- */
.fix-3 .fix-icon-box {
    background: #fef3d8;
}
.fix-3 .fix-icon-box i {
    color: #f7b84b;
}
.fix-3:hover,
.fix-3.active {
    border-color: #f7b84b;
    background: #fffae9;
}
.fix-3:hover p,
.fix-3.active p {
    color: #f7b84b;
}

/* ---- Card 4 — #e8861a deep orange ---- */
.fix-4 .fix-icon-box {
    background: #fde0bb;
}
.fix-4 .fix-icon-box i {
    color: #e8861a;
}
.fix-4:hover,
.fix-4.active {
    border-color: #e8861a;
    background: #fef0dd;
}
.fix-4:hover p,
.fix-4.active p {
    color: #e8861a;
}

/* ---- Card 5 — #f9c96e soft golden ---- */
.fix-5 .fix-icon-box {
    background: #fef6e0;
}
.fix-5 .fix-icon-box i {
    color: #d4870e;
}
.fix-5:hover,
.fix-5.active {
    border-color: #f9c96e;
    background: #fffaee;
}
.fix-5:hover p,
.fix-5.active p {
    color: #d4870e;
}

/* ---- Card 6 — #fad28c pale gold ---- */
.fix-6 .fix-icon-box {
    background: #fef8e6;
}
.fix-6 .fix-icon-box i {
    color: #c97d0a;
}
.fix-6:hover,
.fix-6.active {
    border-color: #fad28c;
    background: #fffdf4;
}
.fix-6:hover p,
.fix-6.active p {
    color: #c97d0a;
}

/* ===================================
   Who Can Benefit Section CSS
   custom.css mein paste karo
=================================== */

.who-can-benefit {
    background: linear-gradient(135deg, #fdf6ec 0%, #fef9f2 50%, #fdf0e0 100%);
    padding: 70px 0;
}

.benefit-section-title {
    margin-bottom: 45px;
}

.benefit-section-title h6 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #f5a623;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.benefit-section-title h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

/* Benefit Card */
.benefit-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 30px 35px;
    text-align: center;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    border: 1.5px solid #f5e8d0;
    height: 100%;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(245, 166, 35, 0.12);
    border-color: #f5a623;
}

/* Icon Box */
.benefit-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #fff6e5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    transition: all 0.3s ease;
}

.benefit-icon-box i {
    font-size: 26px;
    color: #f5a623;
}

.benefit-card:hover .benefit-icon-box {
    background: #f5a623;
}

.benefit-card:hover .benefit-icon-box i {
    color: #ffffff;
}

/* Card Text */
.benefit-card h3 {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.benefit-card p {
    font-size: 14px;
    color: #888;
    line-height: 1.75;
    margin: 0;
}


.section-title p {
    font-size: 16px;
}

.about-content-body span{
    color: var(--text-color);
    margin-top: 20px;
    margin-bottom: 0;
	font-size: 16px;
}

.dropdown-item{
	width: 350px;
}

/* ===================================
   Thank You Section CSS
   custom.css mein paste karo
=================================== */

.thankyou-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.thankyou-box {
    background: #ffffff;
    border: 1.5px solid #e8f5e9;
    border-radius: 20px;
    padding: 60px 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.07);
}

/* Green Tick */
.thankyou-tick {
    margin-bottom: 28px;
}

.thankyou-tick i {
    font-size: 80px;
    color: #22c55e;
    animation: tickPop 0.6s ease;
}

@keyframes tickPop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

/* Heading */
.thankyou-box h2 {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 10px;
    line-height: 1.3;
}

.thankyou-box h5 {
    font-size: 17px;
    font-weight: 400;
    color: #666;
    margin-bottom: 0;
}

/* Divider */
.thankyou-divider {
    width: 60px;
    height: 3px;
    background-color: #f5a623;
    border-radius: 10px;
    margin: 24px auto;
}

/* Paragraph */
.thankyou-box p {
    font-size: 15px;
    color: #777;
    line-height: 1.85;
    max-width: 480px;
    margin: 0 auto 35px;
}

.thankyou-box p strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Info Row */
.thankyou-info-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.thankyou-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fffaf2;
    border: 1.5px solid #fde8bb;
    border-radius: 12px;
    padding: 14px 20px;
    text-align: left;
    flex: 1;
    min-width: 150px;
}

.thankyou-info-item i {
    font-size: 22px;
    color: #f5a623;
    min-width: 22px;
}

.thankyou-info-item span {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}

.thankyou-info-item span strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Button */
.thankyou-btn {
    display: inline-block;
    background-color: #f5a623;
    color: #111111 !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 38px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.thankyou-btn i {
    margin-right: 8px;
}

.thankyou-btn:hover {
    background-color: #e8941a;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.35);
    color: #111111 !important;
}

/* Mobile */
@media (max-width: 576px) {
    .thankyou-box {
        padding: 40px 20px;
    }
    .thankyou-box h2 {
        font-size: 26px;
    }
    .thankyou-tick i {
        font-size: 65px;
    }
    .thankyou-info-row {
        flex-direction: column;
    }
}

/* ===================================
   Terms & Conditions Section CSS
   custom.css mein paste karo
=================================== */

.terms-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.terms-box {
    background: #ffffff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 60px 55px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

/* Last Updated */
.terms-updated {
    display: inline-block;
    background: #fff8ec;
    border: 1.5px solid #fde8bb;
    color: #f5a623;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.terms-updated i {
    margin-right: 6px;
}

/* Intro */
.terms-intro {
    font-size: 15px;
    color: #555;
    line-height: 1.85;
    border-left: 4px solid #f5a623;
    padding-left: 18px;
    margin-bottom: 40px;
}

/* Each Block */
.terms-block {
    margin-bottom: 38px;
    padding-bottom: 38px;
    border-bottom: 1px solid #f5f5f5;
}

.terms-block:last-of-type {
    border-bottom: none;
}

.terms-block h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.terms-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #f5a623;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

.terms-block p {
    font-size: 14.5px;
    color: #666;
    line-height: 1.85;
    margin-bottom: 12px;
}

.terms-block p:last-child {
    margin-bottom: 0;
}

/* List */
.terms-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 14px 0 14px !important;
}

.terms-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #555 !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid #f8f8f8 !important;
    line-height: 1.6 !important;
    list-style: none !important;
}

.terms-list li:last-child {
    border-bottom: none !important;
}

.terms-list li i {
    color: #22c55e !important;
    font-size: 13px !important;
    margin-top: 3px !important;
    min-width: 14px !important;
}

/* Contact Box */
.terms-contact {
    background: #fffaf2;
    border: 1.5px solid #fde8bb;
    border-radius: 14px;
    padding: 30px 35px;
    margin-top: 10px;
}

.terms-contact h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.terms-contact p {
    font-size: 14px;
    color: #777;
    margin-bottom: 16px;
}

.terms-contact ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.terms-contact ul li {
    font-size: 14px;
    color: #555;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none !important;
}

.terms-contact ul li i {
    color: #f5a623;
    font-size: 14px;
    min-width: 16px;
}

.terms-contact ul li a {
    color: #f5a623;
    text-decoration: none;
    font-weight: 600;
}

.terms-contact ul li a:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
    .terms-box {
        padding: 36px 22px;
    }

    .terms-block h3 {
        font-size: 16px;
    }

    .terms-contact {
        padding: 24px 20px;
    }
}

/* ===================================
   Privacy Policy Section CSS
   custom.css mein paste karo
=================================== */

.privacy-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.privacy-box {
    background: #ffffff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 60px 55px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

/* Last Updated Badge */
.privacy-updated {
    display: inline-block;
    background: #fff8ec;
    border: 1.5px solid #fde8bb;
    color: #f5a623;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.privacy-updated i {
    margin-right: 6px;
}

/* Intro */
.privacy-intro {
    font-size: 15px;
    color: #555;
    line-height: 1.85;
    border-left: 4px solid #f5a623;
    padding-left: 18px;
    margin-bottom: 40px;
}

/* Each Block */
.privacy-block {
    margin-bottom: 38px;
    padding-bottom: 38px;
    border-bottom: 1px solid #f5f5f5;
}

.privacy-block:last-of-type {
    border-bottom: none;
    margin-bottom: 30px;
}

.privacy-block h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Number Badge */
.privacy-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #f5a623;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

.privacy-block p {
    font-size: 14.5px;
    color: #666;
    line-height: 1.85;
    margin-bottom: 14px;
}

.privacy-block p:last-child {
    margin-bottom: 0;
}

/* Info Cards Row */
.privacy-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.privacy-info-card {
    background: #fffaf2;
    border: 1.5px solid #fde8bb;
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.privacy-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.12);
    border-color: #f5a623;
}

.privacy-info-card i {
    font-size: 28px;
    color: #f5a623;
    margin-bottom: 12px;
    display: block;
}

.privacy-info-card h5 {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.privacy-info-card p {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    margin: 0;
}

/* List */
.privacy-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 14px 0 !important;
}

.privacy-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #555 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f8f8f8 !important;
    line-height: 1.65 !important;
    list-style: none !important;
}

.privacy-list li:last-child {
    border-bottom: none !important;
}

.privacy-list li i {
    color: #22c55e !important;
    font-size: 13px !important;
    margin-top: 3px !important;
    min-width: 14px !important;
}

/* Contact Box */
.privacy-contact {
    background: #fffaf2;
    border: 1.5px solid #fde8bb;
    border-radius: 16px;
    padding: 34px 35px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 10px;
}

.privacy-contact-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #f5a623;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-contact-icon i {
    font-size: 26px;
    color: #ffffff;
}

.privacy-contact h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.privacy-contact p {
    font-size: 14px;
    color: #777;
    margin-bottom: 16px;
    line-height: 1.7;
}

.privacy-contact ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.privacy-contact ul li {
    font-size: 14px;
    color: #555;
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none !important;
}

.privacy-contact ul li i {
    color: #f5a623;
    font-size: 14px;
    min-width: 16px;
}

.privacy-contact ul li a {
    color: #f5a623;
    text-decoration: none;
    font-weight: 600;
}

.privacy-contact ul li a:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
    .privacy-box {
        padding: 36px 22px;
    }

    .privacy-card-row {
        grid-template-columns: 1fr;
    }

    .privacy-contact {
        flex-direction: column;
        padding: 24px 20px;
    }

    .privacy-block h3 {
        font-size: 16px;
    }
}

/* side sticky button  */
.sticky-side-buttons {
  display: none;
}

.foot-fixed {
  background-color: #fff;
  bottom: 0;
  box-shadow: 1px -1px 3px #a7a7a7;
  display: none;
  padding: 20px 5px;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 99;
  padding: 10px 20px;
}

@keyframes blinkAnimation {
  to {
    visibility: hidden;
  }
}

@media (max-width: 768px) {
  .sticky-side-buttons {
    position: fixed;
    top: 40%;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    gap: 10px;
  }

  .sticky-side-buttons a {
    background-color: #0a66c2;
    color: #fff;
    padding: 15px 10px;
    text-decoration: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    transition: background-color 0.3s ease;
    text-align: center;
    /* transform: rotate(180deg); */
    /* ROTATE TEXT BOTTOM TO TOP */
  }

  .left-button a:hover {
    background-color: #e0a800;
    color: #fff;
  }

  .left-button {
    position: fixed;
    top: 40%;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    gap: 10px;
  }

  .left-button a {
    background-color: #ff5e00;
    color: #fff;
    padding: 15px 10px;
    text-decoration: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    transition: background-color 0.3s ease;
    text-align: center;
    /* transform: rotate(180deg); */
    /* ROTATE TEXT BOTTOM TO TOP */
  }

  .left-button a {
    background-color: #e0a800;
    color: #fff;
  }

  .sticky-side-buttons a:hover {
    background-color: #e0a800;
    color: #fff;
  }

  /* ===================================
   Sticky Bottom Contact Bar CSS
   custom.css mein paste karo
=================================== */

.sticky-contact-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    z-index: 9999;
    padding: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

.sticky-contact-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    height: 52px;
}

/* Let's Talk Now */
.sticky-talk {
    padding: 0 24px;
    border-right: 1px solid #333;
    height: 100%;
    display: flex;
    align-items: center;
}

.sticky-talk span {
    color: #f5a623;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Each Item */
.sticky-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 100%;
    text-decoration: none !important;
    transition: background 0.3s ease;
}

.sticky-item:hover {
    background-color: #2a2a2a;
}

.sticky-item i {
    font-size: 16px;
}

.sticky-item span {
    font-size: 13.5px;
    color: #ffffff;
    white-space: nowrap;
}

.sticky-item span strong {
    font-weight: 700;
}

/* Call */
.sticky-call i {
    color: #f5a623;
}

.sticky-call span strong {
    color: #f5a623;
}

/* WhatsApp */
.sticky-whatsapp i {
    color: #25d366;
    font-size: 18px;
}

.sticky-whatsapp span strong {
    color: #25d366;
}

/* Email */
.sticky-email i {
    color: #f5a623;
}

.sticky-email span strong {
    color: #f5a623;
}

/* Divider */
.sticky-divider {
    width: 1px;
    height: 28px;
    background-color: #333;
}