@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap');

:root{
	/* <!---------- Color ----------!> */
	--body-bg-blue-color: #0060A1;
	--body-bg-yellow-color: #FFCC5A;
	--body-bg-light-color: #EEF2F6;
	--body-bg-white-color: #ffffff;

	--white-text-color: #ffffff;
	--black-text-color: #2F2F2F;

	--border-light-color: #dbdbdb;
	--border-white-color: rgb(255, 255, 255, 0.5);

	/* <!---------- Font Weight ----------!> */
	--fw-light: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	--sm-font-size: 14px;
	--body-font-size: 16px;

	/* <!---------- Padding & Margin ----------!> */
	--section-padding: 60px;
	--section-padding-sm: 30px;

	--gap-60: 30px;
	--gap-15: 15px;
	--gap-30: 15px;
	--gap-20-30-60: 20px;
	--gap-10-30: 5px;

	/* <!---------- Border Radius ----------!> */
	--b-radius-section: 50px;
	--b-radius-sm: 30px;

	--btn-arrow-fs: 24px;
	--btn-arrow-padding: 7.75px 8px;
	--btn-arrow-rounded: 20px;
}

@media(min-width: 992px){
	:root{
		--sm-font-size: 16px;
		--body-font-size: 18px;
		/* <!---------- Padding & Margin ----------!> */
		--section-padding: 120px;
		--section-padding-sm: 60px;

		--gap-60: 60px;
		--gap-30: 30px;
		--gap-10-30: 15px;
		--gap-20-30-60: 30px;

		/* <!---------- Border Radius ----------!> */
		--b-radius-section: 80px;
		--b-radius-sm: 50px;

		--btn-arrow-fs: 28px;
		--btn-arrow-rounded: 25px;
	}
}

@media(min-width: 1200px){
	:root{
		/* <!---------- Border Radius ----------!> */
		--b-radius-section: 120px;
		--gap-20-30-60: 60px;
	}
}

body {font-size: var(--body-font-size); font-family: 'Barlow', sans-serif; background-color: var(--body-bg-white-color); color: var(--black-text-color);}
ul {padding-left: 20px}
ul.list-none {list-style-type: none; padding: 0!important; margin: 0!important;}
ul.list-none, header ul, footer ul {list-style-type: none!important; padding: 0!important; margin: 0!important;}
footer ul li{line-height: 2.2rem}
a {color: var(--black-text-color); text-decoration: none; display: inline-block;}
a:hover {color: var(--body-bg-blue-color); text-decoration: none;}

/* <!---------- Font ----------!> */
h1 {text-transform: uppercase;}
h1, h2, h3 {color: var(--body-bg-blue-color); font-weight: var(--fw-bold)!important;}
h4, h5, h6 {color: var(--body-bg-blue-color); font-weight: var(--fw-medium)!important;}
.fs-1,.fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {font-weight: var(--fw-medium); line-height: 1.2!important}
h3 {font-size: calc(1.5rem + .8vw);}

h1 + h2, h2 + h3 {color: var(--black-text-color);}
h2 + h3 {font-weight: var(--fw-medium)!important;}

.xl-font {font-size: 42px; line-height: 0.9}
.xxl-font {font-size: 50px; line-height: 0.9;}

@media(min-width: 768px){
	.xl-font {font-size: 70px;}
	.xxl-font {font-size: calc(3.5rem + 3.9vw);}
}

@media(min-width: 992px){
	h1 {font-size: 2.8rem}
	h2 {font-size: 2.5rem}
	h3 {font-size: 1.75rem}
	.xl-font {font-size: 4vw; line-height: 0.95;}
	.xxl-font {font-size: calc(4.5rem + 4.9vw);}
}

/* <!---------- Other ----------!> */
hr {background-color: var(--border-light-color); height: 1px;}
hr.white {background-color: var(--border-white-color);}
.p-last-0 p:last-child {margin-bottom: 0!important}

/* <!---------- Section Padding ----------!> */
.section-padding {padding: var(--section-padding) 0;}
.padding-gap {padding: var(--section-padding) var(--gap-20-30-60);}
.section-padding-sm {padding: var(--section-padding-sm) 0;}
.container.section-padding-sm, .row.section-padding, .row.section-padding-sm, .container.section-padding {padding-left: 12px; padding-right: 12px}

