/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Autoas - Auto Parts and Accessories Store HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Our Category css
06. Latest Updates css
07. Our Product css
08. Essential Auto Parts css
09. Our Offers css
10. Featured Product css
11. Our Brands css
12. Our FAQ's css
13. Our Featured Services css
14. Our Testimonial css
15. Contact Now css
16. Our Blog css
17. Footer css
18. About Us Page css
19. Blog Archive css
20. Blog Single css
21. Products Page css
22. Product Single css
23. Cart Page css
24. Order Receive Page css
25. Checkout Page css
26. Account Dashboard Page css
27. Account Order Page css
28. Account Order View Page css
29. Account Download Page css
30. Account Address Page css
31. Account Addresses Page css
32. Account Details Page css
33. Account Wishlist Page css
34. Login Page css
35. Forgot Password Page css
36. Privacy Policy Page css
37. Term Condition Page css
38. Refund Return Policy css
39. Cancellation Policy css
40. Delivery Policy Page css
41. Testimonials Page css
42. FAQs Page css
43. Contact Us Page css
44. Empty Cart Page css
45. 404 Error Page css
46. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color				: #004c9e;
	--secondary-color			: #FFFFFF;
	--bg-color					: #F6F6F7;
	--text-color				: #646464;
	--accent-color				: #8cc746;
	--white-color				: #FFFFFF;
	--divider-color				: #0000001A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Inter", sans-serif;
	--accent-font				: 'ClashGrotesk-Variable';
}

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

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

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

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

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

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

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

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

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

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

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

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

.container{
	max-width: 1380px;
}

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

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

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

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

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

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

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

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

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

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--primary-color);
	background: var(--accent-color);
	border: none;
	border-radius: 10px;
	padding: 17px 42px 17px 20px;
	box-shadow: none;
	outline: none;
	transition: all 0.5s ease-in-out;
	overflow: hidden;
	z-index: 1;
}

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

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

.btn-default:hover::before{
    transform: translateY(-50%) rotate(45deg);
	background-image: url('../images/arrow-white.svg');
}

.btn-default::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -50px;
	width: 0;
	height: 100%;
	transform: skewX(45deg);
	background: var(--primary-color);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

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

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

.dark-section .btn-default.btn-border{
	border-color: var(--white-color);
	color: var(--white-color);
}

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

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

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

.btn-default.btn-highlighted:hover::before,
.dark-section .btn-default.btn-border:hover::before{
	background-image: url('../images/arrow-primary.svg');
}

.btn-default.btn-highlighted:hover:after,
.dark-section .btn-default.btn-border:hover:after{
	background: var(--white-color);
}


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

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

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

.readmore-btn::after{
	content: '';
    position: absolute;
   	bottom: -1px;
	left: 0;
    background: var(--primary-color);
    width: 0;
    height: 1px;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover:after{
	width: 100%;
}

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

.preloader{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	background: 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(--primary-color) transparent var(--primary-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

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

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

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

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

.dark-section{
	background-color: black;
}

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

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

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

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

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

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

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

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

.section-sub-heading,
.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-left: 18px;
    margin-bottom: 15px;
}

.section-sub-heading::before,
.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../images/icon-sub-heading.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    width: 12px;
    height: 12px;
}

.section-title h1{
	font-size: 78px;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 36px;
	margin-bottom: 0;
	cursor: none;
}

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

.section-title p b{
	font-weight: 500;
	color: var(--primary-color);
}

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

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

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

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

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

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

header.main-header .header-sticky{
	position: relative;
	width: 100%;
	top: 0;
	box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.05);
	z-index: 100;
}

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

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
    transform: translateY(0);
	background: var(--secondary-color);
}

.navbar{
	padding: 0;
	align-items: center;
	flex-wrap: wrap;	
}

.header-action-box{
	width: 100%;
	max-width: 1300px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 25px 15px;
	margin: 0 auto;
}

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

.navbar-brand img{
	max-width: 190px;
}

.header-search-form-box{
	width: 100%;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	max-width: 530px;
	padding: 0 20px;
}

.header-search-form .form-group{
	display: flex;
	width: 100%;
}