/* <!---------- Margin & Padding ----------!> */
.p-60 {padding: var(--gap-60);}
.p-30 {padding: var(--gap-30);}
.pt-60 {padding-top: var(--gap-60);}
.pt-30 {padding-top: var(--gap-30);}
.pe-30 {padding-right: var(--gap-30);}
.pb-30 {padding-bottom: var(--gap-30);}
.py-60 {padding-top: var(--gap-60)!important; padding-bottom: var(--gap-60)!important;}
.my-60 {margin-top: var(--gap-60)!important; margin-bottom: var(--gap-60)!important;}
.my-30 {margin-top: var(--gap-30)!important; margin-bottom: var(--gap-30)!important;}

.me-15 {margin-right: var(--gap-15);}

.me-60 {margin-right: var(--gap-60);}
.mb-60 {margin-bottom: var(--gap-60);}

.ms-30 {margin-left: var(--gap-30)!important;}
.ms-10 {margin-left: 10px!important;}
.mt-30 {margin-top: var(--gap-30);}
.mb-30 {margin-bottom: var(--gap-30);}
.mb-15 {margin-bottom: var(--gap-15);}

@media(max-width: 991px){
	.pt-max-0 {padding-top: 0!important}
}

@media(min-width: 992px){
	.px-lg-60 {padding-left: var(--gap-60)!important; padding-right: var(--gap-60)!important;}
}

/* <!---------- Mobile Gap 20px row col ----------!> */

.row-col-gap-60 {margin-bottom: -60px;}
.row-col-gap-60>* {margin-bottom: 60px;}

.row-col-gap-24 {margin-bottom: -24px;}
.row-col-gap-24>* {margin-bottom: 24px;}

@media(max-width: 991px){
	.row-revers-lg {flex-wrap: wrap-reverse;}
}

@media(max-width: 767px){
	.row {margin-left: -20px; margin-right: -20px;}
	.row>* {padding-left: 20px; padding-right: 20px;}
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {padding-left: 20px; padding-right: 20px;}
	.container.section-padding-sm, .row.section-padding, .row.section-padding-sm, .container.section-padding {padding-left: 20px; padding-right: 20px}
	.row.g-0 {padding: 0;}
	.row.gy-0 {padding-top: 0!important; padding-bottom: 0!important;}
	.row.gy-0>* {padding-top: 0!important; padding-bottom: 0!important;}
	.row.g-0>* {padding: 0;}
	.row-revers-md {flex-wrap: wrap-reverse;}
}

/* <!---------- Button ----------!> */
.btn {font-size: var(--sm-font-size); font-weight: var(--fw-bold); line-height: 1; padding: 12px 15px; border: unset!important; border-radius: var(--btn-arrow-rounded) 0 0 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.2s ease}
.btn:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; transition: all 0.2s linear; z-index: -1;}
.btn:hover:after {height: 100%}
.btn:focus {box-shadow: unset!important;}
.btn.btn-blue {color: var(--white-text-color)!important; background-color: var(--body-bg-blue-color)!important;}
.btn.btn-blue:after {background-color: var(--black-text-color);}
.btn.btn-light {color: var(--body-bg-blue-color)!important; background-color: var(--white-text-color)!important;}
.btn.btn-light:after {background-color: var(--black-text-color);}
.btn.btn-light:hover {color: var(--white-text-color);}
.btn .bi:before {font-size: var(--btn-arrow-fs)}
.btn {display: inline-flex; align-items: center;}

.bi.btn {font-size: var(--btn-arrow-fs); padding: var(--btn-arrow-padding); border-start-start-radius: var(--btn-arrow-rounded);}
.swiper-button-next .bi.btn {border-start-start-radius: 0px!important; border-end-end-radius: var(--btn-arrow-rounded)!important}

@media(min-width: 992px){
	.btn {padding: 15px 30px; border-start-start-radius: 30px}
}

[data-aos="anim-clipright"] {clip-path: inset(0 0 0 100%); opacity: 0; transition: all 0.4s linear;}
[data-aos="anim-clipleft"] {clip-path: inset(0 100% 0 0); opacity: 0; transition: all 0.4s linear;}
[data-aos="anim-clipright"].aos-animate, [data-aos="anim-clipleft"].aos-animate {clip-path: inset(0 0 0 0); opacity: 1;}

/* <!---------- Color ----------!> */
.bg-light {background-color: var(--body-bg-light-color)!important;}
.bg-blue {background-color: var(--body-bg-blue-color)!important; color: var(--white-text-color);}
.text-black {color: var(--black-text-color);}
.bg-yellow {background-color: var(--body-bg-yellow-color); color: var(--black-text-color);}
.bg-blue {background-color: var(--body-bg-blue-color); color: var(--white-text-color);}
.bg-blue a, .bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue h5 {color: var(--white-text-color);}
.bg-blue a:hover {opacity: 0.8;}

/* <!---------- Border Radius ----------!> */
.rounded-tl {border-radius: var(--b-radius-section) 0 0 0;}
.rounded-tr {border-radius: 0 var(--b-radius-section) 0 0;}
.rounded-br {border-radius: 0 0 var(--b-radius-section) 0;}
.rounded-bl {border-radius: 0 0 0 var(--b-radius-section);}
.rounded-tl.rounded-br {border-radius: var(--b-radius-section) 0 var(--b-radius-section) 0!important;}
.rounded-tl-sm {border-radius: var(--b-radius-sm) 0 0 0;}
.rounded-tr-sm {border-radius: 0 var(--b-radius-sm) 0 0;}

@media(min-width: 992px){
	.rounded-tl-lg {border-radius: var(--b-radius-section) 0 0 0;}
}

/* <!---------- bg-image | Background image ----------!> */
.bg-image {height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat;}
.bg-image.size-1, .bg-image.size-1.lg {padding-bottom: 65%;}
.size-2 {padding-bottom: 50%}

@media(min-width: 992px){
	.bg-image.size-1.lg {padding-bottom: 0!important}
}

ul.list-line li {border-bottom: 1px solid var(--border-light-color); padding: 10px 0;}
ul.list-line li:last-child {border-bottom: unset; padding-bottom: 0!important;}
ul.list-line li:nth-child(1) {padding-top: 0!important;}

/* <!---------- Highlight line top ----------!> */
.highlight-top {position: relative; padding-top: 10px;}
.highlight-top:before {content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 3px; background-color: var(--body-bg-blue-color);}
h4.highlight-top:before {width: 25%;}
.highlight-top.center:before {right: 0; margin:  0 auto}
.highlight-top.text-white:before {background-color: var(--white-text-color);}
.zoom-img img {transition: all 0.4s ease;}
.zoom-img {overflow: hidden; display: inline-block;}
.zoom-img:hover img {transform: scale(1.05);}

@media(min-width: 992px){
	.highlight-top:before {width: 90px; height: 5px}
}

.lg-icon {width: 120px;}
.md-icon {width: 60px;}

@media(max-width: 991px){
	.lg-icon {width: 80px;}
	.md-icon {width: 40px;}
}

/* <!---------- Grid ----------!> */
.grid {display: grid; gap: 24px; grid-template-columns: auto;}
.row-gap-12 {row-gap: 12px!important}
.grid.same-box-3 {grid-template-columns: repeat(1, minmax(0, 1fr)); grid-auto-rows: 1fr;}

@media(min-width: 768px){
	.grid-md-2 {grid-template-columns: auto auto}
	.grid-md-3 {grid-template-columns: auto auto auto}
	.grid.same-box-3 {grid-template-columns: repeat(2, minmax(0, 1fr));}
	[rowspan="1"] {grid-column: 1 / 3;}
}

@media(min-width: 992px){
	.grid-lg-3 {grid-template-columns: auto auto auto}
	.grid-lg-4 {grid-template-columns: auto auto auto auto}
	.grid.same-box-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
	[rowspan="1"] {grid-column: unset;}
}

/* <!====================================================================================================
			Header
====================================================================================================!> */
.social-icons {margin: 0 -4px;}
.social-icons a {margin: 0 4px;}
.social-icons .bi {font-size: 20px!important; border-radius: 16px 0 0 !important}

.nav-link {color: var(--body-bg-blue-color)!important; font-weight: var(--fw-bold); padding: 20px; position: relative; height: 100%; display: flex; align-items: center;}
.nav-link:before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0px; background-color: var(--body-bg-blue-color); transition: all 0.3s linear;}
.nav-link:hover:before, .nav-link.show:before {height: 8px;}
.width-col {width: 20%; display: flex; align-items: center; padding: 15px 0;}

@media(max-width: 1200px){
	.nav-link {padding: 15px}
	.social-icons .bi {font-size: 18px!important;}
}

header {background-color: var(--body-bg-white-color); position: relative; z-index: 999;}
.dropdown-toggle:after {display: none;}
.dropdown-toggle .bi {display: inline-block; margin-left: 5px; transition: all 0.4s ease;}
.dropdown-toggle.show .bi {transform: rotate(-180deg);}
header .dropdown-menu {width: 100%!important; background-color: var(--body-bg-light-color); padding: 30px 0!important; border-radius: 0!important;}
.megamenu {position: unset!important;}