.header-search-form .form-group .form-control{
	width: calc(100% - 25px);
	flex: 1;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25em;
	color: var(--primary-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 14px 10px 14px 0;
}

.header-search-form .form-group .form-control::placeholder{
	color: var(--text-color);
}

.header-search-form .form-group .header-search-btn{
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.header-search-form .form-group .header-search-btn i{
	font-size: 20px;
	color: var(--primary-color);
}

.header-action-details ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.header-action-details ul li a{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--primary-color);
}

.header-action-details ul li a img{
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
}

.header-action-details ul li a:hover img{
	transform: scale(1.06);
}

.main-menu{
	width: 100%;
	background: #7fc349;
}

.main-menu .navbar-collapse{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;	
	padding: 0 15px;
	gap: 20px;
}

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

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

.main-menu ul .nav-item{
	position: relative;
	margin: 0 20px;
	padding: 13px 0;
}

.main-menu ul .nav-item .nav-link{
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2em;
	text-transform: capitalize;
	color:black;
	background: transparent;
	border-radius: 0px;
	padding: 8px 0px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul .nav-item.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 16px;
	vertical-align: middle;
	margin-left: 8px;
}

.main-menu ul .nav-item .nav-link:hover,
.main-menu ul .nav-item .nav-link:focus{
	color: black;
}

.main-menu ul .nav-item:first-child{
	margin-left: 0;
}

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

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

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

.main-menu ul li > ul{
	padding: 5px 0;
}

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

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

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

.main-menu ul ul .nav-item .nav-link{
	font-size: 16px;
	color: var(--white-color);
	padding: 9px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul .nav-item .nav-link:hover,
.main-menu ul ul .nav-item .nav-link:focus{
	color: var(--accent-color);
	background-color: transparent;
	padding: 9px 20px 9px 23px !important;
}

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

.main-menu .header-info-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.main-menu .header-info-box .sale-off-tag{
	align-content: center;
	border-right: 1px solid var(--divider-color);
	padding-right: 20px;
	margin-right: 20px;
}

.main-menu .header-info-box .sale-off-tag p{
	text-transform: capitalize;
	color: black;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 0;
}

.main-menu .header-info-box .sale-off-tag p a{
	color: black;
}

.main-menu .header-info-box .sale-off-tag p img{
	width: 100%;
	max-width: 20px;
}

.header-contact-info{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

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

.header-contact-info-content{
	width: calc(100% - 40px);
}

.header-contact-info-content p{
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	margin-bottom: 3px;
}

.header-contact-info-content span{
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	color: var(--primary-color);
}

.header-contact-info-content span a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.header-contact-info-content span a:hover{
	color: var(--accent-color);
}

.desktop-hide{
	display: none;
}

.main-menu .dropdown-menu{
	width: 100%;
	right: 0;
	left: 0;
	display: block;
	top: 100%;
	transform: scale(1,0);
	border-radius: 0;
	background: var(--white-color);
	padding: 50px 0;
	opacity: 0;
	border: none;
	border-bottom: none;
	box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.05);
	visibility: hidden;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.main-menu .mega-menu:hover > .dropdown-menu{
	transform: scale(1,1);
}

.dropdown-menu[data-bs-popper]{
	margin-top: 0;
}

.main-menu .mega-menu-box{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
	padding: 0 15px;
}

.mega-menu-links-box{
	width: calc(40% - 25px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px 50px;
}

.mega-menu-link{
	width: calc(50% - 25px);
}

.mega-menu-link h2{
	font-size: 20px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.main-menu .mega-menu-link ul{
	position: initial;
	visibility: visible;
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: initial;
    width: 100%;
    border-radius: 0;
    background: transparent;
}

.main-menu .mega-menu-link ul li{
	margin-bottom: 10px;
}

.main-menu .mega-menu-link ul li:last-child{
	margin-bottom: 0px;
}

.main-menu .mega-menu-link ul li a{
	font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--text-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

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

.mega-menu-items-list{
	width: calc(60% - 25px);
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.mega-menu-item{
	width: calc(33.33% - 20px);
}

.mega-menu-item-image{
	margin-bottom: 15px;
}

.main-menu .mega-menu-item-image a{
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.mega-menu-item-image figure{
	display: block;
	border-radius: 10px;
}

.mega-menu-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 0.781;
	object-fit: cover;
	border-radius: 10px;
}

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

.main-menu .mega-menu-item-content h2 a{
	color: inherit;
}

.mega-menu-item-content p{
	color: var(--text-color);
	margin: 5px 0 0;
}

.mega-menu-item.big-offer-box{
	position: relative;
	align-content: end;
	border-radius: 10px;
	padding: 30px;
	overflow: hidden;
}

.mega-menu-item.big-offer-box .mega-menu-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.mega-menu-item.big-offer-box .mega-menu-item-image::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, transparent 30.3%, rgba(0, 0, 0, 0.80) 100%);
	border-radius: 10px;
	width: 100%;
	height: 100%;
}

.mega-menu-item.big-offer-box .mega-menu-item-image figure,
.mega-menu-item.big-offer-box .mega-menu-item-image figure img{
	height: 100%;
}

.mega-menu-item.big-offer-box .mega-menu-item-content{
	position: relative;
	z-index: 2;
}

.mega-menu-item.big-offer-box .mega-menu-item-content span{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2em;
	color: var(--white-color);
	margin-bottom: 5px;
}

.mega-menu-item.big-offer-box .mega-menu-item-content h2{
	font-size: 30px;
	text-transform: uppercase;
	color: var(--white-color);
}

.mega-menu-item.big-offer-box .mega-menu-item-content h3{
	font-size: 20px;
	color: var(--white-color);
	text-transform: uppercase;
	margin-top: 5px;
}

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

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

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

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

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

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

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

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

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

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

.slicknav_menu ul.slicknav_nav{
	padding: 5px 0;
	border-bottom: 1px solid var(--dark-divider-color);
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 6px 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 a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-color);
}

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

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

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

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

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

.hero{
	background: url('../images/allimages/banner.png') no-repeat;
	background-position: center center;
	background-size: cover;
}

.hero-box{
	padding: 175px 0;
}

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

.hero-content-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
	margin-top: 50px;
}

.video-play-button a{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	cursor: none;
	z-index: 1;
}

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

.video-play-button a span.bg-effect{
	position: relative;
}

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

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

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

.video-play-button a span i{
	font-size: 14px;
	color: inherit;
	margin-left: 2px;
}

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

.find-parts-form-box{
	background: var(--dark-divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 30px 0;
}

.find-parts-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 60px;
}

.find-parts-box-title{
	max-width: 180px;
}

.find-parts-box-title h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.find-parts-form{
	width: calc(100% - 240px);
}

.find-parts-form form{
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 20px;
}

.find-parts-form .form-control,
.find-parts-form .form-button{
	width: calc(25% - 15px);
}

.find-parts-form .form-button{
	line-height: 0;
}

.find-parts-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--white-color);
	background-color: var(--divider-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 10px;
	padding: 16px 42px 16px 20px;
	outline: none;
	box-shadow: none;
	background-image: url(../images/dropdown-arrow-white.svg);
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 12px auto;
}

.find-parts-form .form-control option{
	color: var(--primary-color);
}

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

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

/************************************/
/*** 	 05. Our Category css	  ***/
/************************************/

.our-category{
	padding: 80px 0;
}

.category-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.category-item{
	width: calc(25% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	background: #bed73a;
	border-radius: 10px;
	padding: 20px;
	height:150px;
}

.category-item-image a,
.category-item-image figure{
	display: block;
	border-radius: 4px;
}

.category-item-image figure img{
	max-width: 60px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
}

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

.category-item-content h3{
	font-size: 20px;
		color: black;

}

.category-item-content h3 a{
	color: black;
}

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

.category-highlighted-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px;
}

.category-highlighted-item{
	width: calc(50% - 10px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	background:#7bd2f7;
	border-radius: 20px;
	padding: 40px;
	overflow: hidden;
}

.category-highlighted-item-body{
	width: calc(60% - 10px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.category-highlighted-item-content h2{
	font-size: 36px;
}

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

.category-highlighted-item-content h3{
	font-size: 20px;
	margin-top: 20px;
}

.category-highlighted-item-image{
	width: calc(40% - 10px);
	align-content: end;
}

.category-highlighted-item-image figure{
	display: block;
	margin: 0 -125px -110px 0;
}

.category-highlighted-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/************************************/
/*** 	 06. Latest Updates css	  ***/
/************************************/

.latest-updates{
	margin: 0 20px;
}

.latest-updates .container-fluid{
	padding: 0;
}

.latest-update-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.latest-update-item{
	position: relative;
	width: calc(33.33% - 13.33px);
	min-height: 345px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	border-radius: 20px;
	padding: 40px;
	overflow: hidden;
}

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

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

.latest-update-item-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, transparent 0%, var(--primary-color) 90%);
	width: 100%;
	height: 100%;
}

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

.latest-update-item-content-box,
.latest-update-item-btn{
	position: relative;
	z-index: 1;
}

.latest-update-item-content-box .section-title{
	margin-bottom: 30px;
}

.latest-update-item-content h3{
	font-size: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
	color: var(--white-color);
}

.latest-update-item-content h3 span{
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	text-decoration: line-through;
	margin-left: 5px;
}

/************************************/
/*** 	 07. Our Product css	  ***/
/************************************/

.our-products{
	padding: 80px 0;
}

.product-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.product-item{
	width: calc(25% - 15px);
	background: #7bd2f6;
	border-radius: 20px;
	padding: 10px;
}

.product-item-header{
	position: relative;
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}

.product-item-image a,
.product-item-image figure{
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

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

.product-item:hover .product-item-image figure img{
	transform: scale(1.03);
}

.product-item-action{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translateY(20px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out;
}

.product-item:hover .product-item-action{
	transform: translateY(-20px);
	opacity: 1;
	visibility: visible;
}

.product-item-action ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.product-item-action ul li a:hover{
	background-color: var(--primary-color);
}

.product-item-action ul li a img{
	width: 100%;
	max-width: 18px;
	transition: all 0.4s ease-in-out;
}

.product-item-action ul li a:hover img{
	filter: brightness(0) invert(1);
}

.product-item-content{
	text-align: center;
	padding: 20px;
}

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

.product-item-content h2 a{
	color: black !important;
}

.product-item-content p{
	font-size: 14px;
	color: black;
	margin: 10px 0 0;
	text-align: justify;
}

.product-item-content h3{
	font-size: 20px;
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    align-items: center;
	margin-top: 10px;
}

.product-item-content h3 span{
	font-family: var(--default-font);
	font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-decoration: line-through;
	color: var(--text-color);
    margin-left: 10px;
}

/************************************/
/*** 08. Essential Auto Parts css ***/
/************************************/

.essential-auto-parts{
	padding: 80px 0;
}

.essential-auto-parts-box{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.essential-auto-parts-image-box{
	position: relative;
	width: calc(51% - 10px);
}

.essential-auto-parts-image{
	height: 100%;
}

.essential-auto-parts-image figure{
	position: relative;
	display: block;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.essential-auto-parts-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 48.15%, rgba(0, 0, 0, 0.80) 100%);
	width: 100%;
	height: 100%;
}

.essential-auto-parts-image figure img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.9871;
	object-fit: cover;
	border-radius: 20px;
}

.essential-auto-part-info-box{
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	width: fit-content;
	border: 1px solid var(--dark-divider-color);
	background: var(--divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 30px;
	z-index: 1;
}

.essential-auto-part-info-box h3{
	font-size: 36px;
	color: var(--white-color);
	margin-bottom: 20px;
}

.essential-auto-part-info-box ul{
	list-style: disc;
	padding: 0 0 0 20px;
	margin: 0;
}

.essential-auto-part-info-box ul li{
	line-height: 1.5em;
	color: var(--white-color);
	margin-bottom: 10px;
}

.essential-auto-part-info-box ul li:last-child{
	margin-bottom: 0;
}

.essential-auto-part-info-box ul li::marker{
	color: var(--accent-color);
}

.essential-auto-parts-item-list{
	width: calc(49% - 10px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.essential-auto-parts-item{
	width: calc(50% - 10px);
	background: #7bd2f6;
	border-radius: 20px;
	padding: 10px;
}

.essential-auto-parts-item-image{
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}

.essential-auto-parts-item-image a,
.essential-auto-parts-item-image figure{
	display: block;
	cursor: none;
}

.essential-auto-parts-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 0.7571;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

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

.essential-auto-parts-item-title{
	text-align: center;
	padding: 20px;
}

.essential-auto-parts-item-title h3{
	font-size: 20px;
}

.essential-auto-parts-item-title h3 a{
	color:black;
}

/************************************/
/***      09. Our Offers css	  ***/
/************************************/

.our-offers{
	padding: 80px 0 40px;
}

.offers-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.offer-item{
	position: relative;
	width: calc(50% - 10px);
	min-height: 370px;
	border-radius: 20px;
	padding: 50px;
	overflow: hidden;
}

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

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

.offer-item-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, transparent 32.13%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;
}

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

.offer-item-body{
	position: relative;
	height: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 1;
}

.offer-item.highlighted-box{
	width: 100%;
	min-height: 500px;
	padding: 100px;
}

.offer-item.highlighted-box .offer-item-image figure::before{
	background: linear-gradient(90deg, var(--primary-color) 0%, transparent 55.92%);
}

.offer-item.highlighted-box .offer-item-body{
	max-width: 540px;
}

/************************************/
/***   10. Featured Product css	  ***/
/************************************/

.featured-products{
	padding: 40px 0 80px;
}

/************************************/
/***      11. Our Brands css      ***/
/************************************/

.our-brands{
	padding: 80px 0;
}

.brand-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.brand-item{
	width: calc(25% - 15px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	background-color: var(--bg-color);
	border-radius: 20px;
	overflow: hidden;
}

.brand-item-image{
	padding: 30px;
}

.brand-item-image a,
.brand-item-image figure{
	display: block;
	border-radius: 10px;
}

.brand-item-image figure img{
	width: 100%;
	max-width: 245px;
	border-radius: 10px;
}

.brand-item-content{
	background-color: var(--primary-color);
	padding: 16px;
}

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

/************************************/
/***       12. Our FAQ's css      ***/
/************************************/

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

.faqs-content{
	position: sticky;
	top: 30px;
}

.our-faqs .faq-accordion{
	margin-left: 15px;
}

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

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

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

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
   	content: '\f055';
    font-family: 'FontAwesome';
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--primary-color);
	line-height: normal;
    transition: all 0.3s ease-in-out;
}

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

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

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

/*************************************/
/*** 13. Our Featured Services css ***/
/*************************************/

.our-featured-services{
	margin: 0 20px;
}

.our-featured-services .container-fluid{
	padding: 0;
}

.featured-services-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.featured-service-item{
	position: relative;
	width: calc(33.33% - 13.33px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
	overflow: hidden;
}

.featured-service-item-body{
	position: relative;
	width: calc(54% - 10px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 1;
}

.featured-service-item.box-2 .featured-service-item-body{
	width: calc(58% - 10px);
}

.featured-service-item-body .section-title h2{
	font-size: 30px;
}

.featured-service-item-body .section-title P{
	margin-top: 10px;
}

.featured-service-item-btn .readmore-btn{
	color: var(--accent-color);
}

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

.featured-service-item-btn .readmore-btn::after{
	background: var(--accent-color);
}

.featured-service-item-image{
	position: relative;
	width: calc(46% - 10px);
	align-content: center;
	z-index: 1;
}

.featured-service-item.box-2 .featured-service-item-image{
	width: calc(42% - 10px);
}

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

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

.featured-service-item.box-2::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.00) 50%);
}

.featured-service-item.box-1 .featured-service-item-image figure{
	margin: -5px -95px -5px -25px;
}

.featured-service-item.box-1 .featured-service-item-image figure img{
	aspect-ratio: 1 / 0.59;
}

.featured-service-item.box-2 .featured-service-item-image figure{
	margin: -65px -160px -65px 0;
}

.featured-service-item.box-2 .featured-service-item-image figure img{
	aspect-ratio: 1 / 0.885;
}

.featured-service-item.box-3 .featured-service-item-image figure{
	margin: -10px -95px -10px -25px;
}

.featured-service-item.box-3 .featured-service-item-image figure img{
	aspect-ratio: 1 / 0.596;
}

/************************************/
/***   14. Our Testimonial css    ***/
/************************************/

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

.testimonial-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.testimonial-item{
	width: calc(25% - 15px);
	background-color: var(--secondary-color);
	border-radius: 20px;
	min-height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
}

.google-review-header h2{
	font-size: 36px;
	margin-bottom: 10px;
}

.google-review-header p{
	margin: 0;
}

.testimonial-item-rating{
	display: block;
	margin-bottom: 15px;
}

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

.google-review-header p b{
	font-weight: 600;
}

.google-review-box .icon-box img{
	width: 100%;
	max-width: 120px;
}

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

.testimonial-item-author{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

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

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

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

.testimonial-author-content h2{
	font-size: 20px;
}

.testimonial-author-content p{
	line-height: normal;
	margin: 5px 0 0;
}

/************************************/
/***      15. Contact Now css     ***/
/************************************/

.contact-now{
	padding: 80px 0;
}

.contact-now-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 15px;
	padding-top: 30px;
}

.contact-now-info-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 40px;
}

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

.contact-now-info-item::before{
	content: '';
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
	background: var(--divider-color);
	width: 1px;
	height: 80%;
}

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

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

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

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

.contact-now-info-item .icon-box img{
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
}

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

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

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

.contact-now-info-item-content p{
	line-height: normal;
	margin: 5px 0 0;
}

.contact-now-info-item-content p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

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

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

.contact-now-social-icons h3{
	font-size: 20px;
}

.contact-now-social-icons ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 0;
	margin: 0;
}

.contact-now-social-icons ul li a{
	display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    background: var(--bg-color);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.contact-now-social-icons ul li a:hover{
	color: var(--primary-color);
	background: var(--accent-color);
}

.contact-now-social-icons ul li i{
    font-size: 18px;
    color: inherit;
}

.contact-form{
	background-color: var(--bg-color);
	border-radius: 20px;
	padding: 40px;
}

.contact-form label{
	font-size: 16px;
	color: var(--text-color);
	line-height: 1.2em;
	margin-bottom: 15px;
}

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

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

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

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

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

.our-blog{
	padding: 80px 0;
}

.post-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.post-item{
	width: calc(33.33% - 13.33px);
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 10px;
}

.post-featured-image{
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

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

.post-featured-image figure{
	display: block;
	border-radius: 10px;
}

.post-featured-image figure img{
	width: 100%;
	aspect-ratio: 1 / 0.791;
	object-fit: cover;
	border-radius: 10px;
	transition: all 0.6s ease-in-out;
}

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

.post-item-body{
	padding: 10px;
}

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

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

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

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

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

.about-footer{
	max-width: 415px;
}

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

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

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

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

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

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

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

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

.footer-links-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	margin-left: 50px;
}

/* .footer-links{
	max-width: 26%;
	flex-grow: 1;
} */

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

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

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

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

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

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

.footer-newsletter-box{
	max-width: 41%;
}

.footer-newsletter-form .form-group{
	display: flex;
	background-color: var(--dark-divider-color);
	border-radius: 10px;
	padding: 5px;
}

.footer-newsletter-form .form-control{
	width: calc(100% - 40px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 15px;
}

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

.footer-newsletter-form .newsletter-btn{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border: none;
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .newsletter-btn:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form .newsletter-btn i{
	font-size: 20px;
	color: var(--primary-color);
	padding-right: 2px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .newsletter-btn:hover i{
	color: var(--accent-color);
}

/* .footer-contact-item-list{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 40px;
	margin-top: 40px;
} */

.footer-contact-item-list ul li{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.footer-contact-item-list ul li img{
	width: 100%;
	max-width: 24px;
}

.footer-copyright-text{
    text-align: center;
    border-top: 1px solid var(--dark-divider-color);
    padding: 40px 0;
    margin-top: 60px;
}

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

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

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

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

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

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

.page-header-box ol li.breadcrumb-item{
	line-height: normal;
    text-transform: capitalize;
	color: var(--white-color);
}

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

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

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

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

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

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

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

.about-us-contact-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-item-image figure{
	display: block;
	border-radius: 50%;
}

.about-us-contact-item-image figure img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

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

.about-us-contact-item-content p{
	line-height: normal;
	margin-bottom: 0;
}

.about-us-contact-item-content h3{
	font-size: 16px;
	line-height: 1.6em;
	margin-top: 5px;
}

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

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

.about-us-contact-item-content h3 span a{
	color: var(--accent-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 5px;
	transition: all 0.4s ease-in-out;
}

.about-us-contact-item-content h3 span a:hover{
	color: var(--primary-color);
}

.our-process{
	padding: 80px 0 40px;
}

.process-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.process-item{
	position: relative;
	width: calc(25% - 15px);
	background-color: var(--secondary-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	min-height: 300px;
	padding: 40px 30px 50px;
	overflow: hidden;
}

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

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

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

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

.process-item-content p{
	margin: 10px 0 0;
}

.process-item-number{
	position: absolute;
	right: 0;
	bottom: -29px;
}

.process-item-number h2{
	font-size: 90px;
	font-weight: 600;
	line-height: 1em;
	color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--divider-color);
	text-transform: capitalize;
	transition: all 0.4s ease-in-out;
}

.process-item:hover .process-item-number h2{
	-webkit-text-stroke-color: var(--accent-color);
	transform: translateY(-5px);
}

.intro-video{
	padding: 40px 0 80px;
}

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

.intro-video-bg-video{
    height: 700px;
	border-radius: 20px;
	overflow: hidden;
}

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

.intro-video-content-box .video-play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	display: inline-flex;
    align-items: center;
    z-index: 1;
}

.intro-video-content-box .video-play-button a span{
	width: 100px;
	height: 100px;
	background-color: var(--primary-color);
}

.intro-video-content-box .video-play-button a span i{
	font-size: 32px;
	color: var(--white-color);
}

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

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

.team-item{
    width: calc(25% - 15px);
}

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

.team-item-image a,
.team-item-image figure{
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.team-item-image a{
	cursor: none;
}

.team-item-image figure::before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 48.15%, rgba(0, 0, 0, 0.80) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

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

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

.team-item-social-list{
	position: absolute;
	right: 40px;
	bottom: 40px;
	left: 40px;
	opacity: 0;
	transform: translateY(20px);
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-item:hover .team-item-social-list{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

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

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

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

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

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

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

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

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

.exclusive-offer-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.exclusive-offer-item{
	width: calc(50% - 10px);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.exclusive-offer-item-image{
	width: 45%;
}

.exclusive-offer-item-image figure{
	display: block;
	border: 6px solid var(--accent-color);
	border-radius: 50%;
	margin: -35px 0 -35px -160px;
}

.exclusive-offer-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.exclusive-offer-item-body{
	width: 55%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	padding: 40px 30px;
}

.exclusive-offer-item-body .section-title h2{
	font-size: 30px;
}

/************************************/
/*** 	 19. Blog Archive css	  ***/
/************************************/

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

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

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

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

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

/************************************/
/*** 	  20. Blog Single css	  ***/
/************************************/

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

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

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

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

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

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

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

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

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

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

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

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	line-height: 1.1em;
	margin: 0 0 0.556em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/************************************/
/***     21. Products Page css    ***/
/************************************/

.page-products{
	padding: 80px 0;
}

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

.product-category-item{
    border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

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

.product-category-filter-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 15px;
}

.page-single-sidebar .product-category-filter-header{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.product-category-filter-title{
    max-width: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-category-filter-title img{
    width: 100%;
    max-width: 24px;
}

.product-category-filter-title h2{
    font-size: 18px;
}

.product-category-filter-clear-btn a{
    font-size: 14px;
    color: var(--text-color);
    transition: all 0.4s ease-in-out;
}

.product-category-filter-clear-btn a:hover{
    color: var(--accent-color);
}

.product-category-item-title{
    position: relative;
	font-size: 20px;
	margin-bottom: 20px;
}

.product-category-item ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-category-item ul li{
    line-height: normal;
	display: flex;
	align-items: center;
	gap: 5px 10px;
    margin-bottom: 15px;
}

.product-category-item ul li:last-child{
    margin-bottom: 0;
}

.product-category-item ul li input[type=checkbox]{
	width: 18px;
	height: 18px;
	accent-color: var(--primary-color);
}

.product-category-item ul li label{
	flex: 1;
	cursor: pointer;
}

.product-item-list-box .product-category-filter-header{
    margin-bottom: 20px;
}

.product-category-result-info{
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-category-result-pagination ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.product-category-result-pagination ul li{
    position: relative;
    line-height: 1.4em;
}

.product-category-result-pagination ul li::before{
    content: '/';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -12px;
}

.product-category-result-pagination ul li:last-child::before{
    display: none;
}

.product-category-result-pagination ul li a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.product-category-sorting-list .form-select{
    min-width: 190px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25em;
    color: var(--primary-color);
    background-color: var(--secondary-color);
	border: none;
    border-radius: 10px;
    padding: 9px 35px 9px 15px;
    outline: none;
    box-shadow: none;
}

.page-products .product-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.page-products .product-item-list .product-item{
    width: calc(33.33% - 10px);
}

.product-learn-more-btn{
    text-align: center;
    margin-top: 50px;
}

/************************************/
/***    22. Product Single css    ***/
/************************************/

.page-product-single{
	padding: 60px 0 40px;
}

.product-single-breadcrumb-list{
	margin-bottom: 40px;
}

.product-single-breadcrumb-list ol{
	margin: 0;
	gap: 15px 55px;
}

.product-single-breadcrumb-list ol li{
	position: relative;
	color: var(--text-color);
	padding: 0;
}

.product-single-breadcrumb-list .breadcrumb li::before{
	content: '';
	position: absolute;
	right: -34px;
	top: 50%;
	transform: translateY(-50%);
	background: url('../images/arrow-right-long.svg') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 14px;
	height: 14px;
	padding: 0;
}

.product-single-breadcrumb-list .breadcrumb li:last-child:before{
	display: none;
}

.product-single-breadcrumb-list .breadcrumb-item+.breadcrumb-item{
	padding: 0;
}

.product-single-breadcrumb-list .breadcrumb li a{
	color: inherit;
}

.product-single-info-box{
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 30px 50px;
}

.product-single-image-box{
	width: calc(50% - 25px);
	position: sticky;
	top: 30px;
	display: flex;	
	flex-wrap: wrap;
	align-items: start;
	gap: 10px;
}

.product-single-image-slider{
	width: 145px;
}

.product-single-image-slider .swiper-wrapper{
	height: auto;
	flex-direction: column;
	gap: 10px 0;
}

.product-single-image-slider .swiper-slide{
	width: 100% !important;
	cursor: pointer;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 0px;
}

.product-single-image-slider .swiper-slide figure img{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	object-fit: cover;
}

.product-single-image-item{
	width: calc(100% - 155px);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 0;
	overflow: hidden;
}

.product-single-image-item .swiper-slide{
	height: 100%;
}

.product-single-image-item .swiper-slide figure{
	display: block;
	height: 100%;
	text-align: center;
	overflow: hidden;
}

.product-single-image-item .swiper-slide figure img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.product-single-info-content{
	width: calc(50% - 25px);
}

.product-single-title h1{
	font-size: 36px;
}

.product-single-title span{
	display: inline-block;
	font-size: 14px;
	line-height: normal;
	color: var(--primary-color);
	margin-top: 10px;
}

.product-single-price{
	margin-top: 30px;
}

.product-single-price h2{
	font-size: 20px;
}

.product-single-price h2 sub{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
	text-decoration: line-through;
	bottom: 0;
}

.product-single-description{
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.product-single-description p{
	margin-bottom: 20px;
}

.product-single-description p:last-child{
	margin-bottom: 0;
}

.product-single-manufacturing-year{
	margin-top: 30px;
}

.product-single-manufacturing-year h3{
	font-size: 16px;
	margin-bottom: 15px;
}

.product-single-manufacturing-year ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 15px;
	padding: 0;
	margin: 0;
}

.product-single-manufacturing-year ul li input[type="radio"]:checked + label{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--primary-color);
}

.product-single-manufacturing-year ul li input[type="radio"]{
	width: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

.product-single-manufacturing-year ul li label{
	font-family: var(--accent-font);
	font-weight: 500;
	line-height: 1.0621em;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 11px 20px;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.product-single-content-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 30px;
}

.qty-box{
	display: inline-flex;
	align-items: center;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	padding: 13px 12px;
	border-radius: 10px;
	gap: 10px;
}

.qty-btn{
	background: none;
	border: none;
	padding: 0;
	color: var(--primary-color);
	font-size: 26px;
	line-height: 0;
	outline: none;
}

.qty-input{
  width: 35px;
  text-align: center;
  border: none;
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  outline: none;
}

.product-single-content-btn{
	line-height: 0;
}

.product-single-content-btn .btn-default{
	padding: 17px 20px;
	text-align: center;
}

.product-single-content-btn .btn-default::before{
	display: none;
}

.product-single-action ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.product-single-action ul li a{
	display: inline-block;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.product-single-action ul li a:hover{
	background: var(--primary-color);
}

.product-single-action ul li a img{
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
}

.product-single-action ul li a:hover img{
	filter: brightness(0) invert(1);
}

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

.product-single-details-list ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.product-single-details-list ul li{
	line-height: 1.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.product-single-details-list ul li:last-child{
	margin-bottom: 0;
}

.product-single-details-list ul li span{
	font-family: var(--accent-font);
	font-weight: 500;
	color: var(--primary-color);
}

.product-single-share{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.product-single-share h3{
	font-size: 16px;
}

.product-single-share ul{
	list-style: none;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 0;
	margin: 0;
}

.product-single-share ul li a i{
	font-size: 18px;
	color: var(--primary-color);
	transition: all 0.4s ease-in-out;
}

.product-single-share ul li a:hover i{
	color: var(--accent-color);
}

.product-single-review-box{
	margin-top: 80px;
}

.product-step-nav{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 30px;
}

.product-step-nav .nav-tabs{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	border: none;
}

.product-step-nav ul li{
	width: auto;
}

.product-step-nav ul li .nav-link{
	position: relative;
	width: 100%;
    background: transparent;
	border: none;
    color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 20px;
    font-weight: 500;
    line-height: 1em;
	padding: 0;
	border-radius: 0;
	margin: 0;
    text-transform: capitalize;
    transition: all 0.4s ease-in-out;
}

.product-step-nav ul li .nav-link.active,
.product-step-nav ul li .nav-link:hover{
    background: transparent;
    color: var(--primary-color);
}

.product-step-nav ul li .nav-link::before{
    content: '';
    display: block;
    position: absolute;
    top: auto;
    left: auto;
	bottom: -32px;
    right: 0;
    background-color: var(--primary-color);
    width: 0;
    height: 2px;
    transition: all 0.4s ease-in-out;
}

.product-step-nav ul li .nav-link.active::before,
.product-step-nav ul li .nav-link:hover:before{
	width: 100%;
	right: auto;
	left: 0;
}

.product-tab-item-box h2{
	font-size: 36px;
	margin-bottom: 20px;
}

.product-tab-item-box h3{
	font-size: 20px;
	margin-top: 20px;
}

.product-tab-item-box p{
	margin-bottom: 20px;
}

.product-tab-item-box ul{
	list-style: disc;
    padding: 0 0 0 20px;
    margin: 20px 0 0 0;
}

.product-tab-item-box ul li{
    line-height: 1.4em;
    margin-bottom: 10px;
}

.product-tab-item-box h2:last-child,
.product-tab-item-box ul:first-child,
.product-tab-item-box p:last-child,
.product-tab-item-box ul li:last-child{
	margin: 0;
}

.product-review-from-content{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.review-form,
.customer-review-list{
	width: calc(50% - 30px);
}

.customer-review-item{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 40px;
}

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

.customer-review-item .icon-box img{
	width: 100%;
	max-width: 50px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.customer-review-item-body{
	width: calc(100% - 65px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

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

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

.customer-review-item-content p span{
	color: var(--primary-color);
	font-weight: 600;
}

.customer-review-item-rating i{
	width: auto;
	font-size: 16px;
	color: var(--accent-color);
}

.review-form-content{
	margin-bottom: 30px;
}

.review-form-content h3{
	font-size: 20px;
	margin: 0 0 5px 0;
}

.review-form-content p{
	margin: 15px 0 0;
}

.review-form .form-control{
	font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    border: 1px solid var(--divider-color);
    background-color: transparent;
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: none;
    outline: none;
}

.review-form .form-control::placeholder{
	color: var(--text-color);
	opacity: 50%;
}

.review-form-note{
	display: flex;
	align-items: start;
	gap: 5px;
}

.review-form-note input{
	margin-top: 2px;
}

.review-form-note .form-label{
	font-size: 16px;
	margin: 0;
}

.review-form .btn-default{
	width: 100%;
	text-align: center;
	padding: 16px 20px;
	margin: 20px 0 0 0;
}

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

.product-additional-content-title{
	margin-bottom: 30px;
}

.product-additional-info-table{
    overflow-x: auto;
	overflow-y: hidden;
    cursor: grab;
}

.product-additional-info-table table{
	width: 100%;
    white-space: nowrap;
	border: 1px solid var(--divider-color);
}

.product-additional-info-table::-webkit-scrollbar{
	height: 7px;
}

.product-additional-info-table::-webkit-scrollbar-track{
	background-color: var(--accent-color);
}

.product-additional-info-table::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

.product-additional-info-table table tr b{
	font-weight: 600;
	color: var(--primary-color);
}

.product-additional-info-table table tr td{
	min-width: 200px;
    border-top: 1px solid var(--divider-color);
    border-right: 1px solid var(--divider-color);
	color: var(--primary-color);
	padding: 20px 30px;
}

.product-additional-info-table table tr td:last-child{
	border-right: none;
}

.related-products{
	padding: 40px 0;
}

.our-faqs.page-about-faqs{
	padding: 40px 0 80px;
}

/************************************/
/***       23. Cart Page css      ***/
/************************************/

.page-cart{
    padding: 80px 0;
}

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

.cart-item-header span{
	font-family: var(--accent-font);
	font-size: 16px;
    font-weight: 500;
    line-height: 1.4em;
    color: var(--primary-color);
}

.product-header-tag{
    width: calc(46% - 7.5px);
}

.price-header-tag{
    width: calc(18% - 7.5px);
}

.quantity-header-tag{
    width: calc(21% - 7.5px);
}

.subtotal-header-tag{
    width: calc(15% - 7.5px);
}

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

.cart-item-image-content{
    width: calc(63% - 5px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px 30px;
}

.cart-item-image{
    position: relative;
    border: 1px solid var(--divider-color);
    width: 85px;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 5px 5px 0 0;
}

.cart-item-image::before{
    content: '\f00d';
    position: absolute;
    font-family: 'FontAwesome';
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    font-size: 12px;
    color: var(--text-color);
	cursor: pointer;
}

.cart-item-image figure{
    display: block;
	border-radius: 10px;
}

.cart-item-image img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
	border-radius: 10px;
}

.cart-item-info-content{
    width: calc(100% - 120px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
}

.cart-item-title{
    max-width: 140px;
}

.cart-item-title p:last-child{
    margin-bottom: 0;
}

.cart-item-price{
    width: 35%;
}

.cart-item-price p:last-child{
    margin-bottom: 0;
}

.cart-item-quantity-total{
    width: calc(37% - 5px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cart-item-quantity .qty-box{
    padding: 5px 10px;
    gap: 10px;
}

.cart-item-quantity .qty-btn{
	font-size: 22px;
}

.cart-item-subtotal{
    width: 40%;
}

.cart-item-subtotal p:last-child{
    margin-bottom: 0;
}

.cart-item-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-top: 40px;
}

.cart-item-buttons .btn-default{
    padding: 16px 30px 16px 60px;
}

.cart-item-buttons .btn-default.btn-update::before,
.cart-item-buttons .btn-default.btn-clear::before{
	position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    color: var(--primary-color);
    background: transparent;
    left: 30px;
	transform: translateY(-50%);
	top: 50%;
    width: auto;
    height: auto;
    right: auto;
	transition: all 0.4s ease-in-out;
}

.cart-item-buttons .btn-default.btn-update:hover::before,
.cart-item-buttons .btn-default.btn-clear:hover::before{
	color: var(--white-color);
}

.cart-item-buttons .btn-default.btn-update::before{
    content: '\f01e';
	font-weight: 700;
}

.cart-item-buttons .btn-default.btn-clear::before{
    content: '\f2ed';
    font-weight: 400;
}

.interested-products-box{
    margin-top: 80px;
}

.interested-products-box-title{
    margin-bottom: 30px;
}

.interested-products-box-title h2{
    font-size: 36px;
    line-height: 1.1em;
}

.interested-products-box .product-item-list .product-item{
	width: calc(33.33% - 13.33px);
}

.interested-products-box .product-item-list .product-item .product-item-content{
	padding: 10px;
}

.page-single-sidebar.right-side-sidebar{
    margin: 0 0 0 20px;
}

.order-summary-box{
    border: 1px solid var(--divider-color);
	border-radius: 20px;
    padding: 15px;
}

.order-summary-content-box{
    padding: 15px;
    margin-bottom: 15px;
}

.order-summary-box-title,
.order-summary-promocode-box,
.order-summary-shipment-info{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.order-summary-box-title h2{
    font-size: 20px;
}

.order-summary-promocode-form{
    margin-bottom: 30px;
}

.order-summary-promocode-form .form-group{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 4px;
}

.order-summary-promocode-form .form-group .form-control{
    width: 170px;
	font-size: 16px;
	line-height: normal;
	color: var(--primary-color);
	background-color: transparent;
	background-image: url('../images/icon-tag.svg');
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 14px auto;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
    flex-grow: 1;
	padding: 8px 10px 8px 36px;
}

.order-summary-promocode-form .form-group .form-control::placeholder{
	color: var(--text-color);
	opacity: 50%;
}

.order-summary-promocode-form .form-group button.btn-default{
	padding: 12px 30px;
	border-radius: 5px;
}

.order-summary-promocode-form .form-group button.btn-default::before{
	display: none;
}

.order-summary-total{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.order-summary-total h3{
    font-size: 20px;
    line-height: normal;
}

.order-summary-shipment-info h3{
    font-size: 20px;
    line-height: normal;
    margin-bottom: 20px;
}

.order-summary-shipment-info ul{
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.order-summary-shipment-info ul li{
	margin-bottom: 15px;
}

.order-summary-shipment-info ul li:last-child{
	margin-bottom: 0;
}

.order-summary-shipment-info ul li,
.order-summary-shipment-info ul li span{
	font-size: 16px;
	line-height: normal;
    color: var(--primary-color);
    font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5px 10px;
}

.order-summary-shipment-info ul li span{
	flex-grow: 1;
    font-weight: 400;
    color: var(--text-color);
}

.order-summary-shipment-info ul li span label{
	width: calc(100% - 28px);
}

.order-summary-shipment-info ul li input[type=radio]{
	width: 18px;
	height: 18px;
	accent-color: var(--primary-color);
}

.order-summary-shipment-info p{
    font-size: 16px;
    margin-bottom: 5px;
}

.order-summary-shipment-info p span{
    font-weight: 600;
    color: var(--primary-color);
}

.order-summary-shipment-info a{
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: underline;
}

.order-checkout-button .btn-default{
    width: 100%;
	padding: 17px 20px;
	text-align: center;
}

.order-checkout-button .btn-default::before{
	display: none;
}

/************************************/
/***  24. Order Receive Page css  ***/
/************************************/

.page-order-receive{
    padding: 80px 0;
}

.order-receive-sidebar{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
    padding: 30px;
}

.order-receive-sidebar-item{
    margin-bottom: 50px;
}

.order-receive-sidebar-item:last-child{
    margin-bottom: 0;
}

.order-sidebar-item-title{
    font-size: 20px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.order-receive-sidebar-item ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-receive-sidebar-item ul li{
    line-height: 1.5em;
    margin-bottom: 20px;
}

.order-receive-sidebar-item ul li:last-child{
    margin-bottom: 0;
}

.order-receive-sidebar-item ul li a{
    display: block;
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.order-receive-sidebar-item ul li a:hover{
    color: var(--accent-color);
}

.order-receive-box ul li{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.order-receive-box ul li:last-child{
    padding-bottom: 0;
    border-bottom: none;
}

.order-receive-box ul li span b{
    font-weight: 400;
    color: var(--primary-color);
}

.order-receive-title-box{
    margin-bottom: 40px;
}

.order-receive-title-box h2{
    font-size: 36px;
}

.order-receive-title-box p{
	font-family: var(--accent-font);
	font-size: 20px;
    margin: 5px 0 0;
}

.order-receive-content-list ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-receive-content-list ul li{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    line-height: 1.5em;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.order-receive-content-list ul li:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.order-receive-content-list ul li span{
    width: 67%;
}

.order-receive-content-list-title{
    font-weight: 500;
    color: var(--primary-color);
}

/************************************/
/*** 	25. Checkout Page css	  ***/
/************************************/

.page-checkout{
	padding: 80px 0;
}

.checkout-login-box{
	margin-bottom: 40px;
}

.checkout-login-accordion{
	margin-bottom: 30px;
}

.checkout-login-accordion:last-child{
	margin-bottom: 0;
}

.checkout-accordion-header .checkout-accordion-button{
	position: relative;
	width: 100%;
	font-family: var(--default-font);
	font-size: 16px;
	line-height: 1.25em;
	color: var(--text-color);
	background: transparent;
	border: 1px dashed var(--divider-color);
	border-radius: 10px;
	text-align: left;
	padding: 14px 40px 14px 20px;
}

.checkout-accordion-header .checkout-accordion-button::after,
.checkout-accordion-header .checkout-accordion-button.collapsed::after{
    content: '\f107';
    font-family: 'FontAwesome';
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 14px;
    color: var(--text-color);
    transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.checkout-accordion-header .checkout-accordion-button:not(.collapsed)::after{
	transform: translateY(-50%) rotate(180deg);
}

.checkout-accordion-header .checkout-accordion-button b{
	color: var(--primary-color);
	font-weight: 400;
	text-decoration: underline;
}

.checkout-accordion-body{
	margin-top: 30px;
}

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

.checkout-accordion-body-content p{
	font-size: 16px;
	margin-bottom: 15px;
}

.checkout-accordion-body-content p:last-child{
	margin-bottom: 0;
}

.checkout-bill-address-form .form-group,
.checkout-login-form .form-group{
	margin-bottom: 30px;
}

.checkout-bill-address-form .form-group:last-child,
.checkout-login-form .form-group:last-child{
	margin-bottom: 0;
}

.checkout-bill-address-form .form-group label,
.checkout-login-form .form-group label{
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.checkout-bill-address-form .form-control,
.checkout-login-form .form-control{
	font-size: 14px;
	font-weight: 400;
	line-height: 1.429em;
	color: var(--text-color);
	border: 1px solid var(--divider-color);
	background-color: transparent;
	border-radius: 10px;
	padding: 14px 20px;
	box-shadow: none;
	outline: none;
}

.checkout-bill-address-form .form-control::placeholder,
.checkout-login-form .form-control::placeholder{
	color: var(--text-color);
}

.checkout-bill-address-form select.form-control{
	padding: 14px 35px 14px 20px;
}

.checkout-login-form-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.checkout-login-form-footer .checkout-login-btn .btn-default{
	padding: 17px 20px;
	text-align: center;
}

.checkout-login-form-footer .checkout-login-btn .btn-default::before{
	display: none;
}

.checkout-form-checkbox{
	display: flex;
	align-items: center;
	gap: 10px;
}

.checkout-form-checkbox input[type=checkbox]{
	width: 18px;
	height: 18px;
	accent-color: var(--primary-color);
}

.checkout-form-checkbox label{
	color: var(--text-color);
	cursor: pointer;
    margin: 0;
}

.checkout-bill-address-title{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.checkout-bill-address-title h2{
	font-size: 20px;
}

.checkout-form-checkbox.different-address-note{
	margin-top: 20px;
}

.checkout-form-checkbox.different-address-note p:last-child{
	margin-bottom: 0;
}

.checkout-form-checkbox.different-address-note label{
	font-weight: 400;
	color: var(--text-color);
	margin: 0;
}

.checkout-sidebar-box{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 15px;
}

.product-total-order-box{
	padding: 15px;
}

.checkout-coupeon-accordion{
	margin-bottom: 30px;
}

.checkout-coupeon-accordion:last-child{
	margin-bottom: 0;
}

.coupeon-accordion-header .coupeon-accordion-button{
	position: relative;
	width: 100%;
	font-family: var(--default-font);
	font-size: 16px;
	line-height: 1.25em;
	color: var(--text-color);
	background: transparent;
	border: 1px dashed var(--divider-color);
	border-radius: 10px;
	text-align: left;
	padding: 14px 40px 14px 20px;
}

.coupeon-accordion-header .coupeon-accordion-button::after,
.coupeon-accordion-header .coupeon-accordion-button.collapsed::after{
    content: '\f107';
    font-family: 'FontAwesome';
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 14px;
    color: var(--text-color);
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.coupeon-accordion-header .coupeon-accordion-button:not(.collapsed)::after{
	transform: translateY(-50%) rotate(180deg);
}

.coupeon-accordion-header .coupeon-accordion-button b{
	color: var(--primary-color);
	font-weight: 400;
	text-decoration: underline;
}

.coupeon-accordion-body{
	margin-top: 30px;
}

.coupeon-accordion-body-content{
	margin-bottom: 20px;
}

.coupeon-accordion-body-content p{
	margin-bottom: 15px;
}

.coupeon-accordion-body-content p:last-child{
	margin-bottom: 0;
}

.coupeon-apply-form{
	display: flex;
	align-items: center;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 4px;
}

.coupeon-apply-form .form-group{
	min-width: 200px;
	flex: 1;
}

.coupeon-apply-form .form-control{
	font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--primary-color);
    background-color: transparent;
	background-image: url('../images/icon-tag.svg');
	background-repeat: no-repeat;
	background-position: left 13px top 56%;
	background-size: 14px auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 8px 18px 8px 35px;
}

.coupeon-apply-form .form-control::placeholder{
	color: var(--text-color);
	opacity: 50%;
}

.coupeon-apply-btn .btn-default{
	padding: 12px 20px;
	text-align: center;
	border-radius: 5px;
}

.coupeon-apply-btn .btn-default::before{
	display: none;
}

.product-total-order-title{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 25px;
	padding-bottom: 25px;
}

.product-total-order-title h3{
	font-size: 20px;
}

.product-total-item-tag-list{
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.product-total-item-tag{
	font-weight: 500;
	color: var(--primary-color);
}

.product-total-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.product-total-item-header{
	max-width: 70%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.product-total-item-image figure{
	display: block;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	width: 60px;
	height: 60px;
}

.product-total-item-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}

.product-total-item-title{
	width: calc(100% - 75px);
}

.product-total-item-title p,
.product-total-item-subtotal p{
	margin: 0;
}

.all-product-total{
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.all-product-total p{
	display: flex;
	justify-content: space-between;
	gap: 15px;
	font-family: var(--accent-font);
	line-height: normal;
	font-weight: 500;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.all-product-total p:last-child{
	margin-bottom: 0;
}

.product-total-order-list .order-summary-shipment-info{
	border-top: 1px solid var(--divider-color);
	border-bottom: none;
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
}

.order-payment-info{
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.order-payment-info-item{
	margin-bottom: 20px;
}

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

.order-payment-info-item span{
	display: flex;
	align-items: center;
	gap: 10px;
    font-weight: 400;
    color: var(--text-color);
}

.order-payment-info-item input[type=radio]{
	width: 18px;
	height: 18px;
	accent-color: var(--primary-color);
}

.order-payment-info-item span label{
	width: calc(100% - 28px);
	font-weight: 500;
	color: var(--primary-color);
}

.order-payment-info-item p{
	margin: 10px 0 0 0;
}

.place-order-button{
	margin-top: 15px;
}

.place-order-button .btn-default{
	width: 100%;
	text-align: center;
	padding: 17px 20px;
}

.place-order-button .btn-default::before{
	display: none;
}

/**************************************/
/*** 26. Account Dashboard Page css ***/
/**************************************/

.page-my-account{
    padding: 80px 0;
}

.my-account-sidebar-item{
    border: 1px solid var(--divider-color);
	border-radius: 20px;
    padding: 40px;
}

.my-account-sidebar-item ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-account-sidebar-item ul li{
    font-weight: 500;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.my-account-sidebar-item ul li:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.my-account-sidebar-item ul li a{
    display: flex;
    align-items: center;
    gap: 15px;
    color: initial;
    transition: all 0.4s ease-in-out;
}

.my-account-sidebar-item ul li a:hover{
    color: var(--accent-color);
}

.my-account-sidebar-item ul li img{
    width: 100%;
    max-width: 24px;
}

.account-dashboard-detail-box p{
    margin-bottom: 30px;
}

.account-dashboard-detail-box p:last-child{
    margin-bottom: 0;
}

.account-dashboard-detail-box p b{
    font-weight: 600;
    color: var(--primary-color);
}

.account-dashboard-detail-box p a{
    text-decoration: underline;
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

p.account-dashboard-detail-title{
    font-size: 20px;
}

/************************************/
/***  27. Account Order Page css  ***/
/************************************/

.page-account-order{
    padding: 80px 0;
}

.account-order-table-box{
	overflow-x: auto;
	cursor: grab;
}

.account-order-table-box table{
	width: 100%;
    white-space: nowrap;
}

.account-order-table-box::-webkit-scrollbar{
	height: 4px;
}

.account-order-table-box::-webkit-scrollbar-track{
	background-color: var(--primary-color);
}

.account-order-table-box::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

.account-order-table-box table tr th{
    min-width: 100px;
	font-family: var(--accent-font);
	font-weight: 500;
	line-height: normal;
	color: var(--primary-color);
	padding: 0 10px 20px 0;
}

.account-order-table-box table tr td{
    border-top: 1px solid var(--divider-color);
	padding: 20px 10px 20px 0;
}

.account-order-table-box table tr:last-child td{
    padding-bottom: 0;
}

.account-order-table-box table tr td:last-child{
    padding-right: 0;
}

.account-order-table-box table tr td.account-order-table-no{
    color: var(--primary-color);
}

.account-order-table-box table tr td .btn-default{
	font-size: 14px;
	padding: 8px 15px;
	border-radius: 5px;
}

.account-order-table-box table tr td .btn-default::before{
    display: none;
}

.account-order-button{
    margin-top: 40px;
}

/**************************************/
/*** 28. Account Order View Page css **/
/**************************************/

.page-account-view-order{
    padding: 80px 0;
}

.view-order-product-info-box .product-header-tag{
    width: calc(53% - 6.67px);
}

.view-order-product-info-box .quantity-header-tag{
    width: calc(26% - 6.67px);
}

.view-order-product-info-box .subtotal-header-tag{
    width: calc(21% - 6.67px);
}

.view-order-product-info-box .cart-item-image-content{
    width: calc(53% - 5px);
}

.view-order-product-info-box .cart-item-quantity-total{
    width: calc(47% - 5px);
}

.view-order-product-info-box .cart-item-subtotal{
    width: 44%;
}

.view-order-product-info-box .cart-item-quantity p:last-child{
    margin: 0;
}

ul.view-order-product-info-list{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.view-order-product-info-list li{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 500;
    line-height: 1.2em;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

ul.view-order-product-info-list li:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

ul.view-order-product-info-list li span{
    width: 21%;
    font-weight: 400;
    color: var(--text-color);
}

.view-order-address-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px 90px;
    margin-top: 80px;
}

.view-order-address-item{
    width: calc(50% - 45px);
}

.view-order-address-item h2{
    font-size: 20px;
}

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

.view-order-address-item ul li{
    line-height: 1.5em;
    margin-bottom: 20px;
}

.view-order-address-item ul li:last-child{
    margin-bottom: 0;
}

.view-order-address-item ul li a{
    display: block;
    color: inherit;
}

/*************************************/
/*** 29. Account Download Page css ***/
/*************************************/

.page-product-download{
    padding: 80px 0;
}

/************************************/
/*** 30. Account Address Page css ***/
/************************************/

.page-my-account-address{
    padding: 80px 0;
}

.account-address-content-header{
    margin-bottom: 40px;
}

.account-address-content-header p:last-child{
    margin-bottom: 0;
}

.account-address-item{
    margin-bottom: 50px;
}

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

.account-address-item-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.account-address-item-title h2{
    font-size: 20px;
}

.account-address-item-title p{
	font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
}

.account-address-item-title p a{
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.account-address-item-title p a:hover{
    color: var(--primary-color);
}

.account-address-item-title p a img{
    width: 100%;
    max-width: 20px;
    transition: all 0.4s ease-in-out;
}

.account-address-item-title p a:hover img{
    filter: brightness(0) invert(0);
}

.account-address-item-info-list{
    max-width: 330px;
}

.account-address-item-info-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-address-item-info-list ul li{
    line-height: 1.5em;
    margin-bottom: 20px;
}

.account-address-item-info-list ul li:last-child{
    margin-bottom: 0;
}

/**************************************/
/*** 31. Account Addresses Page css ***/
/**************************************/

.page-account-addresses{
    padding: 80px 0;
}

.account-address-form-btn{
    margin-top: 10px;
}

/************************************/
/*** 32. Account Details Page css ***/
/************************************/

.page-account-details{
    padding: 120px 0;
}

.account-details-content-item{
    margin-bottom: 60px;
}

.account-details-content-item:last-child{
    margin-bottom: 0;
}

/*************************************/
/*** 33. Account Wishlist Page css ***/
/*************************************/

.page-account-wishlist{
    padding: 80px 0;
}

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

.wishlist-item-header span{
	font-family: var(--accent-font);
    font-weight: 500;
    line-height: 1.4em;
    color: var(--primary-color);
}

.wishlist-product-tag{
    width: calc(41% - 7.5px);
}

.wishlist-price-tag{
    width: calc(23% - 7.5px);
}

.wishlist-status-tag{
    width: calc(25% - 7.5px);
}

.wishlist-action-tag{
    width: calc(11% - 7.5px);
}

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

.wishlist-item-image-content{
    width: calc(65% - 5px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.wishlist-item-image{
    position: relative;
    width: 70px;
    height: 70px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}

.wishlist-item-image figure{
    display: block;
}

.wishlist-item-image img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
	border-radius: 10px;
}

.wishlist-item-info-content{
    width: calc(100% - 87px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
}

.wishlist-item-title p{
    max-width: 130px;
    line-height: normal;
}

.wishlist-item-title p:last-child{
    margin-bottom: 0;
}

.wishlist-item-price{
    width: 43%;
}

.wishlist-item-price p{
    line-height: normal;
    margin-bottom: 5px;
}

.wishlist-item-price p:last-child{
    margin-bottom: 0;
}

.wishlist-item-price p span{
    text-decoration: line-through;
}

.wishlist-item-status-action{
    width: calc(35% - 5px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wishlist-item-status p:last-child{
    margin-bottom: 0;
}

.wishlist-item-action{
    width: 22%;
}

.wishlist-item-action a{
    display: inline-block;
    color: var(--error-color);
    transition: all 0.4s ease-in-out;
}

.wishlist-item-action a i{
    font-size: 24px;
    color: inherit;
}

.wishlist-item-action a:hover{
    color: var(--primary-color);
}

.wishlist-content-button{
    margin-top: 40px;
}

/************************************/
/*** 	  34. Login Page css	  ***/
/************************************/

.page-login{
    padding: 80px 0;
}

.login-content-box{
    display: flex;
    flex-wrap: wrap;
    gap: 40px 80px;
}

.login-content-form-item{
    width: calc(50% - 40px);
}

.login-content-title-box{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
	margin-bottom: 30px;
}

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

.login-content-title-box p{
    margin: 15px 0 0;
}

.login-content-form-btn{
    margin-top: 30px;
}

.login-form-content .checkout-login-form-footer .checkout-login-btn .btn-default{
	padding: 17px 42px 17px 20px;
}

.login-form-content .checkout-login-form-footer .checkout-login-btn .btn-default::before{
	display: block;
}

.login-content-form-btn a{
	font-family: var(--accent-font);
    font-size: 20px;
	font-weight: 500;
    color: var(--primary-color);
    text-decoration: underline;
}

.login-form-info p{
    margin-bottom: 15px;
}

.login-form-info p:last-child{
    margin: 0;
}

.login-form-info p a{
    color: var(--primary-color);
    text-decoration: underline;
}

.signup-form-btn{
    margin-top: 30px;
}

.signup-form-btn .btn-default{
    width: 100%;
	text-align: center;
	padding: 17px 20px;
}

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

/************************************/
/*** 35. Forgot Password Page css ***/
/************************************/

.page-forgot-password{
    padding: 80px 0;
}

.forgot-password-content-box .login-content-form-item{
    width: auto;
    max-width: 860px;
    margin: 0 auto;
}

/************************************/
/***  36. Privacy Policy Page css ***/
/************************************/

.page-privacy-policy{
	padding: 80px 0;
}

.page-category-list{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
    margin-bottom: 30px;
}

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

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

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

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

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

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

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

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

.sidebar-cta-title{
	max-width: 240px;
}

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

.sidebar-cta-box ul{
	border-top: 1px solid var(--divider-color);
	margin: 30px 0 0 0;
    padding: 30px 0 0 0;
    list-style: none;
}

.sidebar-cta-box ul li{
	color: var(--text-color);
    line-height: 1.5em;
    margin-bottom: 15px;
}

.sidebar-cta-box ul li:last-child{
    margin-bottom: 0;
}

.sidebar-cta-box ul li a{
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.sidebar-cta-box ul li a:hover{
    color: var(--primary-color);
}

.sidebar-cta-box ul li a img{
    width: 100%;
    max-width: 20px;
    margin-right: 10px;
}

.privacy-policy-sidebar-list ul li{
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.page-category-list.privacy-policy-sidebar-list ul li a{
	padding-right: 0;
}

.privacy-policy-sidebar-list ul li a::before{
	display: none;
}

.privacy-policy-entry-header{
	margin-bottom: 60px;
}

.privacy-policy-entry-header h3{
	font-size: 20px;
	margin-bottom: 20px;
}

.privacy-policy-entry-header p{
	margin-bottom: 20px;
}

.privacy-policy-entry-header h3:last-child,
.privacy-policy-entry-header p:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-header p a{
	color: var(--primary-color);
	transition: all 0.4s ease-in-out;
}

.privacy-policy-entry-header p a:hover{
	color: var(--accent-color);
}

.privacy-policy-entry-item{
	margin-bottom: 50px;
}

.privacy-policy-entry-item:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item .section-title:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item .section-title ul{
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.privacy-policy-entry-item .section-title ul li{
	line-height: 1.4em;
	margin-bottom: 10px;
}

.privacy-policy-entry-item .section-title ul li:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item .section-title ul li span{
	color: var(--primary-color);
}

.privacy-policy-entry-item .section-title ul li a{
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.privacy-policy-entry-item .section-title ul li a:hover{
	color: var(--accent-color);
}

.privacy-policy-entry-item-content-box{
	margin-bottom: 50px;
}

.privacy-policy-entry-item-content-box:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item-content-box h3{
	font-size: 20px;
	margin-bottom: 20px;
}

.privacy-policy-entry-item-content-box p{
	margin-bottom: 15px;
}

.privacy-policy-entry-item-content-box p:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item-content-box p span{
	color: var(--primary-color);
}

.privacy-policy-entry-item-content-box ul{
	list-style: disc;
    margin: 0 0 20px;
    padding: 0 0 0 20px;
}

.privacy-policy-entry-item-content-box.number-list ul{
	list-style: decimal;
	padding-left: 25px;
}

.privacy-policy-entry-item-content-box h3:last-child,
.privacy-policy-entry-item-content-box ul:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item-content-box ul li{
    line-height: 1.4em;
    margin-bottom: 10px;
}

.privacy-policy-entry-item-content-box ul li:last-child{
	margin-bottom: 0;
}

.privacy-policy-entry-item-content-box ul li span,
.privacy-policy-entry-item-content-box ul li::marker{
	color: var(--primary-color);
}

.privacy-policy-entry-item-content-box ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.privacy-policy-entry-item-content-box ul li a:hover{
	color: var(--accent-color);
}

.privacy-policy-entry-item-content-box ul.contact-list-box{
	padding: 0;
}

.privacy-policy-entry-item-content-box ul.contact-list-box{
	list-style: none;
}

.privacy-policy-entry-item-content-box ul.contact-list-box li b{
	font-weight: 500;
	color: var(--primary-color);
}

/************************************/
/***  37. Term Condition Page css ***/
/************************************/

.page-terms-conditions{
    padding: 80px 0;
}

/************************************/
/*** 38. Refund Return Policy css ***/
/************************************/

.page-refund-return-policy{
    padding: 80px 0;
}

/************************************/
/***  39. Cancellation Policy css ***/
/************************************/

.page-cancellation-policy{
    padding: 80px 0;
}

/************************************/
/*** 40. Delivery Policy Page css ***/
/************************************/

.page-delivery-policy{
    padding: 80px 0;
}

/************************************/
/***   41. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	padding: 80px 0;
}

/************************************/
/***       42. FAQs Page css      ***/
/************************************/

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

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

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

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

/************************************/
/***    43. Contact Us Page css   ***/
/************************************/

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

.page-contact-us .contact-now-social-icons ul li a{
	background: var(--secondary-color);
}

.page-contact-us .contact-now-social-icons ul li a:hover{
	background: var(--accent-color);
}

.page-contact-us .contact-form{
	background-color: var(--secondary-color);
}

.page-contact-us .contact-form .form-control{
	background: var(--bg-color);
}

.google-map{
    padding: 40px 0 80px;
}

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

.google-map-iframe iframe{
	width: 100%;
	height: 100%;
	filter: grayscale(100%);
	transition: all 0.4s ease-in-out;
}

.google-map-iframe iframe:hover{
	filter: grayscale(0%);
}

/************************************/
/*** 	44. Empty Cart Page css   ***/
/************************************/

.empty-cart-page{
	padding: 80px 0;
}

.empty-cart-page-image{
	text-align: center;
	margin-bottom: 40px;
}

.empty-cart-page-image img{
	width: 100%;
	max-width: 360px;
}

.empty-cart-page-content{
	text-align: center;
}

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

/************************************/
/*** 	 45. 404 Error Page css	  ***/
/************************************/

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

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

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

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

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

/************************************/
/***      46. Responsive css      ***/
/************************************/

@media only screen and (min-width: 769px){

	.dropdown:hover > .dropdown-menu{
		display: block;
	}
}

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

	.featured-service-item{
		padding: 30px;
	}
}

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

	.latest-updates{
		margin: 0 15px;
	}

	.our-featured-services{
		margin: 0 15px;
	}
}

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

	.navbar{
		gap: 30px;
		padding: 20px 15px;
	}

	.header-action-box{
		width: calc(100% - 68px);
		padding: 0;
	}

	.header-search-form-box{
		max-width: 450px;
		padding: 0 10px;
	}

	.header-search-form .form-group .form-control{
		padding: 12px 10px 12px 0;
	}

	.header-action-details ul{
		gap: 20px;
	}

	.header-action-details ul li a{
		gap: 2px;
	}

	.header-action-details ul li a img{
		max-width: 20px;
	}

	.main-menu{
		width: auto;
		background: transparent;
		padding: 0;
	}

	.main-menu .navbar-collapse{
		display: none !important;
	}

	.slicknav_menu ul.dropdown-menu{
		position: initial !important;
		transform: none !important;
		display: none;
		border-radius: 0;
		opacity: 1;
		visibility: visible;
		padding: 30px 15px;
		margin: 0;
		border: none;
		transition: inherit;
	}

	.slicknav_nav .mega-menu-box{
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		padding: 0;
	}

	.mega-menu-links-box{
		width: 100%;
		gap: 30px;
	}

	.mega-menu-link{
		width: calc(50% - 15px);
	}

	.mega-menu-link h2{
		margin-bottom: 15px;
    	padding-bottom: 15px;
	}

	.slicknav_menu .mega-menu-link ul{
		padding: 0;
	}

	.slicknav_menu .mega-menu-link ul li{
		margin-bottom: 10px;
	}

	.slicknav_menu .mega-menu-link ul li:last-child{
		margin-bottom: 0;
	}

	.slicknav_menu .mega-menu-link ul li a{
		color: var(--text-color);
		padding: 0;
	}

	.mega-menu-items-list{
		width: 100%;
	}

	.mega-menu-item.big-offer-box{
		padding: 20px;
	}

	.slicknav_menu .mega-menu-item-image a{
		padding: 0;
	}

	.slicknav_menu .mega-menu-item-content h2 a,
	.mega-menu-item-content h2{
		font-size: 20px;
		color: var(--primary-color);
		padding: 0;
	}

	.mega-menu-item.big-offer-box .mega-menu-item-content h2{
		font-size: 26px;
	}

	.mega-menu-item.big-offer-box .mega-menu-item-content h3{
		font-size: 18px;
	}

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

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

	.header-btn{
		display: none;
	}

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

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

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

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

	.find-parts-box{
		gap: 15px;
		justify-content: center;
	}

	.find-parts-box-title{
		max-width: 100%;
	}

	.find-parts-form{
		width: 100%;
	}

	.category-item{
		width: calc(33.33% - 13.33px);
	}
	
	.category-highlighted-item{
		padding: 30px;
	}

	.category-highlighted-item-image figure{
		margin: 0 -105px -90px 0;
	}

	.latest-update-item{
		width: calc(50% - 10px);
		min-height: 300px;
		padding: 30px;
	}

	.product-item{
		width: calc(33.33% - 13.33px);
	}

	.essential-auto-parts-image-box{
		width: 100%;
	}

	.essential-auto-parts-image,
	.essential-auto-parts-image figure{
		height: auto;
	}

	.essential-auto-parts-image figure img{
		height: auto;
		aspect-ratio: 1 / 0.6;
	}

	.essential-auto-parts-item-list{
		width: 100%;
	}

	.offer-item{
		padding: 30px;
	}

	.offer-item.highlighted-box{
		padding: 50px;
	}

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

	.our-faqs .faq-accordion{
		margin: 0;
	}

	.featured-service-item{
		width: calc(50% - 10px);
		padding: 30px 20px;
	}

	.featured-service-item-body{
		width: calc(63% - 10px);
	}

	.featured-service-item.box-2 .featured-service-item-body{
		width: calc(70% - 10px);
	}

	.featured-service-item-image{
		width: calc(37% - 10px);
	}

	.featured-service-item.box-2 .featured-service-item-image{
		width: calc(30% - 10px);
	}

	.testimonial-item{
		width: calc(50% - 10px);
	}

	.contact-now-content{
		height: auto;
		padding: 0;
		margin: 0 0 30px;
	}

	.contact-now-social-icons{
		margin-top: 30px;
		padding-top: 30px;
	}

	.post-item{
		width: calc(50% - 10px);
	}

	.about-footer{
		max-width: 100%;
		margin-bottom: 30px;
	}

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

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

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

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

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

	.footer-contact-item-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.footer-contact-item-list ul li{
		margin-bottom: 15px;
	}

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

	.about-us-image{
		height: auto;
		margin: 0 0 30px;
	}

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

	.process-item{
		width: calc(50% - 10px);
		min-height: auto;
	}

	.intro-video-bg-video{
        height: 550px;
    }

	.team-item-social-list{
		left: 25px;
		right: 25px;
		bottom: 25px;
	}

	.team-item-social-list ul{
		gap: 10px;
	}

	.exclusive-offer-list{
		gap: 20px 10px;
	}

	.exclusive-offer-item{
		width: calc(50% - 5px);
	}

	.exclusive-offer-item-image{
		width: 40%;
	}

	.exclusive-offer-item-body{
		width: 60%;
		padding: 30px 20px;
	}

	.exclusive-offer-item-body .section-title h2{
		font-size: 26px;
	}

	.page-single-sidebar{
        margin: 0;
    }

	.product-category-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .product-category-item-title{
        margin-bottom: 15px;
    }
    
    .product-category-item ul li{
        margin-bottom: 10px;
    }

    .page-products .product-item-list .product-item{
        width: calc(50% - 7.5px);
    }
    
    .page-single-sidebar .product-category-filter-header{
        margin-bottom: 20px;
    }

	.product-single-info-content,
	.product-single-image-box{
		width: 100%;
	}

	.product-single-image-box{
		position: initial;
		max-width: 740px;
		margin: 0 auto;
	}

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

    .order-summary-box-title,
    .order-summary-promocode-box,
    .order-summary-shipment-info{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.order-receive-sidebar-item{
        margin-bottom: 30px;
    }

    .order-sidebar-item-title{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .order-receive-sidebar-item ul li{
        margin-bottom: 15px;
    }

    .order-receive-title-box{
        margin-bottom: 30px;
    }

	.my-account-sidebar-item{
		padding: 30px;
	}

	.view-order-address-item-list{
		gap: 30px;
	}

	.view-order-address-item{
		width: calc(50% - 15px);
	}

	.login-content-box{
        gap: 40px;
    }

    .login-content-form-item{
        width: calc(50% - 20px);
    }

	.page-category-list ul{
		padding: 20px;
	}

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

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

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

	.btn-default{
		padding: 15px 36px 15px 14px;
	}

	.btn-default::before{
		right: 14px;
	}

	.btn-default.btn-border{
		padding: 14px 36px 14px 14px;
	}

	.desktop-hide{
		display: block;
	}

	.mobile-hide{
		display: none;
	}

	.header-search-form-box{
		max-width: 350px;
	}
	
	.header-search-form .form-group .form-control{
		font-size: 14px;
	}

	.header-search-form .form-group .header-search-btn i{
		font-size: 16px;
	}

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

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

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

	.hero-box{
		padding: 90px 0;
	}

	.hero-content-body{
		margin: 0;
	}

	.find-parts-form-box{
		padding: 20px 0;
	}

	.find-parts-form form{
		gap: 15px 10px;
	}

	.find-parts-form .form-control,
	.find-parts-form .form-button{
		width: calc(25% - 7.5px);
	}

	.find-parts-form .form-control{
		font-size: 14px;
		padding: 15px 35px 15px 15px;
		background-position: right 15px center;
		background-size: 10px auto;
	}

	.form-button .btn-default{
		padding: 15px;
	}

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

	.category-item{
		width: calc(50% - 10px);
		padding: 15px;
	}

	.category-highlighted-item-list{
		margin-top: 20px;
	}

	.category-highlighted-item{
		padding: 20px;
	}

	.category-highlighted-item-body{
		width: calc(70% - 10px);
	}

	.category-highlighted-item-content h2{
		font-size: 30px;
	}

	.category-highlighted-item-content h3{
		margin-top: 15px;
	}

	.category-highlighted-item-image{
		width: calc(30% - 10px);
	}

	.category-highlighted-item-image figure{
		margin: 0 -55px -50px 0;
	}

	.latest-update-item{
		min-height: 250px;
	}

	.latest-update-item-content-box .section-title{
		margin-bottom: 20px;
	}

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

	.product-item{
		width: calc(50% - 10px);
	}

	.product-item-content{
		padding: 10px;
	}

	.essential-auto-parts{
		padding: 50px 0;
	}

	.essential-auto-part-info-box{
		padding: 20px;
	}

	.essential-auto-part-info-box h3{
		font-size: 30px;
		margin-bottom: 15px;
	}

	.essential-auto-parts-item-title{
		padding: 10px;
	}

	.our-offers{
		padding: 50px 0 25px;
	}

	.offer-item.highlighted-box,
	.offer-item{
		min-height: auto;
	}

	.offer-item-image figure::before,
	.offer-item.highlighted-box .offer-item-image figure::before{
		background: var(--primary-color);
		opacity: 50%;
	}

	.offer-item.highlighted-box .offer-item-body,
	.offer-item-body{
		max-width: 100%;
	}

	.featured-products{
		padding: 25px 0 50px;
	}

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

	.brand-item-list{
		gap: 10px;
	}

	.brand-item{
		width: calc(25% - 7.5px);
	}

	.brand-item-image{
		padding: 20px;
	}

	.brand-item-content{
		padding: 12px;
	}

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

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

	.faq-accordion .accordion-header .accordion-button{
		padding: 18px 45px 18px 20px;
	}

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

	.faq-accordion .accordion-item .accordion-body{
		padding: 18px 20px;
	}

	.featured-services-list{
		gap: 10px;
	}

	.featured-service-item{
		width: calc(50% - 5px);
		padding: 20px;
	}

	.featured-service-item-sub-title{
		margin-bottom: 10px;
	}

	.featured-service-item-body .section-title h2{
		font-size: 26px;
	}

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

	.testimonial-item{
		min-height: auto;
	}

	.google-review-header h2{
		font-size: 30px;
	}

	.contact-now{
		padding: 50px 0;
	}

	.contact-form{
		padding: 30px;
	}

	.contact-form .btn-default{
		padding: 15px 20px;
	}

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

	.post-item-body{
		padding: 10px;
	}

	.post-item-btn{
		padding-top: 15px;
		margin-top: 15px;
	}

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

	.footer-contact-item-list ul li img{
		max-width: 20px;
	}

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

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

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

	.our-process{
		padding: 50px 0 25px;
	}

	.process-item{
		padding: 30px 20px 50px;
	}

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

	.process-item-number{
		bottom: -26px;
	}

	.process-item-number h2{
		font-size: 80px;
	}

	.intro-video{
		padding: 25px 0 40px;
	}

	.intro-video-content-box .video-play-button a span{
		width: 70px;
		height: 70px;
	}

	.intro-video-content-box .video-play-button a span i{
		font-size: 24px;
	}

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

	.team-item{
		width: calc(50% - 10px);
	}

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

	.exclusive-offer-item{
		width: 100%;
	}

	.exclusive-offer-item-image figure{
		margin: -35px 0 -35px -100px;
	}

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

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

	.page-single-post{
        padding: 50px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 30px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 15px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }

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

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

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

    .product-category-sorting-list .form-select{
        padding: 8px 35px 8px 12px;
    }

    .product-learn-more-btn{
        margin-top: 30px;
    }

	.page-product-single{
		padding: 30px 0 25px;
	}

	.product-single-breadcrumb-list{
		margin-bottom: 25px;
	}

	.product-single-title h1{
		font-size: 26px;
	}

	.product-single-manufacturing-year ul{
		gap: 10px;
	}

	.product-single-manufacturing-year ul li label{
		padding: 8px 16px;
	}

	.qty-box{
		padding: 10px 12px;
	}

	.product-single-content-btn .btn-default{
		padding: 15px 15px;
	}

	.product-single-action ul li a{
		padding: 10px 15px;
	}

	.product-single-share{
		padding-top: 20px;
		margin-top: 20px;
	}

	.product-single-review-box{
		margin-top: 60px;
	}

	.product-step-nav{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.product-step-nav ul li .nav-link{
		font-size: 18px;
	}

	.product-step-nav ul li .nav-link::before{
		bottom: -21px;
	}

	.product-tab-item-box h2{
		font-size: 30px;
		margin-bottom: 10px;
	}

	.product-tab-item-box p{
		margin-bottom: 10px;
	}

	.product-additional-content-title{
		margin-bottom: 20px;
	}

	.product-additional-info-table table tr td{
		padding: 15px 20px;
	}

	.review-form,
	.customer-review-list{
		width: 100%;
	}

	.customer-review-item{
		margin-bottom: 30px;
	}

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

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

	.review-form .form-control{
		padding: 10px 15px;
	}

	.review-form .btn-default{
		padding: 14px 20px;
	}

	.related-products{
		padding: 25px 0 25px;
	}

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

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

	.cart-item-image-content{
		gap: 15px;
	}

	.cart-item-info-content{
		width: calc(100% - 105px);
	}

	.cart-item-buttons{
		gap: 15px 30px;
		margin-top: 30px;
	}

	.cart-item-buttons .btn-default{
		padding: 14px 16px 14px 40px;
	}

	.cart-item-buttons .btn-default.btn-update::before,
	.cart-item-buttons .btn-default.btn-clear::before{
		left: 14px;
		font-size: 16px;
	}

	.interested-products-box{
		margin-top: 50px;
	}

	.interested-products-box-title{
		margin-bottom: 20px;
	}

	.interested-products-box-title h2{
		font-size: 30px;
	}

	.interested-products-box .product-item-list .product-item{
		width: calc(50% - 10px);
	}

	.order-summary-promocode-form{
		margin-bottom: 20px;
	}

	.order-summary-promocode-form .form-group button.btn-default{
		padding: 9px 15px;
		min-width: 80px;
	}

	.order-checkout-button .btn-default{
		padding: 15px;
	}

	.page-order-receive{
        padding: 50px 0;
    }

    .order-receive-title-box h2{
        font-size: 30px;
    }

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

	.checkout-login-box{
		margin-bottom: 30px;
	}

	.checkout-accordion-header .checkout-accordion-button{
		padding: 12px 35px 12px 15px;
	}

	.checkout-accordion-header .checkout-accordion-button::after,
	.checkout-accordion-header .checkout-accordion-button.collapsed::after{
		right: 15px;
	}

	.checkout-accordion-body{
		margin-top: 20px;
	}

	.checkout-accordion-body-content{
		margin-bottom: 20px;
	}

	.checkout-login-form-footer .checkout-login-btn .btn-default{
		padding: 15px 20px;
	}

	.checkout-bill-address-form .form-group,
	.checkout-login-form .form-group{
		margin-bottom: 20px;
	}

	.checkout-bill-address-form .form-group label,
	.checkout-login-form .form-group label{
		margin-bottom: 10px;
	}

	.checkout-bill-address-form .form-control,
	.checkout-login-form .form-control{
		padding: 12px 15px;
	}

	.checkout-bill-address-form select.form-control{
		padding: 12px 35px 12px 15px;
	}

	.checkout-form-checkbox.different-address-note{
		margin-top: 15px;
	}

	.checkout-form-checkbox.different-address-note label{
		margin-bottom: 0;
	}

	.checkout-coupeon-accordion{
		margin-bottom: 20px;
	}

	.coupeon-accordion-header .coupeon-accordion-button{
		padding: 12px 35px 12px 15px;
	}

	.coupeon-accordion-header .coupeon-accordion-button::after,
	.coupeon-accordion-header .coupeon-accordion-button.collapsed::after{
		right: 15px;
	}

	.coupeon-accordion-body{
		margin-top: 20px;
	}

	.coupeon-accordion-body-content{
		margin-bottom: 15px;
	}

	.coupeon-apply-form .form-control{
		padding: 7px 18px 7px 35px;
	}

	.coupeon-apply-btn .btn-default{
		padding: 10px 15px;
	}

	.product-total-order-title{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.product-total-item,
	.all-product-total{
		margin-top: 15px;
		padding-top: 15px;
	}

	.order-summary-shipment-info ul li{
		margin-bottom: 10px;
	}

	.place-order-button .btn-default{
		padding: 15px 20px;
	}

	.page-my-account{
        padding: 50px 0;
    }

    .my-account-sidebar-item ul li{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .account-dashboard-detail-box p{
        margin-bottom: 15px;
    }

	.page-account-order{
        padding: 60px 0;
    }
    
    .account-order-button{
        margin-top: 30px;
    }

	.page-account-view-order{
        padding: 50px 0;
    }

    ul.view-order-product-info-list li{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .view-order-address-item-list{
        margin-top: 40px;
    }

    .view-order-address-item ul li{
        margin-bottom: 15px;
    }

	.page-product-download{
		padding: 50px 0;
	}

	.page-my-account-address{
        padding: 50px 0;
    }
    
    .account-address-content-header{
        margin-bottom: 30px;
    }

    .account-address-item{
        margin-bottom: 30px;
    }

    .account-address-item-title{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .account-address-item-info-list ul li{
        margin-bottom: 15px;
    }

	.page-account-addresses{
        padding: 50px 0;
    }

	.page-account-details{
        padding: 50px 0;
    }

    .account-details-content-item{
        margin-bottom: 30px;
    }

	.page-account-wishlist{
        padding: 50px 0;
    }

    .wishlist-content-button{
        margin-top: 30px;
    }

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

    .login-content-form-item{
        width: 100%;
    }

    .login-content-title-box{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .login-content-title-box h2{
        font-size: 30px;
    }

    .login-content-title-box p{
        margin: 10px 0 0;
    }

	.login-form-content .checkout-login-form-footer .checkout-login-btn .btn-default{
		padding: 15px 36px 15px 14px;
	}

    .login-content-form-btn{
        margin-top: 20px;
    }

    .login-content-form-btn a{
        font-size: 18px;
    }

    .signup-form-btn{
        margin-top: 20px;
    }

	.signup-form-btn .btn-default{
		padding: 15px 20px;
	}

	.page-forgot-password{
        padding: 50px 0;
    }

	.page-privacy-policy{
		padding: 50px 0;
	}

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

	.sidebar-cta-box h2{
		max-width: 100%;
	}

	.privacy-policy-entry-header{
		margin-bottom: 40px;
	}
	
	.privacy-policy-entry-header h3{
		margin-bottom: 15px;
	}	

	.privacy-policy-entry-item{
		margin-bottom: 40px;
	}

	.privacy-policy-entry-item-content-box{
		margin-bottom: 30px;
	}

	.privacy-policy-entry-item-content-box h3{
		margin-bottom: 15px;
	}

	.privacy-policy-entry-item-content-box p{
		margin-bottom: 10px;
	}

	.privacy-policy-entry-item-content-box ul{
		margin-bottom: 15px;
	}

	.page-terms-conditions{
        padding: 50px 0;
    }

	.page-refund-return-policy{
        padding: 50px 0;
    }

	.page-cancellation-policy{
        padding: 50px 0;
    }

	.page-delivery-policy{
        padding: 50px 0;
    }

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

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

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

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

	.google-map{
		padding: 25px 0 50px;
	}

	.google-map-iframe{
		height: 450px;
	}

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

	.empty-cart-page{
		padding: 50px 0px;
	}
	
	.empty-cart-page-image{
		margin-bottom: 20px;
	}
}

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

	.navbar{
		gap: 15px;
	}

	.header-action-box{
		width: calc(100% - 53px);
		gap: 15px;
	}

	.navbar-brand img{
		max-width: 120px;
	}

	.header-search-form-box{
        max-width: max-content;
        padding: 0 5px;
    }

	.header-search-form .form-group .form-control{
        width: 125px;
		font-size: 12px;
        padding: 10px 0;
    }

	.header-search-form .form-group .header-search-btn i{
        font-size: 14px;
    }

	.slicknav_menu ul.dropdown-menu{
		padding: 20px 15px;
	}

	.mega-menu-links-box{
		gap: 20px;
	}

	.mega-menu-link{
        width: calc(50% - 10px);
    }

	.mega-menu-link h2{
		font-size: 18px;
	}

	.slicknav_menu .mega-menu-link ul li a{
		font-size: 14px;
	}

	.mega-menu-items-list{
		gap: 20px;
	}

	.mega-menu-item{
		width: calc(50% - 10px);
	}

	.slicknav_menu .mega-menu-item-content h2 a,
	.mega-menu-item-content h2{
		font-size: 18px;
	}

	.mega-menu-item-content p{
		font-size: 14px;
	}

	.mega-menu-item.big-offer-box{
		width: 100%;
		min-height: 180px;
	}

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

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

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

	.hero-content-body{
		gap: 20px;
	}

	.find-parts-form-box{
		padding: 15px 0;
	}

	.find-parts-box-title h2{
		font-size: 18px;
	}

	.find-parts-form .form-control,
	.find-parts-form .form-button{
		width: calc(50% - 5px);
	}

	.category-item-list{
		gap: 15px;
	}

	.category-item{
		width: calc(50% - 7.5px);
		flex-direction: column;
		text-align: center;
		padding: 10px;
	}

	.category-item-content{
		width: 100%;
	}

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

	.category-highlighted-item-list{
		gap: 15px;
        margin-top: 15px;
    }

	.category-highlighted-item{
		width: 100%;
	}

	.category-highlighted-item-content h2{
		font-size: 24px;
	}

	.category-highlighted-item-content h3{
		font-size: 18px;
		margin-top: 10px;
	}

	.latest-update-item{
		width: 100%;
		min-height: 220px;
		padding: 20px;
	}

	.latest-update-item-content-box .section-title{
		margin-bottom: 15px;
	}

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

	.product-item-list{
		gap: 8px;
	}

	.product-item{
		width: calc(50% - 4px);
		border-radius: 14px;
		padding: 5px;
	}

	.product-item-action{
		transform: translateY(10px);
	}

	.product-item:hover .product-item-action{
		transform: translateY(-10px);
	}

	.product-item-action ul li a{
		width: 26px;
		height: 26px;
	}

	.product-item-action ul li a img{
		max-width: 14px;
	}

	.product-item-content{
		padding: 5px;
	}

	.product-item-content h2{
		font-size: 16px;
	}

	.product-item-content p{
		font-size: 12px;
		margin: 5px 0 0;
	}

	.product-item-content h3{
		font-size: 16px;
	}

	.product-item-content h3 span{
		font-size: 14px;
		margin-left: 5px;
	}

	.essential-auto-parts-image figure img{
		aspect-ratio: 1 / 0.9871;
	}

	.essential-auto-part-info-box{
		right: 10px;
		bottom: 10px;
		left: 10px;
		padding: 15px;
		width: auto;
	}

	.essential-auto-part-info-box h3{
		font-size: 24px;
		margin-bottom: 10px;
	}

	.essential-auto-part-info-box ul li{
		font-size: 14px;
		margin-bottom: 5px;
	}

	.essential-auto-parts-item-list{
		gap: 15px;
	}

	.essential-auto-parts-item{
		width: calc(50% - 7.5px);
	}

	.essential-auto-parts-item-title{
		padding: 5px;
	}

	.essential-auto-parts-item-title h3{
		font-size: 18px;
	}

	.offer-item,
	.offer-item.highlighted-box{
		width: 100%;
		padding: 20px;
	}

	.brand-item{
		width: calc(50% - 5px);
		border-radius: 14px;
	}

	.brand-item-image{
        padding: 15px;
    }

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

	.faq-accordion .accordion-header .accordion-button{
		font-size: 16px;
		padding: 12px 45px 12px 15px;
	}

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

	.faq-accordion .accordion-item .accordion-body{
		padding: 12px 15px;
	}

	.featured-service-item{
		width: 100%;
		padding: 20px 15px;
	}

	.featured-service-item-body .section-title h2{
		font-size: 22px;
	}

	.testimonial-item{
		width: 100%;
		gap: 20px;
		padding: 20px;
	}

	.google-review-header h2{
		font-size: 26px;
	}

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

	.testimonial-item-rating i{
		font-size: 16px;
	}

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

	.contact-now-info-item-list{
		gap: 20px;
	}

	.contact-now-info-item::before{
		display: none;
	}

	.contact-now-info-item-content h3{
		font-size: 18px;
	}

	.contact-now-social-icons{
		gap: 20px;
		margin-top: 20px;
        padding-top: 20px;
	}

	.contact-now-social-icons h3{
		font-size: 18px;
	}

	.contact-now-social-icons ul{
		gap: 10px;
	}

	.contact-now-social-icons ul li a{
		width: 36px;
		height: 36px;
	}

	.contact-now-social-icons ul li i{
		font-size: 16px;
	}

	.contact-form{
		padding: 20px;
	}

	.contact-form label{
		margin-bottom: 10px;
	}

	.post-item{
		width: 100%;
	}

	.post-item-content h2{
		font-size: 18px;
	}

	.footer-links{
		max-width: 100%;
		flex-grow: inherit;
	}

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

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

	.footer-newsletter-box{
		width: 100%;
		max-width: 100%;
	}

	.footer-contact-item-list{
		margin-top: 20px;
		padding-top: 20px;
	}

	.footer-contact-item-list ul li{
		margin-bottom: 10px;
	}

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

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

	.process-item{
		width: 100%;
		gap: 20px;
		padding: 20px 20px 40px;
	}

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

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

	.process-item-number{
		bottom: -20px;
	}

	.process-item-number h2{
		font-size: 70px;
	}

	.intro-video-bg-video{
		height: 350px;
	}

	.intro-video-content-box .video-play-button a span{
		width: 50px;
		height: 50px;
	}

	.intro-video-content-box .video-play-button a span i{
		font-size: 20px;
	}

	.team-item{
		width: 100%;
	}

	.team-item-image{
		margin-bottom: 10px;
	}

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

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

	.exclusive-offer-item{
		flex-direction: column-reverse;
	}

	.exclusive-offer-item-image,
	.exclusive-offer-item-body{
		width: 100%;
	}

	.exclusive-offer-item-image figure{
		margin: -0px -35px -110px -35px;
	}

	.exclusive-offer-item-image figure img{
		aspect-ratio: 1 / 0.85;
	}

	.exclusive-offer-item-body .section-title h2{
		font-size: 22px;
	}

	.post-single-meta ol li,
	.post-single-meta ol li i{
		font-size: 16px;
	}

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

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

	.post-entry blockquote{
		background-position: 15px 15px;
		background-size: 35px;
		padding: 55px 15px 15px 15px;
	}

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

	.page-single-sidebar .product-category-filter-header{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .product-category-item-title{
        font-size: 18px;
    }

    .product-category-result-info{
        width: 100%;
        justify-content: space-between;
    }

    .product-category-sorting-list .form-select{
        min-width: auto;
    }

    .page-products .product-item-list{
		gap: 8px;
	}

    .page-products .product-item-list .product-item{
        width: calc(50% - 4px);
    }

	.product-single-breadcrumb-list{
		margin-bottom: 30px;
	}

	.product-single-breadcrumb-list ol{
		gap: 10px 40px;
	}

	.product-single-breadcrumb-list ol li{
		font-size: 14px;
	}

	.product-single-breadcrumb-list .breadcrumb li::before{
		right: -24px;
		width: 10px;
		height: 10px;
	}

	.product-single-image-box{
		flex-direction: column-reverse;
	}

	.product-single-image-slider{
		width: 100%;
	}

	.product-single-image-slider .swiper-wrapper{
		flex-direction: initial;
	}

	.product-single-image-slider .swiper-slide{
		width: calc(33.33% - 6.66px) !important;
	}

	.product-single-image-item{
		width: 100%;
	}

	.product-single-title h1{
		font-size: 26px;
	}

	.product-single-price h2{
		font-size: 18px;
	}

	.product-single-price h2 sub{
		font-size: 14px;
	}

	.product-single-content-body{
		gap: 10px;
	}

	.qty-box{
		gap: 5px;
		padding: 9px 10px;
	}

	.qty-btn{
		font-size: 22px;
	}

	.product-single-action{
		margin-left: 0;
	}

	.product-single-action ul{
		gap: 10px;
	}

	.product-single-action ul li a{
		padding: 10px;
	}

	.product-step-nav .nav-tabs{
		gap: 15px;
	}

	.product-step-nav ul li{
		width: calc(33.33% - 10px);
	}

	.product-step-nav ul li .nav-link{
		font-size: 16px;
	}

	.product-step-nav ul li .nav-link::before{
		display: none;
	}

	.product-tab-item-box h2{
		font-size: 26px;
	}

	.product-additional-content-title{
        margin-bottom: 15px;
    }

	.product-additional-info-table table tr td{
		min-width: 100%;
		font-size: 14px;
		padding: 12px 10px;
	}

	.cart-item-header{
        display: none;
    }

    .cart-item-image-content,
    .cart-item-quantity-total{
        width: 100%;
    }

	.cart-item-quantity-total{
		justify-content: left;
	}

    .cart-item-image{
        width: 75px;
        height: 75px;
    }

    .cart-item-info-content{
        width: calc(100% - 95px);
    }
    
    .cart-item-title{
		width: 100%;
        max-width: 100%;
    }

    .cart-item-subtotal{
        width: auto;
    }

    .interested-products-box-title h2{
        font-size: 26px;
    }

	.interested-products-box .product-item-list .product-item{
		width: calc(50% - 4px);
	}

	.interested-products-box .product-item-list .product-item .product-item-content{
		padding: 5px;
	}

    .order-summary-content-box{
        padding: 5px;
    }

    .order-summary-box-title{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.order-summary-box-title h2,
    .order-summary-total h3,
    .order-summary-shipment-info h3{
        font-size: 18px;
    }

    .order-summary-promocode-form .form-group .form-control{
        background-size: 14px auto;
        background-position: left 6px center;
        padding: 8px 10px 8px 28px;
    }

	.order-receive-sidebar{
		padding: 20px;
	}

	.order-sidebar-item-title{
		font-size: 18px;
	}
	
    .order-receive-sidebar-item ul li{
        margin-bottom: 10px;
    }

    .order-receive-box ul li{
        padding-bottom: 10px;
    }

    .order-receive-title-box h2{
        font-size: 26px;
    }

	.order-receive-title-box p{
		font-size: 18px;
	}

    .order-receive-content-list ul li{
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .order-receive-content-list ul li span{
        width: auto;
    }

	.checkout-accordion-header .checkout-accordion-button{
		font-size: 14px;
	}

	.checkout-bill-address-form .form-group label,
	.checkout-login-form .form-group label{
		font-size: 14px;
	}

	.checkout-bill-address-title{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.checkout-bill-address-title h2{
        font-size: 18px;
    }

	.checkout-form-checkbox.different-address-note{
		margin-top: 10px;
	}

	.product-total-order-box{
		padding: 5px;
	}
	
	.coupeon-accordion-header .coupeon-accordion-button{
		font-size: 14px;
	}

	.coupeon-apply-form .form-group{
		min-width: 160px;
	}

	.coupeon-apply-form .form-control{
		font-size: 14px;
		padding: 5px 10px;
        background-image: none;
	}

	.coupeon-apply-btn .btn-default{
		font-size: 14px;
	}

	.product-total-order-title h3{
        font-size: 18px;
    }
	
	.order-payment-info-item p{
		font-size: 14px;
	}

	.my-account-sidebar-item{
		padding: 20px;
	}

	.my-account-sidebar-item ul li img{
		max-width: 22px;
	}

	p.account-dashboard-detail-title{
		font-size: 18px;
	}

	.account-order-table-box table{
        min-width: 630px;
        margin-bottom: 15px;
    }
    
    .account-order-table-box table tr th{
        min-width: auto;
        padding: 0 10px 15px 0;
    }
    
    .account-order-table-box table tr td{
        padding: 15px 10px 15px 0;
    }

    .account-order-table-box table tr td .btn-default{
        padding: 6px 20px;
    }

	.view-order-product-info-box .cart-item-header{
        display: flex;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .view-order-product-info-box .product-header-tag{
        width: calc(56% - 6.67px);
    }

    .view-order-product-info-box .quantity-header-tag,
    .view-order-product-info-box .subtotal-header-tag{
        width: calc(22% - 6.67px);
		text-align: center;
    }

    .view-order-product-info-box .cart-item-image-content{
        width: calc(62% - 5px);
    }
    
    .view-order-product-info-box .cart-item-quantity-total{
        width: calc(38% - 5px);
		justify-content: space-evenly;
    }

    .view-order-product-info-box .cart-item-subtotal{
        width: auto;
    }

	.view-order-address-item{
        width: 100%;
    }

    ul.view-order-product-info-list li span{
        width: 45%;
    }    

	.view-order-address-item h2{
		font-size: 18px;
	}

    .view-order-address-item ul{
        margin-top: 15px;
        padding-top: 15px;
    }

	.view-order-address-item ul li{
        margin-bottom: 10px;
    }

	.account-address-item-title h2{
		font-size: 18px;
	}

    .account-address-item-info-list ul li{
        margin-bottom: 10px;
    }

	.wishlist-item-header{
        display: none;
    }

    .wishlist-item{
        align-items: start;
    }

    .wishlist-item-image-content{
        width: calc(75% - 5px);
    }

    .wishlist-item-title p{
        max-width: 100%;
    }

    .wishlist-item-price{
        width: 100%;
    }

    .wishlist-item-status-action{
        flex-direction: column;
        width: calc(25% - 5px);
        align-items: end;
        text-align: end;
    }

    .wishlist-item-action{
        width: 100%;
    }

    .wishlist-item-action a i{
        font-size: 20px;
    }

	.login-content-title-box h2{
        font-size: 26px;
    }

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

	.privacy-policy-entry-header h3{
		font-size: 18px;
	}

	.privacy-policy-entry-item{
        margin-bottom: 30px;
    }

	.privacy-policy-entry-item .section-title{
		margin-bottom: 20px;
	}

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

/* css */

.sale-off-tag {
    display: flex;
    align-items: center;
    gap: 10px; /* Two paragraphs ki maduve spacing */
}

.sale-off-tag p {
    display: inline-block;
    margin: 0;
    white-space: nowrap; /* Text break agade iruke */
}
.testimonial-author-content h2{
	color:black;
}


/* overview */
 :root {
            --brand-blue: #004c9e;
            --brand-green: #80c348;
            --brand-cyan: #22c4f4;
            --brand-dark: #0a192f;
            --brand-light: #f4f8fd;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            background-color: #fff;
        }

        /* Hero Banner Section */
        .woojin-page-hero {
            background: linear-gradient(135deg, rgba(0, 76, 158, 0.92), rgba(10, 25, 47, 0.95)), url('images/factory-bg.jpg') center/cover no-repeat;
            padding: 100px 0 80px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .woojin-page-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(to right, var(--brand-blue), var(--brand-cyan), var(--brand-green));
        }

        .woojin-hero-badge {
            background: rgba(128, 195, 72, 0.2);
            color: var(--brand-green);
            border: 1px solid var(--brand-green);
            padding: 6px 18px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 20px;
        }

        .woojin-hero-title {
            font-size: 44px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .woojin-hero-desc {
            font-size: 18px;
            color: #e0e6ed;
            max-width: 750px;
            line-height: 1.7;
        }

        /* Stats Strip */
        .woojin-stats-strip {
            background: #ffffff;
            margin-top: -40px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 76, 158, 0.12);
            padding: 30px 20px;
            position: relative;
            z-index: 10;
            border-bottom: 3px solid var(--brand-cyan);
        }

        .woojin-stat-item {
            text-align: center;
            border-right: 1px solid #eef2f6;
        }

        .woojin-stat-item:last-child {
            border-right: none;
        }

        .woojin-stat-item h3 {
            font-size: 34px;
            font-weight: 800;
            color: var(--brand-blue);
            margin-bottom: 5px;
        }

        .woojin-stat-item p {
            font-size: 14px;
            color: #666;
            margin: 0;
            font-weight: 600;
        }

        /* Overview Section Cards */
        .woojin-overview-sec {
            padding: 90px 0 60px;
            background: var(--brand-light);
        }

        .woojin-sec-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .woojin-sec-sub {
            color: var(--brand-blue);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 13px;
            display: block;
            margin-bottom: 8px;
        }

        .woojin-sec-main {
            font-size: 36px;
            font-weight: 800;
            color: #111;
        }

        .woojin-feature-card {
            background: #ffffff;
            padding: 35px 25px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            border: 1px solid #eef2f7;
            height: 100%;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .woojin-feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 76, 158, 0.12);
            border-color: var(--brand-cyan);
        }

        .woojin-card-icon-wrap {
            width: 65px;
            height: 65px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            margin-bottom: 22px;
        }

        .woojin-feature-card h4 {
            font-size: 20px;
            font-weight: 700;
            color: #111;
            margin-bottom: 12px;
        }

        .woojin-feature-card p {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* Share Distribution Bar Section */
        .woojin-share-box {
            background: #ffffff;
            border-radius: 16px;
            padding: 35px;
            box-shadow: 0 10px 30px rgba(0, 76, 158, 0.06);
            margin-top: 40px;
            border-left: 5px solid var(--brand-green);
        }

        .woojin-share-progress-bar {
            height: 18px;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            background: #eef2f6;
            margin: 20px 0;
        }

        .share-hmi { background: var(--brand-blue); width: 71.9%; }
        .share-kin { background: var(--brand-green); width: 23.5%; }
        .share-mobis { background: var(--brand-cyan); width: 4.6%; }

        .share-legend {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
        }

        .share-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 14px;
        }

        .dot-hmi { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-blue); }
        .dot-kin { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-green); }
        .dot-mobis { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-cyan); }

        /* History Timeline Section */
        .woojin-history-sec {
            padding: 90px 0;
            background: #ffffff;
        }

        .woojin-timeline-container {
            position: relative;
            max-width: 1200px;
            margin: 40px auto 0;
        }

        .woojin-timeline-container::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 4px;
            background: linear-gradient(to bottom, var(--brand-blue), var(--brand-cyan), var(--brand-green));
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .woojin-t-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50px;
            position: relative;
        }

        .woojin-t-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        .woojin-t-badge {
            position: absolute;
            left: 70%;
            transform: translateX(-50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--brand-blue);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            border: 4px solid #fff;
            box-shadow: 0 0 0 4px rgba(0, 76, 158, 0.2);
            z-index: 5;
        }

        .woojin-t-content {
            width: 70%;
background: linear-gradient(135deg, #76d1f6 0%, #bed739 100%);
            padding: 28px;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            border: 1px solid #edf2f7;
            position: relative;
            transition: all 0.3s ease;
        }

        .woojin-t-row:nth-child(odd) .woojin-t-content {
            border-top: 4px solid var(--brand-blue);
        }

        .woojin-t-row:nth-child(even) .woojin-t-content {
            border-top: 4px solid var(--brand-green);
        }

        .woojin-t-content:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 76, 158, 0.12);
        }

        .woojin-t-year {
            display: inline-block;
            background: rgba(34, 196, 244, 0.12);
            color: var(--brand-blue);
            font-weight: 800;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 13px;
            margin-bottom: 12px;
        }

        .woojin-t-content h4 {
            font-size: 20px;
            font-weight: 700;
            color: #111;
            margin-bottom: 10px;
        }

        .woojin-t-content p {
            font-size: 17px;
            color: #555;
            line-height: 1.6;
            margin: 0;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .woojin-hero-title { font-size: 32px; }
            .woojin-stat-item { border-right: none; border-bottom: 1px solid #eef2f6; padding: 15px 0; }
            .woojin-timeline-container::before { left: 20px; }
            .woojin-t-badge { left: 20px; transform: none; }
            .woojin-t-row, .woojin-t-row:nth-child(even) {
                flex-direction: column;
                align-items: flex-start;
                padding-left: 55px;
            }
            .woojin-t-content { width: 100%; }
        }

		/* vision */

        :root {
            --brand-blue: #004c9e;
            --brand-green: #80c348;
            --brand-cyan: #22c4f4;
            --brand-dark: #0a192f;
            --brand-light-grad: linear-gradient(135deg, #f4f8fd 0%, #edf4fc 100%);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            background-color: #fcfdfd;
        }

        /* Unique Hero Banner */
        .woojin-vs-hero {
            background: linear-gradient(135deg, rgba(0, 76, 158, 0.95), rgba(10, 25, 47, 0.98)), url('images/factory-bg.jpg') center/cover no-repeat;
            padding: 110px 0 90px;
            color: #fff;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .woojin-vs-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(to right, var(--brand-blue), var(--brand-cyan), var(--brand-green));
        }

        .woojin-vs-badge {
            background: rgba(34, 196, 244, 0.15);
            color: var(--brand-cyan);
            border: 1px solid var(--brand-cyan);
            padding: 8px 22px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(34, 196, 244, 0.2);
        }

        .woojin-vs-title {
            font-size: 46px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .woojin-vs-desc {
            font-size: 18px;
            color: #d1dbe5;
            max-width: 750px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* Philosophy & Goal Section with Glowing Cards */
        .woojin-philosophy-sec {
            padding: 90px 0 60px;
            background: var(--brand-light-grad);
        }

        .woojin-phi-card {
            background: #ffffff;
            border-radius: 24px;
            padding: 45px 35px;
            box-shadow: 0 15px 40px rgba(0, 76, 158, 0.08);
            border: 2px solid transparent;
            transition: all 0.4s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .woojin-phi-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0, 76, 158, 0.15);
            border-color: var(--brand-cyan);
        }

        .woojin-phi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
        }

        .woojin-phi-card.goal-card::before {
            background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan));
        }

        .woojin-phi-icon {
            width: 70px;
            height: 70px;
            border-radius: 18px;
            background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 25px;
            box-shadow: 0 10px 20px rgba(0, 76, 158, 0.2);
        }

        .goal-card .woojin-phi-icon {
            background: linear-gradient(135deg, var(--brand-green), var(--brand-cyan));
            box-shadow: 0 10px 20px rgba(128, 195, 72, 0.2);
        }

        .woojin-phi-card h3 {
            font-size: 24px;
            font-weight: 800;
            color: #111;
            margin-bottom: 15px;
        }

        .woojin-phi-card p {
            font-size: 15px;
            color: #555;
            line-height: 1.7;
            margin: 0;
        }

        /* 4 Strategy Pillars Section */
        .woojin-strategy-sec {
            padding: 90px 0;
            background: #ffffff;
        }

        .woojin-sec-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .woojin-sec-sub {
            color: var(--brand-blue);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 13px;
            display: block;
            margin-bottom: 8px;
        }

        .woojin-sec-main {
            font-size: 38px;
            font-weight: 800;
            color: #111;
        }

        .woojin-strat-card {
            background: var(--brand-light-grad);
            border-radius: 20px;
            padding: 40px 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            border: 1px solid #e2edf7;
            position: relative;
            height: 100%;
            transition: all 0.4s ease;
        }

        .woojin-strat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 45px rgba(0, 76, 158, 0.15);
            background: #ffffff;
            border-color: var(--brand-blue);
        }

        .woojin-strat-num {
            position: absolute;
            top: 25px;
            right: 25px;
            font-size: 32px;
            font-weight: 900;
            color: rgba(0, 76, 158, 0.08);
        }

        .woojin-strat-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            background: #fff;
            color: var(--brand-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 25px;
            box-shadow: 0 8px 20px rgba(0, 76, 158, 0.1);
            transition: all 0.3s ease;
        }

        .woojin-strat-card:hover .woojin-strat-icon {
            background: var(--brand-blue);
            color: #fff;
        }

        .woojin-strat-card h4 {
            font-size: 20px;
            font-weight: 700;
            color: #111;
            margin-bottom: 12px;
        }

        .woojin-strat-card p {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .woojin-bullet-list {
            list-style: none;
            padding: 0;
            margin: 0;
            border-top: 1px dashed #cbd5e1;
            padding-top: 18px;
        }

        .woojin-bullet-list li {
            font-size: 15px;
            color: #444;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }

        .woojin-bullet-list li i {
            color: var(--brand-green);
            font-size: 14px;
        }

        /* Core Values Interactive Banner */
        .woojin-values-banner {
            background: linear-gradient(135deg, var(--brand-blue), #002d62);
            color: #fff;
            padding: 70px 30px;
            border-radius: 24px;
            margin: 0 15px 90px;
            text-align: center;
            box-shadow: 0 20px 45px rgba(0, 76, 158, 0.25);
            position: relative;
            overflow: hidden;
        }

        .woojin-values-banner h3 {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .woojin-values-tags {
            display: flex;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .woojin-v-tag {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.25);
            padding: 12px 28px;
            border-radius: 35px;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

        .woojin-v-tag:hover {
            background: var(--brand-green);
            border-color: var(--brand-green);
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(128, 195, 72, 0.3);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .woojin-vs-title { font-size: 32px; }
            .woojin-phi-card { padding: 30px 20px; margin-bottom: 20px; }
            .woojin-values-banner { margin: 0 10px 60px; padding: 50px 20px; }
        }
    
		/* certificate */
		:root {
            --brand-blue: #004c9e;
            --brand-green: #80c348;
            --brand-cyan: #22c4f4;
            --brand-dark: #0a192f;
            --brand-light-grad: linear-gradient(135deg, #f4f8fd 0%, #edf4fc 100%);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            background-color: #fcfdfd;
        }

        /* Hero Banner */
        .woojin-cert-hero {
            background: linear-gradient(135deg, rgba(0, 76, 158, 0.95), rgba(10, 25, 47, 0.98)), url('images/factory-bg.jpg') center/cover no-repeat;
            padding: 110px 0 90px;
            color: #fff;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .woojin-cert-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(to right, var(--brand-blue), var(--brand-cyan), var(--brand-green));
        }

        .woojin-cert-badge {
            background: rgba(128, 195, 72, 0.2);
            color: var(--brand-green);
            border: 1px solid var(--brand-green);
            padding: 8px 22px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(128, 195, 72, 0.2);
        }

        .woojin-cert-title {
            font-size: 46px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .woojin-cert-desc {
            font-size: 18px;
            color: #d1dbe5;
            max-width: 750px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* Certifications Display Section */
        .woojin-certs-main-sec {
            padding: 90px 0;
            background: var(--brand-light-grad);
        }

        .woojin-sec-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .woojin-sec-sub {
            color: var(--brand-blue);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 13px;
            display: block;
            margin-bottom: 8px;
        }

        .woojin-sec-main {
            font-size: 38px;
            font-weight: 800;
            color: #111;
        }

        .woojin-cert-card {
            background: #ffffff;
            border-radius: 24px;
            padding: 40px 30px;
            box-shadow: 0 15px 40px rgba(0, 76, 158, 0.08);
            border: 2px solid transparent;
            transition: all 0.4s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .woojin-cert-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0, 76, 158, 0.15);
            border-color: var(--brand-cyan);
        }

        .woojin-cert-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
        }

        .woojin-cert-card.green-theme::before {
            background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan));
        }

        .woojin-cert-icon-wrap {
            width: 70px;
            height: 70px;
            border-radius: 18px;
            background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 25px;
            box-shadow: 0 10px 20px rgba(0, 76, 158, 0.2);
        }

        .woojin-cert-card.green-theme .woojin-cert-icon-wrap {
            background: linear-gradient(135deg, var(--brand-green), var(--brand-cyan));
            box-shadow: 0 10px 20px rgba(128, 195, 72, 0.2);
        }

        .woojin-cert-card h3 {
            font-size: 22px;
            font-weight: 800;
            color: #111;
            margin-bottom: 8px;
        }

        .woojin-cert-standard {
            display: inline-block;
            background: rgba(0, 76, 158, 0.1);
            color: var(--brand-blue);
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            margin-bottom: 18px;
        }

        .woojin-cert-card.green-theme .woojin-cert-standard {
            background: rgba(128, 195, 72, 0.15);
            color: #4a8c16;
        }

        .woojin-cert-card p {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .woojin-cert-features {
            list-style: none;
            padding: 0;
            margin: 0;
            border-top: 1px dashed #cbd5e1;
            padding-top: 18px;
        }

        .woojin-cert-features li {
            font-size: 15px;
            color: #444;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }

        .woojin-cert-features li i {
            color: var(--brand-green);
            font-size: 16px;
        }

        /* Quality Commitment Banner */
        .woojin-quality-banner {
            background: linear-gradient(135deg, var(--brand-blue), #002d62);
            color: #fff;
            padding: 70px 30px;
            border-radius: 24px;
            margin: 0 15px 90px;
            text-align: center;
            box-shadow: 0 20px 45px rgba(0, 76, 158, 0.25);
            position: relative;
            overflow: hidden;
        }

        .woojin-quality-banner h3 {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .woojin-quality-highlights {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .woojin-q-badge {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.25);
            padding: 12px 25px;
            border-radius: 35px;
            font-weight: 700;
            font-size: 16px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .woojin-q-badge i {
            color: var(--brand-green);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .woojin-cert-title { font-size: 32px; }
            .woojin-cert-card { padding: 30px 20px; margin-bottom: 20px; }
            .woojin-quality-banner { margin: 0 10px 60px; padding: 50px 20px; }
        }

		/* contact */
    
    
    
 :root {
            --brand-blue: #004c9e;
            --brand-green: #80c348;
            --brand-cyan: #22c4f4;
            --brand-dark: #0a192f;
            --brand-light-grad: linear-gradient(135deg, #f4f8fd 0%, #edf4fc 100%);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            background-color: #fcfdfd;
        }

        /* Hero Banner */
        .woojin-contact-hero {
            background: linear-gradient(135deg, rgba(0, 76, 158, 0.95), rgba(10, 25, 47, 0.98)), url('images/factory-bg.jpg') center/cover no-repeat;
            padding: 110px 0 90px;
            color: #fff;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .woojin-contact-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(to right, var(--brand-blue), var(--brand-cyan), var(--brand-green));
        }

        .woojin-contact-badge {
            background: rgba(34, 196, 244, 0.2);
            color: var(--brand-cyan);
            border: 1px solid var(--brand-cyan);
            padding: 8px 22px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(34, 196, 244, 0.2);
        }

        .woojin-contact-title {
            font-size: 46px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .woojin-contact-desc {
            font-size: 18px;
            color: #d1dbe5;
            max-width: 750px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* Main Contact Section */
        .woojin-contact-main-sec {
            padding: 90px 0;
            background: var(--brand-light-grad);
        }

        /* Info Cards */
        .woojin-info-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 76, 158, 0.06);
            border: 1px solid #e2edf7;
            height: 100%;
            display: flex;
            gap: 20px;
            align-items: flex-start;
            transition: all 0.3s ease;
        }

        .woojin-info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 76, 158, 0.12);
            border-color: var(--brand-cyan);
        }

        .woojin-info-icon {
            width: 55px;
            height: 55px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
            box-shadow: 0 8px 20px rgba(0, 76, 158, 0.2);
        }

        .woojin-info-content h4 {
            font-size: 18px;
            font-weight: 700;
            color: #111;
            margin-bottom: 8px;
        }

        .woojin-info-content p, .woojin-info-content a {
            font-size: 14px;
            color: #555;
            line-height: 1.6;
            margin: 0;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .woojin-info-content a:hover {
            color: var(--brand-blue);
            font-weight: 600;
        }

        /* Contact Form Box */
        .woojin-form-box {
            background: #ffffff;
            border-radius: 24px;
            padding: 45px;
            box-shadow: 0 15px 40px rgba(0, 76, 158, 0.08);
            border: 1px solid #e2edf7;
            position: relative;
        }

        .woojin-form-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-green));
            border-top-left-radius: 24px;
            border-top-right-radius: 24px;
        }

        .woojin-form-box h3 {
            font-size: 26px;
            font-weight: 800;
            color: #111;
            margin-bottom: 8px;
        }

        .woojin-form-box p {
            color: #666;
            font-size: 14px;
            margin-bottom: 30px;
        }

        .woojin-form-group {
            margin-bottom: 20px;
        }

        .woojin-form-control {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            font-size: 14px;
            background: #f8fafc;
            transition: all 0.3s ease;
        }

        .woojin-form-control:focus {
            outline: none;
            border-color: var(--brand-blue);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(0, 76, 158, 0.1);
        }

        .woojin-submit-btn {
            background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
            color: #fff;
            border: none;
            padding: 15px 35px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(0, 76, 158, 0.2);
        }

        .woojin-submit-btn:hover {
            background: linear-gradient(135deg, #003a78, var(--brand-blue));
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(0, 76, 158, 0.3);
        }

        /* Map Section */
        .woojin-map-container {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 76, 158, 0.08);
            border: 1px solid #e2edf7;
            background: #fff;
            height: 100%;
            min-height: 450px;
        }

        .woojin-map-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
            min-height: 450px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .woojin-contact-title { font-size: 32px; }
            .woojin-form-box { padding: 30px 20px; }
        }


		/* product */


/* ==========================================
   WOOJIN GLOW PLUG PRODUCT PAGE
   Unique prefix: wgp-
   Theme: #004a9e #7fc249 #75d1f6
========================================== */

.wgp-page {
  --wgp-blue: #004a9e;
  --wgp-green: #7fc249;
  --wgp-sky: #75d1f6;
  --wgp-dark: #07182c;
  --wgp-text: #24364b;
  --wgp-muted: #66788c;
  --wgp-light: #f3f8fc;
  --wgp-white: #ffffff;

  font-family: "DM Sans", sans-serif;
  color: var(--wgp-text);
  background: #fff;
  overflow: hidden;
  line-height: 1.7;
}

.wgp-page *,
.wgp-page *::before,
.wgp-page *::after {
  box-sizing: border-box;
}

.wgp-page img {
  display: block;
  max-width: 100%;
}

.wgp-page a {
  text-decoration: none;
}

.wgp-page button {
  font: inherit;
}

.wgp-container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.wgp-section {
  padding: 100px 0;
}

.wgp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wgp-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.wgp-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--wgp-green);
  border-radius: 5px;
}

.wgp-heading {
  margin: 17px 0;
  color: var(--wgp-dark);
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1.5px;
}

.wgp-heading span {
  color: var(--wgp-blue);
}

.wgp-description {
  color: var(--wgp-muted);
  font-size: 16px;
  line-height: 1.9;
}

.wgp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 23px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .3s, background .3s, box-shadow .3s;
}

.wgp-btn:hover {
  transform: translateY(-4px);
}

.wgp-btn-primary {
  background: var(--wgp-green);
  color: #10270b;
  box-shadow: 0 10px 25px rgba(127, 194, 73, .2);
}

.wgp-btn-primary:hover {
  background: #91d55c;
}

.wgp-btn-outline {
  color: white;
  border: 1px solid rgba(255,255,255,.4);
}

.wgp-btn-outline:hover {
  background: rgba(255,255,255,.1);
}

/* HERO */

.wgp-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: var(--wgp-dark);
  color: white;
}

.wgp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4,18,36,.98) 0%,
    rgba(4,24,48,.91) 48%,
    rgba(0,74,158,.48) 100%),
    url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=2000&q=85")
    center/cover no-repeat;
}

.wgp-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  top: 10%;
  right: -150px;
  border: 1px solid rgba(117,209,246,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(117,209,246,.035),
              0 0 0 100px rgba(117,209,246,.025);
  animation: wgp-orbit 18s linear infinite;
  pointer-events: none;
}

.wgp-hero-content {
  padding: 105px 0 125px;
  max-width: 780px;
  animation: wgp-enter .9s ease both;
}

.wgp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

.wgp-breadcrumb a {
  color: var(--wgp-sky);
}

.wgp-breadcrumb span {
  color: var(--wgp-green);
}

.wgp-hero .wgp-eyebrow {
  color: var(--wgp-sky);
}

.wgp-hero h1 {
  margin: 20px 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(34px, 7vw, 56px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -2.5px;
  color: white;
}

.wgp-hero h1 span {
  display: block;
  color: var(--wgp-sky);
}

.wgp-hero-copy {
  max-width: 600px;
  color: rgba(255,255,255,.78);
  font-size: 17px;
  line-height: 1.9;
}

.wgp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.wgp-hero-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  background: rgba(3,17,35,.48);
  backdrop-filter: blur(10px);
}

.wgp-hero-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}

.wgp-hero-bottom p {
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wgp-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--wgp-green);
  box-shadow: 0 0 0 5px rgba(127,194,73,.12);
}

/* INTRO */

.wgp-intro-grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: center;
  gap: 75px;
}

.wgp-intro-visual {
  position: relative;
  min-height: 450px;
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(117,209,246,.3), transparent 42%),
    linear-gradient(145deg, #edf6fc, #dcebf6);
}

.wgp-visual-ring {
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(0,74,158,.2);
  border-radius: 50%;
  animation: wgp-orbit 22s linear infinite;
}

.wgp-visual-ring::before,
.wgp-visual-ring::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(0,74,158,.12);
  border-radius: 50%;
}

.wgp-visual-ring::before {
  inset: 25px;
}

.wgp-visual-ring::after {
  inset: 55px;
}

.wgp-product-visual {
  position: relative;
  z-index: 1;
  width: min(100%, 340px);
  height: 360px;
  display: grid;
  place-items: center;
  animation: wgp-float 5s ease-in-out infinite;
}

.wgp-product-visual svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 20px rgba(0,35,76,.2));
}

.wgp-visual-label {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 20px;
  padding: 10px 15px;
  border: 1px solid rgba(0,74,158,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.9);
  color: var(--wgp-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(0,40,90,.08);
}

.wgp-intro-copy .wgp-description {
  margin: 20px 0;
}

.wgp-feature-list {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}

.wgp-feature {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.wgp-feature-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f5fc;
  color: var(--wgp-blue);
  font-size: 18px;
  font-weight: 800;
}

.wgp-feature strong {
  display: block;
  margin-bottom: 3px;
  color: var(--wgp-dark);
  font-size: 14px;
}

.wgp-feature p {
  margin: 0;
  color: var(--wgp-muted);
  font-size: 13px;
}

/* PRODUCT FUNCTION STRIP */

.wgp-function-section {
  position: relative;
  background: var(--wgp-light);
}

.wgp-section-heading {
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
}

.wgp-section-heading .wgp-eyebrow {
  justify-content: center;
}

.wgp-function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.wgp-function-card {
  position: relative;
  min-height: 255px;
  padding: 32px 27px;
  overflow: hidden;
  border: 1px solid #e1ebf3;
  border-radius: 12px;
  background: white;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}

.wgp-function-card::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(117,209,246,.15);
  transition: transform .4s;
}

.wgp-function-card:hover {
  transform: translateY(-8px);
  border-color: var(--wgp-sky);
  box-shadow: 0 22px 45px rgba(0,48,100,.09);
}

.wgp-function-card:hover::after {
  transform: scale(1.5);
}

.wgp-card-number {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--wgp-blue);
  font-family: "Manrope", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.wgp-function-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: var(--wgp-dark);
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
}

.wgp-function-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--wgp-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* WORKING PRINCIPLE */

.wgp-working-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 75px;
}

.wgp-working-art {
  position: relative;
  min-height: 410px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(145deg, #06366d, #07182c);
}

.wgp-working-art::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(117,209,246,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(117,209,246,.04),
              0 0 0 70px rgba(117,209,246,.03);
}

.wgp-heat-core {
  position: relative;
  width: 120px;
  height: 180px;
  display: grid;
  place-items: center;
  color: #ffb347;
  font-size: 65px;
  animation: wgp-heat 2s ease-in-out infinite alternate;
}

.wgp-heat-core::before {
  content: "";
  position: absolute;
  inset: 10px 25px;
  border: 2px solid var(--wgp-sky);
  border-radius: 40px 40px 15px 15px;
  box-shadow: 0 0 25px rgba(117,209,246,.35);
}

.wgp-heat-core span {
  position: relative;
  z-index: 1;
}

.wgp-art-caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
}

.wgp-step-list {
  display: grid;
  gap: 25px;
  margin-top: 28px;
}

.wgp-step {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;
}

.wgp-step-num {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wgp-blue);
  color: white;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0,74,158,.15);
}

.wgp-step h3 {
  margin: 0 0 5px;
  color: var(--wgp-dark);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

.wgp-step p {
  margin: 0;
  color: var(--wgp-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* APPLICATIONS */

.wgp-applications {
  color: white;
  background: var(--wgp-dark);
}

.wgp-applications .wgp-heading {
  color: white;
}

.wgp-applications .wgp-description {
  color: rgba(255,255,255,.68);
}

.wgp-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.wgp-app-image {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(0deg, rgba(3,17,35,.65), transparent 70%),
    url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1200&q=85")
    center/cover no-repeat;
}

.wgp-image-tag {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 16px 18px;
  border-left: 3px solid var(--wgp-green);
  background: rgba(4,20,40,.82);
  backdrop-filter: blur(8px);
}

.wgp-image-tag strong {
  display: block;
  font-size: 16px;
}

.wgp-image-tag span {
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

.wgp-app-list {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.wgp-app-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  transition: background .3s, transform .3s;
}

.wgp-app-item:hover {
  transform: translateX(6px);
  background: rgba(117,209,246,.09);
}

.wgp-app-check {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(127,194,73,.15);
  color: var(--wgp-green);
  font-weight: 800;
}

.wgp-app-item span:last-child {
  color: rgba(255,255,255,.9);
  font-size: 14px;
}

/* HISTORY */

.wgp-history {
  background: #f4f8fb;
}

.wgp-history-box {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  overflow: hidden;
  border: 1px solid #e0eaf2;
  border-radius: 14px;
  background: white;
  box-shadow: 0 20px 60px rgba(0,48,100,.05);
}

.wgp-history-intro {
  padding: 45px 35px;
  color: white;
  background: var(--wgp-blue);
}

.wgp-history-intro .wgp-eyebrow {
  color: var(--wgp-sky);
}

.wgp-history-intro h2 {
  margin: 20px 0;
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  line-height: 1.25;
}

.wgp-history-intro p {
  color: rgba(255,255,255,.75);
  font-size: 14px;
}

.wgp-history-content {
  padding: 42px;
}

.wgp-timeline {
  position: relative;
  display: grid;
  gap: 27px;
}

.wgp-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 7px;
  width: 2px;
  background: #d9e8f4;
}

.wgp-timeline-item {
  position: relative;
  padding-left: 30px;
}

.wgp-timeline-item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 4px solid white;
  border-radius: 50%;
  background: var(--wgp-green);
  box-shadow: 0 0 0 1px var(--wgp-green);
}

.wgp-timeline-item strong {
  display: block;
  margin-bottom: 5px;
  color: var(--wgp-blue);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
}

.wgp-timeline-item p {
  margin: 0;
  color: var(--wgp-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* FAQ */

.wgp-faq-grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 70px;
}

.wgp-faq-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.wgp-faq-item {
  border: 1px solid #e2ebf3;
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.wgp-faq-item summary {
  position: relative;
  padding: 19px 50px 19px 20px;
  color: var(--wgp-dark);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.wgp-faq-item summary::-webkit-details-marker {
  display: none;
}

.wgp-faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--wgp-blue);
  font-size: 24px;
  font-weight: 400;
  transform: translateY(-50%);
}

.wgp-faq-item[open] summary::after {
  content: "−";
}

.wgp-faq-answer {
  padding: 0 20px 20px;
  color: var(--wgp-muted);
  font-size: 14px;
  line-height: 1.85;
}

/* FINAL CTA */

.wgp-cta {
  position: relative;
  padding: 75px 0;
  overflow: hidden;
  background: linear-gradient(115deg, #004a9e, #06346a);
}

.wgp-cta::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -70px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255,255,255,.035),
              0 0 0 80px rgba(255,255,255,.025);
}

.wgp-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}

.wgp-cta h2 {
  margin: 0 0 12px;
  color: white;
  font-family: "Manrope", sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.25;
}

.wgp-cta p {
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 14px;
}

/* REVEAL ANIMATIONS */

.wgp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}

.wgp-reveal.wgp-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes wgp-enter {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wgp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes wgp-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wgp-heat {
  from { transform: scale(.96); filter: drop-shadow(0 0 5px rgba(255,130,30,.3)); }
  to { transform: scale(1.05); filter: drop-shadow(0 0 22px rgba(255,130,30,.8)); }
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .wgp-section {
    padding: 75px 0;
  }

  .wgp-intro-grid,
  .wgp-working-grid,
  .wgp-app-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wgp-intro-visual {
    min-height: 400px;
  }

  .wgp-working-art {
    min-height: 350px;
  }

  .wgp-function-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wgp-history-box {
    grid-template-columns: 1fr;
  }

  .wgp-history-intro {
    padding: 35px;
  }

  .wgp-faq-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .wgp-hero {
    min-height: 610px;
  }
}

@media (max-width: 600px) {
  .wgp-container {
    width: min(100% - 32px, 1180px);
  }

  .wgp-section {
    padding: 58px 0;
  }

  .wgp-heading {
    font-size: 31px;
    letter-spacing: -.8px;
  }

  .wgp-description {
    font-size: 14px;
  }

  .wgp-hero {
    min-height: 650px;
  }

  .wgp-hero-bg {
    background:
      linear-gradient(90deg, rgba(4,18,36,.94), rgba(4,24,48,.78)),
      url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80")
      center/cover no-repeat;
  }

  .wgp-hero-content {
    padding: 75px 0 115px;
  }

  .wgp-hero h1 {
    font-size: 44px;
    letter-spacing: -1.5px;
  }

  .wgp-hero-copy {
    font-size: 14px;
  }

  .wgp-hero-bottom-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 13px 0;
  }

  .wgp-hero-bottom p {
    font-size: 14px;
  }

  .wgp-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wgp-btn {
    width: 100%;
  }

  .wgp-intro-visual {
    min-height: 330px;
    padding: 15px;
  }

  .wgp-product-visual {
    height: 290px;
  }

  .wgp-visual-ring {
    width: 260px;
    height: 260px;
  }

  .wgp-function-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .wgp-function-card {
    min-height: auto;
    padding: 25px;
  }

  .wgp-function-card h3 {
    font-size: 18px;
  }

  .wgp-app-image {
    min-height: 290px;
  }

  .wgp-history-intro,
  .wgp-history-content {
    padding: 27px 22px;
  }

  .wgp-history-intro h2 {
    font-size: 26px;
  }

  .wgp-cta {
    padding: 55px 0;
  }

  .wgp-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .wgp-cta .wgp-btn {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wgp-page *,
  .wgp-page *::before,
  .wgp-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .wgp-reveal {
    opacity: 1;
    transform: none;
  }
}



/* product 2 */

/* =========================================
   WGD DRIVE MOTOR PARTS — CONCEPT 02
   Unique blueprint / technical editorial design
========================================= */
.wgd-page,
.wgd-page * {
  box-sizing: border-box;
}

.wgd-page {
  --wgd-blue: #004a9e;
  --wgd-green: #7fc249;
  --wgd-sky: #75d1f6;
  --wgd-navy: #071b31;
  --wgd-deep: #0b2744;
  --wgd-white: #fff;
  --wgd-muted: #66788c;
  font-family: Arial, Helvetica, sans-serif;
  color: #12263c;
  background: #fff;
  overflow: hidden;
  line-height: 1.7;
}

.wgd-page a {
  text-decoration: none;
}

.wgd-container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.wgd-section {
  padding: 95px 0;
}

.wgd-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--wgd-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.wgd-eyebrow::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--wgd-green);
}

.wgd-heading {
  margin: 0 0 22px;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -1.8px;
  font-weight: 800;
}

.wgd-heading span {
  color: var(--wgd-blue);
}

.wgd-description {
  margin: 0;
  color: var(--wgd-muted);
  font-size: 15px;
  line-height: 1.95;
}

.wgd-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.wgd-reveal.wgd-show {
  opacity: 1;
  transform: translateY(0);
}

.wgd-delay-a { transition-delay: .12s; }
.wgd-delay-b { transition-delay: .22s; }

/* =========================================
   HERO — DARK BLUEPRINT STAGE
========================================= */
.wgd-hero {
  position: relative;
  color: #fff;
  background: var(--wgd-navy);
  isolation: isolate;
}

.wgd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .2;
  background-image:
    linear-gradient(rgba(117,209,246,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117,209,246,.16) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000, transparent 95%);
}

.wgd-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(117,209,246,.13);
  border-radius: 50%;
  right: -210px;
  top: -260px;
  box-shadow:
    0 0 0 55px rgba(117,209,246,.025),
    0 0 0 110px rgba(117,209,246,.02);
}

.wgd-hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.wgd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #a9c0d7;
  font-size: 11px;
}

.wgd-breadcrumb a {
  color: var(--wgd-sky);
}

.wgd-hero-code {
  color: #a9c0d7;
  font-size: 14px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.wgd-hero-grid {
  min-height: 625px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 30px;
  padding: 60px 0 75px;
}

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

.wgd-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 25px;
  color: var(--wgd-sky);
  border: 1px solid rgba(117,209,246,.35);
  background: rgba(117,209,246,.06);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.wgd-live-dot {
  width: 7px;
  height: 7px;
  background: var(--wgd-green);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(127,194,73,.12);
}

.wgd-hero h1 {
  margin: 0 0 25px;
  color: #fff;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.03;
  letter-spacing: -2.6px;
  font-weight: 900;
}

.wgd-hero h1 span {
  display: block;
  color: var(--wgd-sky);
}

.wgd-hero-copy > p {
  max-width: 510px;
  margin: 0 0 30px;
  color: #b7c9dc;
  font-size: 15px;
  line-height: 1.95;
}

.wgd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wgd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 49px;
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 800;
  transition: .25s ease;
}

.wgd-btn:hover {
  transform: translateY(-3px);
}

.wgd-btn-primary {
  color: #071b31;
  background: var(--wgd-green);
}

.wgd-btn-primary:hover {
  color: #071b31;
  background: #94d568;
}

.wgd-btn-outline {
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}

.wgd-btn-outline:hover {
  color: var(--wgd-sky);
  border-color: var(--wgd-sky);
}

.wgd-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 35px;
  color: #8fa9c2;
  font-size: 13px;
  letter-spacing: .6px;
}

.wgd-meta-line {
  width: 35px;
  height: 1px;
  background: var(--wgd-green);
}

/* Hero product illustration */

.wgd-blueprint-stage {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(117,209,246,.2);
  background:
    linear-gradient(135deg, rgba(117,209,246,.08), transparent 55%),
    rgba(255,255,255,.015);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
}

.wgd-blueprint-stage::before {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px dashed rgba(117,209,246,.16);
  pointer-events: none;
}

.wgd-stage-index {
  position: absolute;
  top: 22px;
  left: 24px;
  color: var(--wgd-sky);
  font-size: 14px;
  letter-spacing: 2px;
}

.wgd-stage-coordinate {
  position: absolute;
  bottom: 24px;
  left: 24px;
  color: #7f9ab5;
  font-size: 9px;
  letter-spacing: 1.6px;
}

.wgd-stage-number {
  position: absolute;
  right: 20px;
  bottom: 15px;
  color: rgba(117,209,246,.18);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
}

.wgd-motor-art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 550px;
  padding: 25px;
  animation: wgd-motor-hover 6s ease-in-out infinite;
}

.wgd-art-label {
  position: absolute;
  z-index: 2;
  padding: 9px 12px;
  color: #d9f3ff;
  border: 1px solid rgba(117,209,246,.3);
  background: #0a2946;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.wgd-art-label-a {
  top: 25%;
  right: 5%;
}

.wgd-art-label-b {
  left: 5%;
  bottom: 23%;
}

.wgd-art-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  background: var(--wgd-green);
  border-radius: 50%;
}

/* Technical bottom strip */

.wgd-hero-strip {
  background: var(--wgd-green);
  color: #102d18;
}

.wgd-hero-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.wgd-strip-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  border-right: 1px solid rgba(16,45,24,.2);
}

.wgd-strip-item:first-child {
  padding-left: 0;
}

.wgd-strip-item:last-child {
  border-right: 0;
}

.wgd-strip-index {
  font-size: 11px;
  font-weight: 900;
  opacity: .6;
}

.wgd-strip-item strong {
  display: block;
  font-size: 15px;
}

.wgd-strip-item span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
}

/* =========================================
   OVERVIEW — SPLIT NUMBERED LAYOUT
========================================= */
.wgd-overview {
  background: #fff;
}

.wgd-overview-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 90px;
  align-items: start;
}

.wgd-overview-aside {
  position: sticky;
  top: 35px;
}

.wgd-overview-aside .wgd-heading {
  font-size: clamp(32px, 4vw, 48px);
}

.wgd-overview-tag {
  margin-top: 28px;
  padding: 20px;
  border-left: 4px solid var(--wgd-green);
  background: #f1f7fc;
  color: #536a82;
  font-size: 15px;
  line-height: 1.9;
}

.wgd-overview-tag strong {
  display: block;
  margin-bottom: 5px;
  color: var(--wgd-blue);
}

.wgd-overview-content > p {
  margin: 0 0 20px;
  color: var(--wgd-muted);
  font-size: 15px;
  line-height: 2;
}

.wgd-detail-list {
  margin-top: 32px;
  border-top: 1px solid #dfe8f0;
}

.wgd-detail-row {
  display: grid;
  grid-template-columns: 65px 1fr;
  gap: 20px;
  padding: 23px 0;
  border-bottom: 1px solid #dfe8f0;
}

.wgd-detail-num {
  color: var(--wgd-blue);
  font-size: 25px;
  line-height: 1.3;
  font-weight: 900;
}

.wgd-detail-row h3 {
  margin: 0 0 7px;
  font-size: 17px;
}

.wgd-detail-row p {
  margin: 0;
  color: var(--wgd-muted);
  font-size: 15px;
  line-height: 1.85;
}

/* =========================================
   ENGINEERING POINTS — HORIZONTAL PANELS
========================================= */
.wgd-engineering {
  background: #f0f6fb;
  position: relative;
}

.wgd-engineering::before {
  content: "ENGINEERING";
  position: absolute;
  right: -20px;
  top: 0;
  color: rgba(0,74,158,.035);
  font-size: clamp(65px, 13vw, 175px);
  font-weight: 900;
  letter-spacing: -5px;
  white-space: nowrap;
  pointer-events: none;
}

.wgd-section-intro {
  max-width: 760px;
  margin-bottom: 45px;
  position: relative;
  z-index: 1;
}

.wgd-section-intro .wgd-description {
  max-width: 670px;
}

.wgd-engineering-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.wgd-engineering-card {
  display: grid;
  /* grid-template-columns: 72px 1fr; */
  gap: 20px;
  min-height: 190px;
  padding: 27px;
  background: #fff;
  border: 1px solid #dce7f1;
  transition: border-color .25s ease, transform .25s ease;
}

.wgd-engineering-card:hover {
  border-color: var(--wgd-blue);
  transform: translateY(-4px);
}

.wgd-engineering-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--wgd-blue);
  background: #e8f5ff;
  font-size: 27px;
}

.wgd-engineering-card:nth-child(even) .wgd-engineering-icon {
  color: #3d6c1b;
  background: #edf7e6;
}

.wgd-engineering-card small {
  color: #8ba0b5;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.wgd-engineering-card h3 {
  margin: 7px 0 8px;
  font-size: 17px;
}

.wgd-engineering-card p {
  margin: 0;
  color: var(--wgd-muted);
  font-size: 15px;
  line-height: 1.9;
}

/* =========================================
   WORKING PRINCIPLE — PROCESS TRACK
========================================= */
.wgd-process {
  color: #fff;
  background: var(--wgd-deep);
  position: relative;
}

.wgd-process .wgd-eyebrow {
  color: var(--wgd-sky);
}

.wgd-process .wgd-heading {
  color: #fff;
}

.wgd-process .wgd-heading span {
  color: var(--wgd-sky);
}

.wgd-process .wgd-description {
  color: #b1c4d8;
}

.wgd-process-top {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 60px;
}

.wgd-process-top .wgd-heading {
  margin-bottom: 0;
}

.wgd-process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.wgd-process-track::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: rgba(117,209,246,.35);
}

.wgd-process-card {
  position: relative;
  padding: 0 20px 0 0;
}

.wgd-process-point {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 25px;
  color: var(--wgd-navy);
  background: var(--wgd-sky);
  border: 5px solid var(--wgd-deep);
  box-shadow: 0 0 0 1px rgba(117,209,246,.5);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.wgd-process-card:nth-child(even) .wgd-process-point {
  background: var(--wgd-green);
  box-shadow: 0 0 0 1px rgba(127,194,73,.5);
}

.wgd-process-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 16px;
}

.wgd-process-card p {
  margin: 0;
  color: #a9bed3;
  font-size: 15px;
  line-height: 1.9;
}

/* =========================================
   APPLICATIONS — LARGE TYPOGRAPHIC LIST
========================================= */
.wgd-applications {
  background: #fff;
}

.wgd-applications-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
}

.wgd-applications-intro {
  align-self: start;
  position: sticky;
  top: 35px;
}

.wgd-application-list {
  border-top: 1px solid #dce7f1;
}

.wgd-application-row {
  display: grid;
  grid-template-columns: 55px 1fr 30px;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #dce7f1;
  transition: padding .25s ease;
}

.wgd-application-row:hover {
  padding-left: 8px;
}

.wgd-application-row > span:first-child {
  color: #8ca1b7;
  font-size: 14px;
  font-weight: 900;
}

.wgd-application-row h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.wgd-application-row p {
  margin: 0;
  color: var(--wgd-muted);
  font-size: 14px;
  line-height: 1.8;
}

.wgd-application-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--wgd-blue);
  background: #eaf5ff;
  border-radius: 50%;
}

/* =========================================
   COMPANY — INFORMATION PANEL
========================================= */
.wgd-company {
  background: #edf4fa;
}

.wgd-company-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
}

.wgd-company-copy > p {
  margin: 0 0 18px;
  color: var(--wgd-muted);
  font-size: 16px;
  line-height: 1.95;
}

.wgd-company-card {
  padding: 34px;
  background: #fff;
  border-top: 5px solid var(--wgd-blue);
  box-shadow: 0 18px 45px rgba(0,50,100,.07);
}

.wgd-company-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.wgd-company-card > p {
  margin: 0 0 22px;
  color: var(--wgd-muted);
  font-size: 13px;
  line-height: 1.9;
}

.wgd-company-facts {
  border-top: 1px solid #e0e9f1;
}

.wgd-company-fact {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #e0e9f1;
  font-size: 14px;
}

.wgd-company-fact strong {
  color: var(--wgd-blue);
}

.wgd-company-fact span {
  color: var(--wgd-muted);
}

.wgd-certifications {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.wgd-certification {
  padding: 7px 9px;
  color: var(--wgd-blue);
  border: 1px solid #cbdff0;
  background: #f4f9fd;
  font-size: 14px;
  font-weight: 800;
}

/* =========================================
   FAQ — CLEAN DETAILS STYLE
========================================= */
.wgd-faq {
  background: #fff;
}

.wgd-faq-grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 75px;
}

.wgd-faq-list {
  border-top: 1px solid #dce7f1;
}

.wgd-faq-item {
  border-bottom: 1px solid #dce7f1;
}

.wgd-faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 21px 45px 21px 0;
  font-size: 14px;
  font-weight: 800;
}

.wgd-faq-item summary::-webkit-details-marker {
  display: none;
}

.wgd-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: var(--wgd-blue);
  background: #eaf5ff;
  font-size: 19px;
  font-weight: 400;
}

.wgd-faq-item[open] summary::after {
  content: "−";
  color: #fff;
  background: var(--wgd-blue);
}

.wgd-faq-answer {
  padding: 0 35px 22px 0;
  color: var(--wgd-muted);
  font-size: 15px;
  line-height: 1.9;
}

/* =========================================
   CTA
========================================= */
.wgd-cta {
  position: relative;
  padding: 65px 0;
  background: var(--wgd-blue);
  color: #fff;
  overflow: hidden;
}

.wgd-cta::after {
  content: "WJ";
  position: absolute;
  top: -60px;
  right: 2%;
  color: rgba(255,255,255,.05);
  font-size: 220px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.wgd-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  position: relative;
  z-index: 1;
}

.wgd-cta .wgd-eyebrow {
  color: var(--wgd-sky);
}

.wgd-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(27px, 3.6vw, 43px);
  line-height: 1.2;
  letter-spacing: -1px;
}

.wgd-cta h2 span {
  color: var(--wgd-sky);
}

.wgd-cta p {
  max-width: 680px;
  margin: 0;
  color: #c5d9ec;
  font-size: 15px;
  line-height: 1.9;
}

.wgd-cta-actions {
  flex: 0 0 auto;
}

.wgd-cta .wgd-btn {
  white-space: nowrap;
}

/* Notice / footer */

.wgd-notice {
  padding: 22px 0;
  background: #f5f8fb;
}

.wgd-notice-box {
  padding: 15px 18px;
  border-left: 3px solid var(--wgd-green);
  color: #687b8e;
  background: #fff;
  font-size: 11px;
  line-height: 1.9;
}

.wgd-notice-box strong {
  color: #17324d;
}

.wgd-footer {
  padding: 23px 0;
  background: #061525;
  color: #fff;
}

.wgd-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.wgd-footer-brand {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.wgd-footer-brand span {
  display: block;
  margin-top: 4px;
  color: var(--wgd-sky);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.3px;
}

.wgd-footer-copy {
  color: #a9bed3;
  font-size: 13px;
  text-align: right;
}

/* Animations */

@keyframes wgd-motor-hover {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1000px) {
  .wgd-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .wgd-blueprint-stage {
    min-height: 400px;
  }

  .wgd-overview-grid,
  .wgd-applications-layout {
    gap: 45px;
  }

  .wgd-process-top {
    gap: 35px;
  }

  .wgd-company-grid {
    gap: 35px;
  }

  .wgd-process-card {
    padding-right: 13px;
  }
}

@media (max-width: 760px) {
  .wgd-container {
    width: calc(100% - 34px);
  }

  .wgd-section {
    padding: 65px 0;
  }

  .wgd-hero-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .wgd-hero-grid {
    grid-template-columns: 1fr;
    padding: 45px 0 35px;
  }

  .wgd-hero h1 {
    font-size: clamp(39px, 9vw, 58px);
    letter-spacing: -1.8px;
  }

  .wgd-hero-copy > p {
    font-size: 14px;
  }

  .wgd-blueprint-stage {
    min-height: 360px;
    margin-top: 15px;
  }

  .wgd-motor-art {
    max-width: 440px;
    padding: 28px;
  }

  .wgd-art-label {
    font-size: 8px;
  }

  .wgd-hero-strip-inner {
    grid-template-columns: 1fr;
  }

  .wgd-strip-item,
  .wgd-strip-item:first-child {
    padding: 15px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(16,45,24,.2);
  }

  .wgd-strip-item:last-child {
    border-bottom: 0;
  }

  .wgd-overview-grid,
  .wgd-applications-layout,
  .wgd-company-grid,
  .wgd-faq-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .wgd-overview-aside,
  .wgd-applications-intro {
    position: static;
  }

  .wgd-engineering-grid {
    grid-template-columns: 1fr;
  }

  .wgd-engineering-card {
    min-height: auto;
  }

  .wgd-process-top {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }

  .wgd-process-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }

  .wgd-process-track::before {
    display: none;
  }

  .wgd-process-card {
    padding-right: 0;
  }

  .wgd-process-point {
    margin-bottom: 17px;
  }

  .wgd-company-card {
    padding: 27px 22px;
  }

  .wgd-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .wgd-cta-actions {
    width: 100%;
  }

  .wgd-cta .wgd-btn {
    width: 100%;
  }

  .wgd-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .wgd-footer-copy {
    text-align: left;
  }
}

@media (max-width: 430px) {
  .wgd-container {
    width: calc(100% - 28px);
  }

  .wgd-hero h1 {
    font-size: 38px;
  }

  .wgd-hero-actions {
    flex-direction: column;
  }

  .wgd-hero-actions .wgd-btn {
    width: 100%;
  }

  .wgd-blueprint-stage {
    min-height: 285px;
  }

  .wgd-stage-number {
    font-size: 50px;
  }

  .wgd-art-label-a {
    right: 2%;
  }

  .wgd-art-label-b {
    left: 2%;
  }

  .wgd-detail-row {
    grid-template-columns: 45px 1fr;
    gap: 12px;
  }

  .wgd-detail-num {
    font-size: 21px;
  }

  .wgd-engineering-card {
    grid-template-columns: 50px 1fr;
    gap: 14px;
    padding: 20px 15px;
  }

  .wgd-engineering-icon {
    width: 45px;
    height: 45px;
    font-size: 21px;
  }

  .wgd-process-track {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .wgd-process-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
  }

  .wgd-process-point {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .wgd-process-card h3 {
    margin-top: 3px;
  }

  .wgd-application-row {
    grid-template-columns: 35px 1fr 28px;
    gap: 10px;
  }

  .wgd-application-row h3 {
    font-size: 15px;
  }

  .wgd-company-fact {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .wgd-heading {
    letter-spacing: -1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wgd-page *,
  .wgd-page *::before,
  .wgd-page *::after {
    animation: none !important;
    transition: none !important;
  }

  .wgd-reveal {
    opacity: 1;
    transform: none;
  }
}


/* gallery */


/* =========================================
   WOOJIN AUTOMOTIVE INDIA - GALLERY PAGE
   Unique prefix: wgi-
========================================= */

:root {
    --wgi-blue: #004a9e;
    --wgi-green: #7fc249;
    --wgi-light-blue: #75d1f6;
    --wgi-dark: #12243a;
    --wgi-text: #536174;
    --wgi-light: #f5f8fc;
    --wgi-border: #e3eaf2;
    --wgi-white: #ffffff;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    color: var(--wgi-dark);
    background: var(--wgi-white);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

body.wgi-no-scroll {
    overflow: hidden;
}

.wgi-header,
.wgi-header * ,
.wgi-hero,
.wgi-hero *,
.wgi-gallery-section,
.wgi-gallery-section *,
.wgi-cta-section,
.wgi-cta-section *,
.wgi-lightbox,
.wgi-lightbox *,
.wgi-footer,
.wgi-footer * {
    box-sizing: border-box;
}

/* HEADER */

.wgi-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: var(--wgi-white);
    border-bottom: 1px solid #eaf0f6;
    box-shadow: 0 4px 18px rgba(0, 45, 95, 0.04);
}

.wgi-header-inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.wgi-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--wgi-blue);
    text-decoration: none;
    flex-shrink: 0;
}

.wgi-brand:hover {
    color: var(--wgi-blue);
}

.wgi-brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--wgi-white);
    font-size: 23px;
    background: var(--wgi-blue);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 74, 158, 0.2);
}

.wgi-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.wgi-brand-text strong {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.wgi-brand-text small {
    margin-top: 5px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.05px;
}

.wgi-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

.wgi-nav a {
    position: relative;
    padding: 10px 0;
    color: #34445a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.25s ease;
}

.wgi-nav a::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--wgi-green);
    transition: width 0.25s ease;
}

.wgi-nav a:hover,
.wgi-nav a.wgi-nav-active {
    color: var(--wgi-blue);
}

.wgi-nav a:hover::after,
.wgi-nav a.wgi-nav-active::after {
    width: 100%;
}

.wgi-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--wgi-border);
    border-radius: 9px;
    background: var(--wgi-white);
    color: var(--wgi-blue);
    font-size: 19px;
    cursor: pointer;
}

/* HERO */

.wgi-hero {
    position: relative;
    isolation: isolate;
    padding: 78px 0 86px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(117, 209, 246, 0.2), transparent 28%),
        linear-gradient(115deg, #f3f8ff 0%, #edf7fc 55%, #e7f4fb 100%);
}

.wgi-hero-pattern {
    position: absolute;
    z-index: -1;
    top: -120px;
    right: -100px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(0, 74, 158, 0.09);
    border-radius: 50%;
}

.wgi-hero-pattern::before,
.wgi-hero-pattern::after {
    position: absolute;
    content: "";
    inset: 35px;
    border: 1px solid rgba(0, 74, 158, 0.08);
    border-radius: 50%;
}

.wgi-hero-pattern::after {
    inset: 75px;
}

.wgi-hero-container {
    position: relative;
}

.wgi-eyebrow,
.wgi-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--wgi-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wgi-eyebrow-line {
    display: inline-block;
    width: 35px;
    height: 3px;
    border-radius: 3px;
    background: var(--wgi-green);
}

.wgi-hero-title {
    max-width: 690px;
    margin: 22px 0 20px;
    color: #142c47;
    font-size: clamp(36px, 4.2vw, 59px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.wgi-hero-title span {
    display: block;
    color: var(--wgi-blue);
}

.wgi-hero-description {
    max-width: 570px;
    margin: 0 0 29px;
    color: var(--wgi-text);
    font-size: 16px;
    line-height: 1.9;
}

.wgi-primary-button {
    min-height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 14px 23px;
    color: var(--wgi-white);
    background: var(--wgi-blue);
    border: 1px solid var(--wgi-blue);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease;
}

.wgi-primary-button:hover {
    color: var(--wgi-white);
    background: #003a7e;
    transform: translateY(-3px);
}

.wgi-primary-button i {
    color: var(--wgi-light-blue);
}

.wgi-hero-image-wrap {
    position: relative;
    padding: 0 12px 12px 0;
}

.wgi-hero-image-wrap::before {
    position: absolute;
    content: "";
    top: -13px;
    right: -1px;
    width: 95px;
    height: 95px;
    border-top: 4px solid var(--wgi-green);
    border-right: 4px solid var(--wgi-green);
    border-radius: 0 12px 0 0;
}

.wgi-hero-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 355px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 22px 50px rgba(17, 56, 94, 0.16);
}

.wgi-hero-image-accent {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 20px;
    right: 0;
    height: 45%;
    background: var(--wgi-light-blue);
    opacity: 0.45;
    border-radius: 12px;
}

.wgi-hero-image-label {
    position: absolute;
    z-index: 2;
    left: -22px;
    bottom: 33px;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: calc(100% - 15px);
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 32px rgba(0, 39, 83, 0.13);
}

.wgi-label-icon {
    width: 43px;
    height: 43px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 9px;
    color: var(--wgi-blue);
    background: #e9f4ff;
    font-size: 19px;
}

.wgi-hero-image-label strong,
.wgi-hero-image-label small {
    display: block;
}

.wgi-hero-image-label strong {
    margin-bottom: 5px;
    color: var(--wgi-dark);
    font-size: 13px;
}

.wgi-hero-image-label small {
    color: #718096;
    font-size: 11px;
}

/* GALLERY SECTION */

.wgi-gallery-section {
    padding: 91px 0 83px;
    background: var(--wgi-white);
}

.wgi-section-heading {
    max-width: 690px;
    margin: 0 auto 35px;
    text-align: center;
}

.wgi-section-eyebrow {
    justify-content: center;
    color: #5d9d30;
}

.wgi-section-heading h2 {
    margin: 14px 0 13px;
    color: #152b45;
    font-size: clamp(30px, 3.5vw, 43px);
    font-weight: 800;
    letter-spacing: -1px;
}

.wgi-section-heading h2 span {
    color: var(--wgi-blue);
}

.wgi-section-heading p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--wgi-text);
    font-size: 15px;
    line-height: 1.85;
}

/* FILTERS */

.wgi-filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
}

.wgi-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 43px;
    padding: 10px 17px;
    border: 1px solid #dfe7f0;
    border-radius: 5px;
    color: #526176;
    background: var(--wgi-white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.wgi-filter-btn:hover {
    border-color: var(--wgi-blue);
    color: var(--wgi-blue);
}

.wgi-filter-btn span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 4px;
    color: #526176;
    background: #eef3f8;
    border-radius: 4px;
    font-size: 10px;
}

.wgi-filter-btn.wgi-filter-active {
    color: var(--wgi-white);
    background: var(--wgi-blue);
    border-color: var(--wgi-blue);
    box-shadow: 0 6px 16px rgba(0, 74, 158, 0.16);
}

.wgi-filter-btn.wgi-filter-active span {
    color: var(--wgi-blue);
    background: var(--wgi-white);
}

/* RESPONSIVE EQUAL-SIZED GRID */

.wgi-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 23px;
}

.wgi-gallery-card {
    min-width: 0;
    animation: wgiCardIn 0.35s ease both;
}

.wgi-gallery-card[hidden] {
    display: none !important;
}

@keyframes wgiCardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wgi-gallery-image-button {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 74, 158, 0.08);
    border-radius: 8px;
    background: #eaf0f5;
    cursor: pointer;
    text-align: left;
    isolation: isolate;
}

.wgi-gallery-image-button > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wgi-gallery-image-button:hover > img,
.wgi-gallery-image-button:focus-visible > img {
    transform: scale(1.08);
}

.wgi-gallery-image-button:focus-visible {
    outline: 3px solid var(--wgi-light-blue);
    outline-offset: 3px;
}

.wgi-image-number {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    min-width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    color: var(--wgi-white);
    background: rgba(0, 35, 75, 0.76);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    backdrop-filter: blur(8px);
}

.wgi-image-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 14px;
    color: var(--wgi-white);
    background: linear-gradient(
        180deg,
        rgba(3, 20, 42, 0.02) 22%,
        rgba(3, 20, 42, 0.2) 47%,
        rgba(3, 20, 42, 0.9) 100%
    );
    transition: background 0.3s ease;
}

.wgi-gallery-image-button:hover .wgi-image-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 35, 75, 0.04) 10%,
        rgba(0, 35, 75, 0.32) 48%,
        rgba(0, 35, 75, 0.96) 100%
    );
}

.wgi-image-caption {
    min-width: 0;
    display: block;
}

.wgi-image-caption small {
    display: block;
    margin-bottom: 7px;
    color: var(--wgi-light-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.wgi-image-caption strong {
    display: block;
    color: var(--wgi-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.wgi-view-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    margin-bottom: 1px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: var(--wgi-white);
    background: rgba(255, 255, 255, 0.13);
    font-size: 12px;
    transition: all 0.25s ease;
}

.wgi-gallery-image-button:hover .wgi-view-icon {
    color: var(--wgi-blue);
    background: var(--wgi-white);
    transform: rotate(45deg);
}

.wgi-gallery-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 27px 0 0;
    color: #77869a;
    font-size: 12px;
}

.wgi-gallery-note i {
    color: var(--wgi-blue);
}

/* CTA SECTION */

.wgi-cta-section {
    padding: 0 0 82px;
    background: var(--wgi-white);
}

.wgi-cta-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 35px 38px;
    overflow: hidden;
    border: 1px solid #dcebf7;
    border-radius: 12px;
    background: linear-gradient(110deg, #f0f7ff 0%, #f2faff 55%, #eaf7fc 100%);
}

.wgi-cta-content::after {
    position: absolute;
    content: "";
    width: 200px;
    height: 200px;
    top: -125px;
    right: 130px;
    border: 25px solid rgba(117, 209, 246, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.wgi-cta-icon {
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--wgi-white);
    background: var(--wgi-blue);
    font-size: 27px;
}

.wgi-cta-text {
    position: relative;
    z-index: 1;
    flex: 1;
}

.wgi-cta-text > span {
    display: block;
    margin-bottom: 8px;
    color: #5d9d30;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.wgi-cta-text h2 {
    margin: 0 0 9px;
    color: #17334f;
    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 800;
    line-height: 1.35;
}

.wgi-cta-text p {
    margin: 0;
    color: var(--wgi-text);
    font-size: 13px;
    line-height: 1.7;
}

.wgi-cta-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 49px;
    padding: 13px 19px;
    border: 1px solid var(--wgi-blue);
    border-radius: 5px;
    color: var(--wgi-white);
    background: var(--wgi-blue);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.wgi-cta-button:hover {
    color: var(--wgi-blue);
    background: transparent;
}

/* LIGHTBOX */

.wgi-lightbox[hidden] {
    display: none !important;
}

.wgi-lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
}

.wgi-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 15, 29, 0.91);
    backdrop-filter: blur(8px);
}

.wgi-lightbox-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 1000px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #101d2d;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
}

.wgi-lightbox-topbar {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--wgi-white);
}

.wgi-lightbox-topbar > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.wgi-lightbox-label {
    color: var(--wgi-light-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.wgi-lightbox-counter {
    color: #a8b8cb;
    font-size: 12px;
    font-weight: 700;
}

.wgi-lightbox-close {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
    color: var(--wgi-white);
    background: rgba(255, 255, 255, 0.08);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.wgi-lightbox-close:hover {
    color: var(--wgi-blue);
    background: var(--wgi-white);
    transform: rotate(90deg);
}

.wgi-lightbox-image-area {
    position: relative;
    min-height: 220px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 65px;
    overflow: hidden;
    background: #081321;
}

.wgi-lightbox-main-image {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: min(53vh, 540px);
    object-fit: contain;
    border-radius: 3px;
}

.wgi-lightbox-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--wgi-white);
    background: rgba(255, 255, 255, 0.1);
    font-size: 15px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.25s ease;
}

.wgi-lightbox-arrow:hover {
    color: var(--wgi-blue);
    background: var(--wgi-white);
}

.wgi-lightbox-prev {
    left: 14px;
}

.wgi-lightbox-next {
    right: 14px;
}

.wgi-lightbox-details {
    padding: 18px 22px 12px;
    color: var(--wgi-white);
}

.wgi-lightbox-category {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--wgi-light-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.wgi-lightbox-details h3 {
    margin: 0 0 7px;
    color: var(--wgi-white);
    font-size: 22px;
    font-weight: 700;
}

.wgi-lightbox-details p {
    margin: 0;
    color: #b5c3d4;
    font-size: 13px;
    line-height: 1.6;
}

.wgi-lightbox-thumbnails {
    display: flex;
    gap: 9px;
    padding: 13px 20px 19px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #48617c #17273b;
}

.wgi-lightbox-thumb {
    position: relative;
    width: 78px;
    height: 56px;
    flex: 0 0 78px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 5px;
    background: #24364a;
    opacity: 0.62;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wgi-lightbox-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wgi-lightbox-thumb:hover {
    opacity: 0.9;
}

.wgi-lightbox-thumb.wgi-thumb-active {
    border-color: var(--wgi-green);
    opacity: 1;
}

/* FOOTER */

.wgi-footer {
    padding: 23px 0;
    color: #c5d2e0;
    background: #10243b;
    text-align: center;
}

.wgi-footer p {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
}

/* TABLET */

@media (max-width: 1199px) {
    .wgi-nav {
        gap: 20px;
    }

    .wgi-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .wgi-hero {
        padding: 65px 0 72px;
    }

    .wgi-hero-image {
        height: 330px;
    }

    .wgi-cta-content {
        gap: 18px;
        padding: 30px;
    }
}

/* SMALL TABLET */

@media (max-width: 991px) {
    .wgi-header-inner {
        min-height: 75px;
    }

    .wgi-menu-toggle {
        display: grid;
        place-items: center;
    }

    .wgi-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 24px 18px;
        border-top: 1px solid var(--wgi-border);
        background: var(--wgi-white);
        box-shadow: 0 15px 22px rgba(0, 38, 80, 0.1);
    }

    .wgi-nav.wgi-nav-open {
        display: flex;
    }

    .wgi-nav a {
        padding: 13px 0;
        border-bottom: 1px solid #edf1f6;
    }

    .wgi-nav a:last-child {
        border-bottom: 0;
    }

    .wgi-nav a::after {
        display: none;
    }

    .wgi-hero {
        padding: 56px 0 65px;
    }

    .wgi-hero-title {
        font-size: clamp(35px, 5vw, 48px);
    }

    .wgi-hero-image-wrap {
        max-width: 620px;
        margin: 18px auto 0;
    }

    .wgi-hero-image {
        height: 380px;
    }

    .wgi-hero-image-label {
        left: -5px;
    }

    .wgi-gallery-section {
        padding: 70px 0;
    }

    .wgi-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .wgi-cta-content {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .wgi-cta-text {
        flex-basis: calc(100% - 95px);
    }

    .wgi-cta-button {
        margin-left: 84px;
    }
}

/* MOBILE */

@media (max-width: 575px) {
    .wgi-header-inner {
        min-height: 68px;
        gap: 10px;
    }

    .wgi-brand {
        gap: 9px;
    }

    .wgi-brand-mark {
        width: 40px;
        height: 40px;
        font-size: 19px;
        border-radius: 9px;
    }

    .wgi-brand-text strong {
        font-size: 21px;
    }

    .wgi-brand-text small {
        font-size: 7px;
        letter-spacing: 0.7px;
    }

    .wgi-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .wgi-hero {
        padding: 45px 0 53px;
    }

    .wgi-eyebrow,
    .wgi-section-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .wgi-hero-title {
        margin: 17px 0;
        font-size: 36px;
        letter-spacing: -1px;
        line-height: 1.16;
    }

    .wgi-hero-description {
        margin-bottom: 23px;
        font-size: 14px;
        line-height: 1.8;
    }

    .wgi-primary-button {
        min-height: 47px;
        padding: 12px 17px;
    }

    .wgi-hero-image-wrap {
        margin-top: 23px;
        padding-right: 6px;
        padding-bottom: 7px;
    }

    .wgi-hero-image {
        height: 260px;
        border-radius: 8px;
    }

    .wgi-hero-image-wrap::before {
        width: 65px;
        height: 65px;
        top: -8px;
        border-width: 3px;
    }

    .wgi-hero-image-label {
        left: -3px;
        bottom: 20px;
        gap: 9px;
        padding: 10px 12px;
    }

    .wgi-label-icon {
        width: 35px;
        height: 35px;
        font-size: 15px;
    }

    .wgi-hero-image-label strong {
        font-size: 11px;
    }

    .wgi-hero-image-label small {
        font-size: 9px;
    }

    .wgi-gallery-section {
        padding: 57px 0 52px;
    }

    .wgi-section-heading {
        margin-bottom: 26px;
    }

    .wgi-section-heading h2 {
        font-size: 30px;
        letter-spacing: -0.7px;
    }

    .wgi-section-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .wgi-filter-list {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 24px;
    }

    .wgi-filter-btn {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 11px;
    }

    .wgi-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .wgi-gallery-image-button {
        aspect-ratio: 4 / 3;
        border-radius: 6px;
    }

    .wgi-image-number {
        top: 7px;
        left: 7px;
        min-width: 25px;
        height: 25px;
        font-size: 9px;
    }

    .wgi-image-overlay {
        padding: 10px 8px;
    }

    .wgi-image-caption small {
        margin-bottom: 4px;
        font-size: 7px;
        letter-spacing: 0.6px;
    }

    .wgi-image-caption strong {
        font-size: 11px;
        line-height: 1.35;
    }

    .wgi-view-icon {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    .wgi-gallery-note {
        align-items: flex-start;
        font-size: 11px;
        line-height: 1.6;
    }

    .wgi-cta-section {
        padding-bottom: 52px;
    }

    .wgi-cta-content {
        gap: 15px;
        padding: 22px 18px;
        border-radius: 9px;
    }

    .wgi-cta-icon {
        width: 47px;
        height: 47px;
        border-radius: 9px;
        font-size: 20px;
    }

    .wgi-cta-text {
        flex-basis: calc(100% - 62px);
    }

    .wgi-cta-text > span {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .wgi-cta-text h2 {
        font-size: 20px;
    }

    .wgi-cta-text p {
        font-size: 12px;
    }

    .wgi-cta-button {
        width: 100%;
        margin-left: 0;
        min-height: 45px;
    }

    .wgi-footer {
        padding: 19px 0;
    }

    .wgi-footer p {
        font-size: 10px;
    }

    /* Mobile lightbox */
    .wgi-lightbox {
        padding: 8px;
    }

    .wgi-lightbox-panel {
        max-height: calc(100dvh - 16px);
        border-radius: 8px;
    }

    .wgi-lightbox-topbar {
        min-height: 53px;
        padding: 8px 12px;
    }

    .wgi-lightbox-topbar > div {
        gap: 9px;
    }

    .wgi-lightbox-label {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .wgi-lightbox-counter {
        font-size: 10px;
    }

    .wgi-lightbox-close {
        width: 34px;
        height: 34px;
    }

    .wgi-lightbox-image-area {
        min-height: 180px;
        padding: 12px 42px;
    }

    .wgi-lightbox-main-image {
        max-height: 42dvh;
    }

    .wgi-lightbox-arrow {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .wgi-lightbox-prev {
        left: 5px;
    }

    .wgi-lightbox-next {
        right: 5px;
    }

    .wgi-lightbox-details {
        padding: 14px 13px 8px;
    }

    .wgi-lightbox-details h3 {
        font-size: 18px;
    }

    .wgi-lightbox-details p {
        font-size: 11px;
    }

    .wgi-lightbox-thumbnails {
        gap: 7px;
        padding: 10px 12px 14px;
    }

    .wgi-lightbox-thumb {
        width: 60px;
        height: 45px;
        flex-basis: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wgi-gallery-card,
    .wgi-gallery-image-button > img,
    .wgi-primary-button,
    .wgi-filter-btn {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* header */


/* ======================================
   WOOJIN PRODUCT MEGA SUBMENU
====================================== */

.wj-product-menu {
    position: static !important;
}

.wj-product-menu > .wj-product-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.wj-product-chevron {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.wj-product-menu:hover .wj-product-chevron,
.wj-product-menu:focus-within .wj-product-chevron {
    transform: rotate(225deg);
    margin-top: 4px;
}

/* Main submenu panel */

.wj-product-panel {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #105875 !important;
    border: 1px solid #0b3447 !important;
    border-top: 4px solid #9be477 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 18px 45px rgba(5, 35, 49, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease,
                transform .25s ease,
                visibility .25s ease;
    z-index: 9999;
    overflow: hidden;
}

/* Desktop open */

@media (min-width: 992px) {
    .wj-product-menu:hover > .wj-product-panel,
    .wj-product-menu:focus-within > .wj-product-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* Inner content */

.wj-product-panel-inner {
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 25px 30px 30px !important;
    list-style: none;
    box-sizing: border-box;
}

/* Category heading */

.wj-product-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.wj-product-heading h3 {
    margin: 0;
    color: #b6f293;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.5;
}

.wj-heading-line {
    display: block;
    width: 4px;
    height: 23px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #a5e87d;
}

/* Product links grid */

.wj-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.wj-product-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
    padding: 13px 15px;
    box-sizing: border-box;
    color: #193c4b !important;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .06);
    transition: background .25s ease,
                color .25s ease,
                border-color .25s ease,
                transform .25s ease,
                box-shadow .25s ease;
}

.wj-product-link span {
    flex-shrink: 0;
    color: #6ba74e;
    font-size: 16px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all .25s ease;
}

.wj-product-link:hover {
    color: #143e51 !important;
    background: #e9f8e1;
    border-color: #a4e780;
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(0, 0, 0, .12);
}

.wj-product-link:hover span {
    opacity: 1;
    transform: translate(0, 0);
}

/* Divider between categories */

.wj-product-divider {
    height: 1px;
    margin: 25px 0;
    background: rgba(255, 255, 255, .2);
}

/* ======================================
   TABLET
====================================== */

@media (min-width: 768px) and (max-width: 1199px) {
    .wj-product-panel-inner {
        padding: 23px 22px 25px !important;
    }

    .wj-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .wj-product-link {
        min-height: 50px;
        padding: 11px 12px;
        font-size: 13px;
    }
}

/* ======================================
   MOBILE
====================================== */

@media (max-width: 991px) {
    .wj-product-menu {
        position: relative !important;
    }

    .wj-product-menu > .wj-product-panel {
        position: static !important;
        width: 100%;
        max-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: max-height .4s ease;
    }

    .wj-product-menu.wj-product-open > .wj-product-panel {
        max-height: 1800px;
        border-top: 3px solid #9be477 !important;
        border-bottom: 1px solid #d1e0e6 !important;
    }

    .wj-product-panel-inner {
        padding: 20px 14px 22px !important;
    }

    .wj-product-heading h3 {
        font-size: 16px;
    }

    .wj-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .wj-product-link {
        min-height: 48px;
        padding: 11px 10px;
        font-size: 12px;
    }

    .wj-product-link span {
        opacity: 1;
        transform: none;
    }

    .wj-product-divider {
        margin: 21px 0;
    }
}

/* Extra-small mobile */

@media (max-width: 380px) {
    .wj-product-panel-inner {
        padding: 17px 10px 20px !important;
    }

    .wj-product-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wj-product-link {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* customer review */


/* ==========================================
   WJCO - CUSTOMER OVERVIEW
   Theme: #004c9e / #8cc746
========================================== */

.wjco-section {
    --wjco-blue: #004c9e;
    --wjco-green: #8cc746;
    --wjco-dark: #102e4d;
    --wjco-text: #5c6d7f;
    --wjco-border: #e3ebf2;

    position: relative;
    padding: 85px 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 90% 10%,
            rgba(140, 199, 70, .09), transparent 35%),
        #f5f8fc;
    font-family: inherit;
}

.wjco-section *,
.wjco-section *::before,
.wjco-section *::after {
    box-sizing: border-box;
}

.wjco-section::before {
    content: "";
    position: absolute;
    top: 180px;
    left: -170px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(0, 76, 158, .07);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(0, 76, 158, .025),
        0 0 0 70px rgba(0, 76, 158, .02);
    pointer-events: none;
    z-index: -1;
}

.wjco-container {
    width: 100%;
    max-width: 1320px;
    padding: 0 25px;
    margin: 0 auto;
}

/* Heading */

.wjco-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 38px;
    padding: 0 0 27px;
    border-bottom: 2px solid var(--wjco-blue);
    overflow: hidden;
}

.wjco-heading-number {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 90px;
    min-height: 100px;
    padding: 15px;
    color: #fff;
    background: var(--wjco-blue);
    border-radius: 12px 12px 3px 12px;
    font-size: 37px;
    font-weight: 800;
    letter-spacing: -1px;
    box-shadow: 0 10px 24px rgba(0, 76, 158, .19);
}

.wjco-heading-content {
    flex: 1;
    min-width: 0;
}

.wjco-eyebrow,
.wjco-map-kicker {
    display: block;
    margin-bottom: 8px;
    color: #679d2f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wjco-heading-content h2 {
    margin: 0;
    color: var(--wjco-dark);
    font-size: clamp(30px, 3.5vw, 45px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
}

.wjco-heading-content h2 span {
    color: var(--wjco-blue);
}

.wjco-heading-content p {
    margin: 9px 0 0;
    color: var(--wjco-text);
    font-size: 14px;
    line-height: 1.7;
}

.wjco-heading-decoration {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
}

.wjco-heading-decoration span {
    display: block;
    width: 8px;
    height: 30px;
    border-radius: 5px;
    background: var(--wjco-green);
    transform: skew(-15deg);
}

.wjco-heading-decoration span:nth-child(2) {
    height: 42px;
    background: var(--wjco-blue);
}

.wjco-heading-decoration span:nth-child(3) {
    height: 21px;
    background: #b9dca0;
}

/* Main layout */

.wjco-main {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.5fr);
    align-items: stretch;
    gap: 30px;
}

/* Customer list */

.wjco-customers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wjco-customer-card {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 15px;
    min-height: 125px;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid var(--wjco-border);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(19, 57, 94, .035);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.wjco-customer-card::before {
    content: "";
    position: absolute;
    top: 17px;
    bottom: 17px;
    left: 0;
    width: 4px;
    background: var(--wjco-green);
    border-radius: 0 4px 4px 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.wjco-customer-card:hover {
    transform: translateX(6px);
    border-color: rgba(0, 76, 158, .23);
    box-shadow: 0 13px 30px rgba(0, 76, 158, .09);
}

.wjco-customer-card:hover::before {
    transform: scaleY(1);
}

.wjco-customer-index {
    position: absolute;
    top: 9px;
    left: 12px;
    color: #9aabba;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.wjco-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 78px;
    padding: 7px;
    background: #fff;
    border-radius: 8px;
}

.wjco-logo-wrap img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}

.wjco-customer-card:hover .wjco-logo-wrap img {
    transform: scale(1.07);
}

.wjco-customer-info {
    min-width: 0;
}

.wjco-customer-info h3 {
    margin: 0 0 6px;
    color: var(--wjco-dark);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;
}

.wjco-customer-info span {
    display: block;
    color: #7b8b9a;
    font-size: 15px;
    line-height: 1.6;
}

.wjco-customer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: var(--wjco-blue);
    background: #edf4fc;
    border-radius: 50%;
    font-size: 14px;
    transition: all .3s ease;
}

.wjco-customer-card:hover .wjco-customer-arrow {
    color: #fff;
    background: var(--wjco-blue);
    transform: rotate(45deg);
}

/* Map panel */

.wjco-map-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1eaf3;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(16, 46, 77, .07);
}

.wjco-map-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 27px 28px 18px;
}

.wjco-map-top h3 {
    margin: 0;
    color: var(--wjco-dark);
    font-size: clamp(21px, 2.2vw, 29px);
    font-weight: 800;
    line-height: 1.3;
}

.wjco-map-top h3 span {
    color: var(--wjco-blue);
}

.wjco-map-top p {
    margin: 8px 0 0;
    color: var(--wjco-text);
    font-size: 12px;
    line-height: 1.7;
}

.wjco-india-badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: var(--wjco-blue);
    background: #f0f7e9;
    border: 1px solid #deedcf;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.wjco-india-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wjco-green);
    box-shadow: 0 0 0 4px rgba(140, 199, 70, .15);
}

/* Map stage */

.wjco-map-stage {
    position: relative;
    flex: 1;
    min-height: 440px;
    margin: 0 18px;
    overflow: hidden;
    border: 1px solid #e8eff5;
    border-radius: 12px;
    background:
        linear-gradient(rgba(0, 76, 158, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 76, 158, .035) 1px, transparent 1px),
        #f8fbfe;
    background-size: 28px 28px;
}

.wjco-map-stage::before,
.wjco-map-stage::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(0, 76, 158, .07);
    border-radius: 50%;
    pointer-events: none;
}

.wjco-map-stage::before {
    top: 12%;
    right: 8%;
}

.wjco-map-stage::after {
    top: 17%;
    right: 13%;
}

.wjco-india-map {
    position: absolute;
    top: 4%;
    left: 20%;
    width: 62%;
    height: 91%;
    object-fit: contain;
    object-position: center;
    opacity: .94;
    filter: drop-shadow(0 8px 9px rgba(0, 76, 158, .08));
    animation: wjco-map-appear 1s ease both;
}

/* Connection lines */

.wjco-connection-svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.wjco-connection {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 7;
    animation: wjco-line-flow 18s linear infinite;
}

.wjco-line-blue {
    stroke: var(--wjco-blue);
}

.wjco-line-green {
    stroke: #68a931;
}

.wjco-line-orange {
    stroke: #efae25;
}

.wjco-line-dot {
    fill: var(--wjco-green);
    stroke: #fff;
    stroke-width: 2;
    animation: wjco-dot-pulse 2s ease-in-out infinite;
}

/* Map markers */

.wjco-map-marker {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
}

.wjco-marker-one {
    top: 48%;
    left: 51%;
}

.wjco-marker-two {
    top: 64%;
    left: 36%;
}

.wjco-marker-three {
    top: 78%;
    left: 58%;
}

.wjco-marker-four {
    top: 70%;
    left: 47%;
}

.wjco-marker-core {
    position: relative;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--wjco-blue);
    box-shadow: 0 0 0 2px var(--wjco-blue);
}

.wjco-marker-two .wjco-marker-core,
.wjco-marker-four .wjco-marker-core {
    background: var(--wjco-green);
    box-shadow: 0 0 0 2px var(--wjco-green);
}

.wjco-marker-pulse {
    position: absolute;
    inset: 0;
    border: 2px solid var(--wjco-blue);
    border-radius: 50%;
    animation: wjco-marker-wave 2.2s ease-out infinite;
}

.wjco-marker-two .wjco-marker-pulse,
.wjco-marker-four .wjco-marker-pulse {
    border-color: var(--wjco-green);
}

.wjco-marker-label {
    position: absolute;
    left: 23px;
    top: -8px;
    padding: 6px 9px;
    color: var(--wjco-dark);
    background: #fff;
    border: 1px solid #e3ebf2;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(16, 46, 77, .08);
    transition: background .25s ease, color .25s ease;
}

.wjco-map-marker:hover .wjco-marker-label {
    color: #fff;
    background: var(--wjco-blue);
}

/* Map caption */

.wjco-map-caption {
    position: absolute;
    right: 15px;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: var(--wjco-dark);
    background: rgba(255, 255, 255, .95);
    border: 1px solid #e2ebf2;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}

.wjco-caption-symbol {
    color: #73ad3d;
    font-size: 16px;
}

/* Bottom banner */

.wjco-map-footer {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 18px;
    margin-top: 15px;
    padding: 17px 18px;
    background: #f0f6fc;
    border: 1px solid #e0eaf4;
    border-radius: 9px;
}

.wjco-map-footer-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--wjco-blue);
    border-radius: 8px;
    font-size: 20px;
}

.wjco-map-footer > div:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.wjco-map-footer strong {
    color: var(--wjco-dark);
    font-size: 13px;
}

.wjco-map-footer span {
    color: #718194;
    font-size: 11px;
    line-height: 1.6;
}

.wjco-footer-accent {
    width: 5px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--wjco-green);
}

/* Animations */

@keyframes wjco-map-appear {
    from {
        opacity: 0;
        transform: scale(.96) translateY(12px);
    }
    to {
        opacity: .94;
        transform: scale(1) translateY(0);
    }
}

@keyframes wjco-line-flow {
    to {
        stroke-dashoffset: -150;
    }
}

@keyframes wjco-marker-wave {
    0% {
        transform: scale(.5);
        opacity: .9;
    }
    100% {
        transform: scale(2.3);
        opacity: 0;
    }
}

@keyframes wjco-dot-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .45;
    }
}

/* Scroll reveal */

.wjco-section.wjco-js-enabled [data-wjco-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.wjco-section.wjco-js-enabled [data-wjco-reveal].wjco-visible {
    opacity: 1;
    transform: translateY(0);
}

.wjco-customers .wjco-customer-card:nth-child(2) {
    transition-delay: .08s;
}

.wjco-customers .wjco-customer-card:nth-child(3) {
    transition-delay: .16s;
}

.wjco-customers .wjco-customer-card:nth-child(4) {
    transition-delay: .24s;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {
    .wjco-section {
        padding: 65px 0;
    }

    .wjco-main {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wjco-customers {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .wjco-customer-card {
        grid-template-columns: 85px minmax(0, 1fr) 22px;
        min-height: 118px;
        gap: 10px;
        padding: 17px 12px;
    }

    .wjco-logo-wrap {
        height: 68px;
    }

    .wjco-customer-info h3 {
        font-size: 13px;
    }

    .wjco-map-stage {
        min-height: 430px;
    }

    .wjco-india-map {
        left: 23%;
        width: 55%;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 575px) {
    .wjco-section {
        padding: 45px 0;
    }

    .wjco-container {
        padding: 0 15px;
    }

    .wjco-heading {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 25px;
        padding-bottom: 22px;
    }

    .wjco-heading-number {
        min-width: 55px;
        min-height: 68px;
        padding: 10px;
        border-radius: 8px;
        font-size: 25px;
    }

    .wjco-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .wjco-heading-content h2 {
        font-size: 27px;
        letter-spacing: -.5px;
    }

    .wjco-heading-content p {
        font-size: 12px;
    }

    .wjco-heading-decoration {
        display: none;
    }

    .wjco-customers {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .wjco-customer-card {
        grid-template-columns: 92px minmax(0, 1fr) 25px;
        min-height: 105px;
        padding: 15px;
        gap: 13px;
    }

    .wjco-logo-wrap {
        height: 67px;
    }

    .wjco-customer-info h3 {
        font-size: 14px;
    }

    .wjco-customer-info span {
        font-size: 11px;
    }

    .wjco-map-top {
        align-items: flex-start;
        padding: 22px 16px 15px;
    }

    .wjco-map-top h3 {
        font-size: 21px;
    }

    .wjco-map-top p {
        font-size: 11px;
    }

    .wjco-india-badge {
        padding: 7px 8px;
        font-size: 9px;
    }

    .wjco-map-stage {
        min-height: 370px;
        margin: 0 10px;
    }

    .wjco-india-map {
        top: 8%;
        left: 17%;
        width: 67%;
        height: 83%;
    }

    .wjco-connection {
        stroke-width: 1.5;
        stroke-dasharray: 5 5;
    }

    .wjco-marker-label {
        padding: 5px 6px;
        font-size: 8px;
    }

    .wjco-marker-one {
        top: 45%;
        left: 50%;
    }

    .wjco-marker-two {
        top: 62%;
        left: 32%;
    }

    .wjco-marker-three {
        top: 77%;
        left: 58%;
    }

    .wjco-marker-four {
        top: 69%;
        left: 44%;
    }

    .wjco-map-caption {
        right: 8px;
        bottom: 8px;
        gap: 5px;
        padding: 7px 8px;
        font-size: 9px;
    }

    .wjco-map-footer {
        gap: 10px;
        margin: 12px;
        padding: 13px 11px;
    }

    .wjco-map-footer-icon {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .wjco-map-footer strong {
        font-size: 11px;
    }

    .wjco-map-footer span {
        font-size: 10px;
    }
}

/* Accessibility: reduced motion */

@media (prefers-reduced-motion: reduce) {
    .wjco-section *,
    .wjco-section *::before,
    .wjco-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .wjco-section.wjco-js-enabled [data-wjco-reveal] {
        opacity: 1;
        transform: none;
    }
}
/* evparts */

/* =========================================
   WOOJIN EV COMPONENTS PAGE
   Theme: #004c9e / #8cc746
========================================= */

:root {
    --wgev-blue: #004c9e;
    --wgev-green: #8cc746;
    --wgev-dark: #172b43;
    --wgev-text: #526174;
    --wgev-light: #f3f7fb;
    --wgev-border: #e1e9f1;
    --wgev-white: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 35px;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--wgev-dark);
    background: #fff;
}

.wgev-page {
    width: 100%;
    overflow: hidden;
}

.wgev-container {
    width: min(1320px, 92%);
    margin: 0 auto;
}

/* HERO */

.wgev-hero {
    position: relative;
    padding: 75px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 15%, rgba(140,199,70,.18), transparent 27%),
        linear-gradient(120deg, #f2f7fc 0%, #ffffff 62%, #f1f7e9 100%);
    border-bottom: 1px solid var(--wgev-border);
}

.wgev-hero::after {
    content: "";
    position: absolute;
    right: -85px;
    bottom: -170px;
    width: 360px;
    height: 360px;
    border: 45px solid rgba(0,76,158,.045);
    border-radius: 50%;
    pointer-events: none;
}

.wgev-hero-content {
    position: relative;
    z-index: 1;
    max-width: 850px;
}

.wgev-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: var(--wgev-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wgev-eyebrow::before {
    content: "";
    width: 31px;
    height: 3px;
    background: var(--wgev-green);
    border-radius: 5px;
}

.wgev-hero h1 {
    margin: 0 0 20px;
    color: var(--wgev-blue);
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: 1.12;
    letter-spacing: -1.8px;
    font-weight: 800;
}

.wgev-hero h1 span {
    color: var(--wgev-dark);
}

.wgev-hero-description {
    max-width: 740px;
    margin: 0;
    color: var(--wgev-text);
    font-size: 16px;
    line-height: 1.9;
}

.wgev-hero-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.wgev-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    background: #fff;
    border: 1px solid var(--wgev-border);
    border-radius: 7px;
    color: var(--wgev-dark);
    font-size: 12px;
    font-weight: 700;
}

.wgev-hero-tag i {
    color: var(--wgev-green);
}

/* PAGE INTRO */

.wgev-intro {
    padding: 54px 0 28px;
}

.wgev-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: center;
}

.wgev-section-label {
    display: block;
    margin-bottom: 12px;
    color: var(--wgev-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.wgev-intro h2 {
    margin: 0;
    color: var(--wgev-blue);
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.3;
    font-weight: 800;
}

.wgev-intro-text {
    margin: 0;
    color: var(--wgev-text);
    font-size: 14px;
    line-height: 1.9;
}

/* MAIN 75 / 25 LAYOUT */

.wgev-main {
    padding: 25px 0 80px;
}

.wgev-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: 32px;
    align-items: start;
}

/* LEFT SIDE */

.wgev-products {
    min-width: 0;
}

.wgev-product {
    position: relative;
    margin-bottom: 28px;
    padding: 25px;
    overflow: hidden;
    background: var(--wgev-white);
    border: 1px solid var(--wgev-border);
    border-radius: 13px;
    box-shadow: 0 8px 28px rgba(19, 52, 87, .045);
    scroll-margin-top: 24px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.wgev-product::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--wgev-green);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease;
}

.wgev-product.wgev-active-product {
    border-color: rgba(0,76,158,.35);
    box-shadow: 0 12px 35px rgba(0,76,158,.09);
}

.wgev-product.wgev-active-product::before {
    transform: scaleY(1);
}

.wgev-product-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
}

/* IMAGE */

.wgev-product-image {
    position: relative;
    min-width: 0;
    height: 280px;
    overflow: hidden;
    background: #eaf1f8;
    border-radius: 9px;
}

.wgev-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.wgev-product:hover .wgev-product-image img {
    transform: scale(1.055);
}

.wgev-image-number {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--wgev-green);
    color: #18330a;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
}

.wgev-image-caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 11px 12px;
    color: #fff;
    background: rgba(0, 32, 69, .83);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* PRODUCT CONTENT */

.wgev-product-content {
    min-width: 0;
    padding: 5px 0;
}

.wgev-product-kicker {
    display: inline-block;
    margin-bottom: 11px;
    color: #588c24;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.wgev-product-content h3 {
    margin: 0 0 15px;
    color: var(--wgev-blue);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.35;
    font-weight: 800;
}

.wgev-product-description {
    margin: 0 0 15px;
    color: var(--wgev-text);
    font-size: 15px;
    line-height: 1.85;
}

.wgev-detail-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wgev-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #405168;
    font-size: 14px;
    line-height: 1.65;
}

.wgev-detail-list li i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--wgev-green);
    font-size: 14px;
}

.wgev-product-note {
    margin-top: 17px;
    padding: 12px 13px;
    background: #f4f8ed;
    border-left: 3px solid var(--wgev-green);
    border-radius: 0 6px 6px 0;
    color: #455a35;
    font-size: 14px;
    line-height: 1.7;
}

/* RIGHT SIDEBAR */

.wgev-sidebar {
    position: sticky;
    top: 22px;
    padding: 23px 18px 20px;
    background: #f5f8fc;
    border: 1px solid var(--wgev-border);
    border-radius: 12px;
}

.wgev-sidebar-heading {
    margin-bottom: 7px;
    color: var(--wgev-blue);
    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
}

.wgev-sidebar-subtitle {
    margin: 0 0 19px;
    color: var(--wgev-text);
    font-size: 11px;
    line-height: 1.7;
}

.wgev-sidebar-line {
    width: 45px;
    height: 4px;
    margin-bottom: 20px;
    background: var(--wgev-green);
    border-radius: 5px;
}

.wgev-part-nav {
    display: grid;
    gap: 7px;
}

.wgev-part-link {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 13px 10px;
    color: #43536a;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}

.wgev-part-link:hover {
    color: var(--wgev-blue);
    background: #fff;
    border-color: var(--wgev-border);
}

.wgev-part-link.wgev-current-link {
    color: var(--wgev-blue);
    background: #fff;
    border-color: rgba(0,76,158,.17);
    box-shadow: 0 4px 13px rgba(0,76,158,.06);
}

.wgev-part-link.wgev-current-link::after {
    content: "";
    position: absolute;
    top: 10px;
    right: -1px;
    bottom: 10px;
    width: 3px;
    background: var(--wgev-green);
    border-radius: 5px 0 0 5px;
}

.wgev-link-number {
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    color: var(--wgev-blue);
    background: #e5eef8;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 800;
}

.wgev-current-link .wgev-link-number {
    background: var(--wgev-green);
    color: #193509;
}

.wgev-link-text {
    padding-top: 3px;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
}

.wgev-sidebar-contact {
    margin-top: 22px;
    padding: 16px 13px;
    background: var(--wgev-blue);
    border-radius: 8px;
    color: #fff;
}

.wgev-sidebar-contact i {
    margin-bottom: 10px;
    color: var(--wgev-green);
    font-size: 19px;
}

.wgev-sidebar-contact h4 {
    margin: 0 0 7px;
    font-size: 17px;
}

.wgev-sidebar-contact p {
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 11px;
    line-height: 1.7;
}

/* PAD SUB COMPONENTS */

.wgev-subparts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
}

.wgev-subpart {
    padding: 11px 12px;
    background: #f4f8fc;
    border: 1px solid var(--wgev-border);
    border-radius: 6px;
    color: #344a62;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

.wgev-subpart i {
    margin-right: 5px;
    color: #669d2f;
}

/* BOTTOM CTA */

.wgev-bottom-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 25px;
    padding: 35px;
    overflow: hidden;
    background: linear-gradient(115deg, var(--wgev-blue), #073a70);
    border-radius: 13px;
}

.wgev-bottom-cta::after {
    content: "";
    position: absolute;
    top: -80px;
    right: 150px;
    width: 220px;
    height: 220px;
    border: 28px solid rgba(255,255,255,.06);
    border-radius: 50%;
}

.wgev-cta-content {
    position: relative;
    z-index: 1;
}

.wgev-cta-content h3 {
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(21px, 2.5vw, 29px);
    line-height: 1.3;
}

.wgev-cta-content p {
    max-width: 820px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.8;
}

.wgev-cta-button {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: #203a0b;
    background: var(--wgev-green);
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition: background .25s ease, transform .25s ease;
}

.wgev-cta-button:hover {
    color: #203a0b;
    background: #a4dc64;
    transform: translateY(-2px);
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .wgev-layout {
        grid-template-columns: minmax(0, 2.2fr) minmax(225px, 1fr);
        gap: 22px;
    }

    .wgev-product {
        padding: 19px;
    }

    .wgev-product-grid {
        gap: 20px;
    }

    .wgev-product-image {
        height: 260px;
    }

    .wgev-sidebar {
        padding: 20px 13px;
    }
}

@media (max-width: 800px) {
    .wgev-hero {
        padding: 55px 0;
    }

    .wgev-intro-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wgev-layout {
        grid-template-columns: 1fr;
    }

    .wgev-sidebar {
        position: static;
        grid-row: 1;
        padding: 22px;
    }

    .wgev-products {
        grid-row: 2;
    }

    .wgev-part-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wgev-sidebar-contact {
        margin-top: 16px;
    }

    .wgev-product-grid {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 560px) {
    .wgev-container {
        width: 92%;
    }

    .wgev-hero {
        padding: 43px 0;
    }

    .wgev-hero h1 {
        letter-spacing: -1px;
    }

    .wgev-hero-description {
        font-size: 14px;
    }

    .wgev-hero-bottom {
        gap: 8px;
    }

    .wgev-hero-tag {
        padding: 9px 10px;
        font-size: 10px;
    }

    .wgev-intro {
        padding: 38px 0 18px;
    }

    .wgev-main {
        padding-top: 16px;
    }

    .wgev-sidebar {
        padding: 18px 13px;
    }

    .wgev-part-nav {
        grid-template-columns: 1fr;
    }

    .wgev-part-link {
        padding: 10px;
    }

    .wgev-product {
        padding: 14px;
        margin-bottom: 19px;
    }

    .wgev-product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wgev-product-image {
        height: 225px;
    }

    .wgev-product-content {
        padding: 0 2px 4px;
    }

    .wgev-product-content h3 {
        font-size: 22px;
    }

    .wgev-product-description {
        font-size: 13px;
    }

    .wgev-detail-list li {
        font-size: 12px;
    }

    .wgev-subparts {
        grid-template-columns: 1fr;
    }

    .wgev-bottom-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px 20px;
    }

    .wgev-cta-button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .wgev-page *,
    .wgev-page *::before,
    .wgev-page *::after {
        transition-duration: .01ms !important;
    }
}


/* sus */

/* ================= QUALITY PAGE BASE ================= */
.wiq-page {
    --wiq-blue: #004c9e;
    --wiq-green: #8cc746;
    --wiq-dark: #17283d;
    --wiq-text: #596779;
    --wiq-light: #f4f8fc;
    --wiq-white: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--wiq-dark);
    overflow: hidden;
    background: #fff;
}

.wiq-page *,
.wiq-page *::before,
.wiq-page *::after {
    box-sizing: border-box;
}

.wiq-page img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.wiq-container {
    width: min(1200px, 92%);
    margin: 0 auto;
}

.wiq-section {
    padding: 90px 0;
}

.wiq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--wiq-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wiq-eyebrow::before {
    content: "";
    width: 30px;
    height: 3px;
    border-radius: 5px;
    background: var(--wiq-green);
}

.wiq-heading {
    margin: 0 0 20px;
    color: var(--wiq-blue);
    font-size: clamp(30px, 4vw, 43px);
    font-weight: 800;
    line-height: 1.2;
}

.wiq-description {
    color: var(--wiq-text);
    font-size: 16px;
    line-height: 1.9;
}

.wiq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 25px;
    border: 2px solid transparent;
    border-radius: 5px;
    background: var(--wiq-green);
    color: #142333;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .3s ease, color .3s ease,
                transform .3s ease, box-shadow .3s ease;
}

.wiq-btn:hover {
    background: #fff;
    color: var(--wiq-blue);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

/* ================= HERO BANNER ================= */
.wiq-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 470px;
    padding: 80px 0;
    background:
        linear-gradient(90deg,
            rgba(0, 39, 83, .96) 0%,
            rgba(0, 58, 119, .86) 48%,
            rgba(0, 76, 158, .36) 100%),
        url("https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=2000&q=85")
        center 48% / cover no-repeat;
    isolation: isolate;
}

.wiq-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -110px;
    bottom: -180px;
    width: 440px;
    height: 440px;
    border: 70px solid rgba(140, 199, 70, .13);
    border-radius: 50%;
}

.wiq-hero-content {
    max-width: 750px;
    animation: wiq-fade-up .8s ease both;
}

.wiq-hero .wiq-eyebrow {
    color: var(--wiq-green);
}

.wiq-hero h1 {
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.8px;
}

.wiq-hero h1 span {
    color: var(--wiq-green);
}

.wiq-hero p {
    max-width: 650px;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    line-height: 1.9;
}

.wiq-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
}

.wiq-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.wiq-breadcrumb span {
    color: var(--wiq-green);
}

/* ================= INTRODUCTION ================= */
.wiq-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
}

.wiq-intro-image {
    position: relative;
    padding: 0 20px 20px 0;
}

.wiq-intro-image::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 75%;
    height: 72%;
    border-radius: 8px;
    background: var(--wiq-green);
}

.wiq-intro-image img {
    position: relative;
    z-index: 1;
    height: 410px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 15px 45px rgba(14, 48, 85, .14);
}

.wiq-image-label {
    position: absolute;
    z-index: 2;
    right: -10px;
    bottom: 40px;
    max-width: 245px;
    padding: 20px 24px;
    border-left: 4px solid var(--wiq-green);
    border-radius: 5px;
    background: var(--wiq-blue);
    color: #fff;
    box-shadow: 0 12px 35px rgba(0, 36, 80, .2);
}

.wiq-image-label strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
}

.wiq-image-label span {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1.6;
}

.wiq-intro-copy .wiq-description {
    margin-bottom: 17px;
}

.wiq-check-list {
    display: grid;
    gap: 14px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.wiq-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--wiq-dark);
    font-size: 15px;
    line-height: 1.7;
}

.wiq-check-icon {
    display: inline-flex;
    flex: 0 0 23px;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    margin-top: 1px;
    border-radius: 50%;
    background: #edf6df;
    color: var(--wiq-blue);
    font-size: 14px;
    font-weight: 800;
}

/* ================= QUALITY PILLARS ================= */
.wiq-pillars {
    position: relative;
    background: var(--wiq-light);
}

.wiq-section-heading {
    max-width: 730px;
    margin: 0 auto 50px;
    text-align: center;
}

.wiq-section-heading .wiq-eyebrow {
    justify-content: center;
}

.wiq-section-heading .wiq-description {
    margin: 0;
}

.wiq-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.wiq-pillar-card {
    position: relative;
    padding: 35px 28px 32px;
    overflow: hidden;
    border: 1px solid #e5edf5;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 7px 28px rgba(0, 53, 110, .045);
    transition: transform .35s ease, box-shadow .35s ease,
                border-color .35s ease;
}

.wiq-pillar-card::after {
    position: absolute;
    content: "";
    right: -30px;
    bottom: -50px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: rgba(140, 199, 70, .10);
    transition: transform .35s ease;
}

.wiq-pillar-card:hover {
    transform: translateY(-8px);
    border-color: var(--wiq-green);
    box-shadow: 0 20px 45px rgba(0, 53, 110, .11);
}