@media(max-width: 991px){
	#menu {position: fixed; top: 79.42px; right: -300px; bottom: 0; width: 280px; background-color: var(--body-bg-blue-color); box-shadow: 0 3px 8px black; z-index: 999; border-radius: 0 0 0 25px; transition: all 0.4s ease; overflow-y: auto!important;}
	.overlay {position: fixed; top: 0; left: 0; right: 100%; bottom: 0; background-color: rgb(0, 0, 0, 0.8); z-index: 992;}
	.nav {flex-direction: column; height: auto!important}
	.nav-link {color: var(--white-text-color)!important; height: auto;}
	.nav-link:hover {color: var(--white-text-color)!important; opacity: 0.8}
	.logo {width: 70px;}
	.width-col {width: 50%; padding: 10px 0;}

	.menubar {width: 30px; height: 30px; display: flex; flex-direction: column; justify-content: space-around;}
	.menubar span {display: block; width: 100%; height: 3px; background-color: var(--body-bg-blue-color); transition: .4s}
	header.active-menu #menu, .overlay.active {right: 0}
	header.active-menu .menubar span:nth-child(1) {-webkit-transform: matrix(.71,-.71,.71,.71,0,7); transform: matrix(.71,-.71,.71,.71,0,7);}
	header.active-menu .menubar span:nth-child(2) {-webkit-transform: matrix(.71,.71,-.71,.71,0,-8); transform: matrix(.71,.71,-.71,.71,0,-8);}

	.megamenu {position: relative;!important;}
	#menu .dropdown-menu {padding: 30px 15px!important;}
	#menu .dropdown-menu .pe-30 {padding-right: 0!important}
}

@media(min-width: 992px){
	.dropdown-menu {top: 100%!important; transform: unset!important; margin-top: -1px!important}
}


/* <!====================================================================================================
			Banner
====================================================================================================!> */

.banner-img {height: calc(100vh - 79.42px)!important; position: relative; overflow: hidden;}
.banner-img img {width: 100%; height: 100%; object-position: top center; object-fit: cover;}
.banner-img .banner-content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center;}
.banner-img .banner-content h2 {color: var(--white-text-color);}

@media(min-width: 992px){
	.banner-img {height: calc(100vh - 114.89px)!important;}
}

/*<!====================================================================================================
			Swiper Slider
====================================================================================================!>*/
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.swiper-button-next, .swiper-button-prev {margin: 0!important; padding: 0!important; width: unset!important; height: unset!important;}
.swiper-button-next {margin-left: 10px!important}

.static-nav {display: flex;}
.static-nav .swiper-button-prev, .static-nav .swiper-button-next {position: static!important; display: inline-block;}
.static-pagination .swiper-pagination, .static-pagination.swiper-pagination {position: static!important;}

.swiper-pagination {bottom: 15px!important}
.swiper-pagination-progressbar {background: var(--border-light-color);}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--body-bg-blue-color)!important;}

.swiper-pagination-bullet {width: 25px; height: 10px; border-radius: 6px 0 0 0; background-color: var(--body-bg-blue-color);}
.swiper-pagination.white .swiper-pagination-bullet {background-color: var(--body-bg-white-color);}

@media(max-width: 991px){
	.nav-max-none {display: none!important}
}

/* <!====================================================================================================
			Product Section
====================================================================================================!> */
.product-swiper {overflow: unset!important;}
.product_box {height: 320px; width: 100%; background-color: var(--body-bg-light-color); position: relative;}
.product_box:hover {cursor: pointer;}
.dropdown-menu .product_box {background-color: var(--white-text-color);}
.product_box .product_vt {font-size: 24px; width: 15px; margin-bottom: 0!important; position: absolute; bottom: 45px; right: 20px; transform: rotate(-90deg); white-space: nowrap; transition: all 0.2s linear;}
.product_box:hover .product_vt {bottom: 55px;}
.product_box .product_link {position: absolute; bottom: 0; right: 0;}
.product_box .product_link .btn {padding: var(--btn-arrow-padding); font-size: var(--btn-arrow-fs); border-start-start-radius: var(--btn-arrow-rounded); transform-origin: bottom right;}
.product_box:hover .product_link .btn {transform: scale(1.2);}

.product_img {position: relative; display: inline-block; height: 100%}
.product_img img {height: 100%}
.product_img .product_img_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.2s ease}
.product_img:hover img {opacity: 0;}
.product_img:hover .product_img_bg {opacity: 1!important;}

@media(min-width: 992px){
	.product_box {height: 350px;}
	.product_box .product_vt {font-size: 26px; width: 28px; bottom: 56px}
	.product_box:hover .product_vt {bottom: 70px}
}

@media(min-width: 1200px){
	.product_box {height: 400px}
	.product_box .product_vt {font-size: 32px;}
}

@media(min-width: 1400px){
	.product_box {height: 500px}
	.product_box .product_vt {font-size: 36px;}
}