.wiq-pillar-card:hover::after {
    transform: scale(1.5);
}

.wiq-pillar-number {
    display: block;
    margin-bottom: 20px;
    color: #c5d4e5;
    font-size: 37px;
    font-weight: 800;
    line-height: 1;
}

.wiq-pillar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 23px;
    border-radius: 12px;
    background: var(--wiq-blue);
    color: var(--wiq-green);
    font-size: 28px;
    transition: background .3s ease, color .3s ease;
}

.wiq-pillar-card:hover .wiq-pillar-icon {
    background: var(--wiq-green);
    color: var(--wiq-blue);
}

.wiq-pillar-card h3 {
    margin: 0 0 14px;
    color: var(--wiq-blue);
    font-size: 21px;
    line-height: 1.4;
}

.wiq-pillar-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--wiq-text);
    font-size: 14px;
    line-height: 1.9;
}

/* ================= INSPECTION PROCESS ================= */
.wiq-process-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 65px;
}

.wiq-process-image img {
    height: 490px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 15px 45px rgba(14, 48, 85, .13);
}

.wiq-process-list {
    display: grid;
    gap: 0;
    margin-top: 30px;
}

.wiq-process-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    padding-bottom: 28px;
}

.wiq-process-item:last-child {
    padding-bottom: 0;
}

.wiq-process-item:not(:last-child)::after {
    position: absolute;
    content: "";
    top: 48px;
    bottom: 0;
    left: 25px;
    width: 2px;
    background: #dce8f2;
}

.wiq-process-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid #dcebd0;
    border-radius: 50%;
    background: #eff7e8;
    color: var(--wiq-blue);
    font-size: 16px;
    font-weight: 800;
}

.wiq-process-item h3 {
    margin: 3px 0 8px;
    color: var(--wiq-blue);
    font-size: 19px;
}

.wiq-process-item p {
    margin: 0;
    color: var(--wiq-text);
    font-size: 14px;
    line-height: 1.8;
}

/* ================= QUALITY COMMITMENT BAND ================= */
.wiq-commitment {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background: var(--wiq-blue);
}

.wiq-commitment::after {
    position: absolute;
    content: "";
    top: -150px;
    right: -90px;
    width: 350px;
    height: 350px;
    border: 55px solid rgba(140, 199, 70, .12);
    border-radius: 50%;
    pointer-events: none;
}

.wiq-commitment-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    gap: 40px;
}

.wiq-commitment h2 {
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(28px, 3.5vw, 39px);
    line-height: 1.25;
}

.wiq-commitment p {
    max-width: 730px;
    margin: 0;
    color: rgba(255, 255, 255, .83);
    font-size: 15px;
    line-height: 1.9;
}