/* <!====================================================================================================
			Group Unitform scroll section
====================================================================================================!> */
.group-uniform {display: flex; justify-content: flex-start; flex-direction: row;}
.group-uniform picture {margin: 0 30px;}

@media(max-width: 1600px){
	.group-uniform picture {height: 350px;}
}

@media(max-width: 991px){
	.group-uniform picture {height: 250px; margin: 0 15px;}
}

/* <!====================================================================================================
			Yello Section
====================================================================================================!> */

@media(max-width: 767px){
	.image-right img {height: 350px;}
	.image-right {display: flex; justify-content: center; padding-top: 0!important}
}

@media(min-width: 768px){
	.image-right {position: absolute; bottom: 0; left: 50%; height: 100%;}
	.image-right img {height: 100%; padding-left: 30px}
}

@media(min-width: 992px){
	.image-right img {padding-left: 60px}
}

/* <!====================================================================================================
			Footer
====================================================================================================!> */
footer .grid {row-gap: 30px}
footer {padding-top: 60px;}
footer address {max-width: 300px}
footer h4 {margin-bottom: var(--gap-10-30);}

@media(min-width: 768px) and (max-width: 991px){
	footer .grid .grid-item:nth-child(1) {order: -1}
	footer .grid .grid-item:nth-child(4) {order: -1}	
}

.fadeInUp {transform: translateY(210px); transition: all 600ms ease; transition-delay: 600ms; display: inline-block;}
.swiper-slide-active .fadeInUp, .banner-active .fadeInUp {transform: translateY(0);}

.slideIn {animation-name: slideIn; animation-duration: 0.4s; animation-fill-mode: both;}

@keyframes slideIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
	0% {opacity: 0;}
}

@media(min-width: 992px){
	.slideIn {animation-name: slideIn; animation-duration: 0.4s; animation-fill-mode: both;}
	@keyframes slideIn {
		0% {clip-path: inset(0 0 100% 0); opacity: 0;}
		100% {clip-path: inset(0 0 0 0); opacity: 1;}
		0% {clip-path: inset(0 0 100% 0); opacity: 0;}
	}
}

.inner-banner {height: 550px; border-radius: 0 0 var(--b-radius-section) 0; background-color: var(--black-text-color);}
.inner-banner .container {height: 100%; display: flex; align-items: center; position: relative;}
.inner-banner .container .img-right-fix {position: absolute; right: 60px; bottom: 0;}
.inner-banner:not(.bg-light) h1 {color: var(--white-text-color);}
.inner-banner h1 {z-index: 99;}

@media(max-width: 1399px){
	.inner-banner .container .img-right-fix img, .inner-banner {height: 450px;}
}

@media(max-width: 991px){
	.inner-banner .container .img-right-fix {right: 0;}
	.inner-banner .container .img-right-fix img {height: 250px}
	.inner-banner {height: 300px;}
}

.inner-banner .fade-up {transform: translateY(150px); transition: all 0.4s ease; display: inline-block;}
.inner-banner.active .fade-up {transform: translateY(0);}

@media(min-width: 992px){
	.border-left-right-lg {border: 1px solid var(--border-white-color); border-width: 0 1px;}
}

@media(min-width: 992px){
	.right-fixed {position: absolute; top: 0; right: 0; height: 100%; padding: 0;}
	.left-fixed {position: absolute; top: 0; left: 0; height: 100%; padding: 0;}
}

form label {font-weight: var(--fw-medium); margin-bottom: 10px;}
.form-group {margin-bottom: 1rem!important}
form .form-control {font-size: var(--body-font-size)!important; padding: 10px!important; margin-bottom: var(--gap-15); background-color: transparent; border-radius: 6px!important; border-width: 2px; border-color: var(--border-light-color)!important; appearance: revert!important;}
form select.form-control {padding: 11.5px 10px!important;}
form .form-control:focus {background-color: transparent!important; border-color: var(--body-bg-blue-color)!important; box-shadow: 0 0 0 0.25rem rgb(0 95 158 / 25%);}

.card {height: 100%;}
.card-body.dub {padding: var(--gap-30) 20px;}
.card .card-icon {transition: all 0.4s ease;}
.card:hover .card-icon {transform: translateY(-10px);}

@media(min-width: 992px){
	.card-body.dub {padding: var(--gap-30);}
}

.gallery>* {border: 4px solid transparent;}
.gallery img {height: 100%; object-position: center; object-fit: cover;}
.gallery .zoom-img, .gallery a {height: 100%;}

@media(min-width: 768px){
	.gallery-gap-left {padding-left: 3%!important;}
	.gallery-gap-right {padding-right: 3%!important;}
}