.wiq-commitment-action {
    text-align: right;
}

/* ================= CONTINUOUS IMPROVEMENT ================= */
.wiq-improvement {
    background: #fff;
}

.wiq-improvement-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.wiq-improvement-card {
    padding: 28px 22px;
    border-top: 4px solid var(--wiq-green);
    border-radius: 4px 4px 8px 8px;
    background: var(--wiq-light);
    transition: background .3s ease, transform .3s ease;
}

.wiq-improvement-card:hover {
    transform: translateY(-5px);
    background: #edf5e5;
}

.wiq-improvement-card h3 {
    margin: 0 0 12px;
    color: var(--wiq-blue);
    font-size: 18px;
}

.wiq-improvement-card p {
    margin: 0;
    color: var(--wiq-text);
    font-size: 14px;
    line-height: 1.8;
}

/* ================= FINAL CTA ================= */
.wiq-contact-cta {
    padding: 0 0 90px;
}

.wiq-cta-box {
    position: relative;
    padding: 55px 50px;
    overflow: hidden;
    border-radius: 10px;
    background:
        linear-gradient(110deg, rgba(0, 76, 158, .98),
        rgba(0, 76, 158, .88));
    text-align: center;
}

.wiq-cta-box::before,
.wiq-cta-box::after {
    position: absolute;
    content: "";
    width: 170px;
    height: 170px;
    border: 28px solid rgba(140, 199, 70, .15);
    border-radius: 50%;
}

.wiq-cta-box::before {
    top: -100px;
    left: -50px;
}

.wiq-cta-box::after {
    right: -55px;
    bottom: -115px;
}

.wiq-cta-box h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(27px, 4vw, 38px);
    line-height: 1.3;
}

.wiq-cta-box p {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto 25px;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    line-height: 1.9;
}

.wiq-cta-box .wiq-btn {
    position: relative;
    z-index: 1;
}

/* ================= ANIMATIONS ================= */
@keyframes wiq-fade-up {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wiq-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}

.wiq-reveal.wiq-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .wiq-page *,
    .wiq-page *::before,
    .wiq-page *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .wiq-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ================= TABLET RESPONSIVE ================= */
@media (max-width: 991px) {
    .wiq-section {
        padding: 70px 0;
    }

    .wiq-hero {
        min-height: 420px;
    }

    .wiq-intro-grid,
    .wiq-process-grid {
        gap: 38px;
    }

    .wiq-intro-image img {
        height: 360px;
    }

    .wiq-pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wiq-process-image img {
        height: 430px;
    }

    .wiq-improvement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wiq-commitment-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .wiq-commitment-action {
        text-align: left;
    }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 767px) {
    .wiq-container {
        width: min(100% - 34px, 540px);
    }

    .wiq-section {
        padding: 55px 0;
    }

    .wiq-hero {
        min-height: 440px;
        padding: 65px 0;
        background-position: 58% center;
    }

    .wiq-hero h1 {
        font-size: 39px;
    }

    .wiq-hero p {
        font-size: 15px;
        line-height: 1.8;
    }

    .wiq-heading {
        font-size: 30px;
    }

    .wiq-intro-grid,
    .wiq-process-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .wiq-intro-image {
        margin-right: 10px;
    }

    .wiq-intro-image img {
        height: 330px;
    }

    .wiq-image-label {
        right: -10px;
        bottom: 30px;
        max-width: 220px;
        padding: 16px 18px;
    }

    .wiq-pillar-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .wiq-pillar-card {
        padding: 28px 24px;
    }

    .wiq-section-heading {
        margin-bottom: 32px;
    }

    .wiq-process-image img {
        height: 330px;
    }

    .wiq-process-item {
        grid-template-columns: 45px 1fr;
        gap: 14px;
    }

    .wiq-process-step {
        width: 45px;
        height: 45px;
    }

    .wiq-process-item:not(:last-child)::after {
        left: 21px;
        top: 42px;
    }

    .wiq-commitment {
        padding: 48px 0;
    }

    .wiq-improvement-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wiq-improvement-card {
        padding: 24px 22px;
    }

    .wiq-contact-cta {
        padding-bottom: 55px;
    }

    .wiq-cta-box {
        padding: 42px 22px;
    }

    .wiq-btn {
        padding: 14px 20px;
    }
}

@media (max-width: 380px) {
    .wiq-hero h1 {
        font-size: 33px;
    }

    .wiq-hero {
        min-height: 400px;
    }

    .wiq-breadcrumb {
        gap: 7px;
        font-size: 12px;
    }
